docs: Assorted fixes

packages/@react-aria/autocomplete/src/useAutocomplete.ts

@@ -15,7 +15,7 @@ import {AriaTextFieldProps} from '@react-aria/textfield';
 import {AutocompleteProps, AutocompleteState} from '@react-stately/autocomplete';
 import {CLEAR_FOCUS_EVENT, FOCUS_EVENT, getActiveElement, getOwnerDocument, isAndroid, isCtrlKeyPressed, isIOS, mergeProps, mergeRefs, useEffectEvent, useEvent, useId, useLabels, useLayoutEffect, useObjectRef} from '@react-aria/utils';
 import {dispatchVirtualBlur, dispatchVirtualFocus, getVirtuallyFocusedElement, moveVirtualFocus} from '@react-aria/focus';
-import {getInteractionModality} from '@react-aria/interactions';
+import {getInteractionModality, getPointerType} from '@react-aria/interactions';
 // @ts-ignore
 import intlMessages from '../intl/*.json';
 import {FocusEvent as ReactFocusEvent, KeyboardEvent as ReactKeyboardEvent, useCallback, useEffect, useMemo, useRef, useState} from 'react';
@@ -92,7 +92,6 @@ export function useAutocomplete<T>(props: AriaAutocompleteOptions<T>, state: Aut
   let timeout = useRef<ReturnType<typeof setTimeout> | undefined>(undefined);
   let delayNextActiveDescendant = useRef(false);
   let queuedActiveDescendant = useRef<string | null>(null);
-  let lastPointerType = useRef<string | null>(null);
 
   // For mobile screen readers, we don't want virtual focus, instead opting to disable FocusScope's restoreFocus and manually
   // moving focus back to the subtriggers
@@ -106,23 +105,10 @@ export function useAutocomplete<T>(props: AriaAutocompleteOptions<T>, state: Aut
     return () => clearTimeout(timeout.current);
   }, []);
 
