primereact 8.0.1 → 8.2.0

package/primereact.all.js

@@ -254,7 +254,17 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
       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'
+      }
     }
   };
 
@@ -290,6 +300,16 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
     }
   }
 
+  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;
 
@@ -1439,6 +1459,21 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
         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) {
@@ -1834,12 +1869,9 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
 
     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);
@@ -2375,7 +2407,11 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
         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;
@@ -3027,9 +3063,25 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
 
   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) {
@@ -3063,8 +3115,36 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
       }
     };
 
+    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 */
@@ -3503,6 +3583,11 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
         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);
@@ -3621,7 +3706,7 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
         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']);
@@ -3644,7 +3729,7 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
           align(currentTargetRef.current, {
             x: e.pageX,
             y: e.pageY
-          });
+          }, position);
         });
       };
 
@@ -3659,16 +3744,16 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
 
         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'));
           });
         }
       }
@@ -3678,7 +3763,6 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
       clearTimeouts();
 
       if (visibleState) {
-        DomHandler.removeClass(currentTargetRef.current, getTargetOption(currentTargetRef.current, 'classname'));
         var success = sendCallback(props.onBeforeHide, {
           originalEvent: e,
           target: currentTargetRef.current
@@ -3694,6 +3778,7 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
             DomHandler.removeClass(elementRef.current, 'p-tooltip-active');
             setVisibleState(false);
             setPositionState(props.position);
+            setClassNameState('');
             currentTargetRef.current = null;
             containerSize.current = null;
             allowHide.current = true;
@@ -3706,9 +3791,10 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
       }
     };
 
-    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 = {
@@ -3722,7 +3808,7 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
             mouseTrackTop = _getMouseTrackPositio.top,
             mouseTrackLeft = _getMouseTrackPositio.left;
 
-        switch (positionState) {
+        switch (currentPosition) {
           case 'left':
             left -= _containerSize.width + mouseTrackLeft;
             top -= _containerSize.height / 2 - mouseTrackTop;
@@ -3755,28 +3841,28 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
         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';
       }
     };
 
@@ -3962,7 +4048,7 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
 
     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,
@@ -4082,7 +4168,7 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
     var icon = createIcon();
     var label = createLabel();
     var badge = createBadge();
-    var defaultAriaLabel = props.label ? props.label + (props.badge ? ' ' + props.badge : '') : '';
+    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
@@ -4335,7 +4421,7 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
         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];
@@ -4358,10 +4444,39 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
       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);
     };
 
@@ -4371,9 +4486,6 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
       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;
 
@@ -4382,8 +4494,8 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
         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() {
@@ -4403,15 +4515,13 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
         };
 
         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));
         }
       }
     };
@@ -4424,8 +4534,6 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
             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;
@@ -4442,26 +4550,26 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
         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);
             }
@@ -4477,18 +4585,14 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
     };
 
     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));
       };
@@ -4497,13 +4601,14 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
       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,
@@ -4511,7 +4616,7 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
           };
         } else {
           var scrollPos = horizontal ? scrollLeft : scrollTop;
-          firstInViewport = calculateFirstInViewport(scrollPos, itemSize);
+          firstInViewport = calculateFirstInViewport(scrollPos, props.itemSize);
           lastInViewport = firstInViewport + numItemsInViewportState;
         }
       }
@@ -4527,7 +4632,6 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
     };
 
     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;
@@ -4541,9 +4645,9 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
       };
 
       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,
@@ -4588,15 +4692,26 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
       }
     };
 
+    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() {
@@ -4649,7 +4764,6 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
       var items = props.items;
 
       if (_spacerRef.current && items) {
-        var itemSize = props.itemSize;
         var contentPos = getContentPosition();
 
         var setProp = function setProp(_name, _value, _size) {
@@ -4659,10 +4773,10 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
         };
 
         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);
         }
       }
     };
@@ -4670,7 +4784,6 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
     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;
@@ -4686,9 +4799,9 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
         };
 
         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);
         }
       }
@@ -4696,7 +4809,6 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
 
     var onScrollPositionChange = function onScrollPositionChange(event) {
       var target = event.target;
-      var itemSize = props.itemSize;
       var contentPos = getContentPosition();
 
       var calculateScrollPos = function calculateScrollPos(_pos, _cpos) {
@@ -4727,16 +4839,20 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
 
       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),
@@ -4750,8 +4866,8 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
           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
         };
@@ -4759,20 +4875,21 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
         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
       };
     };
 
@@ -4780,7 +4897,8 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
       var _onScrollPositionChan = onScrollPositionChange(event),
           first = _onScrollPositionChan.first,
           last = _onScrollPositionChan.last,
-          isRangeChanged = _onScrollPositionChan.isRangeChanged;
+          isRangeChanged = _onScrollPositionChan.isRangeChanged,
+          scrollPos = _onScrollPositionChan.scrollPos;
 
       if (isRangeChanged) {
         var newState = {
@@ -4790,6 +4908,7 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
         setContentPosition(newState);
         setFirstState(first);
         setLastState(last);
+        lastScrollPos.current = scrollPos;
         props.onScrollIndexChange && props.onScrollIndexChange(newState);
 
         if (props.lazy) {
@@ -4816,7 +4935,7 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
         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);
@@ -4825,10 +4944,32 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
       }
     };
 
