@legendapp/list 3.0.0-beta.33 → 3.0.0-beta.35

package/reanimated.d.ts

@@ -228,6 +228,11 @@ interface LegendListSpecificProps<ItemT, TItemType extends string | undefined> {
      * - true enables both behaviors; false disables both.
      */
     maintainVisibleContentPosition?: boolean | MaintainVisibleContentPositionConfig<ItemT>;
+    /**
+     * Web only: when true, listens to window/body scrolling instead of rendering a scrollable list container.
+     * @default false
+     */
+    useWindowScroll?: boolean;
     /**
      * Number of columns to render items in.
      * @default 1
@@ -416,7 +421,7 @@ type LegendListState = {
     listen: <T extends LegendListListenerType>(listenerType: T, callback: (value: ListenerTypeValueMap[T]) => void) => () => void;
     listenToPosition: (key: string, callback: (value: number) => void) => () => void;
     positionAtIndex: (index: number) => number;
-    positions: Map<string, number>;
+    positionByKey: (key: string) => number | undefined;
     scroll: number;
     scrollLength: number;
     scrollVelocity: number;
@@ -455,7 +460,7 @@ type LegendListRef$1 = {
     scrollIndexIntoView(params: {
         animated?: boolean | undefined;
         index: number;
-    }): void;
+    }): Promise<void>;
     /**
      * Scrolls a specific index into view.
      * @param params - Parameters for scrolling.
@@ -465,7 +470,7 @@ type LegendListRef$1 = {
     scrollItemIntoView(params: {
         animated?: boolean | undefined;
         item: any;
-    }): void;
+    }): Promise<void>;
     /**
      * Scrolls to the end of the list.
      * @param options - Options for scrolling.
@@ -475,7 +480,7 @@ type LegendListRef$1 = {
     scrollToEnd(options?: {
         animated?: boolean | undefined;
         viewOffset?: number | undefined;
-    }): void;
+    }): Promise<void>;
     /**
      * Scrolls to a specific index in the list.
      * @param params - Parameters for scrolling.
@@ -489,7 +494,7 @@ type LegendListRef$1 = {
         index: number;
         viewOffset?: number | undefined;
         viewPosition?: number | undefined;
-    }): void;
+    }): Promise<void>;
     /**
      * Scrolls to a specific item in the list.
      * @param params - Parameters for scrolling.
@@ -503,7 +508,7 @@ type LegendListRef$1 = {
         item: any;
         viewOffset?: number | undefined;
         viewPosition?: number | undefined;
-    }): void;
+    }): Promise<void>;
     /**
      * Scrolls to a specific offset in pixels.
      * @param params - Parameters for scrolling.
@@ -513,7 +518,7 @@ type LegendListRef$1 = {
     scrollToOffset(params: {
         offset: number;
         animated?: boolean | undefined;
-    }): void;
+    }): Promise<void>;
     /**
      * Sets or adds to the offset of the visible content anchor.
      * @param value - The offset to set or add.
@@ -595,6 +600,11 @@ type KeysToOmit = "animatedProps" | "getEstimatedItemSize" | "getFixedItemSize"
 type PropsBase<ItemT> = LegendListPropsBase<ItemT, ComponentProps<typeof Reanimated.ScrollView>>;
 interface AnimatedLegendListPropsBase<ItemT> extends Omit<PropsBase<ItemT>, KeysToOmit> {
     refScrollView?: React$1.Ref<Reanimated.ScrollView>;
+    /**
+     * Reanimated layout transition applied to each item container position view.
+     * Example: `LinearTransition.duration(280)`.
+     */
+    itemLayoutAnimation?: ComponentProps<typeof Reanimated.View>["layout"];
 }
 type OtherAnimatedLegendListProps<ItemT> = Pick<PropsBase<ItemT>, KeysToOmit>;
 type AnimatedLegendListProps<ItemT> = Omit<AnimatedLegendListPropsBase<ItemT>, "refLegendList" | "ref"> & OtherAnimatedLegendListProps<ItemT>;

package/reanimated.js

