@wordpress/components 21.1.2-next.4d3b314fd5.0 → 21.3.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 (401) hide show
  1. package/CHANGELOG.md +48 -3
  2. package/CONTRIBUTING.md +20 -0
  3. package/build/border-box-control/border-box-control/component.js +2 -0
  4. package/build/border-box-control/border-box-control/component.js.map +1 -1
  5. package/build/border-box-control/border-box-control/hook.js +4 -1
  6. package/build/border-box-control/border-box-control/hook.js.map +1 -1
  7. package/build/border-box-control/utils.js +42 -2
  8. package/build/border-box-control/utils.js.map +1 -1
  9. package/build/border-control/border-control/component.js +2 -0
  10. package/build/border-control/border-control/component.js.map +1 -1
  11. package/build/combobox-control/index.js +0 -1
  12. package/build/combobox-control/index.js.map +1 -1
  13. package/build/custom-select-control/index.js +4 -2
  14. package/build/custom-select-control/index.js.map +1 -1
  15. package/build/disabled/index.js +6 -26
  16. package/build/disabled/index.js.map +1 -1
  17. package/build/font-size-picker/index.js +47 -56
  18. package/build/font-size-picker/index.js.map +1 -1
  19. package/build/font-size-picker/styles.js +65 -0
  20. package/build/font-size-picker/styles.js.map +1 -0
  21. package/build/font-size-picker/types.js +6 -0
  22. package/build/font-size-picker/types.js.map +1 -0
  23. package/build/font-size-picker/utils.js +18 -16
  24. package/build/font-size-picker/utils.js.map +1 -1
  25. package/build/form-token-field/suggestions-list.js +5 -5
  26. package/build/form-token-field/suggestions-list.js.map +1 -1
  27. package/build/form-token-field/token-input.js +20 -1
  28. package/build/form-token-field/token-input.js.map +1 -1
  29. package/build/higher-order/with-fallback-styles/index.js +1 -1
  30. package/build/higher-order/with-fallback-styles/index.js.map +1 -1
  31. package/build/index.js +14 -6
  32. package/build/index.js.map +1 -1
  33. package/build/modal/aria-helper.js +2 -3
  34. package/build/modal/aria-helper.js.map +1 -1
  35. package/build/modal/index.js +42 -11
  36. package/build/modal/index.js.map +1 -1
  37. package/build/modal/types.js +6 -0
  38. package/build/modal/types.js.map +1 -0
  39. package/build/navigator/index.js +8 -8
  40. package/build/navigator/index.js.map +1 -1
  41. package/build/navigator/navigator-back-button/component.js +5 -4
  42. package/build/navigator/navigator-back-button/component.js.map +1 -1
  43. package/build/navigator/navigator-back-button/index.js +1 -1
  44. package/build/navigator/navigator-back-button/index.js.map +1 -1
  45. package/build/navigator/navigator-button/component.js +5 -4
  46. package/build/navigator/navigator-button/component.js.map +1 -1
  47. package/build/navigator/navigator-button/index.js +1 -1
  48. package/build/navigator/navigator-button/index.js.map +1 -1
  49. package/build/navigator/navigator-provider/component.js +10 -7
  50. package/build/navigator/navigator-provider/component.js.map +1 -1
  51. package/build/navigator/navigator-provider/index.js +1 -1
  52. package/build/navigator/navigator-provider/index.js.map +1 -1
  53. package/build/navigator/navigator-screen/component.js +30 -26
  54. package/build/navigator/navigator-screen/component.js.map +1 -1
  55. package/build/navigator/navigator-screen/index.js +1 -1
  56. package/build/navigator/navigator-screen/index.js.map +1 -1
  57. package/build/resizable-box/resize-tooltip/utils.js +12 -14
  58. package/build/resizable-box/resize-tooltip/utils.js.map +1 -1
  59. package/build/sandbox/index.js +68 -67
  60. package/build/sandbox/index.js.map +1 -1
  61. package/build/sandbox/index.native.js +66 -63
  62. package/build/sandbox/index.native.js.map +1 -1
  63. package/build/search-control/index.native.js +6 -2
  64. package/build/search-control/index.native.js.map +1 -1
  65. package/build/slot-fill/bubbles-virtually/slot-fill-context.js +8 -2
  66. package/build/slot-fill/bubbles-virtually/slot-fill-context.js.map +1 -1
  67. package/build/slot-fill/bubbles-virtually/slot-fill-provider.js +31 -41
  68. package/build/slot-fill/bubbles-virtually/slot-fill-provider.js.map +1 -1
  69. package/build/slot-fill/bubbles-virtually/use-slot-fills.js +39 -0
  70. package/build/slot-fill/bubbles-virtually/use-slot-fills.js.map +1 -0
  71. package/build/slot-fill/bubbles-virtually/use-slot.js +13 -4
  72. package/build/slot-fill/bubbles-virtually/use-slot.js.map +1 -1
  73. package/build/slot-fill/index.js +8 -0
  74. package/build/slot-fill/index.js.map +1 -1
  75. package/build/tab-panel/index.js +4 -4
  76. package/build/tab-panel/index.js.map +1 -1
  77. package/build/theme/index.js +62 -0
  78. package/build/theme/index.js.map +1 -0
  79. package/build/theme/styles.js +33 -0
  80. package/build/theme/styles.js.map +1 -0
  81. package/build/theme/types.js +6 -0
  82. package/build/theme/types.js.map +1 -0
  83. package/build/toggle-group-control/toggle-group-control-option-base/styles.js +8 -8
  84. package/build/toggle-group-control/toggle-group-control-option-base/styles.js.map +1 -1
  85. package/build/tools-panel/tools-panel/hook.js +3 -3
  86. package/build/tools-panel/tools-panel/hook.js.map +1 -1
  87. package/build/tools-panel/tools-panel-item/hook.js +6 -6
  88. package/build/tools-panel/tools-panel-item/hook.js.map +1 -1
  89. package/build/tooltip/index.js +4 -1
  90. package/build/tooltip/index.js.map +1 -1
  91. package/build/tooltip/index.native.js +17 -4
  92. package/build/tooltip/index.native.js.map +1 -1
  93. package/build-module/border-box-control/border-box-control/component.js +2 -0
  94. package/build-module/border-box-control/border-box-control/component.js.map +1 -1
  95. package/build-module/border-box-control/border-box-control/hook.js +4 -1
  96. package/build-module/border-box-control/border-box-control/hook.js.map +1 -1
  97. package/build-module/border-box-control/utils.js +36 -1
  98. package/build-module/border-box-control/utils.js.map +1 -1
  99. package/build-module/border-control/border-control/component.js +2 -0
  100. package/build-module/border-control/border-control/component.js.map +1 -1
  101. package/build-module/combobox-control/index.js +0 -1
  102. package/build-module/combobox-control/index.js.map +1 -1
  103. package/build-module/custom-select-control/index.js +2 -1
  104. package/build-module/custom-select-control/index.js.map +1 -1
  105. package/build-module/disabled/index.js +7 -26
  106. package/build-module/disabled/index.js.map +1 -1
  107. package/build-module/font-size-picker/index.js +46 -54
  108. package/build-module/font-size-picker/index.js.map +1 -1
  109. package/build-module/font-size-picker/styles.js +54 -0
  110. package/build-module/font-size-picker/styles.js.map +1 -0
  111. package/build-module/font-size-picker/types.js +2 -0
  112. package/build-module/font-size-picker/types.js.map +1 -0
  113. package/build-module/font-size-picker/utils.js +22 -16
  114. package/build-module/font-size-picker/utils.js.map +1 -1
  115. package/build-module/form-token-field/suggestions-list.js +5 -5
  116. package/build-module/form-token-field/suggestions-list.js.map +1 -1
  117. package/build-module/form-token-field/token-input.js +21 -2
  118. package/build-module/form-token-field/token-input.js.map +1 -1
  119. package/build-module/higher-order/with-fallback-styles/index.js +2 -2
  120. package/build-module/higher-order/with-fallback-styles/index.js.map +1 -1
  121. package/build-module/index.js +3 -2
  122. package/build-module/index.js.map +1 -1
  123. package/build-module/modal/aria-helper.js +2 -3
  124. package/build-module/modal/aria-helper.js.map +1 -1
  125. package/build-module/modal/index.js +44 -12
  126. package/build-module/modal/index.js.map +1 -1
  127. package/build-module/modal/types.js +2 -0
  128. package/build-module/modal/types.js.map +1 -0
  129. package/build-module/navigator/index.js +4 -4
  130. package/build-module/navigator/index.js.map +1 -1
  131. package/build-module/navigator/navigator-back-button/component.js +3 -3
  132. package/build-module/navigator/navigator-back-button/component.js.map +1 -1
  133. package/build-module/navigator/navigator-back-button/index.js +1 -1
  134. package/build-module/navigator/navigator-back-button/index.js.map +1 -1
  135. package/build-module/navigator/navigator-button/component.js +3 -3
  136. package/build-module/navigator/navigator-button/component.js.map +1 -1
  137. package/build-module/navigator/navigator-button/index.js +1 -1
  138. package/build-module/navigator/navigator-button/index.js.map +1 -1
  139. package/build-module/navigator/navigator-provider/component.js +8 -6
  140. package/build-module/navigator/navigator-provider/component.js.map +1 -1
  141. package/build-module/navigator/navigator-provider/index.js +1 -1
  142. package/build-module/navigator/navigator-provider/index.js.map +1 -1
  143. package/build-module/navigator/navigator-screen/component.js +18 -25
  144. package/build-module/navigator/navigator-screen/component.js.map +1 -1
  145. package/build-module/navigator/navigator-screen/index.js +1 -1
  146. package/build-module/navigator/navigator-screen/index.js.map +1 -1
  147. package/build-module/resizable-box/resize-tooltip/utils.js +13 -15
  148. package/build-module/resizable-box/resize-tooltip/utils.js.map +1 -1
  149. package/build-module/sandbox/index.js +69 -67
  150. package/build-module/sandbox/index.js.map +1 -1
  151. package/build-module/sandbox/index.native.js +57 -53
  152. package/build-module/sandbox/index.native.js.map +1 -1
  153. package/build-module/search-control/index.native.js +6 -2
  154. package/build-module/search-control/index.native.js.map +1 -1
  155. package/build-module/slot-fill/bubbles-virtually/slot-fill-context.js +7 -2
  156. package/build-module/slot-fill/bubbles-virtually/slot-fill-context.js.map +1 -1
  157. package/build-module/slot-fill/bubbles-virtually/slot-fill-provider.js +30 -42
  158. package/build-module/slot-fill/bubbles-virtually/slot-fill-provider.js.map +1 -1
  159. package/build-module/slot-fill/bubbles-virtually/use-slot-fills.js +27 -0
  160. package/build-module/slot-fill/bubbles-virtually/use-slot-fills.js.map +1 -0
  161. package/build-module/slot-fill/bubbles-virtually/use-slot.js +13 -5
  162. package/build-module/slot-fill/bubbles-virtually/use-slot.js.map +1 -1
  163. package/build-module/slot-fill/index.js +1 -0
  164. package/build-module/slot-fill/index.js.map +1 -1
  165. package/build-module/tab-panel/index.js +4 -4
  166. package/build-module/tab-panel/index.js.map +1 -1
  167. package/build-module/theme/index.js +52 -0
  168. package/build-module/theme/index.js.map +1 -0
  169. package/build-module/theme/styles.js +25 -0
  170. package/build-module/theme/styles.js.map +1 -0
  171. package/build-module/theme/types.js +2 -0
  172. package/build-module/theme/types.js.map +1 -0
  173. package/build-module/toggle-group-control/toggle-group-control-option-base/styles.js +7 -7
  174. package/build-module/toggle-group-control/toggle-group-control-option-base/styles.js.map +1 -1
  175. package/build-module/tools-panel/tools-panel/hook.js +3 -3
  176. package/build-module/tools-panel/tools-panel/hook.js.map +1 -1
  177. package/build-module/tools-panel/tools-panel-item/hook.js +6 -6
  178. package/build-module/tools-panel/tools-panel-item/hook.js.map +1 -1
  179. package/build-module/tooltip/index.js +4 -1
  180. package/build-module/tooltip/index.js.map +1 -1
  181. package/build-module/tooltip/index.native.js +17 -4
  182. package/build-module/tooltip/index.native.js.map +1 -1
  183. package/build-style/style-rtl.css +27 -120
  184. package/build-style/style.css +27 -120
  185. package/build-types/border-box-control/border-box-control/component.d.ts.map +1 -1
  186. package/build-types/border-box-control/border-box-control/hook.d.ts +1 -0
  187. package/build-types/border-box-control/border-box-control/hook.d.ts.map +1 -1
  188. package/build-types/border-box-control/utils.d.ts +1 -3
  189. package/build-types/border-box-control/utils.d.ts.map +1 -1
  190. package/build-types/border-control/border-control/component.d.ts +1 -0
  191. package/build-types/border-control/border-control/component.d.ts.map +1 -1
  192. package/build-types/border-control/border-control/hook.d.ts +1 -0
  193. package/build-types/border-control/border-control/hook.d.ts.map +1 -1
  194. package/build-types/border-control/stories/index.d.ts +6 -0
  195. package/build-types/border-control/stories/index.d.ts.map +1 -1
  196. package/build-types/border-control/types.d.ts +4 -0
  197. package/build-types/border-control/types.d.ts.map +1 -1
  198. package/build-types/confirm-dialog/types.d.ts +5 -1
  199. package/build-types/confirm-dialog/types.d.ts.map +1 -1
  200. package/build-types/custom-select-control/index.d.ts +13 -0
  201. package/build-types/custom-select-control/index.d.ts.map +1 -0
  202. package/build-types/custom-select-control/styles.d.ts +9 -0
  203. package/build-types/custom-select-control/styles.d.ts.map +1 -0
  204. package/build-types/disabled/index.d.ts.map +1 -1
  205. package/build-types/font-size-picker/index.d.ts +5 -0
  206. package/build-types/font-size-picker/index.d.ts.map +1 -0
  207. package/build-types/font-size-picker/stories/e2e/index.d.ts +16 -0
  208. package/build-types/font-size-picker/stories/e2e/index.d.ts.map +1 -0
  209. package/build-types/font-size-picker/stories/index.d.ts +31 -0
  210. package/build-types/font-size-picker/stories/index.d.ts.map +1 -0
  211. package/build-types/font-size-picker/styles.d.ts +27 -0
  212. package/build-types/font-size-picker/styles.d.ts.map +1 -0
  213. package/build-types/font-size-picker/test/index.d.ts +2 -0
  214. package/build-types/font-size-picker/test/index.d.ts.map +1 -0
  215. package/build-types/font-size-picker/test/utils.d.ts +2 -0
  216. package/build-types/font-size-picker/test/utils.d.ts.map +1 -0
  217. package/build-types/font-size-picker/types.d.ts +93 -0
  218. package/build-types/font-size-picker/types.d.ts.map +1 -0
  219. package/build-types/font-size-picker/utils.d.ts +41 -0
  220. package/build-types/font-size-picker/utils.d.ts.map +1 -0
  221. package/build-types/form-token-field/token-input.d.ts.map +1 -1
  222. package/build-types/modal/aria-helper.d.ts +4 -4
  223. package/build-types/modal/aria-helper.d.ts.map +1 -1
  224. package/build-types/modal/index.d.ts +35 -2
  225. package/build-types/modal/index.d.ts.map +1 -1
  226. package/build-types/modal/stories/index.d.ts +9 -0
  227. package/build-types/modal/stories/index.d.ts.map +1 -0
  228. package/build-types/modal/test/aria-helper.d.ts +2 -0
  229. package/build-types/modal/test/aria-helper.d.ts.map +1 -0
  230. package/build-types/modal/test/index.d.ts +2 -0
  231. package/build-types/modal/test/index.d.ts.map +1 -0
  232. package/build-types/modal/types.d.ts +134 -0
  233. package/build-types/modal/types.d.ts.map +1 -0
  234. package/build-types/navigator/index.d.ts +4 -4
  235. package/build-types/navigator/index.d.ts.map +1 -1
  236. package/build-types/navigator/navigator-back-button/component.d.ts +4 -2
  237. package/build-types/navigator/navigator-back-button/component.d.ts.map +1 -1
  238. package/build-types/navigator/navigator-back-button/hook.d.ts +1 -0
  239. package/build-types/navigator/navigator-back-button/hook.d.ts.map +1 -1
  240. package/build-types/navigator/navigator-back-button/index.d.ts +1 -1
  241. package/build-types/navigator/navigator-back-button/index.d.ts.map +1 -1
  242. package/build-types/navigator/navigator-button/component.d.ts +4 -2
  243. package/build-types/navigator/navigator-button/component.d.ts.map +1 -1
  244. package/build-types/navigator/navigator-button/hook.d.ts +1 -0
  245. package/build-types/navigator/navigator-button/hook.d.ts.map +1 -1
  246. package/build-types/navigator/navigator-button/index.d.ts +1 -1
  247. package/build-types/navigator/navigator-button/index.d.ts.map +1 -1
  248. package/build-types/navigator/navigator-provider/component.d.ts +2 -2
  249. package/build-types/navigator/navigator-provider/component.d.ts.map +1 -1
  250. package/build-types/navigator/navigator-provider/index.d.ts +1 -1
  251. package/build-types/navigator/navigator-provider/index.d.ts.map +1 -1
  252. package/build-types/navigator/navigator-screen/component.d.ts +2 -2
  253. package/build-types/navigator/navigator-screen/component.d.ts.map +1 -1
  254. package/build-types/navigator/navigator-screen/index.d.ts +1 -1
  255. package/build-types/navigator/navigator-screen/index.d.ts.map +1 -1
  256. package/build-types/navigator/stories/index.d.ts +9 -0
  257. package/build-types/navigator/stories/index.d.ts.map +1 -0
  258. package/build-types/navigator/test/index.d.ts +2 -0
  259. package/build-types/navigator/test/index.d.ts.map +1 -0
  260. package/build-types/navigator/types.d.ts +4 -1
  261. package/build-types/navigator/types.d.ts.map +1 -1
  262. package/build-types/slot-fill/bubbles-virtually/slot-fill-context.d.ts +2 -2
  263. package/build-types/slot-fill/bubbles-virtually/slot-fill-context.d.ts.map +1 -1
  264. package/build-types/slot-fill/bubbles-virtually/slot-fill-provider.d.ts.map +1 -1
  265. package/build-types/slot-fill/bubbles-virtually/use-slot-fills.d.ts +2 -0
  266. package/build-types/slot-fill/bubbles-virtually/use-slot-fills.d.ts.map +1 -0
  267. package/build-types/slot-fill/bubbles-virtually/use-slot.d.ts.map +1 -1
  268. package/build-types/slot-fill/index.d.ts +1 -0
  269. package/build-types/slot-fill/index.d.ts.map +1 -1
  270. package/build-types/tab-panel/index.d.ts.map +1 -1
  271. package/build-types/theme/index.d.ts +31 -0
  272. package/build-types/theme/index.d.ts.map +1 -0
  273. package/build-types/theme/stories/index.d.ts +13 -0
  274. package/build-types/theme/stories/index.d.ts.map +1 -0
  275. package/build-types/theme/styles.d.ts +10 -0
  276. package/build-types/theme/styles.d.ts.map +1 -0
  277. package/build-types/theme/test/index.d.ts +2 -0
  278. package/build-types/theme/test/index.d.ts.map +1 -0
  279. package/build-types/theme/types.d.ts +21 -0
  280. package/build-types/theme/types.d.ts.map +1 -0
  281. package/build-types/toggle-group-control/toggle-group-control-option-base/styles.d.ts +1 -1
  282. package/build-types/toggle-group-control/toggle-group-control-option-base/styles.d.ts.map +1 -1
  283. package/build-types/tools-panel/tools-panel/hook.d.ts.map +1 -1
  284. package/build-types/tools-panel/tools-panel-item/hook.d.ts.map +1 -1
  285. package/build-types/tooltip/index.d.ts.map +1 -1
  286. package/package.json +19 -18
  287. package/src/alignment-matrix-control/test/index.js +17 -62
  288. package/src/base-field/test/index.js +4 -6
  289. package/src/border-box-control/border-box-control/component.tsx +2 -0
  290. package/src/border-box-control/border-box-control/hook.ts +4 -0
  291. package/src/border-box-control/test/index.js +7 -2
  292. package/src/border-box-control/test/utils.js +48 -0
  293. package/src/border-box-control/utils.ts +44 -1
  294. package/src/border-control/border-control/README.md +6 -0
  295. package/src/border-control/border-control/component.tsx +2 -0
  296. package/src/border-control/types.ts +4 -0
  297. package/src/button/style.scss +25 -25
  298. package/src/button/test/index.js +3 -5
  299. package/src/combobox-control/index.js +0 -5
  300. package/src/combobox-control/test/index.js +1 -1
  301. package/src/confirm-dialog/types.ts +6 -0
  302. package/src/custom-select-control/index.js +2 -1
  303. package/src/date-time/time/test/index.tsx +2 -6
  304. package/src/disabled/index.tsx +11 -33
  305. package/src/disabled/test/index.tsx +14 -82
  306. package/src/dropdown/test/index.js +4 -3
  307. package/src/font-size-picker/{index.js → index.tsx} +114 -80
  308. package/src/font-size-picker/stories/e2e/{index.js → index.tsx} +13 -4
  309. package/src/font-size-picker/stories/{index.js → index.tsx} +42 -36
  310. package/src/font-size-picker/styles.ts +46 -0
  311. package/src/font-size-picker/test/{index.js → index.tsx} +3 -3
  312. package/src/font-size-picker/test/{utils.js → utils.ts} +11 -7
  313. package/src/font-size-picker/types.ts +98 -0
  314. package/src/font-size-picker/{utils.js → utils.ts} +52 -28
  315. package/src/form-file-upload/test/index.tsx +1 -1
  316. package/src/form-token-field/suggestions-list.tsx +5 -5
  317. package/src/form-token-field/test/index.tsx +22 -1
  318. package/src/form-token-field/token-input.tsx +25 -3
  319. package/src/higher-order/with-fallback-styles/index.js +6 -2
  320. package/src/higher-order/with-focus-outside/test/index.js +44 -45
  321. package/src/higher-order/with-focus-return/test/index.js +34 -30
  322. package/src/higher-order/with-notices/test/index.js +1 -1
  323. package/src/index.js +3 -1
  324. package/src/input-control/test/index.js +2 -2
  325. package/src/item-group/test/index.js +2 -2
  326. package/src/menu-item/test/index.js +0 -3
  327. package/src/mobile/bottom-sheet/test/range-cell.native.js +16 -14
  328. package/src/modal/README.md +53 -54
  329. package/src/modal/{aria-helper.js → aria-helper.ts} +5 -7
  330. package/src/modal/{index.js → index.tsx} +48 -12
  331. package/src/modal/stories/{index.js → index.tsx} +47 -42
  332. package/src/modal/test/{aria-helper.js → aria-helper.ts} +0 -0
  333. package/src/modal/test/{index.js → index.tsx} +13 -3
  334. package/src/modal/types.ts +144 -0
  335. package/src/navigation/test/index.js +1 -1
  336. package/src/navigator/index.ts +4 -4
  337. package/src/navigator/navigator-back-button/component.tsx +4 -4
  338. package/src/navigator/navigator-back-button/index.ts +1 -1
  339. package/src/navigator/navigator-button/component.tsx +4 -4
  340. package/src/navigator/navigator-button/index.ts +1 -1
  341. package/src/navigator/navigator-provider/component.tsx +6 -4
  342. package/src/navigator/navigator-provider/index.ts +1 -1
  343. package/src/navigator/navigator-screen/component.tsx +27 -26
  344. package/src/navigator/navigator-screen/index.ts +1 -1
  345. package/src/navigator/stories/index.tsx +210 -0
  346. package/src/navigator/test/index.tsx +509 -0
  347. package/src/navigator/types.ts +2 -0
  348. package/src/notice/test/__snapshots__/index.js.snap +39 -38
  349. package/src/notice/test/index.js +15 -36
  350. package/src/notice/test/list.js +6 -14
  351. package/src/number-control/test/index.js +3 -2
  352. package/src/panel/test/body.js +2 -2
  353. package/src/placeholder/style.scss +7 -2
  354. package/src/resizable-box/resize-tooltip/utils.ts +13 -13
  355. package/src/sandbox/index.js +75 -54
  356. package/src/sandbox/index.native.js +75 -52
  357. package/src/sandbox/test/index.js +7 -10
  358. package/src/search-control/index.native.js +6 -0
  359. package/src/shortcut/test/index.tsx +1 -1
  360. package/src/slot-fill/bubbles-virtually/slot-fill-context.js +6 -2
  361. package/src/slot-fill/bubbles-virtually/slot-fill-provider.js +53 -58
  362. package/src/slot-fill/bubbles-virtually/use-slot-fills.js +24 -0
  363. package/src/slot-fill/bubbles-virtually/use-slot.js +11 -6
  364. package/src/slot-fill/index.js +1 -0
  365. package/src/style.scss +4 -1
  366. package/src/tab-panel/index.tsx +4 -7
  367. package/src/text-highlight/test/index.tsx +1 -3
  368. package/src/theme/README.md +34 -0
  369. package/src/theme/index.tsx +51 -0
  370. package/src/theme/stories/index.tsx +47 -0
  371. package/src/theme/styles.ts +28 -0
  372. package/src/theme/test/index.tsx +101 -0
  373. package/src/theme/types.ts +21 -0
  374. package/src/toggle-group-control/test/__snapshots__/index.tsx.snap +1 -0
  375. package/src/toggle-group-control/toggle-group-control-option-base/styles.ts +9 -7
  376. package/src/toolbar/test/index.js +2 -2
  377. package/src/toolbar-group/test/index.js +6 -10
  378. package/src/tools-panel/test/index.js +4 -6
  379. package/src/tools-panel/tools-panel/hook.ts +2 -9
  380. package/src/tools-panel/tools-panel-item/hook.ts +17 -3
  381. package/src/tooltip/index.js +3 -0
  382. package/src/tooltip/index.native.js +15 -0
  383. package/src/tooltip/test/index.native.js +1 -2
  384. package/src/tree-grid/test/__snapshots__/cell.js.snap +1 -3
  385. package/src/tree-grid/test/__snapshots__/roving-tab-index-item.js.snap +17 -15
  386. package/src/tree-grid/test/__snapshots__/row.js.snap +25 -21
  387. package/src/tree-grid/test/cell.js +4 -4
  388. package/src/tree-grid/test/roving-tab-index-item.js +8 -8
  389. package/src/tree-grid/test/roving-tab-index.js +3 -3
  390. package/src/tree-grid/test/row.js +20 -16
  391. package/src/truncate/test/index.tsx +4 -4
  392. package/src/ui/shortcut/test/index.js +2 -1
  393. package/src/ui/spinner/test/index.js +14 -13
  394. package/src/ui/tooltip/test/index.js +16 -14
  395. package/src/utils/theme-variables.scss +8 -0
  396. package/src/visually-hidden/README.md +4 -0
  397. package/tsconfig.json +0 -2
  398. package/tsconfig.tsbuildinfo +1 -1
  399. package/src/font-size-picker/style.scss +0 -78
  400. package/src/navigator/stories/index.js +0 -194
  401. package/src/navigator/test/index.js +0 -407