+    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,
@@ -4866,25 +5007,48 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
     };
 
     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 ? {
@@ -4894,6 +5058,7 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
     }, [props.orientation]);
     React__namespace.useImperativeHandle(ref, function () {
       return {
+        getElementRef: getElementRef,
         scrollTo: scrollTo,
         scrollToIndex: scrollToIndex,
         scrollInView: scrollInView,
@@ -4925,6 +5090,13 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
               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", {
@@ -5047,14 +5219,17 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
     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,
@@ -5070,7 +5245,7 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
       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;
@@ -5081,6 +5256,7 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
           role: "option",
           "aria-selected": selected,
           className: "p-autocomplete-item",
+          style: style,
           onClick: function onClick(e) {
             return props.onItemClick(e, item);
           },
@@ -5091,14 +5267,20 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
     };
 
     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;
@@ -5108,6 +5290,7 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
           role: "option",
           "aria-selected": props.selectedItem === suggestion,
           className: "p-autocomplete-item",
+          style: style,
           onClick: function onClick(e) {
             return props.onItemClick(e, suggestion);
           }
@@ -5125,9 +5308,10 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
           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);
@@ -5309,7 +5493,7 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
       }
 
       if (!preventInputFocus) {
-        inputRef.current.focus();
+        DomHandler.focus(inputRef.current);
         hide();
       }
     };
@@ -5374,7 +5558,8 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
 
     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');
       }
     };
 
@@ -5406,7 +5591,7 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
 
     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');
@@ -5447,7 +5632,7 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
               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');
@@ -5472,7 +5657,7 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
               if (previousElement) {
                 DomHandler.addClass(previousElement, 'p-highlight');
                 DomHandler.removeClass(highlightItem, 'p-highlight');
-                DomHandler.scrollInView(overlayRef.current, previousElement);
+                DomHandler.scrollInView(getScrollableElement(), previousElement);
               }
             }
 
@@ -5484,9 +5669,9 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
             if (highlightItem) {
               selectHighlightItem(event, highlightItem);
               hide();
+              event.preventDefault();
             }
 
-            event.preventDefault();
             break;
           //escape
 
@@ -5579,7 +5764,7 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
     };
 
     var onMultiContainerClick = function onMultiContainerClick(event) {
-      inputRef.current.focus();
+      DomHandler.focus(inputRef.current);
       props.onClick && props.onClick(event);
     };
 
@@ -5605,6 +5790,10 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
       }) : -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;
     };
@@ -5621,8 +5810,8 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
         setIdState(UniqueComponentId());
       }
 
-      if (props.autoFocus && inputRef.current) {
-        inputRef.current.focus();
+      if (props.autoFocus) {
+        DomHandler.focus(inputRef.current, props.autoFocus);
       }
     });
     useUpdateEffect(function () {
@@ -5651,7 +5840,7 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
 
     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
       });
@@ -5661,10 +5850,13 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
         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",
@@ -5711,7 +5903,7 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
     };
 
     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", {
@@ -5719,10 +5911,13 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
         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,
@@ -5799,10 +5994,7 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
       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
@@ -5864,13 +6056,14 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
     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,
@@ -5890,7 +6083,13 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
 
   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);
@@ -5900,12 +6099,6 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
         }, {
           props: props
         });
-      } else if (props.image) {
-        return /*#__PURE__*/React__namespace.createElement("img", {
-          src: props.image,
-          alt: props.imageAlt,
-          onError: props.onImageError
-        });
       }
 
       return null;
@@ -5958,8 +6151,8 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
   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);
@@ -6116,7 +6309,8 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
             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
@@ -6127,10 +6321,7 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
         }, {
           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,
@@ -6138,7 +6329,25 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
           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;
@@ -6293,6 +6502,7 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
     var overlayEventListener = React__namespace.useRef(null);
     var touchUIMaskClickListener = React__namespace.useRef(null);
     var isOverlayClicked = React__namespace.useRef(false);
+    var ignoreMaskChange = React__namespace.useRef(false);
 
     var _React$useState7 = React__namespace.useState('date'),
         _React$useState8 = _slicedToArray(_React$useState7, 2),
@@ -6412,7 +6622,7 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
     var reFocusInputField = function reFocusInputField() {
       if (!props.inline && inputRef.current) {
         ignoreFocusFunctionality.current = true;
-        inputRef.current.focus();
+        DomHandler.focus(inputRef.current);
       }
     };
 
@@ -6985,7 +7195,11 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
       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();
     };
 
@@ -7022,6 +7236,14 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
       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;
@@ -7186,6 +7408,56 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
         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) {
@@ -7513,6 +7785,8 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
         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);
@@ -8623,7 +8897,11 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
           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;
           }
         });
       }
