Skip to content

Commit 13d8829

Browse files
memarkmemark
authored
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.
1 parent 2422250 commit 13d8829

File tree

29 files changed

+70
-66
lines changed

29 files changed

+70
-66
lines changed

‎packages/@headlessui-react/src/components/button/button.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -78,7 +78,7 @@ function ButtonFn<TTag extends ElementType = typeof DEFAULT_BUTTON_TAG>(
7878
export interface _internal_ComponentButton extends HasDisplayName {
7979
<TTag extends ElementType = typeof DEFAULT_BUTTON_TAG>(
8080
props: ButtonProps<TTag> & RefProp<typeof ButtonFn>
81-
): JSX.Element
81+
): React.JSX.Element
8282
}
8383

8484
export let Button = forwardRefWithAs(ButtonFn) as _internal_ComponentButton

‎packages/@headlessui-react/src/components/checkbox/checkbox.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -203,7 +203,7 @@ function CheckboxFn<TTag extends ElementType = typeof DEFAULT_CHECKBOX_TAG, TTyp
203203
export interface _internal_ComponentCheckbox extends HasDisplayName {
204204
<TTag extends ElementType = typeof DEFAULT_CHECKBOX_TAG, TType = string>(
205205
props: CheckboxProps<TTag, TType> & RefProp<typeof CheckboxFn>
206-
): JSX.Element
206+
): React.JSX.Element
207207
}
208208

209209
export let Checkbox = forwardRefWithAs(CheckboxFn) as _internal_ComponentCheckbox

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

+5-5
Original file line numberDiff line numberDiff line change
@@ -2055,27 +2055,27 @@ export interface _internal_ComponentCombobox extends HasDisplayName {
20552055
TTag extends ElementType = typeof DEFAULT_COMBOBOX_TAG,
20562056
>(
20572057
props: ComboboxProps<TValue, TMultiple, TTag> & RefProp<typeof ComboboxFn>
2058-
): JSX.Element
2058+
): React.JSX.Element
20592059
}
20602060

20612061
export interface _internal_ComponentComboboxButton extends HasDisplayName {
20622062
<TTag extends ElementType = typeof DEFAULT_BUTTON_TAG>(
20632063
props: ComboboxButtonProps<TTag> & RefProp<typeof ButtonFn>
2064-
): JSX.Element
2064+
): React.JSX.Element
20652065
}
20662066

20672067
export interface _internal_ComponentComboboxInput extends HasDisplayName {
20682068
<TType, TTag extends ElementType = typeof DEFAULT_INPUT_TAG>(
20692069
props: ComboboxInputProps<TTag, TType> & RefProp<typeof InputFn>
2070-
): JSX.Element
2070+
): React.JSX.Element
20712071
}
20722072

20732073
export interface _internal_ComponentComboboxLabel extends _internal_ComponentLabel {}
20742074

20752075
export interface _internal_ComponentComboboxOptions extends HasDisplayName {
20762076
<TTag extends ElementType = typeof DEFAULT_OPTIONS_TAG>(
20772077
props: ComboboxOptionsProps<TTag> & RefProp<typeof OptionsFn>
2078-
): JSX.Element
2078+
): React.JSX.Element
20792079
}
20802080

20812081
export interface _internal_ComponentComboboxOption extends HasDisplayName {
@@ -2084,7 +2084,7 @@ export interface _internal_ComponentComboboxOption extends HasDisplayName {
20842084
TType = Parameters<typeof ComboboxRoot>[0]['value'],
20852085
>(
20862086
props: ComboboxOptionProps<TTag, TType> & RefProp<typeof OptionFn>
2087-
): JSX.Element
2087+
): React.JSX.Element
20882088
}
20892089

20902090
let ComboboxRoot = forwardRefWithAs(ComboboxFn) as _internal_ComponentCombobox

