[@graphiql/react]: replace compose.ts with clsx for class concatenation

.changeset/lazy-camels-trade.md

@@ -0,0 +1,5 @@
+---
+'@graphiql/react': patch
+---
+
+replace `compose.ts` with `clsx` for class concatenation

custom-words.txt

@@ -74,6 +74,7 @@ codesandbox
 combobox
 commitlint
 cosmicconfig
+clsx
 dompurify
 dustjs
 dset

packages/graphiql-react/package.json

@@ -43,6 +43,7 @@
     "@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.2",
     "copy-to-clipboard": "^3.2.0",

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

@@ -1,4 +1,5 @@
 import { useEffect } from 'react';
+import { clsx } from 'clsx';
 
 import { useEditorContext } from '../context';
 import { useHeaderEditor, UseHeaderEditorArgs } from '../header-editor';
@@ -29,6 +30,6 @@ export function HeaderEditor({ isHidden, ...hookArgs }: HeaderEditorProps) {
   }, [headerEditor, isHidden]);
 
   return (
-    <div className={`graphiql-editor${isHidden ? ' hidden' : ''}`} ref={ref} />
+    <div className={clsx('graphiql-editor', isHidden && 'hidden')} ref={ref} />
   );
 }

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

@@ -1,4 +1,5 @@
 import { useEffect } from 'react';
+import { clsx } from 'clsx';
 
 import { useEditorContext } from '../context';
 import { useVariableEditor, UseVariableEditorArgs } from '../variable-editor';
@@ -31,6 +32,6 @@ export function VariableEditor({ isHidden, ...hookArgs }: VariableEditorProps) {
   }, [variableEditor, isHidden]);
 
   return (
-    <div className={`graphiql-editor${isHidden ? ' hidden' : ''}`} ref={ref} />
+    <div className={clsx('graphiql-editor', isHidden && 'hidden')} ref={ref} />
   );
 }

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

@@ -1,5 +1,6 @@
 import { QueryStoreItem } from '@graphiql/toolkit';
 import { Fragment, useEffect, useRef, useState } from 'react';
+import { clsx } from 'clsx';
 
 import { useEditorContext } from '../editor';
 import { CloseIcon, PenIcon, StarFilledIcon, StarIcon } from '../icons';
