@legendapp/list 3.0.0-beta.9 → 3.0.0

package/keyboard.mjs

@@ -1,160 +1,138 @@
 import * as React from 'react';
-import { forwardRef, useRef, useCallback } from 'react';
-import { Platform } from 'react-native';
-import { useKeyboardHandler } from 'react-native-keyboard-controller';
-import { useAnimatedRef, useSharedValue, useAnimatedScrollHandler, runOnJS, useAnimatedProps, useAnimatedStyle } from 'react-native-reanimated';
+import { useRef, useEffect, useMemo, useCallback, useLayoutEffect } from 'react';
+import { KeyboardChatScrollView, KeyboardController } from 'react-native-keyboard-controller';
+import { useSharedValue } from 'react-native-reanimated';
+import { internal } from '@legendapp/list/react-native';
 import { AnimatedLegendList } from '@legendapp/list/reanimated';
 
 // src/integrations/keyboard.tsx
-
-// src/utils/helpers.ts
-function isFunction(obj) {
-  return typeof obj === "function";
+var { typedForwardRef, useCombinedRef } = internal;
+if (typeof __DEV__ !== "undefined" && __DEV__ && !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 = useCallback((element) => {
-    for (const ref of refs) {
-      if (!ref) {
-        continue;
+function useKeyboardChatComposerInset(listRef, composerRef, initialHeight = 0) {
+  const contentInsetEndAdjustment = useSharedValue(initialHeight);
+  const lastHeightRef = useRef(void 0);
+  const reportHeight = 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]
+  );
+  useLayoutEffect(() => {
+    var _a;
+    (_a = composerRef.current) == null ? void 0 : _a.measure((_x, _y, _width, height) => {
+      reportHeight(height);
+    });
+  }, [composerRef, reportHeight]);
+  const onComposerLayout = useCallback(
+    (event) => {
+      reportHeight(event.nativeEvent.layout.height);
+    },
+    [reportHeight]
+  );
+  return { contentInsetEndAdjustment, onComposerLayout };
+}
+function useKeyboardScrollToEnd({ freeze: freezeProp, listRef }) {
+  const internalFreeze = useSharedValue(false);
+  const freeze = freezeProp != null ? freezeProp : internalFreeze;
+  const scrollMessageToEnd = useCallback(
+    async ({ animated, closeKeyboard }) => {
+      const listRefCurrent = listRef.current;
+      if (listRefCurrent) {
+        freeze.set(true);
+        const dismissPromise = closeKeyboard && KeyboardController.dismiss();
+        const scrollPromise = listRefCurrent.scrollToEnd({ animated });
+        await Promise.all([scrollPromise, dismissPromise]);
+        freeze.set(false);
       }
-    }
-  }, refs);
-  return callback;
-};
-
-// src/integrations/keyboard.tsx
-var KeyboardAvoidingLegendList = 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 = useRef(null);
   const combinedRef = useCombinedRef(forwardedRef, refLegendList);
-  const scrollViewRef = useAnimatedRef();
-  const scrollOffsetY = useSharedValue(0);
-  const animatedOffsetY = useSharedValue(null);
-  const scrollOffsetAtKeyboardStart = useSharedValue(0);
-  const keyboardInset = useSharedValue(0);
-  const keyboardHeight = useSharedValue(0);
-  const isOpening = useSharedValue(false);
-  const didInteractive = useSharedValue(false);
-  const scrollHandler = useAnimatedScrollHandler(
-    (event) => {
-      scrollOffsetY.value = event.contentOffset[horizontal ? "x" : "y"];
-      if (onScrollProp) {
-        runOnJS(onScrollProp)(event);
+  const blankSpace = useSharedValue(0);
+  useEffect(() => {
+    if (!anchoredEndSpace) {
+      blankSpace.value = 0;
+    }
+  }, [anchoredEndSpace, blankSpace]);
+  const anchoredEndSpaceWithBlankSpace = 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 = useCallback(
-    (enabled) => {
-      var _a;
-      (_a = refLegendList.current) == null ? void 0 : _a.setScrollProcessingEnabled(enabled);
-    },
-    [refLegendList]
-  );
-  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);
-          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);
-          runOnJS(setScrollProcessingEnabled)(true);
-        }
-        didInteractive.set(false);
-        if (!horizontal) {
-          keyboardInset.value = Math.max(0, event.height - safeAreaInsetBottom);
+    };
+  }, [anchoredEndSpace, blankSpace]);
+  const onContentInsetChange = useCallback((insets) => {
+    var _a;
+    (_a = refLegendList.current) == null ? void 0 : _a.reportContentInset(insets);
+  }, []);
+  const memoList = useCallback(
+    (scrollProps) => {
+      return /* @__PURE__ */ React.createElement(
+        KeyboardChatScrollView,
+        {
+          ...scrollProps,
+          applyWorkaroundForContentInsetHitTestBug,
+          blankSpace,
+          extraContentPadding: contentInsetEndAdjustment,
+          freeze,
+          keyboardLiftBehavior,
+          offset: keyboardOffset,
+          onContentInsetChange
         }
-      }
+      );
     },
-    [scrollViewRef, safeAreaInsetBottom]
+    [
+      applyWorkaroundForContentInsetHitTestBug,
+      blankSpace,
+      contentInsetEndAdjustment,
+      freeze,
+      keyboardLiftBehavior,
+      keyboardOffset,
+      onContentInsetChange
+    ]
   );
