1️⃣ replace @reach/dialog by @radix-ui/react-dialog and `@reach/v…

…isually-hidden` by `@radix-ui/react-visually-hidden` (#3181) Co-authored-by: Dimitri POSTOLOV <dmytropostolov@gmail.com> Co-authored-by: Myles Murphy <53157254+mylesmmurphy@users.noreply.github.com>
graphql · Jun 2, 2023 · 9ac84bf · 9ac84bf
1 parent 6198646
commit 9ac84bf
Show file tree

Hide file tree

Showing 61 changed files with 1,439 additions and 1,131 deletions.
diff --git a/.changeset/early-socks-learn.md b/.changeset/early-socks-learn.md
@@ -0,0 +1,6 @@
+---
+'graphiql': major
+'@graphiql/react': minor
+---
+
+remove `initialTabs`, use `defaultTabs` instead
diff --git a/.changeset/gentle-ears-compare.md b/.changeset/gentle-ears-compare.md
@@ -0,0 +1,6 @@
+---
+'@graphiql/react': minor
+---
+
+replace `@reach/dialog` by `@radix-ui/react-dialog`
+replace `@reach/visually-hidden` by `@radix-ui/react-visually-hidden`
diff --git a/.changeset/gold-lizards-march.md b/.changeset/gold-lizards-march.md
@@ -0,0 +1,7 @@
+---
+'@graphiql/react': minor
+---
+
+replace `@reach/menu-button` by `@radix-ui/react-dropdown-menu`
+remove `@reach/listbox`
+remove `<ToolbarListbox />` and `<Listbox />` components (use `<Menu />` instead)
diff --git a/.changeset/hip-ways-provide.md b/.changeset/hip-ways-provide.md
@@ -0,0 +1,10 @@
+---
+'@graphiql/react': minor
+---
+
+fixed long list items in dropdown were hidden
+
+rename `<Menu />` to `<DropdownMenu />`
+rename `<Menu.List />` to `<DropdownMenu.Content />`
+rename `<Menu.Item />` to `<DropdownMenu.Item />`
+rename `<Menu.Button />` to `<DropdownMenu.Button />`
diff --git a/.changeset/poor-lizards-jam.md b/.changeset/poor-lizards-jam.md
@@ -0,0 +1,5 @@
+---
+'@graphiql/react': minor
+---
+
+replace `@reach/tooltip` by `@radix-ui/react-tooltip`
diff --git a/.changeset/pre.json b/.changeset/pre.json
@@ -0,0 +1,22 @@
+{
+  "mode": "pre",
+  "tag": "alpha",
+  "initialVersions": {
+    "example-monaco-graphql-webpack": "1.1.1",
+    "cm6-graphql": "0.0.8",
+    "codemirror-graphql": "2.0.8",
+    "graphiql": "2.4.7",
+    "@graphiql/plugin-code-exporter": "0.1.2",
+    "@graphiql/plugin-explorer": "0.1.20",
+    "@graphiql/react": "0.17.6",
+    "@graphiql/toolkit": "0.8.4",
+    "graphql-language-service": "5.1.6",
+    "graphql-language-service-cli": "3.3.23",
+    "graphql-language-service-server": "2.11.1",
+    "monaco-graphql": "1.2.3",
+    "vscode-graphql": "0.8.13",
+    "vscode-graphql-execution": "0.2.0",
+    "vscode-graphql-syntax": "1.2.0"
+  },
+  "changesets": []
+}
diff --git a/.changeset/shiny-carpets-rescue.md b/.changeset/shiny-carpets-rescue.md
@@ -0,0 +1,5 @@
+---
+'@graphiql/react': minor
+---
+
+replace `@reach/combobox` with `Combobox` from `@headlessui/react` 
diff --git a/.changeset/tough-maps-worry.md b/.changeset/tough-maps-worry.md
@@ -0,0 +1,5 @@
+---
+'@graphiql/react': minor
+---
+
+tabs could be reorderded
diff --git a/.gitignore b/.gitignore
@@ -37,3 +37,6 @@ package-lock.json
 
 vite.config.d.ts
 vite.config.js
+
+.next/
+.turbo/
diff --git a/custom-words.txt b/custom-words.txt
@@ -84,6 +84,7 @@ execa
 graphiql
 hamljs
 haml
+headlessui
 inno
 intellij
 jsdelivr

diff --git a/examples/graphiql-cdn/index.html b/examples/graphiql-cdn/index.html
@@ -30,14 +30,12 @@
       include them directly in your favored resource bundler.
     -->
     <script
-      src="https://unpkg.com/react@17/umd/react.development.js"
-      integrity="sha512-Vf2xGDzpqUOEIKO+X2rgTLWPY+65++WPwCHkX2nFMu9IcstumPsf/uKKRd5prX3wOu8Q0GBylRpsDB26R6ExOg=="
-      crossorigin="anonymous"
+      crossorigin
+      src="https://unpkg.com/react@18/umd/react.development.js"
     ></script>
     <script
-      src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"
-      integrity="sha512-Wr9OKCTtq1anK0hq5bY3X/AvDI5EflDSAh0mE9gma+4hl+kXdTJPKZ3TwLMBcrgUeoY0s3dq9JjhCQc7vddtFg=="
-      crossorigin="anonymous"
+      crossorigin
+      src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"
     ></script>
 
     <!--
@@ -55,14 +53,14 @@
       type="application/javascript"
     ></script>
     <script>
-      ReactDOM.render(
+      const root = ReactDOM.createRoot(document.getElementById('graphiql'));
+      root.render(
         React.createElement(GraphiQL, {
           fetcher: GraphiQL.createFetcher({
             url: 'https://swapi-graphql.netlify.app/.netlify/functions/index',
           }),
           defaultEditorToolsVisibility: true,
         }),
-        document.getElementById('graphiql'),
       );
     </script>
   </body>

diff --git a/examples/graphiql-create-react-app/package.json b/examples/graphiql-create-react-app/package.json
@@ -5,8 +5,8 @@
   "dependencies": {
     "graphiql": "^2.2.0",
     "graphql": "^16.4.0",
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
     "react-scripts": "5.0.1"
   },
   "scripts": {

diff --git a/examples/graphiql-create-react-app/src/index.tsx b/examples/graphiql-create-react-app/src/index.tsx
@@ -1,6 +1,7 @@
 import React from 'react';
-import ReactDOM from 'react-dom';
+import { createRoot } from 'react-dom/client';
 import App from './App';
 import './index.css';
 
-ReactDOM.render(<App />, document.getElementById('root'));
+const root = createRoot(document.getElementById('root'));
+root.render(<App />);
diff --git a/examples/graphiql-parcel/package.json b/examples/graphiql-parcel/package.json
@@ -24,8 +24,8 @@
   "dependencies": {
     "graphiql": "^2.2.0",
     "graphql": "^16.4.0",
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2"
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0"
   },
   "devDependencies": {
     "parcel": "^2.5.0",

diff --git a/examples/graphiql-parcel/src/index.tsx b/examples/graphiql-parcel/src/index.tsx
@@ -1,4 +1,4 @@
-import { render } from 'react-dom';
+import { createRoot } from 'react-dom/client';
 import { GraphiQL } from 'graphiql';
 import type { Fetcher } from '@graphiql/toolkit';
 import { CSSProperties } from 'react';
@@ -23,7 +23,8 @@ const style: CSSProperties = { height: '100vh' };
 
 const App = () => <GraphiQL style={style} fetcher={fetcher} />;
 
-render(<App />, document.getElementById('root'));
+const root = createRoot(document.getElementById('root'));
+root.render(<App />);
 
 // Hot Module Replacement
 module.hot?.accept();
diff --git a/examples/graphiql-webpack/package.json b/examples/graphiql-webpack/package.json
@@ -15,7 +15,7 @@
     "graphiql": "^2.2.0",
     "graphql": "^16.4.0",
     "graphql-ws": "^5.5.5",
-    "react": "^17.0.2",
+    "react": "^18.2.0",
     "regenerator-runtime": "^0.13.9"
   },
   "devDependencies": {
@@ -27,7 +27,7 @@
     "cross-env": "^7.0.2",
     "css-loader": "^6.7.3",
     "html-webpack-plugin": "^4.2.0",
-    "react-dom": "^17.0.2",
+    "react-dom": "^18.2.0",
     "style-loader": "^3.3.1",
     "webpack": "5.75.0",
     "webpack-cli": "^5.0.1",

diff --git a/examples/graphiql-webpack/src/index.jsx b/examples/graphiql-webpack/src/index.jsx
@@ -1,6 +1,6 @@
 import 'regenerator-runtime/runtime.js';
 import * as React from 'react';
-import { render } from 'react-dom';
+import { createRoot } from 'react-dom/client';
 import { GraphiQL } from 'graphiql';
 import { useExplorerPlugin } from '@graphiql/plugin-explorer';
 import { useExporterPlugin } from '@graphiql/plugin-code-exporter';
@@ -97,4 +97,5 @@ const App = () => {
   );
 };
 
-render(<App />, document.getElementById('root'));
+const root = createRoot(document.getElementById('root'));
+root.render(<App />);
diff --git a/examples/monaco-graphql-react-vite/package.json b/examples/monaco-graphql-react-vite/package.json
@@ -6,8 +6,8 @@
     "@graphiql/toolkit": "^0.8.0",
     "graphql-language-service": "^5.1.0",
     "monaco-graphql": "^1.1.6",
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
     "graphql": "^16.1.0",
     "jsonc-parser": "^3.0.0",
     "monaco-editor": "^0.31.0"

diff --git a/examples/monaco-graphql-react-vite/src/index.tsx b/examples/monaco-graphql-react-vite/src/index.tsx
@@ -1,11 +1,11 @@
 import React from 'react';
-import ReactDOM from 'react-dom';
+import { createRoot } from 'react-dom/client';
 
 import App from './App';
 
-ReactDOM.render(
+const root = createRoot(document.getElementById('root'));
+root.render(
   <React.StrictMode>
     <App />
   </React.StrictMode>,
-  document.getElementById('root'),
 );
diff --git a/package.json b/package.json
@@ -51,7 +51,7 @@
     "cypress-open": "yarn workspace graphiql cypress-open",
     "dev-graphiql": "yarn workspace graphiql dev",
     "e2e": "yarn run e2e:build && yarn workspace graphiql e2e",
-    "e2e:build": "yarn build && yarn workspace graphiql run build-bundles-min",
+    "e2e:build": "yarn build && yarn workspace graphiql build-bundles-min",
     "eslint": "NODE_OPTIONS=--max-old-space-size=4096 eslint --max-warnings=0 --cache .",
     "format": "yarn eslint --fix && yarn pretty",
     "jest": "jest",

diff --git a/packages/graphiql-plugin-code-exporter/examples/index.html b/packages/graphiql-plugin-code-exporter/examples/index.html
@@ -33,14 +33,12 @@
     <div id="graphiql">Loading...</div>
 
     <script
-      src="https://unpkg.com/react@17/umd/react.development.js"
-      integrity="sha512-Vf2xGDzpqUOEIKO+X2rgTLWPY+65++WPwCHkX2nFMu9IcstumPsf/uKKRd5prX3wOu8Q0GBylRpsDB26R6ExOg=="
-      crossorigin="anonymous"
+      crossorigin
+      src="https://unpkg.com/react@18/umd/react.development.js"
     ></script>
     <script
-      src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"
-      integrity="sha512-Wr9OKCTtq1anK0hq5bY3X/AvDI5EflDSAh0mE9gma+4hl+kXdTJPKZ3TwLMBcrgUeoY0s3dq9JjhCQc7vddtFg=="
-      crossorigin="anonymous"
+      crossorigin
+      src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"
     ></script>
 
     <script
@@ -120,10 +118,8 @@
         });
       }
 
-      ReactDOM.render(
-        React.createElement(GraphiQLWithExporter),
-        document.getElementById('graphiql'),
-      );
+      const root = ReactDOM.createRoot(document.getElementById('graphiql'));
+      root.render(React.createElement(GraphiQLWithExporter));
     </script>
   </body>
 </html>
diff --git a/packages/graphiql-plugin-code-exporter/package.json b/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.6",

diff --git a/packages/graphiql-plugin-explorer/examples/index.html b/packages/graphiql-plugin-explorer/examples/index.html
@@ -33,14 +33,12 @@
     <div id="graphiql">Loading...</div>
 
     <script
-      src="https://unpkg.com/react@17/umd/react.development.js"
-      integrity="sha512-Vf2xGDzpqUOEIKO+X2rgTLWPY+65++WPwCHkX2nFMu9IcstumPsf/uKKRd5prX3wOu8Q0GBylRpsDB26R6ExOg=="
-      crossorigin="anonymous"
+      crossorigin
+      src="https://unpkg.com/react@18/umd/react.development.js"
     ></script>
     <script
-      src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"
-      integrity="sha512-Wr9OKCTtq1anK0hq5bY3X/AvDI5EflDSAh0mE9gma+4hl+kXdTJPKZ3TwLMBcrgUeoY0s3dq9JjhCQc7vddtFg=="
-      crossorigin="anonymous"
+      crossorigin
+      src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"
     ></script>
 
     <script
@@ -76,10 +74,8 @@
         });
       }
 
