@astryxdesign/core 0.1.2 → 0.1.3

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 (567) 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 +2 -4
  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 +4 -5
  54. package/dist/ContextMenu/ContextMenu.d.ts.map +1 -1
  55. package/dist/ContextMenu/ContextMenu.js +93 -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 +11 -8
  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 +10 -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 +2 -1
  207. package/dist/Table/index.d.ts.map +1 -1
  208. package/dist/Table/index.js +2 -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/sortable/useTableSortable.d.ts.map +1 -1
  215. package/dist/Table/plugins/sortable/useTableSortable.js +59 -3
  216. package/dist/Table/tableContextMenu.d.ts +33 -0
  217. package/dist/Table/tableContextMenu.d.ts.map +1 -0
  218. package/dist/Table/tableContextMenu.js +133 -0
  219. package/dist/Table/types.d.ts +66 -0
  220. package/dist/Table/types.d.ts.map +1 -1
  221. package/dist/TextArea/TextArea.d.ts +22 -1
  222. package/dist/TextArea/TextArea.d.ts.map +1 -1
  223. package/dist/TextArea/TextArea.js +41 -9
  224. package/dist/TextInput/TextInput.d.ts +23 -2
  225. package/dist/TextInput/TextInput.d.ts.map +1 -1
  226. package/dist/TextInput/TextInput.js +55 -10
  227. package/dist/TimeInput/TimeInput.d.ts +23 -1
  228. package/dist/TimeInput/TimeInput.d.ts.map +1 -1
  229. package/dist/TimeInput/TimeInput.js +147 -76
  230. package/dist/Toast/Toast.d.ts.map +1 -1
  231. package/dist/Toast/Toast.js +14 -0
  232. package/dist/Toast/ToastViewport.d.ts.map +1 -1
  233. package/dist/Toast/ToastViewport.js +131 -3
  234. package/dist/Tokenizer/Tokenizer.d.ts +12 -1
  235. package/dist/Tokenizer/Tokenizer.d.ts.map +1 -1
  236. package/dist/Tokenizer/Tokenizer.js +26 -4
  237. package/dist/Toolbar/Toolbar.d.ts +3 -3
  238. package/dist/Toolbar/Toolbar.d.ts.map +1 -1
  239. package/dist/Toolbar/Toolbar.js +51 -7
  240. package/dist/Tooltip/useTooltip.d.ts.map +1 -1
  241. package/dist/Tooltip/useTooltip.js +56 -9
  242. package/dist/TopNav/TopNavHeading.d.ts +7 -1
  243. package/dist/TopNav/TopNavHeading.d.ts.map +1 -1
  244. package/dist/TopNav/TopNavHeading.js +8 -0
  245. package/dist/TreeList/TreeList.d.ts +1 -1
  246. package/dist/TreeList/TreeList.d.ts.map +1 -1
  247. package/dist/TreeList/TreeList.js +72 -2
  248. package/dist/TreeList/TreeListItem.d.ts +11 -1
  249. package/dist/TreeList/TreeListItem.d.ts.map +1 -1
  250. package/dist/TreeList/TreeListItem.js +51 -12
  251. package/dist/TreeList/treeListItem.markers.stylex.d.ts +16 -0
  252. package/dist/TreeList/treeListItem.markers.stylex.d.ts.map +1 -0
  253. package/dist/TreeList/treeListItem.markers.stylex.js +22 -0
  254. package/dist/Typeahead/BaseTypeahead.d.ts +13 -0
  255. package/dist/Typeahead/BaseTypeahead.d.ts.map +1 -1
  256. package/dist/Typeahead/BaseTypeahead.js +69 -6
  257. package/dist/Typeahead/Typeahead.d.ts +26 -3
  258. package/dist/Typeahead/Typeahead.d.ts.map +1 -1
  259. package/dist/Typeahead/Typeahead.js +65 -29
  260. package/dist/VisuallyHidden/VisuallyHidden.d.ts +61 -0
  261. package/dist/VisuallyHidden/VisuallyHidden.d.ts.map +1 -0
  262. package/dist/VisuallyHidden/VisuallyHidden.js +65 -0
  263. package/dist/VisuallyHidden/index.d.ts +11 -0
  264. package/dist/VisuallyHidden/index.d.ts.map +1 -0
  265. package/dist/VisuallyHidden/index.js +13 -0
  266. package/dist/astryx.css +18 -0
  267. package/dist/astryx.umd.js +55 -55
  268. package/dist/astryx.umd.js.map +4 -4
  269. package/dist/hooks/focusableSelector.d.ts +22 -0
  270. package/dist/hooks/focusableSelector.d.ts.map +1 -0
  271. package/dist/hooks/focusableSelector.js +24 -0
  272. package/dist/hooks/index.d.ts +12 -2
  273. package/dist/hooks/index.d.ts.map +1 -1
  274. package/dist/hooks/index.js +7 -2
  275. package/dist/hooks/useAnnounce.d.ts +40 -0
  276. package/dist/hooks/useAnnounce.d.ts.map +1 -0
  277. package/dist/hooks/useAnnounce.js +142 -0
  278. package/dist/hooks/useClickableContainer.d.ts +16 -1
  279. package/dist/hooks/useClickableContainer.d.ts.map +1 -1
  280. package/dist/hooks/useClickableContainer.js +16 -4
  281. package/dist/hooks/useEntryAnimation.d.ts.map +1 -1
  282. package/dist/hooks/useEntryAnimation.js +4 -4
  283. package/dist/hooks/useFocusTrap.d.ts +18 -0
  284. package/dist/hooks/useFocusTrap.d.ts.map +1 -1
  285. package/dist/hooks/useFocusTrap.js +87 -3
  286. package/dist/hooks/useGridFocus.d.ts +88 -1
  287. package/dist/hooks/useGridFocus.d.ts.map +1 -1
  288. package/dist/hooks/useGridFocus.js +261 -62
  289. package/dist/hooks/useKeyboardHint.d.ts +82 -0
  290. package/dist/hooks/useKeyboardHint.d.ts.map +1 -0
  291. package/dist/hooks/useKeyboardHint.js +220 -0
  292. package/dist/hooks/useListFocus.d.ts +78 -7
  293. package/dist/hooks/useListFocus.d.ts.map +1 -1
  294. package/dist/hooks/useListFocus.js +305 -52
  295. package/dist/hooks/useLongPress.d.ts +21 -0
  296. package/dist/hooks/useLongPress.d.ts.map +1 -0
  297. package/dist/hooks/useLongPress.js +89 -0
  298. package/dist/hooks/useTreeFocus.d.ts +157 -0
  299. package/dist/hooks/useTreeFocus.d.ts.map +1 -0
  300. package/dist/hooks/useTreeFocus.js +337 -0
  301. package/dist/hooks/useTypeahead.d.ts +63 -0
  302. package/dist/hooks/useTypeahead.d.ts.map +1 -0
  303. package/dist/hooks/useTypeahead.js +117 -0
  304. package/dist/index.d.ts +1 -0
  305. package/dist/index.d.ts.map +1 -1
  306. package/dist/index.js +1 -0
  307. package/dist/utils/dateTypes.d.ts +12 -0
  308. package/dist/utils/dateTypes.d.ts.map +1 -1
  309. package/dist/utils/dateTypes.js +41 -1
  310. package/dist/utils/index.d.ts +4 -0
  311. package/dist/utils/index.d.ts.map +1 -1
  312. package/dist/utils/index.js +3 -1
  313. package/dist/utils/inputAria.d.ts +29 -0
  314. package/dist/utils/inputAria.d.ts.map +1 -0
  315. package/dist/utils/inputAria.js +30 -0
  316. package/dist/utils/timeParser.d.ts.map +1 -1
  317. package/dist/utils/timeParser.js +5 -2
  318. package/docs.mjs +2 -2
  319. package/package.json +12 -8
  320. package/src/Avatar/Avatar.test.tsx +37 -0
  321. package/src/Avatar/Avatar.tsx +10 -5
  322. package/src/Breadcrumbs/BreadcrumbItem.tsx +25 -7
  323. package/src/Breadcrumbs/Breadcrumbs.test.tsx +31 -10
  324. package/src/Button/Button.tsx +3 -16
  325. package/src/ButtonGroup/ButtonGroup.test.tsx +9 -9
  326. package/src/ButtonGroup/ButtonGroup.tsx +0 -1
  327. package/src/Calendar/Calendar.doc.mjs +4 -4
  328. package/src/Calendar/Calendar.test.tsx +168 -30
  329. package/src/Calendar/Calendar.tsx +121 -66
  330. package/src/Calendar/hooks/index.ts +0 -6
  331. package/src/Calendar/index.ts +1 -3
  332. package/src/Calendar/styles.ts +4 -9
  333. package/src/Carousel/Carousel.doc.mjs +7 -1
  334. package/src/Carousel/Carousel.test.tsx +20 -0
  335. package/src/Carousel/Carousel.tsx +16 -1
  336. package/src/Center/Center.doc.mjs +12 -2
  337. package/src/Center/Center.tsx +28 -3
  338. package/src/Chat/ChatComposerInput.test.tsx +26 -7
  339. package/src/Chat/ChatComposerInput.tsx +0 -1
  340. package/src/Chat/ChatDictationButton.doc.mjs +1 -1
  341. package/src/Chat/ChatMessageList.doc.mjs +8 -0
  342. package/src/Chat/ChatMessageList.test.tsx +18 -0
  343. package/src/Chat/ChatMessageList.tsx +16 -0
  344. package/src/Chat/useTriggerMenu.tsx +22 -4
  345. package/src/CheckboxInput/CheckboxInput.doc.mjs +10 -0
  346. package/src/CheckboxInput/CheckboxInput.test.tsx +172 -27
  347. package/src/CheckboxInput/CheckboxInput.tsx +78 -6
  348. package/src/CheckboxList/CheckboxList.doc.mjs +9 -0
  349. package/src/CheckboxList/CheckboxList.test.tsx +192 -26
  350. package/src/CheckboxList/CheckboxList.tsx +56 -3
  351. package/src/CheckboxList/CheckboxListContext.tsx +7 -0
  352. package/src/CheckboxList/CheckboxListItem.tsx +0 -3
  353. package/src/Citation/Citation.doc.mjs +10 -0
  354. package/src/Citation/Citation.test.tsx +121 -0
  355. package/src/Citation/Citation.tsx +15 -3
  356. package/src/CodeBlock/CodeBlock.test.tsx +115 -0
  357. package/src/CodeBlock/CodeBlock.tsx +63 -33
  358. package/src/CommandPalette/CommandPalette.test.tsx +47 -1
  359. package/src/CommandPalette/CommandPalette.tsx +9 -21
  360. package/src/ContextMenu/ContextMenu.doc.mjs +4 -4
  361. package/src/ContextMenu/ContextMenu.test.tsx +155 -1
  362. package/src/ContextMenu/ContextMenu.tsx +113 -16
  363. package/src/DateInput/DateInput.doc.mjs +286 -56
  364. package/src/DateInput/DateInput.test.tsx +248 -2
  365. package/src/DateInput/DateInput.tsx +196 -100
  366. package/src/DateRangeInput/DateRangeInput.doc.mjs +251 -46
  367. package/src/DateRangeInput/DateRangeInput.test.tsx +182 -20
  368. package/src/DateRangeInput/DateRangeInput.tsx +63 -5
  369. package/src/DateTimeInput/DateTimeInput.doc.mjs +368 -67
  370. package/src/DateTimeInput/DateTimeInput.test.tsx +279 -11
  371. package/src/DateTimeInput/DateTimeInput.tsx +125 -17
  372. package/src/Dialog/Dialog.doc.mjs +2 -2
  373. package/src/Dialog/Dialog.tsx +12 -0
  374. package/src/DropdownMenu/DropdownMenu.doc.mjs +1 -8
  375. package/src/DropdownMenu/DropdownMenu.test.tsx +56 -42
  376. package/src/DropdownMenu/DropdownMenu.tsx +52 -18
  377. package/src/Field/Field.doc.mjs +59 -18
  378. package/src/Field/Field.test.tsx +32 -0
  379. package/src/Field/Field.tsx +23 -5
  380. package/src/Field/FieldLabel.tsx +55 -17
  381. package/src/FileInput/FileInput.doc.mjs +17 -0
  382. package/src/FileInput/FileInput.test.tsx +283 -49
  383. package/src/FileInput/FileInput.tsx +76 -4
  384. package/src/Grid/Grid.doc.mjs +17 -4
  385. package/src/Grid/Grid.test.tsx +43 -30
  386. package/src/Grid/Grid.tsx +38 -3
  387. package/src/Icon/Icon.doc.mjs +3 -3
  388. package/src/InputGroup/InputGroup.doc.mjs +111 -23
  389. package/src/InputGroup/InputGroup.test.tsx +257 -60
  390. package/src/InputGroup/InputGroup.tsx +23 -5
  391. package/src/InputGroup/InputGroupContext.ts +9 -4
  392. package/src/InputGroup/groupStyles.ts +7 -1
  393. package/src/InputGroup/index.ts +1 -0
  394. package/src/Kbd/Kbd.test.tsx +22 -4
  395. package/src/Kbd/Kbd.tsx +35 -3
  396. package/src/Layer/layerAnimations.stylex.ts +20 -4
  397. package/src/Layer/useLayer.doc.mjs +5 -0
  398. package/src/Layer/useLayer.test.tsx +111 -0
  399. package/src/Layer/useLayer.tsx +90 -9
  400. package/src/Layout/Layout.tsx +8 -16
  401. package/src/Layout/LayoutFooter.doc.mjs +4 -4
  402. package/src/Layout/LayoutFooter.tsx +3 -3
  403. package/src/Layout/LayoutHeader.doc.mjs +4 -4
  404. package/src/Layout/LayoutHeader.tsx +3 -3
  405. package/src/Layout/LayoutPanel.tsx +3 -3
  406. package/src/Layout/padding.stylex.ts +52 -0
  407. package/src/Lightbox/Lightbox.doc.mjs +9 -0
  408. package/src/Lightbox/Lightbox.test.tsx +53 -5
  409. package/src/Lightbox/Lightbox.tsx +9 -4
  410. package/src/Link/Link.doc.mjs +14 -0
  411. package/src/Link/Link.test.tsx +50 -0
  412. package/src/Link/Link.tsx +39 -4
  413. package/src/Markdown/Markdown.test.tsx +11 -0
  414. package/src/Markdown/Markdown.tsx +7 -0
  415. package/src/MetadataList/MetadataListItem.doc.mjs +4 -0
  416. package/src/MoreMenu/MoreMenu.doc.mjs +2 -17
  417. package/src/MoreMenu/MoreMenu.tsx +0 -9
  418. package/src/MultiSelector/MultiSelector.doc.mjs +30 -0
  419. package/src/MultiSelector/MultiSelector.test.tsx +375 -8
  420. package/src/MultiSelector/MultiSelector.tsx +194 -48
  421. package/src/MultiSelector/hooks.ts +27 -0
  422. package/src/NavMenu/NavHeadingMenu.test.tsx +77 -1
  423. package/src/NavMenu/NavHeadingMenu.tsx +50 -3
  424. package/src/NumberInput/NumberInput.doc.mjs +17 -0
  425. package/src/NumberInput/NumberInput.test.tsx +242 -40
  426. package/src/NumberInput/NumberInput.tsx +89 -11
  427. package/src/Pagination/Pagination.doc.mjs +3 -3
  428. package/src/Pagination/Pagination.test.tsx +117 -5
  429. package/src/Pagination/Pagination.tsx +21 -1
  430. package/src/Popover/Popover.doc.mjs +26 -0
  431. package/src/Popover/Popover.test.tsx +121 -0
  432. package/src/Popover/Popover.tsx +23 -2
  433. package/src/Popover/usePopover.doc.mjs +9 -3
  434. package/src/Popover/usePopover.tsx +70 -12
  435. package/src/PowerSearch/PowerSearch.doc.mjs +15 -0
  436. package/src/PowerSearch/PowerSearch.test.tsx +97 -1
  437. package/src/PowerSearch/PowerSearch.tsx +16 -3
  438. package/src/ProgressBar/ProgressBar.test.tsx +34 -26
  439. package/src/ProgressBar/ProgressBar.tsx +3 -4
  440. package/src/RadioList/RadioList.doc.mjs +9 -0
  441. package/src/RadioList/RadioList.test.tsx +252 -16
  442. package/src/RadioList/RadioList.tsx +166 -10
  443. package/src/RadioList/RadioListItem.tsx +14 -2
  444. package/src/SegmentedControl/SegmentedControl.doc.mjs +9 -0
  445. package/src/SegmentedControl/SegmentedControl.test.tsx +214 -42
  446. package/src/SegmentedControl/SegmentedControl.tsx +102 -54
  447. package/src/SegmentedControl/SegmentedControlContext.ts +7 -0
  448. package/src/SegmentedControl/SegmentedControlItem.tsx +14 -1
  449. package/src/SelectableCard/SelectableCard.doc.mjs +1 -1
  450. package/src/Selector/Selector.doc.mjs +26 -0
  451. package/src/Selector/Selector.test.tsx +387 -15
  452. package/src/Selector/Selector.tsx +175 -67
  453. package/src/Selector/hooks.ts +23 -0
  454. package/src/SideNav/SideNav.test.tsx +48 -0
  455. package/src/SideNav/SideNavHeading.tsx +8 -2
  456. package/src/SideNav/SideNavItem.tsx +2 -4
  457. package/src/Skeleton/Skeleton.test.tsx +25 -0
  458. package/src/Skeleton/Skeleton.tsx +11 -1
  459. package/src/Slider/Slider.doc.mjs +15 -0
  460. package/src/Slider/Slider.test.tsx +155 -2
  461. package/src/Slider/Slider.tsx +53 -5
  462. package/src/Spinner/Spinner.tsx +7 -1
  463. package/src/Stack/Stack.doc.mjs +77 -0
  464. package/src/Stack/Stack.test.tsx +55 -5
  465. package/src/Stack/Stack.tsx +73 -24
  466. package/src/Stack/StackItem.test.tsx +23 -0
  467. package/src/Stack/StackItem.tsx +20 -23
  468. package/src/Switch/Switch.doc.mjs +15 -0
  469. package/src/Switch/Switch.test.tsx +162 -27
  470. package/src/Switch/Switch.tsx +61 -21
  471. package/src/TabList/Tab.tsx +6 -0
  472. package/src/TabList/TabList.doc.mjs +6 -0
  473. package/src/TabList/TabList.test.tsx +251 -0
  474. package/src/TabList/TabList.tsx +103 -12
  475. package/src/TabList/TabListContext.ts +7 -3
  476. package/src/TabList/TabMenu.tsx +6 -3
  477. package/src/Table/BaseTable.tsx +21 -17
  478. package/src/Table/Table.doc.mjs +2 -0
  479. package/src/Table/Table.test.tsx +10 -0
  480. package/src/Table/Table.tsx +8 -0
  481. package/src/Table/TableCell.tsx +25 -23
  482. package/src/Table/TableHeaderCell.tsx +28 -29
  483. package/src/Table/index.ts +3 -2
  484. package/src/Table/plugins/pagination/paginateData.ts +10 -3
  485. package/src/Table/plugins/pagination/useTablePagination.test.tsx +16 -0
  486. package/src/Table/plugins/pagination/useTablePagination.tsx +8 -1
  487. package/src/Table/plugins/sortable/useTableSortable.test.tsx +91 -2
  488. package/src/Table/plugins/sortable/useTableSortable.tsx +53 -1
  489. package/src/Table/tableContextMenu.test.tsx +157 -0
  490. package/src/Table/tableContextMenu.tsx +142 -0
  491. package/src/Table/types.ts +74 -0
  492. package/src/Table/useTableColumnResize.doc.mjs +3 -3
  493. package/src/Table/useTableStickyColumns.doc.mjs +2 -2
  494. package/src/Text/Text.doc.mjs +18 -18
  495. package/src/TextArea/TextArea.doc.mjs +17 -0
  496. package/src/TextArea/TextArea.test.tsx +167 -35
  497. package/src/TextArea/TextArea.tsx +62 -15
  498. package/src/TextInput/TextInput.doc.mjs +17 -0
  499. package/src/TextInput/TextInput.test.tsx +168 -34
  500. package/src/TextInput/TextInput.tsx +77 -9
  501. package/src/Thumbnail/Thumbnail.doc.mjs +4 -4
  502. package/src/TimeInput/TimeInput.doc.mjs +340 -60
  503. package/src/TimeInput/TimeInput.test.tsx +255 -7
  504. package/src/TimeInput/TimeInput.tsx +176 -70
  505. package/src/Timestamp/Timestamp.doc.mjs +19 -19
  506. package/src/Toast/Toast.tsx +14 -0
  507. package/src/Toast/ToastViewport.test.tsx +214 -0
  508. package/src/Toast/ToastViewport.tsx +167 -21
  509. package/src/Tokenizer/Tokenizer.doc.mjs +29 -14
  510. package/src/Tokenizer/Tokenizer.test.tsx +105 -1
  511. package/src/Tokenizer/Tokenizer.tsx +37 -1
  512. package/src/Toolbar/Toolbar.test.tsx +109 -6
  513. package/src/Toolbar/Toolbar.tsx +59 -5
  514. package/src/Tooltip/Tooltip.test.tsx +68 -0
  515. package/src/Tooltip/useTooltip.tsx +55 -8
  516. package/src/TopNav/TopNav.test.tsx +50 -0
  517. package/src/TopNav/TopNavHeading.tsx +17 -1
  518. package/src/TreeList/TreeList.test.tsx +295 -6
  519. package/src/TreeList/TreeList.tsx +73 -1
  520. package/src/TreeList/TreeListItem.tsx +51 -5
  521. package/src/TreeList/treeListItem.markers.stylex.ts +20 -0
  522. package/src/Typeahead/BaseTypeahead.tsx +93 -9
  523. package/src/Typeahead/Typeahead.doc.mjs +141 -30
  524. package/src/Typeahead/Typeahead.test.tsx +331 -1
  525. package/src/Typeahead/Typeahead.tsx +105 -33
  526. package/src/VisuallyHidden/VisuallyHidden.doc.mjs +80 -0
  527. package/src/VisuallyHidden/VisuallyHidden.test.tsx +76 -0
  528. package/src/VisuallyHidden/VisuallyHidden.tsx +113 -0
  529. package/src/VisuallyHidden/index.ts +15 -0
  530. package/src/docs-script.test.mjs +50 -0
  531. package/src/hooks/focusableSelector.ts +25 -0
  532. package/src/hooks/index.ts +28 -2
  533. package/src/hooks/useAnnounce.test.tsx +101 -0
  534. package/src/hooks/useAnnounce.ts +168 -0
  535. package/src/hooks/useClickableContainer.ts +16 -4
  536. package/src/hooks/useEntryAnimation.ts +16 -4
  537. package/src/hooks/useFocusTrap.test.tsx +132 -0
  538. package/src/hooks/useFocusTrap.ts +98 -4
  539. package/src/hooks/useGridFocus.doc.mjs +40 -2
  540. package/src/hooks/useGridFocus.test.tsx +132 -0
  541. package/src/hooks/useGridFocus.ts +343 -67
  542. package/src/hooks/useKeyboardHint.doc.mjs +101 -0
  543. package/src/hooks/useKeyboardHint.test.tsx +70 -0
  544. package/src/hooks/useKeyboardHint.tsx +332 -0
  545. package/src/hooks/useListFocus.doc.mjs +50 -10
  546. package/src/hooks/useListFocus.test.tsx +375 -0
  547. package/src/hooks/useListFocus.ts +395 -57
  548. package/src/hooks/useLongPress.test.tsx +134 -0
  549. package/src/hooks/useLongPress.ts +119 -0
  550. package/src/hooks/useTreeFocus.doc.mjs +140 -0
  551. package/src/hooks/useTreeFocus.test.tsx +214 -0
  552. package/src/hooks/useTreeFocus.ts +559 -0
  553. package/src/hooks/useTypeahead.test.tsx +109 -0
  554. package/src/hooks/useTypeahead.ts +183 -0
  555. package/src/index.ts +1 -0
  556. package/src/theme/derivedVarRegistry.test.ts +10 -5
  557. package/src/utils/dateTypes.test.ts +40 -0
  558. package/src/utils/dateTypes.ts +40 -0
  559. package/src/utils/index.ts +9 -0
  560. package/src/utils/inputAria.test.ts +39 -0
  561. package/src/utils/inputAria.ts +58 -0
  562. package/src/utils/timeParser.test.ts +10 -0
  563. package/src/utils/timeParser.ts +5 -2
  564. package/dist/Calendar/hooks/useCalendarRovingTabindex.d.ts +0 -57
  565. package/dist/Calendar/hooks/useCalendarRovingTabindex.d.ts.map +0 -1
  566. package/dist/Calendar/hooks/useCalendarRovingTabindex.js +0 -96
  567. 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,
