@react-aria/virtualizer 4.0.4 → 4.1.1

package/src/ScrollView.tsx

@@ -44,7 +44,7 @@ function ScrollView(props: ScrollViewProps, ref: ForwardedRef<HTMLDivElement | n
 
   return (
     <div role="presentation" {...scrollViewProps} ref={ref}>
-      <div role="presentation" {...contentProps}>
+      <div {...contentProps}>
         {props.children}
       </div>
     </div>
@@ -69,7 +69,7 @@ export function useScrollView(props: ScrollViewProps, ref: RefObject<HTMLElement
     scrollTop: 0,
     scrollLeft: 0,
     scrollEndTime: 0,
-    scrollTimeout: null,
+    scrollTimeout: null as ReturnType<typeof setTimeout> | null,
     width: 0,
     height: 0,
     isScrolling: false
@@ -114,7 +114,10 @@ export function useScrollView(props: ScrollViewProps, ref: RefObject<HTMLElement
       if (state.scrollEndTime <= now + 50) {
         state.scrollEndTime = now + 300;
 
-        clearTimeout(state.scrollTimeout);
+        if (state.scrollTimeout != null) {
+          clearTimeout(state.scrollTimeout);
+        }
+
         state.scrollTimeout = setTimeout(() => {
           state.isScrolling = false;
           setScrolling(false);
@@ -132,10 +135,13 @@ export function useScrollView(props: ScrollViewProps, ref: RefObject<HTMLElement
   // Attach event directly to ref so RAC Virtualizer doesn't need to send props upward.
   useEvent(ref, 'scroll', onScroll);
 
-  // eslint-disable-next-line arrow-body-style
+   
   useEffect(() => {
     return () => {
-      clearTimeout(state.scrollTimeout);
+      if (state.scrollTimeout != null) {
+        clearTimeout(state.scrollTimeout);
+      }
+
       if (state.isScrolling) {
         window.dispatchEvent(new Event('tk.connect-observer'));
       }
@@ -146,7 +152,7 @@ export function useScrollView(props: ScrollViewProps, ref: RefObject<HTMLElement
   let isUpdatingSize = useRef(false);
   let updateSize = useEffectEvent((flush: typeof flushSync) => {
     let dom = ref.current;
-    if (!dom && !isUpdatingSize.current) {
+    if (!dom || isUpdatingSize.current) {
       return;
     }
 

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,33 @@ 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>) {
+// forwardRef doesn't support generic parameters, so cast the result to the correct type
+// https://stackoverflow.com/questions/58469229/react-with-typescript-generics-while-using-react-forwardref
+export const Virtualizer = React.forwardRef(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
@@ -83,12 +84,7 @@ function Virtualizer<T extends object, V extends ReactNode, O>(props: Virtualize
       {renderChildren(null, state.visibleViews, renderWrapper || defaultRenderWrapper)}
     </ScrollView>
   );
-}
-
-// forwardRef doesn't support generic parameters, so cast the result to the correct type
-// https://stackoverflow.com/questions/58469229/react-with-typescript-generics-while-using-react-forwardref
-const _Virtualizer = React.forwardRef(Virtualizer) as <T extends object, V, O>(props: VirtualizerProps<T, V, O> & {ref?: RefObject<HTMLDivElement | null>}) => ReactElement;
-export {_Virtualizer as Virtualizer};
+}) as <T extends object, V, O>(props: VirtualizerProps<T, V, O> & {ref?: RefObject<HTMLDivElement | null>}) => ReactElement;
 
 function renderChildren<T extends object, V>(parent: ReusableView<T, V> | null, views: ReusableView<T, V>[], renderWrapper: RenderWrapper<T, V>) {
   return views.map(view => {
@@ -108,7 +104,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) {