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

package/dist/Drawer/DrawerHeader.js

@@ -0,0 +1,134 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+'use client';
+
+/**
+ * @file DrawerHeader.tsx
+ * @input Uses React, StyleX, LayoutHeader, Button, Icon, Heading, Text, i18n, BaseProps, isRenderable, mergeProps, themeProps
+ * @output Exports DrawerHeader component and DrawerHeaderProps
+ * @position Drawer header; composed in a Layout header slot inside Drawer, tested by DrawerHeader.test.tsx
+ *
+ * Mirrors DialogHeader's API: a title, an optional subtitle, start/end content
+ * slots, and a close button that renders only when `onOpenChange` is passed.
+ * Two differences follow from Drawer's contract:
+ * - It does not move focus on mount. Drawer owns focus entry through
+ *   `data-autofocus` once its native host is presented.
+ * - It does not name the drawer. Drawer's required `label` does.
+ *
+ * SYNC: When modified, update these files to stay in sync:
+ * - /packages/core/src/Drawer/DrawerHeader.doc.mjs (props, anatomy, theming)
+ * - /packages/core/src/Drawer/DrawerHeader.test.tsx (tests for new/changed behavior)
+ * - /packages/core/src/Drawer/index.ts (exports if types change)
+ * - /packages/cli/assets/templates/blocks/components/Drawer/ (showcase blocks)
+ * - /packages/cli/assets/templates/blocks/components/DrawerHeader/ (showcase blocks)
+ * - /apps/storybook/stories/Drawer.stories.tsx (examples and visual coverage)
+ * - /apps/storybook/stories/DrawerHeader.stories.tsx (component audit fixture)
+ */
+import * as stylex from '@stylexjs/stylex';
+import "../theme/tokens.stylex.js";
+import { sizeVars, spacingVars, typeScaleVars } from "../theme/tokens.stylex.js";
+import { Button } from "../Button/index.js";
+import { Heading } from "../Heading/index.js";
+import { Icon } from "../Icon/index.js";
+import { LayoutHeader } from "../Layout/index.js";
+import { Text } from "../Text/index.js";
+import { useTranslator } from "../i18n/index.js";
+import { isRenderable, mergeProps, themeProps } from "../utils/index.js";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * Header for a Drawer: a title, optional subtitle and start/end content, and a
+ * close button when `onOpenChange` is passed. Same API as DialogHeader.
+ *
+ * Uses LayoutHeader internally for consistent styling with other layout headers.
+ *
+ * @example
+ * ```
+ * <Drawer isOpen={isOpen} onOpenChange={setIsOpen} label="Details">
+ *   <DrawerHeader title="Details" onOpenChange={setIsOpen} />
+ *   <Section padding={4}>Content</Section>
+ * </Drawer>
+ * ```
+ */
+export function DrawerHeader({
+  title,
+  subtitle,
+  onOpenChange,
+  startContent,
+  endContent,
+  endContentEdgeCompensation,
+  hasDivider,
+  xstyle,
+  className,
+  style,
+  ref,
+  ...rest
+}) {
+  const t = useTranslator();
+  const hasSubtitle = isRenderable(subtitle);
+  const hasStartContent = isRenderable(startContent);
+  const hasEndContent = isRenderable(endContent);
+  const shouldCompensateEndBlock = endContentEdgeCompensation == null ? onOpenChange != null : endContentEdgeCompensation === 'block' || endContentEdgeCompensation === 'all';
+  const shouldCompensateEndInline = endContentEdgeCompensation == null ? onOpenChange != null : endContentEdgeCompensation === 'inline' || endContentEdgeCompensation === 'all';
+  return /*#__PURE__*/_jsx(LayoutHeader, {
+    ref: ref,
+    hasDivider: hasDivider,
+    xstyle: xstyle,
+    className: className,
+    style: style,
+    ...rest,
+    children: /*#__PURE__*/_jsxs("div", {
+      ...mergeProps(themeProps('drawer-header'), {
+        className: "x78zum5 x1cy8zhl x1qughib xjcht0a"
+      }),
+      children: [hasStartContent && /*#__PURE__*/_jsx("div", {
+        ...mergeProps(themeProps('drawer-header-start-content'), {
+          className: "x78zum5 x6s0dn4 x1txdalj x2lah0s"
+        }),
+        children: startContent
+      }), /*#__PURE__*/_jsxs("div", {
+        ...mergeProps(themeProps('drawer-header-title-block'), {
+          className: "x78zum5 xdt5ytf xsn7fz1 x98rzlu xeuugli xqixskq"
+        }),
+        children: [/*#__PURE__*/_jsx(Heading, {
+          level: 2,
+          children: title
+        }), hasSubtitle && /*#__PURE__*/_jsx(Text, {
+          type: "body",
+          size: "sm",
+          color: "secondary",
+          children: subtitle
+        })]
+      }), (hasEndContent || onOpenChange != null) && /*#__PURE__*/_jsxs("div", {
+        ...mergeProps(themeProps('drawer-header-end-content'), {
+          0: {
+            className: "x78zum5 x6s0dn4 x1txdalj x2lah0s"
+          },
+          2: {
+            className: "x78zum5 x6s0dn4 x1txdalj x2lah0s xhzvc8f"
+          },
+          1: {
+            className: "x78zum5 x6s0dn4 x1txdalj x2lah0s x3kzqx6"
+          },
+          3: {
+            className: "x78zum5 x6s0dn4 x1txdalj x2lah0s xhzvc8f x3kzqx6"
+          }
+        }[!!shouldCompensateEndBlock << 1 | !!shouldCompensateEndInline << 0]),
+        children: [endContent, onOpenChange && /*#__PURE__*/_jsx(Button, {
+          variant: "ghost",
+          label: t('@astryx.dialog.close'),
+          tooltip: t('@astryx.dialog.close'),
+          icon: /*#__PURE__*/_jsx(Icon, {
+            icon: "close",
+            color: "inherit",
+            ...themeProps('drawer-header-close-icon')
+          }),
+          onClick: () => {
+            onOpenChange(false);
+          },
+          isIconOnly: true
+        })]
+      })]
+    })
+  });
+}
+DrawerHeader.displayName = 'DrawerHeader';

