diff --git a/packages/graphiql-react/src/toolbar/button.tsx b/packages/graphiql-react/src/toolbar/button.tsx index df802823353..ec6bf5c8f7a 100644 --- a/packages/graphiql-react/src/toolbar/button.tsx +++ b/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(null); return ( ); -} +}); +ToolbarButton.displayName = 'ToolbarButton'; diff --git a/packages/graphiql-react/src/ui/button-group.tsx b/packages/graphiql-react/src/ui/button-group.tsx index 2789150695e..0dee87dc7e7 100644 --- a/packages/graphiql-react/src/ui/button-group.tsx +++ b/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 ( -
- ); -} +export const ButtonGroup = forwardRef< + HTMLDivElement, + JSX.IntrinsicElements['div'] +>((props, ref) => ( +
+)); +ButtonGroup.displayName = 'ButtonGroup'; diff --git a/packages/graphiql-react/src/ui/button.tsx b/packages/graphiql-react/src/ui/button.tsx index 950210116fb..d010196b559 100644 --- a/packages/graphiql-react/src/ui/button.tsx +++ b/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 ( -