@react-native-tvos/virtualized-lists 0.79.2-0 → 0.80.0-0

package/Lists/ListMetricsAggregator.js

@@ -9,7 +9,7 @@
  */
 
 import type {VirtualizedListProps} from './VirtualizedListProps';
-import type {LayoutRectangle} from 'react-native/Libraries/Types/CoreEventTypes';
+import type {LayoutRectangle} from 'react-native';
 
 import {keyExtractor as defaultKeyExtractor} from './VirtualizeUtils';
 import invariant from 'invariant';

package/Lists/VirtualizeUtils.js

@@ -10,9 +10,8 @@
 
 'use strict';
 
-import type ListMetricsAggregator, {
-  CellMetricProps,
-} from './ListMetricsAggregator';
+import type ListMetricsAggregator from './ListMetricsAggregator';
+import type {CellMetricProps} from './ListMetricsAggregator';
 
 import * as ReactNativeFeatureFlags from 'react-native/src/private/featureflags/ReactNativeFeatureFlags';
 

package/Lists/VirtualizedList.d.ts

@@ -131,8 +131,8 @@ export class VirtualizedList<ItemT> extends React.Component<
   recordInteraction: () => void;
 
   getScrollRef: () =>
-    | React.ElementRef<typeof ScrollView>
-    | React.ElementRef<typeof View>
+    | React.ComponentRef<typeof ScrollView>
+    | React.ComponentRef<typeof View>
     | null;
 
   getScrollResponder: () => ScrollResponderMixin | null;

package/Lists/VirtualizedList.js

@@ -17,12 +17,13 @@ import type {
   Separators,
   VirtualizedListProps,
 } from './VirtualizedListProps';
-import type {ScrollResponderType} from 'react-native/Libraries/Components/ScrollView/ScrollView';
-import type {ViewStyleProp} from 'react-native/Libraries/StyleSheet/StyleSheet';
 import type {
   LayoutChangeEvent,
   ScrollEvent,
-} from 'react-native/Libraries/Types/CoreEventTypes';
+  ScrollResponderType,
+  StyleProp,
+  ViewStyle,
+} from 'react-native';
 
 import clamp from '../Utilities/clamp';
 import infoLog from '../Utilities/infoLog';
