primereact 8.0.0-rc.1 → 8.0.0-rc.2

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() {
@@ -3142,7 +3145,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 +3393,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 +4031,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 +4116,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 +4148,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 +4201,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 +4226,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 +4241,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 +5264,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 +6060,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 +6071,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 +6087,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 +6242,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 +6441,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 +6497,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 +6525,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 +6544,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 +6572,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 +7310,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 +7427,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 +7574,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 +7970,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 +8553,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 +8604,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 +8645,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 +8664,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 +8718,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 +8779,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 +8882,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 +8918,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 +8953,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 +9153,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 +9262,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 +9309,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 +9317,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 +9338,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 +9407,7 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
     tooltipOptions: null,
     ariaLabelledBy: null,
     dateTemplate: null,
+    decadeTemplate: null,
     headerTemplate: null,
     footerTemplate: null,
     monthNavigatorTemplate: null,
@@ -9226,7 +9423,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) {
@@ -10705,13 +10903,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 +10950,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 +10984,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
@@ -12605,7 +12795,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 +12804,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 +13084,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 +13093,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 +13306,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 +13327,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 +13610,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 +14809,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 +15250,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 +15264,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 +15778,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 +17746,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 +19175,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() {
@@ -21436,7 +21629,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 +21949,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 +22852,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 +23317,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 +25176,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 +25193,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 +25795,8 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
           value: getValue()
         });
       }
+
+      updateModel(e);
     };
 
     var onBlur = function onBlur(e) {
@@ -26055,12 +26271,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 +26279,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 +26301,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 +26323,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 +27369,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 +27472,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 +28181,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 +28459,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 +28484,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 +28666,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 +31199,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 +31220,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 +31379,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 +31404,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 +31449,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 +33588,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 +33610,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 +33837,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 +34369,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 +34423,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 +34547,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 +34722,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 +35126,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 +35146,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 +35156,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 +35490,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 +36335,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 +36367,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 +36555,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
@@ -38396,7 +38646,6 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
           updateTreeState();
         }
 
-        scrollInView();
         selfChange.current = false;
       }
     }, [props.value]);