Repository: tailwindlabs/headlessui
Pull request #3511 (2024-10-06 18:41:27)

Use `React.JSX` instead of `JSX`
The global JSX type is deprecated in React 18.3 and removed in React 19 RC. This PR changes the code to use the supported React.JSX syntax instead.

PS. Would you accept a similar PR for 1.x? I personally haven't upgraded all my projects yet.

vercel[bot]: [vc]: #cIW91nOi5HgoHbNHy5GYje0J0HPFUi4ijGIw2DLxkzE=:eyJpc01vbm9yZXBvIjp0cnVlLCJ0eXBlIjoiZ2l0aHViIiwicHJvamVjdHMiOlt7Im5hbWUiOiJoZWFkbGVzc3VpLXJlYWN0Iiwicm9vdERpcmVjdG9yeSI6InBsYXlncm91bmRzL3JlYWN0IiwiaW5zcGVjdG9yVXJsIjoiaHR0cHM6Ly92ZXJjZWwuY29tL3RhaWx3aW5kbGFicy9oZWFkbGVzc3VpLXJlYWN0LzVrSFN0VmROaWhxTVBSd2ZNalFCVVNkRWVBblgiLCJwcmV2aWV3VXJsIjoiaGVhZGxlc3N1aS1yZWFjdC1naXQtZm9yay1tZW1hcmstcHJlcGFyZS1yZWFjdC0xOS10YWlsd2luZGxhYnMudmVyY2VsLmFwcCIsIm5leHRDb21taXRTdGF0dXMiOiJQRU5ESU5HIiwibGl2ZUZlZWRiYWNrIjp7InJlc29sdmVkIjowLCJ1bnJlc29sdmVkIjowLCJ0b3RhbCI6MCwibGluayI6ImhlYWRsZXNzdWktcmVhY3QtZ2l0LWZvcmstbWVtYXJrLXByZXBhcmUtcmVhY3QtMTktdGFpbHdpbmRsYWJzLnZlcmNlbC5hcHAifX0seyJuYW1lIjoiaGVhZGxlc3N1aS12dWUiLCJyb290RGlyZWN0b3J5IjoicGxheWdyb3VuZHMvdnVlIiwiaW5zcGVjdG9yVXJsIjoiaHR0cHM6Ly92ZXJjZWwuY29tL3RhaWx3aW5kbGFicy9oZWFkbGVzc3VpLXZ1ZS9Fbm5DRmtVbUF4VWdKUFV2NEZqelhKUGM4d2VEIiwicHJldmlld1VybCI6ImhlYWRsZXNzdWktdnVlLWdpdC1mb3JrLW1lbWFyay1wcmVwYXJlLXJlYWN0LTE5LXRhaWx3aW5kbGFicy52ZXJjZWwuYXBwIiwibmV4dENvbW1pdFN0YXR1cyI6IlBFTkRJTkciLCJsaXZlRmVlZGJhY2siOnsicmVzb2x2ZWQiOjAsInVucmVzb2x2ZWQiOjAsInRvdGFsIjowLCJsaW5rIjoiaGVhZGxlc3N1aS12dWUtZ2l0LWZvcmstbWVtYXJrLXByZXBhcmUtcmVhY3QtMTktdGFpbHdpbmRsYWJzLnZlcmNlbC5hcHAifX1dfQ==
**The latest updates on your projects**. Learn more about [Vercel for Git ↗︎](https://vercel.link/github-learn-more)

| Name | Status | Preview | Comments | Updated (UTC) |
| :--- | :----- | :------ | :------- | :------ |
| **headlessui-react** | 🔄 Building ([Inspect](https://vercel.com/tailwindlabs/headlessui-react/5kHStVdNihqMPRwfMjQBUSdEeAnX)) | [Visit Preview](https://vercel.live/open-feedback/headlessui-react-git-fork-memark-prepare-react-19-tailwindlabs.vercel.app?via=pr-comment-visit-preview-link&passThrough=1) | 💬 [**Add feedback**](https://vercel.live/open-feedback/headlessui-react-git-fork-memark-prepare-react-19-tailwindlabs.vercel.app?via=pr-comment-feedback-link) | Oct 6, 2024 6:41pm |
| **headlessui-vue** | 🔄 Building ([Inspect](https://vercel.com/tailwindlabs/headlessui-vue/EnnCFkUmAxUgJPUv4FjzXJPc8weD)) | [Visit Preview](https://vercel.live/open-feedback/headlessui-vue-git-fork-memark-prepare-react-19-tailwindlabs.vercel.app?via=pr-comment-visit-preview-link&passThrough=1) | 💬 [**Add feedback**](https://vercel.live/open-feedback/headlessui-vue-git-fork-memark-prepare-react-19-tailwindlabs.vercel.app?via=pr-comment-feedback-link) | Oct 6, 2024 6:41pm |




Patch:
diff --git a/packages/@headlessui-react/src/components/button/button.tsx b/packages/@headlessui-react/src/components/button/button.tsx
index 96310a8..174b6a5 100644
--- a/packages/@headlessui-react/src/components/button/button.tsx
+++ b/packages/@headlessui-react/src/components/button/button.tsx
@@ -78,7 +78,7 @@ function ButtonFn<TTag extends ElementType = typeof DEFAULT_BUTTON_TAG>(
 export interface _internal_ComponentButton extends HasDisplayName {
   <TTag extends ElementType = typeof DEFAULT_BUTTON_TAG>(
     props: ButtonProps<TTag> & RefProp<typeof ButtonFn>
-  ): JSX.Element
+  ): React.JSX.Element
 }
 
 export let Button = forwardRefWithAs(ButtonFn) as _internal_ComponentButton
diff --git a/packages/@headlessui-react/src/components/checkbox/checkbox.tsx b/packages/@headlessui-react/src/components/checkbox/checkbox.tsx
index a30415e..f68ed34 100644
--- a/packages/@headlessui-react/src/components/checkbox/checkbox.tsx
+++ b/packages/@headlessui-react/src/components/checkbox/checkbox.tsx
@@ -203,7 +203,7 @@ function CheckboxFn<TTag extends ElementType = typeof DEFAULT_CHECKBOX_TAG, TTyp
 export interface _internal_ComponentCheckbox extends HasDisplayName {
   <TTag extends ElementType = typeof DEFAULT_CHECKBOX_TAG, TType = string>(
     props: CheckboxProps<TTag, TType> & RefProp<typeof CheckboxFn>
-  ): JSX.Element
+  ): React.JSX.Element
 }
 
 export let Checkbox = forwardRefWithAs(CheckboxFn) as _internal_ComponentCheckbox
diff --git a/packages/@headlessui-react/src/components/combobox/combobox.tsx b/packages/@headlessui-react/src/components/combobox/combobox.tsx
index 439d92b..b6ab9e1 100644
--- a/packages/@headlessui-react/src/components/combobox/combobox.tsx
+++ b/packages/@headlessui-react/src/components/combobox/combobox.tsx
@@ -2055,19 +2055,19 @@ export interface _internal_ComponentCombobox extends HasDisplayName {
     TTag extends ElementType = typeof DEFAULT_COMBOBOX_TAG,
   >(
     props: ComboboxProps<TValue, TMultiple, TTag> & RefProp<typeof ComboboxFn>
-  ): JSX.Element
+  ): React.JSX.Element
 }
 
 export interface _internal_ComponentComboboxButton extends HasDisplayName {
   <TTag extends ElementType = typeof DEFAULT_BUTTON_TAG>(
     props: ComboboxButtonProps<TTag> & RefProp<typeof ButtonFn>
-  ): JSX.Element
+  ): React.JSX.Element
 }
 
 export interface _internal_ComponentComboboxInput extends HasDisplayName {
   <TType, TTag extends ElementType = typeof DEFAULT_INPUT_TAG>(
     props: ComboboxInputProps<TTag, TType> & RefProp<typeof InputFn>
-  ): JSX.Element
+  ): React.JSX.Element
 }
 
 export interface _internal_ComponentComboboxLabel extends _internal_ComponentLabel {}
@@ -2075,7 +2075,7 @@ export interface _internal_ComponentComboboxLabel extends _internal_ComponentLab
 export interface _internal_ComponentComboboxOptions extends HasDisplayName {
   <TTag extends ElementType = typeof DEFAULT_OPTIONS_TAG>(
     props: ComboboxOptionsProps<TTag> & RefProp<typeof OptionsFn>
-  ): JSX.Element
+  ): React.JSX.Element
 }
 
 export interface _internal_ComponentComboboxOption extends HasDisplayName {
@@ -2084,7 +2084,7 @@ export interface _internal_ComponentComboboxOption extends HasDisplayName {
     TType = Parameters<typeof ComboboxRoot>[0]['value'],
   >(
     props: ComboboxOptionProps<TTag, TType> & RefProp<typeof OptionFn>
-  ): JSX.Element
+  ): React.JSX.Element
 }
 
 let ComboboxRoot = forwardRefWithAs(ComboboxFn) as _internal_ComponentCombobox
