@progress/kendo-react-dropdowns 5.1.0-dev.202202221154 → 5.1.0-dev.202202240928

package/dist/npm/MultiColumnComboBox/MultiColumnComboBox.js

@@ -25,7 +25,7 @@ var PropTypes = require("prop-types");
 var MultiColumnList_1 = require("./../common/MultiColumnList");
 var kendo_react_common_1 = require("@progress/kendo-react-common");
 var ComboBox_1 = require("../ComboBox/ComboBox");
-var sizeMap = kendo_react_common_1.kendoThemeMaps.sizeMap;
+var utils_1 = require("../common/utils");
 var columnWidth = function (width, defaultWidth) {
     if (width) {
         return typeof width === 'number' ? width + 'px' : width;
@@ -47,12 +47,11 @@ exports.MultiColumnComboBoxPropsContext = kendo_react_common_1.createPropsContex
  *
  */
 exports.MultiColumnComboBox = React.forwardRef(function (directProps, ref) {
-    var _a;
     var props = kendo_react_common_1.usePropsContext(exports.MultiColumnComboBoxPropsContext, directProps);
     var target = React.useRef(null);
     var comboBoxRef = React.useRef(null);
     var scrollbarWidth = kendo_react_common_1.getScrollbarWidth();
-    var _b = props.columns, columns = _b === void 0 ? defaultProps.columns : _b, _c = props.popupSettings, popupSettings = _c === void 0 ? defaultProps.popupSettings : _c, size = props.size, onOpen = props.onOpen, onClose = props.onClose, onFocus = props.onFocus, onBlur = props.onBlur, onChange = props.onChange, onFilterChange = props.onFilterChange, onPageChange = props.onPageChange, other = __rest(props, ["columns", "popupSettings", "size", "onOpen", "onClose", "onFocus", "onBlur", "onChange", "onFilterChange", "onPageChange"]);
+    var _a = props.columns, columns = _a === void 0 ? defaultProps.columns : _a, _b = props.popupSettings, popupSettings = _b === void 0 ? defaultProps.popupSettings : _b, size = props.size, onOpen = props.onOpen, onClose = props.onClose, onFocus = props.onFocus, onBlur = props.onBlur, onChange = props.onChange, onFilterChange = props.onFilterChange, onPageChange = props.onPageChange, other = __rest(props, ["columns", "popupSettings", "size", "onOpen", "onClose", "onFocus", "onBlur", "onChange", "onFilterChange", "onPageChange"]);
     React.useImperativeHandle(target, function () {
         return ({
             element: comboBoxRef.current && comboBoxRef.current.element,
@@ -67,12 +66,15 @@ exports.MultiColumnComboBox = React.forwardRef(function (directProps, ref) {
         });
     });
     React.useImperativeHandle(ref, function () { return target.current; });
-    var popupWidth = React.useMemo(function () {
-        return "calc(" + columns.map(function (column) { return columnWidth(column.width, defaultProps.width); }).filter(Boolean).join(' + ') + " + " + scrollbarWidth + "px)";
-    }, [columns, scrollbarWidth]);
-    var header = React.useMemo(function () { return (React.createElement(React.Fragment, null,
-        props.header,
-        React.createElement("div", { className: "k-table-header" },
+    var initialGroupHeader = React.useMemo(function () {
+        if (initialGroupHeader === undefined && props.groupField !== undefined && props.data) {
+            return utils_1.getItemValue(props.data[0], props.groupField);
+        }
+    }, [props.data, props.groupField]);
+    var _c = React.useState(initialGroupHeader), groupHeader = _c[0], setGroupHeader = _c[1];
+    var header = React.useMemo(function () {
+        return (React.createElement(React.Fragment, null,
+            props.header,
             React.createElement("div", { className: "k-table-header-wrap" },
                 React.createElement("table", { className: "k-table", role: "presentation" },
                     React.createElement("colgroup", null, columns.map(function (column, i) {
@@ -81,7 +83,14 @@ exports.MultiColumnComboBox = React.forwardRef(function (directProps, ref) {
                     React.createElement("thead", { className: 'k-table-thead' },
                         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'));
-                        })))))))); }, [props.header, columns]);
+                        })),
+                        groupHeader && React.createElement("tr", { className: 'k-table-group-row' },
+                            React.createElement("th", { className: 'k-table-th', colSpan: columns.length }, groupHeader)))))));
+    }, [props.header, columns, groupHeader]);
+    var popupWidth = React.useMemo(function () {
+        // These additional 4px are coming from the child elements side borders (fixes horizontal scrollbar)
+        return "calc(" + columns.map(function (column) { return columnWidth(column.width, defaultProps.width); }).filter(Boolean).join(' + ') + " + " + scrollbarWidth + "px + 4px)";
+    }, [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 ? kendo_react_common_1.getter(column.field)(liProps.dataItem) : '')); });
@@ -97,13 +106,14 @@ exports.MultiColumnComboBox = React.forwardRef(function (directProps, ref) {
             }
         }
         if (group) {
-            children.push(React.createElement("div", { key: "group", className: "k-cell k-group-cell" },
+            children.push(React.createElement("div", { key: "group", className: "k-table-td k-table-group-td" },
                 React.createElement("span", null, group)));
         }
         var rendering = React.cloneElement(li, __assign({}, li.props, { className: kendo_react_common_1.classNames('k-table-row', {
                 'k-table-alt-row': liProps.index % 2 !== 0,
                 'k-focus': liProps.focused,
-                'k-selected': liProps.selected
+                'k-selected': liProps.selected,
+                'k-first': Boolean(group)
             }) }), children);
         return props.itemRender ? props.itemRender.call(undefined, rendering, liProps) : rendering;
     }, [columns, props.groupField, props.itemRender, props.data, skip]);
