primereact 9.1.1 → 9.2.0

package/virtualscroller/virtualscroller.esm.js

@@ -119,14 +119,18 @@ var VirtualScrollerBase = {
     id: null,
     style: null,
     className: null,
+    tabIndex: 0,
     items: null,
     itemSize: 0,
     scrollHeight: null,
     scrollWidth: null,
     orientation: 'vertical',
+    step: 0,
     numToleratedItems: null,
     delay: 0,
     resizeDelay: 10,
+    appendOnly: false,
+    inline: false,
     lazy: false,
     disabled: false,
     loaderDisabled: false,
@@ -156,6 +160,7 @@ function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (O
 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.memo( /*#__PURE__*/React.forwardRef(function (inProps, ref) {
   var props = VirtualScrollerBase.getProps(inProps);
+  var prevProps = usePrevious(inProps) || {};
   var vertical = props.orientation === 'vertical';
   var horizontal = props.orientation === 'horizontal';
   var both = props.orientation === 'both';
@@ -173,25 +178,29 @@ var VirtualScroller = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(fun
     _React$useState4 = _slicedToArray(_React$useState3, 2),
     lastState = _React$useState4[0],
     setLastState = _React$useState4[1];
-  var _React$useState5 = React.useState(both ? {
+  var _React$useState5 = React.useState(0),
+    _React$useState6 = _slicedToArray(_React$useState5, 2),
+    pageState = _React$useState6[0],
+    setPageState = _React$useState6[1];
+  var _React$useState7 = React.useState(both ? {
       rows: 0,
       cols: 0
     } : 0),
-    _React$useState6 = _slicedToArray(_React$useState5, 2),
-    numItemsInViewportState = _React$useState6[0],
-    setNumItemsInViewportState = _React$useState6[1];
-  var _React$useState7 = React.useState(props.numToleratedItems),
     _React$useState8 = _slicedToArray(_React$useState7, 2),
-    numToleratedItemsState = _React$useState8[0],
-    setNumToleratedItemsState = _React$useState8[1];
-  var _React$useState9 = React.useState(props.loading || false),
+    numItemsInViewportState = _React$useState8[0],
+    setNumItemsInViewportState = _React$useState8[1];
+  var _React$useState9 = React.useState(props.numToleratedItems),
     _React$useState10 = _slicedToArray(_React$useState9, 2),
-    loadingState = _React$useState10[0],
-    setLoadingState = _React$useState10[1];
-  var _React$useState11 = React.useState([]),
+    numToleratedItemsState = _React$useState10[0],
+    setNumToleratedItemsState = _React$useState10[1];
+  var _React$useState11 = React.useState(props.loading || false),
     _React$useState12 = _slicedToArray(_React$useState11, 2),
-    loaderArrState = _React$useState12[0],
-    setLoaderArrState = _React$useState12[1];
+    loadingState = _React$useState12[0],
+    setLoadingState = _React$useState12[1];
+  var _React$useState13 = React.useState([]),
+    _React$useState14 = _slicedToArray(_React$useState13, 2),
+    loaderArrState = _React$useState14[0],
+    setLoaderArrState = _React$useState14[1];
   var elementRef = React.useRef(null);
   var _contentRef = React.useRef(null);
   var _spacerRef = React.useRef(null);
@@ -202,14 +211,19 @@ var VirtualScroller = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(fun
   } : 0);
   var scrollTimeout = React.useRef(null);
   var resizeTimeout = React.useRef(null);
+  var contentStyle = React.useRef({});
+  var spacerStyle = React.useRef({});
   var defaultWidth = React.useRef(null);
   var defaultHeight = React.useRef(null);
-  var prevItems = usePrevious(props.items);
-  var prevLoading = usePrevious(props.loading);
+  var defaultContentWidth = React.useRef(null);
+  var defaultContentHeight = React.useRef(null);
+  var isItemRangeChanged = React.useRef(false);
+  var lazyLoadState = React.useRef(null);
   var _useResizeListener = useResizeListener({
       listener: function listener(event) {
         return onResize();
-      }
+      },
+      when: !props.disabled
     }),
     _useResizeListener2 = _slicedToArray(_useResizeListener, 1),
     bindWindowResizeListener = _useResizeListener2[0];
@@ -218,13 +232,23 @@ var VirtualScroller = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(fun
       type: 'orientationchange',
       listener: function listener(event) {
         return onResize();
-      }
+      },
+      when: !props.disabled
     }),
     _useEventListener2 = _slicedToArray(_useEventListener, 1),
     bindOrientationChangeListener = _useEventListener2[0];
   var getElementRef = function getElementRef() {
     return elementRef;
   };
+  var getPageByFirst = function getPageByFirst(first) {
+    return Math.floor((first + numToleratedItemsState * 4) / (props.step || 1));
+  };
+  var setContentElement = function setContentElement(element) {
+    _contentRef.current = element || _contentRef.current || DomHandler.findSingle(elementRef.current, '.p-virtualscroller-content');
+  };
+  var isPageChanged = function isPageChanged(first) {
+    return props.step ? pageState !== getPageByFirst(first) : true;
+  };
   var scrollTo = function scrollTo(options) {
     lastScrollPos.current = both ? {
       top: 0,
@@ -236,13 +260,14 @@ var VirtualScroller = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(fun
     var behavior = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'auto';
     var _calculateNumItems = calculateNumItems(),
       numToleratedItems = _calculateNumItems.numToleratedItems;
+    var contentPos = getContentPosition();
     var calculateFirst = function calculateFirst() {
       var _index = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 0;
       var _numT = arguments.length > 1 ? arguments[1] : undefined;
       return _index <= _numT ? 0 : _index;
     };
-    var calculateCoord = function calculateCoord(_first, _size) {
-      return _first * _size;
+    var calculateCoord = function calculateCoord(_first, _size, _cpos) {
+      return _first * _size + _cpos;
     };
     var scrollToItem = function scrollToItem() {
       var left = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 0;
@@ -253,20 +278,25 @@ var VirtualScroller = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(fun
         behavior: behavior
       });
     };
+    var newFirst = both ? {
+      rows: 0,
+      cols: 0
+    } : 0;
+    var isRangeChanged = false;
     if (both) {
-      var newFirst = {
+      newFirst = {
         rows: calculateFirst(index[0], numToleratedItems[0]),
         cols: calculateFirst(index[1], numToleratedItems[1])
       };
-      if (newFirst.rows !== firstState.rows || newFirst.cols !== firstState.cols) {
-        scrollToItem(calculateCoord(newFirst.cols, props.itemSize[1]), calculateCoord(newFirst.rows, props.itemSize[0]));
-      }
+      scrollToItem(calculateCoord(newFirst.cols, props.itemSize[1], contentPos.left), calculateCoord(newFirst.rows, props.itemSize[0], contentPos.top));
+      isRangeChanged = firstState.rows !== newFirst.rows || firstState.cols !== newFirst.cols;
     } else {
-      var _newFirst = calculateFirst(index, numToleratedItems);
-      if (_newFirst !== firstState) {
-        horizontal ? scrollToItem(calculateCoord(_newFirst, props.itemSize), 0) : scrollToItem(0, calculateCoord(_newFirst, props.itemSize));
-      }
+      newFirst = calculateFirst(index, numToleratedItems);
+      horizontal ? scrollToItem(calculateCoord(newFirst, props.itemSize, contentPos.left), 0) : scrollToItem(0, calculateCoord(newFirst, props.itemSize, contentPos.top));
+      isRangeChanged = firstState !== newFirst;
     }
+    isItemRangeChanged.current = isRangeChanged;
+    setFirstState(newFirst);
   };
   var scrollInView = function scrollInView(index, to) {
     var behavior = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 'auto';
@@ -383,7 +413,8 @@ var VirtualScroller = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(fun
     var _calculateNumItems2 = calculateNumItems(),
       numItemsInViewport = _calculateNumItems2.numItemsInViewport,
       numToleratedItems = _calculateNumItems2.numToleratedItems;
-    var calculateLast = function calculateLast(_first, _num, _numT, _isCols) {
+    var calculateLast = function calculateLast(_first, _num, _numT) {
+      var _isCols = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : false;
       return getLast(_first + _num + (_first < _numT ? 2 : 3) * _numT, _isCols);
     };
     var last = both ? {
@@ -405,9 +436,15 @@ var VirtualScroller = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(fun
       }));
     }
     if (props.lazy) {
-      props.onLazyLoad && props.onLazyLoad({
-        first: firstState,
-        last: last
+      Promise.resolve().then(function () {
+        lazyLoadState.current = {
+          first: props.step ? both ? {
+            rows: 0,
+            cols: firstState.cols
+          } : 0 : firstState,
+          last: Math.min(props.step ? props.step : last, props.items.length)
+        };
+        props.onLazyLoad && props.onLazyLoad(lazyLoadState.current);
       });
     }
   };
@@ -416,12 +453,21 @@ var VirtualScroller = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(fun
       Promise.resolve().then(function () {
         if (_contentRef.current) {
           _contentRef.current.style.minHeight = _contentRef.current.style.minWidth = 'auto';
-          var _contentRef$current = _contentRef.current,
-            offsetWidth = _contentRef$current.offsetWidth,
-            offsetHeight = _contentRef$current.offsetHeight;
-          (both || horizontal) && (elementRef.current.style.width = (offsetWidth < defaultWidth.current ? offsetWidth : defaultWidth.current) + 'px');
-          (both || vertical) && (elementRef.current.style.height = (offsetHeight < defaultHeight.current ? offsetHeight : defaultHeight.current) + 'px');
+          _contentRef.current.style.position = 'relative';
+          elementRef.current.style.contain = 'none';
+
+          /*const [contentWidth, contentHeight] = [DomHandler.getWidth(contentRef.current), DomHandler.getHeight(contentRef.current)];
+           contentWidth !== defaultContentWidth.current && (elementRef.current.style.width = '');
+          contentHeight !== defaultContentHeight.current && (elementRef.current.style.height = '');*/
+
+          var _ref = [DomHandler.getWidth(elementRef.current), DomHandler.getHeight(elementRef.current)],
+            width = _ref[0],
+            height = _ref[1];
+          (both || horizontal) && (elementRef.current.style.width = (width < defaultWidth.current ? width : props.scrollWidth || defaultWidth.current) + 'px');
+          (both || vertical) && (elementRef.current.style.height = (height < defaultHeight.current ? height : props.scrollHeight || defaultHeight.current) + 'px');
           _contentRef.current.style.minHeight = _contentRef.current.style.minWidth = '';
+          _contentRef.current.style.position = '';
+          elementRef.current.style.contain = '';
         }
       });
     }
@@ -434,10 +480,10 @@ var VirtualScroller = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(fun
   var getContentPosition = function getContentPosition() {
     if (_contentRef.current) {
       var style = getComputedStyle(_contentRef.current);
-      var left = parseInt(style.paddingLeft, 10) + Math.max(parseInt(style.left, 10), 0);
-      var right = parseInt(style.paddingRight, 10) + Math.max(parseInt(style.right, 10), 0);
-      var top = parseInt(style.paddingTop, 10) + Math.max(parseInt(style.top, 10), 0);
-      var bottom = parseInt(style.paddingBottom, 10) + Math.max(parseInt(style.bottom, 10), 0);
+      var left = parseFloat(style.paddingLeft) + Math.max(parseFloat(style.left) || 0, 0);
+      var right = parseFloat(style.paddingRight) + Math.max(parseFloat(style.right) || 0, 0);
+      var top = parseFloat(style.paddingTop) + Math.max(parseFloat(style.top) || 0, 0);
+      var bottom = parseFloat(style.paddingBottom) + Math.max(parseFloat(style.bottom) || 0, 0);
       return {
         left: left,
         right: right,
@@ -474,11 +520,11 @@ var VirtualScroller = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(fun
   };
   var setSpacerSize = function setSpacerSize() {
     var items = props.items;
-    if (_spacerRef.current && items) {
+    if (items) {
       var contentPos = getContentPosition();
       var setProp = function setProp(_name, _value, _size) {
         var _cpos = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : 0;
-        return _spacerRef.current.style[_name] = (_value || []).length * _size + _cpos + 'px';
+        return spacerStyle.current = _objectSpread(_objectSpread({}, spacerStyle.current), _defineProperty({}, "".concat(_name), (_value || []).length * _size + _cpos + 'px'));
       };
       if (both) {
         setProp('height', items, props.itemSize[0], contentPos.y);
@@ -489,7 +535,7 @@ var VirtualScroller = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(fun
     }
   };
   var setContentPosition = function setContentPosition(pos) {
-    if (_contentRef.current) {
+    if (_contentRef.current && !props.appendOnly) {
       var first = pos ? pos.first : firstState;
       var calculateTranslateVal = function calculateTranslateVal(_first, _size) {
         return _first * _size;
@@ -498,7 +544,9 @@ var VirtualScroller = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(fun
         var _x = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 0;
         var _y = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;
         _stickyRef.current && (_stickyRef.current.style.top = "-".concat(_y, "px"));
-        _contentRef.current.style.transform = "translate3d(".concat(_x, "px, ").concat(_y, "px, 0)");
+        contentStyle.current = _objectSpread(_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]));
@@ -542,36 +590,40 @@ var VirtualScroller = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(fun
     if (both) {
       var isScrollDown = lastScrollPos.current.top <= scrollTop;
       var isScrollRight = lastScrollPos.current.left <= scrollLeft;
-      var currentIndex = {
-        rows: calculateCurrentIndex(scrollTop, props.itemSize[0]),
-        cols: calculateCurrentIndex(scrollLeft, props.itemSize[1])
-      };
-      var triggerIndex = {
-        rows: calculateTriggerIndex(currentIndex.rows, firstState.rows, lastState.rows, numItemsInViewportState.rows, numToleratedItemsState[0], isScrollDown),
-        cols: calculateTriggerIndex(currentIndex.cols, firstState.cols, lastState.cols, numItemsInViewportState.cols, numToleratedItemsState[1], isScrollRight)
-      };
-      newFirst = {
-        rows: calculateFirst(currentIndex.rows, triggerIndex.rows, firstState.rows, lastState.rows, numItemsInViewportState.rows, numToleratedItemsState[0], isScrollDown),
-        cols: calculateFirst(currentIndex.cols, triggerIndex.cols, firstState.cols, lastState.cols, numItemsInViewportState.cols, numToleratedItemsState[1], isScrollRight)
-      };
-      newLast = {
-        rows: calculateLast(currentIndex.rows, newFirst.rows, lastState.rows, numItemsInViewportState.rows, numToleratedItemsState[0]),
-        cols: calculateLast(currentIndex.cols, newFirst.cols, lastState.cols, numItemsInViewportState.cols, numToleratedItemsState[1], true)
-      };
-      isRangeChanged = newFirst.rows !== firstState.rows || newLast.rows !== lastState.rows || newFirst.cols !== firstState.cols || newLast.cols !== lastState.cols;
-      newScrollPos = {
-        top: scrollTop,
-        left: scrollLeft
-      };
+      if (!props.appendOnly || props.appendOnly && (isScrollDown || isScrollRight)) {
+        var currentIndex = {
+          rows: calculateCurrentIndex(scrollTop, props.itemSize[0]),
+          cols: calculateCurrentIndex(scrollLeft, props.itemSize[1])
+        };
+        var triggerIndex = {
+          rows: calculateTriggerIndex(currentIndex.rows, firstState.rows, lastState.rows, numItemsInViewportState.rows, numToleratedItemsState[0], isScrollDown),
+          cols: calculateTriggerIndex(currentIndex.cols, firstState.cols, lastState.cols, numItemsInViewportState.cols, numToleratedItemsState[1], isScrollRight)
+        };
+        newFirst = {
+          rows: calculateFirst(currentIndex.rows, triggerIndex.rows, firstState.rows, lastState.rows, numItemsInViewportState.rows, numToleratedItemsState[0], isScrollDown),
+          cols: calculateFirst(currentIndex.cols, triggerIndex.cols, firstState.cols, lastState.cols, numItemsInViewportState.cols, numToleratedItemsState[1], isScrollRight)
+        };
+        newLast = {
+          rows: calculateLast(currentIndex.rows, newFirst.rows, lastState.rows, numItemsInViewportState.rows, numToleratedItemsState[0]),
+          cols: calculateLast(currentIndex.cols, newFirst.cols, lastState.cols, numItemsInViewportState.cols, numToleratedItemsState[1], true)
+        };
+        isRangeChanged = newFirst.rows !== firstState.rows || newLast.rows !== lastState.rows || newFirst.cols !== firstState.cols || newLast.cols !== lastState.cols || isItemRangeChanged.current;
+        newScrollPos = {
+          top: scrollTop,
+          left: scrollLeft
+        };
+      }
     } else {
       var scrollPos = horizontal ? scrollLeft : scrollTop;
       var isScrollDownOrRight = lastScrollPos.current <= scrollPos;
-      var _currentIndex2 = calculateCurrentIndex(scrollPos, props.itemSize);
-      var _triggerIndex2 = calculateTriggerIndex(_currentIndex2, firstState, lastState, numItemsInViewportState, numToleratedItemsState, isScrollDownOrRight);
-      newFirst = calculateFirst(_currentIndex2, _triggerIndex2, firstState, lastState, numItemsInViewportState, numToleratedItemsState, isScrollDownOrRight);
-      newLast = calculateLast(_currentIndex2, newFirst, lastState, numItemsInViewportState, numToleratedItemsState);
-      isRangeChanged = newFirst !== firstState || newLast !== lastState;
-      newScrollPos = scrollPos;
+      if (!props.appendOnly || props.appendOnly && isScrollDownOrRight) {
+        var _currentIndex2 = calculateCurrentIndex(scrollPos, props.itemSize);
+        var _triggerIndex2 = calculateTriggerIndex(_currentIndex2, firstState, lastState, numItemsInViewportState, numToleratedItemsState, isScrollDownOrRight);
+        newFirst = calculateFirst(_currentIndex2, _triggerIndex2, firstState, lastState, numItemsInViewportState, numToleratedItemsState, isScrollDownOrRight);
+        newLast = calculateLast(_currentIndex2, newFirst, lastState, numItemsInViewportState, numToleratedItemsState);
+        isRangeChanged = newFirst !== firstState || newLast !== lastState || isItemRangeChanged.current;
+        newScrollPos = scrollPos;
+      }
     }
     return {
       first: newFirst,
@@ -596,8 +648,14 @@ var VirtualScroller = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(fun
       setLastState(last);
       lastScrollPos.current = scrollPos;
       props.onScrollIndexChange && props.onScrollIndexChange(newState);
-      if (props.lazy) {
-        props.onLazyLoad && props.onLazyLoad(newState);
+      if (props.lazy && isPageChanged(first)) {
+        var newLazyLoadState = {
+          first: props.step ? Math.min(getPageByFirst(first) * props.step, props.items.length - props.step) : first,
+          last: Math.min(props.step ? (getPageByFirst(first) + 1) * props.step : last, props.items.length)
+        };
+        var isLazyStateChanged = !lazyLoadState.current || lazyLoadState.current.first !== newLazyLoadState.first || lazyLoadState.current.last !== newLazyLoadState.last;
+        isLazyStateChanged && props.onLazyLoad && props.onLazyLoad(newLazyLoadState);
+        lazyLoadState.current = newLazyLoadState;
       }
     }
   };
@@ -607,17 +665,21 @@ var VirtualScroller = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(fun
       if (scrollTimeout.current) {
         clearTimeout(scrollTimeout.current);
       }
-      if (!loadingState && props.showLoader) {
-        var _onScrollPositionChan2 = onScrollPositionChange(event),
-          changed = _onScrollPositionChan2.isRangeChanged;
-        changed && setLoadingState(true);
-      }
-      scrollTimeout.current = setTimeout(function () {
-        onScrollChange(event);
-        if (loadingState && props.showLoader && (!props.lazy || props.loading === undefined)) {
-          setLoadingState(false);
+      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);
         }
-      }, props.delay);
+        scrollTimeout.current = setTimeout(function () {
+          onScrollChange(event);
+          if (loadingState && props.showLoader && (!props.lazy || props.loading === undefined)) {
+            setLoadingState(false);
+            setPageState(getPageByFirst(firstState));
+          }
+        }, props.delay);
+      }
     } else {
       onScrollChange(event);
     }
@@ -628,9 +690,9 @@ var VirtualScroller = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(fun
     }
     resizeTimeout.current = setTimeout(function () {
       if (elementRef.current) {
-        var _ref = [DomHandler.getWidth(elementRef.current), DomHandler.getHeight(elementRef.current)],
-          width = _ref[0],
-          height = _ref[1];
+        var _ref2 = [DomHandler.getWidth(elementRef.current), DomHandler.getHeight(elementRef.current)],
+          width = _ref2[0],
+          height = _ref2[1];
         var isDiffWidth = width !== defaultWidth.current,
           isDiffHeight = height !== defaultHeight.current;
         var reinit = both ? isDiffWidth || isDiffHeight : horizontal ? isDiffWidth : vertical ? isDiffHeight : false;
@@ -638,6 +700,8 @@ var VirtualScroller = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(fun
           setNumToleratedItemsState(props.numToleratedItems);
           defaultWidth.current = width;
           defaultHeight.current = height;
+          defaultContentWidth.current = DomHandler.getWidth(_contentRef.current);
+          defaultContentHeight.current = DomHandler.getHeight(_contentRef.current);
         }
       }
     }, props.resizeDelay);
@@ -670,12 +734,24 @@ var VirtualScroller = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(fun
   var loadedItems = function loadedItems() {
     var items = props.items;
     if (items && !loadingState) {
-      if (both) return items.slice(firstState.rows, lastState.rows).map(function (item) {
-        return props.columns ? item : item.slice(firstState.cols, lastState.cols);
-      });else if (horizontal && props.columns) return items;else return items.slice(firstState, lastState);
+      if (both) return items.slice(props.appendOnly ? 0 : firstState.rows, lastState.rows).map(function (item) {
+        return props.columns ? item : item.slice(props.appendOnly ? 0 : firstState.cols, lastState.cols);
+      });else if (horizontal && props.columns) return items;else return items.slice(props.appendOnly ? 0 : firstState, lastState);
     }
     return [];
   };
+  var viewInit = function viewInit() {
+    if (elementRef.current && DomHandler.isVisible(elementRef.current)) {
+      setContentElement(_contentRef.current);
+      init();
+      bindWindowResizeListener();
+      bindOrientationChangeListener();
+      defaultWidth.current = DomHandler.getWidth(elementRef.current);
+      defaultHeight.current = DomHandler.getHeight(elementRef.current);
+      defaultContentWidth.current = DomHandler.getWidth(_contentRef.current);
+      defaultContentHeight.current = DomHandler.getHeight(_contentRef.current);
+    }
+  };
   var init = function init() {
     if (!props.disabled) {
       setSize();
@@ -684,17 +760,11 @@ var VirtualScroller = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(fun
     }
   };
   useMountEffect(function () {
-    if (!props.disabled) {
-      init();
-      bindWindowResizeListener();
-      bindOrientationChangeListener();
-      defaultWidth.current = DomHandler.getWidth(elementRef.current);
-      defaultHeight.current = DomHandler.getHeight(elementRef.current);
-    }
+    viewInit();
   });
   useUpdateEffect(function () {
     init();
-  }, [props.itemSize, props.scrollHeight]);
+  }, [props.itemSize, props.scrollHeight, props.scrollWidth]);
   useUpdateEffect(function () {
     if (props.numToleratedItems !== numToleratedItemsState) {
       setNumToleratedItemsState(props.numToleratedItems);
@@ -706,11 +776,11 @@ var VirtualScroller = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(fun
     }
   }, [numToleratedItemsState]);
   useUpdateEffect(function () {
-    if (!prevItems || prevItems.length !== (props.items || []).length) {
+    if (!prevProps.items || prevProps.items.length !== (props.items || []).length) {
       init();
     }
     var loading = loadingState;
-    if (props.lazy && prevLoading !== props.loading && props.loading !== loadingState) {
+    if (props.lazy && prevProps.loading !== props.loading && props.loading !== loadingState) {
       setLoadingState(props.loading);
       loading = props.loading;
     }
@@ -772,6 +842,7 @@ var VirtualScroller = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(fun
     if (props.showSpacer) {
       return /*#__PURE__*/React.createElement("div", {
         ref: _spacerRef,
+        style: spacerStyle.current,
         className: "p-virtualscroller-spacer"
       });
     }
@@ -795,11 +866,14 @@ var VirtualScroller = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(fun
     });
     var content = /*#__PURE__*/React.createElement("div", {
       ref: _contentRef,
+      style: contentStyle.current,
       className: className
     }, items);
     if (props.contentTemplate) {
       var defaultOptions = {
+        style: contentStyle.current,
         className: className,
+        spacerStyle: spacerStyle.current,
         contentRef: function contentRef(el) {
           return _contentRef.current = ObjectUtils.getRefElement(el);
         },
@@ -842,10 +916,9 @@ var VirtualScroller = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(fun
   } else {
     var otherProps = VirtualScrollerBase.getOtherProps(props);
     var className = classNames('p-virtualscroller', {
-      'p-both-scroll': both,
-      'p-virtualscroller-both': both,
-      'p-virtualscroller-horizontal': horizontal,
-      'p-horizontal-scroll': horizontal
+      'p-virtualscroller-inline': props.inline,
+      'p-virtualscroller-both p-both-scroll': both,
+      'p-virtualscroller-horizontal p-horizontal-scroll': horizontal
     }, props.className);
     var loader = createLoader();
     var _content = createContent();
@@ -853,7 +926,7 @@ var VirtualScroller = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(fun
     return /*#__PURE__*/React.createElement("div", _extends({
       ref: elementRef,
       className: className,
-      tabIndex: 0,
+      tabIndex: props.tabIndex,
       style: props.style
     }, otherProps, {
       onScroll: onScroll

package/virtualscroller/virtualscroller.esm.min.js

@@ -1 +1 @@
-import*as e from"react";import{usePrevious as t,useResizeListener as r,useEventListener as n,useMountEffect as o,useUpdateEffect as l}from"primereact/hooks";import{ObjectUtils as i,DomHandler as s,classNames as c}from"primereact/utils";function a(){return a=Object.assign?Object.assign.bind():function(e){for(var t=1;t<arguments.length;t++){var r=arguments[t];for(var n in r)Object.prototype.hasOwnProperty.call(r,n)&&(e[n]=r[n])}return e},a.apply(this,arguments)}function u(e){return u="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e},u(e)}function f(e,t){if("object"!==u(e)||null===e)return e;var r=e[Symbol.toPrimitive];if(void 0!==r){var n=r.call(e,t||"default");if("object"!==u(n))return n;throw new TypeError("@@toPrimitive must return a primitive value.")}return("string"===t?String:Number)(e)}function m(e){var t=f(e,"string");return"symbol"===u(t)?t:String(t)}function d(e,t,r){return(t=m(t))in e?Object.defineProperty(e,t,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[t]=r,e}function p(e){if(Array.isArray(e))return e}function g(e,t){var r=null==e?null:"undefined"!=typeof Symbol&&e[Symbol.iterator]||e["@@iterator"];if(null!=r){var n,o,l,i,s=[],c=!0,a=!1;try{if(l=(r=r.call(e)).next,0===t){if(Object(r)!==r)return;c=!1}else for(;!(c=(n=l.call(r)).done)&&(s.push(n.value),s.length!==t);c=!0);}catch(e){a=!0,o=e}finally{try{if(!c&&null!=r.return&&(i=r.return(),Object(i)!==i))return}finally{if(a)throw o}}return s}}function h(e,t){(null==t||t>e.length)&&(t=e.length);for(var r=0,n=new Array(t);r<t;r++)n[r]=e[r];return n}function v(e,t){if(e){if("string"==typeof e)return h(e,t);var r=Object.prototype.toString.call(e).slice(8,-1);return"Object"===r&&e.constructor&&(r=e.constructor.name),"Map"===r||"Set"===r?Array.from(e):"Arguments"===r||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(r)?h(e,t):void 0}}function y(){throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}function w(e,t){return p(e)||g(e,t)||v(e,t)||y()}var S={defaultProps:{__TYPE:"VirtualScroller",id:null,style:null,className:null,items:null,itemSize:0,scrollHeight:null,scrollWidth:null,orientation:"vertical",numToleratedItems:null,delay:0,resizeDelay:10,lazy:!1,disabled:!1,loaderDisabled:!1,columns:null,loading:void 0,autoSize:!1,showSpacer:!0,showLoader:!1,loadingTemplate:null,loaderIconTemplate:null,itemTemplate:null,contentTemplate:null,onScroll:null,onScrollIndexChange:null,onLazyLoad:null,children:void 0},getProps:function(e){return i.getMergedProps(e,S.defaultProps)},getOtherProps:function(e){return i.getDiffProps(e,S.defaultProps)}};function b(e,t){var r=Object.keys(e);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(e);t&&(n=n.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),r.push.apply(r,n)}return r}function z(e){for(var t=1;t<arguments.length;t++){var r=null!=arguments[t]?arguments[t]:{};t%2?b(Object(r),!0).forEach((function(t){d(e,t,r[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(r)):b(Object(r)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(r,t))}))}return e}var T=e.memo(e.forwardRef((function(u,f){var m=S.getProps(u),d="vertical"===m.orientation,p="horizontal"===m.orientation,g="both"===m.orientation,h=w(e.useState(g?{rows:0,cols:0}:0),2),v=h[0],y=h[1],b=w(e.useState(g?{rows:0,cols:0}:0),2),T=b[0],I=b[1],O=w(e.useState(g?{rows:0,cols:0}:0),2),x=O[0],P=O[1],E=w(e.useState(m.numToleratedItems),2),R=E[0],j=E[1],L=w(e.useState(m.loading||!1),2),H=L[0],M=L[1],D=w(e.useState([]),2),N=D[0],W=D[1],A=e.useRef(null),C=e.useRef(null),k=e.useRef(null),J=e.useRef(null),V=e.useRef(g?{top:0,left:0}:0),X=e.useRef(null),F=e.useRef(null),_=e.useRef(null),B=e.useRef(null),U=t(m.items),Y=t(m.loading),$=w(r({listener:function(e){return ue()}}),1)[0],q=w(n({target:"window",type:"orientationchange",listener:function(e){return ue()}}),1)[0],G=function(){return A},K=function(e){V.current=g?{top:0,left:0}:0,A.current&&A.current.scrollTo(e)},Q=function(e){var t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:"auto",r=te(),n=r.numToleratedItems,o=function(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:0,t=arguments.length>1?arguments[1]:void 0;return e<=t?0:e},l=function(e,t){return e*t},i=function(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:0,r=arguments.length>1&&void 0!==arguments[1]?arguments[1]:0;return K({left:e,top:r,behavior:t})};if(g){var s={rows:o(e[0],n[0]),cols:o(e[1],n[1])};s.rows===v.rows&&s.cols===v.cols||i(l(s.cols,m.itemSize[1]),l(s.rows,m.itemSize[0]))}else{var c=o(e,n);c!==v&&(p?i(l(c,m.itemSize),0):i(0,l(c,m.itemSize)))}},Z=function(e,t){var r=arguments.length>2&&void 0!==arguments[2]?arguments[2]:"auto";if(t){var n=ee(),o=n.first,l=n.viewport,i=function(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:0,t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:0;return K({left:e,top:t,behavior:r})},s="to-start"===t,c="to-end"===t;if(s){if(g)l.first.rows-o.rows>e[0]?i(l.first.cols*m.itemSize[1],(l.first.rows-1)*m.itemSize[0]):l.first.cols-o.cols>e[1]&&i((l.first.cols-1)*m.itemSize[1],l.first.rows*m.itemSize[0]);else if(l.first-o>e){var a=(l.first-1)*m.itemSize;p?i(a,0):i(0,a)}}else if(c)if(g)l.last.rows-o.rows<=e[0]+1?i(l.first.cols*m.itemSize[1],(l.first.rows+1)*m.itemSize[0]):l.last.cols-o.cols<=e[1]+1&&i((l.first.cols+1)*m.itemSize[1],l.first.rows*m.itemSize[0]);else if(l.last-o<=e+1){var u=(l.first+1)*m.itemSize;p?i(u,0):i(0,u)}}else Q(e,r)},ee=function(){var e=function(e,t){return Math.floor(e/(t||e))},t=v,r=0;if(A.current){var n=A.current,o=n.scrollTop,l=n.scrollLeft;if(g)r={rows:(t={rows:e(o,m.itemSize[0]),cols:e(l,m.itemSize[1])}).rows+x.rows,cols:t.cols+x.cols};else r=(t=e(p?l:o,m.itemSize))+x}return{first:v,last:T,viewport:{first:t,last:r}}},te=function(){var e=oe(),t=A.current?A.current.offsetWidth-e.left:0,r=A.current?A.current.offsetHeight-e.top:0,n=function(e,t){return Math.ceil(e/(t||e))},o=function(e){return Math.ceil(e/2)},l=g?{rows:n(r,m.itemSize[0]),cols:n(t,m.itemSize[1])}:n(p?t:r,m.itemSize);return{numItemsInViewport:l,numToleratedItems:R||(g?[o(l.rows),o(l.cols)]:o(l))}},re=function(e){m.autoSize&&!e&&Promise.resolve().then((function(){if(C.current){C.current.style.minHeight=C.current.style.minWidth="auto";var e=C.current,t=e.offsetWidth,r=e.offsetHeight;(g||p)&&(A.current.style.width=(t<_.current?t:_.current)+"px"),(g||d)&&(A.current.style.height=(r<B.current?r:B.current)+"px"),C.current.style.minHeight=C.current.style.minWidth=""}}))},ne=function(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:0,t=arguments.length>1?arguments[1]:void 0;return m.items?Math.min(t?(m.columns||m.items[0]).length:m.items.length,e):0},oe=function(){if(C.current){var e=getComputedStyle(C.current),t=parseInt(e.paddingLeft,10)+Math.max(parseInt(e.left,10),0),r=parseInt(e.paddingRight,10)+Math.max(parseInt(e.right,10),0),n=parseInt(e.paddingTop,10)+Math.max(parseInt(e.top,10),0),o=parseInt(e.paddingBottom,10)+Math.max(parseInt(e.bottom,10),0);return{left:t,right:r,top:n,bottom:o,x:t+r,y:n+o}}return{left:0,right:0,top:0,bottom:0,x:0,y:0}},le=function(){if(A.current){var e=A.current.parentElement,t=m.scrollWidth||"".concat(A.current.offsetWidth||e.offsetWidth,"px"),r=m.scrollHeight||"".concat(A.current.offsetHeight||e.offsetHeight,"px"),n=function(e,t){return A.current.style[e]=t};g||p?(n("height",r),n("width",t)):n("height",r)}},ie=function(){var e=m.items;if(k.current&&e){var t=oe(),r=function(e,t,r){var n=arguments.length>3&&void 0!==arguments[3]?arguments[3]:0;return k.current.style[e]=(t||[]).length*r+n+"px"};g?(r("height",e,m.itemSize[0],t.y),r("width",m.columns||e[1],m.itemSize[1],t.x)):p?r("width",m.columns||e,m.itemSize,t.x):r("height",e,m.itemSize,t.y)}},se=function(e){if(C.current){var t=e?e.first:v,r=function(e,t){return e*t},n=function(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:0,t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:0;J.current&&(J.current.style.top="-".concat(t,"px")),C.current.style.transform="translate3d(".concat(e,"px, ").concat(t,"px, 0)")};if(g)n(r(t.cols,m.itemSize[1]),r(t.rows,m.itemSize[0]));else{var o=r(t,m.itemSize);p?n(o,0):n(0,o)}}},ce=function(e){var t=e.target,r=oe(),n=function(e,t){return e?e>t?e-t:e:0},o=function(e,t){return Math.floor(e/(t||e))},l=function(e,t,r,n,o,l){return e<=o?o:l?r-n-o:t+o-1},i=function(e,t,r,n,o,l,i){return e<=l?0:Math.max(0,i?e<t?r:e-l:e>t?r:e-2*l)},s=function(e,t,r,n,o,l){var i=t+n+2*o;return e>=o&&(i+=o+1),ne(i,l)},c=n(t.scrollTop,r.top),a=n(t.scrollLeft,r.left),u=g?{rows:0,cols:0}:0,f=T,d=!1,h=V.current;if(g){var y=V.current.top<=c,w=V.current.left<=a,S={rows:o(c,m.itemSize[0]),cols:o(a,m.itemSize[1])},b={rows:l(S.rows,v.rows,T.rows,x.rows,R[0],y),cols:l(S.cols,v.cols,T.cols,x.cols,R[1],w)};u={rows:i(S.rows,b.rows,v.rows,0,0,R[0],y),cols:i(S.cols,b.cols,v.cols,0,0,R[1],w)},f={rows:s(S.rows,u.rows,0,x.rows,R[0]),cols:s(S.cols,u.cols,0,x.cols,R[1],!0)},d=u.rows!==v.rows||f.rows!==T.rows||u.cols!==v.cols||f.cols!==T.cols,h={top:c,left:a}}else{var z=p?a:c,I=V.current<=z,O=o(z,m.itemSize);f=s(O,u=i(O,l(O,v,T,x,R,I),v,0,0,R,I),0,x,R),d=u!==v||f!==T,h=z}return{first:u,last:f,isRangeChanged:d,scrollPos:h}},ae=function(e){var t=ce(e),r=t.first,n=t.last,o=t.scrollPos;if(t.isRangeChanged){var l={first:r,last:n};se(l),y(r),I(n),V.current=o,m.onScrollIndexChange&&m.onScrollIndexChange(l),m.lazy&&m.onLazyLoad&&m.onLazyLoad(l)}},ue=function(){F.current&&clearTimeout(F.current),F.current=setTimeout((function(){if(A.current){var e=[s.getWidth(A.current),s.getHeight(A.current)],t=e[0],r=e[1],n=t!==_.current,o=r!==B.current;(g?n||o:p?n:!!d&&o)&&(j(m.numToleratedItems),_.current=t,B.current=r)}}),m.resizeDelay)},fe=function(e){var t=(m.items||[]).length,r=g?v.rows+e:v+e;return{index:r,count:t,first:0===r,last:r===t-1,even:r%2==0,odd:r%2!=0,props:m}},me=function(e,t){var r=N.length;return z({index:e,count:r,first:0===e,last:e===r-1,even:e%2==0,odd:e%2!=0,props:m},t)},de=function(){var e=m.items;return e&&!H?g?e.slice(v.rows,T.rows).map((function(e){return m.columns?e:e.slice(v.cols,T.cols)})):p&&m.columns?e:e.slice(v,T):[]},pe=function(){var e,t,r,n,o;m.disabled||(le(),e=te(),t=e.numItemsInViewport,r=e.numToleratedItems,n=function(e,t,r,n){return ne(e+t+(e<r?2:3)*r,n)},o=g?{rows:n(v.rows,t.rows,r[0]),cols:n(v.cols,t.cols,r[1],!0)}:n(v,t,r),P(t),j(r),I(o),m.showLoader&&W(g?Array.from({length:t.rows}).map((function(){return Array.from({length:t.cols})})):Array.from({length:t})),m.lazy&&m.onLazyLoad&&m.onLazyLoad({first:v,last:o}),ie())};o((function(){m.disabled||(pe(),$(),q(),_.current=s.getWidth(A.current),B.current=s.getHeight(A.current))})),l((function(){pe()}),[m.itemSize,m.scrollHeight]),l((function(){m.numToleratedItems!==R&&j(m.numToleratedItems)}),[m.numToleratedItems]),l((function(){m.numToleratedItems===R&&pe()}),[R]),l((function(){U&&U.length===(m.items||[]).length||pe();var e=H;m.lazy&&Y!==m.loading&&m.loading!==H&&(M(m.loading),e=m.loading),re(e)})),l((function(){V.current=g?{top:0,left:0}:0}),[m.orientation]),e.useImperativeHandle(f,(function(){return{props:m,getElementRef:G,scrollTo:K,scrollToIndex:Q,scrollInView:Z,getRenderedRange:ee}}));var ge=function(t){var r=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{},n=me(t,r),o=i.getJSXElement(m.loadingTemplate,n);return e.createElement(e.Fragment,{key:t},o)},he=function(t,r){var n=fe(r),o=i.getJSXElement(m.itemTemplate,t,n);return e.createElement(e.Fragment,{key:n.index},o)};if(m.disabled){var ve=i.getJSXElement(m.contentTemplate,{items:m.items,rows:m.items,columns:m.columns});return e.createElement(e.Fragment,null,m.children,ve)}var ye=S.getOtherProps(m),we=c("p-virtualscroller",{"p-both-scroll":g,"p-virtualscroller-both":g,"p-virtualscroller-horizontal":p,"p-horizontal-scroll":p},m.className),Se=function(){if(!m.loaderDisabled&&m.showLoader&&H){var t=c("p-virtualscroller-loader",{"p-component-overlay":!m.loadingTemplate}),r=e.createElement("i",{className:"p-virtualscroller-loading-icon pi pi-spinner pi-spin"});return m.loadingTemplate?r=N.map((function(e,t){return ge(t,g&&{numCols:x.cols})})):m.loaderIconTemplate&&(r=i.getJSXElement(m.loaderIconTemplate,{className:"p-virtualscroller-loading-icon",element:r,props:m})),e.createElement("div",{className:t},r)}return null}(),be=function(){var t=de().map(he),r=c("p-virtualscroller-content",{"p-virtualscroller-loading":H}),n=e.createElement("div",{ref:C,className:r},t);if(m.contentTemplate){var o={className:r,contentRef:function(e){return C.current=i.getRefElement(e)},spacerRef:function(e){return k.current=i.getRefElement(e)},stickyRef:function(e){return J.current=i.getRefElement(e)},items:de(),getItemOptions:function(e){return fe(e)},children:t,element:n,props:m,loading:H,getLoaderOptions:function(e,t){return me(e,t)},loadingTemplate:m.loadingTemplate,itemSize:m.itemSize,rows:H?m.loaderDisabled?N:[]:de(),columns:m.columns&&g||p?H&&m.loaderDisabled?g?N[0]:N:m.columns.slice(g?v.cols:v,g?T.cols:T):m.columns,vertical:d,horizontal:p,both:g};return i.getJSXElement(m.contentTemplate,o)}return n}(),ze=m.showSpacer?e.createElement("div",{ref:k,className:"p-virtualscroller-spacer"}):null;return e.createElement("div",a({ref:A,className:we,tabIndex:0,style:m.style},ye,{onScroll:function(e){m.onScroll&&m.onScroll(e),m.delay?(X.current&&clearTimeout(X.current),!H&&m.showLoader&&ce(e).isRangeChanged&&M(!0),X.current=setTimeout((function(){ae(e),!H||!m.showLoader||m.lazy&&void 0!==m.loading||M(!1)}),m.delay)):ae(e)}}),be,ze,Se)})));T.displayName="VirtualScroller";export{T as VirtualScroller};
+import*as e from"react";import{usePrevious as t,useResizeListener as r,useEventListener as n,useMountEffect as o,useUpdateEffect as l}from"primereact/hooks";import{ObjectUtils as i,DomHandler as s,classNames as c}from"primereact/utils";function u(){return u=Object.assign?Object.assign.bind():function(e){for(var t=1;t<arguments.length;t++){var r=arguments[t];for(var n in r)Object.prototype.hasOwnProperty.call(r,n)&&(e[n]=r[n])}return e},u.apply(this,arguments)}function a(e){return a="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e},a(e)}function f(e,t){if("object"!==a(e)||null===e)return e;var r=e[Symbol.toPrimitive];if(void 0!==r){var n=r.call(e,t||"default");if("object"!==a(n))return n;throw new TypeError("@@toPrimitive must return a primitive value.")}return("string"===t?String:Number)(e)}function m(e){var t=f(e,"string");return"symbol"===a(t)?t:String(t)}function p(e,t,r){return(t=m(t))in e?Object.defineProperty(e,t,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[t]=r,e}function d(e){if(Array.isArray(e))return e}function g(e,t){var r=null==e?null:"undefined"!=typeof Symbol&&e[Symbol.iterator]||e["@@iterator"];if(null!=r){var n,o,l,i,s=[],c=!0,u=!1;try{if(l=(r=r.call(e)).next,0===t){if(Object(r)!==r)return;c=!1}else for(;!(c=(n=l.call(r)).done)&&(s.push(n.value),s.length!==t);c=!0);}catch(e){u=!0,o=e}finally{try{if(!c&&null!=r.return&&(i=r.return(),Object(i)!==i))return}finally{if(u)throw o}}return s}}function h(e,t){(null==t||t>e.length)&&(t=e.length);for(var r=0,n=new Array(t);r<t;r++)n[r]=e[r];return n}function v(e,t){if(e){if("string"==typeof e)return h(e,t);var r=Object.prototype.toString.call(e).slice(8,-1);return"Object"===r&&e.constructor&&(r=e.constructor.name),"Map"===r||"Set"===r?Array.from(e):"Arguments"===r||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(r)?h(e,t):void 0}}function y(){throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}function w(e,t){return d(e)||g(e,t)||v(e,t)||y()}var S={defaultProps:{__TYPE:"VirtualScroller",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:!1,inline:!1,lazy:!1,disabled:!1,loaderDisabled:!1,columns:null,loading:void 0,autoSize:!1,showSpacer:!0,showLoader:!1,loadingTemplate:null,loaderIconTemplate:null,itemTemplate:null,contentTemplate:null,onScroll:null,onScrollIndexChange:null,onLazyLoad:null,children:void 0},getProps:function(e){return i.getMergedProps(e,S.defaultProps)},getOtherProps:function(e){return i.getDiffProps(e,S.defaultProps)}};function b(e,t){var r=Object.keys(e);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(e);t&&(n=n.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),r.push.apply(r,n)}return r}function z(e){for(var t=1;t<arguments.length;t++){var r=null!=arguments[t]?arguments[t]:{};t%2?b(Object(r),!0).forEach((function(t){p(e,t,r[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(r)):b(Object(r)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(r,t))}))}return e}var O=e.memo(e.forwardRef((function(a,f){var m=S.getProps(a),d=t(a)||{},g="vertical"===m.orientation,h="horizontal"===m.orientation,v="both"===m.orientation,y=w(e.useState(v?{rows:0,cols:0}:0),2),b=y[0],O=y[1],T=w(e.useState(v?{rows:0,cols:0}:0),2),I=T[0],x=T[1],R=w(e.useState(0),2),P=R[0],E=R[1],j=w(e.useState(v?{rows:0,cols:0}:0),2),L=j[0],M=j[1],H=w(e.useState(m.numToleratedItems),2),W=H[0],D=H[1],F=w(e.useState(m.loading||!1),2),N=F[0],A=F[1],C=w(e.useState([]),2),V=C[0],k=C[1],J=e.useRef(null),X=e.useRef(null),_=e.useRef(null),B=e.useRef(null),U=e.useRef(v?{top:0,left:0}:0),Y=e.useRef(null),$=e.useRef(null),q=e.useRef({}),G=e.useRef({}),K=e.useRef(null),Q=e.useRef(null),Z=e.useRef(null),ee=e.useRef(null),te=e.useRef(!1),re=e.useRef(null),ne=w(r({listener:function(e){return be()},when:!m.disabled}),1)[0],oe=w(n({target:"window",type:"orientationchange",listener:function(e){return be()},when:!m.disabled}),1)[0],le=function(){return J},ie=function(e){return Math.floor((e+4*W)/(m.step||1))},se=function(e){return!m.step||P!==ie(e)},ce=function(e){U.current=v?{top:0,left:0}:0,J.current&&J.current.scrollTo(e)},ue=function(e){var t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:"auto",r=me(),n=r.numToleratedItems,o=ge(),l=function(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:0,t=arguments.length>1?arguments[1]:void 0;return e<=t?0:e},i=function(e,t,r){return e*t+r},s=function(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:0,r=arguments.length>1&&void 0!==arguments[1]?arguments[1]:0;return ce({left:e,top:r,behavior:t})},c=v?{rows:0,cols:0}:0,u=!1;v?(s(i((c={rows:l(e[0],n[0]),cols:l(e[1],n[1])}).cols,m.itemSize[1],o.left),i(c.rows,m.itemSize[0],o.top)),u=b.rows!==c.rows||b.cols!==c.cols):(c=l(e,n),h?s(i(c,m.itemSize,o.left),0):s(0,i(c,m.itemSize,o.top)),u=b!==c),te.current=u,O(c)},ae=function(e,t){var r=arguments.length>2&&void 0!==arguments[2]?arguments[2]:"auto";if(t){var n=fe(),o=n.first,l=n.viewport,i=function(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:0,t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:0;return ce({left:e,top:t,behavior:r})},s="to-start"===t,c="to-end"===t;if(s){if(v)l.first.rows-o.rows>e[0]?i(l.first.cols*m.itemSize[1],(l.first.rows-1)*m.itemSize[0]):l.first.cols-o.cols>e[1]&&i((l.first.cols-1)*m.itemSize[1],l.first.rows*m.itemSize[0]);else if(l.first-o>e){var u=(l.first-1)*m.itemSize;h?i(u,0):i(0,u)}}else if(c)if(v)l.last.rows-o.rows<=e[0]+1?i(l.first.cols*m.itemSize[1],(l.first.rows+1)*m.itemSize[0]):l.last.cols-o.cols<=e[1]+1&&i((l.first.cols+1)*m.itemSize[1],l.first.rows*m.itemSize[0]);else if(l.last-o<=e+1){var a=(l.first+1)*m.itemSize;h?i(a,0):i(0,a)}}else ue(e,r)},fe=function(){var e=function(e,t){return Math.floor(e/(t||e))},t=b,r=0;if(J.current){var n=J.current,o=n.scrollTop,l=n.scrollLeft;if(v)r={rows:(t={rows:e(o,m.itemSize[0]),cols:e(l,m.itemSize[1])}).rows+L.rows,cols:t.cols+L.cols};else r=(t=e(h?l:o,m.itemSize))+L}return{first:b,last:I,viewport:{first:t,last:r}}},me=function(){var e=ge(),t=J.current?J.current.offsetWidth-e.left:0,r=J.current?J.current.offsetHeight-e.top:0,n=function(e,t){return Math.ceil(e/(t||e))},o=function(e){return Math.ceil(e/2)},l=v?{rows:n(r,m.itemSize[0]),cols:n(t,m.itemSize[1])}:n(h?t:r,m.itemSize);return{numItemsInViewport:l,numToleratedItems:W||(v?[o(l.rows),o(l.cols)]:o(l))}},pe=function(e){m.autoSize&&!e&&Promise.resolve().then((function(){if(X.current){X.current.style.minHeight=X.current.style.minWidth="auto",X.current.style.position="relative",J.current.style.contain="none";var e=[s.getWidth(J.current),s.getHeight(J.current)],t=e[0],r=e[1];(v||h)&&(J.current.style.width=(t<K.current?t:m.scrollWidth||K.current)+"px"),(v||g)&&(J.current.style.height=(r<Q.current?r:m.scrollHeight||Q.current)+"px"),X.current.style.minHeight=X.current.style.minWidth="",X.current.style.position="",J.current.style.contain=""}}))},de=function(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:0,t=arguments.length>1?arguments[1]:void 0;return m.items?Math.min(t?(m.columns||m.items[0]).length:m.items.length,e):0},ge=function(){if(X.current){var e=getComputedStyle(X.current),t=parseFloat(e.paddingLeft)+Math.max(parseFloat(e.left)||0,0),r=parseFloat(e.paddingRight)+Math.max(parseFloat(e.right)||0,0),n=parseFloat(e.paddingTop)+Math.max(parseFloat(e.top)||0,0),o=parseFloat(e.paddingBottom)+Math.max(parseFloat(e.bottom)||0,0);return{left:t,right:r,top:n,bottom:o,x:t+r,y:n+o}}return{left:0,right:0,top:0,bottom:0,x:0,y:0}},he=function(){if(J.current){var e=J.current.parentElement,t=m.scrollWidth||"".concat(J.current.offsetWidth||e.offsetWidth,"px"),r=m.scrollHeight||"".concat(J.current.offsetHeight||e.offsetHeight,"px"),n=function(e,t){return J.current.style[e]=t};v||h?(n("height",r),n("width",t)):n("height",r)}},ve=function(){var e=m.items;if(e){var t=ge(),r=function(e,t,r){var n=arguments.length>3&&void 0!==arguments[3]?arguments[3]:0;return G.current=z(z({},G.current),p({},"".concat(e),(t||[]).length*r+n+"px"))};v?(r("height",e,m.itemSize[0],t.y),r("width",m.columns||e[1],m.itemSize[1],t.x)):h?r("width",m.columns||e,m.itemSize,t.x):r("height",e,m.itemSize,t.y)}},ye=function(e){if(X.current&&!m.appendOnly){var t=e?e.first:b,r=function(e,t){return e*t},n=function(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:0,t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:0;B.current&&(B.current.style.top="-".concat(t,"px")),q.current=z(z({},q.current),{transform:"translate3d(".concat(e,"px, ").concat(t,"px, 0)")})};if(v)n(r(t.cols,m.itemSize[1]),r(t.rows,m.itemSize[0]));else{var o=r(t,m.itemSize);h?n(o,0):n(0,o)}}},we=function(e){var t=e.target,r=ge(),n=function(e,t){return e?e>t?e-t:e:0},o=function(e,t){return Math.floor(e/(t||e))},l=function(e,t,r,n,o,l){return e<=o?o:l?r-n-o:t+o-1},i=function(e,t,r,n,o,l,i){return e<=l?0:Math.max(0,i?e<t?r:e-l:e>t?r:e-2*l)},s=function(e,t,r,n,o,l){var i=t+n+2*o;return e>=o&&(i+=o+1),de(i,l)},c=n(t.scrollTop,r.top),u=n(t.scrollLeft,r.left),a=v?{rows:0,cols:0}:0,f=I,p=!1,d=U.current;if(v){var g=U.current.top<=c,y=U.current.left<=u;if(!m.appendOnly||m.appendOnly&&(g||y)){var w={rows:o(c,m.itemSize[0]),cols:o(u,m.itemSize[1])},S={rows:l(w.rows,b.rows,I.rows,L.rows,W[0],g),cols:l(w.cols,b.cols,I.cols,L.cols,W[1],y)};a={rows:i(w.rows,S.rows,b.rows,0,0,W[0],g),cols:i(w.cols,S.cols,b.cols,0,0,W[1],y)},f={rows:s(w.rows,a.rows,0,L.rows,W[0]),cols:s(w.cols,a.cols,0,L.cols,W[1],!0)},p=a.rows!==b.rows||f.rows!==I.rows||a.cols!==b.cols||f.cols!==I.cols||te.current,d={top:c,left:u}}}else{var z=h?u:c,O=U.current<=z;if(!m.appendOnly||m.appendOnly&&O){var T=o(z,m.itemSize);f=s(T,a=i(T,l(T,b,I,L,W,O),b,0,0,W,O),0,L,W),p=a!==b||f!==I||te.current,d=z}}return{first:a,last:f,isRangeChanged:p,scrollPos:d}},Se=function(e){var t=we(e),r=t.first,n=t.last,o=t.scrollPos;if(t.isRangeChanged){var l={first:r,last:n};if(ye(l),O(r),x(n),U.current=o,m.onScrollIndexChange&&m.onScrollIndexChange(l),m.lazy&&se(r)){var i={first:m.step?Math.min(ie(r)*m.step,m.items.length-m.step):r,last:Math.min(m.step?(ie(r)+1)*m.step:n,m.items.length)};(!re.current||re.current.first!==i.first||re.current.last!==i.last)&&m.onLazyLoad&&m.onLazyLoad(i),re.current=i}}},be=function(){$.current&&clearTimeout($.current),$.current=setTimeout((function(){if(J.current){var e=[s.getWidth(J.current),s.getHeight(J.current)],t=e[0],r=e[1],n=t!==K.current,o=r!==Q.current;(v?n||o:h?n:!!g&&o)&&(D(m.numToleratedItems),K.current=t,Q.current=r,Z.current=s.getWidth(X.current),ee.current=s.getHeight(X.current))}}),m.resizeDelay)},ze=function(e){var t=(m.items||[]).length,r=v?b.rows+e:b+e;return{index:r,count:t,first:0===r,last:r===t-1,even:r%2==0,odd:r%2!=0,props:m}},Oe=function(e,t){var r=V.length;return z({index:e,count:r,first:0===e,last:e===r-1,even:e%2==0,odd:e%2!=0,props:m},t)},Te=function(){var e=m.items;return e&&!N?v?e.slice(m.appendOnly?0:b.rows,I.rows).map((function(e){return m.columns?e:e.slice(m.appendOnly?0:b.cols,I.cols)})):h&&m.columns?e:e.slice(m.appendOnly?0:b,I):[]},Ie=function(){var e,t,r,n,o;m.disabled||(he(),e=me(),t=e.numItemsInViewport,r=e.numToleratedItems,n=function(e,t,r){var n=arguments.length>3&&void 0!==arguments[3]&&arguments[3];return de(e+t+(e<r?2:3)*r,n)},o=v?{rows:n(b.rows,t.rows,r[0]),cols:n(b.cols,t.cols,r[1],!0)}:n(b,t,r),M(t),D(r),x(o),m.showLoader&&k(v?Array.from({length:t.rows}).map((function(){return Array.from({length:t.cols})})):Array.from({length:t})),m.lazy&&Promise.resolve().then((function(){re.current={first:m.step?v?{rows:0,cols:b.cols}:0:b,last:Math.min(m.step?m.step:o,m.items.length)},m.onLazyLoad&&m.onLazyLoad(re.current)})),ve())};o((function(){J.current&&s.isVisible(J.current)&&(X.current=X.current||X.current||s.findSingle(J.current,".p-virtualscroller-content"),Ie(),ne(),oe(),K.current=s.getWidth(J.current),Q.current=s.getHeight(J.current),Z.current=s.getWidth(X.current),ee.current=s.getHeight(X.current))})),l((function(){Ie()}),[m.itemSize,m.scrollHeight,m.scrollWidth]),l((function(){m.numToleratedItems!==W&&D(m.numToleratedItems)}),[m.numToleratedItems]),l((function(){m.numToleratedItems===W&&Ie()}),[W]),l((function(){d.items&&d.items.length===(m.items||[]).length||Ie();var e=N;m.lazy&&d.loading!==m.loading&&m.loading!==N&&(A(m.loading),e=m.loading),pe(e)})),l((function(){U.current=v?{top:0,left:0}:0}),[m.orientation]),e.useImperativeHandle(f,(function(){return{props:m,getElementRef:le,scrollTo:ce,scrollToIndex:ue,scrollInView:ae,getRenderedRange:fe}}));var xe=function(t){var r=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{},n=Oe(t,r),o=i.getJSXElement(m.loadingTemplate,n);return e.createElement(e.Fragment,{key:t},o)},Re=function(t,r){var n=ze(r),o=i.getJSXElement(m.itemTemplate,t,n);return e.createElement(e.Fragment,{key:n.index},o)};if(m.disabled){var Pe=i.getJSXElement(m.contentTemplate,{items:m.items,rows:m.items,columns:m.columns});return e.createElement(e.Fragment,null,m.children,Pe)}var Ee=S.getOtherProps(m),je=c("p-virtualscroller",{"p-virtualscroller-inline":m.inline,"p-virtualscroller-both p-both-scroll":v,"p-virtualscroller-horizontal p-horizontal-scroll":h},m.className),Le=function(){if(!m.loaderDisabled&&m.showLoader&&N){var t=c("p-virtualscroller-loader",{"p-component-overlay":!m.loadingTemplate}),r=e.createElement("i",{className:"p-virtualscroller-loading-icon pi pi-spinner pi-spin"});return m.loadingTemplate?r=V.map((function(e,t){return xe(t,v&&{numCols:L.cols})})):m.loaderIconTemplate&&(r=i.getJSXElement(m.loaderIconTemplate,{className:"p-virtualscroller-loading-icon",element:r,props:m})),e.createElement("div",{className:t},r)}return null}(),Me=function(){var t=Te().map(Re),r=c("p-virtualscroller-content",{"p-virtualscroller-loading":N}),n=e.createElement("div",{ref:X,style:q.current,className:r},t);if(m.contentTemplate){var o={style:q.current,className:r,spacerStyle:G.current,contentRef:function(e){return X.current=i.getRefElement(e)},spacerRef:function(e){return _.current=i.getRefElement(e)},stickyRef:function(e){return B.current=i.getRefElement(e)},items:Te(),getItemOptions:function(e){return ze(e)},children:t,element:n,props:m,loading:N,getLoaderOptions:function(e,t){return Oe(e,t)},loadingTemplate:m.loadingTemplate,itemSize:m.itemSize,rows:N?m.loaderDisabled?V:[]:Te(),columns:m.columns&&v||h?N&&m.loaderDisabled?v?V[0]:V:m.columns.slice(v?b.cols:b,v?I.cols:I):m.columns,vertical:g,horizontal:h,both:v};return i.getJSXElement(m.contentTemplate,o)}return n}(),He=m.showSpacer?e.createElement("div",{ref:_,style:G.current,className:"p-virtualscroller-spacer"}):null;return e.createElement("div",u({ref:J,className:je,tabIndex:m.tabIndex,style:m.style},Ee,{onScroll:function(e){m.onScroll&&m.onScroll(e),m.delay?(Y.current&&clearTimeout(Y.current),se(b)&&(!N&&m.showLoader&&(we(e).isRangeChanged||m.step&&se(b))&&A(!0),Y.current=setTimeout((function(){Se(e),!N||!m.showLoader||m.lazy&&void 0!==m.loading||(A(!1),E(ie(b)))}),m.delay))):Se(e)}}),Me,He,Le)})));O.displayName="VirtualScroller";export{O as VirtualScroller};