@progress/kendo-react-dropdowns 5.12.0-dev.202303130940 → 5.12.0-dev.202303141413

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

@@ -4,25 +4,21 @@ import { ComboBoxProps } from './ComboBoxProps';
 import { DropDownStateBase, InternalState } from './../common/settings';
 import DropDownBase from '../common/DropDownBase';
 import { FormComponent, FormComponentValidity } from '@progress/kendo-react-common';
-/**
- * @hidden
- */
+/** @hidden */
 export interface ComboBoxState extends DropDownStateBase {
+    filterText?: string;
     suggestedText?: string;
     focusedItem?: any;
+    windowWidth?: number;
 }
-/**
- * @hidden
- */
+/** @hidden */
 export interface ComboInternalState extends InternalState {
     data: ComboBoxState;
 }
 /** @hidden */
 export declare class ComboBoxWithoutContext extends React.Component<ComboBoxProps, ComboBoxState> implements FormComponent {
     static displayName: string;
-    /**
-     * @hidden
-     */
+    /** @hidden */
     static propTypes: {
         size: PropTypes.Requireable<"small" | "medium" | "large" | null | undefined>;
         rounded: PropTypes.Requireable<"small" | "medium" | "full" | "large" | null | undefined>;
@@ -55,13 +51,14 @@ 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>;
+        accessKey: PropTypes.Requireable<string>; /** @hidden */
         data: PropTypes.Requireable<any[]>;
         textField: PropTypes.Requireable<string>;
         className: PropTypes.Requireable<string>;
@@ -81,9 +78,7 @@ export declare class ComboBoxWithoutContext extends React.Component<ComboBoxProp
         onOpen: PropTypes.Requireable<(...args: any[]) => any>;
         onClose: PropTypes.Requireable<(...args: any[]) => any>;
         onFocus: PropTypes.Requireable<(...args: any[]) => any>;
-        onBlur: PropTypes.Requireable<(...args: any[]) => any>; /**
-         * @hidden
-         */
+        onBlur: PropTypes.Requireable<(...args: any[]) => any>;
         onChange: PropTypes.Requireable<(...args: any[]) => any>;
         itemRender: PropTypes.Requireable<(...args: any[]) => any>;
         listNoDataRender: PropTypes.Requireable<(...args: any[]) => any>;
@@ -91,9 +86,7 @@ export declare class ComboBoxWithoutContext extends React.Component<ComboBoxProp
         header: PropTypes.Requireable<PropTypes.ReactNodeLike>;
         footer: PropTypes.Requireable<PropTypes.ReactNodeLike>;
     };
-    /**
-     * @hidden
-     */
+    /** @hidden */
     static defaultProps: {
         size: "small" | "medium" | "large" | null | undefined;
         rounded: "small" | "medium" | "full" | "large" | null | undefined;
@@ -106,9 +99,7 @@ export declare class ComboBoxWithoutContext extends React.Component<ComboBoxProp
         };
         validityStyles: boolean;
     };
-    /**
-     * @hidden
-     */
+    /** @hidden */
     readonly state: ComboBoxState;
     protected readonly base: DropDownBase;
     private _element;
@@ -116,17 +107,21 @@ export declare class ComboBoxWithoutContext extends React.Component<ComboBoxProp
     private _valueDuringOnChange;
     private _valueOnDidUpdate;
     private _suggested;
+    private _skipBlur;
     private _input;
+    private _adaptiveFilterInput;
     private itemHeight;
+    private observerResize;
+    private get document();
     constructor(props: ComboBoxProps);
-    /**
-     * @hidden
-     */
+    /** @hidden */
     focus: () => void;
+    /** @hidden */
+    get element(): HTMLSpanElement | null;
     /**
-     * @hidden
+     * The mobile mode of the ComboBox.
      */
-    get element(): HTMLSpanElement | null;
+    get mobileMode(): boolean;
     /**
      * The value of the ComboBox.
      */
@@ -144,41 +139,36 @@ export declare class ComboBoxWithoutContext extends React.Component<ComboBoxProp
      */
     get validity(): FormComponentValidity;
     protected get validityStyles(): boolean;
-    /**
-     * @hidden
-     */
+    /** @hidden */
     protected get required(): boolean;
-    /**
-     * @hidden
-     */
+    /** @hidden */
     componentDidUpdate(prevProps: ComboBoxProps, prevState: ComboBoxState): void;
