primereact 8.1.1 → 8.4.0

package/core/core.js

@@ -377,6 +377,8 @@ this.primereact.utils = (function (exports, React) {
         if (element) {
           if (element.classList) return element.classList.contains(className);else return new RegExp('(^| )' + className + '( |$)', 'gi').test(element.className);
         }
+
+        return false;
       }
     }, {
       key: "find",
@@ -950,7 +952,8 @@ this.primereact.utils = (function (exports, React) {
     }, {
       key: "isVisible",
       value: function isVisible(element) {
-        return element && element.offsetParent != null;
+        // https://stackoverflow.com/a/59096915/502366 (in future use IntersectionObserver)
+        return element && (element.clientHeight !== 0 || element.getClientRects().length !== 0 || getComputedStyle(element).display !== 'none');
       }
     }, {
       key: "isExist",
@@ -997,6 +1000,21 @@ this.primereact.utils = (function (exports, React) {
         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) {
@@ -1153,6 +1171,100 @@ this.primereact.utils = (function (exports, React) {
           return element && element.nodeType === 9 || this.isExist(element) ? element : null;
         }
       }
+      /**
+       * Get the attribute names for an element and sorts them alpha for comparison
+       */
+
+    }, {
+      key: "getAttributeNames",
+      value: function getAttributeNames(node) {
+        var index, rv, attrs;
+        rv = [];
+        attrs = node.attributes;
+
+        for (index = 0; index < attrs.length; ++index) {
+          rv.push(attrs[index].nodeName);
+        }
+
+        rv.sort();
+        return rv;
+      }
+      /**
+       * Compare two elements for equality.  Even will compare if the style element
+       * is out of order for example:
+       *
+       * elem1 = style="color: red; font-size: 28px"
+       * elem2 = style="font-size: 28px; color: red"
+       */
+
+    }, {
+      key: "isEqualElement",
+      value: function isEqualElement(elm1, elm2) {
+        var attrs1, attrs2, name, node1, node2; // Compare attributes without order sensitivity
+
+        attrs1 = DomHandler.getAttributeNames(elm1);
+        attrs2 = DomHandler.getAttributeNames(elm2);
+
+        if (attrs1.join(",") !== attrs2.join(",")) {
+          // console.log("Found nodes with different sets of attributes; not equiv");
+          return false;
+        } // ...and values
+        // unless you want to compare DOM0 event handlers
+        // (onclick="...")
+
+
+        for (var index = 0; index < attrs1.length; ++index) {
+          name = attrs1[index];
+
+          if (name === 'style') {
+            var astyle = elm1.style;
+            var bstyle = elm2.style;
+            var rexDigitsOnly = /^\d+$/;
+
+            for (var _i3 = 0, _Object$keys = Object.keys(astyle); _i3 < _Object$keys.length; _i3++) {
+              var key = _Object$keys[_i3];
+
+              if (!rexDigitsOnly.test(key) && astyle[key] !== bstyle[key]) {
+                // Not equivalent, stop
+                //console.log("Found nodes with mis-matched values for attribute '" + name + "'; not equiv");
+                return false;
+              }
+            }
+          } else {
+            if (elm1.getAttribute(name) !== elm2.getAttribute(name)) {
+              // console.log("Found nodes with mis-matched values for attribute '" + name + "'; not equiv");
+              return false;
+            }
+          }
+        } // Walk the children
+
+
+        for (node1 = elm1.firstChild, node2 = elm2.firstChild; node1 && node2; node1 = node1.nextSibling, node2 = node2.nextSibling) {
+          if (node1.nodeType !== node2.nodeType) {
+            // display("Found nodes of different types; not equiv");
+            return false;
+          }
+
+          if (node1.nodeType === 1) {
+            // Element
+            if (!DomHandler.isEqualElement(node1, node2)) {
+              return false;
+            }
+          } else if (node1.nodeValue !== node2.nodeValue) {
+            // console.log("Found nodes with mis-matched nodeValues; not equiv");
+            return false;
+          }
+        }
+
+        if (node1 || node2) {
+          // One of the elements had more nodes than the other
+          // console.log("Found more children of one element than the other; not equivalent");
+          return false;
+        } // Seem the same
+
+
+        return true;
+      }
     }]);
 
     return DomHandler;
@@ -1407,12 +1519,9 @@ this.primereact.utils = (function (exports, React) {
 
     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);
@@ -1947,11 +2056,16 @@ this.primereact.utils = (function (exports, React) {
       value: function sort(value1, value2) {
         var order = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 1;
         var locale = arguments.length > 3 ? arguments[3] : undefined;
+        var nullSortOrder = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : 1;
         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;else if (emptyValue2) result = -order;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;
+        });else result = value1 < value2 ? -1 : value1 > value2 ? 1 : 0; // nullSortOrder == 1 means Excel like sort nulls at bottom
+
+        var finalSortOrder = nullSortOrder === 1 ? order : nullSortOrder;
+        return finalSortOrder * result;
       }
     }]);
 
