@progress/kendo-react-dropdowns 5.4.0-dev.202205200719 → 5.4.0-dev.202206061009

package/dist/npm/DropDownList/DropDownList.js

@@ -3,10 +3,12 @@ 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 (b.hasOwnProperty(p)) d[p] = b[p]; };
+            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 __());
@@ -24,6 +26,7 @@ var __assign = (this && this.__assign) || function () {
     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");
@@ -49,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;
@@ -70,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);
@@ -96,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,
@@ -123,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() }));
@@ -134,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);
@@ -150,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 };
@@ -160,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;
@@ -324,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", {
@@ -334,7 +339,7 @@ var DropDownListWithoutContext = /** @class */ (function (_super) {
         get: function () {
             return this._element;
         },
-        enumerable: true,
+        enumerable: false,
         configurable: true
     });
     Object.defineProperty(DropDownListWithoutContext.prototype, "value", {
@@ -355,12 +360,12 @@ 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;
         },
-        enumerable: true,
+        enumerable: false,
         configurable: true
     });
     Object.defineProperty(DropDownListWithoutContext.prototype, "index", {
@@ -371,9 +376,9 @@ 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: true,
+        enumerable: false,
         configurable: true
     });
     Object.defineProperty(DropDownListWithoutContext.prototype, "name", {
@@ -383,7 +388,7 @@ var DropDownListWithoutContext = /** @class */ (function (_super) {
         get: function () {
             return this.props.name;
         },
-        enumerable: true,
+        enumerable: false,
         configurable: true
     });
     Object.defineProperty(DropDownListWithoutContext.prototype, "validity", {
@@ -401,7 +406,7 @@ var DropDownListWithoutContext = /** @class */ (function (_super) {
                 valueMissing: this.value === null
             };
         },
-        enumerable: true,
+        enumerable: false,
         configurable: true
     });
     Object.defineProperty(DropDownListWithoutContext.prototype, "validityStyles", {
@@ -410,7 +415,7 @@ var DropDownListWithoutContext = /** @class */ (function (_super) {
                 ? this.props.validityStyles
                 : DropDownListWithoutContext.defaultProps.validityStyles;
         },
-        enumerable: true,
+        enumerable: false,
         configurable: true
     });
     Object.defineProperty(DropDownListWithoutContext.prototype, "required", {
@@ -422,7 +427,7 @@ var DropDownListWithoutContext = /** @class */ (function (_super) {
                 ? this.props.required
                 : DropDownListWithoutContext.defaultProps.required;
         },
-        enumerable: true,
+        enumerable: false,
         configurable: true
     });
     /**
@@ -450,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);
             }
@@ -488,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;
@@ -500,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,
@@ -516,15 +521,15 @@ var DropDownListWithoutContext = /** @class */ (function (_super) {
                 _a['k-required'] = this.required,
                 _a)), style: !label
                 ? style
-                : __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-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;
@@ -536,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,
@@ -549,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;
@@ -569,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) {
@@ -590,7 +595,7 @@ var DropDownListWithoutContext = /** @class */ (function (_super) {
     /**
      * @hidden
      */
-    DropDownListWithoutContext.defaultProps = __assign({ delay: 500, tabIndex: 0, ignoreCase: true }, DropDownBase_1.default.defaultProps, { required: false, size: 'medium', rounded: 'medium', fillMode: 'solid' });
+    DropDownListWithoutContext.defaultProps = __assign(__assign({ delay: 500, tabIndex: 0, ignoreCase: true }, DropDownBase_1.default.defaultProps), { required: false, size: 'medium', rounded: 'medium', fillMode: 'solid' });
     return DropDownListWithoutContext;
 }(React.Component));
 exports.DropDownListWithoutContext = DropDownListWithoutContext;
@@ -600,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 %}).
@@ -627,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>>;

package/dist/npm/DropDownTree/DropDownTree.js

@@ -10,7 +10,17 @@ var __assign = (this && this.__assign) || function () {
     };
     return __assign.apply(this, arguments);
 };
+var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
+    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
+        if (ar || !(i in from)) {
+            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
+            ar[i] = from[i];
+        }
+    }
+    return to.concat(ar || Array.prototype.slice.call(from));
+};
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.DropDownTree = exports.DropDownTreePropsContext = void 0;
 var React = require("react");
 var PropTypes = require("prop-types");
 var kendo_react_common_1 = require("@progress/kendo-react-common");