-    /**
-     * @hidden
-     */
+    /** @hidden */
     componentDidMount(): void;
-    /**
-     * @hidden
-     */
+    /** @hidden */
+    componentWillUnmount(): void;
+    /** @hidden */
     render(): JSX.Element;
-    /**
-     * @hidden
-     */
+    /** @hidden */
     handleItemSelect: (index: number, state: ComboInternalState) => void;
-    /**
-     * @hidden
-     */
+    /** @hidden */
     onNavigate(state: InternalState, keyCode: number): void;
+    private onPopupOpened;
     private componentRef;
     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 clearButtonClick;
@@ -187,6 +177,7 @@ export declare class ComboBoxWithoutContext extends React.Component<ComboBoxProp
     private suggestValue;
     private applyState;
     private setValidity;
+    private calculateMedia;
 }
 /**
  * Represents the PropsContext of the `ComboBox` component.

package/dist/es/ComboBox/ComboBox.js

@@ -33,41 +33,42 @@ import { areSame, itemIndexStartsWith, getItemIndexByText, getItemValue, isPrese
 import SearchBar from '../common/SearchBar';
 import ListContainer from '../common/ListContainer';
 import List from '../common/List';
-import { validatePackage } from '@progress/kendo-react-common';
+import ListFilter from '../common/ListFilter';
+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 { messages, comboArrowBtnAriaLabelExpand, comboArrowBtnAriaLabelCollapse } from './../messages';
 import { provideLocalizationService } from '@progress/kendo-react-intl';
+import { ActionSheet, ActionSheetContent, ActionSheetHeader } from '@progress/kendo-react-layout';
 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) {
     __extends(ComboBoxWithoutContext, _super);
     function ComboBoxWithoutContext(props) {
         var _this = _super.call(this, props) || this;
-        /**
-         * @hidden
-         */
+        /** @hidden */
         _this.state = {};
         _this.base = new DropDownBase(_this);
         _this._element = null;
         _this._inputId = guid();
         _this._suggested = '';
+        _this._skipBlur = false;
         _this._input = null;
+        _this._adaptiveFilterInput = null;
         _this.itemHeight = 0;
-        /**
-         * @hidden
-         */
+        _this.observerResize = (window === null || window === void 0 ? void 0 : window.ResizeObserver) && new window.ResizeObserver(_this.calculateMedia.bind(_this));
+        /** @hidden */
         _this.focus = function () {
             if (_this._input) {
                 _this._input.focus();
             }
         };