‎packages/@headlessui-react/src/components/data-interactive/data-interactive.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -59,7 +59,7 @@ function DataInteractiveFn<TTag extends ElementType = typeof DEFAULT_DATA_INTERA
5959
export interface _internal_ComponentDataInteractive extends HasDisplayName {
6060
<TTag extends ElementType = typeof DEFAULT_DATA_INTERACTIVE_TAG>(
6161
props: DataInteractiveProps<TTag> & RefProp<typeof DataInteractiveFn>
62-
): JSX.Element
62+
): React.JSX.Element
6363
}
6464

6565
export let DataInteractive = forwardRefWithAs(

‎packages/@headlessui-react/src/components/description/description.tsx

+2-2
Original file line numberDiff line numberDiff line change
@@ -53,7 +53,7 @@ interface DescriptionProviderProps extends SharedData {
5353

5454
export function useDescriptions(): [
5555
string | undefined,
56-
(props: DescriptionProviderProps) => JSX.Element,
56+
(props: DescriptionProviderProps) => React.JSX.Element,
5757
] {
5858
let [descriptionIds, setDescriptionIds] = useState<string[]>([])
5959

@@ -134,7 +134,7 @@ function DescriptionFn<TTag extends ElementType = typeof DEFAULT_DESCRIPTION_TAG
134134
export interface _internal_ComponentDescription extends HasDisplayName {
135135
<TTag extends ElementType = typeof DEFAULT_DESCRIPTION_TAG>(
136136
props: DescriptionProps<TTag> & RefProp<typeof DescriptionFn>
137-
): JSX.Element
137+
): React.JSX.Element
138138
}
139139

140140
let DescriptionRoot = forwardRefWithAs(DescriptionFn) as _internal_ComponentDescription

‎packages/@headlessui-react/src/components/dialog/dialog.tsx

+4-4
Original file line numberDiff line numberDiff line change
@@ -555,25 +555,25 @@ function TitleFn<TTag extends ElementType = typeof DEFAULT_TITLE_TAG>(
555555
export interface _internal_ComponentDialog extends HasDisplayName {
556556
<TTag extends ElementType = typeof DEFAULT_DIALOG_TAG>(
557557
props: DialogProps<TTag> & RefProp<typeof DialogFn>
558-
): JSX.Element
558+
): React.JSX.Element
559559
}
560560

561561
export interface _internal_ComponentDialogPanel extends HasDisplayName {
562562
<TTag extends ElementType = typeof DEFAULT_PANEL_TAG>(
563563
props: DialogPanelProps<TTag> & RefProp<typeof PanelFn>
564-
): JSX.Element
564+
): React.JSX.Element
565565
}
566566

567567
export interface _internal_ComponentDialogBackdrop extends HasDisplayName {
568568
<TTag extends ElementType = typeof DEFAULT_BACKDROP_TAG>(
569569
props: DialogBackdropProps<TTag> & RefProp<typeof BackdropFn>
570-
): JSX.Element
570+
): React.JSX.Element
571571
}
572572

573573
export interface _internal_ComponentDialogTitle extends HasDisplayName {
574574
<TTag extends ElementType = typeof DEFAULT_TITLE_TAG>(
575575
props: DialogTitleProps<TTag> & RefProp<typeof TitleFn>
576-
): JSX.Element
576+
): React.JSX.Element
577577
}
578578

579579
export interface _internal_ComponentDialogDescription extends _internal_ComponentDescription {}

‎packages/@headlessui-react/src/components/disclosure/disclosure.tsx

+3-3
Original file line numberDiff line numberDiff line change
@@ -519,19 +519,19 @@ function PanelFn<TTag extends ElementType = typeof DEFAULT_PANEL_TAG>(
519519
export interface _internal_ComponentDisclosure extends HasDisplayName {
520520
<TTag extends ElementType = typeof DEFAULT_DISCLOSURE_TAG>(
521521
props: DisclosureProps<TTag> & RefProp<typeof DisclosureFn>
522-
): JSX.Element
522+
): React.JSX.Element
523523
}
524524

525525
export interface _internal_ComponentDisclosureButton extends HasDisplayName {
526526
<TTag extends ElementType = typeof DEFAULT_BUTTON_TAG>(
527527
props: DisclosureButtonProps<TTag> & RefProp<typeof ButtonFn>
528-
): JSX.Element
528+
): React.JSX.Element
529529
}
530530