@@ -62,6 +64,11 @@ import type {
62
64
  } from '../DropdownMenu/DropdownMenu';
63
65
 
64
66
  const styles = stylex.create({
67
+ // Trigger wrapper: suppress the iOS long-press callout/selection so the
68
+ // long-press opens our context menu instead of the native text/callout UI.
69
+ trigger: {
70
+ WebkitTouchCallout: 'none',
71
+ },
65
72
  menu: {
66
73
  boxSizing: 'border-box',
67
74
  display: 'flex',
@@ -114,11 +121,10 @@ interface ContextMenuBaseProps extends BaseProps {
114
121
  /** Size of menu items. @default 'md' */
115
122
  size?: 'sm' | 'md' | 'lg';
116
123
  /**
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
124
+ * Accessible name for the menu surface, announced when it opens.
125
+ * @default 'Context menu'
120
126
  */
121
- hasAutoFocus?: boolean;
127
+ label?: string;
122
128
  /** When true, right-click shows the native browser context menu instead. */
123
129
  isDisabled?: boolean;
124
130
  /** Called when the menu opens or closes. */
@@ -138,9 +144,7 @@ interface ContextMenuCompoundProps extends ContextMenuBaseProps {
138
144
  menuContent: ReactNode;
139
145
  }
140
146
 
141
- export type ContextMenuProps =
142
- | ContextMenuDataProps
143
- | ContextMenuCompoundProps;
147
+ export type ContextMenuProps = ContextMenuDataProps | ContextMenuCompoundProps;
144
148
 
145
149
  // =============================================================================
146
150
  // ContextMenu
@@ -173,7 +177,7 @@ export function ContextMenu({
173
177
  children,
174
178
  menuWidth,
175
179
  size = 'md',
176
- hasAutoFocus = true,
180
+ label = 'Context menu',
177
181
  isDisabled = false,
178
182
  onOpenChange,
179
183
  ref,
@@ -188,6 +192,9 @@ export function ContextMenu({
188
192
 
189
193
  const menuId = useId();
190
194
  const positionRef = useRef({x: 0, y: 0});
195
+ // Element focused before the menu opened, restored when it closes so focus
196
+ // does not fall to <body> after Escape or outside-click dismissal.
197
+ const triggerFocusRef = useRef<HTMLElement | null>(null);
191
198
 
192
199
  const [isOpen, setIsOpen] = useState(false);
193
200
 
@@ -196,6 +203,12 @@ export function ContextMenu({
196
203
  onHide: useCallback(() => {
197
204
  setIsOpen(false);
198
205
  onOpenChange?.(false);
206
+ // Restore focus to the element that was focused before opening.
207
+ const toRestore = triggerFocusRef.current;
208
+ triggerFocusRef.current = null;
209
+ if (toRestore && document.contains(toRestore)) {
210
+ toRestore.focus();
211
+ }
199
212
  }, [onOpenChange]),
200
213
  onShow: useCallback(() => {
201
214
  setIsOpen(true);
@@ -212,12 +225,35 @@ export function ContextMenu({
212
225
  listRef,
213
226
  handleKeyDown: listNavKeyDown,
214
227
  focusFirst,
228
+ focusItem,
215
229
  } = useListFocus<HTMLDivElement>({
216
230
  itemSelector: '[role="menuitem"]:not([aria-disabled="true"])',
217
231
  wrap: false,
218
232
  onEscape: closeMenu,
219
233
  });
220
234
 
235
+ // First-character typeahead over the enabled menu items (menus-11).
236
+ const getMenuItems = useCallback(
237
+ (): HTMLElement[] =>
238
+ listRef.current
239
+ ? Array.from(
240
+ listRef.current.querySelectorAll<HTMLElement>(
241
+ '[role="menuitem"]:not([aria-disabled="true"])',
242
+ ),
243
+ )
244
+ : [],
245
+ [listRef],
246
+ );
247
+ const typeahead = useTypeahead({
248
+ getItemLabels: () => getMenuItems().map(el => el.textContent),
249
+ onMatch: focusItem,
250
+ getCurrentIndex: () =>
251
+ getMenuItems().findIndex(
252
+ el =>
253
+ el === document.activeElement || el.contains(document.activeElement),
254
+ ),
255
+ });
256
+
221
257
  // Dismiss on any click outside the menu. We use popover="manual" (not
222
258
  // "auto") because the native light-dismiss treats the mouseup from the
223
259
  // opening right-click as a dismiss event. Handling it ourselves via
@@ -238,6 +274,30 @@ export function ContextMenu({
238
274
  };
239
275
  }, [isOpen, closeMenu, listRef]);
240
276
 
277
+ // Dismiss on Escape from anywhere while open. The menu div's own onKeyDown
278
+ // only fires when focus is inside the menu; a document-level listener is
279
+ // kept as a reliable fallback Escape path (e.g. if focus has moved out of
280
+ // the menu). Guards against IME composition-cancel.
281
+ useEffect(() => {
282
+ if (!isOpen) {
283
+ return;
284
+ }
285
+ const handleEscape = (e: KeyboardEvent) => {
286
+ if (e.key !== 'Escape') {
287
+ return;
288
+ }
289
+ if (e.isComposing || e.keyCode === 229) {
290
+ return;
291
+ }
292
+ e.preventDefault();
293
+ closeMenu();
294
+ };
295
+ document.addEventListener('keydown', handleEscape);
296
+ return () => {
297
+ document.removeEventListener('keydown', handleEscape);
298
+ };
299
+ }, [isOpen, closeMenu]);
300
+
241
301
  const listKeyDown = useCallback(
242
302
  (e: React.KeyboardEvent) => {
243
303
  if (e.key === 'Enter' || e.key === ' ') {
@@ -248,9 +308,13 @@ export function ContextMenu({
248
308
  }
249
309
  return;
250
310
  }
311
+ if (typeahead.onKeyDown(e)) {
312
+ e.preventDefault();
313
+ return;
314
+ }
251
315
  listNavKeyDown(e);
252
316
  },
253
- [listNavKeyDown],
317
+ [listNavKeyDown, typeahead],
254
318
  );
255
319
 
256
320
  const handleContextMenu = useCallback(
@@ -259,15 +323,46 @@ export function ContextMenu({
259
323
  return;
260
324
  }
261
325
  e.preventDefault();
262
- positionRef.current = {x: e.clientX, y: e.clientY};
263
- layer.show();
264
- if (hasAutoFocus) {
265
- requestAnimationFrame(() => focusFirst());
326
+ // A keyboard-initiated contextmenu (Shift+F10 / the Menu key) fires a
327
+ // `contextmenu` event whose coordinates are (0, 0) in several browsers.
328
+ // Detect that and anchor the menu to the trigger's box instead, so the
329
+ // menu is reachable without a pointer (menus-8).
330
+ const isKeyboardInvoked =
331
+ e.clientX === 0 && e.clientY === 0 && e.detail === 0;
332
+ if (isKeyboardInvoked && e.currentTarget instanceof HTMLElement) {
333
+ const rect = e.currentTarget.getBoundingClientRect();
334
+ positionRef.current = {x: rect.left, y: rect.bottom};
335
+ } else {
336
+ positionRef.current = {x: e.clientX, y: e.clientY};
266
337
  }
338
+ // Remember the element focused before opening so we can restore it on
339
+ // close (Escape or outside-click), instead of dropping focus to <body>.
340
+ triggerFocusRef.current =
341
+ document.activeElement instanceof HTMLElement
342
+ ? document.activeElement
343
+ : (e.currentTarget as HTMLElement);
344
+ layer.show();
345
+ requestAnimationFrame(() => focusFirst());
267
346
  },
268
- [isDisabled, layer, hasAutoFocus, focusFirst],
347
+ [isDisabled, layer, focusFirst],
269
348
  );
270
349
 
350
+ // Touch long-press invocation (menus-8). iOS Safari never synthesizes a
351
+ // `contextmenu` event on long-press, so a context menu is otherwise
352
+ // unreachable on touch. Open the menu at the touch point once the press is
353
+ // held long enough (see useLongPress for timer/move-cancel/cleanup logic).
354
+ const longPressHandlers = useLongPress({
355
+ disabled: isDisabled,
356
+ onLongPress: useCallback(
357
+ (point: {x: number; y: number}) => {
358
+ positionRef.current = {x: point.x, y: point.y};
359
+ layer.show();
360
+ requestAnimationFrame(() => focusFirst());
361
+ },
362
+ [layer, focusFirst],
363
+ ),
364
+ });
365
+
271
366
  const popoverXstyle = menuWidth
272
367
  ? styles.popoverCustomWidth(menuWidth)
273
368
  : styles.popover;
@@ -285,8 +380,9 @@ export function ContextMenu({
285
380
  <div
286
381
  ref={ref}
287
382
  onContextMenu={handleContextMenu}
288
- aria-haspopup="menu"
289
- data-testid={testId}>
383
+ {...longPressHandlers}
384
+ data-testid={testId}
385
+ {...stylex.props(styles.trigger)}>
290
386
  {children}
291
387
  </div>
292
388
 
@@ -295,6 +391,7 @@ export function ContextMenu({
295
391
  ref={listRef}
296
392
  id={menuId}
297
393
  role="menu"
394
+ aria-label={label}
298
395
  onKeyDown={listKeyDown}
299
396
  {...mergeProps(
300
397
  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',