@legendapp/list 3.1.0 → 3.1.1

package/CHANGELOG.md

@@ -1,6 +1,10 @@
+## 3.1.1
+
+- Fix: `maintainScrollAtEnd` now stays pinned when a `ListFooterComponent` appears, disappears, or changes size, so chat typing indicators and other dynamic footers do not leave the list slightly above the end. If you use an explicit `maintainScrollAtEnd.on` config, add `footerLayout` to opt into footer size changes.
+
 ## 3.1.0
 
-- Feat: Add `experimental_adaptiveRender` with `useAdaptiveRender` and `useAdaptiveRenderChange`, so item components can render a lighter version while the list is moving quickly and return to normal after scrolling slows.
+- Feat: Add `experimental_adaptiveRender` prop, with `useAdaptiveRender` and `useAdaptiveRenderChange` hooks, so item components can render a lighter version while the list is moving quickly and return to normal after scrolling slows.
 - Feat: Add `setItemSize` to the list ref for updating a known item's measured size directly when its content changes outside normal layout measurement.
 - Fix: Web maintainVisibleContentPosition keeps the intended anchor when headers change, browser scroll anchoring runs, or an animated `scrollToEnd` is already in progress. #468 #463
 - Fix: `initialScrollIndex` and `initialScrollAtEnd` use the latest initial scroll props when data starts empty and loads later, so lists do not scroll to an old startup target.

package/animated.d.ts