531531
export interface _internal_ComponentDisclosurePanel extends HasDisplayName {
532532
<TTag extends ElementType = typeof DEFAULT_PANEL_TAG>(
533533
props: DisclosurePanelProps<TTag> & RefProp<typeof PanelFn>
534-
): JSX.Element
534+
): React.JSX.Element
535535
}
536536

537537
let DisclosureRoot = forwardRefWithAs(DisclosureFn) as _internal_ComponentDisclosure

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

+1-1
Original file line numberDiff line numberDiff line change
@@ -73,7 +73,7 @@ function FieldFn<TTag extends ElementType = typeof DEFAULT_FIELD_TAG>(
7373
}
7474

7575
export interface _internal_ComponentField extends HasDisplayName {
76-
<TTag extends ElementType = typeof DEFAULT_FIELD_TAG>(props: FieldProps<TTag>): JSX.Element
76+
<TTag extends ElementType = typeof DEFAULT_FIELD_TAG>(props: FieldProps<TTag>): React.JSX.Element
7777
}
7878

7979
export let Field = forwardRefWithAs(FieldFn) as _internal_ComponentField

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

+3-1
Original file line numberDiff line numberDiff line change
@@ -66,7 +66,9 @@ function FieldsetFn<TTag extends ElementType = typeof DEFAULT_FIELDSET_TAG>(
6666
}
6767

6868
export interface _internal_ComponentFieldset extends HasDisplayName {
69-
<TTag extends ElementType = typeof DEFAULT_FIELDSET_TAG>(props: FieldsetProps<TTag>): JSX.Element
69+
<TTag extends ElementType = typeof DEFAULT_FIELDSET_TAG>(
70+
props: FieldsetProps<TTag>
71+
): React.JSX.Element
7072
}
7173

7274
export let Fieldset = forwardRefWithAs(FieldsetFn) as _internal_ComponentFieldset

‎packages/@headlessui-react/src/components/focus-trap/focus-trap.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -232,7 +232,7 @@ function FocusTrapFn<TTag extends ElementType = typeof DEFAULT_FOCUS_TRAP_TAG>(
232232
export interface _internal_ComponentFocusTrap extends HasDisplayName {
233233
<TTag extends ElementType = typeof DEFAULT_FOCUS_TRAP_TAG>(
234234
props: FocusTrapProps<TTag> & RefProp<typeof FocusTrapFn>
235-
): JSX.Element
235+
): React.JSX.Element
236236
}
237237

238238
let FocusTrapRoot = forwardRefWithAs(FocusTrapFn) as _internal_ComponentFocusTrap

‎packages/@headlessui-react/src/components/input/input.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -90,7 +90,7 @@ function InputFn<TTag extends ElementType = typeof DEFAULT_INPUT_TAG>(
9090
export interface _internal_ComponentInput extends HasDisplayName {
9191
<TTag extends ElementType = typeof DEFAULT_INPUT_TAG>(
9292
props: InputProps<TTag> & RefProp<typeof InputFn>
93-
): JSX.Element
93+
): React.JSX.Element
9494
}
9595

9696
export let Input = forwardRefWithAs(InputFn) as _internal_ComponentInput

‎packages/@headlessui-react/src/components/label/label.tsx

