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

package/dist/npm/daterangepicker/DateRangePicker.js

@@ -39,14 +39,12 @@ var defaults_1 = require("../defaults");
 var messages_1 = require("../messages");
 var kendo_react_buttons_1 = require("@progress/kendo-react-buttons");
 var utils_1 = require("../utils");
-var WRAPPER_STYLES = { display: 'inline-block' };
 /** @hidden */
 var DateRangePickerWithoutContext = /** @class */ (function (_super) {
     __extends(DateRangePickerWithoutContext, _super);
     function DateRangePickerWithoutContext(props) {
         var _this = _super.call(this, props) || this;
         _this._element = null;
-        _this._wrapper = null;
         _this._calendar = null;
         _this._startDateInput = React.createRef();
         _this._endDateInput = React.createRef();
@@ -102,10 +100,10 @@ var DateRangePickerWithoutContext = /** @class */ (function (_super) {
                 _this.setShow(true);
             }
             if (_this.startDateInput && _this.startDateInput.element) {
-                _this.startDateInput.element.classList.add('k-state-focused');
+                _this.startDateInput.element.classList.add('k-focus');
             }
             if (_this.endDateInput && _this.endDateInput.element) {
-                _this.endDateInput.element.classList.add('k-state-focused');
+                _this.endDateInput.element.classList.add('k-focus');
             }
             var onFocus = _this.props.onFocus;
             if (onFocus) {
@@ -115,10 +113,10 @@ var DateRangePickerWithoutContext = /** @class */ (function (_super) {
         _this.handleBlur = function (event) {
             _this.nextTick(function () {
                 if (_this.startDateInput && _this.startDateInput.element) {
-                    _this.startDateInput.element.classList.remove('k-state-focused');
+                    _this.startDateInput.element.classList.remove('k-focus');
                 }
                 if (_this.endDateInput && _this.endDateInput.element) {
-                    _this.endDateInput.element.classList.remove('k-state-focused');
+                    _this.endDateInput.element.classList.remove('k-focus');
                 }
                 _this.setShow(false);
             });
@@ -330,7 +328,7 @@ var DateRangePickerWithoutContext = /** @class */ (function (_super) {
         var startDateInputId = (this.props.startDateInputSettings || {}).id || this._startInputId;
         var endDateInputId = (this.props.endDateInputSettings || {}).id || this._endInputId;
         var rootClassName = kendo_react_common_1.classNames('k-daterangepicker', {
-            'k-state-disabled': this.props.disabled
+            'k-disabled': this.props.disabled
         }, this.props.className);
         var localizationService = kendo_react_intl_1.provideLocalizationService(this);
         var startMessage = localizationService.toLanguageString(messages_1.start, messages_1.messages[messages_1.start]);
@@ -338,7 +336,7 @@ var DateRangePickerWithoutContext = /** @class */ (function (_super) {
         var separatorMessage = localizationService.toLanguageString(messages_1.separator, messages_1.messages[messages_1.separator]);
         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 });
         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 });
-        var popupProps = __assign({ animate: this._wrapper !== null, anchor: this._wrapper, id: this._popupId, anchorAlign: {
+        var popupProps = __assign({ animate: this._element !== null, anchor: this._element, id: this._popupId, anchorAlign: {
                 horizontal: 'left',
                 vertical: 'bottom'
             }, popupAlign: {
@@ -359,20 +357,17 @@ var DateRangePickerWithoutContext = /** @class */ (function (_super) {
         return (React.createElement("span", { ref: function (span) {
                 _this._element = span;
             }, 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 },
-            React.createElement("span", { ref: function (span) {
-                    _this._wrapper = span;
-                }, className: "k-daterangepicker-wrap", style: WRAPPER_STYLES },
-                this.props.startDateInput
-                    ? React.createElement(this.props.startDateInput, __assign({}, startDateInputProps))
-                    : React.createElement(DateInput_1.DateInput, __assign({}, startDateInputProps, { ref: this._startDateInput })),
-                (this.props.allowReverse
-                    || (this.props.calendarSettings && this.props.calendarSettings.allowReverse))
-                    && this.props.swapButton
-                    ? (reverseButton)
-                    : (separatorMessage),
-                this.props.endDateInput
-                    ? React.createElement(this.props.endDateInput, __assign({}, endDateInputProps))
-                    : React.createElement(DateInput_1.DateInput, __assign({}, endDateInputProps, { ref: this._endDateInput }))),
+            this.props.startDateInput
+                ? React.createElement(this.props.startDateInput, __assign({}, startDateInputProps))
+                : React.createElement(DateInput_1.DateInput, __assign({}, startDateInputProps, { ref: this._startDateInput })),
+            (this.props.allowReverse
+                || (this.props.calendarSettings && this.props.calendarSettings.allowReverse))
+                && this.props.swapButton
+                ? (reverseButton)
+                : (separatorMessage),
+            this.props.endDateInput
+                ? React.createElement(this.props.endDateInput, __assign({}, endDateInputProps))
+                : React.createElement(DateInput_1.DateInput, __assign({}, endDateInputProps, { ref: this._endDateInput })),
             this.props.popup
                 ? React.createElement(this.props.popup, __assign({}, popupProps), calendar)
                 : React.createElement(kendo_react_popup_1.Popup, __assign({}, popupProps), calendar)));

package/dist/npm/datetimepicker/DateTimePicker.js

@@ -323,14 +323,13 @@ var DateTimePickerWithoutContext = /** @class */ (function (_super) {
                     _b["k-input-" + (kendo_react_common_1.kendoThemeMaps.sizeMap[size] || size)] = size,
                     _b["k-rounded-" + (kendo_react_common_1.kendoThemeMaps.roundedMap[rounded] || rounded)] = rounded,
                     _b["k-input-" + fillMode] = fillMode,
-                    _b['k-valid'] = isValid,
                     _b['k-invalid'] = !isValid,
                     _b['k-required'] = _this.required,
                     _b['k-disabled'] = _this.props.disabled,
                     _b), className), onKeyDown: _this.handleKeyDown, style: { width: width }, onFocus: onFocus, onBlur: onBlur },
                 React.createElement(_this.dateInputComp, __assign({ _ref: _this._dateInput }, dataInputProps)),
                 React.createElement(kendo_react_buttons_1.Button, __assign({ tabIndex: -1, type: "button", icon: 'calendar', onMouseDown: _this.handleIconMouseDown, onClick: _this.handleDateIconClick, title: kendo_react_intl_1.provideLocalizationService(_this)
-                        .toLanguageString(messages_1.toggleDateTimeSelector, messages_1.messages[messages_1.toggleDateTimeSelector]), className: "k-input-button" }, {
+                        .toLanguageString(messages_1.toggleDateTimeSelector, messages_1.messages[messages_1.toggleDateTimeSelector]), className: "k-input-button", rounded: null }, {
                     'aria-controls': _this._popupId,
                     'aria-label': kendo_react_intl_1.provideLocalizationService(_this)
                         .toLanguageString(messages_1.toggleDateTimeSelector, messages_1.messages[messages_1.toggleDateTimeSelector])

package/dist/npm/datetimepicker/DateTimeSelector.js

@@ -182,7 +182,7 @@ var DateTimeSelector = /** @class */ (function (_super) {
         var rootClassName = kendo_react_common_1.classNames({
             'k-date-tab': this.state.tab === 'date',
             'k-time-tab': this.state.tab === 'time',
-            'k-state-disabled': disabled
+            'k-disabled': disabled
         }, 'k-datetime-wrap');
         var localizationService = kendo_react_intl_1.provideLocalizationService(this);
         var dateMessage = localizationService.toLanguageString(messages_1.date, messages_1.messages[messages_1.date]);

package/dist/npm/package-metadata.js

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

@@ -210,7 +210,7 @@ var TimePart = /** @class */ (function (_super) {
             .splitDateFormat(format || TimePart.defaultProps.format)
             .filter(this.timeFormatFilter);
         var rootClassName = kendo_react_common_1.classNames({
-            'k-state-disabled': disabled
+            'k-disabled': disabled
         }, className, 'k-time-part');
         this.timeLists = [];
         var localizationService = kendo_react_intl_1.provideLocalizationService(this);
@@ -225,7 +225,7 @@ var TimePart = /** @class */ (function (_super) {
                 this.dateFormatParts.map(function (part, idx) {
                     return (part.type !== 'literal'
                         ? React.createElement("div", { key: idx, className: kendo_react_common_1.classNames('k-time-list-wrapper', {
-                                'k-state-focused': idx === _this.state.activeListIndex
+                                'k-focus': idx === _this.state.activeListIndex
                             }), role: "presentation", tabIndex: -1 },
                             React.createElement("span", { className: "k-title", onMouseDown: function (e) { e.preventDefault(); } }, _this.intl.dateFieldName(part)),
                             React.createElement(TimeList_1.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/npm/timepicker/TimePicker.js

@@ -373,13 +373,12 @@ var TimePickerWithoutContext = /** @class */ (function (_super) {
                     _b["k-input-" + (kendo_react_common_1.kendoThemeMaps.sizeMap[size] || size)] = size,
                     _b["k-rounded-" + (kendo_react_common_1.kendoThemeMaps.roundedMap[rounded] || rounded)] = rounded,
                     _b["k-input-" + fillMode] = fillMode,
-                    _b['k-valid'] = isValid,
                     _b['k-invalid'] = !isValid,
                     _b['k-required'] = _this.required,
                     _b['k-disabled'] = _this.props.disabled,
                     _b), className), onKeyDown: _this.handleKeyDown, style: { width: width }, onFocus: onFocus, onBlur: onBlur },
                 React.createElement(_this.dateInputComp, __assign({ _ref: _this._dateInput }, dateInputProps)),
-                React.createElement(kendo_react_buttons_1.Button, __assign({ tabIndex: -1, type: "button", icon: 'clock', onMouseDown: _this.handleIconMouseDown, onClick: _this.handleIconClick, title: toggleTimeMessage, "aria-label": toggleTimeMessage, className: "k-input-button" }, {
+                React.createElement(kendo_react_buttons_1.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 }, {
                     'aria-controls': _this._popupId,
                     'aria-label': toggleClockMessage
                 })),

package/dist/npm/timepicker/TimeSelector.js

@@ -175,7 +175,7 @@ var TimeSelector = /** @class */ (function (_super) {
         var cancelMessage = localizationService.toLanguageString(messages_1.timePickerCancel, messages_1.messages[messages_1.timePickerCancel]);
         var setMessage = localizationService.toLanguageString(messages_1.timePickerSet, messages_1.messages[messages_1.timePickerSet]);
         return (React.createElement("div", { ref: function (el) { _this._element = el; }, tabIndex: !disabled ? tabIndex || 0 : undefined, className: kendo_react_common_1.classNames('k-timeselector k-reset', className, {
-                'k-state-disabled': disabled
+                'k-disabled': disabled
             }), onKeyDown: this.handleKeyDown },
             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, show: this.props.show }),
             React.createElement("div", { className: "k-time-footer k-actions k-hstack k-justify-content-stretch" },