@react-aria/virtualizer 3.10.2-nightly.4674 → 3.10.2-nightly.4683

package/src/ScrollView.tsx

@@ -15,6 +15,7 @@ import {flushSync} from 'react-dom';
 import {getScrollLeft} from './utils';
 import React, {
   CSSProperties,
+  ForwardedRef,
   HTMLAttributes,
   ReactNode,
   RefObject,
@@ -24,13 +25,13 @@ import React, {
   useState
 } from 'react';
 import {Rect, Size} from '@react-stately/virtualizer';
-import {useEffectEvent, useLayoutEffect, useResizeObserver} from '@react-aria/utils';
+import {useEffectEvent, useEvent, useLayoutEffect, useObjectRef, useResizeObserver} from '@react-aria/utils';
 import {useLocale} from '@react-aria/i18n';
 
 interface ScrollViewProps extends HTMLAttributes<HTMLElement> {
   contentSize: Size,
   onVisibleRectChange: (rect: Rect) => void,
-  children: ReactNode,
+  children?: ReactNode,
   innerStyle?: CSSProperties,
   sizeToFit?: 'width' | 'height',
   onScrollStart?: () => void,
@@ -38,11 +39,26 @@ interface ScrollViewProps extends HTMLAttributes<HTMLElement> {
   scrollDirection?: 'horizontal' | 'vertical' | 'both'
 }
 
-function ScrollView(props: ScrollViewProps, ref: RefObject<HTMLDivElement>) {
+function ScrollView(props: ScrollViewProps, ref: ForwardedRef<HTMLDivElement | null>) {
+  ref = useObjectRef(ref);
+  let {scrollViewProps, contentProps} = useScrollView(props, ref);
+
+  return (
+    <div role="presentation" {...scrollViewProps} ref={ref}>
+      <div role="presentation" {...contentProps}>
+        {props.children}
+      </div>
+    </div>
+  );
+}
+
+const ScrollViewForwardRef = React.forwardRef(ScrollView);
+export {ScrollViewForwardRef as ScrollView};
+
+export function useScrollView(props: ScrollViewProps, ref: RefObject<HTMLElement | null>) {
   let {
     contentSize,
     onVisibleRectChange,
-    children,
     innerStyle,
     sizeToFit,
     onScrollStart,
@@ -51,8 +67,6 @@ function ScrollView(props: ScrollViewProps, ref: RefObject<HTMLDivElement>) {
     ...otherProps
   } = props;
 
-  let defaultRef = useRef();
-  ref = ref || defaultRef;
   let state = useRef({
     scrollTop: 0,
     scrollLeft: 0,
@@ -114,6 +128,9 @@ function ScrollView(props: ScrollViewProps, ref: RefObject<HTMLDivElement>) {
     });
   }, [props, direction, state, contentSize, onVisibleRectChange, onScrollStart, onScrollEnd]);
 
+  // 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 () => {
@@ -166,16 +183,29 @@ function ScrollView(props: ScrollViewProps, ref: RefObject<HTMLDivElement>) {
     }
   });
 
+  let didUpdateSize = useRef(false);
   useLayoutEffect(() => {
-    // React doesn't allow flushSync inside effects so pass an identity function instead.
-    // This only happens on initial render. The resize observer will also call updateSize
-    // once it initializes, but we need earlier initialization in a layout effect to avoid
-    // a flash of missing content.
-    updateSize(fn => fn());
+    // React doesn't allow flushSync inside effects, so queue a microtask.
+    // We also need to wait until all refs are set (e.g. when passing a ref down from a parent).
+    queueMicrotask(() => {
+      if (!didUpdateSize.current) {
+        didUpdateSize.current = true;
+        updateSize(flushSync);
+      }
+    });
+  }, [updateSize]);
+  useEffect(() => {
+    if (!didUpdateSize.current) {
+      // If useEffect ran before the above microtask, we are in a synchronous render (e.g. act).
+      // Update the size here so that you don't need to mock timers in tests.
+      didUpdateSize.current = true;
+      updateSize(fn => fn());
+    }
   }, [updateSize]);
   let onResize = useCallback(() => {
     updateSize(flushSync);
   }, [updateSize]);
+
   // Watch border-box instead of of content-box so that we don't go into
   // an infinite loop when scrollbars appear or disappear.
   useResizeObserver({ref, box: 'border-box', onResize});
@@ -207,14 +237,13 @@ function ScrollView(props: ScrollViewProps, ref: RefObject<HTMLDivElement>) {
     ...innerStyle
   };
 
-  return (
-    <div role="presentation" {...otherProps} style={style} ref={ref} onScroll={onScroll}>
-      <div role="presentation" style={innerStyle}>
-        {children}
-      </div>
-    </div>
-  );
+  return {
+    scrollViewProps: {
+      ...otherProps,
+      style
+    },
+    contentProps: {
+      style: innerStyle
+    }
+  };
 }
-
-const ScrollViewForwardRef = React.forwardRef(ScrollView);
-export {ScrollViewForwardRef as ScrollView};

package/src/Virtualizer.tsx

@@ -37,7 +37,7 @@ interface VirtualizerProps<T extends object, V, O> extends Omit<HTMLAttributes<H
 
 export const VirtualizerContext = createContext<VirtualizerState<any, any, any> | null>(null);
 
-function Virtualizer<T extends object, V extends ReactNode, O>(props: VirtualizerProps<T, V, O>, ref: RefObject<HTMLDivElement>) {
+function Virtualizer<T extends object, V extends ReactNode, O>(props: VirtualizerProps<T, V, O>, ref: RefObject<HTMLDivElement | null>) {
   let {
     children: renderView,
     renderWrapper,
@@ -54,7 +54,7 @@ function Virtualizer<T extends object, V extends ReactNode, O>(props: Virtualize
     ...otherProps
   } = props;
 
-  let fallbackRef = useRef<HTMLDivElement>();
+  let fallbackRef = useRef<HTMLDivElement>(undefined);
   ref = ref || fallbackRef;
 
   let state = useVirtualizerState({
@@ -66,7 +66,7 @@ function Virtualizer<T extends object, V extends ReactNode, O>(props: Virtualize
       ref.current.scrollLeft = rect.x;
       ref.current.scrollTop = rect.y;
     },
-    persistedKeys: useMemo(() => focusedKey ? new Set([focusedKey]) : new Set(), [focusedKey]),
+    persistedKeys: useMemo(() => focusedKey != null ? new Set([focusedKey]) : new Set(), [focusedKey]),
     layoutOptions
   });
 
@@ -96,7 +96,7 @@ interface VirtualizerOptions {
 }
 
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
-export function useVirtualizer<T extends object, V extends ReactNode, W>(props: VirtualizerOptions, state: VirtualizerState<T, V, W>, ref: RefObject<HTMLElement>) {
+export function useVirtualizer<T extends object, V extends ReactNode, W>(props: VirtualizerOptions, state: VirtualizerState<T, V, W>, ref: RefObject<HTMLElement | null>) {
   let {isLoading, onLoadMore} = props;
   let {setVisibleRect, virtualizer} = state;
 
@@ -150,7 +150,7 @@ export function useVirtualizer<T extends object, V extends ReactNode, W>(props:
 
 // 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>}) => ReactElement;
+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};
 
 function defaultRenderWrapper<T extends object, V extends ReactNode>(

package/src/VirtualizerItem.tsx

@@ -17,7 +17,7 @@ import {useLocale} from '@react-aria/i18n';
 import {useVirtualizerItem, VirtualizerItemOptions} from './useVirtualizerItem';
 
 interface VirtualizerItemProps extends Omit<VirtualizerItemOptions, 'ref'> {
-  parent?: LayoutInfo,
+  parent?: LayoutInfo | null,
   className?: string,
   children: ReactNode
 }
@@ -25,7 +25,7 @@ interface VirtualizerItemProps extends Omit<VirtualizerItemOptions, 'ref'> {
 export function VirtualizerItem(props: VirtualizerItemProps) {
   let {className, layoutInfo, virtualizer, parent, children} = props;
   let {direction} = useLocale();
-  let ref = useRef();
+  let ref = useRef(undefined);
   useVirtualizerItem({
     layoutInfo,
     virtualizer,
@@ -74,7 +74,9 @@ export function layoutInfoToStyle(layoutInfo: LayoutInfo, dir: Direction, parent
     position: layoutInfo.isSticky ? 'sticky' : 'absolute',
     // Sticky elements are positioned in normal document flow. Display inline-block so that they don't push other sticky columns onto the following rows.
     display: layoutInfo.isSticky ? 'inline-block' : undefined,
-    overflow: layoutInfo.allowOverflow ? 'visible' : 'hidden',
+    // Use clip instead of hidden to avoid creating an implicit generic container in the accessibility tree in Firefox.
+    // Hidden still allows programmatic scrolling whereas clip does not.
+    overflow: layoutInfo.allowOverflow ? 'visible' : 'clip',
     opacity: layoutInfo.opacity,
     zIndex: layoutInfo.zIndex,
     transform: layoutInfo.transform,

package/src/index.ts

@@ -15,5 +15,5 @@ export type {VirtualizerItemOptions} from './useVirtualizerItem';
 export {useVirtualizer, Virtualizer, VirtualizerContext} from './Virtualizer';
 export {useVirtualizerItem} from './useVirtualizerItem';
 export {VirtualizerItem, layoutInfoToStyle} from './VirtualizerItem';
-export {ScrollView} from './ScrollView';
+export {ScrollView, useScrollView} from './ScrollView';
 export {getRTLOffsetType, getScrollLeft, setScrollLeft} from './utils';

package/src/useVirtualizerItem.ts

@@ -22,7 +22,7 @@ interface IVirtualizer {
 export interface VirtualizerItemOptions {
   layoutInfo: LayoutInfo,
   virtualizer: IVirtualizer,
-  ref: RefObject<HTMLElement>
+  ref: RefObject<HTMLElement | null>
 }
 
 export function useVirtualizerItem(options: VirtualizerItemOptions) {