chore: Audit and fix v3 and s2 #9191

snowystinger · 2025-11-17T04:05:43Z

Closes

Start fixing v3 vs S2 audit findings

✅ 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 · 2025-11-17T04:33:08Z

Build successful! 🎉

…ample

rspbot · 2025-11-18T19:22:50Z

Build successful! 🎉

rspbot · 2025-11-18T19:22:52Z

## API Changes

============================================================
Unmatched Components Report

S2 components without v3 match (28):

AssetCard
AvatarGroup
CardPreview
CardView
Cell
CloseButton
Collection
CollectionCardPreview
ColorSwatch
ColorSwatchPicker
CustomDialog
EditableCell
FullscreenDialog
ImageCoordinator
LinkButton
MenuTrigger
NotificationBadge
Popover
ProductCard
SegmentedControl
SegmentedControlItem
SelectBox
SelectBoxGroup
Skeleton
SubmenuTrigger
TreeViewLoadMoreItem
UNSTABLE_ToastContainer
UserCard

v3 components without S2 match (11):

@react-spectrum/icon
@react-spectrum/label
@react-spectrum/labeledvalue
@react-spectrum/layout
@react-spectrum/list
@react-spectrum/listbox
@react-spectrum/overlays
@react-spectrum/steplist
@react-spectrum/toast
@react-spectrum/utils
@react-spectrum/well

Successfully matched: 89 components

Comparing Accordion:
v3 API: /tmp/dist/branch-api/@react-spectrum/accordion/dist/api.json
s2 API: /tmp/dist/branch-api/@react-spectrum/s2/dist/api.json
Looking for v3 component: Accordion
Available v3 exports: Disclosure, Accordion, DisclosureTitle, DisclosurePanel, SpectrumAccordionProps, SpectrumDisclosureProps, SpectrumDisclosurePanelProps, SpectrumDisclosureTitleProps
✓ Found v3 component: Accordion (type: component)
Looking for s2 component: Accordion
✓ Found s2 component: Accordion (type: component)

Comparing ActionBar:
v3 API: /tmp/dist/branch-api/@react-spectrum/actionbar/dist/api.json
s2 API: /tmp/dist/branch-api/@react-spectrum/s2/dist/api.json
Looking for v3 component: ActionBar
Available v3 exports: ActionBar, ActionBarContainer, Item, SpectrumActionBarContainerProps, SpectrumActionBarProps
✓ Found v3 component: ActionBar (type: component)
Looking for s2 component: ActionBar
✓ Found s2 component: ActionBar (type: component)

Comparing ActionButton:
v3 API: /tmp/dist/branch-api/@react-spectrum/button/dist/api.json
s2 API: /tmp/dist/branch-api/@react-spectrum/s2/dist/api.json
Looking for v3 component: ActionButton
Available v3 exports: Button, ActionButton, FieldButton, LogicButton, ClearButton, ToggleButton, SpectrumActionButtonProps, SpectrumButtonProps, SpectrumLogicButtonProps, SpectrumToggleButtonProps
✓ Found v3 component: ActionButton (type: component)
Looking for s2 component: ActionButton
✓ Found s2 component: ActionButton (type: component)

Comparing ActionButtonGroup:
v3 API: /tmp/dist/branch-api/@react-spectrum/actiongroup/dist/api.json
s2 API: /tmp/dist/branch-api/@react-spectrum/s2/dist/api.json
Looking for v3 component: ActionGroup
Available v3 exports: ActionGroup, Item, SpectrumActionGroupProps
✓ Found v3 component: ActionGroup (type: component)
Looking for s2 component: ActionButtonGroup
✓ Found s2 component: ActionButtonGroup (type: component)

Comparing ActionMenu:
v3 API: /tmp/dist/branch-api/@react-spectrum/menu/dist/api.json
s2 API: /tmp/dist/branch-api/@react-spectrum/s2/dist/api.json
Looking for v3 component: ActionMenu
Available v3 exports: MenuTrigger, SubmenuTrigger, Menu, ActionMenu, ContextualHelpTrigger, Item, Section, SpectrumActionMenuProps, SpectrumMenuProps, SpectrumMenuTriggerProps, SpectrumMenuDialogTriggerProps, SpectrumSubmenuTriggerProps
✓ Found v3 component: ActionMenu (type: component)
Looking for s2 component: ActionMenu
✓ Found s2 component: ActionMenu (type: component)

Comparing AlertDialog:
v3 API: /tmp/dist/branch-api/@react-spectrum/dialog/dist/api.json
s2 API: /tmp/dist/branch-api/@react-spectrum/s2/dist/api.json
Looking for v3 component: AlertDialog
Available v3 exports: AlertDialog, Dialog, DialogTrigger, DialogContainer, useDialogContainer, SpectrumAlertDialogProps, SpectrumDialogProps, SpectrumDialogContainerProps, SpectrumDialogTriggerProps, DialogContainerValue
✓ Found v3 component: AlertDialog (type: component)
Looking for s2 component: AlertDialog
✓ Found s2 component: AlertDialog (type: component)

Comparing Avatar:
v3 API: /tmp/dist/branch-api/@react-spectrum/avatar/dist/api.json
s2 API: /tmp/dist/branch-api/@react-spectrum/s2/dist/api.json
Looking for v3 component: Avatar
Available v3 exports: Avatar, SpectrumAvatarProps
✓ Found v3 component: Avatar (type: component)
Looking for s2 component: Avatar
✓ Found s2 component: Avatar (type: component)

Comparing Badge:
v3 API: /tmp/dist/branch-api/@react-spectrum/badge/dist/api.json
s2 API: /tmp/dist/branch-api/@react-spectrum/s2/dist/api.json
Looking for v3 component: Badge
Available v3 exports: Badge, SpectrumBadgeProps
✓ Found v3 component: Badge (type: component)
Looking for s2 component: Badge
✓ Found s2 component: Badge (type: component)

Comparing Breadcrumbs:
v3 API: /tmp/dist/branch-api/@react-spectrum/breadcrumbs/dist/api.json
s2 API: /tmp/dist/branch-api/@react-spectrum/s2/dist/api.json
Looking for v3 component: Breadcrumbs
Available v3 exports: Breadcrumbs, Item, SpectrumBreadcrumbsProps
✓ Found v3 component: Breadcrumbs (type: component)
Looking for s2 component: Breadcrumbs
✓ Found s2 component: Breadcrumbs (type: component)

Comparing Breadcrumb:
v3 API: /tmp/dist/branch-api/@react-stately/collections/dist/api.json
s2 API: /tmp/dist/branch-api/@react-spectrum/s2/dist/api.json
Looking for v3 component: Item
Available v3 exports: PartialNode, Item, Section, useCollection, getItemCount, getChildNodes, getFirstItem, getLastItem, getNthItem, compareNodeOrder, CollectionBuilder
✓ Found v3 component: Item (type: function)
Looking for s2 component: Breadcrumb
✓ Found s2 component: Breadcrumb (type: component)

Comparing Button:
v3 API: /tmp/dist/branch-api/@react-spectrum/button/dist/api.json
s2 API: /tmp/dist/branch-api/@react-spectrum/s2/dist/api.json
Looking for v3 component: Button
Available v3 exports: Button, ActionButton, FieldButton, LogicButton, ClearButton, ToggleButton, SpectrumActionButtonProps, SpectrumButtonProps, SpectrumLogicButtonProps, SpectrumToggleButtonProps
✓ Found v3 component: Button (type: component)
Looking for s2 component: Button
✓ Found s2 component: Button (type: component)

Comparing ButtonGroup:
v3 API: /tmp/dist/branch-api/@react-spectrum/buttongroup/dist/api.json
s2 API: /tmp/dist/branch-api/@react-spectrum/s2/dist/api.json
Looking for v3 component: ButtonGroup
Available v3 exports: ButtonGroup, SpectrumButtonGroupProps
✓ Found v3 component: ButtonGroup (type: component)
Looking for s2 component: ButtonGroup
✓ Found s2 component: ButtonGroup (type: component)

Comparing Calendar:
v3 API: /tmp/dist/branch-api/@react-spectrum/calendar/dist/api.json
s2 API: /tmp/dist/branch-api/@react-spectrum/s2/dist/api.json
Looking for v3 component: Calendar
Available v3 exports: Calendar, RangeCalendar, SpectrumCalendarProps, SpectrumRangeCalendarProps
✓ Found v3 component: Calendar (type: component)
Looking for s2 component: Calendar
✓ Found s2 component: Calendar (type: component)

Comparing Card:
v3 API: /tmp/dist/branch-api/@react-spectrum/card/dist/api.json
s2 API: /tmp/dist/branch-api/@react-spectrum/s2/dist/api.json
Looking for v3 component: Card
Available v3 exports: GalleryLayoutOptions, GridLayoutOptions, WaterfallLayoutOptions, CardView, GalleryLayout, GridLayout, WaterfallLayout, Card, SpectrumCardViewProps
✓ Found v3 component: Card (type: component)
Looking for s2 component: Card
✓ Found s2 component: Card (type: component)

Comparing Checkbox:
v3 API: /tmp/dist/branch-api/@react-spectrum/checkbox/dist/api.json
s2 API: /tmp/dist/branch-api/@react-spectrum/s2/dist/api.json
Looking for v3 component: Checkbox
Available v3 exports: Checkbox, CheckboxGroup, SpectrumCheckboxProps, SpectrumCheckboxGroupProps
✓ Found v3 component: Checkbox (type: component)
Looking for s2 component: Checkbox
✓ Found s2 component: Checkbox (type: component)

Comparing CheckboxGroup:
v3 API: /tmp/dist/branch-api/@react-spectrum/checkbox/dist/api.json
s2 API: /tmp/dist/branch-api/@react-spectrum/s2/dist/api.json
Looking for v3 component: CheckboxGroup
Available v3 exports: Checkbox, CheckboxGroup, SpectrumCheckboxProps, SpectrumCheckboxGroupProps
✓ Found v3 component: CheckboxGroup (type: component)
Looking for s2 component: CheckboxGroup
✓ Found s2 component: CheckboxGroup (type: component)

Comparing ColorArea:
v3 API: /tmp/dist/branch-api/@react-spectrum/color/dist/api.json
s2 API: /tmp/dist/branch-api/@react-spectrum/s2/dist/api.json
Looking for v3 component: ColorArea
Available v3 exports: ColorArea, ColorWheel, ColorSlider, ColorField, ColorSwatch, ColorPicker, ColorEditor, ColorSwatchPicker, parseColor, getColorChannels, SpectrumColorAreaProps, SpectrumColorFieldProps, SpectrumColorSliderProps, SpectrumColorWheelProps, SpectrumColorSwatchProps, SpectrumColorPickerProps, SpectrumColorEditorProps, SpectrumColorSwatchPickerProps, Color, ColorSpace, ColorFormat
✓ Found v3 component: ColorArea (type: component)
Looking for s2 component: ColorArea
✓ Found s2 component: ColorArea (type: component)

Comparing ColorField:
v3 API: /tmp/dist/branch-api/@react-spectrum/color/dist/api.json
s2 API: /tmp/dist/branch-api/@react-spectrum/s2/dist/api.json
Looking for v3 component: ColorField
Available v3 exports: ColorArea, ColorWheel, ColorSlider, ColorField, ColorSwatch, ColorPicker, ColorEditor, ColorSwatchPicker, parseColor, getColorChannels, SpectrumColorAreaProps, SpectrumColorFieldProps, SpectrumColorSliderProps, SpectrumColorWheelProps, SpectrumColorSwatchProps, SpectrumColorPickerProps, SpectrumColorEditorProps, SpectrumColorSwatchPickerProps, Color, ColorSpace, ColorFormat
✓ Found v3 component: ColorField (type: component)
Looking for s2 component: ColorField
✓ Found s2 component: ColorField (type: component)

Comparing ColorSlider:
v3 API: /tmp/dist/branch-api/@react-spectrum/color/dist/api.json
s2 API: /tmp/dist/branch-api/@react-spectrum/s2/dist/api.json
Looking for v3 component: ColorSlider
Available v3 exports: ColorArea, ColorWheel, ColorSlider, ColorField, ColorSwatch, ColorPicker, ColorEditor, ColorSwatchPicker, parseColor, getColorChannels, SpectrumColorAreaProps, SpectrumColorFieldProps, SpectrumColorSliderProps, SpectrumColorWheelProps, SpectrumColorSwatchProps, SpectrumColorPickerProps, SpectrumColorEditorProps, SpectrumColorSwatchPickerProps, Color, ColorSpace, ColorFormat
✓ Found v3 component: ColorSlider (type: component)
Looking for s2 component: ColorSlider
✓ Found s2 component: ColorSlider (type: component)

Comparing ColorWheel:
v3 API: /tmp/dist/branch-api/@react-spectrum/color/dist/api.json
s2 API: /tmp/dist/branch-api/@react-spectrum/s2/dist/api.json
Looking for v3 component: ColorWheel
Available v3 exports: ColorArea, ColorWheel, ColorSlider, ColorField, ColorSwatch, ColorPicker, ColorEditor, ColorSwatchPicker, parseColor, getColorChannels, SpectrumColorAreaProps, SpectrumColorFieldProps, SpectrumColorSliderProps, SpectrumColorWheelProps, SpectrumColorSwatchProps, SpectrumColorPickerProps, SpectrumColorEditorProps, SpectrumColorSwatchPickerProps, Color, ColorSpace, ColorFormat
✓ Found v3 component: ColorWheel (type: component)
Looking for s2 component: ColorWheel
✓ Found s2 component: ColorWheel (type: component)

Comparing ComboBox:
v3 API: /tmp/dist/branch-api/@react-spectrum/combobox/dist/api.json
s2 API: /tmp/dist/branch-api/@react-spectrum/s2/dist/api.json
Looking for v3 component: ComboBox
Available v3 exports: ComboBox, Item, Section, SpectrumComboBoxProps
✓ Found v3 component: ComboBox (type: component)
Looking for s2 component: ComboBox
✓ Found s2 component: ComboBox (type: component)

Comparing ComboBoxItem:
v3 API: /tmp/dist/branch-api/@react-stately/collections/dist/api.json
s2 API: /tmp/dist/branch-api/@react-spectrum/s2/dist/api.json
Looking for v3 component: Item
Available v3 exports: PartialNode, Item, Section, useCollection, getItemCount, getChildNodes, getFirstItem, getLastItem, getNthItem, compareNodeOrder, CollectionBuilder
✓ Found v3 component: Item (type: function)
Looking for s2 component: ComboBoxItem
✓ Found s2 component: ComboBoxItem (type: component)

Comparing ComboBoxSection:
v3 API: /tmp/dist/branch-api/@react-stately/collections/dist/api.json
s2 API: /tmp/dist/branch-api/@react-spectrum/s2/dist/api.json
Looking for v3 component: Section
Available v3 exports: PartialNode, Item, Section, useCollection, getItemCount, getChildNodes, getFirstItem, getLastItem, getNthItem, compareNodeOrder, CollectionBuilder
✓ Found v3 component: Section (type: function)
Looking for s2 component: ComboBoxSection
✓ Found s2 component: ComboBoxSection (type: component)

Comparing ContextualHelp:
v3 API: /tmp/dist/branch-api/@react-spectrum/contextualhelp/dist/api.json
s2 API: /tmp/dist/branch-api/@react-spectrum/s2/dist/api.json
Looking for v3 component: ContextualHelp
Available v3 exports: ContextualHelp, SpectrumContextualHelpProps
✓ Found v3 component: ContextualHelp (type: component)
Looking for s2 component: ContextualHelp
✓ Found s2 component: ContextualHelp (type: component)

Comparing DateField:
v3 API: /tmp/dist/branch-api/@react-spectrum/datepicker/dist/api.json
s2 API: /tmp/dist/branch-api/@react-spectrum/s2/dist/api.json
Looking for v3 component: DateField
Available v3 exports: DatePicker, DateRangePicker, TimeField, DateField, SpectrumDateFieldProps, SpectrumDatePickerProps, SpectrumDateRangePickerProps, SpectrumTimeFieldProps
✓ Found v3 component: DateField (type: component)
Looking for s2 component: DateField
✓ Found s2 component: DateField (type: component)

Comparing DatePicker:
v3 API: /tmp/dist/branch-api/@react-spectrum/datepicker/dist/api.json
s2 API: /tmp/dist/branch-api/@react-spectrum/s2/dist/api.json
Looking for v3 component: DatePicker
Available v3 exports: DatePicker, DateRangePicker, TimeField, DateField, SpectrumDateFieldProps, SpectrumDatePickerProps, SpectrumDateRangePickerProps, SpectrumTimeFieldProps
✓ Found v3 component: DatePicker (type: component)
Looking for s2 component: DatePicker
✓ Found s2 component: DatePicker (type: component)

Comparing DateRangePicker:
v3 API: /tmp/dist/branch-api/@react-spectrum/datepicker/dist/api.json
s2 API: /tmp/dist/branch-api/@react-spectrum/s2/dist/api.json
Looking for v3 component: DateRangePicker
Available v3 exports: DatePicker, DateRangePicker, TimeField, DateField, SpectrumDateFieldProps, SpectrumDatePickerProps, SpectrumDateRangePickerProps, SpectrumTimeFieldProps
✓ Found v3 component: DateRangePicker (type: component)
Looking for s2 component: DateRangePicker
✓ Found s2 component: DateRangePicker (type: component)

Comparing DisclosureHeader:
v3 API: /tmp/dist/branch-api/@react-spectrum/accordion/dist/api.json
s2 API: /tmp/dist/branch-api/@react-spectrum/s2/dist/api.json
Looking for v3 component: DisclosureTitle
Available v3 exports: Disclosure, Accordion, DisclosureTitle, DisclosurePanel, SpectrumAccordionProps, SpectrumDisclosureProps, SpectrumDisclosurePanelProps, SpectrumDisclosureTitleProps
✓ Found v3 component: DisclosureTitle (type: component)
Looking for s2 component: DisclosureHeader
✓ Found s2 component: DisclosureHeader (type: component)

Comparing Disclosure:
v3 API: /tmp/dist/branch-api/@react-spectrum/accordion/dist/api.json
s2 API: /tmp/dist/branch-api/@react-spectrum/s2/dist/api.json
Looking for v3 component: Disclosure
Available v3 exports: Disclosure, Accordion, DisclosureTitle, DisclosurePanel, SpectrumAccordionProps, SpectrumDisclosureProps, SpectrumDisclosurePanelProps, SpectrumDisclosureTitleProps
✓ Found v3 component: Disclosure (type: component)
Looking for s2 component: Disclosure
✓ Found s2 component: Disclosure (type: component)

