@mortenbrudvik/waveui 0.7.0 → 0.9.0

package/dist/components/navigation/Menu.group.mjs

@@ -2,57 +2,59 @@
 import { cn as e } from "../../lib/cn.mjs";
 import { flattenChildren as t, isElementOfType as n } from "../../lib/children.mjs";
 import { reportMissingContext as r, warnOnce as i } from "../../lib/dev.mjs";
-import { useId as a } from "../../hooks/useId.mjs";
-import { MenuColumnSpacers as o } from "./Menu.items.mjs";
-import * as s from "react";
-import { jsx as c, jsxs as l } from "react/jsx-runtime";
+import { menuGroupClassNames as a, menuGroupHeaderClassNames as o } from "../../lib/classNames.mjs";
+import { useId as s } from "../../hooks/useId.mjs";
+import { MenuColumnSpacers as c } from "./Menu.items.mjs";
+import * as l from "react";
+import { jsx as u, jsxs as d } from "react/jsx-runtime";
 //#region src/components/navigation/Menu.group.tsx
-var u = s.createContext(null);
-u.displayName = "MenuGroupContext";
-var d = {
+var f = l.createContext(null);
+f.displayName = "MenuGroupContext";
+var p = {
 	headerId: "",
 	headerProps: void 0,
 	labelled: !0
 };
-function f(e) {
-	return s.useContext(u) || (r(e, "Menu.Group"), d);
+function m(e) {
+	return l.useContext(f) || (r(e, "Menu.Group"), p);
 }
-var p = ({ children: e, ref: r, ...i }) => {
-	let o = a("menu-group-header"), l = t(e).find(({ node: e }) => n(e, m))?.node, d = l?.props, f = d?.id || o, p = i["aria-label"] !== void 0 || i["aria-labelledby"] !== void 0, h = l !== void 0 || p, g = p ? i["aria-labelledby"] : l === void 0 ? void 0 : f, _ = s.useMemo(() => ({
-		headerId: f,
-		headerProps: d,
-		labelled: h
+var h = ({ children: r, className: i, ref: o, ...c }) => {
+	let d = s("menu-group-header"), p = t(r).find(({ node: e }) => n(e, g))?.node, m = p?.props, h = m?.id || d, _ = c["aria-label"] !== void 0 || c["aria-labelledby"] !== void 0, v = p !== void 0 || _, y = _ ? c["aria-labelledby"] : p === void 0 ? void 0 : h, b = l.useMemo(() => ({
+		headerId: h,
+		headerProps: m,
+		labelled: v
 	}), [
-		f,
-		d,
-		h
+		h,
+		m,
+		v
 	]);
-	return /* @__PURE__ */ c(u.Provider, {
-		value: _,
-		children: /* @__PURE__ */ c("div", {
+	return /* @__PURE__ */ u(f.Provider, {
+		value: b,
+		children: /* @__PURE__ */ u("div", {
 			role: "group",
-			...i,
-			ref: r,
-			"aria-labelledby": g,
-			children: e
+			...c,
+			ref: o,
+			"aria-labelledby": y,
+			className: e(a.root, i),
+			children: r
 		})
 	});
 };
-p.displayName = "MenuGroup";
-var m = (t) => {
-	let { id: n, className: r, children: a, ref: u, ...d } = t, p = f("Menu.GroupHeader"), m = p.headerProps === t, h = null;
-	return !m && p.headerProps !== void 0 ? h = "extra-header" : !m && !p.labelled && (h = "unlabelled"), s.useEffect(() => {
-		h === "unlabelled" ? i("Menu.GroupHeader:unlabelled", "Menu.GroupHeader: this header is not a direct child of Menu.Group (or of a Fragment in it), so it does not label the group. Make it a direct child, or pass aria-label to Menu.Group.") : h === "extra-header" && i("Menu.GroupHeader:extra-header", "Menu.GroupHeader: this Menu.Group already has a header (its first direct child header), so this one does not label the group. Give a group one header, or put this one in a Menu.Group of its own.");
-	}, [h]), /* @__PURE__ */ l("div", {
-		...d,
-		ref: u,
-		id: (m ? p.headerId : n) || void 0,
-		className: e("flex items-center gap-2 px-3 pb-1 pt-2 text-caption-1 font-semibold text-muted-foreground", r),
-		children: [/* @__PURE__ */ c(o, {}), a]
+h.displayName = "MenuGroup";
+var g = (t) => {
+	let { id: n, className: r, children: a, ref: s, ...f } = t, p = m("Menu.GroupHeader"), h = p.headerProps === t, g = null;
+	return !h && p.headerProps !== void 0 ? g = "extra-header" : !h && !p.labelled && (g = "unlabelled"), l.useEffect(() => {
+		g === "unlabelled" ? i("Menu.GroupHeader:unlabelled", "Menu.GroupHeader: this header is not a direct child of Menu.Group (or of a Fragment in it), so it does not label the group. Make it a direct child, or pass aria-label to Menu.Group.") : g === "extra-header" && i("Menu.GroupHeader:extra-header", "Menu.GroupHeader: this Menu.Group already has a header (its first direct child header), so this one does not label the group. Give a group one header, or put this one in a Menu.Group of its own.");
+	}, [g]), /* @__PURE__ */ d("div", {
+		...f,
+		ref: s,
+		id: (h ? p.headerId : n) || void 0,
+		className: e(o.root, "flex items-center gap-2 px-3 pb-1 pt-2 text-caption-1 font-semibold text-muted-foreground", r),
+		children: [/* @__PURE__ */ u(c, {}), a]
 	});
 };
-m.displayName = "MenuGroupHeader";
+g.displayName = "MenuGroupHeader";
 //#endregion
-export { p as MenuGroup, m as MenuGroupHeader };
+export { h as MenuGroup, g as MenuGroupHeader };
 
 //# sourceMappingURL=Menu.group.mjs.map

package/dist/components/navigation/Menu.group.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Menu.group.mjs","names":["useId","useId$1","React","MenuGroupContext","INERT_GROUP_CONTEXT","useMenuGroupContext","reportMissingContext","componentName","MenuGroup","rest","generatedId","header","flattenChildren","children","isElementOfType","node","MenuGroupHeader","headerProps","headerId","ownName","labelled","labelledBy","context","props","group","scanned","problem","warnOnce","id","cn","className","MenuColumnSpacers"],"sources":["../../../src/components/navigation/Menu.group.tsx"],"sourcesContent":["import * as React from 'react';\nimport { cn } from '../../lib/cn';\nimport { flattenChildren, isElementOfType } from '../../lib/children';\nimport { reportMissingContext, warnOnce } from '../../lib/dev';\nimport { useId } from '../../hooks/useId';\nimport { MenuColumnSpacers } from './Menu.items';\n\n/** Properties for the MenuGroup sub-component. */\nexport interface MenuGroupProps extends React.HTMLAttributes<HTMLDivElement> {\n  /** Ref to the `role=\"group\"` element. */\n  ref?: React.Ref<HTMLDivElement>;\n}\n\n/** Properties for the MenuGroupHeader sub-component. */\nexport interface MenuGroupHeaderProps extends React.HTMLAttributes<HTMLDivElement> {\n  /** Ref to the header element. */\n  ref?: React.Ref<HTMLDivElement>;\n}\n\ninterface MenuGroupContextValue {\n  /** The id the group's header renders (its own `id`, else a generated one). */\n  headerId: string;\n  /**\n   * The props object of the header the group's scan found (the first one among its direct\n   * children or Fragments), or `undefined`. React renders an element with that same object, so\n   * the header whose props are these is the scanned one: only it renders `headerId`.\n   */\n  headerProps: MenuGroupHeaderProps | undefined;\n  /**\n   * Whether the group has a name: a header among its direct children (or Fragments), or the\n   * consumer's `aria-label`/`aria-labelledby`. A header the scan did not find, in a group whose\n   * scan found none, warns only without.\n   */\n  labelled: boolean;\n}\n\nconst MenuGroupContext = React.createContext<MenuGroupContextValue | null>(null);\nMenuGroupContext.displayName = 'MenuGroupContext';\n\n/** What a misplaced header renders with in production (C-CONTEXT): its own id only, no warning. */\nconst INERT_GROUP_CONTEXT: MenuGroupContextValue = {\n  headerId: '',\n  headerProps: undefined,\n  labelled: true,\n};\n\n/** C-CONTEXT: throws in development, logs once and returns an inert value in production. */\nfunction useMenuGroupContext(componentName: string): MenuGroupContextValue {\n  const context = React.useContext(MenuGroupContext);\n  if (context) return context;\n  reportMissingContext(componentName, 'Menu.Group');\n  return INERT_GROUP_CONTEXT;\n}\n\n/**\n * A labelled group of menu items (`role=\"group\"`), for example the radio items of one choice.\n * Labelled by its `Menu.GroupHeader` when the header is a direct child (or inside a Fragment; a\n * header written in a Server Component counts too); a header nested deeper does not label it\n * (development warning). Pass `aria-label` for a group without a visible header; a consumer\n * `aria-label` or `aria-labelledby` wins over the header (one that holds `undefined` does not).\n * Give a group one header: only the first header among its direct children labels it, and any\n * other header renders only its own `id` (development warning). The group changes nothing about\n * the keyboard: its items stay items of the menu. Separate groups with `Menu.Divider`.\n *\n * Also exported as `MenuGroup` (import the flat name from React Server Components).\n */\nexport const MenuGroup = ({ children, ref, ...rest }: MenuGroupProps) => {\n  const generatedId = useId('menu-group-header');\n  // A static scan, so the reference is in the server HTML and never points at a missing id.\n  const header = flattenChildren(children).find(({ node }) =>\n    isElementOfType<MenuGroupHeaderProps>(node, MenuGroupHeader),\n  )?.node as React.ReactElement<MenuGroupHeaderProps> | undefined;\n  const headerProps = header?.props;\n  const headerId = headerProps?.id || generatedId;\n  // A prop that holds `undefined` (a wrapper forwarding it) is no name of the consumer's.\n  const ownName = rest['aria-label'] !== undefined || rest['aria-labelledby'] !== undefined;\n  const labelled = header !== undefined || ownName;\n  // Written after the spread, so a forwarded `aria-labelledby={undefined}` cannot remove it.\n  const labelledBy = ownName\n    ? rest['aria-labelledby']\n    : header !== undefined\n      ? headerId\n      : undefined;\n\n  const context = React.useMemo<MenuGroupContextValue>(\n    () => ({ headerId, headerProps, labelled }),\n    [headerId, headerProps, labelled],\n  );\n\n  return (\n    <MenuGroupContext.Provider value={context}>\n      <div role=\"group\" {...rest} ref={ref} aria-labelledby={labelledBy}>\n        {children}\n      </div>\n    </MenuGroupContext.Provider>\n  );\n};\nMenuGroup.displayName = 'MenuGroup';\n\n/**\n * The visible heading of a `Menu.Group`. It is not a menu item: arrow keys and typeahead skip it.\n * Its text lines up with the item labels (it keeps the menu's check and icon columns). It labels\n * the group when it is the group's first header among its direct children (or inside a Fragment\n * there); any other header labels nothing and renders only its own `id` (development warning).\n * Must be used inside `Menu.Group`.\n *\n * Also exported as `MenuGroupHeader` (import the flat name from React Server Components).\n */\nexport const MenuGroupHeader = (props: MenuGroupHeaderProps) => {\n  const { id, className, children, ref, ...rest } = props;\n  const group = useMenuGroupContext('Menu.GroupHeader');\n\n  // The header the group's scan found is the one rendered with the scanned element's props object.\n  // Only it renders the id the group points at: any other header (inside a custom component or an\n  // element, or a second one) keeps only its own id, so no two headers share one. This relies on\n  // React passing an element's own props object to its component (the client, Fizz, a lazy client\n  // reference and `Children.toArray` clones all do in React 19, though React does not document it).\n  // If a React upgrade breaks it, the scanned header loses its id: Menu.group.test.tsx's \"the header\n  // its scan found keeps labelling the group in StrictMode, after a re-render and as a Server\n  // Component reference\" and the server-HTML dangling-reference test fail.\n  const scanned = group.headerProps === props;\n  // C-DEV: any other header labels nothing and warns, except in a group that has no header its\n  // scan found and is named by the consumer's label (that label is the unlabelled warning's remedy).\n  let problem: 'unlabelled' | 'extra-header' | null = null;\n  if (!scanned && group.headerProps !== undefined) problem = 'extra-header';\n  else if (!scanned && !group.labelled) problem = 'unlabelled';\n  React.useEffect(() => {\n    if (problem === 'unlabelled') {\n      warnOnce(\n        'Menu.GroupHeader:unlabelled',\n        'Menu.GroupHeader: this header is not a direct child of Menu.Group (or of a Fragment in it), so it does not label the group. Make it a direct child, or pass aria-label to Menu.Group.',\n      );\n    } else if (problem === 'extra-header') {\n      warnOnce(\n        'Menu.GroupHeader:extra-header',\n        'Menu.GroupHeader: this Menu.Group already has a header (its first direct child header), so this one does not label the group. Give a group one header, or put this one in a Menu.Group of its own.',\n      );\n    }\n  }, [problem]);\n\n  return (\n    <div\n      {...rest}\n      ref={ref}\n      id={(scanned ? group.headerId : id) || undefined}\n      className={cn(\n        'flex items-center gap-2 px-3 pb-1 pt-2 text-caption-1 font-semibold text-muted-foreground',\n        className,\n      )}\n    >\n      <MenuColumnSpacers />\n      {children}\n    </div>\n  );\n};\nMenuGroupHeader.displayName = 'MenuGroupHeader';\n"],"mappings":";;;;;;;;;AAoCA,IAAMG,IAAmBD,EAAM,cAA4C,IAAI;AAC/E,EAAiB,cAAc;AAG/B,IAAME,IAA6C;CACjD,UAAU;CACV,aAAa,KAAA;CACb,UAAU;AACZ;AAGA,SAASC,EAAoB,GAA8C;CAIzE,OAHgBH,EAAM,WAAWC,CAC7B,MACJG,EAAqBC,GAAe,YAAY,GACzCH;AACT;AAcA,IAAaI,KAAa,EAAE,aAAU,QAAK,GAAGC,QAA2B;CACvE,IAAMC,IAAcV,EAAM,mBAAmB,GAEvCW,IAASC,EAAgBC,CAAQ,CAAC,CAAC,MAAM,EAAE,cAC/CC,EAAsCC,GAAMC,CAAe,CAC7D,CAAC,EAAE,MACGC,IAAcN,GAAQ,OACtBO,IAAWD,GAAa,MAAMP,GAE9BS,IAAUV,EAAK,kBAAkB,KAAA,KAAaA,EAAK,uBAAuB,KAAA,GAC1EW,IAAWT,MAAW,KAAA,KAAaQ,GAEnCE,IAAaF,IACfV,EAAK,qBACLE,MAAW,KAAA,IAET,KAAA,IADAO,GAGAI,IAAUpB,EAAM,eACb;EAAE;EAAU;EAAa;CAAS,IACzC;EAACgB;EAAUD;EAAaG;CAAQ,CAClC;CAEA,OACE,kBAACjB,EAAiB,UAAlB;EAA2B,OAAOmB;EAChC,UAAA,kBAAC,OAAD;GAAK,MAAK;GAAQ,GAAIb;GAAW;GAAK,mBAAiBY;GACpD;EACE,CAAA;CACoB,CAAA;AAE/B;AACA,EAAU,cAAc;AAWxB,IAAaL,KAAmB,MAAgC;CAC9D,IAAM,EAAE,OAAI,cAAW,aAAU,QAAK,GAAGP,MAASc,GAC5CC,IAAQnB,EAAoB,kBAAkB,GAU9CoB,IAAUD,EAAM,gBAAgBD,GAGlCG,IAAgD;CAiBpD,OAhBI,CAACD,KAAWD,EAAM,gBAAgB,KAAA,IAAW,IAAU,iBAClD,CAACC,KAAW,CAACD,EAAM,aAAU,IAAU,eAChDtB,EAAM,gBAAgB;EACpB,AAAIwB,MAAY,eACdC,EACE,+BACA,uLACF,IACSD,MAAY,kBACrBC,EACE,iCACA,oMACF;CAEJ,GAAG,CAACD,CAAO,CAAC,GAGV,kBAAC,OAAD;EACE,GAAIjB;EACC;EACL,KAAKgB,IAAUD,EAAM,WAAWI,MAAO,KAAA;EACvC,WAAWC,EACT,6FACAC,CACF;EAPF,UAAA,CASE,kBAACC,GAAD,CAAoB,CAAA,GACnBlB,CACE;;AAET;AACA,EAAgB,cAAc"}
+{"version":3,"file":"Menu.group.mjs","names":["useId","useId$1","React","MenuGroupContext","INERT_GROUP_CONTEXT","useMenuGroupContext","reportMissingContext","componentName","MenuGroup","rest","generatedId","header","flattenChildren","children","isElementOfType","node","MenuGroupHeader","headerProps","headerId","ownName","labelled","labelledBy","context","cn","menuGroupClassNames","className","props","group","scanned","problem","warnOnce","id","menuGroupHeaderClassNames","MenuColumnSpacers"],"sources":["../../../src/components/navigation/Menu.group.tsx"],"sourcesContent":["import * as React from 'react';\nimport { cn } from '../../lib/cn';\nimport { menuGroupClassNames, menuGroupHeaderClassNames } from '../../lib/classNames';\nimport { flattenChildren, isElementOfType } from '../../lib/children';\nimport { reportMissingContext, warnOnce } from '../../lib/dev';\nimport { useId } from '../../hooks/useId';\nimport { MenuColumnSpacers } from './Menu.items';\n\n/** Properties for the MenuGroup sub-component. */\nexport interface MenuGroupProps extends React.HTMLAttributes<HTMLDivElement> {\n  /** Ref to the `role=\"group\"` element. */\n  ref?: React.Ref<HTMLDivElement>;\n}\n\n/** Properties for the MenuGroupHeader sub-component. */\nexport interface MenuGroupHeaderProps extends React.HTMLAttributes<HTMLDivElement> {\n  /** Ref to the header element. */\n  ref?: React.Ref<HTMLDivElement>;\n}\n\ninterface MenuGroupContextValue {\n  /** The id the group's header renders (its own `id`, else a generated one). */\n  headerId: string;\n  /**\n   * The props object of the header the group's scan found (the first one among its direct\n   * children or Fragments), or `undefined`. React renders an element with that same object, so\n   * the header whose props are these is the scanned one: only it renders `headerId`.\n   */\n  headerProps: MenuGroupHeaderProps | undefined;\n  /**\n   * Whether the group has a name: a header among its direct children (or Fragments), or the\n   * consumer's `aria-label`/`aria-labelledby`. A header the scan did not find, in a group whose\n   * scan found none, warns only without.\n   */\n  labelled: boolean;\n}\n\nconst MenuGroupContext = React.createContext<MenuGroupContextValue | null>(null);\nMenuGroupContext.displayName = 'MenuGroupContext';\n\n/** What a misplaced header renders with in production (C-CONTEXT): its own id only, no warning. */\nconst INERT_GROUP_CONTEXT: MenuGroupContextValue = {\n  headerId: '',\n  headerProps: undefined,\n  labelled: true,\n};\n\n/** C-CONTEXT: throws in development, logs once and returns an inert value in production. */\nfunction useMenuGroupContext(componentName: string): MenuGroupContextValue {\n  const context = React.useContext(MenuGroupContext);\n  if (context) return context;\n  reportMissingContext(componentName, 'Menu.Group');\n  return INERT_GROUP_CONTEXT;\n}\n\n/**\n * A labelled group of menu items (`role=\"group\"`), for example the radio items of one choice.\n * Labelled by its `Menu.GroupHeader` when the header is a direct child (or inside a Fragment; a\n * header written in a Server Component counts too); a header nested deeper does not label it\n * (development warning). Pass `aria-label` for a group without a visible header; a consumer\n * `aria-label` or `aria-labelledby` wins over the header (one that holds `undefined` does not).\n * Give a group one header: only the first header among its direct children labels it, and any\n * other header renders only its own `id` (development warning). The group changes nothing about\n * the keyboard: its items stay items of the menu. Separate groups with `Menu.Divider`.\n *\n * Also exported as `MenuGroup` (import the flat name from React Server Components).\n */\nexport const MenuGroup = ({ children, className, ref, ...rest }: MenuGroupProps) => {\n  const generatedId = useId('menu-group-header');\n  // A static scan, so the reference is in the server HTML and never points at a missing id.\n  const header = flattenChildren(children).find(({ node }) =>\n    isElementOfType<MenuGroupHeaderProps>(node, MenuGroupHeader),\n  )?.node as React.ReactElement<MenuGroupHeaderProps> | undefined;\n  const headerProps = header?.props;\n  const headerId = headerProps?.id || generatedId;\n  // A prop that holds `undefined` (a wrapper forwarding it) is no name of the consumer's.\n  const ownName = rest['aria-label'] !== undefined || rest['aria-labelledby'] !== undefined;\n  const labelled = header !== undefined || ownName;\n  // Written after the spread, so a forwarded `aria-labelledby={undefined}` cannot remove it.\n  const labelledBy = ownName\n    ? rest['aria-labelledby']\n    : header !== undefined\n      ? headerId\n      : undefined;\n\n  const context = React.useMemo<MenuGroupContextValue>(\n    () => ({ headerId, headerProps, labelled }),\n    [headerId, headerProps, labelled],\n  );\n\n  return (\n    <MenuGroupContext.Provider value={context}>\n      <div\n        role=\"group\"\n        {...rest}\n        ref={ref}\n        aria-labelledby={labelledBy}\n        className={cn(menuGroupClassNames.root, className)}\n      >\n        {children}\n      </div>\n    </MenuGroupContext.Provider>\n  );\n};\nMenuGroup.displayName = 'MenuGroup';\n\n/**\n * The visible heading of a `Menu.Group`. It is not a menu item: arrow keys and typeahead skip it.\n * Its text lines up with the item labels (it keeps the menu's check and icon columns). It labels\n * the group when it is the group's first header among its direct children (or inside a Fragment\n * there); any other header labels nothing and renders only its own `id` (development warning).\n * Must be used inside `Menu.Group`.\n *\n * Also exported as `MenuGroupHeader` (import the flat name from React Server Components).\n */\nexport const MenuGroupHeader = (props: MenuGroupHeaderProps) => {\n  const { id, className, children, ref, ...rest } = props;\n  const group = useMenuGroupContext('Menu.GroupHeader');\n\n  // The header the group's scan found is the one rendered with the scanned element's props object.\n  // Only it renders the id the group points at: any other header (inside a custom component or an\n  // element, or a second one) keeps only its own id, so no two headers share one. This relies on\n  // React passing an element's own props object to its component (the client, Fizz, a lazy client\n  // reference and `Children.toArray` clones all do in React 19, though React does not document it).\n  // If a React upgrade breaks it, the scanned header loses its id: Menu.group.test.tsx's \"the header\n  // its scan found keeps labelling the group in StrictMode, after a re-render and as a Server\n  // Component reference\" and the server-HTML dangling-reference test fail.\n  const scanned = group.headerProps === props;\n  // C-DEV: any other header labels nothing and warns, except in a group that has no header its\n  // scan found and is named by the consumer's label (that label is the unlabelled warning's remedy).\n  let problem: 'unlabelled' | 'extra-header' | null = null;\n  if (!scanned && group.headerProps !== undefined) problem = 'extra-header';\n  else if (!scanned && !group.labelled) problem = 'unlabelled';\n  React.useEffect(() => {\n    if (problem === 'unlabelled') {\n      warnOnce(\n        'Menu.GroupHeader:unlabelled',\n        'Menu.GroupHeader: this header is not a direct child of Menu.Group (or of a Fragment in it), so it does not label the group. Make it a direct child, or pass aria-label to Menu.Group.',\n      );\n    } else if (problem === 'extra-header') {\n      warnOnce(\n        'Menu.GroupHeader:extra-header',\n        'Menu.GroupHeader: this Menu.Group already has a header (its first direct child header), so this one does not label the group. Give a group one header, or put this one in a Menu.Group of its own.',\n      );\n    }\n  }, [problem]);\n\n  return (\n    <div\n      {...rest}\n      ref={ref}\n      id={(scanned ? group.headerId : id) || undefined}\n      className={cn(\n        menuGroupHeaderClassNames.root,\n        'flex items-center gap-2 px-3 pb-1 pt-2 text-caption-1 font-semibold text-muted-foreground',\n        className,\n      )}\n    >\n      <MenuColumnSpacers />\n      {children}\n    </div>\n  );\n};\nMenuGroupHeader.displayName = 'MenuGroupHeader';\n"],"mappings":";;;;;;;;;;AAqCA,IAAMG,IAAmBD,EAAM,cAA4C,IAAI;AAC/E,EAAiB,cAAc;AAG/B,IAAME,IAA6C;CACjD,UAAU;CACV,aAAa,KAAA;CACb,UAAU;AACZ;AAGA,SAASC,EAAoB,GAA8C;CAIzE,OAHgBH,EAAM,WAAWC,CAC7B,MACJG,EAAqBC,GAAe,YAAY,GACzCH;AACT;AAcA,IAAaI,KAAa,EAAE,aAAU,cAAW,QAAK,GAAGC,QAA2B;CAClF,IAAMC,IAAcV,EAAM,mBAAmB,GAEvCW,IAASC,EAAgBC,CAAQ,CAAC,CAAC,MAAM,EAAE,cAC/CC,EAAsCC,GAAMC,CAAe,CAC7D,CAAC,EAAE,MACGC,IAAcN,GAAQ,OACtBO,IAAWD,GAAa,MAAMP,GAE9BS,IAAUV,EAAK,kBAAkB,KAAA,KAAaA,EAAK,uBAAuB,KAAA,GAC1EW,IAAWT,MAAW,KAAA,KAAaQ,GAEnCE,IAAaF,IACfV,EAAK,qBACLE,MAAW,KAAA,IAET,KAAA,IADAO,GAGAI,IAAUpB,EAAM,eACb;EAAE;EAAU;EAAa;CAAS,IACzC;EAACgB;EAAUD;EAAaG;CAAQ,CAClC;CAEA,OACE,kBAACjB,EAAiB,UAAlB;EAA2B,OAAOmB;EAChC,UAAA,kBAAC,OAAD;GACE,MAAK;GACL,GAAIb;GACC;GACL,mBAAiBY;GACjB,WAAWE,EAAGC,EAAoB,MAAMC,CAAS;GAEhD;EACE,CAAA;CACoB,CAAA;AAE/B;AACA,EAAU,cAAc;AAWxB,IAAaT,KAAmB,MAAgC;CAC9D,IAAM,EAAE,OAAI,cAAW,aAAU,QAAK,GAAGP,MAASiB,GAC5CC,IAAQtB,EAAoB,kBAAkB,GAU9CuB,IAAUD,EAAM,gBAAgBD,GAGlCG,IAAgD;CAiBpD,OAhBI,CAACD,KAAWD,EAAM,gBAAgB,KAAA,IAAW,IAAU,iBAClD,CAACC,KAAW,CAACD,EAAM,aAAU,IAAU,eAChDzB,EAAM,gBAAgB;EACpB,AAAI2B,MAAY,eACdC,EACE,+BACA,uLACF,IACSD,MAAY,kBACrBC,EACE,iCACA,oMACF;CAEJ,GAAG,CAACD,CAAO,CAAC,GAGV,kBAAC,OAAD;EACE,GAAIpB;EACC;EACL,KAAKmB,IAAUD,EAAM,WAAWI,MAAO,KAAA;EACvC,WAAWR,EACTS,EAA0B,MAC1B,6FACAP,CACF;EARF,UAAA,CAUE,kBAACQ,GAAD,CAAoB,CAAA,GACnBpB,CACE;;AAET;AACA,EAAgB,cAAc"}

package/dist/components/navigation/Menu.items.cjs

@@ -1,2 +1,2 @@
-"use client";const e=require("../../_virtual/_rolldown/runtime.cjs"),t=require("../../lib/cn.cjs"),n=require("../../lib/dev.cjs"),r=require("../../lib/slot.cjs"),i=require("../../lib/icons.cjs"),a=require("../../lib/events.cjs"),o=require("./Menu.context.cjs"),s=require("./Menu.shared.cjs");let c=require("react");c=e.__toESM(c,1);let l=require("react/jsx-runtime");function u(e){return e===`checkmark`?(0,l.jsx)(`span`,{"aria-hidden":`true`,"data-menu-column-space":`checkmark`,className:`hidden w-4 shrink-0 group-has-[[data-menu-checkmark]]/menu:inline-flex`}):(0,l.jsx)(`span`,{"aria-hidden":`true`,"data-menu-column-space":`icon`,className:`hidden h-5 w-5 shrink-0 group-has-[[data-menu-icon]]/menu:inline-flex`})}function d({checkmark:e,icon:t,label:n,shortcut:i,end:a,markLabel:o=!0}){let s=r.slotRendersContent(n),c=t&&r.slotRendersContent(t)?r.renderSlot(t,`span`,`flex h-5 w-5 shrink-0 items-center justify-center`,{"aria-hidden":!0,"data-menu-icon":``}):null;return(0,l.jsxs)(l.Fragment,{children:[e===void 0?s&&u(`checkmark`):(0,l.jsx)(`span`,{"aria-hidden":`true`,"data-menu-checkmark":``,className:`inline-flex w-4 shrink-0 items-center justify-center`,children:e}),c??(s&&u(`icon`)),(0,l.jsx)(`span`,{className:`flex-1`,"data-menu-label":o&&s&&typeof n!=`string`?``:void 0,children:r.materialiseSlotContent(n)}),i&&(0,l.jsx)(`span`,{dir:`auto`,className:`ms-4 text-caption-1 text-muted-foreground`,children:i}),a]})}d.displayName=`MenuItemRow`;function f(){return(0,l.jsxs)(l.Fragment,{children:[u(`checkmark`),u(`icon`)]})}f.displayName=`MenuColumnSpacers`;function p({disabled:e,persistOnClick:t,onClick:n,onKeyDown:r,onActivate:i,keepOpenOnSpace:s=!1,nativeEnter:l=!1,hasSubmenu:u=!1}){let d=o.useMenuListContext(),f=c.useRef(!1);return{onClick:r=>{let o=a.isOwnEvent(r);if(e){o&&r.preventDefault();return}n?.(r),o&&!r.defaultPrevented&&(i?.(r),!(r.defaultPrevented||u)&&(s&&f.current||(t??d?.menu.persistOnItemClick??!1)||d?.closeFromItem()))},onKeyDown:t=>{if(r?.(t),!t.defaultPrevented&&a.isOwnEvent(t)&&(t.key===`Enter`||t.key===` `)&&!(t.key===`Enter`&&l)&&!(t.ctrlKey||t.altKey||t.metaKey)&&(t.preventDefault(),!e)){f.current=t.key===` `;try{t.currentTarget.click()}finally{f.current=!1}}}}}function m(e){let t=o.useMenuListContext(),r=o.useOptionalMenuContext(),i=r!==null&&r.popup&&t===null;c.useEffect(()=>{i&&n.warnOnce(`Menu:item-outside-popover`,`${e}: rendered in a popup menu outside Menu.Popover, so it has no \`role="menu"\` parent. A Menu with \`open\`, \`defaultOpen\` or \`onOpenChange\` is a popup menu that renders no element of its own: put the items in Menu.Popover, or leave these props out for a static menu.`)},[i,e])}var h=({icon:e,shortcut:n,disabled:r=!1,persistOnClick:a,onClick:u,onKeyDown:f,children:h,className:g,ref:_,...v})=>{let y=c.useContext(o.MenuSubmenuTriggerContext);m(`Menu.Item`);let b=typeof h==`string`?h:void 0,x=v[`data-roving-text`]!==void 0,S=p({disabled:r,persistOnClick:a,onClick:u,onKeyDown:f,hasSubmenu:y});return(0,l.jsx)(`div`,{role:`menuitem`,"data-roving-text":b,...v,ref:_,"aria-disabled":r?!0:v[`aria-disabled`],"data-disabled":r?``:void 0,"data-has-submenu":y?``:void 0,onClick:S.onClick,onKeyDown:S.onKeyDown,className:t.cn(s.menuItemClasses,g),children:(0,l.jsx)(d,{icon:e,label:h,shortcut:n,markLabel:!x,end:y?(0,l.jsx)(i.ChevronRightIcon,{size:16,className:`ms-auto shrink-0 wave-rtl:-scale-x-100`}):void 0})})};h.displayName=`MenuItem`;var g=({className:e,ref:n,...r})=>(0,l.jsx)(`div`,{role:`separator`,...r,ref:n,className:t.cn(`my-1 border-t border-border`,e)});g.displayName=`MenuDivider`,exports.MenuColumnSpacers=f,exports.MenuDivider=g,exports.MenuItem=h,exports.MenuItemRow=d,exports.useMenuItemActivation=p,exports.useMenuItemPlacementWarning=m;
+"use client";const e=require("../../_virtual/_rolldown/runtime.cjs"),t=require("../../lib/cn.cjs"),n=require("../../lib/dev.cjs"),r=require("../../lib/slot.cjs"),i=require("../../lib/classNames.cjs"),a=require("../../lib/icons.cjs"),o=require("../../lib/events.cjs"),s=require("./Menu.context.cjs"),c=require("./Menu.shared.cjs");let l=require("react");l=e.__toESM(l,1);let u=require("react/jsx-runtime");function d(e){return e===`checkmark`?(0,u.jsx)(`span`,{"aria-hidden":`true`,"data-menu-column-space":`checkmark`,className:`hidden w-4 shrink-0 group-has-[[data-menu-checkmark]]/menu:inline-flex`}):(0,u.jsx)(`span`,{"aria-hidden":`true`,"data-menu-column-space":`icon`,className:`hidden h-5 w-5 shrink-0 group-has-[[data-menu-icon]]/menu:inline-flex`})}function f({checkmark:e,icon:n,label:i,shortcut:a,end:o,markLabel:s=!0,partClassNames:c}){let l=r.slotRendersContent(i),f=n&&r.slotRendersContent(n)?r.renderSlot(n,`span`,t.cn(c?.icon,`flex h-5 w-5 shrink-0 items-center justify-center`),{"aria-hidden":!0,"data-menu-icon":``}):null;return(0,u.jsxs)(u.Fragment,{children:[e===void 0?l&&d(`checkmark`):(0,u.jsx)(`span`,{"aria-hidden":`true`,"data-menu-checkmark":``,className:t.cn(c?.checkmark,`inline-flex w-4 shrink-0 items-center justify-center`),children:e}),f??(l&&d(`icon`)),(0,u.jsx)(`span`,{className:t.cn(c?.content,`flex-1`),"data-menu-label":s&&l&&typeof i!=`string`?``:void 0,children:r.materialiseSlotContent(i)}),a&&(0,u.jsx)(`span`,{dir:`auto`,className:t.cn(c?.shortcut,`ms-4 text-caption-1 text-muted-foreground`),children:a}),o]})}f.displayName=`MenuItemRow`;function p(){return(0,u.jsxs)(u.Fragment,{children:[d(`checkmark`),d(`icon`)]})}p.displayName=`MenuColumnSpacers`;function m({disabled:e,persistOnClick:t,onClick:n,onKeyDown:r,onActivate:i,keepOpenOnSpace:a=!1,nativeEnter:c=!1,hasSubmenu:u=!1}){let d=s.useMenuListContext(),f=l.useRef(!1);return{onClick:r=>{let s=o.isOwnEvent(r);if(e){s&&r.preventDefault();return}n?.(r),s&&!r.defaultPrevented&&(i?.(r),!(r.defaultPrevented||u)&&(a&&f.current||(t??d?.menu.persistOnItemClick??!1)||d?.closeFromItem()))},onKeyDown:t=>{if(r?.(t),!t.defaultPrevented&&o.isOwnEvent(t)&&(t.key===`Enter`||t.key===` `)&&!(t.key===`Enter`&&c)&&!(t.ctrlKey||t.altKey||t.metaKey)&&(t.preventDefault(),!e)){f.current=t.key===` `;try{t.currentTarget.click()}finally{f.current=!1}}}}}function h(e){let t=s.useMenuListContext(),r=s.useOptionalMenuContext(),i=r!==null&&r.popup&&t===null;l.useEffect(()=>{i&&n.warnOnce(`Menu:item-outside-popover`,`${e}: rendered in a popup menu outside Menu.Popover, so it has no \`role="menu"\` parent. A Menu with \`open\`, \`defaultOpen\` or \`onOpenChange\` is a popup menu that renders no element of its own: put the items in Menu.Popover, or leave these props out for a static menu.`)},[i,e])}var g=({icon:e,shortcut:n,disabled:r=!1,persistOnClick:o,onClick:d,onKeyDown:p,children:g,className:_,ref:v,...y})=>{let b=l.useContext(s.MenuSubmenuTriggerContext);h(`Menu.Item`);let x=typeof g==`string`?g:void 0,S=y[`data-roving-text`]!==void 0,C=m({disabled:r,persistOnClick:o,onClick:d,onKeyDown:p,hasSubmenu:b});return(0,u.jsx)(`div`,{role:`menuitem`,"data-roving-text":x,...y,ref:v,"aria-disabled":r?!0:y[`aria-disabled`],"data-disabled":r?``:void 0,"data-has-submenu":b?``:void 0,onClick:C.onClick,onKeyDown:C.onKeyDown,className:t.cn(i.menuItemClassNames.root,c.menuItemClasses,_),children:(0,u.jsx)(f,{icon:e,label:g,shortcut:n,markLabel:!S,partClassNames:{icon:i.menuItemClassNames.icon,content:i.menuItemClassNames.content,shortcut:i.menuItemClassNames.shortcut},end:b?(0,u.jsx)(a.ChevronRightIcon,{size:16,className:t.cn(i.menuItemClassNames.submenuIndicator,`ms-auto shrink-0 wave-rtl:-scale-x-100`)}):void 0})})};g.displayName=`MenuItem`;var _=({className:e,ref:n,...r})=>(0,u.jsx)(`div`,{role:`separator`,...r,ref:n,className:t.cn(i.menuDividerClassNames.root,`my-1 border-t border-border`,e)});_.displayName=`MenuDivider`,exports.MenuColumnSpacers=p,exports.MenuDivider=_,exports.MenuItem=g,exports.MenuItemRow=f,exports.useMenuItemActivation=m,exports.useMenuItemPlacementWarning=h;
 //# sourceMappingURL=Menu.items.cjs.map

package/dist/components/navigation/Menu.items.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Menu.items.cjs","names":["slotRendersContent","renderSlot","_Fragment","materialiseSlotContent","useMenuListContext","React","isOwnEvent","useOptionalMenuContext","MenuSubmenuTriggerContext","cn","menuItemClasses","ChevronRightIcon","require_runtime","require_cn","require_dev","require_slot","require_icons","require_events","require_Menu_context","require_Menu_shared","react","react_jsx_runtime","renderColumnSpace","column","MenuItemRow","hasLabel","label","iconNode","icon","checkmark","markLabel","shortcut","end","MenuColumnSpacers","useMenuItemActivation","list","clickFromSpaceRef","own","event","disabled","onClick","onActivate","hasSubmenu","keepOpenOnSpace","persistOnClick","onKeyDown","nativeEnter","useMenuItemPlacementWarning","menu","outsidePopover","componentName","MenuItem","rest","isSubmenuTrigger","stringLabel","children","ownRovingText","activation","className","MenuDivider"],"sources":["../../../src/components/navigation/Menu.items.tsx"],"sourcesContent":["import * as React from 'react';\nimport { cn } from '../../lib/cn';\nimport type { Slot } from '../../lib/types';\nimport { materialiseSlotContent, renderSlot, slotRendersContent } from '../../lib/slot';\nimport { warnOnce } from '../../lib/dev';\nimport { isOwnEvent } from '../../lib/events';\nimport { ChevronRightIcon } from '../../lib/icons';\nimport {\n  MenuSubmenuTriggerContext,\n  useMenuListContext,\n  useOptionalMenuContext,\n} from './Menu.context';\nimport { menuItemClasses } from './Menu.shared';\n\n/** Properties for the MenuItem sub-component. */\nexport interface MenuItemProps extends React.HTMLAttributes<HTMLDivElement> {\n  /**\n   * Slot for an icon displayed before the item text. Rendered with `aria-hidden=\"true\"`. A falsy\n   * icon (`''`, `0`) or a list of nothing renders no icon box.\n   */\n  icon?: Slot<'span'>;\n  /**\n   * Keyboard shortcut text displayed at the end of the item. Its direction comes from its own text\n   * (`dir=\"auto\"`), so \"Ctrl+,\" keeps its order in an RTL menu.\n   */\n  shortcut?: string;\n  /** Whether the menu item is disabled (`aria-disabled`; skipped by keyboard navigation). */\n  disabled?: boolean;\n  /**\n   * Keep a popup menu open after this item is activated. `true` or `false` here wins over the\n   * Menu's `persistOnItemClick`.\n   * @default the Menu's `persistOnItemClick` (`false`)\n   */\n  persistOnClick?: boolean;\n  /**\n   * Label content of the menu item. Leave it out only for the submenu half of a\n   * `Menu.SplitGroup`, which then needs `aria-label`.\n   */\n  children?: React.ReactNode;\n  /**\n   * Ref to the item element (`role=\"menuitem\"`; `menuitemcheckbox` or `menuitemradio` for the\n   * checkable items).\n   */\n  ref?: React.Ref<HTMLDivElement>;\n}\n\n/** Properties for the MenuDivider sub-component. */\nexport interface MenuDividerProps extends React.HTMLAttributes<HTMLDivElement> {\n  /** Ref to the `role=\"separator\"` element. */\n  ref?: React.Ref<HTMLDivElement>;\n}\n\n// ---------------------------------------------------------------------------\n// The item row and the column alignment\n// ---------------------------------------------------------------------------\n\n/** Internal: the content of one menu item row, rendered inside the item element. */\nexport interface MenuItemRowProps {\n  /**\n   * Checkable items: the checkmark column's content (the glyph, or `null` while unchecked); the\n   * column renders in both states, marked `data-menu-checkmark`. `undefined` for other items,\n   * which render a hidden placeholder instead.\n   */\n  checkmark?: React.ReactNode | null;\n  /** The icon slot (a falsy icon or a list of nothing is no icon). */\n  icon?: Slot<'span'>;\n  /** The label (typeahead reads a non-string label through its `data-menu-label` element). */\n  label: React.ReactNode;\n  /** The shortcut text (rendered with `dir=\"auto\"`). */\n  shortcut?: string;\n  /** Content at the row's end: the submenu chevron or a switch. */\n  end?: React.ReactNode;\n  /**\n   * Whether a non-string label is marked `data-menu-label` for typeahead. Pass `false` when the\n   * item carries its own `data-roving-text`, which the label's text must not replace.\n   * @default true\n   */\n  markLabel?: boolean;\n}\n\n/**\n * The placeholder of the checkmark or the icon column: hidden, and shown as soon as any item of\n * the same menu list (the `group/menu` element) renders that column, so every label starts at the\n * same place. Decorative (`aria-hidden`).\n */\nfunction renderColumnSpace(column: 'checkmark' | 'icon'): React.ReactElement {\n  return column === 'checkmark' ? (\n    <span\n      aria-hidden=\"true\"\n      data-menu-column-space=\"checkmark\"\n      className=\"hidden w-4 shrink-0 group-has-[[data-menu-checkmark]]/menu:inline-flex\"\n    />\n  ) : (\n    <span\n      aria-hidden=\"true\"\n      data-menu-column-space=\"icon\"\n      className=\"hidden h-5 w-5 shrink-0 group-has-[[data-menu-icon]]/menu:inline-flex\"\n    />\n  );\n}\n\n/**\n * Internal: one menu item row, in DOM order (RTL mirrors it): the checkmark column, the icon\n * column, the label, the shortcut and the end content. A row without a checkmark or an icon\n * renders the column's placeholder instead; a row whose label renders nothing (the icon-only\n * submenu half of a split group) renders no placeholders.\n */\nexport function MenuItemRow({\n  checkmark,\n  icon,\n  label,\n  shortcut,\n  end,\n  markLabel = true,\n}: MenuItemRowProps): React.ReactElement {\n  // The check does not consume a one-shot iterable label: it is rendered materialised.\n  const hasLabel = slotRendersContent(label);\n  // A falsy icon (`icon={name && <Icon />}` with `name` '' or a count of 0) is no icon, as in Nav,\n  // Tree and Avatar, and so is a collection whose items render nothing: no empty 20px box before\n  // the label. The check does not consume a generator: renderSlot still renders its items.\n  const iconNode =\n    icon && slotRendersContent(icon)\n      ? renderSlot(icon, 'span', 'flex h-5 w-5 shrink-0 items-center justify-center', {\n          'aria-hidden': true,\n          'data-menu-icon': '',\n        })\n      : null;\n\n  return (\n    <>\n      {checkmark !== undefined ? (\n        <span\n          aria-hidden=\"true\"\n          data-menu-checkmark=\"\"\n          className=\"inline-flex w-4 shrink-0 items-center justify-center\"\n        >\n          {checkmark}\n        </span>\n      ) : (\n        hasLabel && renderColumnSpace('checkmark')\n      )}\n      {iconNode ?? (hasLabel && renderColumnSpace('icon'))}\n      <span\n        className=\"flex-1\"\n        data-menu-label={markLabel && hasLabel && typeof label !== 'string' ? '' : undefined}\n      >\n        {materialiseSlotContent(label)}\n      </span>\n      {/* The shortcut takes its direction from its own text (`dir=\"auto\"` also isolates it): in an\n          RTL menu, \"Ctrl+,\" would otherwise be reordered to \",+Ctrl\". */}\n      {shortcut && (\n        <span dir=\"auto\" className=\"ms-4 text-caption-1 text-muted-foreground\">\n          {shortcut}\n        </span>\n      )}\n      {end}\n    </>\n  );\n}\nMenuItemRow.displayName = 'MenuItemRow';\n\n/** Internal: the two column placeholders alone, for a row that is not an item (a group header). */\nexport function MenuColumnSpacers(): React.ReactElement {\n  return (\n    <>\n      {renderColumnSpace('checkmark')}\n      {renderColumnSpace('icon')}\n    </>\n  );\n}\nMenuColumnSpacers.displayName = 'MenuColumnSpacers';\n\n// ---------------------------------------------------------------------------\n// Item activation\n// ---------------------------------------------------------------------------\n\n/** Internal: the activation of every menu item kind. */\nexport interface MenuItemActivationOptions {\n  disabled: boolean;\n  /**\n   * The item's own `persistOnClick`; `undefined` falls back to the Menu's `persistOnItemClick`.\n   * A link item passes `false` (a link always closes).\n   */\n  persistOnClick: boolean | undefined;\n  /** The consumer's handlers, composed consumer first (C-COMPOSE). */\n  onClick?: React.MouseEventHandler<HTMLElement>;\n  onKeyDown?: React.KeyboardEventHandler<HTMLElement>;\n  /**\n   * Runs on an own, enabled click after the consumer's `onClick`, unless it prevented the default.\n   * Its own `preventDefault()` keeps the menu open.\n   */\n  onActivate?: (event: React.MouseEvent<HTMLElement>) => void;\n  /** Space activates and keeps the menu open (checkbox, radio and switch items). */\n  keepOpenOnSpace?: boolean;\n  /** Enter is left to the element's native activation (links); Space still clicks. */\n  nativeEnter?: boolean;\n  /** The item opens a submenu: activation never closes its menu. */\n  hasSubmenu?: boolean;\n}\n\n/**\n * Internal: the click and key handlers of a menu item.\n *\n * - Events from a portal opened inside the item (a Popover, a Dialog) reach the consumer's\n *   handlers, as React bubbles them, but never activate the item or close the menu.\n * - A disabled item calls no `onClick` and prevents its own click; its Enter and Space are still\n *   consumed.\n * - Enter and Space are consumed (no page scroll) and click the item; with Ctrl, Alt or Meta they\n *   are left to the page. A Space that continues a typeahead search is skipped (the roving\n *   capture handler prevented it). With `nativeEnter`, Enter is left to the element.\n * - After the consumer's `onClick` and `onActivate`, the item closes its menu through the list's\n *   `closeFromItem`, unless the click was not its own, its default was prevented, `hasSubmenu` is\n *   set, `keepOpenOnSpace` is set and Space caused the click, or\n *   `persistOnClick ?? menu.persistOnItemClick` is `true`.\n */\nexport function useMenuItemActivation({\n  disabled,\n  persistOnClick,\n  onClick,\n  onKeyDown,\n  onActivate,\n  keepOpenOnSpace = false,\n  nativeEnter = false,\n  hasSubmenu = false,\n}: MenuItemActivationOptions): {\n  onClick: React.MouseEventHandler<HTMLElement>;\n  onKeyDown: React.KeyboardEventHandler<HTMLElement>;\n} {\n  const list = useMenuListContext();\n  // Set while the key handler's click runs, so the click knows that Space caused it.\n  const clickFromSpaceRef = React.useRef(false);\n\n  const handleClick = (event: React.MouseEvent<HTMLElement>) => {\n    // A click inside a portal opened from the item reaches the consumer's onClick (React bubbles\n    // it), but is not a click on the item: it never activates the item or closes the menu. A\n    // disabled item calls no onClick, as a disabled button; a portal's click keeps its default.\n    const own = isOwnEvent(event);\n    if (disabled) {\n      if (own) event.preventDefault();\n      return;\n    }\n    onClick?.(event);\n    if (!own || event.defaultPrevented) return;\n    onActivate?.(event);\n    if (event.defaultPrevented || hasSubmenu) return;\n    if (keepOpenOnSpace && clickFromSpaceRef.current) return;\n    if (persistOnClick ?? list?.menu.persistOnItemClick ?? false) return;\n    list?.closeFromItem();\n  };\n\n  const handleKeyDown = (event: React.KeyboardEvent<HTMLElement>) => {\n    // C-COMPOSE: the consumer's onKeyDown runs first; preventDefault() skips the built-in keys.\n    onKeyDown?.(event);\n    if (event.defaultPrevented) return;\n    // Enter and Space typed in a portal opened from the item belong to that portal.\n    if (!isOwnEvent(event)) return;\n    if (event.key !== 'Enter' && event.key !== ' ') return;\n    // A link follows itself on Enter (Shift, Ctrl and Meta keep opening a new window or tab).\n    if (event.key === 'Enter' && nativeEnter) return;\n    // With Ctrl, Alt or Meta (Ctrl+Alt+Space included) the key is a shortcut, left to the page.\n    if (event.ctrlKey || event.altKey || event.metaKey) return;\n    // Menu items consume Enter/Space (no page scroll), whether or not they can be activated.\n    event.preventDefault();\n    if (disabled) return;\n    clickFromSpaceRef.current = event.key === ' ';\n    try {\n      event.currentTarget.click();\n    } finally {\n      clickFromSpaceRef.current = false;\n    }\n  };\n\n  return { onClick: handleClick, onKeyDown: handleKeyDown };\n}\n\n/**\n * Internal (C-DEV): warns once, from an effect, when an item of any kind renders in a popup menu\n * outside `Menu.Popover`. A Menu with `open`, `defaultOpen` or `onOpenChange` is a popup menu that\n * renders no element of its own, so such an item has no `role=\"menu\"` parent.\n *\n * @param componentName The item's name in the message, e.g. `'Menu.ItemCheckbox'`.\n */\nexport function useMenuItemPlacementWarning(componentName: string): void {\n  const list = useMenuListContext();\n  const menu = useOptionalMenuContext();\n  const outsidePopover = menu !== null && menu.popup && list === null;\n  React.useEffect(() => {\n    if (!outsidePopover) return;\n    warnOnce(\n      'Menu:item-outside-popover',\n      `${componentName}: rendered in a popup menu outside Menu.Popover, so it has no \\`role=\"menu\"\\` parent. A Menu with \\`open\\`, \\`defaultOpen\\` or \\`onOpenChange\\` is a popup menu that renders no element of its own: put the items in Menu.Popover, or leave these props out for a static menu.`,\n    );\n  }, [outsidePopover, componentName]);\n}\n\n// ---------------------------------------------------------------------------\n// Menu.Item / Menu.Divider\n// ---------------------------------------------------------------------------\n\n/**\n * An action in a menu (`role=\"menuitem\"`). Enter and Space activate it (a Space typed within 500 ms\n * of a typeahead character continues the search instead; with Ctrl, Alt or Meta they are left to\n * the page); in a popup menu, activation closes the menu and returns focus to the trigger unless\n * `persistOnClick` (or the Menu's `persistOnItemClick`) keeps it open or the consumer's `onClick`\n * calls `preventDefault()`. Disabled items are `aria-disabled`, skipped by keyboard navigation and\n * never activated: their `onClick` is not called. A consumer `aria-disabled` without `disabled`\n * only changes the look and keyboard navigation: activation still runs `onClick` (guard it\n * yourself), as on Button. The item's tab index is managed by the menu. Typeahead matches the\n * label (`children`), not the icon or the shortcut; a `data-roving-text` you pass replaces the\n * label's text. Clicks and keys from a portal opened inside the item (a Popover, a Dialog) still\n * reach your `onClick` (on an enabled item) and `onKeyDown`, as React bubbles them, but never\n * activate the item or close the menu.\n *\n * The labels of a menu line up: when any item of the menu shows an icon (or a check), every item\n * keeps an empty column of that width before its label.\n *\n * As the child of a submenu's `Menu.Trigger` (a `Menu` nested in a menu list), the item is the\n * submenu's trigger: it shows a chevron at its end (mirrored in RTL) and `data-has-submenu`, and\n * activating it never closes its own menu. ArrowRight (ArrowLeft in RTL), Enter, Space and a click\n * open the submenu and move focus to its first item; resting the mouse on the item opens it\n * without moving focus.\n *\n * Also exported as `MenuItem` (import the flat name from React Server Components).\n */\nexport const MenuItem = ({\n  icon,\n  shortcut,\n  disabled = false,\n  persistOnClick,\n  onClick,\n  onKeyDown,\n  children,\n  className,\n  ref,\n  ...rest\n}: MenuItemProps) => {\n  const isSubmenuTrigger = React.useContext(MenuSubmenuTriggerContext);\n  useMenuItemPlacementWarning('Menu.Item');\n\n  // Typeahead text: a string label directly; any other label through its marked element.\n  const stringLabel = typeof children === 'string' ? children : undefined;\n  const ownRovingText = (rest as Record<string, unknown>)['data-roving-text'] !== undefined;\n\n  // A submenu trigger item opens its submenu (the trigger's composed onClick): activating it never\n  // closes its own menu.\n  const activation = useMenuItemActivation({\n    disabled,\n    persistOnClick,\n    onClick,\n    onKeyDown,\n    hasSubmenu: isSubmenuTrigger,\n  });\n\n  return (\n    <div\n      role=\"menuitem\"\n      data-roving-text={stringLabel}\n      {...rest}\n      ref={ref}\n      aria-disabled={disabled ? true : rest['aria-disabled']}\n      data-disabled={disabled ? '' : undefined}\n      data-has-submenu={isSubmenuTrigger ? '' : undefined}\n      onClick={activation.onClick}\n      onKeyDown={activation.onKeyDown}\n      className={cn(menuItemClasses, className)}\n    >\n      <MenuItemRow\n        icon={icon}\n        label={children}\n        shortcut={shortcut}\n        markLabel={!ownRovingText}\n        end={\n          isSubmenuTrigger ? (\n            <ChevronRightIcon size={16} className=\"ms-auto shrink-0 wave-rtl:-scale-x-100\" />\n          ) : undefined\n        }\n      />\n    </div>\n  );\n};\nMenuItem.displayName = 'MenuItem';\n\n/**\n * A separator between groups of menu items (`role=\"separator\"`).\n *\n * Also exported as `MenuDivider` (import the flat name from React Server Components).\n */\nexport const MenuDivider = ({ className, ref, ...rest }: MenuDividerProps) => {\n  return (\n    <div\n      role=\"separator\"\n      {...rest}\n      ref={ref}\n      className={cn('my-1 border-t border-border', className)}\n    />\n  );\n};\nMenuDivider.displayName = 'MenuDivider';\n"],"mappings":"+WAqFA,SAASsB,EAAkB,EAAkD,CAC3E,OAAOC,IAAW,aAChB,EAAAF,EAAA,IAAA,CAAC,OAAD,CACE,cAAY,OACZ,yBAAuB,YACvB,UAAU,wEACX,CAAA,GAED,EAAAA,EAAA,IAAA,CAAC,OAAD,CACE,cAAY,OACZ,yBAAuB,OACvB,UAAU,uEACX,CAAA,CAEL,CAQA,SAAgBG,EAAY,CAC1B,YACA,OACA,QACA,WACA,MACA,YAAY,IAC2B,CAEvC,IAAMC,EAAWzB,EAAAA,mBAAmB0B,CAAK,EAInCC,EACJC,GAAQ5B,EAAAA,mBAAmB4B,CAAI,EAC3B3B,EAAAA,WAAW2B,EAAM,OAAQ,oDAAqD,CAC5E,cAAe,GACf,iBAAkB,EACpB,CAAC,EACD,KAEN,OACE,EAAAP,EAAA,KAAA,CAAAnB,EAAAA,SAAA,CAAA,SAAA,CACG2B,IAAc,IAAA,GASbJ,GAAYH,EAAkB,WAAW,GARzC,EAAAD,EAAA,IAAA,CAAC,OAAD,CACE,cAAY,OACZ,sBAAoB,GACpB,UAAU,uDAET,SAAAQ,CACG,CAAA,EAIPF,IAAaF,GAAYH,EAAkB,MAAM,IAClD,EAAAD,EAAA,IAAA,CAAC,OAAD,CACE,UAAU,SACV,kBAAiBS,GAAaL,GAAY,OAAOC,GAAU,SAAW,GAAK,IAAA,GAE1E,SAAAvB,EAAAA,uBAAuBuB,CAAK,CACzB,CAAA,EAGLK,IACC,EAAAV,EAAA,IAAA,CAAC,OAAD,CAAM,IAAI,OAAO,UAAU,4CACxB,SAAAU,CACG,CAAA,EAEPC,CACD,CAAA,CAAA,CAEN,CACA,EAAY,YAAc,cAG1B,SAAgBC,GAAwC,CACtD,OACE,EAAAZ,EAAA,KAAA,CAAAnB,EAAAA,SAAA,CAAA,SAAA,CACGoB,EAAkB,WAAW,EAC7BA,EAAkB,MAAM,CACzB,CAAA,CAAA,CAEN,CACA,EAAkB,YAAc,oBA6ChC,SAAgBY,EAAsB,CACpC,WACA,iBACA,UACA,YACA,aACA,kBAAkB,GAClB,cAAc,GACd,aAAa,IAIb,CACA,IAAMC,EAAO/B,EAAAA,mBAAmB,EAE1BgC,EAAoB/B,EAAM,OAAO,EAAK,EA0C5C,MAAO,CAAE,QAxCY,GAAyC,CAI5D,IAAMgC,EAAM/B,EAAAA,WAAWgC,CAAK,EAC5B,GAAIC,EAAU,CACRF,GAAKC,EAAM,eAAe,EAC9B,MACF,CACAE,IAAUF,CAAK,EACVD,GAAO,GAAM,mBAClBI,IAAaH,CAAK,EACd,IAAM,kBAAoBI,KAC1BC,GAAmBP,EAAkB,UACrCQ,GAAkBT,GAAM,KAAK,oBAAsB,KACvDA,GAAM,cAAc,GACtB,EAwB+B,UAtBR,GAA4C,CAGjE,GADAU,IAAYP,CAAK,EACb,GAAM,kBAELhC,EAAAA,WAAWgC,CAAK,IACjBA,EAAM,MAAQ,SAAWA,EAAM,MAAQ,MAEvC,IAAM,MAAQ,SAAWQ,IAEzB,IAAM,SAAWR,EAAM,QAAUA,EAAM,WAE3CA,EAAM,eAAe,EACjB,IACJ,GAAkB,QAAUA,EAAM,MAAQ,IAC1C,GAAI,CACFA,EAAM,cAAc,MAAM,CAC5B,QAAU,CACR,EAAkB,QAAU,EAC9B,CAL0C,CAM5C,CAEwD,CAC1D,CASA,SAAgBS,EAA4B,EAA6B,CACvE,IAAMZ,EAAO/B,EAAAA,mBAAmB,EAC1B4C,EAAOzC,EAAAA,uBAAuB,EAC9B0C,EAAiBD,IAAS,MAAQA,EAAK,OAASb,IAAS,KAC/Df,EAAM,cAAgB,CACf6B,GACLnC,EAAA,SACE,4BACA,GAAGoC,EAAc,+QACnB,CACF,EAAG,CAACD,EAAgBC,CAAa,CAAC,CACpC,CA+BA,IAAaC,GAAY,CACvB,OACA,WACA,WAAW,GACX,iBACA,UACA,YACA,WACA,YACA,MACA,GAAGC,KACgB,CACnB,IAAMC,EAAmBhD,EAAM,WAAWG,EAAAA,yBAAyB,EACnEuC,EAA4B,WAAW,EAGvC,IAAMO,EAAc,OAAOC,GAAa,SAAWA,EAAW,IAAA,GACxDC,EAAiBJ,EAAiC,sBAAwB,IAAA,GAI1EK,EAAavB,EAAsB,CACvC,WACA,iBACA,UACA,YACA,WAAYmB,CACd,CAAC,EAED,OACE,EAAAhC,EAAA,IAAA,CAAC,MAAD,CACE,KAAK,WACL,mBAAkBiC,EAClB,GAAIF,EACC,MACL,gBAAeb,EAAW,GAAOa,EAAK,iBACtC,gBAAeb,EAAW,GAAK,IAAA,GAC/B,mBAAkBc,EAAmB,GAAK,IAAA,GAC1C,QAASI,EAAW,QACpB,UAAWA,EAAW,UACtB,UAAWhD,EAAAA,GAAGC,EAAAA,gBAAiBgD,CAAS,EAExC,UAAA,EAAArC,EAAA,IAAA,CAACG,EAAD,CACQ,OACN,MAAO+B,EACG,WACV,UAAW,CAACC,EACZ,IACEH,GACE,EAAAhC,EAAA,IAAA,CAACV,EAAAA,iBAAD,CAAkB,KAAM,GAAI,UAAU,wCAA0C,CAAA,EAC9E,IAAA,EAEP,CAAA,CACE,CAAA,CAET,EACA,EAAS,YAAc,WAOvB,IAAagD,GAAe,CAAE,YAAW,MAAK,GAAGP,MAE7C,EAAA/B,EAAA,IAAA,CAAC,MAAD,CACE,KAAK,YACL,GAAI+B,EACC,MACL,UAAW3C,EAAAA,GAAG,8BAA+BiD,CAAS,CACvD,CAAA,EAGL,EAAY,YAAc"}
+{"version":3,"file":"Menu.items.cjs","names":["slotRendersContent","renderSlot","cn","_Fragment","materialiseSlotContent","useMenuListContext","React","isOwnEvent","useOptionalMenuContext","MenuSubmenuTriggerContext","menuItemClassNames","menuItemClasses","ChevronRightIcon","menuDividerClassNames","require_runtime","require_cn","require_dev","require_slot","require_classNames","require_icons","require_events","require_Menu_context","require_Menu_shared","react","react_jsx_runtime","renderColumnSpace","column","MenuItemRow","hasLabel","label","iconNode","icon","partClassNames","checkmark","markLabel","shortcut","end","MenuColumnSpacers","useMenuItemActivation","list","clickFromSpaceRef","own","event","disabled","onClick","onActivate","hasSubmenu","keepOpenOnSpace","persistOnClick","onKeyDown","nativeEnter","useMenuItemPlacementWarning","menu","outsidePopover","componentName","MenuItem","rest","isSubmenuTrigger","stringLabel","children","ownRovingText","activation","className","MenuDivider"],"sources":["../../../src/components/navigation/Menu.items.tsx"],"sourcesContent":["import * as React from 'react';\nimport { cn } from '../../lib/cn';\nimport { menuDividerClassNames, menuItemClassNames } from '../../lib/classNames';\nimport type { Slot } from '../../lib/types';\nimport { materialiseSlotContent, renderSlot, slotRendersContent } from '../../lib/slot';\nimport { warnOnce } from '../../lib/dev';\nimport { isOwnEvent } from '../../lib/events';\nimport { ChevronRightIcon } from '../../lib/icons';\nimport {\n  MenuSubmenuTriggerContext,\n  useMenuListContext,\n  useOptionalMenuContext,\n} from './Menu.context';\nimport { menuItemClasses } from './Menu.shared';\n\n/** Properties for the MenuItem sub-component. */\nexport interface MenuItemProps extends React.HTMLAttributes<HTMLDivElement> {\n  /**\n   * Slot for an icon displayed before the item text. Rendered with `aria-hidden=\"true\"`. A falsy\n   * icon (`''`, `0`) or a list of nothing renders no icon box.\n   */\n  icon?: Slot<'span'>;\n  /**\n   * Keyboard shortcut text displayed at the end of the item. Its direction comes from its own text\n   * (`dir=\"auto\"`), so \"Ctrl+,\" keeps its order in an RTL menu.\n   */\n  shortcut?: string;\n  /** Whether the menu item is disabled (`aria-disabled`; skipped by keyboard navigation). */\n  disabled?: boolean;\n  /**\n   * Keep a popup menu open after this item is activated. `true` or `false` here wins over the\n   * Menu's `persistOnItemClick`.\n   * @default the Menu's `persistOnItemClick` (`false`)\n   */\n  persistOnClick?: boolean;\n  /**\n   * Label content of the menu item. Leave it out only for the submenu half of a\n   * `Menu.SplitGroup`, which then needs `aria-label`.\n   */\n  children?: React.ReactNode;\n  /**\n   * Ref to the item element (`role=\"menuitem\"`; `menuitemcheckbox` or `menuitemradio` for the\n   * checkable items).\n   */\n  ref?: React.Ref<HTMLDivElement>;\n}\n\n/** Properties for the MenuDivider sub-component. */\nexport interface MenuDividerProps extends React.HTMLAttributes<HTMLDivElement> {\n  /** Ref to the `role=\"separator\"` element. */\n  ref?: React.Ref<HTMLDivElement>;\n}\n\n// ---------------------------------------------------------------------------\n// The item row and the column alignment\n// ---------------------------------------------------------------------------\n\n/** Internal: the content of one menu item row, rendered inside the item element. */\nexport interface MenuItemRowProps {\n  /**\n   * Checkable items: the checkmark column's content (the glyph, or `null` while unchecked); the\n   * column renders in both states, marked `data-menu-checkmark`. `undefined` for other items,\n   * which render a hidden placeholder instead.\n   */\n  checkmark?: React.ReactNode | null;\n  /** The icon slot (a falsy icon or a list of nothing is no icon). */\n  icon?: Slot<'span'>;\n  /** The label (typeahead reads a non-string label through its `data-menu-label` element). */\n  label: React.ReactNode;\n  /** The shortcut text (rendered with `dir=\"auto\"`). */\n  shortcut?: string;\n  /** Content at the row's end: the submenu chevron or a switch. */\n  end?: React.ReactNode;\n  /**\n   * Whether a non-string label is marked `data-menu-label` for typeahead. Pass `false` when the\n   * item carries its own `data-roving-text`, which the label's text must not replace.\n   * @default true\n   */\n  markLabel?: boolean;\n  /**\n   * Stable classes of the row's parts, written literally by each item kind (the check column,\n   * the icon box, the label and the shortcut).\n   */\n  partClassNames?: MenuItemRowPartClassNames;\n}\n\n/** Internal: the stable classes of an item row's parts (see `MenuItemRowProps.partClassNames`). */\nexport interface MenuItemRowPartClassNames {\n  checkmark?: string;\n  icon?: string;\n  content?: string;\n  shortcut?: string;\n}\n\n/**\n * The placeholder of the checkmark or the icon column: hidden, and shown as soon as any item of\n * the same menu list (the `group/menu` element) renders that column, so every label starts at the\n * same place. Decorative (`aria-hidden`).\n */\nfunction renderColumnSpace(column: 'checkmark' | 'icon'): React.ReactElement {\n  return column === 'checkmark' ? (\n    <span\n      aria-hidden=\"true\"\n      data-menu-column-space=\"checkmark\"\n      className=\"hidden w-4 shrink-0 group-has-[[data-menu-checkmark]]/menu:inline-flex\"\n    />\n  ) : (\n    <span\n      aria-hidden=\"true\"\n      data-menu-column-space=\"icon\"\n      className=\"hidden h-5 w-5 shrink-0 group-has-[[data-menu-icon]]/menu:inline-flex\"\n    />\n  );\n}\n\n/**\n * Internal: one menu item row, in DOM order (RTL mirrors it): the checkmark column, the icon\n * column, the label, the shortcut and the end content. A row without a checkmark or an icon\n * renders the column's placeholder instead; a row whose label renders nothing (the icon-only\n * submenu half of a split group) renders no placeholders.\n */\nexport function MenuItemRow({\n  checkmark,\n  icon,\n  label,\n  shortcut,\n  end,\n  markLabel = true,\n  partClassNames,\n}: MenuItemRowProps): React.ReactElement {\n  // The check does not consume a one-shot iterable label: it is rendered materialised.\n  const hasLabel = slotRendersContent(label);\n  // A falsy icon (`icon={name && <Icon />}` with `name` '' or a count of 0) is no icon, as in Nav,\n  // Tree and Avatar, and so is a collection whose items render nothing: no empty 20px box before\n  // the label. The check does not consume a generator: renderSlot still renders its items.\n  const iconNode =\n    icon && slotRendersContent(icon)\n      ? renderSlot(\n          icon,\n          'span',\n          cn(partClassNames?.icon, 'flex h-5 w-5 shrink-0 items-center justify-center'),\n          { 'aria-hidden': true, 'data-menu-icon': '' },\n        )\n      : null;\n\n  return (\n    <>\n      {checkmark !== undefined ? (\n        <span\n          aria-hidden=\"true\"\n          data-menu-checkmark=\"\"\n          className={cn(\n            partClassNames?.checkmark,\n            'inline-flex w-4 shrink-0 items-center justify-center',\n          )}\n        >\n          {checkmark}\n        </span>\n      ) : (\n        hasLabel && renderColumnSpace('checkmark')\n      )}\n      {iconNode ?? (hasLabel && renderColumnSpace('icon'))}\n      <span\n        className={cn(partClassNames?.content, 'flex-1')}\n        data-menu-label={markLabel && hasLabel && typeof label !== 'string' ? '' : undefined}\n      >\n        {materialiseSlotContent(label)}\n      </span>\n      {/* The shortcut takes its direction from its own text (`dir=\"auto\"` also isolates it): in an\n          RTL menu, \"Ctrl+,\" would otherwise be reordered to \",+Ctrl\". */}\n      {shortcut && (\n        <span\n          dir=\"auto\"\n          className={cn(partClassNames?.shortcut, 'ms-4 text-caption-1 text-muted-foreground')}\n        >\n          {shortcut}\n        </span>\n      )}\n      {end}\n    </>\n  );\n}\nMenuItemRow.displayName = 'MenuItemRow';\n\n/** Internal: the two column placeholders alone, for a row that is not an item (a group header). */\nexport function MenuColumnSpacers(): React.ReactElement {\n  return (\n    <>\n      {renderColumnSpace('checkmark')}\n      {renderColumnSpace('icon')}\n    </>\n  );\n}\nMenuColumnSpacers.displayName = 'MenuColumnSpacers';\n\n// ---------------------------------------------------------------------------\n// Item activation\n// ---------------------------------------------------------------------------\n\n/** Internal: the activation of every menu item kind. */\nexport interface MenuItemActivationOptions {\n  disabled: boolean;\n  /**\n   * The item's own `persistOnClick`; `undefined` falls back to the Menu's `persistOnItemClick`.\n   * A link item passes `false` (a link always closes).\n   */\n  persistOnClick: boolean | undefined;\n  /** The consumer's handlers, composed consumer first (C-COMPOSE). */\n  onClick?: React.MouseEventHandler<HTMLElement>;\n  onKeyDown?: React.KeyboardEventHandler<HTMLElement>;\n  /**\n   * Runs on an own, enabled click after the consumer's `onClick`, unless it prevented the default.\n   * Its own `preventDefault()` keeps the menu open.\n   */\n  onActivate?: (event: React.MouseEvent<HTMLElement>) => void;\n  /** Space activates and keeps the menu open (checkbox, radio and switch items). */\n  keepOpenOnSpace?: boolean;\n  /** Enter is left to the element's native activation (links); Space still clicks. */\n  nativeEnter?: boolean;\n  /** The item opens a submenu: activation never closes its menu. */\n  hasSubmenu?: boolean;\n}\n\n/**\n * Internal: the click and key handlers of a menu item.\n *\n * - Events from a portal opened inside the item (a Popover, a Dialog) reach the consumer's\n *   handlers, as React bubbles them, but never activate the item or close the menu.\n * - A disabled item calls no `onClick` and prevents its own click; its Enter and Space are still\n *   consumed.\n * - Enter and Space are consumed (no page scroll) and click the item; with Ctrl, Alt or Meta they\n *   are left to the page. A Space that continues a typeahead search is skipped (the roving\n *   capture handler prevented it). With `nativeEnter`, Enter is left to the element.\n * - After the consumer's `onClick` and `onActivate`, the item closes its menu through the list's\n *   `closeFromItem`, unless the click was not its own, its default was prevented, `hasSubmenu` is\n *   set, `keepOpenOnSpace` is set and Space caused the click, or\n *   `persistOnClick ?? menu.persistOnItemClick` is `true`.\n */\nexport function useMenuItemActivation({\n  disabled,\n  persistOnClick,\n  onClick,\n  onKeyDown,\n  onActivate,\n  keepOpenOnSpace = false,\n  nativeEnter = false,\n  hasSubmenu = false,\n}: MenuItemActivationOptions): {\n  onClick: React.MouseEventHandler<HTMLElement>;\n  onKeyDown: React.KeyboardEventHandler<HTMLElement>;\n} {\n  const list = useMenuListContext();\n  // Set while the key handler's click runs, so the click knows that Space caused it.\n  const clickFromSpaceRef = React.useRef(false);\n\n  const handleClick = (event: React.MouseEvent<HTMLElement>) => {\n    // A click inside a portal opened from the item reaches the consumer's onClick (React bubbles\n    // it), but is not a click on the item: it never activates the item or closes the menu. A\n    // disabled item calls no onClick, as a disabled button; a portal's click keeps its default.\n    const own = isOwnEvent(event);\n    if (disabled) {\n      if (own) event.preventDefault();\n      return;\n    }\n    onClick?.(event);\n    if (!own || event.defaultPrevented) return;\n    onActivate?.(event);\n    if (event.defaultPrevented || hasSubmenu) return;\n    if (keepOpenOnSpace && clickFromSpaceRef.current) return;\n    if (persistOnClick ?? list?.menu.persistOnItemClick ?? false) return;\n    list?.closeFromItem();\n  };\n\n  const handleKeyDown = (event: React.KeyboardEvent<HTMLElement>) => {\n    // C-COMPOSE: the consumer's onKeyDown runs first; preventDefault() skips the built-in keys.\n    onKeyDown?.(event);\n    if (event.defaultPrevented) return;\n    // Enter and Space typed in a portal opened from the item belong to that portal.\n    if (!isOwnEvent(event)) return;\n    if (event.key !== 'Enter' && event.key !== ' ') return;\n    // A link follows itself on Enter (Shift, Ctrl and Meta keep opening a new window or tab).\n    if (event.key === 'Enter' && nativeEnter) return;\n    // With Ctrl, Alt or Meta (Ctrl+Alt+Space included) the key is a shortcut, left to the page.\n    if (event.ctrlKey || event.altKey || event.metaKey) return;\n    // Menu items consume Enter/Space (no page scroll), whether or not they can be activated.\n    event.preventDefault();\n    if (disabled) return;\n    clickFromSpaceRef.current = event.key === ' ';\n    try {\n      event.currentTarget.click();\n    } finally {\n      clickFromSpaceRef.current = false;\n    }\n  };\n\n  return { onClick: handleClick, onKeyDown: handleKeyDown };\n}\n\n/**\n * Internal (C-DEV): warns once, from an effect, when an item of any kind renders in a popup menu\n * outside `Menu.Popover`. A Menu with `open`, `defaultOpen` or `onOpenChange` is a popup menu that\n * renders no element of its own, so such an item has no `role=\"menu\"` parent.\n *\n * @param componentName The item's name in the message, e.g. `'Menu.ItemCheckbox'`.\n */\nexport function useMenuItemPlacementWarning(componentName: string): void {\n  const list = useMenuListContext();\n  const menu = useOptionalMenuContext();\n  const outsidePopover = menu !== null && menu.popup && list === null;\n  React.useEffect(() => {\n    if (!outsidePopover) return;\n    warnOnce(\n      'Menu:item-outside-popover',\n      `${componentName}: rendered in a popup menu outside Menu.Popover, so it has no \\`role=\"menu\"\\` parent. A Menu with \\`open\\`, \\`defaultOpen\\` or \\`onOpenChange\\` is a popup menu that renders no element of its own: put the items in Menu.Popover, or leave these props out for a static menu.`,\n    );\n  }, [outsidePopover, componentName]);\n}\n\n// ---------------------------------------------------------------------------\n// Menu.Item / Menu.Divider\n// ---------------------------------------------------------------------------\n\n/**\n * An action in a menu (`role=\"menuitem\"`). Enter and Space activate it (a Space typed within 500 ms\n * of a typeahead character continues the search instead; with Ctrl, Alt or Meta they are left to\n * the page); in a popup menu, activation closes the menu and returns focus to the trigger unless\n * `persistOnClick` (or the Menu's `persistOnItemClick`) keeps it open or the consumer's `onClick`\n * calls `preventDefault()`. Disabled items are `aria-disabled`, skipped by keyboard navigation and\n * never activated: their `onClick` is not called. A consumer `aria-disabled` without `disabled`\n * only changes the look and keyboard navigation: activation still runs `onClick` (guard it\n * yourself), as on Button. The item's tab index is managed by the menu. Typeahead matches the\n * label (`children`), not the icon or the shortcut; a `data-roving-text` you pass replaces the\n * label's text. Clicks and keys from a portal opened inside the item (a Popover, a Dialog) still\n * reach your `onClick` (on an enabled item) and `onKeyDown`, as React bubbles them, but never\n * activate the item or close the menu.\n *\n * The labels of a menu line up: when any item of the menu shows an icon (or a check), every item\n * keeps an empty column of that width before its label.\n *\n * As the child of a submenu's `Menu.Trigger` (a `Menu` nested in a menu list), the item is the\n * submenu's trigger: it shows a chevron at its end (mirrored in RTL) and `data-has-submenu`, and\n * activating it never closes its own menu. ArrowRight (ArrowLeft in RTL), Enter, Space and a click\n * open the submenu and move focus to its first item; resting the mouse on the item opens it\n * without moving focus.\n *\n * Also exported as `MenuItem` (import the flat name from React Server Components).\n */\nexport const MenuItem = ({\n  icon,\n  shortcut,\n  disabled = false,\n  persistOnClick,\n  onClick,\n  onKeyDown,\n  children,\n  className,\n  ref,\n  ...rest\n}: MenuItemProps) => {\n  const isSubmenuTrigger = React.useContext(MenuSubmenuTriggerContext);\n  useMenuItemPlacementWarning('Menu.Item');\n\n  // Typeahead text: a string label directly; any other label through its marked element.\n  const stringLabel = typeof children === 'string' ? children : undefined;\n  const ownRovingText = (rest as Record<string, unknown>)['data-roving-text'] !== undefined;\n\n  // A submenu trigger item opens its submenu (the trigger's composed onClick): activating it never\n  // closes its own menu.\n  const activation = useMenuItemActivation({\n    disabled,\n    persistOnClick,\n    onClick,\n    onKeyDown,\n    hasSubmenu: isSubmenuTrigger,\n  });\n\n  return (\n    <div\n      role=\"menuitem\"\n      data-roving-text={stringLabel}\n      {...rest}\n      ref={ref}\n      aria-disabled={disabled ? true : rest['aria-disabled']}\n      data-disabled={disabled ? '' : undefined}\n      data-has-submenu={isSubmenuTrigger ? '' : undefined}\n      onClick={activation.onClick}\n      onKeyDown={activation.onKeyDown}\n      className={cn(menuItemClassNames.root, menuItemClasses, className)}\n    >\n      <MenuItemRow\n        icon={icon}\n        label={children}\n        shortcut={shortcut}\n        markLabel={!ownRovingText}\n        partClassNames={{\n          icon: menuItemClassNames.icon,\n          content: menuItemClassNames.content,\n          shortcut: menuItemClassNames.shortcut,\n        }}\n        end={\n          isSubmenuTrigger ? (\n            <ChevronRightIcon\n              size={16}\n              className={cn(\n                menuItemClassNames.submenuIndicator,\n                'ms-auto shrink-0 wave-rtl:-scale-x-100',\n              )}\n            />\n          ) : undefined\n        }\n      />\n    </div>\n  );\n};\nMenuItem.displayName = 'MenuItem';\n\n/**\n * A separator between groups of menu items (`role=\"separator\"`).\n *\n * Also exported as `MenuDivider` (import the flat name from React Server Components).\n */\nexport const MenuDivider = ({ className, ref, ...rest }: MenuDividerProps) => {\n  return (\n    <div\n      role=\"separator\"\n      {...rest}\n      ref={ref}\n      className={cn(menuDividerClassNames.root, 'my-1 border-t border-border', className)}\n    />\n  );\n};\nMenuDivider.displayName = 'MenuDivider';\n"],"mappings":"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"}

package/dist/components/navigation/Menu.items.mjs

@@ -2,126 +2,132 @@
 import { cn as e } from "../../lib/cn.mjs";
 import { warnOnce as t } from "../../lib/dev.mjs";
 import { materialiseSlotContent as n, renderSlot as r, slotRendersContent as i } from "../../lib/slot.mjs";
-import { ChevronRightIcon as a } from "../../lib/icons.mjs";
-import { isOwnEvent as o } from "../../lib/events.mjs";
-import { MenuSubmenuTriggerContext as s, useMenuListContext as c, useOptionalMenuContext as l } from "./Menu.context.mjs";
-import { menuItemClasses as u } from "./Menu.shared.mjs";
-import * as d from "react";
-import { Fragment as f, jsx as p, jsxs as m } from "react/jsx-runtime";
+import { menuDividerClassNames as a, menuItemClassNames as o } from "../../lib/classNames.mjs";
+import { ChevronRightIcon as s } from "../../lib/icons.mjs";
+import { isOwnEvent as c } from "../../lib/events.mjs";
+import { MenuSubmenuTriggerContext as l, useMenuListContext as u, useOptionalMenuContext as d } from "./Menu.context.mjs";
+import { menuItemClasses as f } from "./Menu.shared.mjs";
+import * as p from "react";
+import { Fragment as m, jsx as h, jsxs as g } from "react/jsx-runtime";
 //#region src/components/navigation/Menu.items.tsx
-function h(e) {
-	return e === "checkmark" ? /* @__PURE__ */ p("span", {
+function _(e) {
+	return e === "checkmark" ? /* @__PURE__ */ h("span", {
 		"aria-hidden": "true",
 		"data-menu-column-space": "checkmark",
 		className: "hidden w-4 shrink-0 group-has-[[data-menu-checkmark]]/menu:inline-flex"
-	}) : /* @__PURE__ */ p("span", {
+	}) : /* @__PURE__ */ h("span", {
 		"aria-hidden": "true",
 		"data-menu-column-space": "icon",
 		className: "hidden h-5 w-5 shrink-0 group-has-[[data-menu-icon]]/menu:inline-flex"
 	});
 }
-function g({ checkmark: e, icon: t, label: a, shortcut: o, end: s, markLabel: c = !0 }) {
-	let l = i(a), u = t && i(t) ? r(t, "span", "flex h-5 w-5 shrink-0 items-center justify-center", {
+function v({ checkmark: t, icon: a, label: o, shortcut: s, end: c, markLabel: l = !0, partClassNames: u }) {
+	let d = i(o), f = a && i(a) ? r(a, "span", e(u?.icon, "flex h-5 w-5 shrink-0 items-center justify-center"), {
 		"aria-hidden": !0,
 		"data-menu-icon": ""
 	}) : null;
-	return /* @__PURE__ */ m(f, { children: [
-		e === void 0 ? l && h("checkmark") : /* @__PURE__ */ p("span", {
+	return /* @__PURE__ */ g(m, { children: [
+		t === void 0 ? d && _("checkmark") : /* @__PURE__ */ h("span", {
 			"aria-hidden": "true",
 			"data-menu-checkmark": "",
-			className: "inline-flex w-4 shrink-0 items-center justify-center",
-			children: e
+			className: e(u?.checkmark, "inline-flex w-4 shrink-0 items-center justify-center"),
+			children: t
 		}),
-		u ?? (l && h("icon")),
-		/* @__PURE__ */ p("span", {
-			className: "flex-1",
-			"data-menu-label": c && l && typeof a != "string" ? "" : void 0,
-			children: n(a)
+		f ?? (d && _("icon")),
+		/* @__PURE__ */ h("span", {
+			className: e(u?.content, "flex-1"),
+			"data-menu-label": l && d && typeof o != "string" ? "" : void 0,
+			children: n(o)
 		}),
-		o && /* @__PURE__ */ p("span", {
+		s && /* @__PURE__ */ h("span", {
 			dir: "auto",
-			className: "ms-4 text-caption-1 text-muted-foreground",
-			children: o
+			className: e(u?.shortcut, "ms-4 text-caption-1 text-muted-foreground"),
+			children: s
 		}),
-		s
+		c
 	] });
 }
-g.displayName = "MenuItemRow";
-function _() {
-	return /* @__PURE__ */ m(f, { children: [h("checkmark"), h("icon")] });
+v.displayName = "MenuItemRow";
+function y() {
+	return /* @__PURE__ */ g(m, { children: [_("checkmark"), _("icon")] });
 }
-_.displayName = "MenuColumnSpacers";
-function v({ disabled: e, persistOnClick: t, onClick: n, onKeyDown: r, onActivate: i, keepOpenOnSpace: a = !1, nativeEnter: s = !1, hasSubmenu: l = !1 }) {
-	let u = c(), f = d.useRef(!1);
+y.displayName = "MenuColumnSpacers";
+function b({ disabled: e, persistOnClick: t, onClick: n, onKeyDown: r, onActivate: i, keepOpenOnSpace: a = !1, nativeEnter: o = !1, hasSubmenu: s = !1 }) {
+	let l = u(), d = p.useRef(!1);
 	return {
 		onClick: (r) => {
-			let s = o(r);
+			let o = c(r);
 			if (e) {
-				s && r.preventDefault();
+				o && r.preventDefault();
 				return;
 			}
-			n?.(r), s && !r.defaultPrevented && (i?.(r), !(r.defaultPrevented || l) && (a && f.current || (t ?? u?.menu.persistOnItemClick ?? !1) || u?.closeFromItem()));
+			n?.(r), o && !r.defaultPrevented && (i?.(r), !(r.defaultPrevented || s) && (a && d.current || (t ?? l?.menu.persistOnItemClick ?? !1) || l?.closeFromItem()));
 		},
 		onKeyDown: (t) => {
-			if (r?.(t), !t.defaultPrevented && o(t) && (t.key === "Enter" || t.key === " ") && !(t.key === "Enter" && s) && !(t.ctrlKey || t.altKey || t.metaKey) && (t.preventDefault(), !e)) {
-				f.current = t.key === " ";
+			if (r?.(t), !t.defaultPrevented && c(t) && (t.key === "Enter" || t.key === " ") && !(t.key === "Enter" && o) && !(t.ctrlKey || t.altKey || t.metaKey) && (t.preventDefault(), !e)) {
+				d.current = t.key === " ";
 				try {
 					t.currentTarget.click();
 				} finally {
-					f.current = !1;
+					d.current = !1;
 				}
 			}
 		}
 	};
 }
-function y(e) {
-	let n = c(), r = l(), i = r !== null && r.popup && n === null;
-	d.useEffect(() => {
+function x(e) {
+	let n = u(), r = d(), i = r !== null && r.popup && n === null;
+	p.useEffect(() => {
 		i && t("Menu:item-outside-popover", `${e}: rendered in a popup menu outside Menu.Popover, so it has no \`role="menu"\` parent. A Menu with \`open\`, \`defaultOpen\` or \`onOpenChange\` is a popup menu that renders no element of its own: put the items in Menu.Popover, or leave these props out for a static menu.`);
 	}, [i, e]);
 }
-var b = ({ icon: t, shortcut: n, disabled: r = !1, persistOnClick: i, onClick: o, onKeyDown: c, children: l, className: f, ref: m, ...h }) => {
-	let _ = d.useContext(s);
-	y("Menu.Item");
-	let b = typeof l == "string" ? l : void 0, x = h["data-roving-text"] !== void 0, S = v({
+var S = ({ icon: t, shortcut: n, disabled: r = !1, persistOnClick: i, onClick: a, onKeyDown: c, children: u, className: d, ref: m, ...g }) => {
+	let _ = p.useContext(l);
+	x("Menu.Item");
+	let y = typeof u == "string" ? u : void 0, S = g["data-roving-text"] !== void 0, C = b({
 		disabled: r,
 		persistOnClick: i,
-		onClick: o,
+		onClick: a,
 		onKeyDown: c,
 		hasSubmenu: _
 	});
-	return /* @__PURE__ */ p("div", {
+	return /* @__PURE__ */ h("div", {
 		role: "menuitem",
-		"data-roving-text": b,
-		...h,
+		"data-roving-text": y,
+		...g,
 		ref: m,
-		"aria-disabled": r ? !0 : h["aria-disabled"],
+		"aria-disabled": r ? !0 : g["aria-disabled"],
 		"data-disabled": r ? "" : void 0,
 		"data-has-submenu": _ ? "" : void 0,
-		onClick: S.onClick,
-		onKeyDown: S.onKeyDown,
-		className: e(u, f),
-		children: /* @__PURE__ */ p(g, {
+		onClick: C.onClick,
+		onKeyDown: C.onKeyDown,
+		className: e(o.root, f, d),
+		children: /* @__PURE__ */ h(v, {
 			icon: t,
-			label: l,
+			label: u,
 			shortcut: n,
-			markLabel: !x,
-			end: _ ? /* @__PURE__ */ p(a, {
+			markLabel: !S,
+			partClassNames: {
+				icon: o.icon,
+				content: o.content,
+				shortcut: o.shortcut
+			},
+			end: _ ? /* @__PURE__ */ h(s, {
 				size: 16,
-				className: "ms-auto shrink-0 wave-rtl:-scale-x-100"
+				className: e(o.submenuIndicator, "ms-auto shrink-0 wave-rtl:-scale-x-100")
 			}) : void 0
 		})
 	});
 };
-b.displayName = "MenuItem";
-var x = ({ className: t, ref: n, ...r }) => /* @__PURE__ */ p("div", {
+S.displayName = "MenuItem";
+var C = ({ className: t, ref: n, ...r }) => /* @__PURE__ */ h("div", {
 	role: "separator",
 	...r,
 	ref: n,
-	className: e("my-1 border-t border-border", t)
+	className: e(a.root, "my-1 border-t border-border", t)
 });
-x.displayName = "MenuDivider";
+C.displayName = "MenuDivider";
 //#endregion
-export { _ as MenuColumnSpacers, x as MenuDivider, b as MenuItem, g as MenuItemRow, v as useMenuItemActivation, y as useMenuItemPlacementWarning };
+export { y as MenuColumnSpacers, C as MenuDivider, S as MenuItem, v as MenuItemRow, b as useMenuItemActivation, x as useMenuItemPlacementWarning };
 
 //# sourceMappingURL=Menu.items.mjs.map

package/dist/components/navigation/Menu.items.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Menu.items.mjs","names":["_Fragment","React","renderColumnSpace","column","MenuItemRow","hasLabel","slotRendersContent","label","iconNode","icon","renderSlot","Fragment","checkmark","markLabel","materialiseSlotContent","shortcut","end","MenuColumnSpacers","useMenuItemActivation","list","useMenuListContext","clickFromSpaceRef","own","isOwnEvent","event","disabled","onClick","onActivate","hasSubmenu","keepOpenOnSpace","persistOnClick","onKeyDown","nativeEnter","useMenuItemPlacementWarning","menu","useOptionalMenuContext","outsidePopover","warnOnce","componentName","MenuItem","rest","isSubmenuTrigger","MenuSubmenuTriggerContext","stringLabel","children","ownRovingText","activation","cn","menuItemClasses","className","ChevronRightIcon","MenuDivider"],"sources":["../../../src/components/navigation/Menu.items.tsx"],"sourcesContent":["import * as React from 'react';\nimport { cn } from '../../lib/cn';\nimport type { Slot } from '../../lib/types';\nimport { materialiseSlotContent, renderSlot, slotRendersContent } from '../../lib/slot';\nimport { warnOnce } from '../../lib/dev';\nimport { isOwnEvent } from '../../lib/events';\nimport { ChevronRightIcon } from '../../lib/icons';\nimport {\n  MenuSubmenuTriggerContext,\n  useMenuListContext,\n  useOptionalMenuContext,\n} from './Menu.context';\nimport { menuItemClasses } from './Menu.shared';\n\n/** Properties for the MenuItem sub-component. */\nexport interface MenuItemProps extends React.HTMLAttributes<HTMLDivElement> {\n  /**\n   * Slot for an icon displayed before the item text. Rendered with `aria-hidden=\"true\"`. A falsy\n   * icon (`''`, `0`) or a list of nothing renders no icon box.\n   */\n  icon?: Slot<'span'>;\n  /**\n   * Keyboard shortcut text displayed at the end of the item. Its direction comes from its own text\n   * (`dir=\"auto\"`), so \"Ctrl+,\" keeps its order in an RTL menu.\n   */\n  shortcut?: string;\n  /** Whether the menu item is disabled (`aria-disabled`; skipped by keyboard navigation). */\n  disabled?: boolean;\n  /**\n   * Keep a popup menu open after this item is activated. `true` or `false` here wins over the\n   * Menu's `persistOnItemClick`.\n   * @default the Menu's `persistOnItemClick` (`false`)\n   */\n  persistOnClick?: boolean;\n  /**\n   * Label content of the menu item. Leave it out only for the submenu half of a\n   * `Menu.SplitGroup`, which then needs `aria-label`.\n   */\n  children?: React.ReactNode;\n  /**\n   * Ref to the item element (`role=\"menuitem\"`; `menuitemcheckbox` or `menuitemradio` for the\n   * checkable items).\n   */\n  ref?: React.Ref<HTMLDivElement>;\n}\n\n/** Properties for the MenuDivider sub-component. */\nexport interface MenuDividerProps extends React.HTMLAttributes<HTMLDivElement> {\n  /** Ref to the `role=\"separator\"` element. */\n  ref?: React.Ref<HTMLDivElement>;\n}\n\n// ---------------------------------------------------------------------------\n// The item row and the column alignment\n// ---------------------------------------------------------------------------\n\n/** Internal: the content of one menu item row, rendered inside the item element. */\nexport interface MenuItemRowProps {\n  /**\n   * Checkable items: the checkmark column's content (the glyph, or `null` while unchecked); the\n   * column renders in both states, marked `data-menu-checkmark`. `undefined` for other items,\n   * which render a hidden placeholder instead.\n   */\n  checkmark?: React.ReactNode | null;\n  /** The icon slot (a falsy icon or a list of nothing is no icon). */\n  icon?: Slot<'span'>;\n  /** The label (typeahead reads a non-string label through its `data-menu-label` element). */\n  label: React.ReactNode;\n  /** The shortcut text (rendered with `dir=\"auto\"`). */\n  shortcut?: string;\n  /** Content at the row's end: the submenu chevron or a switch. */\n  end?: React.ReactNode;\n  /**\n   * Whether a non-string label is marked `data-menu-label` for typeahead. Pass `false` when the\n   * item carries its own `data-roving-text`, which the label's text must not replace.\n   * @default true\n   */\n  markLabel?: boolean;\n}\n\n/**\n * The placeholder of the checkmark or the icon column: hidden, and shown as soon as any item of\n * the same menu list (the `group/menu` element) renders that column, so every label starts at the\n * same place. Decorative (`aria-hidden`).\n */\nfunction renderColumnSpace(column: 'checkmark' | 'icon'): React.ReactElement {\n  return column === 'checkmark' ? (\n    <span\n      aria-hidden=\"true\"\n      data-menu-column-space=\"checkmark\"\n      className=\"hidden w-4 shrink-0 group-has-[[data-menu-checkmark]]/menu:inline-flex\"\n    />\n  ) : (\n    <span\n      aria-hidden=\"true\"\n      data-menu-column-space=\"icon\"\n      className=\"hidden h-5 w-5 shrink-0 group-has-[[data-menu-icon]]/menu:inline-flex\"\n    />\n  );\n}\n\n/**\n * Internal: one menu item row, in DOM order (RTL mirrors it): the checkmark column, the icon\n * column, the label, the shortcut and the end content. A row without a checkmark or an icon\n * renders the column's placeholder instead; a row whose label renders nothing (the icon-only\n * submenu half of a split group) renders no placeholders.\n */\nexport function MenuItemRow({\n  checkmark,\n  icon,\n  label,\n  shortcut,\n  end,\n  markLabel = true,\n}: MenuItemRowProps): React.ReactElement {\n  // The check does not consume a one-shot iterable label: it is rendered materialised.\n  const hasLabel = slotRendersContent(label);\n  // A falsy icon (`icon={name && <Icon />}` with `name` '' or a count of 0) is no icon, as in Nav,\n  // Tree and Avatar, and so is a collection whose items render nothing: no empty 20px box before\n  // the label. The check does not consume a generator: renderSlot still renders its items.\n  const iconNode =\n    icon && slotRendersContent(icon)\n      ? renderSlot(icon, 'span', 'flex h-5 w-5 shrink-0 items-center justify-center', {\n          'aria-hidden': true,\n          'data-menu-icon': '',\n        })\n      : null;\n\n  return (\n    <>\n      {checkmark !== undefined ? (\n        <span\n          aria-hidden=\"true\"\n          data-menu-checkmark=\"\"\n          className=\"inline-flex w-4 shrink-0 items-center justify-center\"\n        >\n          {checkmark}\n        </span>\n      ) : (\n        hasLabel && renderColumnSpace('checkmark')\n      )}\n      {iconNode ?? (hasLabel && renderColumnSpace('icon'))}\n      <span\n        className=\"flex-1\"\n        data-menu-label={markLabel && hasLabel && typeof label !== 'string' ? '' : undefined}\n      >\n        {materialiseSlotContent(label)}\n      </span>\n      {/* The shortcut takes its direction from its own text (`dir=\"auto\"` also isolates it): in an\n          RTL menu, \"Ctrl+,\" would otherwise be reordered to \",+Ctrl\". */}\n      {shortcut && (\n        <span dir=\"auto\" className=\"ms-4 text-caption-1 text-muted-foreground\">\n          {shortcut}\n        </span>\n      )}\n      {end}\n    </>\n  );\n}\nMenuItemRow.displayName = 'MenuItemRow';\n\n/** Internal: the two column placeholders alone, for a row that is not an item (a group header). */\nexport function MenuColumnSpacers(): React.ReactElement {\n  return (\n    <>\n      {renderColumnSpace('checkmark')}\n      {renderColumnSpace('icon')}\n    </>\n  );\n}\nMenuColumnSpacers.displayName = 'MenuColumnSpacers';\n\n// ---------------------------------------------------------------------------\n// Item activation\n// ---------------------------------------------------------------------------\n\n/** Internal: the activation of every menu item kind. */\nexport interface MenuItemActivationOptions {\n  disabled: boolean;\n  /**\n   * The item's own `persistOnClick`; `undefined` falls back to the Menu's `persistOnItemClick`.\n   * A link item passes `false` (a link always closes).\n   */\n  persistOnClick: boolean | undefined;\n  /** The consumer's handlers, composed consumer first (C-COMPOSE). */\n  onClick?: React.MouseEventHandler<HTMLElement>;\n  onKeyDown?: React.KeyboardEventHandler<HTMLElement>;\n  /**\n   * Runs on an own, enabled click after the consumer's `onClick`, unless it prevented the default.\n   * Its own `preventDefault()` keeps the menu open.\n   */\n  onActivate?: (event: React.MouseEvent<HTMLElement>) => void;\n  /** Space activates and keeps the menu open (checkbox, radio and switch items). */\n  keepOpenOnSpace?: boolean;\n  /** Enter is left to the element's native activation (links); Space still clicks. */\n  nativeEnter?: boolean;\n  /** The item opens a submenu: activation never closes its menu. */\n  hasSubmenu?: boolean;\n}\n\n/**\n * Internal: the click and key handlers of a menu item.\n *\n * - Events from a portal opened inside the item (a Popover, a Dialog) reach the consumer's\n *   handlers, as React bubbles them, but never activate the item or close the menu.\n * - A disabled item calls no `onClick` and prevents its own click; its Enter and Space are still\n *   consumed.\n * - Enter and Space are consumed (no page scroll) and click the item; with Ctrl, Alt or Meta they\n *   are left to the page. A Space that continues a typeahead search is skipped (the roving\n *   capture handler prevented it). With `nativeEnter`, Enter is left to the element.\n * - After the consumer's `onClick` and `onActivate`, the item closes its menu through the list's\n *   `closeFromItem`, unless the click was not its own, its default was prevented, `hasSubmenu` is\n *   set, `keepOpenOnSpace` is set and Space caused the click, or\n *   `persistOnClick ?? menu.persistOnItemClick` is `true`.\n */\nexport function useMenuItemActivation({\n  disabled,\n  persistOnClick,\n  onClick,\n  onKeyDown,\n  onActivate,\n  keepOpenOnSpace = false,\n  nativeEnter = false,\n  hasSubmenu = false,\n}: MenuItemActivationOptions): {\n  onClick: React.MouseEventHandler<HTMLElement>;\n  onKeyDown: React.KeyboardEventHandler<HTMLElement>;\n} {\n  const list = useMenuListContext();\n  // Set while the key handler's click runs, so the click knows that Space caused it.\n  const clickFromSpaceRef = React.useRef(false);\n\n  const handleClick = (event: React.MouseEvent<HTMLElement>) => {\n    // A click inside a portal opened from the item reaches the consumer's onClick (React bubbles\n    // it), but is not a click on the item: it never activates the item or closes the menu. A\n    // disabled item calls no onClick, as a disabled button; a portal's click keeps its default.\n    const own = isOwnEvent(event);\n    if (disabled) {\n      if (own) event.preventDefault();\n      return;\n    }\n    onClick?.(event);\n    if (!own || event.defaultPrevented) return;\n    onActivate?.(event);\n    if (event.defaultPrevented || hasSubmenu) return;\n    if (keepOpenOnSpace && clickFromSpaceRef.current) return;\n    if (persistOnClick ?? list?.menu.persistOnItemClick ?? false) return;\n    list?.closeFromItem();\n  };\n\n  const handleKeyDown = (event: React.KeyboardEvent<HTMLElement>) => {\n    // C-COMPOSE: the consumer's onKeyDown runs first; preventDefault() skips the built-in keys.\n    onKeyDown?.(event);\n    if (event.defaultPrevented) return;\n    // Enter and Space typed in a portal opened from the item belong to that portal.\n    if (!isOwnEvent(event)) return;\n    if (event.key !== 'Enter' && event.key !== ' ') return;\n    // A link follows itself on Enter (Shift, Ctrl and Meta keep opening a new window or tab).\n    if (event.key === 'Enter' && nativeEnter) return;\n    // With Ctrl, Alt or Meta (Ctrl+Alt+Space included) the key is a shortcut, left to the page.\n    if (event.ctrlKey || event.altKey || event.metaKey) return;\n    // Menu items consume Enter/Space (no page scroll), whether or not they can be activated.\n    event.preventDefault();\n    if (disabled) return;\n    clickFromSpaceRef.current = event.key === ' ';\n    try {\n      event.currentTarget.click();\n    } finally {\n      clickFromSpaceRef.current = false;\n    }\n  };\n\n  return { onClick: handleClick, onKeyDown: handleKeyDown };\n}\n\n/**\n * Internal (C-DEV): warns once, from an effect, when an item of any kind renders in a popup menu\n * outside `Menu.Popover`. A Menu with `open`, `defaultOpen` or `onOpenChange` is a popup menu that\n * renders no element of its own, so such an item has no `role=\"menu\"` parent.\n *\n * @param componentName The item's name in the message, e.g. `'Menu.ItemCheckbox'`.\n */\nexport function useMenuItemPlacementWarning(componentName: string): void {\n  const list = useMenuListContext();\n  const menu = useOptionalMenuContext();\n  const outsidePopover = menu !== null && menu.popup && list === null;\n  React.useEffect(() => {\n    if (!outsidePopover) return;\n    warnOnce(\n      'Menu:item-outside-popover',\n      `${componentName}: rendered in a popup menu outside Menu.Popover, so it has no \\`role=\"menu\"\\` parent. A Menu with \\`open\\`, \\`defaultOpen\\` or \\`onOpenChange\\` is a popup menu that renders no element of its own: put the items in Menu.Popover, or leave these props out for a static menu.`,\n    );\n  }, [outsidePopover, componentName]);\n}\n\n// ---------------------------------------------------------------------------\n// Menu.Item / Menu.Divider\n// ---------------------------------------------------------------------------\n\n/**\n * An action in a menu (`role=\"menuitem\"`). Enter and Space activate it (a Space typed within 500 ms\n * of a typeahead character continues the search instead; with Ctrl, Alt or Meta they are left to\n * the page); in a popup menu, activation closes the menu and returns focus to the trigger unless\n * `persistOnClick` (or the Menu's `persistOnItemClick`) keeps it open or the consumer's `onClick`\n * calls `preventDefault()`. Disabled items are `aria-disabled`, skipped by keyboard navigation and\n * never activated: their `onClick` is not called. A consumer `aria-disabled` without `disabled`\n * only changes the look and keyboard navigation: activation still runs `onClick` (guard it\n * yourself), as on Button. The item's tab index is managed by the menu. Typeahead matches the\n * label (`children`), not the icon or the shortcut; a `data-roving-text` you pass replaces the\n * label's text. Clicks and keys from a portal opened inside the item (a Popover, a Dialog) still\n * reach your `onClick` (on an enabled item) and `onKeyDown`, as React bubbles them, but never\n * activate the item or close the menu.\n *\n * The labels of a menu line up: when any item of the menu shows an icon (or a check), every item\n * keeps an empty column of that width before its label.\n *\n * As the child of a submenu's `Menu.Trigger` (a `Menu` nested in a menu list), the item is the\n * submenu's trigger: it shows a chevron at its end (mirrored in RTL) and `data-has-submenu`, and\n * activating it never closes its own menu. ArrowRight (ArrowLeft in RTL), Enter, Space and a click\n * open the submenu and move focus to its first item; resting the mouse on the item opens it\n * without moving focus.\n *\n * Also exported as `MenuItem` (import the flat name from React Server Components).\n */\nexport const MenuItem = ({\n  icon,\n  shortcut,\n  disabled = false,\n  persistOnClick,\n  onClick,\n  onKeyDown,\n  children,\n  className,\n  ref,\n  ...rest\n}: MenuItemProps) => {\n  const isSubmenuTrigger = React.useContext(MenuSubmenuTriggerContext);\n  useMenuItemPlacementWarning('Menu.Item');\n\n  // Typeahead text: a string label directly; any other label through its marked element.\n  const stringLabel = typeof children === 'string' ? children : undefined;\n  const ownRovingText = (rest as Record<string, unknown>)['data-roving-text'] !== undefined;\n\n  // A submenu trigger item opens its submenu (the trigger's composed onClick): activating it never\n  // closes its own menu.\n  const activation = useMenuItemActivation({\n    disabled,\n    persistOnClick,\n    onClick,\n    onKeyDown,\n    hasSubmenu: isSubmenuTrigger,\n  });\n\n  return (\n    <div\n      role=\"menuitem\"\n      data-roving-text={stringLabel}\n      {...rest}\n      ref={ref}\n      aria-disabled={disabled ? true : rest['aria-disabled']}\n      data-disabled={disabled ? '' : undefined}\n      data-has-submenu={isSubmenuTrigger ? '' : undefined}\n      onClick={activation.onClick}\n      onKeyDown={activation.onKeyDown}\n      className={cn(menuItemClasses, className)}\n    >\n      <MenuItemRow\n        icon={icon}\n        label={children}\n        shortcut={shortcut}\n        markLabel={!ownRovingText}\n        end={\n          isSubmenuTrigger ? (\n            <ChevronRightIcon size={16} className=\"ms-auto shrink-0 wave-rtl:-scale-x-100\" />\n          ) : undefined\n        }\n      />\n    </div>\n  );\n};\nMenuItem.displayName = 'MenuItem';\n\n/**\n * A separator between groups of menu items (`role=\"separator\"`).\n *\n * Also exported as `MenuDivider` (import the flat name from React Server Components).\n */\nexport const MenuDivider = ({ className, ref, ...rest }: MenuDividerProps) => {\n  return (\n    <div\n      role=\"separator\"\n      {...rest}\n      ref={ref}\n      className={cn('my-1 border-t border-border', className)}\n    />\n  );\n};\nMenuDivider.displayName = 'MenuDivider';\n"],"mappings":"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"}
+{"version":3,"file":"Menu.items.mjs","names":["_Fragment","React","renderColumnSpace","column","MenuItemRow","hasLabel","slotRendersContent","label","iconNode","icon","renderSlot","cn","partClassNames","Fragment","checkmark","markLabel","materialiseSlotContent","shortcut","end","MenuColumnSpacers","useMenuItemActivation","list","useMenuListContext","clickFromSpaceRef","own","isOwnEvent","event","disabled","onClick","onActivate","hasSubmenu","keepOpenOnSpace","persistOnClick","onKeyDown","nativeEnter","useMenuItemPlacementWarning","menu","useOptionalMenuContext","outsidePopover","warnOnce","componentName","MenuItem","rest","isSubmenuTrigger","MenuSubmenuTriggerContext","stringLabel","children","ownRovingText","activation","menuItemClassNames","menuItemClasses","className","ChevronRightIcon","MenuDivider","menuDividerClassNames"],"sources":["../../../src/components/navigation/Menu.items.tsx"],"sourcesContent":["import * as React from 'react';\nimport { cn } from '../../lib/cn';\nimport { menuDividerClassNames, menuItemClassNames } from '../../lib/classNames';\nimport type { Slot } from '../../lib/types';\nimport { materialiseSlotContent, renderSlot, slotRendersContent } from '../../lib/slot';\nimport { warnOnce } from '../../lib/dev';\nimport { isOwnEvent } from '../../lib/events';\nimport { ChevronRightIcon } from '../../lib/icons';\nimport {\n  MenuSubmenuTriggerContext,\n  useMenuListContext,\n  useOptionalMenuContext,\n} from './Menu.context';\nimport { menuItemClasses } from './Menu.shared';\n\n/** Properties for the MenuItem sub-component. */\nexport interface MenuItemProps extends React.HTMLAttributes<HTMLDivElement> {\n  /**\n   * Slot for an icon displayed before the item text. Rendered with `aria-hidden=\"true\"`. A falsy\n   * icon (`''`, `0`) or a list of nothing renders no icon box.\n   */\n  icon?: Slot<'span'>;\n  /**\n   * Keyboard shortcut text displayed at the end of the item. Its direction comes from its own text\n   * (`dir=\"auto\"`), so \"Ctrl+,\" keeps its order in an RTL menu.\n   */\n  shortcut?: string;\n  /** Whether the menu item is disabled (`aria-disabled`; skipped by keyboard navigation). */\n  disabled?: boolean;\n  /**\n   * Keep a popup menu open after this item is activated. `true` or `false` here wins over the\n   * Menu's `persistOnItemClick`.\n   * @default the Menu's `persistOnItemClick` (`false`)\n   */\n  persistOnClick?: boolean;\n  /**\n   * Label content of the menu item. Leave it out only for the submenu half of a\n   * `Menu.SplitGroup`, which then needs `aria-label`.\n   */\n  children?: React.ReactNode;\n  /**\n   * Ref to the item element (`role=\"menuitem\"`; `menuitemcheckbox` or `menuitemradio` for the\n   * checkable items).\n   */\n  ref?: React.Ref<HTMLDivElement>;\n}\n\n/** Properties for the MenuDivider sub-component. */\nexport interface MenuDividerProps extends React.HTMLAttributes<HTMLDivElement> {\n  /** Ref to the `role=\"separator\"` element. */\n  ref?: React.Ref<HTMLDivElement>;\n}\n\n// ---------------------------------------------------------------------------\n// The item row and the column alignment\n// ---------------------------------------------------------------------------\n\n/** Internal: the content of one menu item row, rendered inside the item element. */\nexport interface MenuItemRowProps {\n  /**\n   * Checkable items: the checkmark column's content (the glyph, or `null` while unchecked); the\n   * column renders in both states, marked `data-menu-checkmark`. `undefined` for other items,\n   * which render a hidden placeholder instead.\n   */\n  checkmark?: React.ReactNode | null;\n  /** The icon slot (a falsy icon or a list of nothing is no icon). */\n  icon?: Slot<'span'>;\n  /** The label (typeahead reads a non-string label through its `data-menu-label` element). */\n  label: React.ReactNode;\n  /** The shortcut text (rendered with `dir=\"auto\"`). */\n  shortcut?: string;\n  /** Content at the row's end: the submenu chevron or a switch. */\n  end?: React.ReactNode;\n  /**\n   * Whether a non-string label is marked `data-menu-label` for typeahead. Pass `false` when the\n   * item carries its own `data-roving-text`, which the label's text must not replace.\n   * @default true\n   */\n  markLabel?: boolean;\n  /**\n   * Stable classes of the row's parts, written literally by each item kind (the check column,\n   * the icon box, the label and the shortcut).\n   */\n  partClassNames?: MenuItemRowPartClassNames;\n}\n\n/** Internal: the stable classes of an item row's parts (see `MenuItemRowProps.partClassNames`). */\nexport interface MenuItemRowPartClassNames {\n  checkmark?: string;\n  icon?: string;\n  content?: string;\n  shortcut?: string;\n}\n\n/**\n * The placeholder of the checkmark or the icon column: hidden, and shown as soon as any item of\n * the same menu list (the `group/menu` element) renders that column, so every label starts at the\n * same place. Decorative (`aria-hidden`).\n */\nfunction renderColumnSpace(column: 'checkmark' | 'icon'): React.ReactElement {\n  return column === 'checkmark' ? (\n    <span\n      aria-hidden=\"true\"\n      data-menu-column-space=\"checkmark\"\n      className=\"hidden w-4 shrink-0 group-has-[[data-menu-checkmark]]/menu:inline-flex\"\n    />\n  ) : (\n    <span\n      aria-hidden=\"true\"\n      data-menu-column-space=\"icon\"\n      className=\"hidden h-5 w-5 shrink-0 group-has-[[data-menu-icon]]/menu:inline-flex\"\n    />\n  );\n}\n\n/**\n * Internal: one menu item row, in DOM order (RTL mirrors it): the checkmark column, the icon\n * column, the label, the shortcut and the end content. A row without a checkmark or an icon\n * renders the column's placeholder instead; a row whose label renders nothing (the icon-only\n * submenu half of a split group) renders no placeholders.\n */\nexport function MenuItemRow({\n  checkmark,\n  icon,\n  label,\n  shortcut,\n  end,\n  markLabel = true,\n  partClassNames,\n}: MenuItemRowProps): React.ReactElement {\n  // The check does not consume a one-shot iterable label: it is rendered materialised.\n  const hasLabel = slotRendersContent(label);\n  // A falsy icon (`icon={name && <Icon />}` with `name` '' or a count of 0) is no icon, as in Nav,\n  // Tree and Avatar, and so is a collection whose items render nothing: no empty 20px box before\n  // the label. The check does not consume a generator: renderSlot still renders its items.\n  const iconNode =\n    icon && slotRendersContent(icon)\n      ? renderSlot(\n          icon,\n          'span',\n          cn(partClassNames?.icon, 'flex h-5 w-5 shrink-0 items-center justify-center'),\n          { 'aria-hidden': true, 'data-menu-icon': '' },\n        )\n      : null;\n\n  return (\n    <>\n      {checkmark !== undefined ? (\n        <span\n          aria-hidden=\"true\"\n          data-menu-checkmark=\"\"\n          className={cn(\n            partClassNames?.checkmark,\n            'inline-flex w-4 shrink-0 items-center justify-center',\n          )}\n        >\n          {checkmark}\n        </span>\n      ) : (\n        hasLabel && renderColumnSpace('checkmark')\n      )}\n      {iconNode ?? (hasLabel && renderColumnSpace('icon'))}\n      <span\n        className={cn(partClassNames?.content, 'flex-1')}\n        data-menu-label={markLabel && hasLabel && typeof label !== 'string' ? '' : undefined}\n      >\n        {materialiseSlotContent(label)}\n      </span>\n      {/* The shortcut takes its direction from its own text (`dir=\"auto\"` also isolates it): in an\n          RTL menu, \"Ctrl+,\" would otherwise be reordered to \",+Ctrl\". */}\n      {shortcut && (\n        <span\n          dir=\"auto\"\n          className={cn(partClassNames?.shortcut, 'ms-4 text-caption-1 text-muted-foreground')}\n        >\n          {shortcut}\n        </span>\n      )}\n      {end}\n    </>\n  );\n}\nMenuItemRow.displayName = 'MenuItemRow';\n\n/** Internal: the two column placeholders alone, for a row that is not an item (a group header). */\nexport function MenuColumnSpacers(): React.ReactElement {\n  return (\n    <>\n      {renderColumnSpace('checkmark')}\n      {renderColumnSpace('icon')}\n    </>\n  );\n}\nMenuColumnSpacers.displayName = 'MenuColumnSpacers';\n\n// ---------------------------------------------------------------------------\n// Item activation\n// ---------------------------------------------------------------------------\n\n/** Internal: the activation of every menu item kind. */\nexport interface MenuItemActivationOptions {\n  disabled: boolean;\n  /**\n   * The item's own `persistOnClick`; `undefined` falls back to the Menu's `persistOnItemClick`.\n   * A link item passes `false` (a link always closes).\n   */\n  persistOnClick: boolean | undefined;\n  /** The consumer's handlers, composed consumer first (C-COMPOSE). */\n  onClick?: React.MouseEventHandler<HTMLElement>;\n  onKeyDown?: React.KeyboardEventHandler<HTMLElement>;\n  /**\n   * Runs on an own, enabled click after the consumer's `onClick`, unless it prevented the default.\n   * Its own `preventDefault()` keeps the menu open.\n   */\n  onActivate?: (event: React.MouseEvent<HTMLElement>) => void;\n  /** Space activates and keeps the menu open (checkbox, radio and switch items). */\n  keepOpenOnSpace?: boolean;\n  /** Enter is left to the element's native activation (links); Space still clicks. */\n  nativeEnter?: boolean;\n  /** The item opens a submenu: activation never closes its menu. */\n  hasSubmenu?: boolean;\n}\n\n/**\n * Internal: the click and key handlers of a menu item.\n *\n * - Events from a portal opened inside the item (a Popover, a Dialog) reach the consumer's\n *   handlers, as React bubbles them, but never activate the item or close the menu.\n * - A disabled item calls no `onClick` and prevents its own click; its Enter and Space are still\n *   consumed.\n * - Enter and Space are consumed (no page scroll) and click the item; with Ctrl, Alt or Meta they\n *   are left to the page. A Space that continues a typeahead search is skipped (the roving\n *   capture handler prevented it). With `nativeEnter`, Enter is left to the element.\n * - After the consumer's `onClick` and `onActivate`, the item closes its menu through the list's\n *   `closeFromItem`, unless the click was not its own, its default was prevented, `hasSubmenu` is\n *   set, `keepOpenOnSpace` is set and Space caused the click, or\n *   `persistOnClick ?? menu.persistOnItemClick` is `true`.\n */\nexport function useMenuItemActivation({\n  disabled,\n  persistOnClick,\n  onClick,\n  onKeyDown,\n  onActivate,\n  keepOpenOnSpace = false,\n  nativeEnter = false,\n  hasSubmenu = false,\n}: MenuItemActivationOptions): {\n  onClick: React.MouseEventHandler<HTMLElement>;\n  onKeyDown: React.KeyboardEventHandler<HTMLElement>;\n} {\n  const list = useMenuListContext();\n  // Set while the key handler's click runs, so the click knows that Space caused it.\n  const clickFromSpaceRef = React.useRef(false);\n\n  const handleClick = (event: React.MouseEvent<HTMLElement>) => {\n    // A click inside a portal opened from the item reaches the consumer's onClick (React bubbles\n    // it), but is not a click on the item: it never activates the item or closes the menu. A\n    // disabled item calls no onClick, as a disabled button; a portal's click keeps its default.\n    const own = isOwnEvent(event);\n    if (disabled) {\n      if (own) event.preventDefault();\n      return;\n    }\n    onClick?.(event);\n    if (!own || event.defaultPrevented) return;\n    onActivate?.(event);\n    if (event.defaultPrevented || hasSubmenu) return;\n    if (keepOpenOnSpace && clickFromSpaceRef.current) return;\n    if (persistOnClick ?? list?.menu.persistOnItemClick ?? false) return;\n    list?.closeFromItem();\n  };\n\n  const handleKeyDown = (event: React.KeyboardEvent<HTMLElement>) => {\n    // C-COMPOSE: the consumer's onKeyDown runs first; preventDefault() skips the built-in keys.\n    onKeyDown?.(event);\n    if (event.defaultPrevented) return;\n    // Enter and Space typed in a portal opened from the item belong to that portal.\n    if (!isOwnEvent(event)) return;\n    if (event.key !== 'Enter' && event.key !== ' ') return;\n    // A link follows itself on Enter (Shift, Ctrl and Meta keep opening a new window or tab).\n    if (event.key === 'Enter' && nativeEnter) return;\n    // With Ctrl, Alt or Meta (Ctrl+Alt+Space included) the key is a shortcut, left to the page.\n    if (event.ctrlKey || event.altKey || event.metaKey) return;\n    // Menu items consume Enter/Space (no page scroll), whether or not they can be activated.\n    event.preventDefault();\n    if (disabled) return;\n    clickFromSpaceRef.current = event.key === ' ';\n    try {\n      event.currentTarget.click();\n    } finally {\n      clickFromSpaceRef.current = false;\n    }\n  };\n\n  return { onClick: handleClick, onKeyDown: handleKeyDown };\n}\n\n/**\n * Internal (C-DEV): warns once, from an effect, when an item of any kind renders in a popup menu\n * outside `Menu.Popover`. A Menu with `open`, `defaultOpen` or `onOpenChange` is a popup menu that\n * renders no element of its own, so such an item has no `role=\"menu\"` parent.\n *\n * @param componentName The item's name in the message, e.g. `'Menu.ItemCheckbox'`.\n */\nexport function useMenuItemPlacementWarning(componentName: string): void {\n  const list = useMenuListContext();\n  const menu = useOptionalMenuContext();\n  const outsidePopover = menu !== null && menu.popup && list === null;\n  React.useEffect(() => {\n    if (!outsidePopover) return;\n    warnOnce(\n      'Menu:item-outside-popover',\n      `${componentName}: rendered in a popup menu outside Menu.Popover, so it has no \\`role=\"menu\"\\` parent. A Menu with \\`open\\`, \\`defaultOpen\\` or \\`onOpenChange\\` is a popup menu that renders no element of its own: put the items in Menu.Popover, or leave these props out for a static menu.`,\n    );\n  }, [outsidePopover, componentName]);\n}\n\n// ---------------------------------------------------------------------------\n// Menu.Item / Menu.Divider\n// ---------------------------------------------------------------------------\n\n/**\n * An action in a menu (`role=\"menuitem\"`). Enter and Space activate it (a Space typed within 500 ms\n * of a typeahead character continues the search instead; with Ctrl, Alt or Meta they are left to\n * the page); in a popup menu, activation closes the menu and returns focus to the trigger unless\n * `persistOnClick` (or the Menu's `persistOnItemClick`) keeps it open or the consumer's `onClick`\n * calls `preventDefault()`. Disabled items are `aria-disabled`, skipped by keyboard navigation and\n * never activated: their `onClick` is not called. A consumer `aria-disabled` without `disabled`\n * only changes the look and keyboard navigation: activation still runs `onClick` (guard it\n * yourself), as on Button. The item's tab index is managed by the menu. Typeahead matches the\n * label (`children`), not the icon or the shortcut; a `data-roving-text` you pass replaces the\n * label's text. Clicks and keys from a portal opened inside the item (a Popover, a Dialog) still\n * reach your `onClick` (on an enabled item) and `onKeyDown`, as React bubbles them, but never\n * activate the item or close the menu.\n *\n * The labels of a menu line up: when any item of the menu shows an icon (or a check), every item\n * keeps an empty column of that width before its label.\n *\n * As the child of a submenu's `Menu.Trigger` (a `Menu` nested in a menu list), the item is the\n * submenu's trigger: it shows a chevron at its end (mirrored in RTL) and `data-has-submenu`, and\n * activating it never closes its own menu. ArrowRight (ArrowLeft in RTL), Enter, Space and a click\n * open the submenu and move focus to its first item; resting the mouse on the item opens it\n * without moving focus.\n *\n * Also exported as `MenuItem` (import the flat name from React Server Components).\n */\nexport const MenuItem = ({\n  icon,\n  shortcut,\n  disabled = false,\n  persistOnClick,\n  onClick,\n  onKeyDown,\n  children,\n  className,\n  ref,\n  ...rest\n}: MenuItemProps) => {\n  const isSubmenuTrigger = React.useContext(MenuSubmenuTriggerContext);\n  useMenuItemPlacementWarning('Menu.Item');\n\n  // Typeahead text: a string label directly; any other label through its marked element.\n  const stringLabel = typeof children === 'string' ? children : undefined;\n  const ownRovingText = (rest as Record<string, unknown>)['data-roving-text'] !== undefined;\n\n  // A submenu trigger item opens its submenu (the trigger's composed onClick): activating it never\n  // closes its own menu.\n  const activation = useMenuItemActivation({\n    disabled,\n    persistOnClick,\n    onClick,\n    onKeyDown,\n    hasSubmenu: isSubmenuTrigger,\n  });\n\n  return (\n    <div\n      role=\"menuitem\"\n      data-roving-text={stringLabel}\n      {...rest}\n      ref={ref}\n      aria-disabled={disabled ? true : rest['aria-disabled']}\n      data-disabled={disabled ? '' : undefined}\n      data-has-submenu={isSubmenuTrigger ? '' : undefined}\n      onClick={activation.onClick}\n      onKeyDown={activation.onKeyDown}\n      className={cn(menuItemClassNames.root, menuItemClasses, className)}\n    >\n      <MenuItemRow\n        icon={icon}\n        label={children}\n        shortcut={shortcut}\n        markLabel={!ownRovingText}\n        partClassNames={{\n          icon: menuItemClassNames.icon,\n          content: menuItemClassNames.content,\n          shortcut: menuItemClassNames.shortcut,\n        }}\n        end={\n          isSubmenuTrigger ? (\n            <ChevronRightIcon\n              size={16}\n              className={cn(\n                menuItemClassNames.submenuIndicator,\n                'ms-auto shrink-0 wave-rtl:-scale-x-100',\n              )}\n            />\n          ) : undefined\n        }\n      />\n    </div>\n  );\n};\nMenuItem.displayName = 'MenuItem';\n\n/**\n * A separator between groups of menu items (`role=\"separator\"`).\n *\n * Also exported as `MenuDivider` (import the flat name from React Server Components).\n */\nexport const MenuDivider = ({ className, ref, ...rest }: MenuDividerProps) => {\n  return (\n    <div\n      role=\"separator\"\n      {...rest}\n      ref={ref}\n      className={cn(menuDividerClassNames.root, 'my-1 border-t border-border', className)}\n    />\n  );\n};\nMenuDivider.displayName = 'MenuDivider';\n"],"mappings":"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"}