Chakra UI v3

[patrick-yendou]

Hey everyone,

V3 of ChakraUI is currently in the works. Discussion and new Docs. Any plans already to create a version of this package that supports v3 in the near future?

When I use the new release TypeError: Cannot read properties of undefined (reading 'Input'). Then I currently run into the following error:

TypeError: Cannot read properties of undefined (reading 'Input')

I assume it's because some of Chakra's components have changed.

[csandman]

Yeah I do plan on updating this for V3 when I get a chance! I have no idea how involved the migration path will be though, so I'll have to see when I have some time. I'm going to try and get started on it before v3 is fully released though.

EDIT: So I tried setting it up with V3 just to see, and I'm not even able to get to that point. I'm not even sure how to properly set up the ChakraProvider anymore haha. Do you have a basic example of how you set your project up?

[csandman]

Ah, the defaultSystem is the part I couldn't find, I couldn't even find that documented in their new docs, but maybe I'm just missing something obvious 😅

[csandman]

Oh man, this is definitely going to end up being a major overhaul. I gave it a shot for a bit, and so many things have changed. I don't think this migration will be possible until they've completed the new docs for how the new theming works. Everything I've seen in the V3 docs for now are just the same as the old ones.

[wingsofovnia]

I did some work on migrating to v3 here. I am still confused with the new useSlotRecipe that replaced useMultiStyleConfig. Some other major changes that comes to mind:

• sx -> css
• size and variant props changed
• useTheme -> useChakraContext
• some Spinner attributes got removed

There are many tiny changes but overall all the components used here stayed intact. Most of their props are the same.

The MIGRATION.md is very helpful. The owner is pretty responsive as well and question get answered quickly here.

I unfortunately gave up on migration as I lack understanding of both useMultiStyleConfig and useSlotRecipe. I wish I haven't jumped on Chakra 3.0.0-next 🥲 It feels like the Chakra release is not far away but it will take months until great libs like yours get on board. I hope it will get migrated soon and perhaps some work I've started could give you some hints.

[csandman]

Thanks for the head start at least! I also had some trouble figuring out the useSlotRecipe when I looked at it. I'll definitely use your branch as a jumping off point when I have time to fully tackle this though!

[csandman]

Also yeah, it probably was a bold move to hop on v3 before it's fully released 😅

[csandman]

Well, good news, I started working on getting v3 implemented last night (thanks for the starting point @wingsofovnia!) and it's looking pretty good so far! I ended up changing up where all of the built-in styles are being pulled from to use their new built-in select component, and it maps way better than it used to when I was pulling from the input and menu component styles. Here's a sneak peek of what it's looking like so far:

I will probably have a next version out soon that people can try out and give feedback on.

[wingsofovnia]

Random: I was always puzzled why padding-left is bigger than padding-y. Seems like next will get the same:

Looks off to me or that's by design?

[csandman]

Also, if you are looking towards mixing in "native" Chakra UI elements, you might be interested in Ark UI Combobox, which is more suitable for input + select scenarios. Ark UI is a unstyled components lib used by Chakra v3 and Chakra basically exposes Ark UI components with its styles. Unfortunately, Combobox itself isn't exposed yet in Chakra but you can use this:

Yeah I was thinking that I could switch to something like that, but I feel like this package isn't really the right thing to do it. The whole purpose of this package was to fill the gap of the missing combobox originally, and if I end up just extending the native one, there isn't much purpose to it anymore haha, as people could just do the extending in their own projects. Plus the migration path for people using this package currently would be much larger than it already is.

Besides, react-select does offer a few more features that the native one doesn't, that people would otherwise have to implement themselves, such as the async and createable versions. Plus there are many other features customizable through simple props rather than implementing a solution from scratch. All that considered, I think I'll leave it to others to implement a more native solution if they want to.

---

Random: I was always puzzled why padding-left is bigger than padding-y. Seems like next will get the same:

Looks off to me or that's by design?

Yeah, that padding is actually just pulling from the native padding on the new built-in select component haha (0.75rem). And the vertical padding isn't defined really, it's just a tag centered in the 2.5rem base height of the select. In Chakra v2, all of the input like components actually have a default horizontal padding of 0.75 rem, but in Chakra v3, I noticed that the inputs actually have 0.5rem vs the 0.75rem of the select, so I'm honestly not really sure what to go with. I'm kind of leaning towards the 0.5 though, because you're right, it does look a bit off IMO. I think ultimately, I'm going to go with the input styles for the control field and the select styles for everything in the menu (and the indicators on the right), because this is really more of a combobox than a normal select, as you mentioned. I realized I was wrong, they still have a 0.75rem horizontal padding for inputs in v3, so I'll probably leave it as is.

