primereact 10.9.4 → 10.9.6

package/primereact.all.cjs.js

@@ -154,6 +154,7 @@ var FilterMatchMode = Object.freeze({
   EQUALS: 'equals',
   NOT_EQUALS: 'notEquals',
   IN: 'in',
+  NOT_IN: 'notIn',
   LESS_THAN: 'lt',
   LESS_THAN_OR_EQUAL_TO: 'lte',
   GREATER_THAN: 'gt',
@@ -593,11 +594,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 +814,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 +842,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 +887,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 +1026,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 +1368,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 +2071,124 @@ 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.
+     * @param {number} [maxDepth=1] - The maximum depth to compare if the variables are objects.
+     * @returns {boolean} True if all specified properties are equal, false otherwise.
+     */
+  }, {
+    key: "selectiveCompare",
+    value: function selectiveCompare(a, b, keysToCompare) {
+      var maxDepth = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : 1;
+      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, maxDepth)) return false;
+          if (!isObject && aValue !== bValue) return false;
+        }
+      } catch (err) {
+        _iterator2.e(err);
+      } finally {
+        _iterator2.f();
+      }
+      return true;
+    }
   }]);
 }();
 
@@ -2986,6 +3107,7 @@ var locales = {
     emptySelectionMessage: 'No selected item',
     endsWith: 'Ends with',
     equals: 'Equals',
+    fileChosenMessage: '{0} files',
     fileSizeTypes: ['B', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB'],
     filter: 'Filter',
     firstDayOfWeek: 0,
@@ -3004,6 +3126,7 @@ var locales = {
     nextMonth: 'Next Month',
     nextSecond: 'Next Second',
     nextYear: 'Next Year',
+    noFileChosenMessage: 'No file chosen',
     noFilter: 'No Filter',
     notContains: 'Not contains',
     notEquals: 'Not equals',
@@ -3031,8 +3154,10 @@ var locales = {
     aria: {
       cancelEdit: 'Cancel Edit',
       close: 'Close',
+      collapseLabel: 'Collapse',
       collapseRow: 'Row Collapsed',
       editRow: 'Edit Row',
+      expandLabel: 'Expand',
       expandRow: 'Row Expanded',
       falseLabel: 'False',
       filterConstraint: 'Filter Constraint',
@@ -3057,18 +3182,20 @@ var locales = {
       next: 'Next',
       nextPageLabel: 'Next Page',
       nullLabel: 'Not Selected',
-      pageLabel: 'Page {page}',
       otpLabel: 'Please enter one time password character {0}',
+      pageLabel: 'Page {page}',
       passwordHide: 'Hide Password',
       passwordShow: 'Show Password',
       previous: 'Previous',
       prevPageLabel: 'Previous Page',
+      removeLabel: 'Remove',
       rotateLeft: 'Rotate Left',
       rotateRight: 'Rotate Right',
       rowsPerPageLabel: 'Rows per page',
       saveEdit: 'Save Edit',
       scrollTop: 'Scroll Top',
       selectAll: 'All items selected',
+      selectLabel: 'Select',
       selectRow: 'Row Selected',
       showFilterMenu: 'Show Filter Menu',
       slide: 'Slide',
@@ -3077,6 +3204,7 @@ var locales = {
       stars: '{star} stars',
       trueLabel: 'True',
       unselectAll: 'All items unselected',
+      unselectLabel: 'Unselect',
       unselectRow: 'Row Unselected',
       zoomImage: 'Zoom Image',
       zoomIn: 'Zoom In',
@@ -4394,7 +4522,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 +4621,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 +4647,8 @@ var useOverlayListener = function useOverlayListener(_ref) {
           type: 'orientationchange',
           valid: true
         });
-      }
+      },
+      when: when
     }),
     _useEventListener4 = _slicedToArray(_useEventListener3, 2),
     bindWindowOrientationChangeListener = _useEventListener4[0],
@@ -4523,7 +4660,8 @@ var useOverlayListener = function useOverlayListener(_ref) {
           type: 'scroll',
           valid: true
         });
-      }
+      },
+      when: when
     }),
     _useOverlayScrollList2 = _slicedToArray(_useOverlayScrollList, 2),
     bindOverlayScrollListener = _useOverlayScrollList2[0],
@@ -8138,7 +8276,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 +8460,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 +8905,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 +9427,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 +9833,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 +9884,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;
       },
@@ -12025,13 +12184,32 @@ var Calendar = /*#__PURE__*/React__namespace.memo(/*#__PURE__*/React__namespace.
       return props.parseDateTime(text);
     }
     var date;
-    var parts = text.split(' ');
     if (props.timeOnly) {
       date = new Date();
-      populateTime(date, parts[0], parts[1]);
+      var match = text.match(/(\d{1,2}:\d{2}(?::\d{2})?(?:\.\d{1,3})?)\s?(AM|PM)?/i);
+      if (match) {
+        populateTime(date, match[1], match[2]);
+      } else {
+        return null;
+      }
     } else if (props.showTime) {
-      date = parseDate(parts[0], getDateFormat());
-      populateTime(date, parts[1], parts[2]);
+      var time12 = /(\d{1,2}:\d{2}(?::\d{2})?(?:\.\d{1,3})?)\s?(AM|PM)/i;
+      var time24 = /(\d{1,2}:\d{2}(?::\d{2})?(?:\.\d{1,3})?)$/;
+      var _match, datePart, timePart, ampm;
+      if (props.hourFormat === '12' && (_match = text.match(time12))) {
+        timePart = _match[1];
+        ampm = _match[2];
+        datePart = text.replace(time12, '').trim();
+      } else if (props.hourFormat === '24' && (_match = text.match(time24))) {
+        timePart = _match[1];
+        datePart = text.replace(time24, '').trim();
+      }
+      if (datePart && timePart) {
+        date = parseDate(datePart, getDateFormat());
+        populateTime(date, timePart, ampm);
+      } else {
+        date = parseDate(text, getDateFormat());
+      }
     } else {
       date = parseDate(text, getDateFormat());
     }
@@ -12420,7 +12598,7 @@ var Calendar = /*#__PURE__*/React__namespace.memo(/*#__PURE__*/React__namespace.
       viewDate.setHours(0, 0, 0);
       isClearClicked.current = false;
     }
-    if (!prevPropValue && propValue || propValue && propValue instanceof Date && propValue.getTime() !== prevPropValue.getTime()) {
+    if (!prevPropValue && propValue || propValue && propValue instanceof Date && prevPropValue instanceof Date && propValue.getTime() !== prevPropValue.getTime()) {
       validateDate(viewDate);
     }
     setViewDateState(viewDate);
@@ -12674,6 +12852,9 @@ var Calendar = /*#__PURE__*/React__namespace.memo(/*#__PURE__*/React__namespace.
       }),
       'aria-selected': selected,
       'aria-disabled': !date.selectable,
