@progress/kendo-react-dropdowns 4.14.0 → 5.0.0

package/dist/es/MultiSelect/MultiSelect.js

@@ -24,7 +24,7 @@ var __assign = (this && this.__assign) || function () {
 };
 import * as React from 'react';
 import * as PropTypes from 'prop-types';
-import { classNames, Keys, guid, createPropsContext, withPropsContext } from '@progress/kendo-react-common';
+import { classNames, Keys, guid, createPropsContext, kendoThemeMaps, withPropsContext } from '@progress/kendo-react-common';
 import { FloatingLabel } from '@progress/kendo-react-labels';
 import ListContainer from '../common/ListContainer';
 import List from '../common/List';
@@ -35,6 +35,8 @@ import { ActiveDescendant } from './../common/settings';
 import { itemIndexStartsWith, getItemValue, areSame, removeDataItems, isPresent, preventDefaultNonInputs, matchTags } from '../common/utils';
 import { validatePackage } from '@progress/kendo-react-common';
 import { packageMetadata } from '../package-metadata';
+import ClearButton from '../common/ClearButton';
+var sizeMap = kendoThemeMaps.sizeMap, roundedMap = kendoThemeMaps.roundedMap;
 var VALIDATION_MESSAGE = 'Please enter a valid value!';
 var preventDefault = function (event) { return event.preventDefault(); };
 var isCustom = function (type) { return type === FocusedItemType.CustomItem; };
@@ -140,6 +142,10 @@ var MultiSelectWithoutContext = /** @class */ (function (_super) {
             }
             _this.base.triggerPageChangeCornerItems(nextFocusedItem, state);
         };
