primereact 10.3.0 → 10.3.2

package/calendar/calendar.cjs.js

@@ -186,22 +186,22 @@ var classes = {
   yearPicker: 'p-yearpicker',
   year: function year(_ref2) {
     var isYearSelected = _ref2.isYearSelected,
-      isSelectable = _ref2.isSelectable,
-      y = _ref2.y;
+      y = _ref2.y,
+      isMonthYearDisabled = _ref2.isMonthYearDisabled;
     return utils.classNames('p-yearpicker-year', {
       'p-highlight': isYearSelected(y),
-      'p-disabled': !isSelectable(0, -1, y)
+      'p-disabled': isMonthYearDisabled(-1, y)
     });
   },
   monthPicker: 'p-monthpicker',
   month: function month(_ref3) {
     var isMonthSelected = _ref3.isMonthSelected,
-      isSelectable = _ref3.isSelectable,
+      isMonthYearDisabled = _ref3.isMonthYearDisabled,
       i = _ref3.i,
       currentYear = _ref3.currentYear;
     return utils.classNames('p-monthpicker-month', {
       'p-highlight': isMonthSelected(i),
-      'p-disabled': !isSelectable(0, i, currentYear)
+      'p-disabled': isMonthYearDisabled(i, currentYear)
     });
   },
   hourPicker: 'p-hour-picker',
@@ -355,8 +355,9 @@ var CalendarBase = componentbase.ComponentBase.extend({
 
 var CalendarPanel = /*#__PURE__*/React__namespace.forwardRef(function (props, ref) {
   var cx = props.cx;
+  var mergeProps = hooks.useMergeProps();
   var createElement = function createElement() {
-    var panelProps = utils.mergeProps({
+    var panelProps = mergeProps({
       className: cx('panel', {
         panelClassName: props.className
       }),
@@ -366,7 +367,7 @@ var CalendarPanel = /*#__PURE__*/React__namespace.forwardRef(function (props, re
     }, props.ptm('panel', {
       hostName: props.hostName
     }));
-    var transitionProps = utils.mergeProps({
+    var transitionProps = mergeProps({
       classNames: cx('transition'),
       "in": props["in"],
       timeout: {
@@ -402,6 +403,7 @@ function _createForOfIteratorHelper(o, allowArrayLike) { var it = typeof Symbol
 function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
 function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
 var Calendar = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__namespace.forwardRef(function (inProps, ref) {
+  var mergeProps = hooks.useMergeProps();
   var context = React__namespace.useContext(PrimeReact.PrimeReactContext);
   var props = CalendarBase.getProps(inProps, context);
   var _React$useState = React__namespace.useState(false),
@@ -1152,7 +1154,7 @@ var Calendar = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__namespace
       }
       value.setFullYear(viewYear);
     }
-    if (props.monthNavigator && props.view !== 'month') {
+    if (renderMonthsNavigator(0)) {
       var viewMonth = value.getMonth();
       var viewMonthWithMinMax = parseInt(isInMinYear(value) && Math.max(props.minDate.getMonth(), viewMonth).toString() || isInMaxYear(value) && Math.min(props.maxDate.getMonth(), viewMonth).toString() || viewMonth);
       value.setMonth(viewMonthWithMinMax);
@@ -1192,7 +1194,7 @@ var Calendar = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__namespace
   };
   var updateViewDate = function updateViewDate(event, value) {
     validateDate(value);
-    if (props.onViewDateChange) {
+    if (props.onViewDateChange && event) {
       props.onViewDateChange({
         originalEvent: event,
         value: value
@@ -1615,6 +1617,7 @@ var Calendar = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__namespace
         month: month + 1,
         year: currentYear
       });
+      updateViewDate(event, currentDate);
     }
   };
   var onYearSelect = function onYearSelect(event, year) {
@@ -1709,17 +1712,24 @@ var Calendar = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__namespace
       var key = props.touchUI ? 'modal' : 'overlay';
       utils.ZIndexUtils.set(key, overlayRef.current, context && context.autoZIndex || PrimeReact__default["default"].autoZIndex, props.baseZIndex || context && context.zIndex[key] || PrimeReact__default["default"].zIndex[key]);
     }
-    alignOverlay();
-  };
-  var onOverlayEntered = function onOverlayEntered() {
     if (!props.touchUI && overlayRef && overlayRef.current && inputRef && inputRef.current && !appendDisabled()) {
+      var inputWidth = utils.DomHandler.getOuterWidth(inputRef.current);
+
+      // #5435 must have reasonable width if input is too small
+      if (inputWidth < 220) {
+        inputWidth = 220;
+      }
       if (props.view === 'date') {
         overlayRef.current.style.width = utils.DomHandler.getOuterWidth(overlayRef.current) + 'px';
-        overlayRef.current.style.minWidth = utils.DomHandler.getOuterWidth(inputRef.current) + 'px';
+        overlayRef.current.style.minWidth = inputWidth + 'px';
       } else {
-        overlayRef.current.style.width = utils.DomHandler.getOuterWidth(inputRef.current) + 'px';
+        overlayRef.current.style.minWidth = inputWidth + 'px';
+        overlayRef.current.style.width = inputWidth + 'px';
       }
     }
+    alignOverlay();
+  };
+  var onOverlayEntered = function onOverlayEntered() {
     bindOverlayListener();
     props.onShow && props.onShow();
     utils.DomHandler.focusFirstElement(overlayRef.current);
@@ -1733,7 +1743,8 @@ var Calendar = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__namespace
     props.onHide && props.onHide();
   };
   var appendDisabled = function appendDisabled() {
-    return props.appendTo === 'self' || props.inline;
+    var appendTo = props.appendTo || context && context.appendTo || PrimeReact__default["default"].appendTo;
+    return appendTo === 'self' || props.inline;
   };
   var alignOverlay = function alignOverlay() {
     if (props.touchUI) {
@@ -1987,10 +1998,7 @@ var Calendar = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__namespace
         }
       }
     }
-    if (props.disabledDates || props.enabledDates) {
-      validDate = !isDateDisabled(day, month, year);
-    }
-    if (props.disabledDays && currentView === 'date') {
+    if (props.disabledDates || props.enabledDates || props.disabledDays) {
       validDay = !isDayDisabled(day, month, year);
     }
     if (props.selectOtherMonths === false && otherMonth) {
@@ -2123,27 +2131,45 @@ var Calendar = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__namespace
   var isToday = function isToday(today, day, month, year) {
     return today.getDate() === day && today.getMonth() === month && today.getFullYear() === year;
   };
-  var isDateDisabled = function isDateDisabled(day, month, year) {
+  var isDayDisabled = function isDayDisabled(day, month, year) {
     if (props.disabledDates) {
-      return props.disabledDates.some(function (d) {
+      if (props.disabledDates.some(function (d) {
         return d.getFullYear() === year && d.getMonth() === month && d.getDate() === day;
-      });
-    }
-    if (props.enabledDates) {
-      return !props.enabledDates.some(function (d) {
+      })) {
+        return true;
+      }
+    } else if (props.enabledDates) {
+      if (!props.enabledDates.some(function (d) {
         return d.getFullYear() === year && d.getMonth() === month && d.getDate() === day;
-      });
+      })) {
+        return true;
+      }
     }
-    return false;
-  };
-  var isDayDisabled = function isDayDisabled(day, month, year) {
-    if (props.disabledDays) {
+    if (props.disabledDays && currentView === 'date') {
       var weekday = new Date(year, month, day);
       var weekdayNumber = weekday.getDay();
-      return props.disabledDays.indexOf(weekdayNumber) !== -1;
+      if (props.disabledDays.indexOf(weekdayNumber) !== -1) {
+        return true;
+      }
     }
     return false;
   };
+  var isMonthYearDisabled = function isMonthYearDisabled(month, year) {
+    var daysCountInAllMonth = month === -1 ? new Array(12).fill(0).map(function (_, i) {
+      return getDaysCountInMonth(i, year);
+    }) : [getDaysCountInMonth(month, year)];
+    for (var i = 0; i < daysCountInAllMonth.length; i++) {
+      var monthDays = daysCountInAllMonth[i];
+      var _month = month === -1 ? i : month;
+      for (var day = 1; day <= monthDays; day++) {
+        var isDateSelectable = isSelectable(day, _month, year);
+        if (isDateSelectable) {
+          return false;
+        }
+      }
+    }
+    return true;
+  };
   var updateInputfield = function updateInputfield(value) {
     if (!inputRef.current) {
       return;
@@ -2382,8 +2408,13 @@ var Calendar = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__namespace
     if (isNaN(h) || isNaN(m) || h > 23 || m > 59 || props.hourFormat === '12' && h > 12 || props.showSeconds && (isNaN(s) || s > 59) || props.showMillisec && (isNaN(s) || s > 1000)) {
       throw new Error('Invalid time');
     } else {
-      if (props.hourFormat === '12' && h !== 12 && ampm === 'PM') {
-        h += 12;
+      if (props.hourFormat === '12') {
+        if (h !== 12 && ampm === 'PM') {
+          h += 12;
+        }
+        if (h === 12 && ampm === 'AM') {
+          h -= 12;
+        }
       }
       return {
         hour: h,
@@ -2625,7 +2656,18 @@ var Calendar = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__namespace
     if (!props.onViewDateChange && !viewStateChanged.current) {
       setValue(props.value);
     }
-  }, [props.onViewDateChange, props.value]);
+    if (props.viewDate) {
+      updateViewDate(null, getViewDate(props.viewDate));
+    }
+  }, [props.onViewDateChange, props.value, props.viewDate]);
+  hooks.useUpdateEffect(function () {
+    if (overlayVisibleState || props.visible) {
+      // Github #5529
+      setTimeout(function () {
+        alignOverlay();
+      });
+    }
+  }, [currentView, overlayVisibleState, props.visible]);
   hooks.useUpdateEffect(function () {
     var newDate = props.value;
     if (previousValue !== newDate) {
@@ -2656,7 +2698,7 @@ var Calendar = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__namespace
   }, [props.value, visible]);
   hooks.useUpdateEffect(function () {
     updateInputfield(props.value);
-  }, [props.dateFormat, props.hourFormat, props.timeOnly, props.showSeconds, props.showMillisec, props.showTime]);
+  }, [props.dateFormat, props.hourFormat, props.timeOnly, props.showSeconds, props.showMillisec, props.showTime, props.locale]);
   hooks.useUpdateEffect(function () {
     if (overlayRef.current) {
       setNavigationState(viewDateState);
@@ -2718,14 +2760,14 @@ var Calendar = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__namespace
         visibility: 'hidden'
       }
     };
-    var previousIconProps = utils.mergeProps({
+    var previousIconProps = mergeProps({
       className: cx('previousIcon')
     }, ptm('previousIcon'));
     var icon = props.prevIcon || /*#__PURE__*/React__namespace.createElement(chevronleft.ChevronLeftIcon, previousIconProps);
     var backwardNavigatorIcon = utils.IconUtils.getJSXIcon(icon, _objectSpread({}, previousIconProps), {
       props: props
     });
-    var previousButtonProps = utils.mergeProps(_objectSpread({
+    var previousButtonProps = mergeProps(_objectSpread({
       type: 'button',
       className: cx('previousButton')
     }, navigatorProps), ptm('previousButton'));
@@ -2744,14 +2786,14 @@ var Calendar = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__namespace
         visibility: 'hidden'
       }
     };
-    var nextIconProps = utils.mergeProps({
+    var nextIconProps = mergeProps({
       className: cx('nextIcon')
     }, ptm('nextIcon'));
     var icon = props.nextIcon || /*#__PURE__*/React__namespace.createElement(chevronright.ChevronRightIcon, nextIconProps);
     var forwardNavigatorIcon = utils.IconUtils.getJSXIcon(icon, _objectSpread({}, nextIconProps), {
       props: props
     });
-    var nextButtonProps = utils.mergeProps(_objectSpread({
+    var nextButtonProps = mergeProps(_objectSpread({
       type: 'button',
       className: cx('nextButton')
     }, navigatorProps), ptm('nextButton'));
@@ -2759,9 +2801,12 @@ var Calendar = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__namespace
       ref: nextButton
     }, nextButtonProps), forwardNavigatorIcon, /*#__PURE__*/React__namespace.createElement(ripple.Ripple, null));
   };
-  var createTitleMonthElement = function createTitleMonthElement(month) {
+  var renderMonthsNavigator = function renderMonthsNavigator(index) {
+    return props.monthNavigator && props.view !== 'month' && (props.numberOfMonths === 1 || index === 0);
+  };
+  var createTitleMonthElement = function createTitleMonthElement(month, monthIndex) {
     var monthNames = PrimeReact.localeOption('monthNames', props.locale);
-    if (props.monthNavigator && props.view !== 'month') {
+    if (renderMonthsNavigator(monthIndex)) {
       var viewDate = getViewDate();
       var viewMonth = viewDate.getMonth();
       var displayedMonthOptions = monthNames.map(function (month, index) {
@@ -2776,7 +2821,7 @@ var Calendar = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__namespace
       var displayedMonthNames = displayedMonthOptions.map(function (option) {
         return option.label;
       });
-      var selectProps = utils.mergeProps({
+      var selectProps = mergeProps({
         className: cx('select'),
         onChange: function onChange(e) {
           return onMonthDropdownChange(e, e.target.value);
@@ -2784,7 +2829,7 @@ var Calendar = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__namespace
         value: viewMonth
       }, ptm('select'));
       var _content = /*#__PURE__*/React__namespace.createElement("select", selectProps, displayedMonthOptions.map(function (option) {
-        var optionProps = utils.mergeProps({
+        var optionProps = mergeProps({
           value: option.value
         }, ptm('option'));
         return /*#__PURE__*/React__namespace.createElement("option", _extends({}, optionProps, {
@@ -2805,7 +2850,7 @@ var Calendar = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__namespace
       }
       return _content;
     }
-    var monthTitleProps = utils.mergeProps({
+    var monthTitleProps = mergeProps({
       className: cx('monthTitle'),
       onClick: switchToMonthView,
       disabled: switchViewButtonDisabled()
@@ -2826,7 +2871,7 @@ var Calendar = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__namespace
       var displayedYearNames = _yearOptions2.filter(function (year) {
         return !(props.minDate && props.minDate.getFullYear() > year) && !(props.maxDate && props.maxDate.getFullYear() < year);
       });
-      var selectProps = utils.mergeProps({
+      var selectProps = mergeProps({
         className: cx('select'),
         onChange: function onChange(e) {
           return onYearDropdownChange(e, e.target.value);
@@ -2834,7 +2879,7 @@ var Calendar = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__namespace
         value: viewYear
       }, ptm('select'));
       var _content2 = /*#__PURE__*/React__namespace.createElement("select", selectProps, displayedYearNames.map(function (year) {
-        var optionProps = utils.mergeProps({
+        var optionProps = mergeProps({
           value: year
         }, ptm('option'));
         return /*#__PURE__*/React__namespace.createElement("option", _extends({}, optionProps, {
@@ -2863,7 +2908,7 @@ var Calendar = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__namespace
       return _content2;
     }
     var displayYear = props.numberOfMonths > 1 ? metaYear : currentYear;
-    var yearTitleProps = utils.mergeProps({
+    var yearTitleProps = mergeProps({
       className: cx('yearTitle'),
       onClick: function onClick(e) {
         return switchToYearView(e);
@@ -2874,28 +2919,28 @@ var Calendar = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__namespace
   };
   var createTitleDecadeElement = function createTitleDecadeElement() {
     var years = yearPickerValues();
-    var decadeTitleProps = utils.mergeProps({
+    var decadeTitleProps = mergeProps({
       className: cx('decadeTitle')
     }, ptm('decadeTitle'));
     if (currentView === 'year') {
-      var decadeTitleTextProps = utils.mergeProps(ptm('decadeTitleText'));
+      var decadeTitleTextProps = mergeProps(ptm('decadeTitleText'));
       return /*#__PURE__*/React__namespace.createElement("span", decadeTitleProps, props.decadeTemplate ? props.decadeTemplate(years) : /*#__PURE__*/React__namespace.createElement("span", decadeTitleTextProps, "".concat(yearPickerValues()[0], " - ").concat(yearPickerValues()[yearPickerValues().length - 1])));
     }
     return null;
   };
-  var createTitle = function createTitle(monthMetaData) {
-    var month = createTitleMonthElement(monthMetaData.month);
+  var createTitle = function createTitle(monthMetaData, index) {
+    var month = createTitleMonthElement(monthMetaData.month, index);
     var year = createTitleYearElement(monthMetaData.year);
     var decade = createTitleDecadeElement();
-    var titleProps = utils.mergeProps({
+    var titleProps = mergeProps({
       className: cx('title')
     }, ptm('title'));
     var showMonthAfterYear = PrimeReact.localeOption('showMonthAfterYear', props.locale);
     return /*#__PURE__*/React__namespace.createElement("div", titleProps, showMonthAfterYear ? year : month, showMonthAfterYear ? month : year, decade);
   };
   var createDayNames = function createDayNames(weekDays) {
-    var weekDayProps = utils.mergeProps(ptm('weekDay'));
-    var tableHeaderCellProps = utils.mergeProps({
+    var weekDayProps = mergeProps(ptm('weekDay'));
+    var tableHeaderCellProps = mergeProps({
       scope: 'col'
     }, ptm('tableHeaderCell'));
     var dayNames = weekDays.map(function (weekDay, index) {
@@ -2904,7 +2949,7 @@ var Calendar = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__namespace
       }), /*#__PURE__*/React__namespace.createElement("span", weekDayProps, weekDay));
     });
     if (props.showWeek) {
-      var weekHeaderProps = utils.mergeProps({
+      var weekHeaderProps = mergeProps({
         scope: 'col',
         className: cx('weekHeader'),
         'data-p-disabled': props.showWeek
@@ -2913,7 +2958,7 @@ var Calendar = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__namespace
           disabled: props.showWeek
         }
       }));
-      var weekLabel = utils.mergeProps(ptm('weekLabel'));
+      var weekLabel = mergeProps(ptm('weekLabel'));
       var weekHeader = /*#__PURE__*/React__namespace.createElement("th", _extends({}, weekHeaderProps, {
         key: "wn"
       }), /*#__PURE__*/React__namespace.createElement("span", weekLabel, PrimeReact.localeOption('weekHeader', props.locale)));
@@ -2923,7 +2968,7 @@ var Calendar = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__namespace
   };
   var createDateCellContent = function createDateCellContent(date, className, groupIndex) {
     var content = props.dateTemplate ? props.dateTemplate(date) : date.day;
-    var dayLabelProps = utils.mergeProps({
+    var dayLabelProps = mergeProps({
       className: cx('dayLabel', {
         className: className
       }),
@@ -2941,7 +2986,7 @@ var Calendar = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__namespace
         disabled: !date.selectable
       }
     }));
-    return /*#__PURE__*/React__namespace.createElement("span", dayLabelProps, content, /*#__PURE__*/React__namespace.createElement(ripple.Ripple, null));
+    return /*#__PURE__*/React__namespace.createElement("span", dayLabelProps, content);
   };
   var createWeek = function createWeek(weekDates, weekNumber, groupIndex) {
     var week = weekDates.map(function (date) {
@@ -2951,7 +2996,7 @@ var Calendar = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__namespace
         'p-disabled': !date.selectable
       });
       var content = date.otherMonth && !props.showOtherMonths ? null : createDateCellContent(date, dateClassName, groupIndex);
-      var dayProps = utils.mergeProps({
+      var dayProps = mergeProps({
         className: cx('day', {
           date: date
         }),
@@ -2969,10 +3014,10 @@ var Calendar = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__namespace
       }), content);
     });
     if (props.showWeek) {
-      var weekNumberProps = utils.mergeProps({
+      var weekNumberProps = mergeProps({
         className: cx('weekNumber')
       }, ptm('weekNumber'));
-      var weekLabelContainerProps = utils.mergeProps({
+      var weekLabelContainerProps = mergeProps({
         className: cx('weekLabelContainer'),
         'data-p-disabled': props.showWeek
       }, ptm('weekLabelContainer', {
@@ -2988,7 +3033,7 @@ var Calendar = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__namespace
     return week;
   };
   var createDates = function createDates(monthMetaData, groupIndex) {
-    var tableBodyRowProps = utils.mergeProps(ptm('tableBodyRowProps'));
+    var tableBodyRowProps = mergeProps(ptm('tableBodyRowProps'));
     return monthMetaData.dates.map(function (weekDates, index) {
       return /*#__PURE__*/React__namespace.createElement("tr", _extends({}, tableBodyRowProps, {
         key: index
@@ -2998,30 +3043,30 @@ 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);
-    var containerProps = utils.mergeProps({
+    var containerProps = mergeProps({
       className: cx('container'),
       key: utils.UniqueComponentId('calendar_container_')
     }, ptm('container'));
-    var tableProps = utils.mergeProps({
+    var tableProps = mergeProps({
       className: cx('table')
     }, ptm('table'));
-    var tableHeaderProps = utils.mergeProps(ptm('tableHeader'));
-    var tableHeaderRowProps = utils.mergeProps(ptm('tableHeaderRow'));
-    var tableBodyProps = utils.mergeProps(ptm('tableBody'));
+    var tableHeaderProps = mergeProps(ptm('tableHeader'));
+    var tableHeaderRowProps = mergeProps(ptm('tableHeaderRow'));
+    var tableBodyProps = mergeProps(ptm('tableBody'));
     return currentView === 'date' && /*#__PURE__*/React__namespace.createElement("div", containerProps, /*#__PURE__*/React__namespace.createElement("table", tableProps, /*#__PURE__*/React__namespace.createElement("thead", tableHeaderProps, /*#__PURE__*/React__namespace.createElement("tr", tableHeaderRowProps, dayNames)), /*#__PURE__*/React__namespace.createElement("tbody", tableBodyProps, dates)));
   };
   var createMonth = function createMonth(monthMetaData, index) {
     var weekDays = createWeekDaysMeta();
     var backwardNavigator = createBackwardNavigator(index === 0);
     var forwardNavigator = createForwardNavigator(props.numberOfMonths === 1 || index === props.numberOfMonths - 1);
-    var title = createTitle(monthMetaData);
+    var title = createTitle(monthMetaData, index);
     var dateViewGrid = createDateViewGrid(monthMetaData, weekDays, index);
     var header = props.headerTemplate ? props.headerTemplate() : null;
     var monthKey = monthMetaData.month + '-' + monthMetaData.year;
-    var groupProps = utils.mergeProps({
+    var groupProps = mergeProps({
       className: cx('group')
     }, ptm('group'));
-    var headerProps = utils.mergeProps({
+    var headerProps = mergeProps({
       className: cx('header'),
       key: index
     }, ptm('header'));
@@ -3031,7 +3076,7 @@ var Calendar = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__namespace
   };
   var createMonths = function createMonths(monthsMetaData) {
     var groups = monthsMetaData.map(createMonth);
-    var groupContainerProps = utils.mergeProps({
+    var groupContainerProps = mergeProps({
       className: cx('groupContainer')
     }, ptm('groupContainer'));
     return /*#__PURE__*/React__namespace.createElement("div", groupContainerProps, groups);
@@ -3063,16 +3108,16 @@ var Calendar = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__namespace
     var forwardNavigator = createForwardNavigator(true);
     var yearElement = createTitleYearElement(getViewDate().getFullYear());
     var decade = createTitleDecadeElement();
-    var groupContainerProps = utils.mergeProps({
+    var groupContainerProps = mergeProps({
       className: cx('groupContainer')
     }, ptm('groupContainer'));
-    var groupProps = utils.mergeProps({
+    var groupProps = mergeProps({
       className: cx('group')
     }, ptm('group'));
-    var headerProps = utils.mergeProps({
+    var headerProps = mergeProps({
       className: cx('header')
     }, ptm('header'));
-    var titleProps = utils.mergeProps({
+    var titleProps = mergeProps({
       className: cx('title')
     }, ptm('title'));
     return /*#__PURE__*/React__namespace.createElement(React__namespace.Fragment, null, /*#__PURE__*/React__namespace.createElement("div", groupContainerProps, /*#__PURE__*/React__namespace.createElement("div", groupProps, /*#__PURE__*/React__namespace.createElement("div", headerProps, backwardNavigator, /*#__PURE__*/React__namespace.createElement("div", titleProps, yearElement, decade), forwardNavigator))));
@@ -3087,8 +3132,8 @@ var Calendar = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__namespace
     }
     return null;
   };
-  var incrementIconProps = utils.mergeProps(ptm('incrementIcon'));
-  var decrementIconProps = utils.mergeProps(ptm('decrementIcon'));
+  var incrementIconProps = mergeProps(ptm('incrementIcon'));
+  var decrementIconProps = mergeProps(ptm('decrementIcon'));
   var incrementIcon = utils.IconUtils.getJSXIcon(props.incrementIcon || /*#__PURE__*/React__namespace.createElement(chevronup.ChevronUpIcon, incrementIconProps), _objectSpread({}, incrementIconProps), {
     props: props
   });
@@ -3105,12 +3150,12 @@ var Calendar = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__namespace
     if (props.hourFormat === '12') {
       if (hour === 0) hour = 12;else if (hour > 11 && hour !== 12) hour = hour - 12;
     }
-    var hourProps = utils.mergeProps(ptm('hour'));
+    var hourProps = mergeProps(ptm('hour'));
     var hourDisplay = hour < 10 ? '0' + hour : hour;
-    var hourPickerProps = utils.mergeProps({
+    var hourPickerProps = mergeProps({
       className: cx('hourPicker')
     }, ptm('hourPicker'));
-    var incrementButtonProps = utils.mergeProps({
+    var incrementButtonProps = mergeProps({
       type: 'button',
       className: cx('incrementButton'),
       onMouseDown: function onMouseDown(e) {
@@ -3122,7 +3167,7 @@ var Calendar = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__namespace
         return onContainerButtonKeydown(e);
       }
     }, ptm('incrementButton'));
-    var decrementButtonProps = utils.mergeProps({
+    var decrementButtonProps = mergeProps({
       type: 'button',
       className: cx('decrementButton'),
       onMouseDown: function onMouseDown(e) {
@@ -3140,12 +3185,12 @@ var Calendar = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__namespace
     var currentTime = getCurrentDateTime();
     var minute = doStepMinute(currentTime.getMinutes());
     minute = minute > 59 ? minute - 60 : minute;
-    var minuteProps = utils.mergeProps(ptm('minute'));
+    var minuteProps = mergeProps(ptm('minute'));
     var minuteDisplay = minute < 10 ? '0' + minute : minute;
-    var minutePickerProps = utils.mergeProps({
+    var minutePickerProps = mergeProps({
       className: cx('minutePicker')
     }, ptm('minutePicker'));
-    var incrementButtonProps = utils.mergeProps({
+    var incrementButtonProps = mergeProps({
       type: 'button',
       className: cx('incrementButton'),
       onMouseDown: function onMouseDown(e) {
@@ -3157,7 +3202,7 @@ var Calendar = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__namespace
         return onContainerButtonKeydown(e);
       }
     }, ptm('incrementButton'));
-    var decrementButtonProps = utils.mergeProps({
+    var decrementButtonProps = mergeProps({
       type: 'button',
       className: cx('decrementButton'),
       onMouseDown: function onMouseDown(e) {
@@ -3174,13 +3219,13 @@ var Calendar = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__namespace
   var createSecondPicker = function createSecondPicker() {
     if (props.showSeconds) {
       var currentTime = getCurrentDateTime();
-      var secondProps = utils.mergeProps(ptm('second'));
+      var secondProps = mergeProps(ptm('second'));
       var second = currentTime.getSeconds();
       var secondDisplay = second < 10 ? '0' + second : second;
-      var secondPickerProps = utils.mergeProps({
+      var secondPickerProps = mergeProps({
         className: cx('secondPicker')
       }, ptm('secondPicker'));
-      var incrementButtonProps = utils.mergeProps({
+      var incrementButtonProps = mergeProps({
         type: 'button',
         className: cx('incrementButton'),
         onMouseDown: function onMouseDown(e) {
@@ -3192,7 +3237,7 @@ var Calendar = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__namespace
           return onContainerButtonKeydown(e);
         }
       }, ptm('incrementButton'));
-      var decrementButtonProps = utils.mergeProps({
+      var decrementButtonProps = mergeProps({
         type: 'button',
         className: cx('decrementButton'),
         onMouseDown: function onMouseDown(e) {
@@ -3211,13 +3256,13 @@ var Calendar = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__namespace
   var createMiliSecondPicker = function createMiliSecondPicker() {
     if (props.showMillisec) {
       var currentTime = getCurrentDateTime();
-      var millisecondProps = utils.mergeProps(ptm('millisecond'));
+      var millisecondProps = mergeProps(ptm('millisecond'));
       var millisecond = currentTime.getMilliseconds();
       var millisecondDisplay = millisecond < 100 ? (millisecond < 10 ? '00' : '0') + millisecond : millisecond;
-      var millisecondPickerProps = utils.mergeProps({
+      var millisecondPickerProps = mergeProps({
         className: cx('millisecondPicker')
       }, ptm('millisecondPicker'));
-      var incrementButtonProps = utils.mergeProps({
+      var incrementButtonProps = mergeProps({
         type: 'button',
         className: cx('incrementButton'),
         onMouseDown: function onMouseDown(e) {
@@ -3229,7 +3274,7 @@ var Calendar = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__namespace
           return onContainerButtonKeydown(e);
         }
       }, ptm('incrementButton'));
-      var decrementButtonProps = utils.mergeProps({
+      var decrementButtonProps = mergeProps({
         type: 'button',
         className: cx('decrementButton'),
         onMouseDown: function onMouseDown(e) {
@@ -3250,18 +3295,18 @@ var Calendar = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__namespace
       var currentTime = getCurrentDateTime();
       var hour = currentTime.getHours();
       var display = hour > 11 ? 'PM' : 'AM';
-      var ampmProps = utils.mergeProps(ptm('ampm'));
-      var ampmPickerProps = utils.mergeProps({
+      var ampmProps = mergeProps(ptm('ampm'));
+      var ampmPickerProps = mergeProps({
         className: cx('ampmPicker')
       }, ptm('ampmPicker'));
-      var incrementButtonProps = utils.mergeProps({
+      var incrementButtonProps = mergeProps({
         type: 'button',
         className: cx('incrementButton'),
         onClick: function onClick(e) {
           return toggleAmPm(e);
         }
       }, ptm('incrementButton'));
-      var decrementButtonProps = utils.mergeProps({
+      var decrementButtonProps = mergeProps({
         type: 'button',
         className: cx('decrementButton'),
         onClick: function onClick(e) {
@@ -3273,15 +3318,15 @@ var Calendar = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__namespace
     return null;
   };
   var createSeparator = function createSeparator(separator) {
-    var separatorContainerProps = utils.mergeProps({
+    var separatorContainerProps = mergeProps({
       className: cx('separatorContainer')
     }, ptm('separatorContainer'));
-    var separatorProps = utils.mergeProps(ptm('separator'));
+    var separatorProps = mergeProps(ptm('separator'));
     return /*#__PURE__*/React__namespace.createElement("div", separatorContainerProps, /*#__PURE__*/React__namespace.createElement("span", separatorProps, separator));
   };
   var createTimePicker = function createTimePicker() {
     if ((props.showTime || props.timeOnly) && currentView === 'date') {
-      var timePickerProps = utils.mergeProps({
+      var timePickerProps = mergeProps({
         className: cx('timePicker')
       }, ptm('timePicker'));
       return /*#__PURE__*/React__namespace.createElement("div", timePickerProps, createHourPicker(), createSeparator(':'), createMinutePicker(), props.showSeconds && createSeparator(':'), createSecondPicker(), props.showMillisec && createSeparator('.'), createMiliSecondPicker(), props.hourFormat === '12' && createSeparator(':'), createAmPmPicker());
@@ -3349,7 +3394,7 @@ var Calendar = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__namespace
       var _localeOptions4 = PrimeReact.localeOptions(props.locale),
         today = _localeOptions4.today,
         clear = _localeOptions4.clear;
-      var buttonbarProps = utils.mergeProps({
+      var buttonbarProps = mergeProps({
         className: cx('buttonbar')
       }, ptm('buttonbar'));
       return /*#__PURE__*/React__namespace.createElement("div", buttonbarProps, /*#__PURE__*/React__namespace.createElement(button.Button, {
@@ -3377,7 +3422,7 @@ var Calendar = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__namespace
   var createFooter = function createFooter() {
     if (props.footerTemplate) {
       var _content3 = props.footerTemplate();
-      var footerProps = utils.mergeProps({
+      var footerProps = mergeProps({
         className: cx('footer')
       }, ptm('footer'));
       return /*#__PURE__*/React__namespace.createElement("div", footerProps, _content3);
@@ -3386,14 +3431,14 @@ var Calendar = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__namespace
   };
   var createMonthPicker = function createMonthPicker() {
     if (currentView === 'month') {
-      var monthPickerProps = utils.mergeProps({
+      var monthPickerProps = mergeProps({
         className: cx('monthPicker')
       }, ptm('monthPicker'));
       return /*#__PURE__*/React__namespace.createElement("div", monthPickerProps, monthPickerValues().map(function (m, i) {
-        var monthProps = utils.mergeProps({
+        var monthProps = mergeProps({
           className: cx('month', {
             isMonthSelected: isMonthSelected,
-            isSelectable: isSelectable,
+            isMonthYearDisabled: isMonthYearDisabled,
             i: i,
             currentYear: currentYear
           }),
@@ -3403,14 +3448,14 @@ var Calendar = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__namespace
           onKeyDown: function onKeyDown(event) {
             return onMonthCellKeydown(event, i);
           },
-          'data-p-disabled': !m.selectable,
+          'data-p-disabled': isMonthYearDisabled(i, currentYear),
           'data-p-highlight': isMonthSelected(i)
         }, ptm('month', {
           context: {
             month: m,
             monthIndex: i,
             selected: isMonthSelected(i),
-            disabled: !m.selectable
+            disabled: isMonthYearDisabled(i, currentYear)
           }
         }));
         return /*#__PURE__*/React__namespace.createElement("span", _extends({}, monthProps, {
@@ -3422,27 +3467,27 @@ var Calendar = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__namespace
   };
   var createYearPicker = function createYearPicker() {
     if (currentView === 'year') {
-      var yearPickerProps = utils.mergeProps({
+      var yearPickerProps = mergeProps({
         className: cx('yearPicker')
       }, ptm('yearPicker'));
       return /*#__PURE__*/React__namespace.createElement("div", yearPickerProps, yearPickerValues().map(function (y, i) {
-        var yearProps = utils.mergeProps({
+        var yearProps = mergeProps({
           className: cx('year', {
             isYearSelected: isYearSelected,
-            isSelectable: isSelectable,
+            isMonthYearDisabled: isMonthYearDisabled,
             y: y
           }),
           onClick: function onClick(event) {
             return onYearSelect(event, y);
           },
           'data-p-highlight': isYearSelected(y),
-          'data-p-disabled': !isSelectable(0, -1, y)
+          'data-p-disabled': isMonthYearDisabled(-1, y)
         }, ptm('year', {
           context: {
             year: y,
             yearIndex: i,
             selected: isYearSelected(i),
-            disabled: !y.selectable
+            disabled: isMonthYearDisabled(-1, y)
           }
         }));
         return /*#__PURE__*/React__namespace.createElement("span", _extends({}, yearProps, {
@@ -3470,7 +3515,7 @@ var Calendar = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__namespace
   var monthPicker = createMonthPicker();
   var yearPicker = createYearPicker();
   var isFilled = utils.DomHandler.hasClass(inputRef.current, 'p-filled') && inputRef.current.value !== '';
-  var rootProps = utils.mergeProps({
+  var rootProps = mergeProps({
     id: props.id,
     className: utils.classNames(props.className, cx('root', {
       focusedState: focusedState,