@astryxdesign/core 0.1.4-canary.ff77e1c → 0.1.4

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 (598) hide show
  1. package/dist/AlertDialog/AlertDialog.d.ts +1 -1
  2. package/dist/AlertDialog/AlertDialog.d.ts.map +1 -1
  3. package/dist/AlertDialog/AlertDialog.js +18 -20
  4. package/dist/AlertDialog/useImperativeAlertDialog.js +3 -3
  5. package/dist/AppShell/AppShell.d.ts +1 -1
  6. package/dist/AppShell/AppShell.d.ts.map +1 -1
  7. package/dist/AppShell/AppShell.js +53 -55
  8. package/dist/AspectRatio/AspectRatio.d.ts +10 -48
  9. package/dist/AspectRatio/AspectRatio.d.ts.map +1 -1
  10. package/dist/AspectRatio/AspectRatio.js +12 -33
  11. package/dist/AspectRatio/index.d.ts +1 -1
  12. package/dist/AspectRatio/index.d.ts.map +1 -1
  13. package/dist/Avatar/Avatar.d.ts.map +1 -1
  14. package/dist/Avatar/Avatar.js +25 -27
  15. package/dist/Avatar/AvatarStatusDot.js +5 -5
  16. package/dist/AvatarGroup/AvatarGroup.js +5 -5
  17. package/dist/AvatarGroup/AvatarGroupOverflow.js +5 -5
  18. package/dist/Badge/Badge.js +3 -3
  19. package/dist/Banner/Banner.d.ts.map +1 -1
  20. package/dist/Banner/Banner.js +25 -32
  21. package/dist/Blockquote/Blockquote.js +7 -7
  22. package/dist/Breadcrumbs/BreadcrumbItem.js +17 -17
  23. package/dist/Breadcrumbs/Breadcrumbs.js +7 -7
  24. package/dist/Button/Button.js +19 -19
  25. package/dist/ButtonGroup/ButtonGroup.js +7 -7
  26. package/dist/Calendar/Calendar.d.ts.map +1 -1
  27. package/dist/Calendar/Calendar.js +48 -68
  28. package/dist/Calendar/dayCellUtils.d.ts.map +1 -1
  29. package/dist/Calendar/styles.d.ts +2 -2
  30. package/dist/Calendar/styles.d.ts.map +1 -1
  31. package/dist/Calendar/styles.js +2 -2
  32. package/dist/Card/Card.d.ts +2 -4
  33. package/dist/Card/Card.d.ts.map +1 -1
  34. package/dist/Card/Card.js +10 -18
  35. package/dist/Carousel/Carousel.d.ts.map +1 -1
  36. package/dist/Carousel/Carousel.js +21 -24
  37. package/dist/Carousel/carousel.markers.stylex.d.ts +7 -0
  38. package/dist/Carousel/carousel.markers.stylex.d.ts.map +1 -0
  39. package/dist/Carousel/carousel.markers.stylex.js +12 -0
  40. package/dist/Center/Center.js +3 -3
  41. package/dist/Chat/ChatComposer.js +23 -23
  42. package/dist/Chat/ChatComposerDrawer.js +14 -14
  43. package/dist/Chat/ChatComposerInput.d.ts +1 -1
  44. package/dist/Chat/ChatComposerInput.d.ts.map +1 -1
  45. package/dist/Chat/ChatComposerInput.js +15 -27
  46. package/dist/Chat/ChatDictationButton.d.ts +1 -1
  47. package/dist/Chat/ChatDictationButton.d.ts.map +1 -1
  48. package/dist/Chat/ChatDictationButton.js +11 -13
  49. package/dist/Chat/ChatLayout.js +17 -17
  50. package/dist/Chat/ChatLayoutScrollButton.d.ts +1 -1
  51. package/dist/Chat/ChatLayoutScrollButton.d.ts.map +1 -1
  52. package/dist/Chat/ChatLayoutScrollButton.js +10 -12
  53. package/dist/Chat/ChatMessage.js +12 -12
  54. package/dist/Chat/ChatMessageBubble.js +7 -7
  55. package/dist/Chat/ChatMessageList.js +14 -14
  56. package/dist/Chat/ChatMessageMetadata.d.ts +1 -1
  57. package/dist/Chat/ChatMessageMetadata.d.ts.map +1 -1
  58. package/dist/Chat/ChatMessageMetadata.js +12 -14
  59. package/dist/Chat/ChatPastedTextToken.js +13 -13
  60. package/dist/Chat/ChatSendButton.js +3 -3
  61. package/dist/Chat/ChatSystemMessage.d.ts +1 -1
  62. package/dist/Chat/ChatSystemMessage.d.ts.map +1 -1
  63. package/dist/Chat/ChatSystemMessage.js +17 -17
  64. package/dist/Chat/ChatTokenizedText.d.ts +1 -1
  65. package/dist/Chat/ChatTokenizedText.d.ts.map +1 -1
  66. package/dist/Chat/ChatTokenizedText.js +15 -24
  67. package/dist/Chat/ChatToolCalls.d.ts.map +1 -1
  68. package/dist/Chat/ChatToolCalls.js +74 -81
  69. package/dist/Chat/index.d.ts +1 -1
  70. package/dist/Chat/index.d.ts.map +1 -1
  71. package/dist/Chat/useTriggerMenu.d.ts.map +1 -1
  72. package/dist/Chat/useTriggerMenu.js +15 -15
  73. package/dist/CheckboxInput/CheckboxInput.d.ts +1 -1
  74. package/dist/CheckboxInput/CheckboxInput.d.ts.map +1 -1
  75. package/dist/CheckboxInput/CheckboxInput.js +23 -25
  76. package/dist/CheckboxList/CheckboxList.js +9 -9
  77. package/dist/CheckboxList/CheckboxListItem.d.ts +1 -1
  78. package/dist/CheckboxList/CheckboxListItem.d.ts.map +1 -1
  79. package/dist/CheckboxList/CheckboxListItem.js +6 -8
  80. package/dist/Citation/Citation.js +10 -10
  81. package/dist/ClickableCard/ClickableCard.d.ts.map +1 -1
  82. package/dist/ClickableCard/ClickableCard.js +9 -32
  83. package/dist/Code/Code.js +3 -3
  84. package/dist/CodeBlock/CodeBlock.d.ts +1 -10
  85. package/dist/CodeBlock/CodeBlock.d.ts.map +1 -1
  86. package/dist/CodeBlock/CodeBlock.js +52 -88
  87. package/dist/Collapsible/Collapsible.d.ts +3 -9
  88. package/dist/Collapsible/Collapsible.d.ts.map +1 -1
  89. package/dist/Collapsible/Collapsible.js +22 -110
  90. package/dist/Collapsible/CollapsibleGroup.d.ts +7 -39
  91. package/dist/Collapsible/CollapsibleGroup.d.ts.map +1 -1
  92. package/dist/Collapsible/CollapsibleGroup.js +12 -73
  93. package/dist/Collapsible/CollapsibleGroupContext.d.ts +0 -31
  94. package/dist/Collapsible/CollapsibleGroupContext.d.ts.map +1 -1
  95. package/dist/Collapsible/CollapsibleGroupContext.js +3 -33
  96. package/dist/Collapsible/index.d.ts +0 -1
  97. package/dist/Collapsible/index.d.ts.map +1 -1
  98. package/dist/Collapsible/useCollapsible.d.ts +1 -4
  99. package/dist/Collapsible/useCollapsible.d.ts.map +1 -1
  100. package/dist/Collapsible/useCollapsible.js +6 -20
  101. package/dist/CommandPalette/CommandPalette.d.ts.map +1 -1
  102. package/dist/CommandPalette/CommandPalette.js +34 -36
  103. package/dist/CommandPalette/CommandPaletteEmpty.js +3 -3
  104. package/dist/CommandPalette/CommandPaletteFooter.js +16 -16
  105. package/dist/CommandPalette/CommandPaletteGroup.js +5 -5
  106. package/dist/CommandPalette/CommandPaletteInput.js +13 -13
  107. package/dist/CommandPalette/CommandPaletteItem.js +3 -3
  108. package/dist/CommandPalette/CommandPaletteList.js +3 -3
  109. package/dist/ContextMenu/ContextMenu.d.ts +2 -7
  110. package/dist/ContextMenu/ContextMenu.d.ts.map +1 -1
  111. package/dist/ContextMenu/ContextMenu.js +43 -76
  112. package/dist/DateInput/DateInput.js +18 -18
  113. package/dist/DateRangeInput/DateRangeInput.js +21 -21
  114. package/dist/DateTimeInput/DateTimeInput.d.ts +2 -5
  115. package/dist/DateTimeInput/DateTimeInput.d.ts.map +1 -1
  116. package/dist/DateTimeInput/DateTimeInput.js +26 -30
  117. package/dist/DateTimeInput/index.d.ts +1 -1
  118. package/dist/DateTimeInput/index.d.ts.map +1 -1
  119. package/dist/Dialog/Dialog.js +9 -9
  120. package/dist/Dialog/DialogHeader.js +16 -16
  121. package/dist/Dialog/useImperativeDialog.js +3 -3
  122. package/dist/Divider/Divider.js +7 -7
  123. package/dist/DropdownMenu/DropdownMenu.js +10 -10
  124. package/dist/DropdownMenu/DropdownMenuItem.d.ts +17 -2
  125. package/dist/DropdownMenu/DropdownMenuItem.d.ts.map +1 -1
  126. package/dist/DropdownMenu/DropdownMenuItem.js +3 -3
  127. package/dist/DropdownMenu/renderDropdownItems.js +10 -10
  128. package/dist/EmptyState/EmptyState.js +9 -9
  129. package/dist/Field/Field.js +17 -17
  130. package/dist/Field/FieldLabel.js +15 -15
  131. package/dist/Field/InputClearButton.js +5 -5
  132. package/dist/FieldStatus/FieldStatus.js +3 -3
  133. package/dist/FileInput/FileInput.js +29 -29
  134. package/dist/FormLayout/FormLayout.js +5 -5
  135. package/dist/Grid/Grid.d.ts +3 -4
  136. package/dist/Grid/Grid.d.ts.map +1 -1
  137. package/dist/Grid/Grid.js +12 -29
  138. package/dist/Grid/GridSpan.js +3 -3
  139. package/dist/HStack/HStack.js +3 -3
  140. package/dist/Heading/Heading.js +10 -10
  141. package/dist/HoverCard/HoverCard.js +9 -9
  142. package/dist/HoverCard/useHoverCard.d.ts +1 -5
  143. package/dist/HoverCard/useHoverCard.d.ts.map +1 -1
  144. package/dist/HoverCard/useHoverCard.js +3 -3
  145. package/dist/Icon/Icon.d.ts.map +1 -1
  146. package/dist/Icon/Icon.js +12 -16
  147. package/dist/Icon/defaultIcons.js +116 -116
  148. package/dist/IconButton/IconButton.js +3 -3
  149. package/dist/InputGroup/InputGroup.js +11 -11
  150. package/dist/InputGroup/InputGroupText.js +3 -3
  151. package/dist/Item/Item.js +18 -18
  152. package/dist/Kbd/Kbd.js +5 -5
  153. package/dist/Layer/LayerProvider.js +7 -7
  154. package/dist/Layer/useLayer.d.ts +2 -29
  155. package/dist/Layer/useLayer.d.ts.map +1 -1
  156. package/dist/Layer/useLayer.js +31 -44
  157. package/dist/Layout/Layout.js +21 -21
  158. package/dist/Layout/LayoutContent.js +3 -3
  159. package/dist/Layout/LayoutFooter.js +5 -5
  160. package/dist/Layout/LayoutHeader.js +5 -5
  161. package/dist/Layout/LayoutPanel.js +3 -3
  162. package/dist/Lightbox/Lightbox.d.ts.map +1 -1
  163. package/dist/Lightbox/Lightbox.js +31 -55
  164. package/dist/Lightbox/useLightbox.js +3 -3
  165. package/dist/Link/Link.js +15 -15
  166. package/dist/Link/LinkProvider.js +3 -3
  167. package/dist/Link/useLinkify.js +3 -3
  168. package/dist/List/List.js +11 -11
  169. package/dist/List/ListItem.js +11 -11
  170. package/dist/Markdown/Markdown.d.ts.map +1 -1
  171. package/dist/Markdown/Markdown.js +102 -102
  172. package/dist/MetadataList/MetadataList.js +10 -10
  173. package/dist/MetadataList/MetadataListItem.js +15 -15
  174. package/dist/MobileNav/MobileNav.d.ts +1 -1
  175. package/dist/MobileNav/MobileNav.d.ts.map +1 -1
  176. package/dist/MobileNav/MobileNav.js +23 -26
  177. package/dist/MobileNav/MobileNavToggle.js +5 -5
  178. package/dist/MoreMenu/MoreMenu.js +3 -3
  179. package/dist/MultiSelector/MultiSelector.js +56 -56
  180. package/dist/NavIcon/NavIcon.js +3 -3
  181. package/dist/NavMenu/NavHeadingMenu.js +5 -5
  182. package/dist/NavMenu/NavHeadingMenuItem.js +8 -8
  183. package/dist/NumberInput/NumberInput.d.ts.map +1 -1
  184. package/dist/NumberInput/NumberInput.js +32 -48
  185. package/dist/Outline/Outline.js +15 -15
  186. package/dist/OverflowList/OverflowList.js +8 -8
  187. package/dist/Overlay/Overlay.js +3 -3
  188. package/dist/Overlay/OverlayScrim.js +5 -5
  189. package/dist/Overlay/useOverlay.js +3 -3
  190. package/dist/Pagination/Pagination.d.ts +1 -1
  191. package/dist/Pagination/Pagination.d.ts.map +1 -1
  192. package/dist/Pagination/Pagination.js +72 -125
  193. package/dist/Popover/Popover.js +16 -16
  194. package/dist/Popover/usePopover.js +7 -7
  195. package/dist/PowerSearch/PowerSearch.d.ts.map +1 -1
  196. package/dist/PowerSearch/PowerSearch.js +92 -110
  197. package/dist/PowerSearch/PowerSearchEditPopover.js +84 -84
  198. package/dist/PowerSearch/PowerSearchFilterEditor.js +3 -3
  199. package/dist/PowerSearch/PowerSearchToken.js +5 -5
  200. package/dist/PowerSearch/PowerSearchValueEditor.js +54 -54
  201. package/dist/ProgressBar/ProgressBar.d.ts.map +1 -1
  202. package/dist/ProgressBar/ProgressBar.js +18 -25
  203. package/dist/RadioList/RadioList.js +7 -7
  204. package/dist/RadioList/RadioListItem.d.ts +1 -1
  205. package/dist/RadioList/RadioListItem.d.ts.map +1 -1
  206. package/dist/RadioList/RadioListItem.js +21 -24
  207. package/dist/Resizable/ResizeHandle.d.ts.map +1 -1
  208. package/dist/Resizable/ResizeHandle.js +10 -28
  209. package/dist/Section/Section.js +5 -5
  210. package/dist/SegmentedControl/SegmentedControl.d.ts +1 -1
  211. package/dist/SegmentedControl/SegmentedControl.d.ts.map +1 -1
  212. package/dist/SegmentedControl/SegmentedControl.js +10 -32
  213. package/dist/SegmentedControl/SegmentedControlItem.d.ts +1 -1
  214. package/dist/SegmentedControl/SegmentedControlItem.d.ts.map +1 -1
  215. package/dist/SegmentedControl/SegmentedControlItem.js +12 -18
  216. package/dist/SelectableCard/SelectableCard.js +5 -5
  217. package/dist/Selector/Selector.js +46 -46
  218. package/dist/Selector/SelectorOption.js +3 -3
  219. package/dist/SideNav/SideNav.d.ts.map +1 -1
  220. package/dist/SideNav/SideNav.js +34 -38
  221. package/dist/SideNav/SideNavCollapseButton.d.ts +1 -1
  222. package/dist/SideNav/SideNavCollapseButton.d.ts.map +1 -1
  223. package/dist/SideNav/SideNavCollapseButton.js +6 -8
  224. package/dist/SideNav/SideNavHeading.js +87 -87
  225. package/dist/SideNav/SideNavItem.js +42 -42
  226. package/dist/SideNav/SideNavSection.d.ts +1 -1
  227. package/dist/SideNav/SideNavSection.d.ts.map +1 -1
  228. package/dist/SideNav/SideNavSection.js +16 -18
  229. package/dist/Skeleton/Skeleton.js +3 -3
  230. package/dist/Slider/Slider.js +23 -23
  231. package/dist/Spinner/Spinner.js +9 -9
  232. package/dist/StatusDot/StatusDot.js +5 -5
  233. package/dist/Switch/Switch.d.ts +4 -8
  234. package/dist/Switch/Switch.d.ts.map +1 -1
  235. package/dist/Switch/Switch.js +29 -34
  236. package/dist/TabList/Tab.js +18 -18
  237. package/dist/TabList/TabList.js +5 -5
  238. package/dist/TabList/TabMenu.d.ts.map +1 -1
  239. package/dist/TabList/TabMenu.js +30 -57
  240. package/dist/TabList/tab.markers.stylex.d.ts +1 -1
  241. package/dist/Table/BaseTable.d.ts.map +1 -1
  242. package/dist/Table/BaseTable.js +39 -50
  243. package/dist/Table/Table.js +7 -7
  244. package/dist/Table/TableBody.d.ts +1 -1
  245. package/dist/Table/TableBody.d.ts.map +1 -1
  246. package/dist/Table/TableBody.js +5 -9
  247. package/dist/Table/TableCell.js +3 -3
  248. package/dist/Table/TableFooter.d.ts +1 -1
  249. package/dist/Table/TableFooter.d.ts.map +1 -1
  250. package/dist/Table/TableFooter.js +5 -9
  251. package/dist/Table/TableHeader.d.ts +1 -1
  252. package/dist/Table/TableHeader.d.ts.map +1 -1
  253. package/dist/Table/TableHeader.js +5 -9
  254. package/dist/Table/TableHeaderCell.js +3 -3
  255. package/dist/Table/TableRow.js +5 -5
  256. package/dist/Table/plugins/columnResize/useTableColumnResize.d.ts.map +1 -1
  257. package/dist/Table/plugins/columnResize/useTableColumnResize.js +11 -14
  258. package/dist/Table/plugins/filtering/useTableFiltering.js +71 -71
  259. package/dist/Table/plugins/pagination/paginateData.d.ts.map +1 -1
  260. package/dist/Table/plugins/pagination/paginateData.js +1 -5
  261. package/dist/Table/plugins/pagination/useTablePagination.js +7 -7
  262. package/dist/Table/plugins/rowExpansion/useTableRowExpansion.js +22 -22
  263. package/dist/Table/plugins/selection/useTableSelection.js +18 -18
  264. package/dist/Table/plugins/selection/useTableSelectionState.d.ts.map +1 -1
  265. package/dist/Table/plugins/selection/useTableSelectionState.js +1 -11
  266. package/dist/Table/plugins/sortable/useTableSortable.js +17 -17
  267. package/dist/Table/plugins/sortable/useTableSortableState.d.ts.map +1 -1
  268. package/dist/Table/plugins/sortable/useTableSortableState.js +4 -8
  269. package/dist/Table/tableContextMenu.js +9 -9
  270. package/dist/Text/Text.js +10 -10
  271. package/dist/TextArea/TextArea.js +14 -14
  272. package/dist/TextInput/TextInput.js +15 -15
  273. package/dist/Thumbnail/Thumbnail.d.ts +2 -3
  274. package/dist/Thumbnail/Thumbnail.d.ts.map +1 -1
  275. package/dist/Thumbnail/Thumbnail.js +29 -30
  276. package/dist/TimeInput/TimeInput.d.ts.map +1 -1
  277. package/dist/TimeInput/TimeInput.js +21 -26
  278. package/dist/Timestamp/Timestamp.d.ts +1 -1
  279. package/dist/Timestamp/Timestamp.d.ts.map +1 -1
  280. package/dist/Timestamp/Timestamp.js +26 -37
  281. package/dist/Toast/Toast.d.ts.map +1 -1
  282. package/dist/Toast/Toast.js +17 -25
  283. package/dist/Toast/ToastViewport.d.ts.map +1 -1
  284. package/dist/Toast/ToastViewport.js +11 -23
  285. package/dist/Toast/useToast.d.ts.map +1 -1
  286. package/dist/Toast/useToast.js +4 -44
  287. package/dist/ToggleButton/ToggleButton.js +12 -12
  288. package/dist/ToggleButton/ToggleButtonGroup.js +5 -5
  289. package/dist/Token/Token.js +21 -21
  290. package/dist/Tokenizer/Tokenizer.d.ts.map +1 -1
  291. package/dist/Tokenizer/Tokenizer.js +34 -36
  292. package/dist/Toolbar/Toolbar.js +18 -18
  293. package/dist/Tooltip/Tooltip.js +11 -11
  294. package/dist/Tooltip/useTooltip.d.ts +1 -5
  295. package/dist/Tooltip/useTooltip.d.ts.map +1 -1
  296. package/dist/Tooltip/useTooltip.js +3 -3
  297. package/dist/TopNav/TopNav.js +32 -32
  298. package/dist/TopNav/TopNavHeading.js +67 -67
  299. package/dist/TopNav/TopNavItem.js +5 -5
  300. package/dist/TopNav/TopNavMegaMenu.js +30 -30
  301. package/dist/TopNav/TopNavMegaMenuFeaturedCard.d.ts +1 -1
  302. package/dist/TopNav/TopNavMegaMenuFeaturedCard.d.ts.map +1 -1
  303. package/dist/TopNav/TopNavMegaMenuFeaturedCard.js +14 -25
  304. package/dist/TopNav/TopNavMegaMenuItem.js +16 -16
  305. package/dist/TopNav/TopNavMenu.js +32 -32
  306. package/dist/TreeList/TreeList.js +8 -8
  307. package/dist/TreeList/TreeListBranches.js +11 -11
  308. package/dist/TreeList/TreeListItem.js +30 -30
  309. package/dist/Typeahead/BaseTypeahead.d.ts.map +1 -1
  310. package/dist/Typeahead/BaseTypeahead.js +20 -23
  311. package/dist/Typeahead/Typeahead.js +12 -12
  312. package/dist/Typeahead/TypeaheadItem.js +10 -10
  313. package/dist/VStack/VStack.js +3 -3
  314. package/dist/astryx.css +0 -7
  315. package/dist/astryx.umd.js +59 -59
  316. package/dist/astryx.umd.js.map +4 -4
  317. package/dist/docs-types.d.ts +2 -8
  318. package/dist/docs-types.d.ts.map +1 -1
  319. package/dist/hooks/focusableSelector.d.ts +1 -1
  320. package/dist/hooks/focusableSelector.d.ts.map +1 -1
  321. package/dist/hooks/focusableSelector.js +1 -1
  322. package/dist/hooks/index.d.ts +0 -2
  323. package/dist/hooks/index.d.ts.map +1 -1
  324. package/dist/hooks/index.js +0 -1
  325. package/dist/hooks/useFocusTrap.d.ts +0 -3
  326. package/dist/hooks/useFocusTrap.d.ts.map +1 -1
  327. package/dist/hooks/useFocusTrap.js +1 -38
  328. package/dist/hooks/useInteractiveRole.d.ts +2 -6
  329. package/dist/hooks/useInteractiveRole.d.ts.map +1 -1
  330. package/dist/hooks/useInteractiveRole.js +2 -6
  331. package/dist/hooks/useKeyboardHint.js +9 -9
  332. package/dist/hooks/useStreamingText.d.ts +1 -3
  333. package/dist/hooks/useStreamingText.d.ts.map +1 -1
  334. package/dist/hooks/useStreamingText.js +5 -14
  335. package/dist/theme/MediaTheme.js +3 -3
  336. package/dist/theme/Theme.js +7 -7
  337. package/dist/theme/defineTheme.d.ts +1 -1
  338. package/dist/theme/defineTheme.d.ts.map +1 -1
  339. package/dist/theme/expandColorScale.d.ts.map +1 -1
  340. package/dist/theme/expandColorScale.js +3 -10
  341. package/dist/theme/hct.d.ts +15 -0
  342. package/dist/theme/hct.d.ts.map +1 -1
  343. package/dist/theme/hct.js +9 -9
  344. package/dist/theme/syntax/SyntaxTheme.js +5 -5
  345. package/dist/theme/tokens.d.ts +2 -10
  346. package/dist/theme/tokens.d.ts.map +1 -1
  347. package/dist/theme/tokens.js +4 -220
  348. package/dist/theme/useTheme.d.ts +2 -3
  349. package/dist/theme/useTheme.d.ts.map +1 -1
  350. package/dist/theme/useTheme.js +6 -73
  351. package/dist/utils/index.d.ts +0 -3
  352. package/dist/utils/index.d.ts.map +1 -1
  353. package/dist/utils/index.js +1 -3
  354. package/dist/utils/timeParser.d.ts.map +1 -1
  355. package/dist/utils/timeParser.js +5 -8
  356. package/package.json +3 -3
  357. package/src/AlertDialog/AlertDialog.doc.mjs +0 -4
  358. package/src/AlertDialog/AlertDialog.tsx +0 -2
  359. package/src/AppShell/AppShell.tsx +0 -2
  360. package/src/AspectRatio/AspectRatio.doc.mjs +1 -28
  361. package/src/AspectRatio/AspectRatio.test.tsx +1 -142
  362. package/src/AspectRatio/AspectRatio.tsx +10 -70
  363. package/src/AspectRatio/index.ts +1 -5
  364. package/src/Avatar/Avatar.doc.mjs +0 -11
  365. package/src/Avatar/Avatar.test.tsx +1 -32
  366. package/src/Avatar/Avatar.tsx +20 -12
  367. package/src/AvatarGroup/AvatarGroup.doc.mjs +0 -1
  368. package/src/Banner/Banner.doc.mjs +0 -8
  369. package/src/Banner/Banner.test.tsx +0 -38
  370. package/src/Banner/Banner.tsx +1 -8
  371. package/src/Calendar/Calendar.doc.mjs +1 -1
  372. package/src/Calendar/Calendar.test.tsx +17 -122
  373. package/src/Calendar/Calendar.tsx +5 -26
  374. package/src/Calendar/dayCellUtils.ts +1 -3
  375. package/src/Calendar/styles.ts +2 -12
  376. package/src/Card/Card.doc.mjs +1 -1
  377. package/src/Card/Card.tsx +6 -16
  378. package/src/Carousel/Carousel.doc.mjs +12 -12
  379. package/src/Carousel/Carousel.test.tsx +0 -13
  380. package/src/Carousel/Carousel.tsx +2 -4
  381. package/src/Carousel/carousel.markers.stylex.ts +10 -0
  382. package/src/Chat/Chat.doc.mjs +1 -1
  383. package/src/Chat/ChatComposerInput.test.tsx +1 -27
  384. package/src/Chat/ChatComposerInput.tsx +15 -20
  385. package/src/Chat/ChatDictationButton.tsx +4 -4
  386. package/src/Chat/ChatLayoutScrollButton.tsx +1 -3
  387. package/src/Chat/ChatMessageMetadata.tsx +6 -4
  388. package/src/Chat/ChatSystemMessage.test.tsx +11 -26
  389. package/src/Chat/ChatSystemMessage.tsx +7 -7
  390. package/src/Chat/ChatTokenizedText.test.tsx +16 -29
  391. package/src/Chat/ChatTokenizedText.tsx +8 -15
  392. package/src/Chat/ChatToolCalls.test.tsx +0 -55
  393. package/src/Chat/ChatToolCalls.tsx +12 -10
  394. package/src/Chat/index.ts +4 -1
  395. package/src/Chat/useTriggerMenu.tsx +4 -1
  396. package/src/CheckboxInput/CheckboxInput.doc.mjs +3 -3
  397. package/src/CheckboxInput/CheckboxInput.test.tsx +4 -71
  398. package/src/CheckboxInput/CheckboxInput.tsx +0 -2
  399. package/src/CheckboxList/CheckboxList.test.tsx +0 -19
  400. package/src/CheckboxList/CheckboxListItem.tsx +2 -11
  401. package/src/Citation/Citation.doc.mjs +0 -5
  402. package/src/ClickableCard/ClickableCard.tsx +2 -45
  403. package/src/CodeBlock/CodeBlock.doc.mjs +2 -7
  404. package/src/CodeBlock/CodeBlock.test.tsx +3 -122
  405. package/src/CodeBlock/CodeBlock.tsx +4 -62
  406. package/src/Collapsible/Collapsible.doc.mjs +4 -8
  407. package/src/Collapsible/Collapsible.tsx +10 -86
  408. package/src/Collapsible/CollapsibleGroup.doc.mjs +3 -27
  409. package/src/Collapsible/CollapsibleGroup.test.tsx +0 -318
  410. package/src/Collapsible/CollapsibleGroup.tsx +9 -107
  411. package/src/Collapsible/CollapsibleGroupContext.tsx +2 -42
  412. package/src/Collapsible/index.ts +0 -4
  413. package/src/Collapsible/useCollapsible.ts +6 -20
  414. package/src/CommandPalette/CommandPalette.doc.mjs +0 -5
  415. package/src/CommandPalette/CommandPalette.tsx +3 -5
  416. package/src/CommandPalette/CommandPaletteEmpty.doc.mjs +0 -5
  417. package/src/CommandPalette/CommandPaletteGroup.doc.mjs +0 -10
  418. package/src/CommandPalette/CommandPaletteInput.doc.mjs +0 -6
  419. package/src/CommandPalette/CommandPaletteItem.doc.mjs +0 -6
  420. package/src/CommandPalette/CommandPaletteList.doc.mjs +0 -9
  421. package/src/ContextMenu/ContextMenu.doc.mjs +0 -15
  422. package/src/ContextMenu/ContextMenu.test.tsx +0 -87
  423. package/src/ContextMenu/ContextMenu.tsx +28 -87
  424. package/src/ContextMenu/ContextMenuItem.doc.mjs +0 -6
  425. package/src/DateInput/DateInput.test.tsx +20 -11
  426. package/src/DateRangeInput/DateRangeInput.test.tsx +44 -31
  427. package/src/DateTimeInput/DateTimeInput.doc.mjs +2 -3
  428. package/src/DateTimeInput/DateTimeInput.test.tsx +16 -118
  429. package/src/DateTimeInput/DateTimeInput.tsx +2 -8
  430. package/src/DateTimeInput/index.ts +0 -1
  431. package/src/Dialog/Dialog.doc.mjs +0 -4
  432. package/src/Dialog/DialogHeader.doc.mjs +0 -45
  433. package/src/DropdownMenu/DropdownMenu.doc.mjs +1 -1
  434. package/src/DropdownMenu/DropdownMenu.test.tsx +2 -22
  435. package/src/DropdownMenu/DropdownMenuItem.tsx +17 -5
  436. package/src/EmptyState/EmptyState.doc.mjs +1 -1
  437. package/src/Field/Field.test.tsx +4 -1
  438. package/src/Field/FieldLabel.test.tsx +2 -2
  439. package/src/FormLayout/__snapshots__/FormLayout.test.tsx.snap +3 -0
  440. package/src/Grid/Grid.test.tsx +18 -43
  441. package/src/Grid/Grid.tsx +9 -26
  442. package/src/HoverCard/HoverCard.doc.mjs +6 -6
  443. package/src/HoverCard/useHoverCard.doc.mjs +5 -5
  444. package/src/HoverCard/useHoverCard.tsx +2 -9
  445. package/src/Icon/Icon.test.tsx +29 -41
  446. package/src/Icon/Icon.tsx +2 -6
  447. package/src/InputGroup/InputGroup.doc.mjs +0 -1
  448. package/src/InputGroup/InputGroup.tsx +2 -2
  449. package/src/Item/Item.tsx +1 -1
  450. package/src/Layer/useLayer.doc.mjs +2 -2
  451. package/src/Layer/useLayer.test.tsx +2 -221
  452. package/src/Layer/useLayer.tsx +30 -69
  453. package/src/Layout/LayoutContent.doc.mjs +0 -12
  454. package/src/Layout/LayoutPanel.doc.mjs +0 -40
  455. package/src/Lightbox/Lightbox.doc.mjs +0 -5
  456. package/src/Lightbox/Lightbox.test.tsx +2 -123
  457. package/src/Lightbox/Lightbox.tsx +1 -29
  458. package/src/Markdown/Markdown.tsx +7 -9
  459. package/src/Markdown/parser.perf.test.ts +12 -34
  460. package/src/MobileNav/MobileNav.test.tsx +0 -56
  461. package/src/MobileNav/MobileNav.tsx +8 -13
  462. package/src/NavMenu/NavMenu.doc.mjs +0 -15
  463. package/src/NumberInput/NumberInput.test.tsx +3 -48
  464. package/src/NumberInput/NumberInput.tsx +15 -32
  465. package/src/Outline/Outline.doc.mjs +0 -2
  466. package/src/Overlay/Overlay.doc.mjs +0 -6
  467. package/src/Pagination/Pagination.test.tsx +0 -162
  468. package/src/Pagination/Pagination.tsx +26 -80
  469. package/src/Popover/Popover.doc.mjs +6 -6
  470. package/src/Popover/Popover.test.tsx +0 -65
  471. package/src/Popover/usePopover.doc.mjs +1 -1
  472. package/src/PowerSearch/PowerSearch.doc.mjs +2 -2
  473. package/src/PowerSearch/PowerSearch.test.tsx +1 -109
  474. package/src/PowerSearch/PowerSearch.tsx +16 -37
  475. package/src/ProgressBar/ProgressBar.doc.mjs +0 -2
  476. package/src/ProgressBar/ProgressBar.test.tsx +0 -30
  477. package/src/ProgressBar/ProgressBar.tsx +5 -12
  478. package/src/RadioList/RadioList.test.tsx +0 -19
  479. package/src/RadioList/RadioListItem.tsx +4 -9
  480. package/src/Resizable/ResizeHandle.tsx +4 -22
  481. package/src/SegmentedControl/SegmentedControl.doc.mjs +1 -1
  482. package/src/SegmentedControl/SegmentedControl.test.tsx +0 -192
  483. package/src/SegmentedControl/SegmentedControl.tsx +5 -27
  484. package/src/SegmentedControl/SegmentedControlItem.tsx +4 -9
  485. package/src/SelectableCard/SelectableCard.doc.mjs +1 -1
  486. package/src/Selector/Selector.test.tsx +1 -27
  487. package/src/SideNav/SideNav.doc.mjs +1 -7
  488. package/src/SideNav/SideNav.test.tsx +0 -66
  489. package/src/SideNav/SideNav.tsx +2 -6
  490. package/src/SideNav/SideNavCollapseButton.tsx +3 -4
  491. package/src/SideNav/SideNavSection.tsx +4 -6
  492. package/src/Switch/Switch.doc.mjs +7 -7
  493. package/src/Switch/Switch.test.tsx +3 -102
  494. package/src/Switch/Switch.tsx +7 -20
  495. package/src/TabList/TabList.test.tsx +1 -185
  496. package/src/TabList/TabMenu.tsx +9 -45
  497. package/src/Table/BaseTable.tsx +2 -13
  498. package/src/Table/Table.doc.mjs +0 -5
  499. package/src/Table/Table.test.tsx +0 -87
  500. package/src/Table/TableBody.tsx +2 -15
  501. package/src/Table/TableFooter.tsx +2 -15
  502. package/src/Table/TableHeader.tsx +2 -15
  503. package/src/Table/plugins/columnResize/useTableColumnResize.test.tsx +0 -13
  504. package/src/Table/plugins/columnResize/useTableColumnResize.tsx +1 -3
  505. package/src/Table/plugins/pagination/paginateData.ts +1 -5
  506. package/src/Table/plugins/pagination/useTablePagination.test.tsx +0 -13
  507. package/src/Table/plugins/selection/useTableSelectionState.test.tsx +0 -23
  508. package/src/Table/plugins/selection/useTableSelectionState.tsx +6 -11
  509. package/src/Table/plugins/sortable/useTableSortableState.test.tsx +1 -35
  510. package/src/Table/plugins/sortable/useTableSortableState.tsx +4 -8
  511. package/src/TextArea/TextArea.test.tsx +3 -3
  512. package/src/TextInput/TextInput.test.tsx +3 -3
  513. package/src/Thumbnail/Thumbnail.test.tsx +2 -36
  514. package/src/Thumbnail/Thumbnail.tsx +2 -4
  515. package/src/TimeInput/TimeInput.test.tsx +0 -37
  516. package/src/TimeInput/TimeInput.tsx +1 -11
  517. package/src/Timestamp/Timestamp.doc.mjs +1 -1
  518. package/src/Timestamp/Timestamp.test.tsx +0 -52
  519. package/src/Timestamp/Timestamp.tsx +16 -30
  520. package/src/Toast/Toast.tsx +3 -11
  521. package/src/Toast/ToastViewport.test.tsx +0 -64
  522. package/src/Toast/ToastViewport.tsx +0 -12
  523. package/src/Toast/useToast.tsx +0 -41
  524. package/src/ToggleButton/ToggleButton.doc.mjs +0 -1
  525. package/src/Tokenizer/Tokenizer.doc.mjs +2 -2
  526. package/src/Tokenizer/Tokenizer.test.tsx +0 -54
  527. package/src/Tokenizer/Tokenizer.tsx +4 -5
  528. package/src/Tooltip/Tooltip.doc.mjs +6 -6
  529. package/src/Tooltip/useTooltip.doc.mjs +5 -5
  530. package/src/Tooltip/useTooltip.tsx +2 -12
  531. package/src/TopNav/TopNav.doc.mjs +1 -1
  532. package/src/TopNav/TopNav.test.tsx +7 -23
  533. package/src/TopNav/TopNavMegaMenuFeaturedCard.tsx +2 -9
  534. package/src/TreeList/TreeList.doc.mjs +2 -2
  535. package/src/Typeahead/BaseTypeahead.doc.mjs +0 -19
  536. package/src/Typeahead/BaseTypeahead.tsx +2 -5
  537. package/src/Typeahead/Typeahead.doc.mjs +1 -1
  538. package/src/Typeahead/Typeahead.test.tsx +1 -45
  539. package/src/docs-types.ts +1 -9
  540. package/src/hooks/focusableSelector.ts +1 -1
  541. package/src/hooks/index.ts +0 -3
  542. package/src/hooks/useFocusTrap.doc.mjs +2 -4
  543. package/src/hooks/useFocusTrap.test.tsx +1 -149
  544. package/src/hooks/useFocusTrap.ts +1 -50
  545. package/src/hooks/useInteractiveRole.ts +4 -12
  546. package/src/hooks/useStreamingText.test.ts +19 -54
  547. package/src/hooks/useStreamingText.ts +5 -16
  548. package/src/hooks/useTreeFocus.test.tsx +3 -1
  549. package/src/reset.css +0 -29
  550. package/src/theme/SyntaxTheme.doc.mjs +4 -4
  551. package/src/theme/defineTheme.ts +13 -4
  552. package/src/theme/derivedVarRegistry.test.ts +2 -2
  553. package/src/theme/expandColorScale.test.ts +0 -29
  554. package/src/theme/expandColorScale.ts +6 -11
  555. package/src/theme/hct.ts +17 -9
  556. package/src/theme/tokens.test.ts +9 -182
  557. package/src/theme/tokens.ts +4 -239
  558. package/src/theme/useTheme.test.tsx +2 -126
  559. package/src/theme/useTheme.ts +6 -87
  560. package/src/utils/index.ts +0 -4
  561. package/src/utils/sharedResizeObserver.test.ts +2 -2
  562. package/src/utils/timeParser.test.ts +0 -13
  563. package/src/utils/timeParser.ts +5 -8
  564. package/dist/hooks/useHotkeys.d.ts +0 -51
  565. package/dist/hooks/useHotkeys.d.ts.map +0 -1
  566. package/dist/hooks/useHotkeys.js +0 -160
  567. package/dist/utils/color.d.ts +0 -42
  568. package/dist/utils/color.d.ts.map +0 -1
  569. package/dist/utils/color.js +0 -150
  570. package/dist/utils/composeEventHandlers.d.ts +0 -30
  571. package/dist/utils/composeEventHandlers.d.ts.map +0 -1
  572. package/dist/utils/composeEventHandlers.js +0 -40
  573. package/src/Chat/ChatDictationButton.test.tsx +0 -43
  574. package/src/Chat/ChatLayoutScrollButton.test.tsx +0 -33
  575. package/src/Chat/ChatMessageMetadata.test.tsx +0 -32
  576. package/src/Collapsible/Collapsible.test.tsx +0 -405
  577. package/src/FieldStatus/FieldStatus.test.tsx +0 -282
  578. package/src/InteractiveRoleContext/InteractiveRoleContext.test.tsx +0 -185
  579. package/src/Layout/Layout.test.tsx +0 -285
  580. package/src/Layout/LayoutSlots.test.tsx +0 -364
  581. package/src/Outline/parseOutlineFromMarkdown.test.ts +0 -80
  582. package/src/OverflowList/OverflowList.test.tsx +0 -416
  583. package/src/Overlay/Overlay.test.tsx +0 -356
  584. package/src/Resizable/ResizeHandle.test.tsx +0 -218
  585. package/src/SizeContext/SizeContext.test.tsx +0 -226
  586. package/src/Toast/useToast.test.tsx +0 -258
  587. package/src/__tests__/TestIcon.tsx +0 -26
  588. package/src/__tests__/fastRoleQueries.ts +0 -66
  589. package/src/docPropReferences.test.ts +0 -178
  590. package/src/hooks/useHotkeys.doc.mjs +0 -52
  591. package/src/hooks/useHotkeys.test.ts +0 -245
  592. package/src/hooks/useHotkeys.ts +0 -203
  593. package/src/theme/themingTargets.test.ts +0 -353
  594. package/src/utils/color.test.ts +0 -133
  595. package/src/utils/color.ts +0 -148
  596. package/src/utils/composeEventHandlers.test.ts +0 -71
  597. package/src/utils/composeEventHandlers.ts +0 -44
  598. package/src/utils/mergeProps.test.ts +0 -166
