primereact 10.9.4 → 10.9.5

package/primereact.all.cjs.js

@@ -593,11 +593,18 @@ var DomHandler = /*#__PURE__*/function () {
           element.style.transformOrigin = 'top';
         }
         var targetOffsetPx = targetOffset.left;
-        var alignOffset = align === 'left' ? 0 : elementOuterWidth - targetOuterWidth;
-        if (targetOffsetPx + targetOuterWidth + elementOuterWidth > viewport.width) {
-          left = Math.max(0, targetOffsetPx + windowScrollLeft + targetOuterWidth - elementOuterWidth);
+        if (align === 'left') {
+          if (targetOffsetPx + elementOuterWidth > viewport.width) {
+            left = Math.max(0, targetOffsetPx + windowScrollLeft + targetOuterWidth - elementOuterWidth);
+          } else {
+            left = targetOffsetPx + windowScrollLeft;
+          }
         } else {
-          left = targetOffsetPx - alignOffset + windowScrollLeft;
+          if (targetOffsetPx + targetOuterWidth - elementOuterWidth < 0) {
+            left = windowScrollLeft;
+          } else {
+            left = targetOffsetPx + targetOuterWidth - elementOuterWidth + windowScrollLeft;
+          }
         }
         element.style.top = top + 'px';
         element.style.left = left + 'px';
@@ -806,13 +813,12 @@ var DomHandler = /*#__PURE__*/function () {
     /**
      * 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 _this3 = this;
       var scrollableParents = [];
       if (element) {
         // Get all parent elements
@@ -835,10 +841,8 @@ var DomHandler = /*#__PURE__*/function () {
          * @param {HTMLElement} node - Element to add
          */
         var addScrollableParent = function addScrollableParent(node) {
-          if (hideOverlaysOnDocumentScrolling) {
-            // For document/body/html elements, add window instead
-            scrollableParents.push(node.nodeName === 'BODY' || node.nodeName === 'HTML' || node.nodeType === 9 ? window : node);
-          }
+          // For document/body/html elements, add window instead
+          scrollableParents.push(node.nodeName === 'BODY' || node.nodeName === 'HTML' || _this3.isDocument(node) ? window : node);
         };
 
         // Iterate through all parent elements
@@ -882,13 +886,6 @@ var DomHandler = /*#__PURE__*/function () {
           _iterator.f();
         }
       }
-
-      // Ensure window/body is always included as fallback
-      if (!scrollableParents.some(function (node) {
-        return node === document.body || node === window;
-      })) {
-        scrollableParents.push(hideOverlaysOnDocumentScrolling ? window : document.body);
-      }
       return scrollableParents;
     }
   }, {
@@ -1028,6 +1025,11 @@ var DomHandler = /*#__PURE__*/function () {
     value: function isElement(obj) {
       return (typeof HTMLElement === "undefined" ? "undefined" : _typeof(HTMLElement)) === 'object' ? obj instanceof HTMLElement : obj && _typeof(obj) === 'object' && obj !== null && obj.nodeType === 1 && typeof obj.nodeName === 'string';
     }
+  }, {
+    key: "isDocument",
+    value: function isDocument(obj) {
+      return (typeof Document === "undefined" ? "undefined" : _typeof(Document)) === 'object' ? obj instanceof Document : obj && _typeof(obj) === 'object' && obj !== null && obj.nodeType === 9;
+    }
   }, {
     key: "scrollInView",
     value: function scrollInView(container, item) {
@@ -1365,7 +1367,7 @@ var DomHandler = /*#__PURE__*/function () {
         return !!(obj && obj.constructor && obj.call && obj.apply);
       };
       var element = isFunction(target) ? target() : target;
-      return element && element.nodeType === 9 || this.isExist(element) ? element : null;
+      return this.isDocument(element) || this.isExist(element) ? element : null;
     }
 
     /**
@@ -2068,6 +2070,122 @@ var ObjectUtils = /*#__PURE__*/function () {
         obj = obj[fields[i]];
       }
     }
+
+    /**
+     * This helper function takes an object and a dot-separated key path. It traverses the object based on the path,
+     * returning the value at the specified depth. If any part of the path is missing or undefined, it returns undefined.
+     *
+     * Example:
+     * const obj = { name: 'Alice', address: { city: 'Wonderland', zip: 12345 } };
+     * const path = 'address.city';
+     * const result = ObjectUtils.getNestedValue(obj, path);
+     * console.log(result); // Output: "Wonderland"
+     *
+     * @param {object} obj - The object to traverse.
+     * @param {string} path - The dot-separated key path.
+     * @returns {*} The value at the specified depth, or undefined if any part of the path is missing or undefined.
+     */
+  }, {
+    key: "getNestedValue",
+    value: function getNestedValue(obj, path) {
+      return path.split('.').reduce(function (acc, part) {
+        return acc && acc[part] !== undefined ? acc[part] : undefined;
+      }, obj);
+    }
+
+    /**
+     * This function takes an object and a dot-separated key path. It traverses the object based on the path,
+     * returning the value at the specified depth. If any part of the path is missing or undefined, it returns undefined.
+     *
+     * Example:
+     * const objA = { name: 'Alice', address: { city: 'Wonderland', zip: 12345 } };
+     * const objB = { name: 'Alice', address: { city: 'Wonderland', zip: 12345 } };
+     * const result = ObjectUtils.absoluteCompare(objA, objB);
+     * console.log(result); // Output: true
+     *
+     * const objC = { name: 'Alice', address: { city: 'Wonderland', zip: 12346 } };
+     * const result2 = ObjectUtils.absoluteCompare(objA, objC);
+     * console.log(result2); // Output: false
+     *
+     * @param {object} objA - The first object to compare.
+     * @param {object} objB - The second object to compare.
+     * @param {number} [maxDepth=1] - The maximum depth to compare.
+     * @param {number} [currentDepth=0] - The current depth (used internally for recursion).
+     * @returns {boolean} True if the objects are equal within the specified depth, false otherwise.
+     *
+     */
+  }, {
+    key: "absoluteCompare",
+    value: function absoluteCompare(objA, objB) {
+      var maxDepth = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 1;
+      var currentDepth = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : 0;
+      if (!objA || !objB) return true;
+      if (currentDepth > maxDepth) return true;
+      if (_typeof(objA) !== _typeof(objB)) return false;
+      var aKeys = Object.keys(objA);
+      var bKeys = Object.keys(objB);
+      if (aKeys.length !== bKeys.length) return false;
+      for (var _i = 0, _aKeys = aKeys; _i < _aKeys.length; _i++) {
+        var key = _aKeys[_i];
+        var aValue = objA[key];
+        var bValue = objB[key];
+
+        // Skip comparison if values are objects
+        var isObject = ObjectUtils.isObject(aValue) && ObjectUtils.isObject(bValue);
+        var isFunction = ObjectUtils.isFunction(aValue) && ObjectUtils.isFunction(bValue);
+        if ((isObject || isFunction) && !this.absoluteCompare(aValue, bValue, maxDepth, currentDepth + 1)) return false;
+        if (!isObject && aValue !== bValue) return false;
+      }
+      return true;
+    }
+
+    /**
+     * This helper function takes two objects and a list of keys to compare. It compares the values of the specified keys
+     * in both objects. If any comparison fails, it returns false. If all specified properties are equal, it returns true.
+     * It performs a shallow comparison using absoluteCompare if no keys are provided.
+     *
+     * Example:
+     * const objA = { name: 'Alice', address: { city: 'Wonderland', zip: 12345 } };
+     * const objB = { name: 'Alice', address: { city: 'Wonderland', zip: 12345 } };
+     * const keysToCompare = ['name', 'address.city', 'address.zip'];
+     * const result = ObjectUtils.selectiveCompare(objA, objB, keysToCompare);
+     * console.log(result); // Output: true
+     *
+     * const objC = { name: 'Alice', address: { city: 'Wonderland', zip: 12346 } };
+     * const result2 = ObjectUtils.selectiveCompare(objA, objC, keysToCompare);
+     * console.log(result2); // Output: false
+     *
+     * @param {object} a - The first object to compare.
+     * @param {object} b - The second object to compare.
+     * @param {string[]} [keysToCompare] - The keys to compare. If not provided, performs a shallow comparison using absoluteCompare.
+     * @returns {boolean} True if all specified properties are equal, false otherwise.
+     */
+  }, {
+    key: "selectiveCompare",
+    value: function selectiveCompare(a, b, keysToCompare) {
+      if (a === b) return true;
+      if (!a || !b || _typeof(a) !== 'object' || _typeof(b) !== 'object') return false;
+      if (!keysToCompare) return this.absoluteCompare(a, b, 1); // If no keys are provided, the comparison is limited to one depth level.
+      var _iterator2 = _createForOfIteratorHelper$g(keysToCompare),
+        _step2;
+      try {
+        for (_iterator2.s(); !(_step2 = _iterator2.n()).done;) {
+          var key = _step2.value;
+          var aValue = this.getNestedValue(a, key);
+          var bValue = this.getNestedValue(b, key);
+          var isObject = _typeof(aValue) === 'object' && aValue !== null && _typeof(bValue) === 'object' && bValue !== null;
+
+          // If the current key is an object, they are compared in one further level only.
+          if (isObject && !this.absoluteCompare(aValue, bValue, 1)) return false;
+          if (!isObject && aValue !== bValue) return false;
+        }
+      } catch (err) {
+        _iterator2.e(err);
+      } finally {
+        _iterator2.f();
+      }
+      return true;
+    }
   }]);
 }();
 
@@ -4394,7 +4512,14 @@ var useOverlayScrollListener = function useOverlayScrollListener(_ref) {
     }
     if (!listenerRef.current && targetRef.current) {
       var hideOnScroll = context ? context.hideOverlaysOnDocumentScrolling : PrimeReact.hideOverlaysOnDocumentScrolling;
-      var nodes = scrollableParentsRef.current = DomHandler.getScrollableParents(targetRef.current, hideOnScroll);
+      var nodes = scrollableParentsRef.current = DomHandler.getScrollableParents(targetRef.current);
+
+      // Ensure window/body is always included as fallback
+      if (!nodes.some(function (node) {
+        return node === document.body || node === window;
+      })) {
+        nodes.push(hideOnScroll ? window : document.body);
+      }
       listenerRef.current = function (event) {
         return listener && listener(event);
       };
@@ -4486,19 +4611,20 @@ var useOverlayListener = function useOverlayListener(_ref) {
           type: 'outside',
           valid: event.which !== 3 && isOutsideClicked(event)
         });
