@progress/kendo-react-dateinputs 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 (37) hide show
  1. package/dist/cdn/js/kendo-react-dateinputs.js +1 -1
  2. package/dist/es/calendar/components/Calendar.js +1 -1
  3. package/dist/es/calendar/components/CalendarCell.js +3 -3
  4. package/dist/es/calendar/components/HorizontalViewList.js +5 -5
  5. package/dist/es/calendar/components/MultiViewCalendar.js +1 -1
  6. package/dist/es/calendar/components/TodayCommand.js +1 -1
  7. package/dist/es/calendar/components/ViewList.js +5 -5
  8. package/dist/es/dateinput/DateInput.js +2 -3
  9. package/dist/es/dateinput/utils.js +1 -1
  10. package/dist/es/datepicker/DatePicker.js +1 -2
  11. package/dist/es/daterangepicker/DateRangePicker.d.ts +1 -4
  12. package/dist/es/daterangepicker/DateRangePicker.js +17 -22
  13. package/dist/es/datetimepicker/DateTimePicker.js +1 -2
  14. package/dist/es/datetimepicker/DateTimeSelector.js +1 -1
  15. package/dist/es/package-metadata.js +1 -1
  16. package/dist/es/timepicker/TimePart.js +2 -2
  17. package/dist/es/timepicker/TimePicker.js +1 -2
  18. package/dist/es/timepicker/TimeSelector.js +1 -1
  19. package/dist/npm/calendar/components/Calendar.js +1 -1
  20. package/dist/npm/calendar/components/CalendarCell.js +3 -3
  21. package/dist/npm/calendar/components/HorizontalViewList.js +5 -5
  22. package/dist/npm/calendar/components/MultiViewCalendar.js +1 -1
  23. package/dist/npm/calendar/components/TodayCommand.js +1 -1
  24. package/dist/npm/calendar/components/ViewList.js +5 -5
  25. package/dist/npm/dateinput/DateInput.js +2 -3
  26. package/dist/npm/dateinput/utils.js +1 -1
  27. package/dist/npm/datepicker/DatePicker.js +1 -2
  28. package/dist/npm/daterangepicker/DateRangePicker.d.ts +1 -4
  29. package/dist/npm/daterangepicker/DateRangePicker.js +17 -22
  30. package/dist/npm/datetimepicker/DateTimePicker.js +1 -2
  31. package/dist/npm/datetimepicker/DateTimeSelector.js +1 -1
  32. package/dist/npm/package-metadata.js +1 -1
  33. package/dist/npm/timepicker/TimePart.js +2 -2
  34. package/dist/npm/timepicker/TimePicker.js +1 -2
  35. package/dist/npm/timepicker/TimeSelector.js +1 -1
  36. package/dist/systemjs/kendo-react-dateinputs.js +1 -1
  37. package/package.json +12 -12
