diff --git a/src/hooks/MIGRATION_V9.md b/src/hooks/MIGRATION_V9.md index 87598f0f..66c69a44 100644 --- a/src/hooks/MIGRATION_V9.md +++ b/src/hooks/MIGRATION_V9.md @@ -13,6 +13,7 @@ hooks and are detailed below. - [getA11ySelectionMessage](#geta11yselectionmessage) - [getA11yRemovalMessage](#geta11yremovalmessage) - [getA11yStatusMessage](#geta11ystatusmessage) +- [selectedItemChanged](#selecteditemchanged) @@ -22,11 +23,13 @@ The handlers below have their types improved to reflect that they will always get called with their corresponding state prop: - useCombobox + - onSelectedItemChange: selectedItem is non optional - onIsOpenChange: isOpen is non optional - onHighlightedIndexChange: highlightedIndex is non optional - useSelect + - onSelectedItemChange: selectedItem is non optional - onIsOpenChange: isOpen is non optional - onHighlightedIndexChange: highlightedIndex is non optional @@ -80,3 +83,12 @@ References: - [useCombobox docs](https://github.com/downshift-js/downshift/blob/master/src/hooks/useCombobox/README.md#geta11ystatusmessage) - [useSelect docs](https://github.com/downshift-js/downshift/blob/master/src/hooks/useSelect/README.md#geta11ystatusmessage) - [useMultipleSelection docs](https://github.com/downshift-js/downshift/blob/master/src/hooks/useMultipleSelection/README.md#geta11ystatusmessage) + +## selectedItemChanged + +This prop has been removed from `useCombobox`. You should use `itemToKey` +instead. + +Reference: + +[itemToKey docs](https://github.com/downshift-js/downshift/blob/master/src/hooks/useCombobox/README.md#itemtokey) diff --git a/src/hooks/useCombobox/README.md b/src/hooks/useCombobox/README.md index c91f197f..d1c3b6f5 100644 --- a/src/hooks/useCombobox/README.md +++ b/src/hooks/useCombobox/README.md @@ -82,7 +82,6 @@ and update if necessary. - [defaultHighlightedIndex](#defaulthighlightedindex) - [defaultInputValue](#defaultinputvalue) - [itemToKey](#itemtokey) - - [selectedItemChanged](#selecteditemchanged) - [getA11yStatusMessage](#geta11ystatusmessage) - [onHighlightedIndexChange](#onhighlightedindexchange) - [onIsOpenChange](#onisopenchange) @@ -411,8 +410,8 @@ function itemToKey(item) { ``` > This deprecates the "selectedItemChanged" prop. If you are using the prop -> already, make sure you change to "itemToKey" as the former will be removed in -> the next Breaking Change update. A migration example: +> already, make sure you change to "itemToKey" as the former is removed in v9. A +> migration example: ```js // initial items. @@ -438,16 +437,6 @@ function itemToKey(item) { } ``` -### selectedItemChanged - -> DEPRECATED. Please use "itemToKey". - -> `function(prevItem: any, item: any)` | defaults to: -> `(prevItem, item) => (prevItem !== item)` - -Used to determine if the new `selectedItem` has changed compared to the previous -`selectedItem` and properly update Downshift's internal state. - ### getA11yStatusMessage > `function({/* see below */})` | default messages provided in English diff --git a/src/hooks/useCombobox/__tests__/props.test.js b/src/hooks/useCombobox/__tests__/props.test.js index c4bd93b1..71691ffe 100644 --- a/src/hooks/useCombobox/__tests__/props.test.js +++ b/src/hooks/useCombobox/__tests__/props.test.js @@ -71,123 +71,6 @@ describe('props', () => { }) }) - describe('selectedItemChanged', () => { - test('props update of selectedItem will update inputValue state with default selectedItemChanged referential equality check', () => { - const initialSelectedItem = {id: 3, value: 'init'} - const selectedItem = {id: 1, value: 'wow'} - const newSelectedItem = {id: 1, value: 'not wow'} - function itemToString(item) { - return item.value - } - const stateReducer = jest - .fn() - .mockImplementation((_state, {changes}) => changes) - - const {rerender} = renderCombobox({ - stateReducer, - itemToString, - selectedItem: initialSelectedItem, - }) - - expect(stateReducer).not.toHaveBeenCalled() // won't get called on first render - - rerender({ - stateReducer, - itemToString, - selectedItem, - }) - - expect(stateReducer).toHaveBeenCalledTimes(1) - expect(stateReducer).toHaveBeenCalledWith( - { - inputValue: itemToString(initialSelectedItem), - selectedItem, - highlightedIndex: -1, - isOpen: false, - }, - expect.objectContaining({ - type: useCombobox.stateChangeTypes.ControlledPropUpdatedSelectedItem, - changes: { - inputValue: itemToString(selectedItem), - selectedItem, - highlightedIndex: -1, - isOpen: false, - }, - }), - ) - - stateReducer.mockClear() - rerender({ - stateReducer, - selectedItem: newSelectedItem, - itemToString, - }) - - expect(stateReducer).toHaveBeenCalledTimes(1) - expect(stateReducer).toHaveBeenCalledWith( - { - inputValue: itemToString(selectedItem), - selectedItem: newSelectedItem, - highlightedIndex: -1, - isOpen: false, - }, - expect.objectContaining({ - changes: { - inputValue: itemToString(newSelectedItem), - selectedItem: newSelectedItem, - highlightedIndex: -1, - isOpen: false, - }, - type: useCombobox.stateChangeTypes.ControlledPropUpdatedSelectedItem, - }), - ) - expect(getInput()).toHaveValue(itemToString(newSelectedItem)) - }) - - test('props update of selectedItem will not update inputValue state if selectedItemChanged returns false', () => { - const consoleWarnSpy = jest - .spyOn(console, 'warn') - .mockImplementation(() => {}) - const initialSelectedItem = {id: 1, value: 'hmm'} - const selectedItem = {id: 1, value: 'wow'} - function itemToString(item) { - return item.value - } - const selectedItemChanged = jest - .fn() - .mockImplementation((prev, next) => prev.id !== next.id) - const stateReducer = jest - .fn() - .mockImplementation((_state, {changes}) => changes) - - const {rerender} = renderCombobox({ - selectedItemChanged, - stateReducer, - selectedItem: initialSelectedItem, - itemToString, - }) - - rerender({ - selectedItemChanged, - stateReducer, - selectedItem, - itemToString, - }) - - expect(getInput()).toHaveValue(itemToString(initialSelectedItem)) - expect(selectedItemChanged).toHaveBeenCalledTimes(1) - expect(selectedItemChanged).toHaveBeenCalledWith( - initialSelectedItem, - selectedItem, - ) - expect(consoleWarnSpy).toHaveBeenCalledTimes(1) - expect(consoleWarnSpy).toHaveBeenCalledWith( - `The "selectedItemChanged" is deprecated. Please use "itemToKey instead". https://github.com/downshift-js/downshift/blob/master/src/hooks/useCombobox/README.md#selecteditemchanged`, - ) - consoleWarnSpy.mockRestore() - }) - }) - describe('itemToKey', () => { test('props update of selectedItem will update inputValue state with default itemToKey referential equality check', () => { const initialSelectedItem = {id: 3, value: 'init'} diff --git a/src/hooks/useCombobox/utils.js b/src/hooks/useCombobox/utils.js index 46cf4ef4..290c0bd2 100644 --- a/src/hooks/useCombobox/utils.js +++ b/src/hooks/useCombobox/utils.js @@ -35,7 +35,6 @@ const propTypes = { ...commonDropdownPropTypes, items: PropTypes.array.isRequired, isItemDisabled: PropTypes.func, - selectedItemChanged: PropTypes.func, inputValue: PropTypes.string, defaultInputValue: PropTypes.string, initialInputValue: PropTypes.string, @@ -79,22 +78,9 @@ export function useControlledReducer( if ( !isInitialMount // on first mount we already have the proper inputValue for a initial selected item. ) { - let shouldCallDispatch - - if (props.selectedItemChanged === undefined) { - shouldCallDispatch = - props.itemToKey(props.selectedItem) !== - props.itemToKey(previousSelectedItemRef.current) - } else { - console.warn( - `The "selectedItemChanged" is deprecated. Please use "itemToKey instead". https://github.com/downshift-js/downshift/blob/master/src/hooks/useCombobox/README.md#selecteditemchanged`, - ) - - shouldCallDispatch = props.selectedItemChanged( - previousSelectedItemRef.current, - props.selectedItem, - ) - } + const shouldCallDispatch = + props.itemToKey(props.selectedItem) !== + props.itemToKey(previousSelectedItemRef.current) if (shouldCallDispatch) { dispatch({ diff --git a/typings/index.d.ts b/typings/index.d.ts index 6d9b426c..fcf810fa 100644 --- a/typings/index.d.ts +++ b/typings/index.d.ts @@ -555,7 +555,6 @@ export interface UseComboboxProps { isItemDisabled?(item: Item, index: number): boolean itemToString?: (item: Item | null) => string itemToKey?: (item: Item | null) => any - selectedItemChanged?: (prevItem: Item, item: Item) => boolean getA11yStatusMessage?: (options: UseComboboxState) => string highlightedIndex?: number initialHighlightedIndex?: number