@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.
Files changed (207) hide show
  1. package/CHANGELOG.md +2 -0
  2. package/build/higher-order/compose.js +0 -2
  3. package/build/higher-order/compose.js.map +1 -1
  4. package/build/higher-order/if-condition/index.js +2 -6
  5. package/build/higher-order/if-condition/index.js.map +1 -1
  6. package/build/higher-order/pipe.js +1 -5
  7. package/build/higher-order/pipe.js.map +1 -1
  8. package/build/higher-order/pure/index.js +2 -10
  9. package/build/higher-order/pure/index.js.map +1 -1
  10. package/build/higher-order/with-global-events/index.js +13 -32
  11. package/build/higher-order/with-global-events/index.js.map +1 -1
  12. package/build/higher-order/with-global-events/listener.js +5 -28
  13. package/build/higher-order/with-global-events/listener.js.map +1 -1
  14. package/build/higher-order/with-instance-id/index.js +4 -8
  15. package/build/higher-order/with-instance-id/index.js.map +1 -1
  16. package/build/higher-order/with-preferred-color-scheme/index.native.js +3 -6
  17. package/build/higher-order/with-preferred-color-scheme/index.native.js.map +1 -1
  18. package/build/higher-order/with-safe-timeout/index.js +4 -14
  19. package/build/higher-order/with-safe-timeout/index.js.map +1 -1
  20. package/build/higher-order/with-state/index.js +3 -11
  21. package/build/higher-order/with-state/index.js.map +1 -1
  22. package/build/hooks/use-async-list/index.js +1 -14
  23. package/build/hooks/use-async-list/index.js.map +1 -1
  24. package/build/hooks/use-constrained-tabbing/index.js +14 -30
  25. package/build/hooks/use-constrained-tabbing/index.js.map +1 -1
  26. package/build/hooks/use-constrained-tabbing/index.native.js +4 -4
  27. package/build/hooks/use-constrained-tabbing/index.native.js.map +1 -1
  28. package/build/hooks/use-copy-on-click/index.js +6 -15
  29. package/build/hooks/use-copy-on-click/index.js.map +1 -1
  30. package/build/hooks/use-copy-to-clipboard/index.js +3 -11
  31. package/build/hooks/use-copy-to-clipboard/index.js.map +1 -1
  32. package/build/hooks/use-debounce/index.js +0 -4
  33. package/build/hooks/use-debounce/index.js.map +1 -1
  34. package/build/hooks/use-dialog/index.js +2 -12
  35. package/build/hooks/use-dialog/index.js.map +1 -1
  36. package/build/hooks/use-disabled/index.js +5 -15
  37. package/build/hooks/use-disabled/index.js.map +1 -1
  38. package/build/hooks/use-dragging/index.js +4 -11
  39. package/build/hooks/use-dragging/index.js.map +1 -1
  40. package/build/hooks/use-drop-zone/index.js +27 -66
  41. package/build/hooks/use-drop-zone/index.js.map +1 -1
  42. package/build/hooks/use-fixed-window-list/index.js +8 -34
  43. package/build/hooks/use-fixed-window-list/index.js.map +1 -1
  44. package/build/hooks/use-focus-on-mount/index.js +3 -14
  45. package/build/hooks/use-focus-on-mount/index.js.map +1 -1
  46. package/build/hooks/use-focus-outside/index.js +13 -19
  47. package/build/hooks/use-focus-outside/index.js.map +1 -1
  48. package/build/hooks/use-focus-outside/index.native.js +13 -21
  49. package/build/hooks/use-focus-outside/index.native.js.map +1 -1
  50. package/build/hooks/use-focus-return/index.js +7 -15
  51. package/build/hooks/use-focus-return/index.js.map +1 -1
  52. package/build/hooks/use-focusable-iframe/index.js +1 -5
  53. package/build/hooks/use-focusable-iframe/index.js.map +1 -1
  54. package/build/hooks/use-instance-id/index.js +3 -5
  55. package/build/hooks/use-instance-id/index.js.map +1 -1
  56. package/build/hooks/use-isomorphic-layout-effect/index.js +0 -2
  57. package/build/hooks/use-isomorphic-layout-effect/index.js.map +1 -1
  58. package/build/hooks/use-keyboard-shortcut/index.js +12 -28
  59. package/build/hooks/use-keyboard-shortcut/index.js.map +1 -1
  60. package/build/hooks/use-keyboard-shortcut/index.native.js +0 -2
  61. package/build/hooks/use-keyboard-shortcut/index.native.js.map +1 -1
  62. package/build/hooks/use-media-query/index.js +1 -9
  63. package/build/hooks/use-media-query/index.js.map +1 -1
  64. package/build/hooks/use-merge-refs/index.js +18 -24
  65. package/build/hooks/use-merge-refs/index.js.map +1 -1
  66. package/build/hooks/use-preferred-color-scheme/index.android.js +0 -5
  67. package/build/hooks/use-preferred-color-scheme/index.android.js.map +1 -1
  68. package/build/hooks/use-preferred-color-scheme/index.ios.js +0 -2
  69. package/build/hooks/use-preferred-color-scheme/index.ios.js.map +1 -1
  70. package/build/hooks/use-preferred-color-scheme-style/index.native.js +2 -5
  71. package/build/hooks/use-preferred-color-scheme-style/index.native.js.map +1 -1
  72. package/build/hooks/use-previous/index.js +3 -4
  73. package/build/hooks/use-previous/index.js.map +1 -1
  74. package/build/hooks/use-reduced-motion/index.js +0 -4
  75. package/build/hooks/use-reduced-motion/index.js.map +1 -1
  76. package/build/hooks/use-ref-effect/index.js +0 -2
  77. package/build/hooks/use-ref-effect/index.js.map +1 -1
  78. package/build/hooks/use-resize-observer/index.js +23 -30
  79. package/build/hooks/use-resize-observer/index.js.map +1 -1
  80. package/build/hooks/use-resize-observer/index.native.js +0 -6
  81. package/build/hooks/use-resize-observer/index.native.js.map +1 -1
  82. package/build/hooks/use-throttle/index.js +0 -4
  83. package/build/hooks/use-throttle/index.js.map +1 -1
  84. package/build/hooks/use-viewport-match/index.js +4 -13
  85. package/build/hooks/use-viewport-match/index.js.map +1 -1
  86. package/build/hooks/use-warn-on-change/index.js +4 -14
  87. package/build/hooks/use-warn-on-change/index.js.map +1 -1
  88. package/build/index.js +0 -41
  89. package/build/index.js.map +1 -1
  90. package/build/index.native.js +0 -33
  91. package/build/index.native.js.map +1 -1
  92. package/build/utils/create-higher-order-component/index.js +1 -4
  93. package/build/utils/create-higher-order-component/index.js.map +1 -1
  94. package/build/utils/debounce/index.js +12 -37
  95. package/build/utils/debounce/index.js.map +1 -1
  96. package/build/utils/throttle/index.js +0 -5
  97. package/build/utils/throttle/index.js.map +1 -1
  98. package/build-module/higher-order/compose.js +1 -1
  99. package/build-module/higher-order/compose.js.map +1 -1
  100. package/build-module/higher-order/if-condition/index.js +3 -5
  101. package/build-module/higher-order/if-condition/index.js.map +1 -1
  102. package/build-module/higher-order/pipe.js +1 -4
  103. package/build-module/higher-order/pipe.js.map +1 -1
  104. package/build-module/higher-order/pure/index.js +4 -8
  105. package/build-module/higher-order/pure/index.js.map +1 -1
  106. package/build-module/higher-order/with-global-events/index.js +15 -29
  107. package/build-module/higher-order/with-global-events/index.js.map +1 -1
  108. package/build-module/higher-order/with-global-events/listener.js +5 -27
  109. package/build-module/higher-order/with-global-events/listener.js.map +1 -1
  110. package/build-module/higher-order/with-instance-id/index.js +5 -5
  111. package/build-module/higher-order/with-instance-id/index.js.map +1 -1
  112. package/build-module/higher-order/with-preferred-color-scheme/index.native.js +3 -3
  113. package/build-module/higher-order/with-preferred-color-scheme/index.native.js.map +1 -1
  114. package/build-module/higher-order/with-safe-timeout/index.js +6 -8
  115. package/build-module/higher-order/with-safe-timeout/index.js.map +1 -1
  116. package/build-module/higher-order/with-state/index.js +5 -9
  117. package/build-module/higher-order/with-state/index.js.map +1 -1
  118. package/build-module/hooks/use-async-list/index.js +1 -12
  119. package/build-module/hooks/use-async-list/index.js.map +1 -1
  120. package/build-module/hooks/use-constrained-tabbing/index.js +16 -27
  121. package/build-module/hooks/use-constrained-tabbing/index.js.map +1 -1
  122. package/build-module/hooks/use-constrained-tabbing/index.native.js +3 -3
  123. package/build-module/hooks/use-constrained-tabbing/index.native.js.map +1 -1
  124. package/build-module/hooks/use-copy-on-click/index.js +8 -12
  125. package/build-module/hooks/use-copy-on-click/index.js.map +1 -1
  126. package/build-module/hooks/use-copy-to-clipboard/index.js +6 -9
  127. package/build-module/hooks/use-copy-to-clipboard/index.js.map +1 -1
  128. package/build-module/hooks/use-debounce/index.js +3 -3
  129. package/build-module/hooks/use-debounce/index.js.map +1 -1
  130. package/build-module/hooks/use-dialog/index.js +3 -5
  131. package/build-module/hooks/use-dialog/index.js.map +1 -1
  132. package/build-module/hooks/use-disabled/index.js +6 -12
  133. package/build-module/hooks/use-disabled/index.js.map +1 -1
  134. package/build-module/hooks/use-dragging/index.js +6 -9
  135. package/build-module/hooks/use-dragging/index.js.map +1 -1
  136. package/build-module/hooks/use-drop-zone/index.js +29 -64
  137. package/build-module/hooks/use-drop-zone/index.js.map +1 -1
  138. package/build-module/hooks/use-fixed-window-list/index.js +8 -30
  139. package/build-module/hooks/use-fixed-window-list/index.js.map +1 -1
  140. package/build-module/hooks/use-focus-on-mount/index.js +4 -12
  141. package/build-module/hooks/use-focus-on-mount/index.js.map +1 -1
  142. package/build-module/hooks/use-focus-outside/index.js +14 -18
  143. package/build-module/hooks/use-focus-outside/index.js.map +1 -1
  144. package/build-module/hooks/use-focus-outside/index.native.js +14 -20
  145. package/build-module/hooks/use-focus-outside/index.native.js.map +1 -1
  146. package/build-module/hooks/use-focus-return/index.js +8 -14
  147. package/build-module/hooks/use-focus-return/index.js.map +1 -1
  148. package/build-module/hooks/use-focusable-iframe/index.js +2 -3
  149. package/build-module/hooks/use-focusable-iframe/index.js.map +1 -1
  150. package/build-module/hooks/use-instance-id/index.js +2 -3
  151. package/build-module/hooks/use-instance-id/index.js.map +1 -1
  152. package/build-module/hooks/use-isomorphic-layout-effect/index.js +1 -1
  153. package/build-module/hooks/use-isomorphic-layout-effect/index.js.map +1 -1
  154. package/build-module/hooks/use-keyboard-shortcut/index.js +14 -24
  155. package/build-module/hooks/use-keyboard-shortcut/index.js.map +1 -1
  156. package/build-module/hooks/use-keyboard-shortcut/index.native.js +0 -1
  157. package/build-module/hooks/use-keyboard-shortcut/index.native.js.map +1 -1
  158. package/build-module/hooks/use-media-query/index.js +2 -8
  159. package/build-module/hooks/use-media-query/index.js.map +1 -1
  160. package/build-module/hooks/use-merge-refs/index.js +19 -23
  161. package/build-module/hooks/use-merge-refs/index.js.map +1 -1
  162. package/build-module/hooks/use-preferred-color-scheme/index.android.js +1 -3
  163. package/build-module/hooks/use-preferred-color-scheme/index.android.js.map +1 -1
  164. package/build-module/hooks/use-preferred-color-scheme/index.ios.js +1 -1
  165. package/build-module/hooks/use-preferred-color-scheme/index.ios.js.map +1 -1
  166. package/build-module/hooks/use-preferred-color-scheme-style/index.native.js +3 -3
  167. package/build-module/hooks/use-preferred-color-scheme-style/index.native.js.map +1 -1
  168. package/build-module/hooks/use-previous/index.js +4 -3
  169. package/build-module/hooks/use-previous/index.js.map +1 -1
  170. package/build-module/hooks/use-reduced-motion/index.js +1 -2
  171. package/build-module/hooks/use-reduced-motion/index.js.map +1 -1
  172. package/build-module/hooks/use-ref-effect/index.js +1 -1
  173. package/build-module/hooks/use-ref-effect/index.js.map +1 -1
  174. package/build-module/hooks/use-resize-observer/index.js +22 -30
  175. package/build-module/hooks/use-resize-observer/index.js.map +1 -1
  176. package/build-module/hooks/use-resize-observer/index.native.js +1 -6
  177. package/build-module/hooks/use-resize-observer/index.native.js.map +1 -1
  178. package/build-module/hooks/use-throttle/index.js +3 -3
  179. package/build-module/hooks/use-throttle/index.js.map +1 -1
  180. package/build-module/hooks/use-viewport-match/index.js +6 -11
  181. package/build-module/hooks/use-viewport-match/index.js.map +1 -1
  182. package/build-module/hooks/use-warn-on-change/index.js +6 -12
  183. package/build-module/hooks/use-warn-on-change/index.js.map +1 -1
  184. package/build-module/index.js +10 -7
  185. package/build-module/index.js.map +1 -1
  186. package/build-module/index.native.js +10 -7
  187. package/build-module/index.native.js.map +1 -1
  188. package/build-module/utils/create-higher-order-component/index.js +1 -2
  189. package/build-module/utils/create-higher-order-component/index.js.map +1 -1
  190. package/build-module/utils/debounce/index.js +12 -35
  191. package/build-module/utils/debounce/index.js.map +1 -1
  192. package/build-module/utils/throttle/index.js +0 -3
  193. package/build-module/utils/throttle/index.js.map +1 -1
  194. package/build-types/higher-order/with-instance-id/index.d.ts +1 -1
  195. package/build-types/higher-order/with-instance-id/index.d.ts.map +1 -1
  196. package/build-types/higher-order/with-safe-timeout/index.d.ts +1 -1
  197. package/build-types/higher-order/with-safe-timeout/index.d.ts.map +1 -1
  198. package/build-types/hooks/use-disabled/index.d.ts +1 -1
  199. package/build-types/hooks/use-disabled/index.d.ts.map +1 -1
  200. package/build-types/hooks/use-isomorphic-layout-effect/index.d.ts +1 -1
  201. package/build-types/hooks/use-isomorphic-layout-effect/index.d.ts.map +1 -1
  202. package/build-types/hooks/use-viewport-match/index.d.ts +1 -1
  203. package/package.json +8 -8
  204. package/src/higher-order/with-instance-id/index.tsx +2 -2
  205. package/src/higher-order/with-safe-timeout/index.tsx +2 -2
  206. package/src/hooks/use-resize-observer/index.native.js +0 -1
  207. 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,"sources":["@wordpress/compose/src/hooks/use-focus-on-mount/index.js"],"names":["useFocusOnMount","focusOnMount","focusOnMountRef","setFocus","target","focus","preventScroll","timerId","current","clearTimeout","node","contains","ownerDocument","activeElement","setTimeout","firstTabbable","tabbable","find"],"mappings":";;;;;;;AAGA;;AACA;;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,SAASA,eAAT,CAA0BC,YAAY,GAAG,cAAzC,EAA0D;AACxE,QAAMC,eAAe,GAAG,qBAAQD,YAAR,CAAxB;AAEA;AACD;AACA;AACA;AACA;AACA;;AACC,QAAME,QAAQ,GAAKC,MAAF,IAAc;AAC9BA,IAAAA,MAAM,CAACC,KAAP,CAAc;AACb;AACA;AACA;AACAC,MAAAA,aAAa,EAAE;AAJF,KAAd;AAMA,GAPD;AASA;;;AACA,QAAMC,OAAO,GAAG,sBAAhB;AAEA,0BAAW,MAAM;AAChBL,IAAAA,eAAe,CAACM,OAAhB,GAA0BP,YAA1B;AACA,GAFD,EAEG,CAAEA,YAAF,CAFH;AAIA,0BAAW,MAAM;AAChB,WAAO,MAAM;AACZ,UAAKM,OAAO,CAACC,OAAb,EAAuB;AACtBC,QAAAA,YAAY,CAAEF,OAAO,CAACC,OAAV,CAAZ;AACA;AACD,KAJD;AAKA,GAND,EAMG,EANH;AAQA,SAAO,0BAAeE,IAAF,IAAY;AAAA;;AAC/B,QAAK,CAAEA,IAAF,IAAUR,eAAe,CAACM,OAAhB,KAA4B,KAA3C,EAAmD;AAClD;AACA;;AAED,QAAKE,IAAI,CAACC,QAAL,0BAAeD,IAAI,CAACE,aAAL,EAAoBC,aAAnC,yEAAoD,IAApD,CAAL,EAAkE;AACjE;AACA;;AAED,QAAKX,eAAe,CAACM,OAAhB,KAA4B,cAAjC,EAAkD;AACjDD,MAAAA,OAAO,CAACC,OAAR,GAAkBM,UAAU,CAAE,MAAM;AACnC,cAAMC,aAAa,GAAGV,WAAMW,QAAN,CAAeC,IAAf,CAAqBP,IAArB,EAA6B,CAA7B,CAAtB;;AAEA,YAAKK,aAAL,EAAqB;AACpBZ,UAAAA,QAAQ;AAAE;AAA6BY,UAAAA,aAA/B,CAAR;AACA;AACD,OAN2B,EAMzB,CANyB,CAA5B;AAQA;AACA;;AAEDZ,IAAAA,QAAQ,CAAEO,IAAF,CAAR;AACA,GAtBM,EAsBJ,EAtBI,CAAP;AAuBA","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"]}
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
- }, []); // Cancel blur checks on unmount.
74
+ }, []);
80
75
 