package/dist/Drawer/index.d.ts

@@ -0,0 +1,11 @@
+/**
+ * @file index.ts
+ * @input Drawer.tsx, DrawerHeader.tsx
+ * @output Re-exports Drawer and DrawerHeader components and their prop types
+ * @position Core entry point for the Drawer directory (`@astryxdesign/core/Drawer`)
+ */
+export { Drawer } from './Drawer';
+export type { DrawerProps } from './Drawer';
+export { DrawerHeader } from './DrawerHeader';
+export type { DrawerHeaderProps } from './DrawerHeader';
+//# sourceMappingURL=index.d.ts.map

package/dist/Drawer/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/Drawer/index.ts"],"names":[],"mappings":"AAEA;;;;;GAKG;AAEH,OAAO,EAAC,MAAM,EAAC,MAAM,UAAU,CAAC;AAChC,YAAY,EAAC,WAAW,EAAC,MAAM,UAAU,CAAC;AAC1C,OAAO,EAAC,YAAY,EAAC,MAAM,gBAAgB,CAAC;AAC5C,YAAY,EAAC,iBAAiB,EAAC,MAAM,gBAAgB,CAAC"}

package/dist/Drawer/index.js

@@ -0,0 +1,11 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+/**
+ * @file index.ts
+ * @input Drawer.tsx, DrawerHeader.tsx
+ * @output Re-exports Drawer and DrawerHeader components and their prop types
+ * @position Core entry point for the Drawer directory (`@astryxdesign/core/Drawer`)
+ */
+
+export { Drawer } from "./Drawer.js";
+export { DrawerHeader } from "./DrawerHeader.js";

package/dist/Drawer/useDrawerDialogPresence.d.ts

