@react-aria/virtualizer 4.0.4 → 4.1.0

package/src/Virtualizer.tsx

@@ -12,8 +12,8 @@
 
 import {Collection, Key, RefObject} from '@react-types/shared';
 import {Layout, Rect, ReusableView, useVirtualizerState} from '@react-stately/virtualizer';
-import {mergeProps, useLoadMore} from '@react-aria/utils';
-import React, {HTMLAttributes, ReactElement, ReactNode, useCallback, useRef} from 'react';
+import {mergeProps, useLoadMore, useObjectRef} from '@react-aria/utils';
+import React, {ForwardedRef, HTMLAttributes, ReactElement, ReactNode, useCallback} from 'react';
 import {ScrollView} from './ScrollView';
 import {VirtualizerItem} from './VirtualizerItem';
 
@@ -22,7 +22,7 @@ type RenderWrapper<T extends object, V> = (
   reusableView: ReusableView<T, V>,
   children: ReusableView<T, V>[],
   renderChildren: (views: ReusableView<T, V>[]) => ReactElement[]
-) => ReactElement;
+) => ReactElement | null;
 
 interface VirtualizerProps<T extends object, V, O> extends Omit<HTMLAttributes<HTMLElement>, 'children'> {
   children: (type: string, content: T) => V,
@@ -36,32 +36,31 @@ interface VirtualizerProps<T extends object, V, O> extends Omit<HTMLAttributes<H
   layoutOptions?: O
 }
 
-function Virtualizer<T extends object, V extends ReactNode, O>(props: VirtualizerProps<T, V, O>, ref: RefObject<HTMLDivElement | null>) {
+function Virtualizer<T extends object, V extends ReactNode, O>(props: VirtualizerProps<T, V, O>, forwardedRef: ForwardedRef<HTMLDivElement | null>) {
   let {
     children: renderView,
     renderWrapper,
     layout,
     collection,
     scrollDirection,
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars
     isLoading,
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars
     onLoadMore,
     persistedKeys,
     layoutOptions,
     ...otherProps
   } = props;
 
-  let fallbackRef = useRef<HTMLDivElement>(undefined);
-  ref = ref || fallbackRef;
+  let ref = useObjectRef(forwardedRef);
 
   let state = useVirtualizerState({
     layout,
     collection,
     renderView,
     onVisibleRectChange(rect) {
-      ref.current.scrollLeft = rect.x;
-      ref.current.scrollTop = rect.y;
+      if (ref.current) {
+        ref.current.scrollLeft = rect.x;
+        ref.current.scrollTop = rect.y;
+      }
     },
     persistedKeys,
     layoutOptions
@@ -108,7 +107,7 @@ function defaultRenderWrapper<T extends object, V extends ReactNode>(
   return (
     <VirtualizerItem
       key={reusableView.key}
-      layoutInfo={reusableView.layoutInfo}
+      layoutInfo={reusableView.layoutInfo!}
       virtualizer={reusableView.virtualizer}
       parent={parent?.layoutInfo}>
       {reusableView.rendered}

package/src/VirtualizerItem.tsx

@@ -17,6 +17,7 @@ import {useLocale} from '@react-aria/i18n';
 import {useVirtualizerItem, VirtualizerItemOptions} from './useVirtualizerItem';
 
 interface VirtualizerItemProps extends Omit<VirtualizerItemOptions, 'ref'> {
+  layoutInfo: LayoutInfo,
   parent?: LayoutInfo | null,
   style?: CSSProperties,
   className?: string,
@@ -26,7 +27,7 @@ interface VirtualizerItemProps extends Omit<VirtualizerItemOptions, 'ref'> {
 export function VirtualizerItem(props: VirtualizerItemProps) {
   let {style, className, layoutInfo, virtualizer, parent, children} = props;
   let {direction} = useLocale();
-  let ref = useRef(undefined);
+  let ref = useRef<HTMLDivElement | null>(null);
   useVirtualizerItem({
     layoutInfo,
     virtualizer,
@@ -57,7 +58,7 @@ export function layoutInfoToStyle(layoutInfo: LayoutInfo, dir: Direction, parent
     }
   }
 
-  let rectStyles = {
+  let rectStyles: Record<string, number | undefined> = {
     // TODO: For layoutInfos that are sticky that have parents with overflow visible, their "top" will be relative to the to the nearest scrolling container
     // which WON'T be the parent since the parent has overflow visible. This means we shouldn't offset the height by the parent's position
     // Not 100% about this change here since it is quite ambigious what the scrolling container maybe and how its top is positioned with respect to the
@@ -82,7 +83,7 @@ export function layoutInfoToStyle(layoutInfo: LayoutInfo, dir: Direction, parent
     overflow: layoutInfo.allowOverflow ? 'visible' : 'hidden',
     opacity: layoutInfo.opacity,
     zIndex: layoutInfo.zIndex,
-    transform: layoutInfo.transform,
+    transform: layoutInfo.transform ?? undefined,
     contain: 'size layout style',
     ...rectStyles
   };

package/src/useVirtualizerItem.ts

@@ -20,20 +20,21 @@ interface IVirtualizer {
 }
 
 export interface VirtualizerItemOptions {
-  layoutInfo: LayoutInfo,
+  layoutInfo: LayoutInfo | null,
   virtualizer: IVirtualizer,
   ref: RefObject<HTMLElement | null>
 }
 
 export function useVirtualizerItem(options: VirtualizerItemOptions) {
   let {layoutInfo, virtualizer, ref} = options;
+  let key = layoutInfo?.key;
 
   let updateSize = useCallback(() => {
-    if (layoutInfo) {
+    if (key != null && ref.current) {
       let size = getSize(ref.current);
-      virtualizer.updateItemSize(layoutInfo.key, size);
+      virtualizer.updateItemSize(key, size);
     }
-  }, [virtualizer, layoutInfo?.key, ref]);
+  }, [virtualizer, key, ref]);
 
   useLayoutEffect(() => {
     if (layoutInfo?.estimatedSize) {