-      }
+      },
+      when: when
     }),
     _useEventListener2 = _slicedToArray(_useEventListener, 2),
     bindDocumentClickListener = _useEventListener2[0],
     unbindDocumentClickListener = _useEventListener2[1];
   var _useResizeListener = useResizeListener({
-      target: 'window',
       listener: function listener(event) {
         _listener && _listener(event, {
           type: 'resize',
           valid: !DomHandler.isTouchDevice()
         });
-      }
+      },
+      when: when
     }),
     _useResizeListener2 = _slicedToArray(_useResizeListener, 2),
     bindWindowResizeListener = _useResizeListener2[0],
@@ -4511,7 +4637,8 @@ var useOverlayListener = function useOverlayListener(_ref) {
           type: 'orientationchange',
           valid: true
         });
-      }
+      },
+      when: when
     }),
     _useEventListener4 = _slicedToArray(_useEventListener3, 2),
     bindWindowOrientationChangeListener = _useEventListener4[0],
@@ -4523,7 +4650,8 @@ var useOverlayListener = function useOverlayListener(_ref) {
           type: 'scroll',
           valid: true
         });
-      }
+      },
+      when: when
     }),
     _useOverlayScrollList2 = _slicedToArray(_useOverlayScrollList, 2),
     bindOverlayScrollListener = _useOverlayScrollList2[0],
@@ -8138,7 +8266,15 @@ var AutoComplete = /*#__PURE__*/React__namespace.memo(/*#__PURE__*/React__namesp
         var type = _ref.type,
           valid = _ref.valid;
         if (valid) {
-          type === 'outside' ? !isInputClicked(event) && hide() : hide();
+          if (type === 'outside') {
+            if (!isInputClicked(event)) {
+              hide();
+            }
+          } else if (context.hideOverlaysOnDocumentScrolling) {
+            hide();
+          } else if (!DomHandler.isDocument(event.target)) {
+            alignOverlay();
+          }
         }
       },
       when: overlayVisibleState