+2-2
Original file line numberDiff line numberDiff line change
@@ -57,7 +57,7 @@ interface LabelProviderProps extends SharedData {
5757

5858
export function useLabels({ inherit = false } = {}): [
5959
string | undefined,
60-
(props: LabelProviderProps & { inherit?: boolean }) => JSX.Element,
60+
(props: LabelProviderProps & { inherit?: boolean }) => React.JSX.Element,
6161
] {
6262
let parentLabelledBy = useLabelledBy()
6363
let [labelIds, setLabelIds] = useState<string[]>([])
@@ -217,7 +217,7 @@ function LabelFn<TTag extends ElementType = typeof DEFAULT_LABEL_TAG>(
217217
export interface _internal_ComponentLabel extends HasDisplayName {
218218
<TTag extends ElementType = typeof DEFAULT_LABEL_TAG>(
219219
props: LabelProps<TTag> & RefProp<typeof LabelFn>
220-
): JSX.Element
220+
): React.JSX.Element
221221
}
222222

223223
let LabelRoot = forwardRefWithAs(LabelFn) as _internal_ComponentLabel

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

+3-1
Original file line numberDiff line numberDiff line change
@@ -28,7 +28,9 @@ function LegendFn<TTag extends ElementType = typeof DEFAULT_LEGEND_TAG>(
2828
}
2929

3030
export interface _internal_ComponentLegend extends HasDisplayName {
31-
<TTag extends ElementType = typeof DEFAULT_LEGEND_TAG>(props: LegendProps<TTag>): JSX.Element
31+
<TTag extends ElementType = typeof DEFAULT_LEGEND_TAG>(
32+
props: LegendProps<TTag>
33+
): React.JSX.Element
3234
}
3335

3436
export let Legend = forwardRefWithAs(LegendFn) as _internal_ComponentLegend

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

+5-5
Original file line numberDiff line numberDiff line change
@@ -1408,21 +1408,21 @@ export interface _internal_ComponentListbox extends HasDisplayName {
14081408
TActualType = TType extends (infer U)[] ? U : TType,
14091409
>(
14101410
props: ListboxProps<TTag, TType, TActualType> & RefProp<typeof ListboxFn>
1411-
): JSX.Element
1411+
): React.JSX.Element
14121412
}
14131413

14141414
export interface _internal_ComponentListboxButton extends HasDisplayName {
14151415
<TTag extends ElementType = typeof DEFAULT_BUTTON_TAG>(
14161416
props: ListboxButtonProps<TTag> & RefProp<typeof ButtonFn>
1417-
): JSX.Element
1417+
): React.JSX.Element
14181418
}
14191419

14201420
export interface _internal_ComponentListboxLabel extends _internal_ComponentLabel {}
14211421

14221422
export interface _internal_ComponentListboxOptions extends HasDisplayName {
14231423
<TTag extends ElementType = typeof DEFAULT_OPTIONS_TAG>(
14241424
props: ListboxOptionsProps<TTag> & RefProp<typeof OptionsFn>
1425-
): JSX.Element
1425+
): React.JSX.Element
14261426
}
14271427

14281428
export interface _internal_ComponentListboxOption extends HasDisplayName {
@@ -1431,13 +1431,13 @@ export interface _internal_ComponentListboxOption extends HasDisplayName {
14311431
TType = Parameters<typeof ListboxRoot>[0]['value'],
14321432
>(
14331433
props: ListboxOptionProps<TTag, TType> & RefProp<typeof OptionFn>
1434-
): JSX.Element
1434+
): React.JSX.Element
14351435
}
14361436

14371437
export interface _internal_ComponentListboxSelectedOption extends HasDisplayName {
14381438
<TTag extends ElementType = typeof DEFAULT_SELECTED_OPTION_TAG>(
14391439
props: ListboxSelectedOptionProps<TTag> & RefProp<typeof SelectedFn>
1440-
): JSX.Element
1440+
): React.JSX.Element
14411441
}
14421442

14431443
let ListboxRoot = forwardRefWithAs(ListboxFn) as _internal_ComponentListbox

‎packages/@headlessui-react/src/components/menu/menu.tsx

+7-7
Original file line numberDiff line numberDiff line change
@@ -1097,43 +1097,43 @@ function SeparatorFn<TTag extends ElementType = typeof DEFAULT_SEPARATOR_TAG>(
10971097
export interface _internal_ComponentMenu extends HasDisplayName {
10981098
<TTag extends ElementType = typeof DEFAULT_MENU_TAG>(
10991099
props: MenuProps<TTag> & RefProp<typeof MenuFn>
1100-
): JSX.Element
1100+
): React.JSX.Element
11011101
}
11021102

11031103
export interface _internal_ComponentMenuButton extends HasDisplayName {
11041104
<TTag extends ElementType = typeof DEFAULT_BUTTON_TAG>(
11051105
props: MenuButtonProps<TTag> & RefProp<typeof ButtonFn>
1106-
): JSX.Element
1106+
): React.JSX.Element
11071107
}
11081108

