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

Author: yihuiliao

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/src/ColorSlider.tsx

@@ -92,7 +92,8 @@ export const ColorSlider = React.forwardRef(function ColorSlider(props: Spectrum
         {
           'spectrum-ColorSlider-container--horizontal': !vertical,
           'spectrum-ColorSlider-container--vertical': vertical
-        }
+        },
+        styleProps.className
       )}>
       {label &&
         <div className={classNames(styles, 'spectrum-ColorSlider-labelContainer')}>

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/Menu.tsx

@@ -306,7 +306,6 @@ let keyboard = style<{size: 'S' | 'M' | 'L' | 'XL', isDisabled: boolean}>({
       isDisabled: 'GrayText'
     }
   },
-  backgroundColor: 'gray-25',
   unicodeBidi: 'plaintext'
 });
 

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

@@ -194,6 +194,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();
   });