feat: add virtualization to S2 combobox and picker

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/package.json

@@ -136,6 +136,7 @@
     "@react-aria/interactions": "^3.25.0",
     "@react-aria/live-announcer": "^3.4.2",
     "@react-aria/overlays": "^3.27.0",
+    "@react-aria/separator": "^3.4.8",
     "@react-aria/utils": "^3.28.2",
     "@react-spectrum/utils": "^3.12.4",
     "@react-stately/layout": "^4.2.2",

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

@@ -23,43 +23,44 @@ import {
   ListBoxItem,
   ListBoxItemProps,
   ListBoxProps,
+  ListLayout,
   Provider,
-  SectionProps
+  SectionProps,
+  SeparatorContext,
+  SeparatorProps,
+  useContextProps,
+  Virtualizer
 } from 'react-aria-components';
-import {baseColor, style} from '../style' with {type: 'macro'};
+import {baseColor, edgeToText, focusRing, space, style} from '../style' with {type: 'macro'};
 import {centerBaseline} from './CenterBaseline';
+import {centerPadding, field, fieldInput, getAllowedOverrides, StyleProps} from './style-utils' with {type: 'macro'};
 import {
   checkmark,
   description,
-  Divider,
   icon,
   iconCenterWrapper,
-  label,
-  menuitem,
-  section,
-  sectionHeader,
-  sectionHeading
+  label
 } from './Menu';
 import CheckmarkIcon from '../ui-icons/Checkmark';
 import ChevronIcon from '../ui-icons/Chevron';
-import {createContext, CSSProperties, forwardRef, ReactNode, Ref, useCallback, useContext, useImperativeHandle, useRef, useState} from 'react';
+import {createContext, CSSProperties, ElementType, ForwardedRef, forwardRef, ReactNode, Ref, useCallback, useContext, useImperativeHandle, useRef, useState} from 'react';
 import {createFocusableRef} from '@react-spectrum/utils';
-import {field, fieldInput, getAllowedOverrides, StyleProps} from './style-utils' with {type: 'macro'};
+import {createLeafComponent} from '@react-aria/collections';
+import {divider} from './Divider';
 import {FieldErrorIcon, FieldGroup, FieldLabel, HelpText, Input} from './Field';
+import {filterDOMProps, mergeRefs, useResizeObserver} from '@react-aria/utils';
 import {FormContext, useFormProps} from './Form';
 import {forwardRefType} from './types';
 import {HeaderContext, HeadingContext, Text, TextContext} from './Content';
 import {HelpTextProps, SpectrumLabelableProps} from '@react-types/shared';
 import {IconContext} from './Icon';
-import {menu} from './Picker';
-import {mergeRefs, useResizeObserver} from '@react-aria/utils';
-import {Placement} from 'react-aria';
+import {mergeStyles} from '../style/runtime';
+import {Placement, useSeparator} from 'react-aria';
 import {PopoverBase} from './Popover';
 import {pressScale} from './pressScale';
 import {TextFieldRef} from '@react-types/textfield';
 import {useSpectrumContextProps} from './useSpectrumContextProps';
 
-
 export interface ComboboxStyleProps {
   /**
    * The size of the Combobox.
@@ -148,6 +149,114 @@ const iconStyles = style({
   }
 });
 
+export let listbox = style<{size: 'S' | 'M' | 'L' | 'XL'}>({
+  width: 'full',
+  boxSizing: 'border-box',
+  maxHeight: '[inherit]',
+  // TODO: Might help with horizontal scrolling happening on Windows, will need to check somehow. Otherwise, revert back to overflow: auto
+  overflowY: 'auto',
+  overflowX: 'hidden',
+  fontFamily: 'sans',
+  fontSize: 'control'
+});
+
+export let listboxItem = style({
+  ...focusRing(),
+  boxSizing: 'border-box',
+  borderRadius: 'control',
+  font: 'control',
+  '--labelPadding': {
+    type: 'paddingTop',
+    value: centerPadding()
+  },
+  paddingBottom: '--labelPadding',
+  backgroundColor: { // TODO: revisit color when I have access to dev mode again
+    default: 'transparent',
+    isFocused: baseColor('gray-100').isFocusVisible
+  },
+  color: {
+    default: 'neutral',
+    isDisabled: {
+      default: 'disabled',
+      forcedColors: 'GrayText'
+    }
+  },
+  position: 'relative',
+  // each menu item should take up the entire width, the subgrid will handle within the item
+  gridColumnStart: 1,
+  gridColumnEnd: -1,
+  display: 'grid',
+  gridTemplateAreas: [
+    '. checkmark icon label  .',
+    '.      .      .  description .'
+  ],
+  gridTemplateColumns: {
+    size: {
+      S: [edgeToText(24), 'auto', 'auto', 'minmax(0, 1fr)', edgeToText(24)],
+      M: [edgeToText(32), 'auto', 'auto', 'minmax(0, 1fr)', edgeToText(32)],
+      L: [edgeToText(40), 'auto', 'auto', 'minmax(0, 1fr)', edgeToText(40)],
+      XL: [edgeToText(48), 'auto', 'auto', 'minmax(0, 1fr)', edgeToText(48)]
+    }
+  },
+  gridTemplateRows: {
+    // min-content prevents second row from 'auto'ing to a size larger then 0 when empty
+    default: 'auto minmax(0, min-content)',
+    ':has([slot=description])': 'auto auto'
+  },
+  rowGap: {
+    ':has([slot=description])': space(1)
+  },
+  alignItems: 'baseline',
+  minHeight: 'control',
+  height: 'min',
+  textDecoration: 'none',
+  cursor: {
+    default: 'default',
+    isLink: 'pointer'
+  },
+  transition: 'default'
+}, getAllowedOverrides());
+
+export let listboxHeader = style<{size?: 'S' | 'M' | 'L' | 'XL'}>({
+  color: 'neutral',
+  boxSizing: 'border-box',
+  minHeight: 'control',
+  paddingY: centerPadding(),
+  marginX: {
+    size: {
+      S: `[${edgeToText(24)}]`,
+      M: `[${edgeToText(32)}]`,
+      L: `[${edgeToText(40)}]`,
+      XL: `[${edgeToText(48)}]`
+    }
+  }
+});
+
+export let listboxHeading = style({
+  fontSize: 'ui',
+  fontWeight: 'bold',
+  lineHeight: 'ui',
+  margin: 0
+});
+
+// not sure why edgeToText won't work...
+const separatorWrapper = style({
+  display: {
+    ':is(:last-child > *)': 'none',
+    default: 'flex'
+  },
+  // A workaround since edgeToText() returns undefined for some reason
+  marginX: {
+    size: {
+      S: `[${edgeToText(24)}]`,
+      M: `[${edgeToText(32)}]`,
+      L: `[${edgeToText(40)}]`,
+      XL: `[${edgeToText(48)}]`
+    }
+  },
+  height: 12
+});
+
 let InternalComboboxContext = createContext<{size: 'S' | 'M' | 'L' | 'XL'}>({size: 'M'});
 
 /**
@@ -305,19 +414,27 @@ export const ComboBox = /*#__PURE__*/ (forwardRef as forwardRefType)(function Co
               })}>
               <Provider
                 values={[
-                  [HeaderContext, {styles: sectionHeader({size})}],
-                  [HeadingContext, {styles: sectionHeading}],
+                  [HeaderContext, {styles: listboxHeader({size})}],
+                  [HeadingContext, {styles: listboxHeading}],
                   [TextContext, {
                     slots: {
                       'description': {styles: description({size})}
                     }
                   }]
                 ]}>
