@ariakit/react-core 0.3.12 → 0.3.14

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 (484) hide show
  1. package/CHANGELOG.md +20 -0
  2. package/cjs/__chunks/{7HJPL3H2.cjs → I2KHXDVL.cjs} +4 -4
  3. package/cjs/__chunks/{VCDQISP7.cjs → N3XK7EAH.cjs} +7 -7
  4. package/cjs/__chunks/{KDG57VZV.cjs → OUEE5HOS.cjs} +3 -3
  5. package/cjs/__chunks/{EKB76T2U.cjs → ZL5DC555.cjs} +5 -5
  6. package/cjs/button/button.d.cts +1 -1
  7. package/cjs/button/button.d.ts +1 -1
  8. package/cjs/checkbox/checkbox-check.d.cts +17 -9
  9. package/cjs/checkbox/checkbox-check.d.ts +17 -9
  10. package/cjs/checkbox/checkbox-provider.cjs +2 -2
  11. package/cjs/checkbox/checkbox-provider.d.cts +4 -2
  12. package/cjs/checkbox/checkbox-provider.d.ts +4 -2
  13. package/cjs/checkbox/checkbox-store.d.cts +5 -3
  14. package/cjs/checkbox/checkbox-store.d.ts +5 -3
  15. package/cjs/checkbox/checkbox.d.cts +14 -9
  16. package/cjs/checkbox/checkbox.d.ts +14 -9
  17. package/cjs/collection/collection-item.d.cts +23 -9
  18. package/cjs/collection/collection-item.d.ts +23 -9
  19. package/cjs/collection/collection-provider.d.cts +2 -1
  20. package/cjs/collection/collection-provider.d.ts +2 -1
  21. package/cjs/collection/collection-renderer.d.cts +1 -1
  22. package/cjs/collection/collection-renderer.d.ts +1 -1
  23. package/cjs/collection/collection-store.d.cts +6 -3
  24. package/cjs/collection/collection-store.d.ts +6 -3
  25. package/cjs/collection/collection.d.cts +4 -3
  26. package/cjs/collection/collection.d.ts +4 -3
  27. package/cjs/combobox/combobox-cancel.d.cts +3 -2
  28. package/cjs/combobox/combobox-cancel.d.ts +3 -2
  29. package/cjs/combobox/combobox-disclosure.d.cts +7 -2
  30. package/cjs/combobox/combobox-disclosure.d.ts +7 -2
  31. package/cjs/combobox/combobox-group-label.d.cts +4 -4
  32. package/cjs/combobox/combobox-group-label.d.ts +4 -4
  33. package/cjs/combobox/combobox-group.d.cts +7 -3
  34. package/cjs/combobox/combobox-group.d.ts +7 -3
  35. package/cjs/combobox/combobox-item-check.d.cts +9 -16
  36. package/cjs/combobox/combobox-item-check.d.ts +9 -16
  37. package/cjs/combobox/combobox-item-value.d.cts +13 -8
  38. package/cjs/combobox/combobox-item-value.d.ts +13 -8
  39. package/cjs/combobox/combobox-item.d.cts +11 -9
  40. package/cjs/combobox/combobox-item.d.ts +11 -9
  41. package/cjs/combobox/combobox-list.d.cts +1 -4
  42. package/cjs/combobox/combobox-list.d.ts +1 -4
  43. package/cjs/combobox/combobox-popover.cjs +7 -7
  44. package/cjs/combobox/combobox-popover.d.cts +2 -3
  45. package/cjs/combobox/combobox-popover.d.ts +2 -3
  46. package/cjs/combobox/combobox-provider.d.cts +2 -1
  47. package/cjs/combobox/combobox-provider.d.ts +2 -1
  48. package/cjs/combobox/combobox-row.d.cts +6 -3
  49. package/cjs/combobox/combobox-row.d.ts +6 -3
  50. package/cjs/combobox/combobox-separator.d.cts +4 -3
  51. package/cjs/combobox/combobox-separator.d.ts +4 -3
  52. package/cjs/combobox/combobox-store.d.cts +11 -7
  53. package/cjs/combobox/combobox-store.d.ts +11 -7
  54. package/cjs/combobox/combobox.d.cts +45 -33
  55. package/cjs/combobox/combobox.d.ts +45 -33
  56. package/cjs/command/command.d.cts +1 -1
  57. package/cjs/command/command.d.ts +1 -1
  58. package/cjs/composite/composite-container.d.cts +18 -11
  59. package/cjs/composite/composite-container.d.ts +18 -11
  60. package/cjs/composite/composite-group-label.d.cts +18 -13
  61. package/cjs/composite/composite-group-label.d.ts +18 -13
  62. package/cjs/composite/composite-group.d.cts +20 -12
  63. package/cjs/composite/composite-group.d.ts +20 -12
  64. package/cjs/composite/composite-hover.d.cts +17 -8
  65. package/cjs/composite/composite-hover.d.ts +17 -8
  66. package/cjs/composite/composite-input.d.cts +15 -9
  67. package/cjs/composite/composite-input.d.ts +15 -9
  68. package/cjs/composite/composite-item.d.cts +49 -9
  69. package/cjs/composite/composite-item.d.ts +49 -9
  70. package/cjs/composite/composite-overflow.cjs +6 -6
  71. package/cjs/composite/composite-provider.d.cts +2 -1
  72. package/cjs/composite/composite-provider.d.ts +2 -1
  73. package/cjs/composite/composite-renderer.d.cts +1 -1
  74. package/cjs/composite/composite-renderer.d.ts +1 -1
  75. package/cjs/composite/composite-row.d.cts +26 -19
  76. package/cjs/composite/composite-row.d.ts +26 -19
  77. package/cjs/composite/composite-separator.d.cts +23 -10
  78. package/cjs/composite/composite-separator.d.ts +23 -10
  79. package/cjs/composite/composite-store.d.cts +3 -1
  80. package/cjs/composite/composite-store.d.ts +3 -1
  81. package/cjs/composite/composite-typeahead.d.cts +20 -8
  82. package/cjs/composite/composite-typeahead.d.ts +20 -8
  83. package/cjs/composite/composite.d.cts +65 -10
  84. package/cjs/composite/composite.d.ts +65 -10
  85. package/cjs/dialog/dialog-disclosure.d.cts +2 -1
  86. package/cjs/dialog/dialog-disclosure.d.ts +2 -1
  87. package/cjs/dialog/dialog-dismiss.d.cts +2 -1
  88. package/cjs/dialog/dialog-dismiss.d.ts +2 -1
  89. package/cjs/dialog/dialog-provider.d.cts +2 -1
  90. package/cjs/dialog/dialog-provider.d.ts +2 -1
  91. package/cjs/dialog/dialog-store.d.cts +3 -1
  92. package/cjs/dialog/dialog-store.d.ts +3 -1
  93. package/cjs/dialog/dialog.cjs +5 -5
  94. package/cjs/dialog/dialog.d.cts +51 -20
  95. package/cjs/dialog/dialog.d.ts +51 -20
  96. package/cjs/dialog/utils/disable-tree.cjs +3 -3
  97. package/cjs/dialog/utils/use-hide-on-interact-outside.cjs +1 -1
  98. package/cjs/disclosure/disclosure-content.d.cts +6 -5
  99. package/cjs/disclosure/disclosure-content.d.ts +6 -5
  100. package/cjs/disclosure/disclosure-provider.d.cts +2 -1
  101. package/cjs/disclosure/disclosure-provider.d.ts +2 -1
  102. package/cjs/disclosure/disclosure-store.d.cts +6 -4
  103. package/cjs/disclosure/disclosure-store.d.ts +6 -4
  104. package/cjs/disclosure/disclosure.d.cts +3 -2
  105. package/cjs/disclosure/disclosure.d.ts +3 -2
  106. package/cjs/focus-trap/focus-trap-region.d.cts +4 -2
  107. package/cjs/focus-trap/focus-trap-region.d.ts +4 -2
  108. package/cjs/focusable/focusable-container.d.cts +7 -5
  109. package/cjs/focusable/focusable-container.d.ts +7 -5
  110. package/cjs/focusable/focusable.d.cts +5 -2
  111. package/cjs/focusable/focusable.d.ts +5 -2
  112. package/cjs/form/form-checkbox.cjs +5 -5
  113. package/cjs/form/form-checkbox.d.cts +6 -4
  114. package/cjs/form/form-checkbox.d.ts +6 -4
  115. package/cjs/form/form-control.cjs +16 -0
  116. package/cjs/form/form-control.d.cts +93 -0
  117. package/cjs/form/form-control.d.ts +93 -0
  118. package/cjs/form/form-description.d.cts +14 -3
  119. package/cjs/form/form-description.d.ts +14 -3
  120. package/cjs/form/form-error.d.cts +11 -4
  121. package/cjs/form/form-error.d.ts +11 -4
  122. package/cjs/form/form-field.cjs +19 -4
  123. package/cjs/form/form-field.d.cts +16 -30
  124. package/cjs/form/form-field.d.ts +16 -30
  125. package/cjs/form/form-group-label.d.cts +6 -4
  126. package/cjs/form/form-group-label.d.ts +6 -4
  127. package/cjs/form/form-group.d.cts +6 -2
  128. package/cjs/form/form-group.d.ts +6 -2
  129. package/cjs/form/form-input.cjs +2 -2
  130. package/cjs/form/form-input.d.cts +7 -6
  131. package/cjs/form/form-input.d.ts +7 -6
  132. package/cjs/form/form-label.d.cts +18 -7
  133. package/cjs/form/form-label.d.ts +18 -7
  134. package/cjs/form/form-provider.d.cts +2 -1
  135. package/cjs/form/form-provider.d.ts +2 -1
  136. package/cjs/form/form-push.d.cts +17 -3
  137. package/cjs/form/form-push.d.ts +17 -3
  138. package/cjs/form/form-radio-group.d.cts +7 -2
  139. package/cjs/form/form-radio-group.d.ts +7 -2
  140. package/cjs/form/form-radio.cjs +2 -2
  141. package/cjs/form/form-radio.d.cts +8 -4
  142. package/cjs/form/form-radio.d.ts +8 -4
  143. package/cjs/form/form-remove.d.cts +17 -2
  144. package/cjs/form/form-remove.d.ts +17 -2
  145. package/cjs/form/form-reset.d.cts +5 -2
  146. package/cjs/form/form-reset.d.ts +5 -2
  147. package/cjs/form/form-store.d.cts +31 -14
  148. package/cjs/form/form-store.d.ts +31 -14
  149. package/cjs/form/form-submit.d.cts +8 -2
  150. package/cjs/form/form-submit.d.ts +8 -2
  151. package/cjs/form/form.d.cts +37 -11
  152. package/cjs/form/form.d.ts +37 -11
  153. package/cjs/group/group-label.d.cts +3 -2
  154. package/cjs/group/group-label.d.ts +3 -2
  155. package/cjs/group/group.d.cts +3 -1
  156. package/cjs/group/group.d.ts +3 -1
  157. package/cjs/heading/heading-level.d.cts +4 -2
  158. package/cjs/heading/heading-level.d.ts +4 -2
  159. package/cjs/heading/heading.d.cts +4 -3
  160. package/cjs/heading/heading.d.ts +4 -3
  161. package/cjs/hovercard/hovercard-anchor.d.cts +5 -2
  162. package/cjs/hovercard/hovercard-anchor.d.ts +5 -2
  163. package/cjs/hovercard/hovercard-arrow.d.cts +4 -2
  164. package/cjs/hovercard/hovercard-arrow.d.ts +4 -2
  165. package/cjs/hovercard/hovercard-description.d.cts +2 -2
  166. package/cjs/hovercard/hovercard-description.d.ts +2 -2
  167. package/cjs/hovercard/hovercard-disclosure.d.cts +1 -1
  168. package/cjs/hovercard/hovercard-disclosure.d.ts +1 -1
  169. package/cjs/hovercard/hovercard-dismiss.d.cts +3 -2
  170. package/cjs/hovercard/hovercard-dismiss.d.ts +3 -2
  171. package/cjs/hovercard/hovercard-heading.d.cts +2 -2
  172. package/cjs/hovercard/hovercard-heading.d.ts +2 -2
  173. package/cjs/hovercard/hovercard-provider.d.cts +2 -1
  174. package/cjs/hovercard/hovercard-provider.d.ts +2 -1
  175. package/cjs/hovercard/hovercard-store.d.cts +2 -1
  176. package/cjs/hovercard/hovercard-store.d.ts +2 -1
  177. package/cjs/hovercard/hovercard.cjs +7 -7
  178. package/cjs/hovercard/hovercard.d.cts +20 -8
  179. package/cjs/hovercard/hovercard.d.ts +20 -8
  180. package/cjs/menu/menu-arrow.d.cts +4 -2
  181. package/cjs/menu/menu-arrow.d.ts +4 -2
  182. package/cjs/menu/menu-bar.d.cts +1 -2
  183. package/cjs/menu/menu-bar.d.ts +1 -2
  184. package/cjs/menu/menu-button-arrow.d.cts +9 -4
  185. package/cjs/menu/menu-button-arrow.d.ts +9 -4
  186. package/cjs/menu/menu-button.d.cts +8 -7
  187. package/cjs/menu/menu-button.d.ts +8 -7
  188. package/cjs/menu/menu-description.d.cts +2 -2
  189. package/cjs/menu/menu-description.d.ts +2 -2
  190. package/cjs/menu/menu-dismiss.d.cts +3 -2
  191. package/cjs/menu/menu-dismiss.d.ts +3 -2
  192. package/cjs/menu/menu-group-label.d.cts +4 -4
  193. package/cjs/menu/menu-group-label.d.ts +4 -4
  194. package/cjs/menu/menu-group.d.cts +5 -2
  195. package/cjs/menu/menu-group.d.ts +5 -2
  196. package/cjs/menu/menu-heading.d.cts +3 -2
  197. package/cjs/menu/menu-heading.d.ts +3 -2
  198. package/cjs/menu/menu-item-check.d.cts +10 -18
  199. package/cjs/menu/menu-item-check.d.ts +10 -18
  200. package/cjs/menu/menu-item-checkbox.cjs +3 -3
  201. package/cjs/menu/menu-item-checkbox.d.cts +38 -6
  202. package/cjs/menu/menu-item-checkbox.d.ts +38 -6
  203. package/cjs/menu/menu-item-radio.d.cts +21 -9
  204. package/cjs/menu/menu-item-radio.d.ts +21 -9
  205. package/cjs/menu/menu-item.d.cts +10 -11
  206. package/cjs/menu/menu-item.d.ts +10 -11
  207. package/cjs/menu/menu-list.d.cts +7 -2
  208. package/cjs/menu/menu-list.d.ts +7 -2
  209. package/cjs/menu/menu-provider.d.cts +2 -1
  210. package/cjs/menu/menu-provider.d.ts +2 -1
  211. package/cjs/menu/menu-separator.d.cts +5 -2
  212. package/cjs/menu/menu-separator.d.ts +5 -2
  213. package/cjs/menu/menu-store.d.cts +18 -7
  214. package/cjs/menu/menu-store.d.ts +18 -7
  215. package/cjs/menu/menu.cjs +8 -8
  216. package/cjs/menu/menu.d.cts +8 -2
  217. package/cjs/menu/menu.d.ts +8 -2
  218. package/cjs/menubar/menubar-provider.d.cts +2 -1
  219. package/cjs/menubar/menubar-provider.d.ts +2 -1
  220. package/cjs/menubar/menubar-store.d.cts +3 -1
  221. package/cjs/menubar/menubar-store.d.ts +3 -1
  222. package/cjs/menubar/menubar.d.cts +3 -2
  223. package/cjs/menubar/menubar.d.ts +3 -2
  224. package/cjs/popover/popover-anchor.d.cts +4 -3
  225. package/cjs/popover/popover-anchor.d.ts +4 -3
  226. package/cjs/popover/popover-arrow.d.cts +6 -2
  227. package/cjs/popover/popover-arrow.d.ts +6 -2
  228. package/cjs/popover/popover-description.d.cts +1 -1
  229. package/cjs/popover/popover-description.d.ts +1 -1
  230. package/cjs/popover/popover-disclosure-arrow.d.cts +6 -4
  231. package/cjs/popover/popover-disclosure-arrow.d.ts +6 -4
  232. package/cjs/popover/popover-disclosure.d.cts +3 -2
  233. package/cjs/popover/popover-disclosure.d.ts +3 -2
  234. package/cjs/popover/popover-dismiss.d.cts +1 -1
  235. package/cjs/popover/popover-dismiss.d.ts +1 -1
  236. package/cjs/popover/popover-heading.d.cts +1 -1
  237. package/cjs/popover/popover-heading.d.ts +1 -1
  238. package/cjs/popover/popover-provider.d.cts +2 -1
  239. package/cjs/popover/popover-provider.d.ts +2 -1
  240. package/cjs/popover/popover-store.d.cts +2 -1
  241. package/cjs/popover/popover-store.d.ts +2 -1
  242. package/cjs/popover/popover.cjs +6 -6
  243. package/cjs/popover/popover.d.cts +8 -3
  244. package/cjs/popover/popover.d.ts +8 -3
  245. package/cjs/portal/portal.d.cts +18 -1
  246. package/cjs/portal/portal.d.ts +18 -1
  247. package/cjs/radio/radio-group.d.cts +8 -6
  248. package/cjs/radio/radio-group.d.ts +8 -6
  249. package/cjs/radio/radio-provider.d.cts +2 -1
  250. package/cjs/radio/radio-provider.d.ts +2 -1
  251. package/cjs/radio/radio-store.d.cts +6 -2
  252. package/cjs/radio/radio-store.d.ts +6 -2
  253. package/cjs/radio/radio.d.cts +21 -13
  254. package/cjs/radio/radio.d.ts +21 -13
  255. package/cjs/role/role.d.cts +3 -3
  256. package/cjs/role/role.d.ts +3 -3
  257. package/cjs/select/select-group-label.d.cts +2 -2
  258. package/cjs/select/select-group-label.d.ts +2 -2
  259. package/cjs/select/select-group.d.cts +4 -1
  260. package/cjs/select/select-group.d.ts +4 -1
  261. package/cjs/select/select-item-check.d.cts +9 -15
  262. package/cjs/select/select-item-check.d.ts +9 -15
  263. package/cjs/select/select-item.d.cts +1 -5
  264. package/cjs/select/select-item.d.ts +1 -5
  265. package/cjs/select/select-list.d.cts +7 -4
  266. package/cjs/select/select-list.d.ts +7 -4
  267. package/cjs/select/select-popover.cjs +7 -7
  268. package/cjs/select/select-provider.d.cts +2 -1
  269. package/cjs/select/select-provider.d.ts +2 -1
  270. package/cjs/select/select-renderer.d.cts +1 -1
  271. package/cjs/select/select-renderer.d.ts +1 -1
  272. package/cjs/select/select-row.d.cts +4 -1
  273. package/cjs/select/select-row.d.ts +4 -1
  274. package/cjs/select/select-separator.d.cts +2 -1
  275. package/cjs/select/select-separator.d.ts +2 -1
  276. package/cjs/select/select-store.d.cts +17 -10
  277. package/cjs/select/select-store.d.ts +17 -10
  278. package/cjs/select/select.cjs +8 -6
  279. package/cjs/select/select.d.cts +25 -15
  280. package/cjs/select/select.d.ts +25 -15
  281. package/cjs/tab/tab-list.d.cts +2 -1
  282. package/cjs/tab/tab-list.d.ts +2 -1
  283. package/cjs/tab/tab-panel.d.cts +19 -3
  284. package/cjs/tab/tab-panel.d.ts +19 -3
  285. package/cjs/tab/tab-provider.d.cts +1 -1
  286. package/cjs/tab/tab-provider.d.ts +1 -1
  287. package/cjs/tab/tab-store.d.cts +3 -1
  288. package/cjs/tab/tab-store.d.ts +3 -1
  289. package/cjs/tab/tab.d.cts +2 -2
  290. package/cjs/tab/tab.d.ts +2 -2
  291. package/cjs/toolbar/toolbar-container.d.cts +1 -1
  292. package/cjs/toolbar/toolbar-container.d.ts +1 -1
  293. package/cjs/toolbar/toolbar-input.d.cts +2 -1
  294. package/cjs/toolbar/toolbar-input.d.ts +2 -1
  295. package/cjs/toolbar/toolbar-item.d.cts +2 -1
  296. package/cjs/toolbar/toolbar-item.d.ts +2 -1
  297. package/cjs/toolbar/toolbar-provider.d.cts +2 -1
  298. package/cjs/toolbar/toolbar-provider.d.ts +2 -1
  299. package/cjs/toolbar/toolbar-separator.d.cts +2 -1
  300. package/cjs/toolbar/toolbar-separator.d.ts +2 -1
  301. package/cjs/toolbar/toolbar-store.d.cts +3 -1
  302. package/cjs/toolbar/toolbar-store.d.ts +3 -1
  303. package/cjs/tooltip/tooltip-anchor.d.cts +3 -3
  304. package/cjs/tooltip/tooltip-anchor.d.ts +3 -3
  305. package/cjs/tooltip/tooltip-arrow.d.cts +1 -1
  306. package/cjs/tooltip/tooltip-arrow.d.ts +1 -1
  307. package/cjs/tooltip/tooltip-provider.d.cts +2 -1
  308. package/cjs/tooltip/tooltip-provider.d.ts +2 -1
  309. package/cjs/tooltip/tooltip-store.d.cts +3 -1
  310. package/cjs/tooltip/tooltip-store.d.ts +3 -1
  311. package/cjs/tooltip/tooltip.cjs +8 -8
  312. package/cjs/tooltip/tooltip.d.cts +3 -1
  313. package/cjs/tooltip/tooltip.d.ts +3 -1
  314. package/esm/__chunks/{FS2EVEJO.js → 4GO43MST.js} +8 -8
  315. package/esm/__chunks/{A6XC27R5.js → IRX7SFUJ.js} +1 -1
  316. package/esm/__chunks/{PGAEII2Q.js → NERBASET.js} +4 -4
  317. package/esm/__chunks/{EPBRINPG.js → QWSZGSIG.js} +2 -2
  318. package/esm/button/button.d.ts +1 -1
  319. package/esm/checkbox/checkbox-check.d.ts +17 -9
  320. package/esm/checkbox/checkbox-provider.d.ts +4 -2
  321. package/esm/checkbox/checkbox-provider.js +3 -3
  322. package/esm/checkbox/checkbox-store.d.ts +5 -3
  323. package/esm/checkbox/checkbox.d.ts +14 -9
  324. package/esm/collection/collection-item.d.ts +23 -9
  325. package/esm/collection/collection-provider.d.ts +2 -1
  326. package/esm/collection/collection-renderer.d.ts +1 -1
  327. package/esm/collection/collection-store.d.ts +6 -3
  328. package/esm/collection/collection.d.ts +4 -3
  329. package/esm/combobox/combobox-cancel.d.ts +3 -2
  330. package/esm/combobox/combobox-disclosure.d.ts +7 -2
  331. package/esm/combobox/combobox-group-label.d.ts +4 -4
  332. package/esm/combobox/combobox-group.d.ts +7 -3
  333. package/esm/combobox/combobox-item-check.d.ts +9 -16
  334. package/esm/combobox/combobox-item-value.d.ts +13 -8
  335. package/esm/combobox/combobox-item.d.ts +11 -9
  336. package/esm/combobox/combobox-list.d.ts +1 -4
  337. package/esm/combobox/combobox-popover.d.ts +2 -3
  338. package/esm/combobox/combobox-popover.js +5 -5
  339. package/esm/combobox/combobox-provider.d.ts +2 -1
  340. package/esm/combobox/combobox-row.d.ts +6 -3
  341. package/esm/combobox/combobox-separator.d.ts +4 -3
  342. package/esm/combobox/combobox-store.d.ts +11 -7
  343. package/esm/combobox/combobox.d.ts +45 -33
  344. package/esm/command/command.d.ts +1 -1
  345. package/esm/composite/composite-container.d.ts +18 -11
  346. package/esm/composite/composite-group-label.d.ts +18 -13
  347. package/esm/composite/composite-group.d.ts +20 -12
  348. package/esm/composite/composite-hover.d.ts +17 -8
  349. package/esm/composite/composite-input.d.ts +15 -9
  350. package/esm/composite/composite-item.d.ts +49 -9
  351. package/esm/composite/composite-overflow.js +5 -5
  352. package/esm/composite/composite-provider.d.ts +2 -1
  353. package/esm/composite/composite-renderer.d.ts +1 -1
  354. package/esm/composite/composite-row.d.ts +26 -19
  355. package/esm/composite/composite-separator.d.ts +23 -10
  356. package/esm/composite/composite-store.d.ts +3 -1
  357. package/esm/composite/composite-typeahead.d.ts +20 -8
  358. package/esm/composite/composite.d.ts +65 -10
  359. package/esm/dialog/dialog-disclosure.d.ts +2 -1
  360. package/esm/dialog/dialog-dismiss.d.ts +2 -1
  361. package/esm/dialog/dialog-provider.d.ts +2 -1
  362. package/esm/dialog/dialog-store.d.ts +3 -1
  363. package/esm/dialog/dialog.d.ts +51 -20
  364. package/esm/dialog/dialog.js +4 -4
  365. package/esm/dialog/utils/disable-tree.js +2 -2
  366. package/esm/dialog/utils/use-hide-on-interact-outside.js +1 -1
  367. package/esm/disclosure/disclosure-content.d.ts +6 -5
  368. package/esm/disclosure/disclosure-provider.d.ts +2 -1
  369. package/esm/disclosure/disclosure-store.d.ts +6 -4
  370. package/esm/disclosure/disclosure.d.ts +3 -2
  371. package/esm/focus-trap/focus-trap-region.d.ts +4 -2
  372. package/esm/focusable/focusable-container.d.ts +7 -5
  373. package/esm/focusable/focusable.d.ts +5 -2
  374. package/esm/form/form-checkbox.d.ts +6 -4
  375. package/esm/form/form-checkbox.js +6 -6
  376. package/esm/form/form-control.d.ts +93 -0
  377. package/esm/form/form-control.js +16 -0
  378. package/esm/form/form-description.d.ts +14 -3
  379. package/esm/form/form-error.d.ts +11 -4
  380. package/esm/form/form-field.d.ts +16 -30
  381. package/esm/form/form-field.js +19 -4
  382. package/esm/form/form-group-label.d.ts +6 -4
  383. package/esm/form/form-group.d.ts +6 -2
  384. package/esm/form/form-input.d.ts +7 -6
  385. package/esm/form/form-input.js +3 -3
  386. package/esm/form/form-label.d.ts +18 -7
  387. package/esm/form/form-provider.d.ts +2 -1
  388. package/esm/form/form-push.d.ts +17 -3
  389. package/esm/form/form-radio-group.d.ts +7 -2
  390. package/esm/form/form-radio.d.ts +8 -4
  391. package/esm/form/form-radio.js +3 -3
  392. package/esm/form/form-remove.d.ts +17 -2
  393. package/esm/form/form-reset.d.ts +5 -2
  394. package/esm/form/form-store.d.ts +31 -14
  395. package/esm/form/form-submit.d.ts +8 -2
  396. package/esm/form/form.d.ts +37 -11
  397. package/esm/group/group-label.d.ts +3 -2
  398. package/esm/group/group.d.ts +3 -1
  399. package/esm/heading/heading-level.d.ts +4 -2
  400. package/esm/heading/heading.d.ts +4 -3
  401. package/esm/hovercard/hovercard-anchor.d.ts +5 -2
  402. package/esm/hovercard/hovercard-arrow.d.ts +4 -2
  403. package/esm/hovercard/hovercard-description.d.ts +2 -2
  404. package/esm/hovercard/hovercard-disclosure.d.ts +1 -1
  405. package/esm/hovercard/hovercard-dismiss.d.ts +3 -2
  406. package/esm/hovercard/hovercard-heading.d.ts +2 -2
  407. package/esm/hovercard/hovercard-provider.d.ts +2 -1
  408. package/esm/hovercard/hovercard-store.d.ts +2 -1
  409. package/esm/hovercard/hovercard.d.ts +20 -8
  410. package/esm/hovercard/hovercard.js +6 -6
  411. package/esm/menu/menu-arrow.d.ts +4 -2
  412. package/esm/menu/menu-bar.d.ts +1 -2
  413. package/esm/menu/menu-button-arrow.d.ts +9 -4
  414. package/esm/menu/menu-button.d.ts +8 -7
  415. package/esm/menu/menu-description.d.ts +2 -2
  416. package/esm/menu/menu-dismiss.d.ts +3 -2
  417. package/esm/menu/menu-group-label.d.ts +4 -4
  418. package/esm/menu/menu-group.d.ts +5 -2
  419. package/esm/menu/menu-heading.d.ts +3 -2
  420. package/esm/menu/menu-item-check.d.ts +10 -18
  421. package/esm/menu/menu-item-checkbox.d.ts +38 -6
  422. package/esm/menu/menu-item-checkbox.js +3 -3
  423. package/esm/menu/menu-item-radio.d.ts +21 -9
  424. package/esm/menu/menu-item.d.ts +10 -11
  425. package/esm/menu/menu-list.d.ts +7 -2
  426. package/esm/menu/menu-provider.d.ts +2 -1
  427. package/esm/menu/menu-separator.d.ts +5 -2
  428. package/esm/menu/menu-store.d.ts +18 -7
  429. package/esm/menu/menu.d.ts +8 -2
  430. package/esm/menu/menu.js +6 -6
  431. package/esm/menubar/menubar-provider.d.ts +2 -1
  432. package/esm/menubar/menubar-store.d.ts +3 -1
  433. package/esm/menubar/menubar.d.ts +3 -2
  434. package/esm/popover/popover-anchor.d.ts +4 -3
  435. package/esm/popover/popover-arrow.d.ts +6 -2
  436. package/esm/popover/popover-description.d.ts +1 -1
  437. package/esm/popover/popover-disclosure-arrow.d.ts +6 -4
  438. package/esm/popover/popover-disclosure.d.ts +3 -2
  439. package/esm/popover/popover-dismiss.d.ts +1 -1
  440. package/esm/popover/popover-heading.d.ts +1 -1
  441. package/esm/popover/popover-provider.d.ts +2 -1
  442. package/esm/popover/popover-store.d.ts +2 -1
  443. package/esm/popover/popover.d.ts +8 -3
  444. package/esm/popover/popover.js +5 -5
  445. package/esm/portal/portal.d.ts +18 -1
  446. package/esm/radio/radio-group.d.ts +8 -6
  447. package/esm/radio/radio-provider.d.ts +2 -1
  448. package/esm/radio/radio-store.d.ts +6 -2
  449. package/esm/radio/radio.d.ts +21 -13
  450. package/esm/role/role.d.ts +3 -3
  451. package/esm/select/select-group-label.d.ts +2 -2
  452. package/esm/select/select-group.d.ts +4 -1
  453. package/esm/select/select-item-check.d.ts +9 -15
  454. package/esm/select/select-item.d.ts +1 -5
  455. package/esm/select/select-list.d.ts +7 -4
  456. package/esm/select/select-popover.js +5 -5
  457. package/esm/select/select-provider.d.ts +2 -1
  458. package/esm/select/select-renderer.d.ts +1 -1
  459. package/esm/select/select-row.d.ts +4 -1
  460. package/esm/select/select-separator.d.ts +2 -1
  461. package/esm/select/select-store.d.ts +17 -10
  462. package/esm/select/select.d.ts +25 -15
  463. package/esm/select/select.js +8 -6
  464. package/esm/tab/tab-list.d.ts +2 -1
  465. package/esm/tab/tab-panel.d.ts +19 -3
  466. package/esm/tab/tab-provider.d.ts +1 -1
  467. package/esm/tab/tab-store.d.ts +3 -1
  468. package/esm/tab/tab.d.ts +2 -2
  469. package/esm/toolbar/toolbar-container.d.ts +1 -1
  470. package/esm/toolbar/toolbar-input.d.ts +2 -1
  471. package/esm/toolbar/toolbar-item.d.ts +2 -1
  472. package/esm/toolbar/toolbar-provider.d.ts +2 -1
  473. package/esm/toolbar/toolbar-separator.d.ts +2 -1
  474. package/esm/toolbar/toolbar-store.d.ts +3 -1
  475. package/esm/tooltip/tooltip-anchor.d.ts +3 -3
  476. package/esm/tooltip/tooltip-arrow.d.ts +1 -1
  477. package/esm/tooltip/tooltip-provider.d.ts +2 -1
  478. package/esm/tooltip/tooltip-store.d.ts +3 -1
  479. package/esm/tooltip/tooltip.d.ts +3 -1
  480. package/esm/tooltip/tooltip.js +6 -6
  481. package/form/form-control/package.json +8 -0
  482. package/package.json +9 -2
  483. package/cjs/__chunks/{NKR65BKC.cjs → KSPMHEYZ.cjs} +3 -3
  484. package/esm/__chunks/{CLF4PQ7T.js → TQYOGOE2.js} +3 -3
