feat: Add async spinner to PromptField autocomplete, virtualized menu and other fixes

[LFDanLu]

from gaps found when using it in Coworker

• adds async spinner to PromptField autocomplete on initial load, subsequent loads via typing is the same "paused rendering until new items come in" behavior
• onExpandedChange for ExecutionTraceItems
• move user provided onKeydown up above token field so keydown events don't bubble up and trigger that callback if the user is interacting with the autocomplete dropdown
• virtualized menu support in S2 Menu, done for renderCompletions menu in PromptField
• support for "steering' in PromptField via showing the submit button when generating + text is in the field

✅ Pull Request Checklist:

• Included link to corresponding React Spectrum GitHub Issue.
• Added/updated unit tests and storybook for this change (for new code or code which already has tests).
• Filled out test instructions.
• Updated documentation (if it already exists for this component).
• Looked at the Accessibility Practices for this feature - Aria Practices
• I understand every change in this PR and can explain why it's there.
• If AI-assisted, I followed our AI contribution guidance and pointed my assistant at CLAUDE.md.

📝 Test Instructions:

1. Test the async completions story in PromptField storybook, see that a spinner shows up when you type "/" or "@"
2. Test virtualized S2 menu docs/story
3. Test the steering behavior via PromptField stories using isGenerating/isReadOnlyWhileGenerating controls
4. other stuff covered by tests but feel ree to test

🧢 Your Project:

RSP

[rspbot]

Build successful! 🎉

• View the storybook
• View the S2 storybook
• View the S2 docs
• View the React Aria docs

[rspbot]

Build successful! 🎉

• View the storybook
• View the S2 storybook
• View the S2 docs
• View the React Aria docs

[rspbot]

Build successful! 🎉

• View the storybook
• View the S2 storybook
• View the S2 docs
• View the React Aria docs

[rspbot]

Build successful! 🎉

• View the storybook
• View the S2 storybook
• View the S2 docs
• View the React Aria docs

[rspbot]

Build successful! 🎉

• View the storybook
• View the S2 storybook
• View the S2 docs
• View the React Aria docs

[rspbot]

## API Changes

@react-spectrum/ai

/@react-spectrum/ai:PromptField

 PromptField {
   acceptedAttachmentTypes?: Array<string>
   aiDisclaimer?: React.ReactNode
   attachments?: Array<PromptFieldAttachment>
   brandColor?: string
   children: React.ReactNode
   defaultAttachments?: Array<PromptFieldAttachment>
   defaultValue?: PromptFieldValue
   isGenerating?: boolean
+  isReadOnlyWhileGenerating?: boolean = false
   onAITermsPress?: () => void
   onAddAttachments?: (Array<PromptFieldAttachment>) => void
   onAttachmentsChange?: (Array<PromptFieldAttachment>) => void
   onChange?: (PromptFieldValue) => void
   onStop?: () => void
   onSubmit?: (PromptFieldValue, Array<PromptFieldAttachment>) => void
   size?: 'S' | 'M' = 'M'
   styles?: StyleString
   value?: PromptFieldValue
   variant?: 'balanced' | 'prominent' | 'subtle' = 'balanced'
 }

/@react-spectrum/ai:ExecutionTraceItem

 ExecutionTraceItem {
   aria-describedby?: string
   aria-details?: string
   aria-label?: string
   aria-labelledby?: string
   children: string
   detail?: ReactNode
   detailMaxHeight?: number = 120
   icon?: ReactNode
   id?: string
+  onExpandedChange?: (boolean) => void
   status?: 'pending' | 'failed' | 'success'
   styles?: StyleString
 }

/@react-spectrum/ai:PromptFieldProps

 PromptFieldProps {
   acceptedAttachmentTypes?: Array<string>
   aiDisclaimer?: React.ReactNode
   attachments?: Array<PromptFieldAttachment>
   brandColor?: string
   children: React.ReactNode
   defaultAttachments?: Array<PromptFieldAttachment>
   defaultValue?: PromptFieldValue
   isGenerating?: boolean
+  isReadOnlyWhileGenerating?: boolean = false
   onAITermsPress?: () => void
   onAddAttachments?: (Array<PromptFieldAttachment>) => void
   onAttachmentsChange?: (Array<PromptFieldAttachment>) => void
   onChange?: (PromptFieldValue) => void
   onStop?: () => void
   onSubmit?: (PromptFieldValue, Array<PromptFieldAttachment>) => void
   size?: 'S' | 'M' = 'M'
   styles?: StyleString
   value?: PromptFieldValue
   variant?: 'balanced' | 'prominent' | 'subtle' = 'balanced'
 }

