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

package/animated.d.ts

@@ -248,6 +248,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;
+    /**
+     * 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
@@ -641,7 +646,7 @@ interface ViewabilityConfig {
     waitForInteraction?: boolean | undefined;
 }
 
-type LegendListPropsOverrides<ItemT, TItemType extends string | undefined> = Omit<LegendListPropsBase<ItemT, ScrollViewProps, TItemType>, "anchoredEndSpace" | "onScroll" | "refScrollView" | "renderScrollComponent" | "ListHeaderComponentStyle" | "ListFooterComponentStyle"> & {
+type LegendListPropsOverrides<ItemT, TItemType extends string | undefined> = Omit<LegendListPropsBase<ItemT, ScrollViewProps, TItemType>, "anchoredEndSpace" | "contentInsetEndAdjustment" | "onScroll" | "refScrollView" | "renderScrollComponent" | "ListHeaderComponentStyle" | "ListFooterComponentStyle"> & {
     onScroll?: (event: NativeSyntheticEvent$1<NativeScrollEvent$1>) => void;
     refScrollView?: React.Ref<ScrollView>;
     renderScrollComponent?: (props: ScrollViewProps) => React.ReactElement<ScrollViewProps>;

package/index.d.ts

@@ -249,6 +249,7 @@ interface InternalState$1 {
         data: readonly any[];
         dataVersion: Key | undefined;
         drawDistance: number;
+        contentInsetEndAdjustment: number | undefined;
         estimatedItemSize: number | undefined;
         getEstimatedItemSize: LegendListPropsInternal["getEstimatedItemSize"];
         getFixedItemSize: LegendListPropsInternal["getFixedItemSize"];
@@ -573,6 +574,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

package/index.js

@@ -166,7 +166,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;
@@ -174,14 +177,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
@@ -679,6 +689,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,
@@ -717,42 +770,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 = React3.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 = React3.useMemo(
+    () => getContainerPositionStyle({
+      columnWrapperStyle,
+      hasItemSeparator: !!ItemSeparatorComponent,
+      horizontal,
+      numColumns,
+      otherAxisPos,
+      otherAxisSize
+    }),
+    [horizontal, otherAxisPos, otherAxisSize, columnWrapperStyle, numColumns, ItemSeparatorComponent]
+  );
   const renderedItemInfo = React3.useMemo(
     () => itemKey !== void 0 ? getRenderedItem2(itemKey) : null,
     [itemKey, data, extraData]
@@ -1063,6 +1091,9 @@ function useRafCoalescer(callback) {
   return coalescer;
 }
 
+// src/components/webConstants.ts
+var LEGEND_LIST_CONTENT_CONTAINER_CLASS = "legend-list-content-container";
+
 // src/components/webScrollUtils.ts
 function getDocumentScrollerNode() {
   if (typeof document === "undefined") {
@@ -1147,6 +1178,11 @@ function resolveWindowScrollTarget({ clampedOffset, horizontal, listPos, scroll
 }
 
 // src/components/ListComponentScrollView.tsx
+function getContentInsetEndAdjustmentEnd2(ctx) {
+  var _a3, _b;
+  const adjustment = (_b = (_a3 = ctx.state) == null ? void 0 : _a3.props) == null ? void 0 : _b.contentInsetEndAdjustment;
+  return Math.max(0, adjustment != null ? adjustment : 0);
+}
 var ListComponentScrollView = React3.forwardRef(function ListComponentScrollView2({
   children,
   style,
@@ -1164,7 +1200,9 @@ var ListComponentScrollView = React3.forwardRef(function ListComponentScrollView
   onLayout,
   ...props
 }, ref) {
+  var _a3, _b, _c;
   const ctx = useStateContext();
+  const [anchoredEndSpaceSize] = useArr$(["anchoredEndSpaceSize"]);
   const scrollRef = React3.useRef(null);
   const contentRef = React3.useRef(null);
   const isWindowScroll = useWindowScroll;
@@ -1226,10 +1264,9 @@ var ListComponentScrollView = React3.forwardRef(function ListComponentScrollView
   React3.useImperativeHandle(ref, () => {
     const api = {
       getBoundingClientRect: () => {
-        var _a3;
-        return (_a3 = scrollRef.current) == null ? void 0 : _a3.getBoundingClientRect();
+        var _a4;
+        return (_a4 = scrollRef.current) == null ? void 0 : _a4.getBoundingClientRect();
       },
-      getContentNode: () => contentRef.current,
       getCurrentScrollOffset,
       getScrollableNode: () => resolveScrollableNode(scrollRef.current, isWindowScroll),
       getScrollEventTarget: () => getScrollTarget(),
@@ -1355,6 +1392,10 @@ var ListComponentScrollView = React3.forwardRef(function ListComponentScrollView
     },
     ...StyleSheet.flatten(style)
   };
+  const contentInsetEndAdjustment = getContentInsetEndAdjustmentEnd2(ctx);
+  const anchoredEndInset = ((_c = (_b = (_a3 = ctx.state) == null ? void 0 : _a3.props) == null ? void 0 : _b.anchoredEndSpace) == null ? void 0 : _c.includeInEndInset) && anchoredEndSpaceSize ? anchoredEndSpaceSize : 0;
+  const renderedContentInsetEndAdjustment = Math.max(0, contentInsetEndAdjustment - anchoredEndInset);
+  const contentInsetEndAdjustmentSpacerStyle = renderedContentInsetEndAdjustment ? horizontal ? { flexShrink: 0, width: renderedContentInsetEndAdjustment } : { height: renderedContentInsetEndAdjustment } : void 0;
   const contentStyle = {
     display: horizontal ? "flex" : "block",
     flexDirection: horizontal ? "row" : void 0,
@@ -1362,6 +1403,7 @@ var ListComponentScrollView = React3.forwardRef(function ListComponentScrollView
     minWidth: horizontal ? "100%" : void 0,
     ...StyleSheet.flatten(contentContainerStyle)
   };
+  const className = contentContainerClassName ? `${LEGEND_LIST_CONTENT_CONTAINER_CLASS} ${contentContainerClassName}` : LEGEND_LIST_CONTENT_CONTAINER_CLASS;
   const {
     contentContainerClassName: _contentContainerClassName,
     contentInset: _contentInset,
@@ -1370,7 +1412,7 @@ var ListComponentScrollView = React3.forwardRef(function ListComponentScrollView
     useWindowScroll: _useWindowScroll,
     ...webProps
   } = props;
-  return /* @__PURE__ */ React3__namespace.createElement("div", { ref: scrollRef, ...webProps, style: scrollViewStyle }, refreshControl, /* @__PURE__ */ React3__namespace.createElement("div", { className: contentContainerClassName, ref: contentRef, style: contentStyle }, children));
+  return /* @__PURE__ */ React3__namespace.createElement("div", { ref: scrollRef, ...webProps, style: scrollViewStyle }, refreshControl, /* @__PURE__ */ React3__namespace.createElement("div", { className, ref: contentRef, style: contentStyle }, children, contentInsetEndAdjustmentSpacerStyle ? /* @__PURE__ */ React3__namespace.createElement("div", { "aria-hidden": true, style: contentInsetEndAdjustmentSpacerStyle }) : null));
 });
 function useValueListener$(key, callback) {
   const ctx = useStateContext();
@@ -1398,11 +1440,18 @@ function getScrollAdjustAxis(horizontal) {
     y: 1
   };
 }
