primereact 8.1.0 → 8.3.0

package/core/core.js

@@ -997,6 +997,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) {
@@ -1407,12 +1422,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);
@@ -1948,7 +1960,11 @@ this.primereact.utils = (function (exports, React) {
         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;
@@ -3207,9 +3223,25 @@ this.primereact.hooks = (function (exports, React, utils) {
 
     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) {
@@ -3243,8 +3275,36 @@ this.primereact.hooks = (function (exports, React, utils) {
         }
       };
 
+      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 */
@@ -3280,11 +3340,13 @@ this.primereact.hooks = (function (exports, React, utils) {
 
     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;
@@ -3979,6 +4041,9 @@ this.primereact.tooltip = (function (exports, React, PrimeReact, hooks, portal,
     return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest();
   }
 
+  function ownKeys(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(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
   var Tooltip = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__namespace.forwardRef(function (props, ref) {
     var _React$useState = React__namespace.useState(false),
         _React$useState2 = _slicedToArray(_React$useState, 2),
@@ -3990,12 +4055,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) {
@@ -4099,6 +4170,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);
@@ -4108,32 +4210,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);
@@ -4147,15 +4224,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'));
           });
         }
       }
@@ -4165,7 +4237,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
@@ -4180,10 +4251,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
@@ -4193,9 +4260,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 = {
@@ -4209,7 +4277,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;
@@ -4242,28 +4310,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';
       }
     };
 
@@ -4416,8 +4484,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 () {
@@ -4440,16 +4519,22 @@ this.primereact.tooltip = (function (exports, React, PrimeReact, hooks, portal,
       utils.ZIndexUtils.clear(elementRef.current);
     });
     React__namespace.useImperativeHandle(ref, function () {
-      return {
+      return _objectSpread({
         updateTargetEvents: updateTargetEvents,
         loadTargetEvents: loadTargetEvents,
-        unloadTargetEvents: unloadTargetEvents
-      };
+        unloadTargetEvents: unloadTargetEvents,
+        getElement: function getElement() {
+          return elementRef.current;
+        },
+        getTarget: function getTarget() {
+          return currentTargetRef.current;
+        }
+      }, props);
     });
 
     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,
@@ -4675,7 +4760,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];
@@ -4698,10 +4783,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);
     };
 
@@ -4711,9 +4825,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;
 
@@ -4722,8 +4833,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() {
@@ -4743,15 +4854,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));
         }
       }
     };
@@ -4764,8 +4873,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;
@@ -4782,26 +4889,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);
             }
@@ -4817,18 +4924,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));
       };
@@ -4837,13 +4940,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,
@@ -4851,7 +4955,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;
         }
       }
@@ -4867,7 +4971,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;
@@ -4881,9 +4984,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,
@@ -4928,15 +5031,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() {
@@ -4989,7 +5103,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) {
@@ -4999,10 +5112,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);
         }
       }
     };
@@ -5010,7 +5123,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;
@@ -5026,9 +5138,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);
         }
       }
@@ -5036,7 +5148,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) {
@@ -5067,16 +5178,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),
@@ -5090,8 +5205,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
         };
@@ -5099,20 +5214,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
       };
     };
 
@@ -5120,7 +5236,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 = {
@@ -5130,6 +5247,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) {
@@ -5156,7 +5274,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);
@@ -5165,10 +5283,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,
@@ -5206,25 +5346,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 ? {
@@ -5233,12 +5396,13 @@ this.primereact.virtualscroller = (function (exports, React, hooks, utils) {
       } : 0;
     }, [props.orientation]);
     React__namespace.useImperativeHandle(ref, function () {
-      return {
+      return _objectSpread({
+        getElementRef: getElementRef,
         scrollTo: scrollTo,
         scrollToIndex: scrollToIndex,
         scrollInView: scrollInView,
         getRenderedRange: getRenderedRange
-      };
+      }, props);
     });
 
     var createLoaderItem = function createLoaderItem(index) {
@@ -5265,6 +5429,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", {
@@ -5321,7 +5492,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);
           },