@@ -460,6 +460,7 @@ interface AlwaysRenderConfig {
 }
 interface MaintainScrollAtEndOnOptions {
     dataChange?: boolean;
+    footerLayout?: boolean;
     itemLayout?: boolean;
     layout?: boolean;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@legendapp/list",
-  "version": "3.1.0",
+  "version": "3.1.1",
   "description": "Legend List is a drop-in replacement for FlatList with much better performance and supporting dynamically sized items.",
   "sideEffects": false,
   "private": false,

package/react-native.d.ts

@@ -460,6 +460,7 @@ interface AlwaysRenderConfig {
 }
 interface MaintainScrollAtEndOnOptions {
     dataChange?: boolean;
+    footerLayout?: boolean;
     itemLayout?: boolean;
     layout?: boolean;
 }

package/react-native.js

@@ -1217,6 +1217,67 @@ function WebAnchoredEndSpace({ horizontal }) {
   return /* @__PURE__ */ React2__namespace.createElement("div", { style }, null);
 }
 
+// src/core/doMaintainScrollAtEnd.ts
+function doMaintainScrollAtEnd(ctx) {
+  const state = ctx.state;
+  const {
+    didContainersLayout,
+    pendingNativeMVCPAdjust,
+    refScroller,
+    props: { maintainScrollAtEnd }
+  } = state;
+  const isWithinMaintainScrollAtEndThreshold = peek$(ctx, "isWithinMaintainScrollAtEndThreshold");
+  const shouldMaintainScrollAtEnd = !!(isWithinMaintainScrollAtEndThreshold && maintainScrollAtEnd && didContainersLayout);
+  if (pendingNativeMVCPAdjust) {
+    state.pendingMaintainScrollAtEnd = shouldMaintainScrollAtEnd;
+    return false;
+  }
+  state.pendingMaintainScrollAtEnd = false;
+  if (shouldMaintainScrollAtEnd) {
+    const contentSize = getContentSize(ctx);
+    if (contentSize < state.scrollLength) {
+      state.scroll = 0;
+    }
+    if (!state.maintainingScrollAtEnd) {
+      const pendingState = maintainScrollAtEnd.animated ? "pending-animated" : "pending-instant";
+      const activeState = maintainScrollAtEnd.animated ? "animated" : "instant";
+      state.maintainingScrollAtEnd = pendingState;
+      requestAnimationFrame(() => {
+        if (peek$(ctx, "isWithinMaintainScrollAtEndThreshold")) {
+          state.maintainingScrollAtEnd = activeState;
+          const scroller = refScroller.current;
+          if (state.props.horizontal && isHorizontalRTL(state)) {
+            const currentContentSize = getContentSize(ctx);
+            const logicalEndOffset = getLogicalHorizontalMaxOffset(state, currentContentSize);
+            const nativeOffset = toNativeHorizontalOffset(state, logicalEndOffset, currentContentSize);
+            scroller == null ? void 0 : scroller.scrollTo({
+              animated: maintainScrollAtEnd.animated,
+              x: nativeOffset,
+              y: 0
+            });
+          } else {
+            scroller == null ? void 0 : scroller.scrollToEnd({
+              animated: maintainScrollAtEnd.animated
+            });
+          }
+          setTimeout(
+            () => {
+              if (state.maintainingScrollAtEnd === activeState) {
+                state.maintainingScrollAtEnd = void 0;
+              }
+            },
+            maintainScrollAtEnd.animated ? 500 : 0
+          );
+        } else if (state.maintainingScrollAtEnd === pendingState) {
+          state.maintainingScrollAtEnd = void 0;
+        }
+      });
+    }
+    return true;
+  }
+  return false;
+}
+
 // src/core/calculateOffsetForIndex.ts
 function calculateOffsetForIndex(ctx, index) {
   const state = ctx.state;
@@ -2184,10 +2245,12 @@ function requestAdjust(ctx, positionDiff, dataChanged) {
 // src/core/updateContentMetrics.ts
 var SCROLL_ADJUST_EPSILON = 0.1;
 function setContentLengthSignal(ctx, signalName, size) {
-  if (peek$(ctx, signalName) !== size) {
+  const didChange = peek$(ctx, signalName) !== size;
+  if (didChange) {
     set$(ctx, signalName, size);
     updateContentMetricsState(ctx);
   }
+  return didChange;
 }
 function shouldAdjustForHeaderSizeChange(ctx, previousHeaderSize, nextHeaderSize) {
   const { didContainersLayout, didFinishInitialScroll, props, scroll, scrollingTo } = ctx.state;
@@ -2211,7 +2274,7 @@ function setHeaderSize(ctx, size) {
   state.didMeasureHeader = true;
 }
 function setFooterSize(ctx, size) {
-  setContentLengthSignal(ctx, "footerSize", size);
+  return setContentLengthSignal(ctx, "footerSize", size);
 }
 function areInsetsEqual(left, right) {
   var _a3, _b, _c, _d, _e, _f, _g, _h;
@@ -2312,14 +2375,25 @@ var ListComponent = typedMemo(function ListComponent2({
   );
   const ScrollComponent = renderScrollComponent ? CustomScrollComponent : ListComponentScrollView;
   const SnapOrScroll = snapToIndices ? SnapWrapper : ScrollComponent;
+  const updateFooterSize = React2.useCallback(
+    (size, afterSizeUpdate) => {
+      var _a3;
+      const didFooterSizeChange = setFooterSize(ctx, size);
+      afterSizeUpdate == null ? void 0 : afterSizeUpdate();
+      if (didFooterSizeChange && ((_a3 = ctx.state.props.maintainScrollAtEnd) == null ? void 0 : _a3.onFooterLayout)) {
+        doMaintainScrollAtEnd(ctx);
+      }
+    },
+    [ctx]
+  );
   React2.useLayoutEffect(() => {
     if (!ListHeaderComponent) {
       setHeaderSize(ctx, 0);
     }
     if (!ListFooterComponent) {
-      setFooterSize(ctx, 0);
+      updateFooterSize(0);
     }
-  }, [ListHeaderComponent, ListFooterComponent, ctx]);
+  }, [ListHeaderComponent, ListFooterComponent, ctx, updateFooterSize]);
   const onLayoutHeader = React2.useCallback(
     (rect) => {
       const size = rect[horizontal ? "width" : "height"];
@@ -2330,10 +2404,11 @@ var ListComponent = typedMemo(function ListComponent2({
   const onLayoutFooterInternal = React2.useCallback(
     (rect, fromLayoutEffect) => {
       const size = rect[horizontal ? "width" : "height"];
-      setFooterSize(ctx, size);
-      onLayoutFooter == null ? void 0 : onLayoutFooter(rect, fromLayoutEffect);
+      updateFooterSize(size, () => {
+        onLayoutFooter == null ? void 0 : onLayoutFooter(rect, fromLayoutEffect);
+      });
     },
-    [ctx, horizontal, onLayoutFooter]
+    [horizontal, onLayoutFooter, updateFooterSize]
   );
   return /* @__PURE__ */ React2__namespace.createElement(
     SnapOrScroll,
@@ -2438,67 +2513,6 @@ function useDevChecksNoop(_props) {
 }
 var useDevChecks = IS_DEV ? useDevChecksImpl : useDevChecksNoop;
 
-// src/core/doMaintainScrollAtEnd.ts
-function doMaintainScrollAtEnd(ctx) {
-  const state = ctx.state;
-  const {
-    didContainersLayout,
-    pendingNativeMVCPAdjust,
-    refScroller,
-    props: { maintainScrollAtEnd }
-  } = state;
-  const isWithinMaintainScrollAtEndThreshold = peek$(ctx, "isWithinMaintainScrollAtEndThreshold");
-  const shouldMaintainScrollAtEnd = !!(isWithinMaintainScrollAtEndThreshold && maintainScrollAtEnd && didContainersLayout);
-  if (pendingNativeMVCPAdjust) {
-    state.pendingMaintainScrollAtEnd = shouldMaintainScrollAtEnd;
-    return false;
-  }
-  state.pendingMaintainScrollAtEnd = false;
-  if (shouldMaintainScrollAtEnd) {
-    const contentSize = getContentSize(ctx);
-    if (contentSize < state.scrollLength) {
-      state.scroll = 0;
-    }
-    if (!state.maintainingScrollAtEnd) {
-      const pendingState = maintainScrollAtEnd.animated ? "pending-animated" : "pending-instant";
-      const activeState = maintainScrollAtEnd.animated ? "animated" : "instant";
-      state.maintainingScrollAtEnd = pendingState;
-      requestAnimationFrame(() => {
-        if (peek$(ctx, "isWithinMaintainScrollAtEndThreshold")) {
-          state.maintainingScrollAtEnd = activeState;
-          const scroller = refScroller.current;
-          if (state.props.horizontal && isHorizontalRTL(state)) {
-            const currentContentSize = getContentSize(ctx);
-            const logicalEndOffset = getLogicalHorizontalMaxOffset(state, currentContentSize);
-            const nativeOffset = toNativeHorizontalOffset(state, logicalEndOffset, currentContentSize);
-            scroller == null ? void 0 : scroller.scrollTo({
-              animated: maintainScrollAtEnd.animated,
-              x: nativeOffset,
-              y: 0
-            });
-          } else {
-            scroller == null ? void 0 : scroller.scrollToEnd({
-              animated: maintainScrollAtEnd.animated
-            });
-          }
-          setTimeout(
-            () => {
-              if (state.maintainingScrollAtEnd === activeState) {
-                state.maintainingScrollAtEnd = void 0;
-              }
-            },
-            maintainScrollAtEnd.animated ? 500 : 0
-          );
-        } else if (state.maintainingScrollAtEnd === pendingState) {
-          state.maintainingScrollAtEnd = void 0;
-        }
-      });
-    }
-    return true;
-  }
-  return false;
-}
-
 // src/core/mvcp.ts
 var MVCP_POSITION_EPSILON = 0.1;
 var MVCP_ANCHOR_LOCK_TTL_MS = 300;
@@ -6210,12 +6224,13 @@ function getRenderedItem(ctx, key) {
 
 // src/utils/normalizeMaintainScrollAtEnd.ts
 function normalizeMaintainScrollAtEndOn(on, hasExplicitOn) {
-  var _a3, _b, _c;
+  var _a3, _b, _c, _d;
   return {
     animated: false,
     onDataChange: hasExplicitOn ? (_a3 = on == null ? void 0 : on.dataChange) != null ? _a3 : false : true,
-    onItemLayout: hasExplicitOn ? (_b = on == null ? void 0 : on.itemLayout) != null ? _b : false : true,
-    onLayout: hasExplicitOn ? (_c = on == null ? void 0 : on.layout) != null ? _c : false : true
+    onFooterLayout: hasExplicitOn ? (_b = on == null ? void 0 : on.footerLayout) != null ? _b : false : true,
+    onItemLayout: hasExplicitOn ? (_c = on == null ? void 0 : on.itemLayout) != null ? _c : false : true,
+    onLayout: hasExplicitOn ? (_d = on == null ? void 0 : on.layout) != null ? _d : false : true
   };
 }
 function normalizeMaintainScrollAtEnd(value) {

package/react-native.mjs

@@ -1196,6 +1196,67 @@ function WebAnchoredEndSpace({ horizontal }) {
   return /* @__PURE__ */ React2.createElement("div", { style }, null);
 }
 
+// src/core/doMaintainScrollAtEnd.ts
+function doMaintainScrollAtEnd(ctx) {
+  const state = ctx.state;
+  const {
+    didContainersLayout,
+    pendingNativeMVCPAdjust,
+    refScroller,
+    props: { maintainScrollAtEnd }
+  } = state;
+  const isWithinMaintainScrollAtEndThreshold = peek$(ctx, "isWithinMaintainScrollAtEndThreshold");
+  const shouldMaintainScrollAtEnd = !!(isWithinMaintainScrollAtEndThreshold && maintainScrollAtEnd && didContainersLayout);
+  if (pendingNativeMVCPAdjust) {
+    state.pendingMaintainScrollAtEnd = shouldMaintainScrollAtEnd;
+    return false;
+  }
+  state.pendingMaintainScrollAtEnd = false;
+  if (shouldMaintainScrollAtEnd) {
+    const contentSize = getContentSize(ctx);
+    if (contentSize < state.scrollLength) {
+      state.scroll = 0;
+    }
+    if (!state.maintainingScrollAtEnd) {
+      const pendingState = maintainScrollAtEnd.animated ? "pending-animated" : "pending-instant";
+      const activeState = maintainScrollAtEnd.animated ? "animated" : "instant";
+      state.maintainingScrollAtEnd = pendingState;
+      requestAnimationFrame(() => {
+        if (peek$(ctx, "isWithinMaintainScrollAtEndThreshold")) {
+          state.maintainingScrollAtEnd = activeState;
+          const scroller = refScroller.current;
+          if (state.props.horizontal && isHorizontalRTL(state)) {
+            const currentContentSize = getContentSize(ctx);
+            const logicalEndOffset = getLogicalHorizontalMaxOffset(state, currentContentSize);
+            const nativeOffset = toNativeHorizontalOffset(state, logicalEndOffset, currentContentSize);
+            scroller == null ? void 0 : scroller.scrollTo({
+              animated: maintainScrollAtEnd.animated,
+              x: nativeOffset,
+              y: 0
+            });
+          } else {
+            scroller == null ? void 0 : scroller.scrollToEnd({
+              animated: maintainScrollAtEnd.animated
+            });
+          }
+          setTimeout(
+            () => {
+              if (state.maintainingScrollAtEnd === activeState) {
+                state.maintainingScrollAtEnd = void 0;
+              }
+            },
+            maintainScrollAtEnd.animated ? 500 : 0
+          );
+        } else if (state.maintainingScrollAtEnd === pendingState) {
+          state.maintainingScrollAtEnd = void 0;
+        }
+      });
+    }
+    return true;
+  }
+  return false;
+}
+
 // src/core/calculateOffsetForIndex.ts
 function calculateOffsetForIndex(ctx, index) {
   const state = ctx.state;
@@ -2163,10 +2224,12 @@ function requestAdjust(ctx, positionDiff, dataChanged) {
 // src/core/updateContentMetrics.ts
 var SCROLL_ADJUST_EPSILON = 0.1;
 function setContentLengthSignal(ctx, signalName, size) {
-  if (peek$(ctx, signalName) !== size) {
+  const didChange = peek$(ctx, signalName) !== size;
+  if (didChange) {
     set$(ctx, signalName, size);
     updateContentMetricsState(ctx);
   }
+  return didChange;
 }
 function shouldAdjustForHeaderSizeChange(ctx, previousHeaderSize, nextHeaderSize) {
   const { didContainersLayout, didFinishInitialScroll, props, scroll, scrollingTo } = ctx.state;
@@ -2190,7 +2253,7 @@ function setHeaderSize(ctx, size) {
   state.didMeasureHeader = true;
 }
 function setFooterSize(ctx, size) {
-  setContentLengthSignal(ctx, "footerSize", size);
+  return setContentLengthSignal(ctx, "footerSize", size);
 }
 function areInsetsEqual(left, right) {
   var _a3, _b, _c, _d, _e, _f, _g, _h;
@@ -2291,14 +2354,25 @@ var ListComponent = typedMemo(function ListComponent2({
   );
   const ScrollComponent = renderScrollComponent ? CustomScrollComponent : ListComponentScrollView;
   const SnapOrScroll = snapToIndices ? SnapWrapper : ScrollComponent;
+  const updateFooterSize = useCallback(
+    (size, afterSizeUpdate) => {
+      var _a3;
+      const didFooterSizeChange = setFooterSize(ctx, size);
+      afterSizeUpdate == null ? void 0 : afterSizeUpdate();
+      if (didFooterSizeChange && ((_a3 = ctx.state.props.maintainScrollAtEnd) == null ? void 0 : _a3.onFooterLayout)) {
+        doMaintainScrollAtEnd(ctx);
+      }
+    },
+    [ctx]
+  );
   useLayoutEffect(() => {
     if (!ListHeaderComponent) {
       setHeaderSize(ctx, 0);
     }
     if (!ListFooterComponent) {
-      setFooterSize(ctx, 0);
+      updateFooterSize(0);
     }
-  }, [ListHeaderComponent, ListFooterComponent, ctx]);
+  }, [ListHeaderComponent, ListFooterComponent, ctx, updateFooterSize]);
   const onLayoutHeader = useCallback(
     (rect) => {
       const size = rect[horizontal ? "width" : "height"];
@@ -2309,10 +2383,11 @@ var ListComponent = typedMemo(function ListComponent2({
   const onLayoutFooterInternal = useCallback(
     (rect, fromLayoutEffect) => {
       const size = rect[horizontal ? "width" : "height"];
-      setFooterSize(ctx, size);
-      onLayoutFooter == null ? void 0 : onLayoutFooter(rect, fromLayoutEffect);
+      updateFooterSize(size, () => {
+        onLayoutFooter == null ? void 0 : onLayoutFooter(rect, fromLayoutEffect);
+      });
     },
-    [ctx, horizontal, onLayoutFooter]
+    [horizontal, onLayoutFooter, updateFooterSize]
   );
   return /* @__PURE__ */ React2.createElement(
     SnapOrScroll,
@@ -2417,67 +2492,6 @@ function useDevChecksNoop(_props) {
 }
 var useDevChecks = IS_DEV ? useDevChecksImpl : useDevChecksNoop;
 
-// src/core/doMaintainScrollAtEnd.ts
-function doMaintainScrollAtEnd(ctx) {
-  const state = ctx.state;
-  const {
-    didContainersLayout,
-    pendingNativeMVCPAdjust,
-    refScroller,
-    props: { maintainScrollAtEnd }
-  } = state;
-  const isWithinMaintainScrollAtEndThreshold = peek$(ctx, "isWithinMaintainScrollAtEndThreshold");
-  const shouldMaintainScrollAtEnd = !!(isWithinMaintainScrollAtEndThreshold && maintainScrollAtEnd && didContainersLayout);
-  if (pendingNativeMVCPAdjust) {
-    state.pendingMaintainScrollAtEnd = shouldMaintainScrollAtEnd;
-    return false;
-  }
-  state.pendingMaintainScrollAtEnd = false;
-  if (shouldMaintainScrollAtEnd) {
-    const contentSize = getContentSize(ctx);
-    if (contentSize < state.scrollLength) {
-      state.scroll = 0;
-    }
-    if (!state.maintainingScrollAtEnd) {
-      const pendingState = maintainScrollAtEnd.animated ? "pending-animated" : "pending-instant";
-      const activeState = maintainScrollAtEnd.animated ? "animated" : "instant";
-      state.maintainingScrollAtEnd = pendingState;
-      requestAnimationFrame(() => {
-        if (peek$(ctx, "isWithinMaintainScrollAtEndThreshold")) {
-          state.maintainingScrollAtEnd = activeState;
-          const scroller = refScroller.current;
-          if (state.props.horizontal && isHorizontalRTL(state)) {
-            const currentContentSize = getContentSize(ctx);
-            const logicalEndOffset = getLogicalHorizontalMaxOffset(state, currentContentSize);
-            const nativeOffset = toNativeHorizontalOffset(state, logicalEndOffset, currentContentSize);
-            scroller == null ? void 0 : scroller.scrollTo({
-              animated: maintainScrollAtEnd.animated,
-              x: nativeOffset,
-              y: 0
-            });
-          } else {
-            scroller == null ? void 0 : scroller.scrollToEnd({
-              animated: maintainScrollAtEnd.animated
-            });
-          }
-          setTimeout(
-            () => {
-              if (state.maintainingScrollAtEnd === activeState) {
-                state.maintainingScrollAtEnd = void 0;
-              }
-            },
-            maintainScrollAtEnd.animated ? 500 : 0
-          );
-        } else if (state.maintainingScrollAtEnd === pendingState) {
-          state.maintainingScrollAtEnd = void 0;
-        }
-      });
-    }
-    return true;
-  }
-  return false;
-}
-
 // src/core/mvcp.ts
 var MVCP_POSITION_EPSILON = 0.1;
 var MVCP_ANCHOR_LOCK_TTL_MS = 300;
@@ -6189,12 +6203,13 @@ function getRenderedItem(ctx, key) {
 
 // src/utils/normalizeMaintainScrollAtEnd.ts
 function normalizeMaintainScrollAtEndOn(on, hasExplicitOn) {
-  var _a3, _b, _c;
+  var _a3, _b, _c, _d;
   return {
     animated: false,
     onDataChange: hasExplicitOn ? (_a3 = on == null ? void 0 : on.dataChange) != null ? _a3 : false : true,
-    onItemLayout: hasExplicitOn ? (_b = on == null ? void 0 : on.itemLayout) != null ? _b : false : true,
-    onLayout: hasExplicitOn ? (_c = on == null ? void 0 : on.layout) != null ? _c : false : true
+    onFooterLayout: hasExplicitOn ? (_b = on == null ? void 0 : on.footerLayout) != null ? _b : false : true,
+    onItemLayout: hasExplicitOn ? (_c = on == null ? void 0 : on.itemLayout) != null ? _c : false : true,
+    onLayout: hasExplicitOn ? (_d = on == null ? void 0 : on.layout) != null ? _d : false : true
   };
 }
 function normalizeMaintainScrollAtEnd(value) {

package/react-native.web.d.ts

@@ -483,6 +483,7 @@ interface AlwaysRenderConfig {
 }
 interface MaintainScrollAtEndOnOptions {
     dataChange?: boolean;
+    footerLayout?: boolean;
     itemLayout?: boolean;
     layout?: boolean;
 }