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

package/dist/es/colors/ColorContrastLabels.js

@@ -17,6 +17,8 @@ import * as React from 'react';
 import { registerForLocalization, provideLocalizationService } from '@progress/kendo-react-intl';
 import { messages, colorGradientContrastRatio, colorGradientAALevel, colorGradientAAALevel, colorGradientPass, colorGradientFail } from '../messages';
 import { getContrastFromTwoRGBAs } from './utils/color-parser';
+import { IconWrap } from '@progress/kendo-react-common';
+import { checkIcon, xIcon } from '@progress/kendo-svg-icons';
 /**
  * @hidden
  */
@@ -41,18 +43,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(IconWrap, { name: "check", icon: 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(IconWrap, { name: "x", icon: 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(IconWrap, { name: "check", icon: checkIcon }),
+                    contrast >= 7 && React.createElement(IconWrap, { name: "check", icon: checkIcon }))) : (React.createElement("span", { className: "k-contrast-validation k-text-error" },
+                    React.createElement(IconWrap, { name: "x", icon: xIcon })))),
             React.createElement("div", null,
                 React.createElement("span", null, aaText),
                 contrast >= 4.5 ? success : error),

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

@@ -173,7 +173,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: 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
@@ -242,7 +242,7 @@ var ColorGradientWithoutContext = /** @class */ (function (_super) {
         var _this = this;
         var lS = provideLocalizationService(this);
         var className = 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: 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: 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(Draggable, { onDrag: this.onDrag, onRelease: this.onRelease, ref: function (el) { return _this.gradientWrapper = el ? el.element : undefined; } },
@@ -270,6 +270,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
     };
@@ -277,7 +279,8 @@ var ColorGradientWithoutContext = /** @class */ (function (_super) {
      * @hidden
      */
     ColorGradientWithoutContext.defaultProps = {
-        opacity: true
+        opacity: true,
+        role: 'textbox'
     };
     return ColorGradientWithoutContext;
 }(React.Component));

package/dist/es/colors/ColorInput.js

@@ -29,6 +29,7 @@ import { NumericTextBox } from '../main';
 import HexInput from './HexInput';
 import { Button } from '@progress/kendo-react-buttons';
 import { Label } from '@progress/kendo-react-labels';
+import { caretAltExpandIcon } from '@progress/kendo-svg-icons';
 import { registerForIntl, registerForLocalization, provideLocalizationService } from '@progress/kendo-react-intl';
 import { messages, colorGradientR, colorGradientHex, colorGradientA, colorGradientB, colorGradientG, colorGradientToggleInputsButton } from '../messages';
 /**
@@ -69,7 +70,7 @@ var ColorInput = /** @class */ (function (_super) {
         var toggleButtonMessage = localizationService.toLanguageString(colorGradientToggleInputsButton, messages[colorGradientToggleInputsButton]);
         return (React.createElement("div", { className: "k-colorgradient-inputs k-hstack" },
             React.createElement("div", { className: "k-vstack" },
-                React.createElement(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(Button, { "aria-label": toggleButtonMessage, fillMode: 'flat', icon: 'caret-alt-expand', svgIcon: 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/es/colors/ColorPalette.js

@@ -115,8 +115,8 @@ var ColorPaletteWithoutContext = /** @class */ (function (_super) {
         var focusedCellCoords = svc.getCellCoordsFor(this.state.focusedColor);
         var className = 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: 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: 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/es/colors/ColorPicker.js

@@ -11,13 +11,14 @@ var __assign = (this && this.__assign) || function () {
 };
 import * as React from 'react';
 import * as PropTypes from 'prop-types';
-import { classNames, Keys, useDir, getTabIndex, createPropsContext, usePropsContext, kendoThemeMaps } from '@progress/kendo-react-common';
+import { classNames, Keys, useDir, getTabIndex, createPropsContext, usePropsContext, kendoThemeMaps, svgIconPropType, IconWrap } from '@progress/kendo-react-common';
 import { validatePackage } from '@progress/kendo-react-common';
 import { packageMetadata } from '../package-metadata';
 import { Picker } from './Picker';
 import { ColorGradient } from './ColorGradient';
 import { ColorPalette, DEFAULT_PRESET, DEFAULT_TILE_SIZE } from './ColorPalette';
 import { Button } from '@progress/kendo-react-buttons';
+import { caretAltDownIcon } from '@progress/kendo-svg-icons';
 import { messages, colorPickerDropdownButtonAriaLabel } from '../messages';
 import { useLocalization } from '@progress/kendo-react-intl';
 /**
@@ -60,11 +61,11 @@ export var ColorPickerPropsContext = createPropsContext();
  * ```
  */
 export var ColorPicker = React.forwardRef(function (directProps, target) {
-    var _a, _b;
+    var _a;
     validatePackage(packageMetadata);
     var props = usePropsContext(ColorPickerPropsContext, directProps);
     var localization = 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);
@@ -81,9 +82,9 @@ export var 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;
@@ -196,7 +197,7 @@ export var ColorPicker = React.forwardRef(function (directProps, target) {
     var onPaletteChangeHandler = React.useCallback(function (event) { return onChangeHandler(event, true); }, [isControlled, onChangeHandler]);
     var dir = useDir(focusableElementRef, props.dir);
     var isValid = valid !== false;
-    return (React.createElement("span", { id: props.id, "aria-labelledby": props.ariaLabelledBy, "aria-describedby": props.ariaDescribedBy, className: 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: classNames('k-colorpicker', 'k-picker', 'k-icon-picker', (_a = {},
             _a["k-picker-".concat(kendoThemeMaps.sizeMap[size] || size)] = size,
             _a["k-picker-".concat(fillMode)] = fillMode,
             _a["k-rounded-".concat(kendoThemeMaps.roundedMap[rounded] || rounded)] = rounded,
@@ -207,12 +208,11 @@ export var ColorPicker = React.forwardRef(function (directProps, target) {
         React.createElement(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: 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: 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(Button, { tabIndex: -1, type: "button", onClick: onClickHandler, className: "k-input-button", rounded: null, icon: 'caret-alt-down', "aria-label": localization.toLanguageString(colorPickerDropdownButtonAriaLabel, messages[colorPickerDropdownButtonAriaLabel]) })), content: (React.createElement(React.Fragment, null,
+                    iconClassName && React.createElement("span", { className: classNames('k-color-preview-icon', iconClassName) }),
+                    !iconClassName && (icon || svgIcon) && React.createElement(IconWrap, { name: icon, icon: svgIcon }),
+                    React.createElement("span", { className: "k-color-preview-mask", style: { backgroundColor: value } })))), button: (React.createElement(Button, { tabIndex: -1, type: "button", onClick: onClickHandler, className: "k-input-button", rounded: null, icon: 'caret-alt-down', svgIcon: caretAltDownIcon, "aria-label": localization.toLanguageString(colorPickerDropdownButtonAriaLabel, messages[colorPickerDropdownButtonAriaLabel]) })), content: (React.createElement(React.Fragment, null,
                 (view === 'combo' || view === 'gradient') && (React.createElement(ColorGradient, __assign({}, gradientSettings, { tabIndex: 0, ref: gradientRef, value: value, onChange: onChangeHandler }))),
                 (view === 'combo' || view === 'palette') && (React.createElement(ColorPalette, __assign({}, paletteSettings, { ref: paletteRef, value: value, onChange: onPaletteChangeHandler }))))) })));
 });
@@ -223,6 +223,8 @@ ColorPicker.propTypes = {
     view: PropTypes.oneOf(['gradient', 'palette', 'combo']),
     dir: PropTypes.string,
     id: PropTypes.string,
+    icon: PropTypes.string,
+    svgIcon: svgIconPropType,
     ariaLabelledBy: PropTypes.string,
     ariaDescribedBy: PropTypes.string,
     size: PropTypes.oneOf([null, 'small', 'medium', 'large']),

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

@@ -2,9 +2,11 @@ import * as React from 'react';
 import * as PropTypes from 'prop-types';
 import { classNames, validatePackage, getTabIndex } from '@progress/kendo-react-common';
 import { ButtonGroup, Button } from '@progress/kendo-react-buttons';
+import { paletteIcon, dropletSlashIcon, dropletSliderIcon } from '@progress/kendo-svg-icons';
 import { ColorPalette, ColorGradient } from '../main';
 import { packageMetadata } from '../package-metadata';
-import { messages, flatColorPickerApplyBtn, flatColorPickerCancelBtn } from '../messages';
+import { useLocalization } from '@progress/kendo-react-intl';
+import { messages, flatColorPickerApplyBtn, flatColorPickerCancelBtn, flatColorPickerColorGradientBtn, flatColorPickerColorPaletteBtn, flatColorPickerClearBtn } from '../messages';
 ;
 ;
 /**
@@ -18,6 +20,7 @@ export var 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 = useLocalization();
     var focus = React.useCallback(function () {
         if (target.current) {
             target.current.focus();
@@ -57,7 +60,7 @@ export var 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: getTabIndex(props.tabIndex, props.disabled), className: 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: getTabIndex(props.tabIndex, props.disabled), className: classNames('k-flatcolorpicker k-coloreditor', {
             'k-disabled': props.disabled
         }, props.className), onBlur: handleFlatColorPickerBlur },
         React.createElement(React.Fragment, null,
@@ -65,22 +68,19 @@ export var 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(ButtonGroup, null,
-                            React.createElement(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(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(Button, { type: "button", "aria-label": localizationService.toLanguageString(flatColorPickerColorGradientBtn, messages[flatColorPickerColorGradientBtn]), togglable: true, fillMode: 'flat', selected: colorGradientView, onClick: function () { return handleViewChange('ColorGradient'); }, icon: "droplet-slider", svgIcon: dropletSliderIcon }),
+                            React.createElement(Button, { type: "button", "aria-label": localizationService.toLanguageString(flatColorPickerColorPaletteBtn, messages[flatColorPickerColorPaletteBtn]), togglable: true, fillMode: 'flat', selected: !colorGradientView, onClick: function () { return handleViewChange('ColorPalette'); }, icon: "palette", svgIcon: paletteIcon }))),
                     React.createElement("div", { className: "k-spacer" }),
                     React.createElement("div", { className: "k-coloreditor-header-actions k-hstack" },
                         (props.showClearButton && defaultProps.showClearButton) &&
-                            React.createElement(Button, { type: "button", fillMode: 'flat', onClick: handleResetColor },
-                                React.createElement("span", { className: "k-icon k-i-droplet-slash" })),
+                            React.createElement(Button, { type: "button", fillMode: 'flat', onClick: handleResetColor, "aria-label": localizationService.toLanguageString(flatColorPickerClearBtn, messages[flatColorPickerClearBtn]), icon: "droplet-slash", svgIcon: 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(ColorGradient, { ref: colorGradientRef, value: colorValue, onChange: handleColorChange, onFocus: handleFocus })
-                : React.createElement(ColorPalette, { value: colorValue, onChange: handleColorChange, onFocus: handleFocus })),
+                ? React.createElement(ColorGradient, { ref: colorGradientRef, role: "none", tabIndex: -1, ariaLabel: undefined, value: colorValue, onChange: handleColorChange, onFocus: handleFocus })
+                : React.createElement(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(Button, { type: "button", className: "k-coloreditor-cancel", onClick: handleCancelBtnClick }, messages[flatColorPickerCancelBtn]),

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

@@ -9,12 +9,12 @@ var __assign = (this && this.__assign) || function () {
     };
     return __assign.apply(this, arguments);
 };
-import { classNames, Icon } from '@progress/kendo-react-common';
+import { classNames, IconWrap } from '@progress/kendo-react-common';
 import * as React from 'react';
 /**
  * Represents the KendoReact InputValidationIcon component.
  */
 export var InputValidationIcon = React.forwardRef(function (props, ref) {
-    return React.createElement(Icon, __assign({ ref: ref }, props, { className: classNames('k-input-validation-icon', props.className) }));
+    return React.createElement(IconWrap, __assign({ ref: ref }, props, { className: classNames('k-input-validation-icon', props.className) }));
 });
 InputValidationIcon.displayName = 'KendoReactInputValidationIcon';

package/dist/es/maskedtextbox/MaskedTextBox.js

@@ -298,7 +298,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: 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: returnFalse, onDrop: 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: 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: returnFalse, onDrop: returnFalse }),
             React.createElement(Suffix, null)));
         return this.props.label
             ? (React.createElement(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/es/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;

package/dist/es/messages/index.js

@@ -79,6 +79,18 @@ export var flatColorPickerCancelBtn = 'flatColorPicker.cancelBtn';
  * @hidden
  */
 export var flatColorPickerApplyBtn = 'flatColorPicker.applyBtn';
+/**
+ * @hidden
+ */
+export var flatColorPickerColorGradientBtn = 'flatColorPicker.colorGradientBtn';
+/**
+ * @hidden
+ */
+export var flatColorPickerColorPaletteBtn = 'flatColorPicker.colorPaletteBtn';
+/**
+ * @hidden
+ */
+export var flatColorPickerClearBtn = 'flatColorPicker.clearBtn';
 /**
  * @hidden
  */
@@ -139,6 +151,9 @@ export var messages = (_a = {},
     _a[colorGradientToggleInputsButton] = 'Toggle colorgradient inputs',
     _a[flatColorPickerCancelBtn] = 'Cancel',
     _a[flatColorPickerApplyBtn] = 'Apply',
+    _a[flatColorPickerColorGradientBtn] = 'Color Gradient view',
+    _a[flatColorPickerColorPaletteBtn] = 'Color Palette view',
+    _a[flatColorPickerClearBtn] = 'Clear color value',
     _a[checkboxValidation] = 'Please check this box if you want to proceed!',
     _a[checkboxOptionalText] = '(Optional)',
     _a[radioButtonValidation] = 'Please select option if you want to proceed!',

package/dist/es/numerictextbox/NumericTextBox.js

@@ -13,6 +13,7 @@ import * as React from 'react';
 import * as PropTypes from 'prop-types';
 import { useInternationalization, useLocalization } from '@progress/kendo-react-intl';
 import { classNames, guid, getTabIndex, dispatchEvent, createPropsContext, usePropsContext, kendoThemeMaps, useCustomComponent } from '@progress/kendo-react-common';
+import { caretAltUpIcon, caretAltDownIcon } from '@progress/kendo-svg-icons';
 import { FloatingLabel } from '@progress/kendo-react-labels';
 import { validatePackage } from '@progress/kendo-react-common';
 import { packageMetadata } from '../package-metadata';
@@ -273,13 +274,13 @@ export var NumericTextBox = React.forwardRef(function (directProps, target) {
             _a['k-disabled'] = props.disabled,
             _a), props.className), "aria-disabled": props.disabled ? 'true' : undefined },
         React.createElement(Prefix, null),
-        React.createElement("input", { value: looseValue === null ? '' : looseValue, tabIndex: getTabIndex(props.tabIndex, props.disabled), accessKey: props.accessKey, disabled: props.disabled, title: props.title, "aria-valuemin": props.min, "aria-valuemax": props.max, "aria-label": props.ariaLabel, "aria-labelledby": props.ariaLabelledBy, "aria-describedby": props.ariaDescribedBy, placeholder: props.placeholder, spellCheck: false, autoComplete: 'off', autoCorrect: 'off', type: props.inputType || 'tel', className: 'k-input-inner', id: inputId, name: props.name, readOnly: props.readOnly, style: props.inputStyle, onChange: onChangeHandler, onFocus: onFocus, onBlur: onBlur, onKeyDown: onKeyDown, onPaste: onPasteHandler, onWheel: onWheelHandler, ref: elementRef }),
+        React.createElement("input", { role: 'spinbutton', value: looseValue === null ? '' : looseValue, tabIndex: getTabIndex(props.tabIndex, props.disabled), accessKey: props.accessKey, disabled: props.disabled, title: props.title, "aria-disabled": props.disabled ? 'true' : undefined, "aria-valuemin": props.min, "aria-valuemax": props.max, "aria-label": props.ariaLabel, "aria-labelledby": props.ariaLabelledBy, "aria-describedby": props.ariaDescribedBy, placeholder: props.placeholder, spellCheck: false, autoComplete: 'off', autoCorrect: 'off', type: props.inputType || 'tel', className: 'k-input-inner', id: inputId, name: props.name, readOnly: props.readOnly, style: props.inputStyle, onChange: onChangeHandler, onFocus: onFocus, onBlur: onBlur, onKeyDown: onKeyDown, onPaste: onPasteHandler, onWheel: onWheelHandler, ref: elementRef }),
         React.createElement(Suffix, null),
         props.children,
         props.spinners &&
             (React.createElement("span", { className: "k-input-spinner k-spin-button", onMouseDown: onMouseDown },
-                React.createElement(Button, { tabIndex: -1, type: "button", icon: 'caret-alt-up', rounded: null, className: "k-spinner-increase", "aria-label": localizationService.toLanguageString(numericIncreaseValue, messages[numericIncreaseValue]), title: localizationService.toLanguageString(numericIncreaseValue, messages[numericIncreaseValue]), onClick: onIncrease }),
-                React.createElement(Button, { tabIndex: -1, type: "button", icon: 'caret-alt-down', rounded: null, className: "k-spinner-decrease", "aria-label": localizationService.toLanguageString(numericDecreaseValue, messages[numericDecreaseValue]), title: localizationService.toLanguageString(numericDecreaseValue, messages[numericDecreaseValue]), onClick: onDecrease })))));
+                React.createElement(Button, { tabIndex: -1, type: "button", icon: 'caret-alt-up', svgIcon: caretAltUpIcon, rounded: null, className: "k-spinner-increase", "aria-label": localizationService.toLanguageString(numericIncreaseValue, messages[numericIncreaseValue]), title: localizationService.toLanguageString(numericIncreaseValue, messages[numericIncreaseValue]), onClick: onIncrease }),
+                React.createElement(Button, { tabIndex: -1, type: "button", icon: 'caret-alt-down', svgIcon: caretAltDownIcon, rounded: null, className: "k-spinner-decrease", "aria-label": localizationService.toLanguageString(numericDecreaseValue, messages[numericDecreaseValue]), title: localizationService.toLanguageString(numericDecreaseValue, messages[numericDecreaseValue]), onClick: onDecrease })))));
     return props.label
         ? (React.createElement(FloatingLabel, { label: props.label, editorId: inputId, editorValue: looseValue === null ? '' : looseValue, editorValid: isValid, editorDisabled: props.disabled, editorPlaceholder: props.placeholder, children: numerictextbox, style: { width: props.width }, dir: props.dir }))
         : numerictextbox;

package/dist/es/package-metadata.js

@@ -5,7 +5,7 @@ export var packageMetadata = {
     name: '@progress/kendo-react-inputs',
     productName: 'KendoReact',
     productCodes: ['KENDOUIREACT', 'KENDOUICOMPLETE'],
-    publishDate: 1673300705,
+    publishDate: 1673462421,
     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/es/rating/Rating.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { FormComponentProps } from '@progress/kendo-react-common';
+import { FormComponentProps, SVGIcon } from '@progress/kendo-react-common';
 import { RatingItemProps } from './RatingItem';
 import { RatingKeyboardEvent, RatingItemMouseEvent, RatingItemFocusEvent } from './models';
 /**
@@ -70,6 +70,14 @@ export interface RatingProps extends FormComponentProps {
      * Sets custom Rating icon, by default - star. [See example]({% slug disabled_rating %})
      */
     icon?: string;
+    /**
+     * Sets custom Rating SVG icon.
+     */
+    svgIcon?: SVGIcon;
+    /**
+     * Sets custom Rating SVG icon.
+     */
+    svgIconOutline?: SVGIcon;
     /**
      * Determines the selection mode. By default set to `continues`. [See example]({% slug icon_rating %})
      */