[v4] remove createComponentGroup utility in favour Object.assign

.changeset/thick-adults-leave.md

@@ -0,0 +1,5 @@
+---
+'@graphiql/react': minor
+---
+
+remove `createComponentGroup` utility in favour `Object.assign`

.changeset/weak-dancers-jog.md

@@ -6,13 +6,13 @@ Remove `toolbar.additionalContent` and `toolbar.additionalComponent` props in fa
 
 ## Migration from `toolbar.additionalContent`
 
-#### Before
+### Before
 
 ```jsx
 <GraphiQL toolbar={{ additionalContent: <button>My button</button> }} />
 ```
 
-#### After
+### After
 
 ```jsx
 <GraphiQL>
@@ -29,9 +29,9 @@ Remove `toolbar.additionalContent` and `toolbar.additionalComponent` props in fa
 </GraphiQL>
 ```
 
-### Migration from `toolbar.additionalComponent`
+## Migration from `toolbar.additionalComponent`
 
-#### Before
+### Before
 
 ```jsx
 <GraphiQL
@@ -43,7 +43,7 @@ Remove `toolbar.additionalContent` and `toolbar.additionalComponent` props in fa
 />
 ```
 
-#### After
+### After
 
 ```jsx
 <GraphiQL>

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

@@ -1,7 +1,6 @@
 import { ReactNode } from 'react';
 import { clsx } from 'clsx';
 import { DropdownMenu, Tooltip } from '../ui';
-import { createComponentGroup } from '../utility/component-group';
 
 import './menu.css';
 import { DropdownMenuProps } from '@radix-ui/react-dropdown-menu';
@@ -36,6 +35,6 @@ const ToolbarMenuRoot = ({
   </DropdownMenu>
 );
 
-export const ToolbarMenu = createComponentGroup(ToolbarMenuRoot, {
+export const ToolbarMenu = Object.assign(ToolbarMenuRoot, {
   Item: DropdownMenu.Item,
 });

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

@@ -1,7 +1,6 @@
 import { clsx } from 'clsx';
 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';
@@ -40,7 +39,7 @@ export function DialogRoot({
   );
 }
 
-export const Dialog = createComponentGroup(DialogRoot, {
+export const Dialog = Object.assign(DialogRoot, {
   Close: DialogClose,
   Title: D.Title,
   Trigger: D.Trigger,

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

@@ -1,6 +1,5 @@
 import { ComponentProps, forwardRef, ReactElement } from 'react';
 import { clsx } from 'clsx';
-import { createComponentGroup } from '../utility/component-group';
 import {
   Trigger,
   Portal,
@@ -53,7 +52,7 @@ const Item = ({ className, children, ...props }: DropdownMenuItemProps) => (
   </RadixItem>
 );
 
-export const DropdownMenu = createComponentGroup(Root, {
+export const DropdownMenu = Object.assign(Root, {
   Button,
   Item,
   Content,

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

@@ -1,6 +1,5 @@
 import { ReactElement, ReactNode } from 'react';
 import * as T from '@radix-ui/react-tooltip';
-import { createComponentGroup } from '../utility/component-group';
 import './tooltip.css';
 
 export function TooltipRoot({
@@ -27,6 +26,6 @@ export function TooltipRoot({
   );
 }
 
-export const Tooltip = createComponentGroup(TooltipRoot, {
+export const Tooltip = Object.assign(TooltipRoot, {
   Provider: T.Provider,
 });