@legendapp/list 3.0.0-beta.18 → 3.0.0-beta.19

package/index.d.mts

@@ -410,7 +410,7 @@ interface InternalState {
         avg: number;
     }>;
     columns: Map<string, number>;
-    containerItemKeys: Set<string>;
+    containerItemKeys: Map<string, number>;
     containerItemTypes: Map<number, string>;
     dataChangeNeedsScrollUpdate: boolean;
     didColumnsChange?: boolean;
@@ -442,6 +442,7 @@ interface InternalState {
     lastBatchingAction: number;
     lastLayout: LayoutRectangle | undefined;
     lastScrollAdjustForHistory?: number;
+    lastScrollDelta: number;
     loadStartTime: number;
     maintainingScrollAtEnd?: boolean;
     minIndexSizeChanged: number | undefined;

package/index.d.ts

@@ -410,7 +410,7 @@ interface InternalState {
         avg: number;
     }>;
     columns: Map<string, number>;
-    containerItemKeys: Set<string>;
+    containerItemKeys: Map<string, number>;
     containerItemTypes: Map<number, string>;
     dataChangeNeedsScrollUpdate: boolean;
     didColumnsChange?: boolean;
@@ -442,6 +442,7 @@ interface InternalState {
     lastBatchingAction: number;
     lastLayout: LayoutRectangle | undefined;
     lastScrollAdjustForHistory?: number;
+    lastScrollDelta: number;
     loadStartTime: number;
     maintainingScrollAtEnd?: boolean;
     minIndexSizeChanged: number | undefined;

package/index.js

@@ -287,6 +287,11 @@ function extractPadding(style, contentContainerStyle, type) {
   return getPadding(style, type) + getPadding(contentContainerStyle, type);
 }
 function findContainerId(ctx, key) {
+  var _a3, _b;
+  const directMatch = (_b = (_a3 = ctx.state) == null ? void 0 : _a3.containerItemKeys) == null ? void 0 : _b.get(key);
+  if (directMatch !== void 0) {
+    return directMatch;
+  }
   const numContainers = peek$(ctx, "numContainers");
   for (let i = 0; i < numContainers; i++) {
     const itemKey = peek$(ctx, `containerItemKey${i}`);
@@ -1713,9 +1718,9 @@ function checkAtTop(state) {
 
 // src/core/updateScroll.ts
 function updateScroll(ctx, newScroll, forceUpdate) {
-  var _a3;
   const state = ctx.state;
   const { scrollingTo, scrollAdjustHandler, lastScrollAdjustForHistory } = state;
+  const prevScroll = state.scroll;
   state.hasScrolled = true;
   state.lastBatchingAction = Date.now();
   const currentTime = Date.now();
@@ -1733,7 +1738,7 @@ function updateScroll(ctx, newScroll, forceUpdate) {
   if (state.scrollHistory.length > 5) {
     state.scrollHistory.shift();
   }
-  state.scrollPrev = state.scroll;
+  state.scrollPrev = prevScroll;
   state.scrollPrevTime = state.scrollTime;
   state.scroll = newScroll;
   state.scrollTime = currentTime;
@@ -1745,15 +1750,27 @@ function updateScroll(ctx, newScroll, forceUpdate) {
       return;
     }
   }
+  const scrollDelta = Math.abs(newScroll - prevScroll);
+  const scrollLength = state.scrollLength;
   const lastCalculated = state.scrollLastCalculate;
   const shouldUpdate = state.dataChangeNeedsScrollUpdate || state.scrollLastCalculate === void 0 || lastCalculated === void 0 || Math.abs(state.scroll - lastCalculated) > 2;
   if (shouldUpdate) {
     state.scrollLastCalculate = state.scroll;
     state.ignoreScrollFromMVCPIgnored = false;
-    (_a3 = state.triggerCalculateItemsInView) == null ? void 0 : _a3.call(state, { doMVCP: scrollingTo !== void 0 });
-    checkAtBottom(ctx);
-    checkAtTop(state);
+    state.lastScrollDelta = scrollDelta;
+    const runCalculateItems = () => {
+      var _a3;
+      (_a3 = state.triggerCalculateItemsInView) == null ? void 0 : _a3.call(state, { doMVCP: scrollingTo !== void 0 });
+      checkAtBottom(ctx);
+      checkAtTop(state);
+    };
+    if (scrollLength > 0 && scrollingTo === void 0 && scrollDelta > scrollLength) {
+      reactDom.flushSync(runCalculateItems);
+    } else {
+      runCalculateItems();
+    }
     state.dataChangeNeedsScrollUpdate = false;
+    state.lastScrollDelta = 0;
   }
 }
 
@@ -2033,7 +2050,9 @@ function updateItemPositions(ctx, dataChanged, { startIndex, scrollBottomBuffere
   const numColumns = peek$(ctx, "numColumns");
   const hasColumns = numColumns > 1;
   const indexByKeyForChecking = IS_DEV ? /* @__PURE__ */ new Map() : void 0;
-  const shouldOptimize = !forceFullUpdate && !dataChanged && Math.abs(getScrollVelocity(state)) > 0;
+  const lastScrollDelta = state.lastScrollDelta;
+  const velocity = getScrollVelocity(state);
+  const shouldOptimize = !forceFullUpdate && !dataChanged && (Math.abs(velocity) > 0 || state.scrollLength > 0 && lastScrollDelta > state.scrollLength);
   const maxVisibleArea = scrollBottomBuffered + 1e3;
   const useAverageSize = !getEstimatedItemSize;
   const preferCachedSize = !doMVCP || dataChanged || state.scrollAdjustHandler.getAdjust() !== 0 || ((_a3 = peek$(ctx, "scrollAdjustPending")) != null ? _a3 : 0) !== 0;
@@ -2806,7 +2825,7 @@ function calculateItemsInView(ctx, params = {}) {
           if (requiredItemTypes) {
             state.containerItemTypes.set(containerIndex, requiredItemTypes[idx]);
           }
-          containerItemKeys.add(id);
+          containerItemKeys.set(id, containerIndex);
           const containerSticky = `containerSticky${containerIndex}`;
           if (stickyIndicesSet.has(i)) {
             set$(ctx, containerSticky, true);
@@ -3299,14 +3318,8 @@ function updateItemSize(ctx, itemKey, sizeObj) {
     minIndexSizeChanged = minIndexSizeChanged !== void 0 ? Math.min(minIndexSizeChanged, index) : index;
     const { startBuffered, endBuffered } = state;
     needsRecalculate || (needsRecalculate = index >= startBuffered && index <= endBuffered);
-    if (!needsRecalculate) {
-      const numContainers = ctx.values.get("numContainers");
-      for (let i = 0; i < numContainers; i++) {
-        if (peek$(ctx, `containerItemKey${i}`) === itemKey) {
-          needsRecalculate = true;
-          break;
-        }
-      }
+    if (!needsRecalculate && state.containerItemKeys.has(itemKey)) {
+      needsRecalculate = true;
     }
     if (state.needsOtherAxisSize) {
       const otherAxisSize = horizontal ? sizeObj.height : sizeObj.width;
@@ -3732,7 +3745,7 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
         activeStickyIndex: -1,
         averageSizes: {},
         columns: /* @__PURE__ */ new Map(),
-        containerItemKeys: /* @__PURE__ */ new Set(),
+        containerItemKeys: /* @__PURE__ */ new Map(),
         containerItemTypes: /* @__PURE__ */ new Map(),
         dataChangeNeedsScrollUpdate: false,
         didColumnsChange: false,
@@ -3760,6 +3773,7 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
         isStartReached: null,
         lastBatchingAction: Date.now(),
         lastLayout: void 0,
+        lastScrollDelta: 0,
         loadStartTime: Date.now(),
         minIndexSizeChanged: 0,
         nativeMarginTop: 0,

package/index.mjs

@@ -1,7 +1,7 @@
 import * as React3 from 'react';
 import React3__default, { forwardRef, useReducer, useEffect, createContext, useRef, useState, useMemo, useCallback, useImperativeHandle, useLayoutEffect, memo, useContext } from 'react';
 import { useSyncExternalStore } from 'use-sync-external-store/shim';
-import { unstable_batchedUpdates } from 'react-dom';
+import { unstable_batchedUpdates, flushSync } from 'react-dom';
 
 // src/components/LegendList.tsx
 forwardRef(function AnimatedView2(props, ref) {
@@ -266,6 +266,11 @@ function extractPadding(style, contentContainerStyle, type) {
   return getPadding(style, type) + getPadding(contentContainerStyle, type);
 }
 function findContainerId(ctx, key) {
+  var _a3, _b;
+  const directMatch = (_b = (_a3 = ctx.state) == null ? void 0 : _a3.containerItemKeys) == null ? void 0 : _b.get(key);
+  if (directMatch !== void 0) {
+    return directMatch;
+  }
   const numContainers = peek$(ctx, "numContainers");
   for (let i = 0; i < numContainers; i++) {
     const itemKey = peek$(ctx, `containerItemKey${i}`);
@@ -1692,9 +1697,9 @@ function checkAtTop(state) {
 
 // src/core/updateScroll.ts
 function updateScroll(ctx, newScroll, forceUpdate) {
-  var _a3;
   const state = ctx.state;
   const { scrollingTo, scrollAdjustHandler, lastScrollAdjustForHistory } = state;
+  const prevScroll = state.scroll;
   state.hasScrolled = true;
   state.lastBatchingAction = Date.now();
   const currentTime = Date.now();
@@ -1712,7 +1717,7 @@ function updateScroll(ctx, newScroll, forceUpdate) {
   if (state.scrollHistory.length > 5) {
     state.scrollHistory.shift();
   }
-  state.scrollPrev = state.scroll;
+  state.scrollPrev = prevScroll;
   state.scrollPrevTime = state.scrollTime;
   state.scroll = newScroll;
   state.scrollTime = currentTime;
@@ -1724,15 +1729,27 @@ function updateScroll(ctx, newScroll, forceUpdate) {
       return;
     }
   }
+  const scrollDelta = Math.abs(newScroll - prevScroll);
+  const scrollLength = state.scrollLength;
   const lastCalculated = state.scrollLastCalculate;
   const shouldUpdate = state.dataChangeNeedsScrollUpdate || state.scrollLastCalculate === void 0 || lastCalculated === void 0 || Math.abs(state.scroll - lastCalculated) > 2;
   if (shouldUpdate) {
     state.scrollLastCalculate = state.scroll;
     state.ignoreScrollFromMVCPIgnored = false;
-    (_a3 = state.triggerCalculateItemsInView) == null ? void 0 : _a3.call(state, { doMVCP: scrollingTo !== void 0 });
-    checkAtBottom(ctx);
-    checkAtTop(state);
+    state.lastScrollDelta = scrollDelta;
+    const runCalculateItems = () => {
+      var _a3;
+      (_a3 = state.triggerCalculateItemsInView) == null ? void 0 : _a3.call(state, { doMVCP: scrollingTo !== void 0 });
+      checkAtBottom(ctx);
+      checkAtTop(state);
+    };
+    if (scrollLength > 0 && scrollingTo === void 0 && scrollDelta > scrollLength) {
+      flushSync(runCalculateItems);
+    } else {
+      runCalculateItems();
+    }
     state.dataChangeNeedsScrollUpdate = false;
+    state.lastScrollDelta = 0;
   }
 }
 
@@ -2012,7 +2029,9 @@ function updateItemPositions(ctx, dataChanged, { startIndex, scrollBottomBuffere
   const numColumns = peek$(ctx, "numColumns");
   const hasColumns = numColumns > 1;
   const indexByKeyForChecking = IS_DEV ? /* @__PURE__ */ new Map() : void 0;
-  const shouldOptimize = !forceFullUpdate && !dataChanged && Math.abs(getScrollVelocity(state)) > 0;
+  const lastScrollDelta = state.lastScrollDelta;
+  const velocity = getScrollVelocity(state);
+  const shouldOptimize = !forceFullUpdate && !dataChanged && (Math.abs(velocity) > 0 || state.scrollLength > 0 && lastScrollDelta > state.scrollLength);
   const maxVisibleArea = scrollBottomBuffered + 1e3;
   const useAverageSize = !getEstimatedItemSize;
   const preferCachedSize = !doMVCP || dataChanged || state.scrollAdjustHandler.getAdjust() !== 0 || ((_a3 = peek$(ctx, "scrollAdjustPending")) != null ? _a3 : 0) !== 0;
@@ -2785,7 +2804,7 @@ function calculateItemsInView(ctx, params = {}) {
           if (requiredItemTypes) {
             state.containerItemTypes.set(containerIndex, requiredItemTypes[idx]);
           }
-          containerItemKeys.add(id);
+          containerItemKeys.set(id, containerIndex);
           const containerSticky = `containerSticky${containerIndex}`;
           if (stickyIndicesSet.has(i)) {
             set$(ctx, containerSticky, true);
@@ -3278,14 +3297,8 @@ function updateItemSize(ctx, itemKey, sizeObj) {
     minIndexSizeChanged = minIndexSizeChanged !== void 0 ? Math.min(minIndexSizeChanged, index) : index;
     const { startBuffered, endBuffered } = state;
     needsRecalculate || (needsRecalculate = index >= startBuffered && index <= endBuffered);
-    if (!needsRecalculate) {
-      const numContainers = ctx.values.get("numContainers");
-      for (let i = 0; i < numContainers; i++) {
-        if (peek$(ctx, `containerItemKey${i}`) === itemKey) {
-          needsRecalculate = true;
-          break;
-        }
-      }
+    if (!needsRecalculate && state.containerItemKeys.has(itemKey)) {
+      needsRecalculate = true;
     }
     if (state.needsOtherAxisSize) {
       const otherAxisSize = horizontal ? sizeObj.height : sizeObj.width;
@@ -3711,7 +3724,7 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
         activeStickyIndex: -1,
         averageSizes: {},
         columns: /* @__PURE__ */ new Map(),
-        containerItemKeys: /* @__PURE__ */ new Set(),
+        containerItemKeys: /* @__PURE__ */ new Map(),
         containerItemTypes: /* @__PURE__ */ new Map(),
         dataChangeNeedsScrollUpdate: false,
         didColumnsChange: false,
@@ -3739,6 +3752,7 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
         isStartReached: null,
         lastBatchingAction: Date.now(),
         lastLayout: void 0,
+        lastScrollDelta: 0,
         loadStartTime: Date.now(),
         minIndexSizeChanged: 0,
         nativeMarginTop: 0,

package/index.native.js

@@ -286,6 +286,11 @@ function extractPadding(style, contentContainerStyle, type) {
   return getPadding(style, type) + getPadding(contentContainerStyle, type);
 }
 function findContainerId(ctx, key) {
+  var _a3, _b;
+  const directMatch = (_b = (_a3 = ctx.state) == null ? void 0 : _a3.containerItemKeys) == null ? void 0 : _b.get(key);
+  if (directMatch !== void 0) {
+    return directMatch;
+  }
   const numContainers = peek$(ctx, "numContainers");
   for (let i = 0; i < numContainers; i++) {
     const itemKey = peek$(ctx, `containerItemKey${i}`);
@@ -1320,6 +1325,11 @@ function scrollTo(ctx, params) {
   }
 }
 
+// src/platform/flushSync.native.ts
+var flushSync = (fn) => {
+  fn();
+};
+
 // src/utils/checkThreshold.ts
 var HYSTERESIS_MULTIPLIER = 1.3;
 var checkThreshold = (distance, atThreshold, threshold, wasReached, snapshot, context, onReached, setSnapshot, allowReentryOnChange) => {
@@ -1443,9 +1453,9 @@ function checkAtTop(state) {
 
 // src/core/updateScroll.ts
 function updateScroll(ctx, newScroll, forceUpdate) {
-  var _a3;
   const state = ctx.state;
   const { scrollingTo, scrollAdjustHandler, lastScrollAdjustForHistory } = state;
+  const prevScroll = state.scroll;
   state.hasScrolled = true;
   state.lastBatchingAction = Date.now();
   const currentTime = Date.now();
@@ -1463,7 +1473,7 @@ function updateScroll(ctx, newScroll, forceUpdate) {
   if (state.scrollHistory.length > 5) {
     state.scrollHistory.shift();
   }
-  state.scrollPrev = state.scroll;
+  state.scrollPrev = prevScroll;
   state.scrollPrevTime = state.scrollTime;
   state.scroll = newScroll;
   state.scrollTime = currentTime;
@@ -1475,15 +1485,27 @@ function updateScroll(ctx, newScroll, forceUpdate) {
       return;
     }
   }
+  const scrollDelta = Math.abs(newScroll - prevScroll);
+  const scrollLength = state.scrollLength;
   const lastCalculated = state.scrollLastCalculate;
   const shouldUpdate = forceUpdate || state.dataChangeNeedsScrollUpdate || state.scrollLastCalculate === void 0 || lastCalculated === void 0 || Math.abs(state.scroll - lastCalculated) > 2;
   if (shouldUpdate) {
     state.scrollLastCalculate = state.scroll;
     state.ignoreScrollFromMVCPIgnored = false;
-    (_a3 = state.triggerCalculateItemsInView) == null ? void 0 : _a3.call(state, { doMVCP: scrollingTo !== void 0 });
-    checkAtBottom(ctx);
-    checkAtTop(state);
+    state.lastScrollDelta = scrollDelta;
+    const runCalculateItems = () => {
+      var _a3;
+      (_a3 = state.triggerCalculateItemsInView) == null ? void 0 : _a3.call(state, { doMVCP: scrollingTo !== void 0 });
+      checkAtBottom(ctx);
+      checkAtTop(state);
+    };
+    if (Platform2.OS === "web" && scrollLength > 0 && scrollingTo === void 0 && scrollDelta > scrollLength) {
+      flushSync(runCalculateItems);
+    } else {
+      runCalculateItems();
+    }
     state.dataChangeNeedsScrollUpdate = false;
+    state.lastScrollDelta = 0;
   }
 }
 
@@ -1848,7 +1870,9 @@ function updateItemPositions(ctx, dataChanged, { startIndex, scrollBottomBuffere
   const numColumns = peek$(ctx, "numColumns");
   const hasColumns = numColumns > 1;
   const indexByKeyForChecking = IS_DEV ? /* @__PURE__ */ new Map() : void 0;
-  const shouldOptimize = !forceFullUpdate && !dataChanged && Math.abs(getScrollVelocity(state)) > 0;
+  const lastScrollDelta = state.lastScrollDelta;
+  const velocity = getScrollVelocity(state);
+  const shouldOptimize = !forceFullUpdate && !dataChanged && (Math.abs(velocity) > 0 || Platform2.OS === "web" && state.scrollLength > 0 && lastScrollDelta > state.scrollLength);
   const maxVisibleArea = scrollBottomBuffered + 1e3;
   const useAverageSize = !getEstimatedItemSize;
   const preferCachedSize = !doMVCP || dataChanged || state.scrollAdjustHandler.getAdjust() !== 0 || ((_a3 = peek$(ctx, "scrollAdjustPending")) != null ? _a3 : 0) !== 0;
@@ -2627,7 +2651,7 @@ function calculateItemsInView(ctx, params = {}) {
           if (requiredItemTypes) {
             state.containerItemTypes.set(containerIndex, requiredItemTypes[idx]);
           }
-          containerItemKeys.add(id);
+          containerItemKeys.set(id, containerIndex);
           const containerSticky = `containerSticky${containerIndex}`;
           if (stickyIndicesSet.has(i)) {
             set$(ctx, containerSticky, true);
@@ -3077,14 +3101,8 @@ function updateItemSize(ctx, itemKey, sizeObj) {
     minIndexSizeChanged = minIndexSizeChanged !== void 0 ? Math.min(minIndexSizeChanged, index) : index;
     const { startBuffered, endBuffered } = state;
     needsRecalculate || (needsRecalculate = index >= startBuffered && index <= endBuffered);
-    if (!needsRecalculate) {
-      const numContainers = ctx.values.get("numContainers");
-      for (let i = 0; i < numContainers; i++) {
-        if (peek$(ctx, `containerItemKey${i}`) === itemKey) {
-          needsRecalculate = true;
-          break;
-        }
-      }
+    if (!needsRecalculate && state.containerItemKeys.has(itemKey)) {
+      needsRecalculate = true;
     }
     if (state.needsOtherAxisSize) {
       const otherAxisSize = horizontal ? sizeObj.height : sizeObj.width;
@@ -3529,7 +3547,7 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
         activeStickyIndex: -1,
         averageSizes: {},
         columns: /* @__PURE__ */ new Map(),
-        containerItemKeys: /* @__PURE__ */ new Set(),
+        containerItemKeys: /* @__PURE__ */ new Map(),
         containerItemTypes: /* @__PURE__ */ new Map(),
         dataChangeNeedsScrollUpdate: false,
         didColumnsChange: false,
@@ -3557,6 +3575,7 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
         isStartReached: null,
         lastBatchingAction: Date.now(),
         lastLayout: void 0,
+        lastScrollDelta: 0,
         loadStartTime: Date.now(),
         minIndexSizeChanged: 0,
         nativeMarginTop: 0,

package/index.native.mjs

@@ -265,6 +265,11 @@ function extractPadding(style, contentContainerStyle, type) {
   return getPadding(style, type) + getPadding(contentContainerStyle, type);
 }
 function findContainerId(ctx, key) {
+  var _a3, _b;
+  const directMatch = (_b = (_a3 = ctx.state) == null ? void 0 : _a3.containerItemKeys) == null ? void 0 : _b.get(key);
+  if (directMatch !== void 0) {
+    return directMatch;
+  }
   const numContainers = peek$(ctx, "numContainers");
   for (let i = 0; i < numContainers; i++) {
     const itemKey = peek$(ctx, `containerItemKey${i}`);
@@ -1299,6 +1304,11 @@ function scrollTo(ctx, params) {
   }
 }
 
+// src/platform/flushSync.native.ts
+var flushSync = (fn) => {
+  fn();
+};
+
 // src/utils/checkThreshold.ts
 var HYSTERESIS_MULTIPLIER = 1.3;
 var checkThreshold = (distance, atThreshold, threshold, wasReached, snapshot, context, onReached, setSnapshot, allowReentryOnChange) => {
@@ -1422,9 +1432,9 @@ function checkAtTop(state) {
 
 // src/core/updateScroll.ts
 function updateScroll(ctx, newScroll, forceUpdate) {
-  var _a3;
   const state = ctx.state;
   const { scrollingTo, scrollAdjustHandler, lastScrollAdjustForHistory } = state;
+  const prevScroll = state.scroll;
   state.hasScrolled = true;
   state.lastBatchingAction = Date.now();
   const currentTime = Date.now();
@@ -1442,7 +1452,7 @@ function updateScroll(ctx, newScroll, forceUpdate) {
   if (state.scrollHistory.length > 5) {
     state.scrollHistory.shift();
   }
-  state.scrollPrev = state.scroll;
+  state.scrollPrev = prevScroll;
   state.scrollPrevTime = state.scrollTime;
   state.scroll = newScroll;
   state.scrollTime = currentTime;
@@ -1454,15 +1464,27 @@ function updateScroll(ctx, newScroll, forceUpdate) {
       return;
     }
   }
+  const scrollDelta = Math.abs(newScroll - prevScroll);
+  const scrollLength = state.scrollLength;
   const lastCalculated = state.scrollLastCalculate;
   const shouldUpdate = forceUpdate || state.dataChangeNeedsScrollUpdate || state.scrollLastCalculate === void 0 || lastCalculated === void 0 || Math.abs(state.scroll - lastCalculated) > 2;
   if (shouldUpdate) {
     state.scrollLastCalculate = state.scroll;
     state.ignoreScrollFromMVCPIgnored = false;
-    (_a3 = state.triggerCalculateItemsInView) == null ? void 0 : _a3.call(state, { doMVCP: scrollingTo !== void 0 });
-    checkAtBottom(ctx);
-    checkAtTop(state);
+    state.lastScrollDelta = scrollDelta;
+    const runCalculateItems = () => {
+      var _a3;
+      (_a3 = state.triggerCalculateItemsInView) == null ? void 0 : _a3.call(state, { doMVCP: scrollingTo !== void 0 });
+      checkAtBottom(ctx);
+      checkAtTop(state);
+    };
+    if (Platform2.OS === "web" && scrollLength > 0 && scrollingTo === void 0 && scrollDelta > scrollLength) {
+      flushSync(runCalculateItems);
+    } else {
+      runCalculateItems();
+    }
     state.dataChangeNeedsScrollUpdate = false;
+    state.lastScrollDelta = 0;
   }
 }
 
@@ -1827,7 +1849,9 @@ function updateItemPositions(ctx, dataChanged, { startIndex, scrollBottomBuffere
   const numColumns = peek$(ctx, "numColumns");
   const hasColumns = numColumns > 1;
   const indexByKeyForChecking = IS_DEV ? /* @__PURE__ */ new Map() : void 0;
-  const shouldOptimize = !forceFullUpdate && !dataChanged && Math.abs(getScrollVelocity(state)) > 0;
+  const lastScrollDelta = state.lastScrollDelta;
+  const velocity = getScrollVelocity(state);
+  const shouldOptimize = !forceFullUpdate && !dataChanged && (Math.abs(velocity) > 0 || Platform2.OS === "web" && state.scrollLength > 0 && lastScrollDelta > state.scrollLength);
   const maxVisibleArea = scrollBottomBuffered + 1e3;
   const useAverageSize = !getEstimatedItemSize;
   const preferCachedSize = !doMVCP || dataChanged || state.scrollAdjustHandler.getAdjust() !== 0 || ((_a3 = peek$(ctx, "scrollAdjustPending")) != null ? _a3 : 0) !== 0;
@@ -2606,7 +2630,7 @@ function calculateItemsInView(ctx, params = {}) {
           if (requiredItemTypes) {
             state.containerItemTypes.set(containerIndex, requiredItemTypes[idx]);
           }
-          containerItemKeys.add(id);
+          containerItemKeys.set(id, containerIndex);
           const containerSticky = `containerSticky${containerIndex}`;
           if (stickyIndicesSet.has(i)) {
             set$(ctx, containerSticky, true);
@@ -3056,14 +3080,8 @@ function updateItemSize(ctx, itemKey, sizeObj) {
     minIndexSizeChanged = minIndexSizeChanged !== void 0 ? Math.min(minIndexSizeChanged, index) : index;
     const { startBuffered, endBuffered } = state;
     needsRecalculate || (needsRecalculate = index >= startBuffered && index <= endBuffered);
-    if (!needsRecalculate) {
-      const numContainers = ctx.values.get("numContainers");
-      for (let i = 0; i < numContainers; i++) {
-        if (peek$(ctx, `containerItemKey${i}`) === itemKey) {
-          needsRecalculate = true;
-          break;
-        }
-      }
+    if (!needsRecalculate && state.containerItemKeys.has(itemKey)) {
+      needsRecalculate = true;
     }
     if (state.needsOtherAxisSize) {
       const otherAxisSize = horizontal ? sizeObj.height : sizeObj.width;
@@ -3508,7 +3526,7 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
         activeStickyIndex: -1,
         averageSizes: {},
         columns: /* @__PURE__ */ new Map(),
-        containerItemKeys: /* @__PURE__ */ new Set(),
+        containerItemKeys: /* @__PURE__ */ new Map(),
         containerItemTypes: /* @__PURE__ */ new Map(),
         dataChangeNeedsScrollUpdate: false,
         didColumnsChange: false,
@@ -3536,6 +3554,7 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
         isStartReached: null,
         lastBatchingAction: Date.now(),
         lastLayout: void 0,
+        lastScrollDelta: 0,
         loadStartTime: Date.now(),
         minIndexSizeChanged: 0,
         nativeMarginTop: 0,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@legendapp/list",
-  "version": "3.0.0-beta.18",
+  "version": "3.0.0-beta.19",
   "description": "Legend List is a drop-in replacement for FlatList with much better performance and supporting dynamically sized items.",
   "sideEffects": false,
   "private": false,