@legendapp/list 3.0.0-beta.51 → 3.0.0-beta.53

package/react-native.mjs

@@ -139,7 +139,10 @@ function useSelector$(signalName, selector) {
 }
 
 // src/state/getContentInsetEnd.ts
-function getContentInsetEnd(ctx) {
+function getContentInsetEndAdjustmentEnd(adjustment) {
+  return Math.max(0, adjustment != null ? adjustment : 0);
+}
+function getContentInsetEnd(ctx, contentInsetEndAdjustmentOverride) {
   var _a3, _b;
   const state = ctx.state;
   const { props } = state;
@@ -147,14 +150,21 @@ function getContentInsetEnd(ctx) {
   const contentInset = props.contentInset;
   const baseInset = contentInset != null ? contentInset : state.nativeContentInset;
   const baseEndInset = (horizontal ? baseInset == null ? void 0 : baseInset.right : baseInset == null ? void 0 : baseInset.bottom) || 0;
+  const contentInsetEndAdjustment = getContentInsetEndAdjustmentEnd(
+    contentInsetEndAdjustmentOverride != null ? contentInsetEndAdjustmentOverride : props.contentInsetEndAdjustment
+  );
   const anchoredEndSpaceSize = peek$(ctx, "anchoredEndSpaceSize");
   const anchoredEndInset = ((_a3 = props.anchoredEndSpace) == null ? void 0 : _a3.includeInEndInset) && anchoredEndSpaceSize ? anchoredEndSpaceSize : 0;
   const overrideInset = (_b = state.contentInsetOverride) != null ? _b : void 0;
+  const adjustedBaseEndInset = baseEndInset + contentInsetEndAdjustment;
   if (overrideInset) {
     const mergedInset = { bottom: 0, right: 0, ...baseInset, ...overrideInset };
-    return Math.max((horizontal ? mergedInset.right : mergedInset.bottom) || 0, anchoredEndInset);
+    return Math.max(
+      ((horizontal ? mergedInset.right : mergedInset.bottom) || 0) + contentInsetEndAdjustment,
+      anchoredEndInset
+    );
   }
-  return Math.max(baseEndInset, anchoredEndInset);
+  return Math.max(adjustedBaseEndInset, anchoredEndInset);
 }
 
 // src/state/getContentSize.ts
@@ -646,6 +656,49 @@ function isInMVCPActiveMode(state) {
 }
 
 // src/components/Container.tsx
+function getContainerPositionStyle({
+  columnWrapperStyle,
+  horizontal,
+  hasItemSeparator,
+  numColumns,
+  otherAxisPos,
+  otherAxisSize
+}) {
+  let paddingStyles;
+  if (columnWrapperStyle) {
+    const { columnGap, rowGap, gap } = columnWrapperStyle;
+    if (horizontal) {
+      paddingStyles = {
+        paddingBottom: numColumns > 1 ? (rowGap || gap || 0) / 2 : void 0,
+        paddingRight: columnGap || gap || void 0,
+        paddingTop: numColumns > 1 ? (rowGap || gap || 0) / 2 : void 0
+      };
+    } else {
+      paddingStyles = {
+        paddingBottom: rowGap || gap || void 0,
+        paddingLeft: numColumns > 1 ? (columnGap || gap || 0) / 2 : void 0,
+        paddingRight: numColumns > 1 ? (columnGap || gap || 0) / 2 : void 0
+      };
+    }
+  }
+  return horizontal ? {
+    boxSizing: paddingStyles ? "border-box" : void 0,
+    flexDirection: hasItemSeparator ? "row" : void 0,
+    height: otherAxisSize,
+    left: 0,
+    position: "absolute",
+    top: otherAxisPos,
+    ...paddingStyles || {}
+  } : {
+    boxSizing: paddingStyles ? "border-box" : void 0,
+    left: otherAxisPos,
+    position: "absolute",
+    right: numColumns > 1 ? null : 0,
+    top: 0,
+    width: otherAxisSize,
+    ...paddingStyles || {}
+  };
+}
 var Container = typedMemo(function Container2({
   id,
   recycleItems,
@@ -684,42 +737,17 @@ var Container = typedMemo(function Container2({
   const resolvedSpan = Math.min(Math.max(span || 1, 1), numColumns);
   const otherAxisPos = numColumns > 1 ? `${(resolvedColumn - 1) / numColumns * 100}%` : 0;
   const otherAxisSize = numColumns > 1 ? `${resolvedSpan / numColumns * 100}%` : void 0;
-  const style = useMemo(() => {
-    let paddingStyles;
-    if (columnWrapperStyle) {
-      const { columnGap, rowGap, gap } = columnWrapperStyle;
-      if (horizontal) {
-        paddingStyles = {
-          paddingBottom: numColumns > 1 ? (rowGap || gap || 0) / 2 : void 0,
-          paddingRight: columnGap || gap || void 0,
-          paddingTop: numColumns > 1 ? (rowGap || gap || 0) / 2 : void 0
-        };
-      } else {
-        paddingStyles = {
-          paddingBottom: rowGap || gap || void 0,
-          paddingLeft: numColumns > 1 ? (columnGap || gap || 0) / 2 : void 0,
-          paddingRight: numColumns > 1 ? (columnGap || gap || 0) / 2 : void 0
-        };
-      }
-    }
-    return horizontal ? {
-      boxSizing: paddingStyles ? "border-box" : void 0,
-      flexDirection: ItemSeparatorComponent ? "row" : void 0,
-      height: otherAxisSize,
-      left: 0,
-      position: "absolute",
-      top: otherAxisPos,
-      ...paddingStyles || {}
-    } : {
-      boxSizing: paddingStyles ? "border-box" : void 0,
-      left: otherAxisPos,
-      position: "absolute",
-      right: numColumns > 1 ? null : 0,
-      top: 0,
-      width: otherAxisSize,
-      ...paddingStyles || {}
-    };
-  }, [horizontal, otherAxisPos, otherAxisSize, columnWrapperStyle, numColumns]);
+  const style = useMemo(
+    () => getContainerPositionStyle({
+      columnWrapperStyle,
+      hasItemSeparator: !!ItemSeparatorComponent,
+      horizontal,
+      numColumns,
+      otherAxisPos,
+      otherAxisSize
+    }),
+    [horizontal, otherAxisPos, otherAxisSize, columnWrapperStyle, numColumns, ItemSeparatorComponent]
+  );
   const renderedItemInfo = useMemo(
     () => itemKey !== void 0 ? getRenderedItem2(itemKey) : null,
     [itemKey, data, extraData]
@@ -2677,6 +2705,15 @@ function abortBootstrapInitialScroll(ctx) {
 }
 
 // src/core/initialScrollLifecycle.ts
+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) {
+    return false;
+  }
+  return advanceCurrentInitialScrollSession(ctx, { forceScroll: true });
+}
 function handleInitialScrollLayoutReady(ctx) {
   var _a3;
   if (!ctx.state.initialScroll) {
@@ -4775,17 +4812,32 @@ function maybeUpdateAnchoredEndSpace(ctx) {
       nextSize = Math.max(0, state.scrollLength - contentBelowAnchor - anchorOffset);
     }
   }
-  if (previousSize === nextSize) {
-    return nextSize;
-  }
-  set$(ctx, "anchoredEndSpaceSize", nextSize);
-  (_a3 = anchoredEndSpace == null ? void 0 : anchoredEndSpace.onSizeChanged) == null ? void 0 : _a3.call(anchoredEndSpace, nextSize);
-  if (anchoredEndSpace == null ? void 0 : anchoredEndSpace.includeInEndInset) {
-    updateScroll(ctx, state.scroll, true);
+  if (previousSize !== nextSize) {
+    set$(ctx, "anchoredEndSpaceSize", nextSize);
+    (_a3 = anchoredEndSpace == null ? void 0 : anchoredEndSpace.onSizeChanged) == null ? void 0 : _a3.call(anchoredEndSpace, nextSize);
+    if (anchoredEndSpace == null ? void 0 : anchoredEndSpace.includeInEndInset) {
+      updateScroll(ctx, state.scroll, true);
+    }
   }
   return nextSize;
 }
 
+// src/core/updateContentInsetEndAdjustment.ts
+function updateContentInsetEndAdjustment(ctx, previousContentInsetEndAdjustment) {
+  const state = ctx.state;
+  const previousContentInsetEnd = getContentInsetEnd(ctx, previousContentInsetEndAdjustment);
+  const nextContentInsetEnd = getContentInsetEnd(ctx);
+  const insetDiff = nextContentInsetEnd - previousContentInsetEnd;
+  if (insetDiff !== 0) {
+    const wasWithinEndThreshold = !!peek$(ctx, "isWithinMaintainScrollAtEndThreshold");
+    updateScroll(ctx, state.scroll, true, { markHasScrolled: false });
+    const didRetargetInitialScroll = retargetActiveInitialScrollAtEnd(ctx);
+    if (!didRetargetInitialScroll && wasWithinEndThreshold && (Platform.OS !== "web" || insetDiff > 0)) {
+      requestAdjust(ctx, insetDiff);
+    }
+  }
+}
+
 // src/core/updateItemSize.ts
 function runOrScheduleMVCPRecalculate(ctx) {
   const state = ctx.state;
@@ -5025,14 +5077,14 @@ function createImperativeHandle(ctx) {
   const IMPERATIVE_SCROLL_SETTLE_STABLE_FRAMES = 2;
   let imperativeScrollToken = 0;
   const isSettlingAfterDataChange = () => !!state.didDataChange || !!state.didColumnsChange || state.queuedMVCPRecalculate !== void 0 || state.ignoreScrollFromMVCP !== void 0;
-  const runWhenSettled = (token, run) => {
+  const runWhenReady = (token, run, isReady) => {
     const startedAt = Date.now();
     let stableFrames = 0;
     const check = () => {
       if (token !== imperativeScrollToken) {
         return;
       }
-      if (isSettlingAfterDataChange()) {
+      if (isSettlingAfterDataChange() || !isReady()) {
         stableFrames = 0;
       } else {
         stableFrames += 1;
@@ -5047,10 +5099,10 @@ function createImperativeHandle(ctx) {
     requestAnimationFrame(check);
   };
   const runScrollWithPromise = (run, options) => new Promise((resolve) => {
-    var _a3;
+    var _a3, _b;
     const token = ++imperativeScrollToken;
-    const shouldWaitOneFrame = !!(options == null ? void 0 : options.shouldWaitOneFrame);
-    (_a3 = state.pendingScrollResolve) == null ? void 0 : _a3.call(state);
+    const isReady = (_a3 = options == null ? void 0 : options.isReady) != null ? _a3 : (() => true);
+    (_b = state.pendingScrollResolve) == null ? void 0 : _b.call(state);
     state.pendingScrollResolve = resolve;
     const runNow = () => {
       if (token !== imperativeScrollToken) {
@@ -5064,11 +5116,10 @@ function createImperativeHandle(ctx) {
         resolve();
       }
     };
-    const execute = shouldWaitOneFrame ? () => requestAnimationFrame(runNow) : runNow;
-    if (isSettlingAfterDataChange()) {
-      runWhenSettled(token, execute);
+    if (isSettlingAfterDataChange() || !isReady()) {
+      runWhenReady(token, runNow, isReady);
     } else {
-      execute();
+      runNow();
     }
   });
   const scrollIndexIntoView = (options) => {
@@ -5149,8 +5200,14 @@ function createImperativeHandle(ctx) {
       startBuffered: state.startBuffered
     }),
     reportContentInset: (inset) => {
+      var _a3, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l;
+      const previousInset = state.contentInsetOverride;
       state.contentInsetOverride = inset != null ? inset : void 0;
+      const didChange = ((_a3 = previousInset == null ? void 0 : previousInset.top) != null ? _a3 : 0) !== ((_c = (_b = state.contentInsetOverride) == null ? void 0 : _b.top) != null ? _c : 0) || ((_d = previousInset == null ? void 0 : previousInset.bottom) != null ? _d : 0) !== ((_f = (_e = state.contentInsetOverride) == null ? void 0 : _e.bottom) != null ? _f : 0) || ((_g = previousInset == null ? void 0 : previousInset.left) != null ? _g : 0) !== ((_i = (_h = state.contentInsetOverride) == null ? void 0 : _h.left) != null ? _i : 0) || ((_j = previousInset == null ? void 0 : previousInset.right) != null ? _j : 0) !== ((_l = (_k = state.contentInsetOverride) == null ? void 0 : _k.right) != null ? _l : 0);
       updateScroll(ctx, state.scroll, true, { markHasScrolled: false });
+      if (didChange) {
+        retargetActiveInitialScrollAtEnd(ctx);
+      }
     },
     scrollIndexIntoView: (options) => runScrollWithPromise(() => scrollIndexIntoView(options)),
     scrollItemIntoView: ({ item, ...props }) => runScrollWithPromise(() => {
@@ -5179,15 +5236,24 @@ function createImperativeHandle(ctx) {
       }
       return false;
     }),
-    scrollToIndex: (params) => runScrollWithPromise(
-      () => {
+    scrollToIndex: (params) => {
+      const shouldWaitForOutOfRangeTarget = params.index >= 0 && params.index >= state.props.data.length;
+      const options = shouldWaitForOutOfRangeTarget ? {
+        isReady: () => {
+          var _a3;
+          const props = state.props;
+          const anchorIndex = (_a3 = props.anchoredEndSpace) == null ? void 0 : _a3.anchorIndex;
+          const lastIndex = props.data.length - 1;
+          const isInRange = params.index < props.data.length;
+          const shouldWaitForAnchorSize = isInRange && anchorIndex !== void 0 && anchorIndex >= 0 && params.index >= anchorIndex && !props.getFixedItemSize && !state.sizesKnown.has(getId(state, lastIndex));
+          return isInRange && !shouldWaitForAnchorSize;
+        }
+      } : void 0;
+      return runScrollWithPromise(() => {
         scrollToIndex(ctx, params);
         return true;
-      },
-      {
-        shouldWaitOneFrame: params.index >= 0 && params.index >= state.props.data.length
-      }
-    ),
+      }, options);
+    },
     scrollToItem: ({ item, ...props }) => runScrollWithPromise(() => {
       const data = state.props.data;
       const index = data.indexOf(item);
@@ -5442,6 +5508,7 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
     data: dataProp = [],
     dataVersion,
     drawDistance = 250,
+    contentInsetEndAdjustment,
     estimatedItemSize = 100,
     estimatedListSize,
     extraData,
@@ -5551,6 +5618,8 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
   const combinedRef = useCombinedRef(refScroller, refScrollView);
   const keyExtractor = keyExtractorProp != null ? keyExtractorProp : ((_item, index) => index.toString());
   const stickyHeaderIndices = stickyHeaderIndicesProp != null ? stickyHeaderIndicesProp : stickyIndicesDeprecated;
+  const contentInsetEndAdjustmentResolved = Platform.OS === "web" ? contentInsetEndAdjustment : void 0;
+  const previousContentInsetEndAdjustmentRef = useRef(contentInsetEndAdjustmentResolved);
   const alwaysRenderIndices = useMemo(() => {
     const indices = getAlwaysRenderIndices(alwaysRender, dataProp, keyExtractor, anchoredEndSpace == null ? void 0 : anchoredEndSpace.anchorIndex);
     return { arr: indices, set: new Set(indices) };
@@ -5670,6 +5739,7 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
     anchoredEndSpace: anchoredEndSpaceResolved,
     animatedProps: animatedPropsInternal,
     contentInset,
+    contentInsetEndAdjustment: contentInsetEndAdjustmentResolved,
     data: dataProp,
     dataVersion,
     drawDistance,
@@ -5792,6 +5862,11 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
     didAnchoredEndSpaceAnchorIndexChange,
     numColumnsProp
   ]);
+  useLayoutEffect(() => {
+    const previousContentInsetEndAdjustment = previousContentInsetEndAdjustmentRef.current;
+    previousContentInsetEndAdjustmentRef.current = contentInsetEndAdjustmentResolved;
+    updateContentInsetEndAdjustment(ctx, previousContentInsetEndAdjustment);
+  }, [ctx, contentInsetEndAdjustmentResolved]);
   const onLayoutFooter = useCallback(
     (layout) => {
       if (!usesBootstrapInitialScroll) {

package/react-native.web.d.ts

@@ -5,7 +5,6 @@ type ScrollEventTarget = Window | HTMLElement;
 
 interface ScrollViewMethods {
     getBoundingClientRect(): DOMRect | null | undefined;
-    getContentNode(): HTMLElement | null;
     getCurrentScrollOffset(): number;
     getScrollableNode(): HTMLElement;
     getScrollEventTarget(): ScrollEventTarget | null;
@@ -278,6 +277,11 @@ interface LegendListSpecificProps<ItemT, TItemType extends string | undefined> {
      * Keeps an item visually anchored to the start by adding trailing space when the content below it underflows.
      */
     anchoredEndSpace?: AnchoredEndSpaceConfig$1;
+    /**
+     * Adjusts the effective end content inset for web lists without replacing the base contentInset.
+     * The adjustment is also rendered as real content padding so the browser scroll range includes it.
+     */
+    contentInsetEndAdjustment?: number;
     /**
      * Number of columns to render items in.
      * @default 1