@legendapp/list 3.0.0-beta.8 → 3.0.0

package/keyboard.d.ts

@@ -1,13 +1,265 @@
 import * as React from 'react';
-import { Insets } from 'react-native';
-import { ReanimatedScrollEvent } from 'react-native-reanimated/lib/typescript/hook/commonTypes';
-import { LegendListRef } from '@legendapp/list';
+import { ScrollViewComponent, ScrollResponderMixin, Insets as Insets$1, ScrollViewProps, View, LayoutChangeEvent } from 'react-native';
+import { KeyboardChatScrollViewProps } from 'react-native-keyboard-controller';
+import { SharedValue } from 'react-native-reanimated';
 import { AnimatedLegendListProps } from '@legendapp/list/reanimated';
 
-declare const KeyboardAvoidingLegendList: <ItemT>(props: Omit<AnimatedLegendListProps<ItemT>, "onScroll" | "contentInset"> & {
-    onScroll?: (event: ReanimatedScrollEvent) => void;
-    contentInset?: Insets;
-    safeAreaInsetBottom?: number;
-} & React.RefAttributes<LegendListRef>) => React.ReactNode;
+interface MaintainVisibleContentPositionNormalized<ItemT = any> {
+    data: boolean;
+    size: boolean;
+    shouldRestorePosition?: (item: ItemT, index: number, data: readonly ItemT[]) => boolean;
+}
 
