@wordpress/ui 0.10.0 → 0.11.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 (454) hide show
  1. package/CHANGELOG.md +38 -0
  2. package/CONTRIBUTING.md +149 -0
  3. package/README.md +34 -6
  4. package/build/alert-dialog/context.cjs +6 -1
  5. package/build/alert-dialog/context.cjs.map +2 -2
  6. package/build/alert-dialog/popup.cjs +105 -33
  7. package/build/alert-dialog/popup.cjs.map +4 -4
  8. package/build/alert-dialog/root.cjs +106 -6
  9. package/build/alert-dialog/root.cjs.map +2 -2
  10. package/build/alert-dialog/trigger.cjs +4 -14
  11. package/build/alert-dialog/trigger.cjs.map +3 -3
  12. package/build/alert-dialog/types.cjs.map +1 -1
  13. package/build/badge/badge.cjs +14 -14
  14. package/build/badge/badge.cjs.map +2 -2
  15. package/build/button/button.cjs +16 -6
  16. package/build/button/button.cjs.map +3 -3
  17. package/build/card/content.cjs +4 -4
  18. package/build/card/content.cjs.map +2 -2
  19. package/build/card/full-bleed.cjs +4 -4
  20. package/build/card/full-bleed.cjs.map +2 -2
  21. package/build/card/header.cjs +4 -4
  22. package/build/card/header.cjs.map +2 -2
  23. package/build/card/root.cjs +4 -4
  24. package/build/card/root.cjs.map +2 -2
  25. package/build/card/title.cjs +5 -25
  26. package/build/card/title.cjs.map +4 -4
  27. package/build/collapsible-card/content.cjs +3 -3
  28. package/build/collapsible-card/content.cjs.map +1 -1
  29. package/build/collapsible-card/header.cjs +6 -6
  30. package/build/collapsible-card/header.cjs.map +2 -2
  31. package/build/dialog/footer.cjs +3 -3
  32. package/build/dialog/footer.cjs.map +2 -2
  33. package/build/dialog/header.cjs +3 -3
  34. package/build/dialog/header.cjs.map +2 -2
  35. package/build/dialog/popup.cjs +5 -4
  36. package/build/dialog/popup.cjs.map +2 -2
  37. package/build/dialog/title.cjs +10 -19
  38. package/build/dialog/title.cjs.map +3 -3
  39. package/build/dialog/types.cjs.map +1 -1
  40. package/build/empty-state/actions.cjs +3 -3
  41. package/build/empty-state/actions.cjs.map +2 -2
  42. package/build/empty-state/description.cjs +8 -5
  43. package/build/empty-state/description.cjs.map +2 -2
  44. package/build/empty-state/icon.cjs +3 -3
  45. package/build/empty-state/icon.cjs.map +2 -2
  46. package/build/empty-state/root.cjs +3 -3
  47. package/build/empty-state/root.cjs.map +2 -2
  48. package/build/empty-state/title.cjs +8 -5
  49. package/build/empty-state/title.cjs.map +2 -2
  50. package/build/empty-state/visual.cjs +3 -3
  51. package/build/empty-state/visual.cjs.map +2 -2
  52. package/build/form/primitives/field/description.cjs +17 -4
  53. package/build/form/primitives/field/description.cjs.map +3 -3
  54. package/build/form/primitives/field/details.cjs +4 -4
  55. package/build/form/primitives/field/details.cjs.map +2 -2
  56. package/build/form/primitives/field/label.cjs +8 -8
  57. package/build/form/primitives/field/label.cjs.map +2 -2
  58. package/build/form/primitives/field/root.cjs +2 -2
  59. package/build/form/primitives/field/root.cjs.map +2 -2
  60. package/build/form/primitives/fieldset/description.cjs +20 -4
  61. package/build/form/primitives/fieldset/description.cjs.map +3 -3
  62. package/build/form/primitives/fieldset/details.cjs +3 -3
  63. package/build/form/primitives/fieldset/details.cjs.map +2 -2
  64. package/build/form/primitives/fieldset/legend.cjs +8 -7
  65. package/build/form/primitives/fieldset/legend.cjs.map +2 -2
  66. package/build/form/primitives/input/input.cjs +23 -7
  67. package/build/form/primitives/input/input.cjs.map +3 -3
  68. package/build/form/primitives/input-layout/input-layout.cjs +13 -3
  69. package/build/form/primitives/input-layout/input-layout.cjs.map +3 -3
  70. package/build/form/primitives/input-layout/slot.cjs +3 -3
  71. package/build/form/primitives/input-layout/slot.cjs.map +2 -2
  72. package/build/form/primitives/select/item.cjs +3 -3
  73. package/build/form/primitives/select/item.cjs.map +2 -2
  74. package/build/form/primitives/select/popup.cjs +5 -5
  75. package/build/form/primitives/select/popup.cjs.map +2 -2
  76. package/build/form/primitives/select/trigger.cjs +6 -6
  77. package/build/form/primitives/select/trigger.cjs.map +2 -2
  78. package/build/form/primitives/select/types.cjs.map +1 -1
  79. package/build/form/primitives/textarea/textarea.cjs +20 -1
  80. package/build/form/primitives/textarea/textarea.cjs.map +3 -3
  81. package/build/index.cjs +3 -0
  82. package/build/index.cjs.map +2 -2
  83. package/build/link/link.cjs +16 -6
  84. package/build/link/link.cjs.map +3 -3
  85. package/build/notice/action-button.cjs +3 -3
  86. package/build/notice/action-button.cjs.map +2 -2
  87. package/build/notice/action-link.cjs +3 -3
  88. package/build/notice/action-link.cjs.map +2 -2
  89. package/build/notice/actions.cjs +3 -3
  90. package/build/notice/actions.cjs.map +2 -2
  91. package/build/notice/close-icon.cjs +3 -3
  92. package/build/notice/close-icon.cjs.map +2 -2
  93. package/build/notice/description.cjs +3 -3
  94. package/build/notice/description.cjs.map +2 -2
  95. package/build/notice/root.cjs +3 -3
  96. package/build/notice/root.cjs.map +2 -2
  97. package/build/notice/title.cjs +3 -3
  98. package/build/notice/title.cjs.map +2 -2
  99. package/build/popover/arrow.cjs +94 -0
  100. package/build/popover/arrow.cjs.map +7 -0
  101. package/build/popover/close.cjs +45 -0
  102. package/build/popover/close.cjs.map +7 -0
  103. package/build/popover/context.cjs +76 -0
  104. package/build/popover/context.cjs.map +7 -0
  105. package/build/popover/description.cjs +70 -0
  106. package/build/popover/description.cjs.map +7 -0
  107. package/build/popover/index.cjs +49 -0
  108. package/build/popover/index.cjs.map +7 -0
  109. package/build/popover/popup.cjs +138 -0
  110. package/build/popover/popup.cjs.map +7 -0
  111. package/build/popover/root.cjs +35 -0
  112. package/build/popover/root.cjs.map +7 -0
  113. package/build/popover/title.cjs +56 -0
  114. package/build/popover/title.cjs.map +7 -0
  115. package/build/popover/trigger.cjs +38 -0
  116. package/build/popover/trigger.cjs.map +7 -0
  117. package/build/popover/types.cjs +19 -0
  118. package/build/popover/types.cjs.map +7 -0
  119. package/build/tabs/list.cjs +3 -4
  120. package/build/tabs/list.cjs.map +2 -2
  121. package/build/tabs/panel.cjs +3 -3
  122. package/build/tabs/panel.cjs.map +2 -2
  123. package/build/tabs/tab.cjs +3 -3
  124. package/build/tabs/tab.cjs.map +2 -2
  125. package/build/text/text.cjs +20 -5
  126. package/build/text/text.cjs.map +3 -3
  127. package/build/tooltip/popup.cjs +5 -4
  128. package/build/tooltip/popup.cjs.map +2 -2
  129. package/build/tooltip/root.cjs.map +2 -2
  130. package/build/tooltip/types.cjs.map +1 -1
  131. package/build/utils/types.cjs.map +1 -1
  132. package/build/utils/use-deprioritized-initial-focus.cjs.map +2 -2
  133. package/build/visually-hidden/visually-hidden.cjs.map +2 -2
  134. package/build-module/alert-dialog/context.mjs +6 -1
  135. package/build-module/alert-dialog/context.mjs.map +2 -2
  136. package/build-module/alert-dialog/popup.mjs +107 -33
  137. package/build-module/alert-dialog/popup.mjs.map +4 -4
  138. package/build-module/alert-dialog/root.mjs +113 -7
  139. package/build-module/alert-dialog/root.mjs.map +2 -2
  140. package/build-module/alert-dialog/trigger.mjs +4 -4
  141. package/build-module/alert-dialog/trigger.mjs.map +3 -3
  142. package/build-module/badge/badge.mjs +14 -14
  143. package/build-module/badge/badge.mjs.map +2 -2
  144. package/build-module/button/button.mjs +16 -6
  145. package/build-module/button/button.mjs.map +3 -3
  146. package/build-module/card/content.mjs +4 -4
  147. package/build-module/card/content.mjs.map +2 -2
  148. package/build-module/card/full-bleed.mjs +4 -4
  149. package/build-module/card/full-bleed.mjs.map +2 -2
  150. package/build-module/card/header.mjs +4 -4
  151. package/build-module/card/header.mjs.map +2 -2
  152. package/build-module/card/root.mjs +4 -4
  153. package/build-module/card/root.mjs.map +2 -2
  154. package/build-module/card/title.mjs +5 -15
  155. package/build-module/card/title.mjs.map +3 -3
  156. package/build-module/collapsible-card/content.mjs +3 -3
  157. package/build-module/collapsible-card/content.mjs.map +1 -1
  158. package/build-module/collapsible-card/header.mjs +6 -6
  159. package/build-module/collapsible-card/header.mjs.map +2 -2
  160. package/build-module/dialog/footer.mjs +3 -3
  161. package/build-module/dialog/footer.mjs.map +2 -2
  162. package/build-module/dialog/header.mjs +3 -3
  163. package/build-module/dialog/header.mjs.map +2 -2
  164. package/build-module/dialog/popup.mjs +5 -4
  165. package/build-module/dialog/popup.mjs.map +2 -2
  166. package/build-module/dialog/title.mjs +10 -9
  167. package/build-module/dialog/title.mjs.map +2 -2
  168. package/build-module/empty-state/actions.mjs +3 -3
  169. package/build-module/empty-state/actions.mjs.map +2 -2
  170. package/build-module/empty-state/description.mjs +8 -5
  171. package/build-module/empty-state/description.mjs.map +2 -2
  172. package/build-module/empty-state/icon.mjs +3 -3
  173. package/build-module/empty-state/icon.mjs.map +2 -2
  174. package/build-module/empty-state/root.mjs +3 -3
  175. package/build-module/empty-state/root.mjs.map +2 -2
  176. package/build-module/empty-state/title.mjs +8 -5
  177. package/build-module/empty-state/title.mjs.map +2 -2
  178. package/build-module/empty-state/visual.mjs +3 -3
  179. package/build-module/empty-state/visual.mjs.map +2 -2
  180. package/build-module/form/primitives/field/description.mjs +17 -4
  181. package/build-module/form/primitives/field/description.mjs.map +3 -3
  182. package/build-module/form/primitives/field/details.mjs +4 -4
  183. package/build-module/form/primitives/field/details.mjs.map +2 -2
  184. package/build-module/form/primitives/field/label.mjs +8 -8
  185. package/build-module/form/primitives/field/label.mjs.map +2 -2
  186. package/build-module/form/primitives/field/root.mjs +2 -2
  187. package/build-module/form/primitives/field/root.mjs.map +2 -2
  188. package/build-module/form/primitives/fieldset/description.mjs +20 -4
  189. package/build-module/form/primitives/fieldset/description.mjs.map +3 -3
  190. package/build-module/form/primitives/fieldset/details.mjs +3 -3
  191. package/build-module/form/primitives/fieldset/details.mjs.map +2 -2
  192. package/build-module/form/primitives/fieldset/legend.mjs +8 -7
  193. package/build-module/form/primitives/fieldset/legend.mjs.map +2 -2
  194. package/build-module/form/primitives/input/input.mjs +23 -7
  195. package/build-module/form/primitives/input/input.mjs.map +3 -3
  196. package/build-module/form/primitives/input-layout/input-layout.mjs +13 -3
  197. package/build-module/form/primitives/input-layout/input-layout.mjs.map +3 -3
  198. package/build-module/form/primitives/input-layout/slot.mjs +3 -3
  199. package/build-module/form/primitives/input-layout/slot.mjs.map +2 -2
  200. package/build-module/form/primitives/select/item.mjs +3 -3
  201. package/build-module/form/primitives/select/item.mjs.map +2 -2
  202. package/build-module/form/primitives/select/popup.mjs +5 -5
  203. package/build-module/form/primitives/select/popup.mjs.map +2 -2
  204. package/build-module/form/primitives/select/trigger.mjs +6 -6
  205. package/build-module/form/primitives/select/trigger.mjs.map +2 -2
  206. package/build-module/form/primitives/textarea/textarea.mjs +20 -1
  207. package/build-module/form/primitives/textarea/textarea.mjs.map +3 -3
  208. package/build-module/index.mjs +2 -0
  209. package/build-module/index.mjs.map +2 -2
  210. package/build-module/link/link.mjs +16 -6
  211. package/build-module/link/link.mjs.map +3 -3
  212. package/build-module/notice/action-button.mjs +3 -3
  213. package/build-module/notice/action-button.mjs.map +2 -2
  214. package/build-module/notice/action-link.mjs +3 -3
  215. package/build-module/notice/action-link.mjs.map +2 -2
  216. package/build-module/notice/actions.mjs +3 -3
  217. package/build-module/notice/actions.mjs.map +2 -2
  218. package/build-module/notice/close-icon.mjs +3 -3
  219. package/build-module/notice/close-icon.mjs.map +2 -2
  220. package/build-module/notice/description.mjs +3 -3
  221. package/build-module/notice/description.mjs.map +2 -2
  222. package/build-module/notice/root.mjs +3 -3
  223. package/build-module/notice/root.mjs.map +2 -2
  224. package/build-module/notice/title.mjs +3 -3
  225. package/build-module/notice/title.mjs.map +2 -2
  226. package/build-module/popover/arrow.mjs +59 -0
  227. package/build-module/popover/arrow.mjs.map +7 -0
  228. package/build-module/popover/close.mjs +20 -0
  229. package/build-module/popover/close.mjs.map +7 -0
  230. package/build-module/popover/context.mjs +57 -0
  231. package/build-module/popover/context.mjs.map +7 -0
  232. package/build-module/popover/description.mjs +35 -0
  233. package/build-module/popover/description.mjs.map +7 -0
  234. package/build-module/popover/index.mjs +18 -0
  235. package/build-module/popover/index.mjs.map +7 -0
  236. package/build-module/popover/popup.mjs +105 -0
  237. package/build-module/popover/popup.mjs.map +7 -0
  238. package/build-module/popover/root.mjs +10 -0
  239. package/build-module/popover/root.mjs.map +7 -0
  240. package/build-module/popover/title.mjs +31 -0
  241. package/build-module/popover/title.mjs.map +7 -0
  242. package/build-module/popover/trigger.mjs +13 -0
  243. package/build-module/popover/trigger.mjs.map +7 -0
  244. package/build-module/popover/types.mjs +1 -0
  245. package/build-module/popover/types.mjs.map +7 -0
  246. package/build-module/tabs/list.mjs +3 -4
  247. package/build-module/tabs/list.mjs.map +2 -2
  248. package/build-module/tabs/panel.mjs +3 -3
  249. package/build-module/tabs/panel.mjs.map +2 -2
  250. package/build-module/tabs/tab.mjs +3 -3
  251. package/build-module/tabs/tab.mjs.map +2 -2
  252. package/build-module/text/text.mjs +20 -5
  253. package/build-module/text/text.mjs.map +3 -3
  254. package/build-module/tooltip/popup.mjs +5 -4
  255. package/build-module/tooltip/popup.mjs.map +2 -2
  256. package/build-module/tooltip/root.mjs.map +2 -2
  257. package/build-module/utils/use-deprioritized-initial-focus.mjs.map +2 -2
  258. package/build-module/visually-hidden/visually-hidden.mjs.map +2 -2
  259. package/build-types/alert-dialog/context.d.ts +6 -3
  260. package/build-types/alert-dialog/context.d.ts.map +1 -1
  261. package/build-types/alert-dialog/popup.d.ts.map +1 -1
  262. package/build-types/alert-dialog/root.d.ts +2 -8
  263. package/build-types/alert-dialog/root.d.ts.map +1 -1
  264. package/build-types/alert-dialog/stories/index.story.d.ts +18 -6
  265. package/build-types/alert-dialog/stories/index.story.d.ts.map +1 -1
  266. package/build-types/alert-dialog/trigger.d.ts +2 -1
  267. package/build-types/alert-dialog/trigger.d.ts.map +1 -1
  268. package/build-types/alert-dialog/types.d.ts +61 -26
  269. package/build-types/alert-dialog/types.d.ts.map +1 -1
  270. package/build-types/badge/badge.d.ts.map +1 -1
  271. package/build-types/button/button.d.ts.map +1 -1
  272. package/build-types/card/stories/index.story.d.ts.map +1 -1
  273. package/build-types/card/title.d.ts.map +1 -1
  274. package/build-types/collapsible/panel.d.ts +2 -1
  275. package/build-types/collapsible/panel.d.ts.map +1 -1
  276. package/build-types/collapsible/root.d.ts +2 -1
  277. package/build-types/collapsible/root.d.ts.map +1 -1
  278. package/build-types/collapsible/trigger.d.ts +2 -1
  279. package/build-types/collapsible/trigger.d.ts.map +1 -1
  280. package/build-types/dialog/popup.d.ts.map +1 -1
  281. package/build-types/dialog/stories/index.story.d.ts +8 -0
  282. package/build-types/dialog/stories/index.story.d.ts.map +1 -1
  283. package/build-types/dialog/title.d.ts +12 -2
  284. package/build-types/dialog/title.d.ts.map +1 -1
  285. package/build-types/dialog/types.d.ts +8 -1
  286. package/build-types/dialog/types.d.ts.map +1 -1
  287. package/build-types/empty-state/description.d.ts.map +1 -1
  288. package/build-types/empty-state/title.d.ts.map +1 -1
  289. package/build-types/form/primitives/field/description.d.ts +2 -1
  290. package/build-types/form/primitives/field/description.d.ts.map +1 -1
  291. package/build-types/form/primitives/field/details.d.ts +2 -1
  292. package/build-types/form/primitives/field/details.d.ts.map +1 -1
  293. package/build-types/form/primitives/field/label.d.ts +2 -1
  294. package/build-types/form/primitives/field/label.d.ts.map +1 -1
  295. package/build-types/form/primitives/fieldset/description.d.ts +2 -1
  296. package/build-types/form/primitives/fieldset/description.d.ts.map +1 -1
  297. package/build-types/form/primitives/fieldset/details.d.ts +2 -1
  298. package/build-types/form/primitives/fieldset/details.d.ts.map +1 -1
  299. package/build-types/form/primitives/fieldset/legend.d.ts +2 -1
  300. package/build-types/form/primitives/fieldset/legend.d.ts.map +1 -1
  301. package/build-types/form/primitives/fieldset/root.d.ts +2 -1
  302. package/build-types/form/primitives/fieldset/root.d.ts.map +1 -1
  303. package/build-types/form/primitives/input/input.d.ts.map +1 -1
  304. package/build-types/form/primitives/input-layout/input-layout.d.ts.map +1 -1
  305. package/build-types/form/primitives/select/item.d.ts +6 -2
  306. package/build-types/form/primitives/select/item.d.ts.map +1 -1
  307. package/build-types/form/primitives/select/popup.d.ts +11 -1
  308. package/build-types/form/primitives/select/popup.d.ts.map +1 -1
  309. package/build-types/form/primitives/select/trigger.d.ts +12 -2
  310. package/build-types/form/primitives/select/trigger.d.ts.map +1 -1
  311. package/build-types/form/primitives/select/types.d.ts +13 -3
  312. package/build-types/form/primitives/select/types.d.ts.map +1 -1
  313. package/build-types/form/primitives/textarea/textarea.d.ts.map +1 -1
  314. package/build-types/form/stories/shared.d.ts.map +1 -1
  315. package/build-types/index.d.ts +1 -0
  316. package/build-types/index.d.ts.map +1 -1
  317. package/build-types/link/link.d.ts.map +1 -1
  318. package/build-types/popover/arrow.d.ts +10 -0
  319. package/build-types/popover/arrow.d.ts.map +1 -0
  320. package/build-types/popover/close.d.ts +11 -0
  321. package/build-types/popover/close.d.ts.map +1 -0
  322. package/build-types/popover/context.d.ts +22 -0
  323. package/build-types/popover/context.d.ts.map +1 -0
  324. package/build-types/popover/description.d.ts +10 -0
  325. package/build-types/popover/description.d.ts.map +1 -0
  326. package/build-types/popover/index.d.ts +9 -0
  327. package/build-types/popover/index.d.ts.map +1 -0
  328. package/build-types/popover/popup.d.ts +11 -0
  329. package/build-types/popover/popup.d.ts.map +1 -0
  330. package/build-types/popover/root.d.ts +37 -0
  331. package/build-types/popover/root.d.ts.map +1 -0
  332. package/build-types/popover/stories/index.story.d.ts +211 -0
  333. package/build-types/popover/stories/index.story.d.ts.map +1 -0
  334. package/build-types/popover/stories/utils.d.ts +25 -0
  335. package/build-types/popover/stories/utils.d.ts.map +1 -0
  336. package/build-types/popover/test/index.test.d.ts +2 -0
  337. package/build-types/popover/test/index.test.d.ts.map +1 -0
  338. package/build-types/popover/title.d.ts +20 -0
  339. package/build-types/popover/title.d.ts.map +1 -0
  340. package/build-types/popover/trigger.d.ts +10 -0
  341. package/build-types/popover/trigger.d.ts.map +1 -0
  342. package/build-types/popover/types.d.ts +83 -0
  343. package/build-types/popover/types.d.ts.map +1 -0
  344. package/build-types/tabs/list.d.ts +2 -1
  345. package/build-types/tabs/list.d.ts.map +1 -1
  346. package/build-types/tabs/panel.d.ts +2 -1
  347. package/build-types/tabs/panel.d.ts.map +1 -1
  348. package/build-types/tabs/root.d.ts +2 -1
  349. package/build-types/tabs/root.d.ts.map +1 -1
  350. package/build-types/tabs/tab.d.ts +2 -1
  351. package/build-types/tabs/tab.d.ts.map +1 -1
  352. package/build-types/text/stories/index.story.d.ts +4 -0
  353. package/build-types/text/stories/index.story.d.ts.map +1 -1
  354. package/build-types/text/text.d.ts.map +1 -1
  355. package/build-types/tooltip/popup.d.ts.map +1 -1
  356. package/build-types/tooltip/root.d.ts +9 -8
  357. package/build-types/tooltip/root.d.ts.map +1 -1
  358. package/build-types/tooltip/stories/usage-guidelines.story.d.ts +21 -0
  359. package/build-types/tooltip/stories/usage-guidelines.story.d.ts.map +1 -0
  360. package/build-types/tooltip/types.d.ts +4 -0
  361. package/build-types/tooltip/types.d.ts.map +1 -1
  362. package/build-types/utils/types.d.ts +6 -2
  363. package/build-types/utils/types.d.ts.map +1 -1
  364. package/build-types/utils/use-deprioritized-initial-focus.d.ts +6 -5
  365. package/build-types/utils/use-deprioritized-initial-focus.d.ts.map +1 -1
  366. package/build-types/visually-hidden/stories/index.story.d.ts +7 -0
  367. package/build-types/visually-hidden/stories/index.story.d.ts.map +1 -1
  368. package/build-types/visually-hidden/visually-hidden.d.ts +34 -0
  369. package/build-types/visually-hidden/visually-hidden.d.ts.map +1 -1
  370. package/package.json +12 -12
  371. package/src/alert-dialog/context.tsx +12 -4
  372. package/src/alert-dialog/popup.tsx +91 -33
  373. package/src/alert-dialog/root.tsx +191 -13
  374. package/src/alert-dialog/stories/index.story.tsx +116 -65
  375. package/src/alert-dialog/style.module.css +11 -0
  376. package/src/alert-dialog/test/index.test.tsx +1319 -347
  377. package/src/alert-dialog/trigger.tsx +2 -2
  378. package/src/alert-dialog/types.ts +64 -28
  379. package/src/badge/badge.tsx +11 -14
  380. package/src/badge/style.module.css +0 -4
  381. package/src/button/button.tsx +2 -0
  382. package/src/button/style.module.css +7 -3
  383. package/src/card/stories/index.story.tsx +4 -5
  384. package/src/card/style.module.css +1 -5
  385. package/src/card/test/index.test.tsx +17 -1
  386. package/src/card/title.tsx +6 -5
  387. package/src/collapsible-card/stories/index.story.tsx +5 -5
  388. package/src/dialog/popup.tsx +2 -1
  389. package/src/dialog/stories/index.story.tsx +33 -0
  390. package/src/dialog/style.module.css +13 -9
  391. package/src/dialog/test/index.test.tsx +63 -4
  392. package/src/dialog/title.tsx +21 -9
  393. package/src/dialog/types.ts +9 -1
  394. package/src/empty-state/description.tsx +6 -2
  395. package/src/empty-state/style.module.css +1 -1
  396. package/src/empty-state/test/description.test.tsx +13 -0
  397. package/src/empty-state/test/title.test.tsx +13 -0
  398. package/src/empty-state/title.tsx +9 -3
  399. package/src/form/primitives/field/description.tsx +6 -1
  400. package/src/form/primitives/field/details.tsx +4 -2
  401. package/src/form/primitives/field/label.tsx +9 -5
  402. package/src/form/primitives/field/root.tsx +2 -2
  403. package/src/form/primitives/field/test/index.test.tsx +11 -0
  404. package/src/form/primitives/fieldset/description.tsx +9 -1
  405. package/src/form/primitives/fieldset/legend.tsx +9 -4
  406. package/src/form/primitives/fieldset/test/index.test.tsx +22 -0
  407. package/src/form/primitives/input/input.tsx +6 -1
  408. package/src/form/primitives/input/style.module.css +4 -0
  409. package/src/form/primitives/input-layout/input-layout.tsx +2 -0
  410. package/src/form/primitives/input-layout/style.module.css +3 -3
  411. package/src/form/primitives/select/popup.tsx +5 -2
  412. package/src/form/primitives/select/test/index.test.tsx +60 -1
  413. package/src/form/primitives/select/types.ts +14 -4
  414. package/src/form/primitives/textarea/textarea.tsx +10 -1
  415. package/src/form/stories/shared.tsx +4 -2
  416. package/src/index.ts +1 -0
  417. package/src/link/link.tsx +2 -0
  418. package/src/link/style.module.css +11 -1
  419. package/src/notice/style.module.css +5 -5
  420. package/src/popover/arrow.tsx +49 -0
  421. package/src/popover/close.tsx +24 -0
  422. package/src/popover/context.tsx +100 -0
  423. package/src/popover/description.tsx +29 -0
  424. package/src/popover/index.ts +9 -0
  425. package/src/popover/popup.tsx +106 -0
  426. package/src/popover/root.tsx +41 -0
  427. package/src/popover/stories/index.story.tsx +1315 -0
  428. package/src/popover/stories/utils.tsx +91 -0
  429. package/src/popover/style.module.css +64 -0
  430. package/src/popover/test/index.test.tsx +727 -0
  431. package/src/popover/title.tsx +47 -0
  432. package/src/popover/trigger.tsx +17 -0
  433. package/src/popover/types.ts +113 -0
  434. package/src/tabs/list.tsx +0 -1
  435. package/src/tabs/style.module.css +2 -2
  436. package/src/text/stories/index.story.tsx +4 -2
  437. package/src/text/style.module.css +62 -36
  438. package/src/text/test/index.test.tsx +1 -4
  439. package/src/text/text.tsx +8 -1
  440. package/src/tooltip/popup.tsx +2 -1
  441. package/src/tooltip/root.tsx +9 -8
  442. package/src/tooltip/stories/usage-guidelines.mdx +91 -0
  443. package/src/tooltip/stories/usage-guidelines.story.tsx +119 -0
  444. package/src/tooltip/style.module.css +2 -2
  445. package/src/tooltip/test/index.test.tsx +61 -0
  446. package/src/tooltip/types.ts +5 -0
  447. package/src/utils/css/field.module.css +12 -9
  448. package/src/utils/css/focus.module.css +7 -5
  449. package/src/utils/css/global-css-defense.module.css +117 -0
  450. package/src/utils/css/item-popup.module.css +2 -2
  451. package/src/utils/types.ts +7 -2
  452. package/src/utils/use-deprioritized-initial-focus.ts +5 -4
  453. package/src/visually-hidden/stories/index.story.tsx +25 -0
  454. package/src/visually-hidden/visually-hidden.tsx +34 -0
