primereact 8.0.0-rc.1 → 8.0.0-rc.2

package/calendar/calendar.js

@@ -1,5 +1,5 @@
 this.primereact = this.primereact || {};
-this.primereact.calendar = (function (exports, React, PrimeReact, button, hooks, inputtext, overlayservice, ripple, utils, csstransition, portal) {
+this.primereact.calendar = (function (exports, React, PrimeReact, button, hooks, inputtext, overlayservice, utils, ripple, csstransition, portal) {
   'use strict';
 
   function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
@@ -61,11 +61,17 @@ this.primereact.calendar = (function (exports, React, PrimeReact, button, hooks,
   function _typeof(obj) {
     "@babel/helpers - typeof";
 
-    return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) {
-      return typeof obj;
-    } : function (obj) {
-      return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj;
-    }, _typeof(obj);
+    if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") {
+      _typeof = function _typeof(obj) {
+        return typeof obj;
+      };
+    } else {
+      _typeof = function _typeof(obj) {
+        return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj;
+      };
+    }
+
+    return _typeof(obj);
   }
 
   function _arrayLikeToArray$1(arr, len) {
@@ -213,8 +219,30 @@ this.primereact.calendar = (function (exports, React, PrimeReact, button, hooks,
     var overlayEventListener = React__namespace.useRef(null);
     var touchUIMaskClickListener = React__namespace.useRef(null);
     var isOverlayClicked = React__namespace.useRef(false);
+
+    var _React$useState7 = React__namespace.useState('date'),
+        _React$useState8 = _slicedToArray(_React$useState7, 2),
+        currentView = _React$useState8[0],
+        setCurrentView = _React$useState8[1];
+
+    var _React$useState9 = React__namespace.useState(null),
+        _React$useState10 = _slicedToArray(_React$useState9, 2),
+        currentMonth = _React$useState10[0],
+        setCurrentMonth = _React$useState10[1];
+
+    var _React$useState11 = React__namespace.useState(null),
+        _React$useState12 = _slicedToArray(_React$useState11, 2),
+        currentYear = _React$useState12[0],
+        setCurrentYear = _React$useState12[1];
+
+    var _React$useState13 = React__namespace.useState([]),
+        _React$useState14 = _slicedToArray(_React$useState13, 2),
+        yearOptions = _React$useState14[0],
+        setYearOptions = _React$useState14[1];
+
     var previousValue = hooks.usePrevious(props.value);
     var visible = props.inline || (props.onVisibleChange ? props.visible : overlayVisibleState);
+    var attributeSelector = utils.UniqueComponentId();
 
     var _useOverlayListener = hooks.useOverlayListener({
       target: elementRef,
@@ -390,7 +418,7 @@ this.primereact.calendar = (function (exports, React, PrimeReact, button, hooks,
       if (navigation.current) {
         if (navigation.current.button) {
           initFocusableCell();
-          if (navigation.backward) utils.DomHandler.findSingle(overlayRef.current, '.p-datepicker-prev').focus();else utils.DomHandler.findSingle(overlayRef.current, '.p-datepicker-next').focus();
+          if (navigation.current.backward) utils.DomHandler.findSingle(overlayRef.current, '.p-datepicker-prev').focus();else utils.DomHandler.findSingle(overlayRef.current, '.p-datepicker-next').focus();
         } else {
           var cell;
 
@@ -446,16 +474,22 @@ this.primereact.calendar = (function (exports, React, PrimeReact, button, hooks,
       var newViewDate = new Date(getViewDate().getTime());
       newViewDate.setDate(1);
 
-      if (props.view === 'date') {
+      if (currentView === 'date') {
         if (newViewDate.getMonth() === 0) {
           newViewDate.setMonth(11);
           newViewDate.setFullYear(newViewDate.getFullYear() - 1);
+          setCurrentMonth(11);
+          decrementYear();
         } else {
           newViewDate.setMonth(newViewDate.getMonth() - 1);
+          setCurrentMonth(function (prevState) {
+            return prevState - 1;
+          });
         }
-      } else if (props.view === 'month') {
-        var currentYear = newViewDate.getFullYear();
-        var newYear = currentYear - 1;
+      } else if (currentView === 'month') {
+        var _currentYear2 = newViewDate.getFullYear();
+
+        var newYear = _currentYear2 - 1;
 
         if (props.yearNavigator) {
           var minYear = parseInt(props.yearRange.split(':')[0], 10);
@@ -468,6 +502,12 @@ this.primereact.calendar = (function (exports, React, PrimeReact, button, hooks,
         newViewDate.setFullYear(newYear);
       }
 
+      if (currentView === 'month') {
+        decrementYear();
+      } else if (currentView === 'year') {
+        decrementDecade();
+      }
+
       updateViewDate(event, newViewDate);
       event.preventDefault();
     };
@@ -481,16 +521,22 @@ this.primereact.calendar = (function (exports, React, PrimeReact, button, hooks,
       var newViewDate = new Date(getViewDate().getTime());
       newViewDate.setDate(1);
 
-      if (props.view === 'date') {
+      if (currentView === 'date') {
         if (newViewDate.getMonth() === 11) {
           newViewDate.setMonth(0);
           newViewDate.setFullYear(newViewDate.getFullYear() + 1);
+          setCurrentMonth(0);
+          incrementYear();
         } else {
           newViewDate.setMonth(newViewDate.getMonth() + 1);
+          setCurrentMonth(function (prevState) {
+            return prevState + 1;
+          });
         }
-      } else if (props.view === 'month') {
-        var currentYear = newViewDate.getFullYear();
-        var newYear = currentYear + 1;
+      } else if (currentView === 'month') {
+        var _currentYear3 = newViewDate.getFullYear();
+
+        var newYear = _currentYear3 + 1;
 
         if (props.yearNavigator) {
           var maxYear = parseInt(props.yearRange.split(':')[1], 10);
@@ -503,10 +549,48 @@ this.primereact.calendar = (function (exports, React, PrimeReact, button, hooks,
         newViewDate.setFullYear(newYear);
       }
 
+      if (currentView === 'month') {
+        incrementYear();
+      } else if (currentView === 'year') {
+        incrementDecade();
+      }
+
       updateViewDate(event, newViewDate);
       event.preventDefault();
     };
 
+    var populateYearOptions = function populateYearOptions(start, end) {
+      var _yearOptions = [];
+
+      for (var i = start; i <= end; i++) {
+        yearOptions.push(i);
+      }
+
+      setYearOptions(_yearOptions);
+    };
+
+    var decrementYear = function decrementYear() {
+      var _currentYear = currentYear - 1;
+
+      setCurrentYear(_currentYear);
+
+      if (props.yearNavigator && _currentYear < yearOptions[0]) {
+        var difference = yearOptions[yearOptions.length - 1] - yearOptions[0];
+        populateYearOptions(yearOptions[0] - difference, yearOptions[yearOptions.length - 1] - difference);
+      }
+    };
+
+    var incrementYear = function incrementYear() {
+      var _currentYear = currentYear + 1;
+
+      setCurrentYear(_currentYear);
+
+      if (props.yearNavigator && _currentYear.current > yearOptions[yearOptions.length - 1]) {
+        var difference = yearOptions[yearOptions.length - 1] - yearOptions[0];
+        populateYearOptions(yearOptions[0] + difference, yearOptions[yearOptions.length - 1] + difference);
+      }
+    };
+
     var onMonthDropdownChange = function onMonthDropdownChange(event, value) {
       var currentViewDate = getViewDate();
       var newViewDate = new Date(currentViewDate.getTime());
@@ -1203,84 +1287,6 @@ this.primereact.calendar = (function (exports, React, PrimeReact, button, hooks,
       }
     };
 
-    var onMonthCellKeydown = function onMonthCellKeydown(event, index) {
-      var cell = event.currentTarget;
-
-      switch (event.which) {
-        //arrows
-        case 38:
-        case 40:
-          {
-            cell.tabIndex = '-1';
-            var cells = cell.parentElement.children;
-            var cellIndex = utils.DomHandler.index(cell);
-            var nextCell = cells[event.which === 40 ? cellIndex + 3 : cellIndex - 3];
-
-            if (nextCell) {
-              nextCell.tabIndex = '0';
-              nextCell.focus();
-            }
-
-            event.preventDefault();
-            break;
-          }
-        //left arrow
-
-        case 37:
-          {
-            cell.tabIndex = '-1';
-            var prevCell = cell.previousElementSibling;
-
-            if (prevCell) {
-              prevCell.tabIndex = '0';
-              prevCell.focus();
-            }
-
-            event.preventDefault();
-            break;
-          }
-        //right arrow
-
-        case 39:
-          {
-            cell.tabIndex = '-1';
-            var _nextCell = cell.nextElementSibling;
-
-            if (_nextCell) {
-              _nextCell.tabIndex = '0';
-
-              _nextCell.focus();
-            }
-
-            event.preventDefault();
-            break;
-          }
-        //enter
-
-        case 13:
-          {
-            onMonthSelect(event, index);
-            event.preventDefault();
-            break;
-          }
-        //escape
-
-        case 27:
-          {
-            hide(null, reFocusInputField);
-            event.preventDefault();
-            break;
-          }
-        //tab
-
-        case 9:
-          {
-            trapFocus(event);
-            break;
-          }
-      }
-    };
-
     var onDateSelect = function onDateSelect(event, dateMeta, timeMeta) {
       if (props.disabled || !dateMeta.selectable) {
         event.preventDefault();
@@ -1398,16 +1404,70 @@ this.primereact.calendar = (function (exports, React, PrimeReact, button, hooks,
       updateInputfield(selectedValues);
     };
 
-    var onMonthSelect = function onMonthSelect(event, month) {
-      onDateSelect(event, {
-        year: getViewDate().getFullYear(),
-        month: month,
-        day: 1,
-        selectable: true
+    var decrementDecade = function decrementDecade() {
+      setCurrentYear(function (prevState) {
+        return prevState - 10;
+      });
+    };
+
+    var incrementDecade = function incrementDecade() {
+      setCurrentYear(function (prevState) {
+        return prevState + 10;
       });
+    };
+
+    var switchToMonthView = function switchToMonthView(event) {
+      setCurrentView('month');
+      event.preventDefault();
+    };
+
+    var switchToYearView = function switchToYearView(event) {
+      setCurrentView('year');
       event.preventDefault();
     };
 
+    var onMonthSelect = function onMonthSelect(event, month) {
+      if (props.view === 'month') {
+        onDateSelect(event, {
+          year: currentYear,
+          month: month,
+          day: 1,
+          selectable: true
+        });
+        event.preventDefault();
+      } else {
+        setCurrentMonth(month);
+        createMonthsMeta(month, currentYear);
+        var currentDate = new Date(getCurrentDateTime().getTime());
+        currentDate.setMonth(month);
+        currentDate.setYear(currentYear);
+        setViewDateState(currentDate);
+        setCurrentView('date');
+        props.onMonthChange && props.onMonthChange({
+          month: month + 1,
+          year: currentYear
+        });
+      }
+    };
+
+    var onYearSelect = function onYearSelect(event, year) {
+      if (props.view === 'year') {
+        onDateSelect(event, {
+          year: year,
+          month: 0,
+          day: 1,
+          selectable: true
+        });
+      } else {
+        setCurrentYear(year);
+        setCurrentView('month');
+        props.onMonthChange && props.onMonthChange({
+          month: currentMonth + 1,
+          year: year
+        });
+      }
+    };
+
     var updateModel = function updateModel(event, value) {
       if (props.onChange) {
         var newValue = value && value instanceof Date ? new Date(value.getTime()) : value;
@@ -1491,11 +1551,28 @@ this.primereact.calendar = (function (exports, React, PrimeReact, button, hooks,
       props.onHide && props.onHide();
     };
 
+    var appendDisabled = function appendDisabled() {
+      return props.appendTo === 'self' || props.inline;
+    };
+
     var alignOverlay = function alignOverlay() {
       if (props.touchUI) {
         enableModality();
-      } else {
-        utils.DomHandler.alignOverlay(overlayRef.current, inputRef.current.parentElement, props.appendTo || PrimeReact__default["default"].appendTo);
+      } else if (overlayRef && overlayRef.current && inputRef && inputRef.current) {
+        utils.DomHandler.alignOverlay(overlayRef.current, inputRef.current, props.appendTo || PrimeReact__default["default"].appendTo);
+
+        if (appendDisabled()) {
+          utils.DomHandler.relativePosition(overlayRef.current, inputRef.current);
+        } else {
+          if (currentView === 'date') {
+            overlayRef.current.style.width = utils.DomHandler.getOuterWidth(overlayRef.current) + 'px';
+            overlayRef.current.style.minWidth = utils.DomHandler.getOuterWidth(inputRef.current) + 'px';
+          } else {
+            overlayRef.current.style.width = utils.DomHandler.getOuterWidth(inputRef.current) + 'px';
+          }
+
+          utils.DomHandler.absolutePosition(overlayRef.current, inputRef.current);
+        }
       }
     };
 
@@ -1870,9 +1947,30 @@ this.primereact.calendar = (function (exports, React, PrimeReact, button, hooks,
       }
     };
 
+    var isComparable = function isComparable() {
+      return props.value != null && typeof props.value !== 'string';
+    };
+
     var isMonthSelected = function isMonthSelected(month) {
-      var viewDate = getViewDate();
-      if (props.value && props.value instanceof Date) return props.value.getDate() === 1 && props.value.getMonth() === month && props.value.getFullYear() === viewDate.getFullYear();else return false;
+      if (isComparable()) {
+        var value = isRangeSelection() ? props.value[0] : props.value;
+        return !isMultipleSelection() ? value.getMonth() === month && value.getFullYear() === currentYear : false;
+      }
+
+      return false;
+    };
+
+    var isYearSelected = function isYearSelected(year) {
+      if (isComparable()) {
+        var value = isRangeSelection() ? props.value[0] : props.value;
+        return !isMultipleSelection() && isComparable() ? value.getFullYear() === year : false;
+      }
+
+      return false;
+    };
+
+    var switchViewButtonDisabled = function switchViewButtonDisabled() {
+      return props.numberOfMonths > 1 || props.disabled;
     };
 
     var isDateEquals = function isDateEquals(value, dateMeta) {
@@ -2432,9 +2530,20 @@ this.primereact.calendar = (function (exports, React, PrimeReact, button, hooks,
       var viewDate = getViewDate(props.viewDate);
       validateDate(viewDate);
       setViewDateState(viewDate);
+      setCurrentMonth(viewDate.getMonth());
+      setCurrentYear(viewDate.getFullYear());
+      setCurrentView(props.view);
 
       if (props.inline) {
-        initFocusableCell();
+        overlayRef && overlayRef.current.setAttribute(attributeSelector, '');
+
+        if (!props.disabled) {
+          initFocusableCell();
+
+          if (props.numberOfMonths === 1) {
+            overlayRef.current.style.width = utils.DomHandler.getOuterWidth(overlayRef.current) + 'px';
+          }
+        }
       } else if (props.mask) {
         utils.mask(inputRef.current, {
           mask: props.mask,
@@ -2472,7 +2581,7 @@ this.primereact.calendar = (function (exports, React, PrimeReact, button, hooks,
       }
     }, [props.onViewDateChange, props.value]);
     hooks.useUpdateEffect(function () {
-      if (previousValue !== props.value && (!viewStateChanged.current || !visible)) {
+      if (previousValue !== props.value && (!viewStateChanged || !visible)) {
         updateInputfield(props.value);
       }
     }, [props.value, visible]);
@@ -2513,7 +2622,7 @@ this.primereact.calendar = (function (exports, React, PrimeReact, button, hooks,
       };
       return /*#__PURE__*/React__namespace.createElement("button", _extends({
         type: "button",
-        className: "p-datepicker-prev p-link"
+        className: "p-datepicker-prev"
       }, navigatorProps), /*#__PURE__*/React__namespace.createElement("span", {
         className: "p-datepicker-prev-icon pi pi-chevron-left"
       }), /*#__PURE__*/React__namespace.createElement(ripple.Ripple, null));
@@ -2532,13 +2641,13 @@ this.primereact.calendar = (function (exports, React, PrimeReact, button, hooks,
       };
       return /*#__PURE__*/React__namespace.createElement("button", _extends({
         type: "button",
-        className: "p-datepicker-next p-link"
+        className: "p-datepicker-next"
       }, navigatorProps), /*#__PURE__*/React__namespace.createElement("span", {
         className: "p-datepicker-next-icon pi pi-chevron-right"
       }), /*#__PURE__*/React__namespace.createElement(ripple.Ripple, null));
     };
 
-    var createTitleMonthElement = function createTitleMonthElement(month) {
+    var createTitleMonthElement = function createTitleMonthElement() {
       var monthNames = PrimeReact.localeOption('monthNames', props.locale);
 
       if (props.monthNavigator && props.view !== 'month') {
@@ -2586,25 +2695,28 @@ this.primereact.calendar = (function (exports, React, PrimeReact, button, hooks,
         return _content;
       }
 
-      return /*#__PURE__*/React__namespace.createElement("span", {
-        className: "p-datepicker-month"
-      }, monthNames[month]);
+      return currentView === 'date' && /*#__PURE__*/React__namespace.createElement("button", {
+        className: "p-datepicker-month p-link",
+        onClick: switchToMonthView,
+        disabled: switchViewButtonDisabled()
+      }, monthNames[currentMonth]);
     };
 
-    var createTitleYearElement = function createTitleYearElement(year) {
+    var createTitleYearElement = function createTitleYearElement() {
       if (props.yearNavigator) {
-        var yearOptions = [];
+        var _yearOptions2 = [];
         var years = props.yearRange.split(':');
         var yearStart = parseInt(years[0], 10);
         var yearEnd = parseInt(years[1], 10);
 
         for (var i = yearStart; i <= yearEnd; i++) {
-          yearOptions.push(i);
+          _yearOptions2.push(i);
         }
 
         var viewDate = getViewDate();
         var viewYear = viewDate.getFullYear();
-        var displayedYearNames = yearOptions.filter(function (year) {
+
+        var displayedYearNames = _yearOptions2.filter(function (year) {
           return !(props.minDate && props.minDate.getFullYear() > year) && !(props.maxDate && props.maxDate.getFullYear() < year);
         });
 
@@ -2644,17 +2756,32 @@ this.primereact.calendar = (function (exports, React, PrimeReact, button, hooks,
         return _content2;
       }
 
-      return /*#__PURE__*/React__namespace.createElement("span", {
-        className: "p-datepicker-year"
-      }, year);
+      return currentView !== 'year' && /*#__PURE__*/React__namespace.createElement("button", {
+        className: "p-datepicker-year p-link",
+        onClick: switchToYearView,
+        disabled: switchViewButtonDisabled()
+      }, currentYear);
+    };
+
+    var createTitleDecadeElement = function createTitleDecadeElement() {
+      var years = yearPickerValues();
+
+      if (currentView === 'year') {
+        return /*#__PURE__*/React__namespace.createElement("span", {
+          className: "p-datepicker-decade"
+        }, props.decadeTemplate ? props.decadeTemplate(years) : /*#__PURE__*/React__namespace.createElement("span", null, "".concat(yearPickerValues()[0], " - ").concat(yearPickerValues()[yearPickerValues().length - 1])));
+      }
+
+      return null;
     };
 
     var createTitle = function createTitle(monthMetaData) {
       var month = createTitleMonthElement(monthMetaData.month);
       var year = createTitleYearElement(monthMetaData.year);
+      var decade = createTitleDecadeElement();
       return /*#__PURE__*/React__namespace.createElement("div", {
         className: "p-datepicker-title"
-      }, month, year);
+      }, month, year, decade);
     };
 
     var createDayNames = function createDayNames(weekDays) {
@@ -2732,7 +2859,7 @@ this.primereact.calendar = (function (exports, React, PrimeReact, button, hooks,
     var createDateViewGrid = function createDateViewGrid(monthMetaData, weekDays, groupIndex) {
       var dayNames = createDayNames(weekDays);
       var dates = createDates(monthMetaData, groupIndex);
-      return /*#__PURE__*/React__namespace.createElement("div", {
+      return currentView === 'date' && /*#__PURE__*/React__namespace.createElement("div", {
         className: "p-datepicker-calendar-container"
       }, /*#__PURE__*/React__namespace.createElement("table", {
         className: "p-datepicker-calendar"
@@ -2768,39 +2895,33 @@ this.primereact.calendar = (function (exports, React, PrimeReact, button, hooks,
       return months;
     };
 
-    var createMonthViewMonth = function createMonthViewMonth(index) {
-      var className = utils.classNames('p-monthpicker-month', {
-        'p-highlight': isMonthSelected(index)
-      });
+    var monthPickerValues = function monthPickerValues() {
+      var monthPickerValues = [];
       var monthNamesShort = PrimeReact.localeOption('monthNamesShort', props.locale);
-      var monthName = monthNamesShort[index];
-      return /*#__PURE__*/React__namespace.createElement("span", {
-        key: monthName,
-        className: className,
-        onClick: function onClick(event) {
-          return onMonthSelect(event, index);
-        },
-        onKeyDown: function onKeyDown(event) {
-          return onMonthCellKeydown(event, index);
-        }
-      }, monthName, /*#__PURE__*/React__namespace.createElement(ripple.Ripple, null));
+
+      for (var i = 0; i <= 11; i++) {
+        monthPickerValues.push(monthNamesShort[i]);
+      }
+
+      return monthPickerValues;
     };
 
-    var createMonthViewMonths = function createMonthViewMonths() {
-      var months = [];
+    var yearPickerValues = function yearPickerValues() {
+      var yearPickerValues = [];
+      var base = currentYear - currentYear % 10;
 
-      for (var i = 0; i <= 11; i++) {
-        months.push(createMonthViewMonth(i));
+      for (var i = 0; i < 10; i++) {
+        yearPickerValues.push(base + i);
       }
 
-      return months;
+      return yearPickerValues;
     };
 
-    var createMonthView = function createMonthView() {
+    var createMonthYearView = function createMonthYearView() {
       var backwardNavigator = createBackwardNavigator(true);
       var forwardNavigator = createForwardNavigator(true);
       var yearElement = createTitleYearElement(getViewDate().getFullYear());
-      var months = createMonthViewMonths();
+      var decade = createTitleDecadeElement();
       return /*#__PURE__*/React__namespace.createElement(React__namespace.Fragment, null, /*#__PURE__*/React__namespace.createElement("div", {
         className: "p-datepicker-group-container"
       }, /*#__PURE__*/React__namespace.createElement("div", {
@@ -2809,17 +2930,15 @@ this.primereact.calendar = (function (exports, React, PrimeReact, button, hooks,
         className: "p-datepicker-header"
       }, backwardNavigator, /*#__PURE__*/React__namespace.createElement("div", {
         className: "p-datepicker-title"
-      }, yearElement), forwardNavigator))), /*#__PURE__*/React__namespace.createElement("div", {
-        className: "p-monthpicker"
-      }, months));
+      }, yearElement, decade), forwardNavigator))));
     };
 
     var createDatePicker = function createDatePicker() {
       if (!props.timeOnly) {
         if (props.view === 'date') {
           return createDateView();
-        } else if (props.view === 'month') {
-          return createMonthView();
+        } else {
+          return createMonthYearView();
         }
       }
 
@@ -3011,7 +3130,7 @@ this.primereact.calendar = (function (exports, React, PrimeReact, button, hooks,
     };
 
     var createTimePicker = function createTimePicker() {
-      if (props.showTime || props.timeOnly) {
+      if ((props.showTime || props.timeOnly) && currentView === 'date') {
         return /*#__PURE__*/React__namespace.createElement("div", {
           className: "p-timepicker"
         }, createHourPicker(), createSeparator(':'), createMinutePicker(), props.showSeconds && createSeparator(':'), createSecondPicker(), props.showMillisec && createSeparator('.'), createMiliSecondPicker(), props.hourFormat === '12' && createSeparator(':'), createAmPmPicker());
@@ -3120,6 +3239,46 @@ this.primereact.calendar = (function (exports, React, PrimeReact, button, hooks,
       return null;
     };
 
+    var createMonthPicker = function createMonthPicker() {
+      if (currentView === 'month') {
+        return /*#__PURE__*/React__namespace.createElement("div", {
+          className: "p-monthpicker"
+        }, monthPickerValues().map(function (m, i) {
+          return /*#__PURE__*/React__namespace.createElement("span", {
+            onClick: function onClick(event) {
+              return onMonthSelect(event, i);
+            },
+            key: "month".concat(i + 1),
+            className: utils.classNames('p-monthpicker-month', {
+              'p-highlight': isMonthSelected(i)
+            })
+          }, m);
+        }));
+      }
+
+      return null;
+    };
+
+    var createYearPicker = function createYearPicker() {
+      if (currentView === 'year') {
+        return /*#__PURE__*/React__namespace.createElement("div", {
+          className: "p-yearpicker"
+        }, yearPickerValues().map(function (y, i) {
+          return /*#__PURE__*/React__namespace.createElement("span", {
+            onClick: function onClick(event) {
+              return onYearSelect(event, y);
+            },
+            key: "year".concat(i + 1),
+            className: utils.classNames('p-yearpicker-year', {
+              'p-highlight': isYearSelected(y)
+            })
+          }, y);
+        }));
+      }
+
+      return null;
+    };
+
     var otherProps = utils.ObjectUtils.findDiffKeys(props, Calendar.defaultProps);
     var className = utils.classNames('p-calendar p-component p-inputwrapper', props.className, (_classNames = {}, _defineProperty(_classNames, "p-calendar-w-btn p-calendar-w-btn-".concat(props.iconPos), props.showIcon), _defineProperty(_classNames, 'p-calendar-disabled', props.disabled), _defineProperty(_classNames, 'p-calendar-timeonly', props.timeOnly), _defineProperty(_classNames, 'p-inputwrapper-filled', props.value || utils.DomHandler.hasClass(inputRef.current, 'p-filled') && inputRef.current.value !== ''), _defineProperty(_classNames, 'p-inputwrapper-focus', focusedState), _classNames));
     var panelClassName = utils.classNames('p-datepicker p-component', props.panelClassName, {
@@ -3127,7 +3286,7 @@ this.primereact.calendar = (function (exports, React, PrimeReact, button, hooks,
       'p-disabled': props.disabled,
       'p-datepicker-timeonly': props.timeOnly,
       'p-datepicker-multiple-month': props.numberOfMonths > 1,
-      'p-datepicker-monthpicker': props.view === 'month',
+      'p-datepicker-monthpicker': currentView === 'month',
       'p-datepicker-touch-ui': props.touchUI
     });
     var content = createContent();
@@ -3135,6 +3294,8 @@ this.primereact.calendar = (function (exports, React, PrimeReact, button, hooks,
     var timePicker = createTimePicker();
     var buttonBar = createButtonBar();
     var footer = createFooter();
+    var monthPicker = createMonthPicker();
+    var yearPicker = createYearPicker();
     return /*#__PURE__*/React__namespace.createElement("span", _extends({
       ref: elementRef,
       id: props.id,
@@ -3154,7 +3315,7 @@ this.primereact.calendar = (function (exports, React, PrimeReact, button, hooks,
       onExit: onOverlayExit,
       onExited: onOverlayExited,
       transitionOptions: props.transitionOptions
-    }, datePicker, timePicker, buttonBar, footer));
+    }, datePicker, timePicker, buttonBar, footer, monthPicker, yearPicker));
   }));
   Calendar.displayName = 'Calendar';
   Calendar.defaultProps = {
@@ -3223,6 +3384,7 @@ this.primereact.calendar = (function (exports, React, PrimeReact, button, hooks,
     tooltipOptions: null,
     ariaLabelledBy: null,
     dateTemplate: null,
+    decadeTemplate: null,
     headerTemplate: null,
     footerTemplate: null,
     monthNavigatorTemplate: null,
@@ -3238,7 +3400,8 @@ this.primereact.calendar = (function (exports, React, PrimeReact, button, hooks,
     onTodayButtonClick: null,
     onClearButtonClick: null,
     onShow: null,
-    onHide: null
+    onHide: null,
+    onMonthChange: null
   };
 
   exports.Calendar = Calendar;
@@ -3247,4 +3410,4 @@ this.primereact.calendar = (function (exports, React, PrimeReact, button, hooks,
 
   return exports;
 
-})({}, React, primereact.api, primereact.button, primereact.hooks, primereact.inputtext, primereact.overlayservice, primereact.ripple, primereact.utils, primereact.csstransition, primereact.portal);
+})({}, React, primereact.api, primereact.button, primereact.hooks, primereact.inputtext, primereact.overlayservice, primereact.utils, primereact.ripple, primereact.csstransition, primereact.portal);