@astryxdesign/core 0.7.2-canary.f16dc9f → 0.7.2-canary.f2b60a0

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 (307) hide show
  1. package/dist/AppShell/AppShell.d.ts.map +1 -1
  2. package/dist/AppShell/AppShell.js +40 -1
  3. package/dist/AspectRatio/AspectRatio.d.ts +6 -8
  4. package/dist/AspectRatio/AspectRatio.d.ts.map +1 -1
  5. package/dist/AspectRatio/AspectRatio.js +44 -3
  6. package/dist/Breadcrumbs/BreadcrumbItem.d.ts.map +1 -1
  7. package/dist/Breadcrumbs/BreadcrumbItem.js +5 -2
  8. package/dist/CheckboxInput/CheckboxInput.d.ts +1 -1
  9. package/dist/CheckboxInput/CheckboxInput.d.ts.map +1 -1
  10. package/dist/CheckboxInput/CheckboxInput.js +3 -1
  11. package/dist/CheckboxList/CheckboxListItem.d.ts +9 -1
  12. package/dist/CheckboxList/CheckboxListItem.d.ts.map +1 -1
  13. package/dist/CheckboxList/CheckboxListItem.js +4 -2
  14. package/dist/CommandPalette/CommandPaletteInput.d.ts +1 -1
  15. package/dist/CommandPalette/CommandPaletteInput.d.ts.map +1 -1
  16. package/dist/CommandPalette/CommandPaletteInput.js +37 -5
  17. package/dist/ContextMenu/ContextMenu.d.ts.map +1 -1
  18. package/dist/ContextMenu/ContextMenu.js +5 -2
  19. package/dist/Dialog/Dialog.d.ts.map +1 -1
  20. package/dist/Dialog/Dialog.js +20 -8
  21. package/dist/Drawer/Drawer.d.ts +191 -0
  22. package/dist/Drawer/Drawer.d.ts.map +1 -0
  23. package/dist/Drawer/Drawer.js +382 -0
  24. package/dist/Drawer/DrawerHeader.d.ts +85 -0
  25. package/dist/Drawer/DrawerHeader.d.ts.map +1 -0
  26. package/dist/Drawer/DrawerHeader.js +134 -0
  27. package/dist/Drawer/index.d.ts +11 -0
  28. package/dist/Drawer/index.d.ts.map +1 -0
  29. package/dist/Drawer/index.js +11 -0
  30. package/dist/Drawer/useDrawerDialogPresence.d.ts +42 -0
  31. package/dist/Drawer/useDrawerDialogPresence.d.ts.map +1 -0
  32. package/dist/Drawer/useDrawerDialogPresence.js +236 -0
  33. package/dist/DropdownMenu/DropdownMenu.d.ts +1 -1
  34. package/dist/DropdownMenu/DropdownMenu.d.ts.map +1 -1
  35. package/dist/DropdownMenu/DropdownMenu.js +83 -11
  36. package/dist/DropdownMenu/DropdownMenuContext.d.ts +17 -0
  37. package/dist/DropdownMenu/DropdownMenuContext.d.ts.map +1 -1
  38. package/dist/DropdownMenu/DropdownMenuContext.js +21 -0
  39. package/dist/DropdownMenu/DropdownMenuDivider.d.ts +5 -3
  40. package/dist/DropdownMenu/DropdownMenuDivider.d.ts.map +1 -1
  41. package/dist/DropdownMenu/DropdownMenuDivider.js +7 -3
  42. package/dist/DropdownMenu/DropdownMenuSubMenu.d.ts.map +1 -1
  43. package/dist/DropdownMenu/DropdownMenuSubMenu.js +19 -8
  44. package/dist/DropdownMenu/lazyMenuBottomSheet.d.ts +24 -0
  45. package/dist/DropdownMenu/lazyMenuBottomSheet.d.ts.map +1 -0
  46. package/dist/DropdownMenu/lazyMenuBottomSheet.js +46 -0
  47. package/dist/EmptyState/EmptyState.d.ts.map +1 -1
  48. package/dist/EmptyState/EmptyState.js +4 -10
  49. package/dist/Field/Field.d.ts +1 -1
  50. package/dist/Field/Field.d.ts.map +1 -1
  51. package/dist/Field/Field.js +8 -4
  52. package/dist/Grid/GridSpan.d.ts.map +1 -1
  53. package/dist/Grid/GridSpan.js +1 -0
  54. package/dist/Heading/Heading.d.ts.map +1 -1
  55. package/dist/Heading/Heading.js +4 -2
  56. package/dist/HoverCard/useHoverCard.d.ts.map +1 -1
  57. package/dist/HoverCard/useHoverCard.js +10 -2
  58. package/dist/Item/Item.d.ts +6 -2
  59. package/dist/Item/Item.d.ts.map +1 -1
  60. package/dist/Item/Item.js +19 -4
  61. package/dist/Layer/layerViewportInset.stylex.d.ts +6 -2
  62. package/dist/Layer/layerViewportInset.stylex.d.ts.map +1 -1
  63. package/dist/Layer/layerViewportInset.stylex.js +6 -2
  64. package/dist/Layer/useLayer.d.ts.map +1 -1
  65. package/dist/Layer/useLayer.js +13 -7
  66. package/dist/Layer/useLayerDismissal.d.ts +1 -1
  67. package/dist/Layer/useLayerDismissal.js +1 -1
  68. package/dist/Layout/container.stylex.d.ts +5 -5
  69. package/dist/Layout/container.stylex.js +4 -4
  70. package/dist/List/List.d.ts +46 -19
  71. package/dist/List/List.d.ts.map +1 -1
  72. package/dist/List/List.js +28 -10
  73. package/dist/List/ListContext.d.ts +8 -3
  74. package/dist/List/ListContext.d.ts.map +1 -1
  75. package/dist/List/ListContext.js +7 -2
  76. package/dist/List/ListItem.d.ts +13 -5
  77. package/dist/List/ListItem.d.ts.map +1 -1
  78. package/dist/List/ListItem.js +21 -8
  79. package/dist/List/index.d.ts +1 -1
  80. package/dist/List/index.d.ts.map +1 -1
  81. package/dist/Markdown/Markdown.d.ts.map +1 -1
  82. package/dist/Markdown/Markdown.js +8 -1
  83. package/dist/Markdown/plugins/frontmatter.d.ts.map +1 -1
  84. package/dist/Markdown/plugins/frontmatter.js +7 -3
  85. package/dist/MetadataList/MetadataList.d.ts.map +1 -1
  86. package/dist/MetadataList/MetadataList.js +5 -1
  87. package/dist/MetadataList/MetadataListContext.d.ts +1 -1
  88. package/dist/MetadataList/MetadataListContext.d.ts.map +1 -1
  89. package/dist/MobileNav/MobileNav.d.ts +9 -0
  90. package/dist/MobileNav/MobileNav.d.ts.map +1 -1
  91. package/dist/MobileNav/MobileNav.js +30 -3
  92. package/dist/MultiSelector/MultiSelector.d.ts.map +1 -1
  93. package/dist/MultiSelector/MultiSelector.js +22 -8
  94. package/dist/MultiSelector/OptionActions.a11y.chromium.spec.js +100 -2
  95. package/dist/Popover/Popover.js +2 -2
  96. package/dist/RadioList/RadioList.d.ts +1 -1
  97. package/dist/RadioList/RadioList.d.ts.map +1 -1
  98. package/dist/RadioList/RadioList.js +6 -2
  99. package/dist/RadioList/RadioListItem.d.ts +9 -1
  100. package/dist/RadioList/RadioListItem.d.ts.map +1 -1
  101. package/dist/RadioList/RadioListItem.js +2 -0
  102. package/dist/SideNav/SideNavItem.d.ts +8 -1
  103. package/dist/SideNav/SideNavItem.d.ts.map +1 -1
  104. package/dist/SideNav/SideNavItem.js +71 -9
  105. package/dist/TabList/TabMenu.d.ts +2 -2
  106. package/dist/TabList/TabMenu.d.ts.map +1 -1
  107. package/dist/TabList/TabMenu.js +6 -3
  108. package/dist/Text/Text.d.ts.map +1 -1
  109. package/dist/Text/Text.js +4 -2
  110. package/dist/Text/useTruncation.d.ts +7 -5
  111. package/dist/Text/useTruncation.d.ts.map +1 -1
  112. package/dist/Text/useTruncation.js +16 -5
  113. package/dist/ToggleButton/ToggleButton.d.ts +3 -2
  114. package/dist/ToggleButton/ToggleButton.d.ts.map +1 -1
  115. package/dist/ToggleButton/ToggleButton.js +12 -1
  116. package/dist/TopNav/TopNavMegaMenu.d.ts.map +1 -1
  117. package/dist/TopNav/TopNavMegaMenu.js +3 -3
  118. package/dist/TopNav/TopNavMenu.d.ts.map +1 -1
  119. package/dist/TopNav/TopNavMenu.js +3 -3
  120. package/dist/TreeList/TreeList.d.ts.map +1 -1
  121. package/dist/TreeList/TreeList.js +1 -0
  122. package/dist/TreeList/TreeListBranches.d.ts.map +1 -1
  123. package/dist/TreeList/TreeListBranches.js +2 -2
  124. package/dist/TreeList/TreeListItem.d.ts.map +1 -1
  125. package/dist/TreeList/TreeListItem.js +57 -9
  126. package/dist/astryx.css +46 -13
  127. package/dist/hooks/useEntryAnimation.d.ts +2 -1
  128. package/dist/hooks/useEntryAnimation.d.ts.map +1 -1
  129. package/dist/hooks/useEntryAnimation.js +14 -12
  130. package/dist/hooks/useIsHydrating.d.ts +6 -0
  131. package/dist/hooks/useIsHydrating.d.ts.map +1 -0
  132. package/dist/hooks/useIsHydrating.js +30 -0
  133. package/dist/hooks/useMenuHover.d.ts.map +1 -1
  134. package/dist/hooks/useMenuHover.js +18 -13
  135. package/dist/i18n/generated-locales/en.generated.d.ts.map +1 -1
  136. package/dist/i18n/generated-locales/en.generated.js +93 -1
  137. package/dist/i18n/generated-locales/pseudo.generated.d.ts.map +1 -1
  138. package/dist/i18n/generated-locales/pseudo.generated.js +93 -1
  139. package/dist/index.d.ts +1 -0
  140. package/dist/index.d.ts.map +1 -1
  141. package/dist/index.js +1 -0
  142. package/dist/theme/derivedVarRegistry.d.ts.map +1 -1
  143. package/dist/theme/derivedVarRegistry.js +0 -3
  144. package/dist/utils/focusOutline.stylex.d.ts +4 -0
  145. package/dist/utils/focusOutline.stylex.d.ts.map +1 -1
  146. package/dist/utils/focusOutline.stylex.js +4 -0
  147. package/dist/utils/plainDate.d.ts.map +1 -1
  148. package/dist/utils/plainDate.js +15 -9
  149. package/dist/utils/sharedMutationObserver.d.ts +21 -0
  150. package/dist/utils/sharedMutationObserver.d.ts.map +1 -0
  151. package/dist/utils/sharedMutationObserver.js +69 -0
  152. package/locales/en.json +368 -0
  153. package/locales/pseudo.json +276 -0
  154. package/package.json +8 -3
  155. package/scripts/agent-doc-state.mjs +38 -0
  156. package/scripts/postinstall.mjs +1 -1
  157. package/src/AppShell/AppShell.tsx +45 -1
  158. package/src/AspectRatio/AspectRatio.test.tsx +44 -43
  159. package/src/AspectRatio/AspectRatio.tsx +38 -18
  160. package/src/AspectRatio/__tests__/AspectRatioFitLayers.a11y.browser.spec.ts +157 -0
  161. package/src/Avatar/Avatar.doc.mjs +5 -3
  162. package/src/AvatarGroup/AvatarGroup.doc.mjs +3 -2
  163. package/src/Breadcrumbs/BreadcrumbItem.tsx +4 -1
  164. package/src/Breadcrumbs/Breadcrumbs.test.tsx +30 -1
  165. package/src/Card/Card.doc.mjs +1 -1
  166. package/src/Chat/__tests__/ChatMessageMetadata.a11y.chromium.spec.ts +3 -1
  167. package/src/CheckboxInput/CheckboxInput.test.tsx +34 -0
  168. package/src/CheckboxInput/CheckboxInput.tsx +3 -1
  169. package/src/CheckboxList/CheckboxList.test.tsx +22 -0
  170. package/src/CheckboxList/CheckboxListItem.doc.mjs +16 -0
  171. package/src/CheckboxList/CheckboxListItem.tsx +10 -0
  172. package/src/CommandPalette/CommandPaletteInput.test.tsx +53 -4
  173. package/src/CommandPalette/CommandPaletteInput.tsx +33 -3
  174. package/src/CommandPalette/__tests__/CommandPaletteInputAudit.a11y.chromium.spec.ts +335 -0
  175. package/src/CommandPalette/__tests__/CommandPaletteItemAudit.a11y.chromium.spec.ts +292 -0
  176. package/src/ContextMenu/ContextMenu.doc.mjs +2 -3
  177. package/src/ContextMenu/ContextMenu.tsx +4 -1
  178. package/src/ContextMenu/__tests__/ContextMenuAudit.a11y.chromium.spec.ts +438 -0
  179. package/src/Dialog/Dialog.test.tsx +46 -0
  180. package/src/Dialog/Dialog.tsx +20 -7
  181. package/src/Dialog/__tests__/Dialog.a11y.known-failures.ts +0 -14
  182. package/src/Drawer/Drawer.doc.mjs +472 -0
  183. package/src/Drawer/Drawer.spec.md +357 -0
  184. package/src/Drawer/Drawer.test.tsx +1300 -0
  185. package/src/Drawer/Drawer.tsx +613 -0
  186. package/src/Drawer/DrawerDirection.test.tsx +127 -0
  187. package/src/Drawer/DrawerHeader.doc.mjs +293 -0
  188. package/src/Drawer/DrawerHeader.test.tsx +102 -0
  189. package/src/Drawer/DrawerHeader.tsx +235 -0
  190. package/src/Drawer/__tests__/DrawerAudit.a11y.chromium.spec.ts +401 -0
  191. package/src/Drawer/__tests__/DrawerHeaderAudit.a11y.chromium.spec.ts +297 -0
  192. package/src/Drawer/index.ts +13 -0
  193. package/src/Drawer/useDrawerDialogPresence.ts +284 -0
  194. package/src/DropdownMenu/DropdownMenu.ssr.test.tsx +57 -0
  195. package/src/DropdownMenu/DropdownMenu.test.tsx +76 -14
  196. package/src/DropdownMenu/DropdownMenu.tsx +83 -12
  197. package/src/DropdownMenu/DropdownMenuContext.tsx +24 -0
  198. package/src/DropdownMenu/DropdownMenuDivider.doc.mjs +2 -2
  199. package/src/DropdownMenu/DropdownMenuDivider.spec.md +192 -0
  200. package/src/DropdownMenu/DropdownMenuDivider.tsx +9 -5
  201. package/src/DropdownMenu/DropdownMenuLazySheet.test.tsx +126 -0
  202. package/src/DropdownMenu/DropdownMenuSubMenu.test.tsx +185 -0
  203. package/src/DropdownMenu/DropdownMenuSubMenu.tsx +19 -5
  204. package/src/DropdownMenu/__tests__/DropdownMenuDividerAudit.a11y.chromium.spec.ts +280 -0
  205. package/src/DropdownMenu/__tests__/Menu.a11y.chromium.spec.ts +145 -0
  206. package/src/DropdownMenu/__tests__/Menu.a11y.known-failures.ts +26 -0
  207. package/src/DropdownMenu/__tests__/Menu.a11y.renders.tsx +65 -0
  208. package/src/DropdownMenu/__tests__/Menu.a11y.states.ts +138 -0
  209. package/src/DropdownMenu/__tests__/Menu.a11y.test.tsx +136 -0
  210. package/src/DropdownMenu/__tests__/warmMenuBottomSheet.tsx +43 -0
  211. package/src/DropdownMenu/lazyMenuBottomSheet.ts +71 -0
  212. package/src/EmptyState/EmptyState.doc.mjs +3 -2
  213. package/src/EmptyState/EmptyState.spec.md +189 -0
  214. package/src/EmptyState/EmptyState.test.tsx +74 -3
  215. package/src/EmptyState/EmptyState.tsx +4 -8
  216. package/src/Field/Field.doc.mjs +14 -8
  217. package/src/Field/Field.spec.md +217 -0
  218. package/src/Field/Field.test.tsx +60 -2
  219. package/src/Field/Field.tsx +17 -8
  220. package/src/Grid/GridSpan.tsx +3 -0
  221. package/src/Heading/Heading.test.tsx +57 -0
  222. package/src/Heading/Heading.tsx +6 -2
  223. package/src/HoverCard/HoverCard.test.tsx +58 -0
  224. package/src/HoverCard/useHoverCard.tsx +10 -2
  225. package/src/Item/Item.doc.mjs +12 -8
  226. package/src/Item/Item.spec.md +226 -0
  227. package/src/Item/Item.test.tsx +61 -0
  228. package/src/Item/Item.tsx +40 -4
  229. package/src/Layer/layerViewportInset.source-build.test.mjs +90 -0
  230. package/src/Layer/layerViewportInset.stylex.ts +6 -2
  231. package/src/Layer/layerViewportInset.test.ts +1 -0
  232. package/src/Layer/useLayer.tsx +24 -13
  233. package/src/Layer/useLayerDismissal.ts +1 -1
  234. package/src/Layout/container.stylex.ts +6 -6
  235. package/src/List/List.doc.mjs +14 -1
  236. package/src/List/List.spec.md +129 -77
  237. package/src/List/List.test.tsx +163 -94
  238. package/src/List/List.tsx +74 -18
  239. package/src/List/ListContext.tsx +9 -3
  240. package/src/List/ListItem.doc.mjs +16 -0
  241. package/src/List/ListItem.tsx +56 -27
  242. package/src/List/index.ts +1 -1
  243. package/src/Markdown/Markdown.tsx +14 -1
  244. package/src/Markdown/plugins/frontmatter.test.tsx +25 -0
  245. package/src/Markdown/plugins/frontmatter.ts +7 -3
  246. package/src/MetadataList/MetadataList.doc.mjs +2 -2
  247. package/src/MetadataList/MetadataList.test.tsx +38 -0
  248. package/src/MetadataList/MetadataList.tsx +8 -1
  249. package/src/MetadataList/MetadataListContext.tsx +1 -1
  250. package/src/MobileNav/MobileNav.tsx +30 -3
  251. package/src/MobileNav/MobileNavCloseEdgeCases.test.tsx +173 -15
  252. package/src/MoreMenu/MoreMenu.test.tsx +5 -1
  253. package/src/MultiSelector/MultiSelector.test.tsx +159 -0
  254. package/src/MultiSelector/MultiSelector.tsx +40 -7
  255. package/src/MultiSelector/OptionActions.a11y.chromium.spec.ts +112 -2
  256. package/src/Popover/Popover.test.tsx +2 -2
  257. package/src/Popover/Popover.tsx +4 -4
  258. package/src/RadioList/RadioList.fr10.test.tsx +45 -2
  259. package/src/RadioList/RadioList.test.tsx +22 -0
  260. package/src/RadioList/RadioList.tsx +4 -1
  261. package/src/RadioList/RadioListItem.doc.mjs +16 -0
  262. package/src/RadioList/RadioListItem.tsx +10 -1
  263. package/src/SideNav/SideNav.test.tsx +179 -0
  264. package/src/SideNav/SideNavItem.doc.mjs +2 -2
  265. package/src/SideNav/SideNavItem.tsx +96 -17
  266. package/src/Slider/Slider.spec.md +39 -18
  267. package/src/TabList/TabList.spec.md +57 -44
  268. package/src/TabList/TabList.test.tsx +67 -0
  269. package/src/TabList/TabMenu.doc.mjs +4 -3
  270. package/src/TabList/TabMenu.tsx +7 -4
  271. package/src/Text/Text.test.tsx +57 -0
  272. package/src/Text/Text.tsx +6 -2
  273. package/src/Text/useTruncation.test.tsx +69 -0
  274. package/src/Text/useTruncation.ts +16 -5
  275. package/src/TimeInput/TimeInput.fr10.test.tsx +15 -0
  276. package/src/ToggleButton/ToggleButton.test.tsx +95 -0
  277. package/src/ToggleButton/ToggleButton.tsx +12 -1
  278. package/src/Tooltip/Tooltip.test.tsx +31 -0
  279. package/src/TopNav/TopNavMegaMenu.test.tsx +22 -0
  280. package/src/TopNav/TopNavMegaMenu.tsx +7 -3
  281. package/src/TopNav/TopNavMenu.test.tsx +19 -0
  282. package/src/TopNav/TopNavMenu.tsx +11 -3
  283. package/src/TreeList/TreeList.doc.mjs +1 -0
  284. package/src/TreeList/TreeList.spec.md +29 -17
  285. package/src/TreeList/TreeList.test.tsx +327 -6
  286. package/src/TreeList/TreeList.tsx +5 -1
  287. package/src/TreeList/TreeListBranches.tsx +6 -0
  288. package/src/TreeList/TreeListItem.tsx +88 -13
  289. package/src/docPropLiterals.test.ts +36 -10
  290. package/src/hooks/useEntryAnimation.doc.mjs +4 -4
  291. package/src/hooks/useEntryAnimation.ssr.test.tsx +143 -0
  292. package/src/hooks/useEntryAnimation.ts +15 -16
  293. package/src/hooks/useIsHydrating.test.tsx +70 -0
  294. package/src/hooks/useIsHydrating.ts +31 -0
  295. package/src/hooks/useMenuHover.ts +18 -13
  296. package/src/i18n/generated-locales/en.generated.ts +100 -0
  297. package/src/i18n/generated-locales/pseudo.generated.ts +100 -0
  298. package/src/index.ts +1 -0
  299. package/src/postinstall.test.mjs +46 -0
  300. package/src/reset.css +0 -29
  301. package/src/theme/derivedVarRegistry.test.ts +7 -3
  302. package/src/theme/derivedVarRegistry.ts +0 -3
  303. package/src/utils/focusOutline.stylex.ts +4 -0
  304. package/src/utils/plainDate.test.ts +37 -1
  305. package/src/utils/plainDate.ts +15 -5
  306. package/src/utils/sharedMutationObserver.test.ts +53 -0
  307. package/src/utils/sharedMutationObserver.ts +78 -0
