/** * @license *------------------------------------------------------------------------------------------- * Copyright © 2025 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 { ButtonsClassStructure } from '@progress/kendo-react-common'; import { default as default_2 } from 'prop-types'; import { FormComponentProps } from '@progress/kendo-react-common'; import { ForwardRefExoticComponent } from 'react'; import { JSX } 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 * as React_2 from 'react'; import { RefAttributes } from 'react'; import { SVGIcon } from '@progress/kendo-react-common'; export declare const Button: React_2.ForwardRefExoticComponent>; /** * Represents the ButtonGroup component. * * @remarks * Supported children components are: {@link Button}. */ export declare const ButtonGroup: { (props: ButtonGroupProps): JSX.Element; propTypes: { children: default_2.Requireable>; className: default_2.Requireable; disabled: default_2.Requireable; width: default_2.Requireable; dir: default_2.Requireable; }; }; /** * 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. * Specifies a list of CSS classes that will be added to the ButtonGroup element. * * @example * ```jsx * * ``` */ className?: string; /** * @hidden * Provides an option to use unstyled classes for the ButtonGroup component. */ unstyled?: ButtonsClassStructure; } /** * @hidden */ export declare interface ButtonHandle { /** * Gets the DOM element of the Button component. */ element: HTMLButtonElement | null; /** * Returns `true` when the component is togglable and selected ([see example]({% slug toggleable_button %})). * Otherwise, returns `false`. */ selected: boolean; } /** * 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; /** * Defines the SVG icon rendered inside the Button component */ svgIcon?: SVGIcon; /** * Defines a CSS class—or multiple classes separated by spaces—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, index?: number) => void; onDown?: (event: React_2.PointerEvent | React_2.MouseEvent) => void; item?: null | React_2.ComponentType<{ item: any; itemIndex: number; }>; render?: ((li: React_2.ReactElement, props: ButtonItemProps) => React_2.ReactNode) | React_2.ComponentType<{ item: any; itemIndex: number; }>; dataItem: any; id?: string; textField?: string; className?: string; unstyled?: ButtonsClassStructure; } /** * 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 { /** * @hidden */ children?: React_2.ReactNode; /** * 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 the title htmlAttribute of the Button. */ title?: string; /** * Configures the `fillMode` of the Button. * * The available options are: * - solid * - outline * - flat * - link * - clear * - null—Does not set a fillMode `className`. * * @default `solid` */ fillMode?: null | 'solid' | 'outline' | 'flat' | 'link' | 'clear'; /** * Configures the `themeColor` of the Button. * * The available options are: * - base * - primary * - secondary * - tertiary * - info * - success * - warning * - error * - dark * - light * - inverse * - null—Does not set a themeColor `className`. * * @default `base` */ themeColor?: null | 'base' | 'primary' | 'secondary' | 'tertiary' | 'info' | 'success' | 'warning' | 'error' | 'dark' | 'light' | 'inverse'; /** * Sets an SVG icon or custom element before the content of the Button. For the custom component, we recommend * using [Phrasing content](https://developer.mozilla.org/en-US/docs/Web/HTML/Content_categories#phrasing_content) * but there must be no [Interactive content](https://developer.mozilla.org/en-US/docs/Web/HTML/Content_categories#interactive_content). */ startIcon?: React_2.ReactNode; /** * Sets an SVG icon or custom element after the content of the Button. For the custom component, we recommend * using [Phrasing content](https://developer.mozilla.org/en-US/docs/Web/HTML/Content_categories#phrasing_content) * but there must be no [Interactive content](https://developer.mozilla.org/en-US/docs/Web/HTML/Content_categories#interactive_content). */ endIcon?: React_2.ReactNode; /** * The unstyled option classes. */ unstyled?: ButtonsClassStructure; } /** * 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; } /** * Represents the Chip component. */ export declare const Chip: React_2.ForwardRefExoticComponent>; 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; } /** * 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; } /** * Represents the ChipList component. */ export declare const ChipList: React_2.ForwardRefExoticComponent>; /** * 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; } /** * 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; } /** * 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 { /** * Sets the `id` property of the top div element of the ChipList. * * @example * ```jsx * * ``` */ id?: string; /** * Sets additional classes to the ChipList. * * @example * ```jsx * * ``` */ className?: string; /** * Sets the `tabIndex` attribute. * * @example * ```jsx * * ``` */ tabIndex?: number; /** * Sets additional CSS styles to the ChipList. * * @example * ```jsx * * ``` */ style?: React_2.CSSProperties; /** * Represents Chip component. * * @example * ```jsx * * ``` */ chip?: React_2.ComponentType; /** * Represents the data about the child Chips. * * @example * ```jsx * * ``` */ data?: any; /** * Represents the default data about the child Chips. * * @example * ```jsx * * ``` */ defaultData?: any[]; /** * Triggered after Chip data change. * * @example * ```jsx * console.log(event.value)} /> * ``` */ onDataChange?: (event: ChipListDataChangeEvent) => void; /** * Represents the selection state of Chip component. * * @example * ```jsx * * ``` */ value?: any | any[]; /** * Represents the default value of the selection state of Chip component. * * @example * ```jsx * * ``` */ defaultValue?: any | any[]; /** * Triggered after value change. * * @example * ```jsx * console.log(event.value)} /> * ``` */ onChange?: (event: ChipListChangeEvent) => void; /** * Represents the selection state of Chip component. * * @example * ```jsx * * ``` */ selection?: string; /** * Represents the `text` field of Chip, used for the `label`. * * @example * ```jsx * * ``` */ textField?: string; /** * Represents the `value` field of Chip, used for setting the Chip `id`. * * @example * ```jsx * * ``` */ valueField?: string; /** * Determines of ChipList is disabled. * * @example * ```jsx * * ``` */ disabled?: boolean; /** * The ChipList direction 'ltr' as default or 'rtl'. * * @example * ```jsx * * ``` */ 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. * * @example * ```jsx * * ``` */ ariaDescribedBy?: string; /** * Identifies the element(s) which will label the component. * * @example * ```jsx * * ``` */ ariaLabelledBy?: string; /** * The accessible label of the component. * * @example * ```jsx * * ``` */ ariaLabel?: string; /** * Configures the `size` of the ChipList. * * The available options are: * - small * - medium * - large * - null—Does not set a size `className`. * * @default `medium` * * @example * ```jsx * * ``` */ 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; } /** * 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. * * @example * ```jsx * * ``` */ id?: string; /** * Sets additional classes to the Chip. * * @example * ```jsx * * ``` */ className?: string; /** * The React elements that will be rendered as custom content inside the Chip. * * @example * ```jsx * Custom Content * ``` */ children?: React_2.ReactNode; /** * Sets the `tabIndex` attribute. * * @example * ```jsx * * ``` */ tabIndex?: number; /** * Sets additional CSS styles to the Chip. * * @example * ```jsx * * ``` */ style?: React_2.CSSProperties; /** * Sets the label text of the Chip. * * @example * ```jsx * * ``` */ text?: string; /** * Sets the `id` value of the Chip. * * @example * ```jsx * * ``` */ value?: any; /** * The Chip direction 'ltr' as default or 'rtl'. * * @example * ```jsx * * ``` */ dir?: string; /** * Determines if the Chip could be removed. * * @example * ```jsx * * ``` */ removable?: boolean; /** * Determines if the Chip has custom font `removeIcon`. * * @example * ```jsx * * ``` */ removeIcon?: string; /** * Determines if the Chip has custom SVG `removeIcon`. * * @example * ```jsx * import { gearIcon } from '@progress/kendo-svg-icons'; * * * ``` */ removeSvgIcon?: SVGIcon; /** * Determines if the Chip is disabled. * * @example * ```jsx * * ``` */ disabled?: boolean; /** * Determines if the Chip has a font `icon`. * * @example * ```jsx * * ``` */ icon?: string; /** * Determines if the Chip has an SVG `icon`. * * @example * ```jsx * import { gearIcon } from '@progress/kendo-svg-icons'; * * * ``` */ svgIcon?: SVGIcon; /** * Determines if the Chip has an avatar. * * @example * ```jsx * * ``` */ avatar?: ChipAvatarProps; /** * Determines if the Chip has custom selection font `icon`. * * @example * ```jsx * * ``` */ selectedIcon?: string; /** * Determines if the Chip has custom selection SVG `icon`. * * @example * ```jsx * import { gearIcon } from '@progress/kendo-svg-icons'; * * * ``` */ selectedSvgIcon?: SVGIcon; /** * Triggered on Chip removing. * * @example * ```jsx * console.log(event)} /> * ``` */ onRemove?: (event: ChipRemoveEvent) => void; /** * Triggered on `onClick` event. * * @example * ```jsx * console.log(event)} /> * ``` */ onClick?: (event: ChipMouseEvent) => void; /** * Triggered on `onMouseDown` event. * * @example * ```jsx * console.log(event)} /> * ``` */ onMouseDown?: (event: ChipMouseEvent) => void; /** * Triggered on `onMouseUp` event. * * @example * ```jsx * console.log(event)} /> * ``` */ onMouseUp?: (event: ChipMouseEvent) => void; /** * Triggered on `onDoubleClick` event. * * @example * ```jsx * console.log(event)} /> * ``` */ onDoubleClick?: (event: ChipMouseEvent) => void; /** * Triggered on `onMouseEnter` event. * * @example * ```jsx * console.log(event)} /> * ``` */ onMouseEnter?: (event: ChipMouseEvent) => void; /** * Triggered on `onMouseLeave` event. * * @example * ```jsx * console.log(event)} /> * ``` */ onMouseLeave?: (event: ChipMouseEvent) => void; /** * Triggered on `onMouseMove` event. * * @example * ```jsx * console.log(event)} /> * ``` */ onMouseMove?: (event: ChipMouseEvent) => void; /** * Triggered on `onMouseOut` event. * * @example * ```jsx * console.log(event)} /> * ``` */ onMouseOut?: (event: ChipMouseEvent) => void; /** * Triggered on `onMouseOver` event. * * @example * ```jsx * console.log(event)} /> * ``` */ onMouseOver?: (event: ChipMouseEvent) => void; /** * Triggered on `onKeyDown` event. * * @example * ```jsx * console.log(event)} /> * ``` */ onKeyDown?: (event: ChipKeyboardEvent) => void; /** * Triggered on `onFocus` event. * * @example * ```jsx * console.log(event)} /> * ``` */ onFocus?: (event: ChipFocusEvent) => void; /** * Triggered on `onBlur` event. * * @example * ```jsx * console.log(event)} /> * ``` */ onBlur?: (event: ChipFocusEvent) => void; /** * Represents the item data, coming from the `ChipList` component. * * @example * ```jsx * * ``` */ dataItem?: any; /** * Determines if the Chip is selected. * * @example * ```jsx * * ``` */ 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. * * @example * ```jsx * * ``` */ ariaDescribedBy?: string; /** * @hidden */ role?: string; /** * Configures the `size` of the Chip. * The available options are: * - `small` * - `medium` * - `large` * - `null` (removes built-in size styles) * * @default `medium` * @example * ```jsx * * ``` */ size?: null | 'small' | 'medium' | 'large'; /** * Configures the `roundness` of the Chip. * The available options are: * - `small` * - `medium` * - `large` * - `full` * - `null` (removes built-in roundness styles) * * @default `medium` * @example * ```jsx * * ``` */ rounded?: null | 'small' | 'medium' | 'large' | 'full'; /** * Configures the `fillMode` of the Chip. * The available options are: * - `solid` * - `outline` * - `null` (removes built-in fill mode styles) * * @default `solid` * @example * ```jsx * * ``` */ fillMode?: null | 'solid' | 'outline'; /** * Configures the `themeColor` of the Chip. * The available options are: * - `base` * - `info` * - `success` * - `warning` * - `error` * - `null` (removes built-in theme color styles) * * @default `base` * @example * ```jsx * * ``` */ themeColor?: null | 'base' | 'info' | 'success' | 'warning' | 'error'; /** * Represents the label of the Chip component. * * @example * ```jsx * * ``` */ 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; } /** @hidden */ export declare const DropDownButton: ForwardRefExoticComponent>; export declare interface DropDownButtonBlurEvent extends BaseEvent { } /** @hidden */ export declare type DropDownButtonClassComponent = DropDownButtonHandle; /** * Represents the [KendoReact DropDownButton component]({% slug overview_dropdownbutton %}). * * @example * ```jsx * const App = () => { * return ( * * * * * * ); * } * ReactDOM.render(, document.querySelector('my-app')); * ``` */ export declare const DropDownButtonClassComponent: React_2.ForwardRefExoticComponent>; export declare interface DropDownButtonCloseEvent extends BaseEvent { } export declare interface DropDownButtonFocusEvent extends BaseEvent { } /** * Represent the `ref` of the DropDownButton component. */ export declare interface DropDownButtonHandle extends Pick { /** * The DOM element of main button. */ element: HTMLButtonElement | null; /** * The props of the DropDownButtonHandle component. */ props: Readonly; } export declare class DropDownButtonItem extends React_2.Component { /** * @hidden */ static propTypes: { text: default_2.Requireable; icon: default_2.Requireable; iconClass: default_2.Requireable; imageUrl: default_2.Requireable; selected: default_2.Requireable; disabled: default_2.Requireable; render: default_2.Requireable; }; /** * @hidden */ render(): null; } /** * The arguments for the `itemClick` event. */ export declare interface DropDownButtonItemClickEvent extends BaseEvent { /** * 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 { } 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 %})). */ text?: React.ReactNode; /** * Specifies the list items ([see example]({% slug binding_dropdownbutton %}#toc-arrays-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-arrays-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-behavior)). */ popupSettings?: ButtonsPopupSettings; /** * @hidden */ unstyled?: ButtonsClassStructure; /** * @hidden * This prop is provided by the withZIndexContext HOC to subscribe to ZIndexContext. */ _zIndex?: number; /** * A React functional or class component which is used for rendering items ([see example]({% slug customization_dropdownbutton %}#toc-items-rendering)). 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, 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 events_dropdownbutton %})). */ onFocus?: (event: DropDownButtonFocusEvent) => void; /** * Fires when the component is blurred ([see example]({% slug events_dropdownbutton %})). */ onBlur?: (event: DropDownButtonBlurEvent) => void; /** * Fires when an item is clicked ([see example]({% slug events_dropdownbutton %})). */ onItemClick?: (event: DropDownButtonItemClickEvent) => void; /** * Fires when the popup which contains the items is opened ([see example]({% slug events_dropdownbutton %})). */ onOpen?: (event: DropDownButtonOpenEvent) => void; /** * Fires when the popup which contains the items is closed ([see example]({% slug events_dropdownbutton %})). */ onClose?: (event: DropDownButtonCloseEvent) => void; /** * Configures the `size` of the DropDownButton. * * 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 DropDownButton. * * The available options are: * - small * - medium * - large * - full * - null—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—Does not set a fillMode `className`. * * @default `solid` */ fillMode?: null | 'solid' | 'outline' | 'flat' | 'link' | 'clear'; /** * Configures the `themeColor` of the DropDownButton. * * The available options are: * - base * - primary * - secondary * - tertiary * - info * - success * - warning * - error * - dark * - light * - inverse * - null—Does not set a themeColor `className`. * * @default `base` */ themeColor?: null | 'base' | 'primary' | 'secondary' | 'tertiary' | 'info' | 'success' | 'warning' | 'error' | 'dark' | 'light' | 'inverse'; /** * Sets an SVG icon or custom element before the content of the DropDownButton. For the custom component, we recommend using [Phrasing content](https://developer.mozilla.org/en-US/docs/Web/HTML/Content_categories#phrasing_content) * but there must be no [Interactive content](https://developer.mozilla.org/en-US/docs/Web/HTML/Content_categories#interactive_content). */ startIcon?: React.ReactNode; /** * Sets an SVG icon or custom element after the content of the DropDownButton. For the custom component, we recommend using [Phrasing content](https://developer.mozilla.org/en-US/docs/Web/HTML/Content_categories#phrasing_content) * but there must be no [Interactive content](https://developer.mozilla.org/en-US/docs/Web/HTML/Content_categories#interactive_content). */ endIcon?: React.ReactNode; } /** * @hidden */ declare interface DropDownButtonState { focusedIndex?: number; focused?: boolean; opened: boolean; } /** * @hidden */ declare class DropDownButtonWithoutContext extends React_2.Component { /** * @hidden */ static propTypes: { accessKey: default_2.Requireable; ariaLabel: default_2.Requireable; title: default_2.Requireable; onFocus: default_2.Requireable<(...args: any[]) => any>; onBlur: default_2.Requireable<(...args: any[]) => any>; onItemClick: default_2.Requireable<(...args: any[]) => any>; onOpen: default_2.Requireable<(...args: any[]) => any>; onClose: default_2.Requireable<(...args: any[]) => any>; items: default_2.Requireable; textField: default_2.Requireable; tabIndex: default_2.Requireable; disabled: default_2.Requireable; icon: default_2.Requireable; svgIcon: default_2.Requireable; content: default_2.Validator; viewBox: default_2.Validator; }>>; iconClass: default_2.Requireable; imageUrl: default_2.Requireable; popupSettings: default_2.Requireable; itemRender: default_2.Requireable<(...args: any[]) => any>; item: default_2.Requireable<(...args: any[]) => any>; className: default_2.Requireable; buttonClass: default_2.Requireable; dir: default_2.Requireable; }; /** * @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 readonly showLicenseWatermark; private buttonsData; private openedDuringOnChange?; private get opened(); constructor(props: DropDownButtonProps); /** * @hidden */ render(): JSX.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; } /** * Represents the [KendoReact FloatingActionButton component]({% slug overview_floatingactionbutton %}). * * @example * ```jsx * const App = () => { * return ( * * ); * }; * ReactDOM.render(, document.querySelector('my-app')); * ``` */ export declare const FloatingActionButton: React_2.ForwardRefExoticComponent>; /** * 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`—Uses the start point of the container. * - `center`—Uses the center point of the container. * - `end`(Default)—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`—Uses the top point of the container. * - `middle`—Uses the middle point of the container. * - `bottom`(Default)—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 { } /** * 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 ( * * ); * }; * ReactDOM.render(, document.querySelector('my-app')); * ``` */ export declare const FloatingActionButtonItem: React_2.ForwardRefExoticComponent & React_2.RefAttributes>; /** * Represents the return type of the FloatingActionButtonItemEvent. */ export declare interface FloatingActionButtonItemEvent extends BaseEvent { /** * 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. * * @example * ```jsx * * ``` */ style?: React_2.CSSProperties; /** * Specifies a list of CSS classes that will be added to the FloatingActionButtonItem. * * @example * ```jsx * * ``` */ className?: string; /** * Represents the children that are passed to the FloatingActionButtonItem. * * @example * ```jsx * Custom Content * ``` */ children?: any; /** * Specifies if the Floating Action Button Item is disabled [see example]({% slug disabled_floatingactionbuttonitem %}). * Defaults to `false`. * * @default false * @example * ```jsx * * ``` */ 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, 'onBlur' | 'onFocus' | 'onKeyDown' | 'onClick'> { /** * Sets additional CSS styles to the Floating Action Button. * * @example * ```jsx * * ``` */ style?: React.CSSProperties; /** * Specifies a list of CSS classes that will be added to the Floating Action Button. * * @example * ```jsx * * ``` */ className?: string; /** * Represents the `dir` HTML attribute for text direction. * * @example * ```jsx * * ``` */ dir?: string; /** * Sets the `id` property of the root HTML element. * * @example * ```jsx * * ``` */ id?: string; /** * Disables the Floating Action Button. * * @default false * @example * ```jsx * * ``` */ disabled?: boolean; /** * Defines the icon rendered in the Floating Action Button. * * @example * ```jsx * * ``` */ icon?: string; /** * Defines the SVG icon rendered in the Floating Action Button. * * @example * ```jsx * import { gearIcon } from '@progress/kendo-svg-icons'; * * * ``` */ svgIcon?: SVGIcon; /** * Defines a custom CSS class for the icon. * * @example * ```jsx * * ``` */ iconClass?: string; /** * Specifies the text of the Floating Action Button. * * @example * ```jsx * * ``` */ text?: string; /** * Specifies the horizontal and vertical offset of 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`—Sets the horizontal offset of the Floating Action Button. * * `y`—Sets the vertical offset of the Floating Action Button. * * @example * ```jsx * * ``` */ alignOffset?: FloatingActionButtonAlignOffset; /** * Specifies the alignment of the Floating Action Button within its 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`— Defines the possible horizontal alignment of the Floating Action Button.. * * `start`—Uses the start point of the container. * * `center`—Uses the center point of the container. * * `end`(Default)—Uses the end point of the container * * `vertical`— Defines the possible vertical alignment of the Floating Action Button.. * * `top`—Uses the top point of the container. * * `middle`—Uses the middle point of the container. * * `bottom`(Default)—Uses the bottom point of the container. * * @example * ```jsx * * ``` */ 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' * * @default 'fixed' * @example * ```jsx * * ``` */ positionMode?: FloatingActionButtonPositionMode; /** * Specifies the size of the Floating Action Button. * [see example]({% slug appearance_floatingactionbutton %}). * * The possible values are: * * `small`—Applies half of the default padding, e.g. `8px`. * * `medium` (Default)—Applies the default padding, e.g. `16px`. * * `large`—Applies one and one half of the default padding, e.g. `24px`. * * `null`—Does not set a size `className`. * * @default 'medium' * @example * ```jsx * * ``` */ size?: FloatingActionButtonSize; /** * Configures the rounding of the Floating Action Button. * * The possible values are: * * `small` * * `medium` * * `large` * * `full` * * `null`—Does not set a rounded `className`. * * @default `full` * * @default 'full' * @example * ```jsx * * ``` */ rounded?: FloatingActionButtonRounded; /** * Configures the theme color of the Floating Action Button. * [see example]({% slug appearance_floatingactionbutton %}). * * 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 inverse theme color. * * `null`—Does not set a theme color `className`. * * @default 'primary' * @example * ```jsx * * ``` */ themeColor?: FloatingActionButtonThemeColor; /** * Defines the collection of items rendered in the Floating Action Button. * * @example * ```jsx * * ``` */ items?: Array; /** * Overrides the default component responsible for rendering items. * * @example * ```jsx * * ``` */ item?: React.ComponentType; /** * Configures the popup settings for the Floating Action Button. * * @example * ```jsx * * ``` */ popupSettings?: FloatingActionButtonPopupSettings; /** * Sets the `tabIndex` of the main button. * * @example * ```jsx * * ``` */ tabIndex?: number; /** * Sets the `accessKey` of the main button. * * @example * ```jsx * * ``` */ accessKey?: string; /** * Enables modal behavior by rendering an overlay under the Floating Action Button. * * @example * ```jsx * * ``` */ modal?: boolean; /** * Sets styles for the overlay element when the `modal` prop is enabled. * * @example * ```jsx * * ``` */ overlayStyle?: React.CSSProperties; /** * Fires when the Floating Action Button is focused. * * @example * ```jsx * console.log(event)} /> * ``` */ onFocus?: (event: FloatingActionButtonEvent) => void; /** * Fires when the Floating Action Button is blurred. * * @example * ```jsx * console.log(event)} /> * ``` */ onBlur?: (event: FloatingActionButtonEvent) => void; /** * Fires when the Floating Action Button is clicked. * * @example * ```jsx * console.log(event)} /> * ``` */ onClick?: (event: FloatingActionButtonEvent) => void; /** * Fires when a Floating Action Button item is clicked. * * @example * ```jsx * console.log(event)} /> * ``` */ onItemClick?: (event: FloatingActionButtonItemEvent) => void; /** * Fires when a key is pressed while the Floating Action Button is focused. * * @example * ```jsx * console.log(event)} /> * ``` */ onKeyDown?: (event: FloatingActionButtonEvent) => void; /** * Fires when the popup which contains the items is opened * [see example]({% slug events_floatingactionbutton %}). * * @example * ```jsx * console.log(event)} /> * ``` */ onOpen?: (event: FloatingActionButtonEvent) => void; /** * Fires when the popup containing the items is closed. * * @example * ```jsx * console.log(event)} /> * ``` */ onClose?: (event: FloatingActionButtonEvent) => void; } /** * Specifies the rounding of the Floating Action Button. * * The possible values are: * * `small` * * `medium` * * `large` * * `full` * * `null`—Does not set a rounded `className`. * */ export declare type FloatingActionButtonRounded = null | 'small' | 'medium' | 'large' | 'full'; /** * Specifies the size of the FloatingActionButton. * * The possible values are: * * `small`—Applies half of the default padding, e.g. `8px`. * * `medium` (Default)—Applies the default padding, e.g. `16px`. * * `large`—Applies one and one half of the default padding, e.g. `24px`. * * `null`—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)—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 inverse theme color. * * `null`—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 = Pick>; /** @hidden */ export declare const SplitButton: ForwardRefExoticComponent>; export declare interface SplitButtonBlurEvent extends BaseEvent { } /** * Represents the [KendoReact SplitButton component]({% slug overview_splitbutton %}). * * @example * ```jsx * const App = () => { * return ( * * * * * * ); * } * ReactDOM.render(, document.querySelector('my-app')); * ``` */ export declare class SplitButtonClassComponent extends React_2.Component { /** * @hidden */ static propTypes: { accessKey: default_2.Requireable; ariaLabel: default_2.Requireable; title: default_2.Requireable; onButtonClick: default_2.Requireable<(...args: any[]) => any>; onFocus: default_2.Requireable<(...args: any[]) => any>; onBlur: default_2.Requireable<(...args: any[]) => any>; onItemClick: default_2.Requireable<(...args: any[]) => any>; onOpen: default_2.Requireable<(...args: any[]) => any>; onClose: default_2.Requireable<(...args: any[]) => any>; text: default_2.Requireable; items: default_2.Requireable; textField: default_2.Requireable; tabIndex: default_2.Requireable; disabled: default_2.Requireable; icon: default_2.Requireable; svgIcon: default_2.Requireable; content: default_2.Validator; viewBox: default_2.Validator; }>>; iconClass: default_2.Requireable; imageUrl: default_2.Requireable; popupSettings: default_2.Requireable; itemRender: default_2.Requireable; item: default_2.Requireable<(...args: any[]) => any>; className: default_2.Requireable; buttonClass: default_2.Requireable; dir: default_2.Requireable; }; /** * @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?; private readonly showLicenseWatermark; constructor(props: SplitButtonProps); private get opened(); /** * @hidden */ render(): JSX.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 { } export declare interface SplitButtonCloseEvent extends BaseEvent { } export declare interface SplitButtonFocusEvent extends BaseEvent { } /** * Represent the `ref` of the SplitButton component. */ export declare interface SplitButtonHandle extends Pick { } export declare class SplitButtonItem extends React_2.Component { /** * @hidden */ static propTypes: { text: default_2.Requireable; icon: default_2.Requireable; iconClass: default_2.Requireable; imageUrl: default_2.Requireable; disabled: default_2.Requireable; render: default_2.Requireable; }; /** * @hidden */ render(): null; } /** * The arguments for the `itemClick` event. */ export declare interface SplitButtonItemClickEvent extends BaseEvent { /** * 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 { } 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 %})). */ text?: string; /** * Specifies the list items ([see example]({% slug binding_splitbutton %}#toc-arrays-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-arrays-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; /** * Sets an SVG icon or custom element before the content of the SplitButton. For the custom component, we recommend * using [Phrasing content](https://developer.mozilla.org/en-US/docs/Web/HTML/Content_categories#phrasing_content) * but there must be no [Interactive content](https://developer.mozilla.org/en-US/docs/Web/HTML/Content_categories#interactive_content). */ startIcon?: React.ReactNode; /** * Sets an SVG icon or custom element after the content of the SplitButton. For the custom component, we recommend * using [Phrasing content](https://developer.mozilla.org/en-US/docs/Web/HTML/Content_categories#phrasing_content) * but there must be no [Interactive content](https://developer.mozilla.org/en-US/docs/Web/HTML/Content_categories#interactive_content). */ endIcon?: React.ReactNode; /** * 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-behavior)). */ 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_splitbutton %}#toc-items-rendering)). 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, 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 events_splitbutton %})). */ onButtonClick?: (event: SplitButtonClickEvent) => void; /** * Fires when the component is focused ([see example]({% slug events_splitbutton %})). */ onFocus?: (event: SplitButtonFocusEvent) => void; /** * Fires when the component is blurred ([see example]({% slug events_splitbutton %})). */ onBlur?: (event: SplitButtonBlurEvent) => void; /** * Fires when an item is clicked ([see example]({% slug events_splitbutton %})). */ onItemClick?: (event: SplitButtonItemClickEvent) => void; /** * Fires when the popup which contains the items is opened ([see example]({% slug events_splitbutton %})). */ onOpen?: (event: SplitButtonOpenEvent) => void; /** * Fires when the popup which contains the items is closed ([see example]({% slug events_splitbutton %})). */ onClose?: (event: SplitButtonCloseEvent) => void; /** * Configures the `size` of the SplitButton. * * 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 SplitButton. * * The available options are: * - small * - medium * - large * - full * - null—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—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—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 * const App = () => { * return ( * * * * * * * * * * ); * } * ReactDOM.render(, document.querySelector('my-app')); * ``` */ export declare const Toolbar: React_2.ForwardRefExoticComponent>; /** * @hidden */ export declare const toolbarButtons: string[]; /** * Represents the Toolbar handle. */ export declare interface ToolbarHandle { /** * Represents the element of the Toolbar component. */ element: HTMLDivElement | null; /** * Represents the props of the Toolbar component. */ props: Readonly; } /** * 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 const ToolbarItem: React_2.ForwardRefExoticComponent>; /** * Represents the ToolbarItem handle. */ export declare interface ToolbarItemHandle { /** * Returns the HTML element of the ToolbarItem component. */ element: HTMLDivElement | null; } /** * Represents the props of KendoReact ToolbarItem component. */ export declare interface ToolbarItemProps extends KendoReactComponentBaseProps { /** * Sets additional classes to the ToolbarItem component. * * @example * ```jsx * * ``` */ className?: string; /** * Sets additional styles to the ToolbarItem component. * * @example * ```jsx * * ``` */ style?: React_2.CSSProperties; } /** * @hidden */ export declare interface ToolbarOverflowProps { /** * Represents the possible overflow mode options of the Toolbar. * Applicable when there is not enough space to render all tools. * * @default `none` */ overflow?: 'none' | 'section' | 'scroll'; /** * Determines the Toolbar scroll buttons visibility. * Applicable when the overflow property is set to `scroll`. * * @default `auto` */ scrollButtons?: 'hidden' | 'visible' | 'auto'; /** * Determines the Toolbar scroll buttons position. * Applicable when the overflow property is set to `scroll`. * * @default `split` */ scrollButtonsPosition?: 'start' | 'end' | 'split'; /** * Sets the Toolbar scroll speed in pixels when scrolling via clicking the previous or next button. * Applicable when the overflow property is set to `scroll`. * * @default 100 */ buttonScrollSpeed?: number; /** * 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.ComponentType; /** * 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.ComponentType; } /** * Represents the props of the [KendoReact Toolbar component]({% slug overview_toolbar %}). */ export declare interface ToolbarProps extends KendoReactComponentBaseProps, ToolbarOverflowProps { /** * Sets additional classes to the Toolbar. * * @example * ```jsx * * ``` */ className?: string; /** * Represents the `dir` HTML attribute. * * @example * ```jsx * * ``` */ dir?: string; /** * The styles that are applied to the Toolbar. * * @example * ```jsx * * ``` */ style?: React_2.CSSProperties; /** * Represents the `aria-label` HTML attribute of the Toolbar component. * * @example * ```jsx * * ``` */ ariaLabel?: string; /** * Specifies the `tabIndex` of the Toolbar. * * @example * ```jsx * * ``` */ tabIndex?: number; /** * The `resize` event of the Toolbar. * * @example * ```jsx * console.log(event)} /> * ``` */ onResize?: (event: ToolbarResizeEvent) => void; /** * If set to `false`, it will turn off the built-in keyboard navigation. * * @example * ```jsx * * ``` */ 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`—Sets the padding of the component to 4px 4px. * - `medium`—Sets the padding of the component to 8px 8px. * - `large`—Sets the padding of the component to 10px 10px. * - `null`—This option removes the the built-in size styles of the Toolbar. Allows for custom `padding`. * * @default `medium` * @example * ```jsx * * ``` */ size?: null | 'small' | 'medium' | 'large'; /** * Configures the `fillMode` of the Toolbar. * The available options are: * - `solid`—Applies a `background` color and `solid borders`. * - `flat`—Sets a `transparent background` and `solid bottom border`. * - `outline`—Sets a `transparent background` and `solid borders`. * - `null`—This option removes the built-in fill mode styles of the Toolbar. Allows for custom `background` and `border` styles. * * @default `solid` * @example * ```jsx * * ``` */ fillMode?: null | 'solid' | 'flat' | 'outline'; /** * @hidden */ role?: string; /** * @hidden */ _ariaControls?: string; } /** * Represents the `resize` event of the Toolbar. */ export declare interface ToolbarResizeEvent { /** * An event target. */ target: ToolbarHandle; /** * The `offsetWidth` event of the Toolbar. */ offsetWidth: number; /** * The `offsetHeight` event of the Toolbar. */ offsetHeight: number; /** * A native DOM event. */ nativeEvent: any; } export declare const ToolbarSeparator: (props: ToolbarSeparatorProps) => JSX.Element; /** * Represents the KendoReact Toolbar Separator component. */ declare interface ToolbarSeparatorProps { /** * Sets additional classes to the ToolbarSeparator component. */ className?: string; /** * @hidden */ _ref?: React_2.Ref; } /** * 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>; /** @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 { }