@progress/kendo-react-dropdowns 5.10.0-dev.202301091032 → 5.10.0-dev.202301111405

package/dist/es/AutoComplete/AutoComplete.js

@@ -31,7 +31,7 @@ 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, kendoThemeMaps } from '@progress/kendo-react-common';
+import { guid, Keys, classNames, createPropsContext, withPropsContext, kendoThemeMaps, IconWrap } from '@progress/kendo-react-common';
 import { FloatingLabel } from '@progress/kendo-react-labels';
 import { validatePackage } from '@progress/kendo-react-common';
 import { packageMetadata } from '../package-metadata';
@@ -319,7 +319,7 @@ var AutoCompleteWithoutContext = /** @class */ (function (_super) {
                 ? style
                 : __assign(__assign({}, style), { width: undefined }), dir: dir },
             this.renderSearchBar(value || '', id),
-            loading && React.createElement("span", { className: "k-icon k-i-loading k-input-loading-icon" }),
+            loading && React.createElement(IconWrap, { className: "k-input-loading-icon", name: 'loading' }),
             renderClearButton && !loading && React.createElement(ClearButton, { onClick: this.clearButtonClick, key: "clearbutton" }),
             this.renderListContainer()));
         return label
@@ -383,7 +383,7 @@ var AutoCompleteWithoutContext = /** @class */ (function (_super) {
                 animate: popupSettings.animate,
                 anchor: this.element,
                 show: opened,
-                popupClass: classNames(popupSettings.popupClass, 'k-list-container'),
+                popupClass: classNames(popupSettings.popupClass, 'k-list-container', 'k-autocomplete-popup'),
                 className: popupSettings.className,
                 appendTo: popupSettings.appendTo
             }, dir: dir !== undefined ? dir : this.base.dirCalculated, itemsCount: [data.length] },

package/dist/es/ComboBox/ComboBox.d.ts

@@ -34,6 +34,11 @@ export declare class ComboBoxWithoutContext extends React.Component<ComboBoxProp
         allowCustom: PropTypes.Requireable<boolean>;
         clearButton: PropTypes.Requireable<boolean>;
         iconClassName: PropTypes.Requireable<string>;
+        svgIcon: PropTypes.Requireable<PropTypes.InferProps<{
+            name: PropTypes.Validator<string>;
+            content: PropTypes.Validator<string>;
+            viewBox: PropTypes.Validator<string>;
+        }>>;
         validationMessage: PropTypes.Requireable<string>;
         required: PropTypes.Requireable<boolean>;
         id: PropTypes.Requireable<string>;

package/dist/es/ComboBox/ComboBox.js

@@ -27,7 +27,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, kendoThemeMaps } from '@progress/kendo-react-common';
+import { guid, classNames, Keys, createPropsContext, withPropsContext, kendoThemeMaps, svgIconPropType } 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';
@@ -37,6 +37,7 @@ import { validatePackage } from '@progress/kendo-react-common';
 import { packageMetadata } from '../package-metadata';
 import ClearButton from '../common/ClearButton';
 import { Button } from '@progress/kendo-react-buttons';
+import { caretAltDownIcon } from '@progress/kendo-svg-icons';
 var VALIDATION_MESSAGE = 'Please enter a valid value!';
 var sizeMap = kendoThemeMaps.sizeMap, roundedMap = kendoThemeMaps.roundedMap;
 /** @hidden */
@@ -390,7 +391,7 @@ var ComboBoxWithoutContext = /** @class */ (function (_super) {
             this.renderSearchBar(inputText || '', id),
             renderClearButton && !loading && React.createElement(ClearButton, { onClick: this.clearButtonClick, key: "clearbutton" }),
             loading && React.createElement("span", { className: "k-icon k-i-loading k-input-loading-icon", key: "loading" }),
-            React.createElement(Button, { tabIndex: -1, type: "button", icon: !iconClassName ? 'caret-alt-down' : undefined, iconClass: iconClassName, size: size, fillMode: fillMode, rounded: null, themeColor: 'base', className: "k-input-button", onClick: this.toggleBtnClick, onMouseDown: function (e) { return e.preventDefault(); } }),
+            React.createElement(Button, { tabIndex: -1, type: "button", icon: !iconClassName ? 'caret-alt-down' : undefined, svgIcon: !iconClassName ? caretAltDownIcon : this.props.svgIcon, iconClass: iconClassName, size: size, fillMode: fillMode, rounded: null, themeColor: 'base', className: "k-input-button", onClick: this.toggleBtnClick, onMouseDown: function (e) { return e.preventDefault(); } }),
             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 }))
@@ -521,7 +522,7 @@ var ComboBoxWithoutContext = /** @class */ (function (_super) {
                 animate: popupSettings.animate,
                 anchor: this.element,
                 show: opened,
-                popupClass: classNames(popupSettings.popupClass, 'k-list-container'),
+                popupClass: classNames(popupSettings.popupClass, 'k-list-container', 'k-combobox-popup'),
                 className: popupSettings.className,
                 appendTo: popupSettings.appendTo
             }, dir: dir !== undefined ? dir : this.base.dirCalculated, itemsCount: [data.length] },
@@ -604,7 +605,7 @@ var ComboBoxWithoutContext = /** @class */ (function (_super) {
     /**
      * @hidden
      */
-    ComboBoxWithoutContext.propTypes = __assign(__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 });
+    ComboBoxWithoutContext.propTypes = __assign(__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, svgIcon: svgIconPropType, validationMessage: PropTypes.string, required: PropTypes.bool, id: PropTypes.string, ariaLabelledBy: PropTypes.string, ariaDescribedBy: PropTypes.string, list: PropTypes.any, valueRender: PropTypes.func });
     /**
      * @hidden
      */

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

