@legendapp/list 3.0.0-beta.55 → 3.0.0-beta.56

package/react.mjs

@@ -1,5 +1,5 @@
 import * as React3 from 'react';
-import React3__default, { forwardRef, useReducer, useEffect, createContext, useRef, useState, useMemo, useCallback, useImperativeHandle, useLayoutEffect, useContext } from 'react';
+import { forwardRef, useReducer, useEffect, createContext, useRef, useState, useMemo, useCallback, useImperativeHandle, useLayoutEffect, useContext } from 'react';
 import { useSyncExternalStore } from 'use-sync-external-store/shim';
 import * as ReactDOM from 'react-dom';
 import { flushSync } from 'react-dom';
@@ -1215,10 +1215,16 @@ var StyleSheet = {
   create: (styles) => styles,
   flatten: (style) => flattenStyles(style)
 };
+function useLatestRef(value) {
+  const ref = React3.useRef(value);
+  ref.current = value;
+  return ref;
+}
+
+// src/utils/useRafCoalescer.ts
 function useRafCoalescer(callback) {
-  const callbackRef = useRef(callback);
+  const callbackRef = useLatestRef(callback);
   const rafIdRef = useRef(void 0);
-  callbackRef.current = callback;
   const coalescer = useMemo(
     () => ({
       cancel() {
@@ -1780,6 +1786,19 @@ function WebAnchoredEndSpace({ horizontal }) {
   const style = horizontal ? { height: "100%", width: anchoredEndSpaceSize || 0 } : { height: anchoredEndSpaceSize || 0 };
   return /* @__PURE__ */ React3.createElement("div", { style }, null);
 }
+function useStableRenderComponent(renderComponent, mapProps) {
+  const renderComponentRef = useLatestRef(renderComponent);
+  const mapPropsRef = useLatestRef(mapProps);
+  return React3.useMemo(
+    () => React3.forwardRef(
+      (props, ref) => {
+        var _a3, _b;
+        return (_b = (_a3 = renderComponentRef.current) == null ? void 0 : _a3.call(renderComponentRef, mapPropsRef.current(props, ref))) != null ? _b : null;
+      }
+    ),
+    [mapPropsRef, renderComponentRef]
+  );
+}
 var LayoutView = ({ onLayoutChange, refView, children, ...rest }) => {
   const localRef = useRef(null);
   const ref = refView != null ? refView : localRef;
@@ -1824,14 +1843,11 @@ var ListComponent = typedMemo(function ListComponent2({
     needsOtherAxisSize: ctx.state.needsOtherAxisSize,
     otherAxisSize
   });
-  const ScrollComponent = useMemo(() => {
-    if (!renderScrollComponent) {
-      return ListComponentScrollView;
-    }
-    return React3.forwardRef(
-      (props, ref) => renderScrollComponent({ ...props, ref })
-    );
-  }, [renderScrollComponent]);
+  const CustomScrollComponent = useStableRenderComponent(
+    renderScrollComponent,
+    (props, ref) => ({ ...props, ref })
+  );
+  const ScrollComponent = renderScrollComponent ? CustomScrollComponent : ListComponentScrollView;
   const SnapOrScroll = snapToIndices ? SnapWrapper : ScrollComponent;
   useLayoutEffect(() => {
     if (!ListHeaderComponent) {
@@ -3191,11 +3207,51 @@ function getObservedBootstrapInitialScrollOffset(state) {
   const observedOffset = (_b = (_a3 = state.refScroller.current) == null ? void 0 : _a3.getCurrentScrollOffset) == null ? void 0 : _b.call(_a3);
   return typeof observedOffset === "number" && Number.isFinite(observedOffset) ? observedOffset : (_d = (_c = state.scrollPending) != null ? _c : state.scroll) != null ? _d : 0;
 }
+function getPreservedEndAnchorOffsetDiff(ctx) {
+  var _a3;
+  const state = ctx.state;
+  const initialScroll = state.initialScroll;
+  if (!state.didFinishInitialScroll || ((_a3 = state.scrollingTo) == null ? void 0 : _a3.isInitialScroll) || !initialScroll || initialScroll.viewPosition !== 1 || state.props.data.length === 0 || isOffsetInitialScrollSession(state)) {
+    return;
+  }
+  const currentOffset = typeof state.lastNativeScroll === "number" && Number.isFinite(state.lastNativeScroll) ? state.lastNativeScroll : getObservedBootstrapInitialScrollOffset(state);
+  return resolveInitialScrollOffset(ctx, initialScroll) - currentOffset;
+}
+function schedulePreservedEndAnchorCorrection(ctx) {
+  if (getPreservedEndAnchorOffsetDiff(ctx) === void 0) {
+    return false;
+  }
+  const correction = {};
+  schedulePreservedEndAnchorCorrectionFrame(ctx, correction);
+  return true;
+}
+function schedulePreservedEndAnchorCorrectionFrame(ctx, correction) {
+  const state = ctx.state;
+  state.preservedEndAnchorCorrection = correction;
+  requestAnimationFrame(() => {
+    var _a3;
+    const activeCorrection = state.preservedEndAnchorCorrection;
+    if (activeCorrection !== correction) {
+      return;
+    }
+    const offsetDiff = getPreservedEndAnchorOffsetDiff(ctx);
+    if (offsetDiff === void 0 || Math.abs(offsetDiff) <= DEFAULT_BOOTSTRAP_REVEAL_EPSILON) {
+      state.preservedEndAnchorCorrection = void 0;
+      return;
+    }
+    const hasObservedNativeScrollAfterRequest = !activeCorrection.lastRequestTime || ((_a3 = state.lastNativeScrollTime) != null ? _a3 : 0) > activeCorrection.lastRequestTime;
+    if (hasObservedNativeScrollAfterRequest) {
+      activeCorrection.lastRequestTime = Date.now();
+      requestAdjust(ctx, offsetDiff);
+    }
+    schedulePreservedEndAnchorCorrectionFrame(ctx, correction);
+  });
+}
 function clearFinishedBootstrapInitialScrollTargetIfMovedAway(ctx) {
   var _a3, _b;
   const state = ctx.state;
   const initialScroll = state.initialScroll;
-  if (!state.didFinishInitialScroll || ((_a3 = state.scrollingTo) == null ? void 0 : _a3.isInitialScroll) || (initialScroll == null ? void 0 : initialScroll.viewPosition) !== 1) {
+  if (!state.didFinishInitialScroll || ((_a3 = state.scrollingTo) == null ? void 0 : _a3.isInitialScroll) || (initialScroll == null ? void 0 : initialScroll.viewPosition) !== 1 || state.preservedEndAnchorCorrection) {
     return;
   }
   if (didFinishedInitialScrollMoveAwayFromTarget(ctx, initialScroll)) {
@@ -3352,7 +3408,7 @@ function handleBootstrapInitialScrollFooterLayout(ctx, options) {
   }
 }
 function handleBootstrapInitialScrollLayoutChange(ctx) {
-  var _a3, _b, _c, _d;
+  var _a3, _b, _c;
   const state = ctx.state;
   const initialScroll = state.initialScroll;
   const bootstrapInitialScroll = getBootstrapInitialScrollSession(state);
@@ -3363,7 +3419,9 @@ function handleBootstrapInitialScrollLayoutChange(ctx) {
       const currentOffset = scrollingTo ? (_b = scrollingTo.targetOffset) != null ? _b : scrollingTo.offset : getObservedBootstrapInitialScrollOffset(state);
       const offsetDiff = resolvedOffset - currentOffset;
       if (Math.abs(offsetDiff) > DEFAULT_BOOTSTRAP_REVEAL_EPSILON) {
-        if (scrollingTo) {
+        if (state.didFinishInitialScroll) {
+          schedulePreservedEndAnchorCorrection(ctx);
+        } else if (scrollingTo) {
           const existingWatchdog = initialScrollWatchdog.get(state);
           scrollingTo.offset = resolvedOffset;
           scrollingTo.targetOffset = resolvedOffset;
@@ -3376,14 +3434,8 @@ function handleBootstrapInitialScrollLayoutChange(ctx) {
             startScroll: (_c = existingWatchdog == null ? void 0 : existingWatchdog.startScroll) != null ? _c : state.scroll,
             targetOffset: resolvedOffset
           });
+          requestAdjust(ctx, offsetDiff);
         }
-        requestAdjust(ctx, offsetDiff);
-        if (state.didFinishInitialScroll) {
-          (_d = state.triggerCalculateItemsInView) == null ? void 0 : _d.call(state, { forceFullItemPositions: true });
-        }
-      }
-      if (state.didFinishInitialScroll) {
-        clearFinishedViewportRetargetableInitialScroll(state);
       }
     } else {
       rearmBootstrapInitialScroll(ctx, {
@@ -3634,7 +3686,10 @@ function retargetActiveInitialScrollAtEnd(ctx) {
   var _a3;
   const state = ctx.state;
   const initialScroll = state.initialScroll;
-  if (!initialScroll || state.didFinishInitialScroll || ((_a3 = state.initialScrollSession) == null ? void 0 : _a3.kind) === "offset" || initialScroll.viewPosition !== 1 || state.props.data.length === 0) {
+  if (state.didFinishInitialScroll) {
+    return schedulePreservedEndAnchorCorrection(ctx);
+  }
+  if (!initialScroll || ((_a3 = state.initialScrollSession) == null ? void 0 : _a3.kind) === "offset" || initialScroll.viewPosition !== 1 || state.props.data.length === 0) {
     return false;
   }
   return advanceCurrentInitialScrollSession(ctx, { forceScroll: true });
@@ -5637,7 +5692,7 @@ function cloneScrollEvent(event) {
   };
 }
 function onScroll(ctx, event) {
-  var _a3, _b, _c, _d, _e;
+  var _a3, _b, _c, _d, _e, _f;
   const state = ctx.state;
   const { scrollProcessingEnabled } = state;
   if (scrollProcessingEnabled === false) {
@@ -5659,6 +5714,9 @@ function onScroll(ctx, event) {
   if (state.props.horizontal) {
     newScroll = toLogicalHorizontalOffset(state, newScroll, (_e = event.nativeEvent.contentSize) == null ? void 0 : _e.width);
   }
+  state.didFinishInitialScroll && ((_f = state.initialScroll) == null ? void 0 : _f.viewPosition) === 1 && state.scroll > state.scrollLength;
+  state.lastNativeScroll = newScroll;
+  state.lastNativeScrollTime = Date.now();
   if (state.scrollingTo && state.scrollingTo.offset >= newScroll) {
     const maxOffset = clampScrollOffset(ctx, newScroll, state.scrollingTo);
     if (newScroll !== maxOffset && Math.abs(newScroll - maxOffset) > 1) {
@@ -6284,6 +6342,8 @@ function getAlwaysRenderIndices(config, data, keyExtractor, anchoredEndSpaceAnch
   indices.sort(sortAsc);
   return indices;
 }
+
+// src/utils/getRenderedItem.ts
 function getRenderedItem(ctx, key) {
   var _a3;
   const state = ctx.state;
@@ -6309,7 +6369,7 @@ function getRenderedItem(ctx, key) {
       item,
       type: getItemType ? (_a3 = getItemType(item, index)) != null ? _a3 : "" : ""
     };
-    renderedItem = React3__default.createElement(renderItem, itemProps);
+    renderedItem = renderItem(itemProps);
   }
   return { index, item: data[index], renderedItem };
 }
@@ -7035,6 +7095,8 @@ var internal = {
   typedMemo,
   useArr$,
   useCombinedRef,
+  useLatestRef,
+  useStableRenderComponent,
   useStateContext
 };
 

package/reanimated.d.ts

@@ -92,13 +92,11 @@ interface DataModeProps<ItemT, TItemType extends string | undefined> {
      */
     data: ReadonlyArray<ItemT>;
     /**
-     * Function or React component to render each item in the list.
-     * Can be either:
-     * - A function: (props: LegendListRenderItemProps<ItemT>) => ReactNode
-     * - A React component: React.ComponentType<LegendListRenderItemProps<ItemT>>
+     * Callback to render each item in the list.
+     * To use hooks in an item component, return that component from this callback.
      * @required when using data mode
      */
-    renderItem: ((props: LegendListRenderItemProps<ItemT, TItemType>) => React.ReactNode) | React.ComponentType<LegendListRenderItemProps<ItemT, TItemType>>;
+    renderItem: (props: LegendListRenderItemProps<ItemT, TItemType>) => React.ReactNode;
     children?: never;
 }
 interface ChildrenModeProps {

package/reanimated.js

@@ -36,6 +36,8 @@ var {
   typedMemo,
   useArr$,
   useCombinedRef,
+  useLatestRef,
+  useStableRenderComponent,
   getComponent
 } = reactNative.internal;
 var { peek$, useStateContext } = reactNative.internal;
@@ -48,12 +50,12 @@ var ReanimatedScrollBridge = typedMemo(function ReanimatedScrollBridgeComponent(
   const animatedScrollRef = Reanimated.useAnimatedRef();
   Reanimated.useScrollViewOffset(animatedScrollRef, scrollOffset);
   const combinedRef = useCombinedRef(animatedScrollRef, forwardedRef);
-  const ScrollComponent = React__namespace.useMemo(
-    () => renderScrollComponent ? React__namespace.forwardRef(
-      (scrollViewProps, ref) => renderScrollComponent({ ...scrollViewProps, ref, scrollEventThrottle: 1 })
-    ) : Reanimated__default.default.ScrollView,
-    [renderScrollComponent]
-  );
+  const CustomScrollComponent = useStableRenderComponent(renderScrollComponent, (scrollViewProps, ref) => ({
+    ...scrollViewProps,
+    ref,
+    scrollEventThrottle: 1
+  }));
+  const ScrollComponent = renderScrollComponent ? CustomScrollComponent : Reanimated__default.default.ScrollView;
   return /* @__PURE__ */ React__namespace.createElement(ScrollComponent, { ...props, ref: combinedRef });
 });
 var StickyOverlay = typedMemo(function StickyOverlayComponent({ stickyHeaderConfig }) {
@@ -218,8 +220,7 @@ var LegendListForwardedRef = typedMemo(
       },
       [scrollOffset]
     );
-    const itemLayoutAnimationRef = React__namespace.useRef(itemLayoutAnimation);
-    itemLayoutAnimationRef.current = itemLayoutAnimation;
+    const itemLayoutAnimationRef = useLatestRef(itemLayoutAnimation);
     const hasItemLayoutAnimation = !!itemLayoutAnimation;
     const positionComponentInternal = React__namespace.useMemo(() => {
       if (!hasItemLayoutAnimation) {

package/reanimated.mjs

@@ -12,6 +12,8 @@ var {
   typedMemo,
   useArr$,
   useCombinedRef,
+  useLatestRef,
+  useStableRenderComponent,
   getComponent
 } = internal;
 var { peek$, useStateContext } = internal;
@@ -24,12 +26,12 @@ var ReanimatedScrollBridge = typedMemo(function ReanimatedScrollBridgeComponent(
   const animatedScrollRef = useAnimatedRef();
   useScrollViewOffset(animatedScrollRef, scrollOffset);
   const combinedRef = useCombinedRef(animatedScrollRef, forwardedRef);
-  const ScrollComponent = React.useMemo(
-    () => renderScrollComponent ? React.forwardRef(
-      (scrollViewProps, ref) => renderScrollComponent({ ...scrollViewProps, ref, scrollEventThrottle: 1 })
-    ) : Reanimated.ScrollView,
-    [renderScrollComponent]
-  );
+  const CustomScrollComponent = useStableRenderComponent(renderScrollComponent, (scrollViewProps, ref) => ({
+    ...scrollViewProps,
+    ref,
+    scrollEventThrottle: 1
+  }));
+  const ScrollComponent = renderScrollComponent ? CustomScrollComponent : Reanimated.ScrollView;
   return /* @__PURE__ */ React.createElement(ScrollComponent, { ...props, ref: combinedRef });
 });
 var StickyOverlay = typedMemo(function StickyOverlayComponent({ stickyHeaderConfig }) {
@@ -194,8 +196,7 @@ var LegendListForwardedRef = typedMemo(
       },
       [scrollOffset]
     );
-    const itemLayoutAnimationRef = React.useRef(itemLayoutAnimation);
-    itemLayoutAnimationRef.current = itemLayoutAnimation;
+    const itemLayoutAnimationRef = useLatestRef(itemLayoutAnimation);
     const hasItemLayoutAnimation = !!itemLayoutAnimation;
     const positionComponentInternal = React.useMemo(() => {
       if (!hasItemLayoutAnimation) {

package/section-list.d.ts

@@ -148,13 +148,11 @@ interface DataModeProps<ItemT, TItemType extends string | undefined> {
      */
     data: ReadonlyArray<ItemT>;
     /**
-     * Function or React component to render each item in the list.
-     * Can be either:
-     * - A function: (props: LegendListRenderItemProps<ItemT>) => ReactNode
-     * - A React component: React.ComponentType<LegendListRenderItemProps<ItemT>>
+     * Callback to render each item in the list.
+     * To use hooks in an item component, return that component from this callback.
      * @required when using data mode
      */
-    renderItem: ((props: LegendListRenderItemProps<ItemT, TItemType>) => React.ReactNode) | React.ComponentType<LegendListRenderItemProps<ItemT, TItemType>>;
+    renderItem: (props: LegendListRenderItemProps<ItemT, TItemType>) => React.ReactNode;
     children?: never;
 }
 interface ChildrenModeProps {