primereact 10.9.1 → 10.9.2

package/primereact.all.esm.js

@@ -795,34 +795,58 @@ var DomHandler = /*#__PURE__*/function () {
       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 {
@@ -840,7 +864,7 @@ var DomHandler = /*#__PURE__*/function () {
               }
             }
 
-            // BODY
+            // Check if the parent itself is scrollable
             if (parent.nodeType === 1 && overflowCheck(parent)) {
               addScrollableParent(parent);
             }
@@ -852,11 +876,11 @@ var DomHandler = /*#__PURE__*/function () {
         }
       }
 
-      // 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;
     }
@@ -4726,7 +4750,7 @@ var useUpdateEffect = function useUpdateEffect(fn, deps) {
 
 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";
@@ -6032,8 +6056,9 @@ var Tooltip = /*#__PURE__*/React.memo(/*#__PURE__*/React.forwardRef(function (in
   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
       });
@@ -6044,7 +6069,6 @@ var Tooltip = /*#__PURE__*/React.memo(/*#__PURE__*/React.forwardRef(function (in
           }
           ZIndexUtils.clear(elementRef.current);
           DomHandler.removeClass(elementRef.current, 'p-tooltip-active');
-          setVisibleState(false);
           sendCallback(props.onHide, {
             originalEvent: e,
             target: currentTargetRef.current
@@ -6052,6 +6076,11 @@ var Tooltip = /*#__PURE__*/React.memo(/*#__PURE__*/React.forwardRef(function (in
         });
       }
     }
+
+    // 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;
@@ -7539,7 +7568,7 @@ var VirtualScroller = /*#__PURE__*/React.memo(/*#__PURE__*/React.forwardRef(func
     }
   };
   var init = function init() {
-    if (!props.disabled && isVisible(elementRef.current)) {
+    if (!props.disabled && DomHandler.isVisible(elementRef.current)) {
       setSize();
       calculateOptions();
       setSpacerSize();
@@ -7553,7 +7582,7 @@ var VirtualScroller = /*#__PURE__*/React.memo(/*#__PURE__*/React.forwardRef(func
     return false;
   };
   React.useEffect(function () {
-    if (!viewInitialized.current && isVisible(elementRef.current)) {
+    if (!viewInitialized.current && isVisible()) {
       viewInit();
       viewInitialized.current = true;
     }
@@ -7920,7 +7949,7 @@ var AutoCompletePanel = /*#__PURE__*/React.memo(/*#__PURE__*/React.forwardRef(fu
       var emptyMessage = props.emptyMessage || localeOption('emptyMessage');
       var emptyMessageProps = mergeProps({
         className: cx('emptyMessage')
-      }, _ptm('emptyMesage'));
+      }, _ptm('emptyMessage'));
       var _listProps = mergeProps({
         className: cx('list')
       }, _ptm('list'));
@@ -8165,9 +8194,9 @@ var AutoComplete = /*#__PURE__*/React.memo(/*#__PURE__*/React.forwardRef(functio
   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;
@@ -9029,7 +9058,7 @@ var classes$18 = {
   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',
@@ -9715,10 +9744,6 @@ var Calendar = /*#__PURE__*/React.memo(/*#__PURE__*/React.forwardRef(function (i
         updateModel(event, value);
         var date = value.length ? value[0] : value;
         updateViewDate(event, date);
-        onViewDateSelect({
-          event: event,
-          date: date
-        });
       }
     } catch (err) {
       //invalid date
@@ -10052,6 +10077,7 @@ var Calendar = /*#__PURE__*/React.memo(/*#__PURE__*/React.forwardRef(function (i
     isClearClicked.current = true;
     updateModel(event, null);
     updateInputfield(null);
+    setCurrentYear(new Date().getFullYear()); // #7581
     hide();
     props.onClearButtonClick && props.onClearButtonClick(event);
   };
@@ -10432,17 +10458,29 @@ var Calendar = /*#__PURE__*/React.memo(/*#__PURE__*/React.forwardRef(function (i
   };
   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)) {
@@ -10755,7 +10793,7 @@ var Calendar = /*#__PURE__*/React.memo(/*#__PURE__*/React.forwardRef(function (i
         };
         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';
@@ -10767,7 +10805,7 @@ var Calendar = /*#__PURE__*/React.memo(/*#__PURE__*/React.forwardRef(function (i
       };
       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();
@@ -11013,11 +11051,11 @@ var Calendar = /*#__PURE__*/React.memo(/*#__PURE__*/React.forwardRef(function (i
         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));
@@ -13049,6 +13087,12 @@ var Calendar = /*#__PURE__*/React.memo(/*#__PURE__*/React.forwardRef(function (i
     }
     return /*#__PURE__*/React.createElement(React.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),
@@ -13056,7 +13100,7 @@ var Calendar = /*#__PURE__*/React.memo(/*#__PURE__*/React.forwardRef(function (i
         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'));
@@ -18402,7 +18446,6 @@ var ContextMenuSub = /*#__PURE__*/React.memo(/*#__PURE__*/React.forwardRef(funct
     var submenu = createSubmenu(processedItem, index);
     var actionProps = mergeProps({
       href: item.url || '#',
-      'aria-hidden': true,
       tabIndex: -1,
       className: cx('action', {
         item: item
@@ -21577,6 +21620,7 @@ var DropdownBase = ComponentBase.extend({
     filter: false,
     filterBy: null,
     filterClearIcon: null,
+    filterDelay: 300,
     filterIcon: null,
     filterInputAutoFocus: false,
     filterLocale: undefined,
@@ -22050,22 +22094,23 @@ var Dropdown = /*#__PURE__*/React.memo(/*#__PURE__*/React.forwardRef(function (i
   var mergeProps = useMergeProps();
   var context = React.useContext(PrimeReactContext);
   var props = DropdownBase.getProps(inProps, context);
-  var _React$useState = React.useState(''),
+  var _useDebounce = useDebounce('', props.filterDelay || 0),
+    _useDebounce2 = _slicedToArray(_useDebounce, 3),
+    filterValue = _useDebounce2[0],
+    filterState = _useDebounce2[1],
+    setFilterState = _useDebounce2[2];
+  var _React$useState = React.useState(false),
     _React$useState2 = _slicedToArray(_React$useState, 2),
-    filterState = _React$useState2[0],
-    setFilterState = _React$useState2[1];
-  var _React$useState3 = React.useState(false),
+    focusedState = _React$useState2[0],
+    setFocusedState = _React$useState2[1];
+  var _React$useState3 = React.useState(-1),
     _React$useState4 = _slicedToArray(_React$useState3, 2),
-    focusedState = _React$useState4[0],
-    setFocusedState = _React$useState4[1];
-  var _React$useState5 = React.useState(-1),
+    focusedOptionIndex = _React$useState4[0],
+    setFocusedOptionIndex = _React$useState4[1];
+  var _React$useState5 = React.useState(false),
     _React$useState6 = _slicedToArray(_React$useState5, 2),
-    focusedOptionIndex = _React$useState6[0],
-    setFocusedOptionIndex = _React$useState6[1];
-  var _React$useState7 = React.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.useRef(false);
   var elementRef = React.useRef(null);
   var overlayRef = React.useRef(null);
@@ -22126,7 +22171,7 @@ var Dropdown = /*#__PURE__*/React.memo(/*#__PURE__*/React.forwardRef(function (i
   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 = [];
@@ -22135,7 +22180,7 @@ var Dropdown = /*#__PURE__*/React.memo(/*#__PURE__*/React.forwardRef(function (i
         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)));
             }
@@ -22147,7 +22192,7 @@ var Dropdown = /*#__PURE__*/React.memo(/*#__PURE__*/React.forwardRef(function (i
         }
         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;
   };
@@ -22230,7 +22275,6 @@ var Dropdown = /*#__PURE__*/React.memo(/*#__PURE__*/React.forwardRef(function (i
       event.preventDefault();
       return;
     }
-    var metaKey = event.metaKey || event.ctrlKey;
     var code = DomHandler.isAndroid() ? event.key : event.code;
     switch (code) {
       case 'ArrowDown':
@@ -22276,6 +22320,9 @@ var Dropdown = /*#__PURE__*/React.memo(/*#__PURE__*/React.forwardRef(function (i
         //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);
@@ -22594,6 +22641,7 @@ var Dropdown = /*#__PURE__*/React.memo(/*#__PURE__*/React.forwardRef(function (i
       resetFilter();
     }
     updateEditableLabel();
+    setFocusedOptionIndex(-1);
   };
   var selectItem = function selectItem(event) {
     if (selectedOption !== event.option) {
@@ -22854,8 +22902,7 @@ var Dropdown = /*#__PURE__*/React.memo(/*#__PURE__*/React.forwardRef(function (i
       required: props.required,
       defaultValue: option.value,
       name: props.name,
-      tabIndex: -1,
-      'aria-hidden': 'true'
+      tabIndex: -1
     }, ptm('select'));
     var optionProps = mergeProps({
       value: option.value
@@ -23012,7 +23059,6 @@ var Dropdown = /*#__PURE__*/React.memo(/*#__PURE__*/React.forwardRef(function (i
   var firstHiddenFocusableElementProps = mergeProps({
     ref: firstHiddenFocusableElementOnOverlay,
     role: 'presentation',
-    'aria-hidden': 'true',
     className: 'p-hidden-accessible p-hidden-focusable',
     tabIndex: '0',
     onFocus: onFirstHiddenFocus,
@@ -23022,7 +23068,6 @@ var Dropdown = /*#__PURE__*/React.memo(/*#__PURE__*/React.forwardRef(function (i
   var lastHiddenFocusableElementProps = mergeProps({
     ref: lastHiddenFocusableElementOnOverlay,
     role: 'presentation',
-    'aria-hidden': 'true',
     className: 'p-hidden-accessible p-hidden-focusable',
     tabIndex: '0',
     onFocus: onLastHiddenFocus,
@@ -23037,7 +23082,7 @@ var Dropdown = /*#__PURE__*/React.memo(/*#__PURE__*/React.forwardRef(function (i
   }, props, {
     appendTo: appendTo,
     cx: cx,
-    filterValue: filterState,
+    filterValue: filterValue,
     focusedOptionIndex: focusedOptionIndex,
     getOptionGroupChildren: getOptionGroupChildren,
     getOptionGroupLabel: getOptionGroupLabel,
@@ -24542,6 +24587,8 @@ var BodyCell = /*#__PURE__*/React.memo(function (props) {
     if (getColumnProp('frozen')) {
       updateStickyPosition();
     }
+  });
+  React.useEffect(function () {
     if (props.editMode === 'cell' || props.editMode === 'row') {
       focusOnElement();
     }
@@ -25788,8 +25835,7 @@ var TableBody = /*#__PURE__*/React.memo(/*#__PURE__*/React.forwardRef(function (
   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
@@ -26007,7 +26053,8 @@ var TableBody = /*#__PURE__*/React.memo(/*#__PURE__*/React.forwardRef(function (
     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;
@@ -29839,7 +29886,7 @@ var DataTable = /*#__PURE__*/React.forwardRef(function (inProps, ref) {
       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,
@@ -29900,7 +29947,10 @@ var DataTable = /*#__PURE__*/React.forwardRef(function (inProps, ref) {
       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,
@@ -29982,7 +30032,10 @@ var DataTable = /*#__PURE__*/React.forwardRef(function (inProps, ref) {
       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,
@@ -30076,7 +30129,7 @@ var DataTable = /*#__PURE__*/React.forwardRef(function (inProps, ref) {
           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')),
@@ -30557,7 +30610,11 @@ var DataView = /*#__PURE__*/React.memo(/*#__PURE__*/React.forwardRef(function (i
     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({
@@ -30992,7 +31049,6 @@ var Dock = /*#__PURE__*/React.memo(/*#__PURE__*/React.forwardRef(function (inPro
       className: cx('action', {
         disabled: disabled
       }),
-      'aria-hidden': 'true',
       tabIndex: -1,
       target: target,
       'data-pr-tooltip': label,
@@ -35881,7 +35937,7 @@ var InputTextarea = /*#__PURE__*/React.memo(/*#__PURE__*/React.forwardRef(functi
       resize(true);
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [props.autoResize]);
+  }, [props.autoResize, props.value]);
   var isFilled = React.useMemo(function () {
     return ObjectUtils.isNotEmpty(props.value) || ObjectUtils.isNotEmpty(props.defaultValue);
   }, [props.value, props.defaultValue]);
@@ -38230,8 +38286,7 @@ var MegaMenu = /*#__PURE__*/React.memo(/*#__PURE__*/React.forwardRef(function (i
         item: item
       }),
       target: item.target,
-      tabIndex: '-1',
-      'aria-hidden': true
+      tabIndex: '-1'
     }, getPTOptions(processedItem, 'action', index));
     var isFocused = isItemFocused(processedItem);
     var isDisabled = isItemDisabled(processedItem);
@@ -39503,7 +39558,6 @@ var Menu = /*#__PURE__*/React.memo(/*#__PURE__*/React.forwardRef(function (inPro
       target: item.target,
       tabIndex: '-1',
       'aria-label': item.label,
-      'aria-hidden': true,
       'aria-disabled': item.disabled,
       'data-p-disabled': item.disabled
     }, getMenuItemPTOptions('action', menuContext));
@@ -39830,7 +39884,6 @@ var MenubarSub = /*#__PURE__*/React.memo(/*#__PURE__*/React.forwardRef(function
     var actionProps = mergeProps({
       href: item.url || '#',
       tabIndex: '-1',
-      'aria-hidden': 'true',
       className: cx('action', {
         disabled: disabled
       }),
@@ -41002,6 +41055,7 @@ var MultiSelectBase = ComponentBase.extend({
     emptyMessage: null,
     filter: false,
     filterBy: null,
+    filterDelay: 300,
     filterInputAutoFocus: true,
     filterLocale: undefined,
     selectOnFocus: false,
@@ -41411,11 +41465,13 @@ var MultiSelectPanel = /*#__PURE__*/React.memo(/*#__PURE__*/React.forwardRef(fun
     }), 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({
@@ -41549,7 +41605,6 @@ var MultiSelectPanel = /*#__PURE__*/React.memo(/*#__PURE__*/React.forwardRef(fun
     var firstHiddenElementProps = mergeProps({
       ref: props.firstHiddenFocusableElementOnOverlay,
       role: 'presentation',
-      'aria-hidden': 'true',
       className: 'p-hidden-accessible p-hidden-focusable',
       tabIndex: '0',
       onFocus: props.onFirstHiddenFocus,
@@ -41559,7 +41614,6 @@ var MultiSelectPanel = /*#__PURE__*/React.memo(/*#__PURE__*/React.forwardRef(fun
     var lastHiddenElementProps = mergeProps({
       ref: props.lastHiddenFocusableElementOnOverlay,
       role: 'presentation',
-      'aria-hidden': 'true',
       className: 'p-hidden-accessible p-hidden-focusable',
       tabIndex: '0',
       onFocus: props.onLastHiddenFocus,
@@ -41600,22 +41654,23 @@ var MultiSelect = /*#__PURE__*/React.memo(/*#__PURE__*/React.forwardRef(function
     _React$useState4 = _slicedToArray(_React$useState3, 2),
     clicked = _React$useState4[0],
     setClicked = _React$useState4[1];
-  var _React$useState5 = React.useState(''),
+  var _useDebounce = useDebounce('', props.filterDelay || 0),
+    _useDebounce2 = _slicedToArray(_useDebounce, 3),
+    filterValue = _useDebounce2[0],
+    filterState = _useDebounce2[1],
+    setFilterState = _useDebounce2[2];
+  var _React$useState5 = React.useState(-1),
     _React$useState6 = _slicedToArray(_React$useState5, 2),
-    filterState = _React$useState6[0],
-    setFilterState = _React$useState6[1];
-  var _React$useState7 = React.useState(-1),
+    startRangeIndex = _React$useState6[0],
+    setStartRangeIndex = _React$useState6[1];
+  var _React$useState7 = React.useState(false),
     _React$useState8 = _slicedToArray(_React$useState7, 2),
-    startRangeIndex = _React$useState8[0],
-    setStartRangeIndex = _React$useState8[1];
-  var _React$useState9 = React.useState(false),
+    focusedState = _React$useState8[0],
+    setFocusedState = _React$useState8[1];
+  var _React$useState9 = React.useState(props.inline),
     _React$useState10 = _slicedToArray(_React$useState9, 2),
-    focusedState = _React$useState10[0],
-    setFocusedState = _React$useState10[1];
-  var _React$useState11 = React.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.useRef(null);
   var searchValue = React.useRef(null);
   var searchTimeout = React.useRef(null);
@@ -42405,7 +42460,7 @@ var MultiSelect = /*#__PURE__*/React.memo(/*#__PURE__*/React.forwardRef(function
   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 = [];
@@ -42414,7 +42469,7 @@ var MultiSelect = /*#__PURE__*/React.memo(/*#__PURE__*/React.forwardRef(function
         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)));
             }
@@ -42426,7 +42481,7 @@ var MultiSelect = /*#__PURE__*/React.memo(/*#__PURE__*/React.forwardRef(function
         }
         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;
   };
@@ -42444,8 +42499,6 @@ var MultiSelect = /*#__PURE__*/React.memo(/*#__PURE__*/React.forwardRef(function
     }, []);
   };
   var onClearIconKeyDown = function onClearIconKeyDown(event) {
-    event.preventDefault();
-    event.stopPropagation();
     switch (event.code) {
       case 'Space':
       case 'NumpadEnter':
@@ -42454,6 +42507,8 @@ var MultiSelect = /*#__PURE__*/React.memo(/*#__PURE__*/React.forwardRef(function
           break;
         }
         updateModel(event, [], []);
+        event.preventDefault();
+        event.stopPropagation();
         break;
     }
   };
@@ -42616,7 +42671,7 @@ var MultiSelect = /*#__PURE__*/React.memo(/*#__PURE__*/React.forwardRef(function
   }, props, {
     onClick: onPanelClick,
     onOverlayHide: hide,
-    filterValue: filterState,
+    filterValue: filterValue,
     focusedOptionIndex: focusedOptionIndex,
     onFirstHiddenFocus: onFirstHiddenFocus,
     onLastHiddenFocus: onLastHiddenFocus,
@@ -44916,8 +44971,7 @@ var PanelMenuSub = /*#__PURE__*/React.memo(/*#__PURE__*/React.forwardRef(functio
       onFocus: function onFocus(event) {
         return event.stopPropagation();
       },
-      tabIndex: '-1',
-      'aria-hidden': true
+      tabIndex: '-1'
     }, getPTOptions(processedItem, 'action', index));
     var content = /*#__PURE__*/React.createElement("a", actionProps, submenuIcon, icon, label, /*#__PURE__*/React.createElement(Ripple, null));
     if (item.template) {
@@ -47141,6 +47195,8 @@ var PickList = /*#__PURE__*/React.memo(/*#__PURE__*/React.forwardRef(function (i
       originalEvent: originalEvent,
       value: selectedValue
     }, 'targetSelection', props.onTargetSelectionChange);
+    setTargetSelectionState([]);
+    setSourceSelectionState([]);
     handleChange(event, source, target);
   };
   var scrollInView = function scrollInView(listContainer) {
@@ -47159,11 +47215,6 @@ var PickList = /*#__PURE__*/React.memo(/*#__PURE__*/React.forwardRef(function (i
     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,
@@ -47316,10 +47367,26 @@ var PickList = /*#__PURE__*/React.memo(/*#__PURE__*/React.forwardRef(function (i
           }
           _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) {
@@ -50998,7 +51065,6 @@ var TieredMenuSub = /*#__PURE__*/React.memo(/*#__PURE__*/React.forwardRef(functi
     var submenu = createSubmenu(processedItem, index);
     var actionProps = mergeProps({
       href: url || '#',
-      'aria-hidden': true,
       tabIndex: '-1',
       onFocus: function onFocus(event) {
         return event.stopPropagation();
@@ -55469,10 +55535,10 @@ var ToggleButton = /*#__PURE__*/React.memo(/*#__PURE__*/React.forwardRef(functio
   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'));
@@ -55495,10 +55561,10 @@ var ToggleButton = /*#__PURE__*/React.memo(/*#__PURE__*/React.forwardRef(functio
     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.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", rootProps, /*#__PURE__*/React.createElement("input", inputProps), /*#__PURE__*/React.createElement("div", boxProps, iconElement, /*#__PURE__*/React.createElement("span", labelProps, label), /*#__PURE__*/React.createElement(Ripple, null))), hasTooltip && /*#__PURE__*/React.createElement(Tooltip, _extends({
     target: elementRef,
@@ -55593,9 +55659,9 @@ var classes$3 = {
   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) {
@@ -55648,6 +55714,7 @@ var TreeBase = ComponentBase.extend({
     expandedKeys: null,
     filter: false,
     filterBy: 'label',
+    filterDelay: 300,
     filterIcon: null,
     filterLocale: undefined,
     filterMode: 'lenient',
@@ -55699,7 +55766,7 @@ var UITreeNode = /*#__PURE__*/React.memo(function (props) {
   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) {
@@ -55709,7 +55776,7 @@ var UITreeNode = /*#__PURE__*/React.memo(function (props) {
         selected: !isCheckboxSelectionMode() ? isSelected() : false,
         expanded: expanded || false,
         checked: isCheckboxSelectionMode() ? isChecked() : false,
-        isLeaf: isLeaf
+        leaf: isLeaf
       }
     });
   };
@@ -56468,7 +56535,7 @@ var UITreeNode = /*#__PURE__*/React.memo(function (props) {
     var nodeProps = mergeProps({
       ref: elementRef,
       className: classNames(props.node.className, cx('node', {
-        isLeaf: isLeaf
+        leaf: isLeaf
       })),
       style: props.node.style,
       tabIndex: tabIndex,
@@ -56503,20 +56570,27 @@ var Tree = /*#__PURE__*/React.memo(/*#__PURE__*/React.forwardRef(function (inPro
   var mergeProps = useMergeProps();
   var context = React.useContext(PrimeReactContext);
   var props = TreeBase.getProps(inProps, context);
-  var _React$useState = React.useState(''),
+  var _useDebounce = useDebounce('', props.filterDelay || 0),
+    _useDebounce2 = _slicedToArray(_useDebounce, 3),
+    filterValue = _useDebounce2[0],
+    filterValueState = _useDebounce2[1],
+    setFilterValueState = _useDebounce2[2];
+  var _React$useState = React.useState(props.expandedKeys),
     _React$useState2 = _slicedToArray(_React$useState, 2),
-    filterValueState = _React$useState2[0],
-    setFilterValueState = _React$useState2[1];
-  var _React$useState3 = React.useState(props.expandedKeys),
+    expandedKeysState = _React$useState2[0],
+    setExpandedKeysState = _React$useState2[1];
+  var _React$useState3 = React.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.useRef(null);
   var filteredNodes = React.useRef([]);
   var dragState = React.useRef(null);
   var filterChanged = React.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.useRef(null);
   var _TreeBase$setMetaData = TreeBase.setMetaData({
       props: props,
@@ -56555,7 +56629,11 @@ var Tree = /*#__PURE__*/React.memo(/*#__PURE__*/React.forwardRef(function (inPro
       if (navigateFocusToChild) {
         childFocusEvent.current = originalEvent;
       }
-      setExpandedKeysState(value);
+      if (isFiltering) {
+        setFilterExpandedKeys(value);
+      } else {
+        setExpandedKeysState(value);
+      }
     }
   };
   useUpdateEffect(function () {
@@ -56578,6 +56656,10 @@ var Tree = /*#__PURE__*/React.memo(/*#__PURE__*/React.forwardRef(function (inPro
       childFocusEvent.current = null;
     }
   }, [expandedKeys]);
+  React.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,
@@ -56759,12 +56841,9 @@ var Tree = /*#__PURE__*/React.memo(/*#__PURE__*/React.forwardRef(function (inPro
   };
   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 {
@@ -56793,6 +56872,7 @@ var Tree = /*#__PURE__*/React.memo(/*#__PURE__*/React.forwardRef(function (inPro
         _iterator.f();
       }
     }
+    setFilterExpandedKeys(currentFilterExpandedKeys);
     filterChanged.current = false;
   };
   var findFilteredNodes = function findFilteredNodes(node, paramsWithoutNode) {
@@ -56819,7 +56899,7 @@ var Tree = /*#__PURE__*/React.memo(/*#__PURE__*/React.forwardRef(function (inPro
         }
       }
       if (matched) {
-        node.expanded = true;
+        currentFilterExpandedKeys[node.key] = true;
         return true;
       }
     }
@@ -56936,10 +57016,7 @@ var Tree = /*#__PURE__*/React.memo(/*#__PURE__*/React.forwardRef(function (inPro
   };
   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);
@@ -56970,7 +57047,8 @@ var Tree = /*#__PURE__*/React.memo(/*#__PURE__*/React.forwardRef(function (inPro
   };
   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'));
@@ -57126,6 +57204,7 @@ var TreeSelectBase = ComponentBase.extend({
     expandedKeys: null,
     filter: false,
     filterBy: 'label',
+    filterDelay: 300,
     filterIcon: null,
     filterInputAutoFocus: true,
     filterLocale: undefined,
@@ -57258,10 +57337,11 @@ var TreeSelect = /*#__PURE__*/React.memo(/*#__PURE__*/React.forwardRef(function
     _React$useState6 = _slicedToArray(_React$useState5, 2),
     expandedKeysState = _React$useState6[0],
     setExpandedKeysState = _React$useState6[1];
-  var _React$useState7 = React.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.useRef(null);
   var overlayRef = React.useRef(null);
   var filterInputRef = React.useRef(null);
@@ -57824,6 +57904,7 @@ var TreeSelect = /*#__PURE__*/React.memo(/*#__PURE__*/React.forwardRef(function
       expandedKeys: expandedKeys,
       filter: props.filter,
       filterBy: props.filterBy,
+      filterDelay: props.filterDelay,
       filterLocale: props.filterLocale,
       filterMode: props.filterMode,
       filterPlaceholder: props.filterPlaceholder,
@@ -57850,14 +57931,15 @@ var TreeSelect = /*#__PURE__*/React.memo(/*#__PURE__*/React.forwardRef(function
   };
   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,
@@ -58079,7 +58161,7 @@ var classes$1 = {
     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) {