@wordpress/compose 5.18.0 → 5.19.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +8 -0
- package/README.md +1 -1
- package/build/hooks/use-dialog/index.js.map +1 -1
- package/build/hooks/use-focus-outside/index.js +15 -56
- package/build/hooks/use-focus-outside/index.js.map +1 -1
- package/build/hooks/use-focusable-iframe/index.js +5 -2
- package/build/hooks/use-focusable-iframe/index.js.map +1 -1
- package/build-module/hooks/use-dialog/index.js.map +1 -1
- package/build-module/hooks/use-focus-outside/index.js +15 -56
- package/build-module/hooks/use-focus-outside/index.js.map +1 -1
- package/build-module/hooks/use-focusable-iframe/index.js +5 -2
- package/build-module/hooks/use-focusable-iframe/index.js.map +1 -1
- package/build-types/hooks/use-dialog/index.d.ts +2 -2
- package/build-types/hooks/use-dialog/index.d.ts.map +1 -1
- package/build-types/hooks/use-focus-outside/index.d.ts +16 -63
- package/build-types/hooks/use-focus-outside/index.d.ts.map +1 -1
- package/build-types/hooks/use-focusable-iframe/index.d.ts +6 -2
- package/build-types/hooks/use-focusable-iframe/index.d.ts.map +1 -1
- package/package.json +8 -8
- package/src/hooks/use-dialog/index.ts +3 -4
- package/src/hooks/use-focus-outside/{index.js → index.ts} +55 -62
- package/src/hooks/use-focus-outside/test/index.js +101 -72
- package/src/hooks/use-focusable-iframe/{index.js → index.ts} +8 -3
- package/tsconfig.tsbuildinfo +1 -1
package/CHANGELOG.md
CHANGED
|
@@ -2,6 +2,14 @@
|
|
|
2
2
|
|
|
3
3
|
## Unreleased
|
|
4
4
|
|
|
5
|
+
## 5.19.0 (2022-11-02)
|
|
6
|
+
|
|
7
|
+
### Internal
|
|
8
|
+
|
|
9
|
+
- `useDisabled`: Refactor the component to rely on the HTML `inert` attribute ([#44865](https://github.com/WordPress/gutenberg/pull/44865)).
|
|
10
|
+
- `useFocusOutside`: Refactor the hook to TypeScript, rewrite tests using modern RTL and jest features ([#45317](https://github.com/WordPress/gutenberg/pull/45317)).
|
|
11
|
+
- `useFocusableIframe`: Refactor to TypeScript ([#45428](https://github.com/WordPress/gutenberg/pull/45428)).
|
|
12
|
+
|
|
5
13
|
## 5.18.0 (2022-10-19)
|
|
6
14
|
|
|
7
15
|
## 5.17.0 (2022-10-05)
|
package/README.md
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["@wordpress/compose/src/hooks/use-dialog/index.ts"],"names":["useDialog","options","currentOptions","current","Object","values","constrainedTabbingRef","focusOnMountRef","focusOnMount","focusReturnRef","focusOutsideProps","event","__unstableOnClose","onClose","closeOnEscapeRef","node","addEventListener","keyCode","ESCAPE","defaultPrevented","preventDefault","tabIndex"],"mappings":";;;;;;;;;AAQA;;AACA;;AAKA;;AACA;;AACA;;AACA;;AACA;;AAlBA;AACA;AACA;;AAGA;AACA;AACA;;AAIA;AACA;AACA;;
|
|
1
|
+
{"version":3,"sources":["@wordpress/compose/src/hooks/use-dialog/index.ts"],"names":["useDialog","options","currentOptions","current","Object","values","constrainedTabbingRef","focusOnMountRef","focusOnMount","focusReturnRef","focusOutsideProps","event","__unstableOnClose","onClose","closeOnEscapeRef","node","addEventListener","keyCode","ESCAPE","defaultPrevented","preventDefault","tabIndex"],"mappings":";;;;;;;;;AAQA;;AACA;;AAKA;;AACA;;AACA;;AACA;;AACA;;AAlBA;AACA;AACA;;AAGA;AACA;AACA;;AAIA;AACA;AACA;;AA0BA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,SAASA,SAAT,CAAoBC,OAApB,EAA8D;AAC7D,QAAMC,cAAc,GAAG,sBAAvB;AACA,0BAAW,MAAM;AAChBA,IAAAA,cAAc,CAACC,OAAf,GAAyBF,OAAzB;AACA,GAFD,EAEGG,MAAM,CAACC,MAAP,CAAeJ,OAAf,CAFH;AAGA,QAAMK,qBAAqB,GAAG,qCAA9B;AACA,QAAMC,eAAe,GAAG,8BAAiBN,OAAO,CAACO,YAAzB,CAAxB;AACA,QAAMC,cAAc,GAAG,8BAAvB;AACA,QAAMC,iBAAiB,GAAG,8BAAmBC,KAAF,IAAa;AAAA;;AACvD;AACA;AACA,iCAAKT,cAAc,CAACC,OAApB,kDAAK,sBAAwBS,iBAA7B,EAAiD;AAChDV,MAAAA,cAAc,CAACC,OAAf,CAAuBS,iBAAvB,CAA0C,eAA1C,EAA2DD,KAA3D;AACA,KAFD,MAEO,8BAAKT,cAAc,CAACC,OAApB,mDAAK,uBAAwBU,OAA7B,EAAuC;AAC7CX,MAAAA,cAAc,CAACC,OAAf,CAAuBU,OAAvB;AACA;AACD,GARyB,CAA1B;AASA,QAAMC,gBAAgB,GAAG,0BAAeC,IAAF,IAAyB;AAC9D,QAAK,CAAEA,IAAP,EAAc;AACb;AACA;;AAEDA,IAAAA,IAAI,CAACC,gBAAL,CAAuB,SAAvB,EAAoCL,KAAF,IAA4B;AAAA;;AAC7D;AACA,UACCA,KAAK,CAACM,OAAN,KAAkBC,gBAAlB,IACA,CAAEP,KAAK,CAACQ,gBADR,8BAEAjB,cAAc,CAACC,OAFf,mDAEA,uBAAwBU,OAHzB,EAIE;AACDF,QAAAA,KAAK,CAACS,cAAN;AACAlB,QAAAA,cAAc,CAACC,OAAf,CAAuBU,OAAvB;AACA;AACD,KAVD;AAWA,GAhBwB,EAgBtB,EAhBsB,CAAzB;AAkBA,SAAO,CACN,2BAAc,CACbZ,OAAO,CAACO,YAAR,KAAyB,KAAzB,GAAiCF,qBAAjC,GAAyD,IAD5C,EAEbL,OAAO,CAACO,YAAR,KAAyB,KAAzB,GAAiCC,cAAjC,GAAkD,IAFrC,EAGbR,OAAO,CAACO,YAAR,KAAyB,KAAzB,GAAiCD,eAAjC,GAAmD,IAHtC,EAIbO,gBAJa,CAAd,CADM,EAON,EACC,GAAGJ,iBADJ;AAECW,IAAAA,QAAQ,EAAE,CAAC;AAFZ,GAPM,CAAP;AAYA;;eAEcrB,S","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\tfocusOnMount?: Parameters< typeof useFocusOnMount >[ 0 ];\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\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\toptions.focusOnMount !== false ? 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"]}
|
|
@@ -7,6 +7,10 @@ exports.default = useFocusOutside;
|
|
|
7
7
|
|
|
8
8
|
var _element = require("@wordpress/element");
|
|
9
9
|
|
|
10
|
+
/**
|
|
11
|
+
* External dependencies
|
|
12
|
+
*/
|
|
13
|
+
|
|
10
14
|
/**
|
|
11
15
|
* WordPress dependencies
|
|
12
16
|
*/
|
|
@@ -14,16 +18,13 @@ var _element = require("@wordpress/element");
|
|
|
14
18
|
/**
|
|
15
19
|
* Input types which are classified as button types, for use in considering
|
|
16
20
|
* whether element is a (focus-normalized) button.
|
|
17
|
-
*
|
|
18
|
-
* @type {string[]}
|
|
19
21
|
*/
|
|
20
22
|
const INPUT_BUTTON_TYPES = ['button', 'submit'];
|
|
21
23
|
/**
|
|
22
|
-
*
|
|
24
|
+
* List of HTML button elements subject to focus normalization
|
|
25
|
+
*
|
|
26
|
+
* @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#Clicking_and_focus
|
|
23
27
|
*/
|
|
24
|
-
// Disable reason: Rule doesn't support predicate return types.
|
|
25
|
-
|
|
26
|
-
/* eslint-disable jsdoc/valid-types */
|
|
27
28
|
|
|
28
29
|
/**
|
|
29
30
|
* Returns true if the given element is a button element subject to focus
|
|
@@ -31,11 +32,10 @@ const INPUT_BUTTON_TYPES = ['button', 'submit'];
|
|
|
31
32
|
*
|
|
32
33
|
* @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#Clicking_and_focus
|
|
33
34
|
*
|
|
34
|
-
* @param
|
|
35
|
+
* @param eventTarget The target from a mouse or touch event.
|
|
35
36
|
*
|
|
36
|
-
* @return
|
|
37
|
+
* @return Whether the element is a button element subject to focus normalization.
|
|
37
38
|
*/
|
|
38
|
-
|
|
39
39
|
function isFocusNormalizedButton(eventTarget) {
|
|
40
40
|
if (!(eventTarget instanceof window.HTMLElement)) {
|
|
41
41
|
return false;
|
|
@@ -47,66 +47,28 @@ function isFocusNormalizedButton(eventTarget) {
|
|
|
47
47
|
return true;
|
|
48
48
|
|
|
49
49
|
case 'INPUT':
|
|
50
|
-
return INPUT_BUTTON_TYPES.includes(
|
|
51
|
-
/** @type {HTMLInputElement} */
|
|
52
|
-
eventTarget.type);
|
|
50
|
+
return INPUT_BUTTON_TYPES.includes(eventTarget.type);
|
|
53
51
|
}
|
|
54
52
|
|
|
55
53
|
return false;
|
|
56
54
|
}
|
|
57
|
-
/* eslint-enable jsdoc/valid-types */
|
|
58
|
-
|
|
59
|
-
/**
|
|
60
|
-
* @typedef {import('react').SyntheticEvent} SyntheticEvent
|
|
61
|
-
*/
|
|
62
|
-
|
|
63
|
-
/**
|
|
64
|
-
* @callback EventCallback
|
|
65
|
-
* @param {SyntheticEvent} event input related event.
|
|
66
|
-
*/
|
|
67
|
-
|
|
68
|
-
/**
|
|
69
|
-
* @typedef FocusOutsideReactElement
|
|
70
|
-
* @property {EventCallback} handleFocusOutside callback for a focus outside event.
|
|
71
|
-
*/
|
|
72
|
-
|
|
73
|
-
/**
|
|
74
|
-
* @typedef {import('react').MutableRefObject<FocusOutsideReactElement | undefined>} FocusOutsideRef
|
|
75
|
-
*/
|
|
76
|
-
|
|
77
|
-
/**
|
|
78
|
-
* @typedef {Object} FocusOutsideReturnValue
|
|
79
|
-
* @property {EventCallback} onFocus An event handler for focus events.
|
|
80
|
-
* @property {EventCallback} onBlur An event handler for blur events.
|
|
81
|
-
* @property {EventCallback} onMouseDown An event handler for mouse down events.
|
|
82
|
-
* @property {EventCallback} onMouseUp An event handler for mouse up events.
|
|
83
|
-
* @property {EventCallback} onTouchStart An event handler for touch start events.
|
|
84
|
-
* @property {EventCallback} onTouchEnd An event handler for touch end events.
|
|
85
|
-
*/
|
|
86
55
|
|
|
87
56
|
/**
|
|
88
57
|
* A react hook that can be used to check whether focus has moved outside the
|
|
89
58
|
* element the event handlers are bound to.
|
|
90
59
|
*
|
|
91
|
-
* @param
|
|
92
|
-
*
|
|
60
|
+
* @param onFocusOutside A callback triggered when focus moves outside
|
|
61
|
+
* the element the event handlers are bound to.
|
|
93
62
|
*
|
|
94
|
-
* @return
|
|
95
|
-
*
|
|
96
|
-
* outside that element.
|
|
63
|
+
* @return An object containing event handlers. Bind the event handlers to a
|
|
64
|
+
* wrapping element element to capture when focus moves outside that element.
|
|
97
65
|
*/
|
|
98
|
-
|
|
99
|
-
|
|
100
66
|
function useFocusOutside(onFocusOutside) {
|
|
101
67
|
const currentOnFocusOutside = (0, _element.useRef)(onFocusOutside);
|
|
102
68
|
(0, _element.useEffect)(() => {
|
|
103
69
|
currentOnFocusOutside.current = onFocusOutside;
|
|
104
70
|
}, [onFocusOutside]);
|
|
105
71
|
const preventBlurCheck = (0, _element.useRef)(false);
|
|
106
|
-
/**
|
|
107
|
-
* @type {import('react').MutableRefObject<number | undefined>}
|
|
108
|
-
*/
|
|
109
|
-
|
|
110
72
|
const blurCheckTimeoutId = (0, _element.useRef)();
|
|
111
73
|
/**
|
|
112
74
|
* Cancel a blur check timeout.
|
|
@@ -132,9 +94,8 @@ function useFocusOutside(onFocusOutside) {
|
|
|
132
94
|
* button elements when clicked, while others do. The logic here
|
|
133
95
|
* intends to normalize this as treating click on buttons as focus.
|
|
134
96
|
*
|
|
97
|
+
* @param event
|
|
135
98
|
* @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#Clicking_and_focus
|
|
136
|
-
*
|
|
137
|
-
* @param {SyntheticEvent} event Event for mousedown or mouseup.
|
|
138
99
|
*/
|
|
139
100
|
|
|
140
101
|
const normalizeButtonFocus = (0, _element.useCallback)(event => {
|
|
@@ -156,8 +117,6 @@ function useFocusOutside(onFocusOutside) {
|
|
|
156
117
|
*
|
|
157
118
|
* Calls the `onFocusOutside` callback in an immediate timeout if focus has
|
|
158
119
|
* move outside the bound element and is still within the document.
|
|
159
|
-
*
|
|
160
|
-
* @param {SyntheticEvent} event Blur event.
|
|
161
120
|
*/
|
|
162
121
|
|
|
163
122
|
const queueBlurCheck = (0, _element.useCallback)(event => {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["@wordpress/compose/src/hooks/use-focus-outside/index.
|
|
1
|
+
{"version":3,"sources":["@wordpress/compose/src/hooks/use-focus-outside/index.ts"],"names":["INPUT_BUTTON_TYPES","isFocusNormalizedButton","eventTarget","window","HTMLElement","nodeName","includes","type","useFocusOutside","onFocusOutside","currentOnFocusOutside","current","preventBlurCheck","blurCheckTimeoutId","cancelBlurCheck","clearTimeout","normalizeButtonFocus","event","target","isInteractionEnd","queueBlurCheck","persist","setTimeout","document","hasFocus","preventDefault","onFocus","onMouseDown","onMouseUp","onTouchStart","onTouchEnd","onBlur"],"mappings":"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","sourcesContent":["/**\n * External dependencies\n */\nimport type {\n\tFocusEventHandler,\n\tEventHandler,\n\tMouseEventHandler,\n\tTouchEventHandler,\n\tFocusEvent,\n\tMouseEvent,\n\tTouchEvent,\n} from 'react';\n\n/**\n * WordPress dependencies\n */\nimport { useCallback, useEffect, useRef } from '@wordpress/element';\n\n/**\n * Input types which are classified as button types, for use in considering\n * whether element is a (focus-normalized) button.\n */\nconst INPUT_BUTTON_TYPES = [ 'button', 'submit' ];\n\n/**\n * List of HTML button elements subject to focus normalization\n *\n * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#Clicking_and_focus\n */\ntype FocusNormalizedButton =\n\t| HTMLButtonElement\n\t| HTMLLinkElement\n\t| HTMLInputElement;\n\n/**\n * Returns true if the given element is a button element subject to focus\n * normalization, or false otherwise.\n *\n * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#Clicking_and_focus\n *\n * @param eventTarget The target from a mouse or touch event.\n *\n * @return Whether the element is a button element subject to focus normalization.\n */\nfunction isFocusNormalizedButton(\n\teventTarget: EventTarget\n): eventTarget is FocusNormalizedButton {\n\tif ( ! ( eventTarget instanceof window.HTMLElement ) ) {\n\t\treturn false;\n\t}\n\tswitch ( eventTarget.nodeName ) {\n\t\tcase 'A':\n\t\tcase 'BUTTON':\n\t\t\treturn true;\n\n\t\tcase 'INPUT':\n\t\t\treturn INPUT_BUTTON_TYPES.includes(\n\t\t\t\t( eventTarget as HTMLInputElement ).type\n\t\t\t);\n\t}\n\n\treturn false;\n}\n\ntype UseFocusOutsideReturn = {\n\tonFocus: FocusEventHandler;\n\tonMouseDown: MouseEventHandler;\n\tonMouseUp: MouseEventHandler;\n\tonTouchStart: TouchEventHandler;\n\tonTouchEnd: TouchEventHandler;\n\tonBlur: FocusEventHandler;\n};\n\n/**\n * A react hook that can be used to check whether focus has moved outside the\n * element the event handlers are bound to.\n *\n * @param onFocusOutside A callback triggered when focus moves outside\n * the element the event handlers are bound to.\n *\n * @return An object containing event handlers. Bind the event handlers to a\n * wrapping element element to capture when focus moves outside that element.\n */\nexport default function useFocusOutside(\n\tonFocusOutside: ( event: FocusEvent ) => void\n): UseFocusOutsideReturn {\n\tconst currentOnFocusOutside = useRef( onFocusOutside );\n\tuseEffect( () => {\n\t\tcurrentOnFocusOutside.current = onFocusOutside;\n\t}, [ onFocusOutside ] );\n\n\tconst preventBlurCheck = useRef( false );\n\n\tconst blurCheckTimeoutId = useRef< number | undefined >();\n\n\t/**\n\t * Cancel a blur check timeout.\n\t */\n\tconst cancelBlurCheck = useCallback( () => {\n\t\tclearTimeout( blurCheckTimeoutId.current );\n\t}, [] );\n\n\t// Cancel blur checks on unmount.\n\tuseEffect( () => {\n\t\treturn () => cancelBlurCheck();\n\t}, [] );\n\n\t// Cancel a blur check if the callback or ref is no longer provided.\n\tuseEffect( () => {\n\t\tif ( ! onFocusOutside ) {\n\t\t\tcancelBlurCheck();\n\t\t}\n\t}, [ onFocusOutside, cancelBlurCheck ] );\n\n\t/**\n\t * Handles a mousedown or mouseup event to respectively assign and\n\t * unassign a flag for preventing blur check on button elements. Some\n\t * browsers, namely Firefox and Safari, do not emit a focus event on\n\t * button elements when clicked, while others do. The logic here\n\t * intends to normalize this as treating click on buttons as focus.\n\t *\n\t * @param event\n\t * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#Clicking_and_focus\n\t */\n\tconst normalizeButtonFocus: EventHandler< MouseEvent | TouchEvent > =\n\t\tuseCallback( ( event ) => {\n\t\t\tconst { type, target } = event;\n\t\t\tconst isInteractionEnd = [ 'mouseup', 'touchend' ].includes( type );\n\n\t\t\tif ( isInteractionEnd ) {\n\t\t\t\tpreventBlurCheck.current = false;\n\t\t\t} else if ( isFocusNormalizedButton( target ) ) {\n\t\t\t\tpreventBlurCheck.current = true;\n\t\t\t}\n\t\t}, [] );\n\n\t/**\n\t * A callback triggered when a blur event occurs on the element the handler\n\t * is bound to.\n\t *\n\t * Calls the `onFocusOutside` callback in an immediate timeout if focus has\n\t * move outside the bound element and is still within the document.\n\t */\n\tconst queueBlurCheck: FocusEventHandler = useCallback( ( event ) => {\n\t\t// React does not allow using an event reference asynchronously\n\t\t// due to recycling behavior, except when explicitly persisted.\n\t\tevent.persist();\n\n\t\t// Skip blur check if clicking button. See `normalizeButtonFocus`.\n\t\tif ( preventBlurCheck.current ) {\n\t\t\treturn;\n\t\t}\n\n\t\tblurCheckTimeoutId.current = setTimeout( () => {\n\t\t\t// If document is not focused then focus should remain\n\t\t\t// inside the wrapped component and therefore we cancel\n\t\t\t// this blur event thereby leaving focus in place.\n\t\t\t// https://developer.mozilla.org/en-US/docs/Web/API/Document/hasFocus.\n\t\t\tif ( ! document.hasFocus() ) {\n\t\t\t\tevent.preventDefault();\n\t\t\t\treturn;\n\t\t\t}\n\n\t\t\tif ( 'function' === typeof currentOnFocusOutside.current ) {\n\t\t\t\tcurrentOnFocusOutside.current( event );\n\t\t\t}\n\t\t}, 0 );\n\t}, [] );\n\n\treturn {\n\t\tonFocus: cancelBlurCheck,\n\t\tonMouseDown: normalizeButtonFocus,\n\t\tonMouseUp: normalizeButtonFocus,\n\t\tonTouchStart: normalizeButtonFocus,\n\t\tonTouchEnd: normalizeButtonFocus,\n\t\tonBlur: queueBlurCheck,\n\t};\n}\n"]}
|
|
@@ -9,6 +9,10 @@ exports.default = useFocusableIframe;
|
|
|
9
9
|
|
|
10
10
|
var _useRefEffect = _interopRequireDefault(require("../use-ref-effect"));
|
|
11
11
|
|
|
12
|
+
/**
|
|
13
|
+
* External dependencies
|
|
14
|
+
*/
|
|
15
|
+
|
|
12
16
|
/**
|
|
13
17
|
* Internal dependencies
|
|
14
18
|
*/
|
|
@@ -17,7 +21,7 @@ var _useRefEffect = _interopRequireDefault(require("../use-ref-effect"));
|
|
|
17
21
|
* Dispatches a bubbling focus event when the iframe receives focus. Use
|
|
18
22
|
* `onFocus` as usual on the iframe or a parent element.
|
|
19
23
|
*
|
|
20
|
-
* @return
|
|
24
|
+
* @return Ref to pass to the iframe.
|
|
21
25
|
*/
|
|
22
26
|
function useFocusableIframe() {
|
|
23
27
|
return (0, _useRefEffect.default)(element => {
|
|
@@ -36,7 +40,6 @@ function useFocusableIframe() {
|
|
|
36
40
|
|
|
37
41
|
function checkFocus() {
|
|
38
42
|
if (ownerDocument && ownerDocument.activeElement === element) {
|
|
39
|
-
/** @type {HTMLElement} */
|
|
40
43
|
element.focus();
|
|
41
44
|
}
|
|
42
45
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["@wordpress/compose/src/hooks/use-focusable-iframe/index.
|
|
1
|
+
{"version":3,"sources":["@wordpress/compose/src/hooks/use-focusable-iframe/index.ts"],"names":["useFocusableIframe","element","ownerDocument","defaultView","checkFocus","activeElement","focus","addEventListener","removeEventListener"],"mappings":";;;;;;;;;AAQA;;AARA;AACA;AACA;;AAGA;AACA;AACA;;AAGA;AACA;AACA;AACA;AACA;AACA;AACe,SAASA,kBAAT,GAAgE;AAC9E,SAAO,2BAAgBC,OAAF,IAAe;AACnC,UAAM;AAAEC,MAAAA;AAAF,QAAoBD,OAA1B;AACA,QAAK,CAAEC,aAAP,EAAuB;AACvB,UAAM;AAAEC,MAAAA;AAAF,QAAkBD,aAAxB;AACA,QAAK,CAAEC,WAAP,EAAqB;AAErB;AACF;AACA;AACA;;AACE,aAASC,UAAT,GAAsB;AACrB,UAAKF,aAAa,IAAIA,aAAa,CAACG,aAAd,KAAgCJ,OAAtD,EAAgE;AAC7DA,QAAAA,OAAF,CAA2BK,KAA3B;AACA;AACD;;AAEDH,IAAAA,WAAW,CAACI,gBAAZ,CAA8B,MAA9B,EAAsCH,UAAtC;AACA,WAAO,MAAM;AACZD,MAAAA,WAAW,CAACK,mBAAZ,CAAiC,MAAjC,EAAyCJ,UAAzC;AACA,KAFD;AAGA,GApBM,EAoBJ,EApBI,CAAP;AAqBA","sourcesContent":["/**\n * External dependencies\n */\nimport type { RefCallback } from 'react';\n\n/**\n * Internal dependencies\n */\nimport useRefEffect from '../use-ref-effect';\n\n/**\n * Dispatches a bubbling focus event when the iframe receives focus. Use\n * `onFocus` as usual on the iframe or a parent element.\n *\n * @return Ref to pass to the iframe.\n */\nexport default function useFocusableIframe(): RefCallback< HTMLIFrameElement > {\n\treturn useRefEffect( ( element ) => {\n\t\tconst { ownerDocument } = element;\n\t\tif ( ! ownerDocument ) return;\n\t\tconst { defaultView } = ownerDocument;\n\t\tif ( ! defaultView ) return;\n\n\t\t/**\n\t\t * Checks whether the iframe is the activeElement, inferring that it has\n\t\t * then received focus, and dispatches a focus event.\n\t\t */\n\t\tfunction checkFocus() {\n\t\t\tif ( ownerDocument && ownerDocument.activeElement === element ) {\n\t\t\t\t( element as HTMLElement ).focus();\n\t\t\t}\n\t\t}\n\n\t\tdefaultView.addEventListener( 'blur', checkFocus );\n\t\treturn () => {\n\t\t\tdefaultView.removeEventListener( 'blur', checkFocus );\n\t\t};\n\t}, [] );\n}\n"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["@wordpress/compose/src/hooks/use-dialog/index.ts"],"names":["useRef","useEffect","useCallback","ESCAPE","useConstrainedTabbing","useFocusOnMount","useFocusReturn","useFocusOutside","useMergeRefs","useDialog","options","currentOptions","current","Object","values","constrainedTabbingRef","focusOnMountRef","focusOnMount","focusReturnRef","focusOutsideProps","event","__unstableOnClose","onClose","closeOnEscapeRef","node","addEventListener","keyCode","defaultPrevented","preventDefault","tabIndex"],"mappings":"AAAA;AACA;AACA;;AAGA;AACA;AACA;AACA,SAASA,MAAT,EAAiBC,SAAjB,EAA4BC,WAA5B,QAA+C,oBAA/C;AACA,SAASC,MAAT,QAAuB,qBAAvB;AAEA;AACA;AACA;;AACA,OAAOC,qBAAP,MAAkC,4BAAlC;AACA,OAAOC,eAAP,MAA4B,uBAA5B;AACA,OAAOC,cAAP,MAA2B,qBAA3B;AACA,OAAOC,eAAP,MAA4B,sBAA5B;AACA,OAAOC,YAAP,MAAyB,mBAAzB;;
|
|
1
|
+
{"version":3,"sources":["@wordpress/compose/src/hooks/use-dialog/index.ts"],"names":["useRef","useEffect","useCallback","ESCAPE","useConstrainedTabbing","useFocusOnMount","useFocusReturn","useFocusOutside","useMergeRefs","useDialog","options","currentOptions","current","Object","values","constrainedTabbingRef","focusOnMountRef","focusOnMount","focusReturnRef","focusOutsideProps","event","__unstableOnClose","onClose","closeOnEscapeRef","node","addEventListener","keyCode","defaultPrevented","preventDefault","tabIndex"],"mappings":"AAAA;AACA;AACA;;AAGA;AACA;AACA;AACA,SAASA,MAAT,EAAiBC,SAAjB,EAA4BC,WAA5B,QAA+C,oBAA/C;AACA,SAASC,MAAT,QAAuB,qBAAvB;AAEA;AACA;AACA;;AACA,OAAOC,qBAAP,MAAkC,4BAAlC;AACA,OAAOC,eAAP,MAA4B,uBAA5B;AACA,OAAOC,cAAP,MAA2B,qBAA3B;AACA,OAAOC,eAAP,MAA4B,sBAA5B;AACA,OAAOC,YAAP,MAAyB,mBAAzB;;AAqBA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,SAASC,SAAT,CAAoBC,OAApB,EAA8D;AAC7D,QAAMC,cAAc,GAAGX,MAAM,EAA7B;AACAC,EAAAA,SAAS,CAAE,MAAM;AAChBU,IAAAA,cAAc,CAACC,OAAf,GAAyBF,OAAzB;AACA,GAFQ,EAENG,MAAM,CAACC,MAAP,CAAeJ,OAAf,CAFM,CAAT;AAGA,QAAMK,qBAAqB,GAAGX,qBAAqB,EAAnD;AACA,QAAMY,eAAe,GAAGX,eAAe,CAAEK,OAAO,CAACO,YAAV,CAAvC;AACA,QAAMC,cAAc,GAAGZ,cAAc,EAArC;AACA,QAAMa,iBAAiB,GAAGZ,eAAe,CAAIa,KAAF,IAAa;AAAA;;AACvD;AACA;AACA,iCAAKT,cAAc,CAACC,OAApB,kDAAK,sBAAwBS,iBAA7B,EAAiD;AAChDV,MAAAA,cAAc,CAACC,OAAf,CAAuBS,iBAAvB,CAA0C,eAA1C,EAA2DD,KAA3D;AACA,KAFD,MAEO,8BAAKT,cAAc,CAACC,OAApB,mDAAK,uBAAwBU,OAA7B,EAAuC;AAC7CX,MAAAA,cAAc,CAACC,OAAf,CAAuBU,OAAvB;AACA;AACD,GARwC,CAAzC;AASA,QAAMC,gBAAgB,GAAGrB,WAAW,CAAIsB,IAAF,IAAyB;AAC9D,QAAK,CAAEA,IAAP,EAAc;AACb;AACA;;AAEDA,IAAAA,IAAI,CAACC,gBAAL,CAAuB,SAAvB,EAAoCL,KAAF,IAA4B;AAAA;;AAC7D;AACA,UACCA,KAAK,CAACM,OAAN,KAAkBvB,MAAlB,IACA,CAAEiB,KAAK,CAACO,gBADR,8BAEAhB,cAAc,CAACC,OAFf,mDAEA,uBAAwBU,OAHzB,EAIE;AACDF,QAAAA,KAAK,CAACQ,cAAN;AACAjB,QAAAA,cAAc,CAACC,OAAf,CAAuBU,OAAvB;AACA;AACD,KAVD;AAWA,GAhBmC,EAgBjC,EAhBiC,CAApC;AAkBA,SAAO,CACNd,YAAY,CAAE,CACbE,OAAO,CAACO,YAAR,KAAyB,KAAzB,GAAiCF,qBAAjC,GAAyD,IAD5C,EAEbL,OAAO,CAACO,YAAR,KAAyB,KAAzB,GAAiCC,cAAjC,GAAkD,IAFrC,EAGbR,OAAO,CAACO,YAAR,KAAyB,KAAzB,GAAiCD,eAAjC,GAAmD,IAHtC,EAIbO,gBAJa,CAAF,CADN,EAON,EACC,GAAGJ,iBADJ;AAECU,IAAAA,QAAQ,EAAE,CAAC;AAFZ,GAPM,CAAP;AAYA;;AAED,eAAepB,SAAf","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\tfocusOnMount?: Parameters< typeof useFocusOnMount >[ 0 ];\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\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\toptions.focusOnMount !== false ? 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"]}
|
|
@@ -1,3 +1,7 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* External dependencies
|
|
3
|
+
*/
|
|
4
|
+
|
|
1
5
|
/**
|
|
2
6
|
* WordPress dependencies
|
|
3
7
|
*/
|
|
@@ -5,17 +9,14 @@ import { useCallback, useEffect, useRef } from '@wordpress/element';
|
|
|
5
9
|
/**
|
|
6
10
|
* Input types which are classified as button types, for use in considering
|
|
7
11
|
* whether element is a (focus-normalized) button.
|
|
8
|
-
*
|
|
9
|
-
* @type {string[]}
|
|
10
12
|
*/
|
|
11
13
|
|
|
12
14
|
const INPUT_BUTTON_TYPES = ['button', 'submit'];
|
|
13
15
|
/**
|
|
14
|
-
*
|
|
16
|
+
* List of HTML button elements subject to focus normalization
|
|
17
|
+
*
|
|
18
|
+
* @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#Clicking_and_focus
|
|
15
19
|
*/
|
|
16
|
-
// Disable reason: Rule doesn't support predicate return types.
|
|
17
|
-
|
|
18
|
-
/* eslint-disable jsdoc/valid-types */
|
|
19
20
|
|
|
20
21
|
/**
|
|
21
22
|
* Returns true if the given element is a button element subject to focus
|
|
@@ -23,11 +24,10 @@ const INPUT_BUTTON_TYPES = ['button', 'submit'];
|
|
|
23
24
|
*
|
|
24
25
|
* @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#Clicking_and_focus
|
|
25
26
|
*
|
|
26
|
-
* @param
|
|
27
|
+
* @param eventTarget The target from a mouse or touch event.
|
|
27
28
|
*
|
|
28
|
-
* @return
|
|
29
|
+
* @return Whether the element is a button element subject to focus normalization.
|
|
29
30
|
*/
|
|
30
|
-
|
|
31
31
|
function isFocusNormalizedButton(eventTarget) {
|
|
32
32
|
if (!(eventTarget instanceof window.HTMLElement)) {
|
|
33
33
|
return false;
|
|
@@ -39,66 +39,28 @@ function isFocusNormalizedButton(eventTarget) {
|
|
|
39
39
|
return true;
|
|
40
40
|
|
|
41
41
|
case 'INPUT':
|
|
42
|
-
return INPUT_BUTTON_TYPES.includes(
|
|
43
|
-
/** @type {HTMLInputElement} */
|
|
44
|
-
eventTarget.type);
|
|
42
|
+
return INPUT_BUTTON_TYPES.includes(eventTarget.type);
|
|
45
43
|
}
|
|
46
44
|
|
|
47
45
|
return false;
|
|
48
46
|
}
|
|
49
|
-
/* eslint-enable jsdoc/valid-types */
|
|
50
|
-
|
|
51
|
-
/**
|
|
52
|
-
* @typedef {import('react').SyntheticEvent} SyntheticEvent
|
|
53
|
-
*/
|
|
54
|
-
|
|
55
|
-
/**
|
|
56
|
-
* @callback EventCallback
|
|
57
|
-
* @param {SyntheticEvent} event input related event.
|
|
58
|
-
*/
|
|
59
|
-
|
|
60
|
-
/**
|
|
61
|
-
* @typedef FocusOutsideReactElement
|
|
62
|
-
* @property {EventCallback} handleFocusOutside callback for a focus outside event.
|
|
63
|
-
*/
|
|
64
|
-
|
|
65
|
-
/**
|
|
66
|
-
* @typedef {import('react').MutableRefObject<FocusOutsideReactElement | undefined>} FocusOutsideRef
|
|
67
|
-
*/
|
|
68
|
-
|
|
69
|
-
/**
|
|
70
|
-
* @typedef {Object} FocusOutsideReturnValue
|
|
71
|
-
* @property {EventCallback} onFocus An event handler for focus events.
|
|
72
|
-
* @property {EventCallback} onBlur An event handler for blur events.
|
|
73
|
-
* @property {EventCallback} onMouseDown An event handler for mouse down events.
|
|
74
|
-
* @property {EventCallback} onMouseUp An event handler for mouse up events.
|
|
75
|
-
* @property {EventCallback} onTouchStart An event handler for touch start events.
|
|
76
|
-
* @property {EventCallback} onTouchEnd An event handler for touch end events.
|
|
77
|
-
*/
|
|
78
47
|
|
|
79
48
|
/**
|
|
80
49
|
* A react hook that can be used to check whether focus has moved outside the
|
|
81
50
|
* element the event handlers are bound to.
|
|
82
51
|
*
|
|
83
|
-
* @param
|
|
84
|
-
*
|
|
52
|
+
* @param onFocusOutside A callback triggered when focus moves outside
|
|
53
|
+
* the element the event handlers are bound to.
|
|
85
54
|
*
|
|
86
|
-
* @return
|
|
87
|
-
*
|
|
88
|
-
* outside that element.
|
|
55
|
+
* @return An object containing event handlers. Bind the event handlers to a
|
|
56
|
+
* wrapping element element to capture when focus moves outside that element.
|
|
89
57
|
*/
|
|
90
|
-
|
|
91
|
-
|
|
92
58
|
export default function useFocusOutside(onFocusOutside) {
|
|
93
59
|
const currentOnFocusOutside = useRef(onFocusOutside);
|
|
94
60
|
useEffect(() => {
|
|
95
61
|
currentOnFocusOutside.current = onFocusOutside;
|
|
96
62
|
}, [onFocusOutside]);
|
|
97
63
|
const preventBlurCheck = useRef(false);
|
|
98
|
-
/**
|
|
99
|
-
* @type {import('react').MutableRefObject<number | undefined>}
|
|
100
|
-
*/
|
|
101
|
-
|
|
102
64
|
const blurCheckTimeoutId = useRef();
|
|
103
65
|
/**
|
|
104
66
|
* Cancel a blur check timeout.
|
|
@@ -124,9 +86,8 @@ export default function useFocusOutside(onFocusOutside) {
|
|
|
124
86
|
* button elements when clicked, while others do. The logic here
|
|
125
87
|
* intends to normalize this as treating click on buttons as focus.
|
|
126
88
|
*
|
|
89
|
+
* @param event
|
|
127
90
|
* @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#Clicking_and_focus
|
|
128
|
-
*
|
|
129
|
-
* @param {SyntheticEvent} event Event for mousedown or mouseup.
|
|
130
91
|
*/
|
|
131
92
|
|
|
132
93
|
const normalizeButtonFocus = useCallback(event => {
|
|
@@ -148,8 +109,6 @@ export default function useFocusOutside(onFocusOutside) {
|
|
|
148
109
|
*
|
|
149
110
|
* Calls the `onFocusOutside` callback in an immediate timeout if focus has
|
|
150
111
|
* move outside the bound element and is still within the document.
|
|
151
|
-
*
|
|
152
|
-
* @param {SyntheticEvent} event Blur event.
|
|
153
112
|
*/
|
|
154
113
|
|
|
155
114
|
const queueBlurCheck = useCallback(event => {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["@wordpress/compose/src/hooks/use-focus-outside/index.
|
|
1
|
+
{"version":3,"sources":["@wordpress/compose/src/hooks/use-focus-outside/index.ts"],"names":["useCallback","useEffect","useRef","INPUT_BUTTON_TYPES","isFocusNormalizedButton","eventTarget","window","HTMLElement","nodeName","includes","type","useFocusOutside","onFocusOutside","currentOnFocusOutside","current","preventBlurCheck","blurCheckTimeoutId","cancelBlurCheck","clearTimeout","normalizeButtonFocus","event","target","isInteractionEnd","queueBlurCheck","persist","setTimeout","document","hasFocus","preventDefault","onFocus","onMouseDown","onMouseUp","onTouchStart","onTouchEnd","onBlur"],"mappings":"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","sourcesContent":["/**\n * External dependencies\n */\nimport type {\n\tFocusEventHandler,\n\tEventHandler,\n\tMouseEventHandler,\n\tTouchEventHandler,\n\tFocusEvent,\n\tMouseEvent,\n\tTouchEvent,\n} from 'react';\n\n/**\n * WordPress dependencies\n */\nimport { useCallback, useEffect, useRef } from '@wordpress/element';\n\n/**\n * Input types which are classified as button types, for use in considering\n * whether element is a (focus-normalized) button.\n */\nconst INPUT_BUTTON_TYPES = [ 'button', 'submit' ];\n\n/**\n * List of HTML button elements subject to focus normalization\n *\n * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#Clicking_and_focus\n */\ntype FocusNormalizedButton =\n\t| HTMLButtonElement\n\t| HTMLLinkElement\n\t| HTMLInputElement;\n\n/**\n * Returns true if the given element is a button element subject to focus\n * normalization, or false otherwise.\n *\n * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#Clicking_and_focus\n *\n * @param eventTarget The target from a mouse or touch event.\n *\n * @return Whether the element is a button element subject to focus normalization.\n */\nfunction isFocusNormalizedButton(\n\teventTarget: EventTarget\n): eventTarget is FocusNormalizedButton {\n\tif ( ! ( eventTarget instanceof window.HTMLElement ) ) {\n\t\treturn false;\n\t}\n\tswitch ( eventTarget.nodeName ) {\n\t\tcase 'A':\n\t\tcase 'BUTTON':\n\t\t\treturn true;\n\n\t\tcase 'INPUT':\n\t\t\treturn INPUT_BUTTON_TYPES.includes(\n\t\t\t\t( eventTarget as HTMLInputElement ).type\n\t\t\t);\n\t}\n\n\treturn false;\n}\n\ntype UseFocusOutsideReturn = {\n\tonFocus: FocusEventHandler;\n\tonMouseDown: MouseEventHandler;\n\tonMouseUp: MouseEventHandler;\n\tonTouchStart: TouchEventHandler;\n\tonTouchEnd: TouchEventHandler;\n\tonBlur: FocusEventHandler;\n};\n\n/**\n * A react hook that can be used to check whether focus has moved outside the\n * element the event handlers are bound to.\n *\n * @param onFocusOutside A callback triggered when focus moves outside\n * the element the event handlers are bound to.\n *\n * @return An object containing event handlers. Bind the event handlers to a\n * wrapping element element to capture when focus moves outside that element.\n */\nexport default function useFocusOutside(\n\tonFocusOutside: ( event: FocusEvent ) => void\n): UseFocusOutsideReturn {\n\tconst currentOnFocusOutside = useRef( onFocusOutside );\n\tuseEffect( () => {\n\t\tcurrentOnFocusOutside.current = onFocusOutside;\n\t}, [ onFocusOutside ] );\n\n\tconst preventBlurCheck = useRef( false );\n\n\tconst blurCheckTimeoutId = useRef< number | undefined >();\n\n\t/**\n\t * Cancel a blur check timeout.\n\t */\n\tconst cancelBlurCheck = useCallback( () => {\n\t\tclearTimeout( blurCheckTimeoutId.current );\n\t}, [] );\n\n\t// Cancel blur checks on unmount.\n\tuseEffect( () => {\n\t\treturn () => cancelBlurCheck();\n\t}, [] );\n\n\t// Cancel a blur check if the callback or ref is no longer provided.\n\tuseEffect( () => {\n\t\tif ( ! onFocusOutside ) {\n\t\t\tcancelBlurCheck();\n\t\t}\n\t}, [ onFocusOutside, cancelBlurCheck ] );\n\n\t/**\n\t * Handles a mousedown or mouseup event to respectively assign and\n\t * unassign a flag for preventing blur check on button elements. Some\n\t * browsers, namely Firefox and Safari, do not emit a focus event on\n\t * button elements when clicked, while others do. The logic here\n\t * intends to normalize this as treating click on buttons as focus.\n\t *\n\t * @param event\n\t * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#Clicking_and_focus\n\t */\n\tconst normalizeButtonFocus: EventHandler< MouseEvent | TouchEvent > =\n\t\tuseCallback( ( event ) => {\n\t\t\tconst { type, target } = event;\n\t\t\tconst isInteractionEnd = [ 'mouseup', 'touchend' ].includes( type );\n\n\t\t\tif ( isInteractionEnd ) {\n\t\t\t\tpreventBlurCheck.current = false;\n\t\t\t} else if ( isFocusNormalizedButton( target ) ) {\n\t\t\t\tpreventBlurCheck.current = true;\n\t\t\t}\n\t\t}, [] );\n\n\t/**\n\t * A callback triggered when a blur event occurs on the element the handler\n\t * is bound to.\n\t *\n\t * Calls the `onFocusOutside` callback in an immediate timeout if focus has\n\t * move outside the bound element and is still within the document.\n\t */\n\tconst queueBlurCheck: FocusEventHandler = useCallback( ( event ) => {\n\t\t// React does not allow using an event reference asynchronously\n\t\t// due to recycling behavior, except when explicitly persisted.\n\t\tevent.persist();\n\n\t\t// Skip blur check if clicking button. See `normalizeButtonFocus`.\n\t\tif ( preventBlurCheck.current ) {\n\t\t\treturn;\n\t\t}\n\n\t\tblurCheckTimeoutId.current = setTimeout( () => {\n\t\t\t// If document is not focused then focus should remain\n\t\t\t// inside the wrapped component and therefore we cancel\n\t\t\t// this blur event thereby leaving focus in place.\n\t\t\t// https://developer.mozilla.org/en-US/docs/Web/API/Document/hasFocus.\n\t\t\tif ( ! document.hasFocus() ) {\n\t\t\t\tevent.preventDefault();\n\t\t\t\treturn;\n\t\t\t}\n\n\t\t\tif ( 'function' === typeof currentOnFocusOutside.current ) {\n\t\t\t\tcurrentOnFocusOutside.current( event );\n\t\t\t}\n\t\t}, 0 );\n\t}, [] );\n\n\treturn {\n\t\tonFocus: cancelBlurCheck,\n\t\tonMouseDown: normalizeButtonFocus,\n\t\tonMouseUp: normalizeButtonFocus,\n\t\tonTouchStart: normalizeButtonFocus,\n\t\tonTouchEnd: normalizeButtonFocus,\n\t\tonBlur: queueBlurCheck,\n\t};\n}\n"]}
|
|
@@ -1,3 +1,7 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* External dependencies
|
|
3
|
+
*/
|
|
4
|
+
|
|
1
5
|
/**
|
|
2
6
|
* Internal dependencies
|
|
3
7
|
*/
|
|
@@ -6,7 +10,7 @@ import useRefEffect from '../use-ref-effect';
|
|
|
6
10
|
* Dispatches a bubbling focus event when the iframe receives focus. Use
|
|
7
11
|
* `onFocus` as usual on the iframe or a parent element.
|
|
8
12
|
*
|
|
9
|
-
* @return
|
|
13
|
+
* @return Ref to pass to the iframe.
|
|
10
14
|
*/
|
|
11
15
|
|
|
12
16
|
export default function useFocusableIframe() {
|
|
@@ -26,7 +30,6 @@ export default function useFocusableIframe() {
|
|
|
26
30
|
|
|
27
31
|
function checkFocus() {
|
|
28
32
|
if (ownerDocument && ownerDocument.activeElement === element) {
|
|
29
|
-
/** @type {HTMLElement} */
|
|
30
33
|
element.focus();
|
|
31
34
|
}
|
|
32
35
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["@wordpress/compose/src/hooks/use-focusable-iframe/index.
|
|
1
|
+
{"version":3,"sources":["@wordpress/compose/src/hooks/use-focusable-iframe/index.ts"],"names":["useRefEffect","useFocusableIframe","element","ownerDocument","defaultView","checkFocus","activeElement","focus","addEventListener","removeEventListener"],"mappings":"AAAA;AACA;AACA;;AAGA;AACA;AACA;AACA,OAAOA,YAAP,MAAyB,mBAAzB;AAEA;AACA;AACA;AACA;AACA;AACA;;AACA,eAAe,SAASC,kBAAT,GAAgE;AAC9E,SAAOD,YAAY,CAAIE,OAAF,IAAe;AACnC,UAAM;AAAEC,MAAAA;AAAF,QAAoBD,OAA1B;AACA,QAAK,CAAEC,aAAP,EAAuB;AACvB,UAAM;AAAEC,MAAAA;AAAF,QAAkBD,aAAxB;AACA,QAAK,CAAEC,WAAP,EAAqB;AAErB;AACF;AACA;AACA;;AACE,aAASC,UAAT,GAAsB;AACrB,UAAKF,aAAa,IAAIA,aAAa,CAACG,aAAd,KAAgCJ,OAAtD,EAAgE;AAC7DA,QAAAA,OAAF,CAA2BK,KAA3B;AACA;AACD;;AAEDH,IAAAA,WAAW,CAACI,gBAAZ,CAA8B,MAA9B,EAAsCH,UAAtC;AACA,WAAO,MAAM;AACZD,MAAAA,WAAW,CAACK,mBAAZ,CAAiC,MAAjC,EAAyCJ,UAAzC;AACA,KAFD;AAGA,GApBkB,EAoBhB,EApBgB,CAAnB;AAqBA","sourcesContent":["/**\n * External dependencies\n */\nimport type { RefCallback } from 'react';\n\n/**\n * Internal dependencies\n */\nimport useRefEffect from '../use-ref-effect';\n\n/**\n * Dispatches a bubbling focus event when the iframe receives focus. Use\n * `onFocus` as usual on the iframe or a parent element.\n *\n * @return Ref to pass to the iframe.\n */\nexport default function useFocusableIframe(): RefCallback< HTMLIFrameElement > {\n\treturn useRefEffect( ( element ) => {\n\t\tconst { ownerDocument } = element;\n\t\tif ( ! ownerDocument ) return;\n\t\tconst { defaultView } = ownerDocument;\n\t\tif ( ! defaultView ) return;\n\n\t\t/**\n\t\t * Checks whether the iframe is the activeElement, inferring that it has\n\t\t * then received focus, and dispatches a focus event.\n\t\t */\n\t\tfunction checkFocus() {\n\t\t\tif ( ownerDocument && ownerDocument.activeElement === element ) {\n\t\t\t\t( element as HTMLElement ).focus();\n\t\t\t}\n\t\t}\n\n\t\tdefaultView.addEventListener( 'blur', checkFocus );\n\t\treturn () => {\n\t\t\tdefaultView.removeEventListener( 'blur', checkFocus );\n\t\t};\n\t}, [] );\n}\n"]}
|
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
*/
|
|
4
4
|
import type { RefCallback, SyntheticEvent } from 'react';
|
|
5
5
|
import useFocusOnMount from '../use-focus-on-mount';
|
|
6
|
-
import
|
|
6
|
+
import useFocusOutside from '../use-focus-outside';
|
|
7
7
|
declare type DialogOptions = {
|
|
8
8
|
focusOnMount?: Parameters<typeof useFocusOnMount>[0];
|
|
9
9
|
onClose?: () => void;
|
|
@@ -16,7 +16,7 @@ declare type DialogOptions = {
|
|
|
16
16
|
};
|
|
17
17
|
declare type useDialogReturn = [
|
|
18
18
|
RefCallback<HTMLElement>,
|
|
19
|
-
|
|
19
|
+
ReturnType<typeof useFocusOutside> & Pick<HTMLElement, 'tabIndex'>
|
|
20
20
|
];
|
|
21
21
|
/**
|
|
22
22
|
* Returns a ref and props to apply to a dialog wrapper to enable the following behaviors:
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/hooks/use-dialog/index.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,OAAO,KAAK,
|
|
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,MAAM,uBAAuB,CAAC;AAEpD,OAAO,eAAe,MAAM,sBAAsB,CAAC;AAGnD,aAAK,aAAa,GAAG;IACpB,YAAY,CAAC,EAAE,UAAU,CAAE,OAAO,eAAe,CAAE,CAAE,CAAC,CAAE,CAAC;IACzD,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,aAAK,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,CA+C5D;AAED,eAAe,SAAS,CAAC"}
|