Level: {level}
@@ -1850,12 +1587,11 @@ describe('Nesting', () => {
}
it.each`
- strategy | when | action
- ${'with `Escape`'} | ${'mounted'} | ${() => press(Keys.Escape)}
- ${'with `Outside Click`'} | ${'mounted'} | ${() => click(document.body)}
- ${'with `Click on Dialog.Overlay`'} | ${'mounted'} | ${() => click(getDialogOverlays().pop()!)}
- ${'with `Escape`'} | ${'always'} | ${() => press(Keys.Escape)}
- ${'with `Outside Click`'} | ${'always'} | ${() => click(document.body)}
+ strategy | when | action
+ ${'with `Escape`'} | ${'mounted'} | ${() => press(Keys.Escape)}
+ ${'with `Outside Click`'} | ${'mounted'} | ${() => click(document.body)}
+ ${'with `Escape`'} | ${'always'} | ${() => press(Keys.Escape)}
+ ${'with `Outside Click`'} | ${'always'} | ${() => click(document.body)}
`(
'should be possible to open nested Dialog components (visible when $when) and close them $strategy',
async ({ when, action }) => {
diff --git a/packages/@headlessui-react/src/components/dialog/dialog.tsx b/packages/@headlessui-react/src/components/dialog/dialog.tsx
index 9b1330d..db93e77 100644
--- a/packages/@headlessui-react/src/components/dialog/dialog.tsx
+++ b/packages/@headlessui-react/src/components/dialog/dialog.tsx
@@ -35,7 +35,6 @@ import { State, useOpenClosed } from '../../internal/open-closed'
import { ForcePortalRoot } from '../../internal/portal-force-root'
import { StackMessage, StackProvider } from '../../internal/stack-context'
import type { Props } from '../../types'
-import { isDisabledReactIssue7711 } from '../../utils/bugs'
import { match } from '../../utils/match'
import {
RenderFeatures,
@@ -426,115 +425,6 @@ function DialogFn
(
// ---
-let DEFAULT_OVERLAY_TAG = 'div' as const
-type OverlayRenderPropArg = {
- open: boolean
-}
-type OverlayPropsWeControl = 'aria-hidden'
-
-export type DialogOverlayProps = Props<
- TTag,
- OverlayRenderPropArg,
- OverlayPropsWeControl
->
-
-function OverlayFn(
- props: DialogOverlayProps,
- ref: Ref
-) {
- let internalId = useId()
- let { id = `headlessui-dialog-overlay-${internalId}`, ...theirProps } = props
- let [{ dialogState, close }] = useDialogContext('Dialog.Overlay')
- let overlayRef = useSyncRefs(ref)
-
- let handleClick = useEvent((event: ReactMouseEvent) => {
- if (event.target !== event.currentTarget) return
- if (isDisabledReactIssue7711(event.currentTarget)) return event.preventDefault()
- event.preventDefault()
- event.stopPropagation()
- close()
- })
-
- let slot = useMemo(
- () => ({ open: dialogState === DialogStates.Open }) satisfies OverlayRenderPropArg,
- [dialogState]
- )
-
- let ourProps = {
- ref: overlayRef,
- id,
- 'aria-hidden': true,
- onClick: handleClick,
- }
-
- return render({
- ourProps,
- theirProps,
- slot,
- defaultTag: DEFAULT_OVERLAY_TAG,
- name: 'Dialog.Overlay',
- })
-}
-
-// ---
-
-let DEFAULT_BACKDROP_TAG = 'div' as const
-type BackdropRenderPropArg = {
- open: boolean
-}
-type BackdropPropsWeControl = 'aria-hidden'
-
-export type DialogBackdropProps = Props<
- TTag,
- BackdropRenderPropArg,
- BackdropPropsWeControl
->
-
-function BackdropFn(
- props: DialogBackdropProps,
- ref: Ref
-) {
- let internalId = useId()
- let { id = `headlessui-dialog-backdrop-${internalId}`, ...theirProps } = props
- let [{ dialogState }, state] = useDialogContext('Dialog.Backdrop')
- let backdropRef = useSyncRefs(ref)
-
- useEffect(() => {
- if (state.panelRef.current === null) {
- throw new Error(
- `A component is being used, but a component is missing.`
- )
- }
- }, [state.panelRef])
-
- let slot = useMemo(
- () => ({ open: dialogState === DialogStates.Open }) satisfies BackdropRenderPropArg,
- [dialogState]
- )
-
- let ourProps = {
- ref: backdropRef,
- id,
- 'aria-hidden': true,
- }
-
- return (
-
-
- {render({
- ourProps,
- theirProps,
- slot,
- defaultTag: DEFAULT_BACKDROP_TAG,
- name: 'Dialog.Backdrop',
- })}
-
-
- )
-}
-
-// ---
-
let DEFAULT_PANEL_TAG = 'div' as const
type PanelRenderPropArg = {
open: boolean
@@ -631,24 +521,12 @@ export interface _internal_ComponentDialog extends HasDisplayName {
): JSX.Element
}
-export interface _internal_ComponentDialogBackdrop extends HasDisplayName {
- (
- props: DialogBackdropProps & RefProp
- ): JSX.Element
-}
-
export interface _internal_ComponentDialogPanel extends HasDisplayName {
(
props: DialogPanelProps & RefProp
): JSX.Element
}
-export interface _internal_ComponentDialogOverlay extends HasDisplayName {
- (
- props: DialogOverlayProps & RefProp
- ): JSX.Element
-}
-
export interface _internal_ComponentDialogTitle extends HasDisplayName {
(
props: DialogTitleProps & RefProp
@@ -659,21 +537,15 @@ export interface _internal_ComponentDialogDescription extends _internal_Componen
let DialogRoot = forwardRefWithAs(DialogFn) as _internal_ComponentDialog
/** @deprecated use a plain `` instead of `
` */
-export let DialogBackdrop = forwardRefWithAs(BackdropFn) as _internal_ComponentDialogBackdrop
export let DialogPanel = forwardRefWithAs(PanelFn) as _internal_ComponentDialogPanel
/** @deprecated use a plain `` instead of `
` */
-export let DialogOverlay = forwardRefWithAs(OverlayFn) as _internal_ComponentDialogOverlay
export let DialogTitle = forwardRefWithAs(TitleFn) as _internal_ComponentDialogTitle
/** @deprecated use `` instead of `` */
export let DialogDescription = Description as _internal_ComponentDialogDescription
export let Dialog = Object.assign(DialogRoot, {
- /** @deprecated use a plain `` instead of `
` */
- Backdrop: DialogBackdrop,
/** @deprecated use `` instead of `` */
Panel: DialogPanel,
- /** @deprecated use a plain `` instead of `
` */
- Overlay: DialogOverlay,
/** @deprecated use `` instead of `` */
Title: DialogTitle,
/** @deprecated use `` instead of `` */
diff --git a/packages/@headlessui-react/src/index.test.ts b/packages/@headlessui-react/src/index.test.ts
index 02082ce..ea86956 100644
--- a/packages/@headlessui-react/src/index.test.ts
+++ b/packages/@headlessui-react/src/index.test.ts
@@ -24,9 +24,7 @@ it('should expose the correct components', () => {
'Description',
'Dialog',
- 'DialogBackdrop',
'DialogDescription',
- 'DialogOverlay',
'DialogPanel',
'DialogTitle',
diff --git a/packages/@headlessui-react/src/test-utils/accessibility-assertions.ts b/packages/@headlessui-react/src/test-utils/accessibility-assertions.ts
index f48e303..c364e72 100644
--- a/packages/@headlessui-react/src/test-utils/accessibility-assertions.ts
+++ b/packages/@headlessui-react/src/test-utils/accessibility-assertions.ts
@@ -1490,18 +1490,6 @@ export function getDialogDescription(): HTMLElement | null {
return document.querySelector('[id^="headlessui-description-"]')
}
-export function getDialogOverlay(): HTMLElement | null {
- return document.querySelector('[id^="headlessui-dialog-overlay-"]')
-}
-
-export function getDialogBackdrop(): HTMLElement | null {
- return document.querySelector('[id^="headlessui-dialog-backdrop-"]')
-}
-
-export function getDialogOverlays(): HTMLElement[] {
- return Array.from(document.querySelectorAll('[id^="headlessui-dialog-overlay-"]'))
-}
-
// ---
export enum DialogState {
@@ -1682,53 +1670,6 @@ export function assertDialogDescription(
}
}
-export function assertDialogOverlay(
- options: {
- attributes?: Record
- textContent?: string
- state: DialogState
- },
- overlay = getDialogOverlay()
-) {
- try {
- switch (options.state) {
- case DialogState.InvisibleHidden:
- if (overlay === null) return expect(overlay).not.toBe(null)
-
- assertHidden(overlay)
-
- if (options.textContent) expect(overlay).toHaveTextContent(options.textContent)
-
- for (let attributeName in options.attributes) {
- expect(overlay).toHaveAttribute(attributeName, options.attributes[attributeName])
- }
- break
-
- case DialogState.Visible:
- if (overlay === null) return expect(overlay).not.toBe(null)
-
- assertVisible(overlay)
-
- if (options.textContent) expect(overlay).toHaveTextContent(options.textContent)
-
- for (let attributeName in options.attributes) {
- expect(overlay).toHaveAttribute(attributeName, options.attributes[attributeName])
- }
- break
-
- case DialogState.InvisibleUnmounted:
- expect(overlay).toBe(null)
- break
-
- default:
- assertNever(options.state)
- }
- } catch (err) {
- if (err instanceof Error) Error.captureStackTrace(err, assertDialogOverlay)
- throw err
- }
-}
-
// ---
export function getRadioGroup(): HTMLElement | null {
diff --git a/playgrounds/react/pages/dialog/dialog.tsx b/playgrounds/react/pages/dialog/dialog.tsx
index c6a5f2f..3ceb653 100644
--- a/playgrounds/react/pages/dialog/dialog.tsx
+++ b/playgrounds/react/pages/dialog/dialog.tsx
@@ -21,8 +21,8 @@ function Nested({ onClose, level = 0 }) {
return (
<>