chore(Downshift): update dependency to latest

[dakahn]

Updates our Downshift dependency to latest (v6.1.7)

from downshift

BREAKING CHANGES

Update TS typings for selectedItem to accept null in both useSelect and useCombobox.

To migrate to the new change, update your types or code if necessary. selectedItem, defaultSelectedItem and initialSelectedItem now have Item | null instead of Item type. PR with the changes: downshift-js/downshift#1090

Update TS typings for itemToString to accept null for the item parameter, in useSelect and useCombobox + in Downshift where this was missing. useMultipleSelection type for itemToString stays the same as it can't receive null as item.

To migrate to the new change, update your types or code if necessary. itemToString: (item: Item) => string -> itemToString: (item: Item | null) => string}. PR with the changes: downshift-js/downshift#1075 downshift-js/downshift#1105

Pass type to the onChange (onInputValueChange, onHighlightedIndexChange, onSelectedItemChange, onIsOpenChange) handler parameters, as specified in the documentation. Also updated the TS typings to reflect this + onStateChange - the type parameter was passed but it was not reflected in the TS types.

To migrate to the new change, update your types or code if necessary, better to view the changes in the PR: downshift-js/downshift#985. Important: please update to the 6.0.2 version since it contains a couple of fixes for the changes in this Breaking Change. Final changes:

stateReducer?: (
state: UseComboboxState,
actionAndChanges: UseComboboxStateChangeOptions, // UseComboboxStateChangeOptions has the correct typings
) => Partial<UseComboboxState> // this now reflects the correct return, which is the partial state.
onSelectedItemChange?: (changes: UseComboboxStateChange) => void // changes have partial state + type
onIsOpenChange?: (changes: UseComboboxStateChange) => void
onHighlightedIndexChange?: (changes: UseComboboxStateChange) => void
onStateChange?: (changes: UseComboboxStateChange) => void
onInputValueChange?: (changes: UseComboboxStateChange) => void

where

export interface UseComboboxStateChangeOptions
extends UseComboboxDispatchAction { // type and optional parameters needed to compute the next state
changes: Partial<UseComboboxState> // partial state changes proposed by the hook
}

export interface UseComboboxDispatchAction {
type: UseComboboxStateChangeTypes
shiftKey?: boolean
getItemNodeFromIndex?: (index: number) => HTMLElement
inputValue?: string
index?: number
highlightedIndex?: number
selectedItem?: Item | null
selectItem?: boolean
}

export interface UseComboboxStateChange
extends Partial<UseComboboxState> {
type: UseComboboxStateChangeTypes
}

BREAKING BEHAVIOURS

[useCombobox]: When an item is highlighted by keyboard and user closes the menu using mouse/touch, the item is not selected anymore. The only selection on Blur happens using either Tab / Shift+Tab. PR with the changes: https://github.com/downshift-js/downshift/pull/1109

[useCombobox & downshift]: When pressing Escape and the menu is open, only close the menu. When the menu is closed and there is an item selected and/or text in the input, clear the selectedItem and the inputValue. PR with the changes: https://github.com/downshift-js/downshift/issues/719

closes #11331

[netlify]

✅ Deploy Preview for carbon-components-react ready!

Name	Link
🔨 Latest commit	2433e9e
🔍 Latest deploy log	https://app.netlify.com/sites/carbon-components-react/deploys/63075edd2568a8000788361e
😎 Deploy Preview	https://deploy-preview-11331--carbon-components-react.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site settings.

[netlify]

✅ Deploy Preview for carbon-elements ready!

Name	Link
🔨 Latest commit	2433e9e
🔍 Latest deploy log	https://app.netlify.com/sites/carbon-elements/deploys/63075edd2568a80007883623
😎 Deploy Preview	https://deploy-preview-11331--carbon-elements.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site settings.

[joshblack]

Are there any user-facing breaking changes from doing a major update of downshift?

[dakahn]

updated the PR description with their changelog 👀

[jnm2377]

How should we review this?

[dakahn]

@jnm2377 sorry, for the lack of clarity there. Basically, we're updating a dependency for Dropdown, Combobox and Multiselect. So running through basically functionality, testing, and keyboard/screen reader functionality is preferable

[dakahn]

Looks like updating breaks tooltips for truncated menu items in Chrome/Chromium browsers like we're currently seeing in Firefox, which is interesting.

Could be related to the ref weirdness we're seeing in our useIsTruncated hook

[jnm2377]

Looks like updating breaks tooltips for truncated menu items in Chrome/Chromium browsers like we're currently seeing in Firefox, which is interesting.

Could be related to the ref weirdness we're seeing in our useIsTruncated hook

@dakahn is this blocked until we figure that out, then? not being able to read truncated text fully seems like an important issue, even though I think essential functionality (selecting items) still works. Idk. thoughts?

[jnm2377]

@dakahn just wanted to follow up on this. Do we think we should defer updating since it breaks truncated tooltips?

[dakahn]

yeah, until we get a handle on the existing bug we're aware of this is officially blocked id say

[tw15egan]

Did a quick run-through of all the downshift components, and the only issue I saw was that I was able to keyboard navigate to and select a disabled item in Multiselect. All other elements seemed like they behaved correctly. Also noticed an issue with the With Initial Selected Items story, with a disabled initially selected. Not sure if that is intended.

Tabbing / selecting disabled item

Initially selected item is disabled

Looks great otherwise! 🎉 👍🏻