@legendapp/list 3.0.2 → 3.0.4

package/react.js

@@ -2462,17 +2462,42 @@ function setSize(ctx, itemKey, size, notifyTotalSize = true) {
 }
 
 // src/utils/getItemSize.ts
+function getKnownOrFixedSize(ctx, key, index, data) {
+  var _a3;
+  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);
+    if (size !== void 0) {
+      state.sizesKnown.set(key, size);
+    }
+  }
+  return size;
+}
+function getKnownOrFixedItemSize(ctx, index) {
+  const key = getId(ctx.state, index);
+  return getKnownOrFixedSize(ctx, key, index, ctx.state.props.data[index]);
+}
+function areKnownOrFixedItemSizesAvailable(ctx, startIndex, endIndex) {
+  for (let index = startIndex; index <= endIndex; index++) {
+    if (getKnownOrFixedItemSize(ctx, index) === void 0) {
+      return false;
+    }
+  }
+  return true;
+}
 function getItemSize(ctx, key, index, data, useAverageSize, preferCachedSize, notifyTotalSize) {
   var _a3, _b, _c;
   const state = ctx.state;
   const {
-    sizesKnown,
     sizes,
     averageSizes,
-    props: { estimatedItemSize, getFixedItemSize, getItemType },
+    props: { estimatedItemSize, getItemType },
     scrollingTo
   } = state;
-  const sizeKnown = sizesKnown.get(key);
+  const sizeKnown = state.sizesKnown.get(key);
   if (sizeKnown !== void 0) {
     return sizeKnown;
   }
@@ -2483,14 +2508,13 @@ function getItemSize(ctx, key, index, data, useAverageSize, preferCachedSize, no
       return renderedSize;
     }
   }