@@ -61,7 +71,7 @@ var defaultProps = {
  *
  * For more information, refer to the [Dropdowns Props Context]({% slug props-context_dropdowns %}) article.
  */
-exports.DropDownTreePropsContext = kendo_react_common_1.createPropsContext();
+exports.DropDownTreePropsContext = (0, kendo_react_common_1.createPropsContext)();
 /**
  * Represents the DropDownTree component.
  *
@@ -70,12 +80,12 @@ exports.DropDownTreePropsContext = kendo_react_common_1.createPropsContext();
  */
 exports.DropDownTree = React.forwardRef(function (directProps, ref) {
     var _a, _b;
-    kendo_react_common_2.validatePackage(package_metadata_1.packageMetadata);
-    var props = kendo_react_common_1.usePropsContext(exports.DropDownTreePropsContext, directProps);
-    var calculatedId = React.useMemo(function () { return kendo_react_common_1.guid(); }, []);
+    (0, kendo_react_common_2.validatePackage)(package_metadata_1.packageMetadata);
+    var props = (0, kendo_react_common_1.usePropsContext)(exports.DropDownTreePropsContext, directProps);
+    var calculatedId = React.useMemo(function () { return (0, kendo_react_common_1.guid)(); }, []);
     var id = props.id || calculatedId;
     var _c = props.data, data = _c === void 0 ? [] : _c, dataItemKey = props.dataItemKey, _d = props.popupSettings, popupSettings = _d === void 0 ? {} : _d, _e = props.style, style = _e === void 0 ? {} : _e, opened = props.opened, disabled = props.disabled, _f = props.onOpen, onOpen = _f === void 0 ? kendo_react_common_1.noop : _f, _g = props.onClose, onClose = _g === void 0 ? kendo_react_common_1.noop : _g, placeholder = props.placeholder, label = props.label, name = props.name, _h = props.selectField, selectField = _h === void 0 ? defaultProps.selectField : _h, _j = props.subItemsField, subItemsField = _j === void 0 ? defaultProps.subItemsField : _j, validationMessage = props.validationMessage, valid = props.valid, required = props.required, validityStyles = props.validityStyles;
-    var tabIndex = kendo_react_common_1.getTabIndex(props.tabIndex, disabled);
+    var tabIndex = (0, kendo_react_common_1.getTabIndex)(props.tabIndex, disabled);
     var target = React.useRef(null);
     var elementRef = React.useRef(null);
     var inputRef = React.useRef(null);
@@ -85,8 +95,8 @@ exports.DropDownTree = React.forwardRef(function (directProps, ref) {
     var _k = React.useState(undefined), stateValue = _k[0], setStateValue = _k[1];
     var controlled = props.value !== undefined;
     var value = controlled ? props.value : (stateValue !== undefined ? stateValue : props.defaultValue);
-    var hasValue = utils_1.isPresent(value);
-    var currentValueText = hasValue ? utils_1.getItemValue(value, props.textField) : '';
+    var hasValue = (0, utils_1.isPresent)(value);
+    var currentValueText = hasValue ? (0, utils_1.getItemValue)(value, props.textField) : '';
     var validity = getValidity({ validationMessage: validationMessage, valid: valid, required: required }, hasValue);
     var focus = React.useCallback(function () { return elementRef.current && elementRef.current.focus(); }, []);
     React.useImperativeHandle(target, function () { return ({
@@ -95,10 +105,10 @@ exports.DropDownTree = React.forwardRef(function (directProps, ref) {
         focus: focus
     }); });
     React.useImperativeHandle(ref, function () { return target.current; });
-    var dir = kendo_react_common_1.useRtl(elementRef, props.dir);
+    var dir = (0, kendo_react_common_1.useRtl)(elementRef, props.dir);
     var initialStyleWidth = popupSettings.width !== undefined ?
         popupSettings.width : (style.width !== undefined ? style.width : defaultProps.popupSettings.width);
-    var popupWidth = useDropdownWidth_1.useDropdownWidth(elementRef, initialStyleWidth);
+    var popupWidth = (0, useDropdownWidth_1.useDropdownWidth)(elementRef, initialStyleWidth);
     var popupStyles = __assign({ width: popupWidth }, (dir !== undefined ? { direction: dir } : {}));
     var _l = React.useState(false), open = _l[0], setOpen = _l[1];
     var isOpen = opened !== undefined ? opened : open;
@@ -172,7 +182,7 @@ exports.DropDownTree = React.forwardRef(function (directProps, ref) {
                     keyCode === kendo_react_common_1.Keys.home || keyCode === kendo_react_common_1.Keys.end)) {
                 if (keyCode === kendo_react_common_1.Keys.up && inputRef.current) {
                     var items = Array.from(treeview.querySelectorAll('.k-treeview-item'));
-                    var focusedItem = items.slice().reverse().find(function (i) { return Boolean(i && i.querySelector('.k-focus')); });
+                    var focusedItem = __spreadArray([], items, true).reverse().find(function (i) { return Boolean(i && i.querySelector('.k-focus')); });
                     if (focusedItem && items.indexOf(focusedItem) === 0) {
                         return switchFocus(function () { focusElement(inputRef.current); });
                     }
@@ -268,7 +278,7 @@ exports.DropDownTree = React.forwardRef(function (directProps, ref) {
         }
     }, [props.onChange, controlled]);
     var onChange = React.useCallback(function (event) {
-        if (utils_1.areSame(event.item, value, dataItemKey) || !target.current) {
+        if ((0, utils_1.areSame)(event.item, value, dataItemKey) || !target.current) {
             return;
         }
         var item = event.item, itemHierarchicalIndex = event.itemHierarchicalIndex, nativeEvent = event.nativeEvent, syntheticEvent = event.syntheticEvent;
@@ -299,7 +309,10 @@ exports.DropDownTree = React.forwardRef(function (directProps, ref) {
             var item = event.item, itemHierarchicalIndex = event.itemHierarchicalIndex, nativeEvent = event.nativeEvent, syntheticEvent = event.syntheticEvent;
             var expandEvent = {
                 level: toLevel(itemHierarchicalIndex),
-                item: item, nativeEvent: nativeEvent, syntheticEvent: syntheticEvent, target: target.current
+                item: item,
+                nativeEvent: nativeEvent,
+                syntheticEvent: syntheticEvent,
+                target: target.current
             };
             props.onExpandChange.call(undefined, expandEvent);
         }
@@ -321,40 +334,40 @@ exports.DropDownTree = React.forwardRef(function (directProps, ref) {
     }, [props.onFilterChange, props.filter, props.textField]);
     var treeViewData = React.useMemo(function () {
         return (controlled || !hasValue) ? data :
-            kendo_react_common_1.mapTree(data, subItemsField, function (item) {
+            (0, kendo_react_common_1.mapTree)(data, subItemsField, function (item) {
                 var _a;
-                return kendo_react_common_1.extendDataItem(item, subItemsField, (_a = {}, _a[selectField] = utils_1.areSame(item, value, dataItemKey), _a));
+                return (0, kendo_react_common_1.extendDataItem)(item, subItemsField, (_a = {}, _a[selectField] = (0, utils_1.areSame)(item, value, dataItemKey), _a));
             });
     }, [data, value, controlled, hasValue, selectField, subItemsField]);
     var NoData = props.listNoData || ListNoData_1.ListNoData;
     var ValueComponent = props.valueHolder || ValueHolder;
-    var localization = kendo_react_intl_1.useLocalization();
+    var localization = (0, kendo_react_intl_1.useLocalization)();
     var isValid = !validityStyles || validity.valid;
     var size = props.size, rounded = props.rounded, fillMode = props.fillMode;
-    var dropdowntree = (React.createElement("span", { className: kendo_react_common_1.classNames('k-dropdowntree k-picker', props.className, (_a = {},
-            _a["k-picker-" + (sizeMap[size] || size)] = size,
-            _a["k-rounded-" + (roundedMap[rounded] || rounded)] = rounded,
-            _a["k-picker-" + fillMode] = fillMode,
+    var dropdowntree = (React.createElement("span", { className: (0, kendo_react_common_1.classNames)('k-dropdowntree k-picker', props.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-invalid'] = !isValid,
             _a['k-loading'] = props.loading,
             _a['k-required'] = required,
             _a['k-disabled'] = props.disabled,
-            _a)), tabIndex: tabIndex, accessKey: props.accessKey, id: id, style: label ? __assign({}, style, { width: undefined }) : style, dir: dir, ref: elementRef, onKeyDown: disabled ? undefined : onWrapperKeyDown, onMouseDown: onWrapperMouseDown, onClick: disabled ? undefined : onWrapperClick, onFocus: onFocus, onBlur: onBlur, role: "listbox", "aria-haspopup": "true", "aria-expanded": isOpen, "aria-disabled": disabled, "aria-label": label, "aria-labelledby": props.ariaLabelledBy, "aria-describedby": props.ariaDescribedBy },
+            _a)), tabIndex: tabIndex, accessKey: props.accessKey, id: id, style: label ? __assign(__assign({}, style), { width: undefined }) : style, dir: dir, ref: elementRef, onKeyDown: disabled ? undefined : onWrapperKeyDown, onMouseDown: onWrapperMouseDown, onClick: disabled ? undefined : onWrapperClick, onFocus: onFocus, onBlur: onBlur, role: "listbox", "aria-haspopup": "true", "aria-expanded": isOpen, "aria-disabled": disabled, "aria-label": label, "aria-labelledby": props.ariaLabelledBy, "aria-describedby": props.ariaDescribedBy },
         React.createElement("span", { className: "k-input-inner" },
             React.createElement(ValueComponent, { item: value }, currentValueText || placeholder)),
         props.loading && React.createElement("span", { className: "k-icon k-i-loading k-input-loading-icon" }),
         hasValue && !disabled && (React.createElement("span", { onClick: onClear, className: "k-clear-value", title: localization.toLanguageString(messages_1.clear, messages_1.messages[messages_1.clear]), role: "button", tabIndex: -1, onMouseDown: function (e) { return e.preventDefault(); } },
             React.createElement("span", { className: "k-icon k-i-x" }))),
-        React.createElement("button", { tabIndex: -1, type: "button", "aria-label": "select", 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-label": "select", 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)) },
             React.createElement("span", { className: "k-button-icon k-icon k-i-arrow-s" })),
         React.createElement("select", { name: name, ref: selectRef, tabIndex: -1, "aria-hidden": true, title: label, style: { opacity: 0, width: 1, border: 0, zIndex: -1, position: 'absolute', left: '50%' } },
             React.createElement("option", { value: props.valueMap ? props.valueMap.call(undefined, value) : value })),
-        React.createElement(kendo_react_popup_1.Popup, { className: kendo_react_common_1.classNames(popupSettings.className, { 'k-rtl': dir === 'rtl' }), popupClass: popupSettings.popupClass, style: popupStyles, animate: popupSettings.animate, anchor: elementRef.current, show: isOpen, onOpen: onPopupOpened, onClose: onPopupClosed, appendTo: popupSettings.appendTo },
+        React.createElement(kendo_react_popup_1.Popup, { className: (0, kendo_react_common_1.classNames)(popupSettings.className, { 'k-rtl': dir === 'rtl' }), popupClass: popupSettings.popupClass, style: popupStyles, animate: popupSettings.animate, anchor: elementRef.current, show: isOpen, onOpen: onPopupOpened, onClose: onPopupClosed, appendTo: popupSettings.appendTo },
             props.filterable && (React.createElement(ListFilter_1.default, { value: props.filter === undefined ? filter : props.filter, inputRef: inputRef, onChange: onFilterChange, onKeyDown: onInputKeyDown, size: size, rounded: rounded, fillMode: fillMode })),
             data.length > 0 ? (React.createElement(kendo_react_treeview_1.TreeView, { ref: treeViewRef, tabIndex: tabIndex, data: treeViewData, focusIdField: dataItemKey, textField: props.textField, selectField: selectField, expandField: props.expandField, childrenField: subItemsField, expandIcons: true, onItemClick: onChange, onExpandChange: onExpand, size: size, item: props.item })) : (React.createElement(NoData, null, localization.toLanguageString(messages_1.nodata, messages_1.messages[messages_1.nodata]))))));
     return label ? (React.createElement(kendo_react_labels_1.FloatingLabel, { label: label, editorValue: currentValueText, editorPlaceholder: placeholder, editorValid: isValid, editorDisabled: disabled, editorId: id, style: { width: style ? style.width : undefined }, children: dropdowntree, dir: dir })) : dropdowntree;
@@ -395,7 +408,7 @@ var propTypes = {
             })]),
         popupClass: PropTypes.string,
         className: PropTypes.string,
-        appendTo: PropTypes.any,
+        appendTo: PropTypes.instanceOf(Element),
         width: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
         height: PropTypes.oneOfType([PropTypes.string, PropTypes.number])
     }),

package/dist/npm/DropDownTree/ListNoData.js

@@ -1,10 +1,12 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.ListNoData = void 0;
 var React = require("react");
 /**
  * @hidden
  */
-exports.ListNoData = function (props) {
+var ListNoData = function (props) {
     return React.createElement("div", { className: "k-nodata" },
         React.createElement("div", null, props.children));
 };
+exports.ListNoData = ListNoData;

package/dist/npm/DropDownTree/useDropdownWidth.js

@@ -1,5 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.useDropdownWidth = void 0;
 var React = require("react");
 /**
  * @hidden

package/dist/npm/MultiColumnComboBox/MultiColumnComboBox.d.ts

@@ -143,7 +143,7 @@ export interface MultiColumnComboBoxProps extends ComboBoxProps {
      * @hidden
      */
     onGroupScroll?: (event: {
-        group: string;
+        group?: string;
     }) => void;
     /**
      * Fires when a MultiColumnComboBox list item is about to be rendered. Used to override the default appearance of the list items.
@@ -247,4 +247,4 @@ export declare const MultiColumnComboBoxPropsContext: React.Context<(p: MultiCol
  * Obtaining the `ref` returns an object of type [MultiColumnComboBoxHandle]({% slug api_dropdowns_multicolumncomboboxhandle %}).
  *
  */
-export declare const MultiColumnComboBox: React.ForwardRefExoticComponent<MultiColumnComboBoxProps & React.RefAttributes<MultiColumnComboBoxHandle>>;
+export declare const MultiColumnComboBox: React.ForwardRefExoticComponent<MultiColumnComboBoxProps & React.RefAttributes<MultiColumnComboBoxHandle | null>>;

package/dist/npm/MultiColumnComboBox/MultiColumnComboBox.js

@@ -15,11 +15,14 @@ var __rest = (this && this.__rest) || function (s, e) {
     for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
         t[p] = s[p];
     if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) if (e.indexOf(p[i]) < 0)
-            t[p[i]] = s[p[i]];
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
     return t;
 };
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.MultiColumnComboBox = exports.MultiColumnComboBoxPropsContext = void 0;
 var React = require("react");
 var PropTypes = require("prop-types");
 var MultiColumnList_1 = require("./../common/MultiColumnList");
@@ -38,7 +41,7 @@ var columnWidth = function (width, defaultWidth) {
  *
  * For more information, refer to the [Dropdowns Props Context]({% slug props-context_dropdowns %}) article.
  */
-exports.MultiColumnComboBoxPropsContext = kendo_react_common_1.createPropsContext();
+exports.MultiColumnComboBoxPropsContext = (0, kendo_react_common_1.createPropsContext)();
 /**
  * Represents the MultiColumnComboBox component.
  *
@@ -47,11 +50,11 @@ exports.MultiColumnComboBoxPropsContext = kendo_react_common_1.createPropsContex
  *
  */
 exports.MultiColumnComboBox = React.forwardRef(function (directProps, ref) {
-    var props = kendo_react_common_1.usePropsContext(exports.MultiColumnComboBoxPropsContext, directProps);
+    var props = (0, kendo_react_common_1.usePropsContext)(exports.MultiColumnComboBoxPropsContext, directProps);
     var target = React.useRef(null);
     var comboBoxRef = React.useRef(null);
-    var scrollbarWidth = kendo_react_common_1.getScrollbarWidth();
-    var _a = props.columns, columns = _a === void 0 ? defaultProps.columns : _a, _b = props.popupSettings, popupSettings = _b === void 0 ? defaultProps.popupSettings : _b, size = props.size, onOpen = props.onOpen, onClose = props.onClose, onFocus = props.onFocus, onBlur = props.onBlur, onChange = props.onChange, onFilterChange = props.onFilterChange, onPageChange = props.onPageChange, other = __rest(props, ["columns", "popupSettings", "size", "onOpen", "onClose", "onFocus", "onBlur", "onChange", "onFilterChange", "onPageChange"]);
+    var scrollbarWidth = (0, kendo_react_common_1.getScrollbarWidth)();
+    var _a = props.columns, columns = _a === void 0 ? defaultProps.columns : _a, _b = props.popupSettings, popupSettings = _b === void 0 ? defaultProps.popupSettings : _b, className = props.className, size = props.size, onOpen = props.onOpen, onClose = props.onClose, onFocus = props.onFocus, onBlur = props.onBlur, onChange = props.onChange, onFilterChange = props.onFilterChange, onPageChange = props.onPageChange, other = __rest(props, ["columns", "popupSettings", "className", "size", "onOpen", "onClose", "onFocus", "onBlur", "onChange", "onFilterChange", "onPageChange"]);
     React.useImperativeHandle(target, function () {
         return ({
             element: comboBoxRef.current && comboBoxRef.current.element,
@@ -68,7 +71,7 @@ exports.MultiColumnComboBox = React.forwardRef(function (directProps, ref) {
     React.useImperativeHandle(ref, function () { return target.current; });
     var initialGroupHeader = React.useMemo(function () {
         if (initialGroupHeader === undefined && props.groupField !== undefined && props.data) {
-            return utils_1.getItemValue(props.data[0], props.groupField);
+            return (0, utils_1.getItemValue)(props.data[0], props.groupField);
         }
     }, [props.data, props.groupField]);
     var _c = React.useState(initialGroupHeader), groupHeader = _c[0], setGroupHeader = _c[1];
@@ -89,16 +92,16 @@ exports.MultiColumnComboBox = React.forwardRef(function (directProps, ref) {
     }, [props.header, columns, groupHeader]);
     var popupWidth = React.useMemo(function () {
         // These additional 4px are coming from the child elements side borders (fixes horizontal scrollbar)
-        return "calc(" + columns.map(function (column) { return columnWidth(column.width, defaultProps.width); }).filter(Boolean).join(' + ') + " + " + scrollbarWidth + "px + 4px)";
+        return "calc(".concat(columns.map(function (column) { return columnWidth(column.width, defaultProps.width); }).filter(Boolean).join(' + '), " + ").concat(scrollbarWidth, "px + 4px)");
     }, [columns, scrollbarWidth]);
     var skip = props.virtual ? props.virtual.skip : 0;
     var itemRender = React.useCallback(function (li, liProps) {
-        var children = columns.map(function (column, i) { return (React.createElement("span", { className: "k-table-td", style: { width: column.width ? column.width : defaultProps.width }, key: column.uniqueKey ? column.uniqueKey : i }, column.field ? kendo_react_common_1.getter(column.field)(liProps.dataItem) : '')); });
+        var children = columns.map(function (column, i) { return (React.createElement("span", { className: "k-table-td", style: { width: column.width ? column.width : defaultProps.width }, key: column.uniqueKey ? column.uniqueKey : i }, column.field ? (0, kendo_react_common_1.getter)(column.field)(liProps.dataItem) : '')); });
         var group = undefined;
         var curGroup, prevGroup, groupGetter, data = props.data || [];
         var index = liProps.index - skip;
         if (props.groupField !== undefined) {
-            groupGetter = kendo_react_common_1.getter(props.groupField);
+            groupGetter = (0, kendo_react_common_1.getter)(props.groupField);
             curGroup = groupGetter(data[index]);
             prevGroup = groupGetter(data[index - 1]);
             if (curGroup && prevGroup && curGroup !== prevGroup) {
@@ -109,7 +112,7 @@ exports.MultiColumnComboBox = React.forwardRef(function (directProps, ref) {
             children.push(React.createElement("div", { key: "group", className: "k-table-td k-table-group-td" },
                 React.createElement("span", null, group)));
         }
-        var rendering = React.cloneElement(li, __assign({}, li.props, { className: kendo_react_common_1.classNames('k-table-row', {
+        var rendering = React.cloneElement(li, __assign(__assign({}, li.props), { className: (0, kendo_react_common_1.classNames)('k-table-row', {
                 'k-table-alt-row': liProps.index % 2 !== 0,
                 'k-focus': liProps.focused,
                 'k-selected': liProps.selected,
@@ -119,7 +122,7 @@ exports.MultiColumnComboBox = React.forwardRef(function (directProps, ref) {
     }, [columns, props.groupField, props.itemRender, props.data, skip]);
     var handleEvent = React.useCallback(function (handler, event) {
         if (handler) {
-            handler.call(undefined, __assign({}, event, { target: target.current }));
+            handler.call(undefined, __assign(__assign({}, event), { target: target.current }));
         }
     }, []);
     var onOpenHandler = React.useCallback(function (event) { return handleEvent(onOpen, event); }, [onOpen]);
@@ -132,11 +135,11 @@ exports.MultiColumnComboBox = React.forwardRef(function (directProps, ref) {
     var onGroupScroll = React.useCallback(function (event) {
         setGroupHeader(event.group);
     }, []);
-    React.useEffect(function () { kendo_react_common_1.setScrollbarWidth(); });
+    React.useEffect(function () { (0, kendo_react_common_1.setScrollbarWidth)(); });
     var List = React.useCallback(function (listProps) { return React.createElement(MultiColumnList_1.MultiColumnList, __assign({}, listProps)); }, []);
-    return (React.createElement(ComboBox_1.ComboBox, __assign({}, other, { list: List, popupSettings: __assign({ width: popupWidth }, popupSettings, { popupClass: 'k-dropdowngrid-popup k-reset', className: popupSettings.className }), ref: comboBoxRef, header: header, itemRender: itemRender, size: props.size, rounded: props.rounded, fillMode: props.fillMode, onOpen: onOpenHandler, onClose: onCloseHandler, onFocus: onFocusHandler, onBlur: onBlurHandler, onChange: onChangeHandler, onFilterChange: onFilterChangeHandler, onPageChange: onPageChangeHandler, onGroupScroll: onGroupScroll, className: 'k-dropdowngrid' })));
+    return (React.createElement(ComboBox_1.ComboBox, __assign({}, other, { list: List, popupSettings: __assign(__assign({ width: popupWidth }, popupSettings), { popupClass: 'k-dropdowngrid-popup k-reset', className: popupSettings.className }), ref: comboBoxRef, header: header, itemRender: itemRender, size: props.size, rounded: props.rounded, fillMode: props.fillMode, onOpen: onOpenHandler, onClose: onCloseHandler, onFocus: onFocusHandler, onBlur: onBlurHandler, onChange: onChangeHandler, onFilterChange: onFilterChangeHandler, onPageChange: onPageChangeHandler, onGroupScroll: onGroupScroll, className: (0, kendo_react_common_1.classNames)('k-dropdowngrid', className) })));
 });
-var propTypes = __assign({}, ComboBox_1.ComboBoxWithoutContext.propTypes, { columns: PropTypes.any.isRequired });
+var propTypes = __assign(__assign({}, ComboBox_1.ComboBoxWithoutContext.propTypes), { columns: PropTypes.any.isRequired });
 var defaultProps = {
     columns: [],
     popupSettings: {},