@progress/kendo-react-dateinputs 4.11.0-dev.202111060921 → 4.11.0-dev.202111081122

package/dist/es/daterangepicker/DateRangePicker.d.ts

@@ -108,9 +108,7 @@ export declare class DateRangePicker extends React.Component<DateRangePickerProp
             }>>;
             min: PropTypes.Requireable<Date>;
             max: PropTypes.Requireable<Date>;
-            disabled: PropTypes.Requireable<boolean>; /**
-             * @hidden
-             */
+            disabled: PropTypes.Requireable<boolean>;
             spinners: PropTypes.Requireable<boolean>;
             name: PropTypes.Requireable<string>;
             dir: PropTypes.Requireable<string>;

package/dist/es/daterangepicker/DateRangePicker.js

@@ -35,6 +35,7 @@ import { MultiViewCalendar } from '../calendar/components/MultiViewCalendar';
 import { EMPTY_SELECTIONRANGE } from '../calendar/models';
 import { MIN_DATE, MAX_DATE } from '../defaults';
 import { swapStartEnd, start, end, separator, messages } from '../messages';
+import { Button } from '@progress/kendo-react-buttons';
 var WRAPPER_STYLES = { display: 'inline-block' };
 var DateRangePicker = /** @class */ (function (_super) {
     __extends(DateRangePicker, _super);
@@ -344,7 +345,7 @@ var DateRangePicker = /** @class */ (function (_super) {
         var calendar = this.props.calendar
             ? React.createElement(this.props.calendar, __assign({}, calendarProps))
             : React.createElement(MultiViewCalendar, __assign({}, calendarProps, { ref: this.setCalendarRef }));
-        var reverseButton = (React.createElement("span", __assign({ role: "button", className: "k-select k-button k-flat", title: provideLocalizationService(this)
+        var reverseButton = (React.createElement(Button, __assign({ className: "k-select", look: "flat", title: provideLocalizationService(this)
                 .toLanguageString(swapStartEnd, messages[swapStartEnd]), onMouseDown: this.handleReverseMouseDown, onClick: this.handleReverseClick }, {
             'aria-controls': startDateInputId + ' ' + endDateInputId,
             'aria-label': provideLocalizationService(this)

package/dist/es/datetimepicker/DateTimeSelector.js

@@ -182,7 +182,6 @@ var DateTimeSelector = /** @class */ (function (_super) {
             'k-time-tab': this.state.tab === 'time',
             'k-state-disabled': disabled
         }, 'k-datetime-wrap');
-        var setButtonClassName = classNames({ 'k-state-disabled': !this.hasDateValue }, 'k-time-accept k-button k-primary');
         var localizationService = provideLocalizationService(this);
         var dateMessage = localizationService.toLanguageString(date, messages[date]);
         var timeMessage = localizationService.toLanguageString(time, messages[time]);
@@ -206,8 +205,8 @@ var DateTimeSelector = /** @class */ (function (_super) {
                     React.createElement(Calendar, __assign({ ref: function (calendar) { _this._calendar = calendar; } }, calendarProps))),
                 React.createElement("div", { className: "k-datetime-time-wrap" }, React.createElement(TimePart, { key: 1, onNowClick: this.handleNowClick, disabled: disabled || this.state.tab !== 'time', ref: function (timePart) { _this._timePart = timePart; }, min: this.minTime || MIN_TIME, max: this.maxTime || MAX_TIME, steps: this.props.steps, value: this.state.timeValue, format: format, onChange: this.handleTimeListContainerChange, onMount: this.handleTimePartMount }))),
             React.createElement("div", { className: "k-datetime-footer k-actions k-hstack k-justify-content-stretch" },
-                cancelButton && React.createElement("button", __assign({ type: "button", ref: function (btn) { _this._cancelButton = btn; }, className: "k-button k-time-cancel", onClick: this.handleReject, title: cancelMessage }, { 'aria-label': cancelMessage }), cancelMessage),
-                React.createElement("button", __assign({ type: "button", ref: function (btn) { _this._acceptButton = btn; }, className: setButtonClassName, onClick: this.handleAccept, title: setMessage }, { 'aria-label': setMessage }), setMessage))));
+                cancelButton && React.createElement(Button, __assign({ type: "button", ref: function (btn) { _this._cancelButton = btn; }, className: "k-time-cancel", onClick: this.handleReject, title: cancelMessage }, { 'aria-label': cancelMessage }), cancelMessage),
+                React.createElement(Button, __assign({ type: "button", ref: function (btn) { _this._acceptButton = btn; }, className: "k-time-accept", disabled: !this.hasDateValue, onClick: this.handleAccept, title: setMessage }, { 'aria-label': setMessage }), setMessage))));
     };
     Object.defineProperty(DateTimeSelector.prototype, "minTime", {
         get: function () {
@@ -236,8 +235,8 @@ var DateTimeSelector = /** @class */ (function (_super) {
         if (!this._acceptButton) {
             return false;
         }
-        return document.activeElement === this._acceptButton
-            || document.activeElement === this._cancelButton;
+        return (this._acceptButton && document.activeElement === this._acceptButton.element)
+            || (this._cancelButton && document.activeElement === this._cancelButton.element);
     };
     DateTimeSelector.prototype.mergeTime = function (current, candidate) {
         return current && candidate ? setTime(candidate, current) : candidate;

package/dist/es/package-metadata.js

@@ -5,7 +5,7 @@ export var packageMetadata = {
     name: '@progress/kendo-react-dateinputs',
     productName: 'KendoReact',
     productCodes: ['KENDOUIREACT', 'KENDOUICOMPLETE'],
-    publishDate: 1636189343,
+    publishDate: 1636369306,
     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/timepicker/TimePart.js

@@ -32,6 +32,7 @@ import { TimeList } from './TimeList';
 import { MIDNIGHT_DATE, MIN_TIME, MAX_TIME } from '../utils';
 import { TIME_PART } from './models/TimePart';
 import { generateSnappers, getNow, isInTimeRange, snapTime, timeInRange } from './utils';
+import { Button } from '@progress/kendo-react-buttons';
 var formatRegExp = new RegExp(TIME_PART.hour + "|" + TIME_PART.minute + "|" + TIME_PART.second + "|" + TIME_PART.dayperiod + "|literal");
 /**
  * @hidden
@@ -216,7 +217,7 @@ var TimePart = /** @class */ (function (_super) {
             React.createElement("div", { className: "k-time-header" },
                 React.createElement("span", { className: "k-title" }, this.intl.formatDate(this.value, this.dateFormatParts.reduce(this.timeFormatReducer, ''))),
                 this.showNowButton() &&
-                    React.createElement("button", __assign({ type: "button", ref: function (btn) { _this._nowButton = btn; }, className: "k-button k-flat k-time-now", title: selectNowMessage }, { 'aria-label': selectNowMessage }, { onClick: onNowClick, tabIndex: disabled ? -1 : 0 }), localizationService.toLanguageString(now, messages[now]))),
+                    React.createElement(Button, __assign({ type: "button", ref: function (btn) { _this._nowButton = btn; }, className: "k-time-now", look: "flat", primary: true, title: selectNowMessage }, { 'aria-label': selectNowMessage }, { onClick: onNowClick, tabIndex: disabled ? -1 : 0 }), localizationService.toLanguageString(now, messages[now]))),
             React.createElement("div", { className: "k-time-list-container", onKeyDown: this.handleKeyDown },
                 React.createElement("span", { className: "k-time-highlight" }),
                 this.dateFormatParts.map(function (part, idx) {
@@ -238,7 +239,7 @@ var TimePart = /** @class */ (function (_super) {
         this.nextTickId = window.setTimeout(function () { return f(); });
     };
     TimePart.prototype.hasActiveButton = function () {
-        return document.activeElement === this._nowButton;
+        return (this._nowButton && document.activeElement === this._nowButton.element);
     };
     TimePart.prototype.hasSteps = function () {
         var _this = this;

package/dist/es/timepicker/TimeSelector.js

@@ -31,6 +31,7 @@ import { messages, timePickerCancel, timePickerSet } from '../messages';
 import { MIN_TIME, MAX_TIME, MIDNIGHT_DATE } from '../utils';
 import { generateGetters, getNow, valueMerger } from './utils';
 import { TimePart } from './TimePart';
+import { Button } from '@progress/kendo-react-buttons';
 /**
  * @hidden
  */
@@ -177,8 +178,8 @@ var TimeSelector = /** @class */ (function (_super) {
             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 }),
             React.createElement("div", { className: "k-time-footer k-actions k-hstack k-justify-content-stretch" },
                 cancelButton &&
-                    React.createElement("button", __assign({ type: "button", ref: function (btn) { _this._cancelButton = btn; }, className: "k-button k-time-cancel", onClick: this.handleReject, title: cancelMessage }, { 'aria-label': cancelMessage }), cancelMessage),
-                React.createElement("button", __assign({ type: "button", ref: function (btn) { _this._acceptButton = btn; }, className: "k-time-accept k-button k-primary", onClick: this.handleAccept, title: setMessage }, { 'aria-label': setMessage }), setMessage))));
+                    React.createElement(Button, __assign({ type: "button", ref: function (btn) { _this._cancelButton = btn; }, className: "k-time-cancel", onClick: this.handleReject, title: cancelMessage }, { 'aria-label': cancelMessage }), cancelMessage),
+                React.createElement(Button, __assign({ type: "button", ref: function (btn) { _this._acceptButton = btn; }, className: "k-time-accept", primary: true, onClick: this.handleAccept, title: setMessage }, { 'aria-label': setMessage }), setMessage))));
     };
     TimeSelector.prototype.nextTick = function (f) {
         // XXX: use window.setTimeout due to async focus/blur events in IE, and missing relatedTarget prop.
@@ -187,11 +188,11 @@ var TimeSelector = /** @class */ (function (_super) {
         this.nextTickId = window.setTimeout(function () { return f(); });
     };
     TimeSelector.prototype.hasActiveButton = function () {
-        if (!this._acceptButton) {
+        if (!this._acceptButton || !this._acceptButton.element) {
             return false;
         }
-        return document.activeElement === this._acceptButton
-            || document.activeElement === this._cancelButton;
+        return (this._acceptButton && document.activeElement === this._acceptButton.element)
+            || (this._cancelButton && document.activeElement === this._cancelButton.element);
     };
     TimeSelector.propTypes = {
         cancelButton: PropTypes.bool,

package/dist/npm/daterangepicker/DateRangePicker.d.ts

@@ -108,9 +108,7 @@ export declare class DateRangePicker extends React.Component<DateRangePickerProp
             }>>;
             min: PropTypes.Requireable<Date>;
             max: PropTypes.Requireable<Date>;
-            disabled: PropTypes.Requireable<boolean>; /**
-             * @hidden
-             */
+            disabled: PropTypes.Requireable<boolean>;
             spinners: PropTypes.Requireable<boolean>;
             name: PropTypes.Requireable<string>;
             dir: PropTypes.Requireable<string>;

package/dist/npm/daterangepicker/DateRangePicker.js

@@ -37,6 +37,7 @@ var MultiViewCalendar_1 = require("../calendar/components/MultiViewCalendar");
 var models_1 = require("../calendar/models");
 var defaults_1 = require("../defaults");
 var messages_1 = require("../messages");
+var kendo_react_buttons_1 = require("@progress/kendo-react-buttons");
 var WRAPPER_STYLES = { display: 'inline-block' };
 var DateRangePicker = /** @class */ (function (_super) {
     __extends(DateRangePicker, _super);
@@ -346,7 +347,7 @@ var DateRangePicker = /** @class */ (function (_super) {
         var calendar = this.props.calendar
             ? React.createElement(this.props.calendar, __assign({}, calendarProps))
             : React.createElement(MultiViewCalendar_1.MultiViewCalendar, __assign({}, calendarProps, { ref: this.setCalendarRef }));
-        var reverseButton = (React.createElement("span", __assign({ role: "button", className: "k-select k-button k-flat", title: kendo_react_intl_1.provideLocalizationService(this)
+        var reverseButton = (React.createElement(kendo_react_buttons_1.Button, __assign({ className: "k-select", look: "flat", title: kendo_react_intl_1.provideLocalizationService(this)
                 .toLanguageString(messages_1.swapStartEnd, messages_1.messages[messages_1.swapStartEnd]), onMouseDown: this.handleReverseMouseDown, onClick: this.handleReverseClick }, {
             'aria-controls': startDateInputId + ' ' + endDateInputId,
             'aria-label': kendo_react_intl_1.provideLocalizationService(this)

package/dist/npm/datetimepicker/DateTimeSelector.js

@@ -184,7 +184,6 @@ var DateTimeSelector = /** @class */ (function (_super) {
             'k-time-tab': this.state.tab === 'time',
             'k-state-disabled': disabled
         }, 'k-datetime-wrap');
-        var setButtonClassName = kendo_react_common_1.classNames({ 'k-state-disabled': !this.hasDateValue }, 'k-time-accept k-button k-primary');
         var localizationService = kendo_react_intl_1.provideLocalizationService(this);
         var dateMessage = localizationService.toLanguageString(messages_1.date, messages_1.messages[messages_1.date]);
         var timeMessage = localizationService.toLanguageString(messages_1.time, messages_1.messages[messages_1.time]);
@@ -208,8 +207,8 @@ var DateTimeSelector = /** @class */ (function (_super) {
                     React.createElement(Calendar_1.Calendar, __assign({ ref: function (calendar) { _this._calendar = calendar; } }, calendarProps))),
                 React.createElement("div", { className: "k-datetime-time-wrap" }, React.createElement(TimePart_1.TimePart, { key: 1, onNowClick: this.handleNowClick, disabled: disabled || this.state.tab !== 'time', ref: function (timePart) { _this._timePart = timePart; }, min: this.minTime || utils_1.MIN_TIME, max: this.maxTime || utils_1.MAX_TIME, steps: this.props.steps, value: this.state.timeValue, format: format, onChange: this.handleTimeListContainerChange, onMount: this.handleTimePartMount }))),
             React.createElement("div", { className: "k-datetime-footer k-actions k-hstack k-justify-content-stretch" },
-                cancelButton && React.createElement("button", __assign({ type: "button", ref: function (btn) { _this._cancelButton = btn; }, className: "k-button k-time-cancel", onClick: this.handleReject, title: cancelMessage }, { 'aria-label': cancelMessage }), cancelMessage),
-                React.createElement("button", __assign({ type: "button", ref: function (btn) { _this._acceptButton = btn; }, className: setButtonClassName, onClick: this.handleAccept, title: setMessage }, { 'aria-label': setMessage }), setMessage))));
+                cancelButton && React.createElement(kendo_react_buttons_1.Button, __assign({ type: "button", ref: function (btn) { _this._cancelButton = btn; }, className: "k-time-cancel", onClick: this.handleReject, title: cancelMessage }, { 'aria-label': cancelMessage }), cancelMessage),
+                React.createElement(kendo_react_buttons_1.Button, __assign({ type: "button", ref: function (btn) { _this._acceptButton = btn; }, className: "k-time-accept", disabled: !this.hasDateValue, onClick: this.handleAccept, title: setMessage }, { 'aria-label': setMessage }), setMessage))));
     };
     Object.defineProperty(DateTimeSelector.prototype, "minTime", {
         get: function () {
@@ -238,8 +237,8 @@ var DateTimeSelector = /** @class */ (function (_super) {
         if (!this._acceptButton) {
             return false;
         }
-        return document.activeElement === this._acceptButton
-            || document.activeElement === this._cancelButton;
+        return (this._acceptButton && document.activeElement === this._acceptButton.element)
+            || (this._cancelButton && document.activeElement === this._cancelButton.element);
     };
     DateTimeSelector.prototype.mergeTime = function (current, candidate) {
         return current && candidate ? utils_1.setTime(candidate, current) : candidate;

package/dist/npm/package-metadata.js

@@ -7,7 +7,7 @@ exports.packageMetadata = {
     name: '@progress/kendo-react-dateinputs',
     productName: 'KendoReact',
     productCodes: ['KENDOUIREACT', 'KENDOUICOMPLETE'],
-    publishDate: 1636189343,
+    publishDate: 1636369306,
     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/timepicker/TimePart.js

@@ -34,6 +34,7 @@ var TimeList_1 = require("./TimeList");
 var utils_1 = require("../utils");
 var TimePart_1 = require("./models/TimePart");
 var utils_2 = require("./utils");
+var kendo_react_buttons_1 = require("@progress/kendo-react-buttons");
 var formatRegExp = new RegExp(TimePart_1.TIME_PART.hour + "|" + TimePart_1.TIME_PART.minute + "|" + TimePart_1.TIME_PART.second + "|" + TimePart_1.TIME_PART.dayperiod + "|literal");
 /**
  * @hidden
@@ -218,7 +219,7 @@ var TimePart = /** @class */ (function (_super) {
             React.createElement("div", { className: "k-time-header" },
                 React.createElement("span", { className: "k-title" }, this.intl.formatDate(this.value, this.dateFormatParts.reduce(this.timeFormatReducer, ''))),
                 this.showNowButton() &&
-                    React.createElement("button", __assign({ type: "button", ref: function (btn) { _this._nowButton = btn; }, className: "k-button k-flat k-time-now", title: selectNowMessage }, { 'aria-label': selectNowMessage }, { onClick: onNowClick, tabIndex: disabled ? -1 : 0 }), localizationService.toLanguageString(messages_1.now, messages_1.messages[messages_1.now]))),
+                    React.createElement(kendo_react_buttons_1.Button, __assign({ type: "button", ref: function (btn) { _this._nowButton = btn; }, className: "k-time-now", look: "flat", primary: true, title: selectNowMessage }, { 'aria-label': selectNowMessage }, { onClick: onNowClick, tabIndex: disabled ? -1 : 0 }), localizationService.toLanguageString(messages_1.now, messages_1.messages[messages_1.now]))),
             React.createElement("div", { className: "k-time-list-container", onKeyDown: this.handleKeyDown },
                 React.createElement("span", { className: "k-time-highlight" }),
                 this.dateFormatParts.map(function (part, idx) {
@@ -240,7 +241,7 @@ var TimePart = /** @class */ (function (_super) {
         this.nextTickId = window.setTimeout(function () { return f(); });
     };
     TimePart.prototype.hasActiveButton = function () {
-        return document.activeElement === this._nowButton;
+        return (this._nowButton && document.activeElement === this._nowButton.element);
     };
     TimePart.prototype.hasSteps = function () {
         var _this = this;

package/dist/npm/timepicker/TimeSelector.js

@@ -33,6 +33,7 @@ var messages_1 = require("../messages");
 var utils_1 = require("../utils");
 var utils_2 = require("./utils");
 var TimePart_1 = require("./TimePart");
+var kendo_react_buttons_1 = require("@progress/kendo-react-buttons");
 /**
  * @hidden
  */
@@ -179,8 +180,8 @@ var TimeSelector = /** @class */ (function (_super) {
             React.createElement(TimePart_1.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 }),
             React.createElement("div", { className: "k-time-footer k-actions k-hstack k-justify-content-stretch" },
                 cancelButton &&
-                    React.createElement("button", __assign({ type: "button", ref: function (btn) { _this._cancelButton = btn; }, className: "k-button k-time-cancel", onClick: this.handleReject, title: cancelMessage }, { 'aria-label': cancelMessage }), cancelMessage),
-                React.createElement("button", __assign({ type: "button", ref: function (btn) { _this._acceptButton = btn; }, className: "k-time-accept k-button k-primary", onClick: this.handleAccept, title: setMessage }, { 'aria-label': setMessage }), setMessage))));
+                    React.createElement(kendo_react_buttons_1.Button, __assign({ type: "button", ref: function (btn) { _this._cancelButton = btn; }, className: "k-time-cancel", onClick: this.handleReject, title: cancelMessage }, { 'aria-label': cancelMessage }), cancelMessage),
+                React.createElement(kendo_react_buttons_1.Button, __assign({ type: "button", ref: function (btn) { _this._acceptButton = btn; }, className: "k-time-accept", primary: true, onClick: this.handleAccept, title: setMessage }, { 'aria-label': setMessage }), setMessage))));
     };
     TimeSelector.prototype.nextTick = function (f) {
         // XXX: use window.setTimeout due to async focus/blur events in IE, and missing relatedTarget prop.
@@ -189,11 +190,11 @@ var TimeSelector = /** @class */ (function (_super) {
         this.nextTickId = window.setTimeout(function () { return f(); });
     };
     TimeSelector.prototype.hasActiveButton = function () {
-        if (!this._acceptButton) {
+        if (!this._acceptButton || !this._acceptButton.element) {
             return false;
         }
-        return document.activeElement === this._acceptButton
-            || document.activeElement === this._cancelButton;
+        return (this._acceptButton && document.activeElement === this._acceptButton.element)
+            || (this._cancelButton && document.activeElement === this._cancelButton.element);
     };
     TimeSelector.propTypes = {
         cancelButton: PropTypes.bool,