@progress/kendo-react-inputs 5.5.1-dev.202207141327 → 5.6.0-dev.202208040930

package/dist/npm/messages/index.js

@@ -1,7 +1,7 @@
 "use strict";
 var _a;
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.messages = exports.colorPickerDropdownButtonAriaLabel = exports.switchValidation = exports.radioButtonValidation = exports.checkboxOptionalText = exports.checkboxValidation = exports.flatColorPickerApplyBtn = exports.flatColorPickerCancelBtn = exports.colorGradientFail = exports.colorGradientPass = exports.colorGradientAAALevel = exports.colorGradientAALevel = exports.colorGradientContrastRatio = exports.colorGradientHex = exports.colorGradientA = exports.colorGradientB = exports.colorGradientG = exports.colorGradientR = exports.sliderDragTitle = exports.sliderDecreaseValue = exports.sliderIncreaseValue = exports.numericDecreaseValue = exports.numericIncreaseValue = void 0;
+exports.messages = exports.ratingAriaLabel = exports.colorPickerDropdownButtonAriaLabel = exports.switchValidation = exports.radioButtonValidation = exports.checkboxOptionalText = exports.checkboxValidation = exports.flatColorPickerApplyBtn = exports.flatColorPickerCancelBtn = exports.colorGradientToggleInputsButton = exports.colorGradientAlphaSliderLabel = exports.colorGradientHueSliderLabel = exports.colorGradientFail = exports.colorGradientPass = exports.colorGradientAAALevel = exports.colorGradientAALevel = exports.colorGradientContrastRatio = exports.colorGradientHex = exports.colorGradientA = exports.colorGradientB = exports.colorGradientG = exports.colorGradientR = exports.sliderDragTitle = exports.sliderDecreaseValue = exports.sliderIncreaseValue = exports.numericDecreaseValue = exports.numericIncreaseValue = void 0;
 /**
  * @hidden
  */
@@ -62,6 +62,18 @@ exports.colorGradientPass = 'colorGradient.colorGradientPass';
  * @hidden
  */
 exports.colorGradientFail = 'colorGradient.colorGradientFail';
+/**
+ * @hidden
+ */
+exports.colorGradientHueSliderLabel = 'colorGradient.hueSliderLabel';
+/**
+ * @hidden
+ */
+exports.colorGradientAlphaSliderLabel = 'colorGradient.alphaSliderLabel';
+/**
+ * @hidden
+ */
+exports.colorGradientToggleInputsButton = 'colorGradient.toggleInputsButton';
 /**
  * @hidden
  */
@@ -90,6 +102,10 @@ exports.switchValidation = 'switch.validation';
  * @hidden
  */
 exports.colorPickerDropdownButtonAriaLabel = 'colorPicker.dropdownButtonAriaLabel';
+/**
+ * @hidden
+ */
+exports.ratingAriaLabel = 'rating.ariaLabel';
 /**
  * @hidden
  */