Comparing DisclosurePanel:
v3 API: /tmp/dist/branch-api/@react-spectrum/accordion/dist/api.json
s2 API: /tmp/dist/branch-api/@react-spectrum/s2/dist/api.json
Looking for v3 component: DisclosurePanel
Available v3 exports: Disclosure, Accordion, DisclosureTitle, DisclosurePanel, SpectrumAccordionProps, SpectrumDisclosureProps, SpectrumDisclosurePanelProps, SpectrumDisclosureTitleProps
✓ Found v3 component: DisclosurePanel (type: component)
Looking for s2 component: DisclosurePanel
✓ Found s2 component: DisclosurePanel (type: component)

Comparing DisclosureTitle:
v3 API: /tmp/dist/branch-api/@react-spectrum/accordion/dist/api.json
s2 API: /tmp/dist/branch-api/@react-spectrum/s2/dist/api.json
Looking for v3 component: DisclosureTitle
Available v3 exports: Disclosure, Accordion, DisclosureTitle, DisclosurePanel, SpectrumAccordionProps, SpectrumDisclosureProps, SpectrumDisclosurePanelProps, SpectrumDisclosureTitleProps
✓ Found v3 component: DisclosureTitle (type: component)
Looking for s2 component: DisclosureTitle
✓ Found s2 component: DisclosureTitle (type: component)

Comparing Heading:
v3 API: /tmp/dist/branch-api/@react-spectrum/text/dist/api.json
s2 API: /tmp/dist/branch-api/@react-spectrum/s2/dist/api.json
Looking for v3 component: Heading
Available v3 exports: Text, Heading, Keyboard, HeadingProps, KeyboardProps, TextProps
✓ Found v3 component: Heading (type: component)
Looking for s2 component: Heading
✓ Found s2 component: Heading (type: component)

Comparing Header:
v3 API: /tmp/dist/branch-api/@react-spectrum/view/dist/api.json
s2 API: /tmp/dist/branch-api/@react-spectrum/s2/dist/api.json
Looking for v3 component: Header
Available v3 exports: View, Content, Footer, Header, ContentProps, FooterProps, HeaderProps, ViewProps
✓ Found v3 component: Header (type: component)
Looking for s2 component: Header
✓ Found s2 component: Header (type: component)

Comparing Content:
v3 API: /tmp/dist/branch-api/@react-spectrum/view/dist/api.json
s2 API: /tmp/dist/branch-api/@react-spectrum/s2/dist/api.json
Looking for v3 component: Content
Available v3 exports: View, Content, Footer, Header, ContentProps, FooterProps, HeaderProps, ViewProps
✓ Found v3 component: Content (type: component)
Looking for s2 component: Content
✓ Found s2 component: Content (type: component)

Comparing Footer:
v3 API: /tmp/dist/branch-api/@react-spectrum/view/dist/api.json
s2 API: /tmp/dist/branch-api/@react-spectrum/s2/dist/api.json
Looking for v3 component: Footer
Available v3 exports: View, Content, Footer, Header, ContentProps, FooterProps, HeaderProps, ViewProps
✓ Found v3 component: Footer (type: component)
Looking for s2 component: Footer
✓ Found s2 component: Footer (type: component)

Comparing Text:
v3 API: /tmp/dist/branch-api/@react-spectrum/text/dist/api.json
s2 API: /tmp/dist/branch-api/@react-spectrum/s2/dist/api.json
Looking for v3 component: Text
Available v3 exports: Text, Heading, Keyboard, HeadingProps, KeyboardProps, TextProps
✓ Found v3 component: Text (type: component)
Looking for s2 component: Text
✓ Found s2 component: Text (type: component)

Comparing Keyboard:
v3 API: /tmp/dist/branch-api/@react-spectrum/text/dist/api.json
s2 API: /tmp/dist/branch-api/@react-spectrum/s2/dist/api.json
Looking for v3 component: Keyboard
Available v3 exports: Text, Heading, Keyboard, HeadingProps, KeyboardProps, TextProps
✓ Found v3 component: Keyboard (type: component)
Looking for s2 component: Keyboard
✓ Found s2 component: Keyboard (type: component)

Comparing Dialog:
v3 API: /tmp/dist/branch-api/@react-spectrum/dialog/dist/api.json
s2 API: /tmp/dist/branch-api/@react-spectrum/s2/dist/api.json
Looking for v3 component: Dialog
Available v3 exports: AlertDialog, Dialog, DialogTrigger, DialogContainer, useDialogContainer, SpectrumAlertDialogProps, SpectrumDialogProps, SpectrumDialogContainerProps, SpectrumDialogTriggerProps, DialogContainerValue
✓ Found v3 component: Dialog (type: component)
Looking for s2 component: Dialog
✓ Found s2 component: Dialog (type: component)

Comparing DialogTrigger:
v3 API: /tmp/dist/branch-api/@react-spectrum/dialog/dist/api.json
s2 API: /tmp/dist/branch-api/@react-spectrum/s2/dist/api.json
Looking for v3 component: DialogTrigger
Available v3 exports: AlertDialog, Dialog, DialogTrigger, DialogContainer, useDialogContainer, SpectrumAlertDialogProps, SpectrumDialogProps, SpectrumDialogContainerProps, SpectrumDialogTriggerProps, DialogContainerValue
✓ Found v3 component: DialogTrigger (type: component)
Looking for s2 component: DialogTrigger
✓ Found s2 component: DialogTrigger (type: component)

Comparing DialogContainer:
v3 API: /tmp/dist/branch-api/@react-spectrum/dialog/dist/api.json
s2 API: /tmp/dist/branch-api/@react-spectrum/s2/dist/api.json
Looking for v3 component: DialogContainer
Available v3 exports: AlertDialog, Dialog, DialogTrigger, DialogContainer, useDialogContainer, SpectrumAlertDialogProps, SpectrumDialogProps, SpectrumDialogContainerProps, SpectrumDialogTriggerProps, DialogContainerValue
✓ Found v3 component: DialogContainer (type: component)
Looking for s2 component: DialogContainer
✓ Found s2 component: DialogContainer (type: component)

Comparing Divider:
v3 API: /tmp/dist/branch-api/@react-spectrum/divider/dist/api.json
s2 API: /tmp/dist/branch-api/@react-spectrum/s2/dist/api.json
Looking for v3 component: Divider
Available v3 exports: Divider, SpectrumDividerProps
✓ Found v3 component: Divider (type: component)
Looking for s2 component: Divider
✓ Found s2 component: Divider (type: component)

Comparing DropZone:
v3 API: /tmp/dist/branch-api/@react-spectrum/dropzone/dist/api.json
s2 API: /tmp/dist/branch-api/@react-spectrum/s2/dist/api.json
Looking for v3 component: DropZone
Available v3 exports: DropZone, SpectrumDropZoneProps
✓ Found v3 component: DropZone (type: component)
Looking for s2 component: DropZone
✓ Found s2 component: DropZone (type: component)

Comparing Form:
v3 API: /tmp/dist/branch-api/@react-spectrum/form/dist/api.json
s2 API: /tmp/dist/branch-api/@react-spectrum/s2/dist/api.json
Looking for v3 component: Form
Available v3 exports: useFormProps, Form, SpectrumFormProps
✓ Found v3 component: Form (type: component)
Looking for s2 component: Form
✓ Found s2 component: Form (type: component)

Comparing IllustratedMessage:
v3 API: /tmp/dist/branch-api/@react-spectrum/illustratedmessage/dist/api.json
s2 API: /tmp/dist/branch-api/@react-spectrum/s2/dist/api.json
Looking for v3 component: IllustratedMessage
Available v3 exports: IllustratedMessage, SpectrumIllustratedMessageProps
✓ Found v3 component: IllustratedMessage (type: component)
Looking for s2 component: IllustratedMessage
✓ Found s2 component: IllustratedMessage (type: component)

Comparing Image:
v3 API: /tmp/dist/branch-api/@react-spectrum/image/dist/api.json
s2 API: /tmp/dist/branch-api/@react-spectrum/s2/dist/api.json
Looking for v3 component: Image
Available v3 exports: Image, SpectrumImageProps
✓ Found v3 component: Image (type: component)
Looking for s2 component: Image
✓ Found s2 component: Image (type: component)

Comparing InlineAlert:
v3 API: /tmp/dist/branch-api/@react-spectrum/inlinealert/dist/api.json
s2 API: /tmp/dist/branch-api/@react-spectrum/s2/dist/api.json
Looking for v3 component: InlineAlert
Available v3 exports: InlineAlert, SpectrumInlineAlertProps
✓ Found v3 component: InlineAlert (type: component)
Looking for s2 component: InlineAlert
✓ Found s2 component: InlineAlert (type: component)

Comparing Link:
v3 API: /tmp/dist/branch-api/@react-spectrum/link/dist/api.json
s2 API: /tmp/dist/branch-api/@react-spectrum/s2/dist/api.json
Looking for v3 component: Link
Available v3 exports: Link, SpectrumLinkProps
✓ Found v3 component: Link (type: component)
Looking for s2 component: Link
✓ Found s2 component: Link (type: component)

Comparing MenuItem:
v3 API: /tmp/dist/branch-api/@react-stately/collections/dist/api.json
s2 API: /tmp/dist/branch-api/@react-spectrum/s2/dist/api.json
Looking for v3 component: Item
Available v3 exports: PartialNode, Item, Section, useCollection, getItemCount, getChildNodes, getFirstItem, getLastItem, getNthItem, compareNodeOrder, CollectionBuilder
✓ Found v3 component: Item (type: function)
Looking for s2 component: MenuItem
✓ Found s2 component: MenuItem (type: component)

Comparing Menu:
v3 API: /tmp/dist/branch-api/@react-spectrum/menu/dist/api.json
s2 API: /tmp/dist/branch-api/@react-spectrum/s2/dist/api.json
Looking for v3 component: Menu
Available v3 exports: MenuTrigger, SubmenuTrigger, Menu, ActionMenu, ContextualHelpTrigger, Item, Section, SpectrumActionMenuProps, SpectrumMenuProps, SpectrumMenuTriggerProps, SpectrumMenuDialogTriggerProps, SpectrumSubmenuTriggerProps
✓ Found v3 component: Menu (type: component)
Looking for s2 component: Menu
✓ Found s2 component: Menu (type: component)

Comparing MenuSection:
v3 API: /tmp/dist/branch-api/@react-stately/collections/dist/api.json
s2 API: /tmp/dist/branch-api/@react-spectrum/s2/dist/api.json
Looking for v3 component: Section
Available v3 exports: PartialNode, Item, Section, useCollection, getItemCount, getChildNodes, getFirstItem, getLastItem, getNthItem, compareNodeOrder, CollectionBuilder
✓ Found v3 component: Section (type: function)
Looking for s2 component: MenuSection
✓ Found s2 component: MenuSection (type: component)

Comparing Meter:
v3 API: /tmp/dist/branch-api/@react-spectrum/meter/dist/api.json
s2 API: /tmp/dist/branch-api/@react-spectrum/s2/dist/api.json
Looking for v3 component: Meter
Available v3 exports: Meter, SpectrumMeterProps
✓ Found v3 component: Meter (type: component)
Looking for s2 component: Meter
✓ Found s2 component: Meter (type: component)

Comparing NumberField:
v3 API: /tmp/dist/branch-api/@react-spectrum/numberfield/dist/api.json
s2 API: /tmp/dist/branch-api/@react-spectrum/s2/dist/api.json
Looking for v3 component: NumberField
Available v3 exports: NumberField, SpectrumNumberFieldProps
✓ Found v3 component: NumberField (type: component)
Looking for s2 component: NumberField
✓ Found s2 component: NumberField (type: component)

Comparing Picker:
v3 API: /tmp/dist/branch-api/@react-spectrum/picker/dist/api.json
s2 API: /tmp/dist/branch-api/@react-spectrum/s2/dist/api.json
Looking for v3 component: Picker
Available v3 exports: Picker, Item, Section, SpectrumPickerProps
✓ Found v3 component: Picker (type: component)
Looking for s2 component: Picker
✓ Found s2 component: Picker (type: component)

Comparing PickerItem:
v3 API: /tmp/dist/branch-api/@react-stately/collections/dist/api.json
s2 API: /tmp/dist/branch-api/@react-spectrum/s2/dist/api.json
Looking for v3 component: Item
Available v3 exports: PartialNode, Item, Section, useCollection, getItemCount, getChildNodes, getFirstItem, getLastItem, getNthItem, compareNodeOrder, CollectionBuilder
✓ Found v3 component: Item (type: function)
Looking for s2 component: PickerItem
✓ Found s2 component: PickerItem (type: component)

Comparing PickerSection:
v3 API: /tmp/dist/branch-api/@react-stately/collections/dist/api.json
s2 API: /tmp/dist/branch-api/@react-spectrum/s2/dist/api.json
Looking for v3 component: Section
Available v3 exports: PartialNode, Item, Section, useCollection, getItemCount, getChildNodes, getFirstItem, getLastItem, getNthItem, compareNodeOrder, CollectionBuilder
✓ Found v3 component: Section (type: function)
Looking for s2 component: PickerSection
✓ Found s2 component: PickerSection (type: component)

Comparing ProgressBar:
v3 API: /tmp/dist/branch-api/@react-spectrum/progress/dist/api.json
s2 API: /tmp/dist/branch-api/@react-spectrum/s2/dist/api.json
Looking for v3 component: ProgressBar
Available v3 exports: ProgressBar, ProgressCircle, ProgressBarBase, SpectrumProgressBarProps, SpectrumProgressCircleProps
✓ Found v3 component: ProgressBar (type: component)
Looking for s2 component: ProgressBar
✓ Found s2 component: ProgressBar (type: component)

Comparing ProgressCircle:
v3 API: /tmp/dist/branch-api/@react-spectrum/progress/dist/api.json
s2 API: /tmp/dist/branch-api/@react-spectrum/s2/dist/api.json
Looking for v3 component: ProgressCircle
Available v3 exports: ProgressBar, ProgressCircle, ProgressBarBase, SpectrumProgressBarProps, SpectrumProgressCircleProps
✓ Found v3 component: ProgressCircle (type: component)
Looking for s2 component: ProgressCircle
✓ Found s2 component: ProgressCircle (type: component)

Comparing Provider:
v3 API: /tmp/dist/branch-api/@react-spectrum/provider/dist/api.json
s2 API: /tmp/dist/branch-api/@react-spectrum/s2/dist/api.json
Looking for v3 component: Provider
Available v3 exports: Provider, useProvider, useProviderProps, ProviderContext, ProviderProps
✓ Found v3 component: Provider (type: component)
Looking for s2 component: Provider
✓ Found s2 component: Provider (type: component)

Comparing Radio:
v3 API: /tmp/dist/branch-api/@react-spectrum/radio/dist/api.json
s2 API: /tmp/dist/branch-api/@react-spectrum/s2/dist/api.json
Looking for v3 component: Radio
Available v3 exports: Radio, RadioGroup, SpectrumRadioProps, SpectrumRadioGroupProps
✓ Found v3 component: Radio (type: component)
Looking for s2 component: Radio
✓ Found s2 component: Radio (type: component)

Comparing RadioGroup:
v3 API: /tmp/dist/branch-api/@react-spectrum/radio/dist/api.json
s2 API: /tmp/dist/branch-api/@react-spectrum/s2/dist/api.json
Looking for v3 component: RadioGroup
Available v3 exports: Radio, RadioGroup, SpectrumRadioProps, SpectrumRadioGroupProps
✓ Found v3 component: RadioGroup (type: component)
Looking for s2 component: RadioGroup
✓ Found s2 component: RadioGroup (type: component)

Comparing RangeCalendar:
v3 API: /tmp/dist/branch-api/@react-spectrum/calendar/dist/api.json
s2 API: /tmp/dist/branch-api/@react-spectrum/s2/dist/api.json
Looking for v3 component: RangeCalendar
Available v3 exports: Calendar, RangeCalendar, SpectrumCalendarProps, SpectrumRangeCalendarProps
✓ Found v3 component: RangeCalendar (type: component)
Looking for s2 component: RangeCalendar
✓ Found s2 component: RangeCalendar (type: component)

Comparing RangeSlider:
v3 API: /tmp/dist/branch-api/@react-spectrum/slider/dist/api.json
s2 API: /tmp/dist/branch-api/@react-spectrum/s2/dist/api.json
Looking for v3 component: RangeSlider
Available v3 exports: Slider, RangeSlider, SpectrumRangeSliderProps, SpectrumSliderProps
✓ Found v3 component: RangeSlider (type: component)
Looking for s2 component: RangeSlider
✓ Found s2 component: RangeSlider (type: component)

Comparing SearchField:
v3 API: /tmp/dist/branch-api/@react-spectrum/searchfield/dist/api.json
s2 API: /tmp/dist/branch-api/@react-spectrum/s2/dist/api.json
Looking for v3 component: SearchField
Available v3 exports: SearchField, SpectrumSearchFieldProps
✓ Found v3 component: SearchField (type: component)
Looking for s2 component: SearchField
✓ Found s2 component: SearchField (type: component)

Comparing Slider:
v3 API: /tmp/dist/branch-api/@react-spectrum/slider/dist/api.json
s2 API: /tmp/dist/branch-api/@react-spectrum/s2/dist/api.json
Looking for v3 component: Slider
Available v3 exports: Slider, RangeSlider, SpectrumRangeSliderProps, SpectrumSliderProps
✓ Found v3 component: Slider (type: component)
Looking for s2 component: Slider
✓ Found s2 component: Slider (type: component)

Comparing StatusLight:
v3 API: /tmp/dist/branch-api/@react-spectrum/statuslight/dist/api.json
s2 API: /tmp/dist/branch-api/@react-spectrum/s2/dist/api.json
Looking for v3 component: StatusLight
Available v3 exports: StatusLight, SpectrumStatusLightProps
✓ Found v3 component: StatusLight (type: component)
Looking for s2 component: StatusLight
✓ Found s2 component: StatusLight (type: component)

Comparing Switch:
v3 API: /tmp/dist/branch-api/@react-spectrum/switch/dist/api.json
s2 API: /tmp/dist/branch-api/@react-spectrum/s2/dist/api.json
Looking for v3 component: Switch
Available v3 exports: Switch, SpectrumSwitchProps
✓ Found v3 component: Switch (type: component)
Looking for s2 component: Switch
✓ Found s2 component: Switch (type: component)

Comparing TableView:
v3 API: /tmp/dist/branch-api/@react-spectrum/table/dist/api.json
s2 API: /tmp/dist/branch-api/@react-spectrum/s2/dist/api.json
Looking for v3 component: TableView
Available v3 exports: Column, TableView, TableHeader, TableBody, Section, Row, Cell, SpectrumColumnProps, TableHeaderProps, TableBodyProps, RowProps, CellProps, SpectrumTableProps
✓ Found v3 component: TableView (type: component)
Looking for s2 component: TableView
✓ Found s2 component: TableView (type: component)

