@astryxdesign/core 0.1.2 → 0.1.3-canary.1e94ba0

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 (581) hide show
  1. package/CHANGELOG.md +165 -0
  2. package/README.md +12 -12
  3. package/dist/Avatar/Avatar.d.ts.map +1 -1
  4. package/dist/Avatar/Avatar.js +11 -5
  5. package/dist/Breadcrumbs/BreadcrumbItem.d.ts +1 -1
  6. package/dist/Breadcrumbs/BreadcrumbItem.d.ts.map +1 -1
  7. package/dist/Breadcrumbs/BreadcrumbItem.js +24 -5
  8. package/dist/Button/Button.d.ts.map +1 -1
  9. package/dist/Button/Button.js +31 -12
  10. package/dist/ButtonGroup/ButtonGroup.d.ts.map +1 -1
  11. package/dist/ButtonGroup/ButtonGroup.js +0 -1
  12. package/dist/Calendar/Calendar.d.ts +5 -4
  13. package/dist/Calendar/Calendar.d.ts.map +1 -1
  14. package/dist/Calendar/Calendar.js +82 -43
  15. package/dist/Calendar/hooks/index.d.ts +0 -2
  16. package/dist/Calendar/hooks/index.d.ts.map +1 -1
  17. package/dist/Calendar/hooks/index.js +1 -2
  18. package/dist/Calendar/index.d.ts +3 -3
  19. package/dist/Calendar/index.d.ts.map +1 -1
  20. package/dist/Calendar/index.js +1 -1
  21. package/dist/Calendar/styles.d.ts +3 -9
  22. package/dist/Calendar/styles.d.ts.map +1 -1
  23. package/dist/Calendar/styles.js +3 -11
  24. package/dist/Carousel/Carousel.d.ts.map +1 -1
  25. package/dist/Carousel/Carousel.js +17 -3
  26. package/dist/Center/Center.d.ts +11 -1
  27. package/dist/Center/Center.d.ts.map +1 -1
  28. package/dist/Center/Center.js +9 -3
  29. package/dist/Chat/ChatComposerInput.d.ts.map +1 -1
  30. package/dist/Chat/ChatComposerInput.js +0 -1
  31. package/dist/Chat/ChatMessageList.d.ts +14 -1
  32. package/dist/Chat/ChatMessageList.d.ts.map +1 -1
  33. package/dist/Chat/ChatMessageList.js +2 -0
  34. package/dist/Chat/useTriggerMenu.d.ts +8 -1
  35. package/dist/Chat/useTriggerMenu.d.ts.map +1 -1
  36. package/dist/Chat/useTriggerMenu.js +15 -3
  37. package/dist/CheckboxInput/CheckboxInput.d.ts +23 -2
  38. package/dist/CheckboxInput/CheckboxInput.d.ts.map +1 -1
  39. package/dist/CheckboxInput/CheckboxInput.js +51 -9
  40. package/dist/CheckboxList/CheckboxList.d.ts +13 -1
  41. package/dist/CheckboxList/CheckboxList.d.ts.map +1 -1
  42. package/dist/CheckboxList/CheckboxList.js +39 -9
  43. package/dist/CheckboxList/CheckboxListContext.d.ts +7 -0
  44. package/dist/CheckboxList/CheckboxListContext.d.ts.map +1 -1
  45. package/dist/CheckboxList/CheckboxListItem.d.ts.map +1 -1
  46. package/dist/CheckboxList/CheckboxListItem.js +0 -1
  47. package/dist/Citation/Citation.d.ts.map +1 -1
  48. package/dist/Citation/Citation.js +9 -5
  49. package/dist/CodeBlock/CodeBlock.d.ts.map +1 -1
  50. package/dist/CodeBlock/CodeBlock.js +51 -37
  51. package/dist/CommandPalette/CommandPalette.d.ts.map +1 -1
  52. package/dist/CommandPalette/CommandPalette.js +5 -5
  53. package/dist/ContextMenu/ContextMenu.d.ts +12 -5
  54. package/dist/ContextMenu/ContextMenu.d.ts.map +1 -1
  55. package/dist/ContextMenu/ContextMenu.js +96 -11
  56. package/dist/DateInput/DateInput.d.ts +23 -1
  57. package/dist/DateInput/DateInput.d.ts.map +1 -1
  58. package/dist/DateInput/DateInput.js +167 -99
  59. package/dist/DateRangeInput/DateRangeInput.d.ts +23 -1
  60. package/dist/DateRangeInput/DateRangeInput.d.ts.map +1 -1
  61. package/dist/DateRangeInput/DateRangeInput.js +42 -9
  62. package/dist/DateTimeInput/DateTimeInput.d.ts +35 -2
  63. package/dist/DateTimeInput/DateTimeInput.d.ts.map +1 -1
  64. package/dist/DateTimeInput/DateTimeInput.js +78 -15
  65. package/dist/Dialog/Dialog.d.ts.map +1 -1
  66. package/dist/Dialog/Dialog.js +12 -0
  67. package/dist/DropdownMenu/DropdownMenu.d.ts +1 -8
  68. package/dist/DropdownMenu/DropdownMenu.d.ts.map +1 -1
  69. package/dist/DropdownMenu/DropdownMenu.js +42 -14
  70. package/dist/Field/Field.d.ts +19 -2
  71. package/dist/Field/Field.d.ts.map +1 -1
  72. package/dist/Field/Field.js +4 -0
  73. package/dist/Field/FieldLabel.d.ts +21 -2
  74. package/dist/Field/FieldLabel.d.ts.map +1 -1
  75. package/dist/Field/FieldLabel.js +41 -26
  76. package/dist/FileInput/FileInput.d.ts +22 -1
  77. package/dist/FileInput/FileInput.d.ts.map +1 -1
  78. package/dist/FileInput/FileInput.js +56 -10
  79. package/dist/Grid/Grid.d.ts +11 -1
  80. package/dist/Grid/Grid.d.ts.map +1 -1
  81. package/dist/Grid/Grid.js +32 -6
  82. package/dist/InputGroup/InputGroup.d.ts +4 -3
  83. package/dist/InputGroup/InputGroup.d.ts.map +1 -1
  84. package/dist/InputGroup/InputGroup.js +16 -6
  85. package/dist/InputGroup/InputGroupContext.d.ts +4 -0
  86. package/dist/InputGroup/InputGroupContext.d.ts.map +1 -1
  87. package/dist/InputGroup/InputGroupContext.js +2 -2
  88. package/dist/InputGroup/groupStyles.d.ts +1 -1
  89. package/dist/InputGroup/groupStyles.d.ts.map +1 -1
  90. package/dist/InputGroup/groupStyles.js +3 -3
  91. package/dist/InputGroup/index.d.ts +1 -0
  92. package/dist/InputGroup/index.d.ts.map +1 -1
  93. package/dist/Kbd/Kbd.d.ts.map +1 -1
  94. package/dist/Kbd/Kbd.js +33 -1
  95. package/dist/Layer/layerAnimations.stylex.d.ts +4 -0
  96. package/dist/Layer/layerAnimations.stylex.d.ts.map +1 -1
  97. package/dist/Layer/layerAnimations.stylex.js +8 -4
  98. package/dist/Layer/useLayer.d.ts +10 -0
  99. package/dist/Layer/useLayer.d.ts.map +1 -1
  100. package/dist/Layer/useLayer.js +64 -9
  101. package/dist/Layout/Layout.d.ts +4 -11
  102. package/dist/Layout/Layout.d.ts.map +1 -1
  103. package/dist/Layout/Layout.js +10 -11
  104. package/dist/Layout/LayoutFooter.d.ts +2 -2
  105. package/dist/Layout/LayoutFooter.d.ts.map +1 -1
  106. package/dist/Layout/LayoutHeader.d.ts +2 -2
  107. package/dist/Layout/LayoutHeader.d.ts.map +1 -1
  108. package/dist/Layout/LayoutPanel.d.ts +2 -2
  109. package/dist/Layout/LayoutPanel.d.ts.map +1 -1
  110. package/dist/Layout/padding.stylex.d.ts +51 -0
  111. package/dist/Layout/padding.stylex.d.ts.map +1 -1
  112. package/dist/Layout/padding.stylex.js +63 -0
  113. package/dist/Lightbox/Lightbox.d.ts.map +1 -1
  114. package/dist/Lightbox/Lightbox.js +4 -2
  115. package/dist/Link/Link.d.ts +16 -1
  116. package/dist/Link/Link.d.ts.map +1 -1
  117. package/dist/Link/Link.js +18 -7
  118. package/dist/Markdown/Markdown.d.ts.map +1 -1
  119. package/dist/Markdown/Markdown.js +7 -0
  120. package/dist/MoreMenu/MoreMenu.d.ts +1 -7
  121. package/dist/MoreMenu/MoreMenu.d.ts.map +1 -1
  122. package/dist/MoreMenu/MoreMenu.js +0 -2
  123. package/dist/MultiSelector/MultiSelector.d.ts +27 -2
  124. package/dist/MultiSelector/MultiSelector.d.ts.map +1 -1
  125. package/dist/MultiSelector/MultiSelector.js +141 -42
  126. package/dist/MultiSelector/hooks.d.ts +12 -1
  127. package/dist/MultiSelector/hooks.d.ts.map +1 -1
  128. package/dist/MultiSelector/hooks.js +14 -1
  129. package/dist/NavMenu/NavHeadingMenu.d.ts.map +1 -1
  130. package/dist/NavMenu/NavHeadingMenu.js +34 -3
  131. package/dist/NumberInput/NumberInput.d.ts +23 -2
  132. package/dist/NumberInput/NumberInput.d.ts.map +1 -1
  133. package/dist/NumberInput/NumberInput.js +62 -12
  134. package/dist/Pagination/Pagination.d.ts +1 -1
  135. package/dist/Pagination/Pagination.d.ts.map +1 -1
  136. package/dist/Pagination/Pagination.js +15 -1
  137. package/dist/Popover/Popover.d.ts +18 -2
  138. package/dist/Popover/Popover.d.ts.map +1 -1
  139. package/dist/Popover/Popover.js +5 -2
  140. package/dist/Popover/usePopover.d.ts +38 -3
  141. package/dist/Popover/usePopover.d.ts.map +1 -1
  142. package/dist/Popover/usePopover.js +24 -9
  143. package/dist/PowerSearch/PowerSearch.d.ts +11 -1
  144. package/dist/PowerSearch/PowerSearch.d.ts.map +1 -1
  145. package/dist/PowerSearch/PowerSearch.js +6 -1
  146. package/dist/ProgressBar/ProgressBar.d.ts.map +1 -1
  147. package/dist/ProgressBar/ProgressBar.js +3 -5
  148. package/dist/RadioList/RadioList.d.ts +20 -2
  149. package/dist/RadioList/RadioList.d.ts.map +1 -1
  150. package/dist/RadioList/RadioList.js +105 -9
  151. package/dist/RadioList/RadioListItem.d.ts.map +1 -1
  152. package/dist/RadioList/RadioListItem.js +13 -2
  153. package/dist/SegmentedControl/SegmentedControl.d.ts +13 -2
  154. package/dist/SegmentedControl/SegmentedControl.d.ts.map +1 -1
  155. package/dist/SegmentedControl/SegmentedControl.js +78 -44
  156. package/dist/SegmentedControl/SegmentedControlContext.d.ts +7 -0
  157. package/dist/SegmentedControl/SegmentedControlContext.d.ts.map +1 -1
  158. package/dist/SegmentedControl/SegmentedControlItem.d.ts.map +1 -1
  159. package/dist/SegmentedControl/SegmentedControlItem.js +13 -2
  160. package/dist/Selector/Selector.d.ts +24 -1
  161. package/dist/Selector/Selector.d.ts.map +1 -1
  162. package/dist/Selector/Selector.js +122 -43
  163. package/dist/Selector/hooks.d.ts +8 -1
  164. package/dist/Selector/hooks.d.ts.map +1 -1
  165. package/dist/Selector/hooks.js +14 -1
  166. package/dist/SideNav/SideNavHeading.d.ts.map +1 -1
  167. package/dist/SideNav/SideNavHeading.js +2 -0
  168. package/dist/SideNav/SideNavItem.d.ts.map +1 -1
  169. package/dist/SideNav/SideNavItem.js +1 -1
  170. package/dist/Skeleton/Skeleton.d.ts.map +1 -1
  171. package/dist/Skeleton/Skeleton.js +8 -2
  172. package/dist/Slider/Slider.d.ts +21 -0
  173. package/dist/Slider/Slider.d.ts.map +1 -1
  174. package/dist/Slider/Slider.js +36 -9
  175. package/dist/Spinner/Spinner.d.ts.map +1 -1
  176. package/dist/Spinner/Spinner.js +1 -1
  177. package/dist/Stack/Stack.d.ts +38 -23
  178. package/dist/Stack/Stack.d.ts.map +1 -1
  179. package/dist/Stack/Stack.js +25 -1
  180. package/dist/Stack/StackItem.d.ts +12 -23
  181. package/dist/Stack/StackItem.d.ts.map +1 -1
  182. package/dist/Stack/StackItem.js +8 -1
  183. package/dist/Switch/Switch.d.ts +23 -2
  184. package/dist/Switch/Switch.d.ts.map +1 -1
  185. package/dist/Switch/Switch.js +41 -11
  186. package/dist/TabList/Tab.d.ts.map +1 -1
  187. package/dist/TabList/Tab.js +6 -0
  188. package/dist/TabList/TabList.d.ts +16 -4
  189. package/dist/TabList/TabList.d.ts.map +1 -1
  190. package/dist/TabList/TabList.js +87 -10
  191. package/dist/TabList/TabListContext.d.ts +5 -0
  192. package/dist/TabList/TabListContext.d.ts.map +1 -1
  193. package/dist/TabList/TabListContext.js +5 -0
  194. package/dist/TabList/TabMenu.d.ts.map +1 -1
  195. package/dist/TabList/TabMenu.js +6 -1
  196. package/dist/Table/BaseTable.d.ts.map +1 -1
  197. package/dist/Table/BaseTable.js +13 -9
  198. package/dist/Table/Table.d.ts.map +1 -1
  199. package/dist/Table/Table.js +10 -1
  200. package/dist/Table/TableCell.d.ts +8 -1
  201. package/dist/Table/TableCell.d.ts.map +1 -1
  202. package/dist/Table/TableCell.js +79 -10
  203. package/dist/Table/TableHeaderCell.d.ts +8 -1
  204. package/dist/Table/TableHeaderCell.d.ts.map +1 -1
  205. package/dist/Table/TableHeaderCell.js +16 -16
  206. package/dist/Table/index.d.ts +4 -1
  207. package/dist/Table/index.d.ts.map +1 -1
  208. package/dist/Table/index.js +3 -2
  209. package/dist/Table/plugins/pagination/paginateData.d.ts +2 -1
  210. package/dist/Table/plugins/pagination/paginateData.d.ts.map +1 -1
  211. package/dist/Table/plugins/pagination/paginateData.js +8 -3
  212. package/dist/Table/plugins/pagination/useTablePagination.d.ts.map +1 -1
  213. package/dist/Table/plugins/pagination/useTablePagination.js +6 -1
  214. package/dist/Table/plugins/rowExpansion/index.d.ts +3 -0
  215. package/dist/Table/plugins/rowExpansion/index.d.ts.map +1 -0
  216. package/dist/Table/plugins/rowExpansion/index.js +3 -0
  217. package/dist/Table/plugins/rowExpansion/useTableRowExpansion.d.ts +90 -0
  218. package/dist/Table/plugins/rowExpansion/useTableRowExpansion.d.ts.map +1 -0
  219. package/dist/Table/plugins/rowExpansion/useTableRowExpansion.js +398 -0
  220. package/dist/Table/plugins/sortable/useTableSortable.d.ts.map +1 -1
  221. package/dist/Table/plugins/sortable/useTableSortable.js +59 -3
  222. package/dist/Table/tableContextMenu.d.ts +37 -0
  223. package/dist/Table/tableContextMenu.d.ts.map +1 -0
  224. package/dist/Table/tableContextMenu.js +140 -0
  225. package/dist/Table/types.d.ts +66 -0
  226. package/dist/Table/types.d.ts.map +1 -1
  227. package/dist/TextArea/TextArea.d.ts +22 -1
  228. package/dist/TextArea/TextArea.d.ts.map +1 -1
  229. package/dist/TextArea/TextArea.js +41 -9
  230. package/dist/TextInput/TextInput.d.ts +23 -2
  231. package/dist/TextInput/TextInput.d.ts.map +1 -1
  232. package/dist/TextInput/TextInput.js +55 -10
  233. package/dist/TimeInput/TimeInput.d.ts +23 -1
  234. package/dist/TimeInput/TimeInput.d.ts.map +1 -1
  235. package/dist/TimeInput/TimeInput.js +147 -76
  236. package/dist/Toast/Toast.d.ts.map +1 -1
  237. package/dist/Toast/Toast.js +14 -0
  238. package/dist/Toast/ToastViewport.d.ts.map +1 -1
  239. package/dist/Toast/ToastViewport.js +131 -3
  240. package/dist/Tokenizer/Tokenizer.d.ts +12 -1
  241. package/dist/Tokenizer/Tokenizer.d.ts.map +1 -1
  242. package/dist/Tokenizer/Tokenizer.js +26 -4
  243. package/dist/Toolbar/Toolbar.d.ts +3 -3
  244. package/dist/Toolbar/Toolbar.d.ts.map +1 -1
  245. package/dist/Toolbar/Toolbar.js +51 -7
  246. package/dist/Tooltip/useTooltip.d.ts.map +1 -1
  247. package/dist/Tooltip/useTooltip.js +56 -9
  248. package/dist/TopNav/TopNavHeading.d.ts +7 -1
  249. package/dist/TopNav/TopNavHeading.d.ts.map +1 -1
  250. package/dist/TopNav/TopNavHeading.js +8 -0
  251. package/dist/TreeList/TreeList.d.ts +1 -1
  252. package/dist/TreeList/TreeList.d.ts.map +1 -1
  253. package/dist/TreeList/TreeList.js +72 -2
  254. package/dist/TreeList/TreeListItem.d.ts +11 -1
  255. package/dist/TreeList/TreeListItem.d.ts.map +1 -1
  256. package/dist/TreeList/TreeListItem.js +51 -12
  257. package/dist/TreeList/treeListItem.markers.stylex.d.ts +16 -0
  258. package/dist/TreeList/treeListItem.markers.stylex.d.ts.map +1 -0
  259. package/dist/TreeList/treeListItem.markers.stylex.js +22 -0
  260. package/dist/Typeahead/BaseTypeahead.d.ts +13 -0
  261. package/dist/Typeahead/BaseTypeahead.d.ts.map +1 -1
  262. package/dist/Typeahead/BaseTypeahead.js +69 -6
  263. package/dist/Typeahead/Typeahead.d.ts +26 -3
  264. package/dist/Typeahead/Typeahead.d.ts.map +1 -1
  265. package/dist/Typeahead/Typeahead.js +65 -29
  266. package/dist/VisuallyHidden/VisuallyHidden.d.ts +61 -0
  267. package/dist/VisuallyHidden/VisuallyHidden.d.ts.map +1 -0
  268. package/dist/VisuallyHidden/VisuallyHidden.js +65 -0
  269. package/dist/VisuallyHidden/index.d.ts +11 -0
  270. package/dist/VisuallyHidden/index.d.ts.map +1 -0
  271. package/dist/VisuallyHidden/index.js +13 -0
  272. package/dist/astryx.css +22 -0
  273. package/dist/astryx.umd.js +54 -54
  274. package/dist/astryx.umd.js.map +4 -4
  275. package/dist/hooks/focusableSelector.d.ts +22 -0
  276. package/dist/hooks/focusableSelector.d.ts.map +1 -0
  277. package/dist/hooks/focusableSelector.js +24 -0
  278. package/dist/hooks/index.d.ts +12 -2
  279. package/dist/hooks/index.d.ts.map +1 -1
  280. package/dist/hooks/index.js +7 -2
  281. package/dist/hooks/useAnnounce.d.ts +40 -0
  282. package/dist/hooks/useAnnounce.d.ts.map +1 -0
  283. package/dist/hooks/useAnnounce.js +142 -0
  284. package/dist/hooks/useClickableContainer.d.ts +16 -1
  285. package/dist/hooks/useClickableContainer.d.ts.map +1 -1
  286. package/dist/hooks/useClickableContainer.js +16 -4
  287. package/dist/hooks/useEntryAnimation.d.ts.map +1 -1
  288. package/dist/hooks/useEntryAnimation.js +4 -4
  289. package/dist/hooks/useFocusTrap.d.ts +18 -0
  290. package/dist/hooks/useFocusTrap.d.ts.map +1 -1
  291. package/dist/hooks/useFocusTrap.js +87 -3
  292. package/dist/hooks/useGridFocus.d.ts +88 -1
  293. package/dist/hooks/useGridFocus.d.ts.map +1 -1
  294. package/dist/hooks/useGridFocus.js +261 -62
  295. package/dist/hooks/useKeyboardHint.d.ts +82 -0
  296. package/dist/hooks/useKeyboardHint.d.ts.map +1 -0
  297. package/dist/hooks/useKeyboardHint.js +220 -0
  298. package/dist/hooks/useListFocus.d.ts +78 -7
  299. package/dist/hooks/useListFocus.d.ts.map +1 -1
  300. package/dist/hooks/useListFocus.js +305 -52
  301. package/dist/hooks/useLongPress.d.ts +21 -0
  302. package/dist/hooks/useLongPress.d.ts.map +1 -0
  303. package/dist/hooks/useLongPress.js +89 -0
  304. package/dist/hooks/useTreeFocus.d.ts +157 -0
  305. package/dist/hooks/useTreeFocus.d.ts.map +1 -0
  306. package/dist/hooks/useTreeFocus.js +337 -0
  307. package/dist/hooks/useTypeahead.d.ts +63 -0
  308. package/dist/hooks/useTypeahead.d.ts.map +1 -0
  309. package/dist/hooks/useTypeahead.js +117 -0
  310. package/dist/index.d.ts +1 -0
  311. package/dist/index.d.ts.map +1 -1
  312. package/dist/index.js +1 -0
  313. package/dist/utils/dateTypes.d.ts +12 -0
  314. package/dist/utils/dateTypes.d.ts.map +1 -1
  315. package/dist/utils/dateTypes.js +41 -1
  316. package/dist/utils/index.d.ts +4 -0
  317. package/dist/utils/index.d.ts.map +1 -1
  318. package/dist/utils/index.js +3 -1
  319. package/dist/utils/inputAria.d.ts +29 -0
  320. package/dist/utils/inputAria.d.ts.map +1 -0
  321. package/dist/utils/inputAria.js +30 -0
  322. package/dist/utils/timeParser.d.ts.map +1 -1
  323. package/dist/utils/timeParser.js +5 -2
  324. package/docs.mjs +2 -2
  325. package/package.json +12 -8
  326. package/src/Avatar/Avatar.doc.mjs +2 -2
  327. package/src/Avatar/Avatar.test.tsx +37 -0
  328. package/src/Avatar/Avatar.tsx +10 -5
  329. package/src/Breadcrumbs/BreadcrumbItem.tsx +25 -7
  330. package/src/Breadcrumbs/Breadcrumbs.test.tsx +31 -10
  331. package/src/Button/Button.tsx +42 -22
  332. package/src/ButtonGroup/ButtonGroup.test.tsx +9 -9
  333. package/src/ButtonGroup/ButtonGroup.tsx +0 -1
  334. package/src/Calendar/Calendar.doc.mjs +4 -4
  335. package/src/Calendar/Calendar.test.tsx +168 -30
  336. package/src/Calendar/Calendar.tsx +121 -66
  337. package/src/Calendar/hooks/index.ts +0 -6
  338. package/src/Calendar/index.ts +1 -3
  339. package/src/Calendar/styles.ts +4 -9
  340. package/src/Carousel/Carousel.doc.mjs +7 -1
  341. package/src/Carousel/Carousel.test.tsx +20 -0
  342. package/src/Carousel/Carousel.tsx +16 -1
  343. package/src/Center/Center.doc.mjs +12 -2
  344. package/src/Center/Center.tsx +28 -3
  345. package/src/Chat/ChatComposerInput.test.tsx +26 -7
  346. package/src/Chat/ChatComposerInput.tsx +0 -1
  347. package/src/Chat/ChatDictationButton.doc.mjs +1 -1
  348. package/src/Chat/ChatMessageList.doc.mjs +8 -0
  349. package/src/Chat/ChatMessageList.test.tsx +18 -0
  350. package/src/Chat/ChatMessageList.tsx +16 -0
  351. package/src/Chat/useTriggerMenu.tsx +22 -4
  352. package/src/CheckboxInput/CheckboxInput.doc.mjs +10 -0
  353. package/src/CheckboxInput/CheckboxInput.test.tsx +172 -27
  354. package/src/CheckboxInput/CheckboxInput.tsx +78 -6
  355. package/src/CheckboxList/CheckboxList.doc.mjs +9 -0
  356. package/src/CheckboxList/CheckboxList.test.tsx +192 -26
  357. package/src/CheckboxList/CheckboxList.tsx +56 -3
  358. package/src/CheckboxList/CheckboxListContext.tsx +7 -0
  359. package/src/CheckboxList/CheckboxListItem.tsx +0 -3
  360. package/src/Citation/Citation.doc.mjs +10 -0
  361. package/src/Citation/Citation.test.tsx +121 -0
  362. package/src/Citation/Citation.tsx +15 -3
  363. package/src/CodeBlock/CodeBlock.test.tsx +115 -0
  364. package/src/CodeBlock/CodeBlock.tsx +63 -33
  365. package/src/CommandPalette/CommandPalette.test.tsx +47 -1
  366. package/src/CommandPalette/CommandPalette.tsx +9 -21
  367. package/src/ContextMenu/ContextMenu.doc.mjs +4 -4
  368. package/src/ContextMenu/ContextMenu.test.tsx +155 -1
  369. package/src/ContextMenu/ContextMenu.tsx +129 -16
  370. package/src/DateInput/DateInput.doc.mjs +286 -56
  371. package/src/DateInput/DateInput.test.tsx +248 -2
  372. package/src/DateInput/DateInput.tsx +196 -100
  373. package/src/DateRangeInput/DateRangeInput.doc.mjs +251 -46
  374. package/src/DateRangeInput/DateRangeInput.test.tsx +182 -20
  375. package/src/DateRangeInput/DateRangeInput.tsx +63 -5
  376. package/src/DateTimeInput/DateTimeInput.doc.mjs +368 -67
  377. package/src/DateTimeInput/DateTimeInput.test.tsx +279 -11
  378. package/src/DateTimeInput/DateTimeInput.tsx +125 -17
  379. package/src/Dialog/Dialog.doc.mjs +2 -2
  380. package/src/Dialog/Dialog.tsx +12 -0
  381. package/src/DropdownMenu/DropdownMenu.doc.mjs +1 -8
  382. package/src/DropdownMenu/DropdownMenu.test.tsx +56 -42
  383. package/src/DropdownMenu/DropdownMenu.tsx +52 -18
  384. package/src/Field/Field.doc.mjs +59 -18
  385. package/src/Field/Field.test.tsx +32 -0
  386. package/src/Field/Field.tsx +23 -5
  387. package/src/Field/FieldLabel.tsx +55 -17
  388. package/src/FileInput/FileInput.doc.mjs +17 -0
  389. package/src/FileInput/FileInput.test.tsx +283 -49
  390. package/src/FileInput/FileInput.tsx +76 -4
  391. package/src/Grid/Grid.doc.mjs +17 -4
  392. package/src/Grid/Grid.test.tsx +43 -30
  393. package/src/Grid/Grid.tsx +38 -3
  394. package/src/Icon/Icon.doc.mjs +3 -3
  395. package/src/InputGroup/InputGroup.doc.mjs +111 -23
  396. package/src/InputGroup/InputGroup.test.tsx +257 -60
  397. package/src/InputGroup/InputGroup.tsx +23 -5
  398. package/src/InputGroup/InputGroupContext.ts +9 -4
  399. package/src/InputGroup/groupStyles.ts +7 -1
  400. package/src/InputGroup/index.ts +1 -0
  401. package/src/Kbd/Kbd.test.tsx +22 -4
  402. package/src/Kbd/Kbd.tsx +35 -3
  403. package/src/Layer/layerAnimations.stylex.ts +20 -4
  404. package/src/Layer/useLayer.doc.mjs +5 -0
  405. package/src/Layer/useLayer.test.tsx +111 -0
  406. package/src/Layer/useLayer.tsx +90 -9
  407. package/src/Layout/Layout.tsx +8 -16
  408. package/src/Layout/LayoutFooter.doc.mjs +4 -4
  409. package/src/Layout/LayoutFooter.tsx +3 -3
  410. package/src/Layout/LayoutHeader.doc.mjs +4 -4
  411. package/src/Layout/LayoutHeader.tsx +3 -3
  412. package/src/Layout/LayoutPanel.tsx +3 -3
  413. package/src/Layout/__tests__/edgeCompensation.test.tsx +72 -0
  414. package/src/Layout/padding.stylex.ts +52 -0
  415. package/src/Lightbox/Lightbox.doc.mjs +9 -0
  416. package/src/Lightbox/Lightbox.test.tsx +53 -5
  417. package/src/Lightbox/Lightbox.tsx +9 -4
  418. package/src/Link/Link.doc.mjs +14 -0
  419. package/src/Link/Link.test.tsx +50 -0
  420. package/src/Link/Link.tsx +39 -4
  421. package/src/Markdown/Markdown.test.tsx +11 -0
  422. package/src/Markdown/Markdown.tsx +7 -0
  423. package/src/MetadataList/MetadataListItem.doc.mjs +4 -0
  424. package/src/MoreMenu/MoreMenu.doc.mjs +2 -17
  425. package/src/MoreMenu/MoreMenu.tsx +0 -9
  426. package/src/MultiSelector/MultiSelector.doc.mjs +30 -0
  427. package/src/MultiSelector/MultiSelector.test.tsx +375 -8
  428. package/src/MultiSelector/MultiSelector.tsx +194 -48
  429. package/src/MultiSelector/hooks.ts +27 -0
  430. package/src/NavMenu/NavHeadingMenu.test.tsx +77 -1
  431. package/src/NavMenu/NavHeadingMenu.tsx +50 -3
  432. package/src/NumberInput/NumberInput.doc.mjs +17 -0
  433. package/src/NumberInput/NumberInput.test.tsx +242 -40
  434. package/src/NumberInput/NumberInput.tsx +89 -11
  435. package/src/Pagination/Pagination.doc.mjs +3 -3
  436. package/src/Pagination/Pagination.test.tsx +117 -5
  437. package/src/Pagination/Pagination.tsx +21 -1
  438. package/src/Popover/Popover.doc.mjs +26 -0
  439. package/src/Popover/Popover.test.tsx +121 -0
  440. package/src/Popover/Popover.tsx +23 -2
  441. package/src/Popover/usePopover.doc.mjs +9 -3
  442. package/src/Popover/usePopover.tsx +70 -12
  443. package/src/PowerSearch/PowerSearch.doc.mjs +15 -0
  444. package/src/PowerSearch/PowerSearch.test.tsx +97 -1
  445. package/src/PowerSearch/PowerSearch.tsx +16 -3
  446. package/src/ProgressBar/ProgressBar.test.tsx +34 -26
  447. package/src/ProgressBar/ProgressBar.tsx +3 -4
  448. package/src/RadioList/RadioList.doc.mjs +9 -0
  449. package/src/RadioList/RadioList.test.tsx +252 -16
  450. package/src/RadioList/RadioList.tsx +166 -10
  451. package/src/RadioList/RadioListItem.tsx +14 -2
  452. package/src/SegmentedControl/SegmentedControl.doc.mjs +9 -0
  453. package/src/SegmentedControl/SegmentedControl.test.tsx +214 -42
  454. package/src/SegmentedControl/SegmentedControl.tsx +102 -54
  455. package/src/SegmentedControl/SegmentedControlContext.ts +7 -0
  456. package/src/SegmentedControl/SegmentedControlItem.tsx +14 -1
  457. package/src/SelectableCard/SelectableCard.doc.mjs +1 -1
  458. package/src/Selector/Selector.doc.mjs +26 -0
  459. package/src/Selector/Selector.test.tsx +387 -15
  460. package/src/Selector/Selector.tsx +175 -67
  461. package/src/Selector/hooks.ts +23 -0
  462. package/src/SideNav/SideNav.test.tsx +48 -0
  463. package/src/SideNav/SideNavHeading.tsx +8 -2
  464. package/src/SideNav/SideNavItem.tsx +2 -4
  465. package/src/Skeleton/Skeleton.test.tsx +25 -0
  466. package/src/Skeleton/Skeleton.tsx +11 -1
  467. package/src/Slider/Slider.doc.mjs +15 -0
  468. package/src/Slider/Slider.test.tsx +155 -2
  469. package/src/Slider/Slider.tsx +53 -5
  470. package/src/Spinner/Spinner.tsx +7 -1
  471. package/src/Stack/Stack.doc.mjs +77 -0
  472. package/src/Stack/Stack.test.tsx +55 -5
  473. package/src/Stack/Stack.tsx +73 -24
  474. package/src/Stack/StackItem.test.tsx +23 -0
  475. package/src/Stack/StackItem.tsx +20 -23
  476. package/src/Switch/Switch.doc.mjs +15 -0
  477. package/src/Switch/Switch.test.tsx +162 -27
  478. package/src/Switch/Switch.tsx +61 -21
  479. package/src/TabList/Tab.tsx +6 -0
  480. package/src/TabList/TabList.doc.mjs +6 -0
  481. package/src/TabList/TabList.test.tsx +251 -0
  482. package/src/TabList/TabList.tsx +103 -12
  483. package/src/TabList/TabListContext.ts +7 -3
  484. package/src/TabList/TabMenu.tsx +6 -3
  485. package/src/Table/BaseTable.tsx +24 -18
  486. package/src/Table/Table.doc.mjs +2 -0
  487. package/src/Table/Table.test.tsx +10 -0
  488. package/src/Table/Table.tsx +8 -0
  489. package/src/Table/TableCell.tsx +105 -24
  490. package/src/Table/TableHeaderCell.tsx +28 -29
  491. package/src/Table/index.ts +8 -2
  492. package/src/Table/plugins/pagination/paginateData.ts +10 -3
  493. package/src/Table/plugins/pagination/useTablePagination.test.tsx +16 -0
  494. package/src/Table/plugins/pagination/useTablePagination.tsx +8 -1
  495. package/src/Table/plugins/rowExpansion/index.ts +7 -0
  496. package/src/Table/plugins/rowExpansion/useTableRowExpansion.test.tsx +155 -0
  497. package/src/Table/plugins/rowExpansion/useTableRowExpansion.tsx +590 -0
  498. package/src/Table/plugins/sortable/useTableSortable.test.tsx +91 -2
  499. package/src/Table/plugins/sortable/useTableSortable.tsx +53 -1
  500. package/src/Table/tableContextMenu.test.tsx +181 -0
  501. package/src/Table/tableContextMenu.tsx +160 -0
  502. package/src/Table/types.ts +74 -0
  503. package/src/Table/useTableColumnResize.doc.mjs +3 -3
  504. package/src/Table/useTablePagination.doc.mjs +4 -1
  505. package/src/Table/useTableRowExpansion.doc.mjs +63 -0
  506. package/src/Table/useTableSortable.doc.mjs +4 -1
  507. package/src/Table/useTableStickyColumns.doc.mjs +2 -2
  508. package/src/Text/Text.doc.mjs +18 -18
  509. package/src/TextArea/TextArea.doc.mjs +17 -0
  510. package/src/TextArea/TextArea.test.tsx +167 -35
  511. package/src/TextArea/TextArea.tsx +62 -15
  512. package/src/TextInput/TextInput.doc.mjs +17 -0
  513. package/src/TextInput/TextInput.test.tsx +168 -34
  514. package/src/TextInput/TextInput.tsx +77 -9
  515. package/src/Thumbnail/Thumbnail.doc.mjs +4 -4
  516. package/src/TimeInput/TimeInput.doc.mjs +345 -60
  517. package/src/TimeInput/TimeInput.test.tsx +255 -7
  518. package/src/TimeInput/TimeInput.tsx +176 -70
  519. package/src/Timestamp/Timestamp.doc.mjs +19 -19
  520. package/src/Toast/Toast.tsx +14 -0
  521. package/src/Toast/ToastViewport.test.tsx +214 -0
  522. package/src/Toast/ToastViewport.tsx +167 -21
  523. package/src/Tokenizer/Tokenizer.doc.mjs +29 -14
  524. package/src/Tokenizer/Tokenizer.test.tsx +105 -1
  525. package/src/Tokenizer/Tokenizer.tsx +37 -1
  526. package/src/Toolbar/Toolbar.test.tsx +109 -6
  527. package/src/Toolbar/Toolbar.tsx +59 -5
  528. package/src/Tooltip/Tooltip.test.tsx +68 -0
  529. package/src/Tooltip/useTooltip.tsx +55 -8
  530. package/src/TopNav/TopNav.test.tsx +50 -0
  531. package/src/TopNav/TopNavHeading.tsx +17 -1
  532. package/src/TreeList/TreeList.test.tsx +295 -6
  533. package/src/TreeList/TreeList.tsx +73 -1
  534. package/src/TreeList/TreeListItem.tsx +51 -5
  535. package/src/TreeList/treeListItem.markers.stylex.ts +20 -0
  536. package/src/Typeahead/BaseTypeahead.tsx +93 -9
  537. package/src/Typeahead/Typeahead.doc.mjs +141 -30
  538. package/src/Typeahead/Typeahead.test.tsx +331 -1
  539. package/src/Typeahead/Typeahead.tsx +105 -33
  540. package/src/VisuallyHidden/VisuallyHidden.doc.mjs +80 -0
  541. package/src/VisuallyHidden/VisuallyHidden.test.tsx +76 -0
  542. package/src/VisuallyHidden/VisuallyHidden.tsx +113 -0
  543. package/src/VisuallyHidden/index.ts +15 -0
  544. package/src/docs-script.test.mjs +50 -0
  545. package/src/hooks/focusableSelector.ts +25 -0
  546. package/src/hooks/index.ts +28 -2
  547. package/src/hooks/useAnnounce.test.tsx +101 -0
  548. package/src/hooks/useAnnounce.ts +168 -0
  549. package/src/hooks/useClickableContainer.ts +16 -4
  550. package/src/hooks/useEntryAnimation.ts +16 -4
  551. package/src/hooks/useFocusTrap.test.tsx +132 -0
  552. package/src/hooks/useFocusTrap.ts +98 -4
  553. package/src/hooks/useGridFocus.doc.mjs +40 -2
  554. package/src/hooks/useGridFocus.test.tsx +132 -0
  555. package/src/hooks/useGridFocus.ts +343 -67
  556. package/src/hooks/useKeyboardHint.doc.mjs +101 -0
  557. package/src/hooks/useKeyboardHint.test.tsx +70 -0
  558. package/src/hooks/useKeyboardHint.tsx +332 -0
  559. package/src/hooks/useListFocus.doc.mjs +50 -10
  560. package/src/hooks/useListFocus.test.tsx +375 -0
  561. package/src/hooks/useListFocus.ts +395 -57
  562. package/src/hooks/useLongPress.test.tsx +134 -0
  563. package/src/hooks/useLongPress.ts +119 -0
  564. package/src/hooks/useTreeFocus.doc.mjs +140 -0
  565. package/src/hooks/useTreeFocus.test.tsx +214 -0
  566. package/src/hooks/useTreeFocus.ts +559 -0
  567. package/src/hooks/useTypeahead.test.tsx +109 -0
  568. package/src/hooks/useTypeahead.ts +183 -0
  569. package/src/index.ts +1 -0
  570. package/src/theme/derivedVarRegistry.test.ts +10 -5
  571. package/src/utils/dateTypes.test.ts +40 -0
  572. package/src/utils/dateTypes.ts +40 -0
  573. package/src/utils/index.ts +9 -0
  574. package/src/utils/inputAria.test.ts +39 -0
  575. package/src/utils/inputAria.ts +58 -0
  576. package/src/utils/timeParser.test.ts +10 -0
  577. package/src/utils/timeParser.ts +5 -2
  578. package/dist/Calendar/hooks/useCalendarRovingTabindex.d.ts +0 -57
  579. package/dist/Calendar/hooks/useCalendarRovingTabindex.d.ts.map +0 -1
  580. package/dist/Calendar/hooks/useCalendarRovingTabindex.js +0 -96
  581. package/src/Calendar/hooks/useCalendarRovingTabindex.ts +0 -118
