@progress/kendo-react-dropdowns 5.6.0-dev.202208261541 → 5.6.0-dev.202209021051

package/dist/es/AutoComplete/AutoComplete.js

@@ -383,7 +383,7 @@ var AutoCompleteWithoutContext = /** @class */ (function (_super) {
                 animate: popupSettings.animate,
                 anchor: this.element,
                 show: opened,
-                popupClass: classNames(popupSettings.popupClass),
+                popupClass: classNames(popupSettings.popupClass, 'k-list-container'),
                 className: popupSettings.className,
                 appendTo: popupSettings.appendTo
             }, dir: dir !== undefined ? dir : this.base.dirCalculated, itemsCount: [data.length] },

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

@@ -51,9 +51,6 @@ export declare class ComboBoxWithoutContext extends React.Component<ComboBoxProp
             total: PropTypes.Validator<number>;
         }>>;
         onFilterChange: PropTypes.Requireable<(...args: any[]) => any>;
-        /**
-         * @hidden
-         */
         onPageChange: PropTypes.Requireable<(...args: any[]) => any>;
         opened: PropTypes.Requireable<boolean>;
         disabled: PropTypes.Requireable<boolean>;
@@ -79,9 +76,7 @@ export declare class ComboBoxWithoutContext extends React.Component<ComboBoxProp
         onOpen: PropTypes.Requireable<(...args: any[]) => any>;
         onClose: PropTypes.Requireable<(...args: any[]) => any>;
         onFocus: PropTypes.Requireable<(...args: any[]) => any>;
-        onBlur: PropTypes.Requireable<(...args: any[]) => any>; /**
-         * @hidden
-         */
+        onBlur: PropTypes.Requireable<(...args: any[]) => any>;
         onChange: PropTypes.Requireable<(...args: any[]) => any>;
         itemRender: PropTypes.Requireable<(...args: any[]) => any>;
         listNoDataRender: PropTypes.Requireable<(...args: any[]) => any>;
@@ -100,9 +95,7 @@ export declare class ComboBoxWithoutContext extends React.Component<ComboBoxProp
         clearButton: boolean;
         required: boolean;
         popupSettings: {
-            height: string; /**
-             * The value of the ComboBox.
-             */
+            height: string;
         };
         validityStyles: boolean;
     };

package/dist/es/ComboBox/ComboBox.js

@@ -36,6 +36,7 @@ import List from '../common/List';
 import { validatePackage } from '@progress/kendo-react-common';
 import { packageMetadata } from '../package-metadata';
 import ClearButton from '../common/ClearButton';
+import { Button } from '@progress/kendo-react-buttons';
 var VALIDATION_MESSAGE = 'Please enter a valid value!';
 var sizeMap = kendoThemeMaps.sizeMap, roundedMap = kendoThemeMaps.roundedMap;
 /** @hidden */
