feat: SideNav collapse behaviour in side panel

[snowystinger]

Closes

Starting S2 SideNav collapsing behaviour when in a Side Panel.

✅ 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:

🧢 Your Project:

[rspbot]

Build successful! 🎉

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

[rspbot]

## API Changes

react-aria-components

/react-aria-components:SideNav

+SideNav <T> {
+  aria-describedby?: string
+  aria-details?: string
+  aria-label?: string
+  aria-labelledby?: string
+  autoFocus?: boolean | FocusStrategy
+  children?: ReactNode | (T) => ReactNode
+  className?: ClassNameOrFunction<SideNavRenderProps> = 'react-aria-SideNav'
+  defaultExpandedKeys?: Iterable<Key>
+  dependencies?: ReadonlyArray<any>
+  disabledKeys?: Iterable<Key>
+  expandedKeys?: Iterable<Key>
+  id?: string
+  items?: Iterable<T>
+  onExpandedChange?: (Set<Key>) => any
+  render?: DOMRenderFunction<keyof React.JSX.IntrinsicElements, SideNavRenderProps>
+  selectedRoute?: string | null
+  slot?: string | null
+  style?: StyleOrFunction<SideNavRenderProps>
+}

/react-aria-components:SideNavItem

+SideNavItem <T extends {}> {
+  aria-label?: string
+  children: ReactNode
+  className?: ClassNameOrFunction<SideNavItemRenderProps> = 'react-aria-SideNavItem'
+  download?: boolean | string
+  hasChildItems?: boolean
+  href?: Href
+  hrefLang?: string
+  id?: Key
+  isDisabled?: boolean
+  onClick?: (MouseEvent<FocusableElement>) => void
+  onHoverChange?: (boolean) => void
+  onHoverEnd?: (HoverEvent) => void
+  onHoverStart?: (HoverEvent) => void
+  onPress?: (PressEvent) => void
+  onPressChange?: (boolean) => void
+  onPressEnd?: (PressEvent) => void
+  onPressStart?: (PressEvent) => void
+  onPressUp?: (PressEvent) => void
+  ping?: string
+  referrerPolicy?: HTMLAttributeReferrerPolicy
+  rel?: string
+  render?: DOMRenderFunction<keyof React.JSX.IntrinsicElements, SideNavItemRenderProps>
+  routerOptions?: RouterOptions
+  style?: StyleOrFunction<SideNavItemRenderProps>
+  target?: HTMLAttributeAnchorTarget
+  textValue: string
+}

/react-aria-components:SideNavItemContent

+SideNavItemContent {
+  children: ChildrenOrFunction<SideNavItemContentRenderProps>
+}

/react-aria-components:SideNavSection

+SideNavSection <T extends {}> {
+  aria-label?: string
+  children?: ReactNode | (T) => ReactElement
+  className?: string
+  dependencies?: ReadonlyArray<any>
+  id?: Key
+  items?: Iterable<T>
+  render?: DOMRenderFunction<keyof React.JSX.IntrinsicElements, undefined>
+  style?: CSSProperties
+}

/react-aria-components:SideNavHeader

+SideNavHeader {
+  children?: ReactNode
+  className?: string
+  id?: string
+  render?: DOMRenderFunction<keyof React.JSX.IntrinsicElements, undefined>
+  style?: CSSProperties
+}

/react-aria-components:SideNavContext

+SideNavContext {
+  UNTYPED
+}

/react-aria-components:SideNavProps

+SideNavProps <T> {
+  aria-describedby?: string
+  aria-details?: string
+  aria-label?: string
+  aria-labelledby?: string
+  autoFocus?: boolean | FocusStrategy
+  children?: ReactNode | (T) => ReactNode
+  className?: ClassNameOrFunction<SideNavRenderProps> = 'react-aria-SideNav'
+  defaultExpandedKeys?: Iterable<Key>
+  dependencies?: ReadonlyArray<any>
+  disabledKeys?: Iterable<Key>
+  expandedKeys?: Iterable<Key>
+  id?: string
+  items?: Iterable<T>
+  onExpandedChange?: (Set<Key>) => any
+  render?: DOMRenderFunction<keyof React.JSX.IntrinsicElements, SideNavRenderProps>
+  selectedRoute?: string | null
+  slot?: string | null
+  style?: StyleOrFunction<SideNavRenderProps>
+}

/react-aria-components:SideNavRenderProps

+SideNavRenderProps {
+  isEmpty: boolean
+  isFocusVisible: boolean
+  isFocused: boolean
+  state: TreeState<unknown>
+}

/react-aria-components:SideNavItemProps