@@ -1,7 +1,7 @@
 /// <reference types="react" />
 import { ComboBox } from './ComboBox';
 import { FilterChangeEvent, ChangeEvent, OpenEvent, CloseEvent, FocusEvent, BlurEvent, PageChangeEvent } from './../common/events';
-import { FormComponentProps } from '@progress/kendo-react-common';
+import { FormComponentProps, SVGIcon } from '@progress/kendo-react-common';
 import { VirtualizationSettings, DropDownsPopupSettings } from '../common/settings';
 import { ListItemProps } from '../common/ListItem';
 /**
@@ -71,6 +71,10 @@ export interface ComboBoxProps extends FormComponentProps {
      * Sets CSS classes to the expand `icon` DOM element.
      */
     iconClassName?: string;
+    /**
+     * Sets the specified SVG icon.
+     */
+    svgIcon?: SVGIcon;
     /**
      * If `clearButton` is set to `true`, the ComboBox renders a button on hovering over the component. Clicking this button resets the value of the ComboBox to `undefined` and triggers the `change` event.
      */

package/dist/es/DropDownList/DropDownList.d.ts

@@ -25,13 +25,12 @@ export declare class DropDownListWithoutContext extends React.Component<DropDown
         virtual: PropTypes.Requireable<PropTypes.InferProps<{
             pageSize: PropTypes.Validator<number>;
             skip: PropTypes.Validator<number>;
-            /**
-             * @hidden
-             */
             total: PropTypes.Validator<number>;
         }>>;
         onFilterChange: PropTypes.Requireable<(...args: any[]) => any>;
-        onPageChange: PropTypes.Requireable<(...args: any[]) => any>;
+        onPageChange: PropTypes.Requireable<(...args: any[]) => any>; /**
+         * @hidden
+         */
         opened: PropTypes.Requireable<boolean>;
         disabled: PropTypes.Requireable<boolean>;
         dir: PropTypes.Requireable<string>;
@@ -66,6 +65,11 @@ export declare class DropDownListWithoutContext extends React.Component<DropDown
         delay: PropTypes.Requireable<number>;
         ignoreCase: PropTypes.Requireable<boolean>;
         iconClassName: PropTypes.Requireable<string>;
+        svgIcon: PropTypes.Requireable<PropTypes.InferProps<{
+            name: PropTypes.Validator<string>;
+            content: PropTypes.Validator<string>;
+            viewBox: PropTypes.Validator<string>;
+        }>>;
         defaultItem: PropTypes.Requireable<any>;
         valueRender: PropTypes.Requireable<(...args: any[]) => any>;
         valueMap: PropTypes.Requireable<(...args: any[]) => any>;

package/dist/es/DropDownList/DropDownList.js

@@ -26,8 +26,9 @@ var __assign = (this && this.__assign) || function () {
 };
 import * as React from 'react';
 import * as PropTypes from 'prop-types';
-import { classNames, Keys, getTabIndex, createPropsContext, withPropsContext, kendoThemeMaps } from '@progress/kendo-react-common';
+import { classNames, Keys, getTabIndex, createPropsContext, withPropsContext, kendoThemeMaps, IconWrap, svgIconPropType } from '@progress/kendo-react-common';
 import { FloatingLabel } from '@progress/kendo-react-labels';
+import { caretAltDownIcon } from '@progress/kendo-svg-icons';
 import ListContainer from '../common/ListContainer';
 import ListFilter from '../common/ListFilter';
 import ListDefaultItem from '../common/ListDefaultItem';
