@progress/kendo-react-dropdowns 13.3.0 → 13.4.0-develop.1

package/ComboBox/ComboBoxProps.d.ts

@@ -0,0 +1,632 @@
+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2026 Progress Software Corporation. All rights reserved.
+ * Licensed under commercial license. See LICENSE.md in the package root for more information
+ *-------------------------------------------------------------------------------------------
+ */
+import { ComboBox } from './ComboBox.js';
+import { FilterChangeEvent, ChangeEvent, OpenEvent, CloseEvent, FocusEvent, BlurEvent, PageChangeEvent } from './../common/events.js';
+import { AdaptiveModeContextType, CustomComponent, DropDownsClassStructure, FormComponentProps, SVGIcon } from '@progress/kendo-react-common';
+import { VirtualizationSettings, DropDownsPopupSettings } from '../common/settings.js';
+import { ListItemProps } from '../common/ListItem.js';
+import { ListGroupItemProps } from '../common/ListGroupItem.js';
+import { GroupStickyHeaderProps } from '../common/GroupStickyHeader.js';
+/**
+ * Represents the object of the `FilterChange` ComboBox event.
+ */
+export interface ComboBoxFilterChangeEvent extends FilterChangeEvent<ComboBox> {
+}
+/**
+ * Represents the object of the `change` ComboBox event.
+ */
+export interface ComboBoxChangeEvent extends ChangeEvent<ComboBox> {
+}
+/**
+ * Represents the object of the `open` ComboBox event.
+ */
+export interface ComboBoxOpenEvent extends OpenEvent<ComboBox> {
+}
+/**
+ * Represents the object of the `close` ComboBox event.
+ */
+export interface ComboBoxCloseEvent extends CloseEvent<ComboBox> {
+}
+/**
+ * Represents the object of the `focus` ComboBox event.
+ */
+export interface ComboBoxFocusEvent extends FocusEvent<ComboBox> {
+}
+/**
+ * Represents the object of the `blur` ComboBox event.
+ */
+export interface ComboBoxBlurEvent extends BlurEvent<ComboBox> {
+}
+/**
+ * Represents the object of the `PageChange` ComboBox event.
+ */
+export interface ComboBoxPageChangeEvent extends PageChangeEvent<ComboBox> {
+}
+/**
+ * Represents the props of the [KendoReact ComboBox component](https://www.telerik.com/kendo-react-ui/components/dropdowns/combobox).
+ */
+export interface ComboBoxProps extends FormComponentProps {
+    /**
+     * Sets the data of the ComboBox ([more information and examples](https://www.telerik.com/kendo-react-ui/components/dropdowns/combobox/binding)).
+     *
+     * @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](https://www.telerik.com/kendo-react-ui/components/dropdowns/combobox/binding)).
+     *
+     * @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](https://www.telerik.com/kendo-react-ui/components/dropdowns/combobox/suggestions)).
+     *
+     * @example
+     * ```jsx
+     * <ComboBox suggest={true} />
+     * ```
+     */
+    suggest?: boolean;
+    /**
+     * Specifies whether the ComboBox allows user-defined values that are not present in the dataset ([see example](https://www.telerik.com/kendo-react-ui/components/dropdowns/combobox/custom-values)). Defaults to `false`.
+     *
+     * @example
+     * ```jsx
+     * <ComboBox allowCustom={true} />
+     * ```
+     */
+    allowCustom?: boolean;
+    /**
+     * Specifies whether the ComboBox text matching should be case-insensitive when selecting values on blur or Enter key.
+     * When set to `true`, typing "football" will match and select "Football" from the list.
+     * Defaults to `false` (case-sensitive matching).
+     *
+     * @example
+     * ```jsx
+     * <ComboBox ignoreCase={true} />
+     * ```
+     */
+    ignoreCase?: 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](https://www.telerik.com/kendo-react-ui/components/dropdowns/combobox/filtering)).
+     *
+     * @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](https://www.telerik.com/kendo-react-ui/components/dropdowns/combobox/filtering#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;
+    /**
+     * @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](https://www.telerik.com/kendo-react-ui/components/dropdowns/combobox/binding#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](https://www.telerik.com/kendo-react-ui/components/dropdowns/combobox/virtualization)).
+     *
+     * @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](https://www.telerik.com/kendo-react-ui/components/dropdowns/combobox/binding)).
+     *
+     * @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](https://www.telerik.com/kendo-react-ui/components/dropdowns/combobox/filtering#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](https://www.telerik.com/kendo-react-ui/components/dropdowns/combobox/virtualization)).
+     *
+     * @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](https://www.telerik.com/kendo-react-ui/components/dropdowns/combobox/custom-rendering#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](https://www.telerik.com/kendo-react-ui/components/dropdowns/combobox/custom-rendering#toc-headers-and-footers)).
+     *
+     * @example
+     * ```jsx
+     * <ComboBox header={<div>Header Content</div>} />
+     * ```
+     */
+    header?: React.ReactNode;
+    /**
+     * Sets the footer component of the ComboBox ([see example](https://www.telerik.com/kendo-react-ui/components/dropdowns/combobox/custom-rendering#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
+     *
+     * @default undefined (theme-controlled)
+     *
+     * @example
+     * ```jsx
+     * <ComboBox size="large" />
+     * ```
+     */
+    size?: 'small' | 'medium' | 'large';
+    /**
+     * Configures the `roundness` of the ComboBox.
+     *
+     * The available options are:
+     * - small
+     * - medium
+     * - large
+     * - full
+     *
+     * @default undefined (theme-controlled)
+     *
+     * @example
+     * ```jsx
+     * <ComboBox rounded="full" />
+     * ```
+     */
+    rounded?: 'small' | 'medium' | 'large' | 'full';
+    /**
+     * Configures the `fillMode` of the ComboBox.
+     *
+     * The available options are:
+     * - solid
+     * - flat
+     * - outline
+     *
+     * @default undefined (theme-controlled)
+     *
+     * @example
+     * ```jsx
+     * <ComboBox fillMode="flat" />
+     * ```
+     */
+    fillMode?: '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;
+}

