@progress/kendo-react-dropdowns 5.13.1 → 5.14.0-dev.202305100720

package/dist/npm/DropDownList/DropDownList.js

@@ -175,7 +175,7 @@ var DropDownListWithoutContext = /** @class */ (function (_super) {
         };
         _this.renderListFilter = function () {
             var filterText = _this.props.filter !== undefined ? _this.props.filter : _this.state.text;
-            return _this.props.filterable && (React.createElement(ListFilter_1.default, { value: filterText, ref: function (filter) { return _this._filterInput = filter && filter.input; }, onChange: _this.handleListFilterChange, onKeyDown: _this.handleKeyDown, size: _this.props.size, rounded: _this.props.rounded, fillMode: _this.props.fillMode }));
+            return _this.props.filterable && (React.createElement(ListFilter_1.default, { value: filterText, ref: function (filter) { return _this._filterInput = filter && filter.element; }, onChange: _this.handleListFilterChange, onKeyDown: _this.handleKeyDown, size: _this.props.size, rounded: _this.props.rounded, fillMode: _this.props.fillMode }));
         };
         _this.renderDefaultItem = function () {
             var _a = _this.props, textField = _a.textField, defaultItem = _a.defaultItem, dataItemKey = _a.dataItemKey;
@@ -344,7 +344,7 @@ var DropDownListWithoutContext = /** @class */ (function (_super) {
         };
         _this.handleListFilterChange = function (event) {
             var state = _this.base.initState();
-            state.syntheticEvent = event;
+            state.syntheticEvent = event.syntheticEvent;
             if (_this.props.filter === undefined) {
                 state.data.text = event.target.value;
             }

package/dist/npm/DropDownTree/DropDownTree.js

@@ -120,9 +120,9 @@ exports.DropDownTree = React.forwardRef(function (directProps, ref) {
     var _k = React.useState(false), open = _k[0], setOpen = _k[1];
     var isOpen = opened !== undefined ? opened : open;
     var _l = React.useState(false), focused = _l[0], setFocused = _l[1];
-    var _m = React.useState(''), filter = _m[0], setFilter = _m[1];
-    var _o = React.useState(), windowWidth = _o[0], setWindowWidth = _o[1];
+    var _m = React.useState(), windowWidth = _m[0], setWindowWidth = _m[1];
     var isAdaptive = !!(windowWidth && windowWidth <= constants_1.MOBILE_MEDIUM_DEVISE && props.adaptive);
+    var _o = React.useState(''), filter = _o[0], setFilter = _o[1];
     var setValidity = React.useCallback(function () {
         if (selectRef.current && selectRef.current.setCustomValidity) {
             selectRef.current.setCustomValidity(validity.valid
@@ -163,7 +163,8 @@ exports.DropDownTree = React.forwardRef(function (directProps, ref) {
                 setOpen(false);
                 if (isAdaptive) {
                     setTimeout(function () {
-                        focusElement(adaptiveInputRef.current);
+                        var _a;
+                        focusElement((_a = adaptiveInputRef.current) === null || _a === void 0 ? void 0 : _a.element);
                     }, 300);
                 }
             }
@@ -186,9 +187,10 @@ exports.DropDownTree = React.forwardRef(function (directProps, ref) {
         window.setTimeout(function () { return skipFocusRef.current = false; }, 0);
     }, []);
     var onWrapperKeyDown = React.useCallback(function (event) {
+        var _a, _b;
         var keyCode = event.keyCode, altKey = event.altKey;
         var treeview = treeViewRef.current && treeViewRef.current.element;
-        if (!target.current || (event.isDefaultPrevented() && inputRef.current === event.target)) {
+        if (!target.current || (event.isDefaultPrevented() && ((_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.element) === event.target)) {
             return;
         }
         var ev = {
@@ -205,17 +207,17 @@ exports.DropDownTree = React.forwardRef(function (directProps, ref) {
                 (keyCode === kendo_react_common_1.Keys.up || keyCode === kendo_react_common_1.Keys.down ||
                     keyCode === kendo_react_common_1.Keys.left || keyCode === kendo_react_common_1.Keys.right ||
                     keyCode === kendo_react_common_1.Keys.home || keyCode === kendo_react_common_1.Keys.end)) {
-                if (keyCode === kendo_react_common_1.Keys.up && inputRef.current) {
+                if (keyCode === kendo_react_common_1.Keys.up && ((_b = inputRef.current) === null || _b === void 0 ? void 0 : _b.element)) {
                     var items = Array.from(treeview.querySelectorAll('.k-treeview-item'));
                     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); });
+                        return switchFocus(function () { var _a; focusElement((_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.element); });
                     }
                 }
                 switchFocus(kendo_react_common_1.noop);
             }
             else if (keyCode === kendo_react_common_1.Keys.down) {
-                switchFocus(function () { focusElement(inputRef.current || treeview); });
+                switchFocus(function () { var _a; focusElement(((_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.element) || treeview); });
             }
         }
         else {
@@ -241,12 +243,13 @@ exports.DropDownTree = React.forwardRef(function (directProps, ref) {
         }
     }, []);
     var onPopupOpened = React.useCallback(function () {
+        var _a;
         if (!focused && isOpen && !opened) {
             closePopup({ target: target.current });
         }
         else {
             if (props.filterable) {
-                focusElement(inputRef.current);
+                focusElement((_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.element);
             }
             else {
                 focusElement(treeViewRef.current && treeViewRef.current.element);
@@ -296,7 +299,8 @@ exports.DropDownTree = React.forwardRef(function (directProps, ref) {
         }
         if (isAdaptive) {
             setTimeout(function () {
-                focusElement(adaptiveInputRef.current);
+                var _a;
+                focusElement((_a = adaptiveInputRef.current) === null || _a === void 0 ? void 0 : _a.element);
             }, 300);
         }
     }, [focused, isAdaptive]);
@@ -354,7 +358,7 @@ exports.DropDownTree = React.forwardRef(function (directProps, ref) {
             var filterDesc = { field: props.textField, operator: 'contains', value: event.target.value };
             var ev = {
                 filter: filterDesc,
-                syntheticEvent: event,
+                syntheticEvent: event.syntheticEvent,
                 nativeEvent: event.nativeEvent,
                 target: target.current
             };
@@ -365,7 +369,7 @@ exports.DropDownTree = React.forwardRef(function (directProps, ref) {
         }
     }, [props.onFilterChange, props.filter, props.textField]);
     var renderAdaptiveListContainer = function () {
-        var mobileFilter = props.filterable ? (React.createElement(ListFilter_1.default, { value: props.filter === undefined ? filter : props.filter, inputRef: adaptiveInputRef, onChange: onFilterChange, onKeyDown: onInputKeyDown, size: size, rounded: rounded, fillMode: fillMode })) : null;
+        var mobileFilter = props.filterable ? (React.createElement(ListFilter_1.default, { value: props.filter === undefined ? filter : props.filter, ref: adaptiveInputRef, onChange: onFilterChange, onKeyDown: onInputKeyDown, size: size, rounded: rounded, fillMode: fillMode })) : null;
         var actionSheetProps = {
             adaptiveTitle: props.adaptiveTitle,
             expand: isOpen,
@@ -416,8 +420,8 @@ exports.DropDownTree = React.forwardRef(function (directProps, ref) {
             React.createElement(kendo_react_buttons_1.Button, { tabIndex: -1, type: "button", "aria-label": "select", className: "k-input-button", size: size, fillMode: fillMode, themeColor: "base", rounded: null, icon: "caret-alt-down", svgIcon: kendo_svg_icons_1.caretAltDownIcon }),
             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 })),
-            !isAdaptive && React.createElement(kendo_react_popup_1.Popup, { className: (0, kendo_react_common_1.classNames)(popupSettings.className, { 'k-rtl': dir === 'rtl' }), popupClass: (0, kendo_react_common_1.classNames)(popupSettings.popupClass, 'k-list-container', 'k-dropdowntree-popup'), style: popupStyles, animate: popupSettings.animate, anchor: elementRef.current, show: isOpen, onOpen: onPopupOpened, onClose: onPopupClosed, appendTo: popupSettings.appendTo },
-                props.filterable && (React.createElement(ListFilter_1.default, { value: props.filter === undefined ? filter : props.filter, inputRef: inputRef, onChange: onFilterChange, onKeyDown: onInputKeyDown, size: size, rounded: rounded, fillMode: fillMode })),
+            !isAdaptive && React.createElement(kendo_react_popup_1.Popup, { className: (0, kendo_react_common_1.classNames)(popupSettings.className, { 'k-rtl': dir === 'rtl' }), popupClass: (0, kendo_react_common_1.classNames)(popupSettings.popupClass, 'k-dropdowntree-popup'), style: popupStyles, animate: popupSettings.animate, anchor: elementRef.current, show: isOpen, onOpen: onPopupOpened, onClose: onPopupClosed, appendTo: popupSettings.appendTo },
+                props.filterable && (React.createElement(ListFilter_1.default, { value: props.filter === undefined ? filter : props.filter, ref: inputRef, onChange: onFilterChange, onKeyDown: onInputKeyDown, size: size, rounded: rounded, fillMode: fillMode })),
                 data.length > 0 ? (React.createElement(kendo_react_treeview_1.TreeView, { ref: treeViewRef, tabIndex: tabIndex, data: treeViewData, focusIdField: dataItemKey, textField: props.textField, selectField: selectField, expandField: props.expandField, childrenField: subItemsField, expandIcons: true, onItemClick: onChange, onExpandChange: onExpand, size: size, item: props.item })) : (React.createElement(NoData, null, localization.toLanguageString(messages_1.nodata, messages_1.messages[messages_1.nodata]))))),
         isAdaptive && renderAdaptiveListContainer()));
     return label ? (React.createElement(kendo_react_labels_1.FloatingLabel, { label: label, editorValue: currentValueText, editorPlaceholder: placeholder, editorValid: isValid, editorDisabled: disabled, editorId: id, style: { width: style ? style.width : undefined }, children: dropdowntree, dir: dir })) : dropdowntree;

package/dist/npm/MultiColumnComboBox/MultiColumnComboBox.js

@@ -25,6 +25,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.MultiColumnComboBox = exports.MultiColumnComboBoxPropsContext = void 0;
 var React = require("react");
 var PropTypes = require("prop-types");
+var kendo_react_popup_1 = require("@progress/kendo-react-popup");
 var MultiColumnList_1 = require("./../common/MultiColumnList");
 var kendo_react_common_1 = require("@progress/kendo-react-common");
 var ComboBox_1 = require("../ComboBox/ComboBox");
@@ -159,7 +160,8 @@ exports.MultiColumnComboBox = React.forwardRef(function (directProps, ref) {
         ;
     }, [props.data]);
     var List = React.useCallback(function (listProps) { return React.createElement(MultiColumnList_1.MultiColumnList, __assign({}, listProps)); }, []);
-    return (React.createElement(ComboBox_1.ComboBox, __assign({}, other, { list: List, popupSettings: __assign(__assign({ width: popupWidth }, popupSettings), { popupClass: 'k-dropdowngrid-popup k-reset', className: popupSettings.className }), ref: comboBoxRef, header: header, itemRender: itemRender, groupHeaderItemRender: props.groupHeaderItemRender, size: props.size, rounded: props.rounded, fillMode: props.fillMode, groupMode: props.groupMode, groupField: props.groupField, isMultiColumn: true, onOpen: onOpenHandler, onClose: onCloseHandler, onFocus: onFocusHandler, onBlur: onBlurHandler, onChange: onChangeHandler, onFilterChange: onFilterChangeHandler, onPageChange: onPageChangeHandler, onGroupScroll: onGroupScroll, className: (0, kendo_react_common_1.classNames)('k-dropdowngrid', className), required: props.required, adaptive: props.adaptive, adaptiveFilter: props.adaptiveFilter, adaptiveTitle: props.adaptiveTitle })));
+    return (React.createElement(kendo_react_popup_1.PopupPropsContext.Provider, { value: function (PopupProps) { return (__assign(__assign({}, PopupProps), { popupClass: 'k-dropdowngrid-popup' })); } },
+        React.createElement(ComboBox_1.ComboBox, __assign({}, other, { list: List, popupSettings: __assign(__assign({ width: popupWidth }, popupSettings), { className: popupSettings.className }), ref: comboBoxRef, header: header, itemRender: itemRender, groupHeaderItemRender: props.groupHeaderItemRender, size: props.size, rounded: props.rounded, fillMode: props.fillMode, groupMode: props.groupMode, groupField: props.groupField, isMultiColumn: true, onOpen: onOpenHandler, onClose: onCloseHandler, onFocus: onFocusHandler, onBlur: onBlurHandler, onChange: onChangeHandler, onFilterChange: onFilterChangeHandler, onPageChange: onPageChangeHandler, onGroupScroll: onGroupScroll, className: (0, kendo_react_common_1.classNames)('k-dropdowngrid', className), required: props.required, adaptive: props.adaptive, adaptiveFilter: props.adaptiveFilter, adaptiveTitle: props.adaptiveTitle, footer: props.footer, footerClassName: 'k-table-footer' }))));
 });
 var propTypes = __assign(__assign({}, ComboBox_1.ComboBoxWithoutContext.propTypes), { columns: PropTypes.any.isRequired });
 var defaultProps = {

package/dist/npm/MultiSelect/MultiSelect.js

@@ -306,7 +306,7 @@ var MultiSelectWithoutContext = /** @class */ (function (_super) {
             var _b = _this.state.windowWidth, windowWidth = _b === void 0 ? 0 : _b;
             var mobileText = filter !== undefined ? filter : _this.state.text;
             _this.localization = (0, kendo_react_intl_1.provideLocalizationService)(_this);
-            var mobileFilter = filterable ? (React.createElement(ListFilter_1.default, { value: mobileText, ref: function (adaptiveFilter) { return _this._adaptiveInput = adaptiveFilter && adaptiveFilter.input; }, onChange: _this.onChangeHandler, onKeyDown: _this.onInputKeyDown, size: _this.props.size, rounded: _this.props.rounded, fillMode: _this.props.fillMode })) : null;
+            var mobileFilter = filterable ? (React.createElement(ListFilter_1.default, { value: mobileText, ref: function (adaptiveFilter) { return _this._adaptiveInput = adaptiveFilter && adaptiveFilter.element; }, onChange: _this.onChangeHandler, onKeyDown: _this.onInputKeyDown, size: _this.props.size, rounded: _this.props.rounded, fillMode: _this.props.fillMode })) : null;
             var actionSheetProps = {
                 adaptiveTitle: adaptiveTitle,
                 expand: _this.opened,
@@ -322,8 +322,8 @@ var MultiSelectWithoutContext = /** @class */ (function (_super) {
             };
             return (React.createElement(AdaptiveMode_1.AdaptiveMode, __assign({}, actionSheetProps),
                 React.createElement(kendo_react_layout_1.ActionSheetContent, { className: '!k-overflow-hidden' },
-                    React.createElement("div", { className: 'k-list-container' },
-                        React.createElement("div", { className: 'k-list k-list-lg' }, _this.listContainerContent())))));
+                    filterable && React.createElement(ListFilter_1.default, { value: mobileText, ref: function (adaptiveFilter) { return _this._adaptiveInput = adaptiveFilter && adaptiveFilter.element; }, onChange: _this.onChangeHandler, onKeyDown: _this.onInputKeyDown, size: _this.props.size, rounded: _this.props.rounded, fillMode: _this.props.fillMode }),
+                    _this.listContainerContent())));
         };
         _this.closePopup = function (event) {
             var state = _this.base.initState();

package/dist/npm/MultiSelectTree/MultiSelectTree.js

@@ -102,9 +102,9 @@ exports.MultiSelectTree = React.forwardRef(function (directProps, ref) {
     var _o = React.useState(), focusedTagState = _o[0], setFocusedTagState = _o[1];
     var _p = React.useState(false), openState = _p[0], setOpenState = _p[1];
     var _q = React.useState(false), focusedState = _q[0], setFocusedState = _q[1];
-    var _r = React.useState(''), filterState = _r[0], setFilterState = _r[1];
-    var _s = React.useState(), windowWidth = _s[0], setWindowWidth = _s[1];
-    var _t = React.useState([]), currentTreeValue = _t[0], setCurrentTreeValue = _t[1];
+    var _r = React.useState(), windowWidth = _r[0], setWindowWidth = _r[1];
+    var _s = React.useState([]), currentTreeValue = _s[0], setCurrentTreeValue = _s[1];
+    var _t = React.useState(''), filterState = _t[0], setFilterState = _t[1];
     var isAdaptive = !!(windowWidth && windowWidth <= constants_1.MOBILE_MEDIUM_DEVISE && props.adaptive);
     var isOpen = opened !== undefined ? opened : openState;
     var hasValue = Boolean(Array.isArray(value) && value.length);
@@ -174,12 +174,13 @@ exports.MultiSelectTree = React.forwardRef(function (directProps, ref) {
                 setCurrentTreeValue(value || []);
                 if (isAdaptive) {
                     setTimeout(function () {
-                        focusElement(adaptiveInputRef.current);
+                        var _a;
+                        focusElement((_a = adaptiveInputRef.current) === null || _a === void 0 ? void 0 : _a.element);
                     }, 300);
                 }
             }
         }
-    }, [isOpen, opened, onOpen, isAdaptive]);
+    }, [isOpen, opened, onOpen, isAdaptive, adaptiveInputRef]);
     var closePopup = React.useCallback(function (event) {
         if (isOpen) {
             if (onClose) {
@@ -202,12 +203,13 @@ exports.MultiSelectTree = React.forwardRef(function (directProps, ref) {
         }
     }, [switchFocus]);
     var onPopupOpened = React.useCallback(function () {
+        var _a;
         if (!focusedState && isOpen) {
             closePopup({ target: targetRef.current });
         }
         else {
             if (props.filterable) {
-                focusElement(inputRef.current);
+                focusElement((_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.element);
             }
             else {
                 focusElement(treeViewRef.current && treeViewRef.current.element);
@@ -270,9 +272,10 @@ exports.MultiSelectTree = React.forwardRef(function (directProps, ref) {
         }
     }, [isOpen, openPopup]);
     var onWrapperKeyDown = React.useCallback(function (event) {
+        var _a, _b;
         var keyCode = event.keyCode, altKey = event.altKey;
         var treeviewElement = treeViewRef.current && treeViewRef.current.element;
-        if (!targetRef.current || (event.isDefaultPrevented() && inputRef.current === event.target)) {
+        if (!targetRef.current || (event.isDefaultPrevented() && ((_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.element) === event.target)) {
             return;
         }
         var ev = {
@@ -331,17 +334,17 @@ exports.MultiSelectTree = React.forwardRef(function (directProps, ref) {
                 (keyCode === kendo_react_common_1.Keys.up || keyCode === kendo_react_common_1.Keys.down ||
                     keyCode === kendo_react_common_1.Keys.left || keyCode === kendo_react_common_1.Keys.right ||
                     keyCode === kendo_react_common_1.Keys.home || keyCode === kendo_react_common_1.Keys.end)) {
-                if (keyCode === kendo_react_common_1.Keys.up && inputRef.current) {
+                if (keyCode === kendo_react_common_1.Keys.up && ((_b = inputRef.current) === null || _b === void 0 ? void 0 : _b.element)) {
                     var items = Array.from(treeviewElement.querySelectorAll('.k-treeview-item'));
                     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); });
+                        return switchFocus(function () { var _a; focusElement((_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.element); });
                     }
                 }
                 switchFocus(kendo_react_common_1.noop);
             }
             else if (keyCode === kendo_react_common_1.Keys.down) {
-                switchFocus(function () { focusElement(inputRef.current || treeviewElement); });
+                switchFocus(function () { var _a; focusElement(((_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.element) || treeviewElement); });
             }
         }
         else {
@@ -375,9 +378,10 @@ exports.MultiSelectTree = React.forwardRef(function (directProps, ref) {
         event.preventDefault();
     }, [changeValue, closePopup]);
     var onTagDelete = React.useCallback(function (itemsToRemove, event) {
+        var _a;
         closePopup({ target: targetRef.current });
         if (!focusedState) {
-            focusElement(inputRef.current);
+            focusElement((_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.element);
         }
         changeValue({
             syntheticEvent: event,
@@ -403,7 +407,7 @@ exports.MultiSelectTree = React.forwardRef(function (directProps, ref) {
             var filterDesc = { field: props.textField, operator: 'contains', value: event.target.value };
             var ev = {
                 filter: filterDesc,
-                syntheticEvent: event,
+                syntheticEvent: event.syntheticEvent,
                 nativeEvent: event.nativeEvent,
                 target: targetRef.current
             };
@@ -430,7 +434,7 @@ exports.MultiSelectTree = React.forwardRef(function (directProps, ref) {
         event.preventDefault();
     }, [props.onCancel, closePopup]);
     var renderAdaptiveListContainer = function () {
-        var mobileFilter = props.filterable ? (React.createElement(ListFilter_1.default, { value: props.filter === undefined ? filterState : props.filter, inputRef: adaptiveInputRef, onChange: onFilterChange, onKeyDown: onInputKeyDown, size: size, rounded: rounded, fillMode: fillMode })) : null;
+        var mobileFilter = props.filterable ? (React.createElement(ListFilter_1.default, { value: props.filter === undefined ? filterState : props.filter, ref: adaptiveInputRef, onChange: onFilterChange, onKeyDown: onInputKeyDown, size: size, rounded: rounded, fillMode: fillMode })) : null;
         var actionSheetProps = {
             adaptiveTitle: props.adaptiveTitle,
             expand: isOpen,
@@ -462,7 +466,7 @@ exports.MultiSelectTree = React.forwardRef(function (directProps, ref) {
     var size = props.size, rounded = props.rounded, fillMode = props.fillMode;
     var currentTagsToRender = isAdaptive && isOpen ? currentTreeValue : tagsToRenderRef.current;
     var multiselecttree = (React.createElement(React.Fragment, null,
-        React.createElement("span", { className: (0, kendo_react_common_1.classNames)('k-multiselect k-input', props.className, (_a = {},
+        React.createElement("span", { className: (0, kendo_react_common_1.classNames)('k-multiselecttree 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,
@@ -471,7 +475,7 @@ exports.MultiSelectTree = React.forwardRef(function (directProps, ref) {
                 _a['k-disabled'] = disabled,
                 _a['k-loading'] = props.loading,
                 _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: "combobox", "aria-haspopup": "true", "aria-expanded": isOpen, "aria-disabled": disabled, "aria-label": label, "aria-labelledby": props.ariaLabelledBy, "aria-describedby": props.ariaDescribedBy, "aria-required": props.required, onClick: disabled ? undefined : onWrapperClick },
+                _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: "combobox", "aria-haspopup": "tree", "aria-expanded": isOpen, "aria-disabled": disabled, "aria-label": label, "aria-labelledby": props.ariaLabelledBy, "aria-describedby": props.ariaDescribedBy ? props.ariaDescribedBy : 'tagslist-' + id, "aria-required": props.required, onClick: disabled ? undefined : onWrapperClick },
             React.createElement("div", { id: 'tagslist-' + id, 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)) }, currentTagsToRender.length > 0 && (React.createElement(TagList_1.default, { tag: props.tag, onTagDelete: onTagDelete, data: currentTagsToRender, guid: id, focused: focusedTagState ? tagsToRenderRef.current.find(function (t) { return (0, utils_1.matchTags)(t, focusedTagState, dataItemKey); }) : undefined, size: size }))),
@@ -483,8 +487,8 @@ exports.MultiSelectTree = React.forwardRef(function (directProps, ref) {
                 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 })),
-            !isAdaptive && React.createElement(kendo_react_popup_1.Popup, { popupClass: (0, kendo_react_common_1.classNames)(popupSettings.popupClass, 'k-list-container', 'k-multiselecttree-popup'), 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 })),
+            !isAdaptive && React.createElement(kendo_react_popup_1.Popup, { popupClass: (0, kendo_react_common_1.classNames)(popupSettings.popupClass, 'k-multiselecttree-popup'), 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, ref: 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]))))),
         isAdaptive && renderAdaptiveListContainer()));
     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;

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

@@ -1,12 +1,12 @@
 import * as React from 'react';
+import { TextBoxChangeEvent, TextBoxHandle } from '@progress/kendo-react-inputs';
 /**
  * @hidden
  */
 export interface ListFilterProps {
-    value?: string;
-    inputRef?: any;
+    value?: string | number | readonly string[] | undefined;
     tabIndex?: number;
-    onChange?: React.ChangeEventHandler<HTMLInputElement>;
+    onChange?: (event: TextBoxChangeEvent) => void;
     onKeyDown?: React.KeyboardEventHandler<HTMLInputElement>;
     size?: null | 'small' | 'medium' | 'large';
     rounded?: null | 'small' | 'medium' | 'large' | 'full';
@@ -15,7 +15,5 @@ export interface ListFilterProps {
 /**
  * @hidden
  */
-export default class ListFilter extends React.Component<ListFilterProps, {}> {
-    input: HTMLInputElement | null;
-    render(): JSX.Element;
-}
+declare const ListFilter: React.ForwardRefExoticComponent<ListFilterProps & React.RefAttributes<TextBoxHandle | null>>;
+export default ListFilter;

package/dist/npm/common/ListFilter.js

@@ -1,47 +1,39 @@
 "use strict";
-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 (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
-        return extendStatics(d, b);
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
     };
-    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 __());
-    };
-})();
+    return __assign.apply(this, arguments);
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 var React = require("react");
+var PropTypes = require("prop-types");
+var kendo_react_inputs_1 = require("@progress/kendo-react-inputs");
 var kendo_svg_icons_1 = require("@progress/kendo-svg-icons");
 var kendo_react_common_1 = require("@progress/kendo-react-common");
-var sizeMap = kendo_react_common_1.kendoThemeMaps.sizeMap, roundedMap = kendo_react_common_1.kendoThemeMaps.roundedMap;
 /**
  * @hidden
  */
-var ListFilter = /** @class */ (function (_super) {
-    __extends(ListFilter, _super);
-    function ListFilter() {
-        var _this = _super !== null && _super.apply(this, arguments) || this;
-        _this.input = null;
-        return _this;
-    }
-    ListFilter.prototype.render = function () {
-        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: (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(kendo_react_common_1.IconWrap, { className: "k-input-icon", name: 'search', icon: kendo_svg_icons_1.searchIcon }),
-                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(); } }))));
-    };
-    return ListFilter;
-}(React.Component));
+var ListFilter = React.forwardRef(function (props, ref) {
+    var input = React.useRef(null);
+    React.useImperativeHandle(ref, function () { return input.current; });
+    return (React.createElement("div", { className: "k-list-filter" },
+        React.createElement(kendo_react_inputs_1.TextBox, __assign({}, props, { ref: input, value: props.value || '', onChange: props.onChange, onKeyDown: props.onKeyDown, tabIndex: props.tabIndex, onClick: function (e) { return e.stopPropagation(); }, size: props.size, fillMode: props.fillMode, rounded: props.rounded, prefix: function () { return (React.createElement(kendo_react_inputs_1.InputPrefix, null,
+                React.createElement(kendo_react_common_1.IconWrap, { name: 'search', icon: kendo_svg_icons_1.searchIcon }))); } }))));
+});
+ListFilter.propTypes = {
+    value: PropTypes.oneOfType([PropTypes.string, PropTypes.number, PropTypes.array]),
+    tabIndex: PropTypes.number,
+    onChange: PropTypes.func,
+    onKeyDown: PropTypes.func,
+    size: PropTypes.oneOf([null, 'small', 'medium', 'large']),
+    rounded: PropTypes.oneOf([null, 'small', 'medium', 'large', 'full']),
+    fillMode: PropTypes.oneOf([null, 'solid', 'flat', 'outline'])
+};
+ListFilter.displayName = 'KendoReactListFilter';
 exports.default = ListFilter;

package/dist/npm/common/MultiColumnList.js

@@ -14,10 +14,13 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.MultiColumnList = void 0;
 var React = require("react");
 var List_1 = require("./List");
+var kendo_react_common_1 = require("@progress/kendo-react-common");
 /**
  * @hidden
  */
 var MultiColumnList = function (props) {
-    return (React.createElement(List_1.default, __assign({}, props, { wrapperCssClass: "k-table-body k-table-scroller", listClassName: "k-table k-table-list", listStyle: __assign({}, props.listStyle) })));
+    return (React.createElement(List_1.default, __assign({}, props, { wrapperCssClass: "k-table-body k-table-scroller", listClassName: (0, kendo_react_common_1.classNames)('k-table k-table-list', {
+            'k-virtual-table': props.virtual !== undefined
+        }), listStyle: __assign({}, props.listStyle) })));
 };
 exports.MultiColumnList = MultiColumnList;

package/dist/npm/package-metadata.js

@@ -8,7 +8,7 @@ exports.packageMetadata = {
     name: '@progress/kendo-react-dropdowns',
     productName: 'KendoReact',
     productCodes: ['KENDOUIREACT', 'KENDOUICOMPLETE'],
-    publishDate: 1682926031,
+    publishDate: 1683701306,
     version: '',
     licensingDocsUrl: 'https://www.telerik.com/kendo-react-ui/my-license/?utm_medium=product&utm_source=kendoreact&utm_campaign=kendo-ui-react-purchase-license-keys-warning'
 };