v6: Remove the cn re-export from @graphiql/react (#4423)

## Summary

`@graphiql/react` had a `cn` helper that was just a re-export of `clsx`,
left over from before the Button/IconButton restyle. It didn't add any
behavior of its own, so this removes it and has every internal usage
import `clsx` directly instead: all the component files in
`graphiql-react` that used `cn(...)`, plus `@graphiql/plugin-history`
and the `graphiql` package, which both imported `cn` from
`@graphiql/react` rather than depending on `clsx` themselves. Both
packages now list `clsx` as a direct dependency.

Since `cn` was exported from `@graphiql/react`'s public entry point,
dropping it is a breaking change for 6.0.0. Added a changeset with a
major bump and a short note in the v6 migration guide pointing anyone
using `cn` at `clsx`.

Refs: #4228

Author: trevor-scheer

.changeset/remove-cn-reexport.md

@@ -0,0 +1,5 @@
+---
+'@graphiql/react': major
+---
+
+`cn` is no longer exported from `@graphiql/react`; import `clsx` directly.

docs/migration/graphiql-6.0.0.md

@@ -530,3 +530,4 @@ Nothing below is happening in v6. These are informal signals about where the pro
 
 - **Browserslist.** v6 drops the project's custom `.browserslistrc` in favor of the single `defaults` browserslist preset (`> 0.5%, last 2 versions, Firefox ESR, not dead`). That range covers the modern browsers that support the OKLCH color functions the new token system relies on. If your previous bespoke config deliberately targeted very old browsers, they may fall outside the new range — check `defaults` against your support matrix if that matters to you.
 - **Monaco editor theme registration.** The built-in Monaco themes (`graphiql-DARK` and `graphiql-LIGHT`) were rewritten to use the v6 accent palette — every GraphQL token type (keywords, type names, field identifiers, variables, annotations, strings, numbers, comments) and the surrounding editor chrome (suggest widget, hover widget, quick input) now pull from the same tokens as the rest of the UI. The `editorTheme` prop on `<GraphiQL>` still takes the same `{ dark, light }` pair of Monaco theme names or definitions it always did, so a custom theme registered through that prop should continue to work unchanged. If you were depending on the specific color values baked into the previous built-in `graphiql-DARK` / `graphiql-LIGHT` themes (for a screenshot test, for example), expect those values to have shifted.
+- **`cn` removed from `@graphiql/react`.** The `cn` helper was just a re-export of `clsx`. It's gone now, so import `clsx` directly from the `clsx` package instead.

packages/graphiql-plugin-history/package.json

@@ -43,6 +43,7 @@
   },
   "dependencies": {
     "@graphiql/toolkit": "^0.12.0",
+    "clsx": "^1.2.1",
     "react-compiler-runtime": "19.1.0-rc.1",
     "zustand": "^5"
   },

packages/graphiql-plugin-history/src/components.tsx

@@ -1,7 +1,7 @@
 import type { QueryStoreItem } from '@graphiql/toolkit';
 import { FC, MouseEventHandler, useEffect, useRef, useState } from 'react';
