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

package/react-native.web.mjs

@@ -145,7 +145,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;
@@ -153,14 +156,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
@@ -661,6 +671,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,
@@ -699,42 +752,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]
@@ -1045,6 +1073,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") {
@@ -1129,6 +1160,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 = forwardRef(function ListComponentScrollView2({
   children,
   style,
@@ -1146,7 +1182,9 @@ var ListComponentScrollView = forwardRef(function ListComponentScrollView2({
   onLayout,
   ...props
 }, ref) {
+  var _a3, _b, _c;
   const ctx = useStateContext();
+  const [anchoredEndSpaceSize] = useArr$(["anchoredEndSpaceSize"]);
   const scrollRef = useRef(null);
   const contentRef = useRef(null);
   const isWindowScroll = useWindowScroll;
@@ -1208,10 +1246,9 @@ var ListComponentScrollView = forwardRef(function ListComponentScrollView2({
   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(),
@@ -1337,6 +1374,10 @@ var ListComponentScrollView = forwardRef(function ListComponentScrollView2({
     },
     ...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,
@@ -1344,6 +1385,7 @@ var ListComponentScrollView = forwardRef(function ListComponentScrollView2({
     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,
@@ -1352,7 +1394,7 @@ var ListComponentScrollView = forwardRef(function ListComponentScrollView2({
     useWindowScroll: _useWindowScroll,
     ...webProps
   } = props;
-  return /* @__PURE__ */ React3.createElement("div", { ref: scrollRef, ...webProps, style: scrollViewStyle }, refreshControl, /* @__PURE__ */ React3.createElement("div", { className: contentContainerClassName, ref: contentRef, style: contentStyle }, children));
+  return /* @__PURE__ */ React3.createElement("div", { ref: scrollRef, ...webProps, style: scrollViewStyle }, refreshControl, /* @__PURE__ */ React3.createElement("div", { className, ref: contentRef, style: contentStyle }, children, contentInsetEndAdjustmentSpacerStyle ? /* @__PURE__ */ React3.createElement("div", { "aria-hidden": true, style: contentInsetEndAdjustmentSpacerStyle }) : null));
 });
 function useValueListener$(key, callback) {
   const ctx = useStateContext();
@@ -1380,11 +1422,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.useRef(0);
   const resetPaddingRafRef = React3.useRef(void 0);
   const resetPaddingBaselineRef = React3.useRef(void 0);
+  const contentNodeRef = React3.useRef(null);
   const callback = React3.useCallback(() => {
     var _a3, _b;
     const scrollAdjust = peek$(ctx, "scrollAdjust");
@@ -1395,9 +1444,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();
@@ -3252,6 +3302,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) {
@@ -5308,17 +5367,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 && (insetDiff > 0)) {
+      requestAdjust(ctx, insetDiff);
+    }
+  }
+}
+
 // src/core/updateItemSize.ts
 function runOrScheduleMVCPRecalculate(ctx) {
   const state = ctx.state;
@@ -5543,14 +5617,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;
@@ -5565,10 +5639,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) {
@@ -5582,11 +5656,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) => {
@@ -5667,8 +5740,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(() => {
@@ -5697,15 +5776,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);
@@ -5960,6 +6048,7 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
     data: dataProp = [],
     dataVersion,
     drawDistance = 250,
+    contentInsetEndAdjustment,
     estimatedItemSize = 100,
     estimatedListSize,
     extraData,
@@ -6069,6 +6158,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 = useRef(contentInsetEndAdjustmentResolved);
   const alwaysRenderIndices = useMemo(() => {
     const indices = getAlwaysRenderIndices(alwaysRender, dataProp, keyExtractor, anchoredEndSpace == null ? void 0 : anchoredEndSpace.anchorIndex);
     return { arr: indices, set: new Set(indices) };
@@ -6188,6 +6279,7 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
     anchoredEndSpace: anchoredEndSpaceResolved,
     animatedProps: animatedPropsInternal,
     contentInset,
+    contentInsetEndAdjustment: contentInsetEndAdjustmentResolved,
     data: dataProp,
     dataVersion,
     drawDistance,
@@ -6305,6 +6397,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.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