Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Update dependency react-select from v2.4.4 to v5 #198

Open
wants to merge 1 commit into
base: master
Choose a base branch
from
Open

Update dependency react-select from v2.4.4 to v5 #198

wants to merge 1 commit into from

Conversation

renovate[bot]
Copy link
Contributor

@renovate renovate bot commented Jan 6, 2023 •
edited
Loading

This PR contains the following updates:

Package Change Age Adoption Passing Confidence
react-select (source) 2.4.4 -> 5.8.2 age adoption passing confidence

Release Notes

JedWatson/react-select (react-select)

v5.8.2

Compare Source

Patch Changes

v5.8.1

Compare Source

v5.8.0

Compare Source

Minor Changes

  • 884f1c42 #​5758 Thanks @​Ke1sy! - 1. Added 'aria-activedescendant' for input and functionality to calculate it;

    1. Added role 'option' and 'aria-selected' for option;
    2. Added role 'listbox' for menu;
    3. Added tests for 'aria-activedescendant';
    4. Changes in aria-live region:
    • the instructions how to use select will be announced only one time when user focuses the input for the first time.
    • instructions for menu or selected value will be announced only once after focusing them.
    • removed aria-live for focused option because currently with correct aria-attributes it will be announced by screenreader natively as well as the status of this option (active or disabled).
    • separated ariaContext into ariaFocused, ariaResults, ariaGuidance to avoid announcing redundant information and higlight only current change.

v5.7.7

Compare Source

Patch Changes

v5.7.6

Compare Source

Patch Changes

v5.7.5

Compare Source

Patch Changes

v5.7.4

Compare Source

Patch Changes

v5.7.3

Compare Source

Patch Changes

v5.7.2

Compare Source

Patch Changes

v5.7.1

Compare Source

Patch Changes

v5.7.0

Compare Source

Minor Changes

v5.6.1

Compare Source

Patch Changes

v5.6.0

Compare Source

Minor Changes

v5.5.9

Compare Source

Patch Changes

v5.5.8

Compare Source

Patch Changes
  • 1ad6de4e #​5084 Thanks @​kosciolek! - When focusing a dropdown option, the numbers included in the aria live region take filtering into consideration.

v5.5.7

Compare Source

Patch Changes

v5.5.6

Compare Source

Patch Changes

v5.5.5

Compare Source

Patch Changes

v5.5.4

Compare Source

Patch Changes

v5.5.3

Compare Source

Patch Changes

v5.5.2

Compare Source

Patch Changes

v5.5.1

Compare Source

Patch Changes

v5.5.0

Compare Source

Minor Changes

v5.4.0

Compare Source

Minor Changes

v5.3.2

Compare Source

Patch Changes

v5.3.1

Compare Source

Patch Changes

v5.3.0

Compare Source

Minor Changes
Patch Changes

v5.2.2

Compare Source

Patch Changes

v5.2.1

Compare Source

Patch Changes

v5.2.0

Compare Source

Minor Changes
Patch Changes

v5.1.0

Compare Source

Minor Changes
Patch Changes

v5.0.0

Compare Source

Upgrade Guide

