primereact 8.0.1 → 8.2.0

package/primereact.all.cjs.js

@@ -259,7 +259,17 @@ var locales = {
     strong: 'Strong',
     passwordPrompt: 'Enter a password',
     emptyFilterMessage: 'No available options',
-    emptyMessage: 'No results found'
+    emptyMessage: 'No results found',
+    aria: {
+      trueLabel: 'True',
+      falseLabel: 'False',
+      nullLabel: 'Not Selected',
+      pageLabel: 'Page',
+      firstPageLabel: 'First Page',
+      lastPageLabel: 'Last Page',
+      nextPageLabel: 'Next Page',
+      previousPageLabel: 'Previous Page'
+    }
   }
 };
 
@@ -295,6 +305,16 @@ function localeOption(key, locale) {
   }
 }
 
+function ariaLabel(key) {
+  var _locale = PrimeReact.locale;
+
+  try {
+    return localeOptions(_locale)['aria'][key];
+  } catch (error) {
+    throw new Error("The ".concat(key, " option is not found in the current locale('").concat(_locale, "')."));
+  }
+}
+
 function localeOptions(locale) {
   var _locale = locale || PrimeReact.locale;
 
@@ -1444,6 +1464,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) {
@@ -1839,12 +1874,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);
@@ -2380,7 +2412,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;
@@ -3032,9 +3068,25 @@ var useInterval = function useInterval(fn) {
 
 var useStorage = function useStorage(initialValue, key) {
   var storage = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 'local';
-  // Since the local storage API isn't available in server-rendering environments, 
+  // Since the local storage API isn't available in server-rendering environments,
   // we check that typeof window !== 'undefined' to make SSR and SSG work properly.
-  var storageAvailable = typeof window !== 'undefined';
+  var storageAvailable = typeof window !== 'undefined'; // subscribe to window storage event so changes in one tab to a stored value
+  // are properly reflected in all tabs
+
+  var _useEventListener = useEventListener({
+    target: 'window',
+    type: 'storage',
+    listener: function listener(event) {
+      var area = storage === 'local' ? window.localStorage : window.sessionStorage;
+
+      if (event.storageArea === area && event.key === key) {
+        setStoredValue(event.newValue || undefined);
+      }
+    }
+  }),
+      _useEventListener2 = _slicedToArray(_useEventListener, 2),
+      bindWindowStorageListener = _useEventListener2[0],
+      unbindWindowStorageListener = _useEventListener2[1];
 
   var _React$useState = React__namespace.useState(function () {
     if (!storageAvailable) {
@@ -3068,8 +3120,36 @@ var useStorage = function useStorage(initialValue, key) {
     }
   };
 
+  React__namespace.useEffect(function () {
+    bindWindowStorageListener();
+    return function () {
+      return unbindWindowStorageListener();
+    };
+  }, []);
   return [storedValue, setValue];
 };
+/**
+ * Hook to wrap around useState that stores the value in the browser local storage.
+ *
+ * @param {any} initialValue the initial value to store
+ * @param {string} key the key to store the value in local storage
+ * @returns a stateful value, and a function to update it.
+ */
+
+var useLocalStorage = function useLocalStorage(initialValue, key) {
+  return useStorage(initialValue, key, 'local');
+};
+/**
+ * Hook to wrap around useState that stores the value in the browser session storage.
+ *
+ * @param {any} initialValue the initial value to store
+ * @param {string} key the key to store the value in session storage
+ * @returns a stateful value, and a function to update it.
+ */
+
+var useSessionStorage = function useSessionStorage(initialValue, key) {
+  return useStorage(initialValue, key, 'session');
+};
 /* eslint-enable */
 
 /* eslint-disable */
@@ -3508,6 +3588,11 @@ var Tooltip = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__namespace.
       positionState = _React$useState4[0],
       setPositionState = _React$useState4[1];
 
+  var _React$useState5 = React__namespace.useState(''),
+      _React$useState6 = _slicedToArray(_React$useState5, 2),
+      classNameState = _React$useState6[0],
+      setClassNameState = _React$useState6[1];
+
   var elementRef = React__namespace.useRef(null);
   var textRef = React__namespace.useRef(null);
   var currentTargetRef = React__namespace.useRef(null);
@@ -3626,7 +3711,7 @@ var Tooltip = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__namespace.
       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']);
@@ -3649,7 +3734,7 @@ var Tooltip = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__namespace.
         align(currentTargetRef.current, {
           x: e.pageX,
           y: e.pageY
-        });
+        }, position);
       });
     };
 
@@ -3664,16 +3749,16 @@ var Tooltip = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__namespace.
 
       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'));
         });
       }
     }
@@ -3683,7 +3768,6 @@ var Tooltip = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__namespace.
     clearTimeouts();
 
     if (visibleState) {
-      DomHandler.removeClass(currentTargetRef.current, getTargetOption(currentTargetRef.current, 'classname'));
       var success = sendCallback(props.onBeforeHide, {
         originalEvent: e,
         target: currentTargetRef.current
@@ -3699,6 +3783,7 @@ var Tooltip = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__namespace.
           DomHandler.removeClass(elementRef.current, 'p-tooltip-active');
           setVisibleState(false);
           setPositionState(props.position);
+          setClassNameState('');
           currentTargetRef.current = null;
           containerSize.current = null;
           allowHide.current = true;
@@ -3711,9 +3796,10 @@ var Tooltip = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__namespace.
     }
   };
 
-  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 = {
@@ -3727,7 +3813,7 @@ var Tooltip = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__namespace.
           mouseTrackTop = _getMouseTrackPositio.top,
           mouseTrackLeft = _getMouseTrackPositio.left;
 
-      switch (positionState) {
+      switch (currentPosition) {
         case 'left':
           left -= _containerSize.width + mouseTrackLeft;
           top -= _containerSize.height / 2 - mouseTrackTop;
@@ -3760,28 +3846,28 @@ var Tooltip = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__namespace.
       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';
     }
   };
 
@@ -3967,7 +4053,7 @@ var Tooltip = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__namespace.
 
   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__namespace.createElement("div", _extends({
       id: props.id,
@@ -4087,7 +4173,7 @@ var Button = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__namespace.f
   var icon = createIcon();
   var label = createLabel();
   var badge = createBadge();
-  var defaultAriaLabel = props.label ? props.label + (props.badge ? ' ' + props.badge : '') : '';
+  var defaultAriaLabel = props.label ? props.label + (props.badge ? ' ' + props.badge : '') : props['aria-label'];
   return /*#__PURE__*/React__namespace.createElement(React__namespace.Fragment, null, /*#__PURE__*/React__namespace.createElement("button", _extends({
     ref: elementRef,
     "aria-label": defaultAriaLabel
@@ -4340,7 +4426,7 @@ var VirtualScroller = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__na
       numToleratedItemsState = _React$useState8[0],
       setNumToleratedItemsState = _React$useState8[1];
 
-  var _React$useState9 = React__namespace.useState(props.loading),
+  var _React$useState9 = React__namespace.useState(props.loading || false),
       _React$useState10 = _slicedToArray(_React$useState9, 2),
       loadingState = _React$useState10[0],
       setLoadingState = _React$useState10[1];
@@ -4363,10 +4449,39 @@ var VirtualScroller = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__na
     left: 0
   } : 0);
   var scrollTimeout = React__namespace.useRef(null);
+  var resizeTimeout = React__namespace.useRef(null);
+  var defaultWidth = React__namespace.useRef(null);
+  var defaultHeight = React__namespace.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);
   };
 
@@ -4376,9 +4491,6 @@ var VirtualScroller = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__na
     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;
 
@@ -4387,8 +4499,8 @@ var VirtualScroller = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__na
       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() {
@@ -4408,15 +4520,13 @@ var VirtualScroller = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__na
       };
 
       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));
       }
     }
   };
@@ -4429,8 +4539,6 @@ var VirtualScroller = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__na
           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;
@@ -4447,26 +4555,26 @@ var VirtualScroller = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__na
       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);
           }
@@ -4482,18 +4590,14 @@ var VirtualScroller = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__na
   };
 
   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));
     };
@@ -4502,13 +4606,14 @@ var VirtualScroller = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__na
     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,
@@ -4516,7 +4621,7 @@ var VirtualScroller = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__na
         };
       } else {
         var scrollPos = horizontal ? scrollLeft : scrollTop;
-        firstInViewport = calculateFirstInViewport(scrollPos, itemSize);
+        firstInViewport = calculateFirstInViewport(scrollPos, props.itemSize);
         lastInViewport = firstInViewport + numItemsInViewportState;
       }
     }
@@ -4532,7 +4637,6 @@ var VirtualScroller = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__na
   };
 
   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;
@@ -4546,9 +4650,9 @@ var VirtualScroller = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__na
     };
 
     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,
@@ -4593,15 +4697,26 @@ var VirtualScroller = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__na
     }
   };
 
+  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() {
@@ -4654,7 +4769,6 @@ var VirtualScroller = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__na
     var items = props.items;
 
     if (_spacerRef.current && items) {
-      var itemSize = props.itemSize;
       var contentPos = getContentPosition();
 
       var setProp = function setProp(_name, _value, _size) {
@@ -4664,10 +4778,10 @@ var VirtualScroller = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__na
       };
 
       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);
       }
     }
   };
@@ -4675,7 +4789,6 @@ var VirtualScroller = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__na
   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;
@@ -4691,9 +4804,9 @@ var VirtualScroller = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__na
       };
 
       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);
       }
     }
@@ -4701,7 +4814,6 @@ var VirtualScroller = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__na
 
   var onScrollPositionChange = function onScrollPositionChange(event) {
     var target = event.target;
-    var itemSize = props.itemSize;
     var contentPos = getContentPosition();
 
     var calculateScrollPos = function calculateScrollPos(_pos, _cpos) {
@@ -4732,16 +4844,20 @@ var VirtualScroller = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__na
 
     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),
@@ -4755,8 +4871,8 @@ var VirtualScroller = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__na
         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
       };
@@ -4764,20 +4880,21 @@ var VirtualScroller = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__na
       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
     };
   };
 
@@ -4785,7 +4902,8 @@ var VirtualScroller = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__na
     var _onScrollPositionChan = onScrollPositionChange(event),
         first = _onScrollPositionChan.first,
         last = _onScrollPositionChan.last,
-        isRangeChanged = _onScrollPositionChan.isRangeChanged;
+        isRangeChanged = _onScrollPositionChan.isRangeChanged,
+        scrollPos = _onScrollPositionChan.scrollPos;
 
     if (isRangeChanged) {
       var newState = {
@@ -4795,6 +4913,7 @@ var VirtualScroller = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__na
       setContentPosition(newState);
       setFirstState(first);
       setLastState(last);
+      lastScrollPos.current = scrollPos;
       props.onScrollIndexChange && props.onScrollIndexChange(newState);
 
       if (props.lazy) {
@@ -4821,7 +4940,7 @@ var VirtualScroller = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__na
       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);
@@ -4830,10 +4949,32 @@ var VirtualScroller = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__na
     }
   };
 
+  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,
@@ -4871,25 +5012,48 @@ var VirtualScroller = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__na
   };
 
   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 ? {
@@ -4899,6 +5063,7 @@ var VirtualScroller = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__na
   }, [props.orientation]);
   React__namespace.useImperativeHandle(ref, function () {
     return {
+      getElementRef: getElementRef,
       scrollTo: scrollTo,
       scrollToIndex: scrollToIndex,
       scrollInView: scrollInView,
@@ -4930,6 +5095,13 @@ var VirtualScroller = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__na
             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__namespace.createElement("div", {
@@ -5052,14 +5224,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,
@@ -5075,7 +5250,7 @@ var AutoCompletePanel = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__
     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;
@@ -5086,6 +5261,7 @@ var AutoCompletePanel = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__
         role: "option",
         "aria-selected": selected,
         className: "p-autocomplete-item",
+        style: style,
         onClick: function onClick(e) {
           return props.onItemClick(e, item);
         },
@@ -5096,14 +5272,20 @@ var AutoCompletePanel = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__
   };
 
   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__namespace.createElement(React__namespace.Fragment, {
         key: key
       }, /*#__PURE__*/React__namespace.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;
@@ -5113,6 +5295,7 @@ var AutoCompletePanel = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__
         role: "option",
         "aria-selected": props.selectedItem === suggestion,
         className: "p-autocomplete-item",
+        style: style,
         onClick: function onClick(e) {
           return props.onItemClick(e, suggestion);
         }
@@ -5130,9 +5313,10 @@ var AutoCompletePanel = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__
         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);
@@ -5314,7 +5498,7 @@ var AutoComplete = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__names
     }
 
     if (!preventInputFocus) {
-      inputRef.current.focus();
+      DomHandler.focus(inputRef.current);
       hide();
     }
   };
@@ -5379,7 +5563,8 @@ var AutoComplete = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__names
 
   var onOverlayEntering = function onOverlayEntering() {
     if (props.autoHighlight && props.suggestions && props.suggestions.length) {
-      DomHandler.addClass(overlayRef.current.firstChild.firstChild, 'p-highlight');
+      var element = getScrollableElement().firstChild.firstChild;
+      DomHandler.addClass(element, 'p-highlight');
     }
   };
 
@@ -5411,7 +5596,7 @@ var AutoComplete = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__names
 
   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');
@@ -5452,7 +5637,7 @@ var AutoComplete = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__names
             if (nextElement) {
               DomHandler.addClass(nextElement, 'p-highlight');
               DomHandler.removeClass(highlightItem, 'p-highlight');
-              DomHandler.scrollInView(overlayRef.current, nextElement);
+              DomHandler.scrollInView(getScrollableElement(), nextElement);
             }
           } else {
             highlightItem = DomHandler.findSingle(overlayRef.current, 'li');
@@ -5477,7 +5662,7 @@ var AutoComplete = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__names
             if (previousElement) {
               DomHandler.addClass(previousElement, 'p-highlight');
               DomHandler.removeClass(highlightItem, 'p-highlight');
-              DomHandler.scrollInView(overlayRef.current, previousElement);
+              DomHandler.scrollInView(getScrollableElement(), previousElement);
             }
           }
 
@@ -5489,9 +5674,9 @@ var AutoComplete = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__names
           if (highlightItem) {
             selectHighlightItem(event, highlightItem);
             hide();
+            event.preventDefault();
           }
 
-          event.preventDefault();
           break;
         //escape
 
@@ -5584,7 +5769,7 @@ var AutoComplete = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__names
   };
 
   var onMultiContainerClick = function onMultiContainerClick(event) {
-    inputRef.current.focus();
+    DomHandler.focus(inputRef.current);
     props.onClick && props.onClick(event);
   };
 
