fix: view transition animations

[snowystinger]

Closes

Set the AI to solving my animation woes. I'm working on reviewing and simplifying now. The general idea was, use animating clip paths for each item during the animation so that they don't appear outside the bounds of the SidePanel or the SideNav while animations are happening.

For testing, you can use Chrome's dev tool animation tab. If you put in on 10% animation, you can easily see if/when any elements overlap. The items should not appear over the content region nor over the account footer in the Animations example in the s2 docs.

✅ 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 AGENTS.md.

📝 Test Instructions:

🧢 Your Project:

[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-aria/utils

/@react-aria/utils:runAfterTransition

 runAfterTransition {
-  fn: QueuedCallback
+  fn: () => void
   returnVal: undefined
 }

/@react-aria/utils:isCtrlKeyPressed

 isCtrlKeyPressed {
-  event: KeyPressEvent
+  e: Event
   returnVal: undefined
 }

/@react-aria/utils:isKeyboardOpen

-isKeyboardOpen {
-  returnVal: undefined
-}

/@react-aria/utils:supportsKeyboard

-supportsKeyboard {
-  returnVal: undefined
-}

/@react-aria/utils:willOpenKeyboard

 willOpenKeyboard {
-  target: Element | null
+  target: Element
   returnVal: undefined
 }

---

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

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

/@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:PromptTokenFieldProps

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

---

@react-spectrum/s2

/@react-spectrum/s2:SidePanel

 SidePanel {
   UNSAFE_className?: UnsafeClassName
   UNSAFE_style?: CSSProperties
   aria-describedby?: string
   aria-details?: string
   aria-label?: string
   aria-labelledby?: string
   children?: ReactNode
   defaultCollapsed?: boolean
   isCollapsed?: boolean
   onCollapsedChange?: (boolean) => void
   styles?: StylesPropWithHeight
+  width?: number = 208
 }

/@react-spectrum/s2:SidePanelProps

 SidePanelProps {
   UNSAFE_className?: UnsafeClassName
   UNSAFE_style?: CSSProperties
   aria-describedby?: string
   aria-details?: string
   aria-label?: string
   aria-labelledby?: string
   children?: ReactNode
   defaultCollapsed?: boolean
   isCollapsed?: boolean
   onCollapsedChange?: (boolean) => void
   styles?: StylesPropWithHeight
+  width?: number = 208
 }

---

[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/SidePanel.md $\color{green}{+16}$ $\color{red}{-9}$
• s2/agent-skills/react-spectrum-s2/references/guides/ai-components.md $\color{green}{+1}$ $\color{red}{-18}$
• 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/b2e186ef3758e0849b7cf68e0be5f3d072668e6d/

React Aria:

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