@@ -0,0 +1,42 @@
+/**
+ * @file useDrawerDialogPresence.ts
+ * @input Controlled open state, modal mode, dialog ref, and rendered-state setter
+ * @output Coordinates native top-layer presence, exit timing, focus restoration, and unmount cleanup
+ * @position Drawer-internal hook; consumed only by Drawer.tsx
+ *
+ * The drawer has two independent notions of presence:
+ * - React's rendered state keeps the panel visible for its CSS exit.
+ * - Native `showModal()` or `showPopover()` state keeps it in the browser top
+ *   layer.
+ *
+ * Their close ordering is a browser-visible invariant: the panel must finish
+ * its exit, then leave the active native host and hide in the same task. If the
+ * hide lands a frame later, a transformed ancestor becomes the containing block
+ * for the now-non-top-layer `position: fixed` panel and it paints back inside
+ * the page for one frame.
+ *
+ * SYNC: When modified, update:
+ * - /packages/core/src/Drawer/Drawer.test.tsx
+ * - /.github/scripts/modal-close-visibility.js
+ */
+import { type Dispatch, type RefObject, type SetStateAction } from 'react';
+type UseDrawerDialogPresenceOptions = {
+    dialogRef: RefObject<HTMLDialogElement | null>;
+    isOpen: boolean;
+    isModal: boolean;
+    setIsRendered: Dispatch<SetStateAction<boolean>>;
+};
+/**
+ * Coordinates the native dialog and React-rendered presence for Drawer.
+ *
+ * Opening captures the trigger, enters the modal-dialog or manual-popover host,
+ * and honours the component's `data-autofocus` contract. Closing waits for the
+ * actual transform transition (with a computed-duration backstop), then leaves
+ * the native host and synchronously hides the panel before the browser can paint
+ * it outside the top layer, restores focus to the captured trigger, and only
+ * then dispatches the popover host's synthetic `close`. Unmount cleanup closes
+ * a host left open by React Activity or a removed subtree.
+ */
+export declare function useDrawerDialogPresence({ dialogRef, isOpen, isModal, setIsRendered, }: UseDrawerDialogPresenceOptions): void;
+export {};
+//# sourceMappingURL=useDrawerDialogPresence.d.ts.map

package/dist/Drawer/useDrawerDialogPresence.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useDrawerDialogPresence.d.ts","sourceRoot":"","sources":["../../src/Drawer/useDrawerDialogPresence.ts"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;;;;;;;GAoBG;AAEH,OAAO,EAGL,KAAK,QAAQ,EACb,KAAK,SAAS,EACd,KAAK,cAAc,EACpB,MAAM,OAAO,CAAC;AAaf,KAAK,8BAA8B,GAAG;IACpC,SAAS,EAAE,SAAS,CAAC,iBAAiB,GAAG,IAAI,CAAC,CAAC;IAC/C,MAAM,EAAE,OAAO,CAAC;IAChB,OAAO,EAAE,OAAO,CAAC;IACjB,aAAa,EAAE,QAAQ,CAAC,cAAc,CAAC,OAAO,CAAC,CAAC,CAAC;CAClD,CAAC;AAuDF;;;;;;;;;;GAUG;AACH,wBAAgB,uBAAuB,CAAC,EACtC,SAAS,EACT,MAAM,EACN,OAAO,EACP,aAAa,GACd,EAAE,8BAA8B,GAAG,IAAI,CAoEvC"}

package/dist/Drawer/useDrawerDialogPresence.js

