primereact 8.0.0-rc.1 → 8.0.1

package/primereact.all.js

@@ -147,9 +147,6 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
   function _createClass(Constructor, protoProps, staticProps) {
     if (protoProps) _defineProperties(Constructor.prototype, protoProps);
     if (staticProps) _defineProperties(Constructor, staticProps);
-    Object.defineProperty(Constructor, "prototype", {
-      writable: false
-    });
     return Constructor;
   }
 
@@ -256,8 +253,8 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
       medium: 'Medium',
       strong: 'Strong',
       passwordPrompt: 'Enter a password',
-      emptyFilterMessage: 'No results found',
-      emptyMessage: 'No available options'
+      emptyFilterMessage: 'No available options',
+      emptyMessage: 'No results found'
     }
   };
 
@@ -553,11 +550,17 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
   function _typeof(obj) {
     "@babel/helpers - typeof";
 
-    return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) {
-      return typeof obj;
-    } : function (obj) {
-      return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj;
-    }, _typeof(obj);
+    if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") {
+      _typeof = function _typeof(obj) {
+        return typeof obj;
+      };
+    } else {
+      _typeof = function _typeof(obj) {
+        return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj;
+      };
+    }
+
+    return _typeof(obj);
   }
 
   function classNames() {
@@ -3013,6 +3016,57 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
   };
   /* eslint-enable */
 