+SideNavItemProps <T = {}> {
+  aria-label?: string
+  children: ReactNode
+  className?: ClassNameOrFunction<SideNavItemRenderProps> = 'react-aria-SideNavItem'
+  download?: boolean | string
+  hasChildItems?: boolean
+  href?: Href
+  hrefLang?: string
+  id?: Key
+  isDisabled?: boolean
+  onClick?: (MouseEvent<FocusableElement>) => void
+  onHoverChange?: (boolean) => void
+  onHoverEnd?: (HoverEvent) => void
+  onHoverStart?: (HoverEvent) => void
+  onPress?: (PressEvent) => void
+  onPressChange?: (boolean) => void
+  onPressEnd?: (PressEvent) => void
+  onPressStart?: (PressEvent) => void
+  onPressUp?: (PressEvent) => void
+  ping?: string
+  referrerPolicy?: HTMLAttributeReferrerPolicy
+  rel?: string
+  render?: DOMRenderFunction<keyof React.JSX.IntrinsicElements, SideNavItemRenderProps>
+  routerOptions?: RouterOptions
+  style?: StyleOrFunction<SideNavItemRenderProps>
+  target?: HTMLAttributeAnchorTarget
+  textValue: string
+}

/react-aria-components:SideNavItemRenderProps

+SideNavItemRenderProps {
+  allowsDragging?: boolean
+  hasChildItems: boolean
+  id: Key
+  isCurrent: boolean
+  isCurrentAncestor: boolean
+  isDisabled: boolean
+  isDragging?: boolean
+  isDropTarget?: boolean
+  isExpanded: boolean
+  isFocusVisible: boolean
+  isFocusVisibleWithin: boolean
+  isFocused: boolean
+  isHovered: boolean
+  isPressed: boolean
+  isSelected: boolean
+  level: number
+  selectionBehavior: SelectionBehavior
+  selectionMode: SelectionMode
+  state: TreeState<unknown>
+}

/react-aria-components:SideNavItemContentProps

+SideNavItemContentProps {
+  children: ChildrenOrFunction<SideNavItemContentRenderProps>
+}

/react-aria-components:SideNavItemContentRenderProps

+SideNavItemContentRenderProps {
+  allowsDragging?: boolean
+  hasChildItems: boolean
+  id: Key
+  isCurrent: boolean
+  isCurrentAncestor: boolean
+  isDisabled: boolean
+  isDragging?: boolean
+  isDropTarget?: boolean
+  isExpanded: boolean
+  isFocusVisible: boolean
+  isFocusVisibleWithin: boolean
+  isFocused: boolean
+  isHovered: boolean
+  isPressed: boolean
+  isSelected: boolean
+  level: number
+  selectionBehavior: SelectionBehavior
+  selectionMode: SelectionMode
+  state: TreeState<unknown>
+}

/react-aria-components:SideNavSectionProps

+SideNavSectionProps <T> {
+  aria-label?: string
+  children?: ReactNode | (T) => ReactElement
+  className?: string
+  dependencies?: ReadonlyArray<any>
+  id?: Key
+  items?: Iterable<T>
+  render?: DOMRenderFunction<keyof React.JSX.IntrinsicElements, undefined>
+  style?: CSSProperties
+}

/react-aria-components:SideNavHeaderProps

+SideNavHeaderProps {
+  children?: ReactNode
+  className?: string
+  id?: string
+  render?: DOMRenderFunction<keyof React.JSX.IntrinsicElements, undefined>
+  style?: CSSProperties
+}

---

[rspbot]

Agent Skills Changes

Added (2)

• react-aria/skills/react-aria/references/components/SideNav.md $\color{green}{+852}$
• s2/skills/react-spectrum-s2/references/react-aria/components/SideNav.md $\color{green}{+852}$

Modified (9)

• react-aria/skills/index.json $\color{green}{+1}$
• react-aria/skills/react-aria/SKILL.md $\color{green}{+1}$ $\color{red}{-1}$
• react-aria/skills/react-aria/references/components/Separator/useSeparator.md $\color{green}{+1}$ $\color{red}{-1}$
• react-aria/skills/react-aria/references/llms.txt $\color{green}{+1}$ $\color{red}{-1}$
• s2/skills/index.json $\color{green}{+1}$
• s2/skills/react-spectrum-s2/references/components/SideNav.md $\color{green}{+2}$ $\color{red}{-2}$
• s2/skills/react-spectrum-s2/references/llms.txt $\color{red}{-1}$
• s2/skills/react-spectrum-s2/references/react-aria/components/Separator/useSeparator.md $\color{green}{+1}$ $\color{red}{-1}$
• s2/skills/react-spectrum-s2/references/react-aria/llms.txt $\color{green}{+1}$ $\color{red}{-1}$

Install

React Spectrum S2:

npx skills add https://d1pzu54gtk2aed.cloudfront.net/pr/7637f1d6393bdf0ce4a9e5a7978f70d7ae11e469/

React Aria:

npx skills add https://d5iwopk28bdhl.cloudfront.net/pr/7637f1d6393bdf0ce4a9e5a7978f70d7ae11e469/