+      onMouseDown: function onMouseDown(e) {
+        return e.preventDefault();
+      },
       onClick: function onClick(e) {
         return onDateSelect(e, date);
       },
@@ -14192,6 +14373,22 @@ var Carousel = /*#__PURE__*/React__namespace.memo(/*#__PURE__*/React__namespace.
 CarouselItem.displayName = 'CarouselItem';
 Carousel.displayName = 'Carousel';
 
+var TimesIcon = /*#__PURE__*/React__namespace.memo(/*#__PURE__*/React__namespace.forwardRef(function (inProps, ref) {
+  var pti = IconBase.getPTI(inProps);
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends({
+    ref: ref,
+    width: "14",
+    height: "14",
+    viewBox: "0 0 14 14",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg"
+  }, pti), /*#__PURE__*/React__namespace.createElement("path", {
+    d: "M8.01186 7.00933L12.27 2.75116C12.341 2.68501 12.398 2.60524 12.4375 2.51661C12.4769 2.42798 12.4982 2.3323 12.4999 2.23529C12.5016 2.13827 12.4838 2.0419 12.4474 1.95194C12.4111 1.86197 12.357 1.78024 12.2884 1.71163C12.2198 1.64302 12.138 1.58893 12.0481 1.55259C11.9581 1.51625 11.8617 1.4984 11.7647 1.50011C11.6677 1.50182 11.572 1.52306 11.4834 1.56255C11.3948 1.60204 11.315 1.65898 11.2488 1.72997L6.99067 5.98814L2.7325 1.72997C2.59553 1.60234 2.41437 1.53286 2.22718 1.53616C2.03999 1.53946 1.8614 1.61529 1.72901 1.74767C1.59663 1.88006 1.5208 2.05865 1.5175 2.24584C1.5142 2.43303 1.58368 2.61419 1.71131 2.75116L5.96948 7.00933L1.71131 11.2675C1.576 11.403 1.5 11.5866 1.5 11.7781C1.5 11.9696 1.576 12.1532 1.71131 12.2887C1.84679 12.424 2.03043 12.5 2.2219 12.5C2.41338 12.5 2.59702 12.424 2.7325 12.2887L6.99067 8.03052L11.2488 12.2887C11.3843 12.424 11.568 12.5 11.7594 12.5C11.9509 12.5 12.1346 12.424 12.27 12.2887C12.4053 12.1532 12.4813 11.9696 12.4813 11.7781C12.4813 11.5866 12.4053 11.403 12.27 11.2675L8.01186 7.00933Z",
+    fill: "currentColor"
+  }));
+}));
+TimesIcon.displayName = 'TimesIcon';
+
 var classes$14 = {
   root: function root(_ref) {
     var props = _ref.props,
@@ -14228,6 +14425,7 @@ var classes$14 = {
     });
   },
   dropdownIcon: 'p-cascadeselect-trigger-icon',
+  clearIcon: 'p-cascadeselect-clear-icon p-clickable',
   loadingIcon: 'p-cascadeselect-trigger-icon',
   dropdownButton: 'p-cascadeselect-trigger',
   loadingButton: 'p-cascadeselect-trigger',
@@ -14238,7 +14436,7 @@ var classes$14 = {
   text: 'p-cascadeselect-item-text',
   transition: 'p-connected-overlay'
 };
