@react-native-macos/virtualized-lists 0.76.11 → 0.77.6

package/CHANGELOG.json

@@ -1,36 +1,6 @@
 {
   "name": "@react-native-mac/virtualized-lists",
   "entries": [
-    {
-      "date": "Tue, 03 Dec 2024 23:38:40 GMT",
-      "version": "0.76.3",
-      "tag": "@react-native-mac/virtualized-lists_v0.76.3",
-      "comments": {
-        "patch": [
-          {
-            "author": "sanajmi@microsoft.com",
-            "package": "@react-native-mac/virtualized-lists",
-            "commit": "acc82e5591a2cb8a0d0531379c999cd03f1748f7",
-            "comment": "Applying package update to 0.76.2 ***NO_CI***"
-          }
-        ]
-      }
-    },
-    {
-      "date": "Tue, 29 Oct 2024 22:18:55 GMT",
-      "version": "0.76.0",
-      "tag": "@react-native-mac/virtualized-lists_v0.76.0",
-      "comments": {
-        "minor": [
-          {
-            "author": "sanajmi@microsoft.com",
-            "package": "@react-native-mac/virtualized-lists",
-            "commit": "74eacf73237c296712e8886a23e42fed58021c71",
-            "comment": "chore(0.76): Merge up to 0.76.0 (#2232)"
-          }
-        ]
-      }
-    },
     {
       "date": "Wed, 06 Sep 2023 19:59:04 GMT",
       "tag": "@react-native-mac/virtualized-lists_v0.72.1",

package/CHANGELOG.md

@@ -1,25 +1,9 @@
 # Change Log - @react-native-macos/virtualized-lists
 
-This log was last generated on Tue, 03 Dec 2024 23:38:40 GMT and should not be manually modified.
+This log was last generated on Wed, 06 Sep 2023 19:59:04 GMT and should not be manually modified.
 
 <!-- Start content -->
 
-## 0.76.3
-
-Tue, 03 Dec 2024 23:38:40 GMT
-
-### Patches
-
-- Applying package update to 0.76.2 ***NO_CI*** (sanajmi@microsoft.com)
-
-## 0.76.0
-
-Tue, 29 Oct 2024 22:18:55 GMT
-
-### Minor changes
-
-- chore(0.76): Merge up to 0.76.0 (#2232) (sanajmi@microsoft.com)
-
 ## 0.72.1
 
 Wed, 06 Sep 2023 19:59:04 GMT

package/Interaction/Batchinator.js

@@ -4,13 +4,12 @@
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  *
- * @format
  * @flow strict-local
+ * @format
  */
 
-'use strict';
-
-const {InteractionManager} = require('react-native');
+import {InteractionManager} from 'react-native';
+import * as ReactNativeFeatureFlags from 'react-native/src/private/featureflags/ReactNativeFeatureFlags';
 
 /**
  * A simple class for batching up invocations of a low-pri callback. A timeout is set to run the
@@ -38,37 +37,47 @@ class Batchinator {
   _callback: () => void;
   _delay: number;
   _taskHandle: ?{cancel: () => void, ...};
-  constructor(callback: () => void, delayMS: number) {
-    this._delay = delayMS;
+
+  constructor(callback: () => void, delay: number) {
+    this._delay = delay;
     this._callback = callback;
   }
+
   /*
    * Cleanup any pending tasks.
    *
    * By default, if there is a pending task the callback is run immediately. Set the option abort to
    * true to not call the callback if it was pending.
    */
-  dispose(options: {abort: boolean, ...} = {abort: false}) {
+  dispose(): void {
     if (this._taskHandle) {
       this._taskHandle.cancel();
-      if (!options.abort) {
-        this._callback();
-      }
       this._taskHandle = null;
     }
   }
-  schedule() {
+
+  schedule(): void {
     if (this._taskHandle) {
       return;
     }
-    const timeoutHandle = setTimeout(() => {
-      this._taskHandle = InteractionManager.runAfterInteractions(() => {
-        // Note that we clear the handle before invoking the callback so that if the callback calls
-        // schedule again, it will actually schedule another task.
-        this._taskHandle = null;
-        this._callback();
-      });
-    }, this._delay);
+    const invokeCallback = () => {
+      // Note that we clear the handle before invoking the callback so that if the callback calls
+      // schedule again, it will actually schedule another task.
+      this._taskHandle = null;
+      this._callback();
+    };
+
+    const timeoutHandle = setTimeout(
+      // NOTE: When shipping this, delete `Batchinator` instead of only these
+      // lines of code. Without `InteractionManager`, it's just a `setTimeout`.
+      ReactNativeFeatureFlags.disableInteractionManagerInBatchinator()
+        ? invokeCallback
+        : () => {
+            this._taskHandle =
+              InteractionManager.runAfterInteractions(invokeCallback);
+          },
+      this._delay,
+    );
     this._taskHandle = {cancel: () => clearTimeout(timeoutHandle)};
   }
 }

package/Lists/ListMetricsAggregator.js

@@ -167,6 +167,30 @@ export default class ListMetricsAggregator {
       // check for invalid frames due to row re-ordering
       return frame;
     } else {
+      let offset;
+
+      const highestMeasuredCellIndex = this.getHighestMeasuredCellIndex();
+      if (highestMeasuredCellIndex < index) {
+        // If any of the cells before this one have been laid out already, we
+        // should use that information in the estimations.
+        // This is important because if the list has a header, the initial cell
+        // will have a larger offset that we should take into account here.
+        const highestMeasuredCellFrame = this.getCellMetrics(
+          highestMeasuredCellIndex,
+          props,
+        );
+        if (highestMeasuredCellFrame) {
+          offset =
+            highestMeasuredCellFrame.offset +
+            highestMeasuredCellFrame.length +
+            this._averageCellLength * (index - highestMeasuredCellIndex - 1);
+        }
+      }
+
+      if (offset == null) {
+        offset = this._averageCellLength * index;
+      }
+
       const {data, getItemCount} = props;
       invariant(
         index >= 0 && index < getItemCount(data),
@@ -174,7 +198,7 @@ export default class ListMetricsAggregator {
       );
       return {
         length: this._averageCellLength,
-        offset: this._averageCellLength * index,
+        offset,
         index,
         isMounted: false,
       };

package/Lists/ViewabilityHelper.js

@@ -35,7 +35,7 @@ export type ViewabilityConfigCallbackPair = {
   ...
 };
 
-export type ViewabilityConfig = {|
+export type ViewabilityConfig = $ReadOnly<{|
   /**
    * Minimum amount of time (in milliseconds) that an item must be physically viewable before the
    * viewability callback will be fired. A high number means that scrolling through content without
@@ -62,7 +62,7 @@ export type ViewabilityConfig = {|
    * render.
    */
   waitForInteraction?: boolean,
-|};
+|}>;
 
 /**
  * A Utility class for calculating viewable items based on current metrics like scroll position and

package/Lists/VirtualizedList.js

@@ -381,7 +381,7 @@ class VirtualizedList extends StateSafePureComponent<Props, State> {
 
   _registerAsNestedChild = (childList: {
     cellKey: string,
-    ref: React.ElementRef<typeof VirtualizedList>,
+    ref: VirtualizedList,
   }): void => {
     this._nestedChildLists.add(childList.ref, childList.cellKey);
     if (this._hasInteracted) {
@@ -389,9 +389,7 @@ class VirtualizedList extends StateSafePureComponent<Props, State> {
     }
   };
 
-  _unregisterAsNestedChild = (childList: {
-    ref: React.ElementRef<typeof VirtualizedList>,
-  }): void => {
+  _unregisterAsNestedChild = (childList: {ref: VirtualizedList}): void => {
     this._nestedChildLists.remove(childList.ref);
   };
 
@@ -715,7 +713,7 @@ class VirtualizedList extends StateSafePureComponent<Props, State> {
     if (this._isNestedWithSameOrientation()) {
       this.context.unregisterAsNestedChild({ref: this});
     }
-    this._updateCellsToRenderBatcher.dispose({abort: true});
+    this._updateCellsToRenderBatcher.dispose();
     this._viewabilityTuples.forEach(tuple => {
       tuple.viewabilityHelper.dispose();
     });
@@ -989,8 +987,10 @@ class VirtualizedList extends StateSafePureComponent<Props, State> {
         <ListEmptyComponent />
       )): any);
       cells.push(
+        // $FlowFixMe[prop-missing] React.Element internal inspection
         <VirtualizedListCellContextProvider
           cellKey={this._getCellKey() + '-empty'}
+          collapsable={Platform.OS !== 'macos'} // [macOS]
           key="$empty">
           {React.cloneElement(element, {
             onLayout: (event: LayoutEvent) => {
@@ -1050,6 +1050,7 @@ class VirtualizedList extends StateSafePureComponent<Props, State> {
             lastMetrics.offset + lastMetrics.length - firstMetrics.offset;
           cells.push(
             <View
+              collapsable={Platform.OS !== 'macos'} // [macOS]
               key={`$spacer-${section.first}`}
               style={{[spacerKey]: spacerSize}}
             />,
@@ -1090,6 +1091,7 @@ class VirtualizedList extends StateSafePureComponent<Props, State> {
           cellKey={this._getFooterCellKey()}
           key="$footer">
           <View
+            collapsable={Platform.OS !== 'macos'} // [macOS]
             onLayout={this._onLayoutFooter}
             style={StyleSheet.compose(
               inversionStyle,
@@ -1200,7 +1202,7 @@ class VirtualizedList extends StateSafePureComponent<Props, State> {
   }
 
   componentDidUpdate(prevProps: Props) {
-    const {data, extraData} = this.props;
+    const {data, extraData, getItemLayout} = this.props;
     if (data !== prevProps.data || extraData !== prevProps.extraData) {
       // clear the viewableIndices cache to also trigger
       // the onViewableItemsChanged callback with the new data
@@ -1221,6 +1223,14 @@ class VirtualizedList extends StateSafePureComponent<Props, State> {
     if (hiPriInProgress) {
       this._hiPriInProgress = false;
     }
+
+    // We only call `onEndReached` after we render the last cell, but when
+    // getItemLayout is present, we can scroll past the last rendered cell, and
+    // never trigger a new layout or bounds change, so we need to check again
+    // after rendering more cells.
+    if (getItemLayout != null) {
+      this._maybeCallOnEdgeReached();
+    }
   }
 
   _cellRefs: {[string]: null | CellRenderer<any>} = {};
@@ -1647,6 +1657,14 @@ class VirtualizedList extends StateSafePureComponent<Props, State> {
       onEndReached,
       onEndReachedThreshold,
     } = this.props;
+    // Wait until we have real metrics
+    if (
+      !this._listMetrics.hasContentLength() ||
+      this._scrollMetrics.visibleLength === 0
+    ) {
+      return;
+    }
+
     // If we have any pending scroll updates it means that the scroll metrics
     // are out of date and we should not call any of the edge reached callbacks.
     if (this.state.pendingScrollUpdateCount > 0) {
@@ -1790,6 +1808,10 @@ class VirtualizedList extends StateSafePureComponent<Props, State> {
     };
   };
 
+  unstable_onScroll(e: Object) {
+    this._onScroll(e);
+  }
+
   _onScroll = (e: Object) => {
     this._nestedChildLists.forEach(childList => {
       childList._onScroll(e);
@@ -1895,7 +1917,7 @@ class VirtualizedList extends StateSafePureComponent<Props, State> {
       this._hiPriInProgress = true;
       // Don't worry about interactions when scrolling quickly; focus on filling content as fast
       // as possible.
-      this._updateCellsToRenderBatcher.dispose({abort: true});
+      this._updateCellsToRenderBatcher.dispose();
       this._updateCellsToRender();
       return;
     } else {
@@ -1942,6 +1964,10 @@ class VirtualizedList extends StateSafePureComponent<Props, State> {
     return hiPri;
   }
 
+  unstable_onScrollBeginDrag(e: ScrollEvent) {
+    this._onScrollBeginDrag(e);
+  }
+
   _onScrollBeginDrag = (e: ScrollEvent): void => {
     this._nestedChildLists.forEach(childList => {
       childList._onScrollBeginDrag(e);
@@ -1953,6 +1979,10 @@ class VirtualizedList extends StateSafePureComponent<Props, State> {
     this.props.onScrollBeginDrag && this.props.onScrollBeginDrag(e);
   };
 
+  unstable_onScrollEndDrag(e: ScrollEvent) {
+    this._onScrollEndDrag(e);
+  }
+
   _onScrollEndDrag = (e: ScrollEvent): void => {
     this._nestedChildLists.forEach(childList => {
       childList._onScrollEndDrag(e);
@@ -1965,6 +1995,10 @@ class VirtualizedList extends StateSafePureComponent<Props, State> {
     this.props.onScrollEndDrag && this.props.onScrollEndDrag(e);
   };
 
+  unstable_onMomentumScrollBegin(e: ScrollEvent) {
+    this._onMomentumScrollBegin(e);
+  }
+
   _onMomentumScrollBegin = (e: ScrollEvent): void => {
     this._nestedChildLists.forEach(childList => {
       childList._onMomentumScrollBegin(e);
@@ -1972,6 +2006,10 @@ class VirtualizedList extends StateSafePureComponent<Props, State> {
     this.props.onMomentumScrollBegin && this.props.onMomentumScrollBegin(e);
   };
 
+  unstable_onMomentumScrollEnd(e: ScrollEvent) {
+    this._onMomentumScrollEnd(e);
+  }
+
   _onMomentumScrollEnd = (e: ScrollEvent): void => {
     this._nestedChildLists.forEach(childList => {
       childList._onMomentumScrollEnd(e);

package/Lists/VirtualizedListCellRenderer.js

@@ -8,7 +8,6 @@
  * @format
  */
 
-import * as ReactNativeFeatureFlags from 'react-native/src/private/featureflags/ReactNativeFeatureFlags';
 import type {CellRendererProps, RenderItemType} from './VirtualizedListProps';
 import type {ViewStyleProp} from 'react-native/Libraries/StyleSheet/StyleSheet';
 import type {
@@ -19,7 +18,7 @@ import type {
 import {VirtualizedListCellContextProvider} from './VirtualizedListContext.js';
 import invariant from 'invariant';
 import * as React from 'react';
-import {StyleSheet, View} from 'react-native';
+import {Platform, StyleSheet, View} from 'react-native'; // [macOS]
 
 export type Props<ItemT> = {
   CellRendererComponent?: ?React.ComponentType<CellRendererProps<ItemT>>,
@@ -70,17 +69,7 @@ export default class CellRenderer<ItemT> extends React.PureComponent<
     props: Props<ItemT>,
     prevState: State<ItemT>,
   ): ?State<ItemT> {
-    if (ReactNativeFeatureFlags.enableOptimisedVirtualizedCells()) {
-      if (props.item !== prevState.separatorProps.leadingItem) {
-        return {
-          separatorProps: {
-            ...prevState.separatorProps,
-            leadingItem: props.item,
-          },
-        };
-      }
-      return null;
-    } else {
+    if (props.item !== prevState.separatorProps.leadingItem) {
       return {
         separatorProps: {
           ...prevState.separatorProps,
@@ -88,6 +77,7 @@ export default class CellRenderer<ItemT> extends React.PureComponent<
         },
       };
     }
+    return null;
   }
 
   // TODO: consider factoring separator stuff out of VirtualizedList into FlatList since it's not
@@ -219,7 +209,7 @@ export default class CellRenderer<ItemT> extends React.PureComponent<
       : horizontal
         ? [styles.row, inversionStyle]
         : inversionStyle;
-    const result = !CellRendererComponent ? (
+    let result = !CellRendererComponent ? ( // [macOS]
       <View
         style={cellStyle}
         onFocusCapture={this._onCellFocusCapture}
@@ -240,6 +230,11 @@ export default class CellRenderer<ItemT> extends React.PureComponent<
       </CellRendererComponent>
     );
 
+    if (Platform.OS === 'macos') {
+      // [macOS
+      result = React.cloneElement(result, {collapsable: false});
+    } // macOS]
+
     return (
       <VirtualizedListCellContextProvider cellKey={this.props.cellKey}>
         {result}

package/Lists/VirtualizedSectionList.js

@@ -146,7 +146,7 @@ class VirtualizedSectionList<
     this._listRef.scrollToIndex(toIndexParams);
   }
 
-  getListRef(): ?React.ElementRef<typeof VirtualizedList> {
+  getListRef(): ?VirtualizedList {
     return this._listRef;
   }
 
@@ -598,14 +598,12 @@ function ItemWithSeparator(props: ItemWithSeparatorProps): React.Node {
   );
 }
 
-/* $FlowFixMe[class-object-subtyping] added when improving typing for this
- * parameters */
-// $FlowFixMe[method-unbinding]
-module.exports = (VirtualizedSectionList: React.AbstractComponent<
-  React.ElementConfig<typeof VirtualizedSectionList>,
-  $ReadOnly<{
-    getListRef: () => ?React.ElementRef<typeof VirtualizedList>,
-    scrollToLocation: (params: ScrollToLocationParamsType) => void,
-    ...
-  }>,
->);
+module.exports = VirtualizedSectionList as component(
+  ref: React.RefSetter<
+    interface {
+      getListRef(): ?VirtualizedList,
+      scrollToLocation(params: ScrollToLocationParamsType): void,
+    },
+  >,
+  ...Props<SectionBase<any>>
+);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@react-native-macos/virtualized-lists",
-  "version": "0.76.11",
+  "version": "0.77.6",
   "description": "Virtualized lists for React Native macOS.",
   "license": "MIT",
   "repository": {