@progress/kendo-react-dropdowns

/** * @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 as JSX_2 } 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 %})). */ data?: any[]; /** * Sets the opened and closed state of the AutoComplete. */ opened?: boolean; /** * The styles that are applied to the AutoComplete. */ style?: React.CSSProperties; /** * Sets the value of the AutoComplete ([more information and example]({% slug binding_autocomplete %})). */ value?: string; /** * Sets the default value of the AutoComplete. Similar to the native `input` HTML element. */ defaultValue?: string; /** * Sets additional classes to the AutoComplete. */ 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. */ clearButton?: boolean; /** * The hint that is displayed when the AutoComplete is empty. */ placeholder?: string; /** * Sets the read-only state of the AutoComplete. */ readonly?: boolean; /** * Enables the auto-completion of the text based on the first data item ([see example]({% slug suggestions_autocomplete %})). */ suggest?: boolean | string; /** * Sets the disabled state of the AutoComplete. */ disabled?: boolean; /** * Represents the `dir` HTML attribute. */ dir?: string; /** * Sets the loading state of the AutoComplete ([see example]({% slug filtering_autocomplete %}#toc-basic-configuration)). */ loading?: boolean; /** * Specifies the `tabIndex` of the AutoComplete. */ tabIndex?: number; /** * Specifies the `accessKey` of the AutoComplete. */ 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. */ textField?: string; /** * Renders a floating label for the AutoComplete. */ label?: string; /** * Configures the popup of the AutoComplete. */ popupSettings?: DropDownsPopupSettings; /** * Specifies the id of the component. */ 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. */ ariaDescribedBy?: string; /** * Identifies the element(s) which will label the component. */ 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-no-run * 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. */ onOpen?: (event: AutoCompleteOpenEvent) => void; /** * Fires each time the popup of the AutoComplete is about to close. */ onClose?: (event: AutoCompleteCloseEvent) => void; /** * Fires each time the user focuses the AutoComplete. */ onFocus?: (event: AutoCompleteFocusEvent) => void; /** * Fires each time the AutoComplete gets blurred. */ onBlur?: (event: AutoCompleteBlurEvent) => void; /** * Fires each time the value of the AutoComplete is about to change ([more information and example]({% slug binding_autocomplete %})). */ 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. */ 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. */ 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. */ listNoDataRender?: (element: React.ReactElement<HTMLDivElement>) => React.ReactNode; /** * Sets the header component of the AutoComplete ([see example]({% slug customrendering_autocomplete %}#toc-headers-and-footers)). */ header?: React.ReactNode; /** * Sets the footer component of the AutoComplete ([see example]({% slug customrendering_autocomplete %}#toc-headers-and-footers)). */ 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` */ 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` */ 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` */ fillMode?: null | 'solid' | 'flat' | 'outline'; /** * Sets the data item field that represents the start of a group. Applicable to objects data. */ 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. */ 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. */ 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. */ dataItemKey?: string; /** * Providing different rendering of the popup element based on the screen dimensions. */ adaptive?: boolean; /** * Specifies the text that is rendered as title in the adaptive popup. */ adaptiveTitle?: 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`. */ skipDisabledItems?: boolean; /** * Sets a custom prefix to the AutoComplete component. */ prefix?: CustomComponent<any>; /** * Sets a custom suffix to the AutoComplete component. */ suffix?: CustomComponent<any>; /** * Sets the HTML attributes of the inner focusable input element. * Attributes which are essential for certain component functionalities cannot be changed. */ 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>; 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 */ }; /** * @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_2.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 %})). */ data?: any[]; /** * Sets the opened and closed state of the ComboBox. */ opened?: boolean; /** * The styles that are applied to the ComboBox. */ style?: React.CSSProperties; /** * Sets the value of the ComboBox ([more information and examples]({% slug binding_combobox %})). It can either be of the primitive (string, numbers) or of the complex (objects) type. */ value?: any; /** * Sets the default value of the ComboBox. Similar to the native `select` HTML element. */ defaultValue?: any; /** * Sets additional classes to the ComboBox. */ className?: string; /** * Sets CSS classes to the expand `icon` DOM element. */ iconClassName?: string; /** * Sets the specified SVG 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. */ clearButton?: boolean; /** * The hint that is displayed when the ComboBox is empty. */ placeholder?: string; /** * Sets the title attribute to the underlying input element of the ComboBox. */ title?: string; /** * Enables the auto-completion of the text based on the first data item ([see example]({% slug suggestions_combobox %})). */ 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`. */ allowCustom?: boolean; /** * Sets the disabled state of the ComboBox. */ disabled?: boolean; /** * Represents the `dir` HTML attribute. */ dir?: string; /** * Enables the filtering functionality of the ComboBox ([more information and examples]({% slug filtering_combobox %})). */ 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). */ filter?: string | null; /** * Sets the value of the adaptive filtering input of the of ComboBox. */ adaptiveFilter?: string; /** * Sets the loading state of the ComboBox ([see example]({% slug filtering_combobox %}#toc-basic-configuration)). */ loading?: boolean; /** * Specifies the `tabIndex` of the ComboBox. */ tabIndex?: number; /** * Specifies the `accessKey` of the ComboBox. */ accessKey?: string; /** * Sets the data item field that represents the item text. If the data contains only primitive values, do not define it. */ textField?: string; /** * Sets the data item field that represents the start of a group. Applicable to objects data. */ groupField?: string; /** * Defines the `classic` or `modern` type of the grouping's visualization. Defaults to `modern`. */ 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)). */ dataItemKey?: string; /** * Renders a floating label for the ComboBox. */ label?: string; /** * Configures the popup of the ComboBox. */ popupSettings?: DropDownsPopupSettings; /** * Configures the virtual scrolling of the ComboBox ([more information and examples]({% slug virtualization_combobox %})). */ virtual?: VirtualizationSettings; /** * Specifies the id of the component. */ 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. */ ariaDescribedBy?: string; /** * Identifies the element(s) which will label the component. */ ariaLabelledBy?: string; /** * The accessible label of the component. */ 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-no-run * 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. */ onOpen?: (event: ComboBoxOpenEvent) => void; /** * Fires each time the popup of the ComboBox is about to close. */ onClose?: (event: ComboBoxCloseEvent) => void; /** * Fires each time the user focuses the ComboBox. */ onFocus?: (event: ComboBoxFocusEvent) => void; /** * Fires each time the ComboBox gets blurred. */ onBlur?: (event: ComboBoxBlurEvent) => void; /** * Fires each time the value of the ComboBox is about to change ([see examples]({% slug binding_combobox %})). */ 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. */ 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 %})). */ 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. */ 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. */ 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. */ 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. */ 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. */ 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)). */ header?: React.ReactNode; /** * Sets the footer component of the ComboBox ([see example]({% slug customrendering_combobox %}#toc-headers-and-footers)). */ 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` */ 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` */ 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` */ fillMode?: null | 'solid' | 'flat' | 'outline'; /** * Providing different rendering of the popup element based on the screen dimensions. */ adaptive?: boolean; /** * Specifies the text that is rendered as title in the adaptive popup. */ adaptiveTitle?: 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`. */ skipDisabledItems?: boolean; /** * Sets a custom prefix to the ComboBox component. */ prefix?: CustomComponent<any>; /** * Sets a custom suffix to the ComboBox component. */ 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. */ 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>; /** @hidden */ 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; allowCustom: boolean; clearButton: boolean; required: boolean; groupMode: string | undefined; isMultiColumn: boolean; skipDisabledItems: boolean; prefix: undefined; suffix: undefined; popupSettings: { height: string; }; validityStyles: boolean; }; /** @hidden */ readonly state: ComboBoxState; protected readonly base: DropDownBase; private _element; private get _inputId(); private _valueDuringOnChange; private _valueOnDidUpdate; private _suggested; private _skipBlur; private _input; private _adaptiveFilterInput; private itemHeight; private duplicates; private hasDuplicates; private navigationIndex; private observerResize?; private readonly showLicenseWatermark; private get document(); constructor(props: ComboBoxProps); /** @hidden */ focus: () => void; /** @hidden */ get element(): HTMLSpanElement | null; /** * The mobile mode of the ComboBox. */ get mobileMode(): boolean; /** * The value of the ComboBox. */ get value(): any; /** * The index of the selected item. */ get index(): number; /** * Gets the `name` property of the ComboBox. */ get name(): string | undefined; /** * Represents the validity state into which the component is set. */ get validity(): FormComponentValidity; protected get validityStyles(): boolean; /** @hidden */ protected get required(): boolean; /** * @hidden * Executed when no dataItemKey and textField are provided */ private checkForDuplicatePlainTextRecords; /** @hidden */ componentDidUpdate(prevProps: ComboBoxProps, prevState: ComboBoxState): void; /** @hidden */ componentDidMount(): void; /** @hidden */ componentWillUnmount(): void; /** @hidden */ render(): JSX_2.Element; /** @hidden */ handleItemSelect: (index: number, state: ComboInternalState) => void; /** @hidden */ onNavigate(state: InternalState, keyCode: number, skipItems?: number): void; private onPopupOpened; private componentRef; private getCurrentValueDisabledStatus; private toggleBtnClick; private applyValueOnEnter; private closeOpenedApplyStateNonMobileMode; private applyValueOnRejectSuggestions; private selectFocusedItem; private renderAdaptiveListContainer; private renderMobileListFilter; private renderListContainer; private renderList; private handleMobileFilterChange; private renderSearchBar; private onScroll; private handleItemClick; private handleBlur; private onInputClick; private onInputKeyDown; private inputOnChange; private clearValue; private clearButtonClick; private clearValueOnEnterOrEsc; private clearValueOnBlur; private clearValueOnToggleBtnClick; private triggerOnChange; private getFocusedIndex; private suggestValue; private applyState; private setValidity; private calculateMedia; } /** @hidden */ declare interface ComboInternalState extends InternalState { data: ComboBoxState; } /** * @hidden */ declare class DropDownBase { static basicPropTypes: { 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>; }; static propTypes: { 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<{ 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>; }; static defaultProps: { popupSettings: { height: string; }; required: boolean; validityStyles: boolean; }; popupWidth?: string; wrapper: HTMLSpanElement | null; list: HTMLUListElement | null; dirCalculated?: string; readonly vs: VirtualScroll; readonly navigation: Navigation; readonly listBoxId: string; readonly guid: string; readonly component: DropDownComponent; constructor(component: DropDownComponent); didUpdate(): void; didMount(): void; calculateDir(): void; calculatePopupWidth(): void; scrollToItem(itemIndex: number, vsEnabled?: boolean, once?: boolean): void; updateComponentArgs(args: any): void; handleItemClick: (index: number, event: React_2.MouseEvent<HTMLLIElement> | React_2.KeyboardEvent<HTMLInputElement>) => void; handleFocus: React_2.FocusEventHandler<HTMLSpanElement>; filterChanged: (text: string | null, state: InternalState) => void; initState(): InternalState; applyState(state: InternalState): void; togglePopup: (state: InternalState) => void; pageChange: (page: Page, syntheticEvent: React_2.SyntheticEvent<any>) => void; triggerOnPageChange(state: InternalState, skip: number, take: number): void; triggerPageChangeCornerItems(item: any, state: InternalState): void; scrollToVirtualItem: (virtual: VirtualizationSettings, selectedItemIndex: number) => void; /** * @hidden * Scrolls the data inside the popup of a selected DropDown by `one page`. The page size * depends on the height of the popup. * * @param {number} direction Defines the direction(Up/Down) in which the page will be moved * @param {number} filterHeight Defines the heigh of the filter element that appears in the DropDownList and DropDownTree. * This property is added for handling the filtering scenarios of the mentioned components. */ scrollPopupByPageSize: (direction: number) => void; renderScrollElement: () => false | JSX_2.Element; getPopupSettings(): DropDownsPopupSettings; getAdaptiveAnimation(): boolean; getGroupedDataModernMode(data: any[], groupField: string): any[]; resetGroupStickyHeader: (groupName: string, that: any) => void; } /** * @hidden */ declare interface DropDownComponent { props: DropDownComponentProps; setState: Function; forceUpdate: Function; state: DropDownStateBase; element: HTMLSpanElement | null; handleItemSelect: Function; value: any; } /** * @hidden */ declare interface DropDownComponentProps { data?: any[]; opened?: boolean; value?: any; disabled?: boolean; tabIndex?: number; dir?: string; defaultItem?: any; filterable?: boolean; filter?: string | null; textField?: string; dataItemKey?: string; popupSettings?: DropDownsPopupSettings; style?: React_2.CSSProperties; virtual?: VirtualizationSettings; onOpen?: (event: any) => void; onClose?: (event: any) => void; onFocus?: (even