1️⃣ replace @reach/dialog by @radix-ui/react-dialog and @reach/visually-hidden by @radix-ui/react-visually-hidden

.gitignore

@@ -33,3 +33,5 @@ yarn-1.18.0.js
 
 examples/*/yarn.lock
 .eslintcache
+.next/
+.turbo/

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:

packages/graphiql-react/package.json

@@ -36,13 +36,13 @@
     "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0"
   },
   "dependencies": {
+    "@radix-ui/react-dialog": "^1.0.3",
+    "@radix-ui/react-visually-hidden": "^1.0.2",
     "@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",

packages/graphiql-react/src/style/root.css

@@ -6,7 +6,8 @@
 .graphiql-container,
 .CodeMirror-info,
 .CodeMirror-lint-tooltip,
-reach-portal {
+.graphiql-dialog,
+.graphiql-dialog-overlay {
   /* Colors */
   --color-primary: 320, 95%, 43%;
   --color-secondary: 242, 51%, 61%;
@@ -71,7 +72,8 @@ reach-portal {
   body:not(.graphiql-light) .graphiql-container,
   body:not(.graphiql-light) .CodeMirror-info,
   body:not(.graphiql-light) .CodeMirror-lint-tooltip,
-  body:not(.graphiql-light) reach-portal {
+  body:not(.graphiql-light) .graphiql-dialog,
+  body:not(.graphiql-light) .graphiql-dialog-overlay {
     --color-primary: 338, 100%, 67%;
     --color-secondary: 243, 100%, 77%;
     --color-tertiary: 188, 100%, 44%;
@@ -90,7 +92,8 @@ reach-portal {
 body.graphiql-dark .graphiql-container,
 body.graphiql-dark .CodeMirror-info,
 body.graphiql-dark .CodeMirror-lint-tooltip,
-body.graphiql-dark reach-portal {
+body.graphiql-dark .graphiql-dialog,
+body.graphiql-dark .graphiql-dialog-overlay {
   --color-primary: 338, 100%, 67%;
   --color-secondary: 243, 100%, 77%;
   --color-tertiary: 188, 100%, 44%;
@@ -108,7 +111,7 @@ body.graphiql-dark reach-portal {
 .graphiql-container,
 .CodeMirror-info,
 .CodeMirror-lint-tooltip,
-reach-portal {
+.graphiql-dialog {
   &,
   &:is(button) {
     color: hsla(var(--color-neutral), 1);

packages/graphiql-react/src/ui/dialog.css

@@ -1,10 +1,7 @@
-@import url('@reach/dialog/styles.css');
-
-[data-reach-dialog-overlay] {
-  align-items: center;
+.graphiql-dialog-overlay {
+  position: fixed;
+  inset: 0;
   background-color: hsla(var(--color-neutral), var(--alpha-background-heavy));
-  display: flex;
-  justify-content: center;
   /**
    * CodeMirror has a `z-index` set for the container of the scrollbar of the
    * editor, so we have to add one here to make sure that the dialog is shown
@@ -13,7 +10,7 @@
   z-index: 10;
 }
 
-[data-reach-dialog-content] {
+.graphiql-dialog {
   background-color: hsl(var(--color-base));
   border: var(--popover-border);
   border-radius: var(--border-radius-12);
@@ -24,6 +21,11 @@
   overflow: auto;
   padding: 0;
   width: unset;
+  transform: translate(-50%,-50%);
+  top: 50%;
+  left: 50%;
+  position: fixed;
+  z-index: 10;
 }
 
 .graphiql-dialog-close > svg {

packages/graphiql-react/src/ui/dialog.tsx

@@ -1,33 +1,48 @@
 import { clsx } from 'clsx';
-import { Dialog as ReachDialog } from '@reach/dialog';
-import { VisuallyHidden } from '@reach/visually-hidden';
-import { ComponentProps, forwardRef } from 'react';
+import { forwardRef, ReactElement } from 'react';
 import { CloseIcon } from '../icons';
 import { createComponentGroup } from '../utility/component-group';
 import { UnStyledButton } from './button';
+import * as D from '@radix-ui/react-dialog';
+import { Root as VisuallyHidden } from '@radix-ui/react-visually-hidden';
 
 import './dialog.css';
 
-const DialogRoot = forwardRef<
-  HTMLDivElement,
-  ComponentProps<typeof ReachDialog>
->((props, ref) => <ReachDialog {...props} ref={ref} />);
-DialogRoot.displayName = 'Dialog';
-
 const DialogClose = forwardRef<
   HTMLButtonElement,
   JSX.IntrinsicElements['button']
 >((props, ref) => (
-  <UnStyledButton
-    {...props}
-    ref={ref}
-    type="button"
-    className={clsx('graphiql-dialog-close', props.className)}
-  >
-    <VisuallyHidden>Close dialog</VisuallyHidden>
-    <CloseIcon />
-  </UnStyledButton>
+  <D.Close asChild>
+    <UnStyledButton
+      {...props}
+      ref={ref}
+      type="button"
+      className={clsx('graphiql-dialog-close', props.className)}
+    >
+      <VisuallyHidden>Close dialog</VisuallyHidden>
+      <CloseIcon />
+    </UnStyledButton>
+  </D.Close>
 ));
 DialogClose.displayName = 'Dialog.Close';
 
-export const Dialog = createComponentGroup(DialogRoot, { Close: DialogClose });
+export function DialogRoot({
+  children,
+  ...props
+}: D.DialogProps): ReactElement {
+  return (
+    <D.Root {...props}>
+      <D.Portal>
+        <D.Overlay className="graphiql-dialog-overlay" />
+        <D.Content className="graphiql-dialog">{children}</D.Content>
+      </D.Portal>
+    </D.Root>
+  );
+}
+
+export const Dialog = createComponentGroup(DialogRoot, {
+  Close: DialogClose,
+  Title: D.Title,
+  Trigger: D.Trigger,
+  Description: D.Description,
+});

packages/graphiql/src/components/GraphiQL.tsx

@@ -165,6 +165,7 @@ export function GraphiQL({
     </GraphiQLProvider>
   );
 }
+
 // Export main windows/panes to be used separately if desired.
 GraphiQL.Logo = GraphiQLLogo;
 GraphiQL.Toolbar = GraphiQLToolbar;
@@ -643,12 +644,18 @@ export function GraphiQLInterface(props: GraphiQLInterfaceProps) {
         </div>
       </div>
       <Dialog
-        isOpen={showDialog === 'short-keys'}
-        onDismiss={() => setShowDialog(null)}
+        open={showDialog === 'short-keys'}
+        onOpenChange={isOpen => {
+          if (!isOpen) {
+            setShowDialog(null);
+          }
+        }}
       >
         <div className="graphiql-dialog-header">
-          <div className="graphiql-dialog-title">Short Keys</div>
-          <Dialog.Close onClick={() => setShowDialog(null)} />
+          <Dialog.Title className="graphiql-dialog-title">
+            Short Keys
+          </Dialog.Title>
+          <Dialog.Close />
         </div>
         <div className="graphiql-dialog-section">
           <div>
@@ -742,20 +749,19 @@ export function GraphiQLInterface(props: GraphiQLInterfaceProps) {
         </div>
       </Dialog>
       <Dialog
-        isOpen={showDialog === 'settings'}
-        onDismiss={() => {
-          setShowDialog(null);
-          setClearStorageStatus(null);
+        open={showDialog === 'settings'}
+        onOpenChange={isOpen => {
+          if (!isOpen) {
+            setShowDialog(null);
+            setClearStorageStatus(null);
+          }
         }}
       >
         <div className="graphiql-dialog-header">
-          <div className="graphiql-dialog-title">Settings</div>
-          <Dialog.Close
-            onClick={() => {
-              setShowDialog(null);
-              setClearStorageStatus(null);
-            }}
-          />
+          <Dialog.Title className="graphiql-dialog-title">
+            Settings
+          </Dialog.Title>
+          <Dialog.Close />
         </div>
         {props.showPersistHeadersSettings ? (
           <div className="graphiql-dialog-section">

packages/graphiql/src/style.css

@@ -275,59 +275,60 @@ button.graphiql-tab-add > svg {
 }
 
 /* The header of the settings dialog */
-reach-portal .graphiql-dialog-header {
+.graphiql-dialog .graphiql-dialog-header {
   align-items: center;
   display: flex;
   justify-content: space-between;
   padding: var(--px-24);
 }
 
 /* The title of the settings dialog */
-reach-portal .graphiql-dialog-title {
+.graphiql-dialog .graphiql-dialog-title {
   font-size: var(--font-size-h3);
   font-weight: var(--font-weight-medium);
+  margin: 0;
 }
 
 /* A section inside the settings dialog */
-reach-portal .graphiql-dialog-section {
+.graphiql-dialog .graphiql-dialog-section {
   align-items: center;
   border-top: 1px solid
     hsla(var(--color-neutral), var(--alpha-background-heavy));
   display: flex;
   justify-content: space-between;
   padding: var(--px-24);
 }
-reach-portal .graphiql-dialog-section > :not(:first-child) {
+.graphiql-dialog .graphiql-dialog-section > :not(:first-child) {
   margin-left: var(--px-24);
 }
 
 /* The section title in the settings dialog */
-reach-portal .graphiql-dialog-section-title {
+.graphiql-dialog .graphiql-dialog-section-title {
   font-size: var(--font-size-h4);
   font-weight: var(--font-weight-medium);
 }
 
 /* The section caption in the settings dialog */
-reach-portal .graphiql-dialog-section-caption {
+.graphiql-dialog .graphiql-dialog-section-caption {
   color: hsla(var(--color-neutral), var(--alpha-secondary));
 }
 
-reach-portal .graphiql-warning-text {
+.graphiql-dialog .graphiql-warning-text {
   color: hsl(var(--color-warning));
   font-weight: var(--font-weight-medium);
 }
 
-reach-portal .graphiql-table {
+.graphiql-dialog .graphiql-table {
   border-collapse: collapse;
   width: 100%;
 }
-reach-portal .graphiql-table :is(th, td) {
+.graphiql-dialog .graphiql-table :is(th, td) {
   border: 1px solid hsla(var(--color-neutral), var(--alpha-background-heavy));
   padding: var(--px-8) var(--px-12);
 }
 
 /* A single key the short-key dialog */
-reach-portal .graphiql-key {
+.graphiql-dialog .graphiql-key {
   background-color: hsla(var(--color-neutral), var(--alpha-background-medium));
   border-radius: var(--border-radius-4);
   padding: var(--px-4);