@progress/kendo-react-inputs 5.3.0-dev.202205040828 → 5.3.0-dev.202205051350

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (35) hide show
  1. package/dist/cdn/js/kendo-react-inputs.js +1 -1
  2. package/dist/es/checkbox/Checkbox.js +2 -2
  3. package/dist/es/colors/ColorGradient.js +1 -1
  4. package/dist/es/colors/ColorPalette.js +2 -2
  5. package/dist/es/colors/ColorPicker.js +1 -2
  6. package/dist/es/colors/FlatColorPicker.js +1 -1
  7. package/dist/es/input/Input.js +2 -2
  8. package/dist/es/maskedtextbox/MaskedTextBox.js +1 -2
  9. package/dist/es/numerictextbox/NumericTextBox.js +0 -1
  10. package/dist/es/package-metadata.js +1 -1
  11. package/dist/es/radiobutton/RadioButton.js +0 -1
  12. package/dist/es/radiobutton/RadioGroup.js +1 -1
  13. package/dist/es/range-slider/RangeSlider.js +1 -1
  14. package/dist/es/rating/Rating.js +1 -1
  15. package/dist/es/rating/RatingItem.js +1 -1
  16. package/dist/es/slider/Slider.js +2 -2
  17. package/dist/es/textarea/TextArea.js +0 -1
  18. package/dist/npm/checkbox/Checkbox.js +2 -2
  19. package/dist/npm/colors/ColorGradient.js +1 -1
  20. package/dist/npm/colors/ColorPalette.js +2 -2
  21. package/dist/npm/colors/ColorPicker.js +1 -2
  22. package/dist/npm/colors/FlatColorPicker.js +1 -1
  23. package/dist/npm/input/Input.js +2 -2
  24. package/dist/npm/maskedtextbox/MaskedTextBox.js +1 -2
  25. package/dist/npm/numerictextbox/NumericTextBox.js +0 -1
  26. package/dist/npm/package-metadata.js +1 -1
  27. package/dist/npm/radiobutton/RadioButton.js +0 -1
  28. package/dist/npm/radiobutton/RadioGroup.js +1 -1
  29. package/dist/npm/range-slider/RangeSlider.js +1 -1
  30. package/dist/npm/rating/Rating.js +1 -1
  31. package/dist/npm/rating/RatingItem.js +1 -1
  32. package/dist/npm/slider/Slider.js +2 -2
  33. package/dist/npm/textarea/TextArea.js +0 -1
  34. package/dist/systemjs/kendo-react-inputs.js +1 -1
  35. package/package.json +14 -14
package/dist/es/checkbox/Checkbox.js CHANGED
@@ -141,12 +141,12 @@ export var Checkbox = React.forwardRef(function (directProps, target) {
141
141
  }
142
142
  }, [onBlur, disabled, getImperativeHandle]);
143
143
  var dir = useDir(elementRef, props.dir);