package/src/popover/stories/utils.tsx ADDED
@@ -0,0 +1,91 @@
1
+ import {
2
+ createPortal,
3
+ forwardRef,
4
+ useCallback,
5
+ useLayoutEffect,
6
+ useRef,
7
+ useState,
8
+ } from '@wordpress/element';
9
+ import { useMergeRefs } from '@wordpress/compose';
10
+ import type { RefCallback } from 'react';
11
+
12
+ /**
13
+ * Tracks the dimensions of a DOM element via ResizeObserver.
14
+ * Returns a ref callback to attach to the element and its current size.
15
+ *
16
+ * The ref callback performs a synchronous `getBoundingClientRect` read so
17
+ * the first render already has accurate dimensions (avoids a 0×0 flash).
18
+ */
19
+ export function useMeasure< TRef extends HTMLElement >() {
20
+ const [ element, setElement ] = useState< TRef | null >( null );
21
+ const [ elementSize, setElementSize ] = useState( {
22
+ width: 0,
23
+ height: 0,
24
+ } );
25
+
26
+ useLayoutEffect( () => {
27
+ if ( ! element ) {
28
+ return;
29
+ }
30
+
31
+ const resizeObserver = new ResizeObserver( () => {
32
+ const bcr = element.getBoundingClientRect();
33
+ setElementSize( { width: bcr.width, height: bcr.height } );
34
+ } );
35
+ resizeObserver.observe( element );
36
+
37
+ return () => {
38
+ resizeObserver.disconnect();
39
+ };
40
+ }, [ element ] );
41
+
42
+ const elementRef: RefCallback< TRef > = useCallback( ( node ) => {
43
+ if ( node ) {
44
+ const bcr = node.getBoundingClientRect();
45
+ setElementSize( { width: bcr.width, height: bcr.height } );
46
+ }
47
+ setElement( node );
48
+ }, [] );
49
+
50
+ return [ elementRef, elementSize ] as const;
51
+ }
52
+
53
+ /**
54
+ * Renders an iframe and portals its `children` into the iframe's body.
55
+ * Forwards a ref to the underlying `<iframe>` element.
56
+ *
57
+ * Waits for the iframe's `load` event before portaling to ensure
58
+ * compatibility with Firefox.
59
+ * See https://github.com/facebook/react/issues/22847#issuecomment-991394558
60
+ */
61
+ export const GenericIframe = forwardRef<
62
+ HTMLIFrameElement,
63
+ GenericIframeProps
64
+ >( function GenericIframe( { children, ...props }, ref ) {
65
+ const [ containerNode, setContainerNode ] = useState< HTMLElement | null >(
66
+ null
67
+ );
68
+ const iframeRef = useRef< HTMLIFrameElement >( null );
69
+ const mergedRef = useMergeRefs( [ ref, iframeRef ] );
70
+
71
+ return (
72
+ <iframe
73
+ title="Iframe"
74
+ { ...props }
75
+ ref={ mergedRef }
76
+ srcDoc="<!doctype html><html><body></body></html>"
77
+ onLoad={ ( event ) => {
78
+ const doc = event.currentTarget.contentDocument;
79
+ if ( doc ) {
80
+ setContainerNode( doc.body );
81
+ }
82
+ } }
83
+ >
84
+ { containerNode && createPortal( children, containerNode ) }
85
+ </iframe>
86
+ );
87
+ } );
88
+
89
+ export type GenericIframeProps = React.ComponentProps< 'iframe' > & {
90
+ children: React.ReactNode;
91
+ };
package/src/popover/style.module.css ADDED
@@ -0,0 +1,64 @@
1
+ @layer wp-ui-utilities, wp-ui-components, wp-ui-compositions, wp-ui-overrides;
2
+
3
+ @layer wp-ui-components {
4
+ .positioner {
5
+ z-index: var(--wp-ui-popover-z-index, initial);
6
+ }
7
+
8
+ .popup {
9
+ background-color: var(--wpds-color-bg-surface-neutral-strong);
10
+ padding: var(--wpds-dimension-padding-lg);
11
+ border-radius: var(--wpds-border-radius-md);
12
+ border: var(--wpds-border-width-xs) solid var(--wpds-color-stroke-surface-neutral-weak);
13
+ box-shadow: var(--wpds-elevation-md);
14
+ font-family: var(--wpds-typography-font-family-body);
15
+ font-size: var(--wpds-typography-font-size-md);
16
+ line-height: var(--wpds-typography-line-height-md);
17
+ color: var(--wpds-color-fg-content-neutral);
18
+ outline: 0;
19
+ }
20
+
21
+ .arrow {
22
+ display: flex;
23
+
24
+ &[data-side="top"] {
25
+ bottom: -8px;
26
+ rotate: 180deg;
27
+ }
28
+
29
+ &[data-side="bottom"] {
30
+ top: -8px;
31
+ rotate: 0deg;
32
+ }
33
+
34
+ &[data-side="left"] {
35
+ inset-inline-end: -13px;
36
+ rotate: 90deg;
37
+ }
38
+
39
+ &[data-side="right"] {
40
+ inset-inline-start: -13px;
41
+ rotate: -90deg;
42
+ }
43
+ }
44
+
45
+ .arrow-fill {
46
+ fill: var(--wpds-color-bg-surface-neutral-strong);
47
+ }
48
+
49
+ .arrow-stroke {
50
+ fill: var(--wpds-color-stroke-surface-neutral-weak);
51
+ }
52
+
53
+ .description {
54
+ color: var(--wpds-color-fg-content-neutral-weak);
55
+ }
56
+
57
+ .backdrop {
58
+ position: fixed;
59
+ inset: 0;
60
+ z-index: var(--wp-ui-popover-z-index, initial);
61
+ /* TODO: Replace with a WPDS overlay/scrim token when one exists. */
62
+ background-color: rgba(0, 0, 0, 0.15);
63
+ }
64
+ }