primereact 10.3.0 → 10.3.2

package/calendar/calendar.esm.js

@@ -3,7 +3,7 @@ import * as React from 'react';
 import PrimeReact, { PrimeReactContext, localeOptions, localeOption } from 'primereact/api';
 import { Button } from 'primereact/button';
 import { ComponentBase, useHandleStyle } from 'primereact/componentbase';
-import { usePrevious, useOverlayListener, useMountEffect, useUpdateEffect, useUnmountEffect } from 'primereact/hooks';
+import { useMergeProps, usePrevious, useOverlayListener, useMountEffect, useUpdateEffect, useUnmountEffect } from 'primereact/hooks';
 import { CalendarIcon } from 'primereact/icons/calendar';
 import { ChevronDownIcon } from 'primereact/icons/chevrondown';
 import { ChevronLeftIcon } from 'primereact/icons/chevronleft';
@@ -12,7 +12,7 @@ import { ChevronUpIcon } from 'primereact/icons/chevronup';
 import { InputText } from 'primereact/inputtext';
 import { OverlayService } from 'primereact/overlayservice';
 import { Ripple } from 'primereact/ripple';
-import { classNames, mergeProps, UniqueComponentId, DomHandler, ObjectUtils, mask, ZIndexUtils, IconUtils } from 'primereact/utils';
+import { classNames, UniqueComponentId, DomHandler, ObjectUtils, mask, ZIndexUtils, IconUtils } from 'primereact/utils';
 import { CSSTransition } from 'primereact/csstransition';
 import { Portal } from 'primereact/portal';
 
@@ -159,22 +159,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 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 classNames('p-monthpicker-month', {
       'p-highlight': isMonthSelected(i),
-      'p-disabled': !isSelectable(0, i, currentYear)
+      'p-disabled': isMonthYearDisabled(i, currentYear)
     });
   },
   hourPicker: 'p-hour-picker',
@@ -328,6 +328,7 @@ var CalendarBase = ComponentBase.extend({
 
 var CalendarPanel = /*#__PURE__*/React.forwardRef(function (props, ref) {
   var cx = props.cx;
+  var mergeProps = useMergeProps();
   var createElement = function createElement() {
     var panelProps = mergeProps({
       className: cx('panel', {
@@ -375,6 +376,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.memo( /*#__PURE__*/React.forwardRef(function (inProps, ref) {
+  var mergeProps = useMergeProps();
   var context = React.useContext(PrimeReactContext);
   var props = CalendarBase.getProps(inProps, context);
   var _React$useState = React.useState(false),
@@ -1125,7 +1127,7 @@ var Calendar = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function (
       }
       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);
@@ -1165,7 +1167,7 @@ var Calendar = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function (
   };
   var updateViewDate = function updateViewDate(event, value) {
     validateDate(value);
-    if (props.onViewDateChange) {
+    if (props.onViewDateChange && event) {
       props.onViewDateChange({
         originalEvent: event,
         value: value
@@ -1588,6 +1590,7 @@ var Calendar = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function (
         month: month + 1,
         year: currentYear
       });
+      updateViewDate(event, currentDate);
     }
   };
   var onYearSelect = function onYearSelect(event, year) {
@@ -1682,17 +1685,24 @@ var Calendar = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function (
       var key = props.touchUI ? 'modal' : 'overlay';
       ZIndexUtils.set(key, overlayRef.current, context && context.autoZIndex || PrimeReact.autoZIndex, props.baseZIndex || context && context.zIndex[key] || PrimeReact.zIndex[key]);
     }
-    alignOverlay();
-  };
-  var onOverlayEntered = function onOverlayEntered() {
     if (!props.touchUI && overlayRef && overlayRef.current && inputRef && inputRef.current && !appendDisabled()) {
+      var inputWidth = 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 = DomHandler.getOuterWidth(overlayRef.current) + 'px';
-        overlayRef.current.style.minWidth = DomHandler.getOuterWidth(inputRef.current) + 'px';
+        overlayRef.current.style.minWidth = inputWidth + 'px';
       } else {
-        overlayRef.current.style.width = 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();
     DomHandler.focusFirstElement(overlayRef.current);
@@ -1706,7 +1716,8 @@ var Calendar = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function (
     props.onHide && props.onHide();
   };
   var appendDisabled = function appendDisabled() {
-    return props.appendTo === 'self' || props.inline;
+    var appendTo = props.appendTo || context && context.appendTo || PrimeReact.appendTo;
+    return appendTo === 'self' || props.inline;
   };
   var alignOverlay = function alignOverlay() {
     if (props.touchUI) {
@@ -1960,10 +1971,7 @@ var Calendar = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function (
         }
       }
     }
-    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) {
@@ -2096,27 +2104,45 @@ var Calendar = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function (
   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;
@@ -2355,8 +2381,13 @@ var Calendar = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function (
     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,
@@ -2598,7 +2629,18 @@ var Calendar = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function (
     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]);
+  useUpdateEffect(function () {
+    if (overlayVisibleState || props.visible) {
+      // Github #5529
+      setTimeout(function () {
+        alignOverlay();
+      });
+    }
+  }, [currentView, overlayVisibleState, props.visible]);
   useUpdateEffect(function () {
     var newDate = props.value;
     if (previousValue !== newDate) {
@@ -2629,7 +2671,7 @@ var Calendar = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function (
   }, [props.value, visible]);
   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]);
   useUpdateEffect(function () {
     if (overlayRef.current) {
       setNavigationState(viewDateState);
@@ -2732,9 +2774,12 @@ var Calendar = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function (
       ref: nextButton
     }, nextButtonProps), forwardNavigatorIcon, /*#__PURE__*/React.createElement(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 = 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) {
@@ -2856,8 +2901,8 @@ var Calendar = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function (
     }
     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 = mergeProps({
@@ -2914,7 +2959,7 @@ var Calendar = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function (
         disabled: !date.selectable
       }
     }));
-    return /*#__PURE__*/React.createElement("span", dayLabelProps, content, /*#__PURE__*/React.createElement(Ripple, null));
+    return /*#__PURE__*/React.createElement("span", dayLabelProps, content);
   };
   var createWeek = function createWeek(weekDates, weekNumber, groupIndex) {
     var week = weekDates.map(function (date) {
@@ -2987,7 +3032,7 @@ var Calendar = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function (
     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;
@@ -3366,7 +3411,7 @@ var Calendar = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function (
         var monthProps = mergeProps({
           className: cx('month', {
             isMonthSelected: isMonthSelected,
-            isSelectable: isSelectable,
+            isMonthYearDisabled: isMonthYearDisabled,
             i: i,
             currentYear: currentYear
           }),
@@ -3376,14 +3421,14 @@ var Calendar = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function (
           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.createElement("span", _extends({}, monthProps, {
@@ -3402,20 +3447,20 @@ var Calendar = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function (
         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.createElement("span", _extends({}, yearProps, {