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

package/dist/es/rating/Rating.js

@@ -11,7 +11,8 @@ var __assign = (this && this.__assign) || function () {
 };
 import * as React from 'react';
 import * as PropTypes from 'prop-types';
-import { classNames, useDir, Keys, getTabIndex, createPropsContext, usePropsContext } from '@progress/kendo-react-common';
+import { classNames, useDir, Keys, getTabIndex, createPropsContext, usePropsContext, IconWrap, toIconName, svgIconPropType } from '@progress/kendo-react-common';
+import { starIcon, starOutlineIcon } from '@progress/kendo-svg-icons';
 import { RatingItem } from './RatingItem';
 import { ratingReducer, RATING_ACTION } from './rating-reducer';
 import { isSelected, isHalf, calcIsFirstHalf, isCorrectValue, toRound, getRemainder } from './utils';
@@ -45,7 +46,7 @@ export var RatingPropsContext = createPropsContext();
  * Obtaining the `ref` returns an object of type [RatingHandle]({% slug api_inputs_ratinghandle %}).
  */
 export var Rating = React.forwardRef(function (directProps, ref) {
-    var _a, _b, _c, _d;
+    var _a;
     var props = usePropsContext(RatingPropsContext, directProps);
     var localization = useLocalization();
     var target = React.useRef(null);
@@ -72,19 +73,19 @@ export var Rating = React.forwardRef(function (directProps, ref) {
     var readonly = React.useMemo(function () { return props.readonly || defaultProps.readonly; }, [props.readonly]);
     var disabled = React.useMemo(function () { return props.disabled || defaultProps.disabled; }, [props.disabled]);
     var Item = React.useMemo(function () { return props.item || defaultProps.item; }, [props.item]);
-    var _e = useRating(props.defaultValue || defaultProps.defaultValue, {
+    var _b = useRating(props.defaultValue || defaultProps.defaultValue, {
         state: props.value,
         min: min,
         max: max,
         step: precision === 'half' ? step / 2 : step
-    }, handleChange), stateValue = _e[0], dispatchStateValue = _e[1];
-    var _f = useRating(null, {
+    }, handleChange), stateValue = _b[0], dispatchStateValue = _b[1];
+    var _c = useRating(null, {
         state: props.value,
         min: min,
         max: max,
         step: precision === 'half' ? step / 2 : step,
         precision: precision
-    }), stateHover = _f[0], dispatchStateHover = _f[1];
+    }), stateHover = _c[0], dispatchStateHover = _c[1];
     var value = React.useMemo(function () { return props.value || stateValue; }, [props.value, stateValue]);
     var hoveredValue = React.useMemo(function () { return stateHover; }, [stateHover]);
     var selection = React.useMemo(function () { return props.selection || defaultProps.selection; }, [props.selection]);
@@ -202,27 +203,19 @@ export var Rating = React.forwardRef(function (directProps, ref) {
         var selectedValue = isSelected(itemValue, value, step, selection);
         var selected = isSelected(itemValue, hoveredValue !== null ? hoveredValue : value, step, selection);
         var hovered = isSelected(itemValue, hoveredValue, step, selection);
-        items.push(React.createElement(Item, { key: itemValue, value: itemValue, dir: dir, title: String(half ? toRound(itemValue - (step / 2), base) : itemValue), icon: props.icon, half: half, selected: selectedValue || selected, hovered: hovered, onClick: handleItemClick, onMouseMove: handleItemMouseMove, onMouseLeave: handleMouseLeave },
+        items.push(React.createElement(Item, { key: itemValue, value: itemValue, dir: dir, title: String(half ? toRound(itemValue - (step / 2), base) : itemValue), icon: props.icon, svgIcon: props.svgIcon, half: half, selected: selectedValue || selected, hovered: hovered, onClick: handleItemClick, onMouseMove: handleItemMouseMove, onMouseLeave: handleMouseLeave },
             half && (React.createElement("span", { className: 'k-rating-precision-complement', style: (_a = { width: '12px' }, _a[dir === 'rtl' ? 'right' : 'left'] = '50%', _a) },
-                React.createElement("span", { className: classNames('k-icon', (_b = {
-                            'k-i-star-outline': !props.icon
-                        },
-                        _b["".concat(props.icon, "-outline")] = props.icon,
-                        _b)) }))),
+                !(props.icon || props.svgIconOutline) && React.createElement(IconWrap, { name: 'star-outline', icon: starOutlineIcon }),
+                (props.icon || props.svgIconOutline) && React.createElement(IconWrap, { name: toIconName("".concat(props.icon, "-outline")), icon: props.svgIconOutline }))),
             half && (React.createElement("span", { className: 'k-rating-precision-part', style: { width: '12px' } },
-                React.createElement("span", { className: classNames('k-icon', (_c = {
-                            'k-i-star': !props.icon
-                        },
-                        _c["".concat(props.icon)] = props.icon,
-                        _c)) }))),
+                !(props.icon || props.svgIcon) && React.createElement(IconWrap, { name: 'star', icon: starIcon }),
+                (props.icon || props.svgIcon) && React.createElement(IconWrap, { name: props.icon ? toIconName(props.icon) : undefined, icon: props.svgIcon }))),
             half && (React.createElement("span", { style: { width: '24px', height: '24px', display: 'block' } })),
-            !half && (React.createElement("span", { className: classNames('k-icon', (_d = {
-                        'k-i-star': !props.icon && (hovered || (selected && !hovered)),
-                        'k-i-star-outline': !props.icon && (!hovered)
-                    },
-                    _d["".concat(props.icon)] = props.icon && (hovered || (selected && !hovered)),
-                    _d["".concat(props.icon, "-outline")] = props.icon && (!hovered),
-                    _d)) }))));
+            !half &&
+                (!(props.icon || props.svgIcon) && (hovered || (selected && !hovered)) && React.createElement(IconWrap, { name: 'star', icon: starIcon })) ||
+                (!(props.icon || props.svgIcon) && !hovered && React.createElement(IconWrap, { name: 'star-outline', icon: starOutlineIcon })) ||
+                ((props.icon || props.svgIcon) && (hovered || (selected && !hovered)) && React.createElement(IconWrap, { name: props.icon, icon: props.svgIcon })) ||
+                ((props.icon || props.svgIcon) && !hovered && React.createElement(IconWrap, { name: toIconName("".concat(props.icon, "-outline")), icon: props.svgIconOutline }))));
     }
     return (React.createElement("span", { id: props.id, style: props.style, ref: ratingRef, role: "slider", dir: dir, tabIndex: getTabIndex(props.tabIndex, props.disabled, undefined), className: classNames('k-rating k-widget', {
             'k-rtl': dir === 'rtl',
@@ -265,6 +258,8 @@ var propTypes = {
     disabled: PropTypes.bool,
     half: PropTypes.bool,
     icon: PropTypes.string,
+    svgIcon: svgIconPropType,
+    svgIconOutline: svgIconPropType,
     ariaDescribedBy: PropTypes.string
 };
 var defaultProps = {

package/dist/es/signature/Signature.js

@@ -56,6 +56,7 @@ import * as React from 'react';
 import { messages, signatureClear, signatureMaximize, signatureMinimize } from '../messages';
 import { packageMetadata } from '../package-metadata';
 import { hasParent } from './utils';
+import { hyperlinkOpenIcon, xIcon } from '@progress/kendo-svg-icons';
 var DEFAULT_WIDTH = 250;
 var DEFAULT_HEIGHT = 84;
 var DEFAULT_POPUP_SCALE = 3;
@@ -335,10 +336,10 @@ export var Signature = React.forwardRef(function (directProps, target) {
             _a), props.className), onFocus: onFocus, onBlur: onBlur },
         React.createElement("div", { className: 'k-signature-canvas', ref: canvasRef, tabIndex: getTabIndex(props.tabIndex, props.disabled), role: "img", id: props.id, "aria-label": props.ariaLabel, "aria-labelledby": props.ariaLabelledBy, "aria-describedby": props.ariaDescribedBy, "aria-disabled": props.disabled ? 'true' : undefined }),
         React.createElement("div", { className: 'k-signature-actions k-signature-actions-top' },
-            showMaximize && (React.createElement(Button, { className: 'k-signature-action k-signature-maximize', ref: maximizeButtonRef, icon: 'hyperlink-open', fillMode: 'flat', size: props.size, onClick: onMaximizeClick, "aria-label": maximizeTitle, title: maximizeTitle })),
-            showMinimize && (React.createElement(Button, { className: 'k-signature-action k-signature-minimize k-rotate-180', ref: minimizeButtonRef, icon: 'hyperlink-open', fillMode: 'flat', size: props.size, onClick: onMinimizeClick, "aria-label": minimizeTitle, title: minimizeTitle }))),
+            showMaximize && (React.createElement(Button, { className: 'k-signature-action k-signature-maximize', ref: maximizeButtonRef, icon: 'hyperlink-open', svgIcon: hyperlinkOpenIcon, fillMode: 'flat', size: props.size, onClick: onMaximizeClick, "aria-label": maximizeTitle, title: maximizeTitle })),
+            showMinimize && (React.createElement(Button, { className: 'k-signature-action k-signature-minimize k-rotate-180', ref: minimizeButtonRef, icon: 'hyperlink-open', svgIcon: hyperlinkOpenIcon, fillMode: 'flat', size: props.size, onClick: onMinimizeClick, "aria-label": minimizeTitle, title: minimizeTitle }))),
         !props.hideLine && (React.createElement("div", { className: 'k-signature-line', style: { zIndex: 2, pointerEvents: 'none' } })),
-        React.createElement("div", { className: 'k-signature-actions k-signature-actions-bottom' }, showClear && (React.createElement(Button, { className: 'k-signature-action k-signature-clear', icon: 'close', fillMode: 'flat', size: props.size, onClick: onClear, "aria-label": clearTitle, title: clearTitle }))),
+        React.createElement("div", { className: 'k-signature-actions k-signature-actions-bottom' }, showClear && (React.createElement(Button, { className: 'k-signature-action k-signature-clear', icon: 'x', svgIcon: xIcon, fillMode: 'flat', size: props.size, onClick: onClear, "aria-label": clearTitle, title: clearTitle }))),
         open && (React.createElement(Dialog, { ref: dialogRef },
             React.createElement(Signature, __assign({}, props, popupSize(), { value: popupValue, maximized: true, exportScale: (1 / popupScale) * exportScale, open: false, onChange: onDialogChange, onClose: onDialogClose }))))));
 });

package/dist/es/slider/Slider.js

@@ -33,6 +33,7 @@ import { SLIDER_LABEL_ATTRIBUTE } from './SliderLabel';
 import { validatePackage } from '@progress/kendo-react-common';
 import { packageMetadata } from '../package-metadata';
 import { Button } from '@progress/kendo-react-buttons';
+import { caretAltDownIcon, caretAltLeftIcon, caretAltUpIcon, caretAltRightIcon } from '@progress/kendo-svg-icons';
 /** @hidden */
 var SliderWithoutContext = /** @class */ (function (_super) {
     __extends(SliderWithoutContext, _super);
@@ -56,9 +57,9 @@ var SliderWithoutContext = /** @class */ (function (_super) {
                 return props.children;
             }
             return (React.createElement(React.Fragment, null,
-                React.createElement(Button, { className: "k-button-decrease", rounded: 'full', icon: _this.props.vertical ? 'caret-alt-down' : 'caret-alt-left', title: props.decrementTitle, onClick: props.decrement }),
+                React.createElement(Button, { className: "k-button-decrease", rounded: 'full', icon: _this.props.vertical ? 'caret-alt-down' : 'caret-alt-left', svgIcon: _this.props.vertical ? caretAltDownIcon : caretAltLeftIcon, title: props.decrementTitle, onClick: props.decrement }),
                 props.children,
-                React.createElement(Button, { className: "k-button-increase", rounded: 'full', icon: _this.props.vertical ? 'caret-alt-up' : 'caret-alt-right', title: props.incrementTitle, onClick: props.increment })));
+                React.createElement(Button, { className: "k-button-increase", rounded: 'full', icon: _this.props.vertical ? 'caret-alt-up' : 'caret-alt-right', svgIcon: _this.props.vertical ? caretAltUpIcon : caretAltRightIcon, title: props.incrementTitle, onClick: props.increment })));
         };
         /**
          * @hidden

package/dist/es/switch/Switch.js

@@ -252,16 +252,18 @@ var SwitchWithoutContext = /** @class */ (function (_super) {
             _a), this.props.className);
         var ariaAttributes = {
             'aria-checked': this.value,
-            'aria-disabled': disabled || undefined
+            'aria-disabled': disabled || undefined,
+            'aria-labelledby': this.props.ariaLabelledBy,
+            'aria-describedby': this.props.ariaDescribedBy
         };
-        return (React.createElement("span", { ref: function (span) {
+        return (React.createElement("span", __assign({ ref: function (span) {
                 _this._wrapper = span;
-            }, className: switchClassName, dir: this.dir, onKeyDown: this.handleKeyDown, onClick: this.handleClick, onBlur: this.handleWrapperBlur, onFocus: this.handleWrapperFocus },
-            React.createElement("span", __assign({ className: classNames('k-switch-track', (_b = {},
+            }, role: 'switch' }, ariaAttributes, { className: switchClassName, dir: this.dir, onKeyDown: this.handleKeyDown, onClick: this.handleClick, onBlur: this.handleWrapperBlur, onFocus: this.handleWrapperFocus }),
+            React.createElement("span", { className: classNames('k-switch-track', (_b = {},
                     _b["k-rounded-".concat(kendoThemeMaps.roundedMap[trackRounded] || trackRounded)] = trackRounded,
-                    _b)), id: id || this._id, role: 'switch' }, ariaAttributes, { "aria-labelledby": this.props.ariaLabelledBy, "aria-describedby": this.props.ariaDescribedBy, ref: function (span) {
+                    _b)), id: id || this._id, ref: function (span) {
                     _this._element = span;
-                }, tabIndex: getTabIndex(tabIndex, disabled, undefined), accessKey: this.props.accessKey }),
+                }, tabIndex: getTabIndex(tabIndex, disabled, undefined), accessKey: this.props.accessKey },
                 this.dummyInput(this.value),
                 React.createElement("span", { className: 'k-switch-label-on' }, onLabel),
                 React.createElement("span", { className: 'k-switch-label-off' }, offLabel)),

package/dist/es/textarea/TextArea.js

@@ -111,7 +111,7 @@ export var TextArea = React.forwardRef(function (directProps, target) {
             dispatchEvent(onBlur, event, getImperativeHandle(), undefined);
         }
     }, [onBlur, disabled]);
-    var textAreaProps = __assign(__assign({ id: id || calculatedId, name: name, className: 'k-input-inner !k-overflow-auto', ref: elementRef, disabled: disabled, rows: rows, placeholder: placeholder, readOnly: readOnly, required: required, tabIndex: getTabIndex(tabIndex, disabled), style: autoSize ? { resize: 'none', overflow: 'hidden', height: textAreaHeight } : {}, 'aria-labelledby': ariaLabelledBy, 'aria-describedby': ariaDescribedBy, 'aria-multiline': true, 'aria-disabled': disabled || undefined, value: isControlled ? value : stateValue }, others), { onChange: handleChange, onFocus: handleFocus, onBlur: handleBlur });
+    var textAreaProps = __assign(__assign({ id: id || calculatedId, role: 'textbox', name: name, className: 'k-input-inner !k-overflow-auto', ref: elementRef, disabled: disabled, rows: rows, placeholder: placeholder, readOnly: readOnly, required: required, tabIndex: getTabIndex(tabIndex, disabled), style: autoSize ? { resize: 'none', overflow: 'hidden', height: textAreaHeight } : {}, 'aria-labelledby': ariaLabelledBy, 'aria-describedby': ariaDescribedBy, 'aria-multiline': true, 'aria-disabled': disabled || undefined, value: isControlled ? value : stateValue }, others), { onChange: handleChange, onFocus: handleFocus, onBlur: handleBlur });
     return (React.createElement("span", { className: classNames('k-input', 'k-textarea', (_a = {},
             _a["k-input-".concat(kendoThemeMaps.sizeMap[size] || size)] = size,
             _a["k-input-".concat(fillMode)] = fillMode,

package/dist/npm/colors/ColorContrastLabels.js

@@ -20,6 +20,8 @@ var React = require("react");
 var kendo_react_intl_1 = require("@progress/kendo-react-intl");
 var messages_1 = require("../messages");
 var color_parser_1 = require("./utils/color-parser");
+var kendo_react_common_1 = require("@progress/kendo-react-common");
+var kendo_svg_icons_1 = require("@progress/kendo-svg-icons");
 /**
  * @hidden
  */
@@ -44,18 +46,18 @@ var ColorContrastLabels = /** @class */ (function (_super) {
         var success = (React.createElement("span", { className: "k-contrast-validation k-text-success" },
             passMessage,
             " ",
-            React.createElement("span", { className: "k-icon k-i-check" })));
+            React.createElement(kendo_react_common_1.IconWrap, { name: "check", icon: kendo_svg_icons_1.checkIcon })));
         var error = (React.createElement("span", { className: "k-contrast-validation k-text-error" },
             failMessage,
             " ",
-            React.createElement("span", { className: "k-icon k-i-close" })));
+            React.createElement(kendo_react_common_1.IconWrap, { name: "x", icon: kendo_svg_icons_1.xIcon })));
         return (React.createElement("div", { className: "k-vbox k-colorgradient-color-contrast" },
             React.createElement("div", { className: "k-contrast-ratio" },
                 React.createElement("span", { className: "k-contrast-ratio-text" }, contrastText),
                 contrast >= 4.5 ? (React.createElement("span", { className: "k-contrast-validation k-text-success" },
-                    React.createElement("span", { className: "k-icon k-i-check" }),
-                    contrast >= 7 && React.createElement("span", { className: "k-icon k-i-check" }))) : (React.createElement("span", { className: "k-contrast-validation k-text-error" },
-                    React.createElement("span", { className: "k-icon k-i-close" })))),
+                    React.createElement(kendo_react_common_1.IconWrap, { name: "check", icon: kendo_svg_icons_1.checkIcon }),
+                    contrast >= 7 && React.createElement(kendo_react_common_1.IconWrap, { name: "check", icon: kendo_svg_icons_1.checkIcon }))) : (React.createElement("span", { className: "k-contrast-validation k-text-error" },
+                    React.createElement(kendo_react_common_1.IconWrap, { name: "x", icon: kendo_svg_icons_1.xIcon })))),
             React.createElement("div", null,
                 React.createElement("span", null, aaText),
                 contrast >= 4.5 ? success : error),

package/dist/npm/colors/ColorGradient.d.ts

@@ -32,6 +32,8 @@ export declare class ColorGradientWithoutContext extends React.Component<ColorGr
         disabled: PropTypes.Requireable<boolean>;
         style: PropTypes.Requireable<any>;
         id: PropTypes.Requireable<string>;
+        role: PropTypes.Requireable<string>;
+        ariaLabel: PropTypes.Requireable<string>;
         ariaLabelledBy: PropTypes.Requireable<string>;
         ariaDescribedBy: PropTypes.Requireable<string>;
     };
@@ -40,6 +42,7 @@ export declare class ColorGradientWithoutContext extends React.Component<ColorGr
      */
     static defaultProps: {
         opacity: boolean;
+        role: string;
     };
     /**
      * @hidden

package/dist/npm/colors/ColorGradient.js

@@ -176,7 +176,7 @@ var ColorGradientWithoutContext = /** @class */ (function (_super) {
             style.top = "".concat(top_1, "px");
             style.left = "".concat(left, "px");
         }
-        return React.createElement("div", { className: "k-hsv-draghandle k-draghandle", style: style });
+        return (React.createElement("div", { role: 'slider', tabIndex: (0, kendo_react_common_1.getTabIndex)(this.props.tabIndex, this.props.disabled), "aria-valuetext": this.props.ariaValueText, "aria-valuenow": parseInt(this.state.hex.substring(1), 16), "aria-label": this.props.ariaLabelHSV, "aria-orientation": undefined, "aria-disabled": this.props.disabled ? 'true' : undefined, className: "k-hsv-draghandle k-draghandle", style: style }));
     };
     /**
      * @hidden
@@ -245,7 +245,7 @@ var ColorGradientWithoutContext = /** @class */ (function (_super) {
         var _this = this;
         var lS = (0, kendo_react_intl_1.provideLocalizationService)(this);
         var className = (0, kendo_react_common_1.classNames)('k-colorgradient', { 'k-disabled': this.props.disabled });
-        return (React.createElement("div", { id: this.props.id, className: className, "aria-disabled": this.props.disabled ? 'true' : undefined, style: this.props.style, ref: function (el) { return _this.wrapper = el; }, tabIndex: (0, kendo_react_common_1.getTabIndex)(this.props.tabIndex, this.props.disabled), "aria-labelledby": this.props.ariaLabelledBy, "aria-describedby": this.props.ariaDescribedBy, onFocus: this.onFocus },
+        return (React.createElement("div", { id: this.props.id, role: this.props.role, className: className, "aria-disabled": this.props.disabled ? 'true' : undefined, style: this.props.style, ref: function (el) { return _this.wrapper = el; }, tabIndex: (0, kendo_react_common_1.getTabIndex)(this.props.tabIndex, this.props.disabled), "aria-label": this.props.ariaLabel, "aria-labelledby": this.props.ariaLabelledBy, "aria-describedby": this.props.ariaDescribedBy, onFocus: this.onFocus },
             React.createElement("div", { className: "k-colorgradient-canvas k-hstack" },
                 React.createElement("div", { className: "k-hsv-rectangle", style: { background: this.state.backgroundColor } },
                     React.createElement(kendo_react_common_1.Draggable, { onDrag: this.onDrag, onRelease: this.onRelease, ref: function (el) { return _this.gradientWrapper = el ? el.element : undefined; } },
@@ -273,6 +273,8 @@ var ColorGradientWithoutContext = /** @class */ (function (_super) {
         disabled: PropTypes.bool,
         style: PropTypes.any,
         id: PropTypes.string,
+        role: PropTypes.string,
+        ariaLabel: PropTypes.string,
         ariaLabelledBy: PropTypes.string,
         ariaDescribedBy: PropTypes.string
     };
@@ -280,7 +282,8 @@ var ColorGradientWithoutContext = /** @class */ (function (_super) {
      * @hidden
      */
     ColorGradientWithoutContext.defaultProps = {
-        opacity: true
+        opacity: true,
+        role: 'textbox'
     };
     return ColorGradientWithoutContext;
 }(React.Component));

package/dist/npm/colors/ColorInput.js

@@ -31,6 +31,7 @@ var main_1 = require("../main");
 var HexInput_1 = require("./HexInput");
 var kendo_react_buttons_1 = require("@progress/kendo-react-buttons");
 var kendo_react_labels_1 = require("@progress/kendo-react-labels");
+var kendo_svg_icons_1 = require("@progress/kendo-svg-icons");
 var kendo_react_intl_1 = require("@progress/kendo-react-intl");
 var messages_1 = require("../messages");
 /**
@@ -71,7 +72,7 @@ var ColorInput = /** @class */ (function (_super) {
         var toggleButtonMessage = localizationService.toLanguageString(messages_1.colorGradientToggleInputsButton, messages_1.messages[messages_1.colorGradientToggleInputsButton]);
         return (React.createElement("div", { className: "k-colorgradient-inputs k-hstack" },
             React.createElement("div", { className: "k-vstack" },
-                React.createElement(kendo_react_buttons_1.Button, { "aria-label": toggleButtonMessage, fillMode: 'flat', icon: 'caret-alt-expand', className: "k-colorgradient-toggle-mode k-icon-button", onClick: this.onToggleModeChange.bind(this) })),
+                React.createElement(kendo_react_buttons_1.Button, { "aria-label": toggleButtonMessage, fillMode: 'flat', icon: 'caret-alt-expand', svgIcon: kendo_svg_icons_1.caretAltExpandIcon, className: "k-colorgradient-toggle-mode k-icon-button", onClick: this.onToggleModeChange.bind(this) })),
             this.state.inputMode === 'hex' &&
                 React.createElement("div", { className: "k-vstack k-flex-1" },
                     React.createElement("span", { className: "k-hex-value k-textbox k-input" },

package/dist/npm/colors/ColorPalette.js

@@ -118,8 +118,8 @@ var ColorPaletteWithoutContext = /** @class */ (function (_super) {
         var focusedCellCoords = svc.getCellCoordsFor(this.state.focusedColor);
         var className = (0, kendo_react_common_1.classNames)('k-colorpalette', { 'k-disabled': this.props.disabled });
         if (paletteInfo.colors.length) {
-            return (React.createElement("div", { id: this.props.id, className: className, onFocus: this.onFocus, onBlur: this.onBlur, onKeyDown: this.onKeyDown, "aria-disabled": this.props.disabled ? 'true' : undefined, "aria-labelledby": this.props.ariaLabelledBy, "aria-describedby": this.props.ariaDescribedBy, tabIndex: (0, kendo_react_common_1.getTabIndex)(this.props.tabIndex, this.props.disabled), ref: function (el) { return _this.wrapper = el; } },
-                React.createElement("div", { className: "k-colorpalette-table-wrap", role: "grid" },
+            return (React.createElement("div", { id: this.props.id, role: "grid", className: className, onFocus: this.onFocus, onBlur: this.onBlur, onKeyDown: this.onKeyDown, "aria-disabled": this.props.ariaDisabled || (this.props.disabled ? 'true' : undefined), "aria-labelledby": this.props.ariaLabelledBy, "aria-describedby": this.props.ariaDescribedBy, tabIndex: (0, kendo_react_common_1.getTabIndex)(this.props.tabIndex, this.props.disabled), ref: function (el) { return _this.wrapper = el; } },
+                React.createElement("div", { className: "k-colorpalette-table-wrap" },
                     React.createElement("table", { className: "k-colorpalette-table k-palette", role: "presentation" },
                         React.createElement("tbody", { role: "rowgroup" }, this.renderRows(svc.colorRows, selectedCellCoords, focusedCellCoords))))));
         }

package/dist/npm/colors/ColorPicker.js

@@ -21,6 +21,7 @@ var Picker_1 = require("./Picker");
 var ColorGradient_1 = require("./ColorGradient");
 var ColorPalette_1 = require("./ColorPalette");
 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");
 /**
@@ -63,11 +64,11 @@ exports.ColorPickerPropsContext = (0, kendo_react_common_1.createPropsContext)()
  * ```
  */
 exports.ColorPicker = React.forwardRef(function (directProps, target) {
-    var _a, _b;
+    var _a;
     (0, kendo_react_common_2.validatePackage)(package_metadata_1.packageMetadata);
     var props = (0, kendo_react_common_1.usePropsContext)(exports.ColorPickerPropsContext, directProps);
     var localization = (0, kendo_react_intl_1.useLocalization)();
-    var _c = props.size, size = _c === void 0 ? defaultProps.size : _c, _d = props.rounded, rounded = _d === void 0 ? defaultProps.rounded : _d, _e = props.fillMode, fillMode = _e === void 0 ? defaultProps.fillMode : _e, popupSettings = props.popupSettings, gradientSettings = props.gradientSettings, paletteSettings = props.paletteSettings, valid = props.valid, disabled = props.disabled, tabIndex = props.tabIndex, view = props.view, icon = props.icon, iconClassName = props.iconClassName, onChange = props.onChange, onFocus = props.onFocus, onBlur = props.onBlur, onActiveColorClick = props.onActiveColorClick;
+    var _b = props.size, size = _b === void 0 ? defaultProps.size : _b, _c = props.rounded, rounded = _c === void 0 ? defaultProps.rounded : _c, _d = props.fillMode, fillMode = _d === void 0 ? defaultProps.fillMode : _d, popupSettings = props.popupSettings, gradientSettings = props.gradientSettings, paletteSettings = props.paletteSettings, valid = props.valid, disabled = props.disabled, tabIndex = props.tabIndex, view = props.view, icon = props.icon, svgIcon = props.svgIcon, iconClassName = props.iconClassName, onChange = props.onChange, onFocus = props.onFocus, onBlur = props.onBlur, onActiveColorClick = props.onActiveColorClick;
     var focusableElementRef = React.useRef(null);
     var gradientRef = React.useRef(null);
     var paletteRef = React.useRef(null);
@@ -84,9 +85,9 @@ exports.ColorPicker = React.forwardRef(function (directProps, target) {
         actionElement: buttonRef.current,
         focus: focusElement
     }); });
-    var _f = React.useState(false), focused = _f[0], setFocused = _f[1];
-    var _g = React.useState(props.defaultValue), stateValue = _g[0], setStateValue = _g[1];
-    var _h = React.useState(false), stateOpen = _h[0], setStateOpen = _h[1];
+    var _e = React.useState(false), focused = _e[0], setFocused = _e[1];
+    var _f = React.useState(props.defaultValue), stateValue = _f[0], setStateValue = _f[1];
+    var _g = React.useState(false), stateOpen = _g[0], setStateOpen = _g[1];
     var isValueControlled = isControlled(props.value);
     var isOpenControlled = isControlled(props.open);
     var value = isValueControlled ? props.value : stateValue;
@@ -199,7 +200,7 @@ exports.ColorPicker = React.forwardRef(function (directProps, target) {
     var onPaletteChangeHandler = React.useCallback(function (event) { return onChangeHandler(event, true); }, [isControlled, onChangeHandler]);
     var dir = (0, kendo_react_common_1.useDir)(focusableElementRef, props.dir);
     var isValid = valid !== false;
-    return (React.createElement("span", { id: props.id, "aria-labelledby": props.ariaLabelledBy, "aria-describedby": props.ariaDescribedBy, className: (0, kendo_react_common_1.classNames)('k-colorpicker', 'k-picker', 'k-icon-picker', (_a = {},
+    return (React.createElement("span", { id: props.id, role: 'combobox', "aria-label": props.ariaLabel, "aria-labelledby": props.ariaLabelledBy, "aria-describedby": props.ariaDescribedBy, "aria-haspopup": 'dialog', "aria-expanded": open, "aria-disabled": disabled ? 'true' : undefined, className: (0, kendo_react_common_1.classNames)('k-colorpicker', 'k-picker', 'k-icon-picker', (_a = {},
             _a["k-picker-".concat(kendo_react_common_1.kendoThemeMaps.sizeMap[size] || size)] = size,
             _a["k-picker-".concat(fillMode)] = fillMode,
             _a["k-rounded-".concat(kendo_react_common_1.kendoThemeMaps.roundedMap[rounded] || rounded)] = rounded,
@@ -210,12 +211,11 @@ exports.ColorPicker = React.forwardRef(function (directProps, target) {
         React.createElement(Picker_1.Picker, { dir: dir, open: open, onOpen: onOpenHandler, popupAnchor: focusableElementRef.current || undefined, popupSettings: __assign({}, popupSettings), input: (React.createElement("span", { onClick: onActiveColorClickHandler, className: 'k-input-inner' },
                 React.createElement("span", { className: (0, kendo_react_common_1.classNames)('k-value-icon', 'k-color-preview', {
                         'k-no-color': !value,
-                        'k-icon-color-preview': (icon || iconClassName)
+                        'k-icon-color-preview': (icon || svgIcon || iconClassName)
                     }) },
-                    (iconClassName || icon) && React.createElement("span", { className: (0, kendo_react_common_1.classNames)('k-color-preview-icon', iconClassName, (_b = {},
-                            _b["k-icon k-i-".concat(icon)] = (icon && !iconClassName),
-                            _b)) }),
-                    React.createElement("span", { className: "k-color-preview-mask", style: { backgroundColor: value } })))), button: (React.createElement(kendo_react_buttons_1.Button, { tabIndex: -1, type: "button", onClick: onClickHandler, className: "k-input-button", rounded: null, icon: 'caret-alt-down', "aria-label": localization.toLanguageString(messages_1.colorPickerDropdownButtonAriaLabel, messages_1.messages[messages_1.colorPickerDropdownButtonAriaLabel]) })), content: (React.createElement(React.Fragment, null,
+                    iconClassName && React.createElement("span", { className: (0, kendo_react_common_1.classNames)('k-color-preview-icon', iconClassName) }),
+                    !iconClassName && (icon || svgIcon) && React.createElement(kendo_react_common_1.IconWrap, { name: icon, icon: svgIcon }),
+                    React.createElement("span", { className: "k-color-preview-mask", style: { backgroundColor: value } })))), button: (React.createElement(kendo_react_buttons_1.Button, { tabIndex: -1, type: "button", onClick: onClickHandler, className: "k-input-button", rounded: null, icon: 'caret-alt-down', svgIcon: kendo_svg_icons_1.caretAltDownIcon, "aria-label": localization.toLanguageString(messages_1.colorPickerDropdownButtonAriaLabel, messages_1.messages[messages_1.colorPickerDropdownButtonAriaLabel]) })), content: (React.createElement(React.Fragment, null,
                 (view === 'combo' || view === 'gradient') && (React.createElement(ColorGradient_1.ColorGradient, __assign({}, gradientSettings, { tabIndex: 0, ref: gradientRef, value: value, onChange: onChangeHandler }))),
                 (view === 'combo' || view === 'palette') && (React.createElement(ColorPalette_1.ColorPalette, __assign({}, paletteSettings, { ref: paletteRef, value: value, onChange: onPaletteChangeHandler }))))) })));
 });
@@ -226,6 +226,8 @@ exports.ColorPicker.propTypes = {
     view: PropTypes.oneOf(['gradient', 'palette', 'combo']),
     dir: PropTypes.string,
     id: PropTypes.string,
+    icon: PropTypes.string,
+    svgIcon: kendo_react_common_1.svgIconPropType,
     ariaLabelledBy: PropTypes.string,
     ariaDescribedBy: PropTypes.string,
     size: PropTypes.oneOf([null, 'small', 'medium', 'large']),

package/dist/npm/colors/FlatColorPicker.d.ts

@@ -23,6 +23,14 @@ export interface FlatColorPickerProps {
      * Sets the `tabIndex` property of the FlatColorPicker.
      */
     tabIndex?: number;
+    /**
+     * Represents the label of the FlatColorPicker component.
+     */
+    ariaLabel?: string;
+    /**
+     * Identifies the element(s) which will label the component.
+     */
+    ariaLabelledBy?: string;
     /**
      * Determines whether the FlatColorPicker is disabled.
      */

package/dist/npm/colors/FlatColorPicker.js

@@ -5,8 +5,10 @@ var React = require("react");
 var PropTypes = require("prop-types");
 var kendo_react_common_1 = require("@progress/kendo-react-common");
 var kendo_react_buttons_1 = require("@progress/kendo-react-buttons");
+var kendo_svg_icons_1 = require("@progress/kendo-svg-icons");
 var main_1 = require("../main");
 var package_metadata_1 = require("../package-metadata");
+var kendo_react_intl_1 = require("@progress/kendo-react-intl");
 var messages_1 = require("../messages");
 ;
 ;
@@ -21,6 +23,7 @@ exports.FlatColorPicker = React.forwardRef(function (props, ref) {
     var _a = React.useState((props.view || 'ColorGradient') === 'ColorGradient'), colorGradientView = _a[0], setColorGradientView = _a[1];
     var _b = React.useState('rgba(255, 255, 255, 1)'), colorValue = _b[0], setColorValue = _b[1];
     var _c = React.useState('rgba(255, 255, 255, 1)'), prevColor = _c[0], setPrevColor = _c[1];
+    var localizationService = (0, kendo_react_intl_1.useLocalization)();
     var focus = React.useCallback(function () {
         if (target.current) {
             target.current.focus();
@@ -60,7 +63,7 @@ exports.FlatColorPicker = React.forwardRef(function (props, ref) {
     var handleFlatColorPickerBlur = React.useCallback(function () {
         setPrevColor(colorValue);
     }, [colorValue]);
-    return (React.createElement("div", { id: props.id, style: props.style, ref: flatColorPickerRef, tabIndex: (0, kendo_react_common_1.getTabIndex)(props.tabIndex, props.disabled), className: (0, kendo_react_common_1.classNames)('k-flatcolorpicker k-coloreditor', {
+    return (React.createElement("div", { id: props.id, role: 'textbox', "aria-label": props.ariaLabel, "aria-labelledby": props.ariaLabelledBy, "aria-disabled": props.disabled ? 'true' : undefined, style: props.style, ref: flatColorPickerRef, tabIndex: (0, kendo_react_common_1.getTabIndex)(props.tabIndex, props.disabled), className: (0, kendo_react_common_1.classNames)('k-flatcolorpicker k-coloreditor', {
             'k-disabled': props.disabled
         }, props.className), onBlur: handleFlatColorPickerBlur },
         React.createElement(React.Fragment, null,
@@ -68,22 +71,19 @@ exports.FlatColorPicker = React.forwardRef(function (props, ref) {
                 React.createElement("div", { className: "k-coloreditor-header k-hstack" },
                     React.createElement("div", { className: "k-coloreditor-header-actions k-hstack" },
                         React.createElement(kendo_react_buttons_1.ButtonGroup, null,
-                            React.createElement(kendo_react_buttons_1.Button, { type: "button", togglable: true, fillMode: 'flat', selected: colorGradientView, onClick: function () { return handleViewChange('ColorGradient'); } },
-                                React.createElement("span", { className: "k-icon k-i-color-canvas" })),
-                            React.createElement(kendo_react_buttons_1.Button, { type: "button", togglable: true, fillMode: 'flat', selected: !colorGradientView, onClick: function () { return handleViewChange('ColorPalette'); } },
-                                React.createElement("span", { className: "k-icon k-i-palette" })))),
+                            React.createElement(kendo_react_buttons_1.Button, { type: "button", "aria-label": localizationService.toLanguageString(messages_1.flatColorPickerColorGradientBtn, messages_1.messages[messages_1.flatColorPickerColorGradientBtn]), togglable: true, fillMode: 'flat', selected: colorGradientView, onClick: function () { return handleViewChange('ColorGradient'); }, icon: "droplet-slider", svgIcon: kendo_svg_icons_1.dropletSliderIcon }),
+                            React.createElement(kendo_react_buttons_1.Button, { type: "button", "aria-label": localizationService.toLanguageString(messages_1.flatColorPickerColorPaletteBtn, messages_1.messages[messages_1.flatColorPickerColorPaletteBtn]), togglable: true, fillMode: 'flat', selected: !colorGradientView, onClick: function () { return handleViewChange('ColorPalette'); }, icon: "palette", svgIcon: kendo_svg_icons_1.paletteIcon }))),
                     React.createElement("div", { className: "k-spacer" }),
                     React.createElement("div", { className: "k-coloreditor-header-actions k-hstack" },
                         (props.showClearButton && defaultProps.showClearButton) &&
-                            React.createElement(kendo_react_buttons_1.Button, { type: "button", fillMode: 'flat', onClick: handleResetColor },
-                                React.createElement("span", { className: "k-icon k-i-droplet-slash" })),
+                            React.createElement(kendo_react_buttons_1.Button, { type: "button", fillMode: 'flat', onClick: handleResetColor, "aria-label": localizationService.toLanguageString(messages_1.flatColorPickerClearBtn, messages_1.messages[messages_1.flatColorPickerClearBtn]), icon: "droplet-slash", svgIcon: kendo_svg_icons_1.dropletSlashIcon }),
                         (props.showPreview && defaultProps.showPreview) &&
                             React.createElement("div", { className: "k-coloreditor-preview k-vstack" },
                                 React.createElement("span", { className: "k-coloreditor-preview-color k-color-preview", style: { background: colorValue } }),
                                 React.createElement("span", { className: "k-coloreditor-current-color k-color-preview", style: { background: prevColor }, onClick: handlePrevColorClick })))),
             React.createElement("div", { className: "k-coloreditor-views k-vstack" }, colorGradientView
-                ? React.createElement(main_1.ColorGradient, { ref: colorGradientRef, value: colorValue, onChange: handleColorChange, onFocus: handleFocus })
-                : React.createElement(main_1.ColorPalette, { value: colorValue, onChange: handleColorChange, onFocus: handleFocus })),
+                ? React.createElement(main_1.ColorGradient, { ref: colorGradientRef, role: "none", tabIndex: -1, ariaLabel: undefined, value: colorValue, onChange: handleColorChange, onFocus: handleFocus })
+                : React.createElement(main_1.ColorPalette, { ariaDisabled: true, ariaLabelledBy: 'required_label', value: colorValue, onChange: handleColorChange, onFocus: handleFocus })),
             (props.showButtons && defaultProps.showButtons) &&
                 React.createElement("div", { className: "k-coloreditor-footer k-actions k-actions-end" },
                     React.createElement(kendo_react_buttons_1.Button, { type: "button", className: "k-coloreditor-cancel", onClick: handleCancelBtnClick }, messages_1.messages[messages_1.flatColorPickerCancelBtn]),

package/dist/npm/colors/interfaces/ColorGradientProps.d.ts

@@ -12,6 +12,10 @@ export interface ColorGradientProps {
      * The value of the ColorGradient.
      */
     value?: string;
+    /**
+     * @hidden
+     */
+    role?: string;
     /**
      * Determines the event handler that will be fired when the user edits the value.
      */
@@ -65,8 +69,20 @@ export interface ColorGradientProps {
      * For example these elements could contain error or hint message.
      */
     ariaDescribedBy?: string;
+    /**
+     * Represents the label of the `hsv` drag handle component used inside the ColorGradient.
+     */
+    ariaLabelHSV?: string;
+    /**
+     * Represent the label of the component.
+     */
+    ariaLabel?: string;
     /**
      * Identifies the element(s) which will label the component.
      */
     ariaLabelledBy?: string;
+    /**
+     * Represents the text rendered inside the `hsv` drag handle.
+     */
+    ariaValueText?: string;
 }

package/dist/npm/colors/interfaces/ColorPaletteProps.d.ts

@@ -64,6 +64,10 @@ export interface ColorPaletteProps {
      * Identifies the element(s) which will label the component.
      */
     ariaLabelledBy?: string;
+    /**
+     * @hidden
+     */
+    ariaDisabled?: boolean;
     /**
      * Determines the event handler that will be fired when the user edits the value.
      */

package/dist/npm/colors/interfaces/ColorPickerProps.d.ts

@@ -6,6 +6,7 @@ import { ColorPickerPopupSettings } from './ColorPickerPopupSettings';
 import { ColorPickerPaletteSettings } from './ColorPickerPaletteSettings';
 import { ColorPickerGradientSettings } from './ColorPickerGradientSettings';
 import { ColorPickerView } from './ColorPickerView';
+import { SVGIcon } from '@progress/kendo-react-common';
 /**
  * Represents the props of the [KendoReact ColorPicker component]({% slug overview_colorpicker %}).
  */
@@ -56,6 +57,10 @@ export interface ColorPickerProps {
      * ([see example]({% slug customizecolorpicker_colorpicker %}#toc-displaying-kendo-ui-icons)).
      */
     icon?: string;
+    /**
+     * Defines the SVG icon.
+     */
+    svgIcon?: SVGIcon;
     /**
      * The class name which displays an icon in the ColorPicker button
      * ([see example]({% slug customizecolorpicker_colorpicker %}#toc-displaying-custom-icons)).
@@ -92,6 +97,10 @@ export interface ColorPickerProps {
      * Identifies the element(s) which will label the component.
      */
     ariaLabelledBy?: string;
+    /**
+     * Represent the label of the component.
+     */
+    ariaLabel?: string;
     /**
      * The event handler that will be fired when the user edits the value.
      */

package/dist/npm/input/InputValidationIcon.d.ts

@@ -1,14 +1,14 @@
-import { IconHandle, IconProps } from '@progress/kendo-react-common';
+import { IconHandle, SvgIconHandle, IconProps, SvgIconProps } from '@progress/kendo-react-common';
 import * as React from 'react';
 /**
  * Represent the `ref` of the `InputValidationIcon` component.
  */
-export declare type InputValidationIconHandle = IconHandle;
+export declare type InputValidationIconHandle = IconHandle & SvgIconHandle;
 /**
  * Represents the `props` of the `InputValidationIcon` component.
  */
-export declare type InputValidationIconProps = IconProps;
+export declare type InputValidationIconProps = IconProps & SvgIconProps;
 /**
  * Represents the KendoReact InputValidationIcon component.
  */
-export declare const InputValidationIcon: React.ForwardRefExoticComponent<IconProps & React.RefAttributes<IconHandle>>;
+export declare const InputValidationIcon: React.ForwardRefExoticComponent<IconProps & SvgIconProps & React.RefAttributes<InputValidationIconHandle>>;

package/dist/npm/input/InputValidationIcon.js

@@ -18,6 +18,6 @@ var React = require("react");
  * Represents the KendoReact InputValidationIcon component.
  */
 exports.InputValidationIcon = React.forwardRef(function (props, ref) {
-    return React.createElement(kendo_react_common_1.Icon, __assign({ ref: ref }, props, { className: (0, kendo_react_common_1.classNames)('k-input-validation-icon', props.className) }));
+    return React.createElement(kendo_react_common_1.IconWrap, __assign({ ref: ref }, props, { className: (0, kendo_react_common_1.classNames)('k-input-validation-icon', props.className) }));
 });
 exports.InputValidationIcon.displayName = 'KendoReactInputValidationIcon';

package/dist/npm/maskedtextbox/MaskedTextBox.js

@@ -301,7 +301,7 @@ var MaskedTextBoxWithoutContext = /** @class */ (function (_super) {
                 _a), this.props.className), style: !this.props.label
                 ? __assign({ width: this.props.width }, style) : style },
             React.createElement(Prefix, null),
-            React.createElement("input", { type: "text", autoComplete: "off", autoCorrect: "off", autoCapitalize: "off", spellCheck: false, className: "k-input-inner", value: this.value, id: inputId, "aria-labelledby": this.props.ariaLabelledBy, "aria-describedby": this.props.ariaDescribedBy, name: this.props.name, tabIndex: (0, kendo_react_common_1.getTabIndex)(this.props.tabIndex, this.props.disabled, true), accessKey: this.props.accessKey, title: this.props.title, disabled: this.props.disabled || undefined, readOnly: this.props.readonly || undefined, placeholder: this.props.placeholder, ref: function (input) { return _this._input = input; }, onChange: this.onChangeHandler, onPaste: this.pasteHandler, onFocus: this.focusHandler, onBlur: this.blurHandler, onDragStart: utils_1.returnFalse, onDrop: utils_1.returnFalse }),
+            React.createElement("input", { type: "text", autoComplete: "off", autoCorrect: "off", autoCapitalize: "off", spellCheck: false, className: "k-input-inner", value: this.value, id: inputId, "aria-labelledby": this.props.ariaLabelledBy, "aria-describedby": this.props.ariaDescribedBy, "aria-placeholder": this.props.mask, name: this.props.name, tabIndex: (0, kendo_react_common_1.getTabIndex)(this.props.tabIndex, this.props.disabled, true), accessKey: this.props.accessKey, title: this.props.title, disabled: this.props.disabled || undefined, readOnly: this.props.readonly || undefined, placeholder: this.props.placeholder, ref: function (input) { return _this._input = input; }, onChange: this.onChangeHandler, onPaste: this.pasteHandler, onFocus: this.focusHandler, onBlur: this.blurHandler, onDragStart: utils_1.returnFalse, onDrop: utils_1.returnFalse }),
             React.createElement(Suffix, null)));
         return this.props.label
             ? (React.createElement(kendo_react_labels_1.FloatingLabel, { label: this.props.label, editorId: inputId, editorValue: this.value, editorValid: isValid, editorDisabled: this.props.disabled, editorPlaceholder: this.props.placeholder, children: component, style: { width: this.props.width }, dir: this.props.dir }))

package/dist/npm/messages/index.d.ts

@@ -78,6 +78,18 @@ export declare const flatColorPickerCancelBtn = "flatColorPicker.cancelBtn";
  * @hidden
  */
 export declare const flatColorPickerApplyBtn = "flatColorPicker.applyBtn";
+/**
+ * @hidden
+ */
+export declare const flatColorPickerColorGradientBtn = "flatColorPicker.colorGradientBtn";
+/**
+ * @hidden
+ */
+export declare const flatColorPickerColorPaletteBtn = "flatColorPicker.colorPaletteBtn";
+/**
+ * @hidden
+ */
+export declare const flatColorPickerClearBtn = "flatColorPicker.clearBtn";
 /**
  * @hidden
  */
@@ -138,6 +150,9 @@ export declare const messages: {
     "colorGradient.toggleInputsButton": string;
     "flatColorPicker.cancelBtn": string;
     "flatColorPicker.applyBtn": string;
+    "flatColorPicker.colorGradientBtn": string;
+    "flatColorPicker.colorPaletteBtn": string;
+    "flatColorPicker.clearBtn": string;
     "checkbox.validation": string;
     "checkbox.optionalText": string;
     "radioButton.validation": string;