@progress/kendo-react-dropdowns 6.1.1 → 7.0.0-develop.10

package/dist/es/ComboBox/ComboBox.js

@@ -1,915 +0,0 @@
-var __extends = (this && this.__extends) || (function () {
-    var extendStatics = function (d, b) {
-        extendStatics = Object.setPrototypeOf ||
-            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
-            function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
-        return extendStatics(d, b);
-    };
-    return function (d, b) {
-        if (typeof b !== "function" && b !== null)
-            throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
-        extendStatics(d, b);
-        function __() { this.constructor = d; }
-        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
-    };
-})();
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
-import * as React from 'react';
-import * as PropTypes from 'prop-types';
-import DropDownBase from '../common/DropDownBase';
-import { guid, classNames, Keys, createPropsContext, withPropsContext, kendoThemeMaps, svgIconPropType } from '@progress/kendo-react-common';
-import { FloatingLabel } from '@progress/kendo-react-labels';
-import { areSame, itemIndexStartsWith, getItemIndexByText, getItemValue, isPresent, suggestValue } from '../common/utils';
-import SearchBar from '../common/SearchBar';
-import ListContainer from '../common/ListContainer';
-import List from '../common/List';
-import ListFilter from '../common/ListFilter';
-import GroupStickyHeader from '../common/GroupStickyHeader';
-import { validatePackage, canUseDOM, IconWrap } from '@progress/kendo-react-common';
-import { packageMetadata } from '../package-metadata';
-import ClearButton from '../common/ClearButton';
-import { Button } from '@progress/kendo-react-buttons';
-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 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 */
-        _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.focus = function () {
-            if (_this._input) {
-                _this._input.focus();
-            }
-        };
-        /** @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;
-            var item = data[index - skip];
-            var newSelected = !areSame(item, _this.value, dataItemKey);
-            _this.triggerOnChange(item, state);
-            if (_this.state.text !== undefined) {
-                state.data.text = undefined;
-            }
-            if (newSelected) {
-                _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 _a = _this.props, _b = _a.data, data = _b === void 0 ? [] : _b, skipDisabledItems = _a.skipDisabledItems, textField = _a.textField;
-            var focusedIndex = _this.getFocusedIndex();
-            var isCurrentValueDisabled = _this.getCurrentValueDisabledStatus(textField, data, focusedIndex);
-            var opened = _this.props.opened !== undefined ? _this.props.opened : _this.state.opened;
-            var state = _this.base.initState();
-            state.syntheticEvent = event;
-            if (!skipDisabledItems && textField && isCurrentValueDisabled) {
-                _this.clearValueOnToggleBtnClick(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.element; }, 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.syntheticEvent;
-            state.data.text = event.target.value;
-            _this.base.filterChanged(event.target.value, state);
-            _this.applyState(state);
-        };
-        _this.onScroll = function (event) {
-            var _a = _this.base, vs = _a.vs, list = _a.list;
-            vs.scrollHandler(event);
-            var groupField = _this.props.groupField;
-            var _b = _this.props.data, data = _b === void 0 ? [] : _b;
-            if (!groupField || !data.length) {
-                return;
-            }
-            var itemHeight = _this.itemHeight =
-                _this.itemHeight || (vs.enabled ? vs.itemHeight : (list ? list.children[0].offsetHeight : 0));
-            var target = event.target;
-            var scrollTop = target.scrollTop - (vs.skip * itemHeight);
-            if (_this.props.groupMode === 'modern') {
-                data = _this.base.getGroupedDataModernMode(data, groupField);
-            }
-            var group = data[0][groupField];
-            for (var i = 1; i < data.length; i++) {
-                if (itemHeight * i > scrollTop) {
-                    break;
-                }
-                if (data[i] && data[i][groupField]) {
-                    group = data[i][groupField];
-                }
-            }
-            if (group !== _this.state.group) {
-                _this.setState({
-                    group: group
-                });
-                if (_this.props.onGroupScroll) {
-                    _this.props.onGroupScroll.call(undefined, { group: group });
-                }
-            }
-        };
-        _this.handleItemClick = function (index, event) {
-            _this.base.handleItemClick(index, event);
-            _this._valueDuringOnChange = undefined;
-        };
-        _this.handleBlur = function (event) {
-            if (_this.state.focused && !_this._skipBlur) {
-                var state = _this.base.initState();
-                var _a = _this.props, textField = _a.textField, _b = _a.data, data = _b === void 0 ? [] : _b;
-                var focusedIndex = _this.getFocusedIndex();
-                var isCustomValue = focusedIndex === -1;
-                var isCurrentValueDisabled = !isCustomValue && _this.getCurrentValueDisabledStatus(textField, data, focusedIndex);
-                state.data.focused = false;
-                state.events.push({ type: 'onBlur' });
-                state.syntheticEvent = event;
-                if (textField && isCurrentValueDisabled) {
-                    _this.clearValueOnBlur(event);
-                }
-                _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 _a = _this.props, _b = _a.data, data = _b === void 0 ? [] : _b, skipDisabledItems = _a.skipDisabledItems, textField = _a.textField, dataItemKey = _a.dataItemKey, groupField = _a.groupField;
-            var value = _this.value;
-            var selectedIndex = Math.max(0, data.findIndex(function (i) { return areSame(i, value, dataItemKey); }));
-            var keyCode = event.keyCode;
-            var opened = _this.props.opened !== undefined ? _this.props.opened : _this.state.opened;
-            var state = _this.base.initState();
-            state.syntheticEvent = event;
-            if (!event.altKey && (keyCode === Keys.up || keyCode === Keys.down)) {
-                event.preventDefault();
-                if (groupField !== '' && textField) {
-                    if (!_this.props.skipDisabledItems && opened) {
-                        _this.onNavigate(state, keyCode);
-                    }
-                    else {
-                        var newIndex = 0;
-                        if (keyCode === Keys.down || keyCode === Keys.right) {
-                            var tempnewIndex_1 = data.slice(selectedIndex + 1).find(function (i) { return !i.disabled && i[textField]; });
-                            newIndex = tempnewIndex_1 && data.findIndex(function (el) { return el[textField] === tempnewIndex_1[textField]; });
-                        }
-                        else if (keyCode === Keys.up || keyCode === Keys.left) {
-                            var dataToSearch = void 0;
-                            if (selectedIndex === 0) {
-                                dataToSearch = data;
-                                newIndex = data.findIndex(function (i) { return !i.disabled && i[textField]; });
-                            }
-                            else {
-                                dataToSearch = data.slice(0, selectedIndex);
-                                var tempnewIndex_2 = dataToSearch.pop();
-                                while (tempnewIndex_2 && tempnewIndex_2.disabled) {
-                                    tempnewIndex_2 = dataToSearch.pop();
-                                }
-                                newIndex = tempnewIndex_2 && data.findIndex(function (el) { return el[textField] === tempnewIndex_2[textField]; });
-                            }
-                        }
-                        if (newIndex !== undefined) {
-                            var skipItems = newIndex - selectedIndex;
-                            _this.onNavigate(state, keyCode, skipItems);
-                        }
-                        else if (newIndex === undefined && data.findIndex(function (el) { return el[textField] === value[textField]; }) === data.length - 1) {
-                            _this.onNavigate(state, keyCode);
-                        }
-                    }
-                }
-                else if (!_this.props.skipDisabledItems && opened) {
-                    _this.onNavigate(state, keyCode);
-                }
-                else {
-                    var newIndex = null;
-                    if (keyCode === Keys.down || keyCode === Keys.right) {
-                        newIndex = data.slice(selectedIndex + 1).find(function (i) { return !i.disabled; });
-                    }
-                    else if (keyCode === Keys.up || keyCode === Keys.left) {
-                        var dataTest = data.slice(0, selectedIndex);
-                        newIndex = dataTest.pop();
-                        while (newIndex && newIndex.disabled) {
-                            newIndex = dataTest.pop();
-                        }
-                    }
-                    if (newIndex) {
-                        var skipItems = newIndex.id - selectedIndex - 1;
-                        _this.onNavigate(state, keyCode, skipItems);
-                    }
-                    else {
-                        _this.onNavigate(state, keyCode);
-                    }
-                }
-                _this.applyState(state);
-            }
-            var togglePopup = function () {
-                event.preventDefault();
-                _this.base.togglePopup(state);
-                _this.applyState(state);
-            };
-            var focusedIndex = _this.getFocusedIndex();
-            var isCustomValue = focusedIndex === -1;
-            var isCurrentValueDisabled = !isCustomValue && _this.getCurrentValueDisabledStatus(textField, data, focusedIndex);
-            if (opened) {
-                if (keyCode === Keys.pageUp) {
-                    _this.base.scrollPopupByPageSize(-1);
-                }
-                else if (keyCode === Keys.pageDown) {
-                    _this.base.scrollPopupByPageSize(1);
-                }
-                else if (event.altKey && keyCode === Keys.up) {
-                    togglePopup();
-                }
-                else if (keyCode === Keys.enter) {
-                    event.preventDefault();
-                    var currentValueText = textField && !isCustomValue && event.currentTarget.value ? data[focusedIndex][textField] : undefined;
-                    if (currentValueText) {
-                        if (!skipDisabledItems && textField && isCurrentValueDisabled) {
-                            _this.clearValueOnEnterOrEsc(event);
-                        }
-                        else if (!isCurrentValueDisabled) {
-                            _this.applyValueOnEnter(event.currentTarget.value, state);
-                        }
-                    }
-                    else {
-                        _this.applyValueOnEnter(event.currentTarget.value, state);
-                    }
-                }
-                else if (keyCode === Keys.esc) {
-                    if (!skipDisabledItems && textField && isCurrentValueDisabled) {
-                        _this.clearValueOnEnterOrEsc(event);
-                    }
-                    _this.applyValueOnRejectSuggestions(event.currentTarget.value, state);
-                }
-            }
-            else if (!opened && keyCode === Keys.esc) {
-                _this.clearValueOnEnterOrEsc(event);
-            }
-            else if (event.altKey && keyCode === Keys.down) {
-                togglePopup();
-            }
-        };
-        _this.inputOnChange = function (event) {
-            var state = _this.base.initState();
-            state.syntheticEvent = event;
-            var opened = _this.props.opened !== undefined ? _this.props.opened : _this.state.opened;
-            var input = event.currentTarget;
-            var value = input.value;
-            if (_this.props.suggest) {
-                var selectionAtEnd = input.selectionEnd === value.length;
-                var prevText = _this.props.filter !== undefined ? _this.props.filter : _this.state.text;
-                if (!isPresent(prevText)) {
-                    prevText = getItemValue(_this.value, _this.props.textField) || '';
-                }
-                var deletedSuggestion = prevText && prevText === value;
-                var deleting = prevText && prevText.length > value.length;
-                if (deletedSuggestion || deleting || !selectionAtEnd) {
-                    _this._suggested = '';
-                }
-                else {
-                    _this.suggestValue(value);
-                }
-            }
-            if (_this.props.filter === undefined) {
-                state.data.text = value;
-            }
-            if (_this.state.focusedItem !== undefined) {
-                state.data.focusedItem = undefined;
-            }
-            if (!opened) {
-                _this.base.togglePopup(state);
-            }
-            _this.base.filterChanged(value, state);
-            _this.applyState(state);
-            _this.setState({ group: undefined });
-        };
-        _this.clearButtonClick = function (event) {
-            var state = _this.base.initState();
-            state.syntheticEvent = event;
-            event.stopPropagation();
-            _this.clearValue();
-        };
-        _this.clearValueOnEnterOrEsc = function (event) {
-            var state = _this.base.initState();
-            state.syntheticEvent = event;
-            event.stopPropagation();
-            _this.clearValue();
-        };
-        _this.clearValueOnBlur = function (event) {
-            var state = _this.base.initState();
-            state.syntheticEvent = event;
-            event.stopPropagation();
-            _this.clearValue();
-        };
-        _this.clearValueOnToggleBtnClick = function (event) {
-            var state = _this.base.initState();
-            state.syntheticEvent = event;
-            event.stopPropagation();
-            _this.clearValue();
-        };
-        _this.setValidity = function () {
-            if (_this._input && _this._input.setCustomValidity) {
-                _this._input.setCustomValidity(_this.validity.valid
-                    ? ''
-                    : _this.props.validationMessage || VALIDATION_MESSAGE);
-            }
-        };
-        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", {
-        /**
-         * The mobile mode of the ComboBox.
-         */
-        get: function () {
-            var isAdaptive = this.state.windowWidth && this.state.windowWidth <= MOBILE_MEDIUM_DEVISE && this.props.adaptive;
-            return !!isAdaptive;
-        },
-        enumerable: false,
-        configurable: true
-    });
-    Object.defineProperty(ComboBoxWithoutContext.prototype, "value", {
-        /**
-         * The value of the ComboBox.
-         */
-        get: function () {
-            if (this._valueDuringOnChange !== undefined) {
-                return this._valueDuringOnChange;
-            }
-            else if (this.props.value !== undefined) {
-                return this.props.value;
-            }
-            else if (this.state.value !== undefined) {
-                return this.state.value;
-            }
-            else if (this.props.defaultValue !== undefined) {
-                return this.props.defaultValue;
-            }
-            return undefined;
-        },
-        enumerable: false,
-        configurable: true
-    });
-    Object.defineProperty(ComboBoxWithoutContext.prototype, "index", {
-        /**
-         * The index of the selected item.
-         */
-        get: function () {
-            var _a = this.props, _b = _a.data, data = _b === void 0 ? [] : _b, dataItemKey = _a.dataItemKey;
-            var value = this.value;
-            // TO DO: deprecate it!
-            return data.findIndex(function (i) { return areSame(i, value, dataItemKey); });
-        },
-        enumerable: false,
-        configurable: true
-    });
-    Object.defineProperty(ComboBoxWithoutContext.prototype, "name", {
-        /**
-         * Gets the `name` property of the ComboBox.
-         */
-        get: function () {
-            return this.props.name;
-        },
-        enumerable: false,
-        configurable: true
-    });
-    Object.defineProperty(ComboBoxWithoutContext.prototype, "validity", {
-        /**
-         * Represents the validity state into which the component is set.
-         */
-        get: function () {
-            // remove the undefined check when this is fixed:
-            // https://github.com/telerik/kendo-react-private/issues/252
-            var customError = this.props.validationMessage !== undefined;
-            var isValid = (!this.required
-                || (this.value !== null && this.value !== '' && this.value !== undefined));
-            var valid = this.props.valid !== undefined ? this.props.valid : isValid;
-            return {
-                customError: customError,
-                valid: valid,
-                valueMissing: this.value === null
-            };
-        },
-        enumerable: false,
-        configurable: true
-    });
-    Object.defineProperty(ComboBoxWithoutContext.prototype, "validityStyles", {
-        get: function () {
-            return this.props.validityStyles !== undefined
-                ? this.props.validityStyles
-                : ComboBoxWithoutContext.defaultProps.validityStyles;
-        },
-        enumerable: false,
-        configurable: true
-    });
-    Object.defineProperty(ComboBoxWithoutContext.prototype, "required", {
-        /** @hidden */
-        get: function () {
-            return this.props.required !== undefined
-                ? this.props.required
-                : ComboBoxWithoutContext.defaultProps.required;
-        },
-        enumerable: false,
-        configurable: true
-    });
-    /** @hidden */
-    ComboBoxWithoutContext.prototype.componentDidUpdate = function (prevProps, prevState) {
-        var _a;
-        var _b = this.props, dataItemKey = _b.dataItemKey, virtual = _b.virtual, _c = _b.groupField, groupField = _c === void 0 ? '' : _c, _d = _b.data, data = _d === void 0 ? [] : _d, textField = _b.textField;
-        var prevTotal = prevProps.virtual ? prevProps.virtual.total : 0;
-        var opened = this.props.opened !== undefined ? this.props.opened : this.state.opened;
-        var prevOpened = prevProps.opened !== undefined ? prevProps.opened : prevState.opened;
-        var opening = !prevOpened && opened;
-        var selectedItem = this.value;
-        this._valueOnDidUpdate = selectedItem;
-        if (virtual && virtual.total !== prevTotal) {
-            this.base.vs.calcScrollElementHeight();
-            this.base.vs.reset();
-        }
-        else {
-            var prevSelectedItem = prevProps.value !== undefined ? prevProps.value : prevState.value;
-            var selectedItemIndex = data.findIndex(function (i) { return areSame(i, selectedItem, dataItemKey); });
-            // Needed to calculate the proper item index when in 'modern' grouping mode
-            if (this.props.groupMode === 'modern' && textField && selectedItem) {
-                selectedItemIndex = (_a = this.base.getGroupedDataModernMode(data, groupField)) === null || _a === void 0 ? void 0 : _a.map(function (el) { return el[textField]; }).indexOf(selectedItem[textField]);
-            }
-            var selectedItemChanged = !areSame(prevSelectedItem, selectedItem, dataItemKey);
-            if (opening && virtual) {
-                this.base.scrollToVirtualItem(virtual, selectedItemIndex);
-            }
-            else if (opening && !virtual) {
-                this.onPopupOpened();
-                // Resets the sticky header group value for scenarios with open/close of component's popup
-                if (data && data.length !== 0) {
-                    this.base.resetGroupStickyHeader(data[0][groupField], this);
-                }
-                this.base.scrollToItem(selectedItemIndex);
-            }
-            else if (opened && prevOpened && selectedItem && selectedItemChanged) {
-                this.base.scrollToItem(selectedItemIndex);
-            }
-        }
-        if (opening && this._input) {
-            this._input.focus();
-        }
-        this.setValidity();
-    };
-    /** @hidden */
-    ComboBoxWithoutContext.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 */
-    ComboBoxWithoutContext.prototype.componentWillUnmount = function () {
-        var _a;
-        if (((_a = this.document) === null || _a === void 0 ? void 0 : _a.body) && this.observerResize) {
-            this.observerResize.disconnect();
-        }
-    };
-    /** @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, 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);
-        var inputText = isPresent(text) ? text : selectedItemText;
-        var renderClearButton = clearButton && (!!(inputText) || isPresent(this.value));
-        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(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(IconWrap, { className: "k-input-loading-icon", name: 'loading', 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 */
-    ComboBoxWithoutContext.prototype.onNavigate = function (state, keyCode, skipItems) {
-        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;
-        var focusedIndex = this.getFocusedIndex();
-        var vs = this.base.vs;
-        var value = this.value;
-        this._suggested = '';
-        if (focusedIndex !== -1 && !isPresent(value)) {
-            this.handleItemSelect(focusedIndex, state);
-        }
-        else if (text === '') {
-            this.handleItemSelect(0, state);
-        }
-        else {
-            var currentIndex = virtual.skip + focusedIndex;
-            var newIndex = this.base.navigation.navigate({
-                keyCode: keyCode,
-                current: currentIndex,
-                max: (vs.enabled ? vs.total : data.length) - 1,
-                min: 0,
-                skipItems: skipItems ? skipItems : undefined
-            });
-            if (newIndex !== undefined) {
-                this.handleItemSelect(newIndex, state);
-            }
-        }
-    };
-    ;
-    ComboBoxWithoutContext.prototype.getCurrentValueDisabledStatus = function (textField, data, focusedIndex) {
-        return textField && data && data[focusedIndex] && data[focusedIndex].disabled;
-    };
-    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;
-        var opened = this.props.opened !== undefined ? this.props.opened : this.state.opened;
-        var currentValueText = getItemValue(this.value, textField);
-        var valueIndex = currentValueText === value ?
-            this.index : getItemIndexByText(data, value, textField);
-        var itemSelected = valueIndex !== -1;
-        var newSelected = undefined;
-        this._suggested = '';
-        if (itemSelected) { // typed text match item from list
-            newSelected = data[valueIndex];
-        }
-        else {
-            if (allowCustom) { // any custom text not in list
-                newSelected = textField !== undefined ? (_a = {}, _a[textField] = value, _a) : value;
-            }
-            else {
-                return this.selectFocusedItem(value, state);
-            }
-        }
-        this.triggerOnChange(newSelected, state);
-        if (opened) {
-            this.base.togglePopup(state);
-        }
-        if (this.props.filter === undefined && this.state.text !== undefined) {
-            state.data.text = undefined;
-        }
-        this.applyState(state);
-    };
-    ComboBoxWithoutContext.prototype.applyValueOnRejectSuggestions = function (text, state) {
-        var _a;
-        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 && !isMobileDevice) {
-                this.base.togglePopup(state);
-            }
-            return this.applyState(state);
-        }
-        var valueIndex = getItemIndexByText(data, text, textField, true);
-        var itemSelected = valueIndex !== -1;
-        var newSelected = null;
-        if (itemSelected) {
-            newSelected = data[valueIndex];
-        }
-        else if (allowCustom) {
-            newSelected = text ? (textField ? (_a = {}, _a[textField] = text, _a) : text) : null;
-        }
-        this.triggerOnChange(newSelected, state);
-        if (this.state.text !== undefined) {
-            state.data.text = undefined;
-            this.base.filterChanged('', state);
-        }
-        if (opened && !isMobileDevice) {
-            this.base.togglePopup(state);
-        }
-        this.applyState(state);
-    };
-    ComboBoxWithoutContext.prototype.selectFocusedItem = function (text, state) {
-        var opened = this.props.opened !== undefined ? this.props.opened : this.state.opened;
-        var _a = this.props, _b = _a.data, data = _b === void 0 ? [] : _b, textField = _a.textField, _c = _a.virtual, virtual = _c === void 0 ? { skip: 0 } : _c, _d = _a.focusedItemIndex, focusedItemIndex = _d === void 0 ? itemIndexStartsWith : _d;
-        var skip = virtual.skip;
-        var focusedIndex = (text === '' && skip === 0) ? 0 :
-            focusedItemIndex(data, text, textField);
-        if (focusedIndex !== -1) {
-            this.handleItemSelect(focusedIndex + skip, state);
-        }
-        else {
-            this.triggerOnChange(null, state);
-            if (this.state.text !== undefined) {
-                state.data.text = undefined;
-            }
-        }
-        if (opened) {
-            this.base.togglePopup(state);
-        }
-        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, groupMode = _c.groupMode, list = _c.list, virtual = _c.virtual, adaptiveTitle = _c.adaptiveTitle, groupStickyHeaderItemRender = _c.groupStickyHeaderItemRender;
-        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, 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' },
-                        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 && data.length !== 0 && React.createElement(GroupStickyHeader, { group: group, groupMode: groupMode, render: groupStickyHeaderItemRender }),
-                            this.renderList(),
-                            footer && React.createElement("div", { className: "k-list-footer" }, footer)))))));
-    };
-    ComboBoxWithoutContext.prototype.renderListContainer = function () {
-        var _a, _b;
-        var base = this.base;
-        var _c = this.props, dir = _c.dir, header = _c.header, footer = _c.footer, _d = _c.data, data = _d === void 0 ? [] : _d, groupField = _c.groupField, groupMode = _c.groupMode, size = _c.size, list = _c.list, virtual = _c.virtual, groupStickyHeaderItemRender = _c.groupStickyHeaderItemRender;
-        var opened = this.props.opened !== undefined ? this.props.opened : this.state.opened;
-        var popupSettings = base.getPopupSettings();
-        var popupWidth = popupSettings.width !== undefined ? popupSettings.width : base.popupWidth;
-        var group = this.state.group;
-        if (group === undefined && groupField !== undefined) {
-            group = getItemValue(data[0], groupField);
-        }
-        return (React.createElement(ListContainer, { width: popupWidth, popupSettings: {
-                animate: popupSettings.animate,
-                anchor: this.element,
-                show: opened,
-                popupClass: classNames(popupSettings.popupClass, 'k-list-container', 'k-combobox-popup'),
-                className: popupSettings.className,
-                appendTo: popupSettings.appendTo
-            }, dir: dir !== undefined ? dir : this.base.dirCalculated, itemsCount: [data.length] },
-            React.createElement("div", { className: classNames((_a = {},
-                    _a['k-list'] = !list,
-                    _a["k-list-".concat(sizeMap[size] || size)] = !list && size,
-                    _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 && data.length !== 0 && React.createElement(GroupStickyHeader, { group: group, groupMode: groupMode, render: groupStickyHeaderItemRender }),
-                this.renderList(),
-                footer &&
-                    React.createElement("div", { className: classNames((_b = {},
-                            _b['k-list-footer'] = !this.props.footerClassName,
-                            _b), this.props.footerClassName) }, footer))));
-    };
-    ComboBoxWithoutContext.prototype.renderList = function () {
-        var _a;
-        var _this = this;
-        var base = this.base;
-        var _b = this.props, textField = _b.textField, dataItemKey = _b.dataItemKey, listNoDataRender = _b.listNoDataRender, itemRender = _b.itemRender, groupHeaderItemRender = _b.groupHeaderItemRender, _c = _b.data, data = _c === void 0 ? [] : _c, _d = _b.virtual, virtual = _d === void 0 ? { skip: 0 } : _d;
-        var popupSettings = base.getPopupSettings();
-        var vs = base.vs;
-        var skip = virtual.skip;
-        var opened = this.props.opened !== undefined ? this.props.opened : this.state.opened;
-        var translate = "translateY(".concat(vs.translate, "px)");
-        var focusedIndex = opened ? this.getFocusedIndex() : undefined;
-        var text = this.props.filter !== undefined ? this.props.filter : this.state.text;
-        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, groupMode: this.props.groupMode, isMultiColumn: this.props.isMultiColumn, 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, groupHeaderItemRender: groupHeaderItemRender, noDataRender: listNoDataRender, onMouseDown: function (e) { return e.preventDefault(); }, onScroll: this.onScroll, wrapperRef: vs.scrollerRef, scroller: this.base.renderScrollElement() }));
-    };
-    ComboBoxWithoutContext.prototype.renderSearchBar = function (text, id, placeholder) {
-        var _this = this;
-        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, readOnly: (opened && this.mobileMode), placeholder: placeholder, tabIndex: tabIndex, title: this.props.title, 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.clearValue = function () {
-        var state = this.base.initState();
-        this._suggested = '';
-        this.base.filterChanged('', state);
-        if (this.props.filter === undefined && this.state.text !== undefined) {
-            state.data.text = undefined;
-        }
-        this.triggerOnChange(null, state);
-        var opened = this.props.opened !== undefined ? this.props.opened : this.state.opened;
-        var isAdaptive = this.mobileMode;
-        if (opened && !isAdaptive) {
-            this.base.togglePopup(state);
-        }
-        this.applyState(state);
-    };
-    ComboBoxWithoutContext.prototype.triggerOnChange = function (item, state) {
-        var value = this.value;
-        if ((!isPresent(value) && !isPresent(item)) || areSame(value, item, this.props.dataItemKey)) {
-            return;
-        }
-        if (this.props.value === undefined) {
-            state.data.value = item;
-        }
-        this._valueDuringOnChange = item;
-        state.events.push({ type: 'onChange' });
-    };
-    ComboBoxWithoutContext.prototype.getFocusedIndex = function () {
-        var value = this.value;
-        var _a = this.props, _b = _a.data, data = _b === void 0 ? [] : _b, textField = _a.textField, dataItemKey = _a.dataItemKey, _c = _a.virtual, virtual = _c === void 0 ? { skip: 0 } : _c, _d = _a.focusedItemIndex, focusedItemIndex = _d === void 0 ? itemIndexStartsWith : _d, skipDisabledItems = _a.skipDisabledItems;
-        var text = this.props.filter ? this.props.filter : this.state.text;
-        if (isPresent(value) && text === undefined) {
-            return data.findIndex(function (i) { return areSame(i, value, dataItemKey); });
-        }
-        else if (text) {
-            return focusedItemIndex(data, text, textField);
-        }
-        else if (skipDisabledItems && textField && !text && virtual.skip === 0) {
-            return data.findIndex(function (i) { return !i.disabled && i[textField]; });
-        }
-        else {
-            return virtual.skip === 0 ? 0 : -1;
-        }
-    };
-    ComboBoxWithoutContext.prototype.suggestValue = function (value) {
-        var _a = this.props, data = _a.data, textField = _a.textField;
-        this._suggested = suggestValue(value, data, textField);
-    };
-    ComboBoxWithoutContext.prototype.applyState = function (state) {
-        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 */
-    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, groupMode: PropTypes.oneOf([undefined, 'classic', 'modern']), isMultiColumn: PropTypes.bool, suggest: PropTypes.bool, placeholder: PropTypes.string, title: 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, skipDisabledItems: PropTypes.bool });
-    /** @hidden */
-    ComboBoxWithoutContext.defaultProps = __assign(__assign({}, DropDownBase.defaultProps), { size: 'medium', rounded: 'medium', fillMode: 'solid', allowCustom: false, clearButton: true, required: false, groupMode: 'modern', isMultiColumn: false, skipDisabledItems: true });
-    return ComboBoxWithoutContext;
-}(React.Component));
-export { ComboBoxWithoutContext };
-/**
- * Represents the PropsContext of the `ComboBox` component.
- * Used for global configuration of all `ComboBox` instances.
- *
- * For more information, refer to the [Dropdowns Props Context]({% slug props-context_dropdowns %}) article.
- */
-export var ComboBoxPropsContext = createPropsContext();
-/* eslint-disable @typescript-eslint/no-redeclare -- intentionally naming the component the same as the type */
-/**
- * Represents the [KendoReact ComboBox component]({% slug overview_combobox %}).
- *
- * Accepts properties of type [ComboBoxProps]({% slug api_dropdowns_comboboxprops %}).
- * Obtaining the `ref` returns an object of type [ComboBoxHandle]({% slug api_dropdowns_comboboxhandle %}).
- *
- * @example
- * ```jsx
- * class App extends React.Component {
- *    combobox = null;
- *    render() {
- *       return (
- *          <div>
- *              <ComboBox
- *                  data={[ "Albania", "Andorra", "Austria", "Belarus" ]}
- *                  ref={component => this.combobox = component}
- *              />
- *              <button onClick={() => alert(this.combobox.value)}>alert value</button>
- *          </div>
- *       );
- *    }
- * }
- * ReactDOM.render(<App />, document.querySelector('my-app'));
- * ```
- */
-export var ComboBox = withPropsContext(ComboBoxPropsContext, ComboBoxWithoutContext);
-ComboBox.displayName = 'KendoReactComboBox';