primereact 8.1.1 → 8.2.0

package/primereact.all.esm.js

@@ -186,9 +186,9 @@ _defineProperty(PrimeReact, "filterMatchModeOptions", {
   date: [FilterMatchMode.DATE_IS, FilterMatchMode.DATE_IS_NOT, FilterMatchMode.DATE_BEFORE, FilterMatchMode.DATE_AFTER]
 });
 
-function ownKeys$A(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function ownKeys$z(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 
-function _objectSpread$A(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$A(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$A(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+function _objectSpread$z(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$z(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$z(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 var locales = {
   'en': {
     startsWith: 'Starts with',
@@ -255,7 +255,7 @@ function locale(locale) {
 }
 
 function addLocale(locale, options) {
-  locales[locale] = _objectSpread$A(_objectSpread$A({}, locales['en']), options);
+  locales[locale] = _objectSpread$z(_objectSpread$z({}, locales['en']), options);
 }
 
 function updateLocaleOption(key, value, locale) {
@@ -265,7 +265,7 @@ function updateLocaleOption(key, value, locale) {
 function updateLocaleOptions(options, locale) {
   var _locale = locale || PrimeReact.locale;
 
-  locales[_locale] = _objectSpread$A(_objectSpread$A({}, locales[_locale]), options);
+  locales[_locale] = _objectSpread$z(_objectSpread$z({}, locales[_locale]), options);
 }
 
 function localeOption(key, locale) {
@@ -1437,6 +1437,21 @@ var DomHandler = /*#__PURE__*/function () {
       var focusableElements = DomHandler.getFocusableElements(element, selector);
       return focusableElements.length > 0 ? focusableElements[focusableElements.length - 1] : null;
     }
+    /**
+     * Focus an input element if it does not already have focus.
+     *
+     * @param {HTMLElement} el a HTML element
+     * @param {boolean} scrollTo flag to control whether to scroll to the element, false by default
+     */
+
+  }, {
+    key: "focus",
+    value: function focus(el, scrollTo) {
+      var preventScroll = scrollTo === undefined ? true : !scrollTo;
+      el && document.activeElement !== el && el.focus({
+        preventScroll: preventScroll
+      });
+    }
   }, {
     key: "getCursorOffset",
     value: function getCursorOffset(el, prevText, nextText, currentText) {
@@ -1660,9 +1675,9 @@ function EventBus() {
   };
 }
 
-function ownKeys$z(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function ownKeys$y(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 
-function _objectSpread$z(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$z(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$z(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+function _objectSpread$y(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$y(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$y(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 function mask(el, options) {
   var defaultOptions = {
     mask: null,
@@ -1675,7 +1690,7 @@ function mask(el, options) {
     onFocus: null,
     onBlur: null
   };
-  options = _objectSpread$z(_objectSpread$z({}, defaultOptions), options);
+  options = _objectSpread$y(_objectSpread$y({}, defaultOptions), options);
   var tests, partialPosition, len, firstNonMaskPos, defs, androidChrome, lastRequiredNonMaskPos, oldVal, focusText, caretTimeoutId, buffer, defaultBuffer;
 
   var caret = function caret(first, last) {
@@ -1832,12 +1847,9 @@ function mask(el, options) {
 
   var onBlur = function onBlur(e) {
     checkVal();
+    options.onBlur && options.onBlur(e);
     updateModel(e);
 
-    if (options.onBlur) {
-      options.onBlur(e);
-    }
-
     if (el.value !== focusText) {
       var event = document.createEvent('HTMLEvents');
       event.initEvent('change', true, false);
@@ -2373,7 +2385,11 @@ var ObjectUtils = /*#__PURE__*/function () {
       var order = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 1;
       var locale = arguments.length > 3 ? arguments[3] : undefined;
       var result = null;
-      if (value1 == null && value2 != null) result = -1;else if (value1 != null && value2 == null) result = 1;else if (value1 == null && value2 == null) result = 0;else if (typeof value1 === 'string' && typeof value2 === 'string') result = value1.localeCompare(value2, locale, {
+      var emptyValue1 = this.isEmpty(value1);
+      var emptyValue2 = this.isEmpty(value2);
+      if (emptyValue1 && emptyValue2) result = 0;else if (emptyValue1) result = order; // sort nulls at bottom like Excel
+      else if (emptyValue2) result = -order; // sort nulls at bottom like Excel
+      else if (typeof value1 === 'string' && typeof value2 === 'string') result = value1.localeCompare(value2, locale, {
         numeric: true
       });else result = value1 < value2 ? -1 : value1 > value2 ? 1 : 0;
       return order * result;
@@ -2383,9 +2399,9 @@ var ObjectUtils = /*#__PURE__*/function () {
   return ObjectUtils;
 }();
 
-function ownKeys$y(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function ownKeys$x(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 
-function _objectSpread$y(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$y(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$y(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+function _objectSpread$x(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$x(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$x(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 
 var IconUtils = /*#__PURE__*/function () {
   function IconUtils() {
@@ -2408,7 +2424,7 @@ var IconUtils = /*#__PURE__*/function () {
         }));
 
         if (iconType !== 'string') {
-          var defaultContentOptions = _objectSpread$y({
+          var defaultContentOptions = _objectSpread$x({
             iconProps: iconProps,
             element: content
           }, options);
@@ -3140,9 +3156,9 @@ var useTimeout = function useTimeout(fn) {
 };
 /* eslint-enable */
 
-function ownKeys$x(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function ownKeys$w(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 
-function _objectSpread$x(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$x(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$x(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+function _objectSpread$w(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$w(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$w(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 var CSSTransition = /*#__PURE__*/React.forwardRef(function (props, ref) {
   var disabled = props.disabled || props.options && props.options.disabled || !PrimeReact.cssTransition;
 
@@ -3218,7 +3234,7 @@ var CSSTransition = /*#__PURE__*/React.forwardRef(function (props, ref) {
       unmountOnExit: props.unmountOnExit
     };
 
-    var mergedProps = _objectSpread$x(_objectSpread$x(_objectSpread$x({}, mutableProps), props.options || {}), immutableProps);
+    var mergedProps = _objectSpread$w(_objectSpread$w(_objectSpread$w({}, mutableProps), props.options || {}), immutableProps);
 
     return /*#__PURE__*/React.createElement(CSSTransition$1, mergedProps, props.children);
   }
@@ -3228,9 +3244,9 @@ CSSTransition.defaultProps = {
   __TYPE: 'CSSTransition'
 };
 
-function ownKeys$w(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function ownKeys$v(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 
-function _objectSpread$w(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$w(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$w(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+function _objectSpread$v(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$v(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$v(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 var AccordionTab = function AccordionTab() {};
 var Accordion = /*#__PURE__*/React.forwardRef(function (props, ref) {
   var _React$useState = React.useState(props.id),
@@ -3295,7 +3311,7 @@ var Accordion = /*#__PURE__*/React.forwardRef(function (props, ref) {
   });
 
   var createTabHeader = function createTabHeader(tab, selected, index) {
-    var style = _objectSpread$w(_objectSpread$w({}, tab.props.style || {}), tab.props.headerStyle || {});
+    var style = _objectSpread$v(_objectSpread$v({}, tab.props.style || {}), tab.props.headerStyle || {});
 
     var className = classNames('p-accordion-header', {
       'p-highlight': selected,
@@ -3331,7 +3347,7 @@ var Accordion = /*#__PURE__*/React.forwardRef(function (props, ref) {
   };
 
   var createTabContent = function createTabContent(tab, selected, index) {
-    var style = _objectSpread$w(_objectSpread$w({}, tab.props.style || {}), tab.props.contentStyle || {});
+    var style = _objectSpread$v(_objectSpread$v({}, tab.props.style || {}), tab.props.contentStyle || {});
 
     var className = classNames('p-toggleable-content', tab.props.contentClassName, tab.props.className);
     var contentId = idState + '_content_' + index;
@@ -3545,6 +3561,11 @@ var Tooltip = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function (p
       positionState = _React$useState4[0],
       setPositionState = _React$useState4[1];
 
+  var _React$useState5 = React.useState(''),
+      _React$useState6 = _slicedToArray(_React$useState5, 2),
+      classNameState = _React$useState6[0],
+      setClassNameState = _React$useState6[1];
+
   var elementRef = React.useRef(null);
   var textRef = React.useRef(null);
   var currentTargetRef = React.useRef(null);
@@ -3663,7 +3684,7 @@ var Tooltip = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function (p
       return;
     }
 
-    var updateTooltipState = function updateTooltipState() {
+    var updateTooltipState = function updateTooltipState(position) {
       updateText(currentTargetRef.current, function () {
         if (props.autoZIndex && !ZIndexUtils.get(elementRef.current)) {
           ZIndexUtils.set('tooltip', elementRef.current, PrimeReact.autoZIndex, props.baseZIndex || PrimeReact.zIndex['tooltip']);
@@ -3686,7 +3707,7 @@ var Tooltip = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function (p
         align(currentTargetRef.current, {
           x: e.pageX,
           y: e.pageY
-        });
+        }, position);
       });
     };
 
@@ -3701,16 +3722,16 @@ var Tooltip = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function (p
 
       if (success) {
         applyDelay('showDelay', function () {
+          var position = getPosition(currentTargetRef.current);
+          var classname = getTargetOption(currentTargetRef.current, 'classname');
           setVisibleState(true);
-          setPositionState(getPosition(currentTargetRef.current));
-          setTimeout(function () {
-            return updateTooltipState();
-          }, 0);
+          setPositionState(position);
+          setClassNameState(classname);
+          updateTooltipState(position);
           sendCallback(props.onShow, {
             originalEvent: e,
             target: currentTargetRef.current
           });
-          DomHandler.addClass(currentTargetRef.current, getTargetOption(currentTargetRef.current, 'classname'));
         });
       }
     }
@@ -3720,7 +3741,6 @@ var Tooltip = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function (p
     clearTimeouts();
 
     if (visibleState) {
-      DomHandler.removeClass(currentTargetRef.current, getTargetOption(currentTargetRef.current, 'classname'));
       var success = sendCallback(props.onBeforeHide, {
         originalEvent: e,
         target: currentTargetRef.current
@@ -3736,6 +3756,7 @@ var Tooltip = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function (p
           DomHandler.removeClass(elementRef.current, 'p-tooltip-active');
           setVisibleState(false);
           setPositionState(props.position);
+          setClassNameState('');
           currentTargetRef.current = null;
           containerSize.current = null;
           allowHide.current = true;
@@ -3748,9 +3769,10 @@ var Tooltip = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function (p
     }
   };
 
-  var align = function align(target, coordinate) {
+  var align = function align(target, coordinate, position) {
     var left = 0,
-        top = 0;
+        top = 0,
+        currentPosition = position || positionState;
 
     if (isMouseTrack(target) && coordinate) {
       var _containerSize = {
@@ -3764,7 +3786,7 @@ var Tooltip = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function (p
           mouseTrackTop = _getMouseTrackPositio.top,
           mouseTrackLeft = _getMouseTrackPositio.left;
 
-      switch (positionState) {
+      switch (currentPosition) {
         case 'left':
           left -= _containerSize.width + mouseTrackLeft;
           top -= _containerSize.height / 2 - mouseTrackTop;
@@ -3797,28 +3819,28 @@ var Tooltip = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function (p
       elementRef.current.style.top = top + 'px';
       DomHandler.addClass(elementRef.current, 'p-tooltip-active');
     } else {
-      var pos = DomHandler.findCollisionPosition(positionState);
+      var pos = DomHandler.findCollisionPosition(currentPosition);
       var my = getTargetOption(target, 'my') || props.my || pos.my;
       var at = getTargetOption(target, 'at') || props.at || pos.at;
       elementRef.current.style.padding = '0px';
-      DomHandler.flipfitCollision(elementRef.current, target, my, at, function (currentPosition) {
-        var _currentPosition$at = currentPosition.at,
-            atX = _currentPosition$at.x,
-            atY = _currentPosition$at.y;
-        var myX = currentPosition.my.x;
-        var newPosition = props.at ? atX !== 'center' && atX !== myX ? atX : atY : currentPosition.at["".concat(pos.axis)];
+      DomHandler.flipfitCollision(elementRef.current, target, my, at, function (calculatedPosition) {
+        var _calculatedPosition$a = calculatedPosition.at,
+            atX = _calculatedPosition$a.x,
+            atY = _calculatedPosition$a.y;
+        var myX = calculatedPosition.my.x;
+        var newPosition = props.at ? atX !== 'center' && atX !== myX ? atX : atY : calculatedPosition.at["".concat(pos.axis)];
         elementRef.current.style.padding = '';
         setPositionState(newPosition);
-        updateContainerPosition();
+        updateContainerPosition(newPosition);
         DomHandler.addClass(elementRef.current, 'p-tooltip-active');
       });
     }
   };
 
-  var updateContainerPosition = function updateContainerPosition() {
+  var updateContainerPosition = function updateContainerPosition(position) {
     if (elementRef.current) {
       var style = getComputedStyle(elementRef.current);
-      if (positionState === 'left') elementRef.current.style.left = parseFloat(style.left) - parseFloat(style.paddingLeft) * 2 + 'px';else if (positionState === 'top') elementRef.current.style.top = parseFloat(style.top) - parseFloat(style.paddingTop) * 2 + 'px';
+      if (position === 'left') elementRef.current.style.left = parseFloat(style.left) - parseFloat(style.paddingLeft) * 2 + 'px';else if (position === 'top') elementRef.current.style.top = parseFloat(style.top) - parseFloat(style.paddingTop) * 2 + 'px';
     }
   };
 
@@ -4004,7 +4026,7 @@ var Tooltip = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function (p
 
   var createElement = function createElement() {
     var otherProps = ObjectUtils.findDiffKeys(props, Tooltip.defaultProps);
-    var tooltipClassName = classNames('p-tooltip p-component', _defineProperty({}, "p-tooltip-".concat(positionState), true), props.className);
+    var tooltipClassName = classNames('p-tooltip p-component', _defineProperty({}, "p-tooltip-".concat(positionState), true), props.className, classNameState);
     var empty = isTargetContentEmpty(currentTargetRef.current);
     return /*#__PURE__*/React.createElement("div", _extends({
       id: props.id,
@@ -4340,9 +4362,9 @@ InputText.defaultProps = {
 
 var OverlayService = EventBus();
 
-function ownKeys$v(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function ownKeys$u(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 
-function _objectSpread$v(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$v(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$v(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+function _objectSpread$u(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$u(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$u(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 var VirtualScroller = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function (props, ref) {
   var vertical = props.orientation === 'vertical';
   var horizontal = props.orientation === 'horizontal';
@@ -4377,7 +4399,7 @@ var VirtualScroller = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(fun
       numToleratedItemsState = _React$useState8[0],
       setNumToleratedItemsState = _React$useState8[1];
 
-  var _React$useState9 = React.useState(props.loading),
+  var _React$useState9 = React.useState(props.loading || false),
       _React$useState10 = _slicedToArray(_React$useState9, 2),
       loadingState = _React$useState10[0],
       setLoadingState = _React$useState10[1];
@@ -4400,10 +4422,39 @@ var VirtualScroller = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(fun
     left: 0
   } : 0);
   var scrollTimeout = React.useRef(null);
+  var resizeTimeout = React.useRef(null);
+  var defaultWidth = React.useRef(null);
+  var defaultHeight = React.useRef(null);
   var prevItems = usePrevious(props.items);
   var prevLoading = usePrevious(props.loading);
 
+  var _useResizeListener = useResizeListener({
+    listener: function listener(event) {
+      return onResize(event);
+    }
+  }),
+      _useResizeListener2 = _slicedToArray(_useResizeListener, 1),
+      bindWindowResizeListener = _useResizeListener2[0];
+
+  var _useEventListener = useEventListener({
+    target: 'window',
+    type: 'orientationchange',
+    listener: function listener(event) {
+      return onResize(event);
+    }
+  }),
+      _useEventListener2 = _slicedToArray(_useEventListener, 1),
+      bindOrientationChangeListener = _useEventListener2[0];
+
+  var getElementRef = function getElementRef() {
+    return elementRef;
+  };
+
   var scrollTo = function scrollTo(options) {
+    lastScrollPos.current = both ? {
+      top: 0,
+      left: 0
+    } : 0;
     elementRef.current && elementRef.current.scrollTo(options);
   };
 
@@ -4413,9 +4464,6 @@ var VirtualScroller = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(fun
     var _calculateNumItems = calculateNumItems(),
         numToleratedItems = _calculateNumItems.numToleratedItems;
 
-    var itemSize = props.itemSize;
-    var contentPos = getContentPosition();
-
     var calculateFirst = function calculateFirst() {
       var _index = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 0;
 
@@ -4424,8 +4472,8 @@ var VirtualScroller = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(fun
       return _index <= _numT ? 0 : _index;
     };
 
-    var calculateCoord = function calculateCoord(_first, _size, _cpos) {
-      return _first * _size + _cpos;
+    var calculateCoord = function calculateCoord(_first, _size) {
+      return _first * _size;
     };
 
     var scrollToItem = function scrollToItem() {
@@ -4445,15 +4493,13 @@ var VirtualScroller = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(fun
       };
 
       if (newFirst.rows !== firstState.rows || newFirst.cols !== firstState.cols) {
-        scrollToItem(calculateCoord(newFirst.cols, itemSize[1], contentPos.left), calculateCoord(newFirst.rows, itemSize[0], contentPos.top));
-        setFirstState(newFirst);
+        scrollToItem(calculateCoord(newFirst.cols, props.itemSize[1]), calculateCoord(newFirst.rows, props.itemSize[0]));
       }
     } else {
       var _newFirst = calculateFirst(index, numToleratedItems);
 
       if (_newFirst !== firstState) {
-        horizontal ? scrollToItem(calculateCoord(_newFirst, itemSize, contentPos.left), 0) : scrollToItem(0, calculateCoord(_newFirst, itemSize, contentPos.top));
-        setFirstState(_newFirst);
+        horizontal ? scrollToItem(calculateCoord(_newFirst, props.itemSize), 0) : scrollToItem(0, calculateCoord(_newFirst, props.itemSize));
       }
     }
   };
@@ -4466,8 +4512,6 @@ var VirtualScroller = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(fun
           first = _getRenderedRange.first,
           viewport = _getRenderedRange.viewport;
 
-      var itemSize = props.itemSize;
-
       var scrollToItem = function scrollToItem() {
         var left = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 0;
         var top = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;
@@ -4484,26 +4528,26 @@ var VirtualScroller = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(fun
       if (isToStart) {
         if (both) {
           if (viewport.first.rows - first.rows > index[0]) {
-            scrollToItem(viewport.first.cols * itemSize, (viewport.first.rows - 1) * itemSize);
+            scrollToItem(viewport.first.cols * props.itemSize[1], (viewport.first.rows - 1) * props.itemSize[0]);
           } else if (viewport.first.cols - first.cols > index[1]) {
-            scrollToItem((viewport.first.cols - 1) * itemSize, viewport.first.rows * itemSize);
+            scrollToItem((viewport.first.cols - 1) * props.itemSize[1], viewport.first.rows * props.itemSize[0]);
           }
         } else {
           if (viewport.first - first > index) {
-            var pos = (viewport.first - 1) * itemSize;
+            var pos = (viewport.first - 1) * props.itemSize;
             horizontal ? scrollToItem(pos, 0) : scrollToItem(0, pos);
           }
         }
       } else if (isToEnd) {
         if (both) {
           if (viewport.last.rows - first.rows <= index[0] + 1) {
-            scrollToItem(viewport.first.cols * itemSize, (viewport.first.rows + 1) * itemSize);
+            scrollToItem(viewport.first.cols * props.itemSize[1], (viewport.first.rows + 1) * props.itemSize[0]);
           } else if (viewport.last.cols - first.cols <= index[1] + 1) {
-            scrollToItem((viewport.first.cols + 1) * itemSize, viewport.first.rows * itemSize);
+            scrollToItem((viewport.first.cols + 1) * props.itemSize[1], viewport.first.rows * props.itemSize[0]);
           }
         } else {
           if (viewport.last - first <= index + 1) {
-            var _pos2 = (viewport.first + 1) * itemSize;
+            var _pos2 = (viewport.first + 1) * props.itemSize;
 
             horizontal ? scrollToItem(_pos2, 0) : scrollToItem(0, _pos2);
           }
@@ -4519,18 +4563,14 @@ var VirtualScroller = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(fun
   };
 
   var getColumns = function getColumns() {
-    if (props.columns) {
-      if (both || horizontal) {
-        return loadingState && props.loaderDisabled ? both ? loaderArrState[0] : loaderArrState : props.columns.slice(both ? firstState.cols : firstState, both ? lastState.cols : lastState);
-      }
+    if (props.columns && both || horizontal) {
+      return loadingState && props.loaderDisabled ? both ? loaderArrState[0] : loaderArrState : props.columns.slice(both ? firstState.cols : firstState, both ? lastState.cols : lastState);
     }
 
     return props.columns;
   };
 
   var getRenderedRange = function getRenderedRange() {
-    var itemSize = props.itemSize;
-
     var calculateFirstInViewport = function calculateFirstInViewport(_pos, _size) {
       return Math.floor(_pos / (_size || _pos));
     };
@@ -4539,13 +4579,14 @@ var VirtualScroller = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(fun
     var lastInViewport = 0;
 
     if (elementRef.current) {
-      var scrollTop = elementRef.current.scrollTop;
-      var scrollLeft = elementRef.current.scrollLeft;
+      var _elementRef$current = elementRef.current,
+          scrollTop = _elementRef$current.scrollTop,
+          scrollLeft = _elementRef$current.scrollLeft;
 
       if (both) {
         firstInViewport = {
-          rows: calculateFirstInViewport(scrollTop, itemSize[0]),
-          cols: calculateFirstInViewport(scrollLeft, itemSize[1])
+          rows: calculateFirstInViewport(scrollTop, props.itemSize[0]),
+          cols: calculateFirstInViewport(scrollLeft, props.itemSize[1])
         };
         lastInViewport = {
           rows: firstInViewport.rows + numItemsInViewportState.rows,
@@ -4553,7 +4594,7 @@ var VirtualScroller = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(fun
         };
       } else {
         var scrollPos = horizontal ? scrollLeft : scrollTop;
-        firstInViewport = calculateFirstInViewport(scrollPos, itemSize);
+        firstInViewport = calculateFirstInViewport(scrollPos, props.itemSize);
         lastInViewport = firstInViewport + numItemsInViewportState;
       }
     }
@@ -4569,7 +4610,6 @@ var VirtualScroller = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(fun
   };
 
   var calculateNumItems = function calculateNumItems() {
-    var itemSize = props.itemSize;
     var contentPos = getContentPosition();
     var contentWidth = elementRef.current ? elementRef.current.offsetWidth - contentPos.left : 0;
     var contentHeight = elementRef.current ? elementRef.current.offsetHeight - contentPos.top : 0;
@@ -4583,9 +4623,9 @@ var VirtualScroller = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(fun
     };
 
     var numItemsInViewport = both ? {
-      rows: calculateNumItemsInViewport(contentHeight, itemSize[0]),
-      cols: calculateNumItemsInViewport(contentWidth, itemSize[1])
-    } : calculateNumItemsInViewport(horizontal ? contentWidth : contentHeight, itemSize);
+      rows: calculateNumItemsInViewport(contentHeight, props.itemSize[0]),
+      cols: calculateNumItemsInViewport(contentWidth, props.itemSize[1])
+    } : calculateNumItemsInViewport(horizontal ? contentWidth : contentHeight, props.itemSize);
     var numToleratedItems = numToleratedItemsState || (both ? [calculateNumToleratedItems(numItemsInViewport.rows), calculateNumToleratedItems(numItemsInViewport.cols)] : calculateNumToleratedItems(numItemsInViewport));
     return {
       numItemsInViewport: numItemsInViewport,
@@ -4630,15 +4670,26 @@ var VirtualScroller = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(fun
     }
   };
 
+  var calculateAutoSize = function calculateAutoSize(loading) {
+    if (props.autoSize && !loading) {
+      Promise.resolve().then(function () {
+        if (_contentRef.current) {
+          _contentRef.current.style.minHeight = _contentRef.current.style.minWidth = 'auto';
+          var _contentRef$current = _contentRef.current,
+              offsetWidth = _contentRef$current.offsetWidth,
+              offsetHeight = _contentRef$current.offsetHeight;
+          (both || horizontal) && (elementRef.current.style.width = (offsetWidth < defaultWidth.current ? offsetWidth : defaultWidth.current) + 'px');
+          (both || vertical) && (elementRef.current.style.height = (offsetHeight < defaultHeight.current ? offsetHeight : defaultHeight.current) + 'px');
+          _contentRef.current.style.minHeight = _contentRef.current.style.minWidth = '';
+        }
+      });
+    }
+  };
+
   var getLast = function getLast() {
     var last = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 0;
     var isCols = arguments.length > 1 ? arguments[1] : undefined;
-
-    if (props.items) {
-      return Math.min(isCols ? (props.columns || props.items[0]).length : props.items.length, last);
-    }
-
-    return 0;
+    return props.items ? Math.min(isCols ? (props.columns || props.items[0]).length : props.items.length, last) : 0;
   };
 
   var getContentPosition = function getContentPosition() {
@@ -4691,7 +4742,6 @@ var VirtualScroller = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(fun
     var items = props.items;
 
     if (_spacerRef.current && items) {
-      var itemSize = props.itemSize;
       var contentPos = getContentPosition();
 
       var setProp = function setProp(_name, _value, _size) {
@@ -4701,10 +4751,10 @@ var VirtualScroller = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(fun
       };
 
       if (both) {
-        setProp('height', items, itemSize[0], contentPos.y);
-        setProp('width', props.columns || items[1], itemSize[1], contentPos.x);
+        setProp('height', items, props.itemSize[0], contentPos.y);
+        setProp('width', props.columns || items[1], props.itemSize[1], contentPos.x);
       } else {
-        horizontal ? setProp('width', props.columns || items, itemSize, contentPos.x) : setProp('height', items, itemSize, contentPos.y);
+        horizontal ? setProp('width', props.columns || items, props.itemSize, contentPos.x) : setProp('height', items, props.itemSize, contentPos.y);
       }
     }
   };
@@ -4712,7 +4762,6 @@ var VirtualScroller = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(fun
   var setContentPosition = function setContentPosition(pos) {
     if (_contentRef.current) {
       var first = pos ? pos.first : firstState;
-      var itemSize = props.itemSize;
 
       var calculateTranslateVal = function calculateTranslateVal(_first, _size) {
         return _first * _size;
@@ -4728,9 +4777,9 @@ var VirtualScroller = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(fun
       };
 
       if (both) {
-        setTransform(calculateTranslateVal(first.cols, itemSize[1]), calculateTranslateVal(first.rows, itemSize[0]));
+        setTransform(calculateTranslateVal(first.cols, props.itemSize[1]), calculateTranslateVal(first.rows, props.itemSize[0]));
       } else {
-        var translateVal = calculateTranslateVal(first, itemSize);
+        var translateVal = calculateTranslateVal(first, props.itemSize);
         horizontal ? setTransform(translateVal, 0) : setTransform(0, translateVal);
       }
     }
@@ -4738,7 +4787,6 @@ var VirtualScroller = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(fun
 
   var onScrollPositionChange = function onScrollPositionChange(event) {
     var target = event.target;
-    var itemSize = props.itemSize;
     var contentPos = getContentPosition();
 
     var calculateScrollPos = function calculateScrollPos(_pos, _cpos) {
@@ -4769,16 +4817,20 @@ var VirtualScroller = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(fun
 
     var scrollTop = calculateScrollPos(target.scrollTop, contentPos.top);
     var scrollLeft = calculateScrollPos(target.scrollLeft, contentPos.left);
-    var newFirst = 0;
+    var newFirst = both ? {
+      rows: 0,
+      cols: 0
+    } : 0;
     var newLast = lastState;
     var isRangeChanged = false;
+    var newScrollPos = lastScrollPos.current;
 
     if (both) {
       var isScrollDown = lastScrollPos.current.top <= scrollTop;
       var isScrollRight = lastScrollPos.current.left <= scrollLeft;
       var currentIndex = {
-        rows: calculateCurrentIndex(scrollTop, itemSize[0]),
-        cols: calculateCurrentIndex(scrollLeft, itemSize[1])
+        rows: calculateCurrentIndex(scrollTop, props.itemSize[0]),
+        cols: calculateCurrentIndex(scrollLeft, props.itemSize[1])
       };
       var triggerIndex = {
         rows: calculateTriggerIndex(currentIndex.rows, firstState.rows, lastState.rows, numItemsInViewportState.rows, numToleratedItemsState[0], isScrollDown),
@@ -4792,8 +4844,8 @@ var VirtualScroller = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(fun
         rows: calculateLast(currentIndex.rows, newFirst.rows, lastState.rows, numItemsInViewportState.rows, numToleratedItemsState[0]),
         cols: calculateLast(currentIndex.cols, newFirst.cols, lastState.cols, numItemsInViewportState.cols, numToleratedItemsState[1], true)
       };
-      isRangeChanged = newFirst.rows !== firstState.rows && newLast.rows !== lastState.rows || newFirst.cols !== firstState.cols && newLast.cols !== lastState.cols;
-      lastScrollPos.current = {
+      isRangeChanged = newFirst.rows !== firstState.rows || newLast.rows !== lastState.rows || newFirst.cols !== firstState.cols || newLast.cols !== lastState.cols;
+      newScrollPos = {
         top: scrollTop,
         left: scrollLeft
       };
@@ -4801,20 +4853,21 @@ var VirtualScroller = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(fun
       var scrollPos = horizontal ? scrollLeft : scrollTop;
       var isScrollDownOrRight = lastScrollPos.current <= scrollPos;
 
-      var _currentIndex2 = calculateCurrentIndex(scrollPos, itemSize);
+      var _currentIndex2 = calculateCurrentIndex(scrollPos, props.itemSize);
 
       var _triggerIndex2 = calculateTriggerIndex(_currentIndex2, firstState, lastState, numItemsInViewportState, numToleratedItemsState, isScrollDownOrRight);
 
       newFirst = calculateFirst(_currentIndex2, _triggerIndex2, firstState, lastState, numItemsInViewportState, numToleratedItemsState, isScrollDownOrRight);
       newLast = calculateLast(_currentIndex2, newFirst, lastState, numItemsInViewportState, numToleratedItemsState);
-      isRangeChanged = newFirst !== firstState && newLast !== lastState;
-      lastScrollPos.current = scrollPos;
+      isRangeChanged = newFirst !== firstState || newLast !== lastState;
+      newScrollPos = scrollPos;
     }
 
     return {
       first: newFirst,
       last: newLast,
-      isRangeChanged: isRangeChanged
+      isRangeChanged: isRangeChanged,
+      scrollPos: newScrollPos
     };
   };
 
@@ -4822,7 +4875,8 @@ var VirtualScroller = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(fun
     var _onScrollPositionChan = onScrollPositionChange(event),
         first = _onScrollPositionChan.first,
         last = _onScrollPositionChan.last,
-        isRangeChanged = _onScrollPositionChan.isRangeChanged;
+        isRangeChanged = _onScrollPositionChan.isRangeChanged,
+        scrollPos = _onScrollPositionChan.scrollPos;
 
     if (isRangeChanged) {
       var newState = {
@@ -4832,6 +4886,7 @@ var VirtualScroller = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(fun
       setContentPosition(newState);
       setFirstState(first);
       setLastState(last);
+      lastScrollPos.current = scrollPos;
       props.onScrollIndexChange && props.onScrollIndexChange(newState);
 
       if (props.lazy) {
@@ -4858,7 +4913,7 @@ var VirtualScroller = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(fun
       scrollTimeout.current = setTimeout(function () {
         onScrollChange(event);
 
-        if (loadingState && props.showLoader && !props.lazy) {
+        if (loadingState && props.showLoader && (!props.lazy || props.loading === undefined)) {
           setLoadingState(false);
         }
       }, props.delay);
@@ -4867,10 +4922,32 @@ var VirtualScroller = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(fun
     }
   };
 
+  var onResize = function onResize() {
+    if (resizeTimeout.current) {
+      clearTimeout(resizeTimeout.current);
+    }
+
+    resizeTimeout.current = setTimeout(function () {
+      if (elementRef.current) {
+        var _ref = [DomHandler.getWidth(elementRef.current), DomHandler.getHeight(elementRef.current)],
+            width = _ref[0],
+            height = _ref[1];
+        var isDiffWidth = width !== defaultWidth.current,
+            isDiffHeight = height !== defaultHeight.current;
+        var reinit = both ? isDiffWidth || isDiffHeight : horizontal ? isDiffWidth : vertical ? isDiffHeight : false;
+
+        if (reinit) {
+          setNumToleratedItemsState(props.numToleratedItems);
+          defaultWidth.current = width;
+          defaultHeight.current = height;
+        }
+      }
+    }, props.resizeDelay);
+  };
+
   var getOptions = function getOptions(renderedIndex) {
-    var first = firstState;
     var count = (props.items || []).length;
-    var index = both ? first.rows + renderedIndex : first + renderedIndex;
+    var index = both ? firstState.rows + renderedIndex : firstState + renderedIndex;
     return {
       index: index,
       count: count,
@@ -4884,7 +4961,7 @@ var VirtualScroller = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(fun
 
   var loaderOptions = function loaderOptions(index, extOptions) {
     var count = loaderArrState.length;
-    return _objectSpread$v({
+    return _objectSpread$u({
       index: index,
       count: count,
       first: index === 0,
@@ -4908,25 +4985,48 @@ var VirtualScroller = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(fun
   };
 
   var init = function init() {
-    setSize();
-    calculateOptions();
-    setSpacerSize();
+    if (!props.disabled) {
+      setSize();
+      calculateOptions();
+      setSpacerSize();
+    }
   };
 
   useMountEffect(function () {
-    init();
+    if (!props.disabled) {
+      init();
+      bindWindowResizeListener();
+      bindOrientationChangeListener();
+      defaultWidth.current = DomHandler.getWidth(elementRef.current);
+      defaultHeight.current = DomHandler.getHeight(elementRef.current);
+    }
   });
   useUpdateEffect(function () {
     init();
   }, [props.itemSize, props.scrollHeight]);
+  useUpdateEffect(function () {
+    if (props.numToleratedItems !== numToleratedItemsState) {
+      setNumToleratedItemsState(props.numToleratedItems);
+    }
+  }, [props.numToleratedItems]);
+  useUpdateEffect(function () {
+    if (props.numToleratedItems === numToleratedItemsState) {
+      init(); // reinit after resizing
+    }
+  }, [numToleratedItemsState]);
   useUpdateEffect(function () {
     if (!prevItems || prevItems.length !== (props.items || []).length) {
       init();
     }
 
+    var loading = loadingState;
+
     if (props.lazy && prevLoading !== props.loading && props.loading !== loadingState) {
       setLoadingState(props.loading);
+      loading = props.loading;
     }
+
+    calculateAutoSize(loading);
   });
   useUpdateEffect(function () {
     lastScrollPos.current = both ? {
@@ -4936,6 +5036,7 @@ var VirtualScroller = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(fun
   }, [props.orientation]);
   React.useImperativeHandle(ref, function () {
     return {
+      getElementRef: getElementRef,
       scrollTo: scrollTo,
       scrollToIndex: scrollToIndex,
       scrollInView: scrollInView,
@@ -4967,6 +5068,13 @@ var VirtualScroller = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(fun
             numCols: numItemsInViewportState.cols
           });
         });
+      } else if (props.loaderIconTemplate) {
+        var defaultContentOptions = {
+          className: 'p-virtualscroller-loading-icon',
+          element: content,
+          props: props
+        };
+        content = ObjectUtils.getJSXElement(props.loaderIconTemplate, defaultContentOptions);
       }
 
       return /*#__PURE__*/React.createElement("div", {
@@ -5089,14 +5197,17 @@ VirtualScroller.defaultProps = {
   orientation: 'vertical',
   numToleratedItems: null,
   delay: 0,
+  resizeDelay: 10,
   lazy: false,
   disabled: false,
   loaderDisabled: false,
   columns: null,
-  loading: false,
+  loading: undefined,
+  autoSize: false,
   showSpacer: true,
   showLoader: false,
   loadingTemplate: null,
+  loaderIconTemplate: null,
   itemTemplate: null,
   contentTemplate: null,
   onScroll: null,
@@ -5104,15 +5215,15 @@ VirtualScroller.defaultProps = {
   onLazyLoad: null
 };
 
-function ownKeys$u(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function ownKeys$t(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 
-function _objectSpread$u(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$u(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$u(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+function _objectSpread$t(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$t(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$t(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 var AutoCompletePanel = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function (props, ref) {
   var getOptionGroupRenderKey = function getOptionGroupRenderKey(optionGroup) {
     return ObjectUtils.resolveFieldData(optionGroup, props.optionGroupLabel);
   };
 
-  var createGroupChildren = function createGroupChildren(optionGroup, i) {
+  var createGroupChildren = function createGroupChildren(optionGroup, i, style) {
     var groupChildren = props.getOptionGroupChildren(optionGroup);
     return groupChildren.map(function (item, j) {
       var key = i + '_' + j;
@@ -5123,6 +5234,7 @@ var AutoCompletePanel = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(f
         role: "option",
         "aria-selected": selected,
         className: "p-autocomplete-item",
+        style: style,
         onClick: function onClick(e) {
           return props.onItemClick(e, item);
         },
@@ -5133,14 +5245,20 @@ var AutoCompletePanel = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(f
   };
 
   var createItem = function createItem(suggestion, index) {
+    var scrollerOptions = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
+    var style = {
+      height: scrollerOptions.props ? scrollerOptions.props.itemSize : undefined
+    };
+
     if (props.optionGroupLabel) {
       var content = props.optionGroupTemplate ? ObjectUtils.getJSXElement(props.optionGroupTemplate, suggestion, index) : props.getOptionGroupLabel(suggestion);
-      var childrenContent = createGroupChildren(suggestion, index);
+      var childrenContent = createGroupChildren(suggestion, index, style);
       var key = index + '_' + getOptionGroupRenderKey(suggestion);
       return /*#__PURE__*/React.createElement(React.Fragment, {
         key: key
       }, /*#__PURE__*/React.createElement("li", {
-        className: "p-autocomplete-item-group"
+        className: "p-autocomplete-item-group",
+        style: style
       }, content), childrenContent);
     } else {
       var _content = props.itemTemplate ? ObjectUtils.getJSXElement(props.itemTemplate, suggestion, index) : props.field ? ObjectUtils.resolveFieldData(suggestion, props.field) : suggestion;
@@ -5150,6 +5268,7 @@ var AutoCompletePanel = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(f
         role: "option",
         "aria-selected": props.selectedItem === suggestion,
         className: "p-autocomplete-item",
+        style: style,
         onClick: function onClick(e) {
           return props.onItemClick(e, suggestion);
         }
@@ -5163,13 +5282,14 @@ var AutoCompletePanel = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(f
 
   var createContent = function createContent() {
     if (props.virtualScrollerOptions) {
-      var virtualScrollerProps = _objectSpread$u(_objectSpread$u({}, props.virtualScrollerOptions), {
-        style: _objectSpread$u(_objectSpread$u({}, props.virtualScrollerOptions.style), {
+      var virtualScrollerProps = _objectSpread$t(_objectSpread$t({}, props.virtualScrollerOptions), {
+        style: _objectSpread$t(_objectSpread$t({}, props.virtualScrollerOptions.style), {
           height: props.scrollHeight
         }),
+        autoSize: true,
         items: props.suggestions,
         itemTemplate: function itemTemplate(item, options) {
-          return item && createItem(item, options.index);
+          return item && createItem(item, options.index, options);
         },
         contentTemplate: function contentTemplate(options) {
           var className = classNames('p-autocomplete-items', options.className);
@@ -5198,7 +5318,7 @@ var AutoCompletePanel = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(f
   var createElement = function createElement() {
     var className = classNames('p-autocomplete-panel p-component', props.panelClassName);
 
-    var style = _objectSpread$u({
+    var style = _objectSpread$t({
       maxHeight: props.scrollHeight
     }, props.panelStyle || {});
 
@@ -5351,7 +5471,7 @@ var AutoComplete = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(functi
     }
 
     if (!preventInputFocus) {
-      inputRef.current.focus();
+      DomHandler.focus(inputRef.current);
       hide();
     }
   };
@@ -5449,7 +5569,7 @@ var AutoComplete = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(functi
 
   var onDropdownClick = function onDropdownClick(event) {
     if (props.dropdownAutoFocus) {
-      inputRef.current.focus();
+      DomHandler.focus(inputRef.current, props.dropdownAutoFocus);
     }
 
     if (props.dropdownMode === 'blank') search(event, '', 'dropdown');else if (props.dropdownMode === 'current') search(event, inputRef.current.value, 'dropdown');
@@ -5527,9 +5647,9 @@ var AutoComplete = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(functi
           if (highlightItem) {
             selectHighlightItem(event, highlightItem);
             hide();
+            event.preventDefault();
           }
 
-          event.preventDefault();
           break;
         //escape
 
@@ -5622,7 +5742,7 @@ var AutoComplete = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(functi
   };
 
   var onMultiContainerClick = function onMultiContainerClick(event) {
-    inputRef.current.focus();
+    DomHandler.focus(inputRef.current);
     props.onClick && props.onClick(event);
   };
 
@@ -5668,8 +5788,8 @@ var AutoComplete = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(functi
       setIdState(UniqueComponentId());
     }
 
-    if (props.autoFocus && inputRef.current) {
-      inputRef.current.focus();
+    if (props.autoFocus) {
+      DomHandler.focus(inputRef.current, props.autoFocus);
     }
   });
   useUpdateEffect(function () {
@@ -5941,7 +6061,13 @@ AutoComplete.defaultProps = {
 
 var Avatar = /*#__PURE__*/React.forwardRef(function (props, ref) {
   var createContent = function createContent() {
-    if (props.label) {
+    if (props.image) {
+      return /*#__PURE__*/React.createElement("img", {
+        src: props.image,
+        alt: props.imageAlt,
+        onError: props.onImageError
+      });
+    } else if (props.label) {
       return /*#__PURE__*/React.createElement("span", {
         className: "p-avatar-text"
       }, props.label);
@@ -5951,12 +6077,6 @@ var Avatar = /*#__PURE__*/React.forwardRef(function (props, ref) {
       }, {
         props: props
       });
-    } else if (props.image) {
-      return /*#__PURE__*/React.createElement("img", {
-        src: props.image,
-        alt: props.imageAlt,
-        onError: props.onImageError
-      });
     }
 
     return null;
@@ -6009,8 +6129,8 @@ AvatarGroup.defaultProps = {
 var Badge = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function (props, ref) {
   var otherProps = ObjectUtils.findDiffKeys(props, Badge.defaultProps);
   var className = classNames('p-badge p-component', _defineProperty({
-    'p-badge-no-gutter': props.value && String(props.value).length === 1,
-    'p-badge-dot': !props.value,
+    'p-badge-no-gutter': ObjectUtils.isNotEmpty(props.value) && String(props.value).length === 1,
+    'p-badge-dot': ObjectUtils.isEmpty(props.value),
     'p-badge-lg': props.size === 'large',
     'p-badge-xl': props.size === 'xlarge'
   }, "p-badge-".concat(props.severity), props.severity !== null), props.className);
@@ -6360,6 +6480,7 @@ 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 ignoreMaskChange = React.useRef(false);
 
   var _React$useState7 = React.useState('date'),
       _React$useState8 = _slicedToArray(_React$useState7, 2),
@@ -6479,7 +6600,7 @@ var Calendar = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function (
   var reFocusInputField = function reFocusInputField() {
     if (!props.inline && inputRef.current) {
       ignoreFocusFunctionality.current = true;
-      inputRef.current.focus();
+      DomHandler.focus(inputRef.current);
     }
   };
 
@@ -7052,7 +7173,11 @@ var Calendar = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function (
     var currentTime = getCurrentDateTime();
     var currentHour = currentTime.getHours();
     var newHour = currentHour >= 12 ? currentHour - 12 : currentHour + 12;
-    updateTime(event, newHour, currentTime.getMinutes(), currentTime.getSeconds(), currentTime.getMilliseconds());
+
+    if (validateHour(convertTo24Hour(newHour, !(currentHour > 11)), currentTime)) {
+      updateTime(event, newHour, currentTime.getMinutes(), currentTime.getSeconds(), currentTime.getMilliseconds());
+    }
+
     event.preventDefault();
   };
 
@@ -7089,6 +7214,14 @@ var Calendar = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function (
     return date instanceof Date && !isNaN(date);
   };
 
+  var convertTo24Hour = function convertTo24Hour(hour, pm) {
+    if (props.hourFormat == '12') {
+      return hour === 12 ? pm ? 12 : 0 : pm ? hour + 12 : hour;
+    }
+
+    return hour;
+  };
+
   var validateHour = function validateHour(hour, value) {
     var valid = true;
     var valueDateString = value ? value.toDateString() : null;
@@ -7253,6 +7386,56 @@ var Calendar = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function (
       viewStateChanged.current = true;
       setViewDateState(value);
     }
+
+    setCurrentMonth(value.getMonth());
+    setCurrentYear(value.getFullYear());
+  };
+
+  var setNavigationState = function setNavigationState(newViewDate) {
+    if (!props.showMinMaxRange || props.view !== 'date' || !overlayRef.current) {
+      return;
+    }
+
+    var navPrev = DomHandler.findSingle(overlayRef.current, '.p-datepicker-prev');
+    var navNext = DomHandler.findSingle(overlayRef.current, '.p-datepicker-next');
+
+    if (props.disabled) {
+      DomHandler.addClass(navPrev, 'p-disabled');
+      DomHandler.addClass(navNext, 'p-disabled');
+      return;
+    } // previous (check first day of month at 00:00:00)
+
+
+    if (props.minDate) {
+      var firstDayOfMonth = new Date(newViewDate.getTime());
+      firstDayOfMonth.setDate(1);
+      firstDayOfMonth.setHours(0);
+      firstDayOfMonth.setMinutes(0);
+      firstDayOfMonth.setSeconds(0);
+
+      if (props.minDate > firstDayOfMonth) {
+        DomHandler.addClass(navPrev, 'p-disabled');
+      } else {
+        DomHandler.removeClass(navPrev, 'p-disabled');
+      }
+    } // next (check last day of month at 11:59:59)
+
+
+    if (props.maxDate) {
+      var lastDayOfMonth = new Date(newViewDate.getTime());
+      lastDayOfMonth.setMonth(lastDayOfMonth.getMonth() + 1);
+      lastDayOfMonth.setDate(1);
+      lastDayOfMonth.setHours(0);
+      lastDayOfMonth.setMinutes(0);
+      lastDayOfMonth.setSeconds(0);
+      lastDayOfMonth.setSeconds(-1);
+
+      if (props.maxDate < lastDayOfMonth) {
+        DomHandler.addClass(navNext, 'p-disabled');
+      } else {
+        DomHandler.removeClass(navNext, 'p-disabled');
+      }
+    }
   };
 
   var onDateCellKeydown = function onDateCellKeydown(event, date, groupIndex) {
@@ -7580,6 +7763,8 @@ var Calendar = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function (
       setCurrentMonth(month);
       createMonthsMeta(month, currentYear);
       var currentDate = new Date(getCurrentDateTime().getTime());
+      currentDate.setDate(1); // #2948 always set to 1st of month
+
       currentDate.setMonth(month);
       currentDate.setYear(currentYear);
       setViewDateState(currentDate);
@@ -8690,7 +8875,11 @@ var Calendar = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function (
         mask: props.mask,
         readOnly: props.readOnlyInput || props.disabled,
         onChange: function onChange(e) {
-          return updateValueOnInput(e.originalEvent, e.value);
+          !ignoreMaskChange.current && updateValueOnInput(e.originalEvent, e.value);
+          ignoreMaskChange.current = false;
+        },
+        onBlur: function onBlur() {
+          ignoreMaskChange.current = true;
         }
       });
     }
@@ -8730,7 +8919,10 @@ var Calendar = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function (
     updateInputfield(props.value);
   }, [props.dateFormat, props.hourFormat, props.timeOnly, props.showSeconds, props.showMillisec]);
   useUpdateEffect(function () {
-    overlayRef.current && updateFocus();
+    if (overlayRef.current) {
+      setNavigationState(viewDateState);
+      updateFocus();
+    }
   });
   useUnmountEffect(function () {
     if (touchUIMask.current) {
@@ -9513,6 +9705,7 @@ Calendar.defaultProps = {
   minDate: null,
   maxDate: null,
   maxDateCount: null,
+  showMinMaxRange: false,
   showOtherMonths: true,
   selectOtherMonths: false,
   showButtonBar: false,
@@ -10579,7 +10772,7 @@ var CascadeSelect = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(funct
 
     updateSelectionPath();
     hide();
-    inputRef.current.focus();
+    DomHandler.focus(inputRef.current);
   };
 
   var onOptionGroupSelect = function onOptionGroupSelect(event) {
@@ -10665,7 +10858,7 @@ var CascadeSelect = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(funct
     }
 
     if (!overlayRef.current || !overlayRef.current.contains(event.target)) {
-      inputRef.current.focus();
+      DomHandler.focus(inputRef.current);
       overlayVisibleState ? hide() : show();
     }
   };
@@ -10719,7 +10912,7 @@ var CascadeSelect = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(funct
   var hide = function hide() {
     props.onBeforeHide && props.onBeforeHide();
     setOverlayVisibleState(false);
-    inputRef.current.focus();
+    DomHandler.focus(inputRef.current);
   };
 
   var onOverlayEnter = function onOverlayEnter() {
@@ -10911,13 +11104,19 @@ var Chart = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function (pro
         chartRef.current = null;
       }
 
-      if (module && module["default"]) {
-        chartRef.current = new module["default"](canvasRef.current, {
-          type: props.type,
-          data: props.data,
-          options: props.options,
-          plugins: props.plugins
-        });
+      var configuration = {
+        type: props.type,
+        data: props.data,
+        options: props.options,
+        plugins: props.plugins
+      };
+
+      if (module) {
+        if (module["default"]) {
+          chartRef.current = new module["default"](canvasRef.current, configuration);
+        } else {
+          chartRef.current = new module(canvasRef.current, configuration);
+        }
       }
     });
   };
@@ -11011,7 +11210,7 @@ var Checkbox = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function (
         }
       });
       inputRef.current.checked = !_checked;
-      inputRef.current.focus();
+      DomHandler.focus(inputRef.current);
     }
   };
 
@@ -11272,12 +11471,17 @@ var Chips = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function (pro
   };
 
   var onWrapperClick = function onWrapperClick() {
-    inputRef.current.focus();
+    DomHandler.focus(inputRef.current);
   };
 
   var onKeyDown = function onKeyDown(event) {
     var inputValue = event.target.value;
     var values = props.value || [];
+    props.onKeyDown && props.onKeyDown(event); // do not continue if the user defined keydown wants to prevent
+
+    if (event.defaultPrevented) {
+      return;
+    }
 
     switch (event.which) {
       //backspace
@@ -11297,6 +11501,10 @@ var Chips = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function (pro
         break;
 
       default:
+        if (props.keyfilter) {
+          KeyFilter.onKeyPress(event, props.keyfilter);
+        }
+
         if (isMaxedOut()) {
           event.preventDefault();
         } else if (props.separator === ',' && event.which === 188) {
@@ -11330,6 +11538,10 @@ var Chips = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function (pro
     if (props.separator) {
       var pastedData = (event.clipboardData || window['clipboardData']).getData('Text');
 
+      if (props.keyfilter) {
+        KeyFilter.onPaste(event, props.keyfilter);
+      }
+
       if (pastedData) {
         var values = props.value || [];
         var pastedValues = pastedData.split(props.separator);
@@ -11472,11 +11684,13 @@ Chips.defaultProps = {
   separator: null,
   allowDuplicate: true,
   itemTemplate: null,
+  keyfilter: null,
   onAdd: null,
   onRemove: null,
   onChange: null,
   onFocus: null,
-  onBlur: null
+  onBlur: null,
+  onKeyDown: null
 };
 
 var ColorPickerPanel = /*#__PURE__*/React.forwardRef(function (props, ref) {
@@ -12522,7 +12736,7 @@ var Dialog = /*#__PURE__*/React.forwardRef(function (props, ref) {
         return param.hasBlockScroll;
       });
 
-      if (!hasBlockScroll) {
+      if (hasBlockScroll) {
         DomHandler.removeClass(document.body, 'p-overflow-hidden');
       }
     } else if (props.blockScroll || props.maximizable && maximized) {
@@ -12706,7 +12920,7 @@ var Dialog = /*#__PURE__*/React.forwardRef(function (props, ref) {
 
   var createResizer = function createResizer() {
     if (props.resizable) {
-      return /*#__PURE__*/React.createElement("div", {
+      return /*#__PURE__*/React.createElement("span", {
         className: "p-resizable-handle",
         style: {
           zIndex: 90
@@ -12831,19 +13045,19 @@ Dialog.defaultProps = {
   onMaskClick: null
 };
 
-function ownKeys$t(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function ownKeys$s(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 
-function _objectSpread$t(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$t(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$t(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+function _objectSpread$s(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$s(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$s(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 var confirmDialog = function confirmDialog() {
   var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
-  props = _objectSpread$t(_objectSpread$t({}, props), {
+  props = _objectSpread$s(_objectSpread$s({}, props), {
     visible: props.visible === undefined ? true : props.visible
   });
   props.visible && OverlayService.emit('confirm-dialog', props);
 
   var show = function show() {
     var updatedProps = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
-    OverlayService.emit('confirm-dialog', _objectSpread$t(_objectSpread$t(_objectSpread$t({}, props), updatedProps), {
+    OverlayService.emit('confirm-dialog', _objectSpread$s(_objectSpread$s(_objectSpread$s({}, props), updatedProps), {
       visible: true
     }));
   };
@@ -13033,19 +13247,19 @@ ConfirmDialog.defaultProps = {
   reject: null
 };
 
-function ownKeys$s(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function ownKeys$r(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 
-function _objectSpread$s(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$s(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$s(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+function _objectSpread$r(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$r(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$r(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 var confirmPopup = function confirmPopup() {
   var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
-  props = _objectSpread$s(_objectSpread$s({}, props), {
+  props = _objectSpread$r(_objectSpread$r({}, props), {
     visible: props.visible === undefined ? true : props.visible
   });
   props.visible && OverlayService.emit('confirm-popup', props);
 
   var show = function show() {
     var updatedProps = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
-    OverlayService.emit('confirm-popup', _objectSpread$s(_objectSpread$s(_objectSpread$s({}, props), updatedProps), {
+    OverlayService.emit('confirm-popup', _objectSpread$r(_objectSpread$r(_objectSpread$r({}, props), updatedProps), {
       visible: true
     }));
   };
@@ -13499,6 +13713,7 @@ var ContextMenuSub = /*#__PURE__*/React.memo(function (props) {
     return /*#__PURE__*/React.createElement("li", {
       key: key,
       role: "none",
+      id: item.id,
       className: className,
       style: item.style,
       onMouseEnter: function onMouseEnter(event) {
@@ -13981,9 +14196,9 @@ DataScroller.defaultProps = {
   lazy: false
 };
 
-function ownKeys$r(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function ownKeys$q(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 
-function _objectSpread$r(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$r(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$r(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+function _objectSpread$q(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$q(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$q(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 var CurrentPageReport = /*#__PURE__*/React.memo(function (props) {
   var report = {
     currentPage: props.page + 1,
@@ -13999,7 +14214,7 @@ var CurrentPageReport = /*#__PURE__*/React.memo(function (props) {
   }, text);
 
   if (props.template) {
-    var defaultOptions = _objectSpread$r(_objectSpread$r({}, report), {
+    var defaultOptions = _objectSpread$q(_objectSpread$q({}, report), {
       className: 'p-paginator-current',
       element: element,
       props: props
@@ -14058,9 +14273,9 @@ FirstPageLink.defaultProps = {
   template: null
 };
 
-function ownKeys$q(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function ownKeys$p(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 
-function _objectSpread$q(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$q(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$q(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+function _objectSpread$p(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$p(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$p(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 var InputNumber = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function (props, ref) {
   var _React$useState = React.useState(false),
       _React$useState2 = _slicedToArray(_React$useState, 2),
@@ -14138,7 +14353,7 @@ var InputNumber = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(functio
   };
 
   var getDecimalExpression = function getDecimalExpression() {
-    var formatter = new Intl.NumberFormat(props.locale, _objectSpread$q(_objectSpread$q({}, getOptions()), {}, {
+    var formatter = new Intl.NumberFormat(props.locale, _objectSpread$p(_objectSpread$p({}, getOptions()), {}, {
       useGrouping: false
     }));
     return new RegExp("[".concat(formatter.format(1.1).replace(_currency.current, '').trim().replace(_numeral.current, ''), "]"), 'g');
@@ -14278,7 +14493,7 @@ var InputNumber = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(functio
 
   var onUpButtonMouseDown = function onUpButtonMouseDown(event) {
     if (!props.disabled && !props.readOnly) {
-      props.autoFocus && inputRef.current.focus();
+      props.autoFocus && DomHandler.focus(inputRef.current, props.autoFocus);
       repeat(event, null, 1);
       event.preventDefault();
     }
@@ -14331,7 +14546,7 @@ var InputNumber = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(functio
 
   var onDownButtonMouseDown = function onDownButtonMouseDown(event) {
     if (!props.disabled && !props.readOnly) {
-      props.autoFocus && inputRef.current.focus();
+      props.autoFocus && DomHandler.focus(inputRef.current, props.autoFocus);
       repeat(event, null, -1);
       event.preventDefault();
     }
@@ -15431,6 +15646,7 @@ var DropdownItem = /*#__PURE__*/React.memo(function (props) {
   var content = props.template ? ObjectUtils.getJSXElement(props.template, props.option) : props.label;
   return /*#__PURE__*/React.createElement("li", {
     className: className,
+    style: props.style,
     onClick: onClick,
     "aria-label": props.label,
     key: props.label,
@@ -15440,9 +15656,9 @@ var DropdownItem = /*#__PURE__*/React.memo(function (props) {
 });
 DropdownItem.displayName = 'DropdownItem';
 
-function ownKeys$p(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function ownKeys$o(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 
-function _objectSpread$p(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$p(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$p(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+function _objectSpread$o(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$o(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$o(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 var DropdownPanel = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function (props, ref) {
   var virtualScrollerRef = React.useRef(null);
   var filterInputRef = React.useRef(null);
@@ -15465,7 +15681,7 @@ var DropdownPanel = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(funct
   var onEntered = function onEntered() {
     props.onEntered(function () {
       if (props.filter && props.filterInputAutoFocus) {
-        filterInputRef.current.focus();
+        DomHandler.focus(filterInputRef.current, false);
       }
     });
   };
@@ -15475,7 +15691,7 @@ var DropdownPanel = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(funct
     props.onFilterInputChange && props.onFilterInputChange(event);
   };
 
-  var createGroupChildren = function createGroupChildren(optionGroup) {
+  var createGroupChildren = function createGroupChildren(optionGroup, style) {
     var groupChildren = props.getOptionGroupChildren(optionGroup);
     return groupChildren.map(function (option, j) {
       var optionLabel = props.getOptionLabel(option);
@@ -15485,6 +15701,7 @@ var DropdownPanel = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(funct
         key: optionKey,
         label: optionLabel,
         option: option,
+        style: style,
         template: props.itemTemplate,
         selected: props.isSelected(option),
         disabled: disabled,
@@ -15501,14 +15718,20 @@ var DropdownPanel = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(funct
   };
 
   var createItem = function createItem(option, index) {
+    var scrollerOptions = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
+    var style = {
+      height: scrollerOptions.props ? scrollerOptions.props.itemSize : undefined
+    };
+
     if (props.optionGroupLabel) {
       var groupContent = props.optionGroupTemplate ? ObjectUtils.getJSXElement(props.optionGroupTemplate, option, index) : props.getOptionGroupLabel(option);
-      var groupChildrenContent = createGroupChildren(option);
+      var groupChildrenContent = createGroupChildren(option, style);
       var key = index + '_' + props.getOptionGroupRenderKey(option);
       return /*#__PURE__*/React.createElement(React.Fragment, {
         key: key
       }, /*#__PURE__*/React.createElement("li", {
-        className: "p-dropdown-item-group"
+        className: "p-dropdown-item-group",
+        style: style
       }, groupContent), groupChildrenContent);
     } else {
       var optionLabel = props.getOptionLabel(option);
@@ -15518,6 +15741,7 @@ var DropdownPanel = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(funct
         key: optionKey,
         label: optionLabel,
         option: option,
+        style: style,
         template: props.itemTemplate,
         selected: props.isSelected(option),
         disabled: disabled,
@@ -15542,7 +15766,7 @@ var DropdownPanel = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(funct
         className: "p-dropdown-filter-clear-icon pi pi-times",
         onClick: function onClick() {
           return props.onFilterClearIconClick(function () {
-            return filterInputRef.current.focus();
+            return DomHandler.focus(filterInputRef.current);
           });
         }
       });
@@ -15580,19 +15804,20 @@ var DropdownPanel = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(funct
 
   var createContent = function createContent() {
     if (props.virtualScrollerOptions) {
-      var virtualScrollerProps = _objectSpread$p(_objectSpread$p({}, props.virtualScrollerOptions), {
-        style: _objectSpread$p(_objectSpread$p({}, props.virtualScrollerOptions.style), {
+      var virtualScrollerProps = _objectSpread$o(_objectSpread$o({}, props.virtualScrollerOptions), {
+        style: _objectSpread$o(_objectSpread$o({}, props.virtualScrollerOptions.style), {
           height: props.scrollHeight
         }),
         className: classNames('p-dropdown-items-wrapper', props.virtualScrollerOptions.className),
         items: props.visibleOptions,
+        autoSize: true,
         onLazyLoad: function onLazyLoad(event) {
-          return props.virtualScrollerOptions.onLazyLoad(_objectSpread$p(_objectSpread$p({}, event), {
+          return props.virtualScrollerOptions.onLazyLoad(_objectSpread$o(_objectSpread$o({}, event), {
             filter: props.filterValue
           }));
         },
         itemTemplate: function itemTemplate(item, options) {
-          return item && createItem(item, options.index);
+          return item && createItem(item, options.index, options);
         },
         contentTemplate: function contentTemplate(options) {
           var className = classNames('p-dropdown-items', options.className);
@@ -15657,9 +15882,9 @@ var DropdownPanel = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(funct
 }));
 DropdownPanel.displayName = 'DropdownPanel';
 
-function ownKeys$o(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function ownKeys$n(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 
-function _objectSpread$o(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$o(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$o(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+function _objectSpread$n(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$n(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$n(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 
 function _createForOfIteratorHelper$b(o, allowArrayLike) { var it = typeof Symbol !== "undefined" && o[Symbol.iterator] || o["@@iterator"]; if (!it) { if (Array.isArray(o) || (it = _unsupportedIterableToArray$b(o)) || allowArrayLike && o && typeof o.length === "number") { if (it) o = it; var i = 0; var F = function F() {}; return { s: F, n: function n() { if (i >= o.length) return { done: true }; return { done: false, value: o[i++] }; }, e: function e(_e) { throw _e; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var normalCompletion = true, didErr = false, err; return { s: function s() { it = it.call(o); }, n: function n() { var step = it.next(); normalCompletion = step.done; return step; }, e: function e(_e2) { didErr = true; err = _e2; }, f: function f() { try { if (!normalCompletion && it["return"] != null) it["return"](); } finally { if (didErr) throw err; } } }; }
 
@@ -15727,7 +15952,7 @@ var Dropdown = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function (
             var filteredSubOptions = FilterService.filter(getOptionGroupChildren(optgroup), searchFields, filterValue, props.filterMatchMode, props.filterLocale);
 
             if (filteredSubOptions && filteredSubOptions.length) {
-              filteredGroups.push(_objectSpread$o(_objectSpread$o({}, optgroup), {
+              filteredGroups.push(_objectSpread$n(_objectSpread$n({}, optgroup), {
                 items: filteredSubOptions
               }));
             }
@@ -15759,7 +15984,7 @@ var Dropdown = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function (
     if (DomHandler.hasClass(event.target, 'p-dropdown-clear-icon') || event.target.tagName === 'INPUT') {
       return;
     } else if (!overlayRef.current || !(overlayRef.current && overlayRef.current.contains(event.target))) {
-      focusInputRef.current.focus();
+      DomHandler.focus(focusInputRef.current);
       overlayVisibleState ? hide() : show();
     }
   };
@@ -16032,7 +16257,7 @@ var Dropdown = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function (
 
     if (!option.disabled) {
       selectItem(event);
-      focusInputRef.current.focus();
+      DomHandler.focus(focusInputRef.current);
     }
 
     hide();
@@ -16101,11 +16326,13 @@ var Dropdown = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function (
     }
   };
 
-  var getSelectedOptionIndex = function getSelectedOptionIndex() {
-    if (props.value != null && visibleOptions) {
+  var getSelectedOptionIndex = function getSelectedOptionIndex(options) {
+    options = options || visibleOptions;
+
+    if (props.value != null && options) {
       if (props.optionGroupLabel) {
-        for (var i = 0; i < visibleOptions.length; i++) {
-          var selectedOptionIndex = findOptionIndexInList(props.value, getOptionGroupChildren(visibleOptions[i]));
+        for (var i = 0; i < options.length; i++) {
+          var selectedOptionIndex = findOptionIndexInList(props.value, getOptionGroupChildren(options[i]));
 
           if (selectedOptionIndex !== -1) {
             return {
@@ -16115,7 +16342,7 @@ var Dropdown = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function (
           }
         }
       } else {
-        return findOptionIndexInList(props.value, visibleOptions);
+        return findOptionIndexInList(props.value, options);
       }
     }
 
@@ -16232,16 +16459,16 @@ var Dropdown = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function (
   };
 
   var getSelectedOption = function getSelectedOption() {
-    var index = getSelectedOptionIndex();
-    return index !== -1 ? props.optionGroupLabel ? getOptionGroupChildren(visibleOptions[index.group])[index.option] : visibleOptions[index] : null;
+    var index = getSelectedOptionIndex(props.options);
+    return index !== -1 ? props.optionGroupLabel ? getOptionGroupChildren(props.options[index.group])[index.option] : props.options[index] : null;
   };
 
   React.useEffect(function () {
     ObjectUtils.combinedRefs(inputRef, props.inputRef);
   }, [inputRef, props.inputRef]);
   useMountEffect(function () {
-    if (props.autoFocus && focusInputRef.current) {
-      focusInputRef.current.focus();
+    if (props.autoFocus) {
+      DomHandler.focus(focusInputRef.current, props.autoFocus);
     }
   });
   useUpdateEffect(function () {
@@ -16894,7 +17121,7 @@ var RowRadioButton = /*#__PURE__*/React.memo(function (props) {
   var onClick = function onClick(event) {
     if (!props.disabled) {
       props.onChange(event);
-      inputRef.current.focus();
+      DomHandler.focus(inputRef.current);
     }
   };
 
@@ -16942,9 +17169,9 @@ var RowRadioButton = /*#__PURE__*/React.memo(function (props) {
 });
 RowRadioButton.displayName = 'RowRadioButton';
 
-function ownKeys$n(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function ownKeys$m(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 
-function _objectSpread$n(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$n(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$n(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+function _objectSpread$m(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$m(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$m(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 var BodyCell = /*#__PURE__*/React.memo(function (props) {
   var _React$useState = React.useState(props.editing),
       _React$useState2 = _slicedToArray(_React$useState, 2),
@@ -17039,7 +17266,7 @@ var BodyCell = /*#__PURE__*/React.memo(function (props) {
 
   var getCellCallbackParams = function getCellCallbackParams(event) {
     var params = getCellParams();
-    return _objectSpread$n({
+    return _objectSpread$m({
       originalEvent: event
     }, params);
   };
@@ -17086,7 +17313,7 @@ var BodyCell = /*#__PURE__*/React.memo(function (props) {
     var newRowData = editingRowDataState;
     var newValue = resolveFieldData(newRowData);
 
-    var params = _objectSpread$n(_objectSpread$n({}, callbackParams), {}, {
+    var params = _objectSpread$m(_objectSpread$m({}, callbackParams), {}, {
       newRowData: newRowData,
       newValue: newValue
     });
@@ -17167,7 +17394,7 @@ var BodyCell = /*#__PURE__*/React.memo(function (props) {
 
   var updateStickyPosition = function updateStickyPosition() {
     if (getColumnProp('frozen')) {
-      var styleObject = _objectSpread$n({}, styleObjectState);
+      var styleObject = _objectSpread$m({}, styleObjectState);
 
       var align = getColumnProp('alignFrozen');
 
@@ -17197,7 +17424,7 @@ var BodyCell = /*#__PURE__*/React.memo(function (props) {
   };
 
   var editorCallback = function editorCallback(val) {
-    var editingRowData = _objectSpread$n({}, editingRowDataState);
+    var editingRowData = _objectSpread$m({}, editingRowDataState);
 
     editingRowData[field] = val;
     setEditingRowDataState(editingRowData); // update editing meta for complete methods on row mode
@@ -17429,7 +17656,7 @@ var BodyCell = /*#__PURE__*/React.memo(function (props) {
     if (props.editMode === 'cell' || props.editMode === 'row') {
       var callbackParams = getCellCallbackParams();
 
-      var params = _objectSpread$n(_objectSpread$n({}, callbackParams), {}, {
+      var params = _objectSpread$m(_objectSpread$m({}, callbackParams), {}, {
         editing: editingState,
         editingKey: editingKey
       });
@@ -17661,9 +17888,9 @@ var BodyCell = /*#__PURE__*/React.memo(function (props) {
 });
 BodyCell.displayName = 'BodyCell';
 
-function ownKeys$m(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function ownKeys$l(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 
-function _objectSpread$m(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$m(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$m(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+function _objectSpread$l(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$l(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$l(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 var BodyRow = /*#__PURE__*/React.memo(function (props) {
   var _React$useState = React.useState(false),
       _React$useState2 = _slicedToArray(_React$useState, 2),
@@ -17905,7 +18132,7 @@ var BodyRow = /*#__PURE__*/React.memo(function (props) {
 
       if (dataKey) {
         var dataKeyValue = String(ObjectUtils.resolveFieldData(data, dataKey));
-        editingRows = props.editingRows ? _objectSpread$m({}, props.editingRows) : {};
+        editingRows = props.editingRows ? _objectSpread$l({}, props.editingRows) : {};
 
         if (!isEditing) {
           delete editingRows[dataKeyValue]; // if the key value was changed, stop editing for the new key value too
@@ -18054,12 +18281,16 @@ var BodyRow = /*#__PURE__*/React.memo(function (props) {
     }),
     'p-row-odd': props.index % 2 !== 0
   });
+  var style = {
+    height: props.virtualScrollerOptions ? props.virtualScrollerOptions.itemSize : undefined
+  };
   var content = createContent();
   var tabIndex = getTabIndex();
   return /*#__PURE__*/React.createElement("tr", {
     role: "row",
     tabIndex: tabIndex,
     className: className,
+    style: style,
     onMouseDown: onMouseDown,
     onMouseUp: onMouseUp,
     onClick: onClick,
@@ -18098,17 +18329,17 @@ RowTogglerButton.displayName = 'RowTogglerButton';
 
 var _excluded = ["originalEvent"];
 
-function ownKeys$l(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function ownKeys$k(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 
-function _objectSpread$l(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$l(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$l(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
-var TableBody = /*#__PURE__*/React.memo(function (props) {
+function _objectSpread$k(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$k(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$k(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+var TableBody = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function (props, ref) {
   var _React$useState = React.useState({}),
       _React$useState2 = _slicedToArray(_React$useState, 2),
       rowGroupHeaderStyleObjectState = _React$useState2[0],
       setRowGroupHeaderStyleObjectState = _React$useState2[1];
 
   var elementRef = React.useRef(null);
-  var ref = React.useCallback(function (el) {
+  var refCallback = React.useCallback(function (el) {
     elementRef.current = el;
     props.virtualScrollerContentRef && props.virtualScrollerContentRef(el);
   }, [props]);
@@ -18542,7 +18773,7 @@ var TableBody = /*#__PURE__*/React.memo(function (props) {
   };
 
   var onSelect = function onSelect(event) {
-    if (allowCellSelection()) props.onCellSelect && props.onCellSelect(_objectSpread$l(_objectSpread$l({
+    if (allowCellSelection()) props.onCellSelect && props.onCellSelect(_objectSpread$k(_objectSpread$k({
       originalEvent: event.originalEvent
     }, event.data), {}, {
       type: event.type
@@ -18550,7 +18781,7 @@ var TableBody = /*#__PURE__*/React.memo(function (props) {
   };
 
   var onUnselect = function onUnselect(event) {
-    if (allowCellSelection()) props.onCellUnselect && props.onCellUnselect(_objectSpread$l(_objectSpread$l({
+    if (allowCellSelection()) props.onCellUnselect && props.onCellUnselect(_objectSpread$k(_objectSpread$k({
       originalEvent: event.originalEvent
     }, event.data), {}, {
       type: event.type
@@ -18619,12 +18850,12 @@ var TableBody = /*#__PURE__*/React.memo(function (props) {
         anchorRowFirst.current = props.first;
 
         if (isSingleSelection()) {
-          onSingleSelection(_objectSpread$l(_objectSpread$l({}, event), {}, {
+          onSingleSelection(_objectSpread$k(_objectSpread$k({}, event), {}, {
             toggleable: toggleable,
             type: 'row'
           }));
         } else {
-          onMultipleSelection(_objectSpread$l(_objectSpread$l({}, event), {}, {
+          onMultipleSelection(_objectSpread$k(_objectSpread$k({}, event), {}, {
             toggleable: toggleable,
             type: 'row'
           }));
@@ -18704,7 +18935,7 @@ var TableBody = /*#__PURE__*/React.memo(function (props) {
 
     if (hasDataKey) {
       var dataKeyValue = String(ObjectUtils.resolveFieldData(event.data, dataKey));
-      expandedRows = props.expandedRows ? _objectSpread$l({}, props.expandedRows) : {};
+      expandedRows = props.expandedRows ? _objectSpread$k({}, props.expandedRows) : {};
 
       if (expandedRows[dataKeyValue] != null) {
         delete expandedRows[dataKeyValue];
@@ -18762,9 +18993,12 @@ var TableBody = /*#__PURE__*/React.memo(function (props) {
   var onRowDragStart = function onRowDragStart(e) {
     var event = e.originalEvent,
         index = e.index;
-    rowDragging.current = true;
-    draggedRowIndex.current = index;
-    event.dataTransfer.setData('text', 'b'); // For firefox
+
+    if (allowRowDrag(event)) {
+      rowDragging.current = true;
+      draggedRowIndex.current = index;
+      event.dataTransfer.setData('text', 'b'); // For firefox
+    }
   };
 
   var onRowDragOver = function onRowDragOver(e) {
@@ -18840,14 +19074,14 @@ var TableBody = /*#__PURE__*/React.memo(function (props) {
   };
 
   var onRadioChange = function onRadioChange(event) {
-    onSingleSelection(_objectSpread$l(_objectSpread$l({}, event), {}, {
+    onSingleSelection(_objectSpread$k(_objectSpread$k({}, event), {}, {
       toggleable: true,
       type: 'radio'
     }));
   };
 
   var onCheckboxChange = function onCheckboxChange(event) {
-    onMultipleSelection(_objectSpread$l(_objectSpread$l({}, event), {}, {
+    onMultipleSelection(_objectSpread$k(_objectSpread$k({}, event), {}, {
       toggleable: true,
       type: 'checkbox'
     }));
@@ -19160,15 +19394,15 @@ var TableBody = /*#__PURE__*/React.memo(function (props) {
   var className = classNames('p-datatable-tbody', props.className);
   var content = props.empty ? createEmptyContent() : createContent();
   return /*#__PURE__*/React.createElement("tbody", {
-    ref: ref,
+    ref: refCallback,
     className: className
   }, content);
-});
+}));
 TableBody.displayName = 'TableBody';
 
-function ownKeys$k(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function ownKeys$j(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 
-function _objectSpread$k(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$k(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$k(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+function _objectSpread$j(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$j(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$j(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 var FooterCell = /*#__PURE__*/React.memo(function (props) {
   var _React$useState = React.useState({}),
       _React$useState2 = _slicedToArray(_React$useState, 2),
@@ -19189,7 +19423,7 @@ var FooterCell = /*#__PURE__*/React.memo(function (props) {
 
   var updateStickyPosition = function updateStickyPosition() {
     if (getColumnProp('frozen')) {
-      var styleObject = _objectSpread$k({}, styleObjectState);
+      var styleObject = _objectSpread$j({}, styleObjectState);
 
       var _align = getColumnProp('alignFrozen');
 
@@ -19213,7 +19447,8 @@ var FooterCell = /*#__PURE__*/React.memo(function (props) {
         styleObject['left'] = left + 'px';
       }
 
-      setStyleObjectState(styleObject);
+      var isSameStyle = styleObjectState['left'] === styleObject['left'] && styleObjectState['right'] === styleObject['right'];
+      !isSameStyle && setStyleObjectState(styleObject);
     }
   };
 
@@ -19294,9 +19529,9 @@ var TableFooter = /*#__PURE__*/React.memo(function (props) {
 });
 TableFooter.displayName = 'TableFooter';
 
-function ownKeys$j(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function ownKeys$i(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 
-function _objectSpread$j(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$j(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$j(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+function _objectSpread$i(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$i(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$i(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 var ColumnFilter = /*#__PURE__*/React.memo(function (props) {
   var _React$useState = React.useState(false),
       _React$useState2 = _slicedToArray(_React$useState, 2),
@@ -19429,7 +19664,7 @@ var ColumnFilter = /*#__PURE__*/React.memo(function (props) {
     var filterClearCallback = getColumnProp('onFilterClear');
     var defaultConstraint = getDefaultConstraint();
 
-    var filters = _objectSpread$j({}, props.filters);
+    var filters = _objectSpread$i({}, props.filters);
 
     if (filters[field].operator) {
       filters[field].constraints.splice(1);
@@ -19494,7 +19729,7 @@ var ColumnFilter = /*#__PURE__*/React.memo(function (props) {
   };
 
   var onInputChange = function onInputChange(event, index) {
-    var filters = _objectSpread$j({}, props.filters);
+    var filters = _objectSpread$i({}, props.filters);
 
     var value = event.target.value;
 
@@ -19514,7 +19749,7 @@ var ColumnFilter = /*#__PURE__*/React.memo(function (props) {
   var onRowMatchModeChange = function onRowMatchModeChange(matchMode) {
     var filterMatchModeChangeCallback = getColumnProp('onFilterMatchModeChange');
 
-    var filters = _objectSpread$j({}, props.filters);
+    var filters = _objectSpread$i({}, props.filters);
 
     filters[field].matchMode = matchMode;
     filterMatchModeChangeCallback && filterMatchModeChangeCallback({
@@ -19565,7 +19800,7 @@ var ColumnFilter = /*#__PURE__*/React.memo(function (props) {
     var filterOperationChangeCallback = getColumnProp('onFilterOperatorChange');
     var value = e.value;
 
-    var filters = _objectSpread$j({}, props.filters);
+    var filters = _objectSpread$i({}, props.filters);
 
     filters[field].operator = value;
     props.onFilterChange(filters);
@@ -19582,7 +19817,7 @@ var ColumnFilter = /*#__PURE__*/React.memo(function (props) {
   var onMenuMatchModeChange = function onMenuMatchModeChange(value, index) {
     var filterMatchModeChangeCallback = getColumnProp('onFilterMatchModeChange');
 
-    var filters = _objectSpread$j({}, props.filters);
+    var filters = _objectSpread$i({}, props.filters);
 
     filters[field].constraints[index].matchMode = value;
     props.onFilterChange(filters);
@@ -19601,7 +19836,7 @@ var ColumnFilter = /*#__PURE__*/React.memo(function (props) {
     var filterConstraintAddCallback = getColumnProp('onFilterConstraintAdd');
     var defaultConstraint = getDefaultConstraint();
 
-    var filters = _objectSpread$j({}, props.filters);
+    var filters = _objectSpread$i({}, props.filters);
 
     var newConstraint = {
       value: null,
@@ -19622,7 +19857,7 @@ var ColumnFilter = /*#__PURE__*/React.memo(function (props) {
   var removeConstraint = function removeConstraint(index) {
     var filterConstraintRemoveCallback = getColumnProp('onFilterConstraintRemove');
 
-    var filters = _objectSpread$j({}, props.filters);
+    var filters = _objectSpread$i({}, props.filters);
 
     var removedConstraint = filters[field].constraints.splice(index, 1);
     filterConstraintRemoveCallback && filterConstraintRemoveCallback({
@@ -19735,7 +19970,7 @@ var ColumnFilter = /*#__PURE__*/React.memo(function (props) {
   var filterCallback = function filterCallback(value) {
     var index = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;
 
-    var filters = _objectSpread$j({}, props.filters);
+    var filters = _objectSpread$i({}, props.filters);
 
     var meta = filters[field];
     props.display === 'menu' && meta && meta.operator ? filters[field].constraints[index].value = value : filters[field].value = value;
@@ -20140,9 +20375,9 @@ var HeaderCheckbox = /*#__PURE__*/React.memo(function (props) {
 });
 HeaderCheckbox.displayName = 'HeaderCheckbox';
 
-function ownKeys$i(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function ownKeys$h(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 
-function _objectSpread$i(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$i(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$i(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+function _objectSpread$h(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$h(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$h(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 var HeaderCell = /*#__PURE__*/React.memo(function (props) {
   var _React$useState = React.useState({}),
       _React$useState2 = _slicedToArray(_React$useState, 2),
@@ -20218,7 +20453,7 @@ var HeaderCell = /*#__PURE__*/React.memo(function (props) {
 
   var updateStickyPosition = function updateStickyPosition() {
     if (getColumnProp('frozen')) {
-      var styleObject = _objectSpread$i({}, styleObjectState);
+      var styleObject = _objectSpread$h({}, styleObjectState);
 
       var align = getColumnProp('alignFrozen');
 
@@ -20450,14 +20685,15 @@ var HeaderCell = /*#__PURE__*/React.memo(function (props) {
     var sortMeta = getSortMeta();
     var style = getStyle();
     var align = getColumnProp('alignHeader') || getColumnProp('align');
+    var frozen = getColumnProp('frozen');
     var className = classNames(getColumnProp('headerClassName'), getColumnProp('className'), _defineProperty({
       'p-sortable-column': getColumnProp('sortable'),
       'p-resizable-column': props.resizableColumns && getColumnProp('resizeable'),
       'p-highlight': sortMeta.sorted,
-      'p-frozen-column': getColumnProp('frozen'),
+      'p-frozen-column': frozen,
       'p-selection-column': getColumnProp('selectionMode'),
       'p-sortable-disabled': getColumnProp('sortable') && _isSortableDisabled,
-      'p-reorderable-column': props.reorderableColumns && getColumnProp('reorderable')
+      'p-reorderable-column': props.reorderableColumns && getColumnProp('reorderable') && !frozen
     }, "p-align-".concat(align), !!align));
     var tabIndex = getColumnProp('sortable') && !_isSortableDisabled ? props.tabIndex : null;
     var colSpan = getColumnProp('colSpan');
@@ -20489,9 +20725,9 @@ var HeaderCell = /*#__PURE__*/React.memo(function (props) {
 });
 HeaderCell.displayName = 'HeaderCell';
 
-function ownKeys$h(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function ownKeys$g(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 
-function _objectSpread$h(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$h(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$h(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+function _objectSpread$g(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$g(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$g(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 var TableHeader = /*#__PURE__*/React.memo(function (props) {
   var _React$useState = React.useState([]),
       _React$useState2 = _slicedToArray(_React$useState, 2),
@@ -20633,7 +20869,7 @@ var TableHeader = /*#__PURE__*/React.memo(function (props) {
             selectionMode = _col$props.selectionMode,
             filter = _col$props.filter;
 
-        var colStyle = _objectSpread$h(_objectSpread$h({}, filterHeaderStyle || {}), style || {});
+        var colStyle = _objectSpread$g(_objectSpread$g({}, filterHeaderStyle || {}), style || {});
 
         var colClassName = classNames('p-filter-column', filterHeaderClassName, className, {
           'p-frozen-column': frozen
@@ -20679,9 +20915,9 @@ var TableHeader = /*#__PURE__*/React.memo(function (props) {
 });
 TableHeader.displayName = 'TableHeader';
 
-function ownKeys$g(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function ownKeys$f(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 
-function _objectSpread$g(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$g(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$g(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+function _objectSpread$f(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$f(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$f(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 var DataTable = /*#__PURE__*/React.forwardRef(function (props, ref) {
   var _React$useState = React.useState(props.first),
       _React$useState2 = _slicedToArray(_React$useState, 2),
@@ -20746,6 +20982,9 @@ var DataTable = /*#__PURE__*/React.forwardRef(function (props, ref) {
   var elementRef = React.useRef(null);
   var tableRef = React.useRef(null);
   var wrapperRef = React.useRef(null);
+  var bodyRef = React.useRef(null);
+  var frozenBodyRef = React.useRef(null);
+  var virtualScrollerRef = React.useRef(null);
   var reorderIndicatorUpRef = React.useRef(null);
   var reorderIndicatorDownRef = React.useRef(null);
   var colReorderIconWidth = React.useRef(null);
@@ -21179,13 +21418,13 @@ var DataTable = /*#__PURE__*/React.forwardRef(function (props, ref) {
         e.rowIndex;
         var editing = e.editing;
 
-    var editingMeta = _objectSpread$g({}, editingMetaState);
+    var editingMeta = _objectSpread$f({}, editingMetaState);
 
     var meta = editingMeta[editingKey];
 
     if (editing) {
       !meta && (meta = editingMeta[editingKey] = {
-        data: _objectSpread$g({}, rowData),
+        data: _objectSpread$f({}, rowData),
         fields: []
       });
       meta['fields'].push(field);
@@ -21241,8 +21480,22 @@ var DataTable = /*#__PURE__*/React.forwardRef(function (props, ref) {
         }
       } else if (props.columnResizeMode === 'expand') {
         var tableWidth = tableRef.current.offsetWidth + delta + 'px';
-        tableRef.current.style.width = tableWidth;
-        tableRef.current.style.minWidth = tableWidth;
+
+        var updateTableWidth = function updateTableWidth(el) {
+          !!el && (el.style.width = el.style.minWidth = tableWidth);
+        };
+
+        updateTableWidth(tableRef.current);
+
+        if (!isVirtualScrollerDisabled()) {
+          updateTableWidth(bodyRef.current);
+          updateTableWidth(frozenBodyRef.current);
+
+          if (wrapperRef.current) {
+            updateTableWidth(DomHandler.findSingle(wrapperRef.current, '.p-virtualscroller-content'));
+          }
+        }
+
         resizeTableCells(newColumnWidth);
       }
 
@@ -21299,7 +21552,7 @@ var DataTable = /*#__PURE__*/React.forwardRef(function (props, ref) {
     var event = e.originalEvent,
         column = e.column;
 
-    if (props.reorderableColumns && getColumnProp(column, 'reorderable') !== false) {
+    if (props.reorderableColumns && getColumnProp(column, 'reorderable') !== false && !getColumnProp(column, 'frozen')) {
       if (event.target.nodeName === 'INPUT' || event.target.nodeName === 'TEXTAREA' || DomHandler.hasClass(event.target, 'p-column-resizer')) event.currentTarget.draggable = false;else event.currentTarget.draggable = true;
     }
   };
@@ -21362,10 +21615,11 @@ var DataTable = /*#__PURE__*/React.forwardRef(function (props, ref) {
   };
 
   var onColumnHeaderDragOver = function onColumnHeaderDragOver(e) {
-    var event = e.originalEvent;
+    var event = e.originalEvent,
+        column = e.column;
     var dropHeader = findParentHeader(event.currentTarget);
 
-    if (props.reorderableColumns && draggedColumnElement.current && dropHeader) {
+    if (props.reorderableColumns && draggedColumnElement.current && dropHeader && !getColumnProp(column, 'frozen')) {
       event.preventDefault();
 
       if (draggedColumnElement.current !== dropHeader) {
@@ -21576,8 +21830,8 @@ var DataTable = /*#__PURE__*/React.forwardRef(function (props, ref) {
     return props.removableSort ? props.defaultSortOrder === currentOrder ? currentOrder * -1 : 0 : currentOrder * -1;
   };
 
-  var compareValuesOnSort = function compareValuesOnSort(value1, value2) {
-    return ObjectUtils.sort(value1, value2, 1, PrimeReact.locale);
+  var compareValuesOnSort = function compareValuesOnSort(value1, value2, order) {
+    return ObjectUtils.sort(value1, value2, order, PrimeReact.locale);
   };
 
   var addSortMeta = function addSortMeta(meta, multiSortMeta) {
@@ -21616,6 +21870,7 @@ var DataTable = /*#__PURE__*/React.forwardRef(function (props, ref) {
 
     if (columnSortable.current && columnSortFunction.current) {
       value = columnSortFunction.current({
+        rowData: value,
         field: field,
         order: order
       });
@@ -21623,8 +21878,7 @@ var DataTable = /*#__PURE__*/React.forwardRef(function (props, ref) {
       value.sort(function (data1, data2) {
         var value1 = ObjectUtils.resolveFieldData(data1, field);
         var value2 = ObjectUtils.resolveFieldData(data2, field);
-        var result = compareValuesOnSort(value1, value2);
-        return order * result;
+        return compareValuesOnSort(value1, value2, order);
       });
     }
 
@@ -21657,6 +21911,7 @@ var DataTable = /*#__PURE__*/React.forwardRef(function (props, ref) {
       var field = columnField.current;
       var order = meta ? meta.order : defaultSortOrder;
       value = columnSortFunction.current({
+        rowData: value,
         field: field,
         order: order
       });
@@ -21677,8 +21932,7 @@ var DataTable = /*#__PURE__*/React.forwardRef(function (props, ref) {
       return multiSortMeta.length - 1 > index ? multisortField(data1, data2, multiSortMeta, index + 1) : 0;
     }
 
-    var result = compareValuesOnSort(value1, value2);
-    return multiSortMeta[index].order * result;
+    return compareValuesOnSort(value1, value2, multiSortMeta[index].order);
   };
 
   var onFilterChange = function onFilterChange(filters) {
@@ -21808,9 +22062,9 @@ var DataTable = /*#__PURE__*/React.forwardRef(function (props, ref) {
         cloned[prop] = value.operator ? {
           operator: value.operator,
           constraints: value.constraints.map(function (constraint) {
-            return _objectSpread$g({}, constraint);
+            return _objectSpread$f({}, constraint);
           })
-        } : _objectSpread$g({}, value);
+        } : _objectSpread$f({}, value);
       });
     } else {
       var _columns2 = getColumns();
@@ -21851,7 +22105,7 @@ var DataTable = /*#__PURE__*/React.forwardRef(function (props, ref) {
   var filter = function filter(value, field, matchMode) {
     var index = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : 0;
 
-    var filters = _objectSpread$g({}, d_filtersState);
+    var filters = _objectSpread$f({}, d_filtersState);
 
     var meta = filters[field];
     var constraint = meta && meta.operator ? meta.constraints[index] : meta;
@@ -21978,7 +22232,7 @@ var DataTable = /*#__PURE__*/React.forwardRef(function (props, ref) {
   };
 
   var createEvent = function createEvent(event) {
-    return _objectSpread$g({
+    return _objectSpread$f({
       first: getFirst(),
       rows: getRows(),
       sortField: getSortField(),
@@ -22057,7 +22311,9 @@ var DataTable = /*#__PURE__*/React.forwardRef(function (props, ref) {
     }
   }, [props.responsiveLayout]);
   useUpdateEffect(function () {
-    filter(props.globalFilter, 'global', 'contains');
+    if (props.globalFilter) {
+      filter(props.globalFilter, 'global', 'contains');
+    }
   }, [props.globalFilter]);
   useUnmountEffect(function () {
     unbindColumnResizeEvents();
@@ -22157,7 +22413,9 @@ var DataTable = /*#__PURE__*/React.forwardRef(function (props, ref) {
         columns = options.columns,
         contentRef = options.contentRef,
         className = options.className;
+        options.itemSize;
     var frozenBody = props.frozenValue && /*#__PURE__*/React.createElement(TableBody, {
+      ref: frozenBodyRef,
       value: props.frozenValue,
       className: "p-datatable-frozen-tbody",
       frozenRow: true,
@@ -22221,9 +22479,11 @@ var DataTable = /*#__PURE__*/React.forwardRef(function (props, ref) {
       expandedRowIcon: props.expandedRowIcon,
       collapsedRowIcon: props.collapsedRowIcon,
       rowClassName: props.rowClassName,
+      virtualScrollerOptions: options,
       isVirtualScrollerDisabled: true
     });
     var body = /*#__PURE__*/React.createElement(TableBody, {
+      ref: bodyRef,
       value: dataToRender(rows),
       className: className,
       empty: empty,
@@ -22316,10 +22576,15 @@ var DataTable = /*#__PURE__*/React.forwardRef(function (props, ref) {
       style: {
         maxHeight: _isVirtualScrollerDisabled ? props.scrollHeight : null
       }
-    }, /*#__PURE__*/React.createElement(VirtualScroller, _extends({}, virtualScrollerOptions, {
+    }, /*#__PURE__*/React.createElement(VirtualScroller, _extends({
+      ref: virtualScrollerRef
+    }, virtualScrollerOptions, {
       items: processedData,
       columns: columns,
-      scrollHeight: props.scrollHeight,
+      style: _objectSpread$f(_objectSpread$f({}, virtualScrollerOptions.style), {
+        height: props.scrollHeight !== 'flex' ? props.scrollHeight : undefined
+      }),
+      scrollHeight: props.scrollHeight !== 'flex' ? undefined : '100%',
       disabled: _isVirtualScrollerDisabled,
       loaderDisabled: true,
       showSpacer: false,
@@ -23124,9 +23389,9 @@ Dock.defaultProps = {
   footer: null
 };
 
-function ownKeys$f(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function ownKeys$e(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 
-function _objectSpread$f(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$f(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$f(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+function _objectSpread$e(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$e(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$e(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 var Editor = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function (props, ref) {
   var contentRef = React.useRef(null);
   var toolbarRef = React.useRef(null);
@@ -23140,16 +23405,24 @@ var Editor = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function (pr
   useMountEffect(function () {
     if (!isQuillLoaded.current) {
       import('quill').then(function (module) {
-        if (module && module["default"] && DomHandler.isExist(contentRef.current)) {
-          quill.current = new module["default"](contentRef.current, {
-            modules: _objectSpread$f({
+        if (module && DomHandler.isExist(contentRef.current)) {
+          var configuration = {
+            modules: _objectSpread$e({
               toolbar: props.showHeader ? toolbarRef.current : false
             }, props.modules),
             placeholder: props.placeholder,
             readOnly: props.readOnly,
             theme: props.theme,
             formats: props.formats
-          });
+          };
+
+          if (module["default"]) {
+            // webpack
+            quill.current = new module["default"](contentRef.current, configuration);
+          } else {
+            // parceljs
+            quill.current = new module(contentRef.current, configuration);
+          }
 
           if (props.value) {
             quill.current.setContents(quill.current.clipboard.convert(props.value));
@@ -23570,7 +23843,7 @@ var Messages = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function (
 
   var show = function show(value) {
     if (value) {
-      var messages = [];
+      var messages;
 
       if (Array.isArray(value)) {
         for (var i = 0; i < value.length; i++) {
@@ -23591,7 +23864,8 @@ var Messages = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function (
   };
 
   var replace = function replace(value) {
-    setMessagesState(value);
+    var replaced = Array.isArray(value) ? value : [value];
+    setMessagesState(replaced);
   };
 
   var onClose = function onClose(message) {
@@ -25654,12 +25928,12 @@ var Image = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function (pro
     width: width,
     height: height,
     style: props.imageStyle,
-    alt: alt
+    alt: alt,
+    onError: props.onError
   });
   return /*#__PURE__*/React.createElement("span", _extends({
     ref: elementRef,
-    className: containerClassName,
-    style: props.style
+    className: containerClassName
   }, otherProps), image, preview, maskVisibleState && /*#__PURE__*/React.createElement(Portal, {
     element: element,
     appendTo: document.body
@@ -25671,14 +25945,14 @@ Image.defaultProps = {
   preview: false,
   className: null,
   downloadable: false,
-  style: null,
   imageStyle: null,
   imageClassName: null,
   template: null,
   src: null,
   alt: null,
   width: null,
-  height: null
+  height: null,
+  onError: null
 };
 
 var InplaceDisplay = function InplaceDisplay(props) {
@@ -25688,7 +25962,7 @@ var InplaceContent = function InplaceContent(props) {
   return props.children;
 };
 var Inplace = /*#__PURE__*/React.forwardRef(function (props, ref) {
-  var _React$useState = React.useState(false),
+  var _React$useState = React.useState(props.active),
       _React$useState2 = _slicedToArray(_React$useState, 2),
       activeState = _React$useState2[0],
       setActiveState = _React$useState2[1];
@@ -25819,7 +26093,7 @@ Inplace.defaultProps = {
 };
 
 var InputMask = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function (props, ref) {
-  var elementRef = React.useRef(null);
+  var elementRef = React.useRef(ref);
   var firstNonMaskPos = React.useRef(null);
   var lastRequiredNonMaskPos = React.useRef(0);
   var tests = React.useRef([]);
@@ -26340,8 +26614,8 @@ var InputMask = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function
   };
 
   React.useEffect(function () {
-    ObjectUtils.combinedRefs(elementRef, props.inputRef);
-  }, [elementRef, props.inputRef]);
+    ObjectUtils.combinedRefs(elementRef, ref);
+  }, [elementRef, ref]);
   useMountEffect(function () {
     init();
     updateValue();
@@ -26349,7 +26623,10 @@ var InputMask = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function
   useUpdateEffect(function () {
     init();
     caret(updateValue(true));
-    updateModel();
+
+    if (props.unmask) {
+      updateModel();
+    }
   }, [props.mask]);
   useUpdateEffect(function () {
     if (isValueUpdated()) {
@@ -26387,7 +26664,6 @@ InputMask.displayName = 'InputMask';
 InputMask.defaultProps = {
   __TYPE: 'InputMask',
   id: null,
-  inputRef: null,
   value: null,
   type: 'text',
   mask: null,
@@ -26428,7 +26704,7 @@ var InputSwitch = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(functio
     }
 
     toggle(event);
-    inputRef.current.focus();
+    DomHandler.focus(inputRef.current);
     event.preventDefault();
   };
 
@@ -26953,6 +27229,7 @@ var ListBoxItem = /*#__PURE__*/React.memo(function (props) {
   var content = props.template ? ObjectUtils.getJSXElement(props.template, props.option) : props.label;
   return /*#__PURE__*/React.createElement("li", {
     className: className,
+    style: props.style,
     onClick: onClick,
     onTouchEnd: onTouchEnd,
     onKeyDown: onKeyDown,
@@ -26966,9 +27243,9 @@ var ListBoxItem = /*#__PURE__*/React.memo(function (props) {
 });
 ListBoxItem.displayName = 'ListBoxItem';
 
-function ownKeys$e(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function ownKeys$d(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 
-function _objectSpread$e(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$e(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$e(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+function _objectSpread$d(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$d(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$d(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 
 function _createForOfIteratorHelper$8(o, allowArrayLike) { var it = typeof Symbol !== "undefined" && o[Symbol.iterator] || o["@@iterator"]; if (!it) { if (Array.isArray(o) || (it = _unsupportedIterableToArray$8(o)) || allowArrayLike && o && typeof o.length === "number") { if (it) o = it; var i = 0; var F = function F() {}; return { s: F, n: function n() { if (i >= o.length) return { done: true }; return { done: false, value: o[i++] }; }, e: function e(_e) { throw _e; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var normalCompletion = true, didErr = false, err; return { s: function s() { it = it.call(o); }, n: function n() { var step = it.next(); normalCompletion = step.done; return step; }, e: function e(_e2) { didErr = true; err = _e2; }, f: function f() { try { if (!normalCompletion && it["return"] != null) it["return"](); } finally { if (didErr) throw err; } } }; }
 
@@ -27072,6 +27349,7 @@ var ListBox = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function (p
   };
 
   var onFilter = function onFilter(event) {
+    virtualScrollerRef.current && virtualScrollerRef.current.scrollToIndex(0);
     var originalEvent = event.originalEvent,
         value = event.value;
 
@@ -27107,11 +27385,44 @@ var ListBox = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function (p
     });
   };
 
+  var getSelectedOptionIndex = function getSelectedOptionIndex() {
+    if (props.value != null && visibleOptions) {
+      if (props.optionGroupLabel) {
+        for (var i = 0; i < visibleOptions.length; i++) {
+          var selectedOptionIndex = findOptionIndexInList(props.value, getOptionGroupChildren(visibleOptions[i]));
+
+          if (selectedOptionIndex !== -1) {
+            return {
+              group: i,
+              option: selectedOptionIndex
+            };
+          }
+        }
+      } else {
+        return findOptionIndexInList(props.value, visibleOptions);
+      }
+    }
+
+    return -1;
+  };
+
+  var equalityKey = function equalityKey() {
+    return props.optionValue ? null : props.dataKey;
+  };
+
+  var findOptionIndexInList = function findOptionIndexInList(value, list) {
+    var key = equalityKey();
+    return list.findIndex(function (item) {
+      return ObjectUtils.equals(value, getOptionValue(item), key);
+    });
+  };
+
   var isSelected = function isSelected(option) {
     var optionValue = getOptionValue(option);
+    var key = equalityKey();
     return props.multiple && props.value ? props.value.some(function (val) {
-      return ObjectUtils.equals(val, optionValue, props.dataKey);
-    }) : ObjectUtils.equals(props.value, optionValue, props.dataKey);
+      return ObjectUtils.equals(val, optionValue, key);
+    }) : ObjectUtils.equals(props.value, optionValue, key);
   };
 
   var getOptionLabel = function getOptionLabel(option) {
@@ -27163,7 +27474,7 @@ var ListBox = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function (p
             var filteredSubOptions = FilterService.filter(getOptionGroupChildren(optgroup), searchFields, filterValue, props.filterMatchMode, props.filterLocale);
 
             if (filteredSubOptions && filteredSubOptions.length) {
-              filteredGroups.push(_objectSpread$e(_objectSpread$e({}, optgroup), {
+              filteredGroups.push(_objectSpread$d(_objectSpread$d({}, optgroup), {
                 items: filteredSubOptions
               }));
             }
@@ -27183,6 +27494,22 @@ var ListBox = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function (p
     }
   };
 
+  var scrollToSelectedIndex = function scrollToSelectedIndex() {
+    if (virtualScrollerRef.current) {
+      var selectedIndex = getSelectedOptionIndex();
+
+      if (selectedIndex !== -1) {
+        setTimeout(function () {
+          return virtualScrollerRef.current.scrollToIndex(selectedIndex);
+        }, 0);
+      }
+    }
+  };
+
+  useMountEffect(function () {
+    scrollToSelectedIndex();
+  });
+
   var createHeader = function createHeader() {
     return props.filter ? /*#__PURE__*/React.createElement(ListBoxHeader, {
       filter: filteredValue,
@@ -27193,7 +27520,7 @@ var ListBox = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function (p
     }) : null;
   };
 
-  var createGroupChildren = function createGroupChildren(optionGroup) {
+  var createGroupChildren = function createGroupChildren(optionGroup, style) {
     var groupChildren = getOptionGroupChildren(optionGroup);
     return groupChildren.map(function (option, j) {
       var optionLabel = getOptionLabel(option);
@@ -27204,6 +27531,7 @@ var ListBox = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function (p
         key: optionKey,
         label: optionLabel,
         option: option,
+        style: style,
         template: props.itemTemplate,
         selected: isSelected(option),
         onClick: onOptionSelect,
@@ -27215,14 +27543,20 @@ var ListBox = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function (p
   };
 
   var createItem = function createItem(option, index) {
+    var scrollerOptions = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
+    var style = {
+      height: scrollerOptions.props ? scrollerOptions.props.itemSize : undefined
+    };
+
     if (props.optionGroupLabel) {
       var groupContent = props.optionGroupTemplate ? ObjectUtils.getJSXElement(props.optionGroupTemplate, option, index) : getOptionGroupLabel(option);
-      var groupChildrenContent = createGroupChildren(option);
+      var groupChildrenContent = createGroupChildren(option, style);
       var key = index + '_' + getOptionGroupRenderKey(option);
       return /*#__PURE__*/React.createElement(React.Fragment, {
         key: key
       }, /*#__PURE__*/React.createElement("li", {
         className: "p-listbox-item-group",
+        style: style,
         role: "group"
       }, groupContent), groupChildrenContent);
     } else {
@@ -27234,6 +27568,7 @@ var ListBox = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function (p
         key: optionKey,
         label: optionLabel,
         option: option,
+        style: style,
         template: props.itemTemplate,
         selected: isSelected(option),
         onClick: onOptionSelect,
@@ -27250,15 +27585,15 @@ var ListBox = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function (p
 
   var createList = function createList() {
     if (props.virtualScrollerOptions) {
-      var virtualScrollerProps = _objectSpread$e(_objectSpread$e({}, props.virtualScrollerOptions), {
+      var virtualScrollerProps = _objectSpread$d(_objectSpread$d({}, props.virtualScrollerOptions), {
         items: visibleOptions,
         onLazyLoad: function onLazyLoad(event) {
-          return props.virtualScrollerOptions.onLazyLoad(_objectSpread$e(_objectSpread$e({}, event), {
+          return props.virtualScrollerOptions.onLazyLoad(_objectSpread$d(_objectSpread$d({}, event), {
             filter: visibleOptions
           }));
         },
-        itemTemplate: function itemTemplate(item, option) {
-          return item && createItem(item, option.index);
+        itemTemplate: function itemTemplate(item, options) {
+          return item && createItem(item, options.index, options);
         },
         contentTemplate: function contentTemplate(option) {
           var className = classNames('p-listbox-list', option.className);
@@ -27601,6 +27936,7 @@ var MegaMenu = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function (
 
       return /*#__PURE__*/React.createElement("li", {
         key: key,
+        id: item.id,
         className: _className2,
         style: item.style,
         role: "none"
@@ -27616,6 +27952,7 @@ var MegaMenu = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function (
     return /*#__PURE__*/React.createElement(React.Fragment, {
       key: submenu.label
     }, /*#__PURE__*/React.createElement("li", {
+      id: submenu.id,
       className: className,
       style: submenu.style,
       role: "presentation"
@@ -27682,6 +28019,7 @@ var MegaMenu = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function (
     var panel = createCategoryPanel(category);
     return /*#__PURE__*/React.createElement("li", {
       key: category.label + '_' + index,
+      id: category.id,
       className: className,
       style: category.style,
       onMouseEnter: function onMouseEnter(e) {
@@ -27705,19 +28043,36 @@ var MegaMenu = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function (
 
   var createMenu = function createMenu() {
     if (props.model) {
-      return props.model.map(function (item, index) {
+      return /*#__PURE__*/React.createElement("ul", {
+        className: "p-megamenu-root-list",
+        role: "menubar"
+      }, props.model.map(function (item, index) {
         return createCategory(item, index);
-      });
+      }));
     }
 
     return null;
   };
 
-  var createCustomContent = function createCustomContent() {
-    if (props.children) {
+  var createStartContent = function createStartContent() {
+    if (props.start) {
+      var _start = ObjectUtils.getJSXElement(props.start, props);
+
+      return /*#__PURE__*/React.createElement("div", {
+        className: "p-megamenu-start"
+      }, _start);
+    }
+
+    return null;
+  };
+
+  var createEndContent = function createEndContent() {
+    if (props.end) {
+      var _end = ObjectUtils.getJSXElement(props.end, props);
+
       return /*#__PURE__*/React.createElement("div", {
-        className: "p-megamenu-custom"
-      }, props.children);
+        className: "p-megamenu-end"
+      }, _end);
     }
 
     return null;
@@ -27729,16 +28084,14 @@ var MegaMenu = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function (
     'p-megamenu-vertical': props.orientation === 'vertical'
   }, props.className);
   var menu = createMenu();
-  var customContent = createCustomContent();
+  var start = createStartContent();
+  var end = createEndContent();
   return /*#__PURE__*/React.createElement("div", _extends({
     ref: elementRef,
     id: props.id,
     className: className,
     style: props.style
-  }, otherProps), /*#__PURE__*/React.createElement("ul", {
-    className: "p-megamenu-root-list",
-    role: "menubar"
-  }, menu), customContent);
+  }, otherProps), start, menu, end);
 }));
 MegaMenu.displayName = 'MegaMenu';
 MegaMenu.defaultProps = {
@@ -27747,12 +28100,14 @@ MegaMenu.defaultProps = {
   model: null,
   style: null,
   className: null,
-  orientation: 'horizontal'
+  orientation: 'horizontal',
+  start: null,
+  end: null
 };
 
-function ownKeys$d(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function ownKeys$c(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 
-function _objectSpread$d(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$d(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$d(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+function _objectSpread$c(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$c(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$c(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 var Mention = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function (props, ref) {
   var _React$useState = React.useState(false),
       _React$useState2 = _slicedToArray(_React$useState, 2),
@@ -27972,7 +28327,7 @@ var Mention = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function (p
   };
 
   var onItemClick = function onItemClick(event, suggestion) {
-    inputRef.current.focus();
+    DomHandler.focus(inputRef.current);
     selectItem(event, suggestion);
   };
 
@@ -28126,7 +28481,7 @@ var Mention = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function (p
   var createPanel = function createPanel() {
     var panelClassName = classNames('p-mention-panel p-component', props.panelClassName);
 
-    var panelStyle = _objectSpread$d({
+    var panelStyle = _objectSpread$c({
       maxHeight: props.scrollHeight
     }, props.panelStyle);
 
@@ -28732,6 +29087,7 @@ var MenubarSub = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function
     return /*#__PURE__*/React.createElement("li", {
       key: key,
       role: "none",
+      id: item.id,
       className: className,
       style: item.style,
       onMouseEnter: function onMouseEnter(event) {
@@ -29053,6 +29409,7 @@ var MultiSelectItem = /*#__PURE__*/React.memo(function (props) {
   var tabIndex = props.disabled ? null : props.tabIndex || 0;
   return /*#__PURE__*/React.createElement("li", {
     className: className,
+    style: props.style,
     onClick: onClick,
     tabIndex: tabIndex,
     onKeyDown: onKeyDown,
@@ -29068,9 +29425,9 @@ var MultiSelectItem = /*#__PURE__*/React.memo(function (props) {
 });
 MultiSelectItem.displayName = 'MultiSelectItem';
 
-function ownKeys$c(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function ownKeys$b(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 
-function _objectSpread$c(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$c(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$c(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+function _objectSpread$b(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$b(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$b(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 var MultiSelectPanel = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function (props, ref) {
   var virtualScrollerRef = React.useRef(null);
 
@@ -29125,7 +29482,7 @@ var MultiSelectPanel = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(fu
     return null;
   };
 
-  var createGroupChildren = function createGroupChildren(optionGroup) {
+  var createGroupChildren = function createGroupChildren(optionGroup, style) {
     var groupChildren = props.getOptionGroupChildren(optionGroup);
     return groupChildren.map(function (option, j) {
       var optionLabel = props.getOptionLabel(option);
@@ -29137,6 +29494,7 @@ var MultiSelectPanel = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(fu
         key: optionKey,
         label: optionLabel,
         option: option,
+        style: style,
         template: props.itemTemplate,
         selected: selected,
         onClick: props.onOptionSelect,
@@ -29155,14 +29513,20 @@ var MultiSelectPanel = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(fu
   };
 
   var createItem = function createItem(option, index) {
+    var scrollerOptions = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
+    var style = {
+      height: scrollerOptions.props ? scrollerOptions.props.itemSize : undefined
+    };
+
     if (props.optionGroupLabel) {
       var groupContent = props.optionGroupTemplate ? ObjectUtils.getJSXElement(props.optionGroupTemplate, option, index) : props.getOptionGroupLabel(option);
-      var groupChildrenContent = createGroupChildren(option);
+      var groupChildrenContent = createGroupChildren(option, style);
       var key = index + '_' + props.getOptionGroupRenderKey(option);
       return /*#__PURE__*/React.createElement(React.Fragment, {
         key: key
       }, /*#__PURE__*/React.createElement("li", {
-        className: "p-multiselect-item-group"
+        className: "p-multiselect-item-group",
+        style: style
       }, groupContent), groupChildrenContent);
     } else {
       var optionLabel = props.getOptionLabel(option);
@@ -29174,6 +29538,7 @@ var MultiSelectPanel = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(fu
         key: optionKey,
         label: optionLabel,
         option: option,
+        style: style,
         template: props.itemTemplate,
         selected: selected,
         onClick: props.onOptionSelect,
@@ -29196,19 +29561,20 @@ var MultiSelectPanel = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(fu
 
   var createContent = function createContent() {
     if (props.virtualScrollerOptions) {
-      var virtualScrollerProps = _objectSpread$c(_objectSpread$c({}, props.virtualScrollerOptions), {
-        style: _objectSpread$c(_objectSpread$c({}, props.virtualScrollerOptions.style), {
+      var virtualScrollerProps = _objectSpread$b(_objectSpread$b({}, props.virtualScrollerOptions), {
+        style: _objectSpread$b(_objectSpread$b({}, props.virtualScrollerOptions.style), {
           height: props.scrollHeight
         }),
         className: classNames('p-multiselect-items-wrapper', props.virtualScrollerOptions.className),
         items: props.visibleOptions,
+        autoSize: true,
         onLazyLoad: function onLazyLoad(event) {
-          return props.virtualScrollerOptions.onLazyLoad(_objectSpread$c(_objectSpread$c({}, event), {
+          return props.virtualScrollerOptions.onLazyLoad(_objectSpread$b(_objectSpread$b({}, event), {
             filter: props.filterValue
           }));
         },
         itemTemplate: function itemTemplate(item, options) {
-          return item && createItem(item, options.index);
+          return item && createItem(item, options.index, options);
         },
         contentTemplate: function contentTemplate(options) {
           var className = classNames('p-multiselect-items p-component', options.className);
@@ -29278,9 +29644,9 @@ var MultiSelectPanel = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(fu
 }));
 MultiSelectPanel.displayName = 'MultiSelectPanel';
 
-function ownKeys$b(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function ownKeys$a(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 
-function _objectSpread$b(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$b(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$b(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+function _objectSpread$a(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$a(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$a(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 
 function _createForOfIteratorHelper$7(o, allowArrayLike) { var it = typeof Symbol !== "undefined" && o[Symbol.iterator] || o["@@iterator"]; if (!it) { if (Array.isArray(o) || (it = _unsupportedIterableToArray$7(o)) || allowArrayLike && o && typeof o.length === "number") { if (it) o = it; var i = 0; var F = function F() {}; return { s: F, n: function n() { if (i >= o.length) return { done: true }; return { done: false, value: o[i++] }; }, e: function e(_e) { throw _e; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var normalCompletion = true, didErr = false, err; return { s: function s() { it = it.call(o); }, n: function n() { var step = it.next(); normalCompletion = step.done; return step; }, e: function e(_e2) { didErr = true; err = _e2; }, f: function f() { try { if (!normalCompletion && it["return"] != null) it["return"](); } finally { if (didErr) throw err; } } }; }
 
@@ -29385,7 +29751,7 @@ var MultiSelect = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(functio
 
       case 27:
         hide();
-        inputRef.current.focus();
+        DomHandler.focus(inputRef.current);
         break;
     }
   };
@@ -29403,7 +29769,7 @@ var MultiSelect = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(functio
   var onClick = function onClick(event) {
     if (!props.disabled && !isPanelClicked(event) && !DomHandler.hasClass(event.target, 'p-multiselect-token-icon') && !isClearClicked(event)) {
       overlayVisibleState ? hide() : show();
-      inputRef.current.focus();
+      DomHandler.focus(inputRef.current);
       event.preventDefault();
     }
   };
@@ -29580,7 +29946,7 @@ var MultiSelect = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(functio
 
   var onCloseClick = function onCloseClick(event) {
     hide();
-    inputRef.current.focus();
+    DomHandler.focus(inputRef.current);
     event.preventDefault();
     event.stopPropagation();
   };
@@ -29773,7 +30139,7 @@ var MultiSelect = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(functio
     var label;
 
     if (!empty && !props.fixedPlaceholder) {
-      if (props.maxSelectedLabels && props.value.length > props.maxSelectedLabels) {
+      if (ObjectUtils.isNotEmpty(props.maxSelectedLabels) && props.value.length > props.maxSelectedLabels) {
         return getSelectedItemsLabel();
       } else {
         return props.value.reduce(function (acc, value, index) {
@@ -29788,7 +30154,7 @@ var MultiSelect = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(functio
   var getLabelContent = function getLabelContent() {
     if (props.selectedItemTemplate) {
       if (!empty) {
-        if (props.maxSelectedLabels && props.value.length > props.maxSelectedLabels) {
+        if (ObjectUtils.isNotEmpty(props.maxSelectedLabels) && props.value.length > props.maxSelectedLabels) {
           return getSelectedItemsLabel();
         } else {
           return props.value.map(function (val, index) {
@@ -29844,7 +30210,7 @@ var MultiSelect = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(functio
             var filteredSubOptions = FilterService.filter(getOptionGroupChildren(optgroup), searchFields, filterValue, props.filterMatchMode, props.filterLocale);
 
             if (filteredSubOptions && filteredSubOptions.length) {
-              filteredGroups.push(_objectSpread$b(_objectSpread$b({}, optgroup), _defineProperty({}, props.optionGroupChildren, filteredSubOptions)));
+              filteredGroups.push(_objectSpread$a(_objectSpread$a({}, optgroup), _defineProperty({}, props.optionGroupChildren, filteredSubOptions)));
             }
           }
         } catch (err) {
@@ -31011,7 +31377,7 @@ var OverlayPanel = /*#__PURE__*/React.forwardRef(function (props, ref) {
   };
 
   var align = function align() {
-    if (currentTargetRef.current) {
+    if (currentTargetRef.current && overlayRef.current) {
       DomHandler.absolutePosition(overlayRef.current, currentTargetRef.current);
       var containerOffset = DomHandler.getOffset(overlayRef.current);
       var targetOffset = DomHandler.getOffset(currentTargetRef.current);
@@ -31466,6 +31832,7 @@ var PanelMenuSub = /*#__PURE__*/React.memo(function (props) {
 
     return /*#__PURE__*/React.createElement("li", {
       key: key,
+      id: item.id,
       className: className,
       style: item.style,
       role: "none"
@@ -32326,6 +32693,23 @@ var PickListSubList = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(fun
     return ObjectUtils.findIndexInList(item, props.selection, props.dataKey) !== -1;
   };
 
+  var onFilter = function onFilter(event) {
+    if (props.onFilter) {
+      props.onFilter({
+        originalEvent: event,
+        value: event.target.value,
+        type: props.type
+      });
+    }
+  };
+
+  var onFilterInputKeyDown = function onFilterInputKeyDown(event) {
+    //enter
+    if (event.which === 13) {
+      event.preventDefault();
+    }
+  };
+
   React.useImperativeHandle(ref, function () {
     return {
       listElementRef: listElementRef
@@ -32362,6 +32746,44 @@ var PickListSubList = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(fun
     return null;
   };
 
+  var createFilter = function createFilter() {
+    if (props.showFilter) {
+      var content = /*#__PURE__*/React.createElement("div", {
+        className: "p-picklist-filter"
+      }, /*#__PURE__*/React.createElement("input", {
+        type: "text",
+        value: props.filterValue,
+        onChange: onFilter,
+        onKeyDown: onFilterInputKeyDown,
+        placeholder: props.placeholder,
+        className: "p-picklist-filter-input p-inputtext p-component"
+      }), /*#__PURE__*/React.createElement("span", {
+        className: "p-picklist-filter-icon pi pi-search"
+      }));
+
+      if (props.filterTemplate) {
+        var defaultContentOptions = {
+          className: 'p-picklist-filter',
+          inputProps: {
+            className: 'p-picklist-filter-input p-inputtext p-component',
+            onChange: onFilter,
+            onKeyDown: onFilterInputKeyDown
+          },
+          iconClassName: 'p-picklist-filter-icon pi pi-search',
+          element: content,
+          props: props
+        };
+        content = ObjectUtils.getJSXElement(props.filterTemplate, defaultContentOptions);
+      }
+
+      return /*#__PURE__*/React.createElement("div", {
+        className: "p-picklist-filter-container"
+      }, content);
+    }
+
+    return null;
+  };
+
   var createList = function createList() {
     var items = createItems();
     var className = classNames('p-picklist-list', props.listClassName);
@@ -32375,19 +32797,20 @@ var PickListSubList = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(fun
 
   var className = classNames('p-picklist-list-wrapper', props.className);
   var header = createHeader();
+  var filter = createFilter();
   var list = createList();
   return /*#__PURE__*/React.createElement("div", {
     ref: listElementRef,
     className: className
-  }, header, list);
+  }, header, filter, list);
 }));
 PickListSubList.displayName = 'PickListSubList';
 
 var PickListTransferControls = /*#__PURE__*/React.memo(function (props) {
-  var moveRightDisabled = ObjectUtils.isEmpty(props.sourceSelection);
-  var moveLeftDisabled = ObjectUtils.isEmpty(props.targetSelection);
-  var moveAllRightDisabled = ObjectUtils.isEmpty(props.source);
-  var moveAllLeftDisabled = ObjectUtils.isEmpty(props.target);
+  var moveRightDisabled = ObjectUtils.isEmpty(props.sourceSelection) || ObjectUtils.isEmpty(props.visibleSourceList);
+  var moveLeftDisabled = ObjectUtils.isEmpty(props.targetSelection) || ObjectUtils.isEmpty(props.visibleTargetList);
+  var moveAllRightDisabled = ObjectUtils.isEmpty(props.visibleSourceList);
+  var moveAllLeftDisabled = ObjectUtils.isEmpty(props.visibleTargetList);
 
   var moveRight = function moveRight(event) {
     var selection = props.sourceSelection;
@@ -32418,8 +32841,12 @@ var PickListTransferControls = /*#__PURE__*/React.memo(function (props) {
 
   var moveAllRight = function moveAllRight(event) {
     if (props.source) {
-      var targetList = [].concat(_toConsumableArray(props.target), _toConsumableArray(props.source));
-      var sourceList = [];
+      var targetList = [].concat(_toConsumableArray(props.target), _toConsumableArray(props.visibleSourceList));
+      var sourceList = props.source.filter(function (s) {
+        return !props.visibleSourceList.some(function (vs) {
+          return vs === s;
+        });
+      });
 
       if (props.onTransfer) {
         props.onTransfer({
@@ -32461,8 +32888,12 @@ var PickListTransferControls = /*#__PURE__*/React.memo(function (props) {
 
   var moveAllLeft = function moveAllLeft(event) {
     if (props.source) {
-      var sourceList = [].concat(_toConsumableArray(props.source), _toConsumableArray(props.target));
-      var targetList = [];
+      var sourceList = [].concat(_toConsumableArray(props.source), _toConsumableArray(props.visibleTargetList));
+      var targetList = props.target.filter(function (t) {
+        return !props.visibleTargetList.some(function (vt) {
+          return vt === t;
+        });
+      });
 
       if (props.onTransfer) {
         props.onTransfer({
@@ -32513,12 +32944,27 @@ var PickList = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function (
       targetSelectionState = _React$useState4[0],
       setTargetSelectionState = _React$useState4[1];
 
+  var _React$useState5 = React.useState(''),
+      _React$useState6 = _slicedToArray(_React$useState5, 2),
+      sourceFilterValueState = _React$useState6[0],
+      setSourceFilterValueState = _React$useState6[1];
+
+  var _React$useState7 = React.useState(''),
+      _React$useState8 = _slicedToArray(_React$useState7, 2),
+      targetFilterValueState = _React$useState8[0],
+      setTargetFilterValueState = _React$useState8[1];
+
   var sourceListElementRef = React.useRef(null);
   var targetListElementRef = React.useRef(null);
   var reorderedListElementRef = React.useRef(null);
   var reorderDirection = React.useRef(null);
   var sourceSelection = props.onSourceSelectionChange ? props.sourceSelection : sourceSelectionState;
   var targetSelection = props.onTargetSelectionChange ? props.targetSelection : targetSelectionState;
+  var sourceFilteredValue = props.onSourceFilterChange ? props.sourceFilterValue : sourceFilterValueState;
+  var targetFilteredValue = props.onTargetFilterChange ? props.targetFilterValue : targetFilterValueState;
+  var hasFilterBy = ObjectUtils.isNotEmpty(props.filterBy);
+  var showSourceFilter = hasFilterBy && props.showSourceFilter;
+  var showTargetFilter = hasFilterBy && props.showTargetFilter;
 
   var onSourceReorder = function onSourceReorder(event) {
     handleChange(event, event.value, props.target);
@@ -32653,6 +33099,52 @@ var PickList = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function (
     }
   };
 
+  var onFilter = function onFilter(event) {
+    var originalEvent = event.originalEvent,
+        value = event.value,
+        type = event.type;
+
+    var _ref = type === 'source' ? [setSourceFilterValueState, props.onSourceFilterChange] : [setTargetFilterValueState, props.onTargetFilterChange],
+        _ref2 = _slicedToArray(_ref, 2),
+        setFilterState = _ref2[0],
+        onFilterChange = _ref2[1];
+
+    if (onFilterChange) {
+      onFilterChange({
+        originalEvent: originalEvent,
+        value: value
+      });
+    } else {
+      setFilterState(value);
+    }
+  };
+
+  var getVisibleList = function getVisibleList(list, type) {
+    var _ref3 = type === 'source' ? [sourceFilteredValue, filterSource] : [targetFilteredValue, filterTarget],
+        _ref4 = _slicedToArray(_ref3, 2),
+        filteredValue = _ref4[0],
+        filterCallback = _ref4[1];
+
+    return hasFilterBy && ObjectUtils.isNotEmpty(filteredValue) ? filterCallback(filteredValue) : list;
+  };
+
+  var filterSource = function filterSource() {
+    var value = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '';
+    var filteredValue = value.trim().toLocaleLowerCase(props.filterLocale);
+    return filter(props.source, filteredValue);
+  };
+
+  var filterTarget = function filterTarget() {
+    var value = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '';
+    var filteredValue = value.trim().toLocaleLowerCase(props.filterLocale);
+    return filter(props.target, filteredValue);
+  };
+
+  var filter = function filter(list, filterValue) {
+    var searchFields = hasFilterBy ? props.filterBy.split(',') : [];
+    return FilterService.filter(list, searchFields, filterValue, props.filterMatchMode, props.filterLocale);
+  };
+
   useUpdateEffect(function () {
     if (reorderedListElementRef.current) {
       handleScrollPosition(reorderedListElementRef.current, reorderDirection.current);
@@ -32664,6 +33156,8 @@ var PickList = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function (
   var className = classNames('p-picklist p-component', props.className);
   var sourceItemTemplate = props.sourceItemTemplate ? props.sourceItemTemplate : props.itemTemplate;
   var targetItemTemplate = props.targetItemTemplate ? props.targetItemTemplate : props.itemTemplate;
+  var sourceList = getVisibleList(props.source, 'source');
+  var targetList = getVisibleList(props.target, 'target');
   return /*#__PURE__*/React.createElement("div", _extends({
     id: props.id,
     className: className,
@@ -32676,7 +33170,8 @@ var PickList = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function (
     dataKey: props.dataKey
   }), /*#__PURE__*/React.createElement(PickListSubList, {
     ref: sourceListElementRef,
-    list: props.source,
+    type: "source",
+    list: sourceList,
     selection: sourceSelection,
     onSelectionChange: function onSelectionChange(e) {
       return _onSelectionChange(e, 'sourceSelection', props.onSourceSelectionChange);
@@ -32688,17 +33183,25 @@ var PickList = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function (
     listClassName: "p-picklist-source",
     metaKeySelection: props.metaKeySelection,
     tabIndex: props.tabIndex,
-    dataKey: props.dataKey
+    dataKey: props.dataKey,
+    filterValue: sourceFilteredValue,
+    onFilter: onFilter,
+    showFilter: showSourceFilter,
+    placeholder: props.sourceFilterPlaceholder,
+    template: props.sourceFilterTemplate
   }), /*#__PURE__*/React.createElement(PickListTransferControls, {
     onTransfer: onTransfer,
     source: props.source,
+    visibleSourceList: sourceList,
     target: props.target,
+    visibleTargetList: targetList,
     sourceSelection: sourceSelection,
     targetSelection: targetSelection,
     dataKey: props.dataKey
   }), /*#__PURE__*/React.createElement(PickListSubList, {
     ref: targetListElementRef,
-    list: props.target,
+    type: "target",
+    list: targetList,
     selection: targetSelection,
     onSelectionChange: function onSelectionChange(e) {
       return _onSelectionChange(e, 'targetSelection', props.onTargetSelectionChange);
@@ -32710,7 +33213,12 @@ var PickList = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function (
     listClassName: "p-picklist-target",
     metaKeySelection: props.metaKeySelection,
     tabIndex: props.tabIndex,
-    dataKey: props.dataKey
+    dataKey: props.dataKey,
+    filterValue: targetFilteredValue,
+    onFilter: onFilter,
+    showFilter: showTargetFilter,
+    placeholder: props.targetFilterPlaceholder,
+    template: props.targetFilterTemplate
   }), props.showTargetControls && /*#__PURE__*/React.createElement(PickListControls, {
     list: props.target,
     selection: targetSelection,
@@ -32736,6 +33244,17 @@ PickList.defaultProps = {
   showSourceControls: true,
   showTargetControls: true,
   metaKeySelection: true,
+  filterBy: null,
+  filterMatchMode: 'contains',
+  filterLocale: undefined,
+  sourceFilterValue: null,
+  targetFilterValue: null,
+  showSourceFilter: true,
+  showTargetFilter: true,
+  sourceFilterPlaceholder: null,
+  targetFilterPlaceholder: null,
+  sourceFilterTemplate: null,
+  targetFilterTemplate: null,
   tabIndex: 0,
   dataKey: null,
   itemTemplate: null,
@@ -32747,7 +33266,9 @@ PickList.defaultProps = {
   onMoveToTarget: null,
   onMoveAllToTarget: null,
   onSourceSelectionChange: null,
-  onTargetSelectionChange: null
+  onTargetSelectionChange: null,
+  onSourceFilterChange: null,
+  onTargetFilterChange: null
 };
 
 var ProgressSpinner = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function (props, ref) {
@@ -32816,7 +33337,7 @@ var RadioButton = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(functio
         }
       });
       inputRef.current.checked = !props.checked;
-      inputRef.current.focus();
+      DomHandler.focus(inputRef.current);
     }
   };
 
@@ -33767,9 +34288,9 @@ Skeleton.defaultProps = {
   className: null
 };
 
-function ownKeys$a(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function ownKeys$9(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 
-function _objectSpread$a(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$a(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$a(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+function _objectSpread$9(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$9(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$9(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 var SlideMenuSub = /*#__PURE__*/React.memo(function (props) {
   var _React$useState = React.useState(null),
       _React$useState2 = _slicedToArray(_React$useState, 2),
@@ -33800,7 +34321,7 @@ var SlideMenuSub = /*#__PURE__*/React.memo(function (props) {
 
     if (item.items) {
       var key = createKey(item, index);
-      setRenderSubMenu(_objectSpread$a(_objectSpread$a({}, renderSubMenu), {}, _defineProperty({}, key, true)));
+      setRenderSubMenu(_objectSpread$9(_objectSpread$9({}, renderSubMenu), {}, _defineProperty({}, key, true)));
       setActiveItemState(item);
       props.onForward();
     }
@@ -33885,6 +34406,7 @@ var SlideMenuSub = /*#__PURE__*/React.memo(function (props) {
 
     return /*#__PURE__*/React.createElement("li", {
       key: key,
+      id: item.id,
       className: className,
       style: item.style
     }, content, submenu);
@@ -34413,9 +34935,9 @@ Slider.defaultProps = {
   'aria-labelledby': null
 };
 
-function ownKeys$9(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function ownKeys$8(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 
-function _objectSpread$9(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$9(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$9(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+function _objectSpread$8(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$8(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$8(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 var SpeedDial = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function (props, ref) {
   var _classNames2;
 
@@ -34560,7 +35082,7 @@ var SpeedDial = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function
   var getItemStyle = function getItemStyle(index) {
     var transitionDelay = calculateTransitionDelay(index);
     var pointStyle = calculatePointStyle(index);
-    return _objectSpread$9({
+    return _objectSpread$8({
       transitionDelay: "".concat(transitionDelay, "ms")
     }, pointStyle);
   };
@@ -34992,6 +35514,8 @@ var SplitButton = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(functio
     type: "button",
     className: buttonClassName,
     icon: props.icon,
+    loading: props.loading,
+    loadingIcon: props.loadingIcon,
     label: props.label,
     onClick: props.onClick,
     disabled: props.disabled,
@@ -35029,6 +35553,8 @@ SplitButton.defaultProps = {
   id: null,
   label: null,
   icon: null,
+  loading: false,
+  loadingIcon: 'pi pi-spinner pi-spin',
   model: null,
   disabled: null,
   style: null,
@@ -35065,6 +35591,7 @@ var Splitter = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function (
   var nextPanelSize = React.useRef(null);
   var prevPanelIndex = React.useRef(null);
   var panelSizes = React.useRef(null);
+  var mounted = React.useRef(false);
   var isStateful = props.stateKey != null;
 
   var _useEventListener = useEventListener({
@@ -35135,7 +35662,7 @@ var Splitter = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function (
   };
 
   var saveState = function saveState() {
-    getStorage().setItem(props.stateKey, JSON.stringify(panelSizes));
+    getStorage().setItem(props.stateKey, JSON.stringify(panelSizes.current));
   };
 
   var restoreState = function restoreState() {
@@ -35150,7 +35677,7 @@ var Splitter = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function (
       });
 
       children.forEach(function (child, i) {
-        child.style.flexBasis = 'calc(' + panelSizes[i] + '% - ' + (props.children.length - 1) * props.gutterSize + 'px)';
+        child.style.flexBasis = 'calc(' + panelSizes.current[i] + '% - ' + (props.children.length - 1) * props.gutterSize + 'px)';
       });
       return true;
     }
@@ -35198,7 +35725,7 @@ var Splitter = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function (
     if (props.onResizeEnd) {
       props.onResizeEnd({
         originalEvent: event,
-        sizes: panelSizes
+        sizes: panelSizes.current
       });
     }
 
@@ -35231,7 +35758,7 @@ var Splitter = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function (
     window.removeEventListener('touchend', onGutterTouchEnd);
   };
 
-  useMountEffect(function () {
+  React.useEffect(function () {
     var panelElements = _toConsumableArray(elementRef.current.children).filter(function (child) {
       return DomHandler.hasClass(child, 'p-splitter-panel');
     });
@@ -35245,7 +35772,7 @@ var Splitter = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function (
     if (props.children && props.children.length) {
       var initialized = false;
 
-      if (isStateful) {
+      if (isStateful && !mounted.current) {
         initialized = restoreState();
       }
 
@@ -35259,8 +35786,11 @@ var Splitter = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function (
           return _panelSizes;
         });
         panelSizes.current = _panelSizes;
+        mounted.current && saveState();
       }
     }
+
+    mounted.current = true;
   });
 
   var createPanel = function createPanel(panel, index) {
@@ -35413,6 +35943,7 @@ var Steps = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function (pro
 
     return /*#__PURE__*/React.createElement("li", {
       key: key,
+      id: item.id,
       className: className,
       style: item.style,
       role: "tab",
@@ -35823,9 +36354,9 @@ TabMenu.defaultProps = {
   onTabChange: null
 };
 
-function ownKeys$8(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function ownKeys$7(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 
-function _objectSpread$8(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$8(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$8(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+function _objectSpread$7(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$7(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$7(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 var TabPanel = function TabPanel() {};
 var TabView = /*#__PURE__*/React.forwardRef(function (props, ref) {
   var _React$useState = React.useState(props.id),
@@ -36020,7 +36551,7 @@ var TabView = /*#__PURE__*/React.forwardRef(function (props, ref) {
         headerTemplate = _tab$props.headerTemplate,
         closable = _tab$props.closable;
 
-    var style = _objectSpread$8(_objectSpread$8({}, headerStyle || {}), _style || {});
+    var style = _objectSpread$7(_objectSpread$7({}, headerStyle || {}), _style || {});
 
     var className = classNames('p-unselectable-text', {
       'p-tabview-selected p-highlight': selected,
@@ -36127,7 +36658,7 @@ var TabView = /*#__PURE__*/React.forwardRef(function (props, ref) {
       if (shouldUseTab(tab, index) && (!props.renderActiveOnly || isSelected(index))) {
         var selected = isSelected(index);
 
-        var style = _objectSpread$8(_objectSpread$8({}, tab.props.contentStyle || {}), tab.props.style || {});
+        var style = _objectSpread$7(_objectSpread$7({}, tab.props.contentStyle || {}), tab.props.style || {});
 
         var _className2 = classNames(tab.props.contentClassName, tab.props.className, 'p-tabview-panel', {
           'p-hidden': !selected
@@ -36283,7 +36814,7 @@ var Terminal = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function (
   var isEmitted = React.useRef(false);
 
   var onClick = function onClick() {
-    inputRef.current.focus();
+    DomHandler.focus(inputRef.current);
   };
 
   var onInputChange = function onInputChange(e) {
@@ -36598,7 +37129,8 @@ var TieredMenuSub = /*#__PURE__*/React.memo(function (props) {
   };
 
   var createMenuItem = function createMenuItem(item, index) {
-    var _className = item.className,
+    item.id;
+        var _className = item.className,
         style = item.style,
         disabled = item.disabled,
         _icon = item.icon,
@@ -36667,6 +37199,7 @@ var TieredMenuSub = /*#__PURE__*/React.memo(function (props) {
 
     return /*#__PURE__*/React.createElement("li", {
       key: key,
+      id: item,
       className: className,
       style: style,
       onMouseEnter: function onMouseEnter(event) {
@@ -36888,9 +37421,9 @@ Timeline.defaultProps = {
   content: null
 };
 
-function ownKeys$7(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function ownKeys$6(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 
-function _objectSpread$7(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$7(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$7(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+function _objectSpread$6(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$6(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$6(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 var ToastMessage = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function (props, ref) {
   var _props$message = props.message,
       severity = _props$message.severity,
@@ -36938,7 +37471,7 @@ var ToastMessage = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(functi
 
   var createMessage = function createMessage() {
     if (props.message) {
-      var contentEl = ObjectUtils.getJSXElement(content, _objectSpread$7(_objectSpread$7({}, props), {}, {
+      var contentEl = ObjectUtils.getJSXElement(content, _objectSpread$6(_objectSpread$6({}, props), {}, {
         onClose: onClose
       }));
       var iconClassName = classNames('p-toast-message-icon pi', {
@@ -36980,9 +37513,6 @@ var ToastMessage = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(functi
 }));
 ToastMessage.displayName = 'ToastMessage';
 
-function ownKeys$6(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-
-function _objectSpread$6(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$6(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$6(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 var messageIdx = 0;
 var Toast = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function (props, ref) {
   var _React$useState = React.useState([]),
@@ -36997,21 +37527,13 @@ var Toast = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function (pro
       var messages;
 
       if (Array.isArray(value)) {
-        var currentMessages = _toConsumableArray(value);
-
-        for (var i = 0; i < currentMessages.length; i++) {
-          var message = _objectSpread$6({}, currentMessages[i]);
-
-          message.id = messageIdx++;
-          currentMessages[i] = message;
+        for (var i = 0; i < value.length; i++) {
+          value[i].id = messageIdx++;
+          messages = [].concat(_toConsumableArray(messagesState), _toConsumableArray(value));
         }
-
-        messages = [].concat(_toConsumableArray(messagesState), _toConsumableArray(currentMessages));
       } else {
-        var currentMessage = _objectSpread$6({}, value);
-
-        currentMessage.id = messageIdx++;
-        messages = messagesState ? [].concat(_toConsumableArray(messagesState), [currentMessage]) : [currentMessage];
+        value.id = messageIdx++;
+        messages = messagesState ? [].concat(_toConsumableArray(messagesState), [value]) : [value];
       }
 
       messagesState.length === 0 && ZIndexUtils.set('toast', containerRef.current, PrimeReact.autoZIndex, props.baseZIndex || PrimeReact.zIndex['toast']);
@@ -37024,6 +37546,11 @@ var Toast = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function (pro
     setMessagesState([]);
   };
 
+  var replace = function replace(value) {
+    var replaced = Array.isArray(value) ? value : [value];
+    setMessagesState(replaced);
+  };
+
   var onClose = function onClose(message) {
     var messages = messagesState.filter(function (msg) {
       return msg.id !== message.id;
@@ -37037,7 +37564,7 @@ var Toast = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function (pro
   };
 
   var onExited = function onExited() {
-    messagesState.length === 0 && ZIndexUtils.clear(containerRef.current);
+    messagesState.length === 1 && ZIndexUtils.clear(containerRef.current);
     props.onHide && props.onHide();
   };
 
@@ -37047,6 +37574,7 @@ var Toast = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function (pro
   React.useImperativeHandle(ref, function () {
     return {
       show: show,
+      replace: replace,
       clear: clear
     };
   });
@@ -37310,6 +37838,14 @@ var UITreeNode = /*#__PURE__*/React.memo(function (props) {
         } else {
           var nextNodeElement = nodeElement.nextElementSibling;
 
+          while (nextNodeElement) {
+            if (!DomHandler.hasClass(nextNodeElement, 'p-treenode-droppoint')) {
+              break;
+            }
+
+            nextNodeElement = nextNodeElement.nextElementSibling;
+          }
+
           if (nextNodeElement) {
             focusNode(nextNodeElement);
           } else {
@@ -37381,7 +37917,7 @@ var UITreeNode = /*#__PURE__*/React.memo(function (props) {
   };
 
   var focusNode = function focusNode(element) {
-    element.children[0].focus();
+    element && element.children[0] && element.children[0].focus();
   };
 
   var onClick = function onClick(event) {
@@ -38599,7 +39135,7 @@ var TreeSelect = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function
 
   var onClick = function onClick(event) {
     if (!props.disabled && (!overlayRef.current || !overlayRef.current.contains(event.target)) && !DomHandler.hasClass(event.target, 'p-treeselect-close')) {
-      focusInputRef.current.focus();
+      DomHandler.focus(focusInputRef.current);
       overlayVisibleState ? hide() : show();
     }
   };
@@ -38715,7 +39251,7 @@ var TreeSelect = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function
     bindOverlayListener();
 
     if (props.filter && props.filterInputAutoFocus) {
-      filterInputRef.current.focus();
+      DomHandler.focus(filterInputRef.current, props.filterInputAutoFocus);
     }
 
     props.onShow && props.onShow();
@@ -40681,6 +41217,7 @@ var TreeTable = /*#__PURE__*/React.forwardRef(function (props, ref) {
 
     if (columnSortable.current && columnSortable.current === 'custom' && columnSortFunction.current) {
       value = columnSortFunction.current({
+        rowData: value,
         field: getSortField(),
         order: getSortOrder()
       });