primereact 9.1.0 → 9.2.0

package/primereact.all.js

@@ -288,7 +288,7 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
       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);
@@ -301,7 +301,7 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
       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);
@@ -485,7 +485,7 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
     }, {
       key: "absolutePosition",
       value: function absolutePosition(element, target) {
-        if (element) {
+        if (element && target) {
           var elementDimensions = element.offsetParent ? {
             width: element.offsetWidth,
             height: element.offsetHeight
@@ -517,7 +517,7 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
     }, {
       key: "relativePosition",
       value: function relativePosition(element, target) {
-        if (element) {
+        if (element && target) {
           var elementDimensions = element.offsetParent ? {
             width: element.offsetWidth,
             height: element.offsetHeight
@@ -1952,12 +1952,17 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
       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 */
       }
     }, {
@@ -2960,6 +2965,34 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
   };
   /* eslint-enable */
 
+  var useMatchMedia = function useMatchMedia(query) {
+    var when = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : true;
+    var _React$useState = React__namespace.useState(false),
+      _React$useState2 = _slicedToArray(_React$useState, 2),
+      matches = _React$useState2[0],
+      setMatches = _React$useState2[1];
+    var matchMedia = React__namespace.useRef(null);
+    var handleChange = function handleChange(e) {
+      return setMatches(e.matches);
+    };
+    var bind = function bind() {
+      return matchMedia.current && matchMedia.current.addEventListener('change', handleChange);
+    };
+    var unbind = function unbind() {
+      return matchMedia.current && matchMedia.current.removeEventListener('change', handleChange) && (matchMedia.current = null);
+    };
+    React__namespace.useEffect(function () {
+      if (when) {
+        matchMedia.current = window.matchMedia(query);
+        setMatches(matchMedia.current.matches);
+        bind();
+      }
+      return unbind;
+    }, [query, when]);
+    return matches;
+  };
+  /* eslint-enable */
+
   /* eslint-disable */
   var useMountEffect = function useMountEffect(fn) {
     return React__namespace.useEffect(fn, []);
@@ -3285,11 +3318,14 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
   /* 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
     });
   };
 
@@ -4738,14 +4774,18 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
       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,
@@ -4775,6 +4815,7 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
   function _objectSpread$v(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$v(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$v(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
   var VirtualScroller = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__namespace.forwardRef(function (inProps, ref) {
     var props = VirtualScrollerBase.getProps(inProps);
+    var prevProps = usePrevious(inProps) || {};
     var vertical = props.orientation === 'vertical';
     var horizontal = props.orientation === 'horizontal';
     var both = props.orientation === 'both';
@@ -4792,25 +4833,29 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
       _React$useState4 = _slicedToArray(_React$useState3, 2),
       lastState = _React$useState4[0],
       setLastState = _React$useState4[1];
-    var _React$useState5 = React__namespace.useState(both ? {
+    var _React$useState5 = React__namespace.useState(0),
+      _React$useState6 = _slicedToArray(_React$useState5, 2),
+      pageState = _React$useState6[0],
+      setPageState = _React$useState6[1];
+    var _React$useState7 = React__namespace.useState(both ? {
         rows: 0,
         cols: 0
       } : 0),
-      _React$useState6 = _slicedToArray(_React$useState5, 2),
-      numItemsInViewportState = _React$useState6[0],
-      setNumItemsInViewportState = _React$useState6[1];
-    var _React$useState7 = React__namespace.useState(props.numToleratedItems),
       _React$useState8 = _slicedToArray(_React$useState7, 2),
-      numToleratedItemsState = _React$useState8[0],
-      setNumToleratedItemsState = _React$useState8[1];
-    var _React$useState9 = React__namespace.useState(props.loading || false),
+      numItemsInViewportState = _React$useState8[0],
+      setNumItemsInViewportState = _React$useState8[1];
+    var _React$useState9 = React__namespace.useState(props.numToleratedItems),
       _React$useState10 = _slicedToArray(_React$useState9, 2),
-      loadingState = _React$useState10[0],
-      setLoadingState = _React$useState10[1];
-    var _React$useState11 = React__namespace.useState([]),
+      numToleratedItemsState = _React$useState10[0],
+      setNumToleratedItemsState = _React$useState10[1];
+    var _React$useState11 = React__namespace.useState(props.loading || false),
       _React$useState12 = _slicedToArray(_React$useState11, 2),
-      loaderArrState = _React$useState12[0],
-      setLoaderArrState = _React$useState12[1];
+      loadingState = _React$useState12[0],
+      setLoadingState = _React$useState12[1];
+    var _React$useState13 = React__namespace.useState([]),
+      _React$useState14 = _slicedToArray(_React$useState13, 2),
+      loaderArrState = _React$useState14[0],
+      setLoaderArrState = _React$useState14[1];
     var elementRef = React__namespace.useRef(null);
     var _contentRef = React__namespace.useRef(null);
     var _spacerRef = React__namespace.useRef(null);
@@ -4821,14 +4866,19 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
     } : 0);
     var scrollTimeout = React__namespace.useRef(null);
     var resizeTimeout = React__namespace.useRef(null);
+    var contentStyle = React__namespace.useRef({});
+    var spacerStyle = React__namespace.useRef({});
     var defaultWidth = React__namespace.useRef(null);
     var defaultHeight = React__namespace.useRef(null);
-    var prevItems = usePrevious(props.items);
-    var prevLoading = usePrevious(props.loading);
+    var defaultContentWidth = React__namespace.useRef(null);
+    var defaultContentHeight = React__namespace.useRef(null);
+    var isItemRangeChanged = React__namespace.useRef(false);
+    var lazyLoadState = React__namespace.useRef(null);
     var _useResizeListener = useResizeListener({
         listener: function listener(event) {
           return onResize();
-        }
+        },
+        when: !props.disabled
       }),
       _useResizeListener2 = _slicedToArray(_useResizeListener, 1),
       bindWindowResizeListener = _useResizeListener2[0];
@@ -4837,13 +4887,23 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
         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,
@@ -4855,13 +4915,14 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
       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;
@@ -4872,20 +4933,25 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
           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';
@@ -5002,7 +5068,8 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
       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 ? {
@@ -5024,9 +5091,15 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
         }));
       }
       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);
         });
       }
     };
@@ -5035,12 +5108,21 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
         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 = '';
           }
         });
       }
@@ -5053,10 +5135,10 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
     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,
@@ -5093,11 +5175,11 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
     };
     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);
@@ -5108,7 +5190,7 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
       }
     };
     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;
@@ -5117,7 +5199,9 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
           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]));
@@ -5161,36 +5245,40 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
       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,
@@ -5215,8 +5303,14 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
         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;
         }
       }
     };
@@ -5226,17 +5320,21 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
         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);
       }
@@ -5247,9 +5345,9 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
       }
       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;
@@ -5257,6 +5355,8 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
             setNumToleratedItemsState(props.numToleratedItems);
             defaultWidth.current = width;
             defaultHeight.current = height;
+            defaultContentWidth.current = DomHandler.getWidth(_contentRef.current);
+            defaultContentHeight.current = DomHandler.getHeight(_contentRef.current);
           }
         }
       }, props.resizeDelay);
@@ -5289,12 +5389,24 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
     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();
@@ -5303,17 +5415,11 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
       }
     };
     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);
@@ -5325,11 +5431,11 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
       }
     }, [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;
       }
@@ -5391,6 +5497,7 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
       if (props.showSpacer) {
         return /*#__PURE__*/React__namespace.createElement("div", {
           ref: _spacerRef,
+          style: spacerStyle.current,
           className: "p-virtualscroller-spacer"
         });
       }
@@ -5414,11 +5521,14 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
       });
       var content = /*#__PURE__*/React__namespace.createElement("div", {
         ref: _contentRef,
+        style: contentStyle.current,
         className: className
       }, items);
       if (props.contentTemplate) {
         var defaultOptions = {
+          style: contentStyle.current,
           className: className,
+          spacerStyle: spacerStyle.current,
           contentRef: function contentRef(el) {
             return _contentRef.current = ObjectUtils.getRefElement(el);
           },
@@ -5461,10 +5571,9 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
     } 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();
@@ -5472,7 +5581,7 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
       return /*#__PURE__*/React__namespace.createElement("div", _extends({
         ref: elementRef,
         className: className,
-        tabIndex: 0,
+        tabIndex: props.tabIndex,
         style: props.style
       }, otherProps, {
         onScroll: onScroll
@@ -5568,6 +5677,7 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
             var className = classNames('p-autocomplete-items', options.className);
             return /*#__PURE__*/React__namespace.createElement("ul", {
               ref: options.contentRef,
+              style: options.style,
               className: className,
               role: "listbox",
               id: props.listId
@@ -6239,7 +6349,7 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
       imageFailed = _React$useState2[0],
       setImageFailed = _React$useState2[1];
     var createContent = function createContent() {
-      if (props.image && !imageFailed) {
+      if (ObjectUtils.isNotEmpty(props.image) && !imageFailed) {
         return /*#__PURE__*/React__namespace.createElement("img", {
           src: props.image,
           alt: props.imageAlt,
@@ -6281,7 +6391,7 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
     });
     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',
@@ -8854,7 +8964,7 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
         setValue(props.value);
       }
       return function () {
-        props.mask && unbindMaskEvents();
+        props.mask && unbindMaskEvents && unbindMaskEvents();
       };
     });
     useUpdateEffect(function () {
@@ -9078,7 +9188,7 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
         }
         return _content2;
       }
-      var displayYear = props.inline ? metaYear : currentYear;
+      var displayYear = props.numberOfMonths > 1 ? metaYear : currentYear;
       return currentView !== 'year' && /*#__PURE__*/React__namespace.createElement("button", {
         className: "p-datepicker-year p-link",
         onClick: switchToYearView,
@@ -13162,6 +13272,8 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
       global: false,
       autoZIndex: true,
       baseZIndex: 0,
+      breakpoint: undefined,
+      scrollHeight: '400px',
       appendTo: null,
       transitionOptions: null,
       onShow: null,
@@ -13187,7 +13299,7 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
       setActiveItemState(null);
     }
     var onItemMouseEnter = function onItemMouseEnter(event, item) {
-      if (item.disabled) {
+      if (item.disabled || props.isMobileMode) {
         event.preventDefault();
         return;
       }
@@ -13207,26 +13319,31 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
           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() {
@@ -13248,7 +13365,8 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
           menuProps: props.menuProps,
           model: item.items,
           resetMenu: item !== activeItemState,
-          onLeafClick: props.onLeafClick
+          onLeafClick: props.onLeafClick,
+          isMobileMode: props.isMobileMode
         });
       }
       return null;
@@ -13357,8 +13475,14 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
       _React$useState6 = _slicedToArray(_React$useState5, 2),
       resetMenuState = _React$useState6[0],
       setResetMenuState = _React$useState6[1];
+    var _React$useState7 = React__namespace.useState(null),
+      _React$useState8 = _slicedToArray(_React$useState7, 2),
+      attributeSelectorState = _React$useState8[0],
+      setAttributeSelectorState = _React$useState8[1];
     var menuRef = React__namespace.useRef(null);
     var currentEvent = React__namespace.useRef(null);
+    var styleElementRef = React__namespace.useRef(null);
+    var isMobileMode = useMatchMedia("screen and (max-width: ".concat(props.breakpoint, ")"), !!props.breakpoint);
     var _useEventListener = useEventListener({
         type: 'click',
         listener: function listener(event) {
@@ -13389,6 +13513,17 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
       _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);
     };
@@ -13417,6 +13552,10 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
         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();
@@ -13427,6 +13566,7 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
     };
     var onExited = function onExited() {
       ZIndexUtils.clear(menuRef.current);
+      destroyStyle();
     };
     var position = function position(event) {
       if (event) {
@@ -13479,7 +13619,19 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
       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);
@@ -13535,7 +13687,8 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
         model: props.model,
         root: true,
         resetMenu: resetMenuState,
-        onLeafClick: onLeafClick
+        onLeafClick: onLeafClick,
+        isMobileMode: isMobileMode
       })));
     };
     var element = createContextMenu();
@@ -15496,6 +15649,7 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
             var content = isEmptyFilter ? createEmptyMessage() : options.children;
             return /*#__PURE__*/React__namespace.createElement("ul", {
               ref: options.contentRef,
+              style: options.style,
               className: className,
               role: "listbox"
             }, content);
@@ -16536,7 +16690,6 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
     defaultProps: {
       __TYPE: 'DataTable',
       alwaysShowPaginator: true,
-      autoLayout: false,
       breakpoint: '960px',
       cellClassName: null,
       cellSelection: false,
@@ -16628,7 +16781,7 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
       reorderableColumns: false,
       reorderableRows: false,
       resizableColumns: false,
-      responsiveLayout: 'stack',
+      responsiveLayout: 'scroll',
       rowClassName: null,
       rowEditValidator: null,
       rowExpansionTemplate: null,
@@ -16638,7 +16791,6 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
       rowHover: false,
       rows: null,
       rowsPerPageOptions: null,
-      scrollDirection: 'vertical',
       scrollHeight: null,
       scrollable: false,
       selectAll: false,
@@ -17492,7 +17644,7 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
       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) {
@@ -17549,35 +17701,35 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
       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) {
@@ -17631,49 +17783,49 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
       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) {
@@ -17717,7 +17869,7 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
         props.onRowEditInit({
           originalEvent: event,
           data: props.rowData,
-          index: props.index
+          index: props.rowIndex
         });
       }
       onEditChange(e, true);
@@ -17733,7 +17885,7 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
         props.onRowEditSave({
           originalEvent: event,
           data: props.rowData,
-          index: props.index,
+          index: props.rowIndex,
           valid: valid
         });
       }
@@ -17751,7 +17903,7 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
         props.onRowEditCancel({
           originalEvent: event,
           data: props.rowData,
-          index: props.index
+          index: props.rowIndex
         });
       }
       onEditChange(e, false);
@@ -17769,7 +17921,7 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
             tableSelector: props.tableSelector,
             column: col,
             rowData: props.rowData,
-            rowIndex: props.index,
+            rowIndex: props.rowIndex,
             index: i,
             rowSpan: rowSpan,
             dataKey: props.dataKey,
@@ -17816,9 +17968,9 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
       '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
@@ -17893,7 +18045,6 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
     var rowDragging = React__namespace.useRef(false);
     var draggedRowIndex = React__namespace.useRef(null);
     var droppedRowIndex = React__namespace.useRef(null);
-    var prevVirtualScrollerOptions = usePrevious(props.virtualScrollerOptions);
     var isSubheaderGrouping = props.rowGroupMode && props.rowGroupMode === 'subheader';
     var isRadioSelectionMode = props.selectionMode === 'radiobutton';
     var isCheckboxSelectionMode = props.selectionMode === 'checkbox';
@@ -18043,10 +18194,6 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
         });
       }
     };
-    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,
@@ -18600,16 +18747,6 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
         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;
@@ -18637,9 +18774,8 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
       }
       return null;
     };
