@progress/kendo-vue-dropdowns 8.0.3-develop.2 → 8.0.3-develop.3

package/DropDownTree/DropDownTree.d.ts

@@ -0,0 +1,301 @@
+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2026 Progress Software Corporation. All rights reserved.
+ * Licensed under commercial license. See LICENSE.md in the package root for more information
+ *-------------------------------------------------------------------------------------------
+ */
+import { TreeViewExpandChangeEvent, TreeViewItemClickEvent } from '@progress/kendo-vue-treeview';
+import { DropDownTreeFilterChangeEvent, DropDownTreeFocusEvent, DropDownTreeBlurEvent, DropDownTreeChangeEvent, DropDownTreeOpenEvent, DropDownTreeCloseEvent, DropDownTreeExpandEvent } from './DropDownTreeProps';
+import { DropdownEvent } from '../common/events';
+import { PropType } from 'vue';
+/**
+ * @hidden
+ */
+export interface DropDownTreeComputed {
+    [key: string]: any;
+    isOpen: boolean;
+    computedValue: any;
+    hasValue: boolean;
+    currentValueText: string;
+    wrapperClass: object;
+}
+/**
+ * @hidden
+ */
+declare const DropDownTree: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
+    opened: {
+        type: PropType<boolean>;
+        default: any;
+    };
+    disabled: PropType<boolean>;
+    dir: PropType<string>;
+    tabIndex: PropType<number>;
+    accessKey: PropType<string>;
+    dataItems: {
+        type: PropType<any[]>;
+        default: () => any[];
+    };
+    value: {
+        type: PropType<any>;
+        default: () => any;
+    };
+    modelValue: {
+        type: PropType<any>;
+        default: () => any;
+    };
+    valueMap: PropType<(value: any) => any>;
+    placeholder: PropType<string>;
+    dataItemKey: {
+        type: PropType<string>;
+        required: true;
+    };
+    textField: {
+        type: PropType<string>;
+        required: true;
+    };
+    selectField: {
+        type: PropType<string>;
+        default: string;
+    };
+    expandField: PropType<string>;
+    subItemsField: {
+        type: PropType<string>;
+        default: string;
+    };
+    className: PropType<string>;
+    label: PropType<string>;
+    validationMessage: PropType<string>;
+    validityStyles: {
+        type: PropType<boolean>;
+        default: boolean;
+    };
+    valid: {
+        type: PropType<boolean>;
+        default: any;
+    };
+    required: PropType<boolean>;
+    name: PropType<string>;
+    id: PropType<string>;
+    ariaLabel: {
+        type: PropType<string>;
+        default: any;
+    };
+    ariaLabelledBy: PropType<string>;
+    ariaDescribedBy: PropType<string>;
+    filterable: PropType<boolean>;
+    filter: PropType<string>;
+    loading: PropType<boolean>;
+    popupSettings: {
+        type: PropType<import('..').DropDownsPopupSettings>;
+        default: () => {
+            animate: boolean;
+            height: string;
+            anchor: string;
+        };
+    };
+    size: {
+        type: PropType<"small" | "medium" | "large">;
+        validator: (value: any) => boolean;
+    };
+    rounded: {
+        type: PropType<"small" | "medium" | "large" | "full" | "none">;
+        validator: (value: any) => boolean;
+    };
+    fillMode: {
+        type: PropType<"flat" | "solid" | "outline">;
+        validator: (value: any) => boolean;
+    };
+    item: PropType<any>;
+    header: PropType<any>;
+    footer: PropType<any>;
+    valueRender: PropType<any>;
+    listNoData: PropType<any>;
+    adaptive: {
+        type: PropType<boolean>;
+        default: any;
+    };
+    adaptiveTitle: {
+        type: PropType<string>;
+        default: any;
+    };
+}>, {}, {
+    currentOpened: boolean;
+    focused: boolean;
+    filterState: string;
+    currentValue: any;
+    popupWidth: string;
+    windowWidth: number;
+    initialAdaptiveRenderingValues: any;
+}, {
+    wrapperClass(): {
+        [x: string]: any;
+        [x: number]: any;
+        'k-dropdowntree': boolean;
+        'k-picker': boolean;
+        'k-focus': any;
+        'k-invalid': boolean;
+        'k-loading': any;
+        'k-required': any;
+        'k-disabled': any;
+    };
+    animationStyles(): object | undefined;
+    classNameAdaptive(): string;
+    adaptiveState(): any;
+    isOpen(): any;
+    computedValue(): any;
+    hasValue(): boolean;
+    currentValueText(): any;
+}, {
+    calculateMedia(entries: ResizeObserverEntry[]): void;
+    calculatePopupWidth(): void;
+    focus(): void;
+    setValidity(): void;
+    openPopup(event: DropdownEvent): void;
+    closePopup(event: DropdownEvent): void;
+    onWrapperClick(event: any): void;
+    switchFocus(focusFn: () => void): void;
+    onWrapperKeyDown(event: any): any;
+    onInputKeyDown(event: KeyboardEvent): void;
+    focusElement(element: HTMLElement | null): void;
+    onPopupOpened(): void;
+    onPopupClosed(): void;
+    onFocus(event: any): void;
+    onBlur(event: any): void;
+    onWrapperMouseDown(): void;
+    changeValue(event: DropdownEvent, newValue: any, hierarchicalIndex?: string): void;
+    onChange(e: TreeViewItemClickEvent): void;
+    onClear(event: any): void;
+    onExpand(e: TreeViewExpandChangeEvent): void;
+    onFilterChange(event: any): void;
+}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    open: (event: DropDownTreeOpenEvent) => true;
+    close: (event: DropDownTreeCloseEvent) => true;
+    focus: (event: DropDownTreeFocusEvent) => true;
+    blur: (event: DropDownTreeBlurEvent) => true;
+    change: (event: DropDownTreeChangeEvent) => true;
+    filterchange: (event: DropDownTreeFilterChangeEvent) => true;
+    expandchange: (event: DropDownTreeExpandEvent) => true;
+    changemodel: (value: any) => true;
+    'update:modelValue': (value: any) => true;
+}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
+    opened: {
+        type: PropType<boolean>;
+        default: any;
+    };
+    disabled: PropType<boolean>;
+    dir: PropType<string>;
+    tabIndex: PropType<number>;
+    accessKey: PropType<string>;
+    dataItems: {
+        type: PropType<any[]>;
+        default: () => any[];
+    };
+    value: {
+        type: PropType<any>;
+        default: () => any;
+    };
+    modelValue: {
+        type: PropType<any>;
+        default: () => any;
+    };
+    valueMap: PropType<(value: any) => any>;
+    placeholder: PropType<string>;
+    dataItemKey: {
+        type: PropType<string>;
+        required: true;
+    };
+    textField: {
+        type: PropType<string>;
+        required: true;
+    };
+    selectField: {
+        type: PropType<string>;
+        default: string;
+    };
+    expandField: PropType<string>;
+    subItemsField: {
+        type: PropType<string>;
+        default: string;
+    };
+    className: PropType<string>;
+    label: PropType<string>;
+    validationMessage: PropType<string>;
+    validityStyles: {
+        type: PropType<boolean>;
+        default: boolean;
+    };
+    valid: {
+        type: PropType<boolean>;
+        default: any;
+    };
+    required: PropType<boolean>;
+    name: PropType<string>;
+    id: PropType<string>;
+    ariaLabel: {
+        type: PropType<string>;
+        default: any;
+    };
+    ariaLabelledBy: PropType<string>;
+    ariaDescribedBy: PropType<string>;
+    filterable: PropType<boolean>;
+    filter: PropType<string>;
+    loading: PropType<boolean>;
+    popupSettings: {
+        type: PropType<import('..').DropDownsPopupSettings>;
+        default: () => {
+            animate: boolean;
+            height: string;
+            anchor: string;
+        };
+    };
+    size: {
+        type: PropType<"small" | "medium" | "large">;
+        validator: (value: any) => boolean;
+    };
+    rounded: {
+        type: PropType<"small" | "medium" | "large" | "full" | "none">;
+        validator: (value: any) => boolean;
+    };
+    fillMode: {
+        type: PropType<"flat" | "solid" | "outline">;
+        validator: (value: any) => boolean;
+    };
+    item: PropType<any>;
+    header: PropType<any>;
+    footer: PropType<any>;
+    valueRender: PropType<any>;
+    listNoData: PropType<any>;
+    adaptive: {
+        type: PropType<boolean>;
+        default: any;
+    };
+    adaptiveTitle: {
+        type: PropType<string>;
+        default: any;
+    };
+}>> & Readonly<{
+    onBlur?: (event: DropDownTreeBlurEvent) => any;
+    onChange?: (event: DropDownTreeChangeEvent) => any;
+    onClose?: (event: DropDownTreeCloseEvent) => any;
+    onFocus?: (event: DropDownTreeFocusEvent) => any;
+    onOpen?: (event: DropDownTreeOpenEvent) => any;
+    onChangemodel?: (value: any) => any;
+    "onUpdate:modelValue"?: (value: any) => any;
+    onFilterchange?: (event: DropDownTreeFilterChangeEvent) => any;
+    onExpandchange?: (event: DropDownTreeExpandEvent) => any;
+}>, {
+    value: any;
+    ariaLabel: string;
+    adaptive: boolean;
+    dataItems: any[];
+    opened: boolean;
+    popupSettings: import('..').DropDownsPopupSettings;
+    modelValue: any;
+    valid: boolean;
+    validityStyles: boolean;
+    adaptiveTitle: string;
+    selectField: string;
+    subItemsField: string;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
+export { DropDownTree };

package/DropDownTree/DropDownTreeProps.d.ts

@@ -0,0 +1,306 @@
+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2026 Progress Software Corporation. All rights reserved.
+ * Licensed under commercial license. See LICENSE.md in the package root for more information
+ *-------------------------------------------------------------------------------------------
+ */
+import { FormComponentProps } from '@progress/kendo-vue-common';
+import { ItemRenderProps } from '@progress/kendo-vue-treeview';
+import { FilterChangeEvent, ChangeEvent, OpenEvent, CloseEvent, FocusEvent, BlurEvent, DropdownEvent } from '../common/events';
+import { DropDownsPopupSettings } from '../common/settings';
+/**
+ * Represents the Object which is passed to the
+ */
+export 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 `onFilterChange` DropDownTree event.
+ */
+export interface DropDownTreeFilterChangeEvent extends FilterChangeEvent {
+}
+/**
+ * Represents the object of the `onChange` DropDownTree event.
+ */
+export interface DropDownTreeChangeEvent extends ChangeEvent {
+    level: number[];
+}
+/**
+ * Represents the object of the `onOpen` DropDownTree event.
+ */
+export interface DropDownTreeOpenEvent extends OpenEvent {
+}
+/**
+ * Represents the object of the `onClose` DropDownTree event.
+ */
+export interface DropDownTreeCloseEvent extends CloseEvent {
+}
+/**
+ * Represents the object of the `onFocus` DropDownTree event.
+ */
+export interface DropDownTreeFocusEvent extends FocusEvent {
+}
+/**
+ * Represents the object of the `onBlur` DropDownTree event.
+ */
+export interface DropDownTreeBlurEvent extends BlurEvent {
+}
+/**
+ * Represents the object of the `onExpandChange` DropDownTree event.
+ */
+export interface DropDownTreeExpandEvent extends DropdownEvent {
+    item: any;
+    level: number[];
+}
+/**
+ * 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 interface ItemProps extends ItemRenderProps {
+}
+/**
+ * The props of the `ListNoData` component ([see example]({% slug customrendering_dropdowntree %}#toc-no-data)).
+ */
+export interface ListNoDataProps {
+}
+/**
+ * The props of the `ValueHolder` component ([see example]({% slug customrendering_dropdowntree %}#toc-items-and-value-element)).
+ */
+export interface ValueHolderProps {
+    item?: any;
+}
+/**
+ * Represents the props of the [Kendo UI for Vue DropDownTree component]({% slug overview_dropdowntree %}).
+ */
+export interface DropDownTreeProps extends FormComponentProps {
+    /**
+     * Sets the data of the DropDownTree ([see example]({% slug overview_dropdowntree %})).
+     */
+    dataItems?: any[];
+    /**
+     * Sets the opened state of the DropDownTree.
+     */
+    opened?: boolean;
+    /**
+     * Sets the value of the DropDownTree ([see example]({% slug overview_dropdowntree %})).
+     * It can be an object from the data-tree.
+     */
+    value?: any;
+    modelValue?: any;
+    /**
+     * The hint that is displayed when the DropDownTree is empty.
+     */
+    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.
+     */
+    dataItemKey: string;
+    /**
+     * Sets additional classes to the DropDownTree.
+     */
+    className?: string;
+    /**
+     * Sets the disabled state of the DropDownTree.
+     */
+    disabled?: boolean;
+    /**
+     * Represents the `dir` HTML attribute.
+     */
+    dir?: string;
+    /**
+     * Renders a floating label for the DropDownTree.
+     */
+    label?: string;
+    /**
+     * 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;
+    /**
+     * Defines the [aria-label](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-label) attribute of the component.
+     */
+    ariaLabel?: string;
+    /**
+     * Enables the filtering functionality of the DropDownTree ([more information and examples]({% slug filtering_dropdowntree %})).
+     */
+    filterable?: boolean;
+    /**
+     * Sets the value of filtering input.
+     * Useful for making the filtering input a controlled component.
+     */
+    filter?: string;
+    /**
+     * Sets the loading state of the DropDownTree ([see example]({% slug filtering_dropdowntree %}#toc-visualize-filtering)).
+     */
+    loading?: boolean;
+    /**
+     * Specifies the `tabIndex` of the DropDownTree.
+     */
+    tabIndex?: number;
+    /**
+     * Specifies the `accessKey` of the DropDownTree.
+     */
+    accessKey?: string;
+    /**
+     * Sets the data item field that represents the item text ([see example]({% slug overview_dropdowntree %})).
+     */
+    textField: string;
+    /**
+     * Specifies the name of the field which will provide a Boolean representation of the selected state of the item.
+     */
+    selectField?: string;
+    /**
+     * Specifies the name of the field which will provide a Boolean representation of the expanded state of the item.
+     */
+    expandField?: string;
+    /**
+     * Specifies the name of the field which will provide an array representation of the item subitems.
+     * Defaults to 'items'.
+     */
+    subItemsField?: string;
+    /**
+     * Configures the popup of the DropDownTree.
+     */
+    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`.
+     *
+     * @example
+     * ```jsx-no-run
+     * class App extends React.Component {
+     *    render() {
+     *       return (
+     *          <form>
+     *              <DropDownTree
+     *                  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;
+    /**
+     * Fires each time the popup of the DropDownTree is about to open.
+     */
+    onOpen?: (event: DropDownTreeOpenEvent) => void;
+    /**
+     * Fires each time the popup of the DropDownTree is about to close.
+     */
+    onClose?: (event: DropDownTreeCloseEvent) => void;
+    /**
+     * Fires each time the user focuses the DropDownTree.
+     */
+    onFocus?: (event: DropDownTreeFocusEvent) => void;
+    /**
+     * Fires each time the DropDownTree gets blurred.
+     */
+    onBlur?: (event: DropDownTreeBlurEvent) => void;
+    /**
+     * Fires each time the value of the DropDownTree is about to change ([see examples]({% slug overview_dropdowntree %})).
+     */
+    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.
+     */
+    onFilterChange?: (event: DropDownTreeFilterChangeEvent) => void;
+    /**
+     * Fires when the expanding or collapsing of an item is requested ([see examples]({% slug overview_dropdowntree %})).
+     */
+    onExpandChange?: (event: any) => void;
+    /**
+     * Defines the slot that will be used for rendering each of the DropDownTree items
+     * ([see example]({% slug customrendering_dropdowntree %}#toc-items-and-value-element)).
+     */
+    item?: any;
+    /**
+     * Defines the slot that will be used for rendering the selected value
+     * ([see example]({% slug customrendering_dropdowntree %}#toc-items-and-value-element)).
+     */
+    valueRender?: any;
+    /**
+     * Defines the slot that will be used for header
+     * ([see example]({% slug customrendering_dropdowntree %}#toc-items-and-value-element)).
+     */
+    header?: any;
+    /**
+     * Defines the slot that will be used for footer
+     * ([see example]({% slug customrendering_dropdowntree %}#toc-items-and-value-element)).
+     */
+    footer?: any;
+    /**
+     * Defines the slot that will be rendered in the DropDownTree popup when no data is available
+     * ([see example]({% slug customrendering_dropdowntree %}#toc-no-data)).
+     */
+    listNoData?: any;
+    /**
+     * Configures the `size` of the DropDownTree.
+     *
+     * The available options are:
+     * - small
+     * - medium
+     * - large
+     *
+     * @default undefined
+     */
+    size?: 'small' | 'medium' | 'large';
+    /**
+     * Configures the `roundness` of the DropDownTree.
+     *
+     * The available options are:
+     * - none
+     * - small
+     * - medium
+     * - large
+     * - full
+     *
+     * @default undefined
+     */
+    rounded?: 'none' | 'small' | 'medium' | 'large' | 'full';
+    /**
+     * Configures the `fillMode` of the DropDownTree.
+     *
+     * The available options are:
+     * - solid
+     * - flat
+     * - outline
+     *
+     * @default undefined
+     */
+    fillMode?: 'solid' | 'flat' | 'outline';
+    /**
+     * Provides 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;
+}

package/DropDownTree/ListNoData.d.ts

@@ -0,0 +1,12 @@
+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2026 Progress Software Corporation. All rights reserved.
+ * Licensed under commercial license. See LICENSE.md in the package root for more information
+ *-------------------------------------------------------------------------------------------
+ */
+/**
+ * @hidden
+ */
+declare const ListNoData: import('vue').DefineComponent<{}, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
+export { ListNoData };