@legendapp/list 3.0.0-beta.21 → 3.0.0-beta.23

package/index.native.mjs

@@ -10,7 +10,7 @@ var Text = Text$1;
 
 // src/state/getContentInsetEnd.ts
 function getContentInsetEnd(state) {
-  var _a3;
+  var _a3, _b;
   const { props } = state;
   const horizontal = props.horizontal;
   let contentInset = props.contentInset;
@@ -24,7 +24,16 @@ function getContentInsetEnd(state) {
       }
     }
   }
-  return (horizontal ? contentInset == null ? void 0 : contentInset.right : contentInset == null ? void 0 : contentInset.bottom) || 0;
+  const baseInset = contentInset != null ? contentInset : state.nativeContentInset;
+  const overrideInset = (_b = state.contentInsetOverride) != null ? _b : void 0;
+  if (overrideInset) {
+    const mergedInset = { top: 0, left: 0, right: 0, bottom: 0, ...baseInset, ...overrideInset };
+    return (horizontal ? mergedInset.right : mergedInset.bottom) || 0;
+  }
+  if (baseInset) {
+    return (horizontal ? baseInset.right : baseInset.bottom) || 0;
+  }
+  return 0;
 }
 
 // src/state/getContentSize.ts
@@ -3006,7 +3015,7 @@ function handleLayout(ctx, layout, setCanRender) {
 
 // src/core/onScroll.ts
 function onScroll(ctx, event) {
-  var _a3, _b, _c;
+  var _a3, _b, _c, _d;
   const state = ctx.state;
   const {
     scrollProcessingEnabled,
@@ -3018,6 +3027,15 @@ function onScroll(ctx, event) {
   if (((_b = (_a3 = event.nativeEvent) == null ? void 0 : _a3.contentSize) == null ? void 0 : _b.height) === 0 && ((_c = event.nativeEvent.contentSize) == null ? void 0 : _c.width) === 0) {
     return;
   }
+  let insetChanged = false;
+  if ((_d = event.nativeEvent) == null ? void 0 : _d.contentInset) {
+    const { contentInset } = event.nativeEvent;
+    const prevInset = state.nativeContentInset;
+    if (!prevInset || prevInset.top !== contentInset.top || prevInset.bottom !== contentInset.bottom || prevInset.left !== contentInset.left || prevInset.right !== contentInset.right) {
+      state.nativeContentInset = contentInset;
+      insetChanged = true;
+    }
+  }
   let newScroll = event.nativeEvent.contentOffset[state.props.horizontal ? "x" : "y"];
   if (state.scrollingTo) {
     const maxOffset = clampScrollOffset(ctx, newScroll);
@@ -3033,7 +3051,7 @@ function onScroll(ctx, event) {
     }
   }
   state.scrollPending = newScroll;
-  updateScroll(ctx, newScroll);
+  updateScroll(ctx, newScroll, insetChanged);
   if (state.scrollingTo) {
     checkFinishedScroll(ctx);
   }
@@ -3206,7 +3224,10 @@ function updateOneItemSize(ctx, itemKey, sizeObj) {
     if (!averages) {
       averages = averageSizes[itemType] = { avg: 0, num: 0 };
     }
-    if (prevSizeKnown !== void 0 && prevSizeKnown > 0) {
+    if (averages.num === 0) {
+      averages.avg = size;
+      averages.num++;
+    } else if (prevSizeKnown !== void 0 && prevSizeKnown > 0) {
       averages.avg += (size - prevSizeKnown) / averages.num;
     } else {
       averages.avg = (averages.avg * averages.num + size) / (averages.num + 1);
@@ -3310,7 +3331,7 @@ function createImperativeHandle(ctx) {
     getScrollResponder: () => refScroller.current.getScrollResponder(),
     getState: () => ({
       activeStickyIndex: peek$(ctx, "activeStickyIndex"),
-      contentLength: state.totalSize,
+      contentLength: getContentSize(ctx),
       data: state.props.data,
       elementAtIndex: (index) => {
         var _a3;
@@ -3326,6 +3347,7 @@ function createImperativeHandle(ctx) {
       positions: state.positions,
       scroll: state.scroll,
       scrollLength: state.scrollLength,
+      scrollVelocity: getScrollVelocity(state),
       sizeAtIndex: (index) => state.sizesKnown.get(getId(state, index)),
       sizes: state.sizesKnown,
       start: state.startNoBuffer,
@@ -3363,6 +3385,10 @@ function createImperativeHandle(ctx) {
       }
     },
     scrollToOffset: (params) => scrollTo(ctx, params),
+    reportContentInset: (inset) => {
+      state.contentInsetOverride = inset != null ? inset : void 0;
+      updateScroll(ctx, state.scroll, true);
+    },
     setScrollProcessingEnabled: (enabled) => {
       state.scrollProcessingEnabled = enabled;
     },
@@ -3607,7 +3633,14 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
     maintainVisibleContentPositionProp
   );
   const [renderNum, setRenderNum] = useState(0);
-  const initialScrollProp = initialScrollAtEnd ? { index: Math.max(0, dataProp.length - 1), viewOffset: -stylePaddingBottomState, viewPosition: 1 } : initialScrollIndexProp || initialScrollOffsetProp ? typeof initialScrollIndexProp === "object" ? { index: initialScrollIndexProp.index || 0, viewOffset: initialScrollIndexProp.viewOffset || 0 } : { index: initialScrollIndexProp || 0, viewOffset: initialScrollOffsetProp || 0 } : void 0;
+  const initialScrollProp = initialScrollAtEnd ? { index: Math.max(0, dataProp.length - 1), viewOffset: -stylePaddingBottomState, viewPosition: 1 } : initialScrollIndexProp || initialScrollOffsetProp ? typeof initialScrollIndexProp === "object" ? {
+    index: initialScrollIndexProp.index || 0,
+    viewOffset: initialScrollIndexProp.viewOffset || (initialScrollIndexProp.viewPosition === 1 ? -stylePaddingBottomState : 0),
+    viewPosition: initialScrollIndexProp.viewPosition || 0
+  } : {
+    index: initialScrollIndexProp || 0,
+    viewOffset: initialScrollOffsetProp || 0
+  } : void 0;
   const [canRender, setCanRender] = React2.useState(!IsNewArchitecture);
   const ctx = useStateContext();
   ctx.columnWrapperStyle = columnWrapperStyle || (contentContainerStyle ? createColumnWrapperStyle(contentContainerStyle) : void 0);
@@ -3645,6 +3678,7 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
         columns: /* @__PURE__ */ new Map(),
         containerItemKeys: /* @__PURE__ */ new Map(),
         containerItemTypes: /* @__PURE__ */ new Map(),
+        contentInsetOverride: void 0,
         dataChangeNeedsScrollUpdate: false,
         didColumnsChange: false,
         didDataChange: false,
@@ -3674,6 +3708,7 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
         lastScrollDelta: 0,
         loadStartTime: Date.now(),
         minIndexSizeChanged: 0,
+        nativeContentInset: void 0,
         nativeMarginTop: 0,
         positions: /* @__PURE__ */ new Map(),
         props: {},

package/keyboard.d.mts

@@ -4,13 +4,10 @@ import { ReanimatedScrollEvent } from 'react-native-reanimated/lib/typescript/ho
 import { LegendListRef } from '@legendapp/list';
 import { AnimatedLegendListProps } from '@legendapp/list/reanimated';
 
-declare const KeyboardAvoidingLegendList: <ItemT>(props: Omit<AnimatedLegendListProps<ItemT>, "onScroll" | "contentInset"> & {
+declare const KeyboardAvoidingLegendList: <ItemT>(props: Omit<AnimatedLegendListProps<ItemT>, "onScroll" | "automaticallyAdjustContentInsets" | "contentInset"> & {
     onScroll?: (event: ReanimatedScrollEvent) => void;
     contentInset?: Insets | undefined;
-    safeAreaInsets?: {
-        top: number;
-        bottom: number;
-    };
+    safeAreaInsetBottom?: number;
 } & React.RefAttributes<LegendListRef>) => React.ReactNode;
 
 export { KeyboardAvoidingLegendList, KeyboardAvoidingLegendList as LegendList };

package/keyboard.d.ts

@@ -4,13 +4,10 @@ import { ReanimatedScrollEvent } from 'react-native-reanimated/lib/typescript/ho
 import { LegendListRef } from '@legendapp/list';
 import { AnimatedLegendListProps } from '@legendapp/list/reanimated';
 
-declare const KeyboardAvoidingLegendList: <ItemT>(props: Omit<AnimatedLegendListProps<ItemT>, "onScroll" | "contentInset"> & {
+declare const KeyboardAvoidingLegendList: <ItemT>(props: Omit<AnimatedLegendListProps<ItemT>, "onScroll" | "automaticallyAdjustContentInsets" | "contentInset"> & {
     onScroll?: (event: ReanimatedScrollEvent) => void;
     contentInset?: Insets | undefined;
-    safeAreaInsets?: {
-        top: number;
-        bottom: number;
-    };
+    safeAreaInsetBottom?: number;
 } & React.RefAttributes<LegendListRef>) => React.ReactNode;
 
 export { KeyboardAvoidingLegendList, KeyboardAvoidingLegendList as LegendList };

package/keyboard.js

@@ -28,9 +28,6 @@ var React__namespace = /*#__PURE__*/_interopNamespace(React);
 
 // src/integrations/keyboard.tsx
 
-// src/constants-platform.ts
-var IsNewArchitecture = true;
-
 // src/utils/helpers.ts
 function isFunction(obj) {
   return typeof obj === "function";
@@ -58,17 +55,18 @@ var clampProgress = (progress) => {
   "worklet";
   return Math.min(1, Math.max(0, progress));
 };
-var calculateKeyboardInset = (height, safeAreaInsetBottom, isNewArchitecture) => {
-  "worklet";
-  return Math.max(0, height - safeAreaInsetBottom) ;
-};
-var calculateEndPaddingInset = (keyboardHeight, alignItemsAtEndPadding) => {
+var calculateKeyboardInset = (height, safeAreaInsetBottom) => {
   "worklet";
-  return Math.min(keyboardHeight, alignItemsAtEndPadding);
+  return Math.max(0, height - safeAreaInsetBottom);
 };
-var calculateTopInset = (safeAreaInsetTop, isNewArchitecture, extraTopInset) => {
+var calculateEffectiveKeyboardHeight = (keyboardHeight, contentLength, scrollLength, alignItemsAtEnd) => {
   "worklet";
-  return (isNewArchitecture ? 0 : safeAreaInsetTop * 2) + extraTopInset;
+  if (alignItemsAtEnd) {
+    return keyboardHeight;
+  } else {
+    const availableSpace = Math.max(0, scrollLength - contentLength);
+    return Math.max(0, keyboardHeight - availableSpace);
+  }
 };
 var calculateKeyboardTargetOffset = (startOffset, keyboardHeight, isOpening, progress) => {
   "worklet";
@@ -82,10 +80,11 @@ var KeyboardAvoidingLegendList = React.forwardRef(function KeyboardAvoidingLegen
     horizontal,
     onMetricsChange: onMetricsChangeProp,
     onScroll: onScrollProp,
-    safeAreaInsets = { bottom: 0, top: 0 },
+    safeAreaInsetBottom = 0,
     style: styleProp,
     ...rest
   } = props;
+  const { alignItemsAtEnd } = props;
   const styleFlattened = reactNative.StyleSheet.flatten(styleProp);
   const refLegendList = React.useRef(null);
   const combinedRef = useCombinedRef(forwardedRef, refLegendList);
@@ -96,16 +95,19 @@ var KeyboardAvoidingLegendList = React.forwardRef(function KeyboardAvoidingLegen
   const animatedOffsetY = reactNativeReanimated.useSharedValue(null);
   const scrollOffsetAtKeyboardStart = reactNativeReanimated.useSharedValue(0);
   const mode = reactNativeReanimated.useSharedValue("idle");
-  const keyboardInset = reactNativeReanimated.useSharedValue({ bottom: 0, top: 0 });
+  const keyboardInset = reactNativeReanimated.useSharedValue(0);
   const keyboardHeight = reactNativeReanimated.useSharedValue(0);
+  const contentLength = reactNativeReanimated.useSharedValue(0);
+  const scrollLength = reactNativeReanimated.useSharedValue(0);
   const alignItemsAtEndPadding = reactNativeReanimated.useSharedValue(0);
   const isOpening = reactNativeReanimated.useSharedValue(false);
   const didInteractive = reactNativeReanimated.useSharedValue(false);
-  const { top: safeAreaInsetTop, bottom: safeAreaInsetBottom } = safeAreaInsets;
   const isKeyboardOpen = reactNativeReanimated.useSharedValue(false);
   const scrollHandler = reactNativeReanimated.useAnimatedScrollHandler(
     (event) => {
-      scrollOffsetY.set(event.contentOffset[horizontal ? "x" : "y"]);
+      if (mode.get() !== "running" || didInteractive.get()) {
+        scrollOffsetY.set(event.contentOffset[horizontal ? "x" : "y"]);
+      }
       if (onScrollProp) {
         reactNativeReanimated.runOnJS(onScrollProp)(event);
       }
@@ -119,36 +121,23 @@ var KeyboardAvoidingLegendList = React.forwardRef(function KeyboardAvoidingLegen
     },
     [refLegendList]
   );
+  const updateScrollMetrics = React.useCallback(() => {
+    var _a;
+    const state = (_a = refLegendList.current) == null ? void 0 : _a.getState();
+    if (!state) {
+      return;
+    }
+    contentLength.set(state.contentLength);
+    scrollLength.set(state.scrollLength);
+  }, [contentLength, scrollLength]);
   const handleMetricsChange = React.useCallback(
     (metrics) => {
+      updateScrollMetrics();
       const nextPadding = metrics.alignItemsAtEndPadding || 0;
       alignItemsAtEndPadding.set(nextPadding);
-      if (!horizontal) {
-        reactNativeReanimated.runOnUI((padding, safeInsetTop, isNewArchitecture) => {
-          "worklet";
-          if (!isKeyboardOpen.get()) {
-            return;
-          }
-          const vKeyboardHeight = keyboardHeight.get();
-          const vTopInset = calculateEndPaddingInset(vKeyboardHeight, padding);
-          const topInset = calculateTopInset(safeInsetTop, isNewArchitecture, vTopInset);
-          keyboardInset.set({
-            bottom: keyboardInset.get().bottom,
-            top: topInset
-          });
-        })(nextPadding, safeAreaInsetTop, IsNewArchitecture);
-      }
       onMetricsChangeProp == null ? void 0 : onMetricsChangeProp(metrics);
     },
-    [
-      alignItemsAtEndPadding,
-      horizontal,
-      isKeyboardOpen,
-      keyboardHeight,
-      keyboardInset,
-      onMetricsChangeProp,
-      safeAreaInsetTop
-    ]
+    [alignItemsAtEndPadding, onMetricsChangeProp, updateScrollMetrics]
   );
   reactNativeKeyboardController.useKeyboardHandler(
     // biome-ignore assist/source/useSortedKeys: prefer start/move/end
@@ -177,18 +166,11 @@ var KeyboardAvoidingLegendList = React.forwardRef(function KeyboardAvoidingLegen
         }
         mode.set("running");
         if (!didInteractive.get()) {
-          if (!isAndroid && !IsNewArchitecture) {
-            keyboardInset.set({
-              bottom: keyboardInset.get().bottom,
-              // Legacy iOS uses a doubled top inset to keep content below the status bar.
-              top: calculateTopInset(safeAreaInsetTop, IsNewArchitecture, 0)
-            });
-          }
           didInteractive.set(true);
         }
         if (isAndroid && !horizontal) {
           const newInset = calculateKeyboardInset(event.height, safeAreaInsetBottom);
-          keyboardInset.set({ bottom: newInset, top: safeAreaInsetTop * 2 });
+          keyboardInset.set(newInset);
         }
       },
       onMove: (event) => {
@@ -197,11 +179,15 @@ var KeyboardAvoidingLegendList = React.forwardRef(function KeyboardAvoidingLegen
           const progress = clampProgress(event.progress);
           const vIsOpening = isOpening.get();
           const vKeyboardHeight = keyboardHeight.get();
-          const vAlignItemsPadding = alignItemsAtEndPadding.get();
-          const vTopInset = calculateEndPaddingInset(vKeyboardHeight, vAlignItemsPadding);
+          const vEffectiveKeyboardHeight = calculateEffectiveKeyboardHeight(
+            vKeyboardHeight,
+            contentLength.get(),
+            scrollLength.get(),
+            alignItemsAtEnd
+          );
           const targetOffset = calculateKeyboardTargetOffset(
             scrollOffsetAtKeyboardStart.get(),
-            vKeyboardHeight,
+            vEffectiveKeyboardHeight,
             vIsOpening,
             progress
           );
@@ -209,16 +195,7 @@ var KeyboardAvoidingLegendList = React.forwardRef(function KeyboardAvoidingLegen
           animatedOffsetY.set(targetOffset);
           if (!horizontal) {
             const newInset = calculateKeyboardInset(event.height, safeAreaInsetBottom);
-            const topInset = calculateTopInset(
-              safeAreaInsetTop,
-              IsNewArchitecture,
-              vIsOpening ? vTopInset : 0
-            );
-            keyboardInset.set({
-              bottom: newInset,
-              // Add top padding only while opening to keep end-aligned items visible.
-              top: topInset
-            });
+            keyboardInset.set(newInset);
           }
         }
       },
@@ -230,13 +207,17 @@ var KeyboardAvoidingLegendList = React.forwardRef(function KeyboardAvoidingLegen
         if (vMode === "running") {
           const progress = clampProgress(event.progress);
           const vKeyboardHeight = keyboardHeight.get();
-          const vAlignItemsPadding = alignItemsAtEndPadding.get();
-          const vTopInset = calculateEndPaddingInset(vKeyboardHeight, vAlignItemsPadding);
+          const vEffectiveKeyboardHeight = calculateEffectiveKeyboardHeight(
+            vKeyboardHeight,
+            contentLength.get(),
+            scrollLength.get(),
+            alignItemsAtEnd
+          );
           const vIsOpening = isOpening.get();
           if (!wasInteractive) {
             const targetOffset = calculateKeyboardTargetOffset(
               scrollOffsetAtKeyboardStart.get(),
-              vKeyboardHeight,
+              vEffectiveKeyboardHeight,
               vIsOpening,
               progress
             );
@@ -248,16 +229,7 @@ var KeyboardAvoidingLegendList = React.forwardRef(function KeyboardAvoidingLegen
           isKeyboardOpen.set(event.height > 0);
           if (!horizontal) {
             const newInset = calculateKeyboardInset(event.height, safeAreaInsetBottom);
-            const topInset = calculateTopInset(
-              safeAreaInsetTop,
-              IsNewArchitecture,
-              event.height > 0 ? vTopInset : 0
-            );
-            keyboardInset.set({
-              bottom: newInset,
-              // Preserve end-aligned padding only while the keyboard is visible.
-              top: topInset
-            });
+            keyboardInset.set(newInset);
             if (newInset <= 0) {
               animatedOffsetY.set(scrollOffsetY.get());
             }
@@ -265,7 +237,7 @@ var KeyboardAvoidingLegendList = React.forwardRef(function KeyboardAvoidingLegen
         }
       }
     },
-    [scrollViewRef, safeAreaInsetBottom]
+    [alignItemsAtEnd, safeAreaInsetBottom, scrollViewRef]
   );
   const animatedProps = reactNativeReanimated.useAnimatedProps(() => {
     "worklet";
@@ -277,24 +249,21 @@ var KeyboardAvoidingLegendList = React.forwardRef(function KeyboardAvoidingLegen
         y: vAnimatedOffsetY
       }
     };
-    const { top: keyboardInsetTop, bottom: keyboardInsetBottom } = keyboardInset.get();
+    const keyboardInsetBottom = keyboardInset.get();
     return isIos ? Object.assign(baseProps, {
       contentInset: {
         bottom: ((_a = contentInsetProp == null ? void 0 : contentInsetProp.bottom) != null ? _a : 0) + (horizontal ? 0 : keyboardInsetBottom),
         left: (_b = contentInsetProp == null ? void 0 : contentInsetProp.left) != null ? _b : 0,
         right: (_c = contentInsetProp == null ? void 0 : contentInsetProp.right) != null ? _c : 0,
-        top: ((_d = contentInsetProp == null ? void 0 : contentInsetProp.top) != null ? _d : 0) - keyboardInsetTop
+        top: (_d = contentInsetProp == null ? void 0 : contentInsetProp.top) != null ? _d : 0
       }
     }) : baseProps;
   });
   const style = isAndroid ? reactNativeReanimated.useAnimatedStyle(
-    () => {
-      var _a;
-      return {
-        ...styleFlattened || {},
-        marginBottom: (_a = keyboardInset.get().bottom) != null ? _a : 0
-      };
-    },
+    () => ({
+      ...styleFlattened || {},
+      marginBottom: keyboardInset.get()
+    }),
     [styleProp, keyboardInset]
   ) : void 0;
   return /* @__PURE__ */ React__namespace.createElement(
@@ -302,6 +271,7 @@ var KeyboardAvoidingLegendList = React.forwardRef(function KeyboardAvoidingLegen
     {
       ...rest,
       animatedProps,
+      automaticallyAdjustContentInsets: false,
       keyboardDismissMode: "interactive",
       onMetricsChange: handleMetricsChange,
       onScroll: scrollHandler,