@progress/kendo-react-buttons 7.2.4-develop.3 → 7.3.0-develop.1

package/index.d.mts

@@ -1,5 +1,2227 @@
-/**-----------------------------------------------------------------------------------------
-* Copyright © 2024 Progress Software Corporation. All rights reserved.
-* Licensed under commercial license. See LICENSE.md in the package root for more information
-*-------------------------------------------------------------------------------------------*/
-export * from './index';
+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2024 Progress Software Corporation. All rights reserved.
+ * Licensed under commercial license. See LICENSE.md in the package root for more information
+ *-------------------------------------------------------------------------------------------
+ */
+import { Align } from '@progress/kendo-react-popup';
+import { BaseEvent } from '@progress/kendo-react-common';
+import { FormComponentProps } from '@progress/kendo-react-common';
+import { ForwardRefExoticComponent } from 'react';
+import { JSX as JSX_2 } from 'react/jsx-runtime';
+import { KendoMouse } from '@progress/kendo-react-common';
+import { KendoReactComponentBaseProps } from '@progress/kendo-react-common';
+import { PopupAnimation } from '@progress/kendo-react-popup';
+import { PopupCloseEvent } from '@progress/kendo-react-popup';
+import PropTypes from 'prop-types';
+import * as React_2 from 'react';
+import { RefAttributes } from 'react';
+import { SVGIcon } from '@progress/kendo-react-common';
+
+export declare class Button extends React_2.Component<ButtonProps, ButtonState> {
+    /**
+     * @hidden
+     */
+    static propTypes: {
+        children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+        selected: PropTypes.Requireable<boolean>;
+        togglable: PropTypes.Requireable<boolean>;
+        icon: PropTypes.Requireable<string>;
+        svgIcon: PropTypes.Requireable<PropTypes.InferProps<{
+            name: PropTypes.Validator<string>;
+            content: PropTypes.Validator<string>;
+            viewBox: PropTypes.Validator<string>;
+        }>>;
+        iconClass: PropTypes.Requireable<string>;
+        imageUrl: PropTypes.Requireable<string>;
+        imageAlt: PropTypes.Requireable<string>;
+        size: PropTypes.Requireable<string | null>;
+        rounded: PropTypes.Requireable<string | null>;
+        fillMode: PropTypes.Requireable<string | null>;
+        themeColor: PropTypes.Requireable<string | null>;
+    };
+    /**
+     * @hidden
+     */
+    static defaultProps: {
+        togglable: boolean;
+        size: string;
+        rounded: string;
+        fillMode: string;
+        themeColor: string;
+    };
+    /**
+     * @hidden
+     */
+    readonly state: ButtonState;
+    private _selectedTemp?;
+    private _element;
+    /**
+     * Gets the DOM element of the Button component.
+     */
+    get element(): HTMLButtonElement | null;
+    /**
+     * Returns `true` when the component is togglable and selected ([see example]({% slug toggleable_button %})).
+     * Otherwise, returns `false`.
+     */
+    get selected(): boolean;
+    constructor(props: ButtonProps);
+    /**
+     * @hidden
+     */
+    static getDerivedStateFromProps(props: ButtonProps, state: ButtonState): {
+        selected: boolean;
+    } | null;
+    /**
+     * @hidden
+     */
+    render(): JSX_2.Element;
+    private toggleIfApplicable;
+    private handleClick;
+}
+
+export declare class ButtonGroup extends React_2.Component<ButtonGroupProps, {}> {
+    /**
+     * @hidden
+     */
+    static propTypes: {
+        children: PropTypes.Requireable<NonNullable<PropTypes.ReactElementLike | (PropTypes.ReactElementLike | null | undefined)[] | null | undefined>>;
+        className: PropTypes.Requireable<string>;
+        disabled: PropTypes.Requireable<boolean>;
+        width: PropTypes.Requireable<string>;
+        dir: PropTypes.Requireable<string>;
+    };
+    private _element;
+    constructor(props: ButtonGroupProps);
+    /**
+     * @hidden
+     */
+    render(): JSX_2.Element;
+    private mapButtons;
+    private renderButton;
+}
+
+/**
+ * Represents the properties which can be set to a ButtonGroup.
+ */
+declare interface ButtonGroupInterface {
+    /**
+     * @hidden
+     */
+    children?: React.ReactNode;
+    /**
+     * By default, the ButtonGroup is enabled ([see example]({% slug disabledstate_buttongroup %})). To disable the whole group of buttons, set its `disabled` attribute to `true`. To disable a specific button, set its own `disabled` attribute to `true` and leave the `disabled` attribute of the ButtonGroup undefined.
+     *
+     * If you define the `disabled` attribute of the ButtonGroup, it will take precedence over the `disabled` attributes of the underlying buttons and they will be ignored.
+     */
+    disabled?: boolean;
+    /**
+     * Sets the width of the ButtonGroup.
+     *
+     * If the width of the ButtonGroup is set:
+     * - The buttons resize automatically to fill the full width of the group wrapper.
+     * - The buttons acquire the same width.
+     */
+    width?: string;
+    /**
+     * Sets the direction of the ButtonGroup ([more information](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/dir)).
+     *
+     * The available options are:
+     * * `rtl`
+     * * `ltr`
+     * * `auto`
+     */
+    dir?: string;
+}
+
+/**
+ * Represents the props of the [KendoReact ButtonGroup component]({% slug overview_buttongroup %}).
+ */
+export declare interface ButtonGroupProps extends ButtonGroupInterface {
+    /**
+     * Sets the `className` of the ButtonGroup component.
+     */
+    className?: string;
+}
+
+/**
+ * Inherits the native HTML Button. Represents the properties which can be set to a Button.
+ */
+declare interface ButtonInterface {
+    /**
+     * Specifies if the Button is disabled ([see example]({% slug disabled_button %})). Defaults to `false`.
+     */
+    disabled?: boolean;
+    /**
+     * Sets the selected state of the Button. Can be used for controlled state.
+     */
+    selected?: boolean;
+    /**
+     * Provides visual styling that indicates if the Button is selected ([see example]({% slug toggleable_button %})). Defaults to `false`.
+     */
+    togglable?: boolean;
+    /**
+     * Defines the name for an existing icon in a KendoReact theme ([see example]({% slug icons_button %})). The icon is rendered inside the Button by a `span.k-icon` element.
+     */
+    icon?: string;
+    svgIcon?: SVGIcon;
+    /**
+     * Defines a CSS class&mdash;or multiple classes separated by spaces&mdash;which are applied to a `span` element inside the Button ([see example]({% slug icons_button %})). Allows the usage of custom icons.
+     */
+    iconClass?: string;
+    /**
+     * Defines a URL which is used as an `img` element inside the Button ([see example]({% slug icons_button %})). The URL can be relative or absolute. If relative, it is evaluated with relation to the URL of the web page.
+     */
+    imageUrl?: string;
+    /**
+     * Defines the alternative text of the image rendered inside the Button component.
+     */
+    imageAlt?: string;
+}
+
+/**
+ * The interface for describing items that can be passed to the `items` property of the SplitButton or the DropDownButton as an alternative to passing them as children.
+ */
+export declare interface ButtonItem {
+    /**
+     * Specifies the text of the item.
+     */
+    text: string;
+    /**
+     * Defines an icon that will be rendered next to the item text.
+     */
+    icon?: string;
+    /**
+     * Defines an SVG icon that will be rendered next to the item text.
+     */
+    svgIcon?: SVGIcon;
+    /**
+     * Defines an icon with a custom CSS class that will be rendered next to the item text.
+     */
+    iconClass?: string;
+    /**
+     * Defines the location of an image that will be displayed next to the item text.
+     */
+    imageUrl?: string;
+    /**
+     * Determines whether the item is disabled.
+     */
+    disabled?: boolean;
+    /**
+     * A React functional or class component for rendering the item. The default rendering includes an icon, an image, and text.
+     */
+    render?: any;
+}
+
+/**
+ * The props of the ButtonItem component.
+ * The ButtonItem component renders each list item in the dropdown buttons list.
+ */
+export declare interface ButtonItemProps {
+    focused?: boolean;
+    index?: number;
+    onClick: (event: React_2.MouseEvent<HTMLLIElement, MouseEvent>, index?: number) => void;
+    onDown?: (event: React_2.PointerEvent<HTMLLIElement> | React_2.MouseEvent<HTMLLIElement, MouseEvent>) => void;
+    item?: null | React_2.ComponentType<{
+        item: any;
+        itemIndex: number;
+    }>;
+    render?: ((li: React_2.ReactElement<HTMLLIElement>, props: ButtonItemProps) => React_2.ReactNode) | React_2.ComponentType<{
+        item: any;
+        itemIndex: number;
+    }>;
+    dataItem: any;
+    id?: string;
+    textField?: string;
+    className?: string;
+}
+
+/**
+ * Represents the props of the [KendoReact Button component]({% slug overview_button %}).
+ * Extends the [native button props](https://developer.mozilla.org/en-US/docs/Web/API/HTMLButtonElement).
+ */
+export declare interface ButtonProps extends ButtonInterface, React_2.ButtonHTMLAttributes<HTMLButtonElement> {
+    /**
+     * @hidden
+     */
+    children?: React_2.ReactNode;
+    /**
+     * Configures the `size` of the Button.
+     *
+     * The available options are:
+     * - small
+     * - medium
+     * - large
+     * - null&mdash;Does not set a size `className`.
+     *
+     * @default `medium`
+     */
+    size?: null | 'small' | 'medium' | 'large';
+    /**
+     * Configures the `roundness` of the Button.
+     *
+     * The available options are:
+     * - small
+     * - medium
+     * - large
+     * - full
+     * - null&mdash;Does not set a rounded `className`.
+     *
+     * @default `medium`
+     */
+    rounded?: null | 'small' | 'medium' | 'large' | 'full';
+    /**
+     * Sets the title htmlAttribute of the Button.
+     */
+    title?: string;
+    /**
+     * Configures the `fillMode` of the Button.
+     *
+     * The available options are:
+     * - solid
+     * - outline
+     * - flat
+     * - link
+     * - null&mdash;Does not set a fillMode `className`.
+     *
+     * @default `solid`
+     */
+    fillMode?: null | 'solid' | 'outline' | 'flat' | 'link';
+    /**
+     * Configures the `themeColor` of the Button.
+     *
+     * The available options are:
+     * - base
+     * - primary
+     * - secondary
+     * - tertiary
+     * - info
+     * - success
+     * - warning
+     * - error
+     * - dark
+     * - light
+     * - inverse
+     * - null&mdash;Does not set a themeColor `className`.
+     *
+     * @default `base`
+     */
+    themeColor?: null | 'base' | 'primary' | 'secondary' | 'tertiary' | 'info' | 'success' | 'warning' | 'error' | 'dark' | 'light' | 'inverse';
+}
+
+/**
+ * The settings of the popup container.
+ */
+export declare interface ButtonsPopupSettings {
+    /**
+     * Controls the popup animation. By default, the open and close animations are enabled.
+     */
+    animate?: boolean | PopupAnimation;
+    /**
+     * Specifies a list of CSS classes that are used for styling the popup.
+     */
+    popupClass?: string;
+    /**
+     * Specifies the pivot point of the anchor
+     * ([see example]({% slug alignmentpositioning_popup %})).
+     */
+    anchorAlign?: Align;
+    /**
+     * Specifies the pivot point of the Popup
+     * ([see example]({% slug alignmentpositioning_popup %})).
+     */
+    popupAlign?: Align;
+    /**
+     * Fires after the Popup is closed.
+     */
+    onClose?: (event: PopupCloseEvent) => void;
+}
+
+/**
+ * @hidden
+ */
+declare interface ButtonState {
+    selected: boolean;
+}
+
+/**
+ * Represents the Chip component.
+ */
+export declare const Chip: React_2.ForwardRefExoticComponent<ChipProps & React_2.RefAttributes<ChipHandle | null>>;
+
+export declare interface ChipAvatarProps {
+    /**
+     * Sets the image of the avatar.
+     */
+    image: string;
+    /**
+     * Defines the alternative text of the avatar image.
+     */
+    imageAlt: string;
+    /**
+     * Configures the `roundness` of the avatar
+     */
+    rounded?: null | 'small' | 'medium' | 'large' | 'full';
+    /**
+     * Sets additional CSS styles to the avatar
+     */
+    style?: React_2.CSSProperties;
+}
+
+/**
+ * Represents the return type of the ChipFocusEvent.
+ */
+export declare interface ChipFocusEvent {
+    /**
+     * The target of the ChipFocusEvent from ChipHandle.
+     */
+    target: ChipHandle;
+    /**
+     * The event of the ChipFocusEvent.
+     */
+    syntheticEvent: React.FocusEvent<any>;
+}
+
+/**
+ * Represents the target(element and props) of the ChipRemoveEvent.
+ */
+export declare interface ChipHandle {
+    /**
+     * The current element or `null` if there is no one.
+     */
+    element: HTMLDivElement | null;
+    /**
+     * The props values of the Chip.
+     */
+    props: ChipProps;
+}
+
+/**
+ * Represents the return type of the ChipKeyboardEvent.
+ */
+export declare interface ChipKeyboardEvent {
+    /**
+     * The target of the ChipKeyboardEvent from ChipHandle.
+     */
+    target: ChipHandle;
+    /**
+     * The event of the ChipKeyboardEvent.
+     */
+    syntheticEvent: React.KeyboardEvent<any>;
+}
+
+/**
+ * Represents the ChipList component.
+ */
+export declare const ChipList: React_2.ForwardRefExoticComponent<ChipListProps & React_2.RefAttributes<ChipListHandle | null>>;
+
+/**
+ * Represents the return type of the ChipListChangeEvent.
+ */
+export declare interface ChipListChangeEvent {
+    /**
+     * Represents the new state value.
+     */
+    value: any | any[];
+    /**
+     * The target of the ChipListChangeEvent from ChipListHandle.
+     */
+    target: ChipListHandle;
+    /**
+     * The event of the ChipListChangeEvent.
+     */
+    syntheticEvent: React.SyntheticEvent<any>;
+}
+
+/**
+ * Represents the return type of the ChipListDataChangeEvent.
+ */
+export declare interface ChipListDataChangeEvent {
+    /**
+     * Represents the new data state value.
+     */
+    value: any | any[];
+    /**
+     * The target of the ChipListChangeEvent from ChipListHandle.
+     */
+    target: ChipListHandle;
+    /**
+     * The event of the ChipListChangeEvent.
+     */
+    syntheticEvent: React.SyntheticEvent<any>;
+}
+
+/**
+ * Represents the target(element and props) of the ChipListChangeEvent.
+ */
+export declare interface ChipListHandle {
+    /**
+     * The current element or `null` if there is no one.
+     */
+    element: HTMLDivElement | null;
+    /**
+     * The props values of the ChipList.
+     */
+    props: ChipListProps;
+}
+
+/**
+ * Represents the properties of [ChipList]({% slug api_buttons_chiplist %}) component.
+ */
+export declare interface ChipListProps extends FormComponentProps, KendoMouse<ChipListHandle, HTMLDivElement> {
+    /**
+     * Sets the `id` property of the top div element of the ChipList.
+     */
+    id?: string;
+    /**
+     * Sets additional classes to the ChipList.
+     */
+    className?: string;
+    /**
+     * Sets the `tabIndex` attribute.
+     */
+    tabIndex?: number;
+    /**
+     * Sets additional CSS styles to the ChipList.
+     */
+    style?: React_2.CSSProperties;
+    /**
+     * Represents Chip component.
+     */
+    chip?: React_2.ComponentType<ChipProps>;
+    /**
+     * Represents the data about the child Chips.
+     */
+    data?: any;
+    /**
+     * Represents the default data about the child Chips.
+     */
+    defaultData?: any[];
+    /**
+     * Triggered after Chip data change.
+     */
+    onDataChange?: (event: ChipListDataChangeEvent) => void;
+    /**
+     * Represents the selection state of Chip component.
+     */
+    value?: any | any[];
+    /**
+     * Represents the default value of the selection state of Chip component.
+     */
+    defaultValue?: any | any[];
+    /**
+     * Triggered after value change.
+     */
+    onChange?: (event: ChipListChangeEvent) => void;
+    /**
+     * Represents the selection state of Chip component.
+     */
+    selection?: string;
+    /**
+     * Represents the `text` field of Chip, used for the `label`.
+     */
+    textField?: string;
+    /**
+     * Represents the `value` field of Chip, used for setting the Chip `id`.
+     */
+    valueField?: string;
+    /**
+     * Determines of ChipList is disabled.
+     */
+    disabled?: boolean;
+    /**
+     * The ChipList direction 'ltr' as default or 'rtl'.
+     */
+    dir?: string;
+    /**
+     * Identifies the element(s) which will describe the component, similar to [HTML aria-describedby attribute](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-describedby_attribute).
+     * For example these elements could contain error or hint message.
+     */
+    ariaDescribedBy?: string;
+    /**
+     * Identifies the element(s) which will label the component.
+     */
+    ariaLabelledBy?: string;
+    /**
+     * The accessible label of the component.
+     */
+    ariaLabel?: string;
+    /**
+     * Configures the `size` of the ChipList.
+     *
+     * The available options are:
+     * - small
+     * - medium
+     * - large
+     * - null&mdash;Does not set a size `className`.
+     *
+     * @default `medium`
+     */
+    size?: null | 'small' | 'medium' | 'large';
+}
+
+/**
+ * Represents the return type of the ChipMouseEvent.
+ */
+export declare interface ChipMouseEvent {
+    /**
+     * The target of the ChipMouseEvent from ChipHandle.
+     */
+    target: ChipHandle;
+    /**
+     * The event of the ChipMouseEvent.
+     */
+    syntheticEvent: React.MouseEvent<any>;
+}
+
+/**
+ * Represents the properties of [Chip]({% slug api_buttons_chip %}) component.
+ */
+export declare interface ChipProps {
+    /**
+     * Sets the `id` property of the top div element of the Chip.
+     */
+    id?: string;
+    /**
+     * Sets additional classes to the Chip.
+     */
+    className?: string;
+    /**
+     * The React elements that will be rendered as custom content inside the Chip.
+     */
+    children?: React_2.ReactNode;
+    /**
+     * Sets the `tabIndex` attribute.
+     */
+    tabIndex?: number;
+    /**
+     * Sets additional CSS styles to the Chip.
+     */
+    style?: React_2.CSSProperties;
+    /**
+     * Sets the label text of the Chip.
+     */
+    text?: string;
+    /**
+     * Sets the `id` value of the Chip.
+     */
+    value?: any;
+    /**
+     * The Chip direction 'ltr' as default or 'rtl'.
+     */
+    dir?: string;
+    /**
+     * Determines if the Chip could be removed.
+     */
+    removable?: boolean;
+    /**
+     * Determines if the Chip has custom font `removeIcon`.
+     */
+    removeIcon?: string;
+    /**
+     * Determines if the Chip has custom SVG `removeIcon`.
+     */
+    removeSvgIcon?: SVGIcon;
+    /**
+     * Determines if the Chip is disabled.
+     */
+    disabled?: boolean;
+    /**
+     * Determines if the Chip has a font `icon`.
+     */
+    icon?: string;
+    /**
+     * Determines if the Chip has an SVG `icon`.
+     */
+    svgIcon?: SVGIcon;
+    /**
+     * Determines if the Chip has an avatar.
+     */
+    avatar?: ChipAvatarProps;
+    /**
+     * Determines if the Chip has custom selection font `icon`.
+     */
+    selectedIcon?: string;
+    /**
+     * Determines if the Chip has custom selection SVG `icon`.
+     */
+    selectedSvgIcon?: SVGIcon;
+    /**
+     * Triggered on Chip removing.
+     */
+    onRemove?: (event: ChipRemoveEvent) => void;
+    /**
+     * Triggered on `onClick` event.
+     */
+    onClick?: (event: ChipMouseEvent) => void;
+    /**
+     * Triggered on `onMouseDown` event.
+     */
+    onMouseDown?: (event: ChipMouseEvent) => void;
+    /**
+     * Triggered on `onMouseUp` event.
+     */
+    onMouseUp?: (event: ChipMouseEvent) => void;
+    /**
+     * Triggered on `onDoubleClick` event.
+     */
+    onDoubleClick?: (event: ChipMouseEvent) => void;
+    /**
+     * Triggered on `onMouseEnter` event.
+     */
+    onMouseEnter?: (event: ChipMouseEvent) => void;
+    /**
+     * Triggered on `onMouseLeave` event.
+     */
+    onMouseLeave?: (event: ChipMouseEvent) => void;
+    /**
+     * Triggered on `onMouseMove` event.
+     */
+    onMouseMove?: (event: ChipMouseEvent) => void;
+    /**
+     * Triggered on `onMouseOut` event.
+     */
+    onMouseOut?: (event: ChipMouseEvent) => void;
+    /**
+     * Triggered on `onMouseOver` event.
+     */
+    onMouseOver?: (event: ChipMouseEvent) => void;
+    /**
+     * Triggered on `onKeyDown` event.
+     */
+    onKeyDown?: (event: ChipKeyboardEvent) => void;
+    /**
+     * Triggered on `onFocus` event.
+     */
+    onFocus?: (event: ChipFocusEvent) => void;
+    /**
+     * Triggered on `onBlur` event.
+     */
+    onBlur?: (event: ChipFocusEvent) => void;
+    /**
+     * Represents the item data, coming from the `ChipList` component.
+     */
+    dataItem?: any;
+    /**
+     * Determines if the Chip is selected.
+     */
+    selected?: boolean;
+    /**
+     * Identifies the element(s) which will describe the component, similar to an [HTML aria-describedby attribute](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-describedby_attribute).
+     * For example, these elements could contain an error or a hint message.
+     */
+    ariaDescribedBy?: string;
+    /**
+     * @hidden
+     */
+    role?: string;
+    /**
+     * Configures the `size` of the Chip.
+     *
+     * The available options are:
+     * - small
+     * - medium
+     * - large
+     * - null&mdash;Does not set a size `className`.
+     *
+     * @default `medium`
+     */
+    size?: null | 'small' | 'medium' | 'large';
+    /**
+     * Configures the `roundness` of the Chip.
+     *
+     * The available options are:
+     * - small
+     * - medium
+     * - large
+     * - full
+     * - null&mdash;Does not set a rounded `className`.
+     *
+     * @default `medium`
+     */
+    rounded?: null | 'small' | 'medium' | 'large' | 'full';
+    /**
+     * Configures the `fillMode` of the Chip.
+     *
+     * The available options are:
+     * - solid
+     * - outline
+     * - null&mdash;Does not set a fillMode `className`.
+     *
+     * @default `solid`
+     */
+    fillMode?: null | 'solid' | 'outline';
+    /**
+     * Configures the `themeColor` of the Chip.
+     *
+     * The available options are:
+     * - base
+     * - info
+     * - success
+     * - warning
+     * - error
+     * - null&mdash;Does not set a themeColor `className`.
+     *
+     * @default `base`
+     */
+    themeColor?: null | 'base' | 'info' | 'success' | 'warning' | 'error';
+    /**
+     * Represents the label of the Chip component.
+     */
+    ariaLabel?: string;
+}
+
+/**
+ * Represents the return type of the ChipRemoveEvent.
+ */
+export declare interface ChipRemoveEvent {
+    /**
+     * The target of the ChipRemoveEvent from ChipHandle.
+     */
+    target: ChipHandle;
+    /**
+     * The event of the ChipRemoveEvent.
+     */
+    syntheticEvent: React.SyntheticEvent<any>;
+}
+
+/** @hidden */
+export declare const DropDownButton: ForwardRefExoticComponent<DropDownButtonProps & RefAttributes<any>>;
+
+export declare interface DropDownButtonBlurEvent extends BaseEvent<DropDownButtonClassComponent> {
+}
+
+/**
+ * Represents the [KendoReact DropDownButton component]({% slug overview_dropdownbutton %}).
+ *
+ * @example
+ * ```jsx
+ * class App extends React.Component {
+ *    render() {
+ *        return (
+ *            <DropDownButton text="Act">
+ *                <DropDownButtonItem text="Item1" />
+ *                <DropDownButtonItem text="Item2" />
+ *                <DropDownButtonItem text="Item3" />
+ *            </DropDownButton>
+ *        );
+ *    }
+ * }
+ * ReactDOM.render(<App />, document.querySelector('my-app'));
+ * ```
+ */
+export declare class DropDownButtonClassComponent extends React_2.Component<DropDownButtonProps, DropDownButtonState> {
+    /**
+     * @hidden
+     */
+    static propTypes: {
+        accessKey: PropTypes.Requireable<string>;
+        ariaLabel: PropTypes.Requireable<string>;
+        title: PropTypes.Requireable<string>;
+        onFocus: PropTypes.Requireable<(...args: any[]) => any>;
+        onBlur: PropTypes.Requireable<(...args: any[]) => any>;
+        onItemClick: PropTypes.Requireable<(...args: any[]) => any>;
+        onOpen: PropTypes.Requireable<(...args: any[]) => any>;
+        onClose: PropTypes.Requireable<(...args: any[]) => any>;
+        items: PropTypes.Requireable<any[]>;
+        textField: PropTypes.Requireable<string>;
+        tabIndex: PropTypes.Requireable<number>;
+        disabled: PropTypes.Requireable<boolean>;
+        icon: PropTypes.Requireable<string>;
+        svgIcon: PropTypes.Requireable<PropTypes.InferProps<{
+            name: PropTypes.Validator<string>;
+            content: PropTypes.Validator<string>;
+            viewBox: PropTypes.Validator<string>;
+        }>>;
+        iconClass: PropTypes.Requireable<string>;
+        imageUrl: PropTypes.Requireable<string>;
+        popupSettings: PropTypes.Requireable<object>;
+        itemRender: PropTypes.Requireable<(...args: any[]) => any>;
+        item: PropTypes.Requireable<(...args: any[]) => any>;
+        className: PropTypes.Requireable<string>;
+        buttonClass: PropTypes.Requireable<string>;
+        dir: PropTypes.Requireable<string>;
+    };
+    /**
+     * @hidden
+     */
+    static defaultProps: {
+        size: string;
+        rounded: string;
+        fillMode: string;
+        themeColor: string;
+    };
+    /**
+     * @hidden
+     */
+    readonly state: {
+        opened: boolean;
+        focused: boolean;
+        focusedIndex: number;
+    };
+    private mainButton;
+    private list;
+    private skipFocus;
+    private get guid();
+    private buttonsData;
+    private openedDuringOnChange?;
+    private get opened();
+    constructor(props: DropDownButtonProps);
+    /**
+     * @hidden
+     */
+    render(): JSX_2.Element;
+    /**
+     * @hidden
+     */
+    componentDidMount(): void;
+    /**
+     * The DOM element of main button.
+     */
+    get element(): HTMLButtonElement | null;
+    private onKeyDown;
+    private switchFocus;
+    private handleFocus;
+    private handleButtonBlur;
+    private handleMenuBlur;
+    private setOpen;
+    private onItemClick;
+    private onItemDown;
+    private mouseDown;
+    private dispatchClickEvent;
+    private renderPopup;
+    private onPopupClose;
+    private listRef;
+    private renderChildItems;
+    private onClickMainButton;
+    private dispatchPopupEvent;
+    private isItemDisabled;
+    private isRtl;
+}
+
+export declare interface DropDownButtonCloseEvent extends BaseEvent<DropDownButtonClassComponent> {
+}
+
+export declare interface DropDownButtonFocusEvent extends BaseEvent<DropDownButtonClassComponent> {
+}
+
+/**
+ * Represent the `ref` of the DropDownButton component.
+ */
+export declare interface DropDownButtonHandle extends Pick<DropDownButtonClassComponent, keyof DropDownButtonClassComponent> {
+}
+
+export declare class DropDownButtonItem extends React_2.Component<DropDownButtonItemProps, {}> {
+    /**
+     * @hidden
+     */
+    static propTypes: {
+        text: PropTypes.Requireable<string>;
+        icon: PropTypes.Requireable<string>;
+        iconClass: PropTypes.Requireable<string>;
+        imageUrl: PropTypes.Requireable<string>;
+        selected: PropTypes.Requireable<boolean>;
+        disabled: PropTypes.Requireable<boolean>;
+        render: PropTypes.Requireable<any>;
+    };
+    /**
+     * @hidden
+     */
+    render(): null;
+}
+
+/**
+ * The arguments for the `itemClick` event.
+ */
+export declare interface DropDownButtonItemClickEvent extends BaseEvent<DropDownButtonClassComponent> {
+    /**
+     * The clicked item.
+     */
+    item: any;
+    /**
+     * The zero-based index of the clicked item.
+     */
+    itemIndex: number;
+}
+
+/**
+ * The properties of the KendoReact DropDownButtonItem component.
+ */
+export declare interface DropDownButtonItemProps extends ButtonItem {
+    /**
+     * Determines the selected state of the ButtonItem component.
+     */
+    selected?: boolean;
+}
+
+export declare interface DropDownButtonOpenEvent extends BaseEvent<DropDownButtonClassComponent> {
+}
+
+export declare interface DropDownButtonProps extends KendoReactComponentBaseProps {
+    /**
+     * Specifies the `accessKey` of the main button.
+     */
+    accessKey?: string;
+    /**
+     * The accessible label of the component.
+     */
+    ariaLabel?: string;
+    /**
+     * The title of the component.
+     */
+    title?: string;
+    /**
+     * Specifies the text of the main button ([see example]({% slug overview_dropdownbutton %}#toc-basic-usage)).
+     */
+    text?: React.ReactNode;
+    /**
+     * Specifies the list items ([see example]({% slug binding_dropdownbutton %}#toc-array-of-objects)).
+     */
+    items?: any[];
+    /**
+     * Configures the field that will be used for the text of the `items`. `textField` has to be used together with the `items` prop ([see example]({% slug binding_dropdownbutton %}#toc-array-of-objects)).
+     */
+    textField?: string;
+    /**
+     * Specifies the `tabIndex` of the main button.
+     */
+    tabIndex?: number;
+    /**
+     * Determines whether the component is disabled ([see example]({% slug disabled_dropdownbutton %})).
+     */
+    disabled?: boolean;
+    /**
+     * Opens the popup of the DropDownButton if set to `true`.
+     */
+    opened?: boolean;
+    /**
+     * Defines an icon that will be rendered next to the main button text ([see example]({% slug icons_dropdownbutton %})).
+     */
+    icon?: string;
+    /**
+     * Defines a SVG icon that will be rendered next to the main button text ([see example]({% slug icons_dropdownbutton %})).
+     */
+    svgIcon?: SVGIcon;
+    /**
+     * Defines an icon with a custom CSS class that will be rendered next to the main button text ([see example]({% slug icons_dropdownbutton %})).
+     */
+    iconClass?: string;
+    /**
+     * Defines the location of an image that will be displayed next to the main button text ([see example]({% slug icons_dropdownbutton %})).
+     */
+    imageUrl?: string;
+    /**
+     * Configures the popup
+     * ([see example]({% slug customization_dropdownbutton %}#toc-popup)).
+     */
+    popupSettings?: ButtonsPopupSettings;
+    /**
+     * A React functional or class component which is used for rendering items ([see example]({% slug customization_dropdownbutton %}#toc-item-render)). The default rendering includes an icon, an image, and text.
+     */
+    item?: null | React.ComponentType<{
+        item: any;
+        itemIndex: number;
+    }>;
+    /**
+     * Fires when a dropdown list button item is about to be rendered. Use it to override the default appearance of the list items.
+     * if `item` prop is not declared, `itemRender` behaves like `item`, for backward compatibility with versions before 4.2.0
+     */
+    itemRender?: ((li: React.ReactElement<HTMLLIElement>, props: ButtonItemProps) => React.ReactNode) | React.ComponentType<{
+        item: any;
+        itemIndex: number;
+    }>;
+    /**
+     * Sets the `className` of the DropDownButton component.
+     */
+    className?: string;
+    /**
+     * Sets the `className` of the main button.
+     */
+    buttonClass?: string;
+    /**
+     * Sets the direction of the component.
+     */
+    dir?: string;
+    /**
+     * Fires when the component is focused ([see example]({% slug overview_dropdownbutton %}#toc-events)).
+     */
+    onFocus?: (event: DropDownButtonFocusEvent) => void;
+    /**
+     * Fires when the component is blurred ([see example]({% slug overview_dropdownbutton %}#toc-events)).
+     */
+    onBlur?: (event: DropDownButtonBlurEvent) => void;
+    /**
+     * Fires when an item is clicked ([see example]({% slug overview_dropdownbutton %}#toc-events)).
+     */
+    onItemClick?: (event: DropDownButtonItemClickEvent) => void;
+    /**
+     * Fires when the popup which contains the items is opened ([see example]({% slug overview_dropdownbutton %}#toc-events)).
+     */
+    onOpen?: (event: DropDownButtonOpenEvent) => void;
+    /**
+     * Fires when the popup which contains the items is closed ([see example]({% slug overview_dropdownbutton %}#toc-events)).
+     */
+    onClose?: (event: DropDownButtonCloseEvent) => void;
+    /**
+     * Configures the `size` of the DropDownButton.
+     *
+     * The available options are:
+     * - small
+     * - medium
+     * - large
+     * - null&mdash;Does not set a size `className`.
+     *
+     * @default `medium`
+     */
+    size?: null | 'small' | 'medium' | 'large';
+    /**
+     * Configures the `roundness` of the DropDownButton.
+     *
+     * The available options are:
+     * - small
+     * - medium
+     * - large
+     * - full
+     * - null&mdash;Does not set a rounded `className`.
+     *
+     * @default `medium`
+     */
+    rounded?: null | 'small' | 'medium' | 'large' | 'full';
+    /**
+     * Configures the `fillMode` of the DropDownButton.
+     *
+     * The available options are:
+     * - solid
+     * - outline
+     * - flat
+     * - link
+     * - null&mdash;Does not set a fillMode `className`.
+     *
+     * @default `solid`
+     */
+    fillMode?: null | 'solid' | 'outline' | 'flat' | 'link';
+    /**
+     * Configures the `themeColor` of the DropDownButton.
+     *
+     * The available options are:
+     * - base
+     * - primary
+     * - secondary
+     * - tertiary
+     * - info
+     * - success
+     * - warning
+     * - error
+     * - dark
+     * - light
+     * - inverse
+     * - null&mdash;Does not set a themeColor `className`.
+     *
+     * @default `base`
+     */
+    themeColor?: null | 'base' | 'primary' | 'secondary' | 'tertiary' | 'info' | 'success' | 'warning' | 'error' | 'dark' | 'light' | 'inverse';
+}
+
+/**
+ * @hidden
+ */
+declare interface DropDownButtonState {
+    focusedIndex?: number;
+    focused?: boolean;
+    opened: boolean;
+}
+
+/**
+ * Represents the [KendoReact FloatingActionButton component]({% slug overview_floatingactionbutton %}).
+ *
+ * @example
+ * ```jsx
+ * const App = () => {
+ *   return (
+ *     <FloatingActionButton icon="plus" text="Create"/>
+ *   );
+ * };
+ *    ReactDOM.render(<App />, document.querySelector('my-app'));
+ * ```
+ */
+export declare const FloatingActionButton: React_2.ForwardRefExoticComponent<FloatingActionButtonProps & React_2.RefAttributes<FloatingActionButtonHandle | null>>;
+
+/**
+ * Specifies the horizontal and vertical alignment of the Floating Action Button in relation to the container.
+ *
+ * > Centering the Floating Action Button in both horizontal and vertical dimension is not a typical use case.
+ * Still, it is possible to achieve such a layout with appropriate offsets. Setting horizontal: "center" and
+ * vertical: "middle" at the same time is not supported.
+ */
+export declare interface FloatingActionButtonAlign {
+    /**
+     * Defines the possible horizontal alignment of the Floating Action Button.
+     *
+     * The available values are:
+     * - `start`&mdash;Uses the start point of the container.
+     * - `center`&mdash;Uses the center point of the container.
+     * - `end`(Default)&mdash;Uses the end point of the container.
+     */
+    horizontal?: 'start' | 'center' | 'end';
+    /**
+     * Defines the possible vertical alignment of the Floating Action Button.
+     *
+     * The available values are:
+     * - `top`&mdash;Uses the top point of the container.
+     * - `middle`&mdash;Uses the middle point of the container.
+     * - `bottom`(Default)&mdash;Uses the bottom point of the container.
+     */
+    vertical?: 'top' | 'middle' | 'bottom';
+}
+
+/**
+ * Specifies the horizontal and vertical offset applied to the Floating Action Button.
+ *
+ * Normally, the floating button is positioned next to the boundaries of its container with a default offset of `16px`.
+ *
+ * Positive offsets move floating buttons, which are in a corner, further from that corner. Buttons, which are
+ * not in a corner, can be moved along the container's boundary or towards the center of the container.
+ *
+ * A negative offset can be used to force a button to overflow the boundaries of its container.
+ */
+export declare interface FloatingActionButtonAlignOffset {
+    /**
+     * Sets the horizontal offset of the Floating Action Button.
+     */
+    x?: number | string;
+    /**
+     * Sets the vertical offset of the Floating Action Button.
+     */
+    y?: number | string;
+}
+
+/**
+ * Represents the return type of the FloatingActionButton events.
+ */
+export declare interface FloatingActionButtonEvent extends BaseEvent<FloatingActionButtonHandle> {
+}
+
+/**
+ * The FloatingActionButton ref.
+ */
+export declare interface FloatingActionButtonHandle {
+    /**
+     * The FloatingActionButton element.
+     */
+    element: HTMLButtonElement | null;
+    /**
+     * Focus the FloatingActionButton.
+     */
+    focus: () => void;
+}
+
+/**
+ * Represents the [KendoReact FloatingActionButtonItem component]({% slug overview_floatingactionbutton %}).
+ *
+ * @example
+ * ```jsx
+ *
+ * const App = () => {
+ *   return (
+ *       <FloatingActionButton items={[{icon: 'pencil', text: 'Edit'}, {icon: 'close', text: 'Remove'}] icon: 'plus'} />
+ *   );
+ * };
+ *    ReactDOM.render(<App />, document.querySelector('my-app'));
+ * ```
+ */
+export declare const FloatingActionButtonItem: React_2.ForwardRefExoticComponent<Omit<FloatingActionButtonItemProps, "ref"> & React_2.RefAttributes<FloatingActionButtonItemHandle | null>>;
+
+/**
+ * Represents the return type of the FloatingActionButtonItemEvent.
+ */
+export declare interface FloatingActionButtonItemEvent extends BaseEvent<FloatingActionButtonHandle> {
+    /**
+     * The clicked item props.
+     */
+    itemProps?: FloatingActionButtonItemProps;
+    /**
+     * The zero-based index of the clicked item.
+     */
+    itemIndex: number;
+}
+
+/**
+ * The FloatingActionButtonItemHandle ref.
+ */
+export declare interface FloatingActionButtonItemHandle {
+    /**
+     * The FloatingActionButtonItemHandle element.
+     */
+    element: HTMLLIElement | null;
+    /**
+     * Focus the FloatingActionButtonItem.
+     */
+    focus: () => void;
+}
+
+/**
+ * Represents the props of the [KendoReact FloatingActionButtonItem component]({% slug overview_floatingactionbutton %}).
+ */
+export declare interface FloatingActionButtonItemProps {
+    /**
+     * Sets additional CSS styles to the FloatingActionButtonItem.
+     */
+    style?: React_2.CSSProperties;
+    /**
+     * Specifies a list of CSS classes that will be added to the FloatingActionButtonItem.
+     */
+    className?: string;
+    /**
+     * Represents the children that are passed to the FloatingActionButtonItem.
+     */
+    children?: any;
+    /**
+     * Specifies if the Floating Action Button Item is disabled [see example]({% slug disabled_floatingactionbuttonitem %}).
+     * Defaults to `false`.
+     */
+    disabled?: boolean;
+    /**
+     * Sets the index of the Floating Action Button Item that is used to identify it.
+     */
+    index?: number;
+    /**
+     * Defines the icon rendered in the FloatingActionButtonItem
+     * [see example]({% slug databinding_floatingactionbutton %}).
+     */
+    icon?: string;
+    /**
+     * Defines the SVG icon rendered in the FloatingActionButtonItem.
+     */
+    svgIcon?: SVGIcon;
+    /**
+     * Specifies the text of the FloatingActionButtonItem
+     * [see example]({% slug databinding_floatingactionbutton %}).
+     */
+    text?: string;
+    /**
+     * Sets the `tabIndex` property of the FloatingActionButtonItem..
+     * Defaults to `0`.
+     */
+    tabIndex?: number;
+    /**
+     * Sets a custom property. Contained in the FloatingActionButtonItem props that are
+     * returned from the `onItemClick` FloatingActionButton event
+     * [see example]({% slug customization_floatingactionbutton %}#toc-items-rendering).
+     */
+    [customProp: string]: any;
+    /**
+     * @hidden
+     */
+    id?: string;
+    /**
+     * @hidden
+     */
+    dataItem?: any;
+    /**
+     * @hidden
+     */
+    item?: any;
+    /**
+     * @hidden
+     */
+    focused?: boolean;
+    /**
+     * @hidden
+     */
+    onDown?: (event: any) => void;
+    /**
+     * @hidden
+     */
+    onClick?: (event: any, index: number) => void;
+}
+
+/**
+ * Represents the settings that can be passed to the Popup inside the FloatingActionButtonPopupSettings.
+ */
+export declare interface FloatingActionButtonPopupSettings {
+    /**
+     * Controls the popup animation. By default, the open and close animations are enabled
+     * [see example]({% slug customization_floatingactionbutton %}#toc-popup-behavior).
+     */
+    animate?: boolean | PopupAnimation;
+    /**
+     * Specifies a list of CSS classes that are used for styling the popup
+     * [see example]({% slug customization_floatingactionbutton %}#toc-popup-behavior).
+     */
+    popupClass?: string;
+    /**
+     * @hidden
+     */
+    anchorAlign?: Align;
+    /**
+     * @hidden
+     */
+    popupAlign?: Align;
+}
+
+/**
+ * Specifies the position mode of the Floating Action Button. It is based on the
+ * [CSS position](https://developer.mozilla.org/en-US/docs/Web/CSS/position) rule.
+ *
+ * * The possible values are:
+ * * 'absolute' (Default)
+ * * 'fixed'
+ */
+export declare type FloatingActionButtonPositionMode = 'absolute' | 'fixed';
+
+/**
+ * Represents the props of the [KendoReact FloatingActionButton component]({% slug overview_floatingactionbutton %}).
+ */
+export declare interface FloatingActionButtonProps extends Omit_2<React.ButtonHTMLAttributes<HTMLButtonElement>, 'onBlur' | 'onFocus' | 'onKeyDown' | 'onClick'> {
+    /**
+     * Sets additional CSS styles to the Floating Action Button.
+     */
+    style?: React.CSSProperties;
+    /**
+     * Specifies a list of CSS classes that will be added to the Floating Action Button.
+     */
+    className?: string;
+    /**
+     * Represents the `dir` HTML attribute. This is used to switch from LTR to RTL [see example]({% slug rtl_buttons %}).
+     */
+    dir?: string;
+    /**
+     * Sets the `id` property of the root HTML element.
+     */
+    id?: string;
+    /**
+     * Specifies if the Floating Action Button is disabled [see example]({% slug disabled_floatingactionbutton %}). Defaults to `false`.
+     */
+    disabled?: boolean;
+    /**
+     * Defines the icon rendered in the Floating Action Button [see example]({% slug contenttypes_floatingactionbutton %}).
+     */
+    icon?: string;
+    /**
+     * Defines the SVG icon rendered in the Floating Action Button [see example]({% slug contenttypes_floatingactionbutton %}).
+     */
+    svgIcon?: SVGIcon;
+    /**
+     * Defines a CSS class or multiple classes separated by spaces which are applied
+     * to a `span` element inside the Floating Action Button. Allows the usage of custom icons.
+     */
+    iconClass?: string;
+    /**
+     * Specifies the text of the Floating Action Button [see example]({% slug contenttypes_floatingactionbutton %}).
+     */
+    text?: string;
+    /**
+     * Specifies the horizontal and vertical offset applied to the Floating Action Button
+     * [see example]({% slug positioning_floatingactionbutton %}).
+     *
+     * Normally, the floating button is positioned next to the boundaries of its container with a default offset of `16px`.
+     *
+     * Positive offsets move floating buttons, which are in a corner, further from that corner. Buttons, which are
+     * not in a corner, can be moved along the container's boundary or towards the center of the container.
+     *
+     * A negative offset can be used to force a button to overflow the boundaries of its container.
+     *
+     * The possible keys are:
+     * * `x`&mdash;Sets the horizontal offset of the Floating Action Button.
+     * * `y`&mdash;Sets the vertical offset of the Floating Action Button.
+     *
+     */
+    alignOffset?: FloatingActionButtonAlignOffset;
+    /**
+     * Specifies the horizontal and vertical alignment of the Floating Action Button in relation to the container
+     * [see example]({% slug positioning_floatingactionbutton %}).
+     *
+     * > Centering the Floating Action Button in both horizontal and vertical dimension is not a typical use case.
+     * Still, it is possible to achieve such a layout with appropriate offsets. Setting horizontal: "center" and vertical: "middle"
+     * at the same time is not supported.
+     *
+     * The possible keys are:
+     * * `horizontal`&mdash; Defines the possible horizontal alignment of the Floating Action Button..
+     *   * `start`&mdash;Uses the start point of the container.
+     *   * `center`&mdash;Uses the center point of the container.
+     *   * `end`(Default)&mdash;Uses the end point of the container
+     * * `vertical`&mdash; Defines the possible vertical alignment of the Floating Action Button..
+     *   * `top`&mdash;Uses the top point of the container.
+     *   * `middle`&mdash;Uses the middle point of the container.
+     *   * `bottom`(Default)&mdash;Uses the bottom point of the container.
+     *
+     */
+    align?: FloatingActionButtonAlign;
+    /**
+     * Specifies the position mode of the Floating Action Button
+     * [see example]({% slug positioning_floatingactionbutton %}). It is based on the
+     * [CSS position](https://developer.mozilla.org/en-US/docs/Web/CSS/position) rule.
+     *
+     * * The possible values are:
+     * * 'fixed' (Default)
+     * * 'absolute'
+     */
+    positionMode?: FloatingActionButtonPositionMode;
+    /**
+     * Specifies the size of the Floating Action Button
+     * [see example]({% slug appearance_floatingactionbutton %}).
+     *
+     * The possible values are:
+     * * `small`&mdash;Applies half of the default padding, e.g. `8px`.
+     * * `medium` (Default)&mdash;Applies the default padding, e.g. `16px`.
+     * * `large`&mdash;Applies one and one half of the default padding, e.g. `24px`.
+     * * `null`&mdash;Does not set a size `className`.
+     *
+     */
+    size?: FloatingActionButtonSize;
+    /**
+     * Specifies the rounding of the Floating Action Button.
+     *
+     * The possible values are:
+     * * `small`
+     * * `medium`
+     * * `large`
+     * * `full`
+     * * `null`&mdash;Does not set a rounded `className`.
+     *
+     * @default `full`
+     */
+    rounded?: FloatingActionButtonRounded;
+    /**
+     * Specifies the theme color of the Floating Action Button
+     * [see example]({% slug appearance_floatingactionbutton %}).
+     *
+     * The possible values are:
+     * * `primary` (Default)&mdash;Applies coloring based on the primary theme color.
+     * * `secondary`&mdash;Applies coloring based on the secondary theme color.
+     * * `tertiary`&mdash; Applies coloring based on the tertiary theme color.
+     * * `info`&mdash;Applies coloring based on the info theme color.
+     * * `success`&mdash; Applies coloring based on the success theme color.
+     * * `warning`&mdash; Applies coloring based on the warning theme color.
+     * * `error`&mdash; Applies coloring based on the error theme color.
+     * * `dark`&mdash; Applies coloring based on the dark theme color.
+     * * `light`&mdash; Applies coloring based on the light theme color.
+     * * `inverse`&mdash; Applies coloring based on the inverse theme color.
+     * * `null`&mdash;Does not set a theme color `className`.
+     *
+     */
+    themeColor?: FloatingActionButtonThemeColor;
+    /**
+     * The collection of items that will be rendered in the Floating Action Button
+     * [see example]({% slug databinding_floatingactionbutton %}).
+     */
+    items?: Array<FloatingActionButtonItemProps>;
+    /**
+     * Overrides the default component responsible for visualizing a single item
+     * [see example]({% slug customization_floatingactionbutton %}#toc-items-rendering).
+     *
+     * The default Component is: [FloatingActionButtonItem]({% slug api_buttons_floatingactionbuttonitem %}).
+     */
+    item?: React.ComponentType<FloatingActionButtonItemProps>;
+    /**
+     * Represents the additional props that will be passed to the Popup inside the Floating Action Button
+     * [see example]({% slug customization_floatingactionbutton %}#toc-popup-behavior).
+     */
+    popupSettings?: FloatingActionButtonPopupSettings;
+    /**
+     * Specifies the `tabIndex` of the main button.
+     */
+    tabIndex?: number;
+    /**
+     * Specifies the `accessKey` of the main button.
+     */
+    accessKey?: string;
+    /**
+     * Specifies if the Floating Action Button will be modal by rendering an overlay under the component.
+     */
+    modal?: boolean;
+    /**
+     * Set styles to the Floating Action Button overlay element rendered when the `modal` prop is enabled.
+     */
+    overlayStyle?: React.CSSProperties;
+    /**
+     * Fires when the Floating Action Button is focused
+     * [see example]({% slug overview_floatingactionbutton %}#toc-events).
+     */
+    onFocus?: (event: FloatingActionButtonEvent) => void;
+    /**
+     * Fires when the Floating Action Button is blurred
+     * [see example]({% slug overview_floatingactionbutton %}#toc-events).
+     */
+    onBlur?: (event: FloatingActionButtonEvent) => void;
+    /**
+     * Fires when the Floating Action Button is clicked.
+     */
+    onClick?: (event: FloatingActionButtonEvent) => void;
+    /**
+     * Fires when the Floating Action Button Item is clicked
+     * [see example]({% slug overview_floatingactionbutton %}#toc-events).
+     */
+    onItemClick?: (event: FloatingActionButtonItemEvent) => void;
+    /**
+     * Triggers onKeyDown event
+     * [see example]({% slug overview_floatingactionbutton %}#toc-events).
+     */
+    onKeyDown?: (event: FloatingActionButtonEvent) => void;
+    /**
+     * Fires when the popup which contains the items is opened
+     * [see example]({% slug overview_floatingactionbutton %}#toc-events).
+     */
+    onOpen?: (event: FloatingActionButtonEvent) => void;
+    /**
+     * Fires when the popup which contains the items is closed
+     * [see example]({% slug overview_floatingactionbutton %}#toc-events).
+     */
+    onClose?: (event: FloatingActionButtonEvent) => void;
+}
+
+/**
+ * Specifies the rounding of the Floating Action Button.
+ *
+ * The possible values are:
+ * * `small`
+ * * `medium`
+ * * `large`
+ * * `full`
+ * * `null`&mdash;Does not set a rounded `className`.
+ *
+ */
+export declare type FloatingActionButtonRounded = null | 'small' | 'medium' | 'large' | 'full';
+
+/**
+ * Specifies the size of the Floating Action Button.
+ *
+ * The possible values are:
+ * * `small`&mdash;Applies half of the default padding, e.g. `8px`.
+ * * `medium` (Default)&mdash;Applies the default padding, e.g. `16px`.
+ * * `large`&mdash;Applies one and one half of the default padding, e.g. `24px`.
+ * * `null`&mdash;Does not set a size `className`.
+ *
+ */
+export declare type FloatingActionButtonSize = null | 'small' | 'medium' | 'large';
+
+/**
+ * Specifies the theme color of the Floating Action Button..
+ *
+ * The possible values are:
+ * * `primary` (Default)&mdash;Applies coloring based on the primary theme color.
+ * * `secondary`&mdash;Applies coloring based on the secondary theme color.
+ * * `tertiary`&mdash; Applies coloring based on the tertiary theme color.
+ * * `info`&mdash;Applies coloring based on the info theme color.
+ * * `success`&mdash; Applies coloring based on the success theme color.
+ * * `warning`&mdash; Applies coloring based on the warning theme color.
+ * * `error`&mdash; Applies coloring based on the error theme color.
+ * * `dark`&mdash; Applies coloring based on the dark theme color.
+ * * `light`&mdash; Applies coloring based on the light theme color.
+ * * `inverse`&mdash; Applies coloring based on the inverse theme color.
+ * * `null`&mdash;Does not set a theme color `className`.
+ *
+ */
+export declare type FloatingActionButtonThemeColor = null | 'primary' | 'secondary' | 'tertiary' | 'info' | 'success' | 'warning' | 'error' | 'dark' | 'light' | 'inverse';
+
+/**
+ * @hidden
+ */
+declare type Omit_2<T, K extends keyof T> = Pick<T, Exclude<keyof T, K>>;
+
+/** @hidden */
+export declare const SplitButton: ForwardRefExoticComponent<SplitButtonProps & RefAttributes<any>>;
+
+export declare interface SplitButtonBlurEvent extends BaseEvent<SplitButtonClassComponent> {
+}
+
+/**
+ * Represents the [KendoReact SplitButton component]({% slug overview_splitbutton %}).
+ *
+ * @example
+ * ```jsx
+ * class App extends React.Component {
+ *    render() {
+ *        return (
+ *            <SplitButton text="Act">
+ *                <SplitButtonItem text="Item1" />
+ *                <SplitButtonItem text="Item2" />
+ *                <SplitButtonItem text="Item3" />
+ *            </SplitButton>
+ *        );
+ *    }
+ * }
+ * ReactDOM.render(<App />, document.querySelector('my-app'));
+ * ```
+ */
+export declare class SplitButtonClassComponent extends React_2.Component<SplitButtonProps, SplitButtonState> {
+    /**
+     * @hidden
+     */
+    static propTypes: {
+        accessKey: PropTypes.Requireable<string>;
+        ariaLabel: PropTypes.Requireable<string>;
+        title: PropTypes.Requireable<string>;
+        onButtonClick: PropTypes.Requireable<(...args: any[]) => any>;
+        onFocus: PropTypes.Requireable<(...args: any[]) => any>;
+        onBlur: PropTypes.Requireable<(...args: any[]) => any>;
+        onItemClick: PropTypes.Requireable<(...args: any[]) => any>;
+        onOpen: PropTypes.Requireable<(...args: any[]) => any>;
+        onClose: PropTypes.Requireable<(...args: any[]) => any>;
+        text: PropTypes.Requireable<string>;
+        items: PropTypes.Requireable<any[]>;
+        textField: PropTypes.Requireable<string>;
+        tabIndex: PropTypes.Requireable<number>;
+        disabled: PropTypes.Requireable<boolean>;
+        icon: PropTypes.Requireable<string>;
+        svgIcon: PropTypes.Requireable<PropTypes.InferProps<{
+            name: PropTypes.Validator<string>;
+            content: PropTypes.Validator<string>;
+            viewBox: PropTypes.Validator<string>;
+        }>>;
+        iconClass: PropTypes.Requireable<string>;
+        imageUrl: PropTypes.Requireable<string>;
+        popupSettings: PropTypes.Requireable<object>;
+        itemRender: PropTypes.Requireable<any>;
+        item: PropTypes.Requireable<(...args: any[]) => any>;
+        className: PropTypes.Requireable<string>;
+        buttonClass: PropTypes.Requireable<string>;
+        dir: PropTypes.Requireable<string>;
+    };
+    /**
+     * @hidden
+     */
+    static defaultProps: {
+        size: string;
+        rounded: string;
+        fillMode: string;
+        themeColor: string;
+    };
+    /**
+     * @hidden
+     */
+    readonly state: {
+        focused: boolean;
+        focusedIndex: number;
+        opened: boolean;
+    };
+    private wrapper;
+    private mainButton;
+    private list;
+    private get guid();
+    private skipFocus;
+    private buttonsData;
+    private openedDuringOnChange?;
+    constructor(props: SplitButtonProps);
+    private get opened();
+    /**
+     * @hidden
+     */
+    render(): JSX_2.Element;
+    /**
+     * @hidden
+     */
+    componentDidMount(): void;
+    /**
+     * The DOM element of main button.
+     */
+    get element(): HTMLButtonElement | null;
+    private onKeyDown;
+    private switchFocus;
+    private onFocus;
+    private setOpen;
+    private onItemClick;
+    private onBlur;
+    private dispatchClickEvent;
+    private renderPopup;
+    private onPopupClose;
+    private listRef;
+    private renderChildItems;
+    private onSplitPartClick;
+    private onDownSplitPart;
+    private onItemDown;
+    private dispatchPopupEvent;
+    private isItemDisabled;
+    private isRtl;
+}
+
+export declare interface SplitButtonClickEvent extends BaseEvent<SplitButtonClassComponent> {
+}
+
+export declare interface SplitButtonCloseEvent extends BaseEvent<SplitButtonClassComponent> {
+}
+
+export declare interface SplitButtonFocusEvent extends BaseEvent<SplitButtonClassComponent> {
+}
+
+/**
+ * Represent the `ref` of the SplitButton component.
+ */
+export declare interface SplitButtonHandle extends Pick<SplitButtonClassComponent, keyof SplitButtonClassComponent> {
+}
+
+export declare class SplitButtonItem extends React_2.Component<SplitButtonItemProps, {}> {
+    /**
+     * @hidden
+     */
+    static propTypes: {
+        text: PropTypes.Requireable<string>;
+        icon: PropTypes.Requireable<string>;
+        iconClass: PropTypes.Requireable<string>;
+        imageUrl: PropTypes.Requireable<string>;
+        disabled: PropTypes.Requireable<boolean>;
+        render: PropTypes.Requireable<any>;
+    };
+    /**
+     * @hidden
+     */
+    render(): null;
+}
+
+/**
+ * The arguments for the `itemClick` event.
+ */
+export declare interface SplitButtonItemClickEvent extends BaseEvent<SplitButtonClassComponent> {
+    /**
+     * The clicked item.
+     */
+    item: any;
+    /**
+     * The zero-based index of the clicked item.
+     */
+    itemIndex: number;
+}
+
+/**
+ * The properties of the KendoReact SplitButtonItem component.
+ */
+export declare interface SplitButtonItemProps extends ButtonItem {
+}
+
+export declare interface SplitButtonOpenEvent extends BaseEvent<SplitButtonClassComponent> {
+}
+
+export declare interface SplitButtonProps extends KendoReactComponentBaseProps {
+    /**
+     * Specifies the `accessKey` of the main button.
+     */
+    accessKey?: string;
+    /**
+     * The accessible label of the component.
+     */
+    ariaLabel?: string;
+    /**
+     * The title of the component.
+     */
+    title?: string;
+    /**
+     * Specifies the text of the main button ([see example]({% slug overview_splitbutton %}#toc-basic-usage)).
+     */
+    text?: string;
+    /**
+     * Specifies the list items ([see example]({% slug binding_splitbutton %}#toc-array-of-objects)).
+     */
+    items?: any[];
+    /**
+     * Configures the field that will be used for the text of the `items`. `textField` has to be used together with the `items` prop ([see example]({% slug binding_splitbutton %}#toc-array-of-objects)).
+     */
+    textField?: string;
+    /**
+     * Specifies the `tabIndex` of the main button.
+     */
+    tabIndex?: number;
+    /**
+     * Determines whether the component is disabled ([see example]({% slug disabled_splitbutton %})).
+     */
+    disabled?: boolean;
+    /**
+     * Defines an icon that will be rendered next to the main button text ([see example]({% slug icons_splitbutton %})).
+     */
+    icon?: string;
+    /**
+     * Defines a SVG icon that will be rendered next to the main button text ([see example]({% slug icons_splitbutton %})).
+     */
+    svgIcon?: SVGIcon;
+    /**
+     * Defines an icon with a custom CSS class that will be rendered next to the main button text ([see example]({% slug icons_splitbutton %})).
+     */
+    iconClass?: string;
+    /**
+     * Defines the location of an image that will be displayed next to the main button text ([see example]({% slug icons_splitbutton %})).
+     */
+    imageUrl?: string;
+    /**
+     * Configures the popup ([see example]({% slug customization_splitbutton %}#toc-popup)).
+     */
+    popupSettings?: ButtonsPopupSettings;
+    /**
+     * Opens the popup of the SplitButton if set to `true`.
+     */
+    opened?: boolean;
+    /**
+     * A React functional or class component which is used for rendering items ([see example]({% slug customization_dropdownbutton %}#toc-item-render)). The default rendering includes an icon, an image, and text.
+     */
+    item?: null | React.ComponentType<{
+        item: any;
+        itemIndex: number;
+    }>;
+    /**
+     * Fires when a dropdown list button item is about to be rendered. Use it to override the default appearance of the list items.
+     * if `item` prop is not declared, `itemRender` behaves like `item`, for backward compatibility with versions before 4.2.0
+     */
+    itemRender?: ((li: React.ReactElement<HTMLLIElement>, props: ButtonItemProps) => React.ReactNode) | React.ComponentType<{
+        item: any;
+        itemIndex: number;
+    }>;
+    /**
+     * Sets the `className` of the SplitButton component.
+     */
+    className?: string;
+    /**
+     * Sets the `className` of the main button.
+     */
+    buttonClass?: string;
+    /**
+     * Sets the direction of the component.
+     */
+    dir?: string;
+    /**
+     * Fires when the main button is clicked ([see example]({% slug overview_splitbutton %}#toc-events)).
+     */
+    onButtonClick?: (event: SplitButtonClickEvent) => void;
+    /**
+     * Fires when the component is focused ([see example]({% slug overview_splitbutton %}#toc-events)).
+     */
+    onFocus?: (event: SplitButtonFocusEvent) => void;
+    /**
+     * Fires when the component is blurred ([see example]({% slug overview_splitbutton %}#toc-events)).
+     */
+    onBlur?: (event: SplitButtonBlurEvent) => void;
+    /**
+     * Fires when an item is clicked ([see example]({% slug overview_splitbutton %}#toc-events)).
+     */
+    onItemClick?: (event: SplitButtonItemClickEvent) => void;
+    /**
+     * Fires when the popup which contains the items is opened ([see example]({% slug overview_splitbutton %}#toc-events)).
+     */
+    onOpen?: (event: SplitButtonOpenEvent) => void;
+    /**
+     * Fires when the popup which contains the items is closed ([see example]({% slug overview_splitbutton %}#toc-events)).
+     */
+    onClose?: (event: SplitButtonCloseEvent) => void;
+    /**
+     * Configures the `size` of the SplitButton.
+     *
+     * The available options are:
+     * - small
+     * - medium
+     * - large
+     * - null&mdash;Does not set a size `className`.
+     *
+     * @default `medium`
+     */
+    size?: null | 'small' | 'medium' | 'large';
+    /**
+     * Configures the `roundness` of the SplitButton.
+     *
+     * The available options are:
+     * - small
+     * - medium
+     * - large
+     * - full
+     * - null&mdash;Does not set a rounded `className`.
+     *
+     * @default `medium`
+     */
+    rounded?: null | 'small' | 'medium' | 'large' | 'full';
+    /**
+     * Configures the `fillMode` of the SplitButton.
+     *
+     * The available options are:
+     * - solid
+     * - outline
+     * - flat
+     * - link
+     * - null&mdash;Does not set a fillMode `className`.
+     *
+     * @default `solid`
+     */
+    fillMode?: null | 'solid' | 'outline' | 'flat' | 'link';
+    /**
+     * Configures the `themeColor` of the SplitButton.
+     *
+     * The available options are:
+     * - base
+     * - primary
+     * - secondary
+     * - tertiary
+     * - info
+     * - success
+     * - warning
+     * - error
+     * - dark
+     * - light
+     * - inverse
+     * - null&mdash;Does not set a themeColor `className`.
+     *
+     * @default `base`
+     */
+    themeColor?: null | 'base' | 'primary' | 'secondary' | 'tertiary' | 'info' | 'success' | 'warning' | 'error' | 'dark' | 'light' | 'inverse';
+}
+
+/**
+ * @hidden
+ */
+declare interface SplitButtonState {
+    focusedIndex?: number;
+    focused?: boolean;
+    opened?: boolean;
+}
+
+/**
+ * Represents the [KendoReact Toolbar component]({% slug overview_toolbar %}).
+ *
+ * @example
+ * ```jsx
+ * class App extends React.Component {
+ *    render() {
+ *       return (
+ *          <Toolbar>
+ *              <ToolbarItem>
+ *                  <ButtonGroup>
+ *                      <Button togglable={true} icon="bold" />
+ *                      <Button togglable={true} icon="italic" />
+ *                      <Button togglable={true} icon="underline" />
+ *                  </ButtonGroup>
+ *              </ToolbarItem>
+ *              <ToolbarItem>
+ *                  <ButtonGroup>
+ *                      <Button icon="hyperlink">Insert Link</Button>
+ *                      <Button icon="image">Insert Image</Button>
+ *                      <Button icon="table">Insert Table</Button>
+ *                  </ButtonGroup>
+ *              </ToolbarItem>
+ *          </Toolbar>
+ *       );
+ *    }
+ * }
+ * ReactDOM.render(<App />, document.querySelector('my-app'));
+ * ```
+ */
+export declare class Toolbar extends React_2.Component<ToolbarProps> {
+    /**
+     * @hidden
+     */
+    static propTypes: {
+        tabIndex: PropTypes.Requireable<number>;
+        dir: PropTypes.Requireable<string>;
+        keyboardNavigation: PropTypes.Requireable<boolean>;
+        style: PropTypes.Requireable<object>;
+        className: PropTypes.Requireable<string>;
+        role: PropTypes.Requireable<string>;
+        onResize: PropTypes.Requireable<(...args: any[]) => any>;
+        buttons: PropTypes.Requireable<(string | null | undefined)[]>;
+        size: PropTypes.Requireable<string | null>;
+    };
+    /**
+     * @hidden
+     */
+    static defaultProps: {
+        tabIndex: number;
+        size: string;
+    };
+    private _element;
+    private offsetHeight;
+    private offsetWidth;
+    private buttons;
+    private focusedSelector;
+    constructor(props: ToolbarProps);
+    private get selectors();
+    private get focusedIndex();
+    /**
+     * Returns the HTML element of the Toolbar component.
+     */
+    get element(): HTMLDivElement | null;
+    /**
+     * @hidden
+     */
+    componentDidMount(): void;
+    /**
+     * @hidden
+     */
+    componentDidUpdate(): void;
+    /**
+     * @hidden
+     */
+    componentWillUnmount(): void;
+    /**
+     * @hidden
+     */
+    render(): JSX_2.Element;
+    private setTabIndex;
+    private onKeyDown;
+    private focusButton;
+    private onWindowResize;
+}
+
+/**
+ * @hidden
+ */
+export declare const toolbarButtons: string[];
+
+/**
+ * Represents the KendoReact ToolbarItem component.
+ * To add a tool to the Toolbar, wrap it inside a ToolbarItem component
+ * ([see example]({% slug content_toolbar %})).
+ */
+export declare class ToolbarItem extends React_2.PureComponent<ToolbarItemProps> {
+    /**
+     * @hidden
+     */
+    static propTypes: {
+        className: PropTypes.Requireable<string>;
+    };
+    private _element;
+    /**
+     * Returns the HTML element of the ToolbarItem component.
+     */
+    get element(): HTMLSpanElement | null;
+    /**
+     * @hidden
+     */
+    render(): JSX_2.Element;
+}
+
+/**
+ * Represents the props of KendoReact ToolbarItem component.
+ */
+export declare interface ToolbarItemProps extends KendoReactComponentBaseProps {
+    /**
+     * Sets additional classes to the ToolbarItem component.
+     */
+    className?: string;
+    /**
+     * Sets additional styles to the ToolbarItem component.
+     */
+    style?: React_2.CSSProperties;
+}
+
+/**
+ * Represents the props of the [KendoReact Toolbar component]({% slug overview_toolbar %}).
+ */
+export declare interface ToolbarProps extends KendoReactComponentBaseProps {
+    /**
+     * Sets additional classes to the Toolbar.
+     */
+    className?: string;
+    /**
+     * Represents the `dir` HTML attribute.
+     */
+    dir?: string;
+    /**
+     * The styles that are applied to the Toolbar.
+     */
+    style?: React_2.CSSProperties;
+    /**
+     * Represents the label of the Toolbar component.
+     */
+    ariaLabel?: string;
+    /**
+     * Specifies the `tabIndex` of the Toolbar.
+     */
+    tabIndex?: number;
+    /**
+     * The `resize` event of the Toolbar.
+     */
+    onResize?: (event: ToolbarResizeEvent) => void;
+    /**
+     * If set to `false`, it will turn off the built-in keyboard navigation.
+     */
+    keyboardNavigation?: boolean;
+    /**
+     * @hidden
+     *
+     * The CSS selectors of the toolbar HTML elements used by built-in keyboard navigation.
+     * Each selector needs to point to a focusable element.
+     * Defaults to [
+     *  'button',
+     *  '.k-button-group > button',
+     *  '.k-dropdown > .k-dropdown-wrap',
+     *  '.k-colorpicker > .k-picker-wrap'
+     * ].
+     */
+    buttons?: string[];
+    /**
+     * Configures the `size` of the Toolbar.
+     *
+     * The available options are:
+     * - small
+     * - medium
+     * - large
+     * - null&mdash;Does not set a size `className`.
+     *
+     * @default `medium`
+     */
+    size?: null | 'small' | 'medium' | 'large';
+    /**
+     * @hidden
+     */
+    role?: string;
+}
+
+/**
+ * Represents the `resize` event of the Toolbar.
+ */
+export declare interface ToolbarResizeEvent {
+    /**
+     * An event target.
+     */
+    target: Toolbar;
+    /**
+     * The `offsetWidth` event of the Toolbar.
+     */
+    offsetWidth: number;
+    /**
+     * The `offsetHeight` event of the Toolbar.
+     */
+    offsetHeight: number;
+    /**
+     * A native DOM event.
+     */
+    nativeEvent: any;
+}
+
+export declare class ToolbarSeparator extends React_2.PureComponent<ToolbarSeparatorProps> {
+    /**
+     * @hidden
+     */
+    render(): JSX_2.Element;
+}
+
+/**
+ * Represents the KendoReact Toolbar Separator component.
+ */
+declare interface ToolbarSeparatorProps {
+    /**
+     * Sets additional classes to the ToolbarSeparator component.
+     */
+    className?: string;
+}
+
+/**
+ * Represents the KendoReact ToolbarSpacer component.
+ * To specify an empty space, provide a ToolbarSpacer component
+ * ([see example]({% slug content_toolbar %})).
+ */
+export declare const ToolbarSpacer: React_2.ForwardRefExoticComponent<ToolbarSpacerProps & React_2.RefAttributes<ToolbarSpacerHandle>>;
+
+/** @hidden */
+declare interface ToolbarSpacerHandle {
+    /**
+     * Returns the HTML element of the ToolbarSpacer component.
+     */
+    element: HTMLDivElement | null;
+}
+
+/**
+ * Represents the props of KendoReact ToolbarSpacer component.
+ */
+export declare interface ToolbarSpacerProps {
+    /**
+     * Sets additional classes to the ToolbarSpacer component.
+     */
+    className?: string;
+}
+
+export { }