@progress/kendo-react-dropdowns 5.12.1 → 5.13.0-dev.202303301815

package/dist/es/ComboBox/ComboBox.d.ts

@@ -51,14 +51,13 @@ export declare class ComboBoxWithoutContext extends React.Component<ComboBoxProp
             skip: PropTypes.Validator<number>;
             total: PropTypes.Validator<number>;
         }>>;
-        /** @hidden */
         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>; /** @hidden */
+        accessKey: PropTypes.Requireable<string>;
         data: PropTypes.Requireable<any[]>;
         textField: PropTypes.Requireable<string>;
         className: PropTypes.Requireable<string>;

package/dist/es/ComboBox/ComboBox.js

@@ -38,13 +38,12 @@ import { validatePackage, canUseDOM } from '@progress/kendo-react-common';
 import { packageMetadata } from '../package-metadata';
 import ClearButton from '../common/ClearButton';
 import { Button } from '@progress/kendo-react-buttons';
-import { caretAltDownIcon } from '@progress/kendo-svg-icons';
+import { caretAltDownIcon, xIcon } from '@progress/kendo-svg-icons';
 import { messages, comboArrowBtnAriaLabelExpand, comboArrowBtnAriaLabelCollapse } from './../messages';
 import { provideLocalizationService } from '@progress/kendo-react-intl';
 import { ActionSheet, ActionSheetContent, ActionSheetHeader } from '@progress/kendo-react-layout';
+import { MOBILE_SMALL_DEVISE, MOBILE_MEDIUM_DEVISE } from '../common/constants';
 var VALIDATION_MESSAGE = 'Please enter a valid value!';