My goal for this version is to define as few of my own internal style overrides as possible. In v2, I had to override a ton of the styles for things like the option (which I pull from the menu styles), but after my quick implementation last night, I realized that I can mostly leave it untouched. Whenever I do overrdies in the components themselves, it makes it much more difficult for the end user to override the styles just by modifying the theme styles for the component. If I can keep the overrides to an absolute minimum, ideally this would mean that any changes they make to their select theme would carry over to this component.

Also, all of the styles are subject to change, those screenshots were from a session of a few hours where I was just trying to see what I could do. It is by no means final. I'm thinking I'd like to get a very early version out asap though, for people who are trying to upgrade early, so at least people can help point out any issues I may have missed. There are so so many props for react-select, and different ways to customize it, so it's difficult for me to test it all on my own.

[csandman]

Also, for the horizontal padding, I think it looks more off with the multi-select because there is padding on the left side of the tag itself. In single mode, it looks pretty normal to me. In general, making the horizontal padding of components thicker than the vertical is a pretty common UI pattern.

Because of the tag thing though, I probably will end up pulling the control styles from the input.

[wingsofovnia]

Agreed on all points 🙂 Looking forward to giving next version a try as soon as it's released.

upd: I just realized that my illustration compares padding to the label height not padding-y 🤦‍♂️ I'm glad you got the idea anyway 😀

upd2: I was redoing the illustration for no reason and while duplicating padding-top measurement, I noticed padding-bottom is just a hair smaller:

This is a in the pure "pixel-perfect" area and might pretty much be a distortion in the Preview editor or smth but I decided to share this anyway just fyi.

[csandman]

upd: I just realized that my illustration compares padding to the label height not padding-y 🤦‍♂️ I'm glad you got the idea anyway 😀

Haha yeah I did notice that, but your description made it pretty clear. Plus, it helped that I've noticed the same thing in the past.

Also, I realized that i was wrong, and the input actually does have the 0.75rem horizontal padding, same as the select. Because of that, I think I'm actually going to leave it up to the end user to decide how to handle it. You can always change it to 0.5rem in the select/input themes!

upd2: I was redoing the illustration for no reason and while duplicating padding-top measurement, I noticed padding-bottom is just a hair smaller:

And yeah, that's probably due to the tag being a non-pixel perfect height. I checked the inspector and it looks like it has a height of 24.8px. Not that it matters that much though haha, it's not particularly noticeable.

[csandman]

Ok I published my first draft of v6 (Chakra v3)! It's still very much a work in progress, so I would expect it to change, but I wanted to get eyes on it as soon as possible. If you want to check it out, you can see the draft PR I put up here: #341

Or install it using the next tag:

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

If you have any issues with it, leave a comment on my draft PR (or a review), or post something here. I'd rather not clog up the normal issues with things about this very much not ready draft haha.

There is also no documentation of changes yet. There are many, so that will take a while, but I want to finalize them before I go through with writing updated docs.

[csandman]

I just pushed a new v6.0.0-next.2 version that is now officially made for the v3 release of Chakra for anyone who wants to test it! I'm still not fully confident that it's ready to go, but it's definitely pretty close, so if you're interested in upgrading to Chakra v3, give it a try and let me know!

[csandman]

Good news, I made some great progress on Chakra React Select v6, and have released the first release candidate version. You can install it with the following:

npm i chakra-react-select@rc

You can read more about the most recent changes in this comment: #341 (comment)

[lucas-garrido]

react 19 is now stable could you add it as peer dep please ?

[csandman]

Yeah, good call, I had been thinking about that. I'll do a new RC release later today with an updated dependency range.

[csandman]

Ok, I just pushed a new version 6.0.0-rc.2 which expands the react peer dep range to >=18 to match that of @chakra-ui/react@3. One important thing to note is that [email protected] (the most recent version of it) implemented some type compatibility with React 19, so you may need to run npm upgrade or something to ensure your version of react-select is up to date. Another way to potentially do so if it's out of date is to uninstall this package entirely and do a fresh install.

[csandman]

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

[maulik13]

Just a question, I am using RC.4 and wondering how to allow more variants for type Variant? It is not picking up my customization to the select recipe even with typegen.

I am using variant='filled' and it works fine, but TS compiler gives the error.

Reference.

chakra-react-select/src/types.ts

Line 45 in a965da5

export type Variant = "outline" | "subtle";

[csandman]

Ah, good to know. Hmm, can you show me how you extended the theme so I can have an example to work with, after doing a type gen? I assume the types work properly for you with the normal select?

[csandman]

Actually, I got an example working with the demo project. I switched the typing on the variant prop to be SelectRootProps["variant"], and that appears to work with the statically generated theme props! I just pushed a new version with this change, v6.0.0-rc.5.

[maulik13]

It works with 6.0.0!!! You are a champ :)

[csandman]

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