Ensure onChange types are contravariant instead of bivariant (#3781)

This PR fixes an issue where the types for certain event handlers such
as `onChange` on the `Combobox` component were incorrectly typed as
bivariant instead of contravariant.

This is now fixed by using function property syntax instead of method
syntax.

Before:
```tsx
function onChange(value: string) {}

// This would have worked, even though the internal types are `(value: string | null) => void`
return <Combobox onChange={onChange} />;
```

After:
```tsx
function onChange(value: string) {}

// This now errors because we expect `string | null`
return <Combobox onChange={onChange} />;
```

In both cases:
```tsx
function onChange(value: string | null) {}

// This is the correct type, and works in both cases
return <Combobox onChange={onChange} />;
```

A pure TypeScript example, thanks to @mn-prp:
https://www.typescriptlang.org/play/?#code/MYewdgzgLgBMCGAbRB1AllAFgWQKZZABMYBeGACgAcAnESiALhgG8ZwBhTeMAc13IBuSAK64mYYchgAfGNGppeASiYCQaYgF8lpAHwtNAKEOhIsBMnRYACrUq5qUAJ6kYFGnUYs2YTtz5MgiJiMBJSsvKKPDok+moaMNp6Bsam0HBIiABG8MAA1q5BiKJMkcrJQsW4qeDp8NQ8rqwcXLwhFtm5BUYmmVY4+JhE5PXRvZYYmLZ0Ds4jDUpAA

---

The `onChange` was the important one, but fixed the other spots where we
use method syntax as well.

Fixes: #3727

Author: RobinMalfait

packages/@headlessui-react/CHANGELOG.md

@@ -10,6 +10,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 ### Fixed
 
 - Ensure we are not freezing data when the `static` prop is used ([#3779](https://github.com/tailwindlabs/headlessui/pull/3779))
+- Ensure `onChange` types are contravariant instead of bivariant ([#3781](https://github.com/tailwindlabs/headlessui/pull/3781))
 
 ## [2.2.7] - 2025-07-30
 

packages/@headlessui-react/src/components/combobox/combobox.tsx

@@ -256,9 +256,9 @@ export type ComboboxProps<
     value?: TMultiple extends true ? EnsureArray<TValue> : TValue
     defaultValue?: TMultiple extends true ? EnsureArray<NoInfer<TValue>> : NoInfer<TValue>
 
-    onChange?(
+    onChange?: (
       value: TMultiple extends true ? EnsureArray<NoInfer<TValue>> : NoInfer<TValue> | null
-    ): void
+    ) => void
     by?: ByComparator<
       TMultiple extends true ? EnsureArray<NoInfer<TValue>>[number] : NoInfer<TValue>
     >
@@ -279,7 +279,7 @@ export type ComboboxProps<
       ) => boolean
     } | null
 
-    onClose?(): void
+    onClose?: () => void
 
     __demoMode?: boolean
   }
@@ -513,8 +513,8 @@ export type ComboboxInputProps<
   {
     defaultValue?: TType
     disabled?: boolean
-    displayValue?(item: TType): string
-    onChange?(event: React.ChangeEvent<HTMLInputElement>): void
+    displayValue?: (item: TType) => string
+    onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void
     autoFocus?: boolean
   }
 >

packages/@headlessui-react/src/components/listbox/listbox.tsx

@@ -147,7 +147,7 @@ export type ListboxProps<
   {
     value?: TType
     defaultValue?: TType
-    onChange?(value: TType): void
+    onChange?: (value: TType) => void
     by?: ByComparator<TActualType>
     disabled?: boolean
     invalid?: boolean

packages/@headlessui-react/src/components/radio-group/radio-group.tsx

@@ -156,7 +156,7 @@ export type RadioGroupProps<
   {
     value?: TType
     defaultValue?: TType
-    onChange?(value: TType): void
+    onChange?: (value: TType) => void
     by?: ByComparator<TType>
     disabled?: boolean
     form?: string

packages/@headlessui-react/src/components/switch/switch.tsx

@@ -129,7 +129,7 @@ export type SwitchProps<TTag extends ElementType = typeof DEFAULT_SWITCH_TAG> =
   {
     checked?: boolean
     defaultChecked?: boolean
-    onChange?(checked: boolean): void
+    onChange?: (checked: boolean) => void
     name?: string
     value?: string
     form?: string

packages/@headlessui-react/src/hooks/document-overflow/overflow-store.ts

@@ -28,8 +28,8 @@ export interface Context<MetaType extends Record<string, any> = any> {
 }
 
 export interface ScrollLockStep<MetaType extends Record<string, any> = any> {
-  before?(ctx: Context<MetaType>): void
-  after?(ctx: Context<MetaType>): void
+  before?: (ctx: Context<MetaType>) => void
+  after?: (ctx: Context<MetaType>) => void
 }
 
 export let overflows = createStore(() => new Map<Document, DocEntry>(), {

packages/@headlessui-react/src/hooks/use-transition.ts

@@ -82,8 +82,8 @@ export function useTransition(
   element: HTMLElement | null,
   show: boolean,
   events?: {
-    start?(show: boolean): void
-    end?(show: boolean): void
+    start?: (show: boolean) => void
+    end?: (show: boolean) => void
   }
 ): [visible: boolean, data: TransitionData] {
   let [visible, setVisible] = useState(show)