@astryxdesign/core 0.7.2-canary.1c89935 → 0.7.2-canary.2bb6c74

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 (117) hide show
  1. package/dist/AppShell/AppShell.d.ts.map +1 -1
  2. package/dist/AppShell/AppShell.js +40 -1
  3. package/dist/Breadcrumbs/BreadcrumbItem.d.ts.map +1 -1
  4. package/dist/Breadcrumbs/BreadcrumbItem.js +5 -2
  5. package/dist/CommandPalette/CommandPaletteInput.d.ts +1 -1
  6. package/dist/CommandPalette/CommandPaletteInput.d.ts.map +1 -1
  7. package/dist/CommandPalette/CommandPaletteInput.js +37 -5
  8. package/dist/ContextMenu/ContextMenu.d.ts.map +1 -1
  9. package/dist/ContextMenu/ContextMenu.js +5 -2
  10. package/dist/DropdownMenu/DropdownMenu.d.ts +1 -1
  11. package/dist/DropdownMenu/DropdownMenu.d.ts.map +1 -1
  12. package/dist/DropdownMenu/DropdownMenu.js +82 -10
  13. package/dist/DropdownMenu/DropdownMenuContext.d.ts +17 -0
  14. package/dist/DropdownMenu/DropdownMenuContext.d.ts.map +1 -1
  15. package/dist/DropdownMenu/DropdownMenuContext.js +21 -0
  16. package/dist/DropdownMenu/DropdownMenuSubMenu.d.ts.map +1 -1
  17. package/dist/DropdownMenu/DropdownMenuSubMenu.js +15 -4
  18. package/dist/DropdownMenu/lazyMenuBottomSheet.d.ts +24 -0
  19. package/dist/DropdownMenu/lazyMenuBottomSheet.d.ts.map +1 -0
  20. package/dist/DropdownMenu/lazyMenuBottomSheet.js +46 -0
  21. package/dist/Grid/GridSpan.d.ts.map +1 -1
  22. package/dist/Grid/GridSpan.js +1 -0
  23. package/dist/Heading/Heading.d.ts.map +1 -1
  24. package/dist/Heading/Heading.js +4 -2
  25. package/dist/MetadataList/MetadataList.d.ts.map +1 -1
  26. package/dist/MetadataList/MetadataList.js +5 -1
  27. package/dist/MetadataList/MetadataListContext.d.ts +1 -1
  28. package/dist/MetadataList/MetadataListContext.d.ts.map +1 -1
  29. package/dist/MobileNav/MobileNav.d.ts +9 -0
  30. package/dist/MobileNav/MobileNav.d.ts.map +1 -1
  31. package/dist/MobileNav/MobileNav.js +30 -3
  32. package/dist/RadioList/RadioList.d.ts +1 -1
  33. package/dist/RadioList/RadioList.d.ts.map +1 -1
  34. package/dist/RadioList/RadioList.js +6 -2
  35. package/dist/SideNav/SideNavItem.d.ts +8 -1
  36. package/dist/SideNav/SideNavItem.d.ts.map +1 -1
  37. package/dist/SideNav/SideNavItem.js +71 -9
  38. package/dist/Text/Text.d.ts.map +1 -1
  39. package/dist/Text/Text.js +4 -2
  40. package/dist/ToggleButton/ToggleButton.d.ts +3 -2
  41. package/dist/ToggleButton/ToggleButton.d.ts.map +1 -1
  42. package/dist/ToggleButton/ToggleButton.js +12 -1
  43. package/dist/TopNav/TopNavMegaMenu.d.ts.map +1 -1
  44. package/dist/TopNav/TopNavMegaMenu.js +3 -3
  45. package/dist/TopNav/TopNavMenu.d.ts.map +1 -1
  46. package/dist/TopNav/TopNavMenu.js +3 -3
  47. package/dist/TreeList/TreeList.d.ts.map +1 -1
  48. package/dist/TreeList/TreeList.js +1 -0
  49. package/dist/TreeList/TreeListBranches.d.ts.map +1 -1
  50. package/dist/TreeList/TreeListBranches.js +2 -2
  51. package/dist/TreeList/TreeListItem.d.ts.map +1 -1
  52. package/dist/TreeList/TreeListItem.js +57 -9
  53. package/dist/astryx.css +12 -1
  54. package/dist/hooks/useMenuHover.d.ts.map +1 -1
  55. package/dist/hooks/useMenuHover.js +18 -13
  56. package/package.json +3 -3
  57. package/scripts/agent-doc-state.mjs +38 -0
  58. package/scripts/postinstall.mjs +1 -1
  59. package/src/AppShell/AppShell.tsx +45 -1
  60. package/src/Avatar/Avatar.doc.mjs +5 -3
  61. package/src/AvatarGroup/AvatarGroup.doc.mjs +3 -2
  62. package/src/Breadcrumbs/BreadcrumbItem.tsx +4 -1
  63. package/src/Breadcrumbs/Breadcrumbs.test.tsx +30 -1
  64. package/src/Card/Card.doc.mjs +1 -1
  65. package/src/Chat/__tests__/ChatMessageMetadata.a11y.chromium.spec.ts +3 -1
  66. package/src/CommandPalette/CommandPaletteInput.test.tsx +53 -4
  67. package/src/CommandPalette/CommandPaletteInput.tsx +33 -3
  68. package/src/CommandPalette/__tests__/CommandPaletteInputAudit.a11y.chromium.spec.ts +335 -0
  69. package/src/CommandPalette/__tests__/CommandPaletteItemAudit.a11y.chromium.spec.ts +292 -0
  70. package/src/ContextMenu/ContextMenu.doc.mjs +2 -3
  71. package/src/ContextMenu/ContextMenu.tsx +4 -1
  72. package/src/ContextMenu/__tests__/ContextMenuAudit.a11y.chromium.spec.ts +438 -0
  73. package/src/DropdownMenu/DropdownMenu.ssr.test.tsx +57 -0
  74. package/src/DropdownMenu/DropdownMenu.test.tsx +55 -2
  75. package/src/DropdownMenu/DropdownMenu.tsx +81 -10
  76. package/src/DropdownMenu/DropdownMenuContext.tsx +24 -0
  77. package/src/DropdownMenu/DropdownMenuDivider.spec.md +192 -0
  78. package/src/DropdownMenu/DropdownMenuLazySheet.test.tsx +126 -0
  79. package/src/DropdownMenu/DropdownMenuSubMenu.test.tsx +185 -0
  80. package/src/DropdownMenu/DropdownMenuSubMenu.tsx +17 -3
  81. package/src/DropdownMenu/__tests__/DropdownMenuDividerAudit.a11y.chromium.spec.ts +280 -0
  82. package/src/DropdownMenu/__tests__/warmMenuBottomSheet.tsx +43 -0
  83. package/src/DropdownMenu/lazyMenuBottomSheet.ts +71 -0
  84. package/src/Grid/GridSpan.tsx +3 -0
  85. package/src/Heading/Heading.test.tsx +57 -0
  86. package/src/Heading/Heading.tsx +6 -2
  87. package/src/MetadataList/MetadataList.doc.mjs +2 -2
  88. package/src/MetadataList/MetadataList.test.tsx +38 -0
  89. package/src/MetadataList/MetadataList.tsx +8 -1
  90. package/src/MetadataList/MetadataListContext.tsx +1 -1
  91. package/src/MobileNav/MobileNav.tsx +30 -3
  92. package/src/MobileNav/MobileNavCloseEdgeCases.test.tsx +173 -15
  93. package/src/MoreMenu/MoreMenu.test.tsx +5 -1
  94. package/src/RadioList/RadioList.fr10.test.tsx +45 -2
  95. package/src/RadioList/RadioList.tsx +4 -1
  96. package/src/SideNav/SideNav.test.tsx +179 -0
  97. package/src/SideNav/SideNavItem.doc.mjs +2 -2
  98. package/src/SideNav/SideNavItem.tsx +96 -17
  99. package/src/Slider/Slider.spec.md +39 -18
  100. package/src/Text/Text.test.tsx +57 -0
  101. package/src/Text/Text.tsx +6 -2
  102. package/src/TimeInput/TimeInput.fr10.test.tsx +15 -0
  103. package/src/ToggleButton/ToggleButton.test.tsx +95 -0
  104. package/src/ToggleButton/ToggleButton.tsx +12 -1
  105. package/src/TopNav/TopNavMegaMenu.test.tsx +22 -0
  106. package/src/TopNav/TopNavMegaMenu.tsx +7 -3
  107. package/src/TopNav/TopNavMenu.test.tsx +19 -0
  108. package/src/TopNav/TopNavMenu.tsx +11 -3
  109. package/src/TreeList/TreeList.doc.mjs +1 -0
  110. package/src/TreeList/TreeList.test.tsx +327 -6
  111. package/src/TreeList/TreeList.tsx +5 -1
  112. package/src/TreeList/TreeListBranches.tsx +6 -0
  113. package/src/TreeList/TreeListItem.tsx +88 -13
  114. package/src/docPropLiterals.test.ts +36 -10
  115. package/src/hooks/useMenuHover.ts +18 -13
  116. package/src/postinstall.test.mjs +46 -0
  117. package/src/theme/derivedVarRegistry.test.ts +4 -0