diff --git a/packages/@headlessui-react/src/components/data-interactive/data-interactive.tsx b/packages/@headlessui-react/src/components/data-interactive/data-interactive.tsx
index 9f5b7de..b85eb11 100644
--- a/packages/@headlessui-react/src/components/data-interactive/data-interactive.tsx
+++ b/packages/@headlessui-react/src/components/data-interactive/data-interactive.tsx
@@ -59,7 +59,7 @@ function DataInteractiveFn<TTag extends ElementType = typeof DEFAULT_DATA_INTERA
 export interface _internal_ComponentDataInteractive extends HasDisplayName {
   <TTag extends ElementType = typeof DEFAULT_DATA_INTERACTIVE_TAG>(
     props: DataInteractiveProps<TTag> & RefProp<typeof DataInteractiveFn>
-  ): JSX.Element
+  ): React.JSX.Element
 }
 
 export let DataInteractive = forwardRefWithAs(
diff --git a/packages/@headlessui-react/src/components/description/description.tsx b/packages/@headlessui-react/src/components/description/description.tsx
index d5d1bd6..d9a243d 100644
--- a/packages/@headlessui-react/src/components/description/description.tsx
+++ b/packages/@headlessui-react/src/components/description/description.tsx
@@ -53,7 +53,7 @@ interface DescriptionProviderProps extends SharedData {
 
 export function useDescriptions(): [
   string | undefined,
-  (props: DescriptionProviderProps) => JSX.Element,
+  (props: DescriptionProviderProps) => React.JSX.Element,
 ] {
   let [descriptionIds, setDescriptionIds] = useState<string[]>([])
 
@@ -134,7 +134,7 @@ function DescriptionFn<TTag extends ElementType = typeof DEFAULT_DESCRIPTION_TAG
 export interface _internal_ComponentDescription extends HasDisplayName {
   <TTag extends ElementType = typeof DEFAULT_DESCRIPTION_TAG>(
     props: DescriptionProps<TTag> & RefProp<typeof DescriptionFn>
-  ): JSX.Element
+  ): React.JSX.Element
 }
 
 let DescriptionRoot = forwardRefWithAs(DescriptionFn) as _internal_ComponentDescription
diff --git a/packages/@headlessui-react/src/components/dialog/dialog.tsx b/packages/@headlessui-react/src/components/dialog/dialog.tsx
index c168767..f4e965b 100644
--- a/packages/@headlessui-react/src/components/dialog/dialog.tsx
+++ b/packages/@headlessui-react/src/components/dialog/dialog.tsx
@@ -555,25 +555,25 @@ function TitleFn<TTag extends ElementType = typeof DEFAULT_TITLE_TAG>(
 export interface _internal_ComponentDialog extends HasDisplayName {
   <TTag extends ElementType = typeof DEFAULT_DIALOG_TAG>(
     props: DialogProps<TTag> & RefProp<typeof DialogFn>
-  ): JSX.Element
+  ): React.JSX.Element
 }
 
 export interface _internal_ComponentDialogPanel extends HasDisplayName {
   <TTag extends ElementType = typeof DEFAULT_PANEL_TAG>(
     props: DialogPanelProps<TTag> & RefProp<typeof PanelFn>
-  ): JSX.Element
+  ): React.JSX.Element
 }
 
 export interface _internal_ComponentDialogBackdrop extends HasDisplayName {
   <TTag extends ElementType = typeof DEFAULT_BACKDROP_TAG>(
     props: DialogBackdropProps<TTag> & RefProp<typeof BackdropFn>
-  ): JSX.Element
+  ): React.JSX.Element
 }
 
 export interface _internal_ComponentDialogTitle extends HasDisplayName {
   <TTag extends ElementType = typeof DEFAULT_TITLE_TAG>(
     props: DialogTitleProps<TTag> & RefProp<typeof TitleFn>
-  ): JSX.Element
+  ): React.JSX.Element
 }
 
 export interface _internal_ComponentDialogDescription extends _internal_ComponentDescription {}
