@legendapp/list 1.0.0-beta.14 → 1.0.0-beta.16

package/animated.d.mts

@@ -16,6 +16,7 @@ declare const AnimatedLegendList: Animated.AnimatedComponent<(<T>(props: Omit<re
     alignItemsAtEnd?: boolean;
     maintainVisibleContentPosition?: boolean;
     numColumns?: number;
+    columnWrapperStyle?: _legendapp_list.ColumnWrapperStyle;
     refScrollView?: React.Ref<react_native.ScrollView>;
     waitForInitialLayout?: boolean;
     estimatedItemSize?: number;

package/animated.d.ts

@@ -16,6 +16,7 @@ declare const AnimatedLegendList: Animated.AnimatedComponent<(<T>(props: Omit<re
     alignItemsAtEnd?: boolean;
     maintainVisibleContentPosition?: boolean;
     numColumns?: number;
+    columnWrapperStyle?: _legendapp_list.ColumnWrapperStyle;
     refScrollView?: React.Ref<react_native.ScrollView>;
     waitForInitialLayout?: boolean;
     estimatedItemSize?: number;

package/index.d.mts

@@ -31,6 +31,7 @@ type LegendListPropsBase<ItemT, TScrollView extends ComponentProps<typeof Scroll
     alignItemsAtEnd?: boolean;
     maintainVisibleContentPosition?: boolean;
     numColumns?: number;
+    columnWrapperStyle?: ColumnWrapperStyle;
     refScrollView?: React.Ref<ScrollView>;
     waitForInitialLayout?: boolean;
     estimatedItemSize?: number;
@@ -66,6 +67,11 @@ type LegendListPropsBase<ItemT, TScrollView extends ComponentProps<typeof Scroll
     renderScrollComponent?: (props: ScrollViewProps) => React.ReactElement<ScrollViewProps>;
     extraData?: any;
 };
+interface ColumnWrapperStyle {
+    rowGap?: number;
+    gap?: number;
+    columnGap?: number;
+}
 type AnchoredPosition = {
     type: "top" | "bottom";
     relativeCoordinate: number;
@@ -251,6 +257,7 @@ declare const LegendList: <T>(props: Omit<react_native.ScrollViewProps, "content
     alignItemsAtEnd?: boolean;
     maintainVisibleContentPosition?: boolean;
     numColumns?: number;
+    columnWrapperStyle?: ColumnWrapperStyle;
     refScrollView?: React$1.Ref<ScrollView>;
     waitForInitialLayout?: boolean;
     estimatedItemSize?: number;
@@ -288,4 +295,4 @@ declare function useViewabilityAmount(callback: ViewabilityAmountCallback): void
 declare function useRecyclingEffect(effect: (info: LegendListRecyclingState<unknown>) => void | (() => void)): void;
 declare function useRecyclingState(valueOrFun: ((info: LegendListRecyclingState<unknown>) => any) | any): [any, React$1.Dispatch<any>];
 
-export { type AnchoredPosition, type InternalState, LegendList, type LegendListProps, type LegendListPropsBase, type LegendListRecyclingState, type LegendListRef, type LegendListRenderItemProps, type OnViewableItemsChanged, type TypedForwardRef, type ViewAmountToken, type ViewToken, type ViewabilityAmountCallback, type ViewabilityCallback, type ViewabilityConfig, type ViewabilityConfigCallbackPair, type ViewabilityConfigCallbackPairs, type ViewableRange, typedForwardRef, useRecyclingEffect, useRecyclingState, useViewability, useViewabilityAmount };
+export { type AnchoredPosition, type ColumnWrapperStyle, type InternalState, LegendList, type LegendListProps, type LegendListPropsBase, type LegendListRecyclingState, type LegendListRef, type LegendListRenderItemProps, type OnViewableItemsChanged, type TypedForwardRef, type ViewAmountToken, type ViewToken, type ViewabilityAmountCallback, type ViewabilityCallback, type ViewabilityConfig, type ViewabilityConfigCallbackPair, type ViewabilityConfigCallbackPairs, type ViewableRange, typedForwardRef, useRecyclingEffect, useRecyclingState, useViewability, useViewabilityAmount };

package/index.d.ts

@@ -31,6 +31,7 @@ type LegendListPropsBase<ItemT, TScrollView extends ComponentProps<typeof Scroll
     alignItemsAtEnd?: boolean;
     maintainVisibleContentPosition?: boolean;
     numColumns?: number;
+    columnWrapperStyle?: ColumnWrapperStyle;
     refScrollView?: React.Ref<ScrollView>;
     waitForInitialLayout?: boolean;
     estimatedItemSize?: number;
@@ -66,6 +67,11 @@ type LegendListPropsBase<ItemT, TScrollView extends ComponentProps<typeof Scroll
     renderScrollComponent?: (props: ScrollViewProps) => React.ReactElement<ScrollViewProps>;
     extraData?: any;
 };
+interface ColumnWrapperStyle {
+    rowGap?: number;
+    gap?: number;
+    columnGap?: number;
+}
 type AnchoredPosition = {
     type: "top" | "bottom";
     relativeCoordinate: number;
@@ -251,6 +257,7 @@ declare const LegendList: <T>(props: Omit<react_native.ScrollViewProps, "content
     alignItemsAtEnd?: boolean;
     maintainVisibleContentPosition?: boolean;
     numColumns?: number;
+    columnWrapperStyle?: ColumnWrapperStyle;
     refScrollView?: React$1.Ref<ScrollView>;
     waitForInitialLayout?: boolean;
     estimatedItemSize?: number;
@@ -288,4 +295,4 @@ declare function useViewabilityAmount(callback: ViewabilityAmountCallback): void
 declare function useRecyclingEffect(effect: (info: LegendListRecyclingState<unknown>) => void | (() => void)): void;
 declare function useRecyclingState(valueOrFun: ((info: LegendListRecyclingState<unknown>) => any) | any): [any, React$1.Dispatch<any>];
 
-export { type AnchoredPosition, type InternalState, LegendList, type LegendListProps, type LegendListPropsBase, type LegendListRecyclingState, type LegendListRef, type LegendListRenderItemProps, type OnViewableItemsChanged, type TypedForwardRef, type ViewAmountToken, type ViewToken, type ViewabilityAmountCallback, type ViewabilityCallback, type ViewabilityConfig, type ViewabilityConfigCallbackPair, type ViewabilityConfigCallbackPairs, type ViewableRange, typedForwardRef, useRecyclingEffect, useRecyclingState, useViewability, useViewabilityAmount };
+export { type AnchoredPosition, type ColumnWrapperStyle, type InternalState, LegendList, type LegendListProps, type LegendListPropsBase, type LegendListRecyclingState, type LegendListRef, type LegendListRenderItemProps, type OnViewableItemsChanged, type TypedForwardRef, type ViewAmountToken, type ViewToken, type ViewabilityAmountCallback, type ViewabilityCallback, type ViewabilityConfig, type ViewabilityConfigCallbackPair, type ViewabilityConfigCallbackPairs, type ViewableRange, typedForwardRef, useRecyclingEffect, useRecyclingState, useViewability, useViewabilityAmount };

package/index.js

@@ -32,7 +32,8 @@ function StateProvider({ children }) {
     mapViewabilityCallbacks: /* @__PURE__ */ new Map(),
     mapViewabilityValues: /* @__PURE__ */ new Map(),
     mapViewabilityAmountCallbacks: /* @__PURE__ */ new Map(),
-    mapViewabilityAmountValues: /* @__PURE__ */ new Map()
+    mapViewabilityAmountValues: /* @__PURE__ */ new Map(),
+    columnWrapperStyle: void 0
   }));
   return /* @__PURE__ */ React6__namespace.createElement(ContextState.Provider, { value }, children);
 }
@@ -168,7 +169,7 @@ var DebugView = React6.memo(function DebugView2({ state }) {
   useInterval(() => {
     forceUpdate();
   }, 100);
-  return /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ React6__namespace.createElement(
     reactNative.View,
     {
       style: {
@@ -181,8 +182,8 @@ var DebugView = React6.memo(function DebugView2({ state }) {
         backgroundColor: "#FFFFFFCC"
       }
     },
-    /* @__PURE__ */ React.createElement(reactNative.Text, null, "PaddingTop: ", paddingTop),
-    /* @__PURE__ */ React.createElement(reactNative.Text, null, "At end: ", String(state.isAtBottom))
+    /* @__PURE__ */ React6__namespace.createElement(reactNative.Text, null, "PaddingTop: ", paddingTop),
+    /* @__PURE__ */ React6__namespace.createElement(reactNative.Text, null, "At end: ", String(state.isAtBottom))
   );
 });
 function useInterval(callback, delay) {
@@ -217,12 +218,24 @@ var Container = ({
   updateItemSize,
   ItemSeparatorComponent
 }) => {
+  const ctx = useStateContext();
+  const columnWrapperStyle = ctx.columnWrapperStyle;
   const maintainVisibleContentPosition = use$("maintainVisibleContentPosition");
   const position = use$(`containerPosition${id}`) || ANCHORED_POSITION_OUT_OF_VIEW;
   const column = use$(`containerColumn${id}`) || 0;
   const numColumns = use$("numColumns");
   const otherAxisPos = numColumns > 1 ? `${(column - 1) / numColumns * 100}%` : 0;
   const otherAxisSize = numColumns > 1 ? `${1 / numColumns * 100}%` : void 0;
+  let verticalPaddingStyles;
+  if (columnWrapperStyle && !horizontal && numColumns > 1) {
+    const { columnGap, rowGap, gap } = columnWrapperStyle;
+    verticalPaddingStyles = {
+      paddingVertical: rowGap || gap || void 0,
+      // Apply horizontal padding based on column position (first, middle, or last)
+      paddingLeft: column > 1 ? (columnGap || gap || 0) / 2 : void 0,
+      paddingRight: column < numColumns ? (columnGap || gap || 0) / 2 : void 0
+    };
+  }
   const style = horizontal ? {
     flexDirection: ItemSeparatorComponent ? "row" : void 0,
     position: "absolute",
@@ -235,7 +248,8 @@ var Container = ({
     left: otherAxisPos,
     right: numColumns > 1 ? null : 0,
     width: otherAxisSize,
-    top: position.relativeCoordinate
+    top: position.relativeCoordinate,
+    ...verticalPaddingStyles || {}
   };
   const lastItemKey = use$("lastItemKey");
   const itemKey = use$(`containerItemKey${id}`);
@@ -248,9 +262,17 @@ var Container = ({
   const { index, renderedItem } = renderedItemInfo || {};
   const onLayout = (event) => {
     if (itemKey !== void 0) {
-      const size = Math.floor(event.nativeEvent.layout[horizontal ? "width" : "height"] * 8) / 8;
+      const layout = event.nativeEvent.layout;
+      const size = Math.floor(layout[horizontal ? "width" : "height"] * 8) / 8;
       if (size === 0) {
-        console.log("[WARN] Container 0 height reported, possible bug in LegendList", id, itemKey);
+        if (layout.y !== POSITION_OUT_OF_VIEW && layout.y !== POSITION_OUT_OF_VIEW) {
+          console.log(
+            "[WARN] Container 0 height reported, possible bug in LegendList",
+            id,
+            itemKey,
+            event.nativeEvent
+          );
+        }
         return;
       }
       updateItemSize(id, itemKey, size);
@@ -286,9 +308,9 @@ var Container = ({
   }
   return /* @__PURE__ */ React6__namespace.default.createElement(LeanView, { style, onLayout, ref }, contentFragment);
 };
-var useAnimatedValue = reactNative.useAnimatedValue || ((initialValue) => {
+var useAnimatedValue = (initialValue) => {
   return React6.useRef(new reactNative.Animated.Value(initialValue)).current;
-});
+};
 
 // src/useValue$.ts
 function useValue$(key, getValue, useMicrotask) {
@@ -718,6 +740,7 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
     onScroll: onScrollProp,
     onMomentumScrollEnd,
     numColumns: numColumnsProp = 1,
+    columnWrapperStyle,
     keyExtractor: keyExtractorProp,
     renderItem,
     estimatedItemSize,
@@ -739,6 +762,7 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
   callbacks.current.onStartReached = rest.onStartReached;
   callbacks.current.onEndReached = rest.onEndReached;
   const ctx = useStateContext();
+  ctx.columnWrapperStyle = columnWrapperStyle;
   const refScroller = React6.useRef(null);
   const combinedRef = useCombinedRef(refScroller, refScrollView);
   const scrollBuffer = drawDistance != null ? drawDistance : DEFAULT_DRAW_DISTANCE;
@@ -1238,9 +1262,11 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
     if (!refState.current) {
       return;
     }
-    const { scrollLength, scroll, totalSize } = refState.current;
-    if (totalSize > 0) {
-      const distanceFromEnd = totalSize - scroll - scrollLength + (peek$(ctx, "paddingTop") || 0);
+    const { scrollLength, scroll, totalSize, hasScrolled } = refState.current;
+    if (totalSize > 0 && hasScrolled) {
+      const distanceFromEnd = Math.abs(
+        totalSize - scroll - scrollLength + (peek$(ctx, "paddingTop") || 0)
+      );
       if (refState.current) {
         refState.current.isAtBottom = distanceFromEnd < scrollLength * maintainScrollAtEndThreshold;
       }
@@ -1395,12 +1421,6 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
       refState.current.positions.clear();
     }
     refState.current.data = dataProp;
-    const indexByKey = /* @__PURE__ */ new Map();
-    for (let i = 0; i < dataProp.length; i++) {
-      const key = getId(i);
-      indexByKey.set(key, i);
-    }
-    refState.current.indexByKey = indexByKey;
     calcTotalSizesAndPositions({ forgetPositions: false });
   }
   React6.useEffect(() => {

package/index.mjs

@@ -1,6 +1,6 @@
 import * as React6 from 'react';
 import React6__default, { createContext, memo, useReducer, useEffect, useMemo, useRef, useCallback, useImperativeHandle, useSyncExternalStore, useContext, useState, forwardRef, useLayoutEffect } from 'react';
-import { View, Text, Platform, Animated, ScrollView, Dimensions, StyleSheet, useAnimatedValue as useAnimatedValue$1 } from 'react-native';
+import { View, Text, Platform, Animated, ScrollView, Dimensions, StyleSheet } from 'react-native';
 
 // src/LegendList.tsx
 var ContextState = React6.createContext(null);
@@ -11,7 +11,8 @@ function StateProvider({ children }) {
     mapViewabilityCallbacks: /* @__PURE__ */ new Map(),
     mapViewabilityValues: /* @__PURE__ */ new Map(),
     mapViewabilityAmountCallbacks: /* @__PURE__ */ new Map(),
-    mapViewabilityAmountValues: /* @__PURE__ */ new Map()
+    mapViewabilityAmountValues: /* @__PURE__ */ new Map(),
+    columnWrapperStyle: void 0
   }));
   return /* @__PURE__ */ React6.createElement(ContextState.Provider, { value }, children);
 }
@@ -147,7 +148,7 @@ var DebugView = memo(function DebugView2({ state }) {
   useInterval(() => {
     forceUpdate();
   }, 100);
-  return /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ React6.createElement(
     View,
     {
       style: {
@@ -160,8 +161,8 @@ var DebugView = memo(function DebugView2({ state }) {
         backgroundColor: "#FFFFFFCC"
       }
     },
-    /* @__PURE__ */ React.createElement(Text, null, "PaddingTop: ", paddingTop),
-    /* @__PURE__ */ React.createElement(Text, null, "At end: ", String(state.isAtBottom))
+    /* @__PURE__ */ React6.createElement(Text, null, "PaddingTop: ", paddingTop),
+    /* @__PURE__ */ React6.createElement(Text, null, "At end: ", String(state.isAtBottom))
   );
 });
 function useInterval(callback, delay) {
@@ -196,12 +197,24 @@ var Container = ({
   updateItemSize,
   ItemSeparatorComponent
 }) => {
+  const ctx = useStateContext();
+  const columnWrapperStyle = ctx.columnWrapperStyle;
   const maintainVisibleContentPosition = use$("maintainVisibleContentPosition");
   const position = use$(`containerPosition${id}`) || ANCHORED_POSITION_OUT_OF_VIEW;
   const column = use$(`containerColumn${id}`) || 0;
   const numColumns = use$("numColumns");
   const otherAxisPos = numColumns > 1 ? `${(column - 1) / numColumns * 100}%` : 0;
   const otherAxisSize = numColumns > 1 ? `${1 / numColumns * 100}%` : void 0;
+  let verticalPaddingStyles;
+  if (columnWrapperStyle && !horizontal && numColumns > 1) {
+    const { columnGap, rowGap, gap } = columnWrapperStyle;
+    verticalPaddingStyles = {
+      paddingVertical: rowGap || gap || void 0,
+      // Apply horizontal padding based on column position (first, middle, or last)
+      paddingLeft: column > 1 ? (columnGap || gap || 0) / 2 : void 0,
+      paddingRight: column < numColumns ? (columnGap || gap || 0) / 2 : void 0
+    };
+  }
   const style = horizontal ? {
     flexDirection: ItemSeparatorComponent ? "row" : void 0,
     position: "absolute",
@@ -214,7 +227,8 @@ var Container = ({
     left: otherAxisPos,
     right: numColumns > 1 ? null : 0,
     width: otherAxisSize,
-    top: position.relativeCoordinate
+    top: position.relativeCoordinate,
+    ...verticalPaddingStyles || {}
   };
   const lastItemKey = use$("lastItemKey");
   const itemKey = use$(`containerItemKey${id}`);
@@ -227,9 +241,17 @@ var Container = ({
   const { index, renderedItem } = renderedItemInfo || {};
   const onLayout = (event) => {
     if (itemKey !== void 0) {
-      const size = Math.floor(event.nativeEvent.layout[horizontal ? "width" : "height"] * 8) / 8;
+      const layout = event.nativeEvent.layout;
+      const size = Math.floor(layout[horizontal ? "width" : "height"] * 8) / 8;
       if (size === 0) {
-        console.log("[WARN] Container 0 height reported, possible bug in LegendList", id, itemKey);
+        if (layout.y !== POSITION_OUT_OF_VIEW && layout.y !== POSITION_OUT_OF_VIEW) {
+          console.log(
+            "[WARN] Container 0 height reported, possible bug in LegendList",
+            id,
+            itemKey,
+            event.nativeEvent
+          );
+        }
         return;
       }
       updateItemSize(id, itemKey, size);
@@ -265,9 +287,9 @@ var Container = ({
   }
   return /* @__PURE__ */ React6__default.createElement(LeanView, { style, onLayout, ref }, contentFragment);
 };
-var useAnimatedValue = useAnimatedValue$1 || ((initialValue) => {
+var useAnimatedValue = (initialValue) => {
   return useRef(new Animated.Value(initialValue)).current;
-});
+};
 
 // src/useValue$.ts
 function useValue$(key, getValue, useMicrotask) {
@@ -697,6 +719,7 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
     onScroll: onScrollProp,
     onMomentumScrollEnd,
     numColumns: numColumnsProp = 1,
+    columnWrapperStyle,
     keyExtractor: keyExtractorProp,
     renderItem,
     estimatedItemSize,
@@ -718,6 +741,7 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
   callbacks.current.onStartReached = rest.onStartReached;
   callbacks.current.onEndReached = rest.onEndReached;
   const ctx = useStateContext();
+  ctx.columnWrapperStyle = columnWrapperStyle;
   const refScroller = useRef(null);
   const combinedRef = useCombinedRef(refScroller, refScrollView);
   const scrollBuffer = drawDistance != null ? drawDistance : DEFAULT_DRAW_DISTANCE;
@@ -1217,9 +1241,11 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
     if (!refState.current) {
       return;
     }
-    const { scrollLength, scroll, totalSize } = refState.current;
-    if (totalSize > 0) {
-      const distanceFromEnd = totalSize - scroll - scrollLength + (peek$(ctx, "paddingTop") || 0);
+    const { scrollLength, scroll, totalSize, hasScrolled } = refState.current;
+    if (totalSize > 0 && hasScrolled) {
+      const distanceFromEnd = Math.abs(
+        totalSize - scroll - scrollLength + (peek$(ctx, "paddingTop") || 0)
+      );
       if (refState.current) {
         refState.current.isAtBottom = distanceFromEnd < scrollLength * maintainScrollAtEndThreshold;
       }
@@ -1374,12 +1400,6 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
       refState.current.positions.clear();
     }
     refState.current.data = dataProp;
-    const indexByKey = /* @__PURE__ */ new Map();
-    for (let i = 0; i < dataProp.length; i++) {
-      const key = getId(i);
-      indexByKey.set(key, i);
-    }
-    refState.current.indexByKey = indexByKey;
     calcTotalSizesAndPositions({ forgetPositions: false });
   }
   useEffect(() => {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@legendapp/list",
-  "version": "1.0.0-beta.14",
+  "version": "1.0.0-beta.16",
   "description": "Legend List aims to be a drop-in replacement for FlatList with much better performance and supporting dynamically sized items.",
   "sideEffects": false,
   "private": false,