@wordpress/compose 7.42.0 → 7.43.1-next.v.202604091042.0

package/CHANGELOG.md

@@ -2,6 +2,12 @@
 
 ## Unreleased
 
+## 7.43.0 (2026-04-01)
+
+### Bug Fixes
+
+-   `useDialog`: Add `event.stopPropagation()` to the Escape key handler to prevent the event from bubbling to parent overlays ([#76861](https://github.com/WordPress/gutenberg/pull/76861)).
+
 ## 7.42.0 (2026-03-18)
 
 ### New Features

package/build/hooks/use-dialog/index.cjs

@@ -63,6 +63,7 @@ function useDialog(options) {
     node.addEventListener("keydown", (event) => {
       if (event.keyCode === import_keycodes.ESCAPE && !event.defaultPrevented && currentOptions.current?.onClose) {
         event.preventDefault();
+        event.stopPropagation();
         currentOptions.current.onClose();
       }
     });

package/build/hooks/use-dialog/index.cjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/hooks/use-dialog/index.ts"],
-  "sourcesContent": ["/**\n * External dependencies\n */\nimport type { RefCallback, SyntheticEvent } from 'react';\n\n/**\n * WordPress dependencies\n */\nimport { useRef, useEffect, useCallback } from '@wordpress/element';\nimport { ESCAPE } from '@wordpress/keycodes';\n\n/**\n * Internal dependencies\n */\nimport useConstrainedTabbing from '../use-constrained-tabbing';\nimport { useFocusOnMount } from '../use-focus-on-mount';\nimport useFocusReturn from '../use-focus-return';\nimport useFocusOutside from '../use-focus-outside';\nimport useMergeRefs from '../use-merge-refs';\n\ntype DialogOptions = {\n\t/**\n\t * Determines focus behavior when the dialog mounts.\n\t *\n\t * - `\"firstElement\"` focuses the first tabbable element within.\n\t * - `\"firstInputElement\"` focuses the first value control within.\n\t * - `true` focuses the element itself.\n\t * - `false` does nothing and _should not be used unless an accessible\n\t *    substitute behavior is implemented_.\n\t *\n\t * @default 'firstElement'\n\t */\n\tfocusOnMount?: useFocusOnMount.Mode;\n\t/**\n\t * Determines whether tabbing is constrained to within the popover,\n\t * preventing keyboard focus from leaving the popover content without\n\t * explicit focus elsewhere, or whether the popover remains part of the\n\t * wider tab order.\n\t * If no value is passed, it will be derived from `focusOnMount`.\n\t *\n\t * @see focusOnMount\n\t * @default `focusOnMount` !== false\n\t */\n\tconstrainTabbing?: boolean;\n\tonClose?: () => void;\n\t/**\n\t * Use the `onClose` prop instead.\n\t *\n\t * @deprecated\n\t */\n\t__unstableOnClose?: (\n\t\ttype: string | undefined,\n\t\tevent: SyntheticEvent\n\t) => void;\n};\n\ntype useDialogReturn = [\n\tRefCallback< HTMLElement >,\n\tReturnType< typeof useFocusOutside > & Pick< HTMLElement, 'tabIndex' >,\n];\n\n/**\n * Returns a ref and props to apply to a dialog wrapper to enable the following behaviors:\n *  - constrained tabbing.\n *  - focus on mount.\n *  - return focus on unmount.\n *  - focus outside.\n *\n * @param options Dialog Options.\n */\nfunction useDialog( options: DialogOptions ): useDialogReturn {\n\tconst currentOptions = useRef< DialogOptions >( undefined );\n\tconst { constrainTabbing = options.focusOnMount !== false } = options;\n\tuseEffect( () => {\n\t\tcurrentOptions.current = options;\n\t}, Object.values( options ) );\n\tconst constrainedTabbingRef = useConstrainedTabbing();\n\tconst focusOnMountRef = useFocusOnMount( options.focusOnMount );\n\tconst focusReturnRef = useFocusReturn();\n\tconst focusOutsideProps = useFocusOutside( ( event ) => {\n\t\t// This unstable prop  is here only to manage backward compatibility\n\t\t// for the Popover component otherwise, the onClose should be enough.\n\t\tif ( currentOptions.current?.__unstableOnClose ) {\n\t\t\tcurrentOptions.current.__unstableOnClose( 'focus-outside', event );\n\t\t} else if ( currentOptions.current?.onClose ) {\n\t\t\tcurrentOptions.current.onClose();\n\t\t}\n\t} );\n\tconst closeOnEscapeRef = useCallback( ( node: HTMLElement ) => {\n\t\tif ( ! node ) {\n\t\t\treturn;\n\t\t}\n\n\t\tnode.addEventListener( 'keydown', ( event: KeyboardEvent ) => {\n\t\t\t// Close on escape.\n\t\t\tif (\n\t\t\t\tevent.keyCode === ESCAPE &&\n\t\t\t\t! event.defaultPrevented &&\n\t\t\t\tcurrentOptions.current?.onClose\n\t\t\t) {\n\t\t\t\tevent.preventDefault();\n\t\t\t\tcurrentOptions.current.onClose();\n\t\t\t}\n\t\t} );\n\t}, [] );\n\n\treturn [\n\t\tuseMergeRefs( [\n\t\t\tconstrainTabbing ? constrainedTabbingRef : null,\n\t\t\toptions.focusOnMount !== false ? focusReturnRef : null,\n\t\t\toptions.focusOnMount !== false ? focusOnMountRef : null,\n\t\t\tcloseOnEscapeRef,\n\t\t] ),\n\t\t{\n\t\t\t...focusOutsideProps,\n\t\t\ttabIndex: -1,\n\t\t},\n\t];\n}\n\nexport default useDialog;\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAQA,qBAA+C;AAC/C,sBAAuB;AAKvB,qCAAkC;AAClC,gCAAgC;AAChC,8BAA2B;AAC3B,+BAA4B;AAC5B,4BAAyB;AAoDzB,SAAS,UAAW,SAA0C;AAC7D,QAAM,qBAAiB,uBAAyB,MAAU;AAC1D,QAAM,EAAE,mBAAmB,QAAQ,iBAAiB,MAAM,IAAI;AAC9D,gCAAW,MAAM;AAChB,mBAAe,UAAU;AAAA,EAC1B,GAAG,OAAO,OAAQ,OAAQ,CAAE;AAC5B,QAAM,4BAAwB,+BAAAA,SAAsB;AACpD,QAAM,sBAAkB,2CAAiB,QAAQ,YAAa;AAC9D,QAAM,qBAAiB,wBAAAC,SAAe;AACtC,QAAM,wBAAoB,yBAAAC,SAAiB,CAAE,UAAW;AAGvD,QAAK,eAAe,SAAS,mBAAoB;AAChD,qBAAe,QAAQ,kBAAmB,iBAAiB,KAAM;AAAA,IAClE,WAAY,eAAe,SAAS,SAAU;AAC7C,qBAAe,QAAQ,QAAQ;AAAA,IAChC;AAAA,EACD,CAAE;AACF,QAAM,uBAAmB,4BAAa,CAAE,SAAuB;AAC9D,QAAK,CAAE,MAAO;AACb;AAAA,IACD;AAEA,SAAK,iBAAkB,WAAW,CAAE,UAA0B;AAE7D,UACC,MAAM,YAAY,0BAClB,CAAE,MAAM,oBACR,eAAe,SAAS,SACvB;AACD,cAAM,eAAe;AACrB,uBAAe,QAAQ,QAAQ;AAAA,MAChC;AAAA,IACD,CAAE;AAAA,EACH,GAAG,CAAC,CAAE;AAEN,SAAO;AAAA,QACN,sBAAAC,SAAc;AAAA,MACb,mBAAmB,wBAAwB;AAAA,MAC3C,QAAQ,iBAAiB,QAAQ,iBAAiB;AAAA,MAClD,QAAQ,iBAAiB,QAAQ,kBAAkB;AAAA,MACnD;AAAA,IACD,CAAE;AAAA,IACF;AAAA,MACC,GAAG;AAAA,MACH,UAAU;AAAA,IACX;AAAA,EACD;AACD;AAEA,IAAO,qBAAQ;",
+  "sourcesContent": ["/**\n * External dependencies\n */\nimport type { RefCallback, SyntheticEvent } from 'react';\n\n/**\n * WordPress dependencies\n */\nimport { useRef, useEffect, useCallback } from '@wordpress/element';\nimport { ESCAPE } from '@wordpress/keycodes';\n\n/**\n * Internal dependencies\n */\nimport useConstrainedTabbing from '../use-constrained-tabbing';\nimport { useFocusOnMount } from '../use-focus-on-mount';\nimport useFocusReturn from '../use-focus-return';\nimport useFocusOutside from '../use-focus-outside';\nimport useMergeRefs from '../use-merge-refs';\n\ntype DialogOptions = {\n\t/**\n\t * Determines focus behavior when the dialog mounts.\n\t *\n\t * - `\"firstElement\"` focuses the first tabbable element within.\n\t * - `\"firstInputElement\"` focuses the first value control within.\n\t * - `true` focuses the element itself.\n\t * - `false` does nothing and _should not be used unless an accessible\n\t *    substitute behavior is implemented_.\n\t *\n\t * @default 'firstElement'\n\t */\n\tfocusOnMount?: useFocusOnMount.Mode;\n\t/**\n\t * Determines whether tabbing is constrained to within the popover,\n\t * preventing keyboard focus from leaving the popover content without\n\t * explicit focus elsewhere, or whether the popover remains part of the\n\t * wider tab order.\n\t * If no value is passed, it will be derived from `focusOnMount`.\n\t *\n\t * @see focusOnMount\n\t * @default `focusOnMount` !== false\n\t */\n\tconstrainTabbing?: boolean;\n\tonClose?: () => void;\n\t/**\n\t * Use the `onClose` prop instead.\n\t *\n\t * @deprecated\n\t */\n\t__unstableOnClose?: (\n\t\ttype: string | undefined,\n\t\tevent: SyntheticEvent\n\t) => void;\n};\n\ntype useDialogReturn = [\n\tRefCallback< HTMLElement >,\n\tReturnType< typeof useFocusOutside > & Pick< HTMLElement, 'tabIndex' >,\n];\n\n/**\n * Returns a ref and props to apply to a dialog wrapper to enable the following behaviors:\n *  - constrained tabbing.\n *  - focus on mount.\n *  - return focus on unmount.\n *  - focus outside.\n *\n * @param options Dialog Options.\n */\nfunction useDialog( options: DialogOptions ): useDialogReturn {\n\tconst currentOptions = useRef< DialogOptions >( undefined );\n\tconst { constrainTabbing = options.focusOnMount !== false } = options;\n\tuseEffect( () => {\n\t\tcurrentOptions.current = options;\n\t}, Object.values( options ) );\n\tconst constrainedTabbingRef = useConstrainedTabbing();\n\tconst focusOnMountRef = useFocusOnMount( options.focusOnMount );\n\tconst focusReturnRef = useFocusReturn();\n\tconst focusOutsideProps = useFocusOutside( ( event ) => {\n\t\t// This unstable prop  is here only to manage backward compatibility\n\t\t// for the Popover component otherwise, the onClose should be enough.\n\t\tif ( currentOptions.current?.__unstableOnClose ) {\n\t\t\tcurrentOptions.current.__unstableOnClose( 'focus-outside', event );\n\t\t} else if ( currentOptions.current?.onClose ) {\n\t\t\tcurrentOptions.current.onClose();\n\t\t}\n\t} );\n\tconst closeOnEscapeRef = useCallback( ( node: HTMLElement ) => {\n\t\tif ( ! node ) {\n\t\t\treturn;\n\t\t}\n\n\t\tnode.addEventListener( 'keydown', ( event: KeyboardEvent ) => {\n\t\t\t// Close on escape.\n\t\t\tif (\n\t\t\t\tevent.keyCode === ESCAPE &&\n\t\t\t\t! event.defaultPrevented &&\n\t\t\t\tcurrentOptions.current?.onClose\n\t\t\t) {\n\t\t\t\tevent.preventDefault();\n\t\t\t\tevent.stopPropagation();\n\t\t\t\tcurrentOptions.current.onClose();\n\t\t\t}\n\t\t} );\n\t}, [] );\n\n\treturn [\n\t\tuseMergeRefs( [\n\t\t\tconstrainTabbing ? constrainedTabbingRef : null,\n\t\t\toptions.focusOnMount !== false ? focusReturnRef : null,\n\t\t\toptions.focusOnMount !== false ? focusOnMountRef : null,\n\t\t\tcloseOnEscapeRef,\n\t\t] ),\n\t\t{\n\t\t\t...focusOutsideProps,\n\t\t\ttabIndex: -1,\n\t\t},\n\t];\n}\n\nexport default useDialog;\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAQA,qBAA+C;AAC/C,sBAAuB;AAKvB,qCAAkC;AAClC,gCAAgC;AAChC,8BAA2B;AAC3B,+BAA4B;AAC5B,4BAAyB;AAoDzB,SAAS,UAAW,SAA0C;AAC7D,QAAM,qBAAiB,uBAAyB,MAAU;AAC1D,QAAM,EAAE,mBAAmB,QAAQ,iBAAiB,MAAM,IAAI;AAC9D,gCAAW,MAAM;AAChB,mBAAe,UAAU;AAAA,EAC1B,GAAG,OAAO,OAAQ,OAAQ,CAAE;AAC5B,QAAM,4BAAwB,+BAAAA,SAAsB;AACpD,QAAM,sBAAkB,2CAAiB,QAAQ,YAAa;AAC9D,QAAM,qBAAiB,wBAAAC,SAAe;AACtC,QAAM,wBAAoB,yBAAAC,SAAiB,CAAE,UAAW;AAGvD,QAAK,eAAe,SAAS,mBAAoB;AAChD,qBAAe,QAAQ,kBAAmB,iBAAiB,KAAM;AAAA,IAClE,WAAY,eAAe,SAAS,SAAU;AAC7C,qBAAe,QAAQ,QAAQ;AAAA,IAChC;AAAA,EACD,CAAE;AACF,QAAM,uBAAmB,4BAAa,CAAE,SAAuB;AAC9D,QAAK,CAAE,MAAO;AACb;AAAA,IACD;AAEA,SAAK,iBAAkB,WAAW,CAAE,UAA0B;AAE7D,UACC,MAAM,YAAY,0BAClB,CAAE,MAAM,oBACR,eAAe,SAAS,SACvB;AACD,cAAM,eAAe;AACrB,cAAM,gBAAgB;AACtB,uBAAe,QAAQ,QAAQ;AAAA,MAChC;AAAA,IACD,CAAE;AAAA,EACH,GAAG,CAAC,CAAE;AAEN,SAAO;AAAA,QACN,sBAAAC,SAAc;AAAA,MACb,mBAAmB,wBAAwB;AAAA,MAC3C,QAAQ,iBAAiB,QAAQ,iBAAiB;AAAA,MAClD,QAAQ,iBAAiB,QAAQ,kBAAkB;AAAA,MACnD;AAAA,IACD,CAAE;AAAA,IACF;AAAA,MACC,GAAG;AAAA,MACH,UAAU;AAAA,IACX;AAAA,EACD;AACD;AAEA,IAAO,qBAAQ;",
   "names": ["useConstrainedTabbing", "useFocusReturn", "useFocusOutside", "useMergeRefs"]
 }

package/build-module/hooks/use-dialog/index.mjs

@@ -29,6 +29,7 @@ function useDialog(options) {
     node.addEventListener("keydown", (event) => {
       if (event.keyCode === ESCAPE && !event.defaultPrevented && currentOptions.current?.onClose) {
         event.preventDefault();
+        event.stopPropagation();
         currentOptions.current.onClose();
       }
     });

package/build-module/hooks/use-dialog/index.mjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/hooks/use-dialog/index.ts"],
-  "sourcesContent": ["/**\n * External dependencies\n */\nimport type { RefCallback, SyntheticEvent } from 'react';\n\n/**\n * WordPress dependencies\n */\nimport { useRef, useEffect, useCallback } from '@wordpress/element';\nimport { ESCAPE } from '@wordpress/keycodes';\n\n/**\n * Internal dependencies\n */\nimport useConstrainedTabbing from '../use-constrained-tabbing';\nimport { useFocusOnMount } from '../use-focus-on-mount';\nimport useFocusReturn from '../use-focus-return';\nimport useFocusOutside from '../use-focus-outside';\nimport useMergeRefs from '../use-merge-refs';\n\ntype DialogOptions = {\n\t/**\n\t * Determines focus behavior when the dialog mounts.\n\t *\n\t * - `\"firstElement\"` focuses the first tabbable element within.\n\t * - `\"firstInputElement\"` focuses the first value control within.\n\t * - `true` focuses the element itself.\n\t * - `false` does nothing and _should not be used unless an accessible\n\t *    substitute behavior is implemented_.\n\t *\n\t * @default 'firstElement'\n\t */\n\tfocusOnMount?: useFocusOnMount.Mode;\n\t/**\n\t * Determines whether tabbing is constrained to within the popover,\n\t * preventing keyboard focus from leaving the popover content without\n\t * explicit focus elsewhere, or whether the popover remains part of the\n\t * wider tab order.\n\t * If no value is passed, it will be derived from `focusOnMount`.\n\t *\n\t * @see focusOnMount\n\t * @default `focusOnMount` !== false\n\t */\n\tconstrainTabbing?: boolean;\n\tonClose?: () => void;\n\t/**\n\t * Use the `onClose` prop instead.\n\t *\n\t * @deprecated\n\t */\n\t__unstableOnClose?: (\n\t\ttype: string | undefined,\n\t\tevent: SyntheticEvent\n\t) => void;\n};\n\ntype useDialogReturn = [\n\tRefCallback< HTMLElement >,\n\tReturnType< typeof useFocusOutside > & Pick< HTMLElement, 'tabIndex' >,\n];\n\n/**\n * Returns a ref and props to apply to a dialog wrapper to enable the following behaviors:\n *  - constrained tabbing.\n *  - focus on mount.\n *  - return focus on unmount.\n *  - focus outside.\n *\n * @param options Dialog Options.\n */\nfunction useDialog( options: DialogOptions ): useDialogReturn {\n\tconst currentOptions = useRef< DialogOptions >( undefined );\n\tconst { constrainTabbing = options.focusOnMount !== false } = options;\n\tuseEffect( () => {\n\t\tcurrentOptions.current = options;\n\t}, Object.values( options ) );\n\tconst constrainedTabbingRef = useConstrainedTabbing();\n\tconst focusOnMountRef = useFocusOnMount( options.focusOnMount );\n\tconst focusReturnRef = useFocusReturn();\n\tconst focusOutsideProps = useFocusOutside( ( event ) => {\n\t\t// This unstable prop  is here only to manage backward compatibility\n\t\t// for the Popover component otherwise, the onClose should be enough.\n\t\tif ( currentOptions.current?.__unstableOnClose ) {\n\t\t\tcurrentOptions.current.__unstableOnClose( 'focus-outside', event );\n\t\t} else if ( currentOptions.current?.onClose ) {\n\t\t\tcurrentOptions.current.onClose();\n\t\t}\n\t} );\n\tconst closeOnEscapeRef = useCallback( ( node: HTMLElement ) => {\n\t\tif ( ! node ) {\n\t\t\treturn;\n\t\t}\n\n\t\tnode.addEventListener( 'keydown', ( event: KeyboardEvent ) => {\n\t\t\t// Close on escape.\n\t\t\tif (\n\t\t\t\tevent.keyCode === ESCAPE &&\n\t\t\t\t! event.defaultPrevented &&\n\t\t\t\tcurrentOptions.current?.onClose\n\t\t\t) {\n\t\t\t\tevent.preventDefault();\n\t\t\t\tcurrentOptions.current.onClose();\n\t\t\t}\n\t\t} );\n\t}, [] );\n\n\treturn [\n\t\tuseMergeRefs( [\n\t\t\tconstrainTabbing ? constrainedTabbingRef : null,\n\t\t\toptions.focusOnMount !== false ? focusReturnRef : null,\n\t\t\toptions.focusOnMount !== false ? focusOnMountRef : null,\n\t\t\tcloseOnEscapeRef,\n\t\t] ),\n\t\t{\n\t\t\t...focusOutsideProps,\n\t\t\ttabIndex: -1,\n\t\t},\n\t];\n}\n\nexport default useDialog;\n"],
-  "mappings": ";AAQA,SAAS,QAAQ,WAAW,mBAAmB;AAC/C,SAAS,cAAc;AAKvB,OAAO,2BAA2B;AAClC,SAAS,uBAAuB;AAChC,OAAO,oBAAoB;AAC3B,OAAO,qBAAqB;AAC5B,OAAO,kBAAkB;AAoDzB,SAAS,UAAW,SAA0C;AAC7D,QAAM,iBAAiB,OAAyB,MAAU;AAC1D,QAAM,EAAE,mBAAmB,QAAQ,iBAAiB,MAAM,IAAI;AAC9D,YAAW,MAAM;AAChB,mBAAe,UAAU;AAAA,EAC1B,GAAG,OAAO,OAAQ,OAAQ,CAAE;AAC5B,QAAM,wBAAwB,sBAAsB;AACpD,QAAM,kBAAkB,gBAAiB,QAAQ,YAAa;AAC9D,QAAM,iBAAiB,eAAe;AACtC,QAAM,oBAAoB,gBAAiB,CAAE,UAAW;AAGvD,QAAK,eAAe,SAAS,mBAAoB;AAChD,qBAAe,QAAQ,kBAAmB,iBAAiB,KAAM;AAAA,IAClE,WAAY,eAAe,SAAS,SAAU;AAC7C,qBAAe,QAAQ,QAAQ;AAAA,IAChC;AAAA,EACD,CAAE;AACF,QAAM,mBAAmB,YAAa,CAAE,SAAuB;AAC9D,QAAK,CAAE,MAAO;AACb;AAAA,IACD;AAEA,SAAK,iBAAkB,WAAW,CAAE,UAA0B;AAE7D,UACC,MAAM,YAAY,UAClB,CAAE,MAAM,oBACR,eAAe,SAAS,SACvB;AACD,cAAM,eAAe;AACrB,uBAAe,QAAQ,QAAQ;AAAA,MAChC;AAAA,IACD,CAAE;AAAA,EACH,GAAG,CAAC,CAAE;AAEN,SAAO;AAAA,IACN,aAAc;AAAA,MACb,mBAAmB,wBAAwB;AAAA,MAC3C,QAAQ,iBAAiB,QAAQ,iBAAiB;AAAA,MAClD,QAAQ,iBAAiB,QAAQ,kBAAkB;AAAA,MACnD;AAAA,IACD,CAAE;AAAA,IACF;AAAA,MACC,GAAG;AAAA,MACH,UAAU;AAAA,IACX;AAAA,EACD;AACD;AAEA,IAAO,qBAAQ;",
+  "sourcesContent": ["/**\n * External dependencies\n */\nimport type { RefCallback, SyntheticEvent } from 'react';\n\n/**\n * WordPress dependencies\n */\nimport { useRef, useEffect, useCallback } from '@wordpress/element';\nimport { ESCAPE } from '@wordpress/keycodes';\n\n/**\n * Internal dependencies\n */\nimport useConstrainedTabbing from '../use-constrained-tabbing';\nimport { useFocusOnMount } from '../use-focus-on-mount';\nimport useFocusReturn from '../use-focus-return';\nimport useFocusOutside from '../use-focus-outside';\nimport useMergeRefs from '../use-merge-refs';\n\ntype DialogOptions = {\n\t/**\n\t * Determines focus behavior when the dialog mounts.\n\t *\n\t * - `\"firstElement\"` focuses the first tabbable element within.\n\t * - `\"firstInputElement\"` focuses the first value control within.\n\t * - `true` focuses the element itself.\n\t * - `false` does nothing and _should not be used unless an accessible\n\t *    substitute behavior is implemented_.\n\t *\n\t * @default 'firstElement'\n\t */\n\tfocusOnMount?: useFocusOnMount.Mode;\n\t/**\n\t * Determines whether tabbing is constrained to within the popover,\n\t * preventing keyboard focus from leaving the popover content without\n\t * explicit focus elsewhere, or whether the popover remains part of the\n\t * wider tab order.\n\t * If no value is passed, it will be derived from `focusOnMount`.\n\t *\n\t * @see focusOnMount\n\t * @default `focusOnMount` !== false\n\t */\n\tconstrainTabbing?: boolean;\n\tonClose?: () => void;\n\t/**\n\t * Use the `onClose` prop instead.\n\t *\n\t * @deprecated\n\t */\n\t__unstableOnClose?: (\n\t\ttype: string | undefined,\n\t\tevent: SyntheticEvent\n\t) => void;\n};\n\ntype useDialogReturn = [\n\tRefCallback< HTMLElement >,\n\tReturnType< typeof useFocusOutside > & Pick< HTMLElement, 'tabIndex' >,\n];\n\n/**\n * Returns a ref and props to apply to a dialog wrapper to enable the following behaviors:\n *  - constrained tabbing.\n *  - focus on mount.\n *  - return focus on unmount.\n *  - focus outside.\n *\n * @param options Dialog Options.\n */\nfunction useDialog( options: DialogOptions ): useDialogReturn {\n\tconst currentOptions = useRef< DialogOptions >( undefined );\n\tconst { constrainTabbing = options.focusOnMount !== false } = options;\n\tuseEffect( () => {\n\t\tcurrentOptions.current = options;\n\t}, Object.values( options ) );\n\tconst constrainedTabbingRef = useConstrainedTabbing();\n\tconst focusOnMountRef = useFocusOnMount( options.focusOnMount );\n\tconst focusReturnRef = useFocusReturn();\n\tconst focusOutsideProps = useFocusOutside( ( event ) => {\n\t\t// This unstable prop  is here only to manage backward compatibility\n\t\t// for the Popover component otherwise, the onClose should be enough.\n\t\tif ( currentOptions.current?.__unstableOnClose ) {\n\t\t\tcurrentOptions.current.__unstableOnClose( 'focus-outside', event );\n\t\t} else if ( currentOptions.current?.onClose ) {\n\t\t\tcurrentOptions.current.onClose();\n\t\t}\n\t} );\n\tconst closeOnEscapeRef = useCallback( ( node: HTMLElement ) => {\n\t\tif ( ! node ) {\n\t\t\treturn;\n\t\t}\n\n\t\tnode.addEventListener( 'keydown', ( event: KeyboardEvent ) => {\n\t\t\t// Close on escape.\n\t\t\tif (\n\t\t\t\tevent.keyCode === ESCAPE &&\n\t\t\t\t! event.defaultPrevented &&\n\t\t\t\tcurrentOptions.current?.onClose\n\t\t\t) {\n\t\t\t\tevent.preventDefault();\n\t\t\t\tevent.stopPropagation();\n\t\t\t\tcurrentOptions.current.onClose();\n\t\t\t}\n\t\t} );\n\t}, [] );\n\n\treturn [\n\t\tuseMergeRefs( [\n\t\t\tconstrainTabbing ? constrainedTabbingRef : null,\n\t\t\toptions.focusOnMount !== false ? focusReturnRef : null,\n\t\t\toptions.focusOnMount !== false ? focusOnMountRef : null,\n\t\t\tcloseOnEscapeRef,\n\t\t] ),\n\t\t{\n\t\t\t...focusOutsideProps,\n\t\t\ttabIndex: -1,\n\t\t},\n\t];\n}\n\nexport default useDialog;\n"],
+  "mappings": ";AAQA,SAAS,QAAQ,WAAW,mBAAmB;AAC/C,SAAS,cAAc;AAKvB,OAAO,2BAA2B;AAClC,SAAS,uBAAuB;AAChC,OAAO,oBAAoB;AAC3B,OAAO,qBAAqB;AAC5B,OAAO,kBAAkB;AAoDzB,SAAS,UAAW,SAA0C;AAC7D,QAAM,iBAAiB,OAAyB,MAAU;AAC1D,QAAM,EAAE,mBAAmB,QAAQ,iBAAiB,MAAM,IAAI;AAC9D,YAAW,MAAM;AAChB,mBAAe,UAAU;AAAA,EAC1B,GAAG,OAAO,OAAQ,OAAQ,CAAE;AAC5B,QAAM,wBAAwB,sBAAsB;AACpD,QAAM,kBAAkB,gBAAiB,QAAQ,YAAa;AAC9D,QAAM,iBAAiB,eAAe;AACtC,QAAM,oBAAoB,gBAAiB,CAAE,UAAW;AAGvD,QAAK,eAAe,SAAS,mBAAoB;AAChD,qBAAe,QAAQ,kBAAmB,iBAAiB,KAAM;AAAA,IAClE,WAAY,eAAe,SAAS,SAAU;AAC7C,qBAAe,QAAQ,QAAQ;AAAA,IAChC;AAAA,EACD,CAAE;AACF,QAAM,mBAAmB,YAAa,CAAE,SAAuB;AAC9D,QAAK,CAAE,MAAO;AACb;AAAA,IACD;AAEA,SAAK,iBAAkB,WAAW,CAAE,UAA0B;AAE7D,UACC,MAAM,YAAY,UAClB,CAAE,MAAM,oBACR,eAAe,SAAS,SACvB;AACD,cAAM,eAAe;AACrB,cAAM,gBAAgB;AACtB,uBAAe,QAAQ,QAAQ;AAAA,MAChC;AAAA,IACD,CAAE;AAAA,EACH,GAAG,CAAC,CAAE;AAEN,SAAO;AAAA,IACN,aAAc;AAAA,MACb,mBAAmB,wBAAwB;AAAA,MAC3C,QAAQ,iBAAiB,QAAQ,iBAAiB;AAAA,MAClD,QAAQ,iBAAiB,QAAQ,kBAAkB;AAAA,MACnD;AAAA,IACD,CAAE;AAAA,IACF;AAAA,MACC,GAAG;AAAA,MACH,UAAU;AAAA,IACX;AAAA,EACD;AACD;AAEA,IAAO,qBAAQ;",
   "names": []
 }

package/build-types/hooks/use-dialog/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/hooks/use-dialog/index.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,OAAO,KAAK,EAAE,WAAW,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AAYzD,OAAO,EAAE,eAAe,EAAE,MAAM,uBAAuB,CAAC;AAExD,OAAO,eAAe,MAAM,sBAAsB,CAAC;AAGnD,KAAK,aAAa,GAAG;IACpB;;;;;;;;;;OAUG;IACH,YAAY,CAAC,EAAE,eAAe,CAAC,IAAI,CAAC;IACpC;;;;;;;;;OASG;IACH,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB;;;;OAIG;IACH,iBAAiB,CAAC,EAAE,CACnB,IAAI,EAAE,MAAM,GAAG,SAAS,EACxB,KAAK,EAAE,cAAc,KACjB,IAAI,CAAC;CACV,CAAC;AAEF,KAAK,eAAe,GAAG;IACtB,WAAW,CAAE,WAAW,CAAE;IAC1B,UAAU,CAAE,OAAO,eAAe,CAAE,GAAG,IAAI,CAAE,WAAW,EAAE,UAAU,CAAE;CACtE,CAAC;AAEF;;;;;;;;GAQG;AACH,iBAAS,SAAS,CAAE,OAAO,EAAE,aAAa,GAAI,eAAe,CAgD5D;AAED,eAAe,SAAS,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/hooks/use-dialog/index.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,OAAO,KAAK,EAAE,WAAW,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AAYzD,OAAO,EAAE,eAAe,EAAE,MAAM,uBAAuB,CAAC;AAExD,OAAO,eAAe,MAAM,sBAAsB,CAAC;AAGnD,KAAK,aAAa,GAAG;IACpB;;;;;;;;;;OAUG;IACH,YAAY,CAAC,EAAE,eAAe,CAAC,IAAI,CAAC;IACpC;;;;;;;;;OASG;IACH,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB;;;;OAIG;IACH,iBAAiB,CAAC,EAAE,CACnB,IAAI,EAAE,MAAM,GAAG,SAAS,EACxB,KAAK,EAAE,cAAc,KACjB,IAAI,CAAC;CACV,CAAC;AAEF,KAAK,eAAe,GAAG;IACtB,WAAW,CAAE,WAAW,CAAE;IAC1B,UAAU,CAAE,OAAO,eAAe,CAAE,GAAG,IAAI,CAAE,WAAW,EAAE,UAAU,CAAE;CACtE,CAAC;AAEF;;;;;;;;GAQG;AACH,iBAAS,SAAS,CAAE,OAAO,EAAE,aAAa,GAAI,eAAe,CAiD5D;AAED,eAAe,SAAS,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/compose",
-	"version": "7.42.0",
+	"version": "7.43.1-next.v.202604091042.0+668146787",
 	"description": "WordPress higher-order components (HOCs).",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -47,13 +47,13 @@
 	"sideEffects": false,
 	"dependencies": {
 		"@types/mousetrap": "^1.6.8",
-		"@wordpress/deprecated": "^4.42.0",
-		"@wordpress/dom": "^4.42.0",
-		"@wordpress/element": "^6.42.0",
-		"@wordpress/is-shallow-equal": "^5.42.0",
-		"@wordpress/keycodes": "^4.42.0",
-		"@wordpress/priority-queue": "^3.42.0",
-		"@wordpress/undo-manager": "^1.42.0",
+		"@wordpress/deprecated": "^4.43.1-next.v.202604091042.0+668146787",
+		"@wordpress/dom": "^4.43.1-next.v.202604091042.0+668146787",
+		"@wordpress/element": "^6.44.1-next.v.202604091042.0+668146787",
+		"@wordpress/is-shallow-equal": "^5.43.1-next.v.202604091042.0+668146787",
+		"@wordpress/keycodes": "^4.43.1-next.v.202604091042.0+668146787",
+		"@wordpress/priority-queue": "^3.43.1-next.v.202604091042.0+668146787",
+		"@wordpress/undo-manager": "^1.43.1-next.v.202604091042.0+668146787",
 		"change-case": "^4.1.2",
 		"mousetrap": "^1.6.5",
 		"use-memo-one": "^1.1.1"
@@ -67,5 +67,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "c20787b1778ae64c2db65643b1c236309d68e6ba"
+	"gitHead": "73606df74f1c38a084bfa5db97205259ef817593"
 }

package/src/hooks/use-dialog/index.ts

@@ -99,6 +99,7 @@ function useDialog( options: DialogOptions ): useDialogReturn {
 				currentOptions.current?.onClose
 			) {
 				event.preventDefault();
+				event.stopPropagation();
 				currentOptions.current.onClose();
 			}
 		} );

package/src/hooks/use-dialog/test/index.tsx

@@ -0,0 +1,148 @@
+/**
+ * External dependencies
+ */
+import { render, screen, fireEvent } from '@testing-library/react';
+
+/**
+ * Internal dependencies
+ */
+import useDialog from '..';
+
+function Dialog( { onClose }: { onClose?: () => void } ) {
+	const [ ref, props ] = useDialog( {
+		onClose,
+		focusOnMount: false,
+	} );
+
+	return (
+		<div ref={ ref } { ...props } role="dialog" aria-label="Test dialog">
+			<p>Dialog content</p>
+			<button>Inside</button>
+		</div>
+	);
+}
+
+// `useDialog` currently detects the Escape key via the deprecated `keyCode`
+// property (`event.keyCode === 27`). In jsdom, `userEvent.keyboard('[Escape]')`
+// does not set `keyCode` to 27, so we use `fireEvent` to control the event
+// shape. Once the hook is updated to use `event.key === 'Escape'`, these tests
+// should be rewritten to use `userEvent` for more realistic event simulation.
+function pressEscapeOn( element: HTMLElement ) {
+	fireEvent.keyDown( element, { keyCode: 27, key: 'Escape' } );
+}
+
+describe( 'useDialog', () => {
+	it( 'should call onClose when Escape is pressed', () => {
+		const onClose = jest.fn();
+
+		render( <Dialog onClose={ onClose } /> );
+
+		pressEscapeOn( screen.getByRole( 'dialog' ) );
+
+		expect( onClose ).toHaveBeenCalledTimes( 1 );
+	} );
+
+	it( 'should not call onClose when Escape is pressed if defaultPrevented', () => {
+		const onClose = jest.fn();
+
+		render( <Dialog onClose={ onClose } /> );
+
+		const dialog = screen.getByRole( 'dialog' );
+		const event = new KeyboardEvent( 'keydown', {
+			keyCode: 27,
+			bubbles: true,
+			cancelable: true,
+		} );
+		event.preventDefault();
+		dialog.dispatchEvent( event );
+
+		expect( onClose ).not.toHaveBeenCalled();
+	} );
+
+	it( 'should stop Escape event from propagating to parent elements', () => {
+		const onClose = jest.fn();
+		const parentKeyDownHandler = jest.fn();
+
+		render(
+			// eslint-disable-next-line jsx-a11y/no-static-element-interactions
+			<div onKeyDown={ parentKeyDownHandler }>
+				<Dialog onClose={ onClose } />
+			</div>
+		);
+
+		pressEscapeOn( screen.getByRole( 'button', { name: 'Inside' } ) );
+
+		expect( onClose ).toHaveBeenCalledTimes( 1 );
+		expect( parentKeyDownHandler ).not.toHaveBeenCalled();
+	} );
+
+	it( 'should let Escape propagate when there is no onClose handler', () => {
+		const parentKeyDownHandler = jest.fn();
+
+		render(
+			// eslint-disable-next-line jsx-a11y/no-static-element-interactions
+			<div onKeyDown={ parentKeyDownHandler }>
+				<Dialog />
+			</div>
+		);
+
+		pressEscapeOn( screen.getByRole( 'button', { name: 'Inside' } ) );
+
+		expect( parentKeyDownHandler ).toHaveBeenCalledTimes( 1 );
+	} );
+
+	it( 'should close only the innermost dialog when nested', () => {
+		const outerOnClose = jest.fn();
+		const innerOnClose = jest.fn();
+
+		function NestedDialogs() {
+			const [ outerRef, outerProps ] = useDialog( {
+				onClose: outerOnClose,
+				focusOnMount: false,
+			} );
+			const [ innerRef, innerProps ] = useDialog( {
+				onClose: innerOnClose,
+				focusOnMount: false,
+			} );
+
+			return (
+				<div
+					ref={ outerRef }
+					{ ...outerProps }
+					role="dialog"
+					aria-label="Outer"
+				>
+					<div
+						ref={ innerRef }
+						{ ...innerProps }
+						role="dialog"
+						aria-label="Inner"
+					>
+						<button>Focusable</button>
+					</div>
+				</div>
+			);
+		}
+
+		render( <NestedDialogs /> );
+
+		pressEscapeOn( screen.getByRole( 'button', { name: 'Focusable' } ) );
+
+		expect( innerOnClose ).toHaveBeenCalledTimes( 1 );
+		expect( outerOnClose ).not.toHaveBeenCalled();
+	} );
+
+	it( 'should not call onClose for non-Escape keys', () => {
+		const onClose = jest.fn();
+
+		render( <Dialog onClose={ onClose } /> );
+
+		const dialog = screen.getByRole( 'dialog' );
+
+		fireEvent.keyDown( dialog, { keyCode: 13, key: 'Enter' } );
+		fireEvent.keyDown( dialog, { keyCode: 65, key: 'a' } );
+		fireEvent.keyDown( dialog, { keyCode: 9, key: 'Tab' } );
+
+		expect( onClose ).not.toHaveBeenCalled();
+	} );
+} );