diff --git a/packages/@headlessui-react/src/components/disclosure/disclosure.tsx b/packages/@headlessui-react/src/components/disclosure/disclosure.tsx
index b139d35..1ae9684 100644
--- a/packages/@headlessui-react/src/components/disclosure/disclosure.tsx
+++ b/packages/@headlessui-react/src/components/disclosure/disclosure.tsx
@@ -519,19 +519,19 @@ function PanelFn<TTag extends ElementType = typeof DEFAULT_PANEL_TAG>(
 export interface _internal_ComponentDisclosure extends HasDisplayName {
   <TTag extends ElementType = typeof DEFAULT_DISCLOSURE_TAG>(
     props: DisclosureProps<TTag> & RefProp<typeof DisclosureFn>
-  ): JSX.Element
+  ): React.JSX.Element
 }
 
 export interface _internal_ComponentDisclosureButton extends HasDisplayName {
   <TTag extends ElementType = typeof DEFAULT_BUTTON_TAG>(
     props: DisclosureButtonProps<TTag> & RefProp<typeof ButtonFn>
-  ): JSX.Element
+  ): React.JSX.Element
 }
 
 export interface _internal_ComponentDisclosurePanel extends HasDisplayName {
   <TTag extends ElementType = typeof DEFAULT_PANEL_TAG>(
     props: DisclosurePanelProps<TTag> & RefProp<typeof PanelFn>
-  ): JSX.Element
+  ): React.JSX.Element
 }
 
 let DisclosureRoot = forwardRefWithAs(DisclosureFn) as _internal_ComponentDisclosure
diff --git a/packages/@headlessui-react/src/components/field/field.tsx b/packages/@headlessui-react/src/components/field/field.tsx
index a4d6812..27d9ae1 100644
--- a/packages/@headlessui-react/src/components/field/field.tsx
+++ b/packages/@headlessui-react/src/components/field/field.tsx
@@ -73,7 +73,7 @@ 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>): JSX.Element
+  <TTag extends ElementType = typeof DEFAULT_FIELD_TAG>(props: FieldProps<TTag>): React.JSX.Element
 }
 
 export let Field = forwardRefWithAs(FieldFn) as _internal_ComponentField
