@legendapp/list 2.1.0-beta.1 → 2.1.0-beta.2

package/index.mjs

@@ -33,7 +33,10 @@ function StateProvider({ children }) {
       ["stylePaddingTop", 0],
       ["headerSize", 0],
       ["numContainers", 0],
-      ["totalSize", 0]
+      ["activeStickyIndex", void 0],
+      ["totalSize", 0],
+      ["scrollAdjustPending", 0],
+      ["scrollingTo", void 0]
     ]),
     viewRefs: /* @__PURE__ */ new Map()
   }));
@@ -196,8 +199,11 @@ var PositionViewState = typedMemo(function PositionView({
   ...rest
 }) {
   const [position = POSITION_OUT_OF_VIEW] = useArr$([`containerPosition${id}`]);
-  const base = Array.isArray(style) ? Object.assign({}, ...style) : style;
-  const combinedStyle = horizontal ? { ...base, left: position } : { ...base, top: position };
+  const base = {
+    contain: "paint layout style"
+  };
+  const composed = Array.isArray(style) ? Object.assign({}, ...style) : style;
+  const combinedStyle = horizontal ? { ...base, ...composed, left: position } : { ...base, ...composed, top: position };
   return /* @__PURE__ */ React3.createElement("div", { ref: refView, style: combinedStyle, ...rest });
 });
 var PositionViewSticky = typedMemo(function PositionViewSticky2({
@@ -206,19 +212,42 @@ var PositionViewSticky = typedMemo(function PositionViewSticky2({
   style,
   refView,
   index,
+  stickyOffset,
+  animatedScrollY: _animatedScrollY,
+  children,
   ...rest
 }) {
-  const [position = POSITION_OUT_OF_VIEW, _headerSize] = useArr$([`containerPosition${id}`, "headerSize"]);
+  const [position = POSITION_OUT_OF_VIEW, headerSize = 0, activeStickyIndex] = useArr$([
+    `containerPosition${id}`,
+    "headerSize",
+    "activeStickyIndex"
+  ]);
+  const base = {
+    contain: "paint layout style"
+  };
+  const composed = React3.useMemo(
+    () => {
+      var _a3;
+      return (_a3 = Array.isArray(style) ? Object.assign({}, ...style) : style) != null ? _a3 : {};
+    },
+    [style]
+  );
   const viewStyle = React3.useMemo(() => {
-    const base = Array.isArray(style) ? Object.assign({}, ...style) : style;
-    const axisStyle = horizontal ? { transform: `translateX(${position}px)` } : { top: position };
-    return {
-      ...base,
-      zIndex: index + 1e3,
-      ...axisStyle
-    };
-  }, [style, position, horizontal, index]);
-  return /* @__PURE__ */ React3.createElement("div", { ref: refView, style: viewStyle, ...rest });
+    var _a3;
+    const styleBase = { ...base, ...composed };
+    delete styleBase.transform;
+    const offset = (_a3 = stickyOffset != null ? stickyOffset : headerSize) != null ? _a3 : 0;
+    const isActive = activeStickyIndex === index;
+    styleBase.position = isActive ? "sticky" : "absolute";
+    styleBase.zIndex = index + 1e3;
+    if (horizontal) {
+      styleBase.left = isActive ? offset : position;
+    } else {
+      styleBase.top = isActive ? offset : position;
+    }
+    return styleBase;
+  }, [composed, horizontal, position, index, stickyOffset, headerSize, activeStickyIndex]);
+  return /* @__PURE__ */ React3.createElement("div", { ref: refView, style: viewStyle, ...rest }, children);
 });
 var PositionView2 = PositionViewState;
 
@@ -970,10 +999,11 @@ function PaddingDevMode() {
 function useValueListener$(key, callback) {
   const ctx = useStateContext();
   useLayoutEffect(() => {
-    listen$(ctx, key, (value) => {
+    const unsubscribe = listen$(ctx, key, (value) => {
       callback(value);
     });
-  }, []);
+    return unsubscribe;
+  }, [callback, ctx, key]);
 }
 
 // src/components/ScrollAdjust.tsx
@@ -1139,12 +1169,11 @@ function calculateOffsetForIndex(ctx, state, index) {
 }
 
 // src/utils/getItemSize.ts
-function getItemSize(state, key, index, data, useAverageSize) {
+function getItemSize(ctx, state, key, index, data, useAverageSize) {
   var _a3, _b;
   const {
     sizesKnown,
     sizes,
-    scrollingTo,
     averageSizes,
     props: { estimatedItemSize, getEstimatedItemSize, getFixedItemSize, getItemType }
   } = state;
@@ -1154,6 +1183,7 @@ function getItemSize(state, key, index, data, useAverageSize) {
   }
   let size;
   const itemType = getItemType ? (_a3 = getItemType(data, index)) != null ? _a3 : "" : "";
+  const scrollingTo = peek$(ctx, "scrollingTo");
   if (getFixedItemSize) {
     size = getFixedItemSize(index, data, itemType);
     if (size !== void 0) {
@@ -1180,41 +1210,211 @@ function getItemSize(state, key, index, data, useAverageSize) {
 }
 
 // src/core/calculateOffsetWithOffsetPosition.ts
-function calculateOffsetWithOffsetPosition(state, offsetParam, params) {
+function calculateOffsetWithOffsetPosition(ctx, state, offsetParam, params) {
   const { index, viewOffset, viewPosition } = params;
   let offset = offsetParam;
   if (viewOffset) {
     offset -= viewOffset;
   }
   if (viewPosition !== void 0 && index !== void 0) {
-    offset -= viewPosition * (state.scrollLength - getItemSize(state, getId(state, index), index, state.props.data[index]));
+    offset -= viewPosition * (state.scrollLength - getItemSize(ctx, state, getId(state, index), index, state.props.data[index]));
   }
   return offset;
 }
 
+// src/utils/checkThreshold.ts
+var HYSTERESIS_MULTIPLIER = 1.3;
+var checkThreshold = (distance, atThreshold, threshold, wasReached, snapshot, context, onReached, setSnapshot) => {
+  const absDistance = Math.abs(distance);
+  const within = atThreshold || threshold > 0 && absDistance <= threshold;
+  const updateSnapshot = () => {
+    setSnapshot == null ? void 0 : setSnapshot({
+      atThreshold,
+      contentSize: context.contentSize,
+      dataLength: context.dataLength,
+      scrollPosition: context.scrollPosition
+    });
+  };
+  if (!wasReached) {
+    if (!within) {
+      return false;
+    }
+    onReached == null ? void 0 : onReached(distance);
+    updateSnapshot();
+    return true;
+  }
+  const reset = !atThreshold && threshold > 0 && absDistance >= threshold * HYSTERESIS_MULTIPLIER || !atThreshold && threshold <= 0 && absDistance > 0;
+  if (reset) {
+    setSnapshot == null ? void 0 : setSnapshot(void 0);
+    return false;
+  }
+  if (within) {
+    const changed = !snapshot || snapshot.atThreshold !== atThreshold || snapshot.contentSize !== context.contentSize || snapshot.dataLength !== context.dataLength;
+    if (changed) {
+      onReached == null ? void 0 : onReached(distance);
+      updateSnapshot();
+    }
+  }
+  return true;
+};
+
+// src/utils/checkAtBottom.ts
+function checkAtBottom(ctx, state) {
+  var _a3;
+  if (!state) {
+    return;
+  }
+  const {
+    queuedInitialLayout,
+    scrollLength,
+    scroll,
+    maintainingScrollAtEnd,
+    props: { maintainScrollAtEndThreshold, onEndReachedThreshold }
+  } = state;
+  const contentSize = getContentSize(ctx);
+  if (contentSize > 0 && queuedInitialLayout && !maintainingScrollAtEnd) {
+    const distanceFromEnd = contentSize - scroll - scrollLength;
+    const isContentLess = contentSize < scrollLength;
+    state.isAtEnd = isContentLess || distanceFromEnd < scrollLength * maintainScrollAtEndThreshold;
+    state.isEndReached = checkThreshold(
+      distanceFromEnd,
+      isContentLess,
+      onEndReachedThreshold * scrollLength,
+      state.isEndReached,
+      state.endReachedSnapshot,
+      {
+        contentSize,
+        dataLength: (_a3 = state.props.data) == null ? void 0 : _a3.length,
+        scrollPosition: scroll
+      },
+      (distance) => {
+        var _a4, _b;
+        return (_b = (_a4 = state.props).onEndReached) == null ? void 0 : _b.call(_a4, { distanceFromEnd: distance });
+      },
+      (snapshot) => {
+        state.endReachedSnapshot = snapshot;
+      }
+    );
+  }
+}
+
+// src/utils/checkAtTop.ts
+function checkAtTop(state) {
+  var _a3;
+  if (!state) {
+    return;
+  }
+  const {
+    scrollLength,
+    scroll,
+    props: { onStartReachedThreshold }
+  } = state;
+  const distanceFromTop = scroll;
+  state.isAtStart = distanceFromTop <= 0;
+  state.isStartReached = checkThreshold(
+    distanceFromTop,
+    false,
+    onStartReachedThreshold * scrollLength,
+    state.isStartReached,
+    state.startReachedSnapshot,
+    {
+      contentSize: state.totalSize,
+      dataLength: (_a3 = state.props.data) == null ? void 0 : _a3.length,
+      scrollPosition: scroll
+    },
+    (distance) => {
+      var _a4, _b;
+      return (_b = (_a4 = state.props).onStartReached) == null ? void 0 : _b.call(_a4, { distanceFromStart: distance });
+    },
+    (snapshot) => {
+      state.startReachedSnapshot = snapshot;
+    }
+  );
+}
+
+// src/core/onScroll.ts
+function onScroll(ctx, state, event) {
+  var _a3, _b, _c;
+  const {
+    scrollProcessingEnabled,
+    props: { onScroll: onScrollProp }
+  } = state;
+  if (scrollProcessingEnabled === false) {
+    return;
+  }
+  if (((_b = (_a3 = event.nativeEvent) == null ? void 0 : _a3.contentSize) == null ? void 0 : _b.height) === 0 && ((_c = event.nativeEvent.contentSize) == null ? void 0 : _c.width) === 0) {
+    return;
+  }
+  const newScroll = event.nativeEvent.contentOffset[state.props.horizontal ? "x" : "y"];
+  state.scrollPending = newScroll;
+  updateScroll(ctx, state, newScroll);
+  onScrollProp == null ? void 0 : onScrollProp(event);
+}
+function updateScroll(ctx, state, newScroll, forceUpdate) {
+  const scrollingTo = peek$(ctx, "scrollingTo");
+  state.hasScrolled = true;
+  state.lastBatchingAction = Date.now();
+  const currentTime = Date.now();
+  const adjust = state.scrollAdjustHandler.getAdjust();
+  const lastHistoryAdjust = state.lastScrollAdjustForHistory;
+  const adjustChanged = lastHistoryAdjust !== void 0 && Math.abs(adjust - lastHistoryAdjust) > 0.1;
+  if (adjustChanged) {
+    state.scrollHistory.length = 0;
+  }
+  state.lastScrollAdjustForHistory = adjust;
+  if (scrollingTo === void 0 && !(state.scrollHistory.length === 0 && newScroll === state.scroll)) {
+    if (!adjustChanged) {
+      state.scrollHistory.push({ scroll: newScroll, time: currentTime });
+    }
+  }
+  if (state.scrollHistory.length > 5) {
+    state.scrollHistory.shift();
+  }
+  state.scrollPrev = state.scroll;
+  state.scrollPrevTime = state.scrollTime;
+  state.scroll = newScroll;
+  state.scrollTime = currentTime;
+  const ignoreScrollFromMVCP = state.ignoreScrollFromMVCP;
+  if (ignoreScrollFromMVCP && !scrollingTo) {
+    const { lt, gt } = ignoreScrollFromMVCP;
+    if (lt && newScroll < lt || gt && newScroll > gt) {
+      state.ignoreScrollFromMVCPIgnored = true;
+      return;
+    }
+  }
+  if (state.dataChangeNeedsScrollUpdate || Math.abs(state.scroll - state.scrollPrev) > 2) {
+    state.ignoreScrollFromMVCPIgnored = false;
+    calculateItemsInView(ctx, state, { doMVCP: scrollingTo !== void 0 });
+    checkAtBottom(ctx, state);
+    checkAtTop(state);
+    state.dataChangeNeedsScrollUpdate = false;
+  }
+}
+
 // src/core/finishScrollTo.ts
-var finishScrollTo = (state) => {
+function finishScrollTo(ctx, state) {
   if (state) {
-    state.scrollingTo = void 0;
+    set$(ctx, "scrollingTo", void 0);
     state.scrollHistory.length = 0;
   }
-};
+}
 
 // src/core/scrollTo.ts
-function scrollTo(state, params = {}) {
+function scrollTo(ctx, state, params) {
   var _a3;
-  const { animated, noScrollingTo, isInitialScroll } = params;
+  const { noScrollingTo, ...scrollTarget } = params;
+  const { animated, isInitialScroll, offset: scrollTargetOffset } = scrollTarget;
   const {
     refScroller,
     props: { horizontal }
   } = state;
-  const offset = calculateOffsetWithOffsetPosition(state, params.offset, params);
+  const offset = calculateOffsetWithOffsetPosition(ctx, state, scrollTargetOffset, scrollTarget);
   state.scrollHistory.length = 0;
   if (!noScrollingTo) {
-    state.scrollingTo = params;
+    set$(ctx, "scrollingTo", scrollTarget);
   }
   state.scrollPending = offset;
-  if (!params.isInitialScroll || Platform.OS === "android") {
+  if (!isInitialScroll || Platform.OS === "android") {
     (_a3 = refScroller.current) == null ? void 0 : _a3.scrollTo({
       animated: !!animated,
       x: horizontal ? offset : 0,
@@ -1223,7 +1423,7 @@ function scrollTo(state, params = {}) {
   }
   if (!animated) {
     state.scroll = offset;
-    setTimeout(() => finishScrollTo(state), 100);
+    setTimeout(() => finishScrollTo(ctx, state), 100);
     if (isInitialScroll) {
       setTimeout(() => {
         state.initialScroll = void 0;
@@ -1245,24 +1445,6 @@ function requestAdjust(ctx, state, positionDiff, dataChanged) {
     const didLayout = peek$(ctx, "containersDidLayout");
     if (didLayout) {
       doit();
-      const threshold = state.scroll - positionDiff / 2;
-      if (!state.ignoreScrollFromMVCP) {
-        state.ignoreScrollFromMVCP = {};
-      }
-      if (positionDiff > 0) {
-        state.ignoreScrollFromMVCP.lt = threshold;
-      } else {
-        state.ignoreScrollFromMVCP.gt = threshold;
-      }
-      if (state.ignoreScrollFromMVCPTimeout) {
-        clearTimeout(state.ignoreScrollFromMVCPTimeout);
-      }
-      state.ignoreScrollFromMVCPTimeout = setTimeout(
-        () => {
-          state.ignoreScrollFromMVCP = void 0;
-        },
-        100
-      );
     } else {
       requestAnimationFrame(doit);
     }
@@ -1274,9 +1456,9 @@ function prepareMVCP(ctx, state, dataChanged) {
   const {
     idsInView,
     positions,
-    scrollingTo,
     props: { maintainVisibleContentPosition }
   } = state;
+  const scrollingTo = peek$(ctx, "scrollingTo");
   let prevPosition;
   let targetId;
   const idsInViewWithPositions = [];
@@ -1352,7 +1534,7 @@ function prepareColumnStartState(ctx, state, startIndex, useAverageSize) {
     const prevId = state.idCache[prevIndex];
     const prevPosition = (_a3 = state.positions.get(prevId)) != null ? _a3 : 0;
     const prevRowStart = findRowStartIndex(state, numColumns, prevIndex);
-    const prevRowHeight = calculateRowMaxSize(state, prevRowStart, prevIndex, useAverageSize);
+    const prevRowHeight = calculateRowMaxSize(ctx, state, prevRowStart, prevIndex, useAverageSize);
     currentRowTop = prevPosition + prevRowHeight;
   }
   return {
@@ -1375,7 +1557,7 @@ function findRowStartIndex(state, numColumns, index) {
   }
   return rowStart;
 }
-function calculateRowMaxSize(state, startIndex, endIndex, useAverageSize) {
+function calculateRowMaxSize(ctx, state, startIndex, endIndex, useAverageSize) {
   if (endIndex < startIndex) {
     return 0;
   }
@@ -1389,7 +1571,7 @@ function calculateRowMaxSize(state, startIndex, endIndex, useAverageSize) {
       continue;
     }
     const id = state.idCache[i];
-    const size = getItemSize(state, id, i, data[i], useAverageSize);
+    const size = getItemSize(ctx, state, id, i, data[i], useAverageSize);
     if (size > maxSize) {
       maxSize = size;
     }
@@ -1445,7 +1627,7 @@ function updateTotalSize(ctx, state) {
     if (lastId !== void 0) {
       const lastPosition = positions.get(lastId);
       if (lastPosition !== void 0) {
-        const lastSize = getItemSize(state, lastId, data.length - 1, data[data.length - 1]);
+        const lastSize = getItemSize(ctx, state, lastId, data.length - 1, data[data.length - 1]);
         if (lastSize !== void 0) {
           const totalSize = lastPosition + lastSize;
           addTotalSize(ctx, state, null, totalSize);
@@ -1503,6 +1685,7 @@ function updateItemPositions(ctx, state, dataChanged, { startIndex, scrollBottom
   const data = state.props.data;
   const dataLength = data.length;
   const numColumns = peek$(ctx, "numColumns");
+  const scrollingTo = peek$(ctx, "scrollingTo");
   const hasColumns = numColumns > 1;
   const indexByKeyForChecking = IS_DEV ? /* @__PURE__ */ new Map() : void 0;
   const maxVisibleArea = scrollBottomBuffered + 1e3;
@@ -1524,7 +1707,7 @@ function updateItemPositions(ctx, state, dataChanged, { startIndex, scrollBottom
       const prevIndex = startIndex - 1;
       const prevId = getId(state, prevIndex);
       const prevPosition = (_a3 = positions.get(prevId)) != null ? _a3 : 0;
-      const prevSize = (_b = sizesKnown.get(prevId)) != null ? _b : getItemSize(state, prevId, prevIndex, data[prevIndex], useAverageSize);
+      const prevSize = (_b = sizesKnown.get(prevId)) != null ? _b : getItemSize(ctx, state, prevId, prevIndex, data[prevIndex], useAverageSize);
       currentRowTop = prevPosition + prevSize;
     }
   }
@@ -1536,12 +1719,12 @@ function updateItemPositions(ctx, state, dataChanged, { startIndex, scrollBottom
       didBreakEarly = true;
       break;
     }
-    if (breakAt === void 0 && !dataChanged && currentRowTop > maxVisibleArea) {
+    if (breakAt === void 0 && !scrollingTo && !dataChanged && currentRowTop > maxVisibleArea) {
       const itemsPerRow = hasColumns ? numColumns : 1;
       breakAt = i + itemsPerRow + 10;
     }
     const id = (_c = idCache[i]) != null ? _c : getId(state, i);
-    const size = (_d = sizesKnown.get(id)) != null ? _d : getItemSize(state, id, i, data[i], useAverageSize);
+    const size = (_d = sizesKnown.get(id)) != null ? _d : getItemSize(ctx, state, id, i, data[i], useAverageSize);
     if (IS_DEV && needsIndexByKey) {
       if (indexByKeyForChecking.has(id)) {
         console.error(
@@ -1965,7 +2148,7 @@ function scrollToIndex(ctx, state, { index, viewOffset = 0, animated = true, vie
     viewPosition = 1;
   }
   state.scrollForNextCalculateItemsInView = void 0;
-  scrollTo(state, {
+  scrollTo(ctx, state, {
     animated,
     index,
     offset: firstIndexOffset,
@@ -1974,82 +2157,6 @@ function scrollToIndex(ctx, state, { index, viewOffset = 0, animated = true, vie
   });
 }
 
-// src/utils/checkThreshold.ts
-var HYSTERESIS_MULTIPLIER = 1.3;
-var checkThreshold = (distance, atThreshold, threshold, wasReached, snapshot, context, onReached, setSnapshot) => {
-  const absDistance = Math.abs(distance);
-  const within = atThreshold || threshold > 0 && absDistance <= threshold;
-  const updateSnapshot = () => {
-    setSnapshot == null ? void 0 : setSnapshot({
-      atThreshold,
-      contentSize: context.contentSize,
-      dataLength: context.dataLength,
-      scrollPosition: context.scrollPosition
-    });
-  };
-  if (!wasReached) {
-    if (!within) {
-      return false;
-    }
-    onReached == null ? void 0 : onReached(distance);
-    updateSnapshot();
-    return true;
-  }
-  const reset = !atThreshold && threshold > 0 && absDistance >= threshold * HYSTERESIS_MULTIPLIER || !atThreshold && threshold <= 0 && absDistance > 0;
-  if (reset) {
-    setSnapshot == null ? void 0 : setSnapshot(void 0);
-    return false;
-  }
-  if (within) {
-    const changed = !snapshot || snapshot.atThreshold !== atThreshold || snapshot.contentSize !== context.contentSize || snapshot.dataLength !== context.dataLength;
-    if (changed) {
-      onReached == null ? void 0 : onReached(distance);
-      updateSnapshot();
-    }
-  }
-  return true;
-};
-
-// src/utils/checkAtBottom.ts
-function checkAtBottom(ctx, state) {
-  var _a3;
-  if (!state) {
-    return;
-  }
-  const {
-    queuedInitialLayout,
-    scrollLength,
-    scroll,
-    maintainingScrollAtEnd,
-    props: { maintainScrollAtEndThreshold, onEndReachedThreshold }
-  } = state;
-  const contentSize = getContentSize(ctx);
-  if (contentSize > 0 && queuedInitialLayout && !maintainingScrollAtEnd) {
-    const distanceFromEnd = contentSize - scroll - scrollLength;
-    const isContentLess = contentSize < scrollLength;
-    state.isAtEnd = isContentLess || distanceFromEnd < scrollLength * maintainScrollAtEndThreshold;
-    state.isEndReached = checkThreshold(
-      distanceFromEnd,
-      isContentLess,
-      onEndReachedThreshold * scrollLength,
-      state.isEndReached,
-      state.endReachedSnapshot,
-      {
-        scrollPosition: scroll,
-        contentSize,
-        dataLength: (_a3 = state.props.data) == null ? void 0 : _a3.length
-      },
-      (distance) => {
-        var _a4, _b;
-        return (_b = (_a4 = state.props).onEndReached) == null ? void 0 : _b.call(_a4, { distanceFromEnd: distance });
-      },
-      (snapshot) => {
-        state.endReachedSnapshot = snapshot;
-      }
-    );
-  }
-}
-
 // src/utils/setDidLayout.ts
 function setDidLayout(ctx, state) {
   const {
@@ -2129,7 +2236,7 @@ function handleStickyRecycling(ctx, state, stickyArray, scroll, scrollBuffer, cu
       const currentId = (_b = state.idCache[itemIndex]) != null ? _b : getId(state, itemIndex);
       if (currentId) {
         const currentPos = state.positions.get(currentId);
-        const currentSize = (_c = state.sizes.get(currentId)) != null ? _c : getItemSize(state, currentId, itemIndex, state.props.data[itemIndex]);
+        const currentSize = (_c = state.sizes.get(currentId)) != null ? _c : getItemSize(ctx, state, currentId, itemIndex, state.props.data[itemIndex]);
         shouldRecycle = currentPos !== void 0 && scroll > currentPos + currentSize + scrollBuffer * 3;
       }
     }
@@ -2140,7 +2247,7 @@ function handleStickyRecycling(ctx, state, stickyArray, scroll, scrollBuffer, cu
 }
 function calculateItemsInView(ctx, state, params = {}) {
   unstable_batchedUpdates(() => {
-    var _a3, _b, _c, _d, _e, _f, _g, _h, _i;
+    var _a3, _b, _c, _d, _e, _f, _g, _h, _i, _j;
     const {
       columns,
       containerItemKeys,
@@ -2173,13 +2280,15 @@ function calculateItemsInView(ctx, state, params = {}) {
     let { scroll: scrollState } = state;
     if (!queuedInitialLayout && initialScroll) {
       const updatedOffset = calculateOffsetWithOffsetPosition(
+        ctx,
         state,
         calculateOffsetForIndex(ctx, state, initialScroll.index),
         initialScroll
       );
       scrollState = updatedOffset;
     }
-    const scrollAdjustPad = -topPad;
+    const scrollAdjustPending = (_a3 = peek$(ctx, "scrollAdjustPending")) != null ? _a3 : 0;
+    const scrollAdjustPad = scrollAdjustPending - topPad;
     let scroll = scrollState + scrollExtra + scrollAdjustPad;
     if (scroll + scrollLength > totalSize) {
       scroll = Math.max(0, totalSize - scrollLength);
@@ -2192,6 +2301,7 @@ function calculateItemsInView(ctx, state, params = {}) {
     const currentStickyIdx = stickyIndicesArr.length > 0 ? findCurrentStickyIndex(stickyIndicesArr, scroll, state) : -1;
     const nextActiveStickyIndex = currentStickyIdx >= 0 ? stickyIndicesArr[currentStickyIdx] : void 0;
     state.activeStickyIndex = nextActiveStickyIndex;
+    set$(ctx, "activeStickyIndex", nextActiveStickyIndex);
     let scrollBufferTop = scrollBuffer;
     let scrollBufferBottom = scrollBuffer;
     if (speed > 0 || speed === 0 && scroll < Math.max(50, scrollBuffer)) {
@@ -2216,7 +2326,7 @@ function calculateItemsInView(ctx, state, params = {}) {
       idCache.length = 0;
       positions.clear();
     }
-    const startIndex = dataChanged ? 0 : (_a3 = minIndexSizeChanged != null ? minIndexSizeChanged : state.startBuffered) != null ? _a3 : 0;
+    const startIndex = dataChanged ? 0 : (_b = minIndexSizeChanged != null ? minIndexSizeChanged : state.startBuffered) != null ? _b : 0;
     updateItemPositions(ctx, state, dataChanged, { scrollBottomBuffered, startIndex });
     if (minIndexSizeChanged !== void 0) {
       state.minIndexSizeChanged = void 0;
@@ -2229,9 +2339,9 @@ function calculateItemsInView(ctx, state, params = {}) {
     let endBuffered = null;
     let loopStart = !dataChanged && startBufferedIdOrig ? indexByKey.get(startBufferedIdOrig) || 0 : 0;
     for (let i = loopStart; i >= 0; i--) {
-      const id = (_b = idCache[i]) != null ? _b : getId(state, i);
+      const id = (_c = idCache[i]) != null ? _c : getId(state, i);
       const top = positions.get(id);
-      const size = (_c = sizes.get(id)) != null ? _c : getItemSize(state, id, i, data[i]);
+      const size = (_d = sizes.get(id)) != null ? _d : getItemSize(ctx, state, id, i, data[i]);
       const bottom = top + size;
       if (bottom > scroll - scrollBuffer) {
         loopStart = i;
@@ -2257,8 +2367,8 @@ function calculateItemsInView(ctx, state, params = {}) {
     let firstFullyOnScreenIndex;
     const dataLength = data.length;
     for (let i = Math.max(0, loopStart); i < dataLength && (!foundEnd || i <= maxIndexRendered); i++) {
-      const id = (_d = idCache[i]) != null ? _d : getId(state, i);
-      const size = (_e = sizes.get(id)) != null ? _e : getItemSize(state, id, i, data[i]);
+      const id = (_e = idCache[i]) != null ? _e : getId(state, i);
+      const size = (_f = sizes.get(id)) != null ? _f : getItemSize(ctx, state, id, i, data[i]);
       const top = positions.get(id);
       if (!foundEnd) {
         if (startNoBuffer === null && top + size > scroll) {
@@ -2287,7 +2397,7 @@ function calculateItemsInView(ctx, state, params = {}) {
     }
     const idsInView = [];
     for (let i = firstFullyOnScreenIndex; i <= endNoBuffer; i++) {
-      const id = (_f = idCache[i]) != null ? _f : getId(state, i);
+      const id = (_g = idCache[i]) != null ? _g : getId(state, i);
       idsInView.push(id);
     }
     Object.assign(state, {
@@ -2319,7 +2429,7 @@ function calculateItemsInView(ctx, state, params = {}) {
       let numContainers2 = prevNumContainers;
       const needNewContainers = [];
       for (let i = startBuffered; i <= endBuffered; i++) {
-        const id = (_g = idCache[i]) != null ? _g : getId(state, i);
+        const id = (_h = idCache[i]) != null ? _h : getId(state, i);
         if (!containerItemKeys.has(id)) {
           needNewContainers.push(i);
         }
@@ -2337,6 +2447,7 @@ function calculateItemsInView(ctx, state, params = {}) {
         );
       } else {
         state.activeStickyIndex = void 0;
+        set$(ctx, "activeStickyIndex", void 0);
       }
       if (needNewContainers.length > 0) {
         const requiredItemTypes = getItemType ? needNewContainers.map((i) => {
@@ -2356,7 +2467,7 @@ function calculateItemsInView(ctx, state, params = {}) {
         for (let idx = 0; idx < needNewContainers.length; idx++) {
           const i = needNewContainers[idx];
           const containerIndex = availableContainers[idx];
-          const id = (_h = idCache[i]) != null ? _h : getId(state, i);
+          const id = (_i = idCache[i]) != null ? _i : getId(state, i);
           const oldKey = peek$(ctx, `containerItemKey${containerIndex}`);
           if (oldKey && oldKey !== id) {
             containerItemKeys.delete(oldKey);
@@ -2412,11 +2523,12 @@ function calculateItemsInView(ctx, state, params = {}) {
         const itemIndex = indexByKey.get(itemKey);
         const item = data[itemIndex];
         if (item !== void 0) {
-          const id = (_i = idCache[itemIndex]) != null ? _i : getId(state, itemIndex);
-          const position = positions.get(id);
-          if (position === void 0) {
+          const id = (_j = idCache[itemIndex]) != null ? _j : getId(state, itemIndex);
+          const positionValue = positions.get(id);
+          if (positionValue === void 0) {
             set$(ctx, `containerPosition${i}`, POSITION_OUT_OF_VIEW);
           } else {
+            const position = (positionValue || 0) - scrollAdjustPending;
             const column = columns.get(id) || 1;
             const prevPos = peek$(ctx, `containerPosition${i}`);
             const prevColumn = peek$(ctx, `containerColumn${i}`);
@@ -2485,40 +2597,6 @@ function doMaintainScrollAtEnd(ctx, state, animated) {
   }
 }
 
-// src/utils/checkAtTop.ts
-function checkAtTop(state) {
-  var _a3;
-  if (!state) {
-    return;
-  }
-  const {
-    scrollLength,
-    scroll,
-    props: { onStartReachedThreshold }
-  } = state;
-  const distanceFromTop = scroll;
-  state.isAtStart = distanceFromTop <= 0;
-  state.isStartReached = checkThreshold(
-    distanceFromTop,
-    false,
-    onStartReachedThreshold * scrollLength,
-    state.isStartReached,
-    state.startReachedSnapshot,
-    {
-      scrollPosition: scroll,
-      contentSize: state.totalSize,
-      dataLength: (_a3 = state.props.data) == null ? void 0 : _a3.length
-    },
-    (distance) => {
-      var _a4, _b;
-      return (_b = (_a4 = state.props).onStartReached) == null ? void 0 : _b.call(_a4, { distanceFromStart: distance });
-    },
-    (snapshot) => {
-      state.startReachedSnapshot = snapshot;
-    }
-  );
-}
-
 // src/utils/updateAveragesOnDataChange.ts
 function updateAveragesOnDataChange(state, oldData, newData) {
   var _a3;
@@ -2687,78 +2765,45 @@ function handleLayout(ctx, state, layout, setCanRender) {
   setCanRender(true);
 }
 
-// src/core/onScroll.ts
-function onScroll(ctx, state, event) {
-  var _a3, _b, _c;
-  const {
-    scrollProcessingEnabled,
-    props: { onScroll: onScrollProp }
-  } = state;
-  if (scrollProcessingEnabled === false) {
-    return;
-  }
-  if (((_b = (_a3 = event.nativeEvent) == null ? void 0 : _a3.contentSize) == null ? void 0 : _b.height) === 0 && ((_c = event.nativeEvent.contentSize) == null ? void 0 : _c.width) === 0) {
-    return;
-  }
-  const newScroll = event.nativeEvent.contentOffset[state.props.horizontal ? "x" : "y"];
-  state.scrollPending = newScroll;
-  updateScroll(ctx, state, newScroll);
-  onScrollProp == null ? void 0 : onScrollProp(event);
-}
-function updateScroll(ctx, state, newScroll) {
-  const scrollingTo = state.scrollingTo;
-  state.hasScrolled = true;
-  state.lastBatchingAction = Date.now();
-  const currentTime = Date.now();
-  const adjust = state.scrollAdjustHandler.getAdjust();
-  const lastHistoryAdjust = state.lastScrollAdjustForHistory;
-  const adjustChanged = lastHistoryAdjust !== void 0 && Math.abs(adjust - lastHistoryAdjust) > 0.1;
-  if (adjustChanged) {
-    state.scrollHistory.length = 0;
-  }
-  state.lastScrollAdjustForHistory = adjust;
-  if (scrollingTo === void 0 && !(state.scrollHistory.length === 0 && newScroll === state.scroll)) {
-    if (!adjustChanged) {
-      state.scrollHistory.push({ scroll: newScroll, time: currentTime });
-    }
-  }
-  if (state.scrollHistory.length > 5) {
-    state.scrollHistory.shift();
-  }
-  state.scrollPrev = state.scroll;
-  state.scrollPrevTime = state.scrollTime;
-  state.scroll = newScroll;
-  state.scrollTime = currentTime;
-  const ignoreScrollFromMVCP = state.ignoreScrollFromMVCP;
-  if (ignoreScrollFromMVCP && !state.scrollingTo) {
-    const { lt, gt } = ignoreScrollFromMVCP;
-    if (lt && newScroll < lt || gt && newScroll > gt) {
-      return;
-    }
-  }
-  if (state.dataChangeNeedsScrollUpdate || Math.abs(state.scroll - state.scrollPrev) > 2) {
-    calculateItemsInView(ctx, state, { doMVCP: state.scrollingTo !== void 0 });
-    checkAtBottom(ctx, state);
-    checkAtTop(state);
-    state.dataChangeNeedsScrollUpdate = false;
-  }
-}
-
 // src/core/ScrollAdjustHandler.ts
 var ScrollAdjustHandler = class {
   constructor(ctx) {
     this.appliedAdjust = 0;
+    this.pendingAdjust = 0;
     this.mounted = false;
     this.context = ctx;
+    {
+      const commitPendingAdjust = () => {
+        const state = this.context.internalState;
+        const pending = this.pendingAdjust;
+        this.pendingAdjust = 0;
+        this.appliedAdjust += pending;
+        state.scroll += pending;
+        state.scrollForNextCalculateItemsInView = void 0;
+        set$(this.context, "scrollAdjustPending", 0);
+        set$(this.context, "scrollAdjust", this.appliedAdjust);
+        calculateItemsInView(this.context, this.context.internalState);
+      };
+      listen$(this.context, "scrollingTo", (value) => {
+        if (value === void 0) {
+          commitPendingAdjust();
+        }
+      });
+    }
   }
   requestAdjust(add) {
-    const oldAdjustTop = this.appliedAdjust;
-    this.appliedAdjust = add + oldAdjustTop;
-    const set = () => set$(this.context, "scrollAdjust", this.appliedAdjust);
-    if (this.mounted) {
-      set();
+    const scrollingTo = peek$(this.context, "scrollingTo");
+    if ((scrollingTo == null ? void 0 : scrollingTo.animated) && !scrollingTo.isInitialScroll) {
+      this.pendingAdjust += add;
+      set$(this.context, "scrollAdjustPending", this.pendingAdjust);
     } else {
-      requestAnimationFrame(set);
+      this.appliedAdjust += add;
+      const setter = () => set$(this.context, "scrollAdjust", this.appliedAdjust);
+      if (this.mounted) {
+        setter();
+      } else {
+        requestAnimationFrame(setter);
+      }
     }
   }
   setMounted() {
@@ -2806,7 +2851,7 @@ function updateItemSize(ctx, state, itemKey, sizeObj) {
   let minIndexSizeChanged;
   let maxOtherAxisSize = peek$(ctx, "otherAxisSize") || 0;
   const prevSizeKnown = state.sizesKnown.get(itemKey);
-  const diff = updateOneItemSize(state, itemKey, sizeObj);
+  const diff = updateOneItemSize(ctx, state, itemKey, sizeObj);
   const size = Math.floor((horizontal ? sizeObj.width : sizeObj.height) * 8) / 8;
   if (diff !== 0) {
     minIndexSizeChanged = minIndexSizeChanged !== void 0 ? Math.min(minIndexSizeChanged, index) : index;
@@ -2868,7 +2913,7 @@ function updateItemSize(ctx, state, itemKey, sizeObj) {
     }
   }
 }
-function updateOneItemSize(state, itemKey, sizeObj) {
+function updateOneItemSize(ctx, state, itemKey, sizeObj) {
   var _a3;
   const {
     sizes,
@@ -2879,7 +2924,7 @@ function updateOneItemSize(state, itemKey, sizeObj) {
   } = state;
   if (!data) return 0;
   const index = indexByKey.get(itemKey);
-  const prevSize = getItemSize(state, itemKey, index, data[index]);
+  const prevSize = getItemSize(ctx, state, itemKey, index, data[index]);
   const rawSize = horizontal ? sizeObj.width : sizeObj.height;
   const size = Math.round(rawSize) ;
   sizesKnown.set(itemKey, size);
@@ -3242,7 +3287,7 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
       }
       refState.current.isStartReached = initialContentOffset2 < refState.current.scrollLength * onStartReachedThreshold;
       if (initialContentOffset2 > 0) {
-        scrollTo(state, {
+        scrollTo(ctx, state, {
           animated: false,
           index,
           isInitialScroll: true,
@@ -3392,7 +3437,7 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
           scrollToIndex(ctx, state, { index, ...props2 });
         }
       },
-      scrollToOffset: (params) => scrollTo(state, params),
+      scrollToOffset: (params) => scrollTo(ctx, state, params),
       setScrollProcessingEnabled: (enabled) => {
         refState.current.scrollProcessingEnabled = enabled;
       },
@@ -3405,7 +3450,7 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
   {
     useEffect(() => {
       if (initialContentOffset) {
-        scrollTo(state, { animated: false, offset: initialContentOffset, ...initialScroll || {} });
+        scrollTo(ctx, state, { animated: false, offset: initialContentOffset, ...initialScroll || {} });
       }
     }, []);
   }
@@ -3436,7 +3481,7 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
       onMomentumScrollEnd: (event) => {
         {
           requestAnimationFrame(() => {
-            finishScrollTo(refState.current);
+            finishScrollTo(ctx, refState.current);
           });
         }
         if (onMomentumScrollEnd) {