primereact 9.1.0 → 9.2.0

package/primereact.all.cjs.js

@@ -293,7 +293,7 @@ var DomHandler = /*#__PURE__*/function () {
     key: "getOuterWidth",
     value: function getOuterWidth(el, margin) {
       if (el) {
-        var width = el.offsetWidth || el.getBoundingClientRect().width;
+        var width = el.getBoundingClientRect().width || el.offsetWidth;
         if (margin) {
           var style = getComputedStyle(el);
           width += parseFloat(style.marginLeft) + parseFloat(style.marginRight);
@@ -306,7 +306,7 @@ var DomHandler = /*#__PURE__*/function () {
     key: "getOuterHeight",
     value: function getOuterHeight(el, margin) {
       if (el) {
-        var height = el.offsetHeight || el.getBoundingClientRect().height;
+        var height = el.getBoundingClientRect().height || el.offsetHeight;
         if (margin) {
           var style = getComputedStyle(el);
           height += parseFloat(style.marginTop) + parseFloat(style.marginBottom);
@@ -490,7 +490,7 @@ var DomHandler = /*#__PURE__*/function () {
   }, {
     key: "absolutePosition",
     value: function absolutePosition(element, target) {
-      if (element) {
+      if (element && target) {
         var elementDimensions = element.offsetParent ? {
           width: element.offsetWidth,
           height: element.offsetHeight
@@ -522,7 +522,7 @@ var DomHandler = /*#__PURE__*/function () {
   }, {
     key: "relativePosition",
     value: function relativePosition(element, target) {
-      if (element) {
+      if (element && target) {
         var elementDimensions = element.offsetParent ? {
           width: element.offsetWidth,
           height: element.offsetHeight
@@ -1957,12 +1957,17 @@ var ObjectUtils = /*#__PURE__*/function () {
     key: "isValidChild",
     value: function isValidChild(child, type, validTypes) {
       /* eslint-disable */
-      try {
-        if ("production" !== 'production' && this.getProp(child, '__TYPE') !== type && child.type.displayName !== type) ;
-      } catch (error) {
-        // NOOP
+      if (child) {
+        var childType = this.getComponentProp(child, '__TYPE') || (child.type ? child.type.displayName : undefined);
+        var isValid = childType === type;
+        try {
+          var messageTypes; if ("production" !== 'production' && !isValid) ;
+        } catch (error) {
+          // NOOP
+        }
+        return isValid;
       }
-      return true;
+      return false;
       /* eslint-enable */
     }
   }, {
@@ -2965,6 +2970,34 @@ var useInterval = function useInterval(fn) {
 };
 /* eslint-enable */
 
+var useMatchMedia = function useMatchMedia(query) {
+  var when = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : true;
+  var _React$useState = React__namespace.useState(false),
+    _React$useState2 = _slicedToArray(_React$useState, 2),
+    matches = _React$useState2[0],
+    setMatches = _React$useState2[1];
+  var matchMedia = React__namespace.useRef(null);
+  var handleChange = function handleChange(e) {
+    return setMatches(e.matches);
+  };
+  var bind = function bind() {
+    return matchMedia.current && matchMedia.current.addEventListener('change', handleChange);
+  };
+  var unbind = function unbind() {
+    return matchMedia.current && matchMedia.current.removeEventListener('change', handleChange) && (matchMedia.current = null);
+  };
+  React__namespace.useEffect(function () {
+    if (when) {
+      matchMedia.current = window.matchMedia(query);
+      setMatches(matchMedia.current.matches);
+      bind();
+    }
+    return unbind;
+  }, [query, when]);
+  return matches;
+};
+/* eslint-enable */
+
 /* eslint-disable */
 var useMountEffect = function useMountEffect(fn) {
   return React__namespace.useEffect(fn, []);
@@ -3290,11 +3323,14 @@ var useOverlayScrollListener = function useOverlayScrollListener(_ref) {
 /* eslint-enable */
 
 var useResizeListener = function useResizeListener(_ref) {
-  var listener = _ref.listener;
+  var listener = _ref.listener,
+    _ref$when = _ref.when,
+    when = _ref$when === void 0 ? true : _ref$when;
   return useEventListener({
     target: 'window',
     type: 'resize',
-    listener: listener
+    listener: listener,
+    when: when
   });
 };
 
@@ -4743,14 +4779,18 @@ var VirtualScrollerBase = {
     id: null,
     style: null,
     className: null,
+    tabIndex: 0,
     items: null,
     itemSize: 0,
     scrollHeight: null,
     scrollWidth: null,
     orientation: 'vertical',
+    step: 0,
     numToleratedItems: null,
     delay: 0,
     resizeDelay: 10,
+    appendOnly: false,
+    inline: false,
     lazy: false,
     disabled: false,
     loaderDisabled: false,
@@ -4780,6 +4820,7 @@ function ownKeys$v(object, enumerableOnly) { var keys = Object.keys(object); if
 function _objectSpread$v(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$v(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$v(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 var VirtualScroller = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__namespace.forwardRef(function (inProps, ref) {
   var props = VirtualScrollerBase.getProps(inProps);
+  var prevProps = usePrevious(inProps) || {};
   var vertical = props.orientation === 'vertical';
   var horizontal = props.orientation === 'horizontal';
   var both = props.orientation === 'both';
@@ -4797,25 +4838,29 @@ var VirtualScroller = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__na
     _React$useState4 = _slicedToArray(_React$useState3, 2),
     lastState = _React$useState4[0],
     setLastState = _React$useState4[1];
-  var _React$useState5 = React__namespace.useState(both ? {
+  var _React$useState5 = React__namespace.useState(0),
+    _React$useState6 = _slicedToArray(_React$useState5, 2),
+    pageState = _React$useState6[0],
+    setPageState = _React$useState6[1];
+  var _React$useState7 = React__namespace.useState(both ? {
       rows: 0,
       cols: 0
     } : 0),
-    _React$useState6 = _slicedToArray(_React$useState5, 2),
-    numItemsInViewportState = _React$useState6[0],
-    setNumItemsInViewportState = _React$useState6[1];
-  var _React$useState7 = React__namespace.useState(props.numToleratedItems),
     _React$useState8 = _slicedToArray(_React$useState7, 2),
-    numToleratedItemsState = _React$useState8[0],
-    setNumToleratedItemsState = _React$useState8[1];
-  var _React$useState9 = React__namespace.useState(props.loading || false),
+    numItemsInViewportState = _React$useState8[0],
+    setNumItemsInViewportState = _React$useState8[1];
+  var _React$useState9 = React__namespace.useState(props.numToleratedItems),
     _React$useState10 = _slicedToArray(_React$useState9, 2),
-    loadingState = _React$useState10[0],
-    setLoadingState = _React$useState10[1];
-  var _React$useState11 = React__namespace.useState([]),
+    numToleratedItemsState = _React$useState10[0],
+    setNumToleratedItemsState = _React$useState10[1];
+  var _React$useState11 = React__namespace.useState(props.loading || false),
     _React$useState12 = _slicedToArray(_React$useState11, 2),
-    loaderArrState = _React$useState12[0],
-    setLoaderArrState = _React$useState12[1];
+    loadingState = _React$useState12[0],
+    setLoadingState = _React$useState12[1];
+  var _React$useState13 = React__namespace.useState([]),
+    _React$useState14 = _slicedToArray(_React$useState13, 2),
+    loaderArrState = _React$useState14[0],
+    setLoaderArrState = _React$useState14[1];
   var elementRef = React__namespace.useRef(null);
   var _contentRef = React__namespace.useRef(null);
   var _spacerRef = React__namespace.useRef(null);
@@ -4826,14 +4871,19 @@ var VirtualScroller = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__na
   } : 0);
   var scrollTimeout = React__namespace.useRef(null);
   var resizeTimeout = React__namespace.useRef(null);
+  var contentStyle = React__namespace.useRef({});
+  var spacerStyle = React__namespace.useRef({});
   var defaultWidth = React__namespace.useRef(null);
   var defaultHeight = React__namespace.useRef(null);
-  var prevItems = usePrevious(props.items);
-  var prevLoading = usePrevious(props.loading);
+  var defaultContentWidth = React__namespace.useRef(null);
+  var defaultContentHeight = React__namespace.useRef(null);
+  var isItemRangeChanged = React__namespace.useRef(false);
+  var lazyLoadState = React__namespace.useRef(null);
   var _useResizeListener = useResizeListener({
       listener: function listener(event) {
         return onResize();
-      }
+      },
+      when: !props.disabled
     }),
     _useResizeListener2 = _slicedToArray(_useResizeListener, 1),
     bindWindowResizeListener = _useResizeListener2[0];
@@ -4842,13 +4892,23 @@ var VirtualScroller = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__na
       type: 'orientationchange',
       listener: function listener(event) {
         return onResize();
-      }
+      },
+      when: !props.disabled
     }),
     _useEventListener2 = _slicedToArray(_useEventListener, 1),
     bindOrientationChangeListener = _useEventListener2[0];
   var getElementRef = function getElementRef() {
     return elementRef;
   };
+  var getPageByFirst = function getPageByFirst(first) {
+    return Math.floor((first + numToleratedItemsState * 4) / (props.step || 1));
+  };
+  var setContentElement = function setContentElement(element) {
+    _contentRef.current = element || _contentRef.current || DomHandler.findSingle(elementRef.current, '.p-virtualscroller-content');
+  };
+  var isPageChanged = function isPageChanged(first) {
+    return props.step ? pageState !== getPageByFirst(first) : true;
+  };
   var scrollTo = function scrollTo(options) {
     lastScrollPos.current = both ? {
       top: 0,
@@ -4860,13 +4920,14 @@ var VirtualScroller = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__na
     var behavior = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'auto';
     var _calculateNumItems = calculateNumItems(),
       numToleratedItems = _calculateNumItems.numToleratedItems;
+    var contentPos = getContentPosition();
     var calculateFirst = function calculateFirst() {
       var _index = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 0;
       var _numT = arguments.length > 1 ? arguments[1] : undefined;
       return _index <= _numT ? 0 : _index;
     };
-    var calculateCoord = function calculateCoord(_first, _size) {
-      return _first * _size;
+    var calculateCoord = function calculateCoord(_first, _size, _cpos) {
+      return _first * _size + _cpos;
     };
     var scrollToItem = function scrollToItem() {
       var left = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 0;
@@ -4877,20 +4938,25 @@ var VirtualScroller = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__na
         behavior: behavior
       });
     };
+    var newFirst = both ? {
+      rows: 0,
+      cols: 0
+    } : 0;
+    var isRangeChanged = false;
     if (both) {
-      var newFirst = {
+      newFirst = {
         rows: calculateFirst(index[0], numToleratedItems[0]),
         cols: calculateFirst(index[1], numToleratedItems[1])
       };
-      if (newFirst.rows !== firstState.rows || newFirst.cols !== firstState.cols) {
-        scrollToItem(calculateCoord(newFirst.cols, props.itemSize[1]), calculateCoord(newFirst.rows, props.itemSize[0]));
-      }
+      scrollToItem(calculateCoord(newFirst.cols, props.itemSize[1], contentPos.left), calculateCoord(newFirst.rows, props.itemSize[0], contentPos.top));
+      isRangeChanged = firstState.rows !== newFirst.rows || firstState.cols !== newFirst.cols;
     } else {
-      var _newFirst = calculateFirst(index, numToleratedItems);
-      if (_newFirst !== firstState) {
-        horizontal ? scrollToItem(calculateCoord(_newFirst, props.itemSize), 0) : scrollToItem(0, calculateCoord(_newFirst, props.itemSize));
-      }
+      newFirst = calculateFirst(index, numToleratedItems);
+      horizontal ? scrollToItem(calculateCoord(newFirst, props.itemSize, contentPos.left), 0) : scrollToItem(0, calculateCoord(newFirst, props.itemSize, contentPos.top));
+      isRangeChanged = firstState !== newFirst;
     }
+    isItemRangeChanged.current = isRangeChanged;
+    setFirstState(newFirst);
   };
   var scrollInView = function scrollInView(index, to) {
     var behavior = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 'auto';
@@ -5007,7 +5073,8 @@ var VirtualScroller = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__na
     var _calculateNumItems2 = calculateNumItems(),
       numItemsInViewport = _calculateNumItems2.numItemsInViewport,
       numToleratedItems = _calculateNumItems2.numToleratedItems;
-    var calculateLast = function calculateLast(_first, _num, _numT, _isCols) {
+    var calculateLast = function calculateLast(_first, _num, _numT) {
+      var _isCols = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : false;
       return getLast(_first + _num + (_first < _numT ? 2 : 3) * _numT, _isCols);
     };
     var last = both ? {
@@ -5029,9 +5096,15 @@ var VirtualScroller = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__na
       }));
     }
     if (props.lazy) {
-      props.onLazyLoad && props.onLazyLoad({
-        first: firstState,
-        last: last
+      Promise.resolve().then(function () {
+        lazyLoadState.current = {
+          first: props.step ? both ? {
+            rows: 0,
+            cols: firstState.cols
+          } : 0 : firstState,
+          last: Math.min(props.step ? props.step : last, props.items.length)
+        };
+        props.onLazyLoad && props.onLazyLoad(lazyLoadState.current);
       });
     }
   };
@@ -5040,12 +5113,21 @@ var VirtualScroller = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__na
       Promise.resolve().then(function () {
         if (_contentRef.current) {
           _contentRef.current.style.minHeight = _contentRef.current.style.minWidth = 'auto';
-          var _contentRef$current = _contentRef.current,
-            offsetWidth = _contentRef$current.offsetWidth,
-            offsetHeight = _contentRef$current.offsetHeight;
-          (both || horizontal) && (elementRef.current.style.width = (offsetWidth < defaultWidth.current ? offsetWidth : defaultWidth.current) + 'px');
-          (both || vertical) && (elementRef.current.style.height = (offsetHeight < defaultHeight.current ? offsetHeight : defaultHeight.current) + 'px');
+          _contentRef.current.style.position = 'relative';
+          elementRef.current.style.contain = 'none';
+
+          /*const [contentWidth, contentHeight] = [DomHandler.getWidth(contentRef.current), DomHandler.getHeight(contentRef.current)];
+           contentWidth !== defaultContentWidth.current && (elementRef.current.style.width = '');
+          contentHeight !== defaultContentHeight.current && (elementRef.current.style.height = '');*/
+
+          var _ref = [DomHandler.getWidth(elementRef.current), DomHandler.getHeight(elementRef.current)],
+            width = _ref[0],
+            height = _ref[1];
+          (both || horizontal) && (elementRef.current.style.width = (width < defaultWidth.current ? width : props.scrollWidth || defaultWidth.current) + 'px');
+          (both || vertical) && (elementRef.current.style.height = (height < defaultHeight.current ? height : props.scrollHeight || defaultHeight.current) + 'px');
           _contentRef.current.style.minHeight = _contentRef.current.style.minWidth = '';
+          _contentRef.current.style.position = '';
+          elementRef.current.style.contain = '';
         }
       });
     }
@@ -5058,10 +5140,10 @@ var VirtualScroller = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__na
   var getContentPosition = function getContentPosition() {
     if (_contentRef.current) {
       var style = getComputedStyle(_contentRef.current);
-      var left = parseInt(style.paddingLeft, 10) + Math.max(parseInt(style.left, 10), 0);
-      var right = parseInt(style.paddingRight, 10) + Math.max(parseInt(style.right, 10), 0);
-      var top = parseInt(style.paddingTop, 10) + Math.max(parseInt(style.top, 10), 0);
-      var bottom = parseInt(style.paddingBottom, 10) + Math.max(parseInt(style.bottom, 10), 0);
+      var left = parseFloat(style.paddingLeft) + Math.max(parseFloat(style.left) || 0, 0);
+      var right = parseFloat(style.paddingRight) + Math.max(parseFloat(style.right) || 0, 0);
+      var top = parseFloat(style.paddingTop) + Math.max(parseFloat(style.top) || 0, 0);
+      var bottom = parseFloat(style.paddingBottom) + Math.max(parseFloat(style.bottom) || 0, 0);
       return {
         left: left,
         right: right,
@@ -5098,11 +5180,11 @@ var VirtualScroller = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__na
   };
   var setSpacerSize = function setSpacerSize() {
     var items = props.items;
-    if (_spacerRef.current && items) {
+    if (items) {
       var contentPos = getContentPosition();
       var setProp = function setProp(_name, _value, _size) {
         var _cpos = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : 0;
-        return _spacerRef.current.style[_name] = (_value || []).length * _size + _cpos + 'px';
+        return spacerStyle.current = _objectSpread$v(_objectSpread$v({}, spacerStyle.current), _defineProperty({}, "".concat(_name), (_value || []).length * _size + _cpos + 'px'));
       };
       if (both) {
         setProp('height', items, props.itemSize[0], contentPos.y);
@@ -5113,7 +5195,7 @@ var VirtualScroller = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__na
     }
   };
   var setContentPosition = function setContentPosition(pos) {
-    if (_contentRef.current) {
+    if (_contentRef.current && !props.appendOnly) {
       var first = pos ? pos.first : firstState;
       var calculateTranslateVal = function calculateTranslateVal(_first, _size) {
         return _first * _size;
@@ -5122,7 +5204,9 @@ var VirtualScroller = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__na
         var _x = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 0;
         var _y = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;
         _stickyRef.current && (_stickyRef.current.style.top = "-".concat(_y, "px"));
-        _contentRef.current.style.transform = "translate3d(".concat(_x, "px, ").concat(_y, "px, 0)");
+        contentStyle.current = _objectSpread$v(_objectSpread$v({}, contentStyle.current), {
+          transform: "translate3d(".concat(_x, "px, ").concat(_y, "px, 0)")
+        });
       };
       if (both) {
         setTransform(calculateTranslateVal(first.cols, props.itemSize[1]), calculateTranslateVal(first.rows, props.itemSize[0]));
@@ -5166,36 +5250,40 @@ var VirtualScroller = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__na
     if (both) {
       var isScrollDown = lastScrollPos.current.top <= scrollTop;
       var isScrollRight = lastScrollPos.current.left <= scrollLeft;
-      var currentIndex = {
-        rows: calculateCurrentIndex(scrollTop, props.itemSize[0]),
-        cols: calculateCurrentIndex(scrollLeft, props.itemSize[1])
-      };
-      var triggerIndex = {
-        rows: calculateTriggerIndex(currentIndex.rows, firstState.rows, lastState.rows, numItemsInViewportState.rows, numToleratedItemsState[0], isScrollDown),
-        cols: calculateTriggerIndex(currentIndex.cols, firstState.cols, lastState.cols, numItemsInViewportState.cols, numToleratedItemsState[1], isScrollRight)
-      };
-      newFirst = {
-        rows: calculateFirst(currentIndex.rows, triggerIndex.rows, firstState.rows, lastState.rows, numItemsInViewportState.rows, numToleratedItemsState[0], isScrollDown),
-        cols: calculateFirst(currentIndex.cols, triggerIndex.cols, firstState.cols, lastState.cols, numItemsInViewportState.cols, numToleratedItemsState[1], isScrollRight)
-      };
-      newLast = {
-        rows: calculateLast(currentIndex.rows, newFirst.rows, lastState.rows, numItemsInViewportState.rows, numToleratedItemsState[0]),
-        cols: calculateLast(currentIndex.cols, newFirst.cols, lastState.cols, numItemsInViewportState.cols, numToleratedItemsState[1], true)
-      };
-      isRangeChanged = newFirst.rows !== firstState.rows || newLast.rows !== lastState.rows || newFirst.cols !== firstState.cols || newLast.cols !== lastState.cols;
-      newScrollPos = {
-        top: scrollTop,
-        left: scrollLeft
-      };
+      if (!props.appendOnly || props.appendOnly && (isScrollDown || isScrollRight)) {
+        var currentIndex = {
+          rows: calculateCurrentIndex(scrollTop, props.itemSize[0]),
+          cols: calculateCurrentIndex(scrollLeft, props.itemSize[1])
+        };
+        var triggerIndex = {
+          rows: calculateTriggerIndex(currentIndex.rows, firstState.rows, lastState.rows, numItemsInViewportState.rows, numToleratedItemsState[0], isScrollDown),
+          cols: calculateTriggerIndex(currentIndex.cols, firstState.cols, lastState.cols, numItemsInViewportState.cols, numToleratedItemsState[1], isScrollRight)
+        };
+        newFirst = {
+          rows: calculateFirst(currentIndex.rows, triggerIndex.rows, firstState.rows, lastState.rows, numItemsInViewportState.rows, numToleratedItemsState[0], isScrollDown),
+          cols: calculateFirst(currentIndex.cols, triggerIndex.cols, firstState.cols, lastState.cols, numItemsInViewportState.cols, numToleratedItemsState[1], isScrollRight)
+        };
+        newLast = {
+          rows: calculateLast(currentIndex.rows, newFirst.rows, lastState.rows, numItemsInViewportState.rows, numToleratedItemsState[0]),
+          cols: calculateLast(currentIndex.cols, newFirst.cols, lastState.cols, numItemsInViewportState.cols, numToleratedItemsState[1], true)
+        };
+        isRangeChanged = newFirst.rows !== firstState.rows || newLast.rows !== lastState.rows || newFirst.cols !== firstState.cols || newLast.cols !== lastState.cols || isItemRangeChanged.current;
+        newScrollPos = {
+          top: scrollTop,
+          left: scrollLeft
+        };
+      }
     } else {
       var scrollPos = horizontal ? scrollLeft : scrollTop;
       var isScrollDownOrRight = lastScrollPos.current <= scrollPos;
-      var _currentIndex2 = calculateCurrentIndex(scrollPos, props.itemSize);
-      var _triggerIndex2 = calculateTriggerIndex(_currentIndex2, firstState, lastState, numItemsInViewportState, numToleratedItemsState, isScrollDownOrRight);
-      newFirst = calculateFirst(_currentIndex2, _triggerIndex2, firstState, lastState, numItemsInViewportState, numToleratedItemsState, isScrollDownOrRight);
-      newLast = calculateLast(_currentIndex2, newFirst, lastState, numItemsInViewportState, numToleratedItemsState);
-      isRangeChanged = newFirst !== firstState || newLast !== lastState;
-      newScrollPos = scrollPos;
+      if (!props.appendOnly || props.appendOnly && isScrollDownOrRight) {
+        var _currentIndex2 = calculateCurrentIndex(scrollPos, props.itemSize);
+        var _triggerIndex2 = calculateTriggerIndex(_currentIndex2, firstState, lastState, numItemsInViewportState, numToleratedItemsState, isScrollDownOrRight);
+        newFirst = calculateFirst(_currentIndex2, _triggerIndex2, firstState, lastState, numItemsInViewportState, numToleratedItemsState, isScrollDownOrRight);
+        newLast = calculateLast(_currentIndex2, newFirst, lastState, numItemsInViewportState, numToleratedItemsState);
+        isRangeChanged = newFirst !== firstState || newLast !== lastState || isItemRangeChanged.current;
+        newScrollPos = scrollPos;
+      }
     }
     return {
       first: newFirst,
@@ -5220,8 +5308,14 @@ var VirtualScroller = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__na
       setLastState(last);
       lastScrollPos.current = scrollPos;
       props.onScrollIndexChange && props.onScrollIndexChange(newState);
-      if (props.lazy) {
-        props.onLazyLoad && props.onLazyLoad(newState);
+      if (props.lazy && isPageChanged(first)) {
+        var newLazyLoadState = {
+          first: props.step ? Math.min(getPageByFirst(first) * props.step, props.items.length - props.step) : first,
+          last: Math.min(props.step ? (getPageByFirst(first) + 1) * props.step : last, props.items.length)
+        };
+        var isLazyStateChanged = !lazyLoadState.current || lazyLoadState.current.first !== newLazyLoadState.first || lazyLoadState.current.last !== newLazyLoadState.last;
+        isLazyStateChanged && props.onLazyLoad && props.onLazyLoad(newLazyLoadState);
+        lazyLoadState.current = newLazyLoadState;
       }
     }
   };
@@ -5231,17 +5325,21 @@ var VirtualScroller = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__na
       if (scrollTimeout.current) {
         clearTimeout(scrollTimeout.current);
       }
-      if (!loadingState && props.showLoader) {
-        var _onScrollPositionChan2 = onScrollPositionChange(event),
-          changed = _onScrollPositionChan2.isRangeChanged;
-        changed && setLoadingState(true);
+      if (isPageChanged(firstState)) {
+        if (!loadingState && props.showLoader) {
+          var _onScrollPositionChan2 = onScrollPositionChange(event),
+            isRangeChanged = _onScrollPositionChan2.isRangeChanged;
+          var changed = isRangeChanged || (props.step ? isPageChanged(firstState) : false);
+          changed && setLoadingState(true);
+        }
+        scrollTimeout.current = setTimeout(function () {
+          onScrollChange(event);
+          if (loadingState && props.showLoader && (!props.lazy || props.loading === undefined)) {
+            setLoadingState(false);
+            setPageState(getPageByFirst(firstState));
+          }
+        }, props.delay);
       }
-      scrollTimeout.current = setTimeout(function () {
-        onScrollChange(event);
-        if (loadingState && props.showLoader && (!props.lazy || props.loading === undefined)) {
-          setLoadingState(false);
-        }
-      }, props.delay);
     } else {
       onScrollChange(event);
     }
@@ -5252,9 +5350,9 @@ var VirtualScroller = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__na
     }
     resizeTimeout.current = setTimeout(function () {
       if (elementRef.current) {
-        var _ref = [DomHandler.getWidth(elementRef.current), DomHandler.getHeight(elementRef.current)],
-          width = _ref[0],
-          height = _ref[1];
+        var _ref2 = [DomHandler.getWidth(elementRef.current), DomHandler.getHeight(elementRef.current)],
+          width = _ref2[0],
+          height = _ref2[1];
         var isDiffWidth = width !== defaultWidth.current,
           isDiffHeight = height !== defaultHeight.current;
         var reinit = both ? isDiffWidth || isDiffHeight : horizontal ? isDiffWidth : vertical ? isDiffHeight : false;
@@ -5262,6 +5360,8 @@ var VirtualScroller = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__na
           setNumToleratedItemsState(props.numToleratedItems);
           defaultWidth.current = width;
           defaultHeight.current = height;
+          defaultContentWidth.current = DomHandler.getWidth(_contentRef.current);
+          defaultContentHeight.current = DomHandler.getHeight(_contentRef.current);
         }
       }
     }, props.resizeDelay);
@@ -5294,12 +5394,24 @@ var VirtualScroller = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__na
   var loadedItems = function loadedItems() {
     var items = props.items;
     if (items && !loadingState) {
-      if (both) return items.slice(firstState.rows, lastState.rows).map(function (item) {
-        return props.columns ? item : item.slice(firstState.cols, lastState.cols);
-      });else if (horizontal && props.columns) return items;else return items.slice(firstState, lastState);
+      if (both) return items.slice(props.appendOnly ? 0 : firstState.rows, lastState.rows).map(function (item) {
+        return props.columns ? item : item.slice(props.appendOnly ? 0 : firstState.cols, lastState.cols);
+      });else if (horizontal && props.columns) return items;else return items.slice(props.appendOnly ? 0 : firstState, lastState);
     }
     return [];
   };
+  var viewInit = function viewInit() {
+    if (elementRef.current && DomHandler.isVisible(elementRef.current)) {
+      setContentElement(_contentRef.current);
+      init();
+      bindWindowResizeListener();
+      bindOrientationChangeListener();
+      defaultWidth.current = DomHandler.getWidth(elementRef.current);
+      defaultHeight.current = DomHandler.getHeight(elementRef.current);
+      defaultContentWidth.current = DomHandler.getWidth(_contentRef.current);
+      defaultContentHeight.current = DomHandler.getHeight(_contentRef.current);
+    }
+  };
   var init = function init() {
     if (!props.disabled) {
       setSize();
@@ -5308,17 +5420,11 @@ var VirtualScroller = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__na
     }
   };
   useMountEffect(function () {
-    if (!props.disabled) {
-      init();
-      bindWindowResizeListener();
-      bindOrientationChangeListener();
-      defaultWidth.current = DomHandler.getWidth(elementRef.current);
-      defaultHeight.current = DomHandler.getHeight(elementRef.current);
-    }
+    viewInit();
   });
   useUpdateEffect(function () {
     init();
-  }, [props.itemSize, props.scrollHeight]);
+  }, [props.itemSize, props.scrollHeight, props.scrollWidth]);
   useUpdateEffect(function () {
     if (props.numToleratedItems !== numToleratedItemsState) {
       setNumToleratedItemsState(props.numToleratedItems);
@@ -5330,11 +5436,11 @@ var VirtualScroller = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__na
     }
   }, [numToleratedItemsState]);
   useUpdateEffect(function () {
-    if (!prevItems || prevItems.length !== (props.items || []).length) {
+    if (!prevProps.items || prevProps.items.length !== (props.items || []).length) {
       init();
     }
     var loading = loadingState;
-    if (props.lazy && prevLoading !== props.loading && props.loading !== loadingState) {
+    if (props.lazy && prevProps.loading !== props.loading && props.loading !== loadingState) {
       setLoadingState(props.loading);
       loading = props.loading;
     }
@@ -5396,6 +5502,7 @@ var VirtualScroller = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__na
     if (props.showSpacer) {
       return /*#__PURE__*/React__namespace.createElement("div", {
         ref: _spacerRef,
+        style: spacerStyle.current,
         className: "p-virtualscroller-spacer"
       });
     }
@@ -5419,11 +5526,14 @@ var VirtualScroller = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__na
     });
     var content = /*#__PURE__*/React__namespace.createElement("div", {
       ref: _contentRef,
+      style: contentStyle.current,
       className: className
     }, items);
     if (props.contentTemplate) {
       var defaultOptions = {
+        style: contentStyle.current,
         className: className,
+        spacerStyle: spacerStyle.current,
         contentRef: function contentRef(el) {
           return _contentRef.current = ObjectUtils.getRefElement(el);
         },
@@ -5466,10 +5576,9 @@ var VirtualScroller = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__na
   } else {
     var otherProps = VirtualScrollerBase.getOtherProps(props);
     var className = classNames('p-virtualscroller', {
-      'p-both-scroll': both,
-      'p-virtualscroller-both': both,
-      'p-virtualscroller-horizontal': horizontal,
-      'p-horizontal-scroll': horizontal
+      'p-virtualscroller-inline': props.inline,
+      'p-virtualscroller-both p-both-scroll': both,
+      'p-virtualscroller-horizontal p-horizontal-scroll': horizontal
     }, props.className);
     var loader = createLoader();
     var _content = createContent();
@@ -5477,7 +5586,7 @@ var VirtualScroller = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__na
     return /*#__PURE__*/React__namespace.createElement("div", _extends({
       ref: elementRef,
       className: className,
-      tabIndex: 0,
+      tabIndex: props.tabIndex,
       style: props.style
     }, otherProps, {
       onScroll: onScroll
@@ -5573,6 +5682,7 @@ var AutoCompletePanel = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__
           var className = classNames('p-autocomplete-items', options.className);
           return /*#__PURE__*/React__namespace.createElement("ul", {
             ref: options.contentRef,
+            style: options.style,
             className: className,
             role: "listbox",
             id: props.listId
@@ -6244,7 +6354,7 @@ var Avatar = /*#__PURE__*/React__namespace.forwardRef(function (inProps, ref) {
     imageFailed = _React$useState2[0],
     setImageFailed = _React$useState2[1];
   var createContent = function createContent() {
-    if (props.image && !imageFailed) {
+    if (ObjectUtils.isNotEmpty(props.image) && !imageFailed) {
       return /*#__PURE__*/React__namespace.createElement("img", {
         src: props.image,
         alt: props.imageAlt,
@@ -6286,7 +6396,7 @@ var Avatar = /*#__PURE__*/React__namespace.forwardRef(function (inProps, ref) {
   });
   var otherProps = AvatarBase.getOtherProps(props);
   var containerClassName = classNames('p-avatar p-component', {
-    'p-avatar-image': props.image !== null && !imageFailed,
+    'p-avatar-image': ObjectUtils.isNotEmpty(props.image) && !imageFailed,
     'p-avatar-circle': props.shape === 'circle',
     'p-avatar-lg': props.size === 'large',
     'p-avatar-xl': props.size === 'xlarge',
@@ -8859,7 +8969,7 @@ var Calendar = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__namespace
       setValue(props.value);
     }
     return function () {
-      props.mask && unbindMaskEvents();
+      props.mask && unbindMaskEvents && unbindMaskEvents();
     };
   });
   useUpdateEffect(function () {
@@ -9083,7 +9193,7 @@ var Calendar = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__namespace
       }
       return _content2;
     }
-    var displayYear = props.inline ? metaYear : currentYear;
+    var displayYear = props.numberOfMonths > 1 ? metaYear : currentYear;
     return currentView !== 'year' && /*#__PURE__*/React__namespace.createElement("button", {
       className: "p-datepicker-year p-link",
       onClick: switchToYearView,
@@ -13167,6 +13277,8 @@ var ContextMenuBase = {
     global: false,
     autoZIndex: true,
     baseZIndex: 0,
+    breakpoint: undefined,
+    scrollHeight: '400px',
     appendTo: null,
     transitionOptions: null,
     onShow: null,
@@ -13192,7 +13304,7 @@ var ContextMenuSub = /*#__PURE__*/React__namespace.memo(function (props) {
     setActiveItemState(null);
   }
   var onItemMouseEnter = function onItemMouseEnter(event, item) {
-    if (item.disabled) {
+    if (item.disabled || props.isMobileMode) {
       event.preventDefault();
       return;
     }
@@ -13212,26 +13324,31 @@ var ContextMenuSub = /*#__PURE__*/React__namespace.memo(function (props) {
         item: item
       });
     }
+    if (props.isMobileMode && item.items) {
+      if (activeItemState && item === activeItemState) setActiveItemState(null);else setActiveItemState(item);
+    }
     if (!item.items) {
       props.onLeafClick(event);
     }
   };
   var position = function position() {
-    var parentItem = submenuRef.current.parentElement;
-    var containerOffset = DomHandler.getOffset(parentItem);
-    var viewport = DomHandler.getViewport();
-    var sublistWidth = submenuRef.current.offsetParent ? submenuRef.current.offsetWidth : DomHandler.getHiddenElementOuterWidth(submenuRef.current);
-    var itemOuterWidth = DomHandler.getOuterWidth(parentItem.children[0]);
-    var top = parseInt(containerOffset.top, 10) + submenuRef.current.offsetHeight - DomHandler.getWindowScrollTop();
-    if (top > viewport.height) {
-      submenuRef.current.style.top = viewport.height - top + 'px';
-    } else {
-      submenuRef.current.style.top = '0px';
-    }
-    if (parseInt(containerOffset.left, 10) + itemOuterWidth + sublistWidth > viewport.width - DomHandler.calculateScrollbarWidth()) {
-      submenuRef.current.style.left = -1 * sublistWidth + 'px';
-    } else {
-      submenuRef.current.style.left = itemOuterWidth + 'px';
+    if (!props.isMobileMode) {
+      var parentItem = submenuRef.current.parentElement;
+      var containerOffset = DomHandler.getOffset(parentItem);
+      var viewport = DomHandler.getViewport();
+      var sublistWidth = submenuRef.current.offsetParent ? submenuRef.current.offsetWidth : DomHandler.getHiddenElementOuterWidth(submenuRef.current);
+      var itemOuterWidth = DomHandler.getOuterWidth(parentItem.children[0]);
+      var top = parseInt(containerOffset.top, 10) + submenuRef.current.offsetHeight - DomHandler.getWindowScrollTop();
+      if (top > viewport.height) {
+        submenuRef.current.style.top = viewport.height - top + 'px';
+      } else {
+        submenuRef.current.style.top = '0px';
+      }
+      if (parseInt(containerOffset.left, 10) + itemOuterWidth + sublistWidth > viewport.width - DomHandler.calculateScrollbarWidth()) {
+        submenuRef.current.style.left = -1 * sublistWidth + 'px';
+      } else {
+        submenuRef.current.style.left = itemOuterWidth + 'px';
+      }
     }
   };
   var onEnter = function onEnter() {
@@ -13253,7 +13370,8 @@ var ContextMenuSub = /*#__PURE__*/React__namespace.memo(function (props) {
         menuProps: props.menuProps,
         model: item.items,
         resetMenu: item !== activeItemState,
-        onLeafClick: props.onLeafClick
+        onLeafClick: props.onLeafClick,
+        isMobileMode: props.isMobileMode
       });
     }
     return null;
@@ -13362,8 +13480,14 @@ var ContextMenu = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__namesp
     _React$useState6 = _slicedToArray(_React$useState5, 2),
     resetMenuState = _React$useState6[0],
     setResetMenuState = _React$useState6[1];
+  var _React$useState7 = React__namespace.useState(null),
+    _React$useState8 = _slicedToArray(_React$useState7, 2),
+    attributeSelectorState = _React$useState8[0],
+    setAttributeSelectorState = _React$useState8[1];
   var menuRef = React__namespace.useRef(null);
   var currentEvent = React__namespace.useRef(null);
+  var styleElementRef = React__namespace.useRef(null);
+  var isMobileMode = useMatchMedia("screen and (max-width: ".concat(props.breakpoint, ")"), !!props.breakpoint);
   var _useEventListener = useEventListener({
       type: 'click',
       listener: function listener(event) {
@@ -13394,6 +13518,17 @@ var ContextMenu = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__namesp
     _useResizeListener2 = _slicedToArray(_useResizeListener, 2),
     bindDocumentResizeListener = _useResizeListener2[0],
     unbindDocumentResizeListener = _useResizeListener2[1];
+  var createStyle = function createStyle() {
+    if (!styleElementRef.current) {
+      styleElementRef.current = DomHandler.createInlineStyle(PrimeReact.nonce);
+      var selector = "".concat(attributeSelectorState);
+      var innerHTML = "\n@media screen and (max-width: ".concat(props.breakpoint, ") {\n    .p-contextmenu[").concat(selector, "] > ul {\n        max-height: ").concat(props.scrollHeight, ";\n        overflow: ").concat(props.scrollHeight ? 'auto' : '', ";\n    }\n\n    .p-contextmenu[").concat(selector, "] .p-submenu-list {\n        position: relative;\n    }\n\n    .p-contextmenu[").concat(selector, "] .p-menuitem-active > .p-submenu-list {\n        left: 0 !important;\n        box-shadow: none;\n        border-radius: 0;\n        padding: 0 0 0 calc(var(--inline-spacing) * 2); /* @todo */\n    }\n\n    .p-contextmenu[").concat(selector, "] .p-menuitem-active > .p-menuitem-link > .p-submenu-icon {\n        transform: rotate(-180deg);\n    }\n\n    .p-contextmenu[").concat(selector, "] .p-submenu-icon:before {\n        content: \"\\e930\";\n    }\n}\n");
+      styleElementRef.current.innerHTML = innerHTML;
+    }
+  };
+  var destroyStyle = function destroyStyle() {
+    styleElementRef.current = DomHandler.removeInlineStyle(styleElementRef.current);
+  };
   var onMenuClick = function onMenuClick() {
     setResetMenuState(false);
   };
@@ -13422,6 +13557,10 @@ var ContextMenu = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__namesp
       ZIndexUtils.set('menu', menuRef.current, PrimeReact.autoZIndex, props.baseZIndex || PrimeReact.zIndex['menu']);
     }
     position(currentEvent.current);
+    if (attributeSelectorState && props.breakpoint) {
+      menuRef.current.setAttribute(attributeSelectorState, '');
+      createStyle();
+    }
   };
   var onEntered = function onEntered() {
     bindDocumentListeners();
@@ -13432,6 +13571,7 @@ var ContextMenu = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__namesp
   };
   var onExited = function onExited() {
     ZIndexUtils.clear(menuRef.current);
+    destroyStyle();
   };
   var position = function position(event) {
     if (event) {
@@ -13484,7 +13624,19 @@ var ContextMenu = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__namesp
     if (props.global) {
       bindDocumentContextMenuListener();
     }
+    if (props.breakpoint) {
+      !attributeSelectorState && setAttributeSelectorState(UniqueComponentId());
+    }
   });
+  useUpdateEffect(function () {
+    if (attributeSelectorState && menuRef.current) {
+      menuRef.current.setAttribute(attributeSelectorState, '');
+      createStyle();
+    }
+    return function () {
+      destroyStyle();
+    };
+  }, [attributeSelectorState, props.breakpoint]);
   useUpdateEffect(function () {
     if (visibleState) {
       setVisibleState(false);
@@ -13540,7 +13692,8 @@ var ContextMenu = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__namesp
       model: props.model,
       root: true,
       resetMenu: resetMenuState,
-      onLeafClick: onLeafClick
+      onLeafClick: onLeafClick,
+      isMobileMode: isMobileMode
     })));
   };
   var element = createContextMenu();
@@ -15501,6 +15654,7 @@ var DropdownPanel = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__name
           var content = isEmptyFilter ? createEmptyMessage() : options.children;
           return /*#__PURE__*/React__namespace.createElement("ul", {
             ref: options.contentRef,
+            style: options.style,
             className: className,
             role: "listbox"
           }, content);
@@ -16541,7 +16695,6 @@ var DataTableBase = {
   defaultProps: {
     __TYPE: 'DataTable',
     alwaysShowPaginator: true,
-    autoLayout: false,
     breakpoint: '960px',
     cellClassName: null,
     cellSelection: false,
@@ -16633,7 +16786,7 @@ var DataTableBase = {
     reorderableColumns: false,
     reorderableRows: false,
     resizableColumns: false,
-    responsiveLayout: 'stack',
+    responsiveLayout: 'scroll',
     rowClassName: null,
     rowEditValidator: null,
     rowExpansionTemplate: null,
@@ -16643,7 +16796,6 @@ var DataTableBase = {
     rowHover: false,
     rows: null,
     rowsPerPageOptions: null,
-    scrollDirection: 'vertical',
     scrollHeight: null,
     scrollable: false,
     selectAll: false,
@@ -17497,7 +17649,7 @@ var BodyRow = /*#__PURE__*/React__namespace.memo(function (props) {
     return props.compareSelectionBy === 'equals' ? data1 === data2 : ObjectUtils.equals(data1, data2, props.dataKey);
   };
   var getTabIndex = function getTabIndex() {
-    return isFocusable() && !props.allowCellSelection ? props.index === 0 ? props.tabIndex : -1 : null;
+    return isFocusable() && !props.allowCellSelection ? props.rowIndex === 0 ? props.tabIndex : -1 : null;
   };
   var findIndex = function findIndex(collection, rowData) {
     return (collection || []).findIndex(function (data) {
@@ -17554,35 +17706,35 @@ var BodyRow = /*#__PURE__*/React__namespace.memo(function (props) {
     props.onRowClick({
       originalEvent: event,
       data: props.rowData,
-      index: props.index
+      index: props.rowIndex
     });
   };
   var onDoubleClick = function onDoubleClick(event) {
     props.onRowDoubleClick({
       originalEvent: event,
       data: props.rowData,
-      index: props.index
+      index: props.rowIndex
     });
   };
   var onRightClick = function onRightClick(event) {
     props.onRowRightClick({
       originalEvent: event,
       data: props.rowData,
-      index: props.index
+      index: props.rowIndex
     });
   };
   var onMouseEnter = function onMouseEnter(event) {
     props.onRowMouseEnter({
       originalEvent: event,
       data: props.rowData,
-      index: props.index
+      index: props.rowIndex
     });
   };
   var onMouseLeave = function onMouseLeave(event) {
     props.onRowMouseLeave({
       originalEvent: event,
       data: props.rowData,
-      index: props.index
+      index: props.rowIndex
     });
   };
   var onTouchEnd = function onTouchEnd(event) {
@@ -17636,49 +17788,49 @@ var BodyRow = /*#__PURE__*/React__namespace.memo(function (props) {
     props.onRowMouseDown({
       originalEvent: event,
       data: props.rowData,
-      index: props.index
+      index: props.rowIndex
     });
   };
   var onMouseUp = function onMouseUp(event) {
     props.onRowMouseUp({
       originalEvent: event,
       data: props.rowData,
-      index: props.index
+      index: props.rowIndex
     });
   };
   var onDragStart = function onDragStart(event) {
     props.onRowDragStart({
       originalEvent: event,
       data: props.rowData,
-      index: props.index
+      index: props.rowIndex
     });
   };
   var onDragOver = function onDragOver(event) {
     props.onRowDragOver({
       originalEvent: event,
       data: props.rowData,
-      index: props.index
+      index: props.rowIndex
     });
   };
   var onDragLeave = function onDragLeave(event) {
     props.onRowDragLeave({
       originalEvent: event,
       data: props.rowData,
-      index: props.index
+      index: props.rowIndex
     });
   };
   var onDragEnd = function onDragEnd(event) {
     props.onRowDragEnd({
       originalEvent: event,
       data: props.rowData,
-      index: props.index
+      index: props.rowIndex
     });
   };
   var onDrop = function onDrop(event) {
     props.onRowDrop({
       originalEvent: event,
       data: props.rowData,
-      index: props.index
+      index: props.rowIndex
     });
   };
   var onEditChange = function onEditChange(e, isEditing) {
@@ -17722,7 +17874,7 @@ var BodyRow = /*#__PURE__*/React__namespace.memo(function (props) {
       props.onRowEditInit({
         originalEvent: event,
         data: props.rowData,
-        index: props.index
+        index: props.rowIndex
       });
     }
     onEditChange(e, true);
@@ -17738,7 +17890,7 @@ var BodyRow = /*#__PURE__*/React__namespace.memo(function (props) {
       props.onRowEditSave({
         originalEvent: event,
         data: props.rowData,
-        index: props.index,
+        index: props.rowIndex,
         valid: valid
       });
     }
@@ -17756,7 +17908,7 @@ var BodyRow = /*#__PURE__*/React__namespace.memo(function (props) {
       props.onRowEditCancel({
         originalEvent: event,
         data: props.rowData,
-        index: props.index
+        index: props.rowIndex
       });
     }
     onEditChange(e, false);
@@ -17774,7 +17926,7 @@ var BodyRow = /*#__PURE__*/React__namespace.memo(function (props) {
           tableSelector: props.tableSelector,
           column: col,
           rowData: props.rowData,
-          rowIndex: props.index,
+          rowIndex: props.rowIndex,
           index: i,
           rowSpan: rowSpan,
           dataKey: props.dataKey,
@@ -17821,9 +17973,9 @@ var BodyRow = /*#__PURE__*/React__namespace.memo(function (props) {
     'p-highlight-contextmenu': props.contextMenuSelected,
     'p-selectable-row': props.allowRowSelection && props.isSelectable({
       data: props.rowData,
-      index: props.index
+      index: props.rowIndex
     }),
-    'p-row-odd': props.index % 2 !== 0
+    'p-row-odd': props.rowIndex % 2 !== 0
   });
   var style = {
     height: props.virtualScrollerOptions ? props.virtualScrollerOptions.itemSize : undefined
@@ -17898,7 +18050,6 @@ var TableBody = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__namespac
   var rowDragging = React__namespace.useRef(false);
   var draggedRowIndex = React__namespace.useRef(null);
   var droppedRowIndex = React__namespace.useRef(null);
-  var prevVirtualScrollerOptions = usePrevious(props.virtualScrollerOptions);
   var isSubheaderGrouping = props.rowGroupMode && props.rowGroupMode === 'subheader';
   var isRadioSelectionMode = props.selectionMode === 'radiobutton';
   var isCheckboxSelectionMode = props.selectionMode === 'checkbox';
@@ -18048,10 +18199,6 @@ var TableBody = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__namespac
       });
     }
   };
-  var updateVirtualScrollerPosition = function updateVirtualScrollerPosition() {
-    var tableHeaderHeight = DomHandler.getOuterHeight(elementRef.current.previousElementSibling);
-    elementRef.current.style.top = (elementRef.current.style.top || 0) + tableHeaderHeight + 'px';
-  };
   var onSingleSelection = function onSingleSelection(_ref) {
     var originalEvent = _ref.originalEvent,
       data = _ref.data,
@@ -18605,16 +18752,6 @@ var TableBody = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__namespac
       updateFrozenRowGroupHeaderStickyPosition();
     }
   });
-  useMountEffect(function () {
-    if (!props.isVirtualScrollerDisabled && getVirtualScrollerOption('vertical')) {
-      updateVirtualScrollerPosition();
-    }
-  });
-  useUpdateEffect(function () {
-    if (!props.isVirtualScrollerDisabled && getVirtualScrollerOption('vertical') && getVirtualScrollerOption('itemSize', prevVirtualScrollerOptions) !== getVirtualScrollerOption('itemSize')) {
-      updateVirtualScrollerPosition();
-    }
-  }, [props.virtualScrollerOptions]);
   useUpdateEffect(function () {
     if (props.paginator && isMultipleSelection()) {
       anchorRowIndex.current = null;
@@ -18642,9 +18779,8 @@ var TableBody = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__namespac
     }
     return null;
   };
-  var createGroupHeader = function createGroupHeader(rowData, index, expanded, colSpan) {
-    if (isSubheaderGrouping && shouldRenderRowGroupHeader(props.value, rowData, index - props.first)) {
-      var _options;
+  var createGroupHeader = function createGroupHeader(rowData, rowIndex, expanded, colSpan) {
+    if (isSubheaderGrouping && shouldRenderRowGroupHeader(props.value, rowData, rowIndex - props.first)) {
       var style = rowGroupHeaderStyle();
       var toggler = props.expandableRowGroups && /*#__PURE__*/React__namespace.createElement(RowTogglerButton, {
         onClick: onRowToggle,
@@ -18653,9 +18789,11 @@ var TableBody = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__namespac
         expandedRowIcon: props.expandedRowIcon,
         collapsedRowIcon: props.collapsedRowIcon
       });
-      var options = (_options = {
-        index: index
-      }, _defineProperty(_options, "index", index), _defineProperty(_options, "props", props.tableProps), _defineProperty(_options, "customRendering", false), _options);
+      var options = {
+        index: rowIndex,
+        props: props.tableProps,
+        customRendering: false
+      };
       var _content2 = ObjectUtils.getJSXElement(props.rowGroupHeaderTemplate, rowData, options);
 
       // check if the user wants complete control of the rendering
@@ -18674,7 +18812,7 @@ var TableBody = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__namespac
     }
     return null;
   };
-  var createRow = function createRow(rowData, index, expanded) {
+  var createRow = function createRow(rowData, rowIndex, index, expanded) {
     if (!props.expandableRowGroups || expanded) {
       var selected = isSelectionEnabled() ? isSelected(rowData) : false;
       var contextMenuSelected = isContextMenuSelected(rowData);
@@ -18687,6 +18825,7 @@ var TableBody = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__namespac
         value: props.value,
         columns: props.columns,
         rowData: rowData,
+        rowIndex: rowIndex,
         index: index,
         selected: selected,
         contextMenuSelected: contextMenuSelected,
@@ -18745,11 +18884,11 @@ var TableBody = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__namespac
       });
     }
   };
-  var createExpansion = function createExpansion(rowData, index, expanded, colSpan) {
+  var createExpansion = function createExpansion(rowData, rowIndex, expanded, colSpan) {
     if (expanded && !(isSubheaderGrouping && props.expandableRowGroups)) {
-      var id = "".concat(props.tableSelector, "_content_").concat(index, "_expanded");
+      var id = "".concat(props.tableSelector, "_content_").concat(rowIndex, "_expanded");
       var options = {
-        index: index,
+        index: rowIndex,
         customRendering: false
       };
       var _content3 = ObjectUtils.getJSXElement(props.rowExpansionTemplate, rowData, options);
@@ -18769,10 +18908,10 @@ var TableBody = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__namespac
     }
     return null;
   };
-  var createGroupFooter = function createGroupFooter(rowData, index, expanded, colSpan) {
-    if (isSubheaderGrouping && shouldRenderRowGroupFooter(props.value, rowData, index - props.first, expanded)) {
+  var createGroupFooter = function createGroupFooter(rowData, rowIndex, expanded, colSpan) {
+    if (isSubheaderGrouping && shouldRenderRowGroupFooter(props.value, rowData, rowIndex - props.first, expanded)) {
       var _content4 = ObjectUtils.getJSXElement(props.rowGroupFooterTemplate, rowData, {
-        index: index,
+        index: rowIndex,
         colSpan: colSpan,
         props: props.tableProps
       });
@@ -18784,25 +18923,25 @@ var TableBody = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__namespac
     return null;
   };
   var createContent = function createContent() {
-    return props.value.map(function (rowData, i) {
-      var index = getVirtualScrollerOption('getItemOptions') ? getVirtualScrollerOption('getItemOptions')(i).index : props.first + i;
-      var key = getRowKey(rowData, index);
+    return props.value && props.value.map(function (rowData, index) {
+      var rowIndex = getVirtualScrollerOption('getItemOptions') ? getVirtualScrollerOption('getItemOptions')(index).index : props.first + index;
+      var key = getRowKey(rowData, rowIndex);
       var expanded = isRowExpanded(rowData);
       var colSpan = getColumnsLength();
-      var groupHeader = createGroupHeader(rowData, index, expanded, colSpan);
-      var row = createRow(rowData, index, expanded);
-      var expansion = createExpansion(rowData, index, expanded, colSpan);
-      var groupFooter = createGroupFooter(rowData, index, expanded, colSpan);
+      var groupHeader = createGroupHeader(rowData, rowIndex, expanded, colSpan);
+      var row = createRow(rowData, rowIndex, index, expanded);
+      var expansion = createExpansion(rowData, rowIndex, expanded, colSpan);
+      var groupFooter = createGroupFooter(rowData, rowIndex, expanded, colSpan);
       return /*#__PURE__*/React__namespace.createElement(React__namespace.Fragment, {
         key: key
       }, groupHeader, row, expansion, groupFooter);
     });
   };
-  var className = classNames('p-datatable-tbody', props.className);
   var content = props.empty ? createEmptyContent() : createContent();
   return /*#__PURE__*/React__namespace.createElement("tbody", {
     ref: refCallback,
-    className: className
+    style: props.style,
+    className: props.className
   }, content);
 }));
 TableBody.displayName = 'TableBody';
@@ -20493,9 +20632,10 @@ var DataTable = /*#__PURE__*/React__namespace.forwardRef(function (inProps, ref)
       if (ObjectUtils.isNotEmpty(widths)) {
         createStyleElement();
         var innerHTML = '';
+        var selector = ".p-datatable[".concat(attributeSelectorState, "] > .p-datatable-wrapper > .p-datatable-table");
         widths.forEach(function (width, index) {
-          var style = props.scrollable ? "flex: 1 1 ".concat(width, "px !important") : "width: ".concat(width, "px !important");
-          innerHTML += "\n                        .p-datatable[".concat(attributeSelectorState, "] .p-datatable-thead > tr > th:nth-child(").concat(index + 1, "),\n                        .p-datatable[").concat(attributeSelectorState, "] .p-datatable-tbody > tr > td:nth-child(").concat(index + 1, "),\n                        .p-datatable[").concat(attributeSelectorState, "] .p-datatable-tfoot > tr > td:nth-child(").concat(index + 1, ") {\n                            ").concat(style, "\n                        }\n                    ");
+          var style = "width: ".concat(width, "px !important; max-width: ").concat(width, "px !important");
+          innerHTML += "\n                        ".concat(selector, " > .p-datatable-thead > tr > th:nth-child(").concat(index + 1, "),\n                        ").concat(selector, " > .p-datatable-tbody > tr > td:nth-child(").concat(index + 1, "),\n                        ").concat(selector, " > .p-datatable-tfoot > tr > td:nth-child(").concat(index + 1, ") {\n                            ").concat(style, "\n                        }\n                    ");
         });
         styleElement.current.innerHTML = innerHTML;
       }
@@ -20663,10 +20803,11 @@ var DataTable = /*#__PURE__*/React__namespace.forwardRef(function (inProps, ref)
     destroyStyleElement();
     createStyleElement();
     var innerHTML = '';
+    var selector = ".p-datatable[".concat(attributeSelectorState, "] > .p-datatable-wrapper > .p-datatable-table");
     widths.forEach(function (width, index) {
       var colWidth = index === colIndex ? newColumnWidth : nextColumnWidth && index === colIndex + 1 ? nextColumnWidth : width;
-      var style = props.scrollable ? "flex: 1 1 ".concat(colWidth, "px !important") : "width: ".concat(colWidth, "px !important");
-      innerHTML += "\n                .p-datatable[".concat(attributeSelectorState, "] .p-datatable-thead > tr > th:nth-child(").concat(index + 1, "),\n                .p-datatable[").concat(attributeSelectorState, "] .p-datatable-tbody > tr > td:nth-child(").concat(index + 1, "),\n                .p-datatable[").concat(attributeSelectorState, "] .p-datatable-tfoot > tr > td:nth-child(").concat(index + 1, ") {\n                    ").concat(style, "\n                }\n            ");
+      var style = "width: ".concat(colWidth, "px !important; max-width: ").concat(colWidth, "px !important");
+      innerHTML += "\n                ".concat(selector, " > .p-datatable-thead > tr > th:nth-child(").concat(index + 1, "),\n                ").concat(selector, " > .p-datatable-tbody > tr > td:nth-child(").concat(index + 1, "),\n                ").concat(selector, " > .p-datatable-tfoot > tr > td:nth-child(").concat(index + 1, ") {\n                    ").concat(style, "\n                }\n            ");
     });
     styleElement.current.innerHTML = innerHTML;
   };
@@ -20829,7 +20970,9 @@ var DataTable = /*#__PURE__*/React__namespace.forwardRef(function (inProps, ref)
   var createResponsiveStyle = function createResponsiveStyle() {
     if (!responsiveStyleElement.current) {
       responsiveStyleElement.current = DomHandler.createInlineStyle(PrimeReact.nonce);
-      var innerHTML = "\n@media screen and (max-width: ".concat(props.breakpoint, ") {\n    .p-datatable[").concat(attributeSelectorState, "] .p-datatable-thead > tr > th,\n    .p-datatable[").concat(attributeSelectorState, "] .p-datatable-tfoot > tr > td {\n        display: none !important;\n    }\n\n    .p-datatable[").concat(attributeSelectorState, "] .p-datatable-tbody > tr > td {\n        display: flex;\n        width: 100% !important;\n        align-items: center;\n        justify-content: space-between;\n    }\n\n    .p-datatable[").concat(attributeSelectorState, "] .p-datatable-tbody > tr > td:not(:last-child) {\n        border: 0 none;\n    }\n\n    .p-datatable[").concat(attributeSelectorState, "].p-datatable-gridlines .p-datatable-tbody > tr > td:last-child {\n        border-top: 0;\n        border-right: 0;\n        border-left: 0;\n    }\n\n    .p-datatable[").concat(attributeSelectorState, "] .p-datatable-tbody > tr > td > .p-column-title {\n        display: block;\n    }\n}\n");
+      var selector = ".p-datatable[".concat(attributeSelectorState, "] > .p-datatable-wrapper > .p-datatable-table");
+      var gridLinesSelector = ".p-datatable[".concat(attributeSelectorState, "].p-datatable-gridlines > .p-datatable-wrapper > .p-datatable-table");
+      var innerHTML = "\n@media screen and (max-width: ".concat(props.breakpoint, ") {\n    ").concat(selector, " > .p-datatable-thead > tr > th,\n    ").concat(selector, " > .p-datatable-tfoot > tr > td {\n        display: none !important;\n    }\n\n    ").concat(selector, " > .p-datatable-tbody > tr > td {\n        display: flex;\n        width: 100% !important;\n        align-items: center;\n        justify-content: space-between;\n    }\n\n    ").concat(selector, " > .p-datatable-tbody > tr > td:not(:last-child) {\n        border: 0 none;\n    }\n\n    ").concat(gridLinesSelector, "] > .p-datatable-tbody > tr > td:last-child {\n        border-top: 0;\n        border-right: 0;\n        border-left: 0;\n    }\n\n    ").concat(selector, " > .p-datatable-tbody > tr > td > .p-column-title {\n        display: block;\n    }\n}\n");
       responsiveStyleElement.current.innerHTML = innerHTML;
     }
   };
@@ -21306,7 +21449,7 @@ var DataTable = /*#__PURE__*/React__namespace.forwardRef(function (inProps, ref)
     return data;
   };
   useMountEffect(function () {
-    setAttributeSelectorState(UniqueComponentId());
+    !attributeSelectorState && setAttributeSelectorState(UniqueComponentId());
     setFiltersState(cloneFilters(props.filters));
     setD_filtersState(cloneFilters(props.filters));
     if (isStateful()) {
@@ -21317,11 +21460,16 @@ var DataTable = /*#__PURE__*/React__namespace.forwardRef(function (inProps, ref)
     }
   });
   useUpdateEffect(function () {
-    elementRef.current.setAttribute(attributeSelectorState, '');
-    if (props.responsiveLayout === 'stack' && !props.scrollable) {
-      createResponsiveStyle();
+    if (attributeSelectorState) {
+      elementRef.current.setAttribute(attributeSelectorState, '');
+      if (props.responsiveLayout === 'stack' && !props.scrollable) {
+        createResponsiveStyle();
+      }
     }
-  }, [attributeSelectorState]);
+    return function () {
+      destroyResponsiveStyle();
+    };
+  }, [attributeSelectorState, props.breakpoint]);
   useUpdateEffect(function () {
     var filters = cloneFilters(props.filters);
     setFiltersState(filters);
@@ -21452,12 +21600,14 @@ var DataTable = /*#__PURE__*/React__namespace.forwardRef(function (inProps, ref)
     var rows = options.rows,
       columns = options.columns,
       contentRef = options.contentRef,
-      className = options.className;
-      options.itemSize;
+      style = options.style,
+      className = options.className,
+      spacerStyle = options.spacerStyle,
+      itemSize = options.itemSize;
     var frozenBody = ObjectUtils.isNotEmpty(props.frozenValue) && /*#__PURE__*/React__namespace.createElement(TableBody, {
       ref: frozenBodyRef,
       value: props.frozenValue,
-      className: "p-datatable-frozen-tbody",
+      className: "p-datatable-tbody p-datatable-frozen-tbody",
       frozenRow: true,
       tableProps: props,
       tableSelector: attributeSelectorState,
@@ -21528,7 +21678,8 @@ var DataTable = /*#__PURE__*/React__namespace.forwardRef(function (inProps, ref)
     var body = /*#__PURE__*/React__namespace.createElement(TableBody, {
       ref: bodyRef,
       value: dataToRender(rows),
-      className: className,
+      style: style,
+      className: classNames('p-datatable-tbody', className),
       empty: empty,
       frozenRow: false,
       tableProps: props,
@@ -21598,7 +21749,13 @@ var DataTable = /*#__PURE__*/React__namespace.forwardRef(function (inProps, ref)
       virtualScrollerOptions: options,
       isVirtualScrollerDisabled: isVirtualScrollerDisabled
     });
-    return /*#__PURE__*/React__namespace.createElement(React__namespace.Fragment, null, frozenBody, body);
+    var spacerBody = ObjectUtils.isNotEmpty(spacerStyle) ? /*#__PURE__*/React__namespace.createElement(TableBody, {
+      style: {
+        height: "calc(".concat(spacerStyle.height, " - ").concat(rows.length * itemSize, "px)")
+      },
+      className: "p-datatable-virtualscroller-spacer"
+    }) : null;
+    return /*#__PURE__*/React__namespace.createElement(React__namespace.Fragment, null, frozenBody, body, spacerBody);
   };
   var createTableFooter = function createTableFooter(options) {
     var columns = options.columns;
@@ -21629,13 +21786,19 @@ var DataTable = /*#__PURE__*/React__namespace.forwardRef(function (inProps, ref)
       scrollHeight: props.scrollHeight !== 'flex' ? undefined : '100%',
       disabled: _isVirtualScrollerDisabled,
       loaderDisabled: true,
+      inline: true,
+      autoSize: true,
       showSpacer: false,
       contentTemplate: function contentTemplate(options) {
         var ref = function ref(el) {
           tableRef.current = el;
           options.spacerRef && options.spacerRef(el);
         };
-        var tableClassName = classNames('p-datatable-table', props.tableClassName);
+        var tableClassName = classNames('p-datatable-table', {
+          'p-datatable-scrollable-table': props.scrollable,
+          'p-datatable-resizable-table': props.resizableColumns,
+          'p-datatable-resizable-table-fit': props.resizableColumns && props.columnResizeMode === 'fit'
+        }, props.tableClassName);
         var tableHeader = createTableHeader(options, empty);
         var tableBody = createTableBody(options, selectionModeInColumn, empty, _isVirtualScrollerDisabled);
         var tableFooter = createTableFooter(options);
@@ -21730,13 +21893,9 @@ var DataTable = /*#__PURE__*/React__namespace.forwardRef(function (inProps, ref)
     'p-datatable-hoverable-rows': props.rowHover,
     'p-datatable-selectable': selectable && !props.cellSelection,
     'p-datatable-selectable-cell': selectable && props.cellSelection,
-    'p-datatable-auto-layout': props.autoLayout,
     'p-datatable-resizable': props.resizableColumns,
     'p-datatable-resizable-fit': props.resizableColumns && props.columnResizeMode === 'fit',
     'p-datatable-scrollable': props.scrollable,
-    'p-datatable-scrollable-vertical': props.scrollable && props.scrollDirection === 'vertical',
-    'p-datatable-scrollable-horizontal': props.scrollable && props.scrollDirection === 'horizontal',
-    'p-datatable-scrollable-both': props.scrollable && props.scrollDirection === 'both',
     'p-datatable-flex-scrollable': props.scrollable && props.scrollHeight === 'flex',
     'p-datatable-responsive-stack': props.responsiveLayout === 'stack',
     'p-datatable-responsive-scroll': props.responsiveLayout === 'scroll',
@@ -26340,14 +26499,15 @@ var ListBox = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__namespace.
         itemTemplate: function itemTemplate(item, options) {
           return item && createItem(item, options.index, options);
         },
-        contentTemplate: function contentTemplate(option) {
-          var className = classNames('p-listbox-list', option.className);
+        contentTemplate: function contentTemplate(options) {
+          var className = classNames('p-listbox-list', options.className);
           return /*#__PURE__*/React__namespace.createElement("ul", _extends({
-            ref: option.contentRef,
+            ref: options.contentRef,
+            style: options.style,
             className: className,
             role: "listbox",
             "aria-multiselectable": props.multiple
-          }, ariaProps), option.children);
+          }, ariaProps), options.children);
         }
       });
       return /*#__PURE__*/React__namespace.createElement(VirtualScroller, _extends({
@@ -26395,6 +26555,8 @@ var MegaMenuBase = {
     style: null,
     className: null,
     orientation: 'horizontal',
+    breakpoint: undefined,
+    scrollHeight: '400px',
     start: null,
     end: null,
     children: undefined
@@ -26413,17 +26575,41 @@ var MegaMenu = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__namespace
     _React$useState2 = _slicedToArray(_React$useState, 2),
     activeItemState = _React$useState2[0],
     setActiveItemState = _React$useState2[1];
+  var _React$useState3 = React__namespace.useState(null),
+    _React$useState4 = _slicedToArray(_React$useState3, 2),
+    attributeSelectorState = _React$useState4[0],
+    setAttributeSelectorState = _React$useState4[1];
+  var _React$useState5 = React__namespace.useState(false),
+    _React$useState6 = _slicedToArray(_React$useState5, 2),
+    mobileActiveState = _React$useState6[0],
+    setMobileActiveState = _React$useState6[1];
   var elementRef = React__namespace.useRef(null);
+  var styleElementRef = React__namespace.useRef(null);
+  var menuButtonRef = React__namespace.useRef(null);
   var horizontal = props.orientation === 'horizontal';
   var vertical = props.orientation === 'vertical';
+  var isMobileMode = useMatchMedia("screen and (max-width: ".concat(props.breakpoint, ")"), !!props.breakpoint);
   var _useEventListener = useEventListener({
       type: 'click',
       listener: function listener(event) {
-        isOutsideClicked(event) && setActiveItemState(null);
+        if ((!isMobileMode || mobileActiveState) && isOutsideClicked(event)) {
+          setActiveItemState(null);
+          setMobileActiveState(false);
+        }
       }
     }),
     _useEventListener2 = _slicedToArray(_useEventListener, 1),
     bindDocumentClickListener = _useEventListener2[0];
+  var _useResizeListener = useResizeListener({
+      listener: function listener() {
+        if (!isMobileMode || mobileActiveState) {
+          setActiveItemState(null);
+          setMobileActiveState(false);
+        }
+      }
+    }),
+    _useResizeListener2 = _slicedToArray(_useResizeListener, 1),
+    bindDocumentResizeListener = _useResizeListener2[0];
   var onLeafClick = function onLeafClick(event, item) {
     if (item.disabled) {
       event.preventDefault();
@@ -26439,9 +26625,10 @@ var MegaMenu = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__namespace
       });
     }
     setActiveItemState(null);
+    setMobileActiveState(false);
   };
   var onCategoryMouseEnter = function onCategoryMouseEnter(event, item) {
-    if (item.disabled) {
+    if (item.disabled || isMobileMode) {
       event.preventDefault();
       return;
     }
@@ -26504,6 +26691,13 @@ var MegaMenu = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__namespace
   var collapseMenu = function collapseMenu(item) {
     setActiveItemState(null);
   };
+  var toggle = function toggle(event) {
+    event.preventDefault();
+    setMobileActiveState(function (prevMobileActive) {
+      return !prevMobileActive;
+    });
+    setActiveItemState(null);
+  };
   var findNextItem = function findNextItem(item) {
     var nextItem = item.nextElementSibling;
     return nextItem ? DomHandler.hasClass(nextItem, 'p-disabled') || !DomHandler.hasClass(nextItem, 'p-menuitem') ? findNextItem(nextItem) : nextItem : null;
@@ -26521,7 +26715,7 @@ var MegaMenu = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__namespace
     prevItem && prevItem.children[0].focus();
   };
   var isOutsideClicked = function isOutsideClicked(event) {
-    return elementRef.current && !(elementRef.current.isSameNode(event.target) || elementRef.current.contains(event.target));
+    return elementRef.current && !(elementRef.current.isSameNode(event.target) || elementRef.current.contains(event.target) || menuButtonRef.current && menuButtonRef.current.contains(event.target));
   };
   var getColumnClassName = function getColumnClassName(category) {
     var length = category.items ? category.items.length : 0;
@@ -26554,13 +26748,23 @@ var MegaMenu = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__namespace
     };
   });
   useMountEffect(function () {
+    if (props.breakpoint) {
+      !attributeSelectorState && setAttributeSelectorState(UniqueComponentId());
+    }
     bindDocumentClickListener();
+    bindDocumentResizeListener();
   });
   useUpdateEffect(function () {
     var currentPanel = DomHandler.findSingle(elementRef.current, '.p-menuitem-active > .p-megamenu-panel');
-    if (activeItemState) {
+    if (activeItemState && !isMobileMode) {
       ZIndexUtils.set('menu', currentPanel, PrimeReact.autoZIndex, PrimeReact.zIndex['menu']);
     }
+    if (isMobileMode) {
+      currentPanel && currentPanel.previousElementSibling.scrollIntoView({
+        block: 'nearest',
+        inline: 'nearest'
+      });
+    }
     return function () {
       ZIndexUtils.clear(currentPanel);
     };
@@ -26686,6 +26890,26 @@ var MegaMenu = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__namespace
     }
     return null;
   };
+  var createStyle = function createStyle() {
+    if (!styleElementRef.current) {
+      styleElementRef.current = DomHandler.createInlineStyle(PrimeReact.nonce);
+      var selector = "".concat(attributeSelectorState);
+      var innerHTML = "\n@media screen and (max-width: ".concat(props.breakpoint, ") {\n    .p-megamenu[").concat(selector, "] > .p-megamenu-root-list .p-menuitem-active .p-megamenu-panel {\n        position: relative;\n        left: 0 !important;\n        box-shadow: none;\n        border-radius: 0;\n        background: inherit;\n    }\n\n    .p-megamenu[").concat(selector, "] .p-menuitem-active > .p-menuitem-link > .p-submenu-icon {\n        transform: rotate(-180deg);\n    }\n\n    .p-megamenu[").concat(selector, "] .p-megamenu-grid {\n        flex-wrap: wrap;\n    }\n\n    ").concat(horizontal ? "\n.p-megamenu[".concat(selector, "] .p-megamenu-button {\n    display: flex;\n}\n\n.p-megamenu[").concat(selector, "].p-megamenu-horizontal {\n    position: relative;\n}\n\n.p-megamenu[").concat(selector, "].p-megamenu-horizontal .p-megamenu-root-list {\n    display: none;\n}\n\n.p-megamenu-horizontal[").concat(selector, "] div[class*=\"p-megamenu-col-\"] {\n    width: auto;\n    flex: 1;\n    padding: 0;\n}\n\n.p-megamenu[").concat(selector, "].p-megamenu-mobile-active .p-megamenu-root-list {\n    display: flex;\n    flex-direction: column;\n    position: absolute;\n    width: 100%;\n    top: 100%;\n    left: 0;\n    z-index: 1;\n}\n        ") : '', "\n\n    ").concat(vertical ? "\n.p-megamenu-vertical[".concat(selector, "] {\n    width: 100%;\n}\n\n.p-megamenu-vertical[").concat(selector, "] .p-megamenu-root-list {\n    max-height: ").concat(props.scrollHeight, ";\n    overflow: ").concat(props.scrollHeight ? 'auto' : '', ";\n}\n.p-megamenu-vertical[").concat(selector, "] div[class*=\"p-megamenu-col-\"] {\n    width: 100%;\n    padding: 0;\n}\n\n.p-megamenu-vertical[").concat(selector, "] .p-megamenu-submenu {\n    width: 100%;\n}\n\n.p-megamenu-vertical[").concat(selector, "] div[class*=\"p-megamenu-col-\"] .p-megamenu-submenu-header {\n    background: inherit;\n}\n\n.p-megamenu-vertical[").concat(selector, "] .p-submenu-icon:before {\n    content: \"\\e930\";\n}\n        ") : '', "\n}\n");
+      styleElementRef.current.innerHTML = innerHTML;
+    }
+  };
+  var destroyStyle = function destroyStyle() {
+    styleElementRef.current = DomHandler.removeInlineStyle(styleElementRef.current);
+  };
+  useUpdateEffect(function () {
+    if (attributeSelectorState && elementRef.current) {
+      elementRef.current.setAttribute(attributeSelectorState, '');
+      createStyle();
+    }
+    return function () {
+      destroyStyle();
+    };
+  }, [attributeSelectorState, props.breakpoint]);
   var createCategory = function createCategory(category, index) {
     var className = classNames('p-menuitem', {
       'p-menuitem-active': category === activeItemState
@@ -26756,20 +26980,41 @@ var MegaMenu = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__namespace
     }
     return null;
   };
+  var createMenuButton = function createMenuButton() {
+    if (props.orientation === 'vertical' || props.model && props.model.length < 1) {
+      return null;
+    }
+    /* eslint-disable */
+    var button = /*#__PURE__*/React__namespace.createElement("a", {
+      ref: menuButtonRef,
+      href: '#',
+      role: "button",
+      tabIndex: 0,
+      className: "p-megamenu-button",
+      onClick: toggle
+    }, /*#__PURE__*/React__namespace.createElement("i", {
+      className: "pi pi-bars"
+    }));
+    /* eslint-enable */
+
+    return button;
+  };
   var otherProps = MegaMenuBase.getOtherProps(props);
   var className = classNames('p-megamenu p-component', {
     'p-megamenu-horizontal': props.orientation === 'horizontal',
-    'p-megamenu-vertical': props.orientation === 'vertical'
+    'p-megamenu-vertical': props.orientation === 'vertical',
+    'p-megamenu-mobile-active': mobileActiveState
   }, props.className);
   var menu = createMenu();
   var start = createStartContent();
   var end = createEndContent();
+  var menuButton = createMenuButton();
   return /*#__PURE__*/React__namespace.createElement("div", _extends({
     ref: elementRef,
     id: props.id,
     className: className,
     style: props.style
-  }, otherProps), start, menu, end);
+  }, otherProps), start, menuButton, menu, end);
 }));
 MegaMenu.displayName = 'MegaMenu';
 
@@ -28305,6 +28550,7 @@ var MultiSelectPanel = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__n
           var content = isEmptyFilter() ? createEmptyFilter() : options.children;
           return /*#__PURE__*/React__namespace.createElement("ul", {
             ref: options.contentRef,
+            style: options.style,
             className: className,
             role: "listbox",
             "aria-multiselectable": true
@@ -35754,6 +36000,8 @@ var TieredMenuBase = {
     className: null,
     autoZIndex: true,
     baseZIndex: 0,
+    breakpoint: undefined,
+    scrollHeight: '400px',
     appendTo: null,
     transitionOptions: null,
     onShow: null,
@@ -35777,13 +36025,20 @@ var TieredMenuSub = /*#__PURE__*/React__namespace.memo(function (props) {
   var _useEventListener = useEventListener({
       type: 'click',
       listener: function listener(event) {
-        if (elementRef.current && !elementRef.current.contains(event.target)) {
+        if (!props.isMobileMode && elementRef.current && !elementRef.current.contains(event.target)) {
           setActiveItemState(null);
         }
       }
     }),
     _useEventListener2 = _slicedToArray(_useEventListener, 1),
     bindDocumentClickListener = _useEventListener2[0];
+  var _useResizeListener = useResizeListener({
+      listener: function listener() {
+        !props.isMobileMode && setActiveItemState(null);
+      }
+    }),
+    _useResizeListener2 = _slicedToArray(_useResizeListener, 1),
+    bindDocumentResizeListener = _useResizeListener2[0];
   var position = function position() {
     if (elementRef.current) {
       var parentItem = elementRef.current.parentElement;
@@ -35803,7 +36058,7 @@ var TieredMenuSub = /*#__PURE__*/React__namespace.memo(function (props) {
     }
   };
   var onItemMouseEnter = function onItemMouseEnter(event, item) {
-    if (item.disabled) {
+    if (item.disabled || props.isMobileMode) {
       event.preventDefault();
       return;
     }
@@ -35829,7 +36084,7 @@ var TieredMenuSub = /*#__PURE__*/React__namespace.memo(function (props) {
         item: item
       });
     }
-    if (props.root) {
+    if (props.root || props.isMobileMode) {
       if (item.items) {
         if (activeItemState && item === activeItemState) setActiveItemState(null);else setActiveItemState(item);
       }
@@ -35884,21 +36139,27 @@ var TieredMenuSub = /*#__PURE__*/React__namespace.memo(function (props) {
     return prevItem ? DomHandler.hasClass(prevItem, 'p-disabled') || !DomHandler.hasClass(prevItem, 'p-menuitem') ? findPrevItem(prevItem) : prevItem : null;
   };
   var onLeafClick = function onLeafClick(event) {
-    setActiveItemState(null);
-    props.onLeafClick && props.onLeafClick(event);
-    props.onHide && props.onHide(event);
+    if (!props.isMobileMode || props.popup) {
+      setActiveItemState(null);
+      props.onLeafClick && props.onLeafClick(event);
+      props.onHide && props.onHide(event);
+    }
   };
   useMountEffect(function () {
     bindDocumentClickListener();
+    bindDocumentResizeListener();
   });
   useUpdateEffect(function () {
     if (!props.parentActive) {
       setActiveItemState(null);
     }
-    if (!props.root && props.parentActive) {
+    if (!props.root && props.parentActive && !props.isMobileMode) {
       position();
     }
   }, [props.parentActive]);
+  useUpdateEffect(function () {
+    props.onItemToggle && props.onItemToggle();
+  }, [activeItemState]);
   var createSeparator = function createSeparator(index) {
     var key = 'separator_' + index;
     return /*#__PURE__*/React__namespace.createElement("li", {
@@ -35915,7 +36176,9 @@ var TieredMenuSub = /*#__PURE__*/React__namespace.memo(function (props) {
         onLeafClick: onLeafClick,
         popup: props.popup,
         onKeyDown: onChildItemKeyDown,
-        parentActive: item === activeItemState
+        parentActive: item === activeItemState,
+        isMobileMode: props.isMobileMode,
+        onItemToggle: props.onItemToggle
       });
     }
     return null;
@@ -36025,8 +36288,14 @@ var TieredMenu = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__namespa
     _React$useState2 = _slicedToArray(_React$useState, 2),
     visibleState = _React$useState2[0],
     setVisibleState = _React$useState2[1];
+  var _React$useState3 = React__namespace.useState(null),
+    _React$useState4 = _slicedToArray(_React$useState3, 2),
+    attributeSelectorState = _React$useState4[0],
+    setAttributeSelectorState = _React$useState4[1];
   var menuRef = React__namespace.useRef(null);
   var targetRef = React__namespace.useRef(null);
+  var styleElementRef = React__namespace.useRef(null);
+  var isMobileMode = useMatchMedia("screen and (max-width: ".concat(props.breakpoint, ")"), !!props.breakpoint);
   var _useOverlayListener = useOverlayListener({
       target: targetRef,
       overlay: menuRef,
@@ -36064,11 +36333,31 @@ var TieredMenu = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__namespa
       props.onHide && props.onHide(event);
     }
   };
+  var onItemToggle = function onItemToggle() {
+    if (props.popup && isMobileMode) {
+      DomHandler.absolutePosition(menuRef.current, targetRef.current);
+    }
+  };
+  var createStyle = function createStyle() {
+    if (!styleElementRef.current) {
+      styleElementRef.current = DomHandler.createInlineStyle(PrimeReact.nonce);
+      var selector = "".concat(attributeSelectorState);
+      var innerHTML = "\n@media screen and (max-width: ".concat(props.breakpoint, ") {\n    .p-tieredmenu[").concat(selector, "] > ul {\n        max-height: ").concat(props.scrollHeight, ";\n        overflow: ").concat(props.scrollHeight ? 'auto' : '', ";\n    }\n\n    .p-tieredmenu[").concat(selector, "] .p-submenu-list {\n        position: relative;\n    }\n\n    .p-tieredmenu[").concat(selector, "] .p-menuitem-active > .p-submenu-list {\n        left: 0 !important;\n        box-shadow: none;\n        border-radius: 0;\n        padding: 0 0 0 calc(var(--inline-spacing) * 2); /* @todo */\n    }\n\n    .p-tieredmenu[").concat(selector, "] .p-menuitem-active > .p-menuitem-link > .p-submenu-icon {\n        transform: rotate(-180deg);\n    }\n\n    .p-tieredmenu[").concat(selector, "] .p-submenu-icon:before {\n        content: \"\\e930\";\n    }\n\n    ").concat(!props.popup ? ".p-tieredmenu[".concat(selector, "] { width: 100%; }") : '', "\n}\n");
+      styleElementRef.current.innerHTML = innerHTML;
+    }
+  };
+  var destroyStyle = function destroyStyle() {
+    styleElementRef.current = DomHandler.removeInlineStyle(styleElementRef.current);
+  };
   var onEnter = function onEnter() {
     if (props.autoZIndex) {
       ZIndexUtils.set('menu', menuRef.current, PrimeReact.autoZIndex, props.baseZIndex || PrimeReact.zIndex['menu']);
     }
     DomHandler.absolutePosition(menuRef.current, targetRef.current);
+    if (attributeSelectorState && props.breakpoint) {
+      menuRef.current.setAttribute(attributeSelectorState, '');
+      createStyle();
+    }
   };
   var onEntered = function onEntered() {
     bindOverlayListener();
@@ -36079,7 +36368,22 @@ var TieredMenu = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__namespa
   };
   var onExited = function onExited() {
     ZIndexUtils.clear(menuRef.current);
+    destroyStyle();
   };
+  useMountEffect(function () {
+    if (props.breakpoint) {
+      !attributeSelectorState && setAttributeSelectorState(UniqueComponentId());
+    }
+  });
+  useUpdateEffect(function () {
+    if (attributeSelectorState && menuRef.current) {
+      menuRef.current.setAttribute(attributeSelectorState, '');
+      createStyle();
+    }
+    return function () {
+      destroyStyle();
+    };
+  }, [attributeSelectorState, props.breakpoint]);
   useUnmountEffect(function () {
     ZIndexUtils.clear(menuRef.current);
   });
@@ -36127,7 +36431,9 @@ var TieredMenu = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__namespa
       model: props.model,
       root: true,
       popup: props.popup,
-      onHide: hide
+      onHide: hide,
+      isMobileMode: isMobileMode,
+      onItemToggle: onItemToggle
     })));
   };
   var element = createElement();
@@ -38419,7 +38725,6 @@ var TreeTableBase = {
   defaultProps: {
     __TYPE: 'TreeTable',
     alwaysShowPaginator: true,
-    autoLayout: false,
     className: null,
     columnResizeMode: 'fit',
     contextMenuSelectionKey: null,
@@ -38934,14 +39239,14 @@ var TreeTableRow = /*#__PURE__*/React__namespace.memo(function (props) {
       return null;
     }
   };
-  var createCell = function createCell(column) {
+  var createCell = function createCell(column, index) {
     var toggler, checkbox;
     if (getColumnProp(column, 'expander')) {
       toggler = createToggler();
       checkbox = createCheckbox();
     }
     return /*#__PURE__*/React__namespace.createElement(TreeTableBodyCell, _extends({
-      key: getColumnProp(column, 'columnKey') || getColumnProp(column, 'field')
+      key: "".concat(getColumnProp(column, 'columnKey') || getColumnProp(column, 'field'), "_").concat(index)
     }, ColumnBase.getCProps(column), {
       column: column,
       selectOnEdit: props.selectOnEdit,
@@ -38954,7 +39259,7 @@ var TreeTableRow = /*#__PURE__*/React__namespace.memo(function (props) {
     if (expanded && props.node.children) {
       return props.node.children.map(function (childNode, index) {
         return /*#__PURE__*/React__namespace.createElement(TreeTableRow, {
-          key: childNode.key || JSON.stringify(childNode.data),
+          key: "".concat(childNode.key || JSON.stringify(childNode.data), "_").concat(index),
           level: props.level + 1,
           rowIndex: props.rowIndex + '_' + index,
           node: childNode,
@@ -39159,7 +39464,7 @@ var TreeTableBody = /*#__PURE__*/React__namespace.memo(function (props) {
   };
   var createRow = function createRow(node, index) {
     return /*#__PURE__*/React__namespace.createElement(TreeTableRow, {
-      key: node.key || JSON.stringify(node.data),
+      key: "".concat(node.key || JSON.stringify(node.data), "_").concat(index),
       level: 0,
       rowIndex: index,
       selectOnEdit: props.selectOnEdit,
@@ -40559,7 +40864,7 @@ var TreeTable = /*#__PURE__*/React__namespace.forwardRef(function (inProps, ref)
     }
     scrollableView = createScrollableView(value, scrollableColumns, false, props.headerColumnGroup, props.footerColumnGroup);
     return /*#__PURE__*/React__namespace.createElement("div", {
-      className: "p-treetable-scrollable-wrapper"
+      className: "p-treetable-wrapper p-treetable-scrollable-wrapper"
     }, frozenView, scrollableView);
   };
   var createRegularTable = function createRegularTable(value) {
@@ -40567,12 +40872,17 @@ var TreeTable = /*#__PURE__*/React__namespace.forwardRef(function (inProps, ref)
     var header = createTableHeader(columns, props.headerColumnGroup);
     var footer = createTableFooter(columns, props.footerColumnGroup);
     var body = createTableBody(value, columns);
+    var tableClassName = classNames('p-treetable-table', {
+      'p-treetable-scrollable-table': props.scrollable,
+      'p-treetable-resizable-table': props.resizableColumns,
+      'p-treetable-resizable-table-fit': props.resizableColumns && props.columnResizeMode === 'fit'
+    }, props.tableClassName);
     return /*#__PURE__*/React__namespace.createElement("div", {
       className: "p-treetable-wrapper"
     }, /*#__PURE__*/React__namespace.createElement("table", {
       ref: tableRef,
       style: props.tableStyle,
-      className: props.tableClassName
+      className: tableClassName
     }, header, footer, body));
   };
   var createTable = function createTable(value) {
@@ -40598,7 +40908,6 @@ var TreeTable = /*#__PURE__*/React__namespace.forwardRef(function (inProps, ref)
     'p-treetable-selectable': isRowSelectionMode(),
     'p-treetable-resizable': props.resizableColumns,
     'p-treetable-resizable-fit': props.resizableColumns && props.columnResizeMode === 'fit',
-    'p-treetable-auto-layout': props.autoLayout,
     'p-treetable-striped': props.stripedRows,
     'p-treetable-gridlines': props.showGridlines
   }, props.className);
@@ -40641,7 +40950,7 @@ var TreeTable = /*#__PURE__*/React__namespace.forwardRef(function (inProps, ref)
     id: props.id,
     className: className,
     style: props.style,
-    "data-scrollselectors": ".p-treetable-scrollable-body"
+    "data-scrollselectors": ".p-treetable-wrapper"
   }, otherProps), loader, headerFacet, paginatorTop, table, paginatorBottom, footerFacet, resizeHelper, reorderIndicatorUp, reorderIndicatorDown);
 });
 TreeTable.displayName = 'TreeTable';
@@ -40902,6 +41211,7 @@ exports.useFavicon = useFavicon;
 exports.useIntersectionObserver = useIntersectionObserver;
 exports.useInterval = useInterval;
 exports.useLocalStorage = useLocalStorage;
+exports.useMatchMedia = useMatchMedia;
 exports.useMountEffect = useMountEffect;
 exports.useMouse = useMouse;
 exports.useMove = useMove;