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

package/dist/es/AutoComplete/AutoComplete.d.ts

@@ -24,9 +24,9 @@ export declare class AutoCompleteWithoutContext extends React.Component<AutoComp
      * @hidden
      */
     static propTypes: {
-        size: PropTypes.Requireable<"small" | "medium" | "large">;
-        rounded: PropTypes.Requireable<"small" | "medium" | "full" | "large">;
-        fillMode: PropTypes.Requireable<"flat" | "solid" | "outline">;
+        size: PropTypes.Requireable<"small" | "medium" | "large" | null | undefined>;
+        rounded: PropTypes.Requireable<"small" | "medium" | "full" | "large" | null | undefined>;
+        fillMode: PropTypes.Requireable<"flat" | "outline" | "solid" | null | undefined>;
         suggest: PropTypes.Requireable<string | boolean>;
         placeholder: PropTypes.Requireable<string>;
         value: PropTypes.Requireable<string>;
@@ -77,9 +77,9 @@ export declare class AutoCompleteWithoutContext extends React.Component<AutoComp
      * @hidden
      */
     static defaultProps: {
-        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/es/AutoComplete/AutoComplete.js

@@ -48,8 +48,10 @@ var AutoCompleteWithoutContext = /** @class */ (function (_super) {
          */
         _this.state = {};
         _this.base = new DropDownBase(_this);
+        _this._element = null;
         _this._inputId = guid();
         _this._suggested = '';
+        _this._input = null;
         /**
          * @hidden
          */
@@ -303,9 +305,9 @@ var AutoCompleteWithoutContext = /** @class */ (function (_super) {
             this._suggested = suggest;
         }
         var autoComplete = (React.createElement("span", { className: classNames('k-autocomplete k-input', className, (_a = {},
-                _a["k-input-" + (sizeMap[size] || size)] = size,
-                _a["k-rounded-" + (roundedMap[rounded] || rounded)] = rounded,
-                _a["k-input-" + fillMode] = fillMode,
+                _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,
@@ -382,7 +384,7 @@ var AutoCompleteWithoutContext = /** @class */ (function (_super) {
                 anchor: this.element,
                 show: opened,
                 popupClass: classNames(popupSettings.popupClass, 'k-list', (_a = {},
-                    _a["k-list-" + (sizeMap[size] || size)] = size,
+                    _a["k-list-".concat(sizeMap[size] || size)] = size,
                     _a)),
                 className: popupSettings.className,
                 appendTo: popupSettings.appendTo

package/dist/es/ComboBox/ComboBox.d.ts

@@ -24,9 +24,9 @@ export declare class ComboBoxWithoutContext extends React.Component<ComboBoxProp
      * @hidden
      */
     static propTypes: {
-        size: PropTypes.Requireable<"small" | "medium" | "large">;
-        rounded: PropTypes.Requireable<"small" | "medium" | "full" | "large">;
-        fillMode: PropTypes.Requireable<"flat" | "solid" | "outline">;
+        size: PropTypes.Requireable<"small" | "medium" | "large" | null | undefined>;
+        rounded: PropTypes.Requireable<"small" | "medium" | "full" | "large" | null | undefined>;
+        fillMode: PropTypes.Requireable<"flat" | "outline" | "solid" | null | undefined>;
         dataItemKey: PropTypes.Requireable<string>;
         groupField: PropTypes.Requireable<string>;
         suggest: PropTypes.Requireable<boolean>;
@@ -88,9 +88,9 @@ export declare class ComboBoxWithoutContext extends React.Component<ComboBoxProp
      * @hidden
      */
     static defaultProps: {
-        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;
         allowCustom: boolean;
         clearButton: boolean;
         required: boolean;

package/dist/es/ComboBox/ComboBox.js

@@ -48,8 +48,10 @@ var ComboBoxWithoutContext = /** @class */ (function (_super) {
          */
         _this.state = {};
         _this.base = new DropDownBase(_this);
+        _this._element = null;
         _this._inputId = guid();
         _this._suggested = '';
+        _this._input = null;
         _this.itemHeight = 0;
         /**
          * @hidden
@@ -376,9 +378,9 @@ var ComboBoxWithoutContext = /** @class */ (function (_super) {
             vs.pageSize = virtual.pageSize;
         }
         var combobox = (React.createElement("span", { className: 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,
+                _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,
@@ -388,9 +390,9 @@ var ComboBoxWithoutContext = /** @class */ (function (_super) {
             renderClearButton && !loading && React.createElement(ClearButton, { 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: 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,
+                    _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: classNames('k-button-icon k-icon k-i-arrow-s', iconClassName) })),
             this.renderListContainer()));
@@ -529,10 +531,10 @@ var ComboBoxWithoutContext = /** @class */ (function (_super) {
             }, dir: dir !== undefined ? dir : this.base.dirCalculated, itemsCount: [data.length] },
             React.createElement("div", { className: 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),
@@ -548,7 +550,7 @@ 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 = getItemValue(this.value, textField);
@@ -568,7 +570,7 @@ var ComboBoxWithoutContext = /** @class */ (function (_super) {
         if (this._suggested && !areSame(this._valueOnDidUpdate, value, dataItemKey)) {
             this._suggested = '';
         }
-        return (React.createElement(SearchBar, { 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, { 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;

package/dist/es/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/es/DropDownList/DropDownList.js

@@ -49,8 +49,10 @@ var DropDownListWithoutContext = /** @class */ (function (_super) {
          * @hidden
          */
         _this.state = {};
+        _this._element = null;
         _this.base = new DropDownBase(_this);
         _this.searchState = { word: '', last: '' };
+        _this._select = null;
         _this._skipFocusEvent = false;
         _this._filterInput = null;
         _this._navigated = false;
@@ -97,7 +99,7 @@ var DropDownListWithoutContext = /** @class */ (function (_super) {
                 width: popupWidth,
                 popupSettings: {
                     popupClass: classNames(popupSettings.popupClass, 'k-list', (_a = {},
-                        _a["k-list-" + (sizeMap[size] || size)] = size,
+                        _a["k-list-".concat(sizeMap[size] || size)] = size,
                         _a['k-virtual-list'] = _this.base.vs.enabled,
                         _a)),
                     className: popupSettings.className,
@@ -123,7 +125,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, { 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() }));
@@ -506,9 +508,9 @@ var DropDownListWithoutContext = /** @class */ (function (_super) {
         var valueElement = valueRender !== undefined ?
             valueRender.call(undefined, valueDefaultRendering, value) : valueDefaultRendering;
         var dropdownlist = (React.createElement("span", { ref: this.componentRef, className: 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,
+                _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,
@@ -520,9 +522,9 @@ var DropDownListWithoutContext = /** @class */ (function (_super) {
             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: 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,
+                    _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: classNames('k-button-icon k-icon k-i-arrow-s', iconClassName) })),
             this.dummySelect(value),

package/dist/es/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/es/DropDownTree/DropDownTree.js

@@ -9,10 +9,14 @@ var __assign = (this && this.__assign) || function () {
     };
     return __assign.apply(this, arguments);
 };
-var __spreadArray = (this && this.__spreadArray) || function (to, from) {
-    for (var i = 0, il = from.length, j = to.length; i < il; i++, j++)
-        to[j] = from[i];
-    return to;
+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));
 };
 import * as React from 'react';
 import * as PropTypes from 'prop-types';
@@ -36,8 +40,8 @@ var ValueHolder = function (props) {
 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)),
@@ -175,7 +179,7 @@ export var DropDownTree = React.forwardRef(function (directProps, ref) {
                     keyCode === Keys.home || keyCode === Keys.end)) {
                 if (keyCode === Keys.up && inputRef.current) {
                     var items = Array.from(treeview.querySelectorAll('.k-treeview-item'));
-                    var focusedItem = __spreadArray([], items).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); });
                     }
@@ -338,9 +342,9 @@ export var DropDownTree = React.forwardRef(function (directProps, ref) {
     var isValid = !validityStyles || validity.valid;
     var size = props.size, rounded = props.rounded, fillMode = props.fillMode;
     var dropdowntree = (React.createElement("span", { className: 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,
+            _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,
@@ -353,9 +357,9 @@ export var DropDownTree = React.forwardRef(function (directProps, ref) {
         hasValue && !disabled && (React.createElement("span", { onClick: onClear, className: "k-clear-value", title: localization.toLanguageString(clear, messages[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: 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,
+                _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%' } },

package/dist/es/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/es/MultiColumnComboBox/MultiColumnComboBox.js

@@ -89,7 +89,7 @@ export var 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) {

package/dist/es/MultiSelect/MultiSelect.d.ts

@@ -33,10 +33,10 @@ export declare class MultiSelectWithoutContext extends React.Component<MultiSele
         defaultValue: PropTypes.Requireable<any[]>;
         dataItemKey: PropTypes.Requireable<string>;
         placeholder: PropTypes.Requireable<string>;
-        tags: PropTypes.Requireable<PropTypes.InferProps<{
+        tags: PropTypes.Requireable<(PropTypes.InferProps<{
             text: PropTypes.Requireable<string>;
             data: PropTypes.Requireable<any[]>;
-        }>[]>;
+        }> | null | undefined)[]>;
         tagRender: PropTypes.Requireable<(...args: any[]) => any>;
         id: PropTypes.Requireable<string>;
         ariaLabelledBy: PropTypes.Requireable<string>;
@@ -88,9 +88,9 @@ export declare class MultiSelectWithoutContext extends React.Component<MultiSele
     static defaultProps: {
         autoClose: boolean;
         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/es/MultiSelect/MultiSelect.js

@@ -24,10 +24,14 @@ var __assign = (this && this.__assign) || function () {
     };
     return __assign.apply(this, arguments);
 };
-var __spreadArray = (this && this.__spreadArray) || function (to, from) {
-    for (var i = 0, il = from.length, j = to.length; i < il; i++, j++)
-        to[j] = from[i];
-    return to;
+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));
 };
 import * as React from 'react';
 import * as PropTypes from 'prop-types';
@@ -64,10 +68,12 @@ var MultiSelectWithoutContext = /** @class */ (function (_super) {
         _this.state = {
             activedescendant: ActiveDescendant.PopupList
         };
+        _this._element = null;
         _this._valueItemsDuringOnChange = null;
         _this._inputId = guid();
         _this.base = new DropDownBase(_this);
         _this._tags = [];
+        _this._input = null;
         _this._skipFocusEvent = false;
         _this.scrollToFocused = false;
         /**
@@ -92,7 +98,7 @@ var MultiSelectWithoutContext = /** @class */ (function (_super) {
                 newItems.splice(indexInValue, 1);
             }
             else {
-                newItems = __spreadArray(__spreadArray([], _this.value), [dataItem]);
+                newItems = __spreadArray(__spreadArray([], _this.value, true), [dataItem], false);
             }
             var text = _this.props.filter !== undefined ? _this.props.filter : _this.state.text;
             if (text) {
@@ -253,7 +259,7 @@ var MultiSelectWithoutContext = /** @class */ (function (_super) {
                 width: popupWidth,
                 popupSettings: {
                     popupClass: classNames(popupSettings.popupClass, 'k-list', (_a = {},
-                        _a["k-list-" + (sizeMap[size] || size)] = size,
+                        _a["k-list-".concat(sizeMap[size] || size)] = size,
                         _a['k-virtual-list'] = _this.base.vs.enabled,
                         _a)),
                     className: popupSettings.className,
@@ -268,7 +274,7 @@ var MultiSelectWithoutContext = /** @class */ (function (_super) {
             };
             var focusedType = _this.getFocusedState().focusedType;
             var customItem = allowCustom && text && (React.createElement("div", { className: classNames('k-list', (_b = {},
-                    _b["k-list-" + (sizeMap[size] || size)] = size,
+                    _b["k-list-".concat(sizeMap[size] || size)] = size,
                     _b)), key: "customitem", onClick: _this.customItemSelect, onMouseDown: preventDefault },
                 React.createElement("div", { className: classNames('k-list-item k-custom-item', { 'k-focus': isCustom(focusedType) }), style: { fontStyle: 'italic' } },
                     text,
@@ -286,7 +292,7 @@ var MultiSelectWithoutContext = /** @class */ (function (_super) {
             var opened = _this.props.opened !== undefined ? _this.props.opened : _this.state.opened;
             var focusedIndex = _this.getFocusedState().focusedIndex;
             var popupSettings = _this.base.getPopupSettings();
-            var translate = "translateY(" + vs.translate + "px)";
+            var translate = "translateY(".concat(vs.translate, "px)");
             return (React.createElement(List, { id: _this.base.listBoxId, show: opened, data: data.slice(), focusedIndex: focusedIndex - skip, value: _this.value, textField: textField, valueField: dataItemKey, optionsGuid: _this.base.guid, listRef: function (list) { 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, onMouseDown: preventDefault, onBlur: _this.handleBlur, onScroll: function (e) {
                     vs.scrollHandler(e);
                 }, wrapperRef: vs.scrollerRef, scroller: _this.base.renderScrollElement() }));
@@ -306,7 +312,7 @@ var MultiSelectWithoutContext = /** @class */ (function (_super) {
             }
             state.data.focusedIndex = undefined;
             _this.base.filterChanged('', state);
-            var newItems = __spreadArray(__spreadArray([], _this.value), [item]);
+            var newItems = __spreadArray(__spreadArray([], _this.value, true), [item], false);
             _this.triggerOnChange(newItems, state);
             _this.base.togglePopup(state);
             _this.applyState(state);
@@ -567,9 +573,9 @@ var MultiSelectWithoutContext = /** @class */ (function (_super) {
         var isValid = !this.validityStyles || this.validity.valid;
         var clearButton = Boolean(filter !== undefined ? filter : text) || this.value.length > 0;
         var component = (React.createElement("div", { ref: this.componentRef, className: classNames('k-multiselect k-input', className, (_a = {},
-                _a["k-input-" + (sizeMap[size] || size)] = size,
-                _a["k-rounded-" + (roundedMap[rounded] || rounded)] = rounded,
-                _a["k-input-" + fillMode] = fillMode,
+                _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'] = focused && !disabled,
                 _a['k-invalid'] = !isValid,
                 _a['k-disabled'] = disabled,
@@ -579,7 +585,7 @@ var MultiSelectWithoutContext = /** @class */ (function (_super) {
                 ? style
                 : __assign(__assign({}, style), { width: undefined }), dir: dir, onFocus: this.handleFocus, onBlur: this.handleBlur, onClick: this.handleWrapperClick, onMouseDown: preventDefaultNonInputs },
             React.createElement("div", { className: classNames('k-input-values k-chip-list k-selection-multiple', (_b = {},
-                    _b["k-chip-list-" + (sizeMap[size] || size)] = size,
+                    _b["k-chip-list-".concat(sizeMap[size] || size)] = size,
                     _b)), role: "listbox", id: 'tagslist-' + this.base.guid },
                 tagsToRender.length > 0 && React.createElement(TagList, { tagRender: this.props.tagRender, onTagDelete: this.onTagDelete, data: tagsToRender, guid: this.base.guid, focused: focusedTag ? tagsToRender.find(function (t) { return matchTags(t, focusedTag, dataItemKey); }) : undefined, size: size }),
                 this.renderSearchbar(id)),
@@ -596,9 +602,9 @@ var MultiSelectWithoutContext = /** @class */ (function (_super) {
         var focusedIndex = this.getFocusedState().focusedIndex;
         var placeholderToShow = this.value.length === 0 && !text ? placeholder : undefined;
         var ariaActivedescendant = activedescendant === ActiveDescendant.TagsList && focusedTag !== undefined ?
-            "tag-" + this.base.guid + "-" + focusedTag.text.replace(/\s+/g, '-') :
-            "option-" + this.base.guid + "-" + focusedIndex;
-        return (React.createElement(SearchBar, { id: id, size: Math.max((placeholderToShow || '').length, text.length, 1), tabIndex: this.props.tabIndex, accessKey: this.props.accessKey, placeholder: placeholderToShow, value: text, onChange: this.onChangeHandler, onKeyDown: this.onInputKeyDown, ref: this.searchbarRef, disabled: disabled, expanded: opened, owns: this.base.listBoxId, activedescendant: ariaActivedescendant, ariaDescribedBy: "tagslist-" + this.base.guid + (ariaDescribedBy ? (' ' + ariaDescribedBy) : ''), ariaLabelledBy: this.props.ariaLabelledBy }));
+            "tag-".concat(this.base.guid, "-").concat(focusedTag.text.replace(/\s+/g, '-')) :
+            "option-".concat(this.base.guid, "-").concat(focusedIndex);
+        return (React.createElement(SearchBar, { id: id, size: Math.max((placeholderToShow || '').length, text.length, 1), tabIndex: this.props.tabIndex, accessKey: this.props.accessKey, placeholder: placeholderToShow, value: text, onChange: this.onChangeHandler, onKeyDown: this.onInputKeyDown, ref: this.searchbarRef, disabled: disabled, expanded: opened, owns: this.base.listBoxId, activedescendant: ariaActivedescendant, ariaDescribedBy: "tagslist-".concat(this.base.guid).concat(ariaDescribedBy ? (' ' + ariaDescribedBy) : ''), ariaLabelledBy: this.props.ariaLabelledBy }));
     };
     MultiSelectWithoutContext.prototype.onTagsNavigate = function (event, state) {
         var keyCode = event.keyCode;
@@ -660,7 +666,7 @@ var MultiSelectWithoutContext = /** @class */ (function (_super) {
     };
     MultiSelectWithoutContext.prototype.triggerOnChange = function (items, state) {
         if (this.props.value === undefined) {
-            state.data.value = __spreadArray([], items);
+            state.data.value = __spreadArray([], items, true);
         }
         this._valueItemsDuringOnChange = [];
         this.setItems(items, this._valueItemsDuringOnChange);

package/dist/es/MultiSelect/TagList.d.ts

@@ -16,6 +16,7 @@ export interface TagData {
  * @hidden
  */
 export interface TagListProps {
+    children?: React.ReactNode;
     data: Array<TagData>;
     guid: string;
     focused?: TagData;

package/dist/es/MultiSelect/TagList.js

@@ -29,7 +29,7 @@ var TagList = /** @class */ (function (_super) {
         var _a = this.props, data = _a.data, guid = _a.guid, focused = _a.focused, tagRender = _a.tagRender, TagComponent = _a.tag, onTagDelete = _a.onTagDelete, size = _a.size;
         return (React.createElement(React.Fragment, null,
             data.map(function (tagData, index) {
-                var tag = TagComponent ? (React.createElement(TagComponent, { key: tagData.text + index, tagData: tagData, guid: guid, focusedTag: focused, onTagDelete: onTagDelete })) : (React.createElement(Chip, { id: "tag-" + guid + "-" + tagData.text.replace(/\s+/g, '-'), "aria-selected": true, role: "option", "aria-setsize": data.length, key: tagData.text + index, text: tagData.text, removable: true, removeIcon: 'k-i-close', onRemove: function (e) { return onTagDelete.call(undefined, tagData.data, e.syntheticEvent); }, onMouseDown: preventDefault, onClick: stopPropagation, className: tagData === focused ? 'k-focus' : undefined, size: size }));
+                var tag = TagComponent ? (React.createElement(TagComponent, { key: tagData.text + index, tagData: tagData, guid: guid, focusedTag: focused, onTagDelete: onTagDelete })) : (React.createElement(Chip, { id: "tag-".concat(guid, "-").concat(tagData.text.replace(/\s+/g, '-')), "aria-selected": true, role: "option", "aria-setsize": data.length, key: tagData.text + index, text: tagData.text, removable: true, removeIcon: 'k-i-close', onRemove: function (e) { return onTagDelete.call(undefined, tagData.data, e.syntheticEvent); }, onMouseDown: preventDefault, onClick: stopPropagation, className: tagData === focused ? 'k-focus' : undefined, size: size }));
                 return tagRender ? tagRender(tagData, tag) : tag;
             }),
             this.props.children));

package/dist/es/MultiSelectTree/MultiSelectTree.d.ts

@@ -13,4 +13,4 @@ export declare const MultiSelectTreePropsContext: React.Context<(p: MultiSelectT
  * Accepts properties of type [MultiSelectTreeProps]({% slug api_dropdowns_multiselecttreeprops %}).
  * Obtaining the `ref` returns an object of type [MultiSelectTreeHandle]({% slug api_dropdowns_multiselecttreehandle %}).
  */
-export declare const MultiSelectTree: React.ForwardRefExoticComponent<MultiSelectTreeProps & React.RefAttributes<MultiSelectTreeHandle>>;
+export declare const MultiSelectTree: React.ForwardRefExoticComponent<MultiSelectTreeProps & React.RefAttributes<MultiSelectTreeHandle | null>>;

package/dist/es/MultiSelectTree/MultiSelectTree.js

@@ -9,10 +9,14 @@ var __assign = (this && this.__assign) || function () {
     };
     return __assign.apply(this, arguments);
 };
-var __spreadArray = (this && this.__spreadArray) || function (to, from) {
-    for (var i = 0, il = from.length, j = to.length; i < il; i++, j++)
-        to[j] = from[i];
-    return to;
+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));
 };
 import * as React from 'react';
 import * as PropTypes from 'prop-types';
@@ -35,8 +39,8 @@ var sizeMap = kendoThemeMaps.sizeMap, roundedMap = kendoThemeMaps.roundedMap;
 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)),
@@ -101,7 +105,7 @@ export var MultiSelectTree = React.forwardRef(function (directProps, ref) {
     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: getItemValue(item, props.textField), data: [item] }); }) : __spreadArray([], tags);
+        (value || []).map(function (item) { return ({ text: getItemValue(item, props.textField), data: [item] }); }) : __spreadArray([], tags, true);
     React.useImperativeHandle(targetRef, function () { return ({
         props: props,
         element: elementRef.current,
@@ -301,7 +305,7 @@ export var MultiSelectTree = React.forwardRef(function (directProps, ref) {
                     keyCode === Keys.home || keyCode === Keys.end)) {
                 if (keyCode === Keys.up && inputRef.current) {
                     var items = Array.from(treeviewElement.querySelectorAll('.k-treeview-item'));
-                    var focusedItem = __spreadArray([], items).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); });
                     }
@@ -386,9 +390,9 @@ export var MultiSelectTree = React.forwardRef(function (directProps, ref) {
     var isValid = !validityStyles || validity.valid;
     var size = props.size, rounded = props.rounded, fillMode = props.fillMode;
     var multiselecttree = (React.createElement("span", { className: 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,
+            _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,
@@ -396,7 +400,7 @@ export var MultiSelectTree = React.forwardRef(function (directProps, ref) {
             _a['k-required'] = required,
             _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: classNames('k-input-values k-chip-list k-selection-multiple', (_b = {},
-                _b["k-chip-list-" + (sizeMap[size] || size)] = size,
+                _b["k-chip-list-".concat(sizeMap[size] || size)] = size,
                 _b)), role: "listbox", id: 'tagslist-' + id },
             React.createElement(TagList, { tag: props.tag, onTagDelete: onTagDelete, data: tagsToRenderRef.current, guid: id, focused: focusedTagState ? tagsToRenderRef.current.find(function (t) { return matchTags(t, focusedTagState, dataItemKey); }) : undefined, size: size }))),
         !hasValue && React.createElement("span", { className: "k-input-inner" },

package/dist/es/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,8 +8,8 @@ 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: Array<any>;