-                <ListBox
-                  items={items}
-                  className={menu({size})}>
-                  {children}
-                </ListBox>
+                <Virtualizer
+                  layout={ListLayout}
+                  layoutOptions={{
+                    estimatedRowHeight: 32,
+                    padding: 8,
+                    estimatedHeadingHeight: 50
+                  }}>
+                  <ListBox
+                    items={items}
+                    className={listbox({size})}>
+                    {children}
+                  </ListBox>
+                </Virtualizer>
               </Provider>
             </PopoverBase>
           </InternalComboboxContext.Provider>
@@ -327,7 +444,6 @@ export const ComboBox = /*#__PURE__*/ (forwardRef as forwardRefType)(function Co
   );
 });
 
-
 export interface ComboBoxItemProps extends Omit<ListBoxItemProps, 'children' | 'style' | 'className'>, StyleProps {
   children: ReactNode
 }
@@ -349,7 +465,7 @@ export function ComboBoxItem(props: ComboBoxItemProps): ReactNode {
       ref={ref}
       textValue={props.textValue || (typeof props.children === 'string' ? props.children as string : undefined)}
       style={pressScale(ref, props.UNSAFE_style)}
-      className={renderProps => (props.UNSAFE_className || '') + menuitem({...renderProps, size, isLink}, props.styles)}>
+      className={renderProps => (props.UNSAFE_className || '') + listboxItem({...renderProps, size, isLink}, props.styles)}>
       {(renderProps) => {
         let {children} = props;
         return (
@@ -384,11 +500,52 @@ export function ComboBoxSection<T extends object>(props: ComboBoxSectionProps<T>
   return (
     <>
       <AriaListBoxSection
-        {...props}
-        className={section({size})}>
+        {...props}>
         {props.children}
       </AriaListBoxSection>
-      <Divider />
+      <Divider size={size} />
     </>
   );
 }
+
+export function Divider(props: SeparatorProps & {size?: 'S' | 'M' | 'L' | 'XL' | undefined}): ReactNode {
+  return (
+    <Separator
+      {...props}
+      className={mergeStyles(
+        divider({
+          size: 'M',
+          orientation: 'horizontal',
+          isStaticColor: false
+        }, style({alignSelf: 'center', width: 'full'})))} />
+  );
+}
+
+const Separator = /*#__PURE__*/ createLeafComponent('separator', function Separator(props: SeparatorProps & {size?: 'S' | 'M' | 'L' | 'XL'}, ref: ForwardedRef<HTMLElement>) {
+  [props, ref] = useContextProps(props, ref, SeparatorContext);
+
+  let {elementType, orientation, size, style, className, slot, ...otherProps} = props;
+  let Element = (elementType as ElementType) || 'hr';
+  if (Element === 'hr' && orientation === 'vertical') {
+    Element = 'div';
+  }
+
+  let {separatorProps} = useSeparator({
+    ...otherProps,
+    elementType,
+    orientation
+  });
+
+  return (
+    <div className={separatorWrapper({size})}>
+      <Element
+        {...filterDOMProps(props)}
+        {...separatorProps}
+        style={style}
+        className={className ?? 'react-aria-Separator'}
+        ref={ref}
+        slot={slot || undefined} />
+    </div>
+  );
+});
+