Deprecate dot notation (#3170)

* Expose new components under dot notation

Most of them already where so only a couple were missing.

* Deprecate dot notation

* Add deprecation to `RadioGroupOption`

* Update deprecations

* Update changelog

* Update changelog

packages/@headlessui-react/CHANGELOG.md

@@ -45,6 +45,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Change default tags for `ListboxOptions`, `ListboxOption`, `ComboboxOptions`, `ComboboxOption` and `TabGroup` components ([#3109](https://github.com/tailwindlabs/headlessui/pull/3109))
 - Change default tag from `div` to `Fragment` on `Transition` components ([#3110](https://github.com/tailwindlabs/headlessui/pull/3110))
 - Update minimal peer dependency version requirements for `react` and `react-dom` ([#3131](https://github.com/tailwindlabs/headlessui/pull/3131))
+- Deprecate dot notation for components ([#2887](https://github.com/tailwindlabs/headlessui/pull/2887), [#3170](https://github.com/tailwindlabs/headlessui/pull/3170))
 
 ### Added
 

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

@@ -1971,10 +1971,14 @@ export let ComboboxOptions = forwardRefWithAs(OptionsFn) as _internal_ComponentC
 export let ComboboxOption = forwardRefWithAs(OptionFn) as _internal_ComponentComboboxOption
 
 export let Combobox = Object.assign(ComboboxRoot, {
+  /** @deprecated use `<ComboboxInput>` instead of `<Combobox.Input>` */
   Input: ComboboxInput,
+  /** @deprecated use `<ComboboxButton>` instead of `<Combobox.Button>` */
   Button: ComboboxButton,
   /** @deprecated use `<Label>` instead of `<Combobox.Label>` */
   Label: ComboboxLabel,
+  /** @deprecated use `<ComboboxOptions>` instead of `<Combobox.Options>` */
   Options: ComboboxOptions,
+  /** @deprecated use `<ComboboxOption>` instead of `<Combobox.Option>` */
   Option: ComboboxOption,
 })

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

@@ -658,17 +658,23 @@ export interface _internal_ComponentDialogTitle extends HasDisplayName {
 export interface _internal_ComponentDialogDescription extends _internal_ComponentDescription {}
 
 let DialogRoot = forwardRefWithAs(DialogFn) as _internal_ComponentDialog
+/** @deprecated use a plain `<div>` instead of `<DialogBackdrop>` */
 export let DialogBackdrop = forwardRefWithAs(BackdropFn) as _internal_ComponentDialogBackdrop
 export let DialogPanel = forwardRefWithAs(PanelFn) as _internal_ComponentDialogPanel
+/** @deprecated use a plain `<div>` instead of `<DialogOverlay>` */
 export let DialogOverlay = forwardRefWithAs(OverlayFn) as _internal_ComponentDialogOverlay
 export let DialogTitle = forwardRefWithAs(TitleFn) as _internal_ComponentDialogTitle
 /** @deprecated use `<Description>` instead of `<DialogDescription>` */
 export let DialogDescription = Description as _internal_ComponentDialogDescription
 
 export let Dialog = Object.assign(DialogRoot, {
+  /** @deprecated use a plain `<div>` instead of `<Dialog.Backdrop>` */
   Backdrop: DialogBackdrop,
+  /** @deprecated use `<DialogPanel>` instead of `<Dialog.Panel>` */
   Panel: DialogPanel,
+  /** @deprecated use a plain `<div>` instead of `<Dialog.Overlay>` */
   Overlay: DialogOverlay,
+  /** @deprecated use `<DialogTitle>` instead of `<Dialog.Title>` */
   Title: DialogTitle,
   /** @deprecated use `<Description>` instead of `<Dialog.Description>` */
   Description: Description as _internal_ComponentDialogDescription,

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

@@ -514,6 +514,8 @@ export let DisclosureButton = forwardRefWithAs(ButtonFn) as _internal_ComponentD
 export let DisclosurePanel = forwardRefWithAs(PanelFn) as _internal_ComponentDisclosurePanel
 
 export let Disclosure = Object.assign(DisclosureRoot, {
+  /** @deprecated use `<DisclosureButton>` instead of `<Disclosure.Button>` */
   Button: DisclosureButton,
+  /** @deprecated use `<DisclosurePanel>` instead of `<Disclosure.Panel>` */
   Panel: DisclosurePanel,
 })

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

@@ -233,6 +233,7 @@ export interface _internal_ComponentFocusTrap extends HasDisplayName {
 let FocusTrapRoot = forwardRefWithAs(FocusTrapFn) as _internal_ComponentFocusTrap
 
 export let FocusTrap = Object.assign(FocusTrapRoot, {
+  /** @deprecated use `FocusTrapFeatures` instead of `FocusTrap.features` */
   features: FocusTrapFeatures,
 })
 

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

@@ -1403,9 +1403,14 @@ export let ListboxSelectedOption = forwardRefWithAs(
 ) as _internal_ComponentListboxSelectedOption
 
 export let Listbox = Object.assign(ListboxRoot, {
+  /** @deprecated use `<ListboxButton>` instead of `<Listbox.Button>` */
   Button: ListboxButton,
   /** @deprecated use `<Label>` instead of `<Listbox.Label>` */
   Label: ListboxLabel,
+  /** @deprecated use `<ListboxOptions>` instead of `<Listbox.Options>` */
   Options: ListboxOptions,
+  /** @deprecated use `<ListboxOption>` instead of `<Listbox.Option>` */
   Option: ListboxOption,
+  /** @deprecated use `<ListboxSelectedOption>` instead of `<Listbox.SelectedOption>` */
+  SelectedOption: ListboxSelectedOption,
 })

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

@@ -1109,10 +1109,16 @@ export let MenuHeading = forwardRefWithAs(HeadingFn) as _internal_ComponentMenuH
 export let MenuSeparator = forwardRefWithAs(SeparatorFn) as _internal_ComponentMenuSeparator
 
 export let Menu = Object.assign(MenuRoot, {
+  /** @deprecated use `<MenuButton>` instead of `<Menu.Button>` */
   Button: MenuButton,
+  /** @deprecated use `<MenuItems>` instead of `<Menu.Items>` */
   Items: MenuItems,
+  /** @deprecated use `<MenuItem>` instead of `<Menu.Item>` */
   Item: MenuItem,
+  /** @deprecated use `<MenuSection>` instead of `<Menu.Section>` */
   Section: MenuSection,
+  /** @deprecated use `<MenuHeading>` instead of `<Menu.Heading>` */
   Heading: MenuHeading,
+  /** @deprecated use `<MenuSeparator>` instead of `<Menu.Separator>` */
   Separator: MenuSeparator,
 })

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

@@ -1189,8 +1189,12 @@ export let PopoverPanel = forwardRefWithAs(PanelFn) as _internal_ComponentPopove
 export let PopoverGroup = forwardRefWithAs(GroupFn) as _internal_ComponentPopoverGroup
 
 export let Popover = Object.assign(PopoverRoot, {
+  /** @deprecated use `<PopoverButton>` instead of `<Popover.Button>` */
   Button: PopoverButton,
+  /** @deprecated use `<PopoverOverlay>` instead of `<Popover.Overlay>` */
   Overlay: PopoverOverlay,
+  /** @deprecated use `<PopoverPanel>` instead of `<Popover.Panel>` */
   Panel: PopoverPanel,
+  /** @deprecated use `<PopoverGroup>` instead of `<Popover.Group>` */
   Group: PopoverGroup,
 })

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

@@ -261,4 +261,7 @@ export interface _internal_ComponentPortalGroup extends HasDisplayName {
 let PortalRoot = forwardRefWithAs(PortalFn) as unknown as _internal_ComponentPortal
 export let PortalGroup = forwardRefWithAs(GroupFn) as _internal_ComponentPortalGroup
 
-export let Portal = Object.assign(PortalRoot, { Group: PortalGroup })
+export let Portal = Object.assign(PortalRoot, {
+  /** @deprecated use `<PortalGroup>` instead of `<Portal.Group>` */
+  Group: PortalGroup,
+})

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

@@ -588,6 +588,7 @@ export interface _internal_ComponentRadioLabel extends _internal_ComponentLabel
 export interface _internal_ComponentRadioDescription extends _internal_ComponentDescription {}
 
 let RadioGroupRoot = forwardRefWithAs(RadioGroupFn) as _internal_ComponentRadioGroup
+/** @deprecated use `<Radio>` instead of `<RadioGroupOption>` */
 export let RadioGroupOption = forwardRefWithAs(OptionFn) as _internal_ComponentRadioOption
 export let Radio = forwardRefWithAs(RadioFn) as _internal_ComponentRadio
 /** @deprecated use `<Label>` instead of `<RadioGroupLabel>` */
@@ -596,7 +597,10 @@ export let RadioGroupLabel = Label as _internal_ComponentRadioLabel
 export let RadioGroupDescription = Description as _internal_ComponentRadioDescription
 
 export let RadioGroup = Object.assign(RadioGroupRoot, {
+  /** @deprecated use `<Radio>` instead of `<RadioGroup.Option>` */
   Option: RadioGroupOption,
+  /** @deprecated use `<Radio>` instead of `<RadioGroup.Radio>` */
+  Radio: Radio,
   /** @deprecated use `<Label>` instead of `<RadioGroup.Label>` */
   Label: RadioGroupLabel,
   /** @deprecated use `<Description>` instead of `<RadioGroup.Description>` */

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

@@ -276,6 +276,7 @@ export let SwitchLabel = Label as _internal_ComponentSwitchLabel
 export let SwitchDescription = Description as _internal_ComponentSwitchDescription
 
 export let Switch = Object.assign(SwitchRoot, {
+  /** @deprecated use `<SwitchGroup>` instead of `<Switch.Group>` */
   Group: SwitchGroup,
   /** @deprecated use `<Label>` instead of `<Switch.Label>` */
   Label: SwitchLabel,

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

@@ -702,8 +702,12 @@ export let TabPanels = forwardRefWithAs(PanelsFn) as _internal_ComponentTabPanel
 export let TabPanel = forwardRefWithAs(PanelFn) as _internal_ComponentTabPanel
 
 export let Tab = Object.assign(TabRoot, {
+  /** @deprecated use `<TabGroup>` instead of `<Tab.Group>` */
   Group: TabGroup,
+  /** @deprecated use `<TabList>` instead of `<Tab.List>` */
   List: TabList,
+  /** @deprecated use `<TabPanels>` instead of `<Tab.Panels>` */
   Panels: TabPanels,
+  /** @deprecated use `<TabPanel>` instead of `<Tab.Panel>` */
   Panel: TabPanel,
 })

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

@@ -675,6 +675,8 @@ let InternalTransitionChild = forwardRefWithAs(
 export let TransitionChild = forwardRefWithAs(ChildFn) as _internal_ComponentTransitionChild
 
 export let Transition = Object.assign(TransitionRoot, {
+  /** @deprecated use `<TransitionChild>` instead of `<Transition.Child>` */
   Child: TransitionChild,
+  /** @deprecated use `<Transition>` instead of `<Transition.Root>` */
   Root: TransitionRoot,
 })