From 9ae054ec12e20fb9b9a95cb4bde95a745ee29c44 Mon Sep 17 00:00:00 2001 From: Jordan Pittman Date: Thu, 20 Jun 2024 15:18:31 -0400 Subject: [PATCH] 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 --------- Co-authored-by: Jonathan Reinink --- packages/@headlessui-react/CHANGELOG.md | 1 + .../popover-backdrop/popover-backdrop.tsx | 3 + .../src/components/popover/popover.test.tsx | 3 +- .../src/components/popover/popover.tsx | 59 +++++++++++-------- packages/@headlessui-react/src/index.test.ts | 1 + .../test-utils/accessibility-assertions.ts | 2 +- 6 files changed, 43 insertions(+), 26 deletions(-) create mode 100644 packages/@headlessui-react/src/components/popover-backdrop/popover-backdrop.tsx diff --git a/packages/@headlessui-react/CHANGELOG.md b/packages/@headlessui-react/CHANGELOG.md index f98ab27dde..cb732bf295 100644 --- a/packages/@headlessui-react/CHANGELOG.md +++ b/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 `` component ([#3307](https://github.com/tailwindlabs/headlessui/pull/3307)) - Re-introduce `` component ([#3307](https://github.com/tailwindlabs/headlessui/pull/3307)) +- Added `PopoverBackdrop` component to replace `PopoverOverlay` ([#3308](https://github.com/tailwindlabs/headlessui/pull/3308)) ### Fixed diff --git a/packages/@headlessui-react/src/components/popover-backdrop/popover-backdrop.tsx b/packages/@headlessui-react/src/components/popover-backdrop/popover-backdrop.tsx new file mode 100644 index 0000000000..05cd30b7ef --- /dev/null +++ b/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' diff --git a/packages/@headlessui-react/src/components/popover/popover.test.tsx b/packages/@headlessui-react/src/components/popover/popover.test.tsx index 02a21debab..1ca6e7d747 100644 --- a/packages/@headlessui-react/src/components/popover/popover.test.tsx +++ b/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 ', suppressConsoleLogs((name, Component) => { diff --git a/packages/@headlessui-react/src/components/popover/popover.tsx b/packages/@headlessui-react/src/components/popover/popover.tsx index 67826d7bbd..1310c5d7d0 100644 --- a/packages/@headlessui-react/src/components/popover/popover.tsx +++ b/packages/@headlessui-react/src/components/popover/popover.tsx @@ -724,35 +724,42 @@ function ButtonFn( // --- -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 = Props< +export type PopoverBackdropProps = Props< TTag, - OverlayRenderPropArg, - OverlayPropsWeControl, - { transition?: boolean } & PropsForFeatures + BackdropRenderPropArg, + BackdropPropsWeControl, + { transition?: boolean } & PropsForFeatures > -function OverlayFn( - props: PopoverOverlayProps, +export type PopoverOverlayProps = + PopoverBackdropProps + +function BackdropFn( + props: PopoverBackdropProps, ref: Ref ) { let internalId = useId() - let { id = `headlessui-popover-overlay-${internalId}`, transition = false, ...theirProps } = props - let [{ popoverState }, dispatch] = usePopoverContext('Popover.Overlay') - let internalOverlayRef = useRef(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(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( 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( 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 { - ( - props: PopoverOverlayProps & RefProp +export interface _internal_ComponentPopoverBackdrop extends HasDisplayName { + ( + props: PopoverBackdropProps & RefProp ): 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 `` instead of `` */ +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 `` instead of `` */ Button: PopoverButton, + /** @deprecated use `` instead of `` */ + Backdrop: PopoverBackdrop, /** @deprecated use `` instead of `` */ Overlay: PopoverOverlay, /** @deprecated use `` instead of `` */ diff --git a/packages/@headlessui-react/src/index.test.ts b/packages/@headlessui-react/src/index.test.ts index bcce250176..5a62ba0feb 100644 --- a/packages/@headlessui-react/src/index.test.ts +++ b/packages/@headlessui-react/src/index.test.ts @@ -61,6 +61,7 @@ it('should expose the correct components', () => { 'MenuSeparator', 'Popover', + 'PopoverBackdrop', 'PopoverButton', 'PopoverGroup', 'PopoverOverlay', diff --git a/packages/@headlessui-react/src/test-utils/accessibility-assertions.ts b/packages/@headlessui-react/src/test-utils/accessibility-assertions.ts index c364e72e24..8410a6196a 100644 --- a/packages/@headlessui-react/src/test-utils/accessibility-assertions.ts +++ b/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-"]') } // ---