Use React.JSX instead of JSX (#3511)

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.

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

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

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

@@ -2055,27 +2055,27 @@ 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 {}
 
 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

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(

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

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

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

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

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

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

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

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

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

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

@@ -1408,21 +1408,21 @@ 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 {}
 
 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

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

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

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

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

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

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