/@react-spectrum/ai:ExecutionTraceItemProps

 ExecutionTraceItemProps {
   aria-describedby?: string
   aria-details?: string
   aria-label?: string
   aria-labelledby?: string
   children: string
   detail?: ReactNode
   detailMaxHeight?: number = 120
   icon?: ReactNode
   id?: string
+  onExpandedChange?: (boolean) => void
   status?: 'pending' | 'failed' | 'success'
   styles?: StyleString
 }

---

@react-spectrum/s2

/@react-spectrum/s2:Menu

 Menu <T> {
   UNSAFE_className?: UnsafeClassName
   UNSAFE_style?: CSSProperties
   aria-describedby?: string
   aria-details?: string
   aria-label?: string
   aria-labelledby?: string
   autoFocus?: boolean | FocusStrategy
   children: ReactNode | (T) => ReactNode
   defaultSelectedKeys?: 'all' | Iterable<Key>
   dependencies?: ReadonlyArray<any>
   disabledKeys?: Iterable<Key>
   disallowEmptySelection?: boolean
   escapeKeyBehavior?: 'clearSelection' | 'none' = 'clearSelection'
   hideLinkOutIcon?: boolean
   id?: string
+  isVirtualized?: boolean = false
   items?: Iterable<T>
   loadingState?: LoadingState
   onAction?: (Key, T) => void
   onClose?: () => void
   onSelectionChange?: (Selection) => void
   selectedKeys?: 'all' | Iterable<Key>
   selectionMode?: SelectionMode
   shouldCloseOnSelect?: boolean
   shouldFocusWrap?: boolean
   size?: 'S' | 'M' | 'L' | 'XL' = 'M'
   slot?: string | null
   styles?: StylesProp
 }

/@react-spectrum/s2:MenuProps

 MenuProps <T> {
   UNSAFE_className?: UnsafeClassName
   UNSAFE_style?: CSSProperties
   aria-describedby?: string
   aria-details?: string
   aria-label?: string
   aria-labelledby?: string
   autoFocus?: boolean | FocusStrategy
   children: ReactNode | (T) => ReactNode
   defaultSelectedKeys?: 'all' | Iterable<Key>
   dependencies?: ReadonlyArray<any>
   disabledKeys?: Iterable<Key>
   disallowEmptySelection?: boolean
   escapeKeyBehavior?: 'clearSelection' | 'none' = 'clearSelection'
   hideLinkOutIcon?: boolean
   id?: string
+  isVirtualized?: boolean = false
   items?: Iterable<T>
   loadingState?: LoadingState
   onAction?: (Key, T) => void
   onClose?: () => void
   onSelectionChange?: (Selection) => void
   selectedKeys?: 'all' | Iterable<Key>
   selectionMode?: SelectionMode
   shouldCloseOnSelect?: boolean
   shouldFocusWrap?: boolean
   size?: 'S' | 'M' | 'L' | 'XL' = 'M'
   slot?: string | null
   styles?: StylesProp
 }

---

[rspbot]

Agent Skills Changes

Modified (10)

• react-aria/agent-skills/index.json $\color{green}{+1}$ $\color{red}{-1}$
• react-aria/agent-skills/react-aria.tar.gz
• react-aria/agent-skills/react-aria/references/components/Separator/useSeparator.md $\color{green}{+1}$ $\color{red}{-1}$
• s2/agent-skills/index.json $\color{green}{+3}$ $\color{red}{-3}$
• s2/agent-skills/migrate-react-spectrum-v3-to-s2.tar.gz
• s2/agent-skills/react-spectrum-s2.tar.gz
• s2/agent-skills/react-spectrum-s2/references/components/Menu.md $\color{green}{+27}$
• s2/agent-skills/react-spectrum-s2/references/guides/ai-components.md $\color{green}{+4}$ $\color{red}{-17}$
• s2/agent-skills/react-spectrum-s2/references/react-aria/components/Separator/useSeparator.md $\color{green}{+1}$ $\color{red}{-1}$
• s2/agent-skills/spectrum-audit.tar.gz

Install

React Spectrum S2:

npx skills add https://d1pzu54gtk2aed.cloudfront.net/pr/d36c3a252727492e8bce34c7af37799709a81ab8/

React Aria:

npx skills add https://d5iwopk28bdhl.cloudfront.net/pr/d36c3a252727492e8bce34c7af37799709a81ab8/

[LFDanLu]

this prop name sucks but I didn't want to call it "supportsSteering" or anything too specific. Not sure a better/shorter name tho

[LFDanLu]

looks big, but this change is just a wrapping div

[LFDanLu]

just a fyi, many of the style changes/updates in here are basically taken from Picker/Combobox.