primereact 10.9.4 → 10.9.6

package/primereact.all.js

@@ -148,6 +148,7 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
     EQUALS: 'equals',
     NOT_EQUALS: 'notEquals',
     IN: 'in',
+    NOT_IN: 'notIn',
     LESS_THAN: 'lt',
     LESS_THAN_OR_EQUAL_TO: 'lte',
     GREATER_THAN: 'gt',
@@ -587,11 +588,18 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
             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';
@@ -800,13 +808,12 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
       /**
        * 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
@@ -829,10 +836,8 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
            * @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
@@ -876,13 +881,6 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
             _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;
       }
     }, {
@@ -1022,6 +1020,11 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
       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) {
@@ -1359,7 +1362,7 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
           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;
       }
 
       /**
@@ -2062,6 +2065,124 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
           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;
+      }
     }]);
   }();
 
@@ -2980,6 +3101,7 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
       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,
@@ -2998,6 +3120,7 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
       nextMonth: 'Next Month',
       nextSecond: 'Next Second',
       nextYear: 'Next Year',
+      noFileChosenMessage: 'No file chosen',
       noFilter: 'No Filter',
       notContains: 'Not contains',
       notEquals: 'Not equals',
@@ -3025,8 +3148,10 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
       aria: {
         cancelEdit: 'Cancel Edit',
         close: 'Close',
+        collapseLabel: 'Collapse',
         collapseRow: 'Row Collapsed',
         editRow: 'Edit Row',
+        expandLabel: 'Expand',
         expandRow: 'Row Expanded',
         falseLabel: 'False',
         filterConstraint: 'Filter Constraint',
@@ -3051,18 +3176,20 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
         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',
@@ -3071,6 +3198,7 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
         stars: '{star} stars',
         trueLabel: 'True',
         unselectAll: 'All items unselected',
+        unselectLabel: 'Unselect',
         unselectRow: 'Row Unselected',
         zoomImage: 'Zoom Image',
         zoomIn: 'Zoom In',
@@ -4388,7 +4516,14 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
       }
       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);
         };
@@ -4480,19 +4615,20 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
             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],
@@ -4505,7 +4641,8 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
             type: 'orientationchange',
             valid: true
           });
-        }
+        },
+        when: when
       }),
       _useEventListener4 = _slicedToArray(_useEventListener3, 2),
       bindWindowOrientationChangeListener = _useEventListener4[0],
@@ -4517,7 +4654,8 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
             type: 'scroll',
             valid: true
           });
-        }
+        },
+        when: when
       }),
       _useOverlayScrollList2 = _slicedToArray(_useOverlayScrollList, 2),
       bindOverlayScrollListener = _useOverlayScrollList2[0],
@@ -8132,7 +8270,15 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
           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
@@ -8308,6 +8454,9 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
       }
     };
     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;
@@ -8750,6 +8899,7 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
       listId: listId,
       onItemClick: selectItem,
       selectedItem: selectedItem,
+      onOverlayHide: hide,
       onClick: onPanelClick,
       getOptionGroupLabel: getOptionGroupLabel,
       getOptionGroupChildren: getOptionGroupChildren,
@@ -9271,7 +9421,8 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
         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) {
@@ -9676,7 +9827,7 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
       isUnstyled = _CalendarBase$setMeta.isUnstyled;
     useGlobalOnEscapeKey({
       callback: function callback() {
-        hide();
+        hide(null, reFocusInputField);
       },
       when: overlayVisibleState && overlayDisplayOrder,
       priority: [ESC_KEY_HANDLING_PRIORITIES.OVERLAY_PANEL, overlayDisplayOrder]
@@ -9727,7 +9878,15 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
           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;
         },
@@ -12019,13 +12178,32 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
         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());
       }
@@ -12414,7 +12592,7 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
         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);
@@ -12668,6 +12846,9 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
         }),
         'aria-selected': selected,
         'aria-disabled': !date.selectable,
+        onMouseDown: function onMouseDown(e) {
+          return e.preventDefault();
+        },
         onClick: function onClick(e) {
           return onDateSelect(e, date);
         },
@@ -14186,6 +14367,22 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
   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,
@@ -14222,6 +14419,7 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
       });
     },
     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',
@@ -14232,7 +14430,7 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
     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',
@@ -14265,6 +14463,8 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
       optionLabel: null,
       optionValue: null,
       options: null,
+      panelClassName: null,
+      panelStyle: null,
       placeholder: null,
       scrollHeight: '400px',
       style: null,
@@ -14577,12 +14777,20 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
     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
       }),
@@ -14599,6 +14807,7 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
     });
     var onOptionSelect = function onOptionSelect(event) {
       if (props.onChange) {
+        selfChange.current = true;
         props.onChange({
           originalEvent: event,
           value: event.value
@@ -14825,6 +15034,48 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
       }, 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({
@@ -14878,7 +15129,8 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
     }, 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);
       }
@@ -14927,6 +15179,7 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
     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({
@@ -14942,7 +15195,7 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
           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);
@@ -15193,7 +15446,7 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
       return props.checked === props.trueValue;
     };
     var _onChange = function onChange(event) {
-      if (props.disabled || props.readonly) {
+      if (props.disabled || props.readOnly) {
         return;
       }
       if (props.onChange) {
@@ -15377,6 +15630,10 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
       _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
       }),
@@ -15394,6 +15651,7 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
     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
@@ -15413,7 +15671,7 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
         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({
@@ -15423,7 +15681,7 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
         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({
@@ -15474,6 +15732,14 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
         }
       };
     });
+    useMountEffect(function () {
+      if (!idState) {
+        setIdState(UniqueComponentId());
+      }
+    });
+    if (!idState) {
+      return null;
+    }
     return visibleState && createElement();
   }));
   Chip.displayName = 'Chip';
@@ -15582,7 +15848,7 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
     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);
@@ -16115,8 +16381,15 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
         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
       }),
@@ -16771,22 +17044,6 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
   }));
   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({
@@ -16940,6 +17197,7 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
       resizable: true,
       rtl: false,
       showHeader: true,
+      showCloseIcon: true,
       style: null,
       transitionOptions: null,
       visible: false,
@@ -17071,7 +17329,7 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
     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();
       }
     };
@@ -17377,7 +17635,7 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
       };
     });
     var createCloseIcon = function createCloseIcon() {
-      if (props.closable) {
+      if (props.closable && props.showCloseIcon) {
         var labelAria = props.ariaCloseIconLabel || ariaLabel('close');
         var closeButtonIconProps = mergeProps({
           className: cx('closeButtonIcon'),
@@ -17989,9 +18247,17 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
           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
       }),
@@ -20187,7 +20453,7 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
     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 {
@@ -20622,6 +20888,10 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
           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) {
@@ -20736,6 +21006,7 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
         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;
@@ -20755,8 +21026,11 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
           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';
@@ -21719,6 +21993,7 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
       name: null,
       onBlur: null,
       onChange: null,
+      onClick: null,
       onContextMenu: null,
       onFilter: null,
       onFocus: null,
@@ -22227,7 +22502,15 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
           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
@@ -22426,12 +22709,14 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
         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() {
@@ -22598,15 +22883,24 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
       !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();
@@ -23173,6 +23467,7 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
       "in": overlayVisibleState,
       isOptionDisabled: isOptionDisabled,
       isSelected: isSelected,
+      onOverlayHide: hide,
       onClick: onPanelClick,
       onEnter: onOverlayEnter,
       onEntered: onOverlayEntered,
@@ -24052,7 +24347,7 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
       onChange(event);
     };
     var onChange = function onChange(event) {
-      if (props.disabled || props.readonly) {
+      if (props.disabled || props.readOnly) {
         return;
       }
       if (props.onChange) {
@@ -24155,7 +24450,7 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
         onBlur: onBlur,
         onChange: onChange,
         disabled: props.disabled,
-        readOnly: props.readonly,
+        readOnly: props.readOnly,
         required: props.required,
         tabIndex: props.tabIndex,
         className: cx('input')
@@ -24228,7 +24523,7 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
 
   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),
@@ -24256,13 +24551,9 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
     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: {
@@ -24278,10 +24569,8 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
       };
       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');
     };
@@ -24306,34 +24595,22 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
       _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
       };
@@ -24344,20 +24621,6 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
         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');
@@ -24378,7 +24641,7 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
     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
@@ -24403,128 +24666,20 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
       }
       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);
@@ -24548,7 +24703,7 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
           cell = event.currentTarget;
         switch (event.code) {
           case 'ArrowLeft':
-            var prevCell = _findPrevSelectableCell(cell);
+            var prevCell = props.findPrevSelectableCell(cell);
             if (prevCell) {
               changeTabIndex(cell, prevCell);
               prevCell.focus();
@@ -24556,7 +24711,7 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
             event.preventDefault();
             break;
           case 'ArrowRight':
-            var nextCell = _findNextSelectableCell(cell);
+            var nextCell = props.findNextSelectableCell(cell);
             if (nextCell) {
               changeTabIndex(cell, nextCell);
               nextCell.focus();
@@ -24564,7 +24719,7 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
             event.preventDefault();
             break;
           case 'ArrowUp':
-            var upCell = _findUpSelectableCell(cell);
+            var upCell = props.findUpSelectableCell(cell, index);
             if (upCell) {
               changeTabIndex(cell, upCell);
               upCell.focus();
@@ -24572,7 +24727,7 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
             event.preventDefault();
             break;
           case 'ArrowDown':
-            var downCell = _findDownSelectableCell(cell);
+            var downCell = props.findDownSelectableCell(cell, index);
             if (downCell) {
               changeTabIndex(cell, downCell);
               downCell.focus();
@@ -24611,13 +24766,6 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
         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,
@@ -24630,8 +24778,8 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
       props.onRowEditInit({
         originalEvent: event,
         data: props.rowData,
-        newData: getEditingRowData(),
-        field: field,
+        newData: props.getEditingRowData(),
+        field: props.field,
         index: props.rowIndex
       });
     };
@@ -24639,32 +24787,26 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
       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) {
@@ -24673,7 +24815,7 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
     }, [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;
       }
@@ -24683,7 +24825,7 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
         var callbackParams = getCellCallbackParams();
         var params = _objectSpread$1i(_objectSpread$1i({}, callbackParams), {}, {
           editing: editingState,
-          editingKey: editingKey
+          editingKey: props.editingKey
         });
         props.onEditingMetaChange(params);
       }
@@ -24696,16 +24838,16 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
       }
     });
     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'
       });
@@ -24714,20 +24856,20 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
     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
@@ -24752,12 +24894,12 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
         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
@@ -24772,12 +24914,12 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
         }), 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,
@@ -24827,7 +24969,7 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
           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,
@@ -24901,7 +25043,7 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
           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,
@@ -24911,7 +25053,7 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
       } 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
@@ -24919,9 +25061,9 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
       } 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,
@@ -24989,7 +25131,29 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
         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';
 
@@ -25005,6 +25169,7 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
     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,
@@ -25018,7 +25183,7 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
             data: props.rowData,
             index: props.rowIndex
           }),
-          selected: !props.allowCellSelection && props.selected || props.contextMenuSelected,
+          selected: isRowSelected,
           stripedRows: props.metaData.props.stripedRows
         }
       });
@@ -25047,10 +25212,10 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
         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) {
@@ -25377,32 +25542,179 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
       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,
@@ -25418,20 +25730,31 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
             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;
       });
@@ -25581,8 +25904,11 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
     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,
@@ -25707,8 +26033,12 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
     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;
@@ -25729,9 +26059,6 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
       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);
@@ -25781,6 +26108,10 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
         });
       }
     };
+    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,
@@ -25794,10 +26125,11 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
         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,
@@ -25805,7 +26137,7 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
           });
         }
       } else {
-        selection = data;
+        newSelection = data;
         onSelect({
           originalEvent: originalEvent,
           data: data,
@@ -25813,10 +26145,10 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
         });
       }
       focusOnElement(originalEvent, true);
-      if (props.onSelectionChange && selection !== props.selection) {
+      if (props.onSelectionChange && newSelection !== currentSelection) {
         props.onSelectionChange({
           originalEvent: originalEvent,
-          value: selection,
+          value: newSelection,
           type: type
         });
       }
@@ -25834,11 +26166,12 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
         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({
@@ -25846,15 +26179,15 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
             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,
@@ -25862,18 +26195,18 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
           });
         }
       } 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
         });
       }
@@ -25896,16 +26229,14 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
       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);
     };
@@ -25946,7 +26277,7 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
       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);
@@ -26145,13 +26476,17 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
         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) {
@@ -26170,8 +26505,8 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
           }
         }
       } 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;
@@ -26421,7 +26756,7 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
       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,
@@ -26471,10 +26806,14 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
           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,
@@ -26954,9 +27293,17 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
           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
       }),
@@ -29712,58 +30059,60 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
     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;
           }
         });
       });
@@ -30028,6 +30377,9 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
       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,
@@ -30112,6 +30464,9 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
       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,
@@ -32532,7 +32887,7 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
       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));
@@ -32554,7 +32909,8 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
       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);
         }
@@ -32570,6 +32926,7 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
         });
       }
       clearInput();
+      setFocusedState(false);
       if (props.mode === 'basic' && currentFiles.length > 0) {
         fileInputRef.current.style.display = 'none';
       }
@@ -34296,6 +34653,7 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
           },
           options: props.transitionOptions,
           unmountOnExit: true,
+          appear: true,
           onEnter: onEnter,
           onEntering: onEntering,
           onEntered: onEntered,
@@ -35639,7 +35997,7 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
     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;
@@ -38750,13 +39108,6 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
       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,
@@ -38765,6 +39116,14 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
       onSearch: null,
       onSelect: null,
       onShow: null,
+      panelClassName: null,
+      panelStyle: null,
+      scrollHeight: '200px',
+      style: null,
+      suggestions: null,
+      transitionOptions: null,
+      trigger: '@',
+      variant: null,
       children: undefined
     },
     css: {
@@ -38833,8 +39192,15 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
         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
       }),
@@ -39237,6 +39603,7 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
       style: props.inputStyle
     }, inputProps), {}, {
       unstyled: props.unstyled,
+      variant: props.variant,
       autoResize: props.autoResize,
       onFocus: onFocus,
       onBlur: onBlur,
@@ -39404,10 +39771,15 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
         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
@@ -39463,6 +39835,9 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
       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);
@@ -39723,6 +40098,9 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
         className: classNames(item.className, cx('menuitem', {
           focused: focusedOptionIndex === key
         })),
+        onClick: function onClick(event) {
+          return onItemClick(event, item, key);
+        },
         style: sx('menuitem', {
           item: item
         }),
@@ -40065,7 +40443,6 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
         '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,
@@ -40183,12 +40560,13 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
     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),
@@ -40243,9 +40621,6 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
     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;
     };
@@ -41333,6 +41708,7 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
           role: "searchbox",
           value: props.filterValue,
           onChange: onFilter,
+          onKeyDown: props.onFilterKeyDown,
           className: "p-multiselect-filter",
           placeholder: props.filterPlaceholder,
           pt: ptm('filterInput'),
@@ -41488,9 +41864,7 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
       '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,
@@ -41558,6 +41932,7 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
         getOptionValue: props.getOptionValue,
         updateModel: props.updateModel,
         onFilter: onFilterInputChange,
+        onFilterKeyDown: props.onFilterKeyDown,
         filterPlaceholder: props.filterPlaceholder,
         onClose: props.onCloseClick,
         showSelectAll: props.showSelectAll,
@@ -41850,9 +42225,13 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
             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();
             }
           }
         },
@@ -42121,6 +42500,52 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
       }
       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);
@@ -42533,20 +42958,19 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
       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;
@@ -42819,6 +43243,7 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
       getOptionValue: getOptionValue,
       updateModel: updateModel,
       onFilterInputChange: onFilterInputChange,
+      onFilterKeyDown: onFilterKeyDown,
       resetFilter: resetFilter,
       onCloseClick: onCloseClick,
       onSelectAll: onSelectAll,
@@ -42859,12 +43284,20 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
     },
     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;
     }
   };
@@ -42889,7 +43322,9 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
       tooltip: null,
       tooltipOptions: null,
       value: null,
-      children: undefined
+      children: undefined,
+      invalid: false,
+      variant: null
     },
     css: {
       classes: classes$v,
@@ -43038,7 +43473,6 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
     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,
@@ -43047,7 +43481,8 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
       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
       }),
@@ -43055,8 +43490,6 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
       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,
@@ -43598,6 +44031,7 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
     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: {
@@ -43823,9 +44257,9 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
       }
       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) {
@@ -43835,6 +44269,33 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
         });
       }
     };
+    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);
@@ -43869,6 +44330,7 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
         });
       }
       reorderDirection.current = event.direction;
+      reorderedListElementRef.current = getListElement();
     };
     var createStyle = function createStyle() {
       if (!styleElementRef.current) {
@@ -43905,7 +44367,9 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
       setFocusedOptionId(_focusedOptionId);
     }, [focusedOptionIndex]);
     useUpdateEffect(function () {
-      if (reorderDirection.current) {
+      if (reorderedListElementRef.current) {
+        handleScrollPosition(reorderedListElementRef.current, reorderDirection.current);
+        reorderedListElementRef.current = null;
         reorderDirection.current = null;
       }
     });
@@ -44396,18 +44860,17 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
           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
       }),
@@ -46164,8 +46627,15 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
         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
       }),
@@ -49730,8 +50200,15 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
         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
       }),
@@ -57365,7 +57842,9 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
       onBlur: null,
       onFilterValueChange: null,
       onHide: null,
+      onNodeClick: null,
       onNodeCollapse: null,
+      onNodeDoubleClick: null,
       onNodeExpand: null,
       onNodeSelect: null,
       onNodeUnselect: null,
@@ -57479,9 +57958,9 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
       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);
@@ -57528,8 +58007,15 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
         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
       }),
@@ -58050,6 +58536,8 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
         onCollapse: props.onNodeCollapse,
         onExpand: props.onNodeExpand,
         onFilterValueChange: onFilterValueChange,
+        onNodeClick: props.onNodeClick,
+        onNodeDoubleClick: props.onNodeDoubleClick,
         onSelect: onNodeSelect,
         onSelectionChange: onSelectionChange,
         onToggle: onNodeToggle,
@@ -58067,15 +58555,15 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
     };
     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,
@@ -61493,7 +61981,7 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
       tooltip: null,
       tooltipOptions: null,
       uncheckIcon: null,
-      value: '',
+      value: null,
       children: undefined
     },
     css: {
@@ -61507,7 +61995,7 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
     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];
@@ -61522,10 +62010,10 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
       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) {
@@ -61533,12 +62021,12 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
         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({
@@ -61609,6 +62097,7 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
     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,