@legendapp/list 1.0.6 → 1.0.8

package/index.js

@@ -46,15 +46,42 @@ 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 { subscribe, get } = React2__namespace.useMemo(() => createSelectorFunctionsArr(ctx, signalNames), [ctx, signalNames]);
   const value = React2.useSyncExternalStore(subscribe, get);
   return value;
 }
@@ -99,15 +126,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 +199,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 +328,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 +444,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 +492,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 +1089,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,
@@ -1353,14 +1407,14 @@ 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;
+    let scroll = scrollState + scrollExtra - previousScrollAdjust - topPad;
     if (scroll + scrollLength > totalSize) {
       scroll = totalSize - scrollLength;
     }
@@ -1370,13 +1424,13 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
     }
     let scrollBufferTop = scrollBuffer;
     let scrollBufferBottom = scrollBuffer;
-    if (scrollExtra > 8) {
-      scrollBufferTop = 0;
-      scrollBufferBottom = scrollBuffer + scrollExtra;
+    if (speed > 0) {
+      scrollBufferTop = scrollBuffer * 0.1;
+      scrollBufferBottom = scrollBuffer * 1.9;
     }
-    if (scrollExtra < -8) {
-      scrollBufferTop = scrollBuffer - scrollExtra;
-      scrollBufferBottom = 0;
+    if (speed < 0) {
+      scrollBufferTop = scrollBuffer * 1.9;
+      scrollBufferBottom = scrollBuffer * 0.1;
     }
     if (state.scrollForNextCalculateItemsInView) {
       const { top: top2, bottom } = state.scrollForNextCalculateItemsInView;
@@ -1385,7 +1439,6 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
       }
     }
     const scrollBottom = scroll + scrollLength;
-    const prevEndBuffered = state.endBuffered;
     let startNoBuffer = null;
     let startBuffered = null;
     let startBufferedId = null;
@@ -1437,7 +1490,17 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
       return topOffset;
     };
     let foundEnd = false;
-    for (let i = Math.max(0, loopStart); i < data.length && (!foundEnd || i <= prevEndBuffered); i++) {
+    let lastSize;
+    const prevNumContainers = ctx.values.get("numContainers");
+    let maxIndexRendered = 0;
+    for (let i = 0; i < prevNumContainers; i++) {
+      const key = peek$(ctx, `containerItemKey${i}`);
+      if (key !== void 0) {
+        const index = state.indexByKey.get(key);
+        maxIndexRendered = Math.max(maxIndexRendered, index);
+      }
+    }
+    for (let i = Math.max(0, loopStart); i < data.length && (!foundEnd || i <= maxIndexRendered); i++) {
       const id = getId(i);
       const size = getItemSize(id, i, data[i], useAverageSize);
       maxSizeInRow = Math.max(maxSizeInRow, size);
@@ -1464,6 +1527,7 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
           }
           if (top <= scrollBottom + scrollBufferBottom) {
             endBuffered = i;
+            lastSize = maxSizeInRow;
           } else {
             foundEnd = true;
           }
@@ -1476,6 +1540,8 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
         maxSizeInRow = 0;
       }
     }
