From 14345d86d21975efefa57e7cf94181ca06ef1cf0 Mon Sep 17 00:00:00 2001
From: Daniel Lu <dl1644@gmail.com>
Date: Thu, 19 Aug 2021 11:45:00 -0700
Subject: [PATCH 01/11] moving useSelectableList scrolling code to
 useSelectableCollection

allows non virtualized tables/grids created with useTable/useGrid to have automatic scrolling when moving focus via arrow keys
---
 .../@react-aria/combobox/src/useComboBox.ts   |  4 +-
 packages/@react-aria/grid/src/useGrid.ts      |  3 +-
 .../selection/src/useSelectableCollection.ts  | 74 ++++++++++++++++++-
 .../selection/src/useSelectableList.ts        | 68 +----------------
 packages/@react-aria/tabs/src/useTabList.ts   |  6 +-
 packages/@react-types/tabs/src/index.d.ts     |  7 +-
 6 files changed, 89 insertions(+), 73 deletions(-)

diff --git a/packages/@react-aria/combobox/src/useComboBox.ts b/packages/@react-aria/combobox/src/useComboBox.ts
index eebbd093ffb..a08460b27b4 100644
--- a/packages/@react-aria/combobox/src/useComboBox.ts
+++ b/packages/@react-aria/combobox/src/useComboBox.ts
@@ -94,7 +94,9 @@ export function useComboBox<T>(props: AriaComboBoxProps<T>, state: ComboBoxState
     keyboardDelegate: delegate,
     disallowTypeAhead: true,
     disallowEmptySelection: true,
-    ref: inputRef
+    ref: inputRef,
+    // Prevent item scroll behavior from being applied here, should be handled in the user's Popover + ListBox component
+    isVirtualized: true
   });
 
   // For textfield specific keydown operations
diff --git a/packages/@react-aria/grid/src/useGrid.ts b/packages/@react-aria/grid/src/useGrid.ts
index 8c1555a5633..d0407baff76 100644
--- a/packages/@react-aria/grid/src/useGrid.ts
+++ b/packages/@react-aria/grid/src/useGrid.ts
@@ -83,7 +83,8 @@ export function useGrid<T>(props: GridProps, state: GridState<T, GridCollection<
   let {collectionProps} = useSelectableCollection({
     ref,
     selectionManager: state.selectionManager,
-    keyboardDelegate: delegate
+    keyboardDelegate: delegate,
+    isVirtualized
   });
 
   let id = useId();
diff --git a/packages/@react-aria/selection/src/useSelectableCollection.ts b/packages/@react-aria/selection/src/useSelectableCollection.ts
index d0724860867..32100d49702 100644
--- a/packages/@react-aria/selection/src/useSelectableCollection.ts
+++ b/packages/@react-aria/selection/src/useSelectableCollection.ts
@@ -76,7 +76,11 @@ interface SelectableCollectionOptions {
   /**
    * Whether navigation through tab key is enabled.
    */
-  allowsTabNavigation?: boolean
+  allowsTabNavigation?: boolean,
+  /**
+   * Whether the collection items are contained in a virtual scroller.
+   */
+  isVirtualized?: boolean
 }
 
 interface SelectableCollectionAria {
@@ -99,7 +103,8 @@ export function useSelectableCollection(options: SelectableCollectionOptions): S
     selectOnFocus = false,
     disallowTypeAhead = false,
     shouldUseVirtualFocus,
-    allowsTabNavigation = false
+    allowsTabNavigation = false,
+    isVirtualized
   } = options;
   let {direction} = useLocale();
 
@@ -319,6 +324,17 @@ export function useSelectableCollection(options: SelectableCollectionOptions): S
   // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
+  // If not virtualized, scroll the focused element into view when the focusedKey changes.
+  // When virtualized, Virtualizer handles this internally.
+  useEffect(() => {
+    if (!isVirtualized && manager.focusedKey && ref?.current) {
+      let element = ref.current.querySelector(`[data-key="${manager.focusedKey}"]`) as HTMLElement;
+      if (element) {
+        scrollIntoView(ref.current, element);
+      }
+    }
+  }, [isVirtualized, ref, manager.focusedKey]);
+
   let handlers = {
     onKeyDown,
     onFocus,
@@ -357,3 +373,57 @@ export function useSelectableCollection(options: SelectableCollectionOptions): S
     }
   };
 }
+
+/**
+ * Scrolls `scrollView` so that `element` is visible.
+ * Similar to `element.scrollIntoView({block: 'nearest'})` (not supported in Edge),
+ * but doesn't affect parents above `scrollView`.
+ */
+ function scrollIntoView(scrollView: HTMLElement, element: HTMLElement) {
+  let offsetX = relativeOffset(scrollView, element, 'left');
+  let offsetY = relativeOffset(scrollView, element, 'top');
+  let width = element.offsetWidth;
+  let height = element.offsetHeight;
+  let x = scrollView.scrollLeft;
+  let y = scrollView.scrollTop;
+  let maxX = x + scrollView.offsetWidth;
+  let maxY = y + scrollView.offsetHeight;
+
+  if (offsetX <= x) {
+    x = offsetX;
+  } else if (offsetX + width > maxX) {
+    x += offsetX + width - maxX;
+  }
+  if (offsetY <= y) {
+    y = offsetY;
+  } else if (offsetY + height > maxY) {
+    y += offsetY + height - maxY;
+  }
+
+  scrollView.scrollLeft = x;
+  scrollView.scrollTop = y;
+}
+
+/**
+ * Computes the offset left or top from child to ancestor by accumulating
+ * offsetLeft or offsetTop through intervening offsetParents.
+ */
+ function relativeOffset(ancestor: HTMLElement, child: HTMLElement, axis: 'left'|'top') {
+  const prop = axis === 'left' ? 'offsetLeft' : 'offsetTop';
+  let sum = 0;
+  while (child.offsetParent) {
+    sum += child[prop];
+    if (child.offsetParent === ancestor) {
+      // Stop once we have found the ancestor we are interested in.
+      break;
+    } else if (child.offsetParent.contains(ancestor)) {
+      // If the ancestor is not `position:relative`, then we stop at
+      // _its_ offset parent, and we subtract off _its_ offset, so that
+      // we end up with the proper offset from child to ancestor.
+      sum -= ancestor[prop];
+      break;
+    }
+    child = child.offsetParent as HTMLElement;
+  }
+  return sum;
+}
diff --git a/packages/@react-aria/selection/src/useSelectableList.ts b/packages/@react-aria/selection/src/useSelectableList.ts
index e64290276cb..ce4d107c135 100644
--- a/packages/@react-aria/selection/src/useSelectableList.ts
+++ b/packages/@react-aria/selection/src/useSelectableList.ts
@@ -109,17 +109,6 @@ export function useSelectableList(props: SelectableListOptions): SelectableListA
   let collator = useCollator({usage: 'search', sensitivity: 'base'});
   let delegate = useMemo(() => keyboardDelegate || new ListKeyboardDelegate(collection, disabledKeys, ref, collator), [keyboardDelegate, collection, disabledKeys, ref, collator]);
 
-  // If not virtualized, scroll the focused element into view when the focusedKey changes.
-  // When virtualized, Virtualizer handles this internally.
-  useEffect(() => {
-    if (!isVirtualized && selectionManager.focusedKey && ref?.current) {
-      let element = ref.current.querySelector(`[data-key="${selectionManager.focusedKey}"]`) as HTMLElement;
-      if (element) {
-        scrollIntoView(ref.current, element);
-      }
-    }
-  }, [isVirtualized, ref, selectionManager.focusedKey]);
-
   let {collectionProps} = useSelectableCollection({
     ref,
     selectionManager,
@@ -130,64 +119,11 @@ export function useSelectableList(props: SelectableListOptions): SelectableListA
     selectOnFocus,
     disallowTypeAhead,
     shouldUseVirtualFocus,
-    allowsTabNavigation
+    allowsTabNavigation,
+    isVirtualized
   });
 
   return {
     listProps: collectionProps
   };
 }
