fix(deps): update dependency downshift to v8

[renovate]

This PR contains the following updates:

Package	Change	Age	Adoption	Passing	Confidence
downshift (source)	^7.6.0 -> ^8.0.0

---

Release Notes

downshift-js/downshift (downshift)

v8.0.0

Compare Source

Features

• v8 (#​1509) (b62fe05)

BREAKING CHANGES

• Release Downshift v8.

PRs included:

https://github.com/downshift-js/downshift/pull/1440
https://github.com/downshift-js/downshift/pull/1445
https://github.com/downshift-js/downshift/pull/1463
https://github.com/downshift-js/downshift/pull/1510
https://github.com/downshift-js/downshift/pull/1482

Changes

These changes will also be covered in the V8 migration guide.

isItemDisabled

Both useCombobox and useSelect now support the isItemDisabled function. This new API is used to mark menu items as disabled, and as such remove the from the navigation and prevent them from being selected. The old API required passing the disabled prop to the getItemProps function. This old API has been removed and you will receive a console warning if you are trying to use the disabled prop in getItemProps.

Example of API migration:

Old:

const items = [{value: 'item1'}, {value: 'item2'}]

const {getInputProps, ...rest} = useCombobox({items})

return (
  // ... rest
  <li {...getItemProps({item, disabled: item.value === 'item2'})}>
)

New:

const items = [{value: 'item1'}, {value: 'item2'}]

const {getInputProps, ...rest} = useCombobox({items, isItemDisabled(item, _index) { return item.value === 'item2' }})

return (
  // ... rest
  <li {...getItemProps({item})}>
)

The API for Downshift remains unchange.

useCombobox input click

ARIA 1.2 recommends to toggle the menu open state at input click. Previously, in v7, the menu was opened on receiving focus, from both mouse and keyboard. Starting with v8, input focus will not trigger any state change anymore. Only the input click event will be handled and will trigger a menu toggle. Consequently:

• getInputProps will not return any Focus event handler.
• getInputProps will return a Click event handler.
• useCombobox.stateChangeTypes.InputFocus has been removed.
• useCombobox.stateChangeTypes.InputClick has been added instead.

We recommend having the default toggle on input click behaviour as it's part of the official ARIA combobox 1.2 spec, but if you wish to override it and not toggle the menu on click, use the stateReducer:

function stateReducer(state, actionAndChanges) {
  const {changes, type} = actionAndChanges
  switch (type) {
    case useCombobox.stateChangeTypes.InputClick:
      return {
        ...changes,
        isOpen: state.isOpen, // do not toggle the menu when input is clicked.
      }
    default:
      return changes
  }
}

If you want to return to the v7 behaviour and open the menu on focus, keep the reducer above so you remove the toggle behaviour, and call the openMenu imperative function, returned by useCombobox, in a onFocus handler passed to
getInputProps:

<input
  {...getInputProps({
    onFocus() {
      openMenu()
    },
  })}
/>

Consider to use the default 1.2 ARIA behaviour provided by default in order to align your widget to the accessibility official spec. This behaviour consistency improves the user experience, since all comboboxes should behave the same and
there won't be need for any additional guess work done by your users.

Getter props return value types

Previously, the return value from the getter props returned by both Downshift and the hooks was any. In v8 we improved the types in order to reflect what is actually returned: the default values return by the getter prop function and
whatever else the user passes as arguments. The type changes are done in this PR, make sure you adapt your TS code, if applicable.

Also, in the Downshift component, the return values for some getter prop values have changed from null to undefined, since that is what HTML elements expect (value or undefined). These values are also reflected in the TS types.

• getRootProps: 'aria-owns': isOpen ? this.menuId : nullundefined,
• getInputProps:
  • 'aria-controls': isOpen ? this.menuId : nullundefined
  • 'aria-activedescendant': isOpen && typeof highlightedIndex === 'number' &&
    highlightedIndex >= 0 ? this.getItemId(highlightedIndex) : nullundefined
• getMenuProps: props && props['aria-label'] ? nullundefined : this.labelId,

environment propTypes

The environment prop is useful when you are using downshift in a context
different than regular DOM. Its TS type has been updated to contain Node and
the propTypes have also been updated to reflect the properties which are
required by downshift from environment.

---

Configuration

📅 Schedule: Branch creation - "on Monday every 9 weeks of the year starting on the 3rd week" (UTC), Automerge - At any time (no schedule defined).

🚦 Automerge: Disabled by config. Please merge this manually once you are satisfied.

♻ Rebasing: Whenever PR is behind base branch, or you tick the rebase/retry checkbox.

🔕 Ignore: Close this PR and you won't be reminded about this update again.

---

• If you want to rebase/retry this PR, check this box

---

This PR has been generated by Mend Renovate. View repository job log here.

[renovate]

Edited/Blocked Notification

Renovate will not automatically rebase this PR, because it does not recognize the last commit author and assumes somebody else may have edited the PR.

You can manually request rebase by checking the rebase/retry box above.

⚠ Warning: custom changes will be lost.

[coveralls]

coverage: 95.633% (+0.01%) from 95.623% when pulling 0070575 on renovate/downshift-8.x into 18a8cb4 on main.

[jzempel]

@lucijanblagonic the Downshift v8 update changes listbox expansion behavior for clicking the combobox input. Our adaptation wires this up for isAutocomplete only and can be observed here. Compare with current here. A few things to note during your review:

• in making this update, Downshift noted a portion of the WAI-ARIA APG that I had missed previously and, while noted as "possible" (optional), provides normative guidance
• when applied upstream, this logic update will bring the new Combobox into parity with the legacy Autocomplete (listbox expands on input click) and the legacy Combobox (listbox remains collapsed on input click)
• nothing changes for the select-only isEditable={false} combobox
• for certain edge cases (ex. perhaps there are no options to display until the user types – at which point they are fetched from the server), the consumer may take control of the isExpanded prop to determine expansion with finer-grained precision
• fwiw, the functionality aligns better with combobox expectations set by google.com while still supporting search style behavior seen with the Algolia search on www.garden.com

After thinking deeply about the pros/cons of this change, I think this upgrade is the right course of action. But I want to make sure you're onboard before moving forward.

[jzempel]

Downshift was throwing console errors for not calling the combobox getters

[geotrev]

LGTM! Thanks for the explanations as well.

[geotrev]

🚲 triggerProps?.onClick(event) also works, but I don't feel strongly. 🙂

[jzempel]

I don't think it does. Instead of testing for invalid triggerProps, the updated Downshift is not guaranteeing that the trigger props will contain a valid onClick ... and we can't triggerProps.onClick?(event) 😉

[geotrev]

Just checking re: any so I'm on the same page - is the intent here is to defer all typing to Garden's getListboxProps and prevent transient TS errors that may confuse consumers?

[jzempel]

Sort of. imo, while well-intended, the associated Downshift PR kind of made a mess out of the getter prop types to the point where there was no reasonable combo that could satisfy what is going on – so I hit the any eject button. At least we're coercing the options object below to be of a valid Downshift type for the function call. But this is all deeply internal to the hook code and has no implications for the well-typed external API.