feat: Async loading support for S2 ComboBox/Picker #7938

LFDanLu · 2025-03-14T22:44:51Z

Closes

Adds loading support for S2 ComboBox/Picker and their RAC equivalents (and RAC ListBox too since that is what ComboBox and Picker uses
refactors useLoadMore to accept collections instead of items

✅ Pull Request Checklist:

Included link to corresponding React Spectrum GitHub Issue.
Added/updated unit tests and storybook for this change (for new code or code which already has tests).
Filled out test instructions.
Updated documentation (if it already exists for this component).
Looked at the Accessibility Practices for this feature - Aria Practices

📝 Test Instructions:

Test S2 Combobox/Picker async loading stories and make sure it works as expected (aka infinite scrolling). Also test the RAC equivalents as well as S2 CardView/Table/other components that already had async loading support.

🧢 Your Project:

RSP

…and data-attributes

rspbot · 2025-03-15T00:38:52Z

Build successful! 🎉

rspbot · 2025-03-17T17:27:34Z

Build successful! 🎉

…oad more like v3

rspbot · 2025-03-18T22:38:53Z

Build successful! 🎉

rspbot · 2025-03-19T00:07:14Z

Build successful! 🎉

rspbot · 2025-04-09T21:18:16Z

Build successful! 🎉

LFDanLu · 2025-04-10T20:19:01Z

packages/@react-aria/utils/src/useLoadMore.ts

Make a new hook since util package version might not match up with pinned version of tableview/etc, which makes this a breaking change

LFDanLu · 2025-04-10T20:37:21Z

packages/react-aria-components/src/ComboBox.tsx

+  // TODO: do we want loadingState for RAC Combobox or just S2
+  /**
+   * Whether the combobox is currently loading items.
+   * @selector [data-loading]
+   */
+  isLoading?: boolean


For now see about moving isLoading to the loading spinner? Otherwise, just make sure the followup refactor goes in before next release

LFDanLu · 2025-04-10T20:40:07Z

packages/react-aria-components/src/ListBox.tsx

@@ -230,6 +235,21 @@ function ListBoxInner<T extends object>({state: inputState, props, listBoxRef}:
    );
  }

+  let sentinelRef = useRef(null);
+  // TODO: Should scrollOffset for useLoadMore should be configurable by the user


expose on sentinel

LFDanLu · 2025-04-10T20:47:11Z

packages/react-aria-components/src/ListBox.tsx

+  // TODO: Think about if completely empty state. Do we leave it up to the user to setup the two states for empty and empty + loading?
+  // Do we add a data attibute/prop/renderprop to ListBox for isLoading


Keep renderEmptyState, will be clearer with refactor to loadingSentinel

revert v3 components to still use old useLoadMore

render a sentinel in the loading indicator always and call useLoadMoreSentinel from there instead. This allows the user to theoretically render as many sentinels as they want with each having its own loading state/logic

rspbot · 2025-04-18T00:49:36Z

Build successful! 🎉

rspbot · 2025-04-19T00:33:31Z

Build successful! 🎉

…able items

…hen empty

rspbot · 2025-04-22T00:43:09Z

Build successful! 🎉

rspbot · 2025-04-22T00:43:11Z

## API Changes

react-aria-components

/react-aria-components:DropZone

 DropZone {
   aria-describedby?: string
   aria-details?: string
   aria-label?: string
   aria-labelledby?: string
   children?: ReactNode | ((DropZoneRenderProps & {
     defaultChildren: ReactNode | undefined
 })) => ReactNode
   className?: string | ((DropZoneRenderProps & {
     defaultClassName: string | undefined
 })) => string
   getDropOperation?: (DragTypes, Array<DropOperation>) => DropOperation
   isDisabled?: boolean
   onDrop?: (DropEvent) => void
-  onDropActivate?: (DropActivateEvent) => void
   onDropEnter?: (DropEnterEvent) => void
   onDropExit?: (DropExitEvent) => void
   onDropMove?: (DropMoveEvent) => void
   onHoverChange?: (boolean) => void
   onHoverStart?: (HoverEvent) => void
   slot?: string | null
   style?: CSSProperties | ((DropZoneRenderProps & {
     defaultStyle: CSSProperties
 })) => CSSProperties | undefined
 }

/react-aria-components:UNSTABLE_TableLoadingIndicator

-UNSTABLE_TableLoadingIndicator <T extends {}> {
-  children?: ReactNode
-  className?: string
-  style?: CSSProperties
-}

