@progress/kendo-react-dropdowns 7.2.4-develop.3 → 7.3.0-develop.1

package/ComboBox/ComboBox.d.ts

@@ -1,254 +0,0 @@
-/**-----------------------------------------------------------------------------------------
-* Copyright © 2024 Progress Software Corporation. All rights reserved.
-* Licensed under commercial license. See LICENSE.md in the package root for more information
-*-------------------------------------------------------------------------------------------*/
-import * as React from 'react';
-import PropTypes from 'prop-types';
-import { ComboBoxProps } from './ComboBoxProps';
-import { DropDownStateBase, InternalState } from './../common/settings';
-import DropDownBase from '../common/DropDownBase';
-import { FormComponent, FormComponentValidity } from '@progress/kendo-react-common';
-/** @hidden */
-export interface ComboBoxState extends DropDownStateBase {
-    filterText?: string;
-    suggestedText?: string;
-    focusedItem?: any;
-    windowWidth?: number;
-}
-/** @hidden */
-export interface ComboInternalState extends InternalState {
-    data: ComboBoxState;
-}
-/** @hidden */
-export declare class ComboBoxWithoutContext extends React.Component<ComboBoxProps, ComboBoxState> implements FormComponent {
-    static displayName: string;
-    /** @hidden */
-    static propTypes: {
-        size: PropTypes.Requireable<"small" | "medium" | "large" | null | undefined>;
-        rounded: PropTypes.Requireable<"small" | "medium" | "large" | "full" | null | undefined>;
-        fillMode: PropTypes.Requireable<"solid" | "flat" | "outline" | null | undefined>;
-        dataItemKey: PropTypes.Requireable<string>;
-        groupField: PropTypes.Requireable<string>;
-        groupMode: PropTypes.Requireable<string | undefined>;
-        isMultiColumn: PropTypes.Requireable<boolean>;
-        suggest: PropTypes.Requireable<boolean>;
-        placeholder: PropTypes.Requireable<string>;
-        title: PropTypes.Requireable<string>;
-        allowCustom: PropTypes.Requireable<boolean>;
-        clearButton: PropTypes.Requireable<boolean>;
-        iconClassName: PropTypes.Requireable<string>;
-        svgIcon: PropTypes.Requireable<PropTypes.InferProps<{
-            name: PropTypes.Validator<string>;
-            content: PropTypes.Validator<string>;
-            viewBox: PropTypes.Validator<string>;
-        }>>;
-        validationMessage: PropTypes.Requireable<string>;
-        required: PropTypes.Requireable<boolean>;
-        id: PropTypes.Requireable<string>;
-        ariaLabelledBy: PropTypes.Requireable<string>;
-        ariaDescribedBy: PropTypes.Requireable<string>;
-        list: PropTypes.Requireable<any>;
-        valueRender: PropTypes.Requireable<(...args: any[]) => any>;
-        skipDisabledItems: PropTypes.Requireable<boolean>;
-        value: PropTypes.Requireable<any>;
-        defaultValue: PropTypes.Requireable<any>;
-        filterable: PropTypes.Requireable<boolean>;
-        filter: PropTypes.Requireable<string>;
-        virtual: PropTypes.Requireable<PropTypes.InferProps<{
-            pageSize: PropTypes.Validator<number>;
-            skip: PropTypes.Validator<number>;
-            total: PropTypes.Validator<number>;
-        }>>;
-        onFilterChange: PropTypes.Requireable<(...args: any[]) => any>;
-        onPageChange: PropTypes.Requireable<(...args: any[]) => any>;
-        opened: PropTypes.Requireable<boolean>;
-        disabled: PropTypes.Requireable<boolean>;
-        dir: PropTypes.Requireable<string>;
-        tabIndex: PropTypes.Requireable<number>;
-        accessKey: PropTypes.Requireable<string>;
-        data: PropTypes.Requireable<any[]>;
-        textField: PropTypes.Requireable<string>;
-        className: PropTypes.Requireable<string>;
-        label: PropTypes.Requireable<string>;
-        loading: PropTypes.Requireable<boolean>;
-        popupSettings: PropTypes.Requireable<PropTypes.InferProps<{
-            animate: PropTypes.Requireable<NonNullable<boolean | PropTypes.InferProps<{
-                openDuration: PropTypes.Requireable<number>;
-                closeDuration: PropTypes.Requireable<number>;
-            }> | null | undefined>>;
-            popupClass: PropTypes.Requireable<string>;
-            className: PropTypes.Requireable<string>;
-            appendTo: PropTypes.Requireable<any>;
-            width: PropTypes.Requireable<NonNullable<string | number | null | undefined>>;
-            height: PropTypes.Requireable<NonNullable<string | number | null | undefined>>;
-        }>>;
-        onOpen: PropTypes.Requireable<(...args: any[]) => any>;
-        onClose: PropTypes.Requireable<(...args: any[]) => any>;
-        onFocus: PropTypes.Requireable<(...args: any[]) => any>;
-        onBlur: PropTypes.Requireable<(...args: any[]) => any>;
-        onChange: PropTypes.Requireable<(...args: any[]) => any>;
-        itemRender: PropTypes.Requireable<(...args: any[]) => any>;
-        listNoDataRender: PropTypes.Requireable<(...args: any[]) => any>;
-        focusedItemIndex: PropTypes.Requireable<(...args: any[]) => any>;
-        header: PropTypes.Requireable<PropTypes.ReactNodeLike>;
-        footer: PropTypes.Requireable<PropTypes.ReactNodeLike>;
-    };
-    /** @hidden */
-    static defaultProps: {
-        size: "small" | "medium" | "large" | null | undefined;
-        rounded: "small" | "medium" | "large" | "full" | null | undefined;
-        fillMode: "solid" | "flat" | "outline" | null | undefined;
-        allowCustom: boolean;
-        clearButton: boolean;
-        required: boolean;
-        groupMode: string | undefined;
-        isMultiColumn: boolean;
-        skipDisabledItems: boolean;
-        prefix: undefined;
-        suffix: undefined;
-        popupSettings: {
-            height: string;
-        };
-        validityStyles: boolean;
-    };
-    /** @hidden */
-    readonly state: ComboBoxState;
-    protected readonly base: DropDownBase;
-    private _element;
-    private get _inputId();
-    private _valueDuringOnChange;
-    private _valueOnDidUpdate;
-    private _suggested;
-    private _skipBlur;
-    private _input;
-    private _adaptiveFilterInput;
-    private itemHeight;
-    private observerResize?;
-    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 */
-    componentDidUpdate(prevProps: ComboBoxProps, prevState: ComboBoxState): void;
-    /** @hidden */
-    componentDidMount(): void;
-    /** @hidden */
-    componentWillUnmount(): void;
-    /** @hidden */
-    render(): import("react/jsx-runtime").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 applyValueOnRejectSuggestions;
-    private selectFocusedItem;
-    private renderAdaptiveListContainer;
-    private renderMobileListFilter;
-    private renderListContainer;
-    private renderList;
-    private handleMobileFilterChange;
-    private renderSearchBar;
-    private onScroll;
-    private handleItemClick;
-    private handleBlur;
-    private onInputClick;
-    private onInputKeyDown;
-    private inputOnChange;
-    private clearValue;
-    private clearButtonClick;
-    private clearValueOnEnterOrEsc;
-    private clearValueOnBlur;
-    private clearValueOnToggleBtnClick;
-    private triggerOnChange;
-    private getFocusedIndex;
-    private suggestValue;
-    private applyState;
-    private setValidity;
-    private calculateMedia;
-}
-/**
- * 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.Context<(p: ComboBoxProps) => ComboBoxProps>;
-/**
- * Represent the `ref` of the ComboBox component.
- */
-export 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;
-}
-/** @hidden */
-export 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.ForwardRefExoticComponent<ComboBoxProps & React.RefAttributes<any>>;

