Add S2 Picker async support, support horizontal scrolling, fix types and data-attributes

Author: LFDanLu

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

@@ -73,9 +73,8 @@ export function useLoadMore(props: LoadMoreProps, ref: RefObject<HTMLElement | n
       collectionAwaitingUpdate.current = false;
     }
 
-    sentinelObserver.current = new IntersectionObserver(triggerLoadMore, {root: ref.current, rootMargin: `0px 0px ${100 * scrollOffset}% 0px`});
+    sentinelObserver.current = new IntersectionObserver(triggerLoadMore, {root: ref.current, rootMargin: `0px ${100 * scrollOffset}% ${100 * scrollOffset}% ${100 * scrollOffset}%`});
     if (sentinelRef?.current) {
-      // console.log('observing', sentinelRef.current.outerHTML)
       sentinelObserver.current.observe(sentinelRef.current);
     }
 

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

@@ -18,14 +18,16 @@ import {
   SelectRenderProps as AriaSelectRenderProps,
   Button,
   ButtonRenderProps,
+  Collection,
   ContextValue,
   ListBox,
   ListBoxItem,
   ListBoxItemProps,
   ListBoxProps,
   Provider,
   SectionProps,
-  SelectValue
+  SelectValue,
+  UNSTABLE_ListBoxLoadingIndicator
 } from 'react-aria-components';
 import {baseColor, edgeToText, focusRing, style} from '../style' with {type: 'macro'};
 import {centerBaseline} from './CenterBaseline';
@@ -60,14 +62,14 @@ import {Placement} from 'react-aria';
 import {PopoverBase} from './Popover';
 import {PressResponder} from '@react-aria/interactions';
 import {pressScale} from './pressScale';
+import {ProgressCircle} from './ProgressCircle';
 import {raw} from '../style/style-macro' with {type: 'macro'};
 import React, {createContext, forwardRef, ReactNode, useContext, useRef, useState} from 'react';
 import {useFocusableRef} from '@react-spectrum/utils';
 import {useGlobalListeners} from '@react-aria/utils';
 import {useLocalizedStringFormatter} from '@react-aria/i18n';
 import {useSpectrumContextProps} from './useSpectrumContextProps';
 
-
 export interface PickerStyleProps {
   /**
    * The size of the Picker.
@@ -226,6 +228,29 @@ const iconStyles = style({
   '--iconPrimary': {
     type: 'fill',
     value: 'currentColor'
+  },
+  color: {
+    isLoading: 'disabled'
+  }
+});
+
+const loadingWrapperStyles = style({
+  gridColumnStart: '1',
+  gridColumnEnd: '-1',
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'center',
+  marginY: 8
+});
+
+const progressCircleStyles = style({
+  size: {
+    size: {
+      S: 16,
+      M: 20,
+      L: 22,
+      XL: 26
+    }
   }
 });
 
@@ -259,6 +284,7 @@ export const Picker = /*#__PURE__*/ (forwardRef as forwardRefType)(function Pick
     UNSAFE_style,
     placeholder = stringFormatter.format('picker.placeholder'),
     isQuiet,
+    isLoading,
     ...pickerProps
   } = props;
 
@@ -289,6 +315,38 @@ export const Picker = /*#__PURE__*/ (forwardRef as forwardRefType)(function Pick
     }, {once: true, capture: true});
   };
 
+  // TODO: no designs for the spinner in the listbox that I've seen so will need to double check
+  let renderer;
+  let loadingSpinner = (
+    <UNSTABLE_ListBoxLoadingIndicator
+      className={loadingWrapperStyles}>
+      <ProgressCircle
+        isIndeterminate
+        size="S"
+        styles={progressCircleStyles({size})}
+        // Same loading string as table
+        aria-label={stringFormatter.format('table.loadingMore')} />
+    </UNSTABLE_ListBoxLoadingIndicator>
+  );
+
+  if (typeof children === 'function' && items) {
+    renderer = (
+      <>
+        <Collection items={items}>
+          {children}
+        </Collection>
+        {isLoading && loadingSpinner}
+      </>
+    );
+  } else {
+    renderer = (
+      <>
+        {children}
+        {isLoading && loadingSpinner}
+      </>
+    );
+  }
+
   return (
     <AriaSelect
       {...pickerProps}
@@ -359,11 +417,18 @@ export const Picker = /*#__PURE__*/ (forwardRef as forwardRefType)(function Pick
                       }}
                     </SelectValue>
                     {isInvalid && (
+                      // TODO: in Figma it shows the icon as being disabled when loading, confirm with spectrum
                       <FieldErrorIcon isDisabled={isDisabled} />
                     )}
