@legendapp/list 1.0.7 → 1.0.9

package/index.js

@@ -2,6 +2,7 @@
 
 var React2 = require('react');
 var reactNative = require('react-native');
+var shim = require('use-sync-external-store/shim');
 
 function _interopNamespace(e) {
   if (e && e.__esModule) return e;
@@ -46,16 +47,43 @@ function StateProvider({ children }) {
 function useStateContext() {
   return React2__namespace.useContext(ContextState);
 }
-function createSelectorFunctions(ctx, signalName) {
+function createSelectorFunctionsArr(ctx, signalNames) {
+  let lastValues = [];
+  let lastSignalValues = [];
   return {
-    subscribe: (cb) => listen$(ctx, signalName, cb),
-    get: () => peek$(ctx, signalName)
+    subscribe: (cb) => {
+      const listeners = [];
+      for (const signalName of signalNames) {
+        listeners.push(listen$(ctx, signalName, cb));
+      }
+      return () => {
+        for (const listener of listeners) {
+          listener();
+        }
+      };
+    },
+    get: () => {
+      const currentValues = [];
+      let hasChanged = false;
+      for (let i = 0; i < signalNames.length; i++) {
+        const value = peek$(ctx, signalNames[i]);
+        currentValues.push(value);
+        if (value !== lastSignalValues[i]) {
+          hasChanged = true;
+        }
+      }
+      lastSignalValues = currentValues;
+      if (hasChanged) {
+        lastValues = currentValues;
+      }
+      return lastValues;
+    }
   };
 }
-function use$(signalName) {
+function useArr$(signalNames) {
   const ctx = React2__namespace.useContext(ContextState);
-  const { subscribe, get } = React2__namespace.useMemo(() => createSelectorFunctions(ctx, signalName), []);
-  const value = React2.useSyncExternalStore(subscribe, get);
+  const { subscribe, get } = React2__namespace.useMemo(() => createSelectorFunctionsArr(ctx, signalNames), [ctx, signalNames]);
+  const value = shim.useSyncExternalStore(subscribe, get);
   return value;
 }
 function listen$(ctx, signalName, cb) {
@@ -99,15 +127,25 @@ var DebugRow = ({ children }) => {
 };
 var DebugView = React2__namespace.memo(function DebugView2({ state }) {
   const ctx = useStateContext();
-  const totalSize = use$("totalSize") || 0;
-  const totalSizeWithScrollAdjust = use$("totalSizeWithScrollAdjust") || 0;
-  const scrollAdjust = use$("scrollAdjust") || 0;
-  const rawScroll = use$("debugRawScroll") || 0;
-  const scroll = use$("debugComputedScroll") || 0;
+  const [
+    totalSize = 0,
+    totalSizeWithScrollAdjust = 0,
+    scrollAdjust = 0,
+    rawScroll = 0,
+    scroll = 0,
+    numContainers = 0,
+    numContainersPooled = 0
+  ] = useArr$([
+    "totalSize",
+    "totalSizeWithScrollAdjust",
+    "scrollAdjust",
+    "debugRawScroll",
+    "debugComputedScroll",
+    "numContainers",
+    "numContainersPooled"
+  ]);
   const contentSize = getContentSize(ctx);
   const [, forceUpdate] = React2.useReducer((x) => x + 1, 0);
-  use$("numContainers");
-  use$("numContainersPooled");
   useInterval(() => {
     forceUpdate();
   }, 100);
@@ -162,6 +200,12 @@ function roundSize(size) {
 function isNullOrUndefined(value) {
   return value === null || value === void 0;
 }
+function comparatorByDistance(a, b) {
+  return b.distance - a.distance;
+}
+function comparatorDefault(a, b) {
+  return a - b;
+}
 var symbolFirst = Symbol();
 function useInit(cb) {
   const refValue = React2.useRef(symbolFirst);
@@ -285,14 +329,25 @@ var Container = ({
 }) => {
   const ctx = useStateContext();
   const columnWrapperStyle = ctx.columnWrapperStyle;
-  const maintainVisibleContentPosition = use$("maintainVisibleContentPosition");
-  const position = use$(`containerPosition${id}`) || ANCHORED_POSITION_OUT_OF_VIEW;
-  const column = use$(`containerColumn${id}`) || 0;
-  const numColumns = use$("numColumns");
-  const lastItemKeys = use$("lastItemKeys");
-  const itemKey = use$(`containerItemKey${id}`);
-  const data = use$(`containerItemData${id}`);
-  const extraData = use$("extraData");
+  const [
+    maintainVisibleContentPosition,
+    position = ANCHORED_POSITION_OUT_OF_VIEW,
+    column = 0,
+    numColumns,
+    lastItemKeys,
+    itemKey,
+    data,
+    extraData
+  ] = useArr$([
+    "maintainVisibleContentPosition",
+    `containerPosition${id}`,
+    `containerColumn${id}`,
+    "numColumns",
+    "lastItemKeys",
+    `containerItemKey${id}`,
+    `containerItemData${id}`,
+    "extraData"
+  ]);
   const refLastSize = React2.useRef();
   const ref = React2.useRef(null);
   const [layoutRenderCount, forceLayoutRender] = React2.useState(0);
@@ -390,11 +445,11 @@ var Container = ({
   const contentFragment = /* @__PURE__ */ React2__namespace.default.createElement(React2__namespace.default.Fragment, { key: recycleItems ? void 0 : itemKey }, /* @__PURE__ */ React2__namespace.default.createElement(ContextContainer.Provider, { value: contextValue }, renderedItem, renderedItemInfo && ItemSeparatorComponent && !lastItemKeys.includes(itemKey) && /* @__PURE__ */ React2__namespace.default.createElement(ItemSeparatorComponent, { leadingItem: renderedItemInfo.item })));
   if (maintainVisibleContentPosition) {
     const anchorStyle = position.type === "top" ? { position: "absolute", top: 0, left: 0, right: 0 } : { position: "absolute", bottom: 0, left: 0, right: 0 };
-    if (ENABLE_DEVMODE) {
+    if (__DEV__ && ENABLE_DEVMODE) {
       anchorStyle.borderColor = position.type === "top" ? "red" : "blue";
       anchorStyle.borderWidth = 1;
     }
-    return /* @__PURE__ */ React2__namespace.default.createElement(LeanView, { style }, /* @__PURE__ */ React2__namespace.default.createElement(LeanView, { style: anchorStyle, onLayout, ref }, contentFragment, ENABLE_DEVMODE && /* @__PURE__ */ React2__namespace.default.createElement(reactNative.Text, { style: { position: "absolute", top: 0, left: 0, zIndex: 1e3 } }, position.top)));
+    return /* @__PURE__ */ React2__namespace.default.createElement(LeanView, { style }, /* @__PURE__ */ React2__namespace.default.createElement(LeanView, { style: anchorStyle, onLayout, ref }, contentFragment, __DEV__ && ENABLE_DEVMODE && /* @__PURE__ */ React2__namespace.default.createElement(reactNative.Text, { style: { position: "absolute", top: 0, left: 0, zIndex: 1e3 } }, position.top)));
   }
   return /* @__PURE__ */ React2__namespace.default.createElement(LeanView, { style, onLayout, ref }, contentFragment);
 };
@@ -438,7 +493,7 @@ var Containers = typedMemo(function Containers2({
 }) {
   const ctx = useStateContext();
   const columnWrapperStyle = ctx.columnWrapperStyle;
-  const numContainers = use$("numContainersPooled");
+  const [numContainers] = useArr$(["numContainersPooled"]);
   const animSize = useValue$(
     "totalSizeWithScrollAdjust",
     void 0,
@@ -1035,10 +1090,10 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
       isAtTop: false,
       data: dataProp,
       scrollLength: initialScrollLength,
-      startBuffered: 0,
-      startNoBuffer: 0,
-      endBuffered: 0,
-      endNoBuffer: 0,
+      startBuffered: -1,
+      startNoBuffer: -1,
+      endBuffered: -1,
+      endNoBuffer: -1,
       scroll: initialContentOffset || 0,
       totalSize: 0,
       totalSizeBelowAnchor: 0,
@@ -1239,6 +1294,7 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
     const state = refState.current;
     if (state.scrollingToOffset === void 0) {
       state.disableScrollJumpsFrom = state.scroll - state.scrollAdjustHandler.getAppliedAdjust();
+      state.scrollHistory.length = 0;
       setTimeout(() => {
         state.disableScrollJumpsFrom = void 0;
       }, timeout);
@@ -1334,7 +1390,7 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
     }
     return false;
   }, []);
-  const calculateItemsInView = React2.useCallback(() => {
+  const calculateItemsInView = React2.useCallback((isReset) => {
     var _a;
     const state = refState.current;
     const {
@@ -1353,14 +1409,15 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
     const topPad = peek$(ctx, "stylePaddingTop") + peek$(ctx, "headerSize");
     const numColumns = peek$(ctx, "numColumns");
     const previousScrollAdjust = scrollAdjustHandler.getAppliedAdjust();
-    const scrollExtra = Math.max(-16, Math.min(16, speed)) * 16;
     let scrollState = state.scroll;
+    const scrollExtra = Math.max(-16, Math.min(16, speed)) * 24;
     const useAverageSize = !state.disableScrollJumpsFrom && speed >= 0 && peek$(ctx, "containersDidLayout");
     if (!state.queuedInitialLayout && initialScrollIndex) {
       const updatedOffset = calculateOffsetForIndex(initialScrollIndex);
       scrollState = updatedOffset;
     }
-    let scroll = scrollState - previousScrollAdjust - topPad;
+    const scrollAdjustPad = -previousScrollAdjust - topPad;
+    let scroll = scrollState + scrollExtra + scrollAdjustPad;
     if (scroll + scrollLength > totalSize) {
       scroll = totalSize - scrollLength;
     }
@@ -1370,13 +1427,14 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
     }
     let scrollBufferTop = scrollBuffer;
     let scrollBufferBottom = scrollBuffer;
-    if (scrollExtra > 8) {
-      scrollBufferTop = 0;
-      scrollBufferBottom = scrollBuffer + scrollExtra;
-    }
-    if (scrollExtra < -8) {
-      scrollBufferTop = scrollBuffer - scrollExtra;
-      scrollBufferBottom = 0;
+    if (Math.abs(speed) > 4) {
+      if (speed > 0) {
+        scrollBufferTop = scrollBuffer * 0.1;
+        scrollBufferBottom = scrollBuffer * 1.9;
+      } else {
+        scrollBufferTop = scrollBuffer * 1.9;
+        scrollBufferBottom = scrollBuffer * 0.1;
+      }
     }
     if (state.scrollForNextCalculateItemsInView) {
       const { top: top2, bottom } = state.scrollForNextCalculateItemsInView;
@@ -1436,6 +1494,8 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
       return topOffset;
     };
     let foundEnd = false;
+    let nextTop;
+    let nextBottom;
     const prevNumContainers = ctx.values.get("numContainers");
     let maxIndexRendered = 0;
     for (let i = 0; i < prevNumContainers; i++) {
@@ -1465,6 +1525,7 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
         if (startBuffered === null && top + size > scroll - scrollBufferTop) {
           startBuffered = i;
           startBufferedId = id;
+          nextTop = top;
         }
         if (startNoBuffer !== null) {
           if (top <= scrollBottom) {
@@ -1472,6 +1533,7 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
           }
           if (top <= scrollBottom + scrollBufferBottom) {
             endBuffered = i;
+            nextBottom = top + maxSizeInRow - scrollLength;
           } else {
             foundEnd = true;
           }
@@ -1484,6 +1546,8 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
         maxSizeInRow = 0;
       }
     }
+    const prevStartBuffered = state.startBuffered;
+    const prevEndBuffered = state.endBuffered;
     Object.assign(state, {
       startBuffered,
       startBufferedId,
@@ -1491,82 +1555,65 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
       endBuffered,
       endNoBuffer
     });
-    const nextTop = Math.ceil(startBuffered !== null ? positions.get(startBufferedId) + scrollBuffer : 0);
-    const nextBottom = Math.floor(
-      endBuffered !== null ? (positions.get(getId(endBuffered + 1)) || 0) - scrollLength - scrollBuffer : 0
-    );
-    if (state.enableScrollForNextCalculateItemsInView) {
-      state.scrollForNextCalculateItemsInView = nextTop >= 0 && nextBottom >= 0 ? {
+    if (state.enableScrollForNextCalculateItemsInView && nextTop !== void 0 && nextBottom !== void 0 && state.disableScrollJumpsFrom === void 0) {
+      state.scrollForNextCalculateItemsInView = nextTop !== void 0 && nextBottom !== void 0 ? {
         top: nextTop,
         bottom: nextBottom
       } : void 0;
     }
     if (startBuffered !== null && endBuffered !== null) {
       let numContainers = prevNumContainers;
-      let didWarnMoreContainers = false;
-      const allocatedContainers = /* @__PURE__ */ new Set();
-      for (let i = startBuffered; i <= endBuffered; i++) {
-        let isContained = false;
-        const id = getId(i);
-        for (let j = 0; j < numContainers; j++) {
-          const key = peek$(ctx, `containerItemKey${j}`);
-          if (key === id) {
-            isContained = true;
-            break;
-          }
-        }
-        if (!isContained) {
-          const top2 = positions.get(id) || 0;
-          let furthestIndex = -1;
-          let furthestDistance = 0;
-          for (let u = 0; u < numContainers; u++) {
-            if (allocatedContainers.has(u)) {
-              continue;
+      const needNewContainers = [];
+      if (isReset || startBuffered < prevStartBuffered || endBuffered > prevEndBuffered) {
+        const isContained = (i) => {
+          const id = getId(i);
+          for (let j = 0; j < numContainers; j++) {
+            const key = peek$(ctx, `containerItemKey${j}`);
+            if (key === id) {
+              return true;
             }
-            const key = peek$(ctx, `containerItemKey${u}`);
-            if (key === void 0) {
-              furthestIndex = u;
-              break;
-            }
-            const index2 = state.indexByKey.get(key);
-            const pos = peek$(ctx, `containerPosition${u}`).top;
-            if (isNullOrUndefined(index2) || pos === POSITION_OUT_OF_VIEW) {
-              furthestIndex = u;
-              break;
+          }
+        };
+        if (isReset) {
+          for (let i = startBuffered; i <= endBuffered; i++) {
+            if (!isContained(i)) {
+              needNewContainers.push(i);
             }
-            if (index2 < startBuffered || index2 > endBuffered) {
-              const distance = Math.abs(pos - top2);
-              if (index2 < 0 || pos === POSITION_OUT_OF_VIEW || distance > furthestDistance) {
-                furthestDistance = distance;
-                furthestIndex = u;
-              }
+          }
+        } else {
+          for (let i = startBuffered; i < prevStartBuffered; i++) {
+            if (!isContained(i)) {
+              needNewContainers.push(i);
             }
           }
-          const containerId = furthestIndex >= 0 ? furthestIndex : numContainers;
-          set$(ctx, `containerItemKey${containerId}`, id);
-          const index = state.indexByKey.get(id);
-          set$(ctx, `containerItemData${containerId}`, data[index]);
-          allocatedContainers.add(containerId);
-          if (furthestIndex === -1) {
-            numContainers++;
-            set$(ctx, `containerItemKey${containerId}`, id);
-            const index2 = state.indexByKey.get(id);
-            set$(ctx, `containerItemData${containerId}`, data[index2]);
-            set$(ctx, `containerPosition${containerId}`, ANCHORED_POSITION_OUT_OF_VIEW);
-            set$(ctx, `containerColumn${containerId}`, -1);
-            if (__DEV__ && !didWarnMoreContainers && numContainers > peek$(ctx, "numContainersPooled")) {
-              didWarnMoreContainers = true;
-              console.warn(
-                "[legend-list] No container to recycle, so creating one on demand. This can be a minor performance issue and is likely caused by the estimatedItemSize being too large. Consider decreasing estimatedItemSize or increasing initialContainerPoolRatio."
-              );
+          for (let i = Math.max(prevEndBuffered + 1, startBuffered); i <= endBuffered; i++) {
+            if (!isContained(i)) {
+              needNewContainers.push(i);
             }
           }
         }
       }
-      if (numContainers !== prevNumContainers) {
-        set$(ctx, "numContainers", numContainers);
-        if (numContainers > peek$(ctx, "numContainersPooled")) {
-          set$(ctx, "numContainersPooled", Math.ceil(numContainers * 1.5));
+      if (needNewContainers.length > 0) {
+        const availableContainers = findAvailableContainers(
+          needNewContainers.length,
+          startBuffered,
+          endBuffered
+        );
+        for (let idx = 0; idx < needNewContainers.length; idx++) {
+          const i = needNewContainers[idx];
+          const containerIndex = availableContainers[idx];
+          const id = getId(i);
+          set$(ctx, `containerItemKey${containerIndex}`, id);
+          set$(ctx, `containerItemData${containerIndex}`, data[i]);
+          if (containerIndex >= numContainers) {
+            numContainers = containerIndex + 1;
+          }
+        }
+        if (numContainers !== prevNumContainers) {
+          set$(ctx, "numContainers", numContainers);
+          if (numContainers > peek$(ctx, "numContainersPooled")) {
+            set$(ctx, "numContainersPooled", Math.ceil(numContainers * 1.5));
+          }
         }
       }
       for (let i = 0; i < numContainers; i++) {
@@ -1596,7 +1643,7 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
             const prevPos = peek$(ctx, `containerPosition${i}`);
             const prevColumn = peek$(ctx, `containerColumn${i}`);
             const prevData = peek$(ctx, `containerItemData${i}`);
-            if (pos.relativeCoordinate > POSITION_OUT_OF_VIEW && pos.top !== prevPos.top) {
+            if (!prevPos || pos.relativeCoordinate > POSITION_OUT_OF_VIEW && pos.top !== prevPos.top) {
               set$(ctx, `containerPosition${i}`, pos);
             }
             if (column2 >= 0 && column2 !== prevColumn) {
@@ -1791,7 +1838,10 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
         if (!keyExtractorProp) {
           state.positions.clear();
         }
-        calculateItemsInView();
+        calculateItemsInView(
+          /*isReset*/
+          true
+        );
         const didMaintainScrollAtEnd = doMaintainScrollAtEnd(false);
         if (!didMaintainScrollAtEnd && dataProp.length > state.data.length) {
           state.isEndReached = false;
@@ -1844,7 +1894,10 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
             (_b = state.belowAnchorElementPositions) == null ? void 0 : _b.clear();
             scrollTo(0, false);
             setTimeout(() => {
-              calculateItemsInView();
+              calculateItemsInView(
+                /*reset*/
+                true
+              );
             }, 0);
           } else {
             state.startBufferedId = void 0;
@@ -1859,7 +1912,10 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
           }
           scrollTo(0, false);
           setTimeout(() => {
-            calculateItemsInView();
+            calculateItemsInView(
+              /*reset*/
+              true
+            );
           }, 0);
         }
       }
@@ -1888,6 +1944,56 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
     });
     addTotalSize(null, totalSize, totalSizeBelowIndex);
   };
+  const findAvailableContainers = (numNeeded, startBuffered, endBuffered) => {
+    const state = refState.current;
+    const numContainers = peek$(ctx, "numContainers");
+    if (numNeeded === 0) return [];
+    const result = [];
+    const availableContainers = [];
+    for (let u = 0; u < numContainers; u++) {
+      const key = peek$(ctx, `containerItemKey${u}`);
+      if (key === void 0) {
+        result.push(u);
+        if (result.length >= numNeeded) {
+          return result;
+        }
+      }
+    }
+    for (let u = 0; u < numContainers; u++) {
+      const key = peek$(ctx, `containerItemKey${u}`);
+      if (key === void 0) continue;
+      const index = state.indexByKey.get(key);
+      if (index < startBuffered) {
+        availableContainers.push({ index: u, distance: startBuffered - index });
+      } else if (index > endBuffered) {
+        availableContainers.push({ index: u, distance: index - endBuffered });
+      }
+    }
+    const remaining = numNeeded - result.length;
+    if (remaining > 0) {
+      if (availableContainers.length > 0) {
+        if (availableContainers.length > remaining) {
+          availableContainers.sort(comparatorByDistance);
+          availableContainers.length = remaining;
+        }
+        for (const container of availableContainers) {
+          result.push(container.index);
+        }
+      }
+      const stillNeeded = numNeeded - result.length;
+      if (stillNeeded > 0) {
+        for (let i = 0; i < stillNeeded; i++) {
+          result.push(numContainers + i);
+        }
+        if (__DEV__ && numContainers + stillNeeded > peek$(ctx, "numContainersPooled")) {
+          console.warn(
+            "[legend-list] No container to recycle, so creating one on demand. This can be a minor performance issue and is likely caused by the estimatedItemSize being too large. Consider decreasing estimatedItemSize or increasing initialContainerPoolRatio."
+          );
+        }
+      }
+    }
+    return result.sort(comparatorDefault);
+  };
   const isFirst = !refState.current.renderItem;
   const memoizedLastItemKeys = React2.useMemo(() => {
     if (!dataProp.length) return [];
@@ -1969,10 +2075,16 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
       set$(ctx, "numContainersPooled", numContainers * initialContainerPoolRatio);
       if (initialScrollIndex) {
         requestAnimationFrame(() => {
-          calculateItemsInView();
+          calculateItemsInView(
+            /*isReset*/
+            true
+          );
         });
       } else {
-        calculateItemsInView();
+        calculateItemsInView(
+          /*isReset*/
+          true
+        );
       }
       return true;
     }
@@ -2008,6 +2120,7 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
     }
     const index = indexByKey.get(itemKey);
     const numColumns = peek$(ctx, "numColumns");
+    state.scrollForNextCalculateItemsInView = void 0;
     state.minIndexSizeChanged = state.minIndexSizeChanged !== void 0 ? Math.min(state.minIndexSizeChanged, index) : index;
     const prevSize = getItemSize(itemKey, index, data);
     const prevSizeKnown = sizesKnown.get(itemKey);

package/index.mjs

@@ -1,6 +1,7 @@
 import * as React2 from 'react';
-import React2__default, { useReducer, useEffect, createContext, useMemo, useRef, useCallback, useImperativeHandle, useSyncExternalStore, useContext, useState, forwardRef, memo, useLayoutEffect } from 'react';
+import React2__default, { useReducer, useEffect, createContext, useMemo, useRef, useCallback, useImperativeHandle, useContext, useState, forwardRef, memo, useLayoutEffect } from 'react';
 import { View, Text, Platform, Animated, ScrollView, StyleSheet, Dimensions, RefreshControl } from 'react-native';
+import { useSyncExternalStore } from 'use-sync-external-store/shim';
 
 // src/LegendList.tsx
 var ContextState = React2.createContext(null);
@@ -25,15 +26,42 @@ function StateProvider({ children }) {
 function useStateContext() {
   return React2.useContext(ContextState);
 }
-function createSelectorFunctions(ctx, signalName) {
+function createSelectorFunctionsArr(ctx, signalNames) {
+  let lastValues = [];
+  let lastSignalValues = [];
   return {
-    subscribe: (cb) => listen$(ctx, signalName, cb),
-    get: () => peek$(ctx, signalName)
+    subscribe: (cb) => {
+      const listeners = [];
+      for (const signalName of signalNames) {
+        listeners.push(listen$(ctx, signalName, cb));
+      }
+      return () => {
+        for (const listener of listeners) {
+          listener();
+        }
+      };
+    },
+    get: () => {
+      const currentValues = [];
+      let hasChanged = false;
+      for (let i = 0; i < signalNames.length; i++) {
+        const value = peek$(ctx, signalNames[i]);
+        currentValues.push(value);
+        if (value !== lastSignalValues[i]) {
+          hasChanged = true;
+        }
+      }
+      lastSignalValues = currentValues;
+      if (hasChanged) {
+        lastValues = currentValues;
+      }
+      return lastValues;
+    }
   };
 }
-function use$(signalName) {
+function useArr$(signalNames) {
   const ctx = React2.useContext(ContextState);
-  const { subscribe, get } = React2.useMemo(() => createSelectorFunctions(ctx, signalName), []);
+  const { subscribe, get } = React2.useMemo(() => createSelectorFunctionsArr(ctx, signalNames), [ctx, signalNames]);
   const value = useSyncExternalStore(subscribe, get);
   return value;
 }
@@ -78,15 +106,25 @@ var DebugRow = ({ children }) => {
 };
 var DebugView = React2.memo(function DebugView2({ state }) {
   const ctx = useStateContext();
-  const totalSize = use$("totalSize") || 0;
-  const totalSizeWithScrollAdjust = use$("totalSizeWithScrollAdjust") || 0;
-  const scrollAdjust = use$("scrollAdjust") || 0;
-  const rawScroll = use$("debugRawScroll") || 0;
-  const scroll = use$("debugComputedScroll") || 0;
+  const [
+    totalSize = 0,
+    totalSizeWithScrollAdjust = 0,
+    scrollAdjust = 0,
+    rawScroll = 0,
+    scroll = 0,
+    numContainers = 0,
+    numContainersPooled = 0
+  ] = useArr$([
+    "totalSize",
+    "totalSizeWithScrollAdjust",
+    "scrollAdjust",
+    "debugRawScroll",
+    "debugComputedScroll",
+    "numContainers",
+    "numContainersPooled"
+  ]);
   const contentSize = getContentSize(ctx);
   const [, forceUpdate] = useReducer((x) => x + 1, 0);
-  use$("numContainers");
-  use$("numContainersPooled");
   useInterval(() => {
     forceUpdate();
   }, 100);
@@ -141,6 +179,12 @@ function roundSize(size) {
 function isNullOrUndefined(value) {
   return value === null || value === void 0;
 }
+function comparatorByDistance(a, b) {
+  return b.distance - a.distance;
+}
+function comparatorDefault(a, b) {
+  return a - b;
+}
 var symbolFirst = Symbol();
 function useInit(cb) {
   const refValue = useRef(symbolFirst);
@@ -264,14 +308,25 @@ var Container = ({
 }) => {
   const ctx = useStateContext();
   const columnWrapperStyle = ctx.columnWrapperStyle;
-  const maintainVisibleContentPosition = use$("maintainVisibleContentPosition");
-  const position = use$(`containerPosition${id}`) || ANCHORED_POSITION_OUT_OF_VIEW;
-  const column = use$(`containerColumn${id}`) || 0;
-  const numColumns = use$("numColumns");
-  const lastItemKeys = use$("lastItemKeys");
-  const itemKey = use$(`containerItemKey${id}`);
-  const data = use$(`containerItemData${id}`);
-  const extraData = use$("extraData");
+  const [
+    maintainVisibleContentPosition,
+    position = ANCHORED_POSITION_OUT_OF_VIEW,
+    column = 0,
+    numColumns,
+    lastItemKeys,
+    itemKey,
+    data,
+    extraData
+  ] = useArr$([
+    "maintainVisibleContentPosition",
+    `containerPosition${id}`,
+    `containerColumn${id}`,
+    "numColumns",
+    "lastItemKeys",
+    `containerItemKey${id}`,
+    `containerItemData${id}`,
+    "extraData"
+  ]);
   const refLastSize = useRef();
   const ref = useRef(null);
   const [layoutRenderCount, forceLayoutRender] = useState(0);
@@ -369,11 +424,11 @@ var Container = ({
   const contentFragment = /* @__PURE__ */ React2__default.createElement(React2__default.Fragment, { key: recycleItems ? void 0 : itemKey }, /* @__PURE__ */ React2__default.createElement(ContextContainer.Provider, { value: contextValue }, renderedItem, renderedItemInfo && ItemSeparatorComponent && !lastItemKeys.includes(itemKey) && /* @__PURE__ */ React2__default.createElement(ItemSeparatorComponent, { leadingItem: renderedItemInfo.item })));
   if (maintainVisibleContentPosition) {
     const anchorStyle = position.type === "top" ? { position: "absolute", top: 0, left: 0, right: 0 } : { position: "absolute", bottom: 0, left: 0, right: 0 };
-    if (ENABLE_DEVMODE) {
+    if (__DEV__ && ENABLE_DEVMODE) {
       anchorStyle.borderColor = position.type === "top" ? "red" : "blue";
       anchorStyle.borderWidth = 1;
     }
-    return /* @__PURE__ */ React2__default.createElement(LeanView, { style }, /* @__PURE__ */ React2__default.createElement(LeanView, { style: anchorStyle, onLayout, ref }, contentFragment, ENABLE_DEVMODE && /* @__PURE__ */ React2__default.createElement(Text, { style: { position: "absolute", top: 0, left: 0, zIndex: 1e3 } }, position.top)));
+    return /* @__PURE__ */ React2__default.createElement(LeanView, { style }, /* @__PURE__ */ React2__default.createElement(LeanView, { style: anchorStyle, onLayout, ref }, contentFragment, __DEV__ && ENABLE_DEVMODE && /* @__PURE__ */ React2__default.createElement(Text, { style: { position: "absolute", top: 0, left: 0, zIndex: 1e3 } }, position.top)));
   }
   return /* @__PURE__ */ React2__default.createElement(LeanView, { style, onLayout, ref }, contentFragment);
 };
@@ -417,7 +472,7 @@ var Containers = typedMemo(function Containers2({
 }) {
   const ctx = useStateContext();
   const columnWrapperStyle = ctx.columnWrapperStyle;
-  const numContainers = use$("numContainersPooled");
+  const [numContainers] = useArr$(["numContainersPooled"]);
   const animSize = useValue$(
     "totalSizeWithScrollAdjust",
     void 0,
@@ -1014,10 +1069,10 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
       isAtTop: false,
       data: dataProp,
       scrollLength: initialScrollLength,
-      startBuffered: 0,
-      startNoBuffer: 0,
-      endBuffered: 0,
-      endNoBuffer: 0,
+      startBuffered: -1,
+      startNoBuffer: -1,
+      endBuffered: -1,
+      endNoBuffer: -1,
       scroll: initialContentOffset || 0,
       totalSize: 0,
       totalSizeBelowAnchor: 0,
@@ -1218,6 +1273,7 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
     const state = refState.current;
     if (state.scrollingToOffset === void 0) {
       state.disableScrollJumpsFrom = state.scroll - state.scrollAdjustHandler.getAppliedAdjust();
+      state.scrollHistory.length = 0;
       setTimeout(() => {
         state.disableScrollJumpsFrom = void 0;
       }, timeout);
@@ -1313,7 +1369,7 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
     }
     return false;
   }, []);
-  const calculateItemsInView = useCallback(() => {
+  const calculateItemsInView = useCallback((isReset) => {
     var _a;
     const state = refState.current;
     const {
@@ -1332,14 +1388,15 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
     const topPad = peek$(ctx, "stylePaddingTop") + peek$(ctx, "headerSize");
     const numColumns = peek$(ctx, "numColumns");
     const previousScrollAdjust = scrollAdjustHandler.getAppliedAdjust();
-    const scrollExtra = Math.max(-16, Math.min(16, speed)) * 16;
     let scrollState = state.scroll;
+    const scrollExtra = Math.max(-16, Math.min(16, speed)) * 24;
     const useAverageSize = !state.disableScrollJumpsFrom && speed >= 0 && peek$(ctx, "containersDidLayout");
     if (!state.queuedInitialLayout && initialScrollIndex) {
       const updatedOffset = calculateOffsetForIndex(initialScrollIndex);
       scrollState = updatedOffset;
     }
-    let scroll = scrollState - previousScrollAdjust - topPad;
+    const scrollAdjustPad = -previousScrollAdjust - topPad;
+    let scroll = scrollState + scrollExtra + scrollAdjustPad;
     if (scroll + scrollLength > totalSize) {
       scroll = totalSize - scrollLength;
     }
@@ -1349,13 +1406,14 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
     }
     let scrollBufferTop = scrollBuffer;
     let scrollBufferBottom = scrollBuffer;
-    if (scrollExtra > 8) {
-      scrollBufferTop = 0;
-      scrollBufferBottom = scrollBuffer + scrollExtra;
-    }
-    if (scrollExtra < -8) {
-      scrollBufferTop = scrollBuffer - scrollExtra;
-      scrollBufferBottom = 0;
+    if (Math.abs(speed) > 4) {
+      if (speed > 0) {
+        scrollBufferTop = scrollBuffer * 0.1;
+        scrollBufferBottom = scrollBuffer * 1.9;
+      } else {
+        scrollBufferTop = scrollBuffer * 1.9;
+        scrollBufferBottom = scrollBuffer * 0.1;
+      }
     }
     if (state.scrollForNextCalculateItemsInView) {
       const { top: top2, bottom } = state.scrollForNextCalculateItemsInView;
@@ -1415,6 +1473,8 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
       return topOffset;
     };
     let foundEnd = false;
+    let nextTop;
+    let nextBottom;
     const prevNumContainers = ctx.values.get("numContainers");
     let maxIndexRendered = 0;
     for (let i = 0; i < prevNumContainers; i++) {
@@ -1444,6 +1504,7 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
         if (startBuffered === null && top + size > scroll - scrollBufferTop) {
           startBuffered = i;
           startBufferedId = id;
+          nextTop = top;
         }
         if (startNoBuffer !== null) {
           if (top <= scrollBottom) {
@@ -1451,6 +1512,7 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
           }
           if (top <= scrollBottom + scrollBufferBottom) {
             endBuffered = i;
+            nextBottom = top + maxSizeInRow - scrollLength;
           } else {
             foundEnd = true;
           }
@@ -1463,6 +1525,8 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
         maxSizeInRow = 0;
       }
     }
+    const prevStartBuffered = state.startBuffered;
+    const prevEndBuffered = state.endBuffered;
     Object.assign(state, {
       startBuffered,
       startBufferedId,
@@ -1470,82 +1534,65 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
       endBuffered,
       endNoBuffer
     });
-    const nextTop = Math.ceil(startBuffered !== null ? positions.get(startBufferedId) + scrollBuffer : 0);
-    const nextBottom = Math.floor(
-      endBuffered !== null ? (positions.get(getId(endBuffered + 1)) || 0) - scrollLength - scrollBuffer : 0
-    );
-    if (state.enableScrollForNextCalculateItemsInView) {
-      state.scrollForNextCalculateItemsInView = nextTop >= 0 && nextBottom >= 0 ? {
+    if (state.enableScrollForNextCalculateItemsInView && nextTop !== void 0 && nextBottom !== void 0 && state.disableScrollJumpsFrom === void 0) {
+      state.scrollForNextCalculateItemsInView = nextTop !== void 0 && nextBottom !== void 0 ? {
         top: nextTop,
         bottom: nextBottom
       } : void 0;
     }
     if (startBuffered !== null && endBuffered !== null) {
       let numContainers = prevNumContainers;
-      let didWarnMoreContainers = false;
-      const allocatedContainers = /* @__PURE__ */ new Set();
-      for (let i = startBuffered; i <= endBuffered; i++) {
-        let isContained = false;
-        const id = getId(i);
-        for (let j = 0; j < numContainers; j++) {
-          const key = peek$(ctx, `containerItemKey${j}`);
-          if (key === id) {
-            isContained = true;
-            break;
-          }
-        }
-        if (!isContained) {
-          const top2 = positions.get(id) || 0;
-          let furthestIndex = -1;
-          let furthestDistance = 0;
-          for (let u = 0; u < numContainers; u++) {
-            if (allocatedContainers.has(u)) {
-              continue;
+      const needNewContainers = [];
+      if (isReset || startBuffered < prevStartBuffered || endBuffered > prevEndBuffered) {
+        const isContained = (i) => {
+          const id = getId(i);
+          for (let j = 0; j < numContainers; j++) {
+            const key = peek$(ctx, `containerItemKey${j}`);
+            if (key === id) {
+              return true;
             }
-            const key = peek$(ctx, `containerItemKey${u}`);
-            if (key === void 0) {
-              furthestIndex = u;
-              break;
-            }
-            const index2 = state.indexByKey.get(key);
-            const pos = peek$(ctx, `containerPosition${u}`).top;
-            if (isNullOrUndefined(index2) || pos === POSITION_OUT_OF_VIEW) {
-              furthestIndex = u;
-              break;
+          }
+        };
+        if (isReset) {
+          for (let i = startBuffered; i <= endBuffered; i++) {
+            if (!isContained(i)) {
+              needNewContainers.push(i);
             }
-            if (index2 < startBuffered || index2 > endBuffered) {
-              const distance = Math.abs(pos - top2);
-              if (index2 < 0 || pos === POSITION_OUT_OF_VIEW || distance > furthestDistance) {
-                furthestDistance = distance;
-                furthestIndex = u;
-              }
+          }
+        } else {
+          for (let i = startBuffered; i < prevStartBuffered; i++) {
+            if (!isContained(i)) {
+              needNewContainers.push(i);
             }
           }
-          const containerId = furthestIndex >= 0 ? furthestIndex : numContainers;
-          set$(ctx, `containerItemKey${containerId}`, id);
-          const index = state.indexByKey.get(id);
-          set$(ctx, `containerItemData${containerId}`, data[index]);
-          allocatedContainers.add(containerId);
-          if (furthestIndex === -1) {
-            numContainers++;
-            set$(ctx, `containerItemKey${containerId}`, id);
-            const index2 = state.indexByKey.get(id);
-            set$(ctx, `containerItemData${containerId}`, data[index2]);
-            set$(ctx, `containerPosition${containerId}`, ANCHORED_POSITION_OUT_OF_VIEW);
-            set$(ctx, `containerColumn${containerId}`, -1);
-            if (__DEV__ && !didWarnMoreContainers && numContainers > peek$(ctx, "numContainersPooled")) {
-              didWarnMoreContainers = true;
-              console.warn(
-                "[legend-list] No container to recycle, so creating one on demand. This can be a minor performance issue and is likely caused by the estimatedItemSize being too large. Consider decreasing estimatedItemSize or increasing initialContainerPoolRatio."
-              );
+          for (let i = Math.max(prevEndBuffered + 1, startBuffered); i <= endBuffered; i++) {
+            if (!isContained(i)) {
+              needNewContainers.push(i);
             }
           }
         }
       }
-      if (numContainers !== prevNumContainers) {
-        set$(ctx, "numContainers", numContainers);
-        if (numContainers > peek$(ctx, "numContainersPooled")) {
-          set$(ctx, "numContainersPooled", Math.ceil(numContainers * 1.5));
+      if (needNewContainers.length > 0) {
+        const availableContainers = findAvailableContainers(
+          needNewContainers.length,
+          startBuffered,
+          endBuffered
+        );
+        for (let idx = 0; idx < needNewContainers.length; idx++) {
+          const i = needNewContainers[idx];
+          const containerIndex = availableContainers[idx];
+          const id = getId(i);
+          set$(ctx, `containerItemKey${containerIndex}`, id);
+          set$(ctx, `containerItemData${containerIndex}`, data[i]);
+          if (containerIndex >= numContainers) {
+            numContainers = containerIndex + 1;
+          }
+        }
+        if (numContainers !== prevNumContainers) {
+          set$(ctx, "numContainers", numContainers);
+          if (numContainers > peek$(ctx, "numContainersPooled")) {
+            set$(ctx, "numContainersPooled", Math.ceil(numContainers * 1.5));
+          }
         }
       }
       for (let i = 0; i < numContainers; i++) {
@@ -1575,7 +1622,7 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
             const prevPos = peek$(ctx, `containerPosition${i}`);
             const prevColumn = peek$(ctx, `containerColumn${i}`);
             const prevData = peek$(ctx, `containerItemData${i}`);
-            if (pos.relativeCoordinate > POSITION_OUT_OF_VIEW && pos.top !== prevPos.top) {
+            if (!prevPos || pos.relativeCoordinate > POSITION_OUT_OF_VIEW && pos.top !== prevPos.top) {
               set$(ctx, `containerPosition${i}`, pos);
             }
             if (column2 >= 0 && column2 !== prevColumn) {
@@ -1770,7 +1817,10 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
         if (!keyExtractorProp) {
           state.positions.clear();
         }
-        calculateItemsInView();
+        calculateItemsInView(
+          /*isReset*/
+          true
+        );
         const didMaintainScrollAtEnd = doMaintainScrollAtEnd(false);
         if (!didMaintainScrollAtEnd && dataProp.length > state.data.length) {
           state.isEndReached = false;
@@ -1823,7 +1873,10 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
             (_b = state.belowAnchorElementPositions) == null ? void 0 : _b.clear();
             scrollTo(0, false);
             setTimeout(() => {
-              calculateItemsInView();
+              calculateItemsInView(
+                /*reset*/
+                true
+              );
             }, 0);
           } else {
             state.startBufferedId = void 0;
@@ -1838,7 +1891,10 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
           }
           scrollTo(0, false);
           setTimeout(() => {
-            calculateItemsInView();
+            calculateItemsInView(
+              /*reset*/
+              true
+            );
           }, 0);
         }
       }
@@ -1867,6 +1923,56 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
     });
     addTotalSize(null, totalSize, totalSizeBelowIndex);
   };
+  const findAvailableContainers = (numNeeded, startBuffered, endBuffered) => {
+    const state = refState.current;
+    const numContainers = peek$(ctx, "numContainers");
+    if (numNeeded === 0) return [];
+    const result = [];
+    const availableContainers = [];
+    for (let u = 0; u < numContainers; u++) {
+      const key = peek$(ctx, `containerItemKey${u}`);
+      if (key === void 0) {
+        result.push(u);
+        if (result.length >= numNeeded) {
+          return result;
+        }
+      }
+    }
+    for (let u = 0; u < numContainers; u++) {
+      const key = peek$(ctx, `containerItemKey${u}`);
+      if (key === void 0) continue;
+      const index = state.indexByKey.get(key);
+      if (index < startBuffered) {
+        availableContainers.push({ index: u, distance: startBuffered - index });
+      } else if (index > endBuffered) {
+        availableContainers.push({ index: u, distance: index - endBuffered });
+      }
+    }
+    const remaining = numNeeded - result.length;
+    if (remaining > 0) {
+      if (availableContainers.length > 0) {
+        if (availableContainers.length > remaining) {
+          availableContainers.sort(comparatorByDistance);
+          availableContainers.length = remaining;
+        }
+        for (const container of availableContainers) {
+          result.push(container.index);
+        }
+      }
+      const stillNeeded = numNeeded - result.length;
+      if (stillNeeded > 0) {
+        for (let i = 0; i < stillNeeded; i++) {
+          result.push(numContainers + i);
+        }
+        if (__DEV__ && numContainers + stillNeeded > peek$(ctx, "numContainersPooled")) {
+          console.warn(
+            "[legend-list] No container to recycle, so creating one on demand. This can be a minor performance issue and is likely caused by the estimatedItemSize being too large. Consider decreasing estimatedItemSize or increasing initialContainerPoolRatio."
+          );
+        }
+      }
+    }
+    return result.sort(comparatorDefault);
+  };
   const isFirst = !refState.current.renderItem;
   const memoizedLastItemKeys = useMemo(() => {
     if (!dataProp.length) return [];
@@ -1948,10 +2054,16 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
       set$(ctx, "numContainersPooled", numContainers * initialContainerPoolRatio);
       if (initialScrollIndex) {
         requestAnimationFrame(() => {
-          calculateItemsInView();
+          calculateItemsInView(
+            /*isReset*/
+            true
+          );
         });
       } else {
-        calculateItemsInView();
+        calculateItemsInView(
+          /*isReset*/
+          true
+        );
       }
       return true;
     }
@@ -1987,6 +2099,7 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
     }
     const index = indexByKey.get(itemKey);
     const numColumns = peek$(ctx, "numColumns");
+    state.scrollForNextCalculateItemsInView = void 0;
     state.minIndexSizeChanged = state.minIndexSizeChanged !== void 0 ? Math.min(state.minIndexSizeChanged, index) : index;
     const prevSize = getItemSize(itemKey, index, data);
     const prevSizeKnown = sizesKnown.get(itemKey);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@legendapp/list",
-  "version": "1.0.7",
+  "version": "1.0.9",
   "description": "Legend List is a drop-in replacement for FlatList with much better performance and supporting dynamically sized items.",
   "sideEffects": false,
   "private": false,
@@ -28,5 +28,8 @@
   "homepage": "https://github.com/LegendApp/legend-list#readme",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
+  },
+  "dependencies": {
+    "use-sync-external-store": "^1.5.0"
   }
 }