diff --git a/packages/@headlessui-react/src/components/fieldset/fieldset.tsx b/packages/@headlessui-react/src/components/fieldset/fieldset.tsx
index e23b157..ae8a1ea 100644
--- a/packages/@headlessui-react/src/components/fieldset/fieldset.tsx
+++ b/packages/@headlessui-react/src/components/fieldset/fieldset.tsx
@@ -66,7 +66,9 @@ 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>): JSX.Element
+  <TTag extends ElementType = typeof DEFAULT_FIELDSET_TAG>(
+    props: FieldsetProps<TTag>
+  ): React.JSX.Element
 }
 
 export let Fieldset = forwardRefWithAs(FieldsetFn) as _internal_ComponentFieldset
diff --git a/packages/@headlessui-react/src/components/focus-trap/focus-trap.tsx b/packages/@headlessui-react/src/components/focus-trap/focus-trap.tsx
index 00b775a..6ee1a53 100644
--- a/packages/@headlessui-react/src/components/focus-trap/focus-trap.tsx
+++ b/packages/@headlessui-react/src/components/focus-trap/focus-trap.tsx
@@ -232,7 +232,7 @@ function FocusTrapFn<TTag extends ElementType = typeof DEFAULT_FOCUS_TRAP_TAG>(
 export interface _internal_ComponentFocusTrap extends HasDisplayName {
   <TTag extends ElementType = typeof DEFAULT_FOCUS_TRAP_TAG>(
     props: FocusTrapProps<TTag> & RefProp<typeof FocusTrapFn>
-  ): JSX.Element
+  ): React.JSX.Element
 }
 
 let FocusTrapRoot = forwardRefWithAs(FocusTrapFn) as _internal_ComponentFocusTrap
diff --git a/packages/@headlessui-react/src/components/input/input.tsx b/packages/@headlessui-react/src/components/input/input.tsx
index c17409f..212465e 100644
--- a/packages/@headlessui-react/src/components/input/input.tsx
+++ b/packages/@headlessui-react/src/components/input/input.tsx
@@ -90,7 +90,7 @@ function InputFn<TTag extends ElementType = typeof DEFAULT_INPUT_TAG>(
 export interface _internal_ComponentInput extends HasDisplayName {
   <TTag extends ElementType = typeof DEFAULT_INPUT_TAG>(
     props: InputProps<TTag> & RefProp<typeof InputFn>
-  ): JSX.Element
+  ): React.JSX.Element
 }
 
 export let Input = forwardRefWithAs(InputFn) as _internal_ComponentInput
diff --git a/packages/@headlessui-react/src/components/label/label.tsx b/packages/@headlessui-react/src/components/label/label.tsx
index d65ae03..73c7c96 100644
--- a/packages/@headlessui-react/src/components/label/label.tsx
+++ b/packages/@headlessui-react/src/components/label/label.tsx
@@ -57,7 +57,7 @@ interface LabelProviderProps extends SharedData {
 
 export function useLabels({ inherit = false } = {}): [
   string | undefined,
-  (props: LabelProviderProps & { inherit?: boolean }) => JSX.Element,
+  (props: LabelProviderProps & { inherit?: boolean }) => React.JSX.Element,
 ] {
   let parentLabelledBy = useLabelledBy()
   let [labelIds, setLabelIds] = useState<string[]>([])
@@ -217,7 +217,7 @@ function LabelFn<TTag extends ElementType = typeof DEFAULT_LABEL_TAG>(
 export interface _internal_ComponentLabel extends HasDisplayName {
   <TTag extends ElementType = typeof DEFAULT_LABEL_TAG>(
     props: LabelProps<TTag> & RefProp<typeof LabelFn>
-  ): JSX.Element
+  ): React.JSX.Element
 }
 
 let LabelRoot = forwardRefWithAs(LabelFn) as _internal_ComponentLabel
diff --git a/packages/@headlessui-react/src/components/legend/legend.tsx b/packages/@headlessui-react/src/components/legend/legend.tsx
index 12c27c7..dbde385 100644
--- a/packages/@headlessui-react/src/components/legend/legend.tsx
+++ b/packages/@headlessui-react/src/components/legend/legend.tsx
@@ -28,7 +28,9 @@ 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>): JSX.Element
+  <TTag extends ElementType = typeof DEFAULT_LEGEND_TAG>(
+    props: LegendProps<TTag>
+  ): React.JSX.Element
 }
 
 export let Legend = forwardRefWithAs(LegendFn) as _internal_ComponentLegend
diff --git a/packages/@headlessui-react/src/components/listbox/listbox.tsx b/packages/@headlessui-react/src/components/listbox/listbox.tsx
index e9a8150..7fc4e4a 100644
--- a/packages/@headlessui-react/src/components/listbox/listbox.tsx
+++ b/packages/@headlessui-react/src/components/listbox/listbox.tsx
@@ -1408,13 +1408,13 @@ export interface _internal_ComponentListbox extends HasDisplayName {
     TActualType = TType extends (infer U)[] ? U : TType,
   >(
     props: ListboxProps<TTag, TType, TActualType> & RefProp<typeof ListboxFn>
-  ): JSX.Element
+  ): React.JSX.Element
 }
 
 export interface _internal_ComponentListboxButton extends HasDisplayName {
   <TTag extends ElementType = typeof DEFAULT_BUTTON_TAG>(
     props: ListboxButtonProps<TTag> & RefProp<typeof ButtonFn>
-  ): JSX.Element
+  ): React.JSX.Element
 }
 
 export interface _internal_ComponentListboxLabel extends _internal_ComponentLabel {}
