@wordpress/compose 6.16.0 → 6.17.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 +2 -0
- package/build/higher-order/compose.js +0 -2
- package/build/higher-order/compose.js.map +1 -1
- package/build/higher-order/if-condition/index.js +2 -6
- package/build/higher-order/if-condition/index.js.map +1 -1
- package/build/higher-order/pipe.js +1 -5
- package/build/higher-order/pipe.js.map +1 -1
- package/build/higher-order/pure/index.js +2 -10
- package/build/higher-order/pure/index.js.map +1 -1
- package/build/higher-order/with-global-events/index.js +13 -32
- package/build/higher-order/with-global-events/index.js.map +1 -1
- package/build/higher-order/with-global-events/listener.js +5 -28
- package/build/higher-order/with-global-events/listener.js.map +1 -1
- package/build/higher-order/with-instance-id/index.js +4 -8
- package/build/higher-order/with-instance-id/index.js.map +1 -1
- package/build/higher-order/with-preferred-color-scheme/index.native.js +3 -6
- package/build/higher-order/with-preferred-color-scheme/index.native.js.map +1 -1
- package/build/higher-order/with-safe-timeout/index.js +4 -14
- package/build/higher-order/with-safe-timeout/index.js.map +1 -1
- package/build/higher-order/with-state/index.js +3 -11
- package/build/higher-order/with-state/index.js.map +1 -1
- package/build/hooks/use-async-list/index.js +1 -14
- package/build/hooks/use-async-list/index.js.map +1 -1
- package/build/hooks/use-constrained-tabbing/index.js +14 -30
- package/build/hooks/use-constrained-tabbing/index.js.map +1 -1
- package/build/hooks/use-constrained-tabbing/index.native.js +4 -4
- package/build/hooks/use-constrained-tabbing/index.native.js.map +1 -1
- package/build/hooks/use-copy-on-click/index.js +6 -15
- package/build/hooks/use-copy-on-click/index.js.map +1 -1
- package/build/hooks/use-copy-to-clipboard/index.js +3 -11
- package/build/hooks/use-copy-to-clipboard/index.js.map +1 -1
- package/build/hooks/use-debounce/index.js +0 -4
- package/build/hooks/use-debounce/index.js.map +1 -1
- package/build/hooks/use-dialog/index.js +2 -12
- package/build/hooks/use-dialog/index.js.map +1 -1
- package/build/hooks/use-disabled/index.js +5 -15
- package/build/hooks/use-disabled/index.js.map +1 -1
- package/build/hooks/use-dragging/index.js +4 -11
- package/build/hooks/use-dragging/index.js.map +1 -1
- package/build/hooks/use-drop-zone/index.js +27 -66
- package/build/hooks/use-drop-zone/index.js.map +1 -1
- package/build/hooks/use-fixed-window-list/index.js +8 -34
- package/build/hooks/use-fixed-window-list/index.js.map +1 -1
- package/build/hooks/use-focus-on-mount/index.js +3 -14
- package/build/hooks/use-focus-on-mount/index.js.map +1 -1
- package/build/hooks/use-focus-outside/index.js +13 -19
- package/build/hooks/use-focus-outside/index.js.map +1 -1
- package/build/hooks/use-focus-outside/index.native.js +13 -21
- package/build/hooks/use-focus-outside/index.native.js.map +1 -1
- package/build/hooks/use-focus-return/index.js +7 -15
- package/build/hooks/use-focus-return/index.js.map +1 -1
- package/build/hooks/use-focusable-iframe/index.js +1 -5
- package/build/hooks/use-focusable-iframe/index.js.map +1 -1
- package/build/hooks/use-instance-id/index.js +3 -5
- package/build/hooks/use-instance-id/index.js.map +1 -1
- package/build/hooks/use-isomorphic-layout-effect/index.js +0 -2
- package/build/hooks/use-isomorphic-layout-effect/index.js.map +1 -1
- package/build/hooks/use-keyboard-shortcut/index.js +12 -28
- package/build/hooks/use-keyboard-shortcut/index.js.map +1 -1
- package/build/hooks/use-keyboard-shortcut/index.native.js +0 -2
- package/build/hooks/use-keyboard-shortcut/index.native.js.map +1 -1
- package/build/hooks/use-media-query/index.js +1 -9
- package/build/hooks/use-media-query/index.js.map +1 -1
- package/build/hooks/use-merge-refs/index.js +18 -24
- package/build/hooks/use-merge-refs/index.js.map +1 -1
- package/build/hooks/use-preferred-color-scheme/index.android.js +0 -5
- package/build/hooks/use-preferred-color-scheme/index.android.js.map +1 -1
- package/build/hooks/use-preferred-color-scheme/index.ios.js +0 -2
- package/build/hooks/use-preferred-color-scheme/index.ios.js.map +1 -1
- package/build/hooks/use-preferred-color-scheme-style/index.native.js +2 -5
- package/build/hooks/use-preferred-color-scheme-style/index.native.js.map +1 -1
- package/build/hooks/use-previous/index.js +3 -4
- package/build/hooks/use-previous/index.js.map +1 -1
- package/build/hooks/use-reduced-motion/index.js +0 -4
- package/build/hooks/use-reduced-motion/index.js.map +1 -1
- package/build/hooks/use-ref-effect/index.js +0 -2
- package/build/hooks/use-ref-effect/index.js.map +1 -1
- package/build/hooks/use-resize-observer/index.js +23 -30
- package/build/hooks/use-resize-observer/index.js.map +1 -1
- package/build/hooks/use-resize-observer/index.native.js +0 -6
- package/build/hooks/use-resize-observer/index.native.js.map +1 -1
- package/build/hooks/use-throttle/index.js +0 -4
- package/build/hooks/use-throttle/index.js.map +1 -1
- package/build/hooks/use-viewport-match/index.js +4 -13
- package/build/hooks/use-viewport-match/index.js.map +1 -1
- package/build/hooks/use-warn-on-change/index.js +4 -14
- package/build/hooks/use-warn-on-change/index.js.map +1 -1
- package/build/index.js +0 -41
- package/build/index.js.map +1 -1
- package/build/index.native.js +0 -33
- package/build/index.native.js.map +1 -1
- package/build/utils/create-higher-order-component/index.js +1 -4
- package/build/utils/create-higher-order-component/index.js.map +1 -1
- package/build/utils/debounce/index.js +12 -37
- package/build/utils/debounce/index.js.map +1 -1
- package/build/utils/throttle/index.js +0 -5
- package/build/utils/throttle/index.js.map +1 -1
- package/build-module/higher-order/compose.js +1 -1
- package/build-module/higher-order/compose.js.map +1 -1
- package/build-module/higher-order/if-condition/index.js +3 -5
- package/build-module/higher-order/if-condition/index.js.map +1 -1
- package/build-module/higher-order/pipe.js +1 -4
- package/build-module/higher-order/pipe.js.map +1 -1
- package/build-module/higher-order/pure/index.js +4 -8
- package/build-module/higher-order/pure/index.js.map +1 -1
- package/build-module/higher-order/with-global-events/index.js +15 -29
- package/build-module/higher-order/with-global-events/index.js.map +1 -1
- package/build-module/higher-order/with-global-events/listener.js +5 -27
- package/build-module/higher-order/with-global-events/listener.js.map +1 -1
- package/build-module/higher-order/with-instance-id/index.js +5 -5
- package/build-module/higher-order/with-instance-id/index.js.map +1 -1
- package/build-module/higher-order/with-preferred-color-scheme/index.native.js +3 -3
- package/build-module/higher-order/with-preferred-color-scheme/index.native.js.map +1 -1
- package/build-module/higher-order/with-safe-timeout/index.js +6 -8
- package/build-module/higher-order/with-safe-timeout/index.js.map +1 -1
- package/build-module/higher-order/with-state/index.js +5 -9
- package/build-module/higher-order/with-state/index.js.map +1 -1
- package/build-module/hooks/use-async-list/index.js +1 -12
- package/build-module/hooks/use-async-list/index.js.map +1 -1
- package/build-module/hooks/use-constrained-tabbing/index.js +16 -27
- package/build-module/hooks/use-constrained-tabbing/index.js.map +1 -1
- package/build-module/hooks/use-constrained-tabbing/index.native.js +3 -3
- package/build-module/hooks/use-constrained-tabbing/index.native.js.map +1 -1
- package/build-module/hooks/use-copy-on-click/index.js +8 -12
- package/build-module/hooks/use-copy-on-click/index.js.map +1 -1
- package/build-module/hooks/use-copy-to-clipboard/index.js +6 -9
- package/build-module/hooks/use-copy-to-clipboard/index.js.map +1 -1
- package/build-module/hooks/use-debounce/index.js +3 -3
- package/build-module/hooks/use-debounce/index.js.map +1 -1
- package/build-module/hooks/use-dialog/index.js +3 -5
- package/build-module/hooks/use-dialog/index.js.map +1 -1
- package/build-module/hooks/use-disabled/index.js +6 -12
- package/build-module/hooks/use-disabled/index.js.map +1 -1
- package/build-module/hooks/use-dragging/index.js +6 -9
- package/build-module/hooks/use-dragging/index.js.map +1 -1
- package/build-module/hooks/use-drop-zone/index.js +29 -64
- package/build-module/hooks/use-drop-zone/index.js.map +1 -1
- package/build-module/hooks/use-fixed-window-list/index.js +8 -30
- package/build-module/hooks/use-fixed-window-list/index.js.map +1 -1
- package/build-module/hooks/use-focus-on-mount/index.js +4 -12
- package/build-module/hooks/use-focus-on-mount/index.js.map +1 -1
- package/build-module/hooks/use-focus-outside/index.js +14 -18
- package/build-module/hooks/use-focus-outside/index.js.map +1 -1
- package/build-module/hooks/use-focus-outside/index.native.js +14 -20
- package/build-module/hooks/use-focus-outside/index.native.js.map +1 -1
- package/build-module/hooks/use-focus-return/index.js +8 -14
- package/build-module/hooks/use-focus-return/index.js.map +1 -1
- package/build-module/hooks/use-focusable-iframe/index.js +2 -3
- package/build-module/hooks/use-focusable-iframe/index.js.map +1 -1
- package/build-module/hooks/use-instance-id/index.js +2 -3
- package/build-module/hooks/use-instance-id/index.js.map +1 -1
- package/build-module/hooks/use-isomorphic-layout-effect/index.js +1 -1
- package/build-module/hooks/use-isomorphic-layout-effect/index.js.map +1 -1
- package/build-module/hooks/use-keyboard-shortcut/index.js +14 -24
- package/build-module/hooks/use-keyboard-shortcut/index.js.map +1 -1
- package/build-module/hooks/use-keyboard-shortcut/index.native.js +0 -1
- package/build-module/hooks/use-keyboard-shortcut/index.native.js.map +1 -1
- package/build-module/hooks/use-media-query/index.js +2 -8
- package/build-module/hooks/use-media-query/index.js.map +1 -1
- package/build-module/hooks/use-merge-refs/index.js +19 -23
- package/build-module/hooks/use-merge-refs/index.js.map +1 -1
- package/build-module/hooks/use-preferred-color-scheme/index.android.js +1 -3
- package/build-module/hooks/use-preferred-color-scheme/index.android.js.map +1 -1
- package/build-module/hooks/use-preferred-color-scheme/index.ios.js +1 -1
- package/build-module/hooks/use-preferred-color-scheme/index.ios.js.map +1 -1
- package/build-module/hooks/use-preferred-color-scheme-style/index.native.js +3 -3
- package/build-module/hooks/use-preferred-color-scheme-style/index.native.js.map +1 -1
- package/build-module/hooks/use-previous/index.js +4 -3
- package/build-module/hooks/use-previous/index.js.map +1 -1
- package/build-module/hooks/use-reduced-motion/index.js +1 -2
- package/build-module/hooks/use-reduced-motion/index.js.map +1 -1
- package/build-module/hooks/use-ref-effect/index.js +1 -1
- package/build-module/hooks/use-ref-effect/index.js.map +1 -1
- package/build-module/hooks/use-resize-observer/index.js +22 -30
- package/build-module/hooks/use-resize-observer/index.js.map +1 -1
- package/build-module/hooks/use-resize-observer/index.native.js +1 -6
- package/build-module/hooks/use-resize-observer/index.native.js.map +1 -1
- package/build-module/hooks/use-throttle/index.js +3 -3
- package/build-module/hooks/use-throttle/index.js.map +1 -1
- package/build-module/hooks/use-viewport-match/index.js +6 -11
- package/build-module/hooks/use-viewport-match/index.js.map +1 -1
- package/build-module/hooks/use-warn-on-change/index.js +6 -12
- package/build-module/hooks/use-warn-on-change/index.js.map +1 -1
- package/build-module/index.js +10 -7
- package/build-module/index.js.map +1 -1
- package/build-module/index.native.js +10 -7
- package/build-module/index.native.js.map +1 -1
- package/build-module/utils/create-higher-order-component/index.js +1 -2
- package/build-module/utils/create-higher-order-component/index.js.map +1 -1
- package/build-module/utils/debounce/index.js +12 -35
- package/build-module/utils/debounce/index.js.map +1 -1
- package/build-module/utils/throttle/index.js +0 -3
- package/build-module/utils/throttle/index.js.map +1 -1
- package/build-types/higher-order/with-instance-id/index.d.ts +1 -1
- package/build-types/higher-order/with-instance-id/index.d.ts.map +1 -1
- package/build-types/higher-order/with-safe-timeout/index.d.ts +1 -1
- package/build-types/higher-order/with-safe-timeout/index.d.ts.map +1 -1
- package/build-types/hooks/use-disabled/index.d.ts +1 -1
- package/build-types/hooks/use-disabled/index.d.ts.map +1 -1
- package/build-types/hooks/use-isomorphic-layout-effect/index.d.ts +1 -1
- package/build-types/hooks/use-isomorphic-layout-effect/index.d.ts.map +1 -1
- package/build-types/hooks/use-viewport-match/index.d.ts +1 -1
- package/package.json +8 -8
- package/src/higher-order/with-instance-id/index.tsx +2 -2
- package/src/higher-order/with-safe-timeout/index.tsx +2 -2
- package/src/hooks/use-resize-observer/index.native.js +0 -1
- package/tsconfig.tsbuildinfo +1 -1
|
@@ -4,11 +4,8 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
4
4
|
value: true
|
|
5
5
|
});
|
|
6
6
|
exports.default = useFocusOnMount;
|
|
7
|
-
|
|
8
7
|
var _element = require("@wordpress/element");
|
|
9
|
-
|
|
10
8
|
var _dom = require("@wordpress/dom");
|
|
11
|
-
|
|
12
9
|
/**
|
|
13
10
|
* WordPress dependencies
|
|
14
11
|
*/
|
|
@@ -36,13 +33,13 @@ var _dom = require("@wordpress/dom");
|
|
|
36
33
|
*/
|
|
37
34
|
function useFocusOnMount(focusOnMount = 'firstElement') {
|
|
38
35
|
const focusOnMountRef = (0, _element.useRef)(focusOnMount);
|
|
36
|
+
|
|
39
37
|
/**
|
|
40
38
|
* Sets focus on a DOM element.
|
|
41
39
|
*
|
|
42
40
|
* @param {HTMLElement} target The DOM element to set focus to.
|
|
43
41
|
* @return {void}
|
|
44
42
|
*/
|
|
45
|
-
|
|
46
43
|
const setFocus = target => {
|
|
47
44
|
target.focus({
|
|
48
45
|
// When focusing newly mounted dialogs,
|
|
@@ -51,9 +48,8 @@ function useFocusOnMount(focusOnMount = 'firstElement') {
|
|
|
51
48
|
preventScroll: true
|
|
52
49
|
});
|
|
53
50
|
};
|
|
54
|
-
/** @type {import('react').MutableRefObject<ReturnType<setTimeout> | undefined>} */
|
|
55
|
-
|
|
56
51
|
|
|
52
|
+
/** @type {import('react').MutableRefObject<ReturnType<setTimeout> | undefined>} */
|
|
57
53
|
const timerId = (0, _element.useRef)();
|
|
58
54
|
(0, _element.useEffect)(() => {
|
|
59
55
|
focusOnMountRef.current = focusOnMount;
|
|
@@ -67,28 +63,21 @@ function useFocusOnMount(focusOnMount = 'firstElement') {
|
|
|
67
63
|
}, []);
|
|
68
64
|
return (0, _element.useCallback)(node => {
|
|
69
65
|
var _node$ownerDocument$a;
|
|
70
|
-
|
|
71
66
|
if (!node || focusOnMountRef.current === false) {
|
|
72
67
|
return;
|
|
73
68
|
}
|
|
74
|
-
|
|
75
69
|
if (node.contains((_node$ownerDocument$a = node.ownerDocument?.activeElement) !== null && _node$ownerDocument$a !== void 0 ? _node$ownerDocument$a : null)) {
|
|
76
70
|
return;
|
|
77
71
|
}
|
|
78
|
-
|
|
79
72
|
if (focusOnMountRef.current === 'firstElement') {
|
|
80
73
|
timerId.current = setTimeout(() => {
|
|
81
74
|
const firstTabbable = _dom.focus.tabbable.find(node)[0];
|
|
82
|
-
|
|
83
75
|
if (firstTabbable) {
|
|
84
|
-
setFocus(
|
|
85
|
-
/** @type {HTMLElement} */
|
|
86
|
-
firstTabbable);
|
|
76
|
+
setFocus( /** @type {HTMLElement} */firstTabbable);
|
|
87
77
|
}
|
|
88
78
|
}, 0);
|
|
89
79
|
return;
|
|
90
80
|
}
|
|
91
|
-
|
|
92
81
|
setFocus(node);
|
|
93
82
|
}, []);
|
|
94
83
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"
|
|
1
|
+
{"version":3,"names":["_element","require","_dom","useFocusOnMount","focusOnMount","focusOnMountRef","useRef","setFocus","target","focus","preventScroll","timerId","useEffect","current","clearTimeout","useCallback","node","_node$ownerDocument$a","contains","ownerDocument","activeElement","setTimeout","firstTabbable","tabbable","find"],"sources":["@wordpress/compose/src/hooks/use-focus-on-mount/index.js"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { useRef, useEffect, useCallback } from '@wordpress/element';\nimport { focus } from '@wordpress/dom';\n\n/**\n * Hook used to focus the first tabbable element on mount.\n *\n * @param {boolean | 'firstElement'} focusOnMount Focus on mount mode.\n * @return {import('react').RefCallback<HTMLElement>} Ref callback.\n *\n * @example\n * ```js\n * import { useFocusOnMount } from '@wordpress/compose';\n *\n * const WithFocusOnMount = () => {\n * const ref = useFocusOnMount()\n * return (\n * <div ref={ ref }>\n * <Button />\n * <Button />\n * </div>\n * );\n * }\n * ```\n */\nexport default function useFocusOnMount( focusOnMount = 'firstElement' ) {\n\tconst focusOnMountRef = useRef( focusOnMount );\n\n\t/**\n\t * Sets focus on a DOM element.\n\t *\n\t * @param {HTMLElement} target The DOM element to set focus to.\n\t * @return {void}\n\t */\n\tconst setFocus = ( target ) => {\n\t\ttarget.focus( {\n\t\t\t// When focusing newly mounted dialogs,\n\t\t\t// the position of the popover is often not right on the first render\n\t\t\t// This prevents the layout shifts when focusing the dialogs.\n\t\t\tpreventScroll: true,\n\t\t} );\n\t};\n\n\t/** @type {import('react').MutableRefObject<ReturnType<setTimeout> | undefined>} */\n\tconst timerId = useRef();\n\n\tuseEffect( () => {\n\t\tfocusOnMountRef.current = focusOnMount;\n\t}, [ focusOnMount ] );\n\n\tuseEffect( () => {\n\t\treturn () => {\n\t\t\tif ( timerId.current ) {\n\t\t\t\tclearTimeout( timerId.current );\n\t\t\t}\n\t\t};\n\t}, [] );\n\n\treturn useCallback( ( node ) => {\n\t\tif ( ! node || focusOnMountRef.current === false ) {\n\t\t\treturn;\n\t\t}\n\n\t\tif ( node.contains( node.ownerDocument?.activeElement ?? null ) ) {\n\t\t\treturn;\n\t\t}\n\n\t\tif ( focusOnMountRef.current === 'firstElement' ) {\n\t\t\ttimerId.current = setTimeout( () => {\n\t\t\t\tconst firstTabbable = focus.tabbable.find( node )[ 0 ];\n\n\t\t\t\tif ( firstTabbable ) {\n\t\t\t\t\tsetFocus( /** @type {HTMLElement} */ ( firstTabbable ) );\n\t\t\t\t}\n\t\t\t}, 0 );\n\n\t\t\treturn;\n\t\t}\n\n\t\tsetFocus( node );\n\t}, [] );\n}\n"],"mappings":";;;;;;AAGA,IAAAA,QAAA,GAAAC,OAAA;AACA,IAAAC,IAAA,GAAAD,OAAA;AAJA;AACA;AACA;;AAIA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACe,SAASE,eAAeA,CAAEC,YAAY,GAAG,cAAc,EAAG;EACxE,MAAMC,eAAe,GAAG,IAAAC,eAAM,EAAEF,YAAa,CAAC;;EAE9C;AACD;AACA;AACA;AACA;AACA;EACC,MAAMG,QAAQ,GAAKC,MAAM,IAAM;IAC9BA,MAAM,CAACC,KAAK,CAAE;MACb;MACA;MACA;MACAC,aAAa,EAAE;IAChB,CAAE,CAAC;EACJ,CAAC;;EAED;EACA,MAAMC,OAAO,GAAG,IAAAL,eAAM,EAAC,CAAC;EAExB,IAAAM,kBAAS,EAAE,MAAM;IAChBP,eAAe,CAACQ,OAAO,GAAGT,YAAY;EACvC,CAAC,EAAE,CAAEA,YAAY,CAAG,CAAC;EAErB,IAAAQ,kBAAS,EAAE,MAAM;IAChB,OAAO,MAAM;MACZ,IAAKD,OAAO,CAACE,OAAO,EAAG;QACtBC,YAAY,CAAEH,OAAO,CAACE,OAAQ,CAAC;MAChC;IACD,CAAC;EACF,CAAC,EAAE,EAAG,CAAC;EAEP,OAAO,IAAAE,oBAAW,EAAIC,IAAI,IAAM;IAAA,IAAAC,qBAAA;IAC/B,IAAK,CAAED,IAAI,IAAIX,eAAe,CAACQ,OAAO,KAAK,KAAK,EAAG;MAClD;IACD;IAEA,IAAKG,IAAI,CAACE,QAAQ,EAAAD,qBAAA,GAAED,IAAI,CAACG,aAAa,EAAEC,aAAa,cAAAH,qBAAA,cAAAA,qBAAA,GAAI,IAAK,CAAC,EAAG;MACjE;IACD;IAEA,IAAKZ,eAAe,CAACQ,OAAO,KAAK,cAAc,EAAG;MACjDF,OAAO,CAACE,OAAO,GAAGQ,UAAU,CAAE,MAAM;QACnC,MAAMC,aAAa,GAAGb,UAAK,CAACc,QAAQ,CAACC,IAAI,CAAER,IAAK,CAAC,CAAE,CAAC,CAAE;QAEtD,IAAKM,aAAa,EAAG;UACpBf,QAAQ,EAAE,0BAA6Be,aAAgB,CAAC;QACzD;MACD,CAAC,EAAE,CAAE,CAAC;MAEN;IACD;IAEAf,QAAQ,CAAES,IAAK,CAAC;EACjB,CAAC,EAAE,EAAG,CAAC;AACR"}
|
|
@@ -4,9 +4,7 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
4
4
|
value: true
|
|
5
5
|
});
|
|
6
6
|
exports.default = useFocusOutside;
|
|
7
|
-
|
|
8
7
|
var _element = require("@wordpress/element");
|
|
9
|
-
|
|
10
8
|
/**
|
|
11
9
|
* External dependencies
|
|
12
10
|
*/
|
|
@@ -20,6 +18,7 @@ var _element = require("@wordpress/element");
|
|
|
20
18
|
* whether element is a (focus-normalized) button.
|
|
21
19
|
*/
|
|
22
20
|
const INPUT_BUTTON_TYPES = ['button', 'submit'];
|
|
21
|
+
|
|
23
22
|
/**
|
|
24
23
|
* List of HTML button elements subject to focus normalization
|
|
25
24
|
*
|
|
@@ -40,19 +39,15 @@ function isFocusNormalizedButton(eventTarget) {
|
|
|
40
39
|
if (!(eventTarget instanceof window.HTMLElement)) {
|
|
41
40
|
return false;
|
|
42
41
|
}
|
|
43
|
-
|
|
44
42
|
switch (eventTarget.nodeName) {
|
|
45
43
|
case 'A':
|
|
46
44
|
case 'BUTTON':
|
|
47
45
|
return true;
|
|
48
|
-
|
|
49
46
|
case 'INPUT':
|
|
50
47
|
return INPUT_BUTTON_TYPES.includes(eventTarget.type);
|
|
51
48
|
}
|
|
52
|
-
|
|
53
49
|
return false;
|
|
54
50
|
}
|
|
55
|
-
|
|
56
51
|
/**
|
|
57
52
|
* A react hook that can be used to check whether focus has moved outside the
|
|
58
53
|
* element the event handlers are bound to.
|
|
@@ -70,23 +65,26 @@ function useFocusOutside(onFocusOutside) {
|
|
|
70
65
|
}, [onFocusOutside]);
|
|
71
66
|
const preventBlurCheck = (0, _element.useRef)(false);
|
|
72
67
|
const blurCheckTimeoutId = (0, _element.useRef)();
|
|
68
|
+
|
|
73
69
|
/**
|
|
74
70
|
* Cancel a blur check timeout.
|
|
75
71
|
*/
|
|
76
|
-
|
|
77
72
|
const cancelBlurCheck = (0, _element.useCallback)(() => {
|
|
78
73
|
clearTimeout(blurCheckTimeoutId.current);
|
|
79
|
-
}, []);
|
|
74
|
+
}, []);
|
|
80
75
|
|
|
76
|
+
// Cancel blur checks on unmount.
|
|
81
77
|
(0, _element.useEffect)(() => {
|
|
82
78
|
return () => cancelBlurCheck();
|
|
83
|
-
}, []);
|
|
79
|
+
}, []);
|
|
84
80
|
|
|
81
|
+
// Cancel a blur check if the callback or ref is no longer provided.
|
|
85
82
|
(0, _element.useEffect)(() => {
|
|
86
83
|
if (!onFocusOutside) {
|
|
87
84
|
cancelBlurCheck();
|
|
88
85
|
}
|
|
89
86
|
}, [onFocusOutside, cancelBlurCheck]);
|
|
87
|
+
|
|
90
88
|
/**
|
|
91
89
|
* Handles a mousedown or mouseup event to respectively assign and
|
|
92
90
|
* unassign a flag for preventing blur check on button elements. Some
|
|
@@ -97,20 +95,19 @@ function useFocusOutside(onFocusOutside) {
|
|
|
97
95
|
* @param event
|
|
98
96
|
* @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#Clicking_and_focus
|
|
99
97
|
*/
|
|
100
|
-
|
|
101
98
|
const normalizeButtonFocus = (0, _element.useCallback)(event => {
|
|
102
99
|
const {
|
|
103
100
|
type,
|
|
104
101
|
target
|
|
105
102
|
} = event;
|
|
106
103
|
const isInteractionEnd = ['mouseup', 'touchend'].includes(type);
|
|
107
|
-
|
|
108
104
|
if (isInteractionEnd) {
|
|
109
105
|
preventBlurCheck.current = false;
|
|
110
106
|
} else if (isFocusNormalizedButton(target)) {
|
|
111
107
|
preventBlurCheck.current = true;
|
|
112
108
|
}
|
|
113
109
|
}, []);
|
|
110
|
+
|
|
114
111
|
/**
|
|
115
112
|
* A callback triggered when a blur event occurs on the element the handler
|
|
116
113
|
* is bound to.
|
|
@@ -118,29 +115,27 @@ function useFocusOutside(onFocusOutside) {
|
|
|
118
115
|
* Calls the `onFocusOutside` callback in an immediate timeout if focus has
|
|
119
116
|
* move outside the bound element and is still within the document.
|
|
120
117
|
*/
|
|
121
|
-
|
|
122
118
|
const queueBlurCheck = (0, _element.useCallback)(event => {
|
|
123
119
|
// React does not allow using an event reference asynchronously
|
|
124
120
|
// due to recycling behavior, except when explicitly persisted.
|
|
125
|
-
event.persist();
|
|
121
|
+
event.persist();
|
|
126
122
|
|
|
123
|
+
// Skip blur check if clicking button. See `normalizeButtonFocus`.
|
|
127
124
|
if (preventBlurCheck.current) {
|
|
128
125
|
return;
|
|
129
|
-
}
|
|
126
|
+
}
|
|
127
|
+
|
|
128
|
+
// The usage of this attribute should be avoided. The only use case
|
|
130
129
|
// would be when we load modals that are not React components and
|
|
131
130
|
// therefore don't exist in the React tree. An example is opening
|
|
132
131
|
// the Media Library modal from another dialog.
|
|
133
132
|
// This attribute should contain a selector of the related target
|
|
134
133
|
// we want to ignore, because we still need to trigger the blur event
|
|
135
134
|
// on all other cases.
|
|
136
|
-
|
|
137
|
-
|
|
138
135
|
const ignoreForRelatedTarget = event.target.getAttribute('data-unstable-ignore-focus-outside-for-relatedtarget');
|
|
139
|
-
|
|
140
136
|
if (ignoreForRelatedTarget && event.relatedTarget?.closest(ignoreForRelatedTarget)) {
|
|
141
137
|
return;
|
|
142
138
|
}
|
|
143
|
-
|
|
144
139
|
blurCheckTimeoutId.current = setTimeout(() => {
|
|
145
140
|
// If document is not focused then focus should remain
|
|
146
141
|
// inside the wrapped component and therefore we cancel
|
|
@@ -150,7 +145,6 @@ function useFocusOutside(onFocusOutside) {
|
|
|
150
145
|
event.preventDefault();
|
|
151
146
|
return;
|
|
152
147
|
}
|
|
153
|
-
|
|
154
148
|
if ('function' === typeof currentOnFocusOutside.current) {
|
|
155
149
|
currentOnFocusOutside.current(event);
|
|
156
150
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"
|
|
1
|
+
{"version":3,"names":["_element","require","INPUT_BUTTON_TYPES","isFocusNormalizedButton","eventTarget","window","HTMLElement","nodeName","includes","type","useFocusOutside","onFocusOutside","currentOnFocusOutside","useRef","useEffect","current","preventBlurCheck","blurCheckTimeoutId","cancelBlurCheck","useCallback","clearTimeout","normalizeButtonFocus","event","target","isInteractionEnd","queueBlurCheck","persist","ignoreForRelatedTarget","getAttribute","relatedTarget","closest","setTimeout","document","hasFocus","preventDefault","onFocus","onMouseDown","onMouseUp","onTouchStart","onTouchEnd","onBlur"],"sources":["@wordpress/compose/src/hooks/use-focus-outside/index.ts"],"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\t// The usage of this attribute should be avoided. The only use case\n\t\t// would be when we load modals that are not React components and\n\t\t// therefore don't exist in the React tree. An example is opening\n\t\t// the Media Library modal from another dialog.\n\t\t// This attribute should contain a selector of the related target\n\t\t// we want to ignore, because we still need to trigger the blur event\n\t\t// on all other cases.\n\t\tconst ignoreForRelatedTarget = event.target.getAttribute(\n\t\t\t'data-unstable-ignore-focus-outside-for-relatedtarget'\n\t\t);\n\t\tif (\n\t\t\tignoreForRelatedTarget &&\n\t\t\tevent.relatedTarget?.closest( ignoreForRelatedTarget )\n\t\t) {\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"],"mappings":"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"}
|
|
@@ -4,9 +4,7 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
4
4
|
value: true
|
|
5
5
|
});
|
|
6
6
|
exports.default = useFocusOutside;
|
|
7
|
-
|
|
8
7
|
var _element = require("@wordpress/element");
|
|
9
|
-
|
|
10
8
|
/**
|
|
11
9
|
* WordPress dependencies
|
|
12
10
|
*/
|
|
@@ -18,13 +16,13 @@ var _element = require("@wordpress/element");
|
|
|
18
16
|
* @type {string[]}
|
|
19
17
|
*/
|
|
20
18
|
const INPUT_BUTTON_TYPES = ['button', 'submit'];
|
|
19
|
+
|
|
21
20
|
/**
|
|
22
21
|
* @typedef {HTMLButtonElement | HTMLLinkElement | HTMLInputElement} FocusNormalizedButton
|
|
23
22
|
*/
|
|
24
|
-
// Disable reason: Rule doesn't support predicate return types.
|
|
25
23
|
|
|
24
|
+
// Disable reason: Rule doesn't support predicate return types.
|
|
26
25
|
/* eslint-disable jsdoc/valid-types */
|
|
27
|
-
|
|
28
26
|
/**
|
|
29
27
|
* Returns true if the given element is a button element subject to focus
|
|
30
28
|
* normalization, or false otherwise.
|
|
@@ -35,19 +33,14 @@ const INPUT_BUTTON_TYPES = ['button', 'submit'];
|
|
|
35
33
|
*
|
|
36
34
|
* @return {eventTarget is FocusNormalizedButton} Whether element is a button.
|
|
37
35
|
*/
|
|
38
|
-
|
|
39
36
|
function isFocusNormalizedButton(eventTarget) {
|
|
40
37
|
switch (eventTarget.nodeName) {
|
|
41
38
|
case 'A':
|
|
42
39
|
case 'BUTTON':
|
|
43
40
|
return true;
|
|
44
|
-
|
|
45
41
|
case 'INPUT':
|
|
46
|
-
return INPUT_BUTTON_TYPES.includes(
|
|
47
|
-
/** @type {HTMLInputElement} */
|
|
48
|
-
eventTarget.type);
|
|
42
|
+
return INPUT_BUTTON_TYPES.includes( /** @type {HTMLInputElement} */eventTarget.type);
|
|
49
43
|
}
|
|
50
|
-
|
|
51
44
|
return false;
|
|
52
45
|
}
|
|
53
46
|
/* eslint-enable jsdoc/valid-types */
|
|
@@ -91,36 +84,37 @@ function isFocusNormalizedButton(eventTarget) {
|
|
|
91
84
|
* to a wrapping element element to capture when focus moves
|
|
92
85
|
* outside that element.
|
|
93
86
|
*/
|
|
94
|
-
|
|
95
|
-
|
|
96
87
|
function useFocusOutside(onFocusOutside) {
|
|
97
88
|
const currentOnFocusOutside = (0, _element.useRef)(onFocusOutside);
|
|
98
89
|
(0, _element.useEffect)(() => {
|
|
99
90
|
currentOnFocusOutside.current = onFocusOutside;
|
|
100
91
|
}, [onFocusOutside]);
|
|
101
92
|
const preventBlurCheck = (0, _element.useRef)(false);
|
|
93
|
+
|
|
102
94
|
/**
|
|
103
95
|
* @type {import('react').MutableRefObject<number | undefined>}
|
|
104
96
|
*/
|
|
105
|
-
|
|
106
97
|
const blurCheckTimeoutId = (0, _element.useRef)();
|
|
98
|
+
|
|
107
99
|
/**
|
|
108
100
|
* Cancel a blur check timeout.
|
|
109
101
|
*/
|
|
110
|
-
|
|
111
102
|
const cancelBlurCheck = (0, _element.useCallback)(() => {
|
|
112
103
|
clearTimeout(blurCheckTimeoutId.current);
|
|
113
|
-
}, []);
|
|
104
|
+
}, []);
|
|
114
105
|
|
|
106
|
+
// Cancel blur checks on unmount.
|
|
115
107
|
(0, _element.useEffect)(() => {
|
|
116
108
|
return () => cancelBlurCheck();
|
|
117
|
-
}, []);
|
|
109
|
+
}, []);
|
|
118
110
|
|
|
111
|
+
// Cancel a blur check if the callback or ref is no longer provided.
|
|
119
112
|
(0, _element.useEffect)(() => {
|
|
120
113
|
if (!onFocusOutside) {
|
|
121
114
|
cancelBlurCheck();
|
|
122
115
|
}
|
|
123
116
|
}, [onFocusOutside, cancelBlurCheck]);
|
|
117
|
+
|
|
124
118
|
/**
|
|
125
119
|
* Handles a mousedown or mouseup event to respectively assign and
|
|
126
120
|
* unassign a flag for preventing blur check on button elements. Some
|
|
@@ -132,20 +126,19 @@ function useFocusOutside(onFocusOutside) {
|
|
|
132
126
|
*
|
|
133
127
|
* @param {SyntheticEvent} event Event for mousedown or mouseup.
|
|
134
128
|
*/
|
|
135
|
-
|
|
136
129
|
const normalizeButtonFocus = (0, _element.useCallback)(event => {
|
|
137
130
|
const {
|
|
138
131
|
type,
|
|
139
132
|
target
|
|
140
133
|
} = event;
|
|
141
134
|
const isInteractionEnd = ['mouseup', 'touchend'].includes(type);
|
|
142
|
-
|
|
143
135
|
if (isInteractionEnd) {
|
|
144
136
|
preventBlurCheck.current = false;
|
|
145
137
|
} else if (isFocusNormalizedButton(target)) {
|
|
146
138
|
preventBlurCheck.current = true;
|
|
147
139
|
}
|
|
148
140
|
}, []);
|
|
141
|
+
|
|
149
142
|
/**
|
|
150
143
|
* A callback triggered when a blur event occurs on the element the handler
|
|
151
144
|
* is bound to.
|
|
@@ -155,16 +148,15 @@ function useFocusOutside(onFocusOutside) {
|
|
|
155
148
|
*
|
|
156
149
|
* @param {SyntheticEvent} event Blur event.
|
|
157
150
|
*/
|
|
158
|
-
|
|
159
151
|
const queueBlurCheck = (0, _element.useCallback)(event => {
|
|
160
152
|
// React does not allow using an event reference asynchronously
|
|
161
153
|
// due to recycling behavior, except when explicitly persisted.
|
|
162
|
-
event.persist();
|
|
154
|
+
event.persist();
|
|
163
155
|
|
|
156
|
+
// Skip blur check if clicking button. See `normalizeButtonFocus`.
|
|
164
157
|
if (preventBlurCheck.current) {
|
|
165
158
|
return;
|
|
166
159
|
}
|
|
167
|
-
|
|
168
160
|
blurCheckTimeoutId.current = setTimeout(() => {
|
|
169
161
|
if ('function' === typeof currentOnFocusOutside.current) {
|
|
170
162
|
currentOnFocusOutside.current(event);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"
|
|
1
|
+
{"version":3,"names":["_element","require","INPUT_BUTTON_TYPES","isFocusNormalizedButton","eventTarget","nodeName","includes","type","useFocusOutside","onFocusOutside","currentOnFocusOutside","useRef","useEffect","current","preventBlurCheck","blurCheckTimeoutId","cancelBlurCheck","useCallback","clearTimeout","normalizeButtonFocus","event","target","isInteractionEnd","queueBlurCheck","persist","setTimeout","onFocus","onMouseDown","onMouseUp","onTouchStart","onTouchEnd","onBlur"],"sources":["@wordpress/compose/src/hooks/use-focus-outside/index.native.js"],"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\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\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"],"mappings":"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"}
|
|
@@ -4,15 +4,14 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
4
4
|
value: true
|
|
5
5
|
});
|
|
6
6
|
exports.default = void 0;
|
|
7
|
-
|
|
8
7
|
var _element = require("@wordpress/element");
|
|
9
|
-
|
|
10
8
|
/**
|
|
11
9
|
* WordPress dependencies
|
|
12
10
|
*/
|
|
13
11
|
|
|
14
12
|
/** @type {Element|null} */
|
|
15
13
|
let origin = null;
|
|
14
|
+
|
|
16
15
|
/**
|
|
17
16
|
* Adds the unmount behavior of returning focus to the element which had it
|
|
18
17
|
* previously as is expected for roles like menus or dialogs.
|
|
@@ -35,12 +34,10 @@ let origin = null;
|
|
|
35
34
|
* }
|
|
36
35
|
* ```
|
|
37
36
|
*/
|
|
38
|
-
|
|
39
37
|
function useFocusReturn(onFocusReturn) {
|
|
40
38
|
/** @type {import('react').MutableRefObject<null | HTMLElement>} */
|
|
41
39
|
const ref = (0, _element.useRef)(null);
|
|
42
40
|
/** @type {import('react').MutableRefObject<null | Element>} */
|
|
43
|
-
|
|
44
41
|
const focusedBeforeMount = (0, _element.useRef)(null);
|
|
45
42
|
const onFocusReturnRef = (0, _element.useRef)(onFocusReturn);
|
|
46
43
|
(0, _element.useEffect)(() => {
|
|
@@ -49,39 +46,34 @@ function useFocusReturn(onFocusReturn) {
|
|
|
49
46
|
return (0, _element.useCallback)(node => {
|
|
50
47
|
if (node) {
|
|
51
48
|
// Set ref to be used when unmounting.
|
|
52
|
-
ref.current = node;
|
|
49
|
+
ref.current = node;
|
|
53
50
|
|
|
51
|
+
// Only set when the node mounts.
|
|
54
52
|
if (focusedBeforeMount.current) {
|
|
55
53
|
return;
|
|
56
54
|
}
|
|
57
|
-
|
|
58
55
|
focusedBeforeMount.current = node.ownerDocument.activeElement;
|
|
59
56
|
} else if (focusedBeforeMount.current) {
|
|
60
57
|
const isFocused = ref.current?.contains(ref.current?.ownerDocument.activeElement);
|
|
61
|
-
|
|
62
58
|
if (ref.current?.isConnected && !isFocused) {
|
|
63
59
|
var _origin;
|
|
64
|
-
|
|
65
60
|
(_origin = origin) !== null && _origin !== void 0 ? _origin : origin = focusedBeforeMount.current;
|
|
66
61
|
return;
|
|
67
|
-
}
|
|
62
|
+
}
|
|
63
|
+
|
|
64
|
+
// Defer to the component's own explicit focus return behavior, if
|
|
68
65
|
// specified. This allows for support that the `onFocusReturn`
|
|
69
66
|
// decides to allow the default behavior to occur under some
|
|
70
67
|
// conditions.
|
|
71
|
-
|
|
72
|
-
|
|
73
68
|
if (onFocusReturnRef.current) {
|
|
74
69
|
onFocusReturnRef.current();
|
|
75
70
|
} else {
|
|
76
|
-
/** @type {null|HTMLElement} */
|
|
77
|
-
(!focusedBeforeMount.current.isConnected ? origin : focusedBeforeMount.current)?.focus();
|
|
71
|
+
/** @type {null|HTMLElement} */(!focusedBeforeMount.current.isConnected ? origin : focusedBeforeMount.current)?.focus();
|
|
78
72
|
}
|
|
79
|
-
|
|
80
73
|
origin = null;
|
|
81
74
|
}
|
|
82
75
|
}, []);
|
|
83
76
|
}
|
|
84
|
-
|
|
85
77
|
var _default = useFocusReturn;
|
|
86
78
|
exports.default = _default;
|
|
87
79
|
//# sourceMappingURL=index.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"
|
|
1
|
+
{"version":3,"names":["_element","require","origin","useFocusReturn","onFocusReturn","ref","useRef","focusedBeforeMount","onFocusReturnRef","useEffect","current","useCallback","node","ownerDocument","activeElement","isFocused","contains","isConnected","_origin","focus","_default","exports","default"],"sources":["@wordpress/compose/src/hooks/use-focus-return/index.js"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { useRef, useEffect, useCallback } from '@wordpress/element';\n\n/** @type {Element|null} */\nlet origin = null;\n\n/**\n * Adds the unmount behavior of returning focus to the element which had it\n * previously as is expected for roles like menus or dialogs.\n *\n * @param {() => void} [onFocusReturn] Overrides the default return behavior.\n * @return {import('react').RefCallback<HTMLElement>} Element Ref.\n *\n * @example\n * ```js\n * import { useFocusReturn } from '@wordpress/compose';\n *\n * const WithFocusReturn = () => {\n * const ref = useFocusReturn()\n * return (\n * <div ref={ ref }>\n * <Button />\n * <Button />\n * </div>\n * );\n * }\n * ```\n */\nfunction useFocusReturn( onFocusReturn ) {\n\t/** @type {import('react').MutableRefObject<null | HTMLElement>} */\n\tconst ref = useRef( null );\n\t/** @type {import('react').MutableRefObject<null | Element>} */\n\tconst focusedBeforeMount = useRef( null );\n\tconst onFocusReturnRef = useRef( onFocusReturn );\n\tuseEffect( () => {\n\t\tonFocusReturnRef.current = onFocusReturn;\n\t}, [ onFocusReturn ] );\n\n\treturn useCallback( ( node ) => {\n\t\tif ( node ) {\n\t\t\t// Set ref to be used when unmounting.\n\t\t\tref.current = node;\n\n\t\t\t// Only set when the node mounts.\n\t\t\tif ( focusedBeforeMount.current ) {\n\t\t\t\treturn;\n\t\t\t}\n\n\t\t\tfocusedBeforeMount.current = node.ownerDocument.activeElement;\n\t\t} else if ( focusedBeforeMount.current ) {\n\t\t\tconst isFocused = ref.current?.contains(\n\t\t\t\tref.current?.ownerDocument.activeElement\n\t\t\t);\n\n\t\t\tif ( ref.current?.isConnected && ! isFocused ) {\n\t\t\t\torigin ??= focusedBeforeMount.current;\n\t\t\t\treturn;\n\t\t\t}\n\n\t\t\t// Defer to the component's own explicit focus return behavior, if\n\t\t\t// specified. This allows for support that the `onFocusReturn`\n\t\t\t// decides to allow the default behavior to occur under some\n\t\t\t// conditions.\n\t\t\tif ( onFocusReturnRef.current ) {\n\t\t\t\tonFocusReturnRef.current();\n\t\t\t} else {\n\t\t\t\t/** @type {null|HTMLElement} */ (\n\t\t\t\t\t! focusedBeforeMount.current.isConnected\n\t\t\t\t\t\t? origin\n\t\t\t\t\t\t: focusedBeforeMount.current\n\t\t\t\t)?.focus();\n\t\t\t}\n\t\t\torigin = null;\n\t\t}\n\t}, [] );\n}\n\nexport default useFocusReturn;\n"],"mappings":";;;;;;AAGA,IAAAA,QAAA,GAAAC,OAAA;AAHA;AACA;AACA;;AAGA;AACA,IAAIC,MAAM,GAAG,IAAI;;AAEjB;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,SAASC,cAAcA,CAAEC,aAAa,EAAG;EACxC;EACA,MAAMC,GAAG,GAAG,IAAAC,eAAM,EAAE,IAAK,CAAC;EAC1B;EACA,MAAMC,kBAAkB,GAAG,IAAAD,eAAM,EAAE,IAAK,CAAC;EACzC,MAAME,gBAAgB,GAAG,IAAAF,eAAM,EAAEF,aAAc,CAAC;EAChD,IAAAK,kBAAS,EAAE,MAAM;IAChBD,gBAAgB,CAACE,OAAO,GAAGN,aAAa;EACzC,CAAC,EAAE,CAAEA,aAAa,CAAG,CAAC;EAEtB,OAAO,IAAAO,oBAAW,EAAIC,IAAI,IAAM;IAC/B,IAAKA,IAAI,EAAG;MACX;MACAP,GAAG,CAACK,OAAO,GAAGE,IAAI;;MAElB;MACA,IAAKL,kBAAkB,CAACG,OAAO,EAAG;QACjC;MACD;MAEAH,kBAAkB,CAACG,OAAO,GAAGE,IAAI,CAACC,aAAa,CAACC,aAAa;IAC9D,CAAC,MAAM,IAAKP,kBAAkB,CAACG,OAAO,EAAG;MACxC,MAAMK,SAAS,GAAGV,GAAG,CAACK,OAAO,EAAEM,QAAQ,CACtCX,GAAG,CAACK,OAAO,EAAEG,aAAa,CAACC,aAC5B,CAAC;MAED,IAAKT,GAAG,CAACK,OAAO,EAAEO,WAAW,IAAI,CAAEF,SAAS,EAAG;QAAA,IAAAG,OAAA;QAC9C,CAAAA,OAAA,GAAAhB,MAAM,cAAAgB,OAAA,cAAAA,OAAA,GAANhB,MAAM,GAAKK,kBAAkB,CAACG,OAAO;QACrC;MACD;;MAEA;MACA;MACA;MACA;MACA,IAAKF,gBAAgB,CAACE,OAAO,EAAG;QAC/BF,gBAAgB,CAACE,OAAO,CAAC,CAAC;MAC3B,CAAC,MAAM;QACN,+BAAgC,CAC/B,CAAEH,kBAAkB,CAACG,OAAO,CAACO,WAAW,GACrCf,MAAM,GACNK,kBAAkB,CAACG,OAAO,GAC3BS,KAAK,CAAC,CAAC;MACX;MACAjB,MAAM,GAAG,IAAI;IACd;EACD,CAAC,EAAE,EAAG,CAAC;AACR;AAAC,IAAAkB,QAAA,GAEcjB,cAAc;AAAAkB,OAAA,CAAAC,OAAA,GAAAF,QAAA"}
|
|
@@ -1,14 +1,11 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
|
|
3
3
|
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
|
4
|
-
|
|
5
4
|
Object.defineProperty(exports, "__esModule", {
|
|
6
5
|
value: true
|
|
7
6
|
});
|
|
8
7
|
exports.default = useFocusableIframe;
|
|
9
|
-
|
|
10
8
|
var _useRefEffect = _interopRequireDefault(require("../use-ref-effect"));
|
|
11
|
-
|
|
12
9
|
/**
|
|
13
10
|
* External dependencies
|
|
14
11
|
*/
|
|
@@ -33,17 +30,16 @@ function useFocusableIframe() {
|
|
|
33
30
|
defaultView
|
|
34
31
|
} = ownerDocument;
|
|
35
32
|
if (!defaultView) return;
|
|
33
|
+
|
|
36
34
|
/**
|
|
37
35
|
* Checks whether the iframe is the activeElement, inferring that it has
|
|
38
36
|
* then received focus, and dispatches a focus event.
|
|
39
37
|
*/
|
|
40
|
-
|
|
41
38
|
function checkFocus() {
|
|
42
39
|
if (ownerDocument && ownerDocument.activeElement === element) {
|
|
43
40
|
element.focus();
|
|
44
41
|
}
|
|
45
42
|
}
|
|
46
|
-
|
|
47
43
|
defaultView.addEventListener('blur', checkFocus);
|
|
48
44
|
return () => {
|
|
49
45
|
defaultView.removeEventListener('blur', checkFocus);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"
|
|
1
|
+
{"version":3,"names":["_useRefEffect","_interopRequireDefault","require","useFocusableIframe","useRefEffect","element","ownerDocument","defaultView","checkFocus","activeElement","focus","addEventListener","removeEventListener"],"sources":["@wordpress/compose/src/hooks/use-focusable-iframe/index.ts"],"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"],"mappings":";;;;;;;AAQA,IAAAA,aAAA,GAAAC,sBAAA,CAAAC,OAAA;AARA;AACA;AACA;;AAGA;AACA;AACA;;AAGA;AACA;AACA;AACA;AACA;AACA;AACe,SAASC,kBAAkBA,CAAA,EAAqC;EAC9E,OAAO,IAAAC,qBAAY,EAAIC,OAAO,IAAM;IACnC,MAAM;MAAEC;IAAc,CAAC,GAAGD,OAAO;IACjC,IAAK,CAAEC,aAAa,EAAG;IACvB,MAAM;MAAEC;IAAY,CAAC,GAAGD,aAAa;IACrC,IAAK,CAAEC,WAAW,EAAG;;IAErB;AACF;AACA;AACA;IACE,SAASC,UAAUA,CAAA,EAAG;MACrB,IAAKF,aAAa,IAAIA,aAAa,CAACG,aAAa,KAAKJ,OAAO,EAAG;QAC7DA,OAAO,CAAkBK,KAAK,CAAC,CAAC;MACnC;IACD;IAEAH,WAAW,CAACI,gBAAgB,CAAE,MAAM,EAAEH,UAAW,CAAC;IAClD,OAAO,MAAM;MACZD,WAAW,CAACK,mBAAmB,CAAE,MAAM,EAAEJ,UAAW,CAAC;IACtD,CAAC;EACF,CAAC,EAAE,EAAG,CAAC;AACR"}
|
|
@@ -4,25 +4,25 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
4
4
|
value: true
|
|
5
5
|
});
|
|
6
6
|
exports.default = void 0;
|
|
7
|
-
|
|
8
7
|
var _element = require("@wordpress/element");
|
|
9
|
-
|
|
10
8
|
/**
|
|
11
9
|
* WordPress dependencies
|
|
12
10
|
*/
|
|
11
|
+
|
|
13
12
|
const instanceMap = new WeakMap();
|
|
13
|
+
|
|
14
14
|
/**
|
|
15
15
|
* Creates a new id for a given object.
|
|
16
16
|
*
|
|
17
17
|
* @param object Object reference to create an id for.
|
|
18
18
|
* @return The instance id (index).
|
|
19
19
|
*/
|
|
20
|
-
|
|
21
20
|
function createId(object) {
|
|
22
21
|
const instances = instanceMap.get(object) || 0;
|
|
23
22
|
instanceMap.set(object, instances + 1);
|
|
24
23
|
return instances;
|
|
25
24
|
}
|
|
25
|
+
|
|
26
26
|
/**
|
|
27
27
|
* Specify the useInstanceId *function* signatures.
|
|
28
28
|
*
|
|
@@ -36,7 +36,6 @@ function createId(object) {
|
|
|
36
36
|
* @param object Object reference to create an id for.
|
|
37
37
|
*/
|
|
38
38
|
|
|
39
|
-
|
|
40
39
|
/**
|
|
41
40
|
* Provides a unique instance ID.
|
|
42
41
|
*
|
|
@@ -52,7 +51,6 @@ function useInstanceId(object, prefix, preferredId) {
|
|
|
52
51
|
return prefix ? `${prefix}-${id}` : id;
|
|
53
52
|
}, [object, preferredId, prefix]);
|
|
54
53
|
}
|
|
55
|
-
|
|
56
54
|
var _default = useInstanceId;
|
|
57
55
|
exports.default = _default;
|
|
58
56
|
//# sourceMappingURL=index.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"
|
|
1
|
+
{"version":3,"names":["_element","require","instanceMap","WeakMap","createId","object","instances","get","set","useInstanceId","prefix","preferredId","useMemo","id","_default","exports","default"],"sources":["@wordpress/compose/src/hooks/use-instance-id/index.ts"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { useMemo } from '@wordpress/element';\n\nconst instanceMap = new WeakMap< object, number >();\n\n/**\n * Creates a new id for a given object.\n *\n * @param object Object reference to create an id for.\n * @return The instance id (index).\n */\nfunction createId( object: object ): number {\n\tconst instances = instanceMap.get( object ) || 0;\n\tinstanceMap.set( object, instances + 1 );\n\treturn instances;\n}\n\n/**\n * Specify the useInstanceId *function* signatures.\n *\n * More accurately, useInstanceId distinguishes between three different\n * signatures:\n *\n * 1. When only object is given, the returned value is a number\n * 2. When object and prefix is given, the returned value is a string\n * 3. When preferredId is given, the returned value is the type of preferredId\n *\n * @param object Object reference to create an id for.\n */\nfunction useInstanceId( object: object ): number;\nfunction useInstanceId( object: object, prefix: string ): string;\nfunction useInstanceId< T extends string | number >(\n\tobject: object,\n\tprefix: string,\n\tpreferredId?: T\n): T;\n\n/**\n * Provides a unique instance ID.\n *\n * @param object Object reference to create an id for.\n * @param [prefix] Prefix for the unique id.\n * @param [preferredId] Default ID to use.\n * @return The unique instance id.\n */\nfunction useInstanceId(\n\tobject: object,\n\tprefix?: string,\n\tpreferredId?: string | number\n): string | number {\n\treturn useMemo( () => {\n\t\tif ( preferredId ) return preferredId;\n\t\tconst id = createId( object );\n\n\t\treturn prefix ? `${ prefix }-${ id }` : id;\n\t}, [ object, preferredId, prefix ] );\n}\n\nexport default useInstanceId;\n"],"mappings":";;;;;;AAGA,IAAAA,QAAA,GAAAC,OAAA;AAHA;AACA;AACA;;AAGA,MAAMC,WAAW,GAAG,IAAIC,OAAO,CAAmB,CAAC;;AAEnD;AACA;AACA;AACA;AACA;AACA;AACA,SAASC,QAAQA,CAAEC,MAAc,EAAW;EAC3C,MAAMC,SAAS,GAAGJ,WAAW,CAACK,GAAG,CAAEF,MAAO,CAAC,IAAI,CAAC;EAChDH,WAAW,CAACM,GAAG,CAAEH,MAAM,EAAEC,SAAS,GAAG,CAAE,CAAC;EACxC,OAAOA,SAAS;AACjB;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AASA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,SAASG,aAAaA,CACrBJ,MAAc,EACdK,MAAe,EACfC,WAA6B,EACX;EAClB,OAAO,IAAAC,gBAAO,EAAE,MAAM;IACrB,IAAKD,WAAW,EAAG,OAAOA,WAAW;IACrC,MAAME,EAAE,GAAGT,QAAQ,CAAEC,MAAO,CAAC;IAE7B,OAAOK,MAAM,GAAI,GAAGA,MAAQ,IAAIG,EAAI,EAAC,GAAGA,EAAE;EAC3C,CAAC,EAAE,CAAER,MAAM,EAAEM,WAAW,EAAED,MAAM,CAAG,CAAC;AACrC;AAAC,IAAAI,QAAA,GAEcL,aAAa;AAAAM,OAAA,CAAAC,OAAA,GAAAF,QAAA"}
|