@@ -53,6 +54,7 @@ import {
 import invariant from 'invariant';
 import nullthrows from 'nullthrows';
 import * as React from 'react';
+import {cloneElement, isValidElement} from 'react';
 import {
   I18nManager,
   Platform,
@@ -316,7 +318,7 @@ class VirtualizedList extends StateSafePureComponent<
     if (this._scrollRef && this._scrollRef.getScrollableNode) {
       return this._scrollRef.getScrollableNode();
     } else {
-      return findNodeHandle(this._scrollRef);
+      return findNodeHandle<$FlowFixMe>(this._scrollRef);
     }
   }
 
@@ -770,7 +772,7 @@ class VirtualizedList extends StateSafePureComponent<
     stickyIndicesFromProps: Set<number>,
     first: number,
     last: number,
-    inversionStyle: ViewStyleProp,
+    inversionStyle: StyleProp<ViewStyle>,
   ) {
     const {
       CellRendererComponent,
@@ -891,6 +893,30 @@ class VirtualizedList extends StateSafePureComponent<
     return key;
   }
 
+  _renderEmptyComponent(
+    element: ExactReactElement_DEPRECATED<any>,
+    inversionStyle: StyleProp<ViewStyle>,
+  ): React.Node {
+    // $FlowFixMe[prop-missing] React.Element internal inspection
+    const isFragment = element.type === React.Fragment;
+
+    if (isFragment) {
+      return element;
+    }
+
+    return cloneElement(element, {
+      onLayout: (event: LayoutChangeEvent) => {
+        this._onLayoutEmpty(event);
+        // $FlowFixMe[prop-missing] React.Element internal inspection
+        if (element.props.onLayout) {
+          element.props.onLayout(event);
+        }
+      },
+      // $FlowFixMe[prop-missing] React.Element internal inspection
+      style: StyleSheet.compose(inversionStyle, element.props.style),
+    });
+  }
+
   render(): React.Node {
     this._checkProps(this.props);
     const {ListEmptyComponent, ListFooterComponent, ListHeaderComponent} =
@@ -910,7 +936,7 @@ class VirtualizedList extends StateSafePureComponent<
       if (stickyIndicesFromProps.has(0)) {
         stickyHeaderIndices.push(0);
       }
-      const element = React.isValidElement(ListHeaderComponent) ? (
+      const element = isValidElement(ListHeaderComponent) ? (
         ListHeaderComponent
       ) : (
         // $FlowFixMe[not-a-component]
@@ -943,7 +969,7 @@ class VirtualizedList extends StateSafePureComponent<
     // 2a. Add a cell for ListEmptyComponent if applicable
     const itemCount = this.props.getItemCount(data);
     if (itemCount === 0 && ListEmptyComponent) {
-      const element: ExactReactElement_DEPRECATED<any> = ((React.isValidElement(
+      const element: ExactReactElement_DEPRECATED<any> = ((isValidElement(
         ListEmptyComponent,
       ) ? (
         ListEmptyComponent
@@ -956,17 +982,7 @@ class VirtualizedList extends StateSafePureComponent<
         <VirtualizedListCellContextProvider
           cellKey={this._getCellKey() + '-empty'}
           key="$empty">
-          {React.cloneElement(element, {
-            onLayout: (event: LayoutChangeEvent) => {
-              this._onLayoutEmpty(event);
-              // $FlowFixMe[prop-missing] React.Element internal inspection
-              if (element.props.onLayout) {
-                element.props.onLayout(event);
-              }
-            },
-            // $FlowFixMe[prop-missing] React.Element internal inspection
-            style: StyleSheet.compose(inversionStyle, element.props.style),
-          })}
+          {this._renderEmptyComponent(element, inversionStyle)}
         </VirtualizedListCellContextProvider>,
       );
     }
@@ -1043,7 +1059,7 @@ class VirtualizedList extends StateSafePureComponent<
 
     // 3. Add cell for ListFooterComponent
     if (ListFooterComponent) {
-      const element = React.isValidElement(ListFooterComponent) ? (
+      const element = isValidElement(ListFooterComponent) ? (
         ListFooterComponent
       ) : (
         // $FlowFixMe[not-a-component]
@@ -1141,11 +1157,14 @@ class VirtualizedList extends StateSafePureComponent<
             trapFocusDown={
               !horizontalOrDefault(this.props.horizontal) && this._hasMore
             }>
-            {React.cloneElement(
+            {cloneElement(
               (
                 this.props.renderScrollComponent ||
                 this._defaultRenderScrollComponent
-              )(scrollProps) as ExactReactElement_DEPRECATED<any>,
+              )(
+                // $FlowExpectedError[prop-missing] scrollProps is a superset of ScrollViewProps
+                scrollProps,
+              ) as ExactReactElement_DEPRECATED<any>,
               {
                 ref: this._captureScrollRef,
               },
@@ -1153,11 +1172,14 @@ class VirtualizedList extends StateSafePureComponent<
             )}
           </TVFocusGuideView>
         ) : (
-          React.cloneElement(
+          cloneElement(
             (
               this.props.renderScrollComponent ||
               this._defaultRenderScrollComponent
-            )(scrollProps) as ExactReactElement_DEPRECATED<any>,
+            )(
+              // $FlowExpectedError[prop-missing] scrollProps is a superset of ScrollViewProps
+              scrollProps,
+            ) as ExactReactElement_DEPRECATED<any>,
             {
               ref: this._captureScrollRef,
             },

package/Lists/VirtualizedListCellRenderer.js

@@ -9,11 +9,12 @@
  */
 
 import type {CellRendererProps, ListRenderItem} from './VirtualizedListProps';
-import type {ViewStyleProp} from 'react-native/Libraries/StyleSheet/StyleSheet';
 import type {
   FocusEvent,
   LayoutChangeEvent,
-} from 'react-native/Libraries/Types/CoreEventTypes';
+  StyleProp,
+  ViewStyle,
+} from 'react-native';
 
 import {VirtualizedListCellContextProvider} from './VirtualizedListContext.js';
 import invariant from 'invariant';
@@ -29,7 +30,7 @@ export type Props<ItemT> = {
   cellKey: string,
   horizontal: ?boolean,
   index: number,
-  inversionStyle: ViewStyleProp,
+  inversionStyle: StyleProp<ViewStyle>,
   item: ItemT,
   onCellLayout?: (
     event: LayoutChangeEvent,

package/Lists/VirtualizedListProps.js

@@ -13,14 +13,15 @@ import type {
   ViewabilityConfigCallbackPair,
   ViewToken,
 } from './ViewabilityHelper';
-import type {ViewStyleProp} from 'react-native/Libraries/StyleSheet/StyleSheet';
 import type {
   FocusEvent,
   LayoutChangeEvent,
-} from 'react-native/Libraries/Types/CoreEventTypes';
+  ScrollViewProps,
+  StyleProp,
+  ViewStyle,
+} from 'react-native';
 
 import * as React from 'react';
-import {typeof ScrollView} from 'react-native';
 
 export type Item = any;
 
@@ -45,7 +46,7 @@ export type CellRendererProps<ItemT> = $ReadOnly<{
   item: ItemT,
   onFocusCapture?: (event: FocusEvent) => void,
   onLayout?: (event: LayoutChangeEvent) => void,
-  style: ViewStyleProp,
+  style: StyleProp<ViewStyle>,
 }>;
 
 export type ListRenderItem<ItemT> = (
@@ -169,7 +170,7 @@ type OptionalProps = {
   /**
    * Styling for internal View for ListFooterComponent
    */
-  ListFooterComponentStyle?: ViewStyleProp,
+  ListFooterComponentStyle?: StyleProp<ViewStyle>,
   /**
    * Rendered at the top of all the items. Can be a React Component Class, a render function, or
    * a rendered element.
@@ -178,7 +179,7 @@ type OptionalProps = {
   /**
    * Styling for internal View for ListHeaderComponent
    */
-  ListHeaderComponentStyle?: ViewStyleProp,
+  ListHeaderComponentStyle?: StyleProp<ViewStyle>,
   /**
    * The maximum number of items to render in each incremental render batch. The more rendered at
    * once, the better the fill rate, but responsiveness may suffer because rendering content may
@@ -258,7 +259,7 @@ type OptionalProps = {
   /**
    * Render a custom scroll component, e.g. with a differently styled `RefreshControl`.
    */
-  renderScrollComponent?: (props: Object) => React.MixedElement,
+  renderScrollComponent?: (props: ScrollViewProps) => React.MixedElement,
   /**
    * Amount of time between low-pri item render batches, e.g. for rendering items quite a ways off
    * screen. Similar fill rate/responsiveness tradeoff as `maxToRenderPerBatch`.
@@ -284,7 +285,7 @@ type OptionalProps = {
 };
 
 export type VirtualizedListProps = {
-  ...React.ElementConfig<ScrollView>,
+  ...ScrollViewProps,
   ...RequiredProps,
   ...OptionalProps,
 };

package/Lists/VirtualizedSectionList.js

@@ -9,14 +9,24 @@
  */
 
 import type {ViewToken} from './ViewabilityHelper';
+import type {VirtualizedListProps} from './VirtualizedListProps';
 
 import VirtualizedList from './VirtualizedList';
 import {keyExtractor as defaultKeyExtractor} from './VirtualizeUtils';
 import invariant from 'invariant';
 import * as React from 'react';
-type Item = any;
 
-export type SectionBase<SectionItemT> = {
+type DefaultSectionT = {
+  data: any,
+  [key: string]: any,
+};
+
+export type SectionData<SectionItemT, SectionT = DefaultSectionT> =
+  | ($ReadOnly<SectionBase<SectionItemT, SectionT>> & SectionT)
+  | (SectionBase<SectionItemT, SectionT> & SectionT)
+  | SectionT;
+
+export type SectionBase<SectionItemT, SectionT = DefaultSectionT> = {
   /**
    * The data for rendering items in this section.
    */
@@ -30,7 +40,7 @@ export type SectionBase<SectionItemT> = {
   renderItem?: ?(info: {
     item: SectionItemT,
     index: number,
-    section: SectionBase<SectionItemT>,
+    section: SectionData<SectionItemT, SectionT>,
     separators: {
       highlight: () => void,
       unhighlight: () => void,
@@ -40,20 +50,20 @@ export type SectionBase<SectionItemT> = {
     ...
   }) => null | React.MixedElement,
   ItemSeparatorComponent?: ?React.ComponentType<any>,
-  keyExtractor?: (item: SectionItemT, index?: ?number) => string,
+  keyExtractor?: (item: ?SectionItemT, index?: ?number) => string,
   ...
 };
 
-type RequiredProps<SectionT: SectionBase<any>> = {
-  sections: $ReadOnlyArray<SectionT>,
+type RequiredProps<ItemT, SectionT = DefaultSectionT> = {
+  sections: $ReadOnlyArray<SectionData<ItemT, SectionT>>,
 };
 
-type OptionalProps<SectionT: SectionBase<any>> = {
+type OptionalProps<ItemT, SectionT = DefaultSectionT> = {
   /**
    * Default renderer for every item in every section.
    */
   renderItem?: (info: {
-    item: Item,
+    item: ItemT,
     index: number,
     section: SectionT,
     separators: {
@@ -89,19 +99,10 @@ type OptionalProps<SectionT: SectionBase<any>> = {
   onEndReached?: ?({distanceFromEnd: number, ...}) => void,
 };
 
-type VirtualizedListProps = React.ElementConfig<typeof VirtualizedList>;
-
-export type VirtualizedSectionListProps<SectionT: SectionBase<any>> = {
-  ...RequiredProps<SectionT>,
-  ...OptionalProps<SectionT>,
-  ...$Diff<
-    VirtualizedListProps,
-    {
-      renderItem: $PropertyType<VirtualizedListProps, 'renderItem'>,
-      data: $PropertyType<VirtualizedListProps, 'data'>,
-      ...
-    },
-  >,
+export type VirtualizedSectionListProps<ItemT, SectionT = DefaultSectionT> = {
+  ...RequiredProps<ItemT, SectionT>,
+  ...OptionalProps<ItemT, SectionT>,
+  ...Omit<VirtualizedListProps, 'data' | 'renderItem'>,
 };
 export type ScrollToLocationParamsType = {
   animated?: ?boolean,
@@ -119,8 +120,12 @@ type State = {childProps: VirtualizedListProps, ...};
  * sections when new props are received, which should be plenty fast for up to ~10,000 items.
  */
 class VirtualizedSectionList<
-  SectionT: SectionBase<any>,
-> extends React.PureComponent<VirtualizedSectionListProps<SectionT>, State> {
+  ItemT,
+  SectionT: SectionBase<ItemT, DefaultSectionT> = DefaultSectionT,
+> extends React.PureComponent<
+  VirtualizedSectionListProps<ItemT, SectionT>,
+  State,
+> {
   scrollToLocation(params: ScrollToLocationParamsType) {
     let index = params.itemIndex;
     for (let i = 0; i < params.sectionIndex; i++) {
@@ -203,10 +208,10 @@ class VirtualizedSectionList<
   }
 
   _getItem(
-    props: VirtualizedSectionListProps<SectionT>,
-    sections: ?$ReadOnlyArray<Item>,
+    props: VirtualizedSectionListProps<ItemT, SectionT>,
+    sections: ?$ReadOnlyArray<SectionData<ItemT, SectionT>>,
     index: number,
-  ): ?Item {
+  ): ?ItemT {
     if (!sections) {
       return null;
     }
@@ -219,6 +224,7 @@ class VirtualizedSectionList<
         // We intend for there to be overflow by one on both ends of the list.
         // This will be for headers and footers. When returning a header or footer
         // item the section itself is the item.
+        // $FlowIgnore[incompatible-return]
         return section;
       } else if (itemIdx < itemCount) {
         // If we are in the bounds of the list's data then return the item.
@@ -231,23 +237,23 @@ class VirtualizedSectionList<
   }
 
   // $FlowFixMe[missing-local-annot]
-  _keyExtractor = (item: Item, index: number) => {
+  _keyExtractor = (item: ItemT, index: number) => {
     const info = this._subExtractor(index);
     return (info && info.key) || String(index);
   };
 
   _subExtractor(index: number): ?{
-    section: SectionT,
+    section: SectionData<ItemT, SectionT>,
     // Key of the section or combined key for section + item
     key: string,
     // Relative index within the section
     index: ?number,
     // True if this is the section header
     header?: ?boolean,
-    leadingItem?: ?Item,
-    leadingSection?: ?SectionT,
-    trailingItem?: ?Item,
-    trailingSection?: ?SectionT,
+    leadingItem?: ?ItemT,
+    leadingSection?: ?SectionData<ItemT, SectionT>,
+    trailingItem?: ?ItemT,
+    trailingSection?: ?SectionData<ItemT, SectionT>,
     ...
   } {
     let itemIndex = index;
@@ -336,7 +342,7 @@ class VirtualizedSectionList<
   _renderItem =
     (listItemCount: number): $FlowFixMe =>
     // eslint-disable-next-line react/no-unstable-nested-components
-    ({item, index}: {item: Item, index: number, ...}) => {
+    ({item, index}: {item: ItemT, index: number, ...}) => {
       const info = this._subExtractor(index);
       if (!info) {
         return null;
@@ -453,21 +459,21 @@ class VirtualizedSectionList<
   };
 }
 
-type ItemWithSeparatorCommonProps = $ReadOnly<{
-  leadingItem: ?Item,
+type ItemWithSeparatorCommonProps<ItemT> = $ReadOnly<{
+  leadingItem: ?ItemT,
   leadingSection: ?Object,
   section: Object,
-  trailingItem: ?Item,
+  trailingItem: ?ItemT,
   trailingSection: ?Object,
 }>;
 
-type ItemWithSeparatorProps = $ReadOnly<{
-  ...ItemWithSeparatorCommonProps,
+type ItemWithSeparatorProps<ItemT> = $ReadOnly<{
+  ...ItemWithSeparatorCommonProps<ItemT>,
   LeadingSeparatorComponent: ?React.ComponentType<any>,
   SeparatorComponent: ?React.ComponentType<any>,
   cellKey: string,
   index: number,
-  item: Item,
+  item: ItemT,
   setSelfHighlightCallback: (
     cellKey: string,
     updateFn: ?(boolean) => void,
@@ -483,7 +489,9 @@ type ItemWithSeparatorProps = $ReadOnly<{
   inverted: boolean,
 }>;
 
-function ItemWithSeparator(props: ItemWithSeparatorProps): React.Node {
+function ItemWithSeparator<ItemT>(
+  props: ItemWithSeparatorProps<ItemT>,
+): React.Node {
   const {
     LeadingSeparatorComponent,
     // this is the trailing separator and is associated with this item
@@ -505,14 +513,18 @@ function ItemWithSeparator(props: ItemWithSeparatorProps): React.Node {
 
   const [separatorHighlighted, setSeparatorHighlighted] = React.useState(false);
 
-  const [leadingSeparatorProps, setLeadingSeparatorProps] = React.useState({
+  const [leadingSeparatorProps, setLeadingSeparatorProps] = React.useState<
+    ItemWithSeparatorCommonProps<ItemT>,
+  >({
     leadingItem: props.leadingItem,
     leadingSection: props.leadingSection,
     section: props.section,
     trailingItem: props.item,
     trailingSection: props.trailingSection,
   });
-  const [separatorProps, setSeparatorProps] = React.useState({
+  const [separatorProps, setSeparatorProps] = React.useState<
+    ItemWithSeparatorCommonProps<ItemT>,
+  >({
     leadingItem: props.item,
     leadingSection: props.leadingSection,
     section: props.section,
@@ -553,7 +565,7 @@ function ItemWithSeparator(props: ItemWithSeparatorProps): React.Node {
     },
     updateProps: (
       select: 'leading' | 'trailing',
-      newProps: Partial<ItemWithSeparatorCommonProps>,
+      newProps: Partial<ItemWithSeparatorCommonProps<ItemT>>,
     ) => {
       if (select === 'leading') {
         if (LeadingSeparatorComponent != null) {
@@ -598,12 +610,22 @@ function ItemWithSeparator(props: ItemWithSeparatorProps): React.Node {
   );
 }
 
-export default VirtualizedSectionList as component(
+const VirtualizedSectionListComponent = VirtualizedSectionList as component<
+  ItemT,
+  SectionT: SectionBase<ItemT, DefaultSectionT> = DefaultSectionT,
+>(
   ref: React.RefSetter<
     interface {
       getListRef(): ?VirtualizedList,
       scrollToLocation(params: ScrollToLocationParamsType): void,
     },
   >,
-  ...VirtualizedSectionListProps<SectionBase<any>>
+  ...VirtualizedSectionListProps<ItemT, SectionT>
 );
+
+export default VirtualizedSectionListComponent;
+
+export type AnyVirtualizedSectionList = typeof VirtualizedSectionListComponent<
+  any,
+  any,
+>;

package/index.js

@@ -13,7 +13,7 @@
 import typeof FillRateHelper from './Lists/FillRateHelper';
 import typeof ViewabilityHelper from './Lists/ViewabilityHelper';
 import typeof VirtualizedList from './Lists/VirtualizedList';
-import typeof VirtualizedSectionList from './Lists/VirtualizedSectionList';
+import type {AnyVirtualizedSectionList} from './Lists/VirtualizedSectionList';
 
 import {typeof VirtualizedListContextResetter} from './Lists/VirtualizedListContext';
 import {keyExtractor} from './Lists/VirtualizeUtils';
@@ -29,11 +29,13 @@ export type {
   ListRenderItemInfo,
   ListRenderItem,
   Separators,
+  VirtualizedListProps,
 } from './Lists/VirtualizedListProps';
 export type {
   VirtualizedSectionListProps,
   ScrollToLocationParamsType,
   SectionBase,
+  SectionData,
 } from './Lists/VirtualizedSectionList';
 export type {FillRateInfo} from './Lists/FillRateHelper';
 
@@ -43,7 +45,7 @@ export default {
   get VirtualizedList(): VirtualizedList {
     return require('./Lists/VirtualizedList').default;
   },
-  get VirtualizedSectionList(): VirtualizedSectionList {
+  get VirtualizedSectionList(): AnyVirtualizedSectionList {
     return require('./Lists/VirtualizedSectionList').default;
   },
   get VirtualizedListContextResetter(): VirtualizedListContextResetter {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@react-native-tvos/virtualized-lists",
-  "version": "0.79.2-0",
+  "version": "0.80.0-0",
   "description": "Virtualized lists for React Native.",
   "license": "MIT",
   "repository": {
@@ -19,12 +19,36 @@
   "engines": {
     "node": ">=18"
   },
+  "exports": {
+    ".": {
+      "react-native-strict-api": "./types_generated/index.d.ts",
+      "types": "./index.d.ts",
+      "default": "./index.js"
+    },
+    "./*": {
+      "types": null,
+      "default": "./*.js"
+    },
+    "./package.json": "./package.json"
+  },
+  "files": [
+    "index.js",
+    "index.d.ts",
+    "Lists",
+    "README.md",
+    "types_generated",
+    "Utilities",
+    "!**/__docs__/**",
+    "!**/__fixtures__/**",
+    "!**/__mocks__/**",
+    "!**/__tests__/**"
+  ],
   "dependencies": {
     "invariant": "^2.2.4",
     "nullthrows": "^1.1.1"
   },
   "devDependencies": {
-    "react-test-renderer": "19.0.0"
+    "react-test-renderer": "19.1.0"
   },
   "peerDependencies": {
     "@types/react": "^19.0.0",