Add RefProp to props (#3823)

React components `Field`, `Legend`, and `Fieldset` should include `ref`
in their `props`.

Fixes #3577

Author: linl33

packages/@headlessui-react/src/components/field/field.tsx

@@ -7,7 +7,7 @@ import { DisabledProvider, useDisabled } from '../../internal/disabled'
 import { FormFieldsProvider } from '../../internal/form-fields'
 import { IdProvider } from '../../internal/id'
 import type { Props } from '../../types'
-import { forwardRefWithAs, useRender, type HasDisplayName } from '../../utils/render'
+import { forwardRefWithAs, useRender, type HasDisplayName, type RefProp } from '../../utils/render'
 import { useDescriptions } from '../description/description'
 import { useLabels } from '../label/label'
 
@@ -76,7 +76,9 @@ function FieldFn<TTag extends ElementType = typeof DEFAULT_FIELD_TAG>(
 }
 
 export interface _internal_ComponentField extends HasDisplayName {
-  <TTag extends ElementType = typeof DEFAULT_FIELD_TAG>(props: FieldProps<TTag>): React.JSX.Element
+  <TTag extends ElementType = typeof DEFAULT_FIELD_TAG>(
+    props: FieldProps<TTag> & RefProp<typeof FieldFn>
+  ): React.JSX.Element
 }
 
 export let Field = forwardRefWithAs(FieldFn) as _internal_ComponentField

packages/@headlessui-react/src/components/fieldset/fieldset.tsx

@@ -6,7 +6,7 @@ import { useSlot } from '../../hooks/use-slot'
 import { useSyncRefs } from '../../hooks/use-sync-refs'
 import { DisabledProvider, useDisabled } from '../../internal/disabled'
 import type { Props } from '../../types'
-import { forwardRefWithAs, useRender, type HasDisplayName } from '../../utils/render'
+import { forwardRefWithAs, useRender, type HasDisplayName, type RefProp } from '../../utils/render'
 import { useLabels } from '../label/label'
 
 let DEFAULT_FIELDSET_TAG = 'fieldset' as const
@@ -70,7 +70,7 @@ function FieldsetFn<TTag extends ElementType = typeof DEFAULT_FIELDSET_TAG>(
 
 export interface _internal_ComponentFieldset extends HasDisplayName {
   <TTag extends ElementType = typeof DEFAULT_FIELDSET_TAG>(
-    props: FieldsetProps<TTag>
+    props: FieldsetProps<TTag> & RefProp<typeof FieldsetFn>
   ): React.JSX.Element
 }
 

packages/@headlessui-react/src/components/legend/legend.tsx

@@ -2,7 +2,7 @@
 
 import React, { type ElementType, type Ref } from 'react'
 import type { Props } from '../../types'
-import { forwardRefWithAs, type HasDisplayName } from '../../utils/render'
+import { forwardRefWithAs, type HasDisplayName, type RefProp } from '../../utils/render'
 import { Label } from '../label/label'
 
 let DEFAULT_LEGEND_TAG = Label
@@ -29,7 +29,7 @@ function LegendFn<TTag extends ElementType = typeof DEFAULT_LEGEND_TAG>(
 
 export interface _internal_ComponentLegend extends HasDisplayName {
   <TTag extends ElementType = typeof DEFAULT_LEGEND_TAG>(
-    props: LegendProps<TTag>
+    props: LegendProps<TTag> & RefProp<typeof LegendFn>
   ): React.JSX.Element
 }