@@ -119,11 +129,12 @@ exports.MultiColumnComboBox = React.forwardRef(function (directProps, ref) {
     var onChangeHandler = React.useCallback(function (event) { return handleEvent(onChange, event); }, [onChange]);
     var onFilterChangeHandler = React.useCallback(function (event) { return handleEvent(onFilterChange, event); }, [onFilterChange]);
     var onPageChangeHandler = React.useCallback(function (event) { return handleEvent(onPageChange, event); }, [onPageChange]);
+    var onGroupScroll = React.useCallback(function (event) {
+        setGroupHeader(event.group);
+    }, []);
     React.useEffect(function () { 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({ width: popupWidth }, popupSettings, { popupClass: kendo_react_common_1.classNames('k-dropdowngrid-popup k-data-table', (_a = {},
-                _a["k-table-" + (sizeMap[size] || size)] = size,
-                _a)), 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 })));
+    return (React.createElement(ComboBox_1.ComboBox, __assign({}, other, { list: List, popupSettings: __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 })));
 });
 var propTypes = __assign({}, ComboBox_1.ComboBoxWithoutContext.propTypes, { columns: PropTypes.any.isRequired });
 var defaultProps = {

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

@@ -6,6 +6,7 @@ import { LocalizationService } from '@progress/kendo-react-intl';
  */
 export interface ListProps {
     id?: string;
+    virtual?: boolean;
     show?: boolean;
     data: any[];
     value?: any;

package/dist/npm/common/List.js

@@ -28,7 +28,7 @@ var List = /** @class */ (function (_super) {
     }
     List.prototype.renderItems = function () {
         var _this = this;
-        var _a = this.props, textField = _a.textField, valueField = _a.valueField, groupField = _a.groupField, optionsGuid = _a.optionsGuid, _b = _a.skip, skip = _b === void 0 ? 0 : _b, focusedIndex = _a.focusedIndex, _c = _a.highlightSelected, highlightSelected = _c === void 0 ? true : _c, value = _a.value, data = _a.data, itemRender = _a.itemRender;
+        var _a = this.props, textField = _a.textField, valueField = _a.valueField, groupField = _a.groupField, optionsGuid = _a.optionsGuid, _b = _a.skip, skip = _b === void 0 ? 0 : _b, virtual = _a.virtual, focusedIndex = _a.focusedIndex, _c = _a.highlightSelected, highlightSelected = _c === void 0 ? true : _c, value = _a.value, data = _a.data, itemRender = _a.itemRender;
         var isArray = Array.isArray(value);
         return data.map(function (item, index) {
             var realIndex = skip + index;
@@ -44,7 +44,7 @@ var List = /** @class */ (function (_super) {
                     group = current;
                 }
             }
-            return (React.createElement(ListItem_1.default, { id: "option-" + optionsGuid + "-" + realIndex, dataItem: item, selected: selected, focused: focusedIndex === index, index: realIndex, key: realIndex, onClick: _this.props.onClick, textField: textField, group: group, render: itemRender }));
+            return (React.createElement(ListItem_1.default, { id: "option-" + optionsGuid + "-" + realIndex, virtual: virtual, dataItem: item, selected: selected, focused: focusedIndex === index, index: realIndex, key: realIndex, onClick: _this.props.onClick, textField: textField, group: group, render: itemRender }));
         });
     };
     List.prototype.renderNoValueElement = function (localizationService) {
@@ -60,7 +60,7 @@ var List = /** @class */ (function (_super) {
         var items = this.renderItems();
         return (items.length ? (React.createElement("div", { className: wrapperCssClass, style: wrapperStyle, ref: wrapperRef, onMouseDown: this.props.onMouseDown, onBlur: this.props.onBlur, onScroll: this.props.onScroll, unselectable: "on" },
             React.createElement("ul", { id: id, role: "listbox", "aria-hidden": !show ? true : undefined, className: listClassName, ref: listRef, style: listStyle }, items),
-            this.props.scroller)) : this.renderNoValueElement(localizationService));
+            this.props.scroller && React.createElement("div", { className: "k-height-container" }, this.props.scroller))) : this.renderNoValueElement(localizationService));
     };
     return List;
 }(React.Component));

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