@@ -5610,6 +5795,10 @@ var AutoComplete = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__names
     }) : -1;
   };
 
+  var getScrollableElement = function getScrollableElement() {
+    return virtualScrollerRef.current ? overlayRef.current.firstChild : overlayRef.current;
+  };
+
   var getOptionGroupLabel = function getOptionGroupLabel(optionGroup) {
     return props.optionGroupLabel ? ObjectUtils.resolveFieldData(optionGroup, props.optionGroupLabel) : optionGroup;
   };
@@ -5626,8 +5815,8 @@ var AutoComplete = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__names
       setIdState(UniqueComponentId());
     }
 
-    if (props.autoFocus && inputRef.current) {
-      inputRef.current.focus();
+    if (props.autoFocus) {
+      DomHandler.focus(inputRef.current, props.autoFocus);
     }
   });
   useUpdateEffect(function () {
@@ -5656,7 +5845,7 @@ var AutoComplete = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__names
 
   var createSimpleAutoComplete = function createSimpleAutoComplete() {
     var value = formatValue(props.value);
-    var ariaControls = idState + '_list';
+    var ariaControls = overlayVisibleState ? idState + '_list' : null;
     var className = classNames('p-autocomplete-input', props.inputClassName, {
       'p-autocomplete-dd-input': props.dropdown
     });
@@ -5666,10 +5855,13 @@ var AutoComplete = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__names
       type: props.type,
       name: props.name,
       defaultValue: value,
-      role: "searchbox",
+      role: "combobox",
       "aria-autocomplete": "list",
       "aria-controls": ariaControls,
-      "aria-labelledby": props.ariaLabelledBy,
+      "aria-haspopup": "listbox",
+      "aria-expanded": overlayVisibleState,
+      "aria-labelledby": props['aria-labelledby'],
+      "aria-label": props['aria-label'],
       className: className,
       style: props.inputStyle,
       autoComplete: "off",
@@ -5716,7 +5908,7 @@ var AutoComplete = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__names
   };
 
   var createMultiInput = function createMultiInput() {
-    var ariaControls = idState + '_list';
+    var ariaControls = overlayVisibleState ? idState + '_list' : null;
     return /*#__PURE__*/React__namespace.createElement("li", {
       className: "p-autocomplete-input-token"
     }, /*#__PURE__*/React__namespace.createElement("input", {
@@ -5724,10 +5916,13 @@ var AutoComplete = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__names
       type: props.type,
       disabled: props.disabled,
       placeholder: props.placeholder,
-      role: "searchbox",
+      role: "combobox",
       "aria-autocomplete": "list",
       "aria-controls": ariaControls,
-      "aria-labelledby": props.ariaLabelledBy,
+      "aria-haspopup": "listbox",
+      "aria-expanded": overlayVisibleState,
+      "aria-labelledby": props['aria-labelledby'],
+      "aria-label": props['aria-label'],
       autoComplete: "off",
       tabIndex: props.tabIndex,
       onChange: onInputChange,
@@ -5804,10 +5999,7 @@ var AutoComplete = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__names
     ref: elementRef,
     id: idState,
     style: props.style,
-    className: className,
-    "aria-haspopup": "listbox",
-    "aria-expanded": overlayVisibleState,
-    "aria-owns": listId
+    className: className
   }, otherProps), input, loader, dropdown, /*#__PURE__*/React__namespace.createElement(AutoCompletePanel, _extends({
     ref: overlayRef,
     virtualScrollerRef: virtualScrollerRef
@@ -5869,13 +6061,14 @@ AutoComplete.defaultProps = {
   autoFocus: false,
   tooltip: null,
   tooltipOptions: null,
-  ariaLabelledBy: null,
   completeMethod: null,
   itemTemplate: null,
   selectedItemTemplate: null,
   transitionOptions: null,
   dropdownIcon: 'pi pi-chevron-down',
   removeIcon: 'pi pi-times-circle',
+  'aria-label': null,
+  'aria-labelledby': null,
   onChange: null,
   onFocus: null,
   onBlur: null,
@@ -5895,7 +6088,13 @@ AutoComplete.defaultProps = {
 
 var Avatar = /*#__PURE__*/React__namespace.forwardRef(function (props, ref) {
   var createContent = function createContent() {
-    if (props.label) {
+    if (props.image) {
+      return /*#__PURE__*/React__namespace.createElement("img", {
+        src: props.image,
+        alt: props.imageAlt,
+        onError: props.onImageError
+      });
+    } else if (props.label) {
       return /*#__PURE__*/React__namespace.createElement("span", {
         className: "p-avatar-text"
       }, props.label);
@@ -5905,12 +6104,6 @@ var Avatar = /*#__PURE__*/React__namespace.forwardRef(function (props, ref) {
       }, {
         props: props
       });
-    } else if (props.image) {
-      return /*#__PURE__*/React__namespace.createElement("img", {
-        src: props.image,
-        alt: props.imageAlt,
-        onError: props.onImageError
-      });
     }
 
     return null;
@@ -5963,8 +6156,8 @@ AvatarGroup.defaultProps = {
 var Badge = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__namespace.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);
@@ -6121,7 +6314,8 @@ var BreadCrumb = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__namespa
           url = home.url,
           disabled = home.disabled,
           style = home.style,
-          _className = home.className;
+          _className = home.className,
+          template = home.template;
 
       var _className2 = classNames('p-breadcrumb-home', {
         'p-disabled': disabled
@@ -6132,10 +6326,7 @@ var BreadCrumb = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__namespa
       }, {
         props: props
       });
-      return /*#__PURE__*/React__namespace.createElement("li", {
-        className: _className2,
-        style: style
-      }, /*#__PURE__*/React__namespace.createElement("a", {
+      var content = /*#__PURE__*/React__namespace.createElement("a", {
         href: url || '#',
         className: "p-menuitem-link",
         "aria-disabled": disabled,
@@ -6143,7 +6334,25 @@ var BreadCrumb = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__namespa
         onClick: function onClick(event) {
           return itemClick(event, home);
         }
-      }, icon));
+      }, icon);
+
+      if (template) {
+        var defaultContentOptions = {
+          onClick: function onClick(event) {
+            return itemClick(event, home);
+          },
+          className: 'p-menuitem-link',
+          labelClassName: 'p-menuitem-text',
+          element: content,
+          props: props
+        };
+        content = ObjectUtils.getJSXElement(template, home, defaultContentOptions);
+      }
+
+      return /*#__PURE__*/React__namespace.createElement("li", {
+        className: _className2,
+        style: style
+      }, content);
     }
 
     return null;
@@ -6298,6 +6507,7 @@ var Calendar = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__namespace
   var overlayEventListener = React__namespace.useRef(null);
   var touchUIMaskClickListener = React__namespace.useRef(null);
   var isOverlayClicked = React__namespace.useRef(false);
+  var ignoreMaskChange = React__namespace.useRef(false);
 
   var _React$useState7 = React__namespace.useState('date'),
       _React$useState8 = _slicedToArray(_React$useState7, 2),
@@ -6417,7 +6627,7 @@ var Calendar = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__namespace
   var reFocusInputField = function reFocusInputField() {
     if (!props.inline && inputRef.current) {
       ignoreFocusFunctionality.current = true;
-      inputRef.current.focus();
+      DomHandler.focus(inputRef.current);
     }
   };
 
@@ -6990,7 +7200,11 @@ var Calendar = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__namespace
     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();
   };
 
@@ -7027,6 +7241,14 @@ var Calendar = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__namespace
     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;
@@ -7191,6 +7413,56 @@ var Calendar = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__namespace
       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) {
@@ -7518,6 +7790,8 @@ var Calendar = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__namespace
       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);
@@ -8628,7 +8902,11 @@ var Calendar = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__namespace
         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;
         }
       });
     }
@@ -8668,7 +8946,10 @@ var Calendar = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__namespace
     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) {
@@ -8726,7 +9007,7 @@ var Calendar = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__namespace
     }), /*#__PURE__*/React__namespace.createElement(Ripple, null));
   };
 
-  var createTitleMonthElement = function createTitleMonthElement() {
+  var createTitleMonthElement = function createTitleMonthElement(month) {
     var monthNames = localeOption('monthNames', props.locale);
 
     if (props.monthNavigator && props.view !== 'month') {
@@ -8778,7 +9059,7 @@ var Calendar = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__namespace
       className: "p-datepicker-month p-link",
       onClick: switchToMonthView,
       disabled: switchViewButtonDisabled()
-    }, monthNames[currentMonth]);
+    }, monthNames[month]);
   };
 
   var createTitleYearElement = function createTitleYearElement() {
@@ -9394,7 +9675,7 @@ var Calendar = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__namespace
     onExit: onOverlayExit,
     onExited: onOverlayExited,
     transitionOptions: props.transitionOptions
-  }, datePicker, timePicker, buttonBar, footer, monthPicker, yearPicker));
+  }, datePicker, timePicker, monthPicker, yearPicker, buttonBar, footer));
 }));
 Calendar.displayName = 'Calendar';
 Calendar.defaultProps = {
@@ -9451,6 +9732,7 @@ Calendar.defaultProps = {
   minDate: null,
   maxDate: null,
   maxDateCount: null,
+  showMinMaxRange: false,
   showOtherMonths: true,
   selectOtherMonths: false,
   showButtonBar: false,
@@ -9532,6 +9814,7 @@ var Captcha = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__namespace.
 
       script.onload = function () {
         if (!window.grecaptcha) {
+          // eslint-disable-next-line no-console
           console.warn('Recaptcha is not loaded');
           return;
         }
@@ -9694,10 +9977,10 @@ var Carousel = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__namespace
   var prevPage = usePrevious(props.page);
   var isVertical = props.orientation === 'vertical';
   var circular = props.circular || !!props.autoplayInterval;
-  var isCircular = circular && props.value.length >= numVisibleState;
-  var isAutoplay = props.autoplayInterval && allowAutoplay.current;
+  var isCircular = circular && props.value && props.value.length >= numVisibleState;
   var currentPage = props.onPageChange ? props.page : pageState;
-  var totalIndicators = props.value ? Math.ceil((props.value.length - numVisibleState) / numScrollState) + 1 : 0;
+  var totalIndicators = props.value ? Math.max(Math.ceil((props.value.length - numVisibleState) / numScrollState) + 1, 0) : 0;
+  var isAutoplay = totalIndicators && props.autoplayInterval && allowAutoplay.current;
 
   var _useResizeListener = useResizeListener({
     listener: function listener() {
@@ -10131,14 +10414,14 @@ var Carousel = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__namespace
       'pi-chevron-left': !isVertical,
       'pi-chevron-up': isVertical
     });
-    return /*#__PURE__*/React__namespace.createElement("button", {
+    return /*#__PURE__*/React__namespace.createElement(Button, {
       type: "button",
       className: className,
+      icon: iconClassName,
       onClick: navBackward,
-      disabled: isDisabled
-    }, /*#__PURE__*/React__namespace.createElement("span", {
-      className: iconClassName
-    }), /*#__PURE__*/React__namespace.createElement(Ripple, null));
+      disabled: isDisabled,
+      "aria-label": ariaLabel('previousPageLabel')
+    });
   };
 
   var createForwardNavigator = function createForwardNavigator() {
@@ -10150,14 +10433,14 @@ var Carousel = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__namespace
       'pi-chevron-right': !isVertical,
       'pi-chevron-down': isVertical
     });
-    return /*#__PURE__*/React__namespace.createElement("button", {
+    return /*#__PURE__*/React__namespace.createElement(Button, {
       type: "button",
       className: className,
+      icon: iconClassName,
       onClick: navForward,
-      disabled: isDisabled
-    }, /*#__PURE__*/React__namespace.createElement("span", {
-      className: iconClassName
-    }), /*#__PURE__*/React__namespace.createElement(Ripple, null));
+      disabled: isDisabled,
+      "aria-label": ariaLabel('nextPageLabel')
+    });
   };
 
   var createIndicator = function createIndicator(index) {
@@ -10169,13 +10452,14 @@ var Carousel = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__namespace
     return /*#__PURE__*/React__namespace.createElement("li", {
       key: key,
       className: className
-    }, /*#__PURE__*/React__namespace.createElement("button", {
+    }, /*#__PURE__*/React__namespace.createElement(Button, {
       type: "button",
       className: "p-link",
       onClick: function onClick(e) {
         return onDotClick(e, index);
-      }
-    }, /*#__PURE__*/React__namespace.createElement(Ripple, null)));
+      },
+      "aria-label": "".concat(ariaLabel('pageLabel'), " ").concat(index + 1)
+    }));
   };
 
   var createIndicators = function createIndicators() {
@@ -10515,7 +10799,7 @@ var CascadeSelect = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__name
 
     updateSelectionPath();
     hide();
-    inputRef.current.focus();
+    DomHandler.focus(inputRef.current);
   };
 
   var onOptionGroupSelect = function onOptionGroupSelect(event) {
@@ -10524,7 +10808,8 @@ var CascadeSelect = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__name
   };
 
   var getOptionLabel = function getOptionLabel(option) {
-    return props.optionLabel ? ObjectUtils.resolveFieldData(option, props.optionLabel) : option;
+    var label = props.optionLabel ? ObjectUtils.resolveFieldData(option, props.optionLabel) : option;
+    return label || option;
   };
 
   var getOptionValue = function getOptionValue(option) {
@@ -10600,7 +10885,7 @@ var CascadeSelect = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__name
     }
 
     if (!overlayRef.current || !overlayRef.current.contains(event.target)) {
-      inputRef.current.focus();
+      DomHandler.focus(inputRef.current);
       overlayVisibleState ? hide() : show();
     }
   };
@@ -10654,7 +10939,7 @@ var CascadeSelect = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__name
   var hide = function hide() {
     props.onBeforeHide && props.onBeforeHide();
     setOverlayVisibleState(false);
-    inputRef.current.focus();
+    DomHandler.focus(inputRef.current);
   };
 
   var onOverlayEnter = function onOverlayEnter() {
@@ -10846,13 +11131,19 @@ var Chart = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__namespace.fo
         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);