@@ -66,7 +67,7 @@ export function HistoryItem(props: QueryHistoryItemProps) {
     formatQuery(props.item.query);
 
   return (
-    <li className={'graphiql-history-item' + (isEditable ? ' editable' : '')}>
+    <li className={clsx('graphiql-history-item', isEditable && 'editable')}>
       {isEditable ? (
         <>
           <input

packages/graphiql-react/src/toolbar/button.tsx

@@ -1,6 +1,6 @@
 import { forwardRef, useState } from 'react';
+import { clsx } from 'clsx';
 import { Tooltip, UnStyledButton } from '../ui';
-import { compose } from '../utility/compose';
 
 import './button.css';
 
@@ -19,9 +19,9 @@ export const ToolbarButton = forwardRef<
         {...props}
         ref={ref}
         type="button"
-        className={compose(
+        className={clsx(
           'graphiql-toolbar-button',
-          error ? 'error' : '',
+          error && 'error',
           props.className,
         )}
         onClick={event => {

packages/graphiql-react/src/toolbar/listbox.tsx

@@ -1,7 +1,7 @@
 import { ComponentProps, forwardRef, ReactNode } from 'react';
+import { clsx } from 'clsx';
 import { Listbox, Tooltip } from '../ui';
 import { createComponentGroup } from '../utility/component-group';
-import { compose } from '../utility/compose';
 
 import './listbox.css';
 
@@ -19,7 +19,7 @@ const ToolbarListboxRoot = forwardRef<
     <Listbox.Input
       {...props}
       ref={ref}
-      className={compose('graphiql-toolbar-listbox', props.className)}
+      className={clsx('graphiql-toolbar-listbox', props.className)}
       aria-label={labelWithValue}
     >
       <Tooltip label={labelWithValue}>

packages/graphiql-react/src/toolbar/menu.tsx

@@ -1,7 +1,7 @@
 import { forwardRef, ReactNode } from 'react';
+import { clsx } from 'clsx';
 import { Menu, Tooltip } from '../ui';
 import { createComponentGroup } from '../utility/component-group';
-import { compose } from '../utility/compose';
 
 import './menu.css';
 
@@ -17,7 +17,7 @@ const ToolbarMenuRoot = forwardRef<
   <Menu {...props} ref={ref}>
     <Tooltip label={label}>
       <Menu.Button
-        className={compose(
+        className={clsx(
           'graphiql-un-styled graphiql-toolbar-menu',
           props.className,
         )}

packages/graphiql-react/src/ui/button-group.tsx

@@ -1,4 +1,5 @@
 import { forwardRef } from 'react';
+import { clsx } from 'clsx';
 
 import './button-group.css';
 
@@ -9,7 +10,7 @@ export const ButtonGroup = forwardRef<
   <div
     {...props}
     ref={ref}
-    className={`graphiql-button-group ${props.className || ''}`.trim()}
+    className={clsx('graphiql-button-group', props.className)}
   />
 ));
 ButtonGroup.displayName = 'ButtonGroup';

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

@@ -1,5 +1,5 @@
 import { forwardRef } from 'react';
-import { compose } from '../utility/compose';
+import { clsx } from 'clsx';
 
 import './button.css';
 
@@ -10,7 +10,7 @@ export const UnStyledButton = forwardRef<
   <button
     {...props}
     ref={ref}
-    className={compose('graphiql-un-styled', props.className)}
+    className={clsx('graphiql-un-styled', props.className)}
   />
 ));
 UnStyledButton.displayName = 'UnStyledButton';
@@ -24,13 +24,12 @@ export const Button = forwardRef<
   <button
     {...props}
     ref={ref}
-    className={compose(
+    className={clsx(
       'graphiql-button',
-      props.state === 'success'
-        ? 'graphiql-button-success'
-        : props.state === 'error'
-        ? 'graphiql-button-error'
-        : '',
+      {
+        success: 'graphiql-button-success',
+        error: 'graphiql-button-error',
+      }[props.state!],
       props.className,
     )}
   />

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

@@ -1,9 +1,9 @@
+import { clsx } from 'clsx';
 import { Dialog as ReachDialog } from '@reach/dialog';
 import { VisuallyHidden } from '@reach/visually-hidden';
 import { ComponentProps, forwardRef } from 'react';
 import { CloseIcon } from '../icons';
 import { createComponentGroup } from '../utility/component-group';
-import { compose } from '../utility/compose';
 import { UnStyledButton } from './button';
 
 import './dialog.css';
@@ -22,7 +22,7 @@ const DialogClose = forwardRef<
     {...props}
     ref={ref}
     type="button"
-    className={compose('graphiql-dialog-close', props.className)}
+    className={clsx('graphiql-dialog-close', props.className)}
   >
     <VisuallyHidden>Close dialog</VisuallyHidden>
     <CloseIcon />

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

@@ -12,8 +12,8 @@ import {
   MenuList,
 } from '@reach/menu-button';
 import { ComponentProps, forwardRef } from 'react';
+import { clsx } from 'clsx';
 import { createComponentGroup } from '../utility/component-group';
-import { compose } from '../utility/compose';
 
 import './dropdown.css';
 
@@ -24,7 +24,7 @@ const MenuButton = forwardRef<
   <ReachMenuButton
     {...props}
     ref={ref}
-    className={compose('graphiql-un-styled', props.className)}
+    className={clsx('graphiql-un-styled', props.className)}
   />
 ));
 MenuButton.displayName = 'MenuButton';
@@ -42,7 +42,7 @@ const ListboxButton = forwardRef<
   <ReachListboxButton
     {...props}
     ref={ref}
-    className={compose('graphiql-un-styled', props.className)}
+    className={clsx('graphiql-un-styled', props.className)}
   />
 ));
 ListboxButton.displayName = 'ListboxButton';

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

@@ -1,6 +1,6 @@
 import { forwardRef } from 'react';
+import { clsx } from 'clsx';
 import { markdown } from '../markdown';
-import { compose } from '../utility/compose';
 
 import './markdown.css';
 
@@ -17,9 +17,9 @@ export const MarkdownContent = forwardRef<
   <div
     {...props}
     ref={ref}
-    className={compose(
+    className={clsx(
       `graphiql-markdown-${type}`,
-      onlyShowFirstChild ? ' graphiql-markdown-preview' : '',
+      onlyShowFirstChild && 'graphiql-markdown-preview',
       props.className,
     )}
     dangerouslySetInnerHTML={{ __html: markdown.render(children) }}

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

@@ -1,5 +1,5 @@
 import { forwardRef } from 'react';
-import { compose } from '../utility/compose';
+import { clsx } from 'clsx';
 
 import './spinner.css';
 
@@ -8,7 +8,7 @@ export const Spinner = forwardRef<HTMLDivElement, JSX.IntrinsicElements['div']>(
     <div
       {...props}
       ref={ref}
-      className={compose('graphiql-spinner', props.className)}
+      className={clsx('graphiql-spinner', props.className)}
     />
   ),
 );

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

@@ -1,7 +1,7 @@
 import { forwardRef } from 'react';
+import { clsx } from 'clsx';
 import { CloseIcon } from '../icons';
 import { createComponentGroup } from '../utility/component-group';
-import { compose } from '../utility/compose';
 import { UnStyledButton } from './button';
 import { Tooltip } from './tooltip';
 
@@ -20,9 +20,9 @@ const TabRoot = forwardRef<
     ref={ref}
     role="tab"
     aria-selected={isActive}
-    className={compose(
+    className={clsx(
       'graphiql-tab',
-      isActive ? 'graphiql-tab-active' : '',
+      isActive && 'graphiql-tab-active',
       props.className,
     )}
   >
@@ -39,7 +39,7 @@ const TabButton = forwardRef<
     {...props}
     ref={ref}
     type="button"
-    className={compose('graphiql-tab-button', props.className)}
+    className={clsx('graphiql-tab-button', props.className)}
   >
     {props.children}
   </UnStyledButton>
@@ -54,7 +54,7 @@ const TabClose = forwardRef<HTMLButtonElement, JSX.IntrinsicElements['button']>(
         {...props}
         ref={ref}
         type="button"
-        className={compose('graphiql-tab-close', props.className)}
+        className={clsx('graphiql-tab-close', props.className)}
       >
         <CloseIcon />
       </UnStyledButton>
@@ -74,7 +74,7 @@ export const Tabs = forwardRef<HTMLDivElement, JSX.IntrinsicElements['div']>(
       {...props}
       ref={ref}
       role="tablist"
-      className={compose('graphiql-tabs', props.className)}
+      className={clsx('graphiql-tabs', props.className)}
     >
       {props.children}
     </div>

yarn.lock

@@ -8006,6 +8006,11 @@ clone@^2.1.1:
   resolved "https://registry.yarnpkg.com/clone/-/clone-2.1.2.tgz#1b7f4b9f591f1e8f83670401600345a02887435f"
   integrity sha512-3Pe/CF1Nn94hyhIYpjtiLhdCoEoz0DqQ+988E9gmeEdQZlojxnOb74wctFyuwWQHzqyf9X7C7MG8juUpqBJT8w==
 
+clsx@^1.2.1:
+  version "1.2.1"
+  resolved "https://registry.yarnpkg.com/clsx/-/clsx-1.2.1.tgz#0ddc4a20a549b59c93a4116bb26f5294ca17dc12"
+  integrity sha512-EcR6r5a8bj6pu3ycsa/E/cKVGuTgZJZdsyUYHOksG/UHIiKfjxzRxYJpyVBwYaQeOvghal9fcc4PidlgzugAQg==
+
 co@^4.6.0:
   version "4.6.0"
   resolved "https://registry.yarnpkg.com/co/-/co-4.6.0.tgz#6ea6bdf3d853ae54ccb8e47bfa0bf3f9031fb184"