docs: Assorted fixes (#9271)

Author: devongovett

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