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

package/primereact.all.esm.js

@@ -125,9 +125,6 @@ function _defineProperties(target, props) {
 function _createClass(Constructor, protoProps, staticProps) {
   if (protoProps) _defineProperties(Constructor.prototype, protoProps);
   if (staticProps) _defineProperties(Constructor, staticProps);
-  Object.defineProperty(Constructor, "prototype", {
-    writable: false
-  });
   return Constructor;
 }
 
@@ -234,8 +231,8 @@ var locales = {
     medium: 'Medium',
     strong: 'Strong',
     passwordPrompt: 'Enter a password',
-    emptyFilterMessage: 'No results found',
-    emptyMessage: 'No available options'
+    emptyFilterMessage: 'No available options',
+    emptyMessage: 'No results found'
   }
 };
 
@@ -531,11 +528,17 @@ var FilterOperator = Object.freeze({
 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() {
@@ -3120,7 +3123,7 @@ var Accordion = /*#__PURE__*/React.forwardRef(function (props, ref) {
       idState = _React$useState2[0],
       setIdState = _React$useState2[1];
 
-  var _React$useState3 = React.useState(null),
+  var _React$useState3 = React.useState(props.activeIndex),
       _React$useState4 = _slicedToArray(_React$useState3, 2),
       activeIndexState = _React$useState4[0],
       setActiveIndexState = _React$useState4[1];
@@ -3368,6 +3371,7 @@ var Ripple = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function ()
     }
   });
   return PrimeReact.ripple ? /*#__PURE__*/React.createElement("span", {
+    role: "presentation",
     ref: inkRef,
     className: "p-ink",
     onAnimationEnd: onAnimationEnd
@@ -4005,8 +4009,10 @@ var Button = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function (pr
   var icon = createIcon();
   var label = createLabel();
   var badge = createBadge();
+  var defaultAriaLabel = props.label ? props.label + (props.badge ? ' ' + props.badge : '') : '';
   return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("button", _extends({
-    ref: elementRef
+    ref: elementRef,
+    "aria-label": defaultAriaLabel
   }, otherProps, {
     className: className,
     disabled: disabled
@@ -4088,12 +4094,15 @@ var KeyFilter = {
   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) {
@@ -4117,6 +4126,21 @@ var KeyFilter = {
       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;
@@ -4155,6 +4179,14 @@ var InputText = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function
     }
   };
 
+  var onPaste = function onPaste(event) {
+    props.onPaste && props.onPaste(event);
+
+    if (props.keyfilter) {
+      KeyFilter.onPaste(event, props.keyfilter, props.validateOnly);
+    }
+  };
+
   var isFilled = React.useMemo(function () {
     return ObjectUtils.isNotEmpty(props.value) || ObjectUtils.isNotEmpty(props.defaultValue) || elementRef.current && ObjectUtils.isNotEmpty(elementRef.current.value);
   }, [props.value, props.defaultValue]);
@@ -4172,7 +4204,8 @@ var InputText = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function
   }, otherProps, {
     className: className,
     onInput: onInput,
-    onKeyPress: onKeyPress
+    onKeyPress: onKeyPress,
+    onPaste: onPaste
   })), hasTooltip && /*#__PURE__*/React.createElement(Tooltip, _extends({
     target: elementRef,
     content: props.tooltip
@@ -4186,7 +4219,8 @@ InputText.defaultProps = {
   tooltip: null,
   tooltipOptions: null,
   onInput: null,
-  onKeyPress: null
+  onKeyPress: null,
+  onPaste: null
 };
 
 var OverlayService = EventBus();
@@ -5208,6 +5242,11 @@ var AutoComplete = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(functi
   };
 
   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,
@@ -5999,7 +6038,7 @@ var BreadCrumb = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function
     var home = props.home;
 
     if (home) {
-      var icon = home.icon,
+      var _icon = home.icon,
           target = home.target,
           url = home.url,
           disabled = home.disabled,
@@ -6010,7 +6049,11 @@ var BreadCrumb = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function
         '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.createElement("li", {
         className: _className2,
         style: style
@@ -6022,9 +6065,7 @@ var BreadCrumb = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function
         onClick: function onClick(event) {
           return itemClick(event, home);
         }
-      }, /*#__PURE__*/React.createElement("span", {
-        className: iconClassName
-      })));
+      }, icon));
     }
 
     return null;
@@ -6179,8 +6220,30 @@ var Calendar = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function (
   var overlayEventListener = React.useRef(null);
   var touchUIMaskClickListener = React.useRef(null);
   var isOverlayClicked = React.useRef(false);
+
+  var _React$useState7 = React.useState('date'),
+      _React$useState8 = _slicedToArray(_React$useState7, 2),
+      currentView = _React$useState8[0],
+      setCurrentView = _React$useState8[1];
+
+  var _React$useState9 = React.useState(null),
+      _React$useState10 = _slicedToArray(_React$useState9, 2),
+      currentMonth = _React$useState10[0],
+      setCurrentMonth = _React$useState10[1];
+
+  var _React$useState11 = React.useState(null),
+      _React$useState12 = _slicedToArray(_React$useState11, 2),
+      currentYear = _React$useState12[0],
+      setCurrentYear = _React$useState12[1];
+
+  var _React$useState13 = React.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,
@@ -6356,7 +6419,7 @@ var Calendar = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function (
     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;
 
@@ -6412,16 +6475,22 @@ var Calendar = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function (
     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);
@@ -6434,6 +6503,12 @@ var Calendar = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function (
       newViewDate.setFullYear(newYear);
     }
 
+    if (currentView === 'month') {
+      decrementYear();
+    } else if (currentView === 'year') {
+      decrementDecade();
+    }
+
     updateViewDate(event, newViewDate);
     event.preventDefault();
   };
@@ -6447,16 +6522,22 @@ var Calendar = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function (
     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);
@@ -6469,10 +6550,48 @@ var Calendar = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function (
       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());
@@ -7169,84 +7288,6 @@ var Calendar = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function (
     }
   };
 
-  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();
@@ -7364,16 +7405,70 @@ var Calendar = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function (
     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;
@@ -7457,11 +7552,28 @@ var Calendar = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function (
     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);
+      }
     }
   };
 