package/DropDownList/DropDownList.d.ts

@@ -0,0 +1,41 @@
+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2026 Progress Software Corporation. All rights reserved.
+ * Licensed under commercial license. See LICENSE.md in the package root for more information
+ *-------------------------------------------------------------------------------------------
+ */
+import { DropDownListProps } from './DropDownListProps.js';
+import { DropDownListHandle } from './models/index.js';
+import * as React from 'react';
+/**
+ * Represents the [KendoReact DropDownList component](https://www.telerik.com/kendo-react-ui/components/dropdowns/dropdownlist).
+ *
+ * Accepts properties of type [DropDownListProps](https://www.telerik.com/kendo-react-ui/components/dropdowns/api/dropdownlistprops).
+ * Obtaining the `ref` returns an object of type [DropDownListHandle](https://www.telerik.com/kendo-react-ui/components/dropdowns/api/dropdownlisthandle).
+ *
+ */
+export declare const DropDownList: React.ForwardRefExoticComponent<DropDownListProps & React.RefAttributes<DropDownListHandle>>;
+/**
+ * The default props of the DropDownList component.
+ */
+export declare const dropDownListDefaultProps: {
+    required: boolean;
+    size: "small" | "medium" | "large" | undefined;
+    rounded: "small" | "medium" | "large" | "full" | undefined;
+    fillMode: "flat" | "solid" | "outline" | undefined;
+    popupSettings: {
+        height: string;
+    };
+    validityStyles: boolean;
+    delay: number;
+    tabIndex: number;
+    ignoreCase: boolean;
+};
+/**
+ * Represents the PropsContext of the `DropDownList` component.
+ * Used for global configuration of all `DropDownList` instances.
+ *
+ * For more information, refer to the [Dropdowns Props Context](https://www.telerik.com/kendo-react-ui/components/dropdowns/props-context) article.
+ */
+export declare const DropDownListPropsContext: React.Context<(p: DropDownListProps) => DropDownListProps>;