@legendapp/list 3.0.0-beta.35 → 3.0.0-beta.37

package/index.native.js

@@ -1,7 +1,7 @@
 'use strict';
 
 var React2 = require('react');
-var reactNative = require('react-native');
+var ReactNative = require('react-native');
 var shim = require('use-sync-external-store/shim');
 
 function _interopNamespace(e) {
@@ -23,11 +23,12 @@ function _interopNamespace(e) {
 }
 
 var React2__namespace = /*#__PURE__*/_interopNamespace(React2);
+var ReactNative__namespace = /*#__PURE__*/_interopNamespace(ReactNative);
 
 // src/components/LegendList.tsx
-reactNative.Animated.View;
-var View = reactNative.View;
-var Text = reactNative.Text;
+ReactNative.Animated.View;
+var View = ReactNative.View;
+var Text = ReactNative.Text;
 
 // src/state/getContentInsetEnd.ts
 function getContentInsetEnd(state) {
@@ -59,7 +60,7 @@ function getContentSize(ctx) {
   const totalSize = (_a3 = state.pendingTotalSize) != null ? _a3 : values.get("totalSize");
   return headerSize + footerSize + totalSize + stylePaddingTop + stylePaddingBottom + (contentInsetBottom || 0);
 }
-var createAnimatedValue = (value) => new reactNative.Animated.Value(value);
+var createAnimatedValue = (value) => new ReactNative.Animated.Value(value);
 
 // src/state/state.tsx
 var ContextState = React2__namespace.createContext(null);
@@ -250,7 +251,7 @@ var ENABLE_DEBUG_VIEW = IS_DEV && false;
 var f = global.nativeFabricUIManager;
 var IsNewArchitecture = f !== void 0 && f != null;
 var useAnimatedValue = (initialValue) => {
-  const [animAnimatedValue] = React2.useState(() => new reactNative.Animated.Value(initialValue));
+  const [animAnimatedValue] = React2.useState(() => new ReactNative.Animated.Value(initialValue));
   return animAnimatedValue;
 };
 
@@ -362,7 +363,7 @@ var PositionViewState = typedMemo(function PositionViewState2({
 }) {
   const [position = POSITION_OUT_OF_VIEW] = useArr$([`containerPosition${id}`]);
   return /* @__PURE__ */ React2__namespace.createElement(
-    reactNative.View,
+    ReactNative.View,
     {
       ref: refView,
       style: [
@@ -384,12 +385,12 @@ var PositionViewAnimated = typedMemo(function PositionViewAnimated2({
     getValue: (v) => v != null ? v : POSITION_OUT_OF_VIEW
   });
   let position;
-  if (reactNative.Platform.OS === "ios" || reactNative.Platform.OS === "android") {
+  if (ReactNative.Platform.OS === "ios" || ReactNative.Platform.OS === "android") {
     position = horizontal ? { transform: [{ translateX: position$ }] } : { transform: [{ translateY: position$ }] };
   } else {
     position = horizontal ? { left: position$ } : { top: position$ };
   }
-  return /* @__PURE__ */ React2__namespace.createElement(reactNative.Animated.View, { ref: refView, style: [style, position], ...rest });
+  return /* @__PURE__ */ React2__namespace.createElement(ReactNative.Animated.View, { ref: refView, style: [style, position], ...rest });
 });
 var PositionViewSticky = typedMemo(function PositionViewSticky2({
   id,
@@ -427,7 +428,7 @@ var PositionViewSticky = typedMemo(function PositionViewSticky2({
       return null;
     }
     return /* @__PURE__ */ React2__namespace.createElement(
-      reactNative.View,
+      ReactNative.View,
       {
         style: {
           inset: 0,
@@ -438,7 +439,7 @@ var PositionViewSticky = typedMemo(function PositionViewSticky2({
       getComponent(stickyHeaderConfig == null ? void 0 : stickyHeaderConfig.backdropComponent)
     );
   }, [stickyHeaderConfig == null ? void 0 : stickyHeaderConfig.backdropComponent]);
-  return /* @__PURE__ */ React2__namespace.createElement(reactNative.Animated.View, { ref: refView, style: viewStyle, ...rest }, renderStickyHeaderBackdrop, children);
+  return /* @__PURE__ */ React2__namespace.createElement(ReactNative.Animated.View, { ref: refView, style: viewStyle, ...rest }, renderStickyHeaderBackdrop, children);
 });
 var PositionView = IsNewArchitecture ? PositionViewState : PositionViewAnimated;
 function useInit(cb) {
@@ -631,7 +632,7 @@ function useOnLayoutSync({
   }
   return { onLayout };
 }
-var Platform2 = reactNative.Platform;
+var Platform2 = ReactNative.Platform;
 var PlatformAdjustBreaksScroll = Platform2.OS === "android";
 var typedForwardRef = React2.forwardRef;
 var typedMemo2 = React2.memo;
@@ -835,6 +836,7 @@ var Containers = typedMemo(function Containers2({
   updateItemSize: updateItemSize2,
   getRenderedItem: getRenderedItem2
 }) {
+  var _a3;
   const ctx = useStateContext();
   const columnWrapperStyle = ctx.columnWrapperStyle;
   const [numContainers, numColumns] = useArr$(["numContainersPooled", "numColumns"]);
@@ -842,11 +844,13 @@ var Containers = typedMemo(function Containers2({
     // Use a microtask if increasing the size significantly, otherwise use a timeout
     // If this is the initial scroll, we don't want to delay because we want to update the size immediately
     delay: (value, prevValue) => {
-      var _a3;
-      return !((_a3 = ctx.state) == null ? void 0 : _a3.initialScroll) ? !prevValue || value - prevValue > 20 ? 0 : 200 : void 0;
+      var _a4;
+      return !((_a4 = ctx.state) == null ? void 0 : _a4.initialScroll) ? !prevValue || value - prevValue > 20 ? 0 : 200 : void 0;
     }
   });
-  const animOpacity = waitForInitialLayout && !IsNewArchitecture ? useValue$("readyToRender", { getValue: (value) => value ? 1 : 0 }) : void 0;
+  const readyToRenderOpacity = useValue$("readyToRender", { getValue: (value) => value ? 1 : 0 });
+  const shouldWaitForReadyToRender = !!waitForInitialLayout && (!IsNewArchitecture || !!((_a3 = ctx.state) == null ? void 0 : _a3.initialScroll));
+  const animOpacity = shouldWaitForReadyToRender ? readyToRenderOpacity : void 0;
   const otherAxisSize = useValue$("otherAxisSize", { delay: 0 });
   const containers = [];
   for (let i = 0; i < numContainers; i++) {
@@ -887,15 +891,15 @@ var Containers = typedMemo(function Containers2({
       }
     }
   }
-  return /* @__PURE__ */ React2__namespace.createElement(reactNative.Animated.View, { style }, containers);
+  return /* @__PURE__ */ React2__namespace.createElement(ReactNative.Animated.View, { style }, containers);
 });
-var ListComponentScrollView = reactNative.Animated.ScrollView;
+var ListComponentScrollView = ReactNative.Animated.ScrollView;
 function ScrollAdjust() {
   const bias = 1e7;
   const [scrollAdjust, scrollAdjustUserOffset] = useArr$(["scrollAdjust", "scrollAdjustUserOffset"]);
   const scrollOffset = (scrollAdjust || 0) + (scrollAdjustUserOffset || 0) + bias;
   return /* @__PURE__ */ React2__namespace.createElement(
-    reactNative.View,
+    ReactNative.View,
     {
       style: {
         height: 0,
@@ -914,7 +918,7 @@ function SnapWrapper({ ScrollComponent, ...props }) {
 var LayoutView = ({ onLayoutChange, refView, ...rest }) => {
   const ref = refView != null ? refView : React2.useRef();
   const { onLayout } = useOnLayoutSync({ onLayoutChange, ref });
-  return /* @__PURE__ */ React2__namespace.createElement(reactNative.View, { ...rest, onLayout, ref });
+  return /* @__PURE__ */ React2__namespace.createElement(ReactNative.View, { ...rest, onLayout, ref });
 };
 
 // src/components/ListComponent.tsx
@@ -939,8 +943,8 @@ var ListComponent = typedMemo2(function ListComponent2({
   updateItemSize: updateItemSize2,
   refScrollView,
   renderScrollComponent,
+  onLayoutFooter,
   scrollAdjustHandler,
-  onLayoutHeader,
   snapToIndices,
   stickyHeaderConfig,
   stickyHeaderIndices,
@@ -964,6 +968,21 @@ var ListComponent = typedMemo2(function ListComponent2({
       set$(ctx, "footerSize", 0);
     }
   }, [ListHeaderComponent, ListFooterComponent, ctx]);
+  const onLayoutHeader = React2.useCallback(
+    (rect) => {
+      const size = rect[horizontal ? "width" : "height"];
+      set$(ctx, "headerSize", size);
+    },
+    [ctx, horizontal]
+  );
+  const onLayoutFooterInternal = React2.useCallback(
+    (rect, fromLayoutEffect) => {
+      const size = rect[horizontal ? "width" : "height"];
+      set$(ctx, "footerSize", size);
+      onLayoutFooter == null ? void 0 : onLayoutFooter(rect, fromLayoutEffect);
+    },
+    [ctx, horizontal, onLayoutFooter]
+  );
   return /* @__PURE__ */ React2__namespace.createElement(
     SnapOrScroll,
     {
@@ -999,17 +1018,7 @@ var ListComponent = typedMemo2(function ListComponent2({
         waitForInitialLayout
       }
     ),
-    ListFooterComponent && /* @__PURE__ */ React2__namespace.createElement(
-      LayoutView,
-      {
-        onLayoutChange: (layout) => {
-          const size = layout[horizontal ? "width" : "height"];
-          set$(ctx, "footerSize", size);
-        },
-        style: ListFooterComponentStyle
-      },
-      getComponent(ListFooterComponent)
-    ),
+    ListFooterComponent && /* @__PURE__ */ React2__namespace.createElement(LayoutView, { onLayoutChange: onLayoutFooterInternal, style: ListFooterComponentStyle }, getComponent(ListFooterComponent)),
     IS_DEV && ENABLE_DEVMODE
   );
 });
@@ -1017,19 +1026,12 @@ var ListComponent = typedMemo2(function ListComponent2({
 // src/core/calculateOffsetForIndex.ts
 function calculateOffsetForIndex(ctx, index) {
   const state = ctx.state;
-  let position = 0;
-  if (index !== void 0) {
-    position = state.positions[index] || 0;
-    const paddingTop = peek$(ctx, "stylePaddingTop");
-    if (paddingTop) {
-      position += paddingTop;
-    }
-    const headerSize = peek$(ctx, "headerSize");
-    if (headerSize) {
-      position += headerSize;
-    }
-  }
-  return position;
+  return index !== void 0 ? state.positions[index] || 0 : 0;
+}
+
+// src/core/getTopOffsetAdjustment.ts
+function getTopOffsetAdjustment(ctx) {
+  return (peek$(ctx, "stylePaddingTop") || 0) + (peek$(ctx, "headerSize") || 0);
 }
 
 // src/utils/getId.ts
@@ -1137,10 +1139,20 @@ function calculateOffsetWithOffsetPosition(ctx, offsetParam, params) {
   if (viewOffset) {
     offset -= viewOffset;
   }
+  if (index !== void 0) {
+    const topOffsetAdjustment = getTopOffsetAdjustment(ctx);
+    if (topOffsetAdjustment) {
+      offset += topOffsetAdjustment;
+    }
+  }
   if (viewPosition !== void 0 && index !== void 0) {
     const itemSize = getItemSize(ctx, getId(state, index), index, state.props.data[index]);
     const trailingInset = getContentInsetEnd(state);
     offset -= viewPosition * (state.scrollLength - trailingInset - itemSize);
+    if (index === state.props.data.length - 1) {
+      const footerSize = peek$(ctx, "footerSize") || 0;
+      offset += footerSize;
+    }
   }
   return offset;
 }
@@ -1341,6 +1353,7 @@ function finishScrollTo(ctx) {
     state.initialScroll = void 0;
     state.initialAnchor = void 0;
     state.scrollingTo = void 0;
+    state.stableTarget = void 0;
     if (state.pendingTotalSize !== void 0) {
       addTotalSize(ctx, null, state.pendingTotalSize);
     }
@@ -1357,6 +1370,14 @@ function finishScrollTo(ctx) {
 }
 
 // src/core/checkFinishedScroll.ts
+function getCurrentTargetOffset(ctx, scrollingTo) {
+  if (scrollingTo.index !== void 0) {
+    const baseOffset = calculateOffsetForIndex(ctx, scrollingTo.index);
+    const resolvedOffset = calculateOffsetWithOffsetPosition(ctx, baseOffset, scrollingTo);
+    return clampScrollOffset(ctx, resolvedOffset, scrollingTo);
+  }
+  return clampScrollOffset(ctx, scrollingTo.offset, scrollingTo);
+}
 function checkFinishedScroll(ctx) {
   ctx.state.animFrameCheckFinishedScroll = requestAnimationFrame(() => checkFinishedScrollFrame(ctx));
 }
@@ -1366,20 +1387,30 @@ function checkFinishedScrollFrame(ctx) {
     const { state } = ctx;
     state.animFrameCheckFinishedScroll = void 0;
     const scroll = state.scrollPending;
-    const adjust = state.scrollAdjustHandler.getAdjust();
-    const clampedTargetOffset = clampScrollOffset(
-      ctx,
-      scrollingTo.offset - (scrollingTo.viewOffset || 0),
-      scrollingTo
-    );
+    const clampedTargetOffset = getCurrentTargetOffset(ctx, scrollingTo);
+    if (Math.abs(scrollingTo.offset - clampedTargetOffset) >= 1) {
+      state.scrollingTo = { ...scrollingTo, offset: clampedTargetOffset };
+    }
     const maxOffset = clampScrollOffset(ctx, scroll, scrollingTo);
     const diff1 = Math.abs(scroll - clampedTargetOffset);
-    const diff2 = Math.abs(diff1 - adjust);
     const isNotOverscrolled = Math.abs(scroll - maxOffset) < 1;
-    const isAtTarget = diff1 < 1 || !scrollingTo.animated && diff2 < 1;
+    const isAtTarget = diff1 < 1;
+    const previousStableTarget = state.stableTarget;
+    const hasStableTargetFrame = !!previousStableTarget && Math.abs(previousStableTarget.target - clampedTargetOffset) < 1 && Math.abs(previousStableTarget.scroll - scroll) < 1;
+    if (isAtTarget && !hasStableTargetFrame) {
+      state.stableTarget = { scroll, target: clampedTargetOffset };
+      state.animFrameCheckFinishedScroll = requestAnimationFrame(() => checkFinishedScrollFrame(ctx));
+      return;
+    }
+    if (!isAtTarget) {
+      state.stableTarget = void 0;
+    }
     if (isNotOverscrolled && isAtTarget) {
+      state.stableTarget = void 0;
       finishScrollTo(ctx);
     }
+  } else {
+    ctx.state.stableTarget = void 0;
   }
 }
 function checkFinishedScrollFallback(ctx) {
@@ -1445,8 +1476,9 @@ function scrollTo(ctx, params) {
   let offset = precomputedWithViewOffset ? scrollTargetOffset : calculateOffsetWithOffsetPosition(ctx, scrollTargetOffset, scrollTarget);
   offset = clampScrollOffset(ctx, offset, scrollTarget);
   state.scrollHistory.length = 0;
+  state.stableTarget = void 0;
   if (!noScrollingTo) {
-    state.scrollingTo = scrollTarget;
+    state.scrollingTo = { ...scrollTarget, offset };
   }
   state.scrollPending = offset;
   if (forceScroll || !isInitialScroll || Platform2.OS === "android") {
@@ -1594,7 +1626,8 @@ function ensureInitialAnchor(ctx) {
     return;
   }
   const availableSpace = Math.max(0, scrollLength - size);
-  const desiredOffset = calculateOffsetForIndex(ctx, anchor.index) - ((_a3 = anchor.viewOffset) != null ? _a3 : 0) - ((_b = anchor.viewPosition) != null ? _b : 0) * availableSpace;
+  const topOffsetAdjustment = getTopOffsetAdjustment(ctx);
+  const desiredOffset = calculateOffsetForIndex(ctx, anchor.index) + topOffsetAdjustment - ((_a3 = anchor.viewOffset) != null ? _a3 : 0) - ((_b = anchor.viewPosition) != null ? _b : 0) * availableSpace;
   const clampedDesiredOffset = clampScrollOffset(ctx, desiredOffset, anchor);
   const delta = clampedDesiredOffset - scroll;
   if (Math.abs(delta) <= INITIAL_ANCHOR_TOLERANCE) {
@@ -2311,6 +2344,8 @@ function maybeUpdateViewabilityCallback(ctx, configId, containerId, viewToken) {
   const cb = ctx.mapViewabilityCallbacks.get(key);
   cb == null ? void 0 : cb(viewToken);
 }
+var unstableBatchedUpdates = ReactNative__namespace.unstable_batchedUpdates;
+var batchedUpdates = typeof unstableBatchedUpdates === "function" ? unstableBatchedUpdates : (fn) => fn();
 
 // src/utils/checkAllSizesKnown.ts
 function isNullOrUndefined2(value) {
@@ -2563,7 +2598,7 @@ function handleStickyRecycling(ctx, stickyArray, scroll, drawDistance, currentSt
 }
 function calculateItemsInView(ctx, params = {}) {
   const state = ctx.state;
-  reactNative.unstable_batchedUpdates(() => {
+  batchedUpdates(() => {
     var _a3, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k;
     const {
       columns,
@@ -3457,19 +3492,19 @@ var useCombinedRef = (...refs) => {
   return callback;
 };
 function getWindowSize() {
-  const screenSize = reactNative.Dimensions.get("window");
+  const screenSize = ReactNative.Dimensions.get("window");
   return {
     height: screenSize.height,
     width: screenSize.width
   };
 }
-var StyleSheet = reactNative.StyleSheet;
+var StyleSheet = ReactNative.StyleSheet;
 function useStickyScrollHandler(stickyHeaderIndices, horizontal, ctx, onScroll2) {
   const shouldUseRnAnimatedEngine = !ctx.state.props.stickyPositionComponentInternal;
   return React2.useMemo(() => {
     if ((stickyHeaderIndices == null ? void 0 : stickyHeaderIndices.length) && shouldUseRnAnimatedEngine) {
       const { animatedScrollY } = ctx;
-      return reactNative.Animated.event(
+      return ReactNative.Animated.event(
         [
           {
             nativeEvent: {
@@ -3914,7 +3949,6 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
   const maintainVisibleContentPositionConfig = normalizeMaintainVisibleContentPosition(
     maintainVisibleContentPositionProp
   );
-  const [renderNum, setRenderNum] = React2.useState(0);
   const initialScrollProp = initialScrollAtEnd ? { index: Math.max(0, dataProp.length - 1), viewOffset: -stylePaddingBottomState, viewPosition: 1 } : initialScrollIndexProp || initialScrollOffsetProp ? typeof initialScrollIndexProp === "object" ? {
     index: initialScrollIndexProp.index || 0,
     viewOffset: initialScrollIndexProp.viewOffset || (initialScrollIndexProp.viewPosition === 1 ? -stylePaddingBottomState : 0),
@@ -4119,6 +4153,11 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
       true
     );
   }
+  const resolveInitialScrollOffset = React2.useCallback((initialScroll) => {
+    const baseOffset = initialScroll.index !== void 0 ? calculateOffsetForIndex(ctx, initialScroll.index) : 0;
+    const resolvedOffset = calculateOffsetWithOffsetPosition(ctx, baseOffset, initialScroll);
+    return clampScrollOffset(ctx, resolvedOffset, initialScroll);
+  }, []);
   const initialContentOffset = React2.useMemo(() => {
     var _a4;
     let value;
@@ -4136,9 +4175,7 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
       if (initialScroll.contentOffset !== void 0) {
         value = initialScroll.contentOffset;
       } else {
-        const baseOffset = initialScroll.index !== void 0 ? calculateOffsetForIndex(ctx, initialScroll.index) : 0;
-        const resolvedOffset = calculateOffsetWithOffsetPosition(ctx, baseOffset, initialScroll);
-        const clampedOffset = clampScrollOffset(ctx, resolvedOffset, initialScroll);
+        const clampedOffset = resolveInitialScrollOffset(initialScroll);
         const updatedInitialScroll = { ...initialScroll, contentOffset: clampedOffset };
         refState.current.initialScroll = updatedInitialScroll;
         state.initialScroll = updatedInitialScroll;
@@ -4152,7 +4189,7 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
       setInitialRenderState(ctx, { didInitialScroll: true });
     }
     return value;
-  }, [renderNum]);
+  }, []);
   if (isFirstLocal || didDataChangeLocal || numColumnsProp !== peek$(ctx, "numColumns")) {
     refState.current.lastBatchingAction = Date.now();
     if (!keyExtractorProp && !isFirstLocal && didDataChangeLocal) {
@@ -4166,32 +4203,45 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
       set$(ctx, "totalSize", 0);
     }
   }
-  const onLayoutHeader = React2.useCallback((rect, fromLayoutEffect) => {
-    const { initialScroll } = refState.current;
-    const size = rect[horizontal ? "width" : "height"];
-    set$(ctx, "headerSize", size);
-    if ((initialScroll == null ? void 0 : initialScroll.index) !== void 0) {
-      if (IsNewArchitecture && Platform2.OS !== "android") {
-        if (fromLayoutEffect) {
-          setRenderNum((v) => v + 1);
-        }
-      } else {
-        setTimeout(doInitialScroll, 17);
-      }
-    }
-  }, []);
   const doInitialScroll = React2.useCallback(() => {
     const { initialScroll, didFinishInitialScroll, queuedInitialLayout, scrollingTo } = state;
     if (initialScroll && !queuedInitialLayout && !didFinishInitialScroll && !scrollingTo) {
+      const offset = resolveInitialScrollOffset(initialScroll);
+      const updatedInitialScroll = { ...initialScroll, contentOffset: offset };
+      refState.current.initialScroll = updatedInitialScroll;
+      state.initialScroll = updatedInitialScroll;
       scrollTo(ctx, {
         animated: false,
-        index: initialScroll == null ? void 0 : initialScroll.index,
+        index: initialScroll.index,
         isInitialScroll: true,
-        offset: initialContentOffset,
+        offset,
         precomputedWithViewOffset: true
       });
     }
-  }, [initialContentOffset]);
+  }, []);
+  const onLayoutFooter = React2.useCallback(
+    (layout) => {
+      if (!initialScrollAtEnd) {
+        return;
+      }
+      const { initialScroll } = state;
+      if (!initialScroll) {
+        return;
+      }
+      const lastIndex = Math.max(0, dataProp.length - 1);
+      if (initialScroll.index !== lastIndex || initialScroll.viewPosition !== 1) {
+        return;
+      }
+      const footerSize = layout[horizontal ? "width" : "height"];
+      const viewOffset = -stylePaddingBottomState - footerSize;
+      if (initialScroll.viewOffset !== viewOffset) {
+        const updatedInitialScroll = { ...initialScroll, viewOffset };
+        refState.current.initialScroll = updatedInitialScroll;
+        state.initialScroll = updatedInitialScroll;
+      }
+    },
+    [dataProp.length, horizontal, initialScrollAtEnd, stylePaddingBottomState]
+  );
   const onLayoutChange = React2.useCallback((layout) => {
     doInitialScroll();
     handleLayout(ctx, layout, setCanRender);
@@ -4305,14 +4355,14 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
       ListEmptyComponent: dataProp.length === 0 ? ListEmptyComponent : void 0,
       ListHeaderComponent,
       onLayout,
-      onLayoutHeader,
+      onLayoutFooter,
       onMomentumScrollEnd: fns.onMomentumScrollEnd,
       onScroll: onScrollHandler,
       recycleItems,
       refreshControl: refreshControl ? stylePaddingTopState > 0 ? React2__namespace.cloneElement(refreshControl, {
         progressViewOffset: (refreshControl.props.progressViewOffset || 0) + stylePaddingTopState
       }) : refreshControl : onRefresh && /* @__PURE__ */ React2__namespace.createElement(
-        reactNative.RefreshControl,
+        ReactNative.RefreshControl,
         {
           onRefresh,
           progressViewOffset: (progressViewOffset || 0) + stylePaddingTopState,