@@ -361,8 +362,8 @@ var ComboBoxWithoutContext = /** @class */ (function (_super) {
      * @hidden
      */
     ComboBoxWithoutContext.prototype.render = function () {
-        var _a, _b;
-        var _c = this.props, dir = _c.dir, disabled = _c.disabled, _d = _c.clearButton, clearButton = _d === void 0 ? ComboBoxWithoutContext.defaultProps.clearButton : _d, label = _c.label, textField = _c.textField, className = _c.className, style = _c.style, loading = _c.loading, iconClassName = _c.iconClassName, virtual = _c.virtual, size = _c.size, rounded = _c.rounded, fillMode = _c.fillMode;
+        var _a;
+        var _b = this.props, dir = _b.dir, disabled = _b.disabled, _c = _b.clearButton, clearButton = _c === void 0 ? ComboBoxWithoutContext.defaultProps.clearButton : _c, label = _b.label, textField = _b.textField, className = _b.className, style = _b.style, loading = _b.loading, iconClassName = _b.iconClassName, virtual = _b.virtual, size = _b.size, rounded = _b.rounded, fillMode = _b.fillMode;
         var isValid = !this.validityStyles || this.validity.valid;
         var text = this.props.filter !== undefined ? this.props.filter : this.state.text;
         var selectedItemText = getItemValue(this.value, textField);
@@ -389,12 +390,7 @@ var ComboBoxWithoutContext = /** @class */ (function (_super) {
             this.renderSearchBar(inputText || '', id),
             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-".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) })),
+            React.createElement(Button, { tabIndex: -1, type: "button", icon: !iconClassName ? 'caret-alt-down' : undefined, iconClass: iconClassName, size: size, fillMode: fillMode, rounded: null, themeColor: 'base', className: "k-input-button", onClick: this.toggleBtnClick, onMouseDown: function (e) { return e.preventDefault(); } }),
             this.renderListContainer()));
         return label
             ? (React.createElement(FloatingLabel, { label: label, editorId: id, editorValue: inputText, editorValid: isValid, editorDisabled: disabled, style: { width: style ? style.width : undefined }, children: combobox }))
@@ -525,7 +521,7 @@ var ComboBoxWithoutContext = /** @class */ (function (_super) {
                 animate: popupSettings.animate,
                 anchor: this.element,
                 show: opened,
-                popupClass: classNames(popupSettings.popupClass, 'k-reset'),
+                popupClass: classNames(popupSettings.popupClass, 'k-list-container'),
                 className: popupSettings.className,
                 appendTo: popupSettings.appendTo
             }, dir: dir !== undefined ? dir : this.base.dirCalculated, itemsCount: [data.length] },
@@ -558,7 +554,6 @@ var ComboBoxWithoutContext = /** @class */ (function (_super) {
         var ListComponent = this.props.list || List;
         return (React.createElement(ListComponent, { id: base.listBoxId, virtual: Boolean(virtual), show: opened, data: data, focusedIndex: focusedIndex, value: value, textField: textField, valueField: dataItemKey, groupField: this.props.groupField, optionsGuid: base.guid, listRef: function (list) { vs.list = _this.base.list = list; _this.itemHeight = 0; }, wrapperStyle: { maxHeight: popupSettings.height }, wrapperCssClass: classNames('k-list-content', (_a = {},
                 _a['k-list-scroller'] = !virtual,
-                _a['k-virtual-content'] = virtual,
                 _a)), listStyle: vs.enabled ? { transform: translate } : undefined, key: "listkey", skip: skip, onClick: this.handleItemClick, itemRender: itemRender, noDataRender: listNoDataRender, onMouseDown: function (e) { return e.preventDefault(); }, onScroll: this.onScroll, wrapperRef: vs.scrollerRef, scroller: this.base.renderScrollElement() }));
     };
     ComboBoxWithoutContext.prototype.renderSearchBar = function (text, id) {

package/dist/es/DropDownList/DropDownList.d.ts

@@ -19,14 +19,15 @@ export declare class DropDownListWithoutContext extends React.Component<DropDown
      */
     static propTypes: {
         value: PropTypes.Requireable<any>;
-        defaultValue: PropTypes.Requireable<any>; /**
-         * @hidden
-         */
+        defaultValue: PropTypes.Requireable<any>;
         filterable: PropTypes.Requireable<boolean>;
         filter: PropTypes.Requireable<string>;
         virtual: PropTypes.Requireable<PropTypes.InferProps<{
             pageSize: PropTypes.Validator<number>;
             skip: PropTypes.Validator<number>;
+            /**
+             * @hidden
+             */
             total: PropTypes.Validator<number>;
         }>>;
         onFilterChange: PropTypes.Requireable<(...args: any[]) => any>;

package/dist/es/DropDownList/DropDownList.js

@@ -36,6 +36,7 @@ import DropDownBase from '../common/DropDownBase';
 import { isPresent, getItemValue, sameCharsOnly, shuffleData, matchText, areSame, preventDefaultNonInputs, getFocusedItem } from '../common/utils';
 import { validatePackage } from '@progress/kendo-react-common';
 import { packageMetadata } from '../package-metadata';
+import { Button } from '@progress/kendo-react-buttons';
 var VALIDATION_MESSAGE = 'Please select a value from the list!';
 var sizeMap = kendoThemeMaps.sizeMap, roundedMap = kendoThemeMaps.roundedMap;
 /**
@@ -484,8 +485,8 @@ var DropDownListWithoutContext = /** @class */ (function (_super) {
      * @hidden
      */
     DropDownListWithoutContext.prototype.render = function () {
-        var _a, _b;
-        var _c = this.props, style = _c.style, className = _c.className, label = _c.label, dir = _c.dir, virtual = _c.virtual, size = _c.size, rounded = _c.rounded, fillMode = _c.fillMode;
+        var _a;
+        var _b = this.props, style = _b.style, className = _b.className, label = _b.label, dir = _b.dir, virtual = _b.virtual, size = _b.size, rounded = _b.rounded, fillMode = _b.fillMode;
         var opened = this.props.opened !== undefined ? this.props.opened : this.state.opened;
         var value = this.value;
         var text = getItemValue(value, this.props.textField);
@@ -498,7 +499,7 @@ var DropDownListWithoutContext = /** @class */ (function (_super) {
             base.vs.total = virtual.total;
             base.vs.pageSize = virtual.pageSize;
         }
-        var _d = this.props, dataItemKey = _d.dataItemKey, _e = _d.data, data = _e === void 0 ? [] : _e, disabled = _d.disabled, tabIndex = _d.tabIndex, loading = _d.loading, iconClassName = _d.iconClassName, valueRender = _d.valueRender;
+        var _c = this.props, dataItemKey = _c.dataItemKey, _d = _c.data, data = _d === void 0 ? [] : _d, disabled = _c.disabled, tabIndex = _c.tabIndex, loading = _c.loading, iconClassName = _c.iconClassName, valueRender = _c.valueRender;
         var focused = this.state.focused;
         var selectedIndex = data.findIndex(function (i) { return areSame(i, value, dataItemKey); });
         var valueDefaultRendering = (React.createElement("span", { className: "k-input-inner" },
@@ -519,12 +520,7 @@ var DropDownListWithoutContext = /** @class */ (function (_super) {
                 : __assign(__assign({}, style), { width: undefined }), dir: dir, onMouseDown: opened ? preventDefaultNonInputs : undefined, onFocus: this.handleFocus, onBlur: this.handleBlur, tabIndex: getTabIndex(tabIndex, disabled), accessKey: this.props.accessKey, onKeyDown: this.handleKeyDown, onKeyPress: this.handleKeyPress, onClick: disabled ? undefined : this.handleWrapperClick, role: 'combobox', "aria-required": this.required, "aria-disabled": disabled || undefined, "aria-haspopup": 'listbox', "aria-expanded": opened || false, "aria-owns": this.base.listBoxId, "aria-activedescendant": opened ? ('option-' + this.base.guid + '-' + (selectedIndex + (virtual ? virtual.skip : 0))) : undefined, "aria-label": this.props.ariaLabel || this.props.label, "aria-labelledby": this.props.ariaLabelledBy, "aria-describedby": this.props.ariaDescribedBy, id: this.props.id, title: this.props.title },
             valueElement,
             loading && React.createElement("span", { className: "k-icon k-i-loading k-input-loading-icon", key: "loading" }),
-            React.createElement("button", { tabIndex: -1, type: "button", "aria-hidden": true, className: classNames('k-input-button k-button k-icon-button', (_b = {},
-                    _b["k-button-".concat(sizeMap[size] || size)] = size,
-                    _b["k-button-".concat(fillMode)] = fillMode,
-                    _b["k-button-".concat(fillMode, "-base")] = fillMode,
-                    _b)) },
-                React.createElement("span", { className: classNames('k-button-icon k-icon k-i-arrow-s', iconClassName) })),
+            React.createElement(Button, { tabIndex: -1, type: "button", "aria-hidden": true, size: size, fillMode: fillMode, iconClass: iconClassName, className: "k-input-button", themeColor: 'base', icon: "caret-alt-down" }),
             this.dummySelect(value),
             this.renderListContainer()));
         return label ? (React.createElement(FloatingLabel, { label: label, editorValue: text, editorValid: isValid, editorDisabled: this.props.disabled, style: { width: style ? style.width : undefined }, children: dropdownlist })) : dropdownlist;

package/dist/es/DropDownTree/DropDownTree.js

@@ -32,6 +32,7 @@ import { ListNoData } from './ListNoData';
 import { messages, clear, nodata } from './../messages';
 import { FloatingLabel } from '@progress/kendo-react-labels';
 import ListFilter from '../common/ListFilter';
+import { Button } from '@progress/kendo-react-buttons';
 var sizeMap = kendoThemeMaps.sizeMap, roundedMap = kendoThemeMaps.roundedMap;
 var VALIDATION_MESSAGE = 'Please select a value from the list!';
 var ValueHolder = function (props) {
@@ -76,12 +77,12 @@ export var DropDownTreePropsContext = createPropsContext();
  * Obtaining the `ref` returns an object of type [DropDownTreeHandle]({% slug api_dropdowns_dropdowntreehandle %}).
  */
 export var DropDownTree = React.forwardRef(function (directProps, ref) {
-    var _a, _b;
+    var _a;
     validatePackage(packageMetadata);
     var props = usePropsContext(DropDownTreePropsContext, directProps);
     var calculatedId = React.useMemo(function () { return guid(); }, []);
     var id = props.id || calculatedId;
-    var _c = props.data, data = _c === void 0 ? [] : _c, dataItemKey = props.dataItemKey, _d = props.popupSettings, popupSettings = _d === void 0 ? {} : _d, _e = props.style, style = _e === void 0 ? {} : _e, opened = props.opened, disabled = props.disabled, _f = props.onOpen, onOpen = _f === void 0 ? noop : _f, _g = props.onClose, onClose = _g === void 0 ? noop : _g, placeholder = props.placeholder, label = props.label, name = props.name, _h = props.selectField, selectField = _h === void 0 ? defaultProps.selectField : _h, _j = props.subItemsField, subItemsField = _j === void 0 ? defaultProps.subItemsField : _j, validationMessage = props.validationMessage, valid = props.valid, required = props.required, validityStyles = props.validityStyles;
+    var _b = props.data, data = _b === void 0 ? [] : _b, dataItemKey = props.dataItemKey, _c = props.popupSettings, popupSettings = _c === void 0 ? {} : _c, _d = props.style, style = _d === void 0 ? {} : _d, opened = props.opened, disabled = props.disabled, _e = props.onOpen, onOpen = _e === void 0 ? noop : _e, _f = props.onClose, onClose = _f === void 0 ? noop : _f, placeholder = props.placeholder, label = props.label, name = props.name, _g = props.selectField, selectField = _g === void 0 ? defaultProps.selectField : _g, _h = props.subItemsField, subItemsField = _h === void 0 ? defaultProps.subItemsField : _h, validationMessage = props.validationMessage, valid = props.valid, required = props.required, validityStyles = props.validityStyles;
     var tabIndex = getTabIndex(props.tabIndex, disabled);
     var target = React.useRef(null);
     var elementRef = React.useRef(null);
@@ -89,7 +90,7 @@ export var DropDownTree = React.forwardRef(function (directProps, ref) {
     var selectRef = React.useRef(null);
     var treeViewRef = React.useRef(null);
     var skipFocusRef = React.useRef(false);
-    var _k = React.useState(undefined), stateValue = _k[0], setStateValue = _k[1];
+    var _j = React.useState(undefined), stateValue = _j[0], setStateValue = _j[1];
     var controlled = props.value !== undefined;
     var value = controlled ? props.value : (stateValue !== undefined ? stateValue : props.defaultValue);
     var hasValue = isPresent(value);
@@ -107,10 +108,10 @@ export var DropDownTree = React.forwardRef(function (directProps, ref) {
         popupSettings.width : (style.width !== undefined ? style.width : defaultProps.popupSettings.width);
     var popupWidth = useDropdownWidth(elementRef, initialStyleWidth);
     var popupStyles = __assign({ width: popupWidth }, (dir !== undefined ? { direction: dir } : {}));
-    var _l = React.useState(false), open = _l[0], setOpen = _l[1];
+    var _k = React.useState(false), open = _k[0], setOpen = _k[1];
     var isOpen = opened !== undefined ? opened : open;
-    var _m = React.useState(false), focused = _m[0], setFocused = _m[1];
-    var _o = React.useState(''), filter = _o[0], setFilter = _o[1];
+    var _l = React.useState(false), focused = _l[0], setFocused = _l[1];
+    var _m = React.useState(''), filter = _m[0], setFilter = _m[1];
     var setValidity = React.useCallback(function () {
         if (selectRef.current && selectRef.current.setCustomValidity) {
             selectRef.current.setCustomValidity(validity.valid
@@ -356,15 +357,10 @@ export var DropDownTree = React.forwardRef(function (directProps, ref) {
         props.loading && React.createElement("span", { className: "k-icon k-i-loading k-input-loading-icon" }),
         hasValue && !disabled && (React.createElement("span", { onClick: onClear, className: "k-clear-value", title: localization.toLanguageString(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-".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(Button, { tabIndex: -1, type: "button", "aria-label": "select", className: "k-input-button", size: size, fillMode: fillMode, themeColor: "base", rounded: null, icon: "caret-alt-down" }),
         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(Popup, { className: classNames(popupSettings.className, { 'k-rtl': dir === 'rtl' }), popupClass: popupSettings.popupClass, style: popupStyles, animate: popupSettings.animate, anchor: elementRef.current, show: isOpen, onOpen: onPopupOpened, onClose: onPopupClosed, appendTo: popupSettings.appendTo },
+        React.createElement(Popup, { className: classNames(popupSettings.className, { 'k-rtl': dir === 'rtl' }), popupClass: classNames(popupSettings.popupClass, 'k-list-container'), style: popupStyles, animate: popupSettings.animate, anchor: elementRef.current, show: isOpen, onOpen: onPopupOpened, onClose: onPopupClosed, appendTo: popupSettings.appendTo },
             props.filterable && (React.createElement(ListFilter, { value: props.filter === undefined ? filter : props.filter, inputRef: inputRef, onChange: onFilterChange, onKeyDown: onInputKeyDown, size: size, rounded: rounded, fillMode: fillMode })),
             data.length > 0 ? (React.createElement(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(nodata, messages[nodata]))))));
     return label ? (React.createElement(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/es/MultiSelect/MultiSelect.js

@@ -258,7 +258,7 @@ var MultiSelectWithoutContext = /** @class */ (function (_super) {
                 dir: dir !== undefined ? dir : base.dirCalculated,
                 width: popupWidth,
                 popupSettings: {
-                    popupClass: classNames(popupSettings.popupClass),
+                    popupClass: classNames(popupSettings.popupClass, 'k-list-container'),
                     className: popupSettings.className,
                     animate: popupSettings.animate,
                     anchor: _this.element,

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-".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 }));
+                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, 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.js

@@ -409,7 +409,7 @@ export var MultiSelectTree = React.forwardRef(function (directProps, ref) {
         hasValue && !disabled && React.createElement(ClearButton, { 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(Popup, { popupClass: popupSettings.popupClass, className: 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(Popup, { popupClass: classNames(popupSettings.popupClass, 'k-list-container'), className: 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, { 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(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(nodata, messages[nodata]))))));
     return label ? (React.createElement(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/es/package-metadata.js

@@ -5,7 +5,7 @@ export var packageMetadata = {
     name: '@progress/kendo-react-dropdowns',
     productName: 'KendoReact',
     productCodes: ['KENDOUIREACT', 'KENDOUICOMPLETE'],
-    publishDate: 1661527368,
+    publishDate: 1662114739,
     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'
 };

package/dist/npm/AutoComplete/AutoComplete.js

@@ -386,7 +386,7 @@ var AutoCompleteWithoutContext = /** @class */ (function (_super) {
                 animate: popupSettings.animate,
                 anchor: this.element,
                 show: opened,
-                popupClass: (0, kendo_react_common_1.classNames)(popupSettings.popupClass),
+                popupClass: (0, kendo_react_common_1.classNames)(popupSettings.popupClass, 'k-list-container'),
                 className: popupSettings.className,
                 appendTo: popupSettings.appendTo
             }, dir: dir !== undefined ? dir : this.base.dirCalculated, itemsCount: [data.length] },

package/dist/npm/ComboBox/ComboBox.d.ts

@@ -51,9 +51,6 @@ export declare class ComboBoxWithoutContext extends React.Component<ComboBoxProp
             total: PropTypes.Validator<number>;
         }>>;
         onFilterChange: PropTypes.Requireable<(...args: any[]) => any>;
-        /**
-         * @hidden
-         */
         onPageChange: PropTypes.Requireable<(...args: any[]) => any>;
         opened: PropTypes.Requireable<boolean>;
         disabled: PropTypes.Requireable<boolean>;
@@ -79,9 +76,7 @@ export declare class ComboBoxWithoutContext extends React.Component<ComboBoxProp
         onOpen: PropTypes.Requireable<(...args: any[]) => any>;
         onClose: PropTypes.Requireable<(...args: any[]) => any>;
         onFocus: PropTypes.Requireable<(...args: any[]) => any>;
-        onBlur: PropTypes.Requireable<(...args: any[]) => any>; /**
-         * @hidden
-         */
+        onBlur: PropTypes.Requireable<(...args: any[]) => any>;
         onChange: PropTypes.Requireable<(...args: any[]) => any>;
         itemRender: PropTypes.Requireable<(...args: any[]) => any>;
         listNoDataRender: PropTypes.Requireable<(...args: any[]) => any>;
@@ -100,9 +95,7 @@ export declare class ComboBoxWithoutContext extends React.Component<ComboBoxProp
         clearButton: boolean;
         required: boolean;
         popupSettings: {
-            height: string; /**
-             * The value of the ComboBox.
-             */
+            height: string;
         };
         validityStyles: boolean;
     };

package/dist/npm/ComboBox/ComboBox.js

@@ -39,6 +39,7 @@ var List_1 = require("../common/List");
 var kendo_react_common_2 = require("@progress/kendo-react-common");
 var package_metadata_1 = require("../package-metadata");
 var ClearButton_1 = require("../common/ClearButton");
+var kendo_react_buttons_1 = require("@progress/kendo-react-buttons");
 var VALIDATION_MESSAGE = 'Please enter a valid value!';
 var sizeMap = kendo_react_common_1.kendoThemeMaps.sizeMap, roundedMap = kendo_react_common_1.kendoThemeMaps.roundedMap;
 /** @hidden */
@@ -364,8 +365,8 @@ var ComboBoxWithoutContext = /** @class */ (function (_super) {
      * @hidden
      */
     ComboBoxWithoutContext.prototype.render = function () {
-        var _a, _b;
-        var _c = this.props, dir = _c.dir, disabled = _c.disabled, _d = _c.clearButton, clearButton = _d === void 0 ? ComboBoxWithoutContext.defaultProps.clearButton : _d, label = _c.label, textField = _c.textField, className = _c.className, style = _c.style, loading = _c.loading, iconClassName = _c.iconClassName, virtual = _c.virtual, size = _c.size, rounded = _c.rounded, fillMode = _c.fillMode;
+        var _a;
+        var _b = this.props, dir = _b.dir, disabled = _b.disabled, _c = _b.clearButton, clearButton = _c === void 0 ? ComboBoxWithoutContext.defaultProps.clearButton : _c, label = _b.label, textField = _b.textField, className = _b.className, style = _b.style, loading = _b.loading, iconClassName = _b.iconClassName, virtual = _b.virtual, size = _b.size, rounded = _b.rounded, fillMode = _b.fillMode;
         var isValid = !this.validityStyles || this.validity.valid;
         var text = this.props.filter !== undefined ? this.props.filter : this.state.text;
         var selectedItemText = (0, utils_1.getItemValue)(this.value, textField);
@@ -392,12 +393,7 @@ var ComboBoxWithoutContext = /** @class */ (function (_super) {
             this.renderSearchBar(inputText || '', id),
             renderClearButton && !loading && React.createElement(ClearButton_1.default, { 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: (0, kendo_react_common_1.classNames)('k-input-button k-button k-icon-button', (_b = {},
-                    _b["k-button-".concat(sizeMap[size] || size)] = size,
-                    _b["k-button-".concat(fillMode)] = fillMode,
-                    _b["k-button-".concat(fillMode, "-base")] = fillMode,
-                    _b)), onClick: this.toggleBtnClick, onMouseDown: function (e) { return e.preventDefault(); } },
-                React.createElement("span", { className: (0, kendo_react_common_1.classNames)('k-button-icon k-icon k-i-arrow-s', iconClassName) })),
+            React.createElement(kendo_react_buttons_1.Button, { tabIndex: -1, type: "button", icon: !iconClassName ? 'caret-alt-down' : undefined, iconClass: iconClassName, size: size, fillMode: fillMode, rounded: null, themeColor: 'base', className: "k-input-button", onClick: this.toggleBtnClick, onMouseDown: function (e) { return e.preventDefault(); } }),
             this.renderListContainer()));
         return label
             ? (React.createElement(kendo_react_labels_1.FloatingLabel, { label: label, editorId: id, editorValue: inputText, editorValid: isValid, editorDisabled: disabled, style: { width: style ? style.width : undefined }, children: combobox }))
@@ -528,7 +524,7 @@ var ComboBoxWithoutContext = /** @class */ (function (_super) {
                 animate: popupSettings.animate,
                 anchor: this.element,
                 show: opened,
-                popupClass: (0, kendo_react_common_1.classNames)(popupSettings.popupClass, 'k-reset'),
+                popupClass: (0, kendo_react_common_1.classNames)(popupSettings.popupClass, 'k-list-container'),
                 className: popupSettings.className,
                 appendTo: popupSettings.appendTo
             }, dir: dir !== undefined ? dir : this.base.dirCalculated, itemsCount: [data.length] },
@@ -561,7 +557,6 @@ var ComboBoxWithoutContext = /** @class */ (function (_super) {
         var ListComponent = this.props.list || List_1.default;
         return (React.createElement(ListComponent, { id: base.listBoxId, virtual: Boolean(virtual), show: opened, data: data, focusedIndex: focusedIndex, value: value, textField: textField, valueField: dataItemKey, groupField: this.props.groupField, optionsGuid: base.guid, listRef: function (list) { vs.list = _this.base.list = list; _this.itemHeight = 0; }, wrapperStyle: { maxHeight: popupSettings.height }, wrapperCssClass: (0, kendo_react_common_1.classNames)('k-list-content', (_a = {},
                 _a['k-list-scroller'] = !virtual,
-                _a['k-virtual-content'] = virtual,
                 _a)), listStyle: vs.enabled ? { transform: translate } : undefined, key: "listkey", skip: skip, onClick: this.handleItemClick, itemRender: itemRender, noDataRender: listNoDataRender, onMouseDown: function (e) { return e.preventDefault(); }, onScroll: this.onScroll, wrapperRef: vs.scrollerRef, scroller: this.base.renderScrollElement() }));
     };
     ComboBoxWithoutContext.prototype.renderSearchBar = function (text, id) {

package/dist/npm/DropDownList/DropDownList.d.ts

@@ -19,14 +19,15 @@ export declare class DropDownListWithoutContext extends React.Component<DropDown
      */
     static propTypes: {
         value: PropTypes.Requireable<any>;
-        defaultValue: PropTypes.Requireable<any>; /**
-         * @hidden
-         */
+        defaultValue: PropTypes.Requireable<any>;
         filterable: PropTypes.Requireable<boolean>;
         filter: PropTypes.Requireable<string>;
         virtual: PropTypes.Requireable<PropTypes.InferProps<{
             pageSize: PropTypes.Validator<number>;
             skip: PropTypes.Validator<number>;
+            /**
+             * @hidden
+             */
             total: PropTypes.Validator<number>;
         }>>;
         onFilterChange: PropTypes.Requireable<(...args: any[]) => any>;

package/dist/npm/DropDownList/DropDownList.js

@@ -39,6 +39,7 @@ var DropDownBase_1 = require("../common/DropDownBase");
 var utils_1 = require("../common/utils");
 var kendo_react_common_2 = require("@progress/kendo-react-common");
 var package_metadata_1 = require("../package-metadata");
+var kendo_react_buttons_1 = require("@progress/kendo-react-buttons");
 var VALIDATION_MESSAGE = 'Please select a value from the list!';
 var sizeMap = kendo_react_common_1.kendoThemeMaps.sizeMap, roundedMap = kendo_react_common_1.kendoThemeMaps.roundedMap;
 /**
@@ -487,8 +488,8 @@ var DropDownListWithoutContext = /** @class */ (function (_super) {
      * @hidden
      */
     DropDownListWithoutContext.prototype.render = function () {
-        var _a, _b;
-        var _c = this.props, style = _c.style, className = _c.className, label = _c.label, dir = _c.dir, virtual = _c.virtual, size = _c.size, rounded = _c.rounded, fillMode = _c.fillMode;
+        var _a;
+        var _b = this.props, style = _b.style, className = _b.className, label = _b.label, dir = _b.dir, virtual = _b.virtual, size = _b.size, rounded = _b.rounded, fillMode = _b.fillMode;
         var opened = this.props.opened !== undefined ? this.props.opened : this.state.opened;
         var value = this.value;
         var text = (0, utils_1.getItemValue)(value, this.props.textField);
@@ -501,7 +502,7 @@ var DropDownListWithoutContext = /** @class */ (function (_super) {
             base.vs.total = virtual.total;
             base.vs.pageSize = virtual.pageSize;
         }
-        var _d = this.props, dataItemKey = _d.dataItemKey, _e = _d.data, data = _e === void 0 ? [] : _e, disabled = _d.disabled, tabIndex = _d.tabIndex, loading = _d.loading, iconClassName = _d.iconClassName, valueRender = _d.valueRender;
+        var _c = this.props, dataItemKey = _c.dataItemKey, _d = _c.data, data = _d === void 0 ? [] : _d, disabled = _c.disabled, tabIndex = _c.tabIndex, loading = _c.loading, iconClassName = _c.iconClassName, valueRender = _c.valueRender;
         var focused = this.state.focused;
         var selectedIndex = data.findIndex(function (i) { return (0, utils_1.areSame)(i, value, dataItemKey); });
         var valueDefaultRendering = (React.createElement("span", { className: "k-input-inner" },
@@ -522,12 +523,7 @@ var DropDownListWithoutContext = /** @class */ (function (_super) {
                 : __assign(__assign({}, style), { width: undefined }), dir: dir, onMouseDown: opened ? utils_1.preventDefaultNonInputs : undefined, onFocus: this.handleFocus, onBlur: this.handleBlur, tabIndex: (0, kendo_react_common_1.getTabIndex)(tabIndex, disabled), accessKey: this.props.accessKey, onKeyDown: this.handleKeyDown, onKeyPress: this.handleKeyPress, onClick: disabled ? undefined : this.handleWrapperClick, role: 'combobox', "aria-required": this.required, "aria-disabled": disabled || undefined, "aria-haspopup": 'listbox', "aria-expanded": opened || false, "aria-owns": this.base.listBoxId, "aria-activedescendant": opened ? ('option-' + this.base.guid + '-' + (selectedIndex + (virtual ? virtual.skip : 0))) : undefined, "aria-label": this.props.ariaLabel || this.props.label, "aria-labelledby": this.props.ariaLabelledBy, "aria-describedby": this.props.ariaDescribedBy, id: this.props.id, title: this.props.title },
             valueElement,
             loading && React.createElement("span", { className: "k-icon k-i-loading k-input-loading-icon", key: "loading" }),
-            React.createElement("button", { tabIndex: -1, type: "button", "aria-hidden": true, className: (0, kendo_react_common_1.classNames)('k-input-button k-button k-icon-button', (_b = {},
-                    _b["k-button-".concat(sizeMap[size] || size)] = size,
-                    _b["k-button-".concat(fillMode)] = fillMode,
-                    _b["k-button-".concat(fillMode, "-base")] = fillMode,
-                    _b)) },
-                React.createElement("span", { className: (0, kendo_react_common_1.classNames)('k-button-icon k-icon k-i-arrow-s', iconClassName) })),
+            React.createElement(kendo_react_buttons_1.Button, { tabIndex: -1, type: "button", "aria-hidden": true, size: size, fillMode: fillMode, iconClass: iconClassName, className: "k-input-button", themeColor: 'base', icon: "caret-alt-down" }),
             this.dummySelect(value),
             this.renderListContainer()));
         return label ? (React.createElement(kendo_react_labels_1.FloatingLabel, { label: label, editorValue: text, editorValid: isValid, editorDisabled: this.props.disabled, style: { width: style ? style.width : undefined }, children: dropdownlist })) : dropdownlist;

package/dist/npm/DropDownTree/DropDownTree.js

@@ -35,6 +35,7 @@ var ListNoData_1 = require("./ListNoData");
 var messages_1 = require("./../messages");
 var kendo_react_labels_1 = require("@progress/kendo-react-labels");
 var ListFilter_1 = require("../common/ListFilter");
+var kendo_react_buttons_1 = require("@progress/kendo-react-buttons");
 var sizeMap = kendo_react_common_1.kendoThemeMaps.sizeMap, roundedMap = kendo_react_common_1.kendoThemeMaps.roundedMap;
 var VALIDATION_MESSAGE = 'Please select a value from the list!';
 var ValueHolder = function (props) {
@@ -79,12 +80,12 @@ exports.DropDownTreePropsContext = (0, kendo_react_common_1.createPropsContext)(
  * Obtaining the `ref` returns an object of type [DropDownTreeHandle]({% slug api_dropdowns_dropdowntreehandle %}).
  */
 exports.DropDownTree = React.forwardRef(function (directProps, ref) {
-    var _a, _b;
+    var _a;
     (0, kendo_react_common_2.validatePackage)(package_metadata_1.packageMetadata);
     var props = (0, kendo_react_common_1.usePropsContext)(exports.DropDownTreePropsContext, directProps);
     var calculatedId = React.useMemo(function () { return (0, kendo_react_common_1.guid)(); }, []);
     var id = props.id || calculatedId;
-    var _c = props.data, data = _c === void 0 ? [] : _c, dataItemKey = props.dataItemKey, _d = props.popupSettings, popupSettings = _d === void 0 ? {} : _d, _e = props.style, style = _e === void 0 ? {} : _e, opened = props.opened, disabled = props.disabled, _f = props.onOpen, onOpen = _f === void 0 ? kendo_react_common_1.noop : _f, _g = props.onClose, onClose = _g === void 0 ? kendo_react_common_1.noop : _g, placeholder = props.placeholder, label = props.label, name = props.name, _h = props.selectField, selectField = _h === void 0 ? defaultProps.selectField : _h, _j = props.subItemsField, subItemsField = _j === void 0 ? defaultProps.subItemsField : _j, validationMessage = props.validationMessage, valid = props.valid, required = props.required, validityStyles = props.validityStyles;
+    var _b = props.data, data = _b === void 0 ? [] : _b, dataItemKey = props.dataItemKey, _c = props.popupSettings, popupSettings = _c === void 0 ? {} : _c, _d = props.style, style = _d === void 0 ? {} : _d, opened = props.opened, disabled = props.disabled, _e = props.onOpen, onOpen = _e === void 0 ? kendo_react_common_1.noop : _e, _f = props.onClose, onClose = _f === void 0 ? kendo_react_common_1.noop : _f, placeholder = props.placeholder, label = props.label, name = props.name, _g = props.selectField, selectField = _g === void 0 ? defaultProps.selectField : _g, _h = props.subItemsField, subItemsField = _h === void 0 ? defaultProps.subItemsField : _h, validationMessage = props.validationMessage, valid = props.valid, required = props.required, validityStyles = props.validityStyles;
     var tabIndex = (0, kendo_react_common_1.getTabIndex)(props.tabIndex, disabled);
     var target = React.useRef(null);
     var elementRef = React.useRef(null);
@@ -92,7 +93,7 @@ exports.DropDownTree = React.forwardRef(function (directProps, ref) {
     var selectRef = React.useRef(null);
     var treeViewRef = React.useRef(null);
     var skipFocusRef = React.useRef(false);
-    var _k = React.useState(undefined), stateValue = _k[0], setStateValue = _k[1];
+    var _j = React.useState(undefined), stateValue = _j[0], setStateValue = _j[1];
     var controlled = props.value !== undefined;
     var value = controlled ? props.value : (stateValue !== undefined ? stateValue : props.defaultValue);
     var hasValue = (0, utils_1.isPresent)(value);
@@ -110,10 +111,10 @@ exports.DropDownTree = React.forwardRef(function (directProps, ref) {
         popupSettings.width : (style.width !== undefined ? style.width : defaultProps.popupSettings.width);
     var popupWidth = (0, useDropdownWidth_1.useDropdownWidth)(elementRef, initialStyleWidth);
     var popupStyles = __assign({ width: popupWidth }, (dir !== undefined ? { direction: dir } : {}));
-    var _l = React.useState(false), open = _l[0], setOpen = _l[1];
+    var _k = React.useState(false), open = _k[0], setOpen = _k[1];
     var isOpen = opened !== undefined ? opened : open;
-    var _m = React.useState(false), focused = _m[0], setFocused = _m[1];
-    var _o = React.useState(''), filter = _o[0], setFilter = _o[1];
+    var _l = React.useState(false), focused = _l[0], setFocused = _l[1];
+    var _m = React.useState(''), filter = _m[0], setFilter = _m[1];
     var setValidity = React.useCallback(function () {
         if (selectRef.current && selectRef.current.setCustomValidity) {
             selectRef.current.setCustomValidity(validity.valid
@@ -359,15 +360,10 @@ exports.DropDownTree = React.forwardRef(function (directProps, ref) {
         props.loading && React.createElement("span", { className: "k-icon k-i-loading k-input-loading-icon" }),
         hasValue && !disabled && (React.createElement("span", { onClick: onClear, className: "k-clear-value", title: localization.toLanguageString(messages_1.clear, messages_1.messages[messages_1.clear]), role: "button", tabIndex: -1, onMouseDown: function (e) { return e.preventDefault(); } },
             React.createElement("span", { className: "k-icon k-i-x" }))),
-        React.createElement("button", { tabIndex: -1, type: "button", "aria-label": "select", className: (0, kendo_react_common_1.classNames)('k-input-button k-button k-icon-button', (_b = {},
-                _b["k-button-".concat(sizeMap[size] || size)] = size,
-                _b["k-button-".concat(fillMode)] = fillMode,
-                _b["k-button-".concat(fillMode, "-base")] = fillMode,
-                _b)) },
-            React.createElement("span", { className: "k-button-icon k-icon k-i-arrow-s" })),
+        React.createElement(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" }),
         React.createElement("select", { name: name, ref: selectRef, tabIndex: -1, "aria-hidden": true, title: label, style: { opacity: 0, width: 1, border: 0, zIndex: -1, position: 'absolute', left: '50%' } },
             React.createElement("option", { value: props.valueMap ? props.valueMap.call(undefined, value) : value })),
-        React.createElement(kendo_react_popup_1.Popup, { className: (0, kendo_react_common_1.classNames)(popupSettings.className, { 'k-rtl': dir === 'rtl' }), popupClass: popupSettings.popupClass, style: popupStyles, animate: popupSettings.animate, anchor: elementRef.current, show: isOpen, onOpen: onPopupOpened, onClose: onPopupClosed, appendTo: popupSettings.appendTo },
+        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'), style: popupStyles, animate: popupSettings.animate, anchor: elementRef.current, show: isOpen, onOpen: onPopupOpened, onClose: onPopupClosed, appendTo: popupSettings.appendTo },
             props.filterable && (React.createElement(ListFilter_1.default, { value: props.filter === undefined ? filter : props.filter, inputRef: inputRef, onChange: onFilterChange, onKeyDown: onInputKeyDown, size: size, rounded: rounded, fillMode: fillMode })),
             data.length > 0 ? (React.createElement(kendo_react_treeview_1.TreeView, { ref: treeViewRef, tabIndex: tabIndex, data: treeViewData, focusIdField: dataItemKey, textField: props.textField, selectField: selectField, expandField: props.expandField, childrenField: subItemsField, expandIcons: true, onItemClick: onChange, onExpandChange: onExpand, size: size, item: props.item })) : (React.createElement(NoData, null, localization.toLanguageString(messages_1.nodata, messages_1.messages[messages_1.nodata]))))));
     return label ? (React.createElement(kendo_react_labels_1.FloatingLabel, { label: label, editorValue: currentValueText, editorPlaceholder: placeholder, editorValid: isValid, editorDisabled: disabled, editorId: id, style: { width: style ? style.width : undefined }, children: dropdowntree, dir: dir })) : dropdowntree;

package/dist/npm/MultiSelect/MultiSelect.js

@@ -261,7 +261,7 @@ var MultiSelectWithoutContext = /** @class */ (function (_super) {
                 dir: dir !== undefined ? dir : base.dirCalculated,
                 width: popupWidth,
                 popupSettings: {
-                    popupClass: (0, kendo_react_common_1.classNames)(popupSettings.popupClass),
+                    popupClass: (0, kendo_react_common_1.classNames)(popupSettings.popupClass, 'k-list-container'),
                     className: popupSettings.className,
                     animate: popupSettings.animate,
                     anchor: _this.element,

package/dist/npm/MultiSelect/TagList.js

@@ -31,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-".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 }));
+                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, 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.js

@@ -412,7 +412,7 @@ exports.MultiSelectTree = React.forwardRef(function (directProps, ref) {
         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: (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 },
+        React.createElement(kendo_react_popup_1.Popup, { popupClass: (0, kendo_react_common_1.classNames)(popupSettings.popupClass, 'k-list-container'), 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;

package/dist/npm/package-metadata.js

@@ -8,7 +8,7 @@ exports.packageMetadata = {
     name: '@progress/kendo-react-dropdowns',
     productName: 'KendoReact',
     productCodes: ['KENDOUIREACT', 'KENDOUICOMPLETE'],
-    publishDate: 1661527368,
+    publishDate: 1662114739,
     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'
 };