@legendapp/list 3.0.0-beta.32 → 3.0.0-beta.33

package/index.native.js

@@ -239,7 +239,7 @@ var _a;
 var envMode = typeof process !== "undefined" && typeof process.env === "object" && process.env ? (_a = process.env.NODE_ENV) != null ? _a : process.env.MODE : void 0;
 var processDev = typeof envMode === "string" ? envMode.toLowerCase() !== "production" : void 0;
 var _a2;
-var IS_DEV = (_a2 = metroDev != null ? metroDev : processDev) != null ? _a2 : false;
+var IS_DEV = (_a2 = processDev != null ? processDev : metroDev) != null ? _a2 : false;
 
 // src/constants.ts
 var POSITION_OUT_OF_VIEW = -1e7;
@@ -312,7 +312,7 @@ function useValue$(key, params) {
   React2.useMemo(() => {
     let prevValue;
     let didQueueTask = false;
-    listen$(ctx, key, (v) => {
+    listen$(ctx, key, () => {
       const newValue = getNewValue();
       if (delay !== void 0) {
         const fn = () => {
@@ -341,7 +341,6 @@ function useValue$(key, params) {
   }, []);
   return animValue;
 }
-var typedForwardRef = React2.forwardRef;
 var typedMemo = React2.memo;
 var getComponent = (Component) => {
   if (React2__namespace.isValidElement(Component)) {
@@ -416,10 +415,7 @@ var PositionViewSticky = typedMemo(function PositionViewSticky2({
       const stickyPosition = animatedScrollY.interpolate({
         extrapolateLeft: "clamp",
         extrapolateRight: "extend",
-        inputRange: [
-          stickyStart,
-          stickyStart + 5e3
-        ],
+        inputRange: [stickyStart, stickyStart + 5e3],
         outputRange: [position, position + 5e3]
       });
       return horizontal ? [{ translateX: stickyPosition }] : [{ translateY: stickyPosition }];
@@ -637,6 +633,8 @@ function useOnLayoutSync({
 }
 var Platform2 = reactNative.Platform;
 var PlatformAdjustBreaksScroll = Platform2.OS === "android";
+var typedForwardRef = React2.forwardRef;
+var typedMemo2 = React2.memo;
 
 // src/utils/isInMVCPActiveMode.native.ts
 function isInMVCPActiveMode(state) {
@@ -644,7 +642,7 @@ function isInMVCPActiveMode(state) {
 }
 
 // src/components/Container.tsx
-var Container = typedMemo(function Container2({
+var Container = typedMemo2(function Container2({
   id,
   recycleItems,
   horizontal,
@@ -655,6 +653,7 @@ var Container = typedMemo(function Container2({
 }) {
   const ctx = useStateContext();
   const { columnWrapperStyle, animatedScrollY } = ctx;
+  const stickyPositionComponentInternal = ctx.state.props.stickyPositionComponentInternal;
   const [column = 0, span = 1, data, itemKey, numColumns = 1, extraData, isSticky] = useArr$([
     `containerColumn${id}`,
     `containerSpan${id}`,
@@ -807,7 +806,7 @@ var Container = typedMemo(function Container2({
       }
     }, [itemKey]);
   }
-  const PositionComponent = isSticky ? PositionViewSticky : PositionView;
+  const PositionComponent = isSticky ? stickyPositionComponentInternal ? stickyPositionComponentInternal : PositionViewSticky : PositionView;
   return /* @__PURE__ */ React2__namespace.createElement(
     PositionComponent,
     {
@@ -918,7 +917,7 @@ var LayoutView = ({ onLayoutChange, refView, ...rest }) => {
 };
 
 // src/components/ListComponent.tsx
-var ListComponent = typedMemo(function ListComponent2({
+var ListComponent = typedMemo2(function ListComponent2({
   canRender,
   style,
   contentContainerStyle,
@@ -949,7 +948,9 @@ var ListComponent = typedMemo(function ListComponent2({
   const ctx = useStateContext();
   const maintainVisibleContentPosition = ctx.state.props.maintainVisibleContentPosition;
   const ScrollComponent = renderScrollComponent ? React2.useMemo(
-    () => React2__namespace.forwardRef((props, ref) => renderScrollComponent({ ...props, ref })),
+    () => React2__namespace.forwardRef(
+      (props, ref) => renderScrollComponent({ ...props, ref })
+    ),
     [renderScrollComponent]
   ) : ListComponentScrollView;
   const SnapOrScroll = snapToIndices ? SnapWrapper : ScrollComponent;
@@ -1142,12 +1143,15 @@ function calculateOffsetWithOffsetPosition(ctx, offsetParam, params) {
 }
 
 // src/core/clampScrollOffset.ts
-function clampScrollOffset(ctx, offset) {
+function clampScrollOffset(ctx, offset, scrollTarget) {
   const state = ctx.state;
   const contentSize = getContentSize(ctx);
   let clampedOffset = offset;
   if (Number.isFinite(contentSize) && Number.isFinite(state.scrollLength) && (Platform2.OS !== "android" || state.lastLayout)) {
-    const maxOffset = Math.max(0, contentSize - state.scrollLength);
+    const baseMaxOffset = Math.max(0, contentSize - state.scrollLength);
+    const viewOffset = scrollTarget == null ? void 0 : scrollTarget.viewOffset;
+    const extraEndOffset = typeof viewOffset === "number" && viewOffset < 0 ? -viewOffset : 0;
+    const maxOffset = baseMaxOffset + extraEndOffset;
     clampedOffset = Math.min(offset, maxOffset);
   }
   clampedOffset = Math.max(0, clampedOffset);
@@ -1242,7 +1246,7 @@ function checkAtBottom(ctx) {
 function checkAtTop(ctx) {
   var _a3;
   const state = ctx == null ? void 0 : ctx.state;
-  if (!state || state.initialScroll) {
+  if (!state || state.initialScroll || state.scrollingTo) {
     return;
   }
   const {
@@ -1286,14 +1290,22 @@ function setInitialRenderState(ctx, {
   didInitialScroll
 }) {
   const { state } = ctx;
+  const {
+    loadStartTime,
+    props: { onLoad }
+  } = state;
   if (didLayout) {
     state.didContainersLayout = true;
   }
   if (didInitialScroll) {
     state.didFinishInitialScroll = true;
   }
-  if (state.didContainersLayout && state.didFinishInitialScroll) {
+  const isReadyToRender = Boolean(state.didContainersLayout && state.didFinishInitialScroll);
+  if (isReadyToRender && !peek$(ctx, "readyToRender")) {
     set$(ctx, "readyToRender", true);
+    if (onLoad) {
+      onLoad({ elapsedTimeInMs: Date.now() - loadStartTime });
+    }
   }
 }
 
@@ -1332,8 +1344,12 @@ function checkFinishedScrollFrame(ctx) {
     state.animFrameCheckFinishedScroll = void 0;
     const scroll = state.scrollPending;
     const adjust = state.scrollAdjustHandler.getAdjust();
-    const clampedTargetOffset = clampScrollOffset(ctx, scrollingTo.offset - (scrollingTo.viewOffset || 0));
-    const maxOffset = clampScrollOffset(ctx, scroll);
+    const clampedTargetOffset = clampScrollOffset(
+      ctx,
+      scrollingTo.offset - (scrollingTo.viewOffset || 0),
+      scrollingTo
+    );
+    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;
@@ -1400,7 +1416,7 @@ function scrollTo(ctx, params) {
     clearTimeout(ctx.state.timeoutCheckFinishedScrollFallback);
   }
   let offset = precomputedWithViewOffset ? scrollTargetOffset : calculateOffsetWithOffsetPosition(ctx, scrollTargetOffset, scrollTarget);
-  offset = clampScrollOffset(ctx, offset);
+  offset = clampScrollOffset(ctx, offset, scrollTarget);
   state.scrollHistory.length = 0;
   if (!noScrollingTo) {
     state.scrollingTo = scrollTarget;
@@ -1553,7 +1569,7 @@ function ensureInitialAnchor(ctx) {
   }
   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 clampedDesiredOffset = clampScrollOffset(ctx, desiredOffset);
+  const clampedDesiredOffset = clampScrollOffset(ctx, desiredOffset, anchor);
   const delta = clampedDesiredOffset - scroll;
   if (Math.abs(delta) <= INITIAL_ANCHOR_TOLERANCE) {
     const settledTicks = ((_c = anchor.settledTicks) != null ? _c : 0) + 1;
@@ -1640,6 +1656,7 @@ function prepareMVCP(ctx, dataChanged) {
   const idsInViewWithPositions = [];
   const scrollTarget = scrollingTo == null ? void 0 : scrollingTo.index;
   const scrollingToViewPosition = scrollingTo == null ? void 0 : scrollingTo.viewPosition;
+  const isEndAnchoredScrollTarget = scrollTarget !== void 0 && state.props.data.length > 0 && scrollTarget >= state.props.data.length - 1 && (scrollingToViewPosition != null ? scrollingToViewPosition : 0) > 0;
   const shouldMVCP = dataChanged ? mvcpData : mvcpScroll;
   const indexByKey = state.indexByKey;
   if (shouldMVCP) {
@@ -1708,7 +1725,7 @@ function prepareMVCP(ctx, dataChanged) {
         if (newPosition !== void 0) {
           const totalSize = getContentSize(ctx);
           let diff = newPosition - prevPosition;
-          if (diff !== 0 && state.scroll + state.scrollLength > totalSize) {
+          if (diff !== 0 && isEndAnchoredScrollTarget && state.scroll + state.scrollLength > totalSize) {
             if (diff > 0) {
               diff = Math.max(0, totalSize - state.scroll - state.scrollLength);
             } else {
@@ -2393,26 +2410,16 @@ function scrollToIndex(ctx, { index, viewOffset = 0, animated = true, viewPositi
 // src/utils/setDidLayout.ts
 function setDidLayout(ctx) {
   const state = ctx.state;
-  const {
-    loadStartTime,
-    initialScroll,
-    props: { onLoad }
-  } = state;
+  const { initialScroll } = state;
   state.queuedInitialLayout = true;
   checkAtBottom(ctx);
-  const setIt = () => {
-    setInitialRenderState(ctx, { didLayout: true });
-    if (onLoad) {
-      onLoad({ elapsedTimeInMs: Date.now() - loadStartTime });
-    }
-  };
   if ((initialScroll == null ? void 0 : initialScroll.index) !== void 0) {
     const target = initialScroll;
     const runScroll = () => scrollToIndex(ctx, { ...target, animated: false });
     runScroll();
     requestAnimationFrame(runScroll);
   }
-  setIt();
+  setInitialRenderState(ctx, { didLayout: true });
 }
 
 // src/core/calculateItemsInView.ts
@@ -3137,7 +3144,7 @@ function onScroll(ctx, event) {
   }
   let newScroll = event.nativeEvent.contentOffset[state.props.horizontal ? "x" : "y"];
   if (state.scrollingTo && state.scrollingTo.offset >= newScroll) {
-    const maxOffset = clampScrollOffset(ctx, newScroll);
+    const maxOffset = clampScrollOffset(ctx, newScroll, state.scrollingTo);
     if (newScroll !== maxOffset && Math.abs(newScroll - maxOffset) > 1) {
       newScroll = maxOffset;
       scrollTo(ctx, {
@@ -3190,7 +3197,7 @@ var ScrollAdjustHandler = class {
         if ((scrollTarget == null ? void 0 : scrollTarget.index) !== void 0) {
           const currentOffset = calculateOffsetForIndex(this.ctx, scrollTarget.index);
           targetScroll = calculateOffsetWithOffsetPosition(this.ctx, currentOffset, scrollTarget);
-          targetScroll = clampScrollOffset(this.ctx, targetScroll);
+          targetScroll = clampScrollOffset(this.ctx, targetScroll, scrollTarget);
         } else {
           targetScroll = clampScrollOffset(this.ctx, state.scroll + pending);
         }
@@ -3391,8 +3398,9 @@ function getWindowSize() {
 }
 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) {
+    if ((stickyHeaderIndices == null ? void 0 : stickyHeaderIndices.length) && shouldUseRnAnimatedEngine) {
       const { animatedScrollY } = ctx;
       return reactNative.Animated.event(
         [
@@ -3409,7 +3417,7 @@ function useStickyScrollHandler(stickyHeaderIndices, horizontal, ctx, onScroll2)
       );
     }
     return onScroll2;
-  }, [stickyHeaderIndices == null ? void 0 : stickyHeaderIndices.join(","), horizontal]);
+  }, [stickyHeaderIndices == null ? void 0 : stickyHeaderIndices.join(","), horizontal, shouldUseRnAnimatedEngine]);
 }
 
 // src/utils/createColumnWrapperStyle.ts
@@ -3445,7 +3453,30 @@ function createImperativeHandle(ctx) {
     }
   };
   const refScroller = state.refScroller;
+  const clearCaches = (options) => {
+    var _a3, _b;
+    const mode = (_a3 = options == null ? void 0 : options.mode) != null ? _a3 : "sizes";
+    state.sizes.clear();
+    state.sizesKnown.clear();
+    for (const key in state.averageSizes) {
+      delete state.averageSizes[key];
+    }
+    state.minIndexSizeChanged = 0;
+    state.scrollForNextCalculateItemsInView = void 0;
+    state.pendingTotalSize = void 0;
+    state.totalSize = 0;
+    set$(ctx, "totalSize", 0);
+    if (mode === "full") {
+      state.indexByKey.clear();
+      state.idCache.length = 0;
+      state.positions.clear();
+      state.columns.clear();
+      state.columnSpans.clear();
+    }
+    (_b = state.triggerCalculateItemsInView) == null ? void 0 : _b.call(state, { forceFullItemPositions: true });
+  };
   return {
+    clearCaches,
     flashScrollIndicators: () => refScroller.current.flashScrollIndicators(),
     getNativeScrollRef: () => refScroller.current,
     getScrollableNode: () => refScroller.current.getScrollableNode(),
@@ -3606,8 +3637,8 @@ function normalizeMaintainVisibleContentPosition(value) {
   if (value && typeof value === "object") {
     return {
       data: (_a3 = value.data) != null ? _a3 : false,
-      size: (_b = value.size) != null ? _b : true,
-      shouldRestorePosition: value.shouldRestorePosition
+      shouldRestorePosition: value.shouldRestorePosition,
+      size: (_b = value.size) != null ? _b : true
     };
   }
   if (value === false) {
@@ -3679,7 +3710,7 @@ function useThrottledOnScroll(originalHandler, scrollEventThrottle) {
 }
 
 // src/components/LegendList.tsx
-var LegendList = typedMemo(
+var LegendList = typedMemo2(
   // biome-ignore lint/nursery/noShadow: const function name shadowing is intentional
   typedForwardRef(function LegendList2(props, forwardedRef) {
     const { children, data: dataProp, renderItem: renderItemProp, ...restProps } = props;
@@ -3760,7 +3791,12 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
     ...rest
   } = props;
   const animatedPropsInternal = props.animatedPropsInternal;
-  const { childrenMode } = rest;
+  const stickyPositionComponentInternal = props.stickyPositionComponentInternal;
+  const {
+    childrenMode,
+    stickyPositionComponentInternal: _stickyPositionComponentInternal,
+    ...restProps
+  } = rest;
   const contentContainerStyleBase = StyleSheet.flatten(contentContainerStyleProp);
   const shouldFlexGrow = alignItemsAtEnd && (horizontal ? (contentContainerStyleBase == null ? void 0 : contentContainerStyleBase.minWidth) == null : (contentContainerStyleBase == null ? void 0 : contentContainerStyleBase.minHeight) == null);
   const contentContainerStyle = {
@@ -3936,6 +3972,7 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
     snapToIndices,
     stickyIndicesArr: stickyHeaderIndices != null ? stickyHeaderIndices : [],
     stickyIndicesSet: React2.useMemo(() => new Set(stickyHeaderIndices != null ? stickyHeaderIndices : []), [stickyHeaderIndices == null ? void 0 : stickyHeaderIndices.join(",")]),
+    stickyPositionComponentInternal,
     stylePaddingBottom: stylePaddingBottomState,
     stylePaddingTop: stylePaddingTopState,
     suggestEstimatedItemSize: !!suggestEstimatedItemSize
@@ -3989,7 +4026,7 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
       } else {
         const baseOffset = initialScroll.index !== void 0 ? calculateOffsetForIndex(ctx, initialScroll.index) : 0;
         const resolvedOffset = calculateOffsetWithOffsetPosition(ctx, baseOffset, initialScroll);
-        const clampedOffset = clampScrollOffset(ctx, resolvedOffset);
+        const clampedOffset = clampScrollOffset(ctx, resolvedOffset, initialScroll);
         const updatedInitialScroll = { ...initialScroll, contentOffset: clampedOffset };
         refState.current.initialScroll = updatedInitialScroll;
         state.initialScroll = updatedInitialScroll;
@@ -4145,7 +4182,7 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
   return /* @__PURE__ */ React2__namespace.createElement(React2__namespace.Fragment, null, /* @__PURE__ */ React2__namespace.createElement(
     ListComponent,
     {
-      ...rest,
+      ...restProps,
       alignItemsAtEnd,
       canRender,
       contentContainerStyle,
@@ -4182,9 +4219,17 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
   ), IS_DEV && ENABLE_DEBUG_VIEW);
 });
 
-exports.LegendList = LegendList;
+// src/index.ts
+var LegendList3 = LegendList;
+if (IS_DEV) {
+  console.warn(
+    "[legend-list] Legend List 3.0 deprecates the root import (@legendapp/list) because it now supports both react and react-native. The root import is fully functional, but please switch to platform-specific imports for strict platform types:\n  - React Native: @legendapp/list/react-native\n  - React: @legendapp/list/react\nSee README for details."
+  );
+}
+
+exports.LegendList = LegendList3;
 exports.typedForwardRef = typedForwardRef;
-exports.typedMemo = typedMemo;
+exports.typedMemo = typedMemo2;
 exports.useIsLastItem = useIsLastItem;
 exports.useListScrollSize = useListScrollSize;
 exports.useRecyclingEffect = useRecyclingEffect;