package/ComboBox/ComboBoxProps.d.ts

@@ -1,324 +0,0 @@
-/**-----------------------------------------------------------------------------------------
-* Copyright © 2024 Progress Software Corporation. All rights reserved.
-* Licensed under commercial license. See LICENSE.md in the package root for more information
-*-------------------------------------------------------------------------------------------*/
-import { ComboBox } from './ComboBox';
-import { FilterChangeEvent, ChangeEvent, OpenEvent, CloseEvent, FocusEvent, BlurEvent, PageChangeEvent } from './../common/events';
-import { CustomComponent, FormComponentProps, SVGIcon } from '@progress/kendo-react-common';
-import { VirtualizationSettings, DropDownsPopupSettings } from '../common/settings';
-import { ListItemProps } from '../common/ListItem';
-import { ListGroupItemProps } from '../common/ListGroupItem';
-import { GroupStickyHeaderProps } from '../common/GroupStickyHeader';
-/**
- * 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]({% slug overview_combobox %}).
- */
-export interface ComboBoxProps extends FormComponentProps {
-    /**
-     * Sets the data of the ComboBox ([more information and examples]({% slug binding_combobox %})).
-     */
-    data?: any[];
-    /**
-     * Sets the opened and closed state of the ComboBox.
-     */
-    opened?: boolean;
-    /**
-     * The styles that are applied to the ComboBox.
-     */
-    style?: React.CSSProperties;
-    /**
-     * Sets the value of the ComboBox ([more information and examples]({% slug binding_combobox %})). It can either be of the primitive (string, numbers) or of the complex (objects) type.
-     */
-    value?: any;
-    /**
-     * Sets the default value of the ComboBox. Similar to the native `select` HTML element.
-     */
-    defaultValue?: any;
-    /**
-     * Sets additional classes to the ComboBox.
-     */
-    className?: string;
-    /**
-     * Sets CSS classes to the expand `icon` DOM element.
-     */
-    iconClassName?: string;
-    /**
-     * Sets the specified SVG icon.
-     */
-    svgIcon?: SVGIcon;
-    /**
-     * If `clearButton` is set to `true`, the ComboBox renders a button on hovering over the component. Clicking this button resets the value of the ComboBox to `undefined` and triggers the `change` event.
-     */
-    clearButton?: boolean;
-    /**
-     * The hint that is displayed when the ComboBox is empty.
-     */
-    placeholder?: string;
-    /**
-     * Sets the title attribute to the underlying input element of the ComboBox.
-     */
-    title?: string;
-    /**
-     * Enables the auto-completion of the text based on the first data item ([see example]({% slug suggestions_combobox %})).
-     */
-    suggest?: boolean;
-    /**
-     * Specifies whether the ComboBox allows user-defined values that are not present in the dataset ([see example]({% slug custom_values_combobox %})). Defaults to `false`.
-     */
-    allowCustom?: boolean;
-    /**
-     * Sets the disabled state of the ComboBox.
-     */
-    disabled?: boolean;
-    /**
-     * Represents the `dir` HTML attribute.
-     */
-    dir?: string;
-    /**
-     * Enables the filtering functionality of the ComboBox ([more information and examples]({% slug filtering_combobox %})).
-     */
-    filterable?: boolean;
-    /**
-     * Sets the value of ComboBox input. Useful for making the ComboBox input a [controlled component](https://reactjs.org/docs/forms.html#controlled-components).
-     */
-    filter?: string | null;
-    /**
-     * Sets the value of the adaptive filtering input of the of ComboBox.
-     */
-    adaptiveFilter?: string;
-    /**
-     * Sets the loading state of the ComboBox ([see example]({% slug filtering_combobox %}#toc-basic-configuration)).
-     */
-    loading?: boolean;
-    /**
-     * Specifies the `tabIndex` of the ComboBox.
-     */
-    tabIndex?: number;
-    /**
-     * Specifies the `accessKey` of the ComboBox.
-     */
-    accessKey?: string;
-    /**
-     * Sets the data item field that represents the item text. If the data contains only primitive values, do not define it.
-     */
-    textField?: string;
-    /**
-     * Sets the data item field that represents the start of a group. Applicable to objects data.
-     */
-    groupField?: string;
-    /**
-     * Defines the `classic` or `modern` type of the grouping's visualization. Defaults to `modern`.
-     */
-    groupMode?: string;
-    /**
-     * @hidden Used to indicate if the ComboBox is with multiple columns
-     */
-    isMultiColumn?: boolean;
-    /**
-     * Sets the key for comparing the data items of the ComboBox. If `dataItemKey` is not set, the ComboBox compares the items by reference ([see example]({% slug binding_combobox %}#toc-datasets-of-objects)).
-     */
-    dataItemKey?: string;
-    /**
-     * Renders a floating label for the ComboBox.
-     */
-    label?: string;
-    /**
-     * Configures the popup of the ComboBox.
-     */
-    popupSettings?: DropDownsPopupSettings;
-    /**
-     * Configures the virtual scrolling of the ComboBox ([more information and examples]({% slug virtualization_combobox %})).
-     */
-    virtual?: VirtualizationSettings;
-    /**
-     * Specifies the id of the component.
-     */
-    id?: string;
-    /**
-     * Identifies the element(s) which will describe the component, similar to [HTML aria-describedby attribute](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-describedby_attribute).
-     * For example these elements could contain error or hint message.
-     */
-    ariaDescribedBy?: string;
-    /**
-     * Identifies the element(s) which will label the component.
-     */
-    ariaLabelledBy?: string;
-    /**
-     * If set, the ComboBox will use it to get the focused item index.
-     *
-     * Default functionality returns the first item which starts with the input text.
-     *
-     * @example
-     * ```jsx-no-run
-     * const focusedItemIndex = (data, inputText, textField) => {
-     *     let text = inputText.toLowerCase();
-     *     return data.findIndex(item =>
-     *         String(textField ? item[textField] : item).toLowerCase().includes(text));
-     * };
-     *
-     * <ComboBox focusedItemIndex={focusedItemIndex} />
-     * ```
-     */
-    focusedItemIndex?: (data: any, inputText: string, textField?: string) => number;
-    /**
-     * Fires each time the popup of the ComboBox is about to open.
-     */
-    onOpen?: (event: ComboBoxOpenEvent) => void;
-    /**
-     * Fires each time the popup of the ComboBox is about to close.
-     */
-    onClose?: (event: ComboBoxCloseEvent) => void;
-    /**
-     * Fires each time the user focuses the ComboBox.
-     */
-    onFocus?: (event: ComboBoxFocusEvent) => void;
-    /**
-     * Fires each time the ComboBox gets blurred.
-     */
-    onBlur?: (event: ComboBoxBlurEvent) => void;
-    /**
-     * Fires each time the value of the ComboBox is about to change ([see examples]({% slug binding_combobox %})).
-     */
-    onChange?: (event: ComboBoxChangeEvent) => void;
-    /**
-     * Fires each time the user types in the filter input ([see examples]({% slug filtering_combobox %}#toc-basic-configuration)). You can filter the source based on the passed filtration value.
-     */
-    onFilterChange?: (event: ComboBoxFilterChangeEvent) => void;
-    /**
-     * Fires when both the virtual scrolling of the ComboBox is enabled and the component requires data for another page ([more information and examples]({% slug virtualization_combobox %})).
-     */
-    onPageChange?: (event: ComboBoxPageChangeEvent) => void;
-    /**
-     * Fires when the ComboBox input element is about to be rendered. Use it to override the default appearance of the component.
-     */
-    valueRender?: (rendering: React.ReactElement<HTMLSpanElement>) => React.ReactNode;
-    /**
-     * Fires when a ComboBox list item is about to be rendered ([see example]({% slug customrendering_combobox %}#toc-items)). Used to override the default appearance of the list items.
-     */
-    itemRender?: (li: React.ReactElement<HTMLLIElement>, itemProps: ListItemProps) => React.ReactNode;
-    /**
-     * Fires when a ComboBox group header item is about to be rendered. Used to override the default appearance of the group's headers when the component is configured in `modern` group mode.
-     */
-    groupHeaderItemRender?: (li: React.ReactElement<HTMLLIElement>, itemProps: ListGroupItemProps) => React.ReactNode;
-    /**
-     * Fires when a ComboBox sticky group header item is about to be rendered. Used to override the default appearance of the sticky group header of the component.
-     */
-    groupStickyHeaderItemRender?: (div: React.ReactElement<HTMLDivElement>, stickyHeaderProps: GroupStickyHeaderProps) => React.ReactNode;
-    /**
-     * Fires when the element which indicates no data in the popup is about to be rendered. Used to override the default appearance of the element.
-     */
-    listNoDataRender?: (element: React.ReactElement<HTMLDivElement>) => React.ReactNode;
-    /**
-     * @hidden
-     */
-    onGroupScroll?: (event: {
-        group?: string;
-    }) => void;
-    /**
-     * Sets the header component of the ComboBox ([see example]({% slug customrendering_combobox %}#toc-headers-and-footers)).
-     */
-    header?: React.ReactNode;
-    /**
-     * Sets the footer component of the ComboBox ([see example]({% slug customrendering_combobox %}#toc-headers-and-footers)).
-     */
-    footer?: React.ReactNode;
-    /**
-     * @hidden
-     */
-    footerClassName?: string;
-    /**
-     * @hidden
-     */
-    list?: any;
-    /**
-     * Configures the `size` of the ComboBox.
-     *
-     * The available options are:
-     * - small
-     * - medium
-     * - large
-     * - null&mdash;Does not set a size `className`.
-     *
-     * @default `medium`
-     */
-    size?: null | 'small' | 'medium' | 'large';
-    /**
-     * Configures the `roundness` of the ComboBox.
-     *
-     * The available options are:
-     * - small
-     * - medium
-     * - large
-     * - full
-     * - null&mdash;Does not set a rounded `className`.
-     *
-     * @default `medium`
-     */
-    rounded?: null | 'small' | 'medium' | 'large' | 'full';
-    /**
-     * Configures the `fillMode` of the ComboBox.
-     *
-     * The available options are:
-     * - solid
-     * - flat
-     * - outline
-     * - null&mdash;Does not set a fillMode `className`.
-     *
-     * @default `solid`
-     */
-    fillMode?: null | 'solid' | 'flat' | 'outline';
-    /**
-     * Providing different rendering of the popup element based on the screen dimensions.
-     */
-    adaptive?: boolean;
-    /**
-     * Specifies the text that is rendered as title in the adaptive popup.
-     */
-    adaptiveTitle?: string;
-    /**
-     * Defines if ComboBox's disabled items will be skipped or focused when navigating through the list of items using a keyboard. Defaults to `true`.
-     */
-    skipDisabledItems?: boolean;
-    /**
-     * Sets a custom prefix to the ComboBox component.
-     */
-    prefix?: CustomComponent<any>;
-    /**
-     * Sets a custom suffix to the ComboBox component.
-     */
-    suffix?: CustomComponent<any>;
-}