-  const animatedProps = useAnimatedProps(() => {
-    "worklet";
-    var _a, _b, _c, _d;
-    const baseProps = {
-      contentOffset: animatedOffsetY.value === null ? void 0 : {
-        x: 0,
-        y: animatedOffsetY.value
-      }
-    };
-    return 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 = Platform.OS !== "ios" ? useAnimatedStyle(() => ({
-    marginBottom: keyboardInset.value
-  })) : void 0;
+  const AnimatedLegendListInternal = AnimatedLegendList;
   return /* @__PURE__ */ React.createElement(
-    AnimatedLegendList,
+    AnimatedLegendListInternal,
     {
-      ...rest,
-      animatedProps,
-      keyboardDismissMode: "interactive",
-      onScroll: scrollHandler,
+      anchoredEndSpace: anchoredEndSpaceWithBlankSpace,
       ref: combinedRef,
-      refScrollView: scrollViewRef,
-      scrollIndicatorInsets: { bottom: 0, top: 0 },
-      style
+      renderScrollComponent: memoList,
+      ...rest
     }
   );
 });
 
-export { KeyboardAvoidingLegendList, KeyboardAvoidingLegendList as LegendList };
+export { KeyboardAwareLegendList, useKeyboardChatComposerInset, useKeyboardScrollToEnd };

package/package.json

@@ -1,13 +1,63 @@
 {
   "name": "@legendapp/list",
-  "version": "3.0.0-beta.9",
+  "version": "3.0.0",
   "description": "Legend List is a drop-in replacement for FlatList with much better performance and supporting dynamically sized items.",
   "sideEffects": false,
   "private": false,
-  "main": "./index.js",
-  "module": "./index.mjs",
-  "types": "./index.d.ts",
-  "react-native": "./index.native.js",
+  "exports": {
+    "./animated": {
+      "types": "./animated.d.ts",
+      "import": "./animated.mjs",
+      "require": "./animated.js",
+      "default": "./animated.js"
+    },
+    "./keyboard": {
+      "types": "./keyboard.d.ts",
+      "import": "./keyboard.mjs",
+      "require": "./keyboard.js",
+      "default": "./keyboard.js"
+    },
+    "./keyboard-legacy": {
+      "types": "./keyboard-legacy.d.ts",
+      "import": "./keyboard-legacy.mjs",
+      "require": "./keyboard-legacy.js",
+      "default": "./keyboard-legacy.js"
+    },
+    "./reanimated": {
+      "types": "./reanimated.d.ts",
+      "import": "./reanimated.mjs",
+      "require": "./reanimated.js",
+      "default": "./reanimated.js"
+    },
+    "./react-native": {
+      "types": "./react-native.d.ts",
+      "browser": {
+        "import": "./react-native.web.mjs",
+        "require": "./react-native.web.js",
+        "default": "./react-native.web.js"
+      },
+      "react-native": {
+        "import": "./react-native.mjs",
+        "require": "./react-native.js",
+        "default": "./react-native.js"
+      },
+      "import": "./react-native.web.mjs",
+      "require": "./react-native.web.js",
+      "default": "./react-native.web.js"
+    },
+    "./section-list": {
+      "types": "./section-list.d.ts",
+      "import": "./section-list.mjs",
+      "require": "./section-list.js",
+      "default": "./section-list.js"
+    },
+    "./react": {
+      "types": "./react.d.ts",
+      "import": "./react.mjs",
+      "require": "./react.js",
+      "default": "./react.js"
+    }
+  },
   "files": [
     "**"
   ],