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 <[email protected]>
tailwindlabs · Aug 31, 2023 · cf0fa33 · cf0fa33
1 parent d4aa86d
commit cf0fa33
Show file tree

Hide file tree

Showing 14 changed files with 116 additions and 104 deletions.
diff --git a/packages/@headlessui-react/src/components/combobox/combobox.tsx b/packages/@headlessui-react/src/components/combobox/combobox.tsx
@@ -1559,7 +1559,7 @@ function OptionFn<
 
 // ---
 
-interface ComponentCombobox extends HasDisplayName {
+export interface _internal_ComponentCombobox extends HasDisplayName {
   <TValue, TTag extends ElementType = typeof DEFAULT_COMBOBOX_TAG>(
     props: ComboboxProps<TValue, true, true, TTag> & RefProp<typeof ComboboxFn>
   ): JSX.Element
@@ -1574,31 +1574,31 @@ interface ComponentCombobox extends HasDisplayName {
   ): JSX.Element
 }
 
-interface ComponentComboboxButton extends HasDisplayName {
+export interface _internal_ComponentComboboxButton extends HasDisplayName {
   <TTag extends ElementType = typeof DEFAULT_BUTTON_TAG>(
     props: ComboboxButtonProps<TTag> & RefProp<typeof ButtonFn>
   ): JSX.Element
 }
 
-interface ComponentComboboxInput extends HasDisplayName {
+export interface _internal_ComponentComboboxInput extends HasDisplayName {
   <TType, TTag extends ElementType = typeof DEFAULT_INPUT_TAG>(
     props: ComboboxInputProps<TTag, TType> & RefProp<typeof InputFn>
   ): JSX.Element
 }
 
-interface ComponentComboboxLabel extends HasDisplayName {
+export interface _internal_ComponentComboboxLabel extends HasDisplayName {
   <TTag extends ElementType = typeof DEFAULT_LABEL_TAG>(
     props: ComboboxLabelProps<TTag> & RefProp<typeof LabelFn>
   ): JSX.Element
 }
 
-interface ComponentComboboxOptions extends HasDisplayName {
+export interface _internal_ComponentComboboxOptions extends HasDisplayName {
   <TTag extends ElementType = typeof DEFAULT_OPTIONS_TAG>(
     props: ComboboxOptionsProps<TTag> & RefProp<typeof OptionsFn>
   ): JSX.Element
 }
 
-interface ComponentComboboxOption extends HasDisplayName {
+export interface _internal_ComponentComboboxOption extends HasDisplayName {
   <
     TTag extends ElementType = typeof DEFAULT_OPTION_TAG,
     TType = Parameters<typeof ComboboxRoot>[0]['value']
@@ -1607,11 +1607,11 @@ interface ComponentComboboxOption extends HasDisplayName {
   ): JSX.Element
 }
 
-let ComboboxRoot = forwardRefWithAs(ComboboxFn) as unknown as ComponentCombobox
-let Button = forwardRefWithAs(ButtonFn) as unknown as ComponentComboboxButton
-let Input = forwardRefWithAs(InputFn) as unknown as ComponentComboboxInput
-let Label = forwardRefWithAs(LabelFn) as unknown as ComponentComboboxLabel
-let Options = forwardRefWithAs(OptionsFn) as unknown as ComponentComboboxOptions
-let Option = forwardRefWithAs(OptionFn) as unknown as ComponentComboboxOption
+let ComboboxRoot = forwardRefWithAs(ComboboxFn) as unknown as _internal_ComponentCombobox
+let Button = forwardRefWithAs(ButtonFn) as unknown as _internal_ComponentComboboxButton
+let Input = forwardRefWithAs(InputFn) as unknown as _internal_ComponentComboboxInput
+let Label = forwardRefWithAs(LabelFn) as unknown as _internal_ComponentComboboxLabel
+let Options = forwardRefWithAs(OptionsFn) as unknown as _internal_ComponentComboboxOptions
+let Option = forwardRefWithAs(OptionFn) as unknown as _internal_ComponentComboboxOption
 
 export let Combobox = Object.assign(ComboboxRoot, { Input, Button, Label, Options, Option })
diff --git a/packages/@headlessui-react/src/components/description/description.tsx b/packages/@headlessui-react/src/components/description/description.tsx
@@ -115,13 +115,13 @@ function DescriptionFn<TTag extends ElementType = typeof DEFAULT_DESCRIPTION_TAG
 }
 
 // ---
-export interface ComponentDescription extends HasDisplayName {
+export interface _internal_ComponentDescription extends HasDisplayName {
   <TTag extends ElementType = typeof DEFAULT_DESCRIPTION_TAG>(
     props: DescriptionProps<TTag> & RefProp<typeof DescriptionFn>
   ): JSX.Element
 }
 
-let DescriptionRoot = forwardRefWithAs(DescriptionFn) as unknown as ComponentDescription
+let DescriptionRoot = forwardRefWithAs(DescriptionFn) as unknown as _internal_ComponentDescription
 
 export let Description = Object.assign(DescriptionRoot, {
   //

diff --git a/packages/@headlessui-react/src/components/dialog/dialog.tsx b/packages/@headlessui-react/src/components/dialog/dialog.tsx
@@ -36,7 +36,11 @@ import { useId } from '../../hooks/use-id'
 import { FocusTrap } from '../../components/focus-trap/focus-trap'
 import { Portal, useNestedPortals } from '../../components/portal/portal'
 import { ForcePortalRoot } from '../../internal/portal-force-root'
-import { ComponentDescription, Description, useDescriptions } from '../description/description'
+import {
+  _internal_ComponentDescription,
+  Description,
+  useDescriptions,
+} from '../description/description'
 import { useOpenClosed, State } from '../../internal/open-closed'
 import { useServerHandoffComplete } from '../../hooks/use-server-handoff-complete'
 import { StackProvider, StackMessage } from '../../internal/stack-context'
@@ -614,48 +618,48 @@ function TitleFn<TTag extends ElementType = typeof DEFAULT_TITLE_TAG>(
 
 // ---
 
-interface ComponentDialog extends HasDisplayName {
+export interface _internal_ComponentDialog extends HasDisplayName {
   <TTag extends ElementType = typeof DEFAULT_DIALOG_TAG>(
     props: DialogProps<TTag> & RefProp<typeof DialogFn>
   ): JSX.Element
 }
 
-interface ComponentDialogBackdrop extends HasDisplayName {
+export interface _internal_ComponentDialogBackdrop extends HasDisplayName {
   <TTag extends ElementType = typeof DEFAULT_BACKDROP_TAG>(
     props: DialogBackdropProps<TTag> & RefProp<typeof BackdropFn>
   ): JSX.Element
 }
 
-interface ComponentDialogPanel extends HasDisplayName {
+export interface _internal_ComponentDialogPanel extends HasDisplayName {
   <TTag extends ElementType = typeof DEFAULT_PANEL_TAG>(
     props: DialogPanelProps<TTag> & RefProp<typeof PanelFn>
   ): JSX.Element
 }
 
-interface ComponentDialogOverlay extends HasDisplayName {
+export interface _internal_ComponentDialogOverlay extends HasDisplayName {
   <TTag extends ElementType = typeof DEFAULT_OVERLAY_TAG>(
     props: DialogOverlayProps<TTag> & RefProp<typeof OverlayFn>
   ): JSX.Element
 }
 
-interface ComponentDialogTitle extends HasDisplayName {
+export interface _internal_ComponentDialogTitle extends HasDisplayName {
   <TTag extends ElementType = typeof DEFAULT_TITLE_TAG>(
     props: DialogTitleProps<TTag> & RefProp<typeof TitleFn>
   ): JSX.Element
 }
 
-interface ComponentDialogDescription extends ComponentDescription {}
+export interface _internal_ComponentDialogDescription extends _internal_ComponentDescription {}
 
-let DialogRoot = forwardRefWithAs(DialogFn) as unknown as ComponentDialog
-let Backdrop = forwardRefWithAs(BackdropFn) as unknown as ComponentDialogBackdrop
-let Panel = forwardRefWithAs(PanelFn) as unknown as ComponentDialogPanel
-let Overlay = forwardRefWithAs(OverlayFn) as unknown as ComponentDialogOverlay
-let Title = forwardRefWithAs(TitleFn) as unknown as ComponentDialogTitle
+let DialogRoot = forwardRefWithAs(DialogFn) as unknown as _internal_ComponentDialog
+let Backdrop = forwardRefWithAs(BackdropFn) as unknown as _internal_ComponentDialogBackdrop
+let Panel = forwardRefWithAs(PanelFn) as unknown as _internal_ComponentDialogPanel
+let Overlay = forwardRefWithAs(OverlayFn) as unknown as _internal_ComponentDialogOverlay
+let Title = forwardRefWithAs(TitleFn) as unknown as _internal_ComponentDialogTitle
 
 export let Dialog = Object.assign(DialogRoot, {
   Backdrop,
   Panel,
   Overlay,
   Title,
-  Description: Description as ComponentDialogDescription,
+  Description: Description as _internal_ComponentDialogDescription,
 })
diff --git a/packages/@headlessui-react/src/components/disclosure/disclosure.tsx b/packages/@headlessui-react/src/components/disclosure/disclosure.tsx
@@ -425,26 +425,26 @@ function PanelFn<TTag extends ElementType = typeof DEFAULT_PANEL_TAG>(
 
 // ---
 
-interface ComponentDisclosure extends HasDisplayName {
+export interface _internal_ComponentDisclosure extends HasDisplayName {
   <TTag extends ElementType = typeof DEFAULT_DISCLOSURE_TAG>(
     props: DisclosureProps<TTag> & RefProp<typeof DisclosureFn>
   ): JSX.Element
 }
 
-interface ComponentDisclosureButton extends HasDisplayName {
+export interface _internal_ComponentDisclosureButton extends HasDisplayName {
   <TTag extends ElementType = typeof DEFAULT_BUTTON_TAG>(
     props: DisclosureButtonProps<TTag> & RefProp<typeof ButtonFn>
   ): JSX.Element
 }
 
-interface ComponentDisclosurePanel extends HasDisplayName {
+export interface _internal_ComponentDisclosurePanel extends HasDisplayName {
   <TTag extends ElementType = typeof DEFAULT_PANEL_TAG>(
     props: DisclosurePanelProps<TTag> & RefProp<typeof PanelFn>
   ): JSX.Element
 }
 
-let DisclosureRoot = forwardRefWithAs(DisclosureFn) as unknown as ComponentDisclosure
-let Button = forwardRefWithAs(ButtonFn) as unknown as ComponentDisclosureButton
-let Panel = forwardRefWithAs(PanelFn) as unknown as ComponentDisclosurePanel
+let DisclosureRoot = forwardRefWithAs(DisclosureFn) as unknown as _internal_ComponentDisclosure
+let Button = forwardRefWithAs(ButtonFn) as unknown as _internal_ComponentDisclosureButton
+let Panel = forwardRefWithAs(PanelFn) as unknown as _internal_ComponentDisclosurePanel
 
 export let Disclosure = Object.assign(DisclosureRoot, { Button, Panel })
diff --git a/packages/@headlessui-react/src/components/focus-trap/focus-trap.tsx b/packages/@headlessui-react/src/components/focus-trap/focus-trap.tsx
@@ -198,13 +198,13 @@ function FocusTrapFn<TTag extends ElementType = typeof DEFAULT_FOCUS_TRAP_TAG>(
 
 // ---
 
-interface ComponentFocusTrap extends HasDisplayName {
+export interface _internal_ComponentFocusTrap extends HasDisplayName {
   <TTag extends ElementType = typeof DEFAULT_FOCUS_TRAP_TAG>(
     props: FocusTrapProps<TTag> & RefProp<typeof FocusTrapFn>
   ): JSX.Element
 }
 
-let FocusTrapRoot = forwardRefWithAs(FocusTrapFn) as unknown as ComponentFocusTrap
+let FocusTrapRoot = forwardRefWithAs(FocusTrapFn) as unknown as _internal_ComponentFocusTrap
 
 export let FocusTrap = Object.assign(FocusTrapRoot, {
   features: Features,

diff --git a/packages/@headlessui-react/src/components/label/label.tsx b/packages/@headlessui-react/src/components/label/label.tsx
@@ -119,13 +119,13 @@ function LabelFn<TTag extends ElementType = typeof DEFAULT_LABEL_TAG>(
 
 // ---
 
-export interface ComponentLabel extends HasDisplayName {
+export interface _internal_ComponentLabel extends HasDisplayName {
   <TTag extends ElementType = typeof DEFAULT_LABEL_TAG>(
     props: LabelProps<TTag> & RefProp<typeof LabelFn>
   ): JSX.Element
 }
 
-let LabelRoot = forwardRefWithAs(LabelFn) as unknown as ComponentLabel
+let LabelRoot = forwardRefWithAs(LabelFn) as unknown as _internal_ComponentLabel
 
 export let Label = Object.assign(LabelRoot, {
   //

diff --git a/packages/@headlessui-react/src/components/listbox/listbox.tsx b/packages/@headlessui-react/src/components/listbox/listbox.tsx
@@ -1033,7 +1033,7 @@ function OptionFn<
 
 // ---
 
-interface ComponentListbox extends HasDisplayName {
+export interface _internal_ComponentListbox extends HasDisplayName {
   <
     TTag extends ElementType = typeof DEFAULT_LISTBOX_TAG,
     TType = string,
@@ -1043,25 +1043,25 @@ interface ComponentListbox extends HasDisplayName {
   ): JSX.Element
 }
 
-interface ComponentListboxButton extends HasDisplayName {
+export interface _internal_ComponentListboxButton extends HasDisplayName {
   <TTag extends ElementType = typeof DEFAULT_BUTTON_TAG>(
     props: ListboxButtonProps<TTag> & RefProp<typeof ButtonFn>
   ): JSX.Element
 }
 
-interface ComponentListboxLabel extends HasDisplayName {
+export interface _internal_ComponentListboxLabel extends HasDisplayName {
   <TTag extends ElementType = typeof DEFAULT_LABEL_TAG>(
     props: ListboxLabelProps<TTag> & RefProp<typeof LabelFn>
   ): JSX.Element
 }
 
-interface ComponentListboxOptions extends HasDisplayName {
+export interface _internal_ComponentListboxOptions extends HasDisplayName {
   <TTag extends ElementType = typeof DEFAULT_OPTIONS_TAG>(
     props: ListboxOptionsProps<TTag> & RefProp<typeof OptionsFn>
   ): JSX.Element
 }
 
-interface ComponentListboxOption extends HasDisplayName {
+export interface _internal_ComponentListboxOption extends HasDisplayName {
   <
     TTag extends ElementType = typeof DEFAULT_OPTION_TAG,
     TType = Parameters<typeof ListboxRoot>[0]['value']
@@ -1070,10 +1070,10 @@ interface ComponentListboxOption extends HasDisplayName {
   ): JSX.Element
 }
 
-let ListboxRoot = forwardRefWithAs(ListboxFn) as unknown as ComponentListbox
-let Button = forwardRefWithAs(ButtonFn) as unknown as ComponentListboxButton
-let Label = forwardRefWithAs(LabelFn) as unknown as ComponentListboxLabel
-let Options = forwardRefWithAs(OptionsFn) as unknown as ComponentListboxOptions
-let Option = forwardRefWithAs(OptionFn) as unknown as ComponentListboxOption
+let ListboxRoot = forwardRefWithAs(ListboxFn) as unknown as _internal_ComponentListbox
+let Button = forwardRefWithAs(ButtonFn) as unknown as _internal_ComponentListboxButton
+let Label = forwardRefWithAs(LabelFn) as unknown as _internal_ComponentListboxLabel
+let Options = forwardRefWithAs(OptionsFn) as unknown as _internal_ComponentListboxOptions
+let Option = forwardRefWithAs(OptionFn) as unknown as _internal_ComponentListboxOption
 
 export let Listbox = Object.assign(ListboxRoot, { Button, Label, Options, Option })
diff --git a/packages/@headlessui-react/src/components/menu/menu.tsx b/packages/@headlessui-react/src/components/menu/menu.tsx
@@ -726,33 +726,33 @@ function ItemFn<TTag extends ElementType = typeof DEFAULT_ITEM_TAG>(
 
 // ---
 
-interface ComponentMenu extends HasDisplayName {
+export interface _internal_ComponentMenu extends HasDisplayName {
   <TTag extends ElementType = typeof DEFAULT_MENU_TAG>(
     props: MenuProps<TTag> & RefProp<typeof MenuFn>
   ): JSX.Element
 }
 
-interface ComponentMenuButton extends HasDisplayName {
+export interface _internal_ComponentMenuButton extends HasDisplayName {
   <TTag extends ElementType = typeof DEFAULT_BUTTON_TAG>(
     props: MenuButtonProps<TTag> & RefProp<typeof ButtonFn>
   ): JSX.Element
 }
 
-interface ComponentMenuItems extends HasDisplayName {
+export interface _internal_ComponentMenuItems extends HasDisplayName {
   <TTag extends ElementType = typeof DEFAULT_ITEMS_TAG>(
     props: MenuItemsProps<TTag> & RefProp<typeof ItemsFn>
   ): JSX.Element
 }
 
-interface ComponentMenuItem extends HasDisplayName {
+export interface _internal_ComponentMenuItem extends HasDisplayName {
   <TTag extends ElementType = typeof DEFAULT_ITEM_TAG>(
     props: MenuItemProps<TTag> & RefProp<typeof ItemFn>
   ): JSX.Element
 }
 
-let MenuRoot = forwardRefWithAs(MenuFn) as unknown as ComponentMenu
-let Button = forwardRefWithAs(ButtonFn) as unknown as ComponentMenuButton
-let Items = forwardRefWithAs(ItemsFn) as unknown as ComponentMenuItems
-let Item = forwardRefWithAs(ItemFn) as unknown as ComponentMenuItem
+let MenuRoot = forwardRefWithAs(MenuFn) as unknown as _internal_ComponentMenu
+let Button = forwardRefWithAs(ButtonFn) as unknown as _internal_ComponentMenuButton
+let Items = forwardRefWithAs(ItemsFn) as unknown as _internal_ComponentMenuItems
+let Item = forwardRefWithAs(ItemFn) as unknown as _internal_ComponentMenuItem
 
 export let Menu = Object.assign(MenuRoot, { Button, Items, Item })
diff --git a/packages/@headlessui-react/src/components/popover/popover.tsx b/packages/@headlessui-react/src/components/popover/popover.tsx
@@ -1052,40 +1052,40 @@ function GroupFn<TTag extends ElementType = typeof DEFAULT_PANEL_TAG>(
 
 // ---
 
-interface ComponentPopover extends HasDisplayName {
+export interface _internal_ComponentPopover extends HasDisplayName {
   <TTag extends ElementType = typeof DEFAULT_POPOVER_TAG>(
     props: PopoverProps<TTag> & RefProp<typeof PopoverFn>
   ): JSX.Element
 }
 
-interface ComponentPopoverButton extends HasDisplayName {
+export interface _internal_ComponentPopoverButton extends HasDisplayName {
   <TTag extends ElementType = typeof DEFAULT_BUTTON_TAG>(
     props: PopoverButtonProps<TTag> & RefProp<typeof ButtonFn>
   ): JSX.Element
 }
 
-interface ComponentPopoverOverlay extends HasDisplayName {
+export interface _internal_ComponentPopoverOverlay extends HasDisplayName {
   <TTag extends ElementType = typeof DEFAULT_OVERLAY_TAG>(
     props: PopoverOverlayProps<TTag> & RefProp<typeof OverlayFn>
   ): JSX.Element
 }
 
-interface ComponentPopoverPanel extends HasDisplayName {
+export interface _internal_ComponentPopoverPanel extends HasDisplayName {
   <TTag extends ElementType = typeof DEFAULT_PANEL_TAG>(
     props: PopoverPanelProps<TTag> & RefProp<typeof PanelFn>
   ): JSX.Element
 }
 
-interface ComponentPopoverGroup extends HasDisplayName {
+export interface _internal_ComponentPopoverGroup extends HasDisplayName {
   <TTag extends ElementType = typeof DEFAULT_GROUP_TAG>(
     props: PopoverGroupProps<TTag> & RefProp<typeof GroupFn>
   ): JSX.Element
 }
 
-let PopoverRoot = forwardRefWithAs(PopoverFn) as unknown as ComponentPopover
-let Button = forwardRefWithAs(ButtonFn) as unknown as ComponentPopoverButton
-let Overlay = forwardRefWithAs(OverlayFn) as unknown as ComponentPopoverOverlay
-let Panel = forwardRefWithAs(PanelFn) as unknown as ComponentPopoverPanel
-let Group = forwardRefWithAs(GroupFn) as unknown as ComponentPopoverGroup
+let PopoverRoot = forwardRefWithAs(PopoverFn) as unknown as _internal_ComponentPopover
+let Button = forwardRefWithAs(ButtonFn) as unknown as _internal_ComponentPopoverButton
+let Overlay = forwardRefWithAs(OverlayFn) as unknown as _internal_ComponentPopoverOverlay
+let Panel = forwardRefWithAs(PanelFn) as unknown as _internal_ComponentPopoverPanel
+let Group = forwardRefWithAs(GroupFn) as unknown as _internal_ComponentPopoverGroup
 
 export let Popover = Object.assign(PopoverRoot, { Button, Overlay, Panel, Group })
diff --git a/packages/@headlessui-react/src/components/portal/portal.tsx b/packages/@headlessui-react/src/components/portal/portal.tsx
@@ -213,19 +213,19 @@ export function useNestedPortals() {
 
 // ---
 
-interface ComponentPortal extends HasDisplayName {
+export interface _internal_ComponentPortal extends HasDisplayName {
   <TTag extends ElementType = typeof DEFAULT_PORTAL_TAG>(
     props: PortalProps<TTag> & RefProp<typeof PortalFn>
   ): JSX.Element
 }
 
-interface ComponentPortalGroup extends HasDisplayName {
+export interface _internal_ComponentPortalGroup extends HasDisplayName {
   <TTag extends ElementType = typeof DEFAULT_GROUP_TAG>(
     props: PortalGroupProps<TTag> & RefProp<typeof GroupFn>
   ): JSX.Element
 }
 
-let PortalRoot = forwardRefWithAs(PortalFn) as unknown as ComponentPortal
-let Group = forwardRefWithAs(GroupFn) as unknown as ComponentPortalGroup
+let PortalRoot = forwardRefWithAs(PortalFn) as unknown as _internal_ComponentPortal
+let Group = forwardRefWithAs(GroupFn) as unknown as _internal_ComponentPortalGroup
 
 export let Portal = Object.assign(PortalRoot, { Group })