@@ -7836,9 +7948,30 @@ var Calendar = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function (
     }
   };
 
+  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) {
@@ -8398,9 +8531,20 @@ var Calendar = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function (
     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,
@@ -8438,7 +8582,7 @@ var Calendar = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function (
     }
   }, [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]);
@@ -8479,7 +8623,7 @@ var Calendar = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function (
     };
     return /*#__PURE__*/React.createElement("button", _extends({
       type: "button",
-      className: "p-datepicker-prev p-link"
+      className: "p-datepicker-prev"
     }, navigatorProps), /*#__PURE__*/React.createElement("span", {
       className: "p-datepicker-prev-icon pi pi-chevron-left"
     }), /*#__PURE__*/React.createElement(Ripple, null));
@@ -8498,13 +8642,13 @@ var Calendar = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function (
     };
     return /*#__PURE__*/React.createElement("button", _extends({
       type: "button",
-      className: "p-datepicker-next p-link"
+      className: "p-datepicker-next"
     }, navigatorProps), /*#__PURE__*/React.createElement("span", {
       className: "p-datepicker-next-icon pi pi-chevron-right"
     }), /*#__PURE__*/React.createElement(Ripple, null));
   };
 
-  var createTitleMonthElement = function createTitleMonthElement(month) {
+  var createTitleMonthElement = function createTitleMonthElement() {
     var monthNames = localeOption('monthNames', props.locale);
 
     if (props.monthNavigator && props.view !== 'month') {
@@ -8552,25 +8696,28 @@ var Calendar = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function (
       return _content;
     }
 
-    return /*#__PURE__*/React.createElement("span", {
-      className: "p-datepicker-month"
-    }, monthNames[month]);
+    return currentView === 'date' && /*#__PURE__*/React.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);
       });
 
@@ -8610,17 +8757,32 @@ var Calendar = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function (
       return _content2;
     }
 
