primereact 10.3.0 → 10.3.2

package/calendar/calendar.js

@@ -168,22 +168,22 @@ this.primereact.calendar = (function (exports, React, PrimeReact, button, compon
     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',
@@ -337,8 +337,9 @@ this.primereact.calendar = (function (exports, React, PrimeReact, button, compon
 
   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
         }),
@@ -348,7 +349,7 @@ this.primereact.calendar = (function (exports, React, PrimeReact, button, compon
       }, props.ptm('panel', {
         hostName: props.hostName
       }));
-      var transitionProps = utils.mergeProps({
+      var transitionProps = mergeProps({
         classNames: cx('transition'),
         "in": props["in"],
         timeout: {
@@ -384,6 +385,7 @@ this.primereact.calendar = (function (exports, React, PrimeReact, button, compon
   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),
@@ -1134,7 +1136,7 @@ this.primereact.calendar = (function (exports, React, PrimeReact, button, compon
         }
         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);
@@ -1174,7 +1176,7 @@ this.primereact.calendar = (function (exports, React, PrimeReact, button, compon
     };
     var updateViewDate = function updateViewDate(event, value) {
       validateDate(value);
-      if (props.onViewDateChange) {
+      if (props.onViewDateChange && event) {
         props.onViewDateChange({
           originalEvent: event,
           value: value
@@ -1597,6 +1599,7 @@ this.primereact.calendar = (function (exports, React, PrimeReact, button, compon
           month: month + 1,
           year: currentYear
         });
+        updateViewDate(event, currentDate);
       }
     };
     var onYearSelect = function onYearSelect(event, year) {
@@ -1691,17 +1694,24 @@ this.primereact.calendar = (function (exports, React, PrimeReact, button, compon
         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);
@@ -1715,7 +1725,8 @@ this.primereact.calendar = (function (exports, React, PrimeReact, button, compon
       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) {
@@ -1969,10 +1980,7 @@ this.primereact.calendar = (function (exports, React, PrimeReact, button, compon
           }
         }
       }
-      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) {
@@ -2105,27 +2113,45 @@ this.primereact.calendar = (function (exports, React, PrimeReact, button, compon
     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;
@@ -2364,8 +2390,13 @@ this.primereact.calendar = (function (exports, React, PrimeReact, button, compon
       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,
@@ -2607,7 +2638,18 @@ this.primereact.calendar = (function (exports, React, PrimeReact, button, compon
       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) {
@@ -2638,7 +2680,7 @@ this.primereact.calendar = (function (exports, React, PrimeReact, button, compon
     }, [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);
@@ -2700,14 +2742,14 @@ this.primereact.calendar = (function (exports, React, PrimeReact, button, compon
           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'));
@@ -2726,14 +2768,14 @@ this.primereact.calendar = (function (exports, React, PrimeReact, button, compon
           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'));
@@ -2741,9 +2783,12 @@ this.primereact.calendar = (function (exports, React, PrimeReact, button, compon
         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) {
@@ -2758,7 +2803,7 @@ this.primereact.calendar = (function (exports, React, PrimeReact, button, compon
         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);
@@ -2766,7 +2811,7 @@ this.primereact.calendar = (function (exports, React, PrimeReact, button, compon
           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, {
@@ -2787,7 +2832,7 @@ this.primereact.calendar = (function (exports, React, PrimeReact, button, compon
         }
         return _content;
       }
-      var monthTitleProps = utils.mergeProps({
+      var monthTitleProps = mergeProps({
         className: cx('monthTitle'),
         onClick: switchToMonthView,
         disabled: switchViewButtonDisabled()
@@ -2808,7 +2853,7 @@ this.primereact.calendar = (function (exports, React, PrimeReact, button, compon
         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);
@@ -2816,7 +2861,7 @@ this.primereact.calendar = (function (exports, React, PrimeReact, button, compon
           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, {
@@ -2845,7 +2890,7 @@ this.primereact.calendar = (function (exports, React, PrimeReact, button, compon
         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);
@@ -2856,28 +2901,28 @@ this.primereact.calendar = (function (exports, React, PrimeReact, button, compon
     };
     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) {
@@ -2886,7 +2931,7 @@ this.primereact.calendar = (function (exports, React, PrimeReact, button, compon
         }), /*#__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
@@ -2895,7 +2940,7 @@ this.primereact.calendar = (function (exports, React, PrimeReact, button, compon
             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)));
@@ -2905,7 +2950,7 @@ this.primereact.calendar = (function (exports, React, PrimeReact, button, compon
     };
     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
         }),
@@ -2923,7 +2968,7 @@ this.primereact.calendar = (function (exports, React, PrimeReact, button, compon
           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) {
@@ -2933,7 +2978,7 @@ this.primereact.calendar = (function (exports, React, PrimeReact, button, compon
           '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
           }),
@@ -2951,10 +2996,10 @@ this.primereact.calendar = (function (exports, React, PrimeReact, button, compon
         }), 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', {
@@ -2970,7 +3015,7 @@ this.primereact.calendar = (function (exports, React, PrimeReact, button, compon
       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
@@ -2980,30 +3025,30 @@ this.primereact.calendar = (function (exports, React, PrimeReact, button, compon
     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'));
@@ -3013,7 +3058,7 @@ this.primereact.calendar = (function (exports, React, PrimeReact, button, compon
     };
     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);
@@ -3045,16 +3090,16 @@ this.primereact.calendar = (function (exports, React, PrimeReact, button, compon
       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))));
@@ -3069,8 +3114,8 @@ this.primereact.calendar = (function (exports, React, PrimeReact, button, compon
       }
       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
     });
@@ -3087,12 +3132,12 @@ this.primereact.calendar = (function (exports, React, PrimeReact, button, compon
       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) {
@@ -3104,7 +3149,7 @@ this.primereact.calendar = (function (exports, React, PrimeReact, button, compon
           return onContainerButtonKeydown(e);
         }
       }, ptm('incrementButton'));
-      var decrementButtonProps = utils.mergeProps({
+      var decrementButtonProps = mergeProps({
         type: 'button',
         className: cx('decrementButton'),
         onMouseDown: function onMouseDown(e) {
@@ -3122,12 +3167,12 @@ this.primereact.calendar = (function (exports, React, PrimeReact, button, compon
       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) {
@@ -3139,7 +3184,7 @@ this.primereact.calendar = (function (exports, React, PrimeReact, button, compon
           return onContainerButtonKeydown(e);
         }
       }, ptm('incrementButton'));
-      var decrementButtonProps = utils.mergeProps({
+      var decrementButtonProps = mergeProps({
         type: 'button',
         className: cx('decrementButton'),
         onMouseDown: function onMouseDown(e) {
@@ -3156,13 +3201,13 @@ this.primereact.calendar = (function (exports, React, PrimeReact, button, compon
     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) {
@@ -3174,7 +3219,7 @@ this.primereact.calendar = (function (exports, React, PrimeReact, button, compon
             return onContainerButtonKeydown(e);
           }
         }, ptm('incrementButton'));
-        var decrementButtonProps = utils.mergeProps({
+        var decrementButtonProps = mergeProps({
           type: 'button',
           className: cx('decrementButton'),
           onMouseDown: function onMouseDown(e) {
@@ -3193,13 +3238,13 @@ this.primereact.calendar = (function (exports, React, PrimeReact, button, compon
     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) {
@@ -3211,7 +3256,7 @@ this.primereact.calendar = (function (exports, React, PrimeReact, button, compon
             return onContainerButtonKeydown(e);
           }
         }, ptm('incrementButton'));
-        var decrementButtonProps = utils.mergeProps({
+        var decrementButtonProps = mergeProps({
           type: 'button',
           className: cx('decrementButton'),
           onMouseDown: function onMouseDown(e) {
@@ -3232,18 +3277,18 @@ this.primereact.calendar = (function (exports, React, PrimeReact, button, compon
         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) {
@@ -3255,15 +3300,15 @@ this.primereact.calendar = (function (exports, React, PrimeReact, button, compon
       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());
@@ -3331,7 +3376,7 @@ this.primereact.calendar = (function (exports, React, PrimeReact, button, compon
         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, {
@@ -3359,7 +3404,7 @@ this.primereact.calendar = (function (exports, React, PrimeReact, button, compon
     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);
@@ -3368,14 +3413,14 @@ this.primereact.calendar = (function (exports, React, PrimeReact, button, compon
     };
     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
             }),
@@ -3385,14 +3430,14 @@ this.primereact.calendar = (function (exports, React, PrimeReact, button, compon
             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, {
@@ -3404,27 +3449,27 @@ this.primereact.calendar = (function (exports, React, PrimeReact, button, compon
     };
     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, {
@@ -3452,7 +3497,7 @@ this.primereact.calendar = (function (exports, React, PrimeReact, button, compon
     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,