-    var createGroupHeader = function createGroupHeader(rowData, index, expanded, colSpan) {
-      if (isSubheaderGrouping && shouldRenderRowGroupHeader(props.value, rowData, index - props.first)) {
-        var _options;
+    var createGroupHeader = function createGroupHeader(rowData, rowIndex, expanded, colSpan) {
+      if (isSubheaderGrouping && shouldRenderRowGroupHeader(props.value, rowData, rowIndex - props.first)) {
         var style = rowGroupHeaderStyle();
         var toggler = props.expandableRowGroups && /*#__PURE__*/React__namespace.createElement(RowTogglerButton, {
           onClick: onRowToggle,
@@ -18648,9 +18784,11 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
           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
@@ -18669,7 +18807,7 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
       }
       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);
@@ -18682,6 +18820,7 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
           value: props.value,
           columns: props.columns,
           rowData: rowData,
+          rowIndex: rowIndex,
           index: index,
           selected: selected,
           contextMenuSelected: contextMenuSelected,
@@ -18740,11 +18879,11 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
         });
       }
     };
-    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);
@@ -18764,10 +18903,10 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
       }
       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
         });
@@ -18779,25 +18918,25 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
       return null;
     };
     var createContent = function createContent() {
-      return props.value.map(function (rowData, i) {
-        var index = getVirtualScrollerOption('getItemOptions') ? getVirtualScrollerOption('getItemOptions')(i).index : props.first + i;
-        var key = getRowKey(rowData, index);
+      return props.value && props.value.map(function (rowData, index) {
+        var rowIndex = getVirtualScrollerOption('getItemOptions') ? getVirtualScrollerOption('getItemOptions')(index).index : props.first + index;
+        var key = getRowKey(rowData, rowIndex);
         var expanded = isRowExpanded(rowData);
         var colSpan = getColumnsLength();
-        var groupHeader = createGroupHeader(rowData, index, expanded, colSpan);
-        var row = createRow(rowData, index, expanded);
-        var expansion = createExpansion(rowData, index, expanded, colSpan);
-        var groupFooter = createGroupFooter(rowData, index, expanded, colSpan);
+        var groupHeader = createGroupHeader(rowData, rowIndex, expanded, colSpan);
+        var row = createRow(rowData, rowIndex, index, expanded);
+        var expansion = createExpansion(rowData, rowIndex, expanded, colSpan);
+        var groupFooter = createGroupFooter(rowData, rowIndex, expanded, colSpan);
         return /*#__PURE__*/React__namespace.createElement(React__namespace.Fragment, {
           key: key
         }, groupHeader, row, expansion, groupFooter);
       });
     };
-    var className = classNames('p-datatable-tbody', props.className);
     var content = props.empty ? createEmptyContent() : createContent();
     return /*#__PURE__*/React__namespace.createElement("tbody", {
       ref: refCallback,
-      className: className
+      style: props.style,
+      className: props.className
     }, content);
   }));
   TableBody.displayName = 'TableBody';
