@progress/kendo-react-dropdowns 4.14.1 → 5.0.1

package/dist/npm/DropDownList/DropDownList.js

@@ -37,6 +37,7 @@ var utils_1 = require("../common/utils");
 var kendo_react_common_2 = require("@progress/kendo-react-common");
 var package_metadata_1 = require("../package-metadata");
 var VALIDATION_MESSAGE = 'Please select a value from the list!';
+var sizeMap = kendo_react_common_1.kendoThemeMaps.sizeMap, roundedMap = kendo_react_common_1.kendoThemeMaps.roundedMap;
 /**
  * @hidden
  */
@@ -75,27 +76,9 @@ var DropDownListWithoutContext = /** @class */ (function (_super) {
                 _this.base.triggerPageChangeCornerItems(item, state);
             }
         };
-        _this.renderDropDownWrapper = function () {
-            var _a = _this.props, dataItemKey = _a.dataItemKey, _b = _a.data, data = _b === void 0 ? [] : _b, textField = _a.textField, disabled = _a.disabled, tabIndex = _a.tabIndex, loading = _a.loading, iconClassName = _a.iconClassName, _c = _a.virtual, virtual = _c === void 0 ? { skip: 0 } : _c, valueRender = _a.valueRender;
-            var focused = _this.state.focused;
-            var opened = _this.props.opened !== undefined ? _this.props.opened : _this.state.opened;
-            var value = _this.value;
-            var selectedIndex = data.findIndex(function (i) { return utils_1.areSame(i, value, dataItemKey); });
-            var text = utils_1.getItemValue(value, textField);
-            var valueDefaultRendering = (React.createElement("span", { className: "k-input" }, text));
-            var valueElement = valueRender !== undefined ?
-                valueRender.call(undefined, valueDefaultRendering, value) : valueDefaultRendering;
-            return (React.createElement("span", { ref: function (el) { return _this.base.wrapper = el; }, role: 'listbox', tabIndex: kendo_react_common_1.getTabIndex(tabIndex, disabled), accessKey: _this.props.accessKey, className: kendo_react_common_1.classNames('k-dropdown-wrap', {
-                    'k-state-focused': focused,
-                    'k-state-disabled': disabled
-                }), onKeyDown: _this.handleKeyDown, onKeyPress: _this.handleKeyPress, onClick: disabled ? undefined : _this.handleWrapperClick, "aria-disabled": disabled || undefined, "aria-haspopup": true, "aria-expanded": opened || false, "aria-owns": _this.base.listBoxId, "aria-activedescendant": opened ? ('option-' + _this.base.guid + '-' + (selectedIndex + virtual.skip)) : undefined, "aria-label": _this.props.label, "aria-labelledby": _this.props.ariaLabelledBy, "aria-describedby": _this.props.ariaDescribedBy, id: _this.props.id, title: _this.props.title },
-                valueElement,
-                React.createElement("span", { className: "k-select" },
-                    React.createElement("span", { className: kendo_react_common_1.classNames('k-icon', iconClassName, {
-                            'k-i-arrow-s': !loading && !iconClassName,
-                            'k-i-loading': loading && !iconClassName
-                        }) })),
-                _this.dummySelect(value)));
+        _this.componentRef = function (element) {
+            _this._element = element;
+            _this.base.wrapper = element;
         };
         _this.dummySelect = function (value) {
             /* Dummy component to support forms */
@@ -103,18 +86,21 @@ var DropDownListWithoutContext = /** @class */ (function (_super) {
                 React.createElement("option", { value: _this.props.valueMap ? _this.props.valueMap.call(undefined, value) : value })));
         };
         _this.renderListContainer = function () {
-            var _a = _this.props, header = _a.header, footer = _a.footer, dir = _a.dir, _b = _a.data, data = _b === void 0 ? [] : _b;
+            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 base = _this.base;
             var popupSettings = base.getPopupSettings();
             var opened = _this.props.opened !== undefined ? _this.props.opened : _this.state.opened;
-            var virtual = _this.props.virtual !== undefined;
             var popupWidth = popupSettings.width !== undefined ? popupSettings.width : base.popupWidth;
             var listContainerProps = {
                 dir: dir !== undefined ? dir : base.dirCalculated,
                 width: popupWidth,
                 popupSettings: {
-                    popupClass: popupSettings.popupClass,
-                    className: kendo_react_common_1.classNames('k-list-container k-reset', popupSettings.className),
+                    popupClass: kendo_react_common_1.classNames(popupSettings.popupClass, 'k-list', (_a = {},
+                        _a["k-list-" + (sizeMap[size] || size)] = size,
+                        _a['k-virtual-list'] = _this.base.vs.enabled,
+                        _a)),
+                    className: popupSettings.className,
                     animate: popupSettings.animate,
                     anchor: _this.element,
                     show: opened,
@@ -126,15 +112,10 @@ var DropDownListWithoutContext = /** @class */ (function (_super) {
             };
             return (React.createElement(ListContainer_1.default, __assign({}, listContainerProps),
                 _this.renderListFilter(),
-                virtual && _this.renderDefaultItem(),
-                virtual && header,
-                _this.base.renderScrollWrapper(React.createElement(React.Fragment, null,
-                    !virtual && _this.renderDefaultItem(),
-                    !virtual && header,
-                    _this.renderList(),
-                    !virtual && footer,
-                    _this.base.renderScrollElement())),
-                virtual && footer));
+                _this.renderDefaultItem(),
+                header && React.createElement("div", { className: "k-list-header" }, header),
+                _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;
@@ -143,13 +124,13 @@ var DropDownListWithoutContext = /** @class */ (function (_super) {
             var opened = _this.props.opened !== undefined ? _this.props.opened : _this.state.opened;
             var popupSettings = _this.base.getPopupSettings();
             var translate = "translateY(" + 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: !vs.enabled ?
-                    { maxHeight: popupSettings.height } : { float: 'left', width: '100%' }, wrapperCssClass: !vs.enabled ? 'k-list-scroller' : undefined, listStyle: vs.enabled ?
-                    { transform: translate } : undefined, key: "listkey", skip: skip, onClick: _this.handleItemClick, itemRender: itemRender, noDataRender: listNoDataRender }));
+            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() }));
         };
         _this.renderListFilter = function () {
             var filterText = _this.props.filter !== undefined ? _this.props.filter : _this.state.text;
-            return _this.props.filterable && (React.createElement(ListFilter_1.default, { value: filterText, ref: function (filter) { return _this._filterInput = filter && filter.input; }, onChange: _this.handleListFilterChange, onKeyDown: _this.handleKeyDown }));
+            return _this.props.filterable && (React.createElement(ListFilter_1.default, { value: filterText, ref: function (filter) { return _this._filterInput = filter && filter.input; }, onChange: _this.handleListFilterChange, onKeyDown: _this.handleKeyDown, size: _this.props.size, rounded: _this.props.rounded, fillMode: _this.props.fillMode }));
         };
         _this.renderDefaultItem = function () {
             var _a = _this.props, textField = _a.textField, defaultItem = _a.defaultItem, dataItemKey = _a.dataItemKey;
@@ -285,6 +266,9 @@ var DropDownListWithoutContext = /** @class */ (function (_super) {
             _this.applyState(state);
         };
         _this.handleWrapperClick = function (event) {
+            if (event.isPropagationStopped()) {
+                return;
+            }
             var state = _this.base.initState();
             state.syntheticEvent = event;
             if (!_this.state.focused) {
@@ -510,10 +494,11 @@ var DropDownListWithoutContext = /** @class */ (function (_super) {
      * @hidden
      */
     DropDownListWithoutContext.prototype.render = function () {
-        var _this = this;
-        var _a = this.props, style = _a.style, className = _a.className, label = _a.label, dir = _a.dir, virtual = _a.virtual;
+        var _a, _b;
+        var _c = this.props, style = _c.style, className = _c.className, label = _c.label, dir = _c.dir, virtual = _c.virtual, size = _c.size, rounded = _c.rounded, fillMode = _c.fillMode;
         var opened = this.props.opened !== undefined ? this.props.opened : this.state.opened;
-        var text = utils_1.getItemValue(this.value, this.props.textField);
+        var value = this.value;
+        var text = utils_1.getItemValue(value, this.props.textField);
         var isValid = !this.validityStyles || this.validity.valid;
         var base = this.base;
         var vs = base.vs;
@@ -523,12 +508,35 @@ var DropDownListWithoutContext = /** @class */ (function (_super) {
             base.vs.total = virtual.total;
             base.vs.pageSize = virtual.pageSize;
         }
-        var dropdownlist = (React.createElement("span", { ref: function (dropdown) { return _this._element = dropdown; }, className: kendo_react_common_1.classNames('k-widget k-dropdown', {
-                'k-state-invalid': !isValid
-            }, className), style: !label
+        var _d = this.props, dataItemKey = _d.dataItemKey, _e = _d.data, data = _e === void 0 ? [] : _e, disabled = _d.disabled, tabIndex = _d.tabIndex, loading = _d.loading, iconClassName = _d.iconClassName, valueRender = _d.valueRender;
+        var focused = this.state.focused;
+        var selectedIndex = data.findIndex(function (i) { return utils_1.areSame(i, value, dataItemKey); });
+        var valueDefaultRendering = (React.createElement("span", { className: "k-input-inner" },
+            React.createElement("span", { className: "k-input-value-text" }, text)));
+        var valueElement = valueRender !== undefined ?
+            valueRender.call(undefined, valueDefaultRendering, value) : valueDefaultRendering;
+        var dropdownlist = (React.createElement("span", { ref: this.componentRef, className: kendo_react_common_1.classNames('k-dropdownlist k-picker', className, (_a = {},
+                _a["k-picker-" + (sizeMap[size] || size)] = size,
+                _a["k-rounded-" + (roundedMap[rounded] || rounded)] = rounded,
+                _a["k-picker-" + fillMode] = fillMode,
+                _a['k-focused'] = focused,
+                _a['k-disabled'] = disabled,
+                _a['k-invalid'] = !isValid,
+                _a['k-valid'] = isValid,
+                _a['k-loading'] = loading,
+                _a['k-required'] = this.required,
+                _a)), style: !label
                 ? style
-                : __assign({}, style, { width: undefined }), dir: dir, onMouseDown: opened ? utils_1.preventDefaultNonInputs : undefined, onFocus: this.handleFocus, onBlur: this.handleBlur },
-            this.renderDropDownWrapper(),
+                : __assign({}, style, { width: undefined }), dir: dir, onMouseDown: opened ? utils_1.preventDefaultNonInputs : undefined, onFocus: this.handleFocus, onBlur: this.handleBlur, tabIndex: kendo_react_common_1.getTabIndex(tabIndex, disabled), accessKey: this.props.accessKey, onKeyDown: this.handleKeyDown, onKeyPress: this.handleKeyPress, onClick: disabled ? undefined : this.handleWrapperClick, role: 'listbox', "aria-disabled": disabled || undefined, "aria-haspopup": true, "aria-expanded": opened || false, "aria-owns": this.base.listBoxId, "aria-activedescendant": opened ? ('option-' + this.base.guid + '-' + (selectedIndex + (virtual ? virtual.skip : 0))) : undefined, "aria-label": this.props.label, "aria-labelledby": this.props.ariaLabelledBy, "aria-describedby": this.props.ariaDescribedBy, id: this.props.id, title: this.props.title },
+            valueElement,
+            loading && React.createElement("span", { className: "k-icon k-i-loading", key: "loading" }),
+            React.createElement("button", { type: "button", className: kendo_react_common_1.classNames('k-input-button k-button k-icon-button', (_b = {},
+                    _b["k-button-" + (sizeMap[size] || size)] = size,
+                    _b["k-button-" + fillMode] = fillMode,
+                    _b["k-button-" + fillMode + "-base"] = fillMode,
+                    _b)), onMouseDown: function (e) { return e.preventDefault(); } },
+                React.createElement("span", { className: kendo_react_common_1.classNames('k-button-icon k-icon k-i-arrow-s', iconClassName) })),
+            this.dummySelect(value),
             this.renderListContainer()));
         return label ? (React.createElement(kendo_react_labels_1.FloatingLabel, { label: label, editorValue: text, editorValid: isValid, editorDisabled: this.props.disabled, style: { width: style ? style.width : undefined }, children: dropdownlist })) : dropdownlist;
     };
@@ -593,7 +601,7 @@ var DropDownListWithoutContext = /** @class */ (function (_super) {
     /**
      * @hidden
      */
-    DropDownListWithoutContext.defaultProps = __assign({ delay: 500, tabIndex: 0, ignoreCase: true }, DropDownBase_1.default.defaultProps, { required: false });
+    DropDownListWithoutContext.defaultProps = __assign({ delay: 500, tabIndex: 0, ignoreCase: true }, DropDownBase_1.default.defaultProps, { required: false, size: 'medium', rounded: 'medium', fillMode: 'solid' });
     return DropDownListWithoutContext;
 }(React.Component));
 exports.DropDownListWithoutContext = DropDownListWithoutContext;

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

@@ -244,4 +244,41 @@ export interface DropDownListProps extends FormComponentProps {
      * Useful when the DropDownList is placed inside a toolbar which needs to handle left and right keys.
      */
     leftRightKeysNavigation?: boolean;
+    /**
+     * Configures the `size` of the DropDownList.
+     *
+     * The available options are:
+     * - small
+     * - medium
+     * - large
+     * - null—Does not set a size `className`.
+     *
+     * @default `medium`
+     */
+    size?: null | 'small' | 'medium' | 'large';
+    /**
+     * Configures the `roundness` of the DropDownList.
+     *
+     * The available options are:
+     * - small
+     * - medium
+     * - large
+     * - full
+     * - null—Does not set a rounded `className`.
+     *
+     * @default `medium`
+     */
+    rounded?: null | 'small' | 'medium' | 'large' | 'full';
+    /**
+     * Configures the `fillMode` of the DropDownList.
+     *
+     * The available options are:
+     * - solid
+     * - flat
+     * - outline
+     * - null—Does not set a fillMode `className`.
+     *
+     * @default `solid`
+     */
+    fillMode?: null | 'solid' | 'flat' | 'outline';
 }

package/dist/npm/DropDownTree/DropDownTree.js

@@ -24,8 +24,12 @@ var useDropdownWidth_1 = require("./useDropdownWidth");
 var ListNoData_1 = require("./ListNoData");
 var messages_1 = require("./../messages");
 var kendo_react_labels_1 = require("@progress/kendo-react-labels");
+var ListFilter_1 = require("../common/ListFilter");
+var 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) { return React.createElement(React.Fragment, null, props.children); };
+var ValueHolder = function (props) {
+    return React.createElement("span", { className: "k-input-value-text" }, props.children);
+};
 var toLevel = function (hierarchicalIndex) {
     return hierarchicalIndex.split('_').map(function (i) { return parseInt(i, 10); });
 };
@@ -46,7 +50,10 @@ var defaultProps = {
         height: '200px'
     },
     required: false,
-    validityStyles: true
+    validityStyles: true,
+    size: 'medium',
+    rounded: 'medium',
+    fillMode: 'solid'
 };
 /**
  * Represents the PropsContext of the `DropDownTree` component.
@@ -62,11 +69,12 @@ exports.DropDownTreePropsContext = kendo_react_common_1.createPropsContext();
  * Obtaining the `ref` returns an object of type [DropDownTreeHandle]({% slug api_dropdowns_dropdowntreehandle %}).
  */
 exports.DropDownTree = React.forwardRef(function (directProps, ref) {
+    var _a, _b;
     kendo_react_common_2.validatePackage(package_metadata_1.packageMetadata);
     var props = kendo_react_common_1.usePropsContext(exports.DropDownTreePropsContext, directProps);
     var calculatedId = React.useMemo(function () { return kendo_react_common_1.guid(); }, []);
     var id = props.id || calculatedId;
-    var _a = props.data, data = _a === void 0 ? [] : _a, dataItemKey = props.dataItemKey, _b = props.popupSettings, popupSettings = _b === void 0 ? {} : _b, _c = props.style, style = _c === void 0 ? {} : _c, opened = props.opened, disabled = props.disabled, _d = props.onOpen, onOpen = _d === void 0 ? kendo_react_common_1.noop : _d, _e = props.onClose, onClose = _e === void 0 ? kendo_react_common_1.noop : _e, placeholder = props.placeholder, label = props.label, name = props.name, _f = props.selectField, selectField = _f === void 0 ? defaultProps.selectField : _f, _g = props.subItemsField, subItemsField = _g === void 0 ? defaultProps.subItemsField : _g, validationMessage = props.validationMessage, valid = props.valid, _h = props.required, required = _h === void 0 ? defaultProps.required : _h, _j = props.validityStyles, validityStyles = _j === void 0 ? defaultProps.validityStyles : _j;
+    var _c = props.data, data = _c === void 0 ? [] : _c, dataItemKey = props.dataItemKey, _d = props.popupSettings, popupSettings = _d === void 0 ? {} : _d, _e = props.style, style = _e === void 0 ? {} : _e, opened = props.opened, disabled = props.disabled, _f = props.onOpen, onOpen = _f === void 0 ? kendo_react_common_1.noop : _f, _g = props.onClose, onClose = _g === void 0 ? kendo_react_common_1.noop : _g, placeholder = props.placeholder, label = props.label, name = props.name, _h = props.selectField, selectField = _h === void 0 ? defaultProps.selectField : _h, _j = props.subItemsField, subItemsField = _j === void 0 ? defaultProps.subItemsField : _j, validationMessage = props.validationMessage, valid = props.valid, required = props.required, validityStyles = props.validityStyles;
     var tabIndex = kendo_react_common_1.getTabIndex(props.tabIndex, disabled);
     var target = React.useRef(null);
     var elementRef = React.useRef(null);
@@ -158,13 +166,13 @@ exports.DropDownTree = React.forwardRef(function (directProps, ref) {
             if (keyCode === kendo_react_common_1.Keys.esc || (altKey && keyCode === kendo_react_common_1.Keys.up)) {
                 closePopup(ev);
             }
-            else if (treeview && treeview.querySelector('.k-state-focused') &&
+            else if (treeview && treeview.querySelector('.k-focus') &&
                 (keyCode === kendo_react_common_1.Keys.up || keyCode === kendo_react_common_1.Keys.down ||
                     keyCode === kendo_react_common_1.Keys.left || keyCode === kendo_react_common_1.Keys.right ||
                     keyCode === kendo_react_common_1.Keys.home || keyCode === kendo_react_common_1.Keys.end)) {
                 if (keyCode === kendo_react_common_1.Keys.up && inputRef.current) {
                     var items = Array.from(treeview.querySelectorAll('.k-treeview-item'));
-                    var focusedItem = items.slice().reverse().find(function (i) { return Boolean(i && i.querySelector('.k-state-focused')); });
+                    var focusedItem = items.slice().reverse().find(function (i) { return Boolean(i && i.querySelector('.k-focus')); });
                     if (focusedItem && items.indexOf(focusedItem) === 0) {
                         return switchFocus(function () { focusElement(inputRef.current); });
                     }
@@ -285,6 +293,7 @@ exports.DropDownTree = React.forwardRef(function (directProps, ref) {
         event.preventDefault();
     }, [controlled, props.onChange, isOpen, opened, onClose]);
     var onExpand = React.useCallback(function (event) {
+        event.syntheticEvent.stopPropagation();
         if (props.onExpandChange && target.current) {
             var item = event.item, itemHierarchicalIndex = event.itemHierarchicalIndex, nativeEvent = event.nativeEvent, syntheticEvent = event.syntheticEvent;
             var expandEvent = {
@@ -320,24 +329,34 @@ exports.DropDownTree = React.forwardRef(function (directProps, ref) {
     var ValueComponent = props.valueHolder || ValueHolder;
     var localization = kendo_react_intl_1.useLocalization();
     var isValid = !validityStyles || validity.valid;
-    var dropdowntree = (React.createElement("span", { className: kendo_react_common_1.classNames('k-widget k-dropdowntree k-dropdowntree-clearable', props.className), tabIndex: tabIndex, accessKey: props.accessKey, id: id, style: label ? __assign({}, style, { width: undefined }) : style, dir: dir, ref: elementRef, onKeyDown: disabled ? undefined : onWrapperKeyDown, onMouseDown: onWrapperMouseDown, onFocus: onFocus, onBlur: onBlur, role: "listbox", "aria-haspopup": "true", "aria-expanded": isOpen, "aria-disabled": disabled, "aria-label": label, "aria-labelledby": props.ariaLabelledBy, "aria-describedby": props.ariaDescribedBy },
-        React.createElement("span", { className: kendo_react_common_1.classNames('k-dropdown-wrap', {
-                'k-state-focused': focused,
-                'k-state-disabled': disabled,
-                'k-state-invalid': !isValid
-            }), onClick: disabled ? undefined : onWrapperClick },
-            React.createElement("span", { className: "k-input" },
-                React.createElement(ValueComponent, { item: value }, currentValueText || placeholder)),
-            hasValue && !disabled && (React.createElement("span", { onClick: onClear, className: "k-icon k-clear-value k-i-close", title: localization.toLanguageString(messages_1.clear, messages_1.messages[messages_1.clear]), role: "button", tabIndex: -1, onMouseDown: function (e) { return e.preventDefault(); } })),
-            React.createElement("span", { className: "k-select", "aria-label": "select" },
-                React.createElement("span", { className: kendo_react_common_1.classNames('k-icon', { 'k-i-arrow-60-down': !props.loading, 'k-i-loading': props.loading }) })),
-            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: kendo_react_common_1.classNames('k-list-container k-group k-reset k-popup-dropdowntree', popupSettings.className, { 'k-rtl': dir === 'rtl' }), popupClass: popupSettings.popupClass, style: popupStyles, animate: popupSettings.animate, anchor: elementRef.current, show: isOpen, onOpen: onPopupOpened, onClose: onPopupClosed, appendTo: popupSettings.appendTo },
-            props.filterable && (React.createElement("span", { className: "k-list-filter" },
-                React.createElement("input", { className: "k-textbox", tabIndex: tabIndex, ref: inputRef, value: props.filter === undefined ? filter : props.filter, onChange: onFilterChange, onKeyDown: onInputKeyDown }),
-                React.createElement("span", { className: "k-icon k-i-zoom" }))),
-            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, item: props.item })) : (React.createElement(NoData, null, localization.toLanguageString(messages_1.nodata, messages_1.messages[messages_1.nodata]))))));
+    var size = props.size, rounded = props.rounded, fillMode = props.fillMode;
+    var dropdowntree = (React.createElement("span", { className: kendo_react_common_1.classNames('k-dropdowntree k-picker', props.className, (_a = {},
+            _a["k-picker-" + (sizeMap[size] || size)] = size,
+            _a["k-rounded-" + (roundedMap[rounded] || rounded)] = rounded,
+            _a["k-picker-" + fillMode] = fillMode,
+            _a['k-focus'] = focused,
+            _a['k-valid'] = isValid,
+            _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({}, style, { width: undefined }) : style, dir: dir, ref: elementRef, onKeyDown: disabled ? undefined : onWrapperKeyDown, onMouseDown: onWrapperMouseDown, onClick: disabled ? undefined : onWrapperClick, onFocus: onFocus, onBlur: onBlur, role: "listbox", "aria-haspopup": "true", "aria-expanded": isOpen, "aria-disabled": disabled, "aria-label": label, "aria-labelledby": props.ariaLabelledBy, "aria-describedby": props.ariaDescribedBy },
+        React.createElement("span", { className: "k-input-inner" },
+            React.createElement(ValueComponent, { item: value }, currentValueText || placeholder)),
+        props.loading && React.createElement("span", { className: "k-icon k-i-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("span", { className: "k-icon k-i-x" }))),
+        React.createElement("button", { type: "button", "aria-label": "select", className: kendo_react_common_1.classNames('k-input-button k-button k-icon-button', (_b = {},
+                _b["k-button-" + (sizeMap[size] || size)] = size,
+                _b["k-button-" + fillMode] = fillMode,
+                _b["k-button-" + fillMode + "-base"] = fillMode,
+                _b)) },
+            React.createElement("span", { className: "k-button-icon k-icon k-i-arrow-s" })),
+        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: kendo_react_common_1.classNames(popupSettings.className, { 'k-rtl': dir === 'rtl' }), popupClass: popupSettings.popupClass, style: popupStyles, animate: popupSettings.animate, anchor: elementRef.current, show: isOpen, onOpen: onPopupOpened, onClose: onPopupClosed, appendTo: popupSettings.appendTo },
+            props.filterable && (React.createElement(ListFilter_1.default, { value: props.filter === undefined ? filter : props.filter, inputRef: inputRef, onChange: onFilterChange, onKeyDown: onInputKeyDown, size: size, rounded: rounded, fillMode: fillMode })),
+            data.length > 0 ? (React.createElement(kendo_react_treeview_1.TreeView, { ref: treeViewRef, tabIndex: tabIndex, data: treeViewData, focusIdField: dataItemKey, textField: props.textField, selectField: selectField, expandField: props.expandField, childrenField: subItemsField, expandIcons: true, onItemClick: onChange, onExpandChange: onExpand, size: size, item: props.item })) : (React.createElement(NoData, null, localization.toLanguageString(messages_1.nodata, messages_1.messages[messages_1.nodata]))))));
     return label ? (React.createElement(kendo_react_labels_1.FloatingLabel, { label: label, editorValue: currentValueText, editorPlaceholder: placeholder, editorValid: isValid, editorDisabled: disabled, editorId: id, style: { width: style ? style.width : undefined }, children: dropdowntree, dir: dir })) : dropdowntree;
 });
 var propTypes = {
@@ -392,4 +411,5 @@ var propTypes = {
     listNoData: PropTypes.func
 };
 exports.DropDownTree.displayName = 'KendoReactDropDownTree';
+exports.DropDownTree.defaultProps = defaultProps;
 exports.DropDownTree.propTypes = propTypes;

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

@@ -246,4 +246,41 @@ export interface DropDownTreeProps extends FormComponentProps {
      * ([see example]({% slug customrendering_dropdowntree %}#toc-no-data)).
      */
     listNoData?: React.ComponentType<ListNoDataProps>;
+    /**
+     * Configures the `size` of the DropDownTree.
+     *
+     * The available options are:
+     * - small
+     * - medium
+     * - large
+     * - null&mdash;Does not set a size `className`.
+     *
+     * @default `medium`
+     */
+    size?: null | 'small' | 'medium' | 'large';
+    /**
+     * Configures the `roundness` of the DropDownTree.
+     *
+     * The available options are:
+     * - small
+     * - medium
+     * - large
+     * - full
+     * - null&mdash;Does not set a rounded `className`.
+     *
+     * @default `medium`
+     */
+    rounded?: null | 'small' | 'medium' | 'large' | 'full';
+    /**
+     * Configures the `fillMode` of the DropDownTree.
+     *
+     * The available options are:
+     * - solid
+     * - flat
+     * - outline
+     * - null&mdash;Does not set a fillMode `className`.
+     *
+     * @default `solid`
+     */
+    fillMode?: null | 'solid' | 'flat' | 'outline';
 }

package/dist/npm/MultiColumnComboBox/MultiColumnComboBox.d.ts

@@ -151,6 +151,43 @@ export interface MultiColumnComboBoxProps extends ComboBoxProps {
      * Sets the footer component of the MultiColumnComboBox.
      */
     footer?: React.ReactNode;
+    /**
+     * Configures the `size` of the MultiColumnComboBox.
+     *
+     * The available options are:
+     * - small
+     * - medium
+     * - large
+     * - null—Does not set a size `className`.
+     *
+     * @default `medium`
+     */
+    size?: null | 'small' | 'medium' | 'large';
+    /**
+     * Configures the `roundness` of the MultiColumnComboBox.
+     *
+     * The available options are:
+     * - small
+     * - medium
+     * - large
+     * - full
+     * - null—Does not set a rounded `className`.
+     *
+     * @default `medium`
+     */
+    rounded?: null | 'small' | 'medium' | 'large' | 'full';
+    /**
+     * Configures the `fillMode` of the MultiColumnComboBox.
+     *
+     * The available options are:
+     * - solid
+     * - flat
+     * - outline
+     * - null—Does not set a fillMode `className`.
+     *
+     * @default `solid`
+     */
+    fillMode?: null | 'solid' | 'flat' | 'outline';
 }
 /**
  * Represents the target(element and props) of the MultiColumnComboBoxChangeEvent.

package/dist/npm/MultiColumnComboBox/MultiColumnComboBox.js

@@ -25,6 +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 columnWidth = function (width, defaultWidth) {
     if (width) {
         return typeof width === 'number' ? width + 'px' : width;
@@ -46,11 +47,12 @@ 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 _a = props.columns, columns = _a === void 0 ? defaultProps.columns : _a, _b = props.popupSettings, popupSettings = _b === void 0 ? defaultProps.popupSettings : _b, 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", "onOpen", "onClose", "onFocus", "onBlur", "onChange", "onFilterChange", "onPageChange"]);
+    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"]);
     React.useImperativeHandle(target, function () {
         return ({
             element: comboBoxRef.current && comboBoxRef.current.element,
@@ -70,19 +72,19 @@ exports.MultiColumnComboBox = React.forwardRef(function (directProps, ref) {
     }, [columns, scrollbarWidth]);
     var header = React.useMemo(function () { return (React.createElement(React.Fragment, null,
         props.header,
-        React.createElement("div", { className: "k-grid-header" },
-            React.createElement("div", { className: "k-grid-header-wrap" },
-                React.createElement("table", { role: "presentation" },
+        React.createElement("div", { className: "k-table-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) {
                         return (React.createElement("col", { key: column.uniqueKey ? column.uniqueKey : i, style: { width: column.width ? column.width : defaultProps.width } }));
                     })),
-                    React.createElement("tbody", null,
-                        React.createElement("tr", null, columns.map(function (column, i) {
-                            return (React.createElement("th", { key: column.uniqueKey ? column.uniqueKey : i, className: "k-header" }, column.header || '\u00A0'));
+                    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]);
     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-cell", 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) : '')); });
+        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) : '')); });
         var group = undefined;
         var curGroup, prevGroup, groupGetter, data = props.data || [];
         var index = liProps.index - skip;
@@ -98,7 +100,11 @@ exports.MultiColumnComboBox = React.forwardRef(function (directProps, ref) {
             children.push(React.createElement("div", { key: "group", className: "k-cell k-group-cell" },
                 React.createElement("span", null, group)));
         }
-        var rendering = React.cloneElement(li, __assign({}, li.props), children);
+        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
+            }) }), children);
         return props.itemRender ? props.itemRender.call(undefined, rendering, liProps) : rendering;
     }, [columns, props.groupField, props.itemRender, props.data, skip]);
     var handleEvent = React.useCallback(function (handler, event) {
@@ -115,13 +121,18 @@ exports.MultiColumnComboBox = React.forwardRef(function (directProps, ref) {
     var onPageChangeHandler = React.useCallback(function (event) { return handleEvent(onPageChange, event); }, [onPageChange]);
     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: 'k-dropdowngrid-popup', className: kendo_react_common_1.classNames('k-popup-flush', popupSettings.className) }), ref: comboBoxRef, header: header, itemRender: itemRender, 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: 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 })));
 });
 var propTypes = __assign({}, ComboBox_1.ComboBoxWithoutContext.propTypes, { columns: PropTypes.any.isRequired });
 var defaultProps = {
     columns: [],
     popupSettings: {},
-    width: '200px'
+    width: '200px',
+    size: 'medium',
+    rounded: 'medium',
+    fillMode: 'solid'
 };
 exports.MultiColumnComboBox.displayName = 'KendoMultiColumnComboBox';
 // TODO: delete casting when @types/react is updated!

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

@@ -48,9 +48,6 @@ export declare class MultiSelectWithoutContext extends React.Component<MultiSele
             skip: PropTypes.Validator<number>;
             total: PropTypes.Validator<number>;
         }>>;
-        /**
-         * @hidden
-         */
         onFilterChange: PropTypes.Requireable<(...args: any[]) => any>;
         onPageChange: PropTypes.Requireable<(...args: any[]) => any>;
         opened: PropTypes.Requireable<boolean>;
@@ -70,12 +67,14 @@ export declare class MultiSelectWithoutContext extends React.Component<MultiSele
             }>>;
             popupClass: PropTypes.Requireable<string>;
             className: PropTypes.Requireable<string>;
-            appendTo: PropTypes.Requireable<any>;
+            appendTo: PropTypes.Requireable<PropTypes.ReactElementLike>;
             width: PropTypes.Requireable<string | number>;
             height: PropTypes.Requireable<string | number>;
         }>>;
         onOpen: PropTypes.Requireable<(...args: any[]) => any>;
-        onClose: PropTypes.Requireable<(...args: any[]) => any>;
+        onClose: PropTypes.Requireable<(...args: any[]) => any>; /**
+         * @hidden
+         */
         onFocus: PropTypes.Requireable<(...args: any[]) => any>;
         onBlur: PropTypes.Requireable<(...args: any[]) => any>;
         onChange: PropTypes.Requireable<(...args: any[]) => any>;
@@ -91,6 +90,9 @@ export declare class MultiSelectWithoutContext extends React.Component<MultiSele
     static defaultProps: {
         autoClose: boolean;
         required: boolean;
+        size: "small" | "medium" | "large";
+        rounded: "small" | "medium" | "large" | "full";
+        fillMode: "solid" | "flat" | "outline";
         popupSettings: {
             height: string;
         };
@@ -162,6 +164,7 @@ export declare class MultiSelectWithoutContext extends React.Component<MultiSele
      * @hidden
      */
     render(): JSX.Element;
+    private componentRef;
     private renderSearchbar;
     private searchbarRef;
     private onChangeHandler;