Comparing TableHeader:
v3 API: /tmp/dist/branch-api/@react-spectrum/table/dist/api.json
s2 API: /tmp/dist/branch-api/@react-spectrum/s2/dist/api.json
Looking for v3 component: TableHeader
Available v3 exports: Column, TableView, TableHeader, TableBody, Section, Row, Cell, SpectrumColumnProps, TableHeaderProps, TableBodyProps, RowProps, CellProps, SpectrumTableProps
✓ Found v3 component: TableHeader (type: function)
Looking for s2 component: TableHeader
✓ Found s2 component: TableHeader (type: component)

Comparing TableBody:
v3 API: /tmp/dist/branch-api/@react-spectrum/table/dist/api.json
s2 API: /tmp/dist/branch-api/@react-spectrum/s2/dist/api.json
Looking for v3 component: TableBody
Available v3 exports: Column, TableView, TableHeader, TableBody, Section, Row, Cell, SpectrumColumnProps, TableHeaderProps, TableBodyProps, RowProps, CellProps, SpectrumTableProps
✓ Found v3 component: TableBody (type: function)
Looking for s2 component: TableBody
✓ Found s2 component: TableBody (type: component)

Comparing Row:
v3 API: /tmp/dist/branch-api/@react-spectrum/table/dist/api.json
s2 API: /tmp/dist/branch-api/@react-spectrum/s2/dist/api.json
Looking for v3 component: Row
Available v3 exports: Column, TableView, TableHeader, TableBody, Section, Row, Cell, SpectrumColumnProps, TableHeaderProps, TableBodyProps, RowProps, CellProps, SpectrumTableProps
✓ Found v3 component: Row (type: function)
Looking for s2 component: Row
✓ Found s2 component: Row (type: component)

Comparing Column:
v3 API: /tmp/dist/branch-api/@react-spectrum/table/dist/api.json
s2 API: /tmp/dist/branch-api/@react-spectrum/s2/dist/api.json
Looking for v3 component: Column
Available v3 exports: Column, TableView, TableHeader, TableBody, Section, Row, Cell, SpectrumColumnProps, TableHeaderProps, TableBodyProps, RowProps, CellProps, SpectrumTableProps
✓ Found v3 component: Column (type: function)
Looking for s2 component: Column
✓ Found s2 component: Column (type: component)

Comparing Tabs:
v3 API: /tmp/dist/branch-api/@react-spectrum/tabs/dist/api.json
s2 API: /tmp/dist/branch-api/@react-spectrum/s2/dist/api.json
Looking for v3 component: Tabs
Available v3 exports: TabList, TabPanels, Tabs, Item, SpectrumTabsProps, SpectrumTabListProps, SpectrumTabPanelsProps
✓ Found v3 component: Tabs (type: component)
Looking for s2 component: Tabs
✓ Found s2 component: Tabs (type: component)

Comparing TabList:
v3 API: /tmp/dist/branch-api/@react-spectrum/tabs/dist/api.json
s2 API: /tmp/dist/branch-api/@react-spectrum/s2/dist/api.json
Looking for v3 component: TabList
Available v3 exports: TabList, TabPanels, Tabs, Item, SpectrumTabsProps, SpectrumTabListProps, SpectrumTabPanelsProps
✓ Found v3 component: TabList (type: component)
Looking for s2 component: TabList
✓ Found s2 component: TabList (type: component)

Comparing Tab:
v3 API: /tmp/dist/branch-api/@react-spectrum/tabs/dist/api.json
s2 API: /tmp/dist/branch-api/@react-spectrum/s2/dist/api.json
Looking for v3 component: Item
Available v3 exports: TabList, TabPanels, Tabs, Item, SpectrumTabsProps, SpectrumTabListProps, SpectrumTabPanelsProps
✓ Found v3 component: Item (type: function)
Looking for s2 component: Tab
✓ Found s2 component: Tab (type: component)

Comparing TabPanel:
v3 API: /tmp/dist/branch-api/@react-spectrum/tabs/dist/api.json
s2 API: /tmp/dist/branch-api/@react-spectrum/s2/dist/api.json
Looking for v3 component: Item
Available v3 exports: TabList, TabPanels, Tabs, Item, SpectrumTabsProps, SpectrumTabListProps, SpectrumTabPanelsProps
✓ Found v3 component: Item (type: function)
Looking for s2 component: TabPanel
✓ Found s2 component: TabPanel (type: component)

Comparing TagGroup:
v3 API: /tmp/dist/branch-api/@react-spectrum/tag/dist/api.json
s2 API: /tmp/dist/branch-api/@react-spectrum/s2/dist/api.json
Looking for v3 component: TagGroup
Available v3 exports: TagGroup, Item, SpectrumTagGroupProps
✓ Found v3 component: TagGroup (type: component)
Looking for s2 component: TagGroup
✓ Found s2 component: TagGroup (type: component)

Comparing Tag:
v3 API: /tmp/dist/branch-api/@react-stately/collections/dist/api.json
s2 API: /tmp/dist/branch-api/@react-spectrum/s2/dist/api.json
Looking for v3 component: Item
Available v3 exports: PartialNode, Item, Section, useCollection, getItemCount, getChildNodes, getFirstItem, getLastItem, getNthItem, compareNodeOrder, CollectionBuilder
✓ Found v3 component: Item (type: function)
Looking for s2 component: Tag
✓ Found s2 component: Tag (type: component)

Comparing TextArea:
v3 API: /tmp/dist/branch-api/@react-spectrum/textfield/dist/api.json
s2 API: /tmp/dist/branch-api/@react-spectrum/s2/dist/api.json
Looking for v3 component: TextArea
Available v3 exports: TextArea, TextField, TextFieldBase, SpectrumTextFieldProps, SpectrumTextAreaProps
✓ Found v3 component: TextArea (type: component)
Looking for s2 component: TextArea
✓ Found s2 component: TextArea (type: component)

Comparing TextField:
v3 API: /tmp/dist/branch-api/@react-spectrum/textfield/dist/api.json
s2 API: /tmp/dist/branch-api/@react-spectrum/s2/dist/api.json
Looking for v3 component: TextField
Available v3 exports: TextArea, TextField, TextFieldBase, SpectrumTextFieldProps, SpectrumTextAreaProps
✓ Found v3 component: TextField (type: component)
Looking for s2 component: TextField
✓ Found s2 component: TextField (type: component)

Comparing TimeField:
v3 API: /tmp/dist/branch-api/@react-spectrum/datepicker/dist/api.json
s2 API: /tmp/dist/branch-api/@react-spectrum/s2/dist/api.json
Looking for v3 component: TimeField
Available v3 exports: DatePicker, DateRangePicker, TimeField, DateField, SpectrumDateFieldProps, SpectrumDatePickerProps, SpectrumDateRangePickerProps, SpectrumTimeFieldProps
✓ Found v3 component: TimeField (type: component)
Looking for s2 component: TimeField
✓ Found s2 component: TimeField (type: component)

Comparing ToggleButton:
v3 API: /tmp/dist/branch-api/@react-spectrum/button/dist/api.json
s2 API: /tmp/dist/branch-api/@react-spectrum/s2/dist/api.json
Looking for v3 component: ToggleButton
Available v3 exports: Button, ActionButton, FieldButton, LogicButton, ClearButton, ToggleButton, SpectrumActionButtonProps, SpectrumButtonProps, SpectrumLogicButtonProps, SpectrumToggleButtonProps
✓ Found v3 component: ToggleButton (type: component)
Looking for s2 component: ToggleButton
✓ Found s2 component: ToggleButton (type: component)

Comparing ToggleButtonGroup:
v3 API: /tmp/dist/branch-api/@react-spectrum/actiongroup/dist/api.json
s2 API: /tmp/dist/branch-api/@react-spectrum/s2/dist/api.json
Looking for v3 component: ActionGroup
Available v3 exports: ActionGroup, Item, SpectrumActionGroupProps
✓ Found v3 component: ActionGroup (type: component)
Looking for s2 component: ToggleButtonGroup
✓ Found s2 component: ToggleButtonGroup (type: component)

Comparing Tooltip:
v3 API: /tmp/dist/branch-api/@react-spectrum/tooltip/dist/api.json
s2 API: /tmp/dist/branch-api/@react-spectrum/s2/dist/api.json
Looking for v3 component: Tooltip
Available v3 exports: Tooltip, TooltipTrigger, SpectrumTooltipProps, SpectrumTooltipTriggerProps
✓ Found v3 component: Tooltip (type: component)
Looking for s2 component: Tooltip
✓ Found s2 component: Tooltip (type: component)

Comparing TooltipTrigger:
v3 API: /tmp/dist/branch-api/@react-spectrum/tooltip/dist/api.json
s2 API: /tmp/dist/branch-api/@react-spectrum/s2/dist/api.json
Looking for v3 component: TooltipTrigger
Available v3 exports: Tooltip, TooltipTrigger, SpectrumTooltipProps, SpectrumTooltipTriggerProps
✓ Found v3 component: TooltipTrigger (type: component)
Looking for s2 component: TooltipTrigger
✓ Found s2 component: TooltipTrigger (type: component)

Comparing TreeView:
v3 API: /tmp/dist/branch-api/@react-spectrum/tree/dist/api.json
s2 API: /tmp/dist/branch-api/@react-spectrum/s2/dist/api.json
Looking for v3 component: TreeView
Available v3 exports: TreeViewItem, TreeView, TreeViewItemContent, Collection, SpectrumTreeViewProps, SpectrumTreeViewItemProps, SpectrumTreeViewItemContentProps
✓ Found v3 component: TreeView (type: component)
Looking for s2 component: TreeView
✓ Found s2 component: TreeView (type: component)

Comparing TreeViewItem:
v3 API: /tmp/dist/branch-api/@react-spectrum/tree/dist/api.json
s2 API: /tmp/dist/branch-api/@react-spectrum/s2/dist/api.json
Looking for v3 component: TreeViewItem
Available v3 exports: TreeViewItem, TreeView, TreeViewItemContent, Collection, SpectrumTreeViewProps, SpectrumTreeViewItemProps, SpectrumTreeViewItemContentProps
✓ Found v3 component: TreeViewItem (type: component)
Looking for s2 component: TreeViewItem
✓ Found s2 component: TreeViewItem (type: component)

Comparing TreeViewItemContent:
v3 API: /tmp/dist/branch-api/@react-spectrum/tree/dist/api.json
s2 API: /tmp/dist/branch-api/@react-spectrum/s2/dist/api.json
Looking for v3 component: TreeViewItemContent
Available v3 exports: TreeViewItem, TreeView, TreeViewItemContent, Collection, SpectrumTreeViewProps, SpectrumTreeViewItemProps, SpectrumTreeViewItemContentProps
✓ Found v3 component: TreeViewItemContent (type: component)
Looking for s2 component: TreeViewItemContent
✓ Found s2 component: TreeViewItemContent (type: component)

Comparing Autocomplete:
v3 API: /tmp/dist/branch-api/@react-spectrum/autocomplete/dist/api.json
s2 API: /tmp/dist/branch-api/@react-spectrum/s2/dist/api.json
Looking for v3 component: Autocomplete
Available v3 exports: SearchAutocomplete, Item, Section, SpectrumSearchAutocompleteProps
✗ v3 component Autocomplete not found - skipping comparison

Comparing FileTrigger:
v3 API: /tmp/dist/branch-api/@react-spectrum/filetrigger/dist/api.json
s2 API: /tmp/dist/branch-api/@react-spectrum/s2/dist/api.json
Looking for v3 component: FileTrigger
Available v3 exports: FileTrigger, FileTriggerProps
✓ Found v3 component: FileTrigger (type: component)
Looking for s2 component: FileTrigger
✓ Found s2 component: FileTrigger (type: component)

Accordion (v3: @react-spectrum/accordion vs s2)

Accordion

 Accordion {
-  UNSAFE_className?: string
+  UNSAFE_className?: UnsafeClassName
   UNSAFE_style?: CSSProperties
   allowsMultipleExpanded?: boolean
   children: React.ReactNode
   defaultExpandedKeys?: Iterable<Key>
+  density?: 'compact' | 'regular' | 'spacious' = 'regular'
   expandedKeys?: Iterable<Key>
   id?: string
   isDisabled?: boolean
   isQuiet?: boolean
   onExpandedChange?: (Set<Key>) => any
+  size?: 'L' | 'M' | 'S' | 'XL' = 'M'
+  slot?: null | string
+  styles?: StylesPropWithHeight
 }

ActionBar (v3: @react-spectrum/actionbar vs s2)

ActionBar

