primereact 9.1.1 → 9.2.0

package/primereact.all.esm.js

@@ -266,7 +266,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);
@@ -279,7 +279,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);
@@ -463,7 +463,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
@@ -495,7 +495,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
@@ -1930,12 +1930,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 */
     }
   }, {
@@ -2938,6 +2943,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.useState(false),
+    _React$useState2 = _slicedToArray(_React$useState, 2),
+    matches = _React$useState2[0],
+    setMatches = _React$useState2[1];
+  var matchMedia = React.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.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.useEffect(fn, []);
@@ -3263,11 +3296,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
   });
 };
 
@@ -4716,14 +4752,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,
@@ -4753,6 +4793,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.memo( /*#__PURE__*/React.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';
@@ -4770,25 +4811,29 @@ var VirtualScroller = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(fun
     _React$useState4 = _slicedToArray(_React$useState3, 2),
     lastState = _React$useState4[0],
     setLastState = _React$useState4[1];
-  var _React$useState5 = React.useState(both ? {
+  var _React$useState5 = React.useState(0),
+    _React$useState6 = _slicedToArray(_React$useState5, 2),
+    pageState = _React$useState6[0],
+    setPageState = _React$useState6[1];
+  var _React$useState7 = React.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.useState(props.numToleratedItems),
     _React$useState8 = _slicedToArray(_React$useState7, 2),
-    numToleratedItemsState = _React$useState8[0],
-    setNumToleratedItemsState = _React$useState8[1];
-  var _React$useState9 = React.useState(props.loading || false),
+    numItemsInViewportState = _React$useState8[0],
+    setNumItemsInViewportState = _React$useState8[1];
+  var _React$useState9 = React.useState(props.numToleratedItems),
     _React$useState10 = _slicedToArray(_React$useState9, 2),
-    loadingState = _React$useState10[0],
-    setLoadingState = _React$useState10[1];
-  var _React$useState11 = React.useState([]),
+    numToleratedItemsState = _React$useState10[0],
+    setNumToleratedItemsState = _React$useState10[1];
+  var _React$useState11 = React.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.useState([]),
+    _React$useState14 = _slicedToArray(_React$useState13, 2),
+    loaderArrState = _React$useState14[0],
+    setLoaderArrState = _React$useState14[1];
   var elementRef = React.useRef(null);
   var _contentRef = React.useRef(null);
   var _spacerRef = React.useRef(null);
@@ -4799,14 +4844,19 @@ var VirtualScroller = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(fun
   } : 0);
   var scrollTimeout = React.useRef(null);
   var resizeTimeout = React.useRef(null);
+  var contentStyle = React.useRef({});
+  var spacerStyle = React.useRef({});
   var defaultWidth = React.useRef(null);
   var defaultHeight = React.useRef(null);
-  var prevItems = usePrevious(props.items);
-  var prevLoading = usePrevious(props.loading);
+  var defaultContentWidth = React.useRef(null);
+  var defaultContentHeight = React.useRef(null);
+  var isItemRangeChanged = React.useRef(false);
+  var lazyLoadState = React.useRef(null);
   var _useResizeListener = useResizeListener({
       listener: function listener(event) {
         return onResize();
-      }
+      },
+      when: !props.disabled
     }),
     _useResizeListener2 = _slicedToArray(_useResizeListener, 1),
     bindWindowResizeListener = _useResizeListener2[0];
@@ -4815,13 +4865,23 @@ var VirtualScroller = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(fun
       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,
@@ -4833,13 +4893,14 @@ var VirtualScroller = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(fun
     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;
@@ -4850,20 +4911,25 @@ var VirtualScroller = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(fun
         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';
@@ -4980,7 +5046,8 @@ var VirtualScroller = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(fun
     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 ? {
@@ -5002,9 +5069,15 @@ var VirtualScroller = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(fun
       }));
     }
     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);
       });
     }
   };
@@ -5013,12 +5086,21 @@ var VirtualScroller = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(fun
       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 = '';
         }
       });
     }
@@ -5031,10 +5113,10 @@ var VirtualScroller = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(fun
   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,
@@ -5071,11 +5153,11 @@ var VirtualScroller = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(fun
   };
   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);
@@ -5086,7 +5168,7 @@ var VirtualScroller = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(fun
     }
   };
   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;
