Rename PopoverOverlay to PopoverBackdrop (#3308)

* Rename `PopoverOverlay` to `PopoverBackdrop`

We're aliasing `PopoverOverlay` to `PopoverBackdrop` and `PopoverOverlayProps` to `PopoverBackdropProps` for backwards compatability.

* Update changelog

* Update packages/@headlessui-react/CHANGELOG.md

Co-authored-by: Jonathan Reinink <[email protected]>

---------

Co-authored-by: Jonathan Reinink <[email protected]>

Author: thecrypticace

packages/@headlessui-react/CHANGELOG.md

@@ -13,6 +13,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Add CSS based transitions using `data-*` attributes ([#3273](https://github.com/tailwindlabs/headlessui/pull/3273), [#3285](https://github.com/tailwindlabs/headlessui/pull/3285))
 - Add a `transition` prop to `<Dialog />` component ([#3307](https://github.com/tailwindlabs/headlessui/pull/3307))
 - Re-introduce `<DialogBackdrop />` component ([#3307](https://github.com/tailwindlabs/headlessui/pull/3307))
+- Added `PopoverBackdrop` component to replace `PopoverOverlay` ([#3308](https://github.com/tailwindlabs/headlessui/pull/3308))
 
 ### Fixed
 

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

@@ -0,0 +1,3 @@
+// Next.js barrel file improvements (GENERATED FILE)
+export type * from '../popover/popover'
+export { PopoverBackdrop } from '../popover/popover'

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

@@ -36,7 +36,8 @@ describe('Safe guards', () => {
   it.each([
     ['Popover.Button', Popover.Button],
     ['Popover.Panel', Popover.Panel],
-    ['Popover.Overlay', Popover.Overlay],
+    ['Popover.Backdrop', Popover.Backdrop],
+    ['Popover.Backdrop', Popover.Overlay],
   ])(
     'should error when we are using a <%s /> without a parent <Popover />',
     suppressConsoleLogs((name, Component) => {

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

@@ -724,35 +724,42 @@ function ButtonFn<TTag extends ElementType = typeof DEFAULT_BUTTON_TAG>(
 
 // ---
 
-let DEFAULT_OVERLAY_TAG = 'div' as const
-type OverlayRenderPropArg = {
+let DEFAULT_BACKDROP_TAG = 'div' as const
+type BackdropRenderPropArg = {
   open: boolean
 } & TransitionData
-type OverlayPropsWeControl = 'aria-hidden'
+type BackdropPropsWeControl = 'aria-hidden'
 
-let OverlayRenderFeatures = RenderFeatures.RenderStrategy | RenderFeatures.Static
+let BackdropRenderFeatures = RenderFeatures.RenderStrategy | RenderFeatures.Static
 
-export type PopoverOverlayProps<TTag extends ElementType = typeof DEFAULT_OVERLAY_TAG> = Props<
+export type PopoverBackdropProps<TTag extends ElementType = typeof DEFAULT_BACKDROP_TAG> = Props<
   TTag,
-  OverlayRenderPropArg,
-  OverlayPropsWeControl,
-  { transition?: boolean } & PropsForFeatures<typeof OverlayRenderFeatures>
+  BackdropRenderPropArg,
+  BackdropPropsWeControl,
+  { transition?: boolean } & PropsForFeatures<typeof BackdropRenderFeatures>
 >
 
-function OverlayFn<TTag extends ElementType = typeof DEFAULT_OVERLAY_TAG>(
-  props: PopoverOverlayProps<TTag>,
+export type PopoverOverlayProps<TTag extends ElementType = typeof DEFAULT_BACKDROP_TAG> =
+  PopoverBackdropProps<TTag>
+
+function BackdropFn<TTag extends ElementType = typeof DEFAULT_BACKDROP_TAG>(
+  props: PopoverBackdropProps<TTag>,
   ref: Ref<HTMLElement>
 ) {
   let internalId = useId()
-  let { id = `headlessui-popover-overlay-${internalId}`, transition = false, ...theirProps } = props
-  let [{ popoverState }, dispatch] = usePopoverContext('Popover.Overlay')
-  let internalOverlayRef = useRef<HTMLElement | null>(null)
-  let overlayRef = useSyncRefs(ref, internalOverlayRef)
+  let {
+    id = `headlessui-popover-backdrop-${internalId}`,
+    transition = false,
+    ...theirProps
+  } = props
+  let [{ popoverState }, dispatch] = usePopoverContext('Popover.Backdrop')
+  let internalBackdropRef = useRef<HTMLElement | null>(null)
+  let backdropRef = useSyncRefs(ref, internalBackdropRef)
 
   let usesOpenClosedState = useOpenClosed()
   let [visible, transitionData] = useTransition(
     transition,
-    internalOverlayRef,
+    internalBackdropRef,
     usesOpenClosedState !== null
       ? (usesOpenClosedState & State.Open) === State.Open
       : popoverState === PopoverStates.Open
@@ -767,11 +774,11 @@ function OverlayFn<TTag extends ElementType = typeof DEFAULT_OVERLAY_TAG>(
     return {
       open: popoverState === PopoverStates.Open,
       ...transitionData,
-    } satisfies OverlayRenderPropArg
+    } satisfies BackdropRenderPropArg
   }, [popoverState, transitionData])
 
   let ourProps = {
-    ref: overlayRef,
+    ref: backdropRef,
     id,
     'aria-hidden': true,
     onClick: handleClick,
@@ -781,10 +788,10 @@ function OverlayFn<TTag extends ElementType = typeof DEFAULT_OVERLAY_TAG>(
     ourProps,
     theirProps,
     slot,
-    defaultTag: DEFAULT_OVERLAY_TAG,
-    features: OverlayRenderFeatures,
+    defaultTag: DEFAULT_BACKDROP_TAG,
+    features: BackdropRenderFeatures,
     visible,
-    name: 'Popover.Overlay',
+    name: 'Popover.Backdrop',
   })
 }
 
@@ -1187,9 +1194,9 @@ export interface _internal_ComponentPopoverButton extends HasDisplayName {
   ): JSX.Element
 }
 
-export interface _internal_ComponentPopoverOverlay extends HasDisplayName {
-  <TTag extends ElementType = typeof DEFAULT_OVERLAY_TAG>(
-    props: PopoverOverlayProps<TTag> & RefProp<typeof OverlayFn>
+export interface _internal_ComponentPopoverBackdrop extends HasDisplayName {
+  <TTag extends ElementType = typeof DEFAULT_BACKDROP_TAG>(
+    props: PopoverBackdropProps<TTag> & RefProp<typeof BackdropFn>
   ): JSX.Element
 }
 
@@ -1207,13 +1214,17 @@ export interface _internal_ComponentPopoverGroup extends HasDisplayName {
 
 let PopoverRoot = forwardRefWithAs(PopoverFn) as _internal_ComponentPopover
 export let PopoverButton = forwardRefWithAs(ButtonFn) as _internal_ComponentPopoverButton
-export let PopoverOverlay = forwardRefWithAs(OverlayFn) as _internal_ComponentPopoverOverlay
+/** @deprecated use `<PopoverBackdrop>` instead of `<PopoverOverlay>` */
+export let PopoverOverlay = forwardRefWithAs(BackdropFn) as _internal_ComponentPopoverBackdrop
+export let PopoverBackdrop = forwardRefWithAs(BackdropFn) as _internal_ComponentPopoverBackdrop
 export let PopoverPanel = forwardRefWithAs(PanelFn) as _internal_ComponentPopoverPanel
 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 `<PopoverBackdrop>` instead of `<Popover.Backdrop>` */
+  Backdrop: PopoverBackdrop,
   /** @deprecated use `<PopoverOverlay>` instead of `<Popover.Overlay>` */
   Overlay: PopoverOverlay,
   /** @deprecated use `<PopoverPanel>` instead of `<Popover.Panel>` */

packages/@headlessui-react/src/index.test.ts

@@ -61,6 +61,7 @@ it('should expose the correct components', () => {
     'MenuSeparator',
 
     'Popover',
+    'PopoverBackdrop',
     'PopoverButton',
     'PopoverGroup',
     'PopoverOverlay',

packages/@headlessui-react/src/test-utils/accessibility-assertions.ts

@@ -1326,7 +1326,7 @@ export function getPopoverPanel(): HTMLElement | null {
 }
 
 export function getPopoverOverlay(): HTMLElement | null {
-  return document.querySelector('[id^="headlessui-popover-overlay-"]')
+  return document.querySelector('[id^="headlessui-popover-backdrop-"]')
 }
 
 // ---