From bf0c4e7236f4a68448063aa0c6a4ed439e869a9f Mon Sep 17 00:00:00 2001
From: Dimitri POSTOLOV <dmytropostolov@gmail.com>
Date: Tue, 13 Aug 2024 23:26:38 +0200
Subject: [PATCH] [v4] remove `createComponentGroup` utility in favour
 `Object.assign` (#3717)

---
 .changeset/thick-adults-leave.md                    |  5 +++++
 .changeset/weak-dancers-jog.md                      | 10 +++++-----
 packages/graphiql-react/src/toolbar/menu.tsx        |  3 +--
 packages/graphiql-react/src/ui/dialog.tsx           |  3 +--
 packages/graphiql-react/src/ui/dropdown.tsx         |  3 +--
 packages/graphiql-react/src/ui/tooltip.tsx          |  3 +--
 .../graphiql-react/src/utility/component-group.ts   | 13 -------------
 7 files changed, 14 insertions(+), 26 deletions(-)
 create mode 100644 .changeset/thick-adults-leave.md
 delete mode 100644 packages/graphiql-react/src/utility/component-group.ts

diff --git a/.changeset/thick-adults-leave.md b/.changeset/thick-adults-leave.md
new file mode 100644
index 00000000000..f18738c9905
--- /dev/null
+++ b/.changeset/thick-adults-leave.md
@@ -0,0 +1,5 @@
+---
+'@graphiql/react': minor
+---
+
+remove `createComponentGroup` utility in favour `Object.assign`
diff --git a/.changeset/weak-dancers-jog.md b/.changeset/weak-dancers-jog.md
index a95c2bc5590..8b78fe25302 100644
--- a/.changeset/weak-dancers-jog.md
+++ b/.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>
diff --git a/packages/graphiql-react/src/toolbar/menu.tsx b/packages/graphiql-react/src/toolbar/menu.tsx
index fd5ab6f5075..1f3ab4f638e 100644
--- a/packages/graphiql-react/src/toolbar/menu.tsx
+++ b/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,
 });
diff --git a/packages/graphiql-react/src/ui/dialog.tsx b/packages/graphiql-react/src/ui/dialog.tsx
index 4b9d3091645..6a5f9881fea 100644
--- a/packages/graphiql-react/src/ui/dialog.tsx
+++ b/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,
diff --git a/packages/graphiql-react/src/ui/dropdown.tsx b/packages/graphiql-react/src/ui/dropdown.tsx
index 5009c102da4..4d39e706fbc 100644
--- a/packages/graphiql-react/src/ui/dropdown.tsx
+++ b/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,
diff --git a/packages/graphiql-react/src/ui/tooltip.tsx b/packages/graphiql-react/src/ui/tooltip.tsx
index af141a9364c..8c9cea4523c 100644
--- a/packages/graphiql-react/src/ui/tooltip.tsx
+++ b/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,
 });
diff --git a/packages/graphiql-react/src/utility/component-group.ts b/packages/graphiql-react/src/utility/component-group.ts
deleted file mode 100644
index d8cae861a00..00000000000
--- a/packages/graphiql-react/src/utility/component-group.ts
+++ /dev/null
@@ -1,13 +0,0 @@
-import { JSXElementConstructor } from 'react';
-
-export const createComponentGroup = <
-  Root extends JSXElementConstructor<any>,
-  Children extends { [key: string]: JSXElementConstructor<any> },
->(
-  root: Root,
-  children: Children,
-): Root & Children =>
-  Object.entries(children).reduce<any>((r, [key, value]) => {
-    r[key] = value;
-    return r;
-  }, root);