Merge branch 'main' of github.com:adobe/react-spectrum into loadmore_rac

Author: LFDanLu

packages/@react-aria/selection/src/useSelectableCollection.ts

@@ -505,6 +505,7 @@ export function useSelectableCollection(options: AriaSelectableCollectionOptions
 
   // Scroll the focused element into view when the focusedKey changes.
   let lastFocusedKey = useRef(manager.focusedKey);
+  let raf = useRef<number | null>(null);
   useEffect(() => {
     if (manager.isFocused && manager.focusedKey != null && (manager.focusedKey !== lastFocusedKey.current || didAutoFocusRef.current) && scrollRef.current && ref.current) {
       let modality = getInteractionModality();
@@ -516,8 +517,16 @@ export function useSelectableCollection(options: AriaSelectableCollectionOptions
       }
 
       if (modality === 'keyboard' || didAutoFocusRef.current) {
-        scrollIntoView(scrollRef.current, element);
 
+        if (raf.current) {
+          cancelAnimationFrame(raf.current);
+        }
+
+        raf.current = requestAnimationFrame(() => {
+          if (scrollRef.current) {
+            scrollIntoView(scrollRef.current, element);
+          }
+        });
         // Avoid scroll in iOS VO, since it may cause overlay to close (i.e. RAC submenu)
         if (modality !== 'virtual') {
           scrollIntoViewport(element, {containingElement: ref.current});
@@ -534,6 +543,14 @@ export function useSelectableCollection(options: AriaSelectableCollectionOptions
     didAutoFocusRef.current = false;
   });
 
+  useEffect(() => {
+    return () => {
+      if (raf.current) {
+        cancelAnimationFrame(raf.current);
+      }
+    };
+  }, []);
+
   // Intercept FocusScope restoration since virtualized collections can reuse DOM nodes.
   useEvent(ref, 'react-aria-focus-scope-restore', e => {
     e.preventDefault();

packages/@react-spectrum/list/test/ListView.test.js

@@ -73,6 +73,7 @@ describe('ListView', function () {
   afterEach(function () {
     fireEvent.keyDown(document.activeElement, {key: 'Escape'});
     fireEvent.keyUp(document.activeElement, {key: 'Escape'});
+    act(() => {jest.runAllTimers();});
     jest.clearAllMocks();
   });
 
@@ -1453,27 +1454,33 @@ describe('ListView', function () {
 
       // scroll us down far enough that item 0 isn't in the view
       moveFocus('ArrowDown');
+      act(() => jest.runAllTimers());
       expect(scrollIntoView).toHaveBeenLastCalledWith(grid, getRow(tree, 'Item 1'));
       grid.scrollTop = 40;
       fireEvent.scroll(grid);
       moveFocus('ArrowDown');
+      act(() => jest.runAllTimers());
       expect(scrollIntoView).toHaveBeenLastCalledWith(grid, getRow(tree, 'Item 2'));
       grid.scrollTop = 80;
       fireEvent.scroll(grid);
       moveFocus('ArrowDown');
+      act(() => jest.runAllTimers());
       expect(scrollIntoView).toHaveBeenLastCalledWith(grid, getRow(tree, 'Item 3'));
       grid.scrollTop = 120;
       fireEvent.scroll(grid);
 
       moveFocus('ArrowUp');
+      act(() => jest.runAllTimers());
       expect(scrollIntoView).toHaveBeenLastCalledWith(grid, getRow(tree, 'Item 2'));
       grid.scrollTop = 80;
       fireEvent.scroll(grid);
       moveFocus('ArrowUp');
+      act(() => jest.runAllTimers());
       expect(scrollIntoView).toHaveBeenLastCalledWith(grid, getRow(tree, 'Item 1'));
       grid.scrollTop = 40;
       fireEvent.scroll(grid);
       moveFocus('ArrowUp');
+      act(() => jest.runAllTimers());
       expect(scrollIntoView).toHaveBeenLastCalledWith(grid, getRow(tree, 'Item 0'));
     });
 
@@ -1506,6 +1513,7 @@ describe('ListView', function () {
       });
 
       focusRow(tree, 'Item 1');
+      act(() => jest.runAllTimers());
       expect(document.activeElement).toBe(getRow(tree, 'Item 1'));
       expect(scrollIntoView).toHaveBeenLastCalledWith(grid, document.activeElement);
     });
@@ -1539,6 +1547,7 @@ describe('ListView', function () {
 
       // Moving focus should scroll the new focused item into view
       moveFocus('ArrowDown');
+      act(() => jest.runAllTimers());
       expect(document.activeElement).toBe(getRow(tree, 'Item 1'));
       expect(scrollIntoView).toHaveBeenLastCalledWith(body, document.activeElement);
     });

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

@@ -28,39 +28,35 @@ import {
   ListLayout,
   Provider,
   SectionProps,
-  SeparatorContext,
-  SeparatorProps,
   UNSTABLE_ListBoxLoadingSentinel,
-  useContextProps,
   Virtualizer
 } from 'react-aria-components';
 import {AsyncLoadable, HelpTextProps, LoadingState, SpectrumLabelableProps} from '@react-types/shared';
 import {baseColor, edgeToText, focusRing, space, style} from '../style' with {type: 'macro'};
 import {centerBaseline} from './CenterBaseline';
-import {centerPadding, controlBorderRadius, controlFont, controlSize, field, fieldInput, getAllowedOverrides, StyleProps} from './style-utils' with {type: 'macro'};
+import {centerPadding, control, controlBorderRadius, controlFont, controlSize, field, fieldInput, getAllowedOverrides, StyleProps} from './style-utils' with {type: 'macro'};
 import {
   checkmark,
   description,
   icon,
   iconCenterWrapper,
-  label
+  label,
+  sectionHeading
 } from './Menu';
 import CheckmarkIcon from '../ui-icons/Checkmark';
 import ChevronIcon from '../ui-icons/Chevron';
-import {createContext, CSSProperties, ElementType, ForwardedRef, forwardRef, ReactNode, Ref, useCallback, useContext, useEffect, useImperativeHandle, useMemo, useRef, useState} from 'react';
+import {createContext, CSSProperties, ForwardedRef, forwardRef, ReactNode, Ref, useCallback, useContext, useEffect, useImperativeHandle, useMemo, useRef, useState} from 'react';
 import {createFocusableRef} from '@react-spectrum/utils';
 import {createLeafComponent} from '@react-aria/collections';
-import {divider} from './Divider';
 import {FieldErrorIcon, FieldGroup, FieldLabel, HelpText, Input} from './Field';
-import {filterDOMProps, mergeRefs, useResizeObserver, useSlotId} from '@react-aria/utils';
 import {FormContext, useFormProps} from './Form';
 import {forwardRefType} from './types';
 import {HeaderContext, HeadingContext, Text, TextContext} from './Content';
 import {IconContext} from './Icon';
 // @ts-ignore
 import intlMessages from '../intl/*.json';
-import {mergeStyles} from '../style/runtime';
-import {Placement, useSeparator} from 'react-aria';
+import {mergeRefs, useResizeObserver, useSlotId} from '@react-aria/utils';
+import {Placement} from 'react-aria';
 import {PopoverBase} from './Popover';
 import {pressScale} from './pressScale';
 import {ProgressCircle} from './ProgressCircle';
@@ -210,38 +206,34 @@ export let listbox = style<{size: 'S' | 'M' | 'L' | 'XL'}>({
   // 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()
+  fontFamily: 'sans',
+  fontSize: controlFont()
 });
 
 export let listboxItem = style({
   ...focusRing(),
-  ...controlBorderRadius(),
-  boxSizing: 'border-box',
-  font: controlFont(),
-  '--labelPadding': {
-    type: 'paddingTop',
-    value: centerPadding()
-  },
+  ...control({shape: 'default', wrap: true, icon: true}),
+  columnGap: 0,
+  paddingX: 0,
   paddingBottom: '--labelPadding',
   backgroundColor: {
     default: 'transparent',
     isFocused: baseColor('gray-100').isFocusVisible
   },
   color: {
-    default: 'neutral',
+    default: baseColor('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 .'
+    '. checkmark icon label       .',
+    '. .         .    description .'
   ],
   gridTemplateColumns: {
     size: {
@@ -285,20 +277,11 @@ export let listboxHeader = style<{size?: 'S' | 'M' | 'L' | 'XL'}>({
   }
 });
 
-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)}]`,
@@ -307,7 +290,18 @@ const separatorWrapper = style({
       XL: `[${edgeToText(48)}]`
     }
   },
-  height: 12
+  height: 12,
+  alignItems: 'center'
+});
+
+const dividerStyle = style({
+  backgroundColor: {
+    default: 'gray-200',
+    forcedColors: 'ButtonBorder'
+  },
+  borderRadius: 'full',
+  height: '[2px]',
+  width: 'full'
 });
 
 // Not from any design, just following the sizing of the existing rows
@@ -667,7 +661,7 @@ const ComboboxInner = forwardRef(function ComboboxInner(props: ComboBoxProps<any
           <Provider
             values={[
               [HeaderContext, {styles: listboxHeader({size})}],
-              [HeadingContext, {styles: listboxHeading}],
+              [HeadingContext, {styles: sectionHeading}],
               [TextContext, {
                 slots: {
                   'description': {styles: description({size})}
@@ -700,43 +694,10 @@ const ComboboxInner = forwardRef(function ComboboxInner(props: ComboBoxProps<any
   );
 });
 
-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
-  });
-
+export const Divider = /*#__PURE__*/ createLeafComponent('separator', function Divider({size}: {size?: 'S' | 'M' | 'L' | 'XL'}, ref: ForwardedRef<HTMLDivElement>) {
   return (
     <div className={separatorWrapper({size})}>
-      <Element
-        {...filterDOMProps(props)}
-        {...separatorProps}
-        style={style}
-        className={className ?? 'react-aria-Separator'}
-        ref={ref}
-        slot={slot || undefined} />
+      <div ref={ref} className={dividerStyle} />
     </div>
   );
 });