From 6e2cb75fdcc3936d92a677007f79e671b32f8d87 Mon Sep 17 00:00:00 2001
From: Robin Malfait <malfait.robin@gmail.com>
Date: Fri, 19 Feb 2021 13:22:36 +0100
Subject: [PATCH] assign displayName instead of name (#247)

This allows us to read a custom `displayName`, and we can default to a
`name`. React Devtools will still be able to read this information.

Fixes: #246
---
 .../@headlessui-react/src/components/dialog/dialog.tsx    | 8 ++++----
 packages/@headlessui-react/src/utils/render.ts            | 8 ++++++--
 2 files changed, 10 insertions(+), 6 deletions(-)

diff --git a/packages/@headlessui-react/src/components/dialog/dialog.tsx b/packages/@headlessui-react/src/components/dialog/dialog.tsx
index 2c24c7fd39..7708612c6c 100644
--- a/packages/@headlessui-react/src/components/dialog/dialog.tsx
+++ b/packages/@headlessui-react/src/components/dialog/dialog.tsx
@@ -79,7 +79,7 @@ DialogContext.displayName = 'DialogContext'
 function useDialogContext(component: string) {
   let context = useContext(DialogContext)
   if (context === null) {
-    let err = new Error(`<${component} /> is missing a parent <${Dialog.name} /> component.`)
+    let err = new Error(`<${component} /> is missing a parent <${Dialog.displayName} /> component.`)
     if (Error.captureStackTrace) Error.captureStackTrace(err, useDialogContext)
     throw err
   }
@@ -284,7 +284,7 @@ type OverlayPropsWeControl = 'id' | 'aria-hidden' | 'onClick'
 let Overlay = forwardRefWithAs(function Overlay<
   TTag extends ElementType = typeof DEFAULT_OVERLAY_TAG
 >(props: Props<TTag, OverlayRenderPropArg, OverlayPropsWeControl>, ref: Ref<HTMLDivElement>) {
-  let [{ dialogState, close }] = useDialogContext([Dialog.name, Overlay.name].join('.'))
+  let [{ dialogState, close }] = useDialogContext([Dialog.displayName, Overlay.name].join('.'))
   let overlayRef = useSyncRefs(ref)
 
   let id = `headlessui-dialog-overlay-${useId()}`
@@ -323,7 +323,7 @@ type TitlePropsWeControl = 'id' | 'ref'
 function Title<TTag extends ElementType = typeof DEFAULT_TITLE_TAG>(
   props: Props<TTag, TitleRenderPropArg, TitlePropsWeControl>
 ) {
-  let [{ dialogState, setTitle }] = useDialogContext([Dialog.name, Title.name].join('.'))
+  let [{ dialogState, setTitle }] = useDialogContext([Dialog.displayName, Title.name].join('.'))
 
   let id = `headlessui-dialog-title-${useId()}`
 
@@ -348,7 +348,7 @@ function Description<TTag extends ElementType = typeof DEFAULT_DESCRIPTION_TAG>(
   props: Props<TTag, DescriptionRenderPropArg, DescriptionPropsWeControl>
 ) {
   let [{ dialogState, setDescription }] = useDialogContext(
-    [Dialog.name, Description.name].join('.')
+    [Dialog.displayName, Description.name].join('.')
   )
 
   let id = `headlessui-dialog-description-${useId()}`
diff --git a/packages/@headlessui-react/src/utils/render.ts b/packages/@headlessui-react/src/utils/render.ts
index c40027d409..e2cd6bcc38 100644
--- a/packages/@headlessui-react/src/utils/render.ts
+++ b/packages/@headlessui-react/src/utils/render.ts
@@ -182,8 +182,12 @@ function mergeEventFunctions(
  * This is a hack, but basically we want to keep the full 'API' of the component, but we do want to
  * wrap it in a forwardRef so that we _can_ passthrough the ref
  */
-export function forwardRefWithAs<T extends { name: string }>(component: T): T {
-  return Object.assign(forwardRef((component as unknown) as any) as any, { name: component.name })
+export function forwardRefWithAs<T extends { name: string; displayName?: string }>(
+  component: T
+): T & { displayName: string } {
+  return Object.assign(forwardRef((component as unknown) as any) as any, {
+    displayName: component.displayName ?? component.name,
+  })
 }
 
 function compact<T extends Record<any, any>>(object: T) {