+                    {isLoading && (
+                      <ProgressCircle
+                        isIndeterminate
+                        size="S"
+                        styles={progressCircleStyles({size})} />
+                    )}
                     <ChevronIcon
                       size={size}
-                      className={iconStyles} />
+                      className={iconStyles({isLoading})} />
                     {isFocusVisible && isQuiet && <span className={quietFocusLine} /> }
                     {isInvalid && !isDisabled && !isQuiet &&
                       // @ts-ignore known limitation detecting functions from the theme
@@ -414,7 +479,7 @@ export const Picker = /*#__PURE__*/ (forwardRef as forwardRefType)(function Pick
                 <ListBox
                   items={items}
                   className={menu({size})}>
-                  {children}
+                  {renderer}
                 </ListBox>
               </Provider>
             </PopoverBase>

packages/@react-spectrum/s2/stories/Picker.stories.tsx

@@ -29,6 +29,7 @@ import DeviceDesktopIcon from '../s2wf-icons/S2_Icon_DeviceDesktop_20_N.svg';
 import DeviceTabletIcon from '../s2wf-icons/S2_Icon_DeviceTablet_20_N.svg';
 import type {Meta, StoryObj} from '@storybook/react';
 import {style} from '../style' with {type: 'macro'};
+import {useAsyncList} from '@react-stately/data';
 
 const meta: Meta<typeof Picker<any>> = {
   component: Picker,
@@ -201,3 +202,43 @@ export const ContextualHelpExample = {
     label: 'Ice cream flavor'
   }
 };
+
+interface Character {
+  name: string,
+  height: number,
+  mass: number,
+  birth_year: number
+}
+
+const AsyncPicker = (args: any) => {
+  let list = useAsyncList<Character>({
+    async load({signal, cursor}) {
+      if (cursor) {
+        cursor = cursor.replace(/^http:\/\//i, 'https://');
+      }
+
+      // Slow down load so progress circle can appear
+      await new Promise(resolve => setTimeout(resolve, 2000));
+      let res = await fetch(cursor || 'https://swapi.py4e.com/api/people/?search=', {signal});
+      let json = await res.json();
+      return {
+        items: json.results,
+        cursor: json.next
+      };
+    }
+  });
+
+  return (
+    <Picker {...args} isLoading={list.isLoading} onLoadMore={list.loadMore} items={list.items}>
+      {(item: Character) => <PickerItem id={item.name} textValue={item.name}>{item.name}</PickerItem>}
+    </Picker>
+  );
+};
+
+export const AsyncPickerStory  = {
+  render: AsyncPicker,
+  args: {
+    ...Example.args
+  },
+  name: 'Async loading picker'
+};

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

@@ -10,14 +10,14 @@
  * governing permissions and limitations under the License.
  */
 import {AriaComboBoxProps, useComboBox, useFilter} from 'react-aria';
+import {AsyncLoadable, forwardRefType, RefObject} from '@react-types/shared';
 import {ButtonContext} from './Button';
 import {Collection, ComboBoxState, Node, useComboBoxState} from 'react-stately';
 import {CollectionBuilder} from '@react-aria/collections';
 import {ContextValue, Provider, RACValidation, removeDataAttributes, RenderProps, SlotProps, useContextProps, useRenderProps, useSlot, useSlottedContext} from './utils';
 import {FieldErrorContext} from './FieldError';
 import {filterDOMProps, useResizeObserver} from '@react-aria/utils';
 import {FormContext} from './Form';
-import {forwardRefType, RefObject} from '@react-types/shared';
 import {GroupContext} from './Group';
 import {InputContext} from './Input';
 import {LabelContext} from './Label';
@@ -51,13 +51,13 @@ export interface ComboBoxRenderProps {
   // TODO: do we want loadingState for RAC Combobox or just S2
   // TODO: move types somewhere common later
   /**
-   * Whether the combobox is loading items.
+   * Whether the combobox is currently loading items.
    * @selector [data-loading]
    */
   isLoading?: boolean
 }
 
-export interface ComboBoxProps<T extends object> extends Omit<AriaComboBoxProps<T>, 'children' | 'placeholder' | 'label' | 'description' | 'errorMessage' | 'validationState' | 'validationBehavior'>, RACValidation, RenderProps<ComboBoxRenderProps>, SlotProps {
+export interface ComboBoxProps<T extends object> extends Omit<AriaComboBoxProps<T>, 'children' | 'placeholder' | 'label' | 'description' | 'errorMessage' | 'validationState' | 'validationBehavior'>, RACValidation, RenderProps<ComboBoxRenderProps>, SlotProps, AsyncLoadable {
   /** The filter function used to determine if a option should be included in the combo box list. */
   defaultFilter?: (textValue: string, inputValue: string) => boolean,
   /**
@@ -67,11 +67,7 @@ export interface ComboBoxProps<T extends object> extends Omit<AriaComboBoxProps<
    */
   formValue?: 'text' | 'key',
   /** Whether the combo box allows the menu to be open when the collection is empty. */
-  allowsEmptyCollection?: boolean,
-  /** Whether the combobox is loading items. */
-  isLoading?: boolean,
-  /** Handler that is called when more items should be loaded, e.g. while scrolling near the bottom. */
-  onLoadMore?: () => void
+  allowsEmptyCollection?: boolean
 }
 
 export const ComboBoxContext = createContext<ContextValue<ComboBoxProps<any>, HTMLDivElement>>(null);

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

@@ -10,16 +10,16 @@
  * governing permissions and limitations under the License.
  */
 import {AriaGridListProps, DraggableItemResult, DragPreviewRenderer, DropIndicatorAria, DroppableCollectionResult, FocusScope, ListKeyboardDelegate, mergeProps, useCollator, useFocusRing, useGridList, useGridListItem, useGridListSelectionCheckbox, useHover, useLocale, useVisuallyHidden} from 'react-aria';
+import {AsyncLoadable, forwardRefType, HoverEvents, Key, LinkDOMProps, RefObject} from '@react-types/shared';
 import {ButtonContext} from './Button';
 import {CheckboxContext} from './RSPContexts';
 import {Collection, CollectionBuilder, createLeafComponent} from '@react-aria/collections';
 import {CollectionProps, CollectionRendererContext, DefaultCollectionRenderer, ItemRenderProps} from './Collection';
-import {ContextValue, DEFAULT_SLOT, Provider, RenderProps, ScrollableProps, SlotProps, StyleRenderProps, useContextProps, useRenderProps} from './utils';
+import {ContextValue, DEFAULT_SLOT, Provider, RenderProps, ScrollableProps, SlotProps, StyleProps, StyleRenderProps, useContextProps, useRenderProps} from './utils';
 import {DragAndDropContext, DropIndicatorContext, DropIndicatorProps, useDndPersistedKeys, useRenderDropIndicator} from './DragAndDrop';
 import {DragAndDropHooks} from './useDragAndDrop';
 import {DraggableCollectionState, DroppableCollectionState, Collection as ICollection, ListState, Node, SelectionBehavior, useListState} from 'react-stately';
 import {filterDOMProps, inertValue, useLoadMore, useObjectRef} from '@react-aria/utils';
-import {forwardRefType, HoverEvents, Key, LinkDOMProps, RefObject, StyleProps} from '@react-types/shared';
 import {ListStateContext} from './ListBox';
 import React, {createContext, ForwardedRef, forwardRef, HTMLAttributes, JSX, ReactNode, useContext, useEffect, useMemo, useRef} from 'react';
 import {TextContext} from './Text';
@@ -53,10 +53,15 @@ export interface GridListRenderProps {
   /**
    * State of the grid list.
    */
-  state: ListState<unknown>
+  state: ListState<unknown>,
+  /**
+   * Whether the grid list is currently loading items.
+   * @selector [data-loading]
+   */
+  isLoading?: boolean
 }
 
-export interface GridListProps<T> extends Omit<AriaGridListProps<T>, 'children'>, CollectionProps<T>, StyleRenderProps<GridListRenderProps>, SlotProps, ScrollableProps<HTMLDivElement> {
+export interface GridListProps<T> extends Omit<AriaGridListProps<T>, 'children'>, CollectionProps<T>, StyleRenderProps<GridListRenderProps>, SlotProps, ScrollableProps<HTMLDivElement>, AsyncLoadable {
   /**
    * Whether typeahead navigation is disabled.
    * @default false
@@ -72,11 +77,7 @@ export interface GridListProps<T> extends Omit<AriaGridListProps<T>, 'children'>
    * Whether the items are arranged in a stack or grid.
    * @default 'stack'
    */
-  layout?: 'stack' | 'grid',
-  // TODO: move types somewhere common later
-  // Discuss if we want the RAC components to call the useLoadMore directly (think they have to if we wanna support using <Collection> as child)
-  isLoading?: boolean,
-  onLoadMore?: () => void
+  layout?: 'stack' | 'grid'
 }
 
 
@@ -200,7 +201,8 @@ function GridListInner<T extends object>({props, collection, gridListRef: ref}:
     isFocused,
     isFocusVisible,
     layout,
-    state
+    state,
+    isLoading: isLoading || false
   };
   let renderProps = useRenderProps({
     className: props.className,
@@ -243,7 +245,8 @@ function GridListInner<T extends object>({props, collection, gridListRef: ref}:
         data-empty={state.collection.size === 0 || undefined}
         data-focused={isFocused || undefined}
         data-focus-visible={isFocusVisible || undefined}
-        data-layout={layout}>
+        data-layout={layout}
+        data-loading={isLoading || undefined}>
         <Provider
           values={[
             [ListStateContext, state],

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

@@ -11,14 +11,14 @@
  */
 
 import {AriaListBoxOptions, AriaListBoxProps, DraggableItemResult, DragPreviewRenderer, DroppableCollectionResult, DroppableItemResult, FocusScope, ListKeyboardDelegate, mergeProps, useCollator, useFocusRing, useHover, useListBox, useListBoxSection, useLocale, useOption} from 'react-aria';
+import {AsyncLoadable, forwardRefType, HoverEvents, Key, LinkDOMProps, RefObject} from '@react-types/shared';
 import {Collection, CollectionBuilder, createBranchComponent, createLeafComponent} from '@react-aria/collections';
 import {CollectionProps, CollectionRendererContext, ItemRenderProps, SectionContext, SectionProps} from './Collection';
-import {ContextValue, DEFAULT_SLOT, Provider, RenderProps, ScrollableProps, SlotProps, StyleRenderProps, useContextProps, useRenderProps, useSlot} from './utils';
+import {ContextValue, DEFAULT_SLOT, Provider, RenderProps, ScrollableProps, SlotProps, StyleProps, StyleRenderProps, useContextProps, useRenderProps, useSlot} from './utils';
 import {DragAndDropContext, DropIndicatorContext, DropIndicatorProps, useDndPersistedKeys, useRenderDropIndicator} from './DragAndDrop';
 import {DragAndDropHooks} from './useDragAndDrop';
 import {DraggableCollectionState, DroppableCollectionState, ListState, Node, Orientation, SelectionBehavior, UNSTABLE_useFilteredListState, useListState} from 'react-stately';
 import {filterDOMProps, inertValue, mergeRefs, useLoadMore, useObjectRef} from '@react-aria/utils';
-import {forwardRefType, HoverEvents, Key, LinkDOMProps, RefObject, StyleProps} from '@react-types/shared';
 import {HeaderContext} from './Header';
 import React, {createContext, ForwardedRef, forwardRef, JSX, ReactNode, useContext, useEffect, useMemo, useRef} from 'react';
 import {SeparatorContext} from './Separator';
@@ -54,10 +54,15 @@ export interface ListBoxRenderProps {
   /**
    * State of the listbox.
    */
-  state: ListState<unknown>
+  state: ListState<unknown>,
+  /**
+   * Whether the listbox is currently loading items.
+   * @selector [data-loading]
+   */
+  isLoading?: boolean
 }
 
-export interface ListBoxProps<T> extends Omit<AriaListBoxProps<T>, 'children' | 'label'>, CollectionProps<T>, StyleRenderProps<ListBoxRenderProps>, SlotProps, ScrollableProps<HTMLDivElement> {
+export interface ListBoxProps<T> extends Omit<AriaListBoxProps<T>, 'children' | 'label'>, CollectionProps<T>, StyleRenderProps<ListBoxRenderProps>, SlotProps, ScrollableProps<HTMLDivElement>, AsyncLoadable {
   /** How multiple selection should behave in the collection. */
   selectionBehavior?: SelectionBehavior,
   /** The drag and drop hooks returned by `useDragAndDrop` used to enable drag and drop behavior for the ListBox. */
@@ -74,11 +79,7 @@ export interface ListBoxProps<T> extends Omit<AriaListBoxProps<T>, 'children' |
    * direction that the collection scrolls.
    * @default 'vertical'
    */
-  orientation?: Orientation,
-  // TODO: move types somewhere common later
-  // Discuss if we want the RAC components to call the useLoadMore directly (think they have to if we wanna support using <Collection> as child)
-  isLoading?: boolean,
-  onLoadMore?: () => void
+  orientation?: Orientation
 }
 
 export const ListBoxContext = createContext<ContextValue<ListBoxProps<any>, HTMLDivElement>>(null);
@@ -210,7 +211,8 @@ function ListBoxInner<T extends object>({state: inputState, props, listBoxRef}:
     isFocused,
     isFocusVisible,
     layout: props.layout || 'stack',
-    state
+    state,
+    isLoading: props.isLoading || false
   };
   let renderProps = useRenderProps({
     className: props.className,
@@ -261,7 +263,8 @@ function ListBoxInner<T extends object>({state: inputState, props, listBoxRef}:
         data-focused={isFocused || undefined}
         data-focus-visible={isFocusVisible || undefined}
         data-layout={props.layout || 'stack'}
-        data-orientation={props.orientation || 'vertical'}>
+        data-orientation={props.orientation || 'vertical'}
+        data-loading={props.isLoading || undefined}>
         <Provider
           values={[
             [ListBoxContext, props],