/react-aria-components:Tree

 Tree <T extends {}> {
   aria-describedby?: string
   aria-details?: string
   aria-label?: string
   aria-labelledby?: string
   autoFocus?: boolean | FocusStrategy
   children?: ReactNode | ({}) => ReactNode
   className?: string | ((TreeRenderProps & {
     defaultClassName: string | undefined
 })) => string
   defaultExpandedKeys?: Iterable<Key>
   defaultSelectedKeys?: 'all' | Iterable<Key>
   dependencies?: ReadonlyArray<any>
   disabledBehavior?: DisabledBehavior = 'all'
   disabledKeys?: Iterable<Key>
   disallowEmptySelection?: boolean
-  dragAndDropHooks?: DragAndDropHooks
   escapeKeyBehavior?: 'clearSelection' | 'none' = 'clearSelection'
   expandedKeys?: Iterable<Key>
   id?: string
   items?: Iterable<T>
-  keyboardDelegate?: KeyboardDelegate
   onAction?: (Key) => void
   onExpandedChange?: (Set<Key>) => any
   onScroll?: (UIEvent<Element>) => void
   onSelectionChange?: (Selection) => void
   selectedKeys?: 'all' | Iterable<Key>
   selectionBehavior?: SelectionBehavior
   selectionMode?: SelectionMode
   shouldSelectOnPressUp?: boolean
   slot?: string | null
   style?: CSSProperties | ((TreeRenderProps & {
     defaultStyle: CSSProperties
 })) => CSSProperties | undefined
 }

/react-aria-components:DropZoneProps

 DropZoneProps {
   aria-describedby?: string
   aria-details?: string
   aria-label?: string
   aria-labelledby?: string
   children?: ReactNode | ((DropZoneRenderProps & {
     defaultChildren: ReactNode | undefined
 })) => ReactNode
   className?: string | ((DropZoneRenderProps & {
     defaultClassName: string | undefined
 })) => string
   getDropOperation?: (DragTypes, Array<DropOperation>) => DropOperation
   isDisabled?: boolean
   onDrop?: (DropEvent) => void
-  onDropActivate?: (DropActivateEvent) => void
   onDropEnter?: (DropEnterEvent) => void
   onDropExit?: (DropExitEvent) => void
   onDropMove?: (DropMoveEvent) => void
   onHoverChange?: (boolean) => void
   onHoverStart?: (HoverEvent) => void
   slot?: string | null
   style?: CSSProperties | ((DropZoneRenderProps & {
     defaultStyle: CSSProperties
 })) => CSSProperties | undefined
 }

/react-aria-components:TreeProps

 TreeProps <T> {
   aria-describedby?: string
   aria-details?: string
   aria-label?: string
   aria-labelledby?: string
   autoFocus?: boolean | FocusStrategy
   children?: ReactNode | (T) => ReactNode
   className?: string | ((TreeRenderProps & {
     defaultClassName: string | undefined
 })) => string
   defaultExpandedKeys?: Iterable<Key>
   defaultSelectedKeys?: 'all' | Iterable<Key>
   dependencies?: ReadonlyArray<any>
   disabledBehavior?: DisabledBehavior = 'all'
   disabledKeys?: Iterable<Key>
   disallowEmptySelection?: boolean
-  dragAndDropHooks?: DragAndDropHooks
   escapeKeyBehavior?: 'clearSelection' | 'none' = 'clearSelection'
   expandedKeys?: Iterable<Key>
   id?: string
   items?: Iterable<T>
-  keyboardDelegate?: KeyboardDelegate
   onAction?: (Key) => void
   onExpandedChange?: (Set<Key>) => any
   onScroll?: (UIEvent<Element>) => void
   onSelectionChange?: (Selection) => void
   selectedKeys?: 'all' | Iterable<Key>
   selectionBehavior?: SelectionBehavior
   selectionMode?: SelectionMode
   shouldSelectOnPressUp?: boolean
   slot?: string | null
   style?: CSSProperties | ((TreeRenderProps & {
     defaultStyle: CSSProperties
 })) => CSSProperties | undefined
 }

/react-aria-components:UNSTABLE_GridListLoadingSentinel

+UNSTABLE_GridListLoadingSentinel <T extends {}> {
+  children?: ReactNode
+  className?: string
+  isLoading?: boolean
+  onLoadMore?: () => any
+  scrollOffset?: number = 1
+  style?: CSSProperties
+}

/react-aria-components:UNSTABLE_ListBoxLoadingSentinel

+UNSTABLE_ListBoxLoadingSentinel <T extends {}> {
+  children?: ReactNode
+  className?: string
+  isLoading?: boolean
+  onLoadMore?: () => any
+  scrollOffset?: number = 1
+  style?: CSSProperties
+}

/react-aria-components:UNSTABLE_TableLoadingSentinel

