Skip to content

Commit 8e93cd0

Browse files
thecrypticaceRobinMalfait
thecrypticace
and
RobinMalfait
authored
Export component interfaces and mark them as internal (#2313)
* export component interfaces, and mark them as internal This is not ideal because we don't want these to be public. However, if you are creating components on top of Headless UI, the TypeScript compiler needs access to them. So now they are public in a sense, but you shouldn't be interacting with them directly. Co-authored-by: Jordan Pittman <jordan@cryptica.me> * Update changelog --------- Co-authored-by: Robin Malfait <malfait.robin@gmail.com>
1 parent d4aa86d commit 8e93cd0

File tree

15 files changed

+117
-104
lines changed

15 files changed

+117
-104
lines changed

‎packages/@headlessui-react/CHANGELOG.md

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
1515
- Add support for `role="alertdialog"` to `<Dialog>` component ([#2709](https://github.com/tailwindlabs/headlessui/pull/2709))
1616
- Ensure blurring the `Combobox.Input` component closes the `Combobox` ([#2712](https://github.com/tailwindlabs/headlessui/pull/2712))
1717
- Allow changes to the `className` prop when the `<Transition />` component is currently not transitioning ([#2722](https://github.com/tailwindlabs/headlessui/pull/2722))
18+
- Export (internal-only) component interfaces for TypeScript compiler ([#2313](https://github.com/tailwindlabs/headlessui/pull/2313))
1819

1920
### Added
2021

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

Lines changed: 12 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1559,7 +1559,7 @@ function OptionFn<
15591559

15601560
// ---
15611561

1562-
interface ComponentCombobox extends HasDisplayName {
1562+
export interface _internal_ComponentCombobox extends HasDisplayName {
15631563
<TValue, TTag extends ElementType = typeof DEFAULT_COMBOBOX_TAG>(
15641564
props: ComboboxProps<TValue, true, true, TTag> & RefProp<typeof ComboboxFn>
15651565
): JSX.Element
@@ -1574,31 +1574,31 @@ interface ComponentCombobox extends HasDisplayName {
15741574
): JSX.Element
15751575
}
15761576

1577-
interface ComponentComboboxButton extends HasDisplayName {
1577+
export interface _internal_ComponentComboboxButton extends HasDisplayName {
15781578
<TTag extends ElementType = typeof DEFAULT_BUTTON_TAG>(
15791579
props: ComboboxButtonProps<TTag> & RefProp<typeof ButtonFn>
15801580
): JSX.Element
15811581
}
15821582

1583-
interface ComponentComboboxInput extends HasDisplayName {
1583+
export interface _internal_ComponentComboboxInput extends HasDisplayName {
15841584
<TType, TTag extends ElementType = typeof DEFAULT_INPUT_TAG>(
15851585
props: ComboboxInputProps<TTag, TType> & RefProp<typeof InputFn>
15861586
): JSX.Element
15871587
}
15881588

1589-
interface ComponentComboboxLabel extends HasDisplayName {
1589+
export interface _internal_ComponentComboboxLabel extends HasDisplayName {
15901590
<TTag extends ElementType = typeof DEFAULT_LABEL_TAG>(
15911591
props: ComboboxLabelProps<TTag> & RefProp<typeof LabelFn>
15921592
): JSX.Element
15931593
}
15941594

1595-
interface ComponentComboboxOptions extends HasDisplayName {
1595+
export interface _internal_ComponentComboboxOptions extends HasDisplayName {
15961596
<TTag extends ElementType = typeof DEFAULT_OPTIONS_TAG>(
15971597
props: ComboboxOptionsProps<TTag> & RefProp<typeof OptionsFn>
15981598
): JSX.Element
15991599
}
16001600

1601-
interface ComponentComboboxOption extends HasDisplayName {
1601+
export interface _internal_ComponentComboboxOption extends HasDisplayName {
16021602
<
16031603
TTag extends ElementType = typeof DEFAULT_OPTION_TAG,
16041604
TType = Parameters<typeof ComboboxRoot>[0]['value']
@@ -1607,11 +1607,11 @@ interface ComponentComboboxOption extends HasDisplayName {
16071607
): JSX.Element
16081608
}
16091609

1610-
let ComboboxRoot = forwardRefWithAs(ComboboxFn) as unknown as ComponentCombobox
1611-
let Button = forwardRefWithAs(ButtonFn) as unknown as ComponentComboboxButton
1612-
let Input = forwardRefWithAs(InputFn) as unknown as ComponentComboboxInput
1613-
let Label = forwardRefWithAs(LabelFn) as unknown as ComponentComboboxLabel
1614-
let Options = forwardRefWithAs(OptionsFn) as unknown as ComponentComboboxOptions
1615-
let Option = forwardRefWithAs(OptionFn) as unknown as ComponentComboboxOption
1610+
let ComboboxRoot = forwardRefWithAs(ComboboxFn) as unknown as _internal_ComponentCombobox
1611+
let Button = forwardRefWithAs(ButtonFn) as unknown as _internal_ComponentComboboxButton
1612+
let Input = forwardRefWithAs(InputFn) as unknown as _internal_ComponentComboboxInput
1613+
let Label = forwardRefWithAs(LabelFn) as unknown as _internal_ComponentComboboxLabel
1614+
let Options = forwardRefWithAs(OptionsFn) as unknown as _internal_ComponentComboboxOptions
1615+
let Option = forwardRefWithAs(OptionFn) as unknown as _internal_ComponentComboboxOption
16161616

16171617
export let Combobox = Object.assign(ComboboxRoot, { Input, Button, Label, Options, Option })

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -115,13 +115,13 @@ function DescriptionFn<TTag extends ElementType = typeof DEFAULT_DESCRIPTION_TAG
115115
}
116116

117117
// ---
118-
export interface ComponentDescription extends HasDisplayName {
118+
export interface _internal_ComponentDescription extends HasDisplayName {
119119
<TTag extends ElementType = typeof DEFAULT_DESCRIPTION_TAG>(
120120
props: DescriptionProps<TTag> & RefProp<typeof DescriptionFn>
121121
): JSX.Element
122122
}
123123

124-
let DescriptionRoot = forwardRefWithAs(DescriptionFn) as unknown as ComponentDescription
124+
let DescriptionRoot = forwardRefWithAs(DescriptionFn) as unknown as _internal_ComponentDescription
125125

126126
export let Description = Object.assign(DescriptionRoot, {
127127
//

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

Lines changed: 17 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -36,7 +36,11 @@ import { useId } from '../../hooks/use-id'
3636
import { FocusTrap } from '../../components/focus-trap/focus-trap'
3737
import { Portal, useNestedPortals } from '../../components/portal/portal'
3838
import { ForcePortalRoot } from '../../internal/portal-force-root'
39-
import { ComponentDescription, Description, useDescriptions } from '../description/description'
39+
import {
40+
_internal_ComponentDescription,
41+
Description,
42+
useDescriptions,
43+
} from '../description/description'
4044
import { useOpenClosed, State } from '../../internal/open-closed'
4145
import { useServerHandoffComplete } from '../../hooks/use-server-handoff-complete'
4246
import { StackProvider, StackMessage } from '../../internal/stack-context'
@@ -614,48 +618,48 @@ function TitleFn<TTag extends ElementType = typeof DEFAULT_TITLE_TAG>(
614618

615619
// ---
616620

617-
interface ComponentDialog extends HasDisplayName {
621+
export interface _internal_ComponentDialog extends HasDisplayName {
618622
<TTag extends ElementType = typeof DEFAULT_DIALOG_TAG>(
619623
props: DialogProps<TTag> & RefProp<typeof DialogFn>
620624
): JSX.Element
621625
}
622626

623-
interface ComponentDialogBackdrop extends HasDisplayName {
627+
export interface _internal_ComponentDialogBackdrop extends HasDisplayName {
624628
<TTag extends ElementType = typeof DEFAULT_BACKDROP_TAG>(
625629
props: DialogBackdropProps<TTag> & RefProp<typeof BackdropFn>
626630
): JSX.Element
627631
}
628632

629-
interface ComponentDialogPanel extends HasDisplayName {
633+
export interface _internal_ComponentDialogPanel extends HasDisplayName {
630634
<TTag extends ElementType = typeof DEFAULT_PANEL_TAG>(
631635
props: DialogPanelProps<TTag> & RefProp<typeof PanelFn>
632636
): JSX.Element
633637
}
634638

635-
interface ComponentDialogOverlay extends HasDisplayName {
639+
export interface _internal_ComponentDialogOverlay extends HasDisplayName {
636640
<TTag extends ElementType = typeof DEFAULT_OVERLAY_TAG>(
637641
props: DialogOverlayProps<TTag> & RefProp<typeof OverlayFn>
638642
): JSX.Element
639643
}
640644

641-
interface ComponentDialogTitle extends HasDisplayName {
645+
export interface _internal_ComponentDialogTitle extends HasDisplayName {
642646
<TTag extends ElementType = typeof DEFAULT_TITLE_TAG>(
643647
props: DialogTitleProps<TTag> & RefProp<typeof TitleFn>
644648
): JSX.Element
645649
}
646650

647-
interface ComponentDialogDescription extends ComponentDescription {}
651+
export interface _internal_ComponentDialogDescription extends _internal_ComponentDescription {}
648652

649-
let DialogRoot = forwardRefWithAs(DialogFn) as unknown as ComponentDialog
650-
let Backdrop = forwardRefWithAs(BackdropFn) as unknown as ComponentDialogBackdrop
651-
let Panel = forwardRefWithAs(PanelFn) as unknown as ComponentDialogPanel
652-
let Overlay = forwardRefWithAs(OverlayFn) as unknown as ComponentDialogOverlay
653-
let Title = forwardRefWithAs(TitleFn) as unknown as ComponentDialogTitle
653+
let DialogRoot = forwardRefWithAs(DialogFn) as unknown as _internal_ComponentDialog
654+
let Backdrop = forwardRefWithAs(BackdropFn) as unknown as _internal_ComponentDialogBackdrop
655+
let Panel = forwardRefWithAs(PanelFn) as unknown as _internal_ComponentDialogPanel
656+
let Overlay = forwardRefWithAs(OverlayFn) as unknown as _internal_ComponentDialogOverlay
657+
let Title = forwardRefWithAs(TitleFn) as unknown as _internal_ComponentDialogTitle
654658

655659
export let Dialog = Object.assign(DialogRoot, {
656660
Backdrop,
657661
Panel,
658662
Overlay,
659663
Title,
660-
Description: Description as ComponentDialogDescription,
664+
Description: Description as _internal_ComponentDialogDescription,
661665
})

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

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -425,26 +425,26 @@ function PanelFn<TTag extends ElementType = typeof DEFAULT_PANEL_TAG>(
425425

426426
// ---
427427

428-
interface ComponentDisclosure extends HasDisplayName {
428+
export interface _internal_ComponentDisclosure extends HasDisplayName {
429429
<TTag extends ElementType = typeof DEFAULT_DISCLOSURE_TAG>(
430430
props: DisclosureProps<TTag> & RefProp<typeof DisclosureFn>
431431
): JSX.Element
432432
}
433433

434-
interface ComponentDisclosureButton extends HasDisplayName {
434+
export interface _internal_ComponentDisclosureButton extends HasDisplayName {
435435
<TTag extends ElementType = typeof DEFAULT_BUTTON_TAG>(
436436
props: DisclosureButtonProps<TTag> & RefProp<typeof ButtonFn>
437437
): JSX.Element
438438
}
439439

440-
interface ComponentDisclosurePanel extends HasDisplayName {
440+
export interface _internal_ComponentDisclosurePanel extends HasDisplayName {
441441
<TTag extends ElementType = typeof DEFAULT_PANEL_TAG>(
442442
props: DisclosurePanelProps<TTag> & RefProp<typeof PanelFn>
443443
): JSX.Element
444444
}
445445

446-
let DisclosureRoot = forwardRefWithAs(DisclosureFn) as unknown as ComponentDisclosure
447-
let Button = forwardRefWithAs(ButtonFn) as unknown as ComponentDisclosureButton
448-
let Panel = forwardRefWithAs(PanelFn) as unknown as ComponentDisclosurePanel
446+
let DisclosureRoot = forwardRefWithAs(DisclosureFn) as unknown as _internal_ComponentDisclosure
447+
let Button = forwardRefWithAs(ButtonFn) as unknown as _internal_ComponentDisclosureButton
448+
let Panel = forwardRefWithAs(PanelFn) as unknown as _internal_ComponentDisclosurePanel
449449

450450
export let Disclosure = Object.assign(DisclosureRoot, { Button, Panel })

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -198,13 +198,13 @@ function FocusTrapFn<TTag extends ElementType = typeof DEFAULT_FOCUS_TRAP_TAG>(
198198

199199
// ---
200200

201-
interface ComponentFocusTrap extends HasDisplayName {
201+
export interface _internal_ComponentFocusTrap extends HasDisplayName {
202202
<TTag extends ElementType = typeof DEFAULT_FOCUS_TRAP_TAG>(
203203
props: FocusTrapProps<TTag> & RefProp<typeof FocusTrapFn>
204204
): JSX.Element
205205
}
206206

207-
let FocusTrapRoot = forwardRefWithAs(FocusTrapFn) as unknown as ComponentFocusTrap
207+
let FocusTrapRoot = forwardRefWithAs(FocusTrapFn) as unknown as _internal_ComponentFocusTrap
208208

209209
export let FocusTrap = Object.assign(FocusTrapRoot, {
210210
features: Features,

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -119,13 +119,13 @@ function LabelFn<TTag extends ElementType = typeof DEFAULT_LABEL_TAG>(
119119

120120
// ---
121121

122-
export interface ComponentLabel extends HasDisplayName {
122+
export interface _internal_ComponentLabel extends HasDisplayName {
123123
<TTag extends ElementType = typeof DEFAULT_LABEL_TAG>(
124124
props: LabelProps<TTag> & RefProp<typeof LabelFn>
125125
): JSX.Element
126126
}
127127

128-
let LabelRoot = forwardRefWithAs(LabelFn) as unknown as ComponentLabel
128+
let LabelRoot = forwardRefWithAs(LabelFn) as unknown as _internal_ComponentLabel
129129

130130
export let Label = Object.assign(LabelRoot, {
131131
//

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

Lines changed: 10 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1033,7 +1033,7 @@ function OptionFn<
10331033

10341034
// ---
10351035

1036-
interface ComponentListbox extends HasDisplayName {
1036+
export interface _internal_ComponentListbox extends HasDisplayName {
10371037
<
10381038
TTag extends ElementType = typeof DEFAULT_LISTBOX_TAG,
10391039
TType = string,
@@ -1043,25 +1043,25 @@ interface ComponentListbox extends HasDisplayName {
10431043
): JSX.Element
10441044
}
10451045

1046-
interface ComponentListboxButton extends HasDisplayName {
1046+
export interface _internal_ComponentListboxButton extends HasDisplayName {
10471047
<TTag extends ElementType = typeof DEFAULT_BUTTON_TAG>(
10481048
props: ListboxButtonProps<TTag> & RefProp<typeof ButtonFn>
10491049
): JSX.Element
10501050
}
10511051

1052-
interface ComponentListboxLabel extends HasDisplayName {
1052+
export interface _internal_ComponentListboxLabel extends HasDisplayName {
10531053
<TTag extends ElementType = typeof DEFAULT_LABEL_TAG>(
10541054
props: ListboxLabelProps<TTag> & RefProp<typeof LabelFn>
10551055
): JSX.Element
10561056
}
10571057

1058-
interface ComponentListboxOptions extends HasDisplayName {
1058+
export interface _internal_ComponentListboxOptions extends HasDisplayName {
10591059
<TTag extends ElementType = typeof DEFAULT_OPTIONS_TAG>(
10601060
props: ListboxOptionsProps<TTag> & RefProp<typeof OptionsFn>
10611061
): JSX.Element
10621062
}
10631063

1064-
interface ComponentListboxOption extends HasDisplayName {
1064+
export interface _internal_ComponentListboxOption extends HasDisplayName {
10651065
<
10661066
TTag extends ElementType = typeof DEFAULT_OPTION_TAG,
10671067
TType = Parameters<typeof ListboxRoot>[0]['value']
@@ -1070,10 +1070,10 @@ interface ComponentListboxOption extends HasDisplayName {
10701070
): JSX.Element
10711071
}
10721072

1073-
let ListboxRoot = forwardRefWithAs(ListboxFn) as unknown as ComponentListbox
1074-
let Button = forwardRefWithAs(ButtonFn) as unknown as ComponentListboxButton
1075-
let Label = forwardRefWithAs(LabelFn) as unknown as ComponentListboxLabel
1076-
let Options = forwardRefWithAs(OptionsFn) as unknown as ComponentListboxOptions
1077-
let Option = forwardRefWithAs(OptionFn) as unknown as ComponentListboxOption
1073+
let ListboxRoot = forwardRefWithAs(ListboxFn) as unknown as _internal_ComponentListbox
1074+
let Button = forwardRefWithAs(ButtonFn) as unknown as _internal_ComponentListboxButton
1075+
let Label = forwardRefWithAs(LabelFn) as unknown as _internal_ComponentListboxLabel
1076+
let Options = forwardRefWithAs(OptionsFn) as unknown as _internal_ComponentListboxOptions
1077+
let Option = forwardRefWithAs(OptionFn) as unknown as _internal_ComponentListboxOption
10781078

10791079
export let Listbox = Object.assign(ListboxRoot, { Button, Label, Options, Option })

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

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -726,33 +726,33 @@ function ItemFn<TTag extends ElementType = typeof DEFAULT_ITEM_TAG>(
726726

727727
// ---
728728

729-
interface ComponentMenu extends HasDisplayName {
729+
export interface _internal_ComponentMenu extends HasDisplayName {
730730
<TTag extends ElementType = typeof DEFAULT_MENU_TAG>(
731731
props: MenuProps<TTag> & RefProp<typeof MenuFn>
732732
): JSX.Element
733733
}
734734

735-
interface ComponentMenuButton extends HasDisplayName {
735+
export interface _internal_ComponentMenuButton extends HasDisplayName {
736736
<TTag extends ElementType = typeof DEFAULT_BUTTON_TAG>(
737737
props: MenuButtonProps<TTag> & RefProp<typeof ButtonFn>
738738
): JSX.Element
739739
}
740740

741-
interface ComponentMenuItems extends HasDisplayName {
741+
export interface _internal_ComponentMenuItems extends HasDisplayName {
742742
<TTag extends ElementType = typeof DEFAULT_ITEMS_TAG>(
743743
props: MenuItemsProps<TTag> & RefProp<typeof ItemsFn>
744744
): JSX.Element
745745
}
746746

747-
interface ComponentMenuItem extends HasDisplayName {
747+
export interface _internal_ComponentMenuItem extends HasDisplayName {
748748
<TTag extends ElementType = typeof DEFAULT_ITEM_TAG>(
749749
props: MenuItemProps<TTag> & RefProp<typeof ItemFn>
750750
): JSX.Element
751751
}
752752

753-
let MenuRoot = forwardRefWithAs(MenuFn) as unknown as ComponentMenu
754-
let Button = forwardRefWithAs(ButtonFn) as unknown as ComponentMenuButton
755-
let Items = forwardRefWithAs(ItemsFn) as unknown as ComponentMenuItems
756-
let Item = forwardRefWithAs(ItemFn) as unknown as ComponentMenuItem
753+
let MenuRoot = forwardRefWithAs(MenuFn) as unknown as _internal_ComponentMenu
754+
let Button = forwardRefWithAs(ButtonFn) as unknown as _internal_ComponentMenuButton
755+
let Items = forwardRefWithAs(ItemsFn) as unknown as _internal_ComponentMenuItems
756+
let Item = forwardRefWithAs(ItemFn) as unknown as _internal_ComponentMenuItem
757757

758758
export let Menu = Object.assign(MenuRoot, { Button, Items, Item })

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

Lines changed: 10 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1052,40 +1052,40 @@ function GroupFn<TTag extends ElementType = typeof DEFAULT_PANEL_TAG>(
10521052

10531053
// ---
10541054

1055-
interface ComponentPopover extends HasDisplayName {
1055+
export interface _internal_ComponentPopover extends HasDisplayName {
10561056
<TTag extends ElementType = typeof DEFAULT_POPOVER_TAG>(
10571057
props: PopoverProps<TTag> & RefProp<typeof PopoverFn>
10581058
): JSX.Element
10591059
}
10601060

1061-
interface ComponentPopoverButton extends HasDisplayName {
1061+
export interface _internal_ComponentPopoverButton extends HasDisplayName {
10621062
<TTag extends ElementType = typeof DEFAULT_BUTTON_TAG>(
10631063
props: PopoverButtonProps<TTag> & RefProp<typeof ButtonFn>
10641064
): JSX.Element
10651065
}
10661066

1067-
interface ComponentPopoverOverlay extends HasDisplayName {
1067+
export interface _internal_ComponentPopoverOverlay extends HasDisplayName {
10681068
<TTag extends ElementType = typeof DEFAULT_OVERLAY_TAG>(
10691069
props: PopoverOverlayProps<TTag> & RefProp<typeof OverlayFn>
10701070
): JSX.Element
10711071
}
10721072

1073-
interface ComponentPopoverPanel extends HasDisplayName {
1073+
export interface _internal_ComponentPopoverPanel extends HasDisplayName {
10741074
<TTag extends ElementType = typeof DEFAULT_PANEL_TAG>(
10751075
props: PopoverPanelProps<TTag> & RefProp<typeof PanelFn>
10761076
): JSX.Element
10771077
}
10781078

1079-
interface ComponentPopoverGroup extends HasDisplayName {
1079+
export interface _internal_ComponentPopoverGroup extends HasDisplayName {
10801080
<TTag extends ElementType = typeof DEFAULT_GROUP_TAG>(
10811081
props: PopoverGroupProps<TTag> & RefProp<typeof GroupFn>
10821082
): JSX.Element
10831083
}
10841084

1085-
let PopoverRoot = forwardRefWithAs(PopoverFn) as unknown as ComponentPopover
1086-
let Button = forwardRefWithAs(ButtonFn) as unknown as ComponentPopoverButton
1087-
let Overlay = forwardRefWithAs(OverlayFn) as unknown as ComponentPopoverOverlay
1088-
let Panel = forwardRefWithAs(PanelFn) as unknown as ComponentPopoverPanel
1089-
let Group = forwardRefWithAs(GroupFn) as unknown as ComponentPopoverGroup
1085+
let PopoverRoot = forwardRefWithAs(PopoverFn) as unknown as _internal_ComponentPopover
1086+
let Button = forwardRefWithAs(ButtonFn) as unknown as _internal_ComponentPopoverButton
1087+
let Overlay = forwardRefWithAs(OverlayFn) as unknown as _internal_ComponentPopoverOverlay
1088+
let Panel = forwardRefWithAs(PanelFn) as unknown as _internal_ComponentPopoverPanel
1089+
let Group = forwardRefWithAs(GroupFn) as unknown as _internal_ComponentPopoverGroup
10901090

10911091
export let Popover = Object.assign(PopoverRoot, { Button, Overlay, Panel, Group })

0 commit comments

Comments
 (0)