@wordpress/compose 5.18.0 → 5.20.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 CHANGED
@@ -2,6 +2,16 @@
2
2
 
3
3
  ## Unreleased
4
4
 
5
+ ## 5.20.0 (2022-11-16)
6
+
7
+ ## 5.19.0 (2022-11-02)
8
+
9
+ ### Internal
10
+
11
+ - `useDisabled`: Refactor the component to rely on the HTML `inert` attribute ([#44865](https://github.com/WordPress/gutenberg/pull/44865)).
12
+ - `useFocusOutside`: Refactor the hook to TypeScript, rewrite tests using modern RTL and jest features ([#45317](https://github.com/WordPress/gutenberg/pull/45317)).
13
+ - `useFocusableIframe`: Refactor to TypeScript ([#45428](https://github.com/WordPress/gutenberg/pull/45428)).
14
+
5
15
  ## 5.18.0 (2022-10-19)
6
16
 
7
17
  ## 5.17.0 (2022-10-05)
package/README.md CHANGED
@@ -326,7 +326,7 @@ Dispatches a bubbling focus event when the iframe receives focus. Use
326
326
 
327
327
  _Returns_
328
328
 
329
- - `Object`: Ref to pass to the iframe.
329
+ - `RefCallback< HTMLIFrameElement >`: Ref to pass to the iframe.
330
330
 
331
331
  ### useFocusOnMount
332
332
 
@@ -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;;AA2BA;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,IAAY;AACjD,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 { KeyboardEvent, 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';\nimport type { FocusOutsideReturnValue } from '../use-focus-outside';\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\tFocusOutsideReturnValue & 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 ) => {\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
+ {"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
- * @typedef {HTMLButtonElement | HTMLLinkElement | HTMLInputElement} FocusNormalizedButton
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 {EventTarget} eventTarget The target from a mouse or touch event.
35
+ * @param eventTarget The target from a mouse or touch event.
35
36
  *
36
- * @return {eventTarget is FocusNormalizedButton} Whether element is a button.
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 {EventCallback} onFocusOutside A callback triggered when focus moves outside
92
- * the element the event handlers are bound to.
60
+ * @param onFocusOutside A callback triggered when focus moves outside
61
+ * the element the event handlers are bound to.
93
62
  *
94
- * @return {FocusOutsideReturnValue} An object containing event handlers. Bind the event handlers
95
- * to a wrapping element element to capture when focus moves
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.js"],"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 * 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 *\n * @type {string[]}\n */\nconst INPUT_BUTTON_TYPES = [ 'button', 'submit' ];\n\n/**\n * @typedef {HTMLButtonElement | HTMLLinkElement | HTMLInputElement} FocusNormalizedButton\n */\n\n// Disable reason: Rule doesn't support predicate return types.\n/* eslint-disable jsdoc/valid-types */\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} eventTarget The target from a mouse or touch event.\n *\n * @return {eventTarget is FocusNormalizedButton} Whether element is a button.\n */\nfunction isFocusNormalizedButton( eventTarget ) {\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/** @type {HTMLInputElement} */ ( eventTarget ).type\n\t\t\t);\n\t}\n\n\treturn false;\n}\n/* eslint-enable jsdoc/valid-types */\n\n/**\n * @typedef {import('react').SyntheticEvent} SyntheticEvent\n */\n\n/**\n * @callback EventCallback\n * @param {SyntheticEvent} event input related event.\n */\n\n/**\n * @typedef FocusOutsideReactElement\n * @property {EventCallback} handleFocusOutside callback for a focus outside event.\n */\n\n/**\n * @typedef {import('react').MutableRefObject<FocusOutsideReactElement | undefined>} FocusOutsideRef\n */\n\n/**\n * @typedef {Object} FocusOutsideReturnValue\n * @property {EventCallback} onFocus An event handler for focus events.\n * @property {EventCallback} onBlur An event handler for blur events.\n * @property {EventCallback} onMouseDown An event handler for mouse down events.\n * @property {EventCallback} onMouseUp An event handler for mouse up events.\n * @property {EventCallback} onTouchStart An event handler for touch start events.\n * @property {EventCallback} onTouchEnd An event handler for touch end events.\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 {EventCallback} onFocusOutside A callback triggered when focus moves outside\n * the element the event handlers are bound to.\n *\n * @return {FocusOutsideReturnValue} An object containing event handlers. Bind the event handlers\n * to a wrapping element element to capture when focus moves\n * outside that element.\n */\nexport default function useFocusOutside( onFocusOutside ) {\n\tconst currentOnFocusOutside = useRef( onFocusOutside );\n\tuseEffect( () => {\n\t\tcurrentOnFocusOutside.current = onFocusOutside;\n\t}, [ onFocusOutside ] );\n\n\tconst preventBlurCheck = useRef( false );\n\n\t/**\n\t * @type {import('react').MutableRefObject<number | undefined>}\n\t */\n\tconst blurCheckTimeoutId = useRef();\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 * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#Clicking_and_focus\n\t *\n\t * @param {SyntheticEvent} event Event for mousedown or mouseup.\n\t */\n\tconst normalizeButtonFocus = useCallback( ( event ) => {\n\t\tconst { type, target } = event;\n\t\tconst isInteractionEnd = [ 'mouseup', 'touchend' ].includes( type );\n\n\t\tif ( isInteractionEnd ) {\n\t\t\tpreventBlurCheck.current = false;\n\t\t} else if ( isFocusNormalizedButton( target ) ) {\n\t\t\tpreventBlurCheck.current = true;\n\t\t}\n\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\t * @param {SyntheticEvent} event Blur event.\n\t */\n\tconst queueBlurCheck = 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
+ {"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 {Object} Ref to pass to the iframe.
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.js"],"names":["useFocusableIframe","element","ownerDocument","defaultView","checkFocus","activeElement","focus","addEventListener","removeEventListener"],"mappings":";;;;;;;;;AAGA;;AAHA;AACA;AACA;;AAGA;AACA;AACA;AACA;AACA;AACA;AACe,SAASA,kBAAT,GAA8B;AAC5C,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;AAC/D;AAA6BA,QAAAA,OAAF,CAAYK,KAAZ;AAC3B;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 * 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 {Object} Ref to pass to the iframe.\n */\nexport default function useFocusableIframe() {\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/** @type {HTMLElement} */ ( element ).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
+ {"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;;AAsBA;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,IAAY;AACjD,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 { KeyboardEvent, 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';\nimport type { FocusOutsideReturnValue } from '../use-focus-outside';\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\tFocusOutsideReturnValue & 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 ) => {\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
+ {"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
- * @typedef {HTMLButtonElement | HTMLLinkElement | HTMLInputElement} FocusNormalizedButton
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 {EventTarget} eventTarget The target from a mouse or touch event.
27
+ * @param eventTarget The target from a mouse or touch event.
27
28
  *
28
- * @return {eventTarget is FocusNormalizedButton} Whether element is a button.
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 {EventCallback} onFocusOutside A callback triggered when focus moves outside
84
- * the element the event handlers are bound to.
52
+ * @param onFocusOutside A callback triggered when focus moves outside
53
+ * the element the event handlers are bound to.
85
54
  *
86
- * @return {FocusOutsideReturnValue} An object containing event handlers. Bind the event handlers
87
- * to a wrapping element element to capture when focus moves
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.js"],"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 * 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 *\n * @type {string[]}\n */\nconst INPUT_BUTTON_TYPES = [ 'button', 'submit' ];\n\n/**\n * @typedef {HTMLButtonElement | HTMLLinkElement | HTMLInputElement} FocusNormalizedButton\n */\n\n// Disable reason: Rule doesn't support predicate return types.\n/* eslint-disable jsdoc/valid-types */\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} eventTarget The target from a mouse or touch event.\n *\n * @return {eventTarget is FocusNormalizedButton} Whether element is a button.\n */\nfunction isFocusNormalizedButton( eventTarget ) {\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/** @type {HTMLInputElement} */ ( eventTarget ).type\n\t\t\t);\n\t}\n\n\treturn false;\n}\n/* eslint-enable jsdoc/valid-types */\n\n/**\n * @typedef {import('react').SyntheticEvent} SyntheticEvent\n */\n\n/**\n * @callback EventCallback\n * @param {SyntheticEvent} event input related event.\n */\n\n/**\n * @typedef FocusOutsideReactElement\n * @property {EventCallback} handleFocusOutside callback for a focus outside event.\n */\n\n/**\n * @typedef {import('react').MutableRefObject<FocusOutsideReactElement | undefined>} FocusOutsideRef\n */\n\n/**\n * @typedef {Object} FocusOutsideReturnValue\n * @property {EventCallback} onFocus An event handler for focus events.\n * @property {EventCallback} onBlur An event handler for blur events.\n * @property {EventCallback} onMouseDown An event handler for mouse down events.\n * @property {EventCallback} onMouseUp An event handler for mouse up events.\n * @property {EventCallback} onTouchStart An event handler for touch start events.\n * @property {EventCallback} onTouchEnd An event handler for touch end events.\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 {EventCallback} onFocusOutside A callback triggered when focus moves outside\n * the element the event handlers are bound to.\n *\n * @return {FocusOutsideReturnValue} An object containing event handlers. Bind the event handlers\n * to a wrapping element element to capture when focus moves\n * outside that element.\n */\nexport default function useFocusOutside( onFocusOutside ) {\n\tconst currentOnFocusOutside = useRef( onFocusOutside );\n\tuseEffect( () => {\n\t\tcurrentOnFocusOutside.current = onFocusOutside;\n\t}, [ onFocusOutside ] );\n\n\tconst preventBlurCheck = useRef( false );\n\n\t/**\n\t * @type {import('react').MutableRefObject<number | undefined>}\n\t */\n\tconst blurCheckTimeoutId = useRef();\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 * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#Clicking_and_focus\n\t *\n\t * @param {SyntheticEvent} event Event for mousedown or mouseup.\n\t */\n\tconst normalizeButtonFocus = useCallback( ( event ) => {\n\t\tconst { type, target } = event;\n\t\tconst isInteractionEnd = [ 'mouseup', 'touchend' ].includes( type );\n\n\t\tif ( isInteractionEnd ) {\n\t\t\tpreventBlurCheck.current = false;\n\t\t} else if ( isFocusNormalizedButton( target ) ) {\n\t\t\tpreventBlurCheck.current = true;\n\t\t}\n\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\t * @param {SyntheticEvent} event Blur event.\n\t */\n\tconst queueBlurCheck = 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
+ {"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":"AAAA;AACA;AACA;;AAWA;AACA;AACA;AACA,SAASA,WAAT,EAAsBC,SAAtB,EAAiCC,MAAjC,QAA+C,oBAA/C;AAEA;AACA;AACA;AACA;;AACA,MAAMC,kBAAkB,GAAG,CAAE,QAAF,EAAY,QAAZ,CAA3B;AAEA;AACA;AACA;AACA;AACA;;AAMA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,SAASC,uBAAT,CACCC,WADD,EAEwC;AACvC,MAAK,EAAIA,WAAW,YAAYC,MAAM,CAACC,WAAlC,CAAL,EAAuD;AACtD,WAAO,KAAP;AACA;;AACD,UAASF,WAAW,CAACG,QAArB;AACC,SAAK,GAAL;AACA,SAAK,QAAL;AACC,aAAO,IAAP;;AAED,SAAK,OAAL;AACC,aAAOL,kBAAkB,CAACM,QAAnB,CACJJ,WAAF,CAAoCK,IAD9B,CAAP;AANF;;AAWA,SAAO,KAAP;AACA;;AAWD;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,eAAe,SAASC,eAAT,CACdC,cADc,EAEU;AACxB,QAAMC,qBAAqB,GAAGX,MAAM,CAAEU,cAAF,CAApC;AACAX,EAAAA,SAAS,CAAE,MAAM;AAChBY,IAAAA,qBAAqB,CAACC,OAAtB,GAAgCF,cAAhC;AACA,GAFQ,EAEN,CAAEA,cAAF,CAFM,CAAT;AAIA,QAAMG,gBAAgB,GAAGb,MAAM,CAAE,KAAF,CAA/B;AAEA,QAAMc,kBAAkB,GAAGd,MAAM,EAAjC;AAEA;AACD;AACA;;AACC,QAAMe,eAAe,GAAGjB,WAAW,CAAE,MAAM;AAC1CkB,IAAAA,YAAY,CAAEF,kBAAkB,CAACF,OAArB,CAAZ;AACA,GAFkC,EAEhC,EAFgC,CAAnC,CAbwB,CAiBxB;;AACAb,EAAAA,SAAS,CAAE,MAAM;AAChB,WAAO,MAAMgB,eAAe,EAA5B;AACA,GAFQ,EAEN,EAFM,CAAT,CAlBwB,CAsBxB;;AACAhB,EAAAA,SAAS,CAAE,MAAM;AAChB,QAAK,CAAEW,cAAP,EAAwB;AACvBK,MAAAA,eAAe;AACf;AACD,GAJQ,EAIN,CAAEL,cAAF,EAAkBK,eAAlB,CAJM,CAAT;AAMA;AACD;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AACC,QAAME,oBAA6D,GAClEnB,WAAW,CAAIoB,KAAF,IAAa;AACzB,UAAM;AAAEV,MAAAA,IAAF;AAAQW,MAAAA;AAAR,QAAmBD,KAAzB;AACA,UAAME,gBAAgB,GAAG,CAAE,SAAF,EAAa,UAAb,EAA0Bb,QAA1B,CAAoCC,IAApC,CAAzB;;AAEA,QAAKY,gBAAL,EAAwB;AACvBP,MAAAA,gBAAgB,CAACD,OAAjB,GAA2B,KAA3B;AACA,KAFD,MAEO,IAAKV,uBAAuB,CAAEiB,MAAF,CAA5B,EAAyC;AAC/CN,MAAAA,gBAAgB,CAACD,OAAjB,GAA2B,IAA3B;AACA;AACD,GATU,EASR,EATQ,CADZ;AAYA;AACD;AACA;AACA;AACA;AACA;AACA;;AACC,QAAMS,cAAiC,GAAGvB,WAAW,CAAIoB,KAAF,IAAa;AACnE;AACA;AACAA,IAAAA,KAAK,CAACI,OAAN,GAHmE,CAKnE;;AACA,QAAKT,gBAAgB,CAACD,OAAtB,EAAgC;AAC/B;AACA;;AAEDE,IAAAA,kBAAkB,CAACF,OAAnB,GAA6BW,UAAU,CAAE,MAAM;AAC9C;AACA;AACA;AACA;AACA,UAAK,CAAEC,QAAQ,CAACC,QAAT,EAAP,EAA6B;AAC5BP,QAAAA,KAAK,CAACQ,cAAN;AACA;AACA;;AAED,UAAK,eAAe,OAAOf,qBAAqB,CAACC,OAAjD,EAA2D;AAC1DD,QAAAA,qBAAqB,CAACC,OAAtB,CAA+BM,KAA/B;AACA;AACD,KAbsC,EAapC,CAboC,CAAvC;AAcA,GAxBoD,EAwBlD,EAxBkD,CAArD;AA0BA,SAAO;AACNS,IAAAA,OAAO,EAAEZ,eADH;AAENa,IAAAA,WAAW,EAAEX,oBAFP;AAGNY,IAAAA,SAAS,EAAEZ,oBAHL;AAINa,IAAAA,YAAY,EAAEb,oBAJR;AAKNc,IAAAA,UAAU,EAAEd,oBALN;AAMNe,IAAAA,MAAM,EAAEX;AANF,GAAP;AAQA","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 {Object} Ref to pass to the iframe.
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.js"],"names":["useRefEffect","useFocusableIframe","element","ownerDocument","defaultView","checkFocus","activeElement","focus","addEventListener","removeEventListener"],"mappings":"AAAA;AACA;AACA;AACA,OAAOA,YAAP,MAAyB,mBAAzB;AAEA;AACA;AACA;AACA;AACA;AACA;;AACA,eAAe,SAASC,kBAAT,GAA8B;AAC5C,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;AAC/D;AAA6BA,QAAAA,OAAF,CAAYK,KAAZ;AAC3B;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 * 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 {Object} Ref to pass to the iframe.\n */\nexport default function useFocusableIframe() {\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/** @type {HTMLElement} */ ( element ).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
+ {"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 type { FocusOutsideReturnValue } from '../use-focus-outside';
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
- FocusOutsideReturnValue & Pick<HTMLElement, 'tabIndex'>
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,EAAiB,WAAW,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AAYxE,OAAO,eAAe,MAAM,uBAAuB,CAAC;AAIpD,OAAO,KAAK,EAAE,uBAAuB,EAAE,MAAM,sBAAsB,CAAC;AAEpE,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,uBAAuB,GAAG,IAAI,CAAE,WAAW,EAAE,UAAU,CAAE;CACzD,CAAC;AAEF;;;;;;;;GAQG;AACH,iBAAS,SAAS,CAAE,OAAO,EAAE,aAAa,GAAI,eAAe,CA+C5D;AAED,eAAe,SAAS,CAAC"}
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"}