-var styles$U = "\n@layer primereact {\n    .p-cascadeselect {\n        display: inline-flex;\n        cursor: pointer;\n        position: relative;\n        user-select: none;\n    }\n    \n    .p-cascadeselect-trigger {\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        flex-shrink: 0;\n    }\n    \n    .p-cascadeselect-label {\n        display: block;\n        white-space: nowrap;\n        overflow: hidden;\n        flex: 1 1 auto;\n        width: 1%;\n        text-overflow: ellipsis;\n        cursor: pointer;\n    }\n    \n    .p-cascadeselect-label-empty {\n        overflow: hidden;\n        visibility: hidden;\n    }\n    \n    .p-cascadeselect .p-cascadeselect-panel {\n        min-width: 100%;\n    }\n    \n    .p-cascadeselect-item {\n        cursor: pointer;\n        font-weight: normal;\n        white-space: nowrap;\n    }\n    \n    .p-cascadeselect-item-content {\n        display: flex;\n        align-items: center;\n        overflow: hidden;\n        position: relative;\n    }\n    \n    .p-cascadeselect-group-icon {\n        margin-left: auto;\n    }\n    \n    .p-cascadeselect-items {\n        margin: 0;\n        padding: 0;\n        list-style-type: none;\n        min-width: 100%;\n    }\n    \n    .p-fluid .p-cascadeselect {\n        display: flex;\n    }\n    \n    .p-fluid .p-cascadeselect .p-cascadeselect-label {\n        width: 1%;\n    }\n    \n    .p-cascadeselect-sublist-wrapper {\n        position: absolute;\n        min-width: 100%;\n        z-index: 1;\n        display: none;\n    }\n    \n    .p-cascadeselect-item-active {\n        overflow: visible;\n    }\n    \n    .p-cascadeselect-item-active > .p-cascadeselect-sublist-wrapper {\n        display: block;\n        left: 100%;\n        top: 0;\n    }\n}\n";
+var styles$U = "\n@layer primereact {\n    .p-cascadeselect {\n        display: inline-flex;\n        cursor: pointer;\n        position: relative;\n        user-select: none;\n    }\n    \n    .p-cascadeselect-trigger {\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        flex-shrink: 0;\n    }\n    \n    .p-cascadeselect-label {\n        display: block;\n        white-space: nowrap;\n        overflow: hidden;\n        flex: 1 1 auto;\n        width: 1%;\n        text-overflow: ellipsis;\n        cursor: pointer;\n    }\n    \n    .p-cascadeselect-label-empty {\n        overflow: hidden;\n        visibility: hidden;\n    }\n    \n    .p-cascadeselect .p-cascadeselect-panel {\n        min-width: 100%;\n    }\n    \n    .p-cascadeselect-item {\n        cursor: pointer;\n        font-weight: normal;\n        white-space: nowrap;\n    }\n    \n    .p-cascadeselect-item-content {\n        display: flex;\n        align-items: center;\n        overflow: hidden;\n        position: relative;\n    }\n    \n    .p-cascadeselect-group-icon {\n        margin-left: auto;\n    }\n    \n    .p-cascadeselect-items {\n        margin: 0;\n        padding: 0;\n        list-style-type: none;\n        min-width: 100%;\n    }\n    \n    .p-fluid .p-cascadeselect {\n        display: flex;\n    }\n    \n    .p-fluid .p-cascadeselect .p-cascadeselect-label {\n        width: 1%;\n    }\n    \n    .p-cascadeselect-sublist-wrapper {\n        position: absolute;\n        min-width: 100%;\n        z-index: 1;\n        display: none;\n    }\n    \n    .p-cascadeselect-item-active {\n        overflow: visible;\n    }\n    \n    .p-cascadeselect-item-active > .p-cascadeselect-sublist-wrapper {\n        display: block;\n        left: 100%;\n        top: 0;\n    }\n    .p-cascadeselect-clear-icon {\n        position: absolute;\n        top: 50%;\n        margin-top: -.5rem;\n        right: 3rem;\n    }\n}\n";
 var CascadeSelectBase = ComponentBase.extend({
   defaultProps: {
     __TYPE: 'CascadeSelect',
@@ -14271,6 +14469,8 @@ var CascadeSelectBase = ComponentBase.extend({
     optionLabel: null,
     optionValue: null,
     options: null,
+    panelClassName: null,
+    panelStyle: null,
     placeholder: null,
     scrollHeight: '400px',
     style: null,
@@ -14583,12 +14783,20 @@ var CascadeSelect = /*#__PURE__*/React__namespace.memo(/*#__PURE__*/React__names
   var styleElementRef = React__namespace.useRef(null);
   var dirty = React__namespace.useRef(false);
   var selectionPath = React__namespace.useRef(null);
+  var selfChange = React__namespace.useRef(null);
   var _useOverlayListener = useOverlayListener({
       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
     }),
@@ -14605,6 +14813,7 @@ var CascadeSelect = /*#__PURE__*/React__namespace.memo(/*#__PURE__*/React__names
   });
   var onOptionSelect = function onOptionSelect(event) {
     if (props.onChange) {
+      selfChange.current = true;
       props.onChange({
         originalEvent: event,
         value: event.value
@@ -14831,6 +15040,48 @@ var CascadeSelect = /*#__PURE__*/React__namespace.memo(/*#__PURE__*/React__names
     }, ariaProps), ptm('input'));
     return /*#__PURE__*/React__namespace.createElement("div", hiddenSelectedMessageProps, /*#__PURE__*/React__namespace.createElement("input", inputProps));
   };
+  var clear = function clear(event) {
+    if (props.onChange) {
+      selfChange.current = true;
+      props.onChange({
+        originalEvent: event,
+        value: undefined,
+        stopPropagation: function stopPropagation() {
+          event === null || event === void 0 || event.stopPropagation();
+        },
+        preventDefault: function preventDefault() {
+          event === null || event === void 0 || event.preventDefault();
+        },
+        target: {
+          name: props.name,
+          id: props.id,
+          value: undefined
+        }
+      });
+    }
+  };
+  var onClearIconKeyDown = function onClearIconKeyDown(event) {
+    if (event.key === 'Enter' || event.code === 'Space') {
+      clear(event);
+      event.preventDefault();
+    }
+  };
+  var createClearIcon = function createClearIcon() {
+    if (props.value != null && props.showClear && !props.disabled) {
+      var clearIconProps = mergeProps({
+        className: cx('clearIcon'),
+        onPointerUp: clear,
+        tabIndex: props.tabIndex || '0',
+        onKeyDown: onClearIconKeyDown,
+        'aria-label': localeOption('clear')
+      }, ptm('clearIcon'));
+      var icon = props.clearIcon || /*#__PURE__*/React__namespace.createElement(TimesIcon, clearIconProps);
+      return IconUtils.getJSXIcon(icon, _objectSpread$1H({}, clearIconProps), {
+        props: props
+      });
+    }
+    return null;
+  };
   var createLabel = function createLabel() {
     var label = props.value ? getOptionLabel(props.value) : props.placeholder || 'p-emptylabel';
     var labelProps = mergeProps({
@@ -14884,7 +15135,8 @@ var CascadeSelect = /*#__PURE__*/React__namespace.memo(/*#__PURE__*/React__names
   }, ptm('wrapper'));
   var panelProps = mergeProps({
     ref: overlayRef,
-    className: cx('panel'),
+    className: classNames(props.panelClassName, cx('panel')),
+    style: props.panelStyle,
     onClick: function onClick(e) {
       return onPanelClick(e);
     }
@@ -14933,6 +15185,7 @@ var CascadeSelect = /*#__PURE__*/React__namespace.memo(/*#__PURE__*/React__names
   var createElement = function createElement() {
     var keyboardHelper = createKeyboardHelper();
     var labelElement = createLabel();
+    var clearIcon = createClearIcon();
     var dropdownIcon = props.loading ? createLoadingIcon() : createDropdownIcon();
     var overlay = createOverlay();
     var rootProps = mergeProps({
@@ -14948,7 +15201,7 @@ var CascadeSelect = /*#__PURE__*/React__namespace.memo(/*#__PURE__*/React__names
         return _onClick(e);
       }
     }, otherProps, ptm('root'));
-    return /*#__PURE__*/React__namespace.createElement("div", rootProps, keyboardHelper, labelElement, dropdownIcon, overlay);
+    return /*#__PURE__*/React__namespace.createElement("div", rootProps, keyboardHelper, labelElement, clearIcon, dropdownIcon, overlay);
   };
   var otherProps = CascadeSelectBase.getOtherProps(props);
   ObjectUtils.reduceKeys(otherProps, DomHandler.DATA_PROPS);
@@ -15199,7 +15452,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 +15636,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 +15657,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 +15677,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 +15687,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 +15738,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 +15854,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 +16387,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
     }),
@@ -16777,22 +17050,6 @@ var FocusTrap = /*#__PURE__*/React__default["default"].memo(/*#__PURE__*/React__
 }));
 var FocusTrap$1 = FocusTrap;
 
-var TimesIcon = /*#__PURE__*/React__namespace.memo(/*#__PURE__*/React__namespace.forwardRef(function (inProps, ref) {
-  var pti = IconBase.getPTI(inProps);
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends({
-    ref: ref,
-    width: "14",
-    height: "14",
-    viewBox: "0 0 14 14",
-    fill: "none",
-    xmlns: "http://www.w3.org/2000/svg"
-  }, pti), /*#__PURE__*/React__namespace.createElement("path", {
-    d: "M8.01186 7.00933L12.27 2.75116C12.341 2.68501 12.398 2.60524 12.4375 2.51661C12.4769 2.42798 12.4982 2.3323 12.4999 2.23529C12.5016 2.13827 12.4838 2.0419 12.4474 1.95194C12.4111 1.86197 12.357 1.78024 12.2884 1.71163C12.2198 1.64302 12.138 1.58893 12.0481 1.55259C11.9581 1.51625 11.8617 1.4984 11.7647 1.50011C11.6677 1.50182 11.572 1.52306 11.4834 1.56255C11.3948 1.60204 11.315 1.65898 11.2488 1.72997L6.99067 5.98814L2.7325 1.72997C2.59553 1.60234 2.41437 1.53286 2.22718 1.53616C2.03999 1.53946 1.8614 1.61529 1.72901 1.74767C1.59663 1.88006 1.5208 2.05865 1.5175 2.24584C1.5142 2.43303 1.58368 2.61419 1.71131 2.75116L5.96948 7.00933L1.71131 11.2675C1.576 11.403 1.5 11.5866 1.5 11.7781C1.5 11.9696 1.576 12.1532 1.71131 12.2887C1.84679 12.424 2.03043 12.5 2.2219 12.5C2.41338 12.5 2.59702 12.424 2.7325 12.2887L6.99067 8.03052L11.2488 12.2887C11.3843 12.424 11.568 12.5 11.7594 12.5C11.9509 12.5 12.1346 12.424 12.27 12.2887C12.4053 12.1532 12.4813 11.9696 12.4813 11.7781C12.4813 11.5866 12.4053 11.403 12.27 11.2675L8.01186 7.00933Z",
-    fill: "currentColor"
-  }));
-}));
-TimesIcon.displayName = 'TimesIcon';
-
 var WindowMaximizeIcon = /*#__PURE__*/React__namespace.memo(/*#__PURE__*/React__namespace.forwardRef(function (inProps, ref) {
   var pti = IconBase.getPTI(inProps);
   return /*#__PURE__*/React__namespace.createElement("svg", _extends({
@@ -16946,6 +17203,7 @@ var DialogBase = ComponentBase.extend({
     resizable: true,
     rtl: false,
     showHeader: true,
+    showCloseIcon: true,
     style: null,
     transitionOptions: null,
     visible: false,
@@ -17077,7 +17335,7 @@ var Dialog = /*#__PURE__*/React__namespace.forwardRef(function (inProps, ref) {
   var focus = function focus() {
     var activeElement = document.activeElement;
     var isActiveElementInDialog = activeElement && dialogRef.current && dialogRef.current.contains(activeElement);
-    if (!isActiveElementInDialog && props.closable && props.showHeader && closeRef.current) {
+    if (!isActiveElementInDialog && props.closable && props.showCloseIcon && props.showHeader && closeRef.current) {
       closeRef.current.focus();
     }
   };
@@ -17383,7 +17641,7 @@ var Dialog = /*#__PURE__*/React__namespace.forwardRef(function (inProps, ref) {
     };
   });
   var createCloseIcon = function createCloseIcon() {
-    if (props.closable) {
+    if (props.closable && props.showCloseIcon) {
       var labelAria = props.ariaCloseIconLabel || ariaLabel('close');
       var closeButtonIconProps = mergeProps({
         className: cx('closeButtonIcon'),
@@ -17995,9 +18253,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
     }),
@@ -20193,7 +20459,7 @@ var InputNumber = /*#__PURE__*/React__namespace.memo(/*#__PURE__*/React__namespa
   var stacked = props.showButtons && props.buttonLayout === 'stacked';
   var horizontal = props.showButtons && props.buttonLayout === 'horizontal';
   var vertical = props.showButtons && props.buttonLayout === 'vertical';
-  var inputMode = props.inputMode || (props.mode === 'decimal' && !props.minFractionDigits ? 'numeric' : 'decimal');
+  var inputMode = props.inputMode || (props.mode === 'decimal' && !props.minFractionDigits && !props.maxFractionDigits ? 'numeric' : 'decimal');
   var getOptions = function getOptions() {
     var _props$minFractionDig, _props$maxFractionDig;
     return {
@@ -20628,6 +20894,10 @@ var InputNumber = /*#__PURE__*/React__namespace.memo(/*#__PURE__*/React__namespa
         event.preventDefault();
         var _char2 = event.key;
         if (_char2) {
+          // get decimal separator in current locale
+          if (_char2 === '.') {
+            _char2 = _decimalSeparator.current;
+          }
           var _isDecimalSign = isDecimalSign(_char2);
           var _isMinusSign = isMinusSign(_char2);
           if (Number(_char2) >= 0 && Number(_char2) <= 9 || _isMinusSign || _isDecimalSign) {
@@ -20742,6 +21012,7 @@ var InputNumber = /*#__PURE__*/React__namespace.memo(/*#__PURE__*/React__namespa
       suffixCharIndex = _getCharIndexes2.suffixCharIndex,
       currencyCharIndex = _getCharIndexes2.currencyCharIndex;
     var maxFractionDigits = numberFormat.current.resolvedOptions().maximumFractionDigits;
+    var hasBoundOrAffix = props.min || props.max || props.suffix || props.prefix; //only exception
     var newValueStr;
     if (sign.isMinusSign) {
       var isNewMinusSign = minusCharIndex === -1;
@@ -20761,8 +21032,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' && hasBoundOrAffix;
+        if (allowedDecimal) {
+          newValueStr = insertText(inputValue, text, selectionStart, selectionEnd);
+          updateValue(event, newValueStr, text, 'insert');
+        }
       }
     } else {
       var operation = selectionStart !== selectionEnd ? 'range-insert' : 'insert';
@@ -21725,6 +21999,7 @@ var DropdownBase = ComponentBase.extend({
     name: null,
     onBlur: null,
     onChange: null,
+    onClick: null,
     onContextMenu: null,
     onFilter: null,
     onFocus: null,
@@ -22233,7 +22508,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 +22715,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() {
@@ -22604,15 +22889,24 @@ var Dropdown = /*#__PURE__*/React__namespace.memo(/*#__PURE__*/React__namespace.
     !pressedInInputText && onEnterKey(event);
   };
   var onEnterKey = function onEnterKey(event) {
+    event.preventDefault();
     if (!overlayVisibleState) {
       setFocusedOptionIndex(-1);
       onArrowDownKey(event);
     } else {
-      if (focusedOptionIndex !== -1) {
-        onOptionSelect(event, visibleOptions[focusedOptionIndex]);
+      if (focusedOptionIndex === -1) {
+        return;
+      }
+      var focusedOption = visibleOptions[focusedOptionIndex];
+      var optionValue = getOptionValue(focusedOption);
+      if (optionValue == null || optionValue == undefined) {
+        hide();
+        resetFilter();
+        updateEditableLabel(selectedOption);
+        return;
       }
+      onOptionSelect(event, focusedOption);
     }
-    event.preventDefault();
   };
   var onEscapeKey = function onEscapeKey(event) {
     overlayVisibleState && hide();
@@ -23179,6 +23473,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 +24353,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 +24456,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 +24529,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 +24557,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 +24575,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 +24601,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 +24627,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 +24647,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 +24672,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, isOutsideClicked);
   };
   var _onMouseDown = function onMouseDown(event) {
     var params = getCellCallbackParams(event);
@@ -24554,7 +24709,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 +24717,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 +24725,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 +24733,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 +24772,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 +24784,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 +24793,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(initFocusTimeout, elementRef);
   };
   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 +24821,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 +24831,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 +24844,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 +24862,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 +24900,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 +24920,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 +24975,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 +25049,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 +25059,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 +25067,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 +25137,29 @@ 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 defaultKeysToCompare = ['rowData', 'field', 'allowCellSelection', 'isCellSelected', 'editMode', 'index', 'tabIndex', 'editing', 'expanded', 'editingMeta', 'frozenCol', 'alignFrozenCol'];
+var BodyCell = /*#__PURE__*/React__namespace.memo(function (props) {
+  return /*#__PURE__*/React__namespace.createElement(Cell, props);
+}, function (prevProps, nextProps) {
+  if (nextProps.cellMemo === false) return false;
+  var memoProps = nextProps.cellMemoProps;
+  var keysToCompare = Array.isArray(memoProps) && memoProps.every(function (prop) {
+    return typeof prop === 'string';
+  }) ? memoProps : defaultKeysToCompare;
+  var memoPropsDepth = nextProps.cellMemoPropsDepth;
+  var depth = typeof memoPropsDepth === 'number' && memoPropsDepth > 0 ? memoPropsDepth : 1;
+  return ObjectUtils.selectiveCompare(prevProps, nextProps, keysToCompare, depth);
 });
 BodyCell.displayName = 'BodyCell';
 
@@ -25011,6 +25175,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 +25189,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 +25218,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 +25548,179 @@ 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, isOutsideClicked) {
+    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,
+          cellMemo: props.cellMemo,
+          cellMemoProps: props.cellMemoProps,
+          cellMemoPropsDepth: props.cellMemoPropsDepth,
           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 +25736,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 +25910,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 +26039,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;
@@ -25735,9 +26065,6 @@ var TableBody = /*#__PURE__*/React__namespace.memo(/*#__PURE__*/React__namespace
     options = options || props.virtualScrollerOptions;
     return options ? options[option] : null;
   };
-  var getProcessedDataIndex = function getProcessedDataIndex(rowIndex) {
-    return props.lazy ? rowIndex - props.first : rowIndex;
-  };
   var findIndex = function findIndex(collection, rowData) {
     return (collection || []).findIndex(function (data) {
       return equals(rowData, data);
@@ -25787,6 +26114,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 +26131,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 +26143,7 @@ var TableBody = /*#__PURE__*/React__namespace.memo(/*#__PURE__*/React__namespace
         });
       }
     } else {
-      selection = data;
+      newSelection = data;
       onSelect({
         originalEvent: originalEvent,
         data: data,
@@ -25819,10 +26151,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 +26172,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 +26185,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 +26201,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
       });
     }
@@ -25902,16 +26235,14 @@ var TableBody = /*#__PURE__*/React__namespace.memo(/*#__PURE__*/React__namespace
     var rangeStart;
     var rangeEnd;
     var isAllowCellSelection = allowCellSelection();
-    var rangeRowIndexInProcessedData = getProcessedDataIndex(rangeRowIndex.current);
-    var anchorRowIndexInProcessedData = getProcessedDataIndex(anchorRowIndex.current);
-    if (rangeRowIndexInProcessedData > anchorRowIndexInProcessedData) {
-      rangeStart = anchorRowIndexInProcessedData;
-      rangeEnd = rangeRowIndexInProcessedData;
-    } else if (rangeRowIndexInProcessedData < anchorRowIndexInProcessedData) {
-      rangeStart = rangeRowIndexInProcessedData;
-      rangeEnd = anchorRowIndexInProcessedData;
+    if (rangeRowIndex.current > anchorRowIndex.current) {
+      rangeStart = anchorRowIndex.current;
+      rangeEnd = rangeRowIndex.current;
+    } else if (rangeRowIndex.current < anchorRowIndex.current) {
+      rangeStart = rangeRowIndex.current;
+      rangeEnd = anchorRowIndex.current;
     } else {
-      rangeStart = rangeEnd = rangeRowIndexInProcessedData;
+      rangeStart = rangeEnd = rangeRowIndex.current;
     }
     return isAllowCellSelection ? selectRangeOnCell(event, rangeStart, rangeEnd) : selectRangeOnRow(event, rangeStart, rangeEnd);
   };
@@ -25952,7 +26283,7 @@ var TableBody = /*#__PURE__*/React__namespace.memo(/*#__PURE__*/React__namespace
     for (var i = rowRangeStart; i <= rowRangeEnd; i++) {
       var rowData = value[i];
       var columns = props.columns;
-      var rowIndex = props.lazy ? i + props.first : i;
+      var rowIndex = props.paginator ? i + props.first : i;
       for (var j = cellRangeStart; j <= cellRangeEnd; j++) {
         var field = getColumnProp(columns[j], 'field');
         var _value = ObjectUtils.resolveFieldData(rowData, field);
@@ -26151,13 +26482,17 @@ var TableBody = /*#__PURE__*/React__namespace.memo(/*#__PURE__*/React__namespace
       onRangeSelection(event, 'row');
     }
   };
+  var expandedRowsRef = React__namespace.useRef(props.expandedRows);
+  React__namespace.useEffect(function () {
+    expandedRowsRef.current = props.expandedRows;
+  }, [props.expandedRows]);
   var onRowToggle = function onRowToggle(event) {
     var expandedRows;
     var dataKey = props.dataKey;
     var hasDataKey = props.groupRowsBy ? dataKey === props.groupRowsBy : !!dataKey;
     if (hasDataKey) {
       var dataKeyValue = String(ObjectUtils.resolveFieldData(event.data, dataKey));
-      expandedRows = props.expandedRows ? _objectSpread$1f({}, props.expandedRows) : {};
+      expandedRows = expandedRowsRef.current ? _objectSpread$1f({}, expandedRowsRef.current) : {};
       if (expandedRows[dataKeyValue] != null) {
         delete expandedRows[dataKeyValue];
         if (props.onRowCollapse) {
@@ -26176,8 +26511,8 @@ var TableBody = /*#__PURE__*/React__namespace.memo(/*#__PURE__*/React__namespace
         }
       }
     } else {
-      var expandedRowIndex = findIndex(props.expandedRows, event.data);
-      expandedRows = props.expandedRows ? _toConsumableArray(props.expandedRows) : [];
+      var expandedRowIndex = findIndex(expandedRowsRef.current, event.data);
+      expandedRows = expandedRowsRef.current ? _toConsumableArray(expandedRowsRef.current) : [];
       if (expandedRowIndex !== -1) {
         expandedRows = expandedRows.filter(function (_, i) {
           return i !== expandedRowIndex;
@@ -26427,7 +26762,7 @@ var TableBody = /*#__PURE__*/React__namespace.memo(/*#__PURE__*/React__namespace
     return null;
   };
   var createGroupHeader = function createGroupHeader(rowData, rowIndex, expanded, colSpan) {
-    if (isSubheaderGrouping && shouldRenderRowGroupHeader(props.value, rowData, getProcessedDataIndex(rowIndex))) {
+    if (isSubheaderGrouping && shouldRenderRowGroupHeader(props.value, rowData, rowIndex - props.first)) {
       var style = rowGroupHeaderStyle();
       var toggler = props.expandableRowGroups && /*#__PURE__*/React__namespace.createElement(RowTogglerButton, {
         hostName: props.hostName,
@@ -26477,10 +26812,14 @@ var TableBody = /*#__PURE__*/React__namespace.memo(/*#__PURE__*/React__namespace
         hostName: props.hostName,
         allowCellSelection: _allowCellSelection,
         allowRowSelection: _allowRowSelection,
+        cellMemo: props.cellMemo,
+        cellMemoProps: props.cellMemoProps,
+        cellMemoPropsDepth: props.cellMemoPropsDepth,
         cellClassName: props.cellClassName,
         checkIcon: props.checkIcon,
         collapsedRowIcon: props.collapsedRowIcon,
         columns: props.columns,
+        colsProps: colsProps,
         compareSelectionBy: props.compareSelectionBy,
         contextMenuSelected: contextMenuSelected,
         dataKey: props.dataKey,
@@ -26960,9 +27299,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
     }),
@@ -29718,58 +30065,60 @@ var DataTable = /*#__PURE__*/React__namespace.forwardRef(function (inProps, ref)
   var exportCSV = function exportCSV(options) {
     var data;
     var csv = "\uFEFF";
-    var columns = getColumns();
     if (options && options.selectionOnly) {
       data = props.selection || [];
     } else {
       data = [].concat(_toConsumableArray(props.frozenValue || []), _toConsumableArray(processedData() || []));
     }
 
-    //headers
-    columns.forEach(function (column, i) {
-      var _ref5 = [getColumnProp(column, 'field'), getColumnProp(column, 'header'), getColumnProp(column, 'exportHeader'), getColumnProp(column, 'exportable')],
+    // First build collection of exportable columns
+    var exportableColumns = getColumns().filter(function (column) {
+      var exportable = getColumnProp(column, 'exportable');
+      var field = getColumnProp(column, 'field');
+
+      // Column must be exportable (or undefined/not set) and have a field defined
+      return exportable !== false && field;
+    });
+
+    // headers
+    exportableColumns.forEach(function (column, i) {
+      var _ref5 = [getColumnProp(column, 'field'), getColumnProp(column, 'header'), getColumnProp(column, 'exportHeader')],
         field = _ref5[0],
         header = _ref5[1],
-        exportHeader = _ref5[2],
-        exportable = _ref5[3];
-      if (exportable && field) {
-        var columnHeader = String(exportHeader || header || field).replace(/"/g, '""').replace(/\n/g, "\u2028");
-        csv = csv + ('"' + columnHeader + '"');
-        if (i < columns.length - 1) {
-          csv = csv + props.csvSeparator;
-        }
+        exportHeader = _ref5[2];
+      var columnHeader = String(exportHeader || header || field).replace(/"/g, '""').replace(/\n/g, "\u2028");
+      csv = csv + ('"' + columnHeader + '"');
+      if (i < exportableColumns.length - 1) {
+        csv = csv + props.csvSeparator;
       }
     });
 
-    //body
+    // body
     data.forEach(function (record) {
       csv = csv + '\n';
-      columns.forEach(function (column, i) {
-        var _ref6 = [getColumnProp(column, 'field'), getColumnProp(column, 'exportField'), getColumnProp(column, 'exportable')],
+      exportableColumns.forEach(function (column, i) {
+        var _ref6 = [getColumnProp(column, 'field'), getColumnProp(column, 'exportField')],
           colField = _ref6[0],
-          exportField = _ref6[1],
-          exportable = _ref6[2];
+          exportField = _ref6[1];
         var field = exportField || colField;
-        if (exportable && field) {
-          var cellData = ObjectUtils.resolveFieldData(record, field);
-          if (cellData != null) {
-            if (props.exportFunction) {
-              cellData = props.exportFunction({
-                data: cellData,
-                field: field,
-                rowData: record,
-                column: column
-              });
-            } else {
-              cellData = String(cellData).replace(/"/g, '""').replace(/\n/g, "\u2028");
-            }
+        var cellData = ObjectUtils.resolveFieldData(record, field);
+        if (cellData != null) {
+          if (props.exportFunction) {
+            cellData = props.exportFunction({
+              data: cellData,
+              field: field,
+              rowData: record,
+              column: column
+            });
           } else {
-            cellData = '';
-          }
-          csv = csv + ('"' + cellData + '"');
-          if (i < columns.length - 1) {
-            csv = csv + props.csvSeparator;
+            cellData = String(cellData).replace(/"/g, '""').replace(/\n/g, "\u2028");
           }
+        } else {
+          cellData = '';
+        }
+        csv = csv + ('"' + cellData + '"');
+        if (i < exportableColumns.length - 1) {
+          csv = csv + props.csvSeparator;
         }
       });
     });
@@ -30034,6 +30383,9 @@ var DataTable = /*#__PURE__*/React__namespace.forwardRef(function (inProps, ref)
     var frozenBody = ObjectUtils.isNotEmpty(props.frozenValue) && /*#__PURE__*/React__namespace.createElement(TableBody, {
       hostName: "DataTable",
       ref: frozenBodyRef,
+      cellMemo: props.cellMemo,
+      cellMemoProps: props.cellMemoProps,
+      cellMemoPropsDepth: props.cellMemoPropsDepth,
       cellClassName: props.cellClassName,
       cellSelection: props.cellSelection,
       checkIcon: props.checkIcon,
@@ -30118,6 +30470,9 @@ var DataTable = /*#__PURE__*/React__namespace.forwardRef(function (inProps, ref)
     var body = /*#__PURE__*/React__namespace.createElement(TableBody, {
       hostName: "DataTable",
       ref: bodyRef,
+      cellMemo: props.cellMemo,
+      cellMemoProps: props.cellMemoProps,
+      cellMemoPropsDepth: props.cellMemoPropsDepth,
       cellClassName: props.cellClassName,
       cellSelection: props.cellSelection,
       checkIcon: props.checkIcon,
@@ -32538,7 +32893,7 @@ var FileUpload = /*#__PURE__*/React__namespace.memo(/*#__PURE__*/React__namespac
     var k = 1024;
     var dm = 3;
     var sizes = localeOption('fileSizeTypes');
-    if (bytes === 0) {
+    if (bytes <= 0) {
       return "0 ".concat(sizes[0]);
     }
     var i = Math.floor(Math.log(bytes) / Math.log(k));
@@ -32560,7 +32915,8 @@ var FileUpload = /*#__PURE__*/React__namespace.memo(/*#__PURE__*/React__namespac
     var selectedFiles = event.dataTransfer ? event.dataTransfer.files : event.target.files;
     for (var i = 0; i < selectedFiles.length; i++) {
       var file = selectedFiles[i];
-      if (!isFileSelected(file) && validate(file)) {
+      var shouldAddFile = props.multiple ? !isFileSelected(file) && validate(file) : validate(file);
+      if (shouldAddFile) {
         file.objectURL = window.URL.createObjectURL(file);
         currentFiles.push(file);
       }
@@ -32576,6 +32932,7 @@ var FileUpload = /*#__PURE__*/React__namespace.memo(/*#__PURE__*/React__namespac
       });
     }
     clearInput();
+    setFocusedState(false);
     if (props.mode === 'basic' && currentFiles.length > 0) {
       fileInputRef.current.style.display = 'none';
     }
@@ -34302,6 +34659,7 @@ var Galleria = /*#__PURE__*/React__namespace.memo(/*#__PURE__*/React__namespace.
         },
         options: props.transitionOptions,
         unmountOnExit: true,
+        appear: true,
         onEnter: onEnter,
         onEntering: onEntering,
         onEntered: onEntered,
@@ -35645,7 +36003,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 +39114,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 +39122,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 +39198,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 +39609,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 +39777,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 +39841,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);
@@ -39729,6 +40104,9 @@ var Menu = /*#__PURE__*/React__namespace.memo(/*#__PURE__*/React__namespace.forw
       className: classNames(item.className, cx('menuitem', {
         focused: focusedOptionIndex === key
       })),
+      onClick: function onClick(event) {
+        return onItemClick(event, item, key);
+      },
       style: sx('menuitem', {
         item: item
       }),
@@ -40071,7 +40449,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 +40566,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 +40627,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;
   };
@@ -41339,6 +41714,7 @@ var MultiSelectHeader = /*#__PURE__*/React__namespace.memo(function (props) {
         role: "searchbox",
         value: props.filterValue,
         onChange: onFilter,
+        onKeyDown: props.onFilterKeyDown,
         className: "p-multiselect-filter",
         placeholder: props.filterPlaceholder,
         pt: ptm('filterInput'),
@@ -41494,9 +41870,7 @@ var MultiSelectItem = /*#__PURE__*/React__namespace.memo(function (props) {
     'data-p-highlight': props.selected,
     'data-p-disabled': props.disabled
   }, getPTOptions('item'));
-  return /*#__PURE__*/React__namespace.createElement("li", _extends({}, itemProps, {
-    key: props.index + '_multiselectitem'
-  }), /*#__PURE__*/React__namespace.createElement("div", checkboxContainerProps, /*#__PURE__*/React__namespace.createElement(Checkbox, {
+  return /*#__PURE__*/React__namespace.createElement("li", itemProps, /*#__PURE__*/React__namespace.createElement("div", checkboxContainerProps, /*#__PURE__*/React__namespace.createElement(Checkbox, {
     ref: checkboxRef,
     checked: props.selected,
     icon: checkboxIcon,
@@ -41564,6 +41938,7 @@ var MultiSelectPanel = /*#__PURE__*/React__namespace.memo(/*#__PURE__*/React__na
       getOptionValue: props.getOptionValue,
       updateModel: props.updateModel,
       onFilter: onFilterInputChange,
+      onFilterKeyDown: props.onFilterKeyDown,
       filterPlaceholder: props.filterPlaceholder,
       onClose: props.onCloseClick,
       showSelectAll: props.showSelectAll,
@@ -41856,9 +42231,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();
           }
         }
       },
@@ -42127,6 +42506,52 @@ var MultiSelect = /*#__PURE__*/React__namespace.memo(/*#__PURE__*/React__namespa
     }
     setClicked(false);
   };
+  var onFilterKeyDown = function onFilterKeyDown(event) {
+    switch (event.code) {
+      case 'ArrowUp':
+        if (props.inline) {
+          break;
+        }
+        onArrowUpKey(event);
+        break;
+      case 'ArrowDown':
+        if (props.inline) {
+          break;
+        }
+        onArrowDownKey(event);
+        break;
+      case 'NumpadEnter':
+      case 'Enter':
+        if (props.inline) {
+          break;
+        }
+        onEnterKey(event);
+        break;
+      case 'Home':
+        if (props.inline) {
+          break;
+        }
+        onHomeKey(event);
+        event.preventDefault();
+        break;
+      case 'End':
+        if (props.inline) {
+          break;
+        }
+        onEndKey(event);
+        event.preventDefault();
+        break;
+      case 'Escape':
+        if (props.inline) {
+          break;
+        }
+        hide();
+        break;
+      case 'Tab':
+        onTabKey(event);
+        break;
+    }
+  };
   var onSelectAll = function onSelectAll(event) {
     if (props.onSelectAll) {
       props.onSelectAll(event);
@@ -42539,20 +42964,19 @@ var MultiSelect = /*#__PURE__*/React__namespace.memo(/*#__PURE__*/React__namespa
     return selectedItemsLabel;
   };
   var getLabel = function getLabel() {
-    var label;
-    if (!empty && !props.fixedPlaceholder) {
-      var _props$value;
-      if (ObjectUtils.isNotEmpty(props.maxSelectedLabels) && ((_props$value = props.value) === null || _props$value === void 0 ? void 0 : _props$value.length) > props.maxSelectedLabels) {
-        return getSelectedItemsLabel();
-      }
-      if (ObjectUtils.isArray(props.value)) {
-        return props.value.reduce(function (acc, value, index) {
-          return acc + (index !== 0 ? ', ' : '') + getLabelByValue(value);
-        }, '');
-      }
+    var _props$value;
+    if (empty || props.fixedPlaceholder) {
       return '';
     }
-    return label;
+    if (ObjectUtils.isNotEmpty(props.maxSelectedLabels) && ((_props$value = props.value) === null || _props$value === void 0 ? void 0 : _props$value.length) > props.maxSelectedLabels) {
+      return getSelectedItemsLabel();
+    }
+    if (ObjectUtils.isArray(props.value)) {
+      return props.value.reduce(function (acc, value, index) {
+        return acc + (index !== 0 ? ', ' : '') + getLabelByValue(value);
+      }, '');
+    }
+    return '';
   };
   var getLabelContent = function getLabelContent() {
     var valueLength = props.value ? props.value.length : 0;
@@ -42825,6 +43249,7 @@ var MultiSelect = /*#__PURE__*/React__namespace.memo(/*#__PURE__*/React__namespa
     getOptionValue: getOptionValue,
     updateModel: updateModel,
     onFilterInputChange: onFilterInputChange,
+    onFilterKeyDown: onFilterKeyDown,
     resetFilter: resetFilter,
     onCloseClick: onCloseClick,
     onSelectAll: onSelectAll,
@@ -42865,12 +43290,20 @@ var classes$v = {
   },
   root: function root(_ref2) {
     var props = _ref2.props;
-    return classNames('p-multistatecheckbox p-checkbox p-component', props.classNames);
+    return classNames('p-multistatecheckbox p-checkbox p-component', props.classNames, {
+      'p-variant-filled': props.variant === 'filled'
+    });
+  },
+  checkbox: function checkbox(_ref3) {
+    var props = _ref3.props;
+    return classNames(props.className, {
+      'p-invalid': props.invalid
+    });
   }
 };
 var inlineStyles$9 = {
-  checkbox: function checkbox(_ref3) {
-    var selectedOption = _ref3.selectedOption;
+  checkbox: function checkbox(_ref4) {
+    var selectedOption = _ref4.selectedOption;
     return selectedOption && selectedOption.style;
   }
 };
@@ -42895,7 +43328,9 @@ var MultiStateCheckboxBase = ComponentBase.extend({
     tooltip: null,
     tooltipOptions: null,
     value: null,
-    children: undefined
+    children: undefined,
+    invalid: false,
+    variant: null
   },
   css: {
     classes: classes$v,
@@ -43044,7 +43479,6 @@ var MultiStateCheckbox = /*#__PURE__*/React__namespace.memo(/*#__PURE__*/React__
   var ariaProps = ObjectUtils.reduceKeys(otherProps, DomHandler.ARIA_PROPS);
   var icon = createIcon();
   var ariaValueLabel = selectedOption ? getOptionAriaLabel(selectedOption) : ariaLabel('nullLabel');
-  var ariaChecked = selectedOption ? 'true' : 'false';
   var rootProps = mergeProps({
     ref: elementRef,
     id: props.id,
@@ -43053,7 +43487,8 @@ var MultiStateCheckbox = /*#__PURE__*/React__namespace.memo(/*#__PURE__*/React__
     onClick: onClick
   }, MultiStateCheckboxBase.getOtherProps(props), ptm('root'));
   var checkboxProps = mergeProps(_objectSpread$I({
-    className: classNames(props.className),
+    id: props.id + '_checkbox',
+    className: cx('checkbox'),
     style: sx('checkbox', {
       selectedOption: selectedOption
     }),
@@ -43061,8 +43496,6 @@ var MultiStateCheckbox = /*#__PURE__*/React__namespace.memo(/*#__PURE__*/React__
     onFocus: onFocus,
     onBlur: onBlur,
     onKeyDown: onKeyDown,
-    role: 'checkbox',
-    'aria-checked': ariaChecked,
     onChange: onClick,
     checked: !!selectedOption,
     disabled: props === null || props === void 0 ? void 0 : props.disabled,
@@ -43604,6 +44037,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 +44263,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 +44275,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 +44336,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 +44373,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 +44866,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 +46633,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 +50206,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
     }),
@@ -57371,7 +57848,9 @@ var TreeSelectBase = ComponentBase.extend({
     onBlur: null,
     onFilterValueChange: null,
     onHide: null,
+    onNodeClick: null,
     onNodeCollapse: null,
+    onNodeDoubleClick: null,
     onNodeExpand: null,
     onNodeSelect: null,
     onNodeUnselect: null,
@@ -57485,9 +57964,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 +58013,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
     }),
@@ -58056,6 +58542,8 @@ var TreeSelect = /*#__PURE__*/React__namespace.memo(/*#__PURE__*/React__namespac
       onCollapse: props.onNodeCollapse,
       onExpand: props.onNodeExpand,
       onFilterValueChange: onFilterValueChange,
+      onNodeClick: props.onNodeClick,
+      onNodeDoubleClick: props.onNodeDoubleClick,
       onSelect: onNodeSelect,
       onSelectionChange: onSelectionChange,
       onToggle: onNodeToggle,
@@ -58073,15 +58561,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 +61987,7 @@ var TriStateCheckboxBase = ComponentBase.extend({
     tooltip: null,
     tooltipOptions: null,
     uncheckIcon: null,
-    value: '',
+    value: null,
     children: undefined
   },
   css: {
@@ -61513,7 +62001,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 +62016,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 +62027,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({
@@ -61615,6 +62103,7 @@ var TriStateCheckbox = /*#__PURE__*/React__namespace.memo(/*#__PURE__*/React__na
   var ariaValueLabel = checkBoxValue ? ariaLabel('trueLabel') : checkBoxValue === false ? ariaLabel('falseLabel') : ariaLabel('nullLabel');
   var ariaChecked = checkBoxValue ? 'true' : 'false';
   var boxProps = mergeProps(_objectSpread({
+    id: props.id + '_box',
     className: cx('box'),
     tabIndex: props.disabled ? '-1' : props.tabIndex,
     onFocus: onFocus,