⬆️ deps: Upgrade dependency downshift to v9. #822

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 : ~~null~~undefined,
getInputProps:
- 'aria-controls': isOpen ? this.menuId : ~~null~~undefined
- 'aria-activedescendant': isOpen && typeof highlightedIndex === 'number' &&
  highlightedIndex >= 0 ? this.getItemId(highlightedIndex) : ~~null~~undefined
getMenuProps: props && props['aria-label'] ? ~~null~~undefined : 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 - "after 10pm every weekday,before 5am every weekday,every weekend" (UTC), Automerge - At any time (no schedule defined).

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

♻ Rebasing: Whenever PR becomes conflicted, 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.

codecov · 2024-03-21T22:16:12Z

Codecov Report

All modified and coverable lines are covered by tests ✅

Project coverage is 66.22%. Comparing base (61c921e) to head (303bea4).
Report is 1 commits behind head on main.

Additional details and impacted files

@@            Coverage Diff             @@
##             main     #822      +/-   ##
==========================================
- Coverage   66.56%   66.22%   -0.35%     
==========================================
  Files         696      696              
  Lines        9678     9678              
  Branches     1334     1334              
==========================================
- Hits         6442     6409      -33     
- Misses       2743     2785      +42     
+ Partials      493      484       -9

Flag	Coverage Δ
test	`69.72% <ø> (ø)`
test-app	`55.83% <ø> (-0.40%)`	⬇️

Flags with carried forward coverage won't be shown. Click here to find out more.

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

make-github-pseudonymous-again

Requires manual intervention to migrate to the new API: https://togithub.com/downshift-js/downshift/blob/master/src/hooks/MIGRATION_V8.md

⬆️ deps: Upgrade dependency downshift to v9

303bea4

renovate bot requested a review from make-github-pseudonymous-again as a code owner March 21, 2024 22:11

renovate bot added the deps This issue has to do with dependencies label Mar 21, 2024

renovate bot temporarily deployed to Snyk March 21, 2024 22:11 Inactive

make-github-pseudonymous-again requested changes Mar 22, 2024

View reviewed changes

make-github-pseudonymous-again added the requires-manual-intervention This automatically created PR requires manual intervention before merging. label Mar 22, 2024

renovate bot changed the title ~~⬆️ deps: Upgrade dependency downshift to v9~~ ⬆️ deps: Upgrade dependency downshift to v9. Apr 8, 2024

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

⬆️ deps: Upgrade dependency downshift to v9. #822

⬆️ deps: Upgrade dependency downshift to v9. #822

renovate bot commented Mar 21, 2024 •

edited

codecov bot commented Mar 21, 2024 •

edited

make-github-pseudonymous-again left a comment

⬆️ deps: Upgrade dependency downshift to v9. #822

Are you sure you want to change the base?

⬆️ deps: Upgrade dependency downshift to v9. #822

Conversation

renovate bot commented Mar 21, 2024 • edited

Release Notes

Bug Fixes

Bug Fixes

Bug Fixes

Bug Fixes

Features

BREAKING CHANGES

Features

Features

Bug Fixes

Bug Fixes

Bug Fixes

Features

Bug Fixes

Bug Fixes

Bug Fixes

Bug Fixes

Features

Bug Fixes

Features

Bug Fixes

Bug Fixes

Features

BREAKING CHANGES

PRs included:

Changes

isItemDisabled

useCombobox input click

Getter props return value types

environment propTypes

Configuration

codecov bot commented Mar 21, 2024 • edited

Codecov Report

make-github-pseudonymous-again left a comment

Choose a reason for hiding this comment

renovate bot commented Mar 21, 2024 •

edited

codecov bot commented Mar 21, 2024 •

edited