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 <jonathan@reinink.ca> --------- Co-authored-by: Jonathan Reinink <jonathan@reinink.ca>
2024-06-20 15:18:31 -04:00
parent cf0c535f7e
commit 9ae054ec12
6 changed files with 43 additions and 26 deletions
@@ -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

@@ -0,0 +1,3 @@
+// Next.js barrel file improvements (GENERATED FILE)
+export type * from '../popover/popover'
+export { PopoverBackdrop } from '../popover/popover'
@@ -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) => {
@@ -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>` */
@@ -61,6 +61,7 @@ it('should expose the correct components', () => {
    'MenuSeparator',

    'Popover',
+    'PopoverBackdrop',
    'PopoverButton',
    'PopoverGroup',
    'PopoverOverlay',
@@ -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-"]')
 }

 // ---