@astryxdesign/core 0.3.0 → 0.4.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (551) hide show
  1. package/CHANGELOG.md +156 -0
  2. package/dist/AlertDialog/AlertDialog.d.ts +10 -2
  3. package/dist/AlertDialog/AlertDialog.d.ts.map +1 -1
  4. package/dist/AlertDialog/AlertDialog.js +22 -3
  5. package/dist/AppShell/AppShell.d.ts +2 -2
  6. package/dist/AppShell/AppShell.d.ts.map +1 -1
  7. package/dist/AppShell/AppShell.js +40 -9
  8. package/dist/AspectRatio/AspectRatio.d.ts +13 -0
  9. package/dist/AspectRatio/AspectRatio.d.ts.map +1 -1
  10. package/dist/AspectRatio/AspectRatio.js +9 -0
  11. package/dist/Avatar/Avatar.d.ts.map +1 -1
  12. package/dist/Avatar/Avatar.js +33 -20
  13. package/dist/AvatarGroup/AvatarGroupOverflow.d.ts.map +1 -1
  14. package/dist/AvatarGroup/AvatarGroupOverflow.js +2 -3
  15. package/dist/Banner/Banner.d.ts.map +1 -1
  16. package/dist/Banner/Banner.js +15 -14
  17. package/dist/Breadcrumbs/BreadcrumbItem.d.ts.map +1 -1
  18. package/dist/Breadcrumbs/BreadcrumbItem.js +21 -8
  19. package/dist/Breadcrumbs/index.d.ts +2 -1
  20. package/dist/Breadcrumbs/index.d.ts.map +1 -1
  21. package/dist/Breadcrumbs/index.js +1 -0
  22. package/dist/Button/Button.d.ts.map +1 -1
  23. package/dist/Button/Button.js +11 -15
  24. package/dist/Calendar/Calendar.d.ts.map +1 -1
  25. package/dist/Calendar/Calendar.js +2 -1
  26. package/dist/Calendar/styles.d.ts +0 -2
  27. package/dist/Calendar/styles.d.ts.map +1 -1
  28. package/dist/Calendar/styles.js +0 -2
  29. package/dist/Carousel/Carousel.d.ts.map +1 -1
  30. package/dist/Carousel/Carousel.js +8 -12
  31. package/dist/Chat/ChatDictationButton.d.ts.map +1 -1
  32. package/dist/Chat/ChatDictationButton.js +2 -1
  33. package/dist/Chat/ChatLayoutScrollButton.d.ts.map +1 -1
  34. package/dist/Chat/ChatLayoutScrollButton.js +3 -1
  35. package/dist/Chat/ChatSendButton.d.ts.map +1 -1
  36. package/dist/Chat/ChatSendButton.js +4 -3
  37. package/dist/Chat/ChatToolCalls.d.ts.map +1 -1
  38. package/dist/Chat/ChatToolCalls.js +17 -17
  39. package/dist/Chat/useTriggerMenu.d.ts.map +1 -1
  40. package/dist/Chat/useTriggerMenu.js +2 -6
  41. package/dist/CheckboxInput/CheckboxInput.d.ts.map +1 -1
  42. package/dist/CheckboxInput/CheckboxInput.js +36 -125
  43. package/dist/ClickableCard/ClickableCard.d.ts.map +1 -1
  44. package/dist/ClickableCard/ClickableCard.js +3 -11
  45. package/dist/CodeBlock/CodeBlock.d.ts.map +1 -1
  46. package/dist/CodeBlock/CodeBlock.js +84 -67
  47. package/dist/Collapsible/Collapsible.d.ts.map +1 -1
  48. package/dist/Collapsible/Collapsible.js +35 -15
  49. package/dist/CommandPalette/CommandPaletteItem.d.ts +1 -1
  50. package/dist/CommandPalette/CommandPaletteItem.d.ts.map +1 -1
  51. package/dist/CommandPalette/CommandPaletteItem.js +6 -3
  52. package/dist/CommandPalette/CommandPaletteList.js +1 -1
  53. package/dist/ComplexSelector/ComplexSelector.d.ts +1 -1
  54. package/dist/ComplexSelector/ComplexSelector.d.ts.map +1 -1
  55. package/dist/ComplexSelector/ComplexSelector.js +35 -33
  56. package/dist/ContextMenu/ContextMenu.d.ts +2 -2
  57. package/dist/ContextMenu/ContextMenu.d.ts.map +1 -1
  58. package/dist/ContextMenu/ContextMenu.js +1 -1
  59. package/dist/ContextMenu/index.d.ts +2 -1
  60. package/dist/ContextMenu/index.d.ts.map +1 -1
  61. package/dist/ContextMenu/index.js +1 -0
  62. package/dist/DateInput/DateInput.d.ts +9 -2
  63. package/dist/DateInput/DateInput.d.ts.map +1 -1
  64. package/dist/DateInput/DateInput.js +24 -23
  65. package/dist/DateRangeInput/DateRangeInput.d.ts +9 -2
  66. package/dist/DateRangeInput/DateRangeInput.d.ts.map +1 -1
  67. package/dist/DateRangeInput/DateRangeInput.js +11 -16
  68. package/dist/DateTimeInput/DateTimeInput.d.ts +9 -1
  69. package/dist/DateTimeInput/DateTimeInput.d.ts.map +1 -1
  70. package/dist/DateTimeInput/DateTimeInput.js +22 -17
  71. package/dist/Dialog/Dialog.d.ts.map +1 -1
  72. package/dist/Dialog/Dialog.js +4 -4
  73. package/dist/DropdownMenu/DropdownMenu.d.ts +33 -8
  74. package/dist/DropdownMenu/DropdownMenu.d.ts.map +1 -1
  75. package/dist/DropdownMenu/DropdownMenu.js +62 -20
  76. package/dist/DropdownMenu/DropdownMenuCheckboxItem.d.ts +8 -11
  77. package/dist/DropdownMenu/DropdownMenuCheckboxItem.d.ts.map +1 -1
  78. package/dist/DropdownMenu/DropdownMenuCheckboxItem.js +32 -31
  79. package/dist/DropdownMenu/DropdownMenuDivider.d.ts +25 -0
  80. package/dist/DropdownMenu/DropdownMenuDivider.d.ts.map +1 -0
  81. package/dist/DropdownMenu/DropdownMenuDivider.js +66 -0
  82. package/dist/DropdownMenu/DropdownMenuItem.d.ts +15 -2
  83. package/dist/DropdownMenu/DropdownMenuItem.d.ts.map +1 -1
  84. package/dist/DropdownMenu/DropdownMenuItem.js +20 -8
  85. package/dist/DropdownMenu/DropdownMenuRadioItem.d.ts +5 -5
  86. package/dist/DropdownMenu/DropdownMenuRadioItem.d.ts.map +1 -1
  87. package/dist/DropdownMenu/DropdownMenuRadioItem.js +24 -67
  88. package/dist/DropdownMenu/DropdownMenuSubMenu.d.ts.map +1 -1
  89. package/dist/DropdownMenu/DropdownMenuSubMenu.js +2 -8
  90. package/dist/DropdownMenu/index.d.ts +2 -1
  91. package/dist/DropdownMenu/index.d.ts.map +1 -1
  92. package/dist/DropdownMenu/index.js +4 -0
  93. package/dist/DropdownMenu/renderDropdownItems.d.ts.map +1 -1
  94. package/dist/DropdownMenu/renderDropdownItems.js +35 -27
  95. package/dist/EmptyState/EmptyState.d.ts.map +1 -1
  96. package/dist/EmptyState/EmptyState.js +9 -5
  97. package/dist/Field/InputClearButton.d.ts +16 -3
  98. package/dist/Field/InputClearButton.d.ts.map +1 -1
  99. package/dist/Field/InputClearButton.js +15 -4
  100. package/dist/HoverCard/useHoverCard.d.ts.map +1 -1
  101. package/dist/HoverCard/useHoverCard.js +3 -19
  102. package/dist/Indicator/CheckIndicator.d.ts +25 -0
  103. package/dist/Indicator/CheckIndicator.d.ts.map +1 -0
  104. package/dist/Indicator/CheckIndicator.js +155 -0
  105. package/dist/Indicator/CheckboxIndicator.d.ts +22 -0
  106. package/dist/Indicator/CheckboxIndicator.d.ts.map +1 -0
  107. package/dist/Indicator/CheckboxIndicator.js +173 -0
  108. package/dist/Indicator/RadioIndicator.d.ts +23 -0
  109. package/dist/Indicator/RadioIndicator.d.ts.map +1 -0
  110. package/dist/Indicator/RadioIndicator.js +137 -0
  111. package/dist/Indicator/index.d.ts +24 -0
  112. package/dist/Indicator/index.d.ts.map +1 -0
  113. package/dist/Indicator/index.js +26 -0
  114. package/dist/Indicator/indicator.markers.stylex.d.ts +16 -0
  115. package/dist/Indicator/indicator.markers.stylex.d.ts.map +1 -0
  116. package/dist/Indicator/indicator.markers.stylex.js +21 -0
  117. package/dist/Indicator/indicatorRegistry.d.ts +71 -0
  118. package/dist/Indicator/indicatorRegistry.d.ts.map +1 -0
  119. package/dist/Indicator/indicatorRegistry.js +93 -0
  120. package/dist/Indicator/types.d.ts +167 -0
  121. package/dist/Indicator/types.d.ts.map +1 -0
  122. package/dist/Indicator/types.js +1 -0
  123. package/dist/Indicator/useIndicator.d.ts +18 -0
  124. package/dist/Indicator/useIndicator.d.ts.map +1 -0
  125. package/dist/Indicator/useIndicator.js +30 -0
  126. package/dist/Item/Item.d.ts.map +1 -1
  127. package/dist/Item/Item.js +4 -8
  128. package/dist/Layer/useLayer.d.ts +14 -0
  129. package/dist/Layer/useLayer.d.ts.map +1 -1
  130. package/dist/Layer/useLayer.js +25 -2
  131. package/dist/Lightbox/Lightbox.d.ts.map +1 -1
  132. package/dist/Lightbox/Lightbox.js +56 -53
  133. package/dist/Link/Link.d.ts.map +1 -1
  134. package/dist/Link/Link.js +4 -5
  135. package/dist/MobileNav/MobileNav.js +8 -8
  136. package/dist/MoreMenu/MoreMenu.d.ts +14 -1
  137. package/dist/MoreMenu/MoreMenu.d.ts.map +1 -1
  138. package/dist/MoreMenu/MoreMenu.js +4 -0
  139. package/dist/MultiSelector/MultiSelector.d.ts.map +1 -1
  140. package/dist/MultiSelector/MultiSelector.js +78 -75
  141. package/dist/NumberInput/NumberInput.d.ts +27 -1
  142. package/dist/NumberInput/NumberInput.d.ts.map +1 -1
  143. package/dist/NumberInput/NumberInput.js +230 -42
  144. package/dist/Outline/Outline.d.ts.map +1 -1
  145. package/dist/Outline/Outline.js +2 -3
  146. package/dist/Pagination/Pagination.d.ts.map +1 -1
  147. package/dist/Pagination/Pagination.js +61 -63
  148. package/dist/Popover/Popover.d.ts.map +1 -1
  149. package/dist/Popover/Popover.js +6 -8
  150. package/dist/PowerSearch/PowerSearch.d.ts.map +1 -1
  151. package/dist/PowerSearch/PowerSearch.js +1 -1
  152. package/dist/PowerSearch/PowerSearchEditPopover.d.ts.map +1 -1
  153. package/dist/PowerSearch/PowerSearchEditPopover.js +7 -0
  154. package/dist/ProgressBar/ProgressBar.d.ts +11 -4
  155. package/dist/ProgressBar/ProgressBar.d.ts.map +1 -1
  156. package/dist/ProgressBar/ProgressBar.js +96 -6
  157. package/dist/RadioList/RadioListItem.d.ts.map +1 -1
  158. package/dist/RadioList/RadioListItem.js +29 -84
  159. package/dist/Resizable/ResizeHandle.d.ts.map +1 -1
  160. package/dist/Resizable/ResizeHandle.js +2 -3
  161. package/dist/SegmentedControl/SegmentedControlItem.d.ts.map +1 -1
  162. package/dist/SegmentedControl/SegmentedControlItem.js +2 -3
  163. package/dist/SelectableCard/SelectableCard.d.ts.map +1 -1
  164. package/dist/SelectableCard/SelectableCard.js +3 -11
  165. package/dist/Selector/Selector.d.ts +2 -1
  166. package/dist/Selector/Selector.d.ts.map +1 -1
  167. package/dist/Selector/Selector.js +164 -94
  168. package/dist/Selector/hooks.d.ts +18 -6
  169. package/dist/Selector/hooks.d.ts.map +1 -1
  170. package/dist/Selector/hooks.js +57 -40
  171. package/dist/SideNav/SideNav.d.ts.map +1 -1
  172. package/dist/SideNav/SideNav.js +1 -1
  173. package/dist/SideNav/SideNavCollapseButton.d.ts +1 -1
  174. package/dist/SideNav/SideNavCollapseButton.d.ts.map +1 -1
  175. package/dist/SideNav/SideNavCollapseButton.js +29 -14
  176. package/dist/SideNav/SideNavHeading.d.ts.map +1 -1
  177. package/dist/SideNav/SideNavHeading.js +56 -20
  178. package/dist/SideNav/SideNavItem.d.ts.map +1 -1
  179. package/dist/SideNav/SideNavItem.js +28 -22
  180. package/dist/Stack/stack.stylex.d.ts +3 -3
  181. package/dist/Switch/Switch.js +11 -10
  182. package/dist/TabList/Tab.d.ts.map +1 -1
  183. package/dist/TabList/Tab.js +2 -3
  184. package/dist/TabList/TabMenu.d.ts.map +1 -1
  185. package/dist/TabList/TabMenu.js +41 -19
  186. package/dist/Table/BaseTable.d.ts.map +1 -1
  187. package/dist/Table/BaseTable.js +8 -0
  188. package/dist/Table/index.d.ts +1 -1
  189. package/dist/Table/index.d.ts.map +1 -1
  190. package/dist/Table/index.js +1 -1
  191. package/dist/Table/plugins/groupedRows/useTableGroupedRows.d.ts +1 -1
  192. package/dist/Table/plugins/groupedRows/useTableGroupedRows.d.ts.map +1 -1
  193. package/dist/Table/plugins/groupedRows/useTableGroupedRows.js +22 -18
  194. package/dist/Table/plugins/rowExpansion/index.d.ts +1 -1
  195. package/dist/Table/plugins/rowExpansion/index.d.ts.map +1 -1
  196. package/dist/Table/plugins/rowExpansion/index.js +1 -1
  197. package/dist/Table/plugins/rowExpansion/useTableRowExpansion.d.ts +41 -76
  198. package/dist/Table/plugins/rowExpansion/useTableRowExpansion.d.ts.map +1 -1
  199. package/dist/Table/plugins/rowExpansion/useTableRowExpansion.js +94 -345
  200. package/dist/Table/plugins/sortable/useTableSortable.d.ts.map +1 -1
  201. package/dist/Table/plugins/sortable/useTableSortable.js +23 -4
  202. package/dist/Table/plugins/tree/useTableTreeData.d.ts.map +1 -1
  203. package/dist/Table/plugins/tree/useTableTreeData.js +29 -33
  204. package/dist/Table/tableContextMenu.d.ts.map +1 -1
  205. package/dist/Table/tableContextMenu.js +2 -1
  206. package/dist/Table/types.d.ts +11 -0
  207. package/dist/Table/types.d.ts.map +1 -1
  208. package/dist/TextArea/TextArea.d.ts +10 -1
  209. package/dist/TextArea/TextArea.d.ts.map +1 -1
  210. package/dist/TextArea/TextArea.js +16 -6
  211. package/dist/TextInput/TextInput.d.ts +10 -1
  212. package/dist/TextInput/TextInput.d.ts.map +1 -1
  213. package/dist/TextInput/TextInput.js +13 -19
  214. package/dist/Thumbnail/Thumbnail.d.ts.map +1 -1
  215. package/dist/Thumbnail/Thumbnail.js +32 -26
  216. package/dist/TimeInput/TimeInput.d.ts.map +1 -1
  217. package/dist/TimeInput/TimeInput.js +7 -15
  218. package/dist/Timestamp/TimestampHoverCard.d.ts.map +1 -1
  219. package/dist/Timestamp/TimestampHoverCard.js +16 -34
  220. package/dist/Token/Token.d.ts.map +1 -1
  221. package/dist/Token/Token.js +20 -11
  222. package/dist/Tokenizer/Tokenizer.d.ts.map +1 -1
  223. package/dist/Tokenizer/Tokenizer.js +4 -2
  224. package/dist/Tooltip/useTooltip.d.ts.map +1 -1
  225. package/dist/Tooltip/useTooltip.js +3 -19
  226. package/dist/TopNav/TopNav.d.ts.map +1 -1
  227. package/dist/TopNav/TopNav.js +6 -5
  228. package/dist/TopNav/TopNavHeading.d.ts.map +1 -1
  229. package/dist/TopNav/TopNavHeading.js +54 -16
  230. package/dist/TopNav/TopNavItem.d.ts.map +1 -1
  231. package/dist/TopNav/TopNavItem.js +3 -9
  232. package/dist/TopNav/TopNavMegaMenu.d.ts +7 -0
  233. package/dist/TopNav/TopNavMegaMenu.d.ts.map +1 -1
  234. package/dist/TopNav/TopNavMegaMenu.js +146 -60
  235. package/dist/TopNav/TopNavMegaMenuItem.d.ts.map +1 -1
  236. package/dist/TopNav/TopNavMegaMenuItem.js +22 -3
  237. package/dist/TopNav/TopNavMenu.d.ts.map +1 -1
  238. package/dist/TopNav/TopNavMenu.js +83 -38
  239. package/dist/TreeList/TreeList.d.ts.map +1 -1
  240. package/dist/TreeList/TreeList.js +13 -0
  241. package/dist/TreeList/TreeListBranches.d.ts +1 -1
  242. package/dist/TreeList/TreeListBranches.d.ts.map +1 -1
  243. package/dist/TreeList/TreeListBranches.js +14 -4
  244. package/dist/TreeList/TreeListItem.d.ts +11 -1
  245. package/dist/TreeList/TreeListItem.d.ts.map +1 -1
  246. package/dist/TreeList/TreeListItem.js +57 -30
  247. package/dist/Typeahead/BaseTypeahead.d.ts.map +1 -1
  248. package/dist/Typeahead/BaseTypeahead.js +16 -8
  249. package/dist/astryx.css +74 -85
  250. package/dist/astryx.umd.js +56 -56
  251. package/dist/astryx.umd.js.map +4 -4
  252. package/dist/hooks/containerReveal.stylex.d.ts +61 -0
  253. package/dist/hooks/containerReveal.stylex.d.ts.map +1 -0
  254. package/dist/hooks/containerReveal.stylex.js +63 -0
  255. package/dist/hooks/index.d.ts +3 -0
  256. package/dist/hooks/index.d.ts.map +1 -1
  257. package/dist/hooks/index.js +2 -0
  258. package/dist/hooks/useClipboard.d.ts +59 -0
  259. package/dist/hooks/useClipboard.d.ts.map +1 -0
  260. package/dist/hooks/useClipboard.js +106 -0
  261. package/dist/hooks/useContainerReveal.d.ts +14 -8
  262. package/dist/hooks/useContainerReveal.d.ts.map +1 -1
  263. package/dist/hooks/useContainerReveal.js +28 -69
  264. package/dist/hooks/useIndicatorFocusRing.d.ts +28 -0
  265. package/dist/hooks/useIndicatorFocusRing.d.ts.map +1 -0
  266. package/dist/hooks/useIndicatorFocusRing.js +96 -0
  267. package/dist/hooks/useLongPress.d.ts.map +1 -1
  268. package/dist/hooks/useLongPress.js +12 -2
  269. package/dist/hooks/useScrollLock.d.ts.map +1 -1
  270. package/dist/hooks/useScrollLock.js +33 -18
  271. package/dist/hooks/useStreamingText.d.ts +18 -3
  272. package/dist/hooks/useStreamingText.d.ts.map +1 -1
  273. package/dist/hooks/useStreamingText.js +47 -7
  274. package/dist/hooks/useTreeFocus.d.ts.map +1 -1
  275. package/dist/hooks/useTreeFocus.js +9 -3
  276. package/dist/hooks/useTypeahead.d.ts +3 -2
  277. package/dist/hooks/useTypeahead.d.ts.map +1 -1
  278. package/dist/hooks/useTypeahead.js +19 -7
  279. package/dist/index.d.ts +1 -0
  280. package/dist/index.d.ts.map +1 -1
  281. package/dist/index.js +1 -0
  282. package/dist/theme/defineTheme.d.ts +16 -0
  283. package/dist/theme/defineTheme.d.ts.map +1 -1
  284. package/dist/theme/defineTheme.js +8 -0
  285. package/dist/theme/derivedVarRegistry.d.ts +8 -0
  286. package/dist/theme/derivedVarRegistry.d.ts.map +1 -1
  287. package/dist/theme/derivedVarRegistry.js +14 -13
  288. package/dist/theme/expandColorScale.d.ts +3 -1
  289. package/dist/theme/expandColorScale.d.ts.map +1 -1
  290. package/dist/theme/expandColorScale.js +17 -7
  291. package/dist/theme/expandTypeScale.d.ts.map +1 -1
  292. package/dist/theme/expandTypeScale.js +17 -0
  293. package/dist/theme/generateThemeRules.d.ts.map +1 -1
  294. package/dist/theme/generateThemeRules.js +11 -0
  295. package/dist/theme/index.d.ts +1 -0
  296. package/dist/theme/index.d.ts.map +1 -1
  297. package/dist/utils/focusOutline.stylex.d.ts +107 -0
  298. package/dist/utils/focusOutline.stylex.d.ts.map +1 -0
  299. package/dist/utils/focusOutline.stylex.js +130 -0
  300. package/dist/utils/focusReturn.d.ts +24 -0
  301. package/dist/utils/focusReturn.d.ts.map +1 -0
  302. package/dist/utils/focusReturn.js +29 -0
  303. package/dist/utils/index.d.ts +1 -0
  304. package/dist/utils/index.d.ts.map +1 -1
  305. package/dist/utils/index.js +1 -0
  306. package/dist/utils/mergeRefs.d.ts.map +1 -1
  307. package/dist/utils/mergeRefs.js +7 -5
  308. package/dist/utils/rtlStyles.d.ts +2 -2
  309. package/dist/utils/rtlStyles.js +2 -2
  310. package/dist/utils/themeProps.d.ts +20 -1
  311. package/dist/utils/themeProps.d.ts.map +1 -1
  312. package/dist/utils/themeProps.js +8 -2
  313. package/locales/en.json +12 -0
  314. package/locales/pseudo.json +9 -0
  315. package/package.json +7 -2
  316. package/src/AlertDialog/AlertDialog.doc.mjs +16 -3
  317. package/src/AlertDialog/AlertDialog.test.tsx +208 -1
  318. package/src/AlertDialog/AlertDialog.tsx +21 -3
  319. package/src/AppShell/AppShell.doc.mjs +11 -0
  320. package/src/AppShell/AppShell.test.tsx +139 -0
  321. package/src/AppShell/AppShell.tsx +32 -22
  322. package/src/AspectRatio/AspectRatio.doc.mjs +27 -3
  323. package/src/AspectRatio/AspectRatio.test.tsx +30 -0
  324. package/src/AspectRatio/AspectRatio.tsx +13 -0
  325. package/src/Avatar/Avatar.doc.mjs +2 -13
  326. package/src/Avatar/Avatar.test.tsx +33 -8
  327. package/src/Avatar/Avatar.tsx +52 -50
  328. package/src/AvatarGroup/AvatarGroupOverflow.tsx +2 -9
  329. package/src/Banner/Banner.tsx +9 -6
  330. package/src/Breadcrumbs/BreadcrumbItem.tsx +16 -6
  331. package/src/Breadcrumbs/index.ts +5 -1
  332. package/src/Button/Button.tsx +21 -41
  333. package/src/Calendar/Calendar.tsx +2 -1
  334. package/src/Calendar/styles.ts +0 -8
  335. package/src/Carousel/Carousel.doc.mjs +3 -0
  336. package/src/Carousel/Carousel.tsx +10 -6
  337. package/src/Chat/Chat.doc.mjs +2 -0
  338. package/src/Chat/ChatDictationButton.tsx +7 -1
  339. package/src/Chat/ChatLayoutScrollButton.test.tsx +22 -0
  340. package/src/Chat/ChatLayoutScrollButton.tsx +8 -1
  341. package/src/Chat/ChatSendButton.tsx +2 -3
  342. package/src/Chat/ChatToolCalls.test.tsx +35 -0
  343. package/src/Chat/ChatToolCalls.tsx +36 -16
  344. package/src/Chat/useTriggerMenu.tsx +2 -5
  345. package/src/CheckboxInput/CheckboxInput.doc.mjs +4 -2
  346. package/src/CheckboxInput/CheckboxInput.test.tsx +115 -0
  347. package/src/CheckboxInput/CheckboxInput.tsx +45 -202
  348. package/src/ClickableCard/ClickableCard.tsx +6 -11
  349. package/src/CodeBlock/CodeBlock.doc.mjs +3 -0
  350. package/src/CodeBlock/CodeBlock.test.tsx +91 -0
  351. package/src/CodeBlock/CodeBlock.tsx +57 -80
  352. package/src/Collapsible/Collapsible.tsx +22 -18
  353. package/src/CommandPalette/CommandPalette.test.tsx +29 -0
  354. package/src/CommandPalette/CommandPaletteItem.tsx +7 -4
  355. package/src/CommandPalette/CommandPaletteList.tsx +2 -2
  356. package/src/ComplexSelector/ComplexSelector.doc.mjs +42 -0
  357. package/src/ComplexSelector/ComplexSelector.test.tsx +64 -0
  358. package/src/ComplexSelector/ComplexSelector.tsx +46 -29
  359. package/src/ContextMenu/ContextMenu.doc.mjs +1 -1
  360. package/src/ContextMenu/ContextMenu.test.tsx +41 -0
  361. package/src/ContextMenu/ContextMenu.tsx +3 -3
  362. package/src/ContextMenu/index.ts +5 -1
  363. package/src/DateInput/DateInput.doc.mjs +18 -3
  364. package/src/DateInput/DateInput.test.tsx +93 -11
  365. package/src/DateInput/DateInput.tsx +41 -19
  366. package/src/DateRangeInput/DateRangeInput.doc.mjs +10 -2
  367. package/src/DateRangeInput/DateRangeInput.test.tsx +110 -14
  368. package/src/DateRangeInput/DateRangeInput.tsx +24 -12
  369. package/src/DateTimeInput/DateTimeInput.doc.mjs +16 -2
  370. package/src/DateTimeInput/DateTimeInput.test.tsx +75 -0
  371. package/src/DateTimeInput/DateTimeInput.tsx +35 -8
  372. package/src/Dialog/Dialog.tsx +2 -9
  373. package/src/DropdownMenu/DropdownMenu.doc.mjs +5 -9
  374. package/src/DropdownMenu/DropdownMenu.test.tsx +534 -4
  375. package/src/DropdownMenu/DropdownMenu.tsx +113 -52
  376. package/src/DropdownMenu/DropdownMenuCheckboxItem.tsx +27 -30
  377. package/src/DropdownMenu/DropdownMenuDivider.doc.mjs +34 -0
  378. package/src/DropdownMenu/DropdownMenuDivider.tsx +81 -0
  379. package/src/DropdownMenu/DropdownMenuItem.doc.mjs +39 -4
  380. package/src/DropdownMenu/DropdownMenuItem.tsx +48 -10
  381. package/src/DropdownMenu/DropdownMenuRadioItem.tsx +30 -76
  382. package/src/DropdownMenu/DropdownMenuSelectable.test.tsx +25 -19
  383. package/src/DropdownMenu/DropdownMenuSubMenu.test.tsx +44 -14
  384. package/src/DropdownMenu/DropdownMenuSubMenu.tsx +1 -5
  385. package/src/DropdownMenu/index.ts +8 -1
  386. package/src/DropdownMenu/renderDropdownItems.tsx +33 -34
  387. package/src/EmptyState/EmptyState.doc.mjs +4 -0
  388. package/src/EmptyState/EmptyState.test.tsx +62 -0
  389. package/src/EmptyState/EmptyState.tsx +16 -6
  390. package/src/Field/Field.doc.mjs +1 -0
  391. package/src/Field/InputClearButton.test.tsx +117 -0
  392. package/src/Field/InputClearButton.tsx +30 -3
  393. package/src/HoverCard/useHoverCard.tsx +2 -23
  394. package/src/Icon/Icon.doc.mjs +2 -1
  395. package/src/Indicator/CheckIndicator.tsx +174 -0
  396. package/src/Indicator/CheckboxIndicator.tsx +257 -0
  397. package/src/Indicator/Indicator.doc.mjs +344 -0
  398. package/src/Indicator/Indicator.test.tsx +393 -0
  399. package/src/Indicator/RadioIndicator.tsx +206 -0
  400. package/src/Indicator/index.ts +45 -0
  401. package/src/Indicator/indicator.markers.stylex.ts +19 -0
  402. package/src/Indicator/indicatorRegistry.test.tsx +106 -0
  403. package/src/Indicator/indicatorRegistry.ts +120 -0
  404. package/src/Indicator/types.ts +186 -0
  405. package/src/Indicator/useIndicator.ts +39 -0
  406. package/src/Item/Item.doc.mjs +1 -1
  407. package/src/Item/Item.tsx +7 -14
  408. package/src/Layer/useLayer.doc.mjs +2 -2
  409. package/src/Layer/useLayer.test.tsx +85 -0
  410. package/src/Layer/useLayer.tsx +39 -1
  411. package/src/Lightbox/Lightbox.doc.mjs +1 -1
  412. package/src/Lightbox/Lightbox.tsx +43 -38
  413. package/src/Link/Link.tsx +4 -11
  414. package/src/MobileNav/MobileNav.tsx +3 -3
  415. package/src/MoreMenu/MoreMenu.doc.mjs +31 -0
  416. package/src/MoreMenu/MoreMenu.test.tsx +68 -1
  417. package/src/MoreMenu/MoreMenu.tsx +19 -0
  418. package/src/MultiSelector/MultiSelector.doc.mjs +9 -1
  419. package/src/MultiSelector/MultiSelector.test.tsx +255 -16
  420. package/src/MultiSelector/MultiSelector.tsx +103 -99
  421. package/src/NumberInput/NumberInput.doc.mjs +265 -50
  422. package/src/NumberInput/NumberInput.test.tsx +726 -21
  423. package/src/NumberInput/NumberInput.tsx +353 -59
  424. package/src/Outline/Outline.tsx +2 -5
  425. package/src/Pagination/Pagination.doc.mjs +1 -1
  426. package/src/Pagination/Pagination.test.tsx +22 -7
  427. package/src/Pagination/Pagination.tsx +38 -35
  428. package/src/Popover/Popover.tsx +6 -7
  429. package/src/PowerSearch/PowerSearch.tsx +1 -1
  430. package/src/PowerSearch/PowerSearchEditPopover.test.tsx +42 -0
  431. package/src/PowerSearch/PowerSearchEditPopover.tsx +7 -0
  432. package/src/ProgressBar/ProgressBar.doc.mjs +27 -5
  433. package/src/ProgressBar/ProgressBar.test.tsx +224 -1
  434. package/src/ProgressBar/ProgressBar.tsx +124 -22
  435. package/src/RadioList/RadioList.doc.mjs +4 -2
  436. package/src/RadioList/RadioListItem.tsx +31 -130
  437. package/src/Resizable/ResizeHandle.tsx +2 -9
  438. package/src/SegmentedControl/SegmentedControlItem.tsx +2 -9
  439. package/src/SelectableCard/SelectableCard.tsx +4 -9
  440. package/src/Selector/Selector.doc.mjs +7 -4
  441. package/src/Selector/Selector.test.tsx +935 -25
  442. package/src/Selector/Selector.tsx +189 -106
  443. package/src/Selector/hooks.ts +77 -50
  444. package/src/SideNav/SideNav.test.tsx +46 -0
  445. package/src/SideNav/SideNav.tsx +1 -0
  446. package/src/SideNav/SideNavCollapseButton.tsx +15 -10
  447. package/src/SideNav/SideNavHeading.tsx +48 -10
  448. package/src/SideNav/SideNavItem.tsx +20 -12
  449. package/src/Stack/Stack.doc.mjs +110 -0
  450. package/src/StatusDot/StatusDot.doc.mjs +12 -3
  451. package/src/Switch/Switch.test.tsx +32 -0
  452. package/src/Switch/Switch.tsx +8 -8
  453. package/src/TabList/Tab.tsx +2 -9
  454. package/src/TabList/TabMenu.tsx +14 -21
  455. package/src/Table/BaseTable.tsx +11 -0
  456. package/src/Table/index.ts +1 -4
  457. package/src/Table/plugins/groupedRows/useTableGroupedRows.tsx +30 -14
  458. package/src/Table/plugins/rowExpansion/index.ts +1 -4
  459. package/src/Table/plugins/rowExpansion/useTableRowExpansion.test.tsx +125 -175
  460. package/src/Table/plugins/rowExpansion/useTableRowExpansion.tsx +115 -458
  461. package/src/Table/plugins/sortable/useTableSortable.tsx +2 -6
  462. package/src/Table/plugins/tree/useTableTreeData.tsx +43 -24
  463. package/src/Table/tableContextMenu.test.tsx +27 -0
  464. package/src/Table/tableContextMenu.tsx +1 -0
  465. package/src/Table/types.ts +11 -0
  466. package/src/Table/useTableGroupedRows.doc.mjs +1 -1
  467. package/src/Table/useTableRowExpansion.doc.mjs +43 -66
  468. package/src/TextArea/TextArea.doc.mjs +42 -2
  469. package/src/TextArea/TextArea.test.tsx +219 -0
  470. package/src/TextArea/TextArea.tsx +34 -7
  471. package/src/TextInput/TextInput.doc.mjs +18 -2
  472. package/src/TextInput/TextInput.test.tsx +189 -0
  473. package/src/TextInput/TextInput.tsx +25 -31
  474. package/src/Thumbnail/Thumbnail.tsx +2 -9
  475. package/src/TimeInput/TimeInput.doc.mjs +2 -2
  476. package/src/TimeInput/TimeInput.test.tsx +30 -3
  477. package/src/TimeInput/TimeInput.tsx +9 -26
  478. package/src/Timestamp/Timestamp.doc.mjs +4 -3
  479. package/src/Timestamp/TimestampHoverCard.tsx +13 -35
  480. package/src/Token/Token.tsx +5 -28
  481. package/src/Tokenizer/Tokenizer.doc.mjs +2 -2
  482. package/src/Tokenizer/Tokenizer.test.tsx +45 -3
  483. package/src/Tokenizer/Tokenizer.tsx +10 -2
  484. package/src/Tooltip/useTooltip.tsx +2 -23
  485. package/src/TopNav/TopNav.tsx +1 -3
  486. package/src/TopNav/TopNavHeading.tsx +42 -13
  487. package/src/TopNav/TopNavItem.tsx +3 -21
  488. package/src/TopNav/TopNavMegaMenu.test.tsx +433 -33
  489. package/src/TopNav/TopNavMegaMenu.tsx +118 -53
  490. package/src/TopNav/TopNavMegaMenuItem.tsx +2 -9
  491. package/src/TopNav/TopNavMenu.tsx +34 -37
  492. package/src/TreeList/TreeList.doc.mjs +5 -0
  493. package/src/TreeList/TreeList.test.tsx +206 -7
  494. package/src/TreeList/TreeList.tsx +22 -0
  495. package/src/TreeList/TreeListBranches.tsx +25 -2
  496. package/src/TreeList/TreeListItem.tsx +89 -52
  497. package/src/Typeahead/BaseTypeahead.tsx +19 -6
  498. package/src/Typeahead/Typeahead.doc.mjs +1 -0
  499. package/src/Typeahead/Typeahead.test.tsx +76 -3
  500. package/src/hooks/containerReveal.stylex.ts +102 -0
  501. package/src/hooks/index.ts +4 -0
  502. package/src/hooks/useClipboard.doc.mjs +87 -0
  503. package/src/hooks/useClipboard.test.tsx +151 -0
  504. package/src/hooks/useClipboard.ts +135 -0
  505. package/src/hooks/useContainerReveal.doc.mjs +7 -7
  506. package/src/hooks/useContainerReveal.test.tsx +42 -62
  507. package/src/hooks/useContainerReveal.ts +36 -91
  508. package/src/hooks/useImageMode.test.ts +1 -1
  509. package/src/hooks/useIndicatorFocusRing.tsx +120 -0
  510. package/src/hooks/useLongPress.test.tsx +18 -0
  511. package/src/hooks/useLongPress.ts +12 -2
  512. package/src/hooks/useScrollLock.test.ts +72 -0
  513. package/src/hooks/useScrollLock.ts +51 -19
  514. package/src/hooks/useStreamingText.test.ts +46 -1
  515. package/src/hooks/useStreamingText.ts +49 -7
  516. package/src/hooks/useTreeFocus.test.tsx +50 -0
  517. package/src/hooks/useTreeFocus.ts +14 -3
  518. package/src/hooks/useTypeahead.test.tsx +150 -0
  519. package/src/hooks/useTypeahead.ts +24 -9
  520. package/src/i18n/InternationalizationProvider.doc.mjs +7 -2
  521. package/src/index.ts +1 -0
  522. package/src/theme/defineTheme.ts +24 -0
  523. package/src/theme/derivedVarRegistry.test.ts +21 -1
  524. package/src/theme/derivedVarRegistry.ts +19 -6
  525. package/src/theme/expandColorScale.test.ts +14 -0
  526. package/src/theme/expandColorScale.ts +24 -9
  527. package/src/theme/expandTypeScale.test.ts +43 -0
  528. package/src/theme/expandTypeScale.ts +17 -0
  529. package/src/theme/generateThemeRules.test.ts +61 -20
  530. package/src/theme/generateThemeRules.ts +11 -0
  531. package/src/theme/index.ts +13 -0
  532. package/src/utils/focusOutline.stylex.ts +163 -0
  533. package/src/utils/focusReturn.test.ts +42 -0
  534. package/src/utils/focusReturn.ts +31 -0
  535. package/src/utils/index.ts +1 -0
  536. package/src/utils/mergeRefs.test.ts +48 -0
  537. package/src/utils/mergeRefs.ts +12 -6
  538. package/src/utils/rtlStyles.ts +2 -2
  539. package/src/utils/themeProps.ts +26 -4
  540. package/dist/CheckboxInput/checkbox.markers.stylex.d.ts +0 -9
  541. package/dist/CheckboxInput/checkbox.markers.stylex.d.ts.map +0 -1
  542. package/dist/CheckboxInput/checkbox.markers.stylex.js +0 -14
  543. package/dist/RadioList/radio.markers.stylex.d.ts +0 -7
  544. package/dist/RadioList/radio.markers.stylex.d.ts.map +0 -1
  545. package/dist/RadioList/radio.markers.stylex.js +0 -12
  546. package/dist/hooks/containerReveal.pool.stylex.d.ts +0 -303
  547. package/dist/hooks/containerReveal.pool.stylex.d.ts.map +0 -1
  548. package/dist/hooks/containerReveal.pool.stylex.js +0 -292
  549. package/src/CheckboxInput/checkbox.markers.stylex.ts +0 -12
  550. package/src/RadioList/radio.markers.stylex.ts +0 -10
  551. package/src/hooks/containerReveal.pool.stylex.ts +0 -571