@@ -8663,7 +8941,10 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
       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) {
@@ -8721,7 +9002,7 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
       }), /*#__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') {
@@ -8773,7 +9054,7 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
         className: "p-datepicker-month p-link",
         onClick: switchToMonthView,
         disabled: switchViewButtonDisabled()
-      }, monthNames[currentMonth]);
+      }, monthNames[month]);
     };
 
     var createTitleYearElement = function createTitleYearElement() {
@@ -9389,7 +9670,7 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
       onExit: onOverlayExit,
       onExited: onOverlayExited,
       transitionOptions: props.transitionOptions
-    }, datePicker, timePicker, buttonBar, footer, monthPicker, yearPicker));
+    }, datePicker, timePicker, monthPicker, yearPicker, buttonBar, footer));
   }));
   Calendar.displayName = 'Calendar';
   Calendar.defaultProps = {
@@ -9446,6 +9727,7 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
     minDate: null,
     maxDate: null,
     maxDateCount: null,
+    showMinMaxRange: false,
     showOtherMonths: true,
     selectOtherMonths: false,
     showButtonBar: false,
@@ -9527,6 +9809,7 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
 
         script.onload = function () {
           if (!window.grecaptcha) {
+            // eslint-disable-next-line no-console
             console.warn('Recaptcha is not loaded');
             return;
           }
@@ -9689,10 +9972,10 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
     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() {
@@ -10126,14 +10409,14 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
         '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() {
@@ -10145,14 +10428,14 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
         '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) {
@@ -10164,13 +10447,14 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
       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() {
@@ -10510,7 +10794,7 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
 
       updateSelectionPath();
       hide();
-      inputRef.current.focus();
+      DomHandler.focus(inputRef.current);
     };
 
     var onOptionGroupSelect = function onOptionGroupSelect(event) {
@@ -10519,7 +10803,8 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
     };
 
     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) {
@@ -10595,7 +10880,7 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
       }
 
       if (!overlayRef.current || !overlayRef.current.contains(event.target)) {
-        inputRef.current.focus();
+        DomHandler.focus(inputRef.current);
         overlayVisibleState ? hide() : show();
       }
     };
@@ -10649,7 +10934,7 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
     var hide = function hide() {
       props.onBeforeHide && props.onBeforeHide();
       setOverlayVisibleState(false);
-      inputRef.current.focus();
+      DomHandler.focus(inputRef.current);
     };
 
     var onOverlayEnter = function onOverlayEnter() {
@@ -10841,13 +11126,19 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
           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);
+          }
         }
       });
     };
@@ -10941,8 +11232,7 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
           }
         });
         inputRef.current.checked = !_checked;
-        inputRef.current.focus();
-        event.preventDefault();
+        DomHandler.focus(inputRef.current);
       }
     };
 
@@ -11203,12 +11493,17 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
     };
 
     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
@@ -11228,6 +11523,10 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
           break;
 
         default:
+          if (props.keyfilter) {
+            KeyFilter.onKeyPress(event, props.keyfilter);
+          }
+
           if (isMaxedOut()) {
             event.preventDefault();
           } else if (props.separator === ',' && event.which === 188) {
@@ -11261,6 +11560,10 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
       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);
@@ -11403,11 +11706,13 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
     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) {
@@ -12096,7 +12401,8 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
     rowReorderIcon: 'pi pi-bars',
     rowEditor: false,
     exportable: true,
-    reorderable: true
+    reorderable: true,
+    resizeable: true
   };
 
   var ColumnGroup = function ColumnGroup() {};
@@ -12452,7 +12758,7 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
           return param.hasBlockScroll;
         });
 
-        if (!hasBlockScroll) {
+        if (hasBlockScroll) {
           DomHandler.removeClass(document.body, 'p-overflow-hidden');
         }
       } else if (props.blockScroll || props.maximizable && maximized) {
@@ -12598,9 +12904,11 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
         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,
@@ -12634,7 +12942,7 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
 
     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
@@ -12722,6 +13030,8 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
     modal: true,
     onHide: null,
     onShow: null,
+    headerStyle: null,
+    headerClassName: null,
     contentStyle: null,
     contentClassName: null,
     closeOnEscape: true,
@@ -13425,6 +13735,7 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
       return /*#__PURE__*/React__namespace.createElement("li", {
         key: key,
         role: "none",
+        id: item.id,
         className: className,
         style: item.style,
         onMouseEnter: function onMouseEnter(event) {
@@ -13953,14 +14264,14 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
       '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 = {
@@ -14187,21 +14498,36 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
       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();
@@ -14226,9 +14552,23 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
       }
     };
 
+    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();
       }
@@ -14972,6 +15312,8 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
         onMouseUp: onUpButtonMouseUp,
         onKeyDown: onUpButtonKeyDown,
         onKeyUp: onUpButtonKeyUp,
+        onTouchStart: onUpButtonTouchStart,
+        onTouchEnd: onUpButtonTouchEnd,
         disabled: props.disabled,
         tabIndex: -1
       }, /*#__PURE__*/React__namespace.createElement("span", {
@@ -14992,6 +15334,8 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
         onMouseUp: onDownButtonMouseUp,
         onKeyDown: onDownButtonKeyDown,
         onKeyUp: onDownButtonKeyUp,
+        onTouchStart: onDownButtonTouchStart,
+        onTouchEnd: onDownButtonTouchEnd,
         disabled: props.disabled,
         tabIndex: -1
       }, /*#__PURE__*/React__namespace.createElement("span", {
@@ -15131,14 +15475,14 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
       '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 = {
@@ -15167,14 +15511,14 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
       '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 = {
@@ -15221,13 +15565,14 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
           '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 = {
@@ -15274,14 +15619,14 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
       '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 = {
@@ -15323,6 +15668,7 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
     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,
@@ -15357,7 +15703,7 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
     var onEntered = function onEntered() {
       props.onEntered(function () {
         if (props.filter && props.filterInputAutoFocus) {
-          filterInputRef.current.focus();
+          DomHandler.focus(filterInputRef.current, false);
         }
       });
     };
@@ -15367,7 +15713,7 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
       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);
@@ -15377,6 +15723,7 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
           key: optionKey,
           label: optionLabel,
           option: option,
+          style: style,
           template: props.itemTemplate,
           selected: props.isSelected(option),
           disabled: disabled,
@@ -15393,14 +15740,20 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
     };
 
     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);
