@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
@@ -9,12 +9,20 @@ exports.default = SlotFillProvider;
9
9
 
10
10
  var _element = require("@wordpress/element");
11
11
 
12
+ var _valtio = require("valtio");
13
+
14
+ var _utils = require("valtio/utils");
15
+
12
16
  var _isShallowEqual = _interopRequireDefault(require("@wordpress/is-shallow-equal"));
13
17
 
14
18
  var _slotFillContext = _interopRequireDefault(require("./slot-fill-context"));
15
19
 
16
20
  // @ts-nocheck
17
21
 
22
+ /**
23
+ * External dependencies
24
+ */
25
+
18
26
  /**
19
27
  * WordPress dependencies
20
28
  */
@@ -23,36 +31,26 @@ var _slotFillContext = _interopRequireDefault(require("./slot-fill-context"));
23
31
  * Internal dependencies
24
32
  */
25
33
  function useSlotRegistry() {
26
- const [slots, setSlots] = (0, _element.useState)({});
27
- const [fills, setFills] = (0, _element.useState)({});
34
+ const slots = (0, _element.useRef)((0, _utils.proxyMap)());
35
+ const fills = (0, _element.useRef)((0, _utils.proxyMap)());
28
36
  const registerSlot = (0, _element.useCallback)((name, ref, fillProps) => {
29
- setSlots(prevSlots => {
30
- const slot = prevSlots[name] || {};
31
- return { ...prevSlots,
32
- [name]: { ...slot,
33
- ref: ref || slot.ref,
34
- fillProps: fillProps || slot.fillProps || {}
35
- }
36
- };
37
- });
37
+ const slot = slots.current.get(name) || {};
38
+ slots.current.set(name, (0, _valtio.ref)({ ...slot,
39
+ ref: ref || slot.ref,
40
+ fillProps: fillProps || slot.fillProps || {}
41
+ }));
38
42
  }, []);
39
43
  const unregisterSlot = (0, _element.useCallback)((name, ref) => {
40
- setSlots(prevSlots => {
41
- const {
42
- [name]: slot,
43
- ...nextSlots
44
- } = prevSlots; // Make sure we're not unregistering a slot registered by another element
45
- // See https://github.com/WordPress/gutenberg/pull/19242#issuecomment-590295412
46
-
47
- if ((slot === null || slot === void 0 ? void 0 : slot.ref) === ref) {
48
- return nextSlots;
49
- }
44
+ var _slots$current$get;
50
45
 
51
- return prevSlots;
52
- });
46
+ // Make sure we're not unregistering a slot registered by another element
47
+ // See https://github.com/WordPress/gutenberg/pull/19242#issuecomment-590295412
48
+ if (((_slots$current$get = slots.current.get(name)) === null || _slots$current$get === void 0 ? void 0 : _slots$current$get.ref) === ref) {
49
+ slots.current.delete(name);
50
+ }
53
51
  }, []);
54
52
  const updateSlot = (0, _element.useCallback)((name, fillProps) => {
55
- const slot = slots[name];
53
+ const slot = slots.current.get(name);
56
54
 
57
55
  if (!slot) {
58
56
  return;
@@ -60,40 +58,32 @@ function useSlotRegistry() {
60
58
 
61
59
  if (!(0, _isShallowEqual.default)(slot.fillProps, fillProps)) {
62
60
  slot.fillProps = fillProps;
63
- const slotFills = fills[name];
61
+ const slotFills = fills.current.get(name);
64
62
 
65
63
  if (slotFills) {
66
64
  // Force update fills.
67
65
  slotFills.map(fill => fill.current.rerender());
68
66
  }
69
67
  }
70
- }, [slots, fills]);
68
+ }, []);
71
69
  const registerFill = (0, _element.useCallback)((name, ref) => {
72
- setFills(prevFills => ({ ...prevFills,
73
- [name]: [...(prevFills[name] || []), ref]
74
- }));
70
+ fills.current.set(name, (0, _valtio.ref)([...(fills.current.get(name) || []), ref]));
75
71
  }, []);
76
72
  const unregisterFill = (0, _element.useCallback)((name, ref) => {
77
- setFills(prevFills => {
78
- if (prevFills[name]) {
79
- return { ...prevFills,
80
- [name]: prevFills[name].filter(fillRef => fillRef !== ref)
81
- };
82
- }
83
-
84
- return prevFills;
85
- });
73
+ if (fills.current.get(name)) {
74
+ fills.current.set(name, (0, _valtio.ref)(fills.current.get(name).filter(fillRef => fillRef !== ref)));
75
+ }
86
76
  }, []); // Memoizing the return value so it can be directly passed to Provider value
87
77
 
88
78
  const registry = (0, _element.useMemo)(() => ({
89
- slots,
90
- fills,
79
+ slots: slots.current,
80
+ fills: fills.current,
91
81
  registerSlot,
92
82
  updateSlot,
93
83
  unregisterSlot,
94
84
  registerFill,
95
85
  unregisterFill
96
- }), [slots, fills, registerSlot, updateSlot, unregisterSlot, registerFill, unregisterFill]);
86
+ }), [registerSlot, updateSlot, unregisterSlot, registerFill, unregisterFill]);
97
87
  return registry;
98
88
  }
99
89
 