+function resolveScrollAdjustContentNode(el, contentNode) {
+  if ((contentNode == null ? void 0 : contentNode.isConnected) && contentNode.parentElement === el) {
+    return contentNode;
+  }
+  return el.querySelector(`:scope > .${LEGEND_LIST_CONTENT_CONTAINER_CLASS}`);
+}
 function ScrollAdjust() {
   const ctx = useStateContext();
   const lastScrollOffsetRef = React3__namespace.useRef(0);
   const resetPaddingRafRef = React3__namespace.useRef(void 0);
   const resetPaddingBaselineRef = React3__namespace.useRef(void 0);
+  const contentNodeRef = React3__namespace.useRef(null);
   const callback = React3__namespace.useCallback(() => {
     var _a3, _b;
     const scrollAdjust = peek$(ctx, "scrollAdjust");
@@ -1413,9 +1462,10 @@ function ScrollAdjust() {
       const scrollDelta = scrollOffset - lastScrollOffsetRef.current;
       if (scrollDelta !== 0) {
         const axis = getScrollAdjustAxis(!!ctx.state.props.horizontal);
-        const contentNode = scrollView.getContentNode();
         const prevScroll = scrollView.getCurrentScrollOffset();
         const el = scrollView.getScrollableNode();
+        const contentNode = resolveScrollAdjustContentNode(el, contentNodeRef.current);
+        contentNodeRef.current = contentNode;
         const scrollBy = () => scrollView.scrollBy(axis.x * scrollDelta, axis.y * scrollDelta);
         if (!contentNode) {
           scrollBy();
@@ -3270,6 +3320,15 @@ function checkFinishedScrollFallback(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) {
@@ -5336,6 +5395,22 @@ function maybeUpdateAnchoredEndSpace(ctx) {
   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 && (insetDiff > 0)) {
+      requestAdjust(ctx, insetDiff);
+    }
+  }
+}
+
 // src/core/updateItemSize.ts
 function runOrScheduleMVCPRecalculate(ctx) {
   const state = ctx.state;
@@ -5683,8 +5758,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(() => {
@@ -5985,6 +6066,7 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
     data: dataProp = [],
     dataVersion,
     drawDistance = 250,
+    contentInsetEndAdjustment,
     estimatedItemSize = 100,
     estimatedListSize,
     extraData,
@@ -6094,6 +6176,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 = contentInsetEndAdjustment ;
+  const previousContentInsetEndAdjustmentRef = React3.useRef(contentInsetEndAdjustmentResolved);
   const alwaysRenderIndices = React3.useMemo(() => {
     const indices = getAlwaysRenderIndices(alwaysRender, dataProp, keyExtractor, anchoredEndSpace == null ? void 0 : anchoredEndSpace.anchorIndex);
     return { arr: indices, set: new Set(indices) };
@@ -6213,6 +6297,7 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
     anchoredEndSpace: anchoredEndSpaceResolved,
     animatedProps: animatedPropsInternal,
     contentInset,
+    contentInsetEndAdjustment: contentInsetEndAdjustmentResolved,
     data: dataProp,
     dataVersion,
     drawDistance,
@@ -6330,6 +6415,11 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
     didAnchoredEndSpaceAnchorIndexChange,
     numColumnsProp
   ]);
+  React3.useLayoutEffect(() => {
+    const previousContentInsetEndAdjustment = previousContentInsetEndAdjustmentRef.current;
+    previousContentInsetEndAdjustmentRef.current = contentInsetEndAdjustmentResolved;
+    updateContentInsetEndAdjustment(ctx, previousContentInsetEndAdjustment);
+  }, [ctx, contentInsetEndAdjustmentResolved]);
   const onLayoutFooter = React3.useCallback(
     (layout) => {
       if (!usesBootstrapInitialScroll) {