@@ -1,10 +1,10 @@
1
1
  "use client";
2
2
  import {
3
3
  usePopover
4
- } from "../__chunks/A6XC27R5.js";
5
- import "../__chunks/PGAEII2Q.js";
4
+ } from "../__chunks/IRX7SFUJ.js";
5
+ import "../__chunks/NERBASET.js";
6
6
  import "../__chunks/LWHPHW7Q.js";
7
- import "../__chunks/CLF4PQ7T.js";
7
+ import "../__chunks/TQYOGOE2.js";
8
8
  import "../__chunks/BULCTPRV.js";
9
9
  import "../__chunks/6BJGLK2C.js";
10
10
  import "../__chunks/CS347UVZ.js";
@@ -12,11 +12,11 @@ import "../__chunks/IUB2BTEK.js";
12
12
  import "../__chunks/XHJGS6Z5.js";
13
13
  import "../__chunks/TL67WVI6.js";
14
14
  import "../__chunks/MKDDWKFK.js";
15
+ import "../__chunks/72E5EPFF.js";
15
16
  import "../__chunks/OOBDFMJL.js";
17
+ import "../__chunks/X6WIMZJE.js";
16
18
  import "../__chunks/677M2CI3.js";
17
19
  import "../__chunks/6GXEOXGT.js";
