Merge branch 's2-combobox-picker-virtualizer' of github.com:adobe/react-spectrum into loadmore_rac

Author: LFDanLu

packages/@react-spectrum/autocomplete/test/SearchAutocomplete.test.js

@@ -143,6 +143,7 @@ describe('SearchAutocomplete', function () {
     user = userEvent.setup({delay: null, pointerMap});
     jest.spyOn(window.HTMLElement.prototype, 'clientWidth', 'get').mockImplementation(() => 1000);
     jest.spyOn(window.HTMLElement.prototype, 'clientHeight', 'get').mockImplementation(() => 1000);
+    jest.spyOn(window.HTMLElement.prototype, 'scrollHeight', 'get').mockImplementation(() => 50);
     window.HTMLElement.prototype.scrollIntoView = jest.fn();
     simulateDesktop();
     jest.useFakeTimers();

packages/@react-spectrum/card/test/CardView.test.js

@@ -144,6 +144,10 @@ describe('CardView', function () {
     jest.useFakeTimers();
   });
 
+  beforeEach(() => {
+    jest.spyOn(window.HTMLElement.prototype, 'scrollHeight', 'get').mockImplementation(() => 50);
+  });
+
   afterEach(() => {
     jest.clearAllMocks();
     act(() => jest.runAllTimers());

packages/@react-spectrum/color/test/ColorPicker.test.js

@@ -22,9 +22,14 @@ describe('ColorPicker', function () {
 
   beforeAll(() => {
     user = userEvent.setup({delay: null, pointerMap});
+    jest.spyOn(window.HTMLElement.prototype, 'scrollHeight', 'get').mockImplementation(() => 50);
     jest.useFakeTimers();
   });
 
+  afterAll(function () {
+    jest.restoreAllMocks();
+  });
+
   afterEach(() => {
     act(() => {jest.runAllTimers();});
   });

packages/@react-spectrum/combobox/test/ComboBox.test.js

@@ -257,6 +257,7 @@ describe('ComboBox', function () {
   });
 
   beforeEach(() => {
+    jest.spyOn(window.HTMLElement.prototype, 'scrollHeight', 'get').mockImplementation(() => 50);
     load = jest
       .fn()
       .mockImplementationOnce(getFilterItems)

packages/@react-spectrum/picker/test/Picker.test.js

@@ -31,7 +31,7 @@ import {User} from '@react-aria/test-utils';
 import userEvent from '@testing-library/user-event';
 
 describe('Picker', function () {
-  let offsetWidth, offsetHeight;
+  let offsetWidth, offsetHeight, scrollHeight;
   let onSelectionChange = jest.fn();
   let testUtilUser = new User();
   let user;
@@ -40,13 +40,15 @@ describe('Picker', function () {
     user = userEvent.setup({delay: null, pointerMap});
     offsetWidth = jest.spyOn(window.HTMLElement.prototype, 'clientWidth', 'get').mockImplementation(() => 1000);
     offsetHeight = jest.spyOn(window.HTMLElement.prototype, 'clientHeight', 'get').mockImplementation(() => 1000);
+    scrollHeight = jest.spyOn(window.HTMLElement.prototype, 'scrollHeight', 'get').mockImplementation(() => 50);
     simulateDesktop();
     jest.useFakeTimers();
   });
 
   afterAll(function () {
     offsetWidth.mockReset();
     offsetHeight.mockReset();
+    scrollHeight.mockReset();
   });
 
   afterEach(() => {

packages/@react-spectrum/picker/test/TempUtilTest.test.js

@@ -27,9 +27,14 @@ describe('Picker/Select ', function () {
 
   beforeAll(function () {
     user = userEvent.setup({delay: null, pointerMap});
+    jest.spyOn(window.HTMLElement.prototype, 'scrollHeight', 'get').mockImplementation(() => 50);
     simulateDesktop();
   });
 
+  afterAll(function () {
+    jest.restoreAllMocks();
+  });
+
   describe('with real timers', function () {
     beforeAll(function () {
       jest.useRealTimers();

packages/@react-spectrum/s2/src/ComboBox.tsx

@@ -207,7 +207,9 @@ export let listbox = style<{size: 'S' | 'M' | 'L' | 'XL'}>({
   width: 'full',
   boxSizing: 'border-box',
   maxHeight: '[inherit]',
-  overflow: 'auto',
+  // TODO: Might help with horizontal scrolling happening on Windows, will need to check somehow. Otherwise, revert back to overflow: auto
+  overflowY: 'auto',
+  overflowX: 'hidden',
   font: controlFont()
 });
 
@@ -221,7 +223,7 @@ export let listboxItem = style({
     value: centerPadding()
   },
   paddingBottom: '--labelPadding',
-  backgroundColor: { // TODO: revisit color when I have access to dev mode again
+  backgroundColor: {
     default: 'transparent',
     isFocused: baseColor('gray-100').isFocusVisible
   },

packages/@react-spectrum/s2/src/Picker.tsx

@@ -333,6 +333,7 @@ export const Picker = /*#__PURE__*/ (forwardRef as forwardRefType)(function Pick
     );
   }
   let scale = useScale();
+  let layout = new ListLayout({estimatedRowHeight: 32, estimatedHeadingHeight: 50, padding: 8, loaderHeight: LOADER_ROW_HEIGHTS[size][scale]});
 
   return (
     <AriaSelect
@@ -413,13 +414,7 @@ export const Picker = /*#__PURE__*/ (forwardRef as forwardRefType)(function Pick
                   }]
                 ]}>
                 <Virtualizer
-                  layout={ListLayout}
-                  layoutOptions={{
-                    estimatedRowHeight: 32,
-                    estimatedHeadingHeight: 50,
-                    padding: 8,
-                    loaderHeight: LOADER_ROW_HEIGHTS[size][scale]
-                  }}>
+                  layout={layout}>
                   <ListBox
                     items={items}
                     className={listbox({size})}>

packages/@react-spectrum/s2/src/TableView.tsx

@@ -193,6 +193,9 @@ export class S2TableLayout<T> extends TableLayout<T> {
 
   protected buildCollection(): LayoutNode[] {
     let [header, body] = super.buildCollection();
+    if (!header) {
+      return [];
+    }
     let {children, layoutInfo} = body;
     // TableLayout's buildCollection always sets the body width to the max width between the header width, but
     // we want the body to be sticky and only as wide as the table so it is always in view if loading/empty

packages/@react-spectrum/tabs/test/Tabs.test.js

@@ -60,6 +60,7 @@ describe('Tabs', function () {
   beforeEach(() => {
     jest.spyOn(window.HTMLElement.prototype, 'clientWidth', 'get').mockImplementation(() => 1000);
     jest.spyOn(window.HTMLElement.prototype, 'clientHeight', 'get').mockImplementation(() => 1000);
+    jest.spyOn(window.HTMLElement.prototype, 'scrollHeight', 'get').mockImplementation(() => 50);
     window.HTMLElement.prototype.scrollIntoView = jest.fn();
   });