primereact 8.2.0 → 8.3.0

package/core/core.js

@@ -4041,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),
@@ -4063,6 +4066,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) {
@@ -4166,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);
@@ -4175,32 +4210,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 +4223,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 +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);
-            setClassNameState('');
-            currentTargetRef.current = null;
-            containerSize.current = null;
-            allowHide.current = true;
             sendCallback(props.onHide, {
               originalEvent: e,
               target: currentTargetRef.current
@@ -4484,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 () {
@@ -4508,11 +4519,17 @@ 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() {
@@ -5379,13 +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) {
@@ -5475,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);
           },
@@ -5637,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;
   }
@@ -5698,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),
@@ -5728,6 +5763,7 @@ this.primereact.checkbox = (function (exports, React, hooks, tooltip, utils) {
         });
         inputRef.current.checked = !_checked;
         utils.DomHandler.focus(inputRef.current);
+        event.preventDefault();
       }
     };
 
@@ -5743,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]);
@@ -7181,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);
@@ -7423,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;
 
@@ -7577,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([]),
@@ -7584,6 +7654,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;
@@ -7619,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) {
@@ -7693,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++) {
@@ -7711,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;
@@ -7730,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",
@@ -7751,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", {
@@ -7763,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';
@@ -7943,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 () {
@@ -8061,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,
@@ -8076,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;
@@ -8506,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));
     };
 
@@ -8743,6 +8878,24 @@ 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 _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]);
@@ -8905,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,
@@ -8939,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,
@@ -9038,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;
 
@@ -9115,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),
@@ -9561,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() {
@@ -9913,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,
@@ -9931,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
@@ -10258,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);
@@ -10339,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);
@@ -10492,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);
@@ -11421,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;
@@ -11718,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) {
@@ -11805,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",
@@ -11819,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;
@@ -11827,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 = {
@@ -11839,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;
@@ -11872,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);
@@ -11907,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,