chore: RAC storybook updates, Loader api fix

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

@@ -511,7 +511,7 @@ export interface GridListLoadingSentinelProps extends Omit<LoadMoreSentinelProps
   isLoading?: boolean
 }
 
-export const UNSTABLE_GridListLoadingSentinel = createLeafComponent('loader', function GridListLoadingIndicator<T extends object>(props: GridListLoadingSentinelProps, ref: ForwardedRef<HTMLDivElement>, item: Node<T>) {
+export const UNSTABLE_GridListLoadingSentinel = /*#__PURE__*/ createLeafComponent('loader', function GridListLoadingIndicator(props: GridListLoadingSentinelProps, ref: ForwardedRef<Element>, item: Node<object>) {
   let state = useContext(ListStateContext)!;
   let {isVirtualized} = useContext(CollectionRendererContext);
   let {isLoading, onLoadMore, scrollOffset, ...otherProps} = props;
@@ -546,7 +546,7 @@ export const UNSTABLE_GridListLoadingSentinel = createLeafComponent('loader', fu
           {...mergeProps(filterDOMProps(props as any))}
           role="row"
           aria-rowindex={isVirtualized ? item.index + 1 : undefined}
-          ref={ref}>
+          ref={ref as ForwardedRef<HTMLDivElement>}>
           <div
             aria-colindex={isVirtualized ? 1 : undefined}
             role="gridcell">

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

@@ -479,7 +479,7 @@ export interface ListBoxLoadingSentinelProps extends Omit<LoadMoreSentinelProps,
   isLoading?: boolean
 }
 
-export const UNSTABLE_ListBoxLoadingSentinel = createLeafComponent('loader', function ListBoxLoadingIndicator<T extends object>(props: ListBoxLoadingSentinelProps, ref: ForwardedRef<HTMLDivElement>, item: Node<T>) {
+export const UNSTABLE_ListBoxLoadingSentinel = createLeafComponent('loader', function ListBoxLoadingIndicator(props: ListBoxLoadingSentinelProps, ref: ForwardedRef<Element>, item: Node<object>) {
   let state = useContext(ListStateContext)!;
   let {isVirtualized} = useContext(CollectionRendererContext);
   let {isLoading, onLoadMore, scrollOffset, ...otherProps} = props;
@@ -524,7 +524,7 @@ export const UNSTABLE_ListBoxLoadingSentinel = createLeafComponent('loader', fun
           // aria-selected isn't needed here since this option is not selectable.
           // eslint-disable-next-line jsx-a11y/role-has-required-aria-props
           role="option"
-          ref={ref}>
+          ref={ref as ForwardedRef<HTMLDivElement>}>
           {renderProps.children}
         </div>
       )}

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

@@ -1359,7 +1359,7 @@ export interface TableLoadingSentinelProps extends Omit<LoadMoreSentinelProps, '
   isLoading?: boolean
 }
 
-export const UNSTABLE_TableLoadingSentinel = createLeafComponent('loader', function TableLoadingIndicator<T extends object>(props: TableLoadingSentinelProps, ref: ForwardedRef<HTMLTableRowElement>, item: Node<T>) {
+export const UNSTABLE_TableLoadingSentinel = createLeafComponent('loader', function TableLoadingIndicator(props: TableLoadingSentinelProps, ref: ForwardedRef<Element>, item: Node<object>) {
   let state = useContext(TableStateContext)!;
   let {isVirtualized} = useContext(CollectionRendererContext);
   let {isLoading, onLoadMore, scrollOffset, ...otherProps} = props;
@@ -1409,7 +1409,7 @@ export const UNSTABLE_TableLoadingSentinel = createLeafComponent('loader', funct
           {...mergeProps(filterDOMProps(props as any), rowProps)}
           {...renderProps}
           role="row"
-          ref={ref}>
+          ref={ref as ForwardedRef<HTMLTableRowElement>}>
           <TD role="rowheader" {...rowHeaderProps} style={style}>
             {renderProps.children}
           </TD>

packages/react-aria-components/stories/Autocomplete.stories.tsx

@@ -12,6 +12,7 @@
 
 import {action} from '@storybook/addon-actions';
 import {Autocomplete, Button, Collection, DialogTrigger, Header, Input, Keyboard, Label, ListBox, ListBoxSection, ListLayout, Menu, MenuItem, MenuSection, MenuTrigger, Popover, SearchField, Select, SelectValue, Separator, SubmenuTrigger, Text, TextField, Virtualizer} from 'react-aria-components';
+import {Meta, StoryObj} from '@storybook/react';
 import {MyListBoxItem, MyMenuItem} from './utils';
 import React from 'react';
 import styles from '../example/index.css';
@@ -20,6 +21,7 @@ import {useFilter} from 'react-aria';
 
 export default {
   title: 'React Aria Components',
+  component: Autocomplete,
   args: {
     onAction: action('onAction'),
     selectionMode: 'multiple',
@@ -45,7 +47,11 @@ export default {
       options: ['clearSelection', 'none']
     }
   }
-};
+} as Meta<typeof Autocomplete>;
+
+export type AutocompleteStory = StoryObj<typeof Autocomplete>;
+export type MenuStory = StoryObj<typeof Menu>;
+export type ListBoxStory = StoryObj<typeof ListBox>;
 
 let StaticMenu = (props) => {
   return (
@@ -112,7 +118,7 @@ function AutocompleteWrapper(props) {
   );
 }
 
-export const AutocompleteExample = {
+export const AutocompleteExample: AutocompleteStory = {
   render: (args) => {
     return (
       <AutocompleteWrapper>
@@ -130,7 +136,7 @@ export const AutocompleteExample = {
   name: 'Autocomplete complex static with textfield'
 };
 
-export const AutocompleteSearchfield = {
+export const AutocompleteSearchfield: AutocompleteStory = {
   render: (args) => {
     return (
       <AutocompleteWrapper defaultInputValue="Ba">
@@ -288,7 +294,7 @@ let dynamicRenderFuncSections = (item: ItemNode) => {
   }
 };
 
-export const AutocompleteMenuDynamic = {
+export const AutocompleteMenuDynamic: AutocompleteStory = {
   render: (args) => {
     return (
       <>
@@ -312,7 +318,7 @@ export const AutocompleteMenuDynamic = {
   name: 'Autocomplete, dynamic menu'
 };
 
-export const AutocompleteOnActionOnMenuItems = {
+export const AutocompleteOnActionOnMenuItems: AutocompleteStory = {
   render: (args) => {
     return (
       <AutocompleteWrapper>
@@ -341,7 +347,7 @@ interface AutocompleteItem {
 
 let items: AutocompleteItem[] = [{id: '1', name: 'Foo'}, {id: '2', name: 'Bar'}, {id: '3', name: 'Baz'}];
 
-export const AutocompleteDisabledKeys = {
+export const AutocompleteDisabledKeys: AutocompleteStory = {
   render: (args) => {
     return (
       <AutocompleteWrapper>
@@ -361,7 +367,7 @@ export const AutocompleteDisabledKeys = {
   name: 'Autocomplete, disabled key'
 };
 
-const AsyncExample = (args) => {
+const AsyncExample = (args: any): React.ReactElement => {
   let list = useAsyncList<AutocompleteItem>({
     async load({filterText}) {
       let json = await new Promise(resolve => {
@@ -412,7 +418,7 @@ const AsyncExample = (args) => {
   );
 };
 
-export const AutocompleteAsyncLoadingExample = {
+export const AutocompleteAsyncLoadingExample: StoryObj<typeof AsyncExample> = {
   render: (args) => {
     return <AsyncExample {...args} />;
   },
@@ -444,14 +450,14 @@ const CaseSensitiveFilter = (args) => {
   );
 };
 
-export const AutocompleteCaseSensitive = {
+export const AutocompleteCaseSensitive: AutocompleteStory = {
   render: (args) => {
     return <CaseSensitiveFilter {...args} />;
   },
   name: 'Autocomplete, case sensitive filter'
 };
 
-export const AutocompleteWithListbox = {
+export const AutocompleteWithListbox: AutocompleteStory = {
   render: (args) => {
     return (
       <DialogTrigger>
@@ -528,7 +534,7 @@ function VirtualizedListBox(props) {
   );
 }
 
-export const AutocompleteWithVirtualizedListbox = {
+export const AutocompleteWithVirtualizedListbox: AutocompleteStory = {
   render: (args) => {
     return (
       <DialogTrigger>
@@ -614,7 +620,7 @@ function ShellExample() {
   );
 }
 
-export const AutocompleteInPopover = {
+export const AutocompleteInPopover: MenuStory = {
   render: () => {
     return (
       <MenuTrigger>
@@ -659,7 +665,7 @@ export const AutocompleteInPopover = {
   }
 };
 
-export const AutocompleteInPopoverDialogTrigger = {
+export const AutocompleteInPopoverDialogTrigger: MenuStory = {
   render: () => {
     return (
       <DialogTrigger>
@@ -770,7 +776,7 @@ const MyMenu2 = () => {
   );
 };
 
-export function AutocompleteWithExtraButtons() {
+export function AutocompleteWithExtraButtons(): React.ReactElement {
   return (
     <div>
       <input />
@@ -786,7 +792,7 @@ export function AutocompleteWithExtraButtons() {
 // TODO: note that Space is used to select an item in a multiselect menu but that is also reserved for the
 // autocomplete input field. Should we add logic to allow Space to select menu items when focus is in the Menu
 // or is that a rare/unlikely use case for menus in general?
-export const AutocompleteMenuInPopoverDialogTrigger = {
+export const AutocompleteMenuInPopoverDialogTrigger: MenuStory = {
   render: (args) => {
     return (
       <DialogTrigger>
@@ -830,7 +836,7 @@ export const AutocompleteMenuInPopoverDialogTrigger = {
 
 let manyItems = [...Array(100)].map((_, i) => ({id: i, name: `Item ${i}`}));
 
-export const AutocompleteSelect = () => (
+export const AutocompleteSelect = (): React.ReactElement => (
   <Select style={{marginBottom: 40, position: 'relative'}}>
     <Label style={{display: 'block'}}>Test</Label>
     <Button>

packages/react-aria-components/stories/Breadcrumbs.stories.tsx

@@ -11,26 +11,31 @@
  */
 
 import {Breadcrumb, Breadcrumbs, Link} from 'react-aria-components';
+import {Meta, StoryObj} from '@storybook/react';
 import React from 'react';
 
 export default {
   title: 'React Aria Components',
   component: Breadcrumbs
-};
+} as Meta<typeof Breadcrumbs>;
+
+export type BreadcrumbsStory = StoryObj<typeof Breadcrumbs>;
 
-export const BreadcrumbsExample = (args: any) => (
-  <Breadcrumbs {...args}>
-    <Breadcrumb>
-      <Link href="/">Home</Link>
-    </Breadcrumb>
-    <Breadcrumb>
-      <Link href="/react-aria">React Aria</Link>
-    </Breadcrumb>
-    <Breadcrumb>
-      <Link href="/react-aria">Breadcrumbs</Link>
-    </Breadcrumb>
-  </Breadcrumbs>
-);
+export const BreadcrumbsExample: BreadcrumbsStory = {
+  render: (args: any) => (
+    <Breadcrumbs {...args}>
+      <Breadcrumb>
+        <Link href="/">Home</Link>
+      </Breadcrumb>
+      <Breadcrumb>
+        <Link href="/react-aria">React Aria</Link>
+      </Breadcrumb>
+      <Breadcrumb>
+        <Link href="/react-aria">Breadcrumbs</Link>
+      </Breadcrumb>
+    </Breadcrumbs>
+  )
+};
 
 interface ItemValue {
   id: string,
@@ -42,12 +47,14 @@ let items: Array<ItemValue> = [
   {id: 'Breadcrumbs', url: '/react-aria/breadcrumbs'}
 ];
 
-export const DynamicBreadcrumbsExample = (args: any) => (
-  <Breadcrumbs {...args} items={items}>
-    {(item: ItemValue) => (
-      <Breadcrumb>
-        <Link href={item.url}>{item.id}</Link>
-      </Breadcrumb>
-    )}
-  </Breadcrumbs>
-);
+export const DynamicBreadcrumbsExample: BreadcrumbsStory = {
+  render: (args: any) => (
+    <Breadcrumbs {...args} items={items}>
+      {(item: ItemValue) => (
+        <Breadcrumb>
+          <Link href={item.url}>{item.id}</Link>
+        </Breadcrumb>
+      )}
+    </Breadcrumbs>
+  )
+};

packages/react-aria-components/stories/Button.stories.tsx

@@ -13,21 +13,25 @@
 import {action} from '@storybook/addon-actions';
 import {Button, ProgressBar, Text} from 'react-aria-components';
 import {mergeProps} from '@react-aria/utils';
+import {Meta, StoryObj} from '@storybook/react';
 import React, {useEffect, useRef, useState} from 'react';
 import * as styles from './button-ripple.css';
 import * as styles2 from './button-pending.css';
 
 export default {
-  title: 'React Aria Components'
-};
+  title: 'React Aria Components',
+  component: Button
+} as Meta<typeof Button>;
 
-export const ButtonExample = () => {
-  return (
+export type ButtonStory = StoryObj<typeof Button>;
+
+export const ButtonExample: ButtonStory = {
+  render: () => (
     <Button data-testid="button-example" onPress={action('onPress')} onClick={action('onClick')}>Press me</Button>
-  );
+  )
 };
 
-export const PendingButton = {
+export const PendingButton: ButtonStory = {
   render: (args) => <PendingButtonExample {...args} />,
   args: {
     children: 'Press me'
@@ -79,10 +83,10 @@ function PendingButtonExample(props) {
   );
 }
 
-export const RippleButtonExample = () => {
-  return (
+export const RippleButtonExample: ButtonStory = {
+  render: () => (
     <RippleButton data-testid="button-example">Press me</RippleButton>
-  );
+  )
 };
 
 function RippleButton(props) {
@@ -148,7 +152,7 @@ function ButtonPerformanceExample() {
   );
 }
 
-export const ButtonPerformance = {
+export const ButtonPerformance: ButtonStory = {
   render: (args) => <ButtonPerformanceExample {...args} />,
   parameters: {
     description: {