primereact 9.1.0 → 9.2.0

package/core/core.js

@@ -230,7 +230,7 @@ this.primereact.utils = (function (exports, React) {
       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);
@@ -243,7 +243,7 @@ this.primereact.utils = (function (exports, React) {
       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);
@@ -427,7 +427,7 @@ this.primereact.utils = (function (exports, React) {
     }, {
       key: "absolutePosition",
       value: function absolutePosition(element, target) {
-        if (element) {
+        if (element && target) {
           var elementDimensions = element.offsetParent ? {
             width: element.offsetWidth,
             height: element.offsetHeight
@@ -459,7 +459,7 @@ this.primereact.utils = (function (exports, React) {
     }, {
       key: "relativePosition",
       value: function relativePosition(element, target) {
-        if (element) {
+        if (element && target) {
           var elementDimensions = element.offsetParent ? {
             width: element.offsetWidth,
             height: element.offsetHeight
@@ -1910,12 +1910,17 @@ this.primereact.utils = (function (exports, React) {
       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 */
       }
     }, {
@@ -3143,6 +3148,34 @@ this.primereact.hooks = (function (exports, React, utils) {
   };
   /* 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, []);
@@ -3509,11 +3542,14 @@ this.primereact.hooks = (function (exports, React, utils) {
   /* 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
     });
   };
 
@@ -3723,6 +3759,7 @@ this.primereact.hooks = (function (exports, React, utils) {
   exports.useIntersectionObserver = useIntersectionObserver;
   exports.useInterval = useInterval;
   exports.useLocalStorage = useLocalStorage;
+  exports.useMatchMedia = useMatchMedia;
   exports.useMountEffect = useMountEffect;
   exports.useMouse = useMouse;
   exports.useMove = useMove;
@@ -5062,14 +5099,18 @@ this.primereact.virtualscroller = (function (exports, React, hooks, utils) {
       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,
@@ -5099,6 +5140,7 @@ this.primereact.virtualscroller = (function (exports, React, hooks, utils) {
   function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(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 = hooks.usePrevious(inProps) || {};
     var vertical = props.orientation === 'vertical';
     var horizontal = props.orientation === 'horizontal';
     var both = props.orientation === 'both';
@@ -5116,25 +5158,29 @@ this.primereact.virtualscroller = (function (exports, React, hooks, utils) {
       _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);
@@ -5145,14 +5191,19 @@ this.primereact.virtualscroller = (function (exports, React, hooks, utils) {
     } : 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 = hooks.usePrevious(props.items);
-    var prevLoading = hooks.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 = hooks.useResizeListener({
         listener: function listener(event) {
           return onResize();
-        }
+        },
+        when: !props.disabled
       }),
       _useResizeListener2 = _slicedToArray(_useResizeListener, 1),
       bindWindowResizeListener = _useResizeListener2[0];
@@ -5161,13 +5212,23 @@ this.primereact.virtualscroller = (function (exports, React, hooks, utils) {
         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 || utils.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,
@@ -5179,13 +5240,14 @@ this.primereact.virtualscroller = (function (exports, React, hooks, utils) {
       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;
@@ -5196,20 +5258,25 @@ this.primereact.virtualscroller = (function (exports, React, hooks, utils) {
           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';
@@ -5326,7 +5393,8 @@ this.primereact.virtualscroller = (function (exports, React, hooks, utils) {
       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 ? {
@@ -5348,9 +5416,15 @@ this.primereact.virtualscroller = (function (exports, React, hooks, utils) {
         }));
       }
       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);
         });
       }
     };
@@ -5359,12 +5433,21 @@ this.primereact.virtualscroller = (function (exports, React, hooks, utils) {
         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 = [utils.DomHandler.getWidth(elementRef.current), utils.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 = '';
           }
         });
       }
@@ -5377,10 +5460,10 @@ this.primereact.virtualscroller = (function (exports, React, hooks, utils) {
     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,
@@ -5417,11 +5500,11 @@ this.primereact.virtualscroller = (function (exports, React, hooks, utils) {
     };
     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(_objectSpread({}, spacerStyle.current), _defineProperty({}, "".concat(_name), (_value || []).length * _size + _cpos + 'px'));
         };
         if (both) {
           setProp('height', items, props.itemSize[0], contentPos.y);
@@ -5432,7 +5515,7 @@ this.primereact.virtualscroller = (function (exports, React, hooks, utils) {
       }
     };
     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;
@@ -5441,7 +5524,9 @@ this.primereact.virtualscroller = (function (exports, React, hooks, utils) {
           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(_objectSpread({}, 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]));
@@ -5485,36 +5570,40 @@ this.primereact.virtualscroller = (function (exports, React, hooks, utils) {
       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,
@@ -5539,8 +5628,14 @@ this.primereact.virtualscroller = (function (exports, React, hooks, utils) {
         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;
         }
       }
     };
@@ -5550,17 +5645,21 @@ this.primereact.virtualscroller = (function (exports, React, hooks, utils) {
         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);
       }
@@ -5571,9 +5670,9 @@ this.primereact.virtualscroller = (function (exports, React, hooks, utils) {
       }
       resizeTimeout.current = setTimeout(function () {
         if (elementRef.current) {
-          var _ref = [utils.DomHandler.getWidth(elementRef.current), utils.DomHandler.getHeight(elementRef.current)],
-            width = _ref[0],
-            height = _ref[1];
+          var _ref2 = [utils.DomHandler.getWidth(elementRef.current), utils.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;
@@ -5581,6 +5680,8 @@ this.primereact.virtualscroller = (function (exports, React, hooks, utils) {
             setNumToleratedItemsState(props.numToleratedItems);
             defaultWidth.current = width;
             defaultHeight.current = height;
+            defaultContentWidth.current = utils.DomHandler.getWidth(_contentRef.current);
+            defaultContentHeight.current = utils.DomHandler.getHeight(_contentRef.current);
           }
         }
       }, props.resizeDelay);
@@ -5613,12 +5714,24 @@ this.primereact.virtualscroller = (function (exports, React, hooks, utils) {
     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 && utils.DomHandler.isVisible(elementRef.current)) {
+        setContentElement(_contentRef.current);
+        init();
+        bindWindowResizeListener();
+        bindOrientationChangeListener();
+        defaultWidth.current = utils.DomHandler.getWidth(elementRef.current);
+        defaultHeight.current = utils.DomHandler.getHeight(elementRef.current);
+        defaultContentWidth.current = utils.DomHandler.getWidth(_contentRef.current);
+        defaultContentHeight.current = utils.DomHandler.getHeight(_contentRef.current);
+      }
+    };
     var init = function init() {
       if (!props.disabled) {
         setSize();
@@ -5627,17 +5740,11 @@ this.primereact.virtualscroller = (function (exports, React, hooks, utils) {
       }
     };
     hooks.useMountEffect(function () {
-      if (!props.disabled) {
-        init();
-        bindWindowResizeListener();
-        bindOrientationChangeListener();
-        defaultWidth.current = utils.DomHandler.getWidth(elementRef.current);
-        defaultHeight.current = utils.DomHandler.getHeight(elementRef.current);
-      }
+      viewInit();
     });
     hooks.useUpdateEffect(function () {
       init();
-    }, [props.itemSize, props.scrollHeight]);
+    }, [props.itemSize, props.scrollHeight, props.scrollWidth]);
     hooks.useUpdateEffect(function () {
       if (props.numToleratedItems !== numToleratedItemsState) {
         setNumToleratedItemsState(props.numToleratedItems);
@@ -5649,11 +5756,11 @@ this.primereact.virtualscroller = (function (exports, React, hooks, utils) {
       }
     }, [numToleratedItemsState]);
     hooks.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;
       }
@@ -5715,6 +5822,7 @@ this.primereact.virtualscroller = (function (exports, React, hooks, utils) {
       if (props.showSpacer) {
         return /*#__PURE__*/React__namespace.createElement("div", {
           ref: _spacerRef,
+          style: spacerStyle.current,
           className: "p-virtualscroller-spacer"
         });
       }
@@ -5738,11 +5846,14 @@ this.primereact.virtualscroller = (function (exports, React, hooks, utils) {
       });
       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 = utils.ObjectUtils.getRefElement(el);
           },
@@ -5785,10 +5896,9 @@ this.primereact.virtualscroller = (function (exports, React, hooks, utils) {
     } else {
       var otherProps = VirtualScrollerBase.getOtherProps(props);
       var className = utils.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();
@@ -5796,7 +5906,7 @@ this.primereact.virtualscroller = (function (exports, React, hooks, utils) {
       return /*#__PURE__*/React__namespace.createElement("div", _extends({
         ref: elementRef,
         className: className,
-        tabIndex: 0,
+        tabIndex: props.tabIndex,
         style: props.style
       }, otherProps, {
         onScroll: onScroll
@@ -8407,6 +8517,7 @@ this.primereact.dropdown = (function (exports, React, PrimeReact, hooks, overlay
             var content = isEmptyFilter ? createEmptyMessage() : options.children;
             return /*#__PURE__*/React__namespace.createElement("ul", {
               ref: options.contentRef,
+              style: options.style,
               className: className,
               role: "listbox"
             }, content);