@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
@@ -1 +1 @@
1
- {"version":3,"sources":["@wordpress/components/src/font-size-picker/utils.js"],"names":["DEFAULT_FONT_SIZE","DEFAULT_FONT_SIZE_OPTION","slug","name","CUSTOM_FONT_SIZE","CUSTOM_FONT_SIZE_OPTION","FONT_SIZES_ALIASES","splitValueAndUnitFromSize","size","numericValue","unit","match","isNaN","parseFloat","isFinite","isSimpleCssValue","value","sizeRegex","test","getFontSizeOptions","useSelectControl","optionsArray","disableCustomFontSizes","length","getSelectOptions","getToggleGroupOptions","options","map","key","__experimentalHint","labelAliases","index","label","getSelectedOption","fontSizes","find","font"],"mappings":"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","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\n\nconst DEFAULT_FONT_SIZE = 'default';\nconst DEFAULT_FONT_SIZE_OPTION = {\n\tslug: DEFAULT_FONT_SIZE,\n\tname: __( 'Default' ),\n};\nexport const CUSTOM_FONT_SIZE = 'custom';\nconst CUSTOM_FONT_SIZE_OPTION = {\n\tslug: CUSTOM_FONT_SIZE,\n\tname: __( 'Custom' ),\n};\n\n/**\n * In case we have at most five font sizes, show a `T-shirt size`\n * alias as a label of the font size. The label assumes that the font sizes\n * are ordered accordingly - from smallest to largest.\n */\nconst FONT_SIZES_ALIASES = [\n\t/* translators: S stands for 'small' and is a size label. */\n\t__( 'S' ),\n\t/* translators: M stands for 'medium' and is a size label. */\n\t__( 'M' ),\n\t/* translators: L stands for 'large' and is a size label. */\n\t__( 'L' ),\n\t/* translators: XL stands for 'extra large' and is a size label. */\n\t__( 'XL' ),\n\t/* translators: XXL stands for 'extra extra large' and is a size label. */\n\t__( 'XXL' ),\n];\n\n/**\n * Helper util to split a font size to its numeric value\n * and its `unit`, if exists.\n *\n * @param {string|number} size Font size.\n * @return {[number, string]} An array with the numeric value and the unit if exists.\n */\nexport function splitValueAndUnitFromSize( size ) {\n\tconst [ numericValue, unit ] = `${ size }`.match( /[\\d\\.]+|\\D+/g );\n\n\tif ( ! isNaN( parseFloat( numericValue ) ) && isFinite( numericValue ) ) {\n\t\treturn [ numericValue, unit ];\n\t}\n\n\treturn [];\n}\n\n/**\n * Some themes use css vars for their font sizes, so until we\n * have the way of calculating them don't display them.\n *\n * @param {string|number} value The value that is checked.\n * @return {boolean} Whether the value is a simple css value.\n */\nexport function isSimpleCssValue( value ) {\n\tconst sizeRegex = /^[\\d\\.]+(px|em|rem|vw|vh|%)?$/i;\n\treturn sizeRegex.test( value );\n}\n\n/**\n * Return font size options in the proper format depending\n * on the currently used control (select, toggle group).\n *\n * @param {boolean} useSelectControl Whether to use a select control.\n * @param {Object[]} optionsArray Array of available font sizes objects.\n * @param {boolean} disableCustomFontSizes Flag that indicates if custom font sizes are disabled.\n * @return {Object[]|null} Array of font sizes in proper format for the used control.\n */\nexport function getFontSizeOptions(\n\tuseSelectControl,\n\toptionsArray,\n\tdisableCustomFontSizes\n) {\n\tif ( disableCustomFontSizes && ! optionsArray.length ) {\n\t\treturn null;\n\t}\n\treturn useSelectControl\n\t\t? getSelectOptions( optionsArray, disableCustomFontSizes )\n\t\t: getToggleGroupOptions( optionsArray );\n}\n\nfunction getSelectOptions( optionsArray, disableCustomFontSizes ) {\n\tconst options = [\n\t\tDEFAULT_FONT_SIZE_OPTION,\n\t\t...optionsArray,\n\t\t...( disableCustomFontSizes ? [] : [ CUSTOM_FONT_SIZE_OPTION ] ),\n\t];\n\treturn options.map( ( { slug, name, size } ) => ( {\n\t\tkey: slug,\n\t\tname,\n\t\tsize,\n\t\t__experimentalHint:\n\t\t\tsize && isSimpleCssValue( size ) && parseFloat( size ),\n\t} ) );\n}\n\n/**\n * Build options for the toggle group options.\n *\n * @param {Array} optionsArray An array of font size options.\n * @param {string[]} labelAliases An array of alternative labels.\n * @return {Array} Remapped optionsArray.\n */\nexport function getToggleGroupOptions(\n\toptionsArray,\n\tlabelAliases = FONT_SIZES_ALIASES\n) {\n\treturn optionsArray.map( ( { slug, size, name }, index ) => {\n\t\treturn {\n\t\t\tkey: slug,\n\t\t\tvalue: size,\n\t\t\tlabel: labelAliases[ index ],\n\t\t\tname: name || labelAliases[ index ],\n\t\t};\n\t} );\n}\n\nexport function getSelectedOption( fontSizes, value ) {\n\tif ( ! value ) {\n\t\treturn DEFAULT_FONT_SIZE_OPTION;\n\t}\n\treturn (\n\t\tfontSizes.find( ( font ) => font.size === value ) ||\n\t\tCUSTOM_FONT_SIZE_OPTION\n\t);\n}\n"]}
1
+ {"version":3,"sources":["@wordpress/components/src/font-size-picker/utils.ts"],"names":["DEFAULT_FONT_SIZE","DEFAULT_FONT_SIZE_OPTION","slug","name","CUSTOM_FONT_SIZE","CUSTOM_FONT_SIZE_OPTION","FONT_SIZES_ALIASES","splitValueAndUnitFromSize","size","numericValue","unit","match","isNaN","parseFloat","isFinite","Number","isSimpleCssValue","value","sizeRegex","test","String","getFontSizeOptions","useSelectControl","optionsArray","disableCustomFontSizes","length","getSelectOptions","getToggleGroupOptions","options","map","key","__experimentalHint","labelAliases","index","label","getSelectedOption","fontSizes","find","font"],"mappings":"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","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\nimport type {\n\tFontSize,\n\tFontSizeOption,\n\tFontSizeSelectOption,\n\tFontSizeToggleGroupOption,\n\tFontSizePickerProps,\n} from './types';\n\nconst DEFAULT_FONT_SIZE = 'default';\nconst DEFAULT_FONT_SIZE_OPTION = {\n\tslug: DEFAULT_FONT_SIZE,\n\tname: __( 'Default' ),\n};\nexport const CUSTOM_FONT_SIZE = 'custom';\nconst CUSTOM_FONT_SIZE_OPTION = {\n\tslug: CUSTOM_FONT_SIZE,\n\tname: __( 'Custom' ),\n};\n\n/**\n * In case we have at most five font sizes, show a `T-shirt size`\n * alias as a label of the font size. The label assumes that the font sizes\n * are ordered accordingly - from smallest to largest.\n */\nconst FONT_SIZES_ALIASES = [\n\t/* translators: S stands for 'small' and is a size label. */\n\t__( 'S' ),\n\t/* translators: M stands for 'medium' and is a size label. */\n\t__( 'M' ),\n\t/* translators: L stands for 'large' and is a size label. */\n\t__( 'L' ),\n\t/* translators: XL stands for 'extra large' and is a size label. */\n\t__( 'XL' ),\n\t/* translators: XXL stands for 'extra extra large' and is a size label. */\n\t__( 'XXL' ),\n];\n\n/**\n * Helper util to split a font size to its numeric value\n * and its `unit`, if exists.\n *\n * @param size Font size.\n * @return An array with the numeric value and the unit if exists.\n */\nexport function splitValueAndUnitFromSize(\n\tsize: NonNullable< FontSizePickerProps[ 'value' ] >\n) {\n\tconst [ numericValue, unit ] = `${ size }`.match( /[\\d\\.]+|\\D+/g ) ?? [];\n\n\tif (\n\t\t! isNaN( parseFloat( numericValue ) ) &&\n\t\tisFinite( Number( numericValue ) )\n\t) {\n\t\treturn [ numericValue, unit ];\n\t}\n\n\treturn [];\n}\n\n/**\n * Some themes use css vars for their font sizes, so until we\n * have the way of calculating them don't display them.\n *\n * @param value The value that is checked.\n * @return Whether the value is a simple css value.\n */\nexport function isSimpleCssValue(\n\tvalue: NonNullable< FontSizePickerProps[ 'value' ] >\n) {\n\tconst sizeRegex = /^[\\d\\.]+(px|em|rem|vw|vh|%)?$/i;\n\treturn sizeRegex.test( String( value ) );\n}\n\n/**\n * Return font size options in the proper format depending\n * on the currently used control (select, toggle group).\n *\n * @param useSelectControl Whether to use a select control.\n * @param optionsArray Array of available font sizes objects.\n * @param disableCustomFontSizes Flag that indicates if custom font sizes are disabled.\n * @return Array of font sizes in proper format for the used control.\n */\nexport function getFontSizeOptions(\n\tuseSelectControl: boolean,\n\toptionsArray: FontSize[],\n\tdisableCustomFontSizes: boolean\n): FontSizeSelectOption[] | FontSizeToggleGroupOption[] | null {\n\tif ( disableCustomFontSizes && ! optionsArray.length ) {\n\t\treturn null;\n\t}\n\treturn useSelectControl\n\t\t? getSelectOptions( optionsArray, disableCustomFontSizes )\n\t\t: getToggleGroupOptions( optionsArray );\n}\n\nfunction getSelectOptions(\n\toptionsArray: FontSize[],\n\tdisableCustomFontSizes: boolean\n): FontSizeSelectOption[] {\n\tconst options: FontSizeOption[] = [\n\t\tDEFAULT_FONT_SIZE_OPTION,\n\t\t...optionsArray,\n\t\t...( disableCustomFontSizes ? [] : [ CUSTOM_FONT_SIZE_OPTION ] ),\n\t];\n\treturn options.map( ( { slug, name, size } ) => ( {\n\t\tkey: slug,\n\t\tname: name || slug,\n\t\tsize,\n\t\t__experimentalHint:\n\t\t\tsize && isSimpleCssValue( size ) && parseFloat( String( size ) ),\n\t} ) );\n}\n\n/**\n * Build options for the toggle group options.\n *\n * @param optionsArray An array of font size options.\n * @param labelAliases An array of alternative labels.\n * @return Remapped optionsArray.\n */\nexport function getToggleGroupOptions(\n\toptionsArray: FontSize[],\n\tlabelAliases: string[] = FONT_SIZES_ALIASES\n): FontSizeToggleGroupOption[] {\n\treturn optionsArray.map( ( { slug, size, name }, index ) => {\n\t\treturn {\n\t\t\tkey: slug,\n\t\t\tvalue: size,\n\t\t\tlabel: labelAliases[ index ],\n\t\t\tname: name || labelAliases[ index ],\n\t\t};\n\t} );\n}\n\nexport function getSelectedOption(\n\tfontSizes: FontSize[],\n\tvalue: FontSizePickerProps[ 'value' ]\n): FontSizeOption {\n\tif ( ! value ) {\n\t\treturn DEFAULT_FONT_SIZE_OPTION;\n\t}\n\treturn (\n\t\tfontSizes.find( ( font ) => font.size === value ) ||\n\t\tCUSTOM_FONT_SIZE_OPTION\n\t);\n}\n"]}
@@ -44,21 +44,21 @@ function SuggestionsList(_ref) {
44
44
  const listRef = (0, _compose.useRefEffect)(listNode => {
45
45
  // only have to worry about scrolling selected suggestion into view
46
46
  // when already expanded.
47
- let id;
47
+ let rafId;
48
48
 
49
49
  if (selectedIndex > -1 && scrollIntoView && listNode.children[selectedIndex]) {
50
50
  setScrollingIntoView(true);
51
51
  (0, _domScrollIntoView.default)(listNode.children[selectedIndex], listNode, {
52
52
  onlyScrollIfNeeded: true
53
53
  });
54
- id = window.setTimeout(() => {
54
+ rafId = requestAnimationFrame(() => {
55
55
  setScrollingIntoView(false);
56
- }, 100);
56
+ });
57
57
  }
58
58
 
59
59
  return () => {
60
- if (id !== undefined) {
61
- window.clearTimeout(id);
60
+ if (rafId !== undefined) {
61
+ cancelAnimationFrame(rafId);
62
62
  }
63
63
  };
64
64
  }, [selectedIndex, scrollIntoView]);
@@ -1 +1 @@
1
- {"version":3,"sources":["@wordpress/components/src/form-token-field/suggestions-list.tsx"],"names":["handleMouseDown","e","preventDefault","SuggestionsList","selectedIndex","scrollIntoView","match","onHover","onSelect","suggestions","displayTransform","instanceId","__experimentalRenderItem","scrollingIntoView","setScrollingIntoView","listRef","listNode","id","children","onlyScrollIfNeeded","window","setTimeout","undefined","clearTimeout","handleHover","suggestion","handleClick","computeSuggestionMatch","matchText","toLocaleLowerCase","length","transformedSuggestion","indexOfMatch","indexOf","suggestionBeforeMatch","substring","suggestionMatch","suggestionAfterMatch","map","index","className","output","item","value"],"mappings":"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","sourcesContent":["/**\n * External dependencies\n */\nimport scrollView from 'dom-scroll-into-view';\nimport classnames from 'classnames';\nimport type { MouseEventHandler, ReactNode } from 'react';\n\n/**\n * WordPress dependencies\n */\nimport { useState } from '@wordpress/element';\nimport { useRefEffect } from '@wordpress/compose';\n\n/**\n * Internal dependencies\n */\nimport type { SuggestionsListProps } from './types';\n\nconst handleMouseDown: MouseEventHandler = ( e ) => {\n\t// By preventing default here, we will not lose focus of <input> when clicking a suggestion.\n\te.preventDefault();\n};\n\nexport function SuggestionsList< T extends string | { value: string } >( {\n\tselectedIndex,\n\tscrollIntoView,\n\tmatch,\n\tonHover,\n\tonSelect,\n\tsuggestions = [],\n\tdisplayTransform,\n\tinstanceId,\n\t__experimentalRenderItem,\n}: SuggestionsListProps< T > ) {\n\tconst [ scrollingIntoView, setScrollingIntoView ] = useState( false );\n\n\tconst listRef = useRefEffect< HTMLUListElement >(\n\t\t( listNode ) => {\n\t\t\t// only have to worry about scrolling selected suggestion into view\n\t\t\t// when already expanded.\n\t\t\tlet id: number;\n\t\t\tif (\n\t\t\t\tselectedIndex > -1 &&\n\t\t\t\tscrollIntoView &&\n\t\t\t\tlistNode.children[ selectedIndex ]\n\t\t\t) {\n\t\t\t\tsetScrollingIntoView( true );\n\t\t\t\tscrollView(\n\t\t\t\t\tlistNode.children[ selectedIndex ] as HTMLLIElement,\n\t\t\t\t\tlistNode,\n\t\t\t\t\t{\n\t\t\t\t\t\tonlyScrollIfNeeded: true,\n\t\t\t\t\t}\n\t\t\t\t);\n\t\t\t\tid = window.setTimeout( () => {\n\t\t\t\t\tsetScrollingIntoView( false );\n\t\t\t\t}, 100 );\n\t\t\t}\n\n\t\t\treturn () => {\n\t\t\t\tif ( id !== undefined ) {\n\t\t\t\t\twindow.clearTimeout( id );\n\t\t\t\t}\n\t\t\t};\n\t\t},\n\t\t[ selectedIndex, scrollIntoView ]\n\t);\n\n\tconst handleHover = ( suggestion: T ) => {\n\t\treturn () => {\n\t\t\tif ( ! scrollingIntoView ) {\n\t\t\t\tonHover?.( suggestion );\n\t\t\t}\n\t\t};\n\t};\n\n\tconst handleClick = ( suggestion: T ) => {\n\t\treturn () => {\n\t\t\tonSelect?.( suggestion );\n\t\t};\n\t};\n\n\tconst computeSuggestionMatch = ( suggestion: T ) => {\n\t\tconst matchText = displayTransform( match ).toLocaleLowerCase();\n\t\tif ( matchText.length === 0 ) {\n\t\t\treturn null;\n\t\t}\n\n\t\tconst transformedSuggestion = displayTransform( suggestion );\n\t\tconst indexOfMatch = transformedSuggestion\n\t\t\t.toLocaleLowerCase()\n\t\t\t.indexOf( matchText );\n\n\t\treturn {\n\t\t\tsuggestionBeforeMatch: transformedSuggestion.substring(\n\t\t\t\t0,\n\t\t\t\tindexOfMatch\n\t\t\t),\n\t\t\tsuggestionMatch: transformedSuggestion.substring(\n\t\t\t\tindexOfMatch,\n\t\t\t\tindexOfMatch + matchText.length\n\t\t\t),\n\t\t\tsuggestionAfterMatch: transformedSuggestion.substring(\n\t\t\t\tindexOfMatch + matchText.length\n\t\t\t),\n\t\t};\n\t};\n\n\treturn (\n\t\t<ul\n\t\t\tref={ listRef }\n\t\t\tclassName=\"components-form-token-field__suggestions-list\"\n\t\t\tid={ `components-form-token-suggestions-${ instanceId }` }\n\t\t\trole=\"listbox\"\n\t\t>\n\t\t\t{ suggestions.map( ( suggestion, index ) => {\n\t\t\t\tconst matchText = computeSuggestionMatch( suggestion );\n\t\t\t\tconst className = classnames(\n\t\t\t\t\t'components-form-token-field__suggestion',\n\t\t\t\t\t{\n\t\t\t\t\t\t'is-selected': index === selectedIndex,\n\t\t\t\t\t}\n\t\t\t\t);\n\n\t\t\t\tlet output: ReactNode;\n\n\t\t\t\tif ( typeof __experimentalRenderItem === 'function' ) {\n\t\t\t\t\toutput = __experimentalRenderItem( { item: suggestion } );\n\t\t\t\t} else if ( matchText ) {\n\t\t\t\t\toutput = (\n\t\t\t\t\t\t<span aria-label={ displayTransform( suggestion ) }>\n\t\t\t\t\t\t\t{ matchText.suggestionBeforeMatch }\n\t\t\t\t\t\t\t<strong className=\"components-form-token-field__suggestion-match\">\n\t\t\t\t\t\t\t\t{ matchText.suggestionMatch }\n\t\t\t\t\t\t\t</strong>\n\t\t\t\t\t\t\t{ matchText.suggestionAfterMatch }\n\t\t\t\t\t\t</span>\n\t\t\t\t\t);\n\t\t\t\t} else {\n\t\t\t\t\toutput = displayTransform( suggestion );\n\t\t\t\t}\n\n\t\t\t\t/* eslint-disable jsx-a11y/click-events-have-key-events */\n\t\t\t\treturn (\n\t\t\t\t\t<li\n\t\t\t\t\t\tid={ `components-form-token-suggestions-${ instanceId }-${ index }` }\n\t\t\t\t\t\trole=\"option\"\n\t\t\t\t\t\tclassName={ className }\n\t\t\t\t\t\tkey={\n\t\t\t\t\t\t\ttypeof suggestion === 'object' &&\n\t\t\t\t\t\t\t'value' in suggestion\n\t\t\t\t\t\t\t\t? suggestion?.value\n\t\t\t\t\t\t\t\t: displayTransform( suggestion )\n\t\t\t\t\t\t}\n\t\t\t\t\t\tonMouseDown={ handleMouseDown }\n\t\t\t\t\t\tonClick={ handleClick( suggestion ) }\n\t\t\t\t\t\tonMouseEnter={ handleHover( suggestion ) }\n\t\t\t\t\t\taria-selected={ index === selectedIndex }\n\t\t\t\t\t>\n\t\t\t\t\t\t{ output }\n\t\t\t\t\t</li>\n\t\t\t\t);\n\t\t\t\t/* eslint-enable jsx-a11y/click-events-have-key-events */\n\t\t\t} ) }\n\t\t</ul>\n\t);\n}\n\nexport default SuggestionsList;\n"]}
1
+ {"version":3,"sources":["@wordpress/components/src/form-token-field/suggestions-list.tsx"],"names":["handleMouseDown","e","preventDefault","SuggestionsList","selectedIndex","scrollIntoView","match","onHover","onSelect","suggestions","displayTransform","instanceId","__experimentalRenderItem","scrollingIntoView","setScrollingIntoView","listRef","listNode","rafId","children","onlyScrollIfNeeded","requestAnimationFrame","undefined","cancelAnimationFrame","handleHover","suggestion","handleClick","computeSuggestionMatch","matchText","toLocaleLowerCase","length","transformedSuggestion","indexOfMatch","indexOf","suggestionBeforeMatch","substring","suggestionMatch","suggestionAfterMatch","map","index","className","output","item","value"],"mappings":"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","sourcesContent":["/**\n * External dependencies\n */\nimport scrollView from 'dom-scroll-into-view';\nimport classnames from 'classnames';\nimport type { MouseEventHandler, ReactNode } from 'react';\n\n/**\n * WordPress dependencies\n */\nimport { useState } from '@wordpress/element';\nimport { useRefEffect } from '@wordpress/compose';\n\n/**\n * Internal dependencies\n */\nimport type { SuggestionsListProps } from './types';\n\nconst handleMouseDown: MouseEventHandler = ( e ) => {\n\t// By preventing default here, we will not lose focus of <input> when clicking a suggestion.\n\te.preventDefault();\n};\n\nexport function SuggestionsList< T extends string | { value: string } >( {\n\tselectedIndex,\n\tscrollIntoView,\n\tmatch,\n\tonHover,\n\tonSelect,\n\tsuggestions = [],\n\tdisplayTransform,\n\tinstanceId,\n\t__experimentalRenderItem,\n}: SuggestionsListProps< T > ) {\n\tconst [ scrollingIntoView, setScrollingIntoView ] = useState( false );\n\n\tconst listRef = useRefEffect< HTMLUListElement >(\n\t\t( listNode ) => {\n\t\t\t// only have to worry about scrolling selected suggestion into view\n\t\t\t// when already expanded.\n\t\t\tlet rafId: number | undefined;\n\t\t\tif (\n\t\t\t\tselectedIndex > -1 &&\n\t\t\t\tscrollIntoView &&\n\t\t\t\tlistNode.children[ selectedIndex ]\n\t\t\t) {\n\t\t\t\tsetScrollingIntoView( true );\n\t\t\t\tscrollView(\n\t\t\t\t\tlistNode.children[ selectedIndex ] as HTMLLIElement,\n\t\t\t\t\tlistNode,\n\t\t\t\t\t{\n\t\t\t\t\t\tonlyScrollIfNeeded: true,\n\t\t\t\t\t}\n\t\t\t\t);\n\t\t\t\trafId = requestAnimationFrame( () => {\n\t\t\t\t\tsetScrollingIntoView( false );\n\t\t\t\t} );\n\t\t\t}\n\n\t\t\treturn () => {\n\t\t\t\tif ( rafId !== undefined ) {\n\t\t\t\t\tcancelAnimationFrame( rafId );\n\t\t\t\t}\n\t\t\t};\n\t\t},\n\t\t[ selectedIndex, scrollIntoView ]\n\t);\n\n\tconst handleHover = ( suggestion: T ) => {\n\t\treturn () => {\n\t\t\tif ( ! scrollingIntoView ) {\n\t\t\t\tonHover?.( suggestion );\n\t\t\t}\n\t\t};\n\t};\n\n\tconst handleClick = ( suggestion: T ) => {\n\t\treturn () => {\n\t\t\tonSelect?.( suggestion );\n\t\t};\n\t};\n\n\tconst computeSuggestionMatch = ( suggestion: T ) => {\n\t\tconst matchText = displayTransform( match ).toLocaleLowerCase();\n\t\tif ( matchText.length === 0 ) {\n\t\t\treturn null;\n\t\t}\n\n\t\tconst transformedSuggestion = displayTransform( suggestion );\n\t\tconst indexOfMatch = transformedSuggestion\n\t\t\t.toLocaleLowerCase()\n\t\t\t.indexOf( matchText );\n\n\t\treturn {\n\t\t\tsuggestionBeforeMatch: transformedSuggestion.substring(\n\t\t\t\t0,\n\t\t\t\tindexOfMatch\n\t\t\t),\n\t\t\tsuggestionMatch: transformedSuggestion.substring(\n\t\t\t\tindexOfMatch,\n\t\t\t\tindexOfMatch + matchText.length\n\t\t\t),\n\t\t\tsuggestionAfterMatch: transformedSuggestion.substring(\n\t\t\t\tindexOfMatch + matchText.length\n\t\t\t),\n\t\t};\n\t};\n\n\treturn (\n\t\t<ul\n\t\t\tref={ listRef }\n\t\t\tclassName=\"components-form-token-field__suggestions-list\"\n\t\t\tid={ `components-form-token-suggestions-${ instanceId }` }\n\t\t\trole=\"listbox\"\n\t\t>\n\t\t\t{ suggestions.map( ( suggestion, index ) => {\n\t\t\t\tconst matchText = computeSuggestionMatch( suggestion );\n\t\t\t\tconst className = classnames(\n\t\t\t\t\t'components-form-token-field__suggestion',\n\t\t\t\t\t{\n\t\t\t\t\t\t'is-selected': index === selectedIndex,\n\t\t\t\t\t}\n\t\t\t\t);\n\n\t\t\t\tlet output: ReactNode;\n\n\t\t\t\tif ( typeof __experimentalRenderItem === 'function' ) {\n\t\t\t\t\toutput = __experimentalRenderItem( { item: suggestion } );\n\t\t\t\t} else if ( matchText ) {\n\t\t\t\t\toutput = (\n\t\t\t\t\t\t<span aria-label={ displayTransform( suggestion ) }>\n\t\t\t\t\t\t\t{ matchText.suggestionBeforeMatch }\n\t\t\t\t\t\t\t<strong className=\"components-form-token-field__suggestion-match\">\n\t\t\t\t\t\t\t\t{ matchText.suggestionMatch }\n\t\t\t\t\t\t\t</strong>\n\t\t\t\t\t\t\t{ matchText.suggestionAfterMatch }\n\t\t\t\t\t\t</span>\n\t\t\t\t\t);\n\t\t\t\t} else {\n\t\t\t\t\toutput = displayTransform( suggestion );\n\t\t\t\t}\n\n\t\t\t\t/* eslint-disable jsx-a11y/click-events-have-key-events */\n\t\t\t\treturn (\n\t\t\t\t\t<li\n\t\t\t\t\t\tid={ `components-form-token-suggestions-${ instanceId }-${ index }` }\n\t\t\t\t\t\trole=\"option\"\n\t\t\t\t\t\tclassName={ className }\n\t\t\t\t\t\tkey={\n\t\t\t\t\t\t\ttypeof suggestion === 'object' &&\n\t\t\t\t\t\t\t'value' in suggestion\n\t\t\t\t\t\t\t\t? suggestion?.value\n\t\t\t\t\t\t\t\t: displayTransform( suggestion )\n\t\t\t\t\t\t}\n\t\t\t\t\t\tonMouseDown={ handleMouseDown }\n\t\t\t\t\t\tonClick={ handleClick( suggestion ) }\n\t\t\t\t\t\tonMouseEnter={ handleHover( suggestion ) }\n\t\t\t\t\t\taria-selected={ index === selectedIndex }\n\t\t\t\t\t>\n\t\t\t\t\t\t{ output }\n\t\t\t\t\t</li>\n\t\t\t\t);\n\t\t\t\t/* eslint-enable jsx-a11y/click-events-have-key-events */\n\t\t\t} ) }\n\t\t</ul>\n\t);\n}\n\nexport default SuggestionsList;\n"]}
@@ -30,8 +30,11 @@ function UnForwardedTokenInput(props, ref) {
30
30
  selectedSuggestionIndex,
31
31
  className,
32
32
  onChange,
33
+ onFocus,
34
+ onBlur,
33
35
  ...restProps
34
36
  } = props;
37
+ const [hasFocus, setHasFocus] = (0, _element.useState)(false);
35
38
  const size = value ? value.length + 1 : 0;
36
39
 
37
40
  const onChangeHandler = event => {
@@ -42,6 +45,16 @@ function UnForwardedTokenInput(props, ref) {
42
45
  }
43
46
  };
44
47
 
48
+ const onFocusHandler = e => {
49
+ setHasFocus(true);
50
+ onFocus === null || onFocus === void 0 ? void 0 : onFocus(e);
51
+ };
52
+
53
+ const onBlurHandler = e => {
54
+ setHasFocus(false);
55
+ onBlur === null || onBlur === void 0 ? void 0 : onBlur(e);
56
+ };
57
+
45
58
  return (0, _element.createElement)("input", (0, _extends2.default)({
46
59
  ref: ref,
47
60
  id: `components-form-token-input-${instanceId}`,
@@ -49,6 +62,8 @@ function UnForwardedTokenInput(props, ref) {
49
62
  }, restProps, {
50
63
  value: value || '',
51
64
  onChange: onChangeHandler,
65
+ onFocus: onFocusHandler,
66
+ onBlur: onBlurHandler,
52
67
  size: size,
53
68
  className: (0, _classnames.default)(className, 'components-form-token-field__input'),
54
69
  autoComplete: "off",
@@ -56,7 +71,11 @@ function UnForwardedTokenInput(props, ref) {
56
71
  "aria-expanded": isExpanded,
57
72
  "aria-autocomplete": "list",
58
73
  "aria-owns": isExpanded ? `components-form-token-suggestions-${instanceId}` : undefined,
59
- "aria-activedescendant": selectedSuggestionIndex !== -1 ? `components-form-token-suggestions-${instanceId}-${selectedSuggestionIndex}` : undefined,
74
+ "aria-activedescendant": // Only add the `aria-activedescendant` attribute when:
75
+ // - the user is actively interacting with the input (`hasFocus`)
76
+ // - there is a selected suggestion (`selectedSuggestionIndex !== -1`)
77
+ // - the list of suggestions are rendered in the DOM (`isExpanded`)
78
+ hasFocus && selectedSuggestionIndex !== -1 && isExpanded ? `components-form-token-suggestions-${instanceId}-${selectedSuggestionIndex}` : undefined,
60
79
  "aria-describedby": `components-form-token-suggestions-howto-${instanceId}`
61
80
  }));
62
81
  }
@@ -1 +1 @@
1
- {"version":3,"sources":["@wordpress/components/src/form-token-field/token-input.tsx"],"names":["UnForwardedTokenInput","props","ref","value","isExpanded","instanceId","selectedSuggestionIndex","className","onChange","restProps","size","length","onChangeHandler","event","target","undefined","TokenInput"],"mappings":";;;;;;;;;;;AASA;;;;AANA;;AAHA;AACA;AACA;;AAIA;AACA;AACA;AASO,SAASA,qBAAT,CACNC,KADM,EAENC,GAFM,EAGL;AACD,QAAM;AACLC,IAAAA,KADK;AAELC,IAAAA,UAFK;AAGLC,IAAAA,UAHK;AAILC,IAAAA,uBAJK;AAKLC,IAAAA,SALK;AAMLC,IAAAA,QANK;AAOL,OAAGC;AAPE,MAQFR,KARJ;AAUA,QAAMS,IAAI,GAAGP,KAAK,GAAGA,KAAK,CAACQ,MAAN,GAAe,CAAlB,GAAsB,CAAxC;;AAEA,QAAMC,eAAe,GAAKC,KAAF,IAA8C;AACrE,QAAKL,QAAL,EAAgB;AACfA,MAAAA,QAAQ,CAAE;AACTL,QAAAA,KAAK,EAAEU,KAAK,CAACC,MAAN,CAAaX;AADX,OAAF,CAAR;AAGA;AACD,GAND;;AAQA,SACC;AACC,IAAA,GAAG,EAAGD,GADP;AAEC,IAAA,EAAE,EAAI,+BAA+BG,UAAY,EAFlD;AAGC,IAAA,IAAI,EAAC;AAHN,KAIMI,SAJN;AAKC,IAAA,KAAK,EAAGN,KAAK,IAAI,EALlB;AAMC,IAAA,QAAQ,EAAGS,eANZ;AAOC,IAAA,IAAI,EAAGF,IAPR;AAQC,IAAA,SAAS,EAAG,yBACXH,SADW,EAEX,oCAFW,CARb;AAYC,IAAA,YAAY,EAAC,KAZd;AAaC,IAAA,IAAI,EAAC,UAbN;AAcC,qBAAgBH,UAdjB;AAeC,yBAAkB,MAfnB;AAgBC,iBACCA,UAAU,GACN,qCAAqCC,UAAY,EAD3C,GAEPU,SAnBL;AAqBC,6BACCT,uBAAuB,KAAK,CAAC,CAA7B,GACI,qCAAqCD,UAAY,IAAIC,uBAAyB,EADlF,GAEGS,SAxBL;AA0BC,wBAAoB,2CAA2CV,UAAY;AA1B5E,KADD;AA8BA;;AAEM,MAAMW,UAAU,GAAG,yBAAYhB,qBAAZ,CAAnB;;eAEQgB,U","sourcesContent":["/**\n * External dependencies\n */\nimport classnames from 'classnames';\nimport type { ChangeEvent, ForwardedRef } from 'react';\n\n/**\n * WordPress dependencies\n */\nimport { forwardRef } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport type { WordPressComponentProps } from '../ui/context';\nimport type { TokenInputProps } from './types';\n\nexport function UnForwardedTokenInput(\n\tprops: WordPressComponentProps< TokenInputProps, 'input', false >,\n\tref: ForwardedRef< HTMLInputElement >\n) {\n\tconst {\n\t\tvalue,\n\t\tisExpanded,\n\t\tinstanceId,\n\t\tselectedSuggestionIndex,\n\t\tclassName,\n\t\tonChange,\n\t\t...restProps\n\t} = props;\n\n\tconst size = value ? value.length + 1 : 0;\n\n\tconst onChangeHandler = ( event: ChangeEvent< HTMLInputElement > ) => {\n\t\tif ( onChange ) {\n\t\t\tonChange( {\n\t\t\t\tvalue: event.target.value,\n\t\t\t} );\n\t\t}\n\t};\n\n\treturn (\n\t\t<input\n\t\t\tref={ ref }\n\t\t\tid={ `components-form-token-input-${ instanceId }` }\n\t\t\ttype=\"text\"\n\t\t\t{ ...restProps }\n\t\t\tvalue={ value || '' }\n\t\t\tonChange={ onChangeHandler }\n\t\t\tsize={ size }\n\t\t\tclassName={ classnames(\n\t\t\t\tclassName,\n\t\t\t\t'components-form-token-field__input'\n\t\t\t) }\n\t\t\tautoComplete=\"off\"\n\t\t\trole=\"combobox\"\n\t\t\taria-expanded={ isExpanded }\n\t\t\taria-autocomplete=\"list\"\n\t\t\taria-owns={\n\t\t\t\tisExpanded\n\t\t\t\t\t? `components-form-token-suggestions-${ instanceId }`\n\t\t\t\t\t: undefined\n\t\t\t}\n\t\t\taria-activedescendant={\n\t\t\t\tselectedSuggestionIndex !== -1\n\t\t\t\t\t? `components-form-token-suggestions-${ instanceId }-${ selectedSuggestionIndex }`\n\t\t\t\t\t: undefined\n\t\t\t}\n\t\t\taria-describedby={ `components-form-token-suggestions-howto-${ instanceId }` }\n\t\t/>\n\t);\n}\n\nexport const TokenInput = forwardRef( UnForwardedTokenInput );\n\nexport default TokenInput;\n"]}
1
+ {"version":3,"sources":["@wordpress/components/src/form-token-field/token-input.tsx"],"names":["UnForwardedTokenInput","props","ref","value","isExpanded","instanceId","selectedSuggestionIndex","className","onChange","onFocus","onBlur","restProps","hasFocus","setHasFocus","size","length","onChangeHandler","event","target","onFocusHandler","e","onBlurHandler","undefined","TokenInput"],"mappings":";;;;;;;;;;;AASA;;;;AANA;;AAHA;AACA;AACA;;AAIA;AACA;AACA;AASO,SAASA,qBAAT,CACNC,KADM,EAENC,GAFM,EAGL;AACD,QAAM;AACLC,IAAAA,KADK;AAELC,IAAAA,UAFK;AAGLC,IAAAA,UAHK;AAILC,IAAAA,uBAJK;AAKLC,IAAAA,SALK;AAMLC,IAAAA,QANK;AAOLC,IAAAA,OAPK;AAQLC,IAAAA,MARK;AASL,OAAGC;AATE,MAUFV,KAVJ;AAYA,QAAM,CAAEW,QAAF,EAAYC,WAAZ,IAA4B,uBAAU,KAAV,CAAlC;AAEA,QAAMC,IAAI,GAAGX,KAAK,GAAGA,KAAK,CAACY,MAAN,GAAe,CAAlB,GAAsB,CAAxC;;AAEA,QAAMC,eAAe,GAAKC,KAAF,IAA8C;AACrE,QAAKT,QAAL,EAAgB;AACfA,MAAAA,QAAQ,CAAE;AACTL,QAAAA,KAAK,EAAEc,KAAK,CAACC,MAAN,CAAaf;AADX,OAAF,CAAR;AAGA;AACD,GAND;;AAQA,QAAMgB,cAAqD,GAAKC,CAAF,IAAS;AACtEP,IAAAA,WAAW,CAAE,IAAF,CAAX;AACAJ,IAAAA,OAAO,SAAP,IAAAA,OAAO,WAAP,YAAAA,OAAO,CAAIW,CAAJ,CAAP;AACA,GAHD;;AAKA,QAAMC,aAA0D,GAC/DD,CADkE,IAE9D;AACJP,IAAAA,WAAW,CAAE,KAAF,CAAX;AACAH,IAAAA,MAAM,SAAN,IAAAA,MAAM,WAAN,YAAAA,MAAM,CAAIU,CAAJ,CAAN;AACA,GALD;;AAOA,SACC;AACC,IAAA,GAAG,EAAGlB,GADP;AAEC,IAAA,EAAE,EAAI,+BAA+BG,UAAY,EAFlD;AAGC,IAAA,IAAI,EAAC;AAHN,KAIMM,SAJN;AAKC,IAAA,KAAK,EAAGR,KAAK,IAAI,EALlB;AAMC,IAAA,QAAQ,EAAGa,eANZ;AAOC,IAAA,OAAO,EAAGG,cAPX;AAQC,IAAA,MAAM,EAAGE,aARV;AASC,IAAA,IAAI,EAAGP,IATR;AAUC,IAAA,SAAS,EAAG,yBACXP,SADW,EAEX,oCAFW,CAVb;AAcC,IAAA,YAAY,EAAC,KAdd;AAeC,IAAA,IAAI,EAAC,UAfN;AAgBC,qBAAgBH,UAhBjB;AAiBC,yBAAkB,MAjBnB;AAkBC,iBACCA,UAAU,GACN,qCAAqCC,UAAY,EAD3C,GAEPiB,SArBL;AAuBC,6BACC;AACA;AACA;AACA;AACAV,IAAAA,QAAQ,IAAIN,uBAAuB,KAAK,CAAC,CAAzC,IAA8CF,UAA9C,GACI,qCAAqCC,UAAY,IAAIC,uBAAyB,EADlF,GAEGgB,SA9BL;AAgCC,wBAAoB,2CAA2CjB,UAAY;AAhC5E,KADD;AAoCA;;AAEM,MAAMkB,UAAU,GAAG,yBAAYvB,qBAAZ,CAAnB;;eAEQuB,U","sourcesContent":["/**\n * External dependencies\n */\nimport classnames from 'classnames';\nimport type { ChangeEvent, ForwardedRef, FocusEventHandler } from 'react';\n\n/**\n * WordPress dependencies\n */\nimport { forwardRef, useState } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport type { WordPressComponentProps } from '../ui/context';\nimport type { TokenInputProps } from './types';\n\nexport function UnForwardedTokenInput(\n\tprops: WordPressComponentProps< TokenInputProps, 'input', false >,\n\tref: ForwardedRef< HTMLInputElement >\n) {\n\tconst {\n\t\tvalue,\n\t\tisExpanded,\n\t\tinstanceId,\n\t\tselectedSuggestionIndex,\n\t\tclassName,\n\t\tonChange,\n\t\tonFocus,\n\t\tonBlur,\n\t\t...restProps\n\t} = props;\n\n\tconst [ hasFocus, setHasFocus ] = useState( false );\n\n\tconst size = value ? value.length + 1 : 0;\n\n\tconst onChangeHandler = ( event: ChangeEvent< HTMLInputElement > ) => {\n\t\tif ( onChange ) {\n\t\t\tonChange( {\n\t\t\t\tvalue: event.target.value,\n\t\t\t} );\n\t\t}\n\t};\n\n\tconst onFocusHandler: FocusEventHandler< HTMLInputElement > = ( e ) => {\n\t\tsetHasFocus( true );\n\t\tonFocus?.( e );\n\t};\n\n\tconst onBlurHandler: React.FocusEventHandler< HTMLInputElement > = (\n\t\te\n\t) => {\n\t\tsetHasFocus( false );\n\t\tonBlur?.( e );\n\t};\n\n\treturn (\n\t\t<input\n\t\t\tref={ ref }\n\t\t\tid={ `components-form-token-input-${ instanceId }` }\n\t\t\ttype=\"text\"\n\t\t\t{ ...restProps }\n\t\t\tvalue={ value || '' }\n\t\t\tonChange={ onChangeHandler }\n\t\t\tonFocus={ onFocusHandler }\n\t\t\tonBlur={ onBlurHandler }\n\t\t\tsize={ size }\n\t\t\tclassName={ classnames(\n\t\t\t\tclassName,\n\t\t\t\t'components-form-token-field__input'\n\t\t\t) }\n\t\t\tautoComplete=\"off\"\n\t\t\trole=\"combobox\"\n\t\t\taria-expanded={ isExpanded }\n\t\t\taria-autocomplete=\"list\"\n\t\t\taria-owns={\n\t\t\t\tisExpanded\n\t\t\t\t\t? `components-form-token-suggestions-${ instanceId }`\n\t\t\t\t\t: undefined\n\t\t\t}\n\t\t\taria-activedescendant={\n\t\t\t\t// Only add the `aria-activedescendant` attribute when:\n\t\t\t\t// - the user is actively interacting with the input (`hasFocus`)\n\t\t\t\t// - there is a selected suggestion (`selectedSuggestionIndex !== -1`)\n\t\t\t\t// - the list of suggestions are rendered in the DOM (`isExpanded`)\n\t\t\t\thasFocus && selectedSuggestionIndex !== -1 && isExpanded\n\t\t\t\t\t? `components-form-token-suggestions-${ instanceId }-${ selectedSuggestionIndex }`\n\t\t\t\t\t: undefined\n\t\t\t}\n\t\t\taria-describedby={ `components-form-token-suggestions-howto-${ instanceId }` }\n\t\t/>\n\t);\n}\n\nexport const TokenInput = forwardRef( UnForwardedTokenInput );\n\nexport default TokenInput;\n"]}
@@ -62,7 +62,7 @@ var _default = mapNodeToProps => (0, _compose.createHigherOrderComponent)(Wrappe
62
62
  if (!(0, _lodash.isEqual)(newFallbackStyles, fallbackStyles)) {
63
63
  this.setState({
64
64
  fallbackStyles: newFallbackStyles,
65
- grabStylesCompleted: !!(0, _lodash.every)(newFallbackStyles)
65
+ grabStylesCompleted: Object.values(newFallbackStyles).every(Boolean)
66
66
  });
67
67
  }
68
68
  }
@@ -1 +1 @@
1
- {"version":3,"sources":["@wordpress/components/src/higher-order/with-fallback-styles/index.js"],"names":["mapNodeToProps","WrappedComponent","Component","constructor","arguments","nodeRef","props","node","state","fallbackStyles","undefined","grabStylesCompleted","bindRef","bind","componentDidMount","grabFallbackStyles","componentDidUpdate","newFallbackStyles","setState","render","wrappedComponent"],"mappings":";;;;;;;;;AAQA;;;;AALA;;AAMA;;AATA;AACA;AACA;;AAGA;AACA;AACA;eAIiBA,cAAF,IACd,yCAA8BC,gBAAF,IAAwB;AACnD,SAAO,cAAcC,kBAAd,CAAwB;AAC9BC,IAAAA,WAAW,GAAG;AACb,YAAO,GAAGC,SAAV;AACA,WAAKC,OAAL,GAAe,KAAKC,KAAL,CAAWC,IAA1B;AACA,WAAKC,KAAL,GAAa;AACZC,QAAAA,cAAc,EAAEC,SADJ;AAEZC,QAAAA,mBAAmB,EAAE;AAFT,OAAb;AAKA,WAAKC,OAAL,GAAe,KAAKA,OAAL,CAAaC,IAAb,CAAmB,IAAnB,CAAf;AACA;;AAEDD,IAAAA,OAAO,CAAEL,IAAF,EAAS;AACf,UAAK,CAAEA,IAAP,EAAc;AACb;AACA;;AACD,WAAKF,OAAL,GAAeE,IAAf;AACA;;AAEDO,IAAAA,iBAAiB,GAAG;AACnB,WAAKC,kBAAL;AACA;;AAEDC,IAAAA,kBAAkB,GAAG;AACpB,WAAKD,kBAAL;AACA;;AAEDA,IAAAA,kBAAkB,GAAG;AACpB,YAAM;AAAEJ,QAAAA,mBAAF;AAAuBF,QAAAA;AAAvB,UAA0C,KAAKD,KAArD;;AACA,UAAK,KAAKH,OAAL,IAAgB,CAAEM,mBAAvB,EAA6C;AAC5C,cAAMM,iBAAiB,GAAGjB,cAAc,CACvC,KAAKK,OADkC,EAEvC,KAAKC,KAFkC,CAAxC;;AAIA,YAAK,CAAE,qBAASW,iBAAT,EAA4BR,cAA5B,CAAP,EAAsD;AACrD,eAAKS,QAAL,CAAe;AACdT,YAAAA,cAAc,EAAEQ,iBADF;AAEdN,YAAAA,mBAAmB,EAAE,CAAC,CAAE,mBAAOM,iBAAP;AAFV,WAAf;AAIA;AACD;AACD;;AAEDE,IAAAA,MAAM,GAAG;AACR,YAAMC,gBAAgB,GACrB,4BAAC,gBAAD,6BACM,KAAKd,KADX,EAEM,KAAKE,KAAL,CAAWC,cAFjB,EADD;AAMA,aAAO,KAAKH,KAAL,CAAWC,IAAX,GACNa,gBADM,GAGN;AAAK,QAAA,GAAG,EAAG,KAAKR;AAAhB,cAA6BQ,gBAA7B,MAHD;AAKA;;AAvD6B,GAA/B;AAyDA,CA1DD,EA0DG,oBA1DH,C","sourcesContent":["/**\n * External dependencies\n */\nimport { every, isEqual } from 'lodash';\n\n/**\n * WordPress dependencies\n */\nimport { Component } from '@wordpress/element';\nimport { createHigherOrderComponent } from '@wordpress/compose';\n\nexport default ( mapNodeToProps ) =>\n\tcreateHigherOrderComponent( ( WrappedComponent ) => {\n\t\treturn class extends Component {\n\t\t\tconstructor() {\n\t\t\t\tsuper( ...arguments );\n\t\t\t\tthis.nodeRef = this.props.node;\n\t\t\t\tthis.state = {\n\t\t\t\t\tfallbackStyles: undefined,\n\t\t\t\t\tgrabStylesCompleted: false,\n\t\t\t\t};\n\n\t\t\t\tthis.bindRef = this.bindRef.bind( this );\n\t\t\t}\n\n\t\t\tbindRef( node ) {\n\t\t\t\tif ( ! node ) {\n\t\t\t\t\treturn;\n\t\t\t\t}\n\t\t\t\tthis.nodeRef = node;\n\t\t\t}\n\n\t\t\tcomponentDidMount() {\n\t\t\t\tthis.grabFallbackStyles();\n\t\t\t}\n\n\t\t\tcomponentDidUpdate() {\n\t\t\t\tthis.grabFallbackStyles();\n\t\t\t}\n\n\t\t\tgrabFallbackStyles() {\n\t\t\t\tconst { grabStylesCompleted, fallbackStyles } = this.state;\n\t\t\t\tif ( this.nodeRef && ! grabStylesCompleted ) {\n\t\t\t\t\tconst newFallbackStyles = mapNodeToProps(\n\t\t\t\t\t\tthis.nodeRef,\n\t\t\t\t\t\tthis.props\n\t\t\t\t\t);\n\t\t\t\t\tif ( ! isEqual( newFallbackStyles, fallbackStyles ) ) {\n\t\t\t\t\t\tthis.setState( {\n\t\t\t\t\t\t\tfallbackStyles: newFallbackStyles,\n\t\t\t\t\t\t\tgrabStylesCompleted: !! every( newFallbackStyles ),\n\t\t\t\t\t\t} );\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t}\n\n\t\t\trender() {\n\t\t\t\tconst wrappedComponent = (\n\t\t\t\t\t<WrappedComponent\n\t\t\t\t\t\t{ ...this.props }\n\t\t\t\t\t\t{ ...this.state.fallbackStyles }\n\t\t\t\t\t/>\n\t\t\t\t);\n\t\t\t\treturn this.props.node ? (\n\t\t\t\t\twrappedComponent\n\t\t\t\t) : (\n\t\t\t\t\t<div ref={ this.bindRef }> { wrappedComponent } </div>\n\t\t\t\t);\n\t\t\t}\n\t\t};\n\t}, 'withFallbackStyles' );\n"]}
1
+ {"version":3,"sources":["@wordpress/components/src/higher-order/with-fallback-styles/index.js"],"names":["mapNodeToProps","WrappedComponent","Component","constructor","arguments","nodeRef","props","node","state","fallbackStyles","undefined","grabStylesCompleted","bindRef","bind","componentDidMount","grabFallbackStyles","componentDidUpdate","newFallbackStyles","setState","Object","values","every","Boolean","render","wrappedComponent"],"mappings":";;;;;;;;;AAQA;;;;AALA;;AAMA;;AATA;AACA;AACA;;AAGA;AACA;AACA;eAIiBA,cAAF,IACd,yCAA8BC,gBAAF,IAAwB;AACnD,SAAO,cAAcC,kBAAd,CAAwB;AAC9BC,IAAAA,WAAW,GAAG;AACb,YAAO,GAAGC,SAAV;AACA,WAAKC,OAAL,GAAe,KAAKC,KAAL,CAAWC,IAA1B;AACA,WAAKC,KAAL,GAAa;AACZC,QAAAA,cAAc,EAAEC,SADJ;AAEZC,QAAAA,mBAAmB,EAAE;AAFT,OAAb;AAKA,WAAKC,OAAL,GAAe,KAAKA,OAAL,CAAaC,IAAb,CAAmB,IAAnB,CAAf;AACA;;AAEDD,IAAAA,OAAO,CAAEL,IAAF,EAAS;AACf,UAAK,CAAEA,IAAP,EAAc;AACb;AACA;;AACD,WAAKF,OAAL,GAAeE,IAAf;AACA;;AAEDO,IAAAA,iBAAiB,GAAG;AACnB,WAAKC,kBAAL;AACA;;AAEDC,IAAAA,kBAAkB,GAAG;AACpB,WAAKD,kBAAL;AACA;;AAEDA,IAAAA,kBAAkB,GAAG;AACpB,YAAM;AAAEJ,QAAAA,mBAAF;AAAuBF,QAAAA;AAAvB,UAA0C,KAAKD,KAArD;;AACA,UAAK,KAAKH,OAAL,IAAgB,CAAEM,mBAAvB,EAA6C;AAC5C,cAAMM,iBAAiB,GAAGjB,cAAc,CACvC,KAAKK,OADkC,EAEvC,KAAKC,KAFkC,CAAxC;;AAKA,YAAK,CAAE,qBAASW,iBAAT,EAA4BR,cAA5B,CAAP,EAAsD;AACrD,eAAKS,QAAL,CAAe;AACdT,YAAAA,cAAc,EAAEQ,iBADF;AAEdN,YAAAA,mBAAmB,EAClBQ,MAAM,CAACC,MAAP,CAAeH,iBAAf,EAAmCI,KAAnC,CACCC,OADD;AAHa,WAAf;AAOA;AACD;AACD;;AAEDC,IAAAA,MAAM,GAAG;AACR,YAAMC,gBAAgB,GACrB,4BAAC,gBAAD,6BACM,KAAKlB,KADX,EAEM,KAAKE,KAAL,CAAWC,cAFjB,EADD;AAMA,aAAO,KAAKH,KAAL,CAAWC,IAAX,GACNiB,gBADM,GAGN;AAAK,QAAA,GAAG,EAAG,KAAKZ;AAAhB,cAA6BY,gBAA7B,MAHD;AAKA;;AA3D6B,GAA/B;AA6DA,CA9DD,EA8DG,oBA9DH,C","sourcesContent":["/**\n * External dependencies\n */\nimport { isEqual } from 'lodash';\n\n/**\n * WordPress dependencies\n */\nimport { Component } from '@wordpress/element';\nimport { createHigherOrderComponent } from '@wordpress/compose';\n\nexport default ( mapNodeToProps ) =>\n\tcreateHigherOrderComponent( ( WrappedComponent ) => {\n\t\treturn class extends Component {\n\t\t\tconstructor() {\n\t\t\t\tsuper( ...arguments );\n\t\t\t\tthis.nodeRef = this.props.node;\n\t\t\t\tthis.state = {\n\t\t\t\t\tfallbackStyles: undefined,\n\t\t\t\t\tgrabStylesCompleted: false,\n\t\t\t\t};\n\n\t\t\t\tthis.bindRef = this.bindRef.bind( this );\n\t\t\t}\n\n\t\t\tbindRef( node ) {\n\t\t\t\tif ( ! node ) {\n\t\t\t\t\treturn;\n\t\t\t\t}\n\t\t\t\tthis.nodeRef = node;\n\t\t\t}\n\n\t\t\tcomponentDidMount() {\n\t\t\t\tthis.grabFallbackStyles();\n\t\t\t}\n\n\t\t\tcomponentDidUpdate() {\n\t\t\t\tthis.grabFallbackStyles();\n\t\t\t}\n\n\t\t\tgrabFallbackStyles() {\n\t\t\t\tconst { grabStylesCompleted, fallbackStyles } = this.state;\n\t\t\t\tif ( this.nodeRef && ! grabStylesCompleted ) {\n\t\t\t\t\tconst newFallbackStyles = mapNodeToProps(\n\t\t\t\t\t\tthis.nodeRef,\n\t\t\t\t\t\tthis.props\n\t\t\t\t\t);\n\n\t\t\t\t\tif ( ! isEqual( newFallbackStyles, fallbackStyles ) ) {\n\t\t\t\t\t\tthis.setState( {\n\t\t\t\t\t\t\tfallbackStyles: newFallbackStyles,\n\t\t\t\t\t\t\tgrabStylesCompleted:\n\t\t\t\t\t\t\t\tObject.values( newFallbackStyles ).every(\n\t\t\t\t\t\t\t\t\tBoolean\n\t\t\t\t\t\t\t\t),\n\t\t\t\t\t\t} );\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t}\n\n\t\t\trender() {\n\t\t\t\tconst wrappedComponent = (\n\t\t\t\t\t<WrappedComponent\n\t\t\t\t\t\t{ ...this.props }\n\t\t\t\t\t\t{ ...this.state.fallbackStyles }\n\t\t\t\t\t/>\n\t\t\t\t);\n\t\t\t\treturn this.props.node ? (\n\t\t\t\t\twrappedComponent\n\t\t\t\t) : (\n\t\t\t\t\t<div ref={ this.bindRef }> { wrappedComponent } </div>\n\t\t\t\t);\n\t\t\t}\n\t\t};\n\t}, 'withFallbackStyles' );\n"]}
package/build/index.js CHANGED
@@ -851,6 +851,12 @@ Object.defineProperty(exports, "__experimentalText", {
851
851
  return _text.Text;
852
852
  }
853
853
  });
854
+ Object.defineProperty(exports, "__experimentalTheme", {
855
+ enumerable: true,
856
+ get: function () {
857
+ return _theme.default;
858
+ }
859
+ });
854
860
  Object.defineProperty(exports, "__experimentalToggleGroupControl", {
855
861
  enumerable: true,
856
862
  get: function () {
@@ -947,6 +953,12 @@ Object.defineProperty(exports, "__experimentalUseSlot", {
947
953
  return _slotFill.useSlot;
948
954
  }
949
955
  });
956
+ Object.defineProperty(exports, "__experimentalUseSlotFills", {
957
+ enumerable: true,
958
+ get: function () {
959
+ return _slotFill.useSlotFills;
960
+ }
961
+ });
950
962
  Object.defineProperty(exports, "__experimentalVStack", {
951
963
  enumerable: true,
952
964
  get: function () {
@@ -965,12 +977,6 @@ Object.defineProperty(exports, "__experimentalZStack", {
965
977
  return _zStack.ZStack;
966
978
  }
967
979
  });
968
- Object.defineProperty(exports, "__unstableAnimatePresence", {
969
- enumerable: true,
970
- get: function () {
971
- return _animation.__unstableAnimatePresence;
972
- }
973
- });
974
980
  Object.defineProperty(exports, "__unstableComposite", {
975
981
  enumerable: true,
976
982
  get: function () {
@@ -1282,6 +1288,8 @@ var _textareaControl = _interopRequireDefault(require("./textarea-control"));
1282
1288
 
1283
1289
  var _textHighlight = _interopRequireDefault(require("./text-highlight"));
1284
1290
 
1291
+ var _theme = _interopRequireDefault(require("./theme"));
1292
+
1285
1293
  var _tip = _interopRequireDefault(require("./tip"));
1286
1294
 
1287
1295
  var _toggleControl = _interopRequireDefault(require("./toggle-control"));
@@ -1 +1 @@
1
- {"version":3,"sources":["@wordpress/components/src/index.js"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AACA;;AAYA;;AACA;;AAIA;;AACA;;AACA;;AAIA;;AACA;;AAMA;;AACA;;AAIA;;AACA;;AACA;;AAQA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AAMA;;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;;AAIA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AAOA;;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;;AAKA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AAKA;;AACA;;AAMA;;AACA;;AACA;;AAKA;;AACA;;AACA;;AACA;;AACA;;AAOA;;AACA;;AAGA;;AAIA;;AACA;;AACA;;AACA;;AACA;;AAIA;;AACA","sourcesContent":["// Primitives.\nexport {\n\tSVG,\n\tPath,\n\tCircle,\n\tPolygon,\n\tRect,\n\tG,\n\tHorizontalRule,\n\tBlockQuotation,\n} from '@wordpress/primitives';\n\n// Components.\nexport { default as __experimentalAlignmentMatrixControl } from './alignment-matrix-control';\nexport {\n\tdefault as Animate,\n\tgetAnimateClassName as __unstableGetAnimateClassName,\n} from './animate';\nexport { __unstableMotion, __unstableAnimatePresence } from './animation';\nexport { default as AnglePickerControl } from './angle-picker-control';\nexport {\n\tdefault as Autocomplete,\n\tuseAutocompleteProps as __unstableUseAutocompleteProps,\n} from './autocomplete';\nexport { default as BaseControl } from './base-control';\nexport {\n\tBorderBoxControl as __experimentalBorderBoxControl,\n\thasSplitBorders as __experimentalHasSplitBorders,\n\tisDefinedBorder as __experimentalIsDefinedBorder,\n\tisEmptyBorder as __experimentalIsEmptyBorder,\n} from './border-box-control';\nexport { BorderControl as __experimentalBorderControl } from './border-control';\nexport {\n\tdefault as __experimentalBoxControl,\n\tapplyValueToSides as __experimentalApplyValueToSides,\n} from './box-control';\nexport { default as Button } from './button';\nexport { default as ButtonGroup } from './button-group';\nexport {\n\tCard,\n\tCardBody,\n\tCardDivider,\n\tCardFooter,\n\tCardHeader,\n\tCardMedia,\n} from './card';\nexport { default as CheckboxControl } from './checkbox-control';\nexport { default as ClipboardButton } from './clipboard-button';\nexport { default as __experimentalPaletteEdit } from './palette-edit';\nexport { default as ColorIndicator } from './color-indicator';\nexport { default as ColorPalette } from './color-palette';\nexport { ColorPicker } from './color-picker';\nexport { default as ComboboxControl } from './combobox-control';\nexport {\n\tComposite as __unstableComposite,\n\tCompositeGroup as __unstableCompositeGroup,\n\tCompositeItem as __unstableCompositeItem,\n\tuseCompositeState as __unstableUseCompositeState,\n} from './composite';\nexport { ConfirmDialog as __experimentalConfirmDialog } from './confirm-dialog';\nexport { default as CustomSelectControl } from './custom-select-control';\nexport { default as Dashicon } from './dashicon';\nexport { default as DateTimePicker, DatePicker, TimePicker } from './date-time';\nexport { default as __experimentalDimensionControl } from './dimension-control';\nexport { default as Disabled } from './disabled';\nexport { DisclosureContent as __unstableDisclosureContent } from './disclosure';\nexport { Divider as __experimentalDivider } from './divider';\nexport { default as Draggable } from './draggable';\nexport { default as DropZone } from './drop-zone';\nexport { default as DropZoneProvider } from './drop-zone/provider';\nexport { default as Dropdown } from './dropdown';\nexport { default as __experimentalDropdownContentWrapper } from './dropdown/dropdown-content-wrapper';\nexport { default as DropdownMenu } from './dropdown-menu';\nexport { DuotoneSwatch, DuotonePicker } from './duotone-picker';\nexport { Elevation as __experimentalElevation } from './elevation';\nexport { default as ExternalLink } from './external-link';\nexport { Flex, FlexBlock, FlexItem } from './flex';\nexport { default as FocalPointPicker } from './focal-point-picker';\nexport { default as FocusableIframe } from './focusable-iframe';\nexport { default as FontSizePicker } from './font-size-picker';\nexport { default as FormFileUpload } from './form-file-upload';\nexport { default as FormToggle } from './form-toggle';\nexport { default as FormTokenField } from './form-token-field';\nexport { default as GradientPicker } from './gradient-picker';\nexport { default as CustomGradientPicker } from './custom-gradient-picker';\nexport { Grid as __experimentalGrid } from './grid';\nexport { default as Guide } from './guide';\nexport { default as GuidePage } from './guide/page';\nexport { Heading as __experimentalHeading } from './heading';\nexport { HStack as __experimentalHStack } from './h-stack';\nexport { default as Icon } from './icon';\nexport { default as IconButton } from './button/deprecated';\nexport {\n\tItemGroup as __experimentalItemGroup,\n\tItem as __experimentalItem,\n} from './item-group';\nexport { default as __experimentalInputControl } from './input-control';\nexport { default as __experimentalInputControlPrefixWrapper } from './input-control/input-prefix-wrapper';\nexport { default as __experimentalInputControlSuffixWrapper } from './input-control/input-suffix-wrapper';\nexport { default as KeyboardShortcuts } from './keyboard-shortcuts';\nexport { default as MenuGroup } from './menu-group';\nexport { default as MenuItem } from './menu-item';\nexport { default as MenuItemsChoice } from './menu-items-choice';\nexport { default as Modal } from './modal';\nexport { default as ScrollLock } from './scroll-lock';\nexport { NavigableMenu, TabbableContainer } from './navigable-container';\nexport { default as __experimentalNavigation } from './navigation';\nexport { default as __experimentalNavigationBackButton } from './navigation/back-button';\nexport { default as __experimentalNavigationGroup } from './navigation/group';\nexport { default as __experimentalNavigationItem } from './navigation/item';\nexport { default as __experimentalNavigationMenu } from './navigation/menu';\nexport {\n\tNavigatorProvider as __experimentalNavigatorProvider,\n\tNavigatorScreen as __experimentalNavigatorScreen,\n\tNavigatorButton as __experimentalNavigatorButton,\n\tNavigatorBackButton as __experimentalNavigatorBackButton,\n\tuseNavigator as __experimentalUseNavigator,\n} from './navigator';\nexport { default as Notice } from './notice';\nexport { default as __experimentalNumberControl } from './number-control';\nexport { default as NoticeList } from './notice/list';\nexport { default as Panel } from './panel';\nexport { default as PanelBody } from './panel/body';\nexport { default as PanelHeader } from './panel/header';\nexport { default as PanelRow } from './panel/row';\nexport { default as Placeholder } from './placeholder';\nexport { default as Popover } from './popover';\nexport { default as QueryControls } from './query-controls';\nexport { default as __experimentalRadio } from './radio';\nexport { default as __experimentalRadioGroup } from './radio-group';\nexport { default as RadioControl } from './radio-control';\nexport { default as RangeControl } from './range-control';\nexport { default as ResizableBox } from './resizable-box';\nexport { default as ResponsiveWrapper } from './responsive-wrapper';\nexport { default as SandBox } from './sandbox';\nexport { default as SearchControl } from './search-control';\nexport { default as SelectControl } from './select-control';\nexport { default as Snackbar } from './snackbar';\nexport { default as SnackbarList } from './snackbar/list';\nexport { Spacer as __experimentalSpacer } from './spacer';\nexport { Scrollable as __experimentalScrollable } from './scrollable';\nexport { default as Spinner } from './spinner';\nexport { Surface as __experimentalSurface } from './surface';\nexport { default as TabPanel } from './tab-panel';\nexport { Text as __experimentalText } from './text';\nexport { default as TextControl } from './text-control';\nexport { default as TextareaControl } from './textarea-control';\nexport { default as TextHighlight } from './text-highlight';\nexport { default as Tip } from './tip';\nexport { default as ToggleControl } from './toggle-control';\nexport {\n\tToggleGroupControl as __experimentalToggleGroupControl,\n\tToggleGroupControlOption as __experimentalToggleGroupControlOption,\n\tToggleGroupControlOptionIcon as __experimentalToggleGroupControlOptionIcon,\n} from './toggle-group-control';\nexport { default as Toolbar } from './toolbar';\nexport { default as ToolbarButton } from './toolbar-button';\nexport { default as ToolbarDropdownMenu } from './toolbar-dropdown-menu';\nexport { default as __experimentalToolbarContext } from './toolbar-context';\nexport { default as ToolbarGroup } from './toolbar-group';\nexport { default as ToolbarItem } from './toolbar-item';\nexport {\n\tToolsPanel as __experimentalToolsPanel,\n\tToolsPanelItem as __experimentalToolsPanelItem,\n\tToolsPanelContext as __experimentalToolsPanelContext,\n} from './tools-panel';\nexport { default as Tooltip } from './tooltip';\nexport {\n\tdefault as __experimentalTreeGrid,\n\tTreeGridRow as __experimentalTreeGridRow,\n\tTreeGridCell as __experimentalTreeGridCell,\n\tTreeGridItem as __experimentalTreeGridItem,\n} from './tree-grid';\nexport { default as TreeSelect } from './tree-select';\nexport { Truncate as __experimentalTruncate } from './truncate';\nexport {\n\tdefault as __experimentalUnitControl,\n\tuseCustomUnits as __experimentalUseCustomUnits,\n\tparseQuantityAndUnitFromRawValue as __experimentalParseQuantityAndUnitFromRawValue,\n} from './unit-control';\nexport { View as __experimentalView } from './view';\nexport { VisuallyHidden } from './visually-hidden';\nexport { VStack as __experimentalVStack } from './v-stack';\nexport { default as IsolatedEventContainer } from './isolated-event-container';\nexport {\n\tcreateSlotFill,\n\tSlot,\n\tFill,\n\tProvider as SlotFillProvider,\n\tuseSlot as __experimentalUseSlot,\n} from './slot-fill';\nexport { default as __experimentalStyleProvider } from './style-provider';\nexport { ZStack as __experimentalZStack } from './z-stack';\n\n// Higher-Order Components.\nexport {\n\tdefault as navigateRegions,\n\tuseNavigateRegions as __unstableUseNavigateRegions,\n} from './higher-order/navigate-regions';\nexport { default as withConstrainedTabbing } from './higher-order/with-constrained-tabbing';\nexport { default as withFallbackStyles } from './higher-order/with-fallback-styles';\nexport { default as withFilters } from './higher-order/with-filters';\nexport { default as withFocusOutside } from './higher-order/with-focus-outside';\nexport {\n\tdefault as withFocusReturn,\n\tProvider as FocusReturnProvider,\n} from './higher-order/with-focus-return';\nexport { default as withNotices } from './higher-order/with-notices';\nexport { default as withSpokenMessages } from './higher-order/with-spoken-messages';\n"]}
1
+ {"version":3,"sources":["@wordpress/components/src/index.js"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AACA;;AAYA;;AACA;;AAIA;;AACA;;AACA;;AAIA;;AACA;;AAMA;;AACA;;AAIA;;AACA;;AACA;;AAQA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AAMA;;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;;AAIA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AAOA;;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;;AAKA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AAKA;;AACA;;AAMA;;AACA;;AACA;;AAKA;;AACA;;AACA;;AACA;;AACA;;AAQA;;AACA;;AAGA;;AAIA;;AACA;;AACA;;AACA;;AACA;;AAIA;;AACA","sourcesContent":["// Primitives.\nexport {\n\tSVG,\n\tPath,\n\tCircle,\n\tPolygon,\n\tRect,\n\tG,\n\tHorizontalRule,\n\tBlockQuotation,\n} from '@wordpress/primitives';\n\n// Components.\nexport { default as __experimentalAlignmentMatrixControl } from './alignment-matrix-control';\nexport {\n\tdefault as Animate,\n\tgetAnimateClassName as __unstableGetAnimateClassName,\n} from './animate';\nexport { __unstableMotion } from './animation';\nexport { default as AnglePickerControl } from './angle-picker-control';\nexport {\n\tdefault as Autocomplete,\n\tuseAutocompleteProps as __unstableUseAutocompleteProps,\n} from './autocomplete';\nexport { default as BaseControl } from './base-control';\nexport {\n\tBorderBoxControl as __experimentalBorderBoxControl,\n\thasSplitBorders as __experimentalHasSplitBorders,\n\tisDefinedBorder as __experimentalIsDefinedBorder,\n\tisEmptyBorder as __experimentalIsEmptyBorder,\n} from './border-box-control';\nexport { BorderControl as __experimentalBorderControl } from './border-control';\nexport {\n\tdefault as __experimentalBoxControl,\n\tapplyValueToSides as __experimentalApplyValueToSides,\n} from './box-control';\nexport { default as Button } from './button';\nexport { default as ButtonGroup } from './button-group';\nexport {\n\tCard,\n\tCardBody,\n\tCardDivider,\n\tCardFooter,\n\tCardHeader,\n\tCardMedia,\n} from './card';\nexport { default as CheckboxControl } from './checkbox-control';\nexport { default as ClipboardButton } from './clipboard-button';\nexport { default as __experimentalPaletteEdit } from './palette-edit';\nexport { default as ColorIndicator } from './color-indicator';\nexport { default as ColorPalette } from './color-palette';\nexport { ColorPicker } from './color-picker';\nexport { default as ComboboxControl } from './combobox-control';\nexport {\n\tComposite as __unstableComposite,\n\tCompositeGroup as __unstableCompositeGroup,\n\tCompositeItem as __unstableCompositeItem,\n\tuseCompositeState as __unstableUseCompositeState,\n} from './composite';\nexport { ConfirmDialog as __experimentalConfirmDialog } from './confirm-dialog';\nexport { default as CustomSelectControl } from './custom-select-control';\nexport { default as Dashicon } from './dashicon';\nexport { default as DateTimePicker, DatePicker, TimePicker } from './date-time';\nexport { default as __experimentalDimensionControl } from './dimension-control';\nexport { default as Disabled } from './disabled';\nexport { DisclosureContent as __unstableDisclosureContent } from './disclosure';\nexport { Divider as __experimentalDivider } from './divider';\nexport { default as Draggable } from './draggable';\nexport { default as DropZone } from './drop-zone';\nexport { default as DropZoneProvider } from './drop-zone/provider';\nexport { default as Dropdown } from './dropdown';\nexport { default as __experimentalDropdownContentWrapper } from './dropdown/dropdown-content-wrapper';\nexport { default as DropdownMenu } from './dropdown-menu';\nexport { DuotoneSwatch, DuotonePicker } from './duotone-picker';\nexport { Elevation as __experimentalElevation } from './elevation';\nexport { default as ExternalLink } from './external-link';\nexport { Flex, FlexBlock, FlexItem } from './flex';\nexport { default as FocalPointPicker } from './focal-point-picker';\nexport { default as FocusableIframe } from './focusable-iframe';\nexport { default as FontSizePicker } from './font-size-picker';\nexport { default as FormFileUpload } from './form-file-upload';\nexport { default as FormToggle } from './form-toggle';\nexport { default as FormTokenField } from './form-token-field';\nexport { default as GradientPicker } from './gradient-picker';\nexport { default as CustomGradientPicker } from './custom-gradient-picker';\nexport { Grid as __experimentalGrid } from './grid';\nexport { default as Guide } from './guide';\nexport { default as GuidePage } from './guide/page';\nexport { Heading as __experimentalHeading } from './heading';\nexport { HStack as __experimentalHStack } from './h-stack';\nexport { default as Icon } from './icon';\nexport { default as IconButton } from './button/deprecated';\nexport {\n\tItemGroup as __experimentalItemGroup,\n\tItem as __experimentalItem,\n} from './item-group';\nexport { default as __experimentalInputControl } from './input-control';\nexport { default as __experimentalInputControlPrefixWrapper } from './input-control/input-prefix-wrapper';\nexport { default as __experimentalInputControlSuffixWrapper } from './input-control/input-suffix-wrapper';\nexport { default as KeyboardShortcuts } from './keyboard-shortcuts';\nexport { default as MenuGroup } from './menu-group';\nexport { default as MenuItem } from './menu-item';\nexport { default as MenuItemsChoice } from './menu-items-choice';\nexport { default as Modal } from './modal';\nexport { default as ScrollLock } from './scroll-lock';\nexport { NavigableMenu, TabbableContainer } from './navigable-container';\nexport { default as __experimentalNavigation } from './navigation';\nexport { default as __experimentalNavigationBackButton } from './navigation/back-button';\nexport { default as __experimentalNavigationGroup } from './navigation/group';\nexport { default as __experimentalNavigationItem } from './navigation/item';\nexport { default as __experimentalNavigationMenu } from './navigation/menu';\nexport {\n\tNavigatorProvider as __experimentalNavigatorProvider,\n\tNavigatorScreen as __experimentalNavigatorScreen,\n\tNavigatorButton as __experimentalNavigatorButton,\n\tNavigatorBackButton as __experimentalNavigatorBackButton,\n\tuseNavigator as __experimentalUseNavigator,\n} from './navigator';\nexport { default as Notice } from './notice';\nexport { default as __experimentalNumberControl } from './number-control';\nexport { default as NoticeList } from './notice/list';\nexport { default as Panel } from './panel';\nexport { default as PanelBody } from './panel/body';\nexport { default as PanelHeader } from './panel/header';\nexport { default as PanelRow } from './panel/row';\nexport { default as Placeholder } from './placeholder';\nexport { default as Popover } from './popover';\nexport { default as QueryControls } from './query-controls';\nexport { default as __experimentalRadio } from './radio';\nexport { default as __experimentalRadioGroup } from './radio-group';\nexport { default as RadioControl } from './radio-control';\nexport { default as RangeControl } from './range-control';\nexport { default as ResizableBox } from './resizable-box';\nexport { default as ResponsiveWrapper } from './responsive-wrapper';\nexport { default as SandBox } from './sandbox';\nexport { default as SearchControl } from './search-control';\nexport { default as SelectControl } from './select-control';\nexport { default as Snackbar } from './snackbar';\nexport { default as SnackbarList } from './snackbar/list';\nexport { Spacer as __experimentalSpacer } from './spacer';\nexport { Scrollable as __experimentalScrollable } from './scrollable';\nexport { default as Spinner } from './spinner';\nexport { Surface as __experimentalSurface } from './surface';\nexport { default as TabPanel } from './tab-panel';\nexport { Text as __experimentalText } from './text';\nexport { default as TextControl } from './text-control';\nexport { default as TextareaControl } from './textarea-control';\nexport { default as TextHighlight } from './text-highlight';\nexport { default as __experimentalTheme } from './theme';\nexport { default as Tip } from './tip';\nexport { default as ToggleControl } from './toggle-control';\nexport {\n\tToggleGroupControl as __experimentalToggleGroupControl,\n\tToggleGroupControlOption as __experimentalToggleGroupControlOption,\n\tToggleGroupControlOptionIcon as __experimentalToggleGroupControlOptionIcon,\n} from './toggle-group-control';\nexport { default as Toolbar } from './toolbar';\nexport { default as ToolbarButton } from './toolbar-button';\nexport { default as ToolbarDropdownMenu } from './toolbar-dropdown-menu';\nexport { default as __experimentalToolbarContext } from './toolbar-context';\nexport { default as ToolbarGroup } from './toolbar-group';\nexport { default as ToolbarItem } from './toolbar-item';\nexport {\n\tToolsPanel as __experimentalToolsPanel,\n\tToolsPanelItem as __experimentalToolsPanelItem,\n\tToolsPanelContext as __experimentalToolsPanelContext,\n} from './tools-panel';\nexport { default as Tooltip } from './tooltip';\nexport {\n\tdefault as __experimentalTreeGrid,\n\tTreeGridRow as __experimentalTreeGridRow,\n\tTreeGridCell as __experimentalTreeGridCell,\n\tTreeGridItem as __experimentalTreeGridItem,\n} from './tree-grid';\nexport { default as TreeSelect } from './tree-select';\nexport { Truncate as __experimentalTruncate } from './truncate';\nexport {\n\tdefault as __experimentalUnitControl,\n\tuseCustomUnits as __experimentalUseCustomUnits,\n\tparseQuantityAndUnitFromRawValue as __experimentalParseQuantityAndUnitFromRawValue,\n} from './unit-control';\nexport { View as __experimentalView } from './view';\nexport { VisuallyHidden } from './visually-hidden';\nexport { VStack as __experimentalVStack } from './v-stack';\nexport { default as IsolatedEventContainer } from './isolated-event-container';\nexport {\n\tcreateSlotFill,\n\tSlot,\n\tFill,\n\tProvider as SlotFillProvider,\n\tuseSlot as __experimentalUseSlot,\n\tuseSlotFills as __experimentalUseSlotFills,\n} from './slot-fill';\nexport { default as __experimentalStyleProvider } from './style-provider';\nexport { ZStack as __experimentalZStack } from './z-stack';\n\n// Higher-Order Components.\nexport {\n\tdefault as navigateRegions,\n\tuseNavigateRegions as __unstableUseNavigateRegions,\n} from './higher-order/navigate-regions';\nexport { default as withConstrainedTabbing } from './higher-order/with-constrained-tabbing';\nexport { default as withFallbackStyles } from './higher-order/with-fallback-styles';\nexport { default as withFilters } from './higher-order/with-filters';\nexport { default as withFocusOutside } from './higher-order/with-focus-outside';\nexport {\n\tdefault as withFocusReturn,\n\tProvider as FocusReturnProvider,\n} from './higher-order/with-focus-return';\nexport { default as withNotices } from './higher-order/with-notices';\nexport { default as withSpokenMessages } from './higher-order/with-spoken-messages';\n"]}
@@ -6,7 +6,6 @@ Object.defineProperty(exports, "__esModule", {
6
6
  exports.elementShouldBeHidden = elementShouldBeHidden;
7
7
  exports.hideApp = hideApp;
8
8
  exports.showApp = showApp;
9
- // @ts-nocheck
10
9
  const LIVE_REGION_ARIA_ROLES = new Set(['alert', 'status', 'log', 'marquee', 'timer']);
11
10
  let hiddenElements = [],
12
11
  isHidden = false;
@@ -20,7 +19,7 @@ let hiddenElements = [],
20
19
  * we should consider removing these helper functions in favor of
21
20
  * `aria-modal="true"`.
22
21
  *
23
- * @param {Element} unhiddenElement The element that should not be hidden.
22
+ * @param {HTMLDivElement} unhiddenElement The element that should not be hidden.
24
23
  */
25
24
 
26
25
  function hideApp(unhiddenElement) {
@@ -52,7 +51,7 @@ function hideApp(unhiddenElement) {
52
51
 
53
52
  function elementShouldBeHidden(element) {
54
53
  const role = element.getAttribute('role');
55
- return !(element.tagName === 'SCRIPT' || element.hasAttribute('aria-hidden') || element.hasAttribute('aria-live') || LIVE_REGION_ARIA_ROLES.has(role));
54
+ return !(element.tagName === 'SCRIPT' || element.hasAttribute('aria-hidden') || element.hasAttribute('aria-live') || role && LIVE_REGION_ARIA_ROLES.has(role));
56
55
  }
57
56
  /**
58
57
  * Makes all elements in the body that have been hidden by `hideApp`
@@ -1 +1 @@
1
- {"version":3,"sources":["@wordpress/components/src/modal/aria-helper.js"],"names":["LIVE_REGION_ARIA_ROLES","Set","hiddenElements","isHidden","hideApp","unhiddenElement","elements","Array","from","document","body","children","forEach","element","elementShouldBeHidden","setAttribute","push","role","getAttribute","tagName","hasAttribute","has","showApp","removeAttribute"],"mappings":";;;;;;;;AAAA;AAEA,MAAMA,sBAAsB,GAAG,IAAIC,GAAJ,CAAS,CACvC,OADuC,EAEvC,QAFuC,EAGvC,KAHuC,EAIvC,SAJuC,EAKvC,OALuC,CAAT,CAA/B;AAQA,IAAIC,cAAc,GAAG,EAArB;AAAA,IACCC,QAAQ,GAAG,KADZ;AAGA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AACO,SAASC,OAAT,CAAkBC,eAAlB,EAAoC;AAC1C,MAAKF,QAAL,EAAgB;AACf;AACA;;AACD,QAAMG,QAAQ,GAAGC,KAAK,CAACC,IAAN,CAAYC,QAAQ,CAACC,IAAT,CAAcC,QAA1B,CAAjB;AACAL,EAAAA,QAAQ,CAACM,OAAT,CAAoBC,OAAF,IAAe;AAChC,QAAKA,OAAO,KAAKR,eAAjB,EAAmC;AAClC;AACA;;AACD,QAAKS,qBAAqB,CAAED,OAAF,CAA1B,EAAwC;AACvCA,MAAAA,OAAO,CAACE,YAAR,CAAsB,aAAtB,EAAqC,MAArC;AACAb,MAAAA,cAAc,CAACc,IAAf,CAAqBH,OAArB;AACA;AACD,GARD;AASAV,EAAAA,QAAQ,GAAG,IAAX;AACA;AAED;AACA;AACA;AACA;AACA;AACA;AACA;;;AACO,SAASW,qBAAT,CAAgCD,OAAhC,EAA0C;AAChD,QAAMI,IAAI,GAAGJ,OAAO,CAACK,YAAR,CAAsB,MAAtB,CAAb;AACA,SAAO,EACNL,OAAO,CAACM,OAAR,KAAoB,QAApB,IACAN,OAAO,CAACO,YAAR,CAAsB,aAAtB,CADA,IAEAP,OAAO,CAACO,YAAR,CAAsB,WAAtB,CAFA,IAGApB,sBAAsB,CAACqB,GAAvB,CAA4BJ,IAA5B,CAJM,CAAP;AAMA;AAED;AACA;AACA;AACA;;;AACO,SAASK,OAAT,GAAmB;AACzB,MAAK,CAAEnB,QAAP,EAAkB;AACjB;AACA;;AACDD,EAAAA,cAAc,CAACU,OAAf,CAA0BC,OAAF,IAAe;AACtCA,IAAAA,OAAO,CAACU,eAAR,CAAyB,aAAzB;AACA,GAFD;AAGArB,EAAAA,cAAc,GAAG,EAAjB;AACAC,EAAAA,QAAQ,GAAG,KAAX;AACA","sourcesContent":["// @ts-nocheck\n\nconst LIVE_REGION_ARIA_ROLES = new Set( [\n\t'alert',\n\t'status',\n\t'log',\n\t'marquee',\n\t'timer',\n] );\n\nlet hiddenElements = [],\n\tisHidden = false;\n\n/**\n * Hides all elements in the body element from screen-readers except\n * the provided element and elements that should not be hidden from\n * screen-readers.\n *\n * The reason we do this is because `aria-modal=\"true\"` currently is bugged\n * in Safari, and support is spotty in other browsers overall. In the future\n * we should consider removing these helper functions in favor of\n * `aria-modal=\"true\"`.\n *\n * @param {Element} unhiddenElement The element that should not be hidden.\n */\nexport function hideApp( unhiddenElement ) {\n\tif ( isHidden ) {\n\t\treturn;\n\t}\n\tconst elements = Array.from( document.body.children );\n\telements.forEach( ( element ) => {\n\t\tif ( element === unhiddenElement ) {\n\t\t\treturn;\n\t\t}\n\t\tif ( elementShouldBeHidden( element ) ) {\n\t\t\telement.setAttribute( 'aria-hidden', 'true' );\n\t\t\thiddenElements.push( element );\n\t\t}\n\t} );\n\tisHidden = true;\n}\n\n/**\n * Determines if the passed element should not be hidden from screen readers.\n *\n * @param {HTMLElement} element The element that should be checked.\n *\n * @return {boolean} Whether the element should not be hidden from screen-readers.\n */\nexport function elementShouldBeHidden( element ) {\n\tconst role = element.getAttribute( 'role' );\n\treturn ! (\n\t\telement.tagName === 'SCRIPT' ||\n\t\telement.hasAttribute( 'aria-hidden' ) ||\n\t\telement.hasAttribute( 'aria-live' ) ||\n\t\tLIVE_REGION_ARIA_ROLES.has( role )\n\t);\n}\n\n/**\n * Makes all elements in the body that have been hidden by `hideApp`\n * visible again to screen-readers.\n */\nexport function showApp() {\n\tif ( ! isHidden ) {\n\t\treturn;\n\t}\n\thiddenElements.forEach( ( element ) => {\n\t\telement.removeAttribute( 'aria-hidden' );\n\t} );\n\thiddenElements = [];\n\tisHidden = false;\n}\n"]}
1
+ {"version":3,"sources":["@wordpress/components/src/modal/aria-helper.ts"],"names":["LIVE_REGION_ARIA_ROLES","Set","hiddenElements","isHidden","hideApp","unhiddenElement","elements","Array","from","document","body","children","forEach","element","elementShouldBeHidden","setAttribute","push","role","getAttribute","tagName","hasAttribute","has","showApp","removeAttribute"],"mappings":";;;;;;;;AAAA,MAAMA,sBAAsB,GAAG,IAAIC,GAAJ,CAAS,CACvC,OADuC,EAEvC,QAFuC,EAGvC,KAHuC,EAIvC,SAJuC,EAKvC,OALuC,CAAT,CAA/B;AAQA,IAAIC,cAAyB,GAAG,EAAhC;AAAA,IACCC,QAAQ,GAAG,KADZ;AAGA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AACO,SAASC,OAAT,CAAkBC,eAAlB,EAAqD;AAC3D,MAAKF,QAAL,EAAgB;AACf;AACA;;AACD,QAAMG,QAAQ,GAAGC,KAAK,CAACC,IAAN,CAAYC,QAAQ,CAACC,IAAT,CAAcC,QAA1B,CAAjB;AACAL,EAAAA,QAAQ,CAACM,OAAT,CAAoBC,OAAF,IAAe;AAChC,QAAKA,OAAO,KAAKR,eAAjB,EAAmC;AAClC;AACA;;AACD,QAAKS,qBAAqB,CAAED,OAAF,CAA1B,EAAwC;AACvCA,MAAAA,OAAO,CAACE,YAAR,CAAsB,aAAtB,EAAqC,MAArC;AACAb,MAAAA,cAAc,CAACc,IAAf,CAAqBH,OAArB;AACA;AACD,GARD;AASAV,EAAAA,QAAQ,GAAG,IAAX;AACA;AAED;AACA;AACA;AACA;AACA;AACA;AACA;;;AACO,SAASW,qBAAT,CAAgCD,OAAhC,EAAmD;AACzD,QAAMI,IAAI,GAAGJ,OAAO,CAACK,YAAR,CAAsB,MAAtB,CAAb;AACA,SAAO,EACNL,OAAO,CAACM,OAAR,KAAoB,QAApB,IACAN,OAAO,CAACO,YAAR,CAAsB,aAAtB,CADA,IAEAP,OAAO,CAACO,YAAR,CAAsB,WAAtB,CAFA,IAGEH,IAAI,IAAIjB,sBAAsB,CAACqB,GAAvB,CAA4BJ,IAA5B,CAJJ,CAAP;AAMA;AAED;AACA;AACA;AACA;;;AACO,SAASK,OAAT,GAAmB;AACzB,MAAK,CAAEnB,QAAP,EAAkB;AACjB;AACA;;AACDD,EAAAA,cAAc,CAACU,OAAf,CAA0BC,OAAF,IAAe;AACtCA,IAAAA,OAAO,CAACU,eAAR,CAAyB,aAAzB;AACA,GAFD;AAGArB,EAAAA,cAAc,GAAG,EAAjB;AACAC,EAAAA,QAAQ,GAAG,KAAX;AACA","sourcesContent":["const LIVE_REGION_ARIA_ROLES = new Set( [\n\t'alert',\n\t'status',\n\t'log',\n\t'marquee',\n\t'timer',\n] );\n\nlet hiddenElements: Element[] = [],\n\tisHidden = false;\n\n/**\n * Hides all elements in the body element from screen-readers except\n * the provided element and elements that should not be hidden from\n * screen-readers.\n *\n * The reason we do this is because `aria-modal=\"true\"` currently is bugged\n * in Safari, and support is spotty in other browsers overall. In the future\n * we should consider removing these helper functions in favor of\n * `aria-modal=\"true\"`.\n *\n * @param {HTMLDivElement} unhiddenElement The element that should not be hidden.\n */\nexport function hideApp( unhiddenElement?: HTMLDivElement ) {\n\tif ( isHidden ) {\n\t\treturn;\n\t}\n\tconst elements = Array.from( document.body.children );\n\telements.forEach( ( element ) => {\n\t\tif ( element === unhiddenElement ) {\n\t\t\treturn;\n\t\t}\n\t\tif ( elementShouldBeHidden( element ) ) {\n\t\t\telement.setAttribute( 'aria-hidden', 'true' );\n\t\t\thiddenElements.push( element );\n\t\t}\n\t} );\n\tisHidden = true;\n}\n\n/**\n * Determines if the passed element should not be hidden from screen readers.\n *\n * @param {HTMLElement} element The element that should be checked.\n *\n * @return {boolean} Whether the element should not be hidden from screen-readers.\n */\nexport function elementShouldBeHidden( element: Element ) {\n\tconst role = element.getAttribute( 'role' );\n\treturn ! (\n\t\telement.tagName === 'SCRIPT' ||\n\t\telement.hasAttribute( 'aria-hidden' ) ||\n\t\telement.hasAttribute( 'aria-live' ) ||\n\t\t( role && LIVE_REGION_ARIA_ROLES.has( role ) )\n\t);\n}\n\n/**\n * Makes all elements in the body that have been hidden by `hideApp`\n * visible again to screen-readers.\n */\nexport function showApp() {\n\tif ( ! isHidden ) {\n\t\treturn;\n\t}\n\thiddenElements.forEach( ( element ) => {\n\t\telement.removeAttribute( 'aria-hidden' );\n\t} );\n\thiddenElements = [];\n\tisHidden = false;\n}\n"]}
@@ -5,7 +5,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
5
5
  Object.defineProperty(exports, "__esModule", {
6
6
  value: true
7
7
  });
8
- exports.default = void 0;
8
+ exports.default = exports.Modal = void 0;
9
9
 
10
10
  var _element = require("@wordpress/element");
11
11
 
@@ -29,8 +29,6 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
29
29
 
30
30
  function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
31
31
 
32
- // @ts-nocheck
33
-
34
32
  /**
35
33
  * External dependencies
36
34
  */
@@ -45,7 +43,7 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
45
43
  // Used to count the number of open modals.
46
44
  let openModalCount = 0;
47
45
 
48
- function Modal(props, forwardedRef) {
46
+ function UnforwardedModal(props, forwardedRef) {
49
47
  const {
50
48
  bodyOpenClassName = 'modal-open',
51
49
  role = 'dialog',
@@ -57,8 +55,8 @@ function Modal(props, forwardedRef) {
57
55
 
58
56
  /* Accessibility. */
59
57
  aria = {
60
- labelledby: null,
61
- describedby: null
58
+ labelledby: undefined,
59
+ describedby: undefined
62
60
  },
63
61
  onRequestClose,
64
62
  icon,
@@ -109,9 +107,9 @@ function Modal(props, forwardedRef) {
109
107
  }
110
108
 
111
109
  const onContentContainerScroll = (0, _element.useCallback)(e => {
112
- var _e$target$scrollTop, _e$target;
110
+ var _e$currentTarget$scro, _e$currentTarget;
113
111
 
114
- const scrollY = (_e$target$scrollTop = e === null || e === void 0 ? void 0 : (_e$target = e.target) === null || _e$target === void 0 ? void 0 : _e$target.scrollTop) !== null && _e$target$scrollTop !== void 0 ? _e$target$scrollTop : -1;
112
+ const scrollY = (_e$currentTarget$scro = e === null || e === void 0 ? void 0 : (_e$currentTarget = e.currentTarget) === null || _e$currentTarget === void 0 ? void 0 : _e$currentTarget.scrollTop) !== null && _e$currentTarget$scro !== void 0 ? _e$currentTarget$scro : -1;
115
113
 
116
114
  if (!hasScrolledContent && scrollY > 0) {
117
115
  setHasScrolledContent(true);
@@ -134,9 +132,9 @@ function Modal(props, forwardedRef) {
134
132
  ref: (0, _compose.useMergeRefs)([constrainedTabbingRef, focusReturnRef, focusOnMountRef]),
135
133
  role: role,
136
134
  "aria-label": contentLabel,
137
- "aria-labelledby": contentLabel ? null : headingId,
135
+ "aria-labelledby": contentLabel ? undefined : headingId,
138
136
  "aria-describedby": aria.describedby,
139
- tabIndex: "-1"
137
+ tabIndex: -1
140
138
  }, shouldCloseOnClickOutside ? focusOutsideProps : {}, {
141
139
  onKeyDown: onKeyDown
142
140
  }), (0, _element.createElement)("div", {
@@ -162,8 +160,41 @@ function Modal(props, forwardedRef) {
162
160
  label: closeButtonLabel || (0, _i18n.__)('Close dialog')
163
161
  })), children)))), document.body);
164
162
  }
163
+ /**
164
+ * Modals give users information and choices related to a task they’re trying to
165
+ * accomplish. They can contain critical information, require decisions, or
166
+ * involve multiple tasks.
167
+ *
168
+ * ```jsx
169
+ * import { Button, Modal } from '@wordpress/components';
170
+ * import { useState } from '@wordpress/element';
171
+ *
172
+ * const MyModal = () => {
173
+ * const [ isOpen, setOpen ] = useState( false );
174
+ * const openModal = () => setOpen( true );
175
+ * const closeModal = () => setOpen( false );
176
+ *
177
+ * return (
178
+ * <>
179
+ * <Button variant="secondary" onClick={ openModal }>
180
+ * Open Modal
181
+ * </Button>
182
+ * { isOpen && (
183
+ * <Modal title="This is my modal" onRequestClose={ closeModal }>
184
+ * <Button variant="secondary" onClick={ closeModal }>
185
+ * My custom close button
186
+ * </Button>
187
+ * </Modal>
188
+ * ) }
189
+ * </>
190
+ * );
191
+ * };
192
+ * ```
193
+ */
165
194
 
166
- var _default = (0, _element.forwardRef)(Modal);
167
195
 
196
+ const Modal = (0, _element.forwardRef)(UnforwardedModal);
197
+ exports.Modal = Modal;
198
+ var _default = Modal;
168
199
  exports.default = _default;
169
200
  //# sourceMappingURL=index.js.map
@@ -1 +1 @@
1
- {"version":3,"sources":["@wordpress/components/src/modal/index.js"],"names":["openModalCount","Modal","props","forwardedRef","bodyOpenClassName","role","title","focusOnMount","shouldCloseOnEsc","shouldCloseOnClickOutside","isDismissible","aria","labelledby","describedby","onRequestClose","icon","closeButtonLabel","children","style","overlayClassName","className","contentLabel","onKeyDown","isFullScreen","__experimentalHideHeader","ref","instanceId","headingId","focusOnMountRef","constrainedTabbingRef","focusReturnRef","focusOutsideProps","hasScrolledContent","setHasScrolledContent","ariaHelper","hideApp","current","document","body","classList","add","remove","showApp","handleEscapeKeyDown","event","code","defaultPrevented","preventDefault","onContentContainerScroll","e","scrollY","target","scrollTop","close"],"mappings":";;;;;;;;;AAUA;;;;AALA;;AAaA;;AAQA;;AACA;;AAKA;;AACA;;AACA;;;;;;AAlCA;;AAEA;AACA;AACA;;AAGA;AACA;AACA;;AAoBA;AACA;AACA;AAKA;AACA,IAAIA,cAAc,GAAG,CAArB;;AAEA,SAASC,KAAT,CAAgBC,KAAhB,EAAuBC,YAAvB,EAAsC;AACrC,QAAM;AACLC,IAAAA,iBAAiB,GAAG,YADf;AAELC,IAAAA,IAAI,GAAG,QAFF;AAGLC,IAAAA,KAAK,GAAG,IAHH;AAILC,IAAAA,YAAY,GAAG,IAJV;AAKLC,IAAAA,gBAAgB,GAAG,IALd;AAMLC,IAAAA,yBAAyB,GAAG,IANvB;AAOLC,IAAAA,aAAa,GAAG,IAPX;;AAQL;AACAC,IAAAA,IAAI,GAAG;AACNC,MAAAA,UAAU,EAAE,IADN;AAENC,MAAAA,WAAW,EAAE;AAFP,KATF;AAaLC,IAAAA,cAbK;AAcLC,IAAAA,IAdK;AAeLC,IAAAA,gBAfK;AAgBLC,IAAAA,QAhBK;AAiBLC,IAAAA,KAjBK;AAkBLC,IAAAA,gBAlBK;AAmBLC,IAAAA,SAnBK;AAoBLC,IAAAA,YApBK;AAqBLC,IAAAA,SArBK;AAsBLC,IAAAA,YAAY,GAAG,KAtBV;AAuBLC,IAAAA,wBAAwB,GAAG;AAvBtB,MAwBFtB,KAxBJ;AA0BA,QAAMuB,GAAG,GAAG,sBAAZ;AACA,QAAMC,UAAU,GAAG,4BAAezB,KAAf,CAAnB;AACA,QAAM0B,SAAS,GAAGrB,KAAK,GACnB,2BAA2BoB,UAAY,EADpB,GAEpBf,IAAI,CAACC,UAFR;AAGA,QAAMgB,eAAe,GAAG,8BAAiBrB,YAAjB,CAAxB;AACA,QAAMsB,qBAAqB,GAAG,qCAA9B;AACA,QAAMC,cAAc,GAAG,8BAAvB;AACA,QAAMC,iBAAiB,GAAG,4CAAiBjB,cAAjB,CAA1B;AAEA,QAAM,CAAEkB,kBAAF,EAAsBC,qBAAtB,IAAgD,uBAAU,KAAV,CAAtD;AAEA,0BAAW,MAAM;AAChBjC,IAAAA,cAAc;;AAEd,QAAKA,cAAc,KAAK,CAAxB,EAA4B;AAC3BkC,MAAAA,UAAU,CAACC,OAAX,CAAoBV,GAAG,CAACW,OAAxB;AACAC,MAAAA,QAAQ,CAACC,IAAT,CAAcC,SAAd,CAAwBC,GAAxB,CAA6BpC,iBAA7B;AACA;;AAED,WAAO,MAAM;AACZJ,MAAAA,cAAc;;AAEd,UAAKA,cAAc,KAAK,CAAxB,EAA4B;AAC3BqC,QAAAA,QAAQ,CAACC,IAAT,CAAcC,SAAd,CAAwBE,MAAxB,CAAgCrC,iBAAhC;AACA8B,QAAAA,UAAU,CAACQ,OAAX;AACA;AACD,KAPD;AAQA,GAhBD,EAgBG,CAAEtC,iBAAF,CAhBH;;AAkBA,WAASuC,mBAAT,CAA8BC,KAA9B,EAAsC;AACrC,QACCpC,gBAAgB,IAChBoC,KAAK,CAACC,IAAN,KAAe,QADf,IAEA,CAAED,KAAK,CAACE,gBAHT,EAIE;AACDF,MAAAA,KAAK,CAACG,cAAN;;AACA,UAAKjC,cAAL,EAAsB;AACrBA,QAAAA,cAAc,CAAE8B,KAAF,CAAd;AACA;AACD;AACD;;AAED,QAAMI,wBAAwB,GAAG,0BAC9BC,CAAF,IAAS;AAAA;;AACR,UAAMC,OAAO,0BAAGD,CAAH,aAAGA,CAAH,oCAAGA,CAAC,CAAEE,MAAN,8CAAG,UAAWC,SAAd,qEAA2B,CAAC,CAAzC;;AAEA,QAAK,CAAEpB,kBAAF,IAAwBkB,OAAO,GAAG,CAAvC,EAA2C;AAC1CjB,MAAAA,qBAAqB,CAAE,IAAF,CAArB;AACA,KAFD,MAEO,IAAKD,kBAAkB,IAAIkB,OAAO,IAAI,CAAtC,EAA0C;AAChDjB,MAAAA,qBAAqB,CAAE,KAAF,CAArB;AACA;AACD,GAT+B,EAUhC,CAAED,kBAAF,CAVgC,CAAjC;AAaA,SAAO,4BACN;AACA;AACC,IAAA,GAAG,EAAG,2BAAc,CAAEP,GAAF,EAAOtB,YAAP,CAAd,CADP;AAEC,IAAA,SAAS,EAAG,yBACX,kCADW,EAEXgB,gBAFW,CAFb;AAMC,IAAA,SAAS,EAAGwB;AANb,KAQC,4BAAC,sBAAD;AAAe,IAAA,QAAQ,EAAGN;AAA1B,KACC;AACC,IAAA,SAAS,EAAG,yBACX,yBADW,EAEXjB,SAFW,EAGX;AACC,wBAAkBG;AADnB,KAHW,CADb;AAQC,IAAA,KAAK,EAAGL,KART;AASC,IAAA,GAAG,EAAG,2BAAc,CACnBW,qBADmB,EAEnBC,cAFmB,EAGnBF,eAHmB,CAAd,CATP;AAcC,IAAA,IAAI,EAAGvB,IAdR;AAeC,kBAAagB,YAfd;AAgBC,uBAAkBA,YAAY,GAAG,IAAH,GAAUM,SAhBzC;AAiBC,wBAAmBhB,IAAI,CAACE,WAjBzB;AAkBC,IAAA,QAAQ,EAAC;AAlBV,KAmBQJ,yBAAyB,GAC7BsB,iBAD6B,GAE7B,EArBJ;AAsBC,IAAA,SAAS,EAAGT;AAtBb,MAwBC;AACC,IAAA,SAAS,EAAG,yBAAY,2BAAZ,EAAyC;AACpD,qBAAeE,wBADqC;AAEpD,8BAAwBQ;AAF4B,KAAzC,CADb;AAKC,IAAA,IAAI,EAAC,UALN;AAMC,IAAA,QAAQ,EAAGgB;AANZ,KAQG,CAAExB,wBAAF,IACD;AAAK,IAAA,SAAS,EAAC;AAAf,KACC;AAAK,IAAA,SAAS,EAAC;AAAf,KACGT,IAAI,IACL;AACC,IAAA,SAAS,EAAC,kCADX;AAEC;AAFD,KAIGA,IAJH,CAFF,EASGT,KAAK,IACN;AACC,IAAA,EAAE,EAAGqB,SADN;AAEC,IAAA,SAAS,EAAC;AAFX,KAIGrB,KAJH,CAVF,CADD,EAmBGI,aAAa,IACd,4BAAC,eAAD;AACC,IAAA,OAAO,EAAGI,cADX;AAEC,IAAA,IAAI,EAAGuC,YAFR;AAGC,IAAA,KAAK,EACJrC,gBAAgB,IAChB,cAAI,cAAJ;AALF,IApBF,CATF,EAwCGC,QAxCH,CAxBD,CADD,CARD,CAFM,EAgFNoB,QAAQ,CAACC,IAhFH,CAAP;AAkFA;;eAEc,yBAAYrC,KAAZ,C","sourcesContent":["// @ts-nocheck\n\n/**\n * External dependencies\n */\nimport classnames from 'classnames';\n\n/**\n * WordPress dependencies\n */\nimport {\n\tcreatePortal,\n\tuseCallback,\n\tuseEffect,\n\tuseRef,\n\tuseState,\n\tforwardRef,\n} from '@wordpress/element';\nimport {\n\tuseInstanceId,\n\tuseFocusReturn,\n\tuseFocusOnMount,\n\t__experimentalUseFocusOutside as useFocusOutside,\n\tuseConstrainedTabbing,\n\tuseMergeRefs,\n} from '@wordpress/compose';\nimport { __ } from '@wordpress/i18n';\nimport { close } from '@wordpress/icons';\n\n/**\n * Internal dependencies\n */\nimport * as ariaHelper from './aria-helper';\nimport Button from '../button';\nimport StyleProvider from '../style-provider';\n\n// Used to count the number of open modals.\nlet openModalCount = 0;\n\nfunction Modal( props, forwardedRef ) {\n\tconst {\n\t\tbodyOpenClassName = 'modal-open',\n\t\trole = 'dialog',\n\t\ttitle = null,\n\t\tfocusOnMount = true,\n\t\tshouldCloseOnEsc = true,\n\t\tshouldCloseOnClickOutside = true,\n\t\tisDismissible = true,\n\t\t/* Accessibility. */\n\t\taria = {\n\t\t\tlabelledby: null,\n\t\t\tdescribedby: null,\n\t\t},\n\t\tonRequestClose,\n\t\ticon,\n\t\tcloseButtonLabel,\n\t\tchildren,\n\t\tstyle,\n\t\toverlayClassName,\n\t\tclassName,\n\t\tcontentLabel,\n\t\tonKeyDown,\n\t\tisFullScreen = false,\n\t\t__experimentalHideHeader = false,\n\t} = props;\n\n\tconst ref = useRef();\n\tconst instanceId = useInstanceId( Modal );\n\tconst headingId = title\n\t\t? `components-modal-header-${ instanceId }`\n\t\t: aria.labelledby;\n\tconst focusOnMountRef = useFocusOnMount( focusOnMount );\n\tconst constrainedTabbingRef = useConstrainedTabbing();\n\tconst focusReturnRef = useFocusReturn();\n\tconst focusOutsideProps = useFocusOutside( onRequestClose );\n\n\tconst [ hasScrolledContent, setHasScrolledContent ] = useState( false );\n\n\tuseEffect( () => {\n\t\topenModalCount++;\n\n\t\tif ( openModalCount === 1 ) {\n\t\t\tariaHelper.hideApp( ref.current );\n\t\t\tdocument.body.classList.add( bodyOpenClassName );\n\t\t}\n\n\t\treturn () => {\n\t\t\topenModalCount--;\n\n\t\t\tif ( openModalCount === 0 ) {\n\t\t\t\tdocument.body.classList.remove( bodyOpenClassName );\n\t\t\t\tariaHelper.showApp();\n\t\t\t}\n\t\t};\n\t}, [ bodyOpenClassName ] );\n\n\tfunction handleEscapeKeyDown( event ) {\n\t\tif (\n\t\t\tshouldCloseOnEsc &&\n\t\t\tevent.code === 'Escape' &&\n\t\t\t! event.defaultPrevented\n\t\t) {\n\t\t\tevent.preventDefault();\n\t\t\tif ( onRequestClose ) {\n\t\t\t\tonRequestClose( event );\n\t\t\t}\n\t\t}\n\t}\n\n\tconst onContentContainerScroll = useCallback(\n\t\t( e ) => {\n\t\t\tconst scrollY = e?.target?.scrollTop ?? -1;\n\n\t\t\tif ( ! hasScrolledContent && scrollY > 0 ) {\n\t\t\t\tsetHasScrolledContent( true );\n\t\t\t} else if ( hasScrolledContent && scrollY <= 0 ) {\n\t\t\t\tsetHasScrolledContent( false );\n\t\t\t}\n\t\t},\n\t\t[ hasScrolledContent ]\n\t);\n\n\treturn createPortal(\n\t\t// eslint-disable-next-line jsx-a11y/no-static-element-interactions\n\t\t<div\n\t\t\tref={ useMergeRefs( [ ref, forwardedRef ] ) }\n\t\t\tclassName={ classnames(\n\t\t\t\t'components-modal__screen-overlay',\n\t\t\t\toverlayClassName\n\t\t\t) }\n\t\t\tonKeyDown={ handleEscapeKeyDown }\n\t\t>\n\t\t\t<StyleProvider document={ document }>\n\t\t\t\t<div\n\t\t\t\t\tclassName={ classnames(\n\t\t\t\t\t\t'components-modal__frame',\n\t\t\t\t\t\tclassName,\n\t\t\t\t\t\t{\n\t\t\t\t\t\t\t'is-full-screen': isFullScreen,\n\t\t\t\t\t\t}\n\t\t\t\t\t) }\n\t\t\t\t\tstyle={ style }\n\t\t\t\t\tref={ useMergeRefs( [\n\t\t\t\t\t\tconstrainedTabbingRef,\n\t\t\t\t\t\tfocusReturnRef,\n\t\t\t\t\t\tfocusOnMountRef,\n\t\t\t\t\t] ) }\n\t\t\t\t\trole={ role }\n\t\t\t\t\taria-label={ contentLabel }\n\t\t\t\t\taria-labelledby={ contentLabel ? null : headingId }\n\t\t\t\t\taria-describedby={ aria.describedby }\n\t\t\t\t\ttabIndex=\"-1\"\n\t\t\t\t\t{ ...( shouldCloseOnClickOutside\n\t\t\t\t\t\t? focusOutsideProps\n\t\t\t\t\t\t: {} ) }\n\t\t\t\t\tonKeyDown={ onKeyDown }\n\t\t\t\t>\n\t\t\t\t\t<div\n\t\t\t\t\t\tclassName={ classnames( 'components-modal__content', {\n\t\t\t\t\t\t\t'hide-header': __experimentalHideHeader,\n\t\t\t\t\t\t\t'has-scrolled-content': hasScrolledContent,\n\t\t\t\t\t\t} ) }\n\t\t\t\t\t\trole=\"document\"\n\t\t\t\t\t\tonScroll={ onContentContainerScroll }\n\t\t\t\t\t>\n\t\t\t\t\t\t{ ! __experimentalHideHeader && (\n\t\t\t\t\t\t\t<div className=\"components-modal__header\">\n\t\t\t\t\t\t\t\t<div className=\"components-modal__header-heading-container\">\n\t\t\t\t\t\t\t\t\t{ icon && (\n\t\t\t\t\t\t\t\t\t\t<span\n\t\t\t\t\t\t\t\t\t\t\tclassName=\"components-modal__icon-container\"\n\t\t\t\t\t\t\t\t\t\t\taria-hidden\n\t\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\t{ icon }\n\t\t\t\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t\t\t{ title && (\n\t\t\t\t\t\t\t\t\t\t<h1\n\t\t\t\t\t\t\t\t\t\t\tid={ headingId }\n\t\t\t\t\t\t\t\t\t\t\tclassName=\"components-modal__header-heading\"\n\t\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\t{ title }\n\t\t\t\t\t\t\t\t\t\t</h1>\n\t\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t{ isDismissible && (\n\t\t\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\t\t\tonClick={ onRequestClose }\n\t\t\t\t\t\t\t\t\t\ticon={ close }\n\t\t\t\t\t\t\t\t\t\tlabel={\n\t\t\t\t\t\t\t\t\t\t\tcloseButtonLabel ||\n\t\t\t\t\t\t\t\t\t\t\t__( 'Close dialog' )\n\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t) }\n\t\t\t\t\t\t{ children }\n\t\t\t\t\t</div>\n\t\t\t\t</div>\n\t\t\t</StyleProvider>\n\t\t</div>,\n\t\tdocument.body\n\t);\n}\n\nexport default forwardRef( Modal );\n"]}
1
+ {"version":3,"sources":["@wordpress/components/src/modal/index.tsx"],"names":["openModalCount","UnforwardedModal","props","forwardedRef","bodyOpenClassName","role","title","focusOnMount","shouldCloseOnEsc","shouldCloseOnClickOutside","isDismissible","aria","labelledby","undefined","describedby","onRequestClose","icon","closeButtonLabel","children","style","overlayClassName","className","contentLabel","onKeyDown","isFullScreen","__experimentalHideHeader","ref","instanceId","Modal","headingId","focusOnMountRef","constrainedTabbingRef","focusReturnRef","focusOutsideProps","hasScrolledContent","setHasScrolledContent","ariaHelper","hideApp","current","document","body","classList","add","remove","showApp","handleEscapeKeyDown","event","code","defaultPrevented","preventDefault","onContentContainerScroll","e","scrollY","currentTarget","scrollTop","close"],"mappings":"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","sourcesContent":["/**\n * External dependencies\n */\nimport classnames from 'classnames';\nimport type { ForwardedRef, KeyboardEvent, UIEvent } from 'react';\n\n/**\n * WordPress dependencies\n */\nimport {\n\tcreatePortal,\n\tuseCallback,\n\tuseEffect,\n\tuseRef,\n\tuseState,\n\tforwardRef,\n} from '@wordpress/element';\nimport {\n\tuseInstanceId,\n\tuseFocusReturn,\n\tuseFocusOnMount,\n\t__experimentalUseFocusOutside as useFocusOutside,\n\tuseConstrainedTabbing,\n\tuseMergeRefs,\n} from '@wordpress/compose';\nimport { __ } from '@wordpress/i18n';\nimport { close } from '@wordpress/icons';\n\n/**\n * Internal dependencies\n */\nimport * as ariaHelper from './aria-helper';\nimport Button from '../button';\nimport StyleProvider from '../style-provider';\nimport type { ModalProps } from './types';\n\n// Used to count the number of open modals.\nlet openModalCount = 0;\n\nfunction UnforwardedModal(\n\tprops: ModalProps,\n\tforwardedRef: ForwardedRef< HTMLDivElement >\n) {\n\tconst {\n\t\tbodyOpenClassName = 'modal-open',\n\t\trole = 'dialog',\n\t\ttitle = null,\n\t\tfocusOnMount = true,\n\t\tshouldCloseOnEsc = true,\n\t\tshouldCloseOnClickOutside = true,\n\t\tisDismissible = true,\n\t\t/* Accessibility. */\n\t\taria = {\n\t\t\tlabelledby: undefined,\n\t\t\tdescribedby: undefined,\n\t\t},\n\t\tonRequestClose,\n\t\ticon,\n\t\tcloseButtonLabel,\n\t\tchildren,\n\t\tstyle,\n\t\toverlayClassName,\n\t\tclassName,\n\t\tcontentLabel,\n\t\tonKeyDown,\n\t\tisFullScreen = false,\n\t\t__experimentalHideHeader = false,\n\t} = props;\n\n\tconst ref = useRef< HTMLDivElement >();\n\tconst instanceId = useInstanceId( Modal );\n\tconst headingId = title\n\t\t? `components-modal-header-${ instanceId }`\n\t\t: aria.labelledby;\n\tconst focusOnMountRef = useFocusOnMount( focusOnMount );\n\tconst constrainedTabbingRef = useConstrainedTabbing();\n\tconst focusReturnRef = useFocusReturn();\n\tconst focusOutsideProps = useFocusOutside( onRequestClose );\n\n\tconst [ hasScrolledContent, setHasScrolledContent ] = useState( false );\n\n\tuseEffect( () => {\n\t\topenModalCount++;\n\n\t\tif ( openModalCount === 1 ) {\n\t\t\tariaHelper.hideApp( ref.current );\n\t\t\tdocument.body.classList.add( bodyOpenClassName );\n\t\t}\n\n\t\treturn () => {\n\t\t\topenModalCount--;\n\n\t\t\tif ( openModalCount === 0 ) {\n\t\t\t\tdocument.body.classList.remove( bodyOpenClassName );\n\t\t\t\tariaHelper.showApp();\n\t\t\t}\n\t\t};\n\t}, [ bodyOpenClassName ] );\n\n\tfunction handleEscapeKeyDown( event: KeyboardEvent< HTMLDivElement > ) {\n\t\tif (\n\t\t\tshouldCloseOnEsc &&\n\t\t\tevent.code === 'Escape' &&\n\t\t\t! event.defaultPrevented\n\t\t) {\n\t\t\tevent.preventDefault();\n\t\t\tif ( onRequestClose ) {\n\t\t\t\tonRequestClose( event );\n\t\t\t}\n\t\t}\n\t}\n\n\tconst onContentContainerScroll = useCallback(\n\t\t( e: UIEvent< HTMLDivElement > ) => {\n\t\t\tconst scrollY = e?.currentTarget?.scrollTop ?? -1;\n\n\t\t\tif ( ! hasScrolledContent && scrollY > 0 ) {\n\t\t\t\tsetHasScrolledContent( true );\n\t\t\t} else if ( hasScrolledContent && scrollY <= 0 ) {\n\t\t\t\tsetHasScrolledContent( false );\n\t\t\t}\n\t\t},\n\t\t[ hasScrolledContent ]\n\t);\n\n\treturn createPortal(\n\t\t// eslint-disable-next-line jsx-a11y/no-static-element-interactions\n\t\t<div\n\t\t\tref={ useMergeRefs( [ ref, forwardedRef ] ) }\n\t\t\tclassName={ classnames(\n\t\t\t\t'components-modal__screen-overlay',\n\t\t\t\toverlayClassName\n\t\t\t) }\n\t\t\tonKeyDown={ handleEscapeKeyDown }\n\t\t>\n\t\t\t<StyleProvider document={ document }>\n\t\t\t\t<div\n\t\t\t\t\tclassName={ classnames(\n\t\t\t\t\t\t'components-modal__frame',\n\t\t\t\t\t\tclassName,\n\t\t\t\t\t\t{\n\t\t\t\t\t\t\t'is-full-screen': isFullScreen,\n\t\t\t\t\t\t}\n\t\t\t\t\t) }\n\t\t\t\t\tstyle={ style }\n\t\t\t\t\tref={ useMergeRefs( [\n\t\t\t\t\t\tconstrainedTabbingRef,\n\t\t\t\t\t\tfocusReturnRef,\n\t\t\t\t\t\tfocusOnMountRef,\n\t\t\t\t\t] ) }\n\t\t\t\t\trole={ role }\n\t\t\t\t\taria-label={ contentLabel }\n\t\t\t\t\taria-labelledby={ contentLabel ? undefined : headingId }\n\t\t\t\t\taria-describedby={ aria.describedby }\n\t\t\t\t\ttabIndex={ -1 }\n\t\t\t\t\t{ ...( shouldCloseOnClickOutside\n\t\t\t\t\t\t? focusOutsideProps\n\t\t\t\t\t\t: {} ) }\n\t\t\t\t\tonKeyDown={ onKeyDown }\n\t\t\t\t>\n\t\t\t\t\t<div\n\t\t\t\t\t\tclassName={ classnames( 'components-modal__content', {\n\t\t\t\t\t\t\t'hide-header': __experimentalHideHeader,\n\t\t\t\t\t\t\t'has-scrolled-content': hasScrolledContent,\n\t\t\t\t\t\t} ) }\n\t\t\t\t\t\trole=\"document\"\n\t\t\t\t\t\tonScroll={ onContentContainerScroll }\n\t\t\t\t\t>\n\t\t\t\t\t\t{ ! __experimentalHideHeader && (\n\t\t\t\t\t\t\t<div className=\"components-modal__header\">\n\t\t\t\t\t\t\t\t<div className=\"components-modal__header-heading-container\">\n\t\t\t\t\t\t\t\t\t{ icon && (\n\t\t\t\t\t\t\t\t\t\t<span\n\t\t\t\t\t\t\t\t\t\t\tclassName=\"components-modal__icon-container\"\n\t\t\t\t\t\t\t\t\t\t\taria-hidden\n\t\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\t{ icon }\n\t\t\t\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t\t\t{ title && (\n\t\t\t\t\t\t\t\t\t\t<h1\n\t\t\t\t\t\t\t\t\t\t\tid={ headingId }\n\t\t\t\t\t\t\t\t\t\t\tclassName=\"components-modal__header-heading\"\n\t\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\t{ title }\n\t\t\t\t\t\t\t\t\t\t</h1>\n\t\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t{ isDismissible && (\n\t\t\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\t\t\tonClick={ onRequestClose }\n\t\t\t\t\t\t\t\t\t\ticon={ close }\n\t\t\t\t\t\t\t\t\t\tlabel={\n\t\t\t\t\t\t\t\t\t\t\tcloseButtonLabel ||\n\t\t\t\t\t\t\t\t\t\t\t__( 'Close dialog' )\n\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t) }\n\t\t\t\t\t\t{ children }\n\t\t\t\t\t</div>\n\t\t\t\t</div>\n\t\t\t</StyleProvider>\n\t\t</div>,\n\t\tdocument.body\n\t);\n}\n\n/**\n * Modals give users information and choices related to a task they’re trying to\n * accomplish. They can contain critical information, require decisions, or\n * involve multiple tasks.\n *\n * ```jsx\n * import { Button, Modal } from '@wordpress/components';\n * import { useState } from '@wordpress/element';\n *\n * const MyModal = () => {\n * const [ isOpen, setOpen ] = useState( false );\n * const openModal = () => setOpen( true );\n * const closeModal = () => setOpen( false );\n *\n * return (\n * <>\n * <Button variant=\"secondary\" onClick={ openModal }>\n * Open Modal\n * </Button>\n * { isOpen && (\n * <Modal title=\"This is my modal\" onRequestClose={ closeModal }>\n * <Button variant=\"secondary\" onClick={ closeModal }>\n * My custom close button\n * </Button>\n * </Modal>\n * ) }\n * </>\n * );\n * };\n * ```\n */\nexport const Modal = forwardRef( UnforwardedModal );\n\nexport default Modal;\n"]}
@@ -0,0 +1,6 @@
1
+ "use strict";
2
+
3
+ Object.defineProperty(exports, "__esModule", {
4
+ value: true
5
+ });
6
+ //# sourceMappingURL=types.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"sources":[],"names":[],"mappings":"","sourcesContent":[]}
@@ -8,25 +8,25 @@ Object.defineProperty(exports, "__esModule", {
8
8
  Object.defineProperty(exports, "NavigatorBackButton", {
9
9
  enumerable: true,
10
10
  get: function () {
11
- return _navigatorBackButton.default;
11
+ return _navigatorBackButton.NavigatorBackButton;
12
12
  }
13
13
  });
14
14
  Object.defineProperty(exports, "NavigatorButton", {
15
15
  enumerable: true,
16
16
  get: function () {
17
- return _navigatorButton.default;
17
+ return _navigatorButton.NavigatorButton;
18
18
  }
19
19
  });
20
20
  Object.defineProperty(exports, "NavigatorProvider", {
21
21
  enumerable: true,
22
22
  get: function () {
23
- return _navigatorProvider.default;
23
+ return _navigatorProvider.NavigatorProvider;
24
24
  }
25
25
  });
26
26
  Object.defineProperty(exports, "NavigatorScreen", {
27
27
  enumerable: true,
28
28
  get: function () {
29
- return _navigatorScreen.default;
29
+ return _navigatorScreen.NavigatorScreen;
30
30
  }
31
31
  });
32
32
  Object.defineProperty(exports, "useNavigator", {
@@ -36,13 +36,13 @@ Object.defineProperty(exports, "useNavigator", {
36
36
  }
37
37
  });
38
38
 
39
- var _navigatorProvider = _interopRequireDefault(require("./navigator-provider"));
39
+ var _navigatorProvider = require("./navigator-provider");
40
40
 
41
- var _navigatorScreen = _interopRequireDefault(require("./navigator-screen"));
41
+ var _navigatorScreen = require("./navigator-screen");
42
42
 
43
- var _navigatorButton = _interopRequireDefault(require("./navigator-button"));
43
+ var _navigatorButton = require("./navigator-button");
44
44
 
45
- var _navigatorBackButton = _interopRequireDefault(require("./navigator-back-button"));
45
+ var _navigatorBackButton = require("./navigator-back-button");
46
46
 
47
47
  var _useNavigator = _interopRequireDefault(require("./use-navigator"));
48
48
  //# sourceMappingURL=index.js.map