@@ -20488,9 +20627,10 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
         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;
         }
@@ -20658,10 +20798,11 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
       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;
     };
@@ -20824,7 +20965,9 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
     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;
       }
     };
@@ -21301,7 +21444,7 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
       return data;
     };
     useMountEffect(function () {
-      setAttributeSelectorState(UniqueComponentId());
+      !attributeSelectorState && setAttributeSelectorState(UniqueComponentId());
       setFiltersState(cloneFilters(props.filters));
       setD_filtersState(cloneFilters(props.filters));
       if (isStateful()) {
@@ -21312,11 +21455,16 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
       }
     });
     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);
@@ -21447,12 +21595,14 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
       var rows = options.rows,
         columns = options.columns,
         contentRef = options.contentRef,
-        className = options.className;
-        options.itemSize;
+        style = options.style,
+        className = options.className,
+        spacerStyle = options.spacerStyle,
+        itemSize = options.itemSize;
       var frozenBody = ObjectUtils.isNotEmpty(props.frozenValue) && /*#__PURE__*/React__namespace.createElement(TableBody, {
         ref: frozenBodyRef,
         value: props.frozenValue,
-        className: "p-datatable-frozen-tbody",
+        className: "p-datatable-tbody p-datatable-frozen-tbody",
         frozenRow: true,
         tableProps: props,
         tableSelector: attributeSelectorState,
@@ -21523,7 +21673,8 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
       var body = /*#__PURE__*/React__namespace.createElement(TableBody, {
         ref: bodyRef,
         value: dataToRender(rows),
-        className: className,
+        style: style,
+        className: classNames('p-datatable-tbody', className),
         empty: empty,
         frozenRow: false,
         tableProps: props,
@@ -21593,7 +21744,13 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
         virtualScrollerOptions: options,
         isVirtualScrollerDisabled: isVirtualScrollerDisabled
       });
-      return /*#__PURE__*/React__namespace.createElement(React__namespace.Fragment, null, frozenBody, body);
+      var spacerBody = ObjectUtils.isNotEmpty(spacerStyle) ? /*#__PURE__*/React__namespace.createElement(TableBody, {
+        style: {
+          height: "calc(".concat(spacerStyle.height, " - ").concat(rows.length * itemSize, "px)")
+        },
+        className: "p-datatable-virtualscroller-spacer"
+      }) : null;
+      return /*#__PURE__*/React__namespace.createElement(React__namespace.Fragment, null, frozenBody, body, spacerBody);
     };
     var createTableFooter = function createTableFooter(options) {
       var columns = options.columns;
@@ -21624,13 +21781,19 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
         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);
@@ -21725,13 +21888,9 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
       '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',
@@ -26335,14 +26494,15 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
           itemTemplate: function itemTemplate(item, options) {
             return item && createItem(item, options.index, options);
           },
-          contentTemplate: function contentTemplate(option) {
-            var className = classNames('p-listbox-list', option.className);
+          contentTemplate: function contentTemplate(options) {
+            var className = classNames('p-listbox-list', options.className);
             return /*#__PURE__*/React__namespace.createElement("ul", _extends({
-              ref: option.contentRef,
+              ref: options.contentRef,
+              style: options.style,
               className: className,
               role: "listbox",
               "aria-multiselectable": props.multiple
-            }, ariaProps), option.children);
+            }, ariaProps), options.children);
           }
         });
         return /*#__PURE__*/React__namespace.createElement(VirtualScroller, _extends({
@@ -26390,6 +26550,8 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
       style: null,
       className: null,
       orientation: 'horizontal',
+      breakpoint: undefined,
+      scrollHeight: '400px',
       start: null,
       end: null,
       children: undefined
@@ -26408,17 +26570,41 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
       _React$useState2 = _slicedToArray(_React$useState, 2),
       activeItemState = _React$useState2[0],
       setActiveItemState = _React$useState2[1];
+    var _React$useState3 = React__namespace.useState(null),
+      _React$useState4 = _slicedToArray(_React$useState3, 2),
+      attributeSelectorState = _React$useState4[0],
+      setAttributeSelectorState = _React$useState4[1];
+    var _React$useState5 = React__namespace.useState(false),
+      _React$useState6 = _slicedToArray(_React$useState5, 2),
+      mobileActiveState = _React$useState6[0],
+      setMobileActiveState = _React$useState6[1];
     var elementRef = React__namespace.useRef(null);
+    var styleElementRef = React__namespace.useRef(null);
+    var menuButtonRef = React__namespace.useRef(null);
     var horizontal = props.orientation === 'horizontal';
     var vertical = props.orientation === 'vertical';
+    var isMobileMode = useMatchMedia("screen and (max-width: ".concat(props.breakpoint, ")"), !!props.breakpoint);
     var _useEventListener = useEventListener({
         type: 'click',
         listener: function listener(event) {
-          isOutsideClicked(event) && setActiveItemState(null);
+          if ((!isMobileMode || mobileActiveState) && isOutsideClicked(event)) {
+            setActiveItemState(null);
+            setMobileActiveState(false);
+          }
         }
       }),
       _useEventListener2 = _slicedToArray(_useEventListener, 1),
       bindDocumentClickListener = _useEventListener2[0];
+    var _useResizeListener = useResizeListener({
+        listener: function listener() {
+          if (!isMobileMode || mobileActiveState) {
+            setActiveItemState(null);
+            setMobileActiveState(false);
+          }
+        }
+      }),
+      _useResizeListener2 = _slicedToArray(_useResizeListener, 1),
+      bindDocumentResizeListener = _useResizeListener2[0];
     var onLeafClick = function onLeafClick(event, item) {
       if (item.disabled) {
         event.preventDefault();
@@ -26434,9 +26620,10 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
         });
       }
       setActiveItemState(null);
+      setMobileActiveState(false);
     };
     var onCategoryMouseEnter = function onCategoryMouseEnter(event, item) {
-      if (item.disabled) {
+      if (item.disabled || isMobileMode) {
         event.preventDefault();
         return;
       }
@@ -26499,6 +26686,13 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
     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;
@@ -26516,7 +26710,7 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
       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;
@@ -26549,13 +26743,23 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
       };
     });
     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);
       };