+UNSTABLE_TableLoadingSentinel <T extends {}> {
+  children?: ReactNode
+  className?: string
+  isLoading?: boolean
+  onLoadMore?: () => any
+  scrollOffset?: number = 1
+  style?: CSSProperties
+}

/react-aria-components:ListBoxLoadingSentinelProps

+ListBoxLoadingSentinelProps {
+  children?: ReactNode
+  className?: string
+  isLoading?: boolean
+  onLoadMore?: () => any
+  scrollOffset?: number = 1
+  style?: CSSProperties
+}

@react-aria/dnd

/@react-aria/dnd:DroppableCollectionOptions

 DroppableCollectionOptions {
   acceptedDragTypes?: 'all' | Array<string | symbol> = 'all'
   dropTargetDelegate: DropTargetDelegate
   getDropOperation?: (DropTarget, DragTypes, Array<DropOperation>) => DropOperation
   keyboardDelegate: KeyboardDelegate
   onDrop?: (DroppableCollectionDropEvent) => void
   onDropEnter?: (DroppableCollectionEnterEvent) => void
   onDropExit?: (DroppableCollectionExitEvent) => void
   onInsert?: (DroppableCollectionInsertDropEvent) => void
   onItemDrop?: (DroppableCollectionOnItemDropEvent) => void
-  onKeyDown?: KeyboardEvents['onKeyDown']
   onReorder?: (DroppableCollectionReorderEvent) => void
   onRootDrop?: (DroppableCollectionRootDropEvent) => void
   shouldAcceptItemDrop?: (ItemDropTarget, DragTypes) => boolean
 }