@@ -1 +1 @@
1
- {"version":3,"sources":["@wordpress/components/src/slot-fill/bubbles-virtually/slot-fill-provider.js"],"names":["useSlotRegistry","slots","setSlots","fills","setFills","registerSlot","name","ref","fillProps","prevSlots","slot","unregisterSlot","nextSlots","updateSlot","slotFills","map","fill","current","rerender","registerFill","prevFills","unregisterFill","filter","fillRef","registry","SlotFillProvider","children"],"mappings":"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","sourcesContent":["// @ts-nocheck\n/**\n * WordPress dependencies\n */\nimport { useMemo, useCallback, useState } from '@wordpress/element';\nimport isShallowEqual from '@wordpress/is-shallow-equal';\n\n/**\n * Internal dependencies\n */\nimport SlotFillContext from './slot-fill-context';\n\nfunction useSlotRegistry() {\n\tconst [ slots, setSlots ] = useState( {} );\n\tconst [ fills, setFills ] = useState( {} );\n\n\tconst registerSlot = useCallback( ( name, ref, fillProps ) => {\n\t\tsetSlots( ( prevSlots ) => {\n\t\t\tconst slot = prevSlots[ name ] || {};\n\t\t\treturn {\n\t\t\t\t...prevSlots,\n\t\t\t\t[ name ]: {\n\t\t\t\t\t...slot,\n\t\t\t\t\tref: ref || slot.ref,\n\t\t\t\t\tfillProps: fillProps || slot.fillProps || {},\n\t\t\t\t},\n\t\t\t};\n\t\t} );\n\t}, [] );\n\n\tconst unregisterSlot = useCallback( ( name, ref ) => {\n\t\tsetSlots( ( prevSlots ) => {\n\t\t\tconst { [ name ]: slot, ...nextSlots } = prevSlots;\n\t\t\t// Make sure we're not unregistering a slot registered by another element\n\t\t\t// See https://github.com/WordPress/gutenberg/pull/19242#issuecomment-590295412\n\t\t\tif ( slot?.ref === ref ) {\n\t\t\t\treturn nextSlots;\n\t\t\t}\n\t\t\treturn prevSlots;\n\t\t} );\n\t}, [] );\n\n\tconst updateSlot = useCallback(\n\t\t( name, fillProps ) => {\n\t\t\tconst slot = slots[ name ];\n\t\t\tif ( ! slot ) {\n\t\t\t\treturn;\n\t\t\t}\n\t\t\tif ( ! isShallowEqual( slot.fillProps, fillProps ) ) {\n\t\t\t\tslot.fillProps = fillProps;\n\t\t\t\tconst slotFills = fills[ name ];\n\t\t\t\tif ( slotFills ) {\n\t\t\t\t\t// Force update fills.\n\t\t\t\t\tslotFills.map( ( fill ) => fill.current.rerender() );\n\t\t\t\t}\n\t\t\t}\n\t\t},\n\t\t[ slots, fills ]\n\t);\n\n\tconst registerFill = useCallback( ( name, ref ) => {\n\t\tsetFills( ( prevFills ) => ( {\n\t\t\t...prevFills,\n\t\t\t[ name ]: [ ...( prevFills[ name ] || [] ), ref ],\n\t\t} ) );\n\t}, [] );\n\n\tconst unregisterFill = useCallback( ( name, ref ) => {\n\t\tsetFills( ( prevFills ) => {\n\t\t\tif ( prevFills[ name ] ) {\n\t\t\t\treturn {\n\t\t\t\t\t...prevFills,\n\t\t\t\t\t[ name ]: prevFills[ name ].filter(\n\t\t\t\t\t\t( fillRef ) => fillRef !== ref\n\t\t\t\t\t),\n\t\t\t\t};\n\t\t\t}\n\t\t\treturn prevFills;\n\t\t} );\n\t}, [] );\n\n\t// Memoizing the return value so it can be directly passed to Provider value\n\tconst registry = useMemo(\n\t\t() => ( {\n\t\t\tslots,\n\t\t\tfills,\n\t\t\tregisterSlot,\n\t\t\tupdateSlot,\n\t\t\tunregisterSlot,\n\t\t\tregisterFill,\n\t\t\tunregisterFill,\n\t\t} ),\n\t\t[\n\t\t\tslots,\n\t\t\tfills,\n\t\t\tregisterSlot,\n\t\t\tupdateSlot,\n\t\t\tunregisterSlot,\n\t\t\tregisterFill,\n\t\t\tunregisterFill,\n\t\t]\n\t);\n\n\treturn registry;\n}\n\nexport default function SlotFillProvider( { children } ) {\n\tconst registry = useSlotRegistry();\n\treturn (\n\t\t<SlotFillContext.Provider value={ registry }>\n\t\t\t{ children }\n\t\t</SlotFillContext.Provider>\n\t);\n}\n"]}
1
+ {"version":3,"sources":["@wordpress/components/src/slot-fill/bubbles-virtually/slot-fill-provider.js"],"names":["useSlotRegistry","slots","fills","registerSlot","name","ref","fillProps","slot","current","get","set","unregisterSlot","delete","updateSlot","slotFills","map","fill","rerender","registerFill","unregisterFill","filter","fillRef","registry","SlotFillProvider","children"],"mappings":"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","sourcesContent":["// @ts-nocheck\n/**\n * External dependencies\n */\nimport { ref as valRef } from 'valtio';\nimport { proxyMap } from 'valtio/utils';\n\n/**\n * WordPress dependencies\n */\nimport { useMemo, useCallback, useRef } from '@wordpress/element';\nimport isShallowEqual from '@wordpress/is-shallow-equal';\n\n/**\n * Internal dependencies\n */\nimport SlotFillContext from './slot-fill-context';\n\nfunction useSlotRegistry() {\n\tconst slots = useRef( proxyMap() );\n\tconst fills = useRef( proxyMap() );\n\n\tconst registerSlot = useCallback( ( name, ref, fillProps ) => {\n\t\tconst slot = slots.current.get( name ) || {};\n\t\tslots.current.set(\n\t\t\tname,\n\t\t\tvalRef( {\n\t\t\t\t...slot,\n\t\t\t\tref: ref || slot.ref,\n\t\t\t\tfillProps: fillProps || slot.fillProps || {},\n\t\t\t} )\n\t\t);\n\t}, [] );\n\n\tconst unregisterSlot = useCallback( ( name, ref ) => {\n\t\t// Make sure we're not unregistering a slot registered by another element\n\t\t// See https://github.com/WordPress/gutenberg/pull/19242#issuecomment-590295412\n\t\tif ( slots.current.get( name )?.ref === ref ) {\n\t\t\tslots.current.delete( name );\n\t\t}\n\t}, [] );\n\n\tconst updateSlot = useCallback( ( name, fillProps ) => {\n\t\tconst slot = slots.current.get( name );\n\t\tif ( ! slot ) {\n\t\t\treturn;\n\t\t}\n\n\t\tif ( ! isShallowEqual( slot.fillProps, fillProps ) ) {\n\t\t\tslot.fillProps = fillProps;\n\t\t\tconst slotFills = fills.current.get( name );\n\t\t\tif ( slotFills ) {\n\t\t\t\t// Force update fills.\n\t\t\t\tslotFills.map( ( fill ) => fill.current.rerender() );\n\t\t\t}\n\t\t}\n\t}, [] );\n\n\tconst registerFill = useCallback( ( name, ref ) => {\n\t\tfills.current.set(\n\t\t\tname,\n\t\t\tvalRef( [ ...( fills.current.get( name ) || [] ), ref ] )\n\t\t);\n\t}, [] );\n\n\tconst unregisterFill = useCallback( ( name, ref ) => {\n\t\tif ( fills.current.get( name ) ) {\n\t\t\tfills.current.set(\n\t\t\t\tname,\n\t\t\t\tvalRef(\n\t\t\t\t\tfills.current\n\t\t\t\t\t\t.get( name )\n\t\t\t\t\t\t.filter( ( fillRef ) => fillRef !== ref )\n\t\t\t\t)\n\t\t\t);\n\t\t}\n\t}, [] );\n\n\t// Memoizing the return value so it can be directly passed to Provider value\n\tconst registry = useMemo(\n\t\t() => ( {\n\t\t\tslots: slots.current,\n\t\t\tfills: fills.current,\n\t\t\tregisterSlot,\n\t\t\tupdateSlot,\n\t\t\tunregisterSlot,\n\t\t\tregisterFill,\n\t\t\tunregisterFill,\n\t\t} ),\n\t\t[\n\t\t\tregisterSlot,\n\t\t\tupdateSlot,\n\t\t\tunregisterSlot,\n\t\t\tregisterFill,\n\t\t\tunregisterFill,\n\t\t]\n\t);\n\n\treturn registry;\n}\n\nexport default function SlotFillProvider( { children } ) {\n\tconst registry = useSlotRegistry();\n\treturn (\n\t\t<SlotFillContext.Provider value={ registry }>\n\t\t\t{ children }\n\t\t</SlotFillContext.Provider>\n\t);\n}\n"]}
@@ -0,0 +1,39 @@
1
+ "use strict";
2
+
3
+ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
4
+
5
+ Object.defineProperty(exports, "__esModule", {
6
+ value: true
7
+ });
8
+ exports.default = useSlotFills;
9
+
10
+ var _valtio = require("valtio");
11
+
12
+ var _element = require("@wordpress/element");
13
+
14
+ var _slotFillContext = _interopRequireDefault(require("./slot-fill-context"));
15
+
16
+ // @ts-nocheck
17
+
18
+ /**
19
+ * External dependencies
20
+ */
21
+
22
+ /**
23
+ * WordPress dependencies
24
+ */
25
+
26
+ /**
27
+ * Internal dependencies
28
+ */
29
+ function useSlotFills(name) {
30
+ const registry = (0, _element.useContext)(_slotFillContext.default);
31
+ const fills = (0, _valtio.useSnapshot)(registry.fills, {
32
+ sync: true
33
+ }); // The important bit here is that this call ensures that the hook
34
+ // only causes a re-render if the "fills" of a given slot name
35
+ // change change, not any fills.
36
+
37
+ return fills.get(name);
38
+ }
39
+ //# sourceMappingURL=use-slot-fills.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"sources":["@wordpress/components/src/slot-fill/bubbles-virtually/use-slot-fills.js"],"names":["useSlotFills","name","registry","SlotFillContext","fills","sync","get"],"mappings":";;;;;;;;;AAIA;;AAKA;;AAKA;;AAdA;;AACA;AACA;AACA;;AAGA;AACA;AACA;;AAGA;AACA;AACA;AAGe,SAASA,YAAT,CAAuBC,IAAvB,EAA8B;AAC5C,QAAMC,QAAQ,GAAG,yBAAYC,wBAAZ,CAAjB;AACA,QAAMC,KAAK,GAAG,yBAAaF,QAAQ,CAACE,KAAtB,EAA6B;AAAEC,IAAAA,IAAI,EAAE;AAAR,GAA7B,CAAd,CAF4C,CAG5C;AACA;AACA;;AACA,SAAOD,KAAK,CAACE,GAAN,CAAWL,IAAX,CAAP;AACA","sourcesContent":["// @ts-nocheck\n/**\n * External dependencies\n */\nimport { useSnapshot } from 'valtio';\n\n/**\n * WordPress dependencies\n */\nimport { useContext } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport SlotFillContext from './slot-fill-context';\n\nexport default function useSlotFills( name ) {\n\tconst registry = useContext( SlotFillContext );\n\tconst fills = useSnapshot( registry.fills, { sync: true } );\n\t// The important bit here is that this call ensures that the hook\n\t// only causes a re-render if the \"fills\" of a given slot name\n\t// change change, not any fills.\n\treturn fills.get( name );\n}\n"]}
@@ -7,12 +7,18 @@ Object.defineProperty(exports, "__esModule", {
7
7
  });
8
8
  exports.default = useSlot;
9
9
 
10
+ var _valtio = require("valtio");
11
+
10
12
  var _element = require("@wordpress/element");
11
13
 
12
14
  var _slotFillContext = _interopRequireDefault(require("./slot-fill-context"));
13
15
 
14
16
  // @ts-nocheck