@@ -2194,6 +2308,8 @@ this.primereact.api = (function (exports, utils) {
 
   _defineProperty(PrimeReact, "nonce", null);
 
+  _defineProperty(PrimeReact, "nullSortOrder", 1);
+
   _defineProperty(PrimeReact, "zIndex", {
     modal: 1100,
     overlay: 1000,
@@ -3829,13 +3945,11 @@ this.primereact.keyfilter = (function (exports, utils) {
         return;
       }
 
-      var regex = this.getRegex(keyfilter);
-      var browser = utils.DomHandler.getBrowser();
-
       if (e.ctrlKey || e.altKey) {
         return;
       }
 
+      var browser = utils.DomHandler.getBrowser();
       var k = this.getKey(e);
 
       if (browser.mozilla && (this.isNavKeyPress(e) || k === KeyFilter.KEYS.BACKSPACE || k === KeyFilter.KEYS.DELETE && e.charCode === 0)) {
@@ -3849,7 +3963,9 @@ this.primereact.keyfilter = (function (exports, utils) {
         return;
       }
 
-      if (!regex.test(cc)) {
+      var regex = this.getRegex(keyfilter);
+
+      if (!regex.test(e.key)) {
         e.preventDefault();
       }
     },
@@ -4036,12 +4152,18 @@ this.primereact.tooltip = (function (exports, React, PrimeReact, hooks, portal,
         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);
     var containerSize = React__namespace.useRef(null);
     var allowHide = React__namespace.useRef(true);
     var timeouts = React__namespace.useRef({});
+    var currentMouseEvent = React__namespace.useRef(null);
 
     var _useResizeListener = hooks.useResizeListener({
       listener: function listener(event) {
@@ -4145,6 +4267,37 @@ this.primereact.tooltip = (function (exports, React, PrimeReact, hooks, portal,
       }
     };
 
+    var updateTooltipState = function updateTooltipState(position) {
+      updateText(currentTargetRef.current, function () {
+        var _currentMouseEvent$cu = currentMouseEvent.current,
+            x = _currentMouseEvent$cu.pageX,
+            y = _currentMouseEvent$cu.pageY;
+
+        if (props.autoZIndex && !utils.ZIndexUtils.get(elementRef.current)) {
+          utils.ZIndexUtils.set('tooltip', elementRef.current, PrimeReact__default["default"].autoZIndex, props.baseZIndex || PrimeReact__default["default"].zIndex['tooltip']);
+        }
+
+        elementRef.current.style.left = '';
+        elementRef.current.style.top = ''; // GitHub #2695 disable pointer events when autohiding
+
+        if (isAutoHide()) {
+          elementRef.current.style.pointerEvents = 'none';
+        }
+
+        if (isMouseTrack(currentTargetRef.current) && !containerSize.current) {
+          containerSize.current = {
+            width: utils.DomHandler.getOuterWidth(elementRef.current),
+            height: utils.DomHandler.getOuterHeight(elementRef.current)
+          };
+        }
+
+        align(currentTargetRef.current, {
+          x: x,
+          y: y
+        }, position);
+      });
+    };
+
     var show = function show(e) {
       currentTargetRef.current = e.currentTarget;
       var disabled = isDisabled(currentTargetRef.current);
@@ -4154,32 +4307,7 @@ this.primereact.tooltip = (function (exports, React, PrimeReact, hooks, portal,
         return;
       }
 
-      var updateTooltipState = function updateTooltipState() {
-        updateText(currentTargetRef.current, function () {
-          if (props.autoZIndex && !utils.ZIndexUtils.get(elementRef.current)) {
-            utils.ZIndexUtils.set('tooltip', elementRef.current, PrimeReact__default["default"].autoZIndex, props.baseZIndex || PrimeReact__default["default"].zIndex['tooltip']);
-          }
-
-          elementRef.current.style.left = '';
-          elementRef.current.style.top = ''; // GitHub #2695 disable pointer events when autohiding
-
-          if (isAutoHide()) {
-            elementRef.current.style.pointerEvents = 'none';
-          }
-
-          if (isMouseTrack(currentTargetRef.current) && !containerSize.current) {
-            containerSize.current = {
-              width: utils.DomHandler.getOuterWidth(elementRef.current),
-              height: utils.DomHandler.getOuterHeight(elementRef.current)
-            };
-          }
-
-          align(currentTargetRef.current, {
-            x: e.pageX,
-            y: e.pageY
-          });
-        });
-      };
+      currentMouseEvent.current = e;
 
       if (visibleState) {
         applyDelay('updateDelay', updateTooltipState);
@@ -4193,15 +4321,10 @@ this.primereact.tooltip = (function (exports, React, PrimeReact, hooks, portal,
         if (success) {
           applyDelay('showDelay', function () {
             setVisibleState(true);
-            setPositionState(getPosition(currentTargetRef.current));
-            setTimeout(function () {
-              return updateTooltipState();
-            }, 0);
             sendCallback(props.onShow, {
               originalEvent: e,
               target: currentTargetRef.current
             });
-            utils.DomHandler.addClass(currentTargetRef.current, getTargetOption(currentTargetRef.current, 'classname'));
           });
         }
       }
@@ -4211,7 +4334,6 @@ this.primereact.tooltip = (function (exports, React, PrimeReact, hooks, portal,
       clearTimeouts();
 
       if (visibleState) {
-        utils.DomHandler.removeClass(currentTargetRef.current, getTargetOption(currentTargetRef.current, 'classname'));
         var success = sendCallback(props.onBeforeHide, {
           originalEvent: e,
           target: currentTargetRef.current
@@ -4226,10 +4348,6 @@ this.primereact.tooltip = (function (exports, React, PrimeReact, hooks, portal,
             utils.ZIndexUtils.clear(elementRef.current);
             utils.DomHandler.removeClass(elementRef.current, 'p-tooltip-active');
             setVisibleState(false);
-            setPositionState(props.position);
-            currentTargetRef.current = null;
-            containerSize.current = null;
-            allowHide.current = true;
             sendCallback(props.onHide, {
               originalEvent: e,
               target: currentTargetRef.current
@@ -4239,9 +4357,10 @@ this.primereact.tooltip = (function (exports, React, PrimeReact, hooks, portal,
       }
     };
 
-    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 = {
@@ -4255,7 +4374,7 @@ this.primereact.tooltip = (function (exports, React, PrimeReact, hooks, portal,
             mouseTrackTop = _getMouseTrackPositio.top,
             mouseTrackLeft = _getMouseTrackPositio.left;
 
-        switch (positionState) {
+        switch (currentPosition) {
           case 'left':
             left -= _containerSize.width + mouseTrackLeft;
             top -= _containerSize.height / 2 - mouseTrackTop;
@@ -4288,28 +4407,28 @@ this.primereact.tooltip = (function (exports, React, PrimeReact, hooks, portal,
         elementRef.current.style.top = top + 'px';
         utils.DomHandler.addClass(elementRef.current, 'p-tooltip-active');
       } else {
-        var pos = utils.DomHandler.findCollisionPosition(positionState);
+        var pos = utils.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';
-        utils.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)];
+        utils.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);
           utils.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';
       }
     };
 
@@ -4377,7 +4496,7 @@ this.primereact.tooltip = (function (exports, React, PrimeReact, hooks, portal,
     };
 
     var clearTimeouts = function clearTimeouts() {
-      Object.keys(timeouts.current).forEach(function (t) {
+      Object.values(timeouts.current).forEach(function (t) {
         return clearTimeout(t);
       });
     };
@@ -4462,8 +4581,19 @@ this.primereact.tooltip = (function (exports, React, PrimeReact, hooks, portal,
     }, [show, hide, props.target]);
     hooks.useUpdateEffect(function () {
       if (visibleState) {
+        var position = getPosition(currentTargetRef.current);
+        var classname = getTargetOption(currentTargetRef.current, 'classname');
+        setPositionState(position);
+        setClassNameState(classname);
+        updateTooltipState(position);
         bindWindowResizeListener();
         bindOverlayScrollListener();
+      } else {
+        setPositionState(props.position);
+        setClassNameState('');
+        currentTargetRef.current = null;
+        containerSize.current = null;
+        allowHide.current = true;
       }
 
       return function () {
@@ -4487,15 +4617,22 @@ this.primereact.tooltip = (function (exports, React, PrimeReact, hooks, portal,
     });
     React__namespace.useImperativeHandle(ref, function () {
       return {
+        props: props,
         updateTargetEvents: updateTargetEvents,
         loadTargetEvents: loadTargetEvents,
-        unloadTargetEvents: unloadTargetEvents
+        unloadTargetEvents: unloadTargetEvents,
+        getElement: function getElement() {
+          return elementRef.current;
+        },
+        getTarget: function getTarget() {
+          return currentTargetRef.current;
+        }
       };
     });
 
     var createElement = function createElement() {
       var otherProps = utils.ObjectUtils.findDiffKeys(props, Tooltip.defaultProps);
-      var tooltipClassName = utils.classNames('p-tooltip p-component', _defineProperty({}, "p-tooltip-".concat(positionState), true), props.className);
+      var tooltipClassName = utils.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,
@@ -4721,7 +4858,7 @@ this.primereact.virtualscroller = (function (exports, React, hooks, utils) {
         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];
@@ -4744,10 +4881,39 @@ this.primereact.virtualscroller = (function (exports, React, hooks, utils) {
       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 = hooks.usePrevious(props.items);
     var prevLoading = hooks.usePrevious(props.loading);
 
+    var _useResizeListener = hooks.useResizeListener({
+      listener: function listener(event) {
+        return onResize(event);
+      }
+    }),
+        _useResizeListener2 = _slicedToArray(_useResizeListener, 1),
+        bindWindowResizeListener = _useResizeListener2[0];
+
+    var _useEventListener = hooks.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);
     };
 
@@ -4757,9 +4923,6 @@ this.primereact.virtualscroller = (function (exports, React, hooks, utils) {
       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;
 
@@ -4768,8 +4931,8 @@ this.primereact.virtualscroller = (function (exports, React, hooks, utils) {
         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() {
@@ -4789,15 +4952,13 @@ this.primereact.virtualscroller = (function (exports, React, hooks, utils) {
         };
 
         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));
         }
       }
     };
@@ -4810,8 +4971,6 @@ this.primereact.virtualscroller = (function (exports, React, hooks, utils) {
             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;
@@ -4828,26 +4987,26 @@ this.primereact.virtualscroller = (function (exports, React, hooks, utils) {
         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);
             }
@@ -4863,18 +5022,14 @@ this.primereact.virtualscroller = (function (exports, React, hooks, utils) {
     };
 
     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));
       };
@@ -4883,13 +5038,14 @@ this.primereact.virtualscroller = (function (exports, React, hooks, utils) {
       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,
@@ -4897,7 +5053,7 @@ this.primereact.virtualscroller = (function (exports, React, hooks, utils) {
           };
         } else {
           var scrollPos = horizontal ? scrollLeft : scrollTop;
-          firstInViewport = calculateFirstInViewport(scrollPos, itemSize);
+          firstInViewport = calculateFirstInViewport(scrollPos, props.itemSize);
           lastInViewport = firstInViewport + numItemsInViewportState;
         }
       }
@@ -4913,7 +5069,6 @@ this.primereact.virtualscroller = (function (exports, React, hooks, utils) {
     };
 
     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;
@@ -4927,9 +5082,9 @@ this.primereact.virtualscroller = (function (exports, React, hooks, utils) {
       };
 
       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,
@@ -4974,15 +5129,26 @@ this.primereact.virtualscroller = (function (exports, React, hooks, utils) {
       }
     };
 
+    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() {
@@ -5035,7 +5201,6 @@ this.primereact.virtualscroller = (function (exports, React, hooks, utils) {
       var items = props.items;
 
       if (_spacerRef.current && items) {
-        var itemSize = props.itemSize;
         var contentPos = getContentPosition();
 
         var setProp = function setProp(_name, _value, _size) {
@@ -5045,10 +5210,10 @@ this.primereact.virtualscroller = (function (exports, React, hooks, utils) {
         };
 
         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);
         }
       }
     };
@@ -5056,7 +5221,6 @@ this.primereact.virtualscroller = (function (exports, React, hooks, utils) {
     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;
@@ -5072,9 +5236,9 @@ this.primereact.virtualscroller = (function (exports, React, hooks, utils) {
         };
 
         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);
         }
       }
@@ -5082,7 +5246,6 @@ this.primereact.virtualscroller = (function (exports, React, hooks, utils) {
 
     var onScrollPositionChange = function onScrollPositionChange(event) {
       var target = event.target;
-      var itemSize = props.itemSize;
       var contentPos = getContentPosition();
 
       var calculateScrollPos = function calculateScrollPos(_pos, _cpos) {
@@ -5113,16 +5276,20 @@ this.primereact.virtualscroller = (function (exports, React, hooks, utils) {
 
       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),
@@ -5136,8 +5303,8 @@ this.primereact.virtualscroller = (function (exports, React, hooks, utils) {
           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
         };
@@ -5145,20 +5312,21 @@ this.primereact.virtualscroller = (function (exports, React, hooks, utils) {
         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
       };
     };
 
@@ -5166,7 +5334,8 @@ this.primereact.virtualscroller = (function (exports, React, hooks, utils) {
       var _onScrollPositionChan = onScrollPositionChange(event),
           first = _onScrollPositionChan.first,
           last = _onScrollPositionChan.last,
-          isRangeChanged = _onScrollPositionChan.isRangeChanged;
+          isRangeChanged = _onScrollPositionChan.isRangeChanged,
+          scrollPos = _onScrollPositionChan.scrollPos;
 
       if (isRangeChanged) {
         var newState = {
@@ -5176,6 +5345,7 @@ this.primereact.virtualscroller = (function (exports, React, hooks, utils) {
         setContentPosition(newState);
         setFirstState(first);
         setLastState(last);
+        lastScrollPos.current = scrollPos;
         props.onScrollIndexChange && props.onScrollIndexChange(newState);
 
         if (props.lazy) {
@@ -5202,7 +5372,7 @@ this.primereact.virtualscroller = (function (exports, React, hooks, utils) {
         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);
@@ -5211,10 +5381,32 @@ this.primereact.virtualscroller = (function (exports, React, hooks, utils) {
       }
     };
 
+    var onResize = function onResize() {
+      if (resizeTimeout.current) {
+        clearTimeout(resizeTimeout.current);
+      }
+
+      resizeTimeout.current = setTimeout(function () {
+        if (elementRef.current) {
+          var _ref = [utils.DomHandler.getWidth(elementRef.current), utils.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,
@@ -5252,25 +5444,48 @@ this.primereact.virtualscroller = (function (exports, React, hooks, utils) {
     };
 
     var init = function init() {
-      setSize();
-      calculateOptions();
-      setSpacerSize();
+      if (!props.disabled) {
+        setSize();
+        calculateOptions();
+        setSpacerSize();
+      }
     };
 
     hooks.useMountEffect(function () {
-      init();
+      if (!props.disabled) {
+        init();
+        bindWindowResizeListener();
+        bindOrientationChangeListener();
+        defaultWidth.current = utils.DomHandler.getWidth(elementRef.current);
+        defaultHeight.current = utils.DomHandler.getHeight(elementRef.current);
+      }
     });
     hooks.useUpdateEffect(function () {
       init();
     }, [props.itemSize, props.scrollHeight]);
+    hooks.useUpdateEffect(function () {
+      if (props.numToleratedItems !== numToleratedItemsState) {
+        setNumToleratedItemsState(props.numToleratedItems);
+      }
+    }, [props.numToleratedItems]);
+    hooks.useUpdateEffect(function () {
+      if (props.numToleratedItems === numToleratedItemsState) {
+        init(); // reinit after resizing
+      }
+    }, [numToleratedItemsState]);
     hooks.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);
     });
     hooks.useUpdateEffect(function () {
       lastScrollPos.current = both ? {
@@ -5280,6 +5495,8 @@ this.primereact.virtualscroller = (function (exports, React, hooks, utils) {
     }, [props.orientation]);
     React__namespace.useImperativeHandle(ref, function () {
       return {
+        props: props,
+        getElementRef: getElementRef,
         scrollTo: scrollTo,
         scrollToIndex: scrollToIndex,
         scrollInView: scrollInView,
@@ -5311,6 +5528,13 @@ this.primereact.virtualscroller = (function (exports, React, hooks, utils) {
               numCols: numItemsInViewportState.cols
             });
           });
+        } else if (props.loaderIconTemplate) {
+          var defaultContentOptions = {
+            className: 'p-virtualscroller-loading-icon',
+            element: content,
+            props: props
+          };
+          content = utils.ObjectUtils.getJSXElement(props.loaderIconTemplate, defaultContentOptions);
         }
 
         return /*#__PURE__*/React__namespace.createElement("div", {
@@ -5367,7 +5591,7 @@ this.primereact.virtualscroller = (function (exports, React, hooks, utils) {
           stickyRef: function stickyRef(el) {
             return _stickyRef.current = utils.ObjectUtils.getRefElement(el);
           },
-          items: loadedItems,
+          items: loadedItems(),
           getItemOptions: function getItemOptions(index) {
             return getOptions(index);
           },
@@ -5433,14 +5657,17 @@ this.primereact.virtualscroller = (function (exports, React, hooks, utils) {
     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,
@@ -5600,23 +5827,27 @@ this.primereact.checkbox = (function (exports, React, hooks, tooltip, utils) {
       if (!props.disabled && !props.readOnly && props.onChange) {
         var _checked = isChecked();
 
-        var value = _checked ? props.falseValue : props.trueValue;
-        props.onChange({
-          originalEvent: event,
-          value: props.value,
-          checked: value,
-          stopPropagation: function stopPropagation() {},
-          preventDefault: function preventDefault() {},
-          target: {
-            type: 'checkbox',
-            name: props.name,
-            id: props.id,
+        if (inputRef.current.checked === _checked) {
+          var value = _checked ? props.falseValue : props.trueValue;
+          props.onChange({
+            originalEvent: event,
             value: props.value,
-            checked: value
-          }
-        });
-        inputRef.current.checked = !_checked;
-        inputRef.current.focus();
+            checked: value,
+            stopPropagation: function stopPropagation() {},
+            preventDefault: function preventDefault() {},
+            target: {
+              type: 'checkbox',
+              name: props.name,
+              id: props.id,
+              value: props.value,
+              checked: value
+            }
+          });
+          inputRef.current.checked = !_checked;
+        }
+
+        utils.DomHandler.focus(inputRef.current);
+        event.preventDefault();
       }
     };
 
@@ -5632,6 +5863,17 @@ this.primereact.checkbox = (function (exports, React, hooks, tooltip, utils) {
       return props.checked === props.trueValue;
     };
 
+    React__namespace.useImperativeHandle(ref, function () {
+      return {
+        props: props,
+        getElement: function getElement() {
+          return elementRef.current;
+        },
+        getInput: function getInput() {
+          return inputRef.current;
+        }
+      };
+    });
     React__namespace.useEffect(function () {
       utils.ObjectUtils.combinedRefs(inputRef, props.inputRef);
     }, [inputRef, props.inputRef]);
@@ -5949,9 +6191,10 @@ this.primereact.inputtext = (function (exports, React, keyfilter, tooltip, utils
       }
     };
 
+    var currentValue = elementRef.current && elementRef.current.value;
     var isFilled = React__namespace.useMemo(function () {
-      return utils.ObjectUtils.isNotEmpty(props.value) || utils.ObjectUtils.isNotEmpty(props.defaultValue) || elementRef.current && utils.ObjectUtils.isNotEmpty(elementRef.current.value);
-    }, [props.value, props.defaultValue]);
+      return utils.ObjectUtils.isNotEmpty(props.value) || utils.ObjectUtils.isNotEmpty(props.defaultValue) || utils.ObjectUtils.isNotEmpty(currentValue);
+    }, [props.value, props.defaultValue, currentValue]);
     React__namespace.useEffect(function () {
       utils.ObjectUtils.combinedRefs(elementRef, ref);
     }, [elementRef, ref]);
@@ -6347,7 +6590,7 @@ this.primereact.inputnumber = (function (exports, React, hooks, inputtext, rippl
 
     var onUpButtonMouseDown = function onUpButtonMouseDown(event) {
       if (!props.disabled && !props.readOnly) {
-        props.autoFocus && inputRef.current.focus();
+        props.autoFocus && utils.DomHandler.focus(inputRef.current, props.autoFocus);
         repeat(event, null, 1);
         event.preventDefault();
       }
@@ -6400,7 +6643,7 @@ this.primereact.inputnumber = (function (exports, React, hooks, inputtext, rippl
 
     var onDownButtonMouseDown = function onDownButtonMouseDown(event) {
       if (!props.disabled && !props.readOnly) {
-        props.autoFocus && inputRef.current.focus();
+        props.autoFocus && utils.DomHandler.focus(inputRef.current, props.autoFocus);
         repeat(event, null, -1);
         event.preventDefault();
       }
@@ -6491,9 +6734,10 @@ this.primereact.inputnumber = (function (exports, React, hooks, inputtext, rippl
           }
 
           break;
-        //enter
+        //enter and tab
 
         case 13:
+        case 9:
           newValueStr = validateValue(parseValue(inputValue));
           inputRef.current.value = formatValue(newValueStr);
           inputRef.current.setAttribute('aria-valuenow', newValueStr);
@@ -7071,7 +7315,14 @@ this.primereact.inputnumber = (function (exports, React, hooks, inputtext, rippl
 
     React__namespace.useImperativeHandle(ref, function () {
       return {
-        getFormatter: getFormatter
+        props: props,
+        getFormatter: getFormatter,
+        getElement: function getElement() {
+          return elementRef.current;
+        },
+        getInput: function getInput() {
+          return inputRef.current;
+        }
       };
     });
     React__namespace.useEffect(function () {
@@ -7473,9 +7724,11 @@ this.primereact.messages = (function (exports, React, reactTransitionGroup, csst
         messagesState = _React$useState2[0],
         setMessagesState = _React$useState2[1];
 
+    var elementRef = React__namespace.useRef(null);
+
     var show = function show(value) {
       if (value) {
-        var messages = [];
+        var messages;
 
         if (Array.isArray(value)) {
           for (var i = 0; i < value.length; i++) {
@@ -7496,7 +7749,8 @@ this.primereact.messages = (function (exports, React, reactTransitionGroup, csst
     };
 
     var replace = function replace(value) {
-      setMessagesState(value);
+      var replaced = Array.isArray(value) ? value : [value];
+      setMessagesState(replaced);
     };
 
     var onClose = function onClose(message) {
@@ -7508,14 +7762,19 @@ this.primereact.messages = (function (exports, React, reactTransitionGroup, csst
 
     React__namespace.useImperativeHandle(ref, function () {
       return {
+        props: props,
         show: show,
         replace: replace,
-        clear: clear
+        clear: clear,
+        getElement: function getElement() {
+          return elementRef.current;
+        }
       };
     });
     var otherProps = utils.ObjectUtils.findDiffKeys(props, Messages.defaultProps);
     return /*#__PURE__*/React__namespace.createElement("div", _extends({
       id: props.id,
+      ref: elementRef,
       className: props.className,
       style: props.style
     }, otherProps), /*#__PURE__*/React__namespace.createElement(reactTransitionGroup.TransitionGroup, null, messagesState.map(function (message) {
@@ -7600,6 +7859,8 @@ this.primereact.progressbar = (function (exports, React, utils) {
   }
 
   var ProgressBar = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__namespace.forwardRef(function (props, ref) {
+    var elementRef = React__namespace.useRef(null);
+
     var createLabel = function createLabel() {
       if (props.showValue && props.value != null) {
         var label = props.displayValueTemplate ? props.displayValueTemplate(props.value) : props.value + props.unit;
@@ -7618,6 +7879,7 @@ this.primereact.progressbar = (function (exports, React, utils) {
       return /*#__PURE__*/React__namespace.createElement("div", _extends({
         role: "progressbar",
         id: props.id,
+        ref: elementRef,
         className: className,
         style: props.style,
         "aria-valuemin": "0",
@@ -7639,6 +7901,7 @@ this.primereact.progressbar = (function (exports, React, utils) {
       return /*#__PURE__*/React__namespace.createElement("div", _extends({
         role: "progressbar",
         id: props.id,
+        ref: elementRef,
         className: className,
         style: props.style
       }, otherProps), /*#__PURE__*/React__namespace.createElement("div", {
@@ -7651,6 +7914,14 @@ this.primereact.progressbar = (function (exports, React, utils) {
       })));
     };
 
+    React__namespace.useImperativeHandle(ref, function () {
+      return {
+        props: props,
+        getElement: function getElement() {
+          return elementRef.current;
+        }
+      };
+    });
     if (props.mode === 'determinate') return createDeterminate();else if (props.mode === 'indeterminate') return createIndeterminate();else throw new Error(props.mode + " is not a valid mode for the ProgressBar. Valid values are 'determinate' and 'indeterminate'");
   }));
   ProgressBar.displayName = 'ProgressBar';
@@ -7720,6 +7991,22 @@ this.primereact.dropdown = (function (exports, React, PrimeReact, hooks, overlay
     return _extends.apply(this, arguments);
   }
 
+  function _typeof(obj) {
+    "@babel/helpers - typeof";
+
+    if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") {
+      _typeof = function _typeof(obj) {
+        return typeof obj;
+      };
+    } else {
+      _typeof = function _typeof(obj) {
+        return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj;
+      };
+    }
+
+    return _typeof(obj);
+  }
+
   function _defineProperty(obj, key, value) {
     if (key in obj) {
       Object.defineProperty(obj, key, {
@@ -7814,6 +8101,7 @@ this.primereact.dropdown = (function (exports, React, PrimeReact, hooks, overlay
     var content = props.template ? utils.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,
@@ -7830,6 +8118,14 @@ this.primereact.dropdown = (function (exports, React, PrimeReact, hooks, overlay
     var virtualScrollerRef = React__namespace.useRef(null);
     var filterInputRef = React__namespace.useRef(null);
     var isEmptyFilter = !(props.visibleOptions && props.visibleOptions.length) && props.hasFilter;
+    var filterOptions = {
+      filter: function filter(e) {
+        return onFilterInputChange(e);
+      },
+      reset: function reset() {
+        return props.resetFilter();
+      }
+    };
 
     var onEnter = function onEnter() {
       props.onEnter(function () {
@@ -7848,7 +8144,7 @@ this.primereact.dropdown = (function (exports, React, PrimeReact, hooks, overlay
     var onEntered = function onEntered() {
       props.onEntered(function () {
         if (props.filter && props.filterInputAutoFocus) {
-          filterInputRef.current.focus();
+          utils.DomHandler.focus(filterInputRef.current, false);
         }
       });
     };
@@ -7858,7 +8154,7 @@ this.primereact.dropdown = (function (exports, React, PrimeReact, hooks, overlay
       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);
@@ -7868,6 +8164,7 @@ this.primereact.dropdown = (function (exports, React, PrimeReact, hooks, overlay
           key: optionKey,
           label: optionLabel,
           option: option,
+          style: style,
           template: props.itemTemplate,
           selected: props.isSelected(option),
           disabled: disabled,
@@ -7884,14 +8181,20 @@ this.primereact.dropdown = (function (exports, React, PrimeReact, hooks, overlay
     };
 
     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 ? utils.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);
@@ -7901,6 +8204,7 @@ this.primereact.dropdown = (function (exports, React, PrimeReact, hooks, overlay
           key: optionKey,
           label: optionLabel,
           option: option,
+          style: style,
           template: props.itemTemplate,
           selected: props.isSelected(option),
           disabled: disabled,
@@ -7925,7 +8229,7 @@ this.primereact.dropdown = (function (exports, React, PrimeReact, hooks, overlay
           className: "p-dropdown-filter-clear-icon pi pi-times",
           onClick: function onClick() {
             return props.onFilterClearIconClick(function () {
-              return filterInputRef.current.focus();
+              return utils.DomHandler.focus(filterInputRef.current);
             });
           }
         });
@@ -7940,9 +8244,7 @@ this.primereact.dropdown = (function (exports, React, PrimeReact, hooks, overlay
         var containerClassName = utils.classNames('p-dropdown-filter-container', {
           'p-dropdown-clearable-filter': !!clearIcon
         });
-        return /*#__PURE__*/React__namespace.createElement("div", {
-          className: "p-dropdown-header"
-        }, /*#__PURE__*/React__namespace.createElement("div", {
+        var content = /*#__PURE__*/React__namespace.createElement("div", {
           className: containerClassName
         }, /*#__PURE__*/React__namespace.createElement("input", {
           ref: filterInputRef,
@@ -7955,7 +8257,25 @@ this.primereact.dropdown = (function (exports, React, PrimeReact, hooks, overlay
           value: props.filterValue
         }), clearIcon, /*#__PURE__*/React__namespace.createElement("i", {
           className: "p-dropdown-filter-icon pi pi-search"
-        })));
+        }));
+
+        if (props.filterTemplate) {
+          var defaultContentOptions = {
+            className: containerClassName,
+            element: content,
+            filterOptions: filterOptions,
+            filterInputKeyDown: props.onFilterInputKeyDown,
+            filterInputChange: onFilterInputChange,
+            filterIconClassName: 'p-dropdown-filter-icon pi pi-search',
+            clearIcon: clearIcon,
+            props: props
+          };
+          content = utils.ObjectUtils.getJSXElement(props.filterTemplate, defaultContentOptions);
+        }
+
+        return /*#__PURE__*/React__namespace.createElement("div", {
+          className: "p-dropdown-header"
+        }, content);
       }
 
       return null;
@@ -7969,13 +8289,14 @@ this.primereact.dropdown = (function (exports, React, PrimeReact, hooks, overlay
           }),
           className: utils.classNames('p-dropdown-items-wrapper', props.virtualScrollerOptions.className),
           items: props.visibleOptions,
+          autoSize: true,
           onLazyLoad: function onLazyLoad(event) {
             return props.virtualScrollerOptions.onLazyLoad(_objectSpread$1(_objectSpread$1({}, 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 = utils.classNames('p-dropdown-items', options.className);
@@ -8142,7 +8463,7 @@ this.primereact.dropdown = (function (exports, React, PrimeReact, hooks, overlay
       if (utils.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();
+        utils.DomHandler.focus(focusInputRef.current);
         overlayVisibleState ? hide() : show();
       }
     };
@@ -8158,7 +8479,22 @@ this.primereact.dropdown = (function (exports, React, PrimeReact, hooks, overlay
 
     var onInputBlur = function onInputBlur(event) {
       setFocusedState(false);
-      props.onBlur && props.onBlur(event);
+
+      if (props.onBlur) {
+        setTimeout(function () {
+          props.onBlur({
+            originalEvent: event.originalEvent,
+            value: inputRef.current.value,
+            stopPropagation: function stopPropagation() {},
+            preventDefault: function preventDefault() {},
+            target: {
+              name: props.name,
+              id: props.id,
+              value: inputRef.current.value
+            }
+          });
+        }, 200);
+      }
     };
 
     var onPanelClick = function onPanelClick(event) {
@@ -8314,6 +8650,11 @@ this.primereact.dropdown = (function (exports, React, PrimeReact, hooks, overlay
       }
 
       var _char = event.key;
+
+      if (_char === 'Shift' || _char === 'Control' || _char === 'Alt') {
+        return;
+      }
+
       if (currentSearchChar.current === _char) searchValue.current = _char;else searchValue.current = searchValue.current ? searchValue.current + _char : _char;
       currentSearchChar.current = _char;
 
@@ -8384,7 +8725,13 @@ this.primereact.dropdown = (function (exports, React, PrimeReact, hooks, overlay
     };
 
     var matchesSearchValue = function matchesSearchValue(option) {
-      var label = getOptionLabel(option).toLocaleLowerCase(props.filterLocale);
+      var label = getOptionLabel(option);
+
+      if (!label) {
+        return false;
+      }
+
+      label = label.toLocaleLowerCase(props.filterLocale);
       return label.startsWith(searchValue.current.toLocaleLowerCase(props.filterLocale));
     };
 
@@ -8415,7 +8762,7 @@ this.primereact.dropdown = (function (exports, React, PrimeReact, hooks, overlay
 
       if (!option.disabled) {
         selectItem(event);
-        focusInputRef.current.focus();
+        utils.DomHandler.focus(focusInputRef.current);
       }
 
       hide();
@@ -8484,11 +8831,13 @@ this.primereact.dropdown = (function (exports, React, PrimeReact, hooks, overlay
       }
     };
 
-    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 {
@@ -8498,7 +8847,7 @@ this.primereact.dropdown = (function (exports, React, PrimeReact, hooks, overlay
             }
           }
         } else {
-          return findOptionIndexInList(props.value, visibleOptions);
+          return findOptionIndexInList(props.value, options);
         }
       }
 
@@ -8615,16 +8964,35 @@ this.primereact.dropdown = (function (exports, React, PrimeReact, hooks, overlay
     };
 
     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.useImperativeHandle(ref, function () {
+      return {
+        props: props,
+        show: show,
+        hide: hide,
+        getElement: function getElement() {
+          return elementRef.current;
+        },
+        getOverlay: function getOverlay() {
+          return overlayRef.current;
+        },
+        getInput: function getInput() {
+          return inputRef.current;
+        },
+        getFocusInput: function getFocusInput() {
+          return focusInputRef.current;
+        }
+      };
+    });
     React__namespace.useEffect(function () {
       utils.ObjectUtils.combinedRefs(inputRef, props.inputRef);
     }, [inputRef, props.inputRef]);
     hooks.useMountEffect(function () {
-      if (props.autoFocus && focusInputRef.current) {
-        focusInputRef.current.focus();
+      if (props.autoFocus) {
+        utils.DomHandler.focus(focusInputRef.current, props.autoFocus);
       }
     });
     hooks.useUpdateEffect(function () {
@@ -8653,21 +9021,33 @@ this.primereact.dropdown = (function (exports, React, PrimeReact, hooks, overlay
     });
 
     var createHiddenSelect = function createHiddenSelect() {
-      var placeHolderOption = /*#__PURE__*/React__namespace.createElement("option", {
-        value: ""
-      }, props.placeholder);
-      var option = selectedOption ? /*#__PURE__*/React__namespace.createElement("option", {
-        value: selectedOption.value
-      }, getOptionLabel(selectedOption)) : null;
+      var option = {
+        value: '',
+        label: props.placeholder
+      };
+
+      if (selectedOption) {
+        var optionValue = getOptionValue(selectedOption);
+        option = {
+          value: _typeof(optionValue) === 'object' ? props.options.findIndex(function (o) {
+            return o === optionValue;
+          }) : optionValue,
+          label: getOptionLabel(selectedOption)
+        };
+      }
+
       return /*#__PURE__*/React__namespace.createElement("div", {
         className: "p-hidden-accessible p-dropdown-hidden-select"
       }, /*#__PURE__*/React__namespace.createElement("select", {
         ref: inputRef,
         required: props.required,
+        defaultValue: option.value,
         name: props.name,
         tabIndex: -1,
         "aria-hidden": "true"
-      }, placeHolderOption, option));
+      }, /*#__PURE__*/React__namespace.createElement("option", {
+        value: option.value
+      }, option.label), ";"));
     };
 
     var createKeyboardHelper = function createKeyboardHelper() {
@@ -8781,6 +9161,7 @@ this.primereact.dropdown = (function (exports, React, PrimeReact, hooks, overlay
       filterValue: filterState,
       hasFilter: hasFilter,
       onFilterClearIconClick: onFilterClearIconClick,
+      resetFilter: resetFilter,
       onFilterInputKeyDown: onFilterInputKeyDown,
       onFilterInputChange: onFilterInputChange,
       getOptionLabel: getOptionLabel,
@@ -8815,6 +9196,7 @@ this.primereact.dropdown = (function (exports, React, PrimeReact, hooks, overlay
     optionGroupLabel: null,
     optionGroupChildren: null,
     optionGroupTemplate: null,
+    filterTemplate: null,
     valueTemplate: null,
     itemTemplate: null,
     style: null,
@@ -9089,6 +9471,7 @@ this.primereact.dialog = (function (exports, React, PrimeReact, csstransition, h
         unbindDocumentDragEndListener = _useEventListener10[1];
 
     var onClose = function onClose(event) {
+      utils.DomHandler.removeClass(document.body, 'p-overflow-hidden');
       props.onHide();
       event.preventDefault();
     };
@@ -9338,7 +9721,7 @@ this.primereact.dialog = (function (exports, React, PrimeReact, csstransition, h
           return param.hasBlockScroll;
         });
 
-        if (!hasBlockScroll) {
+        if (hasBlockScroll) {
           utils.DomHandler.removeClass(document.body, 'p-overflow-hidden');
         }
       } else if (props.blockScroll || props.maximizable && maximized) {
@@ -9438,7 +9821,26 @@ this.primereact.dialog = (function (exports, React, PrimeReact, csstransition, h
     });
     React__namespace.useImperativeHandle(ref, function () {
       return {
-        resetPosition: resetPosition
+        props: props,
+        resetPosition: resetPosition,
+        getElement: function getElement() {
+          return dialogRef.current;
+        },
+        getMask: function getMask() {
+          return maskRef.current;
+        },
+        getContent: function getContent() {
+          return contentRef.current;
+        },
+        getHeader: function getHeader() {
+          return headerRef.current;
+        },
+        getFooter: function getFooter() {
+          return footerRef.current;
+        },
+        getCloseButton: function getCloseButton() {
+          return closeRef.current;
+        }
       };
     });
 
@@ -9522,7 +9924,7 @@ this.primereact.dialog = (function (exports, React, PrimeReact, csstransition, h
 
     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
@@ -10135,6 +10537,7 @@ this.primereact.paginator = (function (exports, React, hooks, utils, api, button
   };
 
   var Paginator = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__namespace.forwardRef(function (props, ref) {
+    var elementRef = React__namespace.useRef(null);
     var rppChanged = React__namespace.useRef(false);
     var page = Math.floor(props.first / props.rows);
     var pageCount = Math.ceil(props.totalRecords / props.rows);
@@ -10215,6 +10618,14 @@ this.primereact.paginator = (function (exports, React, hooks, utils, api, button
       changePage(0, rows);
     };
 
+    React__namespace.useImperativeHandle(ref, function () {
+      return {
+        props: props,
+        getElement: function getElement() {
+          return elementRef.current;
+        }
+      };
+    });
     hooks.useUpdateEffect(function () {
       if (!rppChanged.current) {
         changePage(0, props.rows);
@@ -10368,6 +10779,7 @@ this.primereact.paginator = (function (exports, React, hooks, utils, api, button
         className: "p-paginator-right-content"
       }, rightContent);
       return /*#__PURE__*/React__namespace.createElement("div", _extends({
+        ref: elementRef,
         className: className,
         style: props.style
       }, otherProps), leftElement, elements, rightElement);
@@ -10619,6 +11031,14 @@ this.primereact.tree = (function (exports, React, utils, ripple) {
           } else {
             var nextNodeElement = nodeElement.nextElementSibling;
 
+            while (nextNodeElement) {
+              if (!utils.DomHandler.hasClass(nextNodeElement, 'p-treenode-droppoint')) {
+                break;
+              }
+
+              nextNodeElement = nextNodeElement.nextElementSibling;
+            }
+
             if (nextNodeElement) {
               focusNode(nextNodeElement);
             } else {
@@ -10690,7 +11110,7 @@ this.primereact.tree = (function (exports, React, utils, ripple) {
     };
 
     var focusNode = function focusNode(element) {
-      element.children[0].focus();
+      element && element.children[0] && element.children[0].focus();
     };
 
     var onClick = function onClick(event) {
@@ -11289,11 +11709,20 @@ this.primereact.tree = (function (exports, React, utils, ripple) {
         expandedKeysState = _React$useState4[0],
         setExpandedKeysState = _React$useState4[1];
 
+    var elementRef = React__namespace.useRef(null);
     var filteredNodes = React__namespace.useRef([]);
     var dragState = React__namespace.useRef(null);
     var filterChanged = React__namespace.useRef(false);
     var filteredValue = props.onFilterValueChange ? props.filterValue : filterValueState;
     var expandedKeys = props.onToggle ? props.expandedKeys : expandedKeysState;
+    var filterOptions = {
+      filter: function filter(e) {
+        return onFilterInputChange(e);
+      },
+      reset: function reset() {
+        return resetFilter();
+      }
+    };
 
     var getRootNode = function getRootNode() {
       return props.filter && filteredNodes.current ? filteredNodes.current : props.value;
@@ -11586,9 +12015,17 @@ this.primereact.tree = (function (exports, React, utils, ripple) {
       return matched;
     };
 
+    var resetFilter = function resetFilter() {
+      setFilterValueState('');
+    };
+
     React__namespace.useImperativeHandle(ref, function () {
       return {
-        filter: filter
+        props: props,
+        filter: filter,
+        getElement: function getElement() {
+          return elementRef.current;
+        }
       };
     });
 
@@ -11673,7 +12110,8 @@ this.primereact.tree = (function (exports, React, utils, ripple) {
     var createFilter = function createFilter() {
       if (props.filter) {
         var value = utils.ObjectUtils.isNotEmpty(filteredValue) ? filteredValue : '';
-        return /*#__PURE__*/React__namespace.createElement("div", {
+
+        var _content = /*#__PURE__*/React__namespace.createElement("div", {
           className: "p-tree-filter-container"
         }, /*#__PURE__*/React__namespace.createElement("input", {
           type: "text",
@@ -11687,6 +12125,21 @@ this.primereact.tree = (function (exports, React, utils, ripple) {
         }), /*#__PURE__*/React__namespace.createElement("span", {
           className: "p-tree-filter-icon pi pi-search"
         }));
+
+        if (props.filterTemplate) {
+          var defaultContentOptions = {
+            className: 'p-tree-filter-container',
+            element: _content,
+            filterOptions: filterOptions,
+            filterInputKeyDown: onFilterInputKeyDown,
+            filterInputChange: onFilterInputChange,
+            filterIconClassName: 'p-dropdown-filter-icon pi pi-search',
+            props: props
+          };
+          _content = utils.ObjectUtils.getJSXElement(props.filterTemplate, defaultContentOptions);
+        }
+
+        return /*#__PURE__*/React__namespace.createElement(React__namespace.Fragment, null, _content);
       }
 
       return null;
@@ -11695,7 +12148,7 @@ this.primereact.tree = (function (exports, React, utils, ripple) {
     var createHeader = function createHeader() {
       if (props.showHeader) {
         var filterElement = createFilter();
-        var _content = filterElement;
+        var _content2 = filterElement;
 
         if (props.header) {
           var defaultContentOptions = {
@@ -11707,15 +12160,15 @@ this.primereact.tree = (function (exports, React, utils, ripple) {
               onChange: onFilterInputChange
             },
             filterElement: filterElement,
-            element: _content,
+            element: _content2,
             props: props
           };
-          _content = utils.ObjectUtils.getJSXElement(props.header, defaultContentOptions);
+          _content2 = utils.ObjectUtils.getJSXElement(props.header, defaultContentOptions);
         }
 
         return /*#__PURE__*/React__namespace.createElement("div", {
           className: "p-tree-header"
-        }, _content);
+        }, _content2);
       }
 
       return null;
@@ -11740,6 +12193,7 @@ this.primereact.tree = (function (exports, React, utils, ripple) {
     var footer = createFooter();
     return /*#__PURE__*/React__namespace.createElement("div", _extends({
       id: props.id,
+      ref: elementRef,
       className: className,
       style: props.style
     }, otherProps), loader, header, content, footer);
@@ -11775,6 +12229,7 @@ this.primereact.tree = (function (exports, React, utils, ripple) {
     filterMode: 'lenient',
     filterPlaceholder: null,
     filterLocale: undefined,
+    filterTemplate: null,
     nodeTemplate: null,
     togglerTemplate: null,
     onSelect: null,