primereact 8.2.0 → 8.5.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",
@@ -861,7 +863,7 @@ this.primereact.utils = (function (exports, React) {
     }, {
       key: "isElement",
       value: function isElement(obj) {
-        return (typeof HTMLElement === "undefined" ? "undefined" : _typeof(HTMLElement)) === "object" ? obj instanceof HTMLElement : obj && _typeof(obj) === "object" && obj !== null && obj.nodeType === 1 && typeof obj.nodeName === "string";
+        return (typeof HTMLElement === "undefined" ? "undefined" : _typeof(HTMLElement)) === 'object' ? obj instanceof HTMLElement : obj && _typeof(obj) === 'object' && obj !== null && obj.nodeType === 1 && typeof obj.nodeName === 'string';
       }
     }, {
       key: "scrollInView",
@@ -907,8 +909,8 @@ this.primereact.utils = (function (exports, React) {
           return el.offsetWidth - el.clientWidth - parseFloat(style.borderLeftWidth) - parseFloat(style.borderRightWidth);
         } else {
           if (this.calculatedScrollbarWidth != null) return this.calculatedScrollbarWidth;
-          var scrollDiv = document.createElement("div");
-          scrollDiv.className = "p-scrollbar-measure";
+          var scrollDiv = document.createElement('div');
+          scrollDiv.className = 'p-scrollbar-measure';
           document.body.appendChild(scrollDiv);
           var scrollbarWidth = scrollDiv.offsetWidth - scrollDiv.clientWidth;
           document.body.removeChild(scrollDiv);
@@ -941,16 +943,17 @@ this.primereact.utils = (function (exports, React) {
       key: "resolveUserAgent",
       value: function resolveUserAgent() {
         var ua = navigator.userAgent.toLowerCase();
-        var match = /(chrome)[ ]([\w.]+)/.exec(ua) || /(webkit)[ ]([\w.]+)/.exec(ua) || /(opera)(?:.*version|)[ ]([\w.]+)/.exec(ua) || /(msie) ([\w.]+)/.exec(ua) || ua.indexOf("compatible") < 0 && /(mozilla)(?:.*? rv:([\w.]+)|)/.exec(ua) || [];
+        var match = /(chrome)[ ]([\w.]+)/.exec(ua) || /(webkit)[ ]([\w.]+)/.exec(ua) || /(opera)(?:.*version|)[ ]([\w.]+)/.exec(ua) || /(msie) ([\w.]+)/.exec(ua) || ua.indexOf('compatible') < 0 && /(mozilla)(?:.*? rv:([\w.]+)|)/.exec(ua) || [];
         return {
-          browser: match[1] || "",
-          version: match[2] || "0"
+          browser: match[1] || '',
+          version: match[2] || '0'
         };
       }
     }, {
       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",
@@ -975,7 +978,7 @@ this.primereact.utils = (function (exports, React) {
         try {
           for (_iterator3.s(); !(_step3 = _iterator3.n()).done;) {
             var focusableElement = _step3.value;
-            if (getComputedStyle(focusableElement).display !== "none" && getComputedStyle(focusableElement).visibility !== "hidden") visibleFocusableElements.push(focusableElement);
+            if (getComputedStyle(focusableElement).display !== 'none' && getComputedStyle(focusableElement).visibility !== 'hidden') visibleFocusableElements.push(focusableElement);
           }
         } catch (err) {
           _iterator3.e(err);
@@ -1168,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;
@@ -1621,7 +1718,7 @@ this.primereact.utils = (function (exports, React) {
 
         writeBuffer();
 
-        if (pos === options.mask.replace("?", "").length) {
+        if (pos === options.mask.replace('?', '').length) {
           caret(0, pos);
         } else {
           caret(pos);
@@ -1702,8 +1799,8 @@ this.primereact.utils = (function (exports, React) {
       len = options.mask.length;
       firstNonMaskPos = null;
       defs = {
-        '9': '[0-9]',
-        'a': '[A-Za-z]',
+        9: '[0-9]',
+        a: '[A-Za-z]',
         '*': '[A-Za-z0-9]'
       };
       var ua = DomHandler.getUserAgent();
@@ -1758,6 +1855,22 @@ this.primereact.utils = (function (exports, React) {
     };
   }
 
+  function _arrayWithoutHoles(arr) {
+    if (Array.isArray(arr)) return _arrayLikeToArray$1(arr);
+  }
+
+  function _iterableToArray(iter) {
+    if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter);
+  }
+
+  function _nonIterableSpread() {
+    throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
+  }
+
+  function _toConsumableArray(arr) {
+    return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray$1(arr) || _nonIterableSpread();
+  }
+
   var ObjectUtils = /*#__PURE__*/function () {
     function ObjectUtils() {
       _classCallCheck(this, ObjectUtils);
@@ -1913,7 +2026,13 @@ this.primereact.utils = (function (exports, React) {
           params[_key2 - 1] = arguments[_key2];
         }
 
-        return this.isFunction(obj) ? obj.apply(void 0, params) : obj;
+        var methodParams = params;
+
+        if (params && params.length === 1) {
+          methodParams = params[0];
+        }
+
+        return this.isFunction(obj) ? obj.apply(void 0, _toConsumableArray(methodParams)) : obj;
       }
     }, {
       key: "getRefElement",
@@ -1939,7 +2058,7 @@ this.primereact.utils = (function (exports, React) {
       key: "removeAccents",
       value: function removeAccents(str) {
         if (str && str.search(/[\xC0-\xFF]/g) > -1) {
-          str = str.replace(/[\xC0-\xC5]/g, "A").replace(/[\xC6]/g, "AE").replace(/[\xC7]/g, "C").replace(/[\xC8-\xCB]/g, "E").replace(/[\xCC-\xCF]/g, "I").replace(/[\xD0]/g, "D").replace(/[\xD1]/g, "N").replace(/[\xD2-\xD6\xD8]/g, "O").replace(/[\xD9-\xDC]/g, "U").replace(/[\xDD]/g, "Y").replace(/[\xDE]/g, "P").replace(/[\xE0-\xE5]/g, "a").replace(/[\xE6]/g, "ae").replace(/[\xE7]/g, "c").replace(/[\xE8-\xEB]/g, "e").replace(/[\xEC-\xEF]/g, "i").replace(/[\xF1]/g, "n").replace(/[\xF2-\xF6\xF8]/g, "o").replace(/[\xF9-\xFC]/g, "u").replace(/[\xFE]/g, "p").replace(/[\xFD\xFF]/g, "y");
+          str = str.replace(/[\xC0-\xC5]/g, 'A').replace(/[\xC6]/g, 'AE').replace(/[\xC7]/g, 'C').replace(/[\xC8-\xCB]/g, 'E').replace(/[\xCC-\xCF]/g, 'I').replace(/[\xD0]/g, 'D').replace(/[\xD1]/g, 'N').replace(/[\xD2-\xD6\xD8]/g, 'O').replace(/[\xD9-\xDC]/g, 'U').replace(/[\xDD]/g, 'Y').replace(/[\xDE]/g, 'P').replace(/[\xE0-\xE5]/g, 'a').replace(/[\xE6]/g, 'ae').replace(/[\xE7]/g, 'c').replace(/[\xE8-\xEB]/g, 'e').replace(/[\xEC-\xEF]/g, 'i').replace(/[\xF1]/g, 'n').replace(/[\xF2-\xF6\xF8]/g, 'o').replace(/[\xF9-\xFC]/g, 'u').replace(/[\xFE]/g, 'p').replace(/[\xFD\xFF]/g, 'y');
         }
 
         return str;
@@ -1959,15 +2078,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;
         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, {
+        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;
       }
     }]);
 
@@ -2040,22 +2160,6 @@ this.primereact.utils = (function (exports, React) {
     return "".concat(prefix).concat(lastId);
   }
 
-  function _arrayWithoutHoles(arr) {
-    if (Array.isArray(arr)) return _arrayLikeToArray$1(arr);
-  }
-
-  function _iterableToArray(iter) {
-    if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter);
-  }
-
-  function _nonIterableSpread() {
-    throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
-  }
-
-  function _toConsumableArray(arr) {
-    return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray$1(arr) || _nonIterableSpread();
-  }
-
   function handler() {
     var zIndexes = [];
 
@@ -2210,6 +2314,8 @@ this.primereact.api = (function (exports, utils) {
 
   _defineProperty(PrimeReact, "nonce", null);
 
+  _defineProperty(PrimeReact, "nullSortOrder", 1);
+
   _defineProperty(PrimeReact, "zIndex", {
     modal: 1100,
     overlay: 1000,
@@ -2228,7 +2334,7 @@ this.primereact.api = (function (exports, utils) {
 
   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 locales = {
-    'en': {
+    en: {
       startsWith: 'Starts with',
       contains: 'Contains',
       notContains: 'Not contains',
@@ -3741,7 +3847,7 @@ this.primereact.portal = (function (exports, React, ReactDOM, PrimeReact, hooks,
 })({}, React, ReactDOM, primereact.api, primereact.hooks, primereact.utils);
 
 this.primereact = this.primereact || {};
-this.primereact.keyfilter = (function (exports, utils) {
+this.primereact.keyfilter = (function (exports) {
   'use strict';
 
   function _arrayLikeToArray(arr, len) {
@@ -3794,49 +3900,6 @@ this.primereact.keyfilter = (function (exports, utils) {
     },
 
     /* eslint-enable */
-    KEYS: {
-      TAB: 9,
-      RETURN: 13,
-      ESC: 27,
-      BACKSPACE: 8,
-      DELETE: 46
-    },
-    SAFARI_KEYS: {
-      63234: 37,
-      // left
-      63235: 39,
-      // right
-      63232: 38,
-      // up
-      63233: 40,
-      // down
-      63276: 33,
-      // page up
-      63277: 34,
-      // page down
-      63272: 46,
-      // delete
-      63273: 36,
-      // home
-      63275: 35 // end
-
-    },
-    isNavKeyPress: function isNavKeyPress(e) {
-      var k = e.keyCode;
-      k = utils.DomHandler.getBrowser().safari ? KeyFilter.SAFARI_KEYS[k] || k : k;
-      return k >= 33 && k <= 40 || k === KeyFilter.KEYS.RETURN || k === KeyFilter.KEYS.TAB || k === KeyFilter.KEYS.ESC;
-    },
-    isSpecialKey: function isSpecialKey(e) {
-      var k = e.keyCode;
-      return k === 9 || k === 13 || k === 27 || k === 16 || k === 17 || k >= 18 && k <= 20 || utils.DomHandler.getBrowser().opera && !e.shiftKey && (k === 8 || k >= 33 && k <= 35 || k >= 36 && k <= 39 || k >= 44 && k <= 45);
-    },
-    getKey: function getKey(e) {
-      var k = e.keyCode || e.charCode;
-      return utils.DomHandler.getBrowser().safari ? KeyFilter.SAFARI_KEYS[k] || k : k;
-    },
-    getCharCode: function getCharCode(e) {
-      return e.charCode || e.keyCode || e.which;
-    },
     getRegex: function getRegex(keyfilter) {
       return KeyFilter.DEFAULT_MASKS[keyfilter] ? KeyFilter.DEFAULT_MASKS[keyfilter] : keyfilter;
     },
@@ -3845,27 +3908,19 @@ this.primereact.keyfilter = (function (exports, utils) {
         return;
       }
 
-      var regex = this.getRegex(keyfilter);
-      var browser = utils.DomHandler.getBrowser();
-
       if (e.ctrlKey || e.altKey) {
         return;
       }
 
-      var k = this.getKey(e);
+      var isPrintableKey = e.key.length === 1;
 
-      if (browser.mozilla && (this.isNavKeyPress(e) || k === KeyFilter.KEYS.BACKSPACE || k === KeyFilter.KEYS.DELETE && e.charCode === 0)) {
+      if (!isPrintableKey) {
         return;
       }
 
-      var c = this.getCharCode(e);
-      var cc = String.fromCharCode(c);
-
-      if (browser.mozilla && (this.isSpecialKey(e) || !cc)) {
-        return;
-      }
+      var regex = this.getRegex(keyfilter);
 
-      if (!regex.test(cc)) {
+      if (!regex.test(e.key)) {
         e.preventDefault();
       }
     },
@@ -3875,7 +3930,7 @@ this.primereact.keyfilter = (function (exports, utils) {
       }
 
       var regex = this.getRegex(keyfilter);
-      var clipboard = e.clipboardData.getData("text"); // loop over each letter pasted and if any fail prevent the paste
+      var clipboard = e.clipboardData.getData('text'); // loop over each letter pasted and if any fail prevent the paste
 
       _toConsumableArray(clipboard).forEach(function (c) {
         if (!regex.test(c)) {
@@ -3902,7 +3957,7 @@ this.primereact.keyfilter = (function (exports, utils) {
 
   return exports;
 
-})({}, primereact.utils);
+})({});
 
 this.primereact = this.primereact || {};
 this.primereact.tooltip = (function (exports, React, PrimeReact, hooks, portal, utils) {
@@ -4063,6 +4118,7 @@ this.primereact.tooltip = (function (exports, React, PrimeReact, hooks, portal,
     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) {
@@ -4117,24 +4173,29 @@ this.primereact.tooltip = (function (exports, React, PrimeReact, hooks, portal,
     };
 
     var getEvents = function getEvents(target) {
-      var showEvent = getTargetOption(target, 'showevent') || props.showEvent;
-      var hideEvent = getTargetOption(target, 'hideevent') || props.hideEvent;
+      var showEvents = [getTargetOption(target, 'showevent') || props.showEvent];
+      var hideEvents = [getTargetOption(target, 'hideevent') || props.hideEvent];
 
       if (isMouseTrack(target)) {
-        showEvent = 'mousemove';
-        hideEvent = 'mouseleave';
+        showEvents = ['mousemove'];
+        hideEvents = ['mouseleave'];
       } else {
         var event = getTargetOption(target, 'event') || props.event;
 
         if (event === 'focus') {
-          showEvent = 'focus';
-          hideEvent = 'blur';
+          showEvents = ['focus'];
+          hideEvents = ['blur'];
+        }
+
+        if (event === 'both') {
+          showEvents = ['focus', 'mouseenter'];
+          hideEvents = ['blur', 'mouseleave'];
         }
       }
 
       return {
-        showEvent: showEvent,
-        hideEvent: hideEvent
+        showEvents: showEvents,
+        hideEvents: hideEvents
       };
     };
 
@@ -4166,6 +4227,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);
@@ -4175,32 +4267,7 @@ this.primereact.tooltip = (function (exports, React, PrimeReact, hooks, portal,
         return;
       }
 
-      var updateTooltipState = function updateTooltipState(position) {
-        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
-          }, position);
-        });
-      };
+      currentMouseEvent.current = e;
 
       if (visibleState) {
         applyDelay('updateDelay', updateTooltipState);
@@ -4213,12 +4280,7 @@ this.primereact.tooltip = (function (exports, React, PrimeReact, hooks, portal,
 
         if (success) {
           applyDelay('showDelay', function () {
-            var position = getPosition(currentTargetRef.current);
-            var classname = getTargetOption(currentTargetRef.current, 'classname');
             setVisibleState(true);
-            setPositionState(position);
-            setClassNameState(classname);
-            updateTooltipState(position);
             sendCallback(props.onShow, {
               originalEvent: e,
               target: currentTargetRef.current
@@ -4246,11 +4308,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);
-            setClassNameState('');
-            currentTargetRef.current = null;
-            containerSize.current = null;
-            allowHide.current = true;
             sendCallback(props.onHide, {
               originalEvent: e,
               target: currentTargetRef.current
@@ -4351,24 +4408,32 @@ this.primereact.tooltip = (function (exports, React, PrimeReact, hooks, portal,
     var bindTargetEvent = function bindTargetEvent(target) {
       if (target) {
         var _getEvents = getEvents(target),
-            showEvent = _getEvents.showEvent,
-            hideEvent = _getEvents.hideEvent;
+            showEvents = _getEvents.showEvents,
+            hideEvents = _getEvents.hideEvents;
 
         var currentTarget = getTarget(target);
-        currentTarget.addEventListener(showEvent, show);
-        currentTarget.addEventListener(hideEvent, hide);
+        showEvents.forEach(function (event) {
+          return currentTarget.addEventListener(event, show);
+        });
+        hideEvents.forEach(function (event) {
+          return currentTarget.addEventListener(event, hide);
+        });
       }
     };
 
     var unbindTargetEvent = function unbindTargetEvent(target) {
       if (target) {
         var _getEvents2 = getEvents(target),
-            showEvent = _getEvents2.showEvent,
-            hideEvent = _getEvents2.hideEvent;
+            showEvents = _getEvents2.showEvents,
+            hideEvents = _getEvents2.hideEvents;
 
         var currentTarget = getTarget(target);
-        currentTarget.removeEventListener(showEvent, show);
-        currentTarget.removeEventListener(hideEvent, hide);
+        showEvents.forEach(function (event) {
+          return currentTarget.removeEventListener(event, show);
+        });
+        hideEvents.forEach(function (event) {
+          return currentTarget.removeEventListener(event, hide);
+        });
       }
     };
 
@@ -4399,7 +4464,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);
       });
     };
@@ -4484,8 +4549,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 () {
@@ -4509,9 +4585,16 @@ 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;
+        }
       };
     });
 
@@ -5380,6 +5463,7 @@ this.primereact.virtualscroller = (function (exports, React, hooks, utils) {
     }, [props.orientation]);
     React__namespace.useImperativeHandle(ref, function () {
       return {
+        props: props,
         getElementRef: getElementRef,
         scrollTo: scrollTo,
         scrollToIndex: scrollToIndex,
@@ -5475,7 +5559,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);
           },
@@ -5711,23 +5795,30 @@ 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,
+        var checkboxClicked = event.target instanceof HTMLDivElement || event.target instanceof HTMLSpanElement;
+        var isInputToggled = event.target === inputRef.current;
+        var isCheckboxToggled = checkboxClicked && event.target.checked !== _checked;
+
+        if (isInputToggled || isCheckboxToggled) {
+          var value = _checked ? props.falseValue : props.trueValue;
+          props.onChange({
+            originalEvent: event,
             value: props.value,
-            checked: value
-          }
-        });
-        inputRef.current.checked = !_checked;
+            checked: value,
+            stopPropagation: function stopPropagation() {},
+            preventDefault: function preventDefault() {},
+            target: {
+              type: 'checkbox',
+              name: props.name,
+              id: props.id,
+              value: props.value,
+              checked: value
+            }
+          });
+        }
+
         utils.DomHandler.focus(inputRef.current);
+        event.preventDefault();
       }
     };
 
@@ -5739,10 +5830,27 @@ this.primereact.checkbox = (function (exports, React, hooks, tooltip, utils) {
       setFocusedState(false);
     };
 
+    var onKeyDown = function onKeyDown(event) {
+      if (event.code === 'Space') {
+        onClick(event);
+      }
+    };
+
     var isChecked = function isChecked() {
       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]);
@@ -5790,6 +5898,7 @@ this.primereact.checkbox = (function (exports, React, hooks, tooltip, utils) {
       "aria-label": props['aria-label'],
       onFocus: onFocus,
       onBlur: onBlur,
+      onKeyDown: onKeyDown,
       disabled: props.disabled,
       readOnly: props.readOnly,
       required: props.required
@@ -5898,6 +6007,10 @@ this.primereact.button = (function (exports, React, ripple, tooltip, utils) {
       utils.ObjectUtils.combinedRefs(elementRef, ref);
     }, [elementRef, ref]);
 
+    if (props.visible === false) {
+      return null;
+    }
+
     var createIcon = function createIcon() {
       var icon = props.loading ? props.loadingIcon : props.icon;
       var className = utils.classNames('p-button-icon p-c', _defineProperty({
@@ -5920,7 +6033,7 @@ this.primereact.button = (function (exports, React, ripple, tooltip, utils) {
       return !props.children && !props.label && /*#__PURE__*/React__namespace.createElement("span", {
         className: "p-button-label p-c",
         dangerouslySetInnerHTML: {
-          __html: "&nbsp;"
+          __html: '&nbsp;'
         }
       });
     };
@@ -6060,9 +6173,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]);
@@ -6602,9 +6716,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);
@@ -7182,7 +7297,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 () {
@@ -7508,7 +7630,8 @@ this.primereact.messages = (function (exports, React, reactTransitionGroup, csst
         detail = _props$message.detail,
         closable = _props$message.closable,
         life = _props$message.life,
-        sticky = _props$message.sticky;
+        sticky = _props$message.sticky,
+        icon = _props$message.icon;
 
     var _useTimeout = hooks.useTimeout(function () {
       onClose(null);
@@ -7546,15 +7669,23 @@ this.primereact.messages = (function (exports, React, reactTransitionGroup, csst
 
     var createMessage = function createMessage() {
       if (props.message) {
-        var icon = utils.classNames('p-message-icon pi ', {
-          'pi-info-circle': severity === 'info',
-          'pi-check': severity === 'success',
-          'pi-exclamation-triangle': severity === 'warn',
-          'pi-times-circle': severity === 'error'
+        var iconValue = icon;
+
+        if (!iconValue) {
+          iconValue = utils.classNames('pi', {
+            'pi-info-circle': severity === 'info',
+            'pi-exclamation-triangle': severity === 'warn',
+            'pi-times-circle': severity === 'error',
+            'pi-check': severity === 'success'
+          });
+        }
+
+        var iconContent = utils.IconUtils.getJSXIcon(iconValue, {
+          className: 'p-message-icon'
+        }, {
+          props: props
         });
-        return content || /*#__PURE__*/React__namespace.createElement(React__namespace.Fragment, null, /*#__PURE__*/React__namespace.createElement("span", {
-          className: icon
-        }), /*#__PURE__*/React__namespace.createElement("span", {
+        return content || /*#__PURE__*/React__namespace.createElement(React__namespace.Fragment, null, iconContent, /*#__PURE__*/React__namespace.createElement("span", {
           className: "p-message-summary"
         }, summary), /*#__PURE__*/React__namespace.createElement("span", {
           className: "p-message-detail"
@@ -7584,6 +7715,8 @@ 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;
@@ -7620,14 +7753,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) {
@@ -7712,6 +7850,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;
@@ -7730,6 +7870,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",
@@ -7751,6 +7892,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", {
@@ -7763,6 +7905,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';
@@ -7832,6 +7982,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, {
@@ -7943,6 +8109,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 () {
@@ -8061,9 +8235,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,
@@ -8076,7 +8248,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;
@@ -8280,7 +8470,23 @@ 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 () {
+          var currentValue = inputRef.current ? inputRef.current.value : undefined;
+          props.onBlur({
+            originalEvent: event.originalEvent,
+            value: currentValue,
+            stopPropagation: function stopPropagation() {},
+            preventDefault: function preventDefault() {},
+            target: {
+              name: props.name,
+              id: props.id,
+              value: currentValue
+            }
+          });
+        }, 200);
+      }
     };
 
     var onPanelClick = function onPanelClick(event) {
@@ -8436,6 +8642,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;
 
@@ -8506,7 +8717,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));
     };
 
@@ -8743,6 +8960,25 @@ this.primereact.dropdown = (function (exports, React, PrimeReact, hooks, overlay
       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]);
@@ -8777,21 +9013,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() {
@@ -8905,6 +9153,7 @@ this.primereact.dropdown = (function (exports, React, PrimeReact, hooks, overlay
       filterValue: filterState,
       hasFilter: hasFilter,
       onFilterClearIconClick: onFilterClearIconClick,
+      resetFilter: resetFilter,
       onFilterInputKeyDown: onFilterInputKeyDown,
       onFilterInputChange: onFilterInputChange,
       getOptionLabel: getOptionLabel,
@@ -8939,6 +9188,7 @@ this.primereact.dropdown = (function (exports, React, PrimeReact, hooks, overlay
     optionGroupLabel: null,
     optionGroupChildren: null,
     optionGroupTemplate: null,
+    filterTemplate: null,
     valueTemplate: null,
     itemTemplate: null,
     style: null,
@@ -9437,6 +9687,10 @@ this.primereact.dialog = (function (exports, React, PrimeReact, csstransition, h
       if (props.modal) {
         utils.DomHandler.addClass(maskRef.current, 'p-component-overlay-leave');
       }
+
+      if (props.blockScroll) {
+        utils.DomHandler.removeClass(document.body, 'p-overflow-hidden');
+      }
     };
 
     var onExited = function onExited() {
@@ -9523,11 +9777,15 @@ this.primereact.dialog = (function (exports, React, PrimeReact, csstransition, h
     };
 
     hooks.useMountEffect(function () {
+      var unqiueId = utils.UniqueComponentId();
+
       if (!idState) {
-        setIdState(utils.UniqueComponentId());
+        setIdState(unqiueId);
       }
 
-      attributeSelector.current = utils.UniqueComponentId();
+      if (!attributeSelector.current) {
+        attributeSelector.current = unqiueId;
+      }
 
       if (props.visible) {
         setMaskVisibleState(true);
@@ -9562,7 +9820,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;
+        }
       };
     });
 
@@ -9925,7 +10202,7 @@ this.primereact.paginator = (function (exports, React, hooks, utils, api, button
       rows: props.rows,
       totalRecords: props.totalRecords
     };
-    var text = props.reportTemplate.replace("{currentPage}", report.currentPage).replace("{totalPages}", report.totalPages).replace("{first}", report.first).replace("{last}", report.last).replace("{rows}", report.rows).replace("{totalRecords}", report.totalRecords);
+    var text = props.reportTemplate.replace('{currentPage}', report.currentPage).replace('{totalPages}', report.totalPages).replace('{first}', report.first).replace('{last}', report.last).replace('{rows}', report.rows).replace('{totalRecords}', report.totalRecords);
     var element = /*#__PURE__*/React__namespace.createElement("span", {
       className: "p-paginator-current"
     }, text);
@@ -10259,6 +10536,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);
@@ -10339,6 +10617,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);
@@ -10492,6 +10778,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);
@@ -11168,7 +11455,7 @@ this.primereact.tree = (function (exports, React, utils, ripple) {
     };
 
     var onDragStart = function onDragStart(event) {
-      event.dataTransfer.setData("text", props.dragdropScope);
+      event.dataTransfer.setData('text', props.dragdropScope);
       event.dataTransfer.setData(props.dragdropScope, props.dragdropScope);
 
       if (props.onDragStart) {
@@ -11421,11 +11708,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;
@@ -11718,9 +12014,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;
+        }
       };
     });
 
@@ -11805,7 +12109,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",
@@ -11819,6 +12124,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;
@@ -11827,7 +12147,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 = {
@@ -11839,15 +12159,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;
@@ -11872,6 +12192,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);
@@ -11907,6 +12228,7 @@ this.primereact.tree = (function (exports, React, utils, ripple) {
     filterMode: 'lenient',
     filterPlaceholder: null,
     filterLocale: undefined,
+    filterTemplate: null,
     nodeTemplate: null,
     togglerTemplate: null,
     onSelect: null,