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

…able items

…hen empty

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

Build successful! 🎉

…ct-spectrum into loadmore_rac

…ed components works for the most part but is problematic if you dont want the loadingRow to appear with performing initial load (aka loadingState = loading). Due to how useLoadMoreSentinel work, we need to reobserve the list when we go from loading to loadingMore, but is isLoading is true the layout willpreserve room for the loading row...

… load also fixes RAC examples by properly applying a height to the tablebody if performing initial load

rspbot · 2025-04-24T00:02:12Z

Build successful! 🎉

LFDanLu · 2025-04-24T17:31:40Z

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

+  paddingStart: 'edge-to-text'
+});
+
+export let listbox = style<{size: 'S' | 'M' | 'L' | 'XL'}>({


Here to LOADER_ROW_HEIGHTS is from https://github.com/adobe/react-spectrum/pull/8110/files

LFDanLu · 2025-04-24T17:38:18Z

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

+}
+
+// TODO: not quite sure why typescript is complaining when I types this as T extends object
+const ComboboxInner = forwardRef(function ComboboxInner(props: ComboBoxProps<any> & {isOpen: boolean}, ref: ForwardedRef<TextFieldRef | null>) {


Mainly a reorg of code + adding loader logic/spinner rendering, for the most part most of this is the same as before

was only needed when rendering the loader after the virutalizer div

rspbot · 2025-04-24T18:34:32Z

Build successful! 🎉

LFDanLu · 2025-04-24T20:00:15Z

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

+   * @default 1
+   */
+  scrollOffset?: number
+  // TODO: Maybe include a scrollRef option so the user can provide the scrollParent to compare against instead of having us look it up


leaning towards not adding it for now, the hook is unstable as of now so we could always add it later. Open to opinions if anyone feels strongly about the approach

LFDanLu · 2025-04-24T20:02:45Z

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

+      // TODO: problem with S2's Table loading spinner. Now that we use the isLoading provided to the sentinel in the layout to adjust the height of the loader,
+      // we are getting space reserved for the loadMore spinner when doing initial loading and rendering empty state at the same time. We can somewhat fix this by providing isLoading={loadingState === 'loadingMore'}
+      // which will mean the layout won't reserve space for the loader for initial loads, but that breaks the load more behavior (specifically, auto load more to fill scrollOffset. Scroll to load more seems broken to after initial load).
+      // We need to tear down and set up a new IntersectionObserver to force a check if the sentinel is "in view", see  https://codesandbox.io/p/sandbox/magical-swanson-dhgp89?file=%2Fsrc%2FApp.js%3A21%2C21
+      // I've actually fixed this via a ListLayout change (TableLayout extends this) where I check "collection?.size === 0 || (collection.size === 1 && collection.getItem(collection.getFirstKey()!)!.type === 'loader')"
+      // as well as isLoading, but it feels pretty opinionated/implementation specifc


A bit unfortunate that fixing this involved layout level changes. Also a bit unfortunate that we can't just create single instance of a IntersectionObserver upfront, but we need to do this setup/teardown every time isLoading changes so that we can properly trigger the loadMore if the sentinel remains within the rootMargin after the items are loaded.

LFDanLu · 2025-04-24T20:02:57Z

packages/@react-spectrum/s2/intl/ar-AE.json

@@ -6,6 +6,7 @@
  "actionbar.selectedAll": "تم تحديد الكل",
  "breadcrumbs.more": "المزيد من العناصر",
  "button.pending": "قيد الانتظار",
+  "combobox.noResults": "لا توجد نتائج",


LFDanLu · 2025-04-24T23:20:06Z

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

+      // TODO: we only want the listbox loading sentinel row to have a height when performing a loadingMore
+      // Unlike table, this works because the listbox's initial load isn't triggerd by the sentintel and thus the first
+      // observation occurs when we've already loaded our first set of items rather than starting from empty, therefor flipping
+      // isLoading here from true to false and triggering the creation of a new InterserctionObserver
+      isLoading={loadingState === 'loadingMore'}


An interesting facet about how useLoadMoreSentinel works. Prior to some additional changes in layout, virtualized TableView ran into issues triggering additional loadMore calls when it was passing isLoading={loadingState === 'loadingMore'} to its own sentinel. This is because the sentinel never got a prop change before and after the initial load finished because the loadingState at that point was loading and thus we never caused a second shouldLoadMore check to happen in useLoadMoreSentinel

LFDanLu · 2025-04-24T23:22:45Z

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

+                // TODO: can we get rid of this and instead handle padding else where other than the layout options? Kinda gross that we need to do this check.
+                // Perhaps can consider only applying padding if the collection actually has content since the renderEmptyState content is outside the virtualizer
+                // Otherwise could consider moving renderEmptyState into the collection...
+                padding: isEmptyOrLoading ? 0 : 8,


we actually don't want any extra padding (or have the virtualizer div render anything really) so that the "No results"/isLoading spinner dictate the height of the the popover. This check is a bit gross but not really sure there is a good way to do this otherwise.

LFDanLu · 2025-04-24T23:27:19Z

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

+    // TODO: we may want to adjust RAC layouts to do something simlar? Current users of RAC table will probably run into something similar
+    let isEmptyOrLoading = children?.length === 0 || (children?.length === 1 && children[0].layoutInfo.type === 'loader');
+    if (isEmptyOrLoading) {
      layoutInfo.rect.width = this.virtualizer!.visibleRect.width - 80;
    }


One of the several places that I had to change from our prior assumption of "empty = collection doesn't have children". Quite specific to a virtualized table but might be useful to document or include by default?

LFDanLu · 2025-04-24T23:30:57Z

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

+  // TODO: still is offset strangely if loadingMore when there aren't any items in the table, see http://localhost:6006/?path=/story/tableview--empty-state&args=loadingState:loadingMore
+  // This is because we don't distinguish between loadingMore and loading in the layout, resulting in a different rect being used to build the body. Perhaps can be considered as a user error
+  // if they pass loadingMore without having any other items in the table. Alternatively, could update the layout so it knows the current loading state.


Specifically, this is a case where you have a empty table and pass isLoadingMore as your loading state. The loadingMore spinner row won't be built by the layout since the layout thinks you are performing initial load so in the story linked the body is actually just blank. IMO user error but otherwise we need more information in the layout to differentiate the two cases

LFDanLu · 2025-04-24T23:35:00Z

packages/@react-stately/layout/src/ListLayout.ts

+    // TODO: Kinda gross but we also have to differentiate between isLoading and isLoadingMore so that we dont'reserve room
+    // for the loadMore loader row when we are performing initial load. Is this too opinionated? Note that users creating their own layouts
+    // may need to perform similar logic
+    rect.height = node.props.isLoading && !isEmptyOrLoading ? this.loaderHeight ?? this.rowHeight ?? this.estimatedRowHeight ?? DEFAULT_HEIGHT : 0;


As mentioned previously, we don't want to render the loadingMore progress spinner row when performing initial load otherwise we get two spinners and/or extra room rendered above the isLoading spinner

LFDanLu · 2025-04-24T23:36:01Z

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

+  // TODO: What do we think about this check? Ideally we could just query the collection and see if ALL node are loaders and thus have it return that it is empty
+  let isEmpty = state.collection.size === 0 || (state.collection.size === 1 && state.collection.getItem(state.collection.getFirstKey()!)?.type === 'loader');


Will need to update this logic (and other areas where I've made the assumption that the loader is the last element in the collection) when we move to supporting tree multi section loading

rspbot · 2025-04-25T23:36:13Z

Build successful! 🎉

for cases like Listbox in Combobox, the content area is actually 0 since we dont have a height on the listbox nor does it reserve room like table layout

…ly called once per load due to the number of items returned by the star wars api and the height of the rows, making the gridlist too tall causes the loadmore to be called multiple times in order to fill enough content for a single page

rspbot · 2025-04-25T23:59:02Z

Build successful! 🎉

rspbot · 2025-04-25T23:59:03Z

## API Changes

react-aria-components

/react-aria-components:Select

 Select <T extends {} = {
   
 }> {
   aria-describedby?: string
   aria-details?: string
   aria-label?: string
   aria-labelledby?: string
   autoComplete?: string
   autoFocus?: boolean
   children?: ReactNode | ((SelectRenderProps & {
     defaultChildren: ReactNode | undefined
 })) => ReactNode
   className?: string | ((SelectRenderProps & {
     defaultClassName: string | undefined
 })) => string
   defaultOpen?: boolean
   defaultSelectedKey?: Key
   disabledKeys?: Iterable<Key>
   excludeFromTabOrder?: boolean
   id?: string
   isDisabled?: boolean
   isInvalid?: boolean
   isOpen?: boolean
   isRequired?: boolean
   name?: string
   onBlur?: (FocusEvent<Target>) => void
   onFocus?: (FocusEvent<Target>) => void
   onFocusChange?: (boolean) => void
   onKeyDown?: (KeyboardEvent) => void
   onKeyUp?: (KeyboardEvent) => void
   onOpenChange?: (boolean) => void
-  onSelectionChange?: (Key | null) => void
+  onSelectionChange?: (Key) => void
   placeholder?: string = 'Select an item' (localized)
   selectedKey?: Key | null
   slot?: string | null
   style?: CSSProperties | ((SelectRenderProps & {
 })) => CSSProperties | undefined
   validate?: (Key) => ValidationError | boolean | null | undefined
   validationBehavior?: 'native' | 'aria' = 'native'
 }

/react-aria-components:UNSTABLE_TableLoadingIndicator

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

/react-aria-components:SelectProps

 SelectProps <T extends {} = {
   
 }> {
   aria-describedby?: string
   aria-details?: string
   aria-label?: string
   aria-labelledby?: string
   autoComplete?: string
   autoFocus?: boolean
   children?: ReactNode | ((SelectRenderProps & {
     defaultChildren: ReactNode | undefined
 })) => ReactNode
   className?: string | ((SelectRenderProps & {
     defaultClassName: string | undefined
 })) => string
   defaultOpen?: boolean
   defaultSelectedKey?: Key
   disabledKeys?: Iterable<Key>
   excludeFromTabOrder?: boolean
   id?: string
   isDisabled?: boolean
   isInvalid?: boolean
   isOpen?: boolean
   isRequired?: boolean
   name?: string
   onBlur?: (FocusEvent<Target>) => void
   onFocus?: (FocusEvent<Target>) => void
   onFocusChange?: (boolean) => void
   onKeyDown?: (KeyboardEvent) => void
   onKeyUp?: (KeyboardEvent) => void
   onOpenChange?: (boolean) => void
-  onSelectionChange?: (Key | null) => void
+  onSelectionChange?: (Key) => void
   placeholder?: string = 'Select an item' (localized)
   selectedKey?: Key | null
   slot?: string | null
   style?: CSSProperties | ((SelectRenderProps & {
 })) => CSSProperties | undefined
   validate?: (Key) => ValidationError | boolean | null | undefined
   validationBehavior?: 'native' | 'aria' = 'native'
 }

/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/select

/@react-aria/select:AriaSelectOptions

 AriaSelectOptions <T> {
   aria-describedby?: string
   aria-details?: string
   aria-label?: string
   aria-labelledby?: string
   autoComplete?: string
   autoFocus?: boolean
   defaultOpen?: boolean
   defaultSelectedKey?: Key
   description?: ReactNode
   disabledKeys?: Iterable<Key>
   errorMessage?: ReactNode | (ValidationResult) => ReactNode
   excludeFromTabOrder?: boolean
   id?: string
   isDisabled?: boolean
   isInvalid?: boolean
   isOpen?: boolean
   isRequired?: boolean
   items?: Iterable<T>
   keyboardDelegate?: KeyboardDelegate
   label?: ReactNode
   name?: string
   onBlur?: (FocusEvent<Target>) => void
   onFocus?: (FocusEvent<Target>) => void
   onFocusChange?: (boolean) => void
   onKeyDown?: (KeyboardEvent) => void
   onKeyUp?: (KeyboardEvent) => void
   onOpenChange?: (boolean) => void
-  onSelectionChange?: (Key | null) => void
+  onSelectionChange?: (Key) => void
   placeholder?: string
   selectedKey?: Key | null
   validate?: (Key) => ValidationError | boolean | null | undefined
   validationBehavior?: 'aria' | 'native' = 'aria'

/@react-aria/select:AriaSelectProps

 AriaSelectProps <T> {
   aria-describedby?: string
   aria-details?: string
   aria-label?: string
   aria-labelledby?: string
   autoComplete?: string
   autoFocus?: boolean
   children: CollectionChildren<T>
   defaultOpen?: boolean
   defaultSelectedKey?: Key
   description?: ReactNode
   disabledKeys?: Iterable<Key>
   errorMessage?: ReactNode | (ValidationResult) => ReactNode
   excludeFromTabOrder?: boolean
   id?: string
   isDisabled?: boolean
   isInvalid?: boolean
   isOpen?: boolean
   isRequired?: boolean
   items?: Iterable<T>
   label?: ReactNode
   name?: string
   onBlur?: (FocusEvent<Target>) => void
   onFocus?: (FocusEvent<Target>) => void
   onFocusChange?: (boolean) => void
   onKeyDown?: (KeyboardEvent) => void
   onKeyUp?: (KeyboardEvent) => void
   onOpenChange?: (boolean) => void
-  onSelectionChange?: (Key | null) => void
+  onSelectionChange?: (Key) => void
   placeholder?: string
   selectedKey?: Key | null
   validate?: (Key) => ValidationError | boolean | null | undefined
   validationBehavior?: 'aria' | 'native' = 'aria'

@react-aria/steplist

/@react-aria/steplist:AriaStepListProps

 AriaStepListProps <T> {
   aria-describedby?: string
   aria-details?: string
   aria-label?: string
   aria-labelledby?: string
   children: CollectionChildren<T>
   defaultLastCompletedStep?: Key
   defaultSelectedKey?: Key
   disabledKeys?: Iterable<Key>
   disallowEmptySelection?: boolean
   id?: string
   isDisabled?: boolean
   isReadOnly?: boolean
   items?: Iterable<T>
   lastCompletedStep?: Key
   onLastCompletedStepChange?: (Key | null) => void
-  onSelectionChange?: (Key | null) => void
+  onSelectionChange?: (Key) => void
   selectedKey?: Key | null
 }

@react-aria/utils

/@react-aria/utils:UNSTABLE_useLoadMoreSentinel

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

/@react-aria/utils:LoadMoreSentinelProps

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

@react-spectrum/picker

/@react-spectrum/picker:Picker

 Picker <T extends {}> {
   UNSAFE_className?: string
   UNSAFE_style?: CSSProperties
   align?: Alignment = 'start'
   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
   autoComplete?: string
   autoFocus?: boolean
   bottom?: Responsive<DimensionValue>
   children: CollectionChildren<{}>
   contextualHelp?: ReactNode
   defaultOpen?: boolean
   defaultSelectedKey?: Key
   description?: ReactNode
   direction?: 'bottom' | 'top' = 'bottom'
   disabledKeys?: Iterable<Key>
   end?: Responsive<DimensionValue>
   errorMessage?: ReactNode | (ValidationResult) => ReactNode
   excludeFromTabOrder?: boolean
   flex?: Responsive<string | number | boolean>
   flexBasis?: Responsive<number | string>
   flexGrow?: Responsive<number>
   flexShrink?: Responsive<number>
   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
   isDisabled?: boolean
   isHidden?: Responsive<boolean>
   isInvalid?: boolean
   isLoading?: boolean
   isOpen?: boolean
   isQuiet?: boolean
   isRequired?: boolean
   items?: Iterable<{}>
   justifySelf?: Responsive<'auto' | 'normal' | 'start' | 'end' | 'flex-start' | 'flex-end' | 'self-start' | 'self-end' | 'center' | 'left' | 'right' | 'stretch'>
   label?: ReactNode
   labelAlign?: Alignment = 'start'
   labelPosition?: LabelPosition = 'top'
   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>
   menuWidth?: DimensionValue
   minHeight?: Responsive<DimensionValue>
   minWidth?: Responsive<DimensionValue>
   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 | null) => void
+  onSelectionChange?: (Key) => void
   order?: Responsive<number>
   placeholder?: string
   position?: Responsive<'static' | 'relative' | 'absolute' | 'fixed' | 'sticky'>
   right?: Responsive<DimensionValue>
   shouldFlip?: boolean = true
   start?: Responsive<DimensionValue>
   top?: Responsive<DimensionValue>
   validate?: (Key) => ValidationError | boolean | null | undefined
   validationBehavior?: 'aria' | 'native' = 'aria'
   width?: Responsive<DimensionValue>
   zIndex?: Responsive<number>
 }

/@react-spectrum/picker:SpectrumPickerProps

 SpectrumPickerProps <T> {
   UNSAFE_className?: string
   UNSAFE_style?: CSSProperties
   align?: Alignment = 'start'
   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
   autoComplete?: string
   autoFocus?: boolean
   bottom?: Responsive<DimensionValue>
   children: CollectionChildren<T>
   contextualHelp?: ReactNode
   defaultOpen?: boolean
   defaultSelectedKey?: Key
   description?: ReactNode
   direction?: 'bottom' | 'top' = 'bottom'
   disabledKeys?: Iterable<Key>
   end?: Responsive<DimensionValue>
   errorMessage?: ReactNode | (ValidationResult) => ReactNode
   excludeFromTabOrder?: boolean
   flex?: Responsive<string | number | boolean>
   flexBasis?: Responsive<number | string>
   flexGrow?: Responsive<number>
   flexShrink?: Responsive<number>
   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
   isDisabled?: boolean
   isHidden?: Responsive<boolean>
   isInvalid?: boolean
   isLoading?: boolean
   isOpen?: boolean
   isQuiet?: boolean
   isRequired?: boolean
   items?: Iterable<T>
   justifySelf?: Responsive<'auto' | 'normal' | 'start' | 'end' | 'flex-start' | 'flex-end' | 'self-start' | 'self-end' | 'center' | 'left' | 'right' | 'stretch'>
   label?: ReactNode
   labelAlign?: Alignment = 'start'
   labelPosition?: LabelPosition = 'top'
   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>
   menuWidth?: DimensionValue
   minHeight?: Responsive<DimensionValue>
   minWidth?: Responsive<DimensionValue>
   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 | null) => void
+  onSelectionChange?: (Key) => void
   order?: Responsive<number>
   placeholder?: string
   position?: Responsive<'static' | 'relative' | 'absolute' | 'fixed' | 'sticky'>
   right?: Responsive<DimensionValue>
   shouldFlip?: boolean = true
   start?: Responsive<DimensionValue>
   top?: Responsive<DimensionValue>
   validate?: (Key) => ValidationError | boolean | null | undefined
   validationBehavior?: 'aria' | 'native' = 'aria'
   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: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 | null) => void
+  onSelectionChange?: (Key) => void
   placeholder?: string = 'Select an item' (localized)
   selectedKey?: Key | null
   shouldFlip?: boolean = true
   size?: 'S' | 'M' | 'L' | 'XL' = 'M'
   styles?: StylesProp
   validate?: (Key) => ValidationError | boolean | null | undefined
   validationBehavior?: 'native' | 'aria' = 'native'
 }

/@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: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 | null) => void
+  onSelectionChange?: (Key) => void
   placeholder?: string = 'Select an item' (localized)
   selectedKey?: Key | null
   shouldFlip?: boolean = true
   size?: 'S' | 'M' | 'L' | 'XL' = 'M'
   styles?: StylesProp
   validate?: (Key) => ValidationError | boolean | null | undefined
   validationBehavior?: 'native' | 'aria' = 'native'
 }

@react-spectrum/steplist

/@react-spectrum/steplist:StepList

 StepList <T extends {}> {
   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: CollectionChildren<{}>
   defaultLastCompletedStep?: Key
   defaultSelectedKey?: Key
   disabledKeys?: Iterable<Key>
   disallowEmptySelection?: boolean
   end?: Responsive<DimensionValue>
   flex?: Responsive<string | number | boolean>
   flexBasis?: Responsive<number | string>
   flexGrow?: Responsive<number>
   flexShrink?: Responsive<number>
   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
   isDisabled?: boolean
   isEmphasized?: boolean = false
   isHidden?: Responsive<boolean>
   isReadOnly?: boolean
   items?: Iterable<{}>
   justifySelf?: Responsive<'auto' | 'normal' | 'start' | 'end' | 'flex-start' | 'flex-end' | 'self-start' | 'self-end' | 'center' | 'left' | 'right' | 'stretch'>
   lastCompletedStep?: Key
   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>
   onLastCompletedStepChange?: (Key | null) => void
-  onSelectionChange?: (Key | null) => void
+  onSelectionChange?: (Key) => void
   order?: Responsive<number>
   orientation?: Orientation = 'horizontal'
   position?: Responsive<'static' | 'relative' | 'absolute' | 'fixed' | 'sticky'>
   right?: Responsive<DimensionValue>
   size?: 'S' | 'M' | 'L' | 'XL' = 'M'
   start?: Responsive<DimensionValue>
   top?: Responsive<DimensionValue>
   width?: Responsive<DimensionValue>
   zIndex?: Responsive<number>
 }

/@react-spectrum/steplist:SpectrumStepListProps

 SpectrumStepListProps <T> {
   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: CollectionChildren<T>
   defaultLastCompletedStep?: Key
   defaultSelectedKey?: Key
   disabledKeys?: Iterable<Key>
   disallowEmptySelection?: boolean
   end?: Responsive<DimensionValue>
   flex?: Responsive<string | number | boolean>
   flexBasis?: Responsive<number | string>
   flexGrow?: Responsive<number>
   flexShrink?: Responsive<number>
   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
   isDisabled?: boolean
   isEmphasized?: boolean = false
   isHidden?: Responsive<boolean>
   isReadOnly?: boolean
   items?: Iterable<T>
   justifySelf?: Responsive<'auto' | 'normal' | 'start' | 'end' | 'flex-start' | 'flex-end' | 'self-start' | 'self-end' | 'center' | 'left' | 'right' | 'stretch'>
   lastCompletedStep?: Key
   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>
   onLastCompletedStepChange?: (Key | null) => void
-  onSelectionChange?: (Key | null) => void
+  onSelectionChange?: (Key) => void
   order?: Responsive<number>
   orientation?: Orientation = 'horizontal'
   position?: Responsive<'static' | 'relative' | 'absolute' | 'fixed' | 'sticky'>
   right?: Responsive<DimensionValue>
   size?: 'S' | 'M' | 'L' | 'XL' = 'M'
   start?: Responsive<DimensionValue>
   top?: Responsive<DimensionValue>
   width?: Responsive<DimensionValue>
   zIndex?: Responsive<number>
 }

@react-stately/list

/@react-stately/list:SingleSelectListProps

 SingleSelectListProps <T> {
   collection?: Collection<Node<T>>
   defaultSelectedKey?: Key
   filter?: (Iterable<Node<T>>) => Iterable<Node<T>>
-  onSelectionChange?: (Key | null) => void
+  onSelectionChange?: (Key) => void
   selectedKey?: Key | null
 }

@react-stately/select

/@react-stately/select:SelectProps

 SelectProps <T> {
   autoFocus?: boolean
   children: CollectionChildren<T>
   defaultOpen?: boolean
   defaultSelectedKey?: Key
   description?: ReactNode
   disabledKeys?: Iterable<Key>
   errorMessage?: ReactNode | (ValidationResult) => ReactNode
   isDisabled?: boolean
   isInvalid?: boolean
   isOpen?: boolean
   isRequired?: boolean
   items?: Iterable<T>
   label?: ReactNode
   onBlur?: (FocusEvent<Target>) => void
   onFocus?: (FocusEvent<Target>) => void
   onFocusChange?: (boolean) => void
   onKeyDown?: (KeyboardEvent) => void
   onKeyUp?: (KeyboardEvent) => void
   onOpenChange?: (boolean) => void
-  onSelectionChange?: (Key | null) => void
+  onSelectionChange?: (Key) => void
   placeholder?: string
   selectedKey?: Key | null
   validate?: (Key) => ValidationError | boolean | null | undefined
   validationBehavior?: 'aria' | 'native' = 'aria'

/@react-stately/select:SelectStateOptions

 SelectStateOptions <T> {
   autoFocus?: boolean
   collection?: Collection<Node<T>>
   defaultOpen?: boolean
   defaultSelectedKey?: Key
   description?: ReactNode
   disabledKeys?: Iterable<Key>
   errorMessage?: ReactNode | (ValidationResult) => ReactNode
   isDisabled?: boolean
   isInvalid?: boolean
   isOpen?: boolean
   isRequired?: boolean
   items?: Iterable<T>
   label?: ReactNode
   onBlur?: (FocusEvent<Target>) => void
   onFocus?: (FocusEvent<Target>) => void
   onFocusChange?: (boolean) => void
   onKeyDown?: (KeyboardEvent) => void
   onKeyUp?: (KeyboardEvent) => void
   onOpenChange?: (boolean) => void
-  onSelectionChange?: (Key | null) => void
+  onSelectionChange?: (Key) => void
   placeholder?: string
   selectedKey?: Key | null
   validate?: (Key) => ValidationError | boolean | null | undefined
   validationBehavior?: 'aria' | 'native' = 'aria'

@react-stately/steplist

/@react-stately/steplist:StepListProps

 StepListProps <T> {
   children: CollectionChildren<T>
   defaultLastCompletedStep?: Key
   defaultSelectedKey?: Key
   disabledKeys?: Iterable<Key>
   disallowEmptySelection?: boolean
   isDisabled?: boolean
   isReadOnly?: boolean
   items?: Iterable<T>
   lastCompletedStep?: Key
   onLastCompletedStepChange?: (Key | null) => void
-  onSelectionChange?: (Key | null) => void
+  onSelectionChange?: (Key) => void
   selectedKey?: Key | null
 }

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 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

LFDanLu added 3 commits April 22, 2025 17:17

Merge branch 's2-combobox-picker-virtualizer' of github.com:adobe/rea…

f60cbe3

…ct-spectrum into loadmore_rac

dont reserve room for the isLoadingMore spinner if performing initial…

95beec7

… load also fixes RAC examples by properly applying a height to the tablebody if performing initial load

LFDanLu commented Apr 24, 2025

View reviewed changes

LFDanLu added 4 commits April 24, 2025 11:03

add translations and clean up

fc193c5

get rid of flex: none since loader is part of virtualized collection

cbd91b5

was only needed when rendering the loader after the virutalizer div

fix lint

4a62993

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

f664da0

LFDanLu commented Apr 24, 2025

View reviewed changes

LFDanLu added 2 commits April 25, 2025 13:12

prevent the empty w/ loading sentinel select from opening on arrow down

09825f4

adding chromatic tests for S2 Combobox/Picker async loading

d98691f

LFDanLu added 2 commits April 25, 2025 16:38

making sure sentinel is rendered even when empty

f34fc0c

for cases like Listbox in Combobox, the content area is actually 0 since we dont have a height on the listbox nor does it reserve room like table layout

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

rspbot commented Apr 22, 2025

rspbot commented Apr 24, 2025

LFDanLu Apr 24, 2025

LFDanLu Apr 24, 2025

rspbot commented Apr 24, 2025

LFDanLu Apr 24, 2025

LFDanLu Apr 24, 2025

LFDanLu Apr 24, 2025

LFDanLu Apr 24, 2025

LFDanLu Apr 24, 2025

LFDanLu Apr 24, 2025

LFDanLu Apr 24, 2025

LFDanLu Apr 24, 2025

LFDanLu Apr 24, 2025

rspbot commented Apr 25, 2025

rspbot commented Apr 25, 2025

rspbot commented Apr 25, 2025

		// TODO: What do we think about this check? Ideally we could just query the collection and see if ALL node are loaders and thus have it return that it is empty
		let isEmpty = state.collection.size === 0 \|\| (state.collection.size === 1 && state.collection.getItem(state.collection.getFirstKey()!)?.type === 'loader');

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

Choose a reason for hiding this comment

rspbot commented Apr 22, 2025

rspbot commented Apr 24, 2025

Choose a reason for hiding this comment

Choose a reason for hiding this comment

rspbot commented Apr 24, 2025

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

rspbot commented Apr 25, 2025

rspbot commented Apr 25, 2025

rspbot commented Apr 25, 2025

react-aria-components

/react-aria-components:Select

/react-aria-components:UNSTABLE_TableLoadingIndicator

/react-aria-components:SelectProps

/react-aria-components:UNSTABLE_GridListLoadingSentinel

/react-aria-components:UNSTABLE_ListBoxLoadingSentinel

/react-aria-components:UNSTABLE_TableLoadingSentinel

/react-aria-components:ListBoxLoadingSentinelProps

@react-aria/select

/@react-aria/select:AriaSelectOptions

/@react-aria/select:AriaSelectProps

@react-aria/steplist

/@react-aria/steplist:AriaStepListProps

@react-aria/utils

/@react-aria/utils:UNSTABLE_useLoadMoreSentinel

/@react-aria/utils:LoadMoreSentinelProps

@react-spectrum/picker

/@react-spectrum/picker:Picker

/@react-spectrum/picker:SpectrumPickerProps

@react-spectrum/s2

/@react-spectrum/s2:ComboBox

/@react-spectrum/s2:Picker

/@react-spectrum/s2:ComboBoxProps

/@react-spectrum/s2:PickerProps

@react-spectrum/steplist

/@react-spectrum/steplist:StepList

/@react-spectrum/steplist:SpectrumStepListProps

@react-stately/list

/@react-stately/list:SingleSelectListProps

@react-stately/select

/@react-stately/select:SelectProps

/@react-stately/select:SelectStateOptions

@react-stately/steplist

/@react-stately/steplist:StepListProps

LFDanLu commented Mar 14, 2025 •

edited

Loading