+    const prevStartBuffered = state.startBuffered;
+    const prevEndBuffered = state.endBuffered;
     Object.assign(state, {
       startBuffered,
       startBufferedId,
@@ -1483,83 +1549,64 @@ 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) {
+    if (state.enableScrollForNextCalculateItemsInView && lastSize) {
+      const aboveFirst = startBuffered - 1;
+      let nextTop = 0;
+      if (aboveFirst >= 0) {
+        const aboveFirstSize = getItemSize(getId(aboveFirst), aboveFirst, data[aboveFirst], useAverageSize);
+        nextTop = scroll - aboveFirstSize;
+      }
+      const nextBottom = scroll + lastSize;
       state.scrollForNextCalculateItemsInView = nextTop >= 0 && nextBottom >= 0 ? {
         top: nextTop,
         bottom: nextBottom
       } : void 0;
     }
     if (startBuffered !== null && endBuffered !== null) {
-      const prevNumContainers = ctx.values.get("numContainers");
       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 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 (index2 < startBuffered || index2 > endBuffered) {
-              const distance = Math.abs(pos - top2);
-              if (index2 < 0 || pos === POSITION_OUT_OF_VIEW || distance > furthestDistance) {
-                furthestDistance = distance;
-                furthestIndex = u;
-              }
+      const needNewContainers = [];
+      if (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 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 = startBuffered; i < prevStartBuffered; i++) {
+          if (!isContained(i)) {
+            needNewContainers.push(i);
+          }
+        }
+        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++) {
@@ -1589,7 +1636,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) {
@@ -1881,6 +1928,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 [];

package/index.mjs

@@ -25,15 +25,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 +105,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 +178,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 +307,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 +423,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 +471,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 +1068,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,
@@ -1332,14 +1386,14 @@ 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;
+    let scroll = scrollState + scrollExtra - previousScrollAdjust - topPad;
     if (scroll + scrollLength > totalSize) {
       scroll = totalSize - scrollLength;
     }
@@ -1349,13 +1403,13 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
     }
     let scrollBufferTop = scrollBuffer;
     let scrollBufferBottom = scrollBuffer;
-    if (scrollExtra > 8) {
-      scrollBufferTop = 0;
-      scrollBufferBottom = scrollBuffer + scrollExtra;
+    if (speed > 0) {
+      scrollBufferTop = scrollBuffer * 0.1;
+      scrollBufferBottom = scrollBuffer * 1.9;
     }
-    if (scrollExtra < -8) {
-      scrollBufferTop = scrollBuffer - scrollExtra;
-      scrollBufferBottom = 0;
+    if (speed < 0) {
+      scrollBufferTop = scrollBuffer * 1.9;
+      scrollBufferBottom = scrollBuffer * 0.1;
     }
     if (state.scrollForNextCalculateItemsInView) {
       const { top: top2, bottom } = state.scrollForNextCalculateItemsInView;
@@ -1364,7 +1418,6 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
       }
     }
     const scrollBottom = scroll + scrollLength;
-    const prevEndBuffered = state.endBuffered;
     let startNoBuffer = null;
     let startBuffered = null;
     let startBufferedId = null;
@@ -1416,7 +1469,17 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
       return topOffset;
     };
     let foundEnd = false;
-    for (let i = Math.max(0, loopStart); i < data.length && (!foundEnd || i <= prevEndBuffered); i++) {
+    let lastSize;
+    const prevNumContainers = ctx.values.get("numContainers");
+    let maxIndexRendered = 0;
+    for (let i = 0; i < prevNumContainers; i++) {
+      const key = peek$(ctx, `containerItemKey${i}`);
+      if (key !== void 0) {
+        const index = state.indexByKey.get(key);
+        maxIndexRendered = Math.max(maxIndexRendered, index);
+      }
+    }
+    for (let i = Math.max(0, loopStart); i < data.length && (!foundEnd || i <= maxIndexRendered); i++) {
       const id = getId(i);
       const size = getItemSize(id, i, data[i], useAverageSize);
       maxSizeInRow = Math.max(maxSizeInRow, size);
@@ -1443,6 +1506,7 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
           }
           if (top <= scrollBottom + scrollBufferBottom) {
             endBuffered = i;
+            lastSize = maxSizeInRow;
           } else {
             foundEnd = true;
           }
@@ -1455,6 +1519,8 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
         maxSizeInRow = 0;
       }
     }
+    const prevStartBuffered = state.startBuffered;
+    const prevEndBuffered = state.endBuffered;
     Object.assign(state, {
       startBuffered,
       startBufferedId,
@@ -1462,83 +1528,64 @@ 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) {
+    if (state.enableScrollForNextCalculateItemsInView && lastSize) {
+      const aboveFirst = startBuffered - 1;
+      let nextTop = 0;
+      if (aboveFirst >= 0) {
+        const aboveFirstSize = getItemSize(getId(aboveFirst), aboveFirst, data[aboveFirst], useAverageSize);
+        nextTop = scroll - aboveFirstSize;
+      }
+      const nextBottom = scroll + lastSize;
       state.scrollForNextCalculateItemsInView = nextTop >= 0 && nextBottom >= 0 ? {
         top: nextTop,
         bottom: nextBottom
       } : void 0;
     }
     if (startBuffered !== null && endBuffered !== null) {
-      const prevNumContainers = ctx.values.get("numContainers");
       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 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 (index2 < startBuffered || index2 > endBuffered) {
-              const distance = Math.abs(pos - top2);
-              if (index2 < 0 || pos === POSITION_OUT_OF_VIEW || distance > furthestDistance) {
-                furthestDistance = distance;
-                furthestIndex = u;
-              }
+      const needNewContainers = [];
+      if (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 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 = startBuffered; i < prevStartBuffered; i++) {
+          if (!isContained(i)) {
+            needNewContainers.push(i);
+          }
+        }
+        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++) {
@@ -1568,7 +1615,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) {
@@ -1860,6 +1907,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 [];

package/package.json

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