@legendapp/list 3.3.0 → 3.3.2

package/react-native.web.mjs

@@ -127,6 +127,7 @@ var createAnimatedValue = (value) => value;
 
 // src/state/state.tsx
 var ContextState = React3.createContext(null);
+var SIGNAL_NAMES_SEPARATOR = "\0";
 var contextNum = 0;
 function StateProvider({ children }) {
   const [value] = React3.useState(() => ({
@@ -198,6 +199,12 @@ function createSelectorFunctionsArr(ctx, signalNames) {
     }
   };
 }
+function getSignalNamesKey(signalNames) {
+  return signalNames.length === 1 ? signalNames[0] : signalNames.join(SIGNAL_NAMES_SEPARATOR);
+}
+function getSignalNamesFromKey(signalNamesKey) {
+  return signalNamesKey.split(SIGNAL_NAMES_SEPARATOR);
+}
 function listen$(ctx, signalName, cb) {
   const { listeners } = ctx;
   let setListeners = listeners.get(signalName);
@@ -245,7 +252,11 @@ function notifyPosition$(ctx, key, value) {
 }
 function useArr$(signalNames) {
   const ctx = React3.useContext(ContextState);
-  const { subscribe, get } = React3.useMemo(() => createSelectorFunctionsArr(ctx, signalNames), [ctx, signalNames]);
+  const signalNamesKey = getSignalNamesKey(signalNames);
+  const { subscribe, get } = React3.useMemo(
+    () => createSelectorFunctionsArr(ctx, getSignalNamesFromKey(signalNamesKey)),
+    [ctx, signalNamesKey]
+  );
   const value = useSyncExternalStore(subscribe, get, get);
   return value;
 }
@@ -532,9 +543,22 @@ function useInit(cb) {
 
 // src/state/ContextContainer.ts
 var ContextContainer = createContext(null);
+var NO_CONTAINER_ID = -1;
 function useContextContainer() {
   return useContext(ContextContainer);
 }
+function useContainerItemInfo(containerContext) {
+  var _a3;
+  const containerId = (_a3 = containerContext == null ? void 0 : containerContext.containerId) != null ? _a3 : NO_CONTAINER_ID;
+  const [itemInfo] = useArr$([`containerItemInfo${containerId}`]);
+  return containerContext ? itemInfo : void 0;
+}
+function useContainerItemKey(containerContext) {
+  var _a3;
+  const containerId = (_a3 = containerContext == null ? void 0 : containerContext.containerId) != null ? _a3 : NO_CONTAINER_ID;
+  const [itemKey] = useArr$([`containerItemKey${containerId}`]);
+  return containerContext ? itemKey : void 0;
+}
 function useAdaptiveRender() {
   const [mode] = useArr$(["adaptiveRender"]);
   return mode;
@@ -605,40 +629,35 @@ function useViewabilityAmount(callback) {
 }
 function useRecyclingEffect(effect) {
   const containerContext = useContextContainer();
-  const prevValues = useRef({
-    prevIndex: void 0,
-    prevItem: void 0
-  });
+  const itemInfo = useContainerItemInfo(containerContext);
+  const prevInfo = useRef(void 0);
   useEffect(() => {
-    if (!containerContext) {
+    if (!itemInfo) {
       return;
     }
-    const { index, value } = containerContext;
     let ret;
-    if (prevValues.current.prevIndex !== void 0 && prevValues.current.prevItem !== void 0) {
+    if (prevInfo.current) {
       ret = effect({
-        index,
-        item: value,
-        prevIndex: prevValues.current.prevIndex,
-        prevItem: prevValues.current.prevItem
+        index: itemInfo.index,
+        item: itemInfo.value,
+        prevIndex: prevInfo.current.index,
+        prevItem: prevInfo.current.value
       });
     }
-    prevValues.current = {
-      prevIndex: index,
-      prevItem: value
-    };
+    prevInfo.current = itemInfo;
     return ret;
-  }, [effect, containerContext]);
+  }, [effect, itemInfo]);
 }
 function useRecyclingState(valueOrFun) {
-  var _a3, _b;
+  var _a3;
   const containerContext = useContextContainer();
-  const computeValue = (ctx) => {
+  const itemInfo = useContainerItemInfo(containerContext);
+  const computeValue = (info) => {
     if (isFunction(valueOrFun)) {
       const initializer = valueOrFun;
-      return ctx ? initializer({
-        index: ctx.index,
-        item: ctx.value,
+      return info ? initializer({
+        index: info.index,
+        item: info.value,
         prevIndex: void 0,
         prevItem: void 0
       }) : initializer();
@@ -646,13 +665,12 @@ function useRecyclingState(valueOrFun) {
     return valueOrFun;
   };
   const [stateValue, setStateValue] = useState(() => {
-    return computeValue(containerContext);
+    return computeValue(itemInfo);
   });
-  const prevItemKeyRef = useRef((_a3 = containerContext == null ? void 0 : containerContext.itemKey) != null ? _a3 : null);
-  const currentItemKey = (_b = containerContext == null ? void 0 : containerContext.itemKey) != null ? _b : null;
-  if (currentItemKey !== null && prevItemKeyRef.current !== currentItemKey) {
-    prevItemKeyRef.current = currentItemKey;
-    setStateValue(computeValue(containerContext));
+  const prevItemKeyRef = useRef((_a3 = itemInfo == null ? void 0 : itemInfo.itemKey) != null ? _a3 : null);
+  if (itemInfo && prevItemKeyRef.current !== itemInfo.itemKey) {
+    prevItemKeyRef.current = itemInfo.itemKey;
+    setStateValue(computeValue(itemInfo));
   }
   const triggerLayout = containerContext == null ? void 0 : containerContext.triggerLayout;
   const setState = useCallback(
@@ -671,12 +689,10 @@ function useRecyclingState(valueOrFun) {
 }
 function useIsLastItem() {
   const containerContext = useContextContainer();
+  const itemKey = useContainerItemKey(containerContext);
   const isLast = useSelector$("lastItemKeys", (lastItemKeys) => {
-    if (containerContext) {
-      const { itemKey } = containerContext;
-      if (!isNullOrUndefined(itemKey)) {
-        return (lastItemKeys == null ? void 0 : lastItemKeys.includes(itemKey)) || false;
-      }
+    if (containerContext && !isNullOrUndefined(itemKey)) {
+      return (lastItemKeys == null ? void 0 : lastItemKeys.includes(itemKey)) || false;
     }
     return false;
   });
@@ -690,12 +706,7 @@ var noop = () => {
 };
 function useSyncLayout() {
   const containerContext = useContextContainer();
-  if (containerContext) {
-    const { triggerLayout: syncLayout } = containerContext;
-    return syncLayout;
-  } else {
-    return noop;
-  }
+  return containerContext ? containerContext.triggerLayout : noop;
 }
 
 // src/components/Separator.tsx
@@ -1463,6 +1474,7 @@ function finishScrollTo(ctx) {
     const scrollingTo = state.scrollingTo;
     state.scrollHistory.length = 0;
     state.scrollingTo = void 0;
+    state.scrollTargetPinnedRange = void 0;
     if (state.pendingTotalSize !== void 0) {
       addTotalSize(ctx, null, state.pendingTotalSize);
     }
@@ -1956,6 +1968,8 @@ function prepareMVCP(ctx, dataChanged) {
 }
 
 // src/utils/getScrollVelocity.ts
+var MAX_SCROLL_VELOCITY_WINDOW_MS = 1e3;
+var SCROLL_VELOCITY_HALF_LIFE_MS = 200;
 var getScrollVelocity = (state) => {
   const { scrollHistory } = state;
   const newestIndex = scrollHistory.length - 1;
@@ -1963,35 +1977,37 @@ var getScrollVelocity = (state) => {
     return 0;
   }
   const newest = scrollHistory[newestIndex];
-  const now = Date.now();
-  let direction = 0;
-  for (let i = newestIndex; i > 0; i--) {
-    const delta = scrollHistory[i].scroll - scrollHistory[i - 1].scroll;
-    if (delta !== 0) {
-      direction = Math.sign(delta);
-      break;
-    }
-  }
-  if (direction === 0) {
+  if (Date.now() - newest.time > MAX_SCROLL_VELOCITY_WINDOW_MS) {
     return 0;
   }
-  let oldest = newest;
-  for (let i = newestIndex - 1; i >= 0; i--) {
+  let direction = 0;
+  let weightedVelocity = 0;
+  let totalWeight = 0;
+  for (let i = newestIndex; i > 0; i--) {
     const current = scrollHistory[i];
-    const next = scrollHistory[i + 1];
-    const delta = next.scroll - current.scroll;
-    const deltaSign = Math.sign(delta);
-    if (deltaSign !== 0 && deltaSign !== direction) {
-      break;
+    const previous = scrollHistory[i - 1];
+    const scrollDiff = current.scroll - previous.scroll;
+    const timeDiff = current.time - previous.time;
+    const deltaSign = Math.sign(scrollDiff);
+    if (deltaSign !== 0) {
+      if (direction === 0) {
+        direction = deltaSign;
+      } else if (deltaSign !== direction) {
+        break;
+      }
     }
-    if (now - current.time > 1e3) {
+    if (newest.time - previous.time > MAX_SCROLL_VELOCITY_WINDOW_MS) {
       break;
     }
-    oldest = current;
+    if (scrollDiff === 0 || timeDiff <= 0) {
+      continue;
+    }
+    const age = newest.time - current.time;
+    const weight = Math.exp(-age / SCROLL_VELOCITY_HALF_LIFE_MS);
+    weightedVelocity += scrollDiff / timeDiff * weight;
+    totalWeight += weight;
   }
-  const scrollDiff = newest.scroll - oldest.scroll;
-  const timeDiff = newest.time - oldest.time;
-  return timeDiff > 0 ? scrollDiff / timeDiff : 0;
+  return totalWeight > 0 ? weightedVelocity / totalWeight : 0;
 };
 
 // src/core/updateScroll.ts
@@ -2108,8 +2124,93 @@ function syncInitialScrollNativeWatchdog(state, options) {
     initialScrollWatchdog.clear(state);
   }
 }
-function scrollTo(ctx, params) {
+function findPositionIndexAtOrBeforeOffset(ctx, offset) {
+  const state = ctx.state;
+  const dataLength = state.props.data.length;
+  let low = 0;
+  let high = dataLength - 1;
+  let match;
+  while (low <= high) {
+    const mid = Math.floor((low + high) / 2);
+    const top = state.positions[mid];
+    if (top === void 0) {
+      high = mid - 1;
+    } else {
+      if (top <= offset) {
+        match = mid;
+        low = mid + 1;
+      } else {
+        high = mid - 1;
+      }
+    }
+  }
+  return match;
+}
+function getItemBottom(ctx, index) {
   var _a3;
+  const top = ctx.state.positions[index];
+  if (top === void 0) {
+    return void 0;
+  }
+  const itemSize = (_a3 = getItemSizeAtIndex(ctx, index)) != null ? _a3 : 0;
+  return top + (Number.isFinite(itemSize) ? itemSize : 0);
+}
+function getTargetViewportRenderRange(ctx, targetOffset, targetIndex) {
+  const state = ctx.state;
+  const dataLength = state.props.data.length;
+  if (dataLength === 0) {
+    return void 0;
+  }
+  const viewportStart = Math.max(0, targetOffset);
+  const viewportEnd = Math.max(viewportStart, targetOffset + state.scrollLength);
+  let start = targetIndex !== void 0 ? Math.max(0, Math.min(dataLength - 1, targetIndex)) : findPositionIndexAtOrBeforeOffset(ctx, viewportStart);
+  if (start === void 0) {
+    return void 0;
+  }
+  if (targetIndex !== void 0 && state.positions[start] === void 0) {
+    return { end: start, start };
+  }
+  if (targetIndex === void 0) {
+    const startBottom = getItemBottom(ctx, start);
+    if (startBottom === void 0 || startBottom <= viewportStart) {
+      return void 0;
+    }
+  }
+  while (start > 0) {
+    const top = state.positions[start];
+    if (top === void 0 || top <= viewportStart || state.positions[start - 1] === void 0) {
+      break;
+    }
+    start--;
+  }
+  while (start > 0) {
+    const previousBottom = getItemBottom(ctx, start - 1);
+    if (previousBottom === void 0 || previousBottom <= viewportStart) {
+      break;
+    }
+    start--;
+  }
+  let end = start;
+  while (end + 1 < dataLength) {
+    const nextTop = state.positions[end + 1];
+    if (nextTop === void 0 || nextTop > viewportEnd) {
+      break;
+    }
+    end++;
+  }
+  return { end, start };
+}
+function pinScrollTargetRenderRange(ctx, targetOffset, targetIndex) {
+  const range = getTargetViewportRenderRange(ctx, targetOffset, targetIndex);
+  if (range) {
+    ctx.state.scrollTargetPinnedRange = range;
+    ctx.state.scrollForNextCalculateItemsInView = void 0;
+  } else {
+    ctx.state.scrollTargetPinnedRange = void 0;
+  }
+}
+function scrollTo(ctx, params) {
+  var _a3, _b;
   const state = ctx.state;
   const { noScrollingTo, forceScroll, ...scrollTarget } = params;
   const {
@@ -2144,11 +2245,20 @@ function scrollTo(ctx, params) {
       targetOffset,
       waitForInitialScrollCompletionFrame
     };
+    if (!isInitialScroll) {
+      pinScrollTargetRenderRange(ctx, targetOffset, scrollTarget.index);
+    }
   }
   state.scrollPending = targetOffset;
   syncInitialScrollNativeWatchdog(state, { isInitialScroll, requestedOffset: offset, targetOffset });
-  if (!animated && !isInitialScroll && !noScrollingTo && Math.abs(state.scroll - targetOffset) > 1) {
-    updateScroll(ctx, targetOffset, false, { markHasScrolled: false });
+  if (!isInitialScroll && !noScrollingTo && Math.abs(state.scroll - targetOffset) > 1) {
+    if (animated) {
+      if (state.scrollTargetPinnedRange) {
+        (_b = state.triggerCalculateItemsInView) == null ? void 0 : _b.call(state);
+      }
+    } else {
+      updateScroll(ctx, targetOffset, true, { markHasScrolled: false });
+    }
   }
   if (forceScroll || !isInitialScroll || Platform.OS === "android") {
     doScrollTo(ctx, { animated, horizontal, offset });
@@ -3236,22 +3346,28 @@ function syncMountedContainer(ctx, containerIndex, itemIndex, options) {
       set$(ctx, `containerSpan${containerIndex}`, span);
     }
   }
+  const prevItemInfo = peek$(ctx, `containerItemInfo${containerIndex}`);
   const prevData = peek$(ctx, `containerItemData${containerIndex}`);
+  let itemInfoValue = prevData;
+  let didChangeItemInfo = (prevItemInfo == null ? void 0 : prevItemInfo.itemKey) !== itemKey || (prevItemInfo == null ? void 0 : prevItemInfo.index) !== itemIndex || (prevItemInfo == null ? void 0 : prevItemInfo.value) !== prevData;
+  const updateData = () => {
+    set$(ctx, `containerItemData${containerIndex}`, item);
+    itemInfoValue = item;
+    didChangeItemInfo = true;
+    didRefreshData = true;
+  };
   if (prevData !== item) {
     const pendingDataComparison = ((_e = state.pendingDataComparison) == null ? void 0 : _e.previousData) === state.previousData && ((_f = state.pendingDataComparison) == null ? void 0 : _f.nextData) === data ? state.pendingDataComparison : void 0;
     const cachedComparison = (_g = pendingDataComparison == null ? void 0 : pendingDataComparison.byIndex[itemIndex]) != null ? _g : 0;
     if (cachedComparison === 2) {
-      set$(ctx, `containerItemData${containerIndex}`, item);
-      didRefreshData = true;
+      updateData();
     } else if (cachedComparison !== 1) {
       const nextItemKey = (_h = peek$(ctx, `containerItemKey${containerIndex}`)) != null ? _h : itemKey;
       const prevKey = keyExtractor == null ? void 0 : keyExtractor(prevData, itemIndex);
       if (prevData === void 0 || !keyExtractor || prevKey !== nextItemKey) {
-        set$(ctx, `containerItemData${containerIndex}`, item);
-        didRefreshData = true;
+        updateData();
       } else if (!itemsAreEqual) {
-        set$(ctx, `containerItemData${containerIndex}`, item);
-        didRefreshData = true;
+        updateData();
       } else {
         const isEqual = itemsAreEqual(prevData, item, itemIndex, data);
         if (!state.pendingDataComparison || state.pendingDataComparison.previousData !== state.previousData || state.pendingDataComparison.nextData !== data) {
@@ -3267,12 +3383,18 @@ function syncMountedContainer(ctx, containerIndex, itemIndex, options) {
           state.pendingDataComparison.byIndex[itemIndex] = isEqual ? 1 : 2;
         }
         if (!isEqual) {
-          set$(ctx, `containerItemData${containerIndex}`, item);
-          didRefreshData = true;
+          updateData();
         }
       }
     }
   }
+  if (didChangeItemInfo) {
+    set$(ctx, `containerItemInfo${containerIndex}`, {
+      index: itemIndex,
+      itemKey,
+      value: itemInfoValue
+    });
+  }
   return { didChangePosition, didRefreshData };
 }
 
@@ -3965,6 +4087,32 @@ function setDidLayout(ctx) {
 }
 
 // src/core/calculateItemsInView.ts
+var RENDER_RANGE_PROJECTION_FULL_VELOCITY = 4;
+var RENDER_RANGE_PROJECTION_SETTLE_DELAY = 100;
+function getProjectedBufferAdjustment(scrollVelocity, trailingBuffer) {
+  if (trailingBuffer <= 0) {
+    return 0;
+  }
+  const velocityProgress = Math.min(1, Math.abs(scrollVelocity) / RENDER_RANGE_PROJECTION_FULL_VELOCITY);
+  return Math.sign(scrollVelocity) * trailingBuffer * velocityProgress;
+}
+function scheduleRenderRangeProjectionSettle(ctx) {
+  const state = ctx.state;
+  const previousTimeout = state.timeoutRenderRangeProjectionSettle;
+  if (previousTimeout !== void 0) {
+    clearTimeout(previousTimeout);
+    state.timeouts.delete(previousTimeout);
+  }
+  const timeout = setTimeout(() => {
+    var _a3;
+    state.timeoutRenderRangeProjectionSettle = void 0;
+    state.timeouts.delete(timeout);
+    state.scrollHistory.length = 0;
+    (_a3 = state.triggerCalculateItemsInView) == null ? void 0 : _a3.call(state);
+  }, RENDER_RANGE_PROJECTION_SETTLE_DELAY);
+  state.timeoutRenderRangeProjectionSettle = timeout;
+  state.timeouts.add(timeout);
+}
 function findCurrentStickyIndex(stickyArray, scroll, state) {
   const positions = state.positions;
   for (let i = stickyArray.length - 1; i >= 0; i--) {
@@ -4005,14 +4153,14 @@ function handleStickyActivation(ctx, stickyArray, currentStickyIdx, needNewConta
     }
   }
 }
-function handleStickyRecycling(ctx, stickyArray, scroll, drawDistance, currentStickyIdx, pendingRemoval, alwaysRenderIndicesSet) {
+function handleStickyRecycling(ctx, stickyArray, scroll, drawDistance, currentStickyIdx, pendingRemoval, isPinnedRenderIndex) {
   var _a3, _b;
   const state = ctx.state;
   for (const containerIndex of state.stickyContainerPool) {
     const itemKey = peek$(ctx, `containerItemKey${containerIndex}`);
     const itemIndex = itemKey ? state.indexByKey.get(itemKey) : void 0;
     if (itemIndex === void 0) continue;
-    if (alwaysRenderIndicesSet.has(itemIndex)) continue;
+    if (isPinnedRenderIndex(itemIndex)) continue;
     const arrayIdx = stickyArray.indexOf(itemIndex);
     if (arrayIdx === -1) {
       state.stickyContainerPool.delete(containerIndex);
@@ -4176,8 +4324,6 @@ function calculateItemsInView(ctx, params = {}) {
     const { data } = state.props;
     const stickyHeaderIndicesArr = state.props.stickyHeaderIndicesArr || [];
     const stickyHeaderIndicesSet = state.props.stickyHeaderIndicesSet || /* @__PURE__ */ new Set();
-    const alwaysRenderArr = alwaysRenderIndicesArr || [];
-    const alwaysRenderSet = alwaysRenderIndicesSet || /* @__PURE__ */ new Set();
     const drawDistance = getEffectiveDrawDistance(ctx, params.drawDistanceMode);
     const { dataChanged, doMVCP, forceFullItemPositions } = params;
     const bootstrapInitialScrollState = ((_a3 = state.initialScrollSession) == null ? void 0 : _a3.kind) === "bootstrap" ? state.initialScrollSession.bootstrap : void 0;
@@ -4244,14 +4390,19 @@ function calculateItemsInView(ctx, params = {}) {
       scrollBufferTop = drawDistance * 1.5;
       scrollBufferBottom = drawDistance * 0.5;
     }
+    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);
-      scrollTopBuffered = scrollStart - scrollBufferTop;
       scrollBottom = Math.max(scrollStart, scroll + scrollLength + overscrollBeforeContent);
-      scrollBottomBuffered = scrollBottom + scrollBufferBottom;
+      scrollTopBuffered = scrollStart - scrollBufferTop + projectedBufferAdjustment;
+      scrollBottomBuffered = scrollBottom + scrollBufferBottom + projectedBufferAdjustment;
     };
     updateScrollRange();
+    if (projectedBufferAdjustment !== 0) {
+      scheduleRenderRangeProjectionSettle(ctx);
+    }
     if (enableScrollForNextCalculateItemsInView && !suppressInitialScrollSideEffects && !dataChanged && !forceFullItemPositions && scrollForNextCalculateItemsInView) {
       const { top, bottom } = scrollForNextCalculateItemsInView;
       if (top === null && bottom === null) {
@@ -4409,9 +4560,34 @@ function calculateItemsInView(ctx, params = {}) {
         }
       }
     }
+    const scrollTargetPinnedRange = state.scrollTargetPinnedRange;
+    let scrollTargetPinnedStart = 0;
+    let scrollTargetPinnedEnd = -1;
+    if (scrollTargetPinnedRange) {
+      scrollTargetPinnedStart = Math.max(0, Math.min(scrollTargetPinnedRange.start, scrollTargetPinnedRange.end));
+      scrollTargetPinnedEnd = Math.min(
+        dataLength - 1,
+        Math.max(scrollTargetPinnedRange.start, scrollTargetPinnedRange.end)
+      );
+    }
+    const hasScrollTargetPinnedRange = scrollTargetPinnedStart <= scrollTargetPinnedEnd;
+    const isPinnedRenderIndex = (index) => alwaysRenderIndicesSet.has(index) || hasScrollTargetPinnedRange && index >= scrollTargetPinnedStart && index <= scrollTargetPinnedEnd;
     if (startBuffered !== null && endBuffered !== null) {
       const needNewContainers = [];
       const needNewContainersSet = /* @__PURE__ */ new Set();
+      const addPinnedIndex = (index) => {
+        var _a4;
+        if (index >= 0 && index < dataLength) {
+          const id = (_a4 = idCache[index]) != null ? _a4 : getId(state, index);
+          const containerIndex = containerItemKeys.get(id);
+          if (containerIndex !== void 0) {
+            state.stickyContainerPool.add(containerIndex);
+          } else if (!isNullOrUndefined(id) && !needNewContainersSet.has(index)) {
+            needNewContainersSet.add(index);
+            needNewContainers.push(index);
+          }
+        }
+      };
       for (let i = startBuffered; i <= endBuffered; i++) {
         const id = (_m = idCache[i]) != null ? _m : getId(state, i);
         if (!containerItemKeys.has(id)) {
@@ -4419,21 +4595,19 @@ function calculateItemsInView(ctx, params = {}) {
           needNewContainers.push(i);
         }
       }
-      if (alwaysRenderArr.length > 0) {
-        for (const index of alwaysRenderArr) {
-          if (index < 0 || index >= dataLength) continue;
-          const id = (_n = idCache[index]) != null ? _n : getId(state, index);
-          if (id && !containerItemKeys.has(id) && !needNewContainersSet.has(index)) {
-            needNewContainersSet.add(index);
-            needNewContainers.push(index);
-          }
+      for (const index of alwaysRenderIndicesArr) {
+        addPinnedIndex(index);
+      }
+      if (hasScrollTargetPinnedRange) {
+        for (let index = scrollTargetPinnedStart; index <= scrollTargetPinnedEnd; index++) {
+          addPinnedIndex(index);
         }
       }
       if (stickyHeaderIndicesArr.length > 0) {
         handleStickyActivation(
           ctx,
           stickyHeaderIndicesArr,
-          (_o = stickyState == null ? void 0 : stickyState.currentStickyIdx) != null ? _o : -1,
+          (_n = stickyState == null ? void 0 : stickyState.currentStickyIdx) != null ? _n : -1,
           needNewContainers,
           needNewContainersSet,
           startBuffered,
@@ -4459,21 +4633,30 @@ function calculateItemsInView(ctx, params = {}) {
         for (const allocation of availableContainerAllocations) {
           const i = allocation.itemIndex;
           const containerIndex = allocation.containerIndex;
-          const id = (_p = idCache[i]) != null ? _p : getId(state, i);
+          const id = (_o = idCache[i]) != null ? _o : getId(state, i);
           const oldKey = peek$(ctx, `containerItemKey${containerIndex}`);
           if (oldKey && oldKey !== id) {
             containerItemKeys.delete(oldKey);
           }
           set$(ctx, `containerItemKey${containerIndex}`, id);
           set$(ctx, `containerItemData${containerIndex}`, data[i]);
+          set$(ctx, `containerItemInfo${containerIndex}`, {
+            index: i,
+            itemKey: id,
+            value: data[i]
+          });
           if (allocation.itemType !== void 0) {
             state.containerItemTypes.set(containerIndex, allocation.itemType);
           }
           containerItemKeys.set(id, containerIndex);
-          (_q = state.userScrollAnchorReset) == null ? void 0 : _q.keys.add(id);
+          (_p = state.userScrollAnchorReset) == null ? void 0 : _p.keys.add(id);
+          {
+            (_q = state.pendingLayoutEffectMeasurements) != null ? _q : state.pendingLayoutEffectMeasurements = /* @__PURE__ */ new Set();
+            state.pendingLayoutEffectMeasurements.add(id);
+          }
           const containerSticky = `containerSticky${containerIndex}`;
           const isSticky = stickyHeaderIndicesSet.has(i);
-          const isAlwaysRender = alwaysRenderSet.has(i);
+          const isPinnedRender = isPinnedRenderIndex(i);
           if (isSticky) {
             set$(ctx, containerSticky, true);
             state.stickyContainerPool.add(containerIndex);
@@ -4481,9 +4664,9 @@ function calculateItemsInView(ctx, params = {}) {
             if (peek$(ctx, containerSticky)) {
               set$(ctx, containerSticky, false);
             }
-            if (isAlwaysRender) {
+            if (isPinnedRender) {
               state.stickyContainerPool.add(containerIndex);
-            } else if (state.stickyContainerPool.has(containerIndex)) {
+            } else {
               state.stickyContainerPool.delete(containerIndex);
             }
           }
@@ -4498,20 +4681,8 @@ function calculateItemsInView(ctx, params = {}) {
           }
         }
       }
-      if (state.userScrollAnchorReset) {
-        if (state.userScrollAnchorReset.keys.size === 0) {
-          state.userScrollAnchorReset = void 0;
-        }
-      }
-      if (alwaysRenderArr.length > 0) {
-        for (const index of alwaysRenderArr) {
-          if (index < 0 || index >= dataLength) continue;
-          const id = (_r = idCache[index]) != null ? _r : getId(state, index);
-          const containerIndex = containerItemKeys.get(id);
-          if (containerIndex !== void 0) {
-            state.stickyContainerPool.add(containerIndex);
-          }
-        }
+      if (((_r = state.userScrollAnchorReset) == null ? void 0 : _r.keys.size) === 0) {
+        state.userScrollAnchorReset = void 0;
       }
     }
     if (state.stickyContainerPool.size > 0) {
@@ -4522,7 +4693,7 @@ function calculateItemsInView(ctx, params = {}) {
         drawDistance,
         (_s = stickyState == null ? void 0 : stickyState.currentStickyIdx) != null ? _s : -1,
         pendingRemoval,
-        alwaysRenderSet
+        isPinnedRenderIndex
       );
     }
     const pendingRemovalSet = pendingRemoval.length > 0 ? new Set(pendingRemoval) : void 0;
@@ -4540,6 +4711,7 @@ function calculateItemsInView(ctx, params = {}) {
         }
         set$(ctx, `containerItemKey${i}`, void 0);
         set$(ctx, `containerItemData${i}`, void 0);
+        set$(ctx, `containerItemInfo${i}`, void 0);
         set$(ctx, `containerPosition${i}`, POSITION_OUT_OF_VIEW);
         set$(ctx, `containerColumn${i}`, -1);
         set$(ctx, `containerSpan${i}`, 1);
@@ -4681,6 +4853,36 @@ function mergeItemSizeUpdateResult(result, next) {
   result.needsRecalculate || (result.needsRecalculate = next.needsRecalculate);
   result.shouldMaintainScrollAtEnd || (result.shouldMaintainScrollAtEnd = next.shouldMaintainScrollAtEnd);
 }
+var batchedItemSizeRecalculates = /* @__PURE__ */ new WeakMap();
+function flushBatchedItemSizeRecalculate(ctx, didFallback = false, expectedResult) {
+  const result = batchedItemSizeRecalculates.get(ctx);
+  if (!result || expectedResult && result !== expectedResult) {
+    return;
+  }
+  batchedItemSizeRecalculates.delete(ctx);
+  if (didFallback) {
+    ctx.state.pendingLayoutEffectMeasurements = void 0;
+  }
+  flushItemSizeUpdates(ctx, result);
+}
+function queueItemSizeRecalculate(ctx, result) {
+  var _a3, _b;
+  const batch = batchedItemSizeRecalculates.get(ctx);
+  if (batch) {
+    mergeItemSizeUpdateResult(batch, result);
+  } else {
+    const nextBatch = { ...result };
+    batchedItemSizeRecalculates.set(ctx, nextBatch);
+    if ((_a3 = ctx.state.pendingLayoutEffectMeasurements) == null ? void 0 : _a3.size) {
+      requestAnimationFrame(() => {
+        flushBatchedItemSizeRecalculate(ctx, true, nextBatch);
+      });
+    }
+  }
+  if (!((_b = ctx.state.pendingLayoutEffectMeasurements) == null ? void 0 : _b.size)) {
+    flushBatchedItemSizeRecalculate(ctx);
+  }
+}
 function flushItemSizeUpdates(ctx, result) {
   var _a3;
   const state = ctx.state;
@@ -4697,12 +4899,22 @@ function flushItemSizeUpdates(ctx, result) {
 function updateItemSizes(ctx, measurement) {
   var _a3, _b, _c, _d;
   const state = ctx.state;
+  let didDrainLayoutEffectMeasurements = false;
+  if (measurement.fromLayoutEffect) {
+    const pendingLayoutEffectMeasurements = state.pendingLayoutEffectMeasurements;
+    if ((pendingLayoutEffectMeasurements == null ? void 0 : pendingLayoutEffectMeasurements.delete(measurement.itemKey)) && pendingLayoutEffectMeasurements.size === 0) {
+      state.pendingLayoutEffectMeasurements = void 0;
+      didDrainLayoutEffectMeasurements = true;
+    }
+  }
   const pendingKeys = (_a3 = state.userScrollAnchorReset) == null ? void 0 : _a3.keys;
   const shouldBatchPendingMeasurements = measurement.fromLayoutEffect && !!(pendingKeys == null ? void 0 : pendingKeys.size);
+  const shouldQueueRecalculate = !!measurement.fromLayoutEffect;
+  let result;
   if (!shouldBatchPendingMeasurements) {
-    flushItemSizeUpdates(ctx, applyItemSize(ctx, measurement.itemKey, measurement.size));
+    result = applyItemSize(ctx, measurement.itemKey, measurement.size);
   } else {
-    const result = {};
+    result = {};
     const updateContainerItemSize = (itemKey, containerId, size) => {
       if (containerId !== void 0 && peek$(ctx, `containerItemKey${containerId}`) === itemKey) {
         mergeItemSizeUpdateResult(result, applyItemSize(ctx, itemKey, size));
@@ -4720,8 +4932,15 @@ function updateItemSizes(ctx, measurement) {
         });
       }
     }
+  }
+  if (shouldQueueRecalculate && result.needsRecalculate) {
+    queueItemSizeRecalculate(ctx, result);
+  } else {
     flushItemSizeUpdates(ctx, result);
   }
+  if (didDrainLayoutEffectMeasurements) {
+    flushBatchedItemSizeRecalculate(ctx);
+  }
 }
 function applyItemSize(ctx, itemKey, sizeObj) {
   var _a3;
@@ -5113,12 +5332,9 @@ var Container = typedMemo(function Container2({
     ctx.viewRefs.set(id, ref);
     return {
       containerId: id,
-      index,
-      itemKey,
-      triggerLayout,
-      value: data
+      triggerLayout
     };
-  }, [id, itemKey, index, data, triggerLayout]);
+  }, [id, triggerLayout]);
   useLayoutEffect(() => {
     ctx.containerLayoutTriggers.set(id, triggerLayout);
     return () => {