@@ -0,0 +1,236 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+'use client';
+
+/**
+ * @file useDrawerDialogPresence.ts
+ * @input Controlled open state, modal mode, dialog ref, and rendered-state setter
+ * @output Coordinates native top-layer presence, exit timing, focus restoration, and unmount cleanup
+ * @position Drawer-internal hook; consumed only by Drawer.tsx
+ *
+ * The drawer has two independent notions of presence:
+ * - React's rendered state keeps the panel visible for its CSS exit.
+ * - Native `showModal()` or `showPopover()` state keeps it in the browser top
+ *   layer.
+ *
+ * Their close ordering is a browser-visible invariant: the panel must finish
+ * its exit, then leave the active native host and hide in the same task. If the
+ * hide lands a frame later, a transformed ancestor becomes the containing block
+ * for the now-non-top-layer `position: fixed` panel and it paints back inside
+ * the page for one frame.
+ *
+ * SYNC: When modified, update:
+ * - /packages/core/src/Drawer/Drawer.test.tsx
+ * - /.github/scripts/modal-close-visibility.js
+ */
+import { useEffect, useRef } from 'react';
+import { flushSync } from 'react-dom';
+
+/** Slack past the computed transition before the backstop gives up waiting. */
+const EXIT_BACKSTOP_BUFFER_MS = 50;
+
+/**
+ * Hold used when the transition duration cannot be read — an unresolved
+ * `var()` outside a real browser. Picking a fixed number would otherwise make
+ * an assumption about the consumer's theme.
+ */
+const EXIT_FALLBACK_MS = 250;
+function isPopoverOpen(dialog) {
+  try {
+    return dialog.matches(':popover-open');
+  } catch {
+    // jsdom and pre-Popover browsers do not recognize :popover-open.
+    return false;
+  }
+}
+function isDrawerHostOpen(dialog, isModal) {
+  return isModal ? dialog.open : isPopoverOpen(dialog) || dialog.open;
+}
+function showDrawerHost(dialog, isModal) {
+  if (isModal) {
+    dialog.showModal();
+  } else if (typeof dialog.showPopover === 'function') {
+    dialog.showPopover();
+  } else {
+    // Reduced fallback for browsers below the Popover API support floor.
+    dialog.show();
+  }
+}
+function dispatchDialogClose(dialog) {
+  const EventConstructor = dialog.ownerDocument.defaultView?.Event ?? Event;
+  dialog.dispatchEvent(new EventConstructor('close'));
+}
+
+/**
+ * Leaves the active native host. Returns whether the caller owes a synthetic
+ * `close` dispatch: `dialog.close()` used to power the non-modal path, and
+ * consumers observe its native `close` event through refs/onClose. Popover
+ * dismissal has no equivalent event, so that public DOM contract is preserved
+ * explicitly — but by the caller, not here. Native `close` is queued as a
+ * task, so a consumer's listener always ran after this hook's own focus
+ * restore; the synthetic event must keep that ordering (and fire exactly once
+ * per exit, including the unmount path).
+ */
+function hideDrawerHost(dialog, isModal) {
+  if (!isModal && typeof dialog.hidePopover === 'function') {
+    dialog.hidePopover();
+    return true;
+  }
+  if (dialog.open) {
+    dialog.close();
+  }
+  return false;
+}
+
+/**
+ * Coordinates the native dialog and React-rendered presence for Drawer.
+ *
+ * Opening captures the trigger, enters the modal-dialog or manual-popover host,
+ * and honours the component's `data-autofocus` contract. Closing waits for the
+ * actual transform transition (with a computed-duration backstop), then leaves
+ * the native host and synchronously hides the panel before the browser can paint
+ * it outside the top layer, restores focus to the captured trigger, and only
+ * then dispatches the popover host's synthetic `close`. Unmount cleanup closes
+ * a host left open by React Activity or a removed subtree.
+ */
+export function useDrawerDialogPresence({
+  dialogRef,
+  isOpen,
+  isModal,
+  setIsRendered
+}) {
+  // Element focused when the drawer opened — restored on close.
+  const triggerElementRef = useRef(null);
+  useEffect(() => {
+    const dialog = dialogRef.current;
+    if (!dialog) {
+      return;
+    }
+    if (isOpen) {
+      if (!isDrawerHostOpen(dialog, isModal)) {
+        triggerElementRef.current = document.activeElement;
+        showDrawerHost(dialog, isModal);
+        // React's autoFocus calls .focus() during commit, before the native host
+        // is visible, so it silently fails — honour data-autofocus instead (same
+        // contract as Dialog).
+        dialog.querySelector('[data-autofocus]')?.focus();
+      }
+      return;
+    }
+    if (!isDrawerHostOpen(dialog, isModal)) {
+      return;
+    }
+    return waitForDrawerExit(dialog, () => {
+      const owesCloseEvent = hideDrawerHost(dialog, isModal);
+      // flushSync, not a plain setState: React's default scheduling can land
+      // the commit after the next paint, and that one frame is exactly the
+      // bug — the panel paints outside the top layer. Both happen in this
+      // task, so the browser never gets to paint between them.
+      // eslint-disable-next-line @eslint-react/dom-no-flush-sync -- the panel must stop painting in the task the native host closes
+      flushSync(() => {
+        setIsRendered(false);
+      });
+      // Return focus after leaving the native host: a modal dialog makes the
+      // rest of the document inert, so focusing earlier silently fails.
+      triggerElementRef.current?.focus();
+      triggerElementRef.current = null;
+      // The synthetic popover close fires after the focus restore above,
+      // mirroring the task-queued native event: a consumer close listener
+      // that retargets focus (master-detail row switching) gets the last word.
+      if (owesCloseEvent) {
+        dispatchDialogClose(dialog);
+      }
+    });
+  }, [dialogRef, isModal, isOpen, setIsRendered]);
+
+  // Leave the active native host on unmount. When the drawer is mounted inside
+  // an <Activity> that flips to mode="hidden", React runs effect cleanups (with
+  // stale isOpen) instead of re-running the effect with isOpen=false. Leaving
+  // the host active would strand the top-layer surface and skip the next open.
+  // This is deliberately separate from the open/close effect: putting it in
+  // that cleanup would cut off every delayed slide-out.
+  useEffect(() => {
+    const dialog = dialogRef.current;
+    return () => {
+      if (dialog && isDrawerHostOpen(dialog, isModal)) {
+        if (hideDrawerHost(dialog, isModal)) {
+          // No focus restore on this path — the drawer is being torn down, so
+          // the owed synthetic close fires immediately (still exactly once).
+          dispatchDialogClose(dialog);
+        }
+      }
+    };
+  }, [dialogRef, isModal]);
+}
+
+/**
+ * Wait for the panel's transform transition, with a computed-duration
+ * backstop. Mirrors BottomSheetPanel.waitForTransition: the native event is
+ * authoritative, and the timeout only prevents a lost event from stranding an
+ * open dialog.
+ */
+function waitForDrawerExit(element, complete) {
+  let done = false;
+  let timer = null;
+  const finish = () => {
+    if (done) {
+      return;
+    }
+    done = true;
+    if (timer != null) {
+      clearTimeout(timer);
+    }
+    element.removeEventListener('transitionend', handleTransitionEnd);
+    element.removeEventListener('transitioncancel', handleTransitionEnd);
+    complete();
+  };
+  const handleTransitionEnd = event => {
+    if (event.target === element && event.propertyName === 'transform') {
+      finish();
+    }
+  };
+  element.addEventListener('transitionend', handleTransitionEnd);
+  element.addEventListener('transitioncancel', handleTransitionEnd);
+  const transitionMs = readTransformTransitionMs(element);
+  timer = setTimeout(finish, (transitionMs ?? EXIT_FALLBACK_MS) + EXIT_BACKSTOP_BUFFER_MS);
+  return () => {
+    done = true;
+    if (timer != null) {
+      clearTimeout(timer);
+    }
+    element.removeEventListener('transitionend', handleTransitionEnd);
+    element.removeEventListener('transitioncancel', handleTransitionEnd);
+  };
+}
+
+/** Read the transform transition's duration + delay from computed CSS. */
+function readTransformTransitionMs(element) {
+  const computed = window.getComputedStyle(element);
+  const properties = computed.transitionProperty.split(',').map(value => value.trim());
+  const durations = parseTimes(computed.transitionDuration);
+  const delays = parseTimes(computed.transitionDelay);
+  if (properties.length === 0 || durations.length === 0 || delays.length === 0 || durations.includes(null) || delays.includes(null)) {
+    return null;
+  }
+  return properties.reduce((longest, property, index) => {
+    if (property !== 'transform' && property !== 'all') {
+      return longest;
+    }
+    const duration = durations[index % durations.length];
+    const delay = delays[index % delays.length];
+    return Math.max(longest, (duration ?? 0) + (delay ?? 0));
+  }, 0);
+}
+function parseTimes(value) {
+  return value.split(',').map(part => {
+    const trimmed = part.trim();
+    const time = Number.parseFloat(trimmed);
+    if (!Number.isFinite(time)) {
+      return null;
+    }
+    if (trimmed.endsWith('ms')) {
+      return time;
+    }
+    return trimmed.endsWith('s') ? time * 1000 : null;
+  });
+}

