@progress/kendo-react-dropdowns 4.14.0 → 5.0.0

package/dist/es/common/ListFilter.js

@@ -12,6 +12,8 @@ var __extends = (this && this.__extends) || (function () {
     };
 })();
 import * as React from 'react';
+import { kendoThemeMaps, classNames } from '@progress/kendo-react-common';
+var sizeMap = kendoThemeMaps.sizeMap, roundedMap = kendoThemeMaps.roundedMap;
 /**
  * @hidden
  */
@@ -22,9 +24,16 @@ var ListFilter = /** @class */ (function (_super) {
     }
     ListFilter.prototype.render = function () {
         var _this = this;
-        return (React.createElement("span", { className: "k-list-filter" },
-            React.createElement("input", { ref: function (input) { return _this.input = input; }, value: this.props.value || '', className: "k-textbox", onChange: this.props.onChange, onKeyDown: this.props.onKeyDown }),
-            React.createElement("span", { className: "k-icon k-i-search" })));
+        var _a;
+        var _b = this.props, size = _b.size, rounded = _b.rounded, fillMode = _b.fillMode, inputRef = _b.inputRef;
+        return (React.createElement("div", { className: "k-list-filter" },
+            React.createElement("span", { className: classNames('k-searchbox k-input', (_a = {},
+                    _a["k-input-" + (sizeMap[size] || size)] = size,
+                    _a["k-rounded-" + (roundedMap[rounded] || rounded)] = rounded,
+                    _a["k-input-" + fillMode] = fillMode,
+                    _a)) },
+                React.createElement("span", { className: "k-input-icon k-icon k-i-search" }),
+                React.createElement("input", { ref: inputRef ? inputRef : function (input) { return _this.input = input; }, value: this.props.value || '', className: "k-input-inner", onChange: this.props.onChange, onKeyDown: this.props.onKeyDown, tabIndex: this.props.tabIndex, onClick: function (e) { return e.stopPropagation(); } }))));
     };
     return ListFilter;
 }(React.Component));

package/dist/es/common/ListItem.js

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

package/dist/es/common/MultiColumnList.js

@@ -15,5 +15,5 @@ import List from './List';
  * @hidden
  */
 export var MultiColumnList = function (props) {
-    return React.createElement(List, __assign({}, props, { listClassName: "k-grid-list" }));
+    return (React.createElement(List, __assign({}, props, { wrapperCssClass: "k-table-scroller", listClassName: "k-table k-table-list", listStyle: __assign({}, props.listStyle) })));
 };

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

@@ -22,9 +22,6 @@ export interface SearchBarProps {
     role?: string;
     name?: string;
     activedescendant?: string;
-    clearButton?: boolean;
-    clearButtonClick?: React.MouseEventHandler<HTMLSpanElement>;
-    loading?: boolean;
     accessKey?: string;
     ariaLabelledBy?: string;
     ariaDescribedBy?: string;
@@ -39,5 +36,5 @@ export default class SearchBar extends React.Component<SearchBarProps> {
      */
     readonly input: HTMLInputElement | null;
     componentDidUpdate(prevProps: SearchBarProps): void;
-    render(): any[];
+    render(): any;
 }

package/dist/es/common/SearchBar.js

@@ -12,7 +12,6 @@ var __extends = (this && this.__extends) || (function () {
     };
 })();
 import * as React from 'react';
-import ClearButton from './ClearButton';
 /**
  * @hidden
  */
@@ -49,13 +48,8 @@ var SearchBar = /** @class */ (function (_super) {
     SearchBar.prototype.render = function () {
         var _this = this;
         var _a = this.props, _b = _a.expanded, expanded = _b === void 0 ? false : _b, disabled = _a.disabled, _c = _a.role, role = _c === void 0 ? 'listbox' : _c, render = _a.render;
-        var searchbar = (React.createElement("span", { className: "k-searchbar", key: "searchbar" },
-            React.createElement("input", { autoComplete: "off", id: this.props.id, type: "text", size: this.props.size, placeholder: this.props.placeholder, className: "k-input", tabIndex: this.props.tabIndex, accessKey: this.props.accessKey, role: role, name: this.props.name, value: this.props.value, onChange: this.props.onChange, ref: function (input) { return _this._input = input; }, onKeyDown: this.props.onKeyDown, onFocus: this.props.onFocus, onBlur: this.props.onBlur, "aria-disabled": disabled || undefined, disabled: disabled || undefined, readOnly: this.props.readOnly || undefined, "aria-haspopup": "listbox", "aria-expanded": expanded, "aria-owns": this.props.owns, "aria-activedescendant": expanded ? this.props.activedescendant : undefined, "aria-describedby": this.props.ariaDescribedBy, "aria-labelledby": this.props.ariaLabelledBy })));
-        return [
-            (render ? render.call(undefined, searchbar) : searchbar),
-            !this.props.loading && this.props.clearButton && React.createElement(ClearButton, { onClick: this.props.clearButtonClick, key: "clearbutton" }),
-            this.props.loading && React.createElement("span", { className: "k-icon k-i-loading", key: "loading" })
-        ];
+        var searchbar = (React.createElement("input", { autoComplete: "off", id: this.props.id, type: "text", key: "searchbar", size: this.props.size, placeholder: this.props.placeholder, className: "k-input-inner", tabIndex: this.props.tabIndex, accessKey: this.props.accessKey, role: role, name: this.props.name, value: this.props.value, onChange: this.props.onChange, ref: function (input) { return _this._input = input; }, onKeyDown: this.props.onKeyDown, onFocus: this.props.onFocus, onBlur: this.props.onBlur, "aria-disabled": disabled || undefined, disabled: disabled || undefined, readOnly: this.props.readOnly || undefined, "aria-haspopup": "listbox", "aria-expanded": expanded, "aria-owns": this.props.owns, "aria-activedescendant": expanded ? this.props.activedescendant : undefined, "aria-describedby": this.props.ariaDescribedBy, "aria-labelledby": this.props.ariaLabelledBy }));
+        return render ? render.call(undefined, searchbar) : searchbar;
     };
     return SearchBar;
 }(React.Component));