@@ -26681,6 +26885,26 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
       }
       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
@@ -26751,20 +26975,41 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
       }
       return null;
     };
+    var createMenuButton = function createMenuButton() {
+      if (props.orientation === 'vertical' || props.model && props.model.length < 1) {
+        return null;
+      }
+      /* eslint-disable */
+      var button = /*#__PURE__*/React__namespace.createElement("a", {
+        ref: menuButtonRef,
+        href: '#',
+        role: "button",
+        tabIndex: 0,
+        className: "p-megamenu-button",
+        onClick: toggle
+      }, /*#__PURE__*/React__namespace.createElement("i", {
+        className: "pi pi-bars"
+      }));
+      /* eslint-enable */
+
+      return button;
+    };
     var otherProps = MegaMenuBase.getOtherProps(props);
     var className = classNames('p-megamenu p-component', {
       'p-megamenu-horizontal': props.orientation === 'horizontal',
-      'p-megamenu-vertical': props.orientation === 'vertical'
+      'p-megamenu-vertical': props.orientation === 'vertical',
+      'p-megamenu-mobile-active': mobileActiveState
     }, props.className);
     var menu = createMenu();
     var start = createStartContent();
     var end = createEndContent();
+    var menuButton = createMenuButton();
     return /*#__PURE__*/React__namespace.createElement("div", _extends({
       ref: elementRef,
       id: props.id,
       className: className,
       style: props.style
-    }, otherProps), start, menu, end);
+    }, otherProps), start, menuButton, menu, end);
   }));
   MegaMenu.displayName = 'MegaMenu';
 