+        _this.componentRef = function (element) {
+            _this._element = element;
+            _this.base.wrapper = element;
+        };
         _this.searchbarRef = function (searchbar) {
             var input = _this._input = searchbar && searchbar.input;
             if (input && _this.state.focused) {
@@ -228,19 +234,22 @@ var MultiSelectWithoutContext = /** @class */ (function (_super) {
             }
         };
         _this.renderListContainer = function () {
+            var _a, _b;
             var base = _this.base;
-            var _a = _this.props, header = _a.header, footer = _a.footer, allowCustom = _a.allowCustom, dir = _a.dir, _b = _a.data, data = _b === void 0 ? [] : _b;
+            var _c = _this.props, header = _c.header, footer = _c.footer, allowCustom = _c.allowCustom, dir = _c.dir, _d = _c.data, data = _d === void 0 ? [] : _d, size = _c.size;
             var popupSettings = _this.base.getPopupSettings();
             var opened = _this.props.opened !== undefined ? _this.props.opened : _this.state.opened;
             var text = _this.props.filter !== undefined ? _this.props.filter : _this.state.text;
-            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: 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,
                     animate: popupSettings.animate,
                     anchor: _this.element,
                     show: opened,
@@ -251,19 +260,17 @@ var MultiSelectWithoutContext = /** @class */ (function (_super) {
                 itemsCount: [data.length, _this.value.length]
             };
             var focusedType = _this.getFocusedState().focusedType;
-            var customItem = allowCustom && text && (React.createElement("div", { className: "k-list", key: "customitem", onClick: _this.customItemSelect, onMouseDown: preventDefault },
-                React.createElement("div", { className: classNames('k-item k-custom-item', { 'k-state-focused': isCustom(focusedType) }) },
+            var customItem = allowCustom && text && (React.createElement("div", { className: classNames('k-list', (_b = {},
+                    _b["k-list-" + (sizeMap[size] || size)] = size,
+                    _b)), key: "customitem", onClick: _this.customItemSelect, onMouseDown: preventDefault },
+                React.createElement("div", { className: classNames('k-list-item k-custom-item', { 'k-focus': isCustom(focusedType) }), style: { fontStyle: 'italic' } },
                     text,
-                    React.createElement("span", { className: "k-icon k-i-plus", style: { float: 'right' } }))));
+                    React.createElement("span", { className: "k-icon k-i-plus", style: { position: 'absolute', right: '0.5em' } }))));
             return (React.createElement(ListContainer, __assign({}, listContainerProps),
-                virtual && header,
-                _this.base.renderScrollWrapper(React.createElement(React.Fragment, null,
-                    !virtual && header,
-                    customItem,
-                    _this.renderList(),
-                    !virtual && footer,
-                    _this.base.renderScrollElement())),
-                virtual && footer));
+                header && React.createElement("div", { className: "k-list-header" }, header),
+                customItem,
+                _this.renderList(),
+                footer && React.createElement("div", { className: "k-list-footer" }, footer)));
         };
         _this.renderList = function () {
             var _a = _this.props, _b = _a.data, data = _b === void 0 ? [] : _b, textField = _a.textField, listNoDataRender = _a.listNoDataRender, itemRender = _a.itemRender, dataItemKey = _a.dataItemKey, virtual = _a.virtual;
@@ -273,8 +280,9 @@ var MultiSelectWithoutContext = /** @class */ (function (_super) {
             var focusedIndex = _this.getFocusedState().focusedIndex;
             var popupSettings = _this.base.getPopupSettings();
             var translate = "translateY(" + vs.translate + "px)";
-            return (React.createElement(List, { id: _this.base.listBoxId, show: opened, data: data.slice(), focusedIndex: focusedIndex - skip, value: _this.value, textField: textField, valueField: dataItemKey, optionsGuid: _this.base.guid, listRef: function (list) { vs.list = _this.base.list = list; }, wrapperStyle: vs.enabled ?
-                    { float: 'left', width: '100%' } : { maxHeight: popupSettings.height }, wrapperCssClass: vs.enabled ? undefined : 'k-list-scroller', listStyle: vs.enabled ? { transform: translate } : undefined, key: "listKey", skip: skip, onClick: _this.handleItemClick, itemRender: itemRender, noDataRender: listNoDataRender, onMouseDown: preventDefault, onBlur: _this.handleBlur }));
+            return (React.createElement(List, { id: _this.base.listBoxId, show: opened, data: data.slice(), focusedIndex: focusedIndex - skip, value: _this.value, textField: textField, valueField: dataItemKey, optionsGuid: _this.base.guid, listRef: function (list) { vs.list = _this.base.list = list; }, wrapperStyle: { maxHeight: popupSettings.height }, wrapperCssClass: "k-list-content", listStyle: vs.enabled ? { transform: translate } : undefined, key: "listKey", skip: skip, onClick: _this.handleItemClick, itemRender: itemRender, noDataRender: listNoDataRender, onMouseDown: preventDefault, onBlur: _this.handleBlur, onScroll: function (e) {
+                    vs.scrollHandler(e);
+                }, wrapperRef: vs.scrollerRef, scroller: _this.base.renderScrollElement() }));
         };
         _this.customItemSelect = function (event) {
             var _a;
@@ -318,6 +326,7 @@ var MultiSelectWithoutContext = /** @class */ (function (_super) {
             if (_this.props.autoClose) {
                 _this.base.togglePopup(state);
             }
+            event.stopPropagation();
             _this.applyState(state);
         };
         _this.handleBlur = function (event) {
@@ -527,9 +536,9 @@ var MultiSelectWithoutContext = /** @class */ (function (_super) {
      * @hidden
      */
     MultiSelectWithoutContext.prototype.render = function () {
-        var _this = this;
-        var _a = this.props, style = _a.style, className = _a.className, label = _a.label, dir = _a.dir, disabled = _a.disabled, tags = _a.tags, textField = _a.textField, dataItemKey = _a.dataItemKey, virtual = _a.virtual;
-        var _b = this.state, focused = _b.focused, text = _b.text, focusedTag = _b.focusedTag;
+        var _a, _b;
+        var _c = this.props, style = _c.style, className = _c.className, label = _c.label, dir = _c.dir, disabled = _c.disabled, tags = _c.tags, textField = _c.textField, dataItemKey = _c.dataItemKey, virtual = _c.virtual, size = _c.size, rounded = _c.rounded, fillMode = _c.fillMode, loading = _c.loading, filter = _c.filter;
+        var _d = this.state, text = _d.text, focused = _d.focused, focusedTag = _d.focusedTag;
         var vs = this.base.vs;
         var id = this.props.id || this._inputId;
         vs.enabled = virtual !== undefined;
@@ -549,16 +558,27 @@ var MultiSelectWithoutContext = /** @class */ (function (_super) {
         }
         this.setItems(tagsToRender, this._tags);
         var isValid = !this.validityStyles || this.validity.valid;
-        var component = (React.createElement("span", { ref: function (dropdown) { return _this._element = dropdown; }, className: classNames('k-widget k-multiselect', className, {
-                'k-state-focused': focused && !disabled,
-                'k-state-invalid': !isValid,
-                'k-state-disabled': disabled
-            }), style: !label
+        var clearButton = Boolean(filter !== undefined ? filter : text) || this.value.length > 0;
+        var component = (React.createElement("div", { ref: this.componentRef, className: classNames('k-multiselect 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-focus'] = focused && !disabled,
+                _a['k-invalid'] = !isValid,
+                _a['k-valid'] = isValid,
+                _a['k-disabled'] = disabled,
+                _a['k-loading'] = loading,
+                _a['k-required'] = this.required,
+                _a)), style: !label
                 ? style
-                : __assign({}, style, { width: undefined }), dir: dir, onFocus: this.handleFocus, onBlur: this.handleBlur },
-            React.createElement("div", { onClick: this.handleWrapperClick, ref: function (wrapper) { return _this.base.wrapper = wrapper; }, className: "k-multiselect-wrap k-floatwrap", onMouseDown: preventDefaultNonInputs },
-                tagsToRender.length > 0 && React.createElement(TagList, { tagRender: this.props.tagRender, onTagDelete: this.onTagDelete, data: tagsToRender, guid: this.base.guid, focused: focusedTag ? tagsToRender.find(function (t) { return matchTags(t, focusedTag, dataItemKey); }) : undefined }),
+                : __assign({}, style, { width: undefined }), dir: dir, onFocus: this.handleFocus, onBlur: this.handleBlur, onClick: this.handleWrapperClick, onMouseDown: preventDefaultNonInputs },
+            React.createElement("div", { className: classNames('k-input-values k-chip-list k-selection-multiple', (_b = {},
+                    _b["k-chip-list-" + (sizeMap[size] || size)] = size,
+                    _b)), role: "listbox", id: 'tagslist-' + this.base.guid },
+                tagsToRender.length > 0 && React.createElement(TagList, { tagRender: this.props.tagRender, onTagDelete: this.onTagDelete, data: tagsToRender, guid: this.base.guid, focused: focusedTag ? tagsToRender.find(function (t) { return matchTags(t, focusedTag, dataItemKey); }) : undefined, size: size }),
                 this.renderSearchbar(id)),
+            loading && React.createElement("span", { className: "k-icon k-i-loading" }),
+            clearButton && React.createElement(ClearButton, { onClick: this.clearButtonClick }),
             this.renderListContainer()));
         return label ? (React.createElement(FloatingLabel, { label: label, editorId: id, editorValue: text || getItemValue(this.value[0], textField), editorValid: isValid, editorDisabled: disabled, style: { width: style ? style.width : undefined }, children: component })) : component;
     };
@@ -568,12 +588,11 @@ var MultiSelectWithoutContext = /** @class */ (function (_super) {
         var text = (this.props.filter !== undefined ? this.props.filter : this.state.text) || '';
         var opened = this.props.opened !== undefined ? this.props.opened : this.state.opened;
         var focusedIndex = this.getFocusedState().focusedIndex;
-        var clearButton = !!text || this.value.length > 0;
         var placeholderToShow = this.value.length === 0 && !text ? placeholder : undefined;
         var ariaActivedescendant = activedescendant === ActiveDescendant.TagsList && focusedTag !== undefined ?
             "tag-" + this.base.guid + "-" + focusedTag.text.replace(/\s+/g, '-') :
             "option-" + this.base.guid + "-" + focusedIndex;
-        return (React.createElement(SearchBar, { id: id, size: Math.max((placeholderToShow || '').length, text.length, 1), tabIndex: this.props.tabIndex, accessKey: this.props.accessKey, placeholder: placeholderToShow, value: text, onChange: this.onChangeHandler, onKeyDown: this.onInputKeyDown, ref: this.searchbarRef, disabled: disabled, expanded: opened, owns: this.base.listBoxId, activedescendant: ariaActivedescendant, ariaDescribedBy: "tagslist-" + this.base.guid + (ariaDescribedBy ? (' ' + ariaDescribedBy) : ''), clearButton: clearButton, clearButtonClick: this.clearButtonClick, loading: this.props.loading, ariaLabelledBy: this.props.ariaLabelledBy }));
+        return (React.createElement(SearchBar, { id: id, size: Math.max((placeholderToShow || '').length, text.length, 1), tabIndex: this.props.tabIndex, accessKey: this.props.accessKey, placeholder: placeholderToShow, value: text, onChange: this.onChangeHandler, onKeyDown: this.onInputKeyDown, ref: this.searchbarRef, disabled: disabled, expanded: opened, owns: this.base.listBoxId, activedescendant: ariaActivedescendant, ariaDescribedBy: "tagslist-" + this.base.guid + (ariaDescribedBy ? (' ' + ariaDescribedBy) : ''), ariaLabelledBy: this.props.ariaLabelledBy }));
     };
     MultiSelectWithoutContext.prototype.onTagsNavigate = function (event, state) {
         var keyCode = event.keyCode;
@@ -715,7 +734,7 @@ var MultiSelectWithoutContext = /** @class */ (function (_super) {
     /**
      * @hidden
      */
-    MultiSelectWithoutContext.defaultProps = __assign({}, DropDownBase.defaultProps, { autoClose: true, required: false });
+    MultiSelectWithoutContext.defaultProps = __assign({}, DropDownBase.defaultProps, { autoClose: true, required: false, size: 'medium', rounded: 'medium', fillMode: 'solid' });
     return MultiSelectWithoutContext;
 }(React.Component));
 export { MultiSelectWithoutContext };

package/dist/es/MultiSelect/MultiSelectProps.d.ts

@@ -218,7 +218,7 @@ export interface MultiSelectProps extends FormComponentProps {
     /**
      * Fires when a tag element is about to be rendered ([see example]({% slug customrendering_multiselect %}#toc-tags)). Used to override the default appearance of the element.
      */
-    tagRender?: (tagData: TagData, li: React.ReactElement<HTMLLIElement>) => React.ReactElement<HTMLLIElement> | null;
+    tagRender?: (tagData: TagData, tag: React.ReactElement) => React.ReactElement;
     /**
      * Sets the header component of the MultiSelect ([see example]({% slug customrendering_multiselect %}#toc-headers-and-footers)).
      */
@@ -227,4 +227,41 @@ export interface MultiSelectProps extends FormComponentProps {
      * Sets the footer component of the MultiSelect ([see example]({% slug customrendering_multiselect %}#toc-headers-and-footers)).
      */
     footer?: React.ReactNode;
+    /**
+     * Configures the `size` of the MultiSelect.
+     *
+     * 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 MultiSelect.
+     *
+     * 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 MultiSelect.
+     *
+     * The available options are:
+     * - solid
+     * - flat
+     * - outline
+     * - null&mdash;Does not set a fillMode `className`.
+     *
+     * @default `solid`
+     */
+    fillMode?: null | 'solid' | 'flat' | 'outline';
 }

package/dist/es/MultiSelect/TagList.d.ts

@@ -20,13 +20,14 @@ export interface TagListProps {
     guid: string;
     focused?: TagData;
     onTagDelete: (items: Array<any>, event: React.MouseEvent<HTMLSpanElement>) => void;
-    tagRender?: (tagData: TagData, li: React.ReactElement<HTMLLIElement>) => React.ReactElement<HTMLLIElement> | null;
+    tagRender?: (tagData: TagData, tag: React.ReactElement) => React.ReactElement;
     tag?: React.ComponentType<{
         tagData: TagData;
         guid: string;
         focusedTag?: TagData;
         onTagDelete: (items: Array<any>, event: React.MouseEvent<HTMLSpanElement>) => void;
     }>;
+    size?: null | 'small' | 'medium' | 'large';
 }
 /**
  * @hidden

package/dist/es/MultiSelect/TagList.js

@@ -12,10 +12,9 @@ var __extends = (this && this.__extends) || (function () {
     };
 })();
 import * as React from 'react';
-var tagClassName = 'k-button';
-var focusedTagClassName = tagClassName + ' k-state-focused';
-var preventDefault = function (event) { return event.preventDefault(); };
-var stopPropagation = function (event) { return event.stopPropagation(); };
+import { Chip } from '@progress/kendo-react-buttons';
+var preventDefault = function (event) { return event.syntheticEvent.preventDefault(); };
+var stopPropagation = function (event) { return event.syntheticEvent.stopPropagation(); };
 /**
  * @hidden
  */
@@ -25,17 +24,13 @@ var TagList = /** @class */ (function (_super) {
         return _super !== null && _super.apply(this, arguments) || this;
     }
     TagList.prototype.render = function () {
-        var _this = this;
-        var _a = this.props, data = _a.data, guid = _a.guid;
-        var TagComponent = this.props.tag;
-        return (React.createElement("ul", { className: "k-reset", role: "listbox", id: 'tagslist-' + guid }, data.map(function (tagData, index) {
-            var tag = TagComponent ? (React.createElement(TagComponent, { tagData: tagData, guid: guid, focusedTag: _this.props.focused, onTagDelete: _this.props.onTagDelete })) : (React.createElement("li", { className: tagData === _this.props.focused ? focusedTagClassName : tagClassName, key: tagData.text + index, id: "tag-" + guid + "-" + tagData.text.replace(/\s+/g, '-'), onMouseDown: preventDefault, onClick: stopPropagation, "aria-selected": true, role: "option", "aria-setsize": data.length },
-                React.createElement("span", null, tagData.text),
-                React.createElement("span", { "aria-label": "delete", className: "k-select", onClick: function (e) { return _this.props.onTagDelete.call(undefined, tagData.data, e); } },
-                    React.createElement("span", { className: "k-icon k-i-close" }))));
-            return _this.props.tagRender ?
-                _this.props.tagRender(tagData, tag) : tag;
-        })));
+        var _a = this.props, data = _a.data, guid = _a.guid, focused = _a.focused, tagRender = _a.tagRender, TagComponent = _a.tag, onTagDelete = _a.onTagDelete, size = _a.size;
+        return (React.createElement(React.Fragment, null,
+            data.map(function (tagData, index) {
+                var tag = TagComponent ? (React.createElement(TagComponent, { tagData: tagData, guid: guid, focusedTag: focused, onTagDelete: onTagDelete })) : (React.createElement(Chip, { id: "tag-" + guid + "-" + tagData.text.replace(/\s+/g, '-'), "aria-selected": true, role: "option", "aria-setsize": data.length, key: tagData.text + index, text: tagData.text, removable: true, removeIcon: 'k-i-close', onRemove: function (e) { return onTagDelete.call(undefined, tagData.data, e.syntheticEvent); }, onMouseDown: preventDefault, onClick: stopPropagation, className: tagData === focused ? 'k-focus' : undefined, size: size }));
+                return tagRender ? tagRender(tagData, tag) : tag;
+            }),
+            this.props.children));
     };
     return TagList;
 }(React.Component));

package/dist/es/MultiSelectTree/MultiSelectTree.js

@@ -11,7 +11,7 @@ var __assign = (this && this.__assign) || function () {
 };
 import * as React from 'react';
 import * as PropTypes from 'prop-types';
-import { classNames, noop, useRtl, getTabIndex, Keys, guid, createPropsContext, usePropsContext } from '@progress/kendo-react-common';
+import { classNames, noop, useRtl, getTabIndex, Keys, guid, kendoThemeMaps, createPropsContext, usePropsContext } from '@progress/kendo-react-common';
 import { Popup } from '@progress/kendo-react-popup';
 import { useLocalization } from '@progress/kendo-react-intl';
 import { TreeView } from '@progress/kendo-react-treeview';
@@ -20,10 +20,13 @@ import { packageMetadata } from './../package-metadata';
 import { getItemValue, areSame, matchTags } from '../common/utils';
 import { useDropdownWidth } from './../DropDownTree/useDropdownWidth';
 import { ListNoData } from './../DropDownTree/ListNoData';
-import { messages, clear, nodata } from './../messages';
+import { messages, nodata } from './../messages';
 import { FloatingLabel } from '@progress/kendo-react-labels';
 import TagList from '../MultiSelect/TagList';
+import ClearButton from '../common/ClearButton';
+import ListFilter from '../common/ListFilter';
 var VALIDATION_MESSAGE = 'Please select a value from the list!';
+var sizeMap = kendoThemeMaps.sizeMap, roundedMap = kendoThemeMaps.roundedMap;
 var toLevel = function (hierarchicalIndex) {
     return hierarchicalIndex.split('_').map(function (i) { return parseInt(i, 10); });
 };
@@ -44,6 +47,9 @@ var defaultProps = {
         width: '200px',
         height: '200px'
     },
+    size: 'medium',
+    rounded: 'medium',
+    fillMode: 'solid',
     required: false,
     validityStyles: true
 };
@@ -61,11 +67,12 @@ export var MultiSelectTreePropsContext = createPropsContext();
  * Obtaining the `ref` returns an object of type [MultiSelectTreeHandle]({% slug api_dropdowns_multiselecttreehandle %}).
  */
 export var MultiSelectTree = React.forwardRef(function (directProps, ref) {
+    var _a, _b;
     var props = usePropsContext(MultiSelectTreePropsContext, directProps);
     validatePackage(packageMetadata);
     var componentGuid = React.useMemo(function () { return guid(); }, []);
     var id = props.id || componentGuid;
-    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 ? noop : _d, _e = props.onClose, onClose = _e === void 0 ? noop : _e, placeholder = props.placeholder, label = props.label, name = props.name, _f = props.checkField, checkField = _f === void 0 ? defaultProps.checkField : _f, _g = props.checkIndeterminateField, checkIndeterminateField = _g === void 0 ? defaultProps.checkIndeterminateField : _g, _h = props.subItemsField, subItemsField = _h === void 0 ? defaultProps.subItemsField : _h, validationMessage = props.validationMessage, valid = props.valid, tags = props.tags, value = props.value, _j = props.required, required = _j === void 0 ? defaultProps.required : _j, _k = props.validityStyles, validityStyles = _k === void 0 ? defaultProps.validityStyles : _k;
+    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 ? noop : _f, _g = props.onClose, onClose = _g === void 0 ? noop : _g, placeholder = props.placeholder, label = props.label, name = props.name, _h = props.checkField, checkField = _h === void 0 ? defaultProps.checkField : _h, _j = props.checkIndeterminateField, checkIndeterminateField = _j === void 0 ? defaultProps.checkIndeterminateField : _j, _k = props.subItemsField, subItemsField = _k === void 0 ? defaultProps.subItemsField : _k, validationMessage = props.validationMessage, valid = props.valid, tags = props.tags, value = props.value, _l = props.required, required = _l === void 0 ? defaultProps.required : _l, _m = props.validityStyles, validityStyles = _m === void 0 ? defaultProps.validityStyles : _m;
     var tabIndex = getTabIndex(props.tabIndex, disabled);
     var targetRef = React.useRef(null);
     var elementRef = React.useRef(null);
@@ -75,10 +82,10 @@ export var MultiSelectTree = React.forwardRef(function (directProps, ref) {
     var skipFocusRef = React.useRef(false);
     var tagsToRenderRef = React.useRef([]);
     var popupRef = React.useRef(null);
-    var _l = React.useState(), focusedTagState = _l[0], setFocusedTagState = _l[1];
-    var _m = React.useState(false), openState = _m[0], setOpenState = _m[1];
-    var _o = React.useState(false), focusedState = _o[0], setFocusedState = _o[1];
-    var _p = React.useState(''), filterState = _p[0], setFilterState = _p[1];
+    var _o = React.useState(), focusedTagState = _o[0], setFocusedTagState = _o[1];
+    var _p = React.useState(false), openState = _p[0], setOpenState = _p[1];
+    var _q = React.useState(false), focusedState = _q[0], setFocusedState = _q[1];
+    var _r = React.useState(''), filterState = _r[0], setFilterState = _r[1];
     var isOpen = opened !== undefined ? opened : openState;
     var hasValue = Boolean(Array.isArray(value) && value.length);
     var validity = getValidity({ validationMessage: validationMessage, valid: valid, required: required }, hasValue);
@@ -283,13 +290,13 @@ export var MultiSelectTree = React.forwardRef(function (directProps, ref) {
             if (keyCode === Keys.esc || (altKey && keyCode === Keys.up)) {
                 closePopup(ev);
             }
-            else if (treeviewElement && treeviewElement.querySelector('.k-state-focused') &&
+            else if (treeviewElement && treeviewElement.querySelector('.k-focus') &&
                 (keyCode === Keys.up || keyCode === Keys.down ||
                     keyCode === Keys.left || keyCode === Keys.right ||
                     keyCode === Keys.home || keyCode === Keys.end)) {
                 if (keyCode === Keys.up && inputRef.current) {
                     var items = Array.from(treeviewElement.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); });
                     }
@@ -368,26 +375,31 @@ export var MultiSelectTree = React.forwardRef(function (directProps, ref) {
     var NoData = props.listNoData || ListNoData;
     var localization = useLocalization();
     var isValid = !validityStyles || validity.valid;
-    var multiselecttree = (React.createElement("span", { className: classNames('k-widget k-dropdowntree', props.className, {
-            'k-state-focused': focusedState && !disabled,
-            'k-state-invalid': !isValid,
-            'k-state-disabled': disabled
-        }), 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: classNames('k-multiselect-wrap k-floatwrap', {
-                'k-state-focused': focusedState,
-                'k-state-disabled': disabled,
-                'k-state-invalid': !isValid
-            }), onClick: disabled ? undefined : onWrapperClick },
-            tagsToRenderRef.current.length > 0 && (React.createElement(TagList, { tag: props.tag, onTagDelete: onTagDelete, data: tagsToRenderRef.current, guid: componentGuid, focused: focusedTagState ? tagsToRenderRef.current.find(function (t) { return matchTags(t, focusedTagState, dataItemKey); }) : undefined })),
-            props.loading && (React.createElement("span", { className: classNames('k-icon', { 'k-i-loading': props.loading }) })),
-            hasValue && !disabled && (React.createElement("span", { onClick: onClear, className: "k-icon k-clear-value k-i-close", title: localization.toLanguageString(clear, messages[clear]), role: "button", tabIndex: -1, onMouseDown: function (e) { return e.preventDefault(); } })),
-            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(Popup, { popupClass: popupSettings.popupClass, className: classNames('k-list-container k-group k-reset k-popup-dropdowntree', popupSettings.className, { 'k-rtl': dir === 'rtl' }), style: popupStyles, animate: popupSettings.animate, anchor: elementRef.current, show: isOpen, onOpen: onPopupOpened, onClose: onPopupClosed, appendTo: popupSettings.appendTo, ref: popupRef },
-            props.filterable && (React.createElement("span", { className: "k-list-filter" },
-                React.createElement("input", { className: "k-textbox", tabIndex: tabIndex, ref: inputRef, value: props.filter === undefined ? filterState : props.filter, onChange: onFilterChange, onKeyDown: onInputKeyDown }),
-                React.createElement("span", { className: "k-icon k-i-zoom" }))),
-            data.length > 0 ? (React.createElement(TreeView, { ref: treeViewRef, tabIndex: tabIndex, data: data, focusIdField: dataItemKey, textField: props.textField, checkField: checkField, checkIndeterminateField: checkIndeterminateField, expandField: props.expandField, childrenField: subItemsField, expandIcons: true, onItemClick: onChange, onCheckChange: onChange, onExpandChange: onExpand, checkboxes: true, item: props.item })) : (React.createElement(NoData, null, localization.toLanguageString(nodata, messages[nodata]))))));
+    var size = props.size, rounded = props.rounded, fillMode = props.fillMode;
+    var multiselecttree = (React.createElement("span", { className: classNames('k-multiselect k-input', props.className, (_a = {},
+            _a["k-input-" + (sizeMap[size] || size)] = size,
+            _a["k-rounded-" + (roundedMap[rounded] || rounded)] = rounded,
+            _a["k-input-" + fillMode] = fillMode,
+            _a['k-focus'] = focusedState && !disabled,
+            _a['k-invalid'] = !isValid,
+            _a['k-valid'] = isValid,
+            _a['k-disabled'] = disabled,
+            _a['k-loading'] = props.loading,
+            _a['k-required'] = required,
+            _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, 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, onClick: disabled ? undefined : onWrapperClick },
+        tagsToRenderRef.current.length > 0 && (React.createElement("div", { className: classNames('k-input-values k-chip-list k-selection-multiple', (_b = {},
+                _b["k-chip-list-" + (sizeMap[size] || size)] = size,
+                _b)), role: "listbox", id: 'tagslist-' + id },
+            React.createElement(TagList, { tag: props.tag, onTagDelete: onTagDelete, data: tagsToRenderRef.current, guid: id, focused: focusedTagState ? tagsToRenderRef.current.find(function (t) { return matchTags(t, focusedTagState, dataItemKey); }) : undefined, size: size }))),
+        !hasValue && React.createElement("span", { className: "k-input-inner" },
+            React.createElement("span", { className: "k-input-value-text" }, "\u00A0")),
+        props.loading && React.createElement("span", { className: "k-icon k-i-loading" }),
+        hasValue && !disabled && React.createElement(ClearButton, { onClick: onClear }),
+        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(Popup, { popupClass: popupSettings.popupClass, className: classNames(popupSettings.className, { 'k-rtl': dir === 'rtl' }), style: popupStyles, animate: popupSettings.animate, anchor: elementRef.current, show: isOpen, onOpen: onPopupOpened, onClose: onPopupClosed, appendTo: popupSettings.appendTo, ref: popupRef },
+            props.filterable && (React.createElement(ListFilter, { value: props.filter === undefined ? filterState : props.filter, inputRef: inputRef, onChange: onFilterChange, onKeyDown: onInputKeyDown, tabIndex: tabIndex, size: size, rounded: rounded, fillMode: fillMode })),
+            data.length > 0 ? (React.createElement(TreeView, { ref: treeViewRef, tabIndex: tabIndex, data: data, focusIdField: dataItemKey, textField: props.textField, checkField: checkField, checkIndeterminateField: checkIndeterminateField, expandField: props.expandField, childrenField: subItemsField, expandIcons: true, onItemClick: onChange, onCheckChange: onChange, onExpandChange: onExpand, checkboxes: true, size: size, item: props.item })) : (React.createElement(NoData, null, localization.toLanguageString(nodata, messages[nodata]))))));
     return label ? (React.createElement(FloatingLabel, { label: label, editorValue: hasValue, editorPlaceholder: placeholder, editorValid: isValid, editorDisabled: disabled, editorId: id, style: { width: style ? style.width : undefined }, children: multiselecttree, dir: dir })) : multiselecttree;
 });
 var propTypes = {
@@ -446,4 +458,5 @@ var propTypes = {
     listNoData: PropTypes.func
 };
 MultiSelectTree.displayName = 'KendoReactMultiSelectTree';
+MultiSelectTree.defaultProps = defaultProps;
 MultiSelectTree.propTypes = propTypes;

package/dist/es/MultiSelectTree/MultiSelectTreeProps.d.ts

@@ -263,4 +263,41 @@ export interface MultiSelectTreeProps extends FormComponentProps {
      */
     listNoData?: React.ComponentType<MultiSelectTreeListNoDataProps>;
     tag?: React.ComponentType<MultiSelectTreeTagProps>;
+    /**
+     * Configures the `size` of the MultiSelectTree.
+     *
+     * 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 MultiSelectTree.
+     *
+     * 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 MultiSelectTree.
+     *
+     * The available options are:
+     * - solid
+     * - flat
+     * - outline
+     * - null&mdash;Does not set a fillMode `className`.
+     *
+     * @default `solid`
+     */
+    fillMode?: null | 'solid' | 'flat' | 'outline';
 }

package/dist/es/common/ClearButton.js

@@ -26,7 +26,8 @@ var ClearButton = /** @class */ (function (_super) {
     }
     ClearButton.prototype.render = function () {
         var title = provideLocalizationService(this).toLanguageString(clear, messages[clear]);
-        return (React.createElement("span", { className: "k-icon k-clear-value k-i-close", role: "button", onClick: this.props.onClick, onMouseDown: this.onMouseDown, tabIndex: -1, title: title, key: "clearbutton" }));
+        return (React.createElement("span", { className: "k-clear-value", role: "button", onClick: this.props.onClick, onMouseDown: this.onMouseDown, tabIndex: -1, title: title, key: "clearbutton" },
+            React.createElement("span", { className: "k-icon k-i-x" })));
     };
     return ClearButton;
 }(React.Component));

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

@@ -68,7 +68,7 @@ export default class DropDownBase {
             }>>;
             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>;
         }>>;
@@ -112,7 +112,7 @@ export default class DropDownBase {
             }>>;
             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>;
         }>>;
@@ -158,7 +158,6 @@ export default class DropDownBase {
     triggerOnPageChange(state: InternalState, skip: number, take: number): void;
     triggerPageChangeCornerItems(item: any, state: InternalState): void;
     scrollToVirtualItem: (virtual: VirtualizationSettings, selectedItemIndex: number) => void;
-    renderScrollWrapper: (children: React.ReactNode, onScroll?: (event: React.UIEvent<HTMLDivElement>) => void) => {};
     renderScrollElement: () => JSX.Element;
     getPopupSettings(): DropDownsPopupSettings;
 }

package/dist/es/common/DropDownBase.js

@@ -26,6 +26,7 @@ var DropDownBase = /** @class */ (function () {
         this.handleItemClick = function (index, event) {
             var state = _this.initState();
             state.syntheticEvent = event;
+            event.stopPropagation();
             _this.component.handleItemSelect(index, state);
             _this.togglePopup(state);
             _this.applyState(state);
@@ -96,21 +97,6 @@ var DropDownBase = /** @class */ (function () {
             }
             window.setTimeout(function () { return vs.enabled = true; }, 10);
         };
-        // Common rendering
-        this.renderScrollWrapper = function (children, onScroll) {
-            var popupSettings = _this.getPopupSettings();
-            var vs = _this.vs;
-            return vs.enabled ? (React.createElement("div", { onScroll: function (e) {
-                    vs.scrollHandler(e);
-                    if (onScroll) {
-                        onScroll.call(undefined, e);
-                    }
-                }, ref: vs.scrollerRef, style: {
-                    height: popupSettings.height,
-                    overflowY: 'scroll'
-                } }, children)) :
-                (children);
-        };
         this.renderScrollElement = function () {
             var vs = _this.vs;
             return vs.enabled && (React.createElement("div", { ref: function (element) { return vs.scrollElement = element; }, key: 'scrollElementKey' }));
@@ -233,7 +219,7 @@ var DropDownBase = /** @class */ (function () {
                 })]),
             popupClass: PropTypes.string,
             className: PropTypes.string,
-            appendTo: PropTypes.any,
+            appendTo: PropTypes.element,
             width: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
             height: PropTypes.oneOfType([PropTypes.string, PropTypes.number])
         }),

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

@@ -28,6 +28,7 @@ export interface ListProps {
     onMouseDown?: (event: React.MouseEvent<HTMLDivElement>) => void;
     onBlur?: (event: React.FocusEvent<HTMLDivElement>) => void;
     onScroll?: (event: React.UIEvent<HTMLDivElement>) => void;
+    scroller?: any;
 }
 /**
  * @hidden

package/dist/es/common/List.js

@@ -54,10 +54,11 @@ var List = /** @class */ (function (_super) {
     };
     List.prototype.render = function () {
         var localizationService = provideLocalizationService(this);
-        var _a = this.props, id = _a.id, show = _a.show, wrapperCssClass = _a.wrapperCssClass, wrapperStyle = _a.wrapperStyle, listStyle = _a.listStyle, listRef = _a.listRef, wrapperRef = _a.wrapperRef, _b = _a.listClassName, listClassName = _b === void 0 ? 'k-list' : _b;
+        var _a = this.props, id = _a.id, show = _a.show, wrapperCssClass = _a.wrapperCssClass, wrapperStyle = _a.wrapperStyle, listStyle = _a.listStyle, listRef = _a.listRef, wrapperRef = _a.wrapperRef, _b = _a.listClassName, listClassName = _b === void 0 ? 'k-list-ul' : _b;
         var items = this.renderItems();
         return (items.length ? (React.createElement("div", { className: wrapperCssClass, style: wrapperStyle, ref: wrapperRef, onMouseDown: this.props.onMouseDown, onBlur: this.props.onBlur, onScroll: this.props.onScroll, unselectable: "on" },
-            React.createElement("ul", { id: id, role: "listbox", "aria-hidden": !show ? true : undefined, className: listClassName + ' k-reset', ref: listRef, style: listStyle }, items))) : this.renderNoValueElement(localizationService));
+            React.createElement("ul", { id: id, role: "listbox", "aria-hidden": !show ? true : undefined, className: listClassName, ref: listRef, style: listStyle }, items),
+            this.props.scroller)) : this.renderNoValueElement(localizationService));
     };
     return List;
 }(React.Component));

package/dist/es/common/ListDefaultItem.js

@@ -25,8 +25,8 @@ var ListDefaultItem = /** @class */ (function (_super) {
     }
     ListDefaultItem.prototype.render = function () {
         var _a = this.props, selected = _a.selected, defaultItem = _a.defaultItem, textField = _a.textField;
-        return (React.createElement("div", { onClick: this.props.onClick, onMouseDown: preventDefault, className: classNames('k-list-optionlabel', {
-                'k-state-selected': selected
+        return (React.createElement("div", { onClick: this.props.onClick, onMouseDown: preventDefault, style: { position: 'unset' }, className: classNames('k-list-optionlabel', {
+                'k-selected': selected
             }) }, getItemValue(defaultItem, textField) || ''));
     };
     return ListDefaultItem;

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

@@ -4,8 +4,13 @@ import * as React from 'react';
  */
 export interface ListFilterProps {
     value?: string;
+    inputRef?: any;
+    tabIndex?: number;
     onChange?: React.ChangeEventHandler<HTMLInputElement>;
     onKeyDown?: React.KeyboardEventHandler<HTMLInputElement>;
+    size?: null | 'small' | 'medium' | 'large';
+    rounded?: null | 'small' | 'medium' | 'large' | 'full';
+    fillMode?: null | 'solid' | 'flat' | 'outline';
 }
 /**
  * @hidden