fix(hooks): add type to on change handler params

src/hooks/useCombobox/__tests__/props.test.js

@@ -917,6 +917,7 @@ describe('props', () => {
       expect(onSelectedItemChange).toHaveBeenCalledWith(
         expect.objectContaining({
           selectedItem: items[itemIndex],
+          type: stateChangeTypes.ItemClick,
         }),
       )
     })
@@ -981,6 +982,7 @@ describe('props', () => {
       expect(onHighlightedIndexChange).toHaveBeenCalledWith(
         expect.objectContaining({
           highlightedIndex: 0,
+          type: stateChangeTypes.InputKeyDownArrowDown,
         }),
       )
     })
@@ -1058,6 +1060,7 @@ describe('props', () => {
       expect(onIsOpenChange).toHaveBeenCalledWith(
         expect.objectContaining({
           isOpen: false,
+          type: stateChangeTypes.InputKeyDownEscape,
         }),
       )
     })

src/hooks/useSelect/__tests__/props.test.js

@@ -930,6 +930,7 @@ describe('props', () => {
       expect(onSelectedItemChange).toHaveBeenCalledWith(
         expect.objectContaining({
           selectedItem: items[index],
+          type: stateChangeTypes.ItemClick,
         }),
       )
     })
@@ -994,6 +995,7 @@ describe('props', () => {
       expect(onHighlightedIndexChange).toHaveBeenCalledWith(
         expect.objectContaining({
           highlightedIndex: 0,
+          type: stateChangeTypes.ToggleButtonKeyDownArrowDown,
         }),
       )
     })
@@ -1066,6 +1068,7 @@ describe('props', () => {
       expect(onIsOpenChange).toHaveBeenCalledWith(
         expect.objectContaining({
           isOpen: false,
+          type: stateChangeTypes.MenuKeyDownEscape,
         }),
       )
     })

src/hooks/utils.js

@@ -22,7 +22,7 @@ function callOnChangeProps(action, state, newState) {
   const changes = {}
 
   Object.keys(state).forEach(key => {
-    invokeOnChangeHandler(key, props, state, newState)
+    invokeOnChangeHandler(key, action, state, newState)
 
     if (newState[key] !== state[key]) {
       changes[key] = newState[key]
@@ -34,14 +34,15 @@ function callOnChangeProps(action, state, newState) {
   }
 }
 
-function invokeOnChangeHandler(key, props, state, newState) {
+function invokeOnChangeHandler(key, action, state, newState) {
+  const {props, type} = action
   const handler = `on${capitalizeString(key)}Change`
   if (
     props[handler] &&
     newState[key] !== undefined &&
     newState[key] !== state[key]
   ) {
-    props[handler](newState)
+    props[handler]({type, ...newState})
   }
 }
 

typings/index.d.ts

@@ -292,17 +292,32 @@ export interface UseSelectProps<Item> {
     state: UseSelectState<Item>,
     actionAndChanges: UseSelectStateChangeOptions<Item>,
   ) => UseSelectState<Item>
-  onSelectedItemChange?: (changes: Partial<UseSelectState<Item>>) => void
-  onIsOpenChange?: (changes: Partial<UseSelectState<Item>>) => void
-  onHighlightedIndexChange?: (changes: Partial<UseSelectState<Item>>) => void
-  onStateChange?: (changes: Partial<UseSelectState<Item>>) => void
+  onSelectedItemChange?: (changes: UseSelectStateChange<Item>) => void
+  onIsOpenChange?: (changes: UseSelectStateChange<Item>) => void
+  onHighlightedIndexChange?: (changes: UseSelectStateChange<Item>) => void
+  onStateChange?: (changes: UseSelectStateChange<Item>) => void
   environment?: Environment
 }
 
-export interface UseSelectStateChangeOptions<Item> {
+export interface UseSelectStateChangeOptions<Item>
+  extends UseSelectDispatchAction<Item> {
+  changes: Partial<UseSelectState<Item>>
+}
+
+export interface UseSelectDispatchAction<Item> {
+  type: UseSelectStateChangeTypes
+  getItemNodeFromIndex?: (index: number) => HTMLElement
+  shiftKey?: boolean
+  key?: string
+  index?: number
+  highlightedIndex?: number
+  selectedItem?: Item | null
+  inputValue?: string
+}
+
+export interface UseSelectStateChange<Item>
+  extends Partial<UseSelectState<Item>> {
   type: UseSelectStateChangeTypes
-  changes: UseSelectState<Item>
-  props: UseSelectProps<Item>
 }
 
 export interface UseSelectGetMenuPropsOptions
@@ -431,18 +446,32 @@ export interface UseComboboxProps<Item> {
     state: UseComboboxState<Item>,
     actionAndChanges: UseComboboxStateChangeOptions<Item>,
   ) => UseComboboxState<Item>
-  onSelectedItemChange?: (changes: Partial<UseComboboxState<Item>>) => void
-  onIsOpenChange?: (changes: Partial<UseComboboxState<Item>>) => void
-  onHighlightedIndexChange?: (changes: Partial<UseComboboxState<Item>>) => void
-  onStateChange?: (changes: Partial<UseComboboxState<Item>>) => void
-  onInputValueChange?: (changes: Partial<UseComboboxState<Item>>) => void
+  onSelectedItemChange?: (changes: UseComboboxStateChange<Item>) => void
+  onIsOpenChange?: (changes: UseComboboxStateChange<Item>) => void
+  onHighlightedIndexChange?: (changes: UseComboboxStateChange<Item>) => void
+  onStateChange?: (changes: UseComboboxStateChange<Item>) => void
+  onInputValueChange?: (changes: UseComboboxStateChange<Item>) => void
   environment?: Environment
 }
 
-export interface UseComboboxStateChangeOptions<Item> {
+export interface UseComboboxStateChangeOptions<Item>
+  extends UseComboboxDispatchAction<Item> {
+  changes: Partial<UseComboboxState<Item>>
+}
+
+export interface UseComboboxDispatchAction<Item> {
+  type: UseSelectStateChangeTypes
+  shiftKey?: boolean
+  getItemNodeFromIndex?: (index: number) => HTMLElement
+  inputValue?: string
+  index?: number
+  highlightedIndex?: number
+  selectedItem?: Item | null
+}
+
+export interface UseComboboxStateChange<Item>
+  extends Partial<UseComboboxState<Item>> {
   type: UseComboboxStateChangeTypes
-  changes: UseComboboxState<Item>
-  props: UseComboboxProps<Item>
 }
 
 export interface UseComboboxGetMenuPropsOptions
@@ -566,13 +595,16 @@ export interface UseMultipleSelectionProps<Item> {
 }
 
 export interface UseMultipleSelectionStateChangeOptions<Item>
-  extends UseMultipleSelectionDispatchAction {
+  extends UseMultipleSelectionDispatchAction<Item> {
   changes: Partial<UseMultipleSelectionState<Item>>
 }
 
-export interface UseMultipleSelectionDispatchAction {
+export interface UseMultipleSelectionDispatchAction<Item> {
   type: UseMultipleSelectionStateChangeTypes
-  [data: string]: any
+  index?: number
+  selectedItem?: Item | null
+  selectedItems?: Item[]
+  activeIndex?: number
 }
 
 export interface UseMultipleSelectionStateChange<Item>