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

5.0.2

What's Changed

Mostly some documentation/CI changes, along with a new build config.

• feat: Add a demo vite app by @csandman in #344
  • Added a new local demo app for testing. See the Contributing doc for more info.
  • Added a new build action for previewing PR changes.
• Improve the exports and modify the tsup build config by @csandman in #346
  • Update exports to include specific types paths for import and require.
  • Changed build config to stop minifying the output and building source maps.

Full Changelog: v5.0.1...v5.0.2

5.0.1

What's Changed

• Removes support for the isFixed attribute on options to remove the tag close button. This was supposed to be removed with the other breaking changes, but it was missed.
  • The original idea for this feature was taken from an example in the react-select docs for how you can use custom components. Because of this, this should be done by the end user if desired.

Full Changelog: v5.0.0...v5.0.1

5.0.0

What's Changed

This is the last major release before Chakra v3 is fully released! The intention of this release is to batch a few breaking changes that have been in the works for a while, along with a codemod to hopefully make the changes for you.

Breaking Changes

1. The useBasicStyles prop was removed, as the styles provided by it are now the default. Originally, it was styled to match the InputRightAddon component, in order to create a visual separation between the dropdown indicator and the clear indicator. However, it seems that most people preferred it to visually match the original Chakra Select component, so those styles are now the default. If you want to modify the styles to appear like they used to, you can do so using the chakraStyles prop. Some examples of how to do this are provided in the README.
2. Remove the deprecated selectedOptionColor prop. A new prop was added a while ago to replace that one, selectedOptionColorScheme, as some people were getting confused by the meaning of the original (thinking it meant an explicit color instead of a named color from their theme). The old one was left in the code though, and now it is gone for good.
3. Remove the deprecated hasStickyGroupHeaders prop. This was removed from the documentation since v4.6.0, as it was only ever really an experimental way to style the grouped option headers so they'd stay in view while you scroll the list of options. It also had some problems with using the keyboard to navigate between options. They would disappear behind the header when you used the up arrow. There is an example for how these styles can be implemented using chakraStyles in #343.
4. Renamed the colorScheme prop to tagColorScheme. There has been some confusion around what this prop actually means, as the original name the prop had wasn't specific enough to it's purpose. It didn't make sense to have a specific prop for selectedOptionColorScheme, and not be specific with the naming for the tagColorScheme. This may be followed by the addition of a new root colorScheme prop, but that isn't included here.

All of these changes can be made automatically using the Codemod provided here

npx crs-codemod@latest v5 .
# or
npx crs-codemod@latest v5 ./src

---

This release will most likely mean an end of support for v3 (Chakra v1 compatible version), unless people want to put up any fix PRs for it themselves.

Full Changelog: v4.10.1...v5.0.0

4.10.1

What's Changed

• fix: Reduce selected menu option styles specificity by @csandman in #338

Full Changelog: v4.10.0...v4.10.1

4.10.0

What's Changed

• fix: Switch peer dependencies to depend on @chakra-ui/react instead of sub-packages by @csandman in #336

Full Changelog: v4.9.2...v4.10.0

4.9.2

What's Changed

• fix: Change package type back to default of "commonjs" by @csandman in #331
  • This was to fix #329, which was being caused by Jest importing the wrong build of the package.

Full Changelog: v4.9.1...v4.9.2

4.9.1

What's Changed

• fix: Fix react-select core Props type export by @csandman in #324

Full Changelog: v4.9.0...v4.9.1

4.9.0

What's Changed

• chore: Switch to tsup for building and update dependencies by @csandman in #298
  • This change should finally make this package fully support ESM, where as before it didn't really which was causing some issues. It should fix an issue with the ID prop not matching mentioned in #260, without the need for a workaround. Check the PR description for full details!

I tested this change in a few different environments with different module resolution setups but it's possible I missed a case. If it ends up not working for your particular setup, please open a bug report with as much specific information as you can give me, such as:

• Chakra Package Versions
• React Version
• TypeScript or Vanilla
• Yarn or NPM (and which version of the package manager you're on)
• Your jsconfig/tsconfig setup

I'm not likely to figure out what's going on if I can't replicate the environment locally, so the more information you can provide the better!

Full Changelog: v4.8.0...v4.9.0

4.8.0

What's Changed

• chore: Update all dependencies by @csandman in #315
  • This introduces [email protected] which improves the native accessibility.

Full Changelog: v4.7.6...v4.8.0