@progress/kendo-react-dateinputs 5.17.0-dev.202308081122 → 5.17.0-dev.202308081128

package/dist/es/calendar/components/MultiViewCalendar.d.ts

@@ -44,6 +44,7 @@ export interface MultiViewCalendarState {
     value: Date | Date[] | SelectionRange | null;
     activeView: CalendarViewEnum;
     focusedDate: Date;
+    navigateDate: Date;
 }
 /** @hidden */
 export declare class MultiViewCalendarWithoutContext extends React.Component<MultiViewCalendarProps, MultiViewCalendarState> {
@@ -155,9 +156,9 @@ export declare class MultiViewCalendarWithoutContext extends React.Component<Mul
     protected rangeWithFocused: (range: SelectionRange, focusedDate: Date) => SelectionRange;
     protected generateRange: (candidate: Date, value: SelectionRange) => SelectionRange;
     protected canNavigate: (action: Action) => boolean;
-    protected isListInRange: (list: Date[]) => boolean;
-    protected navigate: (action: Action) => void;
-    protected move: (action: Action) => Date;
+    protected isInMonth(date: Date, month: Date): boolean;
+    protected navigate: (action: Action, date: Date) => void;
+    protected move: (action: Action, date: Date) => Date;
     protected clampDate: (value: Date) => Date;
     protected shouldAutoCorrect: (candidate: Date, value: SelectionRange) => boolean;
     private handleCellEnter;

package/dist/es/calendar/components/MultiViewCalendar.js

@@ -28,7 +28,7 @@ import * as React from 'react';
 import * as PropTypes from 'prop-types';
 import { registerForIntl, provideIntlService, registerForLocalization, provideLocalizationService } from '@progress/kendo-react-intl';
 import { classNames, guid, Keys, createPropsContext, withPropsContext } from '@progress/kendo-react-common';
-import { cloneDate, isEqualDate, getDate } from '@progress/kendo-date-math';
+import { cloneDate, isEqualDate, getDate, firstDayOfMonth, lastDayOfMonth } from '@progress/kendo-date-math';
 import { Button } from '@progress/kendo-react-buttons';
 import { chevronLeftIcon, chevronRightIcon } from '@progress/kendo-svg-icons';
 import { Action, CalendarViewEnum, EMPTY_SELECTIONRANGE } from '../models';
@@ -122,17 +122,13 @@ var MultiViewCalendarWithoutContext = /** @class */ (function (_super) {
                 || _this.service.isInSameView(candidate, _this.min)
                 || _this.service.isInSameView(candidate, _this.max);
         };
-        _this.isListInRange = function (list) {
-            return _this.min < list[0]
-                && _this.max > list[Math.max(0, (_this.props.views || MultiViewCalendarWithoutContext.defaultProps.views) - 1)];
-        };
-        _this.navigate = function (action) {
+        _this.navigate = function (action, date) {
             _this.calculateFocusFromValue = false;
-            var candidate = _this.move(action);
-            _this.setState({ focusedDate: candidate });
+            var candidate = _this.move(action, date);
+            _this.setState({ navigateDate: candidate, focusedDate: candidate });
         };
-        _this.move = function (action) {
-            return _this.clampDate(_this.service.move(_this.focusedDate, action));
+        _this.move = function (action, date) {
+            return _this.clampDate(_this.service.move(date, action));
         };
         _this.clampDate = function (value) {
             return dateInRange(value, _this.min, _this.max);
@@ -192,10 +188,19 @@ var MultiViewCalendarWithoutContext = /** @class */ (function (_super) {
             _this.handleDateChange(event);
         };
         _this.handlePrevButtonClick = function () {
-            _this.navigate(Action.PrevView);
+            var action = Action.PrevView;
+            if (_this.state.activeView > 0 && _this.focusedDate.getFullYear() > _this.dates[0].getFullYear()) {
+                _this.navigate(action, _this.move(action, _this.focusedDate));
+            }
+            else {
+                var inMonthDate = _this.isInMonth(_this.focusedDate, _this.dates[1])
+                    ? _this.move(action, _this.focusedDate)
+                    : _this.focusedDate;
+                _this.navigate(action, inMonthDate);
+            }
         };
         _this.handleNextButtonClick = function () {
-            _this.navigate(Action.NextView);
+            _this.navigate(Action.NextView, _this.focusedDate);
         };
         _this.handleKeyDown = function (event) {
             var keyCode = event.keyCode;
@@ -213,6 +218,10 @@ var MultiViewCalendarWithoutContext = /** @class */ (function (_super) {
                 if (isEqualDate(_this.focusedDate, candidate)) {
                     return;
                 }
+                if (_this.dates && _this.service && !_this.service.isInArray(candidate, _this.dates)) {
+                    _this.setState({ navigateDate: candidate });
+                }
+                ;
                 _this.calculateFocusFromValue = false;
                 _this.setState({ focusedDate: candidate });
             }
@@ -221,7 +230,7 @@ var MultiViewCalendarWithoutContext = /** @class */ (function (_super) {
         _this.handleViewChange = function (_a) {
             var view = _a.view;
             _this.calculateFocusFromValue = false;
-            _this.setState({ activeView: view });
+            _this.setState(function (state) { return ({ activeView: view, navigateDate: state.focusedDate }); });
         };
         _this.handleDateChange = function (event) {
             var focusedDate = cloneDate(event.value);
@@ -282,6 +291,9 @@ var MultiViewCalendarWithoutContext = /** @class */ (function (_super) {
                     break;
             }
             _this.valueDuringOnChange = value;
+            if (event.isTodayClick) {
+                _this.setState({ navigateDate: focusedDate });
+            }
             _this.setState({ value: value, focusedDate: focusedDate });
             _this.valueDuringOnChange = value;
             var onChange = _this.props.onChange;
@@ -308,7 +320,8 @@ var MultiViewCalendarWithoutContext = /** @class */ (function (_super) {
         _this.state = {
             value: value,
             activeView: activeView,
-            focusedDate: focusedDate
+            focusedDate: focusedDate,
+            navigateDate: focusedDate
         };
         _this.activeRangeEnd = extractActiveRange(selectedRange, selectedDate);
         _this.bus = new BusViewService(_this.handleViewChange);
@@ -445,6 +458,7 @@ var MultiViewCalendarWithoutContext = /** @class */ (function (_super) {
         this.bus.configure(this.bottomView, this.topView);
         var activeView = viewInRange(this.state.activeView, this.bottomView, this.topView);
         this.service = this.bus.service(activeView, this.intl);
+        // console.log('this.service', this.service);
         this.selectedDate = extractDateFromValue(this.min, this.max, this.value);
         this.selectedMultiple = extractMultipleFromValue(this.min, this.max, this.value);
         this.selectedRange = extractRangeFromValue(this.value);
@@ -463,10 +477,10 @@ var MultiViewCalendarWithoutContext = /** @class */ (function (_super) {
         var prevBtnAria = { 'aria-disabled': isPrevDisabled };
         var nextBtnAria = { 'aria-disabled': isNextDisabled };
         var didViewChange = this.lastView !== activeView;
-        var isDateInList = this.dates && this.service.isInArray(this.focusedDate, this.dates);
+        var isDateInMonth = this.dates && this.isInMonth(this.state.navigateDate, this.dates[0]);
         var didViewsCountChange = this.lastViewsCount !== this.props.views;
-        if (!isDateInList || didViewChange || didViewsCountChange) {
-            this.dates = this.service.datesList(this.focusedDate, this.props.views || HorizontalViewList.defaultProps.views);
+        if (!isDateInMonth || didViewChange || didViewsCountChange) {
+            this.dates = this.service.datesList(this.state.navigateDate, this.props.views || HorizontalViewList.defaultProps.views);
         }
         var activeDate = cloneDate(this.dates && this.dates[0] ? this.dates[0] : getToday());
         return (React.createElement("div", { ref: function (el) { _this._element = el; }, className: wrapperClassName, id: this.props.id || this.wrapperID, "aria-labelledby": this.props.ariaLabelledBy, "aria-describedby": this.props.ariaDescribedBy, tabIndex: !this.props.disabled ? this.props.tabIndex : undefined, onFocus: this.handleFocus, onBlur: this.handleBlur, onMouseDown: this.handleMouseDown, onClick: this.handleClick, onKeyDown: this.handleKeyDown, "aria-disabled": this.props.disabled, dir: this.props.dir },
@@ -476,6 +490,13 @@ var MultiViewCalendarWithoutContext = /** @class */ (function (_super) {
                     React.createElement(Button, __assign({ type: "button", className: "k-calendar-nav-next", icon: this.isRtl ? 'chevron-left' : 'chevron-right', svgIcon: this.isRtl ? chevronLeftIcon : chevronRightIcon, fillMode: "flat", title: nextViewTittle, disabled: isNextDisabled, onClick: this.handleNextButtonClick }, nextBtnAria)))) }),
             React.createElement(HorizontalViewList, { ref: function (el) { _this.calendarViewList = el; }, dates: this.dates, activeView: activeView, focusedDate: this.focusedDate, min: this.min, max: this.max, bus: this.bus, service: this.service, selectionRange: visualizedRange, value: this.selectedMultiple || this.selectedDate, cellUID: this.cellUID, views: this.props.views, onChange: this.handleDateChange, showWeekNumbers: this.props.weekNumber, onCellEnter: this.handleCellEnter, cell: this.props.cell, weekCell: this.props.weekCell, headerTitle: this.props.headerTitle, verticalView: this.props.mobileMode })));
     };
+    // protected isListInRange = (list: Date[]): boolean => {
+    //     return this.min < list[0]
+    //         && this.max > list[Math.max(0, (this.props.views || MultiViewCalendarWithoutContext.defaultProps.views) - 1)];
+    // };
+    MultiViewCalendarWithoutContext.prototype.isInMonth = function (date, month) {
+        return !!month && firstDayOfMonth(month) <= date && date <= lastDayOfMonth(month);
+    };
     /**
      * @hidden
      */

package/dist/es/package-metadata.js

@@ -5,7 +5,7 @@ export var packageMetadata = {
     name: '@progress/kendo-react-dateinputs',
     productName: 'KendoReact',
     productCodes: ['KENDOUIREACT', 'KENDOUICOMPLETE'],
-    publishDate: 1691491628,
+    publishDate: 1691491790,
     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/calendar/components/MultiViewCalendar.d.ts

@@ -44,6 +44,7 @@ export interface MultiViewCalendarState {
     value: Date | Date[] | SelectionRange | null;
     activeView: CalendarViewEnum;
     focusedDate: Date;
+    navigateDate: Date;
 }
 /** @hidden */
 export declare class MultiViewCalendarWithoutContext extends React.Component<MultiViewCalendarProps, MultiViewCalendarState> {
@@ -155,9 +156,9 @@ export declare class MultiViewCalendarWithoutContext extends React.Component<Mul
     protected rangeWithFocused: (range: SelectionRange, focusedDate: Date) => SelectionRange;
     protected generateRange: (candidate: Date, value: SelectionRange) => SelectionRange;
     protected canNavigate: (action: Action) => boolean;
-    protected isListInRange: (list: Date[]) => boolean;
-    protected navigate: (action: Action) => void;
-    protected move: (action: Action) => Date;
+    protected isInMonth(date: Date, month: Date): boolean;
+    protected navigate: (action: Action, date: Date) => void;
+    protected move: (action: Action, date: Date) => Date;
     protected clampDate: (value: Date) => Date;
     protected shouldAutoCorrect: (candidate: Date, value: SelectionRange) => boolean;
     private handleCellEnter;

package/dist/npm/calendar/components/MultiViewCalendar.js

@@ -125,17 +125,13 @@ var MultiViewCalendarWithoutContext = /** @class */ (function (_super) {
                 || _this.service.isInSameView(candidate, _this.min)
                 || _this.service.isInSameView(candidate, _this.max);
         };
-        _this.isListInRange = function (list) {
-            return _this.min < list[0]
-                && _this.max > list[Math.max(0, (_this.props.views || MultiViewCalendarWithoutContext.defaultProps.views) - 1)];
-        };
-        _this.navigate = function (action) {
+        _this.navigate = function (action, date) {
             _this.calculateFocusFromValue = false;
-            var candidate = _this.move(action);
-            _this.setState({ focusedDate: candidate });
+            var candidate = _this.move(action, date);
+            _this.setState({ navigateDate: candidate, focusedDate: candidate });
         };
-        _this.move = function (action) {
-            return _this.clampDate(_this.service.move(_this.focusedDate, action));
+        _this.move = function (action, date) {
+            return _this.clampDate(_this.service.move(date, action));
         };
         _this.clampDate = function (value) {
             return (0, utils_2.dateInRange)(value, _this.min, _this.max);
@@ -195,10 +191,19 @@ var MultiViewCalendarWithoutContext = /** @class */ (function (_super) {
             _this.handleDateChange(event);
         };
         _this.handlePrevButtonClick = function () {
-            _this.navigate(models_1.Action.PrevView);
+            var action = models_1.Action.PrevView;
+            if (_this.state.activeView > 0 && _this.focusedDate.getFullYear() > _this.dates[0].getFullYear()) {
+                _this.navigate(action, _this.move(action, _this.focusedDate));
+            }
+            else {
+                var inMonthDate = _this.isInMonth(_this.focusedDate, _this.dates[1])
+                    ? _this.move(action, _this.focusedDate)
+                    : _this.focusedDate;
+                _this.navigate(action, inMonthDate);
+            }
         };
         _this.handleNextButtonClick = function () {
-            _this.navigate(models_1.Action.NextView);
+            _this.navigate(models_1.Action.NextView, _this.focusedDate);
         };
         _this.handleKeyDown = function (event) {
             var keyCode = event.keyCode;
@@ -216,6 +221,10 @@ var MultiViewCalendarWithoutContext = /** @class */ (function (_super) {
                 if ((0, kendo_date_math_1.isEqualDate)(_this.focusedDate, candidate)) {
                     return;
                 }
+                if (_this.dates && _this.service && !_this.service.isInArray(candidate, _this.dates)) {
+                    _this.setState({ navigateDate: candidate });
+                }
+                ;
                 _this.calculateFocusFromValue = false;
                 _this.setState({ focusedDate: candidate });
             }
@@ -224,7 +233,7 @@ var MultiViewCalendarWithoutContext = /** @class */ (function (_super) {
         _this.handleViewChange = function (_a) {
             var view = _a.view;
             _this.calculateFocusFromValue = false;
-            _this.setState({ activeView: view });
+            _this.setState(function (state) { return ({ activeView: view, navigateDate: state.focusedDate }); });
         };
         _this.handleDateChange = function (event) {
             var focusedDate = (0, kendo_date_math_1.cloneDate)(event.value);
@@ -285,6 +294,9 @@ var MultiViewCalendarWithoutContext = /** @class */ (function (_super) {
                     break;
             }
             _this.valueDuringOnChange = value;
+            if (event.isTodayClick) {
+                _this.setState({ navigateDate: focusedDate });
+            }
             _this.setState({ value: value, focusedDate: focusedDate });
             _this.valueDuringOnChange = value;
             var onChange = _this.props.onChange;
@@ -311,7 +323,8 @@ var MultiViewCalendarWithoutContext = /** @class */ (function (_super) {
         _this.state = {
             value: value,
             activeView: activeView,
-            focusedDate: focusedDate
+            focusedDate: focusedDate,
+            navigateDate: focusedDate
         };
         _this.activeRangeEnd = extractActiveRange(selectedRange, selectedDate);
         _this.bus = new services_1.BusViewService(_this.handleViewChange);
@@ -448,6 +461,7 @@ var MultiViewCalendarWithoutContext = /** @class */ (function (_super) {
         this.bus.configure(this.bottomView, this.topView);
         var activeView = (0, utils_2.viewInRange)(this.state.activeView, this.bottomView, this.topView);
         this.service = this.bus.service(activeView, this.intl);
+        // console.log('this.service', this.service);
         this.selectedDate = extractDateFromValue(this.min, this.max, this.value);
         this.selectedMultiple = extractMultipleFromValue(this.min, this.max, this.value);
         this.selectedRange = extractRangeFromValue(this.value);
@@ -466,10 +480,10 @@ var MultiViewCalendarWithoutContext = /** @class */ (function (_super) {
         var prevBtnAria = { 'aria-disabled': isPrevDisabled };
         var nextBtnAria = { 'aria-disabled': isNextDisabled };
         var didViewChange = this.lastView !== activeView;
-        var isDateInList = this.dates && this.service.isInArray(this.focusedDate, this.dates);
+        var isDateInMonth = this.dates && this.isInMonth(this.state.navigateDate, this.dates[0]);
         var didViewsCountChange = this.lastViewsCount !== this.props.views;
-        if (!isDateInList || didViewChange || didViewsCountChange) {
-            this.dates = this.service.datesList(this.focusedDate, this.props.views || HorizontalViewList_1.HorizontalViewList.defaultProps.views);
+        if (!isDateInMonth || didViewChange || didViewsCountChange) {
+            this.dates = this.service.datesList(this.state.navigateDate, this.props.views || HorizontalViewList_1.HorizontalViewList.defaultProps.views);
         }
         var activeDate = (0, kendo_date_math_1.cloneDate)(this.dates && this.dates[0] ? this.dates[0] : (0, utils_2.getToday)());
         return (React.createElement("div", { ref: function (el) { _this._element = el; }, className: wrapperClassName, id: this.props.id || this.wrapperID, "aria-labelledby": this.props.ariaLabelledBy, "aria-describedby": this.props.ariaDescribedBy, tabIndex: !this.props.disabled ? this.props.tabIndex : undefined, onFocus: this.handleFocus, onBlur: this.handleBlur, onMouseDown: this.handleMouseDown, onClick: this.handleClick, onKeyDown: this.handleKeyDown, "aria-disabled": this.props.disabled, dir: this.props.dir },
@@ -479,6 +493,13 @@ var MultiViewCalendarWithoutContext = /** @class */ (function (_super) {
                     React.createElement(kendo_react_buttons_1.Button, __assign({ type: "button", className: "k-calendar-nav-next", icon: this.isRtl ? 'chevron-left' : 'chevron-right', svgIcon: this.isRtl ? kendo_svg_icons_1.chevronLeftIcon : kendo_svg_icons_1.chevronRightIcon, fillMode: "flat", title: nextViewTittle, disabled: isNextDisabled, onClick: this.handleNextButtonClick }, nextBtnAria)))) }),
             React.createElement(HorizontalViewList_1.HorizontalViewList, { ref: function (el) { _this.calendarViewList = el; }, dates: this.dates, activeView: activeView, focusedDate: this.focusedDate, min: this.min, max: this.max, bus: this.bus, service: this.service, selectionRange: visualizedRange, value: this.selectedMultiple || this.selectedDate, cellUID: this.cellUID, views: this.props.views, onChange: this.handleDateChange, showWeekNumbers: this.props.weekNumber, onCellEnter: this.handleCellEnter, cell: this.props.cell, weekCell: this.props.weekCell, headerTitle: this.props.headerTitle, verticalView: this.props.mobileMode })));
     };
+    // protected isListInRange = (list: Date[]): boolean => {
+    //     return this.min < list[0]
+    //         && this.max > list[Math.max(0, (this.props.views || MultiViewCalendarWithoutContext.defaultProps.views) - 1)];
+    // };
+    MultiViewCalendarWithoutContext.prototype.isInMonth = function (date, month) {
+        return !!month && (0, kendo_date_math_1.firstDayOfMonth)(month) <= date && date <= (0, kendo_date_math_1.lastDayOfMonth)(month);
+    };
     /**
      * @hidden
      */

package/dist/npm/package-metadata.js

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