18
- import "../__chunks/72E5EPFF.js";
19
- import "../__chunks/X6WIMZJE.js";
20
20
  import "../__chunks/HPP6CWMY.js";
21
21
  import "../__chunks/UYRJLDVS.js";
22
22
  import "../__chunks/JPXNJYSO.js";
@@ -2,7 +2,8 @@ import type { ReactElement, ReactNode } from "react";
2
2
  import type { PickRequired } from "@ariakit/core/utils/types";
3
3
  import type { CompositeStoreItem, CompositeStoreProps } from "./composite-store.js";
4
4
  /**
5
- * Provides a composite store to CompositeItem components.
5
+ * Provides a composite store to
6
+ * [`CompositeItem`](https://ariakit.org/reference/composite-item) components.
6
7
  * @see https://ariakit.org/components/composite
7
8
  * @example
8
9
  * ```jsx
@@ -294,7 +294,7 @@ export interface CompositeRendererOptions<T extends Item = any> extends Omit<Col
294
294
  /**
295
295
  * Object returned by the
296
296
  * [`useCompositeStore`](https://ariakit.org/reference/use-composite-store)
297
- * hook. If not provided, the parent
297
+ * hook. If not provided, the closest
298
298
  * [Composite](https://ariakit.org/components/composite) component's context
299
299
  * will be used.
300
300
  *
@@ -20,32 +20,39 @@ import type { CompositeStore } from "./composite-store.js";
20
20
  */