@@ -8314,6 +8450,9 @@ var AutoComplete = /*#__PURE__*/React__namespace.memo(/*#__PURE__*/React__namesp
     }
   };
   var removeItem = function removeItem(event, index) {
+    if (props.disabled || props.readOnly) {
+      return;
+    }
     var removedValue = props.value[index];
     var newValue = props.value.filter(function (_, i) {
       return index !== i;
@@ -8756,6 +8895,7 @@ var AutoComplete = /*#__PURE__*/React__namespace.memo(/*#__PURE__*/React__namesp
     listId: listId,
     onItemClick: selectItem,
     selectedItem: selectedItem,
+    onOverlayHide: hide,
     onClick: onPanelClick,
     getOptionGroupLabel: getOptionGroupLabel,
     getOptionGroupChildren: getOptionGroupChildren,
@@ -9277,7 +9417,8 @@ var BreadCrumb = /*#__PURE__*/React__namespace.memo(/*#__PURE__*/React__namespac
       onClick: function onClick(event) {
         return itemClick(event, item);
       },
-      'aria-disabled': item.disabled
+      'aria-disabled': item.disabled,
+      tabIndex: item.disabled ? -1 : undefined
     }, ptm('action'));
     var content = /*#__PURE__*/React__namespace.createElement("a", actionProps, label);
     if (item.template) {
@@ -9682,7 +9823,7 @@ var Calendar = /*#__PURE__*/React__namespace.memo(/*#__PURE__*/React__namespace.
     isUnstyled = _CalendarBase$setMeta.isUnstyled;
   useGlobalOnEscapeKey({
     callback: function callback() {
-      hide();
+      hide(null, reFocusInputField);
     },
     when: overlayVisibleState && overlayDisplayOrder,
     priority: [ESC_KEY_HANDLING_PRIORITIES.OVERLAY_PANEL, overlayDisplayOrder]
@@ -9733,7 +9874,15 @@ var Calendar = /*#__PURE__*/React__namespace.memo(/*#__PURE__*/React__namespace.
         var type = _ref.type,
           valid = _ref.valid;
         if (valid) {
-          type === 'outside' ? !isOverlayClicked.current && !isNavIconClicked(event.target) && hide('outside') : hide();
+          if (type === 'outside') {
+            if (!isOverlayClicked.current && !isNavIconClicked(event.target)) {
+              hide('outside');
+            }
+          } else if (context.hideOverlaysOnDocumentScrolling) {
+            hide();
+          } else if (!DomHandler.isDocument(event.target)) {
+            alignOverlay();
+          }
         }
         isOverlayClicked.current = false;
       },
@@ -14587,8 +14736,15 @@ var CascadeSelect = /*#__PURE__*/React__namespace.memo(/*#__PURE__*/React__names
       target: elementRef,
       overlay: overlayRef,
       listener: function listener(event, _ref) {
-        var valid = _ref.valid;
-        valid && hide();
+        var valid = _ref.valid,
+          type = _ref.type;
+        if (valid) {
+          if (context.hideOverlaysOnDocumentScrolling || type === 'outside') {
+            hide();
+          } else if (!DomHandler.isDocument(event.target)) {
+            alignOverlay();
+          }
+        }
       },
       when: overlayVisibleState
     }),
@@ -15199,7 +15355,7 @@ var Checkbox = /*#__PURE__*/React__namespace.memo(/*#__PURE__*/React__namespace.
     return props.checked === props.trueValue;
   };
   var _onChange = function onChange(event) {
-    if (props.disabled || props.readonly) {
+    if (props.disabled || props.readOnly) {
       return;
     }
     if (props.onChange) {
@@ -15383,6 +15539,10 @@ var Chip = /*#__PURE__*/React__namespace.memo(/*#__PURE__*/React__namespace.forw
     _React$useState2 = _slicedToArray(_React$useState, 2),
     visibleState = _React$useState2[0],
     setVisibleState = _React$useState2[1];
+  var _React$useState3 = React__namespace.useState(props.id),
+    _React$useState4 = _slicedToArray(_React$useState3, 2),
+    idState = _React$useState4[0],
+    setIdState = _React$useState4[1];
   var _ChipBase$setMetaData = ChipBase.setMetaData({
       props: props
     }),
@@ -15400,6 +15560,7 @@ var Chip = /*#__PURE__*/React__namespace.memo(/*#__PURE__*/React__namespace.forw
   var close = function close(event) {
     var result = true;
     if (props.onRemove) {
+      event.stopPropagation();
       result = props.onRemove({
         originalEvent: event,
         value: props.label || props.image || props.icon
@@ -15419,7 +15580,7 @@ var Chip = /*#__PURE__*/React__namespace.memo(/*#__PURE__*/React__namespace.forw
       onKeyDown: onKeyDown
     }, ptm('removeIcon'));
     var icon = props.removeIcon || /*#__PURE__*/React__namespace.createElement(TimesCircleIcon, _extends({}, removeIconProps, {
-      key: UniqueComponentId('removeIcon')
+      key: "".concat(idState, "-removeIcon")
     }));
     if (props.image) {
       var imageProps = mergeProps({
@@ -15429,7 +15590,7 @@ var Chip = /*#__PURE__*/React__namespace.memo(/*#__PURE__*/React__namespace.forw
       content.push(/*#__PURE__*/React__namespace.createElement("img", _extends({
         alt: props.imageAlt
       }, imageProps, {
-        key: UniqueComponentId('image')
+        key: "".concat(idState, "-image")
       })));
     } else if (props.icon) {
       var chipIconProps = mergeProps({
@@ -15480,6 +15641,14 @@ var Chip = /*#__PURE__*/React__namespace.memo(/*#__PURE__*/React__namespace.forw
       }
     };
   });
+  useMountEffect(function () {
+    if (!idState) {
+      setIdState(UniqueComponentId());
+    }
+  });
+  if (!idState) {
+    return null;
+  }
   return visibleState && createElement();
 }));
 Chip.displayName = 'Chip';
@@ -15588,7 +15757,7 @@ var Chips = /*#__PURE__*/React__namespace.memo(/*#__PURE__*/React__namespace.for
   var listRef = React__namespace.useRef(null);
   var inputRef = React__namespace.useRef(props.inputRef);
   var removeItem = function removeItem(event, index) {
-    if (props.disabled && props.readOnly) {
+    if (props.disabled || props.readOnly) {
       return;
     }
     var values = _toConsumableArray(props.value);
@@ -16121,8 +16290,15 @@ var ColorPicker = /*#__PURE__*/React__namespace.memo(/*#__PURE__*/React__namespa
       target: elementRef,
       overlay: overlayRef,
       listener: function listener(event, _ref) {
-        var valid = _ref.valid;
-        valid && hide();
+        var valid = _ref.valid,
+          type = _ref.type;
+        if (valid) {
+          if (context.hideOverlaysOnDocumentScrolling || type === 'outside') {
+            hide();
+          } else if (!DomHandler.isDocument(event.target)) {
+            alignOverlay();
+          }
+        }
       },
       when: overlayVisibleState
     }),
@@ -17995,9 +18171,17 @@ var ConfirmPopup = /*#__PURE__*/React__namespace.memo(/*#__PURE__*/React__namesp
         var type = _ref.type,
           valid = _ref.valid;
         if (valid) {
-          type === 'outside' ? props.dismissable && !isPanelClicked.current && hide('hide') : hide('hide');
+          if (type === 'outside') {
+            if (props.dismissable && !isPanelClicked.current) {
+              hide('hide');
+            }
+            isPanelClicked.current = false;
+          } else if (context.hideOverlaysOnDocumentScrolling) {
+            hide('hide');
+          } else if (!DomHandler.isDocument(event.target)) {
+            align();
+          }
         }
-        isPanelClicked.current = false;
       },
       when: visibleState
     }),
@@ -20761,8 +20945,11 @@ var InputNumber = /*#__PURE__*/React__namespace.memo(/*#__PURE__*/React__namespa
         newValueStr = insertText(inputValue, text, selectionStart, selectionEnd);
         updateValue(event, newValueStr, text, 'insert');
       } else if (decimalCharIndex === -1 && (maxFractionDigits || props.maxFractionDigits)) {
-        newValueStr = insertText(inputValue, text, selectionStart, selectionEnd);
-        updateValue(event, newValueStr, text, 'insert');
+        var allowedDecimal = inputMode !== 'numeric' || inputMode === 'numeric' && (props.min || props.max);
+        if (allowedDecimal) {
+          newValueStr = insertText(inputValue, text, selectionStart, selectionEnd);
+          updateValue(event, newValueStr, text, 'insert');
+        }
       }
     } else {
       var operation = selectionStart !== selectionEnd ? 'range-insert' : 'insert';
@@ -22233,7 +22420,15 @@ var Dropdown = /*#__PURE__*/React__namespace.memo(/*#__PURE__*/React__namespace.
         var type = _ref.type,
           valid = _ref.valid;
         if (valid) {
-          type === 'outside' ? !isClearClicked(event) && hide() : hide();
+          if (type === 'outside') {
+            if (!isClearClicked(event)) {
+              hide();
+            }
+          } else if (context.hideOverlaysOnDocumentScrolling) {
+            hide();
+          } else if (!DomHandler.isDocument(event.target)) {
+            alignOverlay();
+          }
         }
       },
       when: overlayVisibleState
@@ -22432,12 +22627,14 @@ var Dropdown = /*#__PURE__*/React__namespace.memo(/*#__PURE__*/React__namespace.
       case 'ArrowRight':
         onArrowLeftKey(event, true);
         break;
-      case 'Escape':
       case 'Enter':
       case 'NumpadEnter':
         onEnterKey(event);
         event.preventDefault();
         break;
+      case 'Escape':
+        onEscapeKey(event);
+        break;
     }
   };
   var hasFocusableElements = function hasFocusableElements() {
@@ -23179,6 +23376,7 @@ var Dropdown = /*#__PURE__*/React__namespace.memo(/*#__PURE__*/React__namespace.
     "in": overlayVisibleState,
     isOptionDisabled: isOptionDisabled,
     isSelected: isSelected,
+    onOverlayHide: hide,
     onClick: onPanelClick,
     onEnter: onOverlayEnter,
     onEntered: onOverlayEntered,
@@ -24058,7 +24256,7 @@ var RadioButton = /*#__PURE__*/React__namespace.memo(/*#__PURE__*/React__namespa
     onChange(event);
   };
   var onChange = function onChange(event) {
-    if (props.disabled || props.readonly) {
+    if (props.disabled || props.readOnly) {
       return;
     }
     if (props.onChange) {
@@ -24161,7 +24359,7 @@ var RadioButton = /*#__PURE__*/React__namespace.memo(/*#__PURE__*/React__namespa
       onBlur: onBlur,
       onChange: onChange,
       disabled: props.disabled,
-      readOnly: props.readonly,
+      readOnly: props.readOnly,
       required: props.required,
       tabIndex: props.tabIndex,
       className: cx('input')
@@ -24234,7 +24432,7 @@ RowRadioButton.displayName = 'RowRadioButton';
 
 function ownKeys$1i(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$1i(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$1i(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$1i(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
-var BodyCell = /*#__PURE__*/React__namespace.memo(function (props) {
+var Cell = function Cell(props) {
   var mergeProps = useMergeProps();
   var _React$useState = React__namespace.useState(props.editing),
     _React$useState2 = _slicedToArray(_React$useState, 2),
@@ -24262,13 +24460,9 @@ var BodyCell = /*#__PURE__*/React__namespace.memo(function (props) {
   var getColumnProp = function getColumnProp(name) {
     return ColumnBase.getCProp(props.column, name);
   };
-  var getColumnProps = function getColumnProps() {
-    return ColumnBase.getCProps(props.column);
-  };
   var getColumnPTOptions = function getColumnPTOptions(key) {
-    var cProps = getColumnProps();
     var columnMetaData = {
-      props: cProps,
+      props: props.cProps,
       parent: props.metaData,
       hostName: props.hostName,
       state: {
@@ -24284,10 +24478,8 @@ var BodyCell = /*#__PURE__*/React__namespace.memo(function (props) {
     };
     return mergeProps(ptm("column.".concat(key), {
       column: columnMetaData
-    }), ptm("column.".concat(key), columnMetaData), ptmo(cProps, key, columnMetaData));
+    }), ptm("column.".concat(key), columnMetaData), ptmo(props.cProps, key, columnMetaData));
   };
-  var field = getColumnProp('field') || "field_".concat(props.index);
-  var editingKey = props.dataKey ? props.rowData && props.rowData[props.dataKey] || props.rowIndex : props.rowIndex;
   var isEditable = function isEditable() {
     return ObjectUtils.isNotEmpty(props.editMode) && getColumnProp('editor');
   };
@@ -24312,34 +24504,22 @@ var BodyCell = /*#__PURE__*/React__namespace.memo(function (props) {
     _useEventListener2 = _slicedToArray(_useEventListener, 2),
     bindDocumentClickListener = _useEventListener2[0],
     unbindDocumentClickListener = _useEventListener2[1];
-  var isSelected = function isSelected() {
-    return props.selection ? props.selection instanceof Array ? findIndex(props.selection) > -1 : equals(props.selection) : false;
-  };
-  var equalsData = function equalsData(data) {
-    return props.compareSelectionBy === 'equals' ? data === props.rowData : ObjectUtils.equals(data, props.rowData, props.dataKey);
-  };
-  var equals = function equals(selectedCell) {
-    return selectedCell && (selectedCell.rowIndex === props.rowIndex || equalsData(selectedCell.rowData)) && (selectedCell.field === field || selectedCell.cellIndex === props.index);
-  };
   var isOutsideClicked = function isOutsideClicked(target) {
     return elementRef.current && !(elementRef.current.isSameNode(target) || elementRef.current.contains(target));
   };
-  var getVirtualScrollerOption = function getVirtualScrollerOption(option) {
-    return props.virtualScrollerOptions ? props.virtualScrollerOptions[option] : null;
-  };
   var getStyle = function getStyle() {
     var bodyStyle = getColumnProp('bodyStyle');
     var columnStyle = getColumnProp('style');
-    return getColumnProp('frozen') ? Object.assign({}, columnStyle, bodyStyle, styleObjectState) : Object.assign({}, columnStyle, bodyStyle);
+    return props.frozenCol ? Object.assign({}, columnStyle, bodyStyle, styleObjectState) : Object.assign({}, columnStyle, bodyStyle);
   };
   var getCellParams = function getCellParams() {
     return {
-      value: resolveFieldData(),
-      field: field,
+      value: props.resolveFieldData(),
+      field: props.field,
       rowData: props.rowData,
       rowIndex: props.rowIndex,
       cellIndex: props.index,
-      selected: isSelected(),
+      selected: props.isCellSelected,
       column: props.column,
       props: props
     };
@@ -24350,20 +24530,6 @@ var BodyCell = /*#__PURE__*/React__namespace.memo(function (props) {
       originalEvent: event
     }, params);
   };
-  var resolveFieldData = function resolveFieldData(data) {
-    return ObjectUtils.resolveFieldData(data || props.rowData, field);
-  };
-  var getEditingRowData = function getEditingRowData() {
-    return props.editingMeta && props.editingMeta[editingKey] ? props.editingMeta[editingKey].data : props.rowData;
-  };
-  var getTabIndex = function getTabIndex(cellSelected) {
-    return props.allowCellSelection ? cellSelected ? 0 : props.rowIndex === 0 && props.index === 0 ? props.tabIndex : -1 : null;
-  };
-  var findIndex = function findIndex(collection) {
-    return (collection || []).findIndex(function (data) {
-      return equals(data);
-    });
-  };
   var closeCell = function closeCell(event) {
     var params = getCellCallbackParams(event);
     var onBeforeCellEditHide = getColumnProp('onBeforeCellEditHide');
@@ -24384,7 +24550,7 @@ var BodyCell = /*#__PURE__*/React__namespace.memo(function (props) {
   var switchCellToViewMode = function switchCellToViewMode(event, submit) {
     var callbackParams = getCellCallbackParams(event);
     var newRowData = _objectSpread$1i({}, editingRowDataStateRef.current);
-    var newValue = resolveFieldData(newRowData);
+    var newValue = props.resolveFieldData(newRowData);
     var params = _objectSpread$1i(_objectSpread$1i({}, callbackParams), {}, {
       newRowData: newRowData,
       newValue: newValue
@@ -24409,128 +24575,20 @@ var BodyCell = /*#__PURE__*/React__namespace.memo(function (props) {
     }
     setEditingRowDataState(newRowData);
   };
-  var _findNextSelectableCell = function findNextSelectableCell(cell) {
-    var nextCell = cell.nextElementSibling;
-    return nextCell ? DomHandler.getAttribute(nextCell, 'data-p-selectable-cell') ? nextCell : _findNextSelectableCell(nextCell) : null;
-  };
-  var _findPrevSelectableCell = function findPrevSelectableCell(cell) {
-    var prevCell = cell.previousElementSibling;
-    return prevCell ? DomHandler.getAttribute(prevCell, 'data-p-selectable-cell') ? prevCell : _findPrevSelectableCell(prevCell) : null;
-  };
-  var _findDownSelectableCell = function findDownSelectableCell(cell) {
-    var downRow = cell.parentElement.nextElementSibling;
-    var downCell = downRow ? downRow.children[props.index] : null;
-    return downRow && downCell ? DomHandler.getAttribute(downRow, 'data-p-selectable-row') && DomHandler.getAttribute(downCell, 'data-p-selectable-cell') ? downCell : _findDownSelectableCell(downCell) : null;
-  };
-  var _findUpSelectableCell = function findUpSelectableCell(cell) {
-    var upRow = cell.parentElement.previousElementSibling;
-    var upCell = upRow ? upRow.children[props.index] : null;
-    return upRow && upCell ? DomHandler.getAttribute(upRow, 'data-p-selectable-row') && DomHandler.getAttribute(upCell, 'data-p-selectable-cell') ? upCell : _findUpSelectableCell(upCell) : null;
-  };
-  var changeTabIndex = function changeTabIndex(currentCell, nextCell) {
-    if (currentCell && nextCell) {
-      currentCell.tabIndex = -1;
-      nextCell.tabIndex = props.tabIndex;
-    }
-  };
-  var focusOnElement = function focusOnElement() {
-    clearTimeout(focusTimeout.current);
-    focusTimeout.current = setTimeout(function () {
-      if (editingState) {
-        var focusableEl = props.editMode === 'cell' ? DomHandler.getFirstFocusableElement(elementRef.current, ':not([data-pc-section="editorkeyhelperlabel"])') : DomHandler.findSingle(elementRef.current, '[data-p-row-editor-save="true"]');
-        focusableEl && focusableEl.focus();
-      }
-      keyHelperRef.current && (keyHelperRef.current.tabIndex = editingState ? -1 : 0);
-    }, 1);
-  };
-  var focusOnInit = function focusOnInit() {
-    clearTimeout(initFocusTimeout.current);
-    initFocusTimeout.current = setTimeout(function () {
-      var focusableEl = props.editMode === 'row' ? DomHandler.findSingle(elementRef.current, '[data-p-row-editor-init="true"]') : null;
-      focusableEl && focusableEl.focus();
-    }, 1);
-  };
-  var updateStickyPosition = function updateStickyPosition() {
-    if (getColumnProp('frozen')) {
-      var styleObject = _objectSpread$1i({}, styleObjectState);
-      var align = getColumnProp('alignFrozen');
-      if (align === 'right') {
-        var right = 0;
-        var next = elementRef.current && elementRef.current.nextElementSibling;
-        if (next && next.classList.contains('p-frozen-column')) {
-          right = DomHandler.getOuterWidth(next) + parseFloat(next.style.right || 0);
-        }
-        styleObject.right = right + 'px';
-      } else {
-        var left = 0;
-        var prev = elementRef.current && elementRef.current.previousElementSibling;
-        if (prev && prev.classList.contains('p-frozen-column')) {
-          left = DomHandler.getOuterWidth(prev) + parseFloat(prev.style.left || 0);
-        }
-        styleObject.left = left + 'px';
-      }
-      var isSameStyle = styleObjectState.left === styleObject.left && styleObjectState.right === styleObject.right;
-      !isSameStyle && setStyleObjectState(styleObject);
-    }
-  };
   var editorCallback = function editorCallback(val) {
     var editingRowData = _objectSpread$1i({}, editingRowDataState);
-    ObjectUtils.mutateFieldData(editingRowData, field, val);
+    ObjectUtils.mutateFieldData(editingRowData, props.field, val);
     setEditingRowDataState(editingRowData);
 
     // update editing meta for complete methods on row mode
-    var currentData = getEditingRowData();
+    var currentData = props.getEditingRowData();
     if (currentData) {
-      ObjectUtils.mutateFieldData(currentData, field, val);
+      ObjectUtils.mutateFieldData(currentData, props.field, val);
     }
     editingRowDataStateRef.current = editingRowData;
   };
   var _onClick = function onClick(event) {
-    var params = getCellCallbackParams(event);
-    if (props.editMode !== 'row' && isEditable() && !editingState && (props.selectOnEdit || !props.selectOnEdit && props.selected)) {
-      selfClick.current = true;
-      var onBeforeCellEditShow = getColumnProp('onBeforeCellEditShow');
-      var onCellEditInit = getColumnProp('onCellEditInit');
-      var cellEditValidatorEvent = getColumnProp('cellEditValidatorEvent');
-      if (onBeforeCellEditShow) {
-        // if user returns false do not show the editor
-        if (onBeforeCellEditShow(params) === false) {
-          return;
-        }
-
-        // if user prevents default stop the editor
-        if (event && event.defaultPrevented) {
-          return;
-        }
-      }
-
-      // If the data is sorted using sort icon, it has been added to wait for the sort operation when any cell is wanted to be opened.
-      setTimeout(function () {
-        setEditingState(true);
-        if (onCellEditInit) {
-          if (onCellEditInit(params) === false) {
-            return;
-          }
-
-          // if user prevents default stop the editor
-          if (event && event.defaultPrevented) {
-            return;
-          }
-        }
-        if (cellEditValidatorEvent === 'click') {
-          bindDocumentClickListener();
-          overlayEventListener.current = function (e) {
-            if (!isOutsideClicked(e.target)) {
-              selfClick.current = true;
-            }
-          };
-          OverlayService.on('overlay-click', overlayEventListener.current);
-        }
-      }, 1);
-    }
-    if (props.allowCellSelection && props.onClick) {
-      props.onClick(params);
-    }
+    props.onClick(event, getCellCallbackParams(event), isEditable(), editingState, setEditingState, selfClick, props.column, bindDocumentClickListener, overlayEventListener);
   };
   var _onMouseDown = function onMouseDown(event) {
     var params = getCellCallbackParams(event);
@@ -24554,7 +24612,7 @@ var BodyCell = /*#__PURE__*/React__namespace.memo(function (props) {
         cell = event.currentTarget;
       switch (event.code) {
         case 'ArrowLeft':
-          var prevCell = _findPrevSelectableCell(cell);
+          var prevCell = props.findPrevSelectableCell(cell);
           if (prevCell) {
             changeTabIndex(cell, prevCell);
             prevCell.focus();
@@ -24562,7 +24620,7 @@ var BodyCell = /*#__PURE__*/React__namespace.memo(function (props) {
           event.preventDefault();
           break;
         case 'ArrowRight':
-          var nextCell = _findNextSelectableCell(cell);
+          var nextCell = props.findNextSelectableCell(cell);
           if (nextCell) {
             changeTabIndex(cell, nextCell);
             nextCell.focus();
@@ -24570,7 +24628,7 @@ var BodyCell = /*#__PURE__*/React__namespace.memo(function (props) {
           event.preventDefault();
           break;
         case 'ArrowUp':
-          var upCell = _findUpSelectableCell(cell);
+          var upCell = props.findUpSelectableCell(cell, index);
           if (upCell) {
             changeTabIndex(cell, upCell);
             upCell.focus();
@@ -24578,7 +24636,7 @@ var BodyCell = /*#__PURE__*/React__namespace.memo(function (props) {
           event.preventDefault();
           break;
         case 'ArrowDown':
-          var downCell = _findDownSelectableCell(cell);
+          var downCell = props.findDownSelectableCell(cell, index);
           if (downCell) {
             changeTabIndex(cell, downCell);
             downCell.focus();
@@ -24617,13 +24675,6 @@ var BodyCell = /*#__PURE__*/React__namespace.memo(function (props) {
       index: props.rowIndex
     });
   };
-  var onCheckboxChange = function onCheckboxChange(event) {
-    props.onCheckboxChange({
-      originalEvent: event,
-      data: props.rowData,
-      index: props.rowIndex
-    });
-  };
   var onRowToggle = function onRowToggle(event) {
     props.onRowToggle({
       originalEvent: event,
@@ -24636,8 +24687,8 @@ var BodyCell = /*#__PURE__*/React__namespace.memo(function (props) {
     props.onRowEditInit({
       originalEvent: event,
       data: props.rowData,
-      newData: getEditingRowData(),
-      field: field,
+      newData: props.getEditingRowData(),
+      field: props.field,
       index: props.rowIndex
     });
   };
@@ -24645,32 +24696,26 @@ var BodyCell = /*#__PURE__*/React__namespace.memo(function (props) {
     props.onRowEditSave({
       originalEvent: event,
       data: props.rowData,
-      newData: getEditingRowData(),
-      field: field,
+      newData: props.getEditingRowData(),
+      field: props.field,
       index: props.rowIndex
     });
-    focusOnInit();
+    props.focusOnInit(initFocusTimeout, elementRef);
   };
   var onRowEditCancel = function onRowEditCancel(event) {
     props.onRowEditCancel({
       originalEvent: event,
       data: props.rowData,
-      newData: getEditingRowData(),
-      field: field,
+      newData: props.getEditingRowData(),
+      field: props.field,
       index: props.rowIndex
     });
-    focusOnInit();
+    props.focusOnInit();
   };
   React__namespace.useEffect(function () {
-    if (getColumnProp('frozen')) {
-      updateStickyPosition();
-    }
-  });
-  React__namespace.useEffect(function () {
-    if (props.editMode === 'cell' || props.editMode === 'row') {
-      focusOnElement();
-    }
-  }, [props.editMode, props.editing, editingState]); // eslint-disable-line react-hooks/exhaustive-deps
+    if (props.frozenCol) props.updateStickyPosition(elementRef, props.frozenCol, props.alignFrozenCol, styleObjectState, setStyleObjectState);
+    if (props.editMode === 'cell' || props.editMode === 'row') props.focusOnElement(focusTimeout, editingState, elementRef, keyHelperRef);
+  }, [props.editMode, props.editing, editingState, props.frozenCol, props.alignFrozenCol]); // eslint-disable-line react-hooks/exhaustive-deps
 
   React__namespace.useEffect(function () {
     if (props.editMode === 'row' && props.editing !== editingState) {
@@ -24679,7 +24724,7 @@ var BodyCell = /*#__PURE__*/React__namespace.memo(function (props) {
   }, [props.editMode, props.editing, editingState]);
   useUpdateEffect(function () {
     if (props.editMode === 'cell' || props.editMode === 'row') {
-      var editingRowData = getEditingRowData();
+      var editingRowData = props.getEditingRowData();
       setEditingRowDataState(editingRowData);
       editingRowDataStateRef.current = editingRowData;
     }
@@ -24689,7 +24734,7 @@ var BodyCell = /*#__PURE__*/React__namespace.memo(function (props) {
       var callbackParams = getCellCallbackParams();
       var params = _objectSpread$1i(_objectSpread$1i({}, callbackParams), {}, {
         editing: editingState,
-        editingKey: editingKey
+        editingKey: props.editingKey
       });
       props.onEditingMetaChange(params);
     }
@@ -24702,16 +24747,16 @@ var BodyCell = /*#__PURE__*/React__namespace.memo(function (props) {
     }
   });
   var createLoading = function createLoading() {
-    var options = getVirtualScrollerOption('getLoaderOptions')(props.rowIndex, {
+    var options = props.getVirtualScrollerOption('getLoaderOptions')(props.rowIndex, {
       cellIndex: props.index,
       cellFirst: props.index === 0,
-      cellLast: props.index === getVirtualScrollerOption('columns').length - 1,
+      cellLast: props.index === props.getVirtualScrollerOption('columns').length - 1,
       cellEven: props.index % 2 === 0,
       cellOdd: props.index % 2 !== 0,
       column: props.column,
-      field: field
+      field: props.field
     });
-    var content = ObjectUtils.getJSXElement(getVirtualScrollerOption('loadingTemplate'), options);
+    var content = ObjectUtils.getJSXElement(props.getVirtualScrollerOption('loadingTemplate'), options);
     var bodyCellProps = mergeProps(getColumnPTOptions('bodyCell'), {
       role: 'cell'
     });
@@ -24720,20 +24765,20 @@ var BodyCell = /*#__PURE__*/React__namespace.memo(function (props) {
   var createElement = function createElement() {
     var content;
     var editorKeyHelper;
-    var cellSelected = props.allowCellSelection && isSelected();
+    var cellSelected = props.allowCellSelection && props.isCellSelected;
     var isRowEditor = props.editMode === 'row';
-    var tabIndex = getTabIndex(cellSelected);
+    var tabIndex = props.getTabIndex(cellSelected, props.index);
     var selectionMode = getColumnProp('selectionMode');
     var rowReorder = getColumnProp('rowReorder');
     var header = getColumnProp('header');
     var body = getColumnProp('body');
     var editor = getColumnProp('editor');
-    var frozen = getColumnProp('frozen');
+    var frozen = props.frozenCol;
     var align = getColumnProp('align');
-    var value = resolveFieldData();
+    var value = props.resolveFieldData();
     var columnBodyOptions = {
       column: props.column,
-      field: field,
+      field: props.field,
       rowIndex: props.rowIndex,
       frozenRow: props.frozenRow,
       props: props.tableProps
@@ -24758,12 +24803,12 @@ var BodyCell = /*#__PURE__*/React__namespace.memo(function (props) {
       if (showSelection) {
         var ariaLabelField = props.selectionAriaLabel || props.tableProps.dataKey;
         var ariaLabelText = ObjectUtils.resolveFieldData(props.rowData, ariaLabelField);
-        label = "".concat(props.selected ? ariaLabel('unselectRow') : ariaLabel('selectRow'), " ").concat(ariaLabelText);
+        label = "".concat(props.isRowSelected ? ariaLabel('unselectRow') : ariaLabel('selectRow'), " ").concat(ariaLabelText);
       }
       content = showSelection && /*#__PURE__*/React__namespace.createElement(React__namespace.Fragment, null, selectionMode === 'single' && /*#__PURE__*/React__namespace.createElement(RowRadioButton, {
         hostName: props.hostName,
         column: props.column,
-        checked: props.selected,
+        checked: props.isRowSelected,
         disabled: !props.isSelectable({
           data: props.rowData,
           index: props.rowIndex
@@ -24778,12 +24823,12 @@ var BodyCell = /*#__PURE__*/React__namespace.memo(function (props) {
       }), selectionMode === 'multiple' && /*#__PURE__*/React__namespace.createElement(RowCheckbox, {
         hostName: props.hostName,
         column: props.column,
-        checked: props.selected,
+        checked: props.isRowSelected,
         disabled: !props.isSelectable({
           data: props.rowData,
           index: props.rowIndex
         }),
-        onChange: onCheckboxChange,
+        onChange: props.onCheckboxChange,
         tabIndex: props.tabIndex,
         ariaLabel: label,
         checkIcon: props.checkIcon,
@@ -24833,7 +24878,7 @@ var BodyCell = /*#__PURE__*/React__namespace.memo(function (props) {
         expanderProps.element = content;
         content = ObjectUtils.getJSXElement(body, props.rowData, {
           column: props.column,
-          field: field,
+          field: props.field,
           rowIndex: props.rowIndex,
           frozenRow: props.frozenRow,
           props: props.tableProps,
@@ -24907,7 +24952,7 @@ var BodyCell = /*#__PURE__*/React__namespace.memo(function (props) {
         rowEditorProps.element = content;
         content = ObjectUtils.getJSXElement(body, props.rowData, {
           column: props.column,
-          field: field,
+          field: props.field,
           rowIndex: props.rowIndex,
           frozenRow: props.frozenRow,
           props: props.tableProps,
@@ -24917,7 +24962,7 @@ var BodyCell = /*#__PURE__*/React__namespace.memo(function (props) {
     } else if (body && (!editingState || !editor)) {
       content = body ? ObjectUtils.getJSXElement(body, props.rowData, {
         column: props.column,
-        field: field,
+        field: props.field,
         rowIndex: props.rowIndex,
         frozenRow: props.frozenRow,
         props: props.tableProps
@@ -24925,9 +24970,9 @@ var BodyCell = /*#__PURE__*/React__namespace.memo(function (props) {
     } else if (editor && editingState) {
       content = ObjectUtils.getJSXElement(editor, {
         rowData: editingRowDataState,
-        value: resolveFieldData(editingRowDataState),
+        value: props.resolveFieldData(editingRowDataState),
         column: props.column,
-        field: field,
+        field: props.field,
         rowIndex: props.rowIndex,
         frozenRow: props.frozenRow,
         props: props.tableProps,
@@ -24995,7 +25040,22 @@ var BodyCell = /*#__PURE__*/React__namespace.memo(function (props) {
       ref: elementRef
     }, bodyCellProps), editorKeyHelper, title, content);
   };
-  return getVirtualScrollerOption('loading') ? createLoading() : createElement();
+  return props.getVirtualScrollerOption('loading') ? createLoading() : createElement();
+};
+
+// RadioCheckCell is used for the Radio and Checkbox selection and has the isRowSelected dependency
+var RadioCheckCell = /*#__PURE__*/React__namespace.memo(function (props) {
+  return /*#__PURE__*/React__namespace.createElement(Cell, props);
+}, function (prevProps, nextProps) {
+  var keysToCompare = ['isRowSelected', 'field', 'allowCellSelection', 'isCellSelected', 'editMode', 'index', 'tabIndex', 'editing', 'expanded', 'editingMeta', 'rowData'];
+  return ObjectUtils.selectiveCompare(prevProps, nextProps, keysToCompare);
+});
+RadioCheckCell.displayName = 'RadioCheckCell';
+var BodyCell = /*#__PURE__*/React__namespace.memo(function (props) {
+  return /*#__PURE__*/React__namespace.createElement(Cell, props);
+}, function (prevProps, nextProps) {
+  var keysToCompare = ['field', 'allowCellSelection', 'isCellSelected', 'editMode', 'index', 'tabIndex', 'editing', 'expanded', 'editingMeta', 'rowData', 'frozenCol', 'alignFrozenCol'];
+  return ObjectUtils.selectiveCompare(prevProps, nextProps, keysToCompare);
 });
 BodyCell.displayName = 'BodyCell';
 
@@ -25011,6 +25071,7 @@ var BodyRow = /*#__PURE__*/React__namespace.memo(function (props) {
   var _props$ptCallbacks = props.ptCallbacks,
     ptm = _props$ptCallbacks.ptm,
     cx = _props$ptCallbacks.cx;
+  var isRowSelected = !props.allowCellSelection && props.selected || props.contextMenuSelected;
   var getBodyRowPTOptions = function getBodyRowPTOptions(key) {
     return ptm(key, {
       parent: props.metaData,
@@ -25024,7 +25085,7 @@ var BodyRow = /*#__PURE__*/React__namespace.memo(function (props) {
           data: props.rowData,
           index: props.rowIndex
         }),
-        selected: !props.allowCellSelection && props.selected || props.contextMenuSelected,
+        selected: isRowSelected,
         stripedRows: props.metaData.props.stripedRows
       }
     });
@@ -25053,10 +25114,10 @@ var BodyRow = /*#__PURE__*/React__namespace.memo(function (props) {
       return equals(rowData, data);
     });
   };
-  var changeTabIndex = function changeTabIndex(currentRow, nextRow) {
-    if (currentRow && nextRow) {
-      currentRow.tabIndex = -1;
-      nextRow.tabIndex = props.tabIndex;
+  var changeTabIndex = function changeTabIndex(currentElement, nextElement) {
+    if (currentElement && nextElement) {
+      currentElement.tabIndex = -1;
+      nextElement.tabIndex = props.tabIndex;
     }
   };
   var findFirstSelectableRow = function findFirstSelectableRow(row) {
@@ -25383,32 +25444,176 @@ var BodyRow = /*#__PURE__*/React__namespace.memo(function (props) {
     onEditChange(e, false);
     event.preventDefault();
   };
+  var equalsDataCell = function equalsDataCell(data) {
+    return props.compareSelectionBy === 'equals' ? data === props.rowData : ObjectUtils.equals(data, props.rowData, props.dataKey);
+  };
+  var equalsCell = function equalsCell(selectedCell, field, colIndex) {
+    return selectedCell && (selectedCell.rowIndex === props.rowIndex || equalsDataCell(selectedCell.rowData)) && (selectedCell.field === field || selectedCell.cellIndex === colIndex);
+  };
+  var findIndexCell = function findIndexCell(collection, field, colIndex) {
+    return (collection || []).findIndex(function (data) {
+      return equalsCell(data, field, colIndex);
+    });
+  };
+  var isCellSelected = function isCellSelected(selection, field, colIndex) {
+    return selection ? selection instanceof Array ? findIndexCell(selection, field, colIndex) > -1 : equalsCell(selection, field, colIndex) : false;
+  };
+  var onCheckboxChange = function onCheckboxChange(event) {
+    props.onCheckboxChange({
+      originalEvent: event,
+      data: props.rowData,
+      index: props.rowIndex
+    });
+  };
+  var editingKey = props.dataKey ? props.rowData && props.rowData[props.dataKey] || props.rowIndex : props.rowIndex;
+  var getVirtualScrollerOption = React__namespace.useCallback(function (option) {
+    return props.virtualScrollerOptions ? props.virtualScrollerOptions[option] : null;
+  }, [props.virtualScrollerOptions]);
+  var getEditingRowData = function getEditingRowData() {
+    return props.editingMeta && props.editingMeta[editingKey] ? props.editingMeta[editingKey].data : props.rowData;
+  };
+  var getTabIndexCell = React__namespace.useCallback(function (cellSelected, cellIndex) {
+    return props.allowCellSelection ? cellSelected ? 0 : props.rowIndex === 0 && cellIndex === 0 ? props.tabIndex : -1 : null;
+  }, [props.allowCellSelection, props.rowIndex, props.tabIndex]);
+  var findNextSelectableCell = React__namespace.useCallback(function (cell) {
+    var nextCell = cell.nextElementSibling;
+    return nextCell ? DomHandler.getAttribute(nextCell, 'data-p-selectable-cell') ? nextCell : findNextSelectableCell(nextCell) : null;
+  }, []);
+  var findPrevSelectableCell = React__namespace.useCallback(function (cell) {
+    var prevCell = cell.previousElementSibling;
+    return prevCell ? DomHandler.getAttribute(prevCell, 'data-p-selectable-cell') ? prevCell : findPrevSelectableCell(prevCell) : null;
+  }, []);
+  var findDownSelectableCell = React__namespace.useCallback(function (cell, cellIndex) {
+    var downRow = cell.parentElement.nextElementSibling;
+    var downCell = downRow ? downRow.children[cellIndex] : null;
+    return downRow && downCell ? DomHandler.getAttribute(downRow, 'data-p-selectable-row') && DomHandler.getAttribute(downCell, 'data-p-selectable-cell') ? downCell : findDownSelectableCell(downCell) : null;
+  }, []);
+  var findUpSelectableCell = React__namespace.useCallback(function (cell, cellIndex) {
+    var upRow = cell.parentElement.previousElementSibling;
+    var upCell = upRow ? upRow.children[cellIndex] : null;
+    return upRow && upCell ? DomHandler.getAttribute(upRow, 'data-p-selectable-row') && DomHandler.getAttribute(upCell, 'data-p-selectable-cell') ? upCell : findUpSelectableCell(upCell) : null;
+  }, []);
+  var focusOnElement = React__namespace.useCallback(function (focusTimeoutRef, editingState, elementRef, keyHelperRef) {
+    clearTimeout(focusTimeoutRef.current);
+    focusTimeoutRef.current = setTimeout(function () {
+      if (editingState) {
+        var focusableEl = props.editMode === 'cell' ? DomHandler.getFirstFocusableElement(elementRef.current, ':not([data-pc-section="editorkeyhelperlabel"])') : DomHandler.findSingle(elementRef.current, '[data-p-row-editor-save="true"]');
+        focusableEl && focusableEl.focus();
+      }
+      keyHelperRef.current && (keyHelperRef.current.tabIndex = editingState ? -1 : 0);
+    }, 1);
+  }, [props.editMode]);
+  var focusOnInit = React__namespace.useCallback(function (initFocusTimeoutRef, elementRef) {
+    clearTimeout(initFocusTimeoutRef.current);
+    initFocusTimeoutRef.current = setTimeout(function () {
+      var focusableEl = props.editMode === 'row' ? DomHandler.findSingle(elementRef.current, '[data-p-row-editor-init="true"]') : null;
+      focusableEl && focusableEl.focus();
+    }, 1);
+  }, [props.editMode]);
+  var updateStickyPosition = React__namespace.useCallback(function (elementRef, frozen, alignFrozen, styleObjectState, setStyleObjectState) {
+    if (frozen) {
+      var styleObject = _objectSpread$1h({}, styleObjectState);
+      if (alignFrozen === 'right') {
+        var right = 0;
+        var next = elementRef.current && elementRef.current.nextElementSibling;
+        if (next && next.classList.contains('p-frozen-column')) {
+          right = DomHandler.getOuterWidth(next) + parseFloat(next.style.right || 0);
+        }
+        styleObject.right = right + 'px';
+      } else {
+        var left = 0;
+        var prev = elementRef.current && elementRef.current.previousElementSibling;
+        if (prev && prev.classList.contains('p-frozen-column')) {
+          left = DomHandler.getOuterWidth(prev) + parseFloat(prev.style.left || 0);
+        }
+        styleObject.left = left + 'px';
+      }
+      var isSameStyle = styleObjectState.left === styleObject.left && styleObjectState.right === styleObject.right;
+      !isSameStyle && setStyleObjectState(styleObject);
+    }
+  }, []);
+  var onCellClick = function onCellClick(event, params, isEditable, editingState, setEditingState, selfClick, column, bindDocumentClickListener, overlayEventListener) {
+    if (props.editMode !== 'row' && isEditable && !editingState && (props.selectOnEdit || !props.selectOnEdit && props.isRowSelected)) {
+      selfClick.current = true;
+      var onBeforeCellEditShow = getColumnProp(column, 'onBeforeCellEditShow');
+      var onCellEditInit = getColumnProp(column, 'onCellEditInit');
+      var cellEditValidatorEvent = getColumnProp(column, 'cellEditValidatorEvent');
+      if (onBeforeCellEditShow) {
+        // if user returns false do not show the editor
+        if (onBeforeCellEditShow(params) === false) {
+          return;
+        }
+
+        // if user prevents default stop the editor
+        if (event && event.defaultPrevented) {
+          return;
+        }
+      }
+
+      // If the data is sorted using sort icon, it has been added to wait for the sort operation when any cell is wanted to be opened.
+      setTimeout(function () {
+        setEditingState(true);
+        if (onCellEditInit) {
+          if (onCellEditInit(params) === false) {
+            return;
+          }
+
+          // if user prevents default stop the editor
+          if (event && event.defaultPrevented) {
+            return;
+          }
+        }
+        if (cellEditValidatorEvent === 'click') {
+          bindDocumentClickListener();
+          overlayEventListener.current = function (e) {
+            if (!isOutsideClicked(e.target)) {
+              selfClick.current = true;
+            }
+          };
+          OverlayService.on('overlay-click', overlayEventListener.current);
+        }
+      }, 1);
+    }
+    if (props.allowCellSelection && props.onCellClick) {
+      props.onCellClick(params);
+    }
+  };
   var createContent = function createContent() {
     return props.columns.map(function (col, i) {
       if (shouldRenderBodyCell(props.value, col, props.index)) {
         var key = "".concat(props.rowIndex, "_").concat(getColumnProp(col, 'columnKey') || getColumnProp(col, 'field'), "_").concat(i);
         var rowSpan = props.rowGroupMode === 'rowspan' ? calculateRowGroupSize(props.value, col, props.index) : null;
-        return /*#__PURE__*/React__namespace.createElement(BodyCell, {
+        var field = getColumnProp(col, 'field') || "field_".concat(i);
+        var resolveFieldData = function resolveFieldData(data) {
+          return ObjectUtils.resolveFieldData(data || props.rowData, field);
+        };
+        var selectionMode = getColumnProp(col, 'selectionMode');
+        var cellProps = mergeProps({
           hostName: props.hostName,
-          key: key,
           allowCellSelection: props.allowCellSelection,
           cellClassName: props.cellClassName,
           checkIcon: props.checkIcon,
           collapsedRowIcon: props.collapsedRowIcon,
+          field: field,
+          resolveFieldData: resolveFieldData,
           column: col,
-          compareSelectionBy: props.compareSelectionBy,
+          cProps: props.colsProps[i],
           dataKey: props.dataKey,
           editMode: props.editMode,
           editing: editing,
           editingMeta: props.editingMeta,
+          onEditingMetaChange: props.onEditingMetaChange,
+          editingKey: editingKey,
+          getEditingRowData: getEditingRowData,
           expanded: props.expanded,
           expandedRowIcon: props.expandedRowIcon,
           frozenRow: props.frozenRow,
+          frozenCol: getColumnProp(col, 'frozen'),
+          alignFrozenCol: getColumnProp(col, 'alignFrozen'),
           index: i,
           isSelectable: props.isSelectable,
-          onCheckboxChange: props.onCheckboxChange,
-          onClick: props.onCellClick,
-          onEditingMetaChange: props.onEditingMetaChange,
+          onCheckboxChange: onCheckboxChange,
+          onClick: onCellClick,
           onMouseDown: props.onCellMouseDown,
           onMouseUp: props.onCellMouseUp,
           onRadioChange: props.onRadioChange,
@@ -25424,20 +25629,31 @@ var BodyRow = /*#__PURE__*/React__namespace.memo(function (props) {
           rowIndex: props.rowIndex,
           rowSpan: rowSpan,
           selectOnEdit: props.selectOnEdit,
-          selected: props.selected,
-          selection: props.selection,
+          isRowSelected: isRowSelected,
+          isCellSelected: isCellSelected(props.selection, field, i),
           selectionAriaLabel: props.tableProps.selectionAriaLabel,
           showRowReorderElement: props.showRowReorderElement,
           showSelectionElement: props.showSelectionElement,
           tabIndex: props.tabIndex,
+          getTabIndex: getTabIndexCell,
           tableProps: props.tableProps,
           tableSelector: props.tableSelector,
           value: props.value,
-          virtualScrollerOptions: props.virtualScrollerOptions,
+          getVirtualScrollerOption: getVirtualScrollerOption,
           ptCallbacks: props.ptCallbacks,
           metaData: props.metaData,
-          unstyled: props.unstyled
+          unstyled: props.unstyled,
+          findNextSelectableCell: findNextSelectableCell,
+          findPrevSelectableCell: findPrevSelectableCell,
+          findDownSelectableCell: findDownSelectableCell,
+          findUpSelectableCell: findUpSelectableCell,
+          focusOnElement: focusOnElement,
+          focusOnInit: focusOnInit,
+          updateStickyPosition: updateStickyPosition
         });
+        return /*#__PURE__*/React__namespace.createElement(React.Fragment, {
+          key: key
+        }, selectionMode ? /*#__PURE__*/React__namespace.createElement(RadioCheckCell, cellProps) : /*#__PURE__*/React__namespace.createElement(BodyCell, cellProps));
       }
       return null;
     });
@@ -25587,8 +25803,11 @@ var TableBody = /*#__PURE__*/React__namespace.memo(/*#__PURE__*/React__namespace
   var getColumnProps = function getColumnProps(column) {
     return ColumnBase.getCProps(column);
   };
+  var cProps = getColumnProps(props.column);
+  var colsProps = props.columns ? props.columns.map(function (col) {
+    return getColumnProps(col);
+  }) : [];
   var getColumnPTOptions = function getColumnPTOptions(key) {
-    var cProps = getColumnProps(props.column);
     var columnMetaData = {
       props: cProps,
       parent: props.metaData,
@@ -25713,8 +25932,12 @@ var TableBody = /*#__PURE__*/React__namespace.memo(/*#__PURE__*/React__namespace
   var allowSelection = function allowSelection(event) {
     return !DomHandler.isClickable(event.originalEvent.target);
   };
+  var metaKeySelectionRef = React__namespace.useRef(props.metaKeySelection);
+  React__namespace.useEffect(function () {
+    metaKeySelectionRef.current = props.metaKeySelection;
+  }, [props.metaKeySelection]);
   var allowMetaKeySelection = function allowMetaKeySelection(event) {
-    return !rowTouched.current && (!props.metaKeySelection || props.metaKeySelection && (event.originalEvent.metaKey || event.originalEvent.ctrlKey));
+    return !rowTouched.current && (!metaKeySelectionRef.current || metaKeySelectionRef.current && (event.originalEvent.metaKey || event.originalEvent.ctrlKey));
   };
   var allowRangeSelection = function allowRangeSelection(event) {
     return isMultipleSelection() && event.originalEvent.shiftKey && anchorRowIndex.current !== null;
@@ -25787,6 +26010,10 @@ var TableBody = /*#__PURE__*/React__namespace.memo(/*#__PURE__*/React__namespace
       });
     }
   };
+  var selectionRef = React__namespace.useRef(props.selection);
+  React__namespace.useEffect(function () {
+    selectionRef.current = props.selection;
+  }, [props.selection]);
   var onSingleSelection = function onSingleSelection(_ref) {
     var originalEvent = _ref.originalEvent,
       data = _ref.data,
@@ -25800,10 +26027,11 @@ var TableBody = /*#__PURE__*/React__namespace.memo(/*#__PURE__*/React__namespace
       return;
     }
     var selected = isSelected(data);
-    var selection = props.selection;
+    var currentSelection = selectionRef.current || [];
+    var newSelection = currentSelection;
     if (selected) {
       if (toggleable) {
-        selection = null;
+        newSelection = null;
         onUnselect({
           originalEvent: originalEvent,
           data: data,
@@ -25811,7 +26039,7 @@ var TableBody = /*#__PURE__*/React__namespace.memo(/*#__PURE__*/React__namespace
         });
       }
     } else {
-      selection = data;
+      newSelection = data;
       onSelect({
         originalEvent: originalEvent,
         data: data,
@@ -25819,10 +26047,10 @@ var TableBody = /*#__PURE__*/React__namespace.memo(/*#__PURE__*/React__namespace
       });
     }
     focusOnElement(originalEvent, true);
-    if (props.onSelectionChange && selection !== props.selection) {
+    if (props.onSelectionChange && newSelection !== currentSelection) {
       props.onSelectionChange({
         originalEvent: originalEvent,
-        value: selection,
+        value: newSelection,
         type: type
       });
     }
@@ -25840,11 +26068,12 @@ var TableBody = /*#__PURE__*/React__namespace.memo(/*#__PURE__*/React__namespace
       return;
     }
     var selected = isSelected(data);
-    var selection = props.selection || [];
+    var currentSelection = selectionRef.current || [];
+    var newSelection = currentSelection;
     if (selected) {
       if (toggleable) {
-        var selectionIndex = findIndex(selection, data);
-        selection = props.selection.filter(function (val, i) {
+        var selectionIndex = findIndex(currentSelection, data);
+        newSelection = currentSelection.filter(function (val, i) {
           return i !== selectionIndex;
         });
         onUnselect({
@@ -25852,15 +26081,15 @@ var TableBody = /*#__PURE__*/React__namespace.memo(/*#__PURE__*/React__namespace
           data: data,
           type: type
         });
-      } else if (selection.length) {
-        props.selection.forEach(function (d) {
+      } else if (currentSelection.length) {
+        currentSelection.forEach(function (d) {
           return onUnselect({
             originalEvent: originalEvent,
             data: d,
             type: type
           });
         });
-        selection = [data];
+        newSelection = [data];
         onSelect({
           originalEvent: originalEvent,
           data: data,
@@ -25868,18 +26097,18 @@ var TableBody = /*#__PURE__*/React__namespace.memo(/*#__PURE__*/React__namespace
         });
       }
     } else {
-      selection = ObjectUtils.isObject(selection) ? [selection] : selection;
-      selection = toggleable && isMultipleSelection() ? [].concat(_toConsumableArray(selection), [data]) : [data];
+      newSelection = ObjectUtils.isObject(currentSelection) ? [currentSelection] : currentSelection;
+      newSelection = toggleable && isMultipleSelection() ? [].concat(_toConsumableArray(newSelection), [data]) : [data];
       onSelect({
         originalEvent: originalEvent,
         data: data,
         type: type
       });
     }
-    if (props.onSelectionChange && selection !== props.selection) {
+    if (props.onSelectionChange && newSelection !== currentSelection) {
       props.onSelectionChange({
         originalEvent: originalEvent,
-        value: selection,
+        value: newSelection,
         type: type
       });
     }
@@ -26481,6 +26710,7 @@ var TableBody = /*#__PURE__*/React__namespace.memo(/*#__PURE__*/React__namespace
         checkIcon: props.checkIcon,
         collapsedRowIcon: props.collapsedRowIcon,
         columns: props.columns,
+        colsProps: colsProps,
         compareSelectionBy: props.compareSelectionBy,
         contextMenuSelected: contextMenuSelected,
         dataKey: props.dataKey,
@@ -26960,9 +27190,17 @@ var ColumnFilter = /*#__PURE__*/React__namespace.memo(function (props) {
         var type = _ref.type,
           valid = _ref.valid;
         if (valid) {
-          type === 'outside' ? !selfClick.current && !isTargetClicked(event.target) && hide() : hide();
+          if (type === 'outside') {
+            if (!selfClick.current && !isTargetClicked(event.target)) {
+              hide();
+            }
+            selfClick.current = false;
+          } else if (context.hideOverlaysOnDocumentScrolling) {
+            hide();
+          } else if (!DomHandler.isDocument(event.target)) {
+            DomHandler.alignOverlay(overlayRef.current, iconRef.current, context && context.appendTo || PrimeReact.appendTo, false);
+          }
         }
-        selfClick.current = false;
       },
       when: overlayVisibleState
     }),
@@ -35645,7 +35883,7 @@ var InputMask = /*#__PURE__*/React__namespace.memo(/*#__PURE__*/React__namespace
   var updateValue = function updateValue(allow) {
     var pos;
     if (elementRef.current) {
-      if (props.value == null) {
+      if (ObjectUtils.isEmpty(props.value)) {
         elementRef.current.value = '';
       } else {
         elementRef.current.value = props.value;
@@ -38756,13 +38994,6 @@ var MentionBase = ComponentBase.extend({
     inputRef: null,
     inputStyle: null,
     itemTemplate: null,
-    panelClassName: null,
-    panelStyle: null,
-    scrollHeight: '200px',
-    style: null,
-    suggestions: null,
-    transitionOptions: null,
-    trigger: '@',
     onBlur: null,
     onChange: null,
     onFocus: null,
@@ -38771,6 +39002,14 @@ var MentionBase = ComponentBase.extend({
     onSearch: null,
     onSelect: null,
     onShow: null,
+    panelClassName: null,
+    panelStyle: null,
+    scrollHeight: '200px',
+    style: null,
+    suggestions: null,
+    transitionOptions: null,
+    trigger: '@',
+    variant: null,
     children: undefined
   },
   css: {
@@ -38839,8 +39078,15 @@ var Mention = /*#__PURE__*/React__namespace.memo(/*#__PURE__*/React__namespace.f
       target: elementRef,
       overlay: overlayRef,
       listener: function listener(event, _ref) {
-        var valid = _ref.valid;
-        valid && hide();
+        var valid = _ref.valid,
+          type = _ref.type;
+        if (valid) {
+          if (context.hideOverlaysOnDocumentScrolling || type === 'outside') {
+            hide();
+          } else if (!DomHandler.isDocument(event.target)) {
+            alignOverlay();
+          }
+        }
       },
       when: overlayVisibleState
     }),
@@ -39243,6 +39489,7 @@ var Mention = /*#__PURE__*/React__namespace.memo(/*#__PURE__*/React__namespace.f
     style: props.inputStyle
   }, inputProps), {}, {
     unstyled: props.unstyled,
+    variant: props.variant,
     autoResize: props.autoResize,
     onFocus: onFocus,
     onBlur: onBlur,
@@ -39410,10 +39657,15 @@ var Menu = /*#__PURE__*/React__namespace.memo(/*#__PURE__*/React__namespace.forw
       target: targetRef,
       overlay: menuRef,
       listener: function listener(event, _ref) {
-        var valid = _ref.valid;
+        var valid = _ref.valid,
+          type = _ref.type;
         if (valid) {
-          hide(event);
-          setFocusedOptionIndex(-1);
+          if (context.hideOverlaysOnDocumentScrolling || type === 'outside') {
+            hide(event);
+            setFocusedOptionIndex(-1);
+          } else if (!DomHandler.isDocument(event.target)) {
+            DomHandler.absolutePosition(menuRef.current, targetRef.current, props.popupAlignment);
+          }
         }
       },
       when: visibleState
@@ -39469,6 +39721,9 @@ var Menu = /*#__PURE__*/React__namespace.memo(/*#__PURE__*/React__namespace.forw
     props.onFocus && props.onFocus(event);
   };
   var onListBlur = function onListBlur(event) {
+    var currentTarget = event.currentTarget,
+      relatedTarget = event.relatedTarget;
+    if (relatedTarget && currentTarget.contains(relatedTarget)) return;
     setFocused(false);
     setFocusedOptionIndex(-1);
     props.onBlur && props.onBlur(event);
@@ -40071,7 +40326,6 @@ var MenubarSub = /*#__PURE__*/React__namespace.memo(/*#__PURE__*/React__namespac
       'aria-disabled': disabled,
       'aria-expanded': group ? active : undefined,
       'aria-haspopup': group && !item.url ? 'menu' : undefined,
-      'aria-level': props.level + 1,
       'aria-setsize': getAriaSetSize(),
       'aria-posinset': getAriaPosInset(index),
       'data-p-highlight': active,
@@ -40189,12 +40443,13 @@ var Menubar = /*#__PURE__*/React__namespace.memo(/*#__PURE__*/React__namespace.f
   var _useEventListener = useEventListener({
       type: 'click',
       listener: function listener(event) {
-        if (isOutsideClicked(event)) {
-          var isOutsideContainer = elementRef.current && !elementRef.current.contains(event.target);
-          if (isOutsideContainer) {
-            hide();
-          }
+        var isOutsideButton = menuButtonRef.current && !menuButtonRef.current.contains(event.target);
+        if (isOutsideButton) {
+          hide();
         }
+      },
+      options: {
+        capture: true
       }
     }),
     _useEventListener2 = _slicedToArray(_useEventListener, 2),
@@ -40249,9 +40504,6 @@ var Menubar = /*#__PURE__*/React__namespace.memo(/*#__PURE__*/React__namespace.f
   var menuButtonKeydown = function menuButtonKeydown(event) {
     (event.code === 'Enter' || event.code === 'NumpadEnter' || event.code === 'Space') && toggle(event);
   };
-  var isOutsideClicked = function isOutsideClicked(event) {
-    return rootMenuRef.current !== event.target && !rootMenuRef.current.contains(event.target) && menuButtonRef.current !== event.target && !menuButtonRef.current.contains(event.target);
-  };
   var getItemProp = function getItemProp(item, name) {
     return item ? ObjectUtils.getItemValue(item[name]) : undefined;
   };
@@ -41856,9 +42108,13 @@ var MultiSelect = /*#__PURE__*/React__namespace.memo(/*#__PURE__*/React__namespa
           valid = _ref.valid;
         if (valid) {
           if (type === 'outside') {
-            !isClearClicked(event) && !isSelectAllClicked(event) && hide();
-          } else {
+            if (!isClearClicked(event) && !isSelectAllClicked(event)) {
+              hide();
+            }
+          } else if (context.hideOverlaysOnDocumentScrolling) {
             hide();
+          } else if (!DomHandler.isDocument(event.target)) {
+            alignOverlay();
           }
         }
       },
@@ -43604,6 +43860,7 @@ var OrderList = /*#__PURE__*/React__namespace.memo(/*#__PURE__*/React__namespace
   var styleElementRef = React__namespace.useRef(null);
   var reorderDirection = React__namespace.useRef(null);
   var listElementRef = React__namespace.useRef(null);
+  var reorderedListElementRef = React__namespace.useRef(null);
   var metaData = {
     props: props,
     state: {
@@ -43829,9 +44086,9 @@ var OrderList = /*#__PURE__*/React__namespace.memo(/*#__PURE__*/React__namespace
     }
     var _focusedOptionIndex = items[order] ? items[order].getAttribute('id') : -1;
     setFocusedOptionIndex(_focusedOptionIndex);
-    scrollInView(_focusedOptionIndex);
+    scrollInViewWithFocus(_focusedOptionIndex);
   };
-  var scrollInView = function scrollInView(id) {
+  var scrollInViewWithFocus = function scrollInViewWithFocus(id) {
     var listElement = getListElement();
     var element = DomHandler.findSingle(listElement, "[data-pc-section=\"item\"][id=\"".concat(id, "\"]"));
     if (element) {
@@ -43841,6 +44098,33 @@ var OrderList = /*#__PURE__*/React__namespace.memo(/*#__PURE__*/React__namespace
       });
     }
   };
+  var scrollInView = function scrollInView(listContainer) {
+    var direction = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 1;
+    var selectedItems = listContainer.getElementsByClassName('p-highlight');
+    if (ObjectUtils.isNotEmpty(selectedItems)) {
+      DomHandler.scrollInView(listContainer, direction === -1 ? selectedItems[0] : selectedItems[selectedItems.length - 1]);
+    }
+  };
+  var handleScrollPosition = function handleScrollPosition(listElement, direction) {
+    if (listElement) {
+      switch (direction) {
+        case 'up':
+          scrollInView(listElement, -1);
+          break;
+        case 'top':
+          listElement.scrollTop = 0;
+          break;
+        case 'down':
+          scrollInView(listElement, 1);
+          break;
+        case 'bottom':
+          setTimeout(function () {
+            return listElement.scrollTop = listElement.scrollHeight;
+          }, 100);
+          break;
+      }
+    }
+  };
   var onFilter = function onFilter(event) {
     var _filterValue = event.target.value;
     setFilterValueState(_filterValue);
@@ -43875,6 +44159,7 @@ var OrderList = /*#__PURE__*/React__namespace.memo(/*#__PURE__*/React__namespace
       });
     }
     reorderDirection.current = event.direction;
+    reorderedListElementRef.current = getListElement();
   };
   var createStyle = function createStyle() {
     if (!styleElementRef.current) {
@@ -43911,7 +44196,9 @@ var OrderList = /*#__PURE__*/React__namespace.memo(/*#__PURE__*/React__namespace
     setFocusedOptionId(_focusedOptionId);
   }, [focusedOptionIndex]);
   useUpdateEffect(function () {
-    if (reorderDirection.current) {
+    if (reorderedListElementRef.current) {
+      handleScrollPosition(reorderedListElementRef.current, reorderDirection.current);
+      reorderedListElementRef.current = null;
       reorderDirection.current = null;
     }
   });
@@ -44402,18 +44689,17 @@ var OverlayPanel = /*#__PURE__*/React__namespace.forwardRef(function (inProps, r
         var type = _ref.type,
           valid = _ref.valid;
         if (valid) {
-          switch (type) {
-            case 'outside':
-              props.dismissable && !isPanelClicked.current && hide();
-              break;
-            case 'resize':
-            case 'scroll':
-            case 'orientationchange':
-              align();
-              break;
+          if (type === 'outside') {
+            if (props.dismissable && !isPanelClicked.current) {
+              hide();
+            }
+            isPanelClicked.current = false;
+          } else if (context.hideOverlaysOnDocumentScrolling) {
+            hide();
+          } else if (!DomHandler.isDocument(event.target)) {
+            align();
           }
         }
-        isPanelClicked.current = false;
       },
       when: visibleState
     }),
@@ -46170,8 +46456,15 @@ var Password = /*#__PURE__*/React__namespace.memo(/*#__PURE__*/React__namespace.
       target: elementRef,
       overlay: overlayRef,
       listener: function listener(event, _ref) {
-        var valid = _ref.valid;
-        valid && hide();
+        var valid = _ref.valid,
+          type = _ref.type;
+        if (valid) {
+          if (type === 'outside' || context.hideOverlaysOnDocumentScrolling) {
+            hide();
+          } else if (!DomHandler.isDocument(event.target)) {
+            alignOverlay();
+          }
+        }
       },
       when: overlayVisibleState
     }),
@@ -49736,8 +50029,15 @@ var SlideMenu = /*#__PURE__*/React__namespace.memo(/*#__PURE__*/React__namespace
       target: targetRef,
       overlay: menuRef,
       listener: function listener(event, _ref) {
-        var valid = _ref.valid;
-        valid && hide(event);
+        var valid = _ref.valid,
+          type = _ref.type;
+        if (valid) {
+          if (type === 'outside' || context.hideOverlaysOnDocumentScrolling) {
+            hide(event);
+          } else if (!DomHandler.isDocument(event.target)) {
+            DomHandler.absolutePosition(menuRef.current, targetRef.current);
+          }
+        }
       },
       when: visibleState
     }),
@@ -57485,9 +57785,9 @@ var TreeSelect = /*#__PURE__*/React__namespace.memo(/*#__PURE__*/React__namespac
     expandedKeysState = _React$useState6[0],
     setExpandedKeysState = _React$useState6[1];
   var _useDebounce = useDebounce('', props.filterDelay || 0),
-    _useDebounce2 = _slicedToArray(_useDebounce, 3);
-    _useDebounce2[0];
-    var filterValueState = _useDebounce2[1],
+    _useDebounce2 = _slicedToArray(_useDebounce, 3),
+    filterValue = _useDebounce2[0],
+    filterValueState = _useDebounce2[1],
     setFilterValueState = _useDebounce2[2];
   var elementRef = React__namespace.useRef(null);
   var overlayRef = React__namespace.useRef(null);
@@ -57534,8 +57834,15 @@ var TreeSelect = /*#__PURE__*/React__namespace.memo(/*#__PURE__*/React__namespac
       target: elementRef,
       overlay: overlayRef,
       listener: function listener(event, _ref) {
-        var valid = _ref.valid;
-        valid && hide();
+        var valid = _ref.valid,
+          type = _ref.type;
+        if (valid) {
+          if (type === 'outside' || context.hideOverlaysOnDocumentScrolling) {
+            hide();
+          } else if (!DomHandler.isDocument(event.target)) {
+            alignOverlay();
+          }
+        }
       },
       when: overlayVisibleState
     }),
@@ -58073,15 +58380,15 @@ var TreeSelect = /*#__PURE__*/React__namespace.memo(/*#__PURE__*/React__namespac
   };
   var createFilterElement = function createFilterElement() {
     if (props.filter) {
-      var _filterValue = props.onFilterValueChange ? props.filterValue : filteredValue;
-      _filterValue = ObjectUtils.isNotEmpty(_filterValue) ? _filterValue : '';
+      var newValue = props.onFilterValueChange ? props.filterValue : filterValue;
+      newValue = ObjectUtils.isNotEmpty(newValue) ? newValue : '';
       var filterContainerProps = mergeProps({
         className: cx('filterContainer')
       }, ptm('filterContainer'));
       var filterProps = mergeProps({
         ref: filterInputRef,
         type: 'text',
-        value: _filterValue,
+        value: newValue,
         autoComplete: 'off',
         className: cx('filter'),
         placeholder: props.filterPlaceholder,
@@ -61499,7 +61806,7 @@ var TriStateCheckboxBase = ComponentBase.extend({
     tooltip: null,
     tooltipOptions: null,
     uncheckIcon: null,
-    value: '',
+    value: null,
     children: undefined
   },
   css: {
@@ -61513,7 +61820,7 @@ var TriStateCheckbox = /*#__PURE__*/React__namespace.memo(/*#__PURE__*/React__na
   var mergeProps = useMergeProps();
   var context = React__namespace.useContext(PrimeReactContext);
   var props = TriStateCheckboxBase.getProps(inProps, context);
-  var _useState = React.useState(''),
+  var _useState = React.useState(null),
     _useState2 = _slicedToArray(_useState, 2),
     checkBoxValue = _useState2[0],
     setCheckBoxValue = _useState2[1];
@@ -61528,10 +61835,10 @@ var TriStateCheckbox = /*#__PURE__*/React__namespace.memo(/*#__PURE__*/React__na
     name: 'tristatecheckbox'
   });
   React.useEffect(function () {
-    if ([true, false, ''].includes(props.value)) {
+    if ([true, false, null].includes(props.value)) {
       setCheckBoxValue(props.value);
     } else {
-      setCheckBoxValue('');
+      setCheckBoxValue(null);
     }
   }, [props.value]);
   var onChange = function onChange(event) {
@@ -61539,12 +61846,12 @@ var TriStateCheckbox = /*#__PURE__*/React__namespace.memo(/*#__PURE__*/React__na
       return;
     }
     var newValue;
-    if (checkBoxValue === '') {
+    if (checkBoxValue === null) {
       newValue = true;
     } else if (checkBoxValue === true) {
       newValue = false;
     } else if (checkBoxValue === false) {
-      newValue = '';
+      newValue = null;
     }
     if (props.onChange) {
       props.onChange({