primereact 6.5.1 → 7.0.0-rc.2

package/calendar/calendar.esm.js

@@ -130,6 +130,8 @@ function _inherits(subClass, superClass) {
 function _possibleConstructorReturn(self, call) {
   if (call && (_typeof(call) === "object" || typeof call === "function")) {
     return call;
+  } else if (call !== void 0) {
+    throw new TypeError("Derived constructors may only return object or undefined");
   }
 
   return _assertThisInitialized(self);
@@ -193,7 +195,8 @@ var CalendarPanelComponent = /*#__PURE__*/function (_Component) {
         ref: this.props.forwardRef,
         className: this.props.className,
         style: this.props.style,
-        onClick: this.props.onClick
+        onClick: this.props.onClick,
+        onMouseUp: this.props.onMouseUp
       }, this.props.children));
     }
   }, {
@@ -280,6 +283,7 @@ var Calendar = /*#__PURE__*/function (_Component) {
     _this.onTodayButtonClick = _this.onTodayButtonClick.bind(_assertThisInitialized(_this));
     _this.onClearButtonClick = _this.onClearButtonClick.bind(_assertThisInitialized(_this));
     _this.onPanelClick = _this.onPanelClick.bind(_assertThisInitialized(_this));
+    _this.onPanelMouseUp = _this.onPanelMouseUp.bind(_assertThisInitialized(_this));
     _this.incrementHour = _this.incrementHour.bind(_assertThisInitialized(_this));
     _this.decrementHour = _this.decrementHour.bind(_assertThisInitialized(_this));
     _this.incrementMinute = _this.incrementMinute.bind(_assertThisInitialized(_this));
@@ -822,6 +826,11 @@ var Calendar = /*#__PURE__*/function (_Component) {
         });
       }
     }