@@ -15410,6 +15763,7 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
           key: optionKey,
           label: optionLabel,
           option: option,
+          style: style,
           template: props.itemTemplate,
           selected: props.isSelected(option),
           disabled: disabled,
@@ -15434,7 +15788,7 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
           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);
             });
           }
         });
@@ -15478,13 +15832,14 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
           }),
           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);
@@ -15651,7 +16006,7 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
       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();
       }
     };
@@ -15688,16 +16043,11 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
         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
@@ -15929,7 +16279,7 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
 
       if (!option.disabled) {
         selectItem(event);
-        focusInputRef.current.focus();
+        DomHandler.focus(focusInputRef.current);
       }
 
       hide();
@@ -15998,11 +16348,13 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
       }
     };
 
-    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 {
@@ -16012,7 +16364,7 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
             }
           }
         } else {
-          return findOptionIndexInList(props.value, visibleOptions);
+          return findOptionIndexInList(props.value, options);
         }
       }
 
@@ -16077,7 +16429,7 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
       if (highlightItem && highlightItem.scrollIntoView) {
         highlightItem.scrollIntoView({
           block: 'nearest',
-          inline: 'start'
+          inline: 'nearest'
         });
       }
     };
@@ -16129,16 +16481,16 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
     };
 
     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 () {
@@ -16791,7 +17143,7 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
     var onClick = function onClick(event) {
       if (!props.disabled) {
         props.onChange(event);
-        inputRef.current.focus();
+        DomHandler.focus(inputRef.current);
       }
     };
 
@@ -17461,6 +17813,7 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
           };
           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
@@ -17468,6 +17821,7 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
             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
@@ -17483,6 +17837,7 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
           };
           content = /*#__PURE__*/React__namespace.createElement("button", {
             type: "button",
+            name: "row-edit",
             onClick: rowEditorProps.onInitClick,
             className: rowEditorProps.initClassName,
             tabIndex: props.tabIndex
@@ -17948,12 +18303,16 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
       }),
       '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,
@@ -17995,14 +18354,14 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
   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]);
@@ -18656,9 +19015,12 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
     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) {
@@ -19054,10 +19416,10 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
     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; }
@@ -19107,7 +19469,8 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
           styleObject['left'] = left + 'px';
         }
 
-        setStyleObjectState(styleObject);
+        var isSameStyle = styleObjectState['left'] === styleObject['left'] && styleObjectState['right'] === styleObject['right'];
+        !isSameStyle && setStyleObjectState(styleObject);
       }
     };
 
@@ -20344,14 +20707,15 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
       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');
@@ -20640,6 +21004,9 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
     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);
@@ -21135,8 +21502,22 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
           }
         } 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);
         }
 
@@ -21193,7 +21574,7 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
       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;
       }
     };
@@ -21256,10 +21637,11 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
     };
 
     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) {
@@ -21470,8 +21852,8 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
       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) {
@@ -21509,7 +21891,8 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
       var value = _toConsumableArray(data);
 
       if (columnSortable.current && columnSortFunction.current) {
-        value = columnSortFunction({
+        value = columnSortFunction.current({
+          rowData: value,
           field: field,
           order: order
         });
@@ -21517,8 +21900,7 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
         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);
         });
       }
 
@@ -21551,6 +21933,7 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
         var field = columnField.current;
         var order = meta ? meta.order : defaultSortOrder;
         value = columnSortFunction.current({
+          rowData: value,
           field: field,
           order: order
         });
