@legendapp/list 2.1.0-beta.10 → 2.1.0-beta.12

package/index.d.mts

@@ -395,12 +395,14 @@ interface InternalState {
     refScroller: React.RefObject<ScrollView>;
     loadStartTime: number;
     initialScroll: ScrollIndexWithOffsetAndContentOffset | undefined;
+    initialAnchor?: InitialScrollAnchor;
     lastLayout: LayoutRectangle | undefined;
     timeoutSetPaddingTop?: any;
     activeStickyIndex: number | undefined;
     stickyContainers: Map<number, number>;
     stickyContainerPool: Set<number>;
     scrollProcessingEnabled: boolean;
+    pendingTotalSize?: number;
     props: {
         alignItemsAtEnd: boolean;
         data: readonly any[];
@@ -638,14 +640,20 @@ type TypedMemo = <T extends React.ComponentType<any>>(Component: T, propsAreEqua
 declare const typedMemo: TypedMemo;
 interface ScrollIndexWithOffset {
     index: number;
-    viewOffset: number;
+    viewOffset?: number;
+    viewPosition?: number;
 }
 interface ScrollIndexWithOffsetPosition extends ScrollIndexWithOffset {
-    viewPosition: number;
+    viewPosition?: number;
 }
-interface ScrollIndexWithOffsetAndContentOffset extends ScrollIndexWithOffset {
+interface ScrollIndexWithOffsetAndContentOffset extends ScrollIndexWithOffsetPosition {
     contentOffset?: number;
 }
+interface InitialScrollAnchor extends ScrollIndexWithOffsetPosition {
+    attempts?: number;
+    lastDelta?: number;
+    settledTicks?: number;
+}
 type GetRenderedItemResult<ItemT> = {
     index: number;
     item: ItemT;
@@ -668,4 +676,4 @@ declare function useListScrollSize(): {
 };
 declare function useSyncLayout(): () => void;
 
-export { type ColumnWrapperStyle, type GetRenderedItem, type GetRenderedItemResult, type InternalState, LegendList, type LegendListProps, type LegendListPropsBase, type LegendListRecyclingState, type LegendListRef, type LegendListRenderItemProps, type MaintainScrollAtEndOptions, type OnViewableItemsChanged, type ScrollIndexWithOffset, type ScrollIndexWithOffsetAndContentOffset, type ScrollIndexWithOffsetPosition, type ScrollState, type ScrollTarget, type ThresholdSnapshot, type TypedForwardRef, type TypedMemo, type ViewAmountToken, type ViewToken, type ViewabilityAmountCallback, type ViewabilityCallback, type ViewabilityConfig, type ViewabilityConfigCallbackPair, type ViewabilityConfigCallbackPairs, type ViewableRange, typedForwardRef, typedMemo, useIsLastItem, useListScrollSize, useRecyclingEffect, useRecyclingState, useSyncLayout, useViewability, useViewabilityAmount };
+export { type ColumnWrapperStyle, type GetRenderedItem, type GetRenderedItemResult, type InitialScrollAnchor, type InternalState, LegendList, type LegendListProps, type LegendListPropsBase, type LegendListRecyclingState, type LegendListRef, type LegendListRenderItemProps, type MaintainScrollAtEndOptions, type OnViewableItemsChanged, type ScrollIndexWithOffset, type ScrollIndexWithOffsetAndContentOffset, type ScrollIndexWithOffsetPosition, type ScrollState, type ScrollTarget, type ThresholdSnapshot, type TypedForwardRef, type TypedMemo, type ViewAmountToken, type ViewToken, type ViewabilityAmountCallback, type ViewabilityCallback, type ViewabilityConfig, type ViewabilityConfigCallbackPair, type ViewabilityConfigCallbackPairs, type ViewableRange, typedForwardRef, typedMemo, useIsLastItem, useListScrollSize, useRecyclingEffect, useRecyclingState, useSyncLayout, useViewability, useViewabilityAmount };

package/index.d.ts

@@ -395,12 +395,14 @@ interface InternalState {
     refScroller: React.RefObject<ScrollView>;
     loadStartTime: number;
     initialScroll: ScrollIndexWithOffsetAndContentOffset | undefined;
+    initialAnchor?: InitialScrollAnchor;
     lastLayout: LayoutRectangle | undefined;
     timeoutSetPaddingTop?: any;
     activeStickyIndex: number | undefined;
     stickyContainers: Map<number, number>;
     stickyContainerPool: Set<number>;
     scrollProcessingEnabled: boolean;
+    pendingTotalSize?: number;
     props: {
         alignItemsAtEnd: boolean;
         data: readonly any[];
@@ -638,14 +640,20 @@ type TypedMemo = <T extends React.ComponentType<any>>(Component: T, propsAreEqua
 declare const typedMemo: TypedMemo;
 interface ScrollIndexWithOffset {
     index: number;
-    viewOffset: number;
+    viewOffset?: number;
+    viewPosition?: number;
 }
 interface ScrollIndexWithOffsetPosition extends ScrollIndexWithOffset {
-    viewPosition: number;
+    viewPosition?: number;
 }
-interface ScrollIndexWithOffsetAndContentOffset extends ScrollIndexWithOffset {
+interface ScrollIndexWithOffsetAndContentOffset extends ScrollIndexWithOffsetPosition {
     contentOffset?: number;
 }
+interface InitialScrollAnchor extends ScrollIndexWithOffsetPosition {
+    attempts?: number;
+    lastDelta?: number;
+    settledTicks?: number;
+}
 type GetRenderedItemResult<ItemT> = {
     index: number;
     item: ItemT;
@@ -668,4 +676,4 @@ declare function useListScrollSize(): {
 };
 declare function useSyncLayout(): () => void;
 
-export { type ColumnWrapperStyle, type GetRenderedItem, type GetRenderedItemResult, type InternalState, LegendList, type LegendListProps, type LegendListPropsBase, type LegendListRecyclingState, type LegendListRef, type LegendListRenderItemProps, type MaintainScrollAtEndOptions, type OnViewableItemsChanged, type ScrollIndexWithOffset, type ScrollIndexWithOffsetAndContentOffset, type ScrollIndexWithOffsetPosition, type ScrollState, type ScrollTarget, type ThresholdSnapshot, type TypedForwardRef, type TypedMemo, type ViewAmountToken, type ViewToken, type ViewabilityAmountCallback, type ViewabilityCallback, type ViewabilityConfig, type ViewabilityConfigCallbackPair, type ViewabilityConfigCallbackPairs, type ViewableRange, typedForwardRef, typedMemo, useIsLastItem, useListScrollSize, useRecyclingEffect, useRecyclingState, useSyncLayout, useViewability, useViewabilityAmount };
+export { type ColumnWrapperStyle, type GetRenderedItem, type GetRenderedItemResult, type InitialScrollAnchor, type InternalState, LegendList, type LegendListProps, type LegendListPropsBase, type LegendListRecyclingState, type LegendListRef, type LegendListRenderItemProps, type MaintainScrollAtEndOptions, type OnViewableItemsChanged, type ScrollIndexWithOffset, type ScrollIndexWithOffsetAndContentOffset, type ScrollIndexWithOffsetPosition, type ScrollState, type ScrollTarget, type ThresholdSnapshot, type TypedForwardRef, type TypedMemo, type ViewAmountToken, type ViewToken, type ViewabilityAmountCallback, type ViewabilityCallback, type ViewabilityConfig, type ViewabilityConfigCallbackPair, type ViewabilityConfigCallbackPairs, type ViewableRange, typedForwardRef, typedMemo, useIsLastItem, useListScrollSize, useRecyclingEffect, useRecyclingState, useSyncLayout, useViewability, useViewabilityAmount };

package/index.js

@@ -126,11 +126,12 @@ function set$(ctx, signalName, value) {
   }
 }
 function getContentSize(ctx) {
+  var _a3, _b;
   const { values } = ctx;
   const stylePaddingTop = values.get("stylePaddingTop") || 0;
   const headerSize = values.get("headerSize") || 0;
   const footerSize = values.get("footerSize") || 0;
-  const totalSize = values.get("totalSize");
+  const totalSize = (_b = (_a3 = ctx.internalState) == null ? void 0 : _a3.pendingTotalSize) != null ? _b : values.get("totalSize");
   return headerSize + footerSize + totalSize + stylePaddingTop;
 }
 function useArr$(signalNames) {
@@ -1241,44 +1242,28 @@ function updateAlignItemsPaddingTop(ctx, state) {
   }
 }
 
-// src/core/updateTotalSize.ts
-function updateTotalSize(ctx, state) {
-  const {
-    positions,
-    props: { data }
-  } = state;
-  if (data.length === 0) {
-    addTotalSize(ctx, state, null, 0);
-  } else {
-    const lastId = getId(state, data.length - 1);
-    if (lastId !== void 0) {
-      const lastPosition = positions.get(lastId);
-      if (lastPosition !== void 0) {
-        const lastSize = getItemSize(ctx, state, lastId, data.length - 1, data[data.length - 1]);
-        if (lastSize !== void 0) {
-          const totalSize = lastPosition + lastSize;
-          addTotalSize(ctx, state, null, totalSize);
-        }
-      }
-    }
-  }
-}
+// src/core/addTotalSize.ts
 function addTotalSize(ctx, state, key, add) {
   const { alignItemsAtEnd } = state.props;
   const prevTotalSize = state.totalSize;
+  let totalSize = state.totalSize;
   if (key === null) {
-    state.totalSize = add;
+    totalSize = add;
     if (state.timeoutSetPaddingTop) {
       clearTimeout(state.timeoutSetPaddingTop);
       state.timeoutSetPaddingTop = void 0;
     }
   } else {
-    state.totalSize += add;
+    totalSize += add;
   }
-  if (prevTotalSize !== state.totalSize) {
-    set$(ctx, "totalSize", state.totalSize);
-    if (alignItemsAtEnd) {
-      updateAlignItemsPaddingTop(ctx, state);
+  if (prevTotalSize !== totalSize) {
+    {
+      state.pendingTotalSize = void 0;
+      state.totalSize = totalSize;
+      set$(ctx, "totalSize", totalSize);
+      if (alignItemsAtEnd) {
+        updateAlignItemsPaddingTop(ctx, state);
+      }
     }
   }
 }
@@ -1483,6 +1468,7 @@ function onScroll(ctx, state, event) {
   onScrollProp == null ? void 0 : onScrollProp(event);
 }
 function updateScroll(ctx, state, newScroll, forceUpdate) {
+  var _a3;
   const scrollingTo = peek$(ctx, "scrollingTo");
   state.hasScrolled = true;
   state.lastBatchingAction = Date.now();
@@ -1516,7 +1502,7 @@ function updateScroll(ctx, state, newScroll, forceUpdate) {
   }
   if (state.dataChangeNeedsScrollUpdate || Math.abs(state.scroll - state.scrollPrev) > 2) {
     state.ignoreScrollFromMVCPIgnored = false;
-    calculateItemsInView(ctx, state, { doMVCP: scrollingTo !== void 0 });
+    (_a3 = state.triggerCalculateItemsInView) == null ? void 0 : _a3.call(state, { doMVCP: scrollingTo !== void 0 });
     checkAtBottom(ctx, state);
     checkAtTop(state);
     state.dataChangeNeedsScrollUpdate = false;
@@ -1529,7 +1515,11 @@ function finishScrollTo(ctx, state) {
   if (state) {
     state.scrollHistory.length = 0;
     state.initialScroll = void 0;
+    state.initialAnchor = void 0;
     set$(ctx, "scrollingTo", void 0);
+    if (state.pendingTotalSize !== void 0) {
+      addTotalSize(ctx, state, null, state.pendingTotalSize);
+    }
     if ((_a3 = state.props) == null ? void 0 : _a3.data) {
       (_b = state.triggerCalculateItemsInView) == null ? void 0 : _b.call(state, { forceFullItemPositions: true });
     }
@@ -1564,7 +1554,14 @@ function scrollTo(ctx, state, params) {
   }
   if (!animated) {
     state.scroll = offset;
-    setTimeout(() => finishScrollTo(ctx, state), 100);
+    {
+      const unlisten = listen$(ctx, "containersDidLayout", (value) => {
+        if (value) {
+          finishScrollTo(ctx, state);
+          unlisten();
+        }
+      });
+    }
     if (isInitialScroll) {
       setTimeout(() => {
         state.initialScroll = void 0;
@@ -1592,6 +1589,58 @@ function requestAdjust(ctx, state, positionDiff, dataChanged) {
   }
 }
 
+// src/core/ensureInitialAnchor.ts
+var INITIAL_ANCHOR_TOLERANCE = 0.5;
+var INITIAL_ANCHOR_MAX_ATTEMPTS = 4;
+var INITIAL_ANCHOR_SETTLED_TICKS = 2;
+function ensureInitialAnchor(ctx, state) {
+  var _a3, _b, _c, _d, _e;
+  const anchor = state.initialAnchor;
+  const item = state.props.data[anchor.index];
+  const containersDidLayout = peek$(ctx, "containersDidLayout");
+  if (!containersDidLayout) {
+    return;
+  }
+  const id = getId(state, anchor.index);
+  if (state.positions.get(id) === void 0) {
+    return;
+  }
+  const size = getItemSize(ctx, state, id, anchor.index, item, true, true);
+  if (size === void 0) {
+    return;
+  }
+  const availableSpace = Math.max(0, state.scrollLength - size);
+  const desiredOffset = calculateOffsetForIndex(ctx, state, anchor.index) - ((_a3 = anchor.viewOffset) != null ? _a3 : 0) - ((_b = anchor.viewPosition) != null ? _b : 0) * availableSpace;
+  const contentSize = getContentSize(ctx);
+  const maxOffset = Math.max(0, contentSize - state.scrollLength);
+  const clampedDesiredOffset = Math.max(0, Math.min(desiredOffset, maxOffset));
+  const delta = clampedDesiredOffset - state.scroll;
+  if (Math.abs(delta) <= INITIAL_ANCHOR_TOLERANCE) {
+    const settledTicks = ((_c = anchor.settledTicks) != null ? _c : 0) + 1;
+    if (settledTicks >= INITIAL_ANCHOR_SETTLED_TICKS) {
+      state.initialAnchor = void 0;
+    } else {
+      anchor.settledTicks = settledTicks;
+    }
+    return;
+  }
+  if (((_d = anchor.attempts) != null ? _d : 0) >= INITIAL_ANCHOR_MAX_ATTEMPTS) {
+    state.initialAnchor = void 0;
+    return;
+  }
+  const lastDelta = anchor.lastDelta;
+  if (lastDelta !== void 0 && Math.abs(delta) >= Math.abs(lastDelta)) {
+    state.initialAnchor = void 0;
+    return;
+  }
+  Object.assign(anchor, {
+    attempts: ((_e = anchor.attempts) != null ? _e : 0) + 1,
+    lastDelta: delta,
+    settledTicks: 0
+  });
+  requestAdjust(ctx, state, delta);
+}
+
 // src/core/mvcp.ts
 function prepareMVCP(ctx, state, dataChanged) {
   const {
@@ -1640,7 +1689,7 @@ function prepareMVCP(ctx, state, dataChanged) {
     if (targetId !== void 0 && prevPosition !== void 0) {
       const newPosition = positions.get(targetId);
       if (newPosition !== void 0) {
-        const totalSize = peek$(ctx, "totalSize");
+        const totalSize = getContentSize(ctx);
         let diff = newPosition - prevPosition;
         if (diff !== 0 && state.scroll + state.scrollLength > totalSize) {
           if (diff > 0) {
@@ -1720,6 +1769,29 @@ function calculateRowMaxSize(ctx, state, startIndex, endIndex, useAverageSize) {
   return maxSize;
 }
 
+// src/core/updateTotalSize.ts
+function updateTotalSize(ctx, state) {
+  const {
+    positions,
+    props: { data }
+  } = state;
+  if (data.length === 0) {
+    addTotalSize(ctx, state, null, 0);
+  } else {
+    const lastId = getId(state, data.length - 1);
+    if (lastId !== void 0) {
+      const lastPosition = positions.get(lastId);
+      if (lastPosition !== void 0) {
+        const lastSize = getItemSize(ctx, state, lastId, data.length - 1, data[data.length - 1]);
+        if (lastSize !== void 0) {
+          const totalSize = lastPosition + lastSize;
+          addTotalSize(ctx, state, null, totalSize);
+        }
+      }
+    }
+  }
+}
+
 // src/utils/getScrollVelocity.ts
 var getScrollVelocity = (state) => {
   const { scrollHistory } = state;
@@ -2329,9 +2401,12 @@ function calculateItemsInView(ctx, state, params = {}) {
     const stickyIndicesSet = state.props.stickyIndicesSet || /* @__PURE__ */ new Set();
     const prevNumContainers = peek$(ctx, "numContainers");
     if (!data || scrollLength === 0 || !prevNumContainers) {
+      if (state.initialAnchor) {
+        ensureInitialAnchor(ctx, state);
+      }
       return;
     }
-    const totalSize = peek$(ctx, "totalSize");
+    const totalSize = getContentSize(ctx);
     const topPad = peek$(ctx, "stylePaddingTop") + peek$(ctx, "headerSize");
     const numColumns = peek$(ctx, "numColumns");
     const { dataChanged, doMVCP, forceFullItemPositions } = params;
@@ -2378,6 +2453,9 @@ function calculateItemsInView(ctx, state, params = {}) {
     if (!dataChanged && scrollForNextCalculateItemsInView) {
       const { top, bottom } = scrollForNextCalculateItemsInView;
       if (scrollTopBuffered > top && scrollBottomBuffered < bottom) {
+        if (state.initialAnchor) {
+          ensureInitialAnchor(ctx, state);
+        }
         return;
       }
     }
@@ -2630,6 +2708,9 @@ function calculateItemsInView(ctx, state, params = {}) {
       }
     }
   });
+  if (state.initialAnchor) {
+    ensureInitialAnchor(ctx, state);
+  }
 }
 
 // src/core/checkActualChange.ts
@@ -3246,7 +3327,7 @@ var LegendList = typedMemo(
   })
 );
 var LegendListInner = typedForwardRef(function LegendListInner2(props, forwardedRef) {
-  var _a3;
+  var _a3, _b;
   const {
     alignItemsAtEnd = false,
     columnWrapperStyle,
@@ -3337,6 +3418,13 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
         idCache: [],
         idsInView: [],
         indexByKey: /* @__PURE__ */ new Map(),
+        initialAnchor: (initialScrollProp == null ? void 0 : initialScrollProp.index) !== void 0 && (initialScrollProp == null ? void 0 : initialScrollProp.viewPosition) !== void 0 ? {
+          attempts: 0,
+          index: initialScrollProp.index,
+          settledTicks: 0,
+          viewOffset: (_a3 = initialScrollProp.viewOffset) != null ? _a3 : 0,
+          viewPosition: initialScrollProp.viewPosition
+        } : void 0,
         initialScroll: initialScrollProp,
         isAtEnd: false,
         isAtStart: false,
@@ -3458,10 +3546,21 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
     );
   }
   const initialContentOffset = React3.useMemo(() => {
+    var _a4, _b2;
     const { initialScroll } = refState.current;
     if (!initialScroll) {
+      refState.current.initialAnchor = void 0;
       return 0;
     }
+    if (initialScroll.index !== void 0 && (!refState.current.initialAnchor || ((_a4 = refState.current.initialAnchor) == null ? void 0 : _a4.index) !== initialScroll.index)) {
+      refState.current.initialAnchor = {
+        attempts: 0,
+        index: initialScroll.index,
+        settledTicks: 0,
+        viewOffset: (_b2 = initialScroll.viewOffset) != null ? _b2 : 0,
+        viewPosition: initialScroll.viewPosition
+      };
+    }
     if (initialScroll.contentOffset !== void 0) {
       return initialScroll.contentOffset;
     }
@@ -3511,6 +3610,7 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
       scrollTo(ctx, state, {
         animated: false,
         index: (_a4 = state.initialScroll) == null ? void 0 : _a4.index,
+        isInitialScroll: true,
         offset: initialContentOffset,
         precomputedWithViewOffset: true
       });
@@ -3616,7 +3716,7 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
         }
       ),
       refScrollView: combinedRef,
-      scrollAdjustHandler: (_a3 = refState.current) == null ? void 0 : _a3.scrollAdjustHandler,
+      scrollAdjustHandler: (_b = refState.current) == null ? void 0 : _b.scrollAdjustHandler,
       scrollEventThrottle: 16 ,
       snapToIndices,
       stickyIndices,