4️⃣ replace @reach/combobox with Combobox from @headlessui/react

[dimaMachina]

currently, radix doesn't have Combobox unstyled component (a related issue radix-ui/primitives#1342)

After a long googling I found a perfect alternative a lightweight cmdk that uses under the hood only 1 dependency @radix-ui/react-dialog but it has peerDependency of React 18 because it uses React.useId https://github.com/pacocoursey/cmdk/blob/db1e29aa7ee173bf3ac269f9f815ee45ebbabd56/cmdk/src/index.tsx#L165

So I propose to release GraphiQL v3 with replaced Reach UI with Radix/CMDK with React 18 and bump GraphiQL v4 with Monaco instead Codemirror

[changeset-bot]

🦋 Changeset detected

Latest commit: 5bebbd2

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 3 packages

Name	Type
@graphiql/react	Major
@graphiql/plugin-explorer	Patch
graphiql	Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[github-actions]

The latest changes of this PR are not available as canary, since there are no linked changesets for this PR.

[jonathanawesome]

Thank you @B2o5T for all of the excellent work.

We should be cautious about moving to React 18 before soliciting opinions from the community...it could be a deal-breaker for certain folks. While we will have to make the move eventually, there are alternatives to the combobox problem.

Last year I started to feel a bit sketchy about the situation with Radix after the acquisition and went looking for alternatives. The folks over at Tailwind have put together a great set of React components with the headlessui package. The API felt familiar enough to the Radix implementation that I was able to migrate my existing Tabs and Dialog components with very little fuss. Their combobox component looks great, but I, admittedly, haven't yet had to implement. Maybe it's a non-react-18 option for us here?

[dimaMachina]

We should be cautious about moving to React 18 before soliciting opinions from the community...it could be a deal-breaker for certain folks. While we will have to make the move eventually, there are alternatives to the combobox problem.

you are right, support react 17 will be better

The folks over at Tailwind have put together a great set of React components with the headlessui package.

I don't have a strong opinion on this, I used radix in graphql-hive and headlessui in Nextra, and they do mostly the same job 😅

Their combobox component looks great, but I, admittedly, haven't yet had to implement. Maybe it's a non-react-18 option for us here?

I didn't know that they have a combobox component, if they have so it will solve issue with supporting both React 17/18 ❤️

[thomasheyenbrock]

Haven't done much research on this, but what are the parts of reach-ui that don't work with React 18? Does combobox maybe work with React 18?

In any case, if we find a solution that works with both React 17 and 18 that would be awesome! Since we only use this component for the search functionality in the docs explorer which is fairly simple I could also imagine us doing a hand-rolled solution with "good enough" a11y support to unblock this.

[dimaMachina]

Haven't done much research on this, but what are the parts of reach-ui that don't work with React 18? Does combobox maybe work with React 18?

reach-ui technically works with react 18, but it has downside

1. he is no longer maintained Reach UI is not currently maintained reach/reach-ui#972
2. he doesn't have react 18 as peerDependency range https://github.com/reach/reach-ui/blob/43f450db7bcb25a743121fe31355f2294065a049/packages/tooltip/package.json#L35 so users have warnings while using it with React 18

In any case, if we find a solution that works with both React 17 and 18 that would be awesome! Since we only use this component for the search functionality in the docs explorer which is fairly simple I could also imagine us doing a hand-rolled solution with "good enough" a11y support to unblock this.

Building combobox component from scratch will be brainstorm, I think we should go with @jonathanawesome proposal of using headlessui combobox https://headlessui.com/react/combobox

[acao]

@thomasheyenbrock we have already decided to replace reach ui, users are having lots of issues with it downstream