@@ -21571,8 +21954,7 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
         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) {
@@ -21951,7 +22333,9 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
       }
     }, [props.responsiveLayout]);
     useUpdateEffect(function () {
-      filter(props.globalFilter, 'global', 'contains');
+      if (props.globalFilter) {
+        filter(props.globalFilter, 'global', 'contains');
+      }
     }, [props.globalFilter]);
     useUnmountEffect(function () {
       unbindColumnResizeEvents();
@@ -22051,7 +22435,9 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
           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,
@@ -22115,9 +22501,11 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
         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,
@@ -22210,10 +22598,15 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
         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,
@@ -23034,8 +23427,8 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
     useMountEffect(function () {
       if (!isQuillLoaded.current) {
         import('quill').then(function (module) {
-          if (module && module["default"] && DomHandler.isExist(contentRef.current)) {
-            quill.current = new module["default"](contentRef.current, {
+          if (module && DomHandler.isExist(contentRef.current)) {
+            var configuration = {
               modules: _objectSpread$e({
                 toolbar: props.showHeader ? toolbarRef.current : false
               }, props.modules),
@@ -23043,7 +23436,15 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
               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));
@@ -23464,7 +23865,7 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
 
     var show = function show(value) {
       if (value) {
-        var messages = [];
+        var messages;
 
         if (Array.isArray(value)) {
           for (var i = 0; i < value.length; i++) {
@@ -23485,7 +23886,8 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
     };
 
     var replace = function replace(value) {
-      setMessagesState(value);
+      var replaced = Array.isArray(value) ? value : [value];
+      setMessagesState(replaced);
     };
 
     var onClose = function onClose(message) {
@@ -23561,8 +23963,7 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
         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: {
@@ -23628,18 +24029,24 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
         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);
@@ -23694,7 +24101,12 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
         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++) {
@@ -23766,6 +24178,10 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
     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");
@@ -23781,6 +24197,7 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
           });
         }
       } else {
+        setUploadingState(true);
         var xhr = new XMLHttpRequest();
         var formData = new FormData();
 
@@ -23822,6 +24239,7 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
         xhr.onreadystatechange = function () {
           if (xhr.readyState === 4) {
             setProgressState(0);
+            setUploadingState(false);
 
             if (xhr.status >= 200 && xhr.status < 300) {
               if (props.fileLimit) {
@@ -23863,6 +24281,7 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
 
     var clear = function clear() {
       setFilesState([]);
+      setUploadingState(false);
       props.onClear && props.onClear();
       clearInput();
     };
@@ -23887,7 +24306,7 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
     };
 
     var onDragEnter = function onDragEnter(event) {
-      if (!props.disabled) {
+      if (!disabled) {
         event.dataTransfer.dropEffect = 'copy';
         event.stopPropagation();
         event.preventDefault();
@@ -23895,7 +24314,7 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
     };
 
     var onDragOver = function onDragOver(event) {
-      if (!props.disabled) {
+      if (!disabled) {
         event.dataTransfer.dropEffect = 'copy';
         DomHandler.addClass(contentRef.current, 'p-fileupload-highlight');
         event.stopPropagation();
@@ -23904,25 +24323,32 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
     };
 
     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 () {
@@ -23940,7 +24366,7 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
           _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);
@@ -23994,7 +24420,8 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
         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);
 
@@ -24121,7 +24548,7 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
       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({
@@ -24151,7 +24578,7 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
         type: "file",
         accept: props.accept,
         multiple: props.multiple,
-        disabled: props.disabled,
+        disabled: disabled,
         onChange: onFileSelect
       });
       return /*#__PURE__*/React__namespace.createElement("div", _extends({
@@ -24225,6 +24652,7 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
     progressBarTemplate: null,
     onBeforeUpload: null,
     onBeforeSend: null,
+    onBeforeDrop: null,
     onUpload: null,
     onError: null,
     onClear: null,
@@ -24257,6 +24685,7 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
     };
 
     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
@@ -25521,12 +25950,12 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
       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
@@ -25538,14 +25967,14 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
     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) {
@@ -25555,7 +25984,7 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
     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];
@@ -25686,7 +26115,7 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
   };
 
   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([]);
@@ -26207,8 +26636,8 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
     };
 
     React__namespace.useEffect(function () {
-      ObjectUtils.combinedRefs(elementRef, props.inputRef);
-    }, [elementRef, props.inputRef]);
+      ObjectUtils.combinedRefs(elementRef, ref);
+    }, [elementRef, ref]);
     useMountEffect(function () {
       init();
       updateValue();
@@ -26216,7 +26645,10 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
     useUpdateEffect(function () {
       init();
       caret(updateValue(true));
-      updateModel();
+
+      if (props.unmask) {
+        updateModel();
+      }
     }, [props.mask]);
     useUpdateEffect(function () {
       if (isValueUpdated()) {
@@ -26254,7 +26686,6 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
   InputMask.defaultProps = {
     __TYPE: 'InputMask',
     id: null,
-    inputRef: null,
     value: null,
     type: 'text',
     mask: null,
@@ -26295,7 +26726,7 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
       }
 
       toggle(event);
-      inputRef.current.focus();
+      DomHandler.focus(inputRef.current);
       event.preventDefault();
     };
 
@@ -26743,14 +27174,14 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
       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"
     })));
   });
@@ -26820,14 +27251,16 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
     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';
@@ -26938,6 +27371,7 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
     };
 
     var onFilter = function onFilter(event) {
+      virtualScrollerRef.current && virtualScrollerRef.current.scrollToIndex(0);
       var originalEvent = event.originalEvent,
           value = event.value;
 
@@ -26973,11 +27407,44 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
       });
     };
 
+    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) {
@@ -27049,16 +27516,33 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
       }
     };
 
+    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);
@@ -27069,6 +27553,7 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
           key: optionKey,
           label: optionLabel,
           option: option,
+          style: style,
           template: props.itemTemplate,
           selected: isSelected(option),
           onClick: onOptionSelect,
@@ -27080,14 +27565,21 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
     };
 
     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);
@@ -27098,6 +27590,7 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
           key: optionKey,
           label: optionLabel,
           option: option,
+          style: style,
           template: props.itemTemplate,
           selected: isSelected(option),
           onClick: onOptionSelect,
@@ -27121,8 +27614,8 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
               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);
@@ -27130,7 +27623,9 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
               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);
           }
         });
@@ -27143,7 +27638,9 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
         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);
       }
     };
@@ -27198,10 +27695,12 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
     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
   };
