V6 (Chakra UI V3)

[csandman]

This is still very much a work in progress, I'm just going to leave this open in draft state while I work on it.

To test out the Chakra V3 compatible version, install it using the following.

npm i chakra-react-select@next
# or
yarn add chakra-react-select@next

---

Just to keep track, here are some loosely formatted notes on what changed:

• All of the styles pulled from the end user's theme are now using styles from the select component (except for the control which still uses input styles).
• Everything that was colorScheme is now colorPalette
  • tagColorScheme -> tagColorPalette
  • selectedOptionColorScheme -> selectedOptionColorPalette
  • An individual option's colorScheme -> colorPalette
• Some props were replaced on chakraComponents.LoadingIndicator:
  • emptyColor -> trackColor (this isn't a real prop, but it maps to the --spinner-track-color css variable).
  • speed -> animationDuration
  • thickness -> borderWidth
  • The prop colorPalette was also added to the loading indicator which can be used to set the color without specifying a token number (responds better to changes between light and dark mode).
• focusBorderColor was replaced with focusRingColor and errorBorderColor was removed.
• All boolean props have had the is prefix removed:
  • isRequired is now the required attribute that's already built-in to react-select.
  • isReadOnly -> readOnly
  • isInvalid -> invalid
  • Adds disabled, which will override the isDisabled prop built-in to react-select
    • This is just to keep the props consistent with each other.
• Add a default for the menuPlacement of "auto". This is to more closely match the default flipping behavior of the Chakra Select.

---

EDIT: I just released the first release candidate version v6.0.0-rc.0, which can be installed using the rc tag:

npm i chakra-react-select@rc

For more info on what's changed and what's left, see this comment: #341 (comment)

---

Remaining Tasks

• Update the docs for all of the custom props
• Update the demo to include examples for all of the custom props
• Replace all images in the readme
• Fix the useSize hook
• Update stack blitz demo links in the readme
• Check all readme copy to ensure everything is updated to v3

[github-actions]

📊 Package size report   -2.59%↓

File	Before	After
dist/index.d.mts	19.9 kB	-1.83%↓19.5 kB
dist/index.d.ts	19.9 kB	-1.83%↓19.5 kB
dist/index.js	32.5 kB	-4.78%↓31.0 kB
dist/index.mjs	30.9 kB	-4.92%↓29.4 kB
package.json	3.1 kB	-3.75%↓3.0 kB
README.md	47.5 kB	-0.18%↓47.4 kB
Total (Includes all files)	154.9 kB	-2.59%↓150.9 kB
Tarball size	31.1 kB	-4.86%↓29.6 kB

Unchanged files

File	Size
LICENSE.md	1.1 kB

_{🤖 This report was automatically generated by pkg-size-action}

[pkg-pr-new]

Open in Stackblitz • chakra-react-select-demo

npm i https://pkg.pr.new/chakra-react-select@341

commit: cd42975

[JAD3N]

The react-select dependency on the V6 branch has a peer dependency of up-to React 18. Would it be fine to bump the version to 5.9.0 so there are no peer dependency warnings when using React 19?

[csandman]

The react-select dependency on the V6 branch has a peer dependency of up-to React 18. Would it be fine to bump the version to 5.9.0 so there are no peer dependency warnings when using React 19?

@JAD3N Good callout, I had seen the release notification but forgot to handle the implementation. I just went ahead and published v6.0.0-rc.3 which updated the peer dependency for react-select to be a bit more lenient, and allow for react-select ^5.8.0 (anything in the 5.x range above 5.8).

In order to ensure everything still works, I also went ahead and updated all of the dependencies of the demo so that is now also on react@19, and everything is working like a charm! Give it a try when you get a chance.

---

EDIT: Actually, I just pushed one more new version with a minimum react-select version of v5.9.0 haha. This should make it easier for people to upgrade without manually upgrading the nested dependency with something like npm upgrade. The latest version is now v6.0.0-rc.4.