-export { KeyboardAvoidingLegendList, KeyboardAvoidingLegendList as LegendList };
+type ListenerType = "activeStickyIndex" | "anchoredEndSpaceSize" | "debugComputedScroll" | "debugRawScroll" | "extraData" | "footerSize" | "headerSize" | "lastItemKeys" | "lastPositionUpdate" | "maintainVisibleContentPosition" | "numColumns" | "numContainers" | "numContainersPooled" | "otherAxisSize" | "readyToRender" | "scrollAdjust" | "scrollAdjustPending" | "scrollAdjustUserOffset" | "scrollSize" | "snapToOffsets" | "stylePaddingTop" | "totalSize" | "isAtEnd" | "isAtStart" | "isNearEnd" | "isNearStart" | "isWithinMaintainScrollAtEndThreshold" | `containerColumn${number}` | `containerSpan${number}` | `containerItemData${number}` | `containerItemKey${number}` | `containerPosition${number}` | `containerSticky${number}`;
+type LegendListListenerType = Extract<ListenerType, "activeStickyIndex" | "anchoredEndSpaceSize" | "footerSize" | "headerSize" | "isAtEnd" | "isAtStart" | "isNearEnd" | "isNearStart" | "isWithinMaintainScrollAtEndThreshold" | "lastItemKeys" | "lastPositionUpdate" | "numContainers" | "numContainersPooled" | "otherAxisSize" | "readyToRender" | "snapToOffsets" | "totalSize">;
+type ListenerTypeValueMap = {
+    activeStickyIndex: number;
+    anchoredEndSpaceSize: number;
+    animatedScrollY: any;
+    debugComputedScroll: number;
+    debugRawScroll: number;
+    extraData: any;
+    footerSize: number;
+    headerSize: number;
+    isAtEnd: boolean;
+    isAtStart: boolean;
+    isNearEnd: boolean;
+    isNearStart: boolean;
+    isWithinMaintainScrollAtEndThreshold: boolean;
+    lastItemKeys: string[];
+    lastPositionUpdate: number;
+    maintainVisibleContentPosition: MaintainVisibleContentPositionNormalized;
+    numColumns: number;
+    numContainers: number;
+    numContainersPooled: number;
+    otherAxisSize: number;
+    readyToRender: boolean;
+    scrollAdjust: number;
+    scrollAdjustPending: number;
+    scrollAdjustUserOffset: number;
+    scrollSize: {
+        width: number;
+        height: number;
+    };
+    snapToOffsets: number[];
+    stylePaddingTop: number;
+    totalSize: number;
+} & {
+    [K in ListenerType as K extends `containerItemKey${number}` ? K : never]: string;
+} & {
+    [K in ListenerType as K extends `containerItemData${number}` ? K : never]: any;
+} & {
+    [K in ListenerType as K extends `containerPosition${number}` ? K : never]: number;
+} & {
+    [K in ListenerType as K extends `containerColumn${number}` ? K : never]: number;
+} & {
+    [K in ListenerType as K extends `containerSpan${number}` ? K : never]: number;
+} & {
+    [K in ListenerType as K extends `containerSticky${number}` ? K : never]: boolean;
+};
+
+interface Insets {
+    top: number;
+    left: number;
+    bottom: number;
+    right: number;
+}
+interface AnchoredEndSpaceConfig$1 {
+    anchorIndex: number;
+    anchorOffset?: number;
+    anchorMaxSize?: number;
+    includeInEndInset?: boolean;
+    onSizeChanged?: (size: number) => void;
+}
+interface LegendListAverageItemSize {
+    average: number;
+    count: number;
+}
+type LegendListState = {
+    activeStickyIndex: number;
+    contentLength: number;
+    data: readonly any[];
+    elementAtIndex: (index: number) => any;
+    end: number;
+    endBuffered: number;
+    isAtEnd: boolean;
+    isAtStart: boolean;
+    isNearEnd: boolean;
+    isNearStart: boolean;
+    isEndReached: boolean;
+    isStartReached: boolean;
+    isWithinMaintainScrollAtEndThreshold: boolean;
+    getAverageItemSizes: () => Record<string, LegendListAverageItemSize>;
+    listen: <T extends LegendListListenerType>(listenerType: T, callback: (value: ListenerTypeValueMap[T]) => void) => () => void;
+    listenToPosition: (key: string, callback: (value: number) => void) => () => void;
+    positionAtIndex: (index: number) => number;
+    positionByKey: (key: string) => number | undefined;
+    scroll: number;
+    scrollLength: number;
+    scrollVelocity: number;
+    sizeAtIndex: (index: number) => number;
+    sizes: Map<string, number>;
+    start: number;
+    startBuffered: number;
+};
+type LegendListRef$1 = {
+    /**
+     * Displays the scroll indicators momentarily.
+     */
+    flashScrollIndicators(): void;
+    /**
+     * Returns the native ScrollView component reference.
+     */
+    getNativeScrollRef(): any;
+    /**
+     * Returns the scroll responder instance for handling scroll events.
+     */
+    getScrollableNode(): any;
+    /**
+     * Returns the ScrollResponderMixin for advanced scroll handling.
+     */
+    getScrollResponder(): any;
+    /**
+     * Returns the internal state of the scroll virtualization.
+     */
+    getState(): LegendListState;
+    /**
+     * Scrolls a specific index into view.
+     * @param params - Parameters for scrolling.
+     * @param params.animated - If true, animates the scroll. Default: true.
+     * @param params.index - The index to scroll to.
+     */
+    scrollIndexIntoView(params: {
+        animated?: boolean | undefined;
+        index: number;
+    }): Promise<void>;
+    /**
+     * Scrolls a specific index into view.
+     * @param params - Parameters for scrolling.
+     * @param params.animated - If true, animates the scroll. Default: true.
+     * @param params.item - The item to scroll to.
+     */
+    scrollItemIntoView(params: {
+        animated?: boolean | undefined;
+        item: any;
+    }): Promise<void>;
+    /**
+     * Scrolls to the end of the list.
+     * @param options - Options for scrolling.
+     * @param options.animated - If true, animates the scroll. Default: true.
+     * @param options.viewOffset - Offset from the target position.
+     */
+    scrollToEnd(options?: {
+        animated?: boolean | undefined;
+        viewOffset?: number | undefined;
+    }): Promise<void>;
+    /**
+     * Scrolls to a specific index in the list.
+     * @param params - Parameters for scrolling.
+     * @param params.animated - If true, animates the scroll. Default: true.
+     * @param params.index - The index to scroll to.
+     * @param params.viewOffset - Offset from the target position.
+     * @param params.viewPosition - Position of the item in the viewport (0 to 1).
+     */
+    scrollToIndex(params: {
+        animated?: boolean | undefined;
+        index: number;
+        viewOffset?: number | undefined;
+        viewPosition?: number | undefined;
+    }): Promise<void>;
+    /**
+     * Scrolls to a specific item in the list.
+     * @param params - Parameters for scrolling.
+     * @param params.animated - If true, animates the scroll. Default: true.
+     * @param params.item - The item to scroll to.
+     * @param params.viewOffset - Offset from the target position.
+     * @param params.viewPosition - Position of the item in the viewport (0 to 1).
+     */
+    scrollToItem(params: {
+        animated?: boolean | undefined;
+        item: any;
+        viewOffset?: number | undefined;
+        viewPosition?: number | undefined;
+    }): Promise<void>;
+    /**
+     * Scrolls to a specific offset in pixels.
+     * @param params - Parameters for scrolling.
+     * @param params.offset - The pixel offset to scroll to.
+     * @param params.animated - If true, animates the scroll. Default: true.
+     */
+    scrollToOffset(params: {
+        offset: number;
+        animated?: boolean | undefined;
+    }): Promise<void>;
+    /**
+     * Sets or adds to the offset of the visible content anchor.
+     * @param value - The offset to set or add.
+     * @param animated - If true, uses Animated to animate the change.
+     */
+    setVisibleContentAnchorOffset(value: number | ((val: number) => number)): void;
+    /**
+     * Sets whether scroll processing is enabled.
+     * @param enabled - If true, scroll processing is enabled.
+     */
+    setScrollProcessingEnabled(enabled: boolean): void;
+    /**
+     * Clears internal virtualization caches.
+     * @param options - Cache clearing options.
+     * @param options.mode - `sizes` clears measurement caches. `full` also clears key/position caches.
+     */
+    clearCaches(options?: {
+        mode?: "sizes" | "full";
+    }): void;
+    /**
+     * Reports an externally measured content inset. Pass null/undefined to clear.
+     * Values are merged on top of props/animated/native insets.
+     */
+    reportContentInset(inset?: Partial<Insets> | null): void;
+};
+
+interface AnchoredEndSpaceConfig extends Omit<AnchoredEndSpaceConfig$1, "includeInEndInset"> {
+}
+
+type LegendListRef = Omit<LegendListRef$1, "getNativeScrollRef" | "getScrollResponder" | "reportContentInset"> & {
+    getNativeScrollRef(): React.ElementRef<typeof ScrollViewComponent>;
+    getScrollResponder(): ScrollResponderMixin;
+    reportContentInset(inset?: Partial<Insets$1> | null): void;
+};
+
+type KeyboardChatScrollViewPropsUnique = Omit<KeyboardChatScrollViewProps, keyof ScrollViewProps | "inverted" | "ScrollViewComponent" | "blankSpace" | "extraContentPadding" | "onContentInsetChange" | "offset">;
+type ScrollMessageToEndOptions = {
+    animated: boolean;
+    closeKeyboard: boolean;
+};
+type KeyboardScrollToEndListRef = {
+    current: {
+        scrollToEnd(params?: {
+            animated?: boolean;
+        }): Promise<void>;
+    } | null;
+};
+type UseKeyboardScrollToEndOptions = {
+    freeze?: SharedValue<boolean>;
+    listRef: KeyboardScrollToEndListRef;
+};
+type KeyboardChatComposerInsetListRef = {
+    current: Pick<LegendListRef, "reportContentInset"> | null;
+};
+type KeyboardChatComposerRef = {
+    current: Pick<View, "measure"> | null;
+};
+declare function useKeyboardChatComposerInset(listRef: KeyboardChatComposerInsetListRef, composerRef: KeyboardChatComposerRef, initialHeight?: number): {
+    contentInsetEndAdjustment: SharedValue<number>;
+    onComposerLayout: (event: LayoutChangeEvent) => void;
+};
+declare function useKeyboardScrollToEnd({ freeze: freezeProp, listRef }: UseKeyboardScrollToEndOptions): {
+    freeze: SharedValue<boolean>;
+    scrollMessageToEnd: ({ animated, closeKeyboard }: ScrollMessageToEndOptions) => Promise<void>;
+};
+declare const KeyboardAwareLegendList: <ItemT>(props: Omit<AnimatedLegendListProps<ItemT>, "anchoredEndSpace" | "contentInsetEndAdjustment" | "renderScrollComponent"> & KeyboardChatScrollViewPropsUnique & {
+    anchoredEndSpace?: AnchoredEndSpaceConfig;
+    contentInsetEndAdjustment?: SharedValue<number>;
+    keyboardOffset?: number;
+} & React.RefAttributes<LegendListRef>) => React.ReactElement | null;
+
+export { KeyboardAwareLegendList, useKeyboardChatComposerInset, useKeyboardScrollToEnd };