@@ -171,10 +171,19 @@ var ReanimatedPositionViewSticky = typedMemo(function ReanimatedPositionViewStic
   );
   return /* @__PURE__ */ React3__namespace.createElement(Reanimated__default.default.View, { ref: refView, style: viewStyle, ...rest }, /* @__PURE__ */ React3__namespace.createElement(StickyOverlay, { stickyHeaderConfig }), children);
 });
+var ReanimatedPositionView = typedMemo(function ReanimatedPositionViewComponent(props) {
+  const { id, horizontal, style, refView, children, layoutTransition, ...rest } = props;
+  const [positionValue = POSITION_OUT_OF_VIEW] = useArr$([`containerPosition${id}`]);
+  const viewStyle = React3__namespace.useMemo(
+    () => [style, horizontal ? { left: positionValue } : { top: positionValue }],
+    [horizontal, positionValue, style]
+  );
+  return /* @__PURE__ */ React3__namespace.createElement(Reanimated__default.default.View, { layout: layoutTransition, ref: refView, style: viewStyle, ...rest }, children);
+});
 var LegendListForwardedRef = typedMemo(
   // biome-ignore lint/nursery/noShadow: const function name shadowing is intentional
   React3__namespace.forwardRef(function LegendListForwardedRef2(props, ref) {
-    const { refLegendList, ...rest } = props;
+    const { itemLayoutAnimation, refLegendList, ...rest } = props;
     const refFn = React3.useCallback(
       (r) => {
         refLegendList(r);
@@ -203,11 +212,25 @@ var LegendListForwardedRef = typedMemo(
       },
       [stickyScrollOffset]
     );
-    const legendListProps = shouldUseReanimatedScrollView ? {
+    const itemLayoutAnimationRef = React3__namespace.useRef(itemLayoutAnimation);
+    itemLayoutAnimationRef.current = itemLayoutAnimation;
+    const hasItemLayoutAnimation = !!itemLayoutAnimation;
+    const positionComponentInternal = React3__namespace.useMemo(() => {
+      if (!hasItemLayoutAnimation) {
+        return void 0;
+      }
+      return function PositionComponent(positionProps) {
+        return /* @__PURE__ */ React3__namespace.createElement(ReanimatedPositionView, { ...positionProps, layoutTransition: itemLayoutAnimationRef.current });
+      };
+    }, [hasItemLayoutAnimation]);
+    const legendListProps = {
       ...rest,
-      renderScrollComponent: renderReanimatedScrollComponent,
-      stickyPositionComponentInternal
-    } : rest;
+      positionComponentInternal,
+      ...shouldUseReanimatedScrollView ? {
+        renderScrollComponent: renderReanimatedScrollComponent,
+        stickyPositionComponentInternal
+      } : {}
+    };
     return /* @__PURE__ */ React3__namespace.createElement(reactNative$1.LegendList, { ref: refFn, refScrollView: ref, ...legendListProps });
   })
 );

package/reanimated.mjs

@@ -147,10 +147,19 @@ var ReanimatedPositionViewSticky = typedMemo(function ReanimatedPositionViewStic
   );
   return /* @__PURE__ */ React3.createElement(Reanimated.View, { ref: refView, style: viewStyle, ...rest }, /* @__PURE__ */ React3.createElement(StickyOverlay, { stickyHeaderConfig }), children);
 });
