forward refs and props for UI components (#2628)

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

@@ -1,14 +1,18 @@
-import { useState } from 'react';
+import { forwardRef, useState } from 'react';
 
 import { UnStyledButton } from '../ui';
 
 import './button.css';
 
-export function ToolbarButton(props: JSX.IntrinsicElements['button']) {
+export const ToolbarButton = forwardRef<
+  HTMLButtonElement,
+  JSX.IntrinsicElements['button']
+>((props, ref) => {
   const [error, setError] = useState<Error | null>(null);
   return (
     <UnStyledButton
       {...props}
+      ref={ref}
       type="button"
       className={
         'graphiql-toolbar-button' +
@@ -31,4 +35,5 @@ export function ToolbarButton(props: JSX.IntrinsicElements['button']) {
       aria-invalid={error ? 'true' : props['aria-invalid']}
     />
   );
-}
+});
+ToolbarButton.displayName = 'ToolbarButton';

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

@@ -1,10 +1,15 @@
+import { forwardRef } from 'react';
+
 import './button-group.css';
 
-export function ButtonGroup(props: JSX.IntrinsicElements['div']) {
-  return (
-    <div
-      {...props}
-      className={`graphiql-button-group ${props.className || ''}`.trim()}
-    />
-  );
-}
+export const ButtonGroup = forwardRef<
+  HTMLDivElement,
+  JSX.IntrinsicElements['div']
+>((props, ref) => (
+  <div
+    {...props}
+    ref={ref}
+    className={`graphiql-button-group ${props.className || ''}`.trim()}
+  />
+));
+ButtonGroup.displayName = 'ButtonGroup';

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

@@ -1,31 +1,38 @@
+import { forwardRef } from 'react';
 import { compose } from '../utility/compose';
 
 import './button.css';
 
-export function UnStyledButton(props: JSX.IntrinsicElements['button']) {
-  return (
-    <button
-      {...props}
-      className={compose('graphiql-un-styled', props.className)}
-    />
-  );
-}
+export const UnStyledButton = forwardRef<
+  HTMLButtonElement,
+  JSX.IntrinsicElements['button']
+>((props, ref) => (
+  <button
+    {...props}
+    ref={ref}
+    className={compose('graphiql-un-styled', props.className)}
+  />
+));
+UnStyledButton.displayName = 'UnStyledButton';
 
 type ButtonProps = { state?: 'success' | 'error' };
 
-export function Button(props: ButtonProps & JSX.IntrinsicElements['button']) {
-  return (
-    <button
-      {...props}
-      className={compose(
-        'graphiql-button',
-        props.state === 'success'
-          ? 'graphiql-button-success'
-          : props.state === 'error'
-          ? 'graphiql-button-error'
-          : '',
-        props.className,
-      )}
-    />
-  );
-}
+export const Button = forwardRef<
+  HTMLButtonElement,
+  ButtonProps & JSX.IntrinsicElements['button']
+>((props, ref) => (
+  <button
+    {...props}
+    ref={ref}
+    className={compose(
+      'graphiql-button',
+      props.state === 'success'
+        ? 'graphiql-button-success'
+        : props.state === 'error'
+        ? 'graphiql-button-error'
+        : '',
+      props.className,
+    )}
+  />
+));
+Button.displayName = 'Button';

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

@@ -1,27 +1,33 @@
 import { Dialog as ReachDialog } from '@reach/dialog';
 import { VisuallyHidden } from '@reach/visually-hidden';
-import { ComponentProps } from 'react';
+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';
 
-export function Dialog(props: ComponentProps<typeof ReachDialog>) {
-  return <ReachDialog {...props} />;
-}
+const DialogRoot = forwardRef<
+  HTMLDivElement,
+  ComponentProps<typeof ReachDialog>
+>((props, ref) => <ReachDialog {...props} ref={ref} />);
+DialogRoot.displayName = 'Dialog';
 
-function DialogClose(props: JSX.IntrinsicElements['button']) {
-  return (
-    <UnStyledButton
-      {...props}
-      type="button"
-      className={compose('graphiql-dialog-close', props.className)}
-    >
-      <VisuallyHidden>Close dialog</VisuallyHidden>
-      <CloseIcon />
-    </UnStyledButton>
-  );
-}
+const DialogClose = forwardRef<
+  HTMLButtonElement,
+  JSX.IntrinsicElements['button']
+>((props, ref) => (
+  <UnStyledButton
+    {...props}
+    ref={ref}
+    type="button"
+    className={compose('graphiql-dialog-close', props.className)}
+  >
+    <VisuallyHidden>Close dialog</VisuallyHidden>
+    <CloseIcon />
+  </UnStyledButton>
+));
+DialogClose.displayName = 'Dialog.Close';
 
-Dialog.Close = DialogClose;
+export const Dialog = createComponentGroup(DialogRoot, { Close: DialogClose });

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

@@ -1,4 +1,6 @@
+import { forwardRef } from 'react';
 import { markdown } from '../markdown';
+import { compose } from '../utility/compose';
 
 import './markdown.css';
 
@@ -8,13 +10,19 @@ type MarkdownContentProps = {
   type: 'description' | 'deprecation';
 };
 
-export function MarkdownContent(props: MarkdownContentProps) {
-  return (
-    <div
-      className={`graphiql-markdown-${props.type}${
-        props.onlyShowFirstChild ? ' graphiql-markdown-preview' : ''
-      }`}
-      dangerouslySetInnerHTML={{ __html: markdown.render(props.children) }}
-    />
-  );
-}
+export const MarkdownContent = forwardRef<
+  HTMLDivElement,
+  MarkdownContentProps & Omit<JSX.IntrinsicElements['div'], 'children'>
+>(({ children, onlyShowFirstChild, type, ...props }, ref) => (
+  <div
+    {...props}
+    ref={ref}
+    className={compose(
+      `graphiql-markdown-${type}`,
+      onlyShowFirstChild ? ' graphiql-markdown-preview' : '',
+      props.className,
+    )}
+    dangerouslySetInnerHTML={{ __html: markdown.render(children) }}
+  />
+));
+MarkdownContent.displayName = 'MarkdownContent';

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

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

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

@@ -1,4 +1,6 @@
+import { forwardRef } from 'react';
 import { CloseIcon } from '../icons';
+import { createComponentGroup } from '../utility/component-group';
 import { compose } from '../utility/compose';
 import { UnStyledButton } from './button';
 
@@ -8,64 +10,72 @@ type TabProps = {
   isActive?: boolean;
 };
 
-export function Tab({
-  isActive,
-  ...props
-}: TabProps & JSX.IntrinsicElements['div']) {
-  return (
-    <div
-      {...props}
-      role="tab"
-      aria-selected={isActive}
-      className={compose(
-        'graphiql-tab',
-        isActive ? 'graphiql-tab-active' : '',
-        props.className,
-      )}
-    >
-      {props.children}
-    </div>
-  );
-}
-
-function TabButton(props: JSX.IntrinsicElements['button']) {
-  return (
-    <UnStyledButton
-      {...props}
-      type="button"
-      className={compose('graphiql-tab-button', props.className)}
-    >
-      {props.children}
-    </UnStyledButton>
-  );
-}
+const TabRoot = forwardRef<
+  HTMLDivElement,
+  TabProps & JSX.IntrinsicElements['div']
+>(({ isActive, ...props }, ref) => (
+  <div
+    {...props}
+    ref={ref}
+    role="tab"
+    aria-selected={isActive}
+    className={compose(
+      'graphiql-tab',
+      isActive ? 'graphiql-tab-active' : '',
+      props.className,
+    )}
+  >
+    {props.children}
+  </div>
+));
+TabRoot.displayName = 'Tab';
 
-Tab.Button = TabButton;
+const TabButton = forwardRef<
+  HTMLButtonElement,
+  JSX.IntrinsicElements['button']
+>((props, ref) => (
+  <UnStyledButton
+    {...props}
+    ref={ref}
+    type="button"
+    className={compose('graphiql-tab-button', props.className)}
+  >
+    {props.children}
+  </UnStyledButton>
+));
+TabButton.displayName = 'Tab.Button';
 
-function TabClose(props: JSX.IntrinsicElements['button']) {
-  return (
+const TabClose = forwardRef<HTMLButtonElement, JSX.IntrinsicElements['button']>(
+  (props, ref) => (
     <UnStyledButton
       aria-label="Close Tab"
       title="Close Tab"
       {...props}
+      ref={ref}
       type="button"
       className={compose('graphiql-tab-close', props.className)}
     >
       <CloseIcon />
     </UnStyledButton>
-  );
-}
+  ),
+);
+TabClose.displayName = 'Tab.Close';
 
-Tab.Close = TabClose;
+export const Tab = createComponentGroup(TabRoot, {
+  Button: TabButton,
+  Close: TabClose,
+});
 
-export function Tabs(props: JSX.IntrinsicElements['div']) {
-  return (
+export const Tabs = forwardRef<HTMLDivElement, JSX.IntrinsicElements['div']>(
+  (props, ref) => (
     <div
       {...props}
+      ref={ref}
       role="tablist"
       className={compose('graphiql-tabs', props.className)}
     >
       {props.children}
     </div>
-  );
-}
+  ),
+);
+Tabs.displayName = 'Tabs';