@legendapp/list 3.4.0 → 3.6.0

package/react-native.mjs

@@ -914,8 +914,14 @@ function scheduleFullDrawDistancePrewarm(ctx) {
     return;
   }
   state.scheduledWork.frame(() => {
-    var _a3;
-    return (_a3 = state.triggerCalculateItemsInView) == null ? void 0 : _a3.call(state);
+    var _a3, _b, _c;
+    if (state.props.hasExternalScroll && !hasActiveInitialScroll(state) && !state.scrollingTo && !state.pendingNativeMVCPAdjust) {
+      const offset = (_b = (_a3 = state.refScroller.current) == null ? void 0 : _a3.getRawScrollOffset) == null ? void 0 : _b.call(_a3);
+      if (offset !== void 0) {
+        state.scroll = state.scrollPending = state.props.horizontal ? toLogicalHorizontalOffset(state, offset, state.totalSize) : offset;
+      }
+    }
+    (_c = state.triggerCalculateItemsInView) == null ? void 0 : _c.call(state);
   }, "fullDrawDistancePrewarm");
 }
 
@@ -928,6 +934,9 @@ function resetInitialRenderState(ctx, {
   if (resetLayout) {
     state.didContainersLayout = false;
     state.queuedInitialLayout = false;
+    state.scrollBufferDirection = void 0;
+    state.scrollHistory.length = 0;
+    state.scheduledWork.cancel("renderRangeProjection");
     state.edgeReachedGate = void 0;
     state.isStartReached = null;
     state.isEndReached = null;
@@ -1156,6 +1165,7 @@ function setSize(ctx, itemKey, size, notifyTotalSize = true) {
   const previousSize = sizes.get(itemKey);
   const diff = previousSize !== void 0 ? size - previousSize : size;
   if (diff !== 0) {
+    state.positionsAreCurrent = false;
     addTotalSize(ctx, itemKey, diff, notifyTotalSize);
   }
   sizes.set(itemKey, size);
@@ -1216,6 +1226,7 @@ function getKnownOrFixedSize(ctx, key, index, data, resolved) {
     const fixedSize = (resolved == null ? void 0 : resolved.didResolveFixedItemSize) ? resolved.fixedItemSize : getFixedItemSize(data, index, itemType);
     if (fixedSize !== void 0) {
       size = fixedSize + ctx.scrollAxisGap;
+      state.positionsAreCurrent = false;
       state.sizesKnown.set(key, size);
     }
   }
@@ -1289,10 +1300,17 @@ function getItemSizeAtIndex(ctx, index) {
 }
 
 // src/core/calculateOffsetWithOffsetPosition.ts
+function getViewPositionOffset(availableSpace, viewPosition, viewPositionFallback) {
+  let alignment = viewPosition;
+  if (availableSpace < 0 && viewPositionFallback !== void 0) {
+    alignment = viewPositionFallback === "start" ? 0 : 1;
+  }
+  return -alignment * availableSpace;
+}
 function calculateOffsetWithOffsetPosition(ctx, offsetParam, params) {
   var _a3;
   const state = ctx.state;
-  const { index, viewOffset, viewPosition } = params;
+  const { index, viewOffset, viewPosition, viewPositionFallback } = params;
   let offset = offsetParam;
   if (viewOffset) {
     offset -= viewOffset;
@@ -1313,7 +1331,8 @@ function calculateOffsetWithOffsetPosition(ctx, offsetParam, params) {
     const measuredItemSize = isOutOfBounds ? fallbackEstimatedSize : getItemSize(ctx, getId(state, index), index, state.props.data[index]);
     const itemSize = Math.max(0, measuredItemSize - (isOutOfBounds ? 0 : ctx.scrollAxisGap));
     const trailingInset = getContentInsetEnd(ctx);
-    offset -= viewPosition * (state.scrollLength - trailingInset - itemSize);
+    const availableSpace = state.scrollLength - trailingInset - itemSize;
+    offset += getViewPositionOffset(availableSpace, viewPosition, viewPositionFallback);
   }
   return offset;
 }
@@ -1700,15 +1719,27 @@ function prepareMVCP(ctx, dataChanged, adjustmentSource) {
           anchorPositionForLock = newPosition;
         }
       }
-      if (scrollingToViewPosition && scrollingToViewPosition > 0) {
+      if (scrollingTo && scrollingToViewPosition !== void 0 && (scrollingToViewPosition > 0 || scrollingTo.viewPositionFallback)) {
         const newSize = getItemSize(ctx, targetId, scrollTarget, state.props.data[scrollTarget]);
-        const prevSize = scrollingTo == null ? void 0 : scrollingTo.itemSize;
+        const prevSize = scrollingTo.itemSize;
         if (newSize !== void 0 && prevSize !== void 0 && newSize !== prevSize) {
-          const diff = newSize - prevSize;
-          if (diff !== 0) {
-            positionDiff += diff * scrollingToViewPosition;
-            scrollingTo.itemSize = newSize;
+          if (scrollingTo.viewPositionFallback) {
+            const viewport = state.scrollLength - getContentInsetEnd(ctx);
+            const previousSpace = viewport - Math.max(0, prevSize - ctx.scrollAxisGap);
+            const nextSpace = viewport - Math.max(0, newSize - ctx.scrollAxisGap);
+            positionDiff += getViewPositionOffset(
+              nextSpace,
+              scrollingToViewPosition,
+              scrollingTo.viewPositionFallback
+            ) - getViewPositionOffset(
+              previousSpace,
+              scrollingToViewPosition,
+              scrollingTo.viewPositionFallback
+            );
+          } else {
+            positionDiff += (newSize - prevSize) * scrollingToViewPosition;
           }
+          scrollingTo.itemSize = newSize;
         }
       }
       updateAnchorLock(state, {
@@ -1829,6 +1860,9 @@ function updateScroll(ctx, newScroll, forceUpdate, options) {
   state.scrollTime = currentTime;
   const scrollDelta = Math.abs(newScroll - prevScroll);
   const isUserScrollEvent = !!(options == null ? void 0 : options.fromNativeScrollEvent) && scrollDelta > 0.1 && !adjustChanged && scrollingTo === void 0 && !state.pendingNativeMVCPAdjust;
+  if (isUserScrollEvent) {
+    state.scrollBufferDirection = newScroll > prevScroll ? 1 : -1;
+  }
   const didCancelMaintainScrollAtEnd = Platform.OS === "web" && isUserScrollEvent && newScroll < prevScroll && !!(state.maintainingScrollAtEnd || state.pendingMaintainScrollAtEnd);
   if (didCancelMaintainScrollAtEnd) {
     finishMaintainScrollAtEnd(ctx);
@@ -1908,10 +1942,10 @@ function finishMaintainScrollAtEnd(ctx) {
   }
 }
 function doMaintainScrollAtEnd(ctx, options) {
-  var _a3, _b, _c, _d, _e, _f;
+  var _a3, _b, _c, _d, _e, _f, _g, _h;
   const state = ctx.state;
   let didMaintain = false;
-  if (state.isDragging) {
+  if (state.isDragging || ((_b = (_a3 = state.refScroller.current) == null ? void 0 : _a3.isScrollInRange) == null ? void 0 : _b.call(_a3)) === false) {
     finishMaintainScrollAtEnd(ctx);
   } else {
     const {
@@ -1923,11 +1957,11 @@ function doMaintainScrollAtEnd(ctx, options) {
     const immediate = (options == null ? void 0 : options.immediate) && Platform.OS === "web" && !(maintainScrollAtEnd == null ? void 0 : maintainScrollAtEnd.animated);
     const isWithinMaintainScrollAtEndThreshold = peek$(ctx, "isWithinMaintainScrollAtEndThreshold");
     const isReplayingPendingMaintain = !!state.pendingMaintainScrollAtEnd;
-    const shouldMaintainScrollAtEnd = !!(!((_a3 = ctx.scrollRequestTracker) == null ? void 0 : _a3.isWaitingToRun()) && (!state.scrollingTo || state.scrollingTo.isScrollToEnd) && (isWithinMaintainScrollAtEndThreshold || isReplayingPendingMaintain || ((_b = state.scrollingTo) == null ? void 0 : _b.isScrollToEnd)) && maintainScrollAtEnd && didFinishInitialScroll);
+    const shouldMaintainScrollAtEnd = !!(!((_c = ctx.scrollRequestTracker) == null ? void 0 : _c.isWaitingToRun()) && (!state.scrollingTo || state.scrollingTo.isScrollToEnd) && (isWithinMaintainScrollAtEndThreshold || isReplayingPendingMaintain || ((_d = state.scrollingTo) == null ? void 0 : _d.isScrollToEnd)) && maintainScrollAtEnd && didFinishInitialScroll);
     if (shouldMaintainScrollAtEnd && !state.scrollingTo) {
       const scroller = state.refScroller.current;
-      const nativeMax = (_c = scroller == null ? void 0 : scroller.getMaxScrollOffset) == null ? void 0 : _c.call(scroller);
-      const observed = (_d = scroller == null ? void 0 : scroller.getCurrentScrollOffset) == null ? void 0 : _d.call(scroller);
+      const nativeMax = (_e = scroller == null ? void 0 : scroller.getMaxScrollOffset) == null ? void 0 : _e.call(scroller);
+      const observed = (_f = scroller == null ? void 0 : scroller.getCurrentScrollOffset) == null ? void 0 : _f.call(scroller);
       if (nativeMax !== void 0 && observed !== void 0 && nativeMax < state.scroll - 1 && Math.abs(observed - nativeMax) <= 1) {
         state.pendingMaintainScrollAtEnd = true;
         state.scrollPending = observed;
@@ -1939,13 +1973,13 @@ function doMaintainScrollAtEnd(ctx, options) {
     } else if (pendingNativeMVCPAdjust) {
       state.pendingMaintainScrollAtEnd = shouldMaintainScrollAtEnd;
     } else if (shouldMaintainScrollAtEnd && (state.scrollingTo || state.pendingScrollResolve)) {
-      if (immediate && ((_e = state.scrollingTo) == null ? void 0 : _e.isScrollToEnd) && !state.scrollingTo.animated) {
+      if (immediate && ((_g = state.scrollingTo) == null ? void 0 : _g.isScrollToEnd) && !state.scrollingTo.animated) {
         state.pendingMaintainScrollAtEnd = false;
         ctx.scrollToEnd({ animated: false });
         didMaintain = true;
       } else {
         state.pendingMaintainScrollAtEnd = true;
-        (_f = state.maintainingScrollAtEnd) != null ? _f : state.maintainingScrollAtEnd = maintainScrollAtEnd.animated ? "pending-animated" : "pending-instant";
+        (_h = state.maintainingScrollAtEnd) != null ? _h : state.maintainingScrollAtEnd = maintainScrollAtEnd.animated ? "pending-animated" : "pending-instant";
       }
     } else if (shouldMaintainScrollAtEnd && didContainersLayout) {
       state.pendingMaintainScrollAtEnd = false;
@@ -1959,8 +1993,9 @@ function doMaintainScrollAtEnd(ctx, options) {
         const scrollAtRequest = state.scroll;
         state.maintainingScrollAtEnd = pendingState;
         const run = () => {
+          var _a4, _b2;
           if (state.maintainingScrollAtEnd === pendingState) {
-            if (state.isDragging) {
+            if (state.isDragging || ((_b2 = (_a4 = state.refScroller.current) == null ? void 0 : _a4.isScrollInRange) == null ? void 0 : _b2.call(_a4)) === false) {
               finishMaintainScrollAtEnd(ctx);
             } else {
               const isStillWithinThreshold = peek$(ctx, "isWithinMaintainScrollAtEndThreshold");
@@ -2431,7 +2466,8 @@ function scrollToIndex(ctx, {
   animated = true,
   forceScroll,
   isInitialScroll,
-  viewPosition
+  viewPosition,
+  viewPositionFallback
 }) {
   const state = ctx.state;
   const { data } = state.props;
@@ -2451,7 +2487,8 @@ function scrollToIndex(ctx, {
     itemSize,
     offset: firstIndexOffset,
     viewOffset,
-    viewPosition: viewPosition != null ? viewPosition : 0
+    viewPosition: viewPosition != null ? viewPosition : 0,
+    viewPositionFallback
   });
 }
 
@@ -2471,6 +2508,7 @@ function dispatchInitialScroll(ctx, params) {
     precomputedWithViewOffset: true,
     viewOffset: target.viewOffset,
     viewPosition: target.viewPosition,
+    viewPositionFallback: target.viewPositionFallback,
     waitForInitialScrollCompletionFrame: waitForCompletionFrame
   });
 }
@@ -2805,7 +2843,7 @@ function createRetargetedBottomAlignedInitialScroll(options) {
   };
 }
 function areEquivalentBootstrapInitialScrollTargets(current, next) {
-  return current.index === next.index && current.preserveForBottomPadding === next.preserveForBottomPadding && current.preserveForFooterLayout === next.preserveForFooterLayout && current.viewOffset === next.viewOffset && current.viewPosition === next.viewPosition;
+  return current.index === next.index && current.preserveForBottomPadding === next.preserveForBottomPadding && current.preserveForFooterLayout === next.preserveForFooterLayout && current.viewOffset === next.viewOffset && current.viewPosition === next.viewPosition && current.viewPositionFallback === next.viewPositionFallback;
 }
 function clearPendingInitialScrollFooterLayout(ctx, options) {
   const { dataLength, stylePaddingEnd, target } = options;
@@ -3020,7 +3058,7 @@ function handleBootstrapInitialScrollFooterLayout(ctx, options) {
       preserveForFooterLayout: shouldPreserveInitialScrollForFooterLayout(initialScroll),
       stylePaddingEnd
     });
-    const didTargetChange = initialScroll.index !== updatedInitialScroll.index || initialScroll.viewPosition !== updatedInitialScroll.viewPosition || initialScroll.viewOffset !== updatedInitialScroll.viewOffset;
+    const didTargetChange = initialScroll.index !== updatedInitialScroll.index || initialScroll.viewPosition !== updatedInitialScroll.viewPosition || initialScroll.viewPositionFallback !== updatedInitialScroll.viewPositionFallback || initialScroll.viewOffset !== updatedInitialScroll.viewOffset;
     if (!didTargetChange) {
       clearPendingInitialScrollFooterLayout(ctx, {
         dataLength,
@@ -3298,6 +3336,7 @@ function handleInitialScrollDataChange(ctx, options) {
 
 // src/core/resetLayoutCachesForDataChange.ts
 function resetLayoutCachesForDataChange(state) {
+  state.positionsAreCurrent = false;
   state.indexByKey.clear();
   state.idCache.length = 0;
   state.positions.length = 0;
@@ -3578,7 +3617,7 @@ function updateItemPositions(ctx, dataChanged, {
   scrollBottomBuffered: -1,
   startIndex: 0
 }) {
-  var _a3, _b, _c, _d, _e;
+  var _a3, _b, _c, _d, _e, _f;
   const state = ctx.state;
   const hasPositionListeners = ctx.positionListeners.size > 0;
   const {
@@ -3594,6 +3633,11 @@ function updateItemPositions(ctx, dataChanged, {
   const dataLength = data.length;
   const numColumns = (_a3 = peek$(ctx, "numColumns")) != null ? _a3 : 1;
   const hasColumns = numColumns > 1;
+  const canReuseEstimates = !doMVCP || !state.didContainersLayout && Object.keys(state.averageSizes).length === 0;
+  if (state.positionsAreCurrent && !dataChanged && !forceFullUpdate && state.positionRecalculationStartIndex === void 0 && !scrollingTo && !hasColumns && !snapToIndices && positions.length === dataLength && canReuseEstimates) {
+    return;
+  }
+  state.positionsAreCurrent = false;
   const indexByKeyForChecking = IS_DEV ? /* @__PURE__ */ new Map() : void 0;
   const extraData = peek$(ctx, "extraData");
   const layoutConfig = overrideItemLayout ? { span: 1 } : void 0;
@@ -3708,6 +3752,10 @@ function updateItemPositions(ctx, dataChanged, {
   }
   if (!didBreakEarly) {
     updateTotalSize(ctx);
+    state.positionsAreCurrent = !hasColumns;
+    if (startIndex <= ((_f = state.positionRecalculationStartIndex) != null ? _f : -1)) {
+      state.positionRecalculationStartIndex = void 0;
+    }
   }
   if (snapToIndices) {
     updateSnapToOffsets(ctx);
@@ -4270,7 +4318,7 @@ function handleStickyRecycling(ctx, stickyArray, scroll, drawDistance, currentSt
 }
 function trackVisibleRange(range, i, top, size, scroll, scrollBottom) {
   let didPassVisibleEnd = false;
-  if (range.startNoBuffer === null && top + size > scroll) {
+  if (range.startNoBuffer === null && top + size > scroll && top <= scrollBottom) {
     range.startNoBuffer = i;
   }
   if (range.firstFullyOnScreenIndex === void 0 && top >= scroll - 10 && top <= scrollBottom) {
@@ -4336,7 +4384,7 @@ function findFirstVisibleIndexInCachedRange(ctx, scroll) {
   return null;
 }
 function updateViewabilityForCachedRange(ctx, viewabilityConfigCallbackPairs, scrollLength, scroll, scrollBottom) {
-  var _a3, _b;
+  var _a3, _b, _c, _d;
   const state = ctx.state;
   const {
     endBuffered,
@@ -4370,14 +4418,14 @@ function updateViewabilityForCachedRange(ctx, viewabilityConfigCallbackPairs, sc
     startNoBuffer: visibleRange.startNoBuffer
   });
   maybeEmitFirstVisibleItemChanged(state, visibleRange.startNoBuffer);
-  if (visibleRange.startNoBuffer !== null && visibleRange.endNoBuffer !== null) {
+  if (state.props.hasExternalScroll || visibleRange.startNoBuffer !== null && visibleRange.endNoBuffer !== null) {
     updateViewableItems(
       state,
       ctx,
       viewabilityConfigCallbackPairs,
       scrollLength,
-      visibleRange.startNoBuffer,
-      visibleRange.endNoBuffer,
+      (_c = visibleRange.startNoBuffer) != null ? _c : 0,
+      (_d = visibleRange.endNoBuffer) != null ? _d : -1,
       startBuffered,
       endBuffered
     );
@@ -4386,7 +4434,7 @@ function updateViewabilityForCachedRange(ctx, viewabilityConfigCallbackPairs, sc
 function calculateItemsInView(ctx, params = {}) {
   const state = ctx.state;
   batchedUpdates(() => {
-    var _a3, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n, _o, _p, _q, _r, _s, _t, _u;
+    var _a3, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y;
     const {
       columns,
       containerItemKeys,
@@ -4438,7 +4486,7 @@ function calculateItemsInView(ctx, params = {}) {
       scrollAdjustPending = (_a4 = peek$(ctx, "scrollAdjustPending")) != null ? _a4 : 0;
       scrollAdjustPad = scrollAdjustPending - topPad;
       scroll = Math.round(nextScrollState + scrollExtra + scrollAdjustPad);
-      if (scroll + scrollLength > totalSize) {
+      if (!state.props.hasExternalScroll && scroll + scrollLength > totalSize) {
         scroll = Math.max(0, totalSize - scrollLength);
       }
     };
@@ -4465,7 +4513,11 @@ function calculateItemsInView(ctx, params = {}) {
     let stickyState = dataChanged ? void 0 : resolveStickyState();
     let scrollBufferTop = drawDistance;
     let scrollBufferBottom = drawDistance;
-    if (speed > 0 || speed === 0 && scroll < Math.max(50, drawDistance)) {
+    if (speed !== 0) {
+      state.scrollBufferDirection = speed > 0 ? 1 : -1;
+    }
+    const bufferForward = state.scrollBufferDirection === 1 || state.scrollBufferDirection === void 0 && scroll < Math.max(50, drawDistance);
+    if (bufferForward) {
       scrollBufferTop = drawDistance * 0.5;
       scrollBufferBottom = drawDistance * 1.5;
     } else {
@@ -4475,8 +4527,8 @@ function calculateItemsInView(ctx, params = {}) {
     const shouldProjectRenderRange = !dataChanged && !forceFullItemPositions && !suppressInitialScrollSideEffects && !hasActiveInitialScroll(state) && !state.scrollingTo && !state.pendingNativeMVCPAdjust && !!peek$(ctx, "readyToRender");
     const projectedBufferAdjustment = shouldProjectRenderRange ? getProjectedBufferAdjustment(speed, Math.min(scrollBufferTop, scrollBufferBottom)) : 0;
     const updateScrollRange = () => {
-      const scrollStart = Math.max(0, scroll);
-      const overscrollBeforeContent = Math.max(0, -nativeScrollState);
+      const scrollStart = state.props.hasExternalScroll ? scroll : Math.max(0, scroll);
+      const overscrollBeforeContent = state.props.hasExternalScroll ? 0 : Math.max(0, -nativeScrollState);
       scrollBottom = Math.max(scrollStart, scroll + scrollLength + overscrollBeforeContent);
       scrollTopBuffered = scrollStart - scrollBufferTop + projectedBufferAdjustment;
       scrollBottomBuffered = scrollBottom + scrollBufferBottom + projectedBufferAdjustment;
@@ -4605,7 +4657,7 @@ function calculateItemsInView(ctx, params = {}) {
             nextTop = top;
           }
         }
-        if (visibleRange.startNoBuffer !== null) {
+        if (startBuffered !== null) {
           if (top <= scrollBottomBuffered) {
             endBuffered = i;
             if (scrollBottomBuffered > totalSize) {
@@ -4616,6 +4668,8 @@ function calculateItemsInView(ctx, params = {}) {
           } else {
             foundEnd = true;
           }
+        } else if (top > scrollBottomBuffered) {
+          foundEnd = true;
         }
       }
     }
@@ -4633,6 +4687,12 @@ function calculateItemsInView(ctx, params = {}) {
         bottom: nextBottom,
         top: nextTop
       };
+    } else if (enableScrollForNextCalculateItemsInView && state.props.hasExternalScroll) {
+      if (scrollBottomBuffered < 0) {
+        state.scrollForNextCalculateItemsInView = { bottom: 0, top: null };
+      } else if (scrollTopBuffered > totalSize) {
+        state.scrollForNextCalculateItemsInView = { bottom: null, top: totalSize };
+      }
     }
     let numContainers = prevNumContainers;
     const pendingRemoval = [];
@@ -4656,7 +4716,9 @@ function calculateItemsInView(ctx, params = {}) {
     }
     const hasScrollTargetPinnedRange = scrollTargetPinnedStart <= scrollTargetPinnedEnd;
     const isPinnedRenderIndex = (index) => alwaysRenderIndicesSet.has(index) || hasScrollTargetPinnedRange && index >= scrollTargetPinnedStart && index <= scrollTargetPinnedEnd;
-    if (startBuffered !== null && endBuffered !== null) {
+    if (startBuffered !== null && endBuffered !== null || alwaysRenderIndicesArr.length || hasScrollTargetPinnedRange) {
+      const allocationStart = startBuffered != null ? startBuffered : 0;
+      const allocationEnd = endBuffered != null ? endBuffered : -1;
       const needNewContainers = [];
       const needNewContainersSet = /* @__PURE__ */ new Set();
       const addPinnedIndex = (index) => {
@@ -4672,7 +4734,7 @@ function calculateItemsInView(ctx, params = {}) {
           }
         }
       };
-      for (let i = startBuffered; i <= endBuffered; i++) {
+      for (let i = allocationStart; i <= allocationEnd; i++) {
         const id = (_m = idCache[i]) != null ? _m : getId(state, i);
         if (!containerItemKeys.has(id)) {
           needNewContainersSet.add(i);
@@ -4694,8 +4756,8 @@ function calculateItemsInView(ctx, params = {}) {
           (_n = stickyState == null ? void 0 : stickyState.currentStickyIdx) != null ? _n : -1,
           needNewContainers,
           needNewContainersSet,
-          startBuffered,
-          endBuffered
+          allocationStart,
+          allocationEnd
         );
       } else if (previousStickyIndex !== -1) {
         set$(ctx, "activeStickyIndex", -1);
@@ -4704,8 +4766,8 @@ function calculateItemsInView(ctx, params = {}) {
         const availableContainerAllocations = findAvailableContainers(
           ctx,
           needNewContainers,
-          startBuffered,
-          endBuffered,
+          allocationStart,
+          allocationEnd,
           pendingRemoval,
           protectedContainerKeys,
           // Initial end alignment has no scroll velocity yet. Keep its
@@ -4832,19 +4894,19 @@ function calculateItemsInView(ctx, params = {}) {
         handleInitialScrollLayoutReady(ctx);
       }
     }
-    if (viewabilityConfigCallbackPairs && visibleRange.startNoBuffer !== null && visibleRange.endNoBuffer !== null) {
+    if (viewabilityConfigCallbackPairs && (state.props.hasExternalScroll || visibleRange.startNoBuffer !== null && visibleRange.endNoBuffer !== null)) {
       updateViewableItems(
         ctx.state,
         ctx,
         viewabilityConfigCallbackPairs,
         scrollLength,
-        visibleRange.startNoBuffer,
-        visibleRange.endNoBuffer,
-        startBuffered != null ? startBuffered : visibleRange.startNoBuffer,
-        endBuffered != null ? endBuffered : visibleRange.endNoBuffer
+        (_u = visibleRange.startNoBuffer) != null ? _u : 0,
+        (_v = visibleRange.endNoBuffer) != null ? _v : -1,
+        (_w = startBuffered != null ? startBuffered : visibleRange.startNoBuffer) != null ? _w : 0,
+        (_x = endBuffered != null ? endBuffered : visibleRange.endNoBuffer) != null ? _x : -1
       );
     }
-    (_u = stickyState == null ? void 0 : stickyState.finishCalculateItemsInView) == null ? void 0 : _u.call(stickyState);
+    (_y = stickyState == null ? void 0 : stickyState.finishCalculateItemsInView) == null ? void 0 : _y.call(stickyState);
   });
 }
 
@@ -5139,6 +5201,7 @@ function updateOneItemSize(ctx, itemKey, sizeObj, resolvedMeasurementItem, notif
     return 0;
   }
   const size = Platform.OS === "web" ? Math.round(rawSize) : roundSize(rawSize);
+  if (prevSizeKnown !== size) state.positionsAreCurrent = false;
   sizesKnown.set(itemKey, size);
   if (fixedItemSize === void 0 && size > 0) {
     itemType != null ? itemType : itemType = getItemType ? (_b = getItemType(itemData, index)) != null ? _b : "" : "";
@@ -6239,6 +6302,7 @@ var ListComponent = typedMemo(function ListComponent2({
   stickyHeaderConfig,
   stickyHeaderIndices,
   useWindowScroll = false,
+  scrollElement,
   ...rest
 }) {
   const ctx = useStateContext();
@@ -6304,7 +6368,7 @@ var ListComponent = typedMemo(function ListComponent2({
     SnapOrScroll,
     {
       ...rest,
-      ...Platform.OS === "web" ? ScrollComponent === ListComponentScrollView ? { onInternalScrollEnd, useWindowScroll } : {} : { onScrollBeginDrag: onInternalScrollBeginDrag, onScrollEndDrag: onInternalScrollEndDrag },
+      ...Platform.OS === "web" ? ScrollComponent === ListComponentScrollView ? { onInternalScrollEnd, scrollElement, useWindowScroll } : {} : { onScrollBeginDrag: onInternalScrollBeginDrag, onScrollEndDrag: onInternalScrollEndDrag },
       contentContainerStyle: [
         horizontal ? { height: "100%" } : {},
         contentContainerStyle,
@@ -6344,7 +6408,15 @@ var WEB_UNBOUNDED_HEIGHT_CONTAINER_RATIO = 0.9;
 var WEB_UNBOUNDED_HEIGHT_VIEWPORT_RATIO = 0.9;
 function useDevChecksImpl(props) {
   const ctx = useStateContext();
-  const { anchoredEndSpace, childrenMode, keyExtractor, numColumns, renderScrollComponent, useWindowScroll } = props;
+  const {
+    anchoredEndSpace,
+    childrenMode,
+    keyExtractor,
+    numColumns,
+    renderScrollComponent,
+    scrollElement,
+    useWindowScroll
+  } = props;
   const hasAnchoredEndSpace = !!anchoredEndSpace;
   useEffect(() => {
     if (hasAnchoredEndSpace && (numColumns != null ? numColumns : 1) > 1) {
@@ -6355,13 +6427,13 @@ function useDevChecksImpl(props) {
     }
   }, [hasAnchoredEndSpace, numColumns]);
   useEffect(() => {
-    if (useWindowScroll && renderScrollComponent) {
+    if ((useWindowScroll || scrollElement !== void 0) && renderScrollComponent) {
       warnDevOnce(
         "useWindowScrollRenderScrollComponent",
-        "useWindowScroll is not supported when renderScrollComponent is provided."
+        "useWindowScroll and scrollElement are not supported when renderScrollComponent is provided."
       );
     }
-  }, [renderScrollComponent, useWindowScroll]);
+  }, [renderScrollComponent, scrollElement, useWindowScroll]);
   useEffect(() => {
     if (!keyExtractor && !ctx.state.isFirst && ctx.state.didDataChange && !childrenMode) {
       warnDevOnce(
@@ -6373,8 +6445,8 @@ function useDevChecksImpl(props) {
   useEffect(() => {
     const state = ctx.state;
     const dataLength = state.props.data.length;
-    const useWindowScrollResolved = state.props.useWindowScroll;
-    if (Platform.OS !== "web" || useWindowScrollResolved || dataLength < WEB_UNBOUNDED_HEIGHT_MIN_DATA_LENGTH) {
+    const usesExternalScroll = state.props.hasExternalScroll;
+    if (Platform.OS !== "web" || usesExternalScroll || dataLength < WEB_UNBOUNDED_HEIGHT_MIN_DATA_LENGTH) {
       return;
     }
     const warnIfUnboundedOuterSize = () => {
@@ -6538,7 +6610,8 @@ function doInitialAllocateContainers(ctx) {
           calculateItemsInView(ctx, { dataChanged: true, doMVCP: true });
         });
       } else {
-        calculateItemsInView(ctx, { dataChanged: true, doMVCP: true });
+        const reuseInitialPositions = !state.didLoad && state.positionsAreCurrent && !state.didDataChange && !state.didColumnsChange;
+        calculateItemsInView(ctx, { dataChanged: !reuseInitialPositions, doMVCP: true });
       }
     }
     return true;
@@ -6577,12 +6650,14 @@ function handleLayout(ctx, layoutParam, setCanRender) {
     updateContentMetricsState(ctx);
     state.lastBatchingAction = Date.now();
     state.scrollForNextCalculateItemsInView = void 0;
-    if (scrollLength > 0) {
-      doInitialAllocateContainers(ctx);
-    }
-    if (needsCalculate) {
+    const didAllocate = scrollLength > 0 && doInitialAllocateContainers(ctx);
+    if (needsCalculate && (!didAllocate || state.initialScroll)) {
       calculateItemsInView(ctx, { doMVCP: true });
     }
+    const scrollTarget = state.scrollingTo;
+    if (scrollLength !== previousLength && (scrollTarget == null ? void 0 : scrollTarget.viewPositionFallback) && !scrollTarget.isInitialScroll && scrollTarget.index !== void 0) {
+      scrollToIndex(ctx, { ...scrollTarget, forceScroll: true, index: scrollTarget.index });
+    }
     if (didChange || otherAxisSize !== prevOtherAxisSize) {
       set$(ctx, "scrollSize", { height: layout.height, width: layout.width });
     }
@@ -6662,7 +6737,7 @@ function onScroll(ctx, event) {
   }
   state.lastNativeScroll = newScroll;
   state.lastNativeScrollTime = Date.now();
-  if (state.scrollingTo && state.scrollingTo.offset >= newScroll) {
+  if (!state.props.hasExternalScroll && state.scrollingTo && state.scrollingTo.offset >= newScroll) {
     const maxOffset = clampScrollOffset(ctx, newScroll, state.scrollingTo);
     if (newScroll !== maxOffset && Math.abs(newScroll - maxOffset) > 1) {
       newScroll = maxOffset;
@@ -7445,6 +7520,7 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
     stickyHeaderIndices: stickyHeaderIndicesProp,
     style: styleProp,
     useWindowScroll = false,
+    scrollElement,
     viewabilityConfig,
     viewabilityConfigCallbackPairs,
     ...rest
@@ -7500,9 +7576,10 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
     viewPosition: 1
   } : hasInitialScrollIndex ? typeof initialScrollIndexProp === "object" ? {
     index: (_b = initialScrollIndexProp.index) != null ? _b : 0,
-    preserveForBottomPadding: initialScrollIndexProp.viewOffset === void 0 && initialScrollIndexProp.viewPosition === 1 ? true : void 0,
-    viewOffset: (_c = initialScrollIndexProp.viewOffset) != null ? _c : initialScrollIndexProp.viewPosition === 1 ? getEndAlignedViewOffset(stylePaddingEndState) : 0,
-    viewPosition: (_d = initialScrollIndexProp.viewPosition) != null ? _d : 0
+    preserveForBottomPadding: initialScrollIndexProp.viewOffset === void 0 && initialScrollIndexProp.viewPosition === 1 && initialScrollIndexProp.viewPositionFallback === void 0 ? true : void 0,
+    viewOffset: (_c = initialScrollIndexProp.viewOffset) != null ? _c : initialScrollIndexProp.viewPosition === 1 && initialScrollIndexProp.viewPositionFallback === void 0 ? getEndAlignedViewOffset(stylePaddingEndState) : 0,
+    viewPosition: (_d = initialScrollIndexProp.viewPosition) != null ? _d : 0,
+    viewPositionFallback: initialScrollIndexProp.viewPositionFallback
   } : {
     index: initialScrollIndexProp != null ? initialScrollIndexProp : 0,
     preserveForBottomPadding: shouldBottomAlignNumericInitialScrollIndex ? true : void 0,
@@ -7539,7 +7616,9 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
     dataVersion,
     keyExtractor
   ]);
-  const useWindowScrollResolved = Platform.OS === "web" && !!useWindowScroll && !renderScrollComponent;
+  const scrollElementResolved = Platform.OS === "web" && !renderScrollComponent ? scrollElement : void 0;
+  const useWindowScrollResolved = Platform.OS === "web" && !!useWindowScroll && scrollElementResolved === void 0 && !renderScrollComponent;
+  const hasExternalScroll = useWindowScrollResolved || scrollElementResolved !== void 0;
   const refState = useRef(void 0);
   const hasOverrideItemLayout = !!overrideItemLayout;
   const prevHasOverrideItemLayout = useRef(hasOverrideItemLayout);
@@ -7677,6 +7756,7 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
     estimatedItemSize,
     getFixedItemSize: useWrapIfItem(getFixedItemSize),
     getItemType: useWrapIfItem(getItemType),
+    hasExternalScroll,
     hideItemsUntilMeasured: experimental_hideItemsUntilMeasured,
     horizontal: !!horizontal,
     itemsAreEqual,
@@ -7873,9 +7953,7 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
   const { onLayout } = useOnLayoutSync({
     onLayoutChange,
     onLayoutProp,
-    ref: refScroller
-    // the type of ScrollView doesn't include measure?
-  });
+    ref: refScroller});
   useLayoutEffect(() => {
     if (snapToIndices) {
       updateSnapToOffsets(ctx);
@@ -8043,6 +8121,7 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
       refScrollView: combinedRef,
       renderScrollComponent,
       scrollAdjustHandler: (_s = refState.current) == null ? void 0 : _s.scrollAdjustHandler,
+      scrollElement: scrollElementResolved,
       scrollEventThrottle: 0,
       snapToIndices,
       stickyHeaderIndices,

package/react-native.web.d.ts

@@ -6,11 +6,14 @@ type ScrollEventTarget = Window | HTMLElement;
 interface ScrollViewMethods {
     getBoundingClientRect(): DOMRect | null | undefined;
     getCurrentScrollOffset(): number;
+    getRawScrollOffset(): number;
     getMaxScrollOffset(): number;
-    getScrollableNode(): HTMLElement;
+    getScrollableNode(): HTMLElement | null;
     getScrollEventTarget(): ScrollEventTarget | null;
     getScrollResponder(): HTMLElement | null;
     isWindowScroll?(): boolean;
+    getContentNode?(): HTMLElement | null;
+    isScrollInRange?(): boolean;
     scrollBy(x: number, y: number): void;
     scrollTo(options: {
         x?: number;
@@ -249,6 +252,8 @@ interface LegendListSpecificProps<ItemT, TItemType extends string | undefined> {
         index: number;
         viewOffset?: number | undefined;
         viewPosition?: number | undefined;
+        /** Alignment used only when the item exceeds the viewport. Omit to preserve viewPosition. */
+        viewPositionFallback?: "start" | "end";
     };
     /**
      * Initial scroll position in pixels.
@@ -675,6 +680,8 @@ type LegendListRef$1 = {
         index: number;
         viewOffset?: number | undefined;
         viewPosition?: number | undefined;
+        /** Alignment used only when the item exceeds the viewport. Omit to preserve viewPosition. */
+        viewPositionFallback?: "start" | "end";
     }): Promise<void>;
     /**
      * Scrolls to a specific item in the list.
@@ -689,6 +696,8 @@ type LegendListRef$1 = {
         item: any;
         viewOffset?: number | undefined;
         viewPosition?: number | undefined;
+        /** Alignment used only when the item exceeds the viewport. Omit to preserve viewPosition. */
+        viewPositionFallback?: "start" | "end";
     }): Promise<void>;
     /**
      * Scrolls to a specific offset in pixels.
@@ -787,6 +796,8 @@ interface ScrollIndexWithOffset {
     index: number;
     viewOffset?: number;
     viewPosition?: number;
+    /** Alignment used only when the item exceeds the viewport. Omit to preserve viewPosition. */
+    viewPositionFallback?: "start" | "end";
 }
 interface ScrollIndexWithOffsetPosition extends ScrollIndexWithOffset {
     viewPosition?: number;
@@ -836,6 +847,13 @@ type ScrollViewPropsWeb = Omit<LooseScrollViewProps, "style" | "contentContainer
     onLayout?: (event: LooseLayoutChangeEvent) => void;
 };
 type LegendListPropsOverrides<ItemT, TItemType extends string | undefined> = Omit<LegendListPropsBase<ItemT, ScrollViewPropsWeb, TItemType>, "anchoredEndSpace" | "refScrollView" | "renderScrollComponent" | "ListHeaderComponentStyle" | "ListFooterComponentStyle" | "onRefresh" | "progressViewOffset" | "refreshing"> & {
+    /**
+     * Web only: use an ancestor element's scrollbar instead of creating a scrollable list.
+     * Pass a state-backed callback ref value so changes to the element are observed.
+     * null waits for the element to mount; undefined uses the list's own scrollbar.
+     * Takes precedence over useWindowScroll. Not supported with renderScrollComponent.
+     */
+    scrollElement?: HTMLElement | null;
     anchoredEndSpace?: AnchoredEndSpaceConfig;
     refScrollView?: Ref<HTMLElement | ScrollViewMethods>;
     ListHeaderComponentStyle?: CSSProperties | undefined;
@@ -845,7 +863,7 @@ type LegendListProps<ItemT = any, TItemType extends string | undefined = string
 type LegendListRef = Omit<LegendListRef$1, "getAnimatableRef" | "getNativeScrollRef" | "getScrollableNode" | "getScrollResponder"> & {
     getAnimatableRef(): HTMLElement | ScrollViewMethods;
     getNativeScrollRef(): HTMLElement | ScrollViewMethods;
-    getScrollableNode(): HTMLElement;
+    getScrollableNode(): HTMLElement | null;
     getScrollResponder(): HTMLElement | null;
 };
 type LegendListState = Omit<LegendListState$1, "elementAtIndex"> & {