-      ReactDOM.render(
-        React.createElement(GraphiQLWithExplorer),
-        document.getElementById('graphiql'),
-      );
+      const root = ReactDOM.createRoot(document.getElementById('graphiql'));
+      root.render(React.createElement(GraphiQLWithExplorer));
     </script>
   </body>
 </html>
diff --git a/packages/graphiql-plugin-explorer/package.json b/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",

diff --git a/packages/graphiql-react/README.md b/packages/graphiql-react/README.md
@@ -63,10 +63,10 @@ function MyGraphQLIDE() {
 The package also ships the necessary CSS that all its UI components need. You
 can import them from `@graphiql/react/dist/style.css`.
 
-**Note**: In order for these styles to apply, the UI components need to be
-rendered inside an element that has a class name `graphiql-container`.
+> **Note**: In order for these styles to apply, the UI components need to be
+> rendered inside an element that has a class name `graphiql-container`.
 
-By default the UI components will try to use the
+By default, the UI components will try to use the
 [Roboto](https://fonts.google.com/specimen/Roboto) font for regular text and the
 [Fira Code](https://fonts.google.com/specimen/Fira+Code) font for mono-space
 text. If you want to use the default fonts you can load them using these files:

diff --git a/packages/graphiql-react/package.json b/packages/graphiql-react/package.json
@@ -32,23 +32,23 @@
   },
   "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",
-    "@reach/dialog": "^0.17.0",
-    "@reach/listbox": "^0.17.0",
-    "@reach/menu-button": "^0.17.0",
-    "@reach/tooltip": "^0.17.0",
-    "@reach/visually-hidden": "^0.17.0",
     "clsx": "^1.2.1",
     "codemirror": "^5.65.3",
     "codemirror-graphql": "^2.0.8",
     "copy-to-clipboard": "^3.2.0",
     "graphql-language-service": "^5.1.6",
     "markdown-it": "^12.2.0",
+    "framer-motion": "^6.5.1",
     "set-value": "^4.1.0"
   },
   "devDependencies": {
@@ -59,8 +59,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"