@@ -31,6 +31,10 @@ export interface ListItemProps {
      * Indicates the selected state of the list item element.
      */
     selected: boolean;
+    /**
+     * @hidden
+     */
+    virtual?: boolean;
     /**
      * Fires when the list item is about to be rendered. Used to override the default appearance of the list item.
      */

package/dist/npm/common/ListItem.js

@@ -28,14 +28,14 @@ var ListItem = /** @class */ (function (_super) {
         return _this;
     }
     ListItem.prototype.render = function () {
-        var _a = this.props, selected = _a.selected, group = _a.group, dataItem = _a.dataItem, renderer = _a.render;
+        var _a = this.props, selected = _a.selected, group = _a.group, dataItem = _a.dataItem, virtual = _a.virtual, renderer = _a.render;
         var item = (React.createElement("li", { id: this.props.id, role: "option", "aria-selected": selected, className: kendo_react_common_1.classNames('k-list-item', {
                 'k-selected': selected,
                 'k-focus': this.props.focused,
                 'k-first': Boolean(group)
-            }), onClick: this.handleClick, style: { position: 'unset' } },
+            }), onClick: this.handleClick, style: { position: virtual ? 'relative' : 'unset' } },
             React.createElement("span", { className: 'k-list-item-text' }, utils_1.getItemValue(dataItem, this.props.textField).toString()),
-            group !== undefined ? React.createElement("div", { className: "k-group" }, group) : null));
+            group !== undefined ? React.createElement("div", { className: "k-list-item-group-label" }, group) : null));
         return renderer !== undefined ? renderer.call(undefined, item, this.props) : item;
     };
     return ListItem;

package/dist/npm/common/MultiColumnList.js

@@ -17,5 +17,5 @@ var List_1 = require("./List");
  * @hidden
  */
 exports.MultiColumnList = function (props) {
-    return (React.createElement(List_1.default, __assign({}, props, { wrapperCssClass: "k-table-scroller", listClassName: "k-table k-table-list", listStyle: __assign({}, props.listStyle) })));
+    return (React.createElement(List_1.default, __assign({}, props, { wrapperCssClass: "k-table-body k-table-scroller", listClassName: "k-table k-table-list", listStyle: __assign({}, props.listStyle) })));
 };

package/dist/npm/package-metadata.js

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