@progress/kendo-react-dropdowns 5.13.0-dev.202304201410 → 5.13.0-dev.202304251043

package/dist/es/AutoComplete/AutoComplete.js

@@ -164,6 +164,7 @@ var AutoCompleteWithoutContext = /** @class */ (function (_super) {
             }
             state.data.focusedItem = undefined;
             _this.applyState(state);
+            _this.setState({ group: undefined });
         };
         _this.clearButtonClick = function (event) {
             var base = _this.base;
@@ -321,6 +322,14 @@ var AutoCompleteWithoutContext = /** @class */ (function (_super) {
         }
         else if (!this._isScrolling) {
             var focusedItemIndex = (_a = this.base.getGroupedDataModernMode(data, groupField)) === null || _a === void 0 ? void 0 : _a.indexOf(focusedItem);
+            if (opening) {
+                // Resets the sticky header group value for scenarios with open/close of component's popup
+                if (data && data.length !== 0) {
+                    this.base.resetGroupStickyHeader(data[0][groupField], this);
+                }
+                this.base.scrollToItem(focusedItemIndex);
+            }
+            ;
             if (opened && prevOpened && focusedItemChanged) {
                 this.base.scrollToItem(focusedItemIndex);
             }
@@ -440,7 +449,7 @@ var AutoCompleteWithoutContext = /** @class */ (function (_super) {
             React.createElement("div", { className: classNames('k-list', (_a = {},
                     _a["k-list-".concat(sizeMap[size] || size)] = size,
                     _a)) },
-                !list && group && React.createElement(GroupStickyHeader, { group: group, groupMode: 'modern', render: groupStickyHeaderItemRender }),
+                !list && group && data.length !== 0 && React.createElement(GroupStickyHeader, { group: group, groupMode: 'modern', render: groupStickyHeaderItemRender }),
                 this.renderList()),
             footer && React.createElement("div", { className: "k-list-footer" }, footer)));
     };

package/dist/es/ComboBox/ComboBox.js

@@ -239,6 +239,7 @@ var ComboBoxWithoutContext = /** @class */ (function (_super) {
             }
             _this.base.filterChanged(value, state);
             _this.applyState(state);
+            _this.setState({ group: undefined });
         };
         _this.clearButtonClick = function (event) {
             var state = _this.base.initState();
@@ -384,8 +385,7 @@ var ComboBoxWithoutContext = /** @class */ (function (_super) {
     /** @hidden */
     ComboBoxWithoutContext.prototype.componentDidUpdate = function (prevProps, prevState) {
         var _a;
-        var _b = this.props, dataItemKey = _b.dataItemKey, virtual = _b.virtual, _c = _b.groupField, groupField = _c === void 0 ? '' : _c;
-        var _d = this.props.data, data = _d === void 0 ? [] : _d;
+        var _b = this.props, dataItemKey = _b.dataItemKey, virtual = _b.virtual, _c = _b.groupField, groupField = _c === void 0 ? '' : _c, _d = _b.data, data = _d === void 0 ? [] : _d;
         var prevTotal = prevProps.virtual ? prevProps.virtual.total : 0;
         var opened = this.props.opened !== undefined ? this.props.opened : this.state.opened;
         var prevOpened = prevProps.opened !== undefined ? prevProps.opened : prevState.opened;
@@ -409,6 +409,10 @@ var ComboBoxWithoutContext = /** @class */ (function (_super) {
             }
             else if (opening && !virtual) {
                 this.onPopupOpened();
+                // Resets the sticky header group value for scenarios with open/close of component's popup
+                if (data && data.length !== 0) {
+                    this.base.resetGroupStickyHeader(data[0][groupField], this);
+                }
                 this.base.scrollToItem(selectedItemIndex);
             }
             else if (opened && prevOpened && selectedItem && selectedItemChanged) {
@@ -629,7 +633,7 @@ var ComboBoxWithoutContext = /** @class */ (function (_super) {
                                 _a["k-table-".concat(sizeMap[size] || size)] = list && size,
                                 _a)) },
                             header && React.createElement("div", { className: "k-table-header" }, header),
-                            !list && group && React.createElement(GroupStickyHeader, { group: group, groupMode: groupMode, render: groupStickyHeaderItemRender }),
+                            !list && group && data.length !== 0 && React.createElement(GroupStickyHeader, { group: group, groupMode: groupMode, render: groupStickyHeaderItemRender }),
                             this.renderList(),
                             footer && React.createElement("div", { className: "k-list-footer" }, footer)))))));
     };
@@ -660,7 +664,7 @@ var ComboBoxWithoutContext = /** @class */ (function (_super) {
                     _a["k-table-".concat(sizeMap[size] || size)] = list && size,
                     _a)) },
                 header && React.createElement("div", { className: "k-table-header" }, header),
