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

.changeset/shiny-carpets-rescue.md

@@ -0,0 +1,5 @@
+---
+'@graphiql/react': major
+---
+
+replace `@reach/combobox` with `Combobox` from `@headlessui/react` 

packages/graphiql-plugin-code-exporter/package.json

@@ -33,8 +33,8 @@
   },
   "peerDependencies": {
     "graphql": "^15.5.0 || ^16.0.0",
-    "react": "^16.8.0 || ^17.0.0 || ^18.0.0",
-    "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0"
+    "react": "^16.8.0 || ^17 || ^18",
+    "react-dom": "^16.8.0 || ^17 || ^18"
   },
   "devDependencies": {
     "@graphiql/react": "^0.17.4",

packages/graphiql-plugin-explorer/package.json

@@ -33,8 +33,8 @@
   },
   "peerDependencies": {
     "graphql": "^15.5.0 || ^16.0.0",
-    "react": "^16.8.0 || ^17.0.0 || ^18.0.0",
-    "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0"
+    "react": "^16.8.0 || ^17 || ^18",
+    "react-dom": "^16.8.0 || ^17 || ^18"
   },
   "devDependencies": {
     "@vitejs/plugin-react": "^1.3.0",

packages/graphiql-react/package.json

@@ -32,16 +32,16 @@
   },
   "peerDependencies": {
     "graphql": "^15.5.0 || ^16.0.0",
-    "react": "^16.8.0 || ^17.0.0 || ^18.0.0",
-    "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0"
+    "react": "^16.8.0 || ^17 || ^18",
+    "react-dom": "^16.8.0 || ^17 || ^18"
   },
   "dependencies": {
+    "@headlessui/react": "^1.7.14",
     "@radix-ui/react-dialog": "^1.0.3",
     "@radix-ui/react-visually-hidden": "^1.0.2",
     "@radix-ui/react-tooltip": "^1.0.5",
     "@radix-ui/react-dropdown-menu": "^2.0.4",
     "@graphiql/toolkit": "^0.8.4",
-    "@reach/combobox": "^0.17.0",
     "clsx": "^1.2.1",
     "codemirror": "^5.65.3",
     "codemirror-graphql": "^2.0.8",
@@ -58,8 +58,8 @@
     "@vitejs/plugin-react": "^1.3.0",
     "graphql": "^16.4.0",
     "postcss-nesting": "^10.1.7",
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
     "typescript": "^4.6.3",
     "vite": "^2.9.13",
     "vite-plugin-react-svg": "^0.2.0"

packages/graphiql-react/src/explorer/components/doc-explorer.css

@@ -28,7 +28,6 @@
 
 /* The search input in the header of the doc explorer */
 .graphiql-doc-explorer-search {
-  height: 100%;
   position: absolute;
   right: 0;
   top: 0;
@@ -37,12 +36,12 @@
     left: 0;
   }
 
-  & [data-reach-combobox-input] {
+  & [role='combobox'] {
     height: 24px;
     width: 4ch;
   }
 
-  & [data-reach-combobox-input]:focus {
+  & [role='combobox']:focus {
     width: 100%;
   }
 }

packages/graphiql-react/src/explorer/components/doc-explorer.tsx

@@ -81,9 +81,7 @@ export function DocExplorer() {
           )}
           <div className="graphiql-doc-explorer-title">{navItem.name}</div>
         </div>
-        <div className="graphiql-doc-explorer-search">
-          <Search key={navItem.name} />
-        </div>
+        <Search key={navItem.name} />
       </div>
       <div className="graphiql-doc-explorer-content">{content}</div>
     </section>

packages/graphiql-react/src/explorer/components/search.css

@@ -1,6 +1,4 @@
-@import url('@reach/combobox/styles.css');
-
-[data-reach-combobox] {
+.graphiql-doc-explorer-search {
   color: hsla(var(--color-neutral), var(--alpha-secondary));
 
   &:not([data-state='idle']) {
@@ -11,8 +9,6 @@
 
     & .graphiql-doc-explorer-search-input {
       background: hsl(var(--color-base));
-      border-bottom-left-radius: 0;
-      border-bottom-right-radius: 0;
     }
   }
 }
@@ -25,7 +21,7 @@
   padding: var(--px-8) var(--px-12);
 }
 
-[data-reach-combobox-input] {
+.graphiql-doc-explorer-search [role='combobox'] {
   border: none;
   background-color: transparent;
   margin-left: var(--px-4);
@@ -36,7 +32,7 @@
   }
 }
 
-[data-reach-combobox-popover] {
+.graphiql-doc-explorer-search [role='listbox'] {
   background-color: hsl(var(--color-base));
   border: none;
   border-bottom-left-radius: var(--border-radius-4);
@@ -45,28 +41,26 @@
     hsla(var(--color-neutral), var(--alpha-background-heavy));
   max-height: 400px;
   overflow-y: auto;
-
+  margin: 0;
+  font-size: var(--font-size-body);
+  padding: var(--px-4);
   /**
    * This makes sure that the logic for auto-scrolling the search results when
    * using keyboard navigation works properly (we use `offsetTop` there).
    */
   position: relative;
 }
 
-[data-reach-combobox-list] {
-  font-size: var(--font-size-body);
-  padding: var(--px-4);
-}
-
-[data-reach-combobox-option] {
+.graphiql-doc-explorer-search [role='option'] {
   border-radius: var(--border-radius-4);
   color: hsla(var(--color-neutral), var(--alpha-secondary));
   overflow-x: hidden;
   padding: var(--px-8) var(--px-12);
   text-overflow: ellipsis;
   white-space: nowrap;
+  cursor: pointer;
 
-  &[data-highlighted] {
+  &[data-headlessui-state="active"] {
     background-color: hsla(var(--color-neutral), var(--alpha-background-light));
   }
 
@@ -77,7 +71,7 @@
     );
   }
 
-  &[data-highlighted]:hover {
+  &[data-headlessui-state="active"]:hover {
     background-color: hsla(var(--color-neutral), var(--alpha-background-heavy));
   }