@progress/kendo-react-dropdowns 5.4.0-dev.202205271059 → 5.4.0-dev.202206090823

package/dist/npm/ComboBox/ComboBox.js

@@ -51,8 +51,10 @@ var ComboBoxWithoutContext = /** @class */ (function (_super) {
          */
         _this.state = {};
         _this.base = new DropDownBase_1.default(_this);
-        _this._inputId = kendo_react_common_1.guid();
+        _this._element = null;
+        _this._inputId = (0, kendo_react_common_1.guid)();
         _this._suggested = '';
+        _this._input = null;
         _this.itemHeight = 0;
         /**
          * @hidden
@@ -69,7 +71,7 @@ var ComboBoxWithoutContext = /** @class */ (function (_super) {
             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 = !utils_1.areSame(item, _this.value, dataItemKey);
+            var newSelected = !(0, utils_1.areSame)(item, _this.value, dataItemKey);
             _this.triggerOnChange(item, state);
             if (_this.state.text !== undefined) {
                 state.data.text = undefined;
@@ -171,8 +173,8 @@ var ComboBoxWithoutContext = /** @class */ (function (_super) {
             if (_this.props.suggest) {
                 var selectionAtEnd = input.selectionEnd === value.length;
                 var prevText = _this.props.filter !== undefined ? _this.props.filter : _this.state.text;
-                if (!utils_1.isPresent(prevText)) {
-                    prevText = utils_1.getItemValue(_this.value, _this.props.textField) || '';
+                if (!(0, utils_1.isPresent)(prevText)) {
+                    prevText = (0, utils_1.getItemValue)(_this.value, _this.props.textField) || '';
                 }
                 var deletedSuggestion = prevText && prevText === value;
                 var deleting = prevText && prevText.length > value.length;
@@ -218,7 +220,7 @@ var ComboBoxWithoutContext = /** @class */ (function (_super) {
                     : _this.props.validationMessage || VALIDATION_MESSAGE);
             }
         };
-        kendo_react_common_2.validatePackage(package_metadata_1.packageMetadata);
+        (0, kendo_react_common_2.validatePackage)(package_metadata_1.packageMetadata);
         return _this;
     }
     Object.defineProperty(ComboBoxWithoutContext.prototype, "element", {
@@ -261,7 +263,7 @@ var ComboBoxWithoutContext = /** @class */ (function (_super) {
             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 utils_1.areSame(i, value, dataItemKey); });
+            return data.findIndex(function (i) { return (0, utils_1.areSame)(i, value, dataItemKey); });
         },
         enumerable: false,
         configurable: true
@@ -334,8 +336,8 @@ var ComboBoxWithoutContext = /** @class */ (function (_super) {
         }
         else {
             var prevSelectedItem = prevProps.value !== undefined ? prevProps.value : prevState.value;
-            var selectedItemIndex = data.findIndex(function (i) { return utils_1.areSame(i, selectedItem, dataItemKey); });
-            var selectedItemChanged = !utils_1.areSame(prevSelectedItem, selectedItem, dataItemKey);
+            var selectedItemIndex = data.findIndex(function (i) { return (0, utils_1.areSame)(i, selectedItem, dataItemKey); });
+            var selectedItemChanged = !(0, utils_1.areSame)(prevSelectedItem, selectedItem, dataItemKey);
             if (opening && virtual) {
                 this.base.scrollToVirtualItem(virtual, selectedItemIndex);
             }
@@ -366,9 +368,9 @@ var ComboBoxWithoutContext = /** @class */ (function (_super) {
         var _c = this.props, dir = _c.dir, disabled = _c.disabled, _d = _c.clearButton, clearButton = _d === void 0 ? ComboBoxWithoutContext.defaultProps.clearButton : _d, label = _c.label, textField = _c.textField, className = _c.className, style = _c.style, loading = _c.loading, iconClassName = _c.iconClassName, virtual = _c.virtual, size = _c.size, rounded = _c.rounded, fillMode = _c.fillMode;
         var isValid = !this.validityStyles || this.validity.valid;
         var text = this.props.filter !== undefined ? this.props.filter : this.state.text;
-        var selectedItemText = utils_1.getItemValue(this.value, textField);
-        var inputText = utils_1.isPresent(text) ? text : selectedItemText;
-        var renderClearButton = clearButton && (!!(inputText) || utils_1.isPresent(this.value));
+        var selectedItemText = (0, utils_1.getItemValue)(this.value, textField);
+        var inputText = (0, utils_1.isPresent)(text) ? text : selectedItemText;
+        var renderClearButton = clearButton && (!!(inputText) || (0, utils_1.isPresent)(this.value));
         var base = this.base;
         var vs = base.vs;
         var id = this.props.id || this._inputId;
@@ -378,10 +380,10 @@ var ComboBoxWithoutContext = /** @class */ (function (_super) {
             vs.total = virtual.total;
             vs.pageSize = virtual.pageSize;
         }
-        var combobox = (React.createElement("span", { className: kendo_react_common_1.classNames('k-combobox k-input', (_a = {},
-                _a["k-input-" + (sizeMap[size] || size)] = size,
-                _a["k-rounded-" + (roundedMap[rounded] || rounded)] = rounded,
-                _a["k-input-" + fillMode] = fillMode,
+        var combobox = (React.createElement("span", { className: (0, kendo_react_common_1.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,
@@ -390,12 +392,12 @@ var ComboBoxWithoutContext = /** @class */ (function (_super) {
             this.renderSearchBar(inputText || '', id),
             renderClearButton && !loading && React.createElement(ClearButton_1.default, { onClick: this.clearButtonClick, key: "clearbutton" }),
             loading && React.createElement("span", { className: "k-icon k-i-loading k-input-loading-icon", key: "loading" }),
-            React.createElement("button", { tabIndex: -1, type: "button", className: kendo_react_common_1.classNames('k-input-button k-button k-icon-button', (_b = {},
-                    _b["k-button-" + (sizeMap[size] || size)] = size,
-                    _b["k-button-" + fillMode] = fillMode,
-                    _b["k-button-" + fillMode + "-base"] = fillMode,
+            React.createElement("button", { tabIndex: -1, type: "button", className: (0, kendo_react_common_1.classNames)('k-input-button k-button k-icon-button', (_b = {},
+                    _b["k-button-".concat(sizeMap[size] || size)] = size,
+                    _b["k-button-".concat(fillMode)] = fillMode,
+                    _b["k-button-".concat(fillMode, "-base")] = fillMode,
                     _b)), onClick: this.toggleBtnClick, onMouseDown: function (e) { return e.preventDefault(); } },
-                React.createElement("span", { className: kendo_react_common_1.classNames('k-button-icon k-icon k-i-arrow-s', iconClassName) })),
+                React.createElement("span", { className: (0, kendo_react_common_1.classNames)('k-button-icon k-icon k-i-arrow-s', iconClassName) })),
             this.renderListContainer()));
         return label
             ? (React.createElement(kendo_react_labels_1.FloatingLabel, { label: label, editorId: id, editorValue: inputText, editorValid: isValid, editorDisabled: disabled, style: { width: style ? style.width : undefined }, children: combobox }))
@@ -411,7 +413,7 @@ var ComboBoxWithoutContext = /** @class */ (function (_super) {
         var vs = this.base.vs;
         var value = this.value;
         this._suggested = '';
-        if (focusedIndex !== -1 && !utils_1.isPresent(value)) {
+        if (focusedIndex !== -1 && !(0, utils_1.isPresent)(value)) {
             this.handleItemSelect(focusedIndex, state);
         }
         else if (text === '') {
@@ -434,9 +436,9 @@ var ComboBoxWithoutContext = /** @class */ (function (_super) {
         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 = utils_1.getItemValue(this.value, textField);
+        var currentValueText = (0, utils_1.getItemValue)(this.value, textField);
         var valueIndex = currentValueText === value ?
-            this.index : utils_1.getItemIndexByText(data, value, textField);
+            this.index : (0, utils_1.getItemIndexByText)(data, value, textField);
         var itemSelected = valueIndex !== -1;
         var newSelected = undefined;
         this._suggested = '';
@@ -464,15 +466,15 @@ var ComboBoxWithoutContext = /** @class */ (function (_super) {
         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 = utils_1.getItemValue(this.value, textField);
+        var valueItemText = (0, utils_1.getItemValue)(this.value, textField);
         this._suggested = '';
-        if (text === valueItemText || (text === '' && !utils_1.isPresent(valueItemText))) {
+        if (text === valueItemText || (text === '' && !(0, utils_1.isPresent)(valueItemText))) {
             if (opened) {
                 this.base.togglePopup(state);
             }
             return this.applyState(state);
         }
-        var valueIndex = utils_1.getItemIndexByText(data, text, textField, true);
+        var valueIndex = (0, utils_1.getItemIndexByText)(data, text, textField, true);
         var itemSelected = valueIndex !== -1;
         var newSelected = null;
         if (itemSelected) {
@@ -520,22 +522,22 @@ var ComboBoxWithoutContext = /** @class */ (function (_super) {
         var popupWidth = popupSettings.width !== undefined ? popupSettings.width : base.popupWidth;
         var group = this.state.group;
         if (group === undefined && groupField !== undefined) {
-            group = utils_1.getItemValue(data[0], groupField);
+            group = (0, utils_1.getItemValue)(data[0], groupField);
         }
         return (React.createElement(ListContainer_1.default, { width: popupWidth, popupSettings: {
                 animate: popupSettings.animate,
                 anchor: this.element,
                 show: opened,
-                popupClass: kendo_react_common_1.classNames(popupSettings.popupClass, 'k-reset'),
+                popupClass: (0, kendo_react_common_1.classNames)(popupSettings.popupClass, 'k-reset'),
                 className: popupSettings.className,
                 appendTo: popupSettings.appendTo
             }, dir: dir !== undefined ? dir : this.base.dirCalculated, itemsCount: [data.length] },
-            React.createElement("div", { className: kendo_react_common_1.classNames((_a = {},
+            React.createElement("div", { className: (0, kendo_react_common_1.classNames)((_a = {},
                     _a['k-list'] = !list,
-                    _a["k-list-" + (sizeMap[size] || size)] = !list && size,
+                    _a["k-list-".concat(sizeMap[size] || size)] = !list && size,
                     _a['k-virtual-list'] = virtual,
                     _a['k-data-table'] = list,
-                    _a["k-table-" + (sizeMap[size] || size)] = list && size,
+                    _a["k-table-".concat(sizeMap[size] || size)] = list && size,
                     _a)) },
                 header && React.createElement("div", { className: "k-table-header" }, header),
                 !list && group && React.createElement("div", { className: "k-list-group-sticky-header" }, group),
@@ -551,13 +553,13 @@ var ComboBoxWithoutContext = /** @class */ (function (_super) {
         var vs = base.vs;
         var skip = virtual.skip;
         var opened = this.props.opened !== undefined ? this.props.opened : this.state.opened;
-        var translate = "translateY(" + vs.translate + "px)";
+        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 = utils_1.getItemValue(this.value, textField);
-        var value = utils_1.isPresent(text) && text !== selectedItemText ? null : this.value;
+        var selectedItemText = (0, utils_1.getItemValue)(this.value, textField);
+        var value = (0, utils_1.isPresent)(text) && text !== selectedItemText ? null : this.value;
         var ListComponent = this.props.list || List_1.default;
-        return (React.createElement(ListComponent, { id: base.listBoxId, virtual: Boolean(virtual), show: opened, data: data, focusedIndex: focusedIndex, value: value, textField: textField, valueField: dataItemKey, groupField: this.props.groupField, optionsGuid: base.guid, listRef: function (list) { vs.list = _this.base.list = list; _this.itemHeight = 0; }, wrapperStyle: { maxHeight: popupSettings.height }, wrapperCssClass: kendo_react_common_1.classNames('k-list-content', (_a = {},
+        return (React.createElement(ListComponent, { id: base.listBoxId, virtual: Boolean(virtual), show: opened, data: data, focusedIndex: focusedIndex, value: value, textField: textField, valueField: dataItemKey, groupField: this.props.groupField, optionsGuid: base.guid, listRef: function (list) { vs.list = _this.base.list = list; _this.itemHeight = 0; }, wrapperStyle: { maxHeight: popupSettings.height }, wrapperCssClass: (0, kendo_react_common_1.classNames)('k-list-content', (_a = {},
                 _a['k-list-scroller'] = !virtual,
                 _a['k-virtual-content'] = virtual,
                 _a)), listStyle: vs.enabled ? { transform: translate } : undefined, key: "listkey", skip: skip, onClick: this.handleItemClick, itemRender: itemRender, noDataRender: listNoDataRender, onMouseDown: function (e) { return e.preventDefault(); }, onScroll: this.onScroll, wrapperRef: vs.scrollerRef, scroller: this.base.renderScrollElement() }));
@@ -567,15 +569,15 @@ var ComboBoxWithoutContext = /** @class */ (function (_super) {
         var _a = this.props, placeholder = _a.placeholder, tabIndex = _a.tabIndex, disabled = _a.disabled, _b = _a.data, data = _b === void 0 ? [] : _b, dataItemKey = _a.dataItemKey, _c = _a.virtual, virtual = _c === void 0 ? { skip: 0 } : _c;
         var 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 utils_1.areSame(i, value, dataItemKey); }));
-        if (this._suggested && !utils_1.areSame(this._valueOnDidUpdate, value, dataItemKey)) {
+        var selectedIndex = Math.max(0, data.findIndex(function (i) { return (0, utils_1.areSame)(i, value, dataItemKey); }));
+        if (this._suggested && !(0, utils_1.areSame)(this._valueOnDidUpdate, value, dataItemKey)) {
             this._suggested = '';
         }
-        return (React.createElement(SearchBar_1.default, { id: id, placeholder: placeholder, tabIndex: tabIndex || undefined, accessKey: this.props.accessKey, value: text + this._suggested, suggestedText: this._suggested, ref: function (el) { return _this._input = el && el.input; }, onKeyDown: this.onInputKeyDown, onChange: this.inputOnChange, onFocus: this.base.handleFocus, onBlur: this.handleBlur, disabled: disabled, expanded: opened, owns: this.base.listBoxId, activedescendant: "option-" + this.base.guid + "-" + (selectedIndex + virtual.skip), role: "combobox", ariaLabelledBy: this.props.ariaLabelledBy, ariaDescribedBy: this.props.ariaDescribedBy, render: this.props.valueRender }));
+        return (React.createElement(SearchBar_1.default, { id: id, placeholder: placeholder, tabIndex: tabIndex || undefined, accessKey: this.props.accessKey, value: text + this._suggested, suggestedText: this._suggested, ref: function (el) { return _this._input = el && el.input; }, onKeyDown: this.onInputKeyDown, onChange: this.inputOnChange, onFocus: this.base.handleFocus, onBlur: this.handleBlur, disabled: disabled, expanded: opened, owns: this.base.listBoxId, activedescendant: "option-".concat(this.base.guid, "-").concat(selectedIndex + virtual.skip), role: "combobox", ariaLabelledBy: this.props.ariaLabelledBy, ariaDescribedBy: this.props.ariaDescribedBy, render: this.props.valueRender }));
     };
     ComboBoxWithoutContext.prototype.triggerOnChange = function (item, state) {
         var value = this.value;
-        if ((!utils_1.isPresent(value) && !utils_1.isPresent(item)) || utils_1.areSame(value, item, this.props.dataItemKey)) {
+        if ((!(0, utils_1.isPresent)(value) && !(0, utils_1.isPresent)(item)) || (0, utils_1.areSame)(value, item, this.props.dataItemKey)) {
             return;
         }
         if (this.props.value === undefined) {
@@ -588,8 +590,8 @@ var ComboBoxWithoutContext = /** @class */ (function (_super) {
         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;
         var text = this.props.filter ? this.props.filter : this.state.text;
-        if (utils_1.isPresent(value) && text === undefined) {
-            return data.findIndex(function (i) { return utils_1.areSame(i, value, dataItemKey); });
+        if ((0, utils_1.isPresent)(value) && text === undefined) {
+            return data.findIndex(function (i) { return (0, utils_1.areSame)(i, value, dataItemKey); });
         }
         else if (text) {
             return focusedItemIndex(data, text, textField);
@@ -600,7 +602,7 @@ var ComboBoxWithoutContext = /** @class */ (function (_super) {
     };
     ComboBoxWithoutContext.prototype.suggestValue = function (value) {
         var _a = this.props, data = _a.data, textField = _a.textField;
-        this._suggested = utils_1.suggestValue(value, data, textField);
+        this._suggested = (0, utils_1.suggestValue)(value, data, textField);
     };
     ComboBoxWithoutContext.prototype.applyState = function (state) {
         this.base.applyState(state);
@@ -624,7 +626,7 @@ exports.ComboBoxWithoutContext = ComboBoxWithoutContext;
  *
  * For more information, refer to the [Dropdowns Props Context]({% slug props-context_dropdowns %}) article.
  */
-exports.ComboBoxPropsContext = kendo_react_common_1.createPropsContext();
+exports.ComboBoxPropsContext = (0, kendo_react_common_1.createPropsContext)();
 /* eslint-disable @typescript-eslint/no-redeclare -- intentionally naming the component the same as the type */
 /**
  * Represents the [KendoReact ComboBox component]({% slug overview_combobox %}).
@@ -651,5 +653,5 @@ exports.ComboBoxPropsContext = kendo_react_common_1.createPropsContext();
  * ReactDOM.render(<App />, document.querySelector('my-app'));
  * ```
  */
-exports.ComboBox = kendo_react_common_1.withPropsContext(exports.ComboBoxPropsContext, ComboBoxWithoutContext);
+exports.ComboBox = (0, kendo_react_common_1.withPropsContext)(exports.ComboBoxPropsContext, ComboBoxWithoutContext);
 exports.ComboBox.displayName = 'KendoReactComboBox';

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

@@ -19,9 +19,6 @@ export declare class DropDownListWithoutContext extends React.Component<DropDown
      */
     static propTypes: {
         value: PropTypes.Requireable<any>;
-        /**
-         * @hidden
-         */
         defaultValue: PropTypes.Requireable<any>;
         filterable: PropTypes.Requireable<boolean>;
         filter: PropTypes.Requireable<string>;
@@ -83,9 +80,9 @@ export declare class DropDownListWithoutContext extends React.Component<DropDown
      */
     static defaultProps: {
         required: boolean;
-        size: "small" | "medium" | "large";
-        rounded: "small" | "medium" | "full" | "large";
-        fillMode: "flat" | "solid" | "outline";
+        size: "small" | "medium" | "large" | null | undefined;
+        rounded: "small" | "medium" | "full" | "large" | null | undefined;
+        fillMode: "flat" | "outline" | "solid" | null | undefined;
         popupSettings: {
             height: string;
         };

package/dist/npm/DropDownList/DropDownList.js

@@ -52,8 +52,10 @@ var DropDownListWithoutContext = /** @class */ (function (_super) {
          * @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;
@@ -73,7 +75,7 @@ var DropDownListWithoutContext = /** @class */ (function (_super) {
             var skip = virtual ? virtual.skip : 0;
             var item = (index === -1 && defaultItem !== undefined) ?
                 defaultItem : data[index - skip];
-            var newSelected = !utils_1.areSame(item, _this.value, dataItemKey);
+            var newSelected = !(0, utils_1.areSame)(item, _this.value, dataItemKey);
             _this.triggerOnChange(item, state);
             if (newSelected) {
                 _this.base.triggerPageChangeCornerItems(item, state);
@@ -99,8 +101,8 @@ var DropDownListWithoutContext = /** @class */ (function (_super) {
                 dir: dir !== undefined ? dir : base.dirCalculated,
                 width: popupWidth,
                 popupSettings: {
-                    popupClass: kendo_react_common_1.classNames(popupSettings.popupClass, 'k-list', (_a = {},
-                        _a["k-list-" + (sizeMap[size] || size)] = size,
+                    popupClass: (0, kendo_react_common_1.classNames)(popupSettings.popupClass, 'k-list', (_a = {},
+                        _a["k-list-".concat(sizeMap[size] || size)] = size,
                         _a['k-virtual-list'] = _this.base.vs.enabled,
                         _a)),
                     className: popupSettings.className,
@@ -126,7 +128,7 @@ var DropDownListWithoutContext = /** @class */ (function (_super) {
             var skip = virtual.skip;
             var opened = _this.props.opened !== undefined ? _this.props.opened : _this.state.opened;
             var popupSettings = _this.base.getPopupSettings();
-            var translate = "translateY(" + vs.translate + "px)";
+            var translate = "translateY(".concat(vs.translate, "px)");
             return (React.createElement(List_1.default, { id: _this.base.listBoxId, show: opened, data: data.slice(), focusedIndex: _this.focusedIndex(), value: _this.value, textField: textField, valueField: dataItemKey, optionsGuid: _this.base.guid, 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, noDataRender: listNoDataRender, onScroll: function (e) {
                     vs.scrollHandler(e);
                 }, wrapperRef: vs.scrollerRef, scroller: _this.base.renderScrollElement() }));
@@ -137,7 +139,7 @@ var DropDownListWithoutContext = /** @class */ (function (_super) {
         };
         _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: utils_1.areSame(_this.value, defaultItem, dataItemKey), key: "defaultitemkey", onClick: _this.handleDefaultItemClick }));
+            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);
@@ -153,9 +155,9 @@ var DropDownListWithoutContext = /** @class */ (function (_super) {
             });
             var word = _this.searchState.word;
             var last = _this.searchState.last;
-            var isInLoop = utils_1.sameCharsOnly(word, last);
+            var isInLoop = (0, utils_1.sameCharsOnly)(word, last);
             var dataLength = mappedData.length;
-            var startIndex = Math.max(0, data.findIndex(function (i) { return utils_1.areSame(i, _this.value, dataItemKey); }));
+            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 };
@@ -163,13 +165,13 @@ var DropDownListWithoutContext = /** @class */ (function (_super) {
                 startIndex += 1;
             }
             startIndex += isInLoop ? 1 : 0;
-            mappedData = utils_1.shuffleData(mappedData, startIndex, defaultItem);
+            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 = utils_1.getItemValue(mappedData[index].item, textField);
-                loopMatch = isInLoop && utils_1.matchText(text, last, ignoreCase);
-                nextMatch = utils_1.matchText(text, word, ignoreCase);
+                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;
@@ -327,7 +329,7 @@ var DropDownListWithoutContext = /** @class */ (function (_super) {
                     : _this.props.validationMessage || VALIDATION_MESSAGE);
             }
         };
-        kendo_react_common_2.validatePackage(package_metadata_1.packageMetadata);
+        (0, kendo_react_common_2.validatePackage)(package_metadata_1.packageMetadata);
         return _this;
     }
     Object.defineProperty(DropDownListWithoutContext.prototype, "element", {
@@ -358,7 +360,7 @@ var DropDownListWithoutContext = /** @class */ (function (_super) {
             else if (this.props.defaultValue !== undefined) {
                 value = this.props.defaultValue;
             }
-            if (!utils_1.isPresent(value) && this.props.defaultItem !== undefined) {
+            if (!(0, utils_1.isPresent)(value) && this.props.defaultItem !== undefined) {
                 value = this.props.defaultItem;
             }
             return value;
@@ -374,7 +376,7 @@ var DropDownListWithoutContext = /** @class */ (function (_super) {
             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 utils_1.areSame(i, value, dataItemKey); });
+            return data.findIndex(function (i) { return (0, utils_1.areSame)(i, value, dataItemKey); });
         },
         enumerable: false,
         configurable: true
@@ -453,8 +455,8 @@ var DropDownListWithoutContext = /** @class */ (function (_super) {
         else {
             var selectedItem_1 = this.value;
             var prevSelectedItem = prevProps.value !== undefined ? prevProps.value : prevState.value;
-            var selectedItemIndex = data.findIndex(function (i) { return utils_1.areSame(i, selectedItem_1, dataItemKey); });
-            var selectedItemChanged = !utils_1.areSame(prevSelectedItem, selectedItem_1, dataItemKey);
+            var selectedItemIndex = data.findIndex(function (i) { return (0, utils_1.areSame)(i, selectedItem_1, dataItemKey); });
+            var selectedItemChanged = !(0, utils_1.areSame)(prevSelectedItem, selectedItem_1, dataItemKey);
             if (opening && virtual) {
                 this.base.scrollToVirtualItem(virtual, selectedItemIndex);
             }
@@ -491,7 +493,7 @@ var DropDownListWithoutContext = /** @class */ (function (_super) {
         var _c = this.props, style = _c.style, className = _c.className, label = _c.label, dir = _c.dir, virtual = _c.virtual, size = _c.size, rounded = _c.rounded, fillMode = _c.fillMode;
         var opened = this.props.opened !== undefined ? this.props.opened : this.state.opened;
         var value = this.value;
-        var text = utils_1.getItemValue(value, this.props.textField);
+        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;
@@ -503,15 +505,15 @@ var DropDownListWithoutContext = /** @class */ (function (_super) {
         }
         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 utils_1.areSame(i, value, dataItemKey); });
+        var selectedIndex = data.findIndex(function (i) { return (0, utils_1.areSame)(i, value, dataItemKey); });
         var valueDefaultRendering = (React.createElement("span", { className: "k-input-inner" },
             React.createElement("span", { className: "k-input-value-text" }, text)));
         var valueElement = valueRender !== undefined ?
             valueRender.call(undefined, valueDefaultRendering, value) : valueDefaultRendering;
-        var dropdownlist = (React.createElement("span", { ref: this.componentRef, className: kendo_react_common_1.classNames('k-dropdownlist k-picker', className, (_a = {},
-                _a["k-picker-" + (sizeMap[size] || size)] = size,
-                _a["k-rounded-" + (roundedMap[rounded] || rounded)] = rounded,
-                _a["k-picker-" + fillMode] = fillMode,
+        var dropdownlist = (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,
@@ -519,15 +521,15 @@ var DropDownListWithoutContext = /** @class */ (function (_super) {
                 _a['k-required'] = this.required,
                 _a)), style: !label
                 ? style
-                : __assign(__assign({}, style), { width: undefined }), dir: dir, onMouseDown: opened ? utils_1.preventDefaultNonInputs : undefined, onFocus: this.handleFocus, onBlur: this.handleBlur, tabIndex: kendo_react_common_1.getTabIndex(tabIndex, disabled), accessKey: this.props.accessKey, onKeyDown: this.handleKeyDown, onKeyPress: this.handleKeyPress, onClick: disabled ? undefined : this.handleWrapperClick, role: 'listbox', "aria-required": this.required, "aria-disabled": disabled || undefined, "aria-haspopup": true, "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, id: this.props.id, title: this.props.title },
+                : __assign(__assign({}, style), { width: undefined }), dir: dir, onMouseDown: opened ? utils_1.preventDefaultNonInputs : 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: 'listbox', "aria-required": this.required, "aria-disabled": disabled || undefined, "aria-haspopup": true, "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, id: this.props.id, title: this.props.title },
             valueElement,
             loading && React.createElement("span", { className: "k-icon k-i-loading k-input-loading-icon", key: "loading" }),
-            React.createElement("button", { tabIndex: -1, type: "button", "aria-hidden": true, className: kendo_react_common_1.classNames('k-input-button k-button k-icon-button', (_b = {},
-                    _b["k-button-" + (sizeMap[size] || size)] = size,
-                    _b["k-button-" + fillMode] = fillMode,
-                    _b["k-button-" + fillMode + "-base"] = fillMode,
+            React.createElement("button", { tabIndex: -1, type: "button", "aria-hidden": true, className: (0, kendo_react_common_1.classNames)('k-input-button k-button k-icon-button', (_b = {},
+                    _b["k-button-".concat(sizeMap[size] || size)] = size,
+                    _b["k-button-".concat(fillMode)] = fillMode,
+                    _b["k-button-".concat(fillMode, "-base")] = fillMode,
                     _b)), onMouseDown: function (e) { return e.preventDefault(); } },
-                React.createElement("span", { className: kendo_react_common_1.classNames('k-button-icon k-icon k-i-arrow-s', iconClassName) })),
+                React.createElement("span", { className: (0, kendo_react_common_1.classNames)('k-button-icon k-icon k-i-arrow-s', iconClassName) })),
             this.dummySelect(value),
             this.renderListContainer()));
         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;
@@ -539,7 +541,7 @@ var DropDownListWithoutContext = /** @class */ (function (_super) {
         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 utils_1.areSame(i, value, dataItemKey); });
+        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,
@@ -552,14 +554,14 @@ var DropDownListWithoutContext = /** @class */ (function (_super) {
         this.applyState(state);
     };
     DropDownListWithoutContext.prototype.focusedIndex = function () {
-        var filterText = utils_1.isPresent(this.props.filter) ? this.props.filter : this.state.text;
+        var filterText = (0, utils_1.isPresent)(this.props.filter) ? this.props.filter : this.state.text;
         var _a = this.props, _b = _a.data, data = _b === void 0 ? [] : _b, _c = _a.virtual, virtual = _c === void 0 ? { skip: 0 } : _c, dataItemKey = _a.dataItemKey, textField = _a.textField, focusedItemIndex = _a.focusedItemIndex;
         var value = this.value;
-        var selectedIndex = data.findIndex(function (i) { return utils_1.areSame(i, value, dataItemKey); });
+        var selectedIndex = data.findIndex(function (i) { return (0, utils_1.areSame)(i, value, dataItemKey); });
         var hasSelected = !(selectedIndex < 0 && !this.props.defaultItem);
         if (!hasSelected && filterText && virtual.skip === 0) {
             return focusedItemIndex ? focusedItemIndex(data, filterText, textField) :
-                data.indexOf(utils_1.getFocusedItem(data, filterText, textField));
+                data.indexOf((0, utils_1.getFocusedItem)(data, filterText, textField));
         }
         else {
             return !hasSelected && virtual.skip === 0 ? 0 : undefined;
@@ -572,7 +574,7 @@ var DropDownListWithoutContext = /** @class */ (function (_super) {
         window.setTimeout(function () { return _this._skipFocusEvent = false; }, 30);
     };
     DropDownListWithoutContext.prototype.triggerOnChange = function (item, state) {
-        if (utils_1.areSame(this.value, item, this.props.dataItemKey)) {
+        if ((0, utils_1.areSame)(this.value, item, this.props.dataItemKey)) {
             return;
         }
         if (this.props.value === undefined) {
@@ -603,7 +605,7 @@ exports.DropDownListWithoutContext = DropDownListWithoutContext;
  *
  * For more information, refer to the [Dropdowns Props Context]({% slug props-context_dropdowns %}) article.
  */
-exports.DropDownListPropsContext = kendo_react_common_1.createPropsContext();
+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 %}).
@@ -630,5 +632,5 @@ exports.DropDownListPropsContext = kendo_react_common_1.createPropsContext();
  * ReactDOM.render(<App />, document.querySelector('my-app'));
  * ```
  */
-exports.DropDownList = kendo_react_common_1.withPropsContext(exports.DropDownListPropsContext, DropDownListWithoutContext);
+exports.DropDownList = (0, kendo_react_common_1.withPropsContext)(exports.DropDownListPropsContext, DropDownListWithoutContext);
 exports.DropDownList.displayName = 'KendoReactDropDownList';

package/dist/npm/DropDownTree/DropDownTree.d.ts

@@ -13,4 +13,4 @@ export declare const DropDownTreePropsContext: React.Context<(p: DropDownTreePro
  * Accepts properties of type [DropDownTreeProps]({% slug api_dropdowns_dropdowntreeprops %}).
  * Obtaining the `ref` returns an object of type [DropDownTreeHandle]({% slug api_dropdowns_dropdowntreehandle %}).
  */
-export declare const DropDownTree: React.ForwardRefExoticComponent<DropDownTreeProps & React.RefAttributes<DropDownTreeHandle>>;
+export declare const DropDownTree: React.ForwardRefExoticComponent<DropDownTreeProps & React.RefAttributes<DropDownTreeHandle | null>>;