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.

This version is now in the final stages, and should be fully production ready! For anyone interested in upgrading to Chakra v3, you can install the latest version of this package by using the rc tag:

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

I included a checklist of remaining items that need to be finished before publishing a full release at the bottom of this post. At this point, it's just documentation changes.

Here is a list of breaking changes that should be kept in mind when upgrading:

• 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, as there is no longer any equivalent prop that exists.
• 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.

---

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.15%↓

File	Before	After
dist/index.d.mts	19.9 kB	-1.71%↓19.6 kB
dist/index.d.ts	19.9 kB	-1.71%↓19.6 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	-4.3%↓3.0 kB
README.md	47.5 kB	1%↑48.1 kB
Total (Includes all files)	154.9 kB	-2.15%↓151.6 kB
Tarball size	31.1 kB	-4.32%↓29.7 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: 4321ee3

[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.

[maulik13]

I have been using rc.4 and it has been working great so far. I had to adjust some of the old styling, but the it was more of removing them since the default out of the box in chakra v3 works great.

[csandman]

I have been using rc.4 and it has been working great so far. I had to adjust some of the old styling, but the it was more of removing them since the default out of the box in chakra v3 works great.

Thanks for the feedback! When you say "removing them", do you mean removing custom styling you previously had using the chakraStyles prop or something?

---

The goal of the styling for this package has always been to rely on Chakra styles directly as much as possible, adding only minimal overrides to bridge the gap between the differences in DOM structure between the built-in Chakra components and React Select components, as well as their differences in the absolute positioning of the popover. Previously, I had to rely on pulling in styles from the closest available counterpart to a select, that being the Chakra Menu. However, with the addition of the new custom Select component in Chakra v3, along with them making the components/theme styles much more granular, the components that make up React Select and the Chakra Select component align much more closely overall. This allowed me to remove many of the custom style overrides I had previously included just to render the component properly.

Hopefully, this should make it much easier for people to rely on their own theme styles in order to make this component appear as they'd like it to. And also to hopefully be styled more like they'd expect it to be in general, with less quirks when it comes to styles that are unexpectedly necessary to override.

[csandman]

Ok all, the official release is most likely coming Monday! Thanks for all the support!

[maulik13]

I have been using rc.4 and it has been working great so far. I had to adjust some of the old styling, but the it was more of removing them since the default out of the box in chakra v3 works great.

Thanks for the feedback! When you say "removing them", do you mean removing custom styling you previously had using the chakraStyles prop or something?

Sorry for the late reply, I meant that the old styling was specific to chakra-v2 customization to match my app. It did not break anything (if I remember correctly), but it was more of just a small clean up. Looking forward to the new release :D

[csandman]

v6 is officially released, give it a try and let me know if anything isn't working right!