76
+ // Cancel blur checks on unmount.
81
77
  (0, _element.useEffect)(() => {
82
78
  return () => cancelBlurCheck();
83
- }, []); // Cancel a blur check if the callback or ref is no longer provided.
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(); // Skip blur check if clicking button. See `normalizeButtonFocus`.
121
+ event.persist();
126
122
 
123
+ // Skip blur check if clicking button. See `normalizeButtonFocus`.
127
124
  if (preventBlurCheck.current) {
128
125
  return;
129
- } // The usage of this attribute should be avoided. The only use case
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,"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","ignoreForRelatedTarget","getAttribute","relatedTarget","closest","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\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"]}
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
- }, []); // Cancel blur checks on unmount.
104
+ }, []);
114
105
 
106
+ // Cancel blur checks on unmount.
115
107
  (0, _element.useEffect)(() => {
116
108
  return () => cancelBlurCheck();
117
- }, []); // Cancel a blur check if the callback or ref is no longer provided.
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(); // Skip blur check if clicking button. See `normalizeButtonFocus`.
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,"sources":["@wordpress/compose/src/hooks/use-focus-outside/index.native.js"],"names":["INPUT_BUTTON_TYPES","isFocusNormalizedButton","eventTarget","nodeName","includes","type","useFocusOutside","onFocusOutside","currentOnFocusOutside","current","preventBlurCheck","blurCheckTimeoutId","cancelBlurCheck","clearTimeout","normalizeButtonFocus","event","target","isInteractionEnd","queueBlurCheck","persist","setTimeout","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\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"]}
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; // Only set when the node mounts.
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
- } // Defer to the component's own explicit focus return behavior, if
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,"sources":["@wordpress/compose/src/hooks/use-focus-return/index.js"],"names":["origin","useFocusReturn","onFocusReturn","ref","focusedBeforeMount","onFocusReturnRef","current","node","ownerDocument","activeElement","isFocused","contains","isConnected","focus"],"mappings":";;;;;;;AAGA;;AAHA;AACA;AACA;;AAGA;AACA,IAAIA,MAAM,GAAG,IAAb;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AACA,SAASC,cAAT,CAAyBC,aAAzB,EAAyC;AACxC;AACA,QAAMC,GAAG,GAAG,qBAAQ,IAAR,CAAZ;AACA;;AACA,QAAMC,kBAAkB,GAAG,qBAAQ,IAAR,CAA3B;AACA,QAAMC,gBAAgB,GAAG,qBAAQH,aAAR,CAAzB;AACA,0BAAW,MAAM;AAChBG,IAAAA,gBAAgB,CAACC,OAAjB,GAA2BJ,aAA3B;AACA,GAFD,EAEG,CAAEA,aAAF,CAFH;AAIA,SAAO,0BAAeK,IAAF,IAAY;AAC/B,QAAKA,IAAL,EAAY;AACX;AACAJ,MAAAA,GAAG,CAACG,OAAJ,GAAcC,IAAd,CAFW,CAIX;;AACA,UAAKH,kBAAkB,CAACE,OAAxB,EAAkC;AACjC;AACA;;AAEDF,MAAAA,kBAAkB,CAACE,OAAnB,GAA6BC,IAAI,CAACC,aAAL,CAAmBC,aAAhD;AACA,KAVD,MAUO,IAAKL,kBAAkB,CAACE,OAAxB,EAAkC;AACxC,YAAMI,SAAS,GAAGP,GAAG,CAACG,OAAJ,EAAaK,QAAb,CACjBR,GAAG,CAACG,OAAJ,EAAaE,aAAb,CAA2BC,aADV,CAAlB;;AAIA,UAAKN,GAAG,CAACG,OAAJ,EAAaM,WAAb,IAA4B,CAAEF,SAAnC,EAA+C;AAAA;;AAC9C,mBAAAV,MAAM,UAAN,mCAAAA,MAAM,GAAKI,kBAAkB,CAACE,OAA9B;AACA;AACA,OARuC,CAUxC;AACA;AACA;AACA;;;AACA,UAAKD,gBAAgB,CAACC,OAAtB,EAAgC;AAC/BD,QAAAA,gBAAgB,CAACC,OAAjB;AACA,OAFD,MAEO;AACN;AAAgC,SAC/B,CAAEF,kBAAkB,CAACE,OAAnB,CAA2BM,WAA7B,GACGZ,MADH,GAEGI,kBAAkB,CAACE,OAHS,GAI7BO,KAJ6B;AAKhC;;AACDb,MAAAA,MAAM,GAAG,IAAT;AACA;AACD,GApCM,EAoCJ,EApCI,CAAP;AAqCA;;eAEcC,c","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"]}
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,"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
+ {"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,"sources":["@wordpress/compose/src/hooks/use-instance-id/index.ts"],"names":["instanceMap","WeakMap","createId","object","instances","get","set","useInstanceId","prefix","preferredId","id"],"mappings":";;;;;;;AAGA;;AAHA;AACA;AACA;AAGA,MAAMA,WAAW,GAAG,IAAIC,OAAJ,EAApB;AAEA;AACA;AACA;AACA;AACA;AACA;;AACA,SAASC,QAAT,CAAmBC,MAAnB,EAA4C;AAC3C,QAAMC,SAAS,GAAGJ,WAAW,CAACK,GAAZ,CAAiBF,MAAjB,KAA6B,CAA/C;AACAH,EAAAA,WAAW,CAACM,GAAZ,CAAiBH,MAAjB,EAAyBC,SAAS,GAAG,CAArC;AACA,SAAOA,SAAP;AACA;AAED;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;;AASA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,SAASG,aAAT,CACCJ,MADD,EAECK,MAFD,EAGCC,WAHD,EAImB;AAClB,SAAO,sBAAS,MAAM;AACrB,QAAKA,WAAL,EAAmB,OAAOA,WAAP;AACnB,UAAMC,EAAE,GAAGR,QAAQ,CAAEC,MAAF,CAAnB;AAEA,WAAOK,MAAM,GAAI,GAAGA,MAAQ,IAAIE,EAAI,EAAvB,GAA2BA,EAAxC;AACA,GALM,EAKJ,CAAEP,MAAF,EAAUM,WAAV,EAAuBD,MAAvB,CALI,CAAP;AAMA;;eAEcD,a","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"]}
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"}