-                !list && group && React.createElement(GroupStickyHeader, { group: group, groupMode: groupMode, render: groupStickyHeaderItemRender }),
+                !list && group && data.length !== 0 && React.createElement(GroupStickyHeader, { group: group, groupMode: groupMode, render: groupStickyHeaderItemRender }),
                 this.renderList(),
                 footer && React.createElement("div", { className: "k-list-footer" }, footer))));
     };

package/dist/es/DropDownList/DropDownList.js

@@ -127,7 +127,7 @@ var DropDownListWithoutContext = /** @class */ (function (_super) {
                 header && React.createElement("div", { className: "k-list-header" }, header),
                 React.createElement("div", { className: classNames('k-list', (_a = {}, _a["k-list-".concat(sizeMap[size] || size)] = size, _a['k-virtual-list'] = _this.base.vs.enabled, _a)) },
                     _this.renderDefaultItem(),
-                    !list && group && React.createElement(GroupStickyHeader, { group: group, groupMode: 'modern', render: groupStickyHeaderItemRender }),
+                    !list && group && data.length !== 0 && React.createElement(GroupStickyHeader, { group: group, groupMode: 'modern', render: groupStickyHeaderItemRender }),
                     _this.renderList()),
                 footer && React.createElement("div", { className: "k-list-footer" }, footer)));
         };
