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

package/dist/npm/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)[]>;
         tagRender: PropTypes.Requireable<(...args: any[]) => any>;
         id: PropTypes.Requireable<string>;
         ariaLabelledBy: PropTypes.Requireable<string>;
@@ -67,14 +67,12 @@ export declare class MultiSelectWithoutContext extends React.Component<MultiSele
             }>>;
             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>;
         }>>;
         onOpen: PropTypes.Requireable<(...args: any[]) => any>;
-        onClose: PropTypes.Requireable<(...args: any[]) => any>; /**
-         * @hidden
-         */
+        onClose: PropTypes.Requireable<(...args: any[]) => any>;
         onFocus: PropTypes.Requireable<(...args: any[]) => any>;
         onBlur: PropTypes.Requireable<(...args: any[]) => any>;
         onChange: PropTypes.Requireable<(...args: any[]) => any>;
@@ -90,9 +88,9 @@ export declare class MultiSelectWithoutContext extends React.Component<MultiSele
     static defaultProps: {
         autoClose: boolean;
         required: boolean;
-        size: "small" | "medium" | "large";
-        rounded: "small" | "medium" | "large" | "full";
-        fillMode: "solid" | "flat" | "outline";
+        size: "small" | "medium" | "large" | null | undefined;
+        rounded: "small" | "medium" | "full" | "large" | null | undefined;
+        fillMode: "flat" | "outline" | "solid" | null | undefined;
         popupSettings: {
             height: string;
         };
@@ -118,24 +116,24 @@ export declare class MultiSelectWithoutContext extends React.Component<MultiSele
     /**
      * @hidden
      */
-    readonly element: HTMLSpanElement | null;
+    get element(): HTMLSpanElement | null;
     /**
      * Represents the value of the MultiSelect.
      */
-    readonly value: Array<any>;
+    get value(): Array<any>;
     /**
      * Gets the `name` property of the MultiSelect.
      */
-    readonly name: string | undefined;
+    get name(): string | undefined;
     /**
      * Represents the validity state into which the MultiSelect is set.
      */
-    readonly validity: FormComponentValidity;
+    get validity(): FormComponentValidity;
     /**
      * @hidden
      */
-    protected readonly required: boolean;
-    protected readonly validityStyles: boolean;
+    protected get required(): boolean;
+    protected get validityStyles(): boolean;
     /**
      * @hidden
      */
@@ -151,7 +149,7 @@ export declare class MultiSelectWithoutContext extends React.Component<MultiSele
     /**
      * @hidden
      */
-    onTagDelete: (itemsToRemove: any[], event: React.MouseEvent<HTMLSpanElement, MouseEvent>) => void;
+    onTagDelete: (itemsToRemove: Array<any>, event: React.MouseEvent<HTMLSpanElement>) => void;
     /**
      * @hidden
      */

package/dist/npm/MultiSelect/MultiSelect.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 __());
@@ -23,7 +25,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.MultiSelect = exports.MultiSelectPropsContext = exports.MultiSelectWithoutContext = void 0;
 var React = require("react");
 var PropTypes = require("prop-types");
 var kendo_react_common_1 = require("@progress/kendo-react-common");
