primereact 10.9.1 → 10.9.2

package/primereact.all.js

@@ -816,34 +816,58 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
         var parents = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [];
         return element.parentNode === null ? parents : this.getParents(element.parentNode, parents.concat([element.parentNode]));
       }
+
+      /**
+       * Gets all scrollable parent elements of a given element
+       * @param {HTMLElement} element - The element to find scrollable parents for
+       * @param {boolean} hideOverlaysOnDocumentScrolling - Whether to include window/document level scrolling
+       * @returns {Array} Array of scrollable parent elements
+       */
     }, {
       key: "getScrollableParents",
       value: function getScrollableParents(element) {
         var hideOverlaysOnDocumentScrolling = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
         var scrollableParents = [];
         if (element) {
+          // Get all parent elements
           var parents = this.getParents(element);
+          // Regex to match auto or scroll overflow values
           var overflowRegex = /(auto|scroll)/;
+
+          /**
+           * Checks if an element has overflow scroll/auto in any direction
+           * @param {HTMLElement} node - Element to check
+           * @returns {boolean} True if element has overflow scroll/auto
+           */
           var overflowCheck = function overflowCheck(node) {
             var styleDeclaration = node ? getComputedStyle(node) : null;
             return styleDeclaration && (overflowRegex.test(styleDeclaration.getPropertyValue('overflow')) || overflowRegex.test(styleDeclaration.getPropertyValue('overflow-x')) || overflowRegex.test(styleDeclaration.getPropertyValue('overflow-y')));
           };
+
+          /**
+           * Adds a scrollable parent element to the collection
+           * @param {HTMLElement} node - Element to add
+           */
           var addScrollableParent = function addScrollableParent(node) {
             if (hideOverlaysOnDocumentScrolling) {
-              // nodeType 9 is for document element
+              // For document/body/html elements, add window instead
               scrollableParents.push(node.nodeName === 'BODY' || node.nodeName === 'HTML' || node.nodeType === 9 ? window : node);
-            } else {
-              scrollableParents.push(node);
             }
           };
+
+          // Iterate through all parent elements
           var _iterator = _createForOfIteratorHelper$h(parents),
             _step;
           try {
             for (_iterator.s(); !(_step = _iterator.n()).done;) {
+              var _parent$dataset;
               var parent = _step.value;
-              var scrollSelectors = parent.nodeType === 1 && parent.dataset.scrollselectors;
+              // Check for custom scroll selectors in data attribute
+              var scrollSelectors = parent.nodeType === 1 && ((_parent$dataset = parent.dataset) === null || _parent$dataset === void 0 ? void 0 : _parent$dataset.scrollselectors);
               if (scrollSelectors) {
                 var selectors = scrollSelectors.split(',');
+
+                // Check each selector
                 var _iterator2 = _createForOfIteratorHelper$h(selectors),
                   _step2;
                 try {
@@ -861,7 +885,7 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
                 }
               }
 
-              // BODY
+              // Check if the parent itself is scrollable
               if (parent.nodeType === 1 && overflowCheck(parent)) {
                 addScrollableParent(parent);
               }
@@ -873,11 +897,11 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
           }
         }
 
-        // we should always at least have the body or window
+        // Ensure window/body is always included as fallback
         if (!scrollableParents.some(function (node) {
           return node === document.body || node === window;
         })) {
-          scrollableParents.push(window);
+          scrollableParents.push(hideOverlaysOnDocumentScrolling ? window : document.body);
         }
         return scrollableParents;
       }
@@ -4747,7 +4771,7 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
 
   function ownKeys$1X(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
   function _objectSpread$1X(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$1X(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$1X(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
-  var baseStyle = "\n.p-hidden-accessible {\n    position: absolute;\n    pointer-events: none;\n    opacity: 0;\n    white-space: nowrap;\n}\n\n.p-overflow-hidden {\n    overflow: hidden;\n    padding-right: var(--scrollbar-width);\n}\n";
+  var baseStyle = "\n.p-hidden-accessible {\n    border: 0;\n    clip: rect(0 0 0 0);\n    height: 1px;\n    margin: -1px;\n    opacity: 0;\n    overflow: hidden;\n    padding: 0;\n    pointer-events: none;\n    position: absolute;\n    white-space: nowrap;\n    width: 1px;\n}\n\n.p-overflow-hidden {\n    overflow: hidden;\n    padding-right: var(--scrollbar-width);\n}\n";
   var buttonStyles = "\n.p-button {\n    margin: 0;\n    display: inline-flex;\n    cursor: pointer;\n    user-select: none;\n    align-items: center;\n    vertical-align: bottom;\n    text-align: center;\n    overflow: hidden;\n    position: relative;\n}\n\n.p-button-label {\n    flex: 1 1 auto;\n}\n\n.p-button-icon-right {\n    order: 1;\n}\n\n.p-button:disabled {\n    cursor: default;\n}\n\n.p-button-icon-only {\n    justify-content: center;\n}\n\n.p-button-icon-only .p-button-label {\n    visibility: hidden;\n    width: 0;\n    flex: 0 0 auto;\n}\n\n.p-button-vertical {\n    flex-direction: column;\n}\n\n.p-button-icon-bottom {\n    order: 2;\n}\n\n.p-button-group .p-button {\n    margin: 0;\n}\n\n.p-button-group .p-button:not(:last-child) {\n    border-right: 0 none;\n}\n\n.p-button-group .p-button:not(:first-of-type):not(:last-of-type) {\n    border-radius: 0;\n}\n\n.p-button-group .p-button:first-of-type {\n    border-top-right-radius: 0;\n    border-bottom-right-radius: 0;\n}\n\n.p-button-group .p-button:last-of-type {\n    border-top-left-radius: 0;\n    border-bottom-left-radius: 0;\n}\n\n.p-button-group .p-button:focus {\n    position: relative;\n    z-index: 1;\n}\n";
   var inputTextStyles = "\n.p-inputtext {\n    margin: 0;\n}\n\n.p-fluid .p-inputtext {\n    width: 100%;\n}\n\n/* InputGroup */\n.p-inputgroup {\n    display: flex;\n    align-items: stretch;\n    width: 100%;\n}\n\n.p-inputgroup-addon {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n}\n\n.p-inputgroup .p-float-label {\n    display: flex;\n    align-items: stretch;\n    width: 100%;\n}\n\n.p-inputgroup .p-inputtext,\n.p-fluid .p-inputgroup .p-inputtext,\n.p-inputgroup .p-inputwrapper,\n.p-fluid .p-inputgroup .p-input {\n    flex: 1 1 auto;\n    width: 1%;\n}\n\n/* Floating Label */\n.p-float-label {\n    display: block;\n    position: relative;\n}\n\n.p-float-label label {\n    position: absolute;\n    pointer-events: none;\n    top: 50%;\n    margin-top: -0.5rem;\n    transition-property: all;\n    transition-timing-function: ease;\n    line-height: 1;\n}\n\n.p-float-label textarea ~ label,\n.p-float-label .p-mention ~ label {\n    top: 1rem;\n}\n\n.p-float-label input:focus ~ label,\n.p-float-label input:-webkit-autofill ~ label,\n.p-float-label input.p-filled ~ label,\n.p-float-label textarea:focus ~ label,\n.p-float-label textarea.p-filled ~ label,\n.p-float-label .p-inputwrapper-focus ~ label,\n.p-float-label .p-inputwrapper-filled ~ label,\n.p-float-label .p-tooltip-target-wrapper ~ label {\n    top: -0.75rem;\n    font-size: 12px;\n}\n\n.p-float-label .p-placeholder,\n.p-float-label input::placeholder,\n.p-float-label .p-inputtext::placeholder {\n    opacity: 0;\n    transition-property: all;\n    transition-timing-function: ease;\n}\n\n.p-float-label .p-focus .p-placeholder,\n.p-float-label input:focus::placeholder,\n.p-float-label .p-inputtext:focus::placeholder {\n    opacity: 1;\n    transition-property: all;\n    transition-timing-function: ease;\n}\n\n.p-input-icon-left,\n.p-input-icon-right {\n    position: relative;\n    display: inline-block;\n}\n\n.p-input-icon-left > i,\n.p-input-icon-right > i,\n.p-input-icon-left > svg,\n.p-input-icon-right > svg,\n.p-input-icon-left > .p-input-prefix,\n.p-input-icon-right > .p-input-suffix {\n    position: absolute;\n    top: 50%;\n    margin-top: -0.5rem;\n}\n\n.p-fluid .p-input-icon-left,\n.p-fluid .p-input-icon-right {\n    display: block;\n    width: 100%;\n}\n";
   var iconStyles = "\n.p-icon {\n    display: inline-block;\n}\n\n.p-icon-spin {\n    -webkit-animation: p-icon-spin 2s infinite linear;\n    animation: p-icon-spin 2s infinite linear;\n}\n\nsvg.p-icon {\n    pointer-events: auto;\n}\n\nsvg.p-icon g,\n.p-disabled svg.p-icon {\n    pointer-events: none;\n}\n\n@-webkit-keyframes p-icon-spin {\n    0% {\n        -webkit-transform: rotate(0deg);\n        transform: rotate(0deg);\n    }\n    100% {\n        -webkit-transform: rotate(359deg);\n        transform: rotate(359deg);\n    }\n}\n\n@keyframes p-icon-spin {\n    0% {\n        -webkit-transform: rotate(0deg);\n        transform: rotate(0deg);\n    }\n    100% {\n        -webkit-transform: rotate(359deg);\n        transform: rotate(359deg);\n    }\n}\n";
@@ -6053,8 +6077,9 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
     var hide = function hide(e) {
       if (e && e.type === 'blur') setMultipleFocusEvents(false);
       clearTimeouts();
+      var success = true;
       if (visibleState) {
-        var success = sendCallback(props.onBeforeHide, {
+        success = sendCallback(props.onBeforeHide, {
           originalEvent: e,
           target: currentTargetRef.current
         });
@@ -6065,7 +6090,6 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
             }
             ZIndexUtils.clear(elementRef.current);
             DomHandler.removeClass(elementRef.current, 'p-tooltip-active');
-            setVisibleState(false);
             sendCallback(props.onHide, {
               originalEvent: e,
               target: currentTargetRef.current
@@ -6073,6 +6097,11 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
           });
         }
       }
+
+      // handles the case when visibleState change from mouseenter was queued and mouseleave handler was called earlier than queued re-render
+      if (success) {
+        setVisibleState(false);
+      }
     };
     var align = function align(target, coordinate, position) {
       var left = 0;
@@ -7560,7 +7589,7 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
       }
     };
     var init = function init() {
-      if (!props.disabled && isVisible(elementRef.current)) {
+      if (!props.disabled && DomHandler.isVisible(elementRef.current)) {
         setSize();
         calculateOptions();
         setSpacerSize();
@@ -7574,7 +7603,7 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
       return false;
     };
     React__namespace.useEffect(function () {
-      if (!viewInitialized.current && isVisible(elementRef.current)) {
+      if (!viewInitialized.current && isVisible()) {
         viewInit();
         viewInitialized.current = true;
       }
@@ -7941,7 +7970,7 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
         var emptyMessage = props.emptyMessage || localeOption('emptyMessage');
         var emptyMessageProps = mergeProps({
           className: cx('emptyMessage')
-        }, _ptm('emptyMesage'));
+        }, _ptm('emptyMessage'));
         var _listProps = mergeProps({
           className: cx('list')
         }, _ptm('list'));
@@ -8186,9 +8215,9 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
     var formatValue = function formatValue(value) {
       if (ObjectUtils.isEmpty(value)) return '';
       if (typeof value === 'string') return value;
-      var valueFromTemplate = ObjectUtils.getJSXElement(props.selectedItemTemplate, value);
-      if (typeof valueFromTemplate === 'string') {
-        return valueFromTemplate;
+      if (props.selectedItemTemplate) {
+        var valueFromTemplate = ObjectUtils.getJSXElement(props.selectedItemTemplate, value);
+        return props.multiple || typeof valueFromTemplate === 'string' ? valueFromTemplate : value;
       }
       if (props.field) {
         var _ObjectUtils$resolveF;
@@ -9050,7 +9079,7 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
     menu: 'p-breadcrumb-list',
     root: 'p-breadcrumb p-component'
   };
-  var styles$Y = "\n@layer primereact {\n    .p-breadcrumb {\n        overflow-x: auto;\n    }\n\n    .p-breadcrumb ol {\n        margin: 0;\n        padding: 0;\n        list-style-type: none;\n        display: flex;\n        align-items: center;\n        flex-wrap: nowrap;\n    }\n\n    .p-breadcrumb .p-menuitem-text {\n        line-height: 1;\n    }\n\n    .p-breadcrumb .p-menuitem-link {\n        text-decoration: none;\n        display: flex;\n        align-items: center;\n    }\n\n    .p-breadcrumb .p-menuitem-separator {\n        display: flex;\n        align-items: center;\n    }\n\n    .p-breadcrumb::-webkit-scrollbar {\n        display: none;\n    }\n}\n";
+  var styles$Y = "\n@layer primereact {\n    .p-breadcrumb {\n        overflow-x: auto;\n        display: flex;\n    }\n\n    .p-breadcrumb ol {\n        margin: 0;\n        padding: 0;\n        list-style-type: none;\n        display: flex;\n        align-items: center;\n        flex-wrap: nowrap;\n    }\n\n    .p-breadcrumb .p-menuitem-text {\n        line-height: 1;\n    }\n\n    .p-breadcrumb .p-menuitem-link {\n        text-decoration: none;\n        display: flex;\n        align-items: center;\n    }\n\n    .p-breadcrumb .p-menuitem-separator {\n        display: flex;\n        align-items: center;\n    }\n\n    .p-breadcrumb::-webkit-scrollbar {\n        display: none;\n    }\n}\n";
   var BreadCrumbBase = ComponentBase.extend({
     defaultProps: {
       __TYPE: 'BreadCrumb',
@@ -9736,10 +9765,6 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
           updateModel(event, value);
           var date = value.length ? value[0] : value;
           updateViewDate(event, date);
-          onViewDateSelect({
-            event: event,
-            date: date
-          });
         }
       } catch (err) {
         //invalid date
@@ -10073,6 +10098,7 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
       isClearClicked.current = true;
       updateModel(event, null);
       updateInputfield(null);
+      setCurrentYear(new Date().getFullYear()); // #7581
       hide();
       props.onClearButtonClick && props.onClearButtonClick(event);
     };
@@ -10453,17 +10479,29 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
     };
     var validateDate = function validateDate(value) {
       if (props.yearNavigator) {
+        var _ref3 = props.yearRange ? props.yearRange.split(':').map(function (year) {
+            return parseInt(year, 10);
+          }) : [null, null],
+          _ref4 = _slicedToArray(_ref3, 2),
+          minRangeYear = _ref4[0],
+          maxRangeYear = _ref4[1];
         var viewYear = value.getFullYear();
-        var minRangeYear = props.yearRange ? parseInt(props.yearRange.split(':')[0], 10) : null;
-        var maxRangeYear = props.yearRange ? parseInt(props.yearRange.split(':')[1], 10) : null;
-        var minYear = props.minDate && minRangeYear != null ? Math.max(props.minDate.getFullYear(), minRangeYear) : props.minDate || minRangeYear;
-        var maxYear = props.maxDate && maxRangeYear != null ? Math.min(props.maxDate.getFullYear(), maxRangeYear) : props.maxDate || maxRangeYear;
-        if (minYear && minYear > viewYear) {
-          viewYear = minYear;
+        var minYear = null;
+        var maxYear = null;
+        if (minRangeYear !== null) {
+          minYear = props.minDate ? Math.max(props.minDate.getFullYear(), minRangeYear) : minRangeYear;
+        } else {
+          var _props$minDate;
+          minYear = ((_props$minDate = props.minDate) === null || _props$minDate === void 0 ? void 0 : _props$minDate.getFullYear()) || minRangeYear;
         }
-        if (maxYear && maxYear < viewYear) {
-          viewYear = maxYear;
+        if (maxRangeYear !== null) {
+          maxYear = props.maxDate ? Math.min(props.maxDate.getFullYear(), maxRangeYear) : maxRangeYear;
+        } else {
+          var _props$maxDate;
+          maxYear = ((_props$maxDate = props.maxDate) === null || _props$maxDate === void 0 ? void 0 : _props$maxDate.getFullYear()) || maxRangeYear;
         }
+        if (minYear && minYear > viewYear) viewYear = minYear;
+        if (maxYear && maxYear < viewYear) viewYear = maxYear;
         value.setFullYear(viewYear);
       }
       if (renderMonthsNavigator(0)) {
@@ -10776,7 +10814,7 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
           };
           navBackward(event);
         } else {
-          var prevMonthContainer = overlayRef.current.children[groupIndex - 1];
+          var prevMonthContainer = overlayRef.current.children[0].children[groupIndex - 1];
           var cells = DomHandler.find(prevMonthContainer, 'table td span:not([data-p-disabled="true"])');
           var focusCell = cells[cells.length - 1];
           focusCell.tabIndex = '0';
@@ -10788,7 +10826,7 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
         };
         navForward(event);
       } else {
-        var nextMonthContainer = overlayRef.current.children[groupIndex + 1];
+        var nextMonthContainer = overlayRef.current.children[0].children[groupIndex + 1];
         var _focusCell6 = DomHandler.findSingle(nextMonthContainer, 'table td span:not([data-p-disabled="true"])');
         _focusCell6.tabIndex = '0';
         _focusCell6.focus();
@@ -11034,11 +11072,11 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
           milliseconds = timeMeta.milliseconds;
         } else {
           var time = getCurrentDateTime();
-          var _ref3 = [time.getHours(), time.getMinutes(), time.getSeconds(), time.getMilliseconds()];
-          hours = _ref3[0];
-          minutes = _ref3[1];
-          seconds = _ref3[2];
-          milliseconds = _ref3[3];
+          var _ref5 = [time.getHours(), time.getMinutes(), time.getSeconds(), time.getMilliseconds()];
+          hours = _ref5[0];
+          minutes = _ref5[1];
+          seconds = _ref5[2];
+          milliseconds = _ref5[3];
         }
         date.setHours(hours);
         date.setMinutes(doStepMinute(minutes));
@@ -13070,6 +13108,12 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
       }
       return /*#__PURE__*/React__namespace.createElement(React__namespace.Fragment, null, input, button);
     };
+    var isPastMaxDateWithBuffer = function isPastMaxDateWithBuffer() {
+      var bufferInSeconds = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 10;
+      var now = new Date();
+      var maxDate = props.maxDate;
+      return maxDate < now && Math.abs((now.getTime() - maxDate.getTime()) / 1000) > bufferInSeconds;
+    };
     var createButtonBar = function createButtonBar() {
       if (props.showButtonBar) {
         var _localeOptions11 = localeOptions(props.locale),
@@ -13077,7 +13121,7 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
           clear = _localeOptions11.clear,
           now = _localeOptions11.now;
         var nowDate = new Date();
-        var isHidden = props.minDate && props.minDate > nowDate || props.maxDate && props.maxDate < nowDate;
+        var isHidden = props.minDate && props.minDate > nowDate || props.maxDate && isPastMaxDateWithBuffer();
         var buttonbarProps = mergeProps({
           className: cx('buttonbar')
         }, ptm('buttonbar'));
@@ -18423,7 +18467,6 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
       var submenu = createSubmenu(processedItem, index);
       var actionProps = mergeProps({
         href: item.url || '#',
-        'aria-hidden': true,
         tabIndex: -1,
         className: cx('action', {
           item: item
@@ -21598,6 +21641,7 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
       filter: false,
       filterBy: null,
       filterClearIcon: null,
+      filterDelay: 300,
       filterIcon: null,
       filterInputAutoFocus: false,
       filterLocale: undefined,
@@ -22071,22 +22115,23 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
     var mergeProps = useMergeProps();
     var context = React__namespace.useContext(PrimeReactContext);
     var props = DropdownBase.getProps(inProps, context);
-    var _React$useState = React__namespace.useState(''),
+    var _useDebounce = useDebounce('', props.filterDelay || 0),
+      _useDebounce2 = _slicedToArray(_useDebounce, 3),
+      filterValue = _useDebounce2[0],
+      filterState = _useDebounce2[1],
+      setFilterState = _useDebounce2[2];
+    var _React$useState = React__namespace.useState(false),
       _React$useState2 = _slicedToArray(_React$useState, 2),
-      filterState = _React$useState2[0],
-      setFilterState = _React$useState2[1];
-    var _React$useState3 = React__namespace.useState(false),
+      focusedState = _React$useState2[0],
+      setFocusedState = _React$useState2[1];
+    var _React$useState3 = React__namespace.useState(-1),
       _React$useState4 = _slicedToArray(_React$useState3, 2),
-      focusedState = _React$useState4[0],
-      setFocusedState = _React$useState4[1];
-    var _React$useState5 = React__namespace.useState(-1),
+      focusedOptionIndex = _React$useState4[0],
+      setFocusedOptionIndex = _React$useState4[1];
+    var _React$useState5 = React__namespace.useState(false),
       _React$useState6 = _slicedToArray(_React$useState5, 2),
-      focusedOptionIndex = _React$useState6[0],
-      setFocusedOptionIndex = _React$useState6[1];
-    var _React$useState7 = React__namespace.useState(false),
-      _React$useState8 = _slicedToArray(_React$useState7, 2),
-      overlayVisibleState = _React$useState8[0],
-      setOverlayVisibleState = _React$useState8[1];
+      overlayVisibleState = _React$useState6[0],
+      setOverlayVisibleState = _React$useState6[1];
     var clickedRef = React__namespace.useRef(false);
     var elementRef = React__namespace.useRef(null);
     var overlayRef = React__namespace.useRef(null);
@@ -22147,7 +22192,7 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
     var getVisibleOptions = function getVisibleOptions() {
       var options = props.optionGroupLabel ? flatOptions(props.options) : props.options;
       if (hasFilter && !isLazy) {
-        var filterValue = filterState.trim().toLocaleLowerCase(props.filterLocale);
+        var _filterValue = filterState.trim().toLocaleLowerCase(props.filterLocale);
         var searchFields = props.filterBy ? props.filterBy.split(',') : [props.optionLabel || 'label'];
         if (props.optionGroupLabel) {
           var filteredGroups = [];
@@ -22156,7 +22201,7 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
           try {
             for (_iterator.s(); !(_step = _iterator.n()).done;) {
               var optgroup = _step.value;
-              var filteredSubOptions = FilterService.filter(getOptionGroupChildren(optgroup), searchFields, filterValue, props.filterMatchMode, props.filterLocale);
+              var filteredSubOptions = FilterService.filter(getOptionGroupChildren(optgroup), searchFields, _filterValue, props.filterMatchMode, props.filterLocale);
               if (filteredSubOptions && filteredSubOptions.length) {
                 filteredGroups.push(_objectSpread$1m(_objectSpread$1m({}, optgroup), _defineProperty({}, "".concat(props.optionGroupChildren), filteredSubOptions)));
               }
@@ -22168,7 +22213,7 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
           }
           return flatOptions(filteredGroups);
         }
-        return FilterService.filter(options, searchFields, filterValue, props.filterMatchMode, props.filterLocale);
+        return FilterService.filter(options, searchFields, _filterValue, props.filterMatchMode, props.filterLocale);
       }
       return options;
     };
@@ -22251,7 +22296,6 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
         event.preventDefault();
         return;
       }
-      var metaKey = event.metaKey || event.ctrlKey;
       var code = DomHandler.isAndroid() ? event.key : event.code;
       switch (code) {
         case 'ArrowDown':
@@ -22297,6 +22341,9 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
           //NOOP
           break;
         default:
+          var metaKey = event.metaKey || event.ctrlKey || event.altKey;
+
+          // Only handle printable characters when no meta keys are pressed
           if (!metaKey && ObjectUtils.isPrintableCharacter(event.key)) {
             !overlayVisibleState && !props.editable && show();
             !props.editable && searchOptions(event, event.key);
@@ -22615,6 +22662,7 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
         resetFilter();
       }
       updateEditableLabel();
+      setFocusedOptionIndex(-1);
     };
     var selectItem = function selectItem(event) {
       if (selectedOption !== event.option) {
@@ -22875,8 +22923,7 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
         required: props.required,
         defaultValue: option.value,
         name: props.name,
-        tabIndex: -1,
-        'aria-hidden': 'true'
+        tabIndex: -1
       }, ptm('select'));
       var optionProps = mergeProps({
         value: option.value
@@ -23033,7 +23080,6 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
     var firstHiddenFocusableElementProps = mergeProps({
       ref: firstHiddenFocusableElementOnOverlay,
       role: 'presentation',
-      'aria-hidden': 'true',
       className: 'p-hidden-accessible p-hidden-focusable',
       tabIndex: '0',
       onFocus: onFirstHiddenFocus,
@@ -23043,7 +23089,6 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
     var lastHiddenFocusableElementProps = mergeProps({
       ref: lastHiddenFocusableElementOnOverlay,
       role: 'presentation',
-      'aria-hidden': 'true',
       className: 'p-hidden-accessible p-hidden-focusable',
       tabIndex: '0',
       onFocus: onLastHiddenFocus,
@@ -23058,7 +23103,7 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
     }, props, {
       appendTo: appendTo,
       cx: cx,
-      filterValue: filterState,
+      filterValue: filterValue,
       focusedOptionIndex: focusedOptionIndex,
       getOptionGroupChildren: getOptionGroupChildren,
       getOptionGroupLabel: getOptionGroupLabel,
@@ -24563,6 +24608,8 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
       if (getColumnProp('frozen')) {
         updateStickyPosition();
       }
+    });
+    React__namespace.useEffect(function () {
       if (props.editMode === 'cell' || props.editMode === 'row') {
         focusOnElement();
       }
@@ -25809,8 +25856,7 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
     var selectRangeOnRow = function selectRangeOnRow(event, rowRangeStart, rowRangeEnd) {
       var selection = [];
       for (var i = rowRangeStart; i <= rowRangeEnd; i++) {
-        var _props$value$i;
-        var rangeRowData = (_props$value$i = props.value[i]) !== null && _props$value$i !== void 0 ? _props$value$i : props.tableProps.value[i];
+        var rangeRowData = props.processedData[i];
         if (!isSelectable({
           data: rangeRowData,
           index: i
@@ -26028,7 +26074,8 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
       var event = e.originalEvent;
       var isDraggableHandle = isUnstyled() ? DomHandler.getAttribute(event.target, 'data-pc-section') === 'rowreordericon' || event.target.closest('[data-pc-section="rowreordericon"]') : DomHandler.hasClass(event.target, 'p-datatable-reorderablerow-handle') || event.target.closest('.p-datatable-reorderablerow-handle');
       event.currentTarget.draggable = isDraggableHandle;
-      event.target.draggable = isDraggableHandle;
+      //event.target.draggable = isDraggableHandle;
+
       if (allowRowDrag(e)) {
         enableDragSelection(event);
         anchorRowIndex.current = e.index;
@@ -29860,7 +29907,7 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
         unstyled: props.unstyled
       });
     };
-    var createTableBody = function createTableBody(options, selectionModeInColumn, empty, isVirtualScrollerDisabled) {
+    var createTableBody = function createTableBody(options, selectionModeInColumn, empty, isVirtualScrollerDisabled, processedData) {
       var first = getFirst();
       var rows = options.rows,
         columns = options.columns,
@@ -29921,7 +29968,10 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
         onRowToggle: props.onRowToggle,
         onRowUnselect: props.onRowUnselect,
         onSelectionChange: props.onSelectionChange,
-        paginator: props.paginator,
+        paginator: props.paginator
+        // pass processedData #7546
+        ,
+        processedData: processedData,
         reorderableRows: props.reorderableRows,
         responsiveLayout: props.responsiveLayout,
         rowClassName: props.rowClassName,
@@ -30003,7 +30053,10 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
         onRowToggle: props.onRowToggle,
         onRowUnselect: props.onRowUnselect,
         onSelectionChange: props.onSelectionChange,
-        paginator: props.paginator,
+        paginator: props.paginator
+        // pass processedData #7546
+        ,
+        processedData: processedData,
         reorderableRows: props.reorderableRows,
         responsiveLayout: props.responsiveLayout,
         rowClassName: props.rowClassName,
@@ -30097,7 +30150,7 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
             options.spacerRef && options.spacerRef(el);
           };
           var tableHeader = createTableHeader(options, empty, _isVirtualScrollerDisabled);
-          var tableBody = createTableBody(options, selectionModeInColumn, empty, _isVirtualScrollerDisabled);
+          var tableBody = createTableBody(options, selectionModeInColumn, empty, _isVirtualScrollerDisabled, processedData);
           var tableFooter = createTableFooter(options);
           var tableProps = mergeProps({
             className: classNames(props.tableClassName, ptCallbacks.cx('table')),
@@ -30578,7 +30631,11 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
       var content = null;
       if (props.listTemplate) {
         var items = getItems(value);
-        content = ObjectUtils.getJSXElement(props.listTemplate, items, props.layout);
+        if (ObjectUtils.isNotEmpty(items)) {
+          content = ObjectUtils.getJSXElement(props.listTemplate, items, props.layout);
+        } else {
+          content = createEmptyMessage();
+        }
       } else {
         var _items = createItems(value);
         var gridProps = mergeProps({
@@ -31013,7 +31070,6 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
         className: cx('action', {
           disabled: disabled
         }),
-        'aria-hidden': 'true',
         tabIndex: -1,
         target: target,
         'data-pr-tooltip': label,
@@ -35902,7 +35958,7 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
         resize(true);
       }
       // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [props.autoResize]);
+    }, [props.autoResize, props.value]);
     var isFilled = React__namespace.useMemo(function () {
       return ObjectUtils.isNotEmpty(props.value) || ObjectUtils.isNotEmpty(props.defaultValue);
     }, [props.value, props.defaultValue]);
@@ -38251,8 +38307,7 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
           item: item
         }),
         target: item.target,
-        tabIndex: '-1',
-        'aria-hidden': true
+        tabIndex: '-1'
       }, getPTOptions(processedItem, 'action', index));
       var isFocused = isItemFocused(processedItem);
       var isDisabled = isItemDisabled(processedItem);
@@ -39524,7 +39579,6 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
         target: item.target,
         tabIndex: '-1',
         'aria-label': item.label,
-        'aria-hidden': true,
         'aria-disabled': item.disabled,
         'data-p-disabled': item.disabled
       }, getMenuItemPTOptions('action', menuContext));
@@ -39851,7 +39905,6 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
       var actionProps = mergeProps({
         href: item.url || '#',
         tabIndex: '-1',
-        'aria-hidden': 'true',
         className: cx('action', {
           disabled: disabled
         }),
@@ -41023,6 +41076,7 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
       emptyMessage: null,
       filter: false,
       filterBy: null,
+      filterDelay: 300,
       filterInputAutoFocus: true,
       filterLocale: undefined,
       selectOnFocus: false,
@@ -41432,11 +41486,13 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
       }), emptyMessage);
     };
     var createItem = function createItem(option, index) {
+      var _option$items;
       var scrollerOptions = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
       var style = {
         height: scrollerOptions.props ? scrollerOptions.props.itemSize : undefined
       };
-      if (option.group && props.optionGroupLabel) {
+      var isItemGroup = option.group === true && props.optionGroupLabel && ((_option$items = option.items) === null || _option$items === void 0 ? void 0 : _option$items.length) > 0;
+      if (isItemGroup) {
         var groupContent = props.optionGroupTemplate ? ObjectUtils.getJSXElement(props.optionGroupTemplate, option, index) : props.getOptionGroupLabel(option);
         var key = index + '_' + props.getOptionGroupRenderKey(option);
         var itemGroupProps = mergeProps({
@@ -41570,7 +41626,6 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
       var firstHiddenElementProps = mergeProps({
         ref: props.firstHiddenFocusableElementOnOverlay,
         role: 'presentation',
-        'aria-hidden': 'true',
         className: 'p-hidden-accessible p-hidden-focusable',
         tabIndex: '0',
         onFocus: props.onFirstHiddenFocus,
@@ -41580,7 +41635,6 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
       var lastHiddenElementProps = mergeProps({
         ref: props.lastHiddenFocusableElementOnOverlay,
         role: 'presentation',
-        'aria-hidden': 'true',
         className: 'p-hidden-accessible p-hidden-focusable',
         tabIndex: '0',
         onFocus: props.onLastHiddenFocus,
@@ -41621,22 +41675,23 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
       _React$useState4 = _slicedToArray(_React$useState3, 2),
       clicked = _React$useState4[0],
       setClicked = _React$useState4[1];
-    var _React$useState5 = React__namespace.useState(''),
+    var _useDebounce = useDebounce('', props.filterDelay || 0),
+      _useDebounce2 = _slicedToArray(_useDebounce, 3),
+      filterValue = _useDebounce2[0],
+      filterState = _useDebounce2[1],
+      setFilterState = _useDebounce2[2];
+    var _React$useState5 = React__namespace.useState(-1),
       _React$useState6 = _slicedToArray(_React$useState5, 2),
-      filterState = _React$useState6[0],
-      setFilterState = _React$useState6[1];
-    var _React$useState7 = React__namespace.useState(-1),
+      startRangeIndex = _React$useState6[0],
+      setStartRangeIndex = _React$useState6[1];
+    var _React$useState7 = React__namespace.useState(false),
       _React$useState8 = _slicedToArray(_React$useState7, 2),
-      startRangeIndex = _React$useState8[0],
-      setStartRangeIndex = _React$useState8[1];
-    var _React$useState9 = React__namespace.useState(false),
+      focusedState = _React$useState8[0],
+      setFocusedState = _React$useState8[1];
+    var _React$useState9 = React__namespace.useState(props.inline),
       _React$useState10 = _slicedToArray(_React$useState9, 2),
-      focusedState = _React$useState10[0],
-      setFocusedState = _React$useState10[1];
-    var _React$useState11 = React__namespace.useState(props.inline),
-      _React$useState12 = _slicedToArray(_React$useState11, 2),
-      overlayVisibleState = _React$useState12[0],
-      setOverlayVisibleState = _React$useState12[1];
+      overlayVisibleState = _React$useState10[0],
+      setOverlayVisibleState = _React$useState10[1];
     var elementRef = React__namespace.useRef(null);
     var searchValue = React__namespace.useRef(null);
     var searchTimeout = React__namespace.useRef(null);
@@ -42426,7 +42481,7 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
     var getVisibleOptions = function getVisibleOptions() {
       var options = props.optionGroupLabel ? flatOptions(props.options) : props.options;
       if (hasFilter) {
-        var filterValue = filterState.trim().toLocaleLowerCase(props.filterLocale);
+        var _filterValue = filterState.trim().toLocaleLowerCase(props.filterLocale);
         var searchFields = props.filterBy ? props.filterBy.split(',') : [props.optionLabel || 'label'];
         if (props.optionGroupLabel) {
           var filteredGroups = [];
@@ -42435,7 +42490,7 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
           try {
             for (_iterator2.s(); !(_step2 = _iterator2.n()).done;) {
               var optgroup = _step2.value;
-              var filteredSubOptions = FilterService.filter(getOptionGroupChildren(optgroup), searchFields, filterValue, props.filterMatchMode, props.filterLocale);
+              var filteredSubOptions = FilterService.filter(getOptionGroupChildren(optgroup), searchFields, _filterValue, props.filterMatchMode, props.filterLocale);
               if (filteredSubOptions && filteredSubOptions.length) {
                 filteredGroups.push(_objectSpread$J(_objectSpread$J({}, optgroup), _defineProperty({}, props.optionGroupChildren, filteredSubOptions)));
               }
@@ -42447,7 +42502,7 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
           }
           return flatOptions(filteredGroups);
         }
-        return FilterService.filter(options, searchFields, filterValue, props.filterMatchMode, props.filterLocale);
+        return FilterService.filter(options, searchFields, _filterValue, props.filterMatchMode, props.filterLocale);
       }
       return options;
     };
@@ -42465,8 +42520,6 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
       }, []);
     };
     var onClearIconKeyDown = function onClearIconKeyDown(event) {
-      event.preventDefault();
-      event.stopPropagation();
       switch (event.code) {
         case 'Space':
         case 'NumpadEnter':
@@ -42475,6 +42528,8 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
             break;
           }
           updateModel(event, [], []);
+          event.preventDefault();
+          event.stopPropagation();
           break;
       }
     };
@@ -42637,7 +42692,7 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
     }, props, {
       onClick: onPanelClick,
       onOverlayHide: hide,
-      filterValue: filterState,
+      filterValue: filterValue,
       focusedOptionIndex: focusedOptionIndex,
       onFirstHiddenFocus: onFirstHiddenFocus,
       onLastHiddenFocus: onLastHiddenFocus,
@@ -44937,8 +44992,7 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
         onFocus: function onFocus(event) {
           return event.stopPropagation();
         },
-        tabIndex: '-1',
-        'aria-hidden': true
+        tabIndex: '-1'
       }, getPTOptions(processedItem, 'action', index));
       var content = /*#__PURE__*/React__namespace.createElement("a", actionProps, submenuIcon, icon, label, /*#__PURE__*/React__namespace.createElement(Ripple, null));
       if (item.template) {
@@ -47162,6 +47216,8 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
         originalEvent: originalEvent,
         value: selectedValue
       }, 'targetSelection', props.onTargetSelectionChange);
+      setTargetSelectionState([]);
+      setSourceSelectionState([]);
       handleChange(event, source, target);
     };
     var scrollInView = function scrollInView(listContainer) {
@@ -47180,11 +47236,6 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
       if (callback) {
         callback(e);
       }
-      if (ObjectUtils.isNotEmpty(sourceSelection) && stateKey === 'targetSelection') {
-        setSourceSelectionState([]);
-      } else if (ObjectUtils.isNotEmpty(targetSelection) && stateKey === 'sourceSelection') {
-        setTargetSelectionState([]);
-      }
     };
     var onFilter = function onFilter(event) {
       var originalEvent = event.originalEvent,
@@ -47337,10 +47388,26 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
             }
             _onSelectionChange({
               originalEvent: event,
-              value: _toConsumableArray(sourceList)
+              value: isSource ? _toConsumableArray(sourceList) : _toConsumableArray(targetList)
             }, isSource ? 'sourceSelection' : 'targetSelection', isSource ? props.onSourceSelectionChange : props.onTargetSelectionChange);
             event.preventDefault();
           }
+          break;
+        case 'KeyD':
+          if (event.ctrlKey) {
+            var _isSource = type === 'source';
+            if (_isSource) {
+              setSourceSelectionState([]);
+            } else {
+              setTargetSelectionState([]);
+            }
+            _onSelectionChange({
+              originalEvent: event,
+              value: []
+            }, _isSource ? 'sourceSelection' : 'targetSelection', _isSource ? props.onSourceSelectionChange : props.onTargetSelectionChange);
+            event.preventDefault();
+          }
+          break;
       }
     };
     var onArrowDownKey = function onArrowDownKey(event, type) {
@@ -51019,7 +51086,6 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
       var submenu = createSubmenu(processedItem, index);
       var actionProps = mergeProps({
         href: url || '#',
-        'aria-hidden': true,
         tabIndex: '-1',
         onFocus: function onFocus(event) {
           return event.stopPropagation();
@@ -55490,10 +55556,10 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
     var rootProps = mergeProps({
       ref: elementRef,
       id: props.id,
-      className: classNames(props.className, cx('root', {
+      className: cx('root', {
         hasIcon: hasIcon,
         hasLabel: hasLabel
-      })),
+      }),
       'data-p-highlight': props.checked,
       'data-p-disabled': props.disabled
     }, ToggleButtonBase.getOtherProps(props), ptm('root'));
@@ -55516,10 +55582,10 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
       checked: props.checked
     }, ptm('input'));
     var boxProps = mergeProps({
-      className: cx('box', {
+      className: classNames(props.className, cx('box', {
         hasIcon: hasIcon,
         hasLabel: hasLabel
-      })
+      }))
     }, ptm('box'));
     return /*#__PURE__*/React__namespace.createElement(React__namespace.Fragment, null, /*#__PURE__*/React__namespace.createElement("div", rootProps, /*#__PURE__*/React__namespace.createElement("input", inputProps), /*#__PURE__*/React__namespace.createElement("div", boxProps, iconElement, /*#__PURE__*/React__namespace.createElement("span", labelProps, label), /*#__PURE__*/React__namespace.createElement(Ripple, null))), hasTooltip && /*#__PURE__*/React__namespace.createElement(Tooltip, _extends({
       target: elementRef,
@@ -55614,9 +55680,9 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
     searchIcon: 'p-tree-filter-icon',
     container: 'p-tree-container',
     node: function node(_ref2) {
-      var isLeaf = _ref2.isLeaf;
+      var leaf = _ref2.leaf;
       return classNames('p-treenode', {
-        'p-treenode-leaf': isLeaf
+        'p-treenode-leaf': leaf
       });
     },
     content: function content(_ref3) {
@@ -55669,6 +55735,7 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
       expandedKeys: null,
       filter: false,
       filterBy: 'label',
+      filterDelay: 300,
       filterIcon: null,
       filterLocale: undefined,
       filterMode: 'lenient',
@@ -55720,7 +55787,7 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
     var mergeProps = useMergeProps();
     var isLeaf = props.isNodeLeaf(props.node);
     var label = props.node.label;
-    var expanded = (props.expandedKeys ? props.expandedKeys[props.node.key] !== undefined : false) || props.node.expanded;
+    var expanded = props.expandedKeys ? props.expandedKeys[props.node.key] !== undefined : false;
     var ptm = props.ptm,
       cx = props.cx;
     var getPTOptions = function getPTOptions(key) {
@@ -55730,7 +55797,7 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
           selected: !isCheckboxSelectionMode() ? isSelected() : false,
           expanded: expanded || false,
           checked: isCheckboxSelectionMode() ? isChecked() : false,
-          isLeaf: isLeaf
+          leaf: isLeaf
         }
       });
     };
@@ -56489,7 +56556,7 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
       var nodeProps = mergeProps({
         ref: elementRef,
         className: classNames(props.node.className, cx('node', {
-          isLeaf: isLeaf
+          leaf: isLeaf
         })),
         style: props.node.style,
         tabIndex: tabIndex,
@@ -56524,20 +56591,27 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
     var mergeProps = useMergeProps();
     var context = React__namespace.useContext(PrimeReactContext);
     var props = TreeBase.getProps(inProps, context);
-    var _React$useState = React__namespace.useState(''),
+    var _useDebounce = useDebounce('', props.filterDelay || 0),
+      _useDebounce2 = _slicedToArray(_useDebounce, 3),
+      filterValue = _useDebounce2[0],
+      filterValueState = _useDebounce2[1],
+      setFilterValueState = _useDebounce2[2];
+    var _React$useState = React__namespace.useState(props.expandedKeys),
       _React$useState2 = _slicedToArray(_React$useState, 2),
-      filterValueState = _React$useState2[0],
-      setFilterValueState = _React$useState2[1];
-    var _React$useState3 = React__namespace.useState(props.expandedKeys),
+      expandedKeysState = _React$useState2[0],
+      setExpandedKeysState = _React$useState2[1];
+    var _React$useState3 = React__namespace.useState({}),
       _React$useState4 = _slicedToArray(_React$useState3, 2),
-      expandedKeysState = _React$useState4[0],
-      setExpandedKeysState = _React$useState4[1];
+      filterExpandedKeys = _React$useState4[0],
+      setFilterExpandedKeys = _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 isFiltering = props.filter && filteredValue;
+    var expandedKeys = isFiltering ? filterExpandedKeys : props.onToggle ? props.expandedKeys : expandedKeysState;
+    var currentFilterExpandedKeys = {};
     var childFocusEvent = React__namespace.useRef(null);
     var _TreeBase$setMetaData = TreeBase.setMetaData({
         props: props,
@@ -56576,7 +56650,11 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
         if (navigateFocusToChild) {
           childFocusEvent.current = originalEvent;
         }
-        setExpandedKeysState(value);
+        if (isFiltering) {
+          setFilterExpandedKeys(value);
+        } else {
+          setExpandedKeysState(value);
+        }
       }
     };
     useUpdateEffect(function () {
@@ -56599,6 +56677,10 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
         childFocusEvent.current = null;
       }
     }, [expandedKeys]);
+    React__namespace.useEffect(function () {
+      if (props.filter) _filter();
+      // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [filteredValue, props.value, props.filter]);
     var onDragStart = function onDragStart(event) {
       dragState.current = {
         path: event.path,
@@ -56780,12 +56862,9 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
     };
     var filter = function filter(value) {
       setFilterValueState(ObjectUtils.isNotEmpty(value) ? value : '');
-      _filter();
     };
     var _filter = function _filter() {
-      if (!filterChanged.current) {
-        return;
-      }
+      if (!filterChanged.current) return;
       if (ObjectUtils.isEmpty(filteredValue)) {
         filteredNodes.current = props.value;
       } else {
@@ -56814,6 +56893,7 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
           _iterator.f();
         }
       }
+      setFilterExpandedKeys(currentFilterExpandedKeys);
       filterChanged.current = false;
     };
     var findFilteredNodes = function findFilteredNodes(node, paramsWithoutNode) {
@@ -56840,7 +56920,7 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
           }
         }
         if (matched) {
-          node.expanded = true;
+          currentFilterExpandedKeys[node.key] = true;
           return true;
         }
       }
@@ -56957,10 +57037,7 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
     };
     var createModel = function createModel() {
       if (props.value) {
-        if (props.filter) {
-          filterChanged.current = true;
-          _filter();
-        }
+        if (props.filter) filterChanged.current = true;
         var value = getRootNode();
         if (value.length > 0) {
           var rootNodes = createRootChildren(value);
@@ -56991,7 +57068,8 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
     };
     var createFilter = function createFilter() {
       if (props.filter) {
-        var value = ObjectUtils.isNotEmpty(filteredValue) ? filteredValue : '';
+        var value = props.onFilterValueChange ? props.filterValue : filterValue;
+        value = ObjectUtils.isNotEmpty(value) ? value : '';
         var searchIconProps = mergeProps({
           className: cx('searchIcon')
         }, ptm('searchIcon'));
@@ -57147,6 +57225,7 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
       expandedKeys: null,
       filter: false,
       filterBy: 'label',
+      filterDelay: 300,
       filterIcon: null,
       filterInputAutoFocus: true,
       filterLocale: undefined,
@@ -57279,10 +57358,11 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
       _React$useState6 = _slicedToArray(_React$useState5, 2),
       expandedKeysState = _React$useState6[0],
       setExpandedKeysState = _React$useState6[1];
-    var _React$useState7 = React__namespace.useState(''),
-      _React$useState8 = _slicedToArray(_React$useState7, 2),
-      filterValueState = _React$useState8[0],
-      setFilterValueState = _React$useState8[1];
+    var _useDebounce = useDebounce('', props.filterDelay || 0),
+      _useDebounce2 = _slicedToArray(_useDebounce, 3);
+      _useDebounce2[0];
+      var filterValueState = _useDebounce2[1],
+      setFilterValueState = _useDebounce2[2];
     var elementRef = React__namespace.useRef(null);
     var overlayRef = React__namespace.useRef(null);
     var filterInputRef = React__namespace.useRef(null);
@@ -57845,6 +57925,7 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
         expandedKeys: expandedKeys,
         filter: props.filter,
         filterBy: props.filterBy,
+        filterDelay: props.filterDelay,
         filterLocale: props.filterLocale,
         filterMode: props.filterMode,
         filterPlaceholder: props.filterPlaceholder,
@@ -57871,14 +57952,15 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
     };
     var createFilterElement = function createFilterElement() {
       if (props.filter) {
-        var filterValue = ObjectUtils.isNotEmpty(filteredValue) ? filteredValue : '';
+        var _filterValue = props.onFilterValueChange ? props.filterValue : filteredValue;
+        _filterValue = ObjectUtils.isNotEmpty(_filterValue) ? _filterValue : '';
         var filterContainerProps = mergeProps({
           className: cx('filterContainer')
         }, ptm('filterContainer'));
         var filterProps = mergeProps({
           ref: filterInputRef,
           type: 'text',
-          value: filterValue,
+          value: _filterValue,
           autoComplete: 'off',
           className: cx('filter'),
           placeholder: props.filterPlaceholder,
@@ -58100,7 +58182,7 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
       return {
         'p-highlight': isSelected(),
         'p-highlight-contextmenu': props.contextMenuSelectionKey && props.contextMenuSelectionKey === props.node.key,
-        'p-row-odd': props.rowIndex % 2 !== 0
+        'p-row-odd': parseInt(String(props.rowIndex).split('_').pop(), 10) % 2 !== 0
       };
     },
     rowCheckbox: function rowCheckbox(_ref6) {