21
21
  export declare const useCompositeRow: import("../utils/types.js").Hook<CompositeRowOptions<"div">>;
22
22
  /**
23
- * Renders a composite row. Wrapping `CompositeItem` elements within
24
- * `CompositeRow` will create a two-dimensional composite widget, such as a
25
- * grid.
23
+ * Renders a row element for composite items that allows two-dimensional arrow
24
+ * key navigation.
25
+ * [`CompositeItem`](https://ariakit.org/reference/composite-item) elements
26
+ * wrapped within this component will automatically receive a
27
+ * [`rowId`](https://ariakit.org/reference/composite-item#rowid) prop.
26
28
  * @see https://ariakit.org/components/composite
27
29
  * @example
28
- * ```jsx
29
- * const composite = useCompositeStore();
30
- * <Composite store={composite}>
31
- * <CompositeRow>
32
- * <CompositeItem>Item 1.1</CompositeItem>
33
- * <CompositeItem>Item 1.2</CompositeItem>
34
- * <CompositeItem>Item 1.3</CompositeItem>
35
- * </CompositeRow>
36
- * <CompositeRow>
37
- * <CompositeItem>Item 2.1</CompositeItem>
38
- * <CompositeItem>Item 2.2</CompositeItem>
39
- * <CompositeItem>Item 2.3</CompositeItem>
40
- * </CompositeRow>
41
- * </Composite>
30
+ * ```jsx {3-12}
31
+ * <CompositeProvider>
32
+ * <Composite>
33
+ * <CompositeRow>
34
+ * <CompositeItem>Item 1.1</CompositeItem>
35
+ * <CompositeItem>Item 1.2</CompositeItem>
36
+ * <CompositeItem>Item 1.3</CompositeItem>
37
+ * </CompositeRow>
38
+ * <CompositeRow>
39
+ * <CompositeItem>Item 2.1</CompositeItem>
40
+ * <CompositeItem>Item 2.2</CompositeItem>
41
+ * <CompositeItem>Item 2.3</CompositeItem>
42
+ * </CompositeRow>
43
+ * </Composite>
44
+ * </CompositeProvider>
42
45
  * ```
43
46
  */