+  }, {
+    key: "onPanelMouseUp",
+    value: function onPanelMouseUp(event) {
+      this.onPanelClick(event);
+    }
   }, {
     key: "onTimePickerElementMouseDown",
     value: function onTimePickerElementMouseDown(event, type, direction) {
@@ -1876,7 +1885,7 @@ var Calendar = /*#__PURE__*/function (_Component) {
       if (!this.touchUIMask) {
         this.touchUIMask = document.createElement('div');
         this.touchUIMask.style.zIndex = String(ZIndexUtils.get(this.overlayRef.current) - 1);
-        DomHandler.addMultipleClasses(this.touchUIMask, 'p-component-overlay p-datepicker-mask p-datepicker-mask-scrollblocker');
+        DomHandler.addMultipleClasses(this.touchUIMask, 'p-component-overlay p-datepicker-mask p-datepicker-mask-scrollblocker p-component-overlay-enter');
 
         this.touchUIMaskClickListener = function () {
           _this14.disableModality();
@@ -1890,28 +1899,36 @@ var Calendar = /*#__PURE__*/function (_Component) {
   }, {
     key: "disableModality",
     value: function disableModality() {
-      if (this.touchUIMask) {
-        this.touchUIMask.removeEventListener('click', this.touchUIMaskClickListener);
-        this.touchUIMaskClickListener = null;
-        document.body.removeChild(this.touchUIMask);
-        this.touchUIMask = null;
-        var bodyChildren = document.body.children;
-        var hasBlockerMasks;
+      var _this15 = this;
 
-        for (var i = 0; i < bodyChildren.length; i++) {
-          var bodyChild = bodyChildren[i];
+      if (this.touchUIMask) {
+        DomHandler.addClass(this.touchUIMask, 'p-component-overlay-leave');
+        this.touchUIMask.addEventListener('animationend', function () {
+          _this15.destroyMask();
+        });
+      }
+    }
+  }, {
+    key: "destroyMask",
+    value: function destroyMask() {
+      this.touchUIMask.removeEventListener('click', this.touchUIMaskClickListener);
+      this.touchUIMaskClickListener = null;
+      document.body.removeChild(this.touchUIMask);
+      this.touchUIMask = null;
+      var bodyChildren = document.body.children;
+      var hasBlockerMasks;
 
-          if (DomHandler.hasClass(bodyChild, 'p-datepicker-mask-scrollblocker')) {
-            hasBlockerMasks = true;
-            break;
-          }
-        }
+      for (var i = 0; i < bodyChildren.length; i++) {
+        var bodyChild = bodyChildren[i];
 
-        if (!hasBlockerMasks) {
-          DomHandler.removeClass(document.body, 'p-overflow-hidden');
+        if (DomHandler.hasClass(bodyChild, 'p-datepicker-mask-scrollblocker')) {
+          hasBlockerMasks = true;
+          break;
         }
+      }
 
-        this.hideOverlay();
+      if (!hasBlockerMasks) {
+        DomHandler.removeClass(document.body, 'p-overflow-hidden');
       }
     }
   }, {
@@ -2820,12 +2837,12 @@ var Calendar = /*#__PURE__*/function (_Component) {
   }, {
     key: "renderBackwardNavigator",
     value: function renderBackwardNavigator(isVisible) {
-      var _this15 = this;
+      var _this16 = this;
 
       var navigatorProps = isVisible ? {
         'onClick': this.onPrevButtonClick,
         'onKeyDown': function onKeyDown(e) {
-          return _this15.onContainerButtonKeydown(e);
+          return _this16.onContainerButtonKeydown(e);
         }
       } : {
         'style': {
@@ -2842,12 +2859,12 @@ var Calendar = /*#__PURE__*/function (_Component) {
   }, {
     key: "renderForwardNavigator",
     value: function renderForwardNavigator(isVisible) {
-      var _this16 = this;
+      var _this17 = this;
 
       var navigatorProps = isVisible ? {
         'onClick': this.onNextButtonClick,
         'onKeyDown': function onKeyDown(e) {
-          return _this16.onContainerButtonKeydown(e);
+          return _this17.onContainerButtonKeydown(e);
         }
       } : {
         'style': {
@@ -2874,7 +2891,7 @@ var Calendar = /*#__PURE__*/function (_Component) {
   }, {
     key: "renderTitleMonthElement",
     value: function renderTitleMonthElement(month) {
-      var _this17 = this;
+      var _this18 = this;
 
       var monthNames = localeOption('monthNames', this.props.locale);
 
@@ -2882,7 +2899,7 @@ var Calendar = /*#__PURE__*/function (_Component) {
         var viewDate = this.getViewDate();
         var viewMonth = viewDate.getMonth();
         var displayedMonthOptions = monthNames.map(function (month, index) {
-          return (!_this17.isInMinYear(viewDate) || index >= _this17.props.minDate.getMonth()) && (!_this17.isInMaxYear(viewDate) || index <= _this17.props.maxDate.getMonth()) ? {
+          return (!_this18.isInMinYear(viewDate) || index >= _this18.props.minDate.getMonth()) && (!_this18.isInMaxYear(viewDate) || index <= _this18.props.maxDate.getMonth()) ? {
             label: month,
             value: index,
             index: index
@@ -2896,7 +2913,7 @@ var Calendar = /*#__PURE__*/function (_Component) {
         var content = /*#__PURE__*/React.createElement("select", {
           className: "p-datepicker-month",
           onChange: function onChange(e) {
-            return _this17.onMonthDropdownChange(e, e.target.value);
+            return _this18.onMonthDropdownChange(e, e.target.value);
           },
           value: viewMonth
         }, displayedMonthOptions.map(function (option) {
@@ -2929,7 +2946,7 @@ var Calendar = /*#__PURE__*/function (_Component) {
   }, {
     key: "renderTitleYearElement",
     value: function renderTitleYearElement(year) {
-      var _this18 = this;
+      var _this19 = this;
 
       if (this.props.yearNavigator) {
         var yearOptions = [];
@@ -2944,12 +2961,12 @@ var Calendar = /*#__PURE__*/function (_Component) {
         var viewDate = this.getViewDate();
         var viewYear = viewDate.getFullYear();
         var displayedYearNames = yearOptions.filter(function (year) {
-          return !(_this18.props.minDate && _this18.props.minDate.getFullYear() > year) && !(_this18.props.maxDate && _this18.props.maxDate.getFullYear() < year);
+          return !(_this19.props.minDate && _this19.props.minDate.getFullYear() > year) && !(_this19.props.maxDate && _this19.props.maxDate.getFullYear() < year);
         });
         var content = /*#__PURE__*/React.createElement("select", {
           className: "p-datepicker-year",
           onChange: function onChange(e) {
-            return _this18.onYearDropdownChange(e, e.target.value);
+            return _this19.onYearDropdownChange(e, e.target.value);
           },
           value: viewYear
         }, displayedYearNames.map(function (year) {
@@ -3019,26 +3036,26 @@ var Calendar = /*#__PURE__*/function (_Component) {
   }, {
     key: "renderDateCellContent",
     value: function renderDateCellContent(date, className, groupIndex) {
-      var _this19 = this;
+      var _this20 = this;
 
       var content = this.props.dateTemplate ? this.props.dateTemplate(date) : date.day;
       return /*#__PURE__*/React.createElement("span", {
         className: className,
         onClick: function onClick(e) {
-          return _this19.onDateSelect(e, date);
+          return _this20.onDateSelect(e, date);
         },
         onKeyDown: function onKeyDown(e) {
-          return _this19.onDateCellKeydown(e, date, groupIndex);
+          return _this20.onDateCellKeydown(e, date, groupIndex);
         }
       }, content, /*#__PURE__*/React.createElement(Ripple, null));
     }
   }, {
     key: "renderWeek",
     value: function renderWeek(weekDates, weekNumber, groupIndex) {
-      var _this20 = this;
+      var _this21 = this;
 
       var week = weekDates.map(function (date) {
-        var selected = _this20.isSelected(date);
+        var selected = _this21.isSelected(date);
 
         var cellClassName = classNames({
           'p-datepicker-other-month': date.otherMonth,
@@ -3048,7 +3065,7 @@ var Calendar = /*#__PURE__*/function (_Component) {
           'p-highlight': selected,
           'p-disabled': !date.selectable
         });
-        var content = date.otherMonth && !_this20.props.showOtherMonths ? null : _this20.renderDateCellContent(date, dateClassName, groupIndex);
+        var content = date.otherMonth && !_this21.props.showOtherMonths ? null : _this21.renderDateCellContent(date, dateClassName, groupIndex);
         return /*#__PURE__*/React.createElement("td", {
           key: date.day,
           className: cellClassName
@@ -3070,12 +3087,12 @@ var Calendar = /*#__PURE__*/function (_Component) {
   }, {
     key: "renderDates",
     value: function renderDates(monthMetaData, groupIndex) {
-      var _this21 = this;
+      var _this22 = this;
 
       return monthMetaData.dates.map(function (weekDates, index) {
         return /*#__PURE__*/React.createElement("tr", {
           key: index
-        }, _this21.renderWeek(weekDates, monthMetaData.weekNumbers[index], groupIndex));
+        }, _this22.renderWeek(weekDates, monthMetaData.weekNumbers[index], groupIndex));
       });
     }
   }, {
@@ -3108,10 +3125,10 @@ var Calendar = /*#__PURE__*/function (_Component) {
   }, {
     key: "renderMonths",
     value: function renderMonths(monthsMetaData) {
-      var _this22 = this;
+      var _this23 = this;
 
       var groups = monthsMetaData.map(function (monthMetaData, index) {
-        return _this22.renderMonth(monthMetaData, index);
+        return _this23.renderMonth(monthMetaData, index);
       });
       return /*#__PURE__*/React.createElement("div", {
         className: "p-datepicker-group-container"
@@ -3128,7 +3145,7 @@ var Calendar = /*#__PURE__*/function (_Component) {
   }, {
     key: "renderMonthViewMonth",
     value: function renderMonthViewMonth(index) {
-      var _this23 = this;
+      var _this24 = this;
 
       var className = classNames('p-monthpicker-month', {
         'p-highlight': this.isMonthSelected(index)
@@ -3139,10 +3156,10 @@ var Calendar = /*#__PURE__*/function (_Component) {
         key: monthName,
         className: className,
         onClick: function onClick(event) {
-          return _this23.onMonthSelect(event, index);
+          return _this24.onMonthSelect(event, index);
         },
         onKeyDown: function onKeyDown(event) {
-          return _this23.onMonthCellKeydown(event, index);
+          return _this24.onMonthCellKeydown(event, index);
         }
       }, monthName, /*#__PURE__*/React.createElement(Ripple, null));
     }
@@ -3192,7 +3209,7 @@ var Calendar = /*#__PURE__*/function (_Component) {
   }, {
     key: "renderHourPicker",
     value: function renderHourPicker() {
-      var _this24 = this;
+      var _this25 = this;
 
       var currentTime = this.getCurrentDateTime();
       var hour = currentTime.getHours();
@@ -3208,12 +3225,12 @@ var Calendar = /*#__PURE__*/function (_Component) {
         type: "button",
         className: "p-link",
         onMouseDown: function onMouseDown(e) {
-          return _this24.onTimePickerElementMouseDown(e, 0, 1);
+          return _this25.onTimePickerElementMouseDown(e, 0, 1);
         },
         onMouseUp: this.onTimePickerElementMouseUp,
         onMouseLeave: this.onTimePickerElementMouseLeave,
         onKeyDown: function onKeyDown(e) {
-          return _this24.onContainerButtonKeydown(e);
+          return _this25.onContainerButtonKeydown(e);
         }
       }, /*#__PURE__*/React.createElement("span", {
         className: "pi pi-chevron-up"
@@ -3221,12 +3238,12 @@ var Calendar = /*#__PURE__*/function (_Component) {
         type: "button",
         className: "p-link",
         onMouseDown: function onMouseDown(e) {
-          return _this24.onTimePickerElementMouseDown(e, 0, -1);
+          return _this25.onTimePickerElementMouseDown(e, 0, -1);
         },
         onMouseUp: this.onTimePickerElementMouseUp,
         onMouseLeave: this.onTimePickerElementMouseLeave,
         onKeyDown: function onKeyDown(e) {
-          return _this24.onContainerButtonKeydown(e);
+          return _this25.onContainerButtonKeydown(e);
         }
       }, /*#__PURE__*/React.createElement("span", {
         className: "pi pi-chevron-down"
@@ -3235,7 +3252,7 @@ var Calendar = /*#__PURE__*/function (_Component) {
   }, {
     key: "renderMinutePicker",
     value: function renderMinutePicker() {
-      var _this25 = this;
+      var _this26 = this;
 
       var currentTime = this.getCurrentDateTime();
       var minute = currentTime.getMinutes();
@@ -3246,12 +3263,12 @@ var Calendar = /*#__PURE__*/function (_Component) {
         type: "button",
         className: "p-link",
         onMouseDown: function onMouseDown(e) {
-          return _this25.onTimePickerElementMouseDown(e, 1, 1);
+          return _this26.onTimePickerElementMouseDown(e, 1, 1);
         },
         onMouseUp: this.onTimePickerElementMouseUp,
         onMouseLeave: this.onTimePickerElementMouseLeave,
         onKeyDown: function onKeyDown(e) {
-          return _this25.onContainerButtonKeydown(e);
+          return _this26.onContainerButtonKeydown(e);
         }
       }, /*#__PURE__*/React.createElement("span", {
         className: "pi pi-chevron-up"
@@ -3259,12 +3276,12 @@ var Calendar = /*#__PURE__*/function (_Component) {
         type: "button",
         className: "p-link",
         onMouseDown: function onMouseDown(e) {
-          return _this25.onTimePickerElementMouseDown(e, 1, -1);
+          return _this26.onTimePickerElementMouseDown(e, 1, -1);
         },
         onMouseUp: this.onTimePickerElementMouseUp,
         onMouseLeave: this.onTimePickerElementMouseLeave,
         onKeyDown: function onKeyDown(e) {
-          return _this25.onContainerButtonKeydown(e);
+          return _this26.onContainerButtonKeydown(e);
         }
       }, /*#__PURE__*/React.createElement("span", {
         className: "pi pi-chevron-down"
@@ -3273,7 +3290,7 @@ var Calendar = /*#__PURE__*/function (_Component) {
   }, {
     key: "renderSecondPicker",
     value: function renderSecondPicker() {
-      var _this26 = this;
+      var _this27 = this;
 
       if (this.props.showSeconds) {
         var currentTime = this.getCurrentDateTime();
@@ -3285,12 +3302,12 @@ var Calendar = /*#__PURE__*/function (_Component) {
           type: "button",
           className: "p-link",
           onMouseDown: function onMouseDown(e) {
-            return _this26.onTimePickerElementMouseDown(e, 2, 1);
+            return _this27.onTimePickerElementMouseDown(e, 2, 1);
           },
           onMouseUp: this.onTimePickerElementMouseUp,
           onMouseLeave: this.onTimePickerElementMouseLeave,
           onKeyDown: function onKeyDown(e) {
-            return _this26.onContainerButtonKeydown(e);
+            return _this27.onContainerButtonKeydown(e);
           }
         }, /*#__PURE__*/React.createElement("span", {
           className: "pi pi-chevron-up"
@@ -3298,12 +3315,12 @@ var Calendar = /*#__PURE__*/function (_Component) {
           type: "button",
           className: "p-link",
           onMouseDown: function onMouseDown(e) {
-            return _this26.onTimePickerElementMouseDown(e, 2, -1);
+            return _this27.onTimePickerElementMouseDown(e, 2, -1);
           },
           onMouseUp: this.onTimePickerElementMouseUp,
           onMouseLeave: this.onTimePickerElementMouseLeave,
           onKeyDown: function onKeyDown(e) {
-            return _this26.onContainerButtonKeydown(e);
+            return _this27.onContainerButtonKeydown(e);
           }
         }, /*#__PURE__*/React.createElement("span", {
           className: "pi pi-chevron-down"
@@ -3315,7 +3332,7 @@ var Calendar = /*#__PURE__*/function (_Component) {
   }, {
     key: "renderMiliSecondPicker",
     value: function renderMiliSecondPicker() {
-      var _this27 = this;
+      var _this28 = this;
 
       if (this.props.showMillisec) {
         var currentTime = this.getCurrentDateTime();
@@ -3327,12 +3344,12 @@ var Calendar = /*#__PURE__*/function (_Component) {
           type: "button",
           className: "p-link",
           onMouseDown: function onMouseDown(e) {
-            return _this27.onTimePickerElementMouseDown(e, 3, 1);
+            return _this28.onTimePickerElementMouseDown(e, 3, 1);
           },
           onMouseUp: this.onTimePickerElementMouseUp,
           onMouseLeave: this.onTimePickerElementMouseLeave,
           onKeyDown: function onKeyDown(e) {
-            return _this27.onContainerButtonKeydown(e);
+            return _this28.onContainerButtonKeydown(e);
           }
         }, /*#__PURE__*/React.createElement("span", {
           className: "pi pi-chevron-up"
@@ -3340,12 +3357,12 @@ var Calendar = /*#__PURE__*/function (_Component) {
           type: "button",
           className: "p-link",
           onMouseDown: function onMouseDown(e) {
-            return _this27.onTimePickerElementMouseDown(e, 3, -1);
+            return _this28.onTimePickerElementMouseDown(e, 3, -1);
           },
           onMouseUp: this.onTimePickerElementMouseUp,
           onMouseLeave: this.onTimePickerElementMouseLeave,
           onKeyDown: function onKeyDown(e) {
-            return _this27.onContainerButtonKeydown(e);
+            return _this28.onContainerButtonKeydown(e);
           }
         }, /*#__PURE__*/React.createElement("span", {
           className: "pi pi-chevron-down"
@@ -3444,7 +3461,7 @@ var Calendar = /*#__PURE__*/function (_Component) {
   }, {
     key: "renderButtonBar",
     value: function renderButtonBar() {
-      var _this28 = this;
+      var _this29 = this;
 
       if (this.props.showButtonBar) {
         var todayClassName = classNames('p-button-text', this.props.todayButtonClassName);
@@ -3461,7 +3478,7 @@ var Calendar = /*#__PURE__*/function (_Component) {
           label: today,
           onClick: this.onTodayButtonClick,
           onKeyDown: function onKeyDown(e) {
-            return _this28.onContainerButtonKeydown(e);
+            return _this29.onContainerButtonKeydown(e);
           },
           className: todayClassName
         }), /*#__PURE__*/React.createElement(Button, {
@@ -3469,7 +3486,7 @@ var Calendar = /*#__PURE__*/function (_Component) {
           label: clear,
           onClick: this.onClearButtonClick,
           onKeyDown: function onKeyDown(e) {
-            return _this28.onContainerButtonKeydown(e);
+            return _this29.onContainerButtonKeydown(e);
           },
           className: clearClassName
         }));
@@ -3492,7 +3509,7 @@ var Calendar = /*#__PURE__*/function (_Component) {
   }, {
     key: "render",
     value: function render() {
-      var _this29 = this;
+      var _this30 = this;
 
       var className = classNames('p-calendar p-component p-inputwrapper', this.props.className, {
         'p-calendar-w-btn': this.props.showIcon,
@@ -3518,7 +3535,7 @@ var Calendar = /*#__PURE__*/function (_Component) {
       var isVisible = this.props.inline || this.isVisible();
       return /*#__PURE__*/React.createElement("span", {
         ref: function ref(el) {
-          return _this29.container = el;
+          return _this30.container = el;
         },
         id: this.props.id,
         className: className,
@@ -3530,6 +3547,7 @@ var Calendar = /*#__PURE__*/function (_Component) {
         appendTo: this.props.appendTo,
         inline: this.props.inline,
         onClick: this.onPanelClick,
+        onMouseUp: this.onPanelMouseUp,
         in: isVisible,
         onEnter: this.onOverlayEnter,
         onEntered: this.onOverlayEntered,