Ensure children prop of Field component can be a render prop (#2941)

* ensure `children` prop can be a render prop

* update changelog

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

@@ -14,6 +14,25 @@ describe('Rendering', () => {
     expect(container.firstChild).not.toHaveAttribute('aria-disabled', 'true')
   })
 
+  it('should render a `Field` component with a render prop', async () => {
+    let { container } = render(
+      <Field>
+        {(slot) => {
+          return (
+            <div data-slot={JSON.stringify(slot)}>
+              <input />
+            </div>
+          )
+        }}
+      </Field>
+    )
+
+    expect(container.querySelector('[data-slot]')?.getAttribute('data-slot')).toEqual(
+      JSON.stringify({ disabled: false })
+    )
+    expect(container.firstChild).not.toHaveAttribute('aria-disabled', 'true')
+  })
+
   it('should add `aria-disabled` when a `Field` is disabled', async () => {
     let { container } = render(
       <Field disabled>

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

@@ -53,7 +53,13 @@ function FieldFn<TTag extends ElementType = typeof DEFAULT_FIELD_TAG>(
               ourProps,
               theirProps: {
                 ...theirProps,
-                children: <FormFieldsProvider>{theirProps.children}</FormFieldsProvider>,
+                children: (
+                  <FormFieldsProvider>
+                    {typeof theirProps.children === 'function'
+                      ? theirProps.children(slot)
+                      : theirProps.children}
+                  </FormFieldsProvider>
+                ),
               },
               slot,
               defaultTag: DEFAULT_FIELD_TAG,