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

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()}`

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) {