@@ -129,7 +129,11 @@ export function MetadataList({
129
129
  const isMultiColumn = columns === 'multi' || typeof columns === 'number' && columns > 1;
130
130
  // Default to 'top' for multi-column and horizontal layouts since side labels
131
131
  // don't work well when items are in separate grid cells.
132
- const labelConfig = label ?? (isMultiColumn ? LABEL_TOP : LABEL_START);
132
+ const defaultLabelConfig = isMultiColumn ? LABEL_TOP : LABEL_START;
133
+ const labelConfig = useMemo(() => ({
134
+ ...label,
135
+ position: label?.position ?? defaultLabelConfig.position
136
+ }), [label, defaultLabelConfig]);
133
137
  const [isShowAll, setIsShowAll] = useState(false);
134
138
  const contentId = useId();
135
139
  const t = useTranslator();
@@ -1,5 +1,5 @@
1
1
  export interface MetadataListLabelConfig {
2
- position: 'start' | 'top';
2
+ position?: 'start' | 'top';
3
3
  width?: number | string;
4
4
  }
5
5
  export interface MetadataListContextValue {
@@ -1 +1 @@
1
- {"version":3,"file":"MetadataListContext.d.ts","sourceRoot":"","sources":["../../src/MetadataList/MetadataListContext.tsx"],"names":[],"mappings":"AAaA,MAAM,WAAW,uBAAuB;IACtC,QAAQ,EAAE,OAAO,GAAG,KAAK,CAAC;IAC1B,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;CACzB;AAED,MAAM,WAAW,wBAAwB;IACvC,WAAW,EAAE,uBAAuB,CAAC;IACrC,WAAW,EAAE,UAAU,GAAG,YAAY,CAAC;CACxC;AAED,eAAO,MAAM,mBAAmB,0DACsB,CAAC"}
1
+ {"version":3,"file":"MetadataListContext.d.ts","sourceRoot":"","sources":["../../src/MetadataList/MetadataListContext.tsx"],"names":[],"mappings":"AAaA,MAAM,WAAW,uBAAuB;IACtC,QAAQ,CAAC,EAAE,OAAO,GAAG,KAAK,CAAC;IAC3B,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;CACzB;AAED,MAAM,WAAW,wBAAwB;IACvC,WAAW,EAAE,uBAAuB,CAAC;IACrC,WAAW,EAAE,UAAU,GAAG,YAAY,CAAC;CACxC;AAED,eAAO,MAAM,mBAAmB,0DACsB,CAAC"}
@@ -36,6 +36,15 @@
36
36
  */
37
37
  import { type ReactNode } from 'react';
38
38
  import type { BaseProps } from '../BaseProps';
39
+ /**
40
+ * Longest the drawer will wait before closing, however long the hold is.
41
+ *
42
+ * Exported so `AppShell` can defer hiding this drawer's `Activity` boundary
43
+ * by at least this long too (`ACTIVITY_HIDE_BUFFER_MS` in AppShell.tsx) —
44
+ * otherwise Activity's `display: none !important` lands before this delay's
45
+ * own scheduled `dialog.close()` has a chance to run (#5701).
46
+ */
47
+ export declare const MAX_CLOSE_DELAY_MS = 250;
39
48
  /**
40
49
  * Shortest duration in a `transition-duration` list, in ms; null if unreadable.
41
50
  *
@@ -1 +1 @@
1
- {"version":3,"file":"MobileNav.d.ts","sourceRoot":"","sources":["../../src/MobileNav/MobileNav.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAmCG;AAEH,OAAO,EAOL,KAAK,SAAS,EAEf,MAAM,OAAO,CAAC;AAwBf,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAiM5C;;;;;;;;;;GAUG;AACH,wBAAgB,uBAAuB,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,GAAG,IAAI,CAkBpE;AA+DD,MAAM,WAAW,cAAe,SAAQ,IAAI,CAAC,SAAS,EAAE,OAAO,CAAC;IAC9D,wCAAwC;IACxC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,iBAAiB,CAAC,CAAC;IACnC;;;;OAIG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;IAEjB;;;;;;OAMG;IACH,YAAY,CAAC,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,IAAI,CAAC;IAEzC;;OAEG;IACH,QAAQ,EAAE,SAAS,CAAC;IAEpB;;;;OAIG;IACH,MAAM,CAAC,EAAE,SAAS,CAAC;IAEnB;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf;;;;;;;;OAQG;IACH,IAAI,CAAC,EAAE,OAAO,GAAG,KAAK,GAAG,MAAM,CAAC;IAEhC;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf;;OAEG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AAMD;;;;;;;;;;;;;;;;;;;;;;;;;GAyBG;AACH,wBAAgB,SAAS,CAAC,EACxB,MAAM,EAAE,UAAU,EAClB,YAAY,EAAE,gBAAgB,EAC9B,QAAQ,EACR,MAAM,EACN,KAAW,EACX,IAAa,EACb,KAAK,EACL,aAAa,EAAE,MAAM,EACrB,MAAM,EACN,SAAS,EACT,KAAK,EACL,OAAO,EAAE,WAAW,EACpB,GAAG,EACH,GAAG,IAAI,EACR,EAAE,cAAc,+BAmPhB;yBAlQe,SAAS"}
1
+ {"version":3,"file":"MobileNav.d.ts","sourceRoot":"","sources":["../../src/MobileNav/MobileNav.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAmCG;AAEH,OAAO,EAOL,KAAK,SAAS,EAEf,MAAM,OAAO,CAAC;AAwBf,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AA4L5C;;;;;;;GAOG;AACH,eAAO,MAAM,kBAAkB,MAAM,CAAC;AAItC;;;;;;;;;;GAUG;AACH,wBAAgB,uBAAuB,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,GAAG,IAAI,CAkBpE;AA+DD,MAAM,WAAW,cAAe,SAAQ,IAAI,CAAC,SAAS,EAAE,OAAO,CAAC;IAC9D,wCAAwC;IACxC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,iBAAiB,CAAC,CAAC;IACnC;;;;OAIG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;IAEjB;;;;;;OAMG;IACH,YAAY,CAAC,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,IAAI,CAAC;IAEzC;;OAEG;IACH,QAAQ,EAAE,SAAS,CAAC;IAEpB;;;;OAIG;IACH,MAAM,CAAC,EAAE,SAAS,CAAC;IAEnB;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf;;;;;;;;OAQG;IACH,IAAI,CAAC,EAAE,OAAO,GAAG,KAAK,GAAG,MAAM,CAAC;IAEhC;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf;;OAEG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AAMD;;;;;;;;;;;;;;;;;;;;;;;;;GAyBG;AACH,wBAAgB,SAAS,CAAC,EACxB,MAAM,EAAE,UAAU,EAClB,YAAY,EAAE,gBAAgB,EAC9B,QAAQ,EACR,MAAM,EACN,KAAW,EACX,IAAa,EACb,KAAK,EACL,aAAa,EAAE,MAAM,EACrB,MAAM,EACN,SAAS,EACT,KAAK,EACL,OAAO,EAAE,WAAW,EACpB,GAAG,EACH,GAAG,IAAI,EACR,EAAE,cAAc,+BAuQhB;yBAtRe,SAAS"}
@@ -162,8 +162,15 @@ const dynamicStyles = {
162
162
  // Close timing
163
163
  // =============================================================================
164
164
 
165
- /** Longest the drawer will wait before closing, however long the hold is. */
166
- const MAX_CLOSE_DELAY_MS = 250;
165
+ /**
166
+ * Longest the drawer will wait before closing, however long the hold is.
167
+ *
168
+ * Exported so `AppShell` can defer hiding this drawer's `Activity` boundary
169
+ * by at least this long too (`ACTIVITY_HIDE_BUFFER_MS` in AppShell.tsx) —
170
+ * otherwise Activity's `display: none !important` lands before this delay's
171
+ * own scheduled `dialog.close()` has a chance to run (#5701).
172
+ */
173
+ export const MAX_CLOSE_DELAY_MS = 250;
167
174
  /** Fraction of the hold to close at, so the close never lands on its boundary. */
168
175
  const CLOSE_WITHIN_HOLD = 0.6;
169
176
 
@@ -308,6 +315,21 @@ export function MobileNav({
308
315
  // Element that was focused when the drawer opened; focus goes back to it
309
316
  // once the native dialog has closed (see closeAndRestoreFocus).
310
317
  const triggerElementRef = useRef(null);
318
+
319
+ // Keeps the dialog rendered from the commit that closes it until the delayed
320
+ // `close()` below has run. The `display` transition on the dialog is meant to
321
+ // do this, but a browser that does not hold a discrete `display` transition
322
+ // (WebKit) drops the dialog to `display: none` at once while it is still an
323
+ // open modal: nothing is visible, yet the whole page stays inert until the
324
+ // timer fires. Set during render, so it is already true in the commit that
325
+ // closes. The drawer's transform and the backdrop stay keyed to `isOpen`, so
326
+ // the slide-out is unchanged.
327
+ const [isCloseHeld, setIsCloseHeld] = useState(false);
328
+ const [wasOpen, setWasOpen] = useState(isOpen);
329
+ if (wasOpen !== isOpen) {
330
+ setWasOpen(isOpen);
331
+ setIsCloseHeld(!isOpen);
332
+ }
311
333
  const gutterRef = useRef(null);
312
334
 
313
335
  // Gives back the gutter held open in place of the hidden scrollbar.
@@ -374,7 +396,12 @@ export function MobileNav({
374
396
  releaseGutter();
375
397
  closeTimeoutRef.current = setTimeout(() => {
376
398
  closeAndRestoreFocus(dialog, triggerElementRef);
399
+ setIsCloseHeld(false);
377
400
  }, resolveCloseDelay(dialog));
401
+ } else {
402
+ // Nothing is open, so there is no close to hold the dialog for, and no
403
+ // close timer is left to release the hold.
404
+ setIsCloseHeld(false);
378
405
  }
379
406
  return () => {
380
407
  if (closeTimeoutRef.current) {
@@ -444,7 +471,7 @@ export function MobileNav({
444
471
  id: dialogId,
445
472
  ...mergeProps(themeProps('mobile-nav', {
446
473
  side: resolvedSide
447
- }), stylex.props(layerTextReset.reset, layerStructureReset.reset, styles.dialog, overlayPaddingReset.reset, isOpen && styles.open, styles.backdrop, isOpen && styles.backdropOpen, xstyle), className, style),
474
+ }), stylex.props(layerTextReset.reset, layerStructureReset.reset, styles.dialog, overlayPaddingReset.reset, (isOpen || isCloseHeld) && styles.open, styles.backdrop, isOpen && styles.backdropOpen, xstyle), className, style),
448
475
  ...rest,
449
476
  "data-testid": testId,
450
477
  "aria-label": label ?? (typeof header === 'string' ? header : t('@astryx.mobileNav.navigation')),
@@ -1 +1 @@
1
- {"version":3,"file":"MultiSelector.d.ts","sourceRoot":"","sources":["../../src/MultiSelector/MultiSelector.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;GAaG;AAEH,OAAO,KAAK,EAAE,EAUZ,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AAGf,OAAO,EAAuB,KAAK,QAAQ,EAAC,MAAM,SAAS,CAAC;AAE5D,OAAO,EAKL,KAAK,kBAAkB,EACxB,MAAM,UAAU,CAAC;AAOlB,OAAO,KAAK,EAAC,iBAAiB,EAAC,MAAM,cAAc,CAAC;AAapD,OAAO,KAAK,EACV,uBAAuB,EACvB,uBAAuB,EACvB,mBAAmB,EACpB,MAAM,SAAS,CAAC;AAgBjB,OAAO,EAEL,KAAK,mBAAmB,EACxB,KAAK,mBAAmB,EACzB,MAAM,qBAAqB,CAAC;AAK7B,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,gBAAgB,CAAC;AAU9C,OAAO,KAAK,EAAC,oBAAoB,EAAC,MAAM,kCAAkC,CAAC;AAoa3E,MAAM,MAAM,iBAAiB,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAEnD,MAAM,MAAM,oBAAoB,GAAG,OAAO,GAAG,WAAW,GAAG,OAAO,CAAC;AAEnE,MAAM,MAAM,yBAAyB,GAAG,oBAAoB,CAAC;AAE7D,MAAM,MAAM,uBAAuB,GAAG,SAAS,GAAG,OAAO,GAAG,SAAS,CAAC;AAEtE,YAAY,EAAC,mBAAmB,EAAC,CAAC;AAElC;;;;;GAKG;AACH,MAAM,WAAW,+BAAgC,SAAQ,IAAI,CAC3D,mBAAmB,EACjB,MAAM,mBAAmB,GACzB,IAAI,GACJ,SAAS,GACT,WAAW,GACX,SAAS,GACT,eAAe,GACf,eAAe,GACf,eAAe,GACf,WAAW,GACX,eAAe,CAClB;IACC;;;OAGG;IACH,GAAG,EAAE,CAAC,OAAO,EAAE,WAAW,GAAG,IAAI,KAAK,IAAI,CAAC;IAC3C,wDAAwD;IACxD,EAAE,EAAE,MAAM,CAAC;IACX;;;;OAIG;IACH,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,UAAU,CAAC,WAAW,CAAC,KAAK,IAAI,CAAC;IACzD,SAAS,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,aAAa,CAAC,WAAW,CAAC,KAAK,IAAI,CAAC;IAC9D,OAAO,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,UAAU,CAAC,WAAW,CAAC,KAAK,IAAI,CAAC;IACxD;;;;OAIG;IACH,eAAe,CAAC,EAAE,SAAS,GAAG,MAAM,GAAG,QAAQ,CAAC;IAChD,eAAe,EAAE,OAAO,CAAC;IACzB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,WAAW,EAAE,OAAO,GAAG,SAAS,CAAC;IACjC;;;OAGG;IACH,eAAe,CAAC,EAAE,OAAO,CAAC;CAC3B;AAED;;;;;;GAMG;AACH,MAAM,WAAW,mBAAmB;IAClC,uEAAuE;IACvE,IAAI,IAAI,IAAI,CAAC;IACb,sDAAsD;IACtD,KAAK,IAAI,IAAI,CAAC;IACd,uCAAuC;IACvC,MAAM,IAAI,IAAI,CAAC;IACf,6DAA6D;IAC7D,MAAM,IAAI,OAAO,CAAC;CACnB;AAED;;;;GAIG;AACH,MAAM,MAAM,mBAAmB,GAAG;IAChC,gEAAgE;IAChE,IAAI,EAAE,QAAQ,CAAC;IACf,0EAA0E;IAC1E,KAAK,EAAE,MAAM,CAAC;CACf,CAAC;AAEF,MAAM,WAAW,yBAAyB;IACxC,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;CACf;AAED,MAAM,WAAW,kBAAkB,CACjC,CAAC,SAAS,uBAAuB,GAAG,uBAAuB,CAC3D,SAAQ,IAAI,CAAC,mBAAmB,EAAE,UAAU,GAAG,cAAc,CAAC;IAC9D;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IAEd;;;;OAIG;IACH,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,WAAW,CAAC,CAAC;IAE7B;;;OAGG;IACH,OAAO,CAAC,EAAE,KAAK,CAAC,iBAAiB,CAAC,WAAW,CAAC,CAAC;IAE/C;;;OAGG;IACH,OAAO,CAAC,EAAE,KAAK,CAAC,iBAAiB,CAAC,WAAW,CAAC,CAAC;IAE/C;;;OAGG;IACH,SAAS,CAAC,EAAE,KAAK,CAAC,oBAAoB,CAAC,WAAW,CAAC,CAAC;IAEpD;;;OAGG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;IAExB;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IAErB;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IAErB;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IAErB;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IAErB;;;;;;;;OAQG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IAErB;;;;;;;;;;;;;;;;;;;;;OAqBG;IACH,eAAe,CAAC,EAAE,MAAM,CAAC;IAEzB;;;OAGG;IACH,OAAO,EAAE,CAAC,EAAE,CAAC;IAEb;;OAEG;IACH,KAAK,EAAE,MAAM,EAAE,CAAC;IAEhB;;;;OAIG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAElB;;;;;OAKG;IACH,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,EAAE,MAAM,CAAC,EAAE,mBAAmB,KAAK,IAAI,CAAC;IAElE;;OAEG;IACH,YAAY,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC;IAEzD;;;OAGG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IAEpB;;;OAGG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IAErB;;;OAGG;IACH,IAAI,CAAC,EAAE,iBAAiB,CAAC;IAEzB;;;;;;;OAOG;IACH,OAAO,CAAC,EAAE,oBAAoB,CAAC;IAE/B;;OAEG;IACH,MAAM,CAAC,EAAE,mBAAmB,CAAC;IAC7B;;;;;;OAMG;IACH,aAAa,CAAC,EAAE,kBAAkB,CAAC;IAEnC;;;;OAIG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB;;OAEG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IAEtB;;OAEG;IACH,SAAS,CAAC,EAAE,SAAS,GAAG,QAAQ,CAAC;IAEjC;;;;OAIG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB;;;OAGG;IACH,YAAY,CAAC,EAAE,OAAO,CAAC;IAEvB;;;OAGG;IACH,cAAc,CAAC,EAAE,MAAM,CAAC;IAExB;;;OAGG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IAEpB;;;OAGG;IACH,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAE3B;;;;;OAKG;IACH,SAAS,CAAC,EAAE,SAAS,CAAC;IAEtB;;;;;;;;;OASG;IACH,eAAe,CAAC,EAAE,SAAS,CAAC;IAE5B;;;;;;;;;;OAUG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IAEpB;;;;;;OAMG;IACH,cAAc,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,QAAQ,CAAC;IAE/C;;;;;;;;OAQG;IACH,WAAW,CAAC,EAAE,CAAC,KAAK,EAAE,yBAAyB,EAAE,KAAK,MAAM,CAAC;IAE7D;;;;OAIG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB;;;OAGG;IACH,YAAY,CAAC,EAAE,CAAC,MAAM,EAAE,uBAAuB,KAAK,SAAS,CAAC;IAE9D;;;;OAIG;IACH,iBAAiB,CAAC,EAAE,iBAAiB,CAAC;IAEtC;;;;;;OAMG;IACH,YAAY,CAAC,EAAE,yBAAyB,CAAC;IAEzC;;;;OAIG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;IAExB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;OAiCG;IACH,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,+BAA+B,KAAK,SAAS,CAAC;IAEtE;;;;;OAKG;IACH,SAAS,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,mBAAmB,CAAC,CAAC;IAE3C;;;OAGG;IACH,YAAY,CAAC,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,IAAI,CAAC;IAEzC;;;OAGG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AAqED;;;;;;;;;;;;;;GAcG;AACH,wBAAgB,aAAa,CAAC,CAAC,SAAS,uBAAuB,EAAE,EAC/D,KAAK,EACL,aAAqB,EACrB,WAAW,EACX,UAAkB,EAClB,UAAkB,EAClB,UAAkB,EAClB,UAAkB,EAClB,eAAe,EACf,OAAO,EACP,KAAK,EACL,QAAQ,EACR,YAAY,EACZ,SAAiB,EACjB,WAAW,EAAE,oBAAoB,EACjC,IAAI,EAAE,QAAQ,EACd,OAAiB,EACjB,MAAM,EACN,aAA0B,EAC1B,YAAY,EACZ,SAAS,EACT,QAAgB,EAChB,YAAoB,EACpB,cAAc,EAAE,uBAAuB,EACvC,SAAiB,EACjB,iBAAiB,EAAE,0BAA0B,EAC7C,SAAS,EAAE,kBAAkB,EAC7B,eAAe,EAAE,wBAAwB,EACzC,SAAiB,EACjB,cAAwB,EACxB,WAAW,EACX,SAAa,EACb,YAAY,EACZ,iBAA2B,EAC3B,YAAwB,EACxB,aAAqB,EACrB,aAAa,EACb,SAAS,EACT,YAAY,EACZ,QAAQ,EACR,KAAK,EACL,eAAe,EACf,kBAAkB,EAClB,cAAc,EACd,aAAa,EACb,gBAAgB,EAChB,YAAY,EACZ,GAAG,EACH,EAAE,EACF,OAAO,EACP,OAAO,EACP,SAAS,EAAE,aAAa,EACxB,kBAAkB,EAAE,mBAAmB,EACvC,GAAG,SAAS,EACb,EAAE,kBAAkB,CAAC,CAAC,CAAC,qBAgjDvB;yBAtmDe,aAAa"}
1
+ {"version":3,"file":"MultiSelector.d.ts","sourceRoot":"","sources":["../../src/MultiSelector/MultiSelector.tsx"],"names":[],"mappings":"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"}
@@ -29,13 +29,12 @@ import { PanelSearchInput } from "../Field/PanelSearchInput.js";
29
29
  import { CheckboxInput } from "../CheckboxInput/index.js";
30
30
  import { Badge } from "../Badge/index.js";
31
31
  import "../theme/tokens.stylex.js";
32
- import { colorVars, sizeVars, spacingVars, radiusVars, durationVars, easeVars, typographyVars, fontWeightVars, typeScaleVars } from "../theme/tokens.stylex.js";
32
+ import { colorVars, focusVars, sizeVars, spacingVars, radiusVars, durationVars, easeVars, typographyVars, fontWeightVars, typeScaleVars } from "../theme/tokens.stylex.js";
33
33
  import { isOptionData, isDivider, isSection, normalizeOption, getSelectableOptions } from "../Selector/utils.js";
34
34
  import { useMultiCombobox } from "./hooks.js";
35
35
  import { getInputARIA, isImeKeyEvent, mergeProps } from "../utils/index.js";
36
36
  import { devWarn, warnOnce } from "../utils/devWarning.js";
37
- import "../utils/focusOutline.stylex.js";
38
- import { FOCUS_OUTLINE_PARTS } from "../utils/focusOutline.stylex.js";
37
+ import { getInteractionModality, useInteractionModalityTracking } from "../utils/interactionModality.js";
39
38
  import { useAnnounce } from "../hooks/useAnnounce.js";
40
39
  import { FOCUSABLE_SELECTOR } from "../hooks/focusableSelector.js";
41
40
  import { useAnnounceRenderedText } from "../hooks/useAnnounceRenderedText.js";
@@ -894,8 +893,8 @@ export function MultiSelector({
894
893
  getActionCellId,
895
894
  activeDescendantId,
896
895
  onTriggerClick,
897
- onKeyDown,
898
- onItemMouseEnter
896
+ onKeyDown: onComboboxKeyDown,
897
+ onItemMouseEnter: onComboboxItemMouseEnter
899
898
  } = useMultiCombobox({
900
899
  selectableItems: sortedItems,
901
900
  isDisabled: isDisabled || isEffectivelyReadOnly,
@@ -918,6 +917,21 @@ export function MultiSelector({
918
917
  }, [getActionCellIdForActivate])
919
918
  });
920
919
 
920
+ // A hover moves the highlight too, but the focus ring follows the shared
921
+ // interaction modality (architecture:interaction-modality INV1): it is read
922
+ // whenever a key or the pointer moves the highlight, so an action cell
923
+ // highlighted after pointer input keeps the hover treatment and no ring.
924
+ useInteractionModalityTracking();
925
+ const [isKeyboardHighlight, setIsKeyboardHighlight] = useState(() => getInteractionModality() === 'keyboard');
926
+ const onKeyDown = useCallback(event => {
927
+ onComboboxKeyDown(event);
928
+ setIsKeyboardHighlight(getInteractionModality() === 'keyboard');
929
+ }, [onComboboxKeyDown]);
930
+ const onItemMouseEnter = useCallback((...args) => {
931
+ onComboboxItemMouseEnter(...args);
932
+ setIsKeyboardHighlight(getInteractionModality() === 'keyboard');
933
+ }, [onComboboxItemMouseEnter]);
934
+
921
935
  // The trigger button owns its click so a consumer `onClick`, which lands on
922
936
  // the button, composes after the built-in toggle. A press elsewhere in the
923
937
  // control box (padding, start icon, chevron) still opens the panel.
@@ -1179,14 +1193,14 @@ export function MultiSelector({
1179
1193
  className: "x78zum5 x6s0dn4 x2lah0s xh6dtrn"
1180
1194
  },
1181
1195
  1: {
1182
- className: "x78zum5 x6s0dn4 x2lah0s xh6dtrn x19wbafz xy741jp xb9bu2e xgg8d26"
1196
+ className: "x78zum5 x6s0dn4 x2lah0s xh6dtrn xak0ai5 x9ssot5 x19bwoy8 x1eqjuhu"
1183
1197
  }
1184
- }[!!(isHighlighted && highlightedCell === 'action') << 0],
1198
+ }[!!(isHighlighted && highlightedCell === 'action' && isKeyboardHighlight) << 0],
1185
1199
  children: isSelectAll || isCreate ? null : item.action
1186
1200
  })]
1187
1201
  }) : content
1188
1202
  }, item.value);
1189
- }, [isGrid, highlightedCell, getActionCellId, renderOption, indicatorPosition, highlightedIndex, optimisticValue, allEnabledSelected, selectAllState, selectAllLabel, getItemId, handleNavigableToggle, onItemMouseEnter, size, t]);
1203
+ }, [isGrid, highlightedCell, isKeyboardHighlight, getActionCellId, renderOption, indicatorPosition, highlightedIndex, optimisticValue, allEnabledSelected, selectAllState, selectAllLabel, getItemId, handleNavigableToggle, onItemMouseEnter, size, t]);
1190
1204
 