+import { clsx } from 'clsx';
 import {
-  cn,
   CloseIcon,
   PenIcon,
   StarFilledIcon,
@@ -153,7 +153,7 @@ export const HistoryItem: FC<QueryHistoryItemProps> = props => {
     : null;
 
   return (
-    <li className={cn('graphiql-history-item', isEditable && 'editable')}>
+    <li className={clsx('graphiql-history-item', isEditable && 'editable')}>
       {isEditable ? (
         <>
           <input

packages/graphiql-react/src/components/button-group/index.tsx

@@ -1,5 +1,5 @@
 import { ComponentPropsWithoutRef, forwardRef } from 'react';
-import { cn } from '../../utility';
+import { clsx } from 'clsx';
 import './index.css';
 
 export const ButtonGroup = forwardRef<
@@ -9,7 +9,7 @@ export const ButtonGroup = forwardRef<
   <div
     {...props}
     ref={ref}
-    className={cn('graphiql-button-group', props.className)}
+    className={clsx('graphiql-button-group', props.className)}
   />
 ));
 ButtonGroup.displayName = 'ButtonGroup';

packages/graphiql-react/src/components/button/index.tsx

@@ -1,5 +1,5 @@
 import { ComponentPropsWithoutRef, forwardRef } from 'react';
-import { clsx as cn } from 'clsx';
+import { clsx } from 'clsx';
 import './index.css';
 
 type UnStyledButtonProps = ComponentPropsWithoutRef<'button'>;
@@ -11,7 +11,7 @@ export const UnStyledButton = forwardRef<
   <button
     {...props}
     ref={ref}
-    className={cn('graphiql-un-styled', props.className)}
+    className={clsx('graphiql-un-styled', props.className)}
   />
 ));
 UnStyledButton.displayName = 'UnStyledButton';
@@ -26,7 +26,7 @@ export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
     <button
       {...props}
       ref={ref}
-      className={cn(
+      className={clsx(
         'graphiql-button',
         props.variant === 'primary' && 'graphiql-button-primary',
         {

packages/graphiql-react/src/components/dialog/index.tsx

@@ -1,4 +1,4 @@
-import { cn } from '../../utility';
+import { clsx } from 'clsx';
 import { forwardRef, FC, ComponentPropsWithoutRef, RefObject } from 'react';
 import { CloseIcon } from '../../icons';
 import { UnStyledButton } from '../button';
@@ -17,7 +17,7 @@ const DialogClose = forwardRef<
       {...props}
       ref={ref}
       type="button"
-      className={cn('graphiql-dialog-close', props.className)}
+      className={clsx('graphiql-dialog-close', props.className)}
     >
       <VisuallyHidden>Close dialog</VisuallyHidden>
       <CloseIcon />
@@ -36,7 +36,11 @@ const DialogHeader = forwardRef<
   HTMLDivElement,
   ComponentPropsWithoutRef<'div'>
 >(({ children, className, ...props }, ref) => (
-  <div {...props} ref={ref} className={cn('graphiql-dialog-header', className)}>
+  <div
+    {...props}
+    ref={ref}
+    className={clsx('graphiql-dialog-header', className)}
+  >
     {typeof children === 'string' ? (
       <D.Title className="graphiql-dialog-title">{children}</D.Title>
     ) : (
@@ -50,7 +54,11 @@ DialogHeader.displayName = 'Dialog.Header';
 /** The content region of a dialog, with consistent padding. */
 const DialogBody = forwardRef<HTMLDivElement, ComponentPropsWithoutRef<'div'>>(
   ({ children, className, ...props }, ref) => (
-    <div {...props} ref={ref} className={cn('graphiql-dialog-body', className)}>
+    <div
+      {...props}
+      ref={ref}
+      className={clsx('graphiql-dialog-body', className)}
+    >
       {children}
     </div>
   ),
@@ -62,7 +70,11 @@ const DialogFooter = forwardRef<
   HTMLDivElement,
   ComponentPropsWithoutRef<'div'>
 >(({ children, className, ...props }, ref) => (
-  <div {...props} ref={ref} className={cn('graphiql-dialog-footer', className)}>
+  <div
+    {...props}
+    ref={ref}
+    className={clsx('graphiql-dialog-footer', className)}
+  >
     {children}
   </div>
 ));

packages/graphiql-react/src/components/dropdown-menu/index.tsx

@@ -1,5 +1,5 @@
 import { ComponentProps, FC, forwardRef } from 'react';
-import { cn } from '../../utility';
+import { clsx } from 'clsx';
 import {
   Trigger,
   Portal,
@@ -36,7 +36,7 @@ const Content: FC<DropdownMenuContentProps> = ({
       <RadixContent
         align={align}
         sideOffset={sideOffset}
-        className={cn('graphiql-dropdown-content', className)}
+        className={clsx('graphiql-dropdown-content', className)}
         {...props}
       >
         {children}
@@ -46,14 +46,14 @@ const Content: FC<DropdownMenuContentProps> = ({
 };
 
 const Item: FC<DropdownMenuItemProps> = ({ className, children, ...props }) => (
-  <RadixItem className={cn('graphiql-dropdown-item', className)} {...props}>
+  <RadixItem className={clsx('graphiql-dropdown-item', className)} {...props}>
     {children}
   </RadixItem>
 );
 
 const Separator: FC<ComponentProps<'div'>> = ({ className, ...props }) => (
   <RadixSeparator
-    className={cn('graphiql-dropdown-separator', className)}
+    className={clsx('graphiql-dropdown-separator', className)}
     {...props}
   />
 );

packages/graphiql-react/src/components/markdown-content/index.tsx

@@ -1,5 +1,6 @@
 import { ComponentPropsWithoutRef, forwardRef } from 'react';
-import { cn, markdown } from '../../utility';
+import { clsx } from 'clsx';
+import { markdown } from '../../utility';
 import './index.css';
 
 interface MarkdownContentProps extends Omit<
@@ -16,7 +17,7 @@ export const MarkdownContent = forwardRef<HTMLDivElement, MarkdownContentProps>(
     <div
       {...props}
       ref={ref}
-      className={cn(
+      className={clsx(
         `graphiql-markdown-${type}`,
         onlyShowFirstChild && 'graphiql-markdown-preview',
         props.className,

packages/graphiql-react/src/components/operation-editor.tsx

@@ -12,7 +12,8 @@ import {
   createEditor,
   onEditorContainerKeyDown,
 } from '../utility/create-editor';
-import { debounce, pick, cleanupDisposables, cn } from '../utility';
+import { clsx } from 'clsx';
+import { debounce, pick, cleanupDisposables } from '../utility';
 import { Uri, Range } from '../utility/monaco-ssr';
 import type { MonacoEditor, EditorProps, SchemaReference } from '../types';
 import {
@@ -428,7 +429,7 @@ export const OperationEditor: FC<OperationEditorProps> = ({
       tabIndex={0}
       onKeyDown={onEditorContainerKeyDown}
       {...props}
-      className={cn('graphiql-editor', props.className)}
+      className={clsx('graphiql-editor', props.className)}
     />
   );
 };