@progress/kendo-react-dropdowns 5.13.0-dev.202304180747 → 5.13.0-dev.202304200917

package/dist/npm/DropDownList/DropDownList.js

@@ -34,6 +34,7 @@ var kendo_react_labels_1 = require("@progress/kendo-react-labels");
 var kendo_svg_icons_1 = require("@progress/kendo-svg-icons");
 var ListContainer_1 = require("../common/ListContainer");
 var ListFilter_1 = require("../common/ListFilter");
+var GroupStickyHeader_1 = require("../common/GroupStickyHeader");
 var ListDefaultItem_1 = require("../common/ListDefaultItem");
 var List_1 = require("../common/List");
 var DropDownBase_1 = require("../common/DropDownBase");
@@ -66,6 +67,7 @@ var DropDownListWithoutContext = /** @class */ (function (_super) {
         _this._filterInput = null;
         _this._navigated = false;
         _this._inputId = (0, kendo_react_common_1.guid)();
+        _this.itemHeight = 0;
         /**
          * @hidden
          */
@@ -99,7 +101,7 @@ var DropDownListWithoutContext = /** @class */ (function (_super) {
         };
         _this.renderListContainer = function () {
             var _a;
-            var _b = _this.props, header = _b.header, footer = _b.footer, dir = _b.dir, _c = _b.data, data = _c === void 0 ? [] : _c, size = _b.size;
+            var _b = _this.props, header = _b.header, footer = _b.footer, dir = _b.dir, _c = _b.data, data = _c === void 0 ? [] : _c, size = _b.size, groupField = _b.groupField, groupStickyHeaderItemRender = _b.groupStickyHeaderItemRender, list = _b.list;
             var base = _this.base;
             var popupSettings = base.getPopupSettings();
             var opened = _this.props.opened !== undefined ? _this.props.opened : _this.state.opened;
@@ -119,24 +121,57 @@ var DropDownListWithoutContext = /** @class */ (function (_super) {
                 },
                 itemsCount: [data.length]
             };
+            var group = _this.state.group;
+            if (group === undefined && groupField !== undefined) {
+                group = (0, utils_1.getItemValue)(data[0], groupField);
+            }
             return (React.createElement(ListContainer_1.default, __assign({}, listContainerProps),
                 _this.renderListFilter(),
                 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 }),
                     _this.renderList()),
                 footer && React.createElement("div", { className: "k-list-footer" }, footer)));
         };
         _this.renderList = function () {
-            var _a = _this.props, _b = _a.data, data = _b === void 0 ? [] : _b, textField = _a.textField, dataItemKey = _a.dataItemKey, _c = _a.virtual, virtual = _c === void 0 ? { skip: 0 } : _c, listNoDataRender = _a.listNoDataRender, itemRender = _a.itemRender;
+            var _a = _this.props, _b = _a.data, data = _b === void 0 ? [] : _b, textField = _a.textField, dataItemKey = _a.dataItemKey, _c = _a.virtual, virtual = _c === void 0 ? { skip: 0 } : _c, groupHeaderItemRender = _a.groupHeaderItemRender, listNoDataRender = _a.listNoDataRender, itemRender = _a.itemRender;
             var vs = _this.base.vs;
             var skip = virtual.skip;
             var opened = _this.props.opened !== undefined ? _this.props.opened : _this.state.opened;
             var popupSettings = _this.base.getPopupSettings();
             var translate = "translateY(".concat(vs.translate, "px)");
-            return (React.createElement(List_1.default, { id: _this.base.listBoxId, show: opened, data: data.slice(), focusedIndex: _this.focusedIndex(), value: _this.value, textField: textField, valueField: dataItemKey, optionsGuid: _this.base.guid, listRef: function (list) { return vs.list = _this.base.list = list; }, wrapperStyle: { maxHeight: popupSettings.height }, wrapperCssClass: "k-list-content", listStyle: vs.enabled ? { transform: translate } : undefined, key: "listkey", skip: skip, onClick: _this.handleItemClick, itemRender: itemRender, noDataRender: listNoDataRender, onScroll: function (e) {
-                    vs.scrollHandler(e);
-                }, wrapperRef: vs.scrollerRef, scroller: _this.base.renderScrollElement() }));
+            return (React.createElement(List_1.default, { id: _this.base.listBoxId, show: opened, data: data.slice(), focusedIndex: _this.focusedIndex(), value: _this.value, textField: textField, valueField: dataItemKey, optionsGuid: _this.base.guid, groupField: _this.props.groupField, groupMode: 'modern', listRef: function (list) { return vs.list = _this.base.list = list; }, wrapperStyle: { maxHeight: popupSettings.height }, wrapperCssClass: "k-list-content", listStyle: vs.enabled ? { transform: translate } : undefined, key: "listkey", skip: skip, onClick: _this.handleItemClick, itemRender: itemRender, groupHeaderItemRender: groupHeaderItemRender, noDataRender: listNoDataRender, onScroll: _this.onScroll, wrapperRef: vs.scrollerRef, scroller: _this.base.renderScrollElement() }));
+        };
+        _this.onScroll = function (event) {
+            var _a = _this.base, vs = _a.vs, list = _a.list;
+            vs.scrollHandler(event);
+            var groupField = _this.props.groupField;
+            var _b = _this.props.data, data = _b === void 0 ? [] : _b;
+            if (!groupField || !data.length) {
+                return;
+            }
+            if (groupField) {
+                var itemHeight = _this.itemHeight =
+                    _this.itemHeight || (vs.enabled ? vs.itemHeight : (list ? list.children[0].offsetHeight : 0));
+                var target = event.target;
+                var scrollTop = target.scrollTop - (vs.skip * itemHeight);
+                data = _this.base.getGroupedDataModernMode(data, groupField);
+                var group = data[0][groupField];
+                for (var i = 1; i < data.length; i++) {
+                    if (itemHeight * i > scrollTop) {
+                        break;
+                    }
+                    if (data[i] && data[i][groupField]) {
+                        group = data[i][groupField];
+                    }
+                }
+                if (group !== _this.state.group) {
+                    _this.setState({
+                        group: group
+                    });
+                }
+            }
         };
         _this.renderListFilter = function () {
             var filterText = _this.props.filter !== undefined ? _this.props.filter : _this.state.text;
@@ -457,7 +492,9 @@ var DropDownListWithoutContext = /** @class */ (function (_super) {
      * @hidden
      */
     DropDownListWithoutContext.prototype.componentDidUpdate = function (prevProps, prevState) {
-        var _a = this.props, _b = _a.data, data = _b === void 0 ? [] : _b, dataItemKey = _a.dataItemKey, virtual = _a.virtual;
+        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 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;
@@ -479,6 +516,9 @@ var DropDownListWithoutContext = /** @class */ (function (_super) {
             var selectedItem_1 = this.value;
             var prevSelectedItem = prevProps.value !== undefined ? prevProps.value : prevState.value;
             var selectedItemIndex = data.findIndex(function (i) { return (0, utils_1.areSame)(i, selectedItem_1, dataItemKey); });
+            if (groupField !== '') {
+                selectedItemIndex = (_a = this.base.getGroupedDataModernMode(data, groupField)) === null || _a === void 0 ? void 0 : _a.indexOf(selectedItem_1);
+            }
             var selectedItemChanged = !(0, utils_1.areSame)(prevSelectedItem, selectedItem_1, dataItemKey);
             if (opening && virtual) {
                 this.base.scrollToVirtualItem(virtual, selectedItemIndex);
@@ -599,7 +639,7 @@ var DropDownListWithoutContext = /** @class */ (function (_super) {
         var _a;
         var _this = this;
         var _b = this.state.windowWidth, windowWidth = _b === void 0 ? 0 : _b;
-        var _c = this.props, header = _c.header, footer = _c.footer, size = _c.size, adaptiveTitle = _c.adaptiveTitle;
+        var _c = this.props, header = _c.header, footer = _c.footer, size = _c.size, adaptiveTitle = _c.adaptiveTitle, groupField = _c.groupField, groupStickyHeaderItemRender = _c.groupStickyHeaderItemRender, list = _c.list, _d = _c.data, data = _d === void 0 ? [] : _d;
         var opened = this.props.opened !== undefined ? this.props.opened : this.state.opened;
         var actionSheetProps = {
             navigatable: false,
@@ -612,6 +652,10 @@ var DropDownListWithoutContext = /** @class */ (function (_super) {
                 ? 'k-adaptive-actionsheet k-actionsheet-fullscreen'
                 : 'k-adaptive-actionsheet k-actionsheet-bottom'
         };
+        var group = this.state.group;
+        if (group === undefined && groupField !== undefined) {
+            group = (0, utils_1.getItemValue)(data[0], groupField);
+        }
         return (React.createElement(React.Fragment, null,
             React.createElement(kendo_react_layout_1.ActionSheet, __assign({}, actionSheetProps),
                 React.createElement(kendo_react_layout_1.ActionSheetHeader, { className: 'k-text-center' },
@@ -625,6 +669,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 }),
                         this.renderList()),
                     footer && React.createElement("div", { className: "k-list-footer" }, footer)))));
     };
@@ -674,11 +719,11 @@ var DropDownListWithoutContext = /** @class */ (function (_super) {
     /**
      * @hidden
      */
-    DropDownListWithoutContext.propTypes = __assign({ delay: PropTypes.number, ignoreCase: PropTypes.bool, iconClassName: PropTypes.string, svgIcon: kendo_react_common_1.svgIconPropType, defaultItem: PropTypes.any, valueRender: PropTypes.func, valueMap: PropTypes.func, validationMessage: PropTypes.string, required: PropTypes.bool, id: PropTypes.string, ariaLabelledBy: PropTypes.string, ariaDescribedBy: PropTypes.string, ariaLabel: PropTypes.string, leftRightKeysNavigation: PropTypes.bool, title: PropTypes.string }, DropDownBase_1.default.propTypes);
+    DropDownListWithoutContext.propTypes = __assign({ delay: PropTypes.number, ignoreCase: PropTypes.bool, iconClassName: PropTypes.string, svgIcon: kendo_react_common_1.svgIconPropType, defaultItem: PropTypes.any, valueRender: PropTypes.func, valueMap: PropTypes.func, validationMessage: PropTypes.string, required: PropTypes.bool, id: PropTypes.string, ariaLabelledBy: PropTypes.string, ariaDescribedBy: PropTypes.string, ariaLabel: PropTypes.string, leftRightKeysNavigation: PropTypes.bool, title: PropTypes.string, groupField: PropTypes.string, list: PropTypes.any }, DropDownBase_1.default.propTypes);
     /**
      * @hidden
      */
-    DropDownListWithoutContext.defaultProps = __assign(__assign({ delay: 500, tabIndex: 0, ignoreCase: true }, DropDownBase_1.default.defaultProps), { required: false, size: 'medium', rounded: 'medium', fillMode: 'solid' });
+    DropDownListWithoutContext.defaultProps = __assign(__assign({ delay: 500, tabIndex: 0, ignoreCase: true }, DropDownBase_1.default.defaultProps), { required: false, size: 'medium', rounded: 'medium', fillMode: 'solid', groupMode: 'modern' });
     return DropDownListWithoutContext;
 }(React.Component));
 exports.DropDownListWithoutContext = DropDownListWithoutContext;

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

@@ -2,6 +2,8 @@
 import { DropDownList } from './DropDownList';
 import { FilterChangeEvent, ChangeEvent, OpenEvent, CloseEvent, FocusEvent, BlurEvent, PageChangeEvent } from './../common/events';
 import { VirtualizationSettings, DropDownsPopupSettings } from '../common/settings';
+import { ListGroupItemProps } from '../common/ListGroupItem';
+import { GroupStickyHeaderProps } from '../common/GroupStickyHeader';
 import { ListItemProps } from '../common/ListItem';
 import { FormComponentProps, SVGIcon } from '@progress/kendo-react-common';
 /**
@@ -297,4 +299,24 @@ export interface DropDownListProps extends FormComponentProps {
      * Specifies the text that is rendered as title in the adaptive popup.
      */
     adaptiveTitle?: string;
+    /**
+     * Sets the data item field that represents the start of a group. Applicable to objects data.
+     */
+    groupField?: string;
+    /**
+     * Fires when a DropDownList's group header item is about to be rendered. Used to override the default appearance of the group's headers.
+     */
+    groupHeaderItemRender?: (li: React.ReactElement<HTMLLIElement>, itemProps: ListGroupItemProps) => React.ReactNode;
+    /**
+     * Fires when a DropDownList's sticky group header item is about to be rendered. Used to override the default appearance of the sticky group header of the component.
+     */
+    groupStickyHeaderItemRender?: (div: React.ReactElement<HTMLDivElement>, stickyHeaderProps: GroupStickyHeaderProps) => React.ReactNode;
+    /**
+     * @hidden
+     */
+    list?: any;
+    /**
+     * @hidden
+     */
+    groupMode?: string;
 }

package/dist/npm/DropDownTree/DropDownTree.js

@@ -19,6 +19,7 @@ var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
     }
     return to.concat(ar || Array.prototype.slice.call(from));
 };
+var _this = this;
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.DropDownTree = exports.DropDownTreePropsContext = void 0;
 var React = require("react");
@@ -37,6 +38,9 @@ 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 kendo_svg_icons_1 = require("@progress/kendo-svg-icons");
+var AdaptiveMode_1 = require("../common/AdaptiveMode");
+var kendo_react_layout_1 = require("@progress/kendo-react-layout");
+var constants_1 = require("../common/constants");
 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) {
@@ -91,6 +95,7 @@ exports.DropDownTree = React.forwardRef(function (directProps, ref) {
     var target = React.useRef(null);
     var elementRef = React.useRef(null);
     var inputRef = React.useRef(null);
+    var adaptiveInputRef = React.useRef(null);
     var selectRef = React.useRef(null);
     var treeViewRef = React.useRef(null);
     var skipFocusRef = React.useRef(false);
@@ -116,6 +121,8 @@ exports.DropDownTree = React.forwardRef(function (directProps, ref) {
     var isOpen = opened !== undefined ? opened : open;
     var _l = React.useState(false), focused = _l[0], setFocused = _l[1];
     var _m = React.useState(''), filter = _m[0], setFilter = _m[1];
+    var _o = React.useState(), windowWidth = _o[0], setWindowWidth = _o[1];
+    var isAdaptive = !!(windowWidth && windowWidth <= constants_1.MOBILE_MEDIUM_DEVISE && props.adaptive);
     var setValidity = React.useCallback(function () {
         if (selectRef.current && selectRef.current.setCustomValidity) {
             selectRef.current.setCustomValidity(validity.valid
@@ -124,6 +131,17 @@ exports.DropDownTree = React.forwardRef(function (directProps, ref) {
         }
     }, [validationMessage, validity]);
     React.useEffect(setValidity);
+    React.useEffect(function () {
+        var observerResize = kendo_react_common_1.canUseDOM && window.ResizeObserver && new window.ResizeObserver(calculateMedia.bind(_this));
+        if ((document === null || document === void 0 ? void 0 : document.body) && observerResize) {
+            observerResize.observe(document.body);
+        }
+        return function () {
+            if ((document === null || document === void 0 ? void 0 : document.body) && observerResize) {
+                observerResize.disconnect();
+            }
+        };
+    }, []);
     var openPopup = React.useCallback(function (event) {
         if (!isOpen) {
             if (onOpen) {
@@ -143,9 +161,14 @@ exports.DropDownTree = React.forwardRef(function (directProps, ref) {
             }
             if (opened === undefined) {
                 setOpen(false);
+                if (isAdaptive) {
+                    setTimeout(function () {
+                        focusElement(adaptiveInputRef.current);
+                    }, 300);
+                }
             }
         }
-    }, [isOpen, opened, onClose]);
+    }, [isOpen, opened, onClose, isAdaptive]);
     var onWrapperClick = React.useCallback(function (event) {
         if (!event.isDefaultPrevented() && target.current) {
             setFocused(true);
@@ -261,7 +284,9 @@ exports.DropDownTree = React.forwardRef(function (directProps, ref) {
                 var focusEvent = __assign({}, ev);
                 props.onBlur.call(undefined, focusEvent);
             }
-            closePopup(ev);
+            if (!isAdaptive) {
+                closePopup(ev);
+            }
         }
     }, [focused, props.onBlur, isOpen, opened, onClose]);
     var onWrapperMouseDown = React.useCallback(function () {
@@ -269,7 +294,12 @@ exports.DropDownTree = React.forwardRef(function (directProps, ref) {
             // moving focus from treeview to dropdown triggers Focus and Blur events.
             switchFocus(kendo_react_common_1.noop);
         }
-    }, [focused]);
+        if (isAdaptive) {
+            setTimeout(function () {
+                focusElement(adaptiveInputRef.current);
+            }, 300);
+        }
+    }, [focused, isAdaptive]);
     var changeValue = React.useCallback(function (event, newValue, hierarchicalIndex) {
         if (props.onChange) {
             var changeEvent = __assign({ value: newValue, level: hierarchicalIndex ? toLevel(hierarchicalIndex) : [] }, event);
@@ -334,6 +364,27 @@ exports.DropDownTree = React.forwardRef(function (directProps, ref) {
             }
         }
     }, [props.onFilterChange, props.filter, props.textField]);
+    var renderAdaptiveListContainer = function () {
+        var mobileFilter = props.filterable ? (React.createElement(ListFilter_1.default, { value: props.filter === undefined ? filter : props.filter, inputRef: adaptiveInputRef, onChange: onFilterChange, onKeyDown: onInputKeyDown, size: size, rounded: rounded, fillMode: fillMode })) : null;
+        var actionSheetProps = {
+            adaptiveTitle: props.adaptiveTitle,
+            expand: isOpen,
+            onClose: function (event) { return closePopup(event); },
+            windowWidth: windowWidth,
+            mobileFilter: mobileFilter
+        };
+        return (React.createElement(AdaptiveMode_1.AdaptiveMode, __assign({}, actionSheetProps),
+            React.createElement(kendo_react_layout_1.ActionSheetContent, { className: '!k-overflow-hidden' },
+                React.createElement("div", { className: 'k-list-container' },
+                    React.createElement("div", { className: 'k-list k-list-lg' }, 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]))))))));
+    };
+    var calculateMedia = React.useCallback(function (entries) {
+        for (var _i = 0, entries_1 = entries; _i < entries_1.length; _i++) {
+            var entry = entries_1[_i];
+            setWindowWidth(entry.target.clientWidth);
+        }
+        ;
+    }, []);
     var treeViewData = React.useMemo(function () {
         return (controlled || !hasValue) ? data :
             (0, kendo_react_common_1.mapTree)(data, subItemsField, function (item) {
@@ -346,27 +397,29 @@ exports.DropDownTree = React.forwardRef(function (directProps, ref) {
     var localization = (0, kendo_react_intl_1.useLocalization)();
     var isValid = !validityStyles || validity.valid;
     var size = props.size, rounded = props.rounded, fillMode = props.fillMode;
-    var dropdowntree = (React.createElement("span", { className: (0, kendo_react_common_1.classNames)('k-dropdowntree k-picker', props.className, (_a = {},
-            _a["k-picker-".concat(sizeMap[size] || size)] = size,
-            _a["k-rounded-".concat(roundedMap[rounded] || rounded)] = rounded,
-            _a["k-picker-".concat(fillMode)] = fillMode,
-            _a['k-focus'] = focused,
-            _a['k-invalid'] = !isValid,
-            _a['k-loading'] = props.loading,
-            _a['k-required'] = required,
-            _a['k-disabled'] = props.disabled,
-            _a)), tabIndex: tabIndex, accessKey: props.accessKey, id: id, style: label ? __assign(__assign({}, style), { width: undefined }) : style, dir: dir, ref: elementRef, onKeyDown: disabled ? undefined : onWrapperKeyDown, onMouseDown: onWrapperMouseDown, onClick: disabled ? undefined : onWrapperClick, onFocus: onFocus, onBlur: onBlur, role: "combobox", "aria-haspopup": "tree", "aria-expanded": isOpen, "aria-disabled": disabled, "aria-label": label, "aria-labelledby": props.ariaLabelledBy, "aria-describedby": props.ariaDescribedBy, "aria-required": required },
-        React.createElement("span", { className: "k-input-inner" },
-            React.createElement(ValueComponent, { item: value }, currentValueText || placeholder)),
-        props.loading && React.createElement(kendo_react_common_1.IconWrap, { className: "k-input-loading-icon", name: 'loading' }),
-        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(kendo_react_common_1.IconWrap, { name: 'x', icon: kendo_svg_icons_1.xIcon }))),
-        React.createElement(kendo_react_buttons_1.Button, { tabIndex: -1, type: "button", "aria-label": "select", className: "k-input-button", size: size, fillMode: fillMode, themeColor: "base", rounded: null, icon: "caret-alt-down", svgIcon: kendo_svg_icons_1.caretAltDownIcon }),
-        React.createElement("select", { name: name, ref: selectRef, tabIndex: -1, "aria-hidden": true, title: label, style: { opacity: 0, width: 1, border: 0, zIndex: -1, position: 'absolute', left: '50%' } },
-            React.createElement("option", { value: props.valueMap ? props.valueMap.call(undefined, value) : value })),
-        React.createElement(kendo_react_popup_1.Popup, { className: (0, kendo_react_common_1.classNames)(popupSettings.className, { 'k-rtl': dir === 'rtl' }), popupClass: (0, kendo_react_common_1.classNames)(popupSettings.popupClass, 'k-list-container', 'k-dropdowntree-popup'), style: popupStyles, animate: popupSettings.animate, anchor: elementRef.current, show: isOpen, onOpen: onPopupOpened, onClose: onPopupClosed, appendTo: popupSettings.appendTo },
-            props.filterable && (React.createElement(ListFilter_1.default, { value: props.filter === undefined ? filter : props.filter, inputRef: inputRef, onChange: onFilterChange, onKeyDown: onInputKeyDown, size: size, rounded: rounded, fillMode: fillMode })),
-            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]))))));
+    var dropdowntree = (React.createElement(React.Fragment, null,
+        React.createElement("span", { className: (0, kendo_react_common_1.classNames)('k-dropdowntree k-picker', props.className, (_a = {},
+                _a["k-picker-".concat(sizeMap[size] || size)] = size,
+                _a["k-rounded-".concat(roundedMap[rounded] || rounded)] = rounded,
+                _a["k-picker-".concat(fillMode)] = fillMode,
+                _a['k-focus'] = focused,
+                _a['k-invalid'] = !isValid,
+                _a['k-loading'] = props.loading,
+                _a['k-required'] = required,
+                _a['k-disabled'] = props.disabled,
+                _a)), tabIndex: tabIndex, accessKey: props.accessKey, id: id, style: label ? __assign(__assign({}, style), { width: undefined }) : style, dir: dir, ref: elementRef, onKeyDown: disabled ? undefined : onWrapperKeyDown, onMouseDown: onWrapperMouseDown, onClick: disabled ? undefined : onWrapperClick, onFocus: onFocus, onBlur: onBlur, role: "combobox", "aria-haspopup": "tree", "aria-expanded": isOpen, "aria-disabled": disabled, "aria-label": label, "aria-labelledby": props.ariaLabelledBy, "aria-describedby": props.ariaDescribedBy, "aria-required": required },
+            React.createElement("span", { className: "k-input-inner" },
+                React.createElement(ValueComponent, { item: value }, currentValueText || placeholder)),
+            props.loading && React.createElement(kendo_react_common_1.IconWrap, { className: "k-input-loading-icon", name: 'loading' }),
+            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(kendo_react_common_1.IconWrap, { name: 'x', icon: kendo_svg_icons_1.xIcon }))),
+            React.createElement(kendo_react_buttons_1.Button, { tabIndex: -1, type: "button", "aria-label": "select", className: "k-input-button", size: size, fillMode: fillMode, themeColor: "base", rounded: null, icon: "caret-alt-down", svgIcon: kendo_svg_icons_1.caretAltDownIcon }),
+            React.createElement("select", { name: name, ref: selectRef, tabIndex: -1, "aria-hidden": true, title: label, style: { opacity: 0, width: 1, border: 0, zIndex: -1, position: 'absolute', left: '50%' } },
+                React.createElement("option", { value: props.valueMap ? props.valueMap.call(undefined, value) : value })),
+            !isAdaptive && React.createElement(kendo_react_popup_1.Popup, { className: (0, kendo_react_common_1.classNames)(popupSettings.className, { 'k-rtl': dir === 'rtl' }), popupClass: (0, kendo_react_common_1.classNames)(popupSettings.popupClass, 'k-list-container', 'k-dropdowntree-popup'), style: popupStyles, animate: popupSettings.animate, anchor: elementRef.current, show: isOpen, onOpen: onPopupOpened, onClose: onPopupClosed, appendTo: popupSettings.appendTo },
+                props.filterable && (React.createElement(ListFilter_1.default, { value: props.filter === undefined ? filter : props.filter, inputRef: inputRef, onChange: onFilterChange, onKeyDown: onInputKeyDown, size: size, rounded: rounded, fillMode: fillMode })),
+                data.length > 0 ? (React.createElement(kendo_react_treeview_1.TreeView, { ref: treeViewRef, tabIndex: tabIndex, data: treeViewData, focusIdField: dataItemKey, textField: props.textField, selectField: selectField, expandField: props.expandField, childrenField: subItemsField, expandIcons: true, onItemClick: onChange, onExpandChange: onExpand, size: size, item: props.item })) : (React.createElement(NoData, null, localization.toLanguageString(messages_1.nodata, messages_1.messages[messages_1.nodata]))))),
+        isAdaptive && renderAdaptiveListContainer()));
     return label ? (React.createElement(kendo_react_labels_1.FloatingLabel, { label: label, editorValue: currentValueText, editorPlaceholder: placeholder, editorValid: isValid, editorDisabled: disabled, editorId: id, style: { width: style ? style.width : undefined }, children: dropdowntree, dir: dir })) : dropdowntree;
 });
 var propTypes = {
@@ -418,7 +471,9 @@ var propTypes = {
     onExpandChange: PropTypes.func,
     item: PropTypes.func,
     valueHolder: PropTypes.func,
-    listNoData: PropTypes.func
+    listNoData: PropTypes.func,
+    adaptiveTitle: PropTypes.string,
+    adaptive: PropTypes.bool
 };
 exports.DropDownTree.displayName = 'KendoReactDropDownTree';
 exports.DropDownTree.defaultProps = defaultProps;

package/dist/npm/DropDownTree/DropDownTreeProps.d.ts

@@ -283,4 +283,12 @@ export interface DropDownTreeProps extends FormComponentProps {
      * @default `solid`
      */
     fillMode?: null | 'solid' | 'flat' | 'outline';
+    /**
+     * Providing different rendering of the popup element based on the screen dimensions.
+     */
+    adaptive?: boolean;
+    /**
+     * Specifies the text that is rendered as title in the adaptive popup.
+     */
+    adaptiveTitle?: string;
 }

package/dist/npm/MultiColumnComboBox/MultiColumnComboBox.js

@@ -76,6 +76,9 @@ exports.MultiColumnComboBox = React.forwardRef(function (directProps, ref) {
     }, [props.data, props.groupField]);
     var _c = React.useState(initialGroupHeader), groupHeader = _c[0], setGroupHeader = _c[1];
     var header = React.useMemo(function () {
+        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 +90,7 @@ 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' },
-                            React.createElement("th", { className: 'k-table-th', colSpan: columns.length }, groupHeader)))))));
+                        groupHeader && React.createElement("tr", { className: 'k-table-group-row' }, props.groupStickyHeaderItemRender ? props.groupStickyHeaderItemRender.call(undefined, renderer, {}) : renderer))))));
     }, [props.header, columns, groupHeader]);
     var popupWidth = React.useMemo(function () {
         // These additional 4px are coming from the child elements side borders (fixes horizontal scrollbar)
@@ -96,7 +98,7 @@ exports.MultiColumnComboBox = React.forwardRef(function (directProps, ref) {
     }, [columns, scrollbarWidth]);
     var skip = props.virtual ? props.virtual.skip : 0;
     var itemRender = React.useCallback(function (li, liProps) {
-        var children = columns.map(function (column, i) { return (React.createElement("span", { className: "k-table-td", style: { width: column.width ? column.width : defaultProps.width }, key: column.uniqueKey ? column.uniqueKey : i }, column.field ? (0, kendo_react_common_1.getter)(column.field)(liProps.dataItem) : '')); });
+        var children = columns.map(function (column, i) { return (React.createElement("span", { className: !props.itemRender ? 'k-table-td' : undefined, style: !props.itemRender ? { width: column.width ? column.width : defaultProps.width } : undefined, key: column.uniqueKey ? column.uniqueKey : i }, column.field ? (0, kendo_react_common_1.getter)(column.field)(liProps.dataItem) : '')); });
         var group = undefined;
         var curGroup, prevGroup, groupGetter, data = props.data || [];
         var index = liProps.index - skip;
@@ -108,7 +110,7 @@ exports.MultiColumnComboBox = React.forwardRef(function (directProps, ref) {
                 group = curGroup;
             }
         }
-        if (group) {
+        if (group && props.groupMode === 'classic') {
             children.push(React.createElement("div", { key: "group", className: "k-table-td k-table-group-td" },
                 React.createElement("span", null, group)));
         }
@@ -137,7 +139,7 @@ exports.MultiColumnComboBox = React.forwardRef(function (directProps, ref) {
     }, []);
     React.useEffect(function () { (0, kendo_react_common_1.setScrollbarWidth)(); });
     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, size: props.size, rounded: props.rounded, fillMode: props.fillMode, 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 })));
+    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 })));
 });
 var propTypes = __assign(__assign({}, ComboBox_1.ComboBoxWithoutContext.propTypes), { columns: PropTypes.any.isRequired });
 var defaultProps = {

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

@@ -41,6 +41,8 @@ export declare class MultiSelectWithoutContext extends React.Component<MultiSele
         id: PropTypes.Requireable<string>;
         ariaLabelledBy: PropTypes.Requireable<string>;
         ariaDescribedBy: PropTypes.Requireable<string>;
+        groupField: PropTypes.Requireable<string>;
+        list: PropTypes.Requireable<any>;
         filterable: PropTypes.Requireable<boolean>;
         filter: PropTypes.Requireable<string>;
         virtual: PropTypes.Requireable<PropTypes.InferProps<{
@@ -91,6 +93,7 @@ export declare class MultiSelectWithoutContext extends React.Component<MultiSele
         size: "small" | "medium" | "large" | null | undefined;
         rounded: "small" | "medium" | "full" | "large" | null | undefined;
         fillMode: "flat" | "outline" | "solid" | null | undefined;
+        groupMode: string | undefined;
         popupSettings: {
             height: string;
         };
@@ -107,6 +110,7 @@ export declare class MultiSelectWithoutContext extends React.Component<MultiSele
     private readonly _tags;
     private _input;
     private _skipFocusEvent;
+    private itemHeight;
     protected scrollToFocused: boolean;
     constructor(props: MultiSelectProps);
     /**
@@ -175,6 +179,7 @@ export declare class MultiSelectWithoutContext extends React.Component<MultiSele
     private getFocusedState;
     private renderListContainer;
     private renderList;
+    private onScroll;
     private customItemSelect;
     private handleWrapperClick;
     private handleItemClick;

package/dist/npm/MultiSelect/MultiSelect.js

@@ -43,6 +43,7 @@ var kendo_svg_icons_1 = require("@progress/kendo-svg-icons");
 var kendo_react_labels_1 = require("@progress/kendo-react-labels");
 var ListContainer_1 = require("../common/ListContainer");
 var List_1 = require("../common/List");
+var GroupStickyHeader_1 = require("../common/GroupStickyHeader");
 var TagList_1 = require("./TagList");
 var SearchBar_1 = require("../common/SearchBar");
 var DropDownBase_1 = require("../common/DropDownBase");
@@ -79,6 +80,7 @@ var MultiSelectWithoutContext = /** @class */ (function (_super) {
         _this._tags = [];
         _this._input = null;
         _this._skipFocusEvent = false;
+        _this.itemHeight = 0;
         _this.scrollToFocused = false;
         /**
          * @hidden
@@ -253,7 +255,7 @@ var MultiSelectWithoutContext = /** @class */ (function (_super) {
         _this.renderListContainer = function () {
             var _a, _b;
             var base = _this.base;
-            var _c = _this.props, header = _c.header, footer = _c.footer, allowCustom = _c.allowCustom, dir = _c.dir, _d = _c.data, data = _d === void 0 ? [] : _d, size = _c.size;
+            var _c = _this.props, header = _c.header, footer = _c.footer, allowCustom = _c.allowCustom, dir = _c.dir, _d = _c.data, data = _d === void 0 ? [] : _d, size = _c.size, groupStickyHeaderItemRender = _c.groupStickyHeaderItemRender, groupField = _c.groupField, list = _c.list;
             var popupSettings = _this.base.getPopupSettings();
             var opened = _this.props.opened !== undefined ? _this.props.opened : _this.state.opened;
             var text = _this.props.filter !== undefined ? _this.props.filter : _this.state.text;
@@ -280,26 +282,60 @@ var MultiSelectWithoutContext = /** @class */ (function (_super) {
                 React.createElement("div", { className: (0, kendo_react_common_1.classNames)('k-list-item k-custom-item', { 'k-focus': isCustom(focusedType) }), style: { fontStyle: 'italic' } },
                     text,
                     React.createElement(kendo_react_common_1.IconWrap, { name: 'plus', icon: kendo_svg_icons_1.plusIcon, style: { position: 'absolute', right: '0.5em' } }))));
+            var group = _this.state.group;
+            if (group === undefined && groupField !== undefined) {
+                group = (0, utils_1.getItemValue)(data[0], groupField);
+            }
             return (React.createElement(ListContainer_1.default, __assign({}, listContainerProps),
                 header && React.createElement("div", { className: "k-list-header" }, header),
                 customItem,
                 React.createElement("div", { className: (0, kendo_react_common_1.classNames)('k-list', (_b = {},
                         _b["k-list-".concat(sizeMap[size] || size)] = size,
                         _b['k-virtual-list'] = _this.base.vs.enabled,
-                        _b)) }, _this.renderList()),
+                        _b)) },
+                    !list && group && React.createElement(GroupStickyHeader_1.default, { group: group, groupMode: 'modern', render: groupStickyHeaderItemRender }),
+                    _this.renderList()),
                 footer && React.createElement("div", { className: "k-list-footer" }, footer)));
         };
         _this.renderList = function () {
-            var _a = _this.props, _b = _a.data, data = _b === void 0 ? [] : _b, textField = _a.textField, listNoDataRender = _a.listNoDataRender, itemRender = _a.itemRender, dataItemKey = _a.dataItemKey, virtual = _a.virtual;
+            var _a = _this.props, _b = _a.data, data = _b === void 0 ? [] : _b, textField = _a.textField, listNoDataRender = _a.listNoDataRender, itemRender = _a.itemRender, groupHeaderItemRender = _a.groupHeaderItemRender, dataItemKey = _a.dataItemKey, virtual = _a.virtual;
             var vs = _this.base.vs;
             var skip = virtual ? virtual.skip : 0;
             var opened = _this.props.opened !== undefined ? _this.props.opened : _this.state.opened;
             var focusedIndex = _this.getFocusedState().focusedIndex;
             var popupSettings = _this.base.getPopupSettings();
             var translate = "translateY(".concat(vs.translate, "px)");
-            return (React.createElement(List_1.default, { id: _this.base.listBoxId, show: opened, data: data.slice(), focusedIndex: focusedIndex - skip, value: _this.value, textField: textField, valueField: dataItemKey, optionsGuid: _this.base.guid, listRef: function (list) { vs.list = _this.base.list = list; }, wrapperStyle: { maxHeight: popupSettings.height }, wrapperCssClass: "k-list-content", listStyle: vs.enabled ? { transform: translate } : undefined, key: "listKey", skip: skip, onClick: _this.handleItemClick, itemRender: itemRender, noDataRender: listNoDataRender, onMouseDown: preventDefault, onBlur: _this.handleBlur, onScroll: function (e) {
-                    vs.scrollHandler(e);
-                }, wrapperRef: vs.scrollerRef, scroller: _this.base.renderScrollElement() }));
+            return (React.createElement(List_1.default, { id: _this.base.listBoxId, show: opened, data: data.slice(), focusedIndex: focusedIndex - skip, value: _this.value, textField: textField, valueField: dataItemKey, optionsGuid: _this.base.guid, groupField: _this.props.groupField, groupMode: 'modern', listRef: function (list) { vs.list = _this.base.list = list; }, wrapperStyle: { maxHeight: popupSettings.height }, wrapperCssClass: "k-list-content", listStyle: vs.enabled ? { transform: translate } : undefined, key: "listKey", skip: skip, onClick: _this.handleItemClick, itemRender: itemRender, groupHeaderItemRender: groupHeaderItemRender, noDataRender: listNoDataRender, onMouseDown: preventDefault, onBlur: _this.handleBlur, onScroll: _this.onScroll, wrapperRef: vs.scrollerRef, scroller: _this.base.renderScrollElement() }));
+        };
+        _this.onScroll = function (event) {
+            var _a = _this.base, vs = _a.vs, list = _a.list;
+            vs.scrollHandler(event);
+            var groupField = _this.props.groupField;
+            var _b = _this.props.data, data = _b === void 0 ? [] : _b;
+            if (!groupField || !data.length) {
+                return;
+            }
+            if (groupField) {
+                var itemHeight = _this.itemHeight =
+                    _this.itemHeight || (vs.enabled ? vs.itemHeight : (list ? list.children[0].offsetHeight : 0));
+                var target = event.target;
+                var scrollTop = target.scrollTop - (vs.skip * itemHeight);
+                data = _this.base.getGroupedDataModernMode(data, groupField);
+                var group = data[0][groupField];
+                for (var i = 1; i < data.length; i++) {
+                    if (itemHeight * i > scrollTop) {
+                        break;
+                    }
+                    if (data[i] && data[i][groupField]) {
+                        group = data[i][groupField];
+                    }
+                }
+                if (group !== _this.state.group) {
+                    _this.setState({
+                        group: group
+                    });
+                }
+            }
         };
         _this.customItemSelect = function (event) {
             var _a;
@@ -481,7 +517,9 @@ var MultiSelectWithoutContext = /** @class */ (function (_super) {
      * @hidden
      */
     MultiSelectWithoutContext.prototype.componentDidUpdate = function (prevProps, prevState) {
-        var virtual = this.props.virtual;
+        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 skip = virtual ? virtual.skip : 0;
         var prevTotal = prevProps.virtual ? prevProps.virtual.total : 0;
         var opened = this.props.opened !== undefined ? this.props.opened : this.state.opened;
@@ -497,7 +535,10 @@ var MultiSelectWithoutContext = /** @class */ (function (_super) {
             this.base.vs.reset();
         }
         else {
-            var _a = this.getFocusedState(), focusedItem = _a.focusedItem, focusedIndex = _a.focusedIndex;
+            var _e = this.getFocusedState(), focusedItem = _e.focusedItem, focusedIndex = _e.focusedIndex;
+            if (groupField !== '') {
+                focusedIndex = (_a = this.base.getGroupedDataModernMode(data, groupField)) === null || _a === void 0 ? void 0 : _a.indexOf(focusedItem);
+            }
             if (opening && virtual) {
                 this.base.scrollToVirtualItem(virtual, focusedIndex - skip);
             }
@@ -746,11 +787,11 @@ var MultiSelectWithoutContext = /** @class */ (function (_super) {
     MultiSelectWithoutContext.propTypes = __assign(__assign({}, DropDownBase_1.default.propTypes), { autoClose: PropTypes.bool, value: PropTypes.arrayOf(PropTypes.any), defaultValue: PropTypes.arrayOf(PropTypes.any), dataItemKey: PropTypes.string, placeholder: PropTypes.string, tags: PropTypes.arrayOf(PropTypes.shape({
             text: PropTypes.string,
             data: PropTypes.arrayOf(PropTypes.any)
-        })), tagRender: PropTypes.func, id: PropTypes.string, ariaLabelledBy: PropTypes.string, ariaDescribedBy: PropTypes.string });
+        })), tagRender: PropTypes.func, id: PropTypes.string, ariaLabelledBy: PropTypes.string, ariaDescribedBy: PropTypes.string, groupField: PropTypes.string, list: PropTypes.any });
     /**
      * @hidden
      */
-    MultiSelectWithoutContext.defaultProps = __assign(__assign({}, DropDownBase_1.default.defaultProps), { autoClose: true, required: false, size: 'medium', rounded: 'medium', fillMode: 'solid' });
+    MultiSelectWithoutContext.defaultProps = __assign(__assign({}, DropDownBase_1.default.defaultProps), { autoClose: true, required: false, size: 'medium', rounded: 'medium', fillMode: 'solid', groupMode: 'modern' });
     return MultiSelectWithoutContext;
 }(React.Component));
 exports.MultiSelectWithoutContext = MultiSelectWithoutContext;