@@ -0,0 +1,2 @@
1
+ export {};
2
+ //# sourceMappingURL=types.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"sources":[],"names":[],"mappings":"","sourcesContent":[]}
@@ -1,6 +1,6 @@
1
- export { default as NavigatorProvider } from './navigator-provider';
2
- export { default as NavigatorScreen } from './navigator-screen';
3
- export { default as NavigatorButton } from './navigator-button';
4
- export { default as NavigatorBackButton } from './navigator-back-button';
1
+ export { NavigatorProvider } from './navigator-provider';
2
+ export { NavigatorScreen } from './navigator-screen';
3
+ export { NavigatorButton } from './navigator-button';
4
+ export { NavigatorBackButton } from './navigator-back-button';
5
5
  export { default as useNavigator } from './use-navigator';
6
6
  //# sourceMappingURL=index.js.map
@@ -1 +1 @@
1
- {"version":3,"sources":["@wordpress/components/src/navigator/index.ts"],"names":["default","NavigatorProvider","NavigatorScreen","NavigatorButton","NavigatorBackButton","useNavigator"],"mappings":"AAAA,SAASA,OAAO,IAAIC,iBAApB,QAA6C,sBAA7C;AACA,SAASD,OAAO,IAAIE,eAApB,QAA2C,oBAA3C;AACA,SAASF,OAAO,IAAIG,eAApB,QAA2C,oBAA3C;AACA,SAASH,OAAO,IAAII,mBAApB,QAA+C,yBAA/C;AACA,SAASJ,OAAO,IAAIK,YAApB,QAAwC,iBAAxC","sourcesContent":["export { default as NavigatorProvider } from './navigator-provider';\nexport { default as NavigatorScreen } from './navigator-screen';\nexport { default as NavigatorButton } from './navigator-button';\nexport { default as NavigatorBackButton } from './navigator-back-button';\nexport { default as useNavigator } from './use-navigator';\n"]}
1
+ {"version":3,"sources":["@wordpress/components/src/navigator/index.ts"],"names":["NavigatorProvider","NavigatorScreen","NavigatorButton","NavigatorBackButton","default","useNavigator"],"mappings":"AAAA,SAASA,iBAAT,QAAkC,sBAAlC;AACA,SAASC,eAAT,QAAgC,oBAAhC;AACA,SAASC,eAAT,QAAgC,oBAAhC;AACA,SAASC,mBAAT,QAAoC,yBAApC;AACA,SAASC,OAAO,IAAIC,YAApB,QAAwC,iBAAxC","sourcesContent":["export { NavigatorProvider } from './navigator-provider';\nexport { NavigatorScreen } from './navigator-screen';\nexport { NavigatorButton } from './navigator-button';\nexport { NavigatorBackButton } from './navigator-back-button';\nexport { default as useNavigator } from './use-navigator';\n"]}
@@ -12,7 +12,7 @@ import { contextConnect } from '../../ui/context';
12
12
  import { View } from '../../view';
13
13
  import { useNavigatorBackButton } from './hook';
14
14
 