@@ -1 +1 @@
1
- {"version":3,"file":"AppShell.d.ts","sourceRoot":"","sources":["../../src/AppShell/AppShell.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B;;;;;;;;;;;;;;GAcG;AAEH,OAAO,EAQL,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AAmBf,OAAO,KAAK,EAAC,WAAW,EAAC,MAAM,gBAAgB,CAAC;AAChD,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAQ5C,OAAO,EAEL,KAAK,mBAAmB,EACzB,MAAM,2BAA2B,CAAC;AACnC,OAAO,KAAK,EAAC,kBAAkB,EAAC,MAAM,SAAS,CAAC;AAwBhD;;;GAGG;AACH,MAAM,MAAM,kBAAkB,GAAG,mBAAmB,GAAG,MAAM,CAAC;AAE9D;;;;;;;GAOG;AAEH;;GAEG;AACH,MAAM,MAAM,eAAe,GAAG,MAAM,kBAAkB,CAAC;AAEvD;;;GAGG;AACH,MAAM,WAAW,eAAe;IAC9B;;;;OAIG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IAEpB;;;OAGG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;IAEjB;;OAEG;IACH,YAAY,CAAC,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,IAAI,CAAC;IAEzC;;;;OAIG;IACH,OAAO,CAAC,EAAE,SAAS,CAAC;IAEpB;;;;;;OAMG;IACH,UAAU,CAAC,EAAE,kBAAkB,CAAC;IAEhC;;;;;;;;;;OAUG;IACH,eAAe,CAAC,EAAE,OAAO,CAAC;CAC3B;AAED,MAAM,WAAW,aAAc,SAAQ,SAAS,CAAC,cAAc,CAAC;IAC9D,wCAAwC;IACxC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;IAChC;;;;;;;OAOG;IACH,OAAO,CAAC,EAAE,eAAe,CAAC;IAE1B;;;OAGG;IACH,MAAM,CAAC,EAAE,SAAS,CAAC;IAEnB;;OAEG;IACH,QAAQ,EAAE,SAAS,CAAC;IAEpB;;;;;;;OAOG;IACH,cAAc,CAAC,EAAE,WAAW,CAAC;IAE7B;;;;;OAKG;IACH,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAEzB;;;;;;;;;;;;;;;;;;;;;OAqBG;IACH,SAAS,CAAC,EAAE,KAAK,GAAG,eAAe,GAAG,SAAS,CAAC;IAEhD;;;;;;;;;;;;;;;;;;;;;;;;;OAyBG;IACH,OAAO,CAAC,EAAE,SAAS,CAAC;IAEpB;;;OAGG;IACH,MAAM,CAAC,EAAE,SAAS,CAAC;CACpB;AAkLD;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH,wBAAgB,QAAQ,CAAC,EACvB,OAAoB,EACpB,MAAM,EACN,QAAQ,EACR,cAAc,EACd,aAAa,EAAE,UAAU,EACzB,MAAe,EACf,SAAS,EACT,OAAO,EACP,MAAM,EACN,MAAM,EACN,SAAS,EACT,KAAK,EACL,GAAG,EACH,GAAG,IAAI,EACR,EAAE,aAAa,qBA6Zf;yBA5ae,QAAQ"}
1
+ {"version":3,"file":"AppShell.d.ts","sourceRoot":"","sources":["../../src/AppShell/AppShell.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B;;;;;;;;;;;;;;GAcG;AAEH,OAAO,EAQL,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AAoBf,OAAO,KAAK,EAAC,WAAW,EAAC,MAAM,gBAAgB,CAAC;AAChD,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAQ5C,OAAO,EAEL,KAAK,mBAAmB,EACzB,MAAM,2BAA2B,CAAC;AACnC,OAAO,KAAK,EAAC,kBAAkB,EAAC,MAAM,SAAS,CAAC;AAsChD;;;GAGG;AACH,MAAM,MAAM,kBAAkB,GAAG,mBAAmB,GAAG,MAAM,CAAC;AAE9D;;;;;;;GAOG;AAEH;;GAEG;AACH,MAAM,MAAM,eAAe,GAAG,MAAM,kBAAkB,CAAC;AAEvD;;;GAGG;AACH,MAAM,WAAW,eAAe;IAC9B;;;;OAIG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IAEpB;;;OAGG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;IAEjB;;OAEG;IACH,YAAY,CAAC,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,IAAI,CAAC;IAEzC;;;;OAIG;IACH,OAAO,CAAC,EAAE,SAAS,CAAC;IAEpB;;;;;;OAMG;IACH,UAAU,CAAC,EAAE,kBAAkB,CAAC;IAEhC;;;;;;;;;;OAUG;IACH,eAAe,CAAC,EAAE,OAAO,CAAC;CAC3B;AAED,MAAM,WAAW,aAAc,SAAQ,SAAS,CAAC,cAAc,CAAC;IAC9D,wCAAwC;IACxC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;IAChC;;;;;;;OAOG;IACH,OAAO,CAAC,EAAE,eAAe,CAAC;IAE1B;;;OAGG;IACH,MAAM,CAAC,EAAE,SAAS,CAAC;IAEnB;;OAEG;IACH,QAAQ,EAAE,SAAS,CAAC;IAEpB;;;;;;;OAOG;IACH,cAAc,CAAC,EAAE,WAAW,CAAC;IAE7B;;;;;OAKG;IACH,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAEzB;;;;;;;;;;;;;;;;;;;;;OAqBG;IACH,SAAS,CAAC,EAAE,KAAK,GAAG,eAAe,GAAG,SAAS,CAAC;IAEhD;;;;;;;;;;;;;;;;;;;;;;;;;OAyBG;IACH,OAAO,CAAC,EAAE,SAAS,CAAC;IAEpB;;;OAGG;IACH,MAAM,CAAC,EAAE,SAAS,CAAC;CACpB;AAkLD;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH,wBAAgB,QAAQ,CAAC,EACvB,OAAoB,EACpB,MAAM,EACN,QAAQ,EACR,cAAc,EACd,aAAa,EAAE,UAAU,EACzB,MAAe,EACf,SAAS,EACT,OAAO,EACP,MAAM,EACN,MAAM,EACN,SAAS,EACT,KAAK,EACL,GAAG,EACH,GAAG,IAAI,EACR,EAAE,aAAa,qBA0bf;yBAzce,QAAQ"}
@@ -29,6 +29,7 @@ import { LayoutHeader } from "../Layout/LayoutHeader.js";
29
29
  import { LayoutPanel } from "../Layout/LayoutPanel.js";
30
30
  import { LayoutContent } from "../Layout/LayoutContent.js";
31
31
  import { MobileNavToggle } from "../MobileNav/MobileNavToggle.js";
32
+ import { MAX_CLOSE_DELAY_MS as MOBILE_NAV_MAX_CLOSE_DELAY_MS } from "../MobileNav/MobileNav.js";
32
33
  import { SideNavRenderContext } from "../SideNav/SideNavRenderContext.js";
33
34
  import { TopNavRenderContext } from "../TopNav/TopNavRenderContext.js";
34
35
  import { TopNavMobileContentContext } from "../TopNav/TopNavMobileContentContext.js";
@@ -62,6 +63,20 @@ const ActivityWrapper = HasActivity ? ({
62
63
 
63
64
  const MAIN_CONTENT_ID = 'astryx-app-shell-main';
64
65
 
66
+ /**
67
+ * Extra time, on top of MobileNav's own worst-case close delay, that
68
+ * AppShell waits before flipping its `Activity` boundary to `'hidden'`.
69
+ *
70
+ * React's `Activity` hides its subtree with `display: none !important`
71
+ * synchronously in the same commit as the mode flip, and re-runs the
72
+ * cleanup of every effect inside it — which would otherwise clear
73
+ * MobileNav's own scheduled `dialog.close()` before it fires, or cut off
74
+ * its slide-out CSS transition before it plays (#5701). Waiting strictly
75
+ * longer than MobileNav's own cap, rather than the same duration, means
76
+ * this never turns into a race decided by browser timer-firing order.
77
+ */
78
+ const ACTIVITY_HIDE_BUFFER_MS = 50;
79
+
65
80
  // =============================================================================
66
81
  // Types
67
82
  // =============================================================================
@@ -259,6 +274,30 @@ export function AppShell({
259
274
  const isBelowBreakpoint = useMediaQuery(breakpointQuery, sideNavBreakpoint === 'none' ? false : mobileNavConfig?.defaultIsMobile);
260
275
  const [uncontrolledMobileOpen, setUncontrolledMobileOpen] = useState(false);
261
276
  const isMobileNavOpen = mobileNavConfig?.isOpen ?? uncontrolledMobileOpen;
277
+
278
+ // Holds the mobile nav's `Activity` boundary visible for a beat after a
279
+ // close, so MobileNav's own close effect gets a real chance to run its
280
+ // slide-out transition and schedule its delayed `dialog.close()` before
281
+ // Activity hides the subtree (#5701). Only the CLOSE is deferred: opening
282
+ // reads `isMobileNavOpen` directly below, so a controlled open is visible in
283
+ // the commit that carries it instead of one effect later.
284
+ const [isMobileNavCloseHeld, setIsMobileNavCloseHeld] = useState(isMobileNavOpen);
285
+ // Arm the hold during render, from the open state itself, so no Effect has
286
+ // to copy props into state; the Effect below only owns the release timer.
287
+ if (isMobileNavOpen && !isMobileNavCloseHeld) {
288
+ setIsMobileNavCloseHeld(true);
289
+ }
290
+ useEffect(() => {
291
+ if (!HasActivity || isMobileNavOpen) {
292
+ return;
293
+ }
294
+ const delayMs = window.matchMedia('(prefers-reduced-motion: reduce)').matches ? 0 : MOBILE_NAV_MAX_CLOSE_DELAY_MS + ACTIVITY_HIDE_BUFFER_MS;
295
+ const timeout = setTimeout(() => {
296
+ setIsMobileNavCloseHeld(false);
297
+ }, delayMs);
298
+ return () => clearTimeout(timeout);
299
+ }, [isMobileNavOpen]);
300
+ const isMobileNavActivityVisible = isMobileNavOpen || isMobileNavCloseHeld;
262
301
  const mobileNavOnOpenChange = mobileNavConfig?.onOpenChange;
263
302
  const setMobileNavOpen = useCallback(open => {
264
303
  if (!mobileNavIsControlled) {
@@ -520,7 +559,7 @@ export function AppShell({
520
559
  start: sideNavContent,
521
560
  content: mainContent
522
561
  }), shouldRenderMobileNavReactNode && mobileNavReactNode, shouldRenderConfigContent && mobileNavConfigContent, isBelowBreakpoint && !mobileNavDisabled && mobileNavReactNode == null && !mobileNavConfigContent && /*#__PURE__*/_jsxs(ActivityWrapper, {
523
- mode: isMobileNavOpen ? 'visible' : 'hidden',
562
+ mode: isMobileNavActivityVisible ? 'visible' : 'hidden',
524
563
  children: [hasSideNav && !hasTopNav && /*#__PURE__*/_jsx(SideNavRenderContext, {
525
564
  value: "drawer",
526
565
  children: sideNav
@@ -1 +1 @@
1
- {"version":3,"file":"BreadcrumbItem.d.ts","sourceRoot":"","sources":["../../src/Breadcrumbs/BreadcrumbItem.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;;;;;;GAmBG;AAEH,OAAO,KAAK,EAAE,EAOZ,KAAK,SAAS,EACd,KAAK,UAAU,EAChB,MAAM,OAAO,CAAC;AAWf,OAAO,KAAK,EAAC,iBAAiB,EAAC,MAAM,eAAe,CAAC;AAErD,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAS5C,OAAO,EAGL,KAAK,gBAAgB,EACtB,MAAM,qCAAqC,CAAC;AAM7C,OAAO,KAAK,EAAC,kBAAkB,EAAC,MAAM,8BAA8B,CAAC;AAOrE,MAAM,WAAW,mBAAoB,SAAQ,IAAI,CAC/C,SAAS,CAAC,aAAa,CAAC,EACxB,SAAS,CACV;IACC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,aAAa,CAAC,CAAC;IAC/B;;;;OAIG;IACH,EAAE,CAAC,EAAE,iBAAiB,CAAC;IACvB;;OAEG;IACH,QAAQ,EAAE,SAAS,CAAC;IACpB;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,OAAO,CAAC,EAAE,CAAC,CAAC,EAAE,UAAU,CAAC,WAAW,CAAC,KAAK,IAAI,CAAC;IAC/C;;;;;OAKG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;OAEG;IACH,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB;;;;;;;;;;;;;OAaG;IACH,IAAI,CAAC,EAAE,kBAAkB,EAAE,GAAG,SAAS,CAAC;IACxC;;;;OAIG;IACH,QAAQ,CAAC,EAAE,gBAAgB,CAAC;CAC7B;AAsID;;;;;;;;;;;;;GAaG;AACH,wBAAgB,cAAc,CAAC,EAC7B,GAAG,EACH,EAAE,EACF,QAAQ,EACR,IAAI,EACJ,OAAO,EACP,SAAS,EAAE,aAAa,EACxB,SAAS,EACT,IAAI,EACJ,QAAQ,EACR,MAAM,EACN,SAAS,EACT,KAAK,EACL,aAAa,EAAE,MAAM,EACrB,GAAG,IAAI,EACR,EAAE,mBAAmB,qBAgMrB;yBA/Me,cAAc"}
1
+ {"version":3,"file":"BreadcrumbItem.d.ts","sourceRoot":"","sources":["../../src/Breadcrumbs/BreadcrumbItem.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;;;;;;GAmBG;AAEH,OAAO,KAAK,EAAE,EAOZ,KAAK,SAAS,EACd,KAAK,UAAU,EAChB,MAAM,OAAO,CAAC;AAWf,OAAO,KAAK,EAAC,iBAAiB,EAAC,MAAM,eAAe,CAAC;AAErD,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAS5C,OAAO,EAIL,KAAK,gBAAgB,EACtB,MAAM,qCAAqC,CAAC;AAM7C,OAAO,KAAK,EAAC,kBAAkB,EAAC,MAAM,8BAA8B,CAAC;AAOrE,MAAM,WAAW,mBAAoB,SAAQ,IAAI,CAC/C,SAAS,CAAC,aAAa,CAAC,EACxB,SAAS,CACV;IACC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,aAAa,CAAC,CAAC;IAC/B;;;;OAIG;IACH,EAAE,CAAC,EAAE,iBAAiB,CAAC;IACvB;;OAEG;IACH,QAAQ,EAAE,SAAS,CAAC;IACpB;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,OAAO,CAAC,EAAE,CAAC,CAAC,EAAE,UAAU,CAAC,WAAW,CAAC,KAAK,IAAI,CAAC;IAC/C;;;;;OAKG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;OAEG;IACH,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB;;;;;;;;;;;;;OAaG;IACH,IAAI,CAAC,EAAE,kBAAkB,EAAE,GAAG,SAAS,CAAC;IACxC;;;;OAIG;IACH,QAAQ,CAAC,EAAE,gBAAgB,CAAC;CAC7B;AAsID;;;;;;;;;;;;;GAaG;AACH,wBAAgB,cAAc,CAAC,EAC7B,GAAG,EACH,EAAE,EACF,QAAQ,EACR,IAAI,EACJ,OAAO,EACP,SAAS,EAAE,aAAa,EACxB,SAAS,EACT,IAAI,EACJ,QAAQ,EACR,MAAM,EACN,SAAS,EACT,KAAK,EACL,aAAa,EAAE,MAAM,EACrB,GAAG,IAAI,EACR,EAAE,mBAAmB,qBAgMrB;yBA/Me,cAAc"}
@@ -37,7 +37,7 @@ import { useListFocus } from "../hooks/useListFocus.js";
37
37
  import { useTypeahead } from "../hooks/useTypeahead.js";
38
38
  import { layerAnimations } from "../Layer/layerAnimations.stylex.js";
39
39
  import { renderDropdownItems } from "../DropdownMenu/renderDropdownItems.js";
40
- import { DropdownMenuContext } from "../DropdownMenu/DropdownMenuContext.js";
40
+ import { DropdownMenuContext, DropdownMenuRootOpenContext } from "../DropdownMenu/DropdownMenuContext.js";
41
41
  import { MENU_ITEM_ROLES, MENU_ITEM_SELECTOR, MENU_BOUNDARY_SELECTOR } from "../DropdownMenu/menuItemRoles.js";
42
42
  import { useMergedRefs } from "../hooks/useMergedRefs.js";
43
43
  // =============================================================================
@@ -454,7 +454,10 @@ function BreadcrumbMenuTrigger({
454
454
  }),
455
455
  children: /*#__PURE__*/_jsx(DropdownMenuContext, {
456
456
  value: contextValue,
457
- children: menuContent
457
+ children: /*#__PURE__*/_jsx(DropdownMenuRootOpenContext, {
458
+ value: popover.isOpen,
459
+ children: menuContent
460
+ })
458
461
  })
459
462
  }), {
460
463
  placement: 'below',
@@ -68,7 +68,7 @@ export interface CommandPaletteInputProps extends Omit<BaseProps<HTMLInputElemen
68
68
  * </CommandPalette>
69
69
  * ```
70
70
  */
71
- export declare function CommandPaletteInput({ value: controlledValue, onValueChange, placeholder: placeholderFromProps, label, hasAutoFocus, endContent, onChange, onKeyDown, ref, xstyle, className, style, ...props }: CommandPaletteInputProps): import("react").JSX.Element;
71
+ export declare function CommandPaletteInput({ value: controlledValue, onValueChange, placeholder: placeholderFromProps, label, hasAutoFocus, endContent, onChange, onKeyDown, onFocus, onBlur, ref, xstyle, className, style, ...props }: CommandPaletteInputProps): import("react").JSX.Element;
72
72
  export declare namespace CommandPaletteInput {
73
73
  var displayName: string;
74
74
  }
@@ -1 +1 @@
1
- {"version":3,"file":"CommandPaletteInput.d.ts","sourceRoot":"","sources":["../../src/CommandPalette/CommandPaletteInput.tsx"],"names":[],"mappings":"AAGA;;;;;;;;;;GAUG;AAEH,OAAO,EAAiC,KAAK,SAAS,EAAC,MAAM,OAAO,CAAC;AAarE,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAkE5C,MAAM,WAAW,wBAAyB,SAAQ,IAAI,CACpD,SAAS,CAAC,gBAAgB,CAAC,EAC3B,UAAU,CACX;IACC,iEAAiE;IACjE,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,gBAAgB,CAAC,CAAC;IAElC;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf;;;OAGG;IACH,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAExC;;;OAGG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IAErB;;;;OAIG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf;;;OAGG;IACH,YAAY,CAAC,EAAE,OAAO,CAAC;IAEvB;;;;OAIG;IACH,UAAU,CAAC,EAAE,SAAS,CAAC;IAEvB,qDAAqD;IACrD,QAAQ,CAAC,EAAE,KAAK,CAAC,kBAAkB,CAAC,gBAAgB,CAAC,CAAC;CACvD;AAED;;;;;;;;;;;;;;;;;;GAkBG;AACH,wBAAgB,mBAAmB,CAAC,EAClC,KAAK,EAAE,eAAe,EACtB,aAAa,EACb,WAAW,EAAE,oBAAoB,EACjC,KAAK,EACL,YAAmB,EACnB,UAAU,EACV,QAAQ,EACR,SAAS,EACT,GAAG,EACH,MAAM,EACN,SAAS,EACT,KAAK,EACL,GAAG,KAAK,EACT,EAAE,wBAAwB,+BA2I1B;yBAzJe,mBAAmB"}
1
+ {"version":3,"file":"CommandPaletteInput.d.ts","sourceRoot":"","sources":["../../src/CommandPalette/CommandPaletteInput.tsx"],"names":[],"mappings":"AAGA;;;;;;;;;;GAUG;AAEH,OAAO,EAA2C,KAAK,SAAS,EAAC,MAAM,OAAO,CAAC;AAa/E,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAsE5C,MAAM,WAAW,wBAAyB,SAAQ,IAAI,CACpD,SAAS,CAAC,gBAAgB,CAAC,EAC3B,UAAU,CACX;IACC,iEAAiE;IACjE,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,gBAAgB,CAAC,CAAC;IAElC;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf;;;OAGG;IACH,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAExC;;;OAGG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IAErB;;;;OAIG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf;;;OAGG;IACH,YAAY,CAAC,EAAE,OAAO,CAAC;IAEvB;;;;OAIG;IACH,UAAU,CAAC,EAAE,SAAS,CAAC;IAEvB,qDAAqD;IACrD,QAAQ,CAAC,EAAE,KAAK,CAAC,kBAAkB,CAAC,gBAAgB,CAAC,CAAC;CACvD;AAED;;;;;;;;;;;;;;;;;;GAkBG;AACH,wBAAgB,mBAAmB,CAAC,EAClC,KAAK,EAAE,eAAe,EACtB,aAAa,EACb,WAAW,EAAE,oBAAoB,EACjC,KAAK,EACL,YAAmB,EACnB,UAAU,EACV,QAAQ,EACR,SAAS,EACT,OAAO,EACP,MAAM,EACN,GAAG,EACH,MAAM,EACN,SAAS,EACT,KAAK,EACL,GAAG,KAAK,EACT,EAAE,wBAAwB,+BAmK1B;yBAnLe,mBAAmB"}
@@ -13,7 +13,7 @@
13
13
  * - /apps/storybook/stories/CommandPaletteInput.stories.tsx
14
14
  * - /packages/cli/assets/templates/blocks/components/CommandPalette/ (showcase blocks)
15
15
  */
16
- import { useCallback, useEffect, useRef } from 'react';
16
+ import { useCallback, useEffect, useRef, useState } from 'react';
17
17
  import * as stylex from '@stylexjs/stylex';
18
18
  import { Icon } from "../Icon/index.js";
19
19
  import { Spinner } from "../Spinner/index.js";
@@ -23,6 +23,8 @@ import { colorVars, typeScaleVars, spacingVars, typographyVars } from "../theme/
23
23
  import { useCommandPaletteContext } from "./CommandPaletteContext.js";
24
24
  import { useDialogContext } from "../Dialog/DialogContext.js";
25
25
  import { themeProps } from "../utils/themeProps.js";
26
+ import { focusOutlineProps } from "../utils/focusOutline.stylex.js";
27
+ import { getInteractionModality, useInteractionModalityTracking } from "../utils/interactionModality.js";
26
28
  import { useTranslator } from "../i18n/index.js";
27
29
  import { useMergedRefs } from "../hooks/useMergedRefs.js";
28
30
  import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
@@ -35,6 +37,20 @@ const styles = {
35
37
  k8WAf4: "x8o8v82",
36
38
  kmuXW: "x2lah0s",
37
39
  $$css: true
40
+ },
41
+ input: {
42
+ kUk6DE: "x98rzlu",
43
+ k7Eaqz: "xeuugli",
44
+ kMzoRj: "xc342km",
45
+ ksu8eU: "xng3xce",
46
+ kWkggS: "xjbqb8w",
47
+ kMwMTN: "x1tgivj0",
48
+ kMv6JI: "x9ynric",
49
+ kGuDYH: "xjm74w1 xf9zqsd",
50
+ kLWn49: "xw6l6zx",
51
+ kmVPX3: "x1717udv",
52
+ k8Qsv1: "xeyghm5",
53
+ $$css: true
38
54
  }
39
55
  };
40
56
  /**
@@ -65,6 +81,8 @@ export function CommandPaletteInput({
65
81
  endContent,
66
82
  onChange,
67
83
  onKeyDown,
84
+ onFocus,
85
+ onBlur,
68
86
  ref,
69
87
  xstyle,
70
88
  className,
@@ -79,6 +97,20 @@ export function CommandPaletteInput({
79
97
  const hasListbox = ctx ? ctx.selectableItems.length > 0 : true;
80
98
  const dialogContext = useDialogContext();
81
99
  const inputRef = useRef(null);
100
+ const [isKeyboardFocus, setIsKeyboardFocus] = useState(false);
101
+
102
+ // Text-entry controls match :focus-visible after pointer focus in Chromium.
103
+ // Keep the shared selector, but narrow its ring to focus acquired through
104
+ // keyboard navigation so a click or pointer-opened palette stays unringed.
105
+ useInteractionModalityTracking();
106
+ const handleFocus = useCallback(event => {
107
+ setIsKeyboardFocus(getInteractionModality() === 'keyboard');
108
+ onFocus?.(event);
109
+ }, [onFocus]);
110
+ const handleBlur = useCallback(event => {
111
+ setIsKeyboardFocus(false);
112
+ onBlur?.(event);
113
+ }, [onBlur]);
82
114
 
83
115
  // Use context values as fallback
84
116
  const value = controlledValue ?? ctx?.search;
@@ -134,9 +166,7 @@ export function CommandPaletteInput({
134
166
  }), /*#__PURE__*/_jsx("input", {
135
167
  ...props,
136
168
  ref: useMergedRefs(ref, inputRef),
137
- ...{
138
- className: "x98rzlu xeuugli xc342km xng3xce x1a2a7pz xjbqb8w x1tgivj0 x9ynric xjm74w1 xf9zqsd xw6l6zx x1717udv xeyghm5"
139
- },
169
+ ...(isKeyboardFocus ? focusOutlineProps.focusVisible(styles.input) : focusOutlineProps.suppressed(styles.input)),
140
170
  type: "text",
141
171
  role: ctx ? 'combobox' : standaloneRole,
142
172
  "aria-expanded": ctx ? ctx.isOpen && hasListbox : callerSets('aria-expanded') ? props['aria-expanded'] : callerOwnsPopup || undefined,
@@ -153,7 +183,9 @@ export function CommandPaletteInput({
153
183
  handleValueChange?.(e.target.value);
154
184
  onChange?.(e);
155
185
  },
156
- onKeyDown: handleKeyDown
186
+ onKeyDown: handleKeyDown,
187
+ onFocus: handleFocus,
188
+ onBlur: handleBlur
157
189
  }), (ctx?.isBusy || hasEndContent) && /*#__PURE__*/_jsxs("span", {
158
190
  ...{
159
191
  className: "x78zum5 x6s0dn4 xzye2dw x2lah0s"
@@ -1 +1 @@
1
- {"version":3,"file":"ContextMenu.d.ts","sourceRoot":"","sources":["../../src/ContextMenu/ContextMenu.tsx"],"names":[],"mappings":"AAGA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA+BG;AAEH,OAAO,KASN,MAAM,OAAO,CAAC;AACf,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,OAAO,CAAC;AAoCrC,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAC5C,OAAO,KAAK,EAAC,YAAY,EAAC,MAAM,gBAAgB,CAAC;AAGjD,OAAO,KAAK,EACV,kBAAkB,EAClB,oBAAoB,EACpB,uBAAuB,EACvB,mBAAmB,EACpB,MAAM,8BAA8B,CAAC;AAGtC,OAAO,EAEL,KAAK,oBAAoB,EAC1B,MAAM,kCAAkC,CAAC;AA6G1C,MAAM,MAAM,mBAAmB,GAAG,oBAAoB,CAAC;AAEvD,MAAM,MAAM,sBAAsB,GAAG,uBAAuB,CAAC;AAE7D,MAAM,MAAM,kBAAkB,GAAG,mBAAmB,CAAC;AAErD,MAAM,MAAM,iBAAiB,GAAG,kBAAkB,CAAC;AAMnD,UAAU,oBAAqB,SAAQ,SAAS;IAC9C,oDAAoD;IACpD,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,WAAW,CAAC,CAAC;IAC7B;;;;;OAKG;IACH,SAAS,CAAC,EAAE,KAAK,GAAG,MAAM,CAAC;IAC3B;;;;;OAKG;IACH,aAAa,CAAC,EAAE,YAAY,GAAG,YAAY,EAAE,CAAC;IAC9C,+DAA+D;IAC/D,QAAQ,EAAE,SAAS,CAAC;IACpB,0CAA0C;IAC1C,SAAS,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAC5B,wCAAwC;IACxC,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IAC1B;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,4EAA4E;IAC5E,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,4CAA4C;IAC5C,YAAY,CAAC,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,IAAI,CAAC;IACzC;;;;;;;OAOG;IACH,YAAY,CAAC,EAAE,oBAAoB,CAAC;IACpC,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AAED,UAAU,oBAAqB,SAAQ,oBAAoB;IACzD,gDAAgD;IAChD,KAAK,EAAE,iBAAiB,EAAE,CAAC;IAC3B,WAAW,CAAC,EAAE,SAAS,CAAC;CACzB;AAED,UAAU,wBAAyB,SAAQ,oBAAoB;IAC7D,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,+CAA+C;IAC/C,WAAW,EAAE,SAAS,CAAC;CACxB;AAED,MAAM,MAAM,gBAAgB,GAAG,oBAAoB,GAAG,wBAAwB,CAAC;AAM/E;;;;;;;;;;;;;;;;;;;;;;GAsBG;AACH,wBAAgB,WAAW,CAAC,EAC1B,QAAQ,EACR,SAAS,EACT,IAAW,EACX,KAAK,EAAE,cAAc,EACrB,UAAkB,EAClB,YAAY,EACZ,YAAwB,EACxB,SAAiB,EACjB,GAAG,EACH,SAAS,EACT,KAAK,EACL,MAAM,EACN,aAAa,EACb,aAAa,EAAE,iBAAiB,EAChC,YAAY,EAAE,gBAAgB,EAC9B,WAAW,EAAE,eAAe,EAC5B,UAAU,EAAE,cAAc,EAC1B,aAAa,EAAE,iBAAiB,EAChC,aAAa,EAAE,MAAM,EACrB,GAAG,IAAI,EACR,EAAE,gBAAgB,qBAoelB;yBAzfe,WAAW"}
1
+ {"version":3,"file":"ContextMenu.d.ts","sourceRoot":"","sources":["../../src/ContextMenu/ContextMenu.tsx"],"names":[],"mappings":"AAGA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA+BG;AAEH,OAAO,KASN,MAAM,OAAO,CAAC;AACf,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,OAAO,CAAC;AAqCrC,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAC5C,OAAO,KAAK,EAAC,YAAY,EAAC,MAAM,gBAAgB,CAAC;AAGjD,OAAO,KAAK,EACV,kBAAkB,EAClB,oBAAoB,EACpB,uBAAuB,EACvB,mBAAmB,EACpB,MAAM,8BAA8B,CAAC;AAGtC,OAAO,EAEL,KAAK,oBAAoB,EAC1B,MAAM,kCAAkC,CAAC;AA6G1C,MAAM,MAAM,mBAAmB,GAAG,oBAAoB,CAAC;AAEvD,MAAM,MAAM,sBAAsB,GAAG,uBAAuB,CAAC;AAE7D,MAAM,MAAM,kBAAkB,GAAG,mBAAmB,CAAC;AAErD,MAAM,MAAM,iBAAiB,GAAG,kBAAkB,CAAC;AAMnD,UAAU,oBAAqB,SAAQ,SAAS;IAC9C,oDAAoD;IACpD,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,WAAW,CAAC,CAAC;IAC7B;;;;;OAKG;IACH,SAAS,CAAC,EAAE,KAAK,GAAG,MAAM,CAAC;IAC3B;;;;;OAKG;IACH,aAAa,CAAC,EAAE,YAAY,GAAG,YAAY,EAAE,CAAC;IAC9C,+DAA+D;IAC/D,QAAQ,EAAE,SAAS,CAAC;IACpB,0CAA0C;IAC1C,SAAS,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAC5B,wCAAwC;IACxC,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IAC1B;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,4EAA4E;IAC5E,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,4CAA4C;IAC5C,YAAY,CAAC,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,IAAI,CAAC;IACzC;;;;;;;OAOG;IACH,YAAY,CAAC,EAAE,oBAAoB,CAAC;IACpC,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AAED,UAAU,oBAAqB,SAAQ,oBAAoB;IACzD,gDAAgD;IAChD,KAAK,EAAE,iBAAiB,EAAE,CAAC;IAC3B,WAAW,CAAC,EAAE,SAAS,CAAC;CACzB;AAED,UAAU,wBAAyB,SAAQ,oBAAoB;IAC7D,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,+CAA+C;IAC/C,WAAW,EAAE,SAAS,CAAC;CACxB;AAED,MAAM,MAAM,gBAAgB,GAAG,oBAAoB,GAAG,wBAAwB,CAAC;AAM/E;;;;;;;;;;;;;;;;;;;;;;GAsBG;AACH,wBAAgB,WAAW,CAAC,EAC1B,QAAQ,EACR,SAAS,EACT,IAAW,EACX,KAAK,EAAE,cAAc,EACrB,UAAkB,EAClB,YAAY,EACZ,YAAwB,EACxB,SAAiB,EACjB,GAAG,EACH,SAAS,EACT,KAAK,EACL,MAAM,EACN,aAAa,EACb,aAAa,EAAE,iBAAiB,EAChC,YAAY,EAAE,gBAAgB,EAC9B,WAAW,EAAE,eAAe,EAC5B,UAAU,EAAE,cAAc,EAC1B,aAAa,EAAE,iBAAiB,EAChC,aAAa,EAAE,MAAM,EACrB,GAAG,IAAI,EACR,EAAE,gBAAgB,qBAselB;yBA3fe,WAAW"}
@@ -43,7 +43,7 @@ import { LayerDepthProvider } from "../Layer/LayerDepthContext.js";
43
43
  import { useLayerDismissal } from "../Layer/useLayerDismissal.js";
44
44
  import { MenuBottomSheetActionList } from "../DropdownMenu/MenuBottomSheetActionList.js";
45
45
  import { renderDropdownItems } from "../DropdownMenu/renderDropdownItems.js";
46
- import { DropdownMenuContext } from "../DropdownMenu/DropdownMenuContext.js";
46
+ import { DropdownMenuContext, DropdownMenuRootOpenContext } from "../DropdownMenu/DropdownMenuContext.js";
47
47
  import { MENU_ITEM_ROLES, MENU_ITEM_SELECTOR, MENU_BOUNDARY_SELECTOR, activateMenuItem } from "../DropdownMenu/menuItemRoles.js";
48
48
  import { useMenuOverflow } from "../DropdownMenu/useMenuOverflow.js";
49
49
  import { useMenuDrillIn } from "../DropdownMenu/useMenuDrillIn.js";
@@ -505,7 +505,10 @@ export function ContextMenu({
505
505
  ...mergeProps(themeProps('context-menu'), stylex.props(usesBottomSheet ? styles.sheetMenu : styles.menu, !usesBottomSheet && (hasOverflow ? styles.touchPanYPinchZoom : styles.touchPinchZoom), xstyle), className, style),
506
506
  children: /*#__PURE__*/_jsx(DropdownMenuContext, {
507
507
  value: contextValue,
508
- children: resolvedMenuContent
508
+ children: /*#__PURE__*/_jsx(DropdownMenuRootOpenContext, {
509
+ value: isOpen,
510
+ children: resolvedMenuContent
511
+ })
509
512
  })
510
513
  });
511
514
  const renderedBottomSheetContent = itemsProp !== undefined ? /*#__PURE__*/_jsxs("div", {
@@ -1,6 +1,6 @@
1
1
  /**
2
2
  * @file DropdownMenu.tsx
3
- * @input Uses React, StyleX, usePopover, MenuBottomSheet, Button, List,
3
+ * @input Uses React, StyleX, usePopover, MenuBottomSheet (lazy), Button, List,
4
4
  * useListFocus, and the shared viewport-safe menu-width resolver
5
5
  * @output Exports DropdownMenu with caller-selected popover or bottom-sheet
6
6
  * presentation
@@ -1 +1 @@
1
- {"version":3,"file":"DropdownMenu.d.ts","sourceRoot":"","sources":["../../src/DropdownMenu/DropdownMenu.tsx"],"names":[],"mappings":"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"}
1
+ {"version":3,"file":"DropdownMenu.d.ts","sourceRoot":"","sources":["../../src/DropdownMenu/DropdownMenu.tsx"],"names":[],"mappings":"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"}
@@ -4,7 +4,7 @@
4
4
 
5
5
  /**
6
6
  * @file DropdownMenu.tsx
7
- * @input Uses React, StyleX, usePopover, MenuBottomSheet, Button, List,
7
+ * @input Uses React, StyleX, usePopover, MenuBottomSheet (lazy), Button, List,
8
8
  * useListFocus, and the shared viewport-safe menu-width resolver
9
9
  * @output Exports DropdownMenu with caller-selected popover or bottom-sheet
10
10
  * presentation
@@ -42,7 +42,7 @@ import { Heading } from "../Heading/index.js";
42
42
  import { Icon } from "../Icon/index.js";
43
43
  import { renderDropdownItems } from "./renderDropdownItems.js";
44
44
  import { MENU_ITEM_ROLES, MENU_ITEM_SELECTOR, MENU_BOUNDARY_SELECTOR, activateMenuItem } from "./menuItemRoles.js";
45
- import { DropdownMenuContext } from "./DropdownMenuContext.js";
45
+ import { DropdownMenuContext, DropdownMenuRootOpenContext } from "./DropdownMenuContext.js";
46
46
  import { useIsomorphicLayoutEffect } from "../hooks/useIsomorphicLayoutEffect.js";
47
47
  import { useListFocus } from "../hooks/useListFocus.js";
48
48
  import { useMenuPress } from "../hooks/useMenuPress.js";
@@ -58,8 +58,8 @@ import { resolveMenuWidth } from "./menuWidth.js";
58
58
  import "../Layer/layerViewportInset.stylex.js";
59
59
  import { layerViewportInset } from "../Layer/layerViewportInset.stylex.js";
60
60
  import { useAdaptivePresentation } from "../hooks/useAdaptivePresentation.js";
61
- import { MenuBottomSheet } from "./MenuBottomSheet.js";
62
- import { MenuBottomSheetActionList } from "./MenuBottomSheetActionList.js";
61
+ // Loaded on demand: only the bottom-sheet presentation renders the sheet.
62
+ import { MenuBottomSheet, MenuBottomSheetActionList } from "./lazyMenuBottomSheet.js";
63
63
  import { layerAnimations } from "../Layer/layerAnimations.stylex.js";
64
64
  import "../theme/tokens.stylex.js";
65
65
  import { spacingVars, colorVars, radiusVars, durationVars, easeVars } from "../theme/tokens.stylex.js";
@@ -491,12 +491,41 @@ function DropdownMenuBottomSheet({
491
491
  if (!isOpen || openModalityRef.current !== 'keyboard') {
492
492
  return;
493
493
  }
494
- const frame = requestAnimationFrame(() => {
495
- actionListRef.current?.querySelector('button:not(:disabled), a[href]')?.focus({
496
- preventScroll: true
494
+ const findFirstAction = () => actionListRef.current?.querySelector('button:not(:disabled), a[href]') ?? null;
495
+ let observer = null;
496
+ let frame = requestAnimationFrame(() => {
497
+ const action = findFirstAction();
498
+ if (action != null) {
499
+ action.focus({
500
+ preventScroll: true
501
+ });
502
+ return;
503
+ }
504
+ // The sheet loads on demand, so a keyboard open can arrive before its
505
+ // rows exist. Wait for them, then focus a frame later so the sheet's
506
+ // own open-focus has already run.
507
+ observer = new MutationObserver(() => {
508
+ const loaded = findFirstAction();
509
+ if (loaded == null) {
510
+ return;
511
+ }
512
+ observer?.disconnect();
513
+ observer = null;
514
+ frame = requestAnimationFrame(() => {
515
+ loaded.focus({
516
+ preventScroll: true
517
+ });
518
+ });
519
+ });
520
+ observer.observe(document.body, {
521
+ childList: true,
522
+ subtree: true
497
523
  });
498
524
  });
499
- return () => cancelAnimationFrame(frame);
525
+ return () => {
526
+ cancelAnimationFrame(frame);
527
+ observer?.disconnect();
528
+ };
500
529
  }, [currentItems, isOpen]);
501
530
  useEffect(() => {
502
531
  if (!isOpen) {
@@ -693,6 +722,43 @@ function DropdownMenuPopover({
693
722
  // above it ends the gesture in flight through this ref.
694
723
  const cancelMenuPressRef = useRef(() => {});
695
724
 
725
+ // Submenu flyouts are `popover="manual"` elements nested inside the menu's
726
+ // `popover="auto"` element, so the browser's light dismiss of the menu never
727
+ // reaches them: without a sweep they keep their open state and their
728
+ // top-layer entry while the menu is hidden, and re-anchor to the viewport
729
+ // corner when the menu reopens (#6893). Closing them through the popover
730
+ // API lets useLayer's toggle handling reset their state. Only flyouts that
731
+ // are actually open are touched: `:popover-open` ships wherever
732
+ // `hidePopover` does (they are one API), and the display fallback keeps its
733
+ // own open signal (`display: block`) so it is guarded the same way.
734
+ const hideOpenFlyouts = useCallback(() => {
735
+ const menuPopover = contentRef.current;
736
+ if (!menuPopover) {
737
+ return;
738
+ }
739
+ // Innermost first: hiding a flyout may unmount the flyouts nested inside
740
+ // it, and a detached element no longer has the toggle listener that
741
+ // resets its open state.
742
+ const flyouts = [...menuPopover.querySelectorAll('[popover]')].reverse();
743
+ for (const flyout of flyouts) {
744
+ if (typeof flyout.hidePopover === 'function') {
745
+ if (flyout.matches(':popover-open')) {
746
+ flyout.hidePopover();
747
+ }
748
+ } else if (flyout.style.display === 'block') {
749
+ flyout.style.display = 'none';
750
+ const toggle = new Event('toggle', {
751
+ bubbles: false
752
+ });
753
+ Object.defineProperty(toggle, 'newState', {
754
+ value: 'closed',
755
+ configurable: true
756
+ });
757
+ flyout.dispatchEvent(toggle);
758
+ }
759
+ }
760
+ }, []);
761
+
696
762
  // Focus lands somewhere stated when the menu closes. A press outside that
697
763
  // landed on a focusable control has already moved focus there; leave it.
698
764
  // Otherwise — a row acted, Escape, a press on nothing — focus returns to
@@ -700,6 +766,9 @@ function DropdownMenuPopover({
700
766
  // keyboard (the modality tracker decides; the suppressed style hides the
701
767
  // pointer case, which Safari would otherwise paint after a touch pick).
702
768
  const handleLayerHide = useCallback(() => {
769
+ // Whatever closed the menu — light dismiss, the dismissal stack, Escape
770
+ // or a controlled close — its flyouts close with it.
771
+ hideOpenFlyouts();
703
772
  if (suppressControlledRollbackHideRef.current) {
704
773
  suppressControlledRollbackHideRef.current = false;
705
774
  return;
@@ -728,7 +797,7 @@ function DropdownMenuPopover({
728
797
  focusForLastInput(trigger, {
729
798
  preventScroll: true
730
799
  });
731
- }, [isControlled, onOpenChange, prepareFocusReturn]);
800
+ }, [hideOpenFlyouts, isControlled, onOpenChange, prepareFocusReturn]);
732
801
 
733
802
  // Defer item focus until the layer has committed open, so focus restore
734
803
  // captures the trigger instead of the first menu item.
@@ -1260,7 +1329,10 @@ function DropdownMenuPopover({
1260
1329
  value: hasRegions,
1261
1330
  children: /*#__PURE__*/_jsx(DropdownMenuContext, {
1262
1331
  value: contextValue,
1263
- children: menuContent
1332
+ children: /*#__PURE__*/_jsx(DropdownMenuRootOpenContext, {
1333
+ value: isOpen,
1334
+ children: menuContent
1335
+ })
1264
1336
  })
1265
1337
  })
1266
1338
  })), {
@@ -43,6 +43,23 @@ export interface DropdownMenuContextValue {
43
43
  */
44
44
  menuLabel?: string;
45
45
  }
46
+ /**
47
+ * Whether the root menu of this layer tree is open; internal companion to
48
+ * `DropdownMenuContext`, on its own unexported context so the public
49
+ * `DropdownMenuContextValue` surface stays unchanged. A sub-menu's hover
50
+ * intent must die with the menu: a hover-open scheduled on its trigger
51
+ * before the menu closed from elsewhere would otherwise fire into the
52
+ * hidden menu and reopen the flyout behind it (#6893). `null` means no
53
+ * signal, treated as open, matching providers that have no state to give.
54
+ * @internal
55
+ */
56
+ export declare const DropdownMenuRootOpenContext: import("react").Context<boolean | null>;
57
+ /**
58
+ * Whether the root menu backing these compound items is open. True when no
59
+ * provider gave a signal.
60
+ * @internal
61
+ */
62
+ export declare function useDropdownMenuRootOpen(): boolean;
46
63
  export declare const DropdownMenuContext: import("react").Context<DropdownMenuContextValue | null>;
47
64
  /**
48
65
  * Hook for compound menu items to access menu state.
@@ -1 +1 @@
1
- {"version":3,"file":"DropdownMenuContext.d.ts","sourceRoot":"","sources":["../../src/DropdownMenu/DropdownMenuContext.tsx"],"names":[],"mappings":"AAmBA,uDAAuD;AACvD,MAAM,MAAM,gBAAgB,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAElD;;;;;;;;;;;;GAYG;AACH,MAAM,WAAW,mBAAmB;IAClC;;;;;OAKG;IACH,cAAc,EAAE,OAAO,CAAC;IACxB,4EAA4E;IAC5E,SAAS,EAAE,aAAa,CAAC,MAAM,CAAC,CAAC;IACjC,wEAAwE;IACxE,IAAI,EAAE,WAAW,GAAG,IAAI,CAAC;IACzB,2DAA2D;IAC3D,IAAI,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;IAC/B,kDAAkD;IAClD,GAAG,EAAE,MAAM,IAAI,CAAC;CACjB;AAED,MAAM,WAAW,wBAAwB;IACvC,uEAAuE;IACvE,SAAS,EAAE,MAAM,IAAI,CAAC;IACtB,yCAAyC;IACzC,QAAQ,EAAE,gBAAgB,CAAC;IAC3B,sEAAsE;IACtE,OAAO,CAAC,EAAE,mBAAmB,CAAC;IAC9B;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,eAAO,MAAM,mBAAmB,0DACiC,CAAC;AAGlE;;;GAGG;AACH,wBAAgB,sBAAsB,IAAI,wBAAwB,GAAG,IAAI,CAExE;AAMD,MAAM,WAAW,kCAAkC;IACjD,iDAAiD;IACjD,KAAK,EAAE,MAAM,GAAG,SAAS,CAAC;IAC1B,uEAAuE;IACvE,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC,qEAAqE;IACrE,gBAAgB,EAAE,OAAO,CAAC;CAC3B;AAED,eAAO,MAAM,6BAA6B,oEACsB,CAAC;AAGjE;;;GAGG;AACH,wBAAgB,gCAAgC,IAAI,kCAAkC,GAAG,IAAI,CAE5F"}
1
+ {"version":3,"file":"DropdownMenuContext.d.ts","sourceRoot":"","sources":["../../src/DropdownMenu/DropdownMenuContext.tsx"],"names":[],"mappings":"AAmBA,uDAAuD;AACvD,MAAM,MAAM,gBAAgB,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAElD;;;;;;;;;;;;GAYG;AACH,MAAM,WAAW,mBAAmB;IAClC;;;;;OAKG;IACH,cAAc,EAAE,OAAO,CAAC;IACxB,4EAA4E;IAC5E,SAAS,EAAE,aAAa,CAAC,MAAM,CAAC,CAAC;IACjC,wEAAwE;IACxE,IAAI,EAAE,WAAW,GAAG,IAAI,CAAC;IACzB,2DAA2D;IAC3D,IAAI,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;IAC/B,kDAAkD;IAClD,GAAG,EAAE,MAAM,IAAI,CAAC;CACjB;AAED,MAAM,WAAW,wBAAwB;IACvC,uEAAuE;IACvE,SAAS,EAAE,MAAM,IAAI,CAAC;IACtB,yCAAyC;IACzC,QAAQ,EAAE,gBAAgB,CAAC;IAC3B,sEAAsE;IACtE,OAAO,CAAC,EAAE,mBAAmB,CAAC;IAC9B;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED;;;;;;;;;GASG;AACH,eAAO,MAAM,2BAA2B,yCAEjC,CAAC;AAGR;;;;GAIG;AACH,wBAAgB,uBAAuB,IAAI,OAAO,CAEjD;AAED,eAAO,MAAM,mBAAmB,0DACiC,CAAC;AAGlE;;;GAGG;AACH,wBAAgB,sBAAsB,IAAI,wBAAwB,GAAG,IAAI,CAExE;AAMD,MAAM,WAAW,kCAAkC;IACjD,iDAAiD;IACjD,KAAK,EAAE,MAAM,GAAG,SAAS,CAAC;IAC1B,uEAAuE;IACvE,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC,qEAAqE;IACrE,gBAAgB,EAAE,OAAO,CAAC;CAC3B;AAED,eAAO,MAAM,6BAA6B,oEACsB,CAAC;AAGjE;;;GAGG;AACH,wBAAgB,gCAAgC,IAAI,kCAAkC,GAAG,IAAI,CAE5F"}
@@ -32,6 +32,27 @@ import { createLayerScopedContext } from "../Layer/layerScopedContext.js";
32
32
  * @internal
33
33
  */
34
34
 
35
+ /**
36
+ * Whether the root menu of this layer tree is open; internal companion to
37
+ * `DropdownMenuContext`, on its own unexported context so the public
38
+ * `DropdownMenuContextValue` surface stays unchanged. A sub-menu's hover
39
+ * intent must die with the menu: a hover-open scheduled on its trigger
40
+ * before the menu closed from elsewhere would otherwise fire into the
41
+ * hidden menu and reopen the flyout behind it (#6893). `null` means no
42
+ * signal, treated as open, matching providers that have no state to give.
43
+ * @internal
44
+ */
45
+ export const DropdownMenuRootOpenContext = createLayerScopedContext(null);
46
+ DropdownMenuRootOpenContext.displayName = 'DropdownMenuRootOpenContext';
47
+
48
+ /**
49
+ * Whether the root menu backing these compound items is open. True when no
50
+ * provider gave a signal.
51
+ * @internal
52
+ */
53
+ export function useDropdownMenuRootOpen() {
54
+ return use(DropdownMenuRootOpenContext) !== false;
55
+ }
35
56
  export const DropdownMenuContext = createLayerScopedContext(null);
36
57
  DropdownMenuContext.displayName = 'DropdownMenuContext';
37
58
 
@@ -1 +1 @@
1
- {"version":3,"file":"DropdownMenuSubMenu.d.ts","sourceRoot":"","sources":["../../src/DropdownMenu/DropdownMenuSubMenu.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6CG;AAEH,OAAO,KAAK,EAAE,EASZ,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AAGf,OAAO,EAAuB,KAAK,QAAQ,EAAC,MAAM,SAAS,CAAC;AA0B5D,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AA0J5C,MAAM,MAAM,+BAA+B,GACzC,QAAQ,GAAG,UAAU,GAAG,UAAU,CAAC;AAErC,UAAU,4BAA6B,SAAQ,IAAI,CACjD,SAAS,EACT,MAAM,GAAG,UAAU,CACpB;IACC,2DAA2D;IAC3D,IAAI,CAAC,EAAE,SAAS,GAAG,QAAQ,CAAC;IAC5B,8CAA8C;IAC9C,KAAK,EAAE,SAAS,CAAC;IACjB,4DAA4D;IAC5D,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB;;;;OAIG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;;OAIG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAC5B,8CAA8C;IAC9C,YAAY,CAAC,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,IAAI,CAAC;IACzC;;;;;;;OAOG;IACH,YAAY,CAAC,EAAE,+BAA+B,CAAC;IAC/C,mCAAmC;IACnC,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,mCAAmC;IACnC,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB;;;OAGG;IACH,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,WAAW,CAAC,CAAC;CAC9B;AAED,MAAM,WAAW,wBAAyB,SAAQ,4BAA4B;IAC5E;;;;;;;;OAQG;IACH,QAAQ,EAAE,SAAS,CAAC;CACrB;AAED;;;;;;;;;;;;;;;;;;;GAmBG;AACH,wBAAgB,mBAAmB,CACjC,KAAK,EAAE,wBAAwB,GAC9B,SAAS,CAgkBX;yBAlkBe,mBAAmB"}
1
+ {"version":3,"file":"DropdownMenuSubMenu.d.ts","sourceRoot":"","sources":["../../src/DropdownMenu/DropdownMenuSubMenu.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6CG;AAEH,OAAO,KAAK,EAAE,EASZ,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AAGf,OAAO,EAAuB,KAAK,QAAQ,EAAC,MAAM,SAAS,CAAC;AA0B5D,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AA4J5C,MAAM,MAAM,+BAA+B,GACzC,QAAQ,GAAG,UAAU,GAAG,UAAU,CAAC;AAErC,UAAU,4BAA6B,SAAQ,IAAI,CACjD,SAAS,EACT,MAAM,GAAG,UAAU,CACpB;IACC,2DAA2D;IAC3D,IAAI,CAAC,EAAE,SAAS,GAAG,QAAQ,CAAC;IAC5B,8CAA8C;IAC9C,KAAK,EAAE,SAAS,CAAC;IACjB,4DAA4D;IAC5D,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB;;;;OAIG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;;OAIG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAC5B,8CAA8C;IAC9C,YAAY,CAAC,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,IAAI,CAAC;IACzC;;;;;;;OAOG;IACH,YAAY,CAAC,EAAE,+BAA+B,CAAC;IAC/C,mCAAmC;IACnC,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,mCAAmC;IACnC,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB;;;OAGG;IACH,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,WAAW,CAAC,CAAC;CAC9B;AAED,MAAM,WAAW,wBAAyB,SAAQ,4BAA4B;IAC5E;;;;;;;;OAQG;IACH,QAAQ,EAAE,SAAS,CAAC;CACrB;AAED;;;;;;;;;;;;;;;;;;;GAmBG;AACH,wBAAgB,mBAAmB,CACjC,KAAK,EAAE,wBAAwB,GAC9B,SAAS,CA4kBX;yBA9kBe,mBAAmB"}
@@ -71,7 +71,7 @@ import { composeEventHandlers, mergeProps, rtlStyles } from "../utils/index.js";
71
71
  import { useMergedRefs } from "../hooks/useMergedRefs.js";
72
72
  import { themeProps } from "../utils/themeProps.js";
73
73
  import { MENU_ITEM_ROLES, MENU_ITEM_SELECTOR, MENU_BOUNDARY_SELECTOR, activateMenuItem } from "./menuItemRoles.js";
74
- import { DropdownMenuContext, useDropdownMenuContext } from "./DropdownMenuContext.js";
74
+ import { DropdownMenuContext, DropdownMenuRootOpenContext, useDropdownMenuContext, useDropdownMenuRootOpen } from "./DropdownMenuContext.js";
75
75
  import { focusMenuItemOnHover } from "./menuItemHover.js";
76
76
  import { DropdownMenuItem } from "./DropdownMenuItem.js";
77
77
  import { useTranslator } from "../i18n/index.js";
@@ -280,7 +280,11 @@ export function DropdownMenuSubMenu(props) {
280
280
  // Hover intent and the shared hover→click guard only: this level owns its own
281
281
  // click handling, roving focus and typeahead. popover="manual", so the
282
282
  // invoker wiring other consumers need does not apply. A drill-in row has no
283
- // hover: a finger drives it, and a press opens it.
283
+ // hover: a finger drives it, and a press opens it. Hover is also gated on
284
+ // the root menu being open, so a hover-open scheduled before the menu
285
+ // closed from elsewhere is cancelled instead of firing into the hidden
286
+ // menu (#6893).
287
+ const isRootMenuOpen = useDropdownMenuRootOpen();
284
288
  const {
285
289
  triggerProps,
286
290
  contentProps,
@@ -289,7 +293,7 @@ export function DropdownMenuSubMenu(props) {
289
293
  show: showLayer,
290
294
  hide: hideLayer,
291
295
  isOpen: isFlyoutOpen,
292
- isEnabled: canOpen && !isDrillIn,
296
+ isEnabled: canOpen && !isDrillIn && isRootMenuOpen,
293
297
  // The safe triangle toward the flyout's near edge is built from the
294
298
  // flyout this component renders, not the hook's own list ref.
295
299
  flyoutRef: menuRef
@@ -565,7 +569,7 @@ export function DropdownMenuSubMenu(props) {
565
569
  });
566
570
  const resolvedMenuWidth = menuWidth ? resolveMenuWidth(menuWidth, layerViewportInset.maxInlineSizeFallback) : null;
567
571
  const popoverXstyle = resolvedMenuWidth ? resolvedMenuWidth.property === 'inlineSize' ? flyoutStyles.popoverCustomIntrinsicWidth(resolvedMenuWidth.value) : flyoutStyles.popoverCustomWidth(resolvedMenuWidth.value) : flyoutStyles.popover;
568
- const nestedContent = /*#__PURE__*/_jsxs(DropdownMenuContext, {
572
+ const nestedRows = /*#__PURE__*/_jsxs(DropdownMenuContext, {
569
573
  value: nestedMenuContext,
570
574
  children: [isDrillIn && /*#__PURE__*/_jsx(DropdownMenuItem, {
571
575
  icon: /*#__PURE__*/_jsx(Icon, {
@@ -581,6 +585,13 @@ export function DropdownMenuSubMenu(props) {
581
585
  })
582
586
  }), children]
583
587
  });
588
+ // Nested rows live in this level's flyout, a layer of their own where the
589
+ // layer-scoped signal resets; re-provide it so their pending hover intent
590
+ // dies with the root menu too.
591
+ const nestedContent = /*#__PURE__*/_jsx(DropdownMenuRootOpenContext, {
592
+ value: isRootMenuOpen,
593
+ children: nestedRows
594
+ });
584
595
  return /*#__PURE__*/_jsxs(_Fragment, {
585
596
  children: [/*#__PURE__*/_jsx(Item
586
597
  // Host attributes and handlers first: the row's role, tab stop, popup
@@ -0,0 +1,24 @@
1
+ /**
2
+ * @file lazyMenuBottomSheet.ts
3
+ * @input Uses React lazy and Suspense, useIsHydrating, MenuBottomSheet, and
4
+ * MenuBottomSheetActionList
5
+ * @output Exports MenuBottomSheet and MenuBottomSheetActionList wrappers that
6
+ * load the touch sheet on first render
7
+ * @position Internal to DropdownMenu
8
+ *
9
+ * The touch sheet (BottomSheet, its gestures, and the touch action list) only
10
+ * renders for the bottom-sheet presentation. Loading it on demand keeps it out
11
+ * of pages whose dropdowns only open as anchored popovers. Each wrapper keeps
12
+ * the wrapped component's props and renders nothing until its module loads.
13
+ *
14
+ * Neither wrapper renders on the server or in the render that hydrates server
15
+ * HTML (spec:AST-013 FR9): a lazy component that has not loaded yet would
16
+ * leave server markup incomplete and abort hydration. The closed sheet has no
17
+ * visible markup, so it first renders right after hydration.
18
+ */
19
+ import { type ComponentProps, type ReactElement } from 'react';
20
+ import type { MenuBottomSheet as EagerMenuBottomSheet } from './MenuBottomSheet';
21
+ import type { MenuBottomSheetActionList as EagerMenuBottomSheetActionList } from './MenuBottomSheetActionList';
22
+ export declare function MenuBottomSheet(props: ComponentProps<typeof EagerMenuBottomSheet>): ReactElement | null;
23
+ export declare function MenuBottomSheetActionList(props: ComponentProps<typeof EagerMenuBottomSheetActionList>): ReactElement | null;
24
+ //# sourceMappingURL=lazyMenuBottomSheet.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"lazyMenuBottomSheet.d.ts","sourceRoot":"","sources":["../../src/DropdownMenu/lazyMenuBottomSheet.ts"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;;;;GAiBG;AAEH,OAAO,EAIL,KAAK,cAAc,EACnB,KAAK,YAAY,EAClB,MAAM,OAAO,CAAC;AAEf,OAAO,KAAK,EAAC,eAAe,IAAI,oBAAoB,EAAC,MAAM,mBAAmB,CAAC;AAC/E,OAAO,KAAK,EAAC,yBAAyB,IAAI,8BAA8B,EAAC,MAAM,6BAA6B,CAAC;AAc7G,wBAAgB,eAAe,CAC7B,KAAK,EAAE,cAAc,CAAC,OAAO,oBAAoB,CAAC,GACjD,YAAY,GAAG,IAAI,CASrB;AAED,wBAAgB,yBAAyB,CACvC,KAAK,EAAE,cAAc,CAAC,OAAO,8BAA8B,CAAC,GAC3D,YAAY,GAAG,IAAI,CASrB"}
@@ -0,0 +1,46 @@
1
+ // Copyright (c) Meta Platforms, Inc. and affiliates.
2
+
3
+ 'use client';
4
+
5
+ /**
6
+ * @file lazyMenuBottomSheet.ts
7
+ * @input Uses React lazy and Suspense, useIsHydrating, MenuBottomSheet, and
8
+ * MenuBottomSheetActionList
9
+ * @output Exports MenuBottomSheet and MenuBottomSheetActionList wrappers that
10
+ * load the touch sheet on first render
11
+ * @position Internal to DropdownMenu
12
+ *
13
+ * The touch sheet (BottomSheet, its gestures, and the touch action list) only
14
+ * renders for the bottom-sheet presentation. Loading it on demand keeps it out
15
+ * of pages whose dropdowns only open as anchored popovers. Each wrapper keeps
16
+ * the wrapped component's props and renders nothing until its module loads.
17
+ *
18
+ * Neither wrapper renders on the server or in the render that hydrates server
19
+ * HTML (spec:AST-013 FR9): a lazy component that has not loaded yet would
20
+ * leave server markup incomplete and abort hydration. The closed sheet has no
21
+ * visible markup, so it first renders right after hydration.
22
+ */
23
+ import { createElement, lazy, Suspense } from 'react';
24
+ import { useIsHydrating } from "../hooks/useIsHydrating.js";
25
+ const LazyMenuBottomSheet = /*#__PURE__*/lazy(async () => import("./MenuBottomSheet.js").then(module => ({
26
+ default: module.MenuBottomSheet
27
+ })));
28
+ const LazyMenuBottomSheetActionList = /*#__PURE__*/lazy(async () => import("./MenuBottomSheetActionList.js").then(module => ({
29
+ default: module.MenuBottomSheetActionList
30
+ })));
31
+ export function MenuBottomSheet(props) {
32
+ if (useIsHydrating()) {
33
+ return null;
34
+ }
35
+ return /*#__PURE__*/createElement(Suspense, {
36
+ fallback: null
37
+ }, /*#__PURE__*/createElement(LazyMenuBottomSheet, props));
38
+ }
39
+ export function MenuBottomSheetActionList(props) {
40
+ if (useIsHydrating()) {
41
+ return null;
42
+ }
43
+ return /*#__PURE__*/createElement(Suspense, {
44
+ fallback: null
45
+ }, /*#__PURE__*/createElement(LazyMenuBottomSheetActionList, props));
46
+ }
@@ -1 +1 @@
1
- {"version":3,"file":"GridSpan.d.ts","sourceRoot":"","sources":["../../src/Grid/GridSpan.tsx"],"names":[],"mappings":"AAEA;;;;;;;;;;;GAWG;AAEH,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,OAAO,CAAC;AACrC,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAK5C,MAAM,WAAW,aAAc,SAAQ,SAAS,CAAC,cAAc,CAAC;IAC9D,wCAAwC;IACxC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;IAChC;;;;OAIG;IACH,OAAO,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAE1B;;;OAGG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IAEd;;OAEG;IACH,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAYD;;;;;;;;;;;;;GAaG;AACH,wBAAgB,QAAQ,CAAC,EACvB,OAAO,EACP,IAAI,EACJ,MAAM,EACN,SAAS,EACT,KAAK,EACL,QAAQ,EACR,GAAG,EACH,GAAG,KAAK,EACT,EAAE,aAAa,+BAwBf;yBAjCe,QAAQ"}
1
+ {"version":3,"file":"GridSpan.d.ts","sourceRoot":"","sources":["../../src/Grid/GridSpan.tsx"],"names":[],"mappings":"AAEA;;;;;;;;;;;GAWG;AAEH,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,OAAO,CAAC;AACrC,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAK5C,MAAM,WAAW,aAAc,SAAQ,SAAS,CAAC,cAAc,CAAC;IAC9D,wCAAwC;IACxC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;IAChC;;;;OAIG;IACH,OAAO,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAE1B;;;OAGG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IAEd;;OAEG;IACH,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAeD;;;;;;;;;;;;;GAaG;AACH,wBAAgB,QAAQ,CAAC,EACvB,OAAO,EACP,IAAI,EACJ,MAAM,EACN,SAAS,EACT,KAAK,EACL,QAAQ,EACR,GAAG,EACH,GAAG,KAAK,EACT,EAAE,aAAa,+BAwBf;yBAjCe,QAAQ"}