package/keyboard.js

@@ -1,9 +1,9 @@
 'use strict';
 
 var React = require('react');
-var reactNative = require('react-native');
 var reactNativeKeyboardController = require('react-native-keyboard-controller');
 var reactNativeReanimated = require('react-native-reanimated');
+var reactNative = require('@legendapp/list/react-native');
 var reanimated = require('@legendapp/list/reanimated');
 
 function _interopNamespace(e) {
@@ -27,156 +27,135 @@ function _interopNamespace(e) {
 var React__namespace = /*#__PURE__*/_interopNamespace(React);
 
 // src/integrations/keyboard.tsx
-
-// src/utils/helpers.ts
-function isFunction(obj) {
-  return typeof obj === "function";
+var { typedForwardRef, useCombinedRef } = reactNative.internal;
+if (typeof __DEV__ !== "undefined" && __DEV__ && !reactNativeKeyboardController.KeyboardChatScrollView) {
+  console.warn(
+    "[legend-list] KeyboardAwareLegendList requires a recent react-native-keyboard-controller with KeyboardChatScrollView. Please upgrade react-native-keyboard-controller to at least 1.21.7."
+  );
 }
-
-// src/hooks/useCombinedRef.ts
-var useCombinedRef = (...refs) => {
-  const callback = React.useCallback((element) => {
-    for (const ref of refs) {
-      if (!ref) {
-        continue;
+function useKeyboardChatComposerInset(listRef, composerRef, initialHeight = 0) {
+  const contentInsetEndAdjustment = reactNativeReanimated.useSharedValue(initialHeight);
+  const lastHeightRef = React.useRef(void 0);
+  const reportHeight = React.useCallback(
+    (height) => {
+      var _a;
+      if (Number.isFinite(height) && height !== lastHeightRef.current) {
+        lastHeightRef.current = height;
+        contentInsetEndAdjustment.value = height;
+        (_a = listRef.current) == null ? void 0 : _a.reportContentInset({ bottom: height });
       }
-      if (isFunction(ref)) {
-        ref(element);
-      } else {
-        ref.current = element;
+    },
+    [contentInsetEndAdjustment, listRef]
+  );
+  React.useLayoutEffect(() => {
+    var _a;
+    (_a = composerRef.current) == null ? void 0 : _a.measure((_x, _y, _width, height) => {
+      reportHeight(height);
+    });
+  }, [composerRef, reportHeight]);
+  const onComposerLayout = React.useCallback(
+    (event) => {
+      reportHeight(event.nativeEvent.layout.height);
+    },
+    [reportHeight]
+  );
+  return { contentInsetEndAdjustment, onComposerLayout };
+}
+function useKeyboardScrollToEnd({ freeze: freezeProp, listRef }) {
+  const internalFreeze = reactNativeReanimated.useSharedValue(false);
+  const freeze = freezeProp != null ? freezeProp : internalFreeze;
+  const scrollMessageToEnd = React.useCallback(
+    async ({ animated, closeKeyboard }) => {
+      const listRefCurrent = listRef.current;
+      if (listRefCurrent) {
+        freeze.set(true);
+        const dismissPromise = closeKeyboard && reactNativeKeyboardController.KeyboardController.dismiss();
+        const scrollPromise = listRefCurrent.scrollToEnd({ animated });
+        await Promise.all([scrollPromise, dismissPromise]);
+        freeze.set(false);
       }
-    }
-  }, refs);
-  return callback;
-};
-
-// src/integrations/keyboard.tsx
-var KeyboardAvoidingLegendList = React.forwardRef(function KeyboardAvoidingLegendList2(props, forwardedRef) {
+    },
+    [freeze, listRef]
+  );
+  return {
+    freeze,
+    scrollMessageToEnd
+  };
+}
+var KeyboardAwareLegendList = typedForwardRef(function KeyboardAwareLegendList2(props, forwardedRef) {
   const {
-    contentInset: contentInsetProp,
-    horizontal,
-    onScroll: onScrollProp,
-    safeAreaInsetBottom = 0,
+    anchoredEndSpace,
+    applyWorkaroundForContentInsetHitTestBug,
+    contentInsetEndAdjustment,
+    freeze,
+    keyboardLiftBehavior,
+    keyboardOffset,
     ...rest
   } = props;
   const refLegendList = React.useRef(null);
   const combinedRef = useCombinedRef(forwardedRef, refLegendList);
-  const scrollViewRef = reactNativeReanimated.useAnimatedRef();
-  const scrollOffsetY = reactNativeReanimated.useSharedValue(0);
-  const animatedOffsetY = reactNativeReanimated.useSharedValue(null);
-  const scrollOffsetAtKeyboardStart = reactNativeReanimated.useSharedValue(0);
-  const keyboardInset = reactNativeReanimated.useSharedValue(0);
-  const keyboardHeight = reactNativeReanimated.useSharedValue(0);
-  const isOpening = reactNativeReanimated.useSharedValue(false);
-  const didInteractive = reactNativeReanimated.useSharedValue(false);
-  const scrollHandler = reactNativeReanimated.useAnimatedScrollHandler(
-    (event) => {
-      scrollOffsetY.value = event.contentOffset[horizontal ? "x" : "y"];
-      if (onScrollProp) {
-        reactNativeReanimated.runOnJS(onScrollProp)(event);
+  const blankSpace = reactNativeReanimated.useSharedValue(0);
+  React.useEffect(() => {
+    if (!anchoredEndSpace) {
+      blankSpace.value = 0;
+    }
+  }, [anchoredEndSpace, blankSpace]);
+  const anchoredEndSpaceWithBlankSpace = React.useMemo(() => {
+    if (!anchoredEndSpace) {
+      return void 0;
+    }
+    return {
+      ...anchoredEndSpace,
+      includeInEndInset: true,
+      onSizeChanged: (size) => {
+        var _a;
+        blankSpace.value = size;
+        (_a = anchoredEndSpace.onSizeChanged) == null ? void 0 : _a.call(anchoredEndSpace, size);
       }
-    },
-    [onScrollProp, horizontal]
-  );
-  const setScrollProcessingEnabled = React.useCallback(
-    (enabled) => {
-      var _a;
-      (_a = refLegendList.current) == null ? void 0 : _a.setScrollProcessingEnabled(enabled);
-    },
-    [refLegendList]
-  );
-  reactNativeKeyboardController.useKeyboardHandler(
-    // biome-ignore assist/source/useSortedKeys: prefer start/move/end
-    {
-      onStart: (event) => {
-        "worklet";
-        if (!didInteractive.get()) {
-          if (event.height > 0) {
-            keyboardHeight.set(event.height - safeAreaInsetBottom);
-          }
-          isOpening.set(event.progress > 0);
-          scrollOffsetAtKeyboardStart.value = scrollOffsetY.value;
-          animatedOffsetY.set(scrollOffsetY.value);
-          reactNativeReanimated.runOnJS(setScrollProcessingEnabled)(false);
-        }
-      },
-      onInteractive: () => {
-        "worklet";
-        if (!didInteractive.get()) {
-          didInteractive.set(true);
-        }
-      },
-      onMove: (event) => {
-        "worklet";
-        if (!didInteractive.get()) {
-          const vIsOpening = isOpening.get();
-          const vKeyboardHeight = keyboardHeight.get();
-          const vProgress = vIsOpening ? event.progress : 1 - event.progress;
-          const targetOffset = scrollOffsetAtKeyboardStart.value + (vIsOpening ? vKeyboardHeight : -vKeyboardHeight) * vProgress;
-          scrollOffsetY.value = targetOffset;
-          animatedOffsetY.set(targetOffset);
-          if (!horizontal) {
-            keyboardInset.value = Math.max(0, event.height - safeAreaInsetBottom);
-          }
-        }
-      },
-      onEnd: (event) => {
-        "worklet";
-        const wasInteractive = didInteractive.get();
-        if (wasInteractive && event.progress === 0 && event.target > 0) {
-          return;
-        }
-        if (!wasInteractive) {
-          const vIsOpening = isOpening.get();
-          const vKeyboardHeight = keyboardHeight.get();
-          const targetOffset = scrollOffsetAtKeyboardStart.value + (vIsOpening ? vKeyboardHeight : -vKeyboardHeight) * (vIsOpening ? event.progress : 1 - event.progress);
-          scrollOffsetY.value = targetOffset;
-          animatedOffsetY.set(targetOffset);
-          reactNativeReanimated.runOnJS(setScrollProcessingEnabled)(true);
-        }
-        didInteractive.set(false);
-        if (!horizontal) {
-          keyboardInset.value = Math.max(0, event.height - safeAreaInsetBottom);
+    };
+  }, [anchoredEndSpace, blankSpace]);
+  const onContentInsetChange = React.useCallback((insets) => {
+    var _a;
+    (_a = refLegendList.current) == null ? void 0 : _a.reportContentInset(insets);
+  }, []);
+  const memoList = React.useCallback(
+    (scrollProps) => {
+      return /* @__PURE__ */ React__namespace.createElement(
+        reactNativeKeyboardController.KeyboardChatScrollView,
+        {
+          ...scrollProps,
+          applyWorkaroundForContentInsetHitTestBug,
+          blankSpace,
+          extraContentPadding: contentInsetEndAdjustment,
+          freeze,
+          keyboardLiftBehavior,
+          offset: keyboardOffset,
+          onContentInsetChange
         }
-      }
+      );
     },
-    [scrollViewRef, safeAreaInsetBottom]
+    [
+      applyWorkaroundForContentInsetHitTestBug,
+      blankSpace,
+      contentInsetEndAdjustment,
+      freeze,
+      keyboardLiftBehavior,
+      keyboardOffset,
+      onContentInsetChange
+    ]
   );
-  const animatedProps = reactNativeReanimated.useAnimatedProps(() => {
-    "worklet";
-    var _a, _b, _c, _d;
-    const baseProps = {
-      contentOffset: animatedOffsetY.value === null ? void 0 : {
-        x: 0,
-        y: animatedOffsetY.value
-      }
-    };
-    return reactNative.Platform.OS === "ios" ? Object.assign(baseProps, {
-      contentInset: {
-        bottom: ((_a = contentInsetProp == null ? void 0 : contentInsetProp.bottom) != null ? _a : 0) + (horizontal ? 0 : keyboardInset.value),
-        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
-      }
-    }) : baseProps;
-  });
-  const style = reactNative.Platform.OS !== "ios" ? reactNativeReanimated.useAnimatedStyle(() => ({
-    marginBottom: keyboardInset.value
-  })) : void 0;
+  const AnimatedLegendListInternal = reanimated.AnimatedLegendList;
   return /* @__PURE__ */ React__namespace.createElement(
-    reanimated.AnimatedLegendList,
+    AnimatedLegendListInternal,
     {
-      ...rest,
-      animatedProps,
-      keyboardDismissMode: "interactive",
-      onScroll: scrollHandler,
+      anchoredEndSpace: anchoredEndSpaceWithBlankSpace,
       ref: combinedRef,
-      refScrollView: scrollViewRef,
-      scrollIndicatorInsets: { bottom: 0, top: 0 },
-      style
+      renderScrollComponent: memoList,
+      ...rest
     }
   );
 });
 
-exports.KeyboardAvoidingLegendList = KeyboardAvoidingLegendList;
-exports.LegendList = KeyboardAvoidingLegendList;
+exports.KeyboardAwareLegendList = KeyboardAwareLegendList;
+exports.useKeyboardChatComposerInset = useKeyboardChatComposerInset;
+exports.useKeyboardScrollToEnd = useKeyboardScrollToEnd;