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

package/dist/npm/DropDownList/DropDownList.js

@@ -1,890 +0,0 @@
-"use strict";
-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);
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.DropDownList = exports.DropDownListPropsContext = exports.DropDownListWithoutContext = void 0;
-var React = require("react");
-var PropTypes = require("prop-types");
-var kendo_react_common_1 = require("@progress/kendo-react-common");
-var kendo_react_labels_1 = require("@progress/kendo-react-labels");
-var kendo_svg_icons_1 = require("@progress/kendo-svg-icons");
-var ListContainer_1 = require("../common/ListContainer");
-var ListFilter_1 = require("../common/ListFilter");
-var GroupStickyHeader_1 = require("../common/GroupStickyHeader");
-var ListDefaultItem_1 = require("../common/ListDefaultItem");
-var List_1 = require("../common/List");
-var DropDownBase_1 = require("../common/DropDownBase");
-var utils_1 = require("../common/utils");
-var kendo_react_common_2 = require("@progress/kendo-react-common");
-var package_metadata_1 = require("../package-metadata");
-var kendo_react_buttons_1 = require("@progress/kendo-react-buttons");
-var kendo_react_intl_1 = require("@progress/kendo-react-intl");
-var messages_1 = require("../messages");
-var constants_1 = require("../common/constants");
-var kendo_react_layout_1 = require("@progress/kendo-react-layout");
-var VALIDATION_MESSAGE = 'Please select a value from the list!';
-var sizeMap = kendo_react_common_1.kendoThemeMaps.sizeMap, roundedMap = kendo_react_common_1.kendoThemeMaps.roundedMap;
-/**
- * @hidden
- */
-var DropDownListWithoutContext = /** @class */ (function (_super) {
-    __extends(DropDownListWithoutContext, _super);
-    function DropDownListWithoutContext(props) {
-        var _this = _super.call(this, props) || this;
-        /**
-         * @hidden
-         */
-        _this.state = {};
-        _this._element = null;
-        _this.base = new DropDownBase_1.default(_this);
-        _this.searchState = { word: '', last: '' };
-        _this._select = null;
-        _this._skipFocusEvent = false;
-        _this._filterInput = null;
-        _this._navigated = false;
-        _this._lastKeypressIsFilter = false;
-        _this._inputId = (0, kendo_react_common_1.guid)();
-        _this.itemHeight = 0;
-        /**
-         * @hidden
-         */
-        _this.focus = function () {
-            if (_this.base.wrapper) {
-                _this.base.wrapper.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, defaultItem = _a.defaultItem;
-            var skip = virtual ? virtual.skip : 0;
-            var item = (index === -1 && defaultItem !== undefined) ?
-                defaultItem : data[index - skip];
-            var newSelected = !(0, utils_1.areSame)(item, _this.value, dataItemKey);
-            _this.triggerOnChange(item, state);
-            if (newSelected) {
-                _this.base.triggerPageChangeCornerItems(item, state);
-            }
-        };
-        _this.componentRef = function (element) {
-            _this._element = element;
-            _this.base.wrapper = element;
-        };
-        _this.dummySelect = function (value) {
-            /* Dummy component to support forms */
-            return (React.createElement("select", { name: _this.props.name, ref: function (el) { _this._select = el; }, tabIndex: -1, "aria-hidden": true, title: _this.props.label, style: { opacity: 0, width: 1, border: 0, zIndex: -1, position: 'absolute', left: '50%' } },
-                React.createElement("option", { value: _this.props.valueMap ? _this.props.valueMap.call(undefined, value) : value })));
-        };
-        _this.renderListContainer = function () {
-            var _a;
-            var _b = _this.props, header = _b.header, footer = _b.footer, dir = _b.dir, _c = _b.data, data = _c === void 0 ? [] : _c, size = _b.size, groupField = _b.groupField, groupStickyHeaderItemRender = _b.groupStickyHeaderItemRender, list = _b.list;
-            var base = _this.base;
-            var popupSettings = base.getPopupSettings();
-            var opened = _this.props.opened !== undefined ? _this.props.opened : _this.state.opened;
-            var popupWidth = popupSettings.width !== undefined ? popupSettings.width : base.popupWidth;
-            var listContainerProps = {
-                dir: dir !== undefined ? dir : base.dirCalculated,
-                width: popupWidth,
-                popupSettings: {
-                    popupClass: (0, kendo_react_common_1.classNames)(popupSettings.popupClass, 'k-list-container', 'k-dropdownlist-popup'),
-                    className: popupSettings.className,
-                    animate: popupSettings.animate,
-                    anchor: _this.element,
-                    show: opened,
-                    onOpen: _this.onPopupOpened,
-                    onClose: _this.onPopupClosed,
-                    appendTo: popupSettings.appendTo
-                },
-                itemsCount: [data.length]
-            };
-            var group = _this.state.group;
-            if (group === undefined && groupField !== undefined) {
-                group = (0, utils_1.getItemValue)(data[0], groupField);
-            }
-            return (React.createElement(ListContainer_1.default, __assign({}, listContainerProps),
-                _this.renderListFilter(),
-                header && React.createElement("div", { className: "k-list-header" }, header),
-                React.createElement("div", { className: (0, kendo_react_common_1.classNames)('k-list', (_a = {}, _a["k-list-".concat(sizeMap[size] || size)] = size, _a['k-virtual-list'] = _this.base.vs.enabled, _a)) },
-                    _this.renderDefaultItem(),
-                    !list && group && data.length !== 0 && React.createElement(GroupStickyHeader_1.default, { group: group, groupMode: 'modern', render: groupStickyHeaderItemRender }),
-                    _this.renderList()),
-                footer && React.createElement("div", { className: "k-list-footer" }, footer)));
-        };
-        _this.renderList = function () {
-            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, groupHeaderItemRender = _a.groupHeaderItemRender, listNoDataRender = _a.listNoDataRender, itemRender = _a.itemRender;
-            var vs = _this.base.vs;
-            var skip = virtual.skip;
-            var opened = _this.props.opened !== undefined ? _this.props.opened : _this.state.opened;
-            var popupSettings = _this.base.getPopupSettings();
-            var translate = "translateY(".concat(vs.translate, "px)");
-            return (React.createElement(List_1.default, { id: _this.base.listBoxId, show: opened, data: data.slice(), focusedIndex: _this.getFocusedIndex(), value: _this.value, textField: textField, valueField: dataItemKey, optionsGuid: _this.base.guid, groupField: _this.props.groupField, groupMode: 'modern', listRef: function (list) { return vs.list = _this.base.list = list; }, wrapperStyle: { maxHeight: popupSettings.height }, wrapperCssClass: "k-list-content", listStyle: vs.enabled ? { transform: translate } : undefined, key: "listkey", skip: skip, onClick: _this.handleItemClick, itemRender: itemRender, groupHeaderItemRender: groupHeaderItemRender, noDataRender: listNoDataRender, onScroll: _this.onScroll, wrapperRef: vs.scrollerRef, scroller: _this.base.renderScrollElement() }));
-        };
-        _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;
-            }
-            if (groupField) {
-                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);
-                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
-                    });
-                }
-            }
-        };
-        _this.renderListFilter = function () {
-            var filterText = _this.props.filter !== undefined ? _this.props.filter : _this.state.text;
-            return _this.props.filterable && (React.createElement(ListFilter_1.default, { value: filterText, ref: function (filter) { return _this._filterInput = filter && filter.element; }, onChange: _this.handleListFilterChange, onKeyDown: _this.handleKeyDown, size: _this.props.size, rounded: _this.props.rounded, fillMode: _this.props.fillMode }));
-        };
-        _this.renderDefaultItem = function () {
-            var _a = _this.props, textField = _a.textField, defaultItem = _a.defaultItem, dataItemKey = _a.dataItemKey;
-            return defaultItem !== undefined && (React.createElement(ListDefaultItem_1.default, { defaultItem: defaultItem, textField: textField, selected: (0, utils_1.areSame)(_this.value, defaultItem, dataItemKey), key: "defaultitemkey", onClick: _this.handleDefaultItemClick }));
-        };
-        _this.search = function (event) {
-            clearTimeout(_this._typingTimeout);
-            if (!_this.props.filterable) {
-                _this._typingTimeout = window.setTimeout(function () { return _this.searchState.word = ''; }, _this.props.delay);
-                _this.selectNext(event);
-            }
-        };
-        _this.selectNext = function (event) {
-            var _a = _this.props, _b = _a.data, data = _b === void 0 ? [] : _b, dataItemKey = _a.dataItemKey;
-            var mappedData = data.map(function (item, idx) {
-                return { item: item, itemIndex: idx };
-            });
-            var word = _this.searchState.word;
-            var last = _this.searchState.last;
-            var isInLoop = (0, utils_1.sameCharsOnly)(word, last);
-            var dataLength = mappedData.length;
-            var startIndex = Math.max(0, data.findIndex(function (i) { return (0, utils_1.areSame)(i, _this.value, dataItemKey); }));
-            var defaultItem;
-            if (_this.props.defaultItem) {
-                defaultItem = { item: _this.props.defaultItem, itemIndex: -1 };
-                dataLength += 1;
-                startIndex += 1;
-            }
-            startIndex += isInLoop ? 1 : 0;
-            mappedData = (0, utils_1.shuffleData)(mappedData, startIndex, defaultItem);
-            var text, loopMatch, nextMatch, index = 0;
-            var _c = _this.props, textField = _c.textField, ignoreCase = _c.ignoreCase;
-            for (; index < dataLength; index++) {
-                text = (0, utils_1.getItemValue)(mappedData[index].item, textField);
-                loopMatch = isInLoop && (0, utils_1.matchText)(text, last, ignoreCase);
-                nextMatch = (0, utils_1.matchText)(text, word, ignoreCase);
-                if (loopMatch || nextMatch) {
-                    index = mappedData[index].itemIndex;
-                    break;
-                }
-            }
-            if (index !== dataLength) {
-                var state = _this.base.initState();
-                state.syntheticEvent = event;
-                _this.handleItemSelect(index, state);
-                _this.applyState(state);
-                _this._valueDuringOnChange = undefined;
-            }
-        };
-        _this.handleKeyDown = function (event) {
-            // The following added here to prevent the propagation of the keyDown event when the filter prop is set to true
-            if (event && event.target instanceof Element && event.target.nodeName === 'INPUT') {
-                event.stopPropagation && event.stopPropagation();
-            }
-            var _a = _this.props, _b = _a.data, data = _b === void 0 ? [] : _b, filterable = _a.filterable, disabled = _a.disabled, defaultItem = _a.defaultItem, _c = _a.leftRightKeysNavigation, leftRightKeysNavigation = _c === void 0 ? true : _c, _d = _a.virtual, virtual = _d === void 0 ? { skip: 0, total: 0, pageSize: 0 } : _d, dataItemKey = _a.dataItemKey, _e = _a.groupField, groupField = _e === void 0 ? '' : _e, textField = _a.textField, _f = _a.skipDisabledItems, skipDisabledItems = _f === void 0 ? true : _f;
-            var value = _this.value;
-            var selectedIndex = data.findIndex(function (i) { return (0, utils_1.areSame)(i, value, dataItemKey); });
-            var opened = _this.props.opened !== undefined ? _this.props.opened : _this.state.opened;
-            var keyCode = event.keyCode;
-            var homeOrEndKeys = keyCode === kendo_react_common_1.Keys.home || keyCode === kendo_react_common_1.Keys.end;
-            var upOrDownKeys = keyCode === kendo_react_common_1.Keys.up || keyCode === kendo_react_common_1.Keys.down;
-            var shouldOpen = !opened && ((event.altKey && keyCode === kendo_react_common_1.Keys.down) || keyCode === kendo_react_common_1.Keys.enter || keyCode === kendo_react_common_1.Keys.space);
-            var shouldClose = opened && ((event.altKey && keyCode === kendo_react_common_1.Keys.up) || keyCode === kendo_react_common_1.Keys.esc);
-            var leftOrRightKeys = leftRightKeysNavigation && (keyCode === kendo_react_common_1.Keys.left || keyCode === kendo_react_common_1.Keys.right);
-            var shouldNavigate = upOrDownKeys || (leftOrRightKeys && !filterable) || homeOrEndKeys;
-            var state = _this.base.initState();
-            state.syntheticEvent = event;
-            if (disabled) {
-                return;
-            }
-            else if (homeOrEndKeys && _this.base.vs.enabled) {
-                if (keyCode === kendo_react_common_1.Keys.home) {
-                    if (virtual.skip !== 0) {
-                        _this.base.triggerOnPageChange(state, 0, virtual.pageSize);
-                        _this._navigated = true;
-                    }
-                    else {
-                        _this.triggerOnChange(data[0], state);
-                    }
-                }
-                else {
-                    if (virtual.skip < virtual.total - virtual.pageSize) {
-                        _this.base.triggerOnPageChange(state, virtual.total - virtual.pageSize, virtual.pageSize);
-                        _this._navigated = true;
-                    }
-                    else {
-                        _this.triggerOnChange(data[data.length - 1], state);
-                    }
-                }
-            }
-            else if (opened && keyCode === kendo_react_common_1.Keys.pageUp) {
-                _this.base.scrollPopupByPageSize(-1);
-            }
-            else if (opened && keyCode === kendo_react_common_1.Keys.pageDown) {
-                _this.base.scrollPopupByPageSize(1);
-            }
-            else if (opened && keyCode === kendo_react_common_1.Keys.enter) {
-                var focusedIndex = _this.getFocusedIndex();
-                if (_this.haveFocusedItemAndDataNotEmpty(data, focusedIndex)) {
-                    _this.triggerOnChange(null, state);
-                    _this.applyState(state);
-                }
-                else {
-                    _this.handleItemSelect(focusedIndex, state);
-                }
-                _this.base.togglePopup(state);
-                event.preventDefault();
-            }
-            else if (shouldOpen || shouldClose) {
-                if (shouldClose) {
-                    _this.resetValueIfDisabledItem();
-                }
-                _this.base.togglePopup(state);
-                event.preventDefault();
-            }
-            else if (shouldNavigate) {
-                _this._lastKeypressIsFilter = false;
-                if (groupField !== '' && textField) {
-                    if (!skipDisabledItems && opened) {
-                        _this.onNavigate(state, keyCode);
-                    }
-                    else {
-                        var newIndex = undefined;
-                        if (keyCode === kendo_react_common_1.Keys.down || keyCode === kendo_react_common_1.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 === kendo_react_common_1.Keys.up || keyCode === kendo_react_common_1.Keys.left) {
-                            var dataToSearch = void 0;
-                            if (selectedIndex === 0 && defaultItem) {
-                                newIndex = -1;
-                            }
-                            else if (selectedIndex === -1) {
-                                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 (!skipDisabledItems && opened || homeOrEndKeys) {
-                    _this.onNavigate(state, keyCode);
-                }
-                else if (textField) {
-                    var newIndex = undefined;
-                    if (keyCode === kendo_react_common_1.Keys.down || keyCode === kendo_react_common_1.Keys.right) {
-                        var tempnewIndex_3 = data.slice(selectedIndex + 1).find(function (i) { return !i.disabled && i[textField]; });
-                        newIndex = tempnewIndex_3 && data.findIndex(function (el) { return el[textField] === tempnewIndex_3[textField]; });
-                    }
-                    else if (keyCode === kendo_react_common_1.Keys.up || keyCode === kendo_react_common_1.Keys.left) {
-                        var dataTest = void 0;
-                        if (selectedIndex === 0 && defaultItem) {
-                            newIndex = -1;
-                        }
-                        else if (selectedIndex === -1) {
-                            dataTest = data;
-                            newIndex = data.find(function (i) { return !i.disabled && i[textField]; });
-                        }
-                        else {
-                            dataTest = data.slice(0, selectedIndex);
-                            var tempnewIndex_4 = dataTest.pop();
-                            while (tempnewIndex_4 && tempnewIndex_4.disabled) {
-                                tempnewIndex_4 = dataTest.pop();
-                            }
-                            newIndex = tempnewIndex_4 && data.findIndex(function (el) { return el[textField] === tempnewIndex_4[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 {
-                    _this.onNavigate(state, keyCode);
-                }
-                event.preventDefault();
-            }
-            _this.applyState(state);
-        };
-        _this.handleItemClick = function (index, event) {
-            _this.base.handleItemClick(index, event);
-            _this._valueDuringOnChange = undefined;
-        };
-        _this.handleFocus = function (event) {
-            if (_this._skipFocusEvent) {
-                return;
-            }
-            _this.base.handleFocus(event);
-        };
-        _this.handleBlur = function (event) {
-            if (_this._skipFocusEvent || !_this.state.focused) {
-                return;
-            }
-            var opened = _this.props.opened !== undefined ? _this.props.opened : _this.state.opened;
-            var adaptive = _this.props.adaptive;
-            var _a = _this.state.windowWidth, windowWidth = _a === void 0 ? 0 : _a;
-            var renderAdaptive = windowWidth <= constants_1.MOBILE_MEDIUM_DEVISE && adaptive;
-            var state = _this.base.initState();
-            state.syntheticEvent = event;
-            state.data.focused = false;
-            state.events.push({ type: 'onBlur' });
-            if (opened) {
-                _this.resetValueIfDisabledItem();
-            }
-            if (opened && !renderAdaptive) {
-                _this.base.togglePopup(state);
-            }
-            _this.applyState(state);
-        };
-        _this.handleDefaultItemClick = function (event) {
-            var state = _this.base.initState();
-            state.syntheticEvent = event;
-            _this.base.togglePopup(state);
-            _this.triggerOnChange(_this.props.defaultItem, state);
-            _this.applyState(state);
-        };
-        _this.handleWrapperClick = function (event) {
-            if (event.isPropagationStopped()) {
-                return;
-            }
-            var state = _this.base.initState();
-            state.syntheticEvent = event;
-            if (!_this.state.focused) {
-                state.data.focused = true;
-            }
-            _this.resetValueIfDisabledItem();
-            _this.base.togglePopup(state);
-            _this.applyState(state);
-        };
-        _this.handleKeyPress = function (event) {
-            if (_this.props.filterable || event.which === 0 || event.keyCode === kendo_react_common_1.Keys.enter) {
-                return;
-            }
-            var character = String.fromCharCode(event.charCode || event.keyCode);
-            if (_this.props.ignoreCase) {
-                character = character.toLowerCase();
-            }
-            if (character === ' ') {
-                event.preventDefault();
-            }
-            _this.searchState = {
-                word: _this.searchState.word + character,
-                last: _this.searchState.last + character
-            };
-            _this.search(event);
-        };
-        _this.handleListFilterChange = function (event) {
-            var state = _this.base.initState();
-            state.syntheticEvent = event.syntheticEvent;
-            if (_this.props.filter === undefined) {
-                state.data.text = event.target.value;
-            }
-            _this.base.filterChanged(event.target.value, state);
-            _this._lastKeypressIsFilter = true;
-            _this.applyState(state);
-            _this.setState({ group: undefined });
-        };
-        _this.onPopupOpened = function () {
-            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) {
-                window.setTimeout(function () {
-                    if (_this.state.focused && _this.base.wrapper) {
-                        _this.focusElement(_this.base.wrapper);
-                    }
-                });
-            }
-        };
-        _this.setValidity = function () {
-            if (_this._select && _this._select.setCustomValidity) {
-                _this._select.setCustomValidity(_this.validity.valid
-                    ? ''
-                    : _this.props.validationMessage || VALIDATION_MESSAGE);
-            }
-        };
-        (0, kendo_react_common_2.validatePackage)(package_metadata_1.packageMetadata);
-        return _this;
-    }
-    Object.defineProperty(DropDownListWithoutContext.prototype, "document", {
-        get: function () {
-            if (!kendo_react_common_2.canUseDOM) {
-                return;
-            }
-            // useful only for user actions
-            return (this.element && this.element.ownerDocument) || document;
-        },
-        enumerable: false,
-        configurable: true
-    });
-    Object.defineProperty(DropDownListWithoutContext.prototype, "element", {
-        /**
-         * @hidden
-         */
-        get: function () {
-            return this._element;
-        },
-        enumerable: false,
-        configurable: true
-    });
-    Object.defineProperty(DropDownListWithoutContext.prototype, "value", {
-        /**
-         * The value of the DropDownList.
-         */
-        get: function () {
-            var value;
-            if (this._valueDuringOnChange !== undefined) {
-                value = this._valueDuringOnChange;
-            }
-            else if (this.props.value !== undefined) {
-                value = this.props.value;
-            }
-            else if (this.state.value !== undefined) {
-                value = this.state.value;
-            }
-            else if (this.props.defaultValue !== undefined) {
-                value = this.props.defaultValue;
-            }
-            if (!(0, utils_1.isPresent)(value) && this.props.defaultItem !== undefined) {
-                value = this.props.defaultItem;
-            }
-            return value;
-        },
-        enumerable: false,
-        configurable: true
-    });
-    Object.defineProperty(DropDownListWithoutContext.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 (0, utils_1.areSame)(i, value, dataItemKey); });
-        },
-        enumerable: false,
-        configurable: true
-    });
-    Object.defineProperty(DropDownListWithoutContext.prototype, "name", {
-        /**
-         * Gets the `name` property of the DropDownList.
-         */
-        get: function () {
-            return this.props.name;
-        },
-        enumerable: false,
-        configurable: true
-    });
-    Object.defineProperty(DropDownListWithoutContext.prototype, "validity", {
-        /**
-         * Represents the validity state into which the DropDownList is set.
-         */
-        get: function () {
-            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(DropDownListWithoutContext.prototype, "validityStyles", {
-        get: function () {
-            return this.props.validityStyles !== undefined
-                ? this.props.validityStyles
-                : DropDownListWithoutContext.defaultProps.validityStyles;
-        },
-        enumerable: false,
-        configurable: true
-    });
-    Object.defineProperty(DropDownListWithoutContext.prototype, "required", {
-        /**
-         * @hidden
-         */
-        get: function () {
-            return this.props.required !== undefined
-                ? this.props.required
-                : DropDownListWithoutContext.defaultProps.required;
-        },
-        enumerable: false,
-        configurable: true
-    });
-    /**
-     * @hidden
-     */
-    DropDownListWithoutContext.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, textField = _b.textField;
-        var _d = this.props.data, data = _d === void 0 ? [] : _d;
-        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 closing = prevOpened && !opened;
-        if (!this.base.getPopupSettings().animate) {
-            if (opening) {
-                this.onPopupOpened();
-            }
-            else if (closing) {
-                // this.onPopupClosed();
-            }
-        }
-        if (virtual && virtual.total !== prevTotal) {
-            this.base.vs.calcScrollElementHeight();
-            this.base.vs.reset();
-        }
-        else {
-            var selectedItem_1 = this.value;
-            var prevSelectedItem = prevProps.value !== undefined ? prevProps.value : prevState.value;
-            var selectedItemIndex = data.findIndex(function (i) { return (0, utils_1.areSame)(i, selectedItem_1, dataItemKey); });
-            if (groupField !== '' && selectedItem_1 && textField) {
-                selectedItemIndex = (_a = this.base.getGroupedDataModernMode(data, groupField)) === null || _a === void 0 ? void 0 : _a.map(function (el) { return el[textField]; }).indexOf(selectedItem_1[textField]);
-            }
-            var selectedItemChanged = !(0, utils_1.areSame)(prevSelectedItem, selectedItem_1, 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_1 && selectedItemChanged && !this._navigated) {
-                this.base.scrollToItem(selectedItemIndex);
-            }
-            else if (opened && prevOpened && this._navigated) {
-                if (this._navigated && virtual && virtual.skip === 0) {
-                    this.base.vs.reset();
-                }
-                else if (this._navigated && virtual && virtual.skip === virtual.total - virtual.pageSize) {
-                    this.base.vs.scrollToEnd();
-                }
-            }
-        }
-        this._navigated = false;
-        this.setValidity();
-    };
-    /**
-     * @hidden
-     */
-    DropDownListWithoutContext.prototype.componentDidMount = function () {
-        var _a;
-        this.observerResize = kendo_react_common_2.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
-     */
-    DropDownListWithoutContext.prototype.render = function () {
-        var _a;
-        var _this = this;
-        var btnAriaLabel = (0, kendo_react_intl_1.provideLocalizationService)(this).toLanguageString(messages_1.dropDownListArrowBtnAriaLabel, messages_1.messages[messages_1.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, 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 = (0, utils_1.getItemValue)(value, this.props.textField);
-        var isValid = !this.validityStyles || this.validity.valid;
-        var base = this.base;
-        var vs = base.vs;
-        var renderAdaptive = windowWidth <= constants_1.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 _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 (0, utils_1.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(React.Fragment, null,
-            React.createElement("span", { ref: this.componentRef, className: (0, kendo_react_common_1.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: (0, kendo_react_common_1.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(kendo_react_common_1.IconWrap, { className: "k-input-loading-icon", name: 'loading' }),
-                React.createElement(kendo_react_buttons_1.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 ? kendo_svg_icons_1.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(kendo_react_labels_1.FloatingLabel, { label: label, editorValue: text, editorValid: isValid, editorDisabled: this.props.disabled, style: { width: style ? style.width : undefined }, children: dropdownlist })) : dropdownlist;
-    };
-    /**
-     * @hidden
-     */
-    DropDownListWithoutContext.prototype.onNavigate = function (state, keyCode, skipItems) {
-        var _a = this.props, _b = _a.data, data = _b === void 0 ? [] : _b, defaultItem = _a.defaultItem, dataItemKey = _a.dataItemKey, _c = _a.virtual, virtual = _c === void 0 ? { skip: 0, total: 0, pageSize: 0 } : _c;
-        var vs = this.base.vs;
-        var value = this.value;
-        var index = data.findIndex(function (i) { return (0, utils_1.areSame)(i, value, dataItemKey); });
-        var newIndex = this.base.navigation.navigate({
-            current: virtual.skip + index,
-            max: (vs.enabled ? virtual.total : data.length) - 1,
-            min: defaultItem !== undefined ? -1 : 0,
-            keyCode: keyCode,
-            skipItems: skipItems ? skipItems : undefined
-        });
-        if (newIndex !== undefined) {
-            this.handleItemSelect(newIndex, state);
-        }
-        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, groupField = _c.groupField, groupStickyHeaderItemRender = _c.groupStickyHeaderItemRender, list = _c.list, _d = _c.data, data = _d === void 0 ? [] : _d;
-        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 <= 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'
-        };
-        var group = this.state.group;
-        if (group === undefined && groupField !== undefined) {
-            group = (0, utils_1.getItemValue)(data[0], groupField);
-        }
-        return (React.createElement(React.Fragment, null,
-            React.createElement(kendo_react_layout_1.ActionSheet, __assign({}, actionSheetProps),
-                React.createElement(kendo_react_layout_1.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(kendo_react_buttons_1.Button, { tabIndex: 0, "aria-label": "Cancel", "aria-disabled": "false", type: "button", fillMode: "flat", onClick: this.handleWrapperClick, icon: 'x', svgIcon: kendo_svg_icons_1.xIcon }))),
-                    React.createElement("div", { className: "k-actionsheet-titlebar-group k-actionsheet-filter" }, this.renderListFilter())),
-                React.createElement(kendo_react_layout_1.ActionSheetContent, { className: '!k-overflow-hidden' },
-                    header && React.createElement("div", { className: "k-list-header" }, header),
-                    React.createElement("div", { className: (0, kendo_react_common_1.classNames)('k-list', (_a = {}, _a["k-list-".concat(sizeMap[size] || size)] = size, _a['k-virtual-list'] = this.base.vs.enabled, _a)) },
-                        this.renderDefaultItem(),
-                        !list && group && data.length !== 0 && React.createElement(GroupStickyHeader_1.default, { group: group, groupMode: 'modern', render: groupStickyHeaderItemRender }),
-                        this.renderList()),
-                    footer && React.createElement("div", { className: "k-list-footer" }, footer)))));
-    };
-    DropDownListWithoutContext.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 ? utils_1.itemIndexStartsWith : _d, filterable = _a.filterable, _e = _a.skipDisabledItems, skipDisabledItems = _e === void 0 ? true : _e;
-        var text = this.props.filter ? this.props.filter : this.state.text;
-        if (skipDisabledItems && textField && !text && !value) {
-            return data.findIndex(function (i) { return !i.disabled && i[textField]; });
-        }
-        else if ((0, utils_1.isPresent)(value) && text === undefined || filterable && text === '') {
-            return data.findIndex(function (i) { return (0, utils_1.areSame)(i, value, dataItemKey); });
-        }
-        else if (text) {
-            if (this._lastKeypressIsFilter) {
-                return focusedItemIndex(data, text, textField);
-            }
-            return data.findIndex(function (i) { return (0, utils_1.areSame)(i, value, dataItemKey); });
-        }
-        else {
-            return virtual.skip === 0 ? 0 : -1;
-        }
-    };
-    DropDownListWithoutContext.prototype.focusElement = function (element) {
-        var _this = this;
-        this._skipFocusEvent = true;
-        element.focus();
-        window.setTimeout(function () { return _this._skipFocusEvent = false; }, 30);
-    };
-    DropDownListWithoutContext.prototype.triggerOnChange = function (item, state) {
-        if ((0, utils_1.areSame)(this.value, item, this.props.dataItemKey)) {
-            return;
-        }
-        if (this.props.value === undefined) {
-            state.data.value = item;
-        }
-        this._valueDuringOnChange = item;
-        state.events.push({ type: 'onChange' });
-    };
-    DropDownListWithoutContext.prototype.applyState = function (state) {
-        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.prototype.resetValueIfDisabledItem = function () {
-        var _a = this.props.data, data = _a === void 0 ? [] : _a;
-        var state = this.base.initState();
-        var focusedIndex = this.getFocusedIndex();
-        if (this.haveFocusedItemAndDataNotEmpty(data, focusedIndex)) {
-            this.triggerOnChange(null, state);
-            this.applyState(state);
-        }
-    };
-    DropDownListWithoutContext.prototype.haveFocusedItemAndDataNotEmpty = function (data, focusedIndex) {
-        return focusedIndex !== undefined && focusedIndex !== -1 && data && data.length > 0 && data[focusedIndex].disabled;
-    };
-    DropDownListWithoutContext.displayName = 'DropDownList';
-    /**
-     * @hidden
-     */
-    DropDownListWithoutContext.propTypes = __assign({ delay: PropTypes.number, ignoreCase: PropTypes.bool, iconClassName: PropTypes.string, svgIcon: kendo_react_common_1.svgIconPropType, defaultItem: PropTypes.any, valueRender: PropTypes.func, valueMap: PropTypes.func, validationMessage: PropTypes.string, required: PropTypes.bool, id: PropTypes.string, ariaLabelledBy: PropTypes.string, ariaDescribedBy: PropTypes.string, ariaLabel: PropTypes.string, leftRightKeysNavigation: PropTypes.bool, title: PropTypes.string, groupField: PropTypes.string, list: PropTypes.any, skipDisabledItems: PropTypes.bool }, DropDownBase_1.default.propTypes);
-    /**
-     * @hidden
-     */
-    DropDownListWithoutContext.defaultProps = __assign(__assign({ delay: 500, tabIndex: 0, ignoreCase: true }, DropDownBase_1.default.defaultProps), { required: false, size: 'medium', rounded: 'medium', fillMode: 'solid', groupMode: 'modern' });
-    return DropDownListWithoutContext;
-}(React.Component));
-exports.DropDownListWithoutContext = DropDownListWithoutContext;
-/**
- * Represents the PropsContext of the `DropDownList` component.
- * Used for global configuration of all `DropDownList` instances.
- *
- * For more information, refer to the [Dropdowns Props Context]({% slug props-context_dropdowns %}) article.
- */
-exports.DropDownListPropsContext = (0, kendo_react_common_1.createPropsContext)();
-/* eslint-disable @typescript-eslint/no-redeclare -- intentionally naming the component the same as the type */
-/**
- * Represents the [KendoReact DropDownList component]({% slug overview_dropdownlist %}).
- *
- * Accepts properties of type [DropDownListProps]({% slug api_dropdowns_dropdownlistprops %}).
- * Obtaining the `ref` returns an object of type [DropDownListHandle]({% slug api_dropdowns_dropdownlisthandle %}).
- *
- * @example
- * ```jsx
- * class App extends React.Component {
- *    dropdownlist = null;
- *    render() {
- *       return (
- *          <div>
- *              <DropDownList
- *                  data={[ "Albania", "Andorra", "Austria", "Belarus" ]}
- *                  ref={component => this.dropdownlist = component}
- *              />
- *              <button onClick={() => alert(this.dropdownlist.value)}>alert value</button>
- *          </div>
- *       );
- *    }
- * }
- * ReactDOM.render(<App />, document.querySelector('my-app'));
- * ```
- */
-exports.DropDownList = (0, kendo_react_common_1.withPropsContext)(exports.DropDownListPropsContext, DropDownListWithoutContext);
-exports.DropDownList.displayName = 'KendoReactDropDownList';