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

package/calendar/calendar.cjs.js

@@ -8,8 +8,8 @@ var button = require('primereact/button');
 var hooks = require('primereact/hooks');
 var inputtext = require('primereact/inputtext');
 var overlayservice = require('primereact/overlayservice');
-var ripple = require('primereact/ripple');
 var utils = require('primereact/utils');
+var ripple = require('primereact/ripple');
 var csstransition = require('primereact/csstransition');
 var portal = require('primereact/portal');
 
@@ -72,11 +72,17 @@ function _extends() {
 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) {
@@ -224,8 +230,30 @@ var Calendar = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__namespace
   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,
@@ -401,7 +429,7 @@ var Calendar = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__namespace
     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;
 
@@ -457,16 +485,22 @@ var Calendar = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__namespace
     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);
@@ -479,6 +513,12 @@ var Calendar = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__namespace
       newViewDate.setFullYear(newYear);
     }
 
+    if (currentView === 'month') {
+      decrementYear();
+    } else if (currentView === 'year') {
+      decrementDecade();
+    }
+
     updateViewDate(event, newViewDate);
     event.preventDefault();
   };
@@ -492,16 +532,22 @@ var Calendar = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__namespace
     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);
@@ -514,10 +560,48 @@ var Calendar = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__namespace
       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());
@@ -1214,84 +1298,6 @@ var Calendar = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__namespace
     }
   };
 
-  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();
@@ -1409,16 +1415,70 @@ var Calendar = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__namespace
     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;
@@ -1502,11 +1562,28 @@ var Calendar = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__namespace
     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);
+      }
     }
   };
 
@@ -1881,9 +1958,30 @@ var Calendar = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__namespace
     }
   };
 
+  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) {
@@ -2443,9 +2541,20 @@ var Calendar = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__namespace
     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,
@@ -2483,7 +2592,7 @@ var Calendar = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__namespace
     }
   }, [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]);
@@ -2524,7 +2633,7 @@ var Calendar = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__namespace
     };
     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));
@@ -2543,13 +2652,13 @@ var Calendar = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__namespace
     };
     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') {
@@ -2597,25 +2706,28 @@ var Calendar = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__namespace
       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);
       });
 
@@ -2655,17 +2767,32 @@ var Calendar = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__namespace
       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) {
@@ -2743,7 +2870,7 @@ var Calendar = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__namespace
   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"
@@ -2779,39 +2906,33 @@ var Calendar = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__namespace
     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", {
@@ -2820,17 +2941,15 @@ var Calendar = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__namespace
       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();
       }
     }
 
@@ -3022,7 +3141,7 @@ var Calendar = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__namespace
   };
 
   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());
@@ -3131,6 +3250,46 @@ var Calendar = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__namespace
     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, {
@@ -3138,7 +3297,7 @@ var Calendar = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__namespace
     '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();
@@ -3146,6 +3305,8 @@ var Calendar = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__namespace
   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,
@@ -3165,7 +3326,7 @@ var Calendar = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__namespace
     onExit: onOverlayExit,
     onExited: onOverlayExited,
     transitionOptions: props.transitionOptions
-  }, datePicker, timePicker, buttonBar, footer));
+  }, datePicker, timePicker, buttonBar, footer, monthPicker, yearPicker));
 }));
 Calendar.displayName = 'Calendar';
 Calendar.defaultProps = {
@@ -3234,6 +3395,7 @@ Calendar.defaultProps = {
   tooltipOptions: null,
   ariaLabelledBy: null,
   dateTemplate: null,
+  decadeTemplate: null,
   headerTemplate: null,
   footerTemplate: null,
   monthNavigatorTemplate: null,
@@ -3249,7 +3411,8 @@ Calendar.defaultProps = {
   onTodayButtonClick: null,
   onClearButtonClick: null,
   onShow: null,
-  onHide: null
+  onHide: null,
+  onMonthChange: null
 };
 
 exports.Calendar = Calendar;