@@ -291,11 +291,14 @@ var DropDownListWithoutContext = /** @class */ (function (_super) {
                 return;
             }
             var opened = _this.props.opened !== undefined ? _this.props.opened : _this.state.opened;
+            var adaptive = _this.props.adaptive;
+            var _a = _this.state.windowWidth, windowWidth = _a === void 0 ? 0 : _a;
+            var renderAdaptive = windowWidth <= MOBILE_MEDIUM_DEVISE && adaptive;
             var state = _this.base.initState();
             state.syntheticEvent = event;
             state.data.focused = false;
             state.events.push({ type: 'onBlur' });
-            if (opened) {
+            if (opened && !renderAdaptive) {
                 _this.base.togglePopup(state);
             }
             _this.applyState(state);
@@ -344,6 +347,7 @@ var DropDownListWithoutContext = /** @class */ (function (_super) {
             }
             _this.base.filterChanged(event.target.value, state);
             _this.applyState(state);
+            _this.setState({ group: undefined });
         };
         _this.onPopupOpened = function () {
             if (_this._filterInput) {
@@ -522,6 +526,10 @@ var DropDownListWithoutContext = /** @class */ (function (_super) {
             }
             else if (opening && !virtual) {
                 this.onPopupOpened();
+                // Resets the sticky header group value for scenarios with open/close of component's popup
+                if (data && data.length !== 0) {
+                    this.base.resetGroupStickyHeader(data[0][groupField], this);
+                }
                 this.base.scrollToItem(selectedItemIndex);
             }
             else if (opened && prevOpened && selectedItem_1 && selectedItemChanged && !this._navigated) {
@@ -666,7 +674,7 @@ var DropDownListWithoutContext = /** @class */ (function (_super) {
                     header && React.createElement("div", { className: "k-list-header" }, header),
                     React.createElement("div", { className: classNames('k-list', (_a = {}, _a["k-list-".concat(sizeMap[size] || size)] = size, _a['k-virtual-list'] = this.base.vs.enabled, _a)) },
                         this.renderDefaultItem(),
-                        !list && group && React.createElement(GroupStickyHeader, { group: group, groupMode: 'modern', render: groupStickyHeaderItemRender }),
+                        !list && group && data.length !== 0 && React.createElement(GroupStickyHeader, { group: group, groupMode: 'modern', render: groupStickyHeaderItemRender }),
                         this.renderList()),
                     footer && React.createElement("div", { className: "k-list-footer" }, footer)))));
     };

package/dist/es/MultiColumnComboBox/MultiColumnComboBox.js

@@ -67,15 +67,14 @@ export var MultiColumnComboBox = React.forwardRef(function (directProps, ref) {
     });
     React.useImperativeHandle(ref, function () { return target.current; });
     var initialGroupHeader = React.useMemo(function () {
-        if (initialGroupHeader === undefined && props.groupField !== undefined && props.data) {
+        if (props.groupField !== undefined && props.data) {
             return getItemValue(props.data[0], props.groupField);
         }
     }, [props.data, props.groupField]);
     var _c = React.useState(initialGroupHeader), groupHeader = _c[0], setGroupHeader = _c[1];
+    var _d = React.useState(true), showStickyHeader = _d[0], setShowStickyHeader = _d[1];
     var header = React.useMemo(function () {
-        var renderer = (React.createElement("th", { className: 'k-table-th', colSpan: columns.length },
-            groupHeader,
-            "    "));
+        var renderer = (React.createElement("th", { className: 'k-table-th', colSpan: columns.length }, groupHeader));
         return (React.createElement(React.Fragment, null,
             props.header,
             React.createElement("div", { className: "k-table-header-wrap" },
@@ -87,8 +86,8 @@ export var MultiColumnComboBox = React.forwardRef(function (directProps, ref) {
                         React.createElement("tr", { className: 'k-table-row' }, columns.map(function (column, i) {
                             return (React.createElement("th", { className: "k-table-th", key: column.uniqueKey ? column.uniqueKey : i }, column.header || '\u00A0'));
                         })),
-                        groupHeader && React.createElement("tr", { className: 'k-table-group-row' }, props.groupStickyHeaderItemRender ? props.groupStickyHeaderItemRender.call(undefined, renderer, {}) : renderer))))));
-    }, [props.header, columns, groupHeader]);
+                        groupHeader && showStickyHeader && React.createElement("tr", { className: 'k-table-group-row' }, props.groupStickyHeaderItemRender ? props.groupStickyHeaderItemRender.call(undefined, renderer, {}) : renderer))))));
+    }, [props.header, columns, groupHeader, showStickyHeader]);
     var popupWidth = React.useMemo(function () {
         // These additional 4px are coming from the child elements side borders (fixes horizontal scrollbar)
         return "calc(".concat(columns.map(function (column) { return columnWidth(column.width, defaultProps.width); }).filter(Boolean).join(' + '), " + ").concat(scrollbarWidth, "px + 4px)");
@@ -124,17 +123,38 @@ export var MultiColumnComboBox = React.forwardRef(function (directProps, ref) {
             handler.call(undefined, __assign(__assign({}, event), { target: target.current }));
         }
     }, []);
-    var onOpenHandler = React.useCallback(function (event) { return handleEvent(onOpen, event); }, [onOpen]);
+    var onOpenHandler = React.useCallback(function (event) {
+        // Resets the sticky header group value for scenarios with open/close of component's popup
+        if (!props.virtual) {
+            setGroupHeader(initialGroupHeader);
+        }
+        ;
+        return handleEvent(onOpen, event);
+    }, [handleEvent, onOpen, props.virtual, initialGroupHeader]);
     var onCloseHandler = React.useCallback(function (event) { return handleEvent(onClose, event); }, [onClose]);
     var onFocusHandler = React.useCallback(function (event) { return handleEvent(onFocus, event); }, [onFocus]);
     var onBlurHandler = React.useCallback(function (event) { return handleEvent(onBlur, event); }, [onBlur]);
     var onChangeHandler = React.useCallback(function (event) { return handleEvent(onChange, event); }, [onChange]);
     var onPageChangeHandler = React.useCallback(function (event) { return handleEvent(onPageChange, event); }, [onPageChange]);
-    var onFilterChangeHandler = React.useCallback(function (event) { return handleEvent(onFilterChange, __assign(__assign({}, event), { mobileMode: event.target.mobileMode })); }, [onFilterChange]);
+    var onFilterChangeHandler = React.useCallback(function (event) {
+        setGroupHeader(initialGroupHeader);
+        return handleEvent(onFilterChange, __assign(__assign({}, event), { mobileMode: event.target.mobileMode }));
+    }, [onFilterChange]);
     var onGroupScroll = React.useCallback(function (event) {
         setGroupHeader(event.group);
     }, []);
     React.useEffect(function () { setScrollbarWidth(); });
+    React.useEffect(function () {
+        var data = props.data;
+        setGroupHeader(initialGroupHeader);
+        if (data && data.length !== 0) {
+            setShowStickyHeader(true);
+        }
+        else {
+            setShowStickyHeader(false);
+        }
+        ;
+    }, [props.data]);
     var List = React.useCallback(function (listProps) { return React.createElement(MultiColumnList, __assign({}, listProps)); }, []);
     return (React.createElement(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: classNames('k-dropdowngrid', className), required: props.required, adaptive: props.adaptive, adaptiveFilter: props.adaptiveFilter, adaptiveTitle: props.adaptiveTitle })));
 });

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

@@ -12,7 +12,7 @@ export interface MultiSelectState extends DropDownStateBase {
     focusedTag?: TagData;
     activedescendant?: ActiveDescendant;
     value?: Array<any>;
-    currentTreeValue?: Array<any>;
+    currentValue?: Array<any>;
     windowWidth?: number;
 }
 /** @hidden */

package/dist/es/MultiSelect/MultiSelect.js