11091109
export interface _internal_ComponentMenuItems extends HasDisplayName {
11101110
<TTag extends ElementType = typeof DEFAULT_ITEMS_TAG>(
11111111
props: MenuItemsProps<TTag> & RefProp<typeof ItemsFn>
1112-
): JSX.Element
1112+
): React.JSX.Element
11131113
}
11141114

11151115
export interface _internal_ComponentMenuItem extends HasDisplayName {
11161116
<TTag extends ElementType = typeof DEFAULT_ITEM_TAG>(
11171117
props: MenuItemProps<TTag> & RefProp<typeof ItemFn>
1118-
): JSX.Element
1118+
): React.JSX.Element
11191119
}
11201120

11211121
export interface _internal_ComponentMenuSection extends HasDisplayName {
11221122
<TTag extends ElementType = typeof DEFAULT_SECTION_TAG>(
11231123
props: MenuSectionProps<TTag> & RefProp<typeof SectionFn>
1124-
): JSX.Element
1124+
): React.JSX.Element
11251125
}
11261126

11271127
export interface _internal_ComponentMenuHeading extends HasDisplayName {
11281128
<TTag extends ElementType = typeof DEFAULT_HEADING_TAG>(
11291129
props: MenuHeadingProps<TTag> & RefProp<typeof HeadingFn>
1130-
): JSX.Element
1130+
): React.JSX.Element
11311131
}
11321132

11331133
export interface _internal_ComponentMenuSeparator extends HasDisplayName {
11341134
<TTag extends ElementType = typeof DEFAULT_SEPARATOR_TAG>(
11351135
props: MenuSeparatorProps<TTag> & RefProp<typeof SeparatorFn>
1136-
): JSX.Element
1136+
): React.JSX.Element
11371137
}
11381138

11391139
let MenuRoot = forwardRefWithAs(MenuFn) as _internal_ComponentMenu

‎packages/@headlessui-react/src/components/popover/popover.tsx

+5-5
Original file line numberDiff line numberDiff line change
@@ -1208,31 +1208,31 @@ function GroupFn<TTag extends ElementType = typeof DEFAULT_GROUP_TAG>(
12081208
export interface _internal_ComponentPopover extends HasDisplayName {
12091209
<TTag extends ElementType = typeof DEFAULT_POPOVER_TAG>(
12101210
props: PopoverProps<TTag> & RefProp<typeof PopoverFn>
1211-
): JSX.Element
1211+
): React.JSX.Element
12121212
}
12131213

12141214
export interface _internal_ComponentPopoverButton extends HasDisplayName {
12151215
<TTag extends ElementType = typeof DEFAULT_BUTTON_TAG>(
12161216
props: PopoverButtonProps<TTag> & RefProp<typeof ButtonFn>
1217-
): JSX.Element
1217+
): React.JSX.Element
12181218
}
12191219

12201220
export interface _internal_ComponentPopoverBackdrop extends HasDisplayName {
12211221
<TTag extends ElementType = typeof DEFAULT_BACKDROP_TAG>(
12221222
props: PopoverBackdropProps<TTag> & RefProp<typeof BackdropFn>
1223-
): JSX.Element
1223+
): React.JSX.Element
12241224
}
12251225

12261226
export interface _internal_ComponentPopoverPanel extends HasDisplayName {
12271227
<TTag extends ElementType = typeof DEFAULT_PANEL_TAG>(
12281228
props: PopoverPanelProps<TTag> & RefProp<typeof PanelFn>
1229-
): JSX.Element
1229+
): React.JSX.Element
12301230
}
12311231

12321232
export interface _internal_ComponentPopoverGroup extends HasDisplayName {
12331233
<TTag extends ElementType = typeof DEFAULT_GROUP_TAG>(
12341234
props: PopoverGroupProps<TTag> & RefProp<typeof GroupFn>
1235-
): JSX.Element
1235+
): React.JSX.Element
12361236
}
12371237