-
-/**
- * Scrolls `scrollView` so that `element` is visible.
- * Similar to `element.scrollIntoView({block: 'nearest'})` (not supported in Edge),
- * but doesn't affect parents above `scrollView`.
- */
-function scrollIntoView(scrollView: HTMLElement, element: HTMLElement) {
-  let offsetX = relativeOffset(scrollView, element, 'left');
-  let offsetY = relativeOffset(scrollView, element, 'top');
-  let width = element.offsetWidth;
-  let height = element.offsetHeight;
-  let x = scrollView.scrollLeft;
-  let y = scrollView.scrollTop;
-  let maxX = x + scrollView.offsetWidth;
-  let maxY = y + scrollView.offsetHeight;
-
-  if (offsetX <= x) {
-    x = offsetX;
-  } else if (offsetX + width > maxX) {
-    x += offsetX + width - maxX;
-  }
-  if (offsetY <= y) {
-    y = offsetY;
-  } else if (offsetY + height > maxY) {
-    y += offsetY + height - maxY;
-  }
-
-  scrollView.scrollLeft = x;
-  scrollView.scrollTop = y;
-}
-
-/**
- * Computes the offset left or top from child to ancestor by accumulating
- * offsetLeft or offsetTop through intervening offsetParents.
- */
-function relativeOffset(ancestor: HTMLElement, child: HTMLElement, axis: 'left'|'top') {
-  const prop = axis === 'left' ? 'offsetLeft' : 'offsetTop';
-  let sum = 0;
-  while (child.offsetParent) {
-    sum += child[prop];
-    if (child.offsetParent === ancestor) {
-      // Stop once we have found the ancestor we are interested in.
-      break;
-    } else if (child.offsetParent.contains(ancestor)) {
-      // If the ancestor is not `position:relative`, then we stop at 
-      // _its_ offset parent, and we subtract off _its_ offset, so that
-      // we end up with the proper offset from child to ancestor.
-      sum -= ancestor[prop];
-      break;
-    }
-    child = child.offsetParent as HTMLElement;
-  }
-  return sum;
-}
diff --git a/packages/@react-aria/tabs/src/useTabList.ts b/packages/@react-aria/tabs/src/useTabList.ts
index 52ef4df1ecd..cf352166ddc 100644
--- a/packages/@react-aria/tabs/src/useTabList.ts
+++ b/packages/@react-aria/tabs/src/useTabList.ts
@@ -32,7 +32,8 @@ interface TabListAria {
 export function useTabList<T>(props: AriaTabListProps<T>, state: TabListState<T>, ref: RefObject<HTMLElement>): TabListAria {
   let {
     orientation = 'horizontal',
-    keyboardActivation = 'automatic'
+    keyboardActivation = 'automatic',
+    isVirtualized
   } = props;
   let {
     collection,
@@ -51,7 +52,8 @@ export function useTabList<T>(props: AriaTabListProps<T>, state: TabListState<T>
     selectionManager: manager,
     keyboardDelegate: delegate,
     selectOnFocus: keyboardActivation === 'automatic',
-    disallowEmptySelection: true
+    disallowEmptySelection: true,
+    isVirtualized
   });
 
   // Compute base id for all tabs
diff --git a/packages/@react-types/tabs/src/index.d.ts b/packages/@react-types/tabs/src/index.d.ts
index d23598a2b2e..cfa58cee3c4 100644
--- a/packages/@react-types/tabs/src/index.d.ts
+++ b/packages/@react-types/tabs/src/index.d.ts
@@ -48,7 +48,12 @@ interface AriaTabListBase {
   isDisabled?: boolean
 }
 
-export interface AriaTabListProps<T> extends TabListProps<T>, AriaTabListBase, DOMProps, AriaLabelingProps {}
+export interface AriaTabListProps<T> extends TabListProps<T>, AriaTabListBase, DOMProps, AriaLabelingProps {
+  /**
+   * Whether the TabList is contained in a virtual scroller.
+   */
+  isVirtualized?: boolean
+}
 
 export interface AriaTabPanelProps extends DOMProps, AriaLabelingProps {}
 

From 33026c531c9ce228bdccc7fe442c0c9fe7110041 Mon Sep 17 00:00:00 2001
From: Daniel Lu <dl1644@gmail.com>
Date: Thu, 19 Aug 2021 15:17:18 -0700
Subject: [PATCH 02/11] adding stories and fixing useSelectableCollection
 scroll behavior

some components will have a ref that is not the same element as the scrollable region so add a prop for scrollRef
---
 .../@react-aria/combobox/docs/useComboBox.mdx |   4 +-
 .../@react-aria/combobox/stories/example.tsx  | 174 +++++++++++++++++
 .../combobox/stories/useComboBox.stories.tsx  |  35 ++++
 packages/@react-aria/grid/src/useGrid.ts      |  12 +-
 .../selection/src/useSelectableCollection.ts  |  17 +-
 .../selection/src/useSelectableList.ts        |   5 +-
 .../@react-aria/table/stories/example.tsx     | 183 ++++++++++++++++++
 .../table/stories/useTable.stories.tsx        |  68 +++++++
 packages/@react-aria/tabs/docs/useTabList.mdx |   4 +-
 packages/@react-aria/tabs/src/useTabList.ts   |   3 +-
 packages/@react-aria/tabs/stories/example.tsx |  49 +++++
 .../tabs/stories/useTabList.stories.tsx       |  39 ++++
 12 files changed, 577 insertions(+), 16 deletions(-)
 create mode 100644 packages/@react-aria/combobox/stories/example.tsx
 create mode 100644 packages/@react-aria/combobox/stories/useComboBox.stories.tsx
 create mode 100644 packages/@react-aria/table/stories/example.tsx
 create mode 100644 packages/@react-aria/table/stories/useTable.stories.tsx
 create mode 100644 packages/@react-aria/tabs/stories/example.tsx
 create mode 100644 packages/@react-aria/tabs/stories/useTabList.stories.tsx

diff --git a/packages/@react-aria/combobox/docs/useComboBox.mdx b/packages/@react-aria/combobox/docs/useComboBox.mdx
index a63ea097507..1d8f315e914 100644
--- a/packages/@react-aria/combobox/docs/useComboBox.mdx
+++ b/packages/@react-aria/combobox/docs/useComboBox.mdx
@@ -303,7 +303,9 @@ function ListBox(props) {
       style={{
         margin: 0,
         padding: 0,
-        listStyle: "none"
+        listStyle: "none",
+        maxHeight: "150px",
+        overflow: "auto"
       }}>
       {[...state.collection].map(item => (
         <Option
diff --git a/packages/@react-aria/combobox/stories/example.tsx b/packages/@react-aria/combobox/stories/example.tsx
new file mode 100644
index 00000000000..c4d0d87321f
--- /dev/null
+++ b/packages/@react-aria/combobox/stories/example.tsx
@@ -0,0 +1,174 @@
+import {FocusScope} from '@react-aria/focus';
+import React from 'react';
+import {useButton} from '@react-aria/button';
+import {useComboBoxState} from '@react-stately/combobox'
+import {useComboBox} from '@react-aria/combobox';
+import {useFilter} from '@react-aria/i18n';
+import {useListBox, useOption} from '@react-aria/listbox';
+import {useOverlay, DismissButton} from '@react-aria/overlays';
+
+export function ComboBox(props) {
+  // Setup filter function and state.
+  let {contains} = useFilter({sensitivity: 'base'});
+  let state = useComboBoxState({...props, defaultFilter: contains});
+
+  // Setup refs and get props for child elements.
+  let buttonRef = React.useRef(null);
+  let inputRef = React.useRef(null);
+  let listBoxRef = React.useRef(null);
+  let popoverRef = React.useRef(null);
+
+  let {buttonProps: triggerProps, inputProps, listBoxProps, labelProps} = useComboBox(
+    {
+      ...props,
+      inputRef,
+      buttonRef,
+      listBoxRef,
+      popoverRef,
+    },
+    state
+  );
+
+  // Call useButton to get props for the button element. Alternatively, you can
+  // pass the triggerProps to a separate Button component using useButton
+  // that you might already have in your component library.
+  let {buttonProps} = useButton(triggerProps, buttonRef);
+
+  return (
+    <div style={{display: 'inline-flex', flexDirection: 'column'}}>
+      <label {...labelProps}>{props.label}</label>
+      <div style={{position: 'relative', display: 'inline-block'}}>
+        <input
+          {...inputProps}
+          ref={inputRef}
+          style={{
+            height: 24,
+            boxSizing: 'border-box',
+            marginRight: 0,
+            fontSize: 16
+          }} />
+        <button
+          {...buttonProps}
+          ref={buttonRef}
+          style={{
+            height: 24,
+            marginLeft: 0
+          }}>
+          <span
+            aria-hidden="true"
+            style={{padding: '0 2px'}}>
+            ▼
+          </span>
+        </button>
+        {state.isOpen &&
+          <Popover popoverRef={popoverRef} isOpen={state.isOpen} onClose={state.close}>
+            <ListBox
+              {...listBoxProps}
+              listBoxRef={listBoxRef}
+              state={state} />
+          </Popover>
+        }
+      </div>
+    </div>
+  );
+}
+
+function Popover(props) {
+  let ref = React.useRef();
+  let {
+    popoverRef = ref,
+    isOpen,
+    onClose,
+    children,
+    ...otherProps
+  } = props;
+
+  // Handle events that should cause the popup to close,
+  // e.g. blur, clicking outside, or pressing the escape key.
+  let {overlayProps} = useOverlay({
+    isOpen,
+    onClose,
+    shouldCloseOnBlur: true,
+    isDismissable: true
+  }, popoverRef);
+
+  // Add a hidden <DismissButton> component at the end of the popover
+  // to allow screen reader users to dismiss the popup easily.
+  return (
+    <FocusScope restoreFocus>
+      <div
+        {...overlayProps}
+        ref={popoverRef}
+        style={{
+          position: "absolute",
+          width: "100%",
+          border: "1px solid gray",
+          background: "lightgray",
+          marginTop: 4
+        }}>
+        {children}
+        <DismissButton onDismiss={onClose} />
+      </div>
+    </FocusScope>
+  );
+}
+
+
+function ListBox(props) {
+  let ref = React.useRef();
+  let {listBoxRef = ref, state} = props;
+  let {listBoxProps} = useListBox(props, state, listBoxRef);
+
+  return (
+    <ul
+      {...listBoxProps}
+      ref={listBoxRef}
+      style={{
+        margin: 0,
+        padding: 0,
+        listStyle: "none",
+        maxHeight: "150px",
+        overflow: "auto"
+      }}>
+      {[...state.collection].map(item => (
+        <Option
+          key={item.key}
+          item={item}
+          state={state} />
+      ))}
+    </ul>
+  );
+}
+
+function Option({item, state}) {
+  let ref = React.useRef();
+  let {optionProps, isSelected, isFocused, isDisabled} = useOption({key: item.key}, state, ref);
+
+  let backgroundColor;
+  let color = 'black';
+
+  if (isSelected) {
+    backgroundColor = 'blueviolet';
+    color = 'white';
+  } else if (isFocused) {
+    backgroundColor = 'gray';
+  } else if (isDisabled) {
+    backgroundColor = 'transparent';
+    color = 'gray';
+  }
+
+  return (
+    <li
+      {...optionProps}
+      ref={ref}
+      style={{
+        background: backgroundColor,
+        color: color,
+        padding: '2px 5px',
+        outline: 'none',
+        cursor: 'pointer'
+      }}>
+      {item.rendered}
+    </li>
+  );
+}
diff --git a/packages/@react-aria/combobox/stories/useComboBox.stories.tsx b/packages/@react-aria/combobox/stories/useComboBox.stories.tsx
new file mode 100644
index 00000000000..05a015dbac3
--- /dev/null
+++ b/packages/@react-aria/combobox/stories/useComboBox.stories.tsx
@@ -0,0 +1,35 @@
+/*
+ * Copyright 2021 Adobe. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+import {ComboBox} from './example';
+import {Item} from '@react-stately/collections';
+import React from 'react';
+
+const meta = {
+  title: 'useComboBox'
+};
+
+export default meta;
+
+let lotsOfItems: any[] = [];
+for (let i = 0; i < 50; i++) {
+  lotsOfItems.push({name: 'Item ' + i});
+}
+
+const Template = () => () => (
+  <ComboBox label="Example" defaultItems={lotsOfItems}>
+    {(item: any) => <Item key={item.name}>{item.name}</Item>}
+  </ComboBox>
+);
+
+export const ScrollTesting = Template().bind({});
+ScrollTesting.args = {};
diff --git a/packages/@react-aria/grid/src/useGrid.ts b/packages/@react-aria/grid/src/useGrid.ts
index d0407baff76..d27a260bb43 100644
--- a/packages/@react-aria/grid/src/useGrid.ts
+++ b/packages/@react-aria/grid/src/useGrid.ts
@@ -40,7 +40,11 @@ export interface GridProps extends DOMProps, AriaLabelingProps {
    * A function that returns the text that should be announced by assistive technology when a row is added or removed from selection.
    * @default (key) => state.collection.getItem(key)?.textValue
    */
-  getRowText?: (key: Key) => string
+  getRowText?: (key: Key) => string,
+  /**
+   * The ref attached to the scrollable body. Used to provided automatic scrolling on item focus for non-virtualized grids.
+   */
+  scrollRef?: RefObject<HTMLElement>
 }
 
 export interface GridAria {
@@ -60,7 +64,8 @@ export function useGrid<T>(props: GridProps, state: GridState<T, GridCollection<
     isVirtualized,
     keyboardDelegate,
     focusMode,
-    getRowText = (key) => state.collection.getItem(key)?.textValue
+    getRowText = (key) => state.collection.getItem(key)?.textValue,
+    scrollRef
   } = props;
   let formatMessage = useMessageFormatter(intlMessages);
 
@@ -84,7 +89,8 @@ export function useGrid<T>(props: GridProps, state: GridState<T, GridCollection<
     ref,
     selectionManager: state.selectionManager,
     keyboardDelegate: delegate,
-    isVirtualized
+    isVirtualized,
+    scrollRef
   });
 
   let id = useId();
diff --git a/packages/@react-aria/selection/src/useSelectableCollection.ts b/packages/@react-aria/selection/src/useSelectableCollection.ts
index 32100d49702..4a3f6ed753f 100644
--- a/packages/@react-aria/selection/src/useSelectableCollection.ts
+++ b/packages/@react-aria/selection/src/useSelectableCollection.ts
@@ -80,7 +80,11 @@ interface SelectableCollectionOptions {
   /**
    * Whether the collection items are contained in a virtual scroller.
    */
-  isVirtualized?: boolean
+  isVirtualized?: boolean,
+  /**
+   * The ref attached to the scrollable body. Used to provided automatic scrolling on item focus for non-virtualized collections.
+   */
+  scrollRef?: RefObject<HTMLElement>
 }
 
 interface SelectableCollectionAria {
@@ -104,7 +108,8 @@ export function useSelectableCollection(options: SelectableCollectionOptions): S
     disallowTypeAhead = false,
     shouldUseVirtualFocus,
     allowsTabNavigation = false,
-    isVirtualized
+    isVirtualized,
+    scrollRef
   } = options;
   let {direction} = useLocale();
 
@@ -327,13 +332,13 @@ export function useSelectableCollection(options: SelectableCollectionOptions): S
   // If not virtualized, scroll the focused element into view when the focusedKey changes.
   // When virtualized, Virtualizer handles this internally.
   useEffect(() => {
-    if (!isVirtualized && manager.focusedKey && ref?.current) {
-      let element = ref.current.querySelector(`[data-key="${manager.focusedKey}"]`) as HTMLElement;
+    if (!isVirtualized && manager.focusedKey && scrollRef?.current) {
+      let element = scrollRef.current.querySelector(`[data-key="${manager.focusedKey}"]`) as HTMLElement;
       if (element) {
-        scrollIntoView(ref.current, element);
+        scrollIntoView(scrollRef.current, element);
       }
     }
-  }, [isVirtualized, ref, manager.focusedKey]);
+  }, [isVirtualized, scrollRef, manager.focusedKey]);
 
   let handlers = {
     onKeyDown,
diff --git a/packages/@react-aria/selection/src/useSelectableList.ts b/packages/@react-aria/selection/src/useSelectableList.ts
index ce4d107c135..82f4a468d1b 100644
--- a/packages/@react-aria/selection/src/useSelectableList.ts
+++ b/packages/@react-aria/selection/src/useSelectableList.ts
@@ -11,7 +11,7 @@
  */
 
 import {Collection, FocusStrategy, KeyboardDelegate, Node} from '@react-types/shared';
-import {HTMLAttributes, Key, RefObject, useEffect, useMemo} from 'react';
+import {HTMLAttributes, Key, RefObject, useMemo} from 'react';
 import {ListKeyboardDelegate} from './ListKeyboardDelegate';
 import {MultipleSelectionManager} from '@react-stately/selection';
 import {useCollator} from '@react-aria/i18n';
@@ -120,7 +120,8 @@ export function useSelectableList(props: SelectableListOptions): SelectableListA
     disallowTypeAhead,
     shouldUseVirtualFocus,
     allowsTabNavigation,
-    isVirtualized
+    isVirtualized,
+    scrollRef: ref
   });
 
   return {
diff --git a/packages/@react-aria/table/stories/example.tsx b/packages/@react-aria/table/stories/example.tsx
new file mode 100644
index 00000000000..310a3871083
--- /dev/null
+++ b/packages/@react-aria/table/stories/example.tsx
@@ -0,0 +1,183 @@
+import {mergeProps} from '@react-aria/utils';
+import React from 'react';
+import {useCheckbox} from '@react-aria/checkbox';
+import {useFocusRing} from '@react-aria/focus';
+import {useRef} from 'react';
+import {useTable, useTableCell, useTableColumnHeader, useTableRow, useTableHeaderRow, useTableRowGroup, useTableSelectAllCheckbox, useTableSelectionCheckbox} from '@react-aria/table';
+import {useTableState} from '@react-stately/table';
+import {useToggleState} from '@react-stately/toggle';
+import {VisuallyHidden} from '@react-aria/visually-hidden';
+
+export function Table(props) {
+  let state = useTableState({...props, showSelectionCheckboxes: props.selectionMode === 'multiple'});
+  let ref = useRef();
+  let bodyRef = useRef();
+  let {collection} = state;
+  let {gridProps} = useTable({...props, scrollRef: bodyRef}, state, ref);
+
+  return (
+    <table {...gridProps} ref={ref} style={{borderCollapse: 'collapse'}}>
+      <TableRowGroup type="thead" style={{borderBottom: '2px solid gray', display: 'block'}}>
+        {collection.headerRows.map(headerRow => (
+          <TableHeaderRow key={headerRow.key} item={headerRow} state={state}>
+            {[...headerRow.childNodes].map(column =>
+              column.props.isSelectionCell
+                ? <TableSelectAllCell key={column.key} column={column} state={state} />
+                : <TableColumnHeader key={column.key} column={column} state={state} />
+            )}
+          </TableHeaderRow>
+        ))}
+      </TableRowGroup>
+      <TableRowGroup ref={bodyRef} type="tbody" style={{display: 'block', overflow: 'auto', maxHeight: '200px'}}>
+        {[...collection.body.childNodes].map(row => (
+          <TableRow key={row.key} item={row} state={state}>
+            {[...row.childNodes].map(cell =>
+              cell.props.isSelectionCell
+                ? <TableCheckboxCell key={cell.key} cell={cell} state={state} />
+                : <TableCell key={cell.key} cell={cell} state={state} />
+            )}
+          </TableRow>
+        ))}
+      </TableRowGroup>
+    </table>
+  );
+}
+
+const TableRowGroup = React.forwardRef((props: any, ref) => {
+  let {type: Element, style, children} = props;
+  let {rowGroupProps} = useTableRowGroup();
+  return (
+    <Element ref={ref} {...rowGroupProps} style={style}>
+      {children}
+    </Element>
+  )
+})
+
+function TableHeaderRow({item, state, children}) {
+  let ref = useRef();
+  let {rowProps} = useTableHeaderRow({node: item}, state, ref);
+
+  return (
+    <tr {...rowProps} ref={ref}>
+      {children}
+    </tr>
+  );
+}
+
+function TableColumnHeader({column, state}) {
+  let ref = useRef();
+  let {columnHeaderProps} = useTableColumnHeader({node: column}, state, ref);
+  let {isFocusVisible, focusProps} = useFocusRing();
+  let arrowIcon = state.sortDescriptor?.direction === 'ascending' ? '▲' : '▼';
+
+  return (
+    <th
+      {...mergeProps(columnHeaderProps, focusProps)}
+      colSpan={column.colspan}
+      style={{
+        textAlign: column.colspan > 1 ? 'center' : 'left',
+        padding: '5px 10px',
+        outline: isFocusVisible ? '2px solid orange' : 'none',
+        cursor: 'default'
+      }}
+      ref={ref}>
+      {column.rendered}
+      {column.props.allowsSorting &&
+        <span aria-hidden="true" style={{padding: '0 2px', visibility: state.sortDescriptor?.column === column.key ? 'visible' : 'hidden'}}>
+          {arrowIcon}
+        </span>
+      }
+    </th>
+  );
+}
+
+function TableRow({item, children, state}) {
+  let ref = useRef();
+  let isSelected = state.selectionManager.isSelected(item.key);
+  let {rowProps} = useTableRow({node: item}, state, ref);
+  let {isFocusVisible, focusProps} = useFocusRing();
+
+  return (
+    <tr
+      style={{
+        background: isSelected
+          ? 'blueviolet'
+          : item.index % 2
+            ? 'lightgray'
+            : 'none',
+        color: isSelected ? 'white' : null,
+        outline: isFocusVisible ? '2px solid orange' : 'none'
+      }}
+      {...mergeProps(rowProps, focusProps)}
+      ref={ref}>
+      {children}
+    </tr>
+  );
+}
+
+function TableCell({cell, state}) {
+  let ref = useRef();
+  let {gridCellProps} = useTableCell({node: cell}, state, ref);
+  let {isFocusVisible, focusProps} = useFocusRing();
+
+  return (
+    <td
+      {...mergeProps(gridCellProps, focusProps)}
+      style={{
+        padding: '5px 10px',
+        outline: isFocusVisible ? '2px solid orange' : 'none',
+        cursor: 'default'
+      }}
+      ref={ref}>
+      {cell.rendered}
+    </td>
+  );
+}
+
+function TableCheckboxCell({cell, state}) {
+  let ref = useRef();
+  let {gridCellProps} = useTableCell({node: cell}, state, ref);
+  let {checkboxProps} = useTableSelectionCheckbox({key: cell.parentKey}, state);
+
+  let inputRef = useRef(null);
+  let {inputProps} = useCheckbox(checkboxProps, useToggleState(checkboxProps), inputRef);
+
+  return (
+    <td
+      {...gridCellProps}
+      ref={ref}>
+      <input {...inputProps} />
+    </td>
+  );
+}
+
+function TableSelectAllCell({column, state}) {
+  let ref = useRef();
+  let isSingleSelectionMode = state.selectionManager.selectionMode === 'single';
+  let {columnHeaderProps} = useTableColumnHeader({node: column}, state, ref);
+
+  let {checkboxProps} = useTableSelectAllCheckbox(state);
+  let inputRef = useRef(null);
+  let {inputProps} = useCheckbox(checkboxProps, useToggleState(checkboxProps), inputRef);
+
+  return (
+    <th
+      {...columnHeaderProps}
+      ref={ref}>
+      {
+        /*
+          In single selection mode, the checkbox will be hidden.
+          So to avoid leaving a column header with no accessible content,
+          use a VisuallyHidden component to include the aria-label from the checkbox,
+          which for single selection will be "Select."
+        */
+        isSingleSelectionMode &&
+        <VisuallyHidden>{inputProps['aria-label']}</VisuallyHidden>
+      }
+      <input
+        {...inputProps}
+        ref={inputRef}
+        style={isSingleSelectionMode ? {visibility: 'hidden'} : undefined} />
+    </th>
+  );
+}
diff --git a/packages/@react-aria/table/stories/useTable.stories.tsx b/packages/@react-aria/table/stories/useTable.stories.tsx
new file mode 100644
index 00000000000..cb6bec37c15
--- /dev/null
+++ b/packages/@react-aria/table/stories/useTable.stories.tsx
@@ -0,0 +1,68 @@
+/*
+ * Copyright 2021 Adobe. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+import {Cell, Column, Row, TableBody, TableHeader} from '@react-stately/table';
+import React from 'react';
+import {Table} from './example';
+
+const meta = {
+  title: 'useTable'
+};
+
+export default meta;
+
+let columns = [
+  {name: 'Name', uid: 'name'},
+  {name: 'Type', uid: 'type'},
+  {name: 'Level', uid: 'level'}
+];
+
+let rows = [
+  {id: 1, name: 'Charizard', type: 'Fire, Flying', level: '67'},
+  {id: 2, name: 'Blastoise', type: 'Water', level: '56'},
+  {id: 3, name: 'Venusaur', type: 'Grass, Poison', level: '83'},
+  {id: 4, name: 'Pikachu', type: 'Electric', level: '100'},
+  {id: 5, name: 'Charizard', type: 'Fire, Flying', level: '67'},
+  {id: 6, name: 'Blastoise', type: 'Water', level: '56'},
+  {id: 7, name: 'Venusaur', type: 'Grass, Poison', level: '83'},
+  {id: 8, name: 'Pikachu', type: 'Electric', level: '100'},
+  {id: 9, name: 'Charizard', type: 'Fire, Flying', level: '67'},
+  {id: 10, name: 'Blastoise', type: 'Water', level: '56'},
+  {id: 11, name: 'Venusaur', type: 'Grass, Poison', level: '83'},
+  {id: 12, name: 'Pikachu', type: 'Electric', level: '100'}
+];
+
+const Template = () => () => (
+  <>
+    <input aria-label="Focusable before" placeholder="Focusable before" />
+    <Table aria-label="Table with selection" selectionMode="multiple">
+      <TableHeader columns={columns}>
+        {column => (
+          <Column key={column.uid}>
+            {column.name}
+          </Column>
+        )}
+      </TableHeader>
+      <TableBody items={rows}>
+        {item => (
+          <Row>
+            {columnKey => <Cell>{item[columnKey]}</Cell>}
+          </Row>
+        )}
+      </TableBody>
+    </Table>
+    <input aria-label="Focusable after" placeholder="Focusable after" />
+  </>
+);
+
+export const ScrollTesting = Template().bind({});
+ScrollTesting.args = {};
diff --git a/packages/@react-aria/tabs/docs/useTabList.mdx b/packages/@react-aria/tabs/docs/useTabList.mdx
index 9a9ea00a2c3..3e668ddf37b 100644
--- a/packages/@react-aria/tabs/docs/useTabList.mdx
+++ b/packages/@react-aria/tabs/docs/useTabList.mdx
@@ -91,8 +91,6 @@ This example displays a basic list of tabs. The currently selected tab receives
 
 ```tsx example export=true
 import {Item} from '@react-stately/collections';
-import {useFocus} from '@react-aria/interactions';
-import {mergeProps} from '@react-aria/utils';
 
 function Tabs(props) {
   let state = useTabListState(props);
@@ -125,7 +123,7 @@ function Tab({item, state}) {
         borderBottom: isSelected ? '3px solid var(--blue)' : undefined,
         opacity: isDisabled ? '0.5' : undefined
       }}>
-      {item.rendered}
+      {rendered}
     </div>
   );
 }
diff --git a/packages/@react-aria/tabs/src/useTabList.ts b/packages/@react-aria/tabs/src/useTabList.ts
index cf352166ddc..4871ce6ce73 100644
--- a/packages/@react-aria/tabs/src/useTabList.ts
+++ b/packages/@react-aria/tabs/src/useTabList.ts
@@ -53,7 +53,8 @@ export function useTabList<T>(props: AriaTabListProps<T>, state: TabListState<T>
     keyboardDelegate: delegate,
     selectOnFocus: keyboardActivation === 'automatic',
     disallowEmptySelection: true,
-    isVirtualized
+    isVirtualized,
+    scrollRef: ref
   });
 
   // Compute base id for all tabs
diff --git a/packages/@react-aria/tabs/stories/example.tsx b/packages/@react-aria/tabs/stories/example.tsx
new file mode 100644
index 00000000000..5dfd56d840d
--- /dev/null
+++ b/packages/@react-aria/tabs/stories/example.tsx
@@ -0,0 +1,49 @@
+import React from 'react';
+import {useTab, useTabList, useTabPanel} from '@react-aria/tabs';
+import {useTabListState} from '@react-stately/tabs';
+
+export function Tabs(props) {
+  let state = useTabListState(props);
+  let ref = React.useRef();
+  let {tabListProps} = useTabList(props, state, ref);
+  return (
+    <div style={{height: '150px'}}>
+      <div {...tabListProps} ref={ref} style={{display: 'flex', borderBottom: '1px solid grey', maxWidth: '400px', overflow: 'auto'}}>
+        {[...state.collection].map((item) => (
+          <Tab key={item.key} item={item} state={state} />
+        ))}
+      </div>
+      <TabPanel key={state.selectedItem?.key} state={state} />
+    </div>
+  );
+}
+
+function Tab({item, state}) {
+  let {key, rendered} = item;
+  let ref = React.useRef();
+  let {tabProps} = useTab({key}, state, ref);
+  let isSelected = state.selectedKey === key;
+  let isDisabled = state.disabledKeys.has(key);
+  return (
+    <div
+      {...tabProps}
+      ref={ref}
+      style={{
+        padding: '10px',
+        borderBottom: isSelected ? '3px solid blue' : undefined,
+        opacity: isDisabled ? '0.5' : undefined
+      }}>
+      {rendered}
+    </div>
+  );
+}
+
+function TabPanel({state, ...props}) {
+  let ref = React.useRef();
+  let {tabPanelProps} = useTabPanel(props, state, ref);
+  return (
+    <div {...tabPanelProps} ref={ref} style={{padding: '10px'}}>
+      {state.selectedItem?.props.children}
+    </div>
+  );
+}
diff --git a/packages/@react-aria/tabs/stories/useTabList.stories.tsx b/packages/@react-aria/tabs/stories/useTabList.stories.tsx
new file mode 100644
index 00000000000..44da77b3e4d
--- /dev/null
+++ b/packages/@react-aria/tabs/stories/useTabList.stories.tsx
@@ -0,0 +1,39 @@
+/*
+ * Copyright 2021 Adobe. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+import {Tabs} from './example';
+import {Item} from '@react-stately/collections';
+import React from 'react';
+
+const meta = {
+  title: 'useTabList'
+};
+
+export default meta;
+
+let lotsOfItems: any[] = [];
+for (let i = 0; i < 50; i++) {
+  lotsOfItems.push({name: 'Item ' + i, contents: 'Contents ' + i});
+}
+
+const Template = () => () => (
+  <Tabs aria-label="example" items={lotsOfItems}>
+    {(item) => (
+      <Item key={item.name} title={item.name}>
+        {item.contents}
+      </Item>
+    )}
+  </Tabs>
+);
+
+export const ScrollTesting = Template().bind({});
+ScrollTesting.args = {};

From 68c4ef28c641d44717d02212440a7ee72609b329 Mon Sep 17 00:00:00 2001
From: Daniel Lu <dl1644@gmail.com>
Date: Thu, 19 Aug 2021 15:29:27 -0700
Subject: [PATCH 03/11] fixing lint

---
 .../@react-aria/combobox/docs/useComboBox.mdx |  3 +-
 .../@react-aria/combobox/stories/example.tsx  | 37 ++++++++++++-------
 .../selection/src/useSelectableCollection.ts  |  4 +-
 .../@react-aria/table/stories/example.tsx     | 19 ++++++++--
 packages/@react-aria/tabs/stories/example.tsx | 12 ++++++
 .../tabs/stories/useTabList.stories.tsx       |  2 +-
 6 files changed, 56 insertions(+), 21 deletions(-)

diff --git a/packages/@react-aria/combobox/docs/useComboBox.mdx b/packages/@react-aria/combobox/docs/useComboBox.mdx
index 1d8f315e914..a43edcb3326 100644
--- a/packages/@react-aria/combobox/docs/useComboBox.mdx
+++ b/packages/@react-aria/combobox/docs/useComboBox.mdx
@@ -242,8 +242,7 @@ function Popover(props) {
     popoverRef = ref,
     isOpen,
     onClose,
-    children,
-    ...otherProps
+    children
   } = props;
 
   // Handle events that should cause the popup to close,
diff --git a/packages/@react-aria/combobox/stories/example.tsx b/packages/@react-aria/combobox/stories/example.tsx
index c4d0d87321f..44cbf6f4967 100644
--- a/packages/@react-aria/combobox/stories/example.tsx
+++ b/packages/@react-aria/combobox/stories/example.tsx
@@ -1,11 +1,23 @@
+/*
+ * Copyright 2021 Adobe. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+import {DismissButton, useOverlay} from '@react-aria/overlays';
 import {FocusScope} from '@react-aria/focus';
 import React from 'react';
 import {useButton} from '@react-aria/button';
-import {useComboBoxState} from '@react-stately/combobox'
 import {useComboBox} from '@react-aria/combobox';
+import {useComboBoxState} from '@react-stately/combobox';
 import {useFilter} from '@react-aria/i18n';
 import {useListBox, useOption} from '@react-aria/listbox';
-import {useOverlay, DismissButton} from '@react-aria/overlays';
 
 export function ComboBox(props) {
   // Setup filter function and state.
@@ -24,7 +36,7 @@ export function ComboBox(props) {
       inputRef,
       buttonRef,
       listBoxRef,
-      popoverRef,
+      popoverRef
     },
     state
   );
@@ -55,7 +67,7 @@ export function ComboBox(props) {
             marginLeft: 0
           }}>
           <span
-            aria-hidden="true"
+            aria-hidden='true'
             style={{padding: '0 2px'}}>
             ▼
           </span>
@@ -79,8 +91,7 @@ function Popover(props) {
     popoverRef = ref,
     isOpen,
     onClose,
-    children,
-    ...otherProps
+    children
   } = props;
 
   // Handle events that should cause the popup to close,
@@ -100,10 +111,10 @@ function Popover(props) {
         {...overlayProps}
         ref={popoverRef}
         style={{
-          position: "absolute",
-          width: "100%",
-          border: "1px solid gray",
-          background: "lightgray",
+          position: 'absolute',
+          width: '100%',
+          border: '1px solid gray',
+          background: 'lightgray',
           marginTop: 4
         }}>
         {children}
@@ -126,9 +137,9 @@ function ListBox(props) {
       style={{
         margin: 0,
         padding: 0,
-        listStyle: "none",
-        maxHeight: "150px",
-        overflow: "auto"
+        listStyle: 'none',
+        maxHeight: '150px',
+        overflow: 'auto'
       }}>
       {[...state.collection].map(item => (
         <Option
diff --git a/packages/@react-aria/selection/src/useSelectableCollection.ts b/packages/@react-aria/selection/src/useSelectableCollection.ts
index 4a3f6ed753f..a513237a762 100644
--- a/packages/@react-aria/selection/src/useSelectableCollection.ts
+++ b/packages/@react-aria/selection/src/useSelectableCollection.ts
@@ -384,7 +384,7 @@ export function useSelectableCollection(options: SelectableCollectionOptions): S
  * Similar to `element.scrollIntoView({block: 'nearest'})` (not supported in Edge),
  * but doesn't affect parents above `scrollView`.
  */
- function scrollIntoView(scrollView: HTMLElement, element: HTMLElement) {
+function scrollIntoView(scrollView: HTMLElement, element: HTMLElement) {
   let offsetX = relativeOffset(scrollView, element, 'left');
   let offsetY = relativeOffset(scrollView, element, 'top');
   let width = element.offsetWidth;
@@ -413,7 +413,7 @@ export function useSelectableCollection(options: SelectableCollectionOptions): S
  * Computes the offset left or top from child to ancestor by accumulating
  * offsetLeft or offsetTop through intervening offsetParents.
  */
- function relativeOffset(ancestor: HTMLElement, child: HTMLElement, axis: 'left'|'top') {
+function relativeOffset(ancestor: HTMLElement, child: HTMLElement, axis: 'left'|'top') {
   const prop = axis === 'left' ? 'offsetLeft' : 'offsetTop';
   let sum = 0;
   while (child.offsetParent) {
diff --git a/packages/@react-aria/table/stories/example.tsx b/packages/@react-aria/table/stories/example.tsx
index 310a3871083..e426d793589 100644
--- a/packages/@react-aria/table/stories/example.tsx
+++ b/packages/@react-aria/table/stories/example.tsx
@@ -1,9 +1,21 @@
+/*
+ * Copyright 2021 Adobe. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
 import {mergeProps} from '@react-aria/utils';
 import React from 'react';
 import {useCheckbox} from '@react-aria/checkbox';
 import {useFocusRing} from '@react-aria/focus';
 import {useRef} from 'react';
-import {useTable, useTableCell, useTableColumnHeader, useTableRow, useTableHeaderRow, useTableRowGroup, useTableSelectAllCheckbox, useTableSelectionCheckbox} from '@react-aria/table';
+import {useTable, useTableCell, useTableColumnHeader, useTableHeaderRow, useTableRow, useTableRowGroup, useTableSelectAllCheckbox, useTableSelectionCheckbox} from '@react-aria/table';
 import {useTableState} from '@react-stately/table';
 import {useToggleState} from '@react-stately/toggle';
 import {VisuallyHidden} from '@react-aria/visually-hidden';
@@ -50,8 +62,8 @@ const TableRowGroup = React.forwardRef((props: any, ref) => {
     <Element ref={ref} {...rowGroupProps} style={style}>
       {children}
     </Element>
-  )
-})
+  );
+});
 
 function TableHeaderRow({item, state, children}) {
   let ref = useRef();
@@ -100,6 +112,7 @@ function TableRow({item, children, state}) {
   return (
     <tr
       style={{
+        // eslint-disable-next-line no-nested-ternary
         background: isSelected
           ? 'blueviolet'
           : item.index % 2
diff --git a/packages/@react-aria/tabs/stories/example.tsx b/packages/@react-aria/tabs/stories/example.tsx
index 5dfd56d840d..42c118fec6e 100644
--- a/packages/@react-aria/tabs/stories/example.tsx
+++ b/packages/@react-aria/tabs/stories/example.tsx
@@ -1,3 +1,15 @@
+/*
+ * Copyright 2021 Adobe. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
 import React from 'react';
 import {useTab, useTabList, useTabPanel} from '@react-aria/tabs';
 import {useTabListState} from '@react-stately/tabs';
diff --git a/packages/@react-aria/tabs/stories/useTabList.stories.tsx b/packages/@react-aria/tabs/stories/useTabList.stories.tsx
index 44da77b3e4d..8450c9f4705 100644
--- a/packages/@react-aria/tabs/stories/useTabList.stories.tsx
+++ b/packages/@react-aria/tabs/stories/useTabList.stories.tsx
@@ -10,9 +10,9 @@
  * governing permissions and limitations under the License.
  */
 
-import {Tabs} from './example';
 import {Item} from '@react-stately/collections';
 import React from 'react';
+import {Tabs} from './example';
 
 const meta = {
   title: 'useTabList'

From 144805a9f763285e1f9062578bfe98e9838b6851 Mon Sep 17 00:00:00 2001
From: Daniel Lu <dl1644@gmail.com>
Date: Thu, 19 Aug 2021 16:19:27 -0700
Subject: [PATCH 04/11] fixing lint

---
 packages/@react-aria/combobox/stories/example.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/@react-aria/combobox/stories/example.tsx b/packages/@react-aria/combobox/stories/example.tsx
index 44cbf6f4967..f4e2f07320c 100644
--- a/packages/@react-aria/combobox/stories/example.tsx
+++ b/packages/@react-aria/combobox/stories/example.tsx
@@ -67,7 +67,7 @@ export function ComboBox(props) {
             marginLeft: 0
           }}>
           <span
-            aria-hidden='true'
+            aria-hidden="true"
             style={{padding: '0 2px'}}>
             ▼
           </span>

From a9fcdb33c781d4095a409e28a8c7bf33b350b814 Mon Sep 17 00:00:00 2001
From: Daniel Lu <dl1644@gmail.com>
Date: Thu, 19 Aug 2021 16:25:36 -0700
Subject: [PATCH 05/11] bring focused item into view when tabbing/shift tabbing
 into non virtualized table

preserves the scroll position if item is in view, otherwise scrolls it into view
---
 packages/@react-aria/grid/src/useGrid.ts      |  9 ++--
 .../selection/src/useSelectableCollection.ts  | 46 ++++++++++++++++++-
 packages/@react-aria/table/src/useTable.ts    |  5 +-
 .../@react-aria/table/stories/example.tsx     |  8 ++--
 4 files changed, 57 insertions(+), 11 deletions(-)

diff --git a/packages/@react-aria/grid/src/useGrid.ts b/packages/@react-aria/grid/src/useGrid.ts
index d27a260bb43..d11d1c682ad 100644
--- a/packages/@react-aria/grid/src/useGrid.ts
+++ b/packages/@react-aria/grid/src/useGrid.ts
@@ -49,7 +49,9 @@ export interface GridProps extends DOMProps, AriaLabelingProps {
 
 export interface GridAria {
   /** Props for the grid element. */
-  gridProps: HTMLAttributes<HTMLElement>
+  gridProps: HTMLAttributes<HTMLElement>,
+  /** Props for the grid's scrollable region. */
+  scrollBodyProps: HTMLAttributes<HTMLElement>
 }
 
 /**
@@ -85,7 +87,7 @@ export function useGrid<T>(props: GridProps, state: GridState<T, GridCollection<
     collator,
     focusMode
   }), [keyboardDelegate, state.collection, state.disabledKeys, ref, direction, collator, focusMode]);
-  let {collectionProps} = useSelectableCollection({
+  let {collectionProps, scrollBodyProps} = useSelectableCollection({
     ref,
     selectionManager: state.selectionManager,
     keyboardDelegate: delegate,
@@ -153,7 +155,8 @@ export function useGrid<T>(props: GridProps, state: GridState<T, GridCollection<
   }, [selection]);
 
   return {
-    gridProps
+    gridProps,
+    scrollBodyProps
   };
 }
 
diff --git a/packages/@react-aria/selection/src/useSelectableCollection.ts b/packages/@react-aria/selection/src/useSelectableCollection.ts
index a513237a762..df45bd97d84 100644
--- a/packages/@react-aria/selection/src/useSelectableCollection.ts
+++ b/packages/@react-aria/selection/src/useSelectableCollection.ts
@@ -10,7 +10,7 @@
  * governing permissions and limitations under the License.
  */
 
-import {FocusEvent, HTMLAttributes, Key, KeyboardEvent, RefObject, useEffect, useRef} from 'react';
+import {FocusEvent, HTMLAttributes, Key, KeyboardEvent, RefObject, useCallback, useEffect, useRef} from 'react';
 import {focusSafely, getFocusableTreeWalker} from '@react-aria/focus';
 import {FocusStrategy, KeyboardDelegate} from '@react-types/shared';
 import {focusWithoutScrolling, isMac, mergeProps} from '@react-aria/utils';
@@ -89,7 +89,9 @@ interface SelectableCollectionOptions {
 
 interface SelectableCollectionAria {
   /** Props for the collection element. */
-  collectionProps: HTMLAttributes<HTMLElement>
+  collectionProps: HTMLAttributes<HTMLElement>,
+  /** Props for the collection element's scrollable region. */
+  scrollBodyProps: HTMLAttributes<HTMLElement>
 }
 
 /**
@@ -340,6 +342,43 @@ export function useSelectableCollection(options: SelectableCollectionOptions): S
     }
   }, [isVirtualized, scrollRef, manager.focusedKey]);
 
+
+  let prevScroll = useRef(scrollRef?.current?.scrollTop || 0);
+  // Bring focused key into view if focus enters the collection from outside. Only for non virtualized collections,
+  // virtualized collections should handle this in their virtualizer or get this for free via our Virtualizer component
+  useEffect(() => {
+    let onFocus = (e) => {
+      if (ref.current?.contains(e.target) && (!ref.current?.contains(e.relatedTarget) && !isVirtualized)) {
+        if (manager.focusedKey) {
+          let element = scrollRef.current.querySelector(`[data-key="${manager.focusedKey}"]`) as HTMLElement;
+          if (element) {
+            // Need to track previous scroll position, but at the same time need to override the scroll position
+            let scrollContainerTop = scrollRef.current.offsetTop + prevScroll.current;
+            let scrollContainerBottom = scrollRef.current.offsetTop + prevScroll.current + scrollRef.current.offsetHeight;
+            let elementBottom = element.offsetTop + element.clientHeight;
+            // If focused key is out of view, scroll it into view when re-entering the table
+            if (!(elementBottom > scrollContainerTop && elementBottom < scrollContainerBottom)) {
+              scrollIntoView(scrollRef.current, element);
+            } else {
+              // If focusedkey is already in view, override the scroll that may happen from shift tabbing (browser will focus last focusable element in the table which may be out of view, causing a scroll)
+              scrollRef.current.scrollTop = prevScroll.current;
+            }
+          }
+        }
+      }
+    };
+
+    window.addEventListener('focus', onFocus, true);
+    return () => {
+      window.removeEventListener('focus', onFocus, true);
+    };
+  }, [manager.focusedKey, scrollRef, isVirtualized, ref]);
+
+  // Save the previous scroll position
+  let onScroll = useCallback(() => {
+    prevScroll.current = scrollRef.current.scrollTop;
+  }, [scrollRef]);
+
   let handlers = {
     onKeyDown,
     onFocus,
@@ -375,6 +414,9 @@ export function useSelectableCollection(options: SelectableCollectionOptions): S
     collectionProps: {
       ...handlers,
       tabIndex
+    },
+    scrollBodyProps: {
+      onScroll
     }
   };
 }
diff --git a/packages/@react-aria/table/src/useTable.ts b/packages/@react-aria/table/src/useTable.ts
index cb9510a7662..72ebcc8acfa 100644
--- a/packages/@react-aria/table/src/useTable.ts
+++ b/packages/@react-aria/table/src/useTable.ts
@@ -60,7 +60,7 @@ export function useTable<T>(props: TableProps<T>, state: TableState<T>, ref: Ref
   let id = useId();
   gridIds.set(state, id);
 
-  let {gridProps} = useGrid({
+  let {gridProps, scrollBodyProps} = useGrid({
     ...props,
     id,
     keyboardDelegate: delegate,
@@ -114,6 +114,7 @@ export function useTable<T>(props: TableProps<T>, state: TableState<T>, ref: Ref
   }, [sortDescription]);
 
   return {
-    gridProps: mergeProps(gridProps, descriptionProps)
+    gridProps: mergeProps(gridProps, descriptionProps),
+    scrollBodyProps
   };
 }
diff --git a/packages/@react-aria/table/stories/example.tsx b/packages/@react-aria/table/stories/example.tsx
index e426d793589..c23b62e5712 100644
--- a/packages/@react-aria/table/stories/example.tsx
+++ b/packages/@react-aria/table/stories/example.tsx
@@ -25,7 +25,7 @@ export function Table(props) {
   let ref = useRef();
   let bodyRef = useRef();
   let {collection} = state;
-  let {gridProps} = useTable({...props, scrollRef: bodyRef}, state, ref);
+  let {gridProps, scrollBodyProps} = useTable({...props, scrollRef: bodyRef}, state, ref);
 
   return (
     <table {...gridProps} ref={ref} style={{borderCollapse: 'collapse'}}>
@@ -40,7 +40,7 @@ export function Table(props) {
           </TableHeaderRow>
         ))}
       </TableRowGroup>
-      <TableRowGroup ref={bodyRef} type="tbody" style={{display: 'block', overflow: 'auto', maxHeight: '200px'}}>
+      <TableRowGroup ref={bodyRef} type="tbody" style={{display: 'block', overflow: 'auto', maxHeight: '200px'}} {...scrollBodyProps}>
         {[...collection.body.childNodes].map(row => (
           <TableRow key={row.key} item={row} state={state}>
             {[...row.childNodes].map(cell =>
@@ -56,10 +56,10 @@ export function Table(props) {
 }
 
 const TableRowGroup = React.forwardRef((props: any, ref) => {
-  let {type: Element, style, children} = props;
+  let {type: Element, style, children, onScroll} = props;
   let {rowGroupProps} = useTableRowGroup();
   return (
-    <Element ref={ref} {...rowGroupProps} style={style}>
+    <Element ref={ref} onScroll={onScroll} {...rowGroupProps} style={style}>
       {children}
     </Element>
   );

From 85c2e1df6e60162ecb8f8d994069420d147366a2 Mon Sep 17 00:00:00 2001
From: Daniel Lu <dl1644@gmail.com>
Date: Thu, 19 Aug 2021 17:30:12 -0700
Subject: [PATCH 06/11] fixing contains error and case where focused key is a
 header

also refined the detection for when a element is out of view
---
 .../@react-aria/selection/src/useSelectableCollection.ts | 9 +++++----
 1 file changed, 5 insertions(+), 4 deletions(-)

diff --git a/packages/@react-aria/selection/src/useSelectableCollection.ts b/packages/@react-aria/selection/src/useSelectableCollection.ts
index df45bd97d84..0b19e3ef08e 100644
--- a/packages/@react-aria/selection/src/useSelectableCollection.ts
+++ b/packages/@react-aria/selection/src/useSelectableCollection.ts
@@ -348,16 +348,17 @@ export function useSelectableCollection(options: SelectableCollectionOptions): S
   // virtualized collections should handle this in their virtualizer or get this for free via our Virtualizer component
   useEffect(() => {
     let onFocus = (e) => {
-      if (ref.current?.contains(e.target) && (!ref.current?.contains(e.relatedTarget) && !isVirtualized)) {
+      if ((e.target instanceof HTMLElement && ref.current?.contains(e.target)) && !isVirtualized && !manager.isFocused) {
         if (manager.focusedKey) {
-          let element = scrollRef.current.querySelector(`[data-key="${manager.focusedKey}"]`) as HTMLElement;
+          let element = ref.current.querySelector(`[data-key="${manager.focusedKey}"]`) as HTMLElement;
           if (element) {
             // Need to track previous scroll position, but at the same time need to override the scroll position
             let scrollContainerTop = scrollRef.current.offsetTop + prevScroll.current;
             let scrollContainerBottom = scrollRef.current.offsetTop + prevScroll.current + scrollRef.current.offsetHeight;
             let elementBottom = element.offsetTop + element.clientHeight;
-            // If focused key is out of view, scroll it into view when re-entering the table
-            if (!(elementBottom > scrollContainerTop && elementBottom < scrollContainerBottom)) {
+            let elementTop = element.offsetTop;
+            // If focused key is out of view and is in the scrollable region, scroll it into view when re-entering the table
+            if (scrollRef.current?.contains(element) && (elementTop <= scrollContainerTop || elementBottom >= scrollContainerBottom)) {
               scrollIntoView(scrollRef.current, element);
             } else {
               // If focusedkey is already in view, override the scroll that may happen from shift tabbing (browser will focus last focusable element in the table which may be out of view, causing a scroll)

From 272851f1a985a5079d98adb41465110797a229e4 Mon Sep 17 00:00:00 2001
From: Daniel Lu <dl1644@gmail.com>
Date: Fri, 20 Aug 2021 15:09:20 -0700
Subject: [PATCH 07/11] fixing tests and accounting for if item is out of view
 horizontally

---
 .../selection/src/useSelectableCollection.ts  | 28 +++++++++-----
 .../@react-aria/table/stories/example.tsx     |  4 +-
 .../table/stories/useTable.stories.tsx        | 37 +++++++++++--------
 3 files changed, 41 insertions(+), 28 deletions(-)

diff --git a/packages/@react-aria/selection/src/useSelectableCollection.ts b/packages/@react-aria/selection/src/useSelectableCollection.ts
index 0b19e3ef08e..b69b8e452da 100644
--- a/packages/@react-aria/selection/src/useSelectableCollection.ts
+++ b/packages/@react-aria/selection/src/useSelectableCollection.ts
@@ -83,6 +83,7 @@ interface SelectableCollectionOptions {
   isVirtualized?: boolean,
   /**
    * The ref attached to the scrollable body. Used to provided automatic scrolling on item focus for non-virtualized collections.
+   * If not provided, defaults to the collection ref.
    */
   scrollRef?: RefObject<HTMLElement>
 }
@@ -111,7 +112,8 @@ export function useSelectableCollection(options: SelectableCollectionOptions): S
     shouldUseVirtualFocus,
     allowsTabNavigation = false,
     isVirtualized,
-    scrollRef
+    // If no scrollRef is provided, assume the collection ref is the scrollable region
+    scrollRef = ref
   } = options;
   let {direction} = useLocale();
 
@@ -342,8 +344,7 @@ export function useSelectableCollection(options: SelectableCollectionOptions): S
     }
   }, [isVirtualized, scrollRef, manager.focusedKey]);
 
-
-  let prevScroll = useRef(scrollRef?.current?.scrollTop || 0);
+  let prevScroll = useRef({scrollTop: scrollRef?.current?.scrollTop || 0, scrollLeft: scrollRef?.current?.scrollLeft || 0});
   // Bring focused key into view if focus enters the collection from outside. Only for non virtualized collections,
   // virtualized collections should handle this in their virtualizer or get this for free via our Virtualizer component
   useEffect(() => {
@@ -352,17 +353,24 @@ export function useSelectableCollection(options: SelectableCollectionOptions): S
         if (manager.focusedKey) {
           let element = ref.current.querySelector(`[data-key="${manager.focusedKey}"]`) as HTMLElement;
           if (element) {
-            // Need to track previous scroll position, but at the same time need to override the scroll position
-            let scrollContainerTop = scrollRef.current.offsetTop + prevScroll.current;
-            let scrollContainerBottom = scrollRef.current.offsetTop + prevScroll.current + scrollRef.current.offsetHeight;
-            let elementBottom = element.offsetTop + element.clientHeight;
+            // Figure out if element is out of view
+            let scrollContainerTop = scrollRef.current.offsetTop + prevScroll.current.scrollTop;
+            let scrollContainerBottom = scrollRef.current.offsetTop + prevScroll.current.scrollTop + scrollRef.current.offsetHeight;
+            let scrollContainerLeft = scrollRef.current.offsetLeft + prevScroll.current.scrollLeft;
+            let scrollContainerRight = scrollRef.current.offsetLeft + prevScroll.current.scrollLeft + scrollRef.current.offsetWidth;
             let elementTop = element.offsetTop;
+            let elementBottom = element.offsetTop + element.clientHeight;
+            let elementLeft = element.offsetLeft;
+            let elementRight = element.offsetLeft + element.clientWidth;
+
+            let elementOutOfView = elementTop <= scrollContainerTop || elementBottom >= scrollContainerBottom || elementRight >= scrollContainerRight || elementLeft <= scrollContainerLeft;
             // If focused key is out of view and is in the scrollable region, scroll it into view when re-entering the table
-            if (scrollRef.current?.contains(element) && (elementTop <= scrollContainerTop || elementBottom >= scrollContainerBottom)) {
+            if (scrollRef.current?.contains(element) && elementOutOfView) {
               scrollIntoView(scrollRef.current, element);
             } else {
               // If focusedkey is already in view, override the scroll that may happen from shift tabbing (browser will focus last focusable element in the table which may be out of view, causing a scroll)
-              scrollRef.current.scrollTop = prevScroll.current;
+              scrollRef.current.scrollTop = prevScroll.current.scrollTop;
+              scrollRef.current.scrollLeft = prevScroll.current.scrollLeft;
             }
           }
         }
@@ -377,7 +385,7 @@ export function useSelectableCollection(options: SelectableCollectionOptions): S
 
   // Save the previous scroll position
   let onScroll = useCallback(() => {
-    prevScroll.current = scrollRef.current.scrollTop;
+    prevScroll.current = {scrollTop: scrollRef.current.scrollTop, scrollLeft: scrollRef.current.scrollLeft};
   }, [scrollRef]);
 
   let handlers = {
diff --git a/packages/@react-aria/table/stories/example.tsx b/packages/@react-aria/table/stories/example.tsx
index c23b62e5712..7337f49c117 100644
--- a/packages/@react-aria/table/stories/example.tsx
+++ b/packages/@react-aria/table/stories/example.tsx
@@ -29,7 +29,7 @@ export function Table(props) {
 
   return (
     <table {...gridProps} ref={ref} style={{borderCollapse: 'collapse'}}>
-      <TableRowGroup type="thead" style={{borderBottom: '2px solid gray', display: 'block'}}>
+      <TableRowGroup type="thead" style={{borderBottom: '2px solid gray', display: 'block', maxWidth: '200px', overflow: 'auto'}}>
         {collection.headerRows.map(headerRow => (
           <TableHeaderRow key={headerRow.key} item={headerRow} state={state}>
             {[...headerRow.childNodes].map(column =>
@@ -40,7 +40,7 @@ export function Table(props) {
           </TableHeaderRow>
         ))}
       </TableRowGroup>
-      <TableRowGroup ref={bodyRef} type="tbody" style={{display: 'block', overflow: 'auto', maxHeight: '200px'}} {...scrollBodyProps}>
+      <TableRowGroup ref={bodyRef} type="tbody" style={{display: 'block', overflow: 'auto', maxHeight: '200px', maxWidth: '200px'}} {...scrollBodyProps}>
         {[...collection.body.childNodes].map(row => (
           <TableRow key={row.key} item={row} state={state}>
             {[...row.childNodes].map(cell =>
diff --git a/packages/@react-aria/table/stories/useTable.stories.tsx b/packages/@react-aria/table/stories/useTable.stories.tsx
index cb6bec37c15..e1b1e37bcc2 100644
--- a/packages/@react-aria/table/stories/useTable.stories.tsx
+++ b/packages/@react-aria/table/stories/useTable.stories.tsx
@@ -23,27 +23,29 @@ export default meta;
 let columns = [
   {name: 'Name', uid: 'name'},
   {name: 'Type', uid: 'type'},
-  {name: 'Level', uid: 'level'}
+  {name: 'Level', uid: 'level'},
+  {name: 'Filler', uid: 'filler'},
+  {name: 'Blah', uid: 'blah'}
 ];
 
 let rows = [
-  {id: 1, name: 'Charizard', type: 'Fire, Flying', level: '67'},
-  {id: 2, name: 'Blastoise', type: 'Water', level: '56'},
-  {id: 3, name: 'Venusaur', type: 'Grass, Poison', level: '83'},
-  {id: 4, name: 'Pikachu', type: 'Electric', level: '100'},
-  {id: 5, name: 'Charizard', type: 'Fire, Flying', level: '67'},
-  {id: 6, name: 'Blastoise', type: 'Water', level: '56'},
-  {id: 7, name: 'Venusaur', type: 'Grass, Poison', level: '83'},
-  {id: 8, name: 'Pikachu', type: 'Electric', level: '100'},
-  {id: 9, name: 'Charizard', type: 'Fire, Flying', level: '67'},
-  {id: 10, name: 'Blastoise', type: 'Water', level: '56'},
-  {id: 11, name: 'Venusaur', type: 'Grass, Poison', level: '83'},
-  {id: 12, name: 'Pikachu', type: 'Electric', level: '100'}
+  {id: 1, name: 'Charizard', type: 'Fire, Flying', level: '67', filler: 'filler here', blah: 'blah here'},
+  {id: 2, name: 'Blastoise', type: 'Water', level: '56', filler: 'filler here', blah: 'blah here'},
+  {id: 3, name: 'Venusaur', type: 'Grass, Poison', level: '83', filler: 'filler here', blah: 'blah here'},
+  {id: 4, name: 'Pikachu', type: 'Electric', level: '100', filler: 'filler here', blah: 'blah here'},
+  {id: 5, name: 'Charizard', type: 'Fire, Flying', level: '67', filler: 'filler here', blah: 'blah here'},
+  {id: 6, name: 'Blastoise', type: 'Water', level: '56', filler: 'filler here', blah: 'blah here'},
+  {id: 7, name: 'Venusaur', type: 'Grass, Poison', level: '83', filler: 'filler here', blah: 'blah here'},
+  {id: 8, name: 'Pikachu', type: 'Electric', level: '100', filler: 'filler here', blah: 'blah here'},
+  {id: 9, name: 'Charizard', type: 'Fire, Flying', level: '67', filler: 'filler here', blah: 'blah here'},
+  {id: 10, name: 'Blastoise', type: 'Water', level: '56', filler: 'filler here', blah: 'blah here'},
+  {id: 11, name: 'Venusaur', type: 'Grass, Poison', level: '83', filler: 'filler here', blah: 'blah here'},
+  {id: 12, name: 'Pikachu', type: 'Electric', level: '100', filler: 'filler here', blah: 'blah here'}
 ];
 
-const Template = () => () => (
+const Template = () => (args:any = {}) => (
   <>
-    <input aria-label="Focusable before" placeholder="Focusable before" />
+    {!args.hideInput &&<input aria-label="Focusable before" placeholder="Focusable before" />}
     <Table aria-label="Table with selection" selectionMode="multiple">
       <TableHeader columns={columns}>
         {column => (
@@ -60,9 +62,12 @@ const Template = () => () => (
         )}
       </TableBody>
     </Table>
-    <input aria-label="Focusable after" placeholder="Focusable after" />
+    {!args.hideInput && <input aria-label="Focusable after" placeholder="Focusable after" />}
   </>
 );
 
 export const ScrollTesting = Template().bind({});
 ScrollTesting.args = {};
+
+export const ScrollTestingTabFromBrowser = Template().bind({});
+ScrollTestingTabFromBrowser.args = {hideInput: true};

From 5d95af5c3550360f87f388ddd056f2338012ee52 Mon Sep 17 00:00:00 2001
From: Daniel Lu <dl1644@gmail.com>
Date: Fri, 20 Aug 2021 15:59:19 -0700
Subject: [PATCH 08/11] rough attempt to prevent shift tabbing from messing up
 scroll position

---
 .../selection/src/useSelectableCollection.ts  | 46 +++++++++++++++++++
 .../table/stories/useTable.stories.tsx        |  2 +-
 2 files changed, 47 insertions(+), 1 deletion(-)

diff --git a/packages/@react-aria/selection/src/useSelectableCollection.ts b/packages/@react-aria/selection/src/useSelectableCollection.ts
index b69b8e452da..1ab2511722b 100644
--- a/packages/@react-aria/selection/src/useSelectableCollection.ts
+++ b/packages/@react-aria/selection/src/useSelectableCollection.ts
@@ -388,6 +388,52 @@ export function useSelectableCollection(options: SelectableCollectionOptions): S
     prevScroll.current = {scrollTop: scrollRef.current.scrollTop, scrollLeft: scrollRef.current.scrollLeft};
   }, [scrollRef]);
 
+  useEffect(() => {
+    let onKeyDown = (e) => {
+      // The consts here can be removed if we export them from FocusScope
+      const focusableElements = [
+        'input:not([disabled]):not([type=hidden])',
+        'select:not([disabled])',
+        'textarea:not([disabled])',
+        'button:not([disabled])',
+        'a[href]',
+        'area[href]',
+        'summary',
+        'iframe',
+        'object',
+        'embed',
+        'audio[controls]',
+        'video[controls]',
+        '[contenteditable]'
+      ];
+
+      focusableElements.push('[tabindex]:not([tabindex="-1"]):not([disabled])');
+      const TABBABLE_ELEMENT_SELECTOR = focusableElements.join(':not([hidden]):not([tabindex="-1"]),');
+
+      if (e.key === 'Tab' && !ref.current.contains(e.target as HTMLElement)) {
+        let tabbableElements = Array.from(document.querySelectorAll(TABBABLE_ELEMENT_SELECTOR));
+        let index = tabbableElements.findIndex(node => node === e.target)
+        let nodeToFocus;
+        if (e.shiftKey) {
+          nodeToFocus = tabbableElements[index - 1];
+        } else {
+          nodeToFocus = tabbableElements[index + 1];
+        }
+
+        if (ref.current.contains(nodeToFocus) && manager.focusedKey) {
+          e.preventDefault();
+          let element = ref.current.querySelector(`[data-key="${manager.focusedKey}"]`) as HTMLElement;
+          focusSafely(element);
+        }
+      }
+    }
+
+    window.addEventListener('keydown', onKeyDown, true);
+    return () => {
+      window.removeEventListener('keydown', onKeyDown, true);
+    }
+  }, [])
+
   let handlers = {
     onKeyDown,
     onFocus,
diff --git a/packages/@react-aria/table/stories/useTable.stories.tsx b/packages/@react-aria/table/stories/useTable.stories.tsx
index e1b1e37bcc2..5824ca3186f 100644
--- a/packages/@react-aria/table/stories/useTable.stories.tsx
+++ b/packages/@react-aria/table/stories/useTable.stories.tsx
@@ -45,7 +45,7 @@ let rows = [
 
 const Template = () => (args:any = {}) => (
   <>
-    {!args.hideInput &&<input aria-label="Focusable before" placeholder="Focusable before" />}
+    {!args.hideInput && <input aria-label="Focusable before" placeholder="Focusable before" />}
     <Table aria-label="Table with selection" selectionMode="multiple">
       <TableHeader columns={columns}>
         {column => (

From e9d690c976daf5f4c77c1fce1675577dcec96937 Mon Sep 17 00:00:00 2001
From: Daniel Lu <dl1644@gmail.com>
Date: Fri, 20 Aug 2021 16:20:14 -0700
Subject: [PATCH 09/11] fixing lint

---
 .../selection/src/useSelectableCollection.ts           | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/packages/@react-aria/selection/src/useSelectableCollection.ts b/packages/@react-aria/selection/src/useSelectableCollection.ts
index 1ab2511722b..9101a4886fd 100644
--- a/packages/@react-aria/selection/src/useSelectableCollection.ts
+++ b/packages/@react-aria/selection/src/useSelectableCollection.ts
@@ -410,9 +410,9 @@ export function useSelectableCollection(options: SelectableCollectionOptions): S
       focusableElements.push('[tabindex]:not([tabindex="-1"]):not([disabled])');
       const TABBABLE_ELEMENT_SELECTOR = focusableElements.join(':not([hidden]):not([tabindex="-1"]),');
 
-      if (e.key === 'Tab' && !ref.current.contains(e.target as HTMLElement)) {
+      if (e.key === 'Tab' && !ref.current.contains(e.target as HTMLElement) && !isVirtualized) {
         let tabbableElements = Array.from(document.querySelectorAll(TABBABLE_ELEMENT_SELECTOR));
-        let index = tabbableElements.findIndex(node => node === e.target)
+        let index = tabbableElements.findIndex(node => node === e.target);
         let nodeToFocus;
         if (e.shiftKey) {
           nodeToFocus = tabbableElements[index - 1];
@@ -426,13 +426,13 @@ export function useSelectableCollection(options: SelectableCollectionOptions): S
           focusSafely(element);
         }
       }
-    }
+    };
 
     window.addEventListener('keydown', onKeyDown, true);
     return () => {
       window.removeEventListener('keydown', onKeyDown, true);
-    }
-  }, [])
+    };
+  }, [manager.focusedKey, ref, isVirtualized]);
 
   let handlers = {
     onKeyDown,

From d9fcbec7f2a3f9eed102d91a585b05e3c68c4979 Mon Sep 17 00:00:00 2001
From: Daniel Lu <dl1644@gmail.com>
Date: Fri, 20 Aug 2021 17:05:27 -0700
Subject: [PATCH 10/11] tentative fix for the table column header click causing
 scrolling erroneously

---
 .../selection/src/useSelectableCollection.ts           | 10 ++++++----
 1 file changed, 6 insertions(+), 4 deletions(-)

diff --git a/packages/@react-aria/selection/src/useSelectableCollection.ts b/packages/@react-aria/selection/src/useSelectableCollection.ts
index 9101a4886fd..2ebffbbd390 100644
--- a/packages/@react-aria/selection/src/useSelectableCollection.ts
+++ b/packages/@react-aria/selection/src/useSelectableCollection.ts
@@ -349,9 +349,11 @@ export function useSelectableCollection(options: SelectableCollectionOptions): S
   // virtualized collections should handle this in their virtualizer or get this for free via our Virtualizer component
   useEffect(() => {
     let onFocus = (e) => {
-      if ((e.target instanceof HTMLElement && ref.current?.contains(e.target)) && !isVirtualized && !manager.isFocused) {
+      // Note: we can get away with only checking if the target is in the scrollable region only because the keydown capturing listener below
+      // will prevent tab/shift tab from focusing the select all checkbox and instead focus the last focused key.
+      if ((e.target instanceof HTMLElement && scrollRef.current?.contains(e.target)) && !isVirtualized && !manager.isFocused) {
         if (manager.focusedKey) {
-          let element = ref.current.querySelector(`[data-key="${manager.focusedKey}"]`) as HTMLElement;
+          let element = scrollRef.current.querySelector(`[data-key="${manager.focusedKey}"]`) as HTMLElement;
           if (element) {
             // Figure out if element is out of view
             let scrollContainerTop = scrollRef.current.offsetTop + prevScroll.current.scrollTop;
@@ -381,7 +383,7 @@ export function useSelectableCollection(options: SelectableCollectionOptions): S
     return () => {
       window.removeEventListener('focus', onFocus, true);
     };
-  }, [manager.focusedKey, scrollRef, isVirtualized, ref]);
+  }, [manager.focusedKey, scrollRef, isVirtualized]);
 
   // Save the previous scroll position
   let onScroll = useCallback(() => {
@@ -423,7 +425,7 @@ export function useSelectableCollection(options: SelectableCollectionOptions): S
         if (ref.current.contains(nodeToFocus) && manager.focusedKey) {
           e.preventDefault();
           let element = ref.current.querySelector(`[data-key="${manager.focusedKey}"]`) as HTMLElement;
-          focusSafely(element);
+          element && focusSafely(element);
         }
       }
     };

From 1646ced8b39a046d4dbe8c6550e5c450bd5928b2 Mon Sep 17 00:00:00 2001
From: Daniel Lu <dl1644@gmail.com>
Date: Wed, 25 Aug 2021 15:16:18 -0700
Subject: [PATCH 11/11] missed one thing in the rebase

---
 packages/@react-types/tabs/src/index.d.ts | 7 +------
 1 file changed, 1 insertion(+), 6 deletions(-)

diff --git a/packages/@react-types/tabs/src/index.d.ts b/packages/@react-types/tabs/src/index.d.ts
index cfa58cee3c4..d23598a2b2e 100644
--- a/packages/@react-types/tabs/src/index.d.ts
+++ b/packages/@react-types/tabs/src/index.d.ts
@@ -48,12 +48,7 @@ interface AriaTabListBase {
   isDisabled?: boolean
 }
 
-export interface AriaTabListProps<T> extends TabListProps<T>, AriaTabListBase, DOMProps, AriaLabelingProps {
-  /**
-   * Whether the TabList is contained in a virtual scroller.
-   */
-  isVirtualized?: boolean
-}
+export interface AriaTabListProps<T> extends TabListProps<T>, AriaTabListBase, DOMProps, AriaLabelingProps {}
 
 export interface AriaTabPanelProps extends DOMProps, AriaLabelingProps {}