feat: Animated transitions between tab panels

[devongovett]

Adding on to the SelectionIndicator animations we released recently, this enables animating between TabPanels in React Aria Components. TabPanel now has data-entering and data-exiting states, which enable implementation of transitions like cross fades or slides.

In addition, a new <TabPanels> component (plural) provides CSS variables for the width and height of the active tab panel, similar to the ones we added to Disclosure. This allows smoothly transitioning the height when switching between tabs. It accepts the collection API, so for dynamic tabs it replaces the need for the <Collection> component.

[rspbot]

Build successful! 🎉

• View the storybook
• View the S2 storybook
• View the documentation
• View the S2 docs

[rspbot]

## API Changes

react-aria-components

/react-aria-components:TabPanelRenderProps

 TabPanelRenderProps {
+  isEntering: boolean
+  isExiting: boolean
   isFocusVisible: boolean
   isFocused: boolean
   isInert: boolean
   state: TabListState<unknown>

/react-aria-components:TabPanels

+TabPanels <T extends {}> {
+  children?: ReactNode | ({}) => ReactNode
+  className?: string = 'react-aria-TabPanels'
+  dependencies?: ReadonlyArray<any>
+  disabledKeys?: Iterable<Key>
+  items?: Iterable<{}>
+  style?: CSSProperties
+}

/react-aria-components:TabPanelsProps

+TabPanelsProps <T> {
+  children?: ReactNode | (T) => ReactNode
+  className?: string = 'react-aria-TabPanels'
+  dependencies?: ReadonlyArray<any>
+  disabledKeys?: Iterable<Key>
+  items?: Iterable<T>
+  style?: CSSProperties
+}

---

[snowystinger]

Looks really nice on the vanilla example. It appears we can do this animation now without needing the force mount? but I assume you still need that to do a slide transition