-  const itemType = getItemType ? (_a3 = getItemType(data, index)) != null ? _a3 : "" : "";
-  if (getFixedItemSize) {
-    size = getFixedItemSize(data, index, itemType);
-    if (size !== void 0) {
-      sizesKnown.set(key, size);
-    }
+  size = getKnownOrFixedSize(ctx, key, index, data);
+  if (size !== void 0) {
+    setSize(ctx, key, size, notifyTotalSize);
+    return size;
   }
-  if (size === void 0 && useAverageSize && sizeKnown === void 0 && !scrollingTo) {
+  const itemType = getItemType ? (_a3 = getItemType(data, index)) != null ? _a3 : "" : "";
+  if (useAverageSize && !scrollingTo) {
     const averageSizeForType = (_b = averageSizes[itemType]) == null ? void 0 : _b.avg;
     if (averageSizeForType !== void 0) {
       size = roundSize(averageSizeForType);
@@ -2499,7 +2523,7 @@ function getItemSize(ctx, key, index, data, useAverageSize, preferCachedSize, no
   if (size === void 0 && renderedSize !== void 0) {
     return renderedSize;
   }
-  if (size === void 0 && useAverageSize && sizeKnown === void 0 && scrollingTo) {
+  if (size === void 0 && useAverageSize && scrollingTo) {
     const averageSizeForType = (_c = scrollingTo.averageSizeSnapshot) == null ? void 0 : _c[itemType];
     if (averageSizeForType !== void 0) {
       size = roundSize(averageSizeForType);
@@ -3106,7 +3130,7 @@ function updateScroll(ctx, newScroll, forceUpdate, options) {
     if (scrollLength > 0 && scrollingTo === void 0 && scrollDelta > scrollLength && !state.pendingNativeMVCPAdjust) {
       state.mvcpAnchorLock = void 0;
       state.pendingNativeMVCPAdjust = void 0;
-      state.userScrollAnchorResetKeys = /* @__PURE__ */ new Set();
+      state.userScrollAnchorReset = { keys: /* @__PURE__ */ new Set() };
       if (state.queuedMVCPRecalculate !== void 0) {
         cancelAnimationFrame(state.queuedMVCPRecalculate);
         state.queuedMVCPRecalculate = void 0;
@@ -5069,7 +5093,7 @@ function handleStickyRecycling(ctx, stickyArray, scroll, drawDistance, currentSt
 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, _q;
+    var _a3, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n, _o, _p;
     const {
       columns,
       containerItemKeys,
@@ -5383,7 +5407,7 @@ function calculateItemsInView(ctx, params = {}) {
             state.containerItemTypes.set(containerIndex, requiredItemTypes[idx]);
           }
           containerItemKeys.set(id, containerIndex);
-          (_o = state.userScrollAnchorResetKeys) == null ? void 0 : _o.add(id);
+          (_o = state.userScrollAnchorReset) == null ? void 0 : _o.keys.add(id);
           const containerSticky = `containerSticky${containerIndex}`;
           const isSticky = stickyHeaderIndicesSet.has(i);
           const isAlwaysRender = alwaysRenderSet.has(i);
@@ -5411,13 +5435,17 @@ function calculateItemsInView(ctx, params = {}) {
           }
         }
       }
-      if (((_p = state.userScrollAnchorResetKeys) == null ? void 0 : _p.size) === 0) {
-        state.userScrollAnchorResetKeys = void 0;
+      if (state.userScrollAnchorReset) {
+        if (state.userScrollAnchorReset.keys.size === 0) {
+          state.userScrollAnchorReset = void 0;
+        } else {
+          state.userScrollAnchorReset.batchSize = state.userScrollAnchorReset.keys.size;
+        }
       }
       if (alwaysRenderArr.length > 0) {
         for (const index of alwaysRenderArr) {
           if (index < 0 || index >= dataLength) continue;
-          const id = (_q = idCache[index]) != null ? _q : getId(state, index);
+          const id = (_p = idCache[index]) != null ? _p : getId(state, index);
           const containerIndex = containerItemKeys.get(id);
           if (containerIndex !== void 0) {
             state.stickyContainerPool.add(containerIndex);
@@ -5815,22 +5843,27 @@ var ScrollAdjustHandler = class {
 
 // src/core/updateAnchoredEndSpace.ts
 function maybeUpdateAnchoredEndSpace(ctx) {
-  var _a3;
+  var _a3, _b;
   const state = ctx.state;
   const anchoredEndSpace = state.props.anchoredEndSpace;
   const previousSize = peek$(ctx, "anchoredEndSpaceSize");
+  const previousReadyAnchorIndex = state.anchoredEndSpaceReadyAnchorIndex;
+  const previousReadyAnchorKey = state.anchoredEndSpaceReadyAnchorKey;
+  const nextAnchorIndex = anchoredEndSpace == null ? void 0 : anchoredEndSpace.anchorIndex;
+  let nextAnchorKey;
+  let isReady = true;
   let nextSize = 0;
   if (anchoredEndSpace) {
     const { anchorIndex, anchorMaxSize, anchorOffset = 0 } = anchoredEndSpace;
     const { data } = state.props;
     if (anchorIndex >= 0 && anchorIndex < data.length && state.scrollLength > 0) {
+      nextAnchorKey = getId(state, anchorIndex);
       let contentBelowAnchor = 0;
       const footerSize = ctx.values.get("footerSize") || 0;
       const stylePaddingBottom = state.props.stylePaddingBottom || 0;
       let hasUnknownTailSize = false;
       for (let index = anchorIndex; index < data.length; index++) {
-        const itemKey = getId(state, index);
-        const size = itemKey ? state.sizesKnown.get(itemKey) : void 0;
+        const size = getKnownOrFixedItemSize(ctx, index);
         const effectiveSize = index === anchorIndex && anchorMaxSize !== void 0 ? Math.min(size || 0, Math.max(0, anchorMaxSize)) : size;
         if (size === void 0) {
           hasUnknownTailSize = true;
@@ -5840,15 +5873,25 @@ function maybeUpdateAnchoredEndSpace(ctx) {
         }
       }
       contentBelowAnchor += footerSize + stylePaddingBottom;
+      isReady = !hasUnknownTailSize;
       nextSize = hasUnknownTailSize ? previousSize || 0 : Math.max(0, state.scrollLength - contentBelowAnchor - anchorOffset);
+    } else if (anchorIndex >= 0) {
+      isReady = false;
     }
   }
-  if (previousSize !== nextSize) {
-    set$(ctx, "anchoredEndSpaceSize", nextSize);
-    (_a3 = anchoredEndSpace == null ? void 0 : anchoredEndSpace.onSizeChanged) == null ? void 0 : _a3.call(anchoredEndSpace, nextSize);
-    if (anchoredEndSpace == null ? void 0 : anchoredEndSpace.includeInEndInset) {
+  const didSizeChange = previousSize !== nextSize;
+  const didReadyAnchorChange = previousReadyAnchorIndex !== nextAnchorIndex || previousReadyAnchorKey !== nextAnchorKey;
+  if (isReady && (didSizeChange || didReadyAnchorChange)) {
+    state.anchoredEndSpaceReadyAnchorIndex = nextAnchorIndex;
+    state.anchoredEndSpaceReadyAnchorKey = nextAnchorKey;
+    if (didSizeChange) {
+      set$(ctx, "anchoredEndSpaceSize", nextSize);
+      (_a3 = anchoredEndSpace == null ? void 0 : anchoredEndSpace.onSizeChanged) == null ? void 0 : _a3.call(anchoredEndSpace, nextSize);
+    }
+    if (didSizeChange && (anchoredEndSpace == null ? void 0 : anchoredEndSpace.includeInEndInset)) {
       updateScroll(ctx, state.scroll, true);
     }
+    (_b = anchoredEndSpace == null ? void 0 : anchoredEndSpace.onReady) == null ? void 0 : _b.call(anchoredEndSpace, { anchorIndex: nextAnchorIndex, anchorKey: nextAnchorKey, size: nextSize });
   }
   return nextSize;
 }
@@ -5871,37 +5914,42 @@ function updateContentInsetEndAdjustment(ctx, previousContentInsetEndAdjustment)
 
 // src/core/updateItemSize.ts
 function runOrScheduleMVCPRecalculate(ctx) {
+  var _a3, _b;
   const state = ctx.state;
-  if (state.userScrollAnchorResetKeys !== void 0) {
-    if (state.queuedMVCPRecalculate !== void 0) {
-      return;
-    }
-    state.queuedMVCPRecalculate = requestAnimationFrame(() => {
-      var _a3;
-      state.queuedMVCPRecalculate = void 0;
+  if (state.userScrollAnchorReset !== void 0) {
+    const replacementBatchSize = (_a3 = state.userScrollAnchorReset.batchSize) != null ? _a3 : state.userScrollAnchorReset.keys.size;
+    const replacementMeasurementBatchThreshold = 3;
+    const shouldBatchReplacementMeasurements = replacementBatchSize > replacementMeasurementBatchThreshold;
+    if (shouldBatchReplacementMeasurements) {
+      if (state.queuedMVCPRecalculate === void 0) {
+        state.queuedMVCPRecalculate = requestAnimationFrame(() => {
+          var _a4;
+          state.queuedMVCPRecalculate = void 0;
+          calculateItemsInView(ctx);
+          if (((_a4 = state.userScrollAnchorReset) == null ? void 0 : _a4.keys.size) === 0) {
+            state.userScrollAnchorReset = void 0;
+          }
+        });
+      }
+    } else {
       calculateItemsInView(ctx);
-      if (((_a3 = state.userScrollAnchorResetKeys) == null ? void 0 : _a3.size) === 0) {
-        state.userScrollAnchorResetKeys = void 0;
+      if (((_b = state.userScrollAnchorReset) == null ? void 0 : _b.keys.size) === 0) {
+        state.userScrollAnchorReset = void 0;
       }
-    });
-    return;
-  }
-  {
+    }
+  } else {
     if (!state.mvcpAnchorLock) {
       if (state.queuedMVCPRecalculate !== void 0) {
         cancelAnimationFrame(state.queuedMVCPRecalculate);
         state.queuedMVCPRecalculate = void 0;
       }
       calculateItemsInView(ctx, { doMVCP: true });
-      return;
-    }
-    if (state.queuedMVCPRecalculate !== void 0) {
-      return;
+    } else if (state.queuedMVCPRecalculate === void 0) {
+      state.queuedMVCPRecalculate = requestAnimationFrame(() => {
+        state.queuedMVCPRecalculate = void 0;
+        calculateItemsInView(ctx, { doMVCP: true });
+      });
     }
-    state.queuedMVCPRecalculate = requestAnimationFrame(() => {
-      state.queuedMVCPRecalculate = void 0;
-      calculateItemsInView(ctx, { doMVCP: true });
-    });
   }
 }
 function updateOtherAxisSizeIfNeeded(ctx, sizeObj, horizontal) {
@@ -5917,8 +5965,8 @@ function updateOtherAxisSizeIfNeeded(ctx, sizeObj, horizontal) {
 function updateItemSize(ctx, itemKey, sizeObj) {
   var _a3;
   const state = ctx.state;
-  const userScrollAnchorResetKeys = state.userScrollAnchorResetKeys;
-  const didMeasureUserScrollAnchorResetItem = !!(userScrollAnchorResetKeys == null ? void 0 : userScrollAnchorResetKeys.delete(itemKey));
+  const userScrollAnchorReset = state.userScrollAnchorReset;
+  const didMeasureUserScrollAnchorResetItem = !!(userScrollAnchorReset == null ? void 0 : userScrollAnchorReset.keys.delete(itemKey));
   const {
     didContainersLayout,
     sizesKnown,
@@ -5974,8 +6022,8 @@ function updateItemSize(ctx, itemKey, sizeObj) {
     if (needsRecalculate) {
       state.scrollForNextCalculateItemsInView = void 0;
       runOrScheduleMVCPRecalculate(ctx);
-    } else if (didMeasureUserScrollAnchorResetItem && (userScrollAnchorResetKeys == null ? void 0 : userScrollAnchorResetKeys.size) === 0) {
-      state.userScrollAnchorResetKeys = void 0;
+    } else if (didMeasureUserScrollAnchorResetItem && (userScrollAnchorReset == null ? void 0 : userScrollAnchorReset.keys.size) === 0) {
+      state.userScrollAnchorReset = void 0;
     }
     if (shouldMaintainScrollAtEnd) {
       if (maintainScrollAtEnd == null ? void 0 : maintainScrollAtEnd.onItemLayout) {
@@ -5985,7 +6033,7 @@ function updateItemSize(ctx, itemKey, sizeObj) {
   }
 }
 function updateOneItemSize(ctx, itemKey, sizeObj) {
-  var _a3;
+  var _a3, _b;
   const state = ctx.state;
   const {
     indexByKey,
@@ -5995,13 +6043,20 @@ function updateOneItemSize(ctx, itemKey, sizeObj) {
   } = state;
   if (!data) return 0;
   const index = indexByKey.get(itemKey);
-  const prevSize = getItemSize(ctx, itemKey, index, data[index]);
+  const itemData = data[index];
+  let itemType;
+  let fixedItemSize;
+  if (getFixedItemSize) {
+    itemType = getItemType ? (_a3 = getItemType(itemData, index)) != null ? _a3 : "" : "";
+    fixedItemSize = getFixedItemSize(itemData, index, itemType);
+  }
+  const prevSize = getItemSize(ctx, itemKey, index, itemData);
   const rawSize = horizontal ? sizeObj.width : sizeObj.height;
-  const size = Math.round(rawSize) ;
   const prevSizeKnown = sizesKnown.get(itemKey);
+  const size = Math.round(rawSize) ;
   sizesKnown.set(itemKey, size);
-  if (!getFixedItemSize && size > 0) {
-    const itemType = getItemType ? (_a3 = getItemType(data[index], index)) != null ? _a3 : "" : "";
+  if (fixedItemSize === void 0 && size > 0) {
+    itemType != null ? itemType : itemType = getItemType ? (_b = getItemType(itemData, index)) != null ? _b : "" : "";
     let averages = averageSizes[itemType];
     if (!averages) {
       averages = averageSizes[itemType] = { avg: 0, num: 0 };
@@ -6069,6 +6124,25 @@ function createColumnWrapperStyle(contentContainerStyle) {
   }
 }
 
+// src/core/scrollToEnd.ts
+function scrollToEnd(ctx, options) {
+  const state = ctx.state;
+  const data = state.props.data;
+  const index = data.length - 1;
+  if (index === -1) {
+    return false;
+  }
+  const paddingBottom = state.props.stylePaddingBottom || 0;
+  const footerSize = peek$(ctx, "footerSize") || 0;
+  scrollToIndex(ctx, {
+    ...options,
+    index,
+    viewOffset: -paddingBottom - footerSize + ((options == null ? void 0 : options.viewOffset) || 0),
+    viewPosition: 1
+  });
+  return true;
+}
+
 // src/utils/createImperativeHandle.ts
 var DEFAULT_AVERAGE_ITEM_SIZE_TYPE = "default";
 function getAverageItemSizes(state) {
@@ -6084,7 +6158,7 @@ function getAverageItemSizes(state) {
   }
   return averageItemSizes;
 }
-function createImperativeHandle(ctx) {
+function createImperativeHandle(ctx, scheduleImperativeScrollCommit) {
   const state = ctx.state;
   const IMPERATIVE_SCROLL_SETTLE_MAX_WAIT_MS = 800;
   const IMPERATIVE_SCROLL_SETTLE_STABLE_FRAMES = 2;
@@ -6101,15 +6175,10 @@ function createImperativeHandle(ctx) {
     if (targetIndex >= dataLength) {
       return false;
     }
-    if (anchorIndex === void 0 || anchorIndex < 0 || anchorIndex >= dataLength || targetIndex < anchorIndex || props.getFixedItemSize) {
+    if (anchorIndex === void 0 || anchorIndex < 0 || anchorIndex >= dataLength || targetIndex < anchorIndex) {
       return true;
     }
-    for (let index = anchorIndex; index < dataLength; index++) {
-      if (!state.sizesKnown.has(getId(state, index))) {
-        return false;
-      }
-    }
-    return true;
+    return areKnownOrFixedItemSizesAvailable(ctx, anchorIndex, dataLength - 1);
   };
   const runWhenReady = (token, run, isReady) => {
     const startedAt = Date.now();
@@ -6132,11 +6201,7 @@ function createImperativeHandle(ctx) {
     };
     requestAnimationFrame(check);
   };
-  const runScrollWithPromise = (run, isReady = () => true) => new Promise((resolve) => {
-    var _a3;
-    const token = ++imperativeScrollToken;
-    (_a3 = state.pendingScrollResolve) == null ? void 0 : _a3.call(state);
-    state.pendingScrollResolve = resolve;
+  const runScrollRequest = (token, resolve, run, isReady = () => true) => {
     const runNow = () => {
       if (token !== imperativeScrollToken) {
         return;
@@ -6154,7 +6219,33 @@ function createImperativeHandle(ctx) {
     } else {
       runNow();
     }
+  };
+  const startImperativeScroll = (resolve) => {
+    var _a3;
+    const token = ++imperativeScrollToken;
+    state.pendingScrollToEnd = void 0;
+    (_a3 = state.pendingScrollResolve) == null ? void 0 : _a3.call(state);
+    state.pendingScrollResolve = resolve;
+    return token;
+  };
+  const runScrollWithPromise = (run, isReady = () => true) => new Promise((resolve) => {
+    const token = startImperativeScroll(resolve);
+    runScrollRequest(token, resolve, run, isReady);
   });
+  state.runPendingScrollToEnd = () => {
+    const pendingScroll = state.pendingScrollToEnd;
+    if (pendingScroll) {
+      state.pendingScrollToEnd = void 0;
+      if (pendingScroll.token === imperativeScrollToken) {
+        runScrollRequest(
+          pendingScroll.token,
+          pendingScroll.resolve,
+          () => scrollToEnd(ctx, pendingScroll.options),
+          () => isScrollToIndexReady(state.props.data.length - 1, true)
+        );
+      }
+    }
+  };
   const scrollIndexIntoView = (options) => {
     if (state) {
       const { index, ...rest } = options;
@@ -6253,26 +6344,20 @@ function createImperativeHandle(ctx) {
       }
       return false;
     }),
-    scrollToEnd: (options) => runScrollWithPromise(
-      () => {
-        const data = state.props.data;
-        const stylePaddingBottom = state.props.stylePaddingBottom;
-        const index = data.length - 1;
-        if (index !== -1) {
-          const paddingBottom = stylePaddingBottom || 0;
-          const footerSize = peek$(ctx, "footerSize") || 0;
-          scrollToIndex(ctx, {
-            ...options,
-            index,
-            viewOffset: -paddingBottom - footerSize + ((options == null ? void 0 : options.viewOffset) || 0),
-            viewPosition: 1
-          });
-          return true;
-        }
-        return false;
-      },
-      () => isScrollToIndexReady(state.props.data.length - 1, true)
-    ),
+    scrollToEnd: (options) => new Promise((resolve) => {
+      var _a3;
+      const token = startImperativeScroll(resolve);
+      state.pendingScrollToEnd = {
+        options,
+        resolve,
+        token
+      };
+      if (scheduleImperativeScrollCommit) {
+        scheduleImperativeScrollCommit();
+      } else {
+        (_a3 = state.runPendingScrollToEnd) == null ? void 0 : _a3.call(state);
+      }
+    }),
     scrollToIndex: (params) => {
       return runScrollWithPromise(
         () => {
@@ -6642,6 +6727,7 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
     viewOffset: 0
   } : void 0;
   const [canRender, setCanRender] = React3__namespace.useState(!IsNewArchitecture);
+  const [, scheduleImperativeScrollCommit] = React3__namespace.useReducer((value) => value + 1, 0);
   const ctx = useStateContext();
   ctx.columnWrapperStyle = columnWrapperStyle || (contentContainerStyle ? createColumnWrapperStyle(contentContainerStyle) : void 0);
   const refScroller = React3.useRef(null);
@@ -7006,7 +7092,11 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
   }, [viewabilityConfig, viewabilityConfigCallbackPairs, onViewableItemsChanged]);
   useInit(() => {
   });
-  React3.useImperativeHandle(forwardedRef, () => createImperativeHandle(ctx), []);
+  React3.useImperativeHandle(forwardedRef, () => createImperativeHandle(ctx, scheduleImperativeScrollCommit), []);
+  React3.useLayoutEffect(() => {
+    var _a4;
+    (_a4 = state.runPendingScrollToEnd) == null ? void 0 : _a4.call(state);
+  });
   React3.useEffect(() => {
     if (usesBootstrapInitialScroll) {
       return;