@@ -99,7 +100,7 @@ var DropDownListWithoutContext = /** @class */ (function (_super) {
                 dir: dir !== undefined ? dir : base.dirCalculated,
                 width: popupWidth,
                 popupSettings: {
-                    popupClass: classNames(popupSettings.popupClass, 'k-list-container'),
+                    popupClass: classNames(popupSettings.popupClass, 'k-list-container', 'k-dropdownlist-popup'),
                     className: popupSettings.className,
                     animate: popupSettings.animate,
                     anchor: _this.element,
@@ -520,8 +521,8 @@ var DropDownListWithoutContext = /** @class */ (function (_super) {
                 ? style
                 : __assign(__assign({}, style), { width: undefined }), dir: dir, onMouseDown: opened ? preventDefaultNonInputs : undefined, onFocus: this.handleFocus, onBlur: this.handleBlur, tabIndex: getTabIndex(tabIndex, disabled), accessKey: this.props.accessKey, onKeyDown: this.handleKeyDown, onKeyPress: this.handleKeyPress, onClick: disabled ? undefined : this.handleWrapperClick, role: 'combobox', "aria-required": this.required, "aria-disabled": disabled || undefined, "aria-haspopup": 'listbox', "aria-expanded": opened || false, "aria-owns": this.base.listBoxId, "aria-activedescendant": opened ? ('option-' + this.base.guid + '-' + (selectedIndex + (virtual ? virtual.skip : 0))) : undefined, "aria-label": this.props.ariaLabel || this.props.label, "aria-labelledby": this.props.ariaLabelledBy, "aria-describedby": this.props.ariaDescribedBy, id: this.props.id, title: this.props.title },
             valueElement,
-            loading && React.createElement("span", { className: "k-icon k-i-loading k-input-loading-icon", key: "loading" }),
-            React.createElement(Button, { tabIndex: -1, type: "button", "aria-hidden": true, size: size, fillMode: fillMode, iconClass: iconClassName, className: "k-input-button", themeColor: 'base', icon: !iconClassName ? 'caret-alt-down' : undefined, onMouseDown: function (e) { return _this.state.focused && e.preventDefault(); } }),
+            loading && React.createElement(IconWrap, { className: "k-input-loading-icon", name: 'loading' }),
+            React.createElement(Button, { tabIndex: -1, type: "button", "aria-hidden": true, size: size, fillMode: fillMode, iconClass: iconClassName, className: "k-input-button", themeColor: 'base', icon: !iconClassName ? 'caret-alt-down' : undefined, svgIcon: !iconClassName ? caretAltDownIcon : this.props.svgIcon, onMouseDown: function (e) { return _this.state.focused && e.preventDefault(); } }),
             this.dummySelect(value),
             this.renderListContainer()));
         return label ? (React.createElement(FloatingLabel, { label: label, editorValue: text, editorValid: isValid, editorDisabled: this.props.disabled, style: { width: style ? style.width : undefined }, children: dropdownlist })) : dropdownlist;
@@ -583,7 +584,7 @@ var DropDownListWithoutContext = /** @class */ (function (_super) {
     /**
      * @hidden
      */
-    DropDownListWithoutContext.propTypes = __assign({ delay: PropTypes.number, ignoreCase: PropTypes.bool, iconClassName: PropTypes.string, defaultItem: PropTypes.any, valueRender: PropTypes.func, valueMap: PropTypes.func, validationMessage: PropTypes.string, required: PropTypes.bool, id: PropTypes.string, ariaLabelledBy: PropTypes.string, ariaDescribedBy: PropTypes.string, ariaLabel: PropTypes.string, leftRightKeysNavigation: PropTypes.bool, title: PropTypes.string }, DropDownBase.propTypes);
+    DropDownListWithoutContext.propTypes = __assign({ delay: PropTypes.number, ignoreCase: PropTypes.bool, iconClassName: PropTypes.string, svgIcon: svgIconPropType, defaultItem: PropTypes.any, valueRender: PropTypes.func, valueMap: PropTypes.func, validationMessage: PropTypes.string, required: PropTypes.bool, id: PropTypes.string, ariaLabelledBy: PropTypes.string, ariaDescribedBy: PropTypes.string, ariaLabel: PropTypes.string, leftRightKeysNavigation: PropTypes.bool, title: PropTypes.string }, DropDownBase.propTypes);
     /**
      * @hidden
      */

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

@@ -3,7 +3,7 @@ import { DropDownList } from './DropDownList';
 import { FilterChangeEvent, ChangeEvent, OpenEvent, CloseEvent, FocusEvent, BlurEvent, PageChangeEvent } from './../common/events';
 import { VirtualizationSettings, DropDownsPopupSettings } from '../common/settings';
 import { ListItemProps } from '../common/ListItem';
-import { FormComponentProps } from '@progress/kendo-react-common';
+import { FormComponentProps, SVGIcon } from '@progress/kendo-react-common';
 /**
  * Represents the object of the `filterChange` DropDownList event.
  */
@@ -83,6 +83,10 @@ export interface DropDownListProps extends FormComponentProps {
      * Sets CSS classes to the expand `icon` DOM element.
      */
     iconClassName?: string;
+    /**
+     * Sets the specified SVG icon.
+     */
+    svgIcon?: SVGIcon;
     /**
      * Sets the title attribute to the DropDownList DOM element.
      */

package/dist/es/DropDownTree/DropDownTree.js

@@ -20,7 +20,7 @@ var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
 };
 import * as React from 'react';
 import * as PropTypes from 'prop-types';
-import { classNames, noop, useRtl, getTabIndex, Keys, mapTree, extendDataItem, guid, createPropsContext, kendoThemeMaps, usePropsContext } from '@progress/kendo-react-common';
+import { classNames, noop, useRtl, getTabIndex, Keys, mapTree, extendDataItem, guid, createPropsContext, kendoThemeMaps, usePropsContext, IconWrap } 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';
@@ -33,6 +33,7 @@ import { messages, clear, nodata } from './../messages';
 import { FloatingLabel } from '@progress/kendo-react-labels';
 import ListFilter from '../common/ListFilter';
 import { Button } from '@progress/kendo-react-buttons';
+import { xIcon, caretAltDownIcon } from '@progress/kendo-svg-icons';
 var sizeMap = kendoThemeMaps.sizeMap, roundedMap = kendoThemeMaps.roundedMap;
 var VALIDATION_MESSAGE = 'Please select a value from the list!';
 var ValueHolder = function (props) {
@@ -354,13 +355,13 @@ export var DropDownTree = React.forwardRef(function (directProps, ref) {
             _a)), tabIndex: tabIndex, accessKey: props.accessKey, id: id, style: label ? __assign(__assign({}, style), { width: undefined }) : style, dir: dir, ref: elementRef, onKeyDown: disabled ? undefined : onWrapperKeyDown, onMouseDown: onWrapperMouseDown, onClick: disabled ? undefined : onWrapperClick, onFocus: onFocus, onBlur: onBlur, role: "combobox", "aria-haspopup": "tree", "aria-expanded": isOpen, "aria-disabled": disabled, "aria-label": label, "aria-labelledby": props.ariaLabelledBy, "aria-describedby": props.ariaDescribedBy },
         React.createElement("span", { className: "k-input-inner" },
             React.createElement(ValueComponent, { item: value }, currentValueText || placeholder)),
-        props.loading && React.createElement("span", { className: "k-icon k-i-loading k-input-loading-icon" }),
+        props.loading && React.createElement(IconWrap, { className: "k-input-loading-icon", name: 'loading' }),
         hasValue && !disabled && (React.createElement("span", { onClick: onClear, className: "k-clear-value", title: localization.toLanguageString(clear, messages[clear]), role: "button", tabIndex: -1, onMouseDown: function (e) { return e.preventDefault(); } },
-            React.createElement("span", { className: "k-icon k-i-x" }))),
-        React.createElement(Button, { tabIndex: -1, type: "button", "aria-label": "select", className: "k-input-button", size: size, fillMode: fillMode, themeColor: "base", rounded: null, icon: "caret-alt-down" }),
+            React.createElement(IconWrap, { name: 'x', icon: xIcon }))),
+        React.createElement(Button, { tabIndex: -1, type: "button", "aria-label": "select", className: "k-input-button", size: size, fillMode: fillMode, themeColor: "base", rounded: null, icon: "caret-alt-down", svgIcon: caretAltDownIcon }),
         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, { className: classNames(popupSettings.className, { 'k-rtl': dir === 'rtl' }), popupClass: classNames(popupSettings.popupClass, 'k-list-container'), style: popupStyles, animate: popupSettings.animate, anchor: elementRef.current, show: isOpen, onOpen: onPopupOpened, onClose: onPopupClosed, appendTo: popupSettings.appendTo },
+        React.createElement(Popup, { className: classNames(popupSettings.className, { 'k-rtl': dir === 'rtl' }), popupClass: classNames(popupSettings.popupClass, 'k-list-container', 'k-dropdowntree-popup'), style: popupStyles, animate: popupSettings.animate, anchor: elementRef.current, show: isOpen, onOpen: onPopupOpened, onClose: onPopupClosed, appendTo: popupSettings.appendTo },
             props.filterable && (React.createElement(ListFilter, { value: props.filter === undefined ? filter : props.filter, inputRef: inputRef, onChange: onFilterChange, onKeyDown: onInputKeyDown, size: size, rounded: rounded, fillMode: fillMode })),
             data.length > 0 ? (React.createElement(TreeView, { ref: treeViewRef, tabIndex: tabIndex, data: treeViewData, focusIdField: dataItemKey, textField: props.textField, selectField: selectField, expandField: props.expandField, childrenField: subItemsField, expandIcons: true, onItemClick: onChange, onExpandChange: onExpand, size: size, item: props.item })) : (React.createElement(NoData, null, localization.toLanguageString(nodata, messages[nodata]))))));
     return label ? (React.createElement(FloatingLabel, { label: label, editorValue: currentValueText, editorPlaceholder: placeholder, editorValid: isValid, editorDisabled: disabled, editorId: id, style: { width: style ? style.width : undefined }, children: dropdowntree, dir: dir })) : dropdowntree;