-  useEffect(() => {
-    let handlePointerDown = (e: PointerEvent) => {
-      lastPointerType.current = e.pointerType;
-    };
-
-    if (typeof PointerEvent !== 'undefined') {
-      document.addEventListener('pointerdown', handlePointerDown, true);
-      return () => {
-        document.removeEventListener('pointerdown', handlePointerDown, true);
-      };
-    }
-  }, []);
-
   let updateActiveDescendantEvent = useEffectEvent((e: Event) => {
     // Ensure input is focused if the user clicks on the collection directly.
     // don't trigger on touch so that mobile keyboard doesnt appear when tapping on options
-    if (!e.isTrusted && shouldUseVirtualFocus && inputRef.current && getActiveElement(getOwnerDocument(inputRef.current)) !== inputRef.current && lastPointerType.current !== 'touch') {
+    if (!e.isTrusted && shouldUseVirtualFocus && inputRef.current && getActiveElement(getOwnerDocument(inputRef.current)) !== inputRef.current && getPointerType() !== 'touch') {
       inputRef.current.focus();
     }
 

packages/@react-aria/interactions/src/index.ts

@@ -17,6 +17,7 @@ export {
   isFocusVisible,
   getInteractionModality,
   setInteractionModality,
+  getPointerType,
   addWindowFocusTracking,
   useInteractionModality,
   useFocusVisible,

packages/@react-aria/interactions/src/useFocusVisible.ts

@@ -17,6 +17,7 @@
 
 import {getOwnerDocument, getOwnerWindow, isMac, isVirtualClick, openLink} from '@react-aria/utils';
 import {ignoreFocusEvent} from './utils';
+import {PointerType} from '@react-types/shared';
 import {useEffect, useState} from 'react';
 import {useIsSSR} from '@react-aria/ssr';
 
@@ -37,6 +38,7 @@ export interface FocusVisibleResult {
 }
 
 let currentModality: null | Modality = null;
+let currentPointerType: PointerType = 'keyboard';
 let changeHandlers = new Set<Handler>();
 interface GlobalListenerData {
   focus: () => void
@@ -70,12 +72,14 @@ function handleKeyboardEvent(e: KeyboardEvent) {
   hasEventBeforeFocus = true;
   if (!(openLink as any).isOpening && isValidKey(e)) {
     currentModality = 'keyboard';
+    currentPointerType = 'keyboard';
     triggerChangeHandlers('keyboard', e);
   }
 }
 
 function handlePointerEvent(e: PointerEvent | MouseEvent) {
   currentModality = 'pointer';
+  currentPointerType = 'pointerType' in e ? e.pointerType as PointerType : 'mouse';
   if (e.type === 'mousedown' || e.type === 'pointerdown') {
     hasEventBeforeFocus = true;
     triggerChangeHandlers('pointer', e);
@@ -86,6 +90,7 @@ function handleClickEvent(e: MouseEvent) {
   if (!(openLink as any).isOpening && isVirtualClick(e)) {
     hasEventBeforeFocus = true;
     currentModality = 'virtual';
+    currentPointerType = 'virtual';
   }
 }
 
@@ -101,6 +106,7 @@ function handleFocusEvent(e: FocusEvent) {
   // This occurs, for example, when navigating a form with the next/previous buttons on iOS.
   if (!hasEventBeforeFocus && !hasBlurredWindowRecently) {
     currentModality = 'virtual';
+    currentPointerType = 'virtual';
     triggerChangeHandlers('virtual', e);
   }
 
@@ -249,9 +255,15 @@ export function getInteractionModality(): Modality | null {
 
 export function setInteractionModality(modality: Modality): void {
   currentModality = modality;
+  currentPointerType = modality === 'pointer' ? 'mouse' : modality;
   triggerChangeHandlers(modality, null);
 }
 
+/** @private */
+export function getPointerType(): PointerType {
+  return currentPointerType;
+}
+
 /**
  * Keeps state of the current modality.
  */

packages/@react-aria/test-utils/src/testSetup.ts

@@ -35,35 +35,37 @@ export function installMouseEvent(): void {
   });
 }
 
+export function definePointerEvent(): void {
+  // @ts-ignore
+  global.PointerEvent = class FakePointerEvent extends MouseEvent {
+    _init: {pageX: number, pageY: number, pointerType: string, pointerId: number, width: number, height: number};
+    constructor(name, init) {
+      super(name, init);
+      this._init = init;
+    }
+    get pointerType() {
+      return this._init.pointerType ?? 'mouse';
+    }
+    get pointerId() {
+      return this._init.pointerId;
+    }
+    get pageX() {
+      return this._init.pageX;
+    }
+    get pageY() {
+      return this._init.pageY;
+    }
+    get width() {
+      return this._init.width;
+    }
+    get height() {
+      return this._init.height;
+    }
+  };
+}
+
 export function installPointerEvent(): void {
-  beforeAll(() => {
-    // @ts-ignore
-    global.PointerEvent = class FakePointerEvent extends MouseEvent {
-      _init: {pageX: number, pageY: number, pointerType: string, pointerId: number, width: number, height: number};
-      constructor(name, init) {
-        super(name, init);
-        this._init = init;
-      }
-      get pointerType() {
-        return this._init.pointerType ?? 'mouse';
-      }
-      get pointerId() {
-        return this._init.pointerId;
-      }
-      get pageX() {
-        return this._init.pageX;
-      }
-      get pageY() {
-        return this._init.pageY;
-      }
-      get width() {
-        return this._init.width;
-      }
-      get height() {
-        return this._init.height;
-      }
-    };
-  });
+  beforeAll(definePointerEvent);
   afterAll(() => {
     // @ts-ignore
     delete global.PointerEvent;

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

@@ -28,8 +28,7 @@ type UnionToIntersection<U> = (U extends any ? (k: U) => void : never) extends (
 
 /**
  * Merges multiple props objects together. Event handlers are chained,
- * classNames are combined, and ids are deduplicated - different ids
- * will trigger a side-effect and re-render components hooked up with `useId`.
+ * classNames are combined, and ids are deduplicated.
  * For all other props, the last prop object overrides all previous ones.
  * @param args - Multiple sets of props to merge together.
  */

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

@@ -476,7 +476,7 @@ export function TabPanel(props: TabPanelProps): ReactNode | null {
 
 function CollapsedTabPanel(props: TabPanelProps) {
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  let {UNSAFE_style, UNSAFE_className = '', id, ...otherProps} = props;
+  let {UNSAFE_style, UNSAFE_className = '', id, shouldForceMount, ...otherProps} = props;
   let {menuId, valueId} = useContext(CollapseContext);
   let ref = useRef(null);
   let tabIndex = useHasTabbableChild(ref) ? undefined : 0;

packages/@react-spectrum/s2/src/index.ts

@@ -91,10 +91,8 @@ export {TreeView, TreeViewItem, TreeViewItemContent, TreeViewLoadMoreItem} from
 
 export {pressScale} from './pressScale';
 
-export {Autocomplete} from 'react-aria-components';
-export {Collection} from 'react-aria-components';
-export {FileTrigger} from 'react-aria-components';
-export {parseColor} from 'react-aria-components';
+export {Autocomplete, Collection, FileTrigger, parseColor, useLocale} from 'react-aria-components';
+export {useListData, useTreeData, useAsyncList} from 'react-stately';
 
 export type {AccordionProps, AccordionItemProps, AccordionItemHeaderProps, AccordionItemTitleProps, AccordionItemPanelProps} from './Accordion';
 export type {ActionBarProps} from './ActionBar';
@@ -169,3 +167,4 @@ export type {ToggleButtonGroupProps} from './ToggleButtonGroup';
 export type {TooltipProps} from './Tooltip';
 export type {TreeViewProps, TreeViewItemProps, TreeViewItemContentProps, TreeViewLoadMoreItemProps} from './TreeView';
 export type {AutocompleteProps, FileTriggerProps, TooltipTriggerComponentProps as TooltipTriggerProps, SortDescriptor, Color, Key, Selection} from 'react-aria-components';
+export type {ListData, TreeData, AsyncListData} from 'react-stately';

packages/dev/s2-docs/pages/react-aria/Autocomplete.mdx

@@ -122,7 +122,6 @@ Autocomplete filters a collection component using a [TextField](TextField) or [S
 import {Autocomplete, useFilter} from 'react-aria-components';
 import {MenuTrigger, Menu, MenuItem} from 'vanilla-starter/Menu';
 import {Button} from 'vanilla-starter/Button';
-import {Popover} from 'vanilla-starter/Popover';
 import {SearchField} from 'vanilla-starter/SearchField';
 
 function Example(props) {
@@ -131,7 +130,7 @@ function Example(props) {
   return (
     <MenuTrigger>
       <Button>Add tag...</Button>
-      <Popover style={{display: 'flex', flexDirection: 'column'}}>
+      <div style={{display: 'flex', flexDirection: 'column', maxHeight: 'inherit'}}>
         {/*- begin highlight -*/}
         <Autocomplete {...props}/* PROPS */ filter={contains}>
           <SearchField
@@ -152,7 +151,7 @@ function Example(props) {
             <MenuItem>Science</MenuItem>
           </Menu>
         </Autocomplete>
-      </Popover>
+      </div>
     </MenuTrigger>
   );
 }
@@ -1059,10 +1058,9 @@ When the `filter` prop is not set, the items are controlled. This example uses a
 
 ```tsx render
 "use client";
-import {Autocomplete} from 'react-aria-components';
+import {Autocomplete, useAsyncList} from 'react-aria-components';
 import {SearchField} from 'vanilla-starter/SearchField';
 import {ListBox, ListBoxItem} from 'vanilla-starter/ListBox';
-import {useAsyncList} from 'react-stately';
 
 function AsyncLoadingExample() {
   let list = useAsyncList<{name: string}>({

packages/dev/s2-docs/pages/react-aria/Breadcrumbs.mdx

@@ -20,8 +20,8 @@ export const description = 'Displays a hierarchy of links to the current page or
   import {Breadcrumbs, Breadcrumb} from 'vanilla-starter/Breadcrumbs';
 
   <Breadcrumbs/* PROPS */>
-    <Breadcrumb href="/">Home</Breadcrumb>
-    <Breadcrumb href="/react-aria/">React Aria</Breadcrumb>
+    <Breadcrumb href="https://adobe.com/" target="_blank">Adobe</Breadcrumb>
+    <Breadcrumb href="/">React Aria</Breadcrumb>
     <Breadcrumb>Breadcrumbs</Breadcrumb>
   </Breadcrumbs>
   ```
@@ -31,8 +31,8 @@ export const description = 'Displays a hierarchy of links to the current page or
   import {Breadcrumbs, Breadcrumb} from 'tailwind-starter/Breadcrumbs';
 
   <Breadcrumbs/* PROPS */>
-    <Breadcrumb href="/">Home</Breadcrumb>
-    <Breadcrumb href="/react-aria/">React Aria</Breadcrumb>
+    <Breadcrumb href="https://adobe.com/" target="_blank">Adobe</Breadcrumb>
+    <Breadcrumb href="/">React Aria</Breadcrumb>
     <Breadcrumb>Breadcrumbs</Breadcrumb>
   </Breadcrumbs>
   ```

packages/dev/s2-docs/pages/react-aria/Button.mdx

@@ -10,7 +10,6 @@ import vanillaDocs from 'docs:vanilla-starter/Button';
 import tailwindDocs from 'docs:tailwind-starter/Button';
 import '../../tailwind/tailwind.css';
 import typesDocs from 'docs:@react-types/shared/src/events.d.ts';
-import {getBaseUrl} from '../../src/pageUtils';
 
 export const tags = ['btn'];
 export const relatedPages = [{'title': 'useButton', 'url': 'https://react-spectrum.adobe.com/react-aria/useButton.html'}];
@@ -50,7 +49,7 @@ export const description = 'Allows a user to perform an action, with mouse, touc
 
 Use the `onPress` prop to handle interactions via mouse, keyboard, and touch. This is similar to `onClick`, but normalized for consistency across browsers, devices, and interaction methods. Read our [blog post](blog/building-a-button-part-1) to learn more.
 
-The `onPressStart`, `onPressEnd`, and `onPressChange` events are also emitted as the user interacts with the button. Each of these handlers receives a <TypeLink links={typesDocs.links} type={typesDocs.exports.PressEvent} />, which provides information about the target and interaction method. See <Link href={`${getBaseUrl('react-aria')}/usePress`}>usePress</Link> for more details.
+The `onPressStart`, `onPressEnd`, and `onPressChange` events are also emitted as the user interacts with the button. Each of these handlers receives a <TypeLink links={typesDocs.links} type={typesDocs.exports.PressEvent} />, which provides information about the target and interaction method. See [usePress](usePress) for more details.
 
 ```tsx render
 "use client";

packages/dev/s2-docs/pages/react-aria/Calendar.mdx

@@ -151,7 +151,7 @@ Use the `minValue` and `maxValue` props to set the valid date range. The `isDate
 ```tsx render docs={vanillaDocs.exports.Calendar} links={docs.links} props={['isInvalid', 'errorMessage']} wide
 "use client";
 import {isWeekend, today, getLocalTimeZone} from '@internationalized/date';
-import {useLocale} from 'react-aria';
+import {useLocale} from 'react-aria-components';
 import {Calendar} from 'vanilla-starter/Calendar';
 
 function Example(props) {

packages/dev/s2-docs/pages/react-aria/DatePicker.mdx

@@ -99,7 +99,7 @@ Use the `name` prop to submit the selected date to the server as an [ISO 8601](h
 ```tsx render
 "use client";
 import {isWeekend, today, getLocalTimeZone} from '@internationalized/date';
-import {useLocale} from 'react-aria';
+import {useLocale} from 'react-aria-components';
 import {DatePicker} from 'vanilla-starter/DatePicker';
 import {Button} from 'vanilla-starter/Button';
 import {Form} from 'vanilla-starter/Form';;

packages/dev/s2-docs/pages/react-aria/DateRangePicker.mdx

@@ -112,7 +112,7 @@ Use the `name` prop to submit the selected date to the server as an [ISO 8601](h
 ```tsx render docs={vanillaDocs.exports.DateRangePicker} links={docs.links} props={['allowsNonContiguousRanges']} wide
 "use client";
 import {isWeekend, today, getLocalTimeZone} from '@internationalized/date';
-import {useLocale} from 'react-aria';
+import {useLocale} from 'react-aria-components';
 import {DateRangePicker} from 'vanilla-starter/DateRangePicker';
 import {Button} from 'vanilla-starter/Button';
 import {Form} from 'vanilla-starter/Form';;

packages/dev/s2-docs/pages/react-aria/FileTrigger.mdx

@@ -4,7 +4,6 @@ export default Layout;
 import docs from 'docs:react-aria-components';
 import '../../tailwind/tailwind.css';
 import {InlineAlert, Heading, Content} from '@react-spectrum/s2'
-import {getBaseUrl} from '../../src/pageUtils';
 
 export const tags = ['upload', 'input'];
 export const description = 'Allows a user to access the file system with any pressable React Aria or React Spectrum component.';
@@ -44,7 +43,7 @@ function Example(props) {
 
 ## Custom trigger
 
-`FileTrigger` works with any pressable React Aria component (e.g. [Button](Button), [Link](Link), etc.). Use the `<Pressable>` component or <Link href={`${getBaseUrl('react-aria')}/usePress`}>usePress</Link> hook to wrap a custom trigger element such as a third party component or DOM element.
+`FileTrigger` works with any pressable React Aria component (e.g. [Button](Button), [Link](Link), etc.). Use the `<Pressable>` component or [usePress](usePress) hook to wrap a custom trigger element such as a third party component or DOM element.
 
 ```tsx render
 "use client"

packages/dev/s2-docs/pages/react-aria/FocusRing.mdx

@@ -20,20 +20,6 @@ export const description = 'A utility component that applies a visual focus indi
 
 <PageDescription>{docs.exports.FocusRing.description}</PageDescription>
 
-## Introduction
-
-`FocusRing` is a utility component that can be used to apply a CSS class when an element has keyboard focus.
-This helps keyboard users determine which element on a page or in an application has keyboard focus as they
-navigate around. Focus rings are only visible when interacting with a keyboard so as not to distract mouse
-and touch screen users. When we are unable to detect if the user is using a mouse or touch screen, such as
-switching in from a different tab, we show the focus ring.
-
-If CSS classes are not being used for styling, see [useFocusRing](useFocusRing) for a hooks version.
-
-## Example
-
-This example shows how to use `<FocusRing>` to apply a CSS class when keyboard focus is on a button.
-
 ```tsx render files={["packages/dev/s2-docs/pages/react-aria/FocusRingExample.css"]}
 'use client';
 import {FocusRing} from '@react-aria/focus';
@@ -44,8 +30,18 @@ import './FocusRingExample.css';
 </FocusRing>
 ```
 
+## Features
+
+`FocusRing` is a utility component that can be used to apply a CSS class when an element has keyboard focus.
+This helps keyboard users determine which element on a page or in an application has keyboard focus as they
+navigate around. Focus rings are only visible when interacting with a keyboard so as not to distract mouse
+and touch screen users. When we are unable to detect if the user is using a mouse or touch screen, such as
+switching in from a different tab, we show the focus ring.
+
+If CSS classes are not being used for styling, see [useFocusRing](useFocusRing) for a hooks version.
+
 ## API
 
 ### FocusRing
 
-<PropTable links={docs.links} component={docs.exports.FocusRing} />
+<PropTable links={docs.links} component={docs.exports.FocusRing} />

packages/dev/s2-docs/pages/react-aria/FocusRingExample.css

@@ -5,7 +5,8 @@
   border: none;
   color: white;
   font-size: 14px;
-  padding: 4px 8px;
+  padding: 8px 12px;
+  border-radius: 8px;
 }
 
 .button.focus-ring {

packages/dev/s2-docs/pages/react-aria/GridList.mdx

@@ -611,9 +611,8 @@ GridList supports drag and drop interactions when the `dragAndDropHooks` prop is
 
 ```tsx render
 "use client";
-import {useListData} from 'react-stately';
 import {GridList, GridListItem} from 'vanilla-starter/GridList';
-import {useDragAndDrop, Text} from 'react-aria-components';
+import {useDragAndDrop, Text, useListData} from 'react-aria-components';
 
 ///- begin collapse -///
 let images = [