/** * @license *------------------------------------------------------------------------------------------- * Copyright © 2026 Progress Software Corporation. All rights reserved. * Licensed under commercial license. See LICENSE.md in the package root for more information *------------------------------------------------------------------------------------------- */ import { default as PropTypes } from 'prop-types'; import { ComboBoxProps } from './ComboBoxProps.js'; import { DropDownStateBase, InternalState } from './../common/settings.js'; import { default as DropDownBase } from '../common/DropDownBase.js'; import { FormComponent, FormComponentValidity } from '@progress/kendo-react-common'; import * as React from 'react'; /** @hidden */ export interface ComboBoxState extends DropDownStateBase { filterText?: string; suggestedText?: string; focusedItem?: any; windowWidth?: number; } /** @hidden */ export interface ComboInternalState extends InternalState { data: ComboBoxState; } /** @hidden */ export declare class ComboBoxWithoutContext extends React.Component implements FormComponent { static displayName: string; /** @hidden */ static propTypes: { size: PropTypes.Requireable<"small" | "medium" | "large" | undefined>; rounded: PropTypes.Requireable<"small" | "none" | "medium" | "large" | "full" | undefined>; fillMode: PropTypes.Requireable<"flat" | "solid" | "outline" | undefined>; dataItemKey: PropTypes.Requireable; groupField: PropTypes.Requireable; isMultiColumn: PropTypes.Requireable; suggest: PropTypes.Requireable; placeholder: PropTypes.Requireable; title: PropTypes.Requireable; allowCustom: PropTypes.Requireable; ignoreCase: PropTypes.Requireable; clearButton: PropTypes.Requireable; iconClassName: PropTypes.Requireable; svgIcon: PropTypes.Requireable; content: PropTypes.Validator; viewBox: PropTypes.Validator; }>>; validationMessage: PropTypes.Requireable; required: PropTypes.Requireable; id: PropTypes.Requireable; ariaLabelledBy: PropTypes.Requireable; ariaLabel: PropTypes.Requireable; ariaDescribedBy: PropTypes.Requireable; list: PropTypes.Requireable; valueRender: PropTypes.Requireable<(...args: any[]) => any>; skipDisabledItems: PropTypes.Requireable; inputAttributes: PropTypes.Requireable; value: PropTypes.Requireable; defaultValue: PropTypes.Requireable; filterable: PropTypes.Requireable; filter: PropTypes.Requireable; virtual: PropTypes.Requireable; skip: PropTypes.Validator; total: PropTypes.Validator; }>>; onFilterChange: PropTypes.Requireable<(...args: any[]) => any>; onPageChange: PropTypes.Requireable<(...args: any[]) => any>; opened: PropTypes.Requireable; disabled: PropTypes.Requireable; dir: PropTypes.Requireable; tabIndex: PropTypes.Requireable; accessKey: PropTypes.Requireable; data: PropTypes.Requireable; textField: PropTypes.Requireable; className: PropTypes.Requireable; label: PropTypes.Requireable; loading: PropTypes.Requireable; popupSettings: PropTypes.Requireable; closeDuration: PropTypes.Requireable; }> | null | undefined>>; popupClass: PropTypes.Requireable; className: PropTypes.Requireable; appendTo: PropTypes.Requireable; width: PropTypes.Requireable>; height: PropTypes.Requireable>; }>>; onOpen: PropTypes.Requireable<(...args: any[]) => any>; onClose: PropTypes.Requireable<(...args: any[]) => any>; onFocus: PropTypes.Requireable<(...args: any[]) => any>; onBlur: PropTypes.Requireable<(...args: any[]) => any>; onChange: PropTypes.Requireable<(...args: any[]) => any>; itemRender: PropTypes.Requireable<(...args: any[]) => any>; listNoDataRender: PropTypes.Requireable<(...args: any[]) => any>; focusedItemIndex: PropTypes.Requireable<(...args: any[]) => any>; header: PropTypes.Requireable; footer: PropTypes.Requireable; }; /** @hidden */ static defaultProps: { size: "small" | "medium" | "large" | undefined; rounded: "small" | "none" | "medium" | "large" | "full" | undefined; fillMode: "flat" | "solid" | "outline" | undefined; allowCustom: boolean; ignoreCase: boolean; clearButton: boolean; required: boolean; 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 _skipFocus; private itemHeight; private duplicates; private hasDuplicates; private navigationIndex; private observerResize?; protected scrollToFocused: boolean; private readonly showLicenseWatermark; private readonly licenseMessage?; private KendoPasteSubscription?; 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; private readonly handleKendoPasteValue; /** @hidden */ render(): React.JSX.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 listContainerContent; 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; private handleFocus; } /** * Represents the PropsContext of the `ComboBox` component. * Used for global configuration of all `ComboBox` instances. * * For more information, refer to the [Dropdowns Props Context](https://www.telerik.com/kendo-react-ui/components/dropdowns/props-context) article. */ export declare const ComboBoxPropsContext: React.Context<(p: ComboBoxProps) => ComboBoxProps>; /** * Represent the `ref` of the ComboBox component. */ export interface ComboBoxHandle extends Pick { /** * The ComboBox element. */ element: HTMLSpanElement | null; /** * The index of the selected item. */ index: number; /** * Gets the mobile mode of the ComboBox component. */ mobileMode: boolean; /** * 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; } /** @hidden */ export type ComboBox = ComboBoxHandle; /** * Represents the [KendoReact ComboBox component](https://www.telerik.com/kendo-react-ui/components/dropdowns/combobox). * * Accepts properties of type [ComboBoxProps](https://www.telerik.com/kendo-react-ui/components/dropdowns/api/comboboxprops). * Obtaining the `ref` returns an object of type [ComboBoxHandle](https://www.telerik.com/kendo-react-ui/components/dropdowns/api/comboboxhandle). * * @example * ```jsx * const App = () => { * const combobox = React.useRef(null); * return ( *
* * *
* ); * } * ``` */ export declare const ComboBox: React.ForwardRefExoticComponent>;