@@ -59,10 +71,12 @@ var MultiSelectWithoutContext = /** @class */ (function (_super) {
         _this.state = {
             activedescendant: settings_1.ActiveDescendant.PopupList
         };
+        _this._element = null;
         _this._valueItemsDuringOnChange = null;
-        _this._inputId = kendo_react_common_1.guid();
+        _this._inputId = (0, kendo_react_common_1.guid)();
         _this.base = new DropDownBase_1.default(_this);
         _this._tags = [];
+        _this._input = null;
         _this._skipFocusEvent = false;
         _this.scrollToFocused = false;
         /**
@@ -80,14 +94,14 @@ var MultiSelectWithoutContext = /** @class */ (function (_super) {
             var _a = _this.props, _b = _a.data, data = _b === void 0 ? [] : _b, dataItemKey = _a.dataItemKey, virtual = _a.virtual;
             var skip = virtual ? virtual.skip : 0;
             var dataItem = data[index - skip];
-            var indexInValue = _this.value.findIndex(function (i) { return utils_1.areSame(i, dataItem, dataItemKey); });
+            var indexInValue = _this.value.findIndex(function (i) { return (0, utils_1.areSame)(i, dataItem, dataItemKey); });
             var newItems = [];
             if (indexInValue !== -1) { // item is already selected
                 newItems = _this.value;
                 newItems.splice(indexInValue, 1);
             }
             else {
-                newItems = _this.value.concat([dataItem]);
+                newItems = __spreadArray(__spreadArray([], _this.value, true), [dataItem], false);
             }
             var text = _this.props.filter !== undefined ? _this.props.filter : _this.state.text;
             if (text) {
@@ -117,7 +131,7 @@ var MultiSelectWithoutContext = /** @class */ (function (_super) {
                 _this.focus();
             }
             var selected = _this.value;
-            utils_1.removeDataItems(selected, itemsToRemove, _this.props.dataItemKey);
+            (0, utils_1.removeDataItems)(selected, itemsToRemove, _this.props.dataItemKey);
             _this.triggerOnChange(selected, state);
             _this.applyState(state);
         };
@@ -184,7 +198,7 @@ var MultiSelectWithoutContext = /** @class */ (function (_super) {
                 _this.base.togglePopup(state);
             }
             var text = _this.props.filter !== undefined ? _this.props.filter : _this.state.text;
-            if (utils_1.isPresent(text) && text !== '') {
+            if ((0, utils_1.isPresent)(text) && text !== '') {
                 _this.base.filterChanged('', state);
             }
             if (_this.state.text) {
@@ -247,8 +261,8 @@ var MultiSelectWithoutContext = /** @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,
@@ -262,10 +276,10 @@ var MultiSelectWithoutContext = /** @class */ (function (_super) {
                 itemsCount: [data.length, _this.value.length]
             };
             var focusedType = _this.getFocusedState().focusedType;
-            var customItem = allowCustom && text && (React.createElement("div", { className: kendo_react_common_1.classNames('k-list', (_b = {},
-                    _b["k-list-" + (sizeMap[size] || size)] = size,
+            var customItem = allowCustom && text && (React.createElement("div", { className: (0, kendo_react_common_1.classNames)('k-list', (_b = {},
+                    _b["k-list-".concat(sizeMap[size] || size)] = size,
                     _b)), key: "customitem", onClick: _this.customItemSelect, onMouseDown: preventDefault },
-                React.createElement("div", { className: kendo_react_common_1.classNames('k-list-item k-custom-item', { 'k-focus': isCustom(focusedType) }), style: { fontStyle: 'italic' } },
+                React.createElement("div", { className: (0, kendo_react_common_1.classNames)('k-list-item k-custom-item', { 'k-focus': isCustom(focusedType) }), style: { fontStyle: 'italic' } },
                     text,
                     React.createElement("span", { className: "k-icon k-i-plus", style: { position: 'absolute', right: '0.5em' } }))));
             return (React.createElement(ListContainer_1.default, __assign({}, listContainerProps),
@@ -281,7 +295,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_1.default, { 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() }));
@@ -301,7 +315,7 @@ var MultiSelectWithoutContext = /** @class */ (function (_super) {
             }
             state.data.focusedIndex = undefined;
             _this.base.filterChanged('', state);
-            var newItems = _this.value.concat([item]);
+            var newItems = __spreadArray(__spreadArray([], _this.value, true), [item], false);
             _this.triggerOnChange(newItems, state);
             _this.base.togglePopup(state);
             _this.applyState(state);
@@ -377,7 +391,7 @@ var MultiSelectWithoutContext = /** @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(MultiSelectWithoutContext.prototype, "element", {
@@ -387,7 +401,7 @@ var MultiSelectWithoutContext = /** @class */ (function (_super) {
         get: function () {
             return this._element;
         },
-        enumerable: true,
+        enumerable: false,
         configurable: true
     });
     Object.defineProperty(MultiSelectWithoutContext.prototype, "value", {
@@ -410,7 +424,7 @@ var MultiSelectWithoutContext = /** @class */ (function (_super) {
             }
             return result;
         },
-        enumerable: true,
+        enumerable: false,
         configurable: true
     });
     Object.defineProperty(MultiSelectWithoutContext.prototype, "name", {
@@ -420,7 +434,7 @@ var MultiSelectWithoutContext = /** @class */ (function (_super) {
         get: function () {
             return this.props.name;
         },
-        enumerable: true,
+        enumerable: false,
         configurable: true
     });
     Object.defineProperty(MultiSelectWithoutContext.prototype, "validity", {
@@ -438,7 +452,7 @@ var MultiSelectWithoutContext = /** @class */ (function (_super) {
                 valueMissing: this.value === null
             };
         },
-        enumerable: true,
+        enumerable: false,
         configurable: true
     });
     Object.defineProperty(MultiSelectWithoutContext.prototype, "required", {
@@ -450,7 +464,7 @@ var MultiSelectWithoutContext = /** @class */ (function (_super) {
                 ? this.props.required
                 : MultiSelectWithoutContext.defaultProps.required;
         },
-        enumerable: true,
+        enumerable: false,
         configurable: true
     });
     Object.defineProperty(MultiSelectWithoutContext.prototype, "validityStyles", {
@@ -459,7 +473,7 @@ var MultiSelectWithoutContext = /** @class */ (function (_super) {
                 ? this.props.validityStyles
                 : MultiSelectWithoutContext.defaultProps.validityStyles;
         },
-        enumerable: true,
+        enumerable: false,
         configurable: true
     });
     /**
@@ -552,7 +566,7 @@ var MultiSelectWithoutContext = /** @class */ (function (_super) {
         var tagsToRender = [];
         if (tags === undefined) {
             this.value.forEach(function (item) {
-                tagsToRender.push({ text: utils_1.getItemValue(item, textField), data: [item] });
+                tagsToRender.push({ text: (0, utils_1.getItemValue)(item, textField), data: [item] });
             });
         }
         else {
@@ -561,10 +575,10 @@ var MultiSelectWithoutContext = /** @class */ (function (_super) {
         this.setItems(tagsToRender, this._tags);
         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: kendo_react_common_1.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,
+        var component = (React.createElement("div", { ref: this.componentRef, className: (0, kendo_react_common_1.classNames)('k-multiselect k-input', 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'] = focused && !disabled,
                 _a['k-invalid'] = !isValid,
                 _a['k-disabled'] = disabled,
@@ -572,16 +586,16 @@ var MultiSelectWithoutContext = /** @class */ (function (_super) {
                 _a['k-required'] = this.required,
                 _a)), style: !label
                 ? style
-                : __assign({}, style, { width: undefined }), dir: dir, onFocus: this.handleFocus, onBlur: this.handleBlur, onClick: this.handleWrapperClick, onMouseDown: utils_1.preventDefaultNonInputs },
-            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,
+                : __assign(__assign({}, style), { width: undefined }), dir: dir, onFocus: this.handleFocus, onBlur: this.handleBlur, onClick: this.handleWrapperClick, onMouseDown: utils_1.preventDefaultNonInputs },
+            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-' + this.base.guid },
-                tagsToRender.length > 0 && React.createElement(TagList_1.default, { tagRender: this.props.tagRender, onTagDelete: this.onTagDelete, data: tagsToRender, guid: this.base.guid, focused: focusedTag ? tagsToRender.find(function (t) { return utils_1.matchTags(t, focusedTag, dataItemKey); }) : undefined, size: size }),
+                tagsToRender.length > 0 && React.createElement(TagList_1.default, { tagRender: this.props.tagRender, onTagDelete: this.onTagDelete, data: tagsToRender, guid: this.base.guid, focused: focusedTag ? tagsToRender.find(function (t) { return (0, utils_1.matchTags)(t, focusedTag, dataItemKey); }) : undefined, size: size }),
                 this.renderSearchbar(id)),
             loading && React.createElement("span", { className: "k-icon k-i-loading k-input-loading-icon" }),
             clearButton && React.createElement(ClearButton_1.default, { onClick: this.clearButtonClick }),
             this.renderListContainer()));
-        return label ? (React.createElement(kendo_react_labels_1.FloatingLabel, { label: label, editorId: id, editorValue: text || utils_1.getItemValue(this.value[0], textField), editorValid: isValid, editorDisabled: disabled, style: { width: style ? style.width : undefined }, children: component })) : component;
+        return label ? (React.createElement(kendo_react_labels_1.FloatingLabel, { label: label, editorId: id, editorValue: text || (0, utils_1.getItemValue)(this.value[0], textField), editorValid: isValid, editorDisabled: disabled, style: { width: style ? style.width : undefined }, children: component })) : component;
     };
     MultiSelectWithoutContext.prototype.renderSearchbar = function (id) {
         var _a = this.state, activedescendant = _a.activedescendant, focusedTag = _a.focusedTag;
@@ -591,9 +605,9 @@ var MultiSelectWithoutContext = /** @class */ (function (_super) {
         var focusedIndex = this.getFocusedState().focusedIndex;
         var placeholderToShow = this.value.length === 0 && !text ? placeholder : undefined;
         var ariaActivedescendant = activedescendant === settings_1.ActiveDescendant.TagsList && focusedTag !== undefined ?
-            "tag-" + this.base.guid + "-" + focusedTag.text.replace(/\s+/g, '-') :
-            "option-" + this.base.guid + "-" + focusedIndex;
-        return (React.createElement(SearchBar_1.default, { 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_1.default, { 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;
@@ -601,7 +615,7 @@ var MultiSelectWithoutContext = /** @class */ (function (_super) {
         var tags = this._tags;
         var itemsKey = this.props.dataItemKey;
         var focusedIndex = focusedTag ?
-            tags.findIndex(function (t) { return utils_1.matchTags(t, focusedTag, itemsKey); }) : -1;
+            tags.findIndex(function (t) { return (0, utils_1.matchTags)(t, focusedTag, itemsKey); }) : -1;
         var newFocusedTag = undefined;
         var hasFocused = focusedIndex !== -1;
         if (keyCode === kendo_react_common_1.Keys.left) {
@@ -631,19 +645,19 @@ var MultiSelectWithoutContext = /** @class */ (function (_super) {
         else if (keyCode === kendo_react_common_1.Keys.delete) {
             if (hasFocused) {
                 var items = this.value;
-                utils_1.removeDataItems(items, tags[focusedIndex].data, itemsKey);
+                (0, utils_1.removeDataItems)(items, tags[focusedIndex].data, itemsKey);
                 this.triggerOnChange(items, state);
             }
         }
         else if (keyCode === kendo_react_common_1.Keys.backspace) {
             var items = this.value;
             if (hasFocused) {
-                utils_1.removeDataItems(items, tags[focusedIndex].data, itemsKey);
+                (0, utils_1.removeDataItems)(items, tags[focusedIndex].data, itemsKey);
                 this.triggerOnChange(items, state);
             }
             else if (!hasFocused && tags.length) {
                 var removed = tags.pop();
-                utils_1.removeDataItems(items, removed.data, itemsKey);
+                (0, utils_1.removeDataItems)(items, removed.data, itemsKey);
                 this.triggerOnChange(items, state);
             }
         }
@@ -655,7 +669,7 @@ var MultiSelectWithoutContext = /** @class */ (function (_super) {
     };
     MultiSelectWithoutContext.prototype.triggerOnChange = function (items, state) {
         if (this.props.value === undefined) {
-            state.data.value = items.slice();
+            state.data.value = __spreadArray([], items, true);
         }
         this._valueItemsDuringOnChange = [];
         this.setItems(items, this._valueItemsDuringOnChange);
@@ -700,7 +714,7 @@ var MultiSelectWithoutContext = /** @class */ (function (_super) {
         }
         else if (selected.length) {
             var last_1 = selected[selected.length - 1];
-            focusedInd = data.findIndex(function (i) { return utils_1.areSame(i, last_1, dataItemKey); });
+            focusedInd = data.findIndex(function (i) { return (0, utils_1.areSame)(i, last_1, dataItemKey); });
             if (data[focusedInd] !== undefined) {
                 return {
                     focusedIndex: focusedInd + skip,
@@ -728,14 +742,14 @@ var MultiSelectWithoutContext = /** @class */ (function (_super) {
     /**
      * @hidden
      */
-    MultiSelectWithoutContext.propTypes = __assign({}, DropDownBase_1.default.propTypes, { autoClose: PropTypes.bool, value: PropTypes.arrayOf(PropTypes.any), defaultValue: PropTypes.arrayOf(PropTypes.any), dataItemKey: PropTypes.string, placeholder: PropTypes.string, tags: PropTypes.arrayOf(PropTypes.shape({
+    MultiSelectWithoutContext.propTypes = __assign(__assign({}, DropDownBase_1.default.propTypes), { autoClose: PropTypes.bool, value: PropTypes.arrayOf(PropTypes.any), defaultValue: PropTypes.arrayOf(PropTypes.any), dataItemKey: PropTypes.string, placeholder: PropTypes.string, tags: PropTypes.arrayOf(PropTypes.shape({
             text: PropTypes.string,
             data: PropTypes.arrayOf(PropTypes.any)
         })), tagRender: PropTypes.func, id: PropTypes.string, ariaLabelledBy: PropTypes.string, ariaDescribedBy: PropTypes.string });
     /**
      * @hidden
      */
-    MultiSelectWithoutContext.defaultProps = __assign({}, DropDownBase_1.default.defaultProps, { autoClose: true, required: false, size: 'medium', rounded: 'medium', fillMode: 'solid' });
+    MultiSelectWithoutContext.defaultProps = __assign(__assign({}, DropDownBase_1.default.defaultProps), { autoClose: true, required: false, size: 'medium', rounded: 'medium', fillMode: 'solid' });
     return MultiSelectWithoutContext;
 }(React.Component));
 exports.MultiSelectWithoutContext = MultiSelectWithoutContext;
@@ -745,7 +759,7 @@ exports.MultiSelectWithoutContext = MultiSelectWithoutContext;
  *
  * For more information, refer to the [Dropdowns Props Context]({% slug props-context_dropdowns %}) article.
  */
-exports.MultiSelectPropsContext = kendo_react_common_1.createPropsContext();
+exports.MultiSelectPropsContext = (0, kendo_react_common_1.createPropsContext)();
 /* eslint-disable @typescript-eslint/no-redeclare -- intentionally naming the component the same as the type */
 /**
  * Represents the [KendoReact MultiSelect component]({% slug overview_multiselect %}).
@@ -772,5 +786,5 @@ exports.MultiSelectPropsContext = kendo_react_common_1.createPropsContext();
  * ReactDOM.render(<App />, document.querySelector('my-app'));
  * ```
  */
-exports.MultiSelect = kendo_react_common_1.withPropsContext(exports.MultiSelectPropsContext, MultiSelectWithoutContext);
+exports.MultiSelect = (0, kendo_react_common_1.withPropsContext)(exports.MultiSelectPropsContext, MultiSelectWithoutContext);
 exports.MultiSelect.displayName = 'KendoReactMultiSelect';

package/dist/npm/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/npm/MultiSelect/TagList.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,7 +31,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(kendo_react_buttons_1.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(kendo_react_buttons_1.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/npm/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/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");
@@ -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

@@ -9,9 +9,9 @@ export declare const getValueMap: (value: any, idGetter: any) => {};
  * @returns {any[]}
  */
 export declare const getMultiSelectTreeValue: (data: any, options: {
-    subItemsField?: string;
+    subItemsField?: string | undefined;
     dataItemKey: string;
     items: any;
-    value: any[];
+    value: Array<any>;
     operation: MultiSelectTreeChangeEventOperation;
 }) => any[];