12381238
let PopoverRoot = forwardRefWithAs(PopoverFn) as _internal_ComponentPopover

‎packages/@headlessui-react/src/components/portal/portal.tsx

+2-2
Original file line numberDiff line numberDiff line change
@@ -249,13 +249,13 @@ export function useNestedPortals() {
249249
export interface _internal_ComponentPortal extends HasDisplayName {
250250
<TTag extends ElementType = typeof DEFAULT_PORTAL_TAG>(
251251
props: PortalProps<TTag> & RefProp<typeof PortalFn>
252-
): JSX.Element
252+
): React.JSX.Element
253253
}
254254

255255
export interface _internal_ComponentPortalGroup extends HasDisplayName {
256256
<TTag extends ElementType = typeof DEFAULT_GROUP_TAG>(
257257
props: PortalGroupProps<TTag> & RefProp<typeof GroupFn>
258-
): JSX.Element
258+
): React.JSX.Element
259259
}
260260

261261
let PortalRoot = forwardRefWithAs(PortalFn) as unknown as _internal_ComponentPortal

‎packages/@headlessui-react/src/components/radio-group/radio-group.tsx

+3-3
Original file line numberDiff line numberDiff line change
@@ -571,19 +571,19 @@ function RadioFn<
571571
export interface _internal_ComponentRadioGroup extends HasDisplayName {
572572
<TTag extends ElementType = typeof DEFAULT_RADIO_GROUP_TAG, TType = string>(
573573
props: RadioGroupProps<TTag, TType> & RefProp<typeof RadioGroupFn>
574-
): JSX.Element
574+
): React.JSX.Element
575575
}
576576

577577
export interface _internal_ComponentRadioOption extends HasDisplayName {
578578
<TTag extends ElementType = typeof DEFAULT_OPTION_TAG, TType = string>(
579579
props: RadioOptionProps<TTag, TType> & RefProp<typeof OptionFn>
580-
): JSX.Element
580+
): React.JSX.Element
581581
}
582582

583583
export interface _internal_ComponentRadio extends HasDisplayName {
584584
<TTag extends ElementType = typeof DEFAULT_RADIO_TAG, TType = string>(
585585
props: RadioProps<TTag, TType> & RefProp<typeof RadioFn>
586-
): JSX.Element
586+
): React.JSX.Element
587587
}
588588

589589
export interface _internal_ComponentRadioLabel extends _internal_ComponentLabel {}

‎packages/@headlessui-react/src/components/select/select.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -101,7 +101,7 @@ function SelectFn<TTag extends ElementType = typeof DEFAULT_SELECT_TAG>(
101101
export interface _internal_ComponentSelect extends HasDisplayName {
102102
<TTag extends ElementType = typeof DEFAULT_SELECT_TAG>(
103103
props: SelectProps<TTag> & RefProp<typeof SelectFn>
104-
): JSX.Element
104+
): React.JSX.Element
105105
}
106106

107107
export let Select = forwardRefWithAs(SelectFn) as _internal_ComponentSelect

‎packages/@headlessui-react/src/components/switch/switch.tsx

+2-2
Original file line numberDiff line numberDiff line change
@@ -265,13 +265,13 @@ function SwitchFn<TTag extends ElementType = typeof DEFAULT_SWITCH_TAG>(
265265
export interface _internal_ComponentSwitch extends HasDisplayName {
266266
<TTag extends ElementType = typeof DEFAULT_SWITCH_TAG>(
267267
props: SwitchProps<TTag> & RefProp<typeof SwitchFn>
268-
): JSX.Element
268+
): React.JSX.Element
269269
}
270270

271271
export interface _internal_ComponentSwitchGroup extends HasDisplayName {
272272
<TTag extends ElementType = typeof DEFAULT_GROUP_TAG>(
273273
props: SwitchGroupProps<TTag> & RefProp<typeof GroupFn>
274-
): JSX.Element
274+
): React.JSX.Element
275275
}
276276

277277
export interface _internal_ComponentSwitchLabel extends _internal_ComponentLabel {}

0 commit comments

Comments
 (0)