+  /**
+   * Hook to wrap around useState that stores the value in the browser local/session storage.
+   *
+   * @param {any} initialValue the initial value to store
+   * @param {string} key the key to store the value in local/session storage
+   * @param {string} storage either 'local' or 'session' for what type of storage
+   * @returns a stateful value, and a function to update it.
+   */
+
+  var useStorage = function useStorage(initialValue, key) {
+    var storage = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 'local';
+    // Since the local storage API isn't available in server-rendering environments, 
+    // we check that typeof window !== 'undefined' to make SSR and SSG work properly.
+    var storageAvailable = typeof window !== 'undefined';
+
+    var _React$useState = React__namespace.useState(function () {
+      if (!storageAvailable) {
+        return initialValue;
+      }
+
+      try {
+        var item = storage === 'local' ? window.localStorage.getItem(key) : window.sessionStorage.getItem(key);
+        return item ? JSON.parse(item) : initialValue;
+      } catch (error) {
+        // If error also return initialValue
+        return initialValue;
+      }
+    }),
+        _React$useState2 = _slicedToArray(_React$useState, 2),
+        storedValue = _React$useState2[0],
+        setStoredValue = _React$useState2[1];
+
+    var setValue = function setValue(value) {
+      try {
+        // Allow value to be a function so we have same API as useState
+        var valueToStore = value instanceof Function ? value(storedValue) : value;
+        setStoredValue(valueToStore);
+
+        if (storageAvailable) {
+          var serializedValue = JSON.stringify(valueToStore);
+          storage === 'local' ? window.localStorage.setItem(key, serializedValue) : window.sessionStorage.setItem(key, serializedValue);
+        }
+      } catch (error) {
+        throw new Error("PrimeReact useStorage: Failed to serialize the value at key: ".concat(key));
+      }
+    };
+
+    return [storedValue, setValue];
+  };
+  /* eslint-enable */
+
   /* eslint-disable */
   var useTimeout = function useTimeout(fn) {
     var delay = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;
@@ -3142,7 +3196,7 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
         idState = _React$useState2[0],
         setIdState = _React$useState2[1];
 
-    var _React$useState3 = React__namespace.useState(null),
+    var _React$useState3 = React__namespace.useState(props.activeIndex),
         _React$useState4 = _slicedToArray(_React$useState3, 2),
         activeIndexState = _React$useState4[0],
         setActiveIndexState = _React$useState4[1];
@@ -3390,6 +3444,7 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
       }
     });
     return PrimeReact.ripple ? /*#__PURE__*/React__namespace.createElement("span", {
+      role: "presentation",
       ref: inkRef,
       className: "p-ink",
       onAnimationEnd: onAnimationEnd
@@ -4027,8 +4082,10 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
     var icon = createIcon();
     var label = createLabel();
     var badge = createBadge();
+    var defaultAriaLabel = props.label ? props.label + (props.badge ? ' ' + props.badge : '') : '';
     return /*#__PURE__*/React__namespace.createElement(React__namespace.Fragment, null, /*#__PURE__*/React__namespace.createElement("button", _extends({
-      ref: elementRef
+      ref: elementRef,
+      "aria-label": defaultAriaLabel
     }, otherProps, {
       className: className,
       disabled: disabled
@@ -4110,12 +4167,15 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
     getCharCode: function getCharCode(e) {
       return e.charCode || e.keyCode || e.which;
     },
+    getRegex: function getRegex(keyfilter) {
+      return KeyFilter.DEFAULT_MASKS[keyfilter] ? KeyFilter.DEFAULT_MASKS[keyfilter] : keyfilter;
+    },
     onKeyPress: function onKeyPress(e, keyfilter, validateOnly) {
       if (validateOnly) {
         return;
       }
 
-      var regex = KeyFilter.DEFAULT_MASKS[keyfilter] ? KeyFilter.DEFAULT_MASKS[keyfilter] : keyfilter;
+      var regex = this.getRegex(keyfilter);
       var browser = DomHandler.getBrowser();
 
       if (e.ctrlKey || e.altKey) {
@@ -4139,6 +4199,21 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
         e.preventDefault();
       }
     },
+    onPaste: function onPaste(e, keyfilter, validateOnly) {
+      if (validateOnly) {
+        return;
+      }
+
+      var regex = this.getRegex(keyfilter);
+      var clipboard = e.clipboardData.getData("text"); // loop over each letter pasted and if any fail prevent the paste
+
+      _toConsumableArray(clipboard).forEach(function (c) {
+        if (!regex.test(c)) {
+          e.preventDefault();
+          return false;
+        }
+      });
+    },
     validate: function validate(e, keyfilter) {
       var value = e.target.value,
           validatePattern = true;
@@ -4177,6 +4252,14 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
       }
     };
 
+    var onPaste = function onPaste(event) {
+      props.onPaste && props.onPaste(event);
+
+      if (props.keyfilter) {
+        KeyFilter.onPaste(event, props.keyfilter, props.validateOnly);
+      }
+    };
+
     var isFilled = React__namespace.useMemo(function () {
       return ObjectUtils.isNotEmpty(props.value) || ObjectUtils.isNotEmpty(props.defaultValue) || elementRef.current && ObjectUtils.isNotEmpty(elementRef.current.value);
     }, [props.value, props.defaultValue]);
@@ -4194,7 +4277,8 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
     }, otherProps, {
       className: className,
       onInput: onInput,
-      onKeyPress: onKeyPress
+      onKeyPress: onKeyPress,
+      onPaste: onPaste
     })), hasTooltip && /*#__PURE__*/React__namespace.createElement(Tooltip, _extends({
       target: elementRef,
       content: props.tooltip
@@ -4208,7 +4292,8 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
     tooltip: null,
     tooltipOptions: null,
     onInput: null,
-    onKeyPress: null
+    onKeyPress: null,
+    onPaste: null
   };
 
   var OverlayService = EventBus();
@@ -5230,6 +5315,11 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
     };
 
     var updateModel = function updateModel(event, value) {
+      // #2176 only call change if value actually changed
+      if (selectedItem && selectedItem.current === value) {
+        return;
+      }
+
       if (props.onChange) {
         props.onChange({
           originalEvent: event,
@@ -6021,7 +6111,7 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
       var home = props.home;
 
       if (home) {
-        var icon = home.icon,
+        var _icon = home.icon,
             target = home.target,
             url = home.url,
             disabled = home.disabled,
@@ -6032,7 +6122,11 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
           'p-disabled': disabled
         }, _className);
 
-        var iconClassName = classNames('p-menuitem-icon', icon);
+        var icon = IconUtils.getJSXIcon(_icon, {
+          className: 'p-menuitem-icon'
+        }, {
+          props: props
+        });
         return /*#__PURE__*/React__namespace.createElement("li", {
           className: _className2,
           style: style
@@ -6044,9 +6138,7 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
           onClick: function onClick(event) {
             return itemClick(event, home);
           }
-        }, /*#__PURE__*/React__namespace.createElement("span", {
-          className: iconClassName
-        })));
+        }, icon));
       }
 
       return null;
@@ -6201,8 +6293,30 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
     var overlayEventListener = React__namespace.useRef(null);
     var touchUIMaskClickListener = React__namespace.useRef(null);
     var isOverlayClicked = React__namespace.useRef(false);
+
+    var _React$useState7 = React__namespace.useState('date'),
+        _React$useState8 = _slicedToArray(_React$useState7, 2),
+        currentView = _React$useState8[0],
+        setCurrentView = _React$useState8[1];
+
+    var _React$useState9 = React__namespace.useState(null),
+        _React$useState10 = _slicedToArray(_React$useState9, 2),
+        currentMonth = _React$useState10[0],
+        setCurrentMonth = _React$useState10[1];
+
+    var _React$useState11 = React__namespace.useState(null),
+        _React$useState12 = _slicedToArray(_React$useState11, 2),
+        currentYear = _React$useState12[0],
+        setCurrentYear = _React$useState12[1];
+
+    var _React$useState13 = React__namespace.useState([]),
+        _React$useState14 = _slicedToArray(_React$useState13, 2),
+        yearOptions = _React$useState14[0],
+        setYearOptions = _React$useState14[1];
+
     var previousValue = usePrevious(props.value);
     var visible = props.inline || (props.onVisibleChange ? props.visible : overlayVisibleState);
+    var attributeSelector = UniqueComponentId();
 
     var _useOverlayListener = useOverlayListener({
       target: elementRef,
@@ -6378,7 +6492,7 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
       if (navigation.current) {
         if (navigation.current.button) {
           initFocusableCell();
-          if (navigation.backward) DomHandler.findSingle(overlayRef.current, '.p-datepicker-prev').focus();else DomHandler.findSingle(overlayRef.current, '.p-datepicker-next').focus();
+          if (navigation.current.backward) DomHandler.findSingle(overlayRef.current, '.p-datepicker-prev').focus();else DomHandler.findSingle(overlayRef.current, '.p-datepicker-next').focus();
         } else {
           var cell;
 
@@ -6434,16 +6548,22 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
       var newViewDate = new Date(getViewDate().getTime());
       newViewDate.setDate(1);
 
-      if (props.view === 'date') {
+      if (currentView === 'date') {
         if (newViewDate.getMonth() === 0) {
           newViewDate.setMonth(11);
           newViewDate.setFullYear(newViewDate.getFullYear() - 1);
+          setCurrentMonth(11);
+          decrementYear();
         } else {
           newViewDate.setMonth(newViewDate.getMonth() - 1);
+          setCurrentMonth(function (prevState) {
+            return prevState - 1;
+          });
         }
-      } else if (props.view === 'month') {
-        var currentYear = newViewDate.getFullYear();
-        var newYear = currentYear - 1;
+      } else if (currentView === 'month') {
+        var _currentYear2 = newViewDate.getFullYear();
+
+        var newYear = _currentYear2 - 1;
 
         if (props.yearNavigator) {
           var minYear = parseInt(props.yearRange.split(':')[0], 10);
@@ -6456,6 +6576,12 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
         newViewDate.setFullYear(newYear);
       }
 
+      if (currentView === 'month') {
+        decrementYear();
+      } else if (currentView === 'year') {
+        decrementDecade();
+      }
+
       updateViewDate(event, newViewDate);
       event.preventDefault();
     };
@@ -6469,16 +6595,22 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
       var newViewDate = new Date(getViewDate().getTime());
       newViewDate.setDate(1);
 
-      if (props.view === 'date') {
+      if (currentView === 'date') {
         if (newViewDate.getMonth() === 11) {
           newViewDate.setMonth(0);
           newViewDate.setFullYear(newViewDate.getFullYear() + 1);
+          setCurrentMonth(0);
+          incrementYear();
         } else {
           newViewDate.setMonth(newViewDate.getMonth() + 1);
+          setCurrentMonth(function (prevState) {
+            return prevState + 1;
+          });
         }
-      } else if (props.view === 'month') {
-        var currentYear = newViewDate.getFullYear();
-        var newYear = currentYear + 1;
+      } else if (currentView === 'month') {
+        var _currentYear3 = newViewDate.getFullYear();
+
+        var newYear = _currentYear3 + 1;
 
         if (props.yearNavigator) {
           var maxYear = parseInt(props.yearRange.split(':')[1], 10);
@@ -6491,10 +6623,48 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
         newViewDate.setFullYear(newYear);
       }
 
+      if (currentView === 'month') {
+        incrementYear();
+      } else if (currentView === 'year') {
+        incrementDecade();
+      }
+
       updateViewDate(event, newViewDate);
       event.preventDefault();
     };
 
+    var populateYearOptions = function populateYearOptions(start, end) {
+      var _yearOptions = [];
+
+      for (var i = start; i <= end; i++) {
+        yearOptions.push(i);
+      }
+
+      setYearOptions(_yearOptions);
+    };
+
+    var decrementYear = function decrementYear() {
+      var _currentYear = currentYear - 1;
+
+      setCurrentYear(_currentYear);
+
+      if (props.yearNavigator && _currentYear < yearOptions[0]) {
+        var difference = yearOptions[yearOptions.length - 1] - yearOptions[0];
+        populateYearOptions(yearOptions[0] - difference, yearOptions[yearOptions.length - 1] - difference);
+      }
+    };
+
+    var incrementYear = function incrementYear() {
+      var _currentYear = currentYear + 1;
+
+      setCurrentYear(_currentYear);
+
+      if (props.yearNavigator && _currentYear.current > yearOptions[yearOptions.length - 1]) {
+        var difference = yearOptions[yearOptions.length - 1] - yearOptions[0];
+        populateYearOptions(yearOptions[0] + difference, yearOptions[yearOptions.length - 1] + difference);
+      }
+    };
+
     var onMonthDropdownChange = function onMonthDropdownChange(event, value) {
       var currentViewDate = getViewDate();
       var newViewDate = new Date(currentViewDate.getTime());
@@ -7191,84 +7361,6 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
       }
     };
 
-    var onMonthCellKeydown = function onMonthCellKeydown(event, index) {
-      var cell = event.currentTarget;
-
-      switch (event.which) {
-        //arrows
-        case 38:
-        case 40:
-          {
-            cell.tabIndex = '-1';
-            var cells = cell.parentElement.children;
-            var cellIndex = DomHandler.index(cell);
-            var nextCell = cells[event.which === 40 ? cellIndex + 3 : cellIndex - 3];
-
-            if (nextCell) {
-              nextCell.tabIndex = '0';
-              nextCell.focus();
-            }
-
-            event.preventDefault();
-            break;
-          }
-        //left arrow
-
-        case 37:
-          {
-            cell.tabIndex = '-1';
-            var prevCell = cell.previousElementSibling;
-
-            if (prevCell) {
-              prevCell.tabIndex = '0';
-              prevCell.focus();
-            }
-
-            event.preventDefault();
-            break;
-          }
-        //right arrow
-
-        case 39:
-          {
-            cell.tabIndex = '-1';
-            var _nextCell = cell.nextElementSibling;
-
-            if (_nextCell) {
-              _nextCell.tabIndex = '0';
-
-              _nextCell.focus();
-            }
-
-            event.preventDefault();
-            break;
-          }
-        //enter
-
-        case 13:
-          {
-            onMonthSelect(event, index);
-            event.preventDefault();
-            break;
-          }
-        //escape
-
-        case 27:
-          {
-            hide(null, reFocusInputField);
-            event.preventDefault();
-            break;
-          }
-        //tab
-
-        case 9:
-          {
-            trapFocus(event);
-            break;
-          }
-      }
-    };
-
     var onDateSelect = function onDateSelect(event, dateMeta, timeMeta) {
       if (props.disabled || !dateMeta.selectable) {
         event.preventDefault();
@@ -7386,16 +7478,70 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
       updateInputfield(selectedValues);
     };
 
-    var onMonthSelect = function onMonthSelect(event, month) {
-      onDateSelect(event, {
-        year: getViewDate().getFullYear(),
-        month: month,
-        day: 1,
-        selectable: true
+    var decrementDecade = function decrementDecade() {
+      setCurrentYear(function (prevState) {
+        return prevState - 10;
+      });
+    };
+
+    var incrementDecade = function incrementDecade() {
+      setCurrentYear(function (prevState) {
+        return prevState + 10;
       });
+    };
+
+    var switchToMonthView = function switchToMonthView(event) {
+      setCurrentView('month');
+      event.preventDefault();
+    };
+
+    var switchToYearView = function switchToYearView(event) {
+      setCurrentView('year');
       event.preventDefault();
     };
 
+    var onMonthSelect = function onMonthSelect(event, month) {
+      if (props.view === 'month') {
+        onDateSelect(event, {
+          year: currentYear,
+          month: month,
+          day: 1,
+          selectable: true
+        });
+        event.preventDefault();
+      } else {
+        setCurrentMonth(month);
+        createMonthsMeta(month, currentYear);
+        var currentDate = new Date(getCurrentDateTime().getTime());
+        currentDate.setMonth(month);
+        currentDate.setYear(currentYear);
+        setViewDateState(currentDate);
+        setCurrentView('date');
+        props.onMonthChange && props.onMonthChange({
+          month: month + 1,
+          year: currentYear
+        });
+      }
+    };
+
+    var onYearSelect = function onYearSelect(event, year) {
+      if (props.view === 'year') {
+        onDateSelect(event, {
+          year: year,
+          month: 0,
+          day: 1,
+          selectable: true
+        });
+      } else {
+        setCurrentYear(year);
+        setCurrentView('month');
+        props.onMonthChange && props.onMonthChange({
+          month: currentMonth + 1,
+          year: year
+        });
+      }
+    };
+
     var updateModel = function updateModel(event, value) {
       if (props.onChange) {
         var newValue = value && value instanceof Date ? new Date(value.getTime()) : value;
@@ -7479,11 +7625,28 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
       props.onHide && props.onHide();
     };
 
+    var appendDisabled = function appendDisabled() {
+      return props.appendTo === 'self' || props.inline;
+    };
+
     var alignOverlay = function alignOverlay() {
       if (props.touchUI) {
         enableModality();
-      } else {
-        DomHandler.alignOverlay(overlayRef.current, inputRef.current.parentElement, props.appendTo || PrimeReact.appendTo);
+      } else if (overlayRef && overlayRef.current && inputRef && inputRef.current) {
+        DomHandler.alignOverlay(overlayRef.current, inputRef.current, props.appendTo || PrimeReact.appendTo);
+
+        if (appendDisabled()) {
+          DomHandler.relativePosition(overlayRef.current, inputRef.current);
+        } else {
+          if (currentView === 'date') {
+            overlayRef.current.style.width = DomHandler.getOuterWidth(overlayRef.current) + 'px';
+            overlayRef.current.style.minWidth = DomHandler.getOuterWidth(inputRef.current) + 'px';
+          } else {
+            overlayRef.current.style.width = DomHandler.getOuterWidth(inputRef.current) + 'px';
+          }
+
+          DomHandler.absolutePosition(overlayRef.current, inputRef.current);
+        }
       }
     };
 
@@ -7858,9 +8021,30 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
       }
     };
 
+    var isComparable = function isComparable() {
+      return props.value != null && typeof props.value !== 'string';
+    };
+
     var isMonthSelected = function isMonthSelected(month) {
-      var viewDate = getViewDate();
-      if (props.value && props.value instanceof Date) return props.value.getDate() === 1 && props.value.getMonth() === month && props.value.getFullYear() === viewDate.getFullYear();else return false;
+      if (isComparable()) {
+        var value = isRangeSelection() ? props.value[0] : props.value;
+        return !isMultipleSelection() ? value.getMonth() === month && value.getFullYear() === currentYear : false;
+      }
+
+      return false;
+    };
+
+    var isYearSelected = function isYearSelected(year) {
+      if (isComparable()) {
+        var value = isRangeSelection() ? props.value[0] : props.value;
+        return !isMultipleSelection() && isComparable() ? value.getFullYear() === year : false;
+      }
+
+      return false;
+    };
+
+    var switchViewButtonDisabled = function switchViewButtonDisabled() {
+      return props.numberOfMonths > 1 || props.disabled;
     };
 
     var isDateEquals = function isDateEquals(value, dateMeta) {
@@ -8420,9 +8604,20 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
       var viewDate = getViewDate(props.viewDate);
       validateDate(viewDate);
       setViewDateState(viewDate);
+      setCurrentMonth(viewDate.getMonth());
+      setCurrentYear(viewDate.getFullYear());
+      setCurrentView(props.view);
 
       if (props.inline) {
-        initFocusableCell();
+        overlayRef && overlayRef.current.setAttribute(attributeSelector, '');
+
+        if (!props.disabled) {
+          initFocusableCell();
+
+          if (props.numberOfMonths === 1) {
+            overlayRef.current.style.width = DomHandler.getOuterWidth(overlayRef.current) + 'px';
+          }
+        }
       } else if (props.mask) {
         mask(inputRef.current, {
           mask: props.mask,
@@ -8460,7 +8655,7 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
       }
     }, [props.onViewDateChange, props.value]);
     useUpdateEffect(function () {
-      if (previousValue !== props.value && (!viewStateChanged.current || !visible)) {
+      if (previousValue !== props.value && (!viewStateChanged || !visible)) {
         updateInputfield(props.value);
       }
     }, [props.value, visible]);
@@ -8501,7 +8696,7 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
       };
       return /*#__PURE__*/React__namespace.createElement("button", _extends({
         type: "button",
-        className: "p-datepicker-prev p-link"
+        className: "p-datepicker-prev"
       }, navigatorProps), /*#__PURE__*/React__namespace.createElement("span", {
         className: "p-datepicker-prev-icon pi pi-chevron-left"
       }), /*#__PURE__*/React__namespace.createElement(Ripple, null));
@@ -8520,13 +8715,13 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
       };
       return /*#__PURE__*/React__namespace.createElement("button", _extends({
         type: "button",
-        className: "p-datepicker-next p-link"
+        className: "p-datepicker-next"
       }, navigatorProps), /*#__PURE__*/React__namespace.createElement("span", {
         className: "p-datepicker-next-icon pi pi-chevron-right"
       }), /*#__PURE__*/React__namespace.createElement(Ripple, null));
     };
 
-    var createTitleMonthElement = function createTitleMonthElement(month) {
+    var createTitleMonthElement = function createTitleMonthElement() {
       var monthNames = localeOption('monthNames', props.locale);
 
       if (props.monthNavigator && props.view !== 'month') {
@@ -8574,25 +8769,28 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
         return _content;
       }
 
-      return /*#__PURE__*/React__namespace.createElement("span", {
-        className: "p-datepicker-month"
-      }, monthNames[month]);
+      return currentView === 'date' && /*#__PURE__*/React__namespace.createElement("button", {
+        className: "p-datepicker-month p-link",
+        onClick: switchToMonthView,
+        disabled: switchViewButtonDisabled()
+      }, monthNames[currentMonth]);
     };
 
-    var createTitleYearElement = function createTitleYearElement(year) {
+    var createTitleYearElement = function createTitleYearElement() {
       if (props.yearNavigator) {
-        var yearOptions = [];
+        var _yearOptions2 = [];
         var years = props.yearRange.split(':');
         var yearStart = parseInt(years[0], 10);
         var yearEnd = parseInt(years[1], 10);
 
         for (var i = yearStart; i <= yearEnd; i++) {
-          yearOptions.push(i);
+          _yearOptions2.push(i);
         }
 
         var viewDate = getViewDate();
         var viewYear = viewDate.getFullYear();
-        var displayedYearNames = yearOptions.filter(function (year) {
+
+        var displayedYearNames = _yearOptions2.filter(function (year) {
           return !(props.minDate && props.minDate.getFullYear() > year) && !(props.maxDate && props.maxDate.getFullYear() < year);
         });
 
@@ -8632,17 +8830,32 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
         return _content2;
       }
 
-      return /*#__PURE__*/React__namespace.createElement("span", {
-        className: "p-datepicker-year"
-      }, year);
+      return currentView !== 'year' && /*#__PURE__*/React__namespace.createElement("button", {
+        className: "p-datepicker-year p-link",
+        onClick: switchToYearView,
+        disabled: switchViewButtonDisabled()
+      }, currentYear);
+    };
+
+    var createTitleDecadeElement = function createTitleDecadeElement() {
+      var years = yearPickerValues();
+
+      if (currentView === 'year') {
+        return /*#__PURE__*/React__namespace.createElement("span", {
+          className: "p-datepicker-decade"
+        }, props.decadeTemplate ? props.decadeTemplate(years) : /*#__PURE__*/React__namespace.createElement("span", null, "".concat(yearPickerValues()[0], " - ").concat(yearPickerValues()[yearPickerValues().length - 1])));
+      }
+
+      return null;
     };
 
     var createTitle = function createTitle(monthMetaData) {
       var month = createTitleMonthElement(monthMetaData.month);
       var year = createTitleYearElement(monthMetaData.year);
+      var decade = createTitleDecadeElement();
       return /*#__PURE__*/React__namespace.createElement("div", {
         className: "p-datepicker-title"
-      }, month, year);
+      }, month, year, decade);
     };
 
     var createDayNames = function createDayNames(weekDays) {
@@ -8720,7 +8933,7 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
     var createDateViewGrid = function createDateViewGrid(monthMetaData, weekDays, groupIndex) {
       var dayNames = createDayNames(weekDays);
       var dates = createDates(monthMetaData, groupIndex);
-      return /*#__PURE__*/React__namespace.createElement("div", {
+      return currentView === 'date' && /*#__PURE__*/React__namespace.createElement("div", {
         className: "p-datepicker-calendar-container"
       }, /*#__PURE__*/React__namespace.createElement("table", {
         className: "p-datepicker-calendar"
@@ -8756,39 +8969,33 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
       return months;
     };
 
-    var createMonthViewMonth = function createMonthViewMonth(index) {
-      var className = classNames('p-monthpicker-month', {
-        'p-highlight': isMonthSelected(index)
-      });
+    var monthPickerValues = function monthPickerValues() {
+      var monthPickerValues = [];
       var monthNamesShort = localeOption('monthNamesShort', props.locale);
-      var monthName = monthNamesShort[index];
-      return /*#__PURE__*/React__namespace.createElement("span", {
-        key: monthName,
-        className: className,
-        onClick: function onClick(event) {
-          return onMonthSelect(event, index);
-        },
-        onKeyDown: function onKeyDown(event) {
-          return onMonthCellKeydown(event, index);
-        }
-      }, monthName, /*#__PURE__*/React__namespace.createElement(Ripple, null));
+
+      for (var i = 0; i <= 11; i++) {
+        monthPickerValues.push(monthNamesShort[i]);
+      }
+
+      return monthPickerValues;
     };
 
-    var createMonthViewMonths = function createMonthViewMonths() {
-      var months = [];
+    var yearPickerValues = function yearPickerValues() {
+      var yearPickerValues = [];
+      var base = currentYear - currentYear % 10;
 
-      for (var i = 0; i <= 11; i++) {
-        months.push(createMonthViewMonth(i));
+      for (var i = 0; i < 10; i++) {
+        yearPickerValues.push(base + i);
       }
 
-      return months;
+      return yearPickerValues;
     };
 
-    var createMonthView = function createMonthView() {
+    var createMonthYearView = function createMonthYearView() {
       var backwardNavigator = createBackwardNavigator(true);
       var forwardNavigator = createForwardNavigator(true);
       var yearElement = createTitleYearElement(getViewDate().getFullYear());
-      var months = createMonthViewMonths();
+      var decade = createTitleDecadeElement();
       return /*#__PURE__*/React__namespace.createElement(React__namespace.Fragment, null, /*#__PURE__*/React__namespace.createElement("div", {
         className: "p-datepicker-group-container"
       }, /*#__PURE__*/React__namespace.createElement("div", {
@@ -8797,17 +9004,15 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
         className: "p-datepicker-header"
       }, backwardNavigator, /*#__PURE__*/React__namespace.createElement("div", {
         className: "p-datepicker-title"
-      }, yearElement), forwardNavigator))), /*#__PURE__*/React__namespace.createElement("div", {
-        className: "p-monthpicker"
-      }, months));
+      }, yearElement, decade), forwardNavigator))));
     };
 
     var createDatePicker = function createDatePicker() {
       if (!props.timeOnly) {
         if (props.view === 'date') {
           return createDateView();
-        } else if (props.view === 'month') {
-          return createMonthView();
+        } else {
+          return createMonthYearView();
         }
       }
 
@@ -8999,7 +9204,7 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
     };
 
     var createTimePicker = function createTimePicker() {
-      if (props.showTime || props.timeOnly) {
+      if ((props.showTime || props.timeOnly) && currentView === 'date') {
         return /*#__PURE__*/React__namespace.createElement("div", {
           className: "p-timepicker"
         }, createHourPicker(), createSeparator(':'), createMinutePicker(), props.showSeconds && createSeparator(':'), createSecondPicker(), props.showMillisec && createSeparator('.'), createMiliSecondPicker(), props.hourFormat === '12' && createSeparator(':'), createAmPmPicker());
@@ -9108,6 +9313,46 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
       return null;
     };
 
+    var createMonthPicker = function createMonthPicker() {
+      if (currentView === 'month') {
+        return /*#__PURE__*/React__namespace.createElement("div", {
+          className: "p-monthpicker"
+        }, monthPickerValues().map(function (m, i) {
+          return /*#__PURE__*/React__namespace.createElement("span", {
+            onClick: function onClick(event) {
+              return onMonthSelect(event, i);
+            },
+            key: "month".concat(i + 1),
+            className: classNames('p-monthpicker-month', {
+              'p-highlight': isMonthSelected(i)
+            })
+          }, m);
+        }));
+      }
+
+      return null;
+    };
+
+    var createYearPicker = function createYearPicker() {
+      if (currentView === 'year') {
+        return /*#__PURE__*/React__namespace.createElement("div", {
+          className: "p-yearpicker"
+        }, yearPickerValues().map(function (y, i) {
+          return /*#__PURE__*/React__namespace.createElement("span", {
+            onClick: function onClick(event) {
+              return onYearSelect(event, y);
+            },
+            key: "year".concat(i + 1),
+            className: classNames('p-yearpicker-year', {
+              'p-highlight': isYearSelected(y)
+            })
+          }, y);
+        }));
+      }
+
+      return null;
+    };
+
     var otherProps = ObjectUtils.findDiffKeys(props, Calendar.defaultProps);
     var className = classNames('p-calendar p-component p-inputwrapper', props.className, (_classNames = {}, _defineProperty(_classNames, "p-calendar-w-btn p-calendar-w-btn-".concat(props.iconPos), props.showIcon), _defineProperty(_classNames, 'p-calendar-disabled', props.disabled), _defineProperty(_classNames, 'p-calendar-timeonly', props.timeOnly), _defineProperty(_classNames, 'p-inputwrapper-filled', props.value || DomHandler.hasClass(inputRef.current, 'p-filled') && inputRef.current.value !== ''), _defineProperty(_classNames, 'p-inputwrapper-focus', focusedState), _classNames));
     var panelClassName = classNames('p-datepicker p-component', props.panelClassName, {
@@ -9115,7 +9360,7 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
       'p-disabled': props.disabled,
       'p-datepicker-timeonly': props.timeOnly,
       'p-datepicker-multiple-month': props.numberOfMonths > 1,
-      'p-datepicker-monthpicker': props.view === 'month',
+      'p-datepicker-monthpicker': currentView === 'month',
       'p-datepicker-touch-ui': props.touchUI
     });
     var content = createContent();
@@ -9123,6 +9368,8 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
     var timePicker = createTimePicker();
     var buttonBar = createButtonBar();
     var footer = createFooter();
+    var monthPicker = createMonthPicker();
+    var yearPicker = createYearPicker();
     return /*#__PURE__*/React__namespace.createElement("span", _extends({
       ref: elementRef,
       id: props.id,
@@ -9142,7 +9389,7 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
       onExit: onOverlayExit,
       onExited: onOverlayExited,
       transitionOptions: props.transitionOptions
-    }, datePicker, timePicker, buttonBar, footer));
+    }, datePicker, timePicker, buttonBar, footer, monthPicker, yearPicker));
   }));
   Calendar.displayName = 'Calendar';
   Calendar.defaultProps = {
@@ -9211,6 +9458,7 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
     tooltipOptions: null,
     ariaLabelledBy: null,
     dateTemplate: null,
+    decadeTemplate: null,
     headerTemplate: null,
     footerTemplate: null,
     monthNavigatorTemplate: null,
@@ -9226,7 +9474,8 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
     onTodayButtonClick: null,
     onClearButtonClick: null,
     onShow: null,
-    onHide: null
+    onHide: null,
+    onMonthChange: null
   };
 
   var Captcha = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__namespace.forwardRef(function (props, ref) {
@@ -9427,7 +9676,6 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
     var itemsContainerRef = React__namespace.useRef(null);
     var remainingItems = React__namespace.useRef(0);
     var allowAutoplay = React__namespace.useRef(!!props.autoplayInterval);
-    var circular = React__namespace.useRef(props.circular || !!props.autoplayInterval);
     var attributeSelector = React__namespace.useRef('');
     var swipeThreshold = React__namespace.useRef(20);
     var startPos = React__namespace.useRef(null);
@@ -9440,6 +9688,7 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
     var prevValue = usePrevious(props.value);
     var prevPage = usePrevious(props.page);
     var isVertical = props.orientation === 'vertical';
+    var circular = props.circular || !!props.autoplayInterval;
     var isCircular = circular && props.value.length >= numVisibleState;
     var isAutoplay = props.autoplayInterval && allowAutoplay.current;
     var currentPage = props.onPageChange ? props.page : pageState;
@@ -9482,7 +9731,7 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
         page = 0;
       } else if (isCircular && pageState === 0 && dir === 1) {
         totalShiftedItems = 0;
-        page = totalShiftedItems - 1;
+        page = totalIndicators - 1;
       } else if (page === totalIndicators - 1 && remainingItems.current > 0) {
         totalShiftedItems += remainingItems.current * -1 - numScrollState * dir;
         isRemainingItemsAdded.current = true;
@@ -9695,7 +9944,7 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
         remainingItems.current = (props.value.length - numVisibleState) % numScrollState;
         var page = currentPage;
 
-        if (totalIndicators !== 0 && pageState >= totalIndicators) {
+        if (totalIndicators !== 0 && page >= totalIndicators) {
           page = totalIndicators - 1;
 
           if (props.onPageChange) {
@@ -9908,7 +10157,7 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
 
     var createIndicator = function createIndicator(index) {
       var isActive = currentPage === index;
-      var key = 'p-carousel-indicator-' + index;
+      var key = 'carousel-indicator-' + index;
       var className = classNames('p-carousel-indicator', {
         'p-highlight': isActive
       });
@@ -10705,13 +10954,6 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
       setFocusedState(false);
     };
 
-    var onKeyDown = function onKeyDown(event) {
-      if (event.key === 'Enter') {
-        onClick(event);
-        event.preventDefault();
-      }
-    };
-
     var isChecked = function isChecked() {
       return props.checked === props.trueValue;
     };
@@ -10759,17 +11001,15 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
       name: props.name,
       tabIndex: props.tabIndex,
       defaultChecked: checked,
-      "aria-labelledby": props.ariaLabelledBy,
-      onKeyDown: onKeyDown,
+      "aria-labelledby": props['aria-labelledby'],
+      "aria-label": props['aria-label'],
       onFocus: onFocus,
       onBlur: onBlur,
       disabled: props.disabled,
       readOnly: props.readOnly,
       required: props.required
     })), /*#__PURE__*/React__namespace.createElement("div", {
-      className: boxClass,
-      role: "checkbox",
-      "aria-checked": checked
+      className: boxClass
     }, icon)), hasTooltip && /*#__PURE__*/React__namespace.createElement(Tooltip, _extends({
       target: elementRef,
       content: props.tooltip
@@ -10795,7 +11035,8 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
     icon: 'pi pi-check',
     tooltip: null,
     tooltipOptions: null,
-    ariaLabelledBy: null,
+    'aria-label': null,
+    'aria-labelledby': null,
     onChange: null,
     onMouseDown: null,
     onContextMenu: null
@@ -10943,14 +11184,18 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
         var values = props.value ? _toConsumableArray(props.value) : [];
 
         if (props.allowDuplicate || values.indexOf(item) === -1) {
-          values.push(item);
+          var allowAddition = true;
 
           if (props.onAdd) {
-            props.onAdd({
+            allowAddition = props.onAdd({
               originalEvent: event,
               value: item
             });
           }
+
+          if (allowAddition !== false) {
+            values.push(item);
+          }
         }
 
         updateInput(event, values, preventDefault);
@@ -12605,7 +12850,7 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
     };
 
     React__namespace.useEffect(function () {
-      props.visible ? show() : hide();
+      props.visible ? show() : hide(); // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [props.visible]);
     React__namespace.useEffect(function () {
       if (!props.target && !props.message) {
@@ -12614,7 +12859,7 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
 
       return function () {
         OverlayService.off('confirm-dialog', confirm);
-      };
+      }; // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [props.target]);
     useUpdateEffect(function () {
       reshowState && show();
@@ -12894,7 +13139,7 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
     };
 
     React__namespace.useEffect(function () {
-      props.visible ? show() : hide();
+      props.visible ? show() : hide(); // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [props.visible]);
     React__namespace.useEffect(function () {
       if (!props.target && !props.message) {
@@ -12903,7 +13148,7 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
 
       return function () {
         OverlayService.off('confirm-popup', confirm);
-      };
+      }; // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [props.target]);
     useUpdateEffect(function () {
       reshowState && show();
@@ -13116,6 +13361,7 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
     var createSubmenu = function createSubmenu(item) {
       if (item.items) {
         return /*#__PURE__*/React__namespace.createElement(ContextMenuSub, {
+          menuProps: props.menuProps,
           model: item.items,
           resetMenu: item !== activeItemState,
           onLeafClick: props.onLeafClick
@@ -13136,8 +13382,10 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
       });
       var iconClassName = classNames('p-menuitem-icon', item.icon);
       var submenuIconClassName = 'p-submenu-icon pi pi-angle-right';
-      var icon = item.icon && /*#__PURE__*/React__namespace.createElement("span", {
-        className: iconClassName
+      var icon = IconUtils.getJSXIcon(item.icon, {
+        className: 'p-menuitem-icon'
+      }, {
+        props: props.menuProps
       });
       var label = item.label && /*#__PURE__*/React__namespace.createElement("span", {
         className: "p-menuitem-text"
@@ -13417,6 +13665,7 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
         onClick: onMenuClick,
         onMouseEnter: onMenuMouseEnter
       }), /*#__PURE__*/React__namespace.createElement(ContextMenuSub, {
+        menuProps: props,
         model: props.model,
         root: true,
         resetMenu: resetMenuState,
@@ -14615,12 +14864,15 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
 
     var onInputBlur = function onInputBlur(event) {
       setFocusedState(false);
-      var currentValue = inputRef.current.value;
 
-      if (isValueChanged(currentValue, props.value)) {
-        var newValue = validateValue(parseValue(currentValue));
-        updateInputValue(newValue);
-        updateModel(event, newValue);
+      if (inputRef.current) {
+        var currentValue = inputRef.current.value;
+
+        if (isValueChanged(currentValue, props.value)) {
+          var newValue = validateValue(parseValue(currentValue));
+          updateInputValue(newValue);
+          updateModel(event, newValue);
+        }
       }
 
       props.onBlur && props.onBlur(event);
@@ -15053,10 +15305,6 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
     template: null
   };
 
-  function _readOnlyError(name) {
-    throw new TypeError("\"" + name + "\" is read-only");
-  }
-
   var DropdownItem = /*#__PURE__*/React__namespace.memo(function (props) {
     var onClick = function onClick(event) {
       if (props.onClick) {
@@ -15071,7 +15319,7 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
       'p-highlight': props.selected,
       'p-disabled': props.disabled,
       'p-dropdown-item-empty': !props.label || props.label.length === 0
-    }, props.option.className);
+    }, props.option && props.option.className);
     var content = props.template ? ObjectUtils.getJSXElement(props.template, props.option) : props.label;
     return /*#__PURE__*/React__namespace.createElement("li", {
       className: className,
@@ -15585,7 +15833,7 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
 
       if (searchValue.current) {
         var searchIndex = getSelectedOptionIndex();
-        var newOption = props.optionGroupLabel ? searchOptionInGroup(searchIndex) : searchOption((_readOnlyError("searchIndex")));
+        var newOption = props.optionGroupLabel ? searchOptionInGroup(searchIndex) : searchOption(searchIndex + 1);
 
         if (newOption) {
           selectItem({
@@ -17553,7 +17801,7 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
           var dataKeyValue = String(ObjectUtils.resolveFieldData(data, dataKey));
           editingRows = props.editingRows ? _objectSpread$l({}, props.editingRows) : {};
 
-          if (!editing) {
+          if (!isEditing) {
             delete editingRows[dataKeyValue]; // if the key value was changed, stop editing for the new key value too
 
             var newDataKeyValue = String(ObjectUtils.resolveFieldData(newData, dataKey));
@@ -18982,7 +19230,7 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
         unbindOverlayListener = _useOverlayListener2[1];
 
     var hasFilter = function hasFilter() {
-      return filterStoreModel && (filterStoreModel.operator ? !isFilterBlank(filterStoreModel.constraints[0].value) : !isFilterBlank(filterStoreModel.value));
+      return filterStoreModel && filterModel && (filterStoreModel.operator ? filterStoreModel.constraints[0].value !== filterModel.constraints[0].value : filterStoreModel.value !== filterModel.value);
     };
 
     var hasRowFilter = function hasRowFilter() {
@@ -20394,6 +20642,8 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
     var wrapperRef = React__namespace.useRef(null);
     var reorderIndicatorUpRef = React__namespace.useRef(null);
     var reorderIndicatorDownRef = React__namespace.useRef(null);
+    var colReorderIconWidth = React__namespace.useRef(null);
+    var colReorderIconHeight = React__namespace.useRef(null);
     var resizeHelperRef = React__namespace.useRef(null);
     var draggedColumnElement = React__namespace.useRef(null);
     var draggedColumn = React__namespace.useRef(null);
@@ -20998,8 +21248,8 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
         return;
       }
 
-      colReorderIconWidth = DomHandler.getHiddenElementOuterWidth(reorderIndicatorUpRef.current);
-      colReorderIconHeight = DomHandler.getHiddenElementOuterHeight(reorderIndicatorUpRef.current);
+      colReorderIconWidth.current = DomHandler.getHiddenElementOuterWidth(reorderIndicatorUpRef.current);
+      colReorderIconHeight.current = DomHandler.getHiddenElementOuterHeight(reorderIndicatorUpRef.current);
       draggedColumn.current = column;
       draggedColumnElement.current = findParentHeader(event.currentTarget);
       event.dataTransfer.setData('text', 'b'); // Firefox requires this to make dragging possible
@@ -21017,16 +21267,16 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
           var dropHeaderOffset = DomHandler.getOffset(dropHeader);
           var targetLeft = dropHeaderOffset.left - containerOffset.left;
           var columnCenter = dropHeaderOffset.left + dropHeader.offsetWidth / 2;
-          reorderIndicatorUpRef.current.style.top = dropHeaderOffset.top - containerOffset.top - (colReorderIconHeight - 1) + 'px';
+          reorderIndicatorUpRef.current.style.top = dropHeaderOffset.top - containerOffset.top - (colReorderIconHeight.current - 1) + 'px';
           reorderIndicatorDownRef.current.style.top = dropHeaderOffset.top - containerOffset.top + dropHeader.offsetHeight + 'px';
 
           if (event.pageX > columnCenter) {
-            reorderIndicatorUpRef.current.style.left = targetLeft + dropHeader.offsetWidth - Math.ceil(colReorderIconWidth / 2) + 'px';
-            reorderIndicatorDownRef.current.style.left = targetLeft + dropHeader.offsetWidth - Math.ceil(colReorderIconWidth / 2) + 'px';
+            reorderIndicatorUpRef.current.style.left = targetLeft + dropHeader.offsetWidth - Math.ceil(colReorderIconWidth.current / 2) + 'px';
+            reorderIndicatorDownRef.current.style.left = targetLeft + dropHeader.offsetWidth - Math.ceil(colReorderIconWidth.current / 2) + 'px';
             dropPosition.current = 1;
           } else {
-            reorderIndicatorUpRef.current.style.left = targetLeft - Math.ceil(colReorderIconWidth / 2) + 'px';
-            reorderIndicatorDownRef.current.style.left = targetLeft - Math.ceil(colReorderIconWidth / 2) + 'px';
+            reorderIndicatorUpRef.current.style.left = targetLeft - Math.ceil(colReorderIconWidth.current / 2) + 'px';
+            reorderIndicatorDownRef.current.style.left = targetLeft - Math.ceil(colReorderIconWidth.current / 2) + 'px';
             dropPosition.current = -1;
           }
 
@@ -21436,7 +21686,7 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
       var filterMatchMode = filterMeta.matchMode === 'custom' ? "custom_".concat(field) : filterMeta.matchMode || FilterMatchMode.STARTS_WITH;
       var dataFieldValue = ObjectUtils.resolveFieldData(rowData, field);
       var filterConstraint = FilterService.filters[filterMatchMode];
-      return filterConstraint(dataFieldValue, filterValue, props.filterLocale, index);
+      return ObjectUtils.isFunction(filterConstraint) && filterConstraint(dataFieldValue, filterValue, props.filterLocale, index);
     };
 
     var cloneFilters = function cloneFilters(filters) {
@@ -21756,7 +22006,7 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
 
       var groupRowSortField = getGroupRowSortField();
       var filters = d_filtersState;
-      var filtersStore = getFilters();
+      var filtersStore = !props.onFilter && props.filters || getFilters();
       var processedData = options.items,
           columns = options.columns;
       return /*#__PURE__*/React__namespace.createElement(TableHeader, {
@@ -22659,9 +22909,11 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
         'p-disabled': disabled
       });
       var iconClassName = classNames('p-dock-action-icon', _icon);
-      var icon = typeof _icon === 'string' ? /*#__PURE__*/React__namespace.createElement("span", {
-        className: iconClassName
-      }) : ObjectUtils.getJSXElement(_icon, props);
+      var icon = IconUtils.getJSXIcon(_icon, {
+        className: 'p-dock-action-icon'
+      }, {
+        props: props
+      });
       var content = /*#__PURE__*/React__namespace.createElement("a", {
         href: url || '#',
         role: "menuitem",
@@ -23122,6 +23374,10 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
     onClick: null
   };
 
+  function _readOnlyError(name) {
+    throw new TypeError("\"" + name + "\" is read-only");
+  }
+
   var UIMessage = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__namespace.forwardRef(function (props, ref) {
     var _props$message = props.message,
         severity = _props$message.severity,
@@ -24977,23 +25233,16 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
       });
     };
 
-    var getMap = function getMap() {
-      return map.current;
-    };
-
-    useMountEffect(function () {
-      initMap();
-    });
-    useUpdateEffect(function () {
-      if (prevOverlays.current) {
-        var _iterator2 = _createForOfIteratorHelper$9(prevOverlays.current),
+    var removeOverlays = function removeOverlays(overlays) {
+      if (overlays) {
+        var _iterator2 = _createForOfIteratorHelper$9(overlays),
             _step2;
 
         try {
           for (_iterator2.s(); !(_step2 = _iterator2.n()).done;) {
             var overlay = _step2.value;
-            google.maps.event.clearInstanceListeners(overlay);
             overlay.setMap(null);
+            unbindOverlayEvents(overlay);
           }
         } catch (err) {
           _iterator2.e(err);
@@ -25001,9 +25250,31 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
           _iterator2.f();
         }
       }
+    };
+
+    var unbindOverlayEvents = function unbindOverlayEvents(overlay) {
+      google.maps.event.clearListeners(overlay, 'click');
+
+      if (overlay.getDraggable()) {
+        google.maps.event.clearListeners(overlay, 'dragstart');
+        google.maps.event.clearListeners(overlay, 'drag');
+        google.maps.event.clearListeners(overlay, 'dragend');
+      }
+    };
 
+    var getMap = function getMap() {
+      return map.current;
+    };
+
+    useMountEffect(function () {
+      initMap();
+    });
+    useUpdateEffect(function () {
       initOverlays(props.overlays);
-    }, [props.overlays]);
+      return function () {
+        removeOverlays(prevOverlays.current);
+      };
+    });
     React__namespace.useImperativeHandle(ref, function () {
       return {
         getMap: getMap
@@ -25581,6 +25852,8 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
           value: getValue()
         });
       }
+
+      updateModel(e);
     };
 
     var onBlur = function onBlur(e) {
@@ -25973,7 +26246,6 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
       onInput: onInput,
       onPaste: handleInputChange,
       required: props.required,
-      "aria-labelledby": props.ariaLabelledBy,
       tooltip: props.tooltip,
       tooltipOptions: props.tooltipOptions
     }));
@@ -26001,7 +26273,6 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
     required: false,
     tooltip: null,
     tooltipOptions: null,
-    ariaLabelledBy: null,
     onComplete: null,
     onChange: null,
     onFocus: null,
@@ -26055,12 +26326,6 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
       props.onBlur && props.onBlur(event);
     };
 
-    var onKeyDown = function onKeyDown(event) {
-      if (event.key === 'Enter') {
-        onClick(event);
-      }
-    };
-
     React__namespace.useEffect(function () {
       ObjectUtils.combinedRefs(inputRef, props.inputRef);
     }, [inputRef, props.inputRef]);
@@ -26069,7 +26334,7 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
     var className = classNames('p-inputswitch p-component', {
       'p-inputswitch-checked': checked,
       'p-disabled': props.disabled,
-      'p-inputswitch-focus': focusedState
+      'p-focus': focusedState
     }, props.className);
     return /*#__PURE__*/React__namespace.createElement(React__namespace.Fragment, null, /*#__PURE__*/React__namespace.createElement("div", _extends({
       ref: elementRef,
@@ -26091,11 +26356,12 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
       onChange: toggle,
       onFocus: onFocus,
       onBlur: onBlur,
-      onKeyDown: onKeyDown,
       disabled: props.disabled,
       role: "switch",
+      tabIndex: props.tabIndex,
       "aria-checked": checked,
-      "aria-labelledby": props.ariaLabelledBy
+      "aria-labelledby": props['aria-labelledby'],
+      "aria-label": props['aria-label']
     })), /*#__PURE__*/React__namespace.createElement("span", {
       className: "p-inputswitch-slider"
     })), hasTooltip && /*#__PURE__*/React__namespace.createElement(Tooltip, _extends({
@@ -26112,13 +26378,15 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
     className: null,
     inputId: null,
     name: null,
+    tabIndex: null,
     checked: false,
     trueValue: true,
     falseValue: false,
     disabled: false,
     tooltip: null,
     tooltipOptions: null,
-    ariaLabelledBy: null,
+    'aria-label': null,
+    'aria-labelledby': null,
     onChange: null,
     onFocus: null,
     onBlur: null
@@ -27156,8 +27424,10 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
           'p-disabled': item.disabled
         });
         var iconClassName = classNames(item.icon, 'p-menuitem-icon');
-        var icon = item.icon && /*#__PURE__*/React__namespace.createElement("span", {
-          className: iconClassName
+        var icon = IconUtils.getJSXIcon(item.icon, {
+          className: 'p-menuitem-icon'
+        }, {
+          props: props
         });
         var label = item.label && /*#__PURE__*/React__namespace.createElement("span", {
           className: "p-menuitem-text"
@@ -27257,9 +27527,10 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
       var linkClassName = classNames('p-menuitem-link', {
         'p-disabled': category.disabled
       });
-      var iconClassName = classNames('p-menuitem-icon', category.icon);
-      var icon = category.icon && /*#__PURE__*/React__namespace.createElement("span", {
-        className: iconClassName
+      var icon = IconUtils.getJSXIcon(category.icon, {
+        className: 'p-menuitem-icon'
+      }, {
+        props: props
       });
       var label = category.label && /*#__PURE__*/React__namespace.createElement("span", {
         className: "p-menuitem-text"
@@ -27965,8 +28236,10 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
         'p-disabled': item.disabled
       });
       var iconClassName = classNames('p-menuitem-icon', item.icon);
-      var icon = item.icon && /*#__PURE__*/React__namespace.createElement("span", {
-        className: iconClassName
+      var icon = IconUtils.getJSXIcon(item.icon, {
+        className: 'p-menuitem-icon'
+      }, {
+        props: props
       });
       var label = item.label && /*#__PURE__*/React__namespace.createElement("span", {
         className: "p-menuitem-text"
@@ -28241,6 +28514,7 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
     var createSubmenu = function createSubmenu(item) {
       if (item.items) {
         return /*#__PURE__*/React__namespace.createElement(MenubarSub, {
+          menuProps: props.menuProps,
           model: item.items,
           mobileActive: props.mobileActive,
           onLeafClick: onLeafClick,
@@ -28265,8 +28539,10 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
         'pi-angle-down': props.root,
         'pi-angle-right': !props.root
       });
-      var icon = item.icon && /*#__PURE__*/React__namespace.createElement("span", {
-        className: iconClassName
+      var icon = IconUtils.getJSXIcon(item.icon, {
+        className: 'p-menuitem-icon'
+      }, {
+        props: props.menuProps
       });
       var label = item.label && /*#__PURE__*/React__namespace.createElement("span", {
         className: "p-menuitem-text"
@@ -28445,6 +28721,7 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
     var menuButton = createMenuButton();
     var submenu = /*#__PURE__*/React__namespace.createElement(MenubarSub, {
       ref: rootMenuRef,
+      menuProps: props,
       model: props.model,
       root: true,
       mobileActive: mobileActiveState,
@@ -30977,6 +31254,7 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
           ref: submenuRef,
           className: className
         }, /*#__PURE__*/React__namespace.createElement(PanelMenuSub, {
+          menuProps: props.menuProps,
           model: item.items,
           multiple: props.multiple
         })));
@@ -30997,8 +31275,10 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
         'pi-angle-right': !active,
         'pi-angle-down': active
       });
-      var icon = item.icon && /*#__PURE__*/React__namespace.createElement("span", {
-        className: iconClassName
+      var icon = IconUtils.getJSXIcon(item.icon, {
+        className: 'p-menuitem-icon'
+      }, {
+        props: props.menuProps
       });
       var label = item.label && /*#__PURE__*/React__namespace.createElement("span", {
         className: "p-menuitem-text"
@@ -31154,12 +31434,14 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
         ' pi-chevron-down': active
       });
       var iconClassName = classNames('p-menuitem-icon', item.icon);
+      var icon = IconUtils.getJSXIcon(item.icon, {
+        className: 'p-menuitem-icon'
+      }, {
+        props: props
+      });
       var submenuIcon = item.items && /*#__PURE__*/React__namespace.createElement("span", {
         className: submenuIconClassName
       });
-      var itemIcon = item.icon && /*#__PURE__*/React__namespace.createElement("span", {
-        className: iconClassName
-      });
       var label = item.label && /*#__PURE__*/React__namespace.createElement("span", {
         className: "p-menuitem-text"
       }, item.label);
@@ -31177,7 +31459,7 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
         id: headerId,
         "aria-controls": contentId,
         "aria-disabled": item.disabled
-      }, submenuIcon, itemIcon, label);
+      }, submenuIcon, icon, label);
 
       if (item.template) {
         var defaultContentOptions = {
@@ -31222,6 +31504,7 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
       }, /*#__PURE__*/React__namespace.createElement("div", {
         className: "p-panelmenu-content"
       }, /*#__PURE__*/React__namespace.createElement(PanelMenuSub, {
+        menuProps: props,
         model: item.items,
         className: "p-panelmenu-root-submenu",
         multiple: props.multiple
@@ -33360,6 +33643,7 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
     var createSubmenu = function createSubmenu(item) {
       if (item.items) {
         return /*#__PURE__*/React__namespace.createElement(SlideMenuSub, {
+          menuProps: props.menuProps,
           model: item.items,
           index: props.index + 1,
           menuWidth: props.menuWidth,
@@ -33381,8 +33665,10 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
       }, item.className);
       var iconClassName = classNames('p-menuitem-icon', item.icon);
       var submenuIconClassName = 'p-submenu-icon pi pi-fw pi-angle-right';
-      var icon = item.icon && /*#__PURE__*/React__namespace.createElement("span", {
-        className: iconClassName
+      var icon = IconUtils.getJSXIcon(item.icon, {
+        className: 'p-menuitem-icon'
+      }, {
+        props: props.menuProps
       });
       var label = item.label && /*#__PURE__*/React__namespace.createElement("span", {
         className: "p-menuitem-text"
@@ -33606,6 +33892,7 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
         className: "p-slidemenu-content",
         ref: slideMenuContent
       }, /*#__PURE__*/React__namespace.createElement(SlideMenuSub, {
+        menuProps: props,
         model: props.model,
         root: true,
         index: 0,
@@ -34137,11 +34424,11 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
         'p-disabled': disabled
       });
       var iconClassName = classNames('p-speeddial-action-icon', _icon);
-
-      var icon = _icon && /*#__PURE__*/React__namespace.createElement("span", {
-        className: iconClassName
+      var icon = IconUtils.getJSXIcon(_icon, {
+        className: 'p-speeddial-action-icon'
+      }, {
+        props: props
       });
-
       var content = /*#__PURE__*/React__namespace.createElement("a", {
         href: url || '#',
         role: "menuitem",
@@ -34191,15 +34478,20 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
     var createButton = function createButton() {
       var _classNames;
 
+      var showIconVisible = !visible && !!props.showIcon || !props.hideIcon;
+      var hideIconVisible = visible && !!props.hideIcon;
       var className = classNames('p-speeddial-button p-button-rounded', {
         'p-speeddial-rotate': props.rotateAnimation && !props.hideIcon
       }, props.buttonClassName);
       var iconClassName = classNames((_classNames = {}, _defineProperty(_classNames, "".concat(props.showIcon), !visible && !!props.showIcon || !props.hideIcon), _defineProperty(_classNames, "".concat(props.hideIcon), visible && !!props.hideIcon), _classNames));
+      var icon = IconUtils.getJSXIcon(showIconVisible ? props.showIcon : hideIconVisible ? props.hideIcon : null, undefined, {
+        props: props
+      });
       var content = /*#__PURE__*/React__namespace.createElement(Button, {
         type: "button",
         style: props.buttonStyle,
         className: className,
-        icon: iconClassName,
+        icon: icon,
         onClick: onClick,
         disabled: props.disabled
       });
@@ -34310,9 +34602,10 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
         'p-disabled': disabled
       });
       var iconClassName = classNames('p-menuitem-icon', _icon);
-
-      var icon = _icon && /*#__PURE__*/React__namespace.createElement("span", {
-        className: iconClassName
+      var icon = IconUtils.getJSXIcon(_icon, {
+        className: 'p-menuitem-icon'
+      }, {
+        props: props.splitButtonProps
       });
 
       var label = _label && /*#__PURE__*/React__namespace.createElement("span", {
@@ -34484,6 +34777,7 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
       if (props.model) {
         return props.model.map(function (menuitem, index) {
           return /*#__PURE__*/React__namespace.createElement(SplitButtonItem, {
+            splitButtonProps: props,
             menuitem: menuitem,
             key: index,
             onItemClick: onItemClick
@@ -34887,6 +35181,12 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
         'p-highlight p-steps-current': active,
         'p-disabled': disabled
       });
+      var iconClassName = classNames('p-menuitem-icon', item.icon);
+      var icon = IconUtils.getJSXIcon(item.icon, {
+        className: 'p-menuitem-icon'
+      }, {
+        props: props
+      });
       var label = item.label && /*#__PURE__*/React__namespace.createElement("span", {
         className: "p-steps-title"
       }, item.label);
@@ -34901,7 +35201,7 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
         tabIndex: tabIndex
       }, /*#__PURE__*/React__namespace.createElement("span", {
         className: "p-steps-number"
-      }, index + 1), label);
+      }, index + 1), icon, label);
 
       if (item.template) {
         var defaultContentOptions = {
@@ -34911,6 +35211,7 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
           className: 'p-menuitem-link',
           labelClassName: 'p-steps-title',
           numberClassName: 'p-steps-number',
+          iconClassName: iconClassName,
           element: content,
           props: props,
           tabIndex: tabIndex,
@@ -35244,9 +35545,10 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
         'p-disabled': disabled
       }, _className);
       var iconClassName = classNames('p-menuitem-icon', _icon);
-
-      var icon = _icon && /*#__PURE__*/React__namespace.createElement("span", {
-        className: iconClassName
+      var icon = IconUtils.getJSXIcon(_icon, {
+        className: 'p-menuitem-icon'
+      }, {
+        props: props
       });
 
       var label = _label && /*#__PURE__*/React__namespace.createElement("span", {
@@ -36088,6 +36390,7 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
     var createSubmenu = function createSubmenu(item) {
       if (item.items) {
         return /*#__PURE__*/React__namespace.createElement(TieredMenuSub, {
+          menuProps: props.menuProps,
           model: item.items,
           onLeafClick: onLeafClick,
           popup: props.popup,
@@ -36119,9 +36422,10 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
       });
       var iconClassName = classNames('p-menuitem-icon', _icon);
       var submenuIconClassName = 'p-submenu-icon pi pi-angle-right';
-
-      var icon = _icon && /*#__PURE__*/React__namespace.createElement("span", {
-        className: iconClassName
+      var icon = IconUtils.getJSXIcon(_icon, {
+        className: 'p-menuitem-icon'
+      }, {
+        props: props.menuProps
       });
 
       var label = _label && /*#__PURE__*/React__namespace.createElement("span", {
@@ -36306,6 +36610,7 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
       }, otherProps, {
         onClick: onPanelClick
       }), /*#__PURE__*/React__namespace.createElement(TieredMenuSub, {
+        menuProps: props,
         model: props.model,
         root: true,
         popup: props.popup
@@ -36628,7 +36933,7 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
     };
 
     var onKeyDown = function onKeyDown(event) {
-      if (event.key === 'Enter') {
+      if (event.keyCode === 32) {
         toggle(event);
         event.preventDefault();
       }
@@ -36670,7 +36975,8 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
       onBlur: props.onBlur,
       onKeyDown: onKeyDown,
       tabIndex: tabIndex,
-      "aria-labelledby": props.ariaLabelledBy
+      role: "button",
+      "aria-pressed": props.checked
     }), iconElement, /*#__PURE__*/React__namespace.createElement("span", {
       className: "p-button-label"
     }, label), /*#__PURE__*/React__namespace.createElement(Ripple, null)), hasTooltip && /*#__PURE__*/React__namespace.createElement(Tooltip, _extends({
@@ -36693,7 +36999,6 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
     tabIndex: 0,
     tooltip: null,
     tooltipOptions: null,
-    ariaLabelledBy: null,
     onChange: null,
     onFocus: null,
     onBlur: null
@@ -38396,7 +38701,6 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
           updateTreeState();
         }
 
-        scrollInView();
         selfChange.current = false;
       }
     }, [props.value]);
@@ -41398,6 +41702,7 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
   exports.useOverlayScrollListener = useOverlayScrollListener;
   exports.usePrevious = usePrevious;
   exports.useResizeListener = useResizeListener;
+  exports.useStorage = useStorage;
   exports.useTimeout = useTimeout;
   exports.useUnmountEffect = useUnmountEffect;
   exports.useUpdateEffect = useUpdateEffect;