package/src/ContextMenu/ContextMenu.tsx CHANGED
@@ -42,6 +42,8 @@ import {
42
42
  type DropdownMenuContextValue,
43
43
  } from '../DropdownMenu/DropdownMenuContext';
44
44
  import {useListFocus} from '../hooks/useListFocus';
45
+ import {useTypeahead} from '../hooks/useTypeahead';
46
+ import {useLongPress} from '../hooks/useLongPress';
45
47
  import {layerAnimations} from '../Layer/layerAnimations.stylex';
46
48
  import {
47
49
  colorVars,
@@ -53,6 +55,7 @@ import {
53
55
  } from '../theme/tokens.stylex';
54
56
  import {mergeProps} from '../utils';
55
57
  import type {BaseProps} from '../BaseProps';
58
+ import type {StyleXStyles} from '../theme/types';
56
59
  import {themeProps} from '../utils/themeProps';
57
60
  import type {
58
61
  DropdownMenuOption,
@@ -62,6 +65,11 @@ import type {
62
65
  } from '../DropdownMenu/DropdownMenu';
63
66
 
64
67
  const styles = stylex.create({
68
+ // Trigger wrapper: suppress the iOS long-press callout/selection so the
69
+ // long-press opens our context menu instead of the native text/callout UI.
70
+ trigger: {
71
+ WebkitTouchCallout: 'none',
72
+ },
65
73
  menu: {
66
74
  boxSizing: 'border-box',
67
75
  display: 'flex',
@@ -107,6 +115,13 @@ export type ContextMenuOption = DropdownMenuOption;
107
115
  interface ContextMenuBaseProps extends BaseProps {
108
116
  /** Ref forwarded to the trigger wrapper element. */
109
117
  ref?: React.Ref<HTMLDivElement>;
118
+ /**
119
+ * Styles applied to the trigger wrapper element (the right-click target).
120
+ * By default the trigger is a plain block that hugs its content — pass a
121
+ * fill style (e.g. `width/height: 100%`) when the whole parent area should
122
+ * be right-clickable (as the Table does for full-cell context menus).
123
+ */
124
+ triggerXstyle?: StyleXStyles | StyleXStyles[];
110
125
  /** The trigger area — right-click on this to open the menu. */
111
126
  children: ReactNode;
112
127
  /** Custom menu width. @default '160px' */
@@ -114,11 +129,10 @@ interface ContextMenuBaseProps extends BaseProps {
114
129
  /** Size of menu items. @default 'md' */
115
130
  size?: 'sm' | 'md' | 'lg';
116
131
  /**
117
- * Whether to auto-focus the first menu item when the menu opens.
118
- * Set to `false` for inline showcases or documentation previews.
119
- * @default true
132
+ * Accessible name for the menu surface, announced when it opens.
133
+ * @default 'Context menu'
120
134
  */
121
- hasAutoFocus?: boolean;
135
+ label?: string;
122
136
  /** When true, right-click shows the native browser context menu instead. */
123
137
  isDisabled?: boolean;
124
138
  /** Called when the menu opens or closes. */
@@ -138,9 +152,7 @@ interface ContextMenuCompoundProps extends ContextMenuBaseProps {
138
152
  menuContent: ReactNode;
139
153
  }
140
154
 
141
- export type ContextMenuProps =
142
- | ContextMenuDataProps
143
- | ContextMenuCompoundProps;
155
+ export type ContextMenuProps = ContextMenuDataProps | ContextMenuCompoundProps;
144
156
 
145
157
  // =============================================================================
146
158
  // ContextMenu
@@ -173,13 +185,14 @@ export function ContextMenu({
173
185
  children,
174
186
  menuWidth,
175
187
  size = 'md',
176
- hasAutoFocus = true,
188
+ label = 'Context menu',
177
189
  isDisabled = false,
178
190
  onOpenChange,
179
191
  ref,
180
192
  className,
181
193
  style,
182
194
  xstyle,
195
+ triggerXstyle,
183
196
  'data-testid': testId,
184
197
  ...props
185
198
  }: ContextMenuProps) {
@@ -188,6 +201,9 @@ export function ContextMenu({
188
201
 
189
202
  const menuId = useId();
190
203
  const positionRef = useRef({x: 0, y: 0});
204
+ // Element focused before the menu opened, restored when it closes so focus
205
+ // does not fall to <body> after Escape or outside-click dismissal.
206
+ const triggerFocusRef = useRef<HTMLElement | null>(null);
191
207
 
192
208
  const [isOpen, setIsOpen] = useState(false);
193
209
 
@@ -196,6 +212,12 @@ export function ContextMenu({
196
212
  onHide: useCallback(() => {
197
213
  setIsOpen(false);
198
214
  onOpenChange?.(false);
215
+ // Restore focus to the element that was focused before opening.
216
+ const toRestore = triggerFocusRef.current;
217
+ triggerFocusRef.current = null;
218
+ if (toRestore && document.contains(toRestore)) {
219
+ toRestore.focus();
220
+ }
199
221
  }, [onOpenChange]),
200
222
  onShow: useCallback(() => {
201
223
  setIsOpen(true);
@@ -212,12 +234,35 @@ export function ContextMenu({
212
234
  listRef,
213
235
  handleKeyDown: listNavKeyDown,
214
236
  focusFirst,
237
+ focusItem,
215
238
  } = useListFocus<HTMLDivElement>({
216
239
  itemSelector: '[role="menuitem"]:not([aria-disabled="true"])',
217
240
  wrap: false,
218
241
  onEscape: closeMenu,
219
242
  });
220
243
 
244
+ // First-character typeahead over the enabled menu items (menus-11).
245
+ const getMenuItems = useCallback(
246
+ (): HTMLElement[] =>
247
+ listRef.current
248
+ ? Array.from(
249
+ listRef.current.querySelectorAll<HTMLElement>(
250
+ '[role="menuitem"]:not([aria-disabled="true"])',
251
+ ),
252
+ )
253
+ : [],
254
+ [listRef],
255
+ );
256
+ const typeahead = useTypeahead({
257
+ getItemLabels: () => getMenuItems().map(el => el.textContent),
258
+ onMatch: focusItem,
259
+ getCurrentIndex: () =>
260
+ getMenuItems().findIndex(
261
+ el =>
262
+ el === document.activeElement || el.contains(document.activeElement),
263
+ ),
264
+ });
265
+
221
266
  // Dismiss on any click outside the menu. We use popover="manual" (not
222
267
  // "auto") because the native light-dismiss treats the mouseup from the
223
268
  // opening right-click as a dismiss event. Handling it ourselves via
@@ -238,6 +283,30 @@ export function ContextMenu({
238
283
  };
239
284
  }, [isOpen, closeMenu, listRef]);
240
285
 
286
+ // Dismiss on Escape from anywhere while open. The menu div's own onKeyDown
287
+ // only fires when focus is inside the menu; a document-level listener is
288
+ // kept as a reliable fallback Escape path (e.g. if focus has moved out of
289
+ // the menu). Guards against IME composition-cancel.
290
+ useEffect(() => {
291
+ if (!isOpen) {
292
+ return;
293
+ }
294
+ const handleEscape = (e: KeyboardEvent) => {
295
+ if (e.key !== 'Escape') {
296
+ return;
297
+ }
298
+ if (e.isComposing || e.keyCode === 229) {
299
+ return;
300
+ }
301
+ e.preventDefault();
302
+ closeMenu();
303
+ };
304
+ document.addEventListener('keydown', handleEscape);
305
+ return () => {
306
+ document.removeEventListener('keydown', handleEscape);
307
+ };
308
+ }, [isOpen, closeMenu]);
309
+
241
310
  const listKeyDown = useCallback(
242
311
  (e: React.KeyboardEvent) => {
243
312
  if (e.key === 'Enter' || e.key === ' ') {
@@ -248,9 +317,13 @@ export function ContextMenu({
248
317
  }
249
318
  return;
250
319
  }
320
+ if (typeahead.onKeyDown(e)) {
321
+ e.preventDefault();
322
+ return;
323
+ }
251
324
  listNavKeyDown(e);
252
325
  },
253
- [listNavKeyDown],
326
+ [listNavKeyDown, typeahead],
254
327
  );
255
328
 
256
329
  const handleContextMenu = useCallback(
@@ -259,15 +332,46 @@ export function ContextMenu({
259
332
  return;
260
333
  }
261
334
  e.preventDefault();
262
- positionRef.current = {x: e.clientX, y: e.clientY};
263
- layer.show();
264
- if (hasAutoFocus) {
265
- requestAnimationFrame(() => focusFirst());
335
+ // A keyboard-initiated contextmenu (Shift+F10 / the Menu key) fires a
336
+ // `contextmenu` event whose coordinates are (0, 0) in several browsers.
337
+ // Detect that and anchor the menu to the trigger's box instead, so the
338
+ // menu is reachable without a pointer (menus-8).
339
+ const isKeyboardInvoked =
340
+ e.clientX === 0 && e.clientY === 0 && e.detail === 0;
341
+ if (isKeyboardInvoked && e.currentTarget instanceof HTMLElement) {
342
+ const rect = e.currentTarget.getBoundingClientRect();
343
+ positionRef.current = {x: rect.left, y: rect.bottom};
344
+ } else {
345
+ positionRef.current = {x: e.clientX, y: e.clientY};
266
346
  }
347
+ // Remember the element focused before opening so we can restore it on
348
+ // close (Escape or outside-click), instead of dropping focus to <body>.
349
+ triggerFocusRef.current =
350
+ document.activeElement instanceof HTMLElement
351
+ ? document.activeElement
352
+ : (e.currentTarget as HTMLElement);
353
+ layer.show();
354
+ requestAnimationFrame(() => focusFirst());
267
355
  },
268
- [isDisabled, layer, hasAutoFocus, focusFirst],
356
+ [isDisabled, layer, focusFirst],
269
357
  );
270
358
 
359
+ // Touch long-press invocation (menus-8). iOS Safari never synthesizes a
360
+ // `contextmenu` event on long-press, so a context menu is otherwise
361
+ // unreachable on touch. Open the menu at the touch point once the press is
362
+ // held long enough (see useLongPress for timer/move-cancel/cleanup logic).
363
+ const longPressHandlers = useLongPress({
364
+ disabled: isDisabled,
365
+ onLongPress: useCallback(
366
+ (point: {x: number; y: number}) => {
367
+ positionRef.current = {x: point.x, y: point.y};
368
+ layer.show();
369
+ requestAnimationFrame(() => focusFirst());
370
+ },
371
+ [layer, focusFirst],
372
+ ),
373
+ });
374
+
271
375
  const popoverXstyle = menuWidth
272
376
  ? styles.popoverCustomWidth(menuWidth)
273
377
  : styles.popover;
@@ -285,8 +389,16 @@ export function ContextMenu({
285
389
  <div
286
390
  ref={ref}
287
391
  onContextMenu={handleContextMenu}
288
- aria-haspopup="menu"
289
- data-testid={testId}>
392
+ {...longPressHandlers}
393
+ data-testid={testId}
394
+ {...stylex.props(
395
+ styles.trigger,
396
+ ...(triggerXstyle
397
+ ? Array.isArray(triggerXstyle)
398
+ ? triggerXstyle
399
+ : [triggerXstyle]
400
+ : []),
401
+ )}>
290
402
  {children}
291
403
  </div>
292
404
 
@@ -295,6 +407,7 @@ export function ContextMenu({
295
407
  ref={listRef}
296
408
  id={menuId}
297
409
  role="menu"
410
+ aria-label={label}
298
411
  onKeyDown={listKeyDown}
299
412
  {...mergeProps(
300
413
  themeProps('context-menu'),
package/src/DateInput/DateInput.doc.mjs CHANGED
@@ -7,7 +7,15 @@ export const docs = {
7
7
  displayName: 'Date Input',
8
8
  group: 'DateInput',
9
9
  category: 'Data Input',
10
- keywords: ["dateinput","datepicker","datefield","calendar","dateselect","dateentry","datechooser"],
10
+ keywords: [
11
+ 'dateinput',
12
+ 'datepicker',
13
+ 'datefield',
14
+ 'calendar',
15
+ 'dateselect',
16
+ 'dateentry',
17
+ 'datechooser',
18
+ ],
11
19
  props: [
12
20
  {
13
21
  name: 'label',
@@ -44,6 +52,12 @@ export const docs = {
44
52
  description: 'Disable the input and calendar.',
45
53
  default: 'false',
46
54
  },
55
+ {
56
+ name: 'disabledMessage',
57
+ type: 'string',
58
+ description:
59
+ 'Explains why the input is disabled. With isDisabled, shows a tooltip on hover/keyboard focus and keeps the field focusable via aria-disabled (activation stays blocked). Use this instead of wrapping a disabled DateInput in Tooltip. Disabled controls swallow the hover events an external Tooltip needs.',
60
+ },
47
61
  {
48
62
  name: 'value',
49
63
  type: 'ISODateString',
@@ -57,12 +71,14 @@ export const docs = {
57
71
  {
58
72
  name: 'changeAction',
59
73
  type: '(value: ISODateString | undefined) => void | Promise<void>',
60
- description: 'Async action fired after onChange. Drives optimistic UI updates via useTransition.',
74
+ description:
75
+ 'Async action fired after onChange. Drives optimistic UI updates via useTransition.',
61
76
  },
62
77
  {
63
78
  name: 'isLoading',
64
79
  type: 'boolean',
65
- description: 'Whether the input is in a loading state. Disables interaction and shows a spinner.',
80
+ description:
81
+ 'Whether the input is in a loading state. Disables interaction and shows a spinner.',
66
82
  default: 'false',
67
83
  },
68
84
  {
@@ -102,7 +118,8 @@ export const docs = {
102
118
  {
103
119
  name: 'labelTooltip',
104
120
  type: 'string',
105
- description: 'Tooltip text displayed via an info icon at the end of the label.',
121
+ description:
122
+ 'Tooltip text displayed via an info icon at the end of the label.',
106
123
  },
107
124
  {
108
125
  name: 'hasClear',
@@ -131,23 +148,90 @@ export const docs = {
131
148
  ],
132
149
  },
133
150
  usage: {
134
- description: 'DateInput lets the user type or pick a date from a calendar popover. Use it for scheduling, deadlines, booking dates, or any form field that needs a specific calendar date.',
151
+ description:
152
+ 'DateInput lets the user type or pick a date from a calendar popover. Use it for scheduling, deadlines, booking dates, or any form field that needs a specific calendar date.',
135
153
  bestPractices: [
136
- { guidance: true, description: 'Provide clear labels and descriptions so users understand what date is expected.' },
137
- { guidance: true, description: 'Use min, max, and dateConstraints to restrict selectable dates to valid ranges.' },
138
- { guidance: true, description: 'Use hasClear when the date is optional so the user can reset it.' },
139
- { guidance: true, description: 'Show a loading state with changeAction when the date triggers a server-side save.' },
140
- { guidance: false, description: 'Use a DateInput for free-form text that does not represent a calendar date.' },
141
- { guidance: false, description: 'Hide the label without surrounding context that makes the field purpose obvious.' },
142
- { guidance: false, description: 'Rely on the calendar alone; the text input lets users type dates directly, which is faster for known dates.' },
154
+ {
155
+ guidance: true,
156
+ description:
157
+ 'Provide clear labels and descriptions so users understand what date is expected.',
158
+ },
159
+ {
160
+ guidance: true,
161
+ description:
162
+ 'Use min, max, and dateConstraints to restrict selectable dates to valid ranges.',
163
+ },
164
+ {
165
+ guidance: true,
166
+ description:
167
+ 'Use hasClear when the date is optional so the user can reset it.',
168
+ },
169
+ {
170
+ guidance: true,
171
+ description:
172
+ 'Show a loading state with changeAction when the date triggers a server-side save.',
173
+ },
174
+ {
175
+ guidance: true,
176
+ description:
177
+ 'Use DateInput inside InputGroup when adding a short static prefix or suffix, such as a due-date hint.',
178
+ },
179
+ {
180
+ guidance: false,
181
+ description:
182
+ 'Use a DateInput for free-form text that does not represent a calendar date.',
183
+ },
184
+ {
185
+ guidance: false,
186
+ description:
187
+ 'Hide the label without surrounding context that makes the field purpose obvious.',
188
+ },
189
+ {
190
+ guidance: false,
191
+ description:
192
+ 'Rely on the calendar alone; the text input lets users type dates directly, which is faster for known dates.',
193
+ },
194
+ {
195
+ guidance: false,
196
+ description:
197
+ 'Wrap a disabled DateInput in Tooltip to explain why it is disabled; disabled triggers swallow the hover events the wrapper needs. Use the disabledMessage prop instead.',
198
+ },
143
199
  ],
144
200
  anatomy: [
145
- {name: 'Label', required: true, description: 'Text above the input describing what date is expected.'},
146
- {name: 'Text input', required: true, description: 'A field where the user can type a date directly. Parses common formats like MM/DD/YYYY.'},
147
- {name: 'Calendar icon', required: true, description: 'A button that opens the calendar popover for visual date picking.'},
148
- {name: 'Calendar popover', required: false, description: 'A month grid that appears when the icon is clicked or the input is focused.'},
149
- {name: 'Clear button', required: false, description: 'A × button that resets the date value. Shown when hasClear is true and a date is set.'},
150
- {name: 'Status message', required: false, description: 'An error, warning, or success message below the input.'},
201
+ {
202
+ name: 'Label',
203
+ required: true,
204
+ description: 'Text above the input describing what date is expected.',
205
+ },
206
+ {
207
+ name: 'Text input',
208
+ required: true,
209
+ description:
210
+ 'A field where the user can type a date directly. Parses common formats like MM/DD/YYYY.',
211
+ },
212
+ {
213
+ name: 'Calendar icon',
214
+ required: true,
215
+ description:
216
+ 'A button that opens the calendar popover for visual date picking.',
217
+ },
218
+ {
219
+ name: 'Calendar popover',
220
+ required: false,
221
+ description:
222
+ 'A month grid that appears when the icon is clicked or the input is focused.',
223
+ },
224
+ {
225
+ name: 'Clear button',
226
+ required: false,
227
+ description:
228
+ 'A × button that resets the date value. Shown when hasClear is true and a date is set.',
229
+ },
230
+ {
231
+ name: 'Status message',
232
+ required: false,
233
+ description: 'An error, warning, or success message below the input.',
234
+ },
151
235
  ],
152
236
  },
153
237
  };
@@ -157,40 +241,153 @@ export const docsZh = {
157
241
  name: 'DateInput',
158
242
  displayName: 'Date Input',
159
243
  usage: {
160
- description: 'DateInput lets the user type or pick a date from a calendar popover. Use it for scheduling, deadlines, booking dates, or any form field that needs a specific calendar date.',
244
+ description:
245
+ 'DateInput lets the user type or pick a date from a calendar popover. Use it for scheduling, deadlines, booking dates, or any form field that needs a specific calendar date.',
161
246
  bestPractices: [
162
- { guidance: true, description: 'Provide clear labels and descriptions so users understand what date is expected.' },
163
- { guidance: true, description: 'Use min, max, and dateConstraints to restrict selectable dates to valid ranges.' },
164
- { guidance: true, description: 'Use hasClear when the date is optional so the user can reset it.' },
165
- { guidance: true, description: 'Show a loading state with changeAction when the date triggers a server-side save.' },
166
- { guidance: false, description: 'Use a DateInput for free-form text that does not represent a calendar date.' },
167
- { guidance: false, description: 'Hide the label without surrounding context that makes the field purpose obvious.' },
168
- { guidance: false, description: 'Rely on the calendar alone; the text input lets users type dates directly, which is faster for known dates.' },
247
+ {
248
+ guidance: true,
249
+ description:
250
+ 'Provide clear labels and descriptions so users understand what date is expected.',
251
+ },
252
+ {
253
+ guidance: true,
254
+ description:
255
+ 'Use min, max, and dateConstraints to restrict selectable dates to valid ranges.',
256
+ },
257
+ {
258
+ guidance: true,
259
+ description:
260
+ 'Use hasClear when the date is optional so the user can reset it.',
261
+ },
262
+ {
263
+ guidance: true,
264
+ description:
265
+ 'Show a loading state with changeAction when the date triggers a server-side save.',
266
+ },
267
+ {
268
+ guidance: false,
269
+ description:
270
+ 'Use a DateInput for free-form text that does not represent a calendar date.',
271
+ },
272
+ {
273
+ guidance: false,
274
+ description:
275
+ 'Hide the label without surrounding context that makes the field purpose obvious.',
276
+ },
277
+ {
278
+ guidance: false,
279
+ description:
280
+ 'Rely on the calendar alone; the text input lets users type dates directly, which is faster for known dates.',
281
+ },
282
+ {
283
+ guidance: false,
284
+ description:
285
+ 'Wrap a disabled DateInput in Tooltip to explain why it is disabled; disabled triggers swallow the hover events the wrapper needs. Use the disabledMessage prop instead.',
286
+ },
169
287
  ],
170
288
  },
171
289
  props: [
172
290
  {name: 'label', type: 'string', description: '标签文本。', required: true},
173
- {name: 'isLabelHidden', type: 'boolean', description: '视觉隐藏标签。', default: 'false'},
174
- {name: 'description', type: 'string', description: '显示在标签下方的辅助文本。'},
175
- {name: 'isOptional', type: 'boolean', description: '在标签旁显示"(optional)"指示器。', default: 'false'},
176
- {name: 'isRequired', type: 'boolean', description: '将字段标记为必填。', default: 'false'},
177
- {name: 'isDisabled', type: 'boolean', description: '禁用输入框和日历。', default: 'false'},
178
- {name: 'value', type: 'ISODateString', description: '选中的日期，YYYY-MM-DD 格式。'},
179
- {name: 'onChange', type: '(value: ISODateString | undefined) => void', description: '选中日期变更时调用的回调。'},
291
+ {
292
+ name: 'isLabelHidden',
293
+ type: 'boolean',
294
+ description: '视觉隐藏标签。',
295
+ default: 'false',
296
+ },
297
+ {
298
+ name: 'description',
299
+ type: 'string',
300
+ description: '显示在标签下方的辅助文本。',
301
+ },
302
+ {
303
+ name: 'isOptional',
304
+ type: 'boolean',
305
+ description: '在标签旁显示"(optional)"指示器。',
306
+ default: 'false',
307
+ },
308
+ {
309
+ name: 'isRequired',
310
+ type: 'boolean',
311
+ description: '将字段标记为必填。',
312
+ default: 'false',
313
+ },
314
+ {
315
+ name: 'isDisabled',
316
+ type: 'boolean',
317
+ description: '禁用输入框和日历。',
318
+ default: 'false',
319
+ },
320
+ {
321
+ name: 'disabledMessage',
322
+ type: 'string',
323
+ description:
324
+ '说明输入框为何被禁用。与 isDisabled 一起使用时，在悬停/键盘聚焦时显示提示，并通过 aria-disabled 保持输入框可聚焦（仍阻止输入和激活）。请使用此属性，而不是用 Tooltip 包裹已禁用的 DateInput。',
325
+ },
326
+ {
327
+ name: 'value',
328
+ type: 'ISODateString',
329
+ description: '选中的日期，YYYY-MM-DD 格式。',
330
+ },
331
+ {
332
+ name: 'onChange',
333
+ type: '(value: ISODateString | undefined) => void',
334
+ description: '选中日期变更时调用的回调。',
335
+ },
180
336
  {
181
337
  name: 'changeAction',
182
338
  type: '(value: ISODateString | undefined) => void | Promise<void>',
183
- description: '在 onChange 之后触发的异步操作。通过 useTransition 驱动乐观更新。',
184
- },
185
- {name: 'isLoading', type: 'boolean', description: '输入框是否处于加载状态。禁用交互并显示加载指示器。', default: 'false'},
186
- {name: 'min', type: 'ISODateString', description: '可选择的最早日期（YYYY-MM-DD）。'},
187
- {name: 'max', type: 'ISODateString', description: '可选择的最晚日期（YYYY-MM-DD）。'},
188
- {name: 'dateConstraints', type: 'Array<(date: Date) => boolean>', description: '自定义约束函数数组，用于禁用特定日期。'},
189
- {name: 'placeholder', type: 'string', description: '文本输入框中显示的占位符文本。', default: "'Select a date'"},
190
- {name: 'size', type: "'sm' | 'md' | 'lg'", description: '输入控件的尺寸。', default: "'md'"},
191
- {name: 'status', type: 'InputStatus', description: '错误、警告或成功状态的状态指示对象，附带消息。'},
192
- {name: 'labelTooltip', type: 'string', description: '通过标签末尾的信息图标显示的提示文本。'},
193
- {name: 'numberOfMonths', type: '1 | 2', description: '日历弹出层中同时显示的月份数量。', default: '1'},
339
+ description:
340
+ '在 onChange 之后触发的异步操作。通过 useTransition 驱动乐观更新。',
341
+ },
342
+ {
343
+ name: 'isLoading',
344
+ type: 'boolean',
345
+ description: '输入框是否处于加载状态。禁用交互并显示加载指示器。',
346
+ default: 'false',
347
+ },
348
+ {
349
+ name: 'min',
350
+ type: 'ISODateString',
351
+ description: '可选择的最早日期（YYYY-MM-DD）。',
352
+ },
353
+ {
354
+ name: 'max',
355
+ type: 'ISODateString',
356
+ description: '可选择的最晚日期（YYYY-MM-DD）。',
357
+ },
358
+ {
359
+ name: 'dateConstraints',
360
+ type: 'Array<(date: Date) => boolean>',
361
+ description: '自定义约束函数数组，用于禁用特定日期。',
362
+ },
363
+ {
364
+ name: 'placeholder',
365
+ type: 'string',
366
+ description: '文本输入框中显示的占位符文本。',
367
+ default: "'Select a date'",
368
+ },
369
+ {
370
+ name: 'size',
371
+ type: "'sm' | 'md' | 'lg'",
372
+ description: '输入控件的尺寸。',
373
+ default: "'md'",
374
+ },
375
+ {
376
+ name: 'status',
377
+ type: 'InputStatus',
378
+ description: '错误、警告或成功状态的状态指示对象，附带消息。',
379
+ },
380
+ {
381
+ name: 'labelTooltip',
382
+ type: 'string',
383
+ description: '通过标签末尾的信息图标显示的提示文本。',
384
+ },
385
+ {
386
+ name: 'numberOfMonths',
387
+ type: '1 | 2',
388
+ description: '日历弹出层中同时显示的月份数量。',
389
+ default: '1',
390
+ },
194
391
  {
195
392
  name: 'xstyle',
196
393
  type: 'StyleXStyles',
@@ -202,10 +399,7 @@ export const docsZh = {
202
399
  targets: [
203
400
  {
204
401
  className: 'astryx-date-input',
205
- visualProps: [
206
- 'size',
207
- 'status',
208
- ],
402
+ visualProps: ['size', 'status'],
209
403
  },
210
404
  ],
211
405
  },
@@ -215,15 +409,49 @@ export const docsZh = {
215
409
  export const docsDense = {
216
410
  description: 'text input w/ calendar popover for picking a date',
217
411
  usage: {
218
- description: 'DateInput lets the user type or pick a date from a calendar popover. Use for scheduling, deadlines, booking dates, or any form field needing a calendar date.',
412
+ description:
413
+ 'DateInput lets the user type or pick a date from a calendar popover. Use for scheduling, deadlines, booking dates, or any form field needing a calendar date.',
219
414
  bestPractices: [
220
- { guidance: true, description: 'Provide clear labels + descriptions so users understand what date is expected.' },
221
- { guidance: true, description: 'Use min, max, and dateConstraints to restrict selectable dates to valid ranges.' },
222
- { guidance: true, description: 'Use hasClear when the date is optional so the user can reset it.' },
223
- { guidance: true, description: 'Show a loading state with changeAction when the date triggers a server-side save.' },
224
- { guidance: false, description: 'Use a DateInput for free-form text that does not represent a calendar date.' },
225
- { guidance: false, description: 'Hide the label without surrounding context that makes the field purpose obvious.' },
226
- { guidance: false, description: 'Rely on the calendar alone; the text input lets users type dates directly, which is faster for known dates.' },
415
+ {
416
+ guidance: true,
417
+ description:
418
+ 'Provide clear labels + descriptions so users understand what date is expected.',
419
+ },
420
+ {
421
+ guidance: true,
422
+ description:
423
+ 'Use min, max, and dateConstraints to restrict selectable dates to valid ranges.',
424
+ },
425
+ {
426
+ guidance: true,
427
+ description:
428
+ 'Use hasClear when the date is optional so the user can reset it.',
429
+ },
430
+ {
431
+ guidance: true,
432
+ description:
433
+ 'Show a loading state with changeAction when the date triggers a server-side save.',
434
+ },
435
+ {
436
+ guidance: false,
437
+ description:
438
+ 'Use a DateInput for free-form text that does not represent a calendar date.',
439
+ },
440
+ {
441
+ guidance: false,
442
+ description:
443
+ 'Hide the label without surrounding context that makes the field purpose obvious.',
444
+ },
445
+ {
446
+ guidance: false,
447
+ description:
448
+ 'Rely on the calendar alone; the text input lets users type dates directly, which is faster for known dates.',
449
+ },
450
+ {
451
+ guidance: false,
452
+ description:
453
+ 'Wrap a disabled DateInput in Tooltip to explain why it is disabled; disabled triggers swallow the hover events the wrapper needs. Use the disabledMessage prop instead.',
454
+ },
227
455
  ],
228
456
  },
229
457
  propDescriptions: {
@@ -233,6 +461,8 @@ export const docsDense = {
233
461
  isOptional: 'show "(optional)" indicator',
234
462
  isRequired: 'mark field required',
235
463
  isDisabled: 'disable input+calendar',
464
+ disabledMessage:
465
+ 'reason shown in a tooltip on hover/focus when disabled; keeps field focusable via aria-disabled',
236
466
  value: 'selected date YYYY-MM-DD',
237
467
  onChange: 'callback on date change',
238
468
  changeAction: 'async action after onChange; drives optimistic UI',