@@ -27459,6 +27958,7 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
 
         return /*#__PURE__*/React__namespace.createElement("li", {
           key: key,
+          id: item.id,
           className: _className2,
           style: item.style,
           role: "none"
@@ -27474,6 +27974,7 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
       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"
@@ -27540,6 +28041,7 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
       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) {
@@ -27563,19 +28065,36 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
 
     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;
@@ -27587,16 +28106,14 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
       '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 = {
@@ -27605,7 +28122,9 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
     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; }
@@ -27830,7 +28349,7 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
     };
 
     var onItemClick = function onItemClick(event, suggestion) {
-      inputRef.current.focus();
+      DomHandler.focus(inputRef.current);
       selectItem(event, suggestion);
     };
 
@@ -28032,10 +28551,12 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
       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,
@@ -28065,6 +28586,8 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
     headerTemplate: null,
     footerTemplate: null,
     itemTemplate: null,
+    'aria-label': null,
+    'aria-labelledby': null,
     transitionOptions: null,
     onChange: null,
     onInput: null,
@@ -28586,6 +29109,7 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
       return /*#__PURE__*/React__namespace.createElement("li", {
         key: key,
         role: "none",
+        id: item.id,
         className: className,
         style: item.style,
         onMouseEnter: function onMouseEnter(event) {
@@ -28907,6 +29431,7 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
     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,
@@ -28979,7 +29504,7 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
       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);
@@ -28991,6 +29516,7 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
           key: optionKey,
           label: optionLabel,
           option: option,
+          style: style,
           template: props.itemTemplate,
           selected: selected,
           onClick: props.onOptionSelect,
@@ -29009,14 +29535,20 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
     };
 
     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);
@@ -29028,6 +29560,7 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
           key: optionKey,
           label: optionLabel,
           option: option,
+          style: style,
           template: props.itemTemplate,
           selected: selected,
           onClick: props.onOptionSelect,
@@ -29056,13 +29589,14 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
           }),
           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);
@@ -29239,7 +29773,7 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
 
         case 27:
           hide();
-          inputRef.current.focus();
+          DomHandler.focus(inputRef.current);
           break;
       }
     };
@@ -29257,7 +29791,7 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
     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();
       }
     };
@@ -29382,7 +29916,7 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
       if (highlightItem && highlightItem.scrollIntoView) {
         highlightItem.scrollIntoView({
           block: 'nearest',
-          inline: 'start'
+          inline: 'nearest'
         });
       }
     };
@@ -29434,7 +29968,7 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
 
     var onCloseClick = function onCloseClick(event) {
       hide();
-      inputRef.current.focus();
+      DomHandler.focus(inputRef.current);
       event.preventDefault();
       event.stopPropagation();
     };
@@ -29627,7 +30161,7 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
       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) {
@@ -29642,7 +30176,7 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
     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) {
@@ -29698,9 +30232,7 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
               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) {
@@ -29900,13 +30432,11 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
         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();
       }
     };
 
@@ -29914,6 +30444,11 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
       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];
@@ -29947,6 +30482,13 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
       setFocusedState(false);
     };
 
+    var onKeyDown = function onKeyDown(e) {
+      if (e.keyCode === 32) {
+        toggle(e);
+        e.preventDefault();
+      }
+    };
+
     var getSelectedOptionMap = function getSelectedOptionMap() {
       var option, index;
 
@@ -29963,9 +30505,6 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
       };
     };
 
-    React__namespace.useEffect(function () {
-      ObjectUtils.combinedRefs(inputRef, props.inputRef);
-    }, [inputRef, props.inputRef]);
     useMountEffect(function () {
       if (!props.empty && props.value === null) {
         toggle();
@@ -30005,6 +30544,8 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
       '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,
@@ -30013,24 +30554,20 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
     }, 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)));
@@ -30039,22 +30576,22 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
   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
   };
 
@@ -30862,7 +31399,7 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
     };
 
     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);
@@ -30889,7 +31426,7 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
           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;
       }
     };
 
@@ -31317,6 +31854,7 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
 
       return /*#__PURE__*/React__namespace.createElement("li", {
         key: key,
+        id: item.id,
         className: className,
         style: item.style,
         role: "none"
@@ -31351,6 +31889,11 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
         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';
 
@@ -31420,6 +31963,14 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
 
       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;
@@ -31492,6 +32043,8 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
           enter: 1000,
           exit: 450
         },
+        onEnter: onEnter,
+        disabled: animationDisabled,
         "in": active,
         unmountOnExit: true,
         options: props.transitionOptions
@@ -32162,6 +32715,23 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
       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
@@ -32198,6 +32768,44 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
       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);
@@ -32211,19 +32819,20 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
 
     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;
@@ -32254,8 +32863,12 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
 
     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({
@@ -32297,8 +32910,12 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
 
     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({
@@ -32349,12 +32966,27 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
         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);
@@ -32489,6 +33121,52 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
       }
     };
 
+    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);
@@ -32498,6 +33176,10 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
     });
     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,
@@ -32510,41 +33192,55 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
       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,
@@ -32570,16 +33266,31 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
     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) {
@@ -32648,7 +33359,7 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
           }
         });
         inputRef.current.checked = !props.checked;
-        inputRef.current.focus();
+        DomHandler.focus(inputRef.current);
       }
     };
 