@@ -28300,6 +28545,7 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
             var content = isEmptyFilter() ? createEmptyFilter() : options.children;
             return /*#__PURE__*/React__namespace.createElement("ul", {
               ref: options.contentRef,
+              style: options.style,
               className: className,
               role: "listbox",
               "aria-multiselectable": true
@@ -35749,6 +35995,8 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
       className: null,
       autoZIndex: true,
       baseZIndex: 0,
+      breakpoint: undefined,
+      scrollHeight: '400px',
       appendTo: null,
       transitionOptions: null,
       onShow: null,
@@ -35772,13 +36020,20 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
     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;
@@ -35798,7 +36053,7 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
       }
     };
     var onItemMouseEnter = function onItemMouseEnter(event, item) {
-      if (item.disabled) {
+      if (item.disabled || props.isMobileMode) {
         event.preventDefault();
         return;
       }
@@ -35824,7 +36079,7 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
           item: item
         });
       }
-      if (props.root) {
+      if (props.root || props.isMobileMode) {
         if (item.items) {
           if (activeItemState && item === activeItemState) setActiveItemState(null);else setActiveItemState(item);
         }
@@ -35879,21 +36134,27 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
       return prevItem ? DomHandler.hasClass(prevItem, 'p-disabled') || !DomHandler.hasClass(prevItem, 'p-menuitem') ? findPrevItem(prevItem) : prevItem : null;
     };
     var onLeafClick = function onLeafClick(event) {
-      setActiveItemState(null);
-      props.onLeafClick && props.onLeafClick(event);
-      props.onHide && props.onHide(event);
+      if (!props.isMobileMode || props.popup) {
+        setActiveItemState(null);
+        props.onLeafClick && props.onLeafClick(event);
+        props.onHide && props.onHide(event);
+      }
     };
     useMountEffect(function () {
       bindDocumentClickListener();
+      bindDocumentResizeListener();
     });
     useUpdateEffect(function () {
       if (!props.parentActive) {
         setActiveItemState(null);
       }
-      if (!props.root && props.parentActive) {
+      if (!props.root && props.parentActive && !props.isMobileMode) {
         position();
       }
     }, [props.parentActive]);
+    useUpdateEffect(function () {
+      props.onItemToggle && props.onItemToggle();
+    }, [activeItemState]);
     var createSeparator = function createSeparator(index) {
       var key = 'separator_' + index;
       return /*#__PURE__*/React__namespace.createElement("li", {
@@ -35910,7 +36171,9 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
           onLeafClick: onLeafClick,
           popup: props.popup,
           onKeyDown: onChildItemKeyDown,
-          parentActive: item === activeItemState
+          parentActive: item === activeItemState,
+          isMobileMode: props.isMobileMode,
+          onItemToggle: props.onItemToggle
         });
       }
       return null;
@@ -36020,8 +36283,14 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
       _React$useState2 = _slicedToArray(_React$useState, 2),
       visibleState = _React$useState2[0],
       setVisibleState = _React$useState2[1];
+    var _React$useState3 = React__namespace.useState(null),
+      _React$useState4 = _slicedToArray(_React$useState3, 2),
+      attributeSelectorState = _React$useState4[0],
+      setAttributeSelectorState = _React$useState4[1];
     var menuRef = React__namespace.useRef(null);
     var targetRef = React__namespace.useRef(null);
+    var styleElementRef = React__namespace.useRef(null);
+    var isMobileMode = useMatchMedia("screen and (max-width: ".concat(props.breakpoint, ")"), !!props.breakpoint);
     var _useOverlayListener = useOverlayListener({
         target: targetRef,
         overlay: menuRef,
@@ -36059,11 +36328,31 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
         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();
@@ -36074,7 +36363,22 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
     };
     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);
     });
