Skip to content

Releases: csandman/chakra-react-select

3.0.0

10 Jan 22:29
345b022
Compare
Choose a tag to compare

NOTE: This version involves major structural changes, and while everything was tested it was only tested by one person. If you find any issues that have cropped up in this version, please please make an issue describing what broke 😄

What's Changed

  • Update react-select to v5.
    • v5 is made using typescript so @types/react-select has been removed and all types have been updated to the natively exported ones.
    • See their upgrade guide for details on how it might affect you.
  • Fix type inference for implementing this component.
    • Previously, because of the way react-select was wrapped, no types could be inferred when this component was invoked. Now it should behave identically to the base react-select package.
    • Added TSDoc comments to all of the custom props for this package.
  • Add input and inputContainer keys to the chakraStyles prop. Previously these did not work because react-select used the react-input-autosize package for that component so it could not easily be replaced with a chakra.input. In react-select v5, they removed that dependency, so it became possible to replace/style that component.
    • One difference between these style keys and the ones from the base package, the input key in the original refers to the containing <div /> that wraps the <input /> element and there was no style key for the input itself. I renamed their input style key to inputContainer and added a new input key which references the input itself.
  • Export everything from the underlying react-select package.
    • The components module that was previously exported containing all of the custom Chakra components used by this package is now exported as chakraComponents so the original components object from react-select can be imported as well.
    • This is mostly for the sake of allowing those who use this package to access the internal types of react-select. To do so, you can import them all from the chakra-react-select package:
import { GroupBase, SelectInstance } from 'chakra-react-select'
  • Update all other npm packages:
 @babel/cli                                ^7.15.7  →   ^7.16.7     
 @babel/core                               ^7.15.5  →   ^7.16.7     
 @babel/plugin-proposal-class-properties   ^7.14.5  →   ^7.16.7     
 @babel/preset-env                         ^7.15.6  →   ^7.16.7     
 @babel/preset-react                       ^7.14.5  →   ^7.16.7     
 @babel/preset-typescript                  ^7.15.0  →   ^7.16.7     
 @types/react                             ^17.0.24  →  ^17.0.38     
 @typescript-eslint/eslint-plugin          ^4.31.2  →    ^5.9.0     
 @typescript-eslint/parser                 ^4.31.2  →    ^5.9.0     
 concurrently                               ^6.2.1  →    ^7.0.0     
 eslint                                    ^7.32.0  →    ^8.6.0     
 eslint-config-airbnb                      ^18.2.1  →   ^19.0.4     
 eslint-config-airbnb-typescript           ^14.0.0  →   ^16.1.0     
 eslint-plugin-import                      ^2.24.2  →   ^2.25.4     
 eslint-plugin-jsx-a11y                     ^6.4.1  →    ^6.5.1     
 eslint-plugin-react                       ^7.25.1  →   ^7.28.0     
 husky                                      ^7.0.2  →    ^7.0.4     
 lint-staged                               ^11.1.2  →   ^12.1.7     
 nodemon                                   ^2.0.13  →   ^2.0.15     
 prettier                                   ^2.4.0  →    ^2.5.1     
 typescript                                 ^4.4.3  →    ^4.5.4

Full Changelog: v2.0.1...v3.0.0

2.0.1

07 Jan 02:23
f2f2c72
Compare
Choose a tag to compare

What's Changed

Full Changelog: v2.0.0...v2.0.1

2.0.0

05 Jan 00:19
19c54b9
Compare
Choose a tag to compare

What's Changed

  • Added a new chakraStyles prop which takes the place of the built in styles and theme props
  • Add a focusBorderColor prop which has the same effect as passing the same prop to Chakra's <Input />
  • Add an errorBorderColor prop which has the same effect as passing the same prop to Chakra's <Input />
  • Updated all documentation

Full Changelog: v1.4.0...v2.0.0

1.4.0

29 Dec 20:12
b38ea9f
Compare
Choose a tag to compare

What's Changed

Full Changelog: v1.3.4...v1.4.0

1.3.4

01 Dec 22:17
f647898
Compare
Choose a tag to compare

What's Changed

Full Changelog: v1.3.3...v1.3.4

1.3.3

18 Nov 22:42
8833b84
Compare
Choose a tag to compare

What's Changed

The main change is fixing the menuPlacement prop that is native to react-select

Full Changelog: v1.3.2...v1.3.3

1.3.2

21 Oct 21:00
Compare
Choose a tag to compare

What's Changed

  • Fix an issue with the new <LoadingIndicator /> where extraneous props were being passed to the component (db48cff)

Full Changelog: v1.3.1...v1.3.2

1.3.1

21 Oct 20:48
Compare
Choose a tag to compare

What's Changed

  • [ImgBot] Optimize images by @imgbot in #9
  • Move @types/react-select to dependencies by @csandman in #11
    • Move @types/react-select from devDependencies to dependencies (mentioned in #10 (comment))
  • Csandman/loading indicator by @csandman in #12
    • Remove unused <MenuPortal /> component
    • Add a custom <LoadingIndicator /> component using the Chakra UI Spinner

Full Changelog: v1.3.0...v1.3.1

1.3.0

18 Oct 20:20
Compare
Choose a tag to compare

Changes

  • Style the selected options to match react-select, with a default of a blue highlight (blue.500 in light mode, blue.300 in dark mode)
  • Add the selectedOptionStyle prop, which can be passed "color" (default) or "check" which will change the styling of a selected option to match the Chakra UI menu component
  • Add the selectedOptionColor prop which will change the highlight color for selected options (when selectedOptionStyle is left at its default, "color")
  • Add a roadmap to the README with features that are on the way.

Full Changelog: v1.2.2...v1.3.0

1.2.2

01 Oct 19:23
Compare
Choose a tag to compare
  • Fix an issue with the tagVariant prop where it was defaulting to solid