-    return /*#__PURE__*/React.createElement("span", {
-      className: "p-datepicker-year"
-    }, year);
+    return currentView !== 'year' && /*#__PURE__*/React.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.createElement("span", {
+        className: "p-datepicker-decade"
+      }, props.decadeTemplate ? props.decadeTemplate(years) : /*#__PURE__*/React.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.createElement("div", {
       className: "p-datepicker-title"
-    }, month, year);
+    }, month, year, decade);
   };
 
   var createDayNames = function createDayNames(weekDays) {
@@ -8698,7 +8860,7 @@ var Calendar = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function (
   var createDateViewGrid = function createDateViewGrid(monthMetaData, weekDays, groupIndex) {
     var dayNames = createDayNames(weekDays);
     var dates = createDates(monthMetaData, groupIndex);
-    return /*#__PURE__*/React.createElement("div", {
+    return currentView === 'date' && /*#__PURE__*/React.createElement("div", {
       className: "p-datepicker-calendar-container"
     }, /*#__PURE__*/React.createElement("table", {
       className: "p-datepicker-calendar"
@@ -8734,39 +8896,33 @@ var Calendar = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function (
     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.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.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.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
       className: "p-datepicker-group-container"
     }, /*#__PURE__*/React.createElement("div", {
@@ -8775,17 +8931,15 @@ var Calendar = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function (
       className: "p-datepicker-header"
     }, backwardNavigator, /*#__PURE__*/React.createElement("div", {
       className: "p-datepicker-title"
-    }, yearElement), forwardNavigator))), /*#__PURE__*/React.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();
       }
     }
 
@@ -8977,7 +9131,7 @@ var Calendar = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function (
   };
 
   var createTimePicker = function createTimePicker() {
-    if (props.showTime || props.timeOnly) {
+    if ((props.showTime || props.timeOnly) && currentView === 'date') {
       return /*#__PURE__*/React.createElement("div", {
         className: "p-timepicker"
       }, createHourPicker(), createSeparator(':'), createMinutePicker(), props.showSeconds && createSeparator(':'), createSecondPicker(), props.showMillisec && createSeparator('.'), createMiliSecondPicker(), props.hourFormat === '12' && createSeparator(':'), createAmPmPicker());
@@ -9086,6 +9240,46 @@ var Calendar = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function (
     return null;
   };
 
+  var createMonthPicker = function createMonthPicker() {
+    if (currentView === 'month') {
+      return /*#__PURE__*/React.createElement("div", {
+        className: "p-monthpicker"
+      }, monthPickerValues().map(function (m, i) {
+        return /*#__PURE__*/React.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.createElement("div", {
+        className: "p-yearpicker"
+      }, yearPickerValues().map(function (y, i) {
+        return /*#__PURE__*/React.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, {
@@ -9093,7 +9287,7 @@ var Calendar = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function (
     '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();
@@ -9101,6 +9295,8 @@ var Calendar = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function (
   var timePicker = createTimePicker();
   var buttonBar = createButtonBar();
   var footer = createFooter();
+  var monthPicker = createMonthPicker();
+  var yearPicker = createYearPicker();
   return /*#__PURE__*/React.createElement("span", _extends({
     ref: elementRef,
     id: props.id,
@@ -9120,7 +9316,7 @@ var Calendar = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function (
     onExit: onOverlayExit,
     onExited: onOverlayExited,
     transitionOptions: props.transitionOptions
-  }, datePicker, timePicker, buttonBar, footer));
+  }, datePicker, timePicker, buttonBar, footer, monthPicker, yearPicker));
 }));
 Calendar.displayName = 'Calendar';
 Calendar.defaultProps = {
@@ -9189,6 +9385,7 @@ Calendar.defaultProps = {
   tooltipOptions: null,
   ariaLabelledBy: null,
   dateTemplate: null,
+  decadeTemplate: null,
   headerTemplate: null,
   footerTemplate: null,
   monthNavigatorTemplate: null,
@@ -9204,7 +9401,8 @@ Calendar.defaultProps = {
   onTodayButtonClick: null,
   onClearButtonClick: null,
   onShow: null,
-  onHide: null
+  onHide: null,
+  onMonthChange: null
 };
 
 var Captcha = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function (props, ref) {
@@ -10683,13 +10881,6 @@ var Checkbox = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function (
     setFocusedState(false);
   };
 
-  var onKeyDown = function onKeyDown(event) {
-    if (event.key === 'Enter') {
-      onClick(event);
-      event.preventDefault();
-    }
-  };
-
   var isChecked = function isChecked() {
     return props.checked === props.trueValue;
   };
@@ -10737,17 +10928,15 @@ var Checkbox = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function (
     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.createElement("div", {
-    className: boxClass,
-    role: "checkbox",
-    "aria-checked": checked
+    className: boxClass
   }, icon)), hasTooltip && /*#__PURE__*/React.createElement(Tooltip, _extends({
     target: elementRef,
     content: props.tooltip
@@ -10773,7 +10962,8 @@ Checkbox.defaultProps = {
   icon: 'pi pi-check',
   tooltip: null,
   tooltipOptions: null,
-  ariaLabelledBy: null,
+  'aria-label': null,
+  'aria-labelledby': null,
   onChange: null,
   onMouseDown: null,
   onContextMenu: null
@@ -12583,7 +12773,7 @@ var ConfirmDialog = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(funct
   };
 
   React.useEffect(function () {
-    props.visible ? show() : hide();
+    props.visible ? show() : hide(); // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [props.visible]);
   React.useEffect(function () {
     if (!props.target && !props.message) {
@@ -12592,7 +12782,7 @@ var ConfirmDialog = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(funct
 
     return function () {
       OverlayService.off('confirm-dialog', confirm);
-    };
+    }; // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [props.target]);
   useUpdateEffect(function () {
     reshowState && show();
@@ -12872,7 +13062,7 @@ var ConfirmPopup = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(functi
   };
 
   React.useEffect(function () {
-    props.visible ? show() : hide();
+    props.visible ? show() : hide(); // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [props.visible]);
   React.useEffect(function () {
     if (!props.target && !props.message) {
@@ -12881,7 +13071,7 @@ var ConfirmPopup = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(functi
 
     return function () {
       OverlayService.off('confirm-popup', confirm);
-    };
+    }; // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [props.target]);
   useUpdateEffect(function () {
     reshowState && show();
@@ -13094,6 +13284,7 @@ var ContextMenuSub = /*#__PURE__*/React.memo(function (props) {
   var createSubmenu = function createSubmenu(item) {
     if (item.items) {
       return /*#__PURE__*/React.createElement(ContextMenuSub, {
+        menuProps: props.menuProps,
         model: item.items,
         resetMenu: item !== activeItemState,
         onLeafClick: props.onLeafClick
@@ -13114,8 +13305,10 @@ var ContextMenuSub = /*#__PURE__*/React.memo(function (props) {
     });
     var iconClassName = classNames('p-menuitem-icon', item.icon);
     var submenuIconClassName = 'p-submenu-icon pi pi-angle-right';
-    var icon = item.icon && /*#__PURE__*/React.createElement("span", {
-      className: iconClassName
+    var icon = IconUtils.getJSXIcon(item.icon, {
+      className: 'p-menuitem-icon'
+    }, {
+      props: props.menuProps
     });
     var label = item.label && /*#__PURE__*/React.createElement("span", {
       className: "p-menuitem-text"
@@ -13395,6 +13588,7 @@ var ContextMenu = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(functio
       onClick: onMenuClick,
       onMouseEnter: onMenuMouseEnter
     }), /*#__PURE__*/React.createElement(ContextMenuSub, {
+      menuProps: props,
       model: props.model,
       root: true,
       resetMenu: resetMenuState,
@@ -14593,12 +14787,15 @@ var InputNumber = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(functio
 
   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);
@@ -15031,10 +15228,6 @@ PrevPageLink.defaultProps = {
   template: null
 };
 
-function _readOnlyError(name) {
-  throw new TypeError("\"" + name + "\" is read-only");
-}
-
 var DropdownItem = /*#__PURE__*/React.memo(function (props) {
   var onClick = function onClick(event) {
     if (props.onClick) {
@@ -15049,7 +15242,7 @@ var DropdownItem = /*#__PURE__*/React.memo(function (props) {
     '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.createElement("li", {
     className: className,
@@ -15563,7 +15756,7 @@ var Dropdown = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function (
 
     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({
@@ -17531,7 +17724,7 @@ var BodyRow = /*#__PURE__*/React.memo(function (props) {
         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));
@@ -18960,7 +19153,7 @@ var ColumnFilter = /*#__PURE__*/React.memo(function (props) {
       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() {
@@ -21414,7 +21607,7 @@ var DataTable = /*#__PURE__*/React.forwardRef(function (props, ref) {
     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) {
@@ -21734,7 +21927,7 @@ var DataTable = /*#__PURE__*/React.forwardRef(function (props, ref) {
 
     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.createElement(TableHeader, {
@@ -22637,9 +22830,11 @@ var Dock = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function (prop
       'p-disabled': disabled
     });
     var iconClassName = classNames('p-dock-action-icon', _icon);
-    var icon = typeof _icon === 'string' ? /*#__PURE__*/React.createElement("span", {
-      className: iconClassName
-    }) : ObjectUtils.getJSXElement(_icon, props);
+    var icon = IconUtils.getJSXIcon(_icon, {
+      className: 'p-dock-action-icon'
+    }, {
+      props: props
+    });
     var content = /*#__PURE__*/React.createElement("a", {
       href: url || '#',
       role: "menuitem",
@@ -23100,6 +23295,10 @@ Fieldset.defaultProps = {
   onClick: null
 };
 
+function _readOnlyError(name) {
+  throw new TypeError("\"" + name + "\" is read-only");
+}
+
 var UIMessage = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function (props, ref) {
   var _props$message = props.message,
       severity = _props$message.severity,
@@ -24955,23 +25154,16 @@ var GMap = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function (prop
     });
   };
 
-  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);
@@ -24979,9 +25171,31 @@ var GMap = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function (prop
         _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.useImperativeHandle(ref, function () {
     return {
       getMap: getMap
@@ -25559,6 +25773,8 @@ var InputMask = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function
         value: getValue()
       });
     }
+
+    updateModel(e);
   };
 
   var onBlur = function onBlur(e) {
@@ -26033,12 +26249,6 @@ var InputSwitch = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(functio
     props.onBlur && props.onBlur(event);
   };
 
-  var onKeyDown = function onKeyDown(event) {
-    if (event.key === 'Enter') {
-      onClick(event);
-    }
-  };
-
   React.useEffect(function () {
     ObjectUtils.combinedRefs(inputRef, props.inputRef);
   }, [inputRef, props.inputRef]);
@@ -26047,7 +26257,7 @@ var InputSwitch = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(functio
   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.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", _extends({
     ref: elementRef,
@@ -26069,11 +26279,12 @@ var InputSwitch = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(functio
     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.createElement("span", {
     className: "p-inputswitch-slider"
   })), hasTooltip && /*#__PURE__*/React.createElement(Tooltip, _extends({
@@ -26090,13 +26301,15 @@ InputSwitch.defaultProps = {
   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
@@ -27134,8 +27347,10 @@ var MegaMenu = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function (
         'p-disabled': item.disabled
       });
       var iconClassName = classNames(item.icon, 'p-menuitem-icon');
-      var icon = item.icon && /*#__PURE__*/React.createElement("span", {
-        className: iconClassName
+      var icon = IconUtils.getJSXIcon(item.icon, {
+        className: 'p-menuitem-icon'
+      }, {
+        props: props
       });
       var label = item.label && /*#__PURE__*/React.createElement("span", {
         className: "p-menuitem-text"
@@ -27235,9 +27450,10 @@ var MegaMenu = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function (
     var linkClassName = classNames('p-menuitem-link', {
       'p-disabled': category.disabled
     });
-    var iconClassName = classNames('p-menuitem-icon', category.icon);
-    var icon = category.icon && /*#__PURE__*/React.createElement("span", {
-      className: iconClassName
+    var icon = IconUtils.getJSXIcon(category.icon, {
+      className: 'p-menuitem-icon'
+    }, {
+      props: props
     });
     var label = category.label && /*#__PURE__*/React.createElement("span", {
       className: "p-menuitem-text"
@@ -27943,8 +28159,10 @@ var Menu = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function (prop
       'p-disabled': item.disabled
     });
     var iconClassName = classNames('p-menuitem-icon', item.icon);
-    var icon = item.icon && /*#__PURE__*/React.createElement("span", {
-      className: iconClassName
+    var icon = IconUtils.getJSXIcon(item.icon, {
+      className: 'p-menuitem-icon'
+    }, {
+      props: props
     });
     var label = item.label && /*#__PURE__*/React.createElement("span", {
       className: "p-menuitem-text"
@@ -28219,6 +28437,7 @@ var MenubarSub = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function
   var createSubmenu = function createSubmenu(item) {
     if (item.items) {
       return /*#__PURE__*/React.createElement(MenubarSub, {
+        menuProps: props.menuProps,
         model: item.items,
         mobileActive: props.mobileActive,
         onLeafClick: onLeafClick,
@@ -28243,8 +28462,10 @@ var MenubarSub = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function
       'pi-angle-down': props.root,
       'pi-angle-right': !props.root
     });
-    var icon = item.icon && /*#__PURE__*/React.createElement("span", {
-      className: iconClassName
+    var icon = IconUtils.getJSXIcon(item.icon, {
+      className: 'p-menuitem-icon'
+    }, {
+      props: props.menuProps
     });
     var label = item.label && /*#__PURE__*/React.createElement("span", {
       className: "p-menuitem-text"
@@ -28423,6 +28644,7 @@ var Menubar = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function (p
   var menuButton = createMenuButton();
   var submenu = /*#__PURE__*/React.createElement(MenubarSub, {
     ref: rootMenuRef,
+    menuProps: props,
     model: props.model,
     root: true,
     mobileActive: mobileActiveState,
@@ -30955,6 +31177,7 @@ var PanelMenuSub = /*#__PURE__*/React.memo(function (props) {
         ref: submenuRef,
         className: className
       }, /*#__PURE__*/React.createElement(PanelMenuSub, {
+        menuProps: props.menuProps,
         model: item.items,
         multiple: props.multiple
       })));
@@ -30975,8 +31198,10 @@ var PanelMenuSub = /*#__PURE__*/React.memo(function (props) {
       'pi-angle-right': !active,
       'pi-angle-down': active
     });
-    var icon = item.icon && /*#__PURE__*/React.createElement("span", {
-      className: iconClassName
+    var icon = IconUtils.getJSXIcon(item.icon, {
+      className: 'p-menuitem-icon'
+    }, {
+      props: props.menuProps
     });
     var label = item.label && /*#__PURE__*/React.createElement("span", {
       className: "p-menuitem-text"
@@ -31132,12 +31357,14 @@ var PanelMenu = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function
       ' 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.createElement("span", {
       className: submenuIconClassName
     });
-    var itemIcon = item.icon && /*#__PURE__*/React.createElement("span", {
-      className: iconClassName
-    });
     var label = item.label && /*#__PURE__*/React.createElement("span", {
       className: "p-menuitem-text"
     }, item.label);
@@ -31155,7 +31382,7 @@ var PanelMenu = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function
       id: headerId,
       "aria-controls": contentId,
       "aria-disabled": item.disabled
-    }, submenuIcon, itemIcon, label);
+    }, submenuIcon, icon, label);
 
     if (item.template) {
       var defaultContentOptions = {
@@ -31200,6 +31427,7 @@ var PanelMenu = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function
     }, /*#__PURE__*/React.createElement("div", {
       className: "p-panelmenu-content"
     }, /*#__PURE__*/React.createElement(PanelMenuSub, {
+      menuProps: props,
       model: item.items,
       className: "p-panelmenu-root-submenu",
       multiple: props.multiple
@@ -33338,6 +33566,7 @@ var SlideMenuSub = /*#__PURE__*/React.memo(function (props) {
   var createSubmenu = function createSubmenu(item) {
     if (item.items) {
       return /*#__PURE__*/React.createElement(SlideMenuSub, {
+        menuProps: props.menuProps,
         model: item.items,
         index: props.index + 1,
         menuWidth: props.menuWidth,
@@ -33359,8 +33588,10 @@ var SlideMenuSub = /*#__PURE__*/React.memo(function (props) {
     }, 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.createElement("span", {
-      className: iconClassName
+    var icon = IconUtils.getJSXIcon(item.icon, {
+      className: 'p-menuitem-icon'
+    }, {
+      props: props.menuProps
     });
     var label = item.label && /*#__PURE__*/React.createElement("span", {
       className: "p-menuitem-text"
@@ -33584,6 +33815,7 @@ var SlideMenu = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function
       className: "p-slidemenu-content",
       ref: slideMenuContent
     }, /*#__PURE__*/React.createElement(SlideMenuSub, {
+      menuProps: props,
       model: props.model,
       root: true,
       index: 0,
@@ -34115,11 +34347,11 @@ var SpeedDial = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function
       'p-disabled': disabled
     });
     var iconClassName = classNames('p-speeddial-action-icon', _icon);
-
-    var icon = _icon && /*#__PURE__*/React.createElement("span", {
-      className: iconClassName
+    var icon = IconUtils.getJSXIcon(_icon, {
+      className: 'p-speeddial-action-icon'
+    }, {
+      props: props
     });
-
     var content = /*#__PURE__*/React.createElement("a", {
       href: url || '#',
       role: "menuitem",
@@ -34169,15 +34401,20 @@ var SpeedDial = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function
   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.createElement(Button, {
       type: "button",
       style: props.buttonStyle,
       className: className,
-      icon: iconClassName,
+      icon: icon,
       onClick: onClick,
       disabled: props.disabled
     });
@@ -34288,9 +34525,10 @@ var SplitButtonItem = /*#__PURE__*/React.memo(function (props) {
       'p-disabled': disabled
     });
     var iconClassName = classNames('p-menuitem-icon', _icon);
-
-    var icon = _icon && /*#__PURE__*/React.createElement("span", {
-      className: iconClassName
+    var icon = IconUtils.getJSXIcon(_icon, {
+      className: 'p-menuitem-icon'
+    }, {
+      props: props.splitButtonProps
     });
 
     var label = _label && /*#__PURE__*/React.createElement("span", {
@@ -34462,6 +34700,7 @@ var SplitButton = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(functio
     if (props.model) {
       return props.model.map(function (menuitem, index) {
         return /*#__PURE__*/React.createElement(SplitButtonItem, {
+          splitButtonProps: props,
           menuitem: menuitem,
           key: index,
           onItemClick: onItemClick
@@ -34865,6 +35104,12 @@ var Steps = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function (pro
       '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.createElement("span", {
       className: "p-steps-title"
     }, item.label);
@@ -34879,7 +35124,7 @@ var Steps = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function (pro
       tabIndex: tabIndex
     }, /*#__PURE__*/React.createElement("span", {
       className: "p-steps-number"
-    }, index + 1), label);
+    }, index + 1), icon, label);
 
     if (item.template) {
       var defaultContentOptions = {
@@ -34889,6 +35134,7 @@ var Steps = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function (pro
         className: 'p-menuitem-link',
         labelClassName: 'p-steps-title',
         numberClassName: 'p-steps-number',
+        iconClassName: iconClassName,
         element: content,
         props: props,
         tabIndex: tabIndex,
@@ -35222,9 +35468,10 @@ var TabMenu = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function (p
       'p-disabled': disabled
     }, _className);
     var iconClassName = classNames('p-menuitem-icon', _icon);
-
-    var icon = _icon && /*#__PURE__*/React.createElement("span", {
-      className: iconClassName
+    var icon = IconUtils.getJSXIcon(_icon, {
+      className: 'p-menuitem-icon'
+    }, {
+      props: props
     });
 
     var label = _label && /*#__PURE__*/React.createElement("span", {
@@ -36066,6 +36313,7 @@ var TieredMenuSub = /*#__PURE__*/React.memo(function (props) {
   var createSubmenu = function createSubmenu(item) {
     if (item.items) {
       return /*#__PURE__*/React.createElement(TieredMenuSub, {
+        menuProps: props.menuProps,
         model: item.items,
         onLeafClick: onLeafClick,
         popup: props.popup,
@@ -36097,9 +36345,10 @@ var TieredMenuSub = /*#__PURE__*/React.memo(function (props) {
     });
     var iconClassName = classNames('p-menuitem-icon', _icon);
     var submenuIconClassName = 'p-submenu-icon pi pi-angle-right';
-
-    var icon = _icon && /*#__PURE__*/React.createElement("span", {
-      className: iconClassName
+    var icon = IconUtils.getJSXIcon(_icon, {
+      className: 'p-menuitem-icon'
+    }, {
+      props: props.menuProps
     });
 
     var label = _label && /*#__PURE__*/React.createElement("span", {
@@ -36284,6 +36533,7 @@ var TieredMenu = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function
     }, otherProps, {
       onClick: onPanelClick
     }), /*#__PURE__*/React.createElement(TieredMenuSub, {
+      menuProps: props,
       model: props.model,
       root: true,
       popup: props.popup
@@ -38374,7 +38624,6 @@ var TreeSelect = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function
         updateTreeState();
       }
 
-      scrollInView();
       selfChange.current = false;
     }
   }, [props.value]);