feat: Add subdialog support to Menu and Autocomplete

.yarn/patches/@testing-library-user-event-npm-14.6.1-5da7e1d4e2.patch

@@ -0,0 +1,26 @@
+diff --git a/dist/cjs/document/prepareDocument.js b/dist/cjs/document/prepareDocument.js
+index 39a24b8f2ccdc52739d130480ab18975073616cb..0c3f5199401c15b90230c25a02de364eeef3e297 100644
+--- a/dist/cjs/document/prepareDocument.js
++++ b/dist/cjs/document/prepareDocument.js
+@@ -30,7 +30,7 @@ function prepareDocument(document) {
+         const initialValue = UI.getInitialValue(el);
+         if (initialValue !== undefined) {
+             if (el.value !== initialValue) {
+-                dispatchEvent.dispatchDOMEvent(el, 'change');
++                el.dispatchEvent(new Event('change'));
+             }
+             UI.clearInitialValue(el);
+         }
+diff --git a/dist/cjs/utils/focus/getActiveElement.js b/dist/cjs/utils/focus/getActiveElement.js
+index d25f3a8ef67e856e43614559f73012899c0b53d7..4ed9ee45565ed438ee9284d8d3043c0bd50463eb 100644
+--- a/dist/cjs/utils/focus/getActiveElement.js
++++ b/dist/cjs/utils/focus/getActiveElement.js
+@@ -6,6 +6,8 @@ function getActiveElement(document) {
+     const activeElement = document.activeElement;
+     if (activeElement === null || activeElement === undefined ? undefined : activeElement.shadowRoot) {
+         return getActiveElement(activeElement.shadowRoot);
++    } else if (activeElement && activeElement.tagName === 'IFRAME') {
++        return getActiveElement(activeElement.contentWindow.document);
+     } else {
+         // Browser does not yield disabled elements as document.activeElement - jsdom does
+         if (isDisabled.isDisabled(activeElement)) {

package.json

@@ -126,7 +126,7 @@
     "@testing-library/dom": "^10.1.0",
     "@testing-library/jest-dom": "^5.16.5",
     "@testing-library/react": "^15.0.7",
-    "@testing-library/user-event": "^14.6.1",
+    "@testing-library/user-event": "patch:@testing-library/user-event@npm%3A14.6.1#~/.yarn/patches/@testing-library-user-event-npm-14.6.1-5da7e1d4e2.patch",
     "@types/react": "npm:[email protected]",
     "@types/react-dom": "npm:[email protected]",
     "@types/storybook__react": "^4.0.2",
@@ -234,7 +234,8 @@
     "@types/react-dom": "npm:[email protected]",
     "recast": "0.23.6",
     "ast-types": "0.16.1",
-    "svgo": "^3"
+    "svgo": "^3",
+    "@testing-library/user-event@npm:^14.4.0": "patch:@testing-library/user-event@npm%3A14.6.1#~/.yarn/patches/@testing-library-user-event-npm-14.6.1-5da7e1d4e2.patch"
   },
   "@parcel/transformer-css": {
     "cssModules": {

packages/@react-aria/autocomplete/package.json

@@ -23,6 +23,7 @@
   },
   "dependencies": {
     "@react-aria/combobox": "^3.11.1",
+    "@react-aria/focus": "^3.19.1",
     "@react-aria/i18n": "^3.12.5",
     "@react-aria/interactions": "^3.23.0",
     "@react-aria/listbox": "^3.14.0",

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

@@ -13,10 +13,12 @@
 import {AriaLabelingProps, BaseEvent, DOMProps, RefObject} from '@react-types/shared';
 import {AriaTextFieldProps} from '@react-aria/textfield';
 import {AutocompleteProps, AutocompleteState} from '@react-stately/autocomplete';
-import {CLEAR_FOCUS_EVENT, FOCUS_EVENT, isCtrlKeyPressed, mergeProps, mergeRefs, UPDATE_ACTIVEDESCENDANT, useEffectEvent, useId, useLabels, useObjectRef} from '@react-aria/utils';
+import {CLEAR_FOCUS_EVENT, FOCUS_EVENT, getActiveElement, getOwnerDocument, isCtrlKeyPressed, mergeProps, mergeRefs, useEffectEvent, useId, useLabels, useObjectRef} from '@react-aria/utils';
+import {dispatchVirtualBlur, dispatchVirtualFocus, moveVirtualFocus} from '@react-aria/focus';
+import {getInteractionModality} from '@react-aria/interactions';
 // @ts-ignore
 import intlMessages from '../intl/*.json';
-import {KeyboardEvent as ReactKeyboardEvent, useCallback, useEffect, useMemo, useRef} from 'react';
+import React, {FocusEvent as ReactFocusEvent, KeyboardEvent as ReactKeyboardEvent, useCallback, useEffect, useMemo, useRef} from 'react';
 import {useLocalizedStringFormatter} from '@react-aria/i18n';
 
 export interface CollectionOptions extends DOMProps, AriaLabelingProps {
@@ -34,6 +36,8 @@ export interface AriaAutocompleteProps extends AutocompleteProps {
 }
 
 export interface AriaAutocompleteOptions extends Omit<AriaAutocompleteProps, 'children'> {
+  /** The ref for the wrapped collection element. */
+  inputRef: RefObject<HTMLInputElement | null>,
   /** The ref for the wrapped collection element. */
   collectionRef: RefObject<HTMLElement | null>
 }
@@ -57,36 +61,49 @@ export interface AutocompleteAria {
  */
 export function UNSTABLE_useAutocomplete(props: AriaAutocompleteOptions, state: AutocompleteState): AutocompleteAria {
   let {
+    inputRef,
     collectionRef,
     filter
   } = props;
 
   let collectionId = useId();
   let timeout = useRef<ReturnType<typeof setTimeout> | undefined>(undefined);
   let delayNextActiveDescendant = useRef(false);
-  let queuedActiveDescendant = useRef(null);
+  let queuedActiveDescendant = useRef<string | null>(null);
   let lastCollectionNode = useRef<HTMLElement>(null);
 
-  let updateActiveDescendant = useEffectEvent((e) => {
-    let {target} = e;
-    if (queuedActiveDescendant.current === target.id) {
-      return;
+  // 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
+  let shouldUseVirtualFocus = getInteractionModality() !== 'virtual';
+
+  useEffect(() => {
+    return () => clearTimeout(timeout.current);
+  }, []);
+
+  let updateActiveDescendant = useEffectEvent((e: Event) => {
+    // Ensure input is focused if the user clicks on the collection directly.
+    if (!e.isTrusted && shouldUseVirtualFocus && inputRef.current && getActiveElement(getOwnerDocument(inputRef.current)) !== inputRef.current) {
+      inputRef.current.focus();
     }
 
+    let target = e.target as Element | null;
+    if (e.isTrusted || !target || queuedActiveDescendant.current === target.id) {
+      return;
+    }
+
     clearTimeout(timeout.current);
-    e.stopPropagation();
-
     if (target !== collectionRef.current) {
       if (delayNextActiveDescendant.current) {
         queuedActiveDescendant.current = target.id;
         timeout.current = setTimeout(() => {
           state.setFocusedNodeId(target.id);
-          queuedActiveDescendant.current = null;
         }, 500);
       } else {
+        queuedActiveDescendant.current = target.id;
         state.setFocusedNodeId(target.id);
       }
     } else {
+      queuedActiveDescendant.current = null;
       state.setFocusedNodeId(null);
     }
 
@@ -96,14 +113,14 @@ export function UNSTABLE_useAutocomplete(props: AriaAutocompleteOptions, state:
   let callbackRef = useCallback((collectionNode) => {
     if (collectionNode != null) {
       // When typing forward, we want to delay the setting of active descendant to not interrupt the native screen reader announcement
-      // of the letter you just typed. If we recieve another UPDATE_ACTIVEDESCENDANT call then we clear the queued update
+      // of the letter you just typed. If we recieve another focus event then we clear the queued update
       // We track lastCollectionNode to do proper cleanup since callbackRefs just pass null when unmounting. This also handles
       // React 19's extra call of the callback ref in strict mode
-      lastCollectionNode.current?.removeEventListener(UPDATE_ACTIVEDESCENDANT, updateActiveDescendant);
+      lastCollectionNode.current?.removeEventListener('focusin', updateActiveDescendant);
       lastCollectionNode.current = collectionNode;
-      collectionNode.addEventListener(UPDATE_ACTIVEDESCENDANT, updateActiveDescendant);
+      collectionNode.addEventListener('focusin', updateActiveDescendant);
     } else {
-      lastCollectionNode.current?.removeEventListener(UPDATE_ACTIVEDESCENDANT, updateActiveDescendant);
+      lastCollectionNode.current?.removeEventListener('focusin', updateActiveDescendant);
     }
   }, [updateActiveDescendant]);
 
@@ -123,11 +140,16 @@ export function UNSTABLE_useAutocomplete(props: AriaAutocompleteOptions, state:
     );
   });
 
-  let clearVirtualFocus = useEffectEvent(() => {
+  let clearVirtualFocus = useEffectEvent((clearFocusKey?: boolean) => {
+    moveVirtualFocus(getActiveElement());
+    queuedActiveDescendant.current = null;
     state.setFocusedNodeId(null);
     let clearFocusEvent = new CustomEvent(CLEAR_FOCUS_EVENT, {
       cancelable: true,
-      bubbles: true
+      bubbles: true,
+      detail: {
+        clearFocusKey
+      }
     });
     clearTimeout(timeout.current);
     delayNextActiveDescendant.current = false;
@@ -141,7 +163,8 @@ export function UNSTABLE_useAutocomplete(props: AriaAutocompleteOptions, state:
     if (state.inputValue !== value && state.inputValue.length <= value.length) {
       focusFirstItem();
     } else {
-      clearVirtualFocus();
+      // Fully clear focused key when backspacing since the list may change and thus we'd want to start fresh again
+      clearVirtualFocus(true);
     }
 
     state.setInputValue(value);
@@ -155,6 +178,7 @@ export function UNSTABLE_useAutocomplete(props: AriaAutocompleteOptions, state:
       return;
     }
 
+    let focusedNodeId = queuedActiveDescendant.current;
     switch (e.key) {
       case 'a':
         if (isCtrlKeyPressed(e)) {
@@ -185,7 +209,7 @@ export function UNSTABLE_useAutocomplete(props: AriaAutocompleteOptions, state:
       case 'PageUp':
       case 'ArrowUp':
       case 'ArrowDown': {
-        if ((e.key === 'Home' || e.key === 'End') && state.focusedNodeId == null && e.shiftKey) {
+        if ((e.key === 'Home' || e.key === 'End') && focusedNodeId == null && e.shiftKey) {
           return;
         }
 
@@ -200,13 +224,6 @@ export function UNSTABLE_useAutocomplete(props: AriaAutocompleteOptions, state:
         collectionRef.current?.dispatchEvent(focusCollection);
         break;
       }
-      case 'ArrowLeft':
-      case 'ArrowRight':
-        // TODO: will need to special case this so it doesn't clear the focused key if we are currently
-        // focused on a submenutrigger? May not need to since focus would
-        // But what about wrapped grids where ArrowLeft and ArrowRight should navigate left/right
-        clearVirtualFocus();
-        break;
     }
 
     // Emulate the keyboard events that happen in the input field in the wrapped collection. This is for triggering things like onAction via Enter
@@ -217,15 +234,28 @@ export function UNSTABLE_useAutocomplete(props: AriaAutocompleteOptions, state:
       e.stopPropagation();
     }
 
-    if (state.focusedNodeId == null) {
-      collectionRef.current?.dispatchEvent(
+    let shouldPerformDefaultAction = true;
+    if (focusedNodeId == null) {
+      shouldPerformDefaultAction = collectionRef.current?.dispatchEvent(
         new KeyboardEvent(e.nativeEvent.type, e.nativeEvent)
-      );
+      ) || false;
     } else {
-      let item = document.getElementById(state.focusedNodeId);
-      item?.dispatchEvent(
+      let item = document.getElementById(focusedNodeId);
+      shouldPerformDefaultAction = item?.dispatchEvent(
         new KeyboardEvent(e.nativeEvent.type, e.nativeEvent)
-      );
+      ) || false;
+    }
+
+    if (shouldPerformDefaultAction) {
+      switch (e.key) {
+        case 'ArrowLeft':
+        case 'ArrowRight': {
+          // Clear the activedescendant so NVDA announcements aren't interrupted but retain the focused key in the collection so the
+          // user's keyboard navigation restarts from where they left off
+          clearVirtualFocus();
+          break;
+        }
+      }
     }
   };
 
@@ -235,12 +265,13 @@ export function UNSTABLE_useAutocomplete(props: AriaAutocompleteOptions, state:
     // is detected by usePress instead of the original keyup originating from the input
     if (e.target === keyDownTarget.current) {
       e.stopImmediatePropagation();
-      if (state.focusedNodeId == null) {
+      let focusedNodeId = queuedActiveDescendant.current;
+      if (focusedNodeId == null) {
         collectionRef.current?.dispatchEvent(
           new KeyboardEvent(e.type, e)
         );
       } else {
-        let item = document.getElementById(state.focusedNodeId);
+        let item = document.getElementById(focusedNodeId);
         item?.dispatchEvent(
           new KeyboardEvent(e.type, e)
         );
@@ -269,6 +300,34 @@ export function UNSTABLE_useAutocomplete(props: AriaAutocompleteOptions, state:
     return true;
   }, [state.inputValue, filter]);
 
+  // Be sure to clear/restore the virtual + collection focus when blurring/refocusing the field so we only show the
+  // focus ring on the virtually focused collection when are actually interacting with the Autocomplete
+  let onBlur = (e: ReactFocusEvent) => {
+    if (!e.isTrusted) {
+      return;
+    }
+
+    let lastFocusedNode = queuedActiveDescendant.current ? document.getElementById(queuedActiveDescendant.current) : null;
+    if (lastFocusedNode) {
+      dispatchVirtualBlur(lastFocusedNode, e.relatedTarget);
+    }
+  };
+
+  let onFocus = (e: ReactFocusEvent) => {
+    if (!e.isTrusted) {
+      return;
+    }
+
+    let curFocusedNode = queuedActiveDescendant.current ? document.getElementById(queuedActiveDescendant.current) : null;
+    if (curFocusedNode) {
+      let target = e.target;
+      queueMicrotask(() => {
+        dispatchVirtualBlur(target, curFocusedNode);
+        dispatchVirtualFocus(curFocusedNode, target);
+      });
+    }
+  };
+
   return {
     textFieldProps: {
       value: state.inputValue,
@@ -283,11 +342,13 @@ export function UNSTABLE_useAutocomplete(props: AriaAutocompleteOptions, state:
       // This disable's iOS's autocorrect suggestions, since the autocomplete provides its own suggestions.
       autoCorrect: 'off',
       // This disable's the macOS Safari spell check auto corrections.
-      spellCheck: 'false'
+      spellCheck: 'false',
+      [parseInt(React.version, 10) >= 17 ? 'enterKeyHint' : 'enterkeyhint']: 'enter',
+      onBlur,
+      onFocus
     },
     collectionProps: mergeProps(collectionProps, {
-      // TODO: shouldFocusOnHover? shouldFocusWrap? Should it be up to the wrapped collection?
-      shouldUseVirtualFocus: true,
+      shouldUseVirtualFocus,
       disallowTypeAhead: true
     }),
     collectionRef: mergedCollectionRef,

packages/@react-aria/collections/src/BaseCollection.ts

@@ -228,7 +228,7 @@ export class BaseCollection<T> implements ICollection<Node<T>> {
         let clonedSection: Mutable<CollectionNode<T>> = (node as CollectionNode<T>).clone();
         let lastChildInSection: Mutable<CollectionNode<T>> | null = null;
         for (let child of this.getChildren(node.key)) {
-          if (filterFn(child.textValue) || child.type === 'header') {
+          if (shouldKeepNode(child, filterFn, this, newCollection)) {
             let clonedChild: Mutable<CollectionNode<T>> = (child as CollectionNode<T>).clone();
             // eslint-disable-next-line max-depth
             if (lastChildInSection == null) {
@@ -288,22 +288,25 @@ export class BaseCollection<T> implements ICollection<Node<T>> {
           lastNode = clonedSeparator;
           newCollection.addNode(clonedSeparator);
         }
-      } else if (filterFn(node.textValue)) {
+      } else {
+        // At this point, the node is either a subdialogtrigger node or a standard row/item
         let clonedNode: Mutable<CollectionNode<T>> = (node as CollectionNode<T>).clone();
-        if (newCollection.firstKey == null) {
-          newCollection.firstKey = clonedNode.key;
-        }
+        if (shouldKeepNode(clonedNode, filterFn, this, newCollection)) {
+          if (newCollection.firstKey == null) {
+            newCollection.firstKey = clonedNode.key;
+          }
 
-        if (lastNode != null && (lastNode.type !== 'section' && lastNode.type !== 'separator') && lastNode.parentKey === clonedNode.parentKey) {
-          lastNode.nextKey = clonedNode.key;
-          clonedNode.prevKey = lastNode.key;
-        } else {
-          clonedNode.prevKey = null;
-        }
+          if (lastNode != null && (lastNode.type !== 'section' && lastNode.type !== 'separator') && lastNode.parentKey === clonedNode.parentKey) {
+            lastNode.nextKey = clonedNode.key;
+            clonedNode.prevKey = lastNode.key;
+          } else {
+            clonedNode.prevKey = null;
+          }
 
-        clonedNode.nextKey = null;
-        newCollection.addNode(clonedNode);
-        lastNode = clonedNode;
+          clonedNode.nextKey = null;
+          newCollection.addNode(clonedNode);
+          lastNode = clonedNode;
+        }
       }
     }
 
@@ -322,3 +325,22 @@ export class BaseCollection<T> implements ICollection<Node<T>> {
     return newCollection;
   }
 }
+
+function shouldKeepNode<T>(node: Node<T>, filterFn: (nodeValue: string) => boolean, oldCollection: BaseCollection<T>, newCollection: BaseCollection<T>): boolean {
+  if (node.type === 'subdialogtrigger' || node.type === 'submenutrigger') {
+    // Subdialog wrapper should only have one child, if it passes the filter add it to the new collection since we don't need to
+    // do any extra handling for its first/next key
+    let triggerChild = [...oldCollection.getChildren(node.key)][0];
+    if (triggerChild && filterFn(triggerChild.textValue)) {
+      let clonedChild: Mutable<CollectionNode<T>> = (triggerChild as CollectionNode<T>).clone();
+      newCollection.addNode(clonedChild);
+      return true;
+    } else {
+      return false;
+    }
+  } else if (node.type === 'header') {
+    return true;
+  } else {
+    return filterFn(node.textValue);
+  }
+}

packages/@react-aria/dialog/src/useDialog.ts

@@ -30,7 +30,9 @@ export interface DialogAria {
  * A dialog is an overlay shown above other content in an application.
  */
 export function useDialog(props: AriaDialogProps, ref: RefObject<FocusableElement | null>): DialogAria {
-  let {role = 'dialog'} = props;
+  let {
+    role = 'dialog'
+  } = props;
   let titleId: string | undefined = useSlotId();
   titleId = props['aria-label'] ? undefined : titleId;