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

package/index.native.mjs

@@ -218,7 +218,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;
@@ -291,7 +291,7 @@ function useValue$(key, params) {
   useMemo(() => {
     let prevValue;
     let didQueueTask = false;
-    listen$(ctx, key, (v) => {
+    listen$(ctx, key, () => {
       const newValue = getNewValue();
       if (delay !== void 0) {
         const fn = () => {
@@ -320,7 +320,6 @@ function useValue$(key, params) {
   }, []);
   return animValue;
 }
-var typedForwardRef = forwardRef;
 var typedMemo = memo;
 var getComponent = (Component) => {
   if (React2.isValidElement(Component)) {
@@ -395,10 +394,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 }];
@@ -616,6 +612,8 @@ function useOnLayoutSync({
 }
 var Platform2 = Platform;
 var PlatformAdjustBreaksScroll = Platform2.OS === "android";
+var typedForwardRef = forwardRef;
+var typedMemo2 = memo;
 
 // src/utils/isInMVCPActiveMode.native.ts
 function isInMVCPActiveMode(state) {
@@ -623,7 +621,7 @@ function isInMVCPActiveMode(state) {
 }
 
 // src/components/Container.tsx
-var Container = typedMemo(function Container2({
+var Container = typedMemo2(function Container2({
   id,
   recycleItems,
   horizontal,
@@ -634,6 +632,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}`,
@@ -786,7 +785,7 @@ var Container = typedMemo(function Container2({
       }
     }, [itemKey]);
   }
-  const PositionComponent = isSticky ? PositionViewSticky : PositionView;
+  const PositionComponent = isSticky ? stickyPositionComponentInternal ? stickyPositionComponentInternal : PositionViewSticky : PositionView;
   return /* @__PURE__ */ React2.createElement(
     PositionComponent,
     {
@@ -897,7 +896,7 @@ var LayoutView = ({ onLayoutChange, refView, ...rest }) => {
 };
 
 // src/components/ListComponent.tsx
-var ListComponent = typedMemo(function ListComponent2({
+var ListComponent = typedMemo2(function ListComponent2({
   canRender,
   style,
   contentContainerStyle,
@@ -928,7 +927,9 @@ var ListComponent = typedMemo(function ListComponent2({
   const ctx = useStateContext();
   const maintainVisibleContentPosition = ctx.state.props.maintainVisibleContentPosition;
   const ScrollComponent = renderScrollComponent ? useMemo(
-    () => React2.forwardRef((props, ref) => renderScrollComponent({ ...props, ref })),
+    () => React2.forwardRef(
+      (props, ref) => renderScrollComponent({ ...props, ref })
+    ),
     [renderScrollComponent]
   ) : ListComponentScrollView;
   const SnapOrScroll = snapToIndices ? SnapWrapper : ScrollComponent;
@@ -1121,12 +1122,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);
@@ -1221,7 +1225,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 {
@@ -1265,14 +1269,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 });
+    }
   }
 }
 
@@ -1311,8 +1323,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;
@@ -1379,7 +1395,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;
@@ -1532,7 +1548,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;
@@ -1619,6 +1635,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) {
@@ -1687,7 +1704,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 {
@@ -2372,26 +2389,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
@@ -3116,7 +3123,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, {
@@ -3169,7 +3176,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);
         }
@@ -3370,8 +3377,9 @@ function getWindowSize() {
 }
 var StyleSheet = StyleSheet$1;
 function useStickyScrollHandler(stickyHeaderIndices, horizontal, ctx, onScroll2) {
+  const shouldUseRnAnimatedEngine = !ctx.state.props.stickyPositionComponentInternal;
   return useMemo(() => {
-    if (stickyHeaderIndices == null ? void 0 : stickyHeaderIndices.length) {
+    if ((stickyHeaderIndices == null ? void 0 : stickyHeaderIndices.length) && shouldUseRnAnimatedEngine) {
       const { animatedScrollY } = ctx;
       return Animated.event(
         [
@@ -3388,7 +3396,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
@@ -3424,7 +3432,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(),
@@ -3585,8 +3616,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) {
@@ -3658,7 +3689,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;
@@ -3739,7 +3770,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 = {
@@ -3915,6 +3951,7 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
     snapToIndices,
     stickyIndicesArr: stickyHeaderIndices != null ? stickyHeaderIndices : [],
     stickyIndicesSet: useMemo(() => new Set(stickyHeaderIndices != null ? stickyHeaderIndices : []), [stickyHeaderIndices == null ? void 0 : stickyHeaderIndices.join(",")]),
+    stickyPositionComponentInternal,
     stylePaddingBottom: stylePaddingBottomState,
     stylePaddingTop: stylePaddingTopState,
     suggestEstimatedItemSize: !!suggestEstimatedItemSize
@@ -3968,7 +4005,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;
@@ -4124,7 +4161,7 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
   return /* @__PURE__ */ React2.createElement(React2.Fragment, null, /* @__PURE__ */ React2.createElement(
     ListComponent,
     {
-      ...rest,
+      ...restProps,
       alignItemsAtEnd,
       canRender,
       contentContainerStyle,
@@ -4161,4 +4198,12 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
   ), IS_DEV && ENABLE_DEBUG_VIEW);
 });
 
-export { LegendList, typedForwardRef, typedMemo, useIsLastItem, useListScrollSize, useRecyclingEffect, useRecyclingState, useSyncLayout, useViewability, useViewabilityAmount };
+// 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."
+  );
+}
+
+export { LegendList3 as LegendList, typedForwardRef, typedMemo2 as typedMemo, useIsLastItem, useListScrollSize, useRecyclingEffect, useRecyclingState, useSyncLayout, useViewability, useViewabilityAmount };