@@ -4,7 +4,8 @@
4
4
 
5
5
  /**
6
6
  * @file Selector.tsx
7
- * @input Uses React, StyleX, usePopover, useTooltip, Icon, InputGroupContext
7
+ * @input Uses React, StyleX, usePopover, useTooltip, Icon, InputGroupContext,
8
+ * and Selector positioning hooks
8
9
  * @output Exports Selector component
9
10
  * @position Core implementation; consumed by index.ts
10
11
  *
@@ -20,7 +21,8 @@ import * as stylex from '@stylexjs/stylex';
20
21
  import { usePopover } from "../Popover/usePopover.js";
21
22
  import { useTooltip } from "../Tooltip/index.js";
22
23
  import { Icon, renderIconSlot } from "../Icon/index.js";
23
- import { Field, inputStatusBorderStyles, inputStatusHoverShadowStyles, inputWrapperStyles } from "../Field/index.js";
24
+ import { useIndicator } from "../Indicator/index.js";
25
+ import { Field, InputClearButton, inputStatusBorderStyles, inputStatusHoverShadowStyles, inputWrapperStyles } from "../Field/index.js";
24
26
  import { Divider } from "../Divider/index.js";
25
27
  import { layerAnimations } from "../Layer/layerAnimations.stylex.js";
26
28
  import { Spinner } from "../Spinner/index.js";
@@ -30,10 +32,12 @@ import "../theme/tokens.stylex.js";
30
32
  import { colorVars, sizeVars, spacingVars, radiusVars, durationVars, easeVars, typographyVars, fontWeightVars, typeScaleVars, borderVars } from "../theme/tokens.stylex.js";
31
33
  import { isOptionData, isDivider, isSection, normalizeOption, getSelectableOptions } from "./utils.js";
32
34
  import { useCombobox, useSelectedItemOffset } from "./hooks.js";
35
+ import { useTypeahead } from "../hooks/useTypeahead.js";
33
36
  import { SelectorOption } from "./SelectorOption.js";
34
37
  import { getInputARIA, mergeProps } from "../utils/index.js";
35
38
  import { useSize } from "../SizeContext/SizeContext.js";
36
39
  import { themeProps } from "../utils/themeProps.js";
40
+ import { stableClassName } from "../naming.js";
37
41
  import { groupStyles } from "../InputGroup/groupStyles.js";
38
42
  import { useInputGroup } from "../InputGroup/InputGroupContext.js";
39
43
  import { VisuallyHidden } from "../VisuallyHidden/index.js";
@@ -60,6 +64,21 @@ const styles = {
60
64
  kMwMTN: "xv1l7n4",
61
65
  $$css: true
62
66
  },
67
+ triggerIcon: {
68
+ kmuXW: "x2lah0s",
69
+ $$css: true
70
+ },
71
+ triggerIconRotation: {
72
+ k1ekBW: "x11xpdln",
73
+ kIyJzY: "xuedmi6",
74
+ kAMwcw: "xlr8y92",
75
+ k3nNDw: "x1g0ag68",
76
+ $$css: true
77
+ },
78
+ triggerIconOpen: {
79
+ k3aq6I: "x19jd1h0",
80
+ $$css: true
81
+ },
63
82
  triggerGhost: {
64
83
  kzqmXN: "x14atkfc",
65
84
  kMzoRj: "xc342km",
@@ -275,6 +294,9 @@ export function Selector(props) {
275
294
  const statusMessageId = useId();
276
295
  const inputLabelId = useId();
277
296
  const searchId = useId();
297
+ // Measure from the same outer control that usePopover anchors to; using the
298
+ // shorter inner button makes every size's selected row land too low.
299
+ const anchorRef = useRef(null);
278
300
  const triggerRef = useRef(null);
279
301
  const searchRef = useRef(null);
280
302
  const inputGroup = useInputGroup();
@@ -285,6 +307,7 @@ export function Selector(props) {
285
307
  const [, startTransition] = useTransition();
286
308
  const [optimisticValue, setOptimisticValue] = useOptimistic(normalizedValue);
287
309
  const isBusy = isLoading || optimisticValue !== normalizedValue;
310
+ const announce = useAnnounce();
288
311
 
289
312
  // Disabled-reason tooltip. Disabled controls swallow pointer events, so the
290
313
  // tooltip listeners attach to the trigger container (which already exists)
@@ -325,15 +348,15 @@ export function Selector(props) {
325
348
  // Ref for listbox to measure selected item position
326
349
  const listboxRef = useRef(null);
327
350
 
328
- // Announce match counts / "No results found" politely as the user types, so
329
- // screen-reader users hear how many options remain. Filtering was previously
330
- // silent (comboboxes-7). Mirrors BaseTypeahead, which announces from its
331
- // query-change callback (not a reactive effect) via the same useAnnounce hook.
332
- const announce = useAnnounce();
351
+ // Typeahead is defined below (it needs the popover), but closing and clearing
352
+ // must drop its pending buffer otherwise a stale prefix survives the reset
353
+ // window and poisons the next keystroke ("Dog" then "c" would search "dc").
354
+ const resetTypeaheadRef = useRef(() => {});
333
355
 
334
356
  // Layer for dropdown positioning
335
357
  const handleLayerHide = useCallback(() => {
336
358
  setSearchQuery('');
359
+ resetTypeaheadRef.current();
337
360
  // Clear any lingering result count when the popover closes so stale status
338
361
  // text does not linger in the a11y tree.
339
362
  announce('');
@@ -384,7 +407,7 @@ export function Selector(props) {
384
407
  selectedItemIndex,
385
408
  listboxId,
386
409
  listboxRef,
387
- triggerRef
410
+ anchorRef
388
411
  });
389
412
  const selectedItemOffset = shouldOverlaySelectedItem ? rawOffset : 0;
390
413
  const isPositioned = shouldOverlaySelectedItem ? rawIsPositioned : true;
@@ -396,6 +419,7 @@ export function Selector(props) {
396
419
  // Clear the current value. Shared by the clear button and the keyboard
397
420
  // Delete/Backspace path so clearing is reachable without a mouse.
398
421
  const clearValue = useCallback(() => {
422
+ resetTypeaheadRef.current();
399
423
  onChange?.(null);
400
424
  if (changeAction) {
401
425
  startTransition(async () => {
@@ -405,10 +429,25 @@ export function Selector(props) {
405
429
  }
406
430
  }, [onChange, changeAction, startTransition, setOptimisticValue]);
407
431
 
408
- // Selector behavior (keyboard nav, typeahead, selection)
432
+ // Type-to-find appends to the query rather than replacing it: characters
433
+ // typed before focus reaches the search input must not be dropped.
434
+ const appendSearchQuery = useCallback(char => {
435
+ setSearchQuery(query => query + char);
436
+ }, []);
437
+ const commitValue = useCallback(newValue => {
438
+ onChange?.(newValue);
439
+ if (changeAction) {
440
+ startTransition(async () => {
441
+ setOptimisticValue(newValue);
442
+ await changeAction(newValue);
443
+ });
444
+ }
445
+ }, [onChange, changeAction, startTransition, setOptimisticValue]);
446
+
447
+ // Selector behavior (keyboard nav, selection)
409
448
  const {
410
449
  highlightedIndex,
411
- setHighlightedIndex: _setHighlightedIndex,
450
+ setHighlightedIndex,
412
451
  getItemId,
413
452
  onTriggerClick,
414
453
  onKeyDown,
@@ -416,7 +455,11 @@ export function Selector(props) {
416
455
  onItemMouseEnter
417
456
  } = useCombobox({
418
457
  selectableItems: filteredItems,
419
- value: normalizedValue,
458
+ // The optimistic value, not the raw prop: with a pending changeAction the
459
+ // prop still holds the old selection, so the popup would open with the
460
+ // highlight on it and Delete/Backspace could clear a value the action has
461
+ // already replaced.
462
+ value: optimisticValue,
420
463
  isDisabled,
421
464
  isOpen: popover.isOpen,
422
465
  hasSearch,
@@ -424,24 +467,56 @@ export function Selector(props) {
424
467
  popover.show();
425
468
  if (hasSearch) {
426
469
  requestAnimationFrame(() => {
427
- searchRef.current?.focus();
470
+ const input = searchRef.current;
471
+ if (input) {
472
+ input.focus();
473
+ // When typing seeded the query, place the caret after it so the
474
+ // user keeps typing where they left off.
475
+ input.setSelectionRange(input.value.length, input.value.length);
476
+ }
428
477
  });
429
478
  }
430
479
  }, [popover, hasSearch]),
431
480
  onClose: popover.hide,
432
- onSelect: useCallback(newValue => {
433
- onChange?.(newValue);
434
- if (changeAction) {
435
- startTransition(async () => {
436
- setOptimisticValue(newValue);
437
- await changeAction(newValue);
438
- });
439
- }
440
- }, [onChange, changeAction, startTransition, setOptimisticValue]),
481
+ onSelect: commitValue,
441
482
  onClear: hasClear ? clearValue : undefined,
483
+ onSearchSeed: appendSearchQuery,
442
484
  listboxId
443
485
  });
444
486
 
487
+ // Type-to-select, shared with the other collections (menus, listboxes).
488
+ // Open, it walks the highlight — aria-activedescendant announces each match.
489
+ // Closed, it commits the match like a native select, which changes the value
490
+ // without opening the popup or moving focus, so nothing else would prompt
491
+ // assistive tech to re-read the trigger: announce it explicitly.
492
+ const typeahead = useTypeahead({
493
+ getItemLabels: () => selectableItems.map(item => item.label ?? item.value),
494
+ isDisabled: index => selectableItems[index]?.disabled === true,
495
+ // Cycle onward from the highlight when open, from the committed selection
496
+ // when closed — the optimistic one, so a pending changeAction cannot strand
497
+ // cycling on the first match. -1 means nothing is selected or highlighted,
498
+ // which the hook reads as "search from the top".
499
+ getCurrentIndex: () => popover.isOpen ? highlightedIndex : selectedItemIndex,
500
+ onMatch: index => {
501
+ const item = selectableItems[index];
502
+ if (popover.isOpen) {
503
+ setHighlightedIndex(index);
504
+ } else if (item.value !== optimisticValue) {
505
+ commitValue(item.value);
506
+ announce(item.label ?? item.value);
507
+ }
508
+ }
509
+ });
510
+ resetTypeaheadRef.current = typeahead.reset;
511
+ const handleTriggerKeyDown = useCallback(e => {
512
+ // With hasSearch the query input owns typing, so type-to-select is off.
513
+ if (!isDisabled && !hasSearch && typeahead.onKeyDown(e)) {
514
+ e.preventDefault();
515
+ return;
516
+ }
517
+ onKeyDown(e);
518
+ }, [isDisabled, hasSearch, typeahead, onKeyDown]);
519
+
445
520
  // Keep the highlighted option visible during keyboard navigation. The
446
521
  // listbox is a fixed-height scroll container, so without this the virtual
447
522
  // cursor walks off-screen once navigation passes the visible window. Mirrors
@@ -535,6 +610,11 @@ export function Selector(props) {
535
610
  });
536
611
  }, [hasSearch, searchId, listboxId, searchQuery, hasQuery, searchPlaceholder, handleSearchChange, onKeyDown, popover.isOpen, highlightedIndex, getItemId, t]);
537
612
 
613
+ // The single-selection mark, resolved from the theme once per render. A
614
+ // theme that maps `check` to another indicator (a radio, say) changes every
615
+ // selected-option mark in the app through this one lookup.
616
+ const SelectionMark = useIndicator('check');
617
+
538
618
  // Render an individual item
539
619
  const renderItem = useCallback((item, flatIndex) => {
540
620
  const isHighlighted = flatIndex === highlightedIndex;
@@ -554,13 +634,14 @@ export function Selector(props) {
554
634
  children: renderOption ? renderOption(item) : /*#__PURE__*/_jsx(DefaultOption, {
555
635
  option: item
556
636
  })
