@astryxdesign/core 0.1.9 → 0.2.0-canary.0b7a99e

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

@@ -1 +1 @@
-{"version":3,"file":"DropdownMenuRadioGroup.d.ts","sourceRoot":"","sources":["../../src/DropdownMenu/DropdownMenuRadioGroup.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;GAUG;AAEH,OAAO,EAAU,KAAK,SAAS,EAAC,MAAM,OAAO,CAAC;AAI9C,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAiB5C,MAAM,WAAW,2BAA4B,SAAQ,IAAI,CACvD,SAAS,EACT,UAAU,CACX;IACC;;;OAGG;IACH,KAAK,EAAE,MAAM,GAAG,SAAS,CAAC;IAC1B;;OAEG;IACH,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC;;;;OAIG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB;;;OAGG;IACH,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B;;;;;OAKG;IACH,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B;;OAEG;IACH,QAAQ,EAAE,SAAS,CAAC;CACrB;AAED;;;;;;;;;;;;;;;;GAgBG;AACH,wBAAgB,sBAAsB,CAAC,EACrC,KAAK,EACL,QAAQ,EACR,gBAAuB,EACvB,QAAQ,EACR,SAAS,EACT,KAAK,EACL,GAAG,IAAI,EACR,EAAE,2BAA2B,+BAgB7B;yBAxBe,sBAAsB"}
+{"version":3,"file":"DropdownMenuRadioGroup.d.ts","sourceRoot":"","sources":["../../src/DropdownMenu/DropdownMenuRadioGroup.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;GAUG;AAEH,OAAO,EAAU,KAAK,SAAS,EAAC,MAAM,OAAO,CAAC;AAI9C,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAiB5C,MAAM,WAAW,2BAA4B,SAAQ,IAAI,CACvD,SAAS,EACT,UAAU,CACX;IACC;;;OAGG;IACH,KAAK,EAAE,MAAM,GAAG,SAAS,CAAC;IAC1B;;OAEG;IACH,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC;;;;;;OAMG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;;;;OAKG;IACH,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B;;OAEG;IACH,QAAQ,EAAE,SAAS,CAAC;CACrB;AAED;;;;;;;;;;;;;;;;GAgBG;AACH,wBAAgB,sBAAsB,CAAC,EACrC,KAAK,EACL,QAAQ,EACR,KAAK,EACL,gBAAuB,EACvB,QAAQ,EACR,SAAS,EACT,KAAK,EACL,GAAG,IAAI,EACR,EAAE,2BAA2B,+BAiB7B;yBA1Be,sBAAsB"}

package/dist/DropdownMenu/DropdownMenuRadioGroup.js

@@ -30,7 +30,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
  *   DropdownMenuRadioItem,
  * } from '@astryxdesign/core/DropdownMenu';
  * <DropdownMenu button={{label: 'Sort'}}>
- *   <DropdownMenuRadioGroup value={sort} onChange={setSort} aria-label="Sort by">
+ *   <DropdownMenuRadioGroup value={sort} onChange={setSort} label="Sort by">
  *     <DropdownMenuRadioItem value="newest" label="Newest" />
  *     <DropdownMenuRadioItem value="oldest" label="Oldest" />
  *   </DropdownMenuRadioGroup>
@@ -40,6 +40,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
 export function DropdownMenuRadioGroup({
   value,
   onChange,
+  label,
   hasCloseOnSelect = true,
   children,
   className,
@@ -54,6 +55,7 @@ export function DropdownMenuRadioGroup({
   return /*#__PURE__*/_jsx("div", {
     ...rest,
     role: "group",
+    "aria-label": label,
     ...mergeProps({
       className: "x78zum5 xdt5ytf x1lsbc85"
     }, {

package/dist/DropdownMenu/DropdownMenuRadioItem.d.ts

@@ -56,7 +56,7 @@ export interface DropdownMenuRadioItemProps extends Omit<BaseProps, 'role' | 'ar
  *
  * @example
  * ```
- * <DropdownMenuRadioGroup value={sort} onChange={setSort} aria-label="Sort by">
+ * <DropdownMenuRadioGroup value={sort} onChange={setSort} label="Sort by">
  *   <DropdownMenuRadioItem value="newest" label="Newest" />
  *   <DropdownMenuRadioItem value="oldest" label="Oldest" icon="clock" />
  * </DropdownMenuRadioGroup>

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

@@ -1 +1 @@
-{"version":3,"file":"DropdownMenuRadioItem.d.ts","sourceRoot":"","sources":["../../src/DropdownMenu/DropdownMenuRadioItem.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;;;;GAiBG;AAEH,OAAO,EAAc,KAAK,SAAS,EAAC,MAAM,OAAO,CAAC;AAElD,OAAO,EAAiB,KAAK,QAAQ,EAAC,MAAM,SAAS,CAAC;AAWtD,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAsE5C,MAAM,WAAW,0BAA2B,SAAQ,IAAI,CACtD,SAAS,EACT,MAAM,GAAG,cAAc,GAAG,UAAU,CACrC;IACC;;;OAGG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,KAAK,EAAE,SAAS,CAAC;IACjB;;OAEG;IACH,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB;;;OAGG;IACH,IAAI,CAAC,EAAE,SAAS,GAAG,QAAQ,CAAC;IAC5B;;;;;OAKG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;OAGG;IACH,UAAU,CAAC,EAAE,SAAS,CAAC;CACxB;AAED;;;;;;;;;;GAUG;AACH,wBAAgB,qBAAqB,CAAC,EACpC,KAAK,EACL,KAAK,EACL,WAAW,EACX,IAAI,EACJ,UAAkB,EAClB,UAAU,EACV,MAAM,EACN,SAAS,EACT,KAAK,EACL,GAAG,IAAI,EACR,EAAE,0BAA0B,+BAiE5B;yBA5Ee,qBAAqB"}
+{"version":3,"file":"DropdownMenuRadioItem.d.ts","sourceRoot":"","sources":["../../src/DropdownMenu/DropdownMenuRadioItem.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;;;;GAiBG;AAEH,OAAO,EAAiC,KAAK,SAAS,EAAC,MAAM,OAAO,CAAC;AAErE,OAAO,EAAiB,KAAK,QAAQ,EAAC,MAAM,SAAS,CAAC;AAYtD,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAqE5C,MAAM,WAAW,0BAA2B,SAAQ,IAAI,CACtD,SAAS,EACT,MAAM,GAAG,cAAc,GAAG,UAAU,CACrC;IACC;;;OAGG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,KAAK,EAAE,SAAS,CAAC;IACjB;;OAEG;IACH,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB;;;OAGG;IACH,IAAI,CAAC,EAAE,SAAS,GAAG,QAAQ,CAAC;IAC5B;;;;;OAKG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;OAGG;IACH,UAAU,CAAC,EAAE,SAAS,CAAC;CACxB;AAED;;;;;;;;;;GAUG;AACH,wBAAgB,qBAAqB,CAAC,EACpC,KAAK,EACL,KAAK,EACL,WAAW,EACX,IAAI,EACJ,UAAkB,EAClB,UAAU,EACV,MAAM,EACN,SAAS,EACT,KAAK,EACL,GAAG,IAAI,EACR,EAAE,0BAA0B,+BAgF5B;yBA3Fe,qBAAqB"}

package/dist/DropdownMenu/DropdownMenuRadioItem.js

@@ -25,6 +25,7 @@ import * as stylex from '@stylexjs/stylex';
 import { renderIconSlot } from "../Icon/index.js";
 import { Item } from "../Item/index.js";
 import { useDropdownMenuContext } from "./DropdownMenuContext.js";
+import { focusMenuItemOnHover } from "./menuItemHover.js";
 import "../theme/tokens.stylex.js";
 import { colorVars, spacingVars, durationVars, easeVars, borderVars } from "../theme/tokens.stylex.js";
 import { mergeProps, themeProps } from "../utils/index.js";
@@ -35,7 +36,7 @@ const styles = {
     kzqmXN: "xh8yej3",
     kaIpWk: "x1ws5lxm",
     kMwMTN: "x1tgivj0",
-    kWkggS: "xjbqb8w x1c52tdz x1uwx2nv",
+    kWkggS: "xjbqb8w x1c52tdz",
     kkrTdU: "x1ypdohk",
     kI3sdo: "x1a2a7pz",
     $$css: true
@@ -106,7 +107,7 @@ const dotSizeStyles = {
  *
  * @example
  * ```
- * <DropdownMenuRadioGroup value={sort} onChange={setSort} aria-label="Sort by">
+ * <DropdownMenuRadioGroup value={sort} onChange={setSort} label="Sort by">
  *   <DropdownMenuRadioItem value="newest" label="Newest" />
  *   <DropdownMenuRadioItem value="oldest" label="Oldest" icon="clock" />
  * </DropdownMenuRadioGroup>
@@ -141,11 +142,13 @@ export function DropdownMenuRadioItem({
       menuCtx?.closeMenu();
     }
   }, [isDisabled, groupCtx, value, menuCtx]);
+  const handlePointerMove = useCallback(e => focusMenuItemOnHover(e, isDisabled), [isDisabled]);
   return /*#__PURE__*/_jsx(Item, {
     ...rest,
     role: "menuitemradio",
     "aria-checked": isChecked,
     tabIndex: isDisabled ? undefined : -1,
+    onPointerMove: handlePointerMove,
     marker: /*#__PURE__*/_jsx("span", {
       "aria-hidden": "true",
       ...mergeProps(themeProps('dropdown-menu-radio', {
@@ -154,7 +157,11 @@ export function DropdownMenuRadioItem({
         disabled: isDisabled ? 'disabled' : null
       }), stylex.props(styles.circle, circleSizeStyles[controlSize], isChecked ? styles.checked : styles.unchecked)),
       children: isChecked && /*#__PURE__*/_jsx("span", {
-        ...stylex.props(styles.dot, dotSizeStyles[controlSize])
+        ...mergeProps(themeProps('dropdown-menu-radio-dot', {
+          size: controlSize,
+          checked: 'checked',
+          disabled: isDisabled ? 'disabled' : null
+        }), stylex.props(styles.dot, dotSizeStyles[controlSize]))
       })
     }),
     startContent: icon ? renderIconSlot(icon, {

package/dist/DropdownMenu/DropdownMenuSubMenu.d.ts

@@ -0,0 +1,104 @@
+/**
+ * @file DropdownMenuSubMenu.tsx
+ * @input React, stylex, useLayer (context mode), useListFocus, useMenuHover,
+ *   useTypeahead, Item, Icon, Spinner, DropdownMenu context + item roles.
+ * @output Exports DropdownMenuSubMenu — a single menu row that reveals a nested
+ *   flyout menu of its own children/items.
+ * @position Sub-component; place inside a DropdownMenu (or ContextMenu)
+ *   alongside plain items.
+ *
+ * One component, not three. The row itself adopts DropdownMenuItem semantics
+ * (label / icon / description / isDisabled) and its children become the
+ * flyout's content. This mirrors how SideNavItem / TreeListItem promote a
+ * normal row into a nested surface when given children, rather than the Radix
+ * Sub / SubTrigger / SubContent split. Data-driven menus never touch this
+ * component directly — renderDropdownItems renders it from a nested `items`
+ * array and passes the rendered children in.
+ *
+ * Built on existing primitives — no bespoke floating code:
+ * - Positioning: useLayer context mode opens the flyout inline-end with
+ *   viewport auto-flip via CSS anchor positioning (RTL-correct by default).
+ * - Pointer: useMenuHover for open/close intent.
+ * - Keyboard: a per-level useListFocus + useTypeahead. Right (Left in RTL) /
+ *   Enter / Space opens the flyout and focuses its first item; Left (Right in
+ *   RTL) / Escape closes it and returns focus to the trigger row.
+ *
+ * Prior art: legacy internal XDS `XDSDropdownSubMenuItem` (APG menubar-
+ * navigation submenu). This re-expresses the same contract on Astryx primitives.
+ *
+ * SYNC: When modified, update these files to stay in sync:
+ * - /packages/core/src/DropdownMenu/DropdownMenuSubMenu.doc.mjs
+ * - /packages/core/src/DropdownMenu/DropdownMenuSubMenu.test.tsx
+ * - /packages/core/src/DropdownMenu/index.ts
+ * - /apps/storybook/stories/DropdownMenu.stories.tsx
+ * - /packages/cli/assets/templates/blocks/components/DropdownMenu/ (showcase blocks)
+ */
+import { type ReactNode } from 'react';
+import { type IconType } from '../Icon';
+import type { BaseProps } from '../BaseProps';
+interface DropdownMenuSubMenuBaseProps extends Pick<BaseProps, 'xstyle' | 'className' | 'style'> {
+    /** Icon to display before the label on the trigger row. */
+    icon?: ReactNode | IconType;
+    /** Primary label text for the trigger row. */
+    label: ReactNode;
+    /** Secondary description text displayed below the label. */
+    description?: ReactNode;
+    /**
+     * Whether the submenu is disabled. A disabled submenu renders its trigger
+     * row but never opens the flyout.
+     * @default false
+     */
+    isDisabled?: boolean;
+    /**
+     * Show a spinner in place of the caret, e.g. while a lazy submenu's children
+     * are loading. Ported from the legacy `hasSpinner` async-submenu affordance.
+     * @default false
+     */
+    hasSpinner?: boolean;
+    /** Fixed flyout width. Defaults to sizing to its content (min 160px). */
+    menuWidth?: number | string;
+    /** Called when the flyout opens or closes. */
+    onOpenChange?: (isOpen: boolean) => void;
+    /** Test id for the trigger row. */
+    'data-testid'?: string;
+    /** Test id for the flyout menu. */
+    menuDataTestId?: string;
+}
+export interface DropdownMenuSubMenuProps extends DropdownMenuSubMenuBaseProps {
+    /**
+     * The flyout's menu items — the same components used at the top level
+     * (`DropdownMenuItem`, `DropdownMenuSubMenu`, selectable items, etc.).
+     *
+     * Data-mode parity lives one level up: give a `DropdownMenu`/`ContextMenu`
+     * item a nested `items` array and it renders a `DropdownMenuSubMenu` with
+     * these children automatically — so the data path never has to reach into
+     * this component.
+     */
+    children: ReactNode;
+}
+/**
+ * A single menu row that reveals a nested flyout of its own items. The row
+ * adopts DropdownMenuItem semantics (label / icon / description / isDisabled);
+ * its `children` become the flyout content. Place inside a DropdownMenu (or
+ * ContextMenu) alongside plain items.
+ *
+ * For data-driven menus, don't use this directly — give a menu item a nested
+ * `items` array and DropdownMenu/ContextMenu renders the submenu for you.
+ *
+ * @example
+ * ```
+ * <DropdownMenu button={{label: 'Actions'}}>
+ *   <DropdownMenuItem label="Rename" onClick={rename} />
+ *   <DropdownMenuSubMenu label="Move to" icon="folder">
+ *     <DropdownMenuItem label="Folder A" onClick={() => move('a')} />
+ *     <DropdownMenuItem label="Folder B" onClick={() => move('b')} />
+ *   </DropdownMenuSubMenu>
+ * </DropdownMenu>
+ * ```
+ */
+export declare function DropdownMenuSubMenu(props: DropdownMenuSubMenuProps): ReactNode;
+export declare namespace DropdownMenuSubMenu {
+    var displayName: string;
+}
+export {};
+//# sourceMappingURL=DropdownMenuSubMenu.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"DropdownMenuSubMenu.d.ts","sourceRoot":"","sources":["../../src/DropdownMenu/DropdownMenuSubMenu.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAkCG;AAEH,OAAc,EAOZ,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AAEf,OAAO,EAAuB,KAAK,QAAQ,EAAC,MAAM,SAAS,CAAC;AAoB5D,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AA0F5C,UAAU,4BAA6B,SAAQ,IAAI,CACjD,SAAS,EACT,QAAQ,GAAG,WAAW,GAAG,OAAO,CACjC;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,yEAAyE;IACzE,SAAS,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAC5B,8CAA8C;IAC9C,YAAY,CAAC,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,IAAI,CAAC;IACzC,mCAAmC;IACnC,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,mCAAmC;IACnC,cAAc,CAAC,EAAE,MAAM,CAAC;CACzB;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,CAmVX;yBArVe,mBAAmB"}

package/dist/DropdownMenu/DropdownMenuSubMenu.js

@@ -0,0 +1,435 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+'use client';
+
+/**
+ * @file DropdownMenuSubMenu.tsx
+ * @input React, stylex, useLayer (context mode), useListFocus, useMenuHover,
+ *   useTypeahead, Item, Icon, Spinner, DropdownMenu context + item roles.
+ * @output Exports DropdownMenuSubMenu — a single menu row that reveals a nested
+ *   flyout menu of its own children/items.
+ * @position Sub-component; place inside a DropdownMenu (or ContextMenu)
+ *   alongside plain items.
+ *
+ * One component, not three. The row itself adopts DropdownMenuItem semantics
+ * (label / icon / description / isDisabled) and its children become the
+ * flyout's content. This mirrors how SideNavItem / TreeListItem promote a
+ * normal row into a nested surface when given children, rather than the Radix
+ * Sub / SubTrigger / SubContent split. Data-driven menus never touch this
+ * component directly — renderDropdownItems renders it from a nested `items`
+ * array and passes the rendered children in.
+ *
+ * Built on existing primitives — no bespoke floating code:
+ * - Positioning: useLayer context mode opens the flyout inline-end with
+ *   viewport auto-flip via CSS anchor positioning (RTL-correct by default).
+ * - Pointer: useMenuHover for open/close intent.
+ * - Keyboard: a per-level useListFocus + useTypeahead. Right (Left in RTL) /
+ *   Enter / Space opens the flyout and focuses its first item; Left (Right in
+ *   RTL) / Escape closes it and returns focus to the trigger row.
+ *
+ * Prior art: legacy internal XDS `XDSDropdownSubMenuItem` (APG menubar-
+ * navigation submenu). This re-expresses the same contract on Astryx primitives.
+ *
+ * SYNC: When modified, update these files to stay in sync:
+ * - /packages/core/src/DropdownMenu/DropdownMenuSubMenu.doc.mjs
+ * - /packages/core/src/DropdownMenu/DropdownMenuSubMenu.test.tsx
+ * - /packages/core/src/DropdownMenu/index.ts
+ * - /apps/storybook/stories/DropdownMenu.stories.tsx
+ * - /packages/cli/assets/templates/blocks/components/DropdownMenu/ (showcase blocks)
+ */
+import React, { useCallback, useId, useMemo, useRef, useState } from 'react';
+import * as stylex from '@stylexjs/stylex';
+import { Icon, renderIconSlot } from "../Icon/index.js";
+import { Spinner } from "../Spinner/index.js";
+import { Item } from "../Item/index.js";
+import { useLayer } from "../Layer/useLayer.js";
+import { layerAnimations } from "../Layer/layerAnimations.stylex.js";
+import { useListFocus } from "../hooks/useListFocus.js";
+import { useMenuHover } from "../hooks/useMenuHover.js";
+import { useTypeahead } from "../hooks/useTypeahead.js";
+import "../theme/tokens.stylex.js";
+import { colorVars, spacingVars, radiusVars, durationVars, easeVars, shadowVars, typographyVars, typeScaleVars } from "../theme/tokens.stylex.js";
+import { mergeProps } from "../utils/index.js";
+import { themeProps } from "../utils/themeProps.js";
+import { MENU_ITEM_ROLES, MENU_ITEM_SELECTOR, MENU_BOUNDARY_SELECTOR } from "./menuItemRoles.js";
+import { DropdownMenuContext, useDropdownMenuContext } from "./DropdownMenuContext.js";
+import { focusMenuItemOnHover } from "./menuItemHover.js";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+const triggerStyles = {
+  root: {
+    kB7OPa: "x9f619",
+    kzqmXN: "xh8yej3",
+    k8WAf4: "xce4md1",
+    kg3NbH: "xf314gf",
+    kaIpWk: "x1ws5lxm",
+    kMv6JI: "x9ynric",
+    kGuDYH: "xcr08ib",
+    kMwMTN: "x1tgivj0",
+    kWkggS: "xjbqb8w x1c52tdz",
+    kkrTdU: "x1ypdohk",
+    k9WMMc: "x1yc453h",
+    kI3sdo: "x1a2a7pz",
+    $$css: true
+  },
+  open: {
+    kWkggS: "x1lmrjuc",
+    $$css: true
+  },
+  disabled: {
+    kSiTet: "xbyyjgo",
+    kkrTdU: "x1h6gzvc",
+    $$css: true
+  }
+};
+const triggerSizeStyles = {
+  sm: {
+    k8WAf4: "xu0wf1k",
+    kg3NbH: "xf314gf",
+    $$css: true
+  },
+  md: {
+    k8WAf4: "x1vofgu7",
+    $$css: true
+  },
+  lg: {
+    $$css: true
+  }
+};
+const _temp = {
+  keTefX: "x11g1kdw",
+  k71WvV: "xnur1sd",
+  "$$css": true
+};
+const flyoutStyles = {
+  popover: {
+    k7Eaqz: "x5w4yej",
+    keTefX: "x11g1kdw",
+    k71WvV: "xnur1sd",
+    $$css: true
+  },
+  popoverCustomWidth: width => [_temp, {
+    k7Eaqz: (typeof width === 'number' ? `${width}px` : width) != null ? "xkj4a21" : typeof width === 'number' ? `${width}px` : width,
+    $$css: true
+  }, {
+    "--x-minWidth": (val => typeof val === "number" ? val + "px" : val != null ? val : undefined)(typeof width === 'number' ? `${width}px` : width)
+  }]
+};
+/**
+ * A single menu row that reveals a nested flyout of its own items. The row
+ * adopts DropdownMenuItem semantics (label / icon / description / isDisabled);
+ * its `children` become the flyout content. Place inside a DropdownMenu (or
+ * ContextMenu) alongside plain items.
+ *
+ * For data-driven menus, don't use this directly — give a menu item a nested
+ * `items` array and DropdownMenu/ContextMenu renders the submenu for you.
+ *
+ * @example
+ * ```
+ * <DropdownMenu button={{label: 'Actions'}}>
+ *   <DropdownMenuItem label="Rename" onClick={rename} />
+ *   <DropdownMenuSubMenu label="Move to" icon="folder">
+ *     <DropdownMenuItem label="Folder A" onClick={() => move('a')} />
+ *     <DropdownMenuItem label="Folder B" onClick={() => move('b')} />
+ *   </DropdownMenuSubMenu>
+ * </DropdownMenu>
+ * ```
+ */
+export function DropdownMenuSubMenu(props) {
+  const {
+    icon,
+    label,
+    description,
+    isDisabled = false,
+    hasSpinner = false,
+    menuWidth,
+    onOpenChange,
+    children,
+    xstyle,
+    className,
+    style,
+    'data-testid': testId,
+    menuDataTestId
+  } = props;
+  const menuCtx = useDropdownMenuContext();
+  const menuSize = menuCtx?.menuSize ?? 'md';
+  const canOpen = !isDisabled;
+  const contentId = useId();
+  const triggerId = useId();
+  const triggerRef = useRef(null);
+  const [isOpen, setIsOpen] = useState(false);
+  const layer = useLayer({
+    mode: 'context',
+    lightDismiss: false,
+    onShow: useCallback(() => {
+      setIsOpen(true);
+      onOpenChange?.(true);
+    }, [onOpenChange]),
+    onHide: useCallback(() => {
+      setIsOpen(false);
+      onOpenChange?.(false);
+    }, [onOpenChange])
+  });
+  const showLayer = useCallback(() => {
+    if (canOpen) {
+      layer.show();
+    }
+  }, [canOpen, layer]);
+  const hideLayer = useCallback(() => {
+    layer.hide();
+  }, [layer]);
+
+  // Dedicated roving-focus + typeahead for this flyout level. The boundary
+  // selector scopes item collection and key handling to this flyout's own
+  // `role="menu"` — so a submenu nested inside this one (also inline, also
+  // `role="menu"`) doesn't pollute this level's items or double-handle keys.
+  const {
+    listRef: menuRef,
+    handleKeyDown: listNavKeyDown,
+    focusFirst,
+    focusItem,
+    ownsEvent,
+    getItems
+  } = useListFocus({
+    itemSelector: MENU_ITEM_SELECTOR,
+    boundarySelector: MENU_BOUNDARY_SELECTOR,
+    wrap: false,
+    onEscape: () => close({
+      focusTrigger: true
+    })
+  });
+  const typeahead = useTypeahead({
+    getItemLabels: () => getItems().map(el => el.textContent),
+    onMatch: focusItem,
+    getCurrentIndex: () => getItems().findIndex(el => el === document.activeElement || el.contains(document.activeElement))
+  });
+
+  // Hover-intent: entering the trigger opens after a short delay; leaving
+  // either surface closes after a delay. Hover-open does not steal focus.
+  const {
+    triggerProps,
+    contentProps
+  } = useMenuHover({
+    show: showLayer,
+    hide: hideLayer,
+    isOpen,
+    isEnabled: canOpen
+  });
+  const open = useCallback(options => {
+    if (!canOpen) {
+      return;
+    }
+    layer.show();
+    if (options?.focusFirst) {
+      requestAnimationFrame(() => {
+        // Move focus into the flyout. When it has no focusable items yet
+        // (e.g. an async submenu showing only a disabled "Loading…" row via
+        // hasSpinner), focusFirst() finds nothing — fall back to focusing the
+        // flyout container itself so keyboard ownership still transfers off
+        // the parent list. Otherwise the parent would keep focus, letting
+        // arrow keys rove the parent while the empty flyout stays open.
+        const focusedItem = focusFirst();
+        if (!focusedItem) {
+          menuRef.current?.focus();
+        }
+      });
+    }
+  }, [canOpen, layer, focusFirst, menuRef]);
+  const close = useCallback(options => {
+    layer.hide();
+    if (options?.focusTrigger !== false) {
+      triggerRef.current?.focus();
+    }
+  }, [layer]);
+
+  // Single ref for the trigger row: store it for focus management AND wire it
+  // as the flyout's positioning anchor (CSS anchor positioning).
+  const setTriggerEl = useCallback(el => {
+    triggerRef.current = el;
+    layer.ref(el);
+  }, [layer]);
+  const handleTriggerClick = useCallback(() => {
+    if (isDisabled) {
+      return;
+    }
+    // Click toggles the flyout, moving focus into it on open.
+    if (isOpen) {
+      close({
+        focusTrigger: true
+      });
+    } else {
+      open({
+        focusFirst: true
+      });
+    }
+  }, [isDisabled, isOpen, open, close]);
+  const handleTriggerKeyDown = useCallback(e => {
+    if (isDisabled) {
+      return;
+    }
+    const isRtl = typeof window !== 'undefined' && triggerRef.current ? window.getComputedStyle(triggerRef.current).direction === 'rtl' : false;
+    const openKey = isRtl ? 'ArrowLeft' : 'ArrowRight';
+    if (e.key === openKey || e.key === 'Enter' || e.key === ' ') {
+      e.preventDefault();
+      // The trigger row is a direct child of the parent menu (not a nested
+      // role="menu"), so the parent's key handler would otherwise also act on
+      // this event (e.g. Enter clicking the focused row). Stop it here — this
+      // level fully handles opening the flyout.
+      e.stopPropagation();
+      open({
+        focusFirst: true
+      });
+    }
+  }, [isDisabled, open]);
+
+  // Move the single focus-driven highlight onto the trigger as the pointer
+  // enters it, so a sibling item that still holds focus doesn't stay
+  // highlighted alongside the hovered trigger. This is separate from the
+  // hover-open intent (onMouseEnter/onMouseLeave) — the flyout still opens on
+  // the hover delay; this only keeps the highlight single.
+  const handlePointerMove = useCallback(e => focusMenuItemOnHover(e, isDisabled), [isDisabled]);
+
+  // Enter/Space activate the focused row; typeahead jumps by first character;
+  // the close key (Left, or Right in RTL) returns focus to the trigger;
+  // arrows/Home/End defer to useListFocus (RTL-aware).
+  //
+  // The flyout renders inline (useLayer context mode is a native popover, not a
+  // portal), so a submenu nested inside this one bubbles its key events up to
+  // this handler. `ownsEvent` (from useListFocus, scoped by boundarySelector)
+  // tells us whether the event originated in THIS flyout or a deeper one; we
+  // only act on our own, letting the deeper level keep ownership. No manual
+  // stopPropagation needed — each level self-filters.
+  const handleContentKeyDown = useCallback(e => {
+    if (!ownsEvent(e)) {
+      return;
+    }
+    // Escape closes just this submenu and returns focus to its trigger (APG:
+    // Escape collapses the current level, not the whole stack). The root
+    // popover's focus-trap listens for Escape at the document level and bails
+    // when the event is already handled, so we mark it handled here (stop
+    // propagation + preventDefault) to keep the parent menu open.
+    if (e.key === 'Escape') {
+      e.preventDefault();
+      e.stopPropagation();
+      close({
+        focusTrigger: true
+      });
+      return;
+    }
+    if (e.key === 'Enter' || e.key === ' ') {
+      e.preventDefault();
+      const focused = document.activeElement;
+      if (focused && MENU_ITEM_ROLES.has(focused.getAttribute('role') ?? '')) {
+        focused.click();
+      }
+      return;
+    }
+    const isRtl = typeof window !== 'undefined' && menuRef.current ? window.getComputedStyle(menuRef.current).direction === 'rtl' : false;
+    const closeKey = isRtl ? 'ArrowRight' : 'ArrowLeft';
+    if (e.key === closeKey) {
+      e.preventDefault();
+      close({
+        focusTrigger: true
+      });
+      return;
+    }
+    if (typeahead.onKeyDown(e)) {
+      e.preventDefault();
+      return;
+    }
+    listNavKeyDown(e);
+  }, [ownsEvent, close, listNavKeyDown, typeahead, menuRef]);
+
+  // Re-provide the menu context so nested items behave exactly like top-level
+  // ones. Selecting a leaf item must dismiss the WHOLE stack, not just this
+  // flyout: close this level (without stealing focus back to the trigger) and
+  // propagate up via the parent menu's closeMenu. Because every level
+  // re-provides the context, this chains from the deepest flyout all the way to
+  // the root DropdownMenu (whose closeMenu hides the popover).
+  const nestedMenuContext = useMemo(() => ({
+    menuSize,
+    closeMenu: () => {
+      close({
+        focusTrigger: false
+      });
+      menuCtx?.closeMenu();
+    }
+  }), [menuSize, close, menuCtx]);
+  const endAffordance = hasSpinner ? /*#__PURE__*/_jsx("span", {
+    ...mergeProps(themeProps('dropdown-menu-indicator-icon'), {
+      className: "x78zum5 x6s0dn4"
+    }),
+    children: /*#__PURE__*/_jsx(Spinner, {
+      size: "sm"
+    })
+  }) : /*#__PURE__*/_jsx("span", {
+    ...mergeProps(themeProps('dropdown-menu-indicator-icon'), {
+      className: "x78zum5 x6s0dn4"
+    }),
+    children: /*#__PURE__*/_jsx(Icon, {
+      icon: "chevronRight",
+      size: "sm",
+      color: "secondary"
+    })
+  });
+  const popoverXstyle = menuWidth ? flyoutStyles.popoverCustomWidth(menuWidth) : flyoutStyles.popover;
+  return /*#__PURE__*/_jsxs(_Fragment, {
+    children: [/*#__PURE__*/_jsx(Item, {
+      ref: el => setTriggerEl(el),
+      id: triggerId,
+      role: "menuitem",
+      tabIndex: isDisabled ? undefined : -1,
+      "aria-haspopup": "menu",
+      "aria-expanded": isOpen,
+      "aria-controls": isOpen ? contentId : undefined,
+      "aria-disabled": isDisabled || undefined,
+      "data-testid": testId,
+      onMouseEnter: triggerProps.onMouseEnter,
+      onMouseLeave: triggerProps.onMouseLeave,
+      onPointerMove: handlePointerMove,
+      startContent: icon ? renderIconSlot(icon, {
+        size: 'sm',
+        color: 'secondary'
+      }) : undefined,
+      label: label,
+      description: description,
+      endContent: endAffordance,
+      onClick: handleTriggerClick,
+      onKeyDown: handleTriggerKeyDown,
+      isDisabled: isDisabled,
+      xstyle: [triggerStyles.root, triggerSizeStyles[menuSize], isOpen && triggerStyles.open, isDisabled && triggerStyles.disabled, xstyle],
+      ...mergeProps(themeProps('dropdown-menu-item', {
+        size: menuSize
+      }), {
+        className,
+        style
+      })
+    }), layer.render(/*#__PURE__*/_jsx("div", {
+      ref: menuRef,
+      id: contentId,
+      role: "menu"
+      // Focusable as a fallback target so an empty/loading flyout (e.g.
+      // hasSpinner with only a disabled row) can still receive keyboard
+      // focus and own arrow/Escape keys instead of leaving focus on the
+      // parent list.
+      ,
+      tabIndex: -1,
+      "aria-labelledby": triggerId,
+      onKeyDown: handleContentKeyDown,
+      onMouseEnter: contentProps.onMouseEnter,
+      onMouseLeave: contentProps.onMouseLeave,
+      "data-testid": menuDataTestId,
+      ...mergeProps(themeProps('dropdown-menu'), {
+        className: "x9f619 x78zum5 xdt5ytf x1lsbc85 xuyqlj2 x1odjw0f x1fcsqxe xgory14 x9epnlk x1n97fys x1prclbq x1i5ehqx x1hc1fzr x19991ni xuedmi6 xlr8y92"
+      }),
+      children: /*#__PURE__*/_jsx(DropdownMenuContext, {
+        value: nestedMenuContext,
+        children: children
+      })
+    }), {
+      placement: 'end',
+      alignment: 'start',
+      xstyle: [popoverXstyle, layerAnimations.end]
+    })]
+  });
+}
+DropdownMenuSubMenu.displayName = 'DropdownMenuSubMenu';

package/dist/DropdownMenu/index.d.ts

@@ -2,11 +2,21 @@
  * @file index.ts
  * @output Exports DropdownMenu, DropdownMenuItem and related types
  * @position Public API entry point
+ *
+ * SYNC: The item components below are re-exported (aliased) by the other menu
+ * surfaces that reuse the DropdownMenu item pipeline. When you add or remove an
+ * item component here, mirror it in:
+ * - /packages/core/src/ContextMenu/index.ts        (ContextMenu* aliases)
+ * - /packages/core/src/Breadcrumbs/index.ts        (BreadcrumbMenu* aliases)
+ * Those surfaces render menu items through the same renderDropdownItems +
+ * DropdownMenuContext + useListFocus path, so a new item type (e.g. a submenu)
+ * only shows up in their public API once it's aliased there too.
  */
 export { DropdownMenu, type DropdownMenuProps, type DropdownMenuButtonProps, type DropdownMenuItemData, type DropdownMenuDivider, type DropdownMenuSection, type DropdownMenuOption, } from './DropdownMenu';
 export { DropdownMenuItem, type DropdownMenuItemProps } from './DropdownMenuItem';
 export { DropdownMenuCheckboxItem, type DropdownMenuCheckboxItemProps, } from './DropdownMenuCheckboxItem';
 export { DropdownMenuRadioGroup, type DropdownMenuRadioGroupProps, } from './DropdownMenuRadioGroup';
 export { DropdownMenuRadioItem, type DropdownMenuRadioItemProps, } from './DropdownMenuRadioItem';
+export { DropdownMenuSubMenu, type DropdownMenuSubMenuProps, } from './DropdownMenuSubMenu';
 export { DropdownMenuContext, useDropdownMenuContext, type DropdownMenuContextValue, type DropdownMenuSize, } from './DropdownMenuContext';
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/DropdownMenu/index.ts"],"names":[],"mappings":"AAIA;;;;GAIG;AAEH,OAAO,EACL,YAAY,EACZ,KAAK,iBAAiB,EACtB,KAAK,uBAAuB,EAC5B,KAAK,oBAAoB,EACzB,KAAK,mBAAmB,EACxB,KAAK,mBAAmB,EACxB,KAAK,kBAAkB,GACxB,MAAM,gBAAgB,CAAC;AAExB,OAAO,EAAC,gBAAgB,EAAE,KAAK,qBAAqB,EAAC,MAAM,oBAAoB,CAAC;AAGhF,OAAO,EACL,wBAAwB,EACxB,KAAK,6BAA6B,GACnC,MAAM,4BAA4B,CAAC;AACpC,OAAO,EACL,sBAAsB,EACtB,KAAK,2BAA2B,GACjC,MAAM,0BAA0B,CAAC;AAClC,OAAO,EACL,qBAAqB,EACrB,KAAK,0BAA0B,GAChC,MAAM,yBAAyB,CAAC;AAIjC,OAAO,EACL,mBAAmB,EACnB,sBAAsB,EACtB,KAAK,wBAAwB,EAC7B,KAAK,gBAAgB,GACtB,MAAM,uBAAuB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/DropdownMenu/index.ts"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;GAaG;AAEH,OAAO,EACL,YAAY,EACZ,KAAK,iBAAiB,EACtB,KAAK,uBAAuB,EAC5B,KAAK,oBAAoB,EACzB,KAAK,mBAAmB,EACxB,KAAK,mBAAmB,EACxB,KAAK,kBAAkB,GACxB,MAAM,gBAAgB,CAAC;AAExB,OAAO,EAAC,gBAAgB,EAAE,KAAK,qBAAqB,EAAC,MAAM,oBAAoB,CAAC;AAGhF,OAAO,EACL,wBAAwB,EACxB,KAAK,6BAA6B,GACnC,MAAM,4BAA4B,CAAC;AACpC,OAAO,EACL,sBAAsB,EACtB,KAAK,2BAA2B,GACjC,MAAM,0BAA0B,CAAC;AAClC,OAAO,EACL,qBAAqB,EACrB,KAAK,0BAA0B,GAChC,MAAM,yBAAyB,CAAC;AAIjC,OAAO,EACL,mBAAmB,EACnB,KAAK,wBAAwB,GAC9B,MAAM,uBAAuB,CAAC;AAI/B,OAAO,EACL,mBAAmB,EACnB,sBAAsB,EACtB,KAAK,wBAAwB,EAC7B,KAAK,gBAAgB,GACtB,MAAM,uBAAuB,CAAC"}