feat: Support icon placeholders in Attachment, onToggle, and other PromptField updates

[LFDanLu]

more followups for coworker

includes support for icon placeholders in Attachments, onToggle on VoiceInputButton for tracking, exposing PromptField focusable ref so "suggested prompt" buttons can move focus into the PromptField on value injection, and menuWidth to hack around weird popover resizing behavior when opened at edge of screen.

✅ 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

📝 Test Instructions:

Test icon placeholders in Attachment stories
Test the suggested prompt buttons in the "Everything" story for PromptField and make sure focus moves into the field. Also test the menuWidth applies to the field's autocomplete menu and that onToggle triggers on voice input button toggle.

🧢 Your Project:

RSP

[snowystinger]

can't we import from the private path? why do we even have this file? there should be a comment in here explaining why we've copied it, haha

[LFDanLu]

I think we are just mimicking how S2 copies this over from the v3 package to isolate/guard against any possible divergences? Came in from #10095

[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:PromptTokenField

 PromptTokenField {
   children?: (TokenSegment) => React.ReactElement
   completionTrigger?: RegExp
+  menuWidth?: number
   onKeyDown?: (React.KeyboardEvent<HTMLDivElement>) => void
   pixelLoader?: Array<Cell> | Array<Array<Cell>>
   placeholder?: string
   renderCompletions?: (string) => Array<React.ReactNode> | null | Promise<Array<React.ReactNode> | null>

/@react-spectrum/ai:PromptFieldVoiceButton

 PromptFieldVoiceButton {
   isDisabled?: boolean
   lang?: string
   onError?: (VoiceInputErrorCode) => void
+  onToggle?: (boolean) => void
 }

/@react-spectrum/ai:PromptTokenFieldProps

 PromptTokenFieldProps {
   children?: (TokenSegment) => React.ReactElement
   completionTrigger?: RegExp
+  menuWidth?: number
   onKeyDown?: (React.KeyboardEvent<HTMLDivElement>) => void
   pixelLoader?: Array<Cell> | Array<Array<Cell>>
   placeholder?: string
   renderCompletions?: (string) => Array<React.ReactNode> | null | Promise<Array<React.ReactNode> | null>

/@react-spectrum/ai:PromptTokenFieldPopoverProps

 PromptTokenFieldPopoverProps {
   UNSAFE_className?: UnsafeClassName
   UNSAFE_style?: CSSProperties
   aria-describedby?: string
   aria-details?: string
   aria-label?: string
   aria-labelledby?: string
   arrowRef?: RefObject<Element | null>
   boundaryElement?: Element = document.body
   children?: ChildrenOrFunction<PopoverRenderProps>
   containerPadding?: number = 12
   crossOffset?: number = 0
   defaultOpen?: boolean
   filterAnchor?: Position | null
   getTargetRect?: (Element) => DOMRect | null | undefined = target.getBoundingClientRect()
   hideArrow?: boolean = false
   isEntering?: boolean
   isExiting?: boolean
   isFocused?: boolean
   isNonModal?: boolean
   isOpen?: boolean
   items?: Array<React.ReactNode> | null | Promise<Array<React.ReactNode> | null>
   maxHeight?: number
+  menuWidth?: number
   offset?: number = 8
   onBlurWithin?: (FocusEvent) => void
   onFocusWithin?: (FocusEvent) => void
   onFocusWithinChange?: (boolean) => void
   placement?: Placement = 'bottom'
   scrollRef?: RefObject<Element | null> = overlayRef
   shouldFlip?: boolean = true
   size?: 'S' | 'M' | 'L'
   slot?: string | null
   styles?: StyleString
   trigger?: string
   triggerRef?: RefObject<Element | null>
 }

/@react-spectrum/ai:PromptFieldVoiceButtonProps

 PromptFieldVoiceButtonProps {
   isDisabled?: boolean
   lang?: string
   onError?: (VoiceInputErrorCode) => void
+  onToggle?: (boolean) => void
 }

---

[rspbot]

Agent Skills Changes

Modified (2)

• react-aria/skills/react-aria/references/components/Separator/useSeparator.md $\color{green}{+1}$ $\color{red}{-1}$
• s2/skills/react-spectrum-s2/references/react-aria/components/Separator/useSeparator.md $\color{green}{+1}$ $\color{red}{-1}$

Install

React Spectrum S2:

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

React Aria:

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