package/dist/DropdownMenu/DropdownMenu.d.ts

@@ -1,6 +1,6 @@
 /**
  * @file DropdownMenu.tsx
- * @input Uses React, StyleX, usePopover, MenuBottomSheet, Button, List,
+ * @input Uses React, StyleX, usePopover, MenuBottomSheet (lazy), Button, List,
  *   useListFocus, and the shared viewport-safe menu-width resolver
  * @output Exports DropdownMenu with caller-selected popover or bottom-sheet
  *   presentation

package/dist/DropdownMenu/DropdownMenu.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DropdownMenu.d.ts","sourceRoot":"","sources":["../../src/DropdownMenu/DropdownMenu.tsx"],"names":[],"mappings":"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"}
+{"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;AA0B9D,OAAO,EAEL,KAAK,oBAAoB,EAC1B,MAAM,kCAAkC,CAAC;AAO1C,OAAO,KAAK,EAAC,cAAc,EAAE,cAAc,EAAC,MAAM,mBAAmB,CAAC;AAStE,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAmQ5C;;;;;;;GAOG;AACH,MAAM,WAAW,oBAAqB,SAAQ,IAAI,CAChD,qBAAqB,EACnB,MAAM,GACN,SAAS,GACT,YAAY,GACZ,SAAS,GACT,aAAa,GACb,YAAY,GACZ,kBAAkB,GAClB,MAAM,GACN,QAAQ,GACR,KAAK,CACR;IACC;;;;;;OAMG;IACH,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,6BAA6B;IAC7B,KAAK,EAAE,SAAS,CAAC;IACjB;;;;OAIG;IACH,KAAK,CAAC,EAAE,kBAAkB,EAAE,CAAC;CAC9B;AAED;;;GAGG;AACH,MAAM,WAAW,uBAAuB;IACtC,IAAI,EAAE,SAAS,CAAC;CACjB;AAED,MAAM,WAAW,mBAAmB;IAClC,IAAI,EAAE,SAAS,CAAC;IAChB,0EAA0E;IAC1E,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,EAAE,oBAAoB,EAAE,CAAC;CAC/B;AAED,MAAM,MAAM,kBAAkB,GAC5B,oBAAoB,GAAG,uBAAuB,GAAG,mBAAmB,CAAC;AAMvE,MAAM,MAAM,uBAAuB,GAAG,IAAI,CAAC,WAAW,EAAE,SAAS,CAAC,CAAC;AAEnE,MAAM,MAAM,wBAAwB,GAAG,oBAAoB,CAAC;AAE5D;;;;;;GAMG;AACH,MAAM,WAAW,wBAAwB;IACvC,yEAAyE;IACzE,GAAG,EAAE,CAAC,OAAO,EAAE,WAAW,GAAG,IAAI,KAAK,IAAI,CAAC;IAC3C,yDAAyD;IACzD,EAAE,EAAE,MAAM,CAAC;IACX,OAAO,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,UAAU,CAAC,WAAW,CAAC,KAAK,IAAI,CAAC;IACxD,cAAc,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,UAAU,CAAC,WAAW,CAAC,KAAK,IAAI,CAAC;IAC/D,aAAa,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,YAAY,CAAC,WAAW,CAAC,KAAK,IAAI,CAAC;IAChE,aAAa,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,UAAU,CAAC,WAAW,CAAC,KAAK,IAAI,CAAC;IAC9D,SAAS,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,aAAa,CAAC,WAAW,CAAC,KAAK,IAAI,CAAC;IAC7D,OAAO,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,UAAU,CAAC,WAAW,CAAC,KAAK,IAAI,CAAC;IACxD,eAAe,EAAE,MAAM,GAAG,QAAQ,CAAC;IACnC,eAAe,EAAE,OAAO,CAAC;IACzB,eAAe,EAAE,MAAM,CAAC;CACzB;AAED,UAAU,qBAAsB,SAAQ,SAAS;IAC/C;;;OAGG;IACH,MAAM,CAAC,EAAE,uBAAuB,CAAC;IACjC;;;;;;;;;;;;;;;;;;;;;OAqBG;IACH,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,wBAAwB,KAAK,SAAS,CAAC;IAC/D,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,YAAY,CAAC,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,IAAI,CAAC;IACzC;;;;OAIG;IACH,SAAS,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAC5B;;;;OAIG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;;;OAKG;IACH,SAAS,CAAC,EAAE,cAAc,CAAC;IAE3B;;;;;OAKG;IACH,SAAS,CAAC,EAAE,cAAc,CAAC;IAC3B;;;;OAIG;IACH,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB;;;OAGG;IACH,MAAM,CAAC,EAAE,SAAS,CAAC;IAEnB,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AAED,UAAU,qBAAsB,SAAQ,qBAAqB;IAC3D;;;;;OAKG;IACH,YAAY,CAAC,EAAE,wBAAwB,CAAC;IACxC,KAAK,EAAE,kBAAkB,EAAE,CAAC;IAC5B,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAED,UAAU,yBAA0B,SAAQ,qBAAqB;IAC/D,YAAY,CAAC,EAAE,SAAS,CAAC;IACzB,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,QAAQ,EAAE,SAAS,CAAC;CACrB;AAED,MAAM,MAAM,iBAAiB,GAC3B,qBAAqB,GAAG,yBAAyB,CAAC;AAiuCpD,wBAAgB,YAAY,CAAC,KAAK,EAAE,iBAAiB,qBA4CpD;yBA5Ce,YAAY"}

package/dist/DropdownMenu/DropdownMenu.js

@@ -4,7 +4,7 @@
 
 /**
  * @file DropdownMenu.tsx
- * @input Uses React, StyleX, usePopover, MenuBottomSheet, Button, List,
+ * @input Uses React, StyleX, usePopover, MenuBottomSheet (lazy), Button, List,
  *   useListFocus, and the shared viewport-safe menu-width resolver
  * @output Exports DropdownMenu with caller-selected popover or bottom-sheet
  *   presentation
@@ -42,7 +42,7 @@ import { Heading } from "../Heading/index.js";
 import { Icon } from "../Icon/index.js";
 import { renderDropdownItems } from "./renderDropdownItems.js";
 import { MENU_ITEM_ROLES, MENU_ITEM_SELECTOR, MENU_BOUNDARY_SELECTOR, activateMenuItem } from "./menuItemRoles.js";
-import { DropdownMenuContext } from "./DropdownMenuContext.js";
+import { DropdownMenuContext, DropdownMenuRootOpenContext } from "./DropdownMenuContext.js";
 import { useIsomorphicLayoutEffect } from "../hooks/useIsomorphicLayoutEffect.js";
 import { useListFocus } from "../hooks/useListFocus.js";
 import { useMenuPress } from "../hooks/useMenuPress.js";
@@ -58,8 +58,8 @@ import { resolveMenuWidth } from "./menuWidth.js";
 import "../Layer/layerViewportInset.stylex.js";
 import { layerViewportInset } from "../Layer/layerViewportInset.stylex.js";
 import { useAdaptivePresentation } from "../hooks/useAdaptivePresentation.js";
-import { MenuBottomSheet } from "./MenuBottomSheet.js";
-import { MenuBottomSheetActionList } from "./MenuBottomSheetActionList.js";
+// Loaded on demand: only the bottom-sheet presentation renders the sheet.
+import { MenuBottomSheet, MenuBottomSheetActionList } from "./lazyMenuBottomSheet.js";
 import { layerAnimations } from "../Layer/layerAnimations.stylex.js";
 import "../theme/tokens.stylex.js";
 import { spacingVars, colorVars, radiusVars, durationVars, easeVars } from "../theme/tokens.stylex.js";
@@ -172,7 +172,7 @@ const styles = {
     kI3sdo: "x1a2a7pz",
     k7VYTy: "xpdipgo",
     kfSwDN: "x87ps6o",
-    ks0D6T: "x1p5vr2b",
+    ks0D6T: "xc0b1yq",
     kskxy: "x1uh1i8a",
     "--_dropdown-menu-radius": "x1fcsqxe",
     "--_dropdown-menu-padding": "xgory14",
@@ -491,12 +491,41 @@ function DropdownMenuBottomSheet({
     if (!isOpen || openModalityRef.current !== 'keyboard') {
       return;
     }
-    const frame = requestAnimationFrame(() => {
-      actionListRef.current?.querySelector('button:not(:disabled), a[href]')?.focus({
-        preventScroll: true
+    const findFirstAction = () => actionListRef.current?.querySelector('button:not(:disabled), a[href]') ?? null;
+    let observer = null;
+    let frame = requestAnimationFrame(() => {
+      const action = findFirstAction();
+      if (action != null) {
+        action.focus({
+          preventScroll: true
+        });
+        return;
+      }
+      // The sheet loads on demand, so a keyboard open can arrive before its
+      // rows exist. Wait for them, then focus a frame later so the sheet's
+      // own open-focus has already run.
+      observer = new MutationObserver(() => {
+        const loaded = findFirstAction();
+        if (loaded == null) {
+          return;
+        }
+        observer?.disconnect();
+        observer = null;
+        frame = requestAnimationFrame(() => {
+          loaded.focus({
+            preventScroll: true
+          });
+        });
+      });
+      observer.observe(document.body, {
+        childList: true,
+        subtree: true
       });
     });
-    return () => cancelAnimationFrame(frame);
+    return () => {
+      cancelAnimationFrame(frame);
+      observer?.disconnect();
+    };
   }, [currentItems, isOpen]);
   useEffect(() => {
     if (!isOpen) {
@@ -693,6 +722,43 @@ function DropdownMenuPopover({
   // above it ends the gesture in flight through this ref.
   const cancelMenuPressRef = useRef(() => {});
 
+  // Submenu flyouts are `popover="manual"` elements nested inside the menu's
+  // `popover="auto"` element, so the browser's light dismiss of the menu never
+  // reaches them: without a sweep they keep their open state and their
+  // top-layer entry while the menu is hidden, and re-anchor to the viewport
+  // corner when the menu reopens (#6893). Closing them through the popover
+  // API lets useLayer's toggle handling reset their state. Only flyouts that
+  // are actually open are touched: `:popover-open` ships wherever
+  // `hidePopover` does (they are one API), and the display fallback keeps its
+  // own open signal (`display: block`) so it is guarded the same way.
+  const hideOpenFlyouts = useCallback(() => {
+    const menuPopover = contentRef.current;
+    if (!menuPopover) {
+      return;
+    }
+    // Innermost first: hiding a flyout may unmount the flyouts nested inside
+    // it, and a detached element no longer has the toggle listener that
+    // resets its open state.
+    const flyouts = [...menuPopover.querySelectorAll('[popover]')].reverse();
+    for (const flyout of flyouts) {
+      if (typeof flyout.hidePopover === 'function') {
+        if (flyout.matches(':popover-open')) {
+          flyout.hidePopover();
+        }
+      } else if (flyout.style.display === 'block') {
+        flyout.style.display = 'none';
+        const toggle = new Event('toggle', {
+          bubbles: false
+        });
+        Object.defineProperty(toggle, 'newState', {
+          value: 'closed',
+          configurable: true
+        });
+        flyout.dispatchEvent(toggle);
+      }
+    }
+  }, []);
+
   // Focus lands somewhere stated when the menu closes. A press outside that
   // landed on a focusable control has already moved focus there; leave it.
   // Otherwise — a row acted, Escape, a press on nothing — focus returns to
@@ -700,6 +766,9 @@ function DropdownMenuPopover({
   // keyboard (the modality tracker decides; the suppressed style hides the
   // pointer case, which Safari would otherwise paint after a touch pick).
   const handleLayerHide = useCallback(() => {
+    // Whatever closed the menu — light dismiss, the dismissal stack, Escape
+    // or a controlled close — its flyouts close with it.
+    hideOpenFlyouts();
     if (suppressControlledRollbackHideRef.current) {
       suppressControlledRollbackHideRef.current = false;
       return;
@@ -728,7 +797,7 @@ function DropdownMenuPopover({
     focusForLastInput(trigger, {
       preventScroll: true
     });
-  }, [isControlled, onOpenChange, prepareFocusReturn]);
+  }, [hideOpenFlyouts, isControlled, onOpenChange, prepareFocusReturn]);
 
   // Defer item focus until the layer has committed open, so focus restore
   // captures the trigger instead of the first menu item.
@@ -1260,7 +1329,10 @@ function DropdownMenuPopover({
         value: hasRegions,
         children: /*#__PURE__*/_jsx(DropdownMenuContext, {
           value: contextValue,
-          children: menuContent
+          children: /*#__PURE__*/_jsx(DropdownMenuRootOpenContext, {
+            value: isOpen,
+            children: menuContent
+          })
         })
       })
     })), {

package/dist/DropdownMenu/DropdownMenuContext.d.ts

@@ -43,6 +43,23 @@ export interface DropdownMenuContextValue {
      */
     menuLabel?: string;
 }
+/**
+ * Whether the root menu of this layer tree is open; internal companion to
+ * `DropdownMenuContext`, on its own unexported context so the public
+ * `DropdownMenuContextValue` surface stays unchanged. A sub-menu's hover
+ * intent must die with the menu: a hover-open scheduled on its trigger
+ * before the menu closed from elsewhere would otherwise fire into the
+ * hidden menu and reopen the flyout behind it (#6893). `null` means no
+ * signal, treated as open, matching providers that have no state to give.
+ * @internal
+ */
+export declare const DropdownMenuRootOpenContext: import("react").Context<boolean | null>;
+/**
+ * Whether the root menu backing these compound items is open. True when no
+ * provider gave a signal.
+ * @internal
+ */
+export declare function useDropdownMenuRootOpen(): boolean;
 export declare const DropdownMenuContext: import("react").Context<DropdownMenuContextValue | null>;
 /**
  * Hook for compound menu items to access menu state.

package/dist/DropdownMenu/DropdownMenuContext.d.ts.map

@@ -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"}
+{"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"}