@@ -32698,18 +33409,17 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
       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({
@@ -32733,7 +33443,8 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
     tabIndex: null,
     tooltip: null,
     tooltipOptions: null,
-    ariaLabelledBy: null,
+    'aria-label': null,
+    'aria-labelledby': null,
     onChange: null
   };
 
@@ -33180,8 +33891,7 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
     var onKeyDown = function onKeyDown(event) {
       var keyCode = event.which;
 
-      if (keyCode === 32 || keyCode === 13) {
-        //space and enter
+      if (keyCode === 32) {
         onClick(event);
         event.preventDefault();
       }
@@ -33204,7 +33914,6 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
       role: "button",
       "aria-label": props.label,
       "aria-pressed": props.selected,
-      "aria-labelledby": props.ariaLabelledBy,
       onClick: onClick,
       onKeyDown: onKeyDown,
       tabIndex: props.tabIndex,
@@ -33304,8 +34013,7 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
             template: props.itemTemplate,
             selected: selected,
             tabIndex: tabIndex,
-            disabled: isDisabled,
-            ariaLabelledBy: props.ariaLabelledBy
+            disabled: isDisabled
           });
         });
       }
@@ -33347,7 +34055,6 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
     dataKey: null,
     tooltip: null,
     tooltipOptions: null,
-    ariaLabelledBy: null,
     itemTemplate: null,
     onChange: null
   };
@@ -33603,13 +34310,21 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
     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;
@@ -33627,6 +34342,8 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
       }
 
       if (item.items) {
+        var key = createKey(item, index);
+        setRenderSubMenu(_objectSpread$9(_objectSpread$9({}, renderSubMenu), {}, _defineProperty({}, key, true)));
         setActiveItemState(item);
         props.onForward();
       }
@@ -33640,8 +34357,10 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
       });
     };
 
-    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,
@@ -33656,8 +34375,12 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
       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,
@@ -33676,13 +34399,13 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
       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);
@@ -33690,7 +34413,7 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
       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',
@@ -33705,6 +34428,7 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
 
       return /*#__PURE__*/React__namespace.createElement("li", {
         key: key,
+        id: item.id,
         className: className,
         style: item.style
       }, content, submenu);
@@ -34158,7 +34882,9 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
         "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
       });
     };
 
@@ -34225,14 +34951,15 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
     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;
 
@@ -34377,7 +35104,7 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
     var getItemStyle = function getItemStyle(index) {
       var transitionDelay = calculateTransitionDelay(index);
       var pointStyle = calculatePointStyle(index);
-      return _objectSpread$9({
+      return _objectSpread$8({
         transitionDelay: "".concat(transitionDelay, "ms")
       }, pointStyle);
     };
@@ -34617,7 +35344,8 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
         role: "menuitem",
         className: className,
         target: target,
-        onClick: onClick
+        onClick: onClick,
+        "aria-label": _label
       }, icon, label);
 
       if (template) {
@@ -34668,9 +35396,9 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
         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)));
@@ -34797,34 +35525,36 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
     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,
@@ -34845,6 +35575,8 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
     id: null,
     label: null,
     icon: null,
+    loading: false,
+    loadingIcon: 'pi pi-spinner pi-spin',
     model: null,
     disabled: null,
     style: null,
@@ -34853,6 +35585,8 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
     menuStyle: null,
     menuClassName: null,
     menuButtonClassName: null,
+    buttonProps: null,
+    menuButtonProps: null,
     tabIndex: null,
     appendTo: null,
     tooltip: null,
@@ -34868,7 +35602,8 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
   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);
@@ -34878,6 +35613,7 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
     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({
@@ -34948,7 +35684,7 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
     };
 
     var saveState = function saveState() {
-      getStorage().setItem(props.stateKey, JSON.stringify(panelSizes));
+      getStorage().setItem(props.stateKey, JSON.stringify(panelSizes.current));
     };
 
     var restoreState = function restoreState() {
@@ -34963,7 +35699,7 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
         });
 
         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;
       }
@@ -34972,6 +35708,7 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
     };
 
     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);
@@ -35010,7 +35747,7 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
       if (props.onResizeEnd) {
         props.onResizeEnd({
           originalEvent: event,
-          sizes: panelSizes
+          sizes: panelSizes.current
         });
       }
 
@@ -35043,7 +35780,7 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
       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');
       });
@@ -35057,7 +35794,7 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
       if (props.children && props.children.length) {
         var initialized = false;
 
-        if (isStateful) {
+        if (isStateful && !mounted.current) {
           initialized = restoreState();
         }
 
@@ -35071,8 +35808,11 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
             return _panelSizes;
           });
           panelSizes.current = _panelSizes;
+          mounted.current && saveState();
         }
       }
+
+      mounted.current = true;
     });
 
     var createPanel = function createPanel(panel, index) {
@@ -35084,7 +35824,9 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
         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) {
@@ -35223,6 +35965,7 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
 
       return /*#__PURE__*/React__namespace.createElement("li", {
         key: key,
+        id: item.id,
         className: className,
         style: item.style,
         role: "tab",
@@ -35287,8 +36030,7 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
         }
 
         animating.current = false;
-      },
-      when: false
+      }
     }),
         _useEventListener2 = _slicedToArray(_useEventListener, 2),
         bindTargetEnterListener = _useEventListener2[0],