@@ -5095,7 +5177,9 @@ var VirtualScroller = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(fun
         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]));
@@ -5139,36 +5223,40 @@ var VirtualScroller = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(fun
     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,
@@ -5193,8 +5281,14 @@ var VirtualScroller = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(fun
       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;
       }
     }
   };
@@ -5204,17 +5298,21 @@ var VirtualScroller = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(fun
       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);
     }
@@ -5225,9 +5323,9 @@ var VirtualScroller = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(fun
     }
     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;
@@ -5235,6 +5333,8 @@ var VirtualScroller = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(fun
           setNumToleratedItemsState(props.numToleratedItems);
           defaultWidth.current = width;
           defaultHeight.current = height;
+          defaultContentWidth.current = DomHandler.getWidth(_contentRef.current);
+          defaultContentHeight.current = DomHandler.getHeight(_contentRef.current);
         }
       }
     }, props.resizeDelay);
@@ -5267,12 +5367,24 @@ var VirtualScroller = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(fun
   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();
@@ -5281,17 +5393,11 @@ var VirtualScroller = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(fun
     }
   };
   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);
@@ -5303,11 +5409,11 @@ var VirtualScroller = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(fun
     }
   }, [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;
     }
@@ -5369,6 +5475,7 @@ var VirtualScroller = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(fun
     if (props.showSpacer) {
       return /*#__PURE__*/React.createElement("div", {
         ref: _spacerRef,
+        style: spacerStyle.current,
         className: "p-virtualscroller-spacer"
       });
     }
@@ -5392,11 +5499,14 @@ var VirtualScroller = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(fun
     });
     var content = /*#__PURE__*/React.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);
         },
@@ -5439,10 +5549,9 @@ var VirtualScroller = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(fun
   } 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();
