@legendapp/list 3.1.0 → 3.1.2

package/react.js

@@ -1855,6 +1855,67 @@ function WebAnchoredEndSpace({ horizontal }) {
   return /* @__PURE__ */ React3__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/updateContentMetricsState.ts
 function getRawContentLength(ctx) {
   var _a3, _b, _c;
@@ -2269,8 +2330,11 @@ function updateAdaptiveRender(ctx, scrollVelocity) {
 // src/utils/getEffectiveDrawDistance.ts
 var INITIAL_DRAW_DISTANCE = 100;
 function getEffectiveDrawDistance(ctx) {
+  var _a3;
   const drawDistance = ctx.state.props.drawDistance;
-  return peek$(ctx, "readyToRender") ? drawDistance : Math.min(drawDistance, INITIAL_DRAW_DISTANCE);
+  const initialScroll = ctx.state.initialScroll;
+  const needsFullInitialDrawDistance = initialScroll !== void 0 && ((_a3 = initialScroll.viewPosition) != null ? _a3 : 0) > 0;
+  return peek$(ctx, "readyToRender") || needsFullInitialDrawDistance ? drawDistance : Math.min(drawDistance, INITIAL_DRAW_DISTANCE);
 }
 
 // src/utils/setInitialRenderState.ts
@@ -2522,10 +2586,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;
@@ -2549,7 +2615,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;
@@ -2643,14 +2709,25 @@ var ListComponent = typedMemo(function ListComponent2({
   );
   const ScrollComponent = renderScrollComponent ? CustomScrollComponent : ListComponentScrollView;
   const SnapOrScroll = snapToIndices ? SnapWrapper : ScrollComponent;
+  const updateFooterSize = React3.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]
+  );
   React3.useLayoutEffect(() => {
     if (!ListHeaderComponent) {
       setHeaderSize(ctx, 0);
     }
     if (!ListFooterComponent) {
-      setFooterSize(ctx, 0);
+      updateFooterSize(0);
     }
-  }, [ListHeaderComponent, ListFooterComponent, ctx]);
+  }, [ListHeaderComponent, ListFooterComponent, ctx, updateFooterSize]);
   const onLayoutHeader = React3.useCallback(
     (rect) => {
       const size = rect[horizontal ? "width" : "height"];
@@ -2661,10 +2738,11 @@ var ListComponent = typedMemo(function ListComponent2({
   const onLayoutFooterInternal = React3.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__ */ React3__namespace.createElement(
     SnapOrScroll,
@@ -2936,67 +3014,6 @@ function clampScrollOffset(ctx, offset, scrollTarget) {
   return clampedOffset;
 }
 
-// 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;
@@ -3237,6 +3254,9 @@ function prepareMVCP(ctx, dataChanged) {
             if (diff > 0) {
               diff = Math.max(0, totalSize - state.scroll - state.scrollLength);
             } else {
+              const maxScroll = Math.max(0, totalSize - state.scrollLength);
+              state.scroll = maxScroll;
+              state.scrollPending = maxScroll;
               diff = 0;
             }
           }
@@ -5584,7 +5604,7 @@ function calculateItemsInView(ctx, params = {}) {
     const scrollAdjustPendingBeforeMVCP = (_f = peek$(ctx, "scrollAdjustPending")) != null ? _f : 0;
     checkMVCP == null ? void 0 : checkMVCP();
     const didMVCPAdjustScroll = !!checkMVCP && (state.scroll !== scrollBeforeMVCP || ((_g = peek$(ctx, "scrollAdjustPending")) != null ? _g : 0) !== scrollAdjustPendingBeforeMVCP);
-    if (didMVCPAdjustScroll && initialScroll) {
+    if (didMVCPAdjustScroll && (initialScroll || state.scrollingTo)) {
       updateScroll2(state.scroll);
       updateScrollRange();
     }
@@ -6820,12 +6840,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.mjs

@@ -1834,6 +1834,67 @@ function WebAnchoredEndSpace({ horizontal }) {
   return /* @__PURE__ */ React3.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/updateContentMetricsState.ts
 function getRawContentLength(ctx) {
   var _a3, _b, _c;
@@ -2248,8 +2309,11 @@ function updateAdaptiveRender(ctx, scrollVelocity) {
 // src/utils/getEffectiveDrawDistance.ts
 var INITIAL_DRAW_DISTANCE = 100;
 function getEffectiveDrawDistance(ctx) {
+  var _a3;
   const drawDistance = ctx.state.props.drawDistance;
-  return peek$(ctx, "readyToRender") ? drawDistance : Math.min(drawDistance, INITIAL_DRAW_DISTANCE);
+  const initialScroll = ctx.state.initialScroll;
+  const needsFullInitialDrawDistance = initialScroll !== void 0 && ((_a3 = initialScroll.viewPosition) != null ? _a3 : 0) > 0;
+  return peek$(ctx, "readyToRender") || needsFullInitialDrawDistance ? drawDistance : Math.min(drawDistance, INITIAL_DRAW_DISTANCE);
 }
 
 // src/utils/setInitialRenderState.ts
@@ -2501,10 +2565,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;
@@ -2528,7 +2594,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;
@@ -2622,14 +2688,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"];
@@ -2640,10 +2717,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__ */ React3.createElement(
     SnapOrScroll,
@@ -2915,67 +2993,6 @@ function clampScrollOffset(ctx, offset, scrollTarget) {
   return clampedOffset;
 }
 
-// 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;
@@ -3216,6 +3233,9 @@ function prepareMVCP(ctx, dataChanged) {
             if (diff > 0) {
               diff = Math.max(0, totalSize - state.scroll - state.scrollLength);
             } else {
+              const maxScroll = Math.max(0, totalSize - state.scrollLength);
+              state.scroll = maxScroll;
+              state.scrollPending = maxScroll;
               diff = 0;
             }
           }
@@ -5563,7 +5583,7 @@ function calculateItemsInView(ctx, params = {}) {
     const scrollAdjustPendingBeforeMVCP = (_f = peek$(ctx, "scrollAdjustPending")) != null ? _f : 0;
     checkMVCP == null ? void 0 : checkMVCP();
     const didMVCPAdjustScroll = !!checkMVCP && (state.scroll !== scrollBeforeMVCP || ((_g = peek$(ctx, "scrollAdjustPending")) != null ? _g : 0) !== scrollAdjustPendingBeforeMVCP);
-    if (didMVCPAdjustScroll && initialScroll) {
+    if (didMVCPAdjustScroll && (initialScroll || state.scrollingTo)) {
       updateScroll2(state.scroll);
       updateScrollRange();
     }
@@ -6799,12 +6819,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/reanimated.d.ts

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

package/section-list.d.ts

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