1191
1205
  // Render all options. Uses sortedItems as the single source of truth for
1192
1206
  // item order — no independent sorting here. Structural elements (dividers,
@@ -6,8 +6,10 @@
6
6
  * built Storybook.
7
7
  * @output Real-engine proof for option actions: the action is visible at rest
8
8
  * beside its row (`spec:AST-058` FR8), the keyboard reaches it through the
9
- * inline-end arrow in both directions and fires it with Enter, and the
10
- * highlight follows a real mouse across rows and actions.
9
+ * inline-end arrow in both directions and fires it with Enter, the active
10
+ * action cell draws the standard focus ring when the shared input modality
11
+ * is keyboard and not after pointer input, and the highlight follows a real
12
+ * mouse across rows and actions.
11
13
  * @position Run with `pnpm test:a11y-contract`; paint, pointer paths and the
12
14
  * active descendant as an engine exposes them are not jsdom claims.
13
15
  */
@@ -105,6 +107,102 @@ test('the keyboard reaches an action through the inline-end arrow and fires it w
105
107
  await search.press('ArrowLeft');
106
108
  await expect.poll(async () => activeDescendant(page)).toBe('row:Bug');
107
109
  });
110
+ test('the active action cell draws the standard focus ring', async ({
111
+ page
112
+ }) => {
113
+ await page.goto(`${storybook.origin}/iframe.html?id=core-multiselector--row-actions&viewMode=story`);
114
+ const search = page.getByRole('combobox');
115
+ await expect(search).toBeFocused();
116
+ await search.press('ArrowDown'); // select-all
117
+ await search.press('ArrowDown'); // Feature (no action)
118
+ await search.press('ArrowDown'); // Bug
119
+ await search.press('ArrowRight');
120
+ await expect.poll(async () => activeDescendant(page)).toBe('gridcell:Edit Bug');
121
+ const ring = await page.evaluate(() => {
122
+ const id = document.activeElement?.getAttribute('aria-activedescendant');
123
+ const cell = id ? document.getElementById(id) : null;
124
+ if (!cell) {
125
+ return null;
126
+ }
127
+ const cs = getComputedStyle(cell);
128
+ // The ring the focus tokens describe, resolved by the browser on a probe.
129
+ const probe = document.createElement('div');
130
+ probe.style.cssText = 'outline-width:var(--focus-outline-width);outline-style:var(--focus-outline-style);outline-color:var(--focus-outline-color);outline-offset:var(--focus-outline-offset)';
131
+ document.body.appendChild(probe);
132
+ const want = getComputedStyle(probe);
133
+ const result = {
134
+ style: cs.outlineStyle,
135
+ width: cs.outlineWidth,
136
+ color: cs.outlineColor,
137
+ offset: cs.outlineOffset,
138
+ wantStyle: want.outlineStyle,
139
+ wantWidth: want.outlineWidth,
140
+ wantColor: want.outlineColor,
141
+ wantOffset: want.outlineOffset
142
+ };
143
+ probe.remove();
144
+ return result;
145
+ });
146
+ expect(ring).not.toBeNull();
147
+ expect(ring.style).not.toBe('none');
148
+ expect(ring.width).not.toBe('0px');
149
+ expect(ring.style).toBe(ring.wantStyle);
150
+ expect(ring.width).toBe(ring.wantWidth);
151
+ expect(ring.color).toBe(ring.wantColor);
152
+ expect(ring.offset).toBe(ring.wantOffset);
153
+ // Back on the option cell, the action cell drops the ring.
154
+ await search.press('ArrowLeft');
155
+ await expect.poll(async () => activeDescendant(page)).toBe('row:Bug');
156
+ const after = await page.getByRole('row', {
157
+ name: 'Bug'
158
+ }).locator('[data-multi-selector-action-cell]').evaluate(cell => getComputedStyle(cell).outlineStyle);
159
+ expect(after).toBe('none');
160
+ });
161
+ test('the action-cell ring follows the shared input modality', async ({
162
+ page
163
+ }) => {
164
+ await page.goto(`${storybook.origin}/iframe.html?id=core-multiselector--row-actions&viewMode=story`);
165
+ const search = page.getByRole('combobox');
166
+ await expect(search).toBeFocused();
167
+ const actionCell = name => page.getByRole('row', {
168
+ name
169
+ }).locator('[data-multi-selector-action-cell]');
170
+ const outlineStyle = async name => actionCell(name).evaluate(cell => getComputedStyle(cell).outlineStyle);
171
+ const hover = async name => {
172
+ const cell = await box(actionCell(name));
173
+ await page.mouse.move(cell.x + cell.width / 2, cell.y + cell.height / 2, {
174
+ steps: 6
175
+ });
176
+ };
177
+
178
+ // Pointer input: a click into the search field, then a hover onto an
179
+ // action, moves the highlight without the ring, and leaves none behind.
180
+ await search.click();
181
+ await hover('Bug');
182
+ await expect.poll(async () => activeDescendant(page)).toBe('gridcell:Edit Bug');
183
+ expect(await outlineStyle('Bug')).toBe('none');
184
+ // A modifier chord is not keyboard navigation for the shared tracker.
185
+ await search.press('Control+ArrowRight');
186
+ expect(await outlineStyle('Bug')).toBe('none');
187
+ await page.mouse.move(1, 1, {
188
+ steps: 6
189
+ });
190
+ expect(await outlineStyle('Bug')).toBe('none');
191
+
192
+ // Keyboard input: back onto the same cell, the ring is drawn.
193
+ await search.press('ArrowLeft');
194
+ await expect.poll(async () => activeDescendant(page)).toBe('row:Bug');
195
+ await search.press('ArrowRight');
196
+ await expect.poll(async () => activeDescendant(page)).toBe('gridcell:Edit Bug');
197
+ expect(await outlineStyle('Bug')).not.toBe('none');
198
+
199
+ // Still keyboard-driven, a hover that moves the highlight to another
200
+ // row's action carries the ring with it.
201
+ await hover('P0');
202
+ await expect.poll(async () => activeDescendant(page)).toBe('gridcell:Edit P0');
203
+ expect(await outlineStyle('P0')).not.toBe('none');
204
+ expect(await outlineStyle('Bug')).toBe('none');
205
+ });
108
206
  test('under RTL the inline-end arrow is ArrowLeft', async ({
109
207
  page
110
208
  }) => {
@@ -60,8 +60,8 @@ function findTriggerButton(el) {
60
60
  const styles = {
61
61
  surfaceViewportFit: {
62
62
  kB7OPa: "x9f619",
63
- ks0D6T: "x1p5vr2b",
64
- kskxy: "xv8yize",
63
+ ks0D6T: "xc0b1yq",
64
+ kskxy: "x3v4n1",
65
65
  $$css: true
66
66
  },
67
67
  surfaceScrollable: {
@@ -130,7 +130,7 @@ export interface RadioListProps extends Omit<FieldInputBaseProps<HTMLDivElement>
130
130
  * </RadioList>
131
131
  * ```
132
132
  */
133
- export declare function RadioList({ ref, label, isLabelHidden, description, value, onChange, orientation, isDisabled, disabledMessage, isRequired, isOptional, size, status, labelTooltip, width, containerXstyle, containerClassName, containerStyle, controlXstyle, controlClassName, controlStyle, htmlName, children, onFocus, 'aria-describedby': ariaDescribedByProp, ...restProps }: RadioListProps): React.JSX.Element;
133
+ export declare function RadioList({ ref, label, isLabelHidden, description, value, onChange, orientation, isDisabled, disabledMessage, isRequired, isOptional, size, status, labelTooltip, width, containerXstyle, containerClassName, containerStyle, controlXstyle, controlClassName, controlStyle, htmlName, children, onFocus, 'aria-labelledby': ariaLabelledByProp, 'aria-describedby': ariaDescribedByProp, ...restProps }: RadioListProps): React.JSX.Element;
134
134
  export declare namespace RadioList {
135
135
  var displayName: string;
136
136
  }
@@ -1 +1 @@
1
- {"version":3,"file":"RadioList.d.ts","sourceRoot":"","sources":["../../src/RadioList/RadioList.tsx"],"names":[],"mappings":"AAmBA,OAAO,KAAK,EAAE,EAKZ,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AAIf,OAAO,KAAK,EAAC,WAAW,EAAC,MAAM,gBAAgB,CAAC;AAIhD,OAAO,EACL,KAAK,mBAAmB,EAEzB,MAAM,qBAAqB,CAAC;AAC7B,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,gBAAgB,CAAC;AAG9C;;GAEG;AACH,MAAM,MAAM,aAAa,GAAG,IAAI,GAAG,IAAI,CAAC;AAExC,MAAM,WAAW,qBAAqB;IACpC,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC,UAAU,EAAE,OAAO,CAAC;IACpB;;;;;OAKG;IACH,kBAAkB,EAAE,OAAO,CAAC;IAC5B,UAAU,EAAE,OAAO,CAAC;IACpB,IAAI,EAAE,aAAa,CAAC;IACpB,MAAM,CAAC,EAAE,WAAW,CAAC;CACtB;AAED,eAAO,MAAM,gBAAgB,6CAE5B,CAAC;AAiBF,MAAM,WAAW,cAAe,SAAQ,IAAI,CAC1C,mBAAmB,CAAC,cAAc,CAAC,EACnC,UAAU,CACX;IACC,wDAAwD;IACxD,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;IAChC;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;;OAGG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC;;;OAGG;IACH,WAAW,CAAC,EAAE,UAAU,GAAG,YAAY,CAAC;IACxC;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IAErB;;;;OAIG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB;;;;;;;;;OASG;IACH,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;OAGG;IACH,MAAM,CAAC,EAAE,WAAW,CAAC;IACrB;;;;;OAKG;IACH,IAAI,CAAC,EAAE,aAAa,CAAC;IACrB;;;;OAIG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB;;OAEG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB;;OAEG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB;;OAEG;IACH,QAAQ,EAAE,SAAS,CAAC;CACrB;AAED;;;;;;;;;;;;;;GAcG;AACH,wBAAgB,SAAS,CAAC,EACxB,GAAG,EACH,KAAK,EACL,aAAqB,EACrB,WAAW,EACX,KAAK,EACL,QAAQ,EACR,WAAwB,EACxB,UAAkB,EAClB,eAAe,EACf,UAAkB,EAClB,UAAkB,EAClB,IAAW,EACX,MAAM,EACN,YAAY,EACZ,KAAK,EACL,eAAe,EACf,kBAAkB,EAClB,cAAc,EACd,aAAa,EACb,gBAAgB,EAChB,YAAY,EACZ,QAAQ,EACR,QAAQ,EACR,OAAO,EACP,kBAAkB,EAAE,mBAAmB,EACvC,GAAG,SAAS,EACb,EAAE,cAAc,qBAmNhB;yBA9Oe,SAAS"}
1
+ {"version":3,"file":"RadioList.d.ts","sourceRoot":"","sources":["../../src/RadioList/RadioList.tsx"],"names":[],"mappings":"AAmBA,OAAO,KAAK,EAAE,EAKZ,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AAIf,OAAO,KAAK,EAAC,WAAW,EAAC,MAAM,gBAAgB,CAAC;AAKhD,OAAO,EACL,KAAK,mBAAmB,EAEzB,MAAM,qBAAqB,CAAC;AAC7B,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,gBAAgB,CAAC;AAG9C;;GAEG;AACH,MAAM,MAAM,aAAa,GAAG,IAAI,GAAG,IAAI,CAAC;AAExC,MAAM,WAAW,qBAAqB;IACpC,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC,UAAU,EAAE,OAAO,CAAC;IACpB;;;;;OAKG;IACH,kBAAkB,EAAE,OAAO,CAAC;IAC5B,UAAU,EAAE,OAAO,CAAC;IACpB,IAAI,EAAE,aAAa,CAAC;IACpB,MAAM,CAAC,EAAE,WAAW,CAAC;CACtB;AAED,eAAO,MAAM,gBAAgB,6CAE5B,CAAC;AAiBF,MAAM,WAAW,cAAe,SAAQ,IAAI,CAC1C,mBAAmB,CAAC,cAAc,CAAC,EACnC,UAAU,CACX;IACC,wDAAwD;IACxD,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;IAChC;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;;OAGG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC;;;OAGG;IACH,WAAW,CAAC,EAAE,UAAU,GAAG,YAAY,CAAC;IACxC;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IAErB;;;;OAIG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB;;;;;;;;;OASG;IACH,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;OAGG;IACH,MAAM,CAAC,EAAE,WAAW,CAAC;IACrB;;;;;OAKG;IACH,IAAI,CAAC,EAAE,aAAa,CAAC;IACrB;;;;OAIG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB;;OAEG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB;;OAEG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB;;OAEG;IACH,QAAQ,EAAE,SAAS,CAAC;CACrB;AAED;;;;;;;;;;;;;;GAcG;AACH,wBAAgB,SAAS,CAAC,EACxB,GAAG,EACH,KAAK,EACL,aAAqB,EACrB,WAAW,EACX,KAAK,EACL,QAAQ,EACR,WAAwB,EACxB,UAAkB,EAClB,eAAe,EACf,UAAkB,EAClB,UAAkB,EAClB,IAAW,EACX,MAAM,EACN,YAAY,EACZ,KAAK,EACL,eAAe,EACf,kBAAkB,EAClB,cAAc,EACd,aAAa,EACb,gBAAgB,EAChB,YAAY,EACZ,QAAQ,EACR,QAAQ,EACR,OAAO,EACP,iBAAiB,EAAE,kBAAkB,EACrC,kBAAkB,EAAE,mBAAmB,EACvC,GAAG,SAAS,EACb,EAAE,cAAc,qBAoNhB;yBAhPe,SAAS"}
@@ -24,6 +24,7 @@ import { Field } from "../Field/Field.js";
24
24
  import { useTooltip } from "../Tooltip/index.js";
25
25
  import { useResolvedRequired } from "../hooks/useResolvedRequired.js";
26
26
  import { composeEventHandlers, mergeProps } from "../utils/index.js";
27
+ import { joinAriaIDs } from "../utils/inputAria.js";
27
28
  import { useFieldInputStyling } from "../Field/fieldParts.js";
28
29
  import { themeProps } from "../utils/themeProps.js";
29
30
 
@@ -89,6 +90,7 @@ export function RadioList({
89
90
  htmlName,
90
91
  children,
91
92
  onFocus,
93
+ 'aria-labelledby': ariaLabelledByProp,
92
94
  'aria-describedby': ariaDescribedByProp,
93
95
  ...restProps
94
96
  }) {
@@ -242,8 +244,10 @@ export function RadioList({
242
244
  // unconditionally is safe.
243
245
  disabledMessageTooltip.ref(el);
244
246
  },
245
- role: "radiogroup",
246
- "aria-labelledby": labelID,
247
+ role: "radiogroup"
248
+ // A caller aria-labelledby names the group together with its label.
249
+ ,
250
+ "aria-labelledby": joinAriaIDs(labelID, ariaLabelledByProp),
247
251
  onFocus: composeEventHandlers(handleFocus, onFocus),
248
252
  "aria-describedby": [ariaDescribedByProp, description ? descriptionID : null, status?.message ? statusMessageID : null, showsDisabledMessage ? disabledMessageTooltip.describedBy : null].filter(Boolean).join(' ') || undefined,
249
253
  "aria-invalid": status?.type === 'error' ? true : undefined,
@@ -15,8 +15,16 @@
15
15
  */
16
16
  import React, { type ReactNode } from 'react';
17
17
  import type { BaseProps } from '../BaseProps';
18
+ import { type ItemAlign } from '../Item';
18
19
  export interface RadioListItemProps extends BaseProps<HTMLDivElement> {
19
20
  ref?: React.Ref<HTMLDivElement>;
21
+ /**
22
+ * Vertical alignment of the start and end content against the label,
23
+ * forwarded to Item. Use `first-line` to keep the radio level with the
24
+ * first line of a wrapped label.
25
+ * @default 'center'
26
+ */
27
+ align?: ItemAlign;
20
28
  /**
21
29
  * Primary label for the radio item.
22
30
  *
@@ -83,7 +91,7 @@ export interface RadioListItemProps extends BaseProps<HTMLDivElement> {
83
91
  * />
84
92
  * ```
85
93
  */
86
- export declare function RadioListItem({ ref, label, 'aria-label': ariaLabel, value, description, isDisabled: isItemDisabled, startContent, endContent, xstyle, className, style, onClick, ...rest }: RadioListItemProps): React.JSX.Element;
94
+ export declare function RadioListItem({ ref, label, 'aria-label': ariaLabel, value, description, isDisabled: isItemDisabled, startContent, endContent, align, xstyle, className, style, onClick, ...rest }: RadioListItemProps): React.JSX.Element;
87
95
  export declare namespace RadioListItem {
88
96
  var displayName: string;
89
97
  }
@@ -1 +1 @@
1
- {"version":3,"file":"RadioListItem.d.ts","sourceRoot":"","sources":["../../src/RadioList/RadioListItem.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;GAcG;AAEH,OAAO,KAAK,EAAE,EAAqB,KAAK,SAAS,EAAC,MAAM,OAAO,CAAC;AAGhE,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAqI5C,MAAM,WAAW,kBAAmB,SAAQ,SAAS,CAAC,cAAc,CAAC;IACnE,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;IAChC;;;;;;;;;;OAUG;IACH,KAAK,EAAE,SAAS,CAAC;IACjB;;;;;;;;;;;;;;OAcG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;;;;OAKG;IACH,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;OAEG;IACH,YAAY,CAAC,EAAE,SAAS,CAAC;IACzB;;OAEG;IACH,UAAU,CAAC,EAAE,SAAS,CAAC;CACxB;AAED;;;;;;;;;;;;GAYG;AACH,wBAAgB,aAAa,CAAC,EAC5B,GAAG,EACH,KAAK,EACL,YAAY,EAAE,SAAS,EACvB,KAAK,EACL,WAAW,EACX,UAAU,EAAE,cAAsB,EAClC,YAAY,EACZ,UAAU,EACV,MAAM,EACN,SAAS,EACT,KAAK,EACL,OAAO,EACP,GAAG,IAAI,EACR,EAAE,kBAAkB,qBAmKpB;yBAjLe,aAAa"}
1
+ {"version":3,"file":"RadioListItem.d.ts","sourceRoot":"","sources":["../../src/RadioList/RadioListItem.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;GAcG;AAEH,OAAO,KAAK,EAAE,EAAqB,KAAK,SAAS,EAAC,MAAM,OAAO,CAAC;AAGhE,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAQ5C,OAAO,EAAO,KAAK,SAAS,EAAC,MAAM,SAAS,CAAC;AA6H7C,MAAM,WAAW,kBAAmB,SAAQ,SAAS,CAAC,cAAc,CAAC;IACnE,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;IAChC;;;;;OAKG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB;;;;;;;;;;OAUG;IACH,KAAK,EAAE,SAAS,CAAC;IACjB;;;;;;;;;;;;;;OAcG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;;;;OAKG;IACH,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;OAEG;IACH,YAAY,CAAC,EAAE,SAAS,CAAC;IACzB;;OAEG;IACH,UAAU,CAAC,EAAE,SAAS,CAAC;CACxB;AAED;;;;;;;;;;;;GAYG;AACH,wBAAgB,aAAa,CAAC,EAC5B,GAAG,EACH,KAAK,EACL,YAAY,EAAE,SAAS,EACvB,KAAK,EACL,WAAW,EACX,UAAU,EAAE,cAAsB,EAClC,YAAY,EACZ,UAAU,EACV,KAAK,EACL,MAAM,EACN,SAAS,EACT,KAAK,EACL,OAAO,EACP,GAAG,IAAI,EACR,EAAE,kBAAkB,qBAoKpB;yBAnLe,aAAa"}
@@ -122,6 +122,7 @@ export function RadioListItem({
122
122
  isDisabled: isItemDisabled = false,
123
123
  startContent,
124
124
  endContent,
125
+ align,
125
126
  xstyle,
126
127
  className,
127
128
  style,
@@ -244,6 +245,7 @@ export function RadioListItem({
244
245
  children: description
245
246
  }) : undefined,
246
247
  endContent: endContent,
248
+ align: align,
247
249
  xstyle: [
248
250
  // Hover reaches the radio visual through this ancestor marker rather
249
251
  // than props, so hovering the row tints the control. The marker rides
@@ -13,6 +13,11 @@
13
13
  * `TopNavMenu` use). Hover is a progressive enhancement over the popover's
14
14
  * click behavior and is inert on coarse pointers.
15
15
  *
16
+ * Nested rows span the full width of the nav list, like top-level rows, so
17
+ * their hover and selected fill lines up with the rows above them. The
18
+ * nesting indent sits inside the row as extra inline-start padding, one step
19
+ * per level, tracked through a private depth context.
20
+ *
16
21
  * SYNC: When modified, update these files to stay in sync:
17
22
  * - /packages/core/src/SideNav/SideNav.doc.mjs
18
23
  * - /packages/core/src/SideNav/SideNav.test.tsx
@@ -84,7 +89,9 @@ export interface SideNavItemProps extends BaseProps<HTMLElement> {
84
89
  */
85
90
  actions?: ReactNode;
86
91
  /**
87
- * Sub-items for nesting.
92
+ * Sub-items for nesting. Nested items span the full width of the nav
93
+ * list, like top-level items; their content is indented one step per
94
+ * nesting level.
88
95
  */
89
96
  children?: ReactNode;
90
97
  /**
@@ -1 +1 @@
1
- {"version":3,"file":"SideNavItem.d.ts","sourceRoot":"","sources":["../../src/SideNav/SideNavItem.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;;;;;;;;GAqBG;AAEH,OAAO,EAML,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AAYf,OAAO,EAAuB,KAAK,QAAQ,EAAC,MAAM,SAAS,CAAC;AAE5D,OAAO,KAAK,EAAC,iBAAiB,EAAC,MAAM,eAAe,CAAC;AAIrD,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAE5C,OAAO,EAAgB,KAAK,WAAW,EAAC,MAAM,iCAAiC,CAAC;AA4PhF,MAAM,WAAW,gBAAiB,SAAQ,SAAS,CAAC,WAAW,CAAC;IAC9D,wCAAwC;IACxC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,WAAW,CAAC,CAAC;IAC7B;;;;OAIG;IACH,EAAE,CAAC,EAAE,iBAAiB,CAAC;IACvB;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,IAAI,CAAC,EAAE,SAAS,GAAG,QAAQ,CAAC;IAC5B;;OAEG;IACH,YAAY,CAAC,EAAE,SAAS,GAAG,QAAQ,CAAC;IACpC;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,OAAO,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,KAAK,IAAI,CAAC;IACxC;;;;OAIG;IACH,UAAU,CAAC,EAAE,SAAS,CAAC;IACvB;;;;;;;;;;;OAWG;IACH,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB;;OAEG;IACH,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB;;;;;;;;;;OAUG;IACH,WAAW,CAAC,EACR,OAAO,GACP;QACE,kBAAkB,CAAC,EAAE,OAAO,CAAC;QAC7B,WAAW,CAAC,EAAE,OAAO,CAAC;QACtB,iBAAiB,CAAC,EAAE,CAAC,WAAW,EAAE,OAAO,KAAK,IAAI,CAAC;KACpD,CAAC;IACN;;;OAGG;IACH,IAAI,CAAC,EAAE,WAAW,CAAC;CACpB;AAMD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6BG;AACH,wBAAgB,WAAW,CAAC,EAC1B,EAAE,EACF,KAAK,EACL,IAAI,EACJ,YAAY,EACZ,UAAkB,EAClB,UAAkB,EAClB,IAAI,EACJ,OAAO,EACP,UAAU,EACV,OAAO,EACP,QAAQ,EACR,WAAW,EAAE,eAAe,EAC5B,IAAW,EACX,aAAa,EAAE,MAAM,EACrB,GAAG,EACH,MAAM,EACN,GAAG,IAAI,EACR,EAAE,gBAAgB,sCA4YlB;yBA9Ze,WAAW"}
1
+ {"version":3,"file":"SideNavItem.d.ts","sourceRoot":"","sources":["../../src/SideNav/SideNavItem.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;;;;;;;;;;;;;GA0BG;AAEH,OAAO,EAQL,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AAYf,OAAO,EAAuB,KAAK,QAAQ,EAAC,MAAM,SAAS,CAAC;AAE5D,OAAO,KAAK,EAAC,iBAAiB,EAAC,MAAM,eAAe,CAAC;AAIrD,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAE5C,OAAO,EAAgB,KAAK,WAAW,EAAC,MAAM,iCAAiC,CAAC;AA4ShF,MAAM,WAAW,gBAAiB,SAAQ,SAAS,CAAC,WAAW,CAAC;IAC9D,wCAAwC;IACxC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,WAAW,CAAC,CAAC;IAC7B;;;;OAIG;IACH,EAAE,CAAC,EAAE,iBAAiB,CAAC;IACvB;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,IAAI,CAAC,EAAE,SAAS,GAAG,QAAQ,CAAC;IAC5B;;OAEG;IACH,YAAY,CAAC,EAAE,SAAS,GAAG,QAAQ,CAAC;IACpC;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,OAAO,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,KAAK,IAAI,CAAC;IACxC;;;;OAIG;IACH,UAAU,CAAC,EAAE,SAAS,CAAC;IACvB;;;;;;;;;;;OAWG;IACH,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB;;;;OAIG;IACH,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB;;;;;;;;;;OAUG;IACH,WAAW,CAAC,EACR,OAAO,GACP;QACE,kBAAkB,CAAC,EAAE,OAAO,CAAC;QAC7B,WAAW,CAAC,EAAE,OAAO,CAAC;QACtB,iBAAiB,CAAC,EAAE,CAAC,WAAW,EAAE,OAAO,KAAK,IAAI,CAAC;KACpD,CAAC;IACN;;;OAGG;IACH,IAAI,CAAC,EAAE,WAAW,CAAC;CACpB;AAMD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6BG;AACH,wBAAgB,WAAW,CAAC,EAC1B,EAAE,EACF,KAAK,EACL,IAAI,EACJ,YAAY,EACZ,UAAkB,EAClB,UAAkB,EAClB,IAAI,EACJ,OAAO,EACP,UAAU,EACV,OAAO,EACP,QAAQ,EACR,WAAW,EAAE,eAAe,EAC5B,IAAW,EACX,aAAa,EAAE,MAAM,EACrB,GAAG,EACH,MAAM,EACN,GAAG,IAAI,EACR,EAAE,gBAAgB,sCAkalB;yBApbe,WAAW"}
@@ -17,6 +17,11 @@
17
17
  * `TopNavMenu` use). Hover is a progressive enhancement over the popover's
18
18
  * click behavior and is inert on coarse pointers.
19
19
  *
20
+ * Nested rows span the full width of the nav list, like top-level rows, so
21
+ * their hover and selected fill lines up with the rows above them. The
22
+ * nesting indent sits inside the row as extra inline-start padding, one step
23
+ * per level, tracked through a private depth context.
24
+ *
20
25
  * SYNC: When modified, update these files to stay in sync:
21
26
  * - /packages/core/src/SideNav/SideNav.doc.mjs
22
27
  * - /packages/core/src/SideNav/SideNav.test.tsx
@@ -24,7 +29,7 @@
24
29
  * - /apps/storybook/stories/SideNav.stories.tsx
25
30
  * - /packages/cli/assets/templates/blocks/components/SideNav/ (showcase blocks)
26
31
  */
27
- import { useCallback, useId, useMemo, useRef, useState } from 'react';
32
+ import { createContext, use, useCallback, useId, useMemo, useRef, useState } from 'react';
28
33
  import * as stylex from '@stylexjs/stylex';
29
34
  import "../theme/tokens.stylex.js";
30
35
  import { colorVars, spacingVars, sizeVars, fontWeightVars, typeScaleVars, durationVars, easeVars, radiusVars } from "../theme/tokens.stylex.js";
@@ -133,6 +138,47 @@ const styles = {
133
138
  }
134
139
  };
135
140
 
141
+ // Nesting indent, drawn inside the row: one `--spacing-6` step per nesting
142
+ // level. The row itself stays full width, so its hover and selected fill
143
+ // matches a top-level row's.
144
+ // - `sm` / `md` — the ordinary row, where the row element is the link or
145
+ // button: its own inline-start padding plus the steps.
146
+ // SYNC: the base padding matches navItemStyles.sm / .md / .lg.
147
+ // - `primary` — the row-wrapper path: the wrapper keeps its base padding and
148
+ // the steps go on the primary link or button, so the whole indent is part
149
+ // of the click target rather than dead space that still shows feedback.
150
+ const _temp = {
151
+ kZCmMZ: "xnvo3vl",
152
+ "$$css": true
153
+ };
154
+ const _temp2 = {
155
+ kZCmMZ: "xnvo3vl",
156
+ "$$css": true
157
+ };
158
+ const _temp3 = {
159
+ kZCmMZ: "xnvo3vl",
160
+ "$$css": true
161
+ };
162
+ const indentStyles = {
163
+ sm: depth => [_temp, {
164
+ "--x-paddingInlineStart": (val => typeof val === "number" ? val + "px" : val != null ? val : undefined)(`calc(${spacingVars['--spacing-1']} + ${depth} * ${spacingVars['--spacing-6']})`)
165
+ }],
166
+ md: depth => [_temp2, {
167
+ "--x-paddingInlineStart": (val => typeof val === "number" ? val + "px" : val != null ? val : undefined)(`calc(${spacingVars['--spacing-2']} + ${depth} * ${spacingVars['--spacing-6']})`)
168
+ }],
169
+ primary: depth => [_temp3, {
170
+ "--x-paddingInlineStart": (val => typeof val === "number" ? val + "px" : val != null ? val : undefined)(`calc(${depth} * ${spacingVars['--spacing-6']})`)
171
+ }]
172
+ };
173
+
174
+ /**
175
+ * How many SideNavItems deep the current item sits: 0 at the top level,
176
+ * 1 inside one parent, and so on. A collapsed rail's flyout resets it to 0,
177
+ * since the flyout lists a parent's children as its own top level.
178
+ */
179
+ const SideNavItemDepthContext = /*#__PURE__*/createContext(0);
180
+ SideNavItemDepthContext.displayName = 'SideNavItemDepthContext';
181
+
136
182
  /**
137
183
  * Cascaded to the `actions` slot through `SizeContext` so a consumer's row
138
184
  * controls come out the same height as the built-in expand/collapse toggle,
@@ -259,6 +305,7 @@ export function SideNavItem({
259
305
  const id = useId();
260
306
  const hasChildren = !!children;
261
307
  const itemRef = useRef(null);
308
+ const depth = use(SideNavItemDepthContext);
262
309
 
263
310
  // Popover for collapsed items with children
264
311
  const popover = usePopover({
@@ -391,7 +438,10 @@ export function SideNavItem({
391
438
  children: label
392
439
  }), /*#__PURE__*/_jsx(SideNavCollapseContext, {
393
440
  value: EXPANDED_COLLAPSE_STATE,
394
- children: children
441
+ children: /*#__PURE__*/_jsx(SideNavItemDepthContext, {
442
+ value: 0,
443
+ children: children
444
+ })
395
445
  })]
396
446
  }), {
397
447
  placement: 'end',
@@ -457,6 +507,15 @@ export function SideNavItem({
457
507
  disabled: isDisabled ? 'disabled' : null
458
508
  });
459
509
  const itemStyleArgs = [navItemStyles.item, interactionOverlayStyles.backgroundColor, navItemStyles[size], isSelected && navItemStyles.selected, isDisabled && navItemStyles.disabled];
510
+ const rowIndent = depth > 0 && indentStyles[size === 'sm' ? 'sm' : 'md'](depth);
511
+ const primaryIndent = depth > 0 && indentStyles.primary(depth);
512
+
513
+ // The indent is a runtime value, so it reaches the element as an inline
514
+ // style. These props are spread after `rest`, so fold the caller's `style`
515
+ // back in (caller wins) rather than letting the indent replace it.
516
+ const callerStyle = {
517
+ style: rest.style
518
+ };
460
519
 
461
520
  // Three shapes of the same row appearance:
462
521
  // - `rowProps` — split-action path (toggle, no actions): presentational
@@ -471,7 +530,7 @@ export function SideNavItem({
471
530
  ...pressable
472
531
  };
473
532
  const focusableRowProps = {
474
- ...mergeProps(itemThemeProps, focusOutlineProps.focusVisible(...itemStyleArgs)),
533
+ ...mergeProps(itemThemeProps, mergeProps(focusOutlineProps.focusVisible(...itemStyleArgs, rowIndent), callerStyle)),
475
534
  ...pressable
476
535
  };
477
536
  const actionsRowProps = {
@@ -511,10 +570,10 @@ export function SideNavItem({
511
570
  onClick: handleClick,
512
571
  ...rest,
513
572
  ...rowPrimaryAriaProps,
514
- ...(hasActions ?
573
+ ...mergeProps(hasActions ?
515
574
  // The wrapper rings for this element; suppressing here is what
516
575
  // keeps the UA's own ring from painting inside that one.
517
- focusOutlineProps.suppressed(styles.splitAction) : focusOutlineProps.focusVisible(styles.splitAction)),
576
+ focusOutlineProps.suppressed(styles.splitAction, primaryIndent) : focusOutlineProps.focusVisible(styles.splitAction, primaryIndent), callerStyle),
518
577
  children: itemContent
519
578
  }), hasIndependentToggle && /*#__PURE__*/_jsx("button", {
520
579
  type: "button",
@@ -575,21 +634,24 @@ export function SideNavItem({
575
634
  inert: isItemCollapsed ? true : undefined,
576
635
  ...{
577
636
  0: {
578
- className: "xrvj5dj x1tu4anv x1qn9uv2 x80gvsz x12w9bfk xlr8y92"
637
+ className: "xrvj5dj x1tu4anv x1rea2x4 x6kj92 xd00j3c x1eizr8u xsr0bmt xostmdb x1k6wr6r xlr8y92"
579
638
  },
580
639
  1: {
581
- className: "xrvj5dj x1qn9uv2 x80gvsz x12w9bfk xlr8y92 xihq33y"
640
+ className: "xrvj5dj x6kj92 xd00j3c x1eizr8u xsr0bmt xlr8y92 xihq33y xb3r6kr xf1rc6"
582
641
  }
583
642
  }[!!isItemCollapsed << 0],
584
643
  children: /*#__PURE__*/_jsxs("div", {
585
644
  ...{
586
- className: "xb3r6kr x2lwn1j x31w388"
645
+ className: "x2lwn1j"
587
646
  },
588
647
  children: [/*#__PURE__*/_jsx("span", {
589
648
  id: `${id}-label`,
590
649
  hidden: true,
591
650
  children: label
592
- }), children]
651
+ }), /*#__PURE__*/_jsx(SideNavItemDepthContext, {
652
+ value: depth + 1,
653
+ children: children
654
+ })]
593
655
  })
594
656
  })]
595
657
  });