+var ReanimatedPositionView = typedMemo(function ReanimatedPositionViewComponent(props) {
+  const { id, horizontal, style, refView, children, layoutTransition, ...rest } = props;
+  const [positionValue = POSITION_OUT_OF_VIEW] = useArr$([`containerPosition${id}`]);
+  const viewStyle = React3.useMemo(
+    () => [style, horizontal ? { left: positionValue } : { top: positionValue }],
+    [horizontal, positionValue, style]
+  );
+  return /* @__PURE__ */ React3.createElement(Reanimated.View, { layout: layoutTransition, ref: refView, style: viewStyle, ...rest }, children);
+});
 var LegendListForwardedRef = typedMemo(
   // biome-ignore lint/nursery/noShadow: const function name shadowing is intentional
   React3.forwardRef(function LegendListForwardedRef2(props, ref) {
-    const { refLegendList, ...rest } = props;
+    const { itemLayoutAnimation, refLegendList, ...rest } = props;
     const refFn = useCallback(
       (r) => {
         refLegendList(r);
@@ -179,11 +188,25 @@ var LegendListForwardedRef = typedMemo(
       },
       [stickyScrollOffset]
     );
-    const legendListProps = shouldUseReanimatedScrollView ? {
+    const itemLayoutAnimationRef = React3.useRef(itemLayoutAnimation);
+    itemLayoutAnimationRef.current = itemLayoutAnimation;
+    const hasItemLayoutAnimation = !!itemLayoutAnimation;
+    const positionComponentInternal = React3.useMemo(() => {
+      if (!hasItemLayoutAnimation) {
+        return void 0;
+      }
+      return function PositionComponent(positionProps) {
+        return /* @__PURE__ */ React3.createElement(ReanimatedPositionView, { ...positionProps, layoutTransition: itemLayoutAnimationRef.current });
+      };
+    }, [hasItemLayoutAnimation]);
+    const legendListProps = {
       ...rest,
-      renderScrollComponent: renderReanimatedScrollComponent,
-      stickyPositionComponentInternal
-    } : rest;
+      positionComponentInternal,
+      ...shouldUseReanimatedScrollView ? {
+        renderScrollComponent: renderReanimatedScrollComponent,
+        stickyPositionComponentInternal
+      } : {}
+    };
     return /* @__PURE__ */ React3.createElement(LegendList, { ref: refFn, refScrollView: ref, ...legendListProps });
   })
 );

package/section-list.d.ts

@@ -284,6 +284,11 @@ interface LegendListSpecificProps<ItemT, TItemType extends string | undefined> {
      * - true enables both behaviors; false disables both.
      */
     maintainVisibleContentPosition?: boolean | MaintainVisibleContentPositionConfig<ItemT>;
+    /**
+     * Web only: when true, listens to window/body scrolling instead of rendering a scrollable list container.
+     * @default false
+     */
+    useWindowScroll?: boolean;
     /**
      * Number of columns to render items in.
      * @default 1
@@ -472,7 +477,7 @@ type LegendListState = {
     listen: <T extends LegendListListenerType>(listenerType: T, callback: (value: ListenerTypeValueMap[T]) => void) => () => void;
     listenToPosition: (key: string, callback: (value: number) => void) => () => void;
     positionAtIndex: (index: number) => number;
-    positions: Map<string, number>;
+    positionByKey: (key: string) => number | undefined;
     scroll: number;
     scrollLength: number;
     scrollVelocity: number;
@@ -511,7 +516,7 @@ type LegendListRef$1 = {
     scrollIndexIntoView(params: {
         animated?: boolean | undefined;
         index: number;
-    }): void;
+    }): Promise<void>;
     /**
      * Scrolls a specific index into view.
      * @param params - Parameters for scrolling.
@@ -521,7 +526,7 @@ type LegendListRef$1 = {
     scrollItemIntoView(params: {
         animated?: boolean | undefined;
         item: any;
-    }): void;
+    }): Promise<void>;
     /**
      * Scrolls to the end of the list.
      * @param options - Options for scrolling.
@@ -531,7 +536,7 @@ type LegendListRef$1 = {
     scrollToEnd(options?: {
         animated?: boolean | undefined;
         viewOffset?: number | undefined;
-    }): void;
+    }): Promise<void>;
     /**
      * Scrolls to a specific index in the list.
      * @param params - Parameters for scrolling.
@@ -545,7 +550,7 @@ type LegendListRef$1 = {
         index: number;
         viewOffset?: number | undefined;
         viewPosition?: number | undefined;
-    }): void;
+    }): Promise<void>;
     /**
      * Scrolls to a specific item in the list.
      * @param params - Parameters for scrolling.
@@ -559,7 +564,7 @@ type LegendListRef$1 = {
         item: any;
         viewOffset?: number | undefined;
         viewPosition?: number | undefined;
-    }): void;
+    }): Promise<void>;
     /**
      * Scrolls to a specific offset in pixels.
      * @param params - Parameters for scrolling.
@@ -569,7 +574,7 @@ type LegendListRef$1 = {
     scrollToOffset(params: {
         offset: number;
         animated?: boolean | undefined;
-    }): void;
+    }): Promise<void>;
     /**
      * Sets or adds to the offset of the visible content anchor.
      * @param value - The offset to set or add.