-        /**
-         * @hidden
-         */
+        /** @hidden */
         _this.handleItemSelect = function (index, state) {
             var _a = _this.props, _b = _a.data, data = _b === void 0 ? [] : _b, virtual = _a.virtual, dataItemKey = _a.dataItemKey;
             var skip = virtual ? virtual.skip : 0;
@@ -81,14 +82,41 @@ var ComboBoxWithoutContext = /** @class */ (function (_super) {
                 _this.base.triggerPageChangeCornerItems(item, state);
             }
         };
+        _this.onPopupOpened = function () {
+            setTimeout(function () {
+                if (_this.mobileMode && _this._adaptiveFilterInput) {
+                    _this._skipBlur = true;
+                    _this._adaptiveFilterInput.focus();
+                    _this._skipBlur = false;
+                }
+            }, 300);
+        };
         _this.componentRef = function (element) {
             _this._element = element;
             _this.base.wrapper = element;
         };
         _this.toggleBtnClick = function (event) {
+            var opened = _this.props.opened !== undefined ? _this.props.opened : _this.state.opened;
             var state = _this.base.initState();
             state.syntheticEvent = event;
             _this.base.togglePopup(state);
+            if (!opened && _this.mobileMode) {
+                var mobileText = _this.props.adaptiveFilter !== undefined ? _this.props.adaptiveFilter : _this.state.text || null;
+                _this.base.filterChanged(mobileText, state);
+            }
+            _this.applyState(state);
+        };
+        _this.renderMobileListFilter = function () {
+            var mobileText = _this.props.adaptiveFilter !== undefined ? _this.props.adaptiveFilter : _this.state.text;
+            var selectedItemText = getItemValue(_this.value, _this.props.textField);
+            var mobileInputText = isPresent(mobileText) ? mobileText : selectedItemText;
+            return (React.createElement(ListFilter, { value: mobileInputText, ref: function (filter) { return _this._adaptiveFilterInput = filter && filter.input; }, onChange: _this.handleMobileFilterChange, onKeyDown: _this.onInputKeyDown, size: _this.props.size, rounded: _this.props.rounded, fillMode: _this.props.fillMode }));
+        };
+        _this.handleMobileFilterChange = function (event) {
+            var state = _this.base.initState();
+            state.syntheticEvent = event;
+            state.data.text = event.target.value;
+            _this.base.filterChanged(event.target.value, state);
             _this.applyState(state);
         };
         _this.onScroll = function (event) {
@@ -125,7 +153,7 @@ var ComboBoxWithoutContext = /** @class */ (function (_super) {
             _this._valueDuringOnChange = undefined;
         };
         _this.handleBlur = function (event) {
-            if (_this.state.focused) {
+            if (_this.state.focused && !_this._skipBlur) {
                 var state = _this.base.initState();
                 state.data.focused = false;
                 state.events.push({ type: 'onBlur' });
@@ -133,6 +161,17 @@ var ComboBoxWithoutContext = /** @class */ (function (_super) {
                 _this.applyValueOnRejectSuggestions(event.currentTarget.value, state);
             }
         };
+        _this.onInputClick = function (event) {
+            var opened = _this.props.opened !== undefined ? _this.props.opened : _this.state.opened;
+            var mobileText = _this.props.adaptiveFilter !== undefined ? _this.props.adaptiveFilter : _this.state.text || null;
+            if (!opened && _this.mobileMode) {
+                var state = _this.base.initState();
+                state.syntheticEvent = event;
+                _this.base.togglePopup(state);
+                _this.base.filterChanged(mobileText, state);
+                _this.applyState(state);
+            }
+        };
         _this.onInputKeyDown = function (event) {
             var keyCode = event.keyCode;
             var opened = _this.props.opened !== undefined ? _this.props.opened : _this.state.opened;
@@ -209,7 +248,8 @@ var ComboBoxWithoutContext = /** @class */ (function (_super) {
             }
             _this.triggerOnChange(null, state);
             var opened = _this.props.opened !== undefined ? _this.props.opened : _this.state.opened;
-            if (opened) {
+            var isAdaptive = _this.mobileMode;
+            if (opened && !isAdaptive) {
                 _this.base.togglePopup(state);
             }
             _this.applyState(state);
@@ -224,12 +264,32 @@ var ComboBoxWithoutContext = /** @class */ (function (_super) {
         validatePackage(packageMetadata);
         return _this;
     }
+    Object.defineProperty(ComboBoxWithoutContext.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(ComboBoxWithoutContext.prototype, "element", {
+        /** @hidden */
+        get: function () {
+            return this._element;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(ComboBoxWithoutContext.prototype, "mobileMode", {
         /**
-         * @hidden
+         * The mobile mode of the ComboBox.
          */
         get: function () {
-            return this._element;
+            var isAdaptive = this.state.windowWidth && this.state.windowWidth <= MOBILE_MEDIUM_DEVISE && this.props.adaptive;
+            return !!isAdaptive;
         },
         enumerable: false,
         configurable: true
@@ -309,9 +369,7 @@ var ComboBoxWithoutContext = /** @class */ (function (_super) {
         configurable: true
     });
     Object.defineProperty(ComboBoxWithoutContext.prototype, "required", {
-        /**
-         * @hidden
-         */
+        /** @hidden */
         get: function () {
             return this.props.required !== undefined
                 ? this.props.required
@@ -320,9 +378,7 @@ var ComboBoxWithoutContext = /** @class */ (function (_super) {
         enumerable: false,
         configurable: true
     });
-    /**
-     * @hidden
-     */
+    /** @hidden */
     ComboBoxWithoutContext.prototype.componentDidUpdate = function (prevProps, prevState) {
         var _a = this.props, _b = _a.data, data = _b === void 0 ? [] : _b, dataItemKey = _a.dataItemKey, virtual = _a.virtual;
         var prevTotal = prevProps.virtual ? prevProps.virtual.total : 0;
@@ -343,6 +399,7 @@ var ComboBoxWithoutContext = /** @class */ (function (_super) {
                 this.base.scrollToVirtualItem(virtual, selectedItemIndex);
             }
             else if (opening && !virtual) {
+                this.onPopupOpened();
                 this.base.scrollToItem(selectedItemIndex);
             }
             else if (opened && prevOpened && selectedItem && selectedItemChanged) {
@@ -354,21 +411,29 @@ var ComboBoxWithoutContext = /** @class */ (function (_super) {
         }
         this.setValidity();
     };
-    /**
-     * @hidden
-     */
+    /** @hidden */
     ComboBoxWithoutContext.prototype.componentDidMount = function () {
+        var _a;
         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 */
+    ComboBoxWithoutContext.prototype.componentWillUnmount = function () {
+        var _a;
+        if (((_a = this.document) === null || _a === void 0 ? void 0 : _a.body) && this.observerResize) {
+            this.observerResize.disconnect();
+        }
     };
-    /**
-     * @hidden
-     */
+    /** @hidden */
     ComboBoxWithoutContext.prototype.render = function () {
         var _a;
         var btnAriaLabelExpand = provideLocalizationService(this).toLanguageString(comboArrowBtnAriaLabelExpand, messages[comboArrowBtnAriaLabelExpand]);
         var btnAriaLabelCollapse = provideLocalizationService(this).toLanguageString(comboArrowBtnAriaLabelCollapse, messages[comboArrowBtnAriaLabelCollapse]);
-        var _b = this.props, dir = _b.dir, disabled = _b.disabled, _c = _b.clearButton, clearButton = _c === void 0 ? ComboBoxWithoutContext.defaultProps.clearButton : _c, label = _b.label, textField = _b.textField, className = _b.className, style = _b.style, loading = _b.loading, iconClassName = _b.iconClassName, virtual = _b.virtual, size = _b.size, rounded = _b.rounded, fillMode = _b.fillMode, _d = _b.opened, opened = _d === void 0 ? this.state.opened : _d;
+        var _b = this.props, dir = _b.dir, disabled = _b.disabled, _c = _b.clearButton, clearButton = _c === void 0 ? ComboBoxWithoutContext.defaultProps.clearButton : _c, label = _b.label, textField = _b.textField, adaptive = _b.adaptive, className = _b.className, style = _b.style, loading = _b.loading, iconClassName = _b.iconClassName, virtual = _b.virtual, size = _b.size, rounded = _b.rounded, fillMode = _b.fillMode, _d = _b.opened, opened = _d === void 0 ? this.state.opened : _d, placeholder = _b.placeholder;
+        var _e = this.state.windowWidth, windowWidth = _e === void 0 ? 0 : _e;
         var isValid = !this.validityStyles || this.validity.valid;
         var text = this.props.filter !== undefined ? this.props.filter : this.state.text;
         var selectedItemText = getItemValue(this.value, textField);
@@ -377,33 +442,34 @@ 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;
         vs.enabled = virtual !== undefined;
         if (virtual !== undefined) {
             vs.skip = virtual.skip;
             vs.total = virtual.total;
             vs.pageSize = virtual.pageSize;
         }
-        var combobox = (React.createElement("span", { className: classNames('k-combobox k-input', (_a = {},
-                _a["k-input-".concat(sizeMap[size] || size)] = size,
-                _a["k-rounded-".concat(roundedMap[rounded] || rounded)] = rounded,
-                _a["k-input-".concat(fillMode)] = fillMode,
-                _a['k-invalid'] = !isValid,
-                _a['k-loading'] = loading,
-                _a['k-required'] = this.required,
-                _a['k-disabled'] = disabled,
-                _a), className), ref: this.componentRef, style: !label ? style : __assign(__assign({}, style), { width: undefined }), dir: dir },
-            this.renderSearchBar(inputText || '', id),
-            renderClearButton && !loading && React.createElement(ClearButton, { onClick: this.clearButtonClick, key: "clearbutton" }),
-            loading && React.createElement("span", { className: "k-icon k-i-loading k-input-loading-icon", key: "loading" }),
-            React.createElement(Button, { tabIndex: -1, type: "button", "aria-label": opened ? btnAriaLabelCollapse : btnAriaLabelExpand, icon: !iconClassName ? 'caret-alt-down' : undefined, svgIcon: !iconClassName ? caretAltDownIcon : this.props.svgIcon, iconClass: iconClassName, size: size, fillMode: fillMode, rounded: null, themeColor: 'base', className: "k-input-button", onClick: this.toggleBtnClick, onMouseDown: function (e) { return e.preventDefault(); } }),
-            this.renderListContainer()));
+        var combobox = (React.createElement(React.Fragment, null,
+            React.createElement("span", { className: classNames('k-combobox k-input', (_a = {},
+                    _a["k-input-".concat(sizeMap[size] || size)] = size,
+                    _a["k-rounded-".concat(roundedMap[rounded] || rounded)] = rounded,
+                    _a["k-input-".concat(fillMode)] = fillMode,
+                    _a['k-invalid'] = !isValid,
+                    _a['k-loading'] = loading,
+                    _a['k-required'] = this.required,
+                    _a['k-disabled'] = disabled,
+                    _a), className), ref: this.componentRef, style: !label ? style : __assign(__assign({}, style), { width: undefined }), dir: dir },
+                this.renderSearchBar(inputText || '', id, placeholder),
+                renderClearButton && !loading && React.createElement(ClearButton, { onClick: this.clearButtonClick, key: "clearbutton" }),
+                loading && React.createElement("span", { className: "k-icon k-i-loading k-input-loading-icon", key: "loading" }),
+                React.createElement(Button, { tabIndex: -1, type: "button", "aria-label": opened ? btnAriaLabelCollapse : btnAriaLabelExpand, icon: !iconClassName ? 'caret-alt-down' : undefined, svgIcon: !iconClassName ? caretAltDownIcon : this.props.svgIcon, iconClass: iconClassName, size: size, fillMode: fillMode, rounded: null, themeColor: 'base', className: "k-input-button", onClick: this.toggleBtnClick, onMouseDown: function (e) { return e.preventDefault(); } }),
+                !renderAdaptive && this.renderListContainer()),
+            renderAdaptive && this.renderAdaptiveListContainer()));
         return label
             ? (React.createElement(FloatingLabel, { label: label, editorId: id, editorValue: inputText, editorValid: isValid, editorDisabled: disabled, style: { width: style ? style.width : undefined }, children: combobox }))
             : combobox;
     };
-    /**
-     * @hidden
-     */
+    /** @hidden */
     ComboBoxWithoutContext.prototype.onNavigate = function (state, keyCode) {
         var _a = this.props, _b = _a.data, data = _b === void 0 ? [] : _b, _c = _a.virtual, virtual = _c === void 0 ? { skip: 0 } : _c;
         var text = this.props.filter ? this.props.filter : this.state.text;
@@ -430,6 +496,7 @@ var ComboBoxWithoutContext = /** @class */ (function (_super) {
             }
         }
     };
+    ;
     ComboBoxWithoutContext.prototype.applyValueOnEnter = function (value, state) {
         var _a;
         var _b = this.props, _c = _b.data, data = _c === void 0 ? [] : _c, textField = _b.textField, allowCustom = _b.allowCustom;
@@ -465,9 +532,10 @@ 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 = getItemValue(this.value, textField);
+        var isMobileDevice = this.state.windowWidth && this.state.windowWidth <= MOBILE_MEDIUM_DEVISE;
         this._suggested = '';
         if (text === valueItemText || (text === '' && !isPresent(valueItemText))) {
-            if (opened) {
+            if (opened && !isMobileDevice) {
                 this.base.togglePopup(state);
             }
             return this.applyState(state);
@@ -486,7 +554,7 @@ var ComboBoxWithoutContext = /** @class */ (function (_super) {
             state.data.text = undefined;
             this.base.filterChanged('', state);
         }
-        if (opened) {
+        if (opened && !isMobileDevice) {
             this.base.togglePopup(state);
         }
         this.applyState(state);
@@ -511,6 +579,51 @@ var ComboBoxWithoutContext = /** @class */ (function (_super) {
         }
         return this.applyState(state);
     };
+    ComboBoxWithoutContext.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, _d = _c.data, data = _d === void 0 ? [] : _d, groupField = _c.groupField, list = _c.list, virtual = _c.virtual, adaptiveTitle = _c.adaptiveTitle;
+        var opened = this.props.opened !== undefined ? this.props.opened : this.state.opened;
+        var group = this.state.group;
+        if (group === undefined && groupField !== undefined) {
+            group = getItemValue(data[0], groupField);
+        }
+        var actionSheetProps = {
+            navigatable: false,
+            navigatableElements: [],
+            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
+                ? '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.toggleBtnClick },
+                                React.createElement("span", { className: "k-button-icon k-icon k-i-x" })))),
+                    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' },
+                        React.createElement("div", { className: classNames((_a = {},
+                                _a['k-list'] = !list,
+                                _a['k-list-lg'] = true,
+                                _a['k-virtual-list'] = virtual,
+                                _a['k-data-table'] = list,
+                                _a["k-table-".concat(sizeMap[size] || size)] = list && size,
+                                _a)) },
+                            header && React.createElement("div", { className: "k-table-header" }, header),
+                            !list && group && React.createElement("div", { className: "k-list-group-sticky-header" }, group),
+                            this.renderList(),
+                            footer && React.createElement("div", { className: "k-list-footer" }, footer)))))));
+    };
     ComboBoxWithoutContext.prototype.renderListContainer = function () {
         var _a;
         var base = this.base;
@@ -557,20 +670,22 @@ var ComboBoxWithoutContext = /** @class */ (function (_super) {
         var selectedItemText = getItemValue(this.value, textField);
         var value = isPresent(text) && text !== selectedItemText ? null : this.value;
         var ListComponent = this.props.list || List;
-        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: { maxHeight: popupSettings.height }, wrapperCssClass: classNames('k-list-content', (_a = {},
+        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)
+                ? { maxHeight: popupSettings.height }
+                : {}, wrapperCssClass: classNames('k-list-content', (_a = {},
                 _a['k-list-scroller'] = !virtual,
                 _a)), listStyle: vs.enabled ? { transform: translate } : undefined, key: "listkey", skip: skip, onClick: this.handleItemClick, itemRender: itemRender, noDataRender: listNoDataRender, onMouseDown: function (e) { return e.preventDefault(); }, onScroll: this.onScroll, wrapperRef: vs.scrollerRef, scroller: this.base.renderScrollElement() }));
     };
-    ComboBoxWithoutContext.prototype.renderSearchBar = function (text, id) {
+    ComboBoxWithoutContext.prototype.renderSearchBar = function (text, id, placeholder) {
         var _this = this;
-        var _a = this.props, placeholder = _a.placeholder, tabIndex = _a.tabIndex, disabled = _a.disabled, _b = _a.data, data = _b === void 0 ? [] : _b, dataItemKey = _a.dataItemKey, _c = _a.virtual, virtual = _c === void 0 ? { skip: 0 } : _c;
+        var _a = this.props, tabIndex = _a.tabIndex, disabled = _a.disabled, _b = _a.data, data = _b === void 0 ? [] : _b, dataItemKey = _a.dataItemKey, _c = _a.virtual, virtual = _c === void 0 ? { skip: 0 } : _c;
         var opened = this.props.opened !== undefined ? this.props.opened : this.state.opened;
         var value = this.value;
         var selectedIndex = Math.max(0, data.findIndex(function (i) { return areSame(i, value, dataItemKey); }));
         if (this._suggested && !areSame(this._valueOnDidUpdate, value, dataItemKey)) {
             this._suggested = '';
         }
-        return (React.createElement(SearchBar, { id: id, placeholder: placeholder, tabIndex: tabIndex, accessKey: this.props.accessKey, value: text + this._suggested, suggestedText: this._suggested, ref: function (el) { return _this._input = el && el.input; }, onKeyDown: this.onInputKeyDown, onChange: this.inputOnChange, onFocus: this.base.handleFocus, onBlur: this.handleBlur, disabled: disabled, expanded: opened, owns: this.base.listBoxId, activedescendant: "option-".concat(this.base.guid, "-").concat(selectedIndex + virtual.skip), role: "combobox", ariaLabelledBy: this.props.ariaLabelledBy, ariaDescribedBy: this.props.ariaDescribedBy, ariaRequired: this.required, render: this.props.valueRender }));
+        return (React.createElement(SearchBar, { id: id, readOnly: (opened && this.mobileMode), placeholder: placeholder, tabIndex: tabIndex, accessKey: this.props.accessKey, value: text + this._suggested, suggestedText: this._suggested, ref: function (el) { return _this._input = el && el.input; }, onClick: this.onInputClick, onKeyDown: this.onInputKeyDown, onChange: this.inputOnChange, onFocus: this.base.handleFocus, onBlur: this.handleBlur, disabled: disabled, expanded: opened, owns: this.base.listBoxId, activedescendant: "option-".concat(this.base.guid, "-").concat(selectedIndex + virtual.skip), role: "combobox", ariaLabelledBy: this.props.ariaLabelledBy, ariaDescribedBy: this.props.ariaDescribedBy, ariaRequired: this.required, render: this.props.valueRender }));
     };
     ComboBoxWithoutContext.prototype.triggerOnChange = function (item, state) {
         var value = this.value;
@@ -605,14 +720,18 @@ var ComboBoxWithoutContext = /** @class */ (function (_super) {
         this.base.applyState(state);
         this._valueDuringOnChange = undefined;
     };
+    ComboBoxWithoutContext.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 });
+        }
+        ;
+    };
+    ;
     ComboBoxWithoutContext.displayName = 'ComboBox';
-    /**
-     * @hidden
-     */
+    /** @hidden */
     ComboBoxWithoutContext.propTypes = __assign(__assign({}, DropDownBase.propTypes), { size: PropTypes.oneOf([null, 'small', 'medium', 'large']), rounded: PropTypes.oneOf([null, 'small', 'medium', 'large', 'full']), fillMode: PropTypes.oneOf([null, 'solid', 'flat', 'outline']), dataItemKey: PropTypes.string, groupField: PropTypes.string, suggest: PropTypes.bool, placeholder: PropTypes.string, allowCustom: PropTypes.bool, clearButton: PropTypes.bool, iconClassName: PropTypes.string, svgIcon: svgIconPropType, validationMessage: PropTypes.string, required: PropTypes.bool, id: PropTypes.string, ariaLabelledBy: PropTypes.string, ariaDescribedBy: PropTypes.string, list: PropTypes.any, valueRender: PropTypes.func });
-    /**
-     * @hidden
-     */
+    /** @hidden */
     ComboBoxWithoutContext.defaultProps = __assign(__assign({}, DropDownBase.defaultProps), { size: 'medium', rounded: 'medium', fillMode: 'solid', allowCustom: false, clearButton: true, required: false });
     return ComboBoxWithoutContext;
 }(React.Component));

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

@@ -107,6 +107,10 @@ export interface ComboBoxProps extends FormComponentProps {
      * 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)).
      */
@@ -268,4 +272,12 @@ export interface ComboBoxProps 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/DropDownBase.d.ts

@@ -147,7 +147,7 @@ export default class DropDownBase {
     didMount(): void;
     calculateDir(): void;
     calculatePopupWidth(): void;
-    scrollToItem(itemIndex: number, vsEnabled?: boolean): void;
+    scrollToItem(itemIndex: number, vsEnabled?: boolean, once?: boolean): void;
     handleItemClick: (index: number, event: React.MouseEvent<HTMLLIElement> | React.KeyboardEvent<HTMLInputElement>) => void;
     handleFocus: React.FocusEventHandler<HTMLSpanElement>;
     filterChanged: (text: string | null, state: InternalState) => void;

package/dist/es/common/DropDownBase.js

@@ -136,8 +136,14 @@ var DropDownBase = /** @class */ (function () {
             this.popupWidth = this.wrapper.offsetWidth + 'px';
         }
     };
-    DropDownBase.prototype.scrollToItem = function (itemIndex, vsEnabled) {
+    DropDownBase.prototype.scrollToItem = function (itemIndex, vsEnabled, once) {
+        var _this = this;
         var list = this.list || this.vs.list;
+        if (!list && !once) {
+            setTimeout(function () {
+                _this.scrollToItem(itemIndex, vsEnabled, true);
+            }, 10);
+        }
         if (list && itemIndex >= 0) {
             var vs = this.vs;
             var scrollElement = (vs.container || list.parentNode);

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

@@ -15,6 +15,7 @@ export interface SearchBarProps {
     onKeyDown?: React.KeyboardEventHandler<HTMLInputElement>;
     onFocus?: React.FocusEventHandler<HTMLInputElement>;
     onBlur?: React.FocusEventHandler<HTMLInputElement>;
+    onClick?: React.MouseEventHandler<HTMLInputElement>;
     disabled?: boolean;
     readOnly?: boolean;
     expanded?: boolean;