-ActionBar <T extends {}> {
+ActionBar {
-  UNSAFE_className?: string
+  UNSAFE_className?: UnsafeClassName
   UNSAFE_style?: CSSProperties
-  buttonLabelBehavior?: 'collapse' | 'hide' | 'show' = 'collapse'
-  children: Array<ItemElement<{}>> | ItemElement<{}> | ItemRenderer<{}>
-  disabledKeys?: Iterable<Key>
+  children: ReactNode
   id?: string
   isEmphasized?: boolean
-  items?: Iterable<{}>
-  onAction?: (Key) => void
-  onClearSelection: () => void
-  selectedItemCount: 'all' | number
+  onClearSelection?: () => void
+  scrollRef?: RefObject<HTMLElement | null>
+  selectedItemCount?: 'all' | number
+  slot?: null | string
+  styles?: StylesProp
 }

ActionButton (v3: @react-spectrum/button vs s2)

ActionButton

 ActionButton {
-  UNSAFE_className?: string
+  UNSAFE_className?: UnsafeClassName
   UNSAFE_style?: CSSProperties
   aria-controls?: string
   aria-current?: 'date' | 'false' | 'location' | 'page' | 'step' | 'time' | 'true' | boolean
   aria-describedby?: string
   aria-details?: string
   aria-disabled?: 'false' | 'true' | boolean
   aria-expanded?: 'false' | 'true' | boolean
   aria-haspopup?: 'dialog' | 'false' | 'grid' | 'listbox' | 'menu' | 'tree' | 'true' | boolean
   aria-label?: string
   aria-labelledby?: string
   aria-pressed?: 'false' | 'mixed' | 'true' | boolean
   autoFocus?: boolean
-  children?: ReactNode
+  children: ReactNode
   excludeFromTabOrder?: boolean
   form?: string
   formAction?: string
   formEncType?: string
   formMethod?: string
   formNoValidate?: boolean
   formTarget?: string
   id?: string
   isDisabled?: boolean
+  isPending?: boolean
   isQuiet?: boolean
   name?: string
   onBlur?: (FocusEvent<Target>) => void
   onFocus?: (FocusEvent<Target>) => void
   onFocusChange?: (boolean) => void
   onKeyDown?: (KeyboardEvent) => void
   onKeyUp?: (KeyboardEvent) => void
   onPress?: (PressEvent) => void
   onPressChange?: (boolean) => void
   onPressEnd?: (PressEvent) => void
   onPressStart?: (PressEvent) => void
   onPressUp?: (PressEvent) => void
   preventFocusOnPress?: boolean
-  staticColor?: 'black' | 'white'
+  size?: 'L' | 'M' | 'S' | 'XL' | 'XS' = 'M'
+  slot?: null | string
+  staticColor?: 'auto' | 'black' | 'white'
+  styles?: StylesProp
   type?: 'button' | 'reset' | 'submit' = 'button'
   value?: string
 }

ActionButtonGroup (v3: @react-spectrum/actiongroup vs s2)

ActionButtonGroup

-ActionButtonGroup <T extends {}> {
+ActionButtonGroup {
-  UNSAFE_className?: string
+  UNSAFE_className?: UnsafeClassName
   UNSAFE_style?: CSSProperties
   aria-describedby?: string
   aria-details?: string
   aria-label?: string
   aria-labelledby?: string
-  buttonLabelBehavior?: 'collapse' | 'hide' | 'show' = 'show'
-  children: Array<ItemElement<{}>> | ItemElement<{}> | ItemRenderer<{}>
-  defaultSelectedKeys?: 'all' | Iterable<Key>
+  children: ReactNode
   density?: 'compact' | 'regular' = 'regular'
-  disabledKeys?: Iterable<Key>
-  disallowEmptySelection?: boolean
-  id?: string
   isDisabled?: boolean
-  isEmphasized?: boolean
   isJustified?: boolean
   isQuiet?: boolean
-  items?: Iterable<{}>
-  onAction?: (Key) => void
-  onSelectionChange?: (Selection) => void
-  orientation?: Orientation = 'horizontal'
-  overflowMode?: 'collapse' | 'wrap' = 'wrap'
-  selectedKeys?: 'all' | Iterable<Key>
-  selectionMode?: SelectionMode
-  staticColor?: 'black' | 'white'
-  summaryIcon?: ReactElement
+  orientation?: 'horizontal' | 'vertical' = 'horizontal'
+  size?: 'L' | 'M' | 'S' | 'XL' | 'XS' = 'M'
+  slot?: null | string
+  staticColor?: 'auto' | 'black' | 'white'
+  styles?: StylesPropWithHeight
 }

ActionMenu (v3: @react-spectrum/menu vs s2)

ActionMenu

 ActionMenu <T extends {}> {
-  UNSAFE_className?: string
+  UNSAFE_className?: UnsafeClassName
   UNSAFE_style?: CSSProperties
-  align?: Alignment = 'start'
+  align?: 'end' | 'start' = 'start'
   aria-describedby?: string
   aria-details?: string
   aria-label?: string
   aria-labelledby?: string
   autoFocus?: boolean
-  children: CollectionChildren<{}>
-  closeOnSelect?: boolean = true
+  children: ReactNode | (T) => ReactNode
   defaultOpen?: boolean
   direction?: 'bottom' | 'end' | 'left' | 'right' | 'start' | 'top' = 'bottom'
   disabledKeys?: Iterable<Key>
   id?: string
   isDisabled?: boolean
   isOpen?: boolean
   isQuiet?: boolean
-  items?: Iterable<{}>
+  items?: Iterable<T>
+  menuSize?: 'L' | 'M' | 'S' | 'XL' = 'M'
   onAction?: (Key) => void
   onOpenChange?: (boolean) => void
   shouldFlip?: boolean = true
-  trigger?: MenuTriggerType = 'press'
+  size?: 'L' | 'M' | 'S' | 'XL' | 'XS' = 'M'
+  styles?: StylesProp
 }

AlertDialog (v3: @react-spectrum/dialog vs s2)

AlertDialog

 AlertDialog {
-  UNSAFE_className?: string
+  UNSAFE_className?: UnsafeClassName
   UNSAFE_style?: CSSProperties
   autoFocusButton?: 'cancel' | 'primary' | 'secondary'
   cancelLabel?: string
   children: ReactNode
   id?: string
   isPrimaryActionDisabled?: boolean
   isSecondaryActionDisabled?: boolean
   onCancel?: () => void
   onPrimaryAction?: () => void
   onSecondaryAction?: () => void
   primaryActionLabel: string
   secondaryActionLabel?: string
+  size?: 'L' | 'M' | 'S' = 'M'
   title: string
   variant?: 'confirmation' | 'destructive' | 'error' | 'information' | 'warning'
 }

Avatar (v3: @react-spectrum/avatar vs s2)

Avatar

 Avatar {
-  UNSAFE_className?: string
+  UNSAFE_className?: UnsafeClassName
   UNSAFE_style?: CSSProperties
-  alt?: string = null
+  alt?: string
   id?: string
-  isDisabled?: boolean
-  size?: 'avatar-size-100' | 'avatar-size-200' | 'avatar-size-300' | 'avatar-size-400' | 'avatar-size-50' | 'avatar-size-500' | 'avatar-size-600' | 'avatar-size-700' | 'avatar-size-75' | ({
+  isOverBackground?: boolean
+  size?: ({
   
-} & string) | number = avatar-size-100
-  src: string
+} & number) | number | number | number | number | number | number | number | number | number | number | number | number | number | number = 24
+  slot?: null | string
+  src?: string
+  styles?: StylesPropWithoutWidth
 }

Badge (v3: @react-spectrum/badge vs s2)

Badge

 Badge {
-  UNSAFE_className?: string
+  UNSAFE_className?: UnsafeClassName
   UNSAFE_style?: CSSProperties
   aria-describedby?: string
   aria-details?: string
   aria-label?: string
   aria-labelledby?: string
   children: ReactNode
+  fillStyle?: 'bold' | 'outline' | 'subtle' = 'bold'
   id?: string
-  variant: 'fuchsia' | 'indigo' | 'info' | 'magenta' | 'negative' | 'neutral' | 'positive' | 'purple' | 'seafoam' | 'yellow'
+  overflowMode?: 'truncate' | 'wrap' = 'wrap'
+  size?: 'L' | 'M' | 'S' | 'XL' = 'S'
+  slot?: null | string
+  styles?: StylesProp
+  variant?: 'accent' | 'blue' | 'brown' | 'celery' | 'chartreuse' | 'cinnamon' | 'cyan' | 'fuchsia' | 'gray' | 'green' | 'indigo' | 'informative' | 'magenta' | 'negative' | 'neutral' | 'notice' | 'orange' | 'pink' | 'positive' | 'purple' | 'red' | 'seafoam' | 'silver' | 'turquoise' | 'yellow' = 'neutral'
 }

Breadcrumbs (v3: @react-spectrum/breadcrumbs vs s2)

Breadcrumbs

-Breadcrumbs <T> {
+Breadcrumbs <T extends {}> {
-  UNSAFE_className?: string
+  UNSAFE_className?: UnsafeClassName
   UNSAFE_style?: CSSProperties
   aria-describedby?: string
   aria-details?: string
   aria-label?: string
   aria-labelledby?: string
-  autoFocusCurrent?: boolean
-  children: Array<ReactElement<ItemProps<T>>> | ReactElement<ItemProps<T>>
+  children: ReactNode | ({}) => ReactNode
+  dependencies?: ReadonlyArray<any>
   id?: string
   isDisabled?: boolean
-  isMultiline?: boolean
+  items?: Iterable<T>
   onAction?: (Key) => void
-  showRoot?: boolean
-  size?: 'L' | 'M' | 'S' = 'L'
+  size?: 'L' | 'M' = 'M'
+  slot?: null | string
+  styles?: StylesProp
 }

Breadcrumb (v3: @react-stately/collections vs s2)

Breadcrumb

-Breadcrumb <T> {
+Breadcrumb {
+  aria-describedby?: string
+  aria-details?: string
   aria-label?: string
-  childItems?: Iterable<T>
+  aria-labelledby?: string
   children: ReactNode
   download?: boolean | string
-  hasChildItems?: boolean
   href?: Href
   hrefLang?: string
+  id?: Key
   ping?: string
   referrerPolicy?: HTMLAttributeReferrerPolicy
   rel?: string
   routerOptions?: RouterOptions
   target?: HTMLAttributeAnchorTarget
-  textValue?: string
-  title?: ReactNode
 }

Button (v3: @react-spectrum/button vs s2)

Button

-Button <T extends ElementType = 'button'> {
+Button {
-  UNSAFE_className?: string
+  UNSAFE_className?: UnsafeClassName
   UNSAFE_style?: CSSProperties
   aria-controls?: string
   aria-current?: 'date' | 'false' | 'location' | 'page' | 'step' | 'time' | 'true' | boolean
   aria-describedby?: string
   aria-details?: string
   aria-disabled?: 'false' | 'true' | boolean
   aria-expanded?: 'false' | 'true' | boolean
   aria-haspopup?: 'dialog' | 'false' | 'grid' | 'listbox' | 'menu' | 'tree' | 'true' | boolean
   aria-label?: string
   aria-labelledby?: string
   aria-pressed?: 'false' | 'mixed' | 'true' | boolean
   autoFocus?: boolean
-  children?: ReactNode
-  elementType?: ElementType | JSXElementConstructor<any> = 'button'
+  children: ReactNode
   excludeFromTabOrder?: boolean
+  fillStyle?: 'fill' | 'outline' = 'fill'
   form?: string
   formAction?: string
   formEncType?: string
   formMethod?: string
   formNoValidate?: boolean
   formTarget?: string
-  href?: string
   id?: string
   isDisabled?: boolean
   isPending?: boolean
   name?: string
   onBlur?: (FocusEvent<Target>) => void
   onFocus?: (FocusEvent<Target>) => void
   onFocusChange?: (boolean) => void
   onKeyDown?: (KeyboardEvent) => void
   onKeyUp?: (KeyboardEvent) => void
   onPress?: (PressEvent) => void
   onPressChange?: (boolean) => void
   onPressEnd?: (PressEvent) => void
   onPressStart?: (PressEvent) => void
   onPressUp?: (PressEvent) => void
   preventFocusOnPress?: boolean
-  rel?: string
-  staticColor?: 'black' | 'white'
-  style?: 'fill' | 'outline'
-  target?: string
+  size?: 'L' | 'M' | 'S' | 'XL' = 'M'
+  slot?: null | string
+  staticColor?: 'auto' | 'black' | 'white'
+  styles?: StylesProp
   type?: 'button' | 'reset' | 'submit' = 'button'
   value?: string
-  variant: 'accent' | 'negative' | 'primary' | 'secondary' | LegacyButtonVariant
+  variant?: 'accent' | 'genai' | 'negative' | 'premium' | 'primary' | 'secondary' = 'primary'
 }

ButtonGroup (v3: @react-spectrum/buttongroup vs s2)

ButtonGroup

 ButtonGroup {
-  UNSAFE_className?: string
+  UNSAFE_className?: UnsafeClassName
   UNSAFE_style?: CSSProperties
-  align?: 'center' | Alignment = 'start'
+  align?: 'center' | 'end' | 'start' = 'start'
   children: ReactNode
   id?: string
   isDisabled?: boolean
-  orientation?: Orientation = 'horizontal'
+  orientation?: 'horizontal' | 'vertical' = 'horizontal'
+  size?: 'L' | 'M' | 'S' | 'XL' = 'M'
+  slot?: null | string
+  styles?: StylesProp
 }

Calendar (v3: @react-spectrum/calendar vs s2)

Calendar

changed by:

Calendar

 Calendar <T extends DateValue> {
-  UNSAFE_className?: string
+  UNSAFE_className?: UnsafeClassName
   UNSAFE_style?: CSSProperties
   aria-describedby?: string
   aria-details?: string
   aria-label?: string
   aria-labelledby?: string
   autoFocus?: boolean = false
   createCalendar?: (CalendarIdentifier) => Calendar
   defaultFocusedValue?: DateValue | null
   defaultValue?: DateValue | null
   errorMessage?: ReactNode
   firstDayOfWeek?: 'fri' | 'mon' | 'sat' | 'sun' | 'thu' | 'tue' | 'wed'
   focusedValue?: DateValue | null
   id?: string
   isDateUnavailable?: (DateValue) => boolean
   isDisabled?: boolean = false
   isInvalid?: boolean
   isReadOnly?: boolean = false
   maxValue?: DateValue | null
   minValue?: DateValue | null
   onChange?: (MappedDateValue<DateValue>) => void
   onFocusChange?: (CalendarDate) => void
   pageBehavior?: PageBehavior = visible
   selectionAlignment?: 'center' | 'end' | 'start' = 'center'
+  slot?: null | string
+  styles?: StylesProp
   value?: DateValue | null
   visibleMonths?: number = 1
 }

it changed

Calendar
DatePicker
DateRangePicker
RangeCalendar

Card (v3: @react-spectrum/card vs s2)

Card

 Card {
-  UNTYPED
+  UNSAFE_className?: UnsafeClassName
+  UNSAFE_style?: CSSProperties
+  children: ReactNode | (CardRenderProps) => ReactNode
+  density?: 'compact' | 'regular' | 'spacious' = 'regular'
+  download?: boolean | string
+  href?: Href
+  hrefLang?: string
+  id?: Key
+  isDisabled?: boolean
+  onAction?: () => void
+  onPress?: (PressEvent) => void
+  onPressChange?: (boolean) => void
+  onPressEnd?: (PressEvent) => void
+  onPressStart?: (PressEvent) => void
+  onPressUp?: (PressEvent) => void
+  ping?: string
+  referrerPolicy?: HTMLAttributeReferrerPolicy
+  rel?: string
+  routerOptions?: RouterOptions
+  size?: 'L' | 'M' | 'S' | 'XL' | 'XS' = 'M'
+  styles?: StylesProp
+  target?: HTMLAttributeAnchorTarget
+  textValue?: string
+  value?: T
+  variant?: 'primary' | 'quiet' | 'secondary' | 'tertiary' = 'primary'
 }

Checkbox (v3: @react-spectrum/checkbox vs s2)

Checkbox

 Checkbox {
-  UNSAFE_className?: string
+  UNSAFE_className?: UnsafeClassName
   UNSAFE_style?: CSSProperties
   aria-controls?: string
   aria-describedby?: string
   aria-details?: string
   aria-errormessage?: string
   aria-label?: string
   aria-labelledby?: string
   autoFocus?: boolean
   children?: ReactNode
   defaultSelected?: boolean
   excludeFromTabOrder?: boolean
   form?: string
   id?: string
+  inputRef?: RefObject<HTMLInputElement | null>
   isDisabled?: boolean
   isEmphasized?: boolean
   isIndeterminate?: boolean
   isInvalid?: boolean
   isReadOnly?: boolean
   isRequired?: boolean
   isSelected?: boolean
   name?: string
   onBlur?: (FocusEvent<Target>) => void
   onChange?: (boolean) => void
   onFocus?: (FocusEvent<Target>) => void
   onFocusChange?: (boolean) => void
   onKeyDown?: (KeyboardEvent) => void
   onKeyUp?: (KeyboardEvent) => void
   onPress?: (PressEvent) => void
   onPressChange?: (boolean) => void
   onPressEnd?: (PressEvent) => void
   onPressStart?: (PressEvent) => void
   onPressUp?: (PressEvent) => void
+  size?: 'L' | 'M' | 'S' | 'XL' = 'M'
+  slot?: null | string
+  styles?: StylesProp
   validate?: (boolean) => boolean | null | undefined | ValidationError
-  validationBehavior?: 'aria' | 'native' = 'aria'
+  validationBehavior?: 'aria' | 'native' = 'native'
   value?: string
 }

CheckboxGroup (v3: @react-spectrum/checkbox vs s2)

CheckboxGroup

 CheckboxGroup {
-  UNSAFE_className?: string
+  UNSAFE_className?: UnsafeClassName
   UNSAFE_style?: CSSProperties
   aria-describedby?: string
   aria-details?: string
   aria-errormessage?: string
   aria-label?: string
   aria-labelledby?: string
-  children: Array<ReactElement<CheckboxProps>> | ReactElement<CheckboxProps>
+  children: ReactNode
   contextualHelp?: ReactNode
   defaultValue?: Array<string>
   description?: ReactNode
   errorMessage?: ReactNode | (ValidationResult) => ReactNode
   form?: string
   id?: string
   isDisabled?: boolean
   isEmphasized?: boolean
   isInvalid?: boolean
   isReadOnly?: boolean
   isRequired?: boolean
   label?: ReactNode
   labelAlign?: Alignment = 'start'
   labelPosition?: LabelPosition = 'top'
   name?: string
   necessityIndicator?: NecessityIndicator = 'icon'
   onBlur?: (FocusEvent<Target>) => void
   onChange?: (T) => void
   onFocus?: (FocusEvent<Target>) => void
   onFocusChange?: (boolean) => void
   orientation?: Orientation = 'vertical'
-  showErrorIcon?: boolean
+  size?: 'L' | 'M' | 'S' | 'XL' = 'M'
+  slot?: null | string
+  styles?: StylesProp
   validate?: (Array<string>) => boolean | null | undefined | ValidationError
-  validationBehavior?: 'aria' | 'native' = 'aria'
+  validationBehavior?: 'aria' | 'native' = 'native'
   value?: Array<string>
 }

ColorArea (v3: @react-spectrum/color vs s2)

ColorArea

 ColorArea {
-  UNSAFE_className?: string
+  UNSAFE_className?: UnsafeClassName
   UNSAFE_style?: CSSProperties
   aria-describedby?: string
   aria-details?: string
   aria-label?: string
   aria-labelledby?: string
   colorSpace?: ColorSpace
   defaultValue?: T
   form?: string
   id?: string
   isDisabled?: boolean
   onChange?: (Color) => void
   onChangeEnd?: (Color) => void
-  size?: DimensionValue
+  slot?: null | string
+  styles?: StylesProp
   value?: T
   xChannel?: ColorChannel
   xName?: string
   yChannel?: ColorChannel
 }

ColorField (v3: @react-spectrum/color vs s2)

ColorField

 ColorField {
-  UNSAFE_className?: string
+  UNSAFE_className?: UnsafeClassName
   UNSAFE_style?: CSSProperties
   aria-describedby?: string
   aria-details?: string
   aria-errormessage?: string
   aria-label?: string
   aria-labelledby?: string
   autoFocus?: boolean
   channel?: ColorChannel
   colorSpace?: ColorSpace
   contextualHelp?: ReactNode
   defaultValue?: T
   description?: ReactNode
   errorMessage?: ReactNode | (ValidationResult) => ReactNode
   excludeFromTabOrder?: boolean
   form?: string
   id?: string
   isDisabled?: boolean
-  isQuiet?: boolean
+  isInvalid?: boolean
   isReadOnly?: boolean
   isRequired?: boolean
   isWheelDisabled?: boolean
   label?: ReactNode
   labelAlign?: Alignment = 'start'
   labelPosition?: LabelPosition = 'top'
   name?: string
   necessityIndicator?: NecessityIndicator = 'icon'
   onBeforeInput?: FormEventHandler<HTMLInputElement>
   onBlur?: (FocusEvent<Target>) => void
   onChange?: (Color | null) => void
   onCompositionEnd?: CompositionEventHandler<HTMLInputElement>
   onCompositionStart?: CompositionEventHandler<HTMLInputElement>
   onCompositionUpdate?: CompositionEventHandler<HTMLInputElement>
   onCopy?: ClipboardEventHandler<HTMLInputElement>
   onCut?: ClipboardEventHandler<HTMLInputElement>
   onFocus?: (FocusEvent<Target>) => void
   onFocusChange?: (boolean) => void
   onInput?: FormEventHandler<HTMLInputElement>
   onKeyDown?: (KeyboardEvent) => void
   onKeyUp?: (KeyboardEvent) => void
   onPaste?: ClipboardEventHandler<HTMLInputElement>
   onSelect?: ReactEventHandler<HTMLInputElement>
+  placeholder?: string
+  size?: 'L' | 'M' | 'S' | 'XL' = 'M'
+  slot?: null | string
+  styles?: StylesProp
   validate?: (Color | null) => boolean | null | undefined | ValidationError
-  validationBehavior?: 'aria' | 'native' = 'aria'
-  validationState?: ValidationState
+  validationBehavior?: 'aria' | 'native' = 'native'
   value?: T
 }

ColorSlider (v3: @react-spectrum/color vs s2)

ColorSlider

 ColorSlider {
-  UNSAFE_className?: string
+  UNSAFE_className?: UnsafeClassName
   UNSAFE_style?: CSSProperties
   aria-describedby?: string
   aria-details?: string
   aria-label?: string
   aria-labelledby?: string
   channel: ColorChannel
   colorSpace?: ColorSpace
   contextualHelp?: ReactNode
   defaultValue?: T
   form?: string
   id?: string
   isDisabled?: boolean
-  label?: ReactNode
+  label?: string
   name?: string
   onChange?: (Color) => void
   onChangeEnd?: (Color) => void
   orientation?: Orientation = 'horizontal'
-  showValueLabel?: boolean
+  slot?: null | string
+  styles?: StylesProp
   value?: T
 }

ColorWheel (v3: @react-spectrum/color vs s2)

ColorWheel

 ColorWheel {
-  UNSAFE_className?: string
+  UNSAFE_className?: UnsafeClassName
   UNSAFE_style?: CSSProperties
   aria-describedby?: string
   aria-details?: string
   aria-label?: string
   aria-labelledby?: string
   defaultValue?: Color | string = 'hsl(0, 100%, 50%)'
   form?: string
   id?: string
   isDisabled?: boolean
   name?: string
   onChange?: (Color) => void
   onChangeEnd?: (Color) => void
-  size?: DimensionValue
+  size?: number = 192
+  slot?: null | string
+  styles?: StylesProp
   value?: T
 }

ComboBox (v3: @react-spectrum/combobox vs s2)

ComboBox

 ComboBox <T extends {}> {
-  UNSAFE_className?: string
+  UNSAFE_className?: UnsafeClassName
   UNSAFE_style?: CSSProperties
   align?: 'end' | 'start' = 'start'
   allowsCustomValue?: boolean
   aria-describedby?: string
   aria-details?: string
   aria-label?: string
   aria-labelledby?: string
   autoFocus?: boolean
-  children: CollectionChildren<{}>
+  children: ReactNode | ({}) => ReactNode
   contextualHelp?: ReactNode
   defaultInputValue?: string
-  defaultItems?: Iterable<{}>
+  defaultItems?: Iterable<T>
   defaultSelectedKey?: Key
+  dependencies?: ReadonlyArray<any>
   description?: ReactNode
   direction?: 'bottom' | 'top' = 'bottom'
   disabledKeys?: Iterable<Key>
   errorMessage?: ReactNode | (ValidationResult) => ReactNode
   form?: string
-  formValue?: 'key' | 'text' = 'text'
+  formValue?: 'key' | 'text' = 'key'
   id?: string
   inputValue?: string
   isDisabled?: boolean
-  isQuiet?: boolean
+  isInvalid?: boolean
   isReadOnly?: boolean
   isRequired?: boolean
-  items?: Iterable<{}>
+  items?: Iterable<T>
   label?: ReactNode
   labelAlign?: Alignment = 'start'
   labelPosition?: LabelPosition = 'top'
   loadingState?: LoadingState
   menuTrigger?: MenuTriggerAction = 'input'
-  menuWidth?: DimensionValue
+  menuWidth?: number
   name?: string
   necessityIndicator?: NecessityIndicator = 'icon'
   onBlur?: (FocusEvent<HTMLInputElement>) => void
   onFocus?: (FocusEvent<HTMLInputElement>) => void
   onFocusChange?: (boolean) => void
   onInputChange?: (string) => void
   onKeyDown?: (KeyboardEvent) => void
   onKeyUp?: (KeyboardEvent) => void
   onLoadMore?: () => any
   onOpenChange?: (boolean, MenuTriggerAction) => void
   onSelectionChange?: (Key | null) => void
+  placeholder?: string
   selectedKey?: Key | null
   shouldFlip?: boolean = true
   shouldFocusWrap?: boolean
+  size?: 'L' | 'M' | 'S' | 'XL' = 'M'
+  slot?: null | string
+  styles?: StylesProp
   validate?: (ComboBoxValidationValue) => boolean | null | undefined | ValidationError
-  validationBehavior?: 'aria' | 'native' = 'aria'
-  validationState?: ValidationState
+  validationBehavior?: 'aria' | 'native' = 'native'
 }

ComboBoxItem (v3: @react-stately/collections vs s2)

ComboBoxItem

-ComboBoxItem <T> {
+ComboBoxItem {
+  UNSAFE_className?: UnsafeClassName
+  UNSAFE_style?: CSSProperties
   aria-label?: string
-  childItems?: Iterable<T>
   children: ReactNode
   download?: boolean | string
-  hasChildItems?: boolean
   href?: Href
   hrefLang?: string
+  id?: Key
+  isDisabled?: boolean
+  onAction?: () => 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
   routerOptions?: RouterOptions
+  styles?: StylesProp
   target?: HTMLAttributeAnchorTarget
   textValue?: string
-  title?: ReactNode
+  value?: T
 }

ComboBoxSection (v3: @react-stately/collections vs s2)

ComboBoxSection

-ComboBoxSection <T> {
+ComboBoxSection <T extends {}> {
   aria-label?: string
-  children: Array<ItemElement<T>> | ItemElement<T> | ItemRenderer<T>
+  children?: ReactNode | (T) => ReactElement
+  className?: string
+  dependencies?: ReadonlyArray<any>
+  id?: Key
   items?: Iterable<T>
-  title?: ReactNode
+  style?: CSSProperties
+  value?: T
 }

ContextualHelp (v3: @react-spectrum/contextualhelp vs s2)

ContextualHelp

 ContextualHelp {
-  UNSAFE_className?: string
+  UNSAFE_className?: UnsafeClassName
   UNSAFE_style?: CSSProperties
   aria-describedby?: string
   aria-details?: string
   aria-label?: string
   aria-labelledby?: string
   children: ReactNode
   containerPadding?: number = 12
   crossOffset?: number = 0
   defaultOpen?: boolean
   id?: string
   isOpen?: boolean
-  offset?: number = 0
+  offset?: number = 8
   onOpenChange?: (boolean) => void
   placement?: Placement = 'bottom start'
   shouldFlip?: boolean = true
+  size?: 'S' | 'XS' = 'XS'
+  styles?: StylesProp
   variant?: 'help' | 'info' = 'help'
 }

DateField (v3: @react-spectrum/datepicker vs s2)

DateField

 DateField <T extends DateValue> {
-  UNSAFE_className?: string
+  UNSAFE_className?: UnsafeClassName
   UNSAFE_style?: CSSProperties
   aria-describedby?: string
   aria-details?: string
   aria-label?: string
   aria-labelledby?: string
+  autoComplete?: string
   autoFocus?: boolean
   contextualHelp?: ReactNode
   defaultValue?: DateValue | null
   description?: ReactNode
   errorMessage?: ReactNode | (ValidationResult) => ReactNode
   form?: string
   granularity?: Granularity
   hideTimeZone?: boolean = false
   hourCycle?: number | number
   id?: string
   isDateUnavailable?: (DateValue) => boolean
   isDisabled?: boolean
-  isQuiet?: boolean = false
+  isInvalid?: boolean
   isReadOnly?: boolean
   isRequired?: boolean
   label?: ReactNode
   labelAlign?: Alignment = 'start'
   labelPosition?: LabelPosition = 'top'
   maxValue?: DateValue | null
   minValue?: DateValue | null
   name?: string
   necessityIndicator?: NecessityIndicator = 'icon'
   onBlur?: (FocusEvent<Target>) => void
   onChange?: (MappedDateValue<DateValue> | null) => void
   onFocus?: (FocusEvent<Target>) => void
   onFocusChange?: (boolean) => void
   onKeyDown?: (KeyboardEvent) => void
   onKeyUp?: (KeyboardEvent) => void
   placeholderValue?: DateValue | null
   shouldForceLeadingZeros?: boolean
-  showFormatHelpText?: boolean = false
+  size?: 'L' | 'M' | 'S' | 'XL' = 'M'
+  slot?: null | string
+  styles?: StylesProp
   validate?: (MappedDateValue<DateValue>) => boolean | null | undefined | ValidationError
-  validationBehavior?: 'aria' | 'native' = 'aria'
-  validationState?: ValidationState
+  validationBehavior?: 'aria' | 'native' = 'native'
   value?: DateValue | null
 }

DatePicker (v3: @react-spectrum/datepicker vs s2)

DatePicker

changed by:

Calendar
Calendar

 DatePicker <T extends DateValue> {
-  UNSAFE_className?: string
+  UNSAFE_className?: UnsafeClassName
   UNSAFE_style?: CSSProperties
   aria-describedby?: string
   aria-details?: string
   aria-label?: string
   aria-labelledby?: string
+  autoComplete?: string
   autoFocus?: boolean
   contextualHelp?: ReactNode
   createCalendar?: (CalendarIdentifier) => Calendar
   defaultOpen?: boolean
   defaultValue?: DateValue | null
   description?: ReactNode
   errorMessage?: ReactNode | (ValidationResult) => ReactNode
   firstDayOfWeek?: 'fri' | 'mon' | 'sat' | 'sun' | 'thu' | 'tue' | 'wed'
   form?: string
   granularity?: Granularity
   hideTimeZone?: boolean = false
   hourCycle?: number | number
   id?: string
   isDateUnavailable?: (DateValue) => boolean
   isDisabled?: boolean
+  isInvalid?: boolean
   isOpen?: boolean
-  isQuiet?: boolean = false
   isReadOnly?: boolean
   isRequired?: boolean
   label?: ReactNode
   labelAlign?: Alignment = 'start'
   labelPosition?: LabelPosition = 'top'
   maxValue?: DateValue | null
   maxVisibleMonths?: number = 1
   minValue?: DateValue | null
   name?: string
   necessityIndicator?: NecessityIndicator = 'icon'
   onBlur?: (FocusEvent<Target>) => void
   onChange?: (MappedDateValue<DateValue> | null) => void
   onFocus?: (FocusEvent<Target>) => void
   onFocusChange?: (boolean) => void
   onKeyDown?: (KeyboardEvent) => void
   onKeyUp?: (KeyboardEvent) => void
   onOpenChange?: (boolean) => void
   pageBehavior?: PageBehavior = visible
   placeholderValue?: DateValue | null
+  shouldCloseOnSelect?: boolean | () => boolean = true
   shouldFlip?: boolean = true
   shouldForceLeadingZeros?: boolean
-  showFormatHelpText?: boolean = false
+  size?: 'L' | 'M' | 'S' | 'XL' = 'M'
+  slot?: null | string
+  styles?: StylesProp
   validate?: (MappedDateValue<DateValue>) => boolean | null | undefined | ValidationError
-  validationBehavior?: 'aria' | 'native' = 'aria'
-  validationState?: ValidationState
+  validationBehavior?: 'aria' | 'native' = 'native'
   value?: DateValue | null
 }

DateRangePicker (v3: @react-spectrum/datepicker vs s2)

DateRangePicker

changed by:

Calendar
Calendar

-DateRangePicker <T extends DateValue> {
+DateRangePicker <T extends DateValue> extends RangeCalendarProps {
-  UNSAFE_className?: string
+  UNSAFE_className?: UnsafeClassName
   UNSAFE_style?: CSSProperties
   allowsNonContiguousRanges?: boolean
   aria-describedby?: string
   aria-details?: string
   aria-label?: string
   aria-labelledby?: string
   autoFocus?: boolean
   contextualHelp?: ReactNode
-  createCalendar?: (CalendarIdentifier) => Calendar
   defaultOpen?: boolean
   defaultValue?: null | RangeValue<DateValue>
   description?: ReactNode
   endName?: string
   errorMessage?: ReactNode | (ValidationResult) => ReactNode
   firstDayOfWeek?: 'fri' | 'mon' | 'sat' | 'sun' | 'thu' | 'tue' | 'wed'
   form?: string
   granularity?: Granularity
   hideTimeZone?: boolean = false
   hourCycle?: number | number
   id?: string
   isDateUnavailable?: (DateValue) => boolean
   isDisabled?: boolean
+  isInvalid?: boolean
   isOpen?: boolean
-  isQuiet?: boolean = false
   isReadOnly?: boolean
   isRequired?: boolean
   label?: ReactNode
   labelAlign?: Alignment = 'start'
   labelPosition?: LabelPosition = 'top'
   maxValue?: DateValue | null
   maxVisibleMonths?: number = 1
   minValue?: DateValue | null
   necessityIndicator?: NecessityIndicator = 'icon'
   onBlur?: (FocusEvent<Target>) => void
   onChange?: (null | RangeValue<MappedDateValue<DateValue>>) => void
   onFocus?: (FocusEvent<Target>) => void
   onFocusChange?: (boolean) => void
   onKeyDown?: (KeyboardEvent) => void
   onKeyUp?: (KeyboardEvent) => void
   onOpenChange?: (boolean) => void
   pageBehavior?: PageBehavior = visible
   placeholderValue?: DateValue | null
+  shouldCloseOnSelect?: boolean | () => boolean = true
   shouldFlip?: boolean = true
   shouldForceLeadingZeros?: boolean
-  showFormatHelpText?: boolean = false
+  size?: 'L' | 'M' | 'S' | 'XL' = 'M'
+  slot?: null | string
   startName?: string
+  styles?: StylesProp
   validate?: (RangeValue<MappedDateValue<DateValue>>) => boolean | null | undefined | ValidationError
-  validationBehavior?: 'aria' | 'native' = 'aria'
-  validationState?: ValidationState
+  validationBehavior?: 'aria' | 'native' = 'native'
   value?: null | RangeValue<DateValue>
 }

DisclosureHeader (v3: @react-spectrum/accordion vs s2)

DisclosureHeader

 DisclosureHeader {
-  UNSAFE_className?: string
+  UNSAFE_className?: UnsafeClassName
   UNSAFE_style?: CSSProperties
-  aria-describedby?: string
-  aria-details?: string
-  aria-label?: string
-  aria-labelledby?: string
   children: React.ReactNode
   id?: string
-  level?: number = 3
 }

Disclosure (v3: @react-spectrum/accordion vs s2)

Disclosure

 Disclosure {
-  UNSAFE_className?: string
+  UNSAFE_className?: UnsafeClassName
   UNSAFE_style?: CSSProperties
-  aria-describedby?: string
-  aria-details?: string
-  aria-label?: string
-  aria-labelledby?: string
-  children: React.ReactNode
+  children: ReactNode
   defaultExpanded?: boolean
+  density?: 'compact' | 'regular' | 'spacious' = 'regular'
   id?: Key
   isDisabled?: boolean
   isExpanded?: boolean
   isQuiet?: boolean
   onExpandedChange?: (boolean) => void
+  size?: 'L' | 'M' | 'S' | 'XL' = 'M'
   slot?: null | string
+  styles?: StylesProp
 }

DisclosurePanel (v3: @react-spectrum/accordion vs s2)

DisclosurePanel

 DisclosurePanel {
-  UNSAFE_className?: string
+  UNSAFE_className?: UnsafeClassName
   UNSAFE_style?: CSSProperties
   aria-describedby?: string
   aria-details?: string
   aria-label?: string
   children: React.ReactNode
   id?: string
   label?: ReactNode
   labelElementType?: ElementType = 'label'
   role?: 'group' | 'region' = 'group'
 }

DisclosureTitle (v3: @react-spectrum/accordion vs s2)

DisclosureTitle

 DisclosureTitle {
-  UNSAFE_className?: string
+  UNSAFE_className?: UnsafeClassName
   UNSAFE_style?: CSSProperties
-  aria-describedby?: string
-  aria-details?: string
-  aria-label?: string
-  aria-labelledby?: string
   children: React.ReactNode
   id?: string
   level?: number = 3
 }

Heading (v3: @react-spectrum/text vs s2)

Heading

 Heading {
-  UNSAFE_className?: string
+  UNSAFE_className?: UnsafeClassName
   UNSAFE_style?: CSSProperties
   children: ReactNode
   id?: string
-  level?: number | number | number | number | number | number = 3
-  slot?: string = 'heading'
+  level?: number
+  slot?: null | string
+  styles?: StyleString
 }

Header (v3: @react-spectrum/view vs s2)

Header

 Header {
-  UNSAFE_className?: string
+  UNSAFE_className?: UnsafeClassName
   UNSAFE_style?: CSSProperties
   children: ReactNode
   id?: string
+  slot?: null | string
+  styles?: StyleString
 }

Content (v3: @react-spectrum/view vs s2)

Content

 Content {
-  UNSAFE_className?: string
+  UNSAFE_className?: UnsafeClassName
   UNSAFE_style?: CSSProperties
   children: ReactNode
   id?: string
+  slot?: null | string
+  styles?: StyleString
 }

Footer (v3: @react-spectrum/view vs s2)

Footer

 Footer {
-  UNSAFE_className?: string
+  UNSAFE_className?: UnsafeClassName
   UNSAFE_style?: CSSProperties
   children: ReactNode
   id?: string
+  slot?: null | string
+  styles?: StyleString
 }

Text (v3: @react-spectrum/text vs s2)

Text

 Text {
-  UNSAFE_className?: string
+  UNSAFE_className?: UnsafeClassName
   UNSAFE_style?: CSSProperties
   children: ReactNode
   id?: string
-  slot?: string = 'text'
+  slot?: null | string
+  styles?: StyleString
 }

Keyboard (v3: @react-spectrum/text vs s2)

Keyboard

 Keyboard {
-  UNSAFE_className?: string
+  UNSAFE_className?: UnsafeClassName
   UNSAFE_style?: CSSProperties
   children: ReactNode
   id?: string
-  slot?: string = 'keyboard'
+  slot?: null | string
+  styles?: StyleString
 }

Dialog (v3: @react-spectrum/dialog vs s2)

Dialog

 Dialog {
-  UNSAFE_className?: string
+  UNSAFE_className?: UnsafeClassName
   UNSAFE_style?: CSSProperties
   aria-describedby?: string
   aria-details?: string
   aria-label?: string
   aria-labelledby?: string
-  children: ReactNode
+  children?: ReactNode | (DialogRenderProps) => ReactNode
   id?: string
-  isDismissable?: boolean
-  onDismiss?: () => void
+  isDismissible?: boolean
+  isKeyboardDismissDisabled?: boolean
   role?: 'alertdialog' | 'dialog' = 'dialog'
-  size?: 'L' | 'M' | 'S'
+  size?: 'L' | 'M' | 'S' | 'XL' = 'M'
+  slot?: null | string
+  styles?: StylesProp
 }

DialogTrigger (v3: @react-spectrum/dialog vs s2)

DialogTrigger

 DialogTrigger {
-  children: [ReactElement, ReactElement | SpectrumDialogClose]
-  containerPadding?: number = 12
-  crossOffset?: number = 0
+  children: ReactNode
   defaultOpen?: boolean
-  hideArrow?: boolean
-  isDismissable?: boolean
-  isKeyboardDismissDisabled?: boolean
   isOpen?: boolean
-  mobileType?: 'fullscreen' | 'fullscreenTakeover' | 'modal' | 'tray'
-  offset?: number = 0
   onOpenChange?: (boolean) => void
-  placement?: Placement = 'bottom'
-  shouldFlip?: boolean = true
-  targetRef?: RefObject<HTMLElement | null>
-  type?: 'fullscreen' | 'fullscreenTakeover' | 'modal' | 'popover' | 'tray' = 'modal'
 }

DialogContainer (v3: @react-spectrum/dialog vs s2)

DialogContainer

 DialogContainer {
   children: ReactNode
-  isDismissable?: boolean
-  isKeyboardDismissDisabled?: boolean
   onDismiss: () => void
-  type?: 'fullscreen' | 'fullscreenTakeover' | 'modal' = 'modal'
 }

Divider (v3: @react-spectrum/divider vs s2)

Divider

 Divider {
-  UNSAFE_className?: string
+  UNSAFE_className?: UnsafeClassName
   UNSAFE_style?: CSSProperties
   aria-describedby?: string
   aria-details?: string
   aria-label?: string
   aria-labelledby?: string
   id?: string
-  orientation?: Orientation = 'horizontal'
-  size?: 'L' | 'M' | 'S' = 'L'
-  slot?: string = 'divider'
+  orientation?: 'horizontal' | 'vertical' = 'horizontal'
+  size?: 'L' | 'M' | 'S' = 'M'
+  slot?: null | string
+  staticColor?: 'auto' | 'black' | 'white'
+  styles?: StylesProp
 }

DropZone (v3: @react-spectrum/dropzone vs s2)

DropZone

 DropZone {
-  UNSAFE_className?: string
+  UNSAFE_className?: UnsafeClassName
   UNSAFE_style?: CSSProperties
   aria-describedby?: string
   aria-details?: string
   aria-label?: string
   aria-labelledby?: string
   children: ReactNode
   getDropOperation?: (DragTypes, Array<DropOperation>) => DropOperation
   id?: string
   isFilled?: boolean
   onDrop?: (DropEvent) => void
   onDropActivate?: (DropActivateEvent) => void
   onDropEnter?: (DropEnterEvent) => void
   onDropExit?: (DropExitEvent) => void
   onDropMove?: (DropMoveEvent) => void
-  replaceMessage?: string
+  replaceMessage?: string = 'Drop file to replace'
+  size?: 'L' | 'M' | 'S' = 'M'
   slot?: null | string
+  styles?: StylesPropWithHeight
 }

Form (v3: @react-spectrum/form vs s2)

Form

 Form {
-  UNSAFE_className?: string
+  UNSAFE_className?: UnsafeClassName
   UNSAFE_style?: CSSProperties
   action?: FormHTMLAttributes<HTMLFormElement>['action'] | string
   aria-describedby?: string
   aria-details?: string
   aria-label?: string
   aria-labelledby?: string
   autoCapitalize?: 'characters' | 'none' | 'off' | 'on' | 'sentences' | 'words'
   autoComplete?: 'off' | 'on'
-  children: Array<ReactElement<SpectrumLabelableProps>> | ReactElement<SpectrumLabelableProps>
+  children: ReactNode
   encType?: 'application/x-www-form-urlencoded' | 'multipart/form-data' | 'text/plain'
   id?: string
   isDisabled?: boolean
   isEmphasized?: boolean
-  isQuiet?: boolean
-  isReadOnly?: boolean
   isRequired?: boolean
   labelAlign?: Alignment = 'start'
   labelPosition?: LabelPosition = 'top'
   method?: 'dialog' | 'get' | 'post'
   necessityIndicator?: NecessityIndicator = 'icon'
   onInvalid?: (FormEvent<HTMLFormElement>) => void
   onReset?: (FormEvent<HTMLFormElement>) => void
   onSubmit?: (FormEvent<HTMLFormElement>) => void
   role?: 'presentation' | 'search'
+  size?: 'L' | 'M' | 'S' | 'XL' = 'M'
+  styles?: StylesProp
   target?: '_blank' | '_parent' | '_self' | '_top'
-  validationBehavior?: 'aria' | 'native' = 'aria'
+  validationBehavior?: 'aria' | 'native' = 'native'
   validationErrors?: ValidationErrors
-  validationState?: ValidationState = 'valid'
 }

IllustratedMessage (v3: @react-spectrum/illustratedmessage vs s2)

IllustratedMessage

 IllustratedMessage {
-  UNSAFE_className?: string
+  UNSAFE_className?: UnsafeClassName
   UNSAFE_style?: CSSProperties
   children: ReactNode
   id?: string
+  orientation?: 'horizontal' | 'vertical' = 'vertical'
+  size?: 'L' | 'M' | 'S' = 'M'
+  styles?: StylesPropWithHeight
 }

Image (v3: @react-spectrum/image vs s2)

Image

 Image {
-  UNSAFE_className?: string
+  UNSAFE_className?: UnsafeClassName
   UNSAFE_style?: CSSProperties
   alt?: string
   crossOrigin?: 'anonymous' | 'use-credentials'
-  id?: string
-  objectFit?: any
-  onError?: ReactEventHandler<HTMLImageElement>
-  onLoad?: ReactEventHandler<HTMLImageElement>
-  slot?: string = 'image'
-  src: string
+  decoding?: 'async' | 'auto' | 'sync'
+  fetchPriority?: 'auto' | 'high' | 'low'
+  group?: ImageGroup
+  loading?: 'eager' | 'lazy'
+  referrerPolicy?: HTMLAttributeReferrerPolicy
+  renderError?: () => ReactNode
+  slot?: null | string
+  src?: string
+  styles?: StyleString
 }

InlineAlert (v3: @react-spectrum/inlinealert vs s2)

InlineAlert

 InlineAlert {
-  UNSAFE_className?: string
+  UNSAFE_className?: UnsafeClassName
   UNSAFE_style?: CSSProperties
   autoFocus?: boolean
   children: ReactNode
+  fillStyle?: 'boldFill' | 'border' | 'subtleFill' = border
   id?: string
-  variant?: 'info' | 'negative' | 'neutral' | 'notice' | 'positive' = 'neutral'
+  slot?: null | string
+  styles?: StylesProp
+  variant?: 'informative' | 'negative' | 'neutral' | 'notice' | 'positive' = neutral
 }

Link (v3: @react-spectrum/link vs s2)

Link

 Link {
-  UNSAFE_className?: string
+  UNSAFE_className?: UnsafeClassName
   UNSAFE_style?: CSSProperties
   aria-describedby?: string
   aria-details?: string
   aria-label?: string
   aria-labelledby?: string
   autoFocus?: boolean
   children: ReactNode
   download?: boolean | string
   href?: Href
   hrefLang?: string
   isQuiet?: boolean
+  isStandalone?: boolean
   onBlur?: (FocusEvent<Target>) => void
   onFocus?: (FocusEvent<Target>) => void
   onFocusChange?: (boolean) => void
   onKeyDown?: (KeyboardEvent) => void
   onKeyUp?: (KeyboardEvent) => void
   onPress?: (PressEvent) => void
   onPressChange?: (boolean) => void
   onPressEnd?: (PressEvent) => void
   onPressStart?: (PressEvent) => void
   onPressUp?: (PressEvent) => void
   ping?: string
   referrerPolicy?: HTMLAttributeReferrerPolicy
   rel?: string
   routerOptions?: RouterOptions
+  slot?: null | string
+  staticColor?: 'auto' | 'black' | 'white'
+  styles?: StylesProp
   target?: HTMLAttributeAnchorTarget
-  variant?: 'overBackground' | 'primary' | 'secondary' = 'primary'
+  variant?: 'primary' | 'secondary' = 'primary'
 }

MenuItem (v3: @react-stately/collections vs s2)

MenuItem

-MenuItem <T> {
+MenuItem {
+  UNSAFE_className?: UnsafeClassName
+  UNSAFE_style?: CSSProperties
   aria-label?: string
-  childItems?: Iterable<T>
   children: ReactNode
   download?: boolean | string
-  hasChildItems?: boolean
   href?: Href
   hrefLang?: string
+  id?: Key
+  isDisabled?: boolean
+  onAction?: () => 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
   routerOptions?: RouterOptions
+  styles?: StylesProp
   target?: HTMLAttributeAnchorTarget
   textValue?: string
-  title?: ReactNode
+  value?: T
 }

Menu (v3: @react-spectrum/menu vs s2)

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

MenuSection (v3: @react-stately/collections vs s2)

MenuSection

-MenuSection <T> {
+MenuSection <T extends {}> {
   aria-label?: string
-  children: Array<ItemElement<T>> | ItemElement<T> | ItemRenderer<T>
+  children?: ReactNode
+  defaultSelectedKeys?: 'all' | Iterable<Key>
+  dependencies?: ReadonlyArray<any>
+  disabledKeys?: Iterable<Key>
+  disallowEmptySelection?: boolean
+  id?: Key
   items?: Iterable<T>
-  title?: ReactNode
+  onSelectionChange?: (Selection) => void
+  selectedKeys?: 'all' | Iterable<Key>
+  selectionMode?: SelectionMode
+  value?: T
 }

Meter (v3: @react-spectrum/meter vs s2)

Meter

 Meter {
-  UNSAFE_className?: string
+  UNSAFE_className?: UnsafeClassName
   UNSAFE_style?: CSSProperties
   aria-describedby?: string
   aria-details?: string
   aria-label?: string
   aria-labelledby?: string
   formatOptions?: Intl.NumberFormatOptions = {style: 'percent'}
   id?: string
   label?: ReactNode
   labelPosition?: LabelPosition = 'top'
   maxValue?: number = 100
   minValue?: number = 0
-  showValueLabel?: boolean
-  size?: 'L' | 'S' = 'L'
+  size?: 'L' | 'M' | 'S' | 'XL' = 'M'
+  slot?: null | string
+  staticColor?: 'auto' | 'black' | 'white'
+  styles?: StylesProp
   value?: number = 0
   valueLabel?: ReactNode
-  variant?: 'critical' | 'informative' | 'positive' | 'warning' = 'informative'
+  variant?: 'informative' | 'negative' | 'notice' | 'positive' = 'informative'
 }

NumberField (v3: @react-spectrum/numberfield vs s2)

NumberField

 NumberField {
-  UNSAFE_className?: string
+  UNSAFE_className?: UnsafeClassName
   UNSAFE_style?: CSSProperties
   aria-describedby?: string
   aria-details?: string
   aria-label?: string
   aria-labelledby?: string
   autoFocus?: boolean
   contextualHelp?: ReactNode
   decrementAriaLabel?: string
   defaultValue?: number
   description?: ReactNode
   errorMessage?: ReactNode | (ValidationResult) => ReactNode
   form?: string
   formatOptions?: Intl.NumberFormatOptions
   hideStepper?: boolean = false
   id?: string
   incrementAriaLabel?: string
   isDisabled?: boolean
-  isQuiet?: boolean
+  isInvalid?: boolean
   isReadOnly?: boolean
   isRequired?: boolean
   isWheelDisabled?: boolean
   label?: ReactNode
   labelAlign?: Alignment = 'start'
   labelPosition?: LabelPosition = 'top'
   maxValue?: number
   minValue?: number
   name?: string
   necessityIndicator?: NecessityIndicator = 'icon'
   onBeforeInput?: FormEventHandler<HTMLInputElement>
   onBlur?: (FocusEvent<Target>) => void
   onChange?: (T) => void
   onCompositionEnd?: CompositionEventHandler<HTMLInputElement>
   onCompositionStart?: CompositionEventHandler<HTMLInputElement>
   onCompositionUpdate?: CompositionEventHandler<HTMLInputElement>
   onCopy?: ClipboardEventHandler<HTMLInputElement>
   onCut?: ClipboardEventHandler<HTMLInputElement>
   onFocus?: (FocusEvent<Target>) => void
   onFocusChange?: (boolean) => void
   onInput?: FormEventHandler<HTMLInputElement>
   onKeyDown?: (KeyboardEvent) => void
   onKeyUp?: (KeyboardEvent) => void
   onPaste?: ClipboardEventHandler<HTMLInputElement>
   onSelect?: ReactEventHandler<HTMLInputElement>
+  placeholder?: string
+  size?: 'L' | 'M' | 'S' | 'XL' = 'M'
+  slot?: null | string
   step?: number
+  styles?: StylesProp
   validate?: (number) => boolean | null | undefined | ValidationError
-  validationBehavior?: 'aria' | 'native' = 'aria'
-  validationState?: ValidationState
+  validationBehavior?: 'aria' | 'native' = 'native'
   value?: number
 }

Picker (v3: @react-spectrum/picker vs s2)

Picker

-Picker <T extends {}> {
+Picker <M extends SelectionMode = 'single', T extends {}> {
-  UNSAFE_className?: string
+  UNSAFE_className?: UnsafeClassName
   UNSAFE_style?: CSSProperties
-  align?: Alignment = 'start'
+  align?: 'end' | 'start' = 'start'
   allowsEmptyCollection?: boolean
   aria-describedby?: string
   aria-details?: string
   aria-label?: string
   aria-labelledby?: string
   autoComplete?: string
   autoFocus?: boolean
-  children: CollectionChildren<{}>
+  children: ReactNode | ({}) => ReactNode
   contextualHelp?: ReactNode
   defaultOpen?: boolean
-  defaultSelectedKey?: Key
+  defaultValue?: ValueType<SelectionMode>
+  dependencies?: ReadonlyArray<any>
   description?: ReactNode
   direction?: 'bottom' | 'top' = 'bottom'
   disabledKeys?: Iterable<Key>
   errorMessage?: ReactNode | (ValidationResult) => ReactNode
   excludeFromTabOrder?: boolean
   form?: string
   id?: string
   isDisabled?: boolean
   isInvalid?: boolean
-  isLoading?: boolean
   isOpen?: boolean
-  isQuiet?: boolean
   isRequired?: boolean
-  items?: Iterable<{}>
+  items?: Iterable<T>
   label?: ReactNode
   labelAlign?: Alignment = 'start'
   labelPosition?: LabelPosition = 'top'
-  menuWidth?: DimensionValue
+  loadingState?: LoadingState
+  menuWidth?: number
   name?: string
   necessityIndicator?: NecessityIndicator = 'icon'
   onBlur?: (FocusEvent<Target>) => void
+  onChange?: (T) => void
   onFocus?: (FocusEvent<Target>) => void
   onFocusChange?: (boolean) => void
   onKeyDown?: (KeyboardEvent) => void
   onKeyUp?: (KeyboardEvent) => void
   onLoadMore?: () => any
   onOpenChange?: (boolean) => void
-  onSelectionChange?: (Key | null) => void
-  placeholder?: string
-  selectedKey?: Key | null
+  placeholder?: string = 'Select an item' (localized)
+  selectionMode?: SelectionMode = 'single'
   shouldFlip?: boolean = true
+  size?: 'L' | 'M' | 'S' | 'XL' = 'M'
+  slot?: null | string
+  styles?: StylesProp
   validate?: (ValidationType<SelectionMode>) => boolean | null | undefined | ValidationError
-  validationBehavior?: 'aria' | 'native' = 'aria'
+  validationBehavior?: 'aria' | 'native' = 'native'
+  value?: ValueType<SelectionMode>
 }

PickerItem (v3: @react-stately/collections vs s2)

PickerItem

-PickerItem <T> {
+PickerItem {
+  UNSAFE_className?: UnsafeClassName
+  UNSAFE_style?: CSSProperties
   aria-label?: string
-  childItems?: Iterable<T>
   children: ReactNode
   download?: boolean | string
-  hasChildItems?: boolean
   href?: Href
   hrefLang?: string
+  id?: Key
+  isDisabled?: boolean
+  onAction?: () => 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
   routerOptions?: RouterOptions
+  styles?: StylesProp
   target?: HTMLAttributeAnchorTarget
   textValue?: string
-  title?: ReactNode
+  value?: T
 }

PickerSection (v3: @react-stately/collections vs s2)

PickerSection

-PickerSection <T> {
+PickerSection <T extends {}> {
+  UNSAFE_className?: UnsafeClassName
+  UNSAFE_style?: CSSProperties
   aria-label?: string
-  children: Array<ItemElement<T>> | ItemElement<T> | ItemRenderer<T>
+  children?: ReactNode | (T) => ReactElement
+  dependencies?: ReadonlyArray<any>
+  id?: Key
   items?: Iterable<T>
-  title?: ReactNode
+  styles?: StylesProp
+  value?: T
 }

ProgressBar (v3: @react-spectrum/progress vs s2)

ProgressBar

 ProgressBar {
-  UNSAFE_className?: string
+  UNSAFE_className?: UnsafeClassName
   UNSAFE_style?: CSSProperties
   aria-describedby?: string
   aria-details?: string
   aria-label?: string
   aria-labelledby?: string
   formatOptions?: Intl.NumberFormatOptions = {style: 'percent'}
   id?: string
   isIndeterminate?: boolean
   label?: ReactNode
   labelPosition?: LabelPosition = 'top'
   maxValue?: number = 100
   minValue?: number = 0
-  showValueLabel?: boolean
-  size?: 'L' | 'S' = 'L'
-  staticColor?: 'black' | 'white'
+  size?: 'L' | 'M' | 'S' | 'XL' = 'M'
+  slot?: null | string
+  staticColor?: 'auto' | 'black' | 'white'
+  styles?: StylesProp
   value?: number = 0
   valueLabel?: ReactNode
 }

ProgressCircle (v3: @react-spectrum/progress vs s2)

ProgressCircle

 ProgressCircle {
-  UNSAFE_className?: string
+  UNSAFE_className?: UnsafeClassName
   UNSAFE_style?: CSSProperties
   aria-describedby?: string
   aria-details?: string
   aria-label?: string
   aria-labelledby?: string
   id?: string
   isIndeterminate?: boolean
   maxValue?: number = 100
   minValue?: number = 0
   size?: 'L' | 'M' | 'S' = 'M'
-  staticColor?: 'black' | 'white'
+  slot?: null | string
+  staticColor?: 'auto' | 'black' | 'white'
+  styles?: StylesPropWithHeight
   value?: number = 0
 }

Provider (v3: @react-spectrum/provider vs s2)

Provider

 Provider {
-  UNSAFE_className?: string
+  UNSAFE_className?: UnsafeClassName
   UNSAFE_style?: CSSProperties
-  breakpoints?: Breakpoints = {S:380,M:768,L:1024}
+  background?: 'base' | 'layer-1' | 'layer-2'
   children: ReactNode
   colorScheme?: ColorScheme
-  defaultColorScheme?: ColorScheme = 'light'
+  elementType?: keyof JSX.IntrinsicElements = div
   id?: string
-  isDisabled?: boolean
-  isEmphasized?: boolean
-  isQuiet?: boolean
-  isReadOnly?: boolean
-  isRequired?: boolean
   locale?: string = 'en-US'
   router?: Router
-  scale?: Scale
-  theme?: Theme
-  validationState?: ValidationState
+  styles?: StyleString
 }

Radio (v3: @react-spectrum/radio vs s2)

Radio

 Radio {
-  UNSAFE_className?: string
+  UNSAFE_className?: UnsafeClassName
   UNSAFE_style?: CSSProperties
   aria-describedby?: string
   aria-details?: string
   aria-label?: string
   aria-labelledby?: string
   autoFocus?: boolean
   children?: ReactNode
   id?: string
+  inputRef?: RefObject<HTMLInputElement | null>
   isDisabled?: boolean
   onBlur?: (FocusEvent<Target>) => void
   onFocus?: (FocusEvent<Target>) => void
   onFocusChange?: (boolean) => void
   onKeyDown?: (KeyboardEvent) => void
   onKeyUp?: (KeyboardEvent) => void
   onPress?: (PressEvent) => void
   onPressChange?: (boolean) => void
   onPressEnd?: (PressEvent) => void
   onPressStart?: (PressEvent) => void
   onPressUp?: (PressEvent) => void
+  slot?: null | string
+  styles?: StylesProp
   value: string
 }

RadioGroup (v3: @react-spectrum/radio vs s2)

RadioGroup

 RadioGroup {
-  UNSAFE_className?: string
+  UNSAFE_className?: UnsafeClassName
   UNSAFE_style?: CSSProperties
   aria-describedby?: string
   aria-details?: string
   aria-errormessage?: string
   aria-label?: string
   aria-labelledby?: string
-  children: Array<ReactElement<RadioProps>> | ReactElement<RadioProps>
+  children: ReactNode
   contextualHelp?: ReactNode
   defaultValue?: null | string
   description?: ReactNode
   errorMessage?: ReactNode | (ValidationResult) => ReactNode
   form?: string
   id?: string
   isDisabled?: boolean
   isEmphasized?: boolean
   isInvalid?: boolean
   isReadOnly?: boolean
   isRequired?: boolean
   label?: ReactNode
   labelAlign?: Alignment = 'start'
   labelPosition?: LabelPosition = 'top'
   name?: string
   necessityIndicator?: NecessityIndicator = 'icon'
   onBlur?: (FocusEvent<Target>) => void
   onChange?: (string) => void
   onFocus?: (FocusEvent<Target>) => void
   onFocusChange?: (boolean) => void
   orientation?: Orientation = 'vertical'
-  showErrorIcon?: boolean
+  size?: 'L' | 'M' | 'S' | 'XL' = 'M'
+  slot?: null | string
+  styles?: StylesProp
   validate?: (null | string) => boolean | null | undefined | ValidationError
-  validationBehavior?: 'aria' | 'native' = 'aria'
+  validationBehavior?: 'aria' | 'native' = 'native'
   value?: null | string
 }

RangeCalendar (v3: @react-spectrum/calendar vs s2)

RangeCalendar

changed by:

Calendar
Calendar

 RangeCalendar <T extends DateValue> {
-  UNSAFE_className?: string
+  UNSAFE_className?: UnsafeClassName
   UNSAFE_style?: CSSProperties
   allowsNonContiguousRanges?: boolean
   aria-describedby?: string
   aria-details?: string
   aria-label?: string
   aria-labelledby?: string
   autoFocus?: boolean = false
   createCalendar?: (CalendarIdentifier) => Calendar
   defaultFocusedValue?: DateValue | null
   defaultValue?: null | RangeValue<DateValue>
   errorMessage?: ReactNode
   firstDayOfWeek?: 'fri' | 'mon' | 'sat' | 'sun' | 'thu' | 'tue' | 'wed'
   focusedValue?: DateValue | null
   id?: string
   isDateUnavailable?: (DateValue) => boolean
   isDisabled?: boolean = false
   isInvalid?: boolean
   isReadOnly?: boolean = false
   maxValue?: DateValue | null
   minValue?: DateValue | null
   onChange?: (RangeValue<MappedDateValue<DateValue>>) => void
   onFocusChange?: (CalendarDate) => void
   pageBehavior?: PageBehavior = visible
   selectionAlignment?: 'center' | 'end' | 'start' = 'center'
+  slot?: null | string
+  styles?: StylesProp
   value?: null | RangeValue<DateValue>
   visibleMonths?: number = 1
 }

RangeSlider (v3: @react-spectrum/slider vs s2)

RangeSlider

 RangeSlider {
-  UNSAFE_className?: string
+  UNSAFE_className?: UnsafeClassName
   UNSAFE_style?: CSSProperties
   aria-describedby?: string
   aria-details?: string
   aria-label?: string
   aria-labelledby?: string
   contextualHelp?: ReactNode
-  defaultValue?: RangeValue<number>
+  defaultValue?: T
   endName?: string
   form?: string
   formatOptions?: Intl.NumberFormatOptions
-  getValueLabel?: (RangeValue<number>) => string
   id?: string
   isDisabled?: boolean
+  isEmphasized?: boolean
   label?: ReactNode
+  labelAlign?: Alignment = 'start'
   labelPosition?: LabelPosition = 'top'
   maxValue?: number = 100
   minValue?: number = 0
   onChange?: (T) => void
-  onChangeEnd?: (RangeValue<number>) => void
-  orientation?: Orientation = 'horizontal'
-  showValueLabel?: boolean
+  onChangeEnd?: (T) => void
+  size?: 'L' | 'M' | 'S' | 'XL' = 'M'
+  slot?: null | string
   startName?: string
   step?: number = 1
-  value?: RangeValue<number>
+  styles?: StylesProp
+  thumbStyle?: 'default' | 'precise' = 'default'
+  trackStyle?: 'thick' | 'thin' = 'thin'
+  value?: T
 }

SearchField (v3: @react-spectrum/searchfield vs s2)

SearchField

 SearchField {
-  UNSAFE_className?: string
+  UNSAFE_className?: UnsafeClassName
   UNSAFE_style?: CSSProperties
   aria-activedescendant?: string
   aria-autocomplete?: 'both' | 'inline' | 'list' | 'none'
   aria-controls?: string
   aria-describedby?: string
   aria-details?: string
   aria-errormessage?: string
   aria-haspopup?: 'dialog' | 'false' | 'grid' | 'listbox' | 'menu' | 'tree' | 'true' | boolean
   aria-label?: string
   aria-labelledby?: string
   autoComplete?: string
   autoCorrect?: string
   autoFocus?: boolean
   contextualHelp?: ReactNode
   defaultValue?: string
   description?: ReactNode
   enterKeyHint?: 'done' | 'enter' | 'go' | 'next' | 'previous' | 'search' | 'send'
   errorMessage?: ReactNode | (ValidationResult) => ReactNode
   excludeFromTabOrder?: boolean
   form?: string
-  icon?: null | ReactElement
   id?: string
   inputMode?: 'decimal' | 'email' | 'none' | 'numeric' | 'search' | 'tel' | 'text' | 'url'
   isDisabled?: boolean
-  isQuiet?: boolean
+  isInvalid?: boolean
   isReadOnly?: boolean
   isRequired?: boolean
   label?: ReactNode
   labelAlign?: Alignment = 'start'
   labelPosition?: LabelPosition = 'top'
   maxLength?: number
   minLength?: number
   name?: string
   necessityIndicator?: NecessityIndicator = 'icon'
   onBeforeInput?: FormEventHandler<HTMLInputElement>
   onBlur?: (FocusEvent<T>) => void
   onChange?: (T) => void
   onClear?: () => void
   onCompositionEnd?: CompositionEventHandler<HTMLInputElement>
   onCompositionStart?: CompositionEventHandler<HTMLInputElement>
   onCompositionUpdate?: CompositionEventHandler<HTMLInputElement>
   onCopy?: ClipboardEventHandler<HTMLInputElement>
   onCut?: ClipboardEventHandler<HTMLInputElement>
   onFocus?: (FocusEvent<T>) => void
   onFocusChange?: (boolean) => void
   onInput?: FormEventHandler<HTMLInputElement>
   onKeyDown?: (KeyboardEvent) => void
   onKeyUp?: (KeyboardEvent) => void
   onPaste?: ClipboardEventHandler<HTMLInputElement>
   onSelect?: ReactEventHandler<HTMLInputElement>
   onSubmit?: (string) => void
   pattern?: string
+  placeholder?: string
+  size?: 'L' | 'M' | 'S' | 'XL' = 'M'
+  slot?: null | string
   spellCheck?: string
+  styles?: StylesProp
   type?: 'email' | 'password' | 'search' | 'tel' | 'text' | 'url' | ({
   
 } & string) = 'search'
   validate?: (string) => boolean | null | undefined | ValidationError
-  validationBehavior?: 'aria' | 'native' = 'aria'
-  validationState?: ValidationState
+  validationBehavior?: 'aria' | 'native' = 'native'
   value?: string
 }

Slider (v3: @react-spectrum/slider vs s2)

Slider

 Slider {
-  UNSAFE_className?: string
+  UNSAFE_className?: UnsafeClassName
   UNSAFE_style?: CSSProperties
   aria-describedby?: string
   aria-details?: string
   aria-label?: string
   aria-labelledby?: string
   contextualHelp?: ReactNode
-  defaultValue?: number
+  defaultValue?: T
   fillOffset?: number
   form?: string
   formatOptions?: Intl.NumberFormatOptions
-  getValueLabel?: (number) => string
   id?: string
   isDisabled?: boolean
-  isFilled?: boolean
+  isEmphasized?: boolean
   label?: ReactNode
+  labelAlign?: Alignment = 'start'
   labelPosition?: LabelPosition = 'top'
   maxValue?: number = 100
   minValue?: number = 0
   name?: string
   onChange?: (T) => void
-  onChangeEnd?: (number) => void
-  orientation?: Orientation = 'horizontal'
-  showValueLabel?: boolean
+  onChangeEnd?: (T) => void
+  size?: 'L' | 'M' | 'S' | 'XL' = 'M'
+  slot?: null | string
   step?: number = 1
-  trackGradient?: Array<string>
-  value?: number
+  styles?: StylesProp
+  thumbStyle?: 'default' | 'precise' = 'default'
+  trackStyle?: 'thick' | 'thin' = 'thin'
+  value?: T
 }

StatusLight (v3: @react-spectrum/statuslight vs s2)

StatusLight

 StatusLight {
-  UNSAFE_className?: string
+  UNSAFE_className?: UnsafeClassName
   UNSAFE_style?: CSSProperties
   aria-describedby?: string
   aria-details?: string
   aria-label?: string
   aria-labelledby?: string
   children?: ReactNode
   id?: string
-  isDisabled?: boolean
   role?: 'status'
-  variant: 'celery' | 'chartreuse' | 'fuchsia' | 'indigo' | 'info' | 'magenta' | 'negative' | 'neutral' | 'notice' | 'positive' | 'purple' | 'seafoam' | 'yellow'
+  size?: 'L' | 'M' | 'S' | 'XL' = 'M'
+  slot?: null | string
+  styles?: StylesProp
+  variant: 'brown' | 'celery' | 'chartreuse' | 'cinnamon' | 'cyan' | 'fuchsia' | 'indigo' | 'informative' | 'magenta' | 'negative' | 'neutral' | 'notice' | 'pink' | 'positive' | 'purple' | 'seafoam' | 'silver' | 'turquoise' | 'yellow' = 'neutral'
 }

Switch (v3: @react-spectrum/switch vs s2)

Switch

 Switch {
-  UNSAFE_className?: string
+  UNSAFE_className?: UnsafeClassName
   UNSAFE_style?: CSSProperties
   aria-controls?: string
   aria-describedby?: string
   aria-details?: string
   aria-label?: string
   aria-labelledby?: string
   autoFocus?: boolean
   children?: ReactNode
   defaultSelected?: boolean
   excludeFromTabOrder?: boolean
   form?: string
   id?: string
+  inputRef?: RefObject<HTMLInputElement | null>
   isDisabled?: boolean
   isEmphasized?: boolean
   isReadOnly?: boolean
   isSelected?: boolean
   name?: string
   onBlur?: (FocusEvent<Target>) => void
   onChange?: (boolean) => void
   onFocus?: (FocusEvent<Target>) => void
   onFocusChange?: (boolean) => void
   onKeyDown?: (KeyboardEvent) => void
   onKeyUp?: (KeyboardEvent) => void
+  size?: 'L' | 'M' | 'S' | 'XL' = 'M'
+  slot?: null | string
+  styles?: StylesProp
   value?: string
 }

TableView (v3: @react-spectrum/table vs s2)

TableView

-TableView <T extends {}> {
+TableView {
-  UNSAFE_className?: string
+  UNSAFE_className?: UnsafeClassName
   UNSAFE_style?: CSSProperties
   aria-describedby?: string
   aria-details?: string
   aria-label?: string
   aria-labelledby?: string
-  children: [ReactElement<TableHeaderProps<{}>>, ReactElement<TableBodyProps<{}>>]
+  children?: ReactNode
   defaultSelectedKeys?: 'all' | Iterable<Key>
   density?: 'compact' | 'regular' | 'spacious' = 'regular'
-  disabledBehavior?: DisabledBehavior = 'selection'
+  disabledBehavior?: DisabledBehavior = 'all'
   disabledKeys?: Iterable<Key>
   disallowEmptySelection?: boolean
-  dragAndDropHooks?: DragAndDropHooks<NoInfer<{}>>['dragAndDropHooks']
   escapeKeyBehavior?: 'clearSelection' | 'none' = 'clearSelection'
   id?: string
   isQuiet?: boolean
+  loadingState?: LoadingState
   onAction?: (Key) => void
+  onLoadMore?: () => any
   onResize?: (Map<Key, ColumnSize>) => void
   onResizeEnd?: (Map<Key, ColumnSize>) => void
   onResizeStart?: (Map<Key, ColumnSize>) => void
   onSelectionChange?: (Selection) => void
   onSortChange?: (SortDescriptor) => any
   overflowMode?: 'truncate' | 'wrap' = 'truncate'
-  renderEmptyState?: () => JSX.Element
+  renderActionBar?: ('all' | Set<Key>) => ReactElement
   selectedKeys?: 'all' | Iterable<Key>
   selectionMode?: SelectionMode
-  selectionStyle?: 'checkbox' | 'highlight'
   shouldSelectOnPressUp?: boolean
+  slot?: null | string
   sortDescriptor?: SortDescriptor
+  styles?: StylesPropWithHeight
 }

TableHeader (v3: @react-spectrum/table vs s2)

TableHeader

-TableHeader <T> {
+TableHeader <T extends {}> {
-  children: Array<ColumnElement<T>> | ColumnElement<T> | ColumnRenderer<T>
-  columns?: Array<T>
+  children?: ReactNode | (T) => ReactElement
+  columns?: Iterable<T>
+  dependencies?: ReadonlyArray<any>
 }

TableBody (v3: @react-spectrum/table vs s2)

TableBody

-TableBody <T> {
+TableBody <T extends {}> {
-  children: Array<RowElement<T>> | RowElement<T> | (T) => RowElement<T>
+  children?: ReactNode | (T) => ReactNode
+  dependencies?: ReadonlyArray<any>
   items?: Iterable<T>
-  loadingState?: LoadingState
-  onLoadMore?: () => any
+  renderEmptyState?: (TableBodyRenderProps) => ReactNode
 }

Row (v3: @react-spectrum/table vs s2)

Row

-Row <T> {
+Row <T extends {}> {
-  children: Array<CellElement> | CellElement | CellRenderer
-  download?: boolean | string
-  href?: Href
-  hrefLang?: string
-  ping?: string
-  referrerPolicy?: HTMLAttributeReferrerPolicy
-  rel?: string
-  routerOptions?: RouterOptions
-  target?: HTMLAttributeAnchorTarget
+  children?: ReactNode | (T) => ReactElement
+  columns?: Iterable<T>
+  dependencies?: ReadonlyArray<any>
+  id?: Key
   textValue?: string
 }

Column (v3: @react-spectrum/table vs s2)

Column

-Column <T> {
+Column {
+  align?: 'center' | 'end' | 'start' = 'start'
   allowsResizing?: boolean
   allowsSorting?: boolean
-  childColumns?: Array<T>
-  children: Array<ColumnElement<T>> | ColumnElement<T> | ReactNode
+  children: ReactNode
   defaultWidth?: ColumnSize | null
+  id?: Key
   isRowHeader?: boolean
+  menuItems?: ReactNode
+  showDivider?: boolean
   textValue?: string
-  title?: ReactNode
 }

Tabs (v3: @react-spectrum/tabs vs s2)

Tabs

-Tabs <T extends {}> {
+Tabs {
-  UNSAFE_className?: string
+  UNSAFE_className?: UnsafeClassName
   UNSAFE_style?: CSSProperties
   aria-describedby?: string
   aria-details?: string
   aria-label?: string
   aria-labelledby?: string
   children: ReactNode
   defaultSelectedKey?: Key
-  density?: 'compact' | 'regular'
+  density?: 'compact' | 'regular' = 'regular'
   disabledKeys?: Iterable<Key>
   id?: string
   isDisabled?: boolean
-  isEmphasized?: boolean
-  isQuiet?: boolean
-  items?: Iterable<{}>
   keyboardActivation?: 'automatic' | 'manual' = 'automatic'
+  labelBehavior?: 'hide' | 'show' = 'show'
   onSelectionChange?: (Key) => void
   orientation?: Orientation = 'horizontal'
   selectedKey?: Key | null
+  slot?: null | string
+  styles?: StylesPropWithHeight
 }

TabList (v3: @react-spectrum/tabs vs s2)

TabList

-TabList <T> {
+TabList <T extends {}> {
-  UNSAFE_className?: string
+  UNSAFE_className?: UnsafeClassName
   UNSAFE_style?: CSSProperties
-  children: CollectionChildren<T>
-  id?: string
+  aria-describedby?: string
+  aria-details?: string
+  children: ReactNode | ({}) => ReactNode
+  dependencies?: ReadonlyArray<any>
+  items?: Iterable<T>
+  styles?: StylesProp
 }

Tab (v3: @react-spectrum/tabs vs s2)

Tab

-Tab <T> {
+Tab {
+  UNSAFE_className?: UnsafeClassName
+  UNSAFE_style?: CSSProperties
+  aria-describedby?: string
+  aria-details?: string
   aria-label?: string
-  childItems?: Iterable<T>
+  aria-labelledby?: string
   children: ReactNode
   download?: boolean | string
-  hasChildItems?: boolean
   href?: Href
   hrefLang?: string
+  id?: Key
+  isDisabled?: boolean
+  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
   routerOptions?: RouterOptions
+  styles?: StylesProp
   target?: HTMLAttributeAnchorTarget
-  textValue?: string
-  title?: ReactNode
 }

TabPanel (v3: @react-spectrum/tabs vs s2)

TabPanel

-TabPanel <T> {
+TabPanel {
+  UNSAFE_className?: UnsafeClassName
+  UNSAFE_style?: CSSProperties
+  aria-describedby?: string
+  aria-details?: string
   aria-label?: string
-  childItems?: Iterable<T>
+  aria-labelledby?: string
   children: ReactNode
-  download?: boolean | string
-  hasChildItems?: boolean
-  href?: Href
-  hrefLang?: string
-  ping?: string
-  referrerPolicy?: HTMLAttributeReferrerPolicy
-  rel?: string
-  routerOptions?: RouterOptions
-  target?: HTMLAttributeAnchorTarget
-  textValue?: string
-  title?: ReactNode
+  id?: Key
+  shouldForceMount?: boolean = false
+  styles?: StylesPropWithHeight
 }

TagGroup (v3: @react-spectrum/tag vs s2)

TagGroup

 TagGroup <T extends {}> {
-  UNSAFE_className?: string
+  UNSAFE_className?: UnsafeClassName
   UNSAFE_style?: CSSProperties
-  actionLabel?: string
   aria-describedby?: string
   aria-details?: string
   aria-label?: string
   aria-labelledby?: string
-  children: CollectionChildren<T>
+  children?: ReactNode | (T) => ReactNode
   contextualHelp?: ReactNode
+  defaultSelectedKeys?: 'all' | Iterable<Key>
   description?: ReactNode
+  disabledKeys?: Iterable<Key>
+  disallowEmptySelection?: boolean
   errorMessage?: ReactNode
   escapeKeyBehavior?: 'clearSelection' | 'none' = 'clearSelection'
+  groupActionLabel?: string
   id?: string
+  isEmphasized?: boolean
   isInvalid?: boolean
   items?: Iterable<T>
   label?: ReactNode
   labelAlign?: Alignment = 'start'
   labelPosition?: LabelPosition = 'top'
   maxRows?: number
-  onAction?: () => void
+  onGroupAction?: () => void
   onRemove?: (Set<Key>) => void
-  renderEmptyState?: () => JSX.Element
+  onSelectionChange?: (Selection) => void
+  renderEmptyState?: () => ReactNode
+  selectedKeys?: 'all' | Iterable<Key>
+  selectionBehavior?: SelectionBehavior
+  selectionMode?: SelectionMode
   shouldSelectOnPressUp?: boolean
+  size?: 'L' | 'M' | 'S' = 'M'
+  slot?: null | string
+  styles?: StylesProp
 }

Tag (v3: @react-stately/collections vs s2)

Tag

-Tag <T> {
+Tag {
-  aria-label?: string
-  childItems?: Iterable<T>
   children: ReactNode
   download?: boolean | string
-  hasChildItems?: boolean
   href?: Href
   hrefLang?: string
+  id?: Key
+  isDisabled?: boolean
+  label?: ReactNode
+  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
   routerOptions?: RouterOptions
   target?: HTMLAttributeAnchorTarget
   textValue?: string
-  title?: ReactNode
 }

TextArea (v3: @react-spectrum/textfield vs s2)

TextArea

 TextArea {
-  UNSAFE_className?: string
+  UNSAFE_className?: UnsafeClassName
   UNSAFE_style?: CSSProperties
   aria-activedescendant?: string
   aria-autocomplete?: 'both' | 'inline' | 'list' | 'none'
   aria-controls?: string
   aria-describedby?: string
   aria-details?: string
   aria-errormessage?: string
   aria-haspopup?: 'dialog' | 'false' | 'grid' | 'listbox' | 'menu' | 'tree' | 'true' | boolean
   aria-label?: string
   aria-labelledby?: string
   autoComplete?: string
   autoCorrect?: string
   autoFocus?: boolean
   contextualHelp?: ReactNode
   defaultValue?: string
   description?: ReactNode
   enterKeyHint?: 'done' | 'enter' | 'go' | 'next' | 'previous' | 'search' | 'send'
   errorMessage?: ReactNode | (ValidationResult) => ReactNode
   excludeFromTabOrder?: boolean
   form?: string
-  icon?: null | ReactElement
   id?: string
   inputMode?: 'decimal' | 'email' | 'none' | 'numeric' | 'search' | 'tel' | 'text' | 'url'
   isDisabled?: boolean
-  isQuiet?: boolean
+  isInvalid?: boolean
   isReadOnly?: boolean
   isRequired?: boolean
   label?: ReactNode
   labelAlign?: Alignment = 'start'
   labelPosition?: LabelPosition = 'top'
   maxLength?: number
   minLength?: number
   name?: string
   necessityIndicator?: NecessityIndicator = 'icon'
   onBeforeInput?: FormEventHandler<HTMLInputElement>
   onBlur?: (FocusEvent<T>) => void
   onChange?: (T) => void
   onCompositionEnd?: CompositionEventHandler<HTMLInputElement>
   onCompositionStart?: CompositionEventHandler<HTMLInputElement>
   onCompositionUpdate?: CompositionEventHandler<HTMLInputElement>
   onCopy?: ClipboardEventHandler<HTMLInputElement>
   onCut?: ClipboardEventHandler<HTMLInputElement>
   onFocus?: (FocusEvent<T>) => void
   onFocusChange?: (boolean) => void
   onInput?: FormEventHandler<HTMLInputElement>
   onKeyDown?: (KeyboardEvent) => void
   onKeyUp?: (KeyboardEvent) => void
   onPaste?: ClipboardEventHandler<HTMLInputElement>
   onSelect?: ReactEventHandler<HTMLInputElement>
+  placeholder?: string
+  size?: 'L' | 'M' | 'S' | 'XL' = 'M'
+  slot?: null | string
   spellCheck?: string
+  styles?: StylesProp
   validate?: (string) => boolean | null | undefined | ValidationError
-  validationBehavior?: 'aria' | 'native' = 'aria'
-  validationState?: ValidationState
+  validationBehavior?: 'aria' | 'native' = 'native'
   value?: string
 }

TextField (v3: @react-spectrum/textfield vs s2)

TextField

 TextField {
-  UNSAFE_className?: string
+  UNSAFE_className?: UnsafeClassName
   UNSAFE_style?: CSSProperties
   aria-activedescendant?: string
   aria-autocomplete?: 'both' | 'inline' | 'list' | 'none'
   aria-controls?: string
   aria-describedby?: string
   aria-details?: string
   aria-errormessage?: string
   aria-haspopup?: 'dialog' | 'false' | 'grid' | 'listbox' | 'menu' | 'tree' | 'true' | boolean
   aria-label?: string
   aria-labelledby?: string
   autoComplete?: string
   autoCorrect?: string
   autoFocus?: boolean
   contextualHelp?: ReactNode
   defaultValue?: string
   description?: ReactNode
   enterKeyHint?: 'done' | 'enter' | 'go' | 'next' | 'previous' | 'search' | 'send'
   errorMessage?: ReactNode | (ValidationResult) => ReactNode
   excludeFromTabOrder?: boolean
   form?: string
-  icon?: null | ReactElement
   id?: string
   inputMode?: 'decimal' | 'email' | 'none' | 'numeric' | 'search' | 'tel' | 'text' | 'url'
   isDisabled?: boolean
-  isQuiet?: boolean
+  isInvalid?: boolean
   isReadOnly?: boolean
   isRequired?: boolean
   label?: ReactNode
   labelAlign?: Alignment = 'start'
   labelPosition?: LabelPosition = 'top'
   maxLength?: number
   minLength?: number
   name?: string
   necessityIndicator?: NecessityIndicator = 'icon'
   onBeforeInput?: FormEventHandler<HTMLInputElement>
   onBlur?: (FocusEvent<T>) => void
   onChange?: (T) => void
   onCompositionEnd?: CompositionEventHandler<HTMLInputElement>
   onCompositionStart?: CompositionEventHandler<HTMLInputElement>
   onCompositionUpdate?: CompositionEventHandler<HTMLInputElement>
   onCopy?: ClipboardEventHandler<HTMLInputElement>
   onCut?: ClipboardEventHandler<HTMLInputElement>
   onFocus?: (FocusEvent<T>) => void
   onFocusChange?: (boolean) => void
   onInput?: FormEventHandler<HTMLInputElement>
   onKeyDown?: (KeyboardEvent) => void
   onKeyUp?: (KeyboardEvent) => void
   onPaste?: ClipboardEventHandler<HTMLInputElement>
   onSelect?: ReactEventHandler<HTMLInputElement>
   pattern?: string
+  placeholder?: string
+  size?: 'L' | 'M' | 'S' | 'XL' = 'M'
+  slot?: null | string
   spellCheck?: string
+  styles?: StylesProp
   type?: 'email' | 'password' | 'search' | 'tel' | 'text' | 'url' | ({
   
 } & string) = 'text'
   validate?: (string) => boolean | null | undefined | ValidationError
-  validationBehavior?: 'aria' | 'native' = 'aria'
-  validationState?: ValidationState
+  validationBehavior?: 'aria' | 'native' = 'native'
   value?: string
 }

TimeField (v3: @react-spectrum/datepicker vs s2)

TimeField

 TimeField <T extends TimeValue> {
-  UNSAFE_className?: string
+  UNSAFE_className?: UnsafeClassName
   UNSAFE_style?: CSSProperties
   aria-describedby?: string
   aria-details?: string
   aria-label?: string
   aria-labelledby?: string
   autoFocus?: boolean
   contextualHelp?: ReactNode
   defaultValue?: null | TimeValue
   description?: ReactNode
   errorMessage?: ReactNode | (ValidationResult) => ReactNode
   form?: string
   granularity?: 'hour' | 'minute' | 'second' = 'minute'
   hideTimeZone?: boolean
   hourCycle?: number | number
   id?: string
   isDisabled?: boolean
-  isQuiet?: boolean = false
+  isInvalid?: boolean
   isReadOnly?: boolean
   isRequired?: boolean
   label?: ReactNode
   labelAlign?: Alignment = 'start'
   labelPosition?: LabelPosition = 'top'
   maxValue?: null | TimeValue
   minValue?: null | TimeValue
   name?: string
   necessityIndicator?: NecessityIndicator = 'icon'
   onBlur?: (FocusEvent<Target>) => void
   onChange?: (MappedTimeValue<TimeValue> | null) => void
   onFocus?: (FocusEvent<Target>) => void
   onFocusChange?: (boolean) => void
   onKeyDown?: (KeyboardEvent) => void
   onKeyUp?: (KeyboardEvent) => void
   placeholderValue?: TimeValue
   shouldForceLeadingZeros?: boolean
+  size?: 'L' | 'M' | 'S' | 'XL' = 'M'
+  slot?: null | string
+  styles?: StylesProp
   validate?: (MappedTimeValue<TimeValue>) => boolean | null | undefined | ValidationError
-  validationBehavior?: 'aria' | 'native' = 'aria'
-  validationState?: ValidationState
+  validationBehavior?: 'aria' | 'native' = 'native'
   value?: null | TimeValue
 }

ToggleButton (v3: @react-spectrum/button vs s2)

ToggleButton

 ToggleButton {
-  UNSAFE_className?: string
+  UNSAFE_className?: UnsafeClassName
   UNSAFE_style?: CSSProperties
   aria-controls?: string
   aria-describedby?: string
   aria-details?: string
   aria-disabled?: 'false' | 'true' | boolean
   aria-expanded?: 'false' | 'true' | boolean
   aria-haspopup?: 'dialog' | 'false' | 'grid' | 'listbox' | 'menu' | 'tree' | 'true' | boolean
   aria-label?: string
   aria-labelledby?: string
   aria-pressed?: 'false' | 'mixed' | 'true' | boolean
   autoFocus?: boolean
-  children?: ReactNode
+  children: ReactNode
   defaultSelected?: boolean
   excludeFromTabOrder?: boolean
-  id?: string
+  id?: Key
   isDisabled?: boolean
   isEmphasized?: boolean
   isQuiet?: boolean
   isSelected?: boolean
   onBlur?: (FocusEvent<Target>) => void
   onChange?: (boolean) => void
   onFocus?: (FocusEvent<Target>) => void
   onFocusChange?: (boolean) => void
   onKeyDown?: (KeyboardEvent) => void
   onKeyUp?: (KeyboardEvent) => void
   onPress?: (PressEvent) => void
   onPressChange?: (boolean) => void
   onPressEnd?: (PressEvent) => void
   onPressStart?: (PressEvent) => void
   onPressUp?: (PressEvent) => void
   preventFocusOnPress?: boolean
-  staticColor?: 'black' | 'white'
+  size?: 'L' | 'M' | 'S' | 'XL' | 'XS' = 'M'
+  slot?: null | string
+  staticColor?: 'auto' | 'black' | 'white'
+  styles?: StylesProp
 }

ToggleButtonGroup (v3: @react-spectrum/actiongroup vs s2)

ToggleButtonGroup

-ToggleButtonGroup <T extends {}> {
+ToggleButtonGroup {
-  UNSAFE_className?: string
+  UNSAFE_className?: UnsafeClassName
   UNSAFE_style?: CSSProperties
   aria-describedby?: string
   aria-details?: string
   aria-label?: string
   aria-labelledby?: string
-  buttonLabelBehavior?: 'collapse' | 'hide' | 'show' = 'show'
-  children: Array<ItemElement<{}>> | ItemElement<{}> | ItemRenderer<{}>
-  defaultSelectedKeys?: 'all' | Iterable<Key>
+  children: ReactNode
+  defaultSelectedKeys?: Iterable<Key>
   density?: 'compact' | 'regular' = 'regular'
-  disabledKeys?: Iterable<Key>
   disallowEmptySelection?: boolean
   id?: string
   isDisabled?: boolean
   isEmphasized?: boolean
   isJustified?: boolean
   isQuiet?: boolean
-  items?: Iterable<{}>
-  onAction?: (Key) => void
-  onSelectionChange?: (Selection) => void
-  orientation?: Orientation = 'horizontal'
-  overflowMode?: 'collapse' | 'wrap' = 'wrap'
-  selectedKeys?: 'all' | Iterable<Key>
-  selectionMode?: SelectionMode
-  staticColor?: 'black' | 'white'
-  summaryIcon?: ReactElement
+  onSelectionChange?: (Set<Key>) => void
+  orientation?: 'horizontal' | 'vertical' = 'horizontal'
+  selectedKeys?: Iterable<Key>
+  selectionMode?: 'multiple' | 'single' = 'single'
+  size?: 'L' | 'M' | 'S' | 'XL' | 'XS' = 'M'
+  slot?: null | string
+  staticColor?: 'auto' | 'black' | 'white'
+  styles?: StylesPropWithHeight
 }

Tooltip (v3: @react-spectrum/tooltip vs s2)

Tooltip

 Tooltip {
-  UNSAFE_className?: string
+  UNSAFE_className?: UnsafeClassName
   UNSAFE_style?: CSSProperties
   aria-describedby?: string
   aria-details?: string
   aria-label?: string
   aria-labelledby?: string
   children: ReactNode
   id?: string
-  isOpen?: boolean
-  placement?: 'bottom' | 'end' | 'left' | 'right' | 'start' | 'top' = 'top'
-  showIcon?: boolean
-  variant?: 'info' | 'negative' | 'neutral' | 'positive'
 }

TooltipTrigger (v3: @react-spectrum/tooltip vs s2)

TooltipTrigger

 TooltipTrigger {
-  children: [ReactElement, ReactElement]
+  children: ReactNode
   closeOnPress?: boolean = true
   containerPadding?: number = 12
   crossOffset?: number = 0
   defaultOpen?: boolean
   delay?: number = 1500
   isDisabled?: boolean
   isOpen?: boolean
-  offset?: number = 7
+  offset?: number = 4
   onOpenChange?: (boolean) => void
-  placement?: Placement = 'top'
+  placement?: 'bottom' | 'end' | 'left' | 'right' | 'start' | 'top' = 'top'
   shouldFlip?: boolean = true
   trigger?: 'focus' | 'hover' = 'hover'
 }

TreeView (v3: @react-spectrum/tree vs s2)

TreeView

 TreeView <T extends {}> {
-  UNSAFE_className?: string
+  UNSAFE_className?: UnsafeClassName
   UNSAFE_style?: CSSProperties
   aria-describedby?: string
   aria-details?: string
   aria-label?: string
   aria-labelledby?: string
   autoFocus?: boolean | FocusStrategy
-  children?: ReactNode | ({}) => ReactNode
+  children?: ReactNode | (T) => ReactNode
   defaultExpandedKeys?: Iterable<Key>
   defaultSelectedKeys?: 'all' | Iterable<Key>
+  dependencies?: ReadonlyArray<any>
   disabledBehavior?: DisabledBehavior = 'all'
   disabledKeys?: Iterable<Key>
   disallowEmptySelection?: boolean
   escapeKeyBehavior?: 'clearSelection' | 'none' = 'clearSelection'
   expandedKeys?: Iterable<Key>
   id?: string
+  isDetached?: boolean
+  isEmphasized?: boolean
   items?: Iterable<T>
   onAction?: (Key) => void
   onExpandedChange?: (Set<Key>) => any
   onSelectionChange?: (Selection) => void
-  renderEmptyState?: () => JSX.Element
+  renderEmptyState?: (TreeEmptyStateRenderProps) => ReactNode
   selectedKeys?: 'all' | Iterable<Key>
   selectionMode?: SelectionMode
-  selectionStyle?: 'checkbox' | 'highlight'
   shouldSelectOnPressUp?: boolean
+  slot?: null | string
+  styles?: StylesPropWithHeight
 }

TreeViewItem (v3: @react-spectrum/tree vs s2)

TreeViewItem

 TreeViewItem {
   aria-label?: string
   children: ReactNode
   download?: boolean | string
   hasChildItems?: boolean
   href?: Href
   hrefLang?: string
   id?: Key
   isDisabled?: boolean
   onAction?: () => 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
   routerOptions?: RouterOptions
   target?: HTMLAttributeAnchorTarget
   textValue: string
+  value?: T
 }

============================================================
Skipped Comparisons Report

1 component(s) could not be compared:

Autocomplete:
v3 package: @react-spectrum/autocomplete
reason: v3 component not found

============================================================

snowystinger added 10 commits November 11, 2025 14:23

tsdiff compare v3 and s2

3bda357

more fixes

3f5da5b

Merge branch 'main' into tsdiff-v3-and-s2

c7a43a2

make script only run on the v3-s2 comparison for now

3f836d7

fix some types

08acefe

fix extra or missing props

68948c2

fixes from audit

8d2cb92

fix default

e422a8d

fix build, will revert later

d6c85c1

fix command again

05490d2

add default for statulight and missing prop in toggle button group ex…

c2d26d4

…ample

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

chore: Audit and fix v3 and s2 #9191

chore: Audit and fix v3 and s2 #9191

snowystinger commented Nov 17, 2025

Uh oh!

rspbot commented Nov 17, 2025

Uh oh!

rspbot commented Nov 18, 2025

Uh oh!

rspbot commented Nov 18, 2025

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

chore: Audit and fix v3 and s2 #9191

Are you sure you want to change the base?

chore: Audit and fix v3 and s2 #9191

Conversation

snowystinger commented Nov 17, 2025

✅ Pull Request Checklist:

📝 Test Instructions:

🧢 Your Project:

Uh oh!

rspbot commented Nov 17, 2025

Uh oh!

rspbot commented Nov 18, 2025

Uh oh!

rspbot commented Nov 18, 2025

============================================================ Unmatched Components Report

Successfully matched: 89 components

Accordion (v3: @react-spectrum/accordion vs s2)

Accordion

ActionBar (v3: @react-spectrum/actionbar vs s2)

ActionBar

ActionButton (v3: @react-spectrum/button vs s2)

ActionButton

ActionButtonGroup (v3: @react-spectrum/actiongroup vs s2)

ActionButtonGroup

ActionMenu (v3: @react-spectrum/menu vs s2)

ActionMenu

AlertDialog (v3: @react-spectrum/dialog vs s2)

AlertDialog

Avatar (v3: @react-spectrum/avatar vs s2)

Avatar

Badge (v3: @react-spectrum/badge vs s2)

Badge

Breadcrumbs (v3: @react-spectrum/breadcrumbs vs s2)

Breadcrumbs

Breadcrumb (v3: @react-stately/collections vs s2)

Breadcrumb

Button (v3: @react-spectrum/button vs s2)

Button

ButtonGroup (v3: @react-spectrum/buttongroup vs s2)

ButtonGroup

Calendar (v3: @react-spectrum/calendar vs s2)

Calendar

Card (v3: @react-spectrum/card vs s2)

Card

Checkbox (v3: @react-spectrum/checkbox vs s2)

Checkbox

CheckboxGroup (v3: @react-spectrum/checkbox vs s2)

CheckboxGroup

ColorArea (v3: @react-spectrum/color vs s2)

ColorArea

ColorField (v3: @react-spectrum/color vs s2)

ColorField

ColorSlider (v3: @react-spectrum/color vs s2)

ColorSlider

ColorWheel (v3: @react-spectrum/color vs s2)

ColorWheel

ComboBox (v3: @react-spectrum/combobox vs s2)

ComboBox

ComboBoxItem (v3: @react-stately/collections vs s2)

ComboBoxItem

ComboBoxSection (v3: @react-stately/collections vs s2)

ComboBoxSection

ContextualHelp (v3: @react-spectrum/contextualhelp vs s2)

ContextualHelp

DateField (v3: @react-spectrum/datepicker vs s2)

DateField

DatePicker (v3: @react-spectrum/datepicker vs s2)

DatePicker

DateRangePicker (v3: @react-spectrum/datepicker vs s2)

DateRangePicker

DisclosureHeader (v3: @react-spectrum/accordion vs s2)

DisclosureHeader

Disclosure (v3: @react-spectrum/accordion vs s2)

Disclosure

DisclosurePanel (v3: @react-spectrum/accordion vs s2)

DisclosurePanel

DisclosureTitle (v3: @react-spectrum/accordion vs s2)

DisclosureTitle

Heading (v3: @react-spectrum/text vs s2)

Heading

============================================================
Unmatched Components Report