6.0.0

Finally, a Chakra V3 compatible version of Chakra React Select is ready to go! There were many breaking changes in the V3 release of Chakra UI, so this version took a while, but it's now ready for use in production. Thanks to everyone who tested out the pre-releases and gave feedback.

The docs should be fully updated, but if anything doesn't make sense after the release, don't hesitate to post an issue or a discussion. Unfortunately, due to the size of this release, there won't be a codemod available for migrating (similar to the core Chakra library). Here are all of the breaking changes that should be noted when upgrading.

Breaking Changes

• Most of the styles pulled from the theme are now using styles from Chakra's new Select component.
  • The exceptions are the Control, which still uses styles from the Input theme, and the MultiValue components, which still pull their styles from the Tag theme. The docs have been updated to list out which theme styles are being used for each React Select sub-component: https://github.com/csandman/chakra-react-select#theme-styles.
• Everything that was previously named colorScheme is now named colorPalette: https://www.chakra-ui.com/docs/get-started/migration#colorscheme-prop
  • tagColorScheme is now tagColorPalette.
  • selectedOptionColorScheme is now selectedOptionColorPalette.
  • An individual option's colorScheme key is now colorPalette.
• Some props were replaced on chakraComponents.LoadingIndicator:
  • emptyColor is now trackColor (this isn't a real prop, but it maps to the --spinner-track-color css variable).
  • speed is now animationDuration.
  • thickness is now 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).
• The LoadingIndicator component no longer changes size in response to changes to the root size prop. With the new default size, the default spinner size ended up looking the best across all three select sizes.
• 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: https://www.chakra-ui.com/docs/get-started/migration#boolean-props
  • isRequired is now the required attribute that's already built-in to react-select. It will behave the same as the required prop on any other Chakra component.
  • isReadOnly is now readOnly
  • isInvalid is now invalid. This prop was removed from the core Input, Select, and Textarea components in the Chakra UI library in favor of passing them into a wrapping Field.Root. However, they were left on this package due to many users not always wrapping the Select: https://www.chakra-ui.com/docs/get-started/migration#input-select-textarea
  • Adds disabled, which will override the isDisabled prop built-in to react-select
    • This is just to keep the props consistent with the other Chakra prop names. The isDisabled prop from React Select will still function as it did previously.
• Add a default for the menuPlacement of "auto". This is to more closely match the default flipping behavior of the Chakra Select.

---

One other change to note is that most of the other custom StackBlitz demos were removed from the readme. These were very time consuming to maintain, so they were removed to prevent confusion. However, most of the advanced examples were added to the main demo, so if you'd like to see how any of them have changed, you can check there.

The main demo is now a direct copy of the demo project included in this repo. This should make maintenance much easier going forward, as this will always be the basis for testing future changes.

---

Full Changelog: v5.0.2...v6.0.0