44
47
  export declare const CompositeRow: import("../utils/types.js").Component<CompositeRowOptions<"div">>;
45
48
  export interface CompositeRowOptions<T extends As = "div"> extends Options<T> {
46
49
  /**
47
- * Object returned by the `useCompositeStore` hook. If not provided, the
48
- * parent `Composite` component's context will be used.
50
+ * Object returned by the
51
+ * [`useCompositeStore`](https://ariakit.org/reference/use-composite-store)
52
+ * hook. If not provided, the closest
53
+ * [`Composite`](https://ariakit.org/reference/composite) or
54
+ * [`CompositeProvider`](https://ariakit.org/reference/composite-provider)
55
+ * components' context will be used.
49
56
  */
50
57
  store?: CompositeStore;
51
58
  }
@@ -17,24 +17,37 @@ import type { CompositeStore } from "./composite-store.js";
17
17
  */
18
18
  export declare const useCompositeSeparator: import("../utils/types.js").Hook<CompositeSeparatorOptions<"hr">>;
19
19
  /**
20
- * Renders a separator for composite items.
20
+ * Renders a divider between
21
+ * [`CompositeItem`](https://ariakit.org/reference/composite-item) elements.
21
22
  * @see https://ariakit.org/components/composite
22
23
  * @example
23
- * ```jsx
24
- * const composite = useCompositeStore();
25
- * <Composite store={composite}>
26
- * <CompositeItem>Item 1</CompositeItem>
27
- * <CompositeSeparator />
28
- * <CompositeItem>Item 2</CompositeItem>
29
- * </Composite>
24
+ * ```jsx {4}
25
+ * <CompositeProvider>
26
+ * <Composite>
27
+ * <CompositeItem>Item 1</CompositeItem>
28
+ * <CompositeSeparator />
29
+ * <CompositeItem>Item 2</CompositeItem>
30
+ * </Composite>
31
+ * </CompositeProvider>
30
32
  * ```
31
33
  */
32
34
  export declare const CompositeSeparator: import("../utils/types.js").Component<CompositeSeparatorOptions<"hr">>;
33
35
  export interface CompositeSeparatorOptions<T extends As = "hr"> extends SeparatorOptions<T> {
34
36
  /**
35
- * Object returned by the `useCompositeStore` hook. If not provided, the
36
- * parent `Composite` component's context will be used.
37
+ * Object returned by the
38
+ * [`useCompositeStore`](https://ariakit.org/reference/use-composite-store)
39
+ * hook. If not provided, the closest
40
+ * [`Composite`](https://ariakit.org/reference/composite) or
41
+ * [`CompositeProvider`](https://ariakit.org/reference/composite-provider)
42
+ * components' context will be used.
37
43
  */
38
44
  store?: CompositeStore;
45
+ /**
46
+ * The orientation of the separator. By default, this is the opposite of the
47
+ * [`orientation`](https://ariakit.org/reference/composite-provider#orientation)
48
+ * state of the composite widget. Which means it doesn't need to be explicitly
49
+ * set in most cases.
50
+ */
51
+ orientation?: SeparatorOptions<T>["orientation"];
39
52
  }
40
53
  export type CompositeSeparatorProps<T extends As = "hr"> = Props<CompositeSeparatorOptions<T>>;