Summary

  • Convert to TypeScript (#​4489) - TypeScript types now come packaged with react-select so you no longer need to have @types/react-select installed; we no longer include Flow types
  • Drop IE11 support (#​4625, #​4720, #​4634) - this allows us to make changes to our CSS that we've wanted to make for a long time as well as remove unnecessary JS solutions (those changes are noted below)
  • Use forwardRef for all wrapped components (#​4489) - this means that if you were accessing anything on the Select instance using a ref, the ref will now reference the internal Select directly (see below for how to upgrade)
  • Replace HOCs with hooks (#​4489) - if you were using our HOCs to create custom Selects (i.e., makeCreatableSelect, mangeState, makeAsyncSelect) these have now been replaced by hooks (i.e., useCreatable, useStateManager, useAsync)
  • Remove dependency on AutosizeInput (#​4625) - our new solution uses CSS grid which IE11 does not fully support; also .prefix__input now targets the input and NOT the container
  • Improve screen reader experience (#​4676) - this isn't a breaking change in the API but it does change the screen reader announcements
  • Use CSS grid for single value layout (#​4720) - this also isn't a breaking change in the API but is it a change in the styles since it switches to using CSS grid (not fully supported by IE11) for single-value Selects
  • Remove readonly attribute on our DummyInput (#​4634) - this results in better accessibility but uses caret-color which is not available on IE11

Details

Convert to TypeScript

We've rewritten react-select in TypeScript which means you can remove any dependencies on @types/react-select. If you were using the Flow types than look into contributing types for v5 to flow-typed.

Here are the most notable changes when replacing @types/react-select with our packaged types:

@​types/react-select react-select Notes
OptinTypeBase no replacement Options can be any type (if using getOptionValue and getOptionLabel) so there's no longer a base type for options
OptionsType Options
GroupTypeBase GroupBase
GroupedOptionsType no replacement This is equivalent to ReadonlyArray<Group>
ValueType OnChangeValue
InputActionTypes InputAction
NamedProps Props
Select (the ref type) SelectInstance See "Use forwardRef for all wrapped components" for more details
AsyncSelect (the ref type) SelectInstance See "Use forwardRef for all wrapped components" for more details
CreatableSelect (the ref type) SelectInstance See "Use forwardRef for all wrapped components" for more details
AsyncCreatableSelect (the ref type) SelectInstance See "Use forwardRef for all wrapped components" for more details

If you were previously importing a type from the src directory when using @types/react-select:

import { ... } from 'react-select/src/...';

These should now be imported from the dist/declarations/src directory:

import { ... } from 'react-select/dist/declarations/src/...';

We export any types from the main entry point that we think might be useful to the user. If you are using a type that is not exported from the main entry point please open a PR or issue so that we can add it.

If you are using custom props for the Select component you can use module augmentation to add them to the Select prop types:

declare module 'react-select/dist/declarations/src/Select' {
  export interface Props<
    Option,
    IsMulti extends boolean,
    Group extends GroupBase<Option>
  > {
    myCustomProp: string;
  }
}
Drop IE11 support

This allows us to use modern CSS in order to improve the quality of react-select and remove excessive JavaScript code to work around not having the ability to use modern CSS. If you need IE11 support either:

  1. Stay on v4.
  2. Attempt to use our Styles API and/or Components API to override styles and/or components that don't support IE11. The only change that might be hard to override is "Remove readonly attribute on our DummyInput" since you can't override the DummyInput component with the Styles or Components API.
  3. If there are simple changes that make react-select compatible with IE11, open a PR. We are unlikely to provide official support for IE11 since supporting IE11 makes maintaining react-select a lot more difficult and holds us back from changes we want to make, but we also are glad to accept simple changes if they make your life easier.
Use forwardRef for all wrapped components

NOTE: Accessing any of the internals of the Select component using refs is not part of our public API. The internals of the Select component can change at any time (including in minor and patch releases). The only methods on the Select component that are part of the public API are the focus() and blur() methods.

react-select exports five components: BaseSelect, CreatableSelect, Select (the default export), AsyncSelect, AsyncCreatableSelect. The last four components are wrappers around the BaseSelect. Previously the ref for each of these components was pointing to itself, but now we use forwardRef which means that the refs for all five components now point to BaseSelect.

The focus() and blur() methods are untouched by this change. However if you were accessing the internals of the BaseSelect component, you will need to update how you were accessing the BaseSelect. Here is how to update access to the BaseSelect component:

Component v4 v5
BaseSelect ref ref
CreatableSelect ref.select.select ref
Select ref.select ref
AsyncSelect ref.select.select ref
AsyncCreatableSelect ref.select.select.select ref
Replace HOCs with hooks

The primary reason for this change is that hooks combined with generic components are easier to type in TypeScript than HOCs combined with generic components. These HOCs/hooks are considered advanced usage.

If you were using the HOCs, it shouldn't be too hard to replace them with its corresponding hook (i.e., useStateManager, useCreatable, or useAsync). As an example, here is how the state managed Select (the default export) used to be constructed with the mangeState HOC:

const Select = manageState(SelectBase);

With hooks it is now constructed like this:

const Select = (props) => {
  const baseSelectProps = useStateManager(props);
  return <SelectBase {...baseSelectProps} />;
}

Consult the source code for how the other components are constructed.

Remove dependency on AutosizeInput

This is an exciting change because we get to drop our dependency on react-input-autosize. We now use a pure CSS solution to auto-size the input, however this means that we have to drop support for IE11 since IE11 does not fully support CSS grid. As part of this refactor the .prefix__input CSS class now targets the input itself and NOT the container. See #​4625 for more details.

Improve screen reader experience

The following improvements have been made for screen reader users:

  • NVDA now announces the context text when initially focused
  • Selected option(s) (single and multi) are now announced when initially focused
  • VoiceOver now announces the context text when re-focusing
  • The clear action is now announced
  • Placeholder text is now announced
  • Mobile VoiceOver is now able to remove selected multi options

Also we've added the role of combobox and the required ARIA attributes to the Input and DummyInput components to allow JAWS support and a better screen reader experience overall. See #​4695 for more details.

Use CSS grid for single value layout

Previously the absolution positioning of both the value and the placeholder pulled them out of the flow, and thus the component itself collapsed down when used as a flex child. To solve this we are now using CSS grid for the single value layout.

before-after
Remove readonly attribute on our DummyInput

Previously we added the readonly attribute to the DummyInput (when isSearchable is set to false) in order to hide the flashing cursor and prevent devices from showing a virtual keyboard. However the readonly attribute causes the DummyInput to be removed from the tab order in iOS Safari. In order to solve this we're replacing the readonly attribute with setting the caret-color CSS prop (which IE11 does not support) to transparent and setting the inputMode attribute on the <input> to none.

Changelog

Major Changes

  • ef87c3ac #​4683 Thanks @​Methuselah96! - React-Select has been converted from Flow to TypeScript.

    Other changes for v5 include usage of forwardRef, new hooks for stateManager, async and creatable components, and more reliable filtering implementaion with new options in the creatable variant.

Patch Changes

  • 10225290 #​4720 - Updated the layout for the singleValue input/placeholder/container so that it works better when used in flex layouts.

  • 53f1972b #​4731 Thanks @​JedWatson! - MultiValue key now includes a hyphen between the value and the index to prevent edge cases where you could get a duplicate key error

  • b41f4ceb #​4704 Thanks @​Rall3n! - Fix findDOMNode deprecation by adding refs to transition components

  • 4b028829 #​4634 - The readonly attribute has been removed from the DummyInput to improve accessibility

  • 7fcec537 #​4697 - Add the role of combobox and the required ARIA attributes to the Input and DummyInput components to allow JAWS support and a better screen reader experience overall.

  • ca2c0e5b #​4756 Thanks @​fdcds! - Add option field to type of CreateOptionActionMeta

  • 9e82aadc #​4676 - The following improvements have been made for screen reader users:

    • NVDA now announces the context text when initially focused
    • Selected option/s (single and multi) are now announced when initially focused
    • VoiceOver now announces the context text when re-focusing
    • The clear action is now announced
    • Placeholder text is now announced
    • Mobile VoiceOver is now able to remove selected multi options

  • 638f5455 #​4702 Thanks @​Methuselah96! - The Option generic is no longer required to extend the OptionBase type

  • 23cea0b5 #​4782 Thanks @​Methuselah96! - Fix type of loadingMessage prop to allow it to return any ReactNode

v4.3.1

Compare Source

Patch Changes
  • 2c915d10 #​4577 - Bump @​emotion/cache to v11.4.0 which fixes an issue where different versions of Emotion running at the same time causes styles to disappear in production.

v4.3.0

Compare Source

Minor Changes
Patch Changes
Documentation Updates

v4.2.1

Compare Source

Patch Changes

v4.2.0

Compare Source

Minor Changes
Patch Changes

v4.1.0

Compare Source

Minor Changes
Patch Changes

v4.0.2

Compare Source

Patch Changes

v4.0.1

Compare Source

Patch Changes

v4.0.0

Compare Source

Upgrade Guide

Summary

Details

Standardize value passed to onChange

This change makes it so that the first parameter passed to the onChange callback will now always be an array of options if isMulti is set to true and will always be a single option or null if isMulti is set to false. Previously the first parameter of onChange could be an array or null when isMulti was set to true.

That means if you were previously using nullish coalescing in order to handle null for isMulti:

<Select
  isMulti
  onChange={(newValues) =>  setValues(newValues ?? [])}
/>

You can now remove the nullish coalescing because onChange will always be an array when isMulti is set to true:

<Select
  isMulti
  onChange={(newValues) =>  setValues(newValues)}
/>
Emotion 11

The NonceProvider component now requires a cacheKey prop that corresponds to the newly required key prop for the Emotion cache. This won't affect you if you aren't using NonceProvider. See #​4283 for more details.

Remove usage of UNSAFE React methods

This isn't necessarily a breaking change, but it required a large refactor in order to accomplish so we released this in a major upgrade in case it has some unintended consequences.

Changelog

Major Changes
Patch Changes

v3.2.0

Compare Source

Minor Changes

  • c615e93d #​4084 Thanks @​JedWatson! - Changed the cx and getValue props that are passed to components into instance properties, which means they now pass a referential equality check on subsequent renders.

    This is helpful, for example, when you're optimising the performance of rendering custom Option components - see #​3055

  • 72f6036f #​4306 Thanks @​bladey! - Remove duplicate prop createOptionPosition

Patch Changes

v3.1.1

Compare Source

Patch Changes

v3.1.0

Compare Source

Minor Changes
Patch Changes

Configuration

📅 Schedule: Branch creation - At any time (no schedule defined), 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 was generated by Mend Renovate. View the repository job log.

@github-actions
Copy link

github-actions bot commented Jan 6, 2023 •
edited
Loading

Visit the preview URL for this PR (updated for commit 5f58dcc):

https://ent-ninkasi-dev--pr198-renovate-react-selec-pzn2tv2e.web.app

(expires Wed, 10 May 2023 05:32:43 GMT)

🔥 via Firebase Hosting GitHub Action 🌎

Sign: 3b0561e5cc3d851fe15278e5840d2aac3e38a547

@renovate renovate bot force-pushed the renovate/react-select-5.x branch 8 times, most recently from e474c47 to 76aafd4 Compare January 6, 2023 23:58
@sonarcloud
Copy link

sonarcloud bot commented Jan 6, 2023

Kudos, SonarCloud Quality Gate passed!    Quality Gate passed

Bug A 0 Bugs
Vulnerability A 0 Vulnerabilities
Security Hotspot A 0 Security Hotspots
Code Smell A 0 Code Smells

No Coverage information No Coverage information
0.0% 0.0% Duplication

@renovate renovate bot force-pushed the renovate/react-select-5.x branch from 76aafd4 to be355bc Compare February 15, 2023 12:49
@renovate renovate bot force-pushed the renovate/react-select-5.x branch 2 times, most recently from 9fd2809 to 17a3845 Compare March 22, 2023 22:31
@renovate renovate bot force-pushed the renovate/react-select-5.x branch from 17a3845 to 5f58dcc Compare May 3, 2023 05:30
@renovate renovate bot force-pushed the renovate/react-select-5.x branch from 5f58dcc to d7c0ed5 Compare July 13, 2023 16:00
@renovate renovate bot force-pushed the renovate/react-select-5.x branch 3 times, most recently from 132cc78 to d84da09 Compare October 2, 2023 07:56
@renovate
Copy link
Contributor Author

renovate bot commented Oct 24, 2023 •
edited
Loading

⚠ Artifact update problem

Renovate failed to update an artifact related to this branch. You probably do not want to merge this PR as-is.

♻ Renovate will retry this branch, including artifacts, only when one of the following happens:

  • any of the package files in this branch needs updating, or
  • the branch becomes conflicted, or
  • you click the rebase/retry checkbox if found above, or
  • you rename this PR's title to start with "rebase!" to trigger it manually

The artifact failure details are included below:

File name: package-lock.json
npm ERR! code ERESOLVE
npm ERR! ERESOLVE could not resolve
npm ERR! 
npm ERR! While resolving: @entur/micro-frontend@0.4.0
npm ERR! Found: react@16.14.0
npm ERR! node_modules/react
npm ERR!   react@"16.14.0" from the root project
npm ERR!   peer react@"^16.11.0 || ^17" from @auth0/auth0-react@1.2.0
npm ERR!   node_modules/@auth0/auth0-react
npm ERR!     @auth0/auth0-react@"1.2.0" from @entur/auth-provider@1.1.0
npm ERR!     node_modules/@entur/auth-provider
npm ERR!       @entur/auth-provider@"1.1.0" from the root project
npm ERR!   27 more (@entur/auth-provider, @material-ui/core, ...)
npm ERR! 
npm ERR! Could not resolve dependency:
npm ERR! peer react@"^17.0.2 || ^18.0.0" from @entur/micro-frontend@0.4.0
npm ERR! node_modules/@entur/micro-frontend
npm ERR!   @entur/micro-frontend@"0.4.0" from the root project
npm ERR! 
npm ERR! Conflicting peer dependency: react@18.2.0
npm ERR! node_modules/react
npm ERR!   peer react@"^17.0.2 || ^18.0.0" from @entur/micro-frontend@0.4.0
npm ERR!   node_modules/@entur/micro-frontend
npm ERR!     @entur/micro-frontend@"0.4.0" from the root project
npm ERR! 
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.
npm ERR! 
npm ERR! 
npm ERR! For a full report see:
npm ERR! /tmp/worker/d7fe63/83a3af/cache/others/npm/_logs/2023-11-06T11_45_30_689Z-eresolve-report.txt

npm ERR! A complete log of this run can be found in: /tmp/worker/d7fe63/83a3af/cache/others/npm/_logs/2023-11-06T11_45_30_689Z-debug-0.log

@renovate renovate bot force-pushed the renovate/react-select-5.x branch from d84da09 to cd6c538 Compare October 24, 2023 07:58
@renovate renovate bot force-pushed the renovate/react-select-5.x branch from cd6c538 to f4f669b Compare November 6, 2023 11:45
@renovate Renovate
Copy link
Contributor Author

renovate bot commented Sep 19, 2024 •
edited
Loading

⚠️ Artifact update problem

Renovate failed to update an artifact related to this branch. You probably do not want to merge this PR as-is.

♻ Renovate will retry this branch, including artifacts, only when one of the following happens:

  • any of the package files in this branch needs updating, or
  • the branch becomes conflicted, or
  • you click the rebase/retry checkbox if found above, or
  • you rename this PR's title to start with "rebase!" to trigger it manually

The artifact failure details are included below:

File name: package-lock.json
npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR! 
npm ERR! While resolving: ninkasi@0.5.7
npm ERR! Found: react@18.2.0
npm ERR! node_modules/react
npm ERR!   react@"18.2.0" from the root project
npm ERR!   peer react@"^16.8.0 || ^17.0.0 || ^18.0.0" from react-select@5.8.2
npm ERR!   node_modules/react-select
npm ERR!     react-select@"5.8.2" from the root project
npm ERR! 
npm ERR! Could not resolve dependency:
npm ERR! peer react@"^16.14.0" from react-dom@16.14.0
npm ERR! node_modules/react-dom
npm ERR!   react-dom@"16.14.0" from the root project
npm ERR!   peer react-dom@"^16.8.0 || ^17.0.0 || ^18.0.0" from react-select@5.8.2
npm ERR!   node_modules/react-select
npm ERR!     react-select@"5.8.2" from the root project
npm ERR! 
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force, or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.
npm ERR! 
npm ERR! See /tmp/renovate/cache/others/npm/eresolve-report.txt for a full report.

npm ERR! A complete log of this run can be found in:
npm ERR!     /tmp/renovate/cache/others/npm/_logs/2024-10-26T04_36_14_692Z-debug-0.log

@renovate renovate bot force-pushed the renovate/react-select-5.x branch from bf7994c to 5f86c39 Compare October 26, 2024 04:36
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers
No reviews
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.
0 participants