15
17
 
18
+ /**
19
+ * External dependencies
20
+ */
21
+
16
22
  /**
17
23
  * WordPress dependencies
18
24
  */
@@ -22,9 +28,13 @@ var _slotFillContext = _interopRequireDefault(require("./slot-fill-context"));
22
28
  */
23
29
  function useSlot(name) {
24
30
  const registry = (0, _element.useContext)(_slotFillContext.default);
25
- const slot = registry.slots[name] || {};
26
- const slotFills = registry.fills[name];
27
- const fills = (0, _element.useMemo)(() => slotFills || [], [slotFills]);
31
+ const slots = (0, _valtio.useSnapshot)(registry.slots, {
32
+ sync: true
33
+ }); // The important bit here is that this call ensures
34
+ // the hook only causes a re-render if the slot
35
+ // with the given name change, not any other slot.
36
+
37
+ const slot = slots.get(name);
28
38
  const updateSlot = (0, _element.useCallback)(fillProps => {
29
39
  registry.updateSlot(name, fillProps);
30
40
  }, [name, registry.updateSlot]);
@@ -40,7 +50,6 @@ function useSlot(name) {
40
50
  return { ...slot,
41
51
  updateSlot,
42
52
  unregisterSlot,
43
- fills,
44
53
  registerFill,
45
54
  unregisterFill
46
55
  };
@@ -1 +1 @@
1
- {"version":3,"sources":["@wordpress/components/src/slot-fill/bubbles-virtually/use-slot.js"],"names":["useSlot","name","registry","SlotFillContext","slot","slots","slotFills","fills","updateSlot","fillProps","unregisterSlot","slotRef","registerFill","fillRef","unregisterFill"],"mappings":";;;;;;;;;AAIA;;AAKA;;AATA;;AACA;AACA;AACA;;AAGA;AACA;AACA;AAGe,SAASA,OAAT,CAAkBC,IAAlB,EAAyB;AACvC,QAAMC,QAAQ,GAAG,yBAAYC,wBAAZ,CAAjB;AAEA,QAAMC,IAAI,GAAGF,QAAQ,CAACG,KAAT,CAAgBJ,IAAhB,KAA0B,EAAvC;AACA,QAAMK,SAAS,GAAGJ,QAAQ,CAACK,KAAT,CAAgBN,IAAhB,CAAlB;AACA,QAAMM,KAAK,GAAG,sBAAS,MAAMD,SAAS,IAAI,EAA5B,EAAgC,CAAEA,SAAF,CAAhC,CAAd;AAEA,QAAME,UAAU,GAAG,0BAChBC,SAAF,IAAiB;AAChBP,IAAAA,QAAQ,CAACM,UAAT,CAAqBP,IAArB,EAA2BQ,SAA3B;AACA,GAHiB,EAIlB,CAAER,IAAF,EAAQC,QAAQ,CAACM,UAAjB,CAJkB,CAAnB;AAOA,QAAME,cAAc,GAAG,0BACpBC,OAAF,IAAe;AACdT,IAAAA,QAAQ,CAACQ,cAAT,CAAyBT,IAAzB,EAA+BU,OAA/B;AACA,GAHqB,EAItB,CAAEV,IAAF,EAAQC,QAAQ,CAACQ,cAAjB,CAJsB,CAAvB;AAOA,QAAME,YAAY,GAAG,0BAClBC,OAAF,IAAe;AACdX,IAAAA,QAAQ,CAACU,YAAT,CAAuBX,IAAvB,EAA6BY,OAA7B;AACA,GAHmB,EAIpB,CAAEZ,IAAF,EAAQC,QAAQ,CAACU,YAAjB,CAJoB,CAArB;AAOA,QAAME,cAAc,GAAG,0BACpBD,OAAF,IAAe;AACdX,IAAAA,QAAQ,CAACY,cAAT,CAAyBb,IAAzB,EAA+BY,OAA/B;AACA,GAHqB,EAItB,CAAEZ,IAAF,EAAQC,QAAQ,CAACY,cAAjB,CAJsB,CAAvB;AAOA,SAAO,EACN,GAAGV,IADG;AAENI,IAAAA,UAFM;AAGNE,IAAAA,cAHM;AAINH,IAAAA,KAJM;AAKNK,IAAAA,YALM;AAMNE,IAAAA;AANM,GAAP;AAQA","sourcesContent":["// @ts-nocheck\n/**\n * WordPress dependencies\n */\nimport { useCallback, useContext, useMemo } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport SlotFillContext from './slot-fill-context';\n\nexport default function useSlot( name ) {\n\tconst registry = useContext( SlotFillContext );\n\n\tconst slot = registry.slots[ name ] || {};\n\tconst slotFills = registry.fills[ name ];\n\tconst fills = useMemo( () => slotFills || [], [ slotFills ] );\n\n\tconst updateSlot = useCallback(\n\t\t( fillProps ) => {\n\t\t\tregistry.updateSlot( name, fillProps );\n\t\t},\n\t\t[ name, registry.updateSlot ]\n\t);\n\n\tconst unregisterSlot = useCallback(\n\t\t( slotRef ) => {\n\t\t\tregistry.unregisterSlot( name, slotRef );\n\t\t},\n\t\t[ name, registry.unregisterSlot ]\n\t);\n\n\tconst registerFill = useCallback(\n\t\t( fillRef ) => {\n\t\t\tregistry.registerFill( name, fillRef );\n\t\t},\n\t\t[ name, registry.registerFill ]\n\t);\n\n\tconst unregisterFill = useCallback(\n\t\t( fillRef ) => {\n\t\t\tregistry.unregisterFill( name, fillRef );\n\t\t},\n\t\t[ name, registry.unregisterFill ]\n\t);\n\n\treturn {\n\t\t...slot,\n\t\tupdateSlot,\n\t\tunregisterSlot,\n\t\tfills,\n\t\tregisterFill,\n\t\tunregisterFill,\n\t};\n}\n"]}
1
+ {"version":3,"sources":["@wordpress/components/src/slot-fill/bubbles-virtually/use-slot.js"],"names":["useSlot","name","registry","SlotFillContext","slots","sync","slot","get","updateSlot","fillProps","unregisterSlot","slotRef","registerFill","fillRef","unregisterFill"],"mappings":";;;;;;;;;AAIA;;AAKA;;AAKA;;AAdA;;AACA;AACA;AACA;;AAGA;AACA;AACA;;AAGA;AACA;AACA;AAGe,SAASA,OAAT,CAAkBC,IAAlB,EAAyB;AACvC,QAAMC,QAAQ,GAAG,yBAAYC,wBAAZ,CAAjB;AACA,QAAMC,KAAK,GAAG,yBAAaF,QAAQ,CAACE,KAAtB,EAA6B;AAAEC,IAAAA,IAAI,EAAE;AAAR,GAA7B,CAAd,CAFuC,CAGvC;AACA;AACA;;AACA,QAAMC,IAAI,GAAGF,KAAK,CAACG,GAAN,CAAWN,IAAX,CAAb;AAEA,QAAMO,UAAU,GAAG,0BAChBC,SAAF,IAAiB;AAChBP,IAAAA,QAAQ,CAACM,UAAT,CAAqBP,IAArB,EAA2BQ,SAA3B;AACA,GAHiB,EAIlB,CAAER,IAAF,EAAQC,QAAQ,CAACM,UAAjB,CAJkB,CAAnB;AAOA,QAAME,cAAc,GAAG,0BACpBC,OAAF,IAAe;AACdT,IAAAA,QAAQ,CAACQ,cAAT,CAAyBT,IAAzB,EAA+BU,OAA/B;AACA,GAHqB,EAItB,CAAEV,IAAF,EAAQC,QAAQ,CAACQ,cAAjB,CAJsB,CAAvB;AAOA,QAAME,YAAY,GAAG,0BAClBC,OAAF,IAAe;AACdX,IAAAA,QAAQ,CAACU,YAAT,CAAuBX,IAAvB,EAA6BY,OAA7B;AACA,GAHmB,EAIpB,CAAEZ,IAAF,EAAQC,QAAQ,CAACU,YAAjB,CAJoB,CAArB;AAOA,QAAME,cAAc,GAAG,0BACpBD,OAAF,IAAe;AACdX,IAAAA,QAAQ,CAACY,cAAT,CAAyBb,IAAzB,EAA+BY,OAA/B;AACA,GAHqB,EAItB,CAAEZ,IAAF,EAAQC,QAAQ,CAACY,cAAjB,CAJsB,CAAvB;AAOA,SAAO,EACN,GAAGR,IADG;AAENE,IAAAA,UAFM;AAGNE,IAAAA,cAHM;AAINE,IAAAA,YAJM;AAKNE,IAAAA;AALM,GAAP;AAOA","sourcesContent":["// @ts-nocheck\n/**\n * External dependencies\n */\nimport { useSnapshot } from 'valtio';\n\n/**\n * WordPress dependencies\n */\nimport { useCallback, useContext } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport SlotFillContext from './slot-fill-context';\n\nexport default function useSlot( name ) {\n\tconst registry = useContext( SlotFillContext );\n\tconst slots = useSnapshot( registry.slots, { sync: true } );\n\t// The important bit here is that this call ensures\n\t// the hook only causes a re-render if the slot\n\t// with the given name change, not any other slot.\n\tconst slot = slots.get( name );\n\n\tconst updateSlot = useCallback(\n\t\t( fillProps ) => {\n\t\t\tregistry.updateSlot( name, fillProps );\n\t\t},\n\t\t[ name, registry.updateSlot ]\n\t);\n\n\tconst unregisterSlot = useCallback(\n\t\t( slotRef ) => {\n\t\t\tregistry.unregisterSlot( name, slotRef );\n\t\t},\n\t\t[ name, registry.unregisterSlot ]\n\t);\n\n\tconst registerFill = useCallback(\n\t\t( fillRef ) => {\n\t\t\tregistry.registerFill( name, fillRef );\n\t\t},\n\t\t[ name, registry.registerFill ]\n\t);\n\n\tconst unregisterFill = useCallback(\n\t\t( fillRef ) => {\n\t\t\tregistry.unregisterFill( name, fillRef );\n\t\t},\n\t\t[ name, registry.unregisterFill ]\n\t);\n\n\treturn {\n\t\t...slot,\n\t\tupdateSlot,\n\t\tunregisterSlot,\n\t\tregisterFill,\n\t\tunregisterFill,\n\t};\n}\n"]}
@@ -15,6 +15,12 @@ Object.defineProperty(exports, "useSlot", {
15
15
  return _useSlot.default;
16
16
  }
17
17
  });
18
+ Object.defineProperty(exports, "useSlotFills", {
19
+ enumerable: true,
20
+ get: function () {
21
+ return _useSlotFills.default;
22
+ }
23
+ });
18
24
 
19
25
  var _element = require("@wordpress/element");
20
26
 
@@ -34,6 +40,8 @@ var _provider = _interopRequireDefault(require("./provider"));
34
40
 
35
41
  var _useSlot = _interopRequireDefault(require("./bubbles-virtually/use-slot"));
36
42
 
43
+ var _useSlotFills = _interopRequireDefault(require("./bubbles-virtually/use-slot-fills"));
44
+
37
45
  // @ts-nocheck
38
46
 
39
47
  /**
@@ -1 +1 @@
1
- {"version":3,"sources":["@wordpress/components/src/slot-fill/index.js"],"names":["Fill","props","Slot","ref","bubblesVirtually","Provider","children","createSlotFill","name","FillComponent","displayName","SlotComponent","__unstableName"],"mappings":";;;;;;;;;;;;;;;;;;AAIA;;;;AAKA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AAfA;;AACA;AACA;AACA;;AAGA;AACA;AACA;AASO,SAASA,IAAT,CAAeC,KAAf,EAAuB;AAC7B;AACA;AACA;AACA,SACC,qDACC,4BAAC,aAAD,EAAeA,KAAf,CADD,EAEC,4BAAC,cAAD,EAA2BA,KAA3B,CAFD,CADD;AAMA;;AACM,MAAMC,IAAI,GAAG,yBAAY,OAAkCC,GAAlC,KAA2C;AAAA,MAAzC;AAAEC,IAAAA,gBAAF;AAAoB,OAAGH;AAAvB,GAAyC;;AAC1E,MAAKG,gBAAL,EAAwB;AACvB,WAAO,4BAAC,cAAD,6BAA2BH,KAA3B;AAAmC,MAAA,GAAG,EAAGE;AAAzC,OAAP;AACA;;AACD,SAAO,4BAAC,aAAD,EAAeF,KAAf,CAAP;AACA,CALmB,CAAb;;;AAOA,SAASI,QAAT,QAA4C;AAAA,MAAzB;AAAEC,IAAAA,QAAF;AAAY,OAAGL;AAAf,GAAyB;AAClD,SACC,4BAAC,iBAAD,EAAuBA,KAAvB,EACC,4BAAC,yBAAD,QACGK,QADH,CADD,CADD;AAOA;;AAEM,SAASC,cAAT,CAAyBC,IAAzB,EAAgC;AACtC,QAAMC,aAAa,GAAKR,KAAF,IAAa,4BAAC,IAAD;AAAM,IAAA,IAAI,EAAGO;AAAb,KAAyBP,KAAzB,EAAnC;;AACAQ,EAAAA,aAAa,CAACC,WAAd,GAA4BF,IAAI,GAAG,MAAnC;;AAEA,QAAMG,aAAa,GAAKV,KAAF,IAAa,4BAAC,IAAD;AAAM,IAAA,IAAI,EAAGO;AAAb,KAAyBP,KAAzB,EAAnC;;AACAU,EAAAA,aAAa,CAACD,WAAd,GAA4BF,IAAI,GAAG,MAAnC;AACAG,EAAAA,aAAa,CAACC,cAAd,GAA+BJ,IAA/B;AAEA,SAAO;AACNR,IAAAA,IAAI,EAAES,aADA;AAENP,IAAAA,IAAI,EAAES;AAFA,GAAP;AAIA","sourcesContent":["// @ts-nocheck\n/**\n * WordPress dependencies\n */\nimport { forwardRef } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport BaseFill from './fill';\nimport BaseSlot from './slot';\nimport BubblesVirtuallyFill from './bubbles-virtually/fill';\nimport BubblesVirtuallySlot from './bubbles-virtually/slot';\nimport BubblesVirtuallySlotFillProvider from './bubbles-virtually/slot-fill-provider';\nimport SlotFillProvider from './provider';\nimport useSlot from './bubbles-virtually/use-slot';\n\nexport function Fill( props ) {\n\t// We're adding both Fills here so they can register themselves before\n\t// their respective slot has been registered. Only the Fill that has a slot\n\t// will render. The other one will return null.\n\treturn (\n\t\t<>\n\t\t\t<BaseFill { ...props } />\n\t\t\t<BubblesVirtuallyFill { ...props } />\n\t\t</>\n\t);\n}\nexport const Slot = forwardRef( ( { bubblesVirtually, ...props }, ref ) => {\n\tif ( bubblesVirtually ) {\n\t\treturn <BubblesVirtuallySlot { ...props } ref={ ref } />;\n\t}\n\treturn <BaseSlot { ...props } />;\n} );\n\nexport function Provider( { children, ...props } ) {\n\treturn (\n\t\t<SlotFillProvider { ...props }>\n\t\t\t<BubblesVirtuallySlotFillProvider>\n\t\t\t\t{ children }\n\t\t\t</BubblesVirtuallySlotFillProvider>\n\t\t</SlotFillProvider>\n\t);\n}\n\nexport function createSlotFill( name ) {\n\tconst FillComponent = ( props ) => <Fill name={ name } { ...props } />;\n\tFillComponent.displayName = name + 'Fill';\n\n\tconst SlotComponent = ( props ) => <Slot name={ name } { ...props } />;\n\tSlotComponent.displayName = name + 'Slot';\n\tSlotComponent.__unstableName = name;\n\n\treturn {\n\t\tFill: FillComponent,\n\t\tSlot: SlotComponent,\n\t};\n}\n\nexport { useSlot };\n"]}
1
+ {"version":3,"sources":["@wordpress/components/src/slot-fill/index.js"],"names":["Fill","props","Slot","ref","bubblesVirtually","Provider","children","createSlotFill","name","FillComponent","displayName","SlotComponent","__unstableName"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;AAIA;;;;AAKA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AAhBA;;AACA;AACA;AACA;;AAGA;AACA;AACA;AAUO,SAASA,IAAT,CAAeC,KAAf,EAAuB;AAC7B;AACA;AACA;AACA,SACC,qDACC,4BAAC,aAAD,EAAeA,KAAf,CADD,EAEC,4BAAC,cAAD,EAA2BA,KAA3B,CAFD,CADD;AAMA;;AACM,MAAMC,IAAI,GAAG,yBAAY,OAAkCC,GAAlC,KAA2C;AAAA,MAAzC;AAAEC,IAAAA,gBAAF;AAAoB,OAAGH;AAAvB,GAAyC;;AAC1E,MAAKG,gBAAL,EAAwB;AACvB,WAAO,4BAAC,cAAD,6BAA2BH,KAA3B;AAAmC,MAAA,GAAG,EAAGE;AAAzC,OAAP;AACA;;AACD,SAAO,4BAAC,aAAD,EAAeF,KAAf,CAAP;AACA,CALmB,CAAb;;;AAOA,SAASI,QAAT,QAA4C;AAAA,MAAzB;AAAEC,IAAAA,QAAF;AAAY,OAAGL;AAAf,GAAyB;AAClD,SACC,4BAAC,iBAAD,EAAuBA,KAAvB,EACC,4BAAC,yBAAD,QACGK,QADH,CADD,CADD;AAOA;;AAEM,SAASC,cAAT,CAAyBC,IAAzB,EAAgC;AACtC,QAAMC,aAAa,GAAKR,KAAF,IAAa,4BAAC,IAAD;AAAM,IAAA,IAAI,EAAGO;AAAb,KAAyBP,KAAzB,EAAnC;;AACAQ,EAAAA,aAAa,CAACC,WAAd,GAA4BF,IAAI,GAAG,MAAnC;;AAEA,QAAMG,aAAa,GAAKV,KAAF,IAAa,4BAAC,IAAD;AAAM,IAAA,IAAI,EAAGO;AAAb,KAAyBP,KAAzB,EAAnC;;AACAU,EAAAA,aAAa,CAACD,WAAd,GAA4BF,IAAI,GAAG,MAAnC;AACAG,EAAAA,aAAa,CAACC,cAAd,GAA+BJ,IAA/B;AAEA,SAAO;AACNR,IAAAA,IAAI,EAAES,aADA;AAENP,IAAAA,IAAI,EAAES;AAFA,GAAP;AAIA","sourcesContent":["// @ts-nocheck\n/**\n * WordPress dependencies\n */\nimport { forwardRef } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport BaseFill from './fill';\nimport BaseSlot from './slot';\nimport BubblesVirtuallyFill from './bubbles-virtually/fill';\nimport BubblesVirtuallySlot from './bubbles-virtually/slot';\nimport BubblesVirtuallySlotFillProvider from './bubbles-virtually/slot-fill-provider';\nimport SlotFillProvider from './provider';\nimport useSlot from './bubbles-virtually/use-slot';\nexport { default as useSlotFills } from './bubbles-virtually/use-slot-fills';\n\nexport function Fill( props ) {\n\t// We're adding both Fills here so they can register themselves before\n\t// their respective slot has been registered. Only the Fill that has a slot\n\t// will render. The other one will return null.\n\treturn (\n\t\t<>\n\t\t\t<BaseFill { ...props } />\n\t\t\t<BubblesVirtuallyFill { ...props } />\n\t\t</>\n\t);\n}\nexport const Slot = forwardRef( ( { bubblesVirtually, ...props }, ref ) => {\n\tif ( bubblesVirtually ) {\n\t\treturn <BubblesVirtuallySlot { ...props } ref={ ref } />;\n\t}\n\treturn <BaseSlot { ...props } />;\n} );\n\nexport function Provider( { children, ...props } ) {\n\treturn (\n\t\t<SlotFillProvider { ...props }>\n\t\t\t<BubblesVirtuallySlotFillProvider>\n\t\t\t\t{ children }\n\t\t\t</BubblesVirtuallySlotFillProvider>\n\t\t</SlotFillProvider>\n\t);\n}\n\nexport function createSlotFill( name ) {\n\tconst FillComponent = ( props ) => <Fill name={ name } { ...props } />;\n\tFillComponent.displayName = name + 'Fill';\n\n\tconst SlotComponent = ( props ) => <Slot name={ name } { ...props } />;\n\tSlotComponent.displayName = name + 'Slot';\n\tSlotComponent.__unstableName = name;\n\n\treturn {\n\t\tFill: FillComponent,\n\t\tSlot: SlotComponent,\n\t};\n}\n\nexport { useSlot };\n"]}
@@ -102,7 +102,7 @@ function TabPanel(_ref2) {
102
102
  const instanceId = (0, _compose.useInstanceId)(TabPanel, 'tab-panel');
103
103
  const [selected, setSelected] = (0, _element.useState)();
104
104
 
105
- const handleClick = tabKey => {
105
+ const handleTabSelection = tabKey => {
106
106
  setSelected(tabKey);
107
107
  onSelect === null || onSelect === void 0 ? void 0 : onSelect(tabKey);
108
108
  };
@@ -120,8 +120,8 @@ function TabPanel(_ref2) {
120
120
  name: selected
121
121
  });
122
122
 
123
- if (!newSelectedTab) {
124
- setSelected(initialTabName || (tabs.length > 0 ? tabs[0].name : undefined));
123
+ if (!newSelectedTab && tabs.length > 0) {
124
+ handleTabSelection(initialTabName || tabs[0].name);
125
125
  }
126
126
  }, [tabs]);
127
127
  return (0, _element.createElement)("div", {
@@ -139,7 +139,7 @@ function TabPanel(_ref2) {
139
139
  "aria-controls": `${instanceId}-${tab.name}-view`,
140
140
  selected: tab.name === selected,
141
141
  key: tab.name,
142
- onClick: () => handleClick(tab.name)
142
+ onClick: () => handleTabSelection(tab.name)
143
143
  }, tab.title))), selectedTab && (0, _element.createElement)("div", {
144
144
  key: selectedId,
145
145
  "aria-labelledby": selectedId,
@@ -1 +1 @@
1
- {"version":3,"sources":["@wordpress/components/src/tab-panel/index.tsx"],"names":["TabButton","tabId","onClick","children","selected","rest","TabPanel","className","tabs","initialTabName","orientation","activeClass","onSelect","instanceId","setSelected","handleClick","tabKey","onNavigate","_childIndex","child","click","selectedTab","name","selectedId","newSelectedTab","length","undefined","map","tab","title"],"mappings":";;;;;;;;;;AASA;;;;AANA;;AACA;;AAMA;;AAKA;;AACA;;AAhBA;AACA;AACA;;AAIA;AACA;AACA;;AAIA;AACA;AACA;AAMA,MAAMA,SAAS,GAAG;AAAA,MAAE;AACnBC,IAAAA,KADmB;AAEnBC,IAAAA,OAFmB;AAGnBC,IAAAA,QAHmB;AAInBC,IAAAA,QAJmB;AAKnB,OAAGC;AALgB,GAAF;AAAA,SAOjB,4BAAC,eAAD;AACC,IAAA,IAAI,EAAC,KADN;AAEC,IAAA,QAAQ,EAAGD,QAAQ,GAAG,IAAH,GAAU,CAAC,CAF/B;AAGC,qBAAgBA,QAHjB;AAIC,IAAA,EAAE,EAAGH,KAJN;AAKC,IAAA,OAAO,EAAGC;AALX,KAMMG,IANN,GAQGF,QARH,CAPiB;AAAA,CAAlB;AAmBA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;;AACO,SAASG,QAAT,QAQqD;AAAA;;AAAA,MARlC;AACzBC,IAAAA,SADyB;AAEzBJ,IAAAA,QAFyB;AAGzBK,IAAAA,IAHyB;AAIzBC,IAAAA,cAJyB;AAKzBC,IAAAA,WAAW,GAAG,YALW;AAMzBC,IAAAA,WAAW,GAAG,WANW;AAOzBC,IAAAA;AAPyB,GAQkC;AAC3D,QAAMC,UAAU,GAAG,4BAAeP,QAAf,EAAyB,WAAzB,CAAnB;AACA,QAAM,CAAEF,QAAF,EAAYU,WAAZ,IAA4B,wBAAlC;;AAEA,QAAMC,WAAW,GAAKC,MAAF,IAAsB;AACzCF,IAAAA,WAAW,CAAEE,MAAF,CAAX;AACAJ,IAAAA,QAAQ,SAAR,IAAAA,QAAQ,WAAR,YAAAA,QAAQ,CAAII,MAAJ,CAAR;AACA,GAHD;;AAKA,QAAMC,UAAU,GAAG,CAAEC,WAAF,EAAuBC,KAAvB,KAAqD;AACvEA,IAAAA,KAAK,CAACC,KAAN;AACA,GAFD;;AAGA,QAAMC,WAAW,GAAG,kBAAMb,IAAN,EAAY;AAAEc,IAAAA,IAAI,EAAElB;AAAR,GAAZ,CAApB;AACA,QAAMmB,UAAU,GAAI,GAAGV,UAAY,IAAhB,qBAAoBQ,WAApB,aAAoBA,WAApB,uBAAoBA,WAAW,CAAEC,IAAjC,iEAAyC,MAAQ,EAApE;AAEA,0BAAW,MAAM;AAChB,UAAME,cAAc,GAAG,kBAAMhB,IAAN,EAAY;AAAEc,MAAAA,IAAI,EAAElB;AAAR,KAAZ,CAAvB;;AACA,QAAK,CAAEoB,cAAP,EAAwB;AACvBV,MAAAA,WAAW,CACVL,cAAc,KACXD,IAAI,CAACiB,MAAL,GAAc,CAAd,GAAkBjB,IAAI,CAAE,CAAF,CAAJ,CAAUc,IAA5B,GAAmCI,SADxB,CADJ,CAAX;AAIA;AACD,GARD,EAQG,CAAElB,IAAF,CARH;AAUA,SACC;AAAK,IAAA,SAAS,EAAGD;AAAjB,KACC,4BAAC,iCAAD;AACC,IAAA,IAAI,EAAC,SADN;AAEC,IAAA,WAAW,EAAGG,WAFf;AAGC,IAAA,UAAU,EAAGO,UAHd;AAIC,IAAA,SAAS,EAAC;AAJX,KAMGT,IAAI,CAACmB,GAAL,CAAYC,GAAF,IACX,4BAAC,SAAD;AACC,IAAA,SAAS,EAAG,yBACX,iCADW,EAEXA,GAAG,CAACrB,SAFO,EAGX;AACC,OAAEI,WAAF,GAAiBiB,GAAG,CAACN,IAAJ,KAAalB;AAD/B,KAHW,CADb;AAQC,IAAA,KAAK,EAAI,GAAGS,UAAY,IAAIe,GAAG,CAACN,IAAM,EARvC;AASC,qBAAiB,GAAGT,UAAY,IAAIe,GAAG,CAACN,IAAM,OAT/C;AAUC,IAAA,QAAQ,EAAGM,GAAG,CAACN,IAAJ,KAAalB,QAVzB;AAWC,IAAA,GAAG,EAAGwB,GAAG,CAACN,IAXX;AAYC,IAAA,OAAO,EAAG,MAAMP,WAAW,CAAEa,GAAG,CAACN,IAAN;AAZ5B,KAcGM,GAAG,CAACC,KAdP,CADC,CANH,CADD,EA0BGR,WAAW,IACZ;AACC,IAAA,GAAG,EAAGE,UADP;AAEC,uBAAkBA,UAFnB;AAGC,IAAA,IAAI,EAAC,UAHN;AAIC,IAAA,EAAE,EAAI,GAAGA,UAAY,OAJtB;AAKC,IAAA,SAAS,EAAC;AALX,KAOGpB,QAAQ,CAAEkB,WAAF,CAPX,CA3BF,CADD;AAwCA;;eAEcf,Q","sourcesContent":["/**\n * External dependencies\n */\nimport classnames from 'classnames';\nimport { find } from 'lodash';\n\n/**\n * WordPress dependencies\n */\nimport { useState, useEffect } from '@wordpress/element';\nimport { useInstanceId } from '@wordpress/compose';\n\n/**\n * Internal dependencies\n */\nimport { NavigableMenu } from '../navigable-container';\nimport Button from '../button';\nimport type { TabButtonProps, TabPanelProps } from './types';\nimport type { WordPressComponentProps } from '../ui/context';\n\nconst TabButton = ( {\n\ttabId,\n\tonClick,\n\tchildren,\n\tselected,\n\t...rest\n}: TabButtonProps ) => (\n\t<Button\n\t\trole=\"tab\"\n\t\ttabIndex={ selected ? null : -1 }\n\t\taria-selected={ selected }\n\t\tid={ tabId }\n\t\tonClick={ onClick }\n\t\t{ ...rest }\n\t>\n\t\t{ children }\n\t</Button>\n);\n\n/**\n * TabPanel is an ARIA-compliant tabpanel.\n *\n * TabPanels organize content across different screens, data sets, and interactions.\n * It has two sections: a list of tabs, and the view to show when tabs are chosen.\n *\n * ```jsx\n * import { TabPanel } from '@wordpress/components';\n *\n * const onSelect = ( tabName ) => {\n * console.log( 'Selecting tab', tabName );\n * };\n *\n * const MyTabPanel = () => (\n * <TabPanel\n * className=\"my-tab-panel\"\n * activeClass=\"active-tab\"\n * onSelect={ onSelect }\n * tabs={ [\n * {\n * name: 'tab1',\n * title: 'Tab 1',\n * className: 'tab-one',\n * },\n * {\n * name: 'tab2',\n * title: 'Tab 2',\n * className: 'tab-two',\n * },\n * ] }\n * >\n * { ( tab ) => <p>{ tab.title }</p> }\n * </TabPanel>\n * );\n * ```\n */\nexport function TabPanel( {\n\tclassName,\n\tchildren,\n\ttabs,\n\tinitialTabName,\n\torientation = 'horizontal',\n\tactiveClass = 'is-active',\n\tonSelect,\n}: WordPressComponentProps< TabPanelProps, 'div', false > ) {\n\tconst instanceId = useInstanceId( TabPanel, 'tab-panel' );\n\tconst [ selected, setSelected ] = useState< string >();\n\n\tconst handleClick = ( tabKey: string ) => {\n\t\tsetSelected( tabKey );\n\t\tonSelect?.( tabKey );\n\t};\n\n\tconst onNavigate = ( _childIndex: number, child: HTMLButtonElement ) => {\n\t\tchild.click();\n\t};\n\tconst selectedTab = find( tabs, { name: selected } );\n\tconst selectedId = `${ instanceId }-${ selectedTab?.name ?? 'none' }`;\n\n\tuseEffect( () => {\n\t\tconst newSelectedTab = find( tabs, { name: selected } );\n\t\tif ( ! newSelectedTab ) {\n\t\t\tsetSelected(\n\t\t\t\tinitialTabName ||\n\t\t\t\t\t( tabs.length > 0 ? tabs[ 0 ].name : undefined )\n\t\t\t);\n\t\t}\n\t}, [ tabs ] );\n\n\treturn (\n\t\t<div className={ className }>\n\t\t\t<NavigableMenu\n\t\t\t\trole=\"tablist\"\n\t\t\t\torientation={ orientation }\n\t\t\t\tonNavigate={ onNavigate }\n\t\t\t\tclassName=\"components-tab-panel__tabs\"\n\t\t\t>\n\t\t\t\t{ tabs.map( ( tab ) => (\n\t\t\t\t\t<TabButton\n\t\t\t\t\t\tclassName={ classnames(\n\t\t\t\t\t\t\t'components-tab-panel__tabs-item',\n\t\t\t\t\t\t\ttab.className,\n\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\t[ activeClass ]: tab.name === selected,\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t) }\n\t\t\t\t\t\ttabId={ `${ instanceId }-${ tab.name }` }\n\t\t\t\t\t\taria-controls={ `${ instanceId }-${ tab.name }-view` }\n\t\t\t\t\t\tselected={ tab.name === selected }\n\t\t\t\t\t\tkey={ tab.name }\n\t\t\t\t\t\tonClick={ () => handleClick( tab.name ) }\n\t\t\t\t\t>\n\t\t\t\t\t\t{ tab.title }\n\t\t\t\t\t</TabButton>\n\t\t\t\t) ) }\n\t\t\t</NavigableMenu>\n\t\t\t{ selectedTab && (\n\t\t\t\t<div\n\t\t\t\t\tkey={ selectedId }\n\t\t\t\t\taria-labelledby={ selectedId }\n\t\t\t\t\trole=\"tabpanel\"\n\t\t\t\t\tid={ `${ selectedId }-view` }\n\t\t\t\t\tclassName=\"components-tab-panel__tab-content\"\n\t\t\t\t>\n\t\t\t\t\t{ children( selectedTab ) }\n\t\t\t\t</div>\n\t\t\t) }\n\t\t</div>\n\t);\n}\n\nexport default TabPanel;\n"]}
1
+ {"version":3,"sources":["@wordpress/components/src/tab-panel/index.tsx"],"names":["TabButton","tabId","onClick","children","selected","rest","TabPanel","className","tabs","initialTabName","orientation","activeClass","onSelect","instanceId","setSelected","handleTabSelection","tabKey","onNavigate","_childIndex","child","click","selectedTab","name","selectedId","newSelectedTab","length","map","tab","title"],"mappings":"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","sourcesContent":["/**\n * External dependencies\n */\nimport classnames from 'classnames';\nimport { find } from 'lodash';\n\n/**\n * WordPress dependencies\n */\nimport { useState, useEffect } from '@wordpress/element';\nimport { useInstanceId } from '@wordpress/compose';\n\n/**\n * Internal dependencies\n */\nimport { NavigableMenu } from '../navigable-container';\nimport Button from '../button';\nimport type { TabButtonProps, TabPanelProps } from './types';\nimport type { WordPressComponentProps } from '../ui/context';\n\nconst TabButton = ( {\n\ttabId,\n\tonClick,\n\tchildren,\n\tselected,\n\t...rest\n}: TabButtonProps ) => (\n\t<Button\n\t\trole=\"tab\"\n\t\ttabIndex={ selected ? null : -1 }\n\t\taria-selected={ selected }\n\t\tid={ tabId }\n\t\tonClick={ onClick }\n\t\t{ ...rest }\n\t>\n\t\t{ children }\n\t</Button>\n);\n\n/**\n * TabPanel is an ARIA-compliant tabpanel.\n *\n * TabPanels organize content across different screens, data sets, and interactions.\n * It has two sections: a list of tabs, and the view to show when tabs are chosen.\n *\n * ```jsx\n * import { TabPanel } from '@wordpress/components';\n *\n * const onSelect = ( tabName ) => {\n * console.log( 'Selecting tab', tabName );\n * };\n *\n * const MyTabPanel = () => (\n * <TabPanel\n * className=\"my-tab-panel\"\n * activeClass=\"active-tab\"\n * onSelect={ onSelect }\n * tabs={ [\n * {\n * name: 'tab1',\n * title: 'Tab 1',\n * className: 'tab-one',\n * },\n * {\n * name: 'tab2',\n * title: 'Tab 2',\n * className: 'tab-two',\n * },\n * ] }\n * >\n * { ( tab ) => <p>{ tab.title }</p> }\n * </TabPanel>\n * );\n * ```\n */\nexport function TabPanel( {\n\tclassName,\n\tchildren,\n\ttabs,\n\tinitialTabName,\n\torientation = 'horizontal',\n\tactiveClass = 'is-active',\n\tonSelect,\n}: WordPressComponentProps< TabPanelProps, 'div', false > ) {\n\tconst instanceId = useInstanceId( TabPanel, 'tab-panel' );\n\tconst [ selected, setSelected ] = useState< string >();\n\n\tconst handleTabSelection = ( tabKey: string ) => {\n\t\tsetSelected( tabKey );\n\t\tonSelect?.( tabKey );\n\t};\n\n\tconst onNavigate = ( _childIndex: number, child: HTMLButtonElement ) => {\n\t\tchild.click();\n\t};\n\tconst selectedTab = find( tabs, { name: selected } );\n\tconst selectedId = `${ instanceId }-${ selectedTab?.name ?? 'none' }`;\n\n\tuseEffect( () => {\n\t\tconst newSelectedTab = find( tabs, { name: selected } );\n\t\tif ( ! newSelectedTab && tabs.length > 0 ) {\n\t\t\thandleTabSelection( initialTabName || tabs[ 0 ].name );\n\t\t}\n\t}, [ tabs ] );\n\n\treturn (\n\t\t<div className={ className }>\n\t\t\t<NavigableMenu\n\t\t\t\trole=\"tablist\"\n\t\t\t\torientation={ orientation }\n\t\t\t\tonNavigate={ onNavigate }\n\t\t\t\tclassName=\"components-tab-panel__tabs\"\n\t\t\t>\n\t\t\t\t{ tabs.map( ( tab ) => (\n\t\t\t\t\t<TabButton\n\t\t\t\t\t\tclassName={ classnames(\n\t\t\t\t\t\t\t'components-tab-panel__tabs-item',\n\t\t\t\t\t\t\ttab.className,\n\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\t[ activeClass ]: tab.name === selected,\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t) }\n\t\t\t\t\t\ttabId={ `${ instanceId }-${ tab.name }` }\n\t\t\t\t\t\taria-controls={ `${ instanceId }-${ tab.name }-view` }\n\t\t\t\t\t\tselected={ tab.name === selected }\n\t\t\t\t\t\tkey={ tab.name }\n\t\t\t\t\t\tonClick={ () => handleTabSelection( tab.name ) }\n\t\t\t\t\t>\n\t\t\t\t\t\t{ tab.title }\n\t\t\t\t\t</TabButton>\n\t\t\t\t) ) }\n\t\t\t</NavigableMenu>\n\t\t\t{ selectedTab && (\n\t\t\t\t<div\n\t\t\t\t\tkey={ selectedId }\n\t\t\t\t\taria-labelledby={ selectedId }\n\t\t\t\t\trole=\"tabpanel\"\n\t\t\t\t\tid={ `${ selectedId }-view` }\n\t\t\t\t\tclassName=\"components-tab-panel__tab-content\"\n\t\t\t\t>\n\t\t\t\t\t{ children( selectedTab ) }\n\t\t\t\t</div>\n\t\t\t) }\n\t\t</div>\n\t);\n}\n\nexport default TabPanel;\n"]}
@@ -0,0 +1,62 @@
1
+ "use strict";
2
+
3
+ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
4
+
5
+ Object.defineProperty(exports, "__esModule", {
6
+ value: true
7
+ });
8
+ exports.default = void 0;
9
+
10
+ var _element = require("@wordpress/element");
11
+
12
+ var _colord = require("colord");
13
+
14
+ var _a11y = _interopRequireDefault(require("colord/plugins/a11y"));
15
+
16
+ var _names = _interopRequireDefault(require("colord/plugins/names"));
17
+
18
+ var _styles = require("./styles");
19
+
20
+ /**
21
+ * External dependencies
22
+ */
23
+ (0, _colord.extend)([_names.default, _a11y.default]);
24
+ /**
25
+ * `Theme` allows defining theme variables for components in the `@wordpress/components` package.
26
+ *
27
+ * Multiple `Theme` components can be nested in order to override specific theme variables.
28
+ *
29
+ *
30
+ * @example
31
+ * ```jsx
32
+ * import { __experimentalTheme as Theme } from '@wordpress/components';
33
+ *
34
+ * const Example = () => {
35
+ * return (
36
+ * <Theme accent="red">
37
+ * <Button variant="primary">I'm red</Button>
38
+ * <Theme accent="blue">
39
+ * <Button variant="primary">I'm blue</Button>
40
+ * </Theme>
41
+ * </Theme>
42
+ * );
43
+ * };
44
+ * ```
45
+ */
46
+
47
+ function Theme(props) {
48
+ const {
49
+ accent
50
+ } = props;
51
+
52
+ if (accent && !(0, _colord.colord)(accent).isValid()) {
53
+ // eslint-disable-next-line no-console
54
+ console.warn(`wp.components.Theme: "${accent}" is not a valid color value for the 'accent' prop.`);
55
+ }
56
+
57
+ return (0, _element.createElement)(_styles.Wrapper, props);
58
+ }
59
+
60
+ var _default = Theme;
61
+ exports.default = _default;
62
+ //# sourceMappingURL=index.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"sources":["@wordpress/components/src/theme/index.tsx"],"names":["namesPlugin","a11yPlugin","Theme","props","accent","isValid","console","warn"],"mappings":";;;;;;;;;;;AAGA;;AACA;;AACA;;AAOA;;AAZA;AACA;AACA;AAYA,oBAAQ,CAAEA,cAAF,EAAeC,aAAf,CAAR;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AACA,SAASC,KAAT,CAAgBC,KAAhB,EAA4E;AAC3E,QAAM;AAAEC,IAAAA;AAAF,MAAaD,KAAnB;;AACA,MAAKC,MAAM,IAAI,CAAE,oBAAQA,MAAR,EAAiBC,OAAjB,EAAjB,EAA8C;AAC7C;AACAC,IAAAA,OAAO,CAACC,IAAR,CACE,yBAAyBH,MAAQ,qDADnC;AAGA;;AAED,SAAO,4BAAC,eAAD,EAAcD,KAAd,CAAP;AACA;;eAEcD,K","sourcesContent":["/**\n * External dependencies\n */\nimport { colord, extend } from 'colord';\nimport a11yPlugin from 'colord/plugins/a11y';\nimport namesPlugin from 'colord/plugins/names';\n\n/**\n * Internal dependencies\n */\nimport type { ThemeProps } from './types';\nimport type { WordPressComponentProps } from '../ui/context';\nimport { Wrapper } from './styles';\n\nextend( [ namesPlugin, a11yPlugin ] );\n\n/**\n * `Theme` allows defining theme variables for components in the `@wordpress/components` package.\n *\n * Multiple `Theme` components can be nested in order to override specific theme variables.\n *\n *\n * @example\n * ```jsx\n * import { __experimentalTheme as Theme } from '@wordpress/components';\n *\n * const Example = () => {\n * return (\n * <Theme accent=\"red\">\n * <Button variant=\"primary\">I'm red</Button>\n * <Theme accent=\"blue\">\n * <Button variant=\"primary\">I'm blue</Button>\n * </Theme>\n * </Theme>\n * );\n * };\n * ```\n */\nfunction Theme( props: WordPressComponentProps< ThemeProps, 'div', true > ) {\n\tconst { accent } = props;\n\tif ( accent && ! colord( accent ).isValid() ) {\n\t\t// eslint-disable-next-line no-console\n\t\tconsole.warn(\n\t\t\t`wp.components.Theme: \"${ accent }\" is not a valid color value for the 'accent' prop.`\n\t\t);\n\t}\n\n\treturn <Wrapper { ...props } />;\n}\n\nexport default Theme;\n"]}
@@ -0,0 +1,33 @@
1
+ "use strict";
2
+
3
+ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
4
+
5
+ Object.defineProperty(exports, "__esModule", {
6
+ value: true
7
+ });
8
+ exports.Wrapper = void 0;
9
+
10
+ var _base = _interopRequireDefault(require("@emotion/styled/base"));
11
+
12
+ var _colord = require("colord");
13
+
14
+ var _react = require("@emotion/react");
15
+
16
+ /**
17
+ * External dependencies
18
+ */
19
+ const accentColor = _ref => {
20
+ let {
21
+ accent
22
+ } = _ref;
23
+ return accent ? /*#__PURE__*/(0, _react.css)("--wp-components-color-accent:", accent, ";--wp-components-color-accent-darker-10:", (0, _colord.colord)(accent).darken(0.1).toHex(), ";--wp-components-color-accent-darker-20:", (0, _colord.colord)(accent).darken(0.2).toHex(), ";" + (process.env.NODE_ENV === "production" ? "" : ";label:accentColor;"), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkB3b3JkcHJlc3MvY29tcG9uZW50cy9zcmMvdGhlbWUvc3R5bGVzLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQWNPIiwiZmlsZSI6IkB3b3JkcHJlc3MvY29tcG9uZW50cy9zcmMvdGhlbWUvc3R5bGVzLnRzIiwic291cmNlc0NvbnRlbnQiOlsiLyoqXG4gKiBFeHRlcm5hbCBkZXBlbmRlbmNpZXNcbiAqL1xuaW1wb3J0IHsgY29sb3JkIH0gZnJvbSAnY29sb3JkJztcbmltcG9ydCBzdHlsZWQgZnJvbSAnQGVtb3Rpb24vc3R5bGVkJztcbmltcG9ydCB7IGNzcyB9IGZyb20gJ0BlbW90aW9uL3JlYWN0JztcblxuLyoqXG4gKiBJbnRlcm5hbCBkZXBlbmRlbmNpZXNcbiAqL1xuaW1wb3J0IHR5cGUgeyBUaGVtZVByb3BzIH0gZnJvbSAnLi90eXBlcyc7XG5cbmNvbnN0IGFjY2VudENvbG9yID0gKCB7IGFjY2VudCB9OiBUaGVtZVByb3BzICkgPT5cblx0YWNjZW50XG5cdFx0PyBjc3NgXG5cdFx0XHRcdC0td3AtY29tcG9uZW50cy1jb2xvci1hY2NlbnQ6ICR7IGFjY2VudCB9O1xuXHRcdFx0XHQtLXdwLWNvbXBvbmVudHMtY29sb3ItYWNjZW50LWRhcmtlci0xMDogJHsgY29sb3JkKCBhY2NlbnQgKVxuXHRcdFx0XHRcdC5kYXJrZW4oIDAuMSApXG5cdFx0XHRcdFx0LnRvSGV4KCkgfTtcblx0XHRcdFx0LS13cC1jb21wb25lbnRzLWNvbG9yLWFjY2VudC1kYXJrZXItMjA6ICR7IGNvbG9yZCggYWNjZW50IClcblx0XHRcdFx0XHQuZGFya2VuKCAwLjIgKVxuXHRcdFx0XHRcdC50b0hleCgpIH07XG5cdFx0ICBgXG5cdFx0OiB1bmRlZmluZWQ7XG5cbmV4cG9ydCBjb25zdCBXcmFwcGVyID0gc3R5bGVkLmRpdjwgVGhlbWVQcm9wcyA+YFxuXHQkeyBhY2NlbnRDb2xvciB9XG5gO1xuIl19 */") : undefined;
24
+ };
25
+
26
+ const Wrapper = (0, _base.default)("div", process.env.NODE_ENV === "production" ? {
27
+ target: "e1krjpvb0"
28
+ } : {
29
+ target: "e1krjpvb0",
30
+ label: "Wrapper"
31
+ })(accentColor, ";" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkB3b3JkcHJlc3MvY29tcG9uZW50cy9zcmMvdGhlbWUvc3R5bGVzLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQXlCK0MiLCJmaWxlIjoiQHdvcmRwcmVzcy9jb21wb25lbnRzL3NyYy90aGVtZS9zdHlsZXMudHMiLCJzb3VyY2VzQ29udGVudCI6WyIvKipcbiAqIEV4dGVybmFsIGRlcGVuZGVuY2llc1xuICovXG5pbXBvcnQgeyBjb2xvcmQgfSBmcm9tICdjb2xvcmQnO1xuaW1wb3J0IHN0eWxlZCBmcm9tICdAZW1vdGlvbi9zdHlsZWQnO1xuaW1wb3J0IHsgY3NzIH0gZnJvbSAnQGVtb3Rpb24vcmVhY3QnO1xuXG4vKipcbiAqIEludGVybmFsIGRlcGVuZGVuY2llc1xuICovXG5pbXBvcnQgdHlwZSB7IFRoZW1lUHJvcHMgfSBmcm9tICcuL3R5cGVzJztcblxuY29uc3QgYWNjZW50Q29sb3IgPSAoIHsgYWNjZW50IH06IFRoZW1lUHJvcHMgKSA9PlxuXHRhY2NlbnRcblx0XHQ/IGNzc2Bcblx0XHRcdFx0LS13cC1jb21wb25lbnRzLWNvbG9yLWFjY2VudDogJHsgYWNjZW50IH07XG5cdFx0XHRcdC0td3AtY29tcG9uZW50cy1jb2xvci1hY2NlbnQtZGFya2VyLTEwOiAkeyBjb2xvcmQoIGFjY2VudCApXG5cdFx0XHRcdFx0LmRhcmtlbiggMC4xIClcblx0XHRcdFx0XHQudG9IZXgoKSB9O1xuXHRcdFx0XHQtLXdwLWNvbXBvbmVudHMtY29sb3ItYWNjZW50LWRhcmtlci0yMDogJHsgY29sb3JkKCBhY2NlbnQgKVxuXHRcdFx0XHRcdC5kYXJrZW4oIDAuMiApXG5cdFx0XHRcdFx0LnRvSGV4KCkgfTtcblx0XHQgIGBcblx0XHQ6IHVuZGVmaW5lZDtcblxuZXhwb3J0IGNvbnN0IFdyYXBwZXIgPSBzdHlsZWQuZGl2PCBUaGVtZVByb3BzID5gXG5cdCR7IGFjY2VudENvbG9yIH1cbmA7XG4iXX0= */"));
32
+ exports.Wrapper = Wrapper;
33
+ //# sourceMappingURL=styles.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"sources":["@wordpress/components/src/theme/styles.ts"],"names":["accentColor","accent","css","darken","toHex","undefined","Wrapper"],"mappings":";;;;;;;;;;;AAGA;;AAEA;;AALA;AACA;AACA;AAUA,MAAMA,WAAW,GAAG;AAAA,MAAE;AAAEC,IAAAA;AAAF,GAAF;AAAA,SACnBA,MAAM,oBACHC,UADG,mCAE8BD,MAF9B,8CAGwC,oBAAQA,MAAR,EACzCE,MADyC,CACjC,GADiC,EAEzCC,KAFyC,EAHxC,8CAMwC,oBAAQH,MAAR,EACzCE,MADyC,CACjC,GADiC,EAEzCC,KAFyC,EANxC,w0CAUHC,SAXgB;AAAA,CAApB;;AAaO,MAAMC,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA,GAChBN,WADgB,qwCAAb","sourcesContent":["/**\n * External dependencies\n */\nimport { colord } from 'colord';\nimport styled from '@emotion/styled';\nimport { css } from '@emotion/react';\n\n/**\n * Internal dependencies\n */\nimport type { ThemeProps } from './types';\n\nconst accentColor = ( { accent }: ThemeProps ) =>\n\taccent\n\t\t? css`\n\t\t\t\t--wp-components-color-accent: ${ accent };\n\t\t\t\t--wp-components-color-accent-darker-10: ${ colord( accent )\n\t\t\t\t\t.darken( 0.1 )\n\t\t\t\t\t.toHex() };\n\t\t\t\t--wp-components-color-accent-darker-20: ${ colord( accent )\n\t\t\t\t\t.darken( 0.2 )\n\t\t\t\t\t.toHex() };\n\t\t `\n\t\t: undefined;\n\nexport const Wrapper = styled.div< ThemeProps >`\n\t${ accentColor }\n`;\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":[]}