@progress/kendo-react-buttons
Version:
All you need in React Button in one package: disabled/enabled states, built-in styles and more. KendoReact Buttons package
1,530 lines (1,481 loc) • 73.2 kB
text/typescript
/**
* @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