@@ -1422,7 +1422,7 @@ export interface _internal_ComponentListboxLabel extends _internal_ComponentLabe
 export interface _internal_ComponentListboxOptions extends HasDisplayName {
   <TTag extends ElementType = typeof DEFAULT_OPTIONS_TAG>(
     props: ListboxOptionsProps<TTag> & RefProp<typeof OptionsFn>
-  ): JSX.Element
+  ): React.JSX.Element
 }
 
 export interface _internal_ComponentListboxOption extends HasDisplayName {
@@ -1431,13 +1431,13 @@ export interface _internal_ComponentListboxOption extends HasDisplayName {
     TType = Parameters<typeof ListboxRoot>[0]['value'],
   >(
     props: ListboxOptionProps<TTag, TType> & RefProp<typeof OptionFn>
-  ): JSX.Element
+  ): React.JSX.Element
 }
 
 export interface _internal_ComponentListboxSelectedOption extends HasDisplayName {
   <TTag extends ElementType = typeof DEFAULT_SELECTED_OPTION_TAG>(
     props: ListboxSelectedOptionProps<TTag> & RefProp<typeof SelectedFn>
-  ): JSX.Element
+  ): React.JSX.Element
 }
 
 let ListboxRoot = forwardRefWithAs(ListboxFn) as _internal_ComponentListbox
diff --git a/packages/@headlessui-react/src/components/menu/menu.tsx b/packages/@headlessui-react/src/components/menu/menu.tsx
index 57a823e..251cc02 100644
--- a/packages/@headlessui-react/src/components/menu/menu.tsx
+++ b/packages/@headlessui-react/src/components/menu/menu.tsx
@@ -1097,43 +1097,43 @@ function SeparatorFn<TTag extends ElementType = typeof DEFAULT_SEPARATOR_TAG>(
 export interface _internal_ComponentMenu extends HasDisplayName {
   <TTag extends ElementType = typeof DEFAULT_MENU_TAG>(
     props: MenuProps<TTag> & RefProp<typeof MenuFn>
-  ): JSX.Element
+  ): React.JSX.Element
 }
 
 export interface _internal_ComponentMenuButton extends HasDisplayName {
   <TTag extends ElementType = typeof DEFAULT_BUTTON_TAG>(
     props: MenuButtonProps<TTag> & RefProp<typeof ButtonFn>
-  ): JSX.Element
+  ): React.JSX.Element
 }
 
 export interface _internal_ComponentMenuItems extends HasDisplayName {
   <TTag extends ElementType = typeof DEFAULT_ITEMS_TAG>(
     props: MenuItemsProps<TTag> & RefProp<typeof ItemsFn>
-  ): JSX.Element
+  ): React.JSX.Element
 }
 
 export interface _internal_ComponentMenuItem extends HasDisplayName {
   <TTag extends ElementType = typeof DEFAULT_ITEM_TAG>(
     props: MenuItemProps<TTag> & RefProp<typeof ItemFn>
-  ): JSX.Element
+  ): React.JSX.Element
 }
 
 export interface _internal_ComponentMenuSection extends HasDisplayName {
   <TTag extends ElementType = typeof DEFAULT_SECTION_TAG>(
     props: MenuSectionProps<TTag> & RefProp<typeof SectionFn>
-  ): JSX.Element
+  ): React.JSX.Element
 }
 
 export interface _internal_ComponentMenuHeading extends HasDisplayName {
   <TTag extends ElementType = typeof DEFAULT_HEADING_TAG>(
     props: MenuHeadingProps<TTag> & RefProp<typeof HeadingFn>
-  ): JSX.Element
+  ): React.JSX.Element
 }
 
 export interface _internal_ComponentMenuSeparator extends HasDisplayName {
   <TTag extends ElementType = typeof DEFAULT_SEPARATOR_TAG>(
     props: MenuSeparatorProps<TTag> & RefProp<typeof SeparatorFn>
-  ): JSX.Element
+  ): React.JSX.Element
 }
 
 let MenuRoot = forwardRefWithAs(MenuFn) as _internal_ComponentMenu