15
- function NavigatorBackButton(props, forwardedRef) {
15
+ function UnconnectedNavigatorBackButton(props, forwardedRef) {
16
16
  const navigatorBackButtonProps = useNavigatorBackButton(props);
17
17
  return createElement(View, _extends({
18
18
  ref: forwardedRef
@@ -54,6 +54,6 @@ function NavigatorBackButton(props, forwardedRef) {
54
54
  */
55
55
 
56
56
 
57
- const ConnectedNavigatorBackButton = contextConnect(NavigatorBackButton, 'NavigatorBackButton');
58
- export default ConnectedNavigatorBackButton;
57
+ export const NavigatorBackButton = contextConnect(UnconnectedNavigatorBackButton, 'NavigatorBackButton');
58
+ export default NavigatorBackButton;
59
59
  //# sourceMappingURL=component.js.map
@@ -1 +1 @@
1
- {"version":3,"sources":["@wordpress/components/src/navigator/navigator-back-button/component.tsx"],"names":["contextConnect","View","useNavigatorBackButton","NavigatorBackButton","props","forwardedRef","navigatorBackButtonProps","ConnectedNavigatorBackButton"],"mappings":";;;AAAA;AACA;AACA;;AAGA;AACA;AACA;AACA,SAASA,cAAT,QAAwD,kBAAxD;AACA,SAASC,IAAT,QAAqB,YAArB;AACA,SAASC,sBAAT,QAAuC,QAAvC;;AAGA,SAASC,mBAAT,CACCC,KADD,EAECC,YAFD,EAGE;AACD,QAAMC,wBAAwB,GAAGJ,sBAAsB,CAAEE,KAAF,CAAvD;AAEA,SAAO,cAAC,IAAD;AAAM,IAAA,GAAG,EAAGC;AAAZ,KAAgCC,wBAAhC,EAAP;AACA;AAED;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;;AACA,MAAMC,4BAA4B,GAAGP,cAAc,CAClDG,mBADkD,EAElD,qBAFkD,CAAnD;AAKA,eAAeI,4BAAf","sourcesContent":["/**\n * External dependencies\n */\nimport type { ForwardedRef } from 'react';\n\n/**\n * Internal dependencies\n */\nimport { contextConnect, WordPressComponentProps } from '../../ui/context';\nimport { View } from '../../view';\nimport { useNavigatorBackButton } from './hook';\nimport type { NavigatorBackButtonProps } from '../types';\n\nfunction NavigatorBackButton(\n\tprops: WordPressComponentProps< NavigatorBackButtonProps, 'button' >,\n\tforwardedRef: ForwardedRef< any >\n) {\n\tconst navigatorBackButtonProps = useNavigatorBackButton( props );\n\n\treturn <View ref={ forwardedRef } { ...navigatorBackButtonProps } />;\n}\n\n/**\n * The `NavigatorBackButton` component can be used to navigate to a screen and\n * should be used in combination with the `NavigatorProvider`, the\n * `NavigatorScreen` and the `NavigatorButton` components (or the `useNavigator`\n * hook).\n *\n * @example\n * ```jsx\n * import {\n * __experimentalNavigatorProvider as NavigatorProvider,\n * __experimentalNavigatorScreen as NavigatorScreen,\n * __experimentalNavigatorButton as NavigatorButton,\n * __experimentalNavigatorBackButton as NavigatorBackButton,\n * } from '@wordpress/components';\n *\n * const MyNavigation = () => (\n * <NavigatorProvider initialPath=\"/\">\n * <NavigatorScreen path=\"/\">\n * <p>This is the home screen.</p>\n * <NavigatorButton path=\"/child\">\n * Navigate to child screen.\n * </NavigatorButton>\n * </NavigatorScreen>\n *\n * <NavigatorScreen path=\"/child\">\n * <p>This is the child screen.</p>\n * <NavigatorBackButton>\n * Go back\n * </NavigatorBackButton>\n * </NavigatorScreen>\n * </NavigatorProvider>\n * );\n * ```\n */\nconst ConnectedNavigatorBackButton = contextConnect(\n\tNavigatorBackButton,\n\t'NavigatorBackButton'\n);\n\nexport default ConnectedNavigatorBackButton;\n"]}
1
+ {"version":3,"sources":["@wordpress/components/src/navigator/navigator-back-button/component.tsx"],"names":["contextConnect","View","useNavigatorBackButton","UnconnectedNavigatorBackButton","props","forwardedRef","navigatorBackButtonProps","NavigatorBackButton"],"mappings":";;;AAAA;AACA;AACA;;AAGA;AACA;AACA;AACA,SAASA,cAAT,QAAwD,kBAAxD;AACA,SAASC,IAAT,QAAqB,YAArB;AACA,SAASC,sBAAT,QAAuC,QAAvC;;AAGA,SAASC,8BAAT,CACCC,KADD,EAECC,YAFD,EAGE;AACD,QAAMC,wBAAwB,GAAGJ,sBAAsB,CAAEE,KAAF,CAAvD;AAEA,SAAO,cAAC,IAAD;AAAM,IAAA,GAAG,EAAGC;AAAZ,KAAgCC,wBAAhC,EAAP;AACA;AAED;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;;AACA,OAAO,MAAMC,mBAAmB,GAAGP,cAAc,CAChDG,8BADgD,EAEhD,qBAFgD,CAA1C;AAKP,eAAeI,mBAAf","sourcesContent":["/**\n * External dependencies\n */\nimport type { ForwardedRef } from 'react';\n\n/**\n * Internal dependencies\n */\nimport { contextConnect, WordPressComponentProps } from '../../ui/context';\nimport { View } from '../../view';\nimport { useNavigatorBackButton } from './hook';\nimport type { NavigatorBackButtonProps } from '../types';\n\nfunction UnconnectedNavigatorBackButton(\n\tprops: WordPressComponentProps< NavigatorBackButtonProps, 'button' >,\n\tforwardedRef: ForwardedRef< any >\n) {\n\tconst navigatorBackButtonProps = useNavigatorBackButton( props );\n\n\treturn <View ref={ forwardedRef } { ...navigatorBackButtonProps } />;\n}\n\n/**\n * The `NavigatorBackButton` component can be used to navigate to a screen and\n * should be used in combination with the `NavigatorProvider`, the\n * `NavigatorScreen` and the `NavigatorButton` components (or the `useNavigator`\n * hook).\n *\n * @example\n * ```jsx\n * import {\n * __experimentalNavigatorProvider as NavigatorProvider,\n * __experimentalNavigatorScreen as NavigatorScreen,\n * __experimentalNavigatorButton as NavigatorButton,\n * __experimentalNavigatorBackButton as NavigatorBackButton,\n * } from '@wordpress/components';\n *\n * const MyNavigation = () => (\n * <NavigatorProvider initialPath=\"/\">\n * <NavigatorScreen path=\"/\">\n * <p>This is the home screen.</p>\n * <NavigatorButton path=\"/child\">\n * Navigate to child screen.\n * </NavigatorButton>\n * </NavigatorScreen>\n *\n * <NavigatorScreen path=\"/child\">\n * <p>This is the child screen.</p>\n * <NavigatorBackButton>\n * Go back\n * </NavigatorBackButton>\n * </NavigatorScreen>\n * </NavigatorProvider>\n * );\n * ```\n */\nexport const NavigatorBackButton = contextConnect(\n\tUnconnectedNavigatorBackButton,\n\t'NavigatorBackButton'\n);\n\nexport default NavigatorBackButton;\n"]}
@@ -1,2 +1,2 @@
1
- export { default } from './component';
1
+ export { default as NavigatorBackButton } from './component';
2
2
  //# sourceMappingURL=index.js.map
@@ -1 +1 @@
1
- {"version":3,"sources":["@wordpress/components/src/navigator/navigator-back-button/index.ts"],"names":["default"],"mappings":"AAAA,SAASA,OAAT,QAAwB,aAAxB","sourcesContent":["export { default } from './component';\n"]}
1
+ {"version":3,"sources":["@wordpress/components/src/navigator/navigator-back-button/index.ts"],"names":["default","NavigatorBackButton"],"mappings":"AAAA,SAASA,OAAO,IAAIC,mBAApB,QAA+C,aAA/C","sourcesContent":["export { default as NavigatorBackButton } from './component';\n"]}
@@ -12,7 +12,7 @@ import { contextConnect } from '../../ui/context';
12
12
  import { View } from '../../view';
13
13
  import { useNavigatorButton } from './hook';
14
14
 
15
- function NavigatorButton(props, forwardedRef) {
15
+ function UnconnectedNavigatorButton(props, forwardedRef) {
16
16
  const navigatorButtonProps = useNavigatorButton(props);
17
17
  return createElement(View, _extends({
18
18
  ref: forwardedRef
@@ -53,6 +53,6 @@ function NavigatorButton(props, forwardedRef) {
53
53
  */
54
54
 
55
55
 
56
- const ConnectedNavigatorButton = contextConnect(NavigatorButton, 'NavigatorButton');
57
- export default ConnectedNavigatorButton;
56
+ export const NavigatorButton = contextConnect(UnconnectedNavigatorButton, 'NavigatorButton');
57
+ export default NavigatorButton;
58
58
  //# sourceMappingURL=component.js.map
@@ -1 +1 @@
1
- {"version":3,"sources":["@wordpress/components/src/navigator/navigator-button/component.tsx"],"names":["contextConnect","View","useNavigatorButton","NavigatorButton","props","forwardedRef","navigatorButtonProps","ConnectedNavigatorButton"],"mappings":";;;AAAA;AACA;AACA;;AAGA;AACA;AACA;AACA,SAASA,cAAT,QAAwD,kBAAxD;AACA,SAASC,IAAT,QAAqB,YAArB;AACA,SAASC,kBAAT,QAAmC,QAAnC;;AAGA,SAASC,eAAT,CACCC,KADD,EAECC,YAFD,EAGE;AACD,QAAMC,oBAAoB,GAAGJ,kBAAkB,CAAEE,KAAF,CAA/C;AAEA,SAAO,cAAC,IAAD;AAAM,IAAA,GAAG,EAAGC;AAAZ,KAAgCC,oBAAhC,EAAP;AACA;AAED;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;;AACA,MAAMC,wBAAwB,GAAGP,cAAc,CAC9CG,eAD8C,EAE9C,iBAF8C,CAA/C;AAKA,eAAeI,wBAAf","sourcesContent":["/**\n * External dependencies\n */\nimport type { ForwardedRef } from 'react';\n\n/**\n * Internal dependencies\n */\nimport { contextConnect, WordPressComponentProps } from '../../ui/context';\nimport { View } from '../../view';\nimport { useNavigatorButton } from './hook';\nimport type { NavigatorButtonProps } from '../types';\n\nfunction NavigatorButton(\n\tprops: WordPressComponentProps< NavigatorButtonProps, 'button' >,\n\tforwardedRef: ForwardedRef< any >\n) {\n\tconst navigatorButtonProps = useNavigatorButton( props );\n\n\treturn <View ref={ forwardedRef } { ...navigatorButtonProps } />;\n}\n\n/**\n * The `NavigatorButton` component can be used to navigate to a screen and should\n * be used in combination with the `NavigatorProvider`, the `NavigatorScreen`\n * and the `NavigatorBackButton` components (or the `useNavigator` hook).\n *\n * @example\n * ```jsx\n * import {\n * __experimentalNavigatorProvider as NavigatorProvider,\n * __experimentalNavigatorScreen as NavigatorScreen,\n * __experimentalNavigatorButton as NavigatorButton,\n * __experimentalNavigatorBackButton as NavigatorBackButton,\n * } from '@wordpress/components';\n *\n * const MyNavigation = () => (\n * <NavigatorProvider initialPath=\"/\">\n * <NavigatorScreen path=\"/\">\n * <p>This is the home screen.</p>\n * <NavigatorButton path=\"/child\">\n * Navigate to child screen.\n * </NavigatorButton>\n * </NavigatorScreen>\n *\n * <NavigatorScreen path=\"/child\">\n * <p>This is the child screen.</p>\n * <NavigatorBackButton>\n * Go back\n * </NavigatorBackButton>\n * </NavigatorScreen>\n * </NavigatorProvider>\n * );\n * ```\n */\nconst ConnectedNavigatorButton = contextConnect(\n\tNavigatorButton,\n\t'NavigatorButton'\n);\n\nexport default ConnectedNavigatorButton;\n"]}
1
+ {"version":3,"sources":["@wordpress/components/src/navigator/navigator-button/component.tsx"],"names":["contextConnect","View","useNavigatorButton","UnconnectedNavigatorButton","props","forwardedRef","navigatorButtonProps","NavigatorButton"],"mappings":";;;AAAA;AACA;AACA;;AAGA;AACA;AACA;AACA,SAASA,cAAT,QAAwD,kBAAxD;AACA,SAASC,IAAT,QAAqB,YAArB;AACA,SAASC,kBAAT,QAAmC,QAAnC;;AAGA,SAASC,0BAAT,CACCC,KADD,EAECC,YAFD,EAGE;AACD,QAAMC,oBAAoB,GAAGJ,kBAAkB,CAAEE,KAAF,CAA/C;AAEA,SAAO,cAAC,IAAD;AAAM,IAAA,GAAG,EAAGC;AAAZ,KAAgCC,oBAAhC,EAAP;AACA;AAED;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;;AACA,OAAO,MAAMC,eAAe,GAAGP,cAAc,CAC5CG,0BAD4C,EAE5C,iBAF4C,CAAtC;AAKP,eAAeI,eAAf","sourcesContent":["/**\n * External dependencies\n */\nimport type { ForwardedRef } from 'react';\n\n/**\n * Internal dependencies\n */\nimport { contextConnect, WordPressComponentProps } from '../../ui/context';\nimport { View } from '../../view';\nimport { useNavigatorButton } from './hook';\nimport type { NavigatorButtonProps } from '../types';\n\nfunction UnconnectedNavigatorButton(\n\tprops: WordPressComponentProps< NavigatorButtonProps, 'button' >,\n\tforwardedRef: ForwardedRef< any >\n) {\n\tconst navigatorButtonProps = useNavigatorButton( props );\n\n\treturn <View ref={ forwardedRef } { ...navigatorButtonProps } />;\n}\n\n/**\n * The `NavigatorButton` component can be used to navigate to a screen and should\n * be used in combination with the `NavigatorProvider`, the `NavigatorScreen`\n * and the `NavigatorBackButton` components (or the `useNavigator` hook).\n *\n * @example\n * ```jsx\n * import {\n * __experimentalNavigatorProvider as NavigatorProvider,\n * __experimentalNavigatorScreen as NavigatorScreen,\n * __experimentalNavigatorButton as NavigatorButton,\n * __experimentalNavigatorBackButton as NavigatorBackButton,\n * } from '@wordpress/components';\n *\n * const MyNavigation = () => (\n * <NavigatorProvider initialPath=\"/\">\n * <NavigatorScreen path=\"/\">\n * <p>This is the home screen.</p>\n * <NavigatorButton path=\"/child\">\n * Navigate to child screen.\n * </NavigatorButton>\n * </NavigatorScreen>\n *\n * <NavigatorScreen path=\"/child\">\n * <p>This is the child screen.</p>\n * <NavigatorBackButton>\n * Go back\n * </NavigatorBackButton>\n * </NavigatorScreen>\n * </NavigatorProvider>\n * );\n * ```\n */\nexport const NavigatorButton = contextConnect(\n\tUnconnectedNavigatorButton,\n\t'NavigatorButton'\n);\n\nexport default NavigatorButton;\n"]}
@@ -1,2 +1,2 @@
1
- export { default } from './component';
1
+ export { default as NavigatorButton } from './component';
2
2
  //# sourceMappingURL=index.js.map
@@ -1 +1 @@
1
- {"version":3,"sources":["@wordpress/components/src/navigator/navigator-button/index.ts"],"names":["default"],"mappings":"AAAA,SAASA,OAAT,QAAwB,aAAxB","sourcesContent":["export { default } from './component';\n"]}
1
+ {"version":3,"sources":["@wordpress/components/src/navigator/navigator-button/index.ts"],"names":["default","NavigatorButton"],"mappings":"AAAA,SAASA,OAAO,IAAIC,eAApB,QAA2C,aAA3C","sourcesContent":["export { default as NavigatorButton } from './component';\n"]}
@@ -27,11 +27,11 @@ var _ref = process.env.NODE_ENV === "production" ? {
27
27
  } : {
28
28
  name: "192ebb7-classes",
29
29
  styles: "overflow-x:hidden;label:classes;",
30
- map: "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkB3b3JkcHJlc3MvY29tcG9uZW50cy9zcmMvbmF2aWdhdG9yL25hdmlnYXRvci1wcm92aWRlci9jb21wb25lbnQudHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQW9GWSIsImZpbGUiOiJAd29yZHByZXNzL2NvbXBvbmVudHMvc3JjL25hdmlnYXRvci9uYXZpZ2F0b3ItcHJvdmlkZXIvY29tcG9uZW50LnRzeCIsInNvdXJjZXNDb250ZW50IjpbIi8qKlxuICogRXh0ZXJuYWwgZGVwZW5kZW5jaWVzXG4gKi9cbmltcG9ydCB0eXBlIHsgRm9yd2FyZGVkUmVmIH0gZnJvbSAncmVhY3QnO1xuaW1wb3J0IHsgY3NzIH0gZnJvbSAnQGVtb3Rpb24vcmVhY3QnO1xuXG4vKipcbiAqIFdvcmRQcmVzcyBkZXBlbmRlbmNpZXNcbiAqL1xuaW1wb3J0IHsgdXNlTWVtbywgdXNlU3RhdGUsIHVzZUNhbGxiYWNrIH0gZnJvbSAnQHdvcmRwcmVzcy9lbGVtZW50JztcblxuLyoqXG4gKiBJbnRlcm5hbCBkZXBlbmRlbmNpZXNcbiAqL1xuaW1wb3J0IHtcblx0Y29udGV4dENvbm5lY3QsXG5cdHVzZUNvbnRleHRTeXN0ZW0sXG5cdFdvcmRQcmVzc0NvbXBvbmVudFByb3BzLFxufSBmcm9tICcuLi8uLi91aS9jb250ZXh0JztcbmltcG9ydCB7IHVzZUN4IH0gZnJvbSAnLi4vLi4vdXRpbHMvaG9va3MvdXNlLWN4JztcbmltcG9ydCB7IFZpZXcgfSBmcm9tICcuLi8uLi92aWV3JztcbmltcG9ydCB7IE5hdmlnYXRvckNvbnRleHQgfSBmcm9tICcuLi9jb250ZXh0JztcbmltcG9ydCB0eXBlIHtcblx0TmF2aWdhdG9yUHJvdmlkZXJQcm9wcyxcblx0TmF2aWdhdG9yTG9jYXRpb24sXG5cdE5hdmlnYXRvckNvbnRleHQgYXMgTmF2aWdhdG9yQ29udGV4dFR5cGUsXG59IGZyb20gJy4uL3R5cGVzJztcblxuZnVuY3Rpb24gTmF2aWdhdG9yUHJvdmlkZXIoXG5cdHByb3BzOiBXb3JkUHJlc3NDb21wb25lbnRQcm9wczwgTmF2aWdhdG9yUHJvdmlkZXJQcm9wcywgJ2RpdicgPixcblx0Zm9yd2FyZGVkUmVmOiBGb3J3YXJkZWRSZWY8IGFueSA+XG4pIHtcblx0Y29uc3QgeyBpbml0aWFsUGF0aCwgY2hpbGRyZW4sIGNsYXNzTmFtZSwgLi4ub3RoZXJQcm9wcyB9ID1cblx0XHR1c2VDb250ZXh0U3lzdGVtKCBwcm9wcywgJ05hdmlnYXRvclByb3ZpZGVyJyApO1xuXG5cdGNvbnN0IFsgbG9jYXRpb25IaXN0b3J5LCBzZXRMb2NhdGlvbkhpc3RvcnkgXSA9IHVzZVN0YXRlPFxuXHRcdE5hdmlnYXRvckxvY2F0aW9uW11cblx0PiggW1xuXHRcdHtcblx0XHRcdHBhdGg6IGluaXRpYWxQYXRoLFxuXHRcdH0sXG5cdF0gKTtcblxuXHRjb25zdCBnb1RvOiBOYXZpZ2F0b3JDb250ZXh0VHlwZVsgJ2dvVG8nIF0gPSB1c2VDYWxsYmFjayhcblx0XHQoIHBhdGgsIG9wdGlvbnMgPSB7fSApID0+IHtcblx0XHRcdHNldExvY2F0aW9uSGlzdG9yeSggW1xuXHRcdFx0XHQuLi5sb2NhdGlvbkhpc3RvcnksXG5cdFx0XHRcdHtcblx0XHRcdFx0XHQuLi5vcHRpb25zLFxuXHRcdFx0XHRcdHBhdGgsXG5cdFx0XHRcdFx0aXNCYWNrOiBmYWxzZSxcblx0XHRcdFx0fSxcblx0XHRcdF0gKTtcblx0XHR9LFxuXHRcdFsgbG9jYXRpb25IaXN0b3J5IF1cblx0KTtcblxuXHRjb25zdCBnb0JhY2s6IE5hdmlnYXRvckNvbnRleHRUeXBlWyAnZ29CYWNrJyBdID0gdXNlQ2FsbGJhY2soICgpID0+IHtcblx0XHRpZiAoIGxvY2F0aW9uSGlzdG9yeS5sZW5ndGggPiAxICkge1xuXHRcdFx0c2V0TG9jYXRpb25IaXN0b3J5KCBbXG5cdFx0XHRcdC4uLmxvY2F0aW9uSGlzdG9yeS5zbGljZSggMCwgLTIgKSxcblx0XHRcdFx0e1xuXHRcdFx0XHRcdC4uLmxvY2F0aW9uSGlzdG9yeVsgbG9jYXRpb25IaXN0b3J5Lmxlbmd0aCAtIDIgXSxcblx0XHRcdFx0XHRpc0JhY2s6IHRydWUsXG5cdFx0XHRcdH0sXG5cdFx0XHRdICk7XG5cdFx0fVxuXHR9LCBbIGxvY2F0aW9uSGlzdG9yeSBdICk7XG5cblx0Y29uc3QgbmF2aWdhdG9yQ29udGV4dFZhbHVlOiBOYXZpZ2F0b3JDb250ZXh0VHlwZSA9IHVzZU1lbW8oXG5cdFx0KCkgPT4gKCB7XG5cdFx0XHRsb2NhdGlvbjoge1xuXHRcdFx0XHQuLi5sb2NhdGlvbkhpc3RvcnlbIGxvY2F0aW9uSGlzdG9yeS5sZW5ndGggLSAxIF0sXG5cdFx0XHRcdGlzSW5pdGlhbDogbG9jYXRpb25IaXN0b3J5Lmxlbmd0aCA9PT0gMSxcblx0XHRcdH0sXG5cdFx0XHRnb1RvLFxuXHRcdFx0Z29CYWNrLFxuXHRcdH0gKSxcblx0XHRbIGxvY2F0aW9uSGlzdG9yeSwgZ29UbywgZ29CYWNrIF1cblx0KTtcblxuXHRjb25zdCBjeCA9IHVzZUN4KCk7XG5cdGNvbnN0IGNsYXNzZXMgPSB1c2VNZW1vKFxuXHRcdC8vIFByZXZlbnRzIGhvcml6b250YWwgb3ZlcmZsb3cgd2hpbGUgYW5pbWF0aW5nIHNjcmVlbiB0cmFuc2l0aW9ucy5cblx0XHQoKSA9PiBjeCggY3NzKCB7IG92ZXJmbG93WDogJ2hpZGRlbicgfSApLCBjbGFzc05hbWUgKSxcblx0XHRbIGNsYXNzTmFtZSwgY3ggXVxuXHQpO1xuXG5cdHJldHVybiAoXG5cdFx0PFZpZXcgcmVmPXsgZm9yd2FyZGVkUmVmIH0gY2xhc3NOYW1lPXsgY2xhc3NlcyB9IHsgLi4ub3RoZXJQcm9wcyB9PlxuXHRcdFx0PE5hdmlnYXRvckNvbnRleHQuUHJvdmlkZXIgdmFsdWU9eyBuYXZpZ2F0b3JDb250ZXh0VmFsdWUgfT5cblx0XHRcdFx0eyBjaGlsZHJlbiB9XG5cdFx0XHQ8L05hdmlnYXRvckNvbnRleHQuUHJvdmlkZXI+XG5cdFx0PC9WaWV3PlxuXHQpO1xufVxuXG4vKipcbiAqIFRoZSBgTmF2aWdhdG9yUHJvdmlkZXJgIGNvbXBvbmVudCBhbGxvd3MgcmVuZGVyaW5nIG5lc3RlZCB2aWV3cy9wYW5lbHMvbWVudXNcbiAqICh2aWEgdGhlIGBOYXZpZ2F0b3JTY3JlZW5gIGNvbXBvbmVudCBhbmQgbmF2aWdhdGUgYmV0d2VlbiB0aGVzZSBkaWZmZXJlbnRcbiAqIHZpZXcgKHZpYSB0aGUgYE5hdmlnYXRvckJ1dHRvbmAgYW5kIGBOYXZpZ2F0b3JCYWNrQnV0dG9uYCBjb21wb25lbnRzIG9yIHRoZVxuICogYHVzZU5hdmlnYXRvcmAgaG9vaykuXG4gKlxuICogQGV4YW1wbGVcbiAqIGBgYGpzeFxuICogaW1wb3J0IHtcbiAqICAgX19leHBlcmltZW50YWxOYXZpZ2F0b3JQcm92aWRlciBhcyBOYXZpZ2F0b3JQcm92aWRlcixcbiAqICAgX19leHBlcmltZW50YWxOYXZpZ2F0b3JTY3JlZW4gYXMgTmF2aWdhdG9yU2NyZWVuLFxuICogICBfX2V4cGVyaW1lbnRhbE5hdmlnYXRvckJ1dHRvbiBhcyBOYXZpZ2F0b3JCdXR0b24sXG4gKiAgIF9fZXhwZXJpbWVudGFsTmF2aWdhdG9yQmFja0J1dHRvbiBhcyBOYXZpZ2F0b3JCYWNrQnV0dG9uLFxuICogfSBmcm9tICdAd29yZHByZXNzL2NvbXBvbmVudHMnO1xuICpcbiAqIGNvbnN0IE15TmF2aWdhdGlvbiA9ICgpID0+IChcbiAqICAgPE5hdmlnYXRvclByb3ZpZGVyIGluaXRpYWxQYXRoPVwiL1wiPlxuICogICAgIDxOYXZpZ2F0b3JTY3JlZW4gcGF0aD1cIi9cIj5cbiAqICAgICAgIDxwPlRoaXMgaXMgdGhlIGhvbWUgc2NyZWVuLjwvcD5cbiAqICAgICAgICA8TmF2aWdhdG9yQnV0dG9uIHBhdGg9XCIvY2hpbGRcIj5cbiAqICAgICAgICAgIE5hdmlnYXRlIHRvIGNoaWxkIHNjcmVlbi5cbiAqICAgICAgIDwvTmF2aWdhdG9yQnV0dG9uPlxuICogICAgIDwvTmF2aWdhdG9yU2NyZWVuPlxuICpcbiAqICAgICA8TmF2aWdhdG9yU2NyZWVuIHBhdGg9XCIvY2hpbGRcIj5cbiAqICAgICAgIDxwPlRoaXMgaXMgdGhlIGNoaWxkIHNjcmVlbi48L3A+XG4gKiAgICAgICA8TmF2aWdhdG9yQmFja0J1dHRvbj5cbiAqICAgICAgICAgR28gYmFja1xuICogICAgICAgPC9OYXZpZ2F0b3JCYWNrQnV0dG9uPlxuICogICAgIDwvTmF2aWdhdG9yU2NyZWVuPlxuICogICA8L05hdmlnYXRvclByb3ZpZGVyPlxuICogKTtcbiAqIGBgYFxuICovXG5jb25zdCBDb25uZWN0ZWROYXZpZ2F0b3JQcm92aWRlciA9IGNvbnRleHRDb25uZWN0KFxuXHROYXZpZ2F0b3JQcm92aWRlcixcblx0J05hdmlnYXRvclByb3ZpZGVyJ1xuKTtcblxuZXhwb3J0IGRlZmF1bHQgQ29ubmVjdGVkTmF2aWdhdG9yUHJvdmlkZXI7XG4iXX0= */",
30
+ map: "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkB3b3JkcHJlc3MvY29tcG9uZW50cy9zcmMvbmF2aWdhdG9yL25hdmlnYXRvci1wcm92aWRlci9jb21wb25lbnQudHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQXNGWSIsImZpbGUiOiJAd29yZHByZXNzL2NvbXBvbmVudHMvc3JjL25hdmlnYXRvci9uYXZpZ2F0b3ItcHJvdmlkZXIvY29tcG9uZW50LnRzeCIsInNvdXJjZXNDb250ZW50IjpbIi8qKlxuICogRXh0ZXJuYWwgZGVwZW5kZW5jaWVzXG4gKi9cbmltcG9ydCB0eXBlIHsgRm9yd2FyZGVkUmVmIH0gZnJvbSAncmVhY3QnO1xuaW1wb3J0IHsgY3NzIH0gZnJvbSAnQGVtb3Rpb24vcmVhY3QnO1xuXG4vKipcbiAqIFdvcmRQcmVzcyBkZXBlbmRlbmNpZXNcbiAqL1xuaW1wb3J0IHsgdXNlTWVtbywgdXNlU3RhdGUsIHVzZUNhbGxiYWNrIH0gZnJvbSAnQHdvcmRwcmVzcy9lbGVtZW50JztcblxuLyoqXG4gKiBJbnRlcm5hbCBkZXBlbmRlbmNpZXNcbiAqL1xuaW1wb3J0IHtcblx0Y29udGV4dENvbm5lY3QsXG5cdHVzZUNvbnRleHRTeXN0ZW0sXG5cdFdvcmRQcmVzc0NvbXBvbmVudFByb3BzLFxufSBmcm9tICcuLi8uLi91aS9jb250ZXh0JztcbmltcG9ydCB7IHVzZUN4IH0gZnJvbSAnLi4vLi4vdXRpbHMvaG9va3MvdXNlLWN4JztcbmltcG9ydCB7IFZpZXcgfSBmcm9tICcuLi8uLi92aWV3JztcbmltcG9ydCB7IE5hdmlnYXRvckNvbnRleHQgfSBmcm9tICcuLi9jb250ZXh0JztcbmltcG9ydCB0eXBlIHtcblx0TmF2aWdhdG9yUHJvdmlkZXJQcm9wcyxcblx0TmF2aWdhdG9yTG9jYXRpb24sXG5cdE5hdmlnYXRvckNvbnRleHQgYXMgTmF2aWdhdG9yQ29udGV4dFR5cGUsXG59IGZyb20gJy4uL3R5cGVzJztcblxuZnVuY3Rpb24gVW5jb25uZWN0ZWROYXZpZ2F0b3JQcm92aWRlcihcblx0cHJvcHM6IFdvcmRQcmVzc0NvbXBvbmVudFByb3BzPCBOYXZpZ2F0b3JQcm92aWRlclByb3BzLCAnZGl2JyA+LFxuXHRmb3J3YXJkZWRSZWY6IEZvcndhcmRlZFJlZjwgYW55ID5cbikge1xuXHRjb25zdCB7IGluaXRpYWxQYXRoLCBjaGlsZHJlbiwgY2xhc3NOYW1lLCAuLi5vdGhlclByb3BzIH0gPVxuXHRcdHVzZUNvbnRleHRTeXN0ZW0oIHByb3BzLCAnTmF2aWdhdG9yUHJvdmlkZXInICk7XG5cblx0Y29uc3QgWyBsb2NhdGlvbkhpc3RvcnksIHNldExvY2F0aW9uSGlzdG9yeSBdID0gdXNlU3RhdGU8XG5cdFx0TmF2aWdhdG9yTG9jYXRpb25bXVxuXHQ+KCBbXG5cdFx0e1xuXHRcdFx0cGF0aDogaW5pdGlhbFBhdGgsXG5cdFx0fSxcblx0XSApO1xuXG5cdGNvbnN0IGdvVG86IE5hdmlnYXRvckNvbnRleHRUeXBlWyAnZ29UbycgXSA9IHVzZUNhbGxiYWNrKFxuXHRcdCggcGF0aCwgb3B0aW9ucyA9IHt9ICkgPT4ge1xuXHRcdFx0c2V0TG9jYXRpb25IaXN0b3J5KCBbXG5cdFx0XHRcdC4uLmxvY2F0aW9uSGlzdG9yeSxcblx0XHRcdFx0e1xuXHRcdFx0XHRcdC4uLm9wdGlvbnMsXG5cdFx0XHRcdFx0cGF0aCxcblx0XHRcdFx0XHRpc0JhY2s6IGZhbHNlLFxuXHRcdFx0XHRcdGhhc1Jlc3RvcmVkRm9jdXM6IGZhbHNlLFxuXHRcdFx0XHR9LFxuXHRcdFx0XSApO1xuXHRcdH0sXG5cdFx0WyBsb2NhdGlvbkhpc3RvcnkgXVxuXHQpO1xuXG5cdGNvbnN0IGdvQmFjazogTmF2aWdhdG9yQ29udGV4dFR5cGVbICdnb0JhY2snIF0gPSB1c2VDYWxsYmFjayggKCkgPT4ge1xuXHRcdGlmICggbG9jYXRpb25IaXN0b3J5Lmxlbmd0aCA+IDEgKSB7XG5cdFx0XHRzZXRMb2NhdGlvbkhpc3RvcnkoIFtcblx0XHRcdFx0Li4ubG9jYXRpb25IaXN0b3J5LnNsaWNlKCAwLCAtMiApLFxuXHRcdFx0XHR7XG5cdFx0XHRcdFx0Li4ubG9jYXRpb25IaXN0b3J5WyBsb2NhdGlvbkhpc3RvcnkubGVuZ3RoIC0gMiBdLFxuXHRcdFx0XHRcdGlzQmFjazogdHJ1ZSxcblx0XHRcdFx0XHRoYXNSZXN0b3JlZEZvY3VzOiBmYWxzZSxcblx0XHRcdFx0fSxcblx0XHRcdF0gKTtcblx0XHR9XG5cdH0sIFsgbG9jYXRpb25IaXN0b3J5IF0gKTtcblxuXHRjb25zdCBuYXZpZ2F0b3JDb250ZXh0VmFsdWU6IE5hdmlnYXRvckNvbnRleHRUeXBlID0gdXNlTWVtbyhcblx0XHQoKSA9PiAoIHtcblx0XHRcdGxvY2F0aW9uOiB7XG5cdFx0XHRcdC4uLmxvY2F0aW9uSGlzdG9yeVsgbG9jYXRpb25IaXN0b3J5Lmxlbmd0aCAtIDEgXSxcblx0XHRcdFx0aXNJbml0aWFsOiBsb2NhdGlvbkhpc3RvcnkubGVuZ3RoID09PSAxLFxuXHRcdFx0fSxcblx0XHRcdGdvVG8sXG5cdFx0XHRnb0JhY2ssXG5cdFx0fSApLFxuXHRcdFsgbG9jYXRpb25IaXN0b3J5LCBnb1RvLCBnb0JhY2sgXVxuXHQpO1xuXG5cdGNvbnN0IGN4ID0gdXNlQ3goKTtcblx0Y29uc3QgY2xhc3NlcyA9IHVzZU1lbW8oXG5cdFx0Ly8gUHJldmVudHMgaG9yaXpvbnRhbCBvdmVyZmxvdyB3aGlsZSBhbmltYXRpbmcgc2NyZWVuIHRyYW5zaXRpb25zLlxuXHRcdCgpID0+IGN4KCBjc3MoIHsgb3ZlcmZsb3dYOiAnaGlkZGVuJyB9ICksIGNsYXNzTmFtZSApLFxuXHRcdFsgY2xhc3NOYW1lLCBjeCBdXG5cdCk7XG5cblx0cmV0dXJuIChcblx0XHQ8VmlldyByZWY9eyBmb3J3YXJkZWRSZWYgfSBjbGFzc05hbWU9eyBjbGFzc2VzIH0geyAuLi5vdGhlclByb3BzIH0+XG5cdFx0XHQ8TmF2aWdhdG9yQ29udGV4dC5Qcm92aWRlciB2YWx1ZT17IG5hdmlnYXRvckNvbnRleHRWYWx1ZSB9PlxuXHRcdFx0XHR7IGNoaWxkcmVuIH1cblx0XHRcdDwvTmF2aWdhdG9yQ29udGV4dC5Qcm92aWRlcj5cblx0XHQ8L1ZpZXc+XG5cdCk7XG59XG5cbi8qKlxuICogVGhlIGBOYXZpZ2F0b3JQcm92aWRlcmAgY29tcG9uZW50IGFsbG93cyByZW5kZXJpbmcgbmVzdGVkIHZpZXdzL3BhbmVscy9tZW51c1xuICogKHZpYSB0aGUgYE5hdmlnYXRvclNjcmVlbmAgY29tcG9uZW50IGFuZCBuYXZpZ2F0ZSBiZXR3ZWVuIHRoZXNlIGRpZmZlcmVudFxuICogdmlldyAodmlhIHRoZSBgTmF2aWdhdG9yQnV0dG9uYCBhbmQgYE5hdmlnYXRvckJhY2tCdXR0b25gIGNvbXBvbmVudHMgb3IgdGhlXG4gKiBgdXNlTmF2aWdhdG9yYCBob29rKS5cbiAqXG4gKiBAZXhhbXBsZVxuICogYGBganN4XG4gKiBpbXBvcnQge1xuICogICBfX2V4cGVyaW1lbnRhbE5hdmlnYXRvclByb3ZpZGVyIGFzIE5hdmlnYXRvclByb3ZpZGVyLFxuICogICBfX2V4cGVyaW1lbnRhbE5hdmlnYXRvclNjcmVlbiBhcyBOYXZpZ2F0b3JTY3JlZW4sXG4gKiAgIF9fZXhwZXJpbWVudGFsTmF2aWdhdG9yQnV0dG9uIGFzIE5hdmlnYXRvckJ1dHRvbixcbiAqICAgX19leHBlcmltZW50YWxOYXZpZ2F0b3JCYWNrQnV0dG9uIGFzIE5hdmlnYXRvckJhY2tCdXR0b24sXG4gKiB9IGZyb20gJ0B3b3JkcHJlc3MvY29tcG9uZW50cyc7XG4gKlxuICogY29uc3QgTXlOYXZpZ2F0aW9uID0gKCkgPT4gKFxuICogICA8TmF2aWdhdG9yUHJvdmlkZXIgaW5pdGlhbFBhdGg9XCIvXCI+XG4gKiAgICAgPE5hdmlnYXRvclNjcmVlbiBwYXRoPVwiL1wiPlxuICogICAgICAgPHA+VGhpcyBpcyB0aGUgaG9tZSBzY3JlZW4uPC9wPlxuICogICAgICAgIDxOYXZpZ2F0b3JCdXR0b24gcGF0aD1cIi9jaGlsZFwiPlxuICogICAgICAgICAgTmF2aWdhdGUgdG8gY2hpbGQgc2NyZWVuLlxuICogICAgICAgPC9OYXZpZ2F0b3JCdXR0b24+XG4gKiAgICAgPC9OYXZpZ2F0b3JTY3JlZW4+XG4gKlxuICogICAgIDxOYXZpZ2F0b3JTY3JlZW4gcGF0aD1cIi9jaGlsZFwiPlxuICogICAgICAgPHA+VGhpcyBpcyB0aGUgY2hpbGQgc2NyZWVuLjwvcD5cbiAqICAgICAgIDxOYXZpZ2F0b3JCYWNrQnV0dG9uPlxuICogICAgICAgICBHbyBiYWNrXG4gKiAgICAgICA8L05hdmlnYXRvckJhY2tCdXR0b24+XG4gKiAgICAgPC9OYXZpZ2F0b3JTY3JlZW4+XG4gKiAgIDwvTmF2aWdhdG9yUHJvdmlkZXI+XG4gKiApO1xuICogYGBgXG4gKi9cbmV4cG9ydCBjb25zdCBOYXZpZ2F0b3JQcm92aWRlciA9IGNvbnRleHRDb25uZWN0KFxuXHRVbmNvbm5lY3RlZE5hdmlnYXRvclByb3ZpZGVyLFxuXHQnTmF2aWdhdG9yUHJvdmlkZXInXG4pO1xuXG5leHBvcnQgZGVmYXVsdCBOYXZpZ2F0b3JQcm92aWRlcjtcbiJdfQ== */",
31
31
  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
32
32
  };
33
33
 
34
- function NavigatorProvider(props, forwardedRef) {
34
+ function UnconnectedNavigatorProvider(props, forwardedRef) {
35
35
  const {
36
36
  initialPath,
37
37
  children,
@@ -45,13 +45,15 @@ function NavigatorProvider(props, forwardedRef) {
45
45
  let options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
46
46
  setLocationHistory([...locationHistory, { ...options,
47
47
  path,
48
- isBack: false
48
+ isBack: false,
49
+ hasRestoredFocus: false
49
50
  }]);
50
51
  }, [locationHistory]);
51
52
  const goBack = useCallback(() => {
52
53
  if (locationHistory.length > 1) {
53
54
  setLocationHistory([...locationHistory.slice(0, -2), { ...locationHistory[locationHistory.length - 2],
54
- isBack: true
55
+ isBack: true,
56
+ hasRestoredFocus: false
55
57
  }]);
56
58
  }
57
59
  }, [locationHistory]);
@@ -108,6 +110,6 @@ function NavigatorProvider(props, forwardedRef) {
108
110
  */
109
111
 
110
112
 
111
- const ConnectedNavigatorProvider = contextConnect(NavigatorProvider, 'NavigatorProvider');
112
- export default ConnectedNavigatorProvider;
113
+ export const NavigatorProvider = contextConnect(UnconnectedNavigatorProvider, 'NavigatorProvider');
114
+ export default NavigatorProvider;
113
115
  //# sourceMappingURL=component.js.map
@@ -1 +1 @@
1
- {"version":3,"sources":["@wordpress/components/src/navigator/navigator-provider/component.tsx"],"names":["css","useMemo","useState","useCallback","contextConnect","useContextSystem","useCx","View","NavigatorContext","NavigatorProvider","props","forwardedRef","initialPath","children","className","otherProps","locationHistory","setLocationHistory","path","goTo","options","isBack","goBack","length","slice","navigatorContextValue","location","isInitial","cx","classes","ConnectedNavigatorProvider"],"mappings":";;;;;AAAA;AACA;AACA;AAEA,SAASA,GAAT,QAAoB,gBAApB;AAEA;AACA;AACA;;AACA,SAASC,OAAT,EAAkBC,QAAlB,EAA4BC,WAA5B,QAA+C,oBAA/C;AAEA;AACA;AACA;;AACA,SACCC,cADD,EAECC,gBAFD,QAIO,kBAJP;AAKA,SAASC,KAAT,QAAsB,0BAAtB;AACA,SAASC,IAAT,QAAqB,YAArB;AACA,SAASC,gBAAT,QAAiC,YAAjC;;;;;;;;;;;;AAOA,SAASC,iBAAT,CACCC,KADD,EAECC,YAFD,EAGE;AACD,QAAM;AAAEC,IAAAA,WAAF;AAAeC,IAAAA,QAAf;AAAyBC,IAAAA,SAAzB;AAAoC,OAAGC;AAAvC,MACLV,gBAAgB,CAAEK,KAAF,EAAS,mBAAT,CADjB;AAGA,QAAM,CAAEM,eAAF,EAAmBC,kBAAnB,IAA0Cf,QAAQ,CAErD,CACF;AACCgB,IAAAA,IAAI,EAAEN;AADP,GADE,CAFqD,CAAxD;AAQA,QAAMO,IAAoC,GAAGhB,WAAW,CACvD,UAAEe,IAAF,EAA0B;AAAA,QAAlBE,OAAkB,uEAAR,EAAQ;AACzBH,IAAAA,kBAAkB,CAAE,CACnB,GAAGD,eADgB,EAEnB,EACC,GAAGI,OADJ;AAECF,MAAAA,IAFD;AAGCG,MAAAA,MAAM,EAAE;AAHT,KAFmB,CAAF,CAAlB;AAQA,GAVsD,EAWvD,CAAEL,eAAF,CAXuD,CAAxD;AAcA,QAAMM,MAAwC,GAAGnB,WAAW,CAAE,MAAM;AACnE,QAAKa,eAAe,CAACO,MAAhB,GAAyB,CAA9B,EAAkC;AACjCN,MAAAA,kBAAkB,CAAE,CACnB,GAAGD,eAAe,CAACQ,KAAhB,CAAuB,CAAvB,EAA0B,CAAC,CAA3B,CADgB,EAEnB,EACC,GAAGR,eAAe,CAAEA,eAAe,CAACO,MAAhB,GAAyB,CAA3B,CADnB;AAECF,QAAAA,MAAM,EAAE;AAFT,OAFmB,CAAF,CAAlB;AAOA;AACD,GAV2D,EAUzD,CAAEL,eAAF,CAVyD,CAA5D;AAYA,QAAMS,qBAA2C,GAAGxB,OAAO,CAC1D,OAAQ;AACPyB,IAAAA,QAAQ,EAAE,EACT,GAAGV,eAAe,CAAEA,eAAe,CAACO,MAAhB,GAAyB,CAA3B,CADT;AAETI,MAAAA,SAAS,EAAEX,eAAe,CAACO,MAAhB,KAA2B;AAF7B,KADH;AAKPJ,IAAAA,IALO;AAMPG,IAAAA;AANO,GAAR,CAD0D,EAS1D,CAAEN,eAAF,EAAmBG,IAAnB,EAAyBG,MAAzB,CAT0D,CAA3D;AAYA,QAAMM,EAAE,GAAGtB,KAAK,EAAhB;AACA,QAAMuB,OAAO,GAAG5B,OAAO,EACtB;AACA,QAAM2B,EAAE,OAAkCd,SAAlC,CAFc,EAGtB,CAAEA,SAAF,EAAac,EAAb,CAHsB,CAAvB;AAMA,SACC,cAAC,IAAD;AAAM,IAAA,GAAG,EAAGjB,YAAZ;AAA2B,IAAA,SAAS,EAAGkB;AAAvC,KAAsDd,UAAtD,GACC,cAAC,gBAAD,CAAkB,QAAlB;AAA2B,IAAA,KAAK,EAAGU;AAAnC,KACGZ,QADH,CADD,CADD;AAOA;AAED;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;;AACA,MAAMiB,0BAA0B,GAAG1B,cAAc,CAChDK,iBADgD,EAEhD,mBAFgD,CAAjD;AAKA,eAAeqB,0BAAf","sourcesContent":["/**\n * External dependencies\n */\nimport type { ForwardedRef } from 'react';\nimport { css } from '@emotion/react';\n\n/**\n * WordPress dependencies\n */\nimport { useMemo, useState, useCallback } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport {\n\tcontextConnect,\n\tuseContextSystem,\n\tWordPressComponentProps,\n} from '../../ui/context';\nimport { useCx } from '../../utils/hooks/use-cx';\nimport { View } from '../../view';\nimport { NavigatorContext } from '../context';\nimport type {\n\tNavigatorProviderProps,\n\tNavigatorLocation,\n\tNavigatorContext as NavigatorContextType,\n} from '../types';\n\nfunction NavigatorProvider(\n\tprops: WordPressComponentProps< NavigatorProviderProps, 'div' >,\n\tforwardedRef: ForwardedRef< any >\n) {\n\tconst { initialPath, children, className, ...otherProps } =\n\t\tuseContextSystem( props, 'NavigatorProvider' );\n\n\tconst [ locationHistory, setLocationHistory ] = useState<\n\t\tNavigatorLocation[]\n\t>( [\n\t\t{\n\t\t\tpath: initialPath,\n\t\t},\n\t] );\n\n\tconst goTo: NavigatorContextType[ 'goTo' ] = useCallback(\n\t\t( path, options = {} ) => {\n\t\t\tsetLocationHistory( [\n\t\t\t\t...locationHistory,\n\t\t\t\t{\n\t\t\t\t\t...options,\n\t\t\t\t\tpath,\n\t\t\t\t\tisBack: false,\n\t\t\t\t},\n\t\t\t] );\n\t\t},\n\t\t[ locationHistory ]\n\t);\n\n\tconst goBack: NavigatorContextType[ 'goBack' ] = useCallback( () => {\n\t\tif ( locationHistory.length > 1 ) {\n\t\t\tsetLocationHistory( [\n\t\t\t\t...locationHistory.slice( 0, -2 ),\n\t\t\t\t{\n\t\t\t\t\t...locationHistory[ locationHistory.length - 2 ],\n\t\t\t\t\tisBack: true,\n\t\t\t\t},\n\t\t\t] );\n\t\t}\n\t}, [ locationHistory ] );\n\n\tconst navigatorContextValue: NavigatorContextType = useMemo(\n\t\t() => ( {\n\t\t\tlocation: {\n\t\t\t\t...locationHistory[ locationHistory.length - 1 ],\n\t\t\t\tisInitial: locationHistory.length === 1,\n\t\t\t},\n\t\t\tgoTo,\n\t\t\tgoBack,\n\t\t} ),\n\t\t[ locationHistory, goTo, goBack ]\n\t);\n\n\tconst cx = useCx();\n\tconst classes = useMemo(\n\t\t// Prevents horizontal overflow while animating screen transitions.\n\t\t() => cx( css( { overflowX: 'hidden' } ), className ),\n\t\t[ className, cx ]\n\t);\n\n\treturn (\n\t\t<View ref={ forwardedRef } className={ classes } { ...otherProps }>\n\t\t\t<NavigatorContext.Provider value={ navigatorContextValue }>\n\t\t\t\t{ children }\n\t\t\t</NavigatorContext.Provider>\n\t\t</View>\n\t);\n}\n\n/**\n * The `NavigatorProvider` component allows rendering nested views/panels/menus\n * (via the `NavigatorScreen` component and navigate between these different\n * view (via the `NavigatorButton` and `NavigatorBackButton` components or the\n * `useNavigator` hook).\n *\n * @example\n * ```jsx\n * import {\n * __experimentalNavigatorProvider as NavigatorProvider,\n * __experimentalNavigatorScreen as NavigatorScreen,\n * __experimentalNavigatorButton as NavigatorButton,\n * __experimentalNavigatorBackButton as NavigatorBackButton,\n * } from '@wordpress/components';\n *\n * const MyNavigation = () => (\n * <NavigatorProvider initialPath=\"/\">\n * <NavigatorScreen path=\"/\">\n * <p>This is the home screen.</p>\n * <NavigatorButton path=\"/child\">\n * Navigate to child screen.\n * </NavigatorButton>\n * </NavigatorScreen>\n *\n * <NavigatorScreen path=\"/child\">\n * <p>This is the child screen.</p>\n * <NavigatorBackButton>\n * Go back\n * </NavigatorBackButton>\n * </NavigatorScreen>\n * </NavigatorProvider>\n * );\n * ```\n */\nconst ConnectedNavigatorProvider = contextConnect(\n\tNavigatorProvider,\n\t'NavigatorProvider'\n);\n\nexport default ConnectedNavigatorProvider;\n"]}
1
+ {"version":3,"sources":["@wordpress/components/src/navigator/navigator-provider/component.tsx"],"names":["css","useMemo","useState","useCallback","contextConnect","useContextSystem","useCx","View","NavigatorContext","UnconnectedNavigatorProvider","props","forwardedRef","initialPath","children","className","otherProps","locationHistory","setLocationHistory","path","goTo","options","isBack","hasRestoredFocus","goBack","length","slice","navigatorContextValue","location","isInitial","cx","classes","NavigatorProvider"],"mappings":"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","sourcesContent":["/**\n * External dependencies\n */\nimport type { ForwardedRef } from 'react';\nimport { css } from '@emotion/react';\n\n/**\n * WordPress dependencies\n */\nimport { useMemo, useState, useCallback } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport {\n\tcontextConnect,\n\tuseContextSystem,\n\tWordPressComponentProps,\n} from '../../ui/context';\nimport { useCx } from '../../utils/hooks/use-cx';\nimport { View } from '../../view';\nimport { NavigatorContext } from '../context';\nimport type {\n\tNavigatorProviderProps,\n\tNavigatorLocation,\n\tNavigatorContext as NavigatorContextType,\n} from '../types';\n\nfunction UnconnectedNavigatorProvider(\n\tprops: WordPressComponentProps< NavigatorProviderProps, 'div' >,\n\tforwardedRef: ForwardedRef< any >\n) {\n\tconst { initialPath, children, className, ...otherProps } =\n\t\tuseContextSystem( props, 'NavigatorProvider' );\n\n\tconst [ locationHistory, setLocationHistory ] = useState<\n\t\tNavigatorLocation[]\n\t>( [\n\t\t{\n\t\t\tpath: initialPath,\n\t\t},\n\t] );\n\n\tconst goTo: NavigatorContextType[ 'goTo' ] = useCallback(\n\t\t( path, options = {} ) => {\n\t\t\tsetLocationHistory( [\n\t\t\t\t...locationHistory,\n\t\t\t\t{\n\t\t\t\t\t...options,\n\t\t\t\t\tpath,\n\t\t\t\t\tisBack: false,\n\t\t\t\t\thasRestoredFocus: false,\n\t\t\t\t},\n\t\t\t] );\n\t\t},\n\t\t[ locationHistory ]\n\t);\n\n\tconst goBack: NavigatorContextType[ 'goBack' ] = useCallback( () => {\n\t\tif ( locationHistory.length > 1 ) {\n\t\t\tsetLocationHistory( [\n\t\t\t\t...locationHistory.slice( 0, -2 ),\n\t\t\t\t{\n\t\t\t\t\t...locationHistory[ locationHistory.length - 2 ],\n\t\t\t\t\tisBack: true,\n\t\t\t\t\thasRestoredFocus: false,\n\t\t\t\t},\n\t\t\t] );\n\t\t}\n\t}, [ locationHistory ] );\n\n\tconst navigatorContextValue: NavigatorContextType = useMemo(\n\t\t() => ( {\n\t\t\tlocation: {\n\t\t\t\t...locationHistory[ locationHistory.length - 1 ],\n\t\t\t\tisInitial: locationHistory.length === 1,\n\t\t\t},\n\t\t\tgoTo,\n\t\t\tgoBack,\n\t\t} ),\n\t\t[ locationHistory, goTo, goBack ]\n\t);\n\n\tconst cx = useCx();\n\tconst classes = useMemo(\n\t\t// Prevents horizontal overflow while animating screen transitions.\n\t\t() => cx( css( { overflowX: 'hidden' } ), className ),\n\t\t[ className, cx ]\n\t);\n\n\treturn (\n\t\t<View ref={ forwardedRef } className={ classes } { ...otherProps }>\n\t\t\t<NavigatorContext.Provider value={ navigatorContextValue }>\n\t\t\t\t{ children }\n\t\t\t</NavigatorContext.Provider>\n\t\t</View>\n\t);\n}\n\n/**\n * The `NavigatorProvider` component allows rendering nested views/panels/menus\n * (via the `NavigatorScreen` component and navigate between these different\n * view (via the `NavigatorButton` and `NavigatorBackButton` components or the\n * `useNavigator` hook).\n *\n * @example\n * ```jsx\n * import {\n * __experimentalNavigatorProvider as NavigatorProvider,\n * __experimentalNavigatorScreen as NavigatorScreen,\n * __experimentalNavigatorButton as NavigatorButton,\n * __experimentalNavigatorBackButton as NavigatorBackButton,\n * } from '@wordpress/components';\n *\n * const MyNavigation = () => (\n * <NavigatorProvider initialPath=\"/\">\n * <NavigatorScreen path=\"/\">\n * <p>This is the home screen.</p>\n * <NavigatorButton path=\"/child\">\n * Navigate to child screen.\n * </NavigatorButton>\n * </NavigatorScreen>\n *\n * <NavigatorScreen path=\"/child\">\n * <p>This is the child screen.</p>\n * <NavigatorBackButton>\n * Go back\n * </NavigatorBackButton>\n * </NavigatorScreen>\n * </NavigatorProvider>\n * );\n * ```\n */\nexport const NavigatorProvider = contextConnect(\n\tUnconnectedNavigatorProvider,\n\t'NavigatorProvider'\n);\n\nexport default NavigatorProvider;\n"]}
@@ -1,2 +1,2 @@
1
- export { default } from './component';
1
+ export { default as NavigatorProvider } from './component';
2
2
  //# sourceMappingURL=index.js.map
@@ -1 +1 @@
1
- {"version":3,"sources":["@wordpress/components/src/navigator/navigator-provider/index.ts"],"names":["default"],"mappings":"AAAA,SAASA,OAAT,QAAwB,aAAxB","sourcesContent":["export { default } from './component';\n"]}
1
+ {"version":3,"sources":["@wordpress/components/src/navigator/navigator-provider/index.ts"],"names":["default","NavigatorProvider"],"mappings":"AAAA,SAASA,OAAO,IAAIC,iBAApB,QAA6C,aAA7C","sourcesContent":["export { default as NavigatorProvider } from './component';\n"]}
@@ -1,20 +1,17 @@
1
1
  import _extends from "@babel/runtime/helpers/esm/extends";
2
2
  import { createElement } from "@wordpress/element";
3
3
 
4
- function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; }
5
-
6
4
  /**
7
5
  * External dependencies
8
6
  */
9
7
  // eslint-disable-next-line no-restricted-imports
10
8
  import { motion } from 'framer-motion';
11
- import { css } from '@emotion/react';
12
9
  /**
13
10
  * WordPress dependencies
14
11
  */
15
12
 
16
13
  import { focus } from '@wordpress/dom';
17
- import { useContext, useEffect, useMemo, useRef } from '@wordpress/element';
14
+ import { useContext, useEffect, useRef } from '@wordpress/element';
18
15
  import { useReducedMotion, useMergeRefs, usePrevious } from '@wordpress/compose';
19
16
  import { isRTL } from '@wordpress/i18n';
20
17
  import { escapeAttribute } from '@wordpress/escape-html';
@@ -23,7 +20,6 @@ import { escapeAttribute } from '@wordpress/escape-html';
23
20
  */
24
21
 
25
22
  import { contextConnect, useContextSystem } from '../../ui/context';
26
- import { useCx } from '../../utils/hooks/use-cx';
27
23
  import { View } from '../../view';
28
24
  import { NavigatorContext } from '../context';
29
25
  const animationEnterDelay = 0;
@@ -32,17 +28,7 @@ const animationExitDuration = 0.14;
32
28
  const animationExitDelay = 0; // Props specific to `framer-motion` can't be currently passed to `NavigatorScreen`,
33
29
  // as some of them would overlap with HTML props (e.g. `onAnimationStart`, ...)
34
30
 
35
- var _ref = process.env.NODE_ENV === "production" ? {
36
- name: "14x3t6z",
37
- styles: "overflow-x:auto;max-height:100%"
38
- } : {
39
- name: "1ulogbc-classes",
40
- styles: "overflow-x:auto;max-height:100%;label:classes;",
41
- map: "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkB3b3JkcHJlc3MvY29tcG9uZW50cy9zcmMvbmF2aWdhdG9yL25hdmlnYXRvci1zY3JlZW4vY29tcG9uZW50LnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUErREkiLCJmaWxlIjoiQHdvcmRwcmVzcy9jb21wb25lbnRzL3NyYy9uYXZpZ2F0b3IvbmF2aWdhdG9yLXNjcmVlbi9jb21wb25lbnQudHN4Iiwic291cmNlc0NvbnRlbnQiOlsiLyoqXG4gKiBFeHRlcm5hbCBkZXBlbmRlbmNpZXNcbiAqL1xuaW1wb3J0IHR5cGUgeyBGb3J3YXJkZWRSZWYgfSBmcm9tICdyZWFjdCc7XG4vLyBlc2xpbnQtZGlzYWJsZS1uZXh0LWxpbmUgbm8tcmVzdHJpY3RlZC1pbXBvcnRzXG5pbXBvcnQgeyBtb3Rpb24sIE1vdGlvblByb3BzIH0gZnJvbSAnZnJhbWVyLW1vdGlvbic7XG5pbXBvcnQgeyBjc3MgfSBmcm9tICdAZW1vdGlvbi9yZWFjdCc7XG5cbi8qKlxuICogV29yZFByZXNzIGRlcGVuZGVuY2llc1xuICovXG5pbXBvcnQgeyBmb2N1cyB9IGZyb20gJ0B3b3JkcHJlc3MvZG9tJztcbmltcG9ydCB7IHVzZUNvbnRleHQsIHVzZUVmZmVjdCwgdXNlTWVtbywgdXNlUmVmIH0gZnJvbSAnQHdvcmRwcmVzcy9lbGVtZW50JztcbmltcG9ydCB7XG5cdHVzZVJlZHVjZWRNb3Rpb24sXG5cdHVzZU1lcmdlUmVmcyxcblx0dXNlUHJldmlvdXMsXG59IGZyb20gJ0B3b3JkcHJlc3MvY29tcG9zZSc7XG5pbXBvcnQgeyBpc1JUTCB9IGZyb20gJ0B3b3JkcHJlc3MvaTE4bic7XG5pbXBvcnQgeyBlc2NhcGVBdHRyaWJ1dGUgfSBmcm9tICdAd29yZHByZXNzL2VzY2FwZS1odG1sJztcblxuLyoqXG4gKiBJbnRlcm5hbCBkZXBlbmRlbmNpZXNcbiAqL1xuaW1wb3J0IHtcblx0Y29udGV4dENvbm5lY3QsXG5cdHVzZUNvbnRleHRTeXN0ZW0sXG5cdFdvcmRQcmVzc0NvbXBvbmVudFByb3BzLFxufSBmcm9tICcuLi8uLi91aS9jb250ZXh0JztcbmltcG9ydCB7IHVzZUN4IH0gZnJvbSAnLi4vLi4vdXRpbHMvaG9va3MvdXNlLWN4JztcbmltcG9ydCB7IFZpZXcgfSBmcm9tICcuLi8uLi92aWV3JztcbmltcG9ydCB7IE5hdmlnYXRvckNvbnRleHQgfSBmcm9tICcuLi9jb250ZXh0JztcbmltcG9ydCB0eXBlIHsgTmF2aWdhdG9yU2NyZWVuUHJvcHMgfSBmcm9tICcuLi90eXBlcyc7XG5cbmNvbnN0IGFuaW1hdGlvbkVudGVyRGVsYXkgPSAwO1xuY29uc3QgYW5pbWF0aW9uRW50ZXJEdXJhdGlvbiA9IDAuMTQ7XG5jb25zdCBhbmltYXRpb25FeGl0RHVyYXRpb24gPSAwLjE0O1xuY29uc3QgYW5pbWF0aW9uRXhpdERlbGF5ID0gMDtcblxuLy8gUHJvcHMgc3BlY2lmaWMgdG8gYGZyYW1lci1tb3Rpb25gIGNhbid0IGJlIGN1cnJlbnRseSBwYXNzZWQgdG8gYE5hdmlnYXRvclNjcmVlbmAsXG4vLyBhcyBzb21lIG9mIHRoZW0gd291bGQgb3ZlcmxhcCB3aXRoIEhUTUwgcHJvcHMgKGUuZy4gYG9uQW5pbWF0aW9uU3RhcnRgLCAuLi4pXG50eXBlIFByb3BzID0gT21pdDxcblx0V29yZFByZXNzQ29tcG9uZW50UHJvcHM8IE5hdmlnYXRvclNjcmVlblByb3BzLCAnZGl2JywgZmFsc2UgPixcblx0a2V5b2YgTW90aW9uUHJvcHNcbj47XG5cbmZ1bmN0aW9uIE5hdmlnYXRvclNjcmVlbiggcHJvcHM6IFByb3BzLCBmb3J3YXJkZWRSZWY6IEZvcndhcmRlZFJlZjwgYW55ID4gKSB7XG5cdGNvbnN0IHsgY2hpbGRyZW4sIGNsYXNzTmFtZSwgcGF0aCwgLi4ub3RoZXJQcm9wcyB9ID0gdXNlQ29udGV4dFN5c3RlbShcblx0XHRwcm9wcyxcblx0XHQnTmF2aWdhdG9yU2NyZWVuJ1xuXHQpO1xuXG5cdGNvbnN0IHByZWZlcnNSZWR1Y2VkTW90aW9uID0gdXNlUmVkdWNlZE1vdGlvbigpO1xuXHRjb25zdCB7IGxvY2F0aW9uIH0gPSB1c2VDb250ZXh0KCBOYXZpZ2F0b3JDb250ZXh0ICk7XG5cdGNvbnN0IGlzTWF0Y2ggPSBsb2NhdGlvbi5wYXRoID09PSBlc2NhcGVBdHRyaWJ1dGUoIHBhdGggKTtcblx0Y29uc3Qgd3JhcHBlclJlZiA9IHVzZVJlZjwgSFRNTERpdkVsZW1lbnQgPiggbnVsbCApO1xuXG5cdGNvbnN0IHByZXZpb3VzTG9jYXRpb24gPSB1c2VQcmV2aW91cyggbG9jYXRpb24gKTtcblxuXHRjb25zdCBjeCA9IHVzZUN4KCk7XG5cdGNvbnN0IGNsYXNzZXMgPSB1c2VNZW1vKFxuXHRcdCgpID0+XG5cdFx0XHRjeChcblx0XHRcdFx0Y3NzKCB7XG5cdFx0XHRcdFx0Ly8gRW5zdXJlcyBob3Jpem9udGFsIG92ZXJmbG93IGlzIHZpc3VhbGx5IGFjY2Vzc2libGUuXG5cdFx0XHRcdFx0b3ZlcmZsb3dYOiAnYXV0bycsXG5cdFx0XHRcdFx0Ly8gSW4gY2FzZSB0aGUgcm9vdCBoYXMgYSBoZWlnaHQsIGl0IHNob3VsZCBub3QgYmUgZXhjZWVkZWQuXG5cdFx0XHRcdFx0bWF4SGVpZ2h0OiAnMTAwJScsXG5cdFx0XHRcdH0gKSxcblx0XHRcdFx0Y2xhc3NOYW1lXG5cdFx0XHQpLFxuXHRcdFsgY2xhc3NOYW1lLCBjeCBdXG5cdCk7XG5cblx0Ly8gRm9jdXMgcmVzdG9yYXRpb25cblx0Y29uc3QgaXNJbml0aWFsTG9jYXRpb24gPSBsb2NhdGlvbi5pc0luaXRpYWwgJiYgISBsb2NhdGlvbi5pc0JhY2s7XG5cdHVzZUVmZmVjdCggKCkgPT4ge1xuXHRcdC8vIE9ubHkgYXR0ZW1wdCB0byByZXN0b3JlIGZvY3VzOlxuXHRcdC8vIC0gaWYgdGhlIGN1cnJlbnQgbG9jYXRpb24gaXMgbm90IHRoZSBpbml0aWFsIG9uZSAodG8gYXZvaWQgbW92aW5nIGZvY3VzIG9uIHBhZ2UgbG9hZClcblx0XHQvLyAtIHdoZW4gdGhlIHNjcmVlbiBiZWNvbWVzIHZpc2libGVcblx0XHQvLyAtIGlmIHRoZSB3cmFwcGVyIHJlZiBoYXMgYmVlbiBhc3NpZ25lZFxuXHRcdGlmICggaXNJbml0aWFsTG9jYXRpb24gfHwgISBpc01hdGNoIHx8ICEgd3JhcHBlclJlZi5jdXJyZW50ICkge1xuXHRcdFx0cmV0dXJuO1xuXHRcdH1cblxuXHRcdGxldCBlbGVtZW50VG9Gb2N1czogSFRNTEVsZW1lbnQgfCBudWxsID0gbnVsbDtcblxuXHRcdC8vIFdoZW4gbmF2aWdhdGluZyBiYWNrLCBpZiBhIHNlbGVjdG9yIGlzIHByb3ZpZGVkLCB1c2UgaXQgdG8gbG9vayBmb3IgdGhlXG5cdFx0Ly8gdGFyZ2V0IGVsZW1lbnQgKGFzc3VtZWQgdG8gYmUgYSBub2RlIGluc2lkZSB0aGUgY3VycmVudCBOYXZpZ2F0b3JTY3JlZW4pXG5cdFx0aWYgKCBsb2NhdGlvbi5pc0JhY2sgJiYgcHJldmlvdXNMb2NhdGlvbj8uZm9jdXNUYXJnZXRTZWxlY3RvciApIHtcblx0XHRcdGVsZW1lbnRUb0ZvY3VzID0gd3JhcHBlclJlZi5jdXJyZW50LnF1ZXJ5U2VsZWN0b3IoXG5cdFx0XHRcdHByZXZpb3VzTG9jYXRpb24uZm9jdXNUYXJnZXRTZWxlY3RvclxuXHRcdFx0KTtcblx0XHR9XG5cblx0XHQvLyBJZiB0aGUgcHJldmlvdXMgcXVlcnkgZGlkbid0IHJ1biBvciBmaW5kIGFueSBlbGVtZW50IHRvIGZvY3VzLCBmYWxsYmFja1xuXHRcdC8vIHRvIHRoZSBmaXJzdCB0YWJiYWJsZSBlbGVtZW50IGluIHRoZSBzY3JlZW4gKG9yIHRoZSBzY3JlZW4gaXRzZWxmKS5cblx0XHRpZiAoICEgZWxlbWVudFRvRm9jdXMgKSB7XG5cdFx0XHRjb25zdCBmaXJzdFRhYmJhYmxlID0gKFxuXHRcdFx0XHRmb2N1cy50YWJiYWJsZS5maW5kKCB3cmFwcGVyUmVmLmN1cnJlbnQgKSBhcyBIVE1MRWxlbWVudFtdXG5cdFx0XHQgKVsgMCBdO1xuXG5cdFx0XHRlbGVtZW50VG9Gb2N1cyA9IGZpcnN0VGFiYmFibGUgPz8gd3JhcHBlclJlZi5jdXJyZW50O1xuXHRcdH1cblxuXHRcdGVsZW1lbnRUb0ZvY3VzLmZvY3VzKCk7XG5cdH0sIFtcblx0XHRpc0luaXRpYWxMb2NhdGlvbixcblx0XHRpc01hdGNoLFxuXHRcdGxvY2F0aW9uLmlzQmFjayxcblx0XHRwcmV2aW91c0xvY2F0aW9uPy5mb2N1c1RhcmdldFNlbGVjdG9yLFxuXHRdICk7XG5cblx0Y29uc3QgbWVyZ2VkV3JhcHBlclJlZiA9IHVzZU1lcmdlUmVmcyggWyBmb3J3YXJkZWRSZWYsIHdyYXBwZXJSZWYgXSApO1xuXG5cdGlmICggISBpc01hdGNoICkge1xuXHRcdHJldHVybiBudWxsO1xuXHR9XG5cblx0aWYgKCBwcmVmZXJzUmVkdWNlZE1vdGlvbiApIHtcblx0XHRyZXR1cm4gKFxuXHRcdFx0PFZpZXdcblx0XHRcdFx0cmVmPXsgbWVyZ2VkV3JhcHBlclJlZiB9XG5cdFx0XHRcdGNsYXNzTmFtZT17IGNsYXNzZXMgfVxuXHRcdFx0XHR7IC4uLm90aGVyUHJvcHMgfVxuXHRcdFx0PlxuXHRcdFx0XHR7IGNoaWxkcmVuIH1cblx0XHRcdDwvVmlldz5cblx0XHQpO1xuXHR9XG5cblx0Y29uc3QgYW5pbWF0ZSA9IHtcblx0XHRvcGFjaXR5OiAxLFxuXHRcdHRyYW5zaXRpb246IHtcblx0XHRcdGRlbGF5OiBhbmltYXRpb25FbnRlckRlbGF5LFxuXHRcdFx0ZHVyYXRpb246IGFuaW1hdGlvbkVudGVyRHVyYXRpb24sXG5cdFx0XHRlYXNlOiAnZWFzZUluT3V0Jyxcblx0XHR9LFxuXHRcdHg6IDAsXG5cdH07XG5cdGNvbnN0IGluaXRpYWwgPSB7XG5cdFx0b3BhY2l0eTogMCxcblx0XHR4OlxuXHRcdFx0KCBpc1JUTCgpICYmIGxvY2F0aW9uLmlzQmFjayApIHx8ICggISBpc1JUTCgpICYmICEgbG9jYXRpb24uaXNCYWNrIClcblx0XHRcdFx0PyA1MFxuXHRcdFx0XHQ6IC01MCxcblx0fTtcblx0Y29uc3QgZXhpdCA9IHtcblx0XHRkZWxheTogYW5pbWF0aW9uRXhpdERlbGF5LFxuXHRcdG9wYWNpdHk6IDAsXG5cdFx0eDpcblx0XHRcdCggISBpc1JUTCgpICYmIGxvY2F0aW9uLmlzQmFjayApIHx8ICggaXNSVEwoKSAmJiAhIGxvY2F0aW9uLmlzQmFjayApXG5cdFx0XHRcdD8gNTBcblx0XHRcdFx0OiAtNTAsXG5cdFx0dHJhbnNpdGlvbjoge1xuXHRcdFx0ZHVyYXRpb246IGFuaW1hdGlvbkV4aXREdXJhdGlvbixcblx0XHRcdGVhc2U6ICdlYXNlSW5PdXQnLFxuXHRcdH0sXG5cdH07XG5cblx0Y29uc3QgYW5pbWF0ZWRQcm9wcyA9IHtcblx0XHRhbmltYXRlLFxuXHRcdGV4aXQsXG5cdFx0aW5pdGlhbCxcblx0fTtcblxuXHRyZXR1cm4gKFxuXHRcdDxtb3Rpb24uZGl2XG5cdFx0XHRyZWY9eyBtZXJnZWRXcmFwcGVyUmVmIH1cblx0XHRcdGNsYXNzTmFtZT17IGNsYXNzZXMgfVxuXHRcdFx0eyAuLi5vdGhlclByb3BzIH1cblx0XHRcdHsgLi4uYW5pbWF0ZWRQcm9wcyB9XG5cdFx0PlxuXHRcdFx0eyBjaGlsZHJlbiB9XG5cdFx0PC9tb3Rpb24uZGl2PlxuXHQpO1xufVxuXG4vKipcbiAqIFRoZSBgTmF2aWdhdG9yU2NyZWVuYCBjb21wb25lbnQgcmVwcmVzZW50cyBhIHNpbmdsZSB2aWV3L3NjcmVlbi9wYW5lbCBhbmRcbiAqIHNob3VsZCBiZSB1c2VkIGluIGNvbWJpbmF0aW9uIHdpdGggdGhlIGBOYXZpZ2F0b3JQcm92aWRlcmAsIHRoZVxuICogYE5hdmlnYXRvckJ1dHRvbmAgYW5kIHRoZSBgTmF2aWdhdG9yQmFja0J1dHRvbmAgY29tcG9uZW50cyAob3IgdGhlIGB1c2VOYXZpZ2F0b3JgXG4gKiBob29rKS5cbiAqXG4gKiBAZXhhbXBsZVxuICogYGBganN4XG4gKiBpbXBvcnQge1xuICogICBfX2V4cGVyaW1lbnRhbE5hdmlnYXRvclByb3ZpZGVyIGFzIE5hdmlnYXRvclByb3ZpZGVyLFxuICogICBfX2V4cGVyaW1lbnRhbE5hdmlnYXRvclNjcmVlbiBhcyBOYXZpZ2F0b3JTY3JlZW4sXG4gKiAgIF9fZXhwZXJpbWVudGFsTmF2aWdhdG9yQnV0dG9uIGFzIE5hdmlnYXRvckJ1dHRvbixcbiAqICAgX19leHBlcmltZW50YWxOYXZpZ2F0b3JCYWNrQnV0dG9uIGFzIE5hdmlnYXRvckJhY2tCdXR0b24sXG4gKiB9IGZyb20gJ0B3b3JkcHJlc3MvY29tcG9uZW50cyc7XG4gKlxuICogY29uc3QgTXlOYXZpZ2F0aW9uID0gKCkgPT4gKFxuICogICA8TmF2aWdhdG9yUHJvdmlkZXIgaW5pdGlhbFBhdGg9XCIvXCI+XG4gKiAgICAgPE5hdmlnYXRvclNjcmVlbiBwYXRoPVwiL1wiPlxuICogICAgICAgPHA+VGhpcyBpcyB0aGUgaG9tZSBzY3JlZW4uPC9wPlxuICogICAgICAgIDxOYXZpZ2F0b3JCdXR0b24gcGF0aD1cIi9jaGlsZFwiPlxuICogICAgICAgICAgTmF2aWdhdGUgdG8gY2hpbGQgc2NyZWVuLlxuICogICAgICAgPC9OYXZpZ2F0b3JCdXR0b24+XG4gKiAgICAgPC9OYXZpZ2F0b3JTY3JlZW4+XG4gKlxuICogICAgIDxOYXZpZ2F0b3JTY3JlZW4gcGF0aD1cIi9jaGlsZFwiPlxuICogICAgICAgPHA+VGhpcyBpcyB0aGUgY2hpbGQgc2NyZWVuLjwvcD5cbiAqICAgICAgIDxOYXZpZ2F0b3JCYWNrQnV0dG9uPlxuICogICAgICAgICBHbyBiYWNrXG4gKiAgICAgICA8L05hdmlnYXRvckJhY2tCdXR0b24+XG4gKiAgICAgPC9OYXZpZ2F0b3JTY3JlZW4+XG4gKiAgIDwvTmF2aWdhdG9yUHJvdmlkZXI+XG4gKiApO1xuICogYGBgXG4gKi9cbmNvbnN0IENvbm5lY3RlZE5hdmlnYXRvclNjcmVlbiA9IGNvbnRleHRDb25uZWN0KFxuXHROYXZpZ2F0b3JTY3JlZW4sXG5cdCdOYXZpZ2F0b3JTY3JlZW4nXG4pO1xuXG5leHBvcnQgZGVmYXVsdCBDb25uZWN0ZWROYXZpZ2F0b3JTY3JlZW47XG4iXX0= */",
42
- toString: _EMOTION_STRINGIFIED_CSS_ERROR__
43
- };
44
-
45
- function NavigatorScreen(props, forwardedRef) {
31
+ function UnconnectedNavigatorScreen(props, forwardedRef) {
46
32
  const {
47
33
  children,
48
34
  className,
@@ -55,9 +41,7 @@ function NavigatorScreen(props, forwardedRef) {
55
41
  } = useContext(NavigatorContext);
56
42
  const isMatch = location.path === escapeAttribute(path);
57
43
  const wrapperRef = useRef(null);
58
- const previousLocation = usePrevious(location);
59
- const cx = useCx();
60
- const classes = useMemo(() => cx(_ref, className), [className, cx]); // Focus restoration
44
+ const previousLocation = usePrevious(location); // Focus restoration
61
45
 
62
46
  const isInitialLocation = location.isInitial && !location.isBack;
63
47
  useEffect(() => {
@@ -65,7 +49,15 @@ function NavigatorScreen(props, forwardedRef) {
65
49
  // - if the current location is not the initial one (to avoid moving focus on page load)
66
50
  // - when the screen becomes visible
67
51
  // - if the wrapper ref has been assigned
68
- if (isInitialLocation || !isMatch || !wrapperRef.current) {
52
+ // - if focus hasn't already been restored for the current location
53
+ if (isInitialLocation || !isMatch || !wrapperRef.current || location.hasRestoredFocus) {
54
+ return;
55
+ }
56
+
57
+ const activeElement = wrapperRef.current.ownerDocument.activeElement; // If an element is already focused within the wrapper do not focus the
58
+ // element. This prevents inputs or buttons from losing focus unnecessarily.
59
+
60
+ if (wrapperRef.current.contains(activeElement)) {
69
61
  return;
70
62
  }
71
63
 
@@ -83,8 +75,9 @@ function NavigatorScreen(props, forwardedRef) {
83
75
  elementToFocus = firstTabbable !== null && firstTabbable !== void 0 ? firstTabbable : wrapperRef.current;
84
76
  }
85
77
 
78
+ location.hasRestoredFocus = true;
86
79
  elementToFocus.focus();
87
- }, [isInitialLocation, isMatch, location.isBack, previousLocation === null || previousLocation === void 0 ? void 0 : previousLocation.focusTargetSelector]);
80
+ }, [isInitialLocation, isMatch, location.hasRestoredFocus, location.isBack, previousLocation === null || previousLocation === void 0 ? void 0 : previousLocation.focusTargetSelector]);
88
81
  const mergedWrapperRef = useMergeRefs([forwardedRef, wrapperRef]);
89
82
 
90
83
  if (!isMatch) {
@@ -94,7 +87,7 @@ function NavigatorScreen(props, forwardedRef) {
94
87
  if (prefersReducedMotion) {
95
88
  return createElement(View, _extends({
96
89
  ref: mergedWrapperRef,
97
- className: classes
90
+ className: className
98
91
  }, otherProps), children);
99
92
  }
100
93
 
@@ -127,7 +120,7 @@ function NavigatorScreen(props, forwardedRef) {
127
120
  };
128
121
  return createElement(motion.div, _extends({
129
122
  ref: mergedWrapperRef,
130
- className: classes
123
+ className: className
131
124
  }, otherProps, animatedProps), children);
132
125
  }
133
126
  /**
@@ -166,6 +159,6 @@ function NavigatorScreen(props, forwardedRef) {
166
159
  */
167
160
 
168
161
 
169
- const ConnectedNavigatorScreen = contextConnect(NavigatorScreen, 'NavigatorScreen');
170
- export default ConnectedNavigatorScreen;
162
+ export const NavigatorScreen = contextConnect(UnconnectedNavigatorScreen, 'NavigatorScreen');
163
+ export default NavigatorScreen;
171
164
  //# sourceMappingURL=component.js.map
@@ -1 +1 @@
1
- {"version":3,"sources":["@wordpress/components/src/navigator/navigator-screen/component.tsx"],"names":["motion","css","focus","useContext","useEffect","useMemo","useRef","useReducedMotion","useMergeRefs","usePrevious","isRTL","escapeAttribute","contextConnect","useContextSystem","useCx","View","NavigatorContext","animationEnterDelay","animationEnterDuration","animationExitDuration","animationExitDelay","NavigatorScreen","props","forwardedRef","children","className","path","otherProps","prefersReducedMotion","location","isMatch","wrapperRef","previousLocation","cx","classes","isInitialLocation","isInitial","isBack","current","elementToFocus","focusTargetSelector","querySelector","firstTabbable","tabbable","find","mergedWrapperRef","animate","opacity","transition","delay","duration","ease","x","initial","exit","animatedProps","ConnectedNavigatorScreen"],"mappings":"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","sourcesContent":["/**\n * External dependencies\n */\nimport type { ForwardedRef } from 'react';\n// eslint-disable-next-line no-restricted-imports\nimport { motion, MotionProps } from 'framer-motion';\nimport { css } from '@emotion/react';\n\n/**\n * WordPress dependencies\n */\nimport { focus } from '@wordpress/dom';\nimport { useContext, useEffect, useMemo, useRef } from '@wordpress/element';\nimport {\n\tuseReducedMotion,\n\tuseMergeRefs,\n\tusePrevious,\n} from '@wordpress/compose';\nimport { isRTL } from '@wordpress/i18n';\nimport { escapeAttribute } from '@wordpress/escape-html';\n\n/**\n * Internal dependencies\n */\nimport {\n\tcontextConnect,\n\tuseContextSystem,\n\tWordPressComponentProps,\n} from '../../ui/context';\nimport { useCx } from '../../utils/hooks/use-cx';\nimport { View } from '../../view';\nimport { NavigatorContext } from '../context';\nimport type { NavigatorScreenProps } from '../types';\n\nconst animationEnterDelay = 0;\nconst animationEnterDuration = 0.14;\nconst animationExitDuration = 0.14;\nconst animationExitDelay = 0;\n\n// Props specific to `framer-motion` can't be currently passed to `NavigatorScreen`,\n// as some of them would overlap with HTML props (e.g. `onAnimationStart`, ...)\ntype Props = Omit<\n\tWordPressComponentProps< NavigatorScreenProps, 'div', false >,\n\tkeyof MotionProps\n>;\n\nfunction NavigatorScreen( props: Props, forwardedRef: ForwardedRef< any > ) {\n\tconst { children, className, path, ...otherProps } = useContextSystem(\n\t\tprops,\n\t\t'NavigatorScreen'\n\t);\n\n\tconst prefersReducedMotion = useReducedMotion();\n\tconst { location } = useContext( NavigatorContext );\n\tconst isMatch = location.path === escapeAttribute( path );\n\tconst wrapperRef = useRef< HTMLDivElement >( null );\n\n\tconst previousLocation = usePrevious( location );\n\n\tconst cx = useCx();\n\tconst classes = useMemo(\n\t\t() =>\n\t\t\tcx(\n\t\t\t\tcss( {\n\t\t\t\t\t// Ensures horizontal overflow is visually accessible.\n\t\t\t\t\toverflowX: 'auto',\n\t\t\t\t\t// In case the root has a height, it should not be exceeded.\n\t\t\t\t\tmaxHeight: '100%',\n\t\t\t\t} ),\n\t\t\t\tclassName\n\t\t\t),\n\t\t[ className, cx ]\n\t);\n\n\t// Focus restoration\n\tconst isInitialLocation = location.isInitial && ! location.isBack;\n\tuseEffect( () => {\n\t\t// Only attempt to restore focus:\n\t\t// - if the current location is not the initial one (to avoid moving focus on page load)\n\t\t// - when the screen becomes visible\n\t\t// - if the wrapper ref has been assigned\n\t\tif ( isInitialLocation || ! isMatch || ! wrapperRef.current ) {\n\t\t\treturn;\n\t\t}\n\n\t\tlet elementToFocus: HTMLElement | null = null;\n\n\t\t// When navigating back, if a selector is provided, use it to look for the\n\t\t// target element (assumed to be a node inside the current NavigatorScreen)\n\t\tif ( location.isBack && previousLocation?.focusTargetSelector ) {\n\t\t\telementToFocus = wrapperRef.current.querySelector(\n\t\t\t\tpreviousLocation.focusTargetSelector\n\t\t\t);\n\t\t}\n\n\t\t// If the previous query didn't run or find any element to focus, fallback\n\t\t// to the first tabbable element in the screen (or the screen itself).\n\t\tif ( ! elementToFocus ) {\n\t\t\tconst firstTabbable = (\n\t\t\t\tfocus.tabbable.find( wrapperRef.current ) as HTMLElement[]\n\t\t\t )[ 0 ];\n\n\t\t\telementToFocus = firstTabbable ?? wrapperRef.current;\n\t\t}\n\n\t\telementToFocus.focus();\n\t}, [\n\t\tisInitialLocation,\n\t\tisMatch,\n\t\tlocation.isBack,\n\t\tpreviousLocation?.focusTargetSelector,\n\t] );\n\n\tconst mergedWrapperRef = useMergeRefs( [ forwardedRef, wrapperRef ] );\n\n\tif ( ! isMatch ) {\n\t\treturn null;\n\t}\n\n\tif ( prefersReducedMotion ) {\n\t\treturn (\n\t\t\t<View\n\t\t\t\tref={ mergedWrapperRef }\n\t\t\t\tclassName={ classes }\n\t\t\t\t{ ...otherProps }\n\t\t\t>\n\t\t\t\t{ children }\n\t\t\t</View>\n\t\t);\n\t}\n\n\tconst animate = {\n\t\topacity: 1,\n\t\ttransition: {\n\t\t\tdelay: animationEnterDelay,\n\t\t\tduration: animationEnterDuration,\n\t\t\tease: 'easeInOut',\n\t\t},\n\t\tx: 0,\n\t};\n\tconst initial = {\n\t\topacity: 0,\n\t\tx:\n\t\t\t( isRTL() && location.isBack ) || ( ! isRTL() && ! location.isBack )\n\t\t\t\t? 50\n\t\t\t\t: -50,\n\t};\n\tconst exit = {\n\t\tdelay: animationExitDelay,\n\t\topacity: 0,\n\t\tx:\n\t\t\t( ! isRTL() && location.isBack ) || ( isRTL() && ! location.isBack )\n\t\t\t\t? 50\n\t\t\t\t: -50,\n\t\ttransition: {\n\t\t\tduration: animationExitDuration,\n\t\t\tease: 'easeInOut',\n\t\t},\n\t};\n\n\tconst animatedProps = {\n\t\tanimate,\n\t\texit,\n\t\tinitial,\n\t};\n\n\treturn (\n\t\t<motion.div\n\t\t\tref={ mergedWrapperRef }\n\t\t\tclassName={ classes }\n\t\t\t{ ...otherProps }\n\t\t\t{ ...animatedProps }\n\t\t>\n\t\t\t{ children }\n\t\t</motion.div>\n\t);\n}\n\n/**\n * The `NavigatorScreen` component represents a single view/screen/panel and\n * should be used in combination with the `NavigatorProvider`, the\n * `NavigatorButton` and the `NavigatorBackButton` components (or the `useNavigator`\n * hook).\n *\n * @example\n * ```jsx\n * import {\n * __experimentalNavigatorProvider as NavigatorProvider,\n * __experimentalNavigatorScreen as NavigatorScreen,\n * __experimentalNavigatorButton as NavigatorButton,\n * __experimentalNavigatorBackButton as NavigatorBackButton,\n * } from '@wordpress/components';\n *\n * const MyNavigation = () => (\n * <NavigatorProvider initialPath=\"/\">\n * <NavigatorScreen path=\"/\">\n * <p>This is the home screen.</p>\n * <NavigatorButton path=\"/child\">\n * Navigate to child screen.\n * </NavigatorButton>\n * </NavigatorScreen>\n *\n * <NavigatorScreen path=\"/child\">\n * <p>This is the child screen.</p>\n * <NavigatorBackButton>\n * Go back\n * </NavigatorBackButton>\n * </NavigatorScreen>\n * </NavigatorProvider>\n * );\n * ```\n */\nconst ConnectedNavigatorScreen = contextConnect(\n\tNavigatorScreen,\n\t'NavigatorScreen'\n);\n\nexport default ConnectedNavigatorScreen;\n"]}
1
+ {"version":3,"sources":["@wordpress/components/src/navigator/navigator-screen/component.tsx"],"names":["motion","focus","useContext","useEffect","useRef","useReducedMotion","useMergeRefs","usePrevious","isRTL","escapeAttribute","contextConnect","useContextSystem","View","NavigatorContext","animationEnterDelay","animationEnterDuration","animationExitDuration","animationExitDelay","UnconnectedNavigatorScreen","props","forwardedRef","children","className","path","otherProps","prefersReducedMotion","location","isMatch","wrapperRef","previousLocation","isInitialLocation","isInitial","isBack","current","hasRestoredFocus","activeElement","ownerDocument","contains","elementToFocus","focusTargetSelector","querySelector","firstTabbable","tabbable","find","mergedWrapperRef","animate","opacity","transition","delay","duration","ease","x","initial","exit","animatedProps","NavigatorScreen"],"mappings":"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","sourcesContent":["/**\n * External dependencies\n */\nimport type { ForwardedRef } from 'react';\n// eslint-disable-next-line no-restricted-imports\nimport { motion, MotionProps } from 'framer-motion';\n\n/**\n * WordPress dependencies\n */\nimport { focus } from '@wordpress/dom';\nimport { useContext, useEffect, useRef } from '@wordpress/element';\nimport {\n\tuseReducedMotion,\n\tuseMergeRefs,\n\tusePrevious,\n} from '@wordpress/compose';\nimport { isRTL } from '@wordpress/i18n';\nimport { escapeAttribute } from '@wordpress/escape-html';\n\n/**\n * Internal dependencies\n */\nimport {\n\tcontextConnect,\n\tuseContextSystem,\n\tWordPressComponentProps,\n} from '../../ui/context';\nimport { View } from '../../view';\nimport { NavigatorContext } from '../context';\nimport type { NavigatorScreenProps } from '../types';\n\nconst animationEnterDelay = 0;\nconst animationEnterDuration = 0.14;\nconst animationExitDuration = 0.14;\nconst animationExitDelay = 0;\n\n// Props specific to `framer-motion` can't be currently passed to `NavigatorScreen`,\n// as some of them would overlap with HTML props (e.g. `onAnimationStart`, ...)\ntype Props = Omit<\n\tWordPressComponentProps< NavigatorScreenProps, 'div', false >,\n\tkeyof MotionProps\n>;\n\nfunction UnconnectedNavigatorScreen(\n\tprops: Props,\n\tforwardedRef: ForwardedRef< any >\n) {\n\tconst { children, className, path, ...otherProps } = useContextSystem(\n\t\tprops,\n\t\t'NavigatorScreen'\n\t);\n\n\tconst prefersReducedMotion = useReducedMotion();\n\tconst { location } = useContext( NavigatorContext );\n\tconst isMatch = location.path === escapeAttribute( path );\n\tconst wrapperRef = useRef< HTMLDivElement >( null );\n\n\tconst previousLocation = usePrevious( location );\n\n\t// Focus restoration\n\tconst isInitialLocation = location.isInitial && ! location.isBack;\n\tuseEffect( () => {\n\t\t// Only attempt to restore focus:\n\t\t// - if the current location is not the initial one (to avoid moving focus on page load)\n\t\t// - when the screen becomes visible\n\t\t// - if the wrapper ref has been assigned\n\t\t// - if focus hasn't already been restored for the current location\n\t\tif (\n\t\t\tisInitialLocation ||\n\t\t\t! isMatch ||\n\t\t\t! wrapperRef.current ||\n\t\t\tlocation.hasRestoredFocus\n\t\t) {\n\t\t\treturn;\n\t\t}\n\n\t\tconst activeElement = wrapperRef.current.ownerDocument.activeElement;\n\n\t\t// If an element is already focused within the wrapper do not focus the\n\t\t// element. This prevents inputs or buttons from losing focus unnecessarily.\n\t\tif ( wrapperRef.current.contains( activeElement ) ) {\n\t\t\treturn;\n\t\t}\n\n\t\tlet elementToFocus: HTMLElement | null = null;\n\n\t\t// When navigating back, if a selector is provided, use it to look for the\n\t\t// target element (assumed to be a node inside the current NavigatorScreen)\n\t\tif ( location.isBack && previousLocation?.focusTargetSelector ) {\n\t\t\telementToFocus = wrapperRef.current.querySelector(\n\t\t\t\tpreviousLocation.focusTargetSelector\n\t\t\t);\n\t\t}\n\n\t\t// If the previous query didn't run or find any element to focus, fallback\n\t\t// to the first tabbable element in the screen (or the screen itself).\n\t\tif ( ! elementToFocus ) {\n\t\t\tconst firstTabbable = (\n\t\t\t\tfocus.tabbable.find( wrapperRef.current ) as HTMLElement[]\n\t\t\t )[ 0 ];\n\t\t\telementToFocus = firstTabbable ?? wrapperRef.current;\n\t\t}\n\n\t\tlocation.hasRestoredFocus = true;\n\t\telementToFocus.focus();\n\t}, [\n\t\tisInitialLocation,\n\t\tisMatch,\n\t\tlocation.hasRestoredFocus,\n\t\tlocation.isBack,\n\t\tpreviousLocation?.focusTargetSelector,\n\t] );\n\n\tconst mergedWrapperRef = useMergeRefs( [ forwardedRef, wrapperRef ] );\n\n\tif ( ! isMatch ) {\n\t\treturn null;\n\t}\n\n\tif ( prefersReducedMotion ) {\n\t\treturn (\n\t\t\t<View\n\t\t\t\tref={ mergedWrapperRef }\n\t\t\t\tclassName={ className }\n\t\t\t\t{ ...otherProps }\n\t\t\t>\n\t\t\t\t{ children }\n\t\t\t</View>\n\t\t);\n\t}\n\n\tconst animate = {\n\t\topacity: 1,\n\t\ttransition: {\n\t\t\tdelay: animationEnterDelay,\n\t\t\tduration: animationEnterDuration,\n\t\t\tease: 'easeInOut',\n\t\t},\n\t\tx: 0,\n\t};\n\tconst initial = {\n\t\topacity: 0,\n\t\tx:\n\t\t\t( isRTL() && location.isBack ) || ( ! isRTL() && ! location.isBack )\n\t\t\t\t? 50\n\t\t\t\t: -50,\n\t};\n\tconst exit = {\n\t\tdelay: animationExitDelay,\n\t\topacity: 0,\n\t\tx:\n\t\t\t( ! isRTL() && location.isBack ) || ( isRTL() && ! location.isBack )\n\t\t\t\t? 50\n\t\t\t\t: -50,\n\t\ttransition: {\n\t\t\tduration: animationExitDuration,\n\t\t\tease: 'easeInOut',\n\t\t},\n\t};\n\n\tconst animatedProps = {\n\t\tanimate,\n\t\texit,\n\t\tinitial,\n\t};\n\n\treturn (\n\t\t<motion.div\n\t\t\tref={ mergedWrapperRef }\n\t\t\tclassName={ className }\n\t\t\t{ ...otherProps }\n\t\t\t{ ...animatedProps }\n\t\t>\n\t\t\t{ children }\n\t\t</motion.div>\n\t);\n}\n\n/**\n * The `NavigatorScreen` component represents a single view/screen/panel and\n * should be used in combination with the `NavigatorProvider`, the\n * `NavigatorButton` and the `NavigatorBackButton` components (or the `useNavigator`\n * hook).\n *\n * @example\n * ```jsx\n * import {\n * __experimentalNavigatorProvider as NavigatorProvider,\n * __experimentalNavigatorScreen as NavigatorScreen,\n * __experimentalNavigatorButton as NavigatorButton,\n * __experimentalNavigatorBackButton as NavigatorBackButton,\n * } from '@wordpress/components';\n *\n * const MyNavigation = () => (\n * <NavigatorProvider initialPath=\"/\">\n * <NavigatorScreen path=\"/\">\n * <p>This is the home screen.</p>\n * <NavigatorButton path=\"/child\">\n * Navigate to child screen.\n * </NavigatorButton>\n * </NavigatorScreen>\n *\n * <NavigatorScreen path=\"/child\">\n * <p>This is the child screen.</p>\n * <NavigatorBackButton>\n * Go back\n * </NavigatorBackButton>\n * </NavigatorScreen>\n * </NavigatorProvider>\n * );\n * ```\n */\nexport const NavigatorScreen = contextConnect(\n\tUnconnectedNavigatorScreen,\n\t'NavigatorScreen'\n);\n\nexport default NavigatorScreen;\n"]}
@@ -1,2 +1,2 @@
1
- export { default } from './component';
1
+ export { default as NavigatorScreen } from './component';
2
2
  //# sourceMappingURL=index.js.map
@@ -1 +1 @@
1
- {"version":3,"sources":["@wordpress/components/src/navigator/navigator-screen/index.ts"],"names":["default"],"mappings":"AAAA,SAASA,OAAT,QAAwB,aAAxB","sourcesContent":["export { default } from './component';\n"]}
1
+ {"version":3,"sources":["@wordpress/components/src/navigator/navigator-screen/index.ts"],"names":["default","NavigatorScreen"],"mappings":"AAAA,SAASA,OAAO,IAAIC,eAApB,QAA2C,aAA3C","sourcesContent":["export { default as NavigatorScreen } from './component';\n"]}
@@ -1,7 +1,7 @@
1
1
  /**
2
2
  * WordPress dependencies
3
3
  */
4
- import { useEffect, useRef, useState } from '@wordpress/element';
4
+ import { useCallback, useEffect, useRef, useState } from '@wordpress/element';
5
5
  import { useResizeObserver } from '@wordpress/compose';
6
6
 
7
7
  const noop = () => {};
@@ -69,25 +69,23 @@ export function useResizeLabel(_ref) {
69
69
  */
70
70
 
71
71
  const moveTimeoutRef = useRef();
72
+ const debounceUnsetMoveXY = useCallback(() => {
73
+ const unsetMoveXY = () => {
74
+ /*
75
+ * If axis is controlled, we will avoid resetting the moveX and moveY values.
76
+ * This will allow for the preferred axis values to persist in the label.
77
+ */
78
+ if (isAxisControlled) return;
79
+ setMoveX(false);
80
+ setMoveY(false);
81
+ };
72
82
 
73
- const unsetMoveXY = () => {
74
- /*
75
- * If axis is controlled, we will avoid resetting the moveX and moveY values.
76
- * This will allow for the preferred axis values to persist in the label.
77
- */
78
- if (isAxisControlled) return;
79
- setMoveX(false);
80
- setMoveY(false);
81
- };
82
-
83
- const debounceUnsetMoveXY = () => {
84
83
  if (moveTimeoutRef.current) {
85
84
  window.clearTimeout(moveTimeoutRef.current);
86
85
  }
87
86
 
88
87
  moveTimeoutRef.current = window.setTimeout(unsetMoveXY, fadeTimeout);
89
- };
90
-
88
+ }, [fadeTimeout, isAxisControlled]);
91
89
  useEffect(() => {
92
90
  /*
93
91
  * On the initial render of useResizeAware, the height and width values are
@@ -130,7 +128,7 @@ export function useResizeLabel(_ref) {
130
128
  height
131
129
  });
132
130
  debounceUnsetMoveXY();
133
- }, [width, height]);
131
+ }, [width, height, onResize, debounceUnsetMoveXY]);
134
132
  const label = getSizeLabel({
135
133
  axis,
136
134
  height,
@@ -1 +1 @@
1
- {"version":3,"sources":["@wordpress/components/src/resizable-box/resize-tooltip/utils.ts"],"names":["useEffect","useRef","useState","useResizeObserver","noop","POSITIONS","bottom","corner","useResizeLabel","axis","fadeTimeout","onResize","position","showPx","resizeListener","sizes","isAxisControlled","moveX","setMoveX","moveY","setMoveY","width","height","heightRef","widthRef","moveTimeoutRef","unsetMoveXY","debounceUnsetMoveXY","current","window","clearTimeout","setTimeout","isRendered","didWidthChange","didHeightChange","label","getSizeLabel","undefined","labelUnit"],"mappings":"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","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { useEffect, useRef, useState } from '@wordpress/element';\nimport { useResizeObserver } from '@wordpress/compose';\n\nconst noop = () => {};\n\nexport type Axis = 'x' | 'y';\n\nexport const POSITIONS = {\n\tbottom: 'bottom',\n\tcorner: 'corner',\n} as const;\n\nexport type Position = typeof POSITIONS[ keyof typeof POSITIONS ];\n\ninterface UseResizeLabelProps {\n\t/** The label value. */\n\tlabel?: string;\n\t/** Element to be rendered for resize listening events. */\n\tresizeListener: JSX.Element;\n}\n\ninterface UseResizeLabelArgs {\n\taxis?: Axis;\n\tfadeTimeout: number;\n\tonResize( data: { width: number | null; height: number | null } ): void;\n\tposition: Position;\n\tshowPx: boolean;\n}\n\n/**\n * Custom hook that manages resize listener events. It also provides a label\n * based on current resize width x height values.\n *\n * @param props\n * @param props.axis Only shows the label corresponding to the axis.\n * @param props.fadeTimeout Duration (ms) before deactivating the resize label.\n * @param props.onResize Callback when a resize occurs. Provides { width, height } callback.\n * @param props.position Adjusts label value.\n * @param props.showPx Whether to add `PX` to the label.\n *\n * @return Properties for hook.\n */\nexport function useResizeLabel( {\n\taxis,\n\tfadeTimeout = 180,\n\tonResize = noop,\n\tposition = POSITIONS.bottom,\n\tshowPx = false,\n}: UseResizeLabelArgs ): UseResizeLabelProps {\n\t/*\n\t * The width/height values derive from this special useResizeObserver hook.\n\t * This custom hook uses the ResizeObserver API to listen for resize events.\n\t */\n\tconst [ resizeListener, sizes ] = useResizeObserver();\n\n\t/*\n\t * Indicates if the x/y axis is preferred.\n\t * If set, we will avoid resetting the moveX and moveY values.\n\t * This will allow for the preferred axis values to persist in the label.\n\t */\n\tconst isAxisControlled = !! axis;\n\n\t/*\n\t * The moveX and moveY values are used to track whether the label should\n\t * display width, height, or width x height.\n\t */\n\tconst [ moveX, setMoveX ] = useState( false );\n\tconst [ moveY, setMoveY ] = useState( false );\n\n\t/*\n\t * Cached dimension values to check for width/height updates from the\n\t * sizes property from useResizeAware()\n\t */\n\tconst { width, height } = sizes;\n\tconst heightRef = useRef( height );\n\tconst widthRef = useRef( width );\n\n\t/*\n\t * This timeout is used with setMoveX and setMoveY to determine of\n\t * both width and height values have changed at (roughly) the same time.\n\t */\n\tconst moveTimeoutRef = useRef< number >();\n\n\tconst unsetMoveXY = () => {\n\t\t/*\n\t\t * If axis is controlled, we will avoid resetting the moveX and moveY values.\n\t\t * This will allow for the preferred axis values to persist in the label.\n\t\t */\n\t\tif ( isAxisControlled ) return;\n\t\tsetMoveX( false );\n\t\tsetMoveY( false );\n\t};\n\n\tconst debounceUnsetMoveXY = () => {\n\t\tif ( moveTimeoutRef.current ) {\n\t\t\twindow.clearTimeout( moveTimeoutRef.current );\n\t\t}\n\n\t\tmoveTimeoutRef.current = window.setTimeout( unsetMoveXY, fadeTimeout );\n\t};\n\n\tuseEffect( () => {\n\t\t/*\n\t\t * On the initial render of useResizeAware, the height and width values are\n\t\t * null. They are calculated then set using via an internal useEffect hook.\n\t\t */\n\t\tconst isRendered = width !== null || height !== null;\n\n\t\tif ( ! isRendered ) return;\n\n\t\tconst didWidthChange = width !== widthRef.current;\n\t\tconst didHeightChange = height !== heightRef.current;\n\n\t\tif ( ! didWidthChange && ! didHeightChange ) return;\n\n\t\t/*\n\t\t * After the initial render, the useResizeAware will set the first\n\t\t * width and height values. We'll sync those values with our\n\t\t * width and height refs. However, we shouldn't render our Tooltip\n\t\t * label on this first cycle.\n\t\t */\n\t\tif ( width && ! widthRef.current && height && ! heightRef.current ) {\n\t\t\twidthRef.current = width;\n\t\t\theightRef.current = height;\n\t\t\treturn;\n\t\t}\n\n\t\t/*\n\t\t * After the first cycle, we can track width and height changes.\n\t\t */\n\t\tif ( didWidthChange ) {\n\t\t\tsetMoveX( true );\n\t\t\twidthRef.current = width;\n\t\t}\n\n\t\tif ( didHeightChange ) {\n\t\t\tsetMoveY( true );\n\t\t\theightRef.current = height;\n\t\t}\n\n\t\tonResize( { width, height } );\n\t\tdebounceUnsetMoveXY();\n\t}, [ width, height ] );\n\n\tconst label = getSizeLabel( {\n\t\taxis,\n\t\theight,\n\t\tmoveX,\n\t\tmoveY,\n\t\tposition,\n\t\tshowPx,\n\t\twidth,\n\t} );\n\n\treturn {\n\t\tlabel,\n\t\tresizeListener,\n\t};\n}\n\ninterface GetSizeLabelArgs {\n\taxis?: Axis;\n\theight: number | null;\n\tmoveX: boolean;\n\tmoveY: boolean;\n\tposition: Position;\n\tshowPx: boolean;\n\twidth: number | null;\n}\n\n/**\n * Gets the resize label based on width and height values (as well as recent changes).\n *\n * @param props\n * @param props.axis Only shows the label corresponding to the axis.\n * @param props.height Height value.\n * @param props.moveX Recent width (x axis) changes.\n * @param props.moveY Recent width (y axis) changes.\n * @param props.position Adjusts label value.\n * @param props.showPx Whether to add `PX` to the label.\n * @param props.width Width value.\n *\n * @return The rendered label.\n */\nfunction getSizeLabel( {\n\taxis,\n\theight,\n\tmoveX = false,\n\tmoveY = false,\n\tposition = POSITIONS.bottom,\n\tshowPx = false,\n\twidth,\n}: GetSizeLabelArgs ): string | undefined {\n\tif ( ! moveX && ! moveY ) return undefined;\n\n\t/*\n\t * Corner position...\n\t * We want the label to appear like width x height.\n\t */\n\tif ( position === POSITIONS.corner ) {\n\t\treturn `${ width } x ${ height }`;\n\t}\n\n\t/*\n\t * Other POSITIONS...\n\t * The label will combine both width x height values if both\n\t * values have recently been changed.\n\t *\n\t * Otherwise, only width or height will be displayed.\n\t * The `PX` unit will be added, if specified by the `showPx` prop.\n\t */\n\tconst labelUnit = showPx ? ' px' : '';\n\n\tif ( axis ) {\n\t\tif ( axis === 'x' && moveX ) {\n\t\t\treturn `${ width }${ labelUnit }`;\n\t\t}\n\t\tif ( axis === 'y' && moveY ) {\n\t\t\treturn `${ height }${ labelUnit }`;\n\t\t}\n\t}\n\n\tif ( moveX && moveY ) {\n\t\treturn `${ width } x ${ height }`;\n\t}\n\tif ( moveX ) {\n\t\treturn `${ width }${ labelUnit }`;\n\t}\n\tif ( moveY ) {\n\t\treturn `${ height }${ labelUnit }`;\n\t}\n\n\treturn undefined;\n}\n"]}
1
+ {"version":3,"sources":["@wordpress/components/src/resizable-box/resize-tooltip/utils.ts"],"names":["useCallback","useEffect","useRef","useState","useResizeObserver","noop","POSITIONS","bottom","corner","useResizeLabel","axis","fadeTimeout","onResize","position","showPx","resizeListener","sizes","isAxisControlled","moveX","setMoveX","moveY","setMoveY","width","height","heightRef","widthRef","moveTimeoutRef","debounceUnsetMoveXY","unsetMoveXY","current","window","clearTimeout","setTimeout","isRendered","didWidthChange","didHeightChange","label","getSizeLabel","undefined","labelUnit"],"mappings":"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","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { useCallback, useEffect, useRef, useState } from '@wordpress/element';\nimport { useResizeObserver } from '@wordpress/compose';\n\nconst noop = () => {};\n\nexport type Axis = 'x' | 'y';\n\nexport const POSITIONS = {\n\tbottom: 'bottom',\n\tcorner: 'corner',\n} as const;\n\nexport type Position = typeof POSITIONS[ keyof typeof POSITIONS ];\n\ninterface UseResizeLabelProps {\n\t/** The label value. */\n\tlabel?: string;\n\t/** Element to be rendered for resize listening events. */\n\tresizeListener: JSX.Element;\n}\n\ninterface UseResizeLabelArgs {\n\taxis?: Axis;\n\tfadeTimeout: number;\n\tonResize( data: { width: number | null; height: number | null } ): void;\n\tposition: Position;\n\tshowPx: boolean;\n}\n\n/**\n * Custom hook that manages resize listener events. It also provides a label\n * based on current resize width x height values.\n *\n * @param props\n * @param props.axis Only shows the label corresponding to the axis.\n * @param props.fadeTimeout Duration (ms) before deactivating the resize label.\n * @param props.onResize Callback when a resize occurs. Provides { width, height } callback.\n * @param props.position Adjusts label value.\n * @param props.showPx Whether to add `PX` to the label.\n *\n * @return Properties for hook.\n */\nexport function useResizeLabel( {\n\taxis,\n\tfadeTimeout = 180,\n\tonResize = noop,\n\tposition = POSITIONS.bottom,\n\tshowPx = false,\n}: UseResizeLabelArgs ): UseResizeLabelProps {\n\t/*\n\t * The width/height values derive from this special useResizeObserver hook.\n\t * This custom hook uses the ResizeObserver API to listen for resize events.\n\t */\n\tconst [ resizeListener, sizes ] = useResizeObserver();\n\n\t/*\n\t * Indicates if the x/y axis is preferred.\n\t * If set, we will avoid resetting the moveX and moveY values.\n\t * This will allow for the preferred axis values to persist in the label.\n\t */\n\tconst isAxisControlled = !! axis;\n\n\t/*\n\t * The moveX and moveY values are used to track whether the label should\n\t * display width, height, or width x height.\n\t */\n\tconst [ moveX, setMoveX ] = useState( false );\n\tconst [ moveY, setMoveY ] = useState( false );\n\n\t/*\n\t * Cached dimension values to check for width/height updates from the\n\t * sizes property from useResizeAware()\n\t */\n\tconst { width, height } = sizes;\n\tconst heightRef = useRef( height );\n\tconst widthRef = useRef( width );\n\n\t/*\n\t * This timeout is used with setMoveX and setMoveY to determine of\n\t * both width and height values have changed at (roughly) the same time.\n\t */\n\tconst moveTimeoutRef = useRef< number >();\n\n\tconst debounceUnsetMoveXY = useCallback( () => {\n\t\tconst unsetMoveXY = () => {\n\t\t\t/*\n\t\t\t * If axis is controlled, we will avoid resetting the moveX and moveY values.\n\t\t\t * This will allow for the preferred axis values to persist in the label.\n\t\t\t */\n\t\t\tif ( isAxisControlled ) return;\n\t\t\tsetMoveX( false );\n\t\t\tsetMoveY( false );\n\t\t};\n\n\t\tif ( moveTimeoutRef.current ) {\n\t\t\twindow.clearTimeout( moveTimeoutRef.current );\n\t\t}\n\n\t\tmoveTimeoutRef.current = window.setTimeout( unsetMoveXY, fadeTimeout );\n\t}, [ fadeTimeout, isAxisControlled ] );\n\n\tuseEffect( () => {\n\t\t/*\n\t\t * On the initial render of useResizeAware, the height and width values are\n\t\t * null. They are calculated then set using via an internal useEffect hook.\n\t\t */\n\t\tconst isRendered = width !== null || height !== null;\n\n\t\tif ( ! isRendered ) return;\n\n\t\tconst didWidthChange = width !== widthRef.current;\n\t\tconst didHeightChange = height !== heightRef.current;\n\n\t\tif ( ! didWidthChange && ! didHeightChange ) return;\n\n\t\t/*\n\t\t * After the initial render, the useResizeAware will set the first\n\t\t * width and height values. We'll sync those values with our\n\t\t * width and height refs. However, we shouldn't render our Tooltip\n\t\t * label on this first cycle.\n\t\t */\n\t\tif ( width && ! widthRef.current && height && ! heightRef.current ) {\n\t\t\twidthRef.current = width;\n\t\t\theightRef.current = height;\n\t\t\treturn;\n\t\t}\n\n\t\t/*\n\t\t * After the first cycle, we can track width and height changes.\n\t\t */\n\t\tif ( didWidthChange ) {\n\t\t\tsetMoveX( true );\n\t\t\twidthRef.current = width;\n\t\t}\n\n\t\tif ( didHeightChange ) {\n\t\t\tsetMoveY( true );\n\t\t\theightRef.current = height;\n\t\t}\n\n\t\tonResize( { width, height } );\n\t\tdebounceUnsetMoveXY();\n\t}, [ width, height, onResize, debounceUnsetMoveXY ] );\n\n\tconst label = getSizeLabel( {\n\t\taxis,\n\t\theight,\n\t\tmoveX,\n\t\tmoveY,\n\t\tposition,\n\t\tshowPx,\n\t\twidth,\n\t} );\n\n\treturn {\n\t\tlabel,\n\t\tresizeListener,\n\t};\n}\n\ninterface GetSizeLabelArgs {\n\taxis?: Axis;\n\theight: number | null;\n\tmoveX: boolean;\n\tmoveY: boolean;\n\tposition: Position;\n\tshowPx: boolean;\n\twidth: number | null;\n}\n\n/**\n * Gets the resize label based on width and height values (as well as recent changes).\n *\n * @param props\n * @param props.axis Only shows the label corresponding to the axis.\n * @param props.height Height value.\n * @param props.moveX Recent width (x axis) changes.\n * @param props.moveY Recent width (y axis) changes.\n * @param props.position Adjusts label value.\n * @param props.showPx Whether to add `PX` to the label.\n * @param props.width Width value.\n *\n * @return The rendered label.\n */\nfunction getSizeLabel( {\n\taxis,\n\theight,\n\tmoveX = false,\n\tmoveY = false,\n\tposition = POSITIONS.bottom,\n\tshowPx = false,\n\twidth,\n}: GetSizeLabelArgs ): string | undefined {\n\tif ( ! moveX && ! moveY ) return undefined;\n\n\t/*\n\t * Corner position...\n\t * We want the label to appear like width x height.\n\t */\n\tif ( position === POSITIONS.corner ) {\n\t\treturn `${ width } x ${ height }`;\n\t}\n\n\t/*\n\t * Other POSITIONS...\n\t * The label will combine both width x height values if both\n\t * values have recently been changed.\n\t *\n\t * Otherwise, only width or height will be displayed.\n\t * The `PX` unit will be added, if specified by the `showPx` prop.\n\t */\n\tconst labelUnit = showPx ? ' px' : '';\n\n\tif ( axis ) {\n\t\tif ( axis === 'x' && moveX ) {\n\t\t\treturn `${ width }${ labelUnit }`;\n\t\t}\n\t\tif ( axis === 'y' && moveY ) {\n\t\t\treturn `${ height }${ labelUnit }`;\n\t\t}\n\t}\n\n\tif ( moveX && moveY ) {\n\t\treturn `${ width } x ${ height }`;\n\t}\n\tif ( moveX ) {\n\t\treturn `${ width }${ labelUnit }`;\n\t}\n\tif ( moveY ) {\n\t\treturn `${ height }${ labelUnit }`;\n\t}\n\n\treturn undefined;\n}\n"]}