@@ -109,6 +125,9 @@ exports.messages = (_a = {},
     _a[exports.colorGradientAAALevel] = 'AAA',
     _a[exports.colorGradientPass] = 'Pass',
     _a[exports.colorGradientFail] = 'Fail',
+    _a[exports.colorGradientHueSliderLabel] = 'Hue slider',
+    _a[exports.colorGradientAlphaSliderLabel] = 'Alpha slider',
+    _a[exports.colorGradientToggleInputsButton] = 'Toggle colorgradient inputs',
     _a[exports.flatColorPickerCancelBtn] = 'Cancel',
     _a[exports.flatColorPickerApplyBtn] = 'Apply',
     _a[exports.checkboxValidation] = 'Please check this box if you want to proceed!',
@@ -116,4 +135,5 @@ exports.messages = (_a = {},
     _a[exports.radioButtonValidation] = 'Please select option if you want to proceed!',
     _a[exports.switchValidation] = 'Please turn on if you want to proceed!',
     _a[exports.colorPickerDropdownButtonAriaLabel] = 'Select',
+    _a[exports.ratingAriaLabel] = 'Rating',
     _a);

package/dist/npm/numerictextbox/interfaces/NumericTextBoxProps.d.ts

@@ -4,7 +4,7 @@ import { NumberFormatOptions } from '@progress/kendo-react-intl';
 import { NumericTextBoxChangeEvent } from './NumericTextBoxChangeEvent';
 import { NumericTextBoxFocusEvent } from './NumericTextBoxFocusEvent';
 import { NumericTextBoxBlurEvent } from './NumericTextBoxBlurEvent';
-declare type NumericTextBoxInputType = 'tel' | 'text';
+declare type NumericTextBoxInputType = 'tel' | 'text' | 'number';
 /**
  * Represents the props of the [KendoReact NumericTextBox component]({% slug overview_numerictextbox %}).
  */

package/dist/npm/package-metadata.js

@@ -8,7 +8,7 @@ exports.packageMetadata = {
     name: '@progress/kendo-react-inputs',
     productName: 'KendoReact',
     productCodes: ['KENDOUIREACT', 'KENDOUICOMPLETE'],
-    publishDate: 1657804319,
+    publishDate: 1659604208,
     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/range-slider/RangeSlider.js

@@ -215,12 +215,12 @@ exports.RangeSlider = React.forwardRef(function (directProps, ref) {
         setCurrentDrag('');
     };
     (0, kendo_react_common_1.useDraggable)(sliderTrackWrapRef, { onPress: handleTrackPress, onDrag: handleTrackDrag, onRelease: handleTrackRelease });
-    return (React.createElement("div", { role: "slider", id: props.id, style: props.style, ref: sliderRef, dir: dir, className: (0, kendo_react_common_1.classNames)('k-widget k-slider', {
+    return (React.createElement("div", { id: props.id, style: props.style, ref: sliderRef, dir: dir, className: (0, kendo_react_common_1.classNames)('k-widget k-slider', {
             'k-rtl': dir === 'rtl',
             'k-disabled': props.disabled,
             'k-slider-vertical': props.vertical,
             'k-slider-horizontal': !props.vertical
-        }, props.className), "aria-labelledby": props.ariaLabelledBy, "aria-describedby": props.ariaDescribedBy },
+        }, props.className) },
         React.createElement("div", { ref: sliderTrackWrapRef, className: "k-slider-track-wrap", style: __assign({ flexGrow: 1, position: 'relative', touchAction: 'none' }, trackStyles) },
             props.children && (React.createElement("ul", { className: "k-reset k-slider-items", style: __assign({}, sliderItemsStyle) }, React.Children.map(props.children, function (child) {
                 return child && React.cloneElement(child, {
@@ -238,11 +238,11 @@ exports.RangeSlider = React.forwardRef(function (directProps, ref) {
                             _b[dir === 'rtl' ? 'right' : 'left'] = percentStart + '%',
                             _b.width = (percentEnd - percentStart) + '%',
                             _b) }),
-                React.createElement("a", { ref: startHandle, role: "slider", tabIndex: (0, kendo_react_common_1.getTabIndex)(props.startTabIndex, props.disabled, undefined), "aria-valuemin": min, "aria-valuemax": Math.max(max, value.end), "aria-valuenow": value.start, "aria-disabled": props.disabled ? 'true' : undefined, className: "k-draghandle", title: localization.toLanguageString(messages_1.sliderDragTitle, messages_1.messages[messages_1.sliderDragTitle]), style: props.vertical
+                React.createElement("span", { ref: startHandle, role: "slider", tabIndex: (0, kendo_react_common_1.getTabIndex)(props.startTabIndex, props.disabled, undefined), "aria-valuemin": min, "aria-valuemax": Math.max(max, value.end), "aria-valuenow": value.start, "aria-disabled": props.disabled ? 'true' : undefined, "aria-valuetext": "".concat(value.start, " - ").concat(value.end), className: "k-draghandle", title: localization.toLanguageString(messages_1.sliderDragTitle, messages_1.messages[messages_1.sliderDragTitle]), style: props.vertical
                         ? { bottom: 'calc(' + percentStart + '%)', zIndex: 1 }
                         : dir === 'rtl' ? { right: 'calc(' + percentStart + '% - 13px)', zIndex: 1 }
                             : { left: 'calc(' + percentStart + '%)', zIndex: 1 }, onKeyDown: handleStartKeyDown }),
-                React.createElement("a", { ref: endHandle, role: "slider", tabIndex: (0, kendo_react_common_1.getTabIndex)(props.endTabIndex, props.disabled, undefined), "aria-valuemin": Math.min(min, value.start), "aria-valuemax": max, "aria-valuenow": value.end, "aria-disabled": props.disabled ? 'true' : undefined, className: "k-draghandle", title: localization.toLanguageString(messages_1.sliderDragTitle, messages_1.messages[messages_1.sliderDragTitle]), style: props.vertical
+                React.createElement("span", { ref: endHandle, role: "slider", tabIndex: (0, kendo_react_common_1.getTabIndex)(props.endTabIndex, props.disabled, undefined), "aria-valuemin": Math.min(min, value.start), "aria-valuemax": max, "aria-valuenow": value.end, "aria-disabled": props.disabled ? 'true' : undefined, "aria-valuetext": "".concat(value.start, " - ").concat(value.end), className: "k-draghandle", title: localization.toLanguageString(messages_1.sliderDragTitle, messages_1.messages[messages_1.sliderDragTitle]), style: props.vertical
                         ? { bottom: 'calc(' + percentEnd + '%)', zIndex: 1 }
                         : dir === 'rtl' ? { right: 'calc(' + percentEnd + '% - 13px)', zIndex: 1 }
                             : { left: 'calc(' + percentEnd + '%)', zIndex: 1 }, onKeyDown: handleEndKeyDown })))));

package/dist/npm/rating/Rating.js

@@ -18,6 +18,8 @@ var kendo_react_common_1 = require("@progress/kendo-react-common");
 var RatingItem_1 = require("./RatingItem");
 var rating_reducer_1 = require("./rating-reducer");
 var utils_1 = require("./utils");
+var messages_1 = require("../messages");
+var kendo_react_intl_1 = require("@progress/kendo-react-intl");
 /**
  * @hidden
  */
@@ -48,6 +50,7 @@ exports.RatingPropsContext = (0, kendo_react_common_1.createPropsContext)();
 exports.Rating = React.forwardRef(function (directProps, ref) {
     var _a, _b, _c, _d;
     var props = (0, kendo_react_common_1.usePropsContext)(exports.RatingPropsContext, directProps);
+    var localization = (0, kendo_react_intl_1.useLocalization)();
     var target = React.useRef(null);
     var ratingRef = React.useRef(null);
     var dir = (0, kendo_react_common_1.useDir)(ratingRef, props.dir);
@@ -228,7 +231,7 @@ exports.Rating = React.forwardRef(function (directProps, ref) {
             'k-rtl': dir === 'rtl',
             'k-state-readonly': readonly,
             'k-disabled': disabled
-        }, props.className), onKeyDown: handleKeyDown, onFocus: handleFocus, onBlur: handleBlur, "aria-valuemin": min, "aria-valuemax": max, "aria-valuenow": value !== null ? value : undefined, "aria-disabled": disabled ? 'true' : undefined, "aria-labelledby": props.ariaLabelledBy, "aria-describedby": props.ariaDescribedBy },
+        }, props.className), onKeyDown: handleKeyDown, onFocus: handleFocus, onBlur: handleBlur, "aria-valuemin": min, "aria-valuemax": max, "aria-valuenow": value !== null ? value : undefined, "aria-disabled": disabled ? 'true' : undefined, "aria-label": localization.toLanguageString(messages_1.ratingAriaLabel, messages_1.messages[messages_1.ratingAriaLabel]), "aria-labelledby": props.ariaLabelledBy, "aria-describedby": props.ariaDescribedBy },
         React.createElement("input", { id: 'rating', className: 'k-hidden', readOnly: readonly, disabled: disabled }),
         React.createElement("span", { className: 'k-rating-container' }, items),
         props.label &&

package/dist/npm/slider/Slider.d.ts

@@ -91,6 +91,10 @@ export interface SliderProps extends FormComponentProps {
      * Identifies the element(s) which will label the component.
      */
     ariaLabelledBy?: string;
+    /**
+     * The accessible label of the component.
+     */
+    ariaLabel?: string;
     dir?: Direction;
 }
 /**
@@ -115,6 +119,7 @@ export declare class SliderWithoutContext extends React.Component<SliderProps, S
         id: PropTypes.Requireable<string>;
         ariaLabelledBy: PropTypes.Requireable<string>;
         ariaDescribedBy: PropTypes.Requireable<string>;
+        ariaLabel: PropTypes.Requireable<string>;
     };
     /**
      * @hidden

package/dist/npm/slider/Slider.js

@@ -179,7 +179,7 @@ var SliderWithoutContext = /** @class */ (function (_super) {
         var sliderItemsStyle = this.props.vertical
             ? { paddingTop: 0, height: '100%' }
             : {};
-        return (React.createElement("div", { ref: function (el) { return _this._element = el; }, "aria-valuemin": this.props.min, "aria-valuemax": this.props.max, "aria-valuenow": this.state.value, "aria-disabled": this.props.disabled ? 'true' : undefined, "aria-labelledby": this.props.ariaLabelledBy, "aria-describedby": this.props.ariaDescribedBy, dir: this.state.dir, role: "slider", id: this.props.id, style: __assign({ gap: 0 }, this.props.style), tabIndex: (0, kendo_react_common_1.getTabIndex)(this.props.tabIndex, this.props.disabled, undefined), onFocus: this.onFocus, onBlur: this.onBlur, onKeyDown: this.onKeyDown, className: (0, kendo_react_common_1.classNames)('k-slider k-widget', {
+        return (React.createElement("div", { ref: function (el) { return _this._element = el; }, dir: this.state.dir, id: this.props.id, style: __assign({ gap: 0 }, this.props.style), onFocus: this.onFocus, onBlur: this.onBlur, onKeyDown: this.onKeyDown, className: (0, kendo_react_common_1.classNames)('k-slider k-widget', {
                 'k-focus': this.state.focused,
                 'k-disabled': this.props.disabled,
                 'k-slider-horizontal': !this.props.vertical,
@@ -201,7 +201,7 @@ var SliderWithoutContext = /** @class */ (function (_super) {
                             React.createElement("div", { className: "k-slider-selection", style: this.props.vertical
                                     ? { height: percentValue + '%' }
                                     : { width: percentValue + '%' } }),
-                            React.createElement("a", { className: "k-draghandle", title: lS.toLanguageString(messages_1.sliderDragTitle, messages_1.messages[messages_1.sliderDragTitle]), style: this.props.vertical
+                            React.createElement("span", { role: "slider", "aria-valuemin": this.props.min, "aria-valuemax": this.props.max, "aria-valuenow": this.state.value, "aria-valuetext": String(this.state.value), "aria-orientation": this.props.vertical ? 'vertical' : undefined, "aria-disabled": this.props.disabled ? 'true' : undefined, "aria-labelledby": this.props.ariaLabelledBy, "aria-describedby": this.props.ariaDescribedBy, "aria-label": this.props.ariaLabel, tabIndex: (0, kendo_react_common_1.getTabIndex)(this.props.tabIndex, this.props.disabled, undefined), className: "k-draghandle", title: lS.toLanguageString(messages_1.sliderDragTitle, messages_1.messages[messages_1.sliderDragTitle]), style: this.props.vertical
                                     ? { bottom: 'calc(' + percentValue + '%)', zIndex: 1 }
                                     : this.state.dir === 'rtl' ? { right: 'calc(' + percentValue + '% - 13px)', zIndex: 1 }
                                         : { left: 'calc(' + percentValue + '%)', zIndex: 1 } })))))));
@@ -232,7 +232,8 @@ var SliderWithoutContext = /** @class */ (function (_super) {
         vertical: PropTypes.bool,
         id: PropTypes.string,
         ariaLabelledBy: PropTypes.string,
-        ariaDescribedBy: PropTypes.string
+        ariaDescribedBy: PropTypes.string,
+        ariaLabel: PropTypes.string
         // TODO: validation when buttons is set to true, but no step is provided
     };
     return SliderWithoutContext;

package/dist/npm/slider/SliderLabel.js

@@ -29,7 +29,7 @@ var SliderLabel = function (props) {
         ? { bottom: "".concat(props.position, "%") }
         : (_a = {}, _a[dir === 'rtl' ? 'right' : 'left'] = "".concat(props.position, "%"), _a);
     var tickStyle = props.vertical ? 'k-tick-vertical' : 'k-tick-horizontal';
-    return (React.createElement("li", { ref: sliderLabelRef, role: "presentation", className: "k-tick k-tick-large ".concat(tickStyle), title: props.title, style: __assign({ zIndex: 1, position: 'absolute' }, style) },
+    return (React.createElement("li", { ref: sliderLabelRef, className: "k-tick k-tick-large ".concat(tickStyle), title: props.title, style: __assign({ zIndex: 1, position: 'absolute' }, style) },
         React.createElement("span", __assign({}, (_b = {}, _b[exports.SLIDER_LABEL_ATTRIBUTE] = true, _b), { className: "k-label", onClick: props.onClick }), props.children)));
 };
 exports.SliderLabel = SliderLabel;