+        }
       }
     });
   };
@@ -10946,8 +11237,7 @@ var Checkbox = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__namespace
         }
       });
       inputRef.current.checked = !_checked;
-      inputRef.current.focus();
-      event.preventDefault();
+      DomHandler.focus(inputRef.current);
     }
   };
 
@@ -11208,12 +11498,17 @@ var Chips = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__namespace.fo
   };
 
   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
@@ -11233,6 +11528,10 @@ var Chips = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__namespace.fo
         break;
 
       default:
+        if (props.keyfilter) {
+          KeyFilter.onKeyPress(event, props.keyfilter);
+        }
+
         if (isMaxedOut()) {
           event.preventDefault();
         } else if (props.separator === ',' && event.which === 188) {
@@ -11266,6 +11565,10 @@ var Chips = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__namespace.fo
     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);
@@ -11408,11 +11711,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__namespace.forwardRef(function (props, ref) {
@@ -12101,7 +12406,8 @@ Column.defaultProps = {
   rowReorderIcon: 'pi pi-bars',
   rowEditor: false,
   exportable: true,
-  reorderable: true
+  reorderable: true,
+  resizeable: true
 };
 
 var ColumnGroup = function ColumnGroup() {};
@@ -12457,7 +12763,7 @@ var Dialog = /*#__PURE__*/React__namespace.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) {
@@ -12603,9 +12909,11 @@ var Dialog = /*#__PURE__*/React__namespace.forwardRef(function (props, ref) {
       var icons = ObjectUtils.getJSXElement(props.icons, props);
       var header = ObjectUtils.getJSXElement(props.header, props);
       var headerId = idState + '_header';
+      var headerClassName = classNames('p-dialog-header', props.headerClassName);
       return /*#__PURE__*/React__namespace.createElement("div", {
         ref: headerRef,
-        className: "p-dialog-header",
+        style: props.headerStyle,
+        className: headerClassName,
         onMouseDown: onDragStart
       }, /*#__PURE__*/React__namespace.createElement("div", {
         id: headerId,
@@ -12639,7 +12947,7 @@ var Dialog = /*#__PURE__*/React__namespace.forwardRef(function (props, ref) {
 
   var createResizer = function createResizer() {
     if (props.resizable) {
-      return /*#__PURE__*/React__namespace.createElement("div", {
+      return /*#__PURE__*/React__namespace.createElement("span", {
         className: "p-resizable-handle",
         style: {
           zIndex: 90
@@ -12727,6 +13035,8 @@ Dialog.defaultProps = {
   modal: true,
   onHide: null,
   onShow: null,
+  headerStyle: null,
+  headerClassName: null,
   contentStyle: null,
   contentClassName: null,
   closeOnEscape: true,
@@ -13430,6 +13740,7 @@ var ContextMenuSub = /*#__PURE__*/React__namespace.memo(function (props) {
     return /*#__PURE__*/React__namespace.createElement("li", {
       key: key,
       role: "none",
+      id: item.id,
       className: className,
       style: item.style,
       onMouseEnter: function onMouseEnter(event) {
@@ -13958,14 +14269,14 @@ var FirstPageLink = /*#__PURE__*/React__namespace.memo(function (props) {
     'p-disabled': props.disabled
   });
   var iconClassName = 'p-paginator-icon pi pi-angle-double-left';
-  var element = /*#__PURE__*/React__namespace.createElement("button", {
+  var element = /*#__PURE__*/React__namespace.createElement(Button, {
     type: "button",
     className: className,
+    icon: iconClassName,
     onClick: props.onClick,
-    disabled: props.disabled
-  }, /*#__PURE__*/React__namespace.createElement("span", {
-    className: iconClassName
-  }), /*#__PURE__*/React__namespace.createElement(Ripple, null));
+    disabled: props.disabled,
+    "aria-label": ariaLabel('firstPageLabel')
+  });
 
   if (props.template) {
     var defaultOptions = {
@@ -14192,21 +14503,36 @@ var InputNumber = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__namesp
     if (inputRef.current) {
       var step = props.step * dir;
       var currentValue = parseValue(inputRef.current.value) || 0;
-      var newValue = validateValue(currentValue + step);
-      updateInput(newValue, null, 'spin');
+      var newValue = validateValue(currentValue + step); // touch devices trigger the keyboard to display because of setSelectionRange
+
+      !DomHandler.isTouchDevice() && updateInput(newValue, null, 'spin');
       updateModel(event, newValue);
       handleOnChange(event, currentValue, newValue);
     }
   };
 
+  var onUpButtonTouchStart = function onUpButtonTouchStart(event) {
+    if (!props.disabled && !props.readOnly) {
+      repeat(event, null, 1);
+      event.preventDefault();
+    }
+  };
+
   var onUpButtonMouseDown = function onUpButtonMouseDown(event) {
     if (!props.disabled && !props.readOnly) {
-      inputRef.current.focus();
+      props.autoFocus && DomHandler.focus(inputRef.current, props.autoFocus);
       repeat(event, null, 1);
       event.preventDefault();
     }
   };
 
+  var onUpButtonTouchEnd = function onUpButtonTouchEnd() {
+    if (!props.disabled && !props.readOnly) {
+      clearTimer();
+      event.preventDefault();
+    }
+  };
+
   var onUpButtonMouseUp = function onUpButtonMouseUp() {
     if (!props.disabled && !props.readOnly) {
       clearTimer();
@@ -14231,9 +14557,23 @@ var InputNumber = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__namesp
     }
   };
 
+  var onDownButtonTouchStart = function onDownButtonTouchStart(event) {
+    if (!props.disabled && !props.readOnly) {
+      repeat(event, null, -1);
+      event.preventDefault();
+    }
+  };
+
+  var onDownButtonTouchEnd = function onDownButtonTouchEnd() {
+    if (!props.disabled && !props.readOnly) {
+      clearTimer();
+      event.preventDefault();
+    }
+  };
+
   var onDownButtonMouseDown = function onDownButtonMouseDown(event) {
     if (!props.disabled && !props.readOnly) {
-      inputRef.current.focus();
+      props.autoFocus && DomHandler.focus(inputRef.current, props.autoFocus);
       repeat(event, null, -1);
       event.preventDefault();
     }
@@ -14977,6 +15317,8 @@ var InputNumber = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__namesp
       onMouseUp: onUpButtonMouseUp,
       onKeyDown: onUpButtonKeyDown,
       onKeyUp: onUpButtonKeyUp,
+      onTouchStart: onUpButtonTouchStart,
+      onTouchEnd: onUpButtonTouchEnd,
       disabled: props.disabled,
       tabIndex: -1
     }, /*#__PURE__*/React__namespace.createElement("span", {
@@ -14997,6 +15339,8 @@ var InputNumber = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__namesp
       onMouseUp: onDownButtonMouseUp,
       onKeyDown: onDownButtonKeyDown,
       onKeyUp: onDownButtonKeyUp,
+      onTouchStart: onDownButtonTouchStart,
+      onTouchEnd: onDownButtonTouchEnd,
       disabled: props.disabled,
       tabIndex: -1
     }, /*#__PURE__*/React__namespace.createElement("span", {
@@ -15136,14 +15480,14 @@ var LastPageLink = /*#__PURE__*/React__namespace.memo(function (props) {
     'p-disabled': props.disabled
   });
   var iconClassName = 'p-paginator-icon pi pi-angle-double-right';
-  var element = /*#__PURE__*/React__namespace.createElement("button", {
+  var element = /*#__PURE__*/React__namespace.createElement(Button, {
     type: "button",
     className: className,
+    icon: iconClassName,
     onClick: props.onClick,
-    disabled: props.disabled
-  }, /*#__PURE__*/React__namespace.createElement("span", {
-    className: iconClassName
-  }), /*#__PURE__*/React__namespace.createElement(Ripple, null));
+    disabled: props.disabled,
+    "aria-label": ariaLabel('lastPageLabel')
+  });
 
   if (props.template) {
     var defaultOptions = {
@@ -15172,14 +15516,14 @@ var NextPageLink = /*#__PURE__*/React__namespace.memo(function (props) {
     'p-disabled': props.disabled
   });
   var iconClassName = 'p-paginator-icon pi pi-angle-right';
-  var element = /*#__PURE__*/React__namespace.createElement("button", {
+  var element = /*#__PURE__*/React__namespace.createElement(Button, {
     type: "button",
     className: className,
+    icon: iconClassName,
     onClick: props.onClick,
-    disabled: props.disabled
-  }, /*#__PURE__*/React__namespace.createElement("span", {
-    className: iconClassName
-  }), /*#__PURE__*/React__namespace.createElement(Ripple, null));
+    disabled: props.disabled,
+    "aria-label": ariaLabel('nextPageLabel')
+  });
 
   if (props.template) {
     var defaultOptions = {
@@ -15226,13 +15570,14 @@ var PageLinks = /*#__PURE__*/React__namespace.memo(function (props) {
         'p-paginator-page-end': pageLink === endPageInView,
         'p-highlight': pageLink - 1 === props.page
       });
-      var element = /*#__PURE__*/React__namespace.createElement("button", {
+      var element = /*#__PURE__*/React__namespace.createElement(Button, {
         type: "button",
         className: className,
         onClick: function onClick(e) {
           return onPageLinkClick(e, pageLink);
-        }
-      }, pageLink, /*#__PURE__*/React__namespace.createElement(Ripple, null));
+        },
+        "aria-label": "".concat(ariaLabel('pageLabel'), " ").concat(pageLink + 1)
+      }, pageLink);
 
       if (props.template) {
         var defaultOptions = {
@@ -15279,14 +15624,14 @@ var PrevPageLink = /*#__PURE__*/React__namespace.memo(function (props) {
     'p-disabled': props.disabled
   });
   var iconClassName = 'p-paginator-icon pi pi-angle-left';
-  var element = /*#__PURE__*/React__namespace.createElement("button", {
+  var element = /*#__PURE__*/React__namespace.createElement(Button, {
     type: "button",
     className: className,
+    icon: iconClassName,
     onClick: props.onClick,
-    disabled: props.disabled
-  }, /*#__PURE__*/React__namespace.createElement("span", {
-    className: iconClassName
-  }), /*#__PURE__*/React__namespace.createElement(Ripple, null));
+    disabled: props.disabled,
+    "aria-label": ariaLabel('previousPageLabel')
+  });
 
   if (props.template) {
     var defaultOptions = {
@@ -15328,6 +15673,7 @@ var DropdownItem = /*#__PURE__*/React__namespace.memo(function (props) {
   var content = props.template ? ObjectUtils.getJSXElement(props.template, props.option) : props.label;
   return /*#__PURE__*/React__namespace.createElement("li", {
     className: className,
+    style: props.style,
     onClick: onClick,
     "aria-label": props.label,
     key: props.label,
@@ -15362,7 +15708,7 @@ var DropdownPanel = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__name
   var onEntered = function onEntered() {
     props.onEntered(function () {
       if (props.filter && props.filterInputAutoFocus) {
-        filterInputRef.current.focus();
+        DomHandler.focus(filterInputRef.current, false);
       }
     });
   };
@@ -15372,7 +15718,7 @@ var DropdownPanel = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__name
     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);
@@ -15382,6 +15728,7 @@ var DropdownPanel = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__name
         key: optionKey,
         label: optionLabel,
         option: option,
+        style: style,
         template: props.itemTemplate,
         selected: props.isSelected(option),
         disabled: disabled,
@@ -15398,14 +15745,20 @@ var DropdownPanel = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__name
   };
 
   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__namespace.createElement(React__namespace.Fragment, {
         key: key
       }, /*#__PURE__*/React__namespace.createElement("li", {
-        className: "p-dropdown-item-group"
+        className: "p-dropdown-item-group",
+        style: style
       }, groupContent), groupChildrenContent);
     } else {
       var optionLabel = props.getOptionLabel(option);
@@ -15415,6 +15768,7 @@ var DropdownPanel = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__name
         key: optionKey,
         label: optionLabel,
         option: option,
+        style: style,
         template: props.itemTemplate,
         selected: props.isSelected(option),
         disabled: disabled,
@@ -15439,7 +15793,7 @@ var DropdownPanel = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__name
         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);
           });
         }
       });
@@ -15483,13 +15837,14 @@ var DropdownPanel = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__name
         }),
         className: classNames('p-dropdown-items-wrapper', props.virtualScrollerOptions.className),
         items: props.visibleOptions,
+        autoSize: true,
         onLazyLoad: function onLazyLoad(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);
@@ -15656,7 +16011,7 @@ var Dropdown = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__namespace
     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();
     }
   };
@@ -15693,16 +16048,11 @@ var Dropdown = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__namespace
       case 38:
         onUpKey(event);
         break;
-      //space
+      //space and enter
 
       case 32:
-        overlayVisibleState ? hide() : show();
-        event.preventDefault();
-        break;
-      //enter
-
       case 13:
-        hide();
+        overlayVisibleState ? hide() : show();
         event.preventDefault();
         break;
       //escape and tab
@@ -15934,7 +16284,7 @@ var Dropdown = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__namespace
 
     if (!option.disabled) {
       selectItem(event);
-      focusInputRef.current.focus();
+      DomHandler.focus(focusInputRef.current);
     }
 
     hide();
@@ -16003,11 +16353,13 @@ var Dropdown = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__namespace
     }
   };
 
-  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 {
@@ -16017,7 +16369,7 @@ var Dropdown = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__namespace
           }
         }
       } else {
-        return findOptionIndexInList(props.value, visibleOptions);
+        return findOptionIndexInList(props.value, options);
       }
     }
 
@@ -16082,7 +16434,7 @@ var Dropdown = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__namespace
     if (highlightItem && highlightItem.scrollIntoView) {
       highlightItem.scrollIntoView({
         block: 'nearest',
-        inline: 'start'
+        inline: 'nearest'
       });
     }
   };
@@ -16134,16 +16486,16 @@ var Dropdown = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__namespace
   };
 
   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__namespace.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 () {
@@ -16796,7 +17148,7 @@ var RowRadioButton = /*#__PURE__*/React__namespace.memo(function (props) {
   var onClick = function onClick(event) {
     if (!props.disabled) {
       props.onChange(event);
-      inputRef.current.focus();
+      DomHandler.focus(inputRef.current);
     }
   };
 
@@ -17466,6 +17818,7 @@ var BodyCell = /*#__PURE__*/React__namespace.memo(function (props) {
         };
         content = /*#__PURE__*/React__namespace.createElement(React__namespace.Fragment, null, /*#__PURE__*/React__namespace.createElement("button", {
           type: "button",
+          name: "row-save",
           onClick: rowEditorProps.onSaveClick,
           className: rowEditorProps.saveClassName,
           tabIndex: props.tabIndex
@@ -17473,6 +17826,7 @@ var BodyCell = /*#__PURE__*/React__namespace.memo(function (props) {
           className: rowEditorProps.saveIconClassName
         }), /*#__PURE__*/React__namespace.createElement(Ripple, null)), /*#__PURE__*/React__namespace.createElement("button", {
           type: "button",
+          name: "row-cancel",
           onClick: rowEditorProps.onCancelClick,
           className: rowEditorProps.cancelClassName,
           tabIndex: props.tabIndex
@@ -17488,6 +17842,7 @@ var BodyCell = /*#__PURE__*/React__namespace.memo(function (props) {
         };
         content = /*#__PURE__*/React__namespace.createElement("button", {
           type: "button",
+          name: "row-edit",
           onClick: rowEditorProps.onInitClick,
           className: rowEditorProps.initClassName,
           tabIndex: props.tabIndex
@@ -17953,12 +18308,16 @@ var BodyRow = /*#__PURE__*/React__namespace.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__namespace.createElement("tr", {
     role: "row",
     tabIndex: tabIndex,
     className: className,
+    style: style,
     onMouseDown: onMouseDown,
     onMouseUp: onMouseUp,
     onClick: onClick,
@@ -18000,14 +18359,14 @@ var _excluded = ["originalEvent"];
 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$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__namespace.memo(function (props) {
+var TableBody = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__namespace.forwardRef(function (props, ref) {
   var _React$useState = React__namespace.useState({}),
       _React$useState2 = _slicedToArray(_React$useState, 2),
       rowGroupHeaderStyleObjectState = _React$useState2[0],
       setRowGroupHeaderStyleObjectState = _React$useState2[1];
 
   var elementRef = React__namespace.useRef(null);
-  var ref = React__namespace.useCallback(function (el) {
+  var refCallback = React__namespace.useCallback(function (el) {
     elementRef.current = el;
     props.virtualScrollerContentRef && props.virtualScrollerContentRef(el);
   }, [props]);
@@ -18661,9 +19020,12 @@ var TableBody = /*#__PURE__*/React__namespace.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) {
@@ -19059,10 +19421,10 @@ var TableBody = /*#__PURE__*/React__namespace.memo(function (props) {
   var className = classNames('p-datatable-tbody', props.className);
   var content = props.empty ? createEmptyContent() : createContent();
   return /*#__PURE__*/React__namespace.createElement("tbody", {
-    ref: ref,
+    ref: refCallback,
     className: className
   }, content);
-});
+}));
 TableBody.displayName = 'TableBody';
 
 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; }
@@ -19112,7 +19474,8 @@ var FooterCell = /*#__PURE__*/React__namespace.memo(function (props) {
         styleObject['left'] = left + 'px';
       }
 
-      setStyleObjectState(styleObject);
+      var isSameStyle = styleObjectState['left'] === styleObject['left'] && styleObjectState['right'] === styleObject['right'];
+      !isSameStyle && setStyleObjectState(styleObject);
     }
   };
 
@@ -20349,14 +20712,15 @@ var HeaderCell = /*#__PURE__*/React__namespace.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,
+      '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');
@@ -20645,6 +21009,9 @@ var DataTable = /*#__PURE__*/React__namespace.forwardRef(function (props, ref) {
   var elementRef = React__namespace.useRef(null);
   var tableRef = React__namespace.useRef(null);
   var wrapperRef = React__namespace.useRef(null);
+  var bodyRef = React__namespace.useRef(null);
+  var frozenBodyRef = React__namespace.useRef(null);
+  var virtualScrollerRef = React__namespace.useRef(null);
   var reorderIndicatorUpRef = React__namespace.useRef(null);
   var reorderIndicatorDownRef = React__namespace.useRef(null);
   var colReorderIconWidth = React__namespace.useRef(null);
@@ -21140,8 +21507,22 @@ var DataTable = /*#__PURE__*/React__namespace.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);
       }
 
@@ -21198,7 +21579,7 @@ var DataTable = /*#__PURE__*/React__namespace.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;
     }
   };
@@ -21261,10 +21642,11 @@ var DataTable = /*#__PURE__*/React__namespace.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) {
@@ -21475,8 +21857,8 @@ var DataTable = /*#__PURE__*/React__namespace.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) {
@@ -21514,7 +21896,8 @@ var DataTable = /*#__PURE__*/React__namespace.forwardRef(function (props, ref) {
     var value = _toConsumableArray(data);
 
     if (columnSortable.current && columnSortFunction.current) {
-      value = columnSortFunction({
+      value = columnSortFunction.current({
+        rowData: value,
         field: field,
         order: order
       });
@@ -21522,8 +21905,7 @@ var DataTable = /*#__PURE__*/React__namespace.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);
       });
     }
 
@@ -21556,6 +21938,7 @@ var DataTable = /*#__PURE__*/React__namespace.forwardRef(function (props, ref) {
       var field = columnField.current;
       var order = meta ? meta.order : defaultSortOrder;
       value = columnSortFunction.current({
+        rowData: value,
         field: field,
         order: order
       });
@@ -21576,8 +21959,7 @@ var DataTable = /*#__PURE__*/React__namespace.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) {
@@ -21956,7 +22338,9 @@ var DataTable = /*#__PURE__*/React__namespace.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();
@@ -22056,7 +22440,9 @@ var DataTable = /*#__PURE__*/React__namespace.forwardRef(function (props, ref) {
         columns = options.columns,
         contentRef = options.contentRef,
         className = options.className;
+        options.itemSize;
     var frozenBody = props.frozenValue && /*#__PURE__*/React__namespace.createElement(TableBody, {
+      ref: frozenBodyRef,
       value: props.frozenValue,
       className: "p-datatable-frozen-tbody",
       frozenRow: true,
@@ -22120,9 +22506,11 @@ var DataTable = /*#__PURE__*/React__namespace.forwardRef(function (props, ref) {
       expandedRowIcon: props.expandedRowIcon,
       collapsedRowIcon: props.collapsedRowIcon,
       rowClassName: props.rowClassName,
+      virtualScrollerOptions: options,
       isVirtualScrollerDisabled: true
     });
     var body = /*#__PURE__*/React__namespace.createElement(TableBody, {
+      ref: bodyRef,
       value: dataToRender(rows),
       className: className,
       empty: empty,
@@ -22215,10 +22603,15 @@ var DataTable = /*#__PURE__*/React__namespace.forwardRef(function (props, ref) {
       style: {
         maxHeight: _isVirtualScrollerDisabled ? props.scrollHeight : null
       }
-    }, /*#__PURE__*/React__namespace.createElement(VirtualScroller, _extends({}, virtualScrollerOptions, {
+    }, /*#__PURE__*/React__namespace.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,
@@ -23039,8 +23432,8 @@ var Editor = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__namespace.f
   useMountEffect(function () {
     if (!isQuillLoaded.current) {
       Promise.resolve().then(function () { return /*#__PURE__*/_interopNamespace(require('quill')); }).then(function (module) {
-        if (module && module["default"] && DomHandler.isExist(contentRef.current)) {
-          quill.current = new module["default"](contentRef.current, {
+        if (module && DomHandler.isExist(contentRef.current)) {
+          var configuration = {
             modules: _objectSpread$e({
               toolbar: props.showHeader ? toolbarRef.current : false
             }, props.modules),
@@ -23048,7 +23441,15 @@ var Editor = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__namespace.f
             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));
@@ -23469,7 +23870,7 @@ var Messages = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__namespace
 
   var show = function show(value) {
     if (value) {
-      var messages = [];
+      var messages;
 
       if (Array.isArray(value)) {
         for (var i = 0; i < value.length; i++) {
@@ -23490,7 +23891,8 @@ var Messages = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__namespace
   };
 
   var replace = function replace(value) {
-    setMessagesState(value);
+    var replaced = Array.isArray(value) ? value : [value];
+    setMessagesState(replaced);
   };
 
   var onClose = function onClose(message) {
@@ -23566,8 +23968,7 @@ var ProgressBar = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__namesp
       style: props.style,
       "aria-valuemin": "0",
       "aria-valuenow": props.value,
-      "aria-valuemax": "100",
-      "aria-label": props.value
+      "aria-valuemax": "100"
     }, otherProps), /*#__PURE__*/React__namespace.createElement("div", {
       className: "p-progressbar-value p-progressbar-value-animate",
       style: {
@@ -23633,18 +24034,24 @@ var FileUpload = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__namespa
       focusedState = _React$useState6[0],
       setFocusedState = _React$useState6[1];
 
+  var _React$useState7 = React__namespace.useState(false),
+      _React$useState8 = _slicedToArray(_React$useState7, 2),
+      uploadingState = _React$useState8[0],
+      setUploadingState = _React$useState8[1];
+
   var fileInputRef = React__namespace.useRef(null);
   var messagesRef = React__namespace.useRef(null);
   var contentRef = React__namespace.useRef(null);
   var duplicateIEEvent = React__namespace.useRef(false);
   var uploadedFileCount = React__namespace.useRef(0);
   var hasFiles = ObjectUtils.isNotEmpty(filesState);
+  var disabled = props.disabled || uploadingState;
   var chooseButtonLabel = props.chooseLabel || props.chooseOptions.label || localeOption('choose');
   var uploadButtonLabel = props.uploadLabel || props.uploadOptions.label || localeOption('upload');
   var cancelButtonLabel = props.cancelLabel || props.cancelOptions.label || localeOption('cancel');
-  var chooseDisabled = props.disabled || props.fileLimit && props.fileLimit <= filesState.length + uploadedFileCount;
-  var uploadDisabled = props.disabled || !hasFiles;
-  var cancelDisabled = props.disabled || !hasFiles;
+  var chooseDisabled = disabled || props.fileLimit && props.fileLimit <= filesState.length + uploadedFileCount;
+  var uploadDisabled = disabled || !hasFiles;
+  var cancelDisabled = disabled || !hasFiles;
 
   var isImage = function isImage(file) {
     return /^image\//.test(file.type);
@@ -23699,7 +24106,12 @@ var FileUpload = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__namespa
       return;
     }
 
-    var currentFiles = filesState ? _toConsumableArray(filesState) : [];
+    var currentFiles = [];
+
+    if (props.multiple) {
+      currentFiles = filesState ? _toConsumableArray(filesState) : [];
+    }
+
     var selectedFiles = event.dataTransfer ? event.dataTransfer.files : event.target.files;
 
     for (var i = 0; i < selectedFiles.length; i++) {
@@ -23771,6 +24183,10 @@ var FileUpload = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__namespa
   var upload = function upload(files) {
     files = files || filesState;
 
+    if (files && files.nativeEvent) {
+      files = filesState;
+    }
+
     if (props.customUpload) {
       if (props.fileLimit) {
         uploadedFileCount + files.length, _readOnlyError("uploadedFileCount");
@@ -23786,6 +24202,7 @@ var FileUpload = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__namespa
         });
       }
     } else {
+      setUploadingState(true);
       var xhr = new XMLHttpRequest();
       var formData = new FormData();
 
@@ -23827,6 +24244,7 @@ var FileUpload = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__namespa
       xhr.onreadystatechange = function () {
         if (xhr.readyState === 4) {
           setProgressState(0);
+          setUploadingState(false);
 
           if (xhr.status >= 200 && xhr.status < 300) {
             if (props.fileLimit) {
@@ -23868,6 +24286,7 @@ var FileUpload = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__namespa
 
   var clear = function clear() {
     setFilesState([]);
+    setUploadingState(false);
     props.onClear && props.onClear();
     clearInput();
   };
@@ -23892,7 +24311,7 @@ var FileUpload = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__namespa
   };
 
   var onDragEnter = function onDragEnter(event) {
-    if (!props.disabled) {
+    if (!disabled) {
       event.dataTransfer.dropEffect = 'copy';
       event.stopPropagation();
       event.preventDefault();
@@ -23900,7 +24319,7 @@ var FileUpload = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__namespa
   };
 
   var onDragOver = function onDragOver(event) {
-    if (!props.disabled) {
+    if (!disabled) {
       event.dataTransfer.dropEffect = 'copy';
       DomHandler.addClass(contentRef.current, 'p-fileupload-highlight');
       event.stopPropagation();
@@ -23909,25 +24328,32 @@ var FileUpload = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__namespa
   };
 
   var onDragLeave = function onDragLeave(event) {
-    if (!props.disabled) {
+    if (!disabled) {
       event.dataTransfer.dropEffect = 'copy';
       DomHandler.removeClass(contentRef.current, 'p-fileupload-highlight');
     }
   };
 
   var onDrop = function onDrop(event) {
-    if (!props.disabled) {
-      DomHandler.removeClass(contentRef.current, 'p-fileupload-highlight');
-      event.stopPropagation();
-      event.preventDefault();
-      var files = event.dataTransfer ? event.dataTransfer.files : event.target.files;
-      var allowDrop = props.multiple || files && files.length === 0;
-      allowDrop && onFileSelect(event);
+    if (props.disabled) {
+      return;
+    }
+
+    DomHandler.removeClass(contentRef.current, 'p-fileupload-highlight');
+    event.stopPropagation();
+    event.preventDefault(); // give caller a chance to stop the drop
+
+    if (props.onBeforeDrop && props.onBeforeDrop(event) === false) {
+      return;
     }
+
+    var files = event.dataTransfer ? event.dataTransfer.files : event.target.files;
+    var allowDrop = props.multiple || ObjectUtils.isEmpty(filesState) && files && files.length === 1;
+    allowDrop && onFileSelect(event);
   };
 
   var onSimpleUploaderClick = function onSimpleUploaderClick() {
-    hasFiles ? upload() : fileInputRef.current.click();
+    !disabled && hasFiles ? upload() : fileInputRef.current.click();
   };
 
   React__namespace.useImperativeHandle(ref, function () {
@@ -23945,7 +24371,7 @@ var FileUpload = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__namespa
         _icon = _props$chooseOptions.icon,
         iconOnly = _props$chooseOptions.iconOnly;
     var chooseClassName = classNames('p-button p-fileupload-choose p-component', {
-      'p-disabled': props.disabled,
+      'p-disabled': disabled,
       'p-focus': focusedState,
       'p-button-icon-only': iconOnly
     }, className);
@@ -23999,7 +24425,8 @@ var FileUpload = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__namespa
       icon: "pi pi-times",
       onClick: function onClick(e) {
         return remove(e, index);
-      }
+      },
+      disabled: disabled
     }));
     var content = /*#__PURE__*/React__namespace.createElement(React__namespace.Fragment, null, preview, fileName, size, removeButton);
 
@@ -24126,7 +24553,7 @@ var FileUpload = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__namespa
     var className = classNames('p-fileupload p-fileupload-basic p-component', props.className);
     var buttonClassName = classNames('p-button p-component p-fileupload-choose', {
       'p-fileupload-choose-selected': hasFiles,
-      'p-disabled': props.disabled,
+      'p-disabled': disabled,
       'p-focus': focusedState
     }, chooseOptions.className);
     var chooseIcon = chooseOptions.icon || classNames({
@@ -24156,7 +24583,7 @@ var FileUpload = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__namespa
       type: "file",
       accept: props.accept,
       multiple: props.multiple,
-      disabled: props.disabled,
+      disabled: disabled,
       onChange: onFileSelect
     });
     return /*#__PURE__*/React__namespace.createElement("div", _extends({
@@ -24230,6 +24657,7 @@ FileUpload.defaultProps = {
   progressBarTemplate: null,
   onBeforeUpload: null,
   onBeforeSend: null,
+  onBeforeDrop: null,
   onUpload: null,
   onError: null,
   onClear: null,
@@ -24262,6 +24690,7 @@ var FullCalendar = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__names
   };
 
   useMountEffect(function () {
+    // eslint-disable-next-line no-console
     console.warn("FullCalendar component is deprecated. Use FullCalendar component of '@fullcalendar/react' package.");
     config.current = {
       theme: true
@@ -25526,12 +25955,12 @@ var Image = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__namespace.fo
     width: width,
     height: height,
     style: props.imageStyle,
-    alt: alt
+    alt: alt,
+    onError: props.onError
   });
   return /*#__PURE__*/React__namespace.createElement("span", _extends({
     ref: elementRef,
-    className: containerClassName,
-    style: props.style
+    className: containerClassName
   }, otherProps), image, preview, maskVisibleState && /*#__PURE__*/React__namespace.createElement(Portal, {
     element: element,
     appendTo: document.body
@@ -25543,14 +25972,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) {
@@ -25560,7 +25989,7 @@ var InplaceContent = function InplaceContent(props) {
   return props.children;
 };
 var Inplace = /*#__PURE__*/React__namespace.forwardRef(function (props, ref) {
-  var _React$useState = React__namespace.useState(false),
+  var _React$useState = React__namespace.useState(props.active),
       _React$useState2 = _slicedToArray(_React$useState, 2),
       activeState = _React$useState2[0],
       setActiveState = _React$useState2[1];
@@ -25691,7 +26120,7 @@ Inplace.defaultProps = {
 };
 
 var InputMask = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__namespace.forwardRef(function (props, ref) {
-  var elementRef = React__namespace.useRef(null);
+  var elementRef = React__namespace.useRef(ref);
   var firstNonMaskPos = React__namespace.useRef(null);
   var lastRequiredNonMaskPos = React__namespace.useRef(0);
   var tests = React__namespace.useRef([]);
@@ -26212,8 +26641,8 @@ var InputMask = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__namespac
   };
 
   React__namespace.useEffect(function () {
-    ObjectUtils.combinedRefs(elementRef, props.inputRef);
-  }, [elementRef, props.inputRef]);
+    ObjectUtils.combinedRefs(elementRef, ref);
+  }, [elementRef, ref]);
   useMountEffect(function () {
     init();
     updateValue();
@@ -26221,7 +26650,10 @@ var InputMask = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__namespac
   useUpdateEffect(function () {
     init();
     caret(updateValue(true));
-    updateModel();
+
+    if (props.unmask) {
+      updateModel();
+    }
   }, [props.mask]);
   useUpdateEffect(function () {
     if (isValueUpdated()) {
@@ -26259,7 +26691,6 @@ InputMask.displayName = 'InputMask';
 InputMask.defaultProps = {
   __TYPE: 'InputMask',
   id: null,
-  inputRef: null,
   value: null,
   type: 'text',
   mask: null,
@@ -26300,7 +26731,7 @@ var InputSwitch = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__namesp
     }
 
     toggle(event);
-    inputRef.current.focus();
+    DomHandler.focus(inputRef.current);
     event.preventDefault();
   };
 
@@ -26748,14 +27179,14 @@ var ListBoxHeader = /*#__PURE__*/React__namespace.memo(function (props) {
     className: "p-listbox-header"
   }, /*#__PURE__*/React__namespace.createElement("div", {
     className: "p-listbox-filter-container"
-  }, /*#__PURE__*/React__namespace.createElement(InputText, {
+  }, /*#__PURE__*/React__namespace.createElement(InputText, _extends({
     type: "text",
     value: props.filter,
     onChange: onFilter,
     className: "p-listbox-filter",
     disabled: props.disabled,
     placeholder: props.filterPlaceholder
-  }), /*#__PURE__*/React__namespace.createElement("span", {
+  }, props.filterInputProps)), /*#__PURE__*/React__namespace.createElement("span", {
     className: "p-listbox-filter-icon pi pi-search"
   })));
 });
@@ -26825,14 +27256,16 @@ var ListBoxItem = /*#__PURE__*/React__namespace.memo(function (props) {
   var content = props.template ? ObjectUtils.getJSXElement(props.template, props.option) : props.label;
   return /*#__PURE__*/React__namespace.createElement("li", {
     className: className,
+    style: props.style,
     onClick: onClick,
     onTouchEnd: onTouchEnd,
     onKeyDown: onKeyDown,
-    tabIndex: props.tabIndex,
+    tabIndex: "-1",
     "aria-label": props.label,
     key: props.label,
     role: "option",
-    "aria-selected": props.selected
+    "aria-selected": props.selected,
+    "aria-disabled": props.disabled
   }, content, /*#__PURE__*/React__namespace.createElement(Ripple, null));
 });
 ListBoxItem.displayName = 'ListBoxItem';
@@ -26943,6 +27376,7 @@ var ListBox = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__namespace.
   };
 
   var onFilter = function onFilter(event) {
+    virtualScrollerRef.current && virtualScrollerRef.current.scrollToIndex(0);
     var originalEvent = event.originalEvent,
         value = event.value;
 
@@ -26978,11 +27412,44 @@ var ListBox = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__namespace.
     });
   };
 
+  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) {
@@ -27054,16 +27521,33 @@ var ListBox = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__namespace.
     }
   };
 
+  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__namespace.createElement(ListBoxHeader, {
       filter: filteredValue,
       onFilter: onFilter,
       disabled: props.disabled,
-      filterPlaceholder: props.filterPlaceholder
+      filterPlaceholder: props.filterPlaceholder,
+      filterInputProps: props.filterInputProps
     }) : 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);
@@ -27074,6 +27558,7 @@ var ListBox = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__namespace.
         key: optionKey,
         label: optionLabel,
         option: option,
+        style: style,
         template: props.itemTemplate,
         selected: isSelected(option),
         onClick: onOptionSelect,
@@ -27085,14 +27570,21 @@ var ListBox = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__namespace.
   };
 
   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__namespace.createElement(React__namespace.Fragment, {
         key: key
       }, /*#__PURE__*/React__namespace.createElement("li", {
-        className: "p-listbox-item-group"
+        className: "p-listbox-item-group",
+        style: style,
+        role: "group"
       }, groupContent), groupChildrenContent);
     } else {
       var optionLabel = getOptionLabel(option);
@@ -27103,6 +27595,7 @@ var ListBox = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__namespace.
         key: optionKey,
         label: optionLabel,
         option: option,
+        style: style,
         template: props.itemTemplate,
         selected: isSelected(option),
         onClick: onOptionSelect,
@@ -27126,8 +27619,8 @@ var ListBox = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__namespace.
             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);
@@ -27135,7 +27628,9 @@ var ListBox = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__namespace.
             ref: option.contentRef,
             className: className,
             role: "listbox",
-            "aria-multiselectable": props.multiple
+            "aria-multiselectable": props.multiple,
+            "aria-labelledby": props['aria-labelledby'],
+            "aria-label": props['aria-label']
           }, option.children);
         }
       });
@@ -27148,7 +27643,9 @@ var ListBox = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__namespace.
       return /*#__PURE__*/React__namespace.createElement("ul", {
         className: "p-listbox-list",
         role: "listbox",
-        "aria-multiselectable": props.multiple
+        "aria-multiselectable": props.multiple,
+        "aria-labelledby": props['aria-labelledby'],
+        "aria-label": props['aria-label']
       }, items);
     }
   };
@@ -27203,10 +27700,12 @@ ListBox.defaultProps = {
   filterMatchMode: 'contains',
   filterPlaceholder: null,
   filterLocale: undefined,
+  filterInputProps: null,
   tabIndex: 0,
   tooltip: null,
   tooltipOptions: null,
-  ariaLabelledBy: null,
+  'aria-label': null,
+  'aria-labelledby': null,
   onChange: null,
   onFilterValueChange: null
 };
@@ -27464,6 +27963,7 @@ var MegaMenu = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__namespace
 
       return /*#__PURE__*/React__namespace.createElement("li", {
         key: key,
+        id: item.id,
         className: _className2,
         style: item.style,
         role: "none"
@@ -27479,6 +27979,7 @@ var MegaMenu = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__namespace
     return /*#__PURE__*/React__namespace.createElement(React__namespace.Fragment, {
       key: submenu.label
     }, /*#__PURE__*/React__namespace.createElement("li", {
+      id: submenu.id,
       className: className,
       style: submenu.style,
       role: "presentation"
@@ -27545,6 +28046,7 @@ var MegaMenu = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__namespace
     var panel = createCategoryPanel(category);
     return /*#__PURE__*/React__namespace.createElement("li", {
       key: category.label + '_' + index,
+      id: category.id,
       className: className,
       style: category.style,
       onMouseEnter: function onMouseEnter(e) {
@@ -27568,19 +28070,36 @@ var MegaMenu = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__namespace
 
   var createMenu = function createMenu() {
     if (props.model) {
-      return props.model.map(function (item, index) {
+      return /*#__PURE__*/React__namespace.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__namespace.createElement("div", {
-        className: "p-megamenu-custom"
-      }, props.children);
+        className: "p-megamenu-start"
+      }, _start);
+    }
+
+    return null;
+  };
+
+  var createEndContent = function createEndContent() {
+    if (props.end) {
+      var _end = ObjectUtils.getJSXElement(props.end, props);
+
+      return /*#__PURE__*/React__namespace.createElement("div", {
+        className: "p-megamenu-end"
+      }, _end);
     }
 
     return null;
@@ -27592,16 +28111,14 @@ var MegaMenu = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__namespace
     'p-megamenu-vertical': props.orientation === 'vertical'
   }, props.className);
   var menu = createMenu();
-  var customContent = createCustomContent();
+  var start = createStartContent();
+  var end = createEndContent();
   return /*#__PURE__*/React__namespace.createElement("div", _extends({
     ref: elementRef,
     id: props.id,
     className: className,
     style: props.style
-  }, otherProps), /*#__PURE__*/React__namespace.createElement("ul", {
-    className: "p-megamenu-root-list",
-    role: "menubar"
-  }, menu), customContent);
+  }, otherProps), start, menu, end);
 }));
 MegaMenu.displayName = 'MegaMenu';
 MegaMenu.defaultProps = {
@@ -27610,7 +28127,9 @@ MegaMenu.defaultProps = {
   model: null,
   style: null,
   className: null,
-  orientation: 'horizontal'
+  orientation: 'horizontal',
+  start: null,
+  end: null
 };
 
 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; }
@@ -27835,7 +28354,7 @@ var Mention = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__namespace.
   };
 
   var onItemClick = function onItemClick(event, suggestion) {
-    inputRef.current.focus();
+    DomHandler.focus(inputRef.current);
     selectItem(event, suggestion);
   };
 
@@ -28037,10 +28556,12 @@ var Mention = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__namespace.
     style: props.style
   }, /*#__PURE__*/React__namespace.createElement(InputTextarea, _extends({
     ref: inputRef,
-    id: props.inputId
-  }, inputProps, {
+    id: props.inputId,
+    "aria-labelledby": props['aria-labelledby'],
+    "aria-label": props['aria-label'],
     className: inputClassName,
-    style: props.inputStyle,
+    style: props.inputStyle
+  }, inputProps, {
     onFocus: onFocus,
     onBlur: onBlur,
     onKeyDown: onKeyDown,
@@ -28070,6 +28591,8 @@ Mention.defaultProps = {
   headerTemplate: null,
   footerTemplate: null,
   itemTemplate: null,
+  'aria-label': null,
+  'aria-labelledby': null,
   transitionOptions: null,
   onChange: null,
   onInput: null,
@@ -28591,6 +29114,7 @@ var MenubarSub = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__namespa
     return /*#__PURE__*/React__namespace.createElement("li", {
       key: key,
       role: "none",
+      id: item.id,
       className: className,
       style: item.style,
       onMouseEnter: function onMouseEnter(event) {
@@ -28912,6 +29436,7 @@ var MultiSelectItem = /*#__PURE__*/React__namespace.memo(function (props) {
   var tabIndex = props.disabled ? null : props.tabIndex || 0;
   return /*#__PURE__*/React__namespace.createElement("li", {
     className: className,
+    style: props.style,
     onClick: onClick,
     tabIndex: tabIndex,
     onKeyDown: onKeyDown,
@@ -28984,7 +29509,7 @@ var MultiSelectPanel = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__n
     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);
@@ -28996,6 +29521,7 @@ var MultiSelectPanel = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__n
         key: optionKey,
         label: optionLabel,
         option: option,
+        style: style,
         template: props.itemTemplate,
         selected: selected,
         onClick: props.onOptionSelect,
@@ -29014,14 +29540,20 @@ var MultiSelectPanel = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__n
   };
 
   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__namespace.createElement(React__namespace.Fragment, {
         key: key
       }, /*#__PURE__*/React__namespace.createElement("li", {
-        className: "p-multiselect-item-group"
+        className: "p-multiselect-item-group",
+        style: style
       }, groupContent), groupChildrenContent);
     } else {
       var optionLabel = props.getOptionLabel(option);
@@ -29033,6 +29565,7 @@ var MultiSelectPanel = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__n
         key: optionKey,
         label: optionLabel,
         option: option,
+        style: style,
         template: props.itemTemplate,
         selected: selected,
         onClick: props.onOptionSelect,
@@ -29061,13 +29594,14 @@ var MultiSelectPanel = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__n
         }),
         className: classNames('p-multiselect-items-wrapper', props.virtualScrollerOptions.className),
         items: props.visibleOptions,
+        autoSize: true,
         onLazyLoad: function onLazyLoad(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);
@@ -29244,7 +29778,7 @@ var MultiSelect = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__namesp
 
       case 27:
         hide();
-        inputRef.current.focus();
+        DomHandler.focus(inputRef.current);
         break;
     }
   };
@@ -29262,7 +29796,7 @@ var MultiSelect = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__namesp
   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();
     }
   };
@@ -29387,7 +29921,7 @@ var MultiSelect = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__namesp
     if (highlightItem && highlightItem.scrollIntoView) {
       highlightItem.scrollIntoView({
         block: 'nearest',
-        inline: 'start'
+        inline: 'nearest'
       });
     }
   };
@@ -29439,7 +29973,7 @@ var MultiSelect = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__namesp
 
   var onCloseClick = function onCloseClick(event) {
     hide();
-    inputRef.current.focus();
+    DomHandler.focus(inputRef.current);
     event.preventDefault();
     event.stopPropagation();
   };
@@ -29632,7 +30166,7 @@ var MultiSelect = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__namesp
     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) {
@@ -29647,7 +30181,7 @@ var MultiSelect = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__namesp
   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) {
@@ -29703,9 +30237,7 @@ var MultiSelect = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__namesp
             var filteredSubOptions = FilterService.filter(getOptionGroupChildren(optgroup), searchFields, filterValue, props.filterMatchMode, props.filterLocale);
 
             if (filteredSubOptions && filteredSubOptions.length) {
-              filteredGroups.push(_objectSpread$a(_objectSpread$a({}, optgroup), {
-                items: filteredSubOptions
-              }));
+              filteredGroups.push(_objectSpread$a(_objectSpread$a({}, optgroup), _defineProperty({}, props.optionGroupChildren, filteredSubOptions)));
             }
           }
         } catch (err) {
@@ -29905,13 +30437,11 @@ var MultiStateCheckbox = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React_
       setFocusedState = _React$useState2[1];
 
   var elementRef = React__namespace.useRef(null);
-  var inputRef = React__namespace.useRef(props.inputRef);
   var equalityKey = props.optionValue ? null : props.dataKey;
 
   var onClick = function onClick(event) {
     if (!props.disabled && !props.readOnly) {
       toggle(event);
-      inputRef.current.focus();
     }
   };
 
@@ -29919,6 +30449,11 @@ var MultiStateCheckbox = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React_
     return props.optionValue ? ObjectUtils.resolveFieldData(option, props.optionValue) : option;
   };
 
+  var getOptionAriaLabel = function getOptionAriaLabel(option) {
+    var ariaField = props.optionLabel || props.optionValue;
+    return ariaField ? ObjectUtils.resolveFieldData(option, ariaField) : option;
+  };
+
   var findNextOption = function findNextOption() {
     if (props.options) {
       return selectedOptionIndex === props.options.length - 1 ? props.empty ? null : props.options[0] : props.options[selectedOptionIndex + 1];
@@ -29952,6 +30487,13 @@ var MultiStateCheckbox = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React_
     setFocusedState(false);
   };
 
+  var onKeyDown = function onKeyDown(e) {
+    if (e.keyCode === 32) {
+      toggle(e);
+      e.preventDefault();
+    }
+  };
+
   var getSelectedOptionMap = function getSelectedOptionMap() {
     var option, index;
 
@@ -29968,9 +30510,6 @@ var MultiStateCheckbox = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React_
     };
   };
 
-  React__namespace.useEffect(function () {
-    ObjectUtils.combinedRefs(inputRef, props.inputRef);
-  }, [inputRef, props.inputRef]);
   useMountEffect(function () {
     if (!props.empty && props.value === null) {
       toggle();
@@ -30010,6 +30549,8 @@ var MultiStateCheckbox = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React_
     'p-focus': focusedState
   }, selectedOption && selectedOption.className);
   var icon = createIcon();
+  var ariaValueLabel = !!selectedOption ? getOptionAriaLabel(selectedOption) : ariaLabel('nullLabel');
+  var ariaChecked = !!selectedOption ? 'true' : 'false';
   return /*#__PURE__*/React__namespace.createElement(React__namespace.Fragment, null, /*#__PURE__*/React__namespace.createElement("div", _extends({
     ref: elementRef,
     id: props.id,
@@ -30018,24 +30559,20 @@ var MultiStateCheckbox = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React_
   }, otherProps, {
     onClick: onClick
   }), /*#__PURE__*/React__namespace.createElement("div", {
-    className: "p-hidden-accessible"
-  }, /*#__PURE__*/React__namespace.createElement("input", {
-    ref: inputRef,
-    type: "checkbox",
-    "aria-labelledby": props.ariaLabelledBy,
-    id: props.inputId,
-    name: props.name,
+    className: boxClassName,
+    style: selectedOption && selectedOption.style,
+    tabIndex: props.tabIndex,
     onFocus: onFocus,
     onBlur: onBlur,
-    disabled: props.disabled,
-    readOnly: props.readOnly,
-    defaultChecked: !!selectedOption
-  })), /*#__PURE__*/React__namespace.createElement("div", {
-    className: boxClassName,
+    onKeyDown: onKeyDown,
     role: "checkbox",
-    "aria-checked": !!selectedOption,
-    style: selectedOption && selectedOption.style
-  }, icon)), hasTooltip && /*#__PURE__*/React__namespace.createElement(Tooltip, _extends({
+    "aria-checked": ariaChecked,
+    "aria-labelledby": props['aria-labelledby'],
+    "aria-label": props['aria-label']
+  }, icon), focusedState && /*#__PURE__*/React__namespace.createElement("span", {
+    className: "p-sr-only",
+    "aria-live": "polite"
+  }, ariaValueLabel)), hasTooltip && /*#__PURE__*/React__namespace.createElement(Tooltip, _extends({
     target: elementRef,
     content: props.tooltip
   }, props.tooltipOptions)));
@@ -30044,22 +30581,22 @@ MultiStateCheckbox.displayName = 'MultiStateCheckbox';
 MultiStateCheckbox.defaultProps = {
   __TYPE: 'MultiStateCheckbox',
   id: null,
-  inputRef: null,
-  inputId: null,
   value: null,
   options: null,
   optionValue: null,
+  optionLabel: null,
   iconTemplate: null,
   dataKey: null,
-  name: null,
   style: null,
   className: null,
   disabled: false,
   readOnly: false,
   empty: true,
+  tabIndex: "0",
+  'aria-label': null,
+  'aria-labelledby': null,
   tooltip: null,
   tooltipOptions: null,
-  ariaLabelledBy: null,
   onChange: null
 };
 
@@ -30867,7 +31404,7 @@ var OverlayPanel = /*#__PURE__*/React__namespace.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);
@@ -30894,7 +31431,7 @@ var OverlayPanel = /*#__PURE__*/React__namespace.forwardRef(function (props, ref
         innerHTML += "\n                    @media screen and (max-width: ".concat(breakpoint, ") {\n                        .p-overlaypanel[").concat(attributeSelector.current, "] {\n                            width: ").concat(props.breakpoints[breakpoint], " !important;\n                        }\n                    }\n                ");
       }
 
-      styleElement.innerHTML = innerHTML;
+      styleElement.current.innerHTML = innerHTML;
     }
   };
 
@@ -31322,6 +31859,7 @@ var PanelMenuSub = /*#__PURE__*/React__namespace.memo(function (props) {
 
     return /*#__PURE__*/React__namespace.createElement("li", {
       key: key,
+      id: item.id,
       className: className,
       style: item.style,
       role: "none"
@@ -31356,6 +31894,11 @@ var PanelMenu = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__namespac
       activeItemState = _React$useState4[0],
       setActiveItemState = _React$useState4[1];
 
+  var _React$useState5 = React__namespace.useState(false),
+      _React$useState6 = _slicedToArray(_React$useState5, 2),
+      animationDisabled = _React$useState6[0],
+      setAnimationDisabled = _React$useState6[1];
+
   var headerId = idState + '_header';
   var contentId = idState + '_content';
 
@@ -31425,6 +31968,14 @@ var PanelMenu = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__namespac
 
     setActiveItemState(findActiveItem());
   });
+  useUpdateEffect(function () {
+    setAnimationDisabled(true);
+    setActiveItemState(findActiveItem());
+  }, [props.model]);
+
+  var onEnter = function onEnter() {
+    setAnimationDisabled(false);
+  };
 
   var createPanel = function createPanel(item, index) {
     var key = item.label + '_' + index;
@@ -31497,6 +32048,8 @@ var PanelMenu = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__namespac
         enter: 1000,
         exit: 450
       },
+      onEnter: onEnter,
+      disabled: animationDisabled,
       "in": active,
       unmountOnExit: true,
       options: props.transitionOptions
@@ -32167,6 +32720,23 @@ var PickListSubList = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__na
     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__namespace.useImperativeHandle(ref, function () {
     return {
       listElementRef: listElementRef
@@ -32203,6 +32773,44 @@ var PickListSubList = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__na
     return null;
   };
 
+  var createFilter = function createFilter() {
+    if (props.showFilter) {
+      var content = /*#__PURE__*/React__namespace.createElement("div", {
+        className: "p-picklist-filter"
+      }, /*#__PURE__*/React__namespace.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__namespace.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__namespace.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);
@@ -32216,19 +32824,20 @@ var PickListSubList = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__na
 
   var className = classNames('p-picklist-list-wrapper', props.className);
   var header = createHeader();
+  var filter = createFilter();
   var list = createList();
   return /*#__PURE__*/React__namespace.createElement("div", {
     ref: listElementRef,
     className: className
-  }, header, list);
+  }, header, filter, list);
 }));
 PickListSubList.displayName = 'PickListSubList';
 
 var PickListTransferControls = /*#__PURE__*/React__namespace.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;
@@ -32259,8 +32868,12 @@ var PickListTransferControls = /*#__PURE__*/React__namespace.memo(function (prop
 
   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({
@@ -32302,8 +32915,12 @@ var PickListTransferControls = /*#__PURE__*/React__namespace.memo(function (prop
 
   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({
@@ -32354,12 +32971,27 @@ var PickList = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__namespace
       targetSelectionState = _React$useState4[0],
       setTargetSelectionState = _React$useState4[1];
 
+  var _React$useState5 = React__namespace.useState(''),
+      _React$useState6 = _slicedToArray(_React$useState5, 2),
+      sourceFilterValueState = _React$useState6[0],
+      setSourceFilterValueState = _React$useState6[1];
+
+  var _React$useState7 = React__namespace.useState(''),
+      _React$useState8 = _slicedToArray(_React$useState7, 2),
+      targetFilterValueState = _React$useState8[0],
+      setTargetFilterValueState = _React$useState8[1];
+
   var sourceListElementRef = React__namespace.useRef(null);
   var targetListElementRef = React__namespace.useRef(null);
   var reorderedListElementRef = React__namespace.useRef(null);
   var reorderDirection = React__namespace.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);
@@ -32494,6 +33126,52 @@ var PickList = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__namespace
     }
   };
 
+  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);
@@ -32503,6 +33181,10 @@ var PickList = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__namespace
   });
   var otherProps = ObjectUtils.findDiffKeys(props, PickList.defaultProps);
   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__namespace.createElement("div", _extends({
     id: props.id,
     className: className,
@@ -32515,41 +33197,55 @@ var PickList = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__namespace
     dataKey: props.dataKey
   }), /*#__PURE__*/React__namespace.createElement(PickListSubList, {
     ref: sourceListElementRef,
-    list: props.source,
+    type: "source",
+    list: sourceList,
     selection: sourceSelection,
     onSelectionChange: function onSelectionChange(e) {
       return _onSelectionChange(e, 'sourceSelection', props.onSourceSelectionChange);
     },
-    itemTemplate: props.itemTemplate,
+    itemTemplate: sourceItemTemplate,
     header: props.sourceHeader,
     style: props.sourceStyle,
     className: "p-picklist-source-wrapper",
     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__namespace.createElement(PickListTransferControls, {
     onTransfer: onTransfer,
     source: props.source,
+    visibleSourceList: sourceList,
     target: props.target,
+    visibleTargetList: targetList,
     sourceSelection: sourceSelection,
     targetSelection: targetSelection,
     dataKey: props.dataKey
   }), /*#__PURE__*/React__namespace.createElement(PickListSubList, {
     ref: targetListElementRef,
-    list: props.target,
+    type: "target",
+    list: targetList,
     selection: targetSelection,
     onSelectionChange: function onSelectionChange(e) {
       return _onSelectionChange(e, 'targetSelection', props.onTargetSelectionChange);
     },
-    itemTemplate: props.itemTemplate,
+    itemTemplate: targetItemTemplate,
     header: props.targetHeader,
     style: props.targetStyle,
     className: "p-picklist-target-wrapper",
     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__namespace.createElement(PickListControls, {
     list: props.target,
     selection: targetSelection,
@@ -32575,16 +33271,31 @@ 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,
+  sourceItemTemplate: null,
+  targetItemTemplate: null,
   onChange: null,
   onMoveToSource: null,
   onMoveAllToSource: null,
   onMoveToTarget: null,
   onMoveAllToTarget: null,
   onSourceSelectionChange: null,
-  onTargetSelectionChange: null
+  onTargetSelectionChange: null,
+  onSourceFilterChange: null,
+  onTargetFilterChange: null
 };
 
 var ProgressSpinner = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__namespace.forwardRef(function (props, ref) {
@@ -32653,7 +33364,7 @@ var RadioButton = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__namesp
         }
       });
       inputRef.current.checked = !props.checked;
-      inputRef.current.focus();
+      DomHandler.focus(inputRef.current);
     }
   };
 
@@ -32703,18 +33414,17 @@ var RadioButton = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__namesp
     ref: inputRef,
     id: props.inputId,
     type: "radio",
-    "aria-labelledby": props.ariaLabelledBy,
     name: props.name,
     defaultChecked: props.checked,
+    "aria-labelledby": props['aria-labelledby'],
+    "aria-label": props['aria-label'],
     onFocus: onFocus,
     onBlur: onBlur,
     disabled: props.disabled,
     required: props.required,
     tabIndex: props.tabIndex
   })), /*#__PURE__*/React__namespace.createElement("div", {
-    className: boxClassName,
-    role: "radio",
-    "aria-checked": props.checked
+    className: boxClassName
   }, /*#__PURE__*/React__namespace.createElement("div", {
     className: "p-radiobutton-icon"
   }))), hasTooltip && /*#__PURE__*/React__namespace.createElement(Tooltip, _extends({
@@ -32738,7 +33448,8 @@ RadioButton.defaultProps = {
   tabIndex: null,
   tooltip: null,
   tooltipOptions: null,
-  ariaLabelledBy: null,
+  'aria-label': null,
+  'aria-labelledby': null,
   onChange: null
 };
 
@@ -33185,8 +33896,7 @@ var SelectButtonItem = /*#__PURE__*/React__namespace.memo(function (props) {
   var onKeyDown = function onKeyDown(event) {
     var keyCode = event.which;
 
-    if (keyCode === 32 || keyCode === 13) {
-      //space and enter
+    if (keyCode === 32) {
       onClick(event);
       event.preventDefault();
     }
@@ -33209,7 +33919,6 @@ var SelectButtonItem = /*#__PURE__*/React__namespace.memo(function (props) {
     role: "button",
     "aria-label": props.label,
     "aria-pressed": props.selected,
-    "aria-labelledby": props.ariaLabelledBy,
     onClick: onClick,
     onKeyDown: onKeyDown,
     tabIndex: props.tabIndex,
@@ -33309,8 +34018,7 @@ var SelectButton = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__names
           template: props.itemTemplate,
           selected: selected,
           tabIndex: tabIndex,
-          disabled: isDisabled,
-          ariaLabelledBy: props.ariaLabelledBy
+          disabled: isDisabled
         });
       });
     }
@@ -33352,7 +34060,6 @@ SelectButton.defaultProps = {
   dataKey: null,
   tooltip: null,
   tooltipOptions: null,
-  ariaLabelledBy: null,
   itemTemplate: null,
   onChange: null
 };
@@ -33608,13 +34315,21 @@ Skeleton.defaultProps = {
   className: 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 _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__namespace.memo(function (props) {
   var _React$useState = React__namespace.useState(null),
       _React$useState2 = _slicedToArray(_React$useState, 2),
       activeItemState = _React$useState2[0],
       setActiveItemState = _React$useState2[1];
 
-  var onItemClick = function onItemClick(event, item) {
+  var _React$useState3 = React__namespace.useState({}),
+      _React$useState4 = _slicedToArray(_React$useState3, 2),
+      renderSubMenu = _React$useState4[0],
+      setRenderSubMenu = _React$useState4[1];
+
+  var onItemClick = function onItemClick(event, item, index) {
     if (item.disabled) {
       event.preventDefault();
       return;
@@ -33632,6 +34347,8 @@ var SlideMenuSub = /*#__PURE__*/React__namespace.memo(function (props) {
     }
 
     if (item.items) {
+      var key = createKey(item, index);
+      setRenderSubMenu(_objectSpread$9(_objectSpread$9({}, renderSubMenu), {}, _defineProperty({}, key, true)));
       setActiveItemState(item);
       props.onForward();
     }
@@ -33645,8 +34362,10 @@ var SlideMenuSub = /*#__PURE__*/React__namespace.memo(function (props) {
     });
   };
 
-  var createSubmenu = function createSubmenu(item) {
-    if (item.items) {
+  var createSubmenu = function createSubmenu(item, index) {
+    var shouldRender = renderSubMenu[createKey(item, index)];
+
+    if (item.items && shouldRender) {
       return /*#__PURE__*/React__namespace.createElement(SlideMenuSub, {
         menuProps: props.menuProps,
         model: item.items,
@@ -33661,8 +34380,12 @@ var SlideMenuSub = /*#__PURE__*/React__namespace.memo(function (props) {
     return null;
   };
 
+  var createKey = function createKey(item, index) {
+    return item.label + '_' + index;
+  };
+
   var createMenuitem = function createMenuitem(item, index) {
-    var key = item.label + '_' + index;
+    var key = createKey(item, index);
     var active = activeItemState === item;
     var className = classNames('p-menuitem', {
       'p-menuitem-active': active,
@@ -33681,13 +34404,13 @@ var SlideMenuSub = /*#__PURE__*/React__namespace.memo(function (props) {
     var submenuIcon = item.items && /*#__PURE__*/React__namespace.createElement("span", {
       className: submenuIconClassName
     });
-    var submenu = createSubmenu(item);
+    var submenu = createSubmenu(item, index);
     var content = /*#__PURE__*/React__namespace.createElement("a", {
       href: item.url || '#',
       className: "p-menuitem-link",
       target: item.target,
       onClick: function onClick(event) {
-        return onItemClick(event, item);
+        return onItemClick(event, item, index);
       },
       "aria-disabled": item.disabled
     }, icon, label, submenuIcon);
@@ -33695,7 +34418,7 @@ var SlideMenuSub = /*#__PURE__*/React__namespace.memo(function (props) {
     if (item.template) {
       var defaultContentOptions = {
         onClick: function onClick(event) {
-          return onItemClick(event, item);
+          return onItemClick(event, item, index);
         },
         className: 'p-menuitem-link',
         labelClassName: 'p-menuitem-text',
@@ -33710,6 +34433,7 @@ var SlideMenuSub = /*#__PURE__*/React__namespace.memo(function (props) {
 
     return /*#__PURE__*/React__namespace.createElement("li", {
       key: key,
+      id: item.id,
       className: className,
       style: item.style
     }, content, submenu);
@@ -34163,7 +34887,9 @@ var Slider = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__namespace.f
       "aria-valuemin": props.min,
       "aria-valuemax": props.max,
       "aria-valuenow": leftValue || bottomValue,
-      "aria-labelledby": props.ariaLabelledBy
+      "aria-labelledby": props['aria-labelledby'],
+      "aria-label": props['aria-label'],
+      "aria-orientation": props.orientation
     });
   };
 
@@ -34230,14 +34956,15 @@ Slider.defaultProps = {
   className: null,
   disabled: false,
   tabIndex: 0,
-  ariaLabelledBy: null,
   onChange: null,
-  onSlideEnd: null
+  onSlideEnd: null,
+  'aria-label': null,
+  '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__namespace.memo( /*#__PURE__*/React__namespace.forwardRef(function (props, ref) {
   var _classNames2;
 
@@ -34382,7 +35109,7 @@ var SpeedDial = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__namespac
   var getItemStyle = function getItemStyle(index) {
     var transitionDelay = calculateTransitionDelay(index);
     var pointStyle = calculatePointStyle(index);
-    return _objectSpread$9({
+    return _objectSpread$8({
       transitionDelay: "".concat(transitionDelay, "ms")
     }, pointStyle);
   };
@@ -34622,7 +35349,8 @@ var SplitButtonItem = /*#__PURE__*/React__namespace.memo(function (props) {
       role: "menuitem",
       className: className,
       target: target,
-      onClick: onClick
+      onClick: onClick,
+      "aria-label": _label
     }, icon, label);
 
     if (template) {
@@ -34673,9 +35401,9 @@ var SplitButtonPanel = /*#__PURE__*/React__namespace.forwardRef(function (props,
       ref: ref,
       className: className,
       style: props.menuStyle,
-      id: props.id,
       onClick: props.onClick
     }, /*#__PURE__*/React__namespace.createElement("ul", {
+      id: props.menuId,
       className: "p-menu-list p-reset",
       role: "menu"
     }, props.children)));
@@ -34802,34 +35530,36 @@ var SplitButton = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__namesp
   var menuButtonClassName = classNames('p-splitbutton-menubutton', props.menuButtonClassName);
   var buttonContent = props.buttonTemplate ? ObjectUtils.getJSXElement(props.buttonTemplate, props) : null;
   var items = createItems();
-  var panelId = idState + '_overlay';
+  var menuId = idState + '_menu';
   return /*#__PURE__*/React__namespace.createElement(React__namespace.Fragment, null, /*#__PURE__*/React__namespace.createElement("div", _extends({
     ref: elementRef,
     id: idState,
     className: className,
     style: props.style
-  }, otherProps), /*#__PURE__*/React__namespace.createElement(Button, {
+  }, otherProps), /*#__PURE__*/React__namespace.createElement(Button, _extends({
     ref: defaultButtonRef,
     type: "button",
     className: buttonClassName,
     icon: props.icon,
+    loading: props.loading,
+    loadingIcon: props.loadingIcon,
     label: props.label,
     onClick: props.onClick,
     disabled: props.disabled,
     tabIndex: props.tabIndex
-  }, buttonContent), /*#__PURE__*/React__namespace.createElement(Button, {
+  }, props.buttonProps), buttonContent), /*#__PURE__*/React__namespace.createElement(Button, _extends({
     type: "button",
     className: menuButtonClassName,
     icon: props.dropdownIcon,
     onClick: onDropdownButtonClick,
     disabled: props.disabled,
     "aria-expanded": overlayVisibleState,
-    "aria-haspopup": true,
-    "aria-owns": panelId
-  }), /*#__PURE__*/React__namespace.createElement(SplitButtonPanel, {
+    "aria-haspopup": "true",
+    "aria-controls": overlayVisibleState ? menuId : null
+  }, props.menuButtonProps)), /*#__PURE__*/React__namespace.createElement(SplitButtonPanel, {
     ref: overlayRef,
     appendTo: props.appendTo,
-    id: panelId,
+    menuId: menuId,
     menuStyle: props.menuStyle,
     menuClassName: props.menuClassName,
     onClick: onPanelClick,
@@ -34850,6 +35580,8 @@ SplitButton.defaultProps = {
   id: null,
   label: null,
   icon: null,
+  loading: false,
+  loadingIcon: 'pi pi-spinner pi-spin',
   model: null,
   disabled: null,
   style: null,
@@ -34858,6 +35590,8 @@ SplitButton.defaultProps = {
   menuStyle: null,
   menuClassName: null,
   menuButtonClassName: null,
+  buttonProps: null,
+  menuButtonProps: null,
   tabIndex: null,
   appendTo: null,
   tooltip: null,
@@ -34873,7 +35607,8 @@ SplitButton.defaultProps = {
 var SplitterPanel = function SplitterPanel() {};
 var Splitter = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__namespace.forwardRef(function (props, ref) {
   var elementRef = React__namespace.useRef(null);
-  var gutterRef = React__namespace.useRef(null);
+  var gutterRef = React__namespace.useRef();
+  var gutterRefs = React__namespace.useRef({});
   var size = React__namespace.useRef(null);
   var dragging = React__namespace.useRef(null);
   var startPos = React__namespace.useRef(null);
@@ -34883,6 +35618,7 @@ var Splitter = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__namespace
   var nextPanelSize = React__namespace.useRef(null);
   var prevPanelIndex = React__namespace.useRef(null);
   var panelSizes = React__namespace.useRef(null);
+  var mounted = React__namespace.useRef(false);
   var isStateful = props.stateKey != null;
 
   var _useEventListener = useEventListener({
@@ -34953,7 +35689,7 @@ var Splitter = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__namespace
   };
 
   var saveState = function saveState() {
-    getStorage().setItem(props.stateKey, JSON.stringify(panelSizes));
+    getStorage().setItem(props.stateKey, JSON.stringify(panelSizes.current));
   };
 
   var restoreState = function restoreState() {
@@ -34968,7 +35704,7 @@ var Splitter = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__namespace
       });
 
       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;
     }
@@ -34977,6 +35713,7 @@ var Splitter = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__namespace
   };
 
   var onResizeStart = function onResizeStart(event, index) {
+    gutterRef.current = gutterRefs.current[index];
     var pageX = event.type === 'touchstart' ? event.touches[0].pageX : event.pageX;
     var pageY = event.type === 'touchstart' ? event.touches[0].pageY : event.pageY;
     size.current = props.layout === 'horizontal' ? DomHandler.getWidth(elementRef.current) : DomHandler.getHeight(elementRef.current);
@@ -35015,7 +35752,7 @@ var Splitter = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__namespace
     if (props.onResizeEnd) {
       props.onResizeEnd({
         originalEvent: event,
-        sizes: panelSizes
+        sizes: panelSizes.current
       });
     }
 
@@ -35048,7 +35785,7 @@ var Splitter = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__namespace
     window.removeEventListener('touchend', onGutterTouchEnd);
   };
 
-  useMountEffect(function () {
+  React__namespace.useEffect(function () {
     var panelElements = _toConsumableArray(elementRef.current.children).filter(function (child) {
       return DomHandler.hasClass(child, 'p-splitter-panel');
     });
@@ -35062,7 +35799,7 @@ var Splitter = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__namespace
     if (props.children && props.children.length) {
       var initialized = false;
 
-      if (isStateful) {
+      if (isStateful && !mounted.current) {
         initialized = restoreState();
       }
 
@@ -35076,8 +35813,11 @@ var Splitter = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__namespace
           return _panelSizes;
         });
         panelSizes.current = _panelSizes;
+        mounted.current && saveState();
       }
     }
+
+    mounted.current = true;
   });
 
   var createPanel = function createPanel(panel, index) {
@@ -35089,7 +35829,9 @@ var Splitter = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__namespace
       height: props.gutterSize + 'px'
     };
     var gutter = index !== props.children.length - 1 && /*#__PURE__*/React__namespace.createElement("div", {
-      ref: gutterRef,
+      ref: function ref(el) {
+        return gutterRefs.current[index] = el;
+      },
       className: "p-splitter-gutter",
       style: gutterStyle,
       onMouseDown: function onMouseDown(event) {
@@ -35228,6 +35970,7 @@ var Steps = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__namespace.fo
 
     return /*#__PURE__*/React__namespace.createElement("li", {
       key: key,
+      id: item.id,
       className: className,
       style: item.style,
       role: "tab",
@@ -35292,8 +36035,7 @@ var StyleClass = /*#__PURE__*/React__namespace.forwardRef(function (props, ref)
       }
 
       animating.current = false;
-    },
-    when: false
+    }
   }),
       _useEventListener2 = _slicedToArray(_useEventListener, 2),
       bindTargetEnterListener = _useEventListener2[0],
@@ -35310,23 +36052,22 @@ var StyleClass = /*#__PURE__*/React__namespace.forwardRef(function (props, ref)
 
       unbindTargetLeaveListener();
       animating.current = false;
-    },
-    when: false
+    }
   }),
       _useEventListener4 = _slicedToArray(_useEventListener3, 2),
       bindTargetLeaveListener = _useEventListener4[0],
       unbindTargetLeaveListener = _useEventListener4[1];
 
   var _useEventListener5 = useEventListener({
-    type: 'animationend',
+    type: 'click',
     listener: function listener(event) {
-      if (getComputedStyle(targetRef.current).getPropertyValue('position') === 'static') {
+      if (!isVisible(targetRef.current) || getComputedStyle(targetRef.current).getPropertyValue('position') === 'static') {
         unbindDocumentClickListener();
-      } else if (!elementRef.current.isSameNode(event.target) && !elementRef.current.contains(event.target) && !targetRef.current.contains(event.target)) {
+      } else if (isOutsideClick(event)) {
         leave();
       }
     },
-    when: false
+    when: props.hideOnOutsideClick
   }),
       _useEventListener6 = _slicedToArray(_useEventListener5, 2),
       bindDocumentClickListener = _useEventListener6[0],
@@ -35342,8 +36083,7 @@ var StyleClass = /*#__PURE__*/React__namespace.forwardRef(function (props, ref)
       } else {
         if (targetRef.current.offsetParent === null) enter();else leave();
       }
-    },
-    when: false
+    }
   }),
       _useEventListener8 = _slicedToArray(_useEventListener7, 2),
       bindClickListener = _useEventListener8[0],
@@ -35369,8 +36109,7 @@ var StyleClass = /*#__PURE__*/React__namespace.forwardRef(function (props, ref)
         }
 
         bindTargetEnterListener({
-          target: targetRef.current,
-          when: true
+          target: targetRef.current
         });
       }
     } else {
@@ -35384,8 +36123,7 @@ var StyleClass = /*#__PURE__*/React__namespace.forwardRef(function (props, ref)
     }
 
     bindDocumentClickListener({
-      target: elementRef.current && elementRef.current.ownerDocument,
-      when: props.hideOnOutsideClick
+      target: elementRef.current && elementRef.current.ownerDocument
     });
   };
 
@@ -35400,8 +36138,7 @@ var StyleClass = /*#__PURE__*/React__namespace.forwardRef(function (props, ref)
         }
 
         bindTargetLeaveListener({
-          target: targetRef.current,
-          when: true
+          target: targetRef.current
         });
       }
     } else {
@@ -35414,7 +36151,9 @@ var StyleClass = /*#__PURE__*/React__namespace.forwardRef(function (props, ref)
       }
     }
 
-    unbindDocumentClickListener();
+    if (props.hideOnOutsideClick) {
+      unbindDocumentClickListener();
+    }
   };
 
   var resolveTarget = function resolveTarget() {
@@ -35443,8 +36182,7 @@ var StyleClass = /*#__PURE__*/React__namespace.forwardRef(function (props, ref)
   var init = function init() {
     elementRef.current = ObjectUtils.getRefElement(props.nodeRef);
     bindClickListener({
-      target: elementRef.current,
-      when: true
+      target: elementRef.current
     });
   };
 
@@ -35454,13 +36192,23 @@ var StyleClass = /*#__PURE__*/React__namespace.forwardRef(function (props, ref)
     targetRef.current = null;
   };
 
+  var isVisible = function isVisible(target) {
+    return target.offsetParent !== null;
+  };
+
+  var isOutsideClick = function isOutsideClick(event) {
+    return !elementRef.current.isSameNode(event.target) && !elementRef.current.contains(event.target) && !targetRef.current.contains(event.target);
+  };
+
   useMountEffect(function () {
     init();
   });
   useUpdateEffect(function () {
-    destroy();
     init();
-  }, [props.nodeRef]);
+    return function () {
+      unbindClickListener();
+    };
+  });
   useUnmountEffect(function () {
     destroy();
   });
@@ -35633,9 +36381,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__namespace.forwardRef(function (props, ref) {
   var _React$useState = React__namespace.useState(props.id),
@@ -35830,7 +36578,7 @@ var TabView = /*#__PURE__*/React__namespace.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,
@@ -35937,7 +36685,7 @@ var TabView = /*#__PURE__*/React__namespace.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
@@ -36093,7 +36841,7 @@ var Terminal = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__namespace
   var isEmitted = React__namespace.useRef(false);
 
   var onClick = function onClick() {
-    inputRef.current.focus();
+    DomHandler.focus(inputRef.current);
   };
 
   var onInputChange = function onInputChange(e) {
@@ -36408,7 +37156,8 @@ var TieredMenuSub = /*#__PURE__*/React__namespace.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,
@@ -36477,6 +37226,7 @@ var TieredMenuSub = /*#__PURE__*/React__namespace.memo(function (props) {
 
     return /*#__PURE__*/React__namespace.createElement("li", {
       key: key,
+      id: item,
       className: className,
       style: style,
       onMouseEnter: function onMouseEnter(event) {
@@ -36698,9 +37448,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__namespace.memo( /*#__PURE__*/React__namespace.forwardRef(function (props, ref) {
   var _props$message = props.message,
       severity = _props$message.severity,
@@ -36748,7 +37498,7 @@ var ToastMessage = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__names
 
   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', {
@@ -36790,9 +37540,6 @@ var ToastMessage = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__names
 }));
 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__namespace.memo( /*#__PURE__*/React__namespace.forwardRef(function (props, ref) {
   var _React$useState = React__namespace.useState([]),
@@ -36807,21 +37554,13 @@ var Toast = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__namespace.fo
       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']);
@@ -36834,6 +37573,11 @@ var Toast = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__namespace.fo
     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;
@@ -36847,7 +37591,7 @@ var Toast = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__namespace.fo
   };
 
   var onExited = function onExited() {
-    messagesState.length === 0 && ZIndexUtils.clear(containerRef.current);
+    messagesState.length === 1 && ZIndexUtils.clear(containerRef.current);
     props.onHide && props.onHide();
   };
 
@@ -36857,6 +37601,7 @@ var Toast = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__namespace.fo
   React__namespace.useImperativeHandle(ref, function () {
     return {
       show: show,
+      replace: replace,
       clear: clear
     };
   });
@@ -37120,6 +37865,14 @@ var UITreeNode = /*#__PURE__*/React__namespace.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 {
@@ -37191,7 +37944,7 @@ var UITreeNode = /*#__PURE__*/React__namespace.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) {
@@ -38409,7 +39162,7 @@ var TreeSelect = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__namespa
 
   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();
     }
   };
@@ -38525,7 +39278,7 @@ var TreeSelect = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__namespa
     bindOverlayListener();
 
     if (props.filter && props.filterInputAutoFocus) {
-      filterInputRef.current.focus();
+      DomHandler.focus(filterInputRef.current, props.filterInputAutoFocus);
     }
 
     props.onShow && props.onShow();
@@ -39442,6 +40195,7 @@ var TreeTableRow = /*#__PURE__*/React__namespace.memo(function (props) {
     return /*#__PURE__*/React__namespace.createElement(TreeTableBodyCell, _extends({
       key: column.props.columnKey || column.props.field
     }, column.props, {
+      column: column,
       selectOnEdit: props.selectOnEdit,
       selected: isSelected(),
       node: props.node,
@@ -39955,6 +40709,14 @@ var TreeTableHeader = /*#__PURE__*/React__namespace.memo(function (props) {
     }
   };
 
+  var getColumnProp = function getColumnProp(column) {
+    for (var _len = arguments.length, args = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
+      args[_key - 1] = arguments[_key];
+    }
+
+    return column ? typeof args[0] === 'string' ? column.props[args[0]] : (args[0] || column).props[args[1]] : null;
+  };
+
   var createSortIcon = function createSortIcon(column, sorted, sortOrder) {
     if (column.props.sortable) {
       var sortIcon = sorted ? sortOrder < 0 ? 'pi-sort-amount-down' : 'pi-sort-amount-up-alt' : 'pi-sort-alt';
@@ -40028,7 +40790,7 @@ var TreeTableHeader = /*#__PURE__*/React__namespace.memo(function (props) {
       var className = classNames(column.props.headerClassName || column.props.className, {
         'p-sortable-column': column.props.sortable,
         'p-highlight': sorted,
-        'p-resizable-column': props.resizableColumns
+        'p-resizable-column': props.resizableColumns && getColumnProp(column, 'resizeable')
       });
       var resizer = createResizer(column);
       return /*#__PURE__*/React__namespace.createElement("th", {
@@ -40482,6 +41244,7 @@ var TreeTable = /*#__PURE__*/React__namespace.forwardRef(function (props, ref) {
 
     if (columnSortable.current && columnSortable.current === 'custom' && columnSortFunction.current) {
       value = columnSortFunction.current({
+        rowData: value,
         field: getSortField(),
         order: getSortOrder()
       });
@@ -41472,12 +42235,10 @@ var TriStateCheckbox = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__n
       setFocusedState = _React$useState2[1];
 
   var elementRef = React__namespace.useRef(null);
-  var inputRef = React__namespace.useRef(props.inputRef);
 
   var onClick = function onClick(event) {
-    if (!props.disabled) {
+    if (!props.disabled && !props.readOnly) {
       toggle(event);
-      inputRef.current.focus();
     }
   };
 
@@ -41508,9 +42269,13 @@ var TriStateCheckbox = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__n
     setFocusedState(false);
   };
 
-  React__namespace.useEffect(function () {
-    ObjectUtils.combinedRefs(inputRef, props.inputRef);
-  }, [inputRef, props.inputRef]);
+  var onKeyDown = function onKeyDown(e) {
+    if (e.keyCode === 32) {
+      toggle(e);
+      e.preventDefault();
+    }
+  };
+
   var hasTooltip = ObjectUtils.isNotEmpty(props.tooltip);
   var otherProps = ObjectUtils.findDiffKeys(props, TriStateCheckbox.defaultProps);
   var className = classNames('p-tristatecheckbox p-checkbox p-component', props.className);
@@ -41523,6 +42288,8 @@ var TriStateCheckbox = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__n
     'pi pi-check': props.value === true,
     'pi pi-times': props.value === false
   });
+  var ariaValueLabel = props.value ? ariaLabel('trueLabel') : props.value === false ? ariaLabel('falseLabel') : ariaLabel('nullLabel');
+  var ariaChecked = props.value ? 'true' : 'false';
   return /*#__PURE__*/React__namespace.createElement(React__namespace.Fragment, null, /*#__PURE__*/React__namespace.createElement("div", _extends({
     ref: elementRef,
     id: props.id,
@@ -41531,24 +42298,21 @@ var TriStateCheckbox = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__n
   }, otherProps, {
     onClick: onClick
   }), /*#__PURE__*/React__namespace.createElement("div", {
-    className: "p-hidden-accessible"
-  }, /*#__PURE__*/React__namespace.createElement("input", {
-    ref: inputRef,
-    type: "checkbox",
-    "aria-labelledby": props.ariaLabelledBy,
-    id: props.inputId,
-    name: props.name,
+    className: boxClassName,
+    tabIndex: props.tabIndex,
     onFocus: onFocus,
     onBlur: onBlur,
-    disabled: props.disabled,
-    defaultChecked: props.value
-  })), /*#__PURE__*/React__namespace.createElement("div", {
-    className: boxClassName,
+    onKeyDown: onKeyDown,
     role: "checkbox",
-    "aria-checked": props.value === true
+    "aria-checked": ariaChecked,
+    "aria-labelledby": props['aria-labelledby'],
+    "aria-label": props['aria-label']
   }, /*#__PURE__*/React__namespace.createElement("span", {
     className: iconClassName
-  }))), hasTooltip && /*#__PURE__*/React__namespace.createElement(Tooltip, _extends({
+  })), focusedState && /*#__PURE__*/React__namespace.createElement("span", {
+    className: "p-sr-only",
+    "aria-live": "polite"
+  }, ariaValueLabel)), hasTooltip && /*#__PURE__*/React__namespace.createElement(Tooltip, _extends({
     target: elementRef,
     content: props.tooltip
   }, props.tooltipOptions)));
@@ -41557,16 +42321,16 @@ TriStateCheckbox.displayName = 'TriStateCheckbox';
 TriStateCheckbox.defaultProps = {
   __TYPE: 'TriStateCheckbox',
   id: null,
-  inputRef: null,
-  inputId: null,
   value: null,
-  name: null,
   style: null,
   className: null,
   disabled: false,
+  readOnly: false,
+  tabIndex: "0",
+  'aria-label': null,
+  'aria-labelledby': null,
   tooltip: null,
   tooltipOptions: null,
-  ariaLabelledBy: null,
   onChange: null
 };
 
@@ -41690,6 +42454,7 @@ exports.UniqueComponentId = UniqueComponentId;
 exports.VirtualScroller = VirtualScroller;
 exports.ZIndexUtils = ZIndexUtils;
 exports.addLocale = addLocale;
+exports.ariaLabel = ariaLabel;
 exports.classNames = classNames;
 exports.confirmDialog = confirmDialog;
 exports.confirmPopup = confirmPopup;
@@ -41702,11 +42467,13 @@ exports.updateLocaleOption = updateLocaleOption;
 exports.updateLocaleOptions = updateLocaleOptions;
 exports.useEventListener = useEventListener;
 exports.useInterval = useInterval;
+exports.useLocalStorage = useLocalStorage;
 exports.useMountEffect = useMountEffect;
 exports.useOverlayListener = useOverlayListener;
 exports.useOverlayScrollListener = useOverlayScrollListener;
 exports.usePrevious = usePrevious;
 exports.useResizeListener = useResizeListener;
+exports.useSessionStorage = useSessionStorage;
 exports.useStorage = useStorage;
 exports.useTimeout = useTimeout;
 exports.useUnmountEffect = useUnmountEffect;