@@ -73,7 +73,7 @@ var MultiSelectWithoutContext = /** @class */ (function (_super) {
         /** @hidden */
         _this.state = {
             activedescendant: ActiveDescendant.PopupList,
-            currentTreeValue: []
+            currentValue: []
         };
         _this._element = null;
         _this._valueItemsDuringOnChange = null;
@@ -107,12 +107,16 @@ var MultiSelectWithoutContext = /** @class */ (function (_super) {
                 newItems = __spreadArray(__spreadArray([], _this.value, true), [dataItem], false);
             }
             var text = _this.props.filter !== undefined ? _this.props.filter : _this.state.text;
-            if (text) {
+            if (text && !_this.mobileMode) {
                 if (_this.state.text) {
                     state.data.text = '';
                 }
                 _this.base.filterChanged('', state);
             }
+            if (_this._adaptiveInput) {
+                _this._adaptiveInput.blur();
+            }
+            ;
             if (_this.state.focusedIndex !== undefined) {
                 state.data.focusedIndex = undefined;
             }
@@ -126,7 +130,7 @@ var MultiSelectWithoutContext = /** @class */ (function (_super) {
             if (_this.opened) {
                 _this.base.togglePopup(state);
             }
-            if (!_this.state.focused) {
+            if (!_this.state.focused && !_this.mobileMode) {
                 state.data.focused = true;
                 _this.focus();
             }
@@ -176,10 +180,11 @@ var MultiSelectWithoutContext = /** @class */ (function (_super) {
             state.data.focusedIndex = undefined;
             if (!_this.opened) {
                 _this.base.togglePopup(state);
-                _this.setState({ currentTreeValue: _this.value });
+                _this.setState({ currentValue: _this.value });
             }
             _this.base.filterChanged(value, state);
             _this.applyState(state);
+            _this.setState({ group: undefined });
         };
         _this.clearButtonClick = function (event) {
             var state = _this.base.initState();
@@ -267,7 +272,7 @@ var MultiSelectWithoutContext = /** @class */ (function (_super) {
                         _b["k-list-".concat(_this.mobileMode ? 'lg' : sizeMap[size] || size)] = size,
                         _b['k-virtual-list'] = _this.base.vs.enabled,
                         _b)) },
-                    !list && group && React.createElement(GroupStickyHeader, { group: group, groupMode: 'modern', render: groupStickyHeaderItemRender }),
+                    !list && group && data.length !== 0 && React.createElement(GroupStickyHeader, { group: group, groupMode: 'modern', render: groupStickyHeaderItemRender }),
                     _this.renderList()),
                 footer && React.createElement("div", { className: "k-list-footer" }, footer)));
         };
@@ -298,11 +303,13 @@ 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 = provideLocalizationService(_this);
+            var mobileFilter = filterable ? (React.createElement(ListFilter, { 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 actionSheetProps = {
                 adaptiveTitle: adaptiveTitle,
                 expand: _this.opened,
                 onClose: function (event) { return _this.onCancel(event); },
                 windowWidth: windowWidth,
+                mobileFilter: mobileFilter,
                 footer: {
                     cancelText: _this.localization.toLanguageString(adaptiveModeFooterCancel, messages[adaptiveModeFooterCancel]),
                     onCancel: function (event) { return _this.onCancel(event); },
@@ -312,8 +319,8 @@ var MultiSelectWithoutContext = /** @class */ (function (_super) {
             };
             return (React.createElement(AdaptiveMode, __assign({}, actionSheetProps),
                 React.createElement(ActionSheetContent, { className: '!k-overflow-hidden' },
-                    filterable && React.createElement(ListFilter, { 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 }),
-                    _this.listContainerContent())));
+                    React.createElement("div", { className: 'k-list-container' },
+                        React.createElement("div", { className: 'k-list k-list-lg' }, _this.listContainerContent())))));
         };
         _this.closePopup = function (event) {
             var state = _this.base.initState();
@@ -426,7 +433,7 @@ var MultiSelectWithoutContext = /** @class */ (function (_super) {
                 state.data.focused = true;
             }
             if (_this.mobileMode) {
-                _this.setState({ currentTreeValue: _this.tagsToRender });
+                _this.setState({ currentValue: _this.tagsToRender });
                 if (_this.mobileMode) {
                     window.setTimeout(function () { return _this._adaptiveInput && _this._adaptiveInput.focus(); }, 300);
                 }
@@ -622,8 +629,7 @@ var MultiSelectWithoutContext = /** @class */ (function (_super) {
     /** @hidden */
     MultiSelectWithoutContext.prototype.componentDidUpdate = function (prevProps, prevState) {
         var _a;
-        var _b = this.props, virtual = _b.virtual, _c = _b.groupField, groupField = _c === void 0 ? '' : _c;
-        var _d = this.props.data, data = _d === void 0 ? [] : _d;
+        var _b = this.props, virtual = _b.virtual, _c = _b.groupField, groupField = _c === void 0 ? '' : _c, _d = _b.data, data = _d === void 0 ? [] : _d;
         var skip = virtual ? virtual.skip : 0;
         var prevTotal = prevProps.virtual ? prevProps.virtual.total : 0;
         var prevOpened = prevProps.opened !== undefined ? prevProps.opened : prevState.opened;
@@ -646,6 +652,10 @@ var MultiSelectWithoutContext = /** @class */ (function (_super) {
                 this.base.scrollToVirtualItem(virtual, focusedIndex - skip);
             }
             else if (opening && !virtual) {
+                // Resets the sticky header group value for scenarios with open/close of component's popup
+                if (data && data.length !== 0) {
+                    this.base.resetGroupStickyHeader(data[0][groupField], this);
+                }
                 this.base.scrollToItem(focusedIndex);
             }
             else if (this.opened && prevOpened && focusedItem && this.scrollToFocused) {
@@ -704,7 +714,7 @@ var MultiSelectWithoutContext = /** @class */ (function (_super) {
     MultiSelectWithoutContext.prototype.render = function () {
         var _a, _b;
         var _c = this.props, style = _c.style, className = _c.className, label = _c.label, dir = _c.dir, disabled = _c.disabled, textField = _c.textField, dataItemKey = _c.dataItemKey, virtual = _c.virtual, size = _c.size, rounded = _c.rounded, fillMode = _c.fillMode, loading = _c.loading, filter = _c.filter;
-        var _d = this.state, text = _d.text, focused = _d.focused, focusedTag = _d.focusedTag, currentTreeValue = _d.currentTreeValue;
+        var _d = this.state, text = _d.text, focused = _d.focused, focusedTag = _d.focusedTag, currentValue = _d.currentValue;
         var vs = this.base.vs;
         var id = this.props.id || this._inputId;
         vs.enabled = virtual !== undefined;
@@ -713,7 +723,7 @@ var MultiSelectWithoutContext = /** @class */ (function (_super) {
             vs.total = virtual.total;
             vs.pageSize = virtual.pageSize;
         }
-        var currentTagsToRender = (this.mobileMode && this.opened) ? currentTreeValue : this.tagsToRender;
+        var currentTagsToRender = (this.mobileMode && this.opened) ? currentValue : this.tagsToRender;
         this.setItems(this.tagsToRender, this._tags);
         var isValid = !this.validityStyles || this.validity.valid;
         var clearButton = Boolean(filter !== undefined ? filter : text)
@@ -741,12 +751,12 @@ var MultiSelectWithoutContext = /** @class */ (function (_super) {
         return label ? (React.createElement(FloatingLabel, { label: label, editorId: id, editorValue: text || 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, currentTreeValue = _a.currentTreeValue;
+        var _a = this.state, activedescendant = _a.activedescendant, focusedTag = _a.focusedTag, currentValue = _a.currentValue;
         var _b = this.props, disabled = _b.disabled, placeholder = _b.placeholder, ariaDescribedBy = _b.ariaDescribedBy;
         var text = !this.mobileMode && (this.props.filter !== undefined ? this.props.filter : this.state.text) || '';
         var focusedIndex = this.getFocusedState().focusedIndex;
         var placeholderToShow = this.value.length === 0 && !text ? placeholder : undefined;
-        var adaptivePlaceholder = (currentTreeValue && currentTreeValue.length > 0) ? undefined : placeholder;
+        var adaptivePlaceholder = (currentValue && currentValue.length > 0) ? undefined : placeholder;
         var ariaActivedescendant = activedescendant === ActiveDescendant.TagsList && focusedTag !== undefined ?
             "tag-".concat(this.base.guid, "-").concat(focusedTag.text.replace(/\s+/g, '-')) :
             "option-".concat(this.base.guid, "-").concat(focusedIndex);

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

@@ -159,7 +159,7 @@ export interface MultiSelectProps extends FormComponentProps {
      */
     filter?: string;
     /**
-     * Sets the value of the adaptive filtering input of the of ComboBox.
+     * Sets the value of the adaptive filtering input of the of MultiSelect.
      */
     adaptiveFilter?: string;
     /**

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

@@ -161,4 +161,5 @@ export default class DropDownBase {
     renderScrollElement: () => false | JSX.Element;
     getPopupSettings(): DropDownsPopupSettings;
     getGroupedDataModernMode(data: any[], groupField: string): any[];
+    resetGroupStickyHeader: (groupName: string, that: any) => void;
 }

package/dist/es/common/DropDownBase.js

@@ -103,6 +103,11 @@ var DropDownBase = /** @class */ (function () {
             var vs = _this.vs;
             return vs.enabled && (React.createElement("div", { ref: function (element) { return vs.scrollElement = element; }, key: 'scrollElementKey' }));
         };
+        this.resetGroupStickyHeader = function (groupName, that) {
+            if (groupName !== that.state.group) {
+                that.setState(__assign(__assign({}, that.state), { group: groupName }));
+            }
+        };
         this.listBoxId = guid();
         this.guid = guid();
         this.component = component;

package/dist/es/common/MultiColumnList.js

@@ -15,7 +15,5 @@ import List from './List';
  * @hidden
  */
 export var MultiColumnList = function (props) {
-    // eslint-disable-next-line no-console
-    console.log('%c- props.listStyle:', 'color: #ff4081; font-weight: bold', __assign({}, props.listStyle));
     return (React.createElement(List, __assign({}, props, { wrapperCssClass: "k-table-body k-table-scroller", listClassName: "k-table k-table-list", listStyle: __assign({}, props.listStyle) })));
 };

package/dist/es/package-metadata.js

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

@@ -167,6 +167,7 @@ var AutoCompleteWithoutContext = /** @class */ (function (_super) {
             }
             state.data.focusedItem = undefined;
             _this.applyState(state);
+            _this.setState({ group: undefined });
         };
         _this.clearButtonClick = function (event) {
             var base = _this.base;
@@ -324,6 +325,14 @@ var AutoCompleteWithoutContext = /** @class */ (function (_super) {
         }
         else if (!this._isScrolling) {
             var focusedItemIndex = (_a = this.base.getGroupedDataModernMode(data, groupField)) === null || _a === void 0 ? void 0 : _a.indexOf(focusedItem);
+            if (opening) {
+                // Resets the sticky header group value for scenarios with open/close of component's popup
+                if (data && data.length !== 0) {
+                    this.base.resetGroupStickyHeader(data[0][groupField], this);
+                }
+                this.base.scrollToItem(focusedItemIndex);
+            }
+            ;
             if (opened && prevOpened && focusedItemChanged) {
                 this.base.scrollToItem(focusedItemIndex);
             }
@@ -443,7 +452,7 @@ var AutoCompleteWithoutContext = /** @class */ (function (_super) {
             React.createElement("div", { className: (0, kendo_react_common_1.classNames)('k-list', (_a = {},
                     _a["k-list-".concat(sizeMap[size] || size)] = size,
                     _a)) },
-                !list && group && React.createElement(GroupStickyHeader_1.default, { group: group, groupMode: 'modern', render: groupStickyHeaderItemRender }),
+                !list && group && data.length !== 0 && React.createElement(GroupStickyHeader_1.default, { group: group, groupMode: 'modern', render: groupStickyHeaderItemRender }),
                 this.renderList()),
             footer && React.createElement("div", { className: "k-list-footer" }, footer)));
     };

package/dist/npm/ComboBox/ComboBox.js

@@ -242,6 +242,7 @@ var ComboBoxWithoutContext = /** @class */ (function (_super) {
             }
             _this.base.filterChanged(value, state);
             _this.applyState(state);
+            _this.setState({ group: undefined });
         };
         _this.clearButtonClick = function (event) {
             var state = _this.base.initState();
@@ -387,8 +388,7 @@ var ComboBoxWithoutContext = /** @class */ (function (_super) {
     /** @hidden */
     ComboBoxWithoutContext.prototype.componentDidUpdate = function (prevProps, prevState) {
         var _a;
-        var _b = this.props, dataItemKey = _b.dataItemKey, virtual = _b.virtual, _c = _b.groupField, groupField = _c === void 0 ? '' : _c;
-        var _d = this.props.data, data = _d === void 0 ? [] : _d;
+        var _b = this.props, dataItemKey = _b.dataItemKey, virtual = _b.virtual, _c = _b.groupField, groupField = _c === void 0 ? '' : _c, _d = _b.data, data = _d === void 0 ? [] : _d;
         var prevTotal = prevProps.virtual ? prevProps.virtual.total : 0;
         var opened = this.props.opened !== undefined ? this.props.opened : this.state.opened;
         var prevOpened = prevProps.opened !== undefined ? prevProps.opened : prevState.opened;
@@ -412,6 +412,10 @@ var ComboBoxWithoutContext = /** @class */ (function (_super) {
             }
             else if (opening && !virtual) {
                 this.onPopupOpened();
+                // Resets the sticky header group value for scenarios with open/close of component's popup
+                if (data && data.length !== 0) {
+                    this.base.resetGroupStickyHeader(data[0][groupField], this);
+                }
                 this.base.scrollToItem(selectedItemIndex);
             }
             else if (opened && prevOpened && selectedItem && selectedItemChanged) {
@@ -632,7 +636,7 @@ var ComboBoxWithoutContext = /** @class */ (function (_super) {
                                 _a["k-table-".concat(sizeMap[size] || size)] = list && size,
                                 _a)) },
                             header && React.createElement("div", { className: "k-table-header" }, header),
-                            !list && group && React.createElement(GroupStickyHeader_1.default, { group: group, groupMode: groupMode, render: groupStickyHeaderItemRender }),
+                            !list && group && data.length !== 0 && React.createElement(GroupStickyHeader_1.default, { group: group, groupMode: groupMode, render: groupStickyHeaderItemRender }),
                             this.renderList(),
                             footer && React.createElement("div", { className: "k-list-footer" }, footer)))))));
     };
@@ -663,7 +667,7 @@ var ComboBoxWithoutContext = /** @class */ (function (_super) {
                     _a["k-table-".concat(sizeMap[size] || size)] = list && size,
                     _a)) },
                 header && React.createElement("div", { className: "k-table-header" }, header),
-                !list && group && React.createElement(GroupStickyHeader_1.default, { group: group, groupMode: groupMode, render: groupStickyHeaderItemRender }),
+                !list && group && data.length !== 0 && React.createElement(GroupStickyHeader_1.default, { group: group, groupMode: groupMode, render: groupStickyHeaderItemRender }),
                 this.renderList(),
                 footer && React.createElement("div", { className: "k-list-footer" }, footer))));
     };

package/dist/npm/DropDownList/DropDownList.js

@@ -130,7 +130,7 @@ var DropDownListWithoutContext = /** @class */ (function (_super) {
                 header && React.createElement("div", { className: "k-list-header" }, header),
                 React.createElement("div", { className: (0, kendo_react_common_1.classNames)('k-list', (_a = {}, _a["k-list-".concat(sizeMap[size] || size)] = size, _a['k-virtual-list'] = _this.base.vs.enabled, _a)) },
                     _this.renderDefaultItem(),
-                    !list && group && React.createElement(GroupStickyHeader_1.default, { group: group, groupMode: 'modern', render: groupStickyHeaderItemRender }),
+                    !list && group && data.length !== 0 && React.createElement(GroupStickyHeader_1.default, { group: group, groupMode: 'modern', render: groupStickyHeaderItemRender }),
                     _this.renderList()),
                 footer && React.createElement("div", { className: "k-list-footer" }, footer)));
         };
@@ -294,11 +294,14 @@ var DropDownListWithoutContext = /** @class */ (function (_super) {
                 return;
             }
             var opened = _this.props.opened !== undefined ? _this.props.opened : _this.state.opened;
+            var adaptive = _this.props.adaptive;
+            var _a = _this.state.windowWidth, windowWidth = _a === void 0 ? 0 : _a;
+            var renderAdaptive = windowWidth <= constants_1.MOBILE_MEDIUM_DEVISE && adaptive;
             var state = _this.base.initState();
             state.syntheticEvent = event;
             state.data.focused = false;
             state.events.push({ type: 'onBlur' });
-            if (opened) {
+            if (opened && !renderAdaptive) {
                 _this.base.togglePopup(state);
             }
             _this.applyState(state);
@@ -347,6 +350,7 @@ var DropDownListWithoutContext = /** @class */ (function (_super) {
             }
             _this.base.filterChanged(event.target.value, state);
             _this.applyState(state);
+            _this.setState({ group: undefined });
         };
         _this.onPopupOpened = function () {
             if (_this._filterInput) {
@@ -525,6 +529,10 @@ var DropDownListWithoutContext = /** @class */ (function (_super) {
             }
             else if (opening && !virtual) {
                 this.onPopupOpened();
+                // Resets the sticky header group value for scenarios with open/close of component's popup
+                if (data && data.length !== 0) {
+                    this.base.resetGroupStickyHeader(data[0][groupField], this);
+                }
                 this.base.scrollToItem(selectedItemIndex);
             }
             else if (opened && prevOpened && selectedItem_1 && selectedItemChanged && !this._navigated) {
@@ -669,7 +677,7 @@ var DropDownListWithoutContext = /** @class */ (function (_super) {
                     header && React.createElement("div", { className: "k-list-header" }, header),
                     React.createElement("div", { className: (0, kendo_react_common_1.classNames)('k-list', (_a = {}, _a["k-list-".concat(sizeMap[size] || size)] = size, _a['k-virtual-list'] = this.base.vs.enabled, _a)) },
                         this.renderDefaultItem(),
-                        !list && group && React.createElement(GroupStickyHeader_1.default, { group: group, groupMode: 'modern', render: groupStickyHeaderItemRender }),
+                        !list && group && data.length !== 0 && React.createElement(GroupStickyHeader_1.default, { group: group, groupMode: 'modern', render: groupStickyHeaderItemRender }),
                         this.renderList()),
                     footer && React.createElement("div", { className: "k-list-footer" }, footer)))));
     };

package/dist/npm/MultiColumnComboBox/MultiColumnComboBox.js

@@ -70,15 +70,14 @@ exports.MultiColumnComboBox = React.forwardRef(function (directProps, ref) {
     });
     React.useImperativeHandle(ref, function () { return target.current; });
     var initialGroupHeader = React.useMemo(function () {
-        if (initialGroupHeader === undefined && props.groupField !== undefined && props.data) {
+        if (props.groupField !== undefined && props.data) {
             return (0, utils_1.getItemValue)(props.data[0], props.groupField);
         }
     }, [props.data, props.groupField]);
     var _c = React.useState(initialGroupHeader), groupHeader = _c[0], setGroupHeader = _c[1];
+    var _d = React.useState(true), showStickyHeader = _d[0], setShowStickyHeader = _d[1];
     var header = React.useMemo(function () {
-        var renderer = (React.createElement("th", { className: 'k-table-th', colSpan: columns.length },
-            groupHeader,
-            "    "));
+        var renderer = (React.createElement("th", { className: 'k-table-th', colSpan: columns.length }, groupHeader));
         return (React.createElement(React.Fragment, null,
             props.header,
             React.createElement("div", { className: "k-table-header-wrap" },
@@ -90,8 +89,8 @@ exports.MultiColumnComboBox = React.forwardRef(function (directProps, ref) {
                         React.createElement("tr", { className: 'k-table-row' }, columns.map(function (column, i) {
                             return (React.createElement("th", { className: "k-table-th", key: column.uniqueKey ? column.uniqueKey : i }, column.header || '\u00A0'));
                         })),
-                        groupHeader && React.createElement("tr", { className: 'k-table-group-row' }, props.groupStickyHeaderItemRender ? props.groupStickyHeaderItemRender.call(undefined, renderer, {}) : renderer))))));
-    }, [props.header, columns, groupHeader]);
+                        groupHeader && showStickyHeader && React.createElement("tr", { className: 'k-table-group-row' }, props.groupStickyHeaderItemRender ? props.groupStickyHeaderItemRender.call(undefined, renderer, {}) : renderer))))));
+    }, [props.header, columns, groupHeader, showStickyHeader]);
     var popupWidth = React.useMemo(function () {
         // These additional 4px are coming from the child elements side borders (fixes horizontal scrollbar)
         return "calc(".concat(columns.map(function (column) { return columnWidth(column.width, defaultProps.width); }).filter(Boolean).join(' + '), " + ").concat(scrollbarWidth, "px + 4px)");
@@ -127,17 +126,38 @@ exports.MultiColumnComboBox = React.forwardRef(function (directProps, ref) {
             handler.call(undefined, __assign(__assign({}, event), { target: target.current }));
         }
     }, []);
-    var onOpenHandler = React.useCallback(function (event) { return handleEvent(onOpen, event); }, [onOpen]);
+    var onOpenHandler = React.useCallback(function (event) {
+        // Resets the sticky header group value for scenarios with open/close of component's popup
+        if (!props.virtual) {
+            setGroupHeader(initialGroupHeader);
+        }
+        ;
+        return handleEvent(onOpen, event);
+    }, [handleEvent, onOpen, props.virtual, initialGroupHeader]);
     var onCloseHandler = React.useCallback(function (event) { return handleEvent(onClose, event); }, [onClose]);
     var onFocusHandler = React.useCallback(function (event) { return handleEvent(onFocus, event); }, [onFocus]);
     var onBlurHandler = React.useCallback(function (event) { return handleEvent(onBlur, event); }, [onBlur]);
     var onChangeHandler = React.useCallback(function (event) { return handleEvent(onChange, event); }, [onChange]);
     var onPageChangeHandler = React.useCallback(function (event) { return handleEvent(onPageChange, event); }, [onPageChange]);
-    var onFilterChangeHandler = React.useCallback(function (event) { return handleEvent(onFilterChange, __assign(__assign({}, event), { mobileMode: event.target.mobileMode })); }, [onFilterChange]);
+    var onFilterChangeHandler = React.useCallback(function (event) {
+        setGroupHeader(initialGroupHeader);
+        return handleEvent(onFilterChange, __assign(__assign({}, event), { mobileMode: event.target.mobileMode }));
+    }, [onFilterChange]);
     var onGroupScroll = React.useCallback(function (event) {
         setGroupHeader(event.group);
     }, []);
     React.useEffect(function () { (0, kendo_react_common_1.setScrollbarWidth)(); });
+    React.useEffect(function () {
+        var data = props.data;
+        setGroupHeader(initialGroupHeader);
+        if (data && data.length !== 0) {
+            setShowStickyHeader(true);
+        }
+        else {
+            setShowStickyHeader(false);
+        }
+        ;
+    }, [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 })));
 });

package/dist/npm/MultiSelect/MultiSelect.d.ts

@@ -12,7 +12,7 @@ export interface MultiSelectState extends DropDownStateBase {
     focusedTag?: TagData;
     activedescendant?: ActiveDescendant;
     value?: Array<any>;
-    currentTreeValue?: Array<any>;
+    currentValue?: Array<any>;
     windowWidth?: number;
 }
 /** @hidden */