diff --git a/packages/@headlessui-react/src/components/popover/popover.tsx b/packages/@headlessui-react/src/components/popover/popover.tsx
index 74526e1..386ec35 100644
--- a/packages/@headlessui-react/src/components/popover/popover.tsx
+++ b/packages/@headlessui-react/src/components/popover/popover.tsx
@@ -1208,31 +1208,31 @@ function GroupFn<TTag extends ElementType = typeof DEFAULT_GROUP_TAG>(
 export interface _internal_ComponentPopover extends HasDisplayName {
   <TTag extends ElementType = typeof DEFAULT_POPOVER_TAG>(
     props: PopoverProps<TTag> & RefProp<typeof PopoverFn>
-  ): JSX.Element
+  ): React.JSX.Element
 }
 
 export interface _internal_ComponentPopoverButton extends HasDisplayName {
   <TTag extends ElementType = typeof DEFAULT_BUTTON_TAG>(
     props: PopoverButtonProps<TTag> & RefProp<typeof ButtonFn>
-  ): JSX.Element
+  ): React.JSX.Element
 }
 
 export interface _internal_ComponentPopoverBackdrop extends HasDisplayName {
   <TTag extends ElementType = typeof DEFAULT_BACKDROP_TAG>(
     props: PopoverBackdropProps<TTag> & RefProp<typeof BackdropFn>
-  ): JSX.Element
+  ): React.JSX.Element
 }
 
 export interface _internal_ComponentPopoverPanel extends HasDisplayName {
   <TTag extends ElementType = typeof DEFAULT_PANEL_TAG>(
     props: PopoverPanelProps<TTag> & RefProp<typeof PanelFn>
-  ): JSX.Element
+  ): React.JSX.Element
 }
 
 export interface _internal_ComponentPopoverGroup extends HasDisplayName {
   <TTag extends ElementType = typeof DEFAULT_GROUP_TAG>(
     props: PopoverGroupProps<TTag> & RefProp<typeof GroupFn>
-  ): JSX.Element
+  ): React.JSX.Element
 }
 
 let PopoverRoot = forwardRefWithAs(PopoverFn) as _internal_ComponentPopover
diff --git a/packages/@headlessui-react/src/components/portal/portal.tsx b/packages/@headlessui-react/src/components/portal/portal.tsx
index 8de4841..efc0cba 100644
--- a/packages/@headlessui-react/src/components/portal/portal.tsx
+++ b/packages/@headlessui-react/src/components/portal/portal.tsx
@@ -249,13 +249,13 @@ export function useNestedPortals() {
 export interface _internal_ComponentPortal extends HasDisplayName {
   <TTag extends ElementType = typeof DEFAULT_PORTAL_TAG>(
     props: PortalProps<TTag> & RefProp<typeof PortalFn>
-  ): JSX.Element
+  ): React.JSX.Element
 }
 
 export interface _internal_ComponentPortalGroup extends HasDisplayName {
   <TTag extends ElementType = typeof DEFAULT_GROUP_TAG>(
     props: PortalGroupProps<TTag> & RefProp<typeof GroupFn>
-  ): JSX.Element
+  ): React.JSX.Element
 }
 
 let PortalRoot = forwardRefWithAs(PortalFn) as unknown as _internal_ComponentPortal
diff --git a/packages/@headlessui-react/src/components/radio-group/radio-group.tsx b/packages/@headlessui-react/src/components/radio-group/radio-group.tsx
index 7c2130a..bfeaee8 100644
--- a/packages/@headlessui-react/src/components/radio-group/radio-group.tsx
+++ b/packages/@headlessui-react/src/components/radio-group/radio-group.tsx
@@ -571,19 +571,19 @@ function RadioFn<
 export interface _internal_ComponentRadioGroup extends HasDisplayName {
   <TTag extends ElementType = typeof DEFAULT_RADIO_GROUP_TAG, TType = string>(
     props: RadioGroupProps<TTag, TType> & RefProp<typeof RadioGroupFn>
-  ): JSX.Element
+  ): React.JSX.Element
 }
 
 export interface _internal_ComponentRadioOption extends HasDisplayName {
   <TTag extends ElementType = typeof DEFAULT_OPTION_TAG, TType = string>(
     props: RadioOptionProps<TTag, TType> & RefProp<typeof OptionFn>
-  ): JSX.Element
+  ): React.JSX.Element
 }
 
 export interface _internal_ComponentRadio extends HasDisplayName {
   <TTag extends ElementType = typeof DEFAULT_RADIO_TAG, TType = string>(
     props: RadioProps<TTag, TType> & RefProp<typeof RadioFn>
-  ): JSX.Element
+  ): React.JSX.Element
 }
 
 export interface _internal_ComponentRadioLabel extends _internal_ComponentLabel {}
diff --git a/packages/@headlessui-react/src/components/select/select.tsx b/packages/@headlessui-react/src/components/select/select.tsx
index 9115794..afcc900 100644
--- a/packages/@headlessui-react/src/components/select/select.tsx
+++ b/packages/@headlessui-react/src/components/select/select.tsx
@@ -101,7 +101,7 @@ function SelectFn<TTag extends ElementType = typeof DEFAULT_SELECT_TAG>(
 export interface _internal_ComponentSelect extends HasDisplayName {
   <TTag extends ElementType = typeof DEFAULT_SELECT_TAG>(
     props: SelectProps<TTag> & RefProp<typeof SelectFn>
-  ): JSX.Element
+  ): React.JSX.Element
 }
 
 export let Select = forwardRefWithAs(SelectFn) as _internal_ComponentSelect
