@progress/kendo-react-dropdowns 4.14.0 → 5.0.0

package/dist/es/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/es/AutoComplete/AutoComplete.js

@@ -29,11 +29,13 @@ import ListContainer from './../common/ListContainer';
 import List from './../common/List';
 import DropDownBase from '../common/DropDownBase';
 import { itemIndexStartsWith, getItemValue, areSame, getFocusedItem } from '../common/utils';
-import { guid, Keys, classNames, createPropsContext, withPropsContext } from '@progress/kendo-react-common';
+import { guid, Keys, classNames, createPropsContext, withPropsContext, kendoThemeMaps } from '@progress/kendo-react-common';
 import { FloatingLabel } from '@progress/kendo-react-labels';
 import { validatePackage } from '@progress/kendo-react-common';
 import { packageMetadata } from '../package-metadata';
+import ClearButton from '../common/ClearButton';
 var VALIDATION_MESSAGE = 'Please enter a valid value!';
+var sizeMap = kendoThemeMaps.sizeMap, roundedMap = kendoThemeMaps.roundedMap;
 /** @hidden */
 var AutoCompleteWithoutContext = /** @class */ (function (_super) {
     __extends(AutoCompleteWithoutContext, _super);
@@ -288,9 +290,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;
@@ -298,18 +300,24 @@ var AutoCompleteWithoutContext = /** @class */ (function (_super) {
         if (typeof suggest === 'string') {
             this._suggested = suggest;
         }
-        var autoComplete = (React.createElement("span", { className: 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: 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, { onClick: this.clearButtonClick, key: "clearbutton" }),
             this.renderListContainer()));
         return label
             ? (React.createElement(FloatingLabel, { label: label, editorId: id, editorValue: value, editorValid: isValid, editorDisabled: disabled, style: { width: style ? style.width : undefined }, children: autoComplete }))
@@ -353,17 +361,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, { 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, { 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;
@@ -371,13 +380,15 @@ var AutoCompleteWithoutContext = /** @class */ (function (_super) {
                 animate: popupSettings.animate,
                 anchor: this.element,
                 show: opened,
-                popupClass: popupSettings.popupClass,
-                className: classNames('k-list-container k-reset', popupSettings.className),
+                popupClass: 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;
@@ -385,7 +396,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, { 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, { 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) {
@@ -425,11 +436,11 @@ var AutoCompleteWithoutContext = /** @class */ (function (_super) {
     /**
      * @hidden
      */
-    AutoCompleteWithoutContext.propTypes = __assign({}, DropDownBase.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.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.defaultProps);
+    AutoCompleteWithoutContext.defaultProps = __assign({}, DropDownBase.defaultProps, { size: 'medium', rounded: 'medium', fillMode: 'solid' });
     return AutoCompleteWithoutContext;
 }(React.Component));
 export { AutoCompleteWithoutContext };

package/dist/es/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/es/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/es/ComboBox/ComboBox.js

@@ -25,7 +25,7 @@ var __assign = (this && this.__assign) || function () {
 import * as React from 'react';
 import * as PropTypes from 'prop-types';
 import DropDownBase from '../common/DropDownBase';
-import { guid, classNames, Keys, createPropsContext, withPropsContext } from '@progress/kendo-react-common';
+import { guid, classNames, Keys, createPropsContext, withPropsContext, kendoThemeMaps } from '@progress/kendo-react-common';
 import { FloatingLabel } from '@progress/kendo-react-labels';
 import { areSame, itemIndexStartsWith, getItemIndexByText, getItemValue, isPresent, suggestValue } from '../common/utils';
 import SearchBar from '../common/SearchBar';
@@ -33,7 +33,9 @@ import ListContainer from '../common/ListContainer';
 import List from '../common/List';
 import { validatePackage } from '@progress/kendo-react-common';
 import { packageMetadata } from '../package-metadata';
+import ClearButton from '../common/ClearButton';
 var VALIDATION_MESSAGE = 'Please enter a valid value!';
+var sizeMap = kendoThemeMaps.sizeMap, roundedMap = kendoThemeMaps.roundedMap;
 /** @hidden */
 var ComboBoxWithoutContext = /** @class */ (function (_super) {
     __extends(ComboBoxWithoutContext, _super);
@@ -71,6 +73,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;
@@ -78,11 +84,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;
@@ -347,9 +354,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 = getItemValue(this.value, textField);
@@ -364,22 +370,27 @@ var ComboBoxWithoutContext = /** @class */ (function (_super) {
             vs.total = virtual.total;
             vs.pageSize = virtual.pageSize;
         }
-        var combobox = (React.createElement("span", { className: 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: 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: 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: classNames('k-icon', iconClassName, {
-                            'k-i-arrow-s': !loading && !iconClassName,
-                            'k-i-loading': loading && !iconClassName
-                        }) }))),
+            this.renderSearchBar(inputText || '', id),
+            renderClearButton && !loading && React.createElement(ClearButton, { onClick: this.clearButtonClick, key: "clearbutton" }),
+            loading && React.createElement("span", { className: "k-icon k-i-loading", key: "loading" }),
+            React.createElement("button", { type: "button", className: 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: classNames('k-button-icon k-icon k-i-arrow-s', iconClassName) })),
             this.renderListContainer()));
         return label
             ? (React.createElement(FloatingLabel, { label: label, editorId: id, editorValue: inputText, editorValid: isValid, editorDisabled: disabled, style: { width: style ? style.width : undefined }, children: combobox }))
@@ -496,8 +507,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;
@@ -509,14 +521,17 @@ var ComboBoxWithoutContext = /** @class */ (function (_super) {
                 animate: popupSettings.animate,
                 anchor: this.element,
                 show: opened,
-                popupClass: popupSettings.popupClass,
-                className: classNames('k-list-container k-reset', popupSettings.className),
+                popupClass: 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;
@@ -532,11 +547,9 @@ var ComboBoxWithoutContext = /** @class */ (function (_super) {
         var selectedItemText = getItemValue(this.value, textField);
         var value = isPresent(text) && text !== selectedItemText ? null : this.value;
         var ListComponent = this.props.list || List;
-        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;
@@ -545,7 +558,7 @@ var ComboBoxWithoutContext = /** @class */ (function (_super) {
         if (this._suggested && !areSame(this._valueOnDidUpdate, value, dataItemKey)) {
             this._suggested = '';
         }
-        return (React.createElement(SearchBar, { 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, { 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;
@@ -584,11 +597,11 @@ var ComboBoxWithoutContext = /** @class */ (function (_super) {
     /**
      * @hidden
      */
-    ComboBoxWithoutContext.propTypes = __assign({}, DropDownBase.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.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.defaultProps, { allowCustom: false, clearButton: true, required: false });
+    ComboBoxWithoutContext.defaultProps = __assign({}, DropDownBase.defaultProps, { size: 'medium', rounded: 'medium', fillMode: 'solid', allowCustom: false, clearButton: true, required: false });
     return ComboBoxWithoutContext;
 }(React.Component));
 export { ComboBoxWithoutContext };

package/dist/es/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/es/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;