557
- }), isSelected && /*#__PURE__*/_jsx(Icon, {
558
- icon: "check",
637
+ }), /*#__PURE__*/_jsx(SelectionMark, {
638
+ state: isSelected ? 'checked' : 'unchecked',
559
639
  size: "sm",
560
- color: "accent"
640
+ isDisabled: item.disabled ?? false,
641
+ ...themeProps('selector-check')
561
642
  })]
562
643
  }, item.value);
563
- }, [renderOption, highlightedIndex, size, normalizedValue, getItemId, onItemSelect, onItemMouseEnter]);
644
+ }, [renderOption, highlightedIndex, size, normalizedValue, getItemId, onItemSelect, onItemMouseEnter, SelectionMark]);
564
645
 
565
646
  // Render all options (handling sections/dividers)
566
647
  const renderOptions = useCallback(() => {
@@ -574,9 +655,9 @@ export function Selector(props) {
574
655
  // result-count live region instead.
575
656
  return [/*#__PURE__*/_jsx("div", {
576
657
  role: "presentation",
577
- ...{
658
+ ...mergeProps(themeProps('selector-empty-state'), {
578
659
  className: "x1b2ylru x2b8uid xv1l7n4 x9ynric xcr08ib"
579
- },
660
+ }),
580
661
  children: "No results found"
581
662
  }, "empty")];
582
663
  }
@@ -638,6 +719,7 @@ export function Selector(props) {
638
719
  const selectorContent = /*#__PURE__*/_jsxs(_Fragment, {
639
720
  children: [/*#__PURE__*/_jsxs("div", {
640
721
  ref: el => {
722
+ anchorRef.current = el;
641
723
  popover.triggerRef(el);
642
724
  // Anchor + hover/focus listeners for the disabled-message tooltip.
643
725
  // Handlers are gated internally by isEnabled, and anchor names
@@ -649,7 +731,8 @@ export function Selector(props) {
649
731
  ...mergeProps(themeProps('selector', {
650
732
  variant,
651
733
  size,
652
- status: status?.type ?? null
734
+ status: status?.type ?? null,
735
+ disabled: isDisabled ? 'disabled' : null
653
736
  }), stylex.props(inputWrapperStyles.base, styles.triggerContainer, sizeStyles[size], variant === 'ghost' && styles.triggerGhost, isDisabled && inputWrapperStyles.disabled, variant === 'ghost' && isDisabled && styles.triggerGhostDisabled, !selectedItem && styles.triggerPlaceholder, variant !== 'ghost' && status && inputStatusBorderStyles[status.type], variant !== 'ghost' && status && !isDisabled && inputStatusHoverShadowStyles[status.type], variant !== 'ghost' && inputGroup && groupStyles.inGroup, xstyle), className, style),
654
737
  children: [startIcon && renderIconSlot(startIcon, {
655
738
  size: 'sm',
@@ -682,7 +765,7 @@ export function Selector(props) {
682
765
  ,
683
766
  disabled: isDisabled && !showsDisabledMessage,
684
767
  "aria-disabled": showsDisabledMessage ? 'true' : undefined,
685
- onKeyDown: onKeyDown,
768
+ onKeyDown: handleTriggerKeyDown,
686
769
  tabIndex: isDisabled && !showsDisabledMessage ? -1 : 0,
687
770
  ...{
688
771
  className: "x78zum5 x6s0dn4 x1qughib x1txdalj x1iyjqo2 xs83m0k x1r8uery xeuugli x1717udv x1ghz6dp xc342km xng3xce xjbqb8w xjb2p0i x1qlqyl8 x15bjb6t x1heor9g x1ypdohk x1a2a7pz"
@@ -703,73 +786,49 @@ export function Selector(props) {
703
786
  disabled: isDisabled
704
787
  }), isBusy && /*#__PURE__*/_jsx(Spinner, {
705
788
  size: "sm"
706
- }), hasClear && value != null && !isDisabled && /*#__PURE__*/_jsx("button", {
707
- type: "button",
708
- onClick: handleClear,
709
- "aria-label": t('@astryx.selector.clearLabel', {
789
+ }), hasClear && value != null && !isDisabled && /*#__PURE__*/_jsx(InputClearButton, {
790
+ label: t('@astryx.selector.clearLabel', {
710
791
  label
711
792
  }),
793
+ onClick: handleClear,
794
+ iconClassName: stableClassName('selector-clear-icon')
795
+ }), showStatusIcon ? showStatusTooltip ? /*#__PURE__*/_jsx("button", {
796
+ ref: statusTooltip.ref,
797
+ type: "button",
798
+ "aria-label": t(STATUS_BUTTON_LABEL_KEY[status.type]),
799
+ "aria-describedby": statusTooltip.describedBy,
800
+ onClick: e => e.stopPropagation(),
712
801
  ...{
713
- className: "x78zum5 x6s0dn4 xl56j7k x1717udv x1ghz6dp xc342km xng3xce xjbqb8w x1ypdohk xh6dtrn x1a2a7pz x1p25gnr x1y3gkto"
802
+ className: "x78zum5 x6s0dn4 xl56j7k x1717udv x1ghz6dp xc342km xng3xce xjbqb8w x1heor9g x1ypdohk xh6dtrn x1a2a7pz x1p25gnr x1y3gkto"
714
803
  },
715
804
  children: /*#__PURE__*/_jsx(Icon, {
716
- icon: "close",
717
- size: "sm",
718
- color: "secondary"
719
- // Stable theme target on the clear glyph itself, so a theme can
720
- // restyle just this icon (color, size, hover) via `defineTheme`.
721
- // Same-element rules in @layer astryx-theme win over the icon's
722
- // own base color/size, which a button-level target could not
723
- // reach.
724
- ,
725
- ...themeProps('selector-clear-icon')
726
- })
727
- }), /*#__PURE__*/_jsx("span", {
728
- ...{
729
- 0: {
730
- className: "x2lah0s x78zum5 x6s0dn4 xl56j7k x1kky2od xlup9mm x11xpdln xuedmi6 xlr8y92 x1g0ag68 xv9yike"
731
- },
732
- 2: {
733
- className: "x2lah0s x78zum5 x6s0dn4 xl56j7k x1kky2od xlup9mm x11xpdln xuedmi6 xlr8y92 x1g0ag68 xv9yike x19jd1h0"
734
- },
735
- 1: {
736
- className: "x2lah0s x78zum5 x6s0dn4 xl56j7k x1kky2od xlup9mm x11xpdln xuedmi6 xlr8y92 x1g0ag68 xv9yike xq2gx43"
737
- },
738
- 3: {
739
- className: "x2lah0s x78zum5 x6s0dn4 xl56j7k x1kky2od xlup9mm x11xpdln xuedmi6 xlr8y92 x1g0ag68 xv9yike x19jd1h0 xq2gx43"
740
- }
741
- }[!!(!showStatusIcon && popover.isOpen) << 1 | !!showStatusIcon << 0],
742
- children: showStatusIcon ? showStatusTooltip ? /*#__PURE__*/_jsx("button", {
743
- ref: statusTooltip.ref,
744
- type: "button",
745
- "aria-label": t(STATUS_BUTTON_LABEL_KEY[status.type]),
746
- "aria-describedby": statusTooltip.describedBy,
747
- onClick: e => e.stopPropagation(),
748
- ...{
749
- className: "x78zum5 x6s0dn4 xl56j7k x1717udv x1ghz6dp xc342km xng3xce xjbqb8w x1heor9g x1ypdohk xh6dtrn x1a2a7pz x1p25gnr x1y3gkto"
750
- },
751
- children: /*#__PURE__*/_jsx(Icon, {
752
- icon: STATUS_ICON_MAP[status.type],
753
- size: "sm",
754
- color: STATUS_ICON_COLOR_MAP[status.type]
755
- })
756
- }) : /*#__PURE__*/_jsx(Icon, {
757
805
  icon: STATUS_ICON_MAP[status.type],
758
806
  size: "sm",
759
- color: STATUS_ICON_COLOR_MAP[status.type]
760
- }) : /*#__PURE__*/_jsx(Icon, {
761
- icon: "chevronDown",
762
- size: "sm",
763
- color: "inherit"
764
- // Stable theme target on the chevron glyph itself, so a theme can
765
- // restyle just this icon (color, size, hover) — and its
766
- // open/closed state — via `defineTheme`. Same-element rules in
767
- // @layer astryx-theme win over the icon's own base color/size,
768
- // which a button-level target could not reach.
769
- ,
770
- ...themeProps('selector-indicator-icon', {
771
- state: popover.isOpen ? 'expanded' : 'collapsed'
772
- })
807
+ color: STATUS_ICON_COLOR_MAP[status.type],
808
+ xstyle: styles.triggerIcon
809
+ })
810
+ }) : /*#__PURE__*/_jsx(Icon, {
811
+ icon: STATUS_ICON_MAP[status.type],
812
+ size: "sm",
813
+ color: STATUS_ICON_COLOR_MAP[status.type],
814
+ xstyle: styles.triggerIcon
815
+ }) : /*#__PURE__*/_jsx(Icon, {
816
+ icon: "chevronDown",
817
+ size: "sm",
818
+ color: "secondary"
819
+ // The rotation rides on the glyph, alongside the box and color
820
+ // the wrapper used to provide, so one element carries the mark,
821
+ // its open/closed transform, and the theme target.
822
+ ,
823
+ xstyle: [styles.triggerIcon, styles.triggerIconRotation, popover.isOpen && styles.triggerIconOpen]
824
+ // Stable theme target on the chevron glyph itself, so a theme can
825
+ // restyle just this icon (color, size, hover) — and its
826
+ // open/closed state — via `defineTheme`. Same-element rules in
827
+ // @layer astryx-theme win over the icon's own base color/size,
828
+ // which a button-level target could not reach.
829
+ ,
830
+ ...themeProps('selector-indicator-icon', {
831
+ state: popover.isOpen ? 'expanded' : 'collapsed'
773
832
  })
774
833
  })]
775
834
  }), popover.render(hasSearch ? /*#__PURE__*/_jsxs("div", {
@@ -779,8 +838,13 @@ export function Selector(props) {
779
838
  role: "listbox",
780
839
  "aria-labelledby": triggerId,
781
840
  ...{
782
- className: "x9f619 xuyqlj2 x1odjw0f x9epnlk x1hc1fzr x1ey1afo"
783
- },
841
+ 0: {
842
+ className: "x9f619 xuyqlj2 x1odjw0f xu0wf1k x7a5moj x1hc1fzr x1ey1afo"
843
+ },
844
+ 1: {
845
+ className: "x9f619 xuyqlj2 x1odjw0f xu0wf1k x1hc1fzr x1ey1afo x2hg6jq"
846
+ }
847
+ }[!!(variant !== 'ghost') << 0],
784
848
  children: renderOptions()
785
849
  })]
786
850
  }) : /*#__PURE__*/_jsx("div", {
@@ -790,12 +854,18 @@ export function Selector(props) {
790
854
  "aria-labelledby": triggerId,
791
855
  ...{
792
856
  0: {
793
- className: "x9f619 xuyqlj2 x1odjw0f x9epnlk x1hc1fzr x1ey1afo"
857
+ className: "x9f619 xuyqlj2 x1odjw0f xu0wf1k x7a5moj x1hc1fzr x1ey1afo"
858
+ },
859
+ 2: {
860
+ className: "x9f619 xuyqlj2 x1odjw0f xu0wf1k x1hc1fzr x1ey1afo x2hg6jq"
794
861
  },
795
862
  1: {
796
- className: "x9f619 xuyqlj2 x1odjw0f x9epnlk xg01cxk xq2gx43"
863
+ className: "x9f619 xuyqlj2 x1odjw0f xu0wf1k x7a5moj xg01cxk xq2gx43"
864
+ },
865
+ 3: {
866
+ className: "x9f619 xuyqlj2 x1odjw0f xu0wf1k x2hg6jq xg01cxk xq2gx43"
797
867
  }
798
- }[!!!isPositioned << 0],
868
+ }[!!(variant !== 'ghost') << 1 | !!!isPositioned << 0],
799
869
  children: renderOptions()
800
870
  }), {
801
871
  placement: popoverPlacement,
@@ -5,7 +5,7 @@ interface UseSelectedItemOffsetOptions {
5
5
  selectedItemIndex: number;
6
6
  listboxId: string;
7
7
  listboxRef: RefObject<HTMLDivElement | null>;
8
- triggerRef: RefObject<HTMLButtonElement | null>;
8
+ anchorRef: RefObject<HTMLElement | null>;
9
9
  }
10
10
  interface UseSelectedItemOffsetResult {
11
11
  offset: number;
@@ -13,15 +13,15 @@ interface UseSelectedItemOffsetResult {
13
13
  }
14
14
  /**
15
15
  * Calculates the offset needed to position the dropdown so that the selected
16
- * item appears centered over the trigger button (macOS-style selector).
16
+ * item appears centered over the outer selector control (macOS-style selector).
17
17
  *
18
- * The desired dropdown top is calculated directly from the trigger center and
18
+ * The desired dropdown top is calculated directly from the anchor center and
19
19
  * selected-item center, then clamped to the viewport. This preserves the
20
20
  * default "selected item over trigger" behavior while letting the menu slide
21
21
  * upward near the bottom edge or downward near the top edge instead of being
22
22
  * clipped off-screen.
23
23
  */
24
- export declare function useSelectedItemOffset({ isOpen, selectedItemIndex, listboxId, listboxRef, triggerRef, }: UseSelectedItemOffsetOptions): UseSelectedItemOffsetResult;
24
+ export declare function useSelectedItemOffset({ isOpen, selectedItemIndex, listboxId, listboxRef, anchorRef, }: UseSelectedItemOffsetOptions): UseSelectedItemOffsetResult;
25
25
  interface UseComboboxOptions {
26
26
  selectableItems: SelectorOptionData[];
27
27
  value?: string;
@@ -38,6 +38,13 @@ interface UseComboboxOptions {
38
38
  * navigation owns those keys there) or when there is no value.
39
39
  */
40
40
  onClear?: () => void;
41
+ /**
42
+ * With `hasSearch`, printable characters typed on the trigger are appended to
43
+ * the search query (opening the popup if needed), so type-to-find works
44
+ * without a separate open step. Characters keep arriving here until focus
45
+ * lands in the search input, which then owns its own typing.
46
+ */
47
+ onSearchSeed?: (char: string) => void;
41
48
  listboxId: string;
42
49
  }
43
50
  interface UseComboboxResult {
@@ -50,8 +57,13 @@ interface UseComboboxResult {
50
57
  onItemMouseEnter: (item: SelectorOptionData, index: number) => void;
51
58
  }
52
59
  /**
53
- * Handles keyboard navigation, typeahead search, and selection for combobox/listbox patterns.
60
+ * Handles keyboard navigation and selection for combobox/listbox patterns.
61
+ *
62
+ * Type-to-select is not handled here: callers that want it compose the shared
63
+ * `useTypeahead` hook and run it ahead of this handler (see Selector). That
64
+ * keeps matching consistent with the other collections and leaves consumers
65
+ * whose own input already filters the items (CommandPalette) untouched.
54
66
  */
55
- export declare function useCombobox({ selectableItems, value, isDisabled, isOpen, hasSearch, onOpen, onClose, onSelect, onClear, listboxId, }: UseComboboxOptions): UseComboboxResult;
67
+ export declare function useCombobox({ selectableItems, value, isDisabled, isOpen, hasSearch, onOpen, onClose, onSelect, onClear, onSearchSeed, listboxId, }: UseComboboxOptions): UseComboboxResult;
56
68
  export {};
57
69
  //# sourceMappingURL=hooks.d.ts.map
@@ -1 +1 @@
1
- {"version":3,"file":"hooks.d.ts","sourceRoot":"","sources":["../../src/Selector/hooks.ts"],"names":[],"mappings":"AAYA,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,OAAO,CAAC;AACrC,OAAO,KAAK,EAAC,kBAAkB,EAAC,MAAM,SAAS,CAAC;AAMhD,UAAU,4BAA4B;IACpC,MAAM,EAAE,OAAO,CAAC;IAChB,iBAAiB,EAAE,MAAM,CAAC;IAC1B,SAAS,EAAE,MAAM,CAAC;IAClB,UAAU,EAAE,SAAS,CAAC,cAAc,GAAG,IAAI,CAAC,CAAC;IAC7C,UAAU,EAAE,SAAS,CAAC,iBAAiB,GAAG,IAAI,CAAC,CAAC;CACjD;AAED,UAAU,2BAA2B;IACnC,MAAM,EAAE,MAAM,CAAC;IACf,YAAY,EAAE,OAAO,CAAC;CACvB;AAED;;;;;;;;;GASG;AACH,wBAAgB,qBAAqB,CAAC,EACpC,MAAM,EACN,iBAAiB,EACjB,SAAS,EACT,UAAU,EACV,UAAU,GACX,EAAE,4BAA4B,GAAG,2BAA2B,CA6E5D;AAMD,UAAU,kBAAkB;IAC1B,eAAe,EAAE,kBAAkB,EAAE,CAAC;IACtC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,MAAM,EAAE,OAAO,CAAC;IAChB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,MAAM,EAAE,MAAM,IAAI,CAAC;IACnB,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC;;;;;OAKG;IACH,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,SAAS,EAAE,MAAM,CAAC;CACnB;AAED,UAAU,iBAAiB;IACzB,gBAAgB,EAAE,MAAM,CAAC;IACzB,mBAAmB,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAC7C,SAAS,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,MAAM,CAAC;IACrC,cAAc,EAAE,MAAM,IAAI,CAAC;IAC3B,SAAS,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,aAAa,KAAK,IAAI,CAAC;IAC5C,YAAY,EAAE,CAAC,IAAI,EAAE,kBAAkB,KAAK,IAAI,CAAC;IACjD,gBAAgB,EAAE,CAAC,IAAI,EAAE,kBAAkB,EAAE,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CACrE;AAED;;GAEG;AACH,wBAAgB,WAAW,CAAC,EAC1B,eAAe,EACf,KAAK,EACL,UAAkB,EAClB,MAAM,EACN,SAAiB,EACjB,MAAM,EACN,OAAO,EACP,QAAQ,EACR,OAAO,EACP,SAAS,GACV,EAAE,kBAAkB,GAAG,iBAAiB,CAqOxC"}
1
+ {"version":3,"file":"hooks.d.ts","sourceRoot":"","sources":["../../src/Selector/hooks.ts"],"names":[],"mappings":"AAcA,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,OAAO,CAAC;AACrC,OAAO,KAAK,EAAC,kBAAkB,EAAC,MAAM,SAAS,CAAC;AAyBhD,UAAU,4BAA4B;IACpC,MAAM,EAAE,OAAO,CAAC;IAChB,iBAAiB,EAAE,MAAM,CAAC;IAC1B,SAAS,EAAE,MAAM,CAAC;IAClB,UAAU,EAAE,SAAS,CAAC,cAAc,GAAG,IAAI,CAAC,CAAC;IAC7C,SAAS,EAAE,SAAS,CAAC,WAAW,GAAG,IAAI,CAAC,CAAC;CAC1C;AAED,UAAU,2BAA2B;IACnC,MAAM,EAAE,MAAM,CAAC;IACf,YAAY,EAAE,OAAO,CAAC;CACvB;AAED;;;;;;;;;GASG;AACH,wBAAgB,qBAAqB,CAAC,EACpC,MAAM,EACN,iBAAiB,EACjB,SAAS,EACT,UAAU,EACV,SAAS,GACV,EAAE,4BAA4B,GAAG,2BAA2B,CAgF5D;AAMD,UAAU,kBAAkB;IAC1B,eAAe,EAAE,kBAAkB,EAAE,CAAC;IACtC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,MAAM,EAAE,OAAO,CAAC;IAChB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,MAAM,EAAE,MAAM,IAAI,CAAC;IACnB,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC;;;;;OAKG;IACH,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB;;;;;OAKG;IACH,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IACtC,SAAS,EAAE,MAAM,CAAC;CACnB;AAED,UAAU,iBAAiB;IACzB,gBAAgB,EAAE,MAAM,CAAC;IACzB,mBAAmB,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAC7C,SAAS,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,MAAM,CAAC;IACrC,cAAc,EAAE,MAAM,IAAI,CAAC;IAC3B,SAAS,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,aAAa,KAAK,IAAI,CAAC;IAC5C,YAAY,EAAE,CAAC,IAAI,EAAE,kBAAkB,KAAK,IAAI,CAAC;IACjD,gBAAgB,EAAE,CAAC,IAAI,EAAE,kBAAkB,EAAE,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CACrE;AAED;;;;;;;GAOG;AACH,wBAAgB,WAAW,CAAC,EAC1B,eAAe,EACf,KAAK,EACL,UAAkB,EAClB,MAAM,EACN,SAAiB,EACjB,MAAM,EACN,OAAO,EACP,QAAQ,EACR,OAAO,EACP,YAAY,EACZ,SAAS,GACV,EAAE,kBAAkB,GAAG,iBAAiB,CA2NxC"}