/**
* @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 * 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—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—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—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—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) — Sets the theme color as the text color. The background will be white.
* * `solid` — 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) — Renders the text below the icon.
* * `horizontal` — 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) — The BottomNavigation always stays at the bottom of the viewport, regardless of the page scroll position.
* * `sticky` — 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) — Applies coloring based on the primary theme color.
* * `secondary` — Applies coloring based on the secondary theme color.
* * `tertiary` — Applies coloring based on the tertiary theme color.
* * `info` — Applies coloring based on the info theme color.
* * `success` — Applies coloring based on the success theme color.
* * `warning` — Applies coloring based on the warning theme color.
* * `error` — Applies coloring based on the error theme color.
* * `dark` — Applies coloring based on the dark theme color.
* * `light` — Applies coloring based on the light theme color.
* * `inverse` — 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) — Sets the theme color as the text color. The background will be white.
* * `solid` — 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) — The BottomNavigation always stays at the bottom of the viewport, regardless of the page scroll position.
* * `sticky` — 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) — Renders the text below the icon.
* * `horizontal` — 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) — Applies coloring based on the primary theme color.
* * `secondary` — Applies coloring based on the secondary theme color.
* * `tertiary` — Applies coloring based on the tertiary theme color.
* * `info` — Applies coloring based on the info theme color.
* * `success` — Applies coloring based on the success theme color.
* * `warning` — Applies coloring based on the warning theme color.
* * `error` — Applies coloring based on the error theme color.
* * `dark` — Applies coloring based on the dark theme color.
* * `light` — Applies coloring based on the light theme color.
* * `inverse` — 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.
*/
onClose: (event: React_2.SyntheticEvent<HTMLElement>) => void;
}
/**
* Represents the DataModel object type.
*/
export declare interface DataModel {
/**
* Represents the `id` of the data object.
* Used for setting the `key` of the BreadcrumbListItem component and the `id` of the BreadcrumbLink component.
*/
id?: string;
/**
* Represents the `text` used inside the BreadcrumbLink component.
*/
text?: string;
/**
* Represents the `icon` used inside the BreadcrumbLink component.
*/
icon?: React_2.ReactNode;
/**
* Represents the `iconClass` used inside the BreadcrumbLink component.
*/
iconClass?: string;
/**
* @hidden
*/
disabled?: boolean;
}
/**
* @hidden
*/
export declare const downArrowName = "caret-alt-down";
/**
* Represents the [KendoReact Drawer component]({% slug overview_drawer %}).
*
* @example
* ```jsx
* const App = () => {
* const items = [
* { text: 'Inbox', icon: 'k-i-inbox', selected: true },
* { separator: true },
* { text: 'Notifications', icon: 'k-i-bell', disabled: true },
* { text: 'Calendar', icon: 'k-i-calendar' },
* { separator: true },
* { text: 'Attachments', icon: 'k-i-hyperlink-email' },
* { text: 'Favourites', icon: 'k-i-star-outline' }
* ];
*
* const [expanded, setExpanded] = React.useState(true);
* const handleClick = () => setExpanded(prevState => !prevState);
*
* return (
* <Drawer expanded={expanded} position='start' mode='push' items={items}>
* <DrawerContent>
* <button className="k-button" onClick={handleClick}>Toggle the drawer state</button>
* </DrawerContent>
* </Drawer>
* );
* };
* ReactDOM.render(<App />, document.querySelector('my-app'));
* ```
*/
export declare const Drawer: React_2.ForwardRefExoticComponent<DrawerProps & React_2.RefAttributes<DrawerHandle | null>>;
/**
* Specifies the animation settings of the Drawer.
*
*/
export declare interface DrawerAnimation {
/**
* Specifies the type of the Drawer animation.
*/
type?: 'slide';
/**
* Specifies the duration of the Drawer animation ([see example]({% slug display_modes_drawer %}#toc-expand-modes)) .
*/
duration: number;
}
/**
* Represents the [KendoReact Drawer component]({% slug overview_drawer %}).
*
* @example
* ```jsx
* const App = () => {
* const items = [
* { text: 'Inbox', icon: 'k-i-inbox', selected: true },
* { separator: true },
* { text: 'Notifications', icon: 'k-i-bell', disabled: true },
* { text: 'Calendar', icon: 'k-i-calendar' },
* { separator: true },
* { text: 'Attachments', icon: 'k-i-hyperlink-email' },
* { text: 'Favourites', icon: 'k-i-star-outline' }
* ];
*
* const [expanded, setExpanded] = React.useState(true);
* const handleClick = () => setExpanded(prevState => !prevState);
*
* return (
* <Drawer expanded={expanded} position='start' mode='push' items={items}>
* <DrawerContent>
* <button className="k-button" onClick={handleClick}>Toggle the drawer state</button>
* </DrawerContent>
* </Drawer>
* );
* };
* ReactDOM.render(<App />, document.querySelector('my-app'));
* ```
*/
export declare const DrawerContent: React_2.ForwardRefExoticComponent<DrawerContentProps & React_2.RefAttributes<DrawerContentHandle | null>>;
/**
* The DrawerContent ref.
*/
export declare interface DrawerContentHandle {
element: HTMLDivElement | null;
}
/**
* The properties of the [KendoReact DrawerContent component]({% slug overview_drawer %}).
*/
export declare interface DrawerContentProps {
/**
* Sets the DrawerContent items declaratively.
*/
children?: any;
/**
* Specifies a list of CSS classes that will be added to the DrawerContent element.
*/
className?: string;
/**
* Sets additional CSS styles to the DrawerContent.
*/
style?: React.CSSProperties;
}
/**
* The Drawer ref.
*/
export declare interface DrawerHandle {
element: HTMLDivElement | null;
focus: () => void;
}
/**
* Represents the [KendoReact Drawer component]({% slug overview_drawer %}).
*
* @example
* ```jsx
* const App = () => {
* const [stateVisible, setStateVisible] = React.useState(true);
* const handleClick = () => { setStateVisible(prevState => !prevState); };
*
* return (
* <Drawer expanded={stateVisible} mode={'push'}>
* <DrawerNavigation>
* <DrawerItem text="Inbox" icon="k-i-inbox" />
* <DrawerItem separator={true} />
* <DrawerItem text="Notifications" icon="k-i-bell" disabled={true}/>
* <DrawerItem text="Calendar" icon="k-i-calendar"/>
* <DrawerItem separator={true} />
* <DrawerItem text="Attachments" icon="k-i-hyperlink-email" selected={true}/>
* <DrawerItem text="Favourites" icon="k-i-star-outline"/>
* </DrawerNavigation>
* <DrawerContent><button className="k-button" onClick={handleClick}>Toggle the drawer state</button></DrawerContent>
* </Drawer>
* );
* };
*
* ReactDOM.render(<App />, document.querySelector('my-app'));
* ```
*/
export declare const DrawerItem: React_2.ForwardRefExoticComponent<Omit<DrawerItemProps, "ref"> & React_2.RefAttributes<DrawerItemHandle | null>>;
/**
* The DrawerItem ref.
*/
export declare interface DrawerItemHandle {
/**
* The DrawerItem element.
*/
element: HTMLLIElement | null;
/**
* Focus the DrawerItem.
*/
focus: () => void;
/**
* The props of the DrawerItem.
*/
props: any;
}
/**
* An interface for the Drawer items.
*/
export declare interface DrawerItemProps {
/**
* Represents the children that are passed to the DrawerItem.
*/
children?: any;
/**
* Specifies a list of CSS classes that will be added to the DrawerItem element.
*/
className?: string;
/**
* Sets additional CSS styles to the Drawer item.
*/
style?: React.CSSProperties;
/**
* Specifies if the Drawer item is disabled.
*/
disabled?: boolean;
/**
* Defines the name for an existing icon in a KendoReact theme.
* The icon is rendered inside the Drawer item by a `span.k-icon` element.
*/
icon?: string;
/**
* Defines the SVG icon of the item.
*/
svgIcon?: SVGIcon;
/**
* Specifies if the Drawer item is initially selected.
*/
selected?: boolean;
/**
* Specifies if this is a separator item.
*/
separator?: boolean;
/**
* Specifies the text content of the Drawer item.
*/
text?: string;
/**
* Sets the index of the DrawerItem that is used to identify it.
*/
index?: number;
/**
* Sets the `tabIndex` property of the DrawerItem.
* Defaults to `0`.
*/
tabIndex?: number;
/**
* Sets a custom property. Contained in the DrawerItem props that are returned from the `onSelect` Drawer event.
*/
[customProp: string]: any;
/**
* This property is used in scenarios with hierarchical drawer. The rendering of the component requires each node to have a "`k-level-` + the level of nesting" className.
* The nesting levels should be handled by the developer. The root level items have a level of 0.
*/
level?: number;
/**
* @hidden
*/
onSelect?(target?: any, idx?: number, event?: React.SyntheticEvent<Element>): void;
}
/**
* Represents the [KendoReact Drawer component]({% slug overview_drawer %}).
*
* @example
* ```jsx
* const App = () => {
* const [expanded, setExpanded] = React.useState(true);
* const handleClick = () => setExpanded(prevState => !prevState);
*
* return (
* <Drawer expanded={expanded} position='start' mode='push'>
* <DrawerNavigation>
* <ul className="k-drawer-items">
* <li className="k-drawer-item k-selected">
* <span className="k-item-text">Home</span>
* </li>
* <li className="k-drawer-item">
* <span className="k-item-text">Products</span>
* </li>
* <li className="k-drawer-item">
* <span className="k-item-text">About</span>
* </li>
* </ul>
* </DrawerNavigation>
* <DrawerContent>
* <button className="k-button" onClick={handleClick}>Toggle the drawer state</button>
* </DrawerContent>
* </Drawer>
* );
* };
* ReactDOM.render(<App />, document.querySelector('my-app'));
* ```
*/
export declare const DrawerNavigation: React_2.ForwardRefExoticComponent<DrawerNavigationProps & React_2.RefAttributes<DrawerNavigationHandle | null>>;
/**
* @hidden
*/
export declare interface DrawerNavigationHandle {
element: HTMLDivElement | null;
focus: () => void;
}
/**
* The properties of the [KendoReact DrawerNavigation component]({% slug overview_drawer %}).
*/
export declare interface DrawerNavigationProps {
/**
* Sets the DrawerNavigation items declaratively.
*/
children?: any;
/**
* Specifies a list of CSS classes that will be added to the DrawerNavigation element.
*/
className?: string;
/**
* Sets additional CSS styles to the DrawerNavigation.
*/
style?: React.CSSProperties;
}
/**
* The properties of the [KendoReact Drawer component]({% slug overview_drawer %}).
*/
export declare interface DrawerProps {
/**
* Specifies the animation settings of the Drawer.
* If boolean enables or disables the default animation.
* Use DrawerAnimation to set slide animation with customizable duration option. Accepts a number in milliseconds.
*/
animation?: boolean | DrawerAnimation;
/**
* Specifies the state of the Drawer. Defaults to `false` ([see example]({% slug expanded_state_drawer %})).
*/
expanded?: boolean;
/**
* Sets the Drawer items declaratively.
*/
children?: any;
/**
* Specifies a list of CSS classes that will be added to the `k-drawer-container` element.
*/
className?: string;
/**
* Specifies a list of CSS classes that will be added to the `k-drawer` element.
*/
drawerClassName?: string;
/**
* Represents the `dir` HTML attribute. This is used to switch from LTR to RTL.
*/
dir?: string;
/**
* Specifies the mode in which the Drawer will be displayed.
* The possible values are `overlay` and `push`.
* Defaults to `overlay` ([see example]({% slug display_modes_drawer %}#toc-expand-modes)).
*/
mode?: 'overlay' | 'push';
/**
* Specifies the position of the Drawer.
* The possible values are `start` and `end` ([see example]({% slug positioning_drawer %})).
*/
position?: 'start' | 'end';
/**
* Sets additional CSS styles to the Drawer.
*/
style?: React_2.CSSProperties;
/**
* Sets the `tabIndex` property of the Drawer.
*/
tabIndex?: number;
/**
* Enables the mini (compact) view of the Drawer which is displayed when the component is collapsed
* ([see example]({% slug display_modes_drawer %}#toc-mini-view))).
*/
mini?: boolean;
/**
* Defines the width of the Drawer when the mini view is enabled and the component is collapsed. Defaults to `50`.
*/
miniWidth?: number;
/**
* Defines the width of the Drawer when it is expanded. Defaults to `240`.
*/
width?: number;
/**
* The collection of items that will be rendered in the Drawer ([see example]({% slug overview_drawer %})).
*/
items?: Array<DrawerItemProps>;
/**
* Overrides the default component responsible for visualizing a single item ([see example]({% slug custom_rendering %})).
*
* The default Component is: [DrawerItem]({% slug api_layout_draweritem %}).
*/
item?: React_2.ComponentType<DrawerItemProps>;
/**
* The event handler that will be fired when the overlay is clicked.
* Used in overlay mode only.
*/
onOverlayClick?: (event: React_2.MouseEvent<HTMLDivElement, MouseEvent>) => void;
/**
* Fires when a Drawer item is selected.
*/
onSelect?: (event: DrawerSelectEvent) => void;
}
/**
* The arguments for the `onSelect` Drawer event.
*/
export declare interface DrawerSelectEvent extends BaseEvent<DrawerHandle> {
/**
* A Drawer item event target.
*/
itemTarget: any;
/**
* The index of the selected Drawer item.
*/
itemIndex: number;
}
declare interface EventDataProps {
/**
* A React Synthetic Event.
*/
syntheticEvent?: React_2.SyntheticEvent<any>;
/**
* A native DOM event.
*/
nativeEvent?: any;
/**
* The selected card value.
*/
eventData: TimelineEventProps;
}
/**
* Represents the [KendoReact ExpansionPanel component]({% slug overview_expansionpanel %}).
*/
export declare const ExpansionPanel: React_2.ForwardRefExoticComponent<ExpansionPanelProps & React_2.RefAttributes<ExpansionPanelHandle | null>>;
/**
* The arguments for the `onAction` ExpansionPanel event.
*/
export declare interface ExpansionPanelActionEvent extends BaseEvent<ExpansionPanelHandle> {
/**
* Represents the `expanded` state of the ExpansionPanel.
*/
expanded: boolean;
}
/**
* Represents the KendoReact ExpansionPanelContent component.
*/
export declare const ExpansionPanelContent: React_2.ForwardRefExoticComponent<React_2.HTMLAttributes<HTMLDivElement> & React_2.RefAttributes<HTMLDivElement>>;
/**
* The ExpansionPanel ref.
*/
export declare interface ExpansionPanelHandle {
/**
* The ExpansionPanel element.
*/
element: HTMLDivElement | null;
}
/**
* The props of the ExpansionPanel component.
*/
export declare interface ExpansionPanelProps {
/**
* The React elements that will be rendered inside the ExpansionPanel.
*/
children?: React.ReactNode;
/**
* Sets additional CSS classes to the ExpansionPanel.
*/
className?: string;
/**
* Sets additional CSS styles to the ExpansionPanel.
*/
style?: React.CSSProperties;
/**
* Sets the `id` property of the root ExpansionPanel element.
*/
id?: string;
/**
* Specifies the primary text in the header of the ExpansionPanel.
*/
title?: React.ReactNode;
/**
* Specifies the secondary text in the header of the ExpansionPanel, which is rendered next to the collapse/expand icon.
*/
subtitle?: React.ReactNode;
/**
* Sets a custom icon via css class(es), for the expanded state of the ExpansionPanel.
*/
expandIcon?: string;
/**
* Sets a custom icon via css class(es), for the collapsed state of the ExpansionPanel.
*/
collapseIcon?: string;
/**
* Sets a custom SVG icon for the expanded state of the ExpansionPanel.
*/
expandSVGIcon?: SVGIcon;
/**
* Sets a custom SVG icon for the collapsed state of the ExpansionPanel.
*/
collapseSVGIcon?: SVGIcon;
/**
* Sets the `dir` property of the ExpansionPanel.
*/
dir?: string;
/**
* Sets the `tabIndex` property of the ExpansionPanel.
*/
tabIndex?: number;
/**
* Sets the `expanded` state of the ExpansionPanel.
*/
expanded?: boolean;
/**
* Sets the `disabled` state of the ExpansionPanel.
*/
disabled?: boolean;
/**
* Sets `aria-controls`. The value should represent the `id` of the controlled content element.
*/
ariaControls?: string;
/**
* The event handler that will be fired when the expanded state of the ExpansionPanel is about to change.
*/
onAction?: (event: ExpansionPanelActionEvent) => void;
}
/**
* @hidden
*/
export declare function flatChildren(children: any, flattenChildren?: any[]): any[];
/**
* @hidden
*/
export declare function flatVisibleChildren(children: any, flattenVisibleChildren?: any[]): any[];
/**
* @hidden
*/
export declare function flatVisibleItems(data: any, flattedItems?: any[]): any[];
/**
* @hidden
*/
export declare const footerDisplayName = "ActionSheetFooter";
/**
* @hidden
*/
export declare const getFirstId: (props: any) => any;
/**
* @hidden
*/
export declare const getFocusedChild: (flattenChildren: any, step: number, event: any, focused?: string, action?: NavigationAction) => any;
/**
* @hidden
*/
export declare const getInitialState: (props: any, expandMode: PanelBarExpandMode, result?: PanelBarState, parentExpanded?: boolean, parentPrivateKey?: string[]) => PanelBarState;
/**
* Represents the [KendoReact GridLayout component]({% slug overview_gridlayout %}).
* Arranges the contents of the component in rows and columns in a grid structure.
*
* @example
* ```jsx
*
* const App = () => {
* return (
* <GridLayout
* rows={[{height: 50}, {height: 50}, {height: 50}]}
* cols={[{width: 50}, {width: 50}, {width: 50}]}
* gap={{rows: 5, cols: 5}}
* align={{horizontal: 'stretch', vertical: 'stretch'}}
* >
* <GridLayoutItem row={1} col={1}>Box</GridLayoutItem>
* <GridLayoutItem row={1} col={2} colSpan={2}>Box</GridLayoutItem>
* <GridLayoutItem row={2} col={1} colSpan={2} rowSpan={2}>Box</GridLayoutItem>
* <GridLayoutItem row={2} col={3}>Box</GridLayoutItem>
* <GridLayoutItem row={3} col={3}>Box</GridLayoutItem>
* </GridLayout>
* );
* };
* ReactDOM.render(<App />, document.querySelector('my-app'));
* ```
*/
export declare const GridLayout: React_2.ForwardRefExoticComponent<GridLayoutProps & React_2.RefAttributes<GridLayoutHandle | null>>;
/**
* Specifies the horizontal and vertical alignment of the inner GridLayout elements.
*/
export declare interface GridLayoutAlign {
/**
* Defines the possible horizontal alignment of the inner GridLayout elements.
*
* The available values are:
* - `start`—Uses the start point of the container.
* - `center`—Uses the center point of the container.
* - `end`—Uses the end point of the container.
* - (Default)`stretch`—Stretches the items to fill the width of the container.
*/
horizontal?: 'start' | 'center' | 'end' | 'stretch';
/**
* Defines the possible vertical alignment of the inner GridLayout elements.
*
* The available values are:
* - `top`—Uses the top point of the container.
* - `middle`—Uses the middle point of the container.
* - `bottom`—Uses the bottom point of the container.
* - (Default)`stretch`—Stretches the items to fill the height of the container.
*/
vertical?: 'top' | 'middle' | 'bottom' | 'stretch';
}
/**
* Represents the props of the [KendoReact GridLayout column]({% slug overview_gridlayout %}).
*/
export declare interface GridLayoutColumnProps {
/**
* Specifies the width of the GridLayout column ([see example]({% slug overview_gridlayout %}#kendoreact-gridlayout-overview)).
*/
width?: number | string;
}
/**
* Specifies the gaps between the elements.
*/
export declare interface GridLayoutGap {
/**
* Represents the row gap between the elements
*/
rows?: number | string;
/**
* Represents the column gap between the elements
*/
cols?: number | string;
}
/**
* Represents the Object which is passed to the [`ref`](https://react.dev/learn/referencing-values-with-refs#refs-and-the-dom)
* callback of the GridLayout component.
*/
export declare interface GridLayoutHandle {
/**
* Represents the current element. If no current element is present, `element` is `null`.
*/
element: HTMLDivElement | null;
}
/**
* Represents the [KendoReact GridLayoutItem component]({% slug overview_gridlayout %}).
*
* @example
* ```jsx
*
* const App = () => {
* return (
* <GridLayout
* rows={[{height: 50}, {height: 50}, {height: 50}]}
* cols={[{width: 50}, {width: 50}, {width: 50}]}
* gap={{rows: 5, cols: 5}}
* align={{horizontal: 'stretch', vertical: 'stretch'}}
* >
* <GridLayoutItem row={1} col={1}>Box</GridLayoutItem>
* <GridLayoutItem row={1} col={2} colSpan={2}>Box</GridLayoutItem>
* <GridLayoutItem row={2} col={1} colSpan={2} rowSpan={2}>Box</GridLayoutItem>
* <GridLayoutItem row={2} col={3}>Box</GridLayoutItem>
* <GridLayoutItem row={3} col={3}>Box</GridLayoutItem>
* </GridLayout>
* );
* };
* ReactDOM.render(<App />, document.querySelector('my-app'));
* ```
*/
export declare const GridLayoutItem: React_2.ForwardRefExoticComponent<GridLayoutItemProps & React_2.RefAttributes<GridLayoutItemHandle | null>>;
/**
* Represents the Object which is passed to the [`ref`](https://react.dev/learn/referencing-values-with-refs#refs-and-the-dom)
* callback of the GridLayoutItem component.
*/
export declare interface GridLayoutItemHandle {
/**
* Represents the current element. If no current element is present, `element` is `null`.
*/
element: HTMLDivElement | null;
}
/**
* Represents the props of the [KendoReact GridLayoutItem component]({% slug overview_gridlayout %}).
*/
export declare interface GridLayoutItemProps {
/**
* The React elements that will be rendered inside the GridLayoutItem.
*/
children?: React_2.ReactNode;
/**
* Sets additional CSS classes to the GridLayoutItem.
*/
className?: string;
/**
* Sets additional CSS styles to the GridLayoutItem.
*/
style?: React_2.CSSProperties;
/**
* Sets the `id` property of the root GridLayoutItem element.
*/
id?: string;
/**
* Defines the column line from which the element will start ([see example]({% slug items_gridlayout %}#toc-items)).
*/
col?: number;
/**
* Specifies the number of columns over which the element will span ([see example]({% slug items_gridlayout %}#toc-items)).
* Defaults to `1`.
*/
colSpan?: number;
/**
* Defines the row line from which the element will start ([see example]({% slug items_gridlayout %}#toc-items)).
*/
row?: number;
/**
* Specifies the number of rows over which the element will span ([see example]({% slug items_gridlayout %}#toc-items)).
* Defaults to `1`.
*/
rowSpan?: number;
}
/**
* Represents the props of the [KendoReact GridLayout component]({% slug overview_gridlayout %}).
*/
export declare interface GridLayoutProps {
/**
* The React elements that will be rendered inside the GridLayout.
*/
children?: React_2.ReactNode;
/**
* Sets additional CSS classes to the GridLayout.
*/
className?: string;
/**
* Sets additional CSS styles to the GridLayout.
*/
style?: React_2.CSSProperties;
/**
* Sets the `id` property of the root GridLayout element.
*/
id?: string;
/**
* Specifies the gaps between the elements ([see example]({% slug layout_gridlayout %}#toc-gaps)).
*
* * The possible keys are:
* * `rows`
* * `columns`
*/
gap?: GridLayoutGap;
/**
* Specifies the horizontal and vertical alignment of the inner GridLayout elements (see demos
* [here]({% slug layout_gridlayout %}#horizontal-alignment) and [here]({% slug layout_gridlayout %}#vertical-alignment)).
*
* The possible keys are:
* * `horizontal`—Defines the possible horizontal alignment of the inner GridLayout elements.
* * `start`—Uses the start point of the container.
* * `center`—Uses the central point of the container.
* * `end`—Uses the end point of the container.
* * (Default)`stretch`—Stretches the items to fill the width of the container.
* * `vertical`— Defines the possible vertical alignment of the inner GridLayout elements.
* * `top`—Uses the top point of the container.
* * `middle`—Uses the middle point of the container.
* * `bottom`—Uses the bottom point of the container.
* * (Default)`stretch`—Stretches the items to fill the height of the container.
*/
align?: GridLayoutAlign;
/**
* Specifies the default number of columns and their widths ([see example]({% slug layout_gridlayout %}#toc-rows-and-columns)).
*/
cols?: GridLayoutColumnProps[];
/**
* Specifies the default number of rows and their height ([see example]({% slug layout_gridlayout %}#toc-rows-and-columns)).
*/
rows?: GridLayoutRowProps[];
}
/**
* Represents the props of the [KendoReact GridLayout row]({% slug overview_gridlayout %}).
*/
export declare interface GridLayoutRowProps {
/**
* Specifies the height of the GridLayout row ([see example]({% slug overview_gridlayout %}#kendoreact-gridlayout-overview)).
*/
height?: number | string;
}
/**
* @hidden
*/
export declare const headerDisplayName = "ActionSheetHeader";
/**
* @hidden
*/
export declare const isArrayEqual: (firstArray: any[], secondArray: any[]) => boolean;
/**
* @hidden
*/
export declare const isPresent: (value: any) => boolean;
/**
* @hidden
*/
export declare const leftArrowName = "caret-alt-left";
/** @hidden */
export declare const Menu: ForwardRefExoticComponent<MenuProps & RefAttributes<any>>;
/**
* Represents the [KendoReact Menu component]({% slug overview_menu %}).
*
* @example
* ```jsx
* class App extends React.Component {
* render() {
* return (
* <Menu>
* <MenuItem text="Item1" />
* <MenuItem text="Item2">
* <MenuItem text="Item2.1" />
* <MenuItem text="Item2.2" />
* </MenuItem>
* <MenuItem text="Item3" />
* </Menu>
* );
* }
* }
* ReactDOM.render(<App />, document.querySelector('my-app'));
* ```
*/
export declare class MenuClassComponent extends React_2.Component<MenuProps, MenuState> {
/**
* @hidden
*/
static propTypes: {
vertical: default_2.Requireable<boolean>;
items: default_2.Requireable<(object | null | undefined)[]>;
style: default_2.Requireable<object>;
dir: default_2.Requireable<string>;
hoverOpenDelay: default_2.Requireable<number>;
hoverCloseDelay: default_2.Requireable<number>;
openOnClick: default_2.Requireable<boolean>;
itemRender: default_2.Requireable<any>;
linkRender: default_2.Requireable<any>;
customCloseItemIds: default_2.Requireable<(string | null | undefined)[]>;
onSelect: default_2.Requireable<(...args: any[]) => any>;
role: default_2.Requireable<string>;
};
/**
* @hidden
*/
static defaultProps: {
vertical: boolean;
};
/**
* @hidden
*/
readonly state: MenuState;
private itemHoverRequest;
private itemLeaveRequest;
private menuWrapperEl;
private get menuItemId();
private directionHolder;
private inputItems;
private items;
private mouseOverHandler;
get element(): HTMLDivElement | null;
constructor(props: MenuProps);
/**
* @hidden
*/
render(): JSX_2.Element;
/**
* @hidden
*/
componentDidMount(): void;
/**
* @hidden
*/
componentDidUpdate(prevProps: MenuProps): void;
/**
* @hidden
*/
componentWillUnmount(): void;
/**
* Resets the selection and opening of Menu items.
*/
reset: () => void;
private onKeyDown;
private onItemMouseOver;
private onItemMouseLeave;
private onItemMouseDown;
private onItemFocus;
private onItemClick;
private onItemBlur;
private getInputItem;
private setFocusedItemId;
private setHoveredItemId;
private getMenuClassName;
private clearItemHoverAndLeaveRequestsIfApplicable;
private isItemWithDefaultClose;
private checkIsDirectionRightToLeft;
private prepareItems;
private dispatchSelectEventIfWired;
}
/**
* Represent the `ref` of the Menu component.
*/
export declare interface MenuHandle extends Pick<MenuClassComponent, keyof MenuClassComponent> {
}
export declare class MenuItem extends React_2.Component<MenuItemProps, {}> {
/**
* @hidden
*/
static propTypes: {
text: default_2.Requireable<string>;
url: default_2.Requireable<string>;
icon: default_2.Requireable<string>;
disabled: default_2.Requireable<boolean>;
cssClass: default_2.Requireable<string>;
cssStyle: default_2.Requireable<object>;
render: default_2.Requireable<any>;
linkRender: default_2.Requireable<any>;
contentRender: default_2.Requireable<any>;
data: default_2.Requireable<any>;
separator: default_2.Requireable<boolean>;
};
/**
* @hidden
*/
render(): null;
}
export declare class MenuItemArrow extends React_2.Component<MenuItemArrowProps, {}> {
/**
* @hidden
*/
static propTypes: {
itemId: default_2.Requireable<string>;
dir: default_2.Requireable<string>;
verticalMenu: default_2.Requireable<boolean>;
};
/**
* @hidden
*/
render(): JSX_2.Element;
private getIcon;
}
/**
* The properties of the KendoReact MenuItemArrow component.
*/
export declare interface MenuItemArrowProps {
/**
* Sets the item id of the MenuItemArrow component.
*/
itemId: string;
/**
* Sets the direction of the MenuItemArrow component.
*/
dir: 'ltr' | 'rtl';
/**
* Specifies whether the Menu which holds the MenuItemArrow component is vertical.
*/
verticalMenu?: boolean;
}
/**
* @hidden
*/
export declare interface MenuItemInternalModel extends BaseMenuItem {
id: string;
items: MenuItemInternalModel[];
contentParentItemId?: string;
isLastFromSiblings: boolean;
}
/**
* @hidden
*/
export declare class MenuItemInternalsList extends React_2.Component<MenuItemInternalsListProps, {}> {
render(): JSX_2.Element;
private renderChildItems;
private onMouseOver;
private onMouseLeave;
}
/**
* @hidden
*/
declare interface MenuItemInternalsListProps extends BaseMenuItemInternalProps {
items: MenuItemInternalModel[];
parentItemId?: string;
className: string;
role?: string;
'aria-orientation'?: 'vertical';
}
export declare class MenuItemLink extends React_2.Component<MenuItemLinkProps, {}> {
/**
* @hidden
*/
static propTypes: {
opened: default_2.Requireable<boolean>;
url: default_2.Requireable<string>;
};
/**
* @hidden
*/
render(): JSX_2.Element;
private getMenuItemClassName;
}
/**
* The properties of the KendoReact MenuItemLink component.
*/
export declare interface MenuItemLinkProps extends KendoReactComponentBaseProps {
/**
* Specifies whether the MenuItemLink component is opened.
*/
opened: boolean;
/**
* Sets the URL of the MenuItemLink component.
*/
url?: string;
}
/**
* The interface for describing items that can be passed to the `items` property of the Menu as an alternative to passing them as children.
*/
export declare interface MenuItemModel extends BaseMenuItem {
/**
* Specifies name of the item.
*/
name?: string;
/**
* Specifies the children of the item.
*/
items?: MenuItemModel[];
}
/**
* The properties of the KendoReact MenuItem component ([more information and examples]({% slug items_menu %})).
*/
export declare interface MenuItemProps extends BaseMenuItem {
}
/**
* The properties of the [KendoReact Menu component]({% slug overview_menu %}).
*/
export declare interface MenuProps {
/**
* Specifies whether the Menu will be vertical ([see example]({% slug vertical_menu %})).
*/
vertical?: boolean;
/**
* Sets the Menu items.
*/
items?: MenuItemModel[];
/**
* Sets the Menu items declaratively.
*/
children?: React.ReactNode;
/**
* Sets additional CSS styles to the Menu.
*/
style?: React.CSSProperties;
/**
* Sets the ID of the Menu.
*/
id?: string;
/**
* Sets the direction of the Menu.
*/
dir?: string;
/**
* Specifies the delay in milliseconds before the Menu items are opened on item mouse-hover ([see example]({% slug opening_closing_menu %}#toc-delay-on-hover)). Defaults to `100`. If `openOnClick` is `true`, defaults to `0`.
*/
hoverOpenDelay?: number;
/**
* Specifies the delay in milliseconds before the Menu items are closed on item mouse-leave ([see example]({% slug opening_closing_menu %}#toc-delay-on-hover)). Used to avoid accidental closure on leaving. Defaults to `100`.
*/
hoverCloseDelay?: number;
/**
* If `openOnClick` is set to `true`, the items are opened on mouse hover only after an initial click.
*/
openOnClick?: boolean;
/**
* 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.
*/
itemRender?: 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;
/**
* Sets the ids of the Menu items that will not be closed on mouse-leave. The ids are hierarchical and zero-based. The first root item has a `0` id. If the first root item has children, the first child item acquires a `0_0` id and the second acquires a `0_1` id.
*/
customCloseItemIds?: string[];
/**
* Adds a custom className to the Menu top element.
*/
className?: string;
/**
* @hidden
*/
role?: string;
/**
* Fires when a Menu item is selected.
*/
onSelect?: (event: MenuSelectEvent) => void;
/**
* @hidden
*/
onClose?: (event: React.SyntheticEvent<HTMLElement>) => void;
}
/**
* The arguments for the `select` event of the Menu. If the item has a URL and the event is prevented, navigation to the URL does not occur.
*/
export declare interface MenuSelectEvent extends BaseEvent<MenuClassComponent> {
/**
* The id of selected item. The ids are hierarchical and zero-based. The first root item has a `0` id. If the first root item has children, the first child acquires a `0_0` id and the second acquires a `0_1` id.
*/
itemId: string;
/**
* The selected item.
*/
item: MenuItemModel;
}
/**
* @hidden
*/
export declare interface MenuState {
focusedItemId: string;
hoveredItemId: string;
tabbableItemId: string;
isFirstRender: boolean;
}
/**
* @hidden
*/
declare enum NavigationAction {
Toggle = 0,
Next = 1,
Previous = 2,
First = 3,
Last = 4,
Left = 5,
Right = 6
}
export declare class PanelBar extends React_2.Component<PanelBarProps, PanelBarState> {
/**
* @hidden
*/
static propTypes: {
animation: default_2.Requireable<boolean>;
children: (props: PanelBarProps, propName: any) => Error | null;
dir: default_2.Requireable<string>;
selected: default_2.Requireable<string>;
expanded: default_2.Requireable<(string | null | undefined)[]>;
focused: default_2.Requireable<string>;
expandMode: default_2.Requireable<string>;
className: default_2.Requireable<string>;
keepItemsMounted: default_2.Requireable<boolean>;
onSelect: default_2.Requireable<(...args: any[]) => any>;
style: default_2.Requireable<object>;
};
/**
* @hidden
*/
static defaultProps: {
expandMode: string;
animation: boolean;
keepItemsMounted: boolean;
};
/**
* @hidden
*/
readonly state: PanelBarState;
private activeDescendant?;
private _element;
private nextTickId;
private get expandMode();
private get selectedItem();
private get expandedItems();
private get children();
constructor(props: PanelBarProps);
/**
* @hidden
*/
handleSelect: (event: PanelBarItemClickEventArguments) => void;
/**
* @hidden
*/
onSelect: (event: any) => void;
/**
* @hidden
*/
onFocus: (event: any, step?: number, action?: NavigationAction) => void;
/**
* @hidden
*/
onNavigate: (event: React_2.KeyboardEvent<HTMLUListElement>, action: NavigationAction) => void;
/**
* @hidden
*/
render(): JSX_2.Element;
protected nextTick(f: () => any): void;
private handleWrapperFocus;
private handleWrapperBlur;
private handleKeyDown;
}
/**
* Represents the expand modes of the KendoReact PanelBar. Defaults to `multiple`.
*/
export declare type PanelBarExpandMode = 'single' | 'multiple';
export declare class PanelBarItem extends React_2.PureComponent<PanelBarItemProps, PanelBarItemState> {
/**
* @hidden
*/
static propTypes: {
animation: default_2.Requireable<boolean>;
children: default_2.Requireable<any>;
className: default_2.Requireable<string>;
icon: default_2.Requireable<string>;
iconClass: default_2.Requireable<string>;
imageUrl: default_2.Requireable<string>;
svgIcon: default_2.Requireable<default_2.InferProps<{
name: default_2.Validator<string>;
content: default_2.Validator<string>;
viewBox: default_2.Validator<string>;
}>>;
expanded: default_2.Requireable<boolean>;
disabled: default_2.Requireable<boolean>;
onSelect: default_2.Requireable<(...args: any[]) => any>;
selected: default_2.Requireable<boolean>;
level: default_2.Requireable<number>;
title: default_2.Requireable<NonNullable<string | default_2.ReactElementLike | null | undefined>>;
id: default_2.Requireable<NonNullable<string | number | null | undefined>>;
focused: default_2.Requireable<boolean>;
keepItemsMounted: default_2.Requireable<boolean>;
};
/**
* @hidden
*/
static defaultProps: {
title: string;
};
constructor(props: PanelBarItemProps);
/**
* @hidden
*/
render(): JSX_2.Element;
private handleItemClick;
private childFactory;
}
/**
* @hidden
*/
declare interface PanelBarItemClickEventArguments {
uniquePrivateKey: number;
target: PanelBarItem;
}
/**
* Represents the props of the PanelBarItem component.
*/
export declare interface PanelBarItemProps {
/**
* Allows individual animation control over the child ([see example]({% slug animations_panelbar %})). By default, it is controlled by the PanelBar component.
*/
animation?: boolean;
/**
* Can be any of PanelBar items, an array of PanelBar items, or a custom component.
*/
children?: any;
/**
* The class name that is set to the PanelBarItem component.
*/
className?: string;
/**
* The class name that is set to the PanelBarItem header.
*/
headerClassName?: string;
/**
* Sets the initial expanded state of the PanelBarItem ([see example]({% slug statesitems_panelbar %}#toc-expanded-items)). Controlled by the PanelBar component.
*/
expanded?: boolean;
/**
* Sets the disabled state of the PanelBarItem ([see example]({% slug statesitems_panelbar %}#toc-disabled-items)).
*/
disabled?: boolean;
/**
* @hidden
*/
onSelect?: Function;
/**
* @hidden
*/
level?: number;
/**
* Defines an icon that will be rendered next to the title ([see example]({% slug titlesitems_panelbar %}#toc-adding-icons)).
*/
icon?: string;
/**
* Defines an SVG icon that will be rendered next to the title ([see example]({% slug titlesitems_panelbar %}#toc-adding-icons)).
*/
svgIcon?: SVGIcon;
/**
* Defines an icon with a custom CSS class that will be rendered next to the title ([see example]({% slug titlesitems_panelbar %}#toc-adding-icons)).
*/
iconClass?: string;
/**
* Defines the location of the image that will be displayed next to the title ([see example]({% slug titlesitems_panelbar %}#toc-adding-images)).
*/
imageUrl?: string;
/**
* Sets the initial selected state of the PanelBarItem. Controlled by the PanelBarItem component ([see example]({% slug statesitems_panelbar %}#toc-selected-items)).
*/
selected?: boolean;
/**
* Sets the title of the PanelBar item ([see example]({% slug titlesitems_panelbar %}#toc-getting-started)).
*/
title?: React.ReactNode;
/**
* Allows the component to set the `id` property to each item. If not set, a default `id` is applied.
*/
id?: string;
/**
* Sets the initial focused state of the PanelBarItem. Controlled by the PanelBar component.
*/
focused?: boolean;
/**
* @hidden
*/
parentExpanded?: boolean;
/**
* @hidden
*/
content?: any;
/**
* Used to identify the PanelBarItems inside the PanelBar ([see example]({% slug controlling_state_panelbar %})). Does not depend on the state of the PanelBarItem.
*/
uniquePrivateKey?: string;
/**
* @hidden
*/
parentUniquePrivateKey?: string[];
/**
* @hidden
*/
keepItemsMounted?: boolean;
/**
* Sets a custom property. Contained in the PanelBarItem props that are returned from the `onSelect` PanelBar event.
*/
[customProp: string]: any;
}
/** @hidden */
declare interface PanelBarItemState {
show: boolean;
}
/**
* Represents the props of the [KendoReact PanelBar component]({% slug overview_panelbar %}).
*/
export declare interface PanelBarProps {
/**
* The child can be either a single PanelBarItem or a PanelBarItem array.
*/
children?: React.ReactNode;
/**
* The class name that is set to the PanelBar.
*/
className?: string;
/**
* Sets the animation state of the PanelBar.
*/
animation?: boolean;
/**
* Sets the expand mode of the PanelBar ([see example]({% slug expandmodes_panelbar %})).
*
* The available modes are:
* - `"single"`—Allows you to expand only one item at a time. The expanding of an item collapses the item that was previously expanded.
* - `"multiple"` (default)—Allows you to expand two or more items at a time. Items can also be toggled.
*/
expandMode?: PanelBarExpandMode;
/**
* Sets the direction of the PanelBar component.
*/
dir?: string;
/**
* If set, overrides the currently selected property in the PanelBar state. Takes the `id` of the item.
*/
selected?: string;
/**
* Sets the initial expanded state of the PanelBar. Takes the `id` of the item.
*/
expanded?: string[];
/**
* Sets the initial focused state of the PanelBar. Takes the `id` of the item.
*/
focused?: string;
/**
* Determines if the PanelBar items will be mounted after expand collapse. Defaults to `false`.
*/
keepItemsMounted?: boolean;
/**
* Determines if the PanelBar is going to be used in controlled state.
*/
isControlled?: boolean;
/**
* Fires each time the user makes a selection ([see example]({% slug controlling_state_panelbar %})).
*/
onSelect?: (event: PanelBarSelectEventArguments) => void;
/**
* Sets additional CSS styles to the PanelBar.
*/
style?: React.CSSProperties;
}
/**
* The arguments that are passed to the `onSelect` callback function.
*/
export declare interface PanelBarSelectEventArguments {
/**
* The selected PanelBar item.
*/
target: React.ReactElement<PanelBarItemProps>;
/**
* The new expanded PanelBar items state.
*/
expandedItems: string[];
}
/**
* @hidden
*/
export declare interface PanelBarState {
focused?: string;
wrapperFocused?: boolean;
selected?: string;
expanded: string[];
}
/**
* Represents the PanelBarUtils functions.
*/
export declare namespace PanelBarUtils {
/**
* Maps a collection of PanelBarItemProps to PanelBarItem components
* ([see example]({% slug customization_panelbar %})).
* Contained in the `PanelBarUtils` object.
*
* @param items - A collection of PanelBarItemProps.
* @return {PanelBarItem[]} Returns an array of PanelBarItem components.
*/
export function mapItemsToComponents(items: Array<PanelBarItemProps>): React_2.ReactNode[];
}
/**
* @hidden
*/
export declare const renderChildren: ({ animation, keepItemsMounted, state, expanded, handleSelect, children, parentExpanded, level, parentPrivateKey }: RenderPanelBarItem) => React_2.ReactNode;
/**
* @hidden
*/
export declare interface RenderPanelBarItem {
animation?: boolean;
keepItemsMounted?: boolean;
state: PanelBarState;
expanded: string[];
handleSelect: any;
children: React.ReactNode;
parentExpanded?: boolean;
level?: number;
parentPrivateKey?: string[];
}
/**
* @hidden
*/
export declare const rightArrowName = "caret-alt-right";
/**
* Represents the values of the scrollButtons property of the TabStrip.
*/
declare type ScrollButtons = 'auto' | 'visible' | 'hidden';
/**
* Represents the values of the scrollButtonsPosition property of the TabStrip.
*/
declare type ScrollButtonsPosition = 'split' | 'start' | 'end' | 'around' | 'before' | 'after';
/**
* Sort the events list based on event date.
*/
export declare const sortEventList: (eventList: TimelineEventProps[]) => TimelineEventProps[];
/**
* Represents the [KendoReact Splitter component]({% slug overview_splitter %}).
*
* @example
* ```jsx
* class App extends React.Component {
* render() {
* return (
* <div>
* <Splitter
* style={{height: 400}}
* orientation={'vertical'}
* >
* <div>Pane 1</div>
* <div>Pane 2</div>
* <div>Pane 3</div>
* </Splitter>
* </div>
* );
* }
* }
*
* ReactDOM.render(<App />, document.querySelector('my-app'));
* ```
*/
export declare class Splitter extends React_2.Component<SplitterProps, SplitterState> {
/**
* @hidden
*/
static displayName: string;
/**
* @hidden
*/
readonly state: SplitterState;
private panesDuringOnChange?;
private readonly showLicenseWatermark;
private get isControlledState();
private get panes();
private _container;
private get orientation();
private get isRtl();
private get panesContent();
/**
* @hidden
*/
constructor(props: SplitterProps);
/**
* @hidden
*/
render(): JSX_2.Element;
private validatePanes;
private mapPaneOptions;
private mapSplitterPanes;
private onBarToggle;
private onBarDragResize;
private onBarKeyboardResize;
private surroudingPanes;
private containerSize;
private isPercent;
private toPixels;
private panesOptions;
private resetDragState;
private elementSize;
private clamp;
private fixedSize;
private resize;
private getPaneProps;
}
/**
* @hidden
*/
export declare class SplitterBar extends React_2.Component<SplitterBarProps, SplitterBarState> {
private draggable;
private spliterBarRef;
private navigation?;
private get isStatic();
private get isDraggable();
private get isHorizontal();
constructor(props: SplitterBarProps);
/** @hidden */
componentDidMount(): void;
render(): JSX_2.Element;
private onDrag;
private onFocus;
private onBlur;
private onToggle;
private onPrevToggle;
private onNextToggle;
private onKeyDown;
}
/**
* @hidden
*/
declare interface SplitterBarProps {
orientation: 'vertical' | 'horizontal';
index: number;
prev: SplitterPaneExtendedProps;
next: SplitterPaneExtendedProps;
ariaLabel?: string;
isRtl?: boolean;
onDrag: (event: any, element: HTMLDivElement, index: number, isFirst: boolean, isLast: boolean) => void;
onToggle: (index: number, nativeEvent: React_2.MouseEvent<HTMLDivElement, MouseEvent> | React_2.KeyboardEvent<HTMLDivElement>) => void;
onKeyboardResize: (element: HTMLDivElement, index: number, delta: number, nativeEvent: React_2.KeyboardEvent<HTMLDivElement>) => void;
}
/**
* @hidden
*/
declare interface SplitterBarState {
focused: boolean;
}
/**
* Represents the onChange event of the Splitter.
*/
export declare interface SplitterOnChangeEvent {
/**
* The new panes state.
*/
newState: SplitterPaneProps[];
/**
* Indicates if is the last event during drag. Can be used to optimize performance.
*/
isLast: boolean;
/**
* The native DOM event.
*/
nativeEvent: React_2.MouseEvent<HTMLDivElement, MouseEvent> | React_2.KeyboardEvent<HTMLDivElement> | any;
}
/**
* @hidden
*/
export declare class SplitterPane extends React_2.Component<SplitterPaneExtendedProps, {}> {
render(): JSX_2.Element;
}
/**
* @hidden
*/
export declare interface SplitterPaneExtendedProps extends SplitterPaneProps {
orientation: 'vertical' | 'horizontal';
overlay: boolean;
containsSplitter: boolean;
}
/**
* Represents the pane options of the Splitter.
*/
export declare interface SplitterPaneProps extends KendoReactComponentBaseProps {
/**
* Sets the size of the pane ([see example]({% slug panes_splitter %}#toc-dimensions)). Has to be between the `min` and `max` properties.
*/
size?: string;
/**
* Sets the minimum possible size of the pane ([see example]({% slug panes_splitter %}#toc-dimensions)).
*/
min?: string;
/**
* Sets the maximum possible size of the pane ([see example]({% slug panes_splitter %}#toc-dimensions)).
*/
max?: string;
/**
* Specifies if the user is allowed to resize the pane and provide space for other panes ([see example]({% slug panes_splitter %}#toc-resizing)). If `resizable` is not specified, the resizing of the pane will be enabled.
*/
resizable?: boolean;
/**
* Specifies if the user is allowed to hide the pane and provide space for other panes ([see example]({% slug panes_splitter %}#toc-collapsing)).
*/
collapsible?: boolean;
/**
* Specifies the pane collapsed state ([see example]({% slug panes_splitter %}#toc-collapsing)).
*/
collapsed?: boolean;
/**
* Specifies if overflowing content is scrollable or hidden ([see example]({% slug panes_splitter %}#toc-scrolling)). If `scrollable` is not specified, the content will be scrollable.
*/
scrollable?: boolean;
/**
* Specifies if the children of the pane should be mounted when it's in collapsed state.
*/
keepMounted?: boolean;
}
/**
* Represents the options of the Splitter.
*/
export declare interface SplitterProps extends KendoReactComponentBaseProps {
/**
* Sets the options of the Splitter panes ([more information and examples]({% slug panes_splitter %})). Can be used for controlled state.
*/
panes?: SplitterPaneProps[];
/**
* Sets the initial options of the Splitter panes ([more information and examples]({% slug panes_splitter %})). Can be used for uncontrolled state.
*/
defaultPanes?: SplitterPaneProps[];
/**
* Specifies the orientation of the panes within the Splitter ([more information and examples]({% slug orientation_splitter %})). Panes in a horizontal Splitter are placed horizontally. Panes in a vertical Splitter are placed vertically.
*/
orientation?: 'vertical' | 'horizontal';
/**
* Fires after a Splitter pane is resized or collapsed. Useful for updating the pane options and triggering layout calculations on components which are positioned inside the panes.
*/
onChange?: (event: SplitterOnChangeEvent) => void;
}
/**
* @hidden
*/
export declare interface SplitterState {
isDragging: boolean;
dragIndex?: number;
startTime: number;
originalX: number;
originalY: number;
originalPrevSize: number;
originalNextSize: number;
panes: SplitterPaneProps[];
}
/**
* Represents the [KendoReact StackLayout component]({% slug overview_stacklayout %}).
* Arranges its inner elements horizontally, or vertically in a stack. Nesting stack layouts is supported to build more complex layouts.
*
* @example
* ```jsx
*
* const App = () => {
* return (
* <StackLayout
* orientation="vertical"
* align={{horizontal: 'stretch', vertical: 'stretch'}}
* gap={10}
* >
* <div>Box</div>
* <div>Box</div>
* <div>Box</div>
* <div>Box</div>
* </StackLayout>
* );
* };
* ReactDOM.render(<App />, document.querySelector('my-app'));
* ```
*/
export declare const StackLayout: React_2.ForwardRefExoticComponent<StackLayoutProps & React_2.RefAttributes<StackLayoutHandle | null>>;
/**
* Specifies the horizontal and vertical alignment of the inner StackLayout elements.
*/
export declare interface StackLayoutAlign {
/**
* Defines the possible horizontal alignment of the inner StackLayout elements
* ([see example]({% slug layout_stacklayout %}#toc-horizontal-alignment)).
*
* The available values are:
* - `start`—Uses the start point of the container.
* - `center`—Uses the center point of the container.
* - `end`—Uses the end point of the container.
* - (Default)`stretch`—Stretches the items to fill the width of the container.
*/
horizontal?: 'start' | 'center' | 'end' | 'stretch';
/**
* Defines the possible vertical alignment of the inner StackLayout elements
* ([see example]({% slug layout_stacklayout %}#toc-vertical-alignment)).
*
* The available values are:
* - `top`—Uses the top point of the container.
* - `middle`—Uses the middle point of the container.
* - `bottom`—Uses the bottom point of the container.
* - (Default)`stretch`—Stretches the items to fill the height of the container.
*/
vertical?: 'top' | 'middle' | 'bottom' | 'stretch';
}
/**
* Represents the Object which is passed to the [`ref`](https://react.dev/learn/referencing-values-with-refs#refs-and-the-dom)
* callback of the StackLayout component.
*/
export declare interface StackLayoutHandle {
/**
* Represents the current element. If no current element is present, `element` is `null`.
*/
element: HTMLDivElement | null;
}
/**
* Specifies the orientation of the StackLayout ([see example]({% slug layout_stacklayout %}#toc-orientation)).
*
* The possible values are:
* * (Default)`horizontal`
* * `vertical`
*
*/
export declare type StackLayoutOrientation = 'horizontal' | 'vertical';
/**
* Represents the props of the [KendoReact StackLayout component]({% slug overview_stacklayout %}).
*/
export declare interface StackLayoutProps {
/**
* The React elements that will be rendered inside the StackLayout.
*/
children?: React_2.ReactNode;
/**
* Sets additional CSS classes to the StackLayout.
*/
className?: string;
/**
* Sets additional CSS styles to the StackLayout.
*/
style?: React_2.CSSProperties;
/**
* Sets the `id` property of the root StackLayout element.
*/
id?: string;
/**
* Specifies the gap between the inner elements ([see example]({% slug layout_stacklayout %}#toc-gaps)).
*/
gap?: number | string;
/**
* Specifies the orientation of the StackLayout.
* ([see example]({% slug layout_stacklayout %}#toc-orientation)).
*
* The possible values are:
* * (Default)`horizontal`
* * `vertical`
*/
orientation?: StackLayoutOrientation;
/**
* Specifies the horizontal and vertical alignment of the inner StackLayout elements.
* Demo ([here]({% slug layout_stacklayout %}#toc-horizontal-alignment)) and ([here]({% slug layout_stacklayout %}#toc-vertical-alignment)).
*
* The possible keys are:
* * `horizontal`—Defines the possible horizontal alignment of the inner StackLayout elements.
* * `start`—Uses the start point of the container.
* * `center`—Uses the central point of the container.
* * `end`—Uses the end point of the container.
* * (Default)`stretch`—Stretches the items to fill the width of the container.
* * `vertical`—Defines the possible vertical alignment of the inner StackLayout elements.
* * `top`—Uses the top point of the container.
* * `middle`—Uses the middle point of the container.
* * `bottom`—Uses the bottom point of the container.
* * (Default)`stretch`—Stretches the items to fill the height of the container.
*/
align?: StackLayoutAlign;
}
/**
* @hidden
*/
declare type StateScrollPosition = 'start' | 'end' | 'top' | 'bottom' | 'middle' | null;
/**
* Represents the [KendoReact Step component]({% slug overview_stepper %}).
*
* @example
* ```jsx
* const steps = [
* { label: 'Step 1' },
* { label: 'Step 2' },
* { label: 'Step 3', optional: true }
* ];
*
* const App = () => {
* return (
* <Stepper items={steps} value={1}/>
* );
* };
* ReactDOM.render(<App />, document.querySelector('my-app'));
* ```
*/
export declare const Step: React_2.ForwardRefExoticComponent<Omit<StepProps, "ref"> & React_2.RefAttributes<StepHandle | null>>;
/**
* The arguments for the `onChange` Step event.
*/
export declare interface StepChangeEvent extends BaseEvent<StepHandle> {
/**
* The index of the selected Step.
*/
value: number;
}
/**
* The arguments for the `onFocus` Step event.
*/
export declare interface StepFocusEvent extends BaseEvent<StepHandle> {
}
/**
* The Step ref.
*/
export declare interface StepHandle {
/**
* The Step element.
*/
element: HTMLLIElement | null;
/**
* Focus the Step.
*/
focus: () => void;
}
/**
* Represents the [KendoReact Stepper component]({% slug overview_stepper %}).
*
* @example
* ```jsx
* const steps = [
* { label: 'Step 1' },
* { label: 'Step 2' },
* { label: 'Step 3', optional: true }
* ];
*
* const App = () => {
* return (
* <Stepper items={steps} value={1} />
* );
* };
* ReactDOM.render(<App />, document.querySelector('my-app'));
* ```
*/
export declare const Stepper: React_2.ForwardRefExoticComponent<StepperProps & React_2.RefAttributes<StepperHandle | null>>;
/**
* The arguments for the `onChange` Stepper event.
*/
export declare interface StepperChangeEvent extends BaseEvent<StepperHandle> {
/**
* The index of the selected Step.
*/
value: number;
}
/**
* The arguments for the `onFocus` Stepper event.
*/
export declare interface StepperFocusEvent extends BaseEvent<StepperHandle> {
}
/**
* The Stepper ref.
*/
export declare interface StepperHandle {
/**
* The Stepper element.
*/
element: HTMLMenuElement | null;
/**
* Focus the Stepper's first focusable child.
*/
focus: () => void;
}
/**
* Represents the props of the [KendoReact Stepper component]({% slug overview_stepper %}).
*/
export declare interface StepperProps {
/**
* Sets the duration of the Stepper animation. Defaults to `400ms`.
*/
animationDuration?: boolean | number;
/**
* Represents the children that are passed to the Stepper.
*/
children?: any;
/**
* Specifies a list of CSS classes that will be added to the Stepper.
*/
className?: string;
/**
* Represents the `dir` HTML attribute. This is used to switch from LTR to RTL.
*/
dir?: string;
/**
* Disables the whole Stepper.
*/
disabled?: boolean;
/**
* Specifies a custom icon that will be rendered inside the step for invalid steps.
*/
errorIcon?: string;
/**
* Specifies a custom SVG icon that will be rendered inside the step for invalid steps.
*/
errorSVGIcon?: SVGIcon;
/**
* Overrides the default component responsible for visualizing a single item ([see example]({% slug custom_rendering_stepper %})).
*
* The default Component is: [Step]({% slug api_layout_step %}).
*/
item?: React_2.ComponentType<StepProps>;
/**
* The collection of steps that will be rendered in the Stepper ([see example]({% slug overview_stepper %})).
*/
items: Array<StepProps>;
/**
* Specifies the linear flow of the Stepper.
* ([see example]({% slug linear_mode_stepper %})).
*/
linear?: boolean;
/**
* Specifies the display mode of the Stepper
* ([see example]({% slug display_modes_stepper %})).
* * The possible values are:
* * (Default) `steps`. Render step indicator and optional label.
* * `labels`. Render labels only.
*/
mode?: 'steps' | 'labels';
/**
* Specifies the orientation of the Stepper
* ([see example]({% slug orientation_stepper %})).
*
* The possible values are:
* * (Default) `horizontal`
* * `vertical`
*/
orientation?: 'horizontal' | 'vertical';
/**
* Applicable for scenarios when keyboard is used for navigation. Indicates whether
* the selection will change upon focus change or it will require additional action
* (Enter or Space key press) in order to select the focused step. Defaults to `false`.
*/
selectOnFocus?: boolean;
/**
* Sets additional CSS styles to the Stepper.
*/
style?: React_2.CSSProperties;
/**
* Specifies a custom icon that will be rendered inside the step for valid steps.
*/
successIcon?: string;
/**
* Specifies a custom SVG icon that will be rendered inside the step for valid steps.
*/
successSVGIcon?: SVGIcon;
/**
* Specifies the index of the selected Step.
*/
value: number;
/**
* The event handler that will be fired when the value is changed.
*/
onChange?: (event: StepperChangeEvent) => void;
/**
* The event handler that will be fired when a Step is focused.
*/
onFocus?: (event: StepperFocusEvent) => void;
}
/**
* Represents the props of the [KendoReact Step component]({% slug overview_stepper %}).
*/
export declare interface StepProps {
/**
* Represents the children that are passed to the Step.
*/
children?: any;
/**
* Specifies a list of CSS classes that will be added to the Step element.
*/
className?: string;
/**
* Represents the content that will be rendered inside each Step.
*
* @hidden
*/
content?: any;
/**
* Specifies the current Step.
*/
current?: boolean;
/**
* Sets a custom property.
*/
[customProp: string]: any;
/**
* Specifies if the Step is disabled
* ([see example]({% slug display_modes_stepper %})).
*/
disabled?: boolean;
/**
* Defines the name for an existing icon in a KendoReact theme.
* The icon is rendered inside the Step indicator by a `span.k-icon` element
* ([see example]({% slug display_modes_stepper %})).
*/
icon?: string;
/**
* Defines the SVG icon.
* The icon is rendered inside the Step indicator
* ([see example]({% slug display_modes_stepper %})).
*/
svgIcon?: SVGIcon;
/**
* Sets the index of the Step that is used to identify it.
*/
index?: number;
/**
* Specifies the validity of the step
* ([see example]({% slug display_modes_stepper %})).
*/
isValid?: boolean;
/**
* Specifies the label of the Step
* ([see example]({% slug display_modes_stepper %})).
*/
label?: string;
/**
* Specifies if the step is optional. The validation is not applied to these steps
* ([see example]({% slug display_modes_stepper %})).
*/
optional?: boolean;
/**
* Sets additional CSS styles to the Step.
*/
style?: React_2.CSSProperties;
/**
* Sets the `tabIndex` property of the Step.
* Defaults to `0`.
*/
tabIndex?: number;
/**
* Specifies the text content of the Step indicator
* ([see example]({% slug display_modes_stepper %})).
*/
text?: string;
}
/** @hidden */
export declare const TabStrip: ForwardRefExoticComponent<TabStripProps & RefAttributes<any>>;
export declare class TabStripClassComponent extends React_2.Component<TabStripProps, TabStripStateProps, {}> {
/**
* @hidden
*/
static propTypes: {
id: default_2.Requireable<string>;
animation: default_2.Requireable<boolean>;
children: default_2.Requireable<default_2.ReactNodeLike>;
onSelect: default_2.Requireable<(...args: any[]) => any>;
selected: default_2.Requireable<number>;
style: default_2.Requireable<object>;
tabContentStyle: default_2.Requireable<object>;
tabPosition: default_2.Requireable<string>;
tabAlignment: default_2.Requireable<string>;
tabIndex: default_2.Requireable<number>;
className: default_2.Requireable<string>;
dir: default_2.Requireable<string>;
renderAllContent: default_2.Requireable<boolean>;
size: default_2.Requireable<string | null>;
scrollButtons: default_2.Requireable<string>;
scrollButtonsPosition: default_2.Requireable<string>;
};
/**
* @hidden
*/
static defaultProps: {
animation: boolean;
tabPosition: string;
tabAlignment: string;
keepTabsMounted: boolean;
buttonScrollSpeed: number;
mouseScrollSpeed: number;
scrollButtons: string;
scrollButtonsPosition: string;
size: string;
renderAllContent: boolean;
};
private tabStripRef;
private itemsNavRef;
private resizeObserver?;
private get contentPanelId();
private get navItemId();
private navigation?;
constructor(props: TabStripProps);
/** @hidden */
componentDidMount(): void;
/** @hidden */
componentWillUnmount(): void;
private horizontalScroll;
/**
* @hidden
*/
private onScroll;
/**
* @hidden
*/
private handleResize;
/**
* @hidden
*/
onSelect: (index: any) => void;
/**
* @hidden
*/
onKeyDown: (event: React_2.KeyboardEvent<HTMLElement>) => void;
/**
* @hidden
*/
onKeyboardSelect: (index: number) => void;
/**
* @hidden
*/
render(): JSX_2.Element;
private renderContent;
private children;
}
export declare class TabStripContent extends React_2.Component<TabStripContentProps, {}> {
/**
* @hidden
*/
static propTypes: {
animation: default_2.Requireable<boolean>;
children: default_2.Requireable<NonNullable<default_2.ReactElementLike | (default_2.ReactElementLike | null | undefined)[] | null | undefined>>;
selected: default_2.Requireable<number>;
style: default_2.Requireable<object>;
};
private contentId;
/**
* @hidden
*/
render(): JSX_2.Element | JSX_2.Element[] | null | undefined;
private renderContent;
private renderAllContent;
private renderChild;
private childFactory;
}
/**
* The props that are passed to the TabStripContent by the TabStrip.
*/
export declare interface TabStripContentProps {
/**
* Defines whether the content appearance will be animated.
*/
animation?: boolean;
/**
* The index of the selected tab. Used to indicate which child to render.
*/
selected?: number;
/**
* @hidden
*/
style?: any;
/**
* @hidden
*/
index?: number;
/**
* @hidden
*/
keepTabsMounted?: boolean;
/**
* @hidden
*/
renderAllContent?: boolean;
/**
* @hidden
*/
children?: React_2.ReactNode;
/**
* @hidden
*/
contentPanelId?: string;
/**
* @hidden
*/
navItemId?: string;
}
export declare class TabStripNavigation extends React_2.Component<TabStripNavigationProps, {}> {
/**
* @hidden
*/
static propTypes: {
children: default_2.Requireable<NonNullable<default_2.ReactElementLike | (default_2.ReactElementLike | null | undefined)[] | null | undefined>>;
onSelect: default_2.Requireable<(...args: any[]) => any>;
onKeyDown: default_2.Requireable<(...args: any[]) => any>;
onScroll: default_2.Requireable<(...args: any[]) => any>;
selected: default_2.Requireable<number>;
tabIndex: default_2.Requireable<number>;
scrollable: default_2.Requireable<boolean>;
size: default_2.Requireable<string>;
scrollButtons: default_2.Requireable<string>;
scrollButtonsPosition: default_2.Requireable<string>;
containerScrollPosition: default_2.Requireable<string | null>;
};
private itemsNavRef;
/**
* @hidden
*/
componentDidMount(): void;
/**
* @hidden
*/
componentDidUpdate(prevProps: Readonly<TabStripNavigationProps>): void;
private onScroll;
/**
* @hidden
*/
render(): JSX_2.Element;
private scrollToSelected;
private horizontalScroll;
private isRtl;
private arrowClickPrev;
private arrowClickNext;
private handleArrowClick;
private setNewScrollPosition;
private renderArrow;
}
export declare class TabStripNavigationItem extends React_2.Component<TabStripNavigationItemProps, {}> {
/**
* @hidden
*/
static propTypes: {
active: default_2.Requireable<boolean>;
disabled: default_2.Requireable<boolean>;
index: default_2.Requireable<number>;
onSelect: default_2.Requireable<(...args: any[]) => any>;
title: default_2.Requireable<NonNullable<string | default_2.ReactElementLike | null | undefined>>;
first: default_2.Requireable<boolean>;
last: default_2.Requireable<boolean>;
};
/**
* @hidden
*/
private itemRef;
/**
* @hidden
*/
focus: () => void;
blur: () => void;
/**
* @hidden
*/
render(): JSX_2.Element;
private onClick;
}
/**
* The props that are passed by the TabStripNavigation to the TabStripNavigationItem.
*/
export declare interface TabStripNavigationItemProps {
/**
* Sets the `id` property of the top element of the TabStripNavigationItem.
*/
id?: string;
/**
* Defines whether the current TabStripNavigationItem is selected.
*/
active?: boolean;
/**
* Defines whether the TabStripNavigationItem is disabled.
*/
disabled?: boolean;
/**
* Sets the index of the TabStripNavigationItem that is used to identify it.
*/
index: number;
/**
* Sets the title of the TabStripNavigationItem.
*/
title?: React_2.ReactNode;
/**
* @hidden
*/
first?: boolean;
/**
* @hidden
*/
last?: boolean;
/**
* @hidden
*/
onSelect?(idx: number): void;
/**
* @hidden
*/
contentPanelId?: string;
/**
* @hidden
*/
renderAllContent?: boolean;
}
/**
* The props that are passed to the TabStripNavigation by the TabStrip.
*/
export declare interface TabStripNavigationProps {
/**
* Sets the index of the selected tab. Controlled by the TabStrip component.
*/
selected?: number;
/**
* @hidden
*/
tabIndex?: number;
/**
* @hidden
*/
onKeyDown?: any;
/**
* @hidden
*/
tabPosition?: string;
/**
* @hidden
*/
tabAlignment?: string;
/**
* @hidden
*/
children?: any;
/**
* @hidden
*/
onSelect?(idx: number): void;
/**
* @hidden
*/
onScroll?(): void;
/**
* @hidden
*/
scrollable?: boolean;
/**
* @hidden
*/
scrollButtons?: ScrollButtons;
/**
* @hidden
*/
scrollButtonsPosition?: ScrollButtonsPosition;
/**
* @hidden
*/
size?: TabStripSize;
/**
* @hidden
*/
buttonScrollSpeed?: number;
/**
* @hidden
*/
mouseScrollSpeed?: number;
/**
* @hidden
*/
prevButton?: React_2.ComponentType<ButtonProps>;
/**
* @hidden
*/
nextButton?: React_2.ComponentType<ButtonProps>;
/**
* @hidden
*/
dir?: 'ltr' | 'rtl';
/**
* @hidden
*/
contentPanelId?: string;
/**
* @hidden
*/
navItemId?: string;
/**
* @hidden
*/
renderAllContent?: boolean;
/**
* @hidden
*/
containerScrollPosition?: 'start' | 'end' | 'top' | 'bottom' | 'middle' | null;
/**
* @hidden
*/
itemsNavRef?: React_2.RefObject<HTMLUListElement>;
}
/**
* Represents the props of the [KendoReact TabStrip component]({% slug overview_tabstrip %}).
*/
export declare interface TabStripProps extends KendoReactComponentBaseProps, TabStripScrollableProps {
/**
* Enables the tab animation.
*/
animation?: boolean;
/**
* Sets the index of the selected TabStripTab component ([see example]({% slug tabs_tabstrip %}#toc-tabs-on-initial-loading)).
*/
selected?: number;
/**
* @hidden
*/
style?: any;
/**
* Sets the style of the TabStripContent component.
*/
tabContentStyle?: any;
/**
* Sets the position of the tabs. Defaults to `top`.
*
* The available options are:
* - `"top"`—Renders the `TabStripNavigation` to the top of the TabStrip.
* - `"bottom"`—Renders the `TabStripNavigation` to the bottom of the TabStrip.
* - `"left"`—Renders the `TabStripNavigation` to the left of the TabStrip.
* - `"right"`—Renders the `TabStripNavigation` to the right of the TabStrip.
*/
tabPosition?: string;
/**
* Sets the alignment of the tabs. Defaults to `start`.
*
* The available options are:
* - `"start"`—Aligns the tabs at the start of the `TabStripNavigation`.
* - `"center"`—Aligns the tabs in the center of the `TabStripNavigation`.
* - `"end"`—Aligns the tabs at the end of the `TabStripNavigation`.
* - `"justify"`—Justifies the tabs inside the `TabStripNavigation`.
* - `"stretched"`—Stretches the tabs inside the `TabStripNavigation`.
*/
tabAlignment?: string;
/**
* Sets the `tabIndex` of the TabStripNavigation.
*/
tabIndex?: number;
/**
* Sets the direction of the TabStrip component.
*/
dir?: string;
/**
* Specifies the CSS class names of the TabStrip component.
*/
className?: string;
/**
* Specifies the possible sizes of the TabStrip.
* * @default `medium`
*/
size?: TabStripSize;
/**
* Defines if the tabs will remain mounted after another tab is selected. Defaults to `false`.
*/
keepTabsMounted?: boolean;
/**
* @default false
* Defines if the all component tabs will be rendered by default. Defaults to `false`.
* If set to `false`, the component will render only the currently selected tab. This can be useful when the content of the tabs is heavy and you want to improve the initial loading time. Check also the [keepTabsMounted]({% slug api_layout_tabstripprops %}#toc-keeptabsmounted) prop.
*/
renderAllContent?: boolean;
/**
* Fires each time the user makes a selection.
*/
onSelect?: (e: TabStripSelectEventArguments) => void;
}
/**
* @hidden
*/
export declare interface TabStripScrollableProps {
/**
* Determines whether the TabStrip will be scrollable.
*
* @default false
*/
scrollable?: boolean;
/**
* Sets the tab list scroll speed in pixels when scrolling via clicking the previous or next button.
*
* @default 100
*/
buttonScrollSpeed?: number;
/**
* **Deprecated**. The mouse scroll is implemented via CSS and the property is no longer needed.
*
* @deprecated
*
* @default 10
*/
mouseScrollSpeed?: number;
/**
* Sets the visibility of the scroll buttons.
*
* @default `auto`
*/
scrollButtons?: ScrollButtons;
/**
* Sets the scroll buttons position according to the tab list.
* The previous options 'around', 'before', 'after' are going to be deprecated in favor of 'split', 'start', 'end'.
*
* @default `split`
*/
scrollButtonsPosition?: ScrollButtonsPosition;
/**
* Defines the custom component that will be rendered as a previous button.
* To remove the button, set a function which returns null `() => null`.
*/
prevButton?: React_2.ComponentType<ButtonProps>;
/**
* Defines the custom component that will be rendered as a next button.
* To remove the button, set a function which returns null `() => null`.
*/
nextButton?: React_2.ComponentType<ButtonProps>;
}
/**
* The arguments that are passed to the `onSelect` callback function of the TabStrip.
*/
export declare interface TabStripSelectEventArguments {
/**
* The index of the selected TabStrip tab.
*/
selected: number;
}
/**
* Represents the values of the size property of the TabStrip.
*/
declare type TabStripSize = 'small' | 'medium' | 'large' | null;
/**
* @hidden
*/
declare interface TabStripStateProps {
containerScrollPosition: StateScrollPosition;
}
export declare class TabStripTab extends React_2.Component<TabStripTabProps, {}> {
/**
* @hidden
*/
static propTypes: {
disabled: default_2.Requireable<boolean>;
contentClassName: default_2.Requireable<string>;
children: default_2.Requireable<NonNullable<default_2.ReactNodeLike>>;
title: default_2.Requireable<NonNullable<default_2.ReactNodeLike>>;
};
/**
* @hidden
*/
render(): null;
}
/**
* Represents the props of the TabStrip tabs.
*/
export declare interface TabStripTabProps {
/**
* Defines whether a tab is disabled ([see example]({% slug tabs_tabstrip %}#toc-disabled-items)).
*/
disabled?: boolean;
/**
* @hidden
*/
children?: React_2.ReactNode;
/**
* Sets the title of the tab ([see example]({% slug tabs_tabstrip %}#toc-titles)).
*/
title?: React_2.ReactNode;
/**
* Specifies the CSS class names of the TabStripTab content.
*/
contentClassName?: string;
}
/**
* Represents the [KendoReact TileLayout component]({% slug overview_tilelayout %}).
*/
export declare class TileLayout extends React_2.Component<TileLayoutProps, TileLayoutState> {
/**
* @hidden
*/
static propTypes: {
id: default_2.Requireable<string>;
style: default_2.Requireable<object>;
className: default_2.Requireable<string>;
dir: default_2.Requireable<string>;
gap: default_2.Requireable<object>;
columns: default_2.Requireable<number>;
columnWidth: default_2.Requireable<NonNullable<string | number | null | undefined>>;
rowHeight: default_2.Requireable<NonNullable<string | number | null | undefined>>;
dataItemKey: default_2.Requireable<string>;
items: default_2.Requireable<any[]>;
positions: default_2.Requireable<any[]>;
autoFlow: default_2.Requireable<string>;
onReposition: default_2.Requireable<(...args: any[]) => any>;
ignoreDrag: default_2.Requireable<(...args: any[]) => any>;
};
/**
* @hidden
*/
static displayName: string;
/**
* @hidden
*/
_element: HTMLDivElement | null;
/**
* @hidden
*/
state: {
positions: ({
order: number;
rowSpan: number;
colSpan: number;
} & TilePosition)[];
};
/**
* Gets the HTML element of the TileLayout component.
*/
get element(): HTMLDivElement | null;
/**
* @hidden
*/
focus: () => void;
/**
* @hidden
*/
static getDerivedStateFromProps(props: TileLayoutProps, state: TileLayoutState): {
positions: ({
order: number;
rowSpan: number;
colSpan: number;
} & TilePosition)[];
} | null;
/**
* @hidden
*/
update: (index: number, dOrder: number, dCol: number, dRowSpan?: number, dColSpan?: number) => void;
render(): JSX_2.Element;
}
/**
* Controls how the auto-placement algorithm works, specifying exactly how auto-placed items get flowed into the TileLayout.
* For further reference, check [grid-auto-flow CSS](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-auto-flow) article.
* Defaults to `column`.
*/
export declare type TileLayoutAutoFlow = 'column' | 'row' | 'column dense' | 'row dense' | 'unset';
/**
* Specifies the gaps between the tiles.
*/
export declare interface TileLayoutGap {
/**
* The rows gap between tiles.
* Defaults to `16px`.
*/
rows?: number | string;
/**
* The columns gap between tiles.
* Defaults to `16px`.
*/
columns?: number | string;
}
/**
* The interface for describing items that can be passed to the `items` property of the TileLayout component.
*/
export declare interface TileLayoutItem {
/**
* The position which is used when the TileLayout is in uncontrolled mode
* ([see example]({% slug tiles_tilelayout %}#toc-position-and-dimensions)).
*/
defaultPosition?: TilePosition;
/**
* Sets additional CSS styles to the TileLayoutItem.
*/
style?: React.CSSProperties;
/**
* Sets additional classes to the TileLayoutItem.
*/
className?: string;
/**
* Sets additional CSS styles to the TileLayoutItem hint element.
*/
hintStyle?: React.CSSProperties;
/**
* Sets additional classes to the TileLayoutItem hint element.
*/
hintClassName?: string;
/**
* Sets the title in the TileLayoutItem's header
* ([see example]({% slug tiles_tilelayout %})).
*/
header?: React.ReactNode;
/**
* Sets the content in TileLayoutItem's body
* ([see example]({% slug tiles_tilelayout %})).
*/
body?: React.ReactNode;
/**
* Overrides the default rendering of the TileLayoutItem
* ([see example]({% slug tiles_tilelayout %}#toc-custom-rendering)).
*/
item?: React.ReactNode;
/**
* Specifies if the user is allowed to resize the TileLayoutItem and in which direction
* ([see example]({% slug tiles_tilelayout %}#toc-resizing)).
* If `resizable` is not specified, the resizing of the TileLayoutItem will be enabled for both directions.
*/
resizable?: TileResizeMode;
/**
* Specifies if the user is allowed to reorder the TileLayoutItem by dragging and dropping it
* ([see example]({% slug tiles_tilelayout %}#toc-reordering)).
* If `reorderable` is not specified, the dragging functionality of the TileLayoutItem will be enabled.
*/
reorderable?: boolean;
}
/**
* Represents the properties of [TileLayout](% slug overview_tilelayout %) component.
*/
export declare interface TileLayoutProps {
/**
* Sets the `id` property of the root element.
*/
id?: string;
/**
* Sets additional CSS styles to the TileLayout.
*/
style?: React_2.CSSProperties;
/**
* Sets additional classes to the TileLayout.
*/
className?: string;
/**
* Represents the `dir` HTML attribute. This is used to switch from LTR to RTL.
*/
dir?: string;
/**
* Specifies the gaps between the tiles ([see example]({% slug overview_tilelayout %}#toc-tilelayout-configuration-options)).
*
* * The possible keys are:
* * `rows`
* * `columns`
*/
gap?: TileLayoutGap;
/**
* Specifies the default number of columns ([see example]({% slug overview_tilelayout %}#toc-tilelayout-configuration-options)).
*/
columns?: number;
/**
* Specifies the default width of the columns ([see example]({% slug overview_tilelayout %}#toc-tilelayout-configuration-options)).
*/
columnWidth?: number | string;
/**
* Specifies the default height of the rows ([see example]({% slug overview_tilelayout %}#toc-tilelayout-configuration-options)).
*/
rowHeight?: number | string;
/**
* Represents the `key` field of the TileLayout item. Used for setting unique keys to the TileLayout items.
*/
dataItemKey?: string;
/**
* The collection of items that will be rendered in the TileLayout
* ([see example]({% slug overview_tilelayout %}#toc-tilelayout-configuration-options)).
*/
items?: TileLayoutItem[];
/**
* The list of tiles' positions which are used when the TileLayout is in controlled mode
* ([see example]({% slug tiles_tilelayout %}#toc-controlling-the-position)).
*/
positions?: TilePosition[];
/**
* Fires when the user repositions the tile by either dragging or resizing
* ([see example]({% slug tiles_tilelayout %}#toc-controlling-the-position)).
*/
onReposition?: (event: TileLayoutRepositionEvent) => void;
/**
* Controls how the auto-placement algorithm works, specifying exactly how auto-placed items get flowed into the TileLayout.
* For further reference, check [grid-auto-flow CSS](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-auto-flow) article.
* Defaults to `column`
* ([see example]({% slug autoflows_tilelayout %})).
*/
autoFlow?: TileLayoutAutoFlow;
/**
* Use this callback to prevent or allow dragging of the tiles based on specific dom event.
* Setting `ignoreDrag={(e) => { return !(e.target.classList.contains("k-card-title")); }}` will make only the headers draggable.
* Setting `ignoreDrag={(e) => { return e.target.nodeName == "INPUT"; }}` will ignore dragging input elements.
*/
ignoreDrag?: (event: any) => boolean;
}
/**
* The arguments for the `onReposition` TileLayout event.
*/
export declare interface TileLayoutRepositionEvent extends BaseEvent<TileLayout> {
/**
* The new positions of the TileLayout tiles.
*/
value: Array<TileStrictPosition>;
}
/**
* @hidden
*/
export declare interface TileLayoutState {
positions: TileStrictPosition[];
}
/**
* Specifies the position of each tile.
*/
export declare interface TilePosition {
/**
* Defines the order index of the TileLayoutItem.
* If not set, items will receive a sequential order.
*/
order?: number;
/**
* (Required) Defines on which column-line the TileLayoutItem will start.
* It is required in order reordering and resizing functionalities to work as expected as they rely on it.
*/
col: number;
/**
* Specifies how many columns will the TileLayoutItem spans.
* Defaults to `1`.
*/
colSpan?: number;
/**
* Defines on which row-line the TileLayoutItem will start.
*/
row?: number;
/**
* Specifies how many rows will the TileLayoutItem spans.
* Defaults to `1`.
*/
rowSpan?: number;
}
/**
* Specifies if the user is allowed to resize the TileLayoutItem and in which direction
* ([see example]({% slug tiles_tilelayout %}#toc-resizing)).
* If `resizable` is not specified, the resizing of the TileLayoutItem will be enabled for both directions.
*/
export declare type TileResizeMode = 'horizontal' | 'vertical' | boolean;
/**
* Specifies the strict position of each tile.
* Used in the [TileLayoutRepositionEvent]({% slug api_layout_tilelayoutrepositionevent %}).
*/
export declare interface TileStrictPosition extends TilePosition {
/**
* Defines the order index of the TileLayoutItem.
* If not set, items will receive a sequential order.
*/
order: number;
/**
* Specifies how many rows will the TileLayoutItem spans.
* Defaults to `1`.
*/
rowSpan: number;
/**
* Specifies how many columns will the TileLayoutItem spans.
* Defaults to `1`.
*/
colSpan: number;
}
export declare const Timeline: React_2.FunctionComponent<TimelineProps>;
/**
* @hidden
*/
export declare interface TimelineDirectionsProps {
eventsData: TimelineEventProps[];
dateFormat?: string;
transitionDuration?: number;
navigatable?: boolean;
navigation?: React_2.MutableRefObject<Navigation>;
onActionClick?: (event: EventDataProps) => void;
}
export declare interface TimelineEventProps {
/**
* Specifies if the event card is default collapsed.
*/
opened?: boolean;
/**
* Specifies the text that is rendered as body of the event card.
*/
description: string;
/**
* Represent event point on the axis.
*/
date: Date;
/**
* Specifies the text that is rendered as title.
*/
title: string;
/**
* Specifies the text that is rendered under the title.
*/
subtitle?: string;
/**
* Specifies the images that are rendered under the description.
*/
images?: {
src: string;
alt?: string;
}[];
/**
* Specifies the corresponding links that are rendered under the images.
*/
actions?: {
text: string;
url: string;
}[];
/**
* @Hidden
*/
yearFlag?: number;
}
export declare interface TimelineProps {
events: TimelineEventProps[];
/**
* Specifies the CSS class names which are set to the Timeline.
*/
className?: string;
/**
* Specifies option for expanding and collapsing the event card.
*/
collapsibleEvents?: boolean;
/**
* Switches the Timeline to horizontal mode.
*/
horizontal?: boolean;
/**
* The date format for displaying the event date.
*/
dateFormat?: string;
/**
* Render events alternatingly on both sides of the axis.
*/
alterMode?: boolean;
/**
* Specifies the time for sliding to next event in horizontal mode and time for collapsing the event in vertical mode.
* The default value are:
* - `300ms` for horizontal
* - `400ms` for vertical
*/
transitionDuration?: number;
/**
* If set to `true`, the user can use dedicated shortcuts to interact with the Timeline.
* By default, navigation is disabled.
*/
navigatable?: boolean;
/**
* An event that is called when event card is toggled.
*/
onChange?: (event: EventDataProps) => void;
/**
* An event that is called when card action is clicked.
*/
onActionClick?: (event: EventDataProps) => void;
}
/**
* @hidden
*/
export declare interface yearFlagProps {
yearFlag?: number;
}
export { }