diff --git a/packages/@headlessui-react/src/components/switch/switch.tsx b/packages/@headlessui-react/src/components/switch/switch.tsx
index f0f64bd..989fe81 100644
--- a/packages/@headlessui-react/src/components/switch/switch.tsx
+++ b/packages/@headlessui-react/src/components/switch/switch.tsx
@@ -265,13 +265,13 @@ function SwitchFn<TTag extends ElementType = typeof DEFAULT_SWITCH_TAG>(
 export interface _internal_ComponentSwitch extends HasDisplayName {
   <TTag extends ElementType = typeof DEFAULT_SWITCH_TAG>(
     props: SwitchProps<TTag> & RefProp<typeof SwitchFn>
-  ): JSX.Element
+  ): React.JSX.Element
 }
 
 export interface _internal_ComponentSwitchGroup extends HasDisplayName {
   <TTag extends ElementType = typeof DEFAULT_GROUP_TAG>(
     props: SwitchGroupProps<TTag> & RefProp<typeof GroupFn>
-  ): JSX.Element
+  ): React.JSX.Element
 }
 
 export interface _internal_ComponentSwitchLabel extends _internal_ComponentLabel {}
diff --git a/packages/@headlessui-react/src/components/tabs/tabs.tsx b/packages/@headlessui-react/src/components/tabs/tabs.tsx
index 9969273..52c9252 100644
--- a/packages/@headlessui-react/src/components/tabs/tabs.tsx
+++ b/packages/@headlessui-react/src/components/tabs/tabs.tsx
@@ -670,31 +670,31 @@ function PanelFn<TTag extends ElementType = typeof DEFAULT_PANEL_TAG>(
 export interface _internal_ComponentTab extends HasDisplayName {
   <TTag extends ElementType = typeof DEFAULT_TAB_TAG>(
     props: TabProps<TTag> & RefProp<typeof TabFn>
-  ): JSX.Element
+  ): React.JSX.Element
 }
 
 export interface _internal_ComponentTabGroup extends HasDisplayName {
   <TTag extends ElementType = typeof DEFAULT_TABS_TAG>(
     props: TabGroupProps<TTag> & RefProp<typeof GroupFn>
-  ): JSX.Element
+  ): React.JSX.Element
 }
 
 export interface _internal_ComponentTabList extends HasDisplayName {
   <TTag extends ElementType = typeof DEFAULT_LIST_TAG>(
     props: TabListProps<TTag> & RefProp<typeof ListFn>
-  ): JSX.Element
+  ): React.JSX.Element
 }
 
 export interface _internal_ComponentTabPanels extends HasDisplayName {
   <TTag extends ElementType = typeof DEFAULT_PANELS_TAG>(
     props: TabPanelsProps<TTag> & RefProp<typeof PanelsFn>
-  ): JSX.Element
+  ): React.JSX.Element
 }
 
 export interface _internal_ComponentTabPanel extends HasDisplayName {
   <TTag extends ElementType = typeof DEFAULT_PANEL_TAG>(
     props: TabPanelProps<TTag> & RefProp<typeof PanelFn>
-  ): JSX.Element
+  ): React.JSX.Element
 }
 
 let TabRoot = forwardRefWithAs(TabFn) as _internal_ComponentTab
diff --git a/packages/@headlessui-react/src/components/textarea/textarea.tsx b/packages/@headlessui-react/src/components/textarea/textarea.tsx
index 67cd363..b32cfcd 100644
--- a/packages/@headlessui-react/src/components/textarea/textarea.tsx
+++ b/packages/@headlessui-react/src/components/textarea/textarea.tsx
@@ -90,7 +90,7 @@ function TextareaFn<TTag extends ElementType = typeof DEFAULT_TEXTAREA_TAG>(
 export interface _internal_ComponentTextarea extends HasDisplayName {
   <TTag extends ElementType = typeof DEFAULT_TEXTAREA_TAG>(
     props: TextareaProps<TTag> & RefProp<typeof TextareaFn>
-  ): JSX.Element
+  ): React.JSX.Element
 }
 
 export let Textarea = forwardRefWithAs(TextareaFn) as _internal_ComponentTextarea
diff --git a/packages/@headlessui-react/src/components/tooltip/tooltip.tsx b/packages/@headlessui-react/src/components/tooltip/tooltip.tsx
index 2a06f99..03ddacf 100644
--- a/packages/@headlessui-react/src/components/tooltip/tooltip.tsx
+++ b/packages/@headlessui-react/src/components/tooltip/tooltip.tsx
@@ -473,19 +473,19 @@ function PanelFn<TTag extends ElementType = typeof DEFAULT_PANEL_TAG>(
 export interface _internal_ComponentTooltip extends HasDisplayName {
   <TTag extends ElementType = typeof DEFAULT_TOOLTIP_TAG>(
     props: TooltipProps<TTag> & RefProp<typeof TooltipFn>
-  ): JSX.Element
+  ): React.JSX.Element
 }
 
 export interface _internal_ComponentTrigger extends HasDisplayName {
   <TTag extends ElementType = typeof DEFAULT_TRIGGER_TAG>(
     props: TooltipTriggerProps<TTag> & RefProp<typeof TriggerFn>
-  ): JSX.Element
+  ): React.JSX.Element
 }
 
 export interface _internal_ComponentPanel extends HasDisplayName {
   <TTag extends ElementType = typeof DEFAULT_PANEL_TAG>(
     props: TooltipPanelProps<TTag> & RefProp<typeof PanelFn>
-  ): JSX.Element
+  ): React.JSX.Element
 }
 
 export let Tooltip = forwardRefWithAs(TooltipFn) as _internal_ComponentTooltip