/@react-aria/dnd:DropOptions

 DropOptions {
   getDropOperation?: (DragTypes, Array<DropOperation>) => DropOperation
   getDropOperationForPoint?: (DragTypes, Array<DropOperation>, number, number) => DropOperation
   hasDropButton?: boolean
   isDisabled?: boolean
   onDrop?: (DropEvent) => void
-  onDropActivate?: (DropActivateEvent) => void
   onDropEnter?: (DropEnterEvent) => void
   onDropExit?: (DropExitEvent) => void
   onDropMove?: (DropMoveEvent) => void
   ref: RefObject<FocusableElement | null>

@react-aria/utils

/@react-aria/utils:useLoadMoreSentinel

+useLoadMoreSentinel {
+  props: LoadMoreSentinelProps
+  ref: RefObject<HTMLElement | null>
+  returnVal: undefined
+}

/@react-aria/utils:LoadMoreSentinelProps

+LoadMoreSentinelProps {
+  isLoading?: boolean
+  onLoadMore?: () => any
+  scrollOffset?: number = 1
+}

@react-spectrum/dropzone

/@react-spectrum/dropzone:DropZone

 DropZone {
   UNSAFE_className?: string
   UNSAFE_style?: CSSProperties
   alignSelf?: Responsive<'auto' | 'normal' | 'start' | 'end' | 'center' | 'flex-start' | 'flex-end' | 'self-start' | 'self-end' | 'stretch'>
   aria-describedby?: string
   aria-details?: string
   aria-label?: string
   aria-labelledby?: string
   bottom?: Responsive<DimensionValue>
   children: ReactNode
   end?: Responsive<DimensionValue>
   flex?: Responsive<string | number | boolean>
   flexBasis?: Responsive<number | string>
   flexGrow?: Responsive<number>
   flexShrink?: Responsive<number>
   getDropOperation?: (DragTypes, Array<DropOperation>) => DropOperation
   gridArea?: Responsive<string>
   gridColumn?: Responsive<string>
   gridColumnEnd?: Responsive<string>
   gridColumnStart?: Responsive<string>
   gridRow?: Responsive<string>
   gridRowEnd?: Responsive<string>
   gridRowStart?: Responsive<string>
   height?: Responsive<DimensionValue>
   id?: string
   isFilled?: boolean
   isHidden?: Responsive<boolean>
   justifySelf?: Responsive<'auto' | 'normal' | 'start' | 'end' | 'flex-start' | 'flex-end' | 'self-start' | 'self-end' | 'center' | 'left' | 'right' | 'stretch'>
   left?: Responsive<DimensionValue>
   margin?: Responsive<DimensionValue>
   marginBottom?: Responsive<DimensionValue>
   marginEnd?: Responsive<DimensionValue>
   marginStart?: Responsive<DimensionValue>
   marginTop?: Responsive<DimensionValue>
   marginX?: Responsive<DimensionValue>
   marginY?: Responsive<DimensionValue>
   maxHeight?: Responsive<DimensionValue>
   maxWidth?: Responsive<DimensionValue>
   minHeight?: Responsive<DimensionValue>
   minWidth?: Responsive<DimensionValue>
   onDrop?: (DropEvent) => void
-  onDropActivate?: (DropActivateEvent) => void
   onDropEnter?: (DropEnterEvent) => void
   onDropExit?: (DropExitEvent) => void
   onDropMove?: (DropMoveEvent) => void
   order?: Responsive<number>
   replaceMessage?: string
   right?: Responsive<DimensionValue>
   slot?: string | null
   start?: Responsive<DimensionValue>
   top?: Responsive<DimensionValue>
   width?: Responsive<DimensionValue>
   zIndex?: Responsive<number>
 }

/@react-spectrum/dropzone:SpectrumDropZoneProps

 SpectrumDropZoneProps {
   UNSAFE_className?: string
   UNSAFE_style?: CSSProperties
   alignSelf?: Responsive<'auto' | 'normal' | 'start' | 'end' | 'center' | 'flex-start' | 'flex-end' | 'self-start' | 'self-end' | 'stretch'>
   aria-describedby?: string
   aria-details?: string
   aria-label?: string
   aria-labelledby?: string
   bottom?: Responsive<DimensionValue>
   children: ReactNode
   end?: Responsive<DimensionValue>
   flex?: Responsive<string | number | boolean>
   flexBasis?: Responsive<number | string>
   flexGrow?: Responsive<number>
   flexShrink?: Responsive<number>
   getDropOperation?: (DragTypes, Array<DropOperation>) => DropOperation
   gridArea?: Responsive<string>
   gridColumn?: Responsive<string>
   gridColumnEnd?: Responsive<string>
   gridColumnStart?: Responsive<string>
   gridRow?: Responsive<string>
   gridRowEnd?: Responsive<string>
   gridRowStart?: Responsive<string>
   height?: Responsive<DimensionValue>
   id?: string
   isFilled?: boolean
   isHidden?: Responsive<boolean>
   justifySelf?: Responsive<'auto' | 'normal' | 'start' | 'end' | 'flex-start' | 'flex-end' | 'self-start' | 'self-end' | 'center' | 'left' | 'right' | 'stretch'>
   left?: Responsive<DimensionValue>
   margin?: Responsive<DimensionValue>
   marginBottom?: Responsive<DimensionValue>
   marginEnd?: Responsive<DimensionValue>
   marginStart?: Responsive<DimensionValue>
   marginTop?: Responsive<DimensionValue>
   marginX?: Responsive<DimensionValue>
   marginY?: Responsive<DimensionValue>
   maxHeight?: Responsive<DimensionValue>
   maxWidth?: Responsive<DimensionValue>
   minHeight?: Responsive<DimensionValue>
   minWidth?: Responsive<DimensionValue>
   onDrop?: (DropEvent) => void
-  onDropActivate?: (DropActivateEvent) => void
   onDropEnter?: (DropEnterEvent) => void
   onDropExit?: (DropExitEvent) => void
   onDropMove?: (DropMoveEvent) => void
   order?: Responsive<number>
   replaceMessage?: string
   right?: Responsive<DimensionValue>
   slot?: string | null
   start?: Responsive<DimensionValue>
   top?: Responsive<DimensionValue>
   width?: Responsive<DimensionValue>
   zIndex?: Responsive<number>
 }

@react-spectrum/s2

/@react-spectrum/s2:ComboBox

 ComboBox <T extends {}> {
   UNSAFE_className?: UnsafeClassName
   UNSAFE_style?: CSSProperties
   align?: 'start' | 'end' = 'start'
   allowsCustomValue?: boolean
   aria-describedby?: string
   aria-details?: string
   aria-label?: string
   aria-labelledby?: string
   autoFocus?: boolean
   children: ReactNode | ({}) => ReactNode
   contextualHelp?: ReactNode
   defaultInputValue?: string
   defaultItems?: Iterable<T>
   defaultSelectedKey?: Key
   description?: ReactNode
   direction?: 'bottom' | 'top' = 'bottom'
   disabledKeys?: Iterable<Key>
   errorMessage?: ReactNode | (ValidationResult) => ReactNode
   formValue?: 'text' | 'key' = 'key'
   id?: string
   inputValue?: string
   isDisabled?: boolean
   isInvalid?: boolean
   isReadOnly?: boolean
   isRequired?: boolean
   items?: Iterable<T>
   label?: ReactNode
   labelAlign?: Alignment = 'start'
   labelPosition?: LabelPosition = 'top'
+  loadingState?: LoadingState
   menuTrigger?: MenuTriggerAction = 'input'
   menuWidth?: number
   name?: string
   necessityIndicator?: NecessityIndicator = 'icon'
   onBlur?: (FocusEvent<HTMLInputElement>) => void
   onFocus?: (FocusEvent<HTMLInputElement>) => void
   onFocusChange?: (boolean) => void
   onInputChange?: (string) => void
   onKeyDown?: (KeyboardEvent) => void
   onKeyUp?: (KeyboardEvent) => void
+  onLoadMore?: () => any
   onOpenChange?: (boolean, MenuTriggerAction) => void
   onSelectionChange?: (Key | null) => void
   selectedKey?: Key | null
   shouldFlip?: boolean = true
   size?: 'S' | 'M' | 'L' | 'XL' = 'M'
   slot?: string | null
   styles?: StylesProp
   validate?: (ComboBoxValidationValue) => ValidationError | boolean | null | undefined
   validationBehavior?: 'native' | 'aria' = 'native'
 }

/@react-spectrum/s2:DropZone

 DropZone {
   UNSAFE_className?: UnsafeClassName
   UNSAFE_style?: CSSProperties
   aria-describedby?: string
   aria-details?: string
   aria-label?: string
   aria-labelledby?: string
   children: ReactNode
   getDropOperation?: (DragTypes, Array<DropOperation>) => DropOperation
   id?: string
   isFilled?: boolean
   onDrop?: (DropEvent) => void
-  onDropActivate?: (DropActivateEvent) => void
   onDropEnter?: (DropEnterEvent) => void
   onDropExit?: (DropExitEvent) => void
   onDropMove?: (DropMoveEvent) => void
   replaceMessage?: string
   slot?: string | null
   styles?: StylesPropWithHeight
 }

/@react-spectrum/s2:Picker

 Picker <T extends {}> {
   UNSAFE_className?: UnsafeClassName
   UNSAFE_style?: CSSProperties
   align?: 'start' | 'end' = 'start'
   aria-describedby?: string
   aria-details?: string
   aria-label?: string
   aria-labelledby?: string
   autoComplete?: string
   autoFocus?: boolean
   children: ReactNode | ({}) => ReactNode
   contextualHelp?: ReactNode
   defaultOpen?: boolean
   defaultSelectedKey?: Key
   description?: ReactNode
   direction?: 'bottom' | 'top' = 'bottom'
   disabledKeys?: Iterable<Key>
   errorMessage?: ReactNode | (ValidationResult) => ReactNode
   excludeFromTabOrder?: boolean
   id?: string
   isDisabled?: boolean
   isInvalid?: boolean
+  isLoading?: boolean
   isOpen?: boolean
   isRequired?: boolean
   items?: Iterable<T>
   label?: ReactNode
   labelAlign?: Alignment = 'start'
   labelPosition?: LabelPosition = 'top'
   menuWidth?: number
   name?: string
   necessityIndicator?: NecessityIndicator = 'icon'
   onBlur?: (FocusEvent<Target>) => void
   onFocus?: (FocusEvent<Target>) => void
   onFocusChange?: (boolean) => void
   onKeyDown?: (KeyboardEvent) => void
   onKeyUp?: (KeyboardEvent) => void
+  onLoadMore?: () => any
   onOpenChange?: (boolean) => void
   onSelectionChange?: (Key) => void
   placeholder?: string = 'Select an item' (localized)
   selectedKey?: Key | null
   size?: 'S' | 'M' | 'L' | 'XL' = 'M'
   slot?: string | null
   styles?: StylesProp
   validate?: (Key) => ValidationError | boolean | null | undefined
   validationBehavior?: 'native' | 'aria' = 'native'
 }

/@react-spectrum/s2:TreeView

 TreeView {
   UNSAFE_className?: UnsafeClassName
   UNSAFE_style?: CSSProperties
   aria-describedby?: string
   aria-details?: string
   aria-label?: string
   aria-labelledby?: string
   autoFocus?: boolean | FocusStrategy
   children?: ReactNode | (T) => ReactNode
   defaultExpandedKeys?: Iterable<Key>
   defaultSelectedKeys?: 'all' | Iterable<Key>
   dependencies?: ReadonlyArray<any>
   disabledBehavior?: DisabledBehavior = 'all'
   disabledKeys?: Iterable<Key>
   disallowEmptySelection?: boolean
   escapeKeyBehavior?: 'clearSelection' | 'none' = 'clearSelection'
   expandedKeys?: Iterable<Key>
   id?: string
   isDetached?: boolean
   isEmphasized?: boolean
   items?: Iterable<T>
-  keyboardDelegate?: KeyboardDelegate
   onAction?: (Key) => void
   onExpandedChange?: (Set<Key>) => any
   onSelectionChange?: (Selection) => void
   renderEmptyState?: (TreeEmptyStateRenderProps) => ReactNode
   selectionMode?: SelectionMode
   shouldSelectOnPressUp?: boolean
   slot?: string | null
   styles?: StylesPropWithHeight
 }

/@react-spectrum/s2:ComboBoxProps

 ComboBoxProps <T extends {}> {
   UNSAFE_className?: UnsafeClassName
   UNSAFE_style?: CSSProperties
   align?: 'start' | 'end' = 'start'
   allowsCustomValue?: boolean
   aria-describedby?: string
   aria-details?: string
   aria-label?: string
   aria-labelledby?: string
   autoFocus?: boolean
   children: ReactNode | ({}) => ReactNode
   contextualHelp?: ReactNode
   defaultInputValue?: string
   defaultItems?: Iterable<T>
   defaultSelectedKey?: Key
   description?: ReactNode
   direction?: 'bottom' | 'top' = 'bottom'
   disabledKeys?: Iterable<Key>
   errorMessage?: ReactNode | (ValidationResult) => ReactNode
   formValue?: 'text' | 'key' = 'key'
   id?: string
   inputValue?: string
   isDisabled?: boolean
   isInvalid?: boolean
   isReadOnly?: boolean
   isRequired?: boolean
   items?: Iterable<T>
   label?: ReactNode
   labelAlign?: Alignment = 'start'
   labelPosition?: LabelPosition = 'top'
+  loadingState?: LoadingState
   menuTrigger?: MenuTriggerAction = 'input'
   menuWidth?: number
   name?: string
   necessityIndicator?: NecessityIndicator = 'icon'
   onBlur?: (FocusEvent<HTMLInputElement>) => void
   onFocus?: (FocusEvent<HTMLInputElement>) => void
   onFocusChange?: (boolean) => void
   onInputChange?: (string) => void
   onKeyDown?: (KeyboardEvent) => void
   onKeyUp?: (KeyboardEvent) => void
+  onLoadMore?: () => any
   onOpenChange?: (boolean, MenuTriggerAction) => void
   onSelectionChange?: (Key | null) => void
   selectedKey?: Key | null
   shouldFlip?: boolean = true
   size?: 'S' | 'M' | 'L' | 'XL' = 'M'
   slot?: string | null
   styles?: StylesProp
   validate?: (ComboBoxValidationValue) => ValidationError | boolean | null | undefined
   validationBehavior?: 'native' | 'aria' = 'native'
 }

/@react-spectrum/s2:DropZoneProps

 DropZoneProps {
   UNSAFE_className?: UnsafeClassName
   UNSAFE_style?: CSSProperties
   aria-describedby?: string
   aria-details?: string
   aria-label?: string
   aria-labelledby?: string
   children: ReactNode
   getDropOperation?: (DragTypes, Array<DropOperation>) => DropOperation
   id?: string
   isFilled?: boolean
   onDrop?: (DropEvent) => void
-  onDropActivate?: (DropActivateEvent) => void
   onDropEnter?: (DropEnterEvent) => void
   onDropExit?: (DropExitEvent) => void
   onDropMove?: (DropMoveEvent) => void
   replaceMessage?: string
   slot?: string | null
   styles?: StylesPropWithHeight
 }

/@react-spectrum/s2:PickerProps

 PickerProps <T extends {}> {
   UNSAFE_className?: UnsafeClassName
   UNSAFE_style?: CSSProperties
   align?: 'start' | 'end' = 'start'
   aria-describedby?: string
   aria-details?: string
   aria-label?: string
   aria-labelledby?: string
   autoComplete?: string
   autoFocus?: boolean
   children: ReactNode | ({}) => ReactNode
   contextualHelp?: ReactNode
   defaultOpen?: boolean
   defaultSelectedKey?: Key
   description?: ReactNode
   direction?: 'bottom' | 'top' = 'bottom'
   disabledKeys?: Iterable<Key>
   errorMessage?: ReactNode | (ValidationResult) => ReactNode
   excludeFromTabOrder?: boolean
   id?: string
   isDisabled?: boolean
   isInvalid?: boolean
+  isLoading?: boolean
   isOpen?: boolean
   isRequired?: boolean
   items?: Iterable<T>
   label?: ReactNode
   labelAlign?: Alignment = 'start'
   labelPosition?: LabelPosition = 'top'
   menuWidth?: number
   name?: string
   necessityIndicator?: NecessityIndicator = 'icon'
   onBlur?: (FocusEvent<Target>) => void
   onFocus?: (FocusEvent<Target>) => void
   onFocusChange?: (boolean) => void
   onKeyDown?: (KeyboardEvent) => void
   onKeyUp?: (KeyboardEvent) => void
+  onLoadMore?: () => any
   onOpenChange?: (boolean) => void
   onSelectionChange?: (Key) => void
   placeholder?: string = 'Select an item' (localized)
   selectedKey?: Key | null
   size?: 'S' | 'M' | 'L' | 'XL' = 'M'
   slot?: string | null
   styles?: StylesProp
   validate?: (Key) => ValidationError | boolean | null | undefined
   validationBehavior?: 'native' | 'aria' = 'native'
 }

/@react-spectrum/s2:TreeViewProps

 TreeViewProps {
   UNSAFE_className?: UnsafeClassName
   UNSAFE_style?: CSSProperties
   aria-describedby?: string
   aria-details?: string
   aria-label?: string
   aria-labelledby?: string
   autoFocus?: boolean | FocusStrategy
   children?: ReactNode | (T) => ReactNode
   defaultExpandedKeys?: Iterable<Key>
   defaultSelectedKeys?: 'all' | Iterable<Key>
   dependencies?: ReadonlyArray<any>
   disabledBehavior?: DisabledBehavior = 'all'
   disabledKeys?: Iterable<Key>
   disallowEmptySelection?: boolean
   escapeKeyBehavior?: 'clearSelection' | 'none' = 'clearSelection'
   expandedKeys?: Iterable<Key>
   id?: string
   isDetached?: boolean
   isEmphasized?: boolean
   items?: Iterable<T>
-  keyboardDelegate?: KeyboardDelegate
   onAction?: (Key) => void
   onExpandedChange?: (Set<Key>) => any
   onSelectionChange?: (Selection) => void
   renderEmptyState?: (TreeEmptyStateRenderProps) => ReactNode
   selectionMode?: SelectionMode
   shouldSelectOnPressUp?: boolean
   slot?: string | null
   styles?: StylesPropWithHeight
 }

@react-stately/data

/@react-stately/data:TreeData

 TreeData <T extends {}> {
   append: (Key | null, Array<{}>) => void
   getItem: (Key) => TreeNode<{}> | undefined
   insert: (Key | null, number, Array<{}>) => void
   insertAfter: (Key, Array<{}>) => void
   insertBefore: (Key, Array<{}>) => void
   items: Array<TreeNode<{}>>
   move: (Key, Key | null, number) => void
-  moveAfter: (Key, Iterable<Key>) => void
-  moveBefore: (Key, Iterable<Key>) => void
   prepend: (Key | null, Array<{}>) => void
   remove: (Array<Key>) => void
   removeSelectedItems: () => void
   selectedKeys: Set<Key>
   update: (Key, {}) => void
 }

LFDanLu added 11 commits March 7, 2025 16:36

initial support for async loading in Combobox/picker/listbox in RAC

c4ca76d

test against Listbox standalone and put on content size change issue

8ee20f9

update S2 CardView/RAC GridList for new useLoadMore

c2a1cf9

fix v3 load more stories and tests

765b757

update table to call useLoadMore internally

7708b81

first attempt at refactoring useLoadmore

2da7d04

refactor useLoadMore to get rid of scroll handlers

0bb9f21

Add S2 Picker async support, support horizontal scrolling, fix types …

0049153

…and data-attributes

async support for S2 combobox

76e1a05

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

68033b2

fix lint and add horizontal scrolling story

54fcbaa

hack together async listbox virtualized example

4d3bb6c

LFDanLu added 3 commits March 18, 2025 09:50

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

f6ba68a

add loading spinners to RAC stories

3fe09f6

fix FF load more resizable wrapping container table, make s2 picker l…

0b06824

…oad more like v3

update S2 Picker/Combobox so they are described by loading spinner

da166f2

fix Talkback and NVDA announcements for loading spinner

0ef52ef

LFDanLu added the in sprint label Mar 19, 2025

LFDanLu changed the title ~~feat: (WIP) Async loading support for S2 ComboBox and Picker~~ feat: (WIP) Async loading support for S2 ComboBox/Picker and multilevel Tree loading Apr 8, 2025

LFDanLu added 2 commits April 9, 2025 13:59

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

51580d7

clean up some todos

76dc08a

LFDanLu force-pushed the loadmore_rac branch from f9aea93 to 76dc08a Compare April 9, 2025 21:08

LFDanLu changed the title ~~feat: (WIP) Async loading support for S2 ComboBox/Picker and multilevel Tree loading~~ feat: Async loading support for S2 ComboBox/Picker Apr 9, 2025

LFDanLu marked this pull request as ready for review April 9, 2025 21:12

LFDanLu commented Apr 10, 2025

View reviewed changes

LFDanLu added 7 commits April 14, 2025 11:35

add useLoadMoreSentinel instead of changing useLoadMore

41a28cb

revert v3 components to still use old useLoadMore

refactor useLoadMore and update RAC components load more

4fb8aeb

render a sentinel in the loading indicator always and call useLoadMoreSentinel from there instead. This allows the user to theoretically render as many sentinels as they want with each having its own loading state/logic

fix s2 combobox and picker

4c5bc69

update S2 CardView and TableView for new loading sentinel refactor

1eeb798

properly persist table loading spinner in virtualized case

6a98ac5

fix listbox and gridlist persisted sentinel and fix double spinners

6fb2c01

stray console log

97b21a2

LFDanLu added 4 commits April 18, 2025 10:18

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

e1bd8f3

fix react 19 tests

d4bec98

persist sentinel in card layouts

561d914

forgot to fix waterfall empty state

dc6e80a

LFDanLu added 2 commits April 21, 2025 17:16

get rid of extranous space when listbox/table loaded all of the avail…

2085f8c

…able items

fix empty state for S2 ComboBox and make sure S2 Picker doesnt open w…

a9b7ea6

…hen empty

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat: Async loading support for S2 ComboBox/Picker #7938

feat: Async loading support for S2 ComboBox/Picker #7938

LFDanLu commented Mar 14, 2025 •

edited

Loading

rspbot commented Mar 15, 2025

rspbot commented Mar 17, 2025

rspbot commented Mar 18, 2025

rspbot commented Mar 19, 2025

rspbot commented Apr 9, 2025

LFDanLu Apr 10, 2025

LFDanLu Apr 10, 2025

LFDanLu Apr 10, 2025

LFDanLu Apr 10, 2025 •

edited

Loading

rspbot commented Apr 18, 2025

rspbot commented Apr 19, 2025

rspbot commented Apr 22, 2025

rspbot commented Apr 22, 2025

		// TODO: Think about if completely empty state. Do we leave it up to the user to setup the two states for empty and empty + loading?
		// Do we add a data attibute/prop/renderprop to ListBox for isLoading

feat: Async loading support for S2 ComboBox/Picker #7938

Are you sure you want to change the base?

feat: Async loading support for S2 ComboBox/Picker #7938

Conversation

LFDanLu commented Mar 14, 2025 • edited Loading

✅ Pull Request Checklist:

📝 Test Instructions:

🧢 Your Project:

rspbot commented Mar 15, 2025

rspbot commented Mar 17, 2025

rspbot commented Mar 18, 2025

rspbot commented Mar 19, 2025

rspbot commented Apr 9, 2025

LFDanLu Apr 10, 2025

Choose a reason for hiding this comment

LFDanLu Apr 10, 2025

Choose a reason for hiding this comment

LFDanLu Apr 10, 2025

Choose a reason for hiding this comment

LFDanLu Apr 10, 2025 • edited Loading

Choose a reason for hiding this comment

rspbot commented Apr 18, 2025

rspbot commented Apr 19, 2025

rspbot commented Apr 22, 2025

rspbot commented Apr 22, 2025

react-aria-components

/react-aria-components:DropZone

/react-aria-components:UNSTABLE_TableLoadingIndicator

/react-aria-components:Tree

/react-aria-components:DropZoneProps

/react-aria-components:TreeProps

/react-aria-components:UNSTABLE_GridListLoadingSentinel

/react-aria-components:UNSTABLE_ListBoxLoadingSentinel

/react-aria-components:UNSTABLE_TableLoadingSentinel

/react-aria-components:ListBoxLoadingSentinelProps

@react-aria/dnd

/@react-aria/dnd:DroppableCollectionOptions

/@react-aria/dnd:DropOptions

@react-aria/utils

/@react-aria/utils:useLoadMoreSentinel

/@react-aria/utils:LoadMoreSentinelProps

@react-spectrum/dropzone

/@react-spectrum/dropzone:DropZone

/@react-spectrum/dropzone:SpectrumDropZoneProps

@react-spectrum/s2

/@react-spectrum/s2:ComboBox

/@react-spectrum/s2:DropZone

/@react-spectrum/s2:Picker

/@react-spectrum/s2:TreeView

/@react-spectrum/s2:ComboBoxProps

/@react-spectrum/s2:DropZoneProps

/@react-spectrum/s2:PickerProps

/@react-spectrum/s2:TreeViewProps

@react-stately/data

/@react-stately/data:TreeData

LFDanLu commented Mar 14, 2025 •

edited

Loading

LFDanLu Apr 10, 2025 •

edited

Loading