@legendapp/list 3.0.4 → 3.0.5

package/react-native.web.mjs

@@ -1,5 +1,5 @@
 import * as React3 from 'react';
-import { forwardRef, useReducer, useEffect, createContext, useRef, useState, useMemo, useCallback, useImperativeHandle, useLayoutEffect, useContext } from 'react';
+import { forwardRef, useReducer, useEffect, createContext, useRef, useState, useMemo, useCallback, useLayoutEffect, useImperativeHandle, useContext } from 'react';
 import { useSyncExternalStore } from 'use-sync-external-store/shim';
 import * as ReactDOM from 'react-dom';
 import { flushSync } from 'react-dom';
@@ -132,6 +132,7 @@ function StateProvider({ children }) {
   const [value] = React3.useState(() => ({
     animatedScrollY: createAnimatedValue(0),
     columnWrapperStyle: void 0,
+    containerLayoutTriggers: /* @__PURE__ */ new Map(),
     contextNum: contextNum++,
     listeners: /* @__PURE__ */ new Map(),
     mapViewabilityAmountCallbacks: /* @__PURE__ */ new Map(),
@@ -399,9 +400,6 @@ function roundSize(size) {
 function isNullOrUndefined(value) {
   return value === null || value === void 0;
 }
-function comparatorDefault(a, b) {
-  return a - b;
-}
 function getPadding(s, type) {
   var _a3, _b, _c;
   const axisPadding = type === "Left" || type === "Right" ? s.paddingHorizontal : s.paddingVertical;
@@ -909,18 +907,6 @@ var Container = typedMemo(function Container2({
     [itemKey, data, extraData]
   );
   const { index, renderedItem } = renderedItemInfo || {};
-  const contextValue = useMemo(() => {
-    ctx.viewRefs.set(id, ref);
-    return {
-      containerId: id,
-      index,
-      itemKey,
-      triggerLayout: () => {
-        forceLayoutRender((v) => v + 1);
-      },
-      value: data
-    };
-  }, [id, itemKey, index, data]);
   const onLayoutChange = useCallback((rectangle) => {
     const {
       horizontal: currentHorizontal,
@@ -964,6 +950,27 @@ var Container = typedMemo(function Container2({
       doUpdate();
     }
   }, []);
+  const triggerLayout = useCallback(() => {
+    forceLayoutRender((v) => v + 1);
+  }, []);
+  const contextValue = useMemo(() => {
+    ctx.viewRefs.set(id, ref);
+    return {
+      containerId: id,
+      index,
+      itemKey,
+      triggerLayout,
+      value: data
+    };
+  }, [id, itemKey, index, data, triggerLayout]);
+  useLayoutEffect(() => {
+    ctx.containerLayoutTriggers.set(id, triggerLayout);
+    return () => {
+      if (ctx.containerLayoutTriggers.get(id) === triggerLayout) {
+        ctx.containerLayoutTriggers.delete(id);
+      }
+    };
+  }, [ctx, id, triggerLayout]);
   const { onLayout } = useOnLayoutSync(
     {
       onLayoutChange,
@@ -2441,14 +2448,14 @@ function setSize(ctx, itemKey, size, notifyTotalSize = true) {
 }
 
 // src/utils/getItemSize.ts
-function getKnownOrFixedSize(ctx, key, index, data) {
-  var _a3;
+function getKnownOrFixedSize(ctx, key, index, data, resolved) {
+  var _a3, _b;
   const state = ctx.state;
   const { getFixedItemSize, getItemType } = state.props;
   let size = key ? state.sizesKnown.get(key) : void 0;
   if (size === void 0 && key && getFixedItemSize) {
-    const itemType = getItemType ? (_a3 = getItemType(data, index)) != null ? _a3 : "" : "";
-    size = getFixedItemSize(data, index, itemType);
+    const itemType = (_b = resolved == null ? void 0 : resolved.itemType) != null ? _b : getItemType ? (_a3 = getItemType(data, index)) != null ? _a3 : "" : "";
+    size = (resolved == null ? void 0 : resolved.didResolveFixedItemSize) ? resolved.fixedItemSize : getFixedItemSize(data, index, itemType);
     if (size !== void 0) {
       state.sizesKnown.set(key, size);
     }
@@ -2467,8 +2474,8 @@ function areKnownOrFixedItemSizesAvailable(ctx, startIndex, endIndex) {
   }
   return true;
 }
-function getItemSize(ctx, key, index, data, useAverageSize, preferCachedSize, notifyTotalSize) {
-  var _a3, _b, _c;
+function getItemSize(ctx, key, index, data, useAverageSize, preferCachedSize, notifyTotalSize, resolved) {
+  var _a3, _b, _c, _d;
   const state = ctx.state;
   const {
     sizes,
@@ -2487,14 +2494,14 @@ function getItemSize(ctx, key, index, data, useAverageSize, preferCachedSize, no
       return renderedSize;
     }
   }
-  size = getKnownOrFixedSize(ctx, key, index, data);
+  size = getKnownOrFixedSize(ctx, key, index, data, resolved);
   if (size !== void 0) {
     setSize(ctx, key, size, notifyTotalSize);
     return size;
   }
-  const itemType = getItemType ? (_a3 = getItemType(data, index)) != null ? _a3 : "" : "";
+  const itemType = (_b = resolved == null ? void 0 : resolved.itemType) != null ? _b : getItemType ? (_a3 = getItemType(data, index)) != null ? _a3 : "" : "";
   if (useAverageSize && !scrollingTo) {
-    const averageSizeForType = (_b = averageSizes[itemType]) == null ? void 0 : _b.avg;
+    const averageSizeForType = (_c = averageSizes[itemType]) == null ? void 0 : _c.avg;
     if (averageSizeForType !== void 0) {
       size = roundSize(averageSizeForType);
     }
@@ -2503,7 +2510,7 @@ function getItemSize(ctx, key, index, data, useAverageSize, preferCachedSize, no
     return renderedSize;
   }
   if (size === void 0 && useAverageSize && scrollingTo) {
-    const averageSizeForType = (_c = scrollingTo.averageSizeSnapshot) == null ? void 0 : _c[itemType];
+    const averageSizeForType = (_d = scrollingTo.averageSizeSnapshot) == null ? void 0 : _d[itemType];
     if (averageSizeForType !== void 0) {
       size = roundSize(averageSizeForType);
     }
@@ -3064,8 +3071,8 @@ function updateScroll(ctx, newScroll, forceUpdate, options) {
   if ((options == null ? void 0 : options.markHasScrolled) !== false) {
     state.hasScrolled = true;
   }
-  state.lastBatchingAction = Date.now();
   const currentTime = Date.now();
+  state.lastBatchingAction = currentTime;
   const adjust = scrollAdjustHandler.getAdjust();
   const adjustChanged = lastScrollAdjustForHistory !== void 0 && Math.abs(adjust - lastScrollAdjustForHistory) > 0.1;
   if (adjustChanged) {
@@ -3374,26 +3381,22 @@ function advanceCurrentInitialScrollSession(ctx, options) {
 }
 
 // src/utils/checkAllSizesKnown.ts
-function isNullOrUndefined2(value) {
-  return value === null || value === void 0;
-}
-function getMountedIndicesInRange(state, start, end) {
-  if (!isNullOrUndefined2(end) && !isNullOrUndefined2(start) && start >= 0 && end >= 0) {
-    return Array.from(state.containerItemKeys.keys()).map((key) => state.indexByKey.get(key)).filter((index) => index !== void 0 && index >= start && index <= end).sort((a, b) => a - b);
+function checkAllSizesKnown(state, start, end) {
+  if (start == null || end == null || start < 0 || end < start) {
+    return false;
   }
-  return [];
-}
-function getMountedBufferedIndices(state) {
-  return getMountedIndicesInRange(state, state.startBuffered, state.endBuffered);
-}
-function getMountedNoBufferIndices(state) {
-  return getMountedIndicesInRange(state, state.startNoBuffer, state.endNoBuffer);
-}
-function checkAllSizesKnown(state, indices) {
-  return indices.length > 0 && indices.every((index) => {
-    const key = getId(state, index);
-    return key !== void 0 && state.sizesKnown.has(key);
-  });
+  let hasMountedIndex = false;
+  for (const key of state.containerItemKeys.keys()) {
+    const index = state.indexByKey.get(key);
+    if (index !== void 0 && index >= start && index <= end) {
+      hasMountedIndex = true;
+      const id = getId(state, index);
+      if (id === void 0 || !state.sizesKnown.has(id)) {
+        return false;
+      }
+    }
+  }
+  return hasMountedIndex;
 }
 
 // src/core/bootstrapInitialScroll.ts
@@ -3894,8 +3897,7 @@ function evaluateBootstrapInitialScroll(ctx) {
     bootstrapInitialScroll.targetIndexSeed = void 0;
   }
   const resolvedOffset = resolveInitialScrollOffset(ctx, initialScroll);
-  const mountedBufferedIndices = getMountedBufferedIndices(state);
-  const areMountedBufferedIndicesMeasured = checkAllSizesKnown(state, mountedBufferedIndices);
+  const areMountedBufferedIndicesMeasured = checkAllSizesKnown(state, state.startBuffered, state.endBuffered);
   const didResolvedOffsetChange = Math.abs(bootstrapInitialScroll.scroll - resolvedOffset) > 1;
   const { data } = state.props;
   const visibleIndices = getBootstrapRevealVisibleIndices({
@@ -4471,7 +4473,14 @@ function updateSnapToOffsets(ctx) {
 }
 
 // src/core/updateItemPositions.ts
-function updateItemPositions(ctx, dataChanged, { startIndex, scrollBottomBuffered, forceFullUpdate = false, doMVCP, optimizeForVisibleWindow = false } = {
+function updateItemPositions(ctx, dataChanged, {
+  doMVCP,
+  forceFullUpdate = false,
+  optimizeForVisibleWindow = false,
+  scrollBottomBuffered,
+  scrollVelocity,
+  startIndex
+} = {
   doMVCP: false,
   forceFullUpdate: false,
   optimizeForVisibleWindow: false,
@@ -4498,7 +4507,7 @@ function updateItemPositions(ctx, dataChanged, { startIndex, scrollBottomBuffere
   const extraData = peek$(ctx, "extraData");
   const layoutConfig = overrideItemLayout ? { span: 1 } : void 0;
   const lastScrollDelta = state.lastScrollDelta;
-  const velocity = getScrollVelocity(state);
+  const velocity = scrollVelocity != null ? scrollVelocity : getScrollVelocity(state);
   const shouldOptimize = !forceFullUpdate && !dataChanged && (optimizeForVisibleWindow || Math.abs(velocity) > 0 || state.scrollLength > 0 && lastScrollDelta > state.scrollLength);
   const maxVisibleArea = scrollBottomBuffered + 1e3;
   const useAverageSize = true;
@@ -4678,25 +4687,28 @@ function updateViewableItemsWithConfig(data, viewabilityConfigCallbackPair, stat
   const configId = viewabilityConfig.id;
   const viewabilityState = ensureViewabilityState(ctx, configId);
   const { viewableItems: previousViewableItems, start, end, startBuffered, endBuffered } = viewabilityState;
-  const viewabilityTokens = /* @__PURE__ */ new Map();
+  let staleViewabilityAmountIds;
   for (const [containerId, value] of ctx.mapViewabilityAmountValues) {
-    viewabilityTokens.set(
+    const nextValue = computeViewability(
+      state,
+      ctx,
+      viewabilityConfig,
       containerId,
-      computeViewability(
-        state,
-        ctx,
-        viewabilityConfig,
-        containerId,
-        value.key,
-        scrollSize,
-        value.item,
-        value.index
-      )
+      value.key,
+      scrollSize,
+      value.item,
+      value.index
     );
+    if (nextValue.sizeVisible < 0) {
+      staleViewabilityAmountIds != null ? staleViewabilityAmountIds : staleViewabilityAmountIds = [];
+      staleViewabilityAmountIds.push(containerId);
+    }
   }
   const changed = [];
+  const previousViewableKeys = /* @__PURE__ */ new Set();
   if (previousViewableItems) {
     for (const viewToken of previousViewableItems) {
+      previousViewableKeys.add(viewToken.key);
       const containerId = findContainerId(ctx, viewToken.key);
       if (!checkIsViewable(
         state,
@@ -4728,7 +4740,7 @@ function updateViewableItemsWithConfig(data, viewabilityConfigCallbackPair, stat
           key
         };
         viewableItems.push(viewToken);
-        if (!(previousViewableItems == null ? void 0 : previousViewableItems.find((v) => v.key === viewToken.key))) {
+        if (!previousViewableKeys.has(viewToken.key)) {
           changed.push(viewToken);
         }
       }
@@ -4749,20 +4761,17 @@ function updateViewableItemsWithConfig(data, viewabilityConfigCallbackPair, stat
       onViewableItemsChanged({ changed, end, endBuffered, start, startBuffered, viewableItems });
     }
   }
-  for (const [containerId, value] of ctx.mapViewabilityAmountValues) {
-    if (value.sizeVisible < 0) {
-      ctx.mapViewabilityAmountValues.delete(containerId);
+  if (staleViewabilityAmountIds) {
+    for (const containerId of staleViewabilityAmountIds) {
+      const value = ctx.mapViewabilityAmountValues.get(containerId);
+      if (value && value.sizeVisible < 0) {
+        ctx.mapViewabilityAmountValues.delete(containerId);
+      }
     }
   }
 }
-function shallowEqual(prev, next) {
-  if (!prev) return false;
-  const keys = Object.keys(next);
-  for (let i = 0; i < keys.length; i++) {
-    const k = keys[i];
-    if (prev[k] !== next[k]) return false;
-  }
-  return true;
+function areViewabilityAmountTokensEqual(prev, next) {
+  return !!prev && prev.containerId === next.containerId && prev.index === next.index && prev.isViewable === next.isViewable && prev.item === next.item && prev.key === next.key && prev.percentOfScroller === next.percentOfScroller && prev.percentVisible === next.percentVisible && prev.scrollSize === next.scrollSize && prev.size === next.size && prev.sizeVisible === next.sizeVisible;
 }
 function computeViewability(state, ctx, viewabilityConfig, containerId, key, scrollSize, item, index) {
   const { sizes, scroll: scrollState } = state;
@@ -4787,7 +4796,7 @@ function computeViewability(state, ctx, viewabilityConfig, containerId, key, scr
       sizeVisible: -1
     };
     const prev2 = ctx.mapViewabilityAmountValues.get(containerId);
-    if (!shallowEqual(prev2, value2)) {
+    if (!areViewabilityAmountTokensEqual(prev2, value2)) {
       ctx.mapViewabilityAmountValues.set(containerId, value2);
       const cb = ctx.mapViewabilityAmountCallbacks.get(containerId);
       if (cb) {
@@ -4817,7 +4826,7 @@ function computeViewability(state, ctx, viewabilityConfig, containerId, key, scr
     sizeVisible
   };
   const prev = ctx.mapViewabilityAmountValues.get(containerId);
-  if (!shallowEqual(prev, value)) {
+  if (!areViewabilityAmountTokensEqual(prev, value)) {
     ctx.mapViewabilityAmountValues.set(containerId, value);
     const cb = ctx.mapViewabilityAmountCallbacks.get(containerId);
     if (cb) {
@@ -4868,126 +4877,152 @@ function getExpandedContainerPoolSize(dataLength, numContainers) {
 }
 
 // src/utils/findAvailableContainers.ts
-function findAvailableContainers(ctx, numNeeded, startBuffered, endBuffered, pendingRemoval, requiredItemTypes, needNewContainers, protectedKeys) {
+function findAvailableContainers(ctx, needNewContainers, startBuffered, endBuffered, pendingRemoval, getRequiredItemType, protectedKeys) {
+  const numNeeded = needNewContainers.length;
+  if (numNeeded === 0) {
+    return [];
+  }
   const numContainers = peek$(ctx, "numContainers");
   const state = ctx.state;
   const { stickyContainerPool, containerItemTypes } = state;
   const shouldAvoidAssignedContainerReuse = state.props.recycleItems && !!state.props.positionComponentInternal;
-  const result = [];
-  const availableContainers = [];
-  const pendingRemovalSet = new Set(pendingRemoval);
+  const allocations = [];
+  const pendingRemovalSet = pendingRemoval.length > 0 ? new Set(pendingRemoval) : void 0;
   let pendingRemovalChanged = false;
+  let nextNewContainerIndex = numContainers;
+  const usedContainers = /* @__PURE__ */ new Set();
+  let availableContainers;
   const stickyHeaderIndicesSet = state.props.stickyHeaderIndicesSet;
-  const stickyHeaderItemIndices = (needNewContainers == null ? void 0 : needNewContainers.filter((index) => stickyHeaderIndicesSet.has(index))) || [];
   const canReuseContainer = (containerIndex, requiredType) => {
     if (!requiredType) return true;
     const existingType = containerItemTypes.get(containerIndex);
     if (!existingType) return true;
     return existingType === requiredType;
   };
-  const neededTypes = requiredItemTypes ? [...requiredItemTypes] : [];
-  let typeIndex = 0;
-  for (let i = 0; i < stickyHeaderItemIndices.length; i++) {
-    const requiredType = neededTypes[typeIndex];
-    let foundContainer = false;
-    for (const containerIndex of stickyContainerPool) {
-      const key = peek$(ctx, `containerItemKey${containerIndex}`);
-      const isPendingRemoval = pendingRemovalSet.has(containerIndex);
-      if ((key === void 0 || isPendingRemoval) && canReuseContainer(containerIndex, requiredType) && !result.includes(containerIndex)) {
-        result.push(containerIndex);
-        if (isPendingRemoval && pendingRemovalSet.delete(containerIndex)) {
-          pendingRemovalChanged = true;
-        }
-        foundContainer = true;
-        if (requiredItemTypes) typeIndex++;
-        break;
-      }
+  const pushAllocation = (itemIndex, itemType, containerIndex) => {
+    allocations.push({
+      containerIndex,
+      itemIndex,
+      itemType
+    });
+    usedContainers.add(containerIndex);
+    if (pendingRemovalSet == null ? void 0 : pendingRemovalSet.delete(containerIndex)) {
+      pendingRemovalChanged = true;
     }
-    if (!foundContainer) {
-      const newContainerIndex = numContainers + result.filter((index) => index >= numContainers).length;
-      result.push(newContainerIndex);
+  };
+  const pushNewContainer = (itemIndex, itemType, isSticky) => {
+    const newContainerIndex = nextNewContainerIndex++;
+    pushAllocation(itemIndex, itemType, newContainerIndex);
+    if (isSticky) {
       stickyContainerPool.add(newContainerIndex);
-      if (requiredItemTypes) typeIndex++;
     }
-  }
-  for (let u = 0; u < numContainers && result.length < numNeeded; u++) {
-    if (stickyContainerPool.has(u)) {
-      continue;
-    }
-    const key = peek$(ctx, `containerItemKey${u}`);
-    const requiredType = neededTypes[typeIndex];
-    const isPending = key !== void 0 && pendingRemovalSet.has(u);
-    const canUse = key === void 0 || isPending && canReuseContainer(u, requiredType);
-    if (canUse) {
-      if (isPending) {
-        pendingRemovalSet.delete(u);
-        pendingRemovalChanged = true;
-      }
-      result.push(u);
-      if (requiredItemTypes) {
-        typeIndex++;
-      }
+    return newContainerIndex;
+  };
+  const canUseContainer = (containerIndex, itemType) => {
+    if (usedContainers.has(containerIndex) || stickyContainerPool.has(containerIndex)) {
+      return false;
     }
-  }
-  if (!shouldAvoidAssignedContainerReuse) {
-    for (let u = 0; u < numContainers && result.length < numNeeded; u++) {
-      if (stickyContainerPool.has(u)) {
-        continue;
-      }
-      const key = peek$(ctx, `containerItemKey${u}`);
-      if (key === void 0) continue;
-      if ((protectedKeys == null ? void 0 : protectedKeys.has(key)) && state.indexByKey.has(key)) continue;
-      const index = state.indexByKey.get(key);
-      const isOutOfView = index < startBuffered || index > endBuffered;
-      if (isOutOfView) {
-        const distance = index < startBuffered ? startBuffered - index : index - endBuffered;
-        if (!requiredItemTypes || typeIndex < neededTypes.length && canReuseContainer(u, neededTypes[typeIndex])) {
-          availableContainers.push({ distance, index: u });
+    const key = peek$(ctx, `containerItemKey${containerIndex}`);
+    const isPending = !!(pendingRemovalSet == null ? void 0 : pendingRemovalSet.has(containerIndex));
+    return (key === void 0 || isPending) && canReuseContainer(containerIndex, itemType);
+  };
+  const findStickyContainer = (itemType) => {
+    let foundContainer;
+    for (const containerIndex of stickyContainerPool) {
+      if (!usedContainers.has(containerIndex)) {
+        const key = peek$(ctx, `containerItemKey${containerIndex}`);
+        const isPendingRemoval = !!(pendingRemovalSet == null ? void 0 : pendingRemovalSet.has(containerIndex));
+        if ((key === void 0 || isPendingRemoval) && canReuseContainer(containerIndex, itemType)) {
+          foundContainer = containerIndex;
+          break;
         }
       }
     }
-  }
-  const remaining = numNeeded - result.length;
-  if (remaining > 0) {
-    if (availableContainers.length > 0) {
-      if (availableContainers.length > remaining) {
-        availableContainers.sort(comparatorByDistance);
-        availableContainers.length = remaining;
+    return foundContainer;
+  };
+  const findUnassignedOrPendingContainer = (itemType) => {
+    let foundContainer;
+    for (let containerIndex = 0; containerIndex < numContainers && foundContainer === void 0; containerIndex++) {
+      if (canUseContainer(containerIndex, itemType)) {
+        foundContainer = containerIndex;
       }
-      for (const container of availableContainers) {
-        result.push(container.index);
-        if (requiredItemTypes) {
-          typeIndex++;
+    }
+    return foundContainer;
+  };
+  const getAvailableContainers = () => {
+    if (!availableContainers) {
+      availableContainers = [];
+      if (!shouldAvoidAssignedContainerReuse) {
+        for (let containerIndex = 0; containerIndex < numContainers; containerIndex++) {
+          if (usedContainers.has(containerIndex) || stickyContainerPool.has(containerIndex)) {
+            continue;
+          }
+          const key = peek$(ctx, `containerItemKey${containerIndex}`);
+          if (key === void 0) continue;
+          if ((protectedKeys == null ? void 0 : protectedKeys.has(key)) && state.indexByKey.has(key)) continue;
+          const index = state.indexByKey.get(key);
+          const isOutOfView = index < startBuffered || index > endBuffered;
+          if (isOutOfView) {
+            const distance = index < startBuffered ? startBuffered - index : index - endBuffered;
+            availableContainers.push({ distance, index: containerIndex });
+          }
         }
+        availableContainers.sort(comparatorByDistance);
       }
     }
-    const stillNeeded = numNeeded - result.length;
-    if (stillNeeded > 0) {
-      for (let i = 0; i < stillNeeded; i++) {
-        result.push(numContainers + i);
+    return availableContainers;
+  };
+  const findAvailableContainer = (itemType) => {
+    const containers = getAvailableContainers();
+    let matchIndex = -1;
+    for (let i = 0; i < containers.length && matchIndex === -1; i++) {
+      const containerIndex = containers[i].index;
+      if (!usedContainers.has(containerIndex) && canReuseContainer(containerIndex, itemType)) {
+        matchIndex = i;
       }
-      if (IS_DEV && numContainers + stillNeeded > peek$(ctx, "numContainersPooled")) {
-        console.warn(
-          "[legend-list] No unused container available, 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.",
-          {
-            debugInfo: {
-              numContainers,
-              numContainersPooled: peek$(ctx, "numContainersPooled"),
-              numNeeded,
-              stillNeeded
-            }
-          }
-        );
+    }
+    return matchIndex === -1 ? void 0 : containers.splice(matchIndex, 1)[0].index;
+  };
+  for (const itemIndex of needNewContainers) {
+    const itemType = getRequiredItemType == null ? void 0 : getRequiredItemType(itemIndex);
+    const isSticky = stickyHeaderIndicesSet.has(itemIndex);
+    let containerIndex;
+    if (isSticky) {
+      containerIndex = findStickyContainer(itemType);
+    } else {
+      containerIndex = findUnassignedOrPendingContainer(itemType);
+      if (containerIndex === void 0) {
+        containerIndex = findAvailableContainer(itemType);
       }
     }
+    if (containerIndex !== void 0) {
+      pushAllocation(itemIndex, itemType, containerIndex);
+    } else {
+      pushNewContainer(itemIndex, itemType, isSticky);
+    }
   }
   if (pendingRemovalChanged) {
     pendingRemoval.length = 0;
-    for (const value of pendingRemovalSet) {
-      pendingRemoval.push(value);
+    if (pendingRemovalSet) {
+      for (const value of pendingRemovalSet) {
+        pendingRemoval.push(value);
+      }
     }
   }
-  return result.sort(comparatorDefault);
+  if (IS_DEV && nextNewContainerIndex > peek$(ctx, "numContainersPooled")) {
+    console.warn(
+      "[legend-list] No unused container available, 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.",
+      {
+        debugInfo: {
+          numContainers,
+          numContainersPooled: peek$(ctx, "numContainersPooled"),
+          numNeeded,
+          stillNeeded: nextNewContainerIndex - numContainers
+        }
+      }
+    );
+  }
+  return allocations;
 }
 function comparatorByDistance(a, b) {
   return b.distance - a.distance;
@@ -5013,21 +5048,28 @@ function findCurrentStickyIndex(stickyArray, scroll, state) {
   }
   return -1;
 }
-function getActiveStickyIndices(ctx, stickyHeaderIndices) {
+function isStickyIndexActive(ctx, targetIndex) {
   const state = ctx.state;
-  return new Set(
-    Array.from(state.stickyContainerPool).map((i) => peek$(ctx, `containerItemKey${i}`)).map((key) => key ? state.indexByKey.get(key) : void 0).filter((idx) => idx !== void 0 && stickyHeaderIndices.has(idx))
-  );
+  let isActive = false;
+  for (const containerIndex of state.stickyContainerPool) {
+    const key = peek$(ctx, `containerItemKey${containerIndex}`);
+    const itemIndex = key ? state.indexByKey.get(key) : void 0;
+    if (itemIndex === targetIndex) {
+      isActive = true;
+      break;
+    }
+  }
+  return isActive;
 }
-function handleStickyActivation(ctx, stickyHeaderIndices, stickyArray, currentStickyIdx, needNewContainers, needNewContainersSet, startBuffered, endBuffered) {
+function handleStickyActivation(ctx, stickyArray, currentStickyIdx, needNewContainers, needNewContainersSet, startBuffered, endBuffered) {
   var _a3;
   const state = ctx.state;
-  const activeIndices = getActiveStickyIndices(ctx, stickyHeaderIndices);
   set$(ctx, "activeStickyIndex", currentStickyIdx >= 0 ? stickyArray[currentStickyIdx] : -1);
   for (let offset = 0; offset <= 1; offset++) {
     const idx = currentStickyIdx - offset;
-    if (idx < 0 || activeIndices.has(stickyArray[idx])) continue;
+    if (idx < 0) continue;
     const stickyIndex = stickyArray[idx];
+    if (isStickyIndexActive(ctx, stickyIndex)) continue;
     const stickyId = (_a3 = state.idCache[stickyIndex]) != null ? _a3 : getId(state, stickyIndex);
     if (stickyId && !state.containerItemKeys.has(stickyId) && (stickyIndex < startBuffered || stickyIndex > endBuffered) && !needNewContainersSet.has(stickyIndex)) {
       needNewContainersSet.add(stickyIndex);
@@ -5069,10 +5111,86 @@ function handleStickyRecycling(ctx, stickyArray, scroll, drawDistance, currentSt
     }
   }
 }
+function trackVisibleRange(range, i, top, size, scroll, scrollBottom) {
+  let didPassVisibleEnd = false;
+  if (range.startNoBuffer === null && top + size > scroll) {
+    range.startNoBuffer = i;
+  }
+  if (range.firstFullyOnScreenIndex === void 0 && top >= scroll - 10 && top <= scrollBottom) {
+    range.firstFullyOnScreenIndex = i;
+  }
+  if (range.startNoBuffer !== null) {
+    if (top <= scrollBottom) {
+      range.endNoBuffer = i;
+    } else {
+      didPassVisibleEnd = true;
+    }
+  }
+  return didPassVisibleEnd;
+}
+function getIdsInVisibleRange(state, range) {
+  var _a3, _b;
+  const idsInView = [];
+  const firstVisibleAnchorIndex = (_a3 = range.firstFullyOnScreenIndex) != null ? _a3 : range.startNoBuffer;
+  if (firstVisibleAnchorIndex !== null && firstVisibleAnchorIndex !== void 0 && range.endNoBuffer !== null) {
+    for (let i = firstVisibleAnchorIndex; i <= range.endNoBuffer; i++) {
+      const id = (_b = state.idCache[i]) != null ? _b : getId(state, i);
+      idsInView.push(id);
+    }
+  }
+  return idsInView;
+}
+function updateViewabilityForCachedRange(ctx, viewabilityConfigCallbackPairs, scrollLength, scroll, scrollBottom) {
+  var _a3, _b;
+  const state = ctx.state;
+  const {
+    endBuffered,
+    idCache,
+    positions,
+    props: { data },
+    sizes,
+    startBuffered
+  } = state;
+  if (startBuffered === null || endBuffered === null || startBuffered < 0 || endBuffered < startBuffered) {
+    return;
+  }
+  const visibleRange = {
+    endNoBuffer: null,
+    firstFullyOnScreenIndex: void 0,
+    startNoBuffer: null
+  };
+  for (let i = startBuffered; i <= endBuffered && i < data.length; i++) {
+    const id = (_a3 = idCache[i]) != null ? _a3 : getId(state, i);
+    const size = (_b = sizes.get(id)) != null ? _b : getItemSize(ctx, id, i, data[i]);
+    const top = positions[i];
+    const didPassVisibleEnd = trackVisibleRange(visibleRange, i, top, size, scroll, scrollBottom);
+    if (didPassVisibleEnd) {
+      break;
+    }
+  }
+  Object.assign(state, {
+    endNoBuffer: visibleRange.endNoBuffer,
+    firstFullyOnScreenIndex: visibleRange.firstFullyOnScreenIndex,
+    idsInView: getIdsInVisibleRange(state, visibleRange),
+    startNoBuffer: visibleRange.startNoBuffer
+  });
+  if (visibleRange.startNoBuffer !== null && visibleRange.endNoBuffer !== null) {
+    updateViewableItems(
+      state,
+      ctx,
+      viewabilityConfigCallbackPairs,
+      scrollLength,
+      visibleRange.startNoBuffer,
+      visibleRange.endNoBuffer,
+      startBuffered,
+      endBuffered
+    );
+  }
+}
 function calculateItemsInView(ctx, params = {}) {
   const state = ctx.state;
   batchedUpdates(() => {
-    var _a3, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n, _o, _p;
+    var _a3, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n, _o;
     const {
       columns,
       containerItemKeys,
@@ -5173,6 +5291,15 @@ function calculateItemsInView(ctx, params = {}) {
         state.scrollForNextCalculateItemsInView = void 0;
       } else if ((top === null || scrollTopBuffered > top) && (bottom === null || scrollBottomBuffered < bottom)) {
         if (!isInMVCPActiveMode(state)) {
+          if (viewabilityConfigCallbackPairs) {
+            updateViewabilityForCachedRange(
+              ctx,
+              viewabilityConfigCallbackPairs,
+              scrollLength,
+              scroll,
+              scrollBottom
+            );
+          }
           finishCalculateItemsInView == null ? void 0 : finishCalculateItemsInView();
           return;
         }
@@ -5189,6 +5316,7 @@ function calculateItemsInView(ctx, params = {}) {
       forceFullUpdate: !!forceFullItemPositions,
       optimizeForVisibleWindow,
       scrollBottomBuffered,
+      scrollVelocity: speed,
       startIndex
     });
     totalSize = getContentSize(ctx);
@@ -5214,10 +5342,8 @@ function calculateItemsInView(ctx, params = {}) {
       updateScroll2(state.scroll);
       updateScrollRange();
     }
-    let startNoBuffer = null;
     let startBuffered = null;
     let startBufferedId = null;
-    let endNoBuffer = null;
     let endBuffered = null;
     let loopStart = (_f = suppressInitialScrollSideEffects ? bootstrapInitialScrollState == null ? void 0 : bootstrapInitialScrollState.targetIndexSeed : void 0) != null ? _f : !dataChanged && startBufferedIdOrig ? indexByKey.get(startBufferedIdOrig) || 0 : 0;
     for (let i = loopStart; i >= 0; i--) {
@@ -5251,19 +5377,18 @@ function calculateItemsInView(ctx, params = {}) {
         maxIndexRendered = Math.max(maxIndexRendered, index);
       }
     }
-    let firstFullyOnScreenIndex;
+    const visibleRange = {
+      endNoBuffer: null,
+      firstFullyOnScreenIndex: void 0,
+      startNoBuffer: null
+    };
     const dataLength = data.length;
     for (let i = Math.max(0, loopStart); i < dataLength && (!foundEnd || i <= maxIndexRendered); i++) {
       const id = (_i = idCache[i]) != null ? _i : getId(state, i);
       const size = (_j = sizes.get(id)) != null ? _j : getItemSize(ctx, id, i, data[i]);
       const top = positions[i];
       if (!foundEnd) {
-        if (startNoBuffer === null && top + size > scroll) {
-          startNoBuffer = i;
-        }
-        if (firstFullyOnScreenIndex === void 0 && top >= scroll - 10 && top <= scrollBottom) {
-          firstFullyOnScreenIndex = i;
-        }
+        trackVisibleRange(visibleRange, i, top, size, scroll, scrollBottom);
         if (startBuffered === null && top + size > scrollTopBuffered) {
           startBuffered = i;
           startBufferedId = id;
@@ -5273,10 +5398,7 @@ function calculateItemsInView(ctx, params = {}) {
             nextTop = top;
           }
         }
-        if (startNoBuffer !== null) {
-          if (top <= scrollBottom) {
-            endNoBuffer = i;
-          }
+        if (visibleRange.startNoBuffer !== null) {
           if (top <= scrollBottomBuffered) {
             endBuffered = i;
             if (scrollBottomBuffered > totalSize) {
@@ -5290,22 +5412,14 @@ function calculateItemsInView(ctx, params = {}) {
         }
       }
     }
-    const idsInView = [];
-    const firstVisibleAnchorIndex = firstFullyOnScreenIndex != null ? firstFullyOnScreenIndex : startNoBuffer;
-    if (firstVisibleAnchorIndex !== null && firstVisibleAnchorIndex !== void 0 && endNoBuffer !== null) {
-      for (let i = firstVisibleAnchorIndex; i <= endNoBuffer; i++) {
-        const id = (_k = idCache[i]) != null ? _k : getId(state, i);
-        idsInView.push(id);
-      }
-    }
     Object.assign(state, {
       endBuffered,
-      endNoBuffer,
-      firstFullyOnScreenIndex,
-      idsInView,
+      endNoBuffer: visibleRange.endNoBuffer,
+      firstFullyOnScreenIndex: visibleRange.firstFullyOnScreenIndex,
+      idsInView: getIdsInVisibleRange(state, visibleRange),
       startBuffered,
       startBufferedId,
-      startNoBuffer
+      startNoBuffer: visibleRange.startNoBuffer
     });
     if (enableScrollForNextCalculateItemsInView && nextTop !== void 0 && nextBottom !== void 0) {
       state.scrollForNextCalculateItemsInView = isNullOrUndefined(nextTop) && isNullOrUndefined(nextBottom) ? void 0 : {
@@ -5327,7 +5441,7 @@ function calculateItemsInView(ctx, params = {}) {
       const needNewContainers = [];
       const needNewContainersSet = /* @__PURE__ */ new Set();
       for (let i = startBuffered; i <= endBuffered; i++) {
-        const id = (_l = idCache[i]) != null ? _l : getId(state, i);
+        const id = (_k = idCache[i]) != null ? _k : getId(state, i);
         if (!containerItemKeys.has(id)) {
           needNewContainersSet.add(i);
           needNewContainers.push(i);
@@ -5336,7 +5450,7 @@ function calculateItemsInView(ctx, params = {}) {
       if (alwaysRenderArr.length > 0) {
         for (const index of alwaysRenderArr) {
           if (index < 0 || index >= dataLength) continue;
-          const id = (_m = idCache[index]) != null ? _m : getId(state, index);
+          const id = (_l = idCache[index]) != null ? _l : getId(state, index);
           if (id && !containerItemKeys.has(id) && !needNewContainersSet.has(index)) {
             needNewContainersSet.add(index);
             needNewContainers.push(index);
@@ -5346,7 +5460,6 @@ function calculateItemsInView(ctx, params = {}) {
       if (stickyHeaderIndicesArr.length > 0) {
         handleStickyActivation(
           ctx,
-          stickyHeaderIndicesSet,
           stickyHeaderIndicesArr,
           currentStickyIdx,
           needNewContainers,
@@ -5358,35 +5471,34 @@ function calculateItemsInView(ctx, params = {}) {
         set$(ctx, "activeStickyIndex", -1);
       }
       if (needNewContainers.length > 0) {
-        const requiredItemTypes = getItemType ? needNewContainers.map((i) => {
+        const getRequiredItemType = getItemType ? (i) => {
           const itemType = getItemType(data[i], i);
           return itemType !== void 0 ? String(itemType) : "";
-        }) : void 0;
-        const availableContainers = findAvailableContainers(
+        } : void 0;
+        const availableContainerAllocations = findAvailableContainers(
           ctx,
-          needNewContainers.length,
+          needNewContainers,
           startBuffered,
           endBuffered,
           pendingRemoval,
-          requiredItemTypes,
-          needNewContainers,
+          getRequiredItemType,
           protectedContainerKeys
         );
-        for (let idx = 0; idx < needNewContainers.length; idx++) {
-          const i = needNewContainers[idx];
-          const containerIndex = availableContainers[idx];
-          const id = (_n = idCache[i]) != null ? _n : getId(state, i);
+        for (const allocation of availableContainerAllocations) {
+          const i = allocation.itemIndex;
+          const containerIndex = allocation.containerIndex;
+          const id = (_m = idCache[i]) != null ? _m : getId(state, i);
           const oldKey = peek$(ctx, `containerItemKey${containerIndex}`);
           if (oldKey && oldKey !== id) {
             containerItemKeys.delete(oldKey);
           }
           set$(ctx, `containerItemKey${containerIndex}`, id);
           set$(ctx, `containerItemData${containerIndex}`, data[i]);
-          if (requiredItemTypes) {
-            state.containerItemTypes.set(containerIndex, requiredItemTypes[idx]);
+          if (allocation.itemType !== void 0) {
+            state.containerItemTypes.set(containerIndex, allocation.itemType);
           }
           containerItemKeys.set(id, containerIndex);
-          (_o = state.userScrollAnchorReset) == null ? void 0 : _o.keys.add(id);
+          (_n = state.userScrollAnchorReset) == null ? void 0 : _n.keys.add(id);
           const containerSticky = `containerSticky${containerIndex}`;
           const isSticky = stickyHeaderIndicesSet.has(i);
           const isAlwaysRender = alwaysRenderSet.has(i);
@@ -5424,7 +5536,7 @@ function calculateItemsInView(ctx, params = {}) {
       if (alwaysRenderArr.length > 0) {
         for (const index of alwaysRenderArr) {
           if (index < 0 || index >= dataLength) continue;
-          const id = (_p = idCache[index]) != null ? _p : getId(state, index);
+          const id = (_o = idCache[index]) != null ? _o : getId(state, index);
           const containerIndex = containerItemKeys.get(id);
           if (containerIndex !== void 0) {
             state.stickyContainerPool.add(containerIndex);
@@ -5443,10 +5555,11 @@ function calculateItemsInView(ctx, params = {}) {
         alwaysRenderSet
       );
     }
+    const pendingRemovalSet = pendingRemoval.length > 0 ? new Set(pendingRemoval) : void 0;
     let didChangePositions = false;
     for (let i = 0; i < numContainers; i++) {
       const itemKey = peek$(ctx, `containerItemKey${i}`);
-      if (pendingRemoval.includes(i)) {
+      if (pendingRemovalSet == null ? void 0 : pendingRemovalSet.has(i)) {
         if (itemKey !== void 0) {
           containerItemKeys.delete(itemKey);
         }
@@ -5477,24 +5590,24 @@ function calculateItemsInView(ctx, params = {}) {
       evaluateBootstrapInitialScroll(ctx);
       return;
     }
-    const mountedBufferedIndices = getMountedBufferedIndices(state);
-    const mountedNoBufferIndices = getMountedNoBufferIndices(state);
-    const readinessIndices = hasActiveInitialScroll(state) ? mountedBufferedIndices : mountedNoBufferIndices.length > 0 ? mountedNoBufferIndices : mountedBufferedIndices;
-    if (!queuedInitialLayout && readinessIndices.length > 0 && checkAllSizesKnown(state, readinessIndices)) {
-      setDidLayout(ctx);
-      handleInitialScrollLayoutReady(ctx);
+    if (!queuedInitialLayout && !state.didContainersLayout) {
+      const isInitialLayoutReady = hasActiveInitialScroll(state) ? checkAllSizesKnown(state, state.startBuffered, state.endBuffered) : checkAllSizesKnown(state, state.startNoBuffer, state.endNoBuffer) || checkAllSizesKnown(state, state.startBuffered, state.endBuffered);
+      if (isInitialLayoutReady) {
+        setDidLayout(ctx);
+        handleInitialScrollLayoutReady(ctx);
+      }
     }
-    if (viewabilityConfigCallbackPairs && startNoBuffer !== null && endNoBuffer !== null) {
+    if (viewabilityConfigCallbackPairs && visibleRange.startNoBuffer !== null && visibleRange.endNoBuffer !== null) {
       if (!didMVCPAdjustScroll) {
         updateViewableItems(
           ctx.state,
           ctx,
           viewabilityConfigCallbackPairs,
           scrollLength,
-          startNoBuffer,
-          endNoBuffer,
-          startBuffered != null ? startBuffered : startNoBuffer,
-          endBuffered != null ? endBuffered : endNoBuffer
+          visibleRange.startNoBuffer,
+          visibleRange.endNoBuffer,
+          startBuffered != null ? startBuffered : visibleRange.startNoBuffer,
+          endBuffered != null ? endBuffered : visibleRange.endNoBuffer
         );
       }
     }
@@ -5953,6 +6066,7 @@ function updateItemSize(ctx, itemKey, sizeObj) {
   } = state;
   if (!data) return;
   const index = state.indexByKey.get(itemKey);
+  let resolvedMeasurementItem;
   if (getFixedItemSize) {
     if (index === void 0) {
       return;
@@ -5963,6 +6077,12 @@ function updateItemSize(ctx, itemKey, sizeObj) {
     }
     const type = getItemType ? (_a3 = getItemType(itemData, index)) != null ? _a3 : "" : "";
     const size2 = getFixedItemSize(itemData, index, type);
+    resolvedMeasurementItem = {
+      didResolveFixedItemSize: true,
+      fixedItemSize: size2,
+      itemData,
+      itemType: type
+    };
     if (size2 !== void 0 && size2 === sizesKnown.get(itemKey)) {
       updateOtherAxisSizeIfNeeded(ctx, sizeObj, horizontal);
       return;
@@ -5972,7 +6092,7 @@ function updateItemSize(ctx, itemKey, sizeObj) {
   let shouldMaintainScrollAtEnd = false;
   let minIndexSizeChanged;
   const prevSizeKnown = state.sizesKnown.get(itemKey);
-  const diff = updateOneItemSize(ctx, itemKey, sizeObj);
+  const diff = updateOneItemSize(ctx, itemKey, sizeObj, resolvedMeasurementItem);
   const size = roundSize(horizontal ? sizeObj.width : sizeObj.height);
   if (diff !== 0) {
     minIndexSizeChanged = minIndexSizeChanged !== void 0 ? Math.min(minIndexSizeChanged, index) : index;
@@ -5997,7 +6117,7 @@ function updateItemSize(ctx, itemKey, sizeObj) {
     state.minIndexSizeChanged = state.minIndexSizeChanged !== void 0 ? Math.min(state.minIndexSizeChanged, minIndexSizeChanged) : minIndexSizeChanged;
   }
   updateOtherAxisSizeIfNeeded(ctx, sizeObj, horizontal);
-  if (didContainersLayout || checkAllSizesKnown(state, getMountedBufferedIndices(state))) {
+  if (didContainersLayout || checkAllSizesKnown(state, state.startBuffered, state.endBuffered)) {
     if (needsRecalculate) {
       state.scrollForNextCalculateItemsInView = void 0;
       runOrScheduleMVCPRecalculate(ctx);
@@ -6011,8 +6131,8 @@ function updateItemSize(ctx, itemKey, sizeObj) {
     }
   }
 }
-function updateOneItemSize(ctx, itemKey, sizeObj) {
-  var _a3, _b;
+function updateOneItemSize(ctx, itemKey, sizeObj, resolvedMeasurementItem) {
+  var _a3, _b, _c;
   const state = ctx.state;
   const {
     indexByKey,
@@ -6022,20 +6142,25 @@ function updateOneItemSize(ctx, itemKey, sizeObj) {
   } = state;
   if (!data) return 0;
   const index = indexByKey.get(itemKey);
-  const itemData = data[index];
-  let itemType;
-  let fixedItemSize;
-  if (getFixedItemSize) {
-    itemType = getItemType ? (_a3 = getItemType(itemData, index)) != null ? _a3 : "" : "";
+  const itemData = (_a3 = resolvedMeasurementItem == null ? void 0 : resolvedMeasurementItem.itemData) != null ? _a3 : data[index];
+  let itemType = resolvedMeasurementItem == null ? void 0 : resolvedMeasurementItem.itemType;
+  let fixedItemSize = resolvedMeasurementItem == null ? void 0 : resolvedMeasurementItem.fixedItemSize;
+  if (getFixedItemSize && !(resolvedMeasurementItem == null ? void 0 : resolvedMeasurementItem.didResolveFixedItemSize)) {
+    itemType = getItemType ? (_b = getItemType(itemData, index)) != null ? _b : "" : "";
     fixedItemSize = getFixedItemSize(itemData, index, itemType);
   }
-  const prevSize = getItemSize(ctx, itemKey, index, itemData);
+  const resolvedItemSize = (resolvedMeasurementItem == null ? void 0 : resolvedMeasurementItem.didResolveFixedItemSize) || itemType !== void 0 || fixedItemSize !== void 0 ? {
+    didResolveFixedItemSize: resolvedMeasurementItem == null ? void 0 : resolvedMeasurementItem.didResolveFixedItemSize,
+    fixedItemSize,
+    itemType
+  } : void 0;
+  const prevSize = getItemSize(ctx, itemKey, index, itemData, void 0, void 0, void 0, resolvedItemSize);
   const rawSize = horizontal ? sizeObj.width : sizeObj.height;
   const prevSizeKnown = sizesKnown.get(itemKey);
   const size = Math.round(rawSize) ;
   sizesKnown.set(itemKey, size);
   if (fixedItemSize === void 0 && size > 0) {
-    itemType != null ? itemType : itemType = getItemType ? (_b = getItemType(itemData, index)) != null ? _b : "" : "";
+    itemType != null ? itemType : itemType = getItemType ? (_c = getItemType(itemData, index)) != null ? _c : "" : "";
     let averages = averageSizes[itemType];
     if (!averages) {
       averages = averageSizes[itemType] = { avg: 0, num: 0 };
@@ -6137,6 +6262,11 @@ function getAverageItemSizes(state) {
   }
   return averageItemSizes;
 }
+function triggerMountedContainerLayouts(ctx) {
+  for (const triggerLayout of ctx.containerLayoutTriggers.values()) {
+    triggerLayout();
+  }
+}
 function createImperativeHandle(ctx, scheduleImperativeScrollCommit) {
   const state = ctx.state;
   const IMPERATIVE_SCROLL_SETTLE_MAX_WAIT_MS = 800;
@@ -6262,6 +6392,7 @@ function createImperativeHandle(ctx, scheduleImperativeScrollCommit) {
       state.columns.length = 0;
       state.columnSpans.length = 0;
     }
+    triggerMountedContainerLayouts(ctx);
     (_b = state.triggerCalculateItemsInView) == null ? void 0 : _b.call(state, { forceFullItemPositions: true });
   };
   return {
@@ -7064,7 +7195,7 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
       viewabilityConfigCallbackPairs
     });
     state.viewabilityConfigCallbackPairs = viewability;
-    state.enableScrollForNextCalculateItemsInView = !viewability;
+    state.enableScrollForNextCalculateItemsInView = true;
     if (viewability) {
       state.scrollForNextCalculateItemsInView = void 0;
     }