-var MOBILE_SMALL_DEVISE = 500;
-var MOBILE_MEDIUM_DEVISE = 768;
 var sizeMap = kendoThemeMaps.sizeMap, roundedMap = kendoThemeMaps.roundedMap;
 /** @hidden */
 var ComboBoxWithoutContext = /** @class */ (function (_super) {
@@ -607,8 +606,7 @@ var ComboBoxWithoutContext = /** @class */ (function (_super) {
                         React.createElement("div", { className: "k-actionsheet-title" },
                             React.createElement("div", null, adaptiveTitle)),
                         React.createElement("div", { className: "k-actionsheet-actions" },
-                            React.createElement(Button, { tabIndex: 0, "aria-label": "Cancel", "aria-disabled": "false", type: "button", fillMode: "flat", onClick: this.toggleBtnClick },
-                                React.createElement("span", { className: "k-button-icon k-icon k-i-x" })))),
+                            React.createElement(Button, { tabIndex: 0, "aria-label": "Cancel", "aria-disabled": "false", type: "button", fillMode: "flat", onClick: this.toggleBtnClick, icon: 'x', svgIcon: xIcon }))),
                     React.createElement("div", { className: "k-actionsheet-titlebar-group k-actionsheet-filter" }, this.renderMobileListFilter())),
                 React.createElement(ActionSheetContent, { className: '!k-overflow-hidden' },
                     React.createElement("div", { className: 'k-list-container' },

package/dist/es/DropDownList/DropDownList.d.ts

@@ -8,6 +8,7 @@ import { DropDownStateBase, InternalState } from './../common/settings';
  * @hidden
  */
 export interface DropDownListState extends DropDownStateBase {
+    windowWidth?: number;
 }
 /**
  * @hidden
@@ -110,6 +111,8 @@ export declare class DropDownListWithoutContext extends React.Component<DropDown
     private _valueDuringOnChange;
     private _navigated;
     private _inputId;
+    private observerResize?;
+    private get document();
     constructor(props: DropDownListProps);
     /**
      * @hidden
@@ -148,6 +151,8 @@ export declare class DropDownListWithoutContext extends React.Component<DropDown
      * @hidden
      */
     componentDidMount(): void;
+    /** @hidden */
+    componentWillUnmount(): void;
     /**
      * @hidden
      */
@@ -162,6 +167,7 @@ export declare class DropDownListWithoutContext extends React.Component<DropDown
     onNavigate(state: InternalState, keyCode: number): void;
     private componentRef;
     private dummySelect;
+    private renderAdaptiveListContainer;
     private renderListContainer;
     private renderList;
     private renderListFilter;
@@ -183,6 +189,7 @@ export declare class DropDownListWithoutContext extends React.Component<DropDown
     private setValidity;
     private triggerOnChange;
     private applyState;
+    private calculateMedia;
 }
 /**
  * Represents the PropsContext of the `DropDownList` component.

package/dist/es/DropDownList/DropDownList.js

@@ -28,18 +28,20 @@ import * as React from 'react';
 import * as PropTypes from 'prop-types';
 import { classNames, Keys, getTabIndex, createPropsContext, withPropsContext, kendoThemeMaps, IconWrap, svgIconPropType, guid } from '@progress/kendo-react-common';
 import { FloatingLabel } from '@progress/kendo-react-labels';
-import { caretAltDownIcon } from '@progress/kendo-svg-icons';
+import { caretAltDownIcon, xIcon } from '@progress/kendo-svg-icons';
 import ListContainer from '../common/ListContainer';
 import ListFilter from '../common/ListFilter';
 import ListDefaultItem from '../common/ListDefaultItem';
 import List from '../common/List';
 import DropDownBase from '../common/DropDownBase';
 import { isPresent, getItemValue, sameCharsOnly, shuffleData, matchText, areSame, getFocusedItem } from '../common/utils';
-import { validatePackage } from '@progress/kendo-react-common';
+import { validatePackage, canUseDOM } from '@progress/kendo-react-common';
 import { packageMetadata } from '../package-metadata';
 import { Button } from '@progress/kendo-react-buttons';
 import { provideLocalizationService } from '@progress/kendo-react-intl';
 import { dropDownListArrowBtnAriaLabel, messages } from '../messages';
+import { MOBILE_SMALL_DEVISE, MOBILE_MEDIUM_DEVISE } from '../common/constants';
+import { ActionSheet, ActionSheetContent, ActionSheetHeader } from '@progress/kendo-react-layout';
 var VALIDATION_MESSAGE = 'Please select a value from the list!';
 var sizeMap = kendoThemeMaps.sizeMap, roundedMap = kendoThemeMaps.roundedMap;
 /**
@@ -312,6 +314,13 @@ var DropDownListWithoutContext = /** @class */ (function (_super) {
             if (_this._filterInput) {
                 _this.focusElement(_this._filterInput);
             }
+            if (_this.props.adaptive) {
+                setTimeout(function () {
+                    if (_this._filterInput) {
+                        _this.focusElement(_this._filterInput);
+                    }
+                }, 300);
+            }
         };
         _this.onPopupClosed = function () {
             if (_this.state.focused) {
@@ -332,6 +341,17 @@ var DropDownListWithoutContext = /** @class */ (function (_super) {
         validatePackage(packageMetadata);
         return _this;
     }
+    Object.defineProperty(DropDownListWithoutContext.prototype, "document", {
+        get: function () {
+            if (!canUseDOM) {
+                return;
+            }
+            // useful only for user actions
+            return (this.element && this.element.ownerDocument) || document;
+        },
+        enumerable: false,
+        configurable: true
+    });
     Object.defineProperty(DropDownListWithoutContext.prototype, "element", {
         /**
          * @hidden
@@ -461,6 +481,7 @@ var DropDownListWithoutContext = /** @class */ (function (_super) {
                 this.base.scrollToVirtualItem(virtual, selectedItemIndex);
             }
             else if (opening && !virtual) {
+                this.onPopupOpened();
                 this.base.scrollToItem(selectedItemIndex);
             }
             else if (opened && prevOpened && selectedItem_1 && selectedItemChanged && !this._navigated) {
@@ -482,8 +503,20 @@ var DropDownListWithoutContext = /** @class */ (function (_super) {
      * @hidden
      */
     DropDownListWithoutContext.prototype.componentDidMount = function () {
+        var _a;
+        this.observerResize = canUseDOM && window.ResizeObserver && new window.ResizeObserver(this.calculateMedia.bind(this));
         this.base.didMount();
         this.setValidity();
+        if (((_a = this.document) === null || _a === void 0 ? void 0 : _a.body) && this.observerResize) {
+            this.observerResize.observe(this.document.body);
+        }
+    };
+    /** @hidden */
+    DropDownListWithoutContext.prototype.componentWillUnmount = function () {
+        var _a;
+        if (((_a = this.document) === null || _a === void 0 ? void 0 : _a.body) && this.observerResize) {
+            this.observerResize.disconnect();
+        }
     };
     /**
      * @hidden
@@ -492,48 +525,52 @@ var DropDownListWithoutContext = /** @class */ (function (_super) {
         var _a;
         var _this = this;
         var btnAriaLabel = provideLocalizationService(this).toLanguageString(dropDownListArrowBtnAriaLabel, messages[dropDownListArrowBtnAriaLabel]);
-        var _b = this.props, style = _b.style, className = _b.className, label = _b.label, dir = _b.dir, virtual = _b.virtual, size = _b.size, rounded = _b.rounded, fillMode = _b.fillMode;
+        var _b = this.props, style = _b.style, className = _b.className, label = _b.label, dir = _b.dir, virtual = _b.virtual, size = _b.size, rounded = _b.rounded, fillMode = _b.fillMode, adaptive = _b.adaptive;
+        var _c = this.state.windowWidth, windowWidth = _c === void 0 ? 0 : _c;
         var opened = this.props.opened !== undefined ? this.props.opened : this.state.opened;
         var value = this.value;
         var text = getItemValue(value, this.props.textField);
         var isValid = !this.validityStyles || this.validity.valid;
         var base = this.base;
         var vs = base.vs;
+        var renderAdaptive = windowWidth <= MOBILE_MEDIUM_DEVISE && adaptive;
         vs.enabled = virtual !== undefined;
         if (virtual !== undefined) {
             base.vs.skip = virtual.skip;
             base.vs.total = virtual.total;
             base.vs.pageSize = virtual.pageSize;
         }
-        var _c = this.props, dataItemKey = _c.dataItemKey, _d = _c.data, data = _d === void 0 ? [] : _d, disabled = _c.disabled, tabIndex = _c.tabIndex, loading = _c.loading, iconClassName = _c.iconClassName, valueRender = _c.valueRender;
+        var _d = this.props, dataItemKey = _d.dataItemKey, _e = _d.data, data = _e === void 0 ? [] : _e, disabled = _d.disabled, tabIndex = _d.tabIndex, loading = _d.loading, iconClassName = _d.iconClassName, valueRender = _d.valueRender;
         var focused = this.state.focused;
         var selectedIndex = data.findIndex(function (i) { return areSame(i, value, dataItemKey); });
         var valueDefaultRendering = (React.createElement("span", { id: this._inputId, className: "k-input-inner" },
             React.createElement("span", { className: "k-input-value-text" }, text)));
         var valueElement = valueRender !== undefined ?
             valueRender.call(undefined, valueDefaultRendering, value) : valueDefaultRendering;
-        var dropdownlist = (React.createElement("span", { ref: this.componentRef, className: classNames('k-dropdownlist k-picker', className, (_a = {},
-                _a["k-picker-".concat(sizeMap[size] || size)] = size,
-                _a["k-rounded-".concat(roundedMap[rounded] || rounded)] = rounded,
-                _a["k-picker-".concat(fillMode)] = fillMode,
-                _a['k-focus'] = focused,
-                _a['k-disabled'] = disabled,
-                _a['k-invalid'] = !isValid,
-                _a['k-loading'] = loading,
-                _a['k-required'] = this.required,
-                _a)), style: !label
-                ? style
-                : __assign(__assign({}, style), { width: undefined }), dir: dir, onMouseDown: opened ? function (event) {
-                if (event.target.nodeName !== 'INPUT') {
-                    _this.focusElement(_this.base.wrapper);
-                    event.preventDefault();
-                }
-            } : undefined, onFocus: this.handleFocus, onBlur: this.handleBlur, tabIndex: getTabIndex(tabIndex, disabled), accessKey: this.props.accessKey, onKeyDown: this.handleKeyDown, onKeyPress: this.handleKeyPress, onClick: disabled ? undefined : this.handleWrapperClick, role: 'combobox', "aria-required": this.required, "aria-disabled": disabled || undefined, "aria-haspopup": 'listbox', "aria-expanded": opened || false, "aria-owns": this.base.listBoxId, "aria-activedescendant": opened ? ('option-' + this.base.guid + '-' + (selectedIndex + (virtual ? virtual.skip : 0))) : undefined, "aria-label": this.props.ariaLabel || this.props.label, "aria-labelledby": this.props.ariaLabelledBy, "aria-describedby": this.props.ariaDescribedBy || this._inputId, id: this.props.id, title: this.props.title },
-            valueElement,
-            loading && React.createElement(IconWrap, { className: "k-input-loading-icon", name: 'loading' }),
-            React.createElement(Button, { tabIndex: -1, type: "button", "aria-label": btnAriaLabel, "aria-hidden": true, size: size, fillMode: fillMode, iconClass: iconClassName, className: "k-input-button", rounded: null, themeColor: 'base', icon: !iconClassName ? 'caret-alt-down' : undefined, svgIcon: !iconClassName ? caretAltDownIcon : this.props.svgIcon, onMouseDown: function (e) { return _this.state.focused && e.preventDefault(); } }),
-            this.dummySelect(value),
-            this.renderListContainer()));
+        var dropdownlist = (React.createElement(React.Fragment, null,
+            React.createElement("span", { ref: this.componentRef, className: classNames('k-dropdownlist k-picker', className, (_a = {},
+                    _a["k-picker-".concat(sizeMap[size] || size)] = size,
+                    _a["k-rounded-".concat(roundedMap[rounded] || rounded)] = rounded,
+                    _a["k-picker-".concat(fillMode)] = fillMode,
+                    _a['k-focus'] = focused,
+                    _a['k-disabled'] = disabled,
+                    _a['k-invalid'] = !isValid,
+                    _a['k-loading'] = loading,
+                    _a['k-required'] = this.required,
+                    _a)), style: !label
+                    ? style
+                    : __assign(__assign({}, style), { width: undefined }), dir: dir, onMouseDown: opened ? function (event) {
+                    if (event.target.nodeName !== 'INPUT') {
+                        _this.focusElement(_this.base.wrapper);
+                        event.preventDefault();
+                    }
+                } : undefined, onFocus: this.handleFocus, onBlur: this.handleBlur, tabIndex: getTabIndex(tabIndex, disabled), accessKey: this.props.accessKey, onKeyDown: this.handleKeyDown, onKeyPress: this.handleKeyPress, onClick: disabled ? undefined : this.handleWrapperClick, role: 'combobox', "aria-required": this.required, "aria-disabled": disabled || undefined, "aria-haspopup": 'listbox', "aria-expanded": opened || false, "aria-owns": this.base.listBoxId, "aria-activedescendant": opened ? ('option-' + this.base.guid + '-' + (selectedIndex + (virtual ? virtual.skip : 0))) : undefined, "aria-label": this.props.ariaLabel || this.props.label, "aria-labelledby": this.props.ariaLabelledBy, "aria-describedby": this.props.ariaDescribedBy || this._inputId, id: this.props.id, title: this.props.title },
+                valueElement,
+                loading && React.createElement(IconWrap, { className: "k-input-loading-icon", name: 'loading' }),
+                React.createElement(Button, { tabIndex: -1, type: "button", "aria-label": btnAriaLabel, "aria-hidden": true, size: size, fillMode: fillMode, iconClass: iconClassName, className: "k-input-button", rounded: null, themeColor: 'base', icon: !iconClassName ? 'caret-alt-down' : undefined, svgIcon: !iconClassName ? caretAltDownIcon : this.props.svgIcon, onMouseDown: function (e) { return _this.state.focused && e.preventDefault(); } }),
+                this.dummySelect(value),
+                !renderAdaptive && this.renderListContainer()),
+            renderAdaptive && this.renderAdaptiveListContainer()));
         return label ? (React.createElement(FloatingLabel, { label: label, editorValue: text, editorValid: isValid, editorDisabled: this.props.disabled, style: { width: style ? style.width : undefined }, children: dropdownlist })) : dropdownlist;
     };
     /**
@@ -555,6 +592,39 @@ var DropDownListWithoutContext = /** @class */ (function (_super) {
         }
         this.applyState(state);
     };
+    DropDownListWithoutContext.prototype.renderAdaptiveListContainer = function () {
+        var _a;
+        var _this = this;
+        var _b = this.state.windowWidth, windowWidth = _b === void 0 ? 0 : _b;
+        var _c = this.props, header = _c.header, footer = _c.footer, size = _c.size, adaptiveTitle = _c.adaptiveTitle;
+        var opened = this.props.opened !== undefined ? this.props.opened : this.state.opened;
+        var actionSheetProps = {
+            navigatable: false,
+            navigatableElements: [],
+            expand: opened,
+            animation: true,
+            onClose: function (event) { return _this.handleWrapperClick(event); },
+            animationStyles: windowWidth <= MOBILE_SMALL_DEVISE ? { top: 0, width: '100%', height: '100%' } : undefined,
+            className: windowWidth <= MOBILE_SMALL_DEVISE
+                ? 'k-adaptive-actionsheet k-actionsheet-fullscreen'
+                : 'k-adaptive-actionsheet k-actionsheet-bottom'
+        };
+        return (React.createElement(React.Fragment, null,
+            React.createElement(ActionSheet, __assign({}, actionSheetProps),
+                React.createElement(ActionSheetHeader, { className: 'k-text-center' },
+                    React.createElement("div", { className: "k-actionsheet-titlebar-group k-hbox" },
+                        React.createElement("div", { className: "k-actionsheet-title" },
+                            React.createElement("div", null, adaptiveTitle)),
+                        React.createElement("div", { className: "k-actionsheet-actions" },
+                            React.createElement(Button, { tabIndex: 0, "aria-label": "Cancel", "aria-disabled": "false", type: "button", fillMode: "flat", onClick: this.handleWrapperClick, icon: 'x', svgIcon: xIcon }))),
+                    React.createElement("div", { className: "k-actionsheet-titlebar-group k-actionsheet-filter" }, this.renderListFilter())),
+                React.createElement(ActionSheetContent, { className: '!k-overflow-hidden' },
+                    header && React.createElement("div", { className: "k-list-header" }, header),
+                    React.createElement("div", { className: classNames('k-list', (_a = {}, _a["k-list-".concat(sizeMap[size] || size)] = size, _a['k-virtual-list'] = this.base.vs.enabled, _a)) },
+                        this.renderDefaultItem(),
+                        this.renderList()),
+                    footer && React.createElement("div", { className: "k-list-footer" }, footer)))));
+    };
     DropDownListWithoutContext.prototype.focusedIndex = function () {
         var filterText = isPresent(this.props.filter) ? this.props.filter : this.state.text;
         var _a = this.props, _b = _a.data, data = _b === void 0 ? [] : _b, _c = _a.virtual, virtual = _c === void 0 ? { skip: 0 } : _c, dataItemKey = _a.dataItemKey, textField = _a.textField, focusedItemIndex = _a.focusedItemIndex;
@@ -589,6 +659,14 @@ var DropDownListWithoutContext = /** @class */ (function (_super) {
         this.base.applyState(state);
         this._valueDuringOnChange = undefined;
     };
+    DropDownListWithoutContext.prototype.calculateMedia = function (entries) {
+        for (var _i = 0, entries_1 = entries; _i < entries_1.length; _i++) {
+            var entry = entries_1[_i];
+            this.setState({ windowWidth: entry.target.clientWidth });
+        }
+        ;
+    };
+    ;
     DropDownListWithoutContext.displayName = 'DropDownList';
     /**
      * @hidden

package/dist/es/DropDownList/DropDownListProps.d.ts

@@ -289,4 +289,12 @@ export interface DropDownListProps extends FormComponentProps {
      * @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;
 }

package/dist/es/common/constants.d.ts

@@ -0,0 +1,4 @@
+/** @hidden */
+export declare const MOBILE_SMALL_DEVISE: number;
+/** @hidden */
+export declare const MOBILE_MEDIUM_DEVISE: number;

package/dist/es/common/constants.js

@@ -0,0 +1,4 @@
+/** @hidden */
+export var MOBILE_SMALL_DEVISE = 500;
+/** @hidden */
+export var MOBILE_MEDIUM_DEVISE = 768;

package/dist/es/main.d.ts

@@ -1,19 +1,25 @@
 import { FormComponentValidity } from '@progress/kendo-react-common';
-import { DropDownList, DropDownListHandle, DropDownListPropsContext } from './DropDownList/DropDownList';
+import { DropDownList, DropDownListHandle, DropDownListPropsContext, DropDownListWithoutContext } from './DropDownList/DropDownList';
 import { DropDownListProps, DropDownListFilterChangeEvent, DropDownListChangeEvent, DropDownListOpenEvent, DropDownListCloseEvent, DropDownListFocusEvent, DropDownListBlurEvent, DropDownListPageChangeEvent } from './DropDownList/DropDownListProps';
 import { Page, VirtualizationSettings, DropDownsPopupSettings, Suggestion } from './common/settings';
-import { ListItemProps } from './common/ListItem';
-import { ComboBox, ComboBoxPropsContext, ComboBoxHandle } from './ComboBox/ComboBox';
+import ListItem, { ListItemProps } from './common/ListItem';
+import List from './common/List';
+import SearchBar from './common/SearchBar';
+import ListContainer from './common/ListContainer';
+import ListFilter from './common/ListFilter';
+import { messages as dropdownsMessages, nodata } from './messages/index';
+import { scrollToItem } from './common/utils';
+import { ComboBox, ComboBoxPropsContext, ComboBoxHandle, ComboBoxWithoutContext } from './ComboBox/ComboBox';
 import { ComboBoxProps, ComboBoxFilterChangeEvent, ComboBoxChangeEvent, ComboBoxOpenEvent, ComboBoxCloseEvent, ComboBoxFocusEvent, ComboBoxBlurEvent, ComboBoxPageChangeEvent } from './ComboBox/ComboBoxProps';
-import { AutoComplete, AutoCompleteHandle, AutoCompletePropsContext } from './AutoComplete/AutoComplete';
+import { AutoComplete, AutoCompleteHandle, AutoCompletePropsContext, AutoCompleteWithoutContext } from './AutoComplete/AutoComplete';
 import { AutoCompleteProps, AutoCompleteChangeEvent, AutoCompleteOpenEvent, AutoCompleteCloseEvent, AutoCompleteFocusEvent, AutoCompleteBlurEvent } from './AutoComplete/AutoCompleteProps';
-import { MultiSelect, MultiSelectHandle, MultiSelectPropsContext } from './MultiSelect/MultiSelect';
+import { MultiSelect, MultiSelectHandle, MultiSelectPropsContext, MultiSelectWithoutContext } from './MultiSelect/MultiSelect';
 import { MultiSelectProps, MultiSelectChangeEvent, MultiSelectPageChangeEvent, MultiSelectFilterChangeEvent, MultiSelectOpenEvent, MultiSelectCloseEvent, MultiSelectFocusEvent, MultiSelectBlurEvent } from './MultiSelect/MultiSelectProps';
-import { TagData as MultiSelectTagData, TagData } from './MultiSelect/TagList';
+import TagList, { TagData as MultiSelectTagData, TagData } from './MultiSelect/TagList';
 import { MultiColumnComboBox, MultiColumnComboBoxPropsContext, MultiColumnComboBoxProps, MultiColumnComboBoxHandle, MultiColumnComboBoxColumn, MultiColumnComboBoxChangeEvent } from './MultiColumnComboBox/MultiColumnComboBox';
 import { DropDownTree, DropDownTreePropsContext } from './DropDownTree/DropDownTree';
 export * from './DropDownTree/DropDownTreeProps';
 import { MultiSelectTree, MultiSelectTreePropsContext } from './MultiSelectTree/MultiSelectTree';
 export * from './MultiSelectTree/MultiSelectTreeProps';
 export * from './MultiSelectTree/utils';
-export { AutoComplete, AutoCompleteHandle, AutoCompleteProps, AutoCompletePropsContext, AutoCompleteChangeEvent, AutoCompleteOpenEvent, AutoCompleteCloseEvent, AutoCompleteFocusEvent, AutoCompleteBlurEvent, DropDownList, DropDownListHandle, DropDownListProps, DropDownListPropsContext, DropDownListFilterChangeEvent, DropDownListChangeEvent, DropDownListOpenEvent, DropDownListCloseEvent, DropDownListFocusEvent, DropDownListBlurEvent, DropDownListPageChangeEvent, Page, VirtualizationSettings, DropDownsPopupSettings, ListItemProps, Suggestion, ComboBox, ComboBoxHandle, ComboBoxProps, ComboBoxPropsContext, ComboBoxFilterChangeEvent, ComboBoxChangeEvent, ComboBoxOpenEvent, ComboBoxCloseEvent, ComboBoxFocusEvent, ComboBoxBlurEvent, ComboBoxPageChangeEvent, MultiSelect, MultiSelectHandle, MultiSelectProps, MultiSelectPropsContext, MultiSelectChangeEvent, MultiSelectPageChangeEvent, MultiSelectFilterChangeEvent, MultiSelectOpenEvent, MultiSelectCloseEvent, MultiSelectFocusEvent, MultiSelectBlurEvent, MultiSelectTagData, FormComponentValidity, MultiColumnComboBox, MultiColumnComboBoxColumn, MultiColumnComboBoxProps, MultiColumnComboBoxPropsContext, MultiColumnComboBoxHandle, MultiColumnComboBoxChangeEvent, DropDownTree, DropDownTreePropsContext, MultiSelectTree, MultiSelectTreePropsContext, TagData };
+export { AutoComplete, AutoCompleteHandle, AutoCompleteProps, AutoCompletePropsContext, AutoCompleteWithoutContext, AutoCompleteChangeEvent, AutoCompleteOpenEvent, AutoCompleteCloseEvent, AutoCompleteFocusEvent, AutoCompleteBlurEvent, DropDownList, DropDownListHandle, DropDownListProps, DropDownListPropsContext, DropDownListWithoutContext, DropDownListFilterChangeEvent, DropDownListChangeEvent, DropDownListOpenEvent, DropDownListCloseEvent, DropDownListFocusEvent, DropDownListBlurEvent, DropDownListPageChangeEvent, Page, VirtualizationSettings, DropDownsPopupSettings, ListItemProps, Suggestion, ComboBox, ComboBoxHandle, ComboBoxProps, ComboBoxPropsContext, ComboBoxWithoutContext, ComboBoxFilterChangeEvent, ComboBoxChangeEvent, ComboBoxOpenEvent, ComboBoxCloseEvent, ComboBoxFocusEvent, ComboBoxBlurEvent, ComboBoxPageChangeEvent, MultiSelect, MultiSelectHandle, MultiSelectProps, MultiSelectPropsContext, MultiSelectWithoutContext, MultiSelectChangeEvent, MultiSelectPageChangeEvent, MultiSelectFilterChangeEvent, MultiSelectOpenEvent, MultiSelectCloseEvent, MultiSelectFocusEvent, MultiSelectBlurEvent, MultiSelectTagData, FormComponentValidity, MultiColumnComboBox, MultiColumnComboBoxColumn, MultiColumnComboBoxProps, MultiColumnComboBoxPropsContext, MultiColumnComboBoxHandle, MultiColumnComboBoxChangeEvent, DropDownTree, DropDownTreePropsContext, MultiSelectTree, MultiSelectTreePropsContext, TagData, TagList, SearchBar, List, ListItem, ListContainer, ListFilter, dropdownsMessages, nodata, scrollToItem };

package/dist/es/main.js

@@ -1,11 +1,19 @@
-import { DropDownList, DropDownListPropsContext } from './DropDownList/DropDownList';
-import { ComboBox, ComboBoxPropsContext } from './ComboBox/ComboBox';
-import { AutoComplete, AutoCompletePropsContext } from './AutoComplete/AutoComplete';
-import { MultiSelect, MultiSelectPropsContext } from './MultiSelect/MultiSelect';
+import { DropDownList, DropDownListPropsContext, DropDownListWithoutContext } from './DropDownList/DropDownList';
+import ListItem from './common/ListItem';
+import List from './common/List';
+import SearchBar from './common/SearchBar';
+import ListContainer from './common/ListContainer';
+import ListFilter from './common/ListFilter';
+import { messages as dropdownsMessages, nodata } from './messages/index';
+import { scrollToItem } from './common/utils';
+import { ComboBox, ComboBoxPropsContext, ComboBoxWithoutContext } from './ComboBox/ComboBox';
+import { AutoComplete, AutoCompletePropsContext, AutoCompleteWithoutContext } from './AutoComplete/AutoComplete';
+import { MultiSelect, MultiSelectPropsContext, MultiSelectWithoutContext } from './MultiSelect/MultiSelect';
+import TagList from './MultiSelect/TagList';
 import { MultiColumnComboBox, MultiColumnComboBoxPropsContext } from './MultiColumnComboBox/MultiColumnComboBox';
 import { DropDownTree, DropDownTreePropsContext } from './DropDownTree/DropDownTree';
 export * from './DropDownTree/DropDownTreeProps';
 import { MultiSelectTree, MultiSelectTreePropsContext } from './MultiSelectTree/MultiSelectTree';
 export * from './MultiSelectTree/MultiSelectTreeProps';
 export * from './MultiSelectTree/utils';
-export { AutoComplete, AutoCompletePropsContext, DropDownList, DropDownListPropsContext, ComboBox, ComboBoxPropsContext, MultiSelect, MultiSelectPropsContext, MultiColumnComboBox, MultiColumnComboBoxPropsContext, DropDownTree, DropDownTreePropsContext, MultiSelectTree, MultiSelectTreePropsContext };
+export { AutoComplete, AutoCompletePropsContext, AutoCompleteWithoutContext, DropDownList, DropDownListPropsContext, DropDownListWithoutContext, ComboBox, ComboBoxPropsContext, ComboBoxWithoutContext, MultiSelect, MultiSelectPropsContext, MultiSelectWithoutContext, MultiColumnComboBox, MultiColumnComboBoxPropsContext, DropDownTree, DropDownTreePropsContext, MultiSelectTree, MultiSelectTreePropsContext, TagList, SearchBar, List, ListItem, ListContainer, ListFilter, dropdownsMessages, nodata, scrollToItem };

package/dist/es/package-metadata.js

@@ -5,7 +5,7 @@ export var packageMetadata = {
     name: '@progress/kendo-react-dropdowns',
     productName: 'KendoReact',
     productCodes: ['KENDOUIREACT', 'KENDOUICOMPLETE'],
-    publishDate: 1680171876,
+    publishDate: 1680198554,
     version: '',
     licensingDocsUrl: 'https://www.telerik.com/kendo-react-ui/my-license/?utm_medium=product&utm_source=kendoreact&utm_campaign=kendo-ui-react-purchase-license-keys-warning'
 };

package/dist/npm/ComboBox/ComboBox.d.ts

@@ -51,14 +51,13 @@ export declare class ComboBoxWithoutContext extends React.Component<ComboBoxProp
             skip: PropTypes.Validator<number>;
             total: PropTypes.Validator<number>;
         }>>;
-        /** @hidden */
         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>; /** @hidden */
+        accessKey: PropTypes.Requireable<string>;
         data: PropTypes.Requireable<any[]>;
         textField: PropTypes.Requireable<string>;
         className: PropTypes.Requireable<string>;

package/dist/npm/ComboBox/ComboBox.js

@@ -45,9 +45,8 @@ var kendo_svg_icons_1 = require("@progress/kendo-svg-icons");
 var messages_1 = require("./../messages");
 var kendo_react_intl_1 = require("@progress/kendo-react-intl");
 var kendo_react_layout_1 = require("@progress/kendo-react-layout");
+var constants_1 = require("../common/constants");
 var VALIDATION_MESSAGE = 'Please enter a valid value!';
-var MOBILE_SMALL_DEVISE = 500;
-var MOBILE_MEDIUM_DEVISE = 768;
 var sizeMap = kendo_react_common_1.kendoThemeMaps.sizeMap, roundedMap = kendo_react_common_1.kendoThemeMaps.roundedMap;
 /** @hidden */
 var ComboBoxWithoutContext = /** @class */ (function (_super) {
@@ -290,7 +289,7 @@ var ComboBoxWithoutContext = /** @class */ (function (_super) {
          * The mobile mode of the ComboBox.
          */
         get: function () {
-            var isAdaptive = this.state.windowWidth && this.state.windowWidth <= MOBILE_MEDIUM_DEVISE && this.props.adaptive;
+            var isAdaptive = this.state.windowWidth && this.state.windowWidth <= constants_1.MOBILE_MEDIUM_DEVISE && this.props.adaptive;
             return !!isAdaptive;
         },
         enumerable: false,
@@ -445,7 +444,7 @@ var ComboBoxWithoutContext = /** @class */ (function (_super) {
         var base = this.base;
         var vs = base.vs;
         var id = this.props.id || this._inputId;
-        var renderAdaptive = windowWidth <= MOBILE_MEDIUM_DEVISE && adaptive;
+        var renderAdaptive = windowWidth <= constants_1.MOBILE_MEDIUM_DEVISE && adaptive;
         vs.enabled = virtual !== undefined;
         if (virtual !== undefined) {
             vs.skip = virtual.skip;
@@ -535,7 +534,7 @@ var ComboBoxWithoutContext = /** @class */ (function (_super) {
         var _b = this.props, _c = _b.data, data = _c === void 0 ? [] : _c, textField = _b.textField, allowCustom = _b.allowCustom;
         var opened = this.props.opened !== undefined ? this.props.opened : this.state.opened;
         var valueItemText = (0, utils_1.getItemValue)(this.value, textField);
-        var isMobileDevice = this.state.windowWidth && this.state.windowWidth <= MOBILE_MEDIUM_DEVISE;
+        var isMobileDevice = this.state.windowWidth && this.state.windowWidth <= constants_1.MOBILE_MEDIUM_DEVISE;
         this._suggested = '';
         if (text === valueItemText || (text === '' && !(0, utils_1.isPresent)(valueItemText))) {
             if (opened && !isMobileDevice) {
@@ -598,8 +597,8 @@ var ComboBoxWithoutContext = /** @class */ (function (_super) {
             expand: opened,
             animation: true,
             onClose: function (event) { return _this.toggleBtnClick(event); },
-            animationStyles: windowWidth <= MOBILE_SMALL_DEVISE ? { top: 0, width: '100%', height: '100%' } : undefined,
-            className: windowWidth <= MOBILE_SMALL_DEVISE
+            animationStyles: windowWidth <= constants_1.MOBILE_SMALL_DEVISE ? { top: 0, width: '100%', height: '100%' } : undefined,
+            className: windowWidth <= constants_1.MOBILE_SMALL_DEVISE
                 ? 'k-adaptive-actionsheet k-actionsheet-fullscreen'
                 : 'k-adaptive-actionsheet k-actionsheet-bottom'
         };
@@ -610,8 +609,7 @@ var ComboBoxWithoutContext = /** @class */ (function (_super) {
                         React.createElement("div", { className: "k-actionsheet-title" },
                             React.createElement("div", null, adaptiveTitle)),
                         React.createElement("div", { className: "k-actionsheet-actions" },
-                            React.createElement(kendo_react_buttons_1.Button, { tabIndex: 0, "aria-label": "Cancel", "aria-disabled": "false", type: "button", fillMode: "flat", onClick: this.toggleBtnClick },
-                                React.createElement("span", { className: "k-button-icon k-icon k-i-x" })))),
+                            React.createElement(kendo_react_buttons_1.Button, { tabIndex: 0, "aria-label": "Cancel", "aria-disabled": "false", type: "button", fillMode: "flat", onClick: this.toggleBtnClick, icon: 'x', svgIcon: kendo_svg_icons_1.xIcon }))),
                     React.createElement("div", { className: "k-actionsheet-titlebar-group k-actionsheet-filter" }, this.renderMobileListFilter())),
                 React.createElement(kendo_react_layout_1.ActionSheetContent, { className: '!k-overflow-hidden' },
                     React.createElement("div", { className: 'k-list-container' },
@@ -673,7 +671,7 @@ var ComboBoxWithoutContext = /** @class */ (function (_super) {
         var selectedItemText = (0, utils_1.getItemValue)(this.value, textField);
         var value = (0, utils_1.isPresent)(text) && text !== selectedItemText ? null : this.value;
         var ListComponent = this.props.list || List_1.default;
-        return (React.createElement(ListComponent, { id: base.listBoxId, virtual: Boolean(virtual), show: opened, data: data, focusedIndex: focusedIndex, value: value, textField: textField, valueField: dataItemKey, groupField: this.props.groupField, optionsGuid: base.guid, listRef: function (list) { vs.list = _this.base.list = list; _this.itemHeight = 0; }, wrapperStyle: (this.state.windowWidth && this.state.windowWidth > MOBILE_MEDIUM_DEVISE)
+        return (React.createElement(ListComponent, { id: base.listBoxId, virtual: Boolean(virtual), show: opened, data: data, focusedIndex: focusedIndex, value: value, textField: textField, valueField: dataItemKey, groupField: this.props.groupField, optionsGuid: base.guid, listRef: function (list) { vs.list = _this.base.list = list; _this.itemHeight = 0; }, wrapperStyle: (this.state.windowWidth && this.state.windowWidth > constants_1.MOBILE_MEDIUM_DEVISE)
                 ? { maxHeight: popupSettings.height }
                 : {}, wrapperCssClass: (0, kendo_react_common_1.classNames)('k-list-content', (_a = {},
                 _a['k-list-scroller'] = !virtual,

package/dist/npm/DropDownList/DropDownList.d.ts

@@ -8,6 +8,7 @@ import { DropDownStateBase, InternalState } from './../common/settings';
  * @hidden
  */
 export interface DropDownListState extends DropDownStateBase {
+    windowWidth?: number;
 }
 /**
  * @hidden
@@ -110,6 +111,8 @@ export declare class DropDownListWithoutContext extends React.Component<DropDown
     private _valueDuringOnChange;
     private _navigated;
     private _inputId;
+    private observerResize?;
+    private get document();
     constructor(props: DropDownListProps);
     /**
      * @hidden
@@ -148,6 +151,8 @@ export declare class DropDownListWithoutContext extends React.Component<DropDown
      * @hidden
      */
     componentDidMount(): void;
+    /** @hidden */
+    componentWillUnmount(): void;
     /**
      * @hidden
      */
@@ -162,6 +167,7 @@ export declare class DropDownListWithoutContext extends React.Component<DropDown
     onNavigate(state: InternalState, keyCode: number): void;
     private componentRef;
     private dummySelect;
+    private renderAdaptiveListContainer;
     private renderListContainer;
     private renderList;
     private renderListFilter;
@@ -183,6 +189,7 @@ export declare class DropDownListWithoutContext extends React.Component<DropDown
     private setValidity;
     private triggerOnChange;
     private applyState;
+    private calculateMedia;
 }
 /**
  * Represents the PropsContext of the `DropDownList` component.