Merge branch 'main' into audit-fixes

Author: snowystinger

.yarn/patches/@parcel-packager-react-static-npm-2.16.1-138e4b8f05.patch

@@ -0,0 +1,13 @@
+diff --git a/lib/ReactStaticPackager.js b/lib/ReactStaticPackager.js
+index 551b6071819ea7c8c28106281793841d63791856..00ee58c81302cf433ad27a8a8ce2c2d1be5ce716 100644
+--- a/lib/ReactStaticPackager.js
++++ b/lib/ReactStaticPackager.js
+@@ -597,7 +597,7 @@ function runModule(code, filename, id, require, parcelRequire) {
+   return module.exports;
+ }
+ function getCacheKey(asset) {
+-  return asset.filePath + '#' + asset.env.context + (asset.uniqueKey ? '-' + asset.uniqueKey : '');
++  return (asset.pipeline ? asset.pipeline : '') + asset.filePath + '#' + asset.env.context + (asset.uniqueKey ? '-' + asset.uniqueKey : '');
+ }
+ function getSpecifier(dep) {
+   if (typeof dep.meta.placeholder === 'string') {

package.json

@@ -95,7 +95,7 @@
     "@parcel/core": "^2.16.1",
     "@parcel/optimizer-data-url": "^2.16.1",
     "@parcel/optimizer-terser": "^2.16.1",
-    "@parcel/packager-react-static": "^2.16.1",
+    "@parcel/packager-react-static": "patch:@parcel/packager-react-static@npm%3A2.16.1#~/.yarn/patches/@parcel-packager-react-static-npm-2.16.1-138e4b8f05.patch",
     "@parcel/packager-ts": "^2.16.1",
     "@parcel/reporter-bundle-analyzer": "^2.16.1",
     "@parcel/reporter-cli": "^2.16.1",
@@ -232,7 +232,8 @@
     "remark-parse": "patch:remark-parse@npm%3A10.0.1#~/.yarn/patches/remark-parse-npm-10.0.1-e654d7df78.patch",
     "lightningcss": "1.30.1",
     "react-server-dom-parcel": "canary",
-    "react-test-renderer": "19.1.0"
+    "react-test-renderer": "19.1.0",
+    "@parcel/packager-react-static": "patch:@parcel/packager-react-static@npm%3A2.16.1#~/.yarn/patches/@parcel-packager-react-static-npm-2.16.1-138e4b8f05.patch"
   },
   "@parcel/transformer-css": {
     "cssModules": {

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/button/docs/useToggleButtonGroup.mdx

@@ -252,7 +252,7 @@ By default, toggle button groups are horizontally oriented. The orientation prop
 </ToggleButtonGroup>
 ```
 
-## Accessiblity
+## Accessibility
 
 A `ToggleButtonGroup` can be labeled using the `aria-label` or `aria-labelledby` props.
 

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/overlays/docs/usePopover.mdx

@@ -78,7 +78,7 @@ with <TypeLink links={dialogDocs.links} type={dialogDocs.exports.useDialog} />.
 
 The `Popover` component uses an &lt;<TypeLink links={docs.links} type={docs.exports.Overlay} />&gt; to render its contents in a React [Portal](https://reactjs.org/docs/portals.html) at the end of the document body, which ensures it is not clipped by other elements. It also acts as a focus scope, containing focus within the popover and restoring it to the trigger when it unmounts. <TypeLink links={docs.links} type={docs.exports.usePopover} /> handles positioning the popover relative to the trigger element, and closing it when the user interacts outside or presses the <Keyboard>Escape</Keyboard> key.
 
-<TypeLink links={docs.links} type={docs.exports.usePopover} /> also hides content outside the popover from screen readers, which is important since the surrounding content won't be in context of the original trigger due to the portal. To allow screen reader users to dismiss the popover without a keyboard (e.g. on mobile), visually hidden &lt;<TypeLink links={docs.links} type={docs.exports.DismissButton} />&gt; elements are added at the start and end of the popover. An underlay is also used to prevent scrolling and interacting with elements outside the popover with a pointer, to avoid unintentially repositioning or closing it.
+<TypeLink links={docs.links} type={docs.exports.usePopover} /> also hides content outside the popover from screen readers, which is important since the surrounding content won't be in context of the original trigger due to the portal. To allow screen reader users to dismiss the popover without a keyboard (e.g. on mobile), visually hidden &lt;<TypeLink links={docs.links} type={docs.exports.DismissButton} />&gt; elements are added at the start and end of the popover. An underlay is also used to prevent scrolling and interacting with elements outside the popover with a pointer, to avoid unintentionally repositioning or closing it.
 
 ```tsx example export=true render=false
 import type {AriaPopoverProps} from 'react-aria';

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/autocomplete/docs/SearchAutocomplete.mdx

@@ -234,7 +234,7 @@ See Icon's [labeling](workflow-icons.html#labeling) section and Avatar's [access
     <Item textValue="Mail">
       <Email size="S" />
       <Text>Mail</Text>
-      <Text slot="description">Send and recieve emails</Text>
+      <Text slot="description">Send and receive emails</Text>
     </Item>
     <Item textValue="File Explorer">
       <Folder size="S" />