@progress/kendo-react-dropdowns
Version:
React DropDowns offer an interface for users to select different items from a list and more. KendoReact Dropdowns package
1,587 lines (1,555 loc) • 172 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 { AdaptiveModeContextType } from '@progress/kendo-react-common';
import { CustomComponent } from '@progress/kendo-react-common';
import { default as default_2 } from 'prop-types';
import { DropDownsClassStructure } from '@progress/kendo-react-common';
import { FormComponent } from '@progress/kendo-react-common';
import { FormComponentProps } from '@progress/kendo-react-common';
import { FormComponentValidity } from '@progress/kendo-react-common';
import { ItemRenderProps } from '@progress/kendo-react-treeview';
import { JSX } from 'react/jsx-runtime';
import { PopupProps } from '@progress/kendo-react-popup';
import * as React_2 from 'react';
import { RowHeightService } from '@progress/kendo-react-common';
import { SVGIcon } from '@progress/kendo-react-common';
import { TextBoxChangeEvent } from '@progress/kendo-react-inputs';
import { TextBoxHandle } from '@progress/kendo-react-inputs';
/**
* @hidden
*/
declare enum ActiveDescendant {
PopupList = 0,
TagsList = 1
}
/** @hidden */
export declare type AutoComplete = AutoCompleteHandle;
/**
* Represents the [KendoReact AutoComplete component]({% slug overview_autocomplete %}).
*
* Accepts properties of type [AutoCompleteProps]({% slug api_dropdowns_autocompleteprops %}).
* Obtaining the `ref` returns an object of type [AutoCompleteHandle]({% slug api_dropdowns_autocompletehandle %}).
*
* @example
* ```jsx
* class App extends React.Component {
* autocomplete = null;
* render() {
* return (
* <div>
* <AutoComplete
* data={[ "Albania", "Andorra", "Austria", "Belarus" ]}
* ref={component => this.autocomplete = component}
* />
* <button onClick={() => alert(this.autocomplete.value)}>alert value</button>
* </div>
* );
* }
* }
* ReactDOM.render(<App />, document.querySelector('my-app'));
* ```
*/
export declare const AutoComplete: React_2.ForwardRefExoticComponent<AutoCompleteProps & React_2.RefAttributes<any>>;
/**
* Represents the object of the `blur` AutoComplete event.
*/
export declare interface AutoCompleteBlurEvent extends BlurEvent<AutoComplete> {
}
/**
* Represents the object of the `change` AutoComplete event.
*/
export declare interface AutoCompleteChangeEvent extends ChangeEvent<AutoComplete> {
suggestion?: Suggestion;
}
/**
* Represents the object of the `close` AutoComplete event.
*/
export declare interface AutoCompleteCloseEvent extends CloseEvent_2<AutoComplete> {
}
/**
* Represents the object of the `focus` AutoComplete event.
*/
export declare interface AutoCompleteFocusEvent extends FocusEvent_2<AutoComplete> {
}
/**
* Represent the `ref` of the AutoComplete component.
*/
export declare interface AutoCompleteHandle extends Pick<AutoCompleteWithoutContext, keyof AutoCompleteWithoutContext> {
/**
* Gets the `name` property of the AutoComplete.
*/
name: string | undefined;
/**
* Represents the validity state into which the AutoComplete is set.
*/
validity: FormComponentValidity;
/**
* The value of the AutoComplete.
*/
value: string;
}
/**
* @hidden
*/
declare interface AutoCompleteInternalState extends InternalState {
data: AutoCompleteState;
}
/**
* Represents the object of the `open` AutoComplete event.
*/
export declare interface AutoCompleteOpenEvent extends OpenEvent<AutoComplete> {
}
/**
* Represents the props of the [KendoReact AutoComplete component]({% slug overview_autocomplete %}).
*/
export declare interface AutoCompleteProps extends FormComponentProps {
/**
* Sets the data of the AutoComplete ([more information and example]({% slug binding_autocomplete %})).
*
* @example
* ```jsx
* <AutoComplete data={['Apple', 'Orange', 'Banana']} />
* ```
*/
data?: any[];
/**
* Sets the opened and closed state of the AutoComplete.
*
* @example
* ```jsx
* <AutoComplete opened={true} />
* ```
*/
opened?: boolean;
/**
* The styles that are applied to the AutoComplete.
*
* @example
* ```jsx
* <AutoComplete style={{ width: '300px' }} />
* ```
*/
style?: React.CSSProperties;
/**
* Sets the value of the AutoComplete ([more information and example]({% slug binding_autocomplete %})).
*
* @example
* ```jsx
* <AutoComplete value="Apple" />
* ```
*/
value?: string;
/**
* Sets the default value of the AutoComplete. Similar to the native `input` HTML element.
*
* @example
* ```jsx
* <AutoComplete defaultValue="Orange" />
* ```
*/
defaultValue?: string;
/**
* Sets additional classes to the AutoComplete.
*
* @example
* ```jsx
* <AutoComplete className="custom-class" />
* ```
*/
className?: string;
/**
* By default, the AutoComplete renders a button on hovering over the component, which resets the value.
* If `clearButton` is set to `false`, the button will not be rendered.
*
* @example
* ```jsx
* <AutoComplete clearButton={false} />
* ```
*/
clearButton?: boolean;
/**
* The hint that is displayed when the AutoComplete is empty.
*
* @example
* ```jsx
* <AutoComplete placeholder="Type here..." />
* ```
*/
placeholder?: string;
/**
* Sets the read-only state of the AutoComplete.
*
* @example
* ```jsx
* <AutoComplete readonly={true} />
* ```
*/
readonly?: boolean;
/**
* Enables the auto-completion of the text based on the first data item ([see example]({% slug suggestions_autocomplete %})).
*
* @example
* ```jsx
* <AutoComplete suggest={true} />
* ```
*/
suggest?: boolean | string;
/**
* Sets the disabled state of the AutoComplete.
*
* @example
* ```jsx
* <AutoComplete disabled={true} />
* ```
*/
disabled?: boolean;
/**
* Represents the `dir` HTML attribute.
*
* @example
* ```jsx
* <AutoComplete dir="rtl" />
* ```
*/
dir?: string;
/**
* Sets the loading state of the AutoComplete ([see example]({% slug filtering_autocomplete %}#toc-basic-configuration)).
*
* @example
* ```jsx
* <AutoComplete loading={true} />
* ```
*/
loading?: boolean;
/**
* Specifies the `tabIndex` of the AutoComplete.
*
* @example
* ```jsx
* <AutoComplete tabIndex={0} />
* ```
*/
tabIndex?: number;
/**
* Specifies the `accessKey` of the AutoComplete.
*
* @example
* ```jsx
* <AutoComplete accessKey="a" />
* ```
*/
accessKey?: string;
/**
* Sets the data item field that represents the item text ([see example]({% slug binding_autocomplete %}#toc-datasets-of-objects)). If the data contains only primitive values, do not define it.
*
* @example
* ```jsx
* <AutoComplete textField="name" />
* ```
*/
textField?: string;
/**
* Renders a floating label for the AutoComplete.
*
* @example
* ```jsx
* <AutoComplete label="Search" />
* ```
*/
label?: string;
/**
* Configures the popup of the AutoComplete.
*
* @example
* ```jsx
* <AutoComplete popupSettings={{ animate: true }} />
* ```
*/
popupSettings?: DropDownsPopupSettings;
/**
* Specifies the id of the component.
*
* @example
* ```jsx
* <AutoComplete id="autocomplete" />
* ```
*/
id?: 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
* <AutoComplete ariaDescribedBy="description" />
* ```
*/
ariaDescribedBy?: string;
/**
* Identifies the element(s) which will label the component.
*
* @example
* ```jsx
* <AutoComplete ariaLabelledBy="label" />
* ```
*/
ariaLabelledBy?: string;
/**
* If set, the AutoComplete will use it to get the focused item index.
*
* Default functionality returns the first item which starts with the input text.
*
* @example
* ```jsx
* const focusedItemIndex = (data, inputText, textField) => {
* let text = inputText.toLowerCase();
* return data.findIndex(item =>
* String(textField ? item[textField] : item).toLowerCase().includes(text));
* };
*
* <AutoComplete focusedItemIndex={focusedItemIndex} />
* ```
*/
focusedItemIndex?: (data: any, inputText: string, textField?: string) => number;
/**
* Fires each time the popup of the AutoComplete is about to open.
*
* @example
* ```jsx
* <AutoComplete onOpen={(event) => console.log('Popup opened', event)} />
* ```
*/
onOpen?: (event: AutoCompleteOpenEvent) => void;
/**
* Fires each time the popup of the AutoComplete is about to close.
*
* @example
* ```jsx
* <AutoComplete onClose={(event) => console.log('Popup closed', event)} />
* ```
*/
onClose?: (event: AutoCompleteCloseEvent) => void;
/**
* Fires each time the user focuses the AutoComplete.
*
* @example
* ```jsx
* <AutoComplete onFocus={(event) => console.log('Focused', event)} />
* ```
*/
onFocus?: (event: AutoCompleteFocusEvent) => void;
/**
* Fires each time the AutoComplete gets blurred.
*
* @example
* ```jsx
* <AutoComplete onBlur={(event) => console.log('Blurred', event)} />
* ```
*/
onBlur?: (event: AutoCompleteBlurEvent) => void;
/**
* Fires each time the value of the AutoComplete is about to change ([more information and example]({% slug binding_autocomplete %})).
*
* @example
* ```jsx
* <AutoComplete onChange={(event) => console.log('Value changed', event)} />
* ```
*/
onChange?: (event: AutoCompleteChangeEvent) => void;
/**
* Fires when the AutoComplete input element is about to be rendered. Use it to override the default appearance of the component.
*
* @example
* ```jsx
* <AutoComplete valueRender={(rendering) => <span>{rendering}</span>} />
* ```
*/
valueRender?: (rendering: React.ReactElement<HTMLSpanElement>) => React.ReactNode;
/**
* Fires when an AutoComplete list item is about to be rendered ([see example]({% slug customrendering_autocomplete %}#toc-items)). Used to override the default appearance of the list items.
*
* @example
* ```jsx
* <AutoComplete itemRender={(li, itemProps) => <li>{itemProps.dataItem}</li>} />
* ```
*/
itemRender?: (li: React.ReactElement<HTMLLIElement>, itemProps: ListItemProps) => React.ReactNode;
/**
* Fires when the element which indicates no data in the popup is about to be rendered ([see example]({% slug customrendering_autocomplete %}#toc-no-data)). Used to override the default appearance of the element.
*
* @example
* ```jsx
* <AutoComplete listNoDataRender={(element) => <div>No data available</div>} />
* ```
*/
listNoDataRender?: (element: React.ReactElement<HTMLDivElement>) => React.ReactNode;
/**
* Sets the header component of the AutoComplete ([see example]({% slug customrendering_autocomplete %}#toc-headers-and-footers)).
*
* @example
* ```jsx
* <AutoComplete header={<div>Header</div>} />
* ```
*/
header?: React.ReactNode;
/**
* Sets the footer component of the AutoComplete ([see example]({% slug customrendering_autocomplete %}#toc-headers-and-footers)).
*
* @example
* ```jsx
* <AutoComplete footer={<div>Footer</div>} />
* ```
*/
footer?: React.ReactNode;
/**
* Configures the `size` of the AutoComplete.
*
* The available options are:
* - small
* - medium
* - large
* - null—Does not set a size `className`.
*
* @default `medium`
*
* @example
* ```jsx
* <AutoComplete size="small" />
* ```
*/
size?: null | 'small' | 'medium' | 'large';
/**
* Configures the `roundness` of the AutoComplete.
*
* The available options are:
* - small
* - medium
* - large
* - full
* - null—Does not set a rounded `className`.
*
* @default `medium`
*
* @example
* ```jsx
* <AutoComplete rounded="large" />
* ```
*/
rounded?: null | 'small' | 'medium' | 'large' | 'full';
/**
* Configures the `fillMode` of the AutoComplete.
*
* The available options are:
* - solid
* - flat
* - outline
* - null—Does not set a fillMode `className`.
*
* @default `solid`
*
* @example
* ```jsx
* <AutoComplete fillMode="flat" />
* ```
*/
fillMode?: null | 'solid' | 'flat' | 'outline';
/**
* Sets the data item field that represents the start of a group. Applicable to objects data.
*
* @example
* ```jsx
* <AutoComplete groupField="category" />
* ```
*/
groupField?: string;
/**
* Fires when a AutoComplete group header item is about to be rendered. Used to override the default appearance of the group's headers.
*
* @example
* ```jsx
* <AutoComplete groupHeaderItemRender={(li, itemProps) => <li>{itemProps.dataItem}</li>} />
* ```
*/
groupHeaderItemRender?: (li: React.ReactElement<HTMLLIElement>, itemProps: ListGroupItemProps) => React.ReactNode;
/**
* Fires when a AutoComplete sticky group header item is about to be rendered. Used to override the default appearance of the sticky group header of the component.
*
* @example
* ```jsx
* <AutoComplete groupStickyHeaderItemRender={(div, stickyHeaderProps) => <div>{stickyHeaderProps.dataItem}</div>} />
* ```
*/
groupStickyHeaderItemRender?: (div: React.ReactElement<HTMLDivElement>, stickyHeaderProps: GroupStickyHeaderProps) => React.ReactNode;
/**
* @hidden
*/
list?: any;
/**
* Sets the key for comparing the data items of the AutoComplete. If `dataItemKey` is not set, the AutoComplete compares the items by reference.
*
* @example
* ```jsx
* <AutoComplete dataItemKey="id" />
* ```
*/
dataItemKey?: string;
/**
* Providing different rendering of the popup element based on the screen dimensions.
*
* @default `false`
*
* @example
* ```jsx
* <AutoComplete adaptive={true} />
* ```
*/
adaptive?: boolean;
/**
* Specifies the text that is rendered as title in the adaptive popup(action sheet).
* Applicable only when `adaptive` is set to `true`.
* If not provided, the title will be the same as the label.
*
* @example
* ```jsx
* <AutoComplete adaptiveTitle="Adaptive Popup Title" />
* ```
*/
adaptiveTitle?: string;
/**
* Specifies the text that is rendered as subtitle in the adaptive popup(action sheet).
* Applicable only when `adaptive` is set to `true`.
*
* @example
* ```jsx
* <AutoComplete adaptiveSubtitle="Adaptive Popup Subtitle" />
* ```
*/
adaptiveSubtitle?: string;
/**
* Defines if AutoComplete's disabled items will be skipped or focused when navigating through the list of items using a keyboard. Defaults to `true`.
*
* @example
* ```jsx
* <AutoComplete skipDisabledItems={false} />
* ```
*/
skipDisabledItems?: boolean;
/**
* Sets a custom prefix to the AutoComplete component.
*
* @example
* ```jsx
* <AutoComplete prefix={<span>Prefix</span>} />
* ```
*/
prefix?: CustomComponent<any>;
/**
* Sets a custom suffix to the AutoComplete component.
*
* @example
* ```jsx
* <AutoComplete suffix={<span>Suffix</span>} />
* ```
*/
suffix?: CustomComponent<any>;
/**
* Sets the HTML attributes of the inner focusable input element.
* Attributes which are essential for certain component functionalities cannot be changed.
*
* @example
* ```jsx
* <AutoComplete inputAttributes={{ maxLength: 10 }} />
* ```
*/
inputAttributes?: React.InputHTMLAttributes<HTMLInputElement>;
/**
* @hidden
* This prop is provided by the withAdaptiveModeContext HOC to subscribe to AdaptiveModeContext.
*/
_adaptiveMode?: AdaptiveModeContextType;
}
/**
* Represents the PropsContext of the `AutoComplete` component.
* Used for global configuration of all `AutoComplete` instances.
*
* For more information, refer to the [Dropdowns Props Context]({% slug props-context_dropdowns %}) article.
*/
export declare const AutoCompletePropsContext: React_2.Context<(p: AutoCompleteProps) => AutoCompleteProps>;
/**
* @hidden
*/
declare interface AutoCompleteState extends DropDownStateBase {
focusedItem?: any;
value?: string;
windowWidth?: number;
}
/** @hidden */
export declare class AutoCompleteWithoutContext extends React_2.Component<AutoCompleteProps, AutoCompleteState> implements FormComponent {
static displayName: string;
/**
* @hidden
*/
static propTypes: {
size: default_2.Requireable<"small" | "large" | "medium" | null | undefined>;
rounded: default_2.Requireable<"small" | "large" | "medium" | "full" | null | undefined>;
fillMode: default_2.Requireable<"flat" | "solid" | "outline" | null | undefined>;
groupField: default_2.Requireable<string>;
suggest: default_2.Requireable<NonNullable<string | boolean | null | undefined>>;
placeholder: default_2.Requireable<string>;
value: default_2.Requireable<string>;
defaultValue: default_2.Requireable<string>;
validationMessage: default_2.Requireable<string>;
required: default_2.Requireable<boolean>;
readonly: default_2.Requireable<boolean>;
clearButton: default_2.Requireable<boolean>;
valueRender: default_2.Requireable<(...args: any[]) => any>;
id: default_2.Requireable<string>;
ariaLabelledBy: default_2.Requireable<string>;
ariaDescribedBy: default_2.Requireable<string>;
list: default_2.Requireable<any>;
adaptive: default_2.Requireable<boolean>;
adaptiveTitle: default_2.Requireable<string>;
adaptiveSubtitle: default_2.Requireable<string>;
onCancel: default_2.Requireable<(...args: any[]) => any>;
skipDisabledItems: default_2.Requireable<boolean>;
inputAttributes: default_2.Requireable<object>;
opened: default_2.Requireable<boolean>;
disabled: default_2.Requireable<boolean>;
dir: default_2.Requireable<string>;
tabIndex: default_2.Requireable<number>;
accessKey: default_2.Requireable<string>;
data: default_2.Requireable<any[]>;
textField: default_2.Requireable<string>;
className: default_2.Requireable<string>;
label: default_2.Requireable<string>;
loading: default_2.Requireable<boolean>;
popupSettings: default_2.Requireable<default_2.InferProps<{
animate: default_2.Requireable<NonNullable<boolean | default_2.InferProps<{
openDuration: default_2.Requireable<number>;
closeDuration: default_2.Requireable<number>;
}> | null | undefined>>;
popupClass: default_2.Requireable<string>;
className: default_2.Requireable<string>;
appendTo: default_2.Requireable<any>;
width: default_2.Requireable<NonNullable<string | number | null | undefined>>;
height: default_2.Requireable<NonNullable<string | number | null | undefined>>;
}>>;
onOpen: default_2.Requireable<(...args: any[]) => any>;
onClose: default_2.Requireable<(...args: any[]) => any>;
onFocus: default_2.Requireable<(...args: any[]) => any>;
onBlur: default_2.Requireable<(...args: any[]) => any>;
onChange: default_2.Requireable<(...args: any[]) => any>;
itemRender: default_2.Requireable<(...args: any[]) => any>;
listNoDataRender: default_2.Requireable<(...args: any[]) => any>;
focusedItemIndex: default_2.Requireable<(...args: any[]) => any>;
header: default_2.Requireable<default_2.ReactNodeLike>;
footer: default_2.Requireable<default_2.ReactNodeLike>;
};
/**
* @hidden
*/
static defaultProps: {
size: "small" | "large" | "medium" | null | undefined;
rounded: "small" | "large" | "medium" | "full" | null | undefined;
fillMode: "flat" | "solid" | "outline" | null | undefined;
skipDisabledItems: boolean;
prefix: undefined;
suffix: undefined;
popupSettings: {
height: string;
};
required: boolean;
validityStyles: boolean;
};
/**
* @hidden
*/
readonly state: AutoCompleteState;
protected readonly base: DropDownBase;
private _element;
private get _inputId();
private _suggested;
private _input;
private _adaptiveInput;
private _skipFocusEvent;
private _valueDuringOnChange?;
private _isScrolling;
private itemHeight;
private observerResize?;
private get document();
/**
* @hidden
*/
focus: () => void;
/**
* @hidden
*/
get element(): HTMLSpanElement | null;
/**
* The value of the AutoComplete.
*/
get value(): string;
/**
* Gets the `name` property of the AutoComplete.
*/
get name(): string | undefined;
/**
* Represents the validity state into which the AutoComplete is set.
*/
get validity(): FormComponentValidity;
/** @hidden */
get opened(): boolean;
/**
* The mobile mode of the AutoComplete.
*/
get mobileMode(): boolean;
/**
* @hidden
*/
protected get validityStyles(): boolean;
/**
* @hidden
*/
protected get required(): boolean;
/**
* @hidden
*/
componentDidUpdate(prevProps: AutoCompleteProps, prevState: AutoCompleteState): void;
/**
* @hidden
*/
componentDidMount(): void;
/**
* @hidden
*/
componentWillUnmount(): void;
/**
* @hidden
*/
render(): JSX.Element;
/**
* @hidden
*/
handleItemSelect: (index: number, state: AutoCompleteInternalState) => void;
/**
* @hidden
*/
itemFocus: (index: number, state: AutoCompleteInternalState) => void;
/**
* @hidden
*/
togglePopup: (state: InternalState) => void;
/**
* @hidden
*/
onNavigate(state: AutoCompleteInternalState, keyCode: number, skipItems?: number): void;
/**
* @hidden
*/
applyInputValue(value: string, state: AutoCompleteInternalState, eventKey?: number): void;
private setValidity;
private renderSearchBar;
private renderAdaptiveListContainer;
private onCancel;
private renderListContainer;
private listContainerContent;
private renderList;
private onScroll;
private handleItemClick;
private onChangeHandler;
private clearButtonClick;
private onInputKeyDown;
private handleFocus;
private handleBlur;
private handleWrapperClick;
private triggerOnChange;
private focusElement;
private applyState;
private suggestValue;
private focusedIndex;
private calculateMedia;
}
/**
* @hidden
*/
declare interface BlurEvent<T> extends DropdownEvent<T> {
}
/**
* @hidden
*/
declare interface CancelEvent<T> extends DropdownEvent<T> {
}
/**
* @hidden
*/
declare interface ChangeEvent<T> extends DropdownEvent<T> {
/**
* The current value of the component.
*/
value: any;
}
/**
* @hidden
*/
declare interface CloseEvent_2<T> extends DropdownEvent<T> {
}
/** @hidden */
export declare type ComboBox = ComboBoxHandle;
/**
* Represents the [KendoReact ComboBox component]({% slug overview_combobox %}).
*
* Accepts properties of type [ComboBoxProps]({% slug api_dropdowns_comboboxprops %}).
* Obtaining the `ref` returns an object of type [ComboBoxHandle]({% slug api_dropdowns_comboboxhandle %}).
*
* @example
* ```jsx
* class App extends React.Component {
* combobox = null;
* render() {
* return (
* <div>
* <ComboBox
* data={[ "Albania", "Andorra", "Austria", "Belarus" ]}
* ref={component => this.combobox = component}
* />
* <button onClick={() => alert(this.combobox.value)}>alert value</button>
* </div>
* );
* }
* }
* ReactDOM.render(<App />, document.querySelector('my-app'));
* ```
*/
export declare const ComboBox: React_2.ForwardRefExoticComponent<ComboBoxProps & React_2.RefAttributes<any>>;
/**
* Represents the object of the `blur` ComboBox event.
*/
export declare interface ComboBoxBlurEvent extends BlurEvent<ComboBox> {
}
/**
* Represents the object of the `change` ComboBox event.
*/
export declare interface ComboBoxChangeEvent extends ChangeEvent<ComboBox> {
}
/**
* Represents the object of the `close` ComboBox event.
*/
export declare interface ComboBoxCloseEvent extends CloseEvent_2<ComboBox> {
}
/**
* Represents the object of the `FilterChange` ComboBox event.
*/
export declare interface ComboBoxFilterChangeEvent extends FilterChangeEvent<ComboBox> {
}
/**
* Represents the object of the `focus` ComboBox event.
*/
export declare interface ComboBoxFocusEvent extends FocusEvent_2<ComboBox> {
}
/**
* Represent the `ref` of the ComboBox component.
*/
export declare interface ComboBoxHandle extends Pick<ComboBoxWithoutContext, keyof ComboBoxWithoutContext> {
/**
* The index of the selected item.
*/
index: number;
/**
* Gets the `name` property of the ComboBox.
*/
name: string | undefined;
/**
* Represents the validity state into which the component is set.
*/
validity: FormComponentValidity;
/**
* The value of the ComboBox.
*/
value: any;
}
/**
* Represents the object of the `open` ComboBox event.
*/
export declare interface ComboBoxOpenEvent extends OpenEvent<ComboBox> {
}
/**
* Represents the object of the `PageChange` ComboBox event.
*/
export declare interface ComboBoxPageChangeEvent extends PageChangeEvent<ComboBox> {
}
/**
* Represents the props of the [KendoReact ComboBox component]({% slug overview_combobox %}).
*/
export declare interface ComboBoxProps extends FormComponentProps {
/**
* Sets the data of the ComboBox ([more information and examples]({% slug binding_combobox %})).
*
* @example
* ```jsx
* <ComboBox data={['Option1', 'Option2', 'Option3']} />
* ```
*/
data?: any[];
/**
* Sets the opened and closed state of the ComboBox.
*
* @example
* ```jsx
* <ComboBox opened={true} />
* ```
*/
opened?: boolean;
/**
* The styles that are applied to the ComboBox.
*
* @example
* ```jsx
* <ComboBox style={{ width: '250px' }} />
* ```
*/
style?: React.CSSProperties;
/**
* Sets the value of the ComboBox ([more information and examples]({% slug binding_combobox %})).
*
* @example
* ```jsx
* <ComboBox value="Option1" />
* ```
*/
value?: any;
/**
* Sets the default value of the ComboBox. Similar to the native `select` HTML element.
*
* @example
* ```jsx
* <ComboBox defaultValue="Option2" />
* ```
*/
defaultValue?: any;
/**
* Sets additional classes to the ComboBox.
*
* @example
* ```jsx
* <ComboBox className="custom-class" />
* ```
*/
className?: string;
/**
* Sets CSS classes to the expand `icon` DOM element.
*
* @example
* ```jsx
* <ComboBox iconClassName="custom-icon-class" />
* ```
*/
iconClassName?: string;
/**
* Sets the specified SVG icon.
*
* @example
* ```jsx
* <ComboBox svgIcon={{ name: 'custom-icon' }} />
* ```
*/
svgIcon?: SVGIcon;
/**
* If `clearButton` is set to `true`, the ComboBox renders a button on hovering over the component. Clicking this button resets the value of the ComboBox to `undefined` and triggers the `change` event.
*
* @example
* ```jsx
* <ComboBox clearButton={true} />
* ```
*/
clearButton?: boolean;
/**
* The hint that is displayed when the ComboBox is empty.
*
* @example
* ```jsx
* <ComboBox placeholder="Select an option" />
* ```
*/
placeholder?: string;
/**
* Sets the title attribute to the underlying input element of the ComboBox.
*
* @example
* ```jsx
* <ComboBox title="ComboBox Title" />
* ```
*/
title?: string;
/**
* Enables the auto-completion of the text based on the first data item ([see example]({% slug suggestions_combobox %})).
*
* @example
* ```jsx
* <ComboBox suggest={true} />
* ```
*/
suggest?: boolean;
/**
* Specifies whether the ComboBox allows user-defined values that are not present in the dataset ([see example]({% slug custom_values_combobox %})). Defaults to `false`.
*
* @example
* ```jsx
* <ComboBox allowCustom={true} />
* ```
*/
allowCustom?: boolean;
/**
* Sets the disabled state of the ComboBox.
*
* @example
* ```jsx
* <ComboBox disabled={true} />
* ```
*/
disabled?: boolean;
/**
* Represents the `dir` HTML attribute.
*
* @example
* ```jsx
* <ComboBox dir="rtl" />
* ```
*/
dir?: string;
/**
* Enables the filtering functionality of the ComboBox ([more information and examples]({% slug filtering_combobox %})).
*
* @example
* ```jsx
* <ComboBox filterable={true} />
* ```
*/
filterable?: boolean;
/**
* Sets the value of ComboBox input. Useful for making the ComboBox input a [controlled component](https://react.dev/learn/sharing-state-between-components#controlled-and-uncontrolled-components).
*
* @example
* ```jsx
* <ComboBox filter="Option" />
* ```
*/
filter?: string | null;
/**
* Sets the value of the adaptive filtering input of the ComboBox.
*
* @example
* ```jsx
* <ComboBox adaptiveFilter="Option" />
* ```
*/
adaptiveFilter?: string;
/**
* Sets the loading state of the ComboBox ([see example]({% slug filtering_combobox %}#toc-basic-configuration)).
*
* @example
* ```jsx
* <ComboBox loading={true} />
* ```
*/
loading?: boolean;
/**
* Specifies the `tabIndex` of the ComboBox.
*
* @example
* ```jsx
* <ComboBox tabIndex={0} />
* ```
*/
tabIndex?: number;
/**
* Specifies the `accessKey` of the ComboBox.
*
* @example
* ```jsx
* <ComboBox accessKey="k" />
* ```
*/
accessKey?: string;
/**
* Sets the data item field that represents the item text. If the data contains only primitive values, do not define it.
*
* @example
* ```jsx
* <ComboBox textField="name" />
* ```
*/
textField?: string;
/**
* Sets the data item field that represents the start of a group. Applicable to objects data.
*
* @example
* ```jsx
* <ComboBox groupField="category" />
* ```
*/
groupField?: string;
/**
* Defines the `classic` or `modern` type of the grouping's visualization. Defaults to `modern`.
*
* @example
* ```jsx
* <ComboBox groupMode="classic" />
* ```
*/
groupMode?: string;
/**
* @hidden Used to indicate if the ComboBox is with multiple columns
*/
isMultiColumn?: boolean;
/**
* Sets the key for comparing the data items of the ComboBox. If `dataItemKey` is not set, the ComboBox compares the items by reference ([see example]({% slug binding_combobox %}#toc-datasets-of-objects)).
*
* @example
* ```jsx
* <ComboBox dataItemKey="id" />
* ```
*/
dataItemKey?: string;
/**
* Renders a floating label for the ComboBox.
*
* @example
* ```jsx
* <ComboBox label="Select an option" />
* ```
*/
label?: string;
/**
* Configures the popup of the ComboBox.
*
* @example
* ```jsx
* <ComboBox popupSettings={{ animate: true }} />
* ```
*/
popupSettings?: DropDownsPopupSettings;
/**
* Configures the virtual scrolling of the ComboBox ([more information and examples]({% slug virtualization_combobox %})).
*
* @example
* ```jsx
* <ComboBox virtual={{ pageSize: 20 }} />
* ```
*/
virtual?: VirtualizationSettings;
/**
* Specifies the id of the component.
*
* @example
* ```jsx
* <ComboBox id="comboBoxId" />
* ```
*/
id?: 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
* <ComboBox ariaDescribedBy="descriptionId" />
* ```
*/
ariaDescribedBy?: string;
/**
* Identifies the element(s) which will label the component.
*
* @example
* ```jsx
* <ComboBox ariaLabelledBy="labelId" />
* ```
*/
ariaLabelledBy?: string;
/**
* The accessible label of the component.
*
* @example
* ```jsx
* <ComboBox ariaLabel="ComboBox Label" />
* ```
*/
ariaLabel?: string;
/**
* If set, the ComboBox will use it to get the focused item index.
*
* Default functionality returns the first item which starts with the input text.
*
* @example
* ```jsx
* const focusedItemIndex = (data, inputText, textField) => {
* let text = inputText.toLowerCase();
* return data.findIndex(item =>
* String(textField ? item[textField] : item).toLowerCase().includes(text));
* };
*
* <ComboBox focusedItemIndex={focusedItemIndex} />
* ```
*/
focusedItemIndex?: (data: any, inputText: string, textField?: string) => number;
/**
* Fires each time the popup of the ComboBox is about to open.
*
* @example
* ```jsx
* <ComboBox onOpen={(event) => console.log('Popup opened', event)} />
* ```
*/
onOpen?: (event: ComboBoxOpenEvent) => void;
/**
* Fires each time the popup of the ComboBox is about to close.
*
* @example
* ```jsx
* <ComboBox onClose={(event) => console.log('Popup closed', event)} />
* ```
*/
onClose?: (event: ComboBoxCloseEvent) => void;
/**
* Fires each time the user focuses the ComboBox.
*
* @example
* ```jsx
* <ComboBox onFocus={(event) => console.log('ComboBox focused', event)} />
* ```
*/
onFocus?: (event: ComboBoxFocusEvent) => void;
/**
* Fires each time the ComboBox gets blurred.
*
* @example
* ```jsx
* <ComboBox onBlur={(event) => console.log('ComboBox blurred', event)} />
* ```
*/
onBlur?: (event: ComboBoxBlurEvent) => void;
/**
* Fires each time the value of the ComboBox is about to change ([see examples]({% slug binding_combobox %})).
*
* @example
* ```jsx
* <ComboBox onChange={(event) => console.log('Value changed', event)} />
* ```
*/
onChange?: (event: ComboBoxChangeEvent) => void;
/**
* Fires each time the user types in the filter input ([see examples]({% slug filtering_combobox %}#toc-basic-configuration)). You can filter the source based on the passed filtration value.
*
* @example
* ```jsx
* <ComboBox onFilterChange={(event) => console.log('Filter changed', event)} />
* ```
*/
onFilterChange?: (event: ComboBoxFilterChangeEvent) => void;
/**
* Fires when both the virtual scrolling of the ComboBox is enabled and the component requires data for another page ([more information and examples]({% slug virtualization_combobox %})).
*
* @example
* ```jsx
* <ComboBox onPageChange={(event) => console.log('Page changed', event)} />
* ```
*/
onPageChange?: (event: ComboBoxPageChangeEvent) => void;
/**
* Fires when the ComboBox input element is about to be rendered. Use it to override the default appearance of the component.
*
* @example
* ```jsx
* <ComboBox valueRender={(rendering) => <span>{rendering}</span>} />
* ```
*/
valueRender?: (rendering: React.ReactElement<HTMLSpanElement>) => React.ReactNode;
/**
* Fires when a ComboBox list item is about to be rendered ([see example]({% slug customrendering_combobox %}#toc-items)). Used to override the default appearance of the list items.
*
* @example
* ```jsx
* <ComboBox itemRender={(li, itemProps) => <li>{itemProps.dataItem}</li>} />
* ```
*/
itemRender?: (li: React.ReactElement<HTMLLIElement>, itemProps: ListItemProps) => React.ReactNode;
/**
* Fires when a ComboBox group header item is about to be rendered. Used to override the default appearance of the group's headers when the component is configured in `modern` group mode.
*
* @example
* ```jsx
* <ComboBox groupHeaderItemRender={(li, itemProps) => <li>{itemProps.dataItem}</li>} />
* ```
*/
groupHeaderItemRender?: (li: React.ReactElement<HTMLLIElement>, itemProps: ListGroupItemProps) => React.ReactNode;
/**
* Fires when a ComboBox sticky group header item is about to be rendered. Used to override the default appearance of the sticky group header of the component.
*
* @example
* ```jsx
* <ComboBox groupStickyHeaderItemRender={(div, stickyHeaderProps) => <div>{stickyHeaderProps.group}</div>} />
* ```
*/
groupStickyHeaderItemRender?: (div: React.ReactElement<HTMLDivElement>, stickyHeaderProps: GroupStickyHeaderProps) => React.ReactNode;
/**
* Fires when the element which indicates no data in the popup is about to be rendered. Used to override the default appearance of the element.
*
* @example
* ```jsx
* <ComboBox listNoDataRender={(element) => <div>No data available</div>} />
* ```
*/
listNoDataRender?: (element: React.ReactElement<HTMLDivElement>) => React.ReactNode;
/**
* @hidden
*/
onGroupScroll?: (event: {
group?: string;
}) => void;
/**
* Sets the header component of the ComboBox ([see example]({% slug customrendering_combobox %}#toc-headers-and-footers)).
*
* @example
* ```jsx
* <ComboBox header={<div>Header Content</div>} />
* ```
*/
header?: React.ReactNode;
/**
* Sets the footer component of the ComboBox ([see example]({% slug customrendering_combobox %}#toc-headers-and-footers)).
*
* @example
* ```jsx
* <ComboBox footer={<div>Footer Content</div>} />
* ```
*/
footer?: React.ReactNode;
/**
* @hidden
*/
footerClassName?: string;
/**
* @hidden
*/
list?: any;
/**
* Configures the `size` of the ComboBox.
*
* The available options are:
* - small
* - medium
* - large
* - null—Does not set a size `className`.
*
* @default `medium`
*
* @example
* ```jsx
* <ComboBox size="large" />
* ```
*/
size?: null | 'small' | 'medium' | 'large';
/**
* Configures the `roundness` of the ComboBox.
*
* The available options are:
* - small
* - medium
* - large
* - full
* - null—Does not set a rounded `className`.
*
* @default `medium`
*
* @example
* ```jsx
* <ComboBox rounded="full" />
* ```
*/
rounded?: null | 'small' | 'medium' | 'large' | 'full';
/**
* Configures the `fillMode` of the ComboBox.
*
* The available options are:
* - solid
* - flat
* - outline
* - null—Does not set a fillMode `className`.
*
* @default `solid`
*
* @example
* ```jsx
* <ComboBox fillMode="flat" />
* ```
*/
fillMode?: null | 'solid' | 'flat' | 'outline';
/**
* Providing different rendering of the popup element based on the screen dimensions.
*
* @default `false`
*
* @example
* ```jsx
* <ComboBox adaptive={true} />
* ```
*/
adaptive?: boolean;
/**
* Specifies the text that is rendered as title in the adaptive popup(action sheet).
* Applicable only when `adaptive` is set to `true`.
* If not provided, the title will be the same as the label.
*
* @example
* ```jsx
* <ComboBox adaptiveTitle="Adaptive Popup Title" />
* ```
*/
adaptiveTitle?: string;
/**
* Specifies the text that is rendered as subtitle in the adaptive popup(action sheet).
* Applicable only when `adaptive` is set to `true`.
*
* @example
* ```jsx
* <ComboBox adaptiveSubtitle="Adaptive Popup Subtitle" />
*/
adaptiveSubtitle?: string;
/**
* Defines if ComboBox's disabled items will be skipped or focused when navigating through the list of items using a keyboard. Defaults to `true`.
*
* @example
* ```jsx
* <ComboBox skipDisabledItems={false} />
* ```
*/
skipDisabledItems?: boolean;
/**
* Sets a custom prefix to the ComboBox component.
*
* @example
* ```jsx
* <ComboBox prefix={<span>Prefix</span>} />
* ```
*/
prefix?: CustomComponent<any>;
/**
* Sets a custom suffix to the ComboBox component.
*
* @example
* ```jsx
* <ComboBox suffix={<span>Suffix</span>} />
* ```
*/
suffix?: CustomComponent<any>;
/**
* @hidden
*/
unstyled?: DropDownsClassStructure;
/**
* Sets the HTML attributes of the inner focusable input element.
* Attributes which are essential for certain component functionalities cannot be changed.
*
* @example
* ```jsx
* <ComboBox inputAttributes={{ maxLength: 10 }} />
* ```
*/
inputAttributes?: React.InputHTMLAttributes<HTMLInputElement>;
/**
* @hidden
* This prop is provided by the withAdaptiveModeContext HOC to subscribe to AdaptiveModeContext.
*/
_adaptiveMode?: AdaptiveModeContextType;
}
/**
* Represents the PropsContext of the `ComboBox` component.
* Used for global configuration of all `ComboBox` instances.
*
* For more information, refer to the [Dropdowns Props Context]({% slug props-context_dropdowns %}) article.
*/
export declare const ComboBoxPropsContext: React_2.Context<(p: ComboBoxProps) => ComboBoxProps>;
/** @hidden */
declare interface ComboBoxState extends DropDownStateBase {
filterText?: string;
suggestedText?: string;
focusedItem?: any;
windowWidth?: number;
}
/** @hidden */
export declare class ComboBoxWithoutContext extends React_2.Component<ComboBoxProps, ComboBoxState> implements FormComponent {
static displayName: string;
/** @hidden */
static propTypes: {
size: default_2.Requireable<"small" | "large" | "medium" | null | undefined>;
rounded: default_2.Requireable<"small" | "large" | "medium" | "full" | null | undefined>;
fillMode: default_2.Requireable<"flat" | "solid" | "outline" | null | undefined>;
dataItemKey: default_2.Requireable<string>;
groupField: default_2.Requireable<string>;
groupMode: default_2.Requireable<string | undefined>;
isMultiColumn: default_2.Requireable<boolean>;
suggest: default_2.Requireable<boolean>;
placeholder: default_2.Requireable<string>;
title: default_2.Requireable<string>;
allowCustom: default_2.Requireable<boolean>;
clearButton: default_2.Requireable<boolean>;
iconClassName: 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>;
}>>;
validationMessage: default_2.Requireable<string>;
required: default_2.Requireable<boolean>;
id: default_2.Requireable<string>;
ariaLabelledBy: default_2.Requireable<string>;
ariaLabel: default_2.Requireable<string>;
ariaDescribedBy: default_2.Requireable<string>;
list: default_2.Requireable<any>;
valueRender: default_2.Requireable<(...args: any[]) => any>;
skipDisabledItems: default_2.Requireable<boolean>;
inputAttributes: default_2.Requireable<object>;
value: default_2.Requireable<any>;
defaultValue: default_2.Requireable<any>;
filterable: default_2.Requireable<boolean>;
filter: default_2.Requireable<string>;
virtual: default_2.Requireable<default_2.InferProps<{
pageSize: default_2.Validator<number>;
skip: default_2.Validator<number>;
total: default_2.Validator<number>;
}>>;
onFilterChange: default_2.Requireable<(...args: any[]) => any>;
onPageChange: default_2.Requireable<(...args: any[]) => any>;
opened: default_2.Requireable<boolean>;
disabled: default_2.Requireable<boolean>;
dir: default_2.Requireable<string>;
tabIndex: default_2.Requireable<number>;
accessKey: default_2.Requireable<string>;
data: default_2.Requireable<any[]>;
textField: default_2.Requireable<string>;
className: default_2.Requireable<string>;
label: default_2.Requireable<string>;
loading: default_2.Requireable<boolean>;
popupSettings: default_2.Requireable<default_2.InferProps<{
animate: default_2.Requireable<NonNullable<boolean | default_2.InferProps<{
/** @hidden */
openDuration: default_2.Requireable<number>;
closeDuration: default_2.Requireable<number>;
}> | null | undefined>>;
popupClass: default_2.Requireable<string>;
className: default_2.Requireable<string>;
appendTo: default_2.Requireable<any>;
width: default_2.Requireable<NonNullable<string | number | null | undefined>>;
height: default_2.Requireable<NonNullable<string | number | null | undefined>>;
}>>;
onOpen: default_2.Requireable<(...args: any[]) => any>;
onClose: default_2.Requireable<(...args: any[]) => any>;
onFocus: default_2.Requireable<(...args: any[]) => any>;
onBlur: default_2.Requireable<(...args: any[]) => any>;
onChange: default_2.Requireable<(...args: any[]) => any>;
itemRender: default_2.Requireable<(...args: any[]) => any>;
listNoDataRende