package/dist/es/common/VirtualScroll.js

@@ -69,7 +69,7 @@ var VirtualScroll = /** @class */ (function () {
         if (this.container && this.list) {
             this.calcScrollElementHeight();
             this.container.scrollTop = this.container.scrollHeight - this.container.offsetHeight;
-            this.translateTo(this.container.scrollHeight - this.list.offsetHeight);
+            this.translateTo(this.container.scrollHeight); //  - this.list.offsetHeight
         }
     };
     VirtualScroll.prototype.localScrollUp = function (e) {
@@ -148,7 +148,8 @@ var VirtualScroll = /** @class */ (function () {
     };
     VirtualScroll.prototype.validateTranslate = function (translate) {
         translate = Math.max(0, translate);
-        translate = Math.min(this.containerHeight - this.list.offsetHeight, translate);
+        // translate = Math.min(this.containerHeight - this.list!.offsetHeight, translate);
+        translate = Math.min(this.containerHeight, translate);
         return translate;
     };
     return VirtualScroll;

package/dist/es/package-metadata.js

@@ -5,7 +5,7 @@ export var packageMetadata = {
     name: '@progress/kendo-react-dropdowns',
     productName: 'KendoReact',
     productCodes: ['KENDOUIREACT', 'KENDOUICOMPLETE'],
-    publishDate: 1642421677,
+    publishDate: 1642567596,
     version: '',
     licensingDocsUrl: 'https://www.telerik.com/kendo-react-ui/my-license/?utm_medium=product&utm_source=kendoreact&utm_campaign=kendo-ui-react-purchase-license-keys-warning'
 };

package/dist/npm/AutoComplete/AutoComplete.d.ts

@@ -24,6 +24,9 @@ export declare class AutoCompleteWithoutContext extends React.Component<AutoComp
      * @hidden
      */
     static propTypes: {
+        size: PropTypes.Requireable<"small" | "medium" | "large">;
+        rounded: PropTypes.Requireable<"small" | "medium" | "large" | "full">;
+        fillMode: PropTypes.Requireable<"solid" | "flat" | "outline">;
         suggest: PropTypes.Requireable<string | boolean>;
         placeholder: PropTypes.Requireable<string>;
         value: PropTypes.Requireable<string>;
@@ -53,11 +56,8 @@ export declare class AutoCompleteWithoutContext extends React.Component<AutoComp
             }>>;
             popupClass: PropTypes.Requireable<string>;
             className: PropTypes.Requireable<string>;
-            appendTo: PropTypes.Requireable<any>;
+            appendTo: PropTypes.Requireable<PropTypes.ReactElementLike>;
             width: PropTypes.Requireable<string | number>;
-            /**
-             * @hidden
-             */
             height: PropTypes.Requireable<string | number>;
         }>>;
         onOpen: PropTypes.Requireable<(...args: any[]) => any>;
@@ -75,6 +75,9 @@ export declare class AutoCompleteWithoutContext extends React.Component<AutoComp
      * @hidden
      */
     static defaultProps: {
+        size: "small" | "medium" | "large";
+        rounded: "small" | "medium" | "large" | "full";
+        fillMode: "solid" | "flat" | "outline";
         popupSettings: {
             height: string;
         };

package/dist/npm/AutoComplete/AutoComplete.js

@@ -35,7 +35,9 @@ var kendo_react_common_1 = require("@progress/kendo-react-common");
 var kendo_react_labels_1 = require("@progress/kendo-react-labels");
 var kendo_react_common_2 = require("@progress/kendo-react-common");
 var package_metadata_1 = require("../package-metadata");
+var ClearButton_1 = require("../common/ClearButton");
 var VALIDATION_MESSAGE = 'Please enter a valid value!';
+var sizeMap = kendo_react_common_1.kendoThemeMaps.sizeMap, roundedMap = kendo_react_common_1.kendoThemeMaps.roundedMap;
 /** @hidden */
 var AutoCompleteWithoutContext = /** @class */ (function (_super) {
     __extends(AutoCompleteWithoutContext, _super);
@@ -290,9 +292,9 @@ var AutoCompleteWithoutContext = /** @class */ (function (_super) {
      */
     AutoCompleteWithoutContext.prototype.render = function () {
         var _this = this;
-        var _a = this.props, dir = _a.dir, disabled = _a.disabled, label = _a.label, className = _a.className, style = _a.style, loading = _a.loading, suggest = _a.suggest;
+        var _a;
+        var _b = this.props, dir = _b.dir, disabled = _b.disabled, label = _b.label, className = _b.className, style = _b.style, loading = _b.loading, suggest = _b.suggest, size = _b.size, rounded = _b.rounded, fillMode = _b.fillMode;
         var isValid = !this.validityStyles || this.validity.valid;
-        var focused = this.state.focused;
         var base = this.base;
         var value = this.value;
         var renderClearButton = this.props.clearButton !== false && !loading && !!value;
@@ -300,18 +302,24 @@ var AutoCompleteWithoutContext = /** @class */ (function (_super) {
         if (typeof suggest === 'string') {
             this._suggested = suggest;
         }
-        var autoComplete = (React.createElement("span", { className: kendo_react_common_1.classNames('k-widget k-autocomplete', className, {
-                'k-state-disabled': disabled,
-                'k-state-focused': focused && !disabled,
-                'k-state-invalid': !isValid
-            }), ref: function (element) {
+        var autoComplete = (React.createElement("span", { className: kendo_react_common_1.classNames('k-autocomplete k-input', className, (_a = {},
+                _a["k-input-" + (sizeMap[size] || size)] = size,
+                _a["k-rounded-" + (roundedMap[rounded] || rounded)] = rounded,
+                _a["k-input-" + fillMode] = fillMode,
+                _a['k-valid'] = isValid,
+                _a['k-invalid'] = !isValid,
+                _a['k-loading'] = loading,
+                _a['k-required'] = this.required,
+                _a['k-disabled'] = disabled,
+                _a)), ref: function (element) {
                 _this._element = element;
                 base.wrapper = element;
             }, style: !label
                 ? style
                 : __assign({}, style, { width: undefined }), dir: dir },
-            this.renderSearchBar(renderClearButton, value || '', id),
+            this.renderSearchBar(value || '', id),
             loading && React.createElement("span", { className: "k-icon k-i-loading" }),
+            renderClearButton && !loading && React.createElement(ClearButton_1.default, { onClick: this.clearButtonClick, key: "clearbutton" }),
             this.renderListContainer()));
         return label
             ? (React.createElement(kendo_react_labels_1.FloatingLabel, { label: label, editorId: id, editorValue: value, editorValid: isValid, editorDisabled: disabled, style: { width: style ? style.width : undefined }, children: autoComplete }))
@@ -355,17 +363,18 @@ var AutoCompleteWithoutContext = /** @class */ (function (_super) {
         }
         this.applyState(state);
     };
-    AutoCompleteWithoutContext.prototype.renderSearchBar = function (clearButton, value, id) {
+    AutoCompleteWithoutContext.prototype.renderSearchBar = function (value, id) {
         var _this = this;
         var base = this.base;
         var _a = this.props, placeholder = _a.placeholder, tabIndex = _a.tabIndex, disabled = _a.disabled, readonly = _a.readonly;
         var focused = this.state.focused;
         var opened = this.props.opened !== undefined ? this.props.opened : this.state.opened;
-        return (React.createElement(SearchBar_1.default, { id: id, placeholder: placeholder, tabIndex: tabIndex || undefined, accessKey: this.props.accessKey, value: value, suggestedText: this._suggested, focused: focused, name: this.props.name, ref: function (searchbar) { return _this._input = searchbar && searchbar.input; }, onKeyDown: this.onInputKeyDown, onChange: this.onChangeHandler, onFocus: base.handleFocus, onBlur: this.handleBlur, disabled: disabled, readOnly: readonly, expanded: opened, owns: base.listBoxId, activedescendant: 'option-' + base.guid + '-' + this.focusedIndex(), role: "combobox", clearButton: clearButton, clearButtonClick: this.clearButtonClick, ariaLabelledBy: this.props.ariaLabelledBy, ariaDescribedBy: this.props.ariaDescribedBy, render: this.props.valueRender }));
+        return (React.createElement(SearchBar_1.default, { id: id, placeholder: placeholder, tabIndex: tabIndex || undefined, accessKey: this.props.accessKey, value: value, suggestedText: this._suggested, focused: focused, name: this.props.name, ref: function (searchbar) { return _this._input = searchbar && searchbar.input; }, onKeyDown: this.onInputKeyDown, onChange: this.onChangeHandler, onFocus: base.handleFocus, onBlur: this.handleBlur, disabled: disabled, readOnly: readonly, expanded: opened, owns: base.listBoxId, activedescendant: 'option-' + base.guid + '-' + this.focusedIndex(), role: "combobox", ariaLabelledBy: this.props.ariaLabelledBy, ariaDescribedBy: this.props.ariaDescribedBy, render: this.props.valueRender }));
     };
     AutoCompleteWithoutContext.prototype.renderListContainer = function () {
+        var _a;
         var base = this.base;
-        var _a = this.props, dir = _a.dir, header = _a.header, footer = _a.footer, _b = _a.data, data = _b === void 0 ? [] : _b;
+        var _b = this.props, dir = _b.dir, header = _b.header, footer = _b.footer, _c = _b.data, data = _c === void 0 ? [] : _c, size = _b.size;
         var popupSettings = base.getPopupSettings();
         var opened = this.props.opened !== undefined ? this.props.opened : this.state.opened;
         var popupWidth = popupSettings.width !== undefined ? popupSettings.width : base.popupWidth;
@@ -373,13 +382,15 @@ var AutoCompleteWithoutContext = /** @class */ (function (_super) {
                 animate: popupSettings.animate,
                 anchor: this.element,
                 show: opened,
-                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)),
+                className: popupSettings.className,
                 appendTo: popupSettings.appendTo
             }, dir: dir !== undefined ? dir : this.base.dirCalculated, itemsCount: [data.length] },
-            header,
+            header && React.createElement("div", { className: "k-list-header" }, header),
             this.renderList(),
-            footer));
+            footer && React.createElement("div", { className: "k-list-footer" }, footer)));
     };
     AutoCompleteWithoutContext.prototype.renderList = function () {
         var base = this.base;
@@ -387,7 +398,7 @@ var AutoCompleteWithoutContext = /** @class */ (function (_super) {
         var _a = this.props, textField = _a.textField, _b = _a.data, data = _b === void 0 ? [] : _b, listNoDataRender = _a.listNoDataRender, itemRender = _a.itemRender;
         var value = this.value;
         var opened = this.props.opened !== undefined ? this.props.opened : this.state.opened;
-        return (React.createElement(List_1.default, { id: base.listBoxId, show: opened, data: data.slice(), focusedIndex: this.focusedIndex(), value: value, textField: textField, valueField: textField, highlightSelected: false, optionsGuid: base.guid, listRef: function (list) { return base.list = list; }, wrapperStyle: { maxHeight: popupSettings.height }, wrapperCssClass: "k-list-scroller", onClick: this.handleItemClick, itemRender: itemRender, noDataRender: listNoDataRender, onMouseDown: function (e) { return e.preventDefault(); } }));
+        return (React.createElement(List_1.default, { id: base.listBoxId, show: opened, data: data.slice(), focusedIndex: this.focusedIndex(), value: value, textField: textField, valueField: textField, highlightSelected: false, optionsGuid: base.guid, listRef: function (list) { return base.list = list; }, wrapperStyle: { maxHeight: popupSettings.height }, wrapperCssClass: "k-list-content", onClick: this.handleItemClick, itemRender: itemRender, noDataRender: listNoDataRender, onMouseDown: function (e) { return e.preventDefault(); } }));
     };
     AutoCompleteWithoutContext.prototype.triggerOnChange = function (newValue, state, eventArgs) {
         if (this.value === newValue && !eventArgs) {
@@ -427,11 +438,11 @@ var AutoCompleteWithoutContext = /** @class */ (function (_super) {
     /**
      * @hidden
      */
-    AutoCompleteWithoutContext.propTypes = __assign({}, DropDownBase_1.default.basicPropTypes, { suggest: PropTypes.oneOfType([PropTypes.bool, PropTypes.string]), placeholder: PropTypes.string, value: PropTypes.string, defaultValue: PropTypes.string, validationMessage: PropTypes.string, required: PropTypes.bool, readonly: PropTypes.bool, clearButton: PropTypes.bool, valueRender: PropTypes.func, id: PropTypes.string, ariaLabelledBy: PropTypes.string, ariaDescribedBy: PropTypes.string });
+    AutoCompleteWithoutContext.propTypes = __assign({}, DropDownBase_1.default.basicPropTypes, { size: PropTypes.oneOf([null, 'small', 'medium', 'large']), rounded: PropTypes.oneOf([null, 'small', 'medium', 'large', 'full']), fillMode: PropTypes.oneOf([null, 'solid', 'flat', 'outline']), suggest: PropTypes.oneOfType([PropTypes.bool, PropTypes.string]), placeholder: PropTypes.string, value: PropTypes.string, defaultValue: PropTypes.string, validationMessage: PropTypes.string, required: PropTypes.bool, readonly: PropTypes.bool, clearButton: PropTypes.bool, valueRender: PropTypes.func, id: PropTypes.string, ariaLabelledBy: PropTypes.string, ariaDescribedBy: PropTypes.string });
     /**
      * @hidden
      */
-    AutoCompleteWithoutContext.defaultProps = __assign({}, DropDownBase_1.default.defaultProps);
+    AutoCompleteWithoutContext.defaultProps = __assign({}, DropDownBase_1.default.defaultProps, { size: 'medium', rounded: 'medium', fillMode: 'solid' });
     return AutoCompleteWithoutContext;
 }(React.Component));
 exports.AutoCompleteWithoutContext = AutoCompleteWithoutContext;

package/dist/npm/AutoComplete/AutoCompleteProps.d.ts

@@ -177,4 +177,41 @@ export interface AutoCompleteProps extends FormComponentProps {
      * Sets the footer component of the AutoComplete ([see example]({% slug customrendering_autocomplete %}#toc-headers-and-footers)).
      */
     footer?: React.ReactNode;
+    /**
+     * Configures the `size` of the AutoComplete.
+     *
+     * 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 AutoComplete.
+     *
+     * 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 AutoComplete.
+     *
+     * The available options are:
+     * - solid
+     * - flat
+     * - outline
+     * - null—Does not set a fillMode `className`.
+     *
+     * @default `solid`
+     */
+    fillMode?: null | 'solid' | 'flat' | 'outline';
 }

package/dist/npm/ComboBox/ComboBox.d.ts

@@ -24,6 +24,9 @@ export declare class ComboBoxWithoutContext extends React.Component<ComboBoxProp
      * @hidden
      */
     static propTypes: {
+        size: PropTypes.Requireable<"small" | "medium" | "large">;
+        rounded: PropTypes.Requireable<"small" | "medium" | "large" | "full">;
+        fillMode: PropTypes.Requireable<"solid" | "flat" | "outline">;
         dataItemKey: PropTypes.Requireable<string>;
         groupField: PropTypes.Requireable<string>;
         suggest: PropTypes.Requireable<boolean>;
@@ -66,7 +69,7 @@ export declare class ComboBoxWithoutContext extends React.Component<ComboBoxProp
             }>>;
             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>;
         }>>;
@@ -85,6 +88,9 @@ export declare class ComboBoxWithoutContext extends React.Component<ComboBoxProp
      * @hidden
      */
     static defaultProps: {
+        size: "small" | "medium" | "large";
+        rounded: "small" | "medium" | "large" | "full";
+        fillMode: "solid" | "flat" | "outline";
         allowCustom: boolean;
         clearButton: boolean;
         required: boolean;
@@ -155,6 +161,7 @@ export declare class ComboBoxWithoutContext extends React.Component<ComboBoxProp
      * @hidden
      */
     onNavigate(state: InternalState, keyCode: number): void;
+    private componentRef;
     private toggleBtnClick;
     private applyValueOnEnter;
     private applyValueOnRejectSuggestions;

package/dist/npm/ComboBox/ComboBox.js

@@ -35,7 +35,9 @@ var ListContainer_1 = require("../common/ListContainer");
 var List_1 = require("../common/List");
 var kendo_react_common_2 = require("@progress/kendo-react-common");
 var package_metadata_1 = require("../package-metadata");
+var ClearButton_1 = require("../common/ClearButton");
 var VALIDATION_MESSAGE = 'Please enter a valid value!';
+var sizeMap = kendo_react_common_1.kendoThemeMaps.sizeMap, roundedMap = kendo_react_common_1.kendoThemeMaps.roundedMap;
 /** @hidden */
 var ComboBoxWithoutContext = /** @class */ (function (_super) {
     __extends(ComboBoxWithoutContext, _super);
@@ -73,6 +75,10 @@ var ComboBoxWithoutContext = /** @class */ (function (_super) {
                 _this.base.triggerPageChangeCornerItems(item, state);
             }
         };
+        _this.componentRef = function (element) {
+            _this._element = element;
+            _this.base.wrapper = element;
+        };
         _this.toggleBtnClick = function (event) {
             var state = _this.base.initState();
             state.syntheticEvent = event;
@@ -80,11 +86,12 @@ var ComboBoxWithoutContext = /** @class */ (function (_super) {
             _this.applyState(state);
         };
         _this.onScroll = function (event) {
-            var _a = _this.props, _b = _a.data, data = _b === void 0 ? [] : _b, groupField = _a.groupField;
+            var _a = _this.base, vs = _a.vs, list = _a.list;
+            vs.scrollHandler(event);
+            var _b = _this.props, _c = _b.data, data = _c === void 0 ? [] : _c, groupField = _b.groupField;
             if (!groupField || !data.length) {
                 return;
             }
-            var _c = _this.base, vs = _c.vs, list = _c.list;
             var itemHeight = _this.itemHeight =
                 _this.itemHeight || (vs.enabled ? vs.itemHeight : (list ? list.children[0].offsetHeight : 0));
             var target = event.target;
@@ -349,9 +356,8 @@ var ComboBoxWithoutContext = /** @class */ (function (_super) {
      * @hidden
      */
     ComboBoxWithoutContext.prototype.render = function () {
-        var _this = this;
-        var _a = this.props, dir = _a.dir, disabled = _a.disabled, _b = _a.clearButton, clearButton = _b === void 0 ? ComboBoxWithoutContext.defaultProps.clearButton : _b, label = _a.label, textField = _a.textField, className = _a.className, style = _a.style, loading = _a.loading, iconClassName = _a.iconClassName, virtual = _a.virtual;
-        var focused = this.state.focused;
+        var _a, _b;
+        var _c = this.props, dir = _c.dir, disabled = _c.disabled, _d = _c.clearButton, clearButton = _d === void 0 ? ComboBoxWithoutContext.defaultProps.clearButton : _d, label = _c.label, textField = _c.textField, className = _c.className, style = _c.style, loading = _c.loading, iconClassName = _c.iconClassName, virtual = _c.virtual, size = _c.size, rounded = _c.rounded, fillMode = _c.fillMode;
         var isValid = !this.validityStyles || this.validity.valid;
         var text = this.props.filter !== undefined ? this.props.filter : this.state.text;
         var selectedItemText = utils_1.getItemValue(this.value, textField);
@@ -366,22 +372,27 @@ var ComboBoxWithoutContext = /** @class */ (function (_super) {
             vs.total = virtual.total;
             vs.pageSize = virtual.pageSize;
         }
-        var combobox = (React.createElement("span", { className: kendo_react_common_1.classNames('k-widget k-combobox', {
-                'k-combobox-clearable': clearButton,
-                'k-state-invalid': !isValid
-            }, className), ref: function (element) { return _this._element = element; }, style: !label
+        var combobox = (React.createElement("span", { className: kendo_react_common_1.classNames('k-combobox k-input', (_a = {},
+                _a["k-input-" + (sizeMap[size] || size)] = size,
+                _a["k-rounded-" + (roundedMap[rounded] || rounded)] = rounded,
+                _a["k-input-" + fillMode] = fillMode,
+                _a['k-valid'] = isValid,
+                _a['k-invalid'] = !isValid,
+                _a['k-loading'] = loading,
+                _a['k-required'] = this.required,
+                _a['k-disabled'] = disabled,
+                _a), className), ref: this.componentRef, style: !label
                 ? style
                 : __assign({}, style, { width: undefined }), dir: dir },
-            React.createElement("span", { ref: function (wrapper) { return base.wrapper = wrapper; }, className: kendo_react_common_1.classNames('k-dropdown-wrap', {
-                    'k-state-disabled': disabled,
-                    'k-state-focused': focused && !disabled
-                }) },
-                this.renderSearchBar(renderClearButton, inputText || '', id),
-                React.createElement("span", { className: "k-select", onClick: this.toggleBtnClick, onMouseDown: function (e) { return e.preventDefault(); } },
-                    React.createElement("span", { className: kendo_react_common_1.classNames('k-icon', iconClassName, {
-                            'k-i-arrow-s': !loading && !iconClassName,
-                            'k-i-loading': loading && !iconClassName
-                        }) }))),
+            this.renderSearchBar(inputText || '', id),
+            renderClearButton && !loading && React.createElement(ClearButton_1.default, { onClick: this.clearButtonClick, key: "clearbutton" }),
+            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)), onClick: this.toggleBtnClick, 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.renderListContainer()));
         return label
             ? (React.createElement(kendo_react_labels_1.FloatingLabel, { label: label, editorId: id, editorValue: inputText, editorValid: isValid, editorDisabled: disabled, style: { width: style ? style.width : undefined }, children: combobox }))
@@ -498,8 +509,9 @@ var ComboBoxWithoutContext = /** @class */ (function (_super) {
         return this.applyState(state);
     };
     ComboBoxWithoutContext.prototype.renderListContainer = function () {
+        var _a;
         var base = this.base;
-        var _a = this.props, dir = _a.dir, header = _a.header, footer = _a.footer, _b = _a.data, data = _b === void 0 ? [] : _b, groupField = _a.groupField;
+        var _b = this.props, dir = _b.dir, header = _b.header, footer = _b.footer, _c = _b.data, data = _c === void 0 ? [] : _c, groupField = _b.groupField, size = _b.size;
         var opened = this.props.opened !== undefined ? this.props.opened : this.state.opened;
         var popupSettings = base.getPopupSettings();
         var popupWidth = popupSettings.width !== undefined ? popupSettings.width : base.popupWidth;
@@ -511,14 +523,17 @@ var ComboBoxWithoutContext = /** @class */ (function (_super) {
                 animate: popupSettings.animate,
                 anchor: this.element,
                 show: opened,
-                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,
                 appendTo: popupSettings.appendTo
             }, dir: dir !== undefined ? dir : this.base.dirCalculated, itemsCount: [data.length] },
-            header,
+            header && React.createElement("div", { className: "k-list-header" }, header),
             group && React.createElement("div", { className: "k-group-header" }, group),
-            base.renderScrollWrapper([this.renderList(), base.renderScrollElement()], this.onScroll),
-            footer));
+            this.renderList(),
+            footer && React.createElement("div", { className: "k-list-footer" }, footer)));
     };
     ComboBoxWithoutContext.prototype.renderList = function () {
         var _this = this;
@@ -534,11 +549,9 @@ var ComboBoxWithoutContext = /** @class */ (function (_super) {
         var selectedItemText = utils_1.getItemValue(this.value, textField);
         var value = utils_1.isPresent(text) && text !== selectedItemText ? null : this.value;
         var ListComponent = this.props.list || List_1.default;
-        return (React.createElement(ListComponent, { id: base.listBoxId, show: opened, data: data, focusedIndex: focusedIndex, value: value, textField: textField, valueField: dataItemKey, groupField: this.props.groupField, optionsGuid: base.guid, listRef: function (list) { vs.list = _this.base.list = list; _this.itemHeight = 0; }, 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, onMouseDown: function (e) { return e.preventDefault(); }, onScroll: this.onScroll }));
+        return (React.createElement(ListComponent, { id: base.listBoxId, show: opened, data: data, focusedIndex: focusedIndex, value: value, textField: textField, valueField: dataItemKey, groupField: this.props.groupField, optionsGuid: base.guid, listRef: function (list) { vs.list = _this.base.list = list; _this.itemHeight = 0; }, 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: function (e) { return e.preventDefault(); }, onScroll: this.onScroll, wrapperRef: vs.scrollerRef, scroller: this.base.renderScrollElement() }));
     };
-    ComboBoxWithoutContext.prototype.renderSearchBar = function (clearButton, text, id) {
+    ComboBoxWithoutContext.prototype.renderSearchBar = function (text, id) {
         var _this = this;
         var _a = this.props, placeholder = _a.placeholder, tabIndex = _a.tabIndex, disabled = _a.disabled, _b = _a.data, data = _b === void 0 ? [] : _b, dataItemKey = _a.dataItemKey, _c = _a.virtual, virtual = _c === void 0 ? { skip: 0 } : _c;
         var opened = this.props.opened !== undefined ? this.props.opened : this.state.opened;
@@ -547,7 +560,7 @@ var ComboBoxWithoutContext = /** @class */ (function (_super) {
         if (this._suggested && !utils_1.areSame(this._valueOnDidUpdate, value, dataItemKey)) {
             this._suggested = '';
         }
-        return (React.createElement(SearchBar_1.default, { id: id, placeholder: placeholder, tabIndex: tabIndex || undefined, accessKey: this.props.accessKey, value: text + this._suggested, suggestedText: this._suggested, ref: function (el) { return _this._input = el && el.input; }, onKeyDown: this.onInputKeyDown, onChange: this.inputOnChange, onFocus: this.base.handleFocus, onBlur: this.handleBlur, disabled: disabled, expanded: opened, owns: this.base.listBoxId, activedescendant: this.base.guid + '-' + (selectedIndex + virtual.skip), role: "combobox", clearButton: clearButton, clearButtonClick: this.clearButtonClick, ariaLabelledBy: this.props.ariaLabelledBy, ariaDescribedBy: this.props.ariaDescribedBy, render: this.props.valueRender }));
+        return (React.createElement(SearchBar_1.default, { id: id, placeholder: placeholder, tabIndex: tabIndex || undefined, accessKey: this.props.accessKey, value: text + this._suggested, suggestedText: this._suggested, ref: function (el) { return _this._input = el && el.input; }, onKeyDown: this.onInputKeyDown, onChange: this.inputOnChange, onFocus: this.base.handleFocus, onBlur: this.handleBlur, disabled: disabled, expanded: opened, owns: this.base.listBoxId, activedescendant: this.base.guid + '-' + (selectedIndex + virtual.skip), role: "combobox", ariaLabelledBy: this.props.ariaLabelledBy, ariaDescribedBy: this.props.ariaDescribedBy, render: this.props.valueRender }));
     };
     ComboBoxWithoutContext.prototype.triggerOnChange = function (item, state) {
         var value = this.value;
@@ -586,11 +599,11 @@ var ComboBoxWithoutContext = /** @class */ (function (_super) {
     /**
      * @hidden
      */
-    ComboBoxWithoutContext.propTypes = __assign({}, DropDownBase_1.default.propTypes, { dataItemKey: PropTypes.string, groupField: PropTypes.string, suggest: PropTypes.bool, placeholder: PropTypes.string, allowCustom: PropTypes.bool, clearButton: PropTypes.bool, iconClassName: PropTypes.string, validationMessage: PropTypes.string, required: PropTypes.bool, id: PropTypes.string, ariaLabelledBy: PropTypes.string, ariaDescribedBy: PropTypes.string, list: PropTypes.any, valueRender: PropTypes.func });
+    ComboBoxWithoutContext.propTypes = __assign({}, DropDownBase_1.default.propTypes, { size: PropTypes.oneOf([null, 'small', 'medium', 'large']), rounded: PropTypes.oneOf([null, 'small', 'medium', 'large', 'full']), fillMode: PropTypes.oneOf([null, 'solid', 'flat', 'outline']), dataItemKey: PropTypes.string, groupField: PropTypes.string, suggest: PropTypes.bool, placeholder: PropTypes.string, allowCustom: PropTypes.bool, clearButton: PropTypes.bool, iconClassName: PropTypes.string, validationMessage: PropTypes.string, required: PropTypes.bool, id: PropTypes.string, ariaLabelledBy: PropTypes.string, ariaDescribedBy: PropTypes.string, list: PropTypes.any, valueRender: PropTypes.func });
     /**
      * @hidden
      */
-    ComboBoxWithoutContext.defaultProps = __assign({}, DropDownBase_1.default.defaultProps, { allowCustom: false, clearButton: true, required: false });
+    ComboBoxWithoutContext.defaultProps = __assign({}, DropDownBase_1.default.defaultProps, { size: 'medium', rounded: 'medium', fillMode: 'solid', allowCustom: false, clearButton: true, required: false });
     return ComboBoxWithoutContext;
 }(React.Component));
 exports.ComboBoxWithoutContext = ComboBoxWithoutContext;

package/dist/npm/ComboBox/ComboBoxProps.d.ts

@@ -221,4 +221,41 @@ export interface ComboBoxProps extends FormComponentProps {
      * @hidden
      */
     list?: any;
+    /**
+     * Configures the `size` of the ComboBox.
+     *
+     * 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 ComboBox.
+     *
+     * 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 ComboBox.
+     *
+     * The available options are:
+     * - solid
+     * - flat
+     * - outline
+     * - null—Does not set a fillMode `className`.
+     *
+     * @default `solid`
+     */
+    fillMode?: null | 'solid' | 'flat' | 'outline';
 }

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

@@ -23,9 +23,6 @@ export declare class DropDownListWithoutContext extends React.Component<DropDown
         filterable: PropTypes.Requireable<boolean>;
         filter: PropTypes.Requireable<string>;
         virtual: PropTypes.Requireable<PropTypes.InferProps<{
-            /**
-             * The value of the DropDownList.
-             */
             pageSize: PropTypes.Validator<number>;
             skip: PropTypes.Validator<number>;
             total: PropTypes.Validator<number>;
@@ -49,7 +46,7 @@ export declare class DropDownListWithoutContext extends React.Component<DropDown
             }>>;
             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>;
         }>>;
@@ -62,9 +59,7 @@ export declare class DropDownListWithoutContext extends React.Component<DropDown
         listNoDataRender: PropTypes.Requireable<(...args: any[]) => any>;
         focusedItemIndex: PropTypes.Requireable<(...args: any[]) => any>;
         header: PropTypes.Requireable<PropTypes.ReactNodeLike>;
-        footer: PropTypes.Requireable<PropTypes.ReactNodeLike>; /**
-         * @hidden
-         */
+        footer: PropTypes.Requireable<PropTypes.ReactNodeLike>;
         delay: PropTypes.Requireable<number>;
         ignoreCase: PropTypes.Requireable<boolean>;
         iconClassName: PropTypes.Requireable<string>;
@@ -84,6 +79,9 @@ export declare class DropDownListWithoutContext extends React.Component<DropDown
      */
     static defaultProps: {
         required: boolean;
+        size: "small" | "medium" | "large";
+        rounded: "small" | "medium" | "large" | "full";
+        fillMode: "solid" | "flat" | "outline";
         popupSettings: {
             height: string;
         };
@@ -159,7 +157,7 @@ export declare class DropDownListWithoutContext extends React.Component<DropDown
      * @hidden
      */
     onNavigate(state: InternalState, keyCode: number): void;
-    private renderDropDownWrapper;
+    private componentRef;
     private dummySelect;
     private renderListContainer;
     private renderList;