@@ -5387,14 +5558,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,
@@ -5480,6 +5654,21 @@ this.primereact.checkbox = (function (exports, React, hooks, tooltip, utils) {
     return _extends.apply(this, arguments);
   }
 
+  function _defineProperty(obj, key, value) {
+    if (key in obj) {
+      Object.defineProperty(obj, key, {
+        value: value,
+        enumerable: true,
+        configurable: true,
+        writable: true
+      });
+    } else {
+      obj[key] = value;
+    }
+
+    return obj;
+  }
+
   function _arrayWithHoles(arr) {
     if (Array.isArray(arr)) return arr;
   }
@@ -5541,6 +5730,9 @@ this.primereact.checkbox = (function (exports, React, hooks, tooltip, utils) {
     return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest();
   }
 
+  function ownKeys(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(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
   var Checkbox = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__namespace.forwardRef(function (props, ref) {
     var _React$useState = React__namespace.useState(false),
         _React$useState2 = _slicedToArray(_React$useState, 2),
@@ -5570,7 +5762,8 @@ this.primereact.checkbox = (function (exports, React, hooks, tooltip, utils) {
           }
         });
         inputRef.current.checked = !_checked;
-        inputRef.current.focus();
+        utils.DomHandler.focus(inputRef.current);
+        event.preventDefault();
       }
     };
 
@@ -5586,6 +5779,16 @@ this.primereact.checkbox = (function (exports, React, hooks, tooltip, utils) {
       return props.checked === props.trueValue;
     };
 
+    React__namespace.useImperativeHandle(ref, function () {
+      return _objectSpread({
+        getElement: function getElement() {
+          return elementRef.current;
+        },
+        getInput: function getInput() {
+          return inputRef.current;
+        }
+      }, props);
+    });
     React__namespace.useEffect(function () {
       utils.ObjectUtils.combinedRefs(inputRef, props.inputRef);
     }, [inputRef, props.inputRef]);
@@ -6301,7 +6504,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();
       }
@@ -6354,7 +6557,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();
       }
@@ -7024,9 +7227,15 @@ this.primereact.inputnumber = (function (exports, React, hooks, inputtext, rippl
     };
 
     React__namespace.useImperativeHandle(ref, function () {
-      return {
-        getFormatter: getFormatter
-      };
+      return _objectSpread({
+        getFormatter: getFormatter,
+        getElement: function getElement() {
+          return elementRef.current;
+        },
+        getInput: function getInput() {
+          return elementRef.current;
+        }
+      }, props);
     });
     React__namespace.useEffect(function () {
       utils.ObjectUtils.combinedRefs(inputRef, props.inputRef);
@@ -7266,6 +7475,21 @@ this.primereact.messages = (function (exports, React, reactTransitionGroup, csst
     return _extends.apply(this, arguments);
   }
 
+  function _defineProperty(obj, key, value) {
+    if (key in obj) {
+      Object.defineProperty(obj, key, {
+        value: value,
+        enumerable: true,
+        configurable: true,
+        writable: true
+      });
+    } else {
+      obj[key] = value;
+    }
+
+    return obj;
+  }
+
   function _arrayLikeToArray(arr, len) {
     if (len == null || len > arr.length) len = arr.length;
 
@@ -7420,6 +7644,9 @@ this.primereact.messages = (function (exports, React, reactTransitionGroup, csst
   }));
   UIMessage.displayName = 'UIMessage';
 
+  function ownKeys(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(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
   var messageIdx = 0;
   var Messages = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__namespace.forwardRef(function (props, ref) {
     var _React$useState = React__namespace.useState([]),
@@ -7427,9 +7654,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++) {
@@ -7450,7 +7679,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) {
@@ -7461,15 +7691,19 @@ this.primereact.messages = (function (exports, React, reactTransitionGroup, csst
     };
 
     React__namespace.useImperativeHandle(ref, function () {
-      return {
+      return _objectSpread({
         show: show,
         replace: replace,
-        clear: clear
-      };
+        clear: clear,
+        getElement: function getElement() {
+          return elementRef.current;
+        }
+      }, props);
     });
     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) {
@@ -7535,6 +7769,21 @@ this.primereact.progressbar = (function (exports, React, utils) {
 
   var React__namespace = /*#__PURE__*/_interopNamespace(React);
 
+  function _defineProperty(obj, key, value) {
+    if (key in obj) {
+      Object.defineProperty(obj, key, {
+        value: value,
+        enumerable: true,
+        configurable: true,
+        writable: true
+      });
+    } else {
+      obj[key] = value;
+    }
+
+    return obj;
+  }
+
   function _extends() {
     _extends = Object.assign || function (target) {
       for (var i = 1; i < arguments.length; i++) {
@@ -7553,7 +7802,12 @@ this.primereact.progressbar = (function (exports, React, utils) {
     return _extends.apply(this, arguments);
   }
 
+  function ownKeys(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(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
   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;
@@ -7572,6 +7826,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",
@@ -7593,6 +7848,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", {
@@ -7605,6 +7861,13 @@ this.primereact.progressbar = (function (exports, React, utils) {
       })));
     };
 
+    React__namespace.useImperativeHandle(ref, function () {
+      return _objectSpread({
+        getElement: function getElement() {
+          return elementRef.current;
+        }
+      }, props);
+    });
     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';
@@ -7768,6 +8031,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,
@@ -7784,6 +8048,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 () {
@@ -7802,7 +8074,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);
         }
       });
     };
@@ -7812,7 +8084,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);
@@ -7822,6 +8094,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,
@@ -7838,14 +8111,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);
@@ -7855,6 +8134,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,
@@ -7879,7 +8159,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);
             });
           }
         });
@@ -7894,9 +8174,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,
@@ -7909,7 +8187,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;
@@ -7923,13 +8219,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);
@@ -8096,7 +8393,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();
       }
     };
@@ -8338,7 +8635,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));
     };
 
