Refactor overlays to be positioned in the inverse direction

.storybook-v3/config.js

@@ -24,8 +24,8 @@ addParameters({
 addDecorator(withA11y);
 
 addDecorator(story => (
-  <VerticalCenter style={{textAlign: 'left', padding: '50px', minHeight: isChromatic() ? null : '100vh', boxSizing: 'border-box', display: 'flex', justifyContent: 'center'}}>
-    <div style={{maxWidth: '100%'}}>{story()}</div>
+  <VerticalCenter style={{textAlign: 'left', alignItems: 'center', minHeight: isChromatic() ? null : '100vh', boxSizing: 'border-box', display: 'flex', justifyContent: 'center'}}>
+    {story()}
   </VerticalCenter>
 ));
 

.storybook-v3/custom-addons/provider/index.js

@@ -5,6 +5,8 @@ import {Provider} from '@react-spectrum/provider';
 import {themes, defaultTheme} from '../../constants';
 import {StatusLight} from '@react-spectrum/statuslight';
 
+document.body.style.margin = 0;
+
 const providerValuesFromUrl = Object.entries(getQueryParams()).reduce((acc, [k, v]) => {
   if (k.includes('providerSwitcher-')) {
     return { ...acc, [k.replace('providerSwitcher-', '')]: v };
@@ -47,7 +49,7 @@ function ProviderUpdater(props) {
 
   return (
     <Provider theme={theme} colorScheme={colorScheme} scale={scaleValue} locale={localeValue} toastPlacement={toastPositionValue} typekitId="pbi5ojv">
-      <div style={{paddingTop: '20px', paddingLeft: '20px', paddingRight: '20px'}}><div style={{fontSize: '18px', paddingLeft: '10px', paddingRight: '10px'}}><strong>Status</strong></div><StatusLight variant={props.options.status || 'negative'}>{statusMap[props.options.status || 'negative']}</StatusLight></div>
+      <div style={{position: 'absolute', paddingTop: '20px', paddingLeft: '20px', paddingRight: '20px'}}><div style={{fontSize: '18px', paddingLeft: '10px', paddingRight: '10px'}}><strong>Status</strong></div><StatusLight variant={props.options.status || 'negative'}>{statusMap[props.options.status || 'negative']}</StatusLight></div>
       {storyReady && props.children}
     </Provider>
   );

packages/@react-aria/collections/src/CollectionView.tsx

@@ -13,7 +13,7 @@
 import {chain} from '@react-aria/utils';
 import {Collection, Layout} from '@react-stately/collections';
 import {CollectionItem} from './CollectionItem';
-import React, {FocusEvent, HTMLAttributes, Key, ReactElement, useCallback, useEffect, useRef} from 'react';
+import React, {FocusEvent, HTMLAttributes, Key, ReactElement, RefObject, useCallback, useEffect, useRef} from 'react';
 import {ReusableView} from '@react-stately/collections';
 import {ScrollView} from './ScrollView';
 import {useCollectionState} from '@react-stately/collections';
@@ -32,7 +32,7 @@ interface CollectionViewProps<T extends object, V> extends HTMLAttributes<HTMLEl
   sizeToFit?: 'width' | 'height'
 }
 
-export function CollectionView<T extends object, V>(props: CollectionViewProps<T, V>) {
+function CollectionView<T extends object, V>(props: CollectionViewProps<T, V>, ref: RefObject<HTMLDivElement>) {
   let {children: renderView, renderWrapper, layout, collection, focusedKey, sizeToFit, ...otherProps} = props;
   let {
     visibleViews,
@@ -50,7 +50,8 @@ export function CollectionView<T extends object, V>(props: CollectionViewProps<T
     renderWrapper: renderWrapper || defaultRenderWrapper
   });
 
-  let ref = useRef<HTMLDivElement>();
+  let fallbackRef = useRef<HTMLDivElement>();
+  ref = ref || fallbackRef;
 
   // Scroll to the focusedKey when it changes. Actually focusing the focusedKey
   // is up to the implementation using CollectionView since we don't have refs
@@ -72,11 +73,11 @@ export function CollectionView<T extends object, V>(props: CollectionViewProps<T
     }
 
     isFocusWithin.current = e.target !== ref.current;
-  }, [focusedKey, collectionManager]);
+  }, [ref, collectionManager, focusedKey]);
 
   let onBlur = useCallback((e: FocusEvent) => {
     isFocusWithin.current = ref.current.contains(e.relatedTarget as Element);
-  }, []);
+  }, [ref]);
 
   // When the focused item is scrolled out of view and is removed from the DOM, 
   // move focus to the collection view as a whole if focus was within before.
@@ -106,6 +107,11 @@ export function CollectionView<T extends object, V>(props: CollectionViewProps<T
   );
 }
 
+// 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 _CollectionView = React.forwardRef(CollectionView) as <T extends object, V>(props: CollectionViewProps<T, V> & {ref?: RefObject<HTMLDivElement>}) => ReactElement;
+export {_CollectionView as CollectionView};
+
 function defaultRenderWrapper<T extends object, V>(
   parent: ReusableView<T, V> | null,
   reusableView: ReusableView<T, V>