package/dist/es/MultiSelect/MultiSelect.js

@@ -35,7 +35,8 @@ var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
 };
 import * as React from 'react';
 import * as PropTypes from 'prop-types';
-import { classNames, Keys, guid, createPropsContext, kendoThemeMaps, withPropsContext } from '@progress/kendo-react-common';
+import { classNames, Keys, guid, createPropsContext, kendoThemeMaps, withPropsContext, IconWrap } from '@progress/kendo-react-common';
+import { plusIcon } from '@progress/kendo-svg-icons';
 import { FloatingLabel } from '@progress/kendo-react-labels';
 import ListContainer from '../common/ListContainer';
 import List from '../common/List';
@@ -258,7 +259,7 @@ var MultiSelectWithoutContext = /** @class */ (function (_super) {
                 dir: dir !== undefined ? dir : base.dirCalculated,
                 width: popupWidth,
                 popupSettings: {
-                    popupClass: classNames(popupSettings.popupClass, 'k-list-container'),
+                    popupClass: classNames(popupSettings.popupClass, 'k-list-container', 'k-multiselect-popup'),
                     className: popupSettings.className,
                     animate: popupSettings.animate,
                     anchor: _this.element,
@@ -275,7 +276,7 @@ var MultiSelectWithoutContext = /** @class */ (function (_super) {
                     _a)), 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: { position: 'absolute', right: '0.5em' } }))));