144
- var checkboxClasses = classNames({ 'k-state-disabled': disabled }, className);
144
+ var checkboxClasses = classNames({ 'k-disabled': disabled }, className);
145
145
  var inputProps = __assign({ type: 'checkbox', className: classNames('k-checkbox', (_a = {},
146
146
  _a["k-checkbox-" + (kendoThemeMaps.sizeMap[size] || size)] = size,
147
147
  _a["k-rounded-" + (kendoThemeMaps.roundedMap[rounded] || rounded)] = rounded,
148
148
  _a['k-indeterminate'] = indeterminateProp,
149
- _a['k-state-invalid k-invalid'] = !(isValid || validityStyles !== undefined || validityStyles === true),
149
+ _a['k-invalid k-invalid'] = !(isValid || validityStyles !== undefined || validityStyles === true),
150
150
  _a)), ref: elementRef, name: name, id: id || calculatedId, 'aria-labelledby': ariaLabelledBy, 'aria-describedby': ariaDescribedBy, checked: Boolean(checkedProp), disabled: disabled, tabIndex: getTabIndex(tabIndex, disabled), role: 'checkbox', required: required !== undefined ? required : false, 'aria-checked': currentChecked || checkedProp ?
151
151
  true :
152
152
  indeterminateProp ?
package/dist/es/colors/ColorGradient.js CHANGED
@@ -232,7 +232,7 @@ var ColorGradientWithoutContext = /** @class */ (function (_super) {
232
232
  */
233
233
  ColorGradientWithoutContext.prototype.render = function () {
234
234
  var _this = this;
235
- var className = classNames('k-colorgradient', { 'k-state-disabled': this.props.disabled });
235
+ var className = classNames('k-colorgradient', { 'k-disabled': this.props.disabled });
236
236
  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 },
237
237
  React.createElement("div", { className: "k-colorgradient-canvas k-hstack" },
238
238
  React.createElement("div", { className: "k-hsv-rectangle", style: { background: this.state.backgroundColor } },
package/dist/es/colors/ColorPalette.js CHANGED
@@ -107,7 +107,7 @@ var ColorPaletteWithoutContext = /** @class */ (function (_super) {
107
107
  svc.setColorMatrix(paletteInfo.colors, paletteInfo.columns);
108
108
  var selectedCellCoords = svc.getCellCoordsFor(this.state.selectedColor);
109
109
  var focusedCellCoords = svc.getCellCoordsFor(this.state.focusedColor);
110
- var className = classNames('k-colorpalette', { 'k-state-disabled': this.props.disabled });
110
+ var className = classNames('k-colorpalette', { 'k-disabled': this.props.disabled });
111
111
  if (paletteInfo.colors.length) {
112
112
  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-activedescendant": selectedCellCoords && this.createCellId(selectedCellCoords), "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; } },
113
113
  React.createElement("div", { className: "k-colorpalette-table-wrap", role: "grid" },
@@ -207,7 +207,7 @@ var ColorPaletteWithoutContext = /** @class */ (function (_super) {
207
207
  return columns.map(function (color, i) {
208
208
  var isSelected = rowIsSelected && selectedColumn === i;
209
209
  var className = classNames('k-colorpalette-tile', {
210
- 'k-state-selected': isSelected,
210
+ 'k-selected': isSelected,
211
211
  'k-state-focus': rowIsFocused && focusedColumn === i
212
212
  });
213
213
  return (React.createElement("td", { className: className, "aria-label": color, "aria-selected": isSelected ? true : _this.props.disabled ? undefined : false, style: { backgroundColor: color, width: width, height: height, minWidth: width }, onClick: function (event) { return _this.onColorClick(color, event); }, id: _this.createCellId({ row: rowIndex, col: i }), key: i }));
package/dist/es/colors/ColorPicker.js CHANGED
@@ -197,7 +197,6 @@ export var ColorPicker = React.forwardRef(function (directProps, target) {
197
197
  _a["k-picker-" + (kendoThemeMaps.sizeMap[size] || size)] = size,
198
198
  _a["k-picker-" + fillMode] = fillMode,
199
199
  _a["k-rounded-" + (kendoThemeMaps.roundedMap[rounded] || rounded)] = rounded,
200
- _a['k-valid'] = isValid,
201
200
  _a['k-invalid'] = !isValid,
202
201
  _a['k-disabled'] = disabled,
203
202
  _a['k-focus'] = focused,
@@ -210,7 +209,7 @@ export var ColorPicker = React.forwardRef(function (directProps, target) {
210
209
  (iconClassName || icon) && React.createElement("span", { className: classNames('k-color-preview-icon', iconClassName, (_b = {},
211
210
  _b["k-icon k-i-" + icon] = (icon && !iconClassName),
212
211
  _b)) }),
213
- 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", icon: 'arrow-s' })), content: (React.createElement(React.Fragment, null,
212
+ 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: 'arrow-s' })), content: (React.createElement(React.Fragment, null,
214
213
  (view === 'combo' || view === 'gradient') && (React.createElement(ColorGradient, __assign({}, gradientSettings, { tabIndex: 0, ref: gradientRef, value: value, onChange: onChangeHandler }))),
215
214
  (view === 'combo' || view === 'palette') && (React.createElement(ColorPalette, __assign({}, paletteSettings, { ref: paletteRef, value: value, onChange: onPaletteChangeHandler }))))) })));
216
215
  });
package/dist/es/colors/FlatColorPicker.js CHANGED
@@ -58,7 +58,7 @@ export var FlatColorPicker = React.forwardRef(function (props, ref) {
58
58
  setPrevColor(colorValue);
59
59
  }, [colorValue]);
60
60
  return (React.createElement("div", { id: props.id, style: props.style, ref: flatColorPickerRef, tabIndex: getTabIndex(props.tabIndex, props.disabled), className: classNames('k-flatcolorpicker k-coloreditor', {
61
- 'k-state-disabled': props.disabled
61
+ 'k-disabled': props.disabled
62
62
  }, props.className), onBlur: handleFlatColorPickerBlur },
63
63
  props.header ||
64
64
  React.createElement("div", { className: "k-coloreditor-header k-hstack" },
package/dist/es/input/Input.js CHANGED
@@ -94,8 +94,8 @@ var InputWithoutContext = /** @class */ (function (_super) {
94
94
  _this.handleAutoFill = function (e) {
95
95
  if (e.animationName === 'autoFillStart') {
96
96
  var parent_1 = e.target.parentNode;
97
- if (parent_1 && parent_1.classList.contains('k-state-empty')) {
98
- parent_1.classList.remove('k-state-empty');
97
+ if (parent_1 && parent_1.classList.contains('k-empty')) {
98
+ parent_1.classList.remove('k-empty');
99
99
  }
100
100
  }
101
101
  };
package/dist/es/maskedtextbox/MaskedTextBox.js CHANGED
@@ -287,13 +287,12 @@ var MaskedTextBoxWithoutContext = /** @class */ (function (_super) {
287
287
  _a["k-input-" + (kendoThemeMaps.sizeMap[size] || size)] = size,
288
288
  _a["k-input-" + fillMode] = fillMode,
289
289
  _a["k-rounded-" + (kendoThemeMaps.roundedMap[rounded] || rounded)] = rounded,
290
- _a['k-valid'] = isValid,
291
290
  _a['k-invalid'] = !isValid,
292
291
  _a['k-required'] = this.required,
293
292
  _a['k-disabled'] = this.props.disabled,
294
293
  _a), this.props.className), style: !this.props.label
295
294
  ? __assign({ width: this.props.width }, style) : style },
296
- React.createElement("input", { type: "text", autoComplete: "off", autoCorrect: "off", autoCapitalize: "off", spellCheck: false, className: "k-input 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 })));
295
+ 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 })));
297
296
  return this.props.label
298
297
  ? (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 }))
299
298
  : component;
package/dist/es/numerictextbox/NumericTextBox.js CHANGED
@@ -264,7 +264,6 @@ export var NumericTextBox = React.forwardRef(function (directProps, target) {
264
264
  _a["k-input-" + (kendoThemeMaps.sizeMap[props.size] || props.size)] = props.size,
265
265
  _a["k-input-" + props.fillMode] = props.fillMode,
266
266
  _a["k-rounded-" + (kendoThemeMaps.roundedMap[props.rounded] || props.rounded)] = props.rounded,
267
- _a['k-valid'] = isValid,
268
267
  _a['k-invalid'] = !isValid,
269
268
  _a['k-required'] = props.required,
270
269
  _a['k-disabled'] = props.disabled,
package/dist/es/package-metadata.js CHANGED
@@ -5,7 +5,7 @@ export var packageMetadata = {
5
5
  name: '@progress/kendo-react-inputs',
6
6
  productName: 'KendoReact',
7
7
  productCodes: ['KENDOUIREACT', 'KENDOUICOMPLETE'],
8
- publishDate: 1651652049,
8
+ publishDate: 1651757599,
9
9
  version: '',
10
10
  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'
11
11
  };
package/dist/es/radiobutton/RadioButton.js CHANGED
@@ -68,7 +68,6 @@ export var RadioButton = React.forwardRef(function (directProps, target) {
68
68
  }, [onBlur, disabled]);
69
69
  var inputProps = __assign({ type: 'radio', id: id || calculatedId, name: name, className: classNames('k-radio', (_a = {},
70
70
  _a["k-radio-" + (kendoThemeMaps.sizeMap[size] || size)] = size,
71
- _a['k-state-invalid'] = valid === false,
72
71
  _a['k-invalid'] = valid === false,
73
72
  _a), className), ref: elementRef, disabled: disabled, tabIndex: getTabIndex(tabIndex, disabled), checked: checked, style: style, 'aria-describedby': ariaDescribedBy, value: value, onChange: handleChange, onFocus: handleFocus, onBlur: handleBlur }, others);
74
73
  var radioButtonLabel = (React.createElement(React.Fragment, null, label !== undefined ? (React.createElement("label", { className: 'k-radio-label', htmlFor: id || calculatedId, style: { userSelect: 'none' }, "aria-label": label }, label)) : null));
package/dist/es/radiobutton/RadioGroup.js CHANGED
@@ -74,7 +74,7 @@ export var RadioGroup = React.forwardRef(function (directProps, target) {
74
74
  : (noOptionChecked && index === 0) || isCurrentlyChecked
75
75
  ? 0
76
76
  : -1, index: index, name: name || radioGroupName, onChange: handleChange, onFocus: handleFocus });
77
- return (React.createElement(Item, { className: classNames('k-radio-item', { 'k-state-disabled': radioButtonProps.disabled || disabled }), key: index, role: 'radio' },
77
+ return (React.createElement(Item, { className: classNames('k-radio-item', { 'k-disabled': radioButtonProps.disabled || disabled }), key: index, role: 'radio' },
78
78
  React.createElement(RadioButton, __assign({}, radioButtonProps))));
79
79
  }));
80
80
  return (React.createElement("ul", { role: "radiogroup", className: radioGroupClasses, ref: elementRef, dir: dir, style: style, "aria-labelledby": ariaLabelledBy, "aria-describedby": ariaDescribedBy }, radioOptions));
package/dist/es/range-slider/RangeSlider.js CHANGED
@@ -215,7 +215,7 @@ export var RangeSlider = React.forwardRef(function (directProps, ref) {
215
215
  useDraggable(sliderTrackWrapRef, { onPress: handleTrackPress, onDrag: handleTrackDrag, onRelease: handleTrackRelease });
216
216
  return (React.createElement("div", { role: "slider", id: props.id, style: props.style, ref: sliderRef, dir: dir, className: classNames('k-widget k-slider', {
217
217
  'k-rtl': dir === 'rtl',
218
- 'k-state-disabled': props.disabled,
218
+ 'k-disabled': props.disabled,
219
219
  'k-slider-vertical': props.vertical,
220
220
  'k-slider-horizontal': !props.vertical
221
221
  }, props.className), "aria-labelledby": props.ariaLabelledBy, "aria-describedby": props.ariaDescribedBy },
package/dist/es/rating/Rating.js CHANGED
@@ -221,7 +221,7 @@ export var Rating = React.forwardRef(function (directProps, ref) {
221
221
  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', {
222
222
  'k-rtl': dir === 'rtl',
223
223
  'k-state-readonly': readonly,
224
- 'k-state-disabled': disabled
224
+ 'k-disabled': disabled
225
225
  }, 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 },
226
226
  React.createElement("input", { id: 'rating', className: 'k-hidden', readOnly: readonly, disabled: disabled }),
227
227
  React.createElement("span", { className: 'k-rating-container' }, items),
package/dist/es/rating/RatingItem.js CHANGED
@@ -73,7 +73,7 @@ export var RatingItem = React.forwardRef(function (props, ref) {
73
73
  }, [props.onMouseLeave]);
74
74
  return (React.createElement("span", { id: props.id, ref: element, dir: dir, "data-half": props.half, tabIndex: props.tabIndex, title: props.title, style: props.style, className: classNames('k-rating-item', {
75
75
  'k-rtl': dir === 'rtl',
76
- 'k-state-selected': props.selected,
76
+ 'k-selected': props.selected,
77
77
  'k-state-hovered': props.hovered
78
78
  }, props.className), onClick: handleClick, onKeyDown: handleKeyDown, onFocus: handleFocus, onBlur: handleBlur, onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, onMouseMove: handleMouseMove }, props.children));
79
79
  });
package/dist/es/slider/Slider.js CHANGED
@@ -173,8 +173,8 @@ var SliderWithoutContext = /** @class */ (function (_super) {
173
173
  ? { paddingTop: 0, height: '100%' }
174
174
  : {};
175
175
  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: getTabIndex(this.props.tabIndex, this.props.disabled, undefined), onFocus: this.onFocus, onBlur: this.onBlur, onKeyDown: this.onKeyDown, className: classNames('k-slider k-widget', {
176
- 'k-state-focused': this.state.focused,
177
- 'k-state-disabled': this.props.disabled,
176
+ 'k-focus': this.state.focused,
177
+ 'k-disabled': this.props.disabled,
178
178
  'k-slider-horizontal': !this.props.vertical,
179
179
  'k-slider-vertical': this.props.vertical
180
180
  }, this.props.className) },
package/dist/es/textarea/TextArea.js CHANGED
@@ -113,7 +113,6 @@ export var TextArea = React.forwardRef(function (directProps, target) {
113
113
  _a["k-input-" + (kendoThemeMaps.sizeMap[size] || size)] = size,
114
114
  _a["k-input-" + fillMode] = fillMode,
115
115
  _a["k-rounded-" + (kendoThemeMaps.roundedMap[rounded] || rounded)] = rounded,
116
- _a['k-valid'] = (isValid || validityStyles !== undefined || validityStyles === true),
117
116
  _a['k-invalid'] = !(isValid || validityStyles !== undefined || validityStyles === true),
118
117
  _a['k-required'] = required,
119
118
  _a['k-disabled'] = disabled,
package/dist/npm/checkbox/Checkbox.js CHANGED
@@ -143,12 +143,12 @@ exports.Checkbox = React.forwardRef(function (directProps, target) {
143
143
  }
144
144
  }, [onBlur, disabled, getImperativeHandle]);
145
145
  var dir = kendo_react_common_1.useDir(elementRef, props.dir);
146
- var checkboxClasses = kendo_react_common_1.classNames({ 'k-state-disabled': disabled }, className);
146
+ var checkboxClasses = kendo_react_common_1.classNames({ 'k-disabled': disabled }, className);
147
147
  var inputProps = __assign({ type: 'checkbox', className: kendo_react_common_1.classNames('k-checkbox', (_a = {},
148
148
  _a["k-checkbox-" + (kendo_react_common_1.kendoThemeMaps.sizeMap[size] || size)] = size,
149
149
  _a["k-rounded-" + (kendo_react_common_1.kendoThemeMaps.roundedMap[rounded] || rounded)] = rounded,
150
150
  _a['k-indeterminate'] = indeterminateProp,
151
- _a['k-state-invalid k-invalid'] = !(isValid || validityStyles !== undefined || validityStyles === true),
151
+ _a['k-invalid k-invalid'] = !(isValid || validityStyles !== undefined || validityStyles === true),
152
152
  _a)), ref: elementRef, name: name, id: id || calculatedId, 'aria-labelledby': ariaLabelledBy, 'aria-describedby': ariaDescribedBy, checked: Boolean(checkedProp), disabled: disabled, tabIndex: kendo_react_common_1.getTabIndex(tabIndex, disabled), role: 'checkbox', required: required !== undefined ? required : false, 'aria-checked': currentChecked || checkedProp ?
153
153
  true :
154
154
  indeterminateProp ?
package/dist/npm/colors/ColorGradient.js CHANGED
@@ -234,7 +234,7 @@ var ColorGradientWithoutContext = /** @class */ (function (_super) {
234
234
  */
235
235
  ColorGradientWithoutContext.prototype.render = function () {
236
236
  var _this = this;
237
- var className = kendo_react_common_1.classNames('k-colorgradient', { 'k-state-disabled': this.props.disabled });
237
+ var className = kendo_react_common_1.classNames('k-colorgradient', { 'k-disabled': this.props.disabled });
238
238
  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: kendo_react_common_1.getTabIndex(this.props.tabIndex, this.props.disabled), "aria-labelledby": this.props.ariaLabelledBy, "aria-describedby": this.props.ariaDescribedBy, onFocus: this.onFocus },
239
239
  React.createElement("div", { className: "k-colorgradient-canvas k-hstack" },
240
240
  React.createElement("div", { className: "k-hsv-rectangle", style: { background: this.state.backgroundColor } },
package/dist/npm/colors/ColorPalette.js CHANGED
@@ -109,7 +109,7 @@ var ColorPaletteWithoutContext = /** @class */ (function (_super) {
109
109
  svc.setColorMatrix(paletteInfo.colors, paletteInfo.columns);
110
110
  var selectedCellCoords = svc.getCellCoordsFor(this.state.selectedColor);
111
111
  var focusedCellCoords = svc.getCellCoordsFor(this.state.focusedColor);
112
- var className = kendo_react_common_1.classNames('k-colorpalette', { 'k-state-disabled': this.props.disabled });
112
+ var className = kendo_react_common_1.classNames('k-colorpalette', { 'k-disabled': this.props.disabled });
113
113
  if (paletteInfo.colors.length) {
114
114
  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-activedescendant": selectedCellCoords && this.createCellId(selectedCellCoords), "aria-labelledby": this.props.ariaLabelledBy, "aria-describedby": this.props.ariaDescribedBy, tabIndex: kendo_react_common_1.getTabIndex(this.props.tabIndex, this.props.disabled), ref: function (el) { return _this.wrapper = el; } },
115
115
  React.createElement("div", { className: "k-colorpalette-table-wrap", role: "grid" },
@@ -209,7 +209,7 @@ var ColorPaletteWithoutContext = /** @class */ (function (_super) {
209
209
  return columns.map(function (color, i) {
210
210
  var isSelected = rowIsSelected && selectedColumn === i;
211
211
  var className = kendo_react_common_1.classNames('k-colorpalette-tile', {
212
- 'k-state-selected': isSelected,
212
+ 'k-selected': isSelected,
213
213
  'k-state-focus': rowIsFocused && focusedColumn === i
214
214
  });
215
215
  return (React.createElement("td", { className: className, "aria-label": color, "aria-selected": isSelected ? true : _this.props.disabled ? undefined : false, style: { backgroundColor: color, width: width, height: height, minWidth: width }, onClick: function (event) { return _this.onColorClick(color, event); }, id: _this.createCellId({ row: rowIndex, col: i }), key: i }));
package/dist/npm/colors/ColorPicker.js CHANGED
@@ -199,7 +199,6 @@ exports.ColorPicker = React.forwardRef(function (directProps, target) {
199
199
  _a["k-picker-" + (kendo_react_common_1.kendoThemeMaps.sizeMap[size] || size)] = size,
200
200
  _a["k-picker-" + fillMode] = fillMode,
201
201
  _a["k-rounded-" + (kendo_react_common_1.kendoThemeMaps.roundedMap[rounded] || rounded)] = rounded,
202
- _a['k-valid'] = isValid,
203
202
  _a['k-invalid'] = !isValid,
204
203
  _a['k-disabled'] = disabled,
205
204
  _a['k-focus'] = focused,
@@ -212,7 +211,7 @@ exports.ColorPicker = React.forwardRef(function (directProps, target) {
212
211
  (iconClassName || icon) && React.createElement("span", { className: kendo_react_common_1.classNames('k-color-preview-icon', iconClassName, (_b = {},
213
212
  _b["k-icon k-i-" + icon] = (icon && !iconClassName),
214
213
  _b)) }),
215
- 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", icon: 'arrow-s' })), content: (React.createElement(React.Fragment, null,
214
+ 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: 'arrow-s' })), content: (React.createElement(React.Fragment, null,
216
215
  (view === 'combo' || view === 'gradient') && (React.createElement(ColorGradient_1.ColorGradient, __assign({}, gradientSettings, { tabIndex: 0, ref: gradientRef, value: value, onChange: onChangeHandler }))),
217
216
  (view === 'combo' || view === 'palette') && (React.createElement(ColorPalette_1.ColorPalette, __assign({}, paletteSettings, { ref: paletteRef, value: value, onChange: onPaletteChangeHandler }))))) })));
218
217
  });
package/dist/npm/colors/FlatColorPicker.js CHANGED
@@ -60,7 +60,7 @@ exports.FlatColorPicker = React.forwardRef(function (props, ref) {
60
60
  setPrevColor(colorValue);
61
61
  }, [colorValue]);
62
62
  return (React.createElement("div", { id: props.id, style: props.style, ref: flatColorPickerRef, tabIndex: kendo_react_common_1.getTabIndex(props.tabIndex, props.disabled), className: kendo_react_common_1.classNames('k-flatcolorpicker k-coloreditor', {
63
- 'k-state-disabled': props.disabled
63
+ 'k-disabled': props.disabled
64
64
  }, props.className), onBlur: handleFlatColorPickerBlur },
65
65
  props.header ||
66
66
  React.createElement("div", { className: "k-coloreditor-header k-hstack" },
package/dist/npm/input/Input.js CHANGED
@@ -96,8 +96,8 @@ var InputWithoutContext = /** @class */ (function (_super) {
96
96
  _this.handleAutoFill = function (e) {
97
97
  if (e.animationName === 'autoFillStart') {
98
98
  var parent_1 = e.target.parentNode;
99
- if (parent_1 && parent_1.classList.contains('k-state-empty')) {
100
- parent_1.classList.remove('k-state-empty');
99
+ if (parent_1 && parent_1.classList.contains('k-empty')) {
100
+ parent_1.classList.remove('k-empty');
101
101
  }
102
102
  }
103
103
  };
package/dist/npm/maskedtextbox/MaskedTextBox.js CHANGED
@@ -289,13 +289,12 @@ var MaskedTextBoxWithoutContext = /** @class */ (function (_super) {
289
289
  _a["k-input-" + (kendo_react_common_1.kendoThemeMaps.sizeMap[size] || size)] = size,
290
290
  _a["k-input-" + fillMode] = fillMode,
291
291
  _a["k-rounded-" + (kendo_react_common_1.kendoThemeMaps.roundedMap[rounded] || rounded)] = rounded,
292
- _a['k-valid'] = isValid,
293
292
  _a['k-invalid'] = !isValid,
294
293
  _a['k-required'] = this.required,
295
294
  _a['k-disabled'] = this.props.disabled,
296
295
  _a), this.props.className), style: !this.props.label
297
296
  ? __assign({ width: this.props.width }, style) : style },
298
- React.createElement("input", { type: "text", autoComplete: "off", autoCorrect: "off", autoCapitalize: "off", spellCheck: false, className: "k-input k-input-inner", value: this.value, id: inputId, "aria-labelledby": this.props.ariaLabelledBy, "aria-describedby": this.props.ariaDescribedBy, name: this.props.name, tabIndex: 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 })));
297
+ 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: 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 })));
299
298
  return this.props.label
300
299
  ? (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 }))
301
300
  : component;
package/dist/npm/numerictextbox/NumericTextBox.js CHANGED
@@ -266,7 +266,6 @@ exports.NumericTextBox = React.forwardRef(function (directProps, target) {
266
266
  _a["k-input-" + (kendo_react_common_1.kendoThemeMaps.sizeMap[props.size] || props.size)] = props.size,
267
267
  _a["k-input-" + props.fillMode] = props.fillMode,
268
268
  _a["k-rounded-" + (kendo_react_common_1.kendoThemeMaps.roundedMap[props.rounded] || props.rounded)] = props.rounded,
269
- _a['k-valid'] = isValid,
270
269
  _a['k-invalid'] = !isValid,
271
270
  _a['k-required'] = props.required,
272
271
  _a['k-disabled'] = props.disabled,
package/dist/npm/package-metadata.js CHANGED
@@ -7,7 +7,7 @@ exports.packageMetadata = {
7
7
  name: '@progress/kendo-react-inputs',
8
8
  productName: 'KendoReact',
9
9
  productCodes: ['KENDOUIREACT', 'KENDOUICOMPLETE'],
10
- publishDate: 1651652049,
10
+ publishDate: 1651757599,
11
11
  version: '',
12
12
  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'
13
13
  };
package/dist/npm/radiobutton/RadioButton.js CHANGED
@@ -70,7 +70,6 @@ exports.RadioButton = React.forwardRef(function (directProps, target) {
70
70
  }, [onBlur, disabled]);
71
71
  var inputProps = __assign({ type: 'radio', id: id || calculatedId, name: name, className: kendo_react_common_1.classNames('k-radio', (_a = {},
72
72
  _a["k-radio-" + (kendo_react_common_1.kendoThemeMaps.sizeMap[size] || size)] = size,
73
- _a['k-state-invalid'] = valid === false,
74
73
  _a['k-invalid'] = valid === false,
75
74
  _a), className), ref: elementRef, disabled: disabled, tabIndex: kendo_react_common_1.getTabIndex(tabIndex, disabled), checked: checked, style: style, 'aria-describedby': ariaDescribedBy, value: value, onChange: handleChange, onFocus: handleFocus, onBlur: handleBlur }, others);
76
75
  var radioButtonLabel = (React.createElement(React.Fragment, null, label !== undefined ? (React.createElement("label", { className: 'k-radio-label', htmlFor: id || calculatedId, style: { userSelect: 'none' }, "aria-label": label }, label)) : null));
package/dist/npm/radiobutton/RadioGroup.js CHANGED
@@ -76,7 +76,7 @@ exports.RadioGroup = React.forwardRef(function (directProps, target) {
76
76
  : (noOptionChecked && index === 0) || isCurrentlyChecked
77
77
  ? 0
78
78
  : -1, index: index, name: name || radioGroupName, onChange: handleChange, onFocus: handleFocus });
79
- return (React.createElement(Item, { className: kendo_react_common_1.classNames('k-radio-item', { 'k-state-disabled': radioButtonProps.disabled || disabled }), key: index, role: 'radio' },
79
+ return (React.createElement(Item, { className: kendo_react_common_1.classNames('k-radio-item', { 'k-disabled': radioButtonProps.disabled || disabled }), key: index, role: 'radio' },
80
80
  React.createElement(RadioButton_1.RadioButton, __assign({}, radioButtonProps))));
81
81
  }));
82
82
  return (React.createElement("ul", { role: "radiogroup", className: radioGroupClasses, ref: elementRef, dir: dir, style: style, "aria-labelledby": ariaLabelledBy, "aria-describedby": ariaDescribedBy }, radioOptions));
package/dist/npm/range-slider/RangeSlider.js CHANGED
@@ -217,7 +217,7 @@ exports.RangeSlider = React.forwardRef(function (directProps, ref) {
217
217
  kendo_react_common_1.useDraggable(sliderTrackWrapRef, { onPress: handleTrackPress, onDrag: handleTrackDrag, onRelease: handleTrackRelease });
218
218
  return (React.createElement("div", { role: "slider", id: props.id, style: props.style, ref: sliderRef, dir: dir, className: kendo_react_common_1.classNames('k-widget k-slider', {
219
219
  'k-rtl': dir === 'rtl',
220
- 'k-state-disabled': props.disabled,
220
+ 'k-disabled': props.disabled,
221
221
  'k-slider-vertical': props.vertical,
222
222
  'k-slider-horizontal': !props.vertical
223
223
  }, props.className), "aria-labelledby": props.ariaLabelledBy, "aria-describedby": props.ariaDescribedBy },
package/dist/npm/rating/Rating.js CHANGED
@@ -223,7 +223,7 @@ exports.Rating = React.forwardRef(function (directProps, ref) {
223
223
  return (React.createElement("span", { id: props.id, style: props.style, ref: ratingRef, role: "slider", dir: dir, tabIndex: kendo_react_common_1.getTabIndex(props.tabIndex, props.disabled, undefined), className: kendo_react_common_1.classNames('k-rating k-widget', {
224
224
  'k-rtl': dir === 'rtl',
225
225
  'k-state-readonly': readonly,
226
- 'k-state-disabled': disabled
226
+ 'k-disabled': disabled
227
227
  }, 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 },
228
228
  React.createElement("input", { id: 'rating', className: 'k-hidden', readOnly: readonly, disabled: disabled }),
229
229
  React.createElement("span", { className: 'k-rating-container' }, items),
package/dist/npm/rating/RatingItem.js CHANGED
@@ -75,7 +75,7 @@ exports.RatingItem = React.forwardRef(function (props, ref) {
75
75
  }, [props.onMouseLeave]);
76
76
  return (React.createElement("span", { id: props.id, ref: element, dir: dir, "data-half": props.half, tabIndex: props.tabIndex, title: props.title, style: props.style, className: kendo_react_common_1.classNames('k-rating-item', {
77
77
  'k-rtl': dir === 'rtl',
78
- 'k-state-selected': props.selected,
78
+ 'k-selected': props.selected,
79
79
  'k-state-hovered': props.hovered
80
80
  }, props.className), onClick: handleClick, onKeyDown: handleKeyDown, onFocus: handleFocus, onBlur: handleBlur, onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, onMouseMove: handleMouseMove }, props.children));
81
81
  });
package/dist/npm/slider/Slider.js CHANGED
@@ -175,8 +175,8 @@ var SliderWithoutContext = /** @class */ (function (_super) {
175
175
  ? { paddingTop: 0, height: '100%' }
176
176
  : {};
177
177
  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: kendo_react_common_1.getTabIndex(this.props.tabIndex, this.props.disabled, undefined), onFocus: this.onFocus, onBlur: this.onBlur, onKeyDown: this.onKeyDown, className: kendo_react_common_1.classNames('k-slider k-widget', {
178
- 'k-state-focused': this.state.focused,
179
- 'k-state-disabled': this.props.disabled,
178
+ 'k-focus': this.state.focused,
179
+ 'k-disabled': this.props.disabled,
180
180
  'k-slider-horizontal': !this.props.vertical,
181
181
  'k-slider-vertical': this.props.vertical
182
182
  }, this.props.className) },
package/dist/npm/textarea/TextArea.js CHANGED
@@ -115,7 +115,6 @@ exports.TextArea = React.forwardRef(function (directProps, target) {
115
115
  _a["k-input-" + (kendo_react_common_1.kendoThemeMaps.sizeMap[size] || size)] = size,
116
116
  _a["k-input-" + fillMode] = fillMode,
117
117
  _a["k-rounded-" + (kendo_react_common_1.kendoThemeMaps.roundedMap[rounded] || rounded)] = rounded,
118
- _a['k-valid'] = (isValid || validityStyles !== undefined || validityStyles === true),
119
118
  _a['k-invalid'] = !(isValid || validityStyles !== undefined || validityStyles === true),
120
119
  _a['k-required'] = required,
121
120
  _a['k-disabled'] = disabled,