@@ -4,11 +4,13 @@ import type { CollectionStoreFunctions, CollectionStoreOptions, CollectionStoreS
4
4
  import type { Store } from "../utils/store.js";
5
5
  export declare function useCompositeStoreProps<T extends Core.CompositeStore>(store: T, update: () => void, props: CompositeStoreProps): T;
6
6
  /**
7
- * Creates a composite store.
7
+ * Creates a composite store to control the state of
8
+ * [Composite](https://ariakit.org/components/composite) components.
8
9
  * @see https://ariakit.org/components/composite
9
10
  * @example
10
11
  * ```jsx
11
12
  * const composite = useCompositeStore();
13
+ *
12
14
  * <Composite store={composite}>
13
15
  * <CompositeItem>Item</CompositeItem>
14
16
  * <CompositeItem>Item</CompositeItem>
@@ -17,25 +17,37 @@ export declare const useCompositeTypeahead: import("../utils/types.js").Hook<Com
17
17
  /**
18
18
  * Renders a component that adds typeahead functionality to composite
19
19
  * components.
20
+ *
21
+ * When the
22
+ * [`typeahead`](https://ariakit.org/reference/composite-typeahead#typeahead)
23
+ * prop is enabled, which it is by default, hitting printable character keys
24
+ * will move focus to the next composite item that begins with the input
25
+ * characters.
20
26
  * @see https://ariakit.org/components/composite
21
27
  * @example
22
28
  * ```jsx
23
- * const composite = useCompositeStore();
24
- * <Composite store={composite} render={<CompositeTypeahead />}>
25
- * <CompositeItem>Item 1</CompositeItem>
26
- * <CompositeItem>Item 2</CompositeItem>
27
- * </Composite>
29
+ * <CompositeProvider>
30
+ * <Composite render={<CompositeTypeahead />}>
31
+ * <CompositeItem>Item 1</CompositeItem>
32
+ * <CompositeItem>Item 2</CompositeItem>
33
+ * </Composite>
34
+ * </CompositeProvider>
28
35
  * ```
29
36
  */
30
37
  export declare const CompositeTypeahead: import("../utils/types.js").Component<CompositeTypeaheadOptions<"div">>;
31
38
  export interface CompositeTypeaheadOptions<T extends As = "div"> extends Options<T> {
32
39
  /**
33
- * Object returned by the `useCompositeStore` hook. If not provided, the
34
- * parent `Composite` component's context will be used.
40
+ * Object returned by the
41
+ * [`useCompositeStore`](https://ariakit.org/reference/use-composite-store)
42
+ * hook. If not provided, the closest
43
+ * [`Composite`](https://ariakit.org/reference/composite) or
44
+ * [`CompositeProvider`](https://ariakit.org/reference/composite-provider)
45
+ * components' context will be used.
35
46
  */
36
47
  store?: CompositeStore;
37
48
  /**
38
- * Determines whether the typeahead behavior is enabled.
49
+ * When enabled, pressing printable character keys will move focus to the next
50
+ * composite item that starts with the entered characters.
39
51
  * @default true
40
52
  */
41
53
  typeahead?: boolean;
@@ -32,27 +32,82 @@ export declare const useComposite: import("../utils/types.js").Hook<CompositeOpt
32
32
  export declare const Composite: import("../utils/types.js").Component<CompositeOptions<"div">>;
33
33
  export interface CompositeOptions<T extends As = "div"> extends FocusableOptions<T> {
34
34
  /**
35
- * Object returned by the `useCompositeStore` hook.
35
+ * Object returned by the
36
+ * [`useCompositeStore`](https://ariakit.org/reference/use-composite-store)
37
+ * hook. If not provided, the closest
38
+ * [`CompositeProvider`](https://ariakit.org/reference/composite-provider)
39
+ * component's context will be used.
36
40
  */
37
41
  store?: CompositeStore;
38
42
  /**
39
- * Whether the component should behave as a composite widget. This prop should
40
- * be set to `false` when combining different composite widgets where only one
41
- * should behave as such.
43
+ * Determines if the component should act as a composite widget. This prop
44
+ * needs to be set to `false` when merging various composite widgets where
45
+ * only one should function in that manner.
46
+ *
47
+ * If disabled, this component will stop managing focus and keyboard
48
+ * navigation for its items and itself. Additionally, composite ARIA
49
+ * attributes won't be applied. These responsibilities should be taken over by
50
+ * another composite component.
51
+ *
52
+ * **Note**: In most cases, this prop doesn't need to be set manually. For
53
+ * example, when composing [Menu with
54
+ * Combobox](https://ariakit.org/examples/menu-combobox) or [Select with
55
+ * Combobox](https://ariakit.org/examples/select-combobox), this prop will be
56
+ * set to `false` automatically on the
57
+ * [`Menu`](https://ariakit.org/reference/menu) and
58
+ * [`SelectPopover`](https://ariakit.org/reference/select-popover) components
59
+ * so the [`Combobox`](https://ariakit.org/reference/combobox) component can
60
+ * take over the composite widget responsibilities.
61
+ *
62
+ * Live examples:
63
+ * - [Menu with Combobox](https://ariakit.org/examples/menu-combobox)
64
+ * - [Select with Combobox](https://ariakit.org/examples/select-combobox)
42
65
  * @default true
43
66
  */
44
67
  composite?: boolean;
45
68
  /**
46
- * Whether the active composite item should receive focus when `store.move` is
47
- * called.
69
+ * Determines whether the composite widget should move focus to an item when
70
+ * arrow keys are pressed, given that the composite element is focused and
71
+ * there's no active item.
72
+ *
73
+ * **Note**: To entirely disable focus moving within a composite widget, you
74
+ * can use the
75
+ * [`focusOnMove`](https://ariakit.org/reference/composite#focusonmove) prop
76
+ * instead. If you want to control the behavior _only when arrow keys are
77
+ * pressed_, where
78
+ * [`focusOnMove`](https://ariakit.org/reference/composite#focusonmove) may
79
+ * not be applicable, this prop must be set on composite items as well.
48
80
  * @default true
81
+ * @example
82
+ * ```jsx
83
+ * <Composite moveOnKeyPress={false}>
84
+ * <CompositeItem moveOnKeyPress={false} />
85
+ * <CompositeItem moveOnKeyPress={false} />
86
+ * </Composite>
87
+ * ```
49
88
  */
50
- focusOnMove?: boolean;
89
+ moveOnKeyPress?: BooleanOrCallback<ReactKeyboardEvent<HTMLElement>>;
51
90
  /**
52
- * Whether the composite widget should move focus to an item when pressing
53
- * arrow keys.
91
+ * Determines if the active composite item should receive focus (or virtual
92
+ * focus if the
93
+ * [`virtualFocus`](https://ariakit.org/reference/composite-provider#virtualfocus)
94
+ * option is enabled) when moving through items. This typically happens when
95
+ * navigating through items with arrow keys, but it can also happen when
96
+ * calling the
97
+ * [`move`](https://ariakit.org/reference/use-composite-store#move) method
98
+ * directly.
99
+ *
100
+ * Unlike the
101
+ * [`composite`](https://ariakit.org/reference/composite#composite-1) prop,
102
+ * this option doesn't disable the entire composite widget behavior. It only
103
+ * stops this component from managing focus when navigating through items.
104
+ *
105
+ * **Note**: If you want to control the behavior only _when arrow keys are
106
+ * pressed_, use the
107
+ * [`moveOnKeyPress`](https://ariakit.org/reference/composite#moveonkeypress)
108
+ * prop instead.
54
109
  * @default true
55
110
  */
56
- moveOnKeyPress?: BooleanOrCallback<ReactKeyboardEvent<HTMLElement>>;
111
+ focusOnMove?: boolean;
57
112
  }
58
113
  export type CompositeProps<T extends As = "div"> = Props<CompositeOptions<T>>;
@@ -14,7 +14,8 @@ import type { DialogStore } from "./dialog-store.js";
14
14
  */
15
15
  export declare const useDialogDisclosure: import("../utils/types.js").Hook<DialogDisclosureOptions<"button">>;
16
16
  /**
17
- * Renders a button that shows/hides a dialog.
17
+ * Renders a button that toggles the visibility of a
18
+ * [`Dialog`](https://ariakit.org/reference/dialog) component when clicked.
18
19
  * @see https://ariakit.org/components/dialog
19
20
  * @example
20
21
  * ```jsx {2}
@@ -15,7 +15,8 @@ import type { DialogStore } from "./dialog-store.js";
15
15
  */
16
16
  export declare const useDialogDismiss: import("../utils/types.js").Hook<DialogDismissOptions<"button">>;
17
17
  /**
18
- * Renders a button that hides a dialog.
18
+ * Renders a button that hides a
19
+ * [`Dialog`](https://ariakit.org/reference/dialog) when clicked.
19
20
  * @see https://ariakit.org/components/dialog
20
21
  * @example
21
22
  * ```jsx {4}
@@ -1,7 +1,8 @@
1
1
  import type { ReactNode } from "react";
2
2
  import type { DialogStoreProps } from "./dialog-store.js";
3
3
  /**
4
- * Provides a dialog store to Dialog components.
4
+ * Provides a dialog store to [Dialog](https://ariakit.org/components/dialog)
5
+ * components.
5
6
  * @see https://ariakit.org/components/dialog
6
7
  * @example
7
8
  * ```jsx
@@ -3,11 +3,13 @@ import type { DisclosureStoreFunctions, DisclosureStoreOptions, DisclosureStoreS
3
3
  import type { Store } from "../utils/store.js";
4
4
  export declare function useDialogStoreProps<T extends Core.DialogStore>(store: T, update: () => void, props: DialogStoreProps): T;
5
5
  /**
6
- * Creates a dialog store.
6
+ * Creates a dialog store to control the state of
7
+ * [Dialog](https://ariakit.org/components/dialog) components.
7
8
  * @see https://ariakit.org/components/dialog
8
9
  * @example
9
10
  * ```jsx
10
11
  * const dialog = useDialogStore();
12
+ *
11
13
  * <button onClick={dialog.toggle}>Open dialog</button>
12
14
  * <Dialog store={dialog}>Content</Dialog>
13
15
  * ```
@@ -18,7 +18,14 @@ import type { DialogStore } from "./dialog-store.js";
18
18
  export declare const useDialog: import("../utils/types.js").Hook<DialogOptions<"div">>;
19
19
  export declare function createDialogComponent<T extends DialogOptions>(Component: Component<T>, useProviderContext?: () => DialogStore | undefined): Component<T>;
20
20
  /**
21
- * Renders a dialog element.
21
+ * Renders a dialog similar to the native `dialog` element that's rendered in a
22
+ * [`portal`](https://ariakit.org/reference/dialog#portal) by default.
23
+ *
24
+ * The dialog can be either
25
+ * [`modal`](https://ariakit.org/reference/dialog#modal) or non-modal. The
26
+ * visibility state can be controlled with the
27
+ * [`open`](https://ariakit.org/reference/dialog#open) and
28
+ * [`onClose`](https://ariakit.org/reference/dialog#onclose) props.
22
29
  * @see https://ariakit.org/components/dialog
23
30
  * @example
24
31
  * ```jsx {4-6}
@@ -60,7 +67,7 @@ export interface DialogOptions<T extends As = "div"> extends FocusableOptions<T>
60
67
  * This is an event handler prop triggered when the dialog's `close` event is
61
68
  * dispatched. The `close` event is similar to the native dialog
62
69
  * [`close`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLDialogElement/close_event)
63
- * event. The only difference is that this event can be cancelled with
70
+ * event. The only difference is that this event can be canceled with
64
71
  * `event.preventDefault()`, which will prevent the dialog from hiding.
65
72
  *
66
73
  * It's important to note that this event only fires when the dialog store's
@@ -87,14 +94,14 @@ export interface DialogOptions<T extends As = "div"> extends FocusableOptions<T>
87
94
  * - The [`portal`](https://ariakit.org/reference/dialog#portal) and
88
95
  * [`preventBodyScroll`](https://ariakit.org/reference/dialog#preventbodyscroll)
89
96
  * props are set to `true`. They can still be manually set to `false`.
90
- * - A visually hidden dismiss button will be rendered if the
91
- * [`DialogDismiss`](https://ariakit.org/reference/dialog-dismiss) component
92
- * hasn't been used. This allows screen reader users to close the dialog.
93
- * - When the dialog is open, element tree outside it will be disabled.
94
97
  * - When using the [`Heading`](https://ariakit.org/reference/heading) or
95
98
  * [`DialogHeading`](https://ariakit.org/reference/dialog-heading)
96
99
  * components within the dialog, their level will be reset so they start
97
100
  * with `h1`.
101
+ * - A visually hidden dismiss button will be rendered if the
102
+ * [`DialogDismiss`](https://ariakit.org/reference/dialog-dismiss) component
103
+ * hasn't been used. This allows screen reader users to close the dialog.
104
+ * - When the dialog is open, element tree outside it will be inert.
98
105
  *
99
106
  * Live examples:
100
107
  * - [Combobox with tabs](https://ariakit.org/examples/combobox-tabs)
@@ -111,8 +118,10 @@ export interface DialogOptions<T extends As = "div"> extends FocusableOptions<T>
111
118
  * dialogs, this is `true` by default. Besides a `boolean`, this prop can also
112
119
  * be a React component or JSX element that will be rendered as the backdrop.
113
120
  *
114
- * **If a custom component is used, it must accept ref and spread all props to
115
- * its underlying DOM element**, the same way a native element would.
121
+ * **Note**: If a custom component is used, it must [accept ref and spread all
122
+ * props to its underlying DOM
123
+ * element](https://ariakit.org/guide/composition#custom-components-must-be-open-for-extension),
124
+ * the same way a native element would.
116
125
  *
117
126
  * Live examples:
118
127
  * - [Animated Dialog](https://ariakit.org/examples/dialog-animated)
@@ -139,14 +148,27 @@ export interface DialogOptions<T extends As = "div"> extends FocusableOptions<T>
139
148
  */
140
149
  backdropProps?: ComponentPropsWithRef<"div">;
141
150
  /**
142
- * Determines whether the dialog will be hidden when the user presses the
143
- * Escape key.
151
+ * Determines if the dialog will hide when the user presses the Escape key.
152
+ *
153
+ * This prop can be either a boolean or a function that accepts an event as an
154
+ * argument and returns a boolean. The event object represents the keydown
155
+ * event that initiated the hide action, which could be either a native
156
+ * keyboard event or a React synthetic event.
157
+ *
158
+ * **Note**: When placing Ariakit dialogs inside third-party dialogs, using
159
+ * `event.stopPropagation()` within this function will stop the event from
160
+ * reaching the third-party dialog, closing only the Ariakit dialog.
144
161
  * @default true
145
162
  */
146
163
  hideOnEscape?: BooleanOrCallback<KeyboardEvent | ReactKeyboardEvent>;
147
164
  /**
148
- * Determines whether the dialog will be hidden when the user clicks or focus
149
- * on an element outside of the dialog.
165
+ * Determines if the dialog should hide when the user clicks or focuses on an
166
+ * element outside the dialog.
167
+ *
168
+ * This prop can be either a boolean or a function that takes an event as an
169
+ * argument and returns a boolean. The event object represents the event that
170
+ * triggered the action, which could be a native event or a React synthetic
171
+ * event of various types.
150
172
  *
151
173
  * Live examples:
152
174
  * - [Selection Popover](https://ariakit.org/examples/popover-selection)
@@ -154,11 +176,17 @@ export interface DialogOptions<T extends As = "div"> extends FocusableOptions<T>
154
176
  */
155
177
  hideOnInteractOutside?: BooleanOrCallback<Event | SyntheticEvent>;
156
178
  /**
157
- * When a dialog is open, the elements outside of it will be disabled so they
158
- * can't be interacted with if the dialog is modal. For non-modal dialogs,
159
- * interacting with elements outside of the dialog will close it. With this
160
- * function, you can return a collection of elements that will be considered
161
- * part of the dialog and therefore will be excluded from this behavior.
179
+ * When a dialog is open, the elements outside of it are disabled to prevent
180
+ * interaction if the dialog is
181
+ * [`modal`](https://ariakit.org/reference/dialog#modal). For non-modal
182
+ * dialogs, interacting with elements outside the dialog prompts it to close.
183
+ *
184
+ * This function allows you to return an iterable collection of elements that
185
+ * will be considered as part of the dialog, thus excluding them from this
186
+ * behavior.
187
+ *
188
+ * **Note**: The elements returned by this function must exist in the DOM when
189
+ * the dialog opens.
162
190
  *
163
191
  * Live examples:
164
192
  * - [Dialog with
@@ -167,14 +195,17 @@ export interface DialogOptions<T extends As = "div"> extends FocusableOptions<T>
167
195
  getPersistentElements?: () => Iterable<Element>;
168
196
  /**
169
197
  * Determines whether the body scrolling will be prevented when the dialog is
170
- * shown.
198
+ * shown. This is automatically set to `true` when the dialog is
199
+ * [`modal`](https://ariakit.org/reference/dialog#modal). You can disable this
200
+ * prop if you want to implement your own logic.
171
201
  */
172
202
  preventBodyScroll?: boolean;
173
203
  /**
174
204
  * Determines whether an element inside the dialog will receive focus when the
175
205
  * dialog is shown. By default, this is usually the first tabbable element in
176
- * the dialog or the dialog itself. The `initialFocus` prop can be used to set
177
- * a different element to receive focus.
206
+ * the dialog or the dialog itself. The
207
+ * [`initialFocus`](https://ariakit.org/reference/dialog#initialfocus) prop
208
+ * can be used to set a different element to receive focus.
178
209
  *
179
210
  * Live examples:
180
211
  * - [Warning on Dialog
@@ -3,9 +3,9 @@ import {
3
3
  Dialog,
4
4
  createDialogComponent,
5
5
  useDialog
6
- } from "../__chunks/PGAEII2Q.js";
6
+ } from "../__chunks/NERBASET.js";
7
7
  import "../__chunks/LWHPHW7Q.js";
8
- import "../__chunks/CLF4PQ7T.js";
8
+ import "../__chunks/TQYOGOE2.js";
9
9
  import "../__chunks/BULCTPRV.js";
10
10
  import "../__chunks/6BJGLK2C.js";
11
11
  import "../__chunks/CS347UVZ.js";
@@ -13,11 +13,11 @@ import "../__chunks/IUB2BTEK.js";
13
13
  import "../__chunks/XHJGS6Z5.js";
14
14
  import "../__chunks/TL67WVI6.js";
15
15
  import "../__chunks/MKDDWKFK.js";
16
+ import "../__chunks/72E5EPFF.js";
16
17
  import "../__chunks/OOBDFMJL.js";
18
+ import "../__chunks/X6WIMZJE.js";
17
19
  import "../__chunks/677M2CI3.js";
18
20
  import "../__chunks/6GXEOXGT.js";
19
- import "../__chunks/72E5EPFF.js";
20
- import "../__chunks/X6WIMZJE.js";
21
21
  import "../__chunks/HPP6CWMY.js";
22
22
  import "../__chunks/UYRJLDVS.js";
23
23
  import "../__chunks/JPXNJYSO.js";
@@ -2,12 +2,12 @@
2
2
  import {
3
3
  disableTree,
4
4
  disableTreeOutside
5
- } from "../../__chunks/CLF4PQ7T.js";
5
+ } from "../../__chunks/TQYOGOE2.js";
6
6
  import "../../__chunks/BULCTPRV.js";
7
7
  import "../../__chunks/MKDDWKFK.js";
8
- import "../../__chunks/677M2CI3.js";
9
8
  import "../../__chunks/72E5EPFF.js";
10
9
  import "../../__chunks/X6WIMZJE.js";
10
+ import "../../__chunks/677M2CI3.js";
11
11
  import "../../__chunks/4R3V3JGP.js";
12
12
  export {
13
13
  disableTree,
@@ -4,8 +4,8 @@ import {
4
4
  } from "../../__chunks/XHJGS6Z5.js";
5
5
  import "../../__chunks/TL67WVI6.js";
6
6
  import "../../__chunks/MKDDWKFK.js";
7
- import "../../__chunks/OOBDFMJL.js";
8
7
  import "../../__chunks/72E5EPFF.js";
8
+ import "../../__chunks/OOBDFMJL.js";
9
9
  import "../../__chunks/X6WIMZJE.js";
10
10
  import "../../__chunks/6O5OEQGF.js";
11
11
  import "../../__chunks/XM66DUTO.js";
@@ -14,10 +14,11 @@ export declare function isHidden(mounted: boolean, hidden?: boolean | null, alwa
14
14
  */
15
15
  export declare const useDisclosureContent: import("../utils/types.js").Hook<DisclosureContentOptions<"div">>;
16
16
  /**
17
- * Renders an element that can be shown or hidden.
17
+ * Renders an element that can be shown or hidden by a
18
+ * [`Disclosure`](https://ariakit.org/components/disclosure) component.
18
19
  * @see https://ariakit.org/components/disclosure
19
20
  * @example
20
- * ```jsx
21
+ * ```jsx {3}
21
22
  * <DisclosureProvider>
22
23
  * <Disclosure>Disclosure</Disclosure>
23
24
  * <DisclosureContent>Content</DisclosureContent>
@@ -36,9 +37,9 @@ export interface DisclosureContentOptions<T extends As = "div"> extends Options<
36
37
  store?: DisclosureStore;
37
38
  /**
38
39
  * Determines whether the content element should remain visible even when the
39
- * `open` state is `false`. If this prop is set to `true`, the `hidden` prop
40
- * and the `display: none` style will not be applied, unless explicitly set
41
- * otherwise.
40
+ * [`open`](https://ariakit.org/reference/disclosure-provider#open) state is
41
+ * `false`. If this prop is set to `true`, the `hidden` prop and the `display:
42
+ * none` style will not be applied, unless explicitly set otherwise.
42
43
  *
43
44
  * This prop is particularly useful when using third-party animation libraries
44
45
  * such as Framer Motion or React Spring, where the element needs to be
@@ -1,7 +1,8 @@
1
1
  import type { ReactNode } from "react";
2
2
  import type { DisclosureStoreProps } from "./disclosure-store.js";
3
3
  /**
4
- * Provides a disclosure store to Disclosure components.
4
+ * Provides a disclosure store to
5
+ * [Disclosure](https://ariakit.org/components/disclosure) components.
5
6
  * @see https://ariakit.org/components/disclosure
6
7
  * @example
7
8
  * ```jsx
@@ -2,11 +2,13 @@ import * as Core from "@ariakit/core/disclosure/disclosure-store";
2
2
  import type { Store } from "../utils/store.js";
3
3
  export declare function useDisclosureStoreProps<T extends Core.DisclosureStore>(store: T, update: () => void, props: DisclosureStoreProps): T;
4
4
  /**
5
- * Creates a disclosure store.
5
+ * Creates a disclosure store to control the state of
6
+ * [Disclosure](https://ariakit.org/components/disclosure) components.
6
7
  * @see https://ariakit.org/components/disclosure
7
8
  * @example
8
9
  * ```jsx
9
10
  * const disclosure = useDisclosureStore();
11
+ *
10
12
  * <Disclosure store={disclosure}>Disclosure</Disclosure>
11
13
  * <DisclosureContent store={disclosure}>Content</DisclosureContent>
12
14
  * ```
@@ -18,8 +20,9 @@ export interface DisclosureStoreFunctions extends Core.DisclosureStoreFunctions
18
20
  }
19
21
  export interface DisclosureStoreOptions extends Core.DisclosureStoreOptions {
20
22
  /**
21
- * A callback that gets called when the `open` state changes.
22
- * @param open The new open value.
23
+ * A callback that gets called when the
24
+ * [`open`](https://ariakit.org/reference/disclosure-provider#open) state
25
+ * changes.
23
26
  * @example
24
27
  * const [open, setOpen] = useState(false);
25
28
  * const disclosure = useDisclosureStore({ open, setOpen });
@@ -27,7 +30,6 @@ export interface DisclosureStoreOptions extends Core.DisclosureStoreOptions {
27
30
  setOpen?: (open: DisclosureStoreState["open"]) => void;
28
31
  /**
29
32
  * A callback that gets called when the `mounted` state changes.
30
- * @param mounted The new mounted value.
31
33
  * @example
32
34
  * const [mounted, setMounted] = useState(false);
33
35
  * const disclosure = useDisclosureStore({ setMounted });
@@ -16,11 +16,12 @@ import type { DisclosureStore } from "./disclosure-store.js";
16
16
  */
17
17
  export declare const useDisclosure: import("../utils/types.js").Hook<DisclosureOptions<"button">>;
18
18
  /**
19
- * Renders an element that controls the visibility of a disclosure content
19
+ * Renders an element that controls the visibility of a
20
+ * [`DisclosureContent`](https://ariakit.org/reference/disclosure-content)
20
21
  * element.
21
22
  * @see https://ariakit.org/components/disclosure
22
23
  * @example
23
- * ```jsx
24
+ * ```jsx {2}
24
25
  * <DisclosureProvider>
25
26
  * <Disclosure>Disclosure</Disclosure>
26
27
  * <DisclosureContent>Content</DisclosureContent>