diff --git a/packages/@headlessui-react/src/components/transition/transition.tsx b/packages/@headlessui-react/src/components/transition/transition.tsx
index 9f0922f..efe0ad8 100644
--- a/packages/@headlessui-react/src/components/transition/transition.tsx
+++ b/packages/@headlessui-react/src/components/transition/transition.tsx
@@ -620,13 +620,13 @@ function ChildFn<TTag extends ElementType = typeof DEFAULT_TRANSITION_CHILD_TAG>
 export interface _internal_ComponentTransitionRoot extends HasDisplayName {
   <TTag extends ElementType = typeof DEFAULT_TRANSITION_CHILD_TAG>(
     props: TransitionRootProps<TTag> & RefProp<typeof TransitionRootFn>
-  ): JSX.Element
+  ): React.JSX.Element
 }
 
 export interface _internal_ComponentTransitionChild extends HasDisplayName {
   <TTag extends ElementType = typeof DEFAULT_TRANSITION_CHILD_TAG>(
     props: TransitionChildProps<TTag> & RefProp<typeof TransitionChildFn>
-  ): JSX.Element
+  ): React.JSX.Element
 }
 
 let TransitionRoot = forwardRefWithAs(TransitionRootFn) as _internal_ComponentTransitionRoot
diff --git a/packages/@headlessui-react/src/internal/hidden.tsx b/packages/@headlessui-react/src/internal/hidden.tsx
index 04b13b2..e8e5b0e 100644
--- a/packages/@headlessui-react/src/internal/hidden.tsx
+++ b/packages/@headlessui-react/src/internal/hidden.tsx
@@ -67,7 +67,7 @@ function VisuallyHidden<TTag extends ElementType = typeof DEFAULT_VISUALLY_HIDDE
 interface ComponentHidden extends HasDisplayName {
   <TTag extends ElementType = typeof DEFAULT_VISUALLY_HIDDEN_TAG>(
     props: HiddenProps<TTag> & RefProp<typeof VisuallyHidden>
-  ): JSX.Element
+  ): React.JSX.Element
 }
 
 export let Hidden = forwardRefWithAs(VisuallyHidden) as ComponentHidden
diff --git a/packages/@headlessui-react/src/types.ts b/packages/@headlessui-react/src/types.ts
index 8bf566b..a6bd6d7 100644
--- a/packages/@headlessui-react/src/types.ts
+++ b/packages/@headlessui-react/src/types.ts
@@ -1,6 +1,6 @@
 import type { JSXElementConstructor, ReactElement, ReactNode } from 'react'
 
-export type ReactTag = keyof JSX.IntrinsicElements | JSXElementConstructor<any>
+export type ReactTag = keyof React.JSX.IntrinsicElements | JSXElementConstructor<any>
 
 export type Expand<T> = T extends infer O ? { [K in keyof O]: O[K] } : never
 
diff --git a/playgrounds/react/pages/suspense/portal.tsx b/playgrounds/react/pages/suspense/portal.tsx
index f2ef15b..f82b3ef 100644
--- a/playgrounds/react/pages/suspense/portal.tsx
+++ b/playgrounds/react/pages/suspense/portal.tsx
@@ -3,7 +3,7 @@
 import { Portal } from '@headlessui/react'
 import { lazy, Suspense } from 'react'
 
-function MyComponent({ children }: { children(message: string): JSX.Element }) {
+function MyComponent({ children }: { children(message: string): React.JSX.Element }) {
   return <>{children('test')}</>
 }
 


Test patch:
diff --git a/packages/@headlessui-react/src/test-utils/execute-timeline.ts b/packages/@headlessui-react/src/test-utils/execute-timeline.ts
index 106a886..b2bf7b7 100644
--- a/packages/@headlessui-react/src/test-utils/execute-timeline.ts
+++ b/packages/@headlessui-react/src/test-utils/execute-timeline.ts
@@ -23,7 +23,7 @@ function redentSnapshot(input: string) {
 }
 
 export async function executeTimeline(
-  element: JSX.Element,
+  element: React.JSX.Element,
   steps: ((tools: ReturnType<typeof render>) => (null | number)[])[]
 ) {
   let d = disposables()
diff --git a/packages/@headlessui-react/src/utils/render.test.tsx b/packages/@headlessui-react/src/utils/render.test.tsx
index c1ede83..1d785b0 100644
--- a/packages/@headlessui-react/src/utils/render.test.tsx
+++ b/packages/@headlessui-react/src/utils/render.test.tsx
@@ -272,7 +272,7 @@ describe('Default functionality', () => {
 
 // ---
 
-function testStaticFeature(Dummy: (props: any) => JSX.Element) {
+function testStaticFeature(Dummy: (props: any) => React.JSX.Element) {
   it('should be possible to render a `static` dummy component (show = true)', () => {
     testRender(
       <Dummy show={true} static>
@@ -325,7 +325,7 @@ describe('Features.Static', () => {
 
 // ---
 
-function testRenderStrategyFeature(Dummy: (props: any) => JSX.Element) {
+function testRenderStrategyFeature(Dummy: (props: any) => React.JSX.Element) {
   describe('Unmount render strategy', () => {
     it('should be possible to render an `unmount` dummy component (show = true)', () => {
       testRender(