@progress/kendo-react-dropdowns 5.4.0-dev.202205250548 → 5.4.0-dev.202206081230

package/dist/npm/MultiSelectTree/MultiSelectTree.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.MultiSelectTree = exports.MultiSelectTreePropsContext = void 0;
 var React = require("react");
 var PropTypes = require("prop-types");
 var kendo_react_common_1 = require("@progress/kendo-react-common");
@@ -32,8 +42,8 @@ var sizeMap = kendo_react_common_1.kendoThemeMaps.sizeMap, roundedMap = kendo_re
 var toLevel = function (hierarchicalIndex) {
     return hierarchicalIndex.split('_').map(function (i) { return parseInt(i, 10); });
 };
-var getValidity = function (_a, hasValue) {
-    var validationMessage = _a.validationMessage, valid = _a.valid, required = _a.required;
+var getValidity = function (parameters, hasValue) {
+    var validationMessage = parameters.validationMessage, valid = parameters.valid, required = parameters.required;
     return ({
         customError: validationMessage !== undefined,
         valid: Boolean(valid !== undefined ? valid : (!required || hasValue)),
@@ -61,7 +71,7 @@ var defaultProps = {
  *
  * For more information, refer to the [Dropdowns Props Context]({% slug props-context_dropdowns %}) article.
  */
-exports.MultiSelectTreePropsContext = kendo_react_common_1.createPropsContext();
+exports.MultiSelectTreePropsContext = (0, kendo_react_common_1.createPropsContext)();
 /**
  * Represents the MultiSelectTree component.
  *
@@ -70,12 +80,12 @@ exports.MultiSelectTreePropsContext = kendo_react_common_1.createPropsContext();
  */
 exports.MultiSelectTree = React.forwardRef(function (directProps, ref) {
     var _a, _b;
-    var props = kendo_react_common_1.usePropsContext(exports.MultiSelectTreePropsContext, directProps);
-    kendo_react_common_2.validatePackage(package_metadata_1.packageMetadata);
-    var componentGuid = React.useMemo(function () { return kendo_react_common_1.guid(); }, []);
+    var props = (0, kendo_react_common_1.usePropsContext)(exports.MultiSelectTreePropsContext, directProps);
+    (0, kendo_react_common_2.validatePackage)(package_metadata_1.packageMetadata);
+    var componentGuid = React.useMemo(function () { return (0, kendo_react_common_1.guid)(); }, []);
     var id = props.id || componentGuid;
     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.checkField, checkField = _h === void 0 ? defaultProps.checkField : _h, _j = props.checkIndeterminateField, checkIndeterminateField = _j === void 0 ? defaultProps.checkIndeterminateField : _j, _k = props.subItemsField, subItemsField = _k === void 0 ? defaultProps.subItemsField : _k, validationMessage = props.validationMessage, valid = props.valid, tags = props.tags, value = props.value, _l = props.required, required = _l === void 0 ? defaultProps.required : _l, _m = props.validityStyles, validityStyles = _m === void 0 ? defaultProps.validityStyles : _m;
-    var tabIndex = kendo_react_common_1.getTabIndex(props.tabIndex, disabled);
+    var tabIndex = (0, kendo_react_common_1.getTabIndex)(props.tabIndex, disabled);
     var targetRef = React.useRef(null);
     var elementRef = React.useRef(null);
     var inputRef = React.useRef(null);
@@ -91,14 +101,14 @@ exports.MultiSelectTree = React.forwardRef(function (directProps, ref) {
     var isOpen = opened !== undefined ? opened : openState;
     var hasValue = Boolean(Array.isArray(value) && value.length);
     var validity = getValidity({ validationMessage: validationMessage, valid: valid, required: required }, hasValue);
-    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 focus = React.useCallback(function () { return elementRef.current && elementRef.current.focus(); }, []);
     tagsToRenderRef.current = tags === undefined ?
-        (value || []).map(function (item) { return ({ text: utils_1.getItemValue(item, props.textField), data: [item] }); }) : tags.slice();
+        (value || []).map(function (item) { return ({ text: (0, utils_1.getItemValue)(item, props.textField), data: [item] }); }) : __spreadArray([], tags, true);
     React.useImperativeHandle(targetRef, function () { return ({
         props: props,
         element: elementRef.current,
@@ -125,7 +135,7 @@ exports.MultiSelectTree = React.forwardRef(function (directProps, ref) {
         }
     }, [props.onChange]);
     var onChange = React.useCallback(function (event) {
-        if (utils_1.areSame(event.item, value, dataItemKey) || !targetRef.current) {
+        if ((0, utils_1.areSame)(event.item, value, dataItemKey) || !targetRef.current) {
             return;
         }
         var item = event.item, nativeEvent = event.nativeEvent, syntheticEvent = event.syntheticEvent;
@@ -251,7 +261,7 @@ exports.MultiSelectTree = React.forwardRef(function (directProps, ref) {
                 keyCode === kendo_react_common_1.Keys.delete)) {
             var tagsToRender = tagsToRenderRef.current;
             var focusedIndex = focusedTagState ?
-                tagsToRender.findIndex(function (t) { return utils_1.matchTags(t, focusedTagState, dataItemKey); }) : -1;
+                tagsToRender.findIndex(function (t) { return (0, utils_1.matchTags)(t, focusedTagState, dataItemKey); }) : -1;
             var newFocusedTag = undefined;
             var hasFocused = focusedIndex !== -1;
             if (keyCode === kendo_react_common_1.Keys.left) {
@@ -298,7 +308,7 @@ exports.MultiSelectTree = 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(treeviewElement.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); });
                     }
@@ -355,7 +365,10 @@ exports.MultiSelectTree = 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: targetRef.current
+                item: item,
+                nativeEvent: nativeEvent,
+                syntheticEvent: syntheticEvent,
+                target: targetRef.current
             };
             props.onExpandChange.call(undefined, expandEvent);
         }
@@ -376,30 +389,30 @@ exports.MultiSelectTree = React.forwardRef(function (directProps, ref) {
         }
     }, [props.onFilterChange, props.filter, props.textField]);
     var NoData = props.listNoData || ListNoData_1.ListNoData;
-    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 multiselecttree = (React.createElement("span", { className: kendo_react_common_1.classNames('k-multiselect k-input', props.className, (_a = {},
-            _a["k-input-" + (sizeMap[size] || size)] = size,
-            _a["k-rounded-" + (roundedMap[rounded] || rounded)] = rounded,
-            _a["k-input-" + fillMode] = fillMode,
+    var multiselecttree = (React.createElement("span", { className: (0, kendo_react_common_1.classNames)('k-multiselect k-input', props.className, (_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-focus'] = focusedState && !disabled,
             _a['k-invalid'] = !isValid,
             _a['k-disabled'] = disabled,
             _a['k-loading'] = props.loading,
             _a['k-required'] = required,
-            _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, 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, onClick: disabled ? undefined : onWrapperClick },
-        tagsToRenderRef.current.length > 0 && (React.createElement("div", { className: kendo_react_common_1.classNames('k-input-values k-chip-list k-selection-multiple', (_b = {},
-                _b["k-chip-list-" + (sizeMap[size] || size)] = size,
+            _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, 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, onClick: disabled ? undefined : onWrapperClick },
+        tagsToRenderRef.current.length > 0 && (React.createElement("div", { className: (0, kendo_react_common_1.classNames)('k-input-values k-chip-list k-selection-multiple', (_b = {},
+                _b["k-chip-list-".concat(sizeMap[size] || size)] = size,
                 _b)), role: "listbox", id: 'tagslist-' + id },
-            React.createElement(TagList_1.default, { tag: props.tag, onTagDelete: onTagDelete, data: tagsToRenderRef.current, guid: id, focused: focusedTagState ? tagsToRenderRef.current.find(function (t) { return utils_1.matchTags(t, focusedTagState, dataItemKey); }) : undefined, size: size }))),
+            React.createElement(TagList_1.default, { tag: props.tag, onTagDelete: onTagDelete, data: tagsToRenderRef.current, guid: id, focused: focusedTagState ? tagsToRenderRef.current.find(function (t) { return (0, utils_1.matchTags)(t, focusedTagState, dataItemKey); }) : undefined, size: size }))),
         !hasValue && React.createElement("span", { className: "k-input-inner" },
             React.createElement("span", { className: "k-input-value-text" }, "\u00A0")),
         props.loading && React.createElement("span", { className: "k-icon k-i-loading k-input-loading-icon" }),
         hasValue && !disabled && React.createElement(ClearButton_1.default, { onClick: onClear }),
         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, { popupClass: popupSettings.popupClass, className: kendo_react_common_1.classNames(popupSettings.className, { 'k-rtl': dir === 'rtl' }), style: popupStyles, animate: popupSettings.animate, anchor: elementRef.current, show: isOpen, onOpen: onPopupOpened, onClose: onPopupClosed, appendTo: popupSettings.appendTo, ref: popupRef },
+        React.createElement(kendo_react_popup_1.Popup, { popupClass: popupSettings.popupClass, className: (0, kendo_react_common_1.classNames)(popupSettings.className, { 'k-rtl': dir === 'rtl' }), style: popupStyles, animate: popupSettings.animate, anchor: elementRef.current, show: isOpen, onOpen: onPopupOpened, onClose: onPopupClosed, appendTo: popupSettings.appendTo, ref: popupRef },
             props.filterable && (React.createElement(ListFilter_1.default, { value: props.filter === undefined ? filterState : props.filter, inputRef: inputRef, onChange: onFilterChange, onKeyDown: onInputKeyDown, tabIndex: tabIndex, size: size, rounded: rounded, fillMode: fillMode })),
             data.length > 0 ? (React.createElement(kendo_react_treeview_1.TreeView, { ref: treeViewRef, tabIndex: tabIndex, data: data, focusIdField: dataItemKey, textField: props.textField, checkField: checkField, checkIndeterminateField: checkIndeterminateField, expandField: props.expandField, childrenField: subItemsField, expandIcons: true, onItemClick: onChange, onCheckChange: onChange, onExpandChange: onExpand, checkboxes: true, 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: hasValue, editorPlaceholder: placeholder, editorValid: isValid, editorDisabled: disabled, editorId: id, style: { width: style ? style.width : undefined }, children: multiselecttree, dir: dir })) : multiselecttree;
@@ -445,7 +458,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/MultiSelectTree/utils.d.ts

@@ -1,6 +1,6 @@
 import { MultiSelectTreeChangeEventOperation } from './MultiSelectTreeProps';
 /** @hidden */
-export declare const getValueMap: (value: any, idGetter: any) => {};
+export declare const getValueMap: (value: any[], idGetter: any) => any;
 /**
  * Get MultiSelectTree new value from the component `onChange` event.
  *
@@ -8,10 +8,10 @@ export declare const getValueMap: (value: any, idGetter: any) => {};
  * @param {object} options
  * @returns {any[]}
  */
-export declare const getMultiSelectTreeValue: (data: any, options: {
-    subItemsField?: string;
+export declare const getMultiSelectTreeValue: (data: any[], options: {
+    subItemsField?: string | undefined;
     dataItemKey: string;
     items: any;
-    value: any[];
+    value: Array<any>;
     operation: MultiSelectTreeChangeEventOperation;
 }) => any[];

package/dist/npm/MultiSelectTree/utils.js

@@ -1,8 +1,18 @@
 "use strict";
+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.getMultiSelectTreeValue = exports.getValueMap = void 0;
 var kendo_react_common_1 = require("@progress/kendo-react-common");
 /** @hidden */
-exports.getValueMap = function (value, idGetter) {
+var getValueMap = function (value, idGetter) {
     var map = {};
     if (value && value.length) {
         value.forEach(function (item) {
@@ -11,6 +21,7 @@ exports.getValueMap = function (value, idGetter) {
     }
     return map;
 };
+exports.getValueMap = getValueMap;
 /**
  * Get MultiSelectTree new value from the component `onChange` event.
  *
@@ -18,24 +29,24 @@ exports.getValueMap = function (value, idGetter) {
  * @param {object} options
  * @returns {any[]}
  */
-exports.getMultiSelectTreeValue = function (data, options) {
+var getMultiSelectTreeValue = function (data, options) {
     var items = options.items, dataItemKey = options.dataItemKey, value = options.value, _a = options.subItemsField, subItemsField = _a === void 0 ? 'items' : _a, operation = options.operation;
-    var idGetter = kendo_react_common_1.getter(dataItemKey);
-    var valueMap = exports.getValueMap(value, idGetter);
+    var idGetter = (0, kendo_react_common_1.getter)(dataItemKey);
+    var valueMap = (0, exports.getValueMap)(value, idGetter);
     if (operation === 'clear') {
         return [];
     }
     else if (operation === 'delete') {
-        var deletedItemsMap_1 = exports.getValueMap(items, idGetter);
+        var deletedItemsMap_1 = (0, exports.getValueMap)(items, idGetter);
         return value.filter(function (item) { return !deletedItemsMap_1[idGetter(item)]; });
     }
     // operation === 'toggle'
     var selectedItem = items[0];
     var selectedId = idGetter(selectedItem);
-    var subItemGetter = kendo_react_common_1.getter(subItemsField);
-    var stack = data.slice();
+    var subItemGetter = (0, kendo_react_common_1.getter)(subItemsField);
+    var stack = __spreadArray([], data, true);
     var context = [];
-    var parents;
+    var parents = [];
     var foundItem;
     while (stack.length) {
         var currentItem = stack.pop();
@@ -57,7 +68,7 @@ exports.getMultiSelectTreeValue = function (data, options) {
             }
         }
     }
-    var childrenStack = (subItemGetter(foundItem) || []).slice();
+    var childrenStack = __spreadArray([], (subItemGetter(foundItem) || []), true);
     var children = [];
     while (childrenStack.length) {
         var currentItem = childrenStack.pop();
@@ -74,7 +85,7 @@ exports.getMultiSelectTreeValue = function (data, options) {
         newValue.push(foundItem);
         newValue.push.apply(newValue, children.filter(function (item) { return !valueMap[idGetter(item)]; }));
         var parentCandidates = parents.filter(function (item) { return !valueMap[idGetter(item)]; });
-        var newValueMap_1 = exports.getValueMap(newValue, idGetter);
+        var newValueMap_1 = (0, exports.getValueMap)(newValue, idGetter);
         for (var i = parentCandidates.length - 1; i > -1; i--) {
             var candidate = parentCandidates[i];
             var subItems = subItemGetter(candidate);
@@ -90,8 +101,8 @@ exports.getMultiSelectTreeValue = function (data, options) {
     }
     else {
         var foundId_1 = idGetter(foundItem);
-        var childrenMap_1 = exports.getValueMap(children, idGetter);
-        var parentsMap_1 = exports.getValueMap(parents, idGetter);
+        var childrenMap_1 = (0, exports.getValueMap)(children, idGetter);
+        var parentsMap_1 = (0, exports.getValueMap)(parents, idGetter);
         newValue.push.apply(newValue, (value
             .filter(function (item) {
             var itemId = idGetter(item);
@@ -100,6 +111,7 @@ exports.getMultiSelectTreeValue = function (data, options) {
     }
     return newValue;
 };
+exports.getMultiSelectTreeValue = getMultiSelectTreeValue;
 // /** @hidden */
 // const mapCheckAndIntermidiate = (
 //     data,

package/dist/npm/common/ClearButton.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 __());
@@ -27,11 +29,11 @@ var ClearButton = /** @class */ (function (_super) {
         return _this;
     }
     ClearButton.prototype.render = function () {
-        var title = kendo_react_intl_1.provideLocalizationService(this).toLanguageString(messages_1.clear, messages_1.messages[messages_1.clear]);
+        var title = (0, kendo_react_intl_1.provideLocalizationService)(this).toLanguageString(messages_1.clear, messages_1.messages[messages_1.clear]);
         return (React.createElement("span", { className: "k-clear-value", role: "button", onClick: this.props.onClick, onMouseDown: this.onMouseDown, tabIndex: -1, title: title, key: "clearbutton" },
             React.createElement("span", { className: "k-icon k-i-x" })));
     };
     return ClearButton;
 }(React.Component));
 exports.default = ClearButton;
-kendo_react_intl_1.registerForLocalization(ClearButton);
+(0, kendo_react_intl_1.registerForLocalization)(ClearButton);

package/dist/npm/common/DropDownBase.d.ts

@@ -68,7 +68,7 @@ export default class DropDownBase {
             }>>;
             popupClass: PropTypes.Requireable<string>;
             className: PropTypes.Requireable<string>;
-            appendTo: PropTypes.Requireable<PropTypes.ReactElementLike>;
+            appendTo: PropTypes.Requireable<Element>;
             width: PropTypes.Requireable<string | number>;
             height: PropTypes.Requireable<string | number>;
         }>>;
@@ -112,7 +112,7 @@ export default class DropDownBase {
             }>>;
             popupClass: PropTypes.Requireable<string>;
             className: PropTypes.Requireable<string>;
-            appendTo: PropTypes.Requireable<PropTypes.ReactElementLike>;
+            appendTo: PropTypes.Requireable<Element>;
             width: PropTypes.Requireable<string | number>;
             height: PropTypes.Requireable<string | number>;
         }>>;
@@ -148,16 +148,16 @@ export default class DropDownBase {
     calculateDir(): void;
     calculatePopupWidth(): void;
     scrollToItem(itemIndex: number, vsEnabled?: boolean): void;
-    handleItemClick: (index: number, event: React.KeyboardEvent<HTMLInputElement> | React.MouseEvent<HTMLLIElement, MouseEvent>) => void;
+    handleItemClick: (index: number, event: React.MouseEvent<HTMLLIElement> | React.KeyboardEvent<HTMLInputElement>) => void;
     handleFocus: React.FocusEventHandler<HTMLSpanElement>;
-    filterChanged: (text: string, state: InternalState) => void;
+    filterChanged: (text: string | null, state: InternalState) => void;
     initState(): InternalState;
     applyState(state: InternalState): void;
     togglePopup: (state: InternalState) => void;
-    pageChange: (page: Page, syntheticEvent: React.SyntheticEvent<any, Event>) => void;
+    pageChange: (page: Page, syntheticEvent: React.SyntheticEvent<any>) => void;
     triggerOnPageChange(state: InternalState, skip: number, take: number): void;
     triggerPageChangeCornerItems(item: any, state: InternalState): void;
     scrollToVirtualItem: (virtual: VirtualizationSettings, selectedItemIndex: number) => void;
-    renderScrollElement: () => JSX.Element;
+    renderScrollElement: () => false | JSX.Element;
     getPopupSettings(): DropDownsPopupSettings;
 }

package/dist/npm/common/DropDownBase.js

@@ -23,6 +23,8 @@ var kendo_react_common_1 = require("@progress/kendo-react-common");
 var DropDownBase = /** @class */ (function () {
     function DropDownBase(component) {
         var _this = this;
+        this.wrapper = null;
+        this.list = null;
         this.vs = new VirtualScroll_1.default();
         this.navigation = new Navigation_1.Navigation();
         this.handleItemClick = function (index, event) {
@@ -103,8 +105,8 @@ var DropDownBase = /** @class */ (function () {
             var vs = _this.vs;
             return vs.enabled && (React.createElement("div", { ref: function (element) { return vs.scrollElement = element; }, key: 'scrollElementKey' }));
         };
-        this.listBoxId = kendo_react_common_1.guid();
-        this.guid = kendo_react_common_1.guid();
+        this.listBoxId = (0, kendo_react_common_1.guid)();
+        this.guid = (0, kendo_react_common_1.guid)();
         this.component = component;
         this.vs.PageChange = this.pageChange;
     }
@@ -142,7 +144,7 @@ var DropDownBase = /** @class */ (function () {
             var vs = this.vs;
             var scrollElement = (vs.container || list.parentNode);
             var virtualScroll = vsEnabled !== undefined ? vsEnabled : vs.enabled;
-            utils_1.scrollToItem(scrollElement, list, itemIndex, vs.translate, virtualScroll);
+            (0, utils_1.scrollToItem)(scrollElement, list, itemIndex, vs.translate, virtualScroll);
         }
     };
     DropDownBase.prototype.initState = function () {
@@ -169,7 +171,7 @@ var DropDownBase = /** @class */ (function () {
             delete eventData.type;
             var handler = type && _this.component.props[type];
             if (handler) {
-                handler.call(undefined, __assign({}, eventArgs, eventData));
+                handler.call(undefined, __assign(__assign({}, eventArgs), eventData));
             }
         });
     };
@@ -190,11 +192,11 @@ var DropDownBase = /** @class */ (function () {
         var _a = props.data, data = _a === void 0 ? [] : _a, dataItemKey = props.dataItemKey, virtual = props.virtual;
         var opened = props.opened !== undefined ? props.opened : this.component.state.opened;
         if (item && virtual && this.vs.enabled) {
-            if (virtual.skip > 0 && utils_1.areSame(item, data[0], dataItemKey)) {
+            if (virtual.skip > 0 && (0, utils_1.areSame)(item, data[0], dataItemKey)) {
                 this.triggerOnPageChange(state, virtual.skip - 1, virtual.pageSize);
             }
             else if (!opened && virtual.skip + virtual.pageSize < virtual.total &&
-                utils_1.areSame(item, data[data.length - 1], dataItemKey)) {
+                (0, utils_1.areSame)(item, data[data.length - 1], dataItemKey)) {
                 this.triggerOnPageChange(state, virtual.skip + 1, virtual.pageSize);
             }
         }
@@ -221,7 +223,7 @@ var DropDownBase = /** @class */ (function () {
                 })]),
             popupClass: PropTypes.string,
             className: PropTypes.string,
-            appendTo: PropTypes.element,
+            appendTo: PropTypes.instanceOf(Element),
             width: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
             height: PropTypes.oneOfType([PropTypes.string, PropTypes.number])
         }),
@@ -236,7 +238,7 @@ var DropDownBase = /** @class */ (function () {
         header: PropTypes.node,
         footer: PropTypes.node
     };
-    DropDownBase.propTypes = __assign({}, DropDownBase.basicPropTypes, { value: PropTypes.any, defaultValue: PropTypes.any, filterable: PropTypes.bool, filter: PropTypes.string, virtual: PropTypes.shape({
+    DropDownBase.propTypes = __assign(__assign({}, DropDownBase.basicPropTypes), { value: PropTypes.any, defaultValue: PropTypes.any, filterable: PropTypes.bool, filter: PropTypes.string, virtual: PropTypes.shape({
             pageSize: PropTypes.number.isRequired,
             skip: PropTypes.number.isRequired,
             total: PropTypes.number.isRequired

package/dist/npm/common/List.d.ts

@@ -36,6 +36,6 @@ export interface ListProps {
  */
 export default class List extends React.Component<ListProps> {
     renderItems(): JSX.Element[];
-    renderNoValueElement(localizationService: LocalizationService): any;
-    render(): any;
+    renderNoValueElement(localizationService: LocalizationService): string | number | boolean | React.ReactFragment | JSX.Element | null | undefined;
+    render(): string | number | boolean | React.ReactFragment | JSX.Element | null | undefined;
 }

package/dist/npm/common/List.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 __());
@@ -33,18 +35,18 @@ var List = /** @class */ (function (_super) {
         return data.map(function (item, index) {
             var realIndex = skip + index;
             var selected = highlightSelected &&
-                ((!isArray && utils_1.areSame(item, value, valueField)) ||
-                    (isArray && value.findIndex(function (i) { return utils_1.areSame(i, item, valueField); }) !== -1));
+                ((!isArray && (0, utils_1.areSame)(item, value, valueField)) ||
+                    (isArray && value.findIndex(function (i) { return (0, utils_1.areSame)(i, item, valueField); }) !== -1));
             var group = undefined;
             var current, previous;
             if (index > 0 && groupField !== undefined) {
-                current = utils_1.getItemValue(item, groupField);
-                previous = utils_1.getItemValue(data[index - 1], groupField);
+                current = (0, utils_1.getItemValue)(item, groupField);
+                previous = (0, utils_1.getItemValue)(data[index - 1], groupField);
                 if (current && previous && current !== previous) {
                     group = current;
                 }
             }
-            return (React.createElement(ListItem_1.default, { id: "option-" + optionsGuid + "-" + realIndex, virtual: virtual, dataItem: item, selected: selected, focused: focusedIndex === index, index: realIndex, key: realIndex, onClick: _this.props.onClick, textField: textField, group: group, render: itemRender }));
+            return (React.createElement(ListItem_1.default, { id: "option-".concat(optionsGuid, "-").concat(realIndex), virtual: virtual, dataItem: item, selected: selected, focused: focusedIndex === index, index: realIndex, key: realIndex, onClick: _this.props.onClick, textField: textField, group: group, render: itemRender }));
         });
     };
     List.prototype.renderNoValueElement = function (localizationService) {
@@ -55,7 +57,7 @@ var List = /** @class */ (function (_super) {
             noDataRender.call(undefined, noDataElement) : noDataElement;
     };
     List.prototype.render = function () {
-        var localizationService = kendo_react_intl_1.provideLocalizationService(this);
+        var localizationService = (0, kendo_react_intl_1.provideLocalizationService)(this);
         var _a = this.props, id = _a.id, show = _a.show, wrapperCssClass = _a.wrapperCssClass, wrapperStyle = _a.wrapperStyle, listStyle = _a.listStyle, listRef = _a.listRef, wrapperRef = _a.wrapperRef, _b = _a.listClassName, listClassName = _b === void 0 ? 'k-list-ul' : _b;
         var items = this.renderItems();
         return (items.length ? (React.createElement("div", { className: wrapperCssClass, style: wrapperStyle, ref: wrapperRef, onMouseDown: this.props.onMouseDown, onBlur: this.props.onBlur, onScroll: this.props.onScroll, unselectable: "on" },
@@ -65,4 +67,4 @@ var List = /** @class */ (function (_super) {
     return List;
 }(React.Component));
 exports.default = List;
-kendo_react_intl_1.registerForLocalization(List);
+(0, kendo_react_intl_1.registerForLocalization)(List);

package/dist/npm/common/ListContainer.d.ts

@@ -8,6 +8,7 @@ export interface ListContainerProps {
     dir?: string;
     popupSettings?: PopupProps;
     itemsCount?: number[];
+    children?: React.ReactNode;
 }
 /**
  * @hidden

package/dist/npm/common/ListContainer.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 __());

package/dist/npm/common/ListDefaultItem.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 __());
@@ -27,9 +29,9 @@ var ListDefaultItem = /** @class */ (function (_super) {
     }
     ListDefaultItem.prototype.render = function () {
         var _a = this.props, selected = _a.selected, defaultItem = _a.defaultItem, textField = _a.textField;
-        return (React.createElement("div", { onClick: this.props.onClick, onMouseDown: preventDefault, style: { position: 'unset' }, className: kendo_react_common_1.classNames('k-list-optionlabel', {
+        return (React.createElement("div", { onClick: this.props.onClick, onMouseDown: preventDefault, style: { position: 'unset' }, className: (0, kendo_react_common_1.classNames)('k-list-optionlabel', {
                 'k-selected': selected
-            }) }, utils_1.getItemValue(defaultItem, textField) || ''));
+            }) }, (0, utils_1.getItemValue)(defaultItem, textField) || ''));
     };
     return ListDefaultItem;
 }(React.Component));

package/dist/npm/common/ListFilter.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 __());
@@ -22,17 +24,19 @@ var sizeMap = kendo_react_common_1.kendoThemeMaps.sizeMap, roundedMap = kendo_re
 var ListFilter = /** @class */ (function (_super) {
     __extends(ListFilter, _super);
     function ListFilter() {
-        return _super !== null && _super.apply(this, arguments) || this;
+        var _this = _super !== null && _super.apply(this, arguments) || this;
+        _this.input = null;
+        return _this;
     }
     ListFilter.prototype.render = function () {
-        var _this = this;
         var _a;
+        var _this = this;
         var _b = this.props, size = _b.size, rounded = _b.rounded, fillMode = _b.fillMode, inputRef = _b.inputRef;
         return (React.createElement("div", { className: "k-list-filter" },
-            React.createElement("span", { className: kendo_react_common_1.classNames('k-searchbox k-input', (_a = {},
-                    _a["k-input-" + (sizeMap[size] || size)] = size,
-                    _a["k-rounded-" + (roundedMap[rounded] || rounded)] = rounded,
-                    _a["k-input-" + fillMode] = fillMode,
+            React.createElement("span", { className: (0, kendo_react_common_1.classNames)('k-searchbox 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)) },
                 React.createElement("span", { className: "k-input-icon k-icon k-i-search" }),
                 React.createElement("input", { ref: inputRef ? inputRef : function (input) { return _this.input = input; }, value: this.props.value || '', className: "k-input-inner", onChange: this.props.onChange, onKeyDown: this.props.onKeyDown, tabIndex: this.props.tabIndex, onClick: function (e) { return e.stopPropagation(); } }))));

package/dist/npm/common/ListItem.d.ts

@@ -49,5 +49,5 @@ export interface ListItemProps {
  */
 export default class ListItem extends React.Component<ListItemProps, {}> {
     handleClick: React.MouseEventHandler<HTMLLIElement>;
-    render(): any;
+    render(): string | number | boolean | React.ReactFragment | JSX.Element | null | undefined;
 }

package/dist/npm/common/ListItem.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 __());
@@ -29,12 +31,12 @@ var ListItem = /** @class */ (function (_super) {
     }
     ListItem.prototype.render = function () {
         var _a = this.props, selected = _a.selected, group = _a.group, dataItem = _a.dataItem, virtual = _a.virtual, renderer = _a.render;
-        var item = (React.createElement("li", { id: this.props.id, role: "option", "aria-selected": selected, className: kendo_react_common_1.classNames('k-list-item', {
+        var item = (React.createElement("li", { id: this.props.id, role: "option", "aria-selected": selected, className: (0, kendo_react_common_1.classNames)('k-list-item', {
                 'k-selected': selected,
                 'k-focus': this.props.focused,
                 'k-first': Boolean(group)
             }), onClick: this.handleClick, style: { position: virtual ? 'relative' : 'unset' } },
-            React.createElement("span", { className: 'k-list-item-text' }, utils_1.getItemValue(dataItem, this.props.textField).toString()),
+            React.createElement("span", { className: 'k-list-item-text' }, (0, utils_1.getItemValue)(dataItem, this.props.textField).toString()),
             group !== undefined ? React.createElement("div", { className: "k-list-item-group-label" }, group) : null));
         return renderer !== undefined ? renderer.call(undefined, item, this.props) : item;
     };

package/dist/npm/common/MultiColumnList.d.ts

@@ -1,5 +1,6 @@
 /// <reference types="react" />
+import { ListProps } from './List';
 /**
  * @hidden
  */
-export declare const MultiColumnList: (props: any) => JSX.Element;
+export declare const MultiColumnList: (props: ListProps) => JSX.Element;