@astryxdesign/core 0.7.2-canary.e2909cf → 0.7.2-canary.e868278
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.
- package/dist/AppShell/AppShell.d.ts.map +1 -1
- package/dist/AppShell/AppShell.js +40 -1
- package/dist/Breadcrumbs/BreadcrumbItem.d.ts.map +1 -1
- package/dist/Breadcrumbs/BreadcrumbItem.js +5 -2
- package/dist/CommandPalette/CommandPaletteInput.d.ts +1 -1
- package/dist/CommandPalette/CommandPaletteInput.d.ts.map +1 -1
- package/dist/CommandPalette/CommandPaletteInput.js +37 -5
- package/dist/ContextMenu/ContextMenu.d.ts.map +1 -1
- package/dist/ContextMenu/ContextMenu.js +5 -2
- package/dist/DropdownMenu/DropdownMenu.d.ts +1 -1
- package/dist/DropdownMenu/DropdownMenu.d.ts.map +1 -1
- package/dist/DropdownMenu/DropdownMenu.js +82 -10
- package/dist/DropdownMenu/DropdownMenuContext.d.ts +17 -0
- package/dist/DropdownMenu/DropdownMenuContext.d.ts.map +1 -1
- package/dist/DropdownMenu/DropdownMenuContext.js +21 -0
- package/dist/DropdownMenu/DropdownMenuSubMenu.d.ts.map +1 -1
- package/dist/DropdownMenu/DropdownMenuSubMenu.js +15 -4
- package/dist/DropdownMenu/lazyMenuBottomSheet.d.ts +24 -0
- package/dist/DropdownMenu/lazyMenuBottomSheet.d.ts.map +1 -0
- package/dist/DropdownMenu/lazyMenuBottomSheet.js +46 -0
- package/dist/Field/Field.d.ts +1 -1
- package/dist/Field/Field.d.ts.map +1 -1
- package/dist/Field/Field.js +8 -4
- package/dist/Grid/GridSpan.d.ts.map +1 -1
- package/dist/Grid/GridSpan.js +1 -0
- package/dist/Heading/Heading.d.ts.map +1 -1
- package/dist/Heading/Heading.js +4 -2
- package/dist/MetadataList/MetadataList.d.ts.map +1 -1
- package/dist/MetadataList/MetadataList.js +5 -1
- package/dist/MetadataList/MetadataListContext.d.ts +1 -1
- package/dist/MetadataList/MetadataListContext.d.ts.map +1 -1
- package/dist/MobileNav/MobileNav.d.ts +9 -0
- package/dist/MobileNav/MobileNav.d.ts.map +1 -1
- package/dist/MobileNav/MobileNav.js +30 -3
- package/dist/RadioList/RadioList.d.ts +1 -1
- package/dist/RadioList/RadioList.d.ts.map +1 -1
- package/dist/RadioList/RadioList.js +6 -2
- package/dist/SideNav/SideNavItem.d.ts +8 -1
- package/dist/SideNav/SideNavItem.d.ts.map +1 -1
- package/dist/SideNav/SideNavItem.js +71 -9
- package/dist/Text/Text.d.ts.map +1 -1
- package/dist/Text/Text.js +4 -2
- package/dist/ToggleButton/ToggleButton.d.ts +3 -2
- package/dist/ToggleButton/ToggleButton.d.ts.map +1 -1
- package/dist/ToggleButton/ToggleButton.js +12 -1
- package/dist/TopNav/TopNavMegaMenu.d.ts.map +1 -1
- package/dist/TopNav/TopNavMegaMenu.js +3 -3
- package/dist/TopNav/TopNavMenu.d.ts.map +1 -1
- package/dist/TopNav/TopNavMenu.js +3 -3
- package/dist/TreeList/TreeList.d.ts.map +1 -1
- package/dist/TreeList/TreeList.js +1 -0
- package/dist/TreeList/TreeListBranches.d.ts.map +1 -1
- package/dist/TreeList/TreeListBranches.js +2 -2
- package/dist/TreeList/TreeListItem.d.ts.map +1 -1
- package/dist/TreeList/TreeListItem.js +57 -9
- package/dist/astryx.css +12 -1
- package/dist/hooks/useMenuHover.d.ts.map +1 -1
- package/dist/hooks/useMenuHover.js +18 -13
- package/package.json +3 -3
- package/src/AppShell/AppShell.tsx +45 -1
- package/src/Avatar/Avatar.doc.mjs +5 -3
- package/src/AvatarGroup/AvatarGroup.doc.mjs +3 -2
- package/src/Breadcrumbs/BreadcrumbItem.tsx +4 -1
- package/src/Breadcrumbs/Breadcrumbs.test.tsx +30 -1
- package/src/Card/Card.doc.mjs +1 -1
- package/src/Chat/__tests__/ChatMessageMetadata.a11y.chromium.spec.ts +3 -1
- package/src/CommandPalette/CommandPaletteInput.test.tsx +53 -4
- package/src/CommandPalette/CommandPaletteInput.tsx +33 -3
- package/src/CommandPalette/__tests__/CommandPaletteInputAudit.a11y.chromium.spec.ts +335 -0
- package/src/CommandPalette/__tests__/CommandPaletteItemAudit.a11y.chromium.spec.ts +292 -0
- package/src/ContextMenu/ContextMenu.doc.mjs +2 -3
- package/src/ContextMenu/ContextMenu.tsx +4 -1
- package/src/ContextMenu/__tests__/ContextMenuAudit.a11y.chromium.spec.ts +438 -0
- package/src/DropdownMenu/DropdownMenu.ssr.test.tsx +57 -0
- package/src/DropdownMenu/DropdownMenu.test.tsx +55 -2
- package/src/DropdownMenu/DropdownMenu.tsx +81 -10
- package/src/DropdownMenu/DropdownMenuContext.tsx +24 -0
- package/src/DropdownMenu/DropdownMenuDivider.spec.md +192 -0
- package/src/DropdownMenu/DropdownMenuLazySheet.test.tsx +126 -0
- package/src/DropdownMenu/DropdownMenuSubMenu.test.tsx +185 -0
- package/src/DropdownMenu/DropdownMenuSubMenu.tsx +17 -3
- package/src/DropdownMenu/__tests__/DropdownMenuDividerAudit.a11y.chromium.spec.ts +280 -0
- package/src/DropdownMenu/__tests__/warmMenuBottomSheet.tsx +43 -0
- package/src/DropdownMenu/lazyMenuBottomSheet.ts +71 -0
- package/src/Field/Field.doc.mjs +14 -8
- package/src/Field/Field.spec.md +217 -0
- package/src/Field/Field.test.tsx +60 -2
- package/src/Field/Field.tsx +17 -8
- package/src/Grid/GridSpan.tsx +3 -0
- package/src/Heading/Heading.test.tsx +57 -0
- package/src/Heading/Heading.tsx +6 -2
- package/src/MetadataList/MetadataList.doc.mjs +2 -2
- package/src/MetadataList/MetadataList.test.tsx +38 -0
- package/src/MetadataList/MetadataList.tsx +8 -1
- package/src/MetadataList/MetadataListContext.tsx +1 -1
- package/src/MobileNav/MobileNav.tsx +30 -3
- package/src/MobileNav/MobileNavCloseEdgeCases.test.tsx +173 -15
- package/src/MoreMenu/MoreMenu.test.tsx +5 -1
- package/src/RadioList/RadioList.fr10.test.tsx +45 -2
- package/src/RadioList/RadioList.tsx +4 -1
- package/src/SideNav/SideNav.test.tsx +179 -0
- package/src/SideNav/SideNavItem.doc.mjs +2 -2
- package/src/SideNav/SideNavItem.tsx +96 -17
- package/src/Slider/Slider.spec.md +39 -18
- package/src/Text/Text.test.tsx +57 -0
- package/src/Text/Text.tsx +6 -2
- package/src/TimeInput/TimeInput.fr10.test.tsx +15 -0
- package/src/ToggleButton/ToggleButton.test.tsx +95 -0
- package/src/ToggleButton/ToggleButton.tsx +12 -1
- package/src/TopNav/TopNavMegaMenu.test.tsx +22 -0
- package/src/TopNav/TopNavMegaMenu.tsx +7 -3
- package/src/TopNav/TopNavMenu.test.tsx +19 -0
- package/src/TopNav/TopNavMenu.tsx +11 -3
- package/src/TreeList/TreeList.doc.mjs +1 -0
- package/src/TreeList/TreeList.test.tsx +327 -6
- package/src/TreeList/TreeList.tsx +5 -1
- package/src/TreeList/TreeListBranches.tsx +6 -0
- package/src/TreeList/TreeListItem.tsx +88 -13
- package/src/docPropLiterals.test.ts +36 -10
- package/src/hooks/useMenuHover.ts +18 -13
- 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;
|
|
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:
|
|
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,
|
|
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:
|
|
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,
|
|
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;
|
|
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:
|
|
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":"AAIA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA+BG;AAEH,OAAO,KAAK,EAAE,EAOZ,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AAGf,OAAO,EAAS,KAAK,WAAW,EAAC,MAAM,WAAW,CAAC;AAKnD,OAAO,KAAK,EAAC,qBAAqB,EAAC,MAAM,oBAAoB,CAAC;
|
|
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
|
-
|
|
62
|
-
import { MenuBottomSheetActionList } from "./
|
|
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
|
|
495
|
-
|
|
496
|
-
|
|
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 () =>
|
|
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:
|
|
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;
|
|
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
|
|
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
|
+
}
|
package/dist/Field/Field.d.ts
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
/**
|
|
2
2
|
* @file Field.tsx
|
|
3
|
-
* @input Uses React,
|
|
3
|
+
* @input Uses React, StyleX, BaseProps, FieldLabel/FieldStatus, FormLayoutContext, Text, VisuallyHidden, theme/status utilities
|
|
4
4
|
* @output Exports Field component, FieldProps
|
|
5
5
|
* @position Core implementation; consumed by index.ts, tested by Field.test.tsx
|
|
6
6
|
*
|