@@ -36122,7 +36426,9 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
         model: props.model,
         root: true,
         popup: props.popup,
-        onHide: hide
+        onHide: hide,
+        isMobileMode: isMobileMode,
+        onItemToggle: onItemToggle
       })));
     };
     var element = createElement();
@@ -38414,7 +38720,6 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
     defaultProps: {
       __TYPE: 'TreeTable',
       alwaysShowPaginator: true,
-      autoLayout: false,
       className: null,
       columnResizeMode: 'fit',
       contextMenuSelectionKey: null,
@@ -38929,14 +39234,14 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
         return null;
       }
     };
-    var createCell = function createCell(column) {
+    var createCell = function createCell(column, index) {
       var toggler, checkbox;
       if (getColumnProp(column, 'expander')) {
         toggler = createToggler();
         checkbox = createCheckbox();
       }
       return /*#__PURE__*/React__namespace.createElement(TreeTableBodyCell, _extends({
-        key: getColumnProp(column, 'columnKey') || getColumnProp(column, 'field')
+        key: "".concat(getColumnProp(column, 'columnKey') || getColumnProp(column, 'field'), "_").concat(index)
       }, ColumnBase.getCProps(column), {
         column: column,
         selectOnEdit: props.selectOnEdit,
@@ -38949,7 +39254,7 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
       if (expanded && props.node.children) {
         return props.node.children.map(function (childNode, index) {
           return /*#__PURE__*/React__namespace.createElement(TreeTableRow, {
-            key: childNode.key || JSON.stringify(childNode.data),
+            key: "".concat(childNode.key || JSON.stringify(childNode.data), "_").concat(index),
             level: props.level + 1,
             rowIndex: props.rowIndex + '_' + index,
             node: childNode,
@@ -39154,7 +39459,7 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
     };
     var createRow = function createRow(node, index) {
       return /*#__PURE__*/React__namespace.createElement(TreeTableRow, {
-        key: node.key || JSON.stringify(node.data),
+        key: "".concat(node.key || JSON.stringify(node.data), "_").concat(index),
         level: 0,
         rowIndex: index,
         selectOnEdit: props.selectOnEdit,
@@ -40554,7 +40859,7 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
       }
       scrollableView = createScrollableView(value, scrollableColumns, false, props.headerColumnGroup, props.footerColumnGroup);
       return /*#__PURE__*/React__namespace.createElement("div", {
-        className: "p-treetable-scrollable-wrapper"
+        className: "p-treetable-wrapper p-treetable-scrollable-wrapper"
       }, frozenView, scrollableView);
     };
     var createRegularTable = function createRegularTable(value) {
@@ -40562,12 +40867,17 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
       var header = createTableHeader(columns, props.headerColumnGroup);
       var footer = createTableFooter(columns, props.footerColumnGroup);
       var body = createTableBody(value, columns);
+      var tableClassName = classNames('p-treetable-table', {
+        'p-treetable-scrollable-table': props.scrollable,
+        'p-treetable-resizable-table': props.resizableColumns,
+        'p-treetable-resizable-table-fit': props.resizableColumns && props.columnResizeMode === 'fit'
+      }, props.tableClassName);
       return /*#__PURE__*/React__namespace.createElement("div", {
         className: "p-treetable-wrapper"
       }, /*#__PURE__*/React__namespace.createElement("table", {
         ref: tableRef,
         style: props.tableStyle,
-        className: props.tableClassName
+        className: tableClassName
       }, header, footer, body));
     };
     var createTable = function createTable(value) {
@@ -40593,7 +40903,6 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
       '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);
@@ -40636,7 +40945,7 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
       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';
@@ -40897,6 +41206,7 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
   exports.useIntersectionObserver = useIntersectionObserver;
   exports.useInterval = useInterval;
   exports.useLocalStorage = useLocalStorage;
+  exports.useMatchMedia = useMatchMedia;
   exports.useMountEffect = useMountEffect;
   exports.useMouse = useMouse;
   exports.useMove = useMove;