@@ -8369,7 +8672,7 @@ this.primereact.dropdown = (function (exports, React, PrimeReact, hooks, overlay
 
       if (!option.disabled) {
         selectItem(event);
-        focusInputRef.current.focus();
+        utils.DomHandler.focus(focusInputRef.current);
       }
 
       hide();
@@ -8438,11 +8741,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 {
@@ -8452,7 +8757,7 @@ this.primereact.dropdown = (function (exports, React, PrimeReact, hooks, overlay
             }
           }
         } else {
-          return findOptionIndexInList(props.value, visibleOptions);
+          return findOptionIndexInList(props.value, options);
         }
       }
 
@@ -8517,7 +8822,7 @@ this.primereact.dropdown = (function (exports, React, PrimeReact, hooks, overlay
       if (highlightItem && highlightItem.scrollIntoView) {
         highlightItem.scrollIntoView({
           block: 'nearest',
-          inline: 'start'
+          inline: 'nearest'
         });
       }
     };
@@ -8569,16 +8874,34 @@ 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 _objectSpread({
+        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;
+        }
+      }, props);
+    });
     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 () {
@@ -8735,6 +9058,7 @@ this.primereact.dropdown = (function (exports, React, PrimeReact, hooks, overlay
       filterValue: filterState,
       hasFilter: hasFilter,
       onFilterClearIconClick: onFilterClearIconClick,
+      resetFilter: resetFilter,
       onFilterInputKeyDown: onFilterInputKeyDown,
       onFilterInputChange: onFilterInputChange,
       getOptionLabel: getOptionLabel,
@@ -8769,6 +9093,7 @@ this.primereact.dropdown = (function (exports, React, PrimeReact, hooks, overlay
     optionGroupLabel: null,
     optionGroupChildren: null,
     optionGroupTemplate: null,
+    filterTemplate: null,
     valueTemplate: null,
     itemTemplate: null,
     style: null,
@@ -8868,6 +9193,21 @@ this.primereact.dialog = (function (exports, React, PrimeReact, csstransition, h
     return _extends.apply(this, arguments);
   }
 
+  function _defineProperty(obj, key, value) {
+    if (key in obj) {
+      Object.defineProperty(obj, key, {
+        value: value,
+        enumerable: true,
+        configurable: true,
+        writable: true
+      });
+    } else {
+      obj[key] = value;
+    }
+
+    return obj;
+  }
+
   function _arrayLikeToArray(arr, len) {
     if (len == null || len > arr.length) len = arr.length;
 
@@ -8945,6 +9285,9 @@ this.primereact.dialog = (function (exports, React, PrimeReact, csstransition, h
     return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest();
   }
 
+  function ownKeys(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(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
   var Dialog = /*#__PURE__*/React__namespace.forwardRef(function (props, ref) {
     var _React$useState = React__namespace.useState(props.id),
         _React$useState2 = _slicedToArray(_React$useState, 2),
@@ -9292,7 +9635,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) {
@@ -9391,9 +9734,27 @@ this.primereact.dialog = (function (exports, React, PrimeReact, csstransition, h
       utils.ZIndexUtils.clear(maskRef.current);
     });
     React__namespace.useImperativeHandle(ref, function () {
-      return {
-        resetPosition: resetPosition
-      };
+      return _objectSpread({
+        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;
+        }
+      }, props);
     });
 
     var createCloseIcon = function createCloseIcon() {
@@ -9438,9 +9799,11 @@ this.primereact.dialog = (function (exports, React, PrimeReact, csstransition, h
         var icons = utils.ObjectUtils.getJSXElement(props.icons, props);
         var header = utils.ObjectUtils.getJSXElement(props.header, props);
         var headerId = idState + '_header';
+        var headerClassName = utils.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,
@@ -9474,7 +9837,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
@@ -9562,6 +9925,8 @@ this.primereact.dialog = (function (exports, React, PrimeReact, csstransition, h
     modal: true,
     onHide: null,
     onShow: null,
+    headerStyle: null,
+    headerClassName: null,
     contentStyle: null,
     contentClassName: null,
     closeOnEscape: true,
@@ -9739,9 +10104,9 @@ this.primereact.paginator = (function (exports, React, hooks, utils, api, button
     return obj;
   }
 
-  function ownKeys(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$1(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(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+  function _objectSpread$1(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$1(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$1(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
   var CurrentPageReport = /*#__PURE__*/React__namespace.memo(function (props) {
     var report = {
       currentPage: props.page + 1,
@@ -9757,7 +10122,7 @@ this.primereact.paginator = (function (exports, React, hooks, utils, api, button
     }, text);
 
     if (props.template) {
-      var defaultOptions = _objectSpread(_objectSpread({}, report), {
+      var defaultOptions = _objectSpread$1(_objectSpread$1({}, report), {
         className: 'p-paginator-current',
         element: element,
         props: props
@@ -10084,7 +10449,11 @@ this.primereact.paginator = (function (exports, React, hooks, utils, api, button
     disabled: false
   };
 
+  function ownKeys(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(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
   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);
@@ -10165,6 +10534,13 @@ this.primereact.paginator = (function (exports, React, hooks, utils, api, button
       changePage(0, rows);
     };
 
+    React__namespace.useImperativeHandle(ref, function () {
+      return _objectSpread({
+        getElement: function getElement() {
+          return elementRef.current;
+        }
+      }, props);
+    });
     hooks.useUpdateEffect(function () {
       if (!rppChanged.current) {
         changePage(0, props.rows);
@@ -10318,6 +10694,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);
@@ -10569,6 +10946,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 {
@@ -10640,7 +11025,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) {
@@ -11239,11 +11624,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;
@@ -11536,10 +11930,17 @@ this.primereact.tree = (function (exports, React, utils, ripple) {
       return matched;
     };
 
+    var resetFilter = function resetFilter() {
+      setFilterValueState('');
+    };
+
     React__namespace.useImperativeHandle(ref, function () {
-      return {
-        filter: filter
-      };
+      return _objectSpread({
+        filter: filter,
+        getElement: function getElement() {
+          return elementRef.current;
+        }
+      }, props);
     });
 
     var createRootChild = function createRootChild(node, index, last) {
@@ -11623,7 +12024,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",
@@ -11637,6 +12039,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;
@@ -11645,7 +12062,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 = {
@@ -11657,15 +12074,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;
@@ -11690,6 +12107,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);
@@ -11725,6 +12143,7 @@ this.primereact.tree = (function (exports, React, utils, ripple) {
     filterMode: 'lenient',
     filterPlaceholder: null,
     filterLocale: undefined,
+    filterTemplate: null,
     nodeTemplate: null,
     togglerTemplate: null,
     onSelect: null,