+                    React.createElement(IconWrap, { name: 'plus', icon: plusIcon, style: { position: 'absolute', right: '0.5em' } }))));
             return (React.createElement(ListContainer, __assign({}, listContainerProps),
                 header && React.createElement("div", { className: "k-list-header" }, header),
                 customItem,
@@ -584,12 +585,12 @@ var MultiSelectWithoutContext = /** @class */ (function (_super) {
                 _a)), style: !label
                 ? style
                 : __assign(__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-".concat(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 }),
+            React.createElement("div", { className: classNames('k-input-values') },
+                React.createElement("div", { className: classNames('k-chip-list', (_b = {},
+                        _b["k-chip-list-".concat(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 k-input-loading-icon" }),
+            loading && React.createElement(IconWrap, { className: "k-input-loading-icon", name: '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;

package/dist/es/MultiSelectTree/MultiSelectTree.js

@@ -20,7 +20,7 @@ var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
 };
 import * as React from 'react';
 import * as PropTypes from 'prop-types';
-import { classNames, noop, useRtl, getTabIndex, Keys, guid, kendoThemeMaps, createPropsContext, usePropsContext } from '@progress/kendo-react-common';
+import { classNames, noop, useRtl, getTabIndex, Keys, guid, kendoThemeMaps, createPropsContext, usePropsContext, IconWrap } 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';
@@ -405,11 +405,11 @@ export var MultiSelectTree = React.forwardRef(function (directProps, ref) {
             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 k-input-loading-icon" }),
+        props.loading && React.createElement(IconWrap, { className: "k-input-loading-icon", name: '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: classNames(popupSettings.popupClass, 'k-list-container'), 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 },
+        React.createElement(Popup, { popupClass: classNames(popupSettings.popupClass, 'k-list-container', 'k-multiselecttree-popup'), 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;

package/dist/es/common/ClearButton.js

@@ -16,6 +16,8 @@ var __extends = (this && this.__extends) || (function () {
 import * as React from 'react';
 import { registerForLocalization, provideLocalizationService } from '@progress/kendo-react-intl';
 import { messages, clear } from '../messages';
+import { IconWrap } from '@progress/kendo-react-common';
+import { xIcon } from '@progress/kendo-svg-icons';
 /**
  * @hidden
  */
@@ -29,7 +31,7 @@ var ClearButton = /** @class */ (function (_super) {
     ClearButton.prototype.render = function () {
         var title = provideLocalizationService(this).toLanguageString(clear, messages[clear]);
         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" })));
+            React.createElement(IconWrap, { name: 'x', icon: xIcon })));
     };
     return ClearButton;
 }(React.Component));

package/dist/es/common/ListFilter.js

@@ -14,7 +14,8 @@ var __extends = (this && this.__extends) || (function () {
     };
 })();
 import * as React from 'react';
-import { kendoThemeMaps, classNames } from '@progress/kendo-react-common';
+import { searchIcon } from '@progress/kendo-svg-icons';
+import { kendoThemeMaps, classNames, IconWrap } from '@progress/kendo-react-common';
 var sizeMap = kendoThemeMaps.sizeMap, roundedMap = kendoThemeMaps.roundedMap;
 /**
  * @hidden
@@ -36,7 +37,7 @@ var ListFilter = /** @class */ (function (_super) {
                     _a["k-rounded-".concat(roundedMap[rounded] || rounded)] = rounded,
                     _a["k-input-".concat(fillMode)] = fillMode,
                     _a)) },
-                React.createElement("span", { className: "k-input-icon k-icon k-i-search" }),
+                React.createElement(IconWrap, { className: "k-input-icon", name: 'search', icon: searchIcon }),
                 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;

package/dist/es/package-metadata.js

@@ -5,7 +5,7 @@ export var packageMetadata = {
     name: '@progress/kendo-react-dropdowns',
     productName: 'KendoReact',
     productCodes: ['KENDOUIREACT', 'KENDOUICOMPLETE'],
-    publishDate: 1673259072,
+    publishDate: 1673444656,
     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.js

@@ -322,7 +322,7 @@ var AutoCompleteWithoutContext = /** @class */ (function (_super) {
                 ? style
                 : __assign(__assign({}, style), { width: undefined }), dir: dir },
             this.renderSearchBar(value || '', id),
-            loading && React.createElement("span", { className: "k-icon k-i-loading k-input-loading-icon" }),
+            loading && React.createElement(kendo_react_common_1.IconWrap, { className: "k-input-loading-icon", name: 'loading' }),
             renderClearButton && !loading && React.createElement(ClearButton_1.default, { onClick: this.clearButtonClick, key: "clearbutton" }),
             this.renderListContainer()));
         return label
@@ -386,7 +386,7 @@ var AutoCompleteWithoutContext = /** @class */ (function (_super) {
                 animate: popupSettings.animate,
                 anchor: this.element,
                 show: opened,
-                popupClass: (0, kendo_react_common_1.classNames)(popupSettings.popupClass, 'k-list-container'),
+                popupClass: (0, kendo_react_common_1.classNames)(popupSettings.popupClass, 'k-list-container', 'k-autocomplete-popup'),
                 className: popupSettings.className,
                 appendTo: popupSettings.appendTo
             }, dir: dir !== undefined ? dir : this.base.dirCalculated, itemsCount: [data.length] },

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

@@ -34,6 +34,11 @@ export declare class ComboBoxWithoutContext extends React.Component<ComboBoxProp
         allowCustom: PropTypes.Requireable<boolean>;
         clearButton: PropTypes.Requireable<boolean>;
         iconClassName: PropTypes.Requireable<string>;
+        svgIcon: PropTypes.Requireable<PropTypes.InferProps<{
+            name: PropTypes.Validator<string>;
+            content: PropTypes.Validator<string>;
+            viewBox: PropTypes.Validator<string>;
+        }>>;
         validationMessage: PropTypes.Requireable<string>;
         required: PropTypes.Requireable<boolean>;
         id: PropTypes.Requireable<string>;

package/dist/npm/ComboBox/ComboBox.js

@@ -40,6 +40,7 @@ var kendo_react_common_2 = require("@progress/kendo-react-common");
 var package_metadata_1 = require("../package-metadata");
 var ClearButton_1 = require("../common/ClearButton");
 var kendo_react_buttons_1 = require("@progress/kendo-react-buttons");
+var kendo_svg_icons_1 = require("@progress/kendo-svg-icons");
 var VALIDATION_MESSAGE = 'Please enter a valid value!';
 var sizeMap = kendo_react_common_1.kendoThemeMaps.sizeMap, roundedMap = kendo_react_common_1.kendoThemeMaps.roundedMap;
 /** @hidden */
@@ -393,7 +394,7 @@ var ComboBoxWithoutContext = /** @class */ (function (_super) {
             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 k-input-loading-icon", key: "loading" }),
-            React.createElement(kendo_react_buttons_1.Button, { tabIndex: -1, type: "button", icon: !iconClassName ? 'caret-alt-down' : undefined, iconClass: iconClassName, size: size, fillMode: fillMode, rounded: null, themeColor: 'base', className: "k-input-button", onClick: this.toggleBtnClick, onMouseDown: function (e) { return e.preventDefault(); } }),
+            React.createElement(kendo_react_buttons_1.Button, { tabIndex: -1, type: "button", icon: !iconClassName ? 'caret-alt-down' : undefined, svgIcon: !iconClassName ? kendo_svg_icons_1.caretAltDownIcon : this.props.svgIcon, iconClass: iconClassName, size: size, fillMode: fillMode, rounded: null, themeColor: 'base', className: "k-input-button", onClick: this.toggleBtnClick, onMouseDown: function (e) { return e.preventDefault(); } }),
             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 }))
@@ -524,7 +525,7 @@ var ComboBoxWithoutContext = /** @class */ (function (_super) {
                 animate: popupSettings.animate,
                 anchor: this.element,
                 show: opened,
-                popupClass: (0, kendo_react_common_1.classNames)(popupSettings.popupClass, 'k-list-container'),
+                popupClass: (0, kendo_react_common_1.classNames)(popupSettings.popupClass, 'k-list-container', 'k-combobox-popup'),
                 className: popupSettings.className,
                 appendTo: popupSettings.appendTo
             }, dir: dir !== undefined ? dir : this.base.dirCalculated, itemsCount: [data.length] },
@@ -607,7 +608,7 @@ var ComboBoxWithoutContext = /** @class */ (function (_super) {
     /**
      * @hidden
      */
-    ComboBoxWithoutContext.propTypes = __assign(__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 });
+    ComboBoxWithoutContext.propTypes = __assign(__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, svgIcon: kendo_react_common_1.svgIconPropType, validationMessage: PropTypes.string, required: PropTypes.bool, id: PropTypes.string, ariaLabelledBy: PropTypes.string, ariaDescribedBy: PropTypes.string, list: PropTypes.any, valueRender: PropTypes.func });
     /**
      * @hidden
      */

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

@@ -1,7 +1,7 @@
 /// <reference types="react" />
 import { ComboBox } from './ComboBox';
 import { FilterChangeEvent, ChangeEvent, OpenEvent, CloseEvent, FocusEvent, BlurEvent, PageChangeEvent } from './../common/events';
-import { FormComponentProps } from '@progress/kendo-react-common';
+import { FormComponentProps, SVGIcon } from '@progress/kendo-react-common';
 import { VirtualizationSettings, DropDownsPopupSettings } from '../common/settings';
 import { ListItemProps } from '../common/ListItem';
 /**
@@ -71,6 +71,10 @@ export interface ComboBoxProps extends FormComponentProps {
      * Sets CSS classes to the expand `icon` DOM element.
      */
     iconClassName?: string;
+    /**
+     * Sets the specified SVG icon.
+     */
+    svgIcon?: SVGIcon;
     /**
      * If `clearButton` is set to `true`, the ComboBox renders a button on hovering over the component. Clicking this button resets the value of the ComboBox to `undefined` and triggers the `change` event.
      */

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

@@ -25,13 +25,12 @@ export declare class DropDownListWithoutContext extends React.Component<DropDown
         virtual: PropTypes.Requireable<PropTypes.InferProps<{
             pageSize: PropTypes.Validator<number>;
             skip: PropTypes.Validator<number>;
-            /**
-             * @hidden
-             */
             total: PropTypes.Validator<number>;
         }>>;
         onFilterChange: PropTypes.Requireable<(...args: any[]) => any>;
-        onPageChange: PropTypes.Requireable<(...args: any[]) => any>;
+        onPageChange: PropTypes.Requireable<(...args: any[]) => any>; /**
+         * @hidden
+         */
         opened: PropTypes.Requireable<boolean>;
         disabled: PropTypes.Requireable<boolean>;
         dir: PropTypes.Requireable<string>;
@@ -66,6 +65,11 @@ export declare class DropDownListWithoutContext extends React.Component<DropDown
         delay: PropTypes.Requireable<number>;
         ignoreCase: PropTypes.Requireable<boolean>;
         iconClassName: PropTypes.Requireable<string>;
+        svgIcon: PropTypes.Requireable<PropTypes.InferProps<{
+            name: PropTypes.Validator<string>;
+            content: PropTypes.Validator<string>;
+            viewBox: PropTypes.Validator<string>;
+        }>>;
         defaultItem: PropTypes.Requireable<any>;
         valueRender: PropTypes.Requireable<(...args: any[]) => any>;
         valueMap: PropTypes.Requireable<(...args: any[]) => any>;

package/dist/npm/DropDownList/DropDownList.js

@@ -31,6 +31,7 @@ var React = require("react");
 var PropTypes = require("prop-types");
 var kendo_react_common_1 = require("@progress/kendo-react-common");
 var kendo_react_labels_1 = require("@progress/kendo-react-labels");
+var kendo_svg_icons_1 = require("@progress/kendo-svg-icons");
 var ListContainer_1 = require("../common/ListContainer");
 var ListFilter_1 = require("../common/ListFilter");
 var ListDefaultItem_1 = require("../common/ListDefaultItem");
@@ -102,7 +103,7 @@ var DropDownListWithoutContext = /** @class */ (function (_super) {
                 dir: dir !== undefined ? dir : base.dirCalculated,
                 width: popupWidth,
                 popupSettings: {
-                    popupClass: (0, kendo_react_common_1.classNames)(popupSettings.popupClass, 'k-list-container'),
+                    popupClass: (0, kendo_react_common_1.classNames)(popupSettings.popupClass, 'k-list-container', 'k-dropdownlist-popup'),
                     className: popupSettings.className,
                     animate: popupSettings.animate,
                     anchor: _this.element,
@@ -523,8 +524,8 @@ var DropDownListWithoutContext = /** @class */ (function (_super) {
                 ? style
                 : __assign(__assign({}, style), { width: undefined }), dir: dir, onMouseDown: opened ? utils_1.preventDefaultNonInputs : undefined, onFocus: this.handleFocus, onBlur: this.handleBlur, tabIndex: (0, kendo_react_common_1.getTabIndex)(tabIndex, disabled), accessKey: this.props.accessKey, onKeyDown: this.handleKeyDown, onKeyPress: this.handleKeyPress, onClick: disabled ? undefined : this.handleWrapperClick, role: 'combobox', "aria-required": this.required, "aria-disabled": disabled || undefined, "aria-haspopup": 'listbox', "aria-expanded": opened || false, "aria-owns": this.base.listBoxId, "aria-activedescendant": opened ? ('option-' + this.base.guid + '-' + (selectedIndex + (virtual ? virtual.skip : 0))) : undefined, "aria-label": this.props.ariaLabel || this.props.label, "aria-labelledby": this.props.ariaLabelledBy, "aria-describedby": this.props.ariaDescribedBy, id: this.props.id, title: this.props.title },
             valueElement,
-            loading && React.createElement("span", { className: "k-icon k-i-loading k-input-loading-icon", key: "loading" }),
-            React.createElement(kendo_react_buttons_1.Button, { tabIndex: -1, type: "button", "aria-hidden": true, size: size, fillMode: fillMode, iconClass: iconClassName, className: "k-input-button", themeColor: 'base', icon: !iconClassName ? 'caret-alt-down' : undefined, onMouseDown: function (e) { return _this.state.focused && e.preventDefault(); } }),
+            loading && React.createElement(kendo_react_common_1.IconWrap, { className: "k-input-loading-icon", name: 'loading' }),
+            React.createElement(kendo_react_buttons_1.Button, { tabIndex: -1, type: "button", "aria-hidden": true, size: size, fillMode: fillMode, iconClass: iconClassName, className: "k-input-button", themeColor: 'base', icon: !iconClassName ? 'caret-alt-down' : undefined, svgIcon: !iconClassName ? kendo_svg_icons_1.caretAltDownIcon : this.props.svgIcon, onMouseDown: function (e) { return _this.state.focused && e.preventDefault(); } }),
             this.dummySelect(value),
             this.renderListContainer()));
         return label ? (React.createElement(kendo_react_labels_1.FloatingLabel, { label: label, editorValue: text, editorValid: isValid, editorDisabled: this.props.disabled, style: { width: style ? style.width : undefined }, children: dropdownlist })) : dropdownlist;
@@ -586,7 +587,7 @@ var DropDownListWithoutContext = /** @class */ (function (_super) {
     /**
      * @hidden
      */
-    DropDownListWithoutContext.propTypes = __assign({ delay: PropTypes.number, ignoreCase: PropTypes.bool, iconClassName: PropTypes.string, defaultItem: PropTypes.any, valueRender: PropTypes.func, valueMap: PropTypes.func, validationMessage: PropTypes.string, required: PropTypes.bool, id: PropTypes.string, ariaLabelledBy: PropTypes.string, ariaDescribedBy: PropTypes.string, ariaLabel: PropTypes.string, leftRightKeysNavigation: PropTypes.bool, title: PropTypes.string }, DropDownBase_1.default.propTypes);
+    DropDownListWithoutContext.propTypes = __assign({ delay: PropTypes.number, ignoreCase: PropTypes.bool, iconClassName: PropTypes.string, svgIcon: kendo_react_common_1.svgIconPropType, defaultItem: PropTypes.any, valueRender: PropTypes.func, valueMap: PropTypes.func, validationMessage: PropTypes.string, required: PropTypes.bool, id: PropTypes.string, ariaLabelledBy: PropTypes.string, ariaDescribedBy: PropTypes.string, ariaLabel: PropTypes.string, leftRightKeysNavigation: PropTypes.bool, title: PropTypes.string }, DropDownBase_1.default.propTypes);
     /**
      * @hidden
      */

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

@@ -3,7 +3,7 @@ import { DropDownList } from './DropDownList';
 import { FilterChangeEvent, ChangeEvent, OpenEvent, CloseEvent, FocusEvent, BlurEvent, PageChangeEvent } from './../common/events';
 import { VirtualizationSettings, DropDownsPopupSettings } from '../common/settings';
 import { ListItemProps } from '../common/ListItem';
-import { FormComponentProps } from '@progress/kendo-react-common';
+import { FormComponentProps, SVGIcon } from '@progress/kendo-react-common';
 /**
  * Represents the object of the `filterChange` DropDownList event.
  */
@@ -83,6 +83,10 @@ export interface DropDownListProps extends FormComponentProps {
      * Sets CSS classes to the expand `icon` DOM element.
      */
     iconClassName?: string;
+    /**
+     * Sets the specified SVG icon.
+     */
+    svgIcon?: SVGIcon;
     /**
      * Sets the title attribute to the DropDownList DOM element.
      */

package/dist/npm/DropDownTree/DropDownTree.js

@@ -36,6 +36,7 @@ var messages_1 = require("./../messages");
 var kendo_react_labels_1 = require("@progress/kendo-react-labels");
 var ListFilter_1 = require("../common/ListFilter");
 var kendo_react_buttons_1 = require("@progress/kendo-react-buttons");
+var kendo_svg_icons_1 = require("@progress/kendo-svg-icons");
 var sizeMap = kendo_react_common_1.kendoThemeMaps.sizeMap, roundedMap = kendo_react_common_1.kendoThemeMaps.roundedMap;
 var VALIDATION_MESSAGE = 'Please select a value from the list!';
 var ValueHolder = function (props) {
@@ -357,13 +358,13 @@ exports.DropDownTree = React.forwardRef(function (directProps, ref) {
             _a)), tabIndex: tabIndex, accessKey: props.accessKey, id: id, style: label ? __assign(__assign({}, style), { width: undefined }) : style, dir: dir, ref: elementRef, onKeyDown: disabled ? undefined : onWrapperKeyDown, onMouseDown: onWrapperMouseDown, onClick: disabled ? undefined : onWrapperClick, onFocus: onFocus, onBlur: onBlur, role: "combobox", "aria-haspopup": "tree", "aria-expanded": isOpen, "aria-disabled": disabled, "aria-label": label, "aria-labelledby": props.ariaLabelledBy, "aria-describedby": props.ariaDescribedBy },
         React.createElement("span", { className: "k-input-inner" },
             React.createElement(ValueComponent, { item: value }, currentValueText || placeholder)),
-        props.loading && React.createElement("span", { className: "k-icon k-i-loading k-input-loading-icon" }),
+        props.loading && React.createElement(kendo_react_common_1.IconWrap, { className: "k-input-loading-icon", name: 'loading' }),
         hasValue && !disabled && (React.createElement("span", { onClick: onClear, className: "k-clear-value", title: localization.toLanguageString(messages_1.clear, messages_1.messages[messages_1.clear]), role: "button", tabIndex: -1, onMouseDown: function (e) { return e.preventDefault(); } },
-            React.createElement("span", { className: "k-icon k-i-x" }))),
-        React.createElement(kendo_react_buttons_1.Button, { tabIndex: -1, type: "button", "aria-label": "select", className: "k-input-button", size: size, fillMode: fillMode, themeColor: "base", rounded: null, icon: "caret-alt-down" }),
+            React.createElement(kendo_react_common_1.IconWrap, { name: 'x', icon: kendo_svg_icons_1.xIcon }))),
+        React.createElement(kendo_react_buttons_1.Button, { tabIndex: -1, type: "button", "aria-label": "select", className: "k-input-button", size: size, fillMode: fillMode, themeColor: "base", rounded: null, icon: "caret-alt-down", svgIcon: kendo_svg_icons_1.caretAltDownIcon }),
         React.createElement("select", { name: name, ref: selectRef, tabIndex: -1, "aria-hidden": true, title: label, style: { opacity: 0, width: 1, border: 0, zIndex: -1, position: 'absolute', left: '50%' } },
             React.createElement("option", { value: props.valueMap ? props.valueMap.call(undefined, value) : value })),
-        React.createElement(kendo_react_popup_1.Popup, { className: (0, kendo_react_common_1.classNames)(popupSettings.className, { 'k-rtl': dir === 'rtl' }), popupClass: (0, kendo_react_common_1.classNames)(popupSettings.popupClass, 'k-list-container'), style: popupStyles, animate: popupSettings.animate, anchor: elementRef.current, show: isOpen, onOpen: onPopupOpened, onClose: onPopupClosed, appendTo: popupSettings.appendTo },
+        React.createElement(kendo_react_popup_1.Popup, { className: (0, kendo_react_common_1.classNames)(popupSettings.className, { 'k-rtl': dir === 'rtl' }), popupClass: (0, kendo_react_common_1.classNames)(popupSettings.popupClass, 'k-list-container', 'k-dropdowntree-popup'), style: popupStyles, animate: popupSettings.animate, anchor: elementRef.current, show: isOpen, onOpen: onPopupOpened, onClose: onPopupClosed, appendTo: popupSettings.appendTo },
             props.filterable && (React.createElement(ListFilter_1.default, { value: props.filter === undefined ? filter : props.filter, inputRef: inputRef, onChange: onFilterChange, onKeyDown: onInputKeyDown, size: size, rounded: rounded, fillMode: fillMode })),
             data.length > 0 ? (React.createElement(kendo_react_treeview_1.TreeView, { ref: treeViewRef, tabIndex: tabIndex, data: treeViewData, focusIdField: dataItemKey, textField: props.textField, selectField: selectField, expandField: props.expandField, childrenField: subItemsField, expandIcons: true, onItemClick: onChange, onExpandChange: onExpand, size: size, item: props.item })) : (React.createElement(NoData, null, localization.toLanguageString(messages_1.nodata, messages_1.messages[messages_1.nodata]))))));
     return label ? (React.createElement(kendo_react_labels_1.FloatingLabel, { label: label, editorValue: currentValueText, editorPlaceholder: placeholder, editorValid: isValid, editorDisabled: disabled, editorId: id, style: { width: style ? style.width : undefined }, children: dropdowntree, dir: dir })) : dropdowntree;