package/src/ContextMenu/ContextMenu.tsx CHANGED
@@ -3,16 +3,11 @@
3
3
 
4
4
  /**
5
5
  * @file ContextMenu.tsx
6
- * @input Uses React, StyleX, useLayer (context mode), useListFocus
6
+ * @input Uses React, StyleX, useLayer (fixed mode), useListFocus
7
7
  * @output Exports ContextMenu component
8
8
  * @position Core implementation; consumed by index.ts
9
9
  *
10
- * Right-click context menu positioned at the cursor. The cursor point is
11
- * captured as an offset *inside the trigger* and materialized as a zero-size
12
- * anchor element, so the menu is positioned relative to the trigger's context
13
- * (via CSS anchor positioning) rather than the viewport. It therefore follows
14
- * the content on scroll and auto-flips at viewport edges, while still appearing
15
- * under the cursor.
10
+ * Right-click context menu positioned at cursor coordinates.
16
11
  * Reuses DropdownMenu item rendering and keyboard navigation.
17
12
  *
18
13
  * Supports two content modes with a single keyboard/focus path:
@@ -58,7 +53,7 @@ import {
58
53
  easeVars,
59
54
  shadowVars,
60
55
  } from '../theme/tokens.stylex';
61
- import {mergeProps, mergeRefs} from '../utils';
56
+ import {mergeProps} from '../utils';
62
57
  import type {BaseProps} from '../BaseProps';
63
58
  import type {StyleXStyles} from '../theme/types';
64
59
  import {themeProps} from '../utils/themeProps';
@@ -72,23 +67,9 @@ import type {
72
67
  const styles = stylex.create({
73
68
  // Trigger wrapper: suppress the iOS long-press callout/selection so the
74
69
  // long-press opens our context menu instead of the native text/callout UI.
75
- // `position: relative` establishes the containing block for the absolutely
76
- // positioned cursor anchor below, so the anchor point tracks the trigger
77
- // (and scrolls with it) instead of the page.
78
70
  trigger: {
79
- position: 'relative',
80
71
  WebkitTouchCallout: 'none',
81
72
  },
82
- // Zero-size anchor placed at the cursor point within the trigger. The menu
83
- // is anchored to this element, so it sits under the cursor yet is positioned
84
- // relative to the trigger's context — it follows the content on scroll and
85
- // the browser can auto-flip it against the viewport edges.
86
- cursorAnchor: {
87
- position: 'absolute',
88
- width: 0,
89
- height: 0,
90
- pointerEvents: 'none',
91
- },
92
73
  menu: {
93
74
  boxSizing: 'border-box',
94
75
  display: 'flex',
@@ -106,7 +87,6 @@ const styles = stylex.create({
106
87
  transitionProperty: 'opacity',
107
88
  transitionDuration: durationVars['--duration-fast'],
108
89
  transitionTimingFunction: easeVars['--ease-standard'],
109
- userSelect: 'none',
110
90
  },
111
91
  popover: {
112
92
  minWidth: '160px',
@@ -220,13 +200,7 @@ export function ContextMenu({
220
200
  const menuContent = 'menuContent' in props ? props.menuContent : undefined;
221
201
 
222
202
  const menuId = useId();
223
- // Cursor point in the trigger's local coordinate space (offset from the
224
- // trigger's top-left, in-flow). Stored here and written to the zero-size
225
- // anchor element so the menu is positioned relative to the trigger context
226
- // — it scrolls with the content instead of sitting at a fixed viewport point.
227
203
  const positionRef = useRef({x: 0, y: 0});
228
- const cursorAnchorRef = useRef<HTMLSpanElement>(null);
229
- const triggerRef = useRef<HTMLDivElement>(null);
230
204
  // Element focused before the menu opened, restored when it closes so focus
231
205
  // does not fall to <body> after Escape or outside-click dismissal.
232
206
  const triggerFocusRef = useRef<HTMLElement | null>(null);
@@ -234,7 +208,7 @@ export function ContextMenu({
234
208
  const [isOpen, setIsOpen] = useState(false);
235
209
 
236
210
  const layer = useLayer({
237
- mode: 'context',
211
+ mode: 'fixed',
238
212
  onHide: useCallback(() => {
239
213
  setIsOpen(false);
240
214
  onOpenChange?.(false);
@@ -352,53 +326,34 @@ export function ContextMenu({
352
326
  [listNavKeyDown, typeahead],
353
327
  );
354
328
 
355
- // Place the zero-size cursor anchor at a point in the trigger's local
356
- // coordinate space and open the menu. Positioning the anchor inside the
357
- // trigger (rather than storing viewport coordinates on the menu itself) is
358
- // what makes the menu context-relative: it scrolls with the content and the
359
- // browser auto-flips it against the viewport edges via CSS anchor positioning.
360
- const openAtLocalPoint = useCallback(
361
- (localX: number, localY: number, focusEl: HTMLElement | null) => {
362
- positionRef.current = {x: localX, y: localY};
363
- const anchorEl = cursorAnchorRef.current;
364
- if (anchorEl) {
365
- anchorEl.style.left = `${localX}px`;
366
- anchorEl.style.top = `${localY}px`;
367
- }
368
- // Remember the element focused before opening so we can restore it on
369
- // close (Escape or outside-click), instead of dropping focus to <body>.
370
- triggerFocusRef.current =
371
- document.activeElement instanceof HTMLElement
372
- ? document.activeElement
373
- : focusEl;
374
- layer.show();
375
- requestAnimationFrame(() => focusFirst());
376
- },
377
- [layer, focusFirst],
378
- );
379
-
380
329
  const handleContextMenu = useCallback(
381
330
  (e: React.MouseEvent) => {
382
331
  if (isDisabled) {
383
332
  return;
384
333
  }
385
334
  e.preventDefault();
386
- const trigger = triggerRef.current;
387
- const rect = trigger?.getBoundingClientRect();
388
335
  // A keyboard-initiated contextmenu (Shift+F10 / the Menu key) fires a
389
336
  // `contextmenu` event whose coordinates are (0, 0) in several browsers.
390
- // Detect that and anchor the menu to the trigger's bottom-left instead,
391
- // so the menu is reachable without a pointer (menus-8).
337
+ // Detect that and anchor the menu to the trigger's box instead, so the
338
+ // menu is reachable without a pointer (menus-8).
392
339
  const isKeyboardInvoked =
393
340
  e.clientX === 0 && e.clientY === 0 && e.detail === 0;
394
- // Convert the viewport cursor point into the trigger's local space so
395
- // the anchor lives inside the (scrollable) trigger context.
396
- const localX = isKeyboardInvoked || !rect ? 0 : e.clientX - rect.left;
397
- const localY =
398
- isKeyboardInvoked || !rect ? (rect?.height ?? 0) : e.clientY - rect.top;
399
- openAtLocalPoint(localX, localY, e.currentTarget as HTMLElement);
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};
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());
400
355
  },
401
- [isDisabled, openAtLocalPoint],
356
+ [isDisabled, layer, focusFirst],
402
357
  );
403
358
 
404
359
  // Touch long-press invocation (menus-8). iOS Safari never synthesizes a
@@ -409,14 +364,11 @@ export function ContextMenu({
409
364
  disabled: isDisabled,
410
365
  onLongPress: useCallback(
411
366
  (point: {x: number; y: number}) => {
412
- const rect = triggerRef.current?.getBoundingClientRect();
413
- openAtLocalPoint(
414
- rect ? point.x - rect.left : point.x,
415
- rect ? point.y - rect.top : point.y,
416
- triggerRef.current,
417
- );
367
+ positionRef.current = {x: point.x, y: point.y};
368
+ layer.show();
369
+ requestAnimationFrame(() => focusFirst());
418
370
  },
419
- [openAtLocalPoint],
371
+ [layer, focusFirst],
420
372
  ),
421
373
  });
422
374
 
@@ -435,7 +387,7 @@ export function ContextMenu({
435
387
  return (
436
388
  <>
437
389
  <div
438
- ref={mergeRefs(ref, triggerRef)}
390
+ ref={ref}
439
391
  onContextMenu={handleContextMenu}
440
392
  {...longPressHandlers}
441
393
  data-testid={testId}
@@ -448,16 +400,6 @@ export function ContextMenu({
448
400
  : []),
449
401
  )}>
450
402
  {children}
451
- <span
452
- ref={mergeRefs(cursorAnchorRef, layer.ref)}
453
- aria-hidden="true"
454
- {...mergeProps(stylex.props(styles.cursorAnchor), {
455
- style: {
456
- left: `${positionRef.current.x}px`,
457
- top: `${positionRef.current.y}px`,
458
- },
459
- })}
460
- />
461
403
  </div>
462
404
 
463
405
  {layer.render(
@@ -467,7 +409,6 @@ export function ContextMenu({
467
409
  role="menu"
468
410
  aria-label={label}
469
411
  onKeyDown={listKeyDown}
470
- onContextMenu={e => e.preventDefault()}
471
412
  {...mergeProps(
472
413
  themeProps('context-menu'),
473
414
  stylex.props(styles.menu, xstyle),
@@ -479,8 +420,8 @@ export function ContextMenu({
479
420
  </DropdownMenuContext>
480
421
  </div>,
481
422
  {
482
- placement: 'below',
483
- alignment: 'start',
423
+ x: positionRef.current.x,
424
+ y: positionRef.current.y,
484
425
  xstyle: [popoverXstyle, layerAnimations.below],
485
426
  },
486
427
  )}
package/src/ContextMenu/ContextMenuItem.doc.mjs CHANGED
@@ -35,12 +35,6 @@ export const docs = {
35
35
  description: 'StyleX styles for layout customization.',
36
36
  },
37
37
  ],
38
- playground: {
39
- defaults: {
40
- label: 'Edit',
41
- description: 'Modify this item',
42
- },
43
- },
44
38
  };
45
39
 
46
40
  export const docsZh = {
package/src/DateInput/DateInput.test.tsx CHANGED
@@ -12,7 +12,6 @@
12
12
  import {describe, it, expect, vi, beforeEach} from 'vitest';
13
13
  import {render, screen, fireEvent, waitFor} from '@testing-library/react';
14
14
  import userEvent from '@testing-library/user-event';
15
- import {getButton, queryButton} from '../__tests__/fastRoleQueries';
16
15
  import {DateInput} from './DateInput';
17
16
  import {InputGroup} from '../InputGroup';
18
17
  import {InputGroupText} from '../InputGroup/InputGroupText';
@@ -93,14 +92,14 @@ describe('DateInput', () => {
93
92
 
94
93
  it('calendar button is focusable and clickable', () => {
95
94
  render(<DateInput label="Date" onChange={() => {}} />);
96
- const button = getButton('Open calendar');
95
+ const button = screen.getByRole('button', {name: 'Open calendar'});
97
96
  expect(button).toBeInTheDocument();
98
97
  expect(button).not.toBeDisabled();
99
98
  });
100
99
 
101
100
  it('calendar button is disabled when isDisabled is true', () => {
102
101
  render(<DateInput label="Date" isDisabled onChange={() => {}} />);
103
- const button = getButton('Open calendar');
102
+ const button = screen.getByRole('button', {name: 'Open calendar'});
104
103
  expect(button).toBeDisabled();
105
104
  });
106
105
 
@@ -283,7 +282,7 @@ describe('DateInput', () => {
283
282
  it('disables input and button when isLoading is true', () => {
284
283
  render(<DateInput label="Date" isLoading onChange={() => {}} />);
285
284
  expect(screen.getByRole('combobox')).toBeDisabled();
286
- expect(getButton('Open calendar')).toBeDisabled();
285
+ expect(screen.getByRole('button', {name: 'Open calendar'})).toBeDisabled();
287
286
  });
288
287
 
289
288
  it('shows spinner when isLoading is true', () => {
@@ -476,7 +475,7 @@ describe('DateInput', () => {
476
475
 
477
476
  it('does not open popover when clicking calendar button while disabled', () => {
478
477
  render(<DateInput label="Date" isDisabled onChange={() => {}} />);
479
- const button = getButton('Open calendar');
478
+ const button = screen.getByRole('button', {name: 'Open calendar'});
480
479
  fireEvent.click(button);
481
480
  expect(screen.getByRole('combobox')).toHaveAttribute(
482
481
  'aria-expanded',
@@ -514,17 +513,23 @@ describe('DateInput', () => {
514
513
  hasClear
515
514
  />,
516
515
  );
517
- expect(getButton('Clear Date')).toBeInTheDocument();
516
+ expect(
517
+ screen.getByRole('button', {name: 'Clear Date'}),
518
+ ).toBeInTheDocument();
518
519
  });
519
520
 
520
521
  it('does not show clear button when value is undefined', () => {
521
522
  render(<DateInput label="Date" onChange={() => {}} hasClear />);
522
- expect(queryButton('Clear Date')).not.toBeInTheDocument();
523
+ expect(
524
+ screen.queryByRole('button', {name: 'Clear Date'}),
525
+ ).not.toBeInTheDocument();
523
526
  });
524
527
 
525
528
  it('does not show clear button when hasClear is false', () => {
526
529
  render(<DateInput label="Date" value="2026-01-15" onChange={() => {}} />);
527
- expect(queryButton('Clear Date')).not.toBeInTheDocument();
530
+ expect(
531
+ screen.queryByRole('button', {name: 'Clear Date'}),
532
+ ).not.toBeInTheDocument();
528
533
  });
529
534
 
530
535
  it('does not show clear button when disabled', () => {
@@ -537,7 +542,9 @@ describe('DateInput', () => {
537
542
  isDisabled
538
543
  />,
539
544
  );
540
- expect(queryButton('Clear Date')).not.toBeInTheDocument();
545
+ expect(
546
+ screen.queryByRole('button', {name: 'Clear Date'}),
547
+ ).not.toBeInTheDocument();
541
548
  });
542
549
 
543
550
  it('calls onChange with undefined when clear is clicked', () => {
@@ -550,7 +557,7 @@ describe('DateInput', () => {
550
557
  hasClear
551
558
  />,
552
559
  );
553
- fireEvent.click(getButton('Clear Date'));
560
+ fireEvent.click(screen.getByRole('button', {name: 'Clear Date'}));
554
561
  expect(onChange).toHaveBeenCalledWith(undefined);
555
562
  });
556
563
  });
@@ -692,7 +699,9 @@ describe('DateInput', () => {
692
699
  expect(input).toHaveAttribute('aria-disabled', 'true');
693
700
  expect(input.getAttribute('aria-describedby')).toContain(tooltip.id);
694
701
  expect(tooltip).toHaveTextContent('Scheduling is locked');
695
- expect(getButton('Open calendar')).toBeDisabled();
702
+ expect(
703
+ screen.getByRole('button', {name: 'Open calendar'}),
704
+ ).toBeDisabled();
696
705
  });
697
706
  });
698
707
 
package/src/DateRangeInput/DateRangeInput.test.tsx CHANGED
@@ -12,11 +12,6 @@
12
12
  import {describe, it, expect, vi, beforeEach} from 'vitest';
13
13
  import {render, screen, fireEvent, waitFor} from '@testing-library/react';
14
14
  import userEvent from '@testing-library/user-event';
15
- // getButton/queryButton instead of getByRole('button', {name}): the closed
16
- // popover keeps a two-month Calendar (~85 role=button nodes) mounted, which
17
- // made every role+name query compute ~85 accessible names through jsdom's
18
- // slow getComputedStyle (~450ms per query). See fastRoleQueries.ts.
19
- import {getButton, queryButton} from '../__tests__/fastRoleQueries';
20
15
  import {DateRangeInput} from './DateRangeInput';
21
16
  import type {DateRange} from './DateRangeInput';
22
17
 
@@ -58,7 +53,7 @@ describe('DateRangeInput', () => {
58
53
  hasClear={false}
59
54
  />,
60
55
  );
61
- const trigger = getButton(/Range:/);
56
+ const trigger = screen.getByRole('button', {name: /Range:/});
62
57
  expect(trigger.textContent).toMatch(/Mar/);
63
58
  expect(trigger.textContent).toMatch(/15/);
64
59
  expect(trigger.textContent).toMatch(/22/);
@@ -98,13 +93,13 @@ describe('DateRangeInput', () => {
98
93
  onChange={() => {}}
99
94
  />,
100
95
  );
101
- const trigger = getButton(/Range/);
96
+ const trigger = screen.getByRole('button', {name: /Range/});
102
97
  expect(trigger).toHaveAttribute('aria-required', 'true');
103
98
  });
104
99
 
105
100
  it('does not set aria-required when isRequired is false', () => {
106
101
  render(<DateRangeInput label="Range" value={null} onChange={() => {}} />);
107
- const trigger = getButton(/Range/);
102
+ const trigger = screen.getByRole('button', {name: /Range/});
108
103
  expect(trigger).not.toHaveAttribute('aria-required');
109
104
  });
110
105
 
@@ -117,25 +112,25 @@ describe('DateRangeInput', () => {
117
112
  onChange={() => {}}
118
113
  />,
119
114
  );
120
- const trigger = getButton(/Range/);
115
+ const trigger = screen.getByRole('button', {name: /Range/});
121
116
  expect(trigger).toBeDisabled();
122
117
  });
123
118
 
124
119
  it('is not disabled by default', () => {
125
120
  render(<DateRangeInput label="Range" value={null} onChange={() => {}} />);
126
- const trigger = getButton(/Range/);
121
+ const trigger = screen.getByRole('button', {name: /Range/});
127
122
  expect(trigger).not.toBeDisabled();
128
123
  });
129
124
 
130
125
  it('trigger has aria-haspopup="dialog"', () => {
131
126
  render(<DateRangeInput label="Range" value={null} onChange={() => {}} />);
132
- const trigger = getButton(/Range/);
127
+ const trigger = screen.getByRole('button', {name: /Range/});
133
128
  expect(trigger).toHaveAttribute('aria-haspopup', 'dialog');
134
129
  });
135
130
 
136
131
  it('trigger has aria-expanded=false by default', () => {
137
132
  render(<DateRangeInput label="Range" value={null} onChange={() => {}} />);
138
- const trigger = getButton(/Range/);
133
+ const trigger = screen.getByRole('button', {name: /Range/});
139
134
  expect(trigger).toHaveAttribute('aria-expanded', 'false');
140
135
  });
141
136
 
@@ -148,7 +143,7 @@ describe('DateRangeInput', () => {
148
143
  status={{type: 'error', message: 'Required'}}
149
144
  />,
150
145
  );
151
- const trigger = getButton(/Range/);
146
+ const trigger = screen.getByRole('button', {name: /Range/});
152
147
  expect(trigger).toHaveAttribute('aria-invalid', 'true');
153
148
  });
154
149
 
@@ -161,7 +156,7 @@ describe('DateRangeInput', () => {
161
156
  status={{type: 'warning', message: 'Watch out'}}
162
157
  />,
163
158
  );
164
- const trigger = getButton(/Range/);
159
+ const trigger = screen.getByRole('button', {name: /Range/});
165
160
  expect(trigger).not.toHaveAttribute('aria-invalid');
166
161
  });
167
162
 
@@ -186,7 +181,7 @@ describe('DateRangeInput', () => {
186
181
  status={{type: 'error', message: 'Please select dates'}}
187
182
  />,
188
183
  );
189
- const trigger = getButton(/Range/);
184
+ const trigger = screen.getByRole('button', {name: /Range/});
190
185
  const describedBy = trigger.getAttribute('aria-describedby')!;
191
186
  const ids = describedBy.split(' ');
192
187
  const found = ids.some(id => {
@@ -198,7 +193,9 @@ describe('DateRangeInput', () => {
198
193
 
199
194
  it('calendar icon button is present', () => {
200
195
  render(<DateRangeInput label="Range" value={null} onChange={() => {}} />);
201
- expect(getButton('Open calendar')).toBeInTheDocument();
196
+ expect(
197
+ screen.getByRole('button', {name: 'Open calendar'}),
198
+ ).toBeInTheDocument();
202
199
  });
203
200
 
204
201
  it('calendar icon button is disabled when isDisabled', () => {
@@ -210,7 +207,7 @@ describe('DateRangeInput', () => {
210
207
  onChange={() => {}}
211
208
  />,
212
209
  );
213
- expect(getButton('Open calendar')).toBeDisabled();
210
+ expect(screen.getByRole('button', {name: 'Open calendar'})).toBeDisabled();
214
211
  });
215
212
 
216
213
  it('renders with size="lg"', () => {
@@ -239,7 +236,9 @@ describe('DateRangeInput', () => {
239
236
  hasClear
240
237
  />,
241
238
  );
242
- expect(getButton('Clear Range')).toBeInTheDocument();
239
+ expect(
240
+ screen.getByRole('button', {name: 'Clear Range'}),
241
+ ).toBeInTheDocument();
243
242
  });
244
243
 
245
244
  it('does not show clear button when value is null', () => {
@@ -251,7 +250,9 @@ describe('DateRangeInput', () => {
251
250
  hasClear
252
251
  />,
253
252
  );
254
- expect(queryButton('Clear Range')).not.toBeInTheDocument();
253
+ expect(
254
+ screen.queryByRole('button', {name: 'Clear Range'}),
255
+ ).not.toBeInTheDocument();
255
256
  });
256
257
 
257
258
  it('does not show clear button when hasClear is false', () => {
@@ -267,7 +268,9 @@ describe('DateRangeInput', () => {
267
268
  hasClear={false}
268
269
  />,
269
270
  );
270
- expect(queryButton('Clear Range')).not.toBeInTheDocument();
271
+ expect(
272
+ screen.queryByRole('button', {name: 'Clear Range'}),
273
+ ).not.toBeInTheDocument();
271
274
  });
272
275
 
273
276
  it('does not show clear button when disabled', () => {
@@ -284,7 +287,9 @@ describe('DateRangeInput', () => {
284
287
  isDisabled
285
288
  />,
286
289
  );
287
- expect(queryButton('Clear Range')).not.toBeInTheDocument();
290
+ expect(
291
+ screen.queryByRole('button', {name: 'Clear Range'}),
292
+ ).not.toBeInTheDocument();
288
293
  });
289
294
 
290
295
  it('calls onChange with null when clear is clicked', () => {
@@ -301,7 +306,7 @@ describe('DateRangeInput', () => {
301
306
  hasClear
302
307
  />,
303
308
  );
304
- fireEvent.click(getButton('Clear Range'));
309
+ fireEvent.click(screen.getByRole('button', {name: 'Clear Range'}));
305
310
  expect(onChange).toHaveBeenCalledWith(null);
306
311
  });
307
312
  });
@@ -341,7 +346,9 @@ describe('DateRangeInput', () => {
341
346
  expect(
342
347
  screen.getByRole('group', {name: 'Preset date ranges', hidden: true}),
343
348
  ).toBeInTheDocument();
344
- expect(getButton('Last 7 days')).toBeInTheDocument();
349
+ expect(
350
+ screen.getByRole('button', {name: 'Last 7 days', hidden: true}),
351
+ ).toBeInTheDocument();
345
352
  });
346
353
 
347
354
  it('marks the applied preset with aria-current, not aria-selected', () => {
@@ -353,10 +360,16 @@ describe('DateRangeInput', () => {
353
360
  presets={presets}
354
361
  />,
355
362
  );
356
- const active = getButton('Last 7 days');
363
+ const active = screen.getByRole('button', {
364
+ name: 'Last 7 days',
365
+ hidden: true,
366
+ });
357
367
  expect(active).toHaveAttribute('aria-current', 'true');
358
368
  expect(active).not.toHaveAttribute('aria-selected');
359
- const inactive = getButton('This month');
369
+ const inactive = screen.getByRole('button', {
370
+ name: 'This month',
371
+ hidden: true,
372
+ });
360
373
  expect(inactive).not.toHaveAttribute('aria-current');
361
374
  });
362
375
  });
@@ -392,7 +405,7 @@ describe('DateRangeInput', () => {
392
405
  it('shows the reason tooltip on hover when disabled with a reason', async () => {
393
406
  renderDisabled({disabledMessage: 'You need the Editor role'});
394
407
 
395
- const trigger = getButton(/Range:/);
408
+ const trigger = screen.getByRole('button', {name: /Range:/, ...h});
396
409
  const container = trigger.parentElement as HTMLElement;
397
410
  const tooltip = screen.getByRole('tooltip', h);
398
411
  expect(tooltip).toHaveTextContent('You need the Editor role');
@@ -414,7 +427,7 @@ describe('DateRangeInput', () => {
414
427
 
415
428
  const tooltip = screen.getByRole('tooltip', h);
416
429
  await user.tab();
417
- expect(getButton(/Range:/)).toHaveFocus();
430
+ expect(screen.getByRole('button', {name: /Range:/, ...h})).toHaveFocus();
418
431
  await waitFor(() => {
419
432
  expect(tooltip).toHaveAttribute('popover-open');
420
433
  });
@@ -439,14 +452,14 @@ describe('DateRangeInput', () => {
439
452
 
440
453
  it('keeps the trigger focusable via aria-disabled when a reason is provided', () => {
441
454
  renderDisabled({disabledMessage: 'You need the Editor role'});
442
- const trigger = getButton(/Range:/);
455
+ const trigger = screen.getByRole('button', {name: /Range:/, ...h});
443
456
  expect(trigger).not.toBeDisabled();
444
457
  expect(trigger).toHaveAttribute('aria-disabled', 'true');
445
458
  });
446
459
 
447
460
  it('links the reason tooltip from the trigger via aria-describedby', () => {
448
461
  renderDisabled({disabledMessage: 'You need the Editor role'});
449
- const trigger = getButton(/Range:/);
462
+ const trigger = screen.getByRole('button', {name: /Range:/, ...h});
450
463
  const tooltip = screen.getByRole('tooltip', h);
451
464
  expect(trigger.getAttribute('aria-describedby')).toContain(tooltip.id);
452
465
  });
@@ -455,7 +468,7 @@ describe('DateRangeInput', () => {
455
468
  const user = userEvent.setup();
456
469
  renderDisabled({disabledMessage: 'You need the Editor role'});
457
470
 
458
- const trigger = getButton(/Range:/);
471
+ const trigger = screen.getByRole('button', {name: /Range:/, ...h});
459
472
  await user.click(trigger);
460
473
  expect(trigger).toHaveAttribute('aria-expanded', 'false');
461
474
 
@@ -465,7 +478,7 @@ describe('DateRangeInput', () => {
465
478
 
466
479
  it('remains natively disabled when disabled without a reason', () => {
467
480
  renderDisabled();
468
- const trigger = getButton(/Range:/);
481
+ const trigger = screen.getByRole('button', {name: /Range:/, ...h});
469
482
  expect(trigger).toBeDisabled();
470
483
  expect(trigger).not.toHaveAttribute('aria-disabled');
471
484
  });
package/src/DateTimeInput/DateTimeInput.doc.mjs CHANGED
@@ -118,7 +118,7 @@ export const docs = {
118
118
  },
119
119
  {
120
120
  name: 'timeIncrement',
121
- type: '1 | 5 | 10 | 15 | 30',
121
+ type: 'number',
122
122
  description:
123
123
  'Minutes to add or subtract when using arrow keys in the time input.',
124
124
  default: '1',
@@ -413,7 +413,7 @@ export const docsZh = {
413
413
  },
414
414
  {
415
415
  name: 'timeIncrement',
416
- type: '1 | 5 | 10 | 15 | 30',
416
+ type: 'number',
417
417
  description: '在时间输入中按箭头键时增减的分钟数。',
418
418
  default: '1',
419
419
  },
@@ -469,7 +469,6 @@ export const docsZh = {
469
469
  description:
470
470
  '用于布局自定义的 StyleX 样式。必须是 stylex.create() 的值。',
471
471
  },
472
-
473
472
  ],
474
473
  theming: {
475
474
  targets: [