@legendapp/list 3.0.0-beta.50 → 3.0.0-beta.52

package/keyboard-chat.mjs

@@ -1,12 +1,33 @@
 import * as React from 'react';
-import { useEffect, useMemo, useCallback } from 'react';
-import { KeyboardChatScrollView } from 'react-native-keyboard-controller';
+import { useRef, useEffect, useMemo, useCallback } 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-chat.tsx
-var { typedForwardRef } = internal;
+var { typedForwardRef, useCombinedRef } = internal;
+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);
+      }
+    },
+    [freeze, listRef]
+  );
+  return {
+    freeze,
+    scrollMessageToEnd
+  };
+}
 var KeyboardChatLegendList = typedForwardRef(function KeyboardChatLegendList2(props, forwardedRef) {
   const {
     anchoredEndSpace,
@@ -17,6 +38,8 @@ var KeyboardChatLegendList = typedForwardRef(function KeyboardChatLegendList2(pr
     offset,
     ...rest
   } = props;
+  const refLegendList = useRef(null);
+  const combinedRef = useCombinedRef(forwardedRef, refLegendList);
   const blankSpace = useSharedValue(0);
   useEffect(() => {
     if (!anchoredEndSpace) {
@@ -37,6 +60,10 @@ var KeyboardChatLegendList = typedForwardRef(function KeyboardChatLegendList2(pr
       }
     };
   }, [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(
@@ -46,9 +73,9 @@ var KeyboardChatLegendList = typedForwardRef(function KeyboardChatLegendList2(pr
           applyWorkaroundForContentInsetHitTestBug,
           blankSpace,
           extraContentPadding,
-          freeze,
           keyboardLiftBehavior,
-          offset
+          offset,
+          onContentInsetChange
         }
       );
     },
@@ -58,6 +85,7 @@ var KeyboardChatLegendList = typedForwardRef(function KeyboardChatLegendList2(pr
       extraContentPadding,
       freeze,
       keyboardLiftBehavior,
+      onContentInsetChange,
       offset
     ]
   );
@@ -66,11 +94,11 @@ var KeyboardChatLegendList = typedForwardRef(function KeyboardChatLegendList2(pr
     AnimatedLegendListInternal,
     {
       anchoredEndSpace: anchoredEndSpaceWithBlankSpace,
-      ref: forwardedRef,
+      ref: combinedRef,
       renderScrollComponent: memoList,
       ...rest
     }
   );
 });
 
-export { KeyboardChatLegendList };
+export { KeyboardChatLegendList, useKeyboardScrollToEnd };

package/keyboard-test.d.ts

@@ -1,6 +1,7 @@
 import * as React from 'react';
 import { ScrollViewComponent, ScrollResponderMixin, Insets as Insets$1, ScrollViewProps } from 'react-native';
 import { KeyboardChatScrollViewProps } from 'react-native-keyboard-controller';
+export { useKeyboardScrollToEnd } from '@legendapp/list/keyboard-chat';
 import { AnimatedLegendListProps } from '@legendapp/list/reanimated';
 
 interface MaintainVisibleContentPositionNormalized<ItemT = any> {
@@ -210,7 +211,7 @@ type LegendListRef = Omit<LegendListRef$1, "getNativeScrollRef" | "getScrollResp
     reportContentInset(inset?: Partial<Insets$1> | null): void;
 };
 
-type KeyboardChatScrollViewPropsUnique = Omit<KeyboardChatScrollViewProps, keyof ScrollViewProps | "inverted" | "ScrollViewComponent">;
+type KeyboardChatScrollViewPropsUnique = Omit<KeyboardChatScrollViewProps, keyof ScrollViewProps | "inverted" | "ScrollViewComponent" | "onContentInsetChange">;
 declare const KeyboardAvoidingLegendList: <ItemT>(props: Omit<AnimatedLegendListProps<ItemT>, "renderScrollComponent"> & KeyboardChatScrollViewPropsUnique & React.RefAttributes<LegendListRef>) => React.ReactElement | null;
 
 export { KeyboardAvoidingLegendList };

package/keyboard-test.js

@@ -2,6 +2,7 @@
 
 var React = require('react');
 var reactNativeKeyboardController = require('react-native-keyboard-controller');
+var keyboardChat = require('@legendapp/list/keyboard-chat');
 var reactNative = require('@legendapp/list/react-native');
 var reanimated = require('@legendapp/list/reanimated');
 
@@ -26,14 +27,31 @@ function _interopNamespace(e) {
 var React__namespace = /*#__PURE__*/_interopNamespace(React);
 
 // src/integrations/keyboard-test.tsx
-var { typedForwardRef } = reactNative.internal;
+var { typedForwardRef, useCombinedRef } = reactNative.internal;
 var KeyboardAvoidingLegendList = typedForwardRef(function KeyboardAvoidingLegendList2(props, forwardedRef) {
   const { extraContentPadding, ...rest } = props;
+  const refLegendList = React.useRef(null);
+  const combinedRef = useCombinedRef(forwardedRef, refLegendList);
+  const onContentInsetChange = React.useCallback((insets) => {
+    var _a;
+    (_a = refLegendList.current) == null ? void 0 : _a.reportContentInset(insets);
+  }, []);
   const memoList = React.useCallback(
-    (listProps) => /* @__PURE__ */ React__namespace.createElement(reactNativeKeyboardController.KeyboardChatScrollView, { ...listProps, extraContentPadding }),
-    [extraContentPadding]
+    (listProps) => /* @__PURE__ */ React__namespace.createElement(
+      reactNativeKeyboardController.KeyboardChatScrollView,
+      {
+        ...listProps,
+        extraContentPadding,
+        onContentInsetChange
+      }
+    ),
+    [extraContentPadding, onContentInsetChange]
   );
-  return /* @__PURE__ */ React__namespace.createElement(reanimated.AnimatedLegendList, { ref: forwardedRef, renderScrollComponent: memoList, ...rest });
+  return /* @__PURE__ */ React__namespace.createElement(reanimated.AnimatedLegendList, { ref: combinedRef, renderScrollComponent: memoList, ...rest });
 });
 
+Object.defineProperty(exports, "useKeyboardScrollToEnd", {
+  enumerable: true,
+  get: function () { return keyboardChat.useKeyboardScrollToEnd; }
+});
 exports.KeyboardAvoidingLegendList = KeyboardAvoidingLegendList;

package/keyboard-test.mjs

@@ -1,18 +1,32 @@
 import * as React from 'react';
-import { useCallback } from 'react';
+import { useRef, useCallback } from 'react';
 import { KeyboardChatScrollView } from 'react-native-keyboard-controller';
+export { useKeyboardScrollToEnd } from '@legendapp/list/keyboard-chat';
 import { internal } from '@legendapp/list/react-native';
 import { AnimatedLegendList } from '@legendapp/list/reanimated';
 
 // src/integrations/keyboard-test.tsx
-var { typedForwardRef } = internal;
+var { typedForwardRef, useCombinedRef } = internal;
 var KeyboardAvoidingLegendList = typedForwardRef(function KeyboardAvoidingLegendList2(props, forwardedRef) {
   const { extraContentPadding, ...rest } = props;
+  const refLegendList = useRef(null);
+  const combinedRef = useCombinedRef(forwardedRef, refLegendList);
+  const onContentInsetChange = useCallback((insets) => {
+    var _a;
+    (_a = refLegendList.current) == null ? void 0 : _a.reportContentInset(insets);
+  }, []);
   const memoList = useCallback(
-    (listProps) => /* @__PURE__ */ React.createElement(KeyboardChatScrollView, { ...listProps, extraContentPadding }),
-    [extraContentPadding]
+    (listProps) => /* @__PURE__ */ React.createElement(
+      KeyboardChatScrollView,
+      {
+        ...listProps,
+        extraContentPadding,
+        onContentInsetChange
+      }
+    ),
+    [extraContentPadding, onContentInsetChange]
   );
-  return /* @__PURE__ */ React.createElement(AnimatedLegendList, { ref: forwardedRef, renderScrollComponent: memoList, ...rest });
+  return /* @__PURE__ */ React.createElement(AnimatedLegendList, { ref: combinedRef, renderScrollComponent: memoList, ...rest });
 });
 
 export { KeyboardAvoidingLegendList };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@legendapp/list",
-  "version": "3.0.0-beta.50",
+  "version": "3.0.0-beta.52",
   "description": "Legend List is a drop-in replacement for FlatList with much better performance and supporting dynamically sized items.",
   "sideEffects": false,
   "private": false,

package/react-native.js

@@ -4570,12 +4570,14 @@ var flushSync = (fn) => {
 };
 
 // src/core/updateScroll.ts
-function updateScroll(ctx, newScroll, forceUpdate) {
+function updateScroll(ctx, newScroll, forceUpdate, options) {
   var _a3;
   const state = ctx.state;
   const { ignoreScrollFromMVCP, lastScrollAdjustForHistory, scrollAdjustHandler, scrollHistory, scrollingTo } = state;
   const prevScroll = state.scroll;
-  state.hasScrolled = true;
+  if ((options == null ? void 0 : options.markHasScrolled) !== false) {
+    state.hasScrolled = true;
+  }
   state.lastBatchingAction = Date.now();
   const currentTime = Date.now();
   const adjust = scrollAdjustHandler.getAdjust();
@@ -4794,13 +4796,12 @@ function maybeUpdateAnchoredEndSpace(ctx) {
       nextSize = Math.max(0, state.scrollLength - contentBelowAnchor - anchorOffset);
     }
   }
-  if (previousSize === nextSize) {
-    return nextSize;
-  }
-  set$(ctx, "anchoredEndSpaceSize", nextSize);
-  (_a3 = anchoredEndSpace == null ? void 0 : anchoredEndSpace.onSizeChanged) == null ? void 0 : _a3.call(anchoredEndSpace, nextSize);
-  if (anchoredEndSpace == null ? void 0 : anchoredEndSpace.includeInEndInset) {
-    updateScroll(ctx, state.scroll, true);
+  if (previousSize !== nextSize) {
+    set$(ctx, "anchoredEndSpaceSize", nextSize);
+    (_a3 = anchoredEndSpace == null ? void 0 : anchoredEndSpace.onSizeChanged) == null ? void 0 : _a3.call(anchoredEndSpace, nextSize);
+    if (anchoredEndSpace == null ? void 0 : anchoredEndSpace.includeInEndInset) {
+      updateScroll(ctx, state.scroll, true);
+    }
   }
   return nextSize;
 }
@@ -5044,14 +5045,14 @@ function createImperativeHandle(ctx) {
   const IMPERATIVE_SCROLL_SETTLE_STABLE_FRAMES = 2;
   let imperativeScrollToken = 0;
   const isSettlingAfterDataChange = () => !!state.didDataChange || !!state.didColumnsChange || state.queuedMVCPRecalculate !== void 0 || state.ignoreScrollFromMVCP !== void 0;
-  const runWhenSettled = (token, run) => {
+  const runWhenReady = (token, run, isReady) => {
     const startedAt = Date.now();
     let stableFrames = 0;
     const check = () => {
       if (token !== imperativeScrollToken) {
         return;
       }
-      if (isSettlingAfterDataChange()) {
+      if (isSettlingAfterDataChange() || !isReady()) {
         stableFrames = 0;
       } else {
         stableFrames += 1;
@@ -5066,10 +5067,10 @@ function createImperativeHandle(ctx) {
     requestAnimationFrame(check);
   };
   const runScrollWithPromise = (run, options) => new Promise((resolve) => {
-    var _a3;
+    var _a3, _b;
     const token = ++imperativeScrollToken;
-    const shouldWaitOneFrame = !!(options == null ? void 0 : options.shouldWaitOneFrame);
-    (_a3 = state.pendingScrollResolve) == null ? void 0 : _a3.call(state);
+    const isReady = (_a3 = options == null ? void 0 : options.isReady) != null ? _a3 : (() => true);
+    (_b = state.pendingScrollResolve) == null ? void 0 : _b.call(state);
     state.pendingScrollResolve = resolve;
     const runNow = () => {
       if (token !== imperativeScrollToken) {
@@ -5083,11 +5084,10 @@ function createImperativeHandle(ctx) {
         resolve();
       }
     };
-    const execute = shouldWaitOneFrame ? () => requestAnimationFrame(runNow) : runNow;
-    if (isSettlingAfterDataChange()) {
-      runWhenSettled(token, execute);
+    if (isSettlingAfterDataChange() || !isReady()) {
+      runWhenReady(token, runNow, isReady);
     } else {
-      execute();
+      runNow();
     }
   });
   const scrollIndexIntoView = (options) => {
@@ -5169,7 +5169,7 @@ function createImperativeHandle(ctx) {
     }),
     reportContentInset: (inset) => {
       state.contentInsetOverride = inset != null ? inset : void 0;
-      updateScroll(ctx, state.scroll, true);
+      updateScroll(ctx, state.scroll, true, { markHasScrolled: false });
     },
     scrollIndexIntoView: (options) => runScrollWithPromise(() => scrollIndexIntoView(options)),
     scrollItemIntoView: ({ item, ...props }) => runScrollWithPromise(() => {
@@ -5198,15 +5198,24 @@ function createImperativeHandle(ctx) {
       }
       return false;
     }),
-    scrollToIndex: (params) => runScrollWithPromise(
-      () => {
+    scrollToIndex: (params) => {
+      const shouldWaitForOutOfRangeTarget = params.index >= 0 && params.index >= state.props.data.length;
+      const options = shouldWaitForOutOfRangeTarget ? {
+        isReady: () => {
+          var _a3;
+          const props = state.props;
+          const anchorIndex = (_a3 = props.anchoredEndSpace) == null ? void 0 : _a3.anchorIndex;
+          const lastIndex = props.data.length - 1;
+          const isInRange = params.index < props.data.length;
+          const shouldWaitForAnchorSize = isInRange && anchorIndex !== void 0 && anchorIndex >= 0 && params.index >= anchorIndex && !props.getFixedItemSize && !state.sizesKnown.has(getId(state, lastIndex));
+          return isInRange && !shouldWaitForAnchorSize;
+        }
+      } : void 0;
+      return runScrollWithPromise(() => {
         scrollToIndex(ctx, params);
         return true;
-      },
-      {
-        shouldWaitOneFrame: params.index >= 0 && params.index >= state.props.data.length
-      }
-    ),
+      }, options);
+    },
     scrollToItem: ({ item, ...props }) => runScrollWithPromise(() => {
       const data = state.props.data;
       const index = data.indexOf(item);
@@ -5238,32 +5247,32 @@ var addIndex = (result, dataLength, index) => {
     result.add(index);
   }
 };
-function getAlwaysRenderIndices(config, data, keyExtractor) {
+function getAlwaysRenderIndices(config, data, keyExtractor, anchoredEndSpaceAnchorIndex) {
   var _a3, _b;
-  if (!config || data.length === 0) {
+  if (data.length === 0) {
     return [];
   }
   const result = /* @__PURE__ */ new Set();
   const dataLength = data.length;
-  const topCount = toCount(config.top);
+  const topCount = toCount(config == null ? void 0 : config.top);
   if (topCount > 0) {
     for (let i = 0; i < Math.min(topCount, dataLength); i++) {
       addIndex(result, dataLength, i);
     }
   }
-  const bottomCount = toCount(config.bottom);
+  const bottomCount = toCount(config == null ? void 0 : config.bottom);
   if (bottomCount > 0) {
     for (let i = Math.max(0, dataLength - bottomCount); i < dataLength; i++) {
       addIndex(result, dataLength, i);
     }
   }
-  if ((_a3 = config.indices) == null ? void 0 : _a3.length) {
+  if ((_a3 = config == null ? void 0 : config.indices) == null ? void 0 : _a3.length) {
     for (const index of config.indices) {
       if (!Number.isFinite(index)) continue;
       addIndex(result, dataLength, Math.floor(index));
     }
   }
-  if ((_b = config.keys) == null ? void 0 : _b.length) {
+  if ((_b = config == null ? void 0 : config.keys) == null ? void 0 : _b.length) {
     const keys = new Set(config.keys);
     for (let i = 0; i < dataLength && keys.size > 0; i++) {
       const key = keyExtractor(data[i], i);
@@ -5273,6 +5282,12 @@ function getAlwaysRenderIndices(config, data, keyExtractor) {
       }
     }
   }
+  if (anchoredEndSpaceAnchorIndex !== void 0 && Number.isFinite(anchoredEndSpaceAnchorIndex)) {
+    const anchorIndex = Math.floor(anchoredEndSpaceAnchorIndex);
+    for (let i = anchorIndex >= 0 ? anchorIndex : dataLength; i < dataLength; i++) {
+      addIndex(result, dataLength, i);
+    }
+  }
   const indices = Array.from(result);
   indices.sort(sortAsc);
   return indices;
@@ -5436,7 +5451,7 @@ var LegendList = typedMemo(
   })
 );
 var LegendListInner = typedForwardRef(function LegendListInner2(props, forwardedRef) {
-  var _a3, _b, _c, _d, _e, _f, _g, _h;
+  var _a3, _b, _c, _d, _e, _f, _g, _h, _i;
   const noopOnScroll = React2.useCallback((_event) => {
   }, []);
   if (props.recycleItems === void 0) {
@@ -5565,9 +5580,10 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
   const keyExtractor = keyExtractorProp != null ? keyExtractorProp : ((_item, index) => index.toString());
   const stickyHeaderIndices = stickyHeaderIndicesProp != null ? stickyHeaderIndicesProp : stickyIndicesDeprecated;
   const alwaysRenderIndices = React2.useMemo(() => {
-    const indices = getAlwaysRenderIndices(alwaysRender, dataProp, keyExtractor);
+    const indices = getAlwaysRenderIndices(alwaysRender, dataProp, keyExtractor, anchoredEndSpace == null ? void 0 : anchoredEndSpace.anchorIndex);
     return { arr: indices, set: new Set(indices) };
   }, [
+    anchoredEndSpace == null ? void 0 : anchoredEndSpace.anchorIndex,
     alwaysRender == null ? void 0 : alwaysRender.top,
     alwaysRender == null ? void 0 : alwaysRender.bottom,
     (_d = alwaysRender == null ? void 0 : alwaysRender.indices) == null ? void 0 : _d.join(","),
@@ -5673,6 +5689,7 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
   const throttledOnScroll = useThrottledOnScroll(onScrollProp != null ? onScrollProp : noopOnScroll, scrollEventThrottle != null ? scrollEventThrottle : 0);
   const throttleScrollFn = scrollEventThrottle && onScrollProp ? throttledOnScroll : onScrollProp;
   const anchoredEndSpaceResolved = Platform.OS === "web" && anchoredEndSpace ? { ...anchoredEndSpace, includeInEndInset: true } : anchoredEndSpace;
+  const didAnchoredEndSpaceAnchorIndexChange = !isFirstLocal && !didDataChangeLocal && ((_g = state.props.anchoredEndSpace) == null ? void 0 : _g.anchorIndex) !== (anchoredEndSpaceResolved == null ? void 0 : anchoredEndSpaceResolved.anchorIndex);
   state.props = {
     alignItemsAtEnd,
     alwaysRender,
@@ -5787,6 +5804,11 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
     });
   }, [dataProp.length, didDataChangeLocal, initialScrollAtEnd, stylePaddingBottomState, usesBootstrapInitialScroll]);
   React2.useLayoutEffect(() => {
+    var _a4;
+    if (didAnchoredEndSpaceAnchorIndexChange) {
+      state.scrollForNextCalculateItemsInView = void 0;
+      (_a4 = state.triggerCalculateItemsInView) == null ? void 0 : _a4.call(state);
+    }
     maybeUpdateAnchoredEndSpace(ctx);
   }, [
     ctx,
@@ -5795,6 +5817,7 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
     anchoredEndSpace == null ? void 0 : anchoredEndSpace.anchorIndex,
     anchoredEndSpace == null ? void 0 : anchoredEndSpace.anchorMaxSize,
     anchoredEndSpace == null ? void 0 : anchoredEndSpace.anchorOffset,
+    didAnchoredEndSpaceAnchorIndexChange,
     numColumnsProp
   ]);
   const onLayoutFooter = React2.useCallback(
@@ -5951,7 +5974,7 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
       onScroll: onScrollHandler,
       recycleItems,
       refreshControl: refreshControlElement ? stylePaddingTopState > 0 ? React2__namespace.cloneElement(refreshControlElement, {
-        progressViewOffset: ((_g = refreshControlElement.props.progressViewOffset) != null ? _g : 0) + stylePaddingTopState
+        progressViewOffset: ((_h = refreshControlElement.props.progressViewOffset) != null ? _h : 0) + stylePaddingTopState
       }) : refreshControlElement : onRefresh && /* @__PURE__ */ React2__namespace.createElement(
         ReactNative.RefreshControl,
         {
@@ -5962,7 +5985,7 @@ var LegendListInner = typedForwardRef(function LegendListInner2(props, forwarded
       ),
       refScrollView: combinedRef,
       renderScrollComponent,
-      scrollAdjustHandler: (_h = refState.current) == null ? void 0 : _h.scrollAdjustHandler,
+      scrollAdjustHandler: (_i = refState.current) == null ? void 0 : _i.scrollAdjustHandler,
       scrollEventThrottle: 0,
       snapToIndices,
       stickyHeaderIndices,