fix: Regressions from DOM events PR

[devongovett]

Fixes regressions introduced in #8327. ColorArea and ColorSwatch had their prop merge order changed which broke in chromatic. Also omitting DOM attributes from S2 for now. This was causing storybook controls to crash.

[devongovett]

Fixes crash in storybook in React 19. React emits a warning when accessing element.ref. This checks if that is defined as a getter.

[rspbot]

Build successful! 🎉

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

[rspbot]

## API Changes

@react-spectrum/s2

/@react-spectrum/s2:ComboBoxSection

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

/@react-spectrum/s2:MenuSection

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

/@react-spectrum/s2:PickerSection

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

/@react-spectrum/s2:ComboBoxSectionProps

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

/@react-spectrum/s2:MenuSectionProps

 MenuSectionProps <T extends {}> {
   aria-label?: string
-  children?: ReactNode | ({}) => ReactElement
+  children?: ReactNode | (T) => ReactElement
   className?: string
   defaultSelectedKeys?: 'all' | Iterable<Key>
   dependencies?: ReadonlyArray<any>
   disabledKeys?: Iterable<Key>
   disallowEmptySelection?: boolean
   id?: Key
-  items?: Iterable<{}>
+  items?: Iterable<T>
   onSelectionChange?: (Selection) => void
   selectedKeys?: 'all' | Iterable<Key>
   selectionMode?: SelectionMode
   style?: CSSProperties
-  value?: {}
+  value?: T
 }

/@react-spectrum/s2:PickerSectionProps

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

---

[snowystinger]

happy to get in and we can discuss the order without chromatic crashing

[snowystinger]

It's opposite order in other components, ie ProgressBar
Are these special cases? or should they all be in this order?

[devongovett]

it's because useColorSwatch returns style, and that gets passed into useRenderProps as defaultStyle, so the user can override it.

[snowystinger]

gotcha, should the others be flipped then as well?

[devongovett]

I checked all the hooks that return styles. I think flipping the order by default would not be enough, because the defaultStyle would have to be passed into useRenderProps anyway.