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

package/dist/npm/MultiSelect/MultiSelect.js

@@ -76,7 +76,7 @@ var MultiSelectWithoutContext = /** @class */ (function (_super) {
         /** @hidden */
         _this.state = {
             activedescendant: settings_1.ActiveDescendant.PopupList,
-            currentTreeValue: []
+            currentValue: []
         };
         _this._element = null;
         _this._valueItemsDuringOnChange = null;
@@ -110,12 +110,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;
             }
@@ -129,7 +133,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();
             }
@@ -179,10 +183,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();
@@ -270,7 +275,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_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)));
         };
@@ -301,11 +306,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 = (0, kendo_react_intl_1.provideLocalizationService)(_this);
+            var mobileFilter = filterable ? (React.createElement(ListFilter_1.default, { value: mobileText, ref: function (adaptiveFilter) { return _this._adaptiveInput = adaptiveFilter && adaptiveFilter.input; }, onChange: _this.onChangeHandler, onKeyDown: _this.onInputKeyDown, size: _this.props.size, rounded: _this.props.rounded, fillMode: _this.props.fillMode })) : null;
             var actionSheetProps = {
                 adaptiveTitle: adaptiveTitle,
                 expand: _this.opened,
                 onClose: function (event) { return _this.onCancel(event); },
                 windowWidth: windowWidth,
+                mobileFilter: mobileFilter,
                 footer: {
                     cancelText: _this.localization.toLanguageString(messages_1.adaptiveModeFooterCancel, messages_1.messages[messages_1.adaptiveModeFooterCancel]),
                     onCancel: function (event) { return _this.onCancel(event); },
@@ -315,8 +322,8 @@ var MultiSelectWithoutContext = /** @class */ (function (_super) {
             };
             return (React.createElement(AdaptiveMode_1.AdaptiveMode, __assign({}, actionSheetProps),
                 React.createElement(kendo_react_layout_1.ActionSheetContent, { className: '!k-overflow-hidden' },
-                    filterable && React.createElement(ListFilter_1.default, { value: mobileText, ref: function (adaptiveFilter) { return _this._adaptiveInput = adaptiveFilter && adaptiveFilter.input; }, onChange: _this.onChangeHandler, onKeyDown: _this.onInputKeyDown, size: _this.props.size, rounded: _this.props.rounded, fillMode: _this.props.fillMode }),
-                    _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();
@@ -429,7 +436,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);
                 }
@@ -625,8 +632,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;
@@ -649,6 +655,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) {
@@ -707,7 +717,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;
@@ -716,7 +726,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)
@@ -744,12 +754,12 @@ var MultiSelectWithoutContext = /** @class */ (function (_super) {
         return label ? (React.createElement(kendo_react_labels_1.FloatingLabel, { label: label, editorId: id, editorValue: text || (0, utils_1.getItemValue)(this.value[0], textField), editorValid: isValid, editorDisabled: disabled, style: { width: style ? style.width : undefined }, children: component })) : component;
     };
     MultiSelectWithoutContext.prototype.renderSearchBar = function (id) {
-        var _a = this.state, activedescendant = _a.activedescendant, focusedTag = _a.focusedTag, 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 === settings_1.ActiveDescendant.TagsList && focusedTag !== undefined ?
             "tag-".concat(this.base.guid, "-").concat(focusedTag.text.replace(/\s+/g, '-')) :
             "option-".concat(this.base.guid, "-").concat(focusedIndex);

package/dist/npm/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/npm/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/npm/common/DropDownBase.js

@@ -105,6 +105,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 = (0, kendo_react_common_1.guid)();
         this.guid = (0, kendo_react_common_1.guid)();
         this.component = component;

package/dist/npm/common/MultiColumnList.js

@@ -18,8 +18,6 @@ var List_1 = require("./List");
  * @hidden
  */
 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_1.default, __assign({}, props, { wrapperCssClass: "k-table-body k-table-scroller", listClassName: "k-table k-table-list", listStyle: __assign({}, props.listStyle) })));
 };
 exports.MultiColumnList = MultiColumnList;

package/dist/npm/package-metadata.js

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