@@ -35305,23 +36047,22 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
 
         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],
@@ -35337,8 +36078,7 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
         } else {
           if (targetRef.current.offsetParent === null) enter();else leave();
         }
-      },
-      when: false
+      }
     }),
         _useEventListener8 = _slicedToArray(_useEventListener7, 2),
         bindClickListener = _useEventListener8[0],
@@ -35364,8 +36104,7 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
           }
 
           bindTargetEnterListener({
-            target: targetRef.current,
-            when: true
+            target: targetRef.current
           });
         }
       } else {
@@ -35379,8 +36118,7 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
       }
 
       bindDocumentClickListener({
-        target: elementRef.current && elementRef.current.ownerDocument,
-        when: props.hideOnOutsideClick
+        target: elementRef.current && elementRef.current.ownerDocument
       });
     };
 
@@ -35395,8 +36133,7 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
           }
 
           bindTargetLeaveListener({
-            target: targetRef.current,
-            when: true
+            target: targetRef.current
           });
         }
       } else {
@@ -35409,7 +36146,9 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
         }
       }
 
-      unbindDocumentClickListener();
+      if (props.hideOnOutsideClick) {
+        unbindDocumentClickListener();
+      }
     };
 
     var resolveTarget = function resolveTarget() {
@@ -35438,8 +36177,7 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
     var init = function init() {
       elementRef.current = ObjectUtils.getRefElement(props.nodeRef);
       bindClickListener({
-        target: elementRef.current,
-        when: true
+        target: elementRef.current
       });
     };
 
@@ -35449,13 +36187,23 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
       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();
     });
@@ -35628,9 +36376,9 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
     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),
@@ -35825,7 +36573,7 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
           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,
@@ -35932,7 +36680,7 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
         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
@@ -36088,7 +36836,7 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
     var isEmitted = React__namespace.useRef(false);
 
     var onClick = function onClick() {
-      inputRef.current.focus();
+      DomHandler.focus(inputRef.current);
     };
 
     var onInputChange = function onInputChange(e) {
@@ -36403,7 +37151,8 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
     };
 
     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,
@@ -36472,6 +37221,7 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
 
       return /*#__PURE__*/React__namespace.createElement("li", {
         key: key,
+        id: item,
         className: className,
         style: style,
         onMouseEnter: function onMouseEnter(event) {
@@ -36693,9 +37443,9 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
     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,
@@ -36743,7 +37493,7 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
 
     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', {
@@ -36785,9 +37535,6 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
   }));
   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([]),
@@ -36802,21 +37549,13 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
         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']);
@@ -36829,6 +37568,11 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
       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;
@@ -36842,7 +37586,7 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
     };
 
     var onExited = function onExited() {
-      messagesState.length === 0 && ZIndexUtils.clear(containerRef.current);
+      messagesState.length === 1 && ZIndexUtils.clear(containerRef.current);
       props.onHide && props.onHide();
     };
 
@@ -36852,6 +37596,7 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
     React__namespace.useImperativeHandle(ref, function () {
       return {
         show: show,
+        replace: replace,
         clear: clear
       };
     });
@@ -37115,6 +37860,14 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
           } else {
             var nextNodeElement = nodeElement.nextElementSibling;
 
+            while (nextNodeElement) {
+              if (!DomHandler.hasClass(nextNodeElement, 'p-treenode-droppoint')) {
+                break;
+              }
+
+              nextNodeElement = nextNodeElement.nextElementSibling;
+            }
+
             if (nextNodeElement) {
               focusNode(nextNodeElement);
             } else {
@@ -37186,7 +37939,7 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
     };
 
     var focusNode = function focusNode(element) {
-      element.children[0].focus();
+      element && element.children[0] && element.children[0].focus();
     };
 
     var onClick = function onClick(event) {
@@ -38404,7 +39157,7 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
 
     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();
       }
     };
@@ -38520,7 +39273,7 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
       bindOverlayListener();
 
       if (props.filter && props.filterInputAutoFocus) {
-        filterInputRef.current.focus();
+        DomHandler.focus(filterInputRef.current, props.filterInputAutoFocus);
       }
 
       props.onShow && props.onShow();
@@ -39437,6 +40190,7 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
       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,
@@ -39950,6 +40704,14 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
       }
     };
 
+    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';
@@ -40023,7 +40785,7 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
         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", {
@@ -40477,6 +41239,7 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
 
       if (columnSortable.current && columnSortable.current === 'custom' && columnSortFunction.current) {
         value = columnSortFunction.current({
+          rowData: value,
           field: getSortField(),
           order: getSortOrder()
         });
@@ -41467,12 +42230,10 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
         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();
       }
     };
 
@@ -41503,9 +42264,13 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
       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);
@@ -41518,6 +42283,8 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
       '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,
@@ -41526,24 +42293,21 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
     }, 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)));
@@ -41552,16 +42316,16 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
   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
   };
 
@@ -41685,6 +42449,7 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
   exports.VirtualScroller = VirtualScroller;
   exports.ZIndexUtils = ZIndexUtils;
   exports.addLocale = addLocale;
+  exports.ariaLabel = ariaLabel;
   exports.classNames = classNames;
   exports.confirmDialog = confirmDialog;
   exports.confirmPopup = confirmPopup;
@@ -41697,11 +42462,13 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
   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;