@progress/kendo-react-buttons

/** * @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 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 * as React_2 from 'react'; import { RefAttributes } from 'react'; import { SVGIcon } from '@progress/kendo-react-common'; export declare const Button: React_2.ForwardRefExoticComponent<ButtonProps & React_2.RefAttributes<ButtonHandle | null>>; export declare const ButtonGroup: { (props: ButtonGroupProps): JSX_2.Element; propTypes: { children: default_2.Requireable<NonNullable<default_2.ReactElementLike | (default_2.ReactElementLike | null | undefined)[] | null | undefined>>; className: default_2.Requireable<string>; disabled: default_2.Requireable<boolean>; width: default_2.Requireable<string>; dir: default_2.Requireable<string>; }; }; /** * 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; /** * @hidden */ 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; 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<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; 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<HTMLButtonElement> { /** * @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<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—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—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—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—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—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> { } /** @hidden */ export declare type DropDownButtonClassComponent = DropDownButtonHandle; /** * Represents the [KendoReact DropDownButton component]({% slug overview_dropdownbutton %}). * * @example * ```jsx * const App = () => { * return ( * <DropDownButton text="Act"> * <DropDownButtonItem text="Item1" /> * <DropDownButtonItem text="Item2" /> * <DropDownButtonItem text="Item3" /> * </DropDownButton> * ); * } * ReactDOM.render(<App />, document.querySelector('my-app')); * ``` */ export declare const DropDownButtonClassComponent: React_2.ForwardRefExoticComponent<DropDownButtonProps & React_2.RefAttributes<any>>; 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<DropDownButtonWithoutContext, keyof DropDownButtonWithoutContext> { /** * The DOM element of main button. */ element: HTMLButtonElement | null; /** * The props of the DropDownButtonHandle component. */ props: Readonly<DropDownButtonProps>; } export declare class DropDownButtonItem extends React_2.Component<DropDownButtonItemProps, {}> { /** * @hidden */ static propTypes: { text: default_2.Requireable<string>; icon: default_2.Requireable<string>; iconClass: default_2.Requireable<string>; imageUrl: default_2.Requireable<string>; selected: default_2.Requireable<boolean>; disabled: default_2.Requireable<boolean>; render: default_2.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 %})). */ 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<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 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<DropDownButtonProps, DropDownButtonState> { /** * @hidden */ static propTypes: { accessKey: default_2.Requireable<string>; ariaLabel: default_2.Requireable<string>; title: default_2.Requireable<string>; 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<any[]>; textField: default_2.Requireable<string>; tabIndex: default_2.Requireable<number>; disabled: default_2.Requireable<boolean>; icon: default_2.Requireable<string>; svgIcon: default_2.Requireable<default_2.InferProps<{ name: default_2.Validator<string>; content: default_2.Validator<string>; viewBox: default_2.Validator<string>; }>>; iconClass: default_2.Requireable<string>; imageUrl: default_2.Requireable<string>; popupSettings: default_2.Requireable<object>; itemRender: default_2.Requireable<(...args: any[]) => any>; item: default_2.Requireable<(...args: any[]) => any>; className: default_2.Requireable<string>; buttonClass: default_2.Requireable<string>; dir: default_2.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 readonly showLicenseWatermark; 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; } /** * 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`—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<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`—Sets the horizontal offset of the Floating Action Button. * * `y`—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`— 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. * */ 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`—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`. * */ size?: FloatingActionButtonSize; /** * Specifies the rounding of the Floating Action Button. * * The possible values are: * * `small` * * `medium` * * `large` * * `full` * * `null`—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)—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`. * */ 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