@@ -5450,7 +5559,7 @@ var VirtualScroller = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(fun
     return /*#__PURE__*/React.createElement("div", _extends({
       ref: elementRef,
       className: className,
-      tabIndex: 0,
+      tabIndex: props.tabIndex,
       style: props.style
     }, otherProps, {
       onScroll: onScroll
@@ -5546,6 +5655,7 @@ var AutoCompletePanel = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(f
           var className = classNames('p-autocomplete-items', options.className);
           return /*#__PURE__*/React.createElement("ul", {
             ref: options.contentRef,
+            style: options.style,
             className: className,
             role: "listbox",
             id: props.listId
@@ -6217,7 +6327,7 @@ var Avatar = /*#__PURE__*/React.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.createElement("img", {
         src: props.image,
         alt: props.imageAlt,
@@ -6259,7 +6369,7 @@ var Avatar = /*#__PURE__*/React.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',
@@ -8832,7 +8942,7 @@ var Calendar = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function (
       setValue(props.value);
     }
     return function () {
-      props.mask && unbindMaskEvents();
+      props.mask && unbindMaskEvents && unbindMaskEvents();
     };
   });
   useUpdateEffect(function () {
@@ -9056,7 +9166,7 @@ var Calendar = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function (
       }
       return _content2;
     }
-    var displayYear = props.inline ? metaYear : currentYear;
+    var displayYear = props.numberOfMonths > 1 ? metaYear : currentYear;
     return currentView !== 'year' && /*#__PURE__*/React.createElement("button", {
       className: "p-datepicker-year p-link",
       onClick: switchToYearView,
@@ -13140,6 +13250,8 @@ var ContextMenuBase = {
     global: false,
     autoZIndex: true,
     baseZIndex: 0,
+    breakpoint: undefined,
+    scrollHeight: '400px',
     appendTo: null,
     transitionOptions: null,
     onShow: null,
@@ -13165,7 +13277,7 @@ var ContextMenuSub = /*#__PURE__*/React.memo(function (props) {
     setActiveItemState(null);
   }
   var onItemMouseEnter = function onItemMouseEnter(event, item) {
-    if (item.disabled) {
+    if (item.disabled || props.isMobileMode) {
       event.preventDefault();
       return;
     }
@@ -13185,26 +13297,31 @@ var ContextMenuSub = /*#__PURE__*/React.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() {
@@ -13226,7 +13343,8 @@ var ContextMenuSub = /*#__PURE__*/React.memo(function (props) {
         menuProps: props.menuProps,
         model: item.items,
         resetMenu: item !== activeItemState,
-        onLeafClick: props.onLeafClick
+        onLeafClick: props.onLeafClick,
+        isMobileMode: props.isMobileMode
       });
     }
     return null;
@@ -13335,8 +13453,14 @@ var ContextMenu = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(functio
     _React$useState6 = _slicedToArray(_React$useState5, 2),
     resetMenuState = _React$useState6[0],
     setResetMenuState = _React$useState6[1];
+  var _React$useState7 = React.useState(null),
+    _React$useState8 = _slicedToArray(_React$useState7, 2),
+    attributeSelectorState = _React$useState8[0],
+    setAttributeSelectorState = _React$useState8[1];
   var menuRef = React.useRef(null);
   var currentEvent = React.useRef(null);
+  var styleElementRef = React.useRef(null);
+  var isMobileMode = useMatchMedia("screen and (max-width: ".concat(props.breakpoint, ")"), !!props.breakpoint);
   var _useEventListener = useEventListener({
       type: 'click',
       listener: function listener(event) {
@@ -13367,6 +13491,17 @@ var ContextMenu = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(functio
     _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);
   };
@@ -13395,6 +13530,10 @@ var ContextMenu = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(functio
       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();
@@ -13405,6 +13544,7 @@ var ContextMenu = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(functio
   };
   var onExited = function onExited() {
     ZIndexUtils.clear(menuRef.current);
+    destroyStyle();
   };
   var position = function position(event) {
     if (event) {
@@ -13457,7 +13597,19 @@ var ContextMenu = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(functio
     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);
@@ -13513,7 +13665,8 @@ var ContextMenu = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(functio
       model: props.model,
       root: true,
       resetMenu: resetMenuState,
-      onLeafClick: onLeafClick
+      onLeafClick: onLeafClick,
+      isMobileMode: isMobileMode
     })));
   };
   var element = createContextMenu();
@@ -15474,6 +15627,7 @@ var DropdownPanel = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(funct
           var content = isEmptyFilter ? createEmptyMessage() : options.children;
           return /*#__PURE__*/React.createElement("ul", {
             ref: options.contentRef,
+            style: options.style,
             className: className,
             role: "listbox"
           }, content);
@@ -16514,7 +16668,6 @@ var DataTableBase = {
   defaultProps: {
     __TYPE: 'DataTable',
     alwaysShowPaginator: true,
-    autoLayout: false,
     breakpoint: '960px',
     cellClassName: null,
     cellSelection: false,
@@ -16606,7 +16759,7 @@ var DataTableBase = {
     reorderableColumns: false,
     reorderableRows: false,
     resizableColumns: false,
-    responsiveLayout: 'stack',
+    responsiveLayout: 'scroll',
     rowClassName: null,
     rowEditValidator: null,
     rowExpansionTemplate: null,
@@ -16616,7 +16769,6 @@ var DataTableBase = {
     rowHover: false,
     rows: null,
     rowsPerPageOptions: null,
-    scrollDirection: 'vertical',
     scrollHeight: null,
     scrollable: false,
     selectAll: false,
@@ -17470,7 +17622,7 @@ var BodyRow = /*#__PURE__*/React.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) {
@@ -17527,35 +17679,35 @@ var BodyRow = /*#__PURE__*/React.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) {
@@ -17609,49 +17761,49 @@ var BodyRow = /*#__PURE__*/React.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) {
@@ -17695,7 +17847,7 @@ var BodyRow = /*#__PURE__*/React.memo(function (props) {
       props.onRowEditInit({
         originalEvent: event,
         data: props.rowData,
-        index: props.index
+        index: props.rowIndex
       });
     }
     onEditChange(e, true);
@@ -17711,7 +17863,7 @@ var BodyRow = /*#__PURE__*/React.memo(function (props) {
       props.onRowEditSave({
         originalEvent: event,
         data: props.rowData,
-        index: props.index,
+        index: props.rowIndex,
         valid: valid
       });
     }
@@ -17729,7 +17881,7 @@ var BodyRow = /*#__PURE__*/React.memo(function (props) {
       props.onRowEditCancel({
         originalEvent: event,
         data: props.rowData,
-        index: props.index
+        index: props.rowIndex
       });
     }
     onEditChange(e, false);
@@ -17747,7 +17899,7 @@ var BodyRow = /*#__PURE__*/React.memo(function (props) {
           tableSelector: props.tableSelector,
           column: col,
           rowData: props.rowData,
-          rowIndex: props.index,
+          rowIndex: props.rowIndex,
           index: i,
           rowSpan: rowSpan,
           dataKey: props.dataKey,
@@ -17794,9 +17946,9 @@ var BodyRow = /*#__PURE__*/React.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
@@ -17871,7 +18023,6 @@ var TableBody = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function
   var rowDragging = React.useRef(false);
   var draggedRowIndex = React.useRef(null);
   var droppedRowIndex = React.useRef(null);
-  var prevVirtualScrollerOptions = usePrevious(props.virtualScrollerOptions);
   var isSubheaderGrouping = props.rowGroupMode && props.rowGroupMode === 'subheader';
   var isRadioSelectionMode = props.selectionMode === 'radiobutton';
   var isCheckboxSelectionMode = props.selectionMode === 'checkbox';
@@ -18021,10 +18172,6 @@ var TableBody = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function
       });
     }
   };
-  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,
@@ -18578,16 +18725,6 @@ var TableBody = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function
       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;
@@ -18615,9 +18752,8 @@ var TableBody = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function
     }
     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.createElement(RowTogglerButton, {
         onClick: onRowToggle,
@@ -18626,9 +18762,11 @@ var TableBody = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function
         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
@@ -18647,7 +18785,7 @@ var TableBody = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function
     }
     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);
@@ -18660,6 +18798,7 @@ var TableBody = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function
         value: props.value,
         columns: props.columns,
         rowData: rowData,
+        rowIndex: rowIndex,
         index: index,
         selected: selected,
         contextMenuSelected: contextMenuSelected,
@@ -18718,11 +18857,11 @@ var TableBody = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function
       });
     }
   };
-  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);
@@ -18742,10 +18881,10 @@ var TableBody = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function
     }
     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
       });
@@ -18757,25 +18896,25 @@ var TableBody = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function
     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.createElement(React.Fragment, {
         key: key
       }, groupHeader, row, expansion, groupFooter);
     });
   };
-  var className = classNames('p-datatable-tbody', props.className);
   var content = props.empty ? createEmptyContent() : createContent();
   return /*#__PURE__*/React.createElement("tbody", {
     ref: refCallback,
-    className: className
+    style: props.style,
+    className: props.className
   }, content);
 }));
 TableBody.displayName = 'TableBody';
@@ -20466,9 +20605,10 @@ var DataTable = /*#__PURE__*/React.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;
       }
@@ -20636,10 +20776,11 @@ var DataTable = /*#__PURE__*/React.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;
   };
@@ -20802,7 +20943,9 @@ var DataTable = /*#__PURE__*/React.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;
     }
   };
@@ -21279,7 +21422,7 @@ var DataTable = /*#__PURE__*/React.forwardRef(function (inProps, ref) {
     return data;
   };
   useMountEffect(function () {
-    setAttributeSelectorState(UniqueComponentId());
+    !attributeSelectorState && setAttributeSelectorState(UniqueComponentId());
     setFiltersState(cloneFilters(props.filters));
     setD_filtersState(cloneFilters(props.filters));
     if (isStateful()) {
@@ -21290,11 +21433,16 @@ var DataTable = /*#__PURE__*/React.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);
@@ -21425,12 +21573,14 @@ var DataTable = /*#__PURE__*/React.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.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,
@@ -21501,7 +21651,8 @@ var DataTable = /*#__PURE__*/React.forwardRef(function (inProps, ref) {
     var body = /*#__PURE__*/React.createElement(TableBody, {
       ref: bodyRef,
       value: dataToRender(rows),
-      className: className,
+      style: style,
+      className: classNames('p-datatable-tbody', className),
       empty: empty,
       frozenRow: false,
       tableProps: props,
@@ -21571,7 +21722,13 @@ var DataTable = /*#__PURE__*/React.forwardRef(function (inProps, ref) {
       virtualScrollerOptions: options,
       isVirtualScrollerDisabled: isVirtualScrollerDisabled
     });
-    return /*#__PURE__*/React.createElement(React.Fragment, null, frozenBody, body);
+    var spacerBody = ObjectUtils.isNotEmpty(spacerStyle) ? /*#__PURE__*/React.createElement(TableBody, {
+      style: {
+        height: "calc(".concat(spacerStyle.height, " - ").concat(rows.length * itemSize, "px)")
+      },
+      className: "p-datatable-virtualscroller-spacer"
+    }) : null;
+    return /*#__PURE__*/React.createElement(React.Fragment, null, frozenBody, body, spacerBody);
   };
   var createTableFooter = function createTableFooter(options) {
     var columns = options.columns;
@@ -21602,13 +21759,19 @@ var DataTable = /*#__PURE__*/React.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);
@@ -21703,13 +21866,9 @@ var DataTable = /*#__PURE__*/React.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',
@@ -26313,14 +26472,15 @@ var ListBox = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function (i
         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.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.createElement(VirtualScroller, _extends({
@@ -26368,6 +26528,8 @@ var MegaMenuBase = {
     style: null,
     className: null,
     orientation: 'horizontal',
+    breakpoint: undefined,
+    scrollHeight: '400px',
     start: null,
     end: null,
     children: undefined
@@ -26386,17 +26548,41 @@ var MegaMenu = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function (
     _React$useState2 = _slicedToArray(_React$useState, 2),
     activeItemState = _React$useState2[0],
     setActiveItemState = _React$useState2[1];
+  var _React$useState3 = React.useState(null),
+    _React$useState4 = _slicedToArray(_React$useState3, 2),
+    attributeSelectorState = _React$useState4[0],
+    setAttributeSelectorState = _React$useState4[1];
+  var _React$useState5 = React.useState(false),
+    _React$useState6 = _slicedToArray(_React$useState5, 2),
+    mobileActiveState = _React$useState6[0],
+    setMobileActiveState = _React$useState6[1];
   var elementRef = React.useRef(null);
+  var styleElementRef = React.useRef(null);
+  var menuButtonRef = React.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();
@@ -26412,9 +26598,10 @@ var MegaMenu = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function (
       });
     }
     setActiveItemState(null);
+    setMobileActiveState(false);
   };
   var onCategoryMouseEnter = function onCategoryMouseEnter(event, item) {
-    if (item.disabled) {
+    if (item.disabled || isMobileMode) {
       event.preventDefault();
       return;
     }
@@ -26477,6 +26664,13 @@ var MegaMenu = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function (
   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;
@@ -26494,7 +26688,7 @@ var MegaMenu = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function (
     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;
@@ -26527,13 +26721,23 @@ var MegaMenu = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function (
     };
   });
   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);
     };
@@ -26659,6 +26863,26 @@ var MegaMenu = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function (
     }
     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
@@ -26729,20 +26953,41 @@ var MegaMenu = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function (
     }
     return null;
   };
+  var createMenuButton = function createMenuButton() {
+    if (props.orientation === 'vertical' || props.model && props.model.length < 1) {
+      return null;
+    }
+    /* eslint-disable */
+    var button = /*#__PURE__*/React.createElement("a", {
+      ref: menuButtonRef,
+      href: '#',
+      role: "button",
+      tabIndex: 0,
+      className: "p-megamenu-button",
+      onClick: toggle
+    }, /*#__PURE__*/React.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.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';
 
@@ -28278,6 +28523,7 @@ var MultiSelectPanel = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(fu
           var content = isEmptyFilter() ? createEmptyFilter() : options.children;
           return /*#__PURE__*/React.createElement("ul", {
             ref: options.contentRef,
+            style: options.style,
             className: className,
             role: "listbox",
             "aria-multiselectable": true
@@ -35727,6 +35973,8 @@ var TieredMenuBase = {
     className: null,
     autoZIndex: true,
     baseZIndex: 0,
+    breakpoint: undefined,
+    scrollHeight: '400px',
     appendTo: null,
     transitionOptions: null,
     onShow: null,
@@ -35750,13 +35998,20 @@ var TieredMenuSub = /*#__PURE__*/React.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;
@@ -35776,7 +36031,7 @@ var TieredMenuSub = /*#__PURE__*/React.memo(function (props) {
     }
   };
   var onItemMouseEnter = function onItemMouseEnter(event, item) {
-    if (item.disabled) {
+    if (item.disabled || props.isMobileMode) {
       event.preventDefault();
       return;
     }
@@ -35802,7 +36057,7 @@ var TieredMenuSub = /*#__PURE__*/React.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);
       }
@@ -35857,21 +36112,27 @@ var TieredMenuSub = /*#__PURE__*/React.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.createElement("li", {
@@ -35888,7 +36149,9 @@ var TieredMenuSub = /*#__PURE__*/React.memo(function (props) {
         onLeafClick: onLeafClick,
         popup: props.popup,
         onKeyDown: onChildItemKeyDown,
-        parentActive: item === activeItemState
+        parentActive: item === activeItemState,
+        isMobileMode: props.isMobileMode,
+        onItemToggle: props.onItemToggle
       });
     }
     return null;
@@ -35998,8 +36261,14 @@ var TieredMenu = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function
     _React$useState2 = _slicedToArray(_React$useState, 2),
     visibleState = _React$useState2[0],
     setVisibleState = _React$useState2[1];
+  var _React$useState3 = React.useState(null),
+    _React$useState4 = _slicedToArray(_React$useState3, 2),
+    attributeSelectorState = _React$useState4[0],
+    setAttributeSelectorState = _React$useState4[1];
   var menuRef = React.useRef(null);
   var targetRef = React.useRef(null);
+  var styleElementRef = React.useRef(null);
+  var isMobileMode = useMatchMedia("screen and (max-width: ".concat(props.breakpoint, ")"), !!props.breakpoint);
   var _useOverlayListener = useOverlayListener({
       target: targetRef,
       overlay: menuRef,
@@ -36037,11 +36306,31 @@ var TieredMenu = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function
       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();
@@ -36052,7 +36341,22 @@ var TieredMenu = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function
   };
   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);
   });
@@ -36100,7 +36404,9 @@ var TieredMenu = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function
       model: props.model,
       root: true,
       popup: props.popup,
-      onHide: hide
+      onHide: hide,
+      isMobileMode: isMobileMode,
+      onItemToggle: onItemToggle
     })));
   };
   var element = createElement();
@@ -38392,7 +38698,6 @@ var TreeTableBase = {
   defaultProps: {
     __TYPE: 'TreeTable',
     alwaysShowPaginator: true,
-    autoLayout: false,
     className: null,
     columnResizeMode: 'fit',
     contextMenuSelectionKey: null,
@@ -38907,14 +39212,14 @@ var TreeTableRow = /*#__PURE__*/React.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.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,
@@ -38927,7 +39232,7 @@ var TreeTableRow = /*#__PURE__*/React.memo(function (props) {
     if (expanded && props.node.children) {
       return props.node.children.map(function (childNode, index) {
         return /*#__PURE__*/React.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,
@@ -39132,7 +39437,7 @@ var TreeTableBody = /*#__PURE__*/React.memo(function (props) {
   };
   var createRow = function createRow(node, index) {
     return /*#__PURE__*/React.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,
@@ -40532,7 +40837,7 @@ var TreeTable = /*#__PURE__*/React.forwardRef(function (inProps, ref) {
     }
     scrollableView = createScrollableView(value, scrollableColumns, false, props.headerColumnGroup, props.footerColumnGroup);
     return /*#__PURE__*/React.createElement("div", {
-      className: "p-treetable-scrollable-wrapper"
+      className: "p-treetable-wrapper p-treetable-scrollable-wrapper"
     }, frozenView, scrollableView);
   };
   var createRegularTable = function createRegularTable(value) {
@@ -40540,12 +40845,17 @@ var TreeTable = /*#__PURE__*/React.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.createElement("div", {
       className: "p-treetable-wrapper"
     }, /*#__PURE__*/React.createElement("table", {
       ref: tableRef,
       style: props.tableStyle,
-      className: props.tableClassName
+      className: tableClassName
     }, header, footer, body));
   };
   var createTable = function createTable(value) {
@@ -40571,7 +40881,6 @@ var TreeTable = /*#__PURE__*/React.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);
@@ -40614,7 +40923,7 @@ var TreeTable = /*#__PURE__*/React.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';
@@ -40738,4 +41047,4 @@ var TriStateCheckbox = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(fu
 }));
 TriStateCheckbox.displayName = 'TriStateCheckbox';
 
-export { Accordion, AccordionTab, AutoComplete, Avatar, AvatarGroup, Badge, BlockUI, BreadCrumb, Button, CSSTransition, Calendar, Card, Carousel, CascadeSelect, PrimeReactChart as Chart, Checkbox, Chip, Chips, ColorPicker, Column, ColumnGroup, ConfirmDialog, ConfirmPopup, ConnectedOverlayScrollHandler, ContextMenu, DataScroller, DataTable, DataView, DataViewItem, DataViewLayoutOptions, DeferredContent, Dialog, Divider, Dock, DomHandler, Dropdown, Editor, EventBus, Fieldset, FileUpload, FilterMatchMode, FilterOperator, FilterService, Galleria, IconUtils, Image, Inplace, InplaceContent, InplaceDisplay, InputMask, InputNumber, InputSwitch, InputText, InputTextarea, KeyFilter, Knob, ListBox, MegaMenu, Mention, Menu, Menubar, Message, MessageSeverity, Messages, MultiSelect, MultiStateCheckbox, ObjectUtils, OrderList, OrganizationChart, OverlayPanel, OverlayService, Paginator, Panel, PanelMenu, Password, PickList, Portal, PrimeIcons, ProgressBar, ProgressSpinner, RadioButton, Rating, Ripple, Row, ScrollPanel, ScrollTop, SelectButton, Sidebar, Skeleton, SlideMenu, Slider, SortOrder, SpeedDial, SplitButton, Splitter, SplitterPanel, Steps, StyleClass, TabMenu, TabPanel, TabView, Tag, Terminal, TerminalService, TieredMenu, Timeline, Toast, ToggleButton, Toolbar, Tooltip, Tree, TreeSelect, TreeTable, TriStateCheckbox, UniqueComponentId, VirtualScroller, ZIndexUtils, addLocale, ariaLabel, classNames, confirmDialog, confirmPopup, PrimeReact as default, locale, localeOption, localeOptions, mask, updateLocaleOption, updateLocaleOptions, useClickOutside, useCounter, useDebounce, useEventListener, useFavicon, useIntersectionObserver, useInterval, useLocalStorage, useMountEffect, useMouse, useMove, useOverlayListener, useOverlayScrollListener, usePrevious, useResizeListener, useSessionStorage, useStorage, useTimeout, useUnmountEffect, useUpdateEffect };
+export { Accordion, AccordionTab, AutoComplete, Avatar, AvatarGroup, Badge, BlockUI, BreadCrumb, Button, CSSTransition, Calendar, Card, Carousel, CascadeSelect, PrimeReactChart as Chart, Checkbox, Chip, Chips, ColorPicker, Column, ColumnGroup, ConfirmDialog, ConfirmPopup, ConnectedOverlayScrollHandler, ContextMenu, DataScroller, DataTable, DataView, DataViewItem, DataViewLayoutOptions, DeferredContent, Dialog, Divider, Dock, DomHandler, Dropdown, Editor, EventBus, Fieldset, FileUpload, FilterMatchMode, FilterOperator, FilterService, Galleria, IconUtils, Image, Inplace, InplaceContent, InplaceDisplay, InputMask, InputNumber, InputSwitch, InputText, InputTextarea, KeyFilter, Knob, ListBox, MegaMenu, Mention, Menu, Menubar, Message, MessageSeverity, Messages, MultiSelect, MultiStateCheckbox, ObjectUtils, OrderList, OrganizationChart, OverlayPanel, OverlayService, Paginator, Panel, PanelMenu, Password, PickList, Portal, PrimeIcons, ProgressBar, ProgressSpinner, RadioButton, Rating, Ripple, Row, ScrollPanel, ScrollTop, SelectButton, Sidebar, Skeleton, SlideMenu, Slider, SortOrder, SpeedDial, SplitButton, Splitter, SplitterPanel, Steps, StyleClass, TabMenu, TabPanel, TabView, Tag, Terminal, TerminalService, TieredMenu, Timeline, Toast, ToggleButton, Toolbar, Tooltip, Tree, TreeSelect, TreeTable, TriStateCheckbox, UniqueComponentId, VirtualScroller, ZIndexUtils, addLocale, ariaLabel, classNames, confirmDialog, confirmPopup, PrimeReact as default, locale, localeOption, localeOptions, mask, updateLocaleOption, updateLocaleOptions, useClickOutside, useCounter, useDebounce, useEventListener, useFavicon, useIntersectionObserver, useInterval, useLocalStorage, useMatchMedia, useMountEffect, useMouse, useMove, useOverlayListener, useOverlayScrollListener, usePrevious, useResizeListener, useSessionStorage, useStorage, useTimeout, useUnmountEffect, useUpdateEffect };