/** * @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>; 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 _skipFocus; 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.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; } /** @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.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?: (event: any) => void; onBlur?: (event: any) => void; onChange?: (event: any) => void; onFilterChange?: (event: any) => void; onPageChange?: (event: any) => void; itemRender?: (li: React_2.ReactElement<HTMLLIElement>, itemProps: ListItemProps) => React_2.ReactNode; listNoDataRender?: (element: React_2.ReactElement<HTMLDivElement>) => React_2.ReactNode; header?: React_2.ReactNode; footer?: React_2.ReactNode; id?: string; } /** * @hidden */ declare interface DropdownEvent<T> { /** * A native DOM event. */ nativeEvent: Event; /** * A React [`SyntheticEvent`](https://react.dev/learn/responding-to-events). */ syntheticEvent: React.SyntheticEvent<HTMLElement>; /** * An event target. */ target: T; } /** * Represents the [KendoReact DropDownList component]({% slug overview_dropdownlist %}). * * Accepts properties of type [DropDownListProps]({% slug api_dropdowns_dropdownlistprops %}). * Obtaining the `ref` returns an object of type [DropDownListHandle]({% slug api_dropdowns_dropdownlisthandle %}). * */ export declare const DropDownList: React_2.ForwardRefExoticComponent<DropDownListProps & React_2.RefAttributes<DropDownListHandle>>; /** * Represents the object of the `blur` DropDownList event. */ export declare interface DropDownListBlurEvent extends BlurEvent<DropDownListHandle> { } /** * Represents the object of the `change` DropDownList event. */ export declare interface DropDownListChangeEvent extends ChangeEvent<DropDownListHandle> { } /** * Represents the object of the `close` DropDownList event. */ export declare interface DropDownListCloseEvent extends CloseEvent_2<DropDownListHandle> { } /** * The default props of the DropDownList component. */ export declare const dropDownListDefaultProps: { required: boolean; size: "small" | "large" | "medium" | null | undefined; rounded: "small" | "large" | "medium" | "full" | null | undefined; fillMode: "flat" | "solid" | "outline" | null | undefined; groupMode: string | undefined; popupSettings: { height: string; }; validityStyles: boolean; delay: number; tabIndex: number; ignoreCase: boolean; }; /** * Represents the object of the `filterChange` DropDownList event. */ export declare interface DropDownListFilterChangeEvent extends FilterChangeEvent<DropDownListHandle> { } /** * Represents the object of the `focus` DropDownList event. */ export declare interface DropDownListFocusEvent extends FocusEvent_2<DropDownListHandle> { } /** * Represent the `ref` of the DropDownList component. */ export declare interface DropDownListHandle { /** * The element of the DropDownList component. */ element: HTMLSpanElement | null; /** * The index of the selected item. */ index: number; /** * Gets the `name` property of the DropDownList. */ name: string | undefined; /** * Represents the validity state into which the DropDownList is set. */ validity: FormComponentValidity; /** * The value of the DropDownList. */ value: any; /** * The focused state of the DropDownList. */ focused: boolean; /** * The opened state of the DropDownList. */ opened: boolean; /** * The props of the DropDownList component */ props: Readonly<DropDownListProps>; /** * Focuses the wrapper of the DropDownList component. */ focus: () => void; /** * Toggles the popup of the DropDownList component. */ togglePopup: () => void; } /** * Represents the object of the `open` DropDownList event. */ export declare interface DropDownListOpenEvent extends OpenEvent<DropDownListHandle> { } /** * Represents the object of the `pageChange` DropDownList event. */ export declare interface DropDownListPageChangeEvent extends PageChangeEvent<DropDownListHandle> { } /** * Represents the props of the [KendoReact DropDownList component]({% slug overview_dropdownlist %}). */ export declare interface DropDownListProps extends FormComponentProps { /** * Sets the data of the DropDownList ([see example]({% slug binding_dropdownlist %})). * * @example * ```jsx * <DropDownList data={['Item1', 'Item2', 'Item3']} /> * ``` */ data?: any[]; /** * Sets the text of the default empty item. The type of the defined value has to match the data type. * * @example * ```jsx * <DropDownList defaultItem="Select an item" /> * ``` */ defaultItem?: any; /** * Sets the delay before an item search is performed. When filtration is disabled, use this option. * * @example * ```jsx * <DropDownList delay={300} /> * ``` */ delay?: number; /** * Enables a case-insensitive search. When filtering is disabled, use this option. * * @example * ```jsx * <DropDownList ignoreCase={true} /> * ``` */ ignoreCase?: boolean; /** * Sets the opened and closed state of the DropDownList. * * @example * ```jsx * <DropDownList opened={true} /> * ``` */ opened?: boolean; /** * The styles that are applied to the DropDownList. * * @example * ```jsx * <DropDownList style={{ width: '200px' }} /> * ``` */ style?: React.CSSProperties; /** * Sets the value of the DropDownList ([see example]({% slug binding_dropdownlist %})). It can either be of the primitive (string, numbers) or of the complex (objects) type. * * @example * ```jsx * <DropDownList value="Item1" /> * ``` */ value?: any; /** * Sets the default value of the DropDownList ([see example]({% slug defaultitem_dropdownlist %})). Similar to the native `select` HTML element. * * @example * ```jsx * <DropDownList defaultValue="Item1" /> * ``` */ defaultValue?: any; /** * Sets additional classes to the DropDownList. * * @example * ```jsx * <DropDownList className="custom-class" /> * ``` */ className?: string; /** * Sets CSS classes to the expand `icon` DOM element. * * @example * ```jsx * <DropDownList iconClassName="custom-icon-class" /> * ``` */ iconClassName?: string; /** * Sets the specified SVG icon. * * @example * ```jsx * <DropDownList svgIcon={{ name: 'custom-icon' }} /> * ``` */ svgIcon?: SVGIcon; /** * Sets the title attribute to the DropDownList DOM element. * * @example * ```jsx * <DropDownList title="Dropdown Title" /> * ``` */ title?: string; /** * Sets the disabled state of the DropDownList. * * @example * ```jsx * <DropDownList disabled={true} /> * ``` */ disabled?: boolean; /** * Represents the `dir` HTML attribute. * * @example * ```jsx * <DropDownList dir="rtl" /> * ``` */ dir?: string; /** * Enables the filtering functionality of the DropDownList ([more information and examples]({% slug filtering_dropdownlist %})). * * @example * ```jsx * <DropDownList filterable={true} /> * ``` */ filterable?: boolean; /** * Sets the value of filtering input. Useful for making the filtering input a [controlled component](https://react.dev/learn/sharing-state-between-components#controlled-and-uncontrolled-components). * * @example * ```jsx * <DropDownList filter="search text" /> * ``` */ filter?: string; /** * Sets the loading state of the DropDownList. * * @example * ```jsx * <DropDownList loading={true} /> * ``` */ loading?: boolean; /** * Specifies the `tabIndex` of the DropDownList. * * @example * ```jsx * <DropDownList tabIndex={0} /> * ``` */ tabIndex?: number; /** * Specifies the `accessKey` of the DropDownList. * * @example * ```jsx * <DropDownList accessKey="d" /> * ``` */ accessKey?: string; /** * Sets the data item field that represents the item text ([see example]({% slug defaultitem_dropdownlist %})). If the data contains only primitive values, do not define it. * * @example * ```jsx * <DropDownList textField="name" /> * ``` */ textField?: string; /** * Sets the key for comparing the data items of the DropDownList. If `dataItemKey` is not set, the DropDownList compares the items by reference ([see example]({% slug binding_dropdownlist %}#toc-datasets-of-objects)). * * @example * ```jsx * <DropDownList dataItemKey="id" /> * ``` */ dataItemKey?: string; /** * Represents a callback function, which returns the value for submitting. The returned value will be rendered in an `option` of a hidden [`select`](https://react.dev/reference/react-dom/components/select) element. * * @example * ```jsx * class App extends React.Component { * render() { * return ( * <form> * <DropDownList * data={[ { text: "Austria", id: 1 } , { text: "Belarus", id: 2 } ]} * valueMap={value => value && value.id} * /> * <button type="submit">Submit</button> * </form> * ); * } * } * ReactDOM.render(<App />, document.querySelector('my-app')); * ``` */ valueMap?: (value: any) => any; /** * Renders a floating label for the DropDownList. * * @example * ```jsx * <DropDownList label="Dropdown Label" /> * ``` */ label?: string; /** * Specifies the id of the component. * * @example * ```jsx * <DropDownList id="dropdown-id" /> * ``` */ 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 * <DropDownList ariaDescribedBy="error-message-id" /> * ``` */ ariaDescribedBy?: string; /** * Identifies the element(s) which will label the component. * * @example * ```jsx * <DropDownList ariaLabelledBy="label-id" /> * ``` */ ariaLabelledBy?: string; /** * The accessible label of the component. By default is set to value of `label` prop. * * @example * ```jsx * <DropDownList ariaLabel="Accessible Label" /> * ``` */ ariaLabel?: string; /** * Configures the popup of the DropDownList. * * @example * ```jsx * <DropDownList popupSettings={{ animate: true }} /> * ``` */ popupSettings?: DropDownsPopupSettings; /** * Configures the virtual scrolling of the DropDownList ([see example]({% slug virtualization_dropdownlist %})). * * @example * ```jsx * <DropDownList virtual={{ pageSize: 20 }} /> * ``` */ virtual?: VirtualizationSettings; /** * If set, the DropDownList 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)); * }; * * <DropDownList focusedItemIndex={focusedItemIndex} /> * ``` */ focusedItemIndex?: (data: any, inputText: string, textField?: string) => number; /** * Fires each time the popup of the DropDownList is about to open. * * @example * ```jsx * <DropDownList onOpen={(event) => console.log('Popup opened')} /> * ``` */ onOpen?: (event: DropDownListOpenEvent) => void; /** * Fires each time the popup of the DropDownList is about to close. * * @example * ```jsx * <DropDownList onClose={(event) => console.log('Popup closed')} /> * ``` */ onClose?: (event: DropDownListCloseEvent) => void; /** * Fires each time the user focuses the DropDownList. * * @example * ```jsx * <DropDownList onFocus={(event) => console.log('Focused')} /> * ``` */ onFocus?: (event: DropDownListFocusEvent) => void; /** * Fires each time the DropDownList gets blurred. * * @example * ```jsx * <DropDownList onBlur={(event) => console.log('Blurred')} /> * ``` */ onBlur?: (event: DropDownListBlurEvent) => void; /** * Fires each time the value of the DropDownList is about to change ([see examples]({% slug binding_dropdownlist %})). * * @example * ```jsx * <DropDownList onChange={(event) => console.log('Value changed')} /> * ``` */ onChange?: (event: DropDownListChangeEvent) => void; /** * Fires each time the user types in the filter input. You can filter the source based on the passed filtration value. * * @example * ```jsx * <DropDownList onFilterChange={(event) => console.log('Filter changed')} /> * ``` */ onFilterChange?: (event: DropDownListFilterChangeEvent) => void; /** * Fires when both the virtual scrolling of the DropDownList is enabled and the component requires data for another page ([see example]({% slug virtualization_dropdownlist %})). * * @example * ```jsx * <DropDownList onPageChange={(event) => console.log('Page changed')} /> * ``` */ onPageChange?: (event: DropDownListPageChangeEvent) => void; /** * Fires when a DropDownList item is about to be rendered ([see example]({% slug customrendering_dropdownlist %}#toc-items)). Used to override the default appearance of the list items. * * @example * ```jsx * <DropDownList itemRender={(li, itemProps) => <li>{itemProps.dataItem}</li>} /> * ``` */ itemRender?: (li: React.ReactElement<HTMLLIElement>, itemProps: ListItemProps) => React.ReactNode; /** * Fires when the element which renders the value is about to be rendered ([see example]({% slug customrendering_dropdownlist %}#toc-values)). Used to override the default appearance of the element. * * @example * ```jsx * <DropDownList valueRender={(element, value) => <span>{value}</span>} /> * ``` */ valueRender?: (element: React.ReactElement<HTMLSpanElement>, value: any) => React.ReactNode; /** * Fires when the element which indicates no data in the popup is about to be rendered ([see example]({% slug customrendering_dropdownlist %}#toc-no-data)). Used to override the default appearance of the element. * * @example * ```jsx * <DropDownList listNoDataRender={(element) => <div>No data available</div>} /> * ``` */ listNoDataRender?: (element: React.ReactElement<HTMLDivElement>) => React.ReactNode; /** * Sets the header component of the DropDownList ([see example]({% slug customrendering_dropdownlist %}#toc-headers-and-footers)). * * @example * ```jsx * <DropDownList header={<div>Header Content</div>} /> * ``` */ header?: React.ReactNode; /** * Sets the footer component of the DropDownList ([see example]({% slug customrendering_dropdownlist %}#toc-headers-and-footers)). * * @example * ```jsx * <DropDownList footer={<div>Footer Content</div>} /> * ``` */ footer?: React.ReactNode; /** * Specifies the `name` property of the `select` DOM element. * * @example * ```jsx * <DropDownList name="dropdown-name" /> * ``` */ name?: string; /** * If set to `false`, the DropDownList will not navigate over its data through left and right keys. * Useful when the DropDownList is placed inside a toolbar which needs to handle left and right keys. * * @example * ```jsx * <DropDownList leftRightKeysNavigation={false} /> * ``` */ leftRightKeysNavigation?: boolean; /** * Configures the `size` of the DropDownList. * * The available options are: * - small * - medium * - large * - null—Does not set a size `className`. * * @default `medium` * * @example * ```jsx * <DropDownList size="small" /> * ``` */ size?: null | 'small' | 'medium' | 'large'; /** * Configures the `roundness` of the DropDownList. * * The available options are: * - small * - medium * - large * - full * - null—Does not set a rounded `className`. * * @default `medium` * * @example * ```jsx * <DropDownList rounded="large" /> * ``` */ rounded?: null | 'small' | 'medium' | 'large' | 'full'; /** * Configures the `fillMode` of the DropDownList. * * The available options are: * - solid * - flat * - outline * - null—Does not set a fillMode `className`. * * @default `solid` * * @example * ```jsx * <DropDownList fillMode="flat" /> * ``` */ fillMode?: null | 'solid' | 'flat' | 'outline'; /** * Providing different rendering of the popup element based on the screen dimensions. * * @default `false` * * @example * ```jsx * <DropDownList 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 * <DropDownList 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 * <DropDownList adaptiveSubtitle="Adaptive Popup Subtitle" /> */ adaptiveSubtitle?: string; /** * Sets the data item field that represents the start of a group. Applicable to objects data. * * @example * ```jsx * <DropDownList groupField="category" /> * ``` */ groupField?: string; /** * Fires when a DropDownList's group header item is about to be rendered. Used to override the default appearance of the group's headers. * * @example * ```jsx * <DropDownList groupHeaderItemRender={(li, itemProps) => <li>{itemProps.dataItem}</li>} /> * ``` */ groupHeaderItemRender?: (li: React.ReactElement<HTMLLIElement>, itemProps: ListGroupItemProps) => React.ReactNode; /** * Fires when a DropDownList's 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 * <DropDownList groupStickyHeaderItemRender={(div, stickyHeaderProps) => <div>{stickyHeaderProps.dataItem}</div>} /> * ``` */ groupStickyHeaderItemRender?: (div: React.ReactElement<HTMLDivElement>, stickyHeaderProps: GroupStickyHeaderProps) => React.ReactNode; /** * @hidden */ list?: any; /** * @hidden */ groupMode?: string; /** * Defines if DropDownList's disabled items will be skipped or focused when navigating through the list of items using a keyboard. Defaults to `true`. * * @example * ```jsx * <DropDownList skipDisabledItems={false} /> * ``` */ skipDisabledItems?: boolean; /** * @hidden */ unstyled?: DropDownsClassStructure; } /** * Represents the PropsContext of the `DropDownList` component. * Used for global configuration of all `DropDownList` instances. * * For more information, refer to the [Dropdowns Props Context]({% slug props-context_dropdowns %}) article. */ export declare const DropDownListPropsContext: React_2.Context<(p: DropDownListProps) => DropDownListProps>; /** * @hidden */ export declare const dropdownsMessages: { "dropdowns.clear": string; "dropdowns.nodata": string; "dropdowns.comboArrowBtnAriaLabelExpand": string; "dropdowns.comboArrowBtnAriaLabelCollapse": string; "dropdowns.dropDownListArrowBtnAriaLabel": string; "dropdowns.dropDownListAdaptiveFilterPlaceholder": string; "dropdowns.apply": string; "dropdowns.cancel": string; }; /** * The settings of the popup container. */ export declare interface DropDownsPopupSettings extends PopupProps { /** * Specifies a list of CSS classes that are used for styling the popup inner element. */ popupClass?: string; /** * Sets the width of the popup container. By default, the width of the host element is used. */ width?: string | number; /** * Sets the height of the DOM element inside the DropDowns' popup that contains the data items of each component. This height doesn't include the header and footer. */ height?: string | number; /** * Defines the container to which the Popup will be appended. * Defaults to [`body`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/body). * * If set to `null` the Popup will be rendered without React Portal. */ appendTo?: HTMLElement | null; } /** * @hidden */ declare interface DropDownStateBase { /** * Input element text of the Component. */ text?: string; value?: any; focused?: boolean; opened?: boolean; group?: string; } /** * Represents the DropDownTree component. * * Accepts properties of type [DropDownTreeProps]({% slug api_dropdowns_dropdowntreeprops %}). * Obtaining the `ref` returns an object of type [DropDownTreeHandle]({% slug api_dropdowns_dropdowntreehandle %}). * * @example * ```jsx * const selectField = "selected"; * const expandField = "expanded"; * const dataItemKey = "id"; * const textField = "text"; * const subItemsField = "items"; * const fields = { * selectField, * expandField, * dataItemKey, * subItemsField, * }; * const App = () => { * const [value, setValue] = React.useState(null); * const [expanded, setExpanded] = React.useState([data[0][dataItemKey]]); * const onChange = (event) => setValue(event.value); * const onExpandChange = React.useCallback( * (event) => setExpanded(expandedState(event.item, dataItemKey, expanded)), * [expanded] * ); * const treeData = React.useMemo( * () => * processTreeData( * data, * { * expanded, * value, * }, * fields * ), * [expanded, value] * ); * * return ( * <DropDownTree * style={{ * width: '300px', * }} * placeholder="Please select ..." * data={treeData} * value={value} * onChange={onChange} * textField={textField} * dataItemKey={dataItemKey} * selectField={selectField} * expandField={expandField} * onExpandChange={onExpandChange} * /> * ); * }; * ReactDOM.render(<App />, document.querySelector('my-app')); * ``` */ export declare const DropDownTree: React_2.ForwardRefExoticComponent<DropDownTreeProps & React_2.RefAttributes<DropDownTreeHandle | null>>; /** * Represents the object of the `onBlur` DropDownTree event. */ export declare interface DropDownTreeBlurEvent extends BlurEvent<DropDownTreeHandle> { } /** * Represents the object of the `onChange` DropDownTree event. */ export declare interface DropDownTreeChangeEvent extends ChangeEvent<DropDownTreeHandle> { level: number[]; } /** * Represents the object of the `onClose` DropDownTree event. */ export declare interface DropDownTreeCloseEvent extends CloseEvent_2<DropDownTreeHandle> { } /** * Represents the object of the `onExpandChange` DropDownTree event. */ export declare interface DropDownTreeExpandEvent extends DropdownEvent<DropDownTreeHandle> { item: any; level: number[]; } /** * Represents the object of the `onFilterChange` DropDownTree event. */ export declare interface DropDownTreeFilterChangeEvent extends FilterChangeEvent<DropDownTreeHandle> { } /** * Represents the object of the `onFocus` DropDownTree event. */ export declare interface DropDownTreeFocusEvent extends FocusEvent_2<DropDownTreeHandle> { } /** * Represents the Object which is passed to the * [`ref`](https://react.dev/learn/referencing-values-with-refs#refs-and-the-dom) callback of the DropDownTree component. */ export declare interface DropDownTreeHandle { /** * The current element or `null` if there is no one. */ element: HTMLElement | null; /** * The props of the DropDownTree component. */ props: DropDownTreeProps; /** * The focus function. */ focus: () => void; } /** * Represents the object of the `onOpen` DropDownTree event. */ export declare interface DropDownTreeOpenEvent extends OpenEvent<DropDownTreeHandle> { } /** * Represents the props of the [KendoReact DropDownTree component]({% slug overview_dropdowntree %}). */ export declare interface DropDownTreeProps extends FormComponentProps { /** * Sets the data of the DropDownTree ([see example]({% slug overview_dropdowntree %})). * * @example * ```jsx * <DropDownTree data={[{ text: 'Parent', items: [{ text: 'Child' }] }]} /> * ``` */ data?: any[]; /** * Sets the opened state of the DropDownTree. * * @example * ```jsx * <DropDownTree opened={true} /> * ``` */ opened?: boolean; /** * The styles that are applied to the DropDownTree. * * @example * ```jsx * <DropDownTree style={{ width: '300px' }} /> * ``` */ style?: React.CSSProperties; /** * Sets the value of the DropDownTree ([see example]({% slug overview_dropdowntree %})). * It can be an object from the data-tree. * * @example * ```jsx * <DropDownTree value={{ text: 'Parent' }} /> * ``` */ value?: any; /** * The hint that is displayed when the DropDownTree is empty. * * @example * ```jsx * <DropDownTree placeholder="Select an item" /> * ``` */ placeholder?: string; /** * Sets the key for comparing the data items of the DropDownTree ([see example]({% slug overview_dropdowntree %})). * If `dataItemKey` is not set, the DropDownTree compares the items by reference. * * @example * ```jsx * <DropDownTree dataItemKey="id" /> * ``` */ dataItemKey: string; /** * Sets additional classes to the DropDownTree. * * @example * ```jsx * <DropDownTree className="custom-class" /> * ``` */ className?: string; /** * Sets the disabled state of the DropDownTree. * * @example * ```jsx * <DropDownTree disabled={true} /> * ``` */ disabled?: boolean; /** * Represents the `dir` HTML attribute. * * @example * ```jsx * <DropDownTree dir="rtl" /> * ``` */ dir?: string; /** * Renders a floating label for the DropDownTree. * * @example * ```jsx * <DropDownTree label="Select an item" /> * ``` */ label?: string; /** * Specifies the id of the component. * * @example * ```jsx * <DropDownTree id="dropdown-tree" /> * ``` */ 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 * <DropDownTree ariaDescribedBy="description" /> * ``` */ ariaDescribedBy?: string; /** * Identifies the element(s) which will label the component. * * @example * ```jsx * <DropDownTree ariaLabelledBy="label" /> * ``` */ ariaLabelledBy?: string; /** * Enables the filtering functionality of the DropDownTree ([more information and examples]({% slug filtering_dropdowntree %})). * * @example * ```jsx * <DropDownTree filterable={true} /> * ``` */ filterable?: boolean; /** * Sets the value of filtering input. * Useful for making the filtering input a [controlled component](https://react.dev/learn/sharing-state-between-components#controlled-and-uncontrolled-components). * * @example * ```jsx * <DropDownTree filter="search text" /> * ``` */ filter?: string; /** * Sets the loading state of the DropDownTree ([see example]({% slug filtering_dropdowntree %}#toc-visualize-filtering)). * * @example * ```jsx * <DropDownTree loading={true} /> * ``` */ loading?: boolean; /** * Specifies the `tabIndex` of the DropDownTree. * * @example * ```jsx * <DropDownTree tabIndex={0} /> * ``` */ tabIndex?: number; /** * Specifies the `accessKey` of the DropDownTree. * * @example * ```jsx * <DropDownTree accessKey="k" /> * ``` */ accessKey?: string; /** * Sets the data item field that represents the item text ([see example]({% slug overview_dropdowntree %})). * * @example * ```jsx * <DropDownTree textField="name" /> * ``` */ textField: string; /** * Specifies the name of the field which will provide a Boolean representation of the selected state of the item. * * @example * ```jsx * <DropDownTree selectField="selected" /> * ``` */ selectField?: string; /** * Specifies the name of the field which will provide a Boolean representation of the expanded state of the item. * * @example * ```jsx * <DropDownTree expandField="expanded" /> * ``` */ expandField?: string; /** * Specifies the name of the field which will provide an array representation of the item subitems. * Defaults to 'items'. * * @example * ```jsx * <DropDownTree subItemsField="children" /> * ``` */ subItemsField?: string; /** * Configures the popup of the DropDownTree. * * @example * ```jsx * <DropDownTree popupSettings={{ animate: false }} /> * ``` */ popupSettings?: DropDownsPopupSettings; /** * Represents a callback function, which returns the value for submitting. The returned value will be rendered in an `option` of a hidden [`select`](https://react.dev/reference/react-dom/components/select) element. * * @example * ```jsx * <DropDownTree valueMap={value => value && value.id} /> * ``` */ valueMap?: (value: any) => any; /** * Fires each time the popup of the DropDownTree is about to open. * * @example * ```jsx * <DropDownTree onOpen={(event) => console.log(event)} /> * ``` */ onOpen?: (event: DropDownTreeOpenEvent) => void; /** * Fires each time the popup of the DropDownTree is about to close. * * @example * ```jsx * <DropDownTree onClose={(event) => console.log(event)} /> * ``` */ onClose?: (event: DropDownTreeCloseEvent) => void; /** * Fires each time the user focuses the DropDownTree. * * @example * ```jsx * <DropDownTree onFocus={(event) => console.log(event)} /> * ``` */ onFocus?: (event: DropDownTreeFocusEvent) => void; /** * Fires each time the DropDownTree gets blurred. * * @example * ```jsx * <DropDownTree onBlur={(event) => console.log(event)} /> * ``` */ onBlur?: (event: DropDownTreeBlurEvent) => void; /** * Fires each time the value of the DropDownTree is about to change ([see examples]({% slug overview_dropdowntree %})). * * @example * ```jsx * <DropDownTree onChange={(event) => console.log(event)} /> * ``` */ onChange?: (event: DropDownTreeChangeEvent) => void; /** * Fires each time the user types in the filter input * ([see example]({% slug filtering_dropdowntree %}#toc-basic-configuration)). * You can filter the source based on the passed filtration value. * * @example * ```jsx * <DropDownTree onFilterChange={(event) => console.log(event)} /> * ``` */ onFilterChange?: (event: DropDownTreeFilterChangeEvent) => void; /** * Fires when the expanding or collapsing of an item is requested ([see examples]({% slug overview_dropdowntree %})). * * @example * ```jsx * <DropDownTree onExpandChange={(event) => console.log(event)} /> * ``` */ onExpandChange?: (event: any) => void; /** * Defines the component that will be used for rendering each of the DropDownTree items * ([see example]({% slug customrendering_dropdowntree %}#toc-items-and-value-element)). * * @example * ```jsx * <DropDownTree item={(props) => <CustomItem {...props} />} /> * ``` */ item?: React.ComponentType<ItemProps>; /** * Defines the component that will be used for rendering the selected value * ([see example]({% slug customrendering_dropdowntree %}#toc-items-and-value-element)). * * @example * ```jsx * <DropDownTree valueHolder={(props) => <CustomValueHolder {...props} />} /> * ``` */ valueHolder?: React.ComponentType<ValueHolderProps>; /** * Defines the component that will be rendered in the DropDownTree popup when no data is available * ([see example]({% slug customrendering_dropdowntree %}#toc-no-data)). * * @example * ```jsx * <DropDownTree listNoData={() => <div>No data available</div>} /> * ``` */ listNoData?: React.ComponentType<ListNoDataProps>; /** * Configures the `size` of the DropDownTree. * * The available options are: * - small * - medium * - large * - null—Does not set a size `className`. * * @default `medium` * * @example * ```jsx * <DropDownTree size="large" /> * ``` */ size?: null | 'small' | 'medium' | 'large'; /** * Configures the `roundness` of the DropDownTree. * * The available options are: * - small * - medium * - large * - full * - null—Does not set a rounded `className`. * * @default `medium` * * @example * ```jsx * <DropDownTree rounded="full" /> * ``` */ rounded?: null | 'small' | 'medium' | 'large' | 'full'; /** * Configures the `fillMode` of the DropDownTree. * * The available options are: * - solid * - flat * - outline * - null—Does not set a fillMode `className`. * * @default `solid` * * @example * ```jsx * <DropDownTree fillMode="flat" /> * ``` */ fillMode?: null | 'solid' | 'flat' | 'outline'; /** * Providing different rendering of the popup element based on the screen dimensions. * * @default `false` * * @example * ```jsx * <DropDownTree 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 * <DropDownTree 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 * <DropDownTree adaptiveSubtitle="Adaptive Popup Subtitle" /> * ``` */ adaptiveSubtitle?: string; } /** * Represents the PropsContext of the `DropDownTree` component. * Used for global configuration of all `DropDownTree` instances. * * For more information, refer to the [Dropdowns Props Context]({% slug props-context_dropdowns %}) article. */ export declare const DropDownTreePropsContext: React_2.Context<(p: DropDownTreeProps) => DropDownTreeProps>; /** * @hidden */ declare interface EventData { type?: string; filter?: FilterDescriptor; page?: Page; suggestion?: Suggestion; } /** * @hidden */ declare interface FilterChangeEvent<T> extends DropdownEvent<T> { /** * A React [`SyntheticEvent`](https://react.dev/learn/responding-to-events). */ syntheticEvent: React.ChangeEvent<HTMLInputElement>; /** * The default `FilterDescriptor` object. */ filter: FilterDescriptor; } /** * A basic filter expression. Usually a part of [`CompositeFilterDescriptor`]({% slug api_kendo-data-query_compositefilterdescriptor %}). * * For more information, refer to the [`filterBy`]({% slug api_kendo-data-query_filterby %}) method. */ declare interface FilterDescriptor { /** * The field of the data item to which the filter operator is applied. */ field?: string | Function; /** * The filter operator (comparison). * * The supported operators are: * * `"eq"` (equal to) * * `"neq"` (not equal to) * * `"isnull"` (is equal to null) * * `"isnotnull"` (is not equal to null) * * `"lt"` (less than) * * `"lte"` (less than or equal to) * * `"gt"` (greater than) * * `"gte"` (greater than or equal to) * * The following operators are supported for string fields only: * * `"startswith"` * * `"endswith"` * * `"contains"` * * `"doesnotcontain"` * * `"isempty"` * * `"isnotempty"` */ operator: string | Function; /** * The value to which the field is compared. Has to be of the same type as the field. */ value?: any; /** * Determines if the string comparison is case-insensitive. */ ignoreCase?: boolean; } /** * Find item in the data by field and value. */ export declare const findByFieldValue: (data: any[], field: string, value: string | number | null) => any; /** * @hidden */ declare interface FocusEvent_2<T> extends DropdownEvent<T> { } export { FormComponentValidity } /** * Get the value of the item by its field. */ export declare const getItemValue: (item: any, field?: string) => any; /** * Get MultiSelectTree new value from the component `onChange` event. * * @param {any[]} data * @param {object} options * @returns {any[]} */ export declare const getMultiSelectTreeValue: (data: any[], options: { subItemsField?: string; dataItemKey: string; items: any; value: Array<any>; operation: MultiSelectTreeChangeEventOperation; }) => any[]; /** @hidden */ export declare const getValueMap: (value: any[], idGetter: any) => any; /** * Represents the props of the GroupStickyHeader component. */ export declare interface GroupStickyHeaderProps { /** * The group that will be rendered. */ group?: string; /** * @hidden */ groupMode?: string; /** * 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. */ render?: (div: React_2.ReactElement<HTMLDivElement>, itemProps: GroupStickyHeaderProps) => React_2.ReactNode; } /** * @hidden */ declare interface InternalState { data: DropDownStateBase; events: Array<EventData>; syntheticEvent: React.MouseEvent<HTMLElement> | React.FocusEvent<HTMLElement> | React.ChangeEvent<HTMLInputElement> | React.FormEvent<HTMLInputElement> | React.KeyboardEvent<HTMLElement> | undefined; } /** * The props of component that will be used for rendering each of the DropDownTree items * ([see example]({% slug customrendering_dropdowntree %}#toc-items-and-value-element)). */ export declare interface ItemProps extends ItemRenderProps { } /** * @hidden */ export declare const List: (props: ListProps) => string | number | bigint | boolean | Iterable<React_2.ReactNode> | Promise<string | number | bigint | boolean | React_2.ReactPortal | React_2.ReactElement<unknown, string | React_2.JSXElementConstructor<any>> | Iterable<React_2.ReactNode> | null | undefined> | JSX.Element | null | undefined; /** * @hidden */ export declare const ListContainer: (props: ListContainerProps) => JSX.Element; /** * @hidden */ declare interface ListContainerProps { width?: string | number; dir?: string; popupSettings?: PopupProps; itemsCount?: number[]; children?: React_2.ReactNode; } /** * @hidden */ export declare const ListFilter: React_2.ForwardRefExoticComponent<ListFilterProps & React_2.RefAttributes<TextBoxHandle | null>>; /** * @hidden */ declare interface ListFilterProps { value?: string | number | readonly string[] | undefined; tabIndex?: number; onChange?: (event: TextBoxChangeEvent) => void; onKeyDown?: React_2.KeyboardEventHandler<HTMLInputElement>; size?: null | 'small' | 'medium' | 'large'; rounded?: null | 'small' | 'medium' | 'large' | 'full'; fillMode?: null | 'solid' | 'flat' | 'outline'; renderListFilterWrapper?: boolean; renderPrefixSeparator?: boolean; placeholder?: string; } /** * Represents the props of the ListGroupItem component. */ export declare interface ListGroupItemProps { /** * Specifies the id that will be added to the group header item element. */ id?: string; /** * The group that will be rendered. */ group?: string; /** * @hidden */ virtual?: boolean; /** * @hidden * Provides information if the rendered list is a multicolumn popup */ isMultiColumn?: boolean; /** * Fires when the group header item is about to be rendered. Used to override the default appearance of the group header item. */ render?: (li: React_2.ReactElement<HTMLLIElement>, itemProps: ListGroupItemProps) => React_2.ReactNode; } /** * @hidden */ export declare const ListItem: (props: ListItemProps) => string | number | bigint | boolean | Iterable<React_2.ReactNode> | Promise<string | number | bigint | boolean | React_2.ReactPortal | React_2.ReactElement<unknown, string | React_2.JSXElementConstructor<any>> | Iterable<React_2.ReactNode> | null | undefined> | JSX.Element | null | undefined; /** * Represents the props of the ListItem component. */ export declare interface ListItemProps { /** * Specifies the id that will be added to the list item element. */ id?: string; /** * Represents the index of the list item element. */ index: number; /** * Represents the data item of the list item element. */ dataItem: any; /** * Represents the `classic` or `modern` grouping mode of the DropDowns. Defaults to `classic`. */ groupMode: any; /** * Sets the data item field that represents the item text. If the data contains only primitive values, do not define it. */ textField?: string; /** * The group that will be rendered. */ group?: string; /** * Indicates the focused state of the list item element. */ focused: boolean; /** * Indicates the selected state of the list item element. */ selected: boolean; /** * Indicates the disabled/enabled state of the list item element. */ disabled?: boolean; /** * @hidden */ virtual?: boolean; /** * Fires when the list item is about to be rendered. Used to override the default appearance of the list item. */ render?: (li: React_2.ReactElement<HTMLLIElement>, itemProps: ListItemProps) => React_2.ReactNode; /** * The `onClick` event handler of the list item element. */ onClick: (index: number, event: React_2.MouseEvent<HTMLLIElement>) => void; } /** * The props of the `ListNoData` component ([see example]({% slug customrendering_dropdowntree %}#toc-no-data)). */ export declare interface ListNoDataProps { children?: React.ReactNode; } /** * @hidden */ declare interface ListProps { id?: string; virtual?: boolean; show?: boolean; data: any[]; value?: any; textField?: string; valueField?: string; groupField?: string; groupMode?: string; isMultiColumn?: boolean; optionsGuid?: string; hasDuplicates?: boolean; listRef?: React_2.Ref<HTMLUListElement>; wrapperRef?: React_2.Ref<HTMLDivElement>; wrapperCssClass?: string; wrapperStyle?: React_2.CSSProperties; listStyle?: React_2.CSSProperties; listClassName?: string; skip?: number; focusedIndex?: number; highlightSelected?: boolean; ariaSetSize?: number; onClick: (index: number, event: React_2.MouseEvent<HTMLLIElement>) => void; itemRender?: (li: React_2.ReactElement<HTMLLIElement>, itemProps: ListItemProps) => React_2.ReactNode; groupHeaderItemRender?: (li: React_2.ReactElement<HTMLLIElement>, groupItemProps: ListGroupItemProps) => React_2.ReactNode; noDataRender?: (element: React_2.ReactElement<HTMLDivElement>) => React_2.ReactNode; onMouseDown?: (event: React_2.MouseEvent<HTMLDivElement>) => void; onBlur?: (event: React_2.FocusEvent<HTMLDivElement>) => void; onScroll?: (event: React_2.UIEvent<HTMLDivElement>) => void; scroller?: any; } /** * Represents the MultiColumnComboBox component. * * Accepts properties of type [MultiColumnComboBoxProps]({% slug api_dropdowns_multicolumncomboboxprops %}). * Obtaining the `ref` returns an object of type [MultiColumnComboBoxHandle]({% slug api_dropdowns_multicolumncomboboxhandle %}). * * @example * ```jsx * const columns = [ * { * field: "id", * header: "ID", * width: "100px", * }, * { * field: "name", * header: "Name", * width: "300px", * }, * { * field: "position", * header: "Position", * width: "300px", * }, * ]; * const App = () => { * return ( * <div> * <div>Employees:</div> * <MultiColumnComboBox * data={employees} * columns={columns} * textField={"name"} * style={{ * width: "300px", * }} * placeholder="Please select ..." * /> * </div> * ); * }; * ReactDOM.render(<App />, document.querySelector("my-app")); * ``` */ export declare const MultiColumnComboBox: React_2.ForwardRefExoticComponent<MultiColumnComboBoxProps & React_2.RefAttributes<MultiColumnComboBoxHandle | null>>; /** * Represents the type of the MultiColumnComboBoxChangeEvent. */ export declare interface MultiColumnComboBoxChangeEvent { /** * The value of the MultiColumnComboBoxChangeEvent. */ value: any; /** * The target of the MultiColumnComboBoxChangeEvent from MultiColumnComboBoxHandle. */ target: MultiColumnComboBoxHandle; /** * The event of the MultiColumnComboBoxChangeEvent. */ syntheticEvent: React_2.SyntheticEvent<any>; } /** * The represents the interface of the MultiColumnComboBox columns. */ export declare interface MultiColumnComboBoxColumn { /** * The unique id of the column. */ uniqueKey?: string; /** * The field of the column. */ field?: string; /** * The header of the column. */ header?: React_2.ReactNode; /** * Represents the width of the column. If the width is not specified it is applied the default width of `200px`. */ width?: string | number; } /** * Represents the target(element and props) of the MultiColumnComboBoxChangeEvent. */ export declare interface MultiColumnComboBoxHandle { /** * The current element or `null` of there is no one. */ element: HTMLSpanElement | null; /** * The value of the MultiColumnComboBox. */ value: any; /** * The props values of the MultiColumnComboBox. */ props: MultiColumnComboBoxProps; /** * The focus event callback. */ focus: () => void; } /** * Represents the properties of the [MultiColumnComboBox]({% slug api_dropdowns_multicolumncombobox %}) component. */ export declare interface MultiColumnComboBoxProps extends ComboBoxProps { /** * Determines the columns array of the MultiColumnComboBox. */ columns: MultiColumnComboBoxColumn[]; /** * Sets the data of the MultiColumnComboBox. */ data?: any[]; /** * Sets the opened and closed state of the MultiColumnComboBox. */ opened?: boolean; /** * The styles that are applied to the MultiColumnComboBox. */ style?: React_2.CSSProperties; /** * Sets the value of the MultiColumnComboBox. It can either be of the primitive (string, numbers) or of the complex (objects) type. */ value?: any; /** * Sets the default value of the MultiColumnComboBox. Similar to the native `select` HTML element. */ defaultValue?: any; /** * Sets additional classes to the MultiColumnComboBox. */ className?: string; /** * If `clearButton` is set to `true`, the MultiColumnComboBox renders a button on hovering over the component. Clicking this button resets the value of the MultiColumnComboBox to `undefined` and triggers the `change` event. */ clearButton?: boolean; /** * The hint that is displayed when the MultiColumnComboBox is empty. */ placeholder?: string; /** * Specifies whether the MultiColumnComboBox allows user-defined values that are not present in the dataset. Defaults to `false`. */ allowCustom?: boolean; /** * Sets the disabled state of the MultiColumnComboBox. */ disabled?: boolean; /** * Enables the filtering functionality of the MultiColumnComboBox. */ filterable?: boolean; /** * Sets the value of MultiColumnComboBox input. Useful for making the MultiColumnComboBox input a controlled component. */ filter?: string | null; /** * Sets the loading state of the MultiColumnComboBox. */ loading?: boolean; /** * Specifies the `tabIndex` of the MultiColumnComboBox. */ tabIndex?: number; /** * Specifies the `accessKey` of the MultiColumnComboBox. */ accessKey?: string; /** * Sets the key for comparing the data items of the MultiColumnComboBox. If `dataItemKey` is not set, the MultiColumnComboBox compares the items by reference. */ dataItemKey?: string; /** * Renders a floating label for the MultiColumnComboBox. */ label?: string; /** * Configures the popup of the MultiColumnComboBox. */ popupSettings?: DropDownsPopupSettings; /** * Configures the virtual scrolling of the MultiColumnComboBox. */ virtual?: VirtualizationSettings; /** * If set, the MultiColumnComboBox will use it to get the focused item index. Default functionality returns the first item which starts with the input text. */ focusedItemIndex?: (data: any, inputText: string, textField?: string) => number; /** * Fires each time the popup of the MultiColumnComboBox is about to open. */ onOpen?: (event: ComboBoxOpenEvent) => void; /** * Fires each time the popup of the MultiColumnComboBox is about to close. */ onClose?: (event: ComboBoxCloseEvent) => void; /** * Fires each time the user focuses the MultiColumnComboBox. */ onFocus?: (event: ComboBoxFocusEvent) => void; /** * Fires each time the MultiColumnComboBox gets blurred. */ onBlur?: (event: ComboBoxBlurEvent) => void; /** * Fires each time the value of the MultiColumnComboBox is about to change. */ onChange?: (event: ComboBoxChangeEvent) => void; /** * Fires each time the user types in the filter input. You can filter the source based on the passed filtration value. */ onFilterChange?: (event: ComboBoxFilterChangeEvent) => void; /** * Fires when both the virtual scrolling of the MultiColumnComboBox is enabled and the component requires data for another page. */ onPageChange?: (event: ComboBoxPageChangeEvent) => void; /** * @hidden */ onGroupScroll?: (event: { group?: string; }) => void; /** * Fires when a MultiColumnComboBox list item is about to be rendered. Used to override the default appearance of the list items. */ itemRender?: (li: React_2.ReactElement<HTMLLIElement>, itemProps: ListItemProps) => React_2.ReactNode; /** * Sets the header component of the MultiColumnComboBox. */ header?: React_2.ReactNode; /** * Sets the footer component of the MultiColumnComboBox. */ footer?: React_2.ReactNode; /** * Configures the `size` of the MultiColumnComboBox. * * 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 MultiColumnComboBox. * * 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 MultiColumnComboBox. * * The available options are: * - solid * - flat * - outline * - null—Does not set a fillMode `className`. * * @default `solid` */ fillMode?: null | 'solid' | 'flat' | 'outline'; /** * Sets a custom prefix to the MultiColumnComboBox component. */ prefix?: CustomComponent<any> | undefined; /** * Sets a custom suffix to the MultiColumnComboBox component. */ suffix?: CustomComponent<any> | undefined; } /** * Represents the PropsContext of the `MultiColumnComboBox` component. * Used for global configuration of all `MultiColumnComboBox` instances. * * For more information, refer to the [Dropdowns Props Context]({% slug props-context_dropdowns %}) article. */ export declare const MultiColumnComboBoxPropsContext: React_2.Context<(p: MultiColumnComboBoxProps) => MultiColumnComboBoxProps>; /** @hidden */ export declare type MultiSelect = MultiSelectHandle; /** * Represents the [KendoReact MultiSelect component]({% slug overview_multiselect %}). * * Accepts properties of type [MultiSelectProps]({% slug api_dropdowns_multiselectprops %}). * Obtaining the `ref` returns an object of type [MultiSelectHandle]({% slug api_dropdowns_multiselecthandle %}). * * @example * ```jsx * class App extends React.Component { * multiselect = null; * render() { * return ( * <div> * <MultiSelect * data={[ "Albania", "Andorra", "Austria", "Belarus" ]} * ref={component => this.multiselect = component} * /> * <button onClick={() => alert(this.multiselect.value)}>alert value</button> * </div> * ); * } * } * ReactDOM.render(<App />, document.querySelector('my-app')); * ``` */ export declare const MultiSelect: React_2.ForwardRefExoticComponent<MultiSelectProps & React_2.RefAttributes<any>>; /** * Represents the object of the `blur` MultiSelect event. */ export declare interface MultiSelectBlurEvent extends BlurEvent<MultiSelect> { } /** * Represents the object of the `onCancel` MultiSelect event. */ declare interface MultiSelectCancelEvent extends CancelEvent<MultiSelect> { } /** * Represents the object of the `change` MultiSelect event. */ export declare interface MultiSelectChangeEvent extends ChangeEvent<MultiSelect> { } /** * Represents the object of the `close` MultiSelect event. */ export declare interface MultiSelectCloseEvent extends CloseEvent_2<MultiSelect> { } /** * Represents the object of the `filterChange` MultiSelect event. */ export declare interface MultiSelectFilterChangeEvent extends FilterChangeEvent<MultiSelect> { } /** * Represents the object of the `focus` MultiSelect event. */ export declare interface MultiSelectFocusEvent extends FocusEvent_2<MultiSelect> { } /** * Represent the `ref` of the MultiSelect component. */ export declare interface MultiSelectHandle extends Pick<MultiSelectWithoutContext, keyof MultiSelectWithoutContext> { /** * Gets the `name` property of the MultiSelect. */ name: string | undefined; /** * Represents the validity state into which the MultiSelect is set. */ validity: FormComponentValidity; /** * Represents the value of the MultiSelect. */ value: Array<any>; } /** @hidden */ declare interface MultiSelectInternalState extends InternalState { data: MultiSelectState; } /** * Represents the object of the `open` MultiSelect event. */ export declare interface MultiSelectOpenEvent extends OpenEvent<MultiSelect> { } /** * Represents the object of the `pageChange` MultiSelect event. */ export declare interface MultiSelectPageChangeEvent extends PageChangeEvent<MultiSelect> { } /** * Represents the props of the [KendoReact MultiSelect component]({% slug overview_multiselect %}). */ export declare interface MultiSelectProps extends FormComponentProps { /** * Specifies whether the MultiSelect allows user-defined values that are not present in the dataset ([see example]({% slug custom_values_multiselect %})). Defaults to `false`. * * @example * ```jsx * <MultiSelect allowCustom={true} /> * ``` */ allowCustom?: boolean; /** * Sets the data of the MultiSelect ([see example]({% slug binding_multiselect %})). * * @example * ```jsx * <MultiSelect data={['Option1', 'Option2', 'Option3']} /> * ``` */ data?: any[]; /** * Sets the opened and closed state of the MultiSelect. * * @example * ```jsx * <MultiSelect opened={true} /> * ``` */ opened?: boolean; /** * Determines whether to close the options list of the MultiSelect after the item selection is finished. * * @example * ```jsx * <MultiSelect autoClose={false} /> * ``` */ autoClose?: boolean; /** * The styles that are applied to the MultiSelect. * * @example * ```jsx * <MultiSelect style={{ width: '300px' }} /> * ``` */ style?: React.CSSProperties; /** * Sets the value of the MultiSelect ([see example]({% slug binding_multiselect %})). It can either be of the primitive (string, numbers) or of the complex (objects) type. * * @example * ```jsx * <MultiSelect value={['Option1', 'Option2']} /> * ``` */ value?: Array<any>; /** * The hint that is displayed when the MultiSelect is empty. * * @example * ```jsx * <MultiSelect placeholder="Select an option" /> * ``` */ placeholder?: string; /** * Sets the tags of the MultiSelect ([see example]({% slug customtags_multiselect %})). * * @example * ```jsx * <MultiSelect tags={[{ text: 'Tag1' }, { text: 'Tag2' }]} /> * ``` */ tags?: Array<TagData>; /** * Sets the key for comparing the data items of the MultiSelect ([see example]({% slug binding_multiselect %}#toc-datasets-of-objects)). If `dataItemKey` is not set, the MultiSelect compares the items by reference. * * @example * ```jsx * <MultiSelect dataItemKey="id" /> * ``` */ dataItemKey?: string; /** * Sets the default value of the MultiSelect. Similar to the native `select` HTML element. * * @example * ```jsx * <MultiSelect defaultValue={['Option1']} /> * ``` */ defaultValue?: Array<any>; /** * Sets additional classes to the MultiSelect. * * @example * ```jsx * <MultiSelect className="custom-class" /> * ``` */ className?: string; /** * Sets the disabled state of the MultiSelect. * * @example * ```jsx * <MultiSelect disabled={true} /> * ``` */ disabled?: boolean; /** * Represents the `dir` HTML attribute. * * @example * ```jsx * <MultiSelect dir="rtl" /> * ``` */ dir?: string; /** * Enables the filtering functionality of the MultiSelect ([more information and examples]({% slug filtering_multiselect %})). * * @example * ```jsx * <MultiSelect filterable={true} /> * ``` */ filterable?: boolean; /** * Specifies the id of the component. * * @example * ```jsx * <MultiSelect id="multi-select" /> * ``` */ 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 * <MultiSelect ariaDescribedBy="description" /> * ``` */ ariaDescribedBy?: string; /** * Specifies the accessible label of the interactive component. * * @example * ```jsx * <MultiSelect ariaLabel="MultiSelect" /> * ``` */ ariaLabel?: string; /** * Identifies the element(s) which will label the component. * * @example * ```jsx * <MultiSelect ariaLabelledBy="label" /> * ``` */ ariaLabelledBy?: string; /** * If set, the MultiSelect 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)); * }; * * <MultiSelect focusedItemIndex={focusedItemIndex} /> * ``` */ focusedItemIndex?: (data: any, inputText: string, textField?: string) => number; /** * Sets the value of filtering input. Useful for making the filtering input a [controlled component](https://react.dev/learn/sharing-state-between-components#controlled-and-uncontrolled-components). * * @example * ```jsx * <MultiSelect filter="Option" /> * ``` */ filter?: string; /** * Sets the value of the adaptive filtering input of the of MultiSelect. * * @example * ```jsx * <MultiSelect adaptiveFilter="Option" /> * ``` */ adaptiveFilter?: string; /** * Sets the loading state of the MultiSelect ([see example]({% slug filtering_multiselect %}#toc-basic-configuration)). * * @example * ```jsx * <MultiSelect loading={true} /> * ``` */ loading?: boolean; /** * Specifies the `tabIndex` of the MultiSelect. * * @example * ```jsx * <MultiSelect tabIndex={0} /> * ``` */ tabIndex?: number; /** * Specifies the `accessKey` of the MultiSelect. * * @example * ```jsx * <MultiSelect accessKey="a" /> * ``` */ accessKey?: string; /** * Sets the data item field that represents the item text ([see example]({% slug binding_multiselect %}#toc-datasets-of-objects)). If the data contains only primitive values, do not define it. * * @example * ```jsx * <MultiSelect textField="name" /> * ``` */ textField?: string; /** * Renders a floating label for the MultiSelect. * * @example * ```jsx * <MultiSelect label="Select an option" /> * ``` */ label?: string; /** * Configures the popup of the MultiSelect. * * @example * ```jsx * <MultiSelect popupSettings={{ animate: true }} /> * ``` */ popupSettings?: DropDownsPopupSettings; /** * Configures the virtual scrolling of the MultiSelect ([see example]({% slug virtualization_multiselect %})). * * @example * ```jsx * <MultiSelect virtual={{ pageSize: 20 }} /> * ``` */ virtual?: VirtualizationSettings; /** * Fires each time the popup of the MultiSelect is about to open. * * @example * ```jsx * <MultiSelect onOpen={(event) => console.log(event)} /> * ``` */ onOpen?: (event: MultiSelectOpenEvent) => void; /** * Fires each time the popup of the MultiSelect is about to close. * * @example * ```jsx * <MultiSelect onClose={(event) => console.log(event)} /> * ``` */ onClose?: (event: MultiSelectCloseEvent) => void; /** * Fires each time the user focuses the MultiSelect. * * @example * ```jsx * <MultiSelect onFocus={(event) => console.log(event)} /> * ``` */ onFocus?: (event: MultiSelectFocusEvent) => void; /** * Fires each time the MultiSelect gets blurred. * * @example * ```jsx * <MultiSelect onBlur={(event) => console.log(event)} /> * ``` */ onBlur?: (event: MultiSelectBlurEvent) => void; /** * Fires each time the value of the MultiSelect is about to change ([see examples]({% slug binding_multiselect %})). * * @example * ```jsx * <MultiSelect onChange={(event) => console.log(event)} /> * ``` */ onChange?: (event: MultiSelectChangeEvent) => void; /** * Fires each time the popup of the MultiSelect is about to cancel in ([adaptive mode]({% slug adaptive_rendering_multiselect %})). * * @example * ```jsx * <MultiSelect onCancel={(event) => console.log(event)} /> * ``` */ onCancel?: (event: MultiSelectCancelEvent) => void; /** * Fires each time the user types in the filter input ([see example]({% slug filtering_multiselect %}#toc-basic-configuration)). You can filter the source based on the passed filtration value. * * @example * ```jsx * <MultiSelect onFilterChange={(event) => console.log(event)} /> * ``` */ onFilterChange?: (event: MultiSelectFilterChangeEvent) => void; /** * Fires when both the virtual scrolling of the MultiSelect is enabled and when the component requires data for another page ([see example]({% slug virtualization_multiselect %})). * * @example * ```jsx * <MultiSelect onPageChange={(event) => console.log(event)} /> * ``` */ onPageChange?: (event: MultiSelectPageChangeEvent) => void; /** * Fires when a MultiSelect item is about to be rendered ([see example]({% slug customrendering_multiselect %}#toc-items)). Used to override the default appearance of the list items. * * @example * ```jsx * <MultiSelect itemRender={(li, itemProps) => <div>{itemProps.dataItem}</div>} /> * ``` */ 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_multiselect %}#toc-no-data)). Used to override the default appearance of the element. * * @example * ```jsx * <MultiSelect listNoDataRender={(element) => <div>No data available</div>} /> * ``` */ listNoDataRender?: (element: React.ReactElement<HTMLDivElement>) => React.ReactNode; /** * Fires when a tag element is about to be rendered ([see example]({% slug customrendering_multiselect %}#toc-tags)). Used to override the default appearance of the element. * * @example * ```jsx * <MultiSelect tagRender={(tagData, tag) => <span>{tagData.text}</span>} /> * ``` */ tagRender?: (tagData: TagData, tag: React.ReactElement<any>) => React.ReactElement<any>; /** * Sets the header component of the MultiSelect ([see example]({% slug customrendering_multiselect %}#toc-headers-and-footers)). * * @example * ```jsx * <MultiSelect header={<div>Header</div>} /> * ``` */ header?: React.ReactNode; /** * Sets the footer component of the MultiSelect ([see example]({% slug customrendering_multiselect %}#toc-headers-and-footers)). * * @example * ```jsx * <MultiSelect footer={<div>Footer</div>} /> * ``` */ footer?: React.ReactNode; /** * Configures the `size` of the MultiSelect. * * The available options are: * - small * - medium * - large * - null—Does not set a size `className`. * * @default `medium` * * @example * ```jsx * <MultiSelect size="small" /> * ``` */ size?: null | 'small' | 'medium' | 'large'; /** * Configures the `roundness` of the MultiSelect. * * The available options are: * - small * - medium * - large * - full * - null—Does not set a rounded `className`. * * @default `medium` * * @example * ```jsx * <MultiSelect rounded="large" /> * ``` */ rounded?: null | 'small' | 'medium' | 'large' | 'full'; /** * Configures the `fillMode` of the MultiSelect. * * The available options are: * - solid * - flat * - outline * - null—Does not set a fillMode `className`. * * @default `solid` * * @example * ```jsx * <MultiSelect 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 * <MultiSelect groupField="category" /> * ``` */ groupField?: string; /** * Fires when a DropDownList's group header item is about to be rendered. Used to override the default appearance of the group's headers. * * @example * ```jsx * <MultiSelect groupHeaderItemRender={(li, itemProps) => <div>{itemProps.dataItem}</div>} /> * ``` */ groupHeaderItemRender?: (li: React.ReactElement<HTMLLIElement>, itemProps: ListGroupItemProps) => React.ReactNode; /** * Fires when a DropDownList's 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 * <MultiSelect groupStickyHeaderItemRender={(div, stickyHeaderProps) => <div>{stickyHeaderProps.dataItem}</div>} /> * ``` */ groupStickyHeaderItemRender?: (div: React.ReactElement<HTMLDivElement>, stickyHeaderProps: GroupStickyHeaderProps) => React.ReactNode; /** * @hidden */ list?: any; /** * @hidden */ groupMode?: string; /** * Providing different rendering of the popup element based on the screen dimensions. * * @default `false` * * @example * ```jsx * <MultiSelect 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 * <MultiSelect 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 * <MultiSelect adaptiveSubtitle="Adaptive Popup Subtitle" /> */ adaptiveSubtitle?: string; /** * Defines if MultiSelect's disabled items will be skipped or focused when navigating through the list of items using a keyboard. Defaults to `true`. * * @example * ```jsx * <MultiSelect skipDisabledItems={false} /> * ``` */ skipDisabledItems?: boolean; /** * Sets a custom prefix to the MultiSelect component. * * @example * ```jsx * <MultiSelect prefix={<span>Prefix</span>} /> * ``` */ prefix?: CustomComponent<any>; /** * Sets a custom suffix to the MultiSelect component. * * @example * ```jsx * <MultiSelect 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 * <MultiSelect 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 `MultiSelect` component. * Used for global configuration of all `MultiSelect` instances. * * For more information, refer to the [Dropdowns Props Context]({% slug props-context_dropdowns %}) article. */ export declare const MultiSelectPropsContext: React_2.Context<(p: MultiSelectProps) => MultiSelectProps>; /** @hidden */ declare interface MultiSelectState extends DropDownStateBase { selectedItems?: Array<any>; focusedIndex?: number; focusedTag?: TagData; activedescendant?: ActiveDescendant; value?: Array<any>; currentValue?: Array<any>; windowWidth?: number; } /** * Represents the MultiSelectTree component. * * Accepts properties of type [MultiSelectTreeProps]({% slug api_dropdowns_multiselecttreeprops %}). * Obtaining the `ref` returns an object of type [MultiSelectTreeHandle]({% slug api_dropdowns_multiselecttreehandle %}). * * @example * ```jsx * const dataItemKey = 'id'; * const checkField = 'checkField'; * const checkIndeterminateField = 'checkIndeterminateField'; * const subItemsField = 'items'; * const expandField = 'expanded'; * const textField = 'text'; * const fields = { * dataItemKey, * checkField, * checkIndeterminateField, * expandField, * subItemsField, * }; * const App = () => { * const [value, setValue] = React.useState([]); * const [expanded, setExpanded] = React.useState([data[0][dataItemKey]]); * const onChange = (event) => * setValue( * getMultiSelectTreeValue(data, { * ...fields, * ...event, * value, * }) * ); * const onExpandChange = React.useCallback( * (event) => setExpanded(expandedState(event.item, dataItemKey, expanded)), * [expanded] * ); * const treeData = React.useMemo( * () => * processMultiSelectTreeData(data, { * expanded, * value, * ...fields, * }), * [expanded, value] * ); * * return ( * <div> * <div>Categories:</div> * <MultiSelectTree * style={{ * width: '300px', * }} * data={treeData} * value={value} * onChange={onChange} * placeholder="Please select ..." * textField={textField} * dataItemKey={dataItemKey} * checkField={checkField} * checkIndeterminateField={checkIndeterminateField} * expandField={expandField} * subItemsField={subItemsField} * onExpandChange={onExpandChange} * /> * </div> * ); * }; * ReactDOM.render(<App />, document.querySelector('my-app')); * ``` */ export declare const MultiSelectTree: React_2.ForwardRefExoticComponent<MultiSelectTreeProps & React_2.RefAttributes<MultiSelectTreeHandle | null>>; /** * Represents the object of the `onBlur` MultiSelectTree event. */ export declare interface MultiSelectTreeBlurEvent extends BlurEvent<MultiSelectTreeHandle> { } /** * Represents the object of the `onCancel` MultiSelectTree event. */ export declare interface MultiSelectTreeCancelEvent extends CancelEvent<MultiSelectTreeHandle> { } /** * Represents the object of the `onChange` MultiSelectTree event. */ export declare interface MultiSelectTreeChangeEvent extends DropdownEvent<MultiSelectTreeHandle> { /** * The items related to current operation. */ items: any[]; /** * Describes the current operation: * * `clear` - clear button is clicked and value is cleared. Null value is retured. * * `delete` - tag is deleted using keyboard or mouse. The items contained in current tag are returned. * * `toggle` - item in TreeView is toggled. Single item is returned. */ operation: MultiSelectTreeChangeEventOperation; } export declare type MultiSelectTreeChangeEventOperation = 'clear' | 'delete' | 'toggle'; /** * Represents the object of the `onClose` MultiSelectTree event. */ export declare interface MultiSelectTreeCloseEvent extends CloseEvent_2<MultiSelectTreeHandle> { } /** * Represents the object of the `onExpandChange` MultiSelectTree event. */ export declare interface MultiSelectTreeExpandEvent extends DropdownEvent<MultiSelectTreeHandle> { item: any; level: number[]; } /** * Represents the object of the `onFilterChange` MultiSelectTree event. */ export declare interface MultiSelectTreeFilterChangeEvent extends FilterChangeEvent<MultiSelectTreeHandle> { } /** * Represents the object of the `onFocus` MultiSelectTree event. */ export declare interface MultiSelectTreeFocusEvent extends FocusEvent_2<MultiSelectTreeHandle> { } /** * Represents the Object which is passed to the * [`ref`](https://react.dev/learn/referencing-values-with-refs#refs-and-the-dom) callback of the MultiSelectTree component. */ export declare interface MultiSelectTreeHandle { /** * The current element or `null` if there is no one. */ element: HTMLElement | null; /** * The props of the MultiSelectTree component. */ props: MultiSelectTreeProps; /** * The focus function. */ focus: () => void; } /** * The props of component that will be used for rendering each of the MultiSelectTree items * ([see example]({% slug customrendering_multiselecttree %}#toc-items-and-value-element)). */ export declare interface MultiSelectTreeItemProps extends ItemRenderProps { } /** * The props of the `ListNoData` component ([see example]({% slug customrendering_multiselecttree %}#toc-no-data)). */ export declare interface MultiSelectTreeListNoDataProps { children?: React_2.ReactNode; } /** * Represents the object of the `onOpen` MultiSelectTree event. */ export declare interface MultiSelectTreeOpenEvent extends OpenEvent<MultiSelectTreeHandle> { } /** * Represents the props of the [KendoReact MultiSelectTree component]({% slug overview_multiselecttree %}). */ export declare interface MultiSelectTreeProps extends FormComponentProps { /** * Sets the data of the MultiSelectTree ([see example]({% slug overview_multiselecttree %})). * * @example * ```jsx * <MultiSelectTree data={[{ text: 'Node1' }, { text: 'Node2' }]} /> * ``` */ data?: any[]; /** * Sets the opened state of the MultiSelectTree. * * @example * ```jsx * <MultiSelectTree opened={true} /> * ``` */ opened?: boolean; /** * The styles that are applied to the MultiSelectTree. * * @example * ```jsx * <MultiSelectTree style={{ width: '400px' }} /> * ``` */ style?: React_2.CSSProperties; /** * Sets the value of the MultiSelectTree. It can either be of the primitive (string, numbers) or of the complex (objects) type. * * @example * ```jsx * <MultiSelectTree value={['Node1']} /> * ``` */ value?: Array<any>; /** * The hint that is displayed when the MultiSelectTree is empty. * * @example * ```jsx * <MultiSelectTree placeholder="Select items" /> * ``` */ placeholder?: string; /** * Sets the key for comparing the data items of the MultiSelectTree ([see example]({% slug overview_multiselecttree %})). * If `dataItemKey` is not set, the MultiSelectTree compares the items by reference. * * @example * ```jsx * <MultiSelectTree dataItemKey="id" /> * ``` */ dataItemKey: string; /** * Sets additional classes to the MultiSelectTree. * * @example * ```jsx * <MultiSelectTree className="custom-class" /> * ``` */ className?: string; /** * Sets the disabled state of the MultiSelectTree. * * @example * ```jsx * <MultiSelectTree disabled={true} /> * ``` */ disabled?: boolean; /** * Represents the `dir` HTML attribute. * * @example * ```jsx * <MultiSelectTree dir="rtl" /> * ``` */ dir?: string; /** * Renders a floating label for the MultiSelectTree. * * @example * ```jsx * <MultiSelectTree label="Select items" /> * ``` */ label?: string; /** * Specifies the id of the component. * * @example * ```jsx * <MultiSelectTree id="multi-select-tree" /> * ``` */ id?: string; /** * Sets the tags of the MultiSelect ([see example]({% slug customtags_multiselect %})). * * @example * ```jsx * <MultiSelectTree tags={[{ text: 'Tag1' }, { text: 'Tag2' }]} /> * ``` */ tags?: Array<TagData>; /** * 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 * <MultiSelectTree ariaDescribedBy="description" /> * ``` */ ariaDescribedBy?: string; /** * Identifies the element(s) which will label the component. * * @example * ```jsx * <MultiSelectTree ariaLabelledBy="label" /> * ``` */ ariaLabelledBy?: string; /** * Enables the filtering functionality of the MultiSelectTree ([more information and examples]({% slug filtering_multiselecttree %})). * * @example * ```jsx * <MultiSelectTree filterable={true} /> * ``` */ filterable?: boolean; /** * Sets the value of filtering input. * Useful for making the filtering input a [controlled component](https://react.dev/learn/sharing-state-between-components#controlled-and-uncontrolled-components). * * @example * ```jsx * <MultiSelectTree filter="search text" /> * ``` */ filter?: string; /** * Sets the loading state of the MultiSelectTree ([see example]({% slug filtering_multiselecttree %}#toc-visualize-filtering)). * * @example * ```jsx * <MultiSelectTree loading={true} /> * ``` */ loading?: boolean; /** * Specifies the `tabIndex` of the MultiSelectTree. * * @example * ```jsx * <MultiSelectTree tabIndex={0} /> * ``` */ tabIndex?: number; /** * Specifies the `accessKey` of the MultiSelectTree. * * @example * ```jsx * <MultiSelectTree accessKey="m" /> * ``` */ accessKey?: string; /** * Sets the data item field that represents the item text ([see example]({% slug overview_multiselecttree %})). * * @example * ```jsx * <MultiSelectTree textField="name" /> * ``` */ textField: string; /** * Specifies the name of the field which will provide a Boolean representation of the checked state of the item. * * @example * ```jsx * <MultiSelectTree checkField="checked" /> * ``` */ checkField?: string; /** * Specifies the name of the field which will provide a Boolean representation of the checked indeterminate state of the item. * * @example * ```jsx * <MultiSelectTree checkIndeterminateField="indeterminate" /> * ``` */ checkIndeterminateField?: string; /** * Specifies the name of the field which will provide a Boolean representation of the expanded state of the item. * * @example * ```jsx * <MultiSelectTree expandField="expanded" /> * ``` */ expandField?: string; /** * Specifies the name of the field which will provide an array representation of the item subitems. * Defaults to 'items'. * * @example * ```jsx * <MultiSelectTree subItemsField="children" /> * ``` */ subItemsField?: string; /** * Configures the popup of the MultiSelectTree. * * @example * ```jsx * <MultiSelectTree popupSettings={{ animate: true }} /> * ``` */ popupSettings?: DropDownsPopupSettings; /** * Represents a callback function, which returns the value for submitting. The returned value will be rendered in an `option` of a hidden [`select`](https://react.dev/reference/react-dom/components/select) element. * * @example * ```jsx * <MultiSelectTree valueMap={value => value && value.id} /> * ``` */ valueMap?: (value: Array<any>) => any; /** * Fires each time the popup of the MultiSelectTree is about to open. * * @example * ```jsx * <MultiSelectTree onOpen={(event) => console.log(event)} /> * ``` */ onOpen?: (event: MultiSelectTreeOpenEvent) => void; /** * Fires each time the popup of the MultiSelectTree is about to close. * * @example * ```jsx * <MultiSelectTree onClose={(event) => console.log(event)} /> * ``` */ onClose?: (event: MultiSelectTreeCloseEvent) => void; /** * Fires each time the user focuses the MultiSelectTree. * * @example * ```jsx * <MultiSelectTree onFocus={(event) => console.log(event)} /> * ``` */ onFocus?: (event: MultiSelectTreeFocusEvent) => void; /** * Fires each time the MultiSelectTree gets blurred. * * @example * ```jsx * <MultiSelectTree onBlur={(event) => console.log(event)} /> * ``` */ onBlur?: (event: MultiSelectTreeBlurEvent) => void; /** * Fires each time the value of the MultiSelectTree is about to change ([see examples]({% slug overview_multiselecttree %})). * * @example * ```jsx * <MultiSelectTree onChange={(event) => console.log(event)} /> * ``` */ onChange?: (event: MultiSelectTreeChangeEvent) => void; /** * Fires each time the popup of the MultiSelectTree is about to cancel in ([adaptive mode]({% slug adaptive_rendering_multiselecttree %})). * * @example * ```jsx * <MultiSelectTree onCancel={(event) => console.log(event)} /> * ``` */ onCancel?: (event: MultiSelectTreeCancelEvent) => void; /** * Fires each time the user types in the filter input * ([see example]({% slug filtering_multiselecttree %}#toc-basic-configuration)). * You can filter the source based on the passed filtration value. * * @example * ```jsx * <MultiSelectTree onFilterChange={(event) => console.log(event)} /> * ``` */ onFilterChange?: (event: MultiSelectTreeFilterChangeEvent) => void; /** * Fires when the expanding or collapsing of an item is requested ([see examples]({% slug overview_multiselecttree %})). * * @example * ```jsx * <MultiSelectTree onExpandChange={(event) => console.log(event)} /> * ``` */ onExpandChange?: (event: any) => void; /** * Defines the component that will be used for rendering each of the MultiSelectTree items * ([see example]({% slug customrendering_multiselecttree %}#toc-items-and-value-element)). * * @example * ```jsx * <MultiSelectTree item={(props) => <div>{props.item.text}</div>} /> * ``` */ item?: React_2.ComponentType<MultiSelectTreeItemProps>; /** * Defines the component that will be rendered in the MultiSelectTree popup when no data is available * ([see example]({% slug customrendering_multiselecttree %}#toc-no-data)). * * @example * ```jsx * <MultiSelectTree listNoData={() => <div>No data available</div>} /> * ``` */ listNoData?: React_2.ComponentType<MultiSelectTreeListNoDataProps>; /** * Defines the component that will be used for rendering each of the MultiSelectTree tags. * * @example * ```jsx * <MultiSelectTree tag={(props) => <span>{props.tagData.text}</span>} /> * ``` */ tag?: React_2.ComponentType<MultiSelectTreeTagProps>; /** * Configures the `size` of the MultiSelectTree. * * The available options are: * - small * - medium * - large * - null—Does not set a size `className`. * * @default `medium` * * @example * ```jsx * <MultiSelectTree size="large" /> * ``` */ size?: null | 'small' | 'medium' | 'large'; /** * Configures the `roundness` of the MultiSelectTree. * * The available options are: * - small * - medium * - large * - full * - null—Does not set a rounded `className`. * * @default `medium` * * @example * ```jsx * <MultiSelectTree rounded="full" /> * ``` */ rounded?: null | 'small' | 'medium' | 'large' | 'full'; /** * Configures the `fillMode` of the MultiSelectTree. * * The available options are: * - solid * - flat * - outline * - null—Does not set a fillMode `className`. * * @default `solid` * * @example * ```jsx * <MultiSelectTree fillMode="outline" /> * ``` */ fillMode?: null | 'solid' | 'flat' | 'outline'; /** * Providing different rendering of the popup element based on the screen dimensions. * * @default `false` * * @example * ```jsx * <MultiSelectTree 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 * <MultiSelectTree adaptiveTitle="Adaptive Popup Title" /> * ``` */ adaptiveTitle?: string | React_2.ReactNode; /** * Specifies the text that is rendered as subtitle in the adaptive popup(action sheet). * Applicable only when `adaptive` is set to `true`. * * @example * ```jsx * <MultiSelectTree adaptiveSubtitle="Adaptive Popup Subtitle" /> * ``` */ adaptiveSubtitle?: string; } /** * Represents the PropsContext of the `MultiSelectTree` component. * Used for global configuration of all `MultiSelectTree` instances. * * For more information, refer to the [Dropdowns Props Context]({% slug props-context_dropdowns %}) article. */ export declare const MultiSelectTreePropsContext: React_2.Context<(p: MultiSelectTreeProps) => MultiSelectTreeProps>; /** * The props of component that will be used for rendering each of the MultiSelectTree tags */ export declare interface MultiSelectTreeTagProps { tagData: TagData; guid: string; focusedTag?: TagData; onTagDelete: (items: Array<any>, event: React_2.MouseEvent<HTMLSpanElement>) => void; } /** @hidden */ export declare class MultiSelectWithoutContext extends React_2.Component<MultiSelectProps, MultiSelectState> implements FormComponent { static displayName: string; /** @hidden */ static propTypes: { autoClose: default_2.Requireable<boolean>; value: default_2.Requireable<any[]>; defaultValue: default_2.Requireable<any[]>; dataItemKey: default_2.Requireable<string>; placeholder: default_2.Requireable<string>; tags: default_2.Requireable<(default_2.InferProps<{ text: default_2.Requireable<string>; data: default_2.Requireable<any[]>; }> | null | undefined)[]>; tagRender: default_2.Requireable<(...args: any[]) => any>; id: default_2.Requireable<string>; ariaLabelledBy: default_2.Requireable<string>; ariaDescribedBy: default_2.Requireable<string>; groupField: 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>; 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>; }; /** @hidden */ static defaultProps: { autoClose: boolean; required: boolean; size: "small" | "large" | "medium" | null | undefined; rounded: "small" | "large" | "medium" | "full" | null | undefined; fillMode: "flat" | "solid" | "outline" | null | undefined; groupMode: string | undefined; skipDisabledItems: boolean; prefix: undefined; suffix: undefined; popupSettings: { height: string; }; validityStyles: boolean; }; /** @hidden */ readonly state: MultiSelectState; private _element; private _valueItemsDuringOnChange; private get _inputId(); protected readonly base: DropDownBase; private readonly _tags; private _input; private _adaptiveInput; private _skipFocusEvent; private _lastSelectedOrDeslectedItemIndex; private itemHeight; protected scrollToFocused: boolean; private localization; private observerResize?; private get document(); private showLicenseWatermark; private validate; constructor(props: MultiSelectProps); /** @hidden */ focus: () => void; /** @hidden */ get element(): HTMLSpanElement | null; /** @hidden */ get opened(): boolean; /** @hidden */ get tagsToRender(): Array<TagData>; /** * The mobile mode of the MultiSelect. */ get mobileMode(): boolean; /** * Represents the value of the MultiSelect. */ get value(): Array<any>; /** * Gets the `name` property of the MultiSelect. */ get name(): string | undefined; /** * Represents the validity state into which the MultiSelect is set. */ get validity(): FormComponentValidity; /** @hidden */ protected get required(): boolean; protected get validityStyles(): boolean; /** @hidden */ componentDidUpdate(prevProps: MultiSelectProps, prevState: MultiSelectState): void; /** @hidden */ componentDidMount(): void; /** @hidden */ componentWillUnmount(): void; /** @hidden */ handleItemSelect: (index: number, state: MultiSelectInternalState) => void; /** @hidden */ onTagDelete: (itemsToRemove: Array<any>, event: React_2.MouseEvent<HTMLSpanElement>) => void; /** @hidden */ onNavigate(state: MultiSelectInternalState, keyCode: number, skipItems?: number): void; /** @hidden */ itemFocus: (index: number, state: MultiSelectInternalState) => void; /** @hidden */ render(): JSX.Element; private componentRef; private renderSearchBar; private searchbarRef; private onChangeHandler; private clearButtonClick; private onInputKeyDown; private onTagsNavigate; private triggerOnChange; private selectFocusedItem; private setItems; private getFocusedState; private listContainerContent; private renderListContainer; private renderAdaptiveListContainer; private closePopup; private onCancel; private renderList; private onScroll; private customItemSelect; private handleWrapperClick; private handleItemClick; private handleBlur; private handleFocus; private onPopupOpened; private onPopupClosed; private focusElement; private applyState; private setValidity; private calculateMedia; /** * Updates the state of the MultiSelect when the complex keyboard navigation that * includes key combinations with the Ctrl/Command, Shift, Home and End keys * * @param {Array<string | Object>} dataToSet Defines the array of new values that will be applied to the MultiSelect * @param {MultiSelectInternalState} state The current state of the MultiSelect */ private updateStateOnKeyboardNavigation; /** * Returns the last element that was selected or deselected. Needed for the keyboard navigation specifications * * @param {number} correction A correction is needed depending on if UP or DOWN key is pressed */ private getLastSelectedOrDeselectedIndex; } /** * @hidden */ declare class Navigation { navigate(args: { keyCode: number; current: number; max: number; min: number; skipItems?: number; }): number | undefined; private next; } /** * @hidden */ export declare const nodata = "dropdowns.nodata"; /** * @hidden */ declare interface OpenEvent<T> extends DropdownEvent<T> { } /** * Represents the `skip` and `take` configurations which are wrapped in the `page` object. */ export declare interface Page { /** * The number of records to skip. */ skip: number; /** * The number of records to take. */ take: number; } /** * @hidden */ declare interface PageChangeEvent<T> extends DropdownEvent<T> { page: Page; } /** * @hidden */ export declare const scrollToItem: (scrollElem: HTMLDivElement, list: HTMLUListElement, itemIndex: number, translate: number, virtualScroll: boolean) => void; /** * @hidden */ export declare class SearchBar extends React_2.Component<SearchBarProps> { private _input; /** * @hidden */ get input(): HTMLInputElement | null; componentDidUpdate(prevProps: SearchBarProps): void; render(): string | number | bigint | boolean | Iterable<React_2.ReactNode> | Promise<string | number | bigint | boolean | React_2.ReactPortal | React_2.ReactElement<unknown, string | React_2.JSXElementConstructor<any>> | Iterable<React_2.ReactNode> | null | undefined> | JSX.Element | null | undefined; } /** * @hidden */ declare interface SearchBarProps { value: string; onChange: React_2.FormEventHandler<HTMLInputElement>; render?: (rendering: React_2.ReactElement<HTMLSpanElement>) => React_2.ReactNode; id?: string; placeholder?: string; title?: string; tabIndex?: number; size?: number; suggestedText?: string; focused?: boolean; onKeyDown?: React_2.KeyboardEventHandler<HTMLInputElement>; onFocus?: React_2.FocusEventHandler<HTMLInputElement>; onBlur?: React_2.FocusEventHandler<HTMLInputElement>; onClick?: React_2.MouseEventHandler<HTMLInputElement>; disabled?: boolean; readOnly?: boolean; expanded?: boolean; owns?: string; role?: string; name?: string; activedescendant?: string; accessKey?: string; ariaLabelledBy?: string; ariaLabel?: string; ariaDescribedBy?: string; ariaRequired?: boolean; ariaControls?: string; unstyled?: DropDownsClassStructure; inputAttributes?: React_2.InputHTMLAttributes<HTMLInputElement>; } /** * Represents the `Suggestion` object of the AutoComplete. */ export declare interface Suggestion { /** * Represents the typed text of the user. */ readonly userInput: string; /** * Represents the suggested text without the user input. */ readonly value: string; } /** * Represents the tag data. */ declare interface TagData { /** * Represents the text of the tag. */ text: string; /** * Represents the data items which correspond to the tag. */ data: Array<any>; } export { TagData as MultiSelectTagData } export { TagData } /** * @hidden */ export declare class TagList extends React_2.Component<TagListProps, {}> { render(): JSX.Element; } /** * @hidden */ declare interface TagListProps { children?: React_2.ReactNode; data: Array<TagData>; guid: string; focused?: TagData; onTagDelete: (items: Array<any>, event: React_2.MouseEvent<HTMLSpanElement>) => void; tagRender?: (tagData: TagData, tag: React_2.ReactElement<any>) => React_2.ReactElement<any>; tag?: React_2.ComponentType<{ tagData: TagData; guid: string; focusedTag?: TagData; onTagDelete: (items: Array<any>, event: React_2.MouseEvent<HTMLSpanElement>) => void; }>; size?: null | 'small' | 'medium' | 'large'; } /** * The props of the `ValueHolder` component ([see example]({% slug customrendering_dropdowntree %}#toc-items-and-value-element)). */ export declare interface ValueHolderProps { children?: React.ReactNode; item?: any; } /** * The virtualization settings. */ export declare interface VirtualizationSettings { /** * The number of the requested records. */ pageSize: number; /** * The number of records to skip. */ skip: number; /** * The number of all records. */ total: number; } /** * @hidden */ declare class VirtualScroll { table: HTMLTableElement | null; total: number; enabled: boolean; skip: number; pageSize: number; PageChange: ((event: Page, syntheticEvent: React_2.SyntheticEvent<any>) => void) | null; scrollElement: HTMLDivElement | null; listTransform: string; itemHeight: number; containerHeight: number; rowHeightService?: RowHeightService; private reactVersion; private scrollSyncing; private lastLoaded; private firstLoaded; private lastScrollTop; private listTranslate; get translate(): number; list: HTMLUListElement | null; container: HTMLDivElement | null; constructor(); translateTo(dY: number, force?: boolean): void; changePage(skip: number, e: React_2.SyntheticEvent<HTMLDivElement>): void; reset(): void; scrollToEnd(): void; calcScrollElementHeight: () => boolean; scrollerRef: (element: HTMLDivElement | null) => void; scrollHandler(e: React_2.SyntheticEvent<HTMLDivElement>): void; private getRowHeightService; } export { }