package/dist/es/calendar/components/Calendar.js CHANGED
@@ -298,7 +298,7 @@ var CalendarWithoutContext = /** @class */ (function (_super) {
298
298
  this.bus.configure(this.bottomView, this.topView);
299
299
  this.service = this.bus.service(activeView, this.intl);
300
300
  var rootClassNames = classNames('k-widget k-calendar k-calendar-infinite', {
301
- 'k-state-disabled': this.props.disabled,
301
+ 'k-disabled': this.props.disabled,
302
302
  'k-week-number': this.props.weekNumber
303
303
  }, this.props.className);
304
304
  var aria = {
package/dist/es/calendar/components/CalendarCell.js CHANGED
@@ -109,12 +109,12 @@ var CalendarCell = /** @class */ (function (_super) {
109
109
  'k-range-split-end': isRangeSplitEnd,
110
110
  'k-range-split-start': isRangeSplitStart,
111
111
  'k-range-start': isRangeStart,
112
- 'k-state-active': isStartActive || isEndActive,
112
+ 'k-active': isStartActive || isEndActive,
113
113
  'k-state-pending-focus': isFocused,
114
- 'k-state-selected': isSelected || isRangeStart || isRangeEnd,
114
+ 'k-selected': isSelected || isRangeStart || isRangeEnd,
115
115
  'k-today': isToday,
116
116
  'k-weekend': isWeekend,
117
- 'k-state-disabled': isDisabled
117
+ 'k-disabled': isDisabled
118
118
  }, className);
119
119
  return (React.createElement("td", __assign({}, other, { className: rootClassName, onClick: this.handleClick, onMouseEnter: this.handleMouseEnter, onMouseLeave: this.handleMouseLeave }),
120
120
  React.createElement("span", { className: "k-link" }, this.props.children)));
package/dist/es/calendar/components/HorizontalViewList.js CHANGED
@@ -30,13 +30,13 @@ var HorizontalViewList = /** @class */ (function (_super) {
30
30
  if (!_this._element) {
31
31
  return;
32
32
  }
33
- var focusedCell = _this._element.querySelector('td.k-state-focused');
33
+ var focusedCell = _this._element.querySelector('td.k-focus');
34
34
  var nextActiveCell = _this._element.querySelector('.k-state-pending-focus');
35
35
  if (focusedCell && focusedCell[0]) {
36
- focusedCell[0].classList.remove('k-state-focused');
36
+ focusedCell[0].classList.remove('k-focus');
37
37
  }
38
38
  if (nextActiveCell) {
39
- nextActiveCell.classList.add('k-state-focused');
39
+ nextActiveCell.classList.add('k-focus');
40
40
  }
41
41
  _this.isActive = true;
42
42
  };
@@ -44,9 +44,9 @@ var HorizontalViewList = /** @class */ (function (_super) {
44
44
  if (!_this._element) {
45
45
  return;
46
46
  }
47
- var focusedCell = _this._element.querySelector('td.k-state-focused');
47
+ var focusedCell = _this._element.querySelector('td.k-focus');
48
48
  if (focusedCell) {
49
- focusedCell.classList.remove('k-state-focused');
49
+ focusedCell.classList.remove('k-focus');
50
50
  }
51
51
  _this.isActive = false;
52
52
  };
package/dist/es/calendar/components/MultiViewCalendar.js CHANGED
@@ -435,7 +435,7 @@ var MultiViewCalendarWithoutContext = /** @class */ (function (_super) {
435
435
  ? calculatedFocus
436
436
  : this.state.focusedDate, this.min, this.max);
437
437
  var wrapperClassName = classNames('k-widget k-calendar k-calendar-range', {
438
- 'k-state-disabled': this.props.disabled
438
+ 'k-disabled': this.props.disabled
439
439
  }, this.props.className);
440
440
  var visualizedRange = this.rangeWithFocused(this.selectedRange, this.focusedDate);
441
441
  var wrapperAria = {
package/dist/es/calendar/components/TodayCommand.js CHANGED
@@ -68,7 +68,7 @@ var TodayCommand = /** @class */ (function (_super) {
68
68
  this.localization = provideLocalizationService(this);
69
69
  var todayMessage = this.localization.toLanguageString(today, messages[today]);
70
70
  var todayClassNames = classNames('k-nav-today', {
71
- 'k-state-disabled': this.props.disabled
71
+ 'k-disabled': this.props.disabled
72
72
  });
73
73
  return (React.createElement("span", { className: todayClassNames, onClick: this.handleClick }, todayMessage));
74
74
  };
package/dist/es/calendar/components/ViewList.js CHANGED
@@ -37,13 +37,13 @@ var ViewList = /** @class */ (function (_super) {
37
37
  if (!_this._element) {
38
38
  return;
39
39
  }
40
- var focusedCell = _this._element.querySelector('td.k-state-focused');
40
+ var focusedCell = _this._element.querySelector('td.k-focus');
41
41
  var nextActiveCell = _this._element.querySelector('.k-state-pending-focus');
42
42
  if (focusedCell && focusedCell[0]) {
43
- focusedCell[0].classList.remove('k-state-focused');
43
+ focusedCell[0].classList.remove('k-focus');
44
44
  }
45
45
  if (nextActiveCell) {
46
- nextActiveCell.classList.add('k-state-focused');
46
+ nextActiveCell.classList.add('k-focus');
47
47
  }
48
48
  _this.isActive = true;
49
49
  };
@@ -51,9 +51,9 @@ var ViewList = /** @class */ (function (_super) {
51
51
  if (!_this._element) {
52
52
  return;
53
53
  }
54
- var focusedCell = _this._element.querySelector('td.k-state-focused');
54
+ var focusedCell = _this._element.querySelector('td.k-focus');
55
55
  if (focusedCell) {
56
- focusedCell.classList.remove('k-state-focused');
56
+ focusedCell.classList.remove('k-focus');
57
57
  }
58
58
  _this.isActive = false;
59
59
  };
package/dist/es/dateinput/DateInput.js CHANGED
@@ -183,13 +183,13 @@ var DateInputWithoutContext = /** @class */ (function (_super) {
183
183
  };
184
184
  _this.elementOnFocus = function (_) {
185
185
  if (_this.wrapper) {
186
- _this.wrapper.classList.add('k-state-focused');
186
+ _this.wrapper.classList.add('k-focus');
187
187
  }
188
188
  _this.setState({ focused: true });
189
189
  };
190
190
  _this.elementOnBlur = function (_) {
191
191
  if (_this.wrapper) {
192
- _this.wrapper.classList.remove('k-state-focused');
192
+ _this.wrapper.classList.remove('k-focus');
193
193
  }
194
194
  _this.setState({ focused: false });
195
195
  };
@@ -266,7 +266,6 @@ var DateInputWithoutContext = /** @class */ (function (_super) {
266
266
  _b["k-input-" + (kendoThemeMaps.sizeMap[size] || size)] = size,
267
267
  _b["k-input-" + fillMode] = fillMode,
268
268
  _b["k-rounded-" + (kendoThemeMaps.roundedMap[rounded] || rounded)] = rounded,
269
- _b['k-valid'] = isValid,
270
269
  _b['k-invalid'] = !isValid,
271
270
  _b['k-required'] = _this.required,
272
271
  _b['k-disabled'] = _this.props.disabled,
package/dist/es/dateinput/utils.js CHANGED
@@ -78,6 +78,6 @@ export var isInRange = function (candidate, min, max) { return (candidate === nu
78
78
  /**
79
79
  * @hidden
80
80
  */
81
- export var invalidClasses = ['k-state-invalid'];
81
+ export var invalidClasses = ['k-invalid'];
82
82
  /** @hidden */
83
83
  export var wrapperClasses = ['k-widget', 'k-dateinput'];
package/dist/es/datepicker/DatePicker.js CHANGED
@@ -405,13 +405,12 @@ var DatePickerWithoutContext = /** @class */ (function (_super) {
405
405
  _b["k-input-" + (kendoThemeMaps.sizeMap[size] || size)] = size,
406
406
  _b["k-rounded-" + (kendoThemeMaps.roundedMap[rounded] || rounded)] = rounded,
407
407
  _b["k-input-" + fillMode] = fillMode,
408
- _b['k-valid'] = isValid,
409
408
  _b['k-invalid'] = !isValid,
410
409
  _b['k-required'] = _this.required,
411
410
  _b['k-disabled'] = _this.props.disabled,
412
411
  _b), className), onKeyDown: _this.handleKeyDown, style: { width: width }, onFocus: onFocus, onBlur: onBlur },
413
412
  React.createElement(_this.dateInputComp, __assign({ _ref: _this._dateInput }, dateInputProps)),
414
- React.createElement(_this.toggleButtonComp, { tabIndex: -1, type: "button", icon: "calendar", title: toggleButtonTitle, className: "k-input-button", onClick: _this.handleIconClick, "aria-label": toggleButtonTitle, onMouseDown: _this.handleIconMouseDown }),
413
+ React.createElement(_this.toggleButtonComp, { tabIndex: -1, type: "button", icon: "calendar", title: toggleButtonTitle, className: "k-input-button", rounded: null, onClick: _this.handleIconClick, "aria-label": toggleButtonTitle, onMouseDown: _this.handleIconMouseDown }),
415
414
  React.createElement(_this.popupComp, __assign({}, popupProps),
416
415
  React.createElement(_this.calendarComp, __assign({ _ref: _this.setCalendarRef }, calendarProps)))));
417
416
  }));
package/dist/es/daterangepicker/DateRangePicker.d.ts CHANGED
@@ -93,9 +93,7 @@ export declare class DateRangePickerWithoutContext extends React.Component<DateR
93
93
  year: PropTypes.Requireable<string>;
94
94
  month: PropTypes.Requireable<string>;
95
95
  day: PropTypes.Requireable<string>;
96
- hour: PropTypes.Requireable<string>; /**
97
- * @hidden
98
- */
96
+ hour: PropTypes.Requireable<string>;
99
97
  minute: PropTypes.Requireable<string>;
100
98
  second: PropTypes.Requireable<string>;
101
99
  }>>;
@@ -179,7 +177,6 @@ export declare class DateRangePickerWithoutContext extends React.Component<DateR
179
177
  swapButton: boolean;
180
178
  };
181
179
  private _element;
182
- private _wrapper;
183
180
  private _calendar;
184
181
  private _startDateInput;
185
182
  private _endDateInput;
package/dist/es/daterangepicker/DateRangePicker.js CHANGED
@@ -37,14 +37,12 @@ import { MIN_DATE, MAX_DATE } from '../defaults';
37
37
  import { swapStartEnd, start, end, separator, messages } from '../messages';
38
38
  import { Button } from '@progress/kendo-react-buttons';
39
39
  import { nullable } from '../utils';
40
- var WRAPPER_STYLES = { display: 'inline-block' };
41
40
  /** @hidden */
42
41
  var DateRangePickerWithoutContext = /** @class */ (function (_super) {
43
42
  __extends(DateRangePickerWithoutContext, _super);
44
43
  function DateRangePickerWithoutContext(props) {
45
44
  var _this = _super.call(this, props) || this;
46
45
  _this._element = null;
47
- _this._wrapper = null;
48
46
  _this._calendar = null;
49
47
  _this._startDateInput = React.createRef();
50
48
  _this._endDateInput = React.createRef();
@@ -100,10 +98,10 @@ var DateRangePickerWithoutContext = /** @class */ (function (_super) {
100
98
  _this.setShow(true);
101
99
  }
102
100
  if (_this.startDateInput && _this.startDateInput.element) {
103
- _this.startDateInput.element.classList.add('k-state-focused');
101
+ _this.startDateInput.element.classList.add('k-focus');
104
102
  }
105
103
  if (_this.endDateInput && _this.endDateInput.element) {
106
- _this.endDateInput.element.classList.add('k-state-focused');
104
+ _this.endDateInput.element.classList.add('k-focus');
107
105
  }
108
106
  var onFocus = _this.props.onFocus;
109
107
  if (onFocus) {
@@ -113,10 +111,10 @@ var DateRangePickerWithoutContext = /** @class */ (function (_super) {
113
111
  _this.handleBlur = function (event) {
114
112
  _this.nextTick(function () {
115
113
  if (_this.startDateInput && _this.startDateInput.element) {
116
- _this.startDateInput.element.classList.remove('k-state-focused');
114
+ _this.startDateInput.element.classList.remove('k-focus');
117
115
  }
118
116
  if (_this.endDateInput && _this.endDateInput.element) {
119
- _this.endDateInput.element.classList.remove('k-state-focused');
117
+ _this.endDateInput.element.classList.remove('k-focus');
120
118
  }
121
119
  _this.setShow(false);
122
120
  });
@@ -328,7 +326,7 @@ var DateRangePickerWithoutContext = /** @class */ (function (_super) {
328
326
  var startDateInputId = (this.props.startDateInputSettings || {}).id || this._startInputId;
329
327
  var endDateInputId = (this.props.endDateInputSettings || {}).id || this._endInputId;
330
328
  var rootClassName = classNames('k-daterangepicker', {
331
- 'k-state-disabled': this.props.disabled
329
+ 'k-disabled': this.props.disabled
332
330
  }, this.props.className);
333
331
  var localizationService = provideLocalizationService(this);
334
332
  var startMessage = localizationService.toLanguageString(start, messages[start]);
@@ -336,7 +334,7 @@ var DateRangePickerWithoutContext = /** @class */ (function (_super) {
336
334
  var separatorMessage = localizationService.toLanguageString(separator, messages[separator]);
337
335
  var startDateInputProps = __assign({ label: startMessage, format: this.props.format, min: this.min, max: this.max, id: this._startInputId, disabled: this.props.disabled, valid: this.props.valid, ariaHasPopup: true, ariaExpanded: this.show }, this.props.startDateInputSettings, { value: value.start, onChange: this.handleStartChange });
338
336
  var endDateInputProps = __assign({ label: endMessage, format: this.props.format, min: this.min, max: this.max, id: this._endInputId, disabled: this.props.disabled, valid: this.props.valid, ariaHasPopup: true, ariaExpanded: this.show }, this.props.endDateInputSettings, { value: value.end, onChange: this.handleEndChange });
339
- var popupProps = __assign({ animate: this._wrapper !== null, anchor: this._wrapper, id: this._popupId, anchorAlign: {
337
+ var popupProps = __assign({ animate: this._element !== null, anchor: this._element, id: this._popupId, anchorAlign: {
340
338
  horizontal: 'left',
341
339
  vertical: 'bottom'
342
340
  }, popupAlign: {
@@ -357,20 +355,17 @@ var DateRangePickerWithoutContext = /** @class */ (function (_super) {
357
355
  return (React.createElement("span", { ref: function (span) {
358
356
  _this._element = span;
359
357
  }, className: rootClassName, style: this.props.style, id: this.props.id, "aria-labelledby": this.props.ariaLabelledBy, "aria-describedby": this.props.ariaDescribedBy, tabIndex: this.props.tabIndex, onFocus: this.handleFocus, onBlur: this.handleBlur, onKeyDown: this.handleKeyDown },
360
- React.createElement("span", { ref: function (span) {
361
- _this._wrapper = span;
362
- }, className: "k-daterangepicker-wrap", style: WRAPPER_STYLES },
363
- this.props.startDateInput
364
- ? React.createElement(this.props.startDateInput, __assign({}, startDateInputProps))
365
- : React.createElement(DateInput, __assign({}, startDateInputProps, { ref: this._startDateInput })),
366
- (this.props.allowReverse
367
- || (this.props.calendarSettings && this.props.calendarSettings.allowReverse))
368
- && this.props.swapButton
369
- ? (reverseButton)
370
- : (separatorMessage),
371
- this.props.endDateInput
372
- ? React.createElement(this.props.endDateInput, __assign({}, endDateInputProps))
373
- : React.createElement(DateInput, __assign({}, endDateInputProps, { ref: this._endDateInput }))),
358
+ this.props.startDateInput
359
+ ? React.createElement(this.props.startDateInput, __assign({}, startDateInputProps))
360
+ : React.createElement(DateInput, __assign({}, startDateInputProps, { ref: this._startDateInput })),
361
+ (this.props.allowReverse
362
+ || (this.props.calendarSettings && this.props.calendarSettings.allowReverse))
363
+ && this.props.swapButton
364
+ ? (reverseButton)
365
+ : (separatorMessage),
366
+ this.props.endDateInput
367
+ ? React.createElement(this.props.endDateInput, __assign({}, endDateInputProps))
368
+ : React.createElement(DateInput, __assign({}, endDateInputProps, { ref: this._endDateInput })),
374
369
  this.props.popup
375
370
  ? React.createElement(this.props.popup, __assign({}, popupProps), calendar)
376
371
  : React.createElement(Popup, __assign({}, popupProps), calendar)));
package/dist/es/datetimepicker/DateTimePicker.js CHANGED
@@ -321,14 +321,13 @@ var DateTimePickerWithoutContext = /** @class */ (function (_super) {
321
321
  _b["k-input-" + (kendoThemeMaps.sizeMap[size] || size)] = size,
322
322
  _b["k-rounded-" + (kendoThemeMaps.roundedMap[rounded] || rounded)] = rounded,
323
323
  _b["k-input-" + fillMode] = fillMode,
324
- _b['k-valid'] = isValid,
325
324
  _b['k-invalid'] = !isValid,
326
325
  _b['k-required'] = _this.required,
327
326
  _b['k-disabled'] = _this.props.disabled,
328
327
  _b), className), onKeyDown: _this.handleKeyDown, style: { width: width }, onFocus: onFocus, onBlur: onBlur },
329
328
  React.createElement(_this.dateInputComp, __assign({ _ref: _this._dateInput }, dataInputProps)),
330
329
  React.createElement(Button, __assign({ tabIndex: -1, type: "button", icon: 'calendar', onMouseDown: _this.handleIconMouseDown, onClick: _this.handleDateIconClick, title: provideLocalizationService(_this)
331
- .toLanguageString(toggleDateTimeSelector, messages[toggleDateTimeSelector]), className: "k-input-button" }, {
330
+ .toLanguageString(toggleDateTimeSelector, messages[toggleDateTimeSelector]), className: "k-input-button", rounded: null }, {
332
331
  'aria-controls': _this._popupId,
333
332
  'aria-label': provideLocalizationService(_this)
334
333
  .toLanguageString(toggleDateTimeSelector, messages[toggleDateTimeSelector])
package/dist/es/datetimepicker/DateTimeSelector.js CHANGED
@@ -180,7 +180,7 @@ var DateTimeSelector = /** @class */ (function (_super) {
180
180
  var rootClassName = classNames({
181
181
  'k-date-tab': this.state.tab === 'date',
182
182
  'k-time-tab': this.state.tab === 'time',
183
- 'k-state-disabled': disabled
183
+ 'k-disabled': disabled
184
184
  }, 'k-datetime-wrap');
185
185
  var localizationService = provideLocalizationService(this);
186
186
  var dateMessage = localizationService.toLanguageString(date, messages[date]);
package/dist/es/package-metadata.js CHANGED
@@ -5,7 +5,7 @@ export var packageMetadata = {
5
5
  name: '@progress/kendo-react-dateinputs',
6
6
  productName: 'KendoReact',
7
7
  productCodes: ['KENDOUIREACT', 'KENDOUICOMPLETE'],
8
- publishDate: 1651651943,
8
+ publishDate: 1651757483,
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/timepicker/TimePart.js CHANGED
@@ -208,7 +208,7 @@ var TimePart = /** @class */ (function (_super) {
208
208
  .splitDateFormat(format || TimePart.defaultProps.format)
209
209
  .filter(this.timeFormatFilter);
210
210
  var rootClassName = classNames({
211
- 'k-state-disabled': disabled
211
+ 'k-disabled': disabled
212
212
  }, className, 'k-time-part');
213
213
  this.timeLists = [];
214
214
  var localizationService = provideLocalizationService(this);
@@ -223,7 +223,7 @@ var TimePart = /** @class */ (function (_super) {
223
223
  this.dateFormatParts.map(function (part, idx) {
224
224
  return (part.type !== 'literal'
225
225
  ? React.createElement("div", { key: idx, className: classNames('k-time-list-wrapper', {
226
- 'k-state-focused': idx === _this.state.activeListIndex
226
+ 'k-focus': idx === _this.state.activeListIndex
227
227
  }), role: "presentation", tabIndex: -1 },
228
228
  React.createElement("span", { className: "k-title", onMouseDown: function (e) { e.preventDefault(); } }, _this.intl.dateFieldName(part)),
229
229
  React.createElement(TimeList, { min: _this.min, max: _this.max, boundRange: _this.boundRange, part: part, step: part.type ? _this.steps[part.type] : 1, smoothScroll: smoothScroll, ref: function (el) { if (!el) {
package/dist/es/timepicker/TimePicker.js CHANGED
@@ -371,13 +371,12 @@ var TimePickerWithoutContext = /** @class */ (function (_super) {
371
371
  _b["k-input-" + (kendoThemeMaps.sizeMap[size] || size)] = size,
372
372
  _b["k-rounded-" + (kendoThemeMaps.roundedMap[rounded] || rounded)] = rounded,
373
373
  _b["k-input-" + fillMode] = fillMode,
374
- _b['k-valid'] = isValid,
375
374
  _b['k-invalid'] = !isValid,
376
375
  _b['k-required'] = _this.required,
377
376
  _b['k-disabled'] = _this.props.disabled,
378
377
  _b), className), onKeyDown: _this.handleKeyDown, style: { width: width }, onFocus: onFocus, onBlur: onBlur },
379
378
  React.createElement(_this.dateInputComp, __assign({ _ref: _this._dateInput }, dateInputProps)),
380
- React.createElement(Button, __assign({ tabIndex: -1, type: "button", icon: 'clock', onMouseDown: _this.handleIconMouseDown, onClick: _this.handleIconClick, title: toggleTimeMessage, "aria-label": toggleTimeMessage, className: "k-input-button" }, {
379
+ React.createElement(Button, __assign({ tabIndex: -1, type: "button", icon: 'clock', onMouseDown: _this.handleIconMouseDown, onClick: _this.handleIconClick, title: toggleTimeMessage, "aria-label": toggleTimeMessage, className: "k-input-button", rounded: null }, {
381
380
  'aria-controls': _this._popupId,
382
381
  'aria-label': toggleClockMessage
383
382
  })),
package/dist/es/timepicker/TimeSelector.js CHANGED
@@ -173,7 +173,7 @@ var TimeSelector = /** @class */ (function (_super) {
173
173
  var cancelMessage = localizationService.toLanguageString(timePickerCancel, messages[timePickerCancel]);
174
174
  var setMessage = localizationService.toLanguageString(timePickerSet, messages[timePickerSet]);
175
175
  return (React.createElement("div", { ref: function (el) { _this._element = el; }, tabIndex: !disabled ? tabIndex || 0 : undefined, className: classNames('k-timeselector k-reset', className, {
176
- 'k-state-disabled': disabled
176
+ 'k-disabled': disabled
177
177
  }), onKeyDown: this.handleKeyDown },
178
178
  React.createElement(TimePart, { ref: function (el) { _this.timePart = el; }, value: this.current, onChange: this.handleChange, onNowClick: this.handleNowClick, format: format, smoothScroll: smoothScroll, min: min, max: max, boundRange: boundRange, disabled: disabled, nowButton: nowButton, steps: steps, show: this.props.show }),
179
179
  React.createElement("div", { className: "k-time-footer k-actions k-hstack k-justify-content-stretch" },
package/dist/npm/calendar/components/Calendar.js CHANGED
@@ -300,7 +300,7 @@ var CalendarWithoutContext = /** @class */ (function (_super) {
300
300
  this.bus.configure(this.bottomView, this.topView);
301
301
  this.service = this.bus.service(activeView, this.intl);
302
302
  var rootClassNames = kendo_react_common_1.classNames('k-widget k-calendar k-calendar-infinite', {
303
- 'k-state-disabled': this.props.disabled,
303
+ 'k-disabled': this.props.disabled,
304
304
  'k-week-number': this.props.weekNumber
305
305
  }, this.props.className);
306
306
  var aria = {
package/dist/npm/calendar/components/CalendarCell.js CHANGED
@@ -111,12 +111,12 @@ var CalendarCell = /** @class */ (function (_super) {
111
111
  'k-range-split-end': isRangeSplitEnd,
112
112
  'k-range-split-start': isRangeSplitStart,
113
113
  'k-range-start': isRangeStart,
114
- 'k-state-active': isStartActive || isEndActive,
114
+ 'k-active': isStartActive || isEndActive,
115
115
  'k-state-pending-focus': isFocused,
116
- 'k-state-selected': isSelected || isRangeStart || isRangeEnd,
116
+ 'k-selected': isSelected || isRangeStart || isRangeEnd,
117
117
  'k-today': isToday,
118
118
  'k-weekend': isWeekend,
119
- 'k-state-disabled': isDisabled
119
+ 'k-disabled': isDisabled
120
120
  }, className);
121
121
  return (React.createElement("td", __assign({}, other, { className: rootClassName, onClick: this.handleClick, onMouseEnter: this.handleMouseEnter, onMouseLeave: this.handleMouseLeave }),
122
122
  React.createElement("span", { className: "k-link" }, this.props.children)));
package/dist/npm/calendar/components/HorizontalViewList.js CHANGED
@@ -32,13 +32,13 @@ var HorizontalViewList = /** @class */ (function (_super) {
32
32
  if (!_this._element) {
33
33
  return;
34
34
  }
35
- var focusedCell = _this._element.querySelector('td.k-state-focused');
35
+ var focusedCell = _this._element.querySelector('td.k-focus');
36
36
  var nextActiveCell = _this._element.querySelector('.k-state-pending-focus');
37
37
  if (focusedCell && focusedCell[0]) {
38
- focusedCell[0].classList.remove('k-state-focused');
38
+ focusedCell[0].classList.remove('k-focus');
39
39
  }
40
40
  if (nextActiveCell) {
41
- nextActiveCell.classList.add('k-state-focused');
41
+ nextActiveCell.classList.add('k-focus');
42
42
  }
43
43
  _this.isActive = true;
44
44
  };
@@ -46,9 +46,9 @@ var HorizontalViewList = /** @class */ (function (_super) {
46
46
  if (!_this._element) {
47
47
  return;
48
48
  }
49
- var focusedCell = _this._element.querySelector('td.k-state-focused');
49
+ var focusedCell = _this._element.querySelector('td.k-focus');
50
50
  if (focusedCell) {
51
- focusedCell.classList.remove('k-state-focused');
51
+ focusedCell.classList.remove('k-focus');
52
52
  }
53
53
  _this.isActive = false;
54
54
  };
package/dist/npm/calendar/components/MultiViewCalendar.js CHANGED
@@ -437,7 +437,7 @@ var MultiViewCalendarWithoutContext = /** @class */ (function (_super) {
437
437
  ? calculatedFocus
438
438
  : this.state.focusedDate, this.min, this.max);
439
439
  var wrapperClassName = kendo_react_common_1.classNames('k-widget k-calendar k-calendar-range', {
440
- 'k-state-disabled': this.props.disabled
440
+ 'k-disabled': this.props.disabled
441
441
  }, this.props.className);
442
442
  var visualizedRange = this.rangeWithFocused(this.selectedRange, this.focusedDate);
443
443
  var wrapperAria = {
package/dist/npm/calendar/components/TodayCommand.js CHANGED
@@ -70,7 +70,7 @@ var TodayCommand = /** @class */ (function (_super) {
70
70
  this.localization = kendo_react_intl_1.provideLocalizationService(this);
71
71
  var todayMessage = this.localization.toLanguageString(messages_1.today, messages_1.messages[messages_1.today]);
72
72
  var todayClassNames = kendo_react_common_1.classNames('k-nav-today', {
73
- 'k-state-disabled': this.props.disabled
73
+ 'k-disabled': this.props.disabled
74
74
  });
75
75
  return (React.createElement("span", { className: todayClassNames, onClick: this.handleClick }, todayMessage));
76
76
  };
package/dist/npm/calendar/components/ViewList.js CHANGED
@@ -39,13 +39,13 @@ var ViewList = /** @class */ (function (_super) {
39
39
  if (!_this._element) {
40
40
  return;
41
41
  }
42
- var focusedCell = _this._element.querySelector('td.k-state-focused');
42
+ var focusedCell = _this._element.querySelector('td.k-focus');
43
43
  var nextActiveCell = _this._element.querySelector('.k-state-pending-focus');
44
44
  if (focusedCell && focusedCell[0]) {
45
- focusedCell[0].classList.remove('k-state-focused');
45
+ focusedCell[0].classList.remove('k-focus');
46
46
  }
47
47
  if (nextActiveCell) {
48
- nextActiveCell.classList.add('k-state-focused');
48
+ nextActiveCell.classList.add('k-focus');
49
49
  }
50
50
  _this.isActive = true;
51
51
  };
@@ -53,9 +53,9 @@ var ViewList = /** @class */ (function (_super) {
53
53
  if (!_this._element) {
54
54
  return;
55
55
  }
56
- var focusedCell = _this._element.querySelector('td.k-state-focused');
56
+ var focusedCell = _this._element.querySelector('td.k-focus');
57
57
  if (focusedCell) {
58
- focusedCell.classList.remove('k-state-focused');
58
+ focusedCell.classList.remove('k-focus');
59
59
  }
60
60
  _this.isActive = false;
61
61
  };
package/dist/npm/dateinput/DateInput.js CHANGED
@@ -185,13 +185,13 @@ var DateInputWithoutContext = /** @class */ (function (_super) {
185
185
  };
186
186
  _this.elementOnFocus = function (_) {
187
187
  if (_this.wrapper) {
188
- _this.wrapper.classList.add('k-state-focused');
188
+ _this.wrapper.classList.add('k-focus');
189
189
  }
190
190
  _this.setState({ focused: true });
191
191
  };
192
192
  _this.elementOnBlur = function (_) {
193
193
  if (_this.wrapper) {
194
- _this.wrapper.classList.remove('k-state-focused');
194
+ _this.wrapper.classList.remove('k-focus');
195
195
  }
196
196
  _this.setState({ focused: false });
197
197
  };
@@ -268,7 +268,6 @@ var DateInputWithoutContext = /** @class */ (function (_super) {
268
268
  _b["k-input-" + (kendo_react_common_1.kendoThemeMaps.sizeMap[size] || size)] = size,
269
269
  _b["k-input-" + fillMode] = fillMode,
270
270
  _b["k-rounded-" + (kendo_react_common_1.kendoThemeMaps.roundedMap[rounded] || rounded)] = rounded,
271
- _b['k-valid'] = isValid,
272
271
  _b['k-invalid'] = !isValid,
273
272
  _b['k-required'] = _this.required,
274
273
  _b['k-disabled'] = _this.props.disabled,
package/dist/npm/dateinput/utils.js CHANGED
@@ -80,6 +80,6 @@ exports.isInRange = function (candidate, min, max) { return (candidate === null
80
80
  /**
81
81
  * @hidden
82
82
  */
83
- exports.invalidClasses = ['k-state-invalid'];
83
+ exports.invalidClasses = ['k-invalid'];
84
84
  /** @hidden */
85
85
  exports.wrapperClasses = ['k-widget', 'k-dateinput'];
package/dist/npm/datepicker/DatePicker.js CHANGED
@@ -407,13 +407,12 @@ var DatePickerWithoutContext = /** @class */ (function (_super) {
407
407
  _b["k-input-" + (kendo_react_common_1.kendoThemeMaps.sizeMap[size] || size)] = size,
408
408
  _b["k-rounded-" + (kendo_react_common_1.kendoThemeMaps.roundedMap[rounded] || rounded)] = rounded,
409
409
  _b["k-input-" + fillMode] = fillMode,
410
- _b['k-valid'] = isValid,
411
410
  _b['k-invalid'] = !isValid,
412
411
  _b['k-required'] = _this.required,
413
412
  _b['k-disabled'] = _this.props.disabled,
414
413
  _b), className), onKeyDown: _this.handleKeyDown, style: { width: width }, onFocus: onFocus, onBlur: onBlur },
415
414
  React.createElement(_this.dateInputComp, __assign({ _ref: _this._dateInput }, dateInputProps)),
416
- React.createElement(_this.toggleButtonComp, { tabIndex: -1, type: "button", icon: "calendar", title: toggleButtonTitle, className: "k-input-button", onClick: _this.handleIconClick, "aria-label": toggleButtonTitle, onMouseDown: _this.handleIconMouseDown }),
415
+ React.createElement(_this.toggleButtonComp, { tabIndex: -1, type: "button", icon: "calendar", title: toggleButtonTitle, className: "k-input-button", rounded: null, onClick: _this.handleIconClick, "aria-label": toggleButtonTitle, onMouseDown: _this.handleIconMouseDown }),
417
416
  React.createElement(_this.popupComp, __assign({}, popupProps),
418
417
  React.createElement(_this.calendarComp, __assign({ _ref: _this.setCalendarRef }, calendarProps)))));
419
418
  }));
package/dist/npm/daterangepicker/DateRangePicker.d.ts CHANGED
@@ -93,9 +93,7 @@ export declare class DateRangePickerWithoutContext extends React.Component<DateR
93
93
  year: PropTypes.Requireable<string>;
94
94
  month: PropTypes.Requireable<string>;
95
95
  day: PropTypes.Requireable<string>;
96
- hour: PropTypes.Requireable<string>; /**
97
- * @hidden
98
- */
96
+ hour: PropTypes.Requireable<string>;
99
97
  minute: PropTypes.Requireable<string>;
100
98
  second: PropTypes.Requireable<string>;
101
99
  }>>;
@@ -179,7 +177,6 @@ export declare class DateRangePickerWithoutContext extends React.Component<DateR
179
177
  swapButton: boolean;
180
178
  };
181
179
  private _element;
182
- private _wrapper;
183
180
  private _calendar;
184
181
  private _startDateInput;
185
182
  private _endDateInput;