@progress/kendo-react-dropdowns 5.10.0-dev.202301092204 → 5.10.0-dev.202301111905

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
@@ -370,7 +370,7 @@ var AutoCompleteWithoutContext = /** @class */ (function (_super) {
         var _a = this.props, placeholder = _a.placeholder, tabIndex = _a.tabIndex, disabled = _a.disabled, readonly = _a.readonly;
         var focused = this.state.focused;
         var opened = this.props.opened !== undefined ? this.props.opened : this.state.opened;
-        return (React.createElement(SearchBar, { id: id, placeholder: placeholder, tabIndex: tabIndex || undefined, accessKey: this.props.accessKey, value: value, suggestedText: this._suggested, focused: focused, name: this.props.name, ref: function (searchbar) { return _this._input = searchbar && searchbar.input; }, onKeyDown: this.onInputKeyDown, onChange: this.onChangeHandler, onFocus: base.handleFocus, onBlur: this.handleBlur, disabled: disabled, readOnly: readonly, expanded: opened, owns: base.listBoxId, activedescendant: 'option-' + base.guid + '-' + this.focusedIndex(), role: "combobox", ariaLabelledBy: this.props.ariaLabelledBy, ariaDescribedBy: this.props.ariaDescribedBy, render: this.props.valueRender }));
+        return (React.createElement(SearchBar, { id: id, placeholder: placeholder, tabIndex: tabIndex, accessKey: this.props.accessKey, value: value, suggestedText: this._suggested, focused: focused, name: this.props.name, ref: function (searchbar) { return _this._input = searchbar && searchbar.input; }, onKeyDown: this.onInputKeyDown, onChange: this.onChangeHandler, onFocus: base.handleFocus, onBlur: this.handleBlur, disabled: disabled, readOnly: readonly, expanded: opened, owns: base.listBoxId, activedescendant: 'option-' + base.guid + '-' + this.focusedIndex(), role: "combobox", ariaLabelledBy: this.props.ariaLabelledBy, ariaDescribedBy: this.props.ariaDescribedBy, render: this.props.valueRender }));
     };
     AutoCompleteWithoutContext.prototype.renderListContainer = function () {
         var _a;

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>;
@@ -76,7 +81,9 @@ export declare class ComboBoxWithoutContext extends React.Component<ComboBoxProp
         onOpen: PropTypes.Requireable<(...args: any[]) => any>;
         onClose: PropTypes.Requireable<(...args: any[]) => any>;
         onFocus: PropTypes.Requireable<(...args: any[]) => any>;
-        onBlur: PropTypes.Requireable<(...args: any[]) => any>;
+        onBlur: PropTypes.Requireable<(...args: any[]) => any>; /**
+         * @hidden
+         */
         onChange: PropTypes.Requireable<(...args: any[]) => any>;
         itemRender: PropTypes.Requireable<(...args: any[]) => any>;
         listNoDataRender: PropTypes.Requireable<(...args: any[]) => any>;

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,9 @@ 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';
+import { messages, comboArrowBtnAriaLabelExpand, comboArrowBtnAriaLabelCollapse } from './../messages';
+import { provideLocalizationService } from '@progress/kendo-react-intl';
 var VALIDATION_MESSAGE = 'Please enter a valid value!';
 var sizeMap = kendoThemeMaps.sizeMap, roundedMap = kendoThemeMaps.roundedMap;
 /** @hidden */
@@ -363,7 +366,9 @@ var ComboBoxWithoutContext = /** @class */ (function (_super) {
      */
     ComboBoxWithoutContext.prototype.render = function () {
         var _a;
-        var _b = this.props, dir = _b.dir, disabled = _b.disabled, _c = _b.clearButton, clearButton = _c === void 0 ? ComboBoxWithoutContext.defaultProps.clearButton : _c, label = _b.label, textField = _b.textField, className = _b.className, style = _b.style, loading = _b.loading, iconClassName = _b.iconClassName, virtual = _b.virtual, size = _b.size, rounded = _b.rounded, fillMode = _b.fillMode;
+        var btnAriaLabelExpand = provideLocalizationService(this).toLanguageString(comboArrowBtnAriaLabelExpand, messages[comboArrowBtnAriaLabelExpand]);
+        var btnAriaLabelCollapse = provideLocalizationService(this).toLanguageString(comboArrowBtnAriaLabelCollapse, messages[comboArrowBtnAriaLabelCollapse]);
+        var _b = this.props, dir = _b.dir, disabled = _b.disabled, _c = _b.clearButton, clearButton = _c === void 0 ? ComboBoxWithoutContext.defaultProps.clearButton : _c, label = _b.label, textField = _b.textField, className = _b.className, style = _b.style, loading = _b.loading, iconClassName = _b.iconClassName, virtual = _b.virtual, size = _b.size, rounded = _b.rounded, fillMode = _b.fillMode, _d = _b.opened, opened = _d === void 0 ? this.state.opened : _d;
         var isValid = !this.validityStyles || this.validity.valid;
         var text = this.props.filter !== undefined ? this.props.filter : this.state.text;
         var selectedItemText = getItemValue(this.value, textField);
@@ -390,7 +395,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", "aria-label": opened ? btnAriaLabelCollapse : btnAriaLabelExpand, 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 }))
@@ -565,7 +570,7 @@ var ComboBoxWithoutContext = /** @class */ (function (_super) {
         if (this._suggested && !areSame(this._valueOnDidUpdate, value, dataItemKey)) {
             this._suggested = '';
         }
-        return (React.createElement(SearchBar, { id: id, placeholder: placeholder, tabIndex: tabIndex || undefined, accessKey: this.props.accessKey, value: text + this._suggested, suggestedText: this._suggested, ref: function (el) { return _this._input = el && el.input; }, onKeyDown: this.onInputKeyDown, onChange: this.inputOnChange, onFocus: this.base.handleFocus, onBlur: this.handleBlur, disabled: disabled, expanded: opened, owns: this.base.listBoxId, activedescendant: "option-".concat(this.base.guid, "-").concat(selectedIndex + virtual.skip), role: "combobox", ariaLabelledBy: this.props.ariaLabelledBy, ariaDescribedBy: this.props.ariaDescribedBy, render: this.props.valueRender }));
+        return (React.createElement(SearchBar, { id: id, placeholder: placeholder, tabIndex: tabIndex, accessKey: this.props.accessKey, value: text + this._suggested, suggestedText: this._suggested, ref: function (el) { return _this._input = el && el.input; }, onKeyDown: this.onInputKeyDown, onChange: this.inputOnChange, onFocus: this.base.handleFocus, onBlur: this.handleBlur, disabled: disabled, expanded: opened, owns: this.base.listBoxId, activedescendant: "option-".concat(this.base.guid, "-").concat(selectedIndex + virtual.skip), role: "combobox", ariaLabelledBy: this.props.ariaLabelledBy, ariaDescribedBy: this.props.ariaDescribedBy, render: this.props.valueRender }));
     };
     ComboBoxWithoutContext.prototype.triggerOnChange = function (item, state) {
         var value = this.value;
@@ -604,7 +609,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,9 +25,6 @@ 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>;
@@ -66,6 +63,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>;
@@ -86,6 +88,9 @@ export declare class DropDownListWithoutContext extends React.Component<DropDown
         size: "small" | "medium" | "large" | null | undefined;
         rounded: "small" | "medium" | "full" | "large" | null | undefined;
         fillMode: "flat" | "outline" | "solid" | null | undefined;
+        /**
+         * @hidden
+         */
         popupSettings: {
             height: string;
         };
@@ -107,6 +112,7 @@ export declare class DropDownListWithoutContext extends React.Component<DropDown
     private _filterInput;
     private _valueDuringOnChange;
     private _navigated;
+    private _inputId;
     constructor(props: DropDownListProps);
     /**
      * @hidden

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, guid } 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';
@@ -37,6 +38,8 @@ import { isPresent, getItemValue, sameCharsOnly, shuffleData, matchText, areSame
 import { validatePackage } from '@progress/kendo-react-common';
 import { packageMetadata } from '../package-metadata';
 import { Button } from '@progress/kendo-react-buttons';
+import { provideLocalizationService } from '@progress/kendo-react-intl';
+import { dropDownListArrowBtnAriaLabel, messages } from '../messages';
 var VALIDATION_MESSAGE = 'Please select a value from the list!';
 var sizeMap = kendoThemeMaps.sizeMap, roundedMap = kendoThemeMaps.roundedMap;
 /**
@@ -57,6 +60,7 @@ var DropDownListWithoutContext = /** @class */ (function (_super) {
         _this._skipFocusEvent = false;
         _this._filterInput = null;
         _this._navigated = false;
+        _this._inputId = guid();
         /**
          * @hidden
          */
@@ -487,6 +491,7 @@ var DropDownListWithoutContext = /** @class */ (function (_super) {
     DropDownListWithoutContext.prototype.render = function () {
         var _a;
         var _this = this;
+        var btnAriaLabel = provideLocalizationService(this).toLanguageString(dropDownListArrowBtnAriaLabel, messages[dropDownListArrowBtnAriaLabel]);
         var _b = this.props, style = _b.style, className = _b.className, label = _b.label, dir = _b.dir, virtual = _b.virtual, size = _b.size, rounded = _b.rounded, fillMode = _b.fillMode;
         var opened = this.props.opened !== undefined ? this.props.opened : this.state.opened;
         var value = this.value;
@@ -503,7 +508,7 @@ var DropDownListWithoutContext = /** @class */ (function (_super) {
         var _c = this.props, dataItemKey = _c.dataItemKey, _d = _c.data, data = _d === void 0 ? [] : _d, disabled = _c.disabled, tabIndex = _c.tabIndex, loading = _c.loading, iconClassName = _c.iconClassName, valueRender = _c.valueRender;
         var focused = this.state.focused;
         var selectedIndex = data.findIndex(function (i) { return areSame(i, value, dataItemKey); });
-        var valueDefaultRendering = (React.createElement("span", { className: "k-input-inner" },
+        var valueDefaultRendering = (React.createElement("span", { id: this._inputId, className: "k-input-inner" },
             React.createElement("span", { className: "k-input-value-text" }, text)));
         var valueElement = valueRender !== undefined ?
             valueRender.call(undefined, valueDefaultRendering, value) : valueDefaultRendering;
@@ -518,10 +523,10 @@ var DropDownListWithoutContext = /** @class */ (function (_super) {
                 _a['k-required'] = this.required,
                 _a)), style: !label
                 ? 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 },
+                : __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 || this._inputId, 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-label": btnAriaLabel, "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 +588,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,10 +355,10 @@ 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', 'k-dropdowntree-popup'), style: popupStyles, animate: popupSettings.animate, anchor: elementRef.current, show: isOpen, onOpen: onPopupOpened, onClose: onPopupClosed, appendTo: popupSettings.appendTo },

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';
@@ -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,
@@ -589,7 +590,7 @@ var MultiSelectWithoutContext = /** @class */ (function (_super) {
                         _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';
@@ -399,13 +399,13 @@ export var MultiSelectTree = React.forwardRef(function (directProps, ref) {
             _a['k-loading'] = props.loading,
             _a['k-required'] = required,
             _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, onFocus: onFocus, onBlur: onBlur, role: "combobox", "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 = {},
+        React.createElement("div", { id: 'tagslist-' + id, 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-' + 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 k-input-loading-icon" }),
+                _b)) }, tagsToRenderRef.current.length > 0 && (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", role: 'combobox', tabIndex: tabIndex, "aria-expanded": isOpen, "aria-describedby": 'tagslist-' + id, "aria-label": props.ariaLabelledBy },
+                React.createElement("span", { className: "k-input-value-text" }, "\u00A0")),
+        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 })),

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/messages/index.d.ts

@@ -6,10 +6,25 @@ export declare const nodata = "dropdowns.nodata";
  * @hidden
  */
 export declare const clear = "dropdowns.clear";
+/**
+ * @hidden
+ */
+export declare const comboArrowBtnAriaLabelExpand = "dropdowns.comboArrowBtnAriaLabelExpand";
+/**
+ * @hidden
+ */
+export declare const comboArrowBtnAriaLabelCollapse = "dropdowns.comboArrowBtnAriaLabelCollapse";
+/**
+ * @hidden
+ */
+export declare const dropDownListArrowBtnAriaLabel = "dropdowns.dropDownListArrowBtnAriaLabel";
 /**
  * @hidden
  */
 export declare const messages: {
     "dropdowns.clear": string;
     "dropdowns.nodata": string;
+    "dropdowns.comboArrowBtnAriaLabelExpand": string;
+    "dropdowns.comboArrowBtnAriaLabelCollapse": string;
+    "dropdowns.dropDownListArrowBtnAriaLabel": string;
 };

package/dist/es/messages/index.js

@@ -7,10 +7,25 @@ export var nodata = 'dropdowns.nodata';
  * @hidden
  */
 export var clear = 'dropdowns.clear';
+/**
+ * @hidden
+ */
+export var comboArrowBtnAriaLabelExpand = 'dropdowns.comboArrowBtnAriaLabelExpand';
+/**
+ * @hidden
+ */
+export var comboArrowBtnAriaLabelCollapse = 'dropdowns.comboArrowBtnAriaLabelCollapse';
+/**
+ * @hidden
+ */
+export var dropDownListArrowBtnAriaLabel = 'dropdowns.dropDownListArrowBtnAriaLabel';
 /**
  * @hidden
  */
 export var messages = (_a = {},
     _a[clear] = 'clear',
     _a[nodata] = 'NO DATA FOUND.',
+    _a[comboArrowBtnAriaLabelExpand] = 'expand combobox',
+    _a[comboArrowBtnAriaLabelCollapse] = 'collapse combobox',
+    _a[dropDownListArrowBtnAriaLabel] = 'select',
     _a);

package/dist/es/package-metadata.js

@@ -5,7 +5,7 @@ export var packageMetadata = {
     name: '@progress/kendo-react-dropdowns',
     productName: 'KendoReact',
     productCodes: ['KENDOUIREACT', 'KENDOUICOMPLETE'],
-    publishDate: 1673300612,
+    publishDate: 1673462299,
     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
@@ -373,7 +373,7 @@ var AutoCompleteWithoutContext = /** @class */ (function (_super) {
         var _a = this.props, placeholder = _a.placeholder, tabIndex = _a.tabIndex, disabled = _a.disabled, readonly = _a.readonly;
         var focused = this.state.focused;
         var opened = this.props.opened !== undefined ? this.props.opened : this.state.opened;
-        return (React.createElement(SearchBar_1.default, { id: id, placeholder: placeholder, tabIndex: tabIndex || undefined, accessKey: this.props.accessKey, value: value, suggestedText: this._suggested, focused: focused, name: this.props.name, ref: function (searchbar) { return _this._input = searchbar && searchbar.input; }, onKeyDown: this.onInputKeyDown, onChange: this.onChangeHandler, onFocus: base.handleFocus, onBlur: this.handleBlur, disabled: disabled, readOnly: readonly, expanded: opened, owns: base.listBoxId, activedescendant: 'option-' + base.guid + '-' + this.focusedIndex(), role: "combobox", ariaLabelledBy: this.props.ariaLabelledBy, ariaDescribedBy: this.props.ariaDescribedBy, render: this.props.valueRender }));
+        return (React.createElement(SearchBar_1.default, { id: id, placeholder: placeholder, tabIndex: tabIndex, accessKey: this.props.accessKey, value: value, suggestedText: this._suggested, focused: focused, name: this.props.name, ref: function (searchbar) { return _this._input = searchbar && searchbar.input; }, onKeyDown: this.onInputKeyDown, onChange: this.onChangeHandler, onFocus: base.handleFocus, onBlur: this.handleBlur, disabled: disabled, readOnly: readonly, expanded: opened, owns: base.listBoxId, activedescendant: 'option-' + base.guid + '-' + this.focusedIndex(), role: "combobox", ariaLabelledBy: this.props.ariaLabelledBy, ariaDescribedBy: this.props.ariaDescribedBy, render: this.props.valueRender }));
     };
     AutoCompleteWithoutContext.prototype.renderListContainer = function () {
         var _a;

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>;
@@ -76,7 +81,9 @@ export declare class ComboBoxWithoutContext extends React.Component<ComboBoxProp
         onOpen: PropTypes.Requireable<(...args: any[]) => any>;
         onClose: PropTypes.Requireable<(...args: any[]) => any>;
         onFocus: PropTypes.Requireable<(...args: any[]) => any>;
-        onBlur: PropTypes.Requireable<(...args: any[]) => any>;
+        onBlur: PropTypes.Requireable<(...args: any[]) => any>; /**
+         * @hidden
+         */
         onChange: PropTypes.Requireable<(...args: any[]) => any>;
         itemRender: PropTypes.Requireable<(...args: any[]) => any>;
         listNoDataRender: PropTypes.Requireable<(...args: any[]) => any>;

package/dist/npm/ComboBox/ComboBox.js

@@ -40,6 +40,9 @@ 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 messages_1 = require("./../messages");
+var kendo_react_intl_1 = require("@progress/kendo-react-intl");
 var VALIDATION_MESSAGE = 'Please enter a valid value!';
 var sizeMap = kendo_react_common_1.kendoThemeMaps.sizeMap, roundedMap = kendo_react_common_1.kendoThemeMaps.roundedMap;
 /** @hidden */
@@ -366,7 +369,9 @@ var ComboBoxWithoutContext = /** @class */ (function (_super) {
      */
     ComboBoxWithoutContext.prototype.render = function () {
         var _a;
-        var _b = this.props, dir = _b.dir, disabled = _b.disabled, _c = _b.clearButton, clearButton = _c === void 0 ? ComboBoxWithoutContext.defaultProps.clearButton : _c, label = _b.label, textField = _b.textField, className = _b.className, style = _b.style, loading = _b.loading, iconClassName = _b.iconClassName, virtual = _b.virtual, size = _b.size, rounded = _b.rounded, fillMode = _b.fillMode;
+        var btnAriaLabelExpand = (0, kendo_react_intl_1.provideLocalizationService)(this).toLanguageString(messages_1.comboArrowBtnAriaLabelExpand, messages_1.messages[messages_1.comboArrowBtnAriaLabelExpand]);
+        var btnAriaLabelCollapse = (0, kendo_react_intl_1.provideLocalizationService)(this).toLanguageString(messages_1.comboArrowBtnAriaLabelCollapse, messages_1.messages[messages_1.comboArrowBtnAriaLabelCollapse]);
+        var _b = this.props, dir = _b.dir, disabled = _b.disabled, _c = _b.clearButton, clearButton = _c === void 0 ? ComboBoxWithoutContext.defaultProps.clearButton : _c, label = _b.label, textField = _b.textField, className = _b.className, style = _b.style, loading = _b.loading, iconClassName = _b.iconClassName, virtual = _b.virtual, size = _b.size, rounded = _b.rounded, fillMode = _b.fillMode, _d = _b.opened, opened = _d === void 0 ? this.state.opened : _d;
         var isValid = !this.validityStyles || this.validity.valid;
         var text = this.props.filter !== undefined ? this.props.filter : this.state.text;
         var selectedItemText = (0, utils_1.getItemValue)(this.value, textField);
@@ -393,7 +398,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", "aria-label": opened ? btnAriaLabelCollapse : btnAriaLabelExpand, 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 }))
@@ -568,7 +573,7 @@ var ComboBoxWithoutContext = /** @class */ (function (_super) {
         if (this._suggested && !(0, utils_1.areSame)(this._valueOnDidUpdate, value, dataItemKey)) {
             this._suggested = '';
         }
-        return (React.createElement(SearchBar_1.default, { id: id, placeholder: placeholder, tabIndex: tabIndex || undefined, accessKey: this.props.accessKey, value: text + this._suggested, suggestedText: this._suggested, ref: function (el) { return _this._input = el && el.input; }, onKeyDown: this.onInputKeyDown, onChange: this.inputOnChange, onFocus: this.base.handleFocus, onBlur: this.handleBlur, disabled: disabled, expanded: opened, owns: this.base.listBoxId, activedescendant: "option-".concat(this.base.guid, "-").concat(selectedIndex + virtual.skip), role: "combobox", ariaLabelledBy: this.props.ariaLabelledBy, ariaDescribedBy: this.props.ariaDescribedBy, render: this.props.valueRender }));
+        return (React.createElement(SearchBar_1.default, { id: id, placeholder: placeholder, tabIndex: tabIndex, accessKey: this.props.accessKey, value: text + this._suggested, suggestedText: this._suggested, ref: function (el) { return _this._input = el && el.input; }, onKeyDown: this.onInputKeyDown, onChange: this.inputOnChange, onFocus: this.base.handleFocus, onBlur: this.handleBlur, disabled: disabled, expanded: opened, owns: this.base.listBoxId, activedescendant: "option-".concat(this.base.guid, "-").concat(selectedIndex + virtual.skip), role: "combobox", ariaLabelledBy: this.props.ariaLabelledBy, ariaDescribedBy: this.props.ariaDescribedBy, render: this.props.valueRender }));
     };
     ComboBoxWithoutContext.prototype.triggerOnChange = function (item, state) {
         var value = this.value;
@@ -607,7 +612,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.
      */