@legendapp/list 3.0.3 → 3.0.4

package/CHANGELOG.md

@@ -1,3 +1,9 @@
+## 3.0.4
+
+- Fix: scrollToEnd now waits for newly committed data before targeting the final item, improving chat-style append-and-scroll flows.
+- Fix: Anchored end space waits for measured or fixed tail sizes before reporting readiness, avoiding stale end-space values during append flows.
+- Feat: Add anchoredEndSpace.onReady to notify when the anchored tail has authoritative sizing.
+
 ## 3.0.3
 
 - Fix: MVCP was getting batched to improve big jumps, but was making scroll worse

package/animated.d.ts

@@ -388,12 +388,22 @@ interface MaintainVisibleContentPositionConfig<ItemT = any> {
     size?: boolean;
     shouldRestorePosition?: (item: ItemT, index: number, data: readonly ItemT[]) => boolean;
 }
+interface AnchoredEndSpaceReadyInfo {
+    anchorIndex: number | undefined;
+    anchorKey: string | undefined;
+    size: number;
+}
+interface ScrollToEndOptions {
+    animated?: boolean;
+    viewOffset?: number;
+}
 interface AnchoredEndSpaceConfig {
     anchorIndex: number;
     anchorOffset?: number;
     anchorMaxSize?: number;
     includeInEndInset?: boolean;
     onSizeChanged?: (size: number) => void;
+    onReady?: (info: AnchoredEndSpaceReadyInfo) => void;
 }
 interface StickyHeaderConfig {
     /**
@@ -525,10 +535,7 @@ type LegendListRef$1 = {
      * @param options.animated - If true, animates the scroll. Default: true.
      * @param options.viewOffset - Offset from the target position.
      */
-    scrollToEnd(options?: {
-        animated?: boolean | undefined;
-        viewOffset?: number | undefined;
-    }): Promise<void>;
+    scrollToEnd(options?: ScrollToEndOptions): Promise<void>;
     /**
      * Scrolls to a specific index in the list.
      * @param params - Parameters for scrolling.

package/keyboard-legacy.d.ts

@@ -63,6 +63,10 @@ interface Insets {
     bottom: number;
     right: number;
 }
+interface ScrollToEndOptions {
+    animated?: boolean;
+    viewOffset?: number;
+}
 interface LegendListAverageItemSize {
     average: number;
     count: number;
@@ -141,10 +145,7 @@ type LegendListRef$1 = {
      * @param options.animated - If true, animates the scroll. Default: true.
      * @param options.viewOffset - Offset from the target position.
      */
-    scrollToEnd(options?: {
-        animated?: boolean | undefined;
-        viewOffset?: number | undefined;
-    }): Promise<void>;
+    scrollToEnd(options?: ScrollToEndOptions): Promise<void>;
     /**
      * Scrolls to a specific index in the list.
      * @param params - Parameters for scrolling.

package/keyboard.d.ts

@@ -64,12 +64,22 @@ interface Insets {
     bottom: number;
     right: number;
 }
+interface AnchoredEndSpaceReadyInfo {
+    anchorIndex: number | undefined;
+    anchorKey: string | undefined;
+    size: number;
+}
+interface ScrollToEndOptions {
+    animated?: boolean;
+    viewOffset?: number;
+}
 interface AnchoredEndSpaceConfig$1 {
     anchorIndex: number;
     anchorOffset?: number;
     anchorMaxSize?: number;
     includeInEndInset?: boolean;
     onSizeChanged?: (size: number) => void;
+    onReady?: (info: AnchoredEndSpaceReadyInfo) => void;
 }
 interface LegendListAverageItemSize {
     average: number;
@@ -149,10 +159,7 @@ type LegendListRef$1 = {
      * @param options.animated - If true, animates the scroll. Default: true.
      * @param options.viewOffset - Offset from the target position.
      */
-    scrollToEnd(options?: {
-        animated?: boolean | undefined;
-        viewOffset?: number | undefined;
-    }): Promise<void>;
+    scrollToEnd(options?: ScrollToEndOptions): Promise<void>;
     /**
      * Scrolls to a specific index in the list.
      * @param params - Parameters for scrolling.

package/package.json

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

package/react-native.d.ts

@@ -394,12 +394,22 @@ interface MaintainVisibleContentPositionConfig<ItemT = any> {
     size?: boolean;
     shouldRestorePosition?: (item: ItemT, index: number, data: readonly ItemT[]) => boolean;
 }
+interface AnchoredEndSpaceReadyInfo {
+    anchorIndex: number | undefined;
+    anchorKey: string | undefined;
+    size: number;
+}
+interface ScrollToEndOptions {
+    animated?: boolean;
+    viewOffset?: number;
+}
 interface AnchoredEndSpaceConfig {
     anchorIndex: number;
     anchorOffset?: number;
     anchorMaxSize?: number;
     includeInEndInset?: boolean;
     onSizeChanged?: (size: number) => void;
+    onReady?: (info: AnchoredEndSpaceReadyInfo) => void;
 }
 interface StickyHeaderConfig {
     /**
@@ -531,10 +541,7 @@ type LegendListRef$1 = {
      * @param options.animated - If true, animates the scroll. Default: true.
      * @param options.viewOffset - Offset from the target position.
      */
-    scrollToEnd(options?: {
-        animated?: boolean | undefined;
-        viewOffset?: number | undefined;
-    }): Promise<void>;
+    scrollToEnd(options?: ScrollToEndOptions): Promise<void>;
     /**
      * Scrolls to a specific index in the list.
      * @param params - Parameters for scrolling.

package/react-native.js

@@ -1831,17 +1831,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;
   }
@@ -1852,14 +1877,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);
@@ -1868,7 +1892,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);
@@ -5189,22 +5213,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;
@@ -5214,15 +5243,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;
 }
@@ -5473,6 +5512,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) {
@@ -5488,7 +5546,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;
@@ -5505,15 +5563,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();
@@ -5536,11 +5589,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;
@@ -5558,7 +5607,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;
@@ -5657,26 +5732,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(
         () => {
@@ -6046,6 +6115,7 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
     viewOffset: 0
   } : void 0;
   const [canRender, setCanRender] = React2__namespace.useState(!IsNewArchitecture);
+  const [, scheduleImperativeScrollCommit] = React2__namespace.useReducer((value) => value + 1, 0);
   const ctx = useStateContext();
   ctx.columnWrapperStyle = columnWrapperStyle || (contentContainerStyle ? createColumnWrapperStyle(contentContainerStyle) : void 0);
   const refScroller = React2.useRef(null);
@@ -6418,7 +6488,11 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
       doInitialAllocateContainers(ctx);
     }
   });
-  React2.useImperativeHandle(forwardedRef, () => createImperativeHandle(ctx), []);
+  React2.useImperativeHandle(forwardedRef, () => createImperativeHandle(ctx, scheduleImperativeScrollCommit), []);
+  React2.useLayoutEffect(() => {
+    var _a4;
+    (_a4 = state.runPendingScrollToEnd) == null ? void 0 : _a4.call(state);
+  });
   React2.useEffect(() => {
     if (Platform.OS !== "web" || usesBootstrapInitialScroll) {
       return;