@kanso-labs/kanso-ui 0.34.0 → 0.34.2

package/dist/components/list-box/index.d.ts

@@ -73,7 +73,7 @@ declare namespace ListBox$1 {
  * `supporting` under it, and `trailing`. Give every option an `id` — that is
  * the key selection is reported by.
  */
-declare function ListBoxItem$1<T extends object = object>({ children, leading, overline, supporting, textValue, trailing, ...props }: ListBoxItemProps$1<T>): import("react").JSX.Element;
+declare function ListBoxItem$1<T extends object = object>({ children, leading, onContextMenu, onPointerCancel, onPointerDown, onPointerLeave, onPointerUp, overline, supporting, textValue, trailing, ...props }: ListBoxItemProps$1<T>): import("react").JSX.Element;
 /**
  * The row the list shows while it is fetching more. React Aria calls
  * `onLoadMore` when this comes into view, and draws it only while

package/dist/components/list-box/index.js

@@ -1,14 +1,16 @@
 import { props } from "../../node_modules/@stylexjs/stylex/lib/es/stylex.js";
 import { mergeStatefulStyles, mergeStyles } from "../../styles/merge.js";
+import { useRipple } from "../../hooks/useRipple.js";
+import { textOf } from "../../collection/text.js";
 import { CollectionLoadMore } from "../../collection/index.js";
 import { collectionStyles, rowItemStyles } from "../../collection/styles.js";
 import { RowContent } from "../../row/index.js";
 import { c } from "react/compiler-runtime";
-import { jsx, jsxs } from "react/jsx-runtime";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { Header, ListBox, ListBoxItem, ListBoxLoadMoreItem, ListBoxSection } from "react-aria-components";
 //#region src/components/list-box/index.tsx
-function itemContent(children, leading, overline, supporting, trailing) {
-	return (state) => /* @__PURE__ */ jsx(RowContent, {
+function itemContent(children, leading, overline, supporting, trailing, ripple) {
+	return (state) => /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(RowContent, {
 		isDisabled: state.isDisabled,
 		isSelected: state.isSelected,
 		leading,
@@ -16,7 +18,7 @@ function itemContent(children, leading, overline, supporting, trailing) {
 		supporting,
 		trailing,
 		children
-	});
+	}), state.isDisabled ? null : ripple] });
 }
 /**
 * A list of options one or more of which can be selected. Selection is React
@@ -32,21 +34,21 @@ function itemContent(children, leading, overline, supporting, trailing) {
 * The call site's `className` and `style` land on the container, which is
 * the element a layout positions.
 */
-function ListBox$1(props$3) {
+function ListBox$1(props$1) {
 	const $ = c(5);
 	let t0;
-	if ($[0] !== props$3) {
-		t0 = mergeStatefulStyles(props(collectionStyles.container), props$3);
-		$[0] = props$3;
+	if ($[0] !== props$1) {
+		t0 = mergeStatefulStyles(props(collectionStyles.container), props$1);
+		$[0] = props$1;
 		$[1] = t0;
 	} else t0 = $[1];
 	let t1;
-	if ($[2] !== props$3 || $[3] !== t0) {
+	if ($[2] !== props$1 || $[3] !== t0) {
 		t1 = /* @__PURE__ */ jsx(ListBox, {
-			...props$3,
+			...props$1,
 			...t0
 		});
-		$[2] = props$3;
+		$[2] = props$1;
 		$[3] = t0;
 		$[4] = t1;
 	} else t1 = $[4];
@@ -58,79 +60,64 @@ function ListBox$1(props$3) {
 * the key selection is reported by.
 */
 function ListBoxItem$1(t0) {
-	const $ = c(25);
-	let T0;
-	let children;
-	let leading;
-	let overline;
-	let supporting;
+	const $ = c(23);
+	const { children, leading, onContextMenu, onPointerCancel, onPointerDown, onPointerLeave, onPointerUp, overline, supporting, textValue, trailing, ...props } = t0;
 	let t1;
+	if ($[0] !== onContextMenu || $[1] !== onPointerCancel || $[2] !== onPointerDown || $[3] !== onPointerLeave || $[4] !== onPointerUp) {
+		t1 = {
+			onContextMenu,
+			onPointerCancel,
+			onPointerDown,
+			onPointerLeave,
+			onPointerUp
+		};
+		$[0] = onContextMenu;
+		$[1] = onPointerCancel;
+		$[2] = onPointerDown;
+		$[3] = onPointerLeave;
+		$[4] = onPointerUp;
+		$[5] = t1;
+	} else t1 = $[5];
+	const ripple = useRipple(true, t1, true);
+	const T0 = ListBoxItem;
 	let t2;
-	let t3;
-	let trailing;
-	if ($[0] !== t0) {
-		const { children: t4, leading: t5, overline: t6, supporting: t7, textValue, trailing: t8, ...props } = t0;
-		children = t4;
-		leading = t5;
-		overline = t6;
-		supporting = t7;
-		trailing = t8;
-		T0 = ListBoxItem;
-		if ($[10] !== children || $[11] !== textValue) {
-			t1 = textValue ?? textOf(children);
-			$[10] = children;
-			$[11] = textValue;
-			$[12] = t1;
-		} else t1 = $[12];
-		t2 = props;
-		t3 = mergeStatefulStyles(rowItemStyles(supporting, overline), props);
-		$[0] = t0;
-		$[1] = T0;
-		$[2] = children;
-		$[3] = leading;
-		$[4] = overline;
-		$[5] = supporting;
-		$[6] = t1;
-		$[7] = t2;
-		$[8] = t3;
-		$[9] = trailing;
-	} else {
-		T0 = $[1];
-		children = $[2];
-		leading = $[3];
-		overline = $[4];
-		supporting = $[5];
-		t1 = $[6];
-		t2 = $[7];
-		t3 = $[8];
-		trailing = $[9];
-	}
-	let t4;
-	if ($[13] !== children || $[14] !== leading || $[15] !== overline || $[16] !== supporting || $[17] !== trailing) {
-		t4 = itemContent(children, leading, overline, supporting, trailing);
-		$[13] = children;
-		$[14] = leading;
-		$[15] = overline;
-		$[16] = supporting;
-		$[17] = trailing;
-		$[18] = t4;
-	} else t4 = $[18];
+	if ($[6] !== children || $[7] !== textValue) {
+		t2 = textValue ?? textOf(children);
+		$[6] = children;
+		$[7] = textValue;
+		$[8] = t2;
+	} else t2 = $[8];
+	const t3 = ripple.handlers;
+	const t4 = mergeStatefulStyles(rowItemStyles(supporting, overline), props);
 	let t5;
-	if ($[19] !== T0 || $[20] !== t1 || $[21] !== t2 || $[22] !== t3 || $[23] !== t4) {
-		t5 = /* @__PURE__ */ jsx(T0, {
-			textValue: t1,
-			...t2,
+	if ($[9] !== children || $[10] !== leading || $[11] !== overline || $[12] !== ripple.surface || $[13] !== supporting || $[14] !== trailing) {
+		t5 = itemContent(children, leading, overline, supporting, trailing, ripple.surface);
+		$[9] = children;
+		$[10] = leading;
+		$[11] = overline;
+		$[12] = ripple.surface;
+		$[13] = supporting;
+		$[14] = trailing;
+		$[15] = t5;
+	} else t5 = $[15];
+	let t6;
+	if ($[16] !== T0 || $[17] !== props || $[18] !== ripple.handlers || $[19] !== t2 || $[20] !== t4 || $[21] !== t5) {
+		t6 = /* @__PURE__ */ jsx(T0, {
+			textValue: t2,
 			...t3,
-			children: t4
+			...props,
+			...t4,
+			children: t5
 		});
-		$[19] = T0;
-		$[20] = t1;
-		$[21] = t2;
-		$[22] = t3;
-		$[23] = t4;
-		$[24] = t5;
-	} else t5 = $[24];
-	return t5;
+		$[16] = T0;
+		$[17] = props;
+		$[18] = ripple.handlers;
+		$[19] = t2;
+		$[20] = t4;
+		$[21] = t5;
+		$[22] = t6;
+	} else t6 = $[22];
+	return t6;
 }
 /**
 * The row the list shows while it is fetching more. React Aria calls
@@ -144,11 +131,11 @@ function ListBoxLoadMore(t0) {
 	let t1;
 	let t2;
 	if ($[0] !== t0) {
-		const { label: t3, ...props$1 } = t0;
+		const { label: t3, ...props$2 } = t0;
 		label = t3 === void 0 ? "Loading more" : t3;
 		T0 = ListBoxLoadMoreItem;
-		t1 = props$1;
-		t2 = mergeStyles(props(collectionStyles.loading), props$1);
+		t1 = props$2;
+		t2 = mergeStyles(props(collectionStyles.loading), props$2);
 		$[0] = t0;
 		$[1] = T0;
 		$[2] = label;
@@ -196,12 +183,12 @@ function ListBoxSection$1(t0) {
 	let t1;
 	let t2;
 	if ($[0] !== t0) {
-		const { children: t3, header: t4, ...props$2 } = t0;
+		const { children: t3, header: t4, ...props$3 } = t0;
 		children = t3;
 		header = t4;
 		T0 = ListBoxSection;
-		t1 = props$2;
-		t2 = mergeStyles(props(collectionStyles.section), props$2);
+		t1 = props$3;
+		t2 = mergeStyles(props(collectionStyles.section), props$3);
 		$[0] = t0;
 		$[1] = T0;
 		$[2] = children;
@@ -240,9 +227,6 @@ function ListBoxSection$1(t0) {
 	} else t4 = $[13];
 	return t4;
 }
-function textOf(children) {
-	return typeof children === "string" ? children : void 0;
-}
 ListBox$1.Item = ListBoxItem$1;
 ListBox$1.LoadMore = ListBoxLoadMore;
 ListBox$1.Section = ListBoxSection$1;

package/dist/components/list-box/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["ReactNode","ListBoxItemRenderProps","ListBoxItemProps","RACListBoxItemProps","ListBoxLoadMoreItemProps","RACListBoxLoadMoreItemProps","ListBoxProps","RACListBoxProps","ListBoxSectionProps","RACListBoxSectionProps","stylex","Header","ListBox","RACListBox","ListBoxItem","RACListBoxItem","ListBoxLoadMoreItem","RACListBoxLoadMoreItem","ListBoxSection","RACListBoxSection","CollectionLoadMore","collectionStyles","rowItemStyles","RowContent","mergeStatefulStyles","mergeStyles","children","className","T","leading","overline","style","supporting","trailing","Omit","ListBoxLoadMoreProps","label","header","itemContent","state","isDisabled","isSelected","props","$","_c","t0","container","t1","T0","t2","t3","t4","t5","t6","t7","textValue","t8","textOf","ListBoxLoadMore","undefined","loading","section","Item","LoadMore","Section"],"sources":["../../../src/components/list-box/index.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\nimport type { ListBoxItemRenderProps, ListBoxItemProps as RACListBoxItemProps, ListBoxLoadMoreItemProps as RACListBoxLoadMoreItemProps, ListBoxProps as RACListBoxProps, ListBoxSectionProps as RACListBoxSectionProps } from 'react-aria-components';\nimport * as stylex from '@stylexjs/stylex';\nimport { Header, ListBox as RACListBox, ListBoxItem as RACListBoxItem, ListBoxLoadMoreItem as RACListBoxLoadMoreItem, ListBoxSection as RACListBoxSection } from 'react-aria-components';\nimport { CollectionLoadMore } from '../../collection';\nimport { collectionStyles, rowItemStyles } from '../../collection/styles';\nimport { RowContent } from '../../row';\nimport { mergeStatefulStyles, mergeStyles } from '../../styles/merge';\n\n// The lists page's selectable list. Each option is the row every list here\n// draws — `src/row`, shared with ListItem and with every collection the\n// coverage plan adds after this one — so the 56dp floor, the body-large\n// headline, the body-medium supporting line, the state layers and the\n// disabled treatment are all that module's and none of them is written\n// again. What is here is the container around those rows, the section and\n// its header, and the row the list shows while it is fetching more.\n//\n// The container takes the page's 8dp above and below its rows and no\n// background of its own, which is what lets the same list sit on the page\n// and inside a popover without knowing which it is in. Select, ComboBox and\n// Autocomplete are each a field plus one of these in an overlay, so that is\n// not a detail — it is the reason the container is transparent.\n//\n// A selected option takes primary container and on primary container, the\n// page's selected state, through the row module's `list` variant. The page\n// also draws a checkbox in the trailing slot on a list that selects more\n// than one; that is left to the call site rather than added by the option,\n// since which of the two affordances a list wants is the list's decision and\n// the slot is already there for it.\n//\n// Three things are worth knowing about how this maps onto React Aria.\n//\n// **The option's styles are a function of its render state.** StyleX cannot\n// target `[data-selected]` on the element it is styling, so selection,\n// disabled and the rest are read from the state React Aria hands the\n// `className` function — the same mechanism Tabs and Chip use, wrapped in\n// `mergeStatefulStyles` so a call site's own `className` survives.\n//\n// **A section's heading is React Aria's `Header`**, which is what points the\n// section's `aria-labelledby` at it. The lists page names no subhead in its\n// anatomy, so the type is title-small in on surface variant at the row's own\n// 16dp inline padding, which is what the page's own guidance draws.\n//\n// **The load-more row is a sentinel, not a button.** React Aria's\n// `ListBoxLoadMoreItem` calls `onLoadMore` when it comes into view and\n// renders whatever it is given while `isLoading`; ours renders the ring, so\n// a list that fetches as it scrolls says so with the same indicator every\n// other pending state in the library uses.\n\ntype ListBoxItemProps<T extends object = object> = {\n  /** The option's headline — the one thing it is mostly about. */\n  children?: ReactNode;\n  /** A function may compute the class from the option's render state. */\n  className?: RACListBoxItemProps<T>['className'];\n  /** Content before the headline: an avatar, an icon, a checkbox. */\n  leading?: ReactNode;\n  /**\n   * A line above the headline, in the page's label-small and the same muted\n   * role the supporting line takes — a category, a date, a status. Given\n   * alongside `supporting` it makes the row the page's three-line item.\n   */\n  overline?: ReactNode;\n  /** A function may compute the style from the option's render state. */\n  style?: RACListBoxItemProps<T>['style'];\n  /** A second line under the headline, in the muted role. */\n  supporting?: ReactNode;\n  /** Content after the headline, such as an amount or a control. */\n  trailing?: ReactNode;\n} & Omit<RACListBoxItemProps<T>, 'children' | 'className' | 'style'>;\ntype ListBoxLoadMoreProps = Omit<RACListBoxLoadMoreItemProps, 'children'> & {\n  /**\n   * What the row says while it is loading. Read by a screen reader; the ring\n   * itself carries no text.\n   * @default 'Loading more'\n   */\n  label?: string;\n};\ntype ListBoxProps<T extends object = object> = Omit<RACListBoxProps<T>, 'className' | 'style'> & {\n  /** A function may compute the class from the list's render state. */\n  className?: RACListBoxProps<T>['className'];\n  /** A function may compute the style from the list's render state. */\n  style?: RACListBoxProps<T>['style'];\n};\ntype ListBoxSectionProps<T extends object = object> = Omit<RACListBoxSectionProps<T>, 'children'> & {\n  /**\n   * The options in the section. A section built from data puts React Aria's\n   * `Collection` in here rather than a render function, since the header is\n   * an element beside them.\n   */\n  children?: ReactNode;\n  /**\n   * The section's heading, rendered through React Aria's header so the\n   * section is named by it. A section without one is a group with no name.\n   */\n  header?: ReactNode;\n};\n\n// What the option draws, from React Aria's render state. Built by a call\n// rather than written inline at the prop, which is what react-perf's\n// no-new-function-as-prop is after; the React Compiler memoises the result\n// on its inputs.\n//\n// It reads the render state for one thing: which colour the supporting line\n// takes. The muted role the page gives it holds only on the surface — over a\n// selected row's container it is a second colour family, and on a disabled\n// row it stays at full strength while the headline above it fades. The row\n// module decides; this hands it the two flags.\nfunction itemContent(children: ReactNode, leading: ReactNode, overline: ReactNode, supporting: ReactNode, trailing: ReactNode) {\n  return (state: ListBoxItemRenderProps) => <RowContent isDisabled={state.isDisabled} isSelected={state.isSelected} leading={leading} overline={overline} supporting={supporting} trailing={trailing}>\n      {children}\n    </RowContent>;\n}\n\n// StyleX cannot target `[data-selected]` on the element it is styling, so an\n// option's state comes from the render state React Aria hands its className.\n// The order matters: `disabled` is applied last so it wins over both the\n// interactive and the selected branches, and StyleX replaces a property\n// whole, so it takes their hover states with it.\n//\n// A supporting line moves the option from the page's one-line container\n// height to its two-line one, which is a floor rather than something the\n// row's own box arrives at — see `twoLine` in `src/row/styles.ts`. Taken as\n// an argument rather than read from the render state, since React Aria\n// reports what an option is doing and not what it holds; the row is built by\n// a call for the same reason `itemContent` is.\n/**\n * A list of options one or more of which can be selected. Selection is React\n * Aria's: set `selectionMode` to `single` or `multiple`, and pass\n * `selectedKeys` with `onSelectionChange` to control it or\n * `defaultSelectedKeys` to let it keep its own. A list that only responds to\n * a press takes `onAction` on the option instead.\n *\n * Composed from parts, since an option's slots take arbitrary content:\n * `ListBox.Item`, `ListBox.Section` and `ListBox.LoadMore`. Name the list\n * with `aria-label` or `aria-labelledby` — nothing here labels it for you.\n *\n * The call site's `className` and `style` land on the container, which is\n * the element a layout positions.\n */\nfunction ListBox<T extends object>(props: ListBoxProps<T>) {\n  return <RACListBox {...props} {...mergeStatefulStyles(stylex.props(collectionStyles.container), props)} />;\n}\n\n/**\n * One option. Its slots are the row's: `leading`, the headline as children,\n * `supporting` under it, and `trailing`. Give every option an `id` — that is\n * the key selection is reported by.\n */\nfunction ListBoxItem<T extends object = object>({\n  children,\n  leading,\n  overline,\n  supporting,\n  textValue,\n  trailing,\n  ...props\n}: ListBoxItemProps<T>) {\n  return <RACListBoxItem textValue={textValue ?? textOf(children)} {...props} {...mergeStatefulStyles(rowItemStyles(supporting, overline), props)}>\n      {itemContent(children, leading, overline, supporting, trailing)}\n    </RACListBoxItem>;\n}\n\n/**\n * The row the list shows while it is fetching more. React Aria calls\n * `onLoadMore` when this comes into view, and draws it only while\n * `isLoading` — so a list that pages as it scrolls needs nothing else.\n */\nfunction ListBoxLoadMore({\n  label = 'Loading more',\n  ...props\n}: ListBoxLoadMoreProps) {\n  return <RACListBoxLoadMoreItem {...props} {...mergeStyles(stylex.props(collectionStyles.loading), props)}>\n      <CollectionLoadMore label={label} size=\"24px\" />\n    </RACListBoxLoadMoreItem>;\n}\n\n/**\n * A named group of options. `header` names it, and is what a screen reader\n * reads before the options inside.\n */\nfunction ListBoxSection<T extends object = object>({\n  children,\n  header,\n  ...props\n}: ListBoxSectionProps<T>) {\n  return <RACListBoxSection {...props} {...mergeStyles(stylex.props(collectionStyles.section), props)}>\n      {header === undefined ? null : <Header {...stylex.props(collectionStyles.header)}>{header}</Header>}\n      {children}\n    </RACListBoxSection>;\n}\n\n// What the option is worth as text, for the things React Aria does with an\n// option's words rather than its element: typeahead, a combo box's filter,\n// and the value a select shows once it is chosen. React Aria reads it off\n// the children when they are a string and finds nothing when they are not —\n// and an option here is always an element, since the row wraps its headline.\n// So a plain-string headline becomes the text value, and anything else has\n// to say what it is worth through `textValue`.\nfunction textOf(children: ReactNode) {\n  return typeof children === 'string' ? children : undefined;\n}\nListBox.Item = ListBoxItem;\nListBox.LoadMore = ListBoxLoadMore;\nListBox.Section = ListBoxSection;\nexport type { ListBoxItemProps, ListBoxLoadMoreProps, ListBoxProps, ListBoxSectionProps };\nexport default ListBox;"],"mappings":"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"}
+{"version":3,"file":"index.js","names":["ReactNode","ListBoxItemRenderProps","ListBoxItemProps","RACListBoxItemProps","ListBoxLoadMoreItemProps","RACListBoxLoadMoreItemProps","ListBoxProps","RACListBoxProps","ListBoxSectionProps","RACListBoxSectionProps","stylex","Header","ListBox","RACListBox","ListBoxItem","RACListBoxItem","ListBoxLoadMoreItem","RACListBoxLoadMoreItem","ListBoxSection","RACListBoxSection","CollectionLoadMore","collectionStyles","rowItemStyles","textOf","useRipple","RowContent","mergeStatefulStyles","mergeStyles","children","className","T","leading","overline","style","supporting","trailing","Omit","ListBoxLoadMoreProps","label","header","itemContent","ripple","state","isDisabled","isSelected","props","$","_c","t0","container","t1","onContextMenu","onPointerCancel","onPointerDown","onPointerLeave","onPointerUp","textValue","T0","t2","t3","handlers","t4","t5","surface","t6","ListBoxLoadMore","undefined","loading","section","Item","LoadMore","Section"],"sources":["../../../src/components/list-box/index.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\nimport type { ListBoxItemRenderProps, ListBoxItemProps as RACListBoxItemProps, ListBoxLoadMoreItemProps as RACListBoxLoadMoreItemProps, ListBoxProps as RACListBoxProps, ListBoxSectionProps as RACListBoxSectionProps } from 'react-aria-components';\nimport * as stylex from '@stylexjs/stylex';\nimport { Header, ListBox as RACListBox, ListBoxItem as RACListBoxItem, ListBoxLoadMoreItem as RACListBoxLoadMoreItem, ListBoxSection as RACListBoxSection } from 'react-aria-components';\nimport { CollectionLoadMore } from '../../collection';\nimport { collectionStyles, rowItemStyles } from '../../collection/styles';\nimport { textOf } from '../../collection/text';\nimport { useRipple } from '../../hooks/useRipple';\nimport { RowContent } from '../../row';\nimport { mergeStatefulStyles, mergeStyles } from '../../styles/merge';\n\n// The lists page's selectable list. Each option is the row every list here\n// draws — `src/row`, shared with ListItem and with every collection the\n// coverage plan adds after this one — so the 56dp floor, the body-large\n// headline, the body-medium supporting line, the state layers and the\n// disabled treatment are all that module's and none of them is written\n// again. What is here is the container around those rows, the section and\n// its header, and the row the list shows while it is fetching more.\n//\n// The container takes the page's 8dp above and below its rows and no\n// background of its own, which is what lets the same list sit on the page\n// and inside a popover without knowing which it is in. Select, ComboBox and\n// Autocomplete are each a field plus one of these in an overlay, so that is\n// not a detail — it is the reason the container is transparent.\n//\n// A selected option takes primary container and on primary container, the\n// page's selected state, through the row module's `list` variant. The page\n// also draws a checkbox in the trailing slot on a list that selects more\n// than one; that is left to the call site rather than added by the option,\n// since which of the two affordances a list wants is the list's decision and\n// the slot is already there for it.\n//\n// Three things are worth knowing about how this maps onto React Aria.\n//\n// **The option's styles are a function of its render state.** StyleX cannot\n// target `[data-selected]` on the element it is styling, so selection,\n// disabled and the rest are read from the state React Aria hands the\n// `className` function — the same mechanism Tabs and Chip use, wrapped in\n// `mergeStatefulStyles` so a call site's own `className` survives.\n//\n// **A section's heading is React Aria's `Header`**, which is what points the\n// section's `aria-labelledby` at it. The lists page names no subhead in its\n// anatomy, so the type is title-small in on surface variant at the row's own\n// 16dp inline padding, which is what the page's own guidance draws.\n//\n// **The load-more row is a sentinel, not a button.** React Aria's\n// `ListBoxLoadMoreItem` calls `onLoadMore` when it comes into view and\n// renders whatever it is given while `isLoading`; ours renders the ring, so\n// a list that fetches as it scrolls says so with the same indicator every\n// other pending state in the library uses.\n\ntype ListBoxItemProps<T extends object = object> = {\n  /** The option's headline — the one thing it is mostly about. */\n  children?: ReactNode;\n  /** A function may compute the class from the option's render state. */\n  className?: RACListBoxItemProps<T>['className'];\n  /** Content before the headline: an avatar, an icon, a checkbox. */\n  leading?: ReactNode;\n  /**\n   * A line above the headline, in the page's label-small and the same muted\n   * role the supporting line takes — a category, a date, a status. Given\n   * alongside `supporting` it makes the row the page's three-line item.\n   */\n  overline?: ReactNode;\n  /** A function may compute the style from the option's render state. */\n  style?: RACListBoxItemProps<T>['style'];\n  /** A second line under the headline, in the muted role. */\n  supporting?: ReactNode;\n  /** Content after the headline, such as an amount or a control. */\n  trailing?: ReactNode;\n} & Omit<RACListBoxItemProps<T>, 'children' | 'className' | 'style'>;\ntype ListBoxLoadMoreProps = Omit<RACListBoxLoadMoreItemProps, 'children'> & {\n  /**\n   * What the row says while it is loading. Read by a screen reader; the ring\n   * itself carries no text.\n   * @default 'Loading more'\n   */\n  label?: string;\n};\ntype ListBoxProps<T extends object = object> = Omit<RACListBoxProps<T>, 'className' | 'style'> & {\n  /** A function may compute the class from the list's render state. */\n  className?: RACListBoxProps<T>['className'];\n  /** A function may compute the style from the list's render state. */\n  style?: RACListBoxProps<T>['style'];\n};\ntype ListBoxSectionProps<T extends object = object> = Omit<RACListBoxSectionProps<T>, 'children'> & {\n  /**\n   * The options in the section. A section built from data puts React Aria's\n   * `Collection` in here rather than a render function, since the header is\n   * an element beside them.\n   */\n  children?: ReactNode;\n  /**\n   * The section's heading, rendered through React Aria's header so the\n   * section is named by it. A section without one is a group with no name.\n   */\n  header?: ReactNode;\n};\n\n// What the option draws, from React Aria's render state. Built by a call\n// rather than written inline at the prop, which is what react-perf's\n// no-new-function-as-prop is after; the React Compiler memoises the result\n// on its inputs.\n//\n// It reads the render state for one thing: which colour the supporting line\n// takes. The muted role the page gives it holds only on the surface — over a\n// selected row's container it is a second colour family, and on a disabled\n// row it stays at full strength while the headline above it fades. The row\n// module decides; this hands it the two flags.\nfunction itemContent(children: ReactNode, leading: ReactNode, overline: ReactNode, supporting: ReactNode, trailing: ReactNode, ripple: ReactNode) {\n  return (state: ListBoxItemRenderProps) => <>\n      <RowContent isDisabled={state.isDisabled} isSelected={state.isSelected} leading={leading} overline={overline} supporting={supporting} trailing={trailing}>\n        {children}\n      </RowContent>\n      {state.isDisabled ? null : ripple}\n    </>;\n}\n\n// StyleX cannot target `[data-selected]` on the element it is styling, so an\n// option's state comes from the render state React Aria hands its className.\n// The order matters: `disabled` is applied last so it wins over both the\n// interactive and the selected branches, and StyleX replaces a property\n// whole, so it takes their hover states with it.\n//\n// A supporting line moves the option from the page's one-line container\n// height to its two-line one, which is a floor rather than something the\n// row's own box arrives at — see `twoLine` in `src/row/styles.ts`. Taken as\n// an argument rather than read from the render state, since React Aria\n// reports what an option is doing and not what it holds; the row is built by\n// a call for the same reason `itemContent` is.\n/**\n * A list of options one or more of which can be selected. Selection is React\n * Aria's: set `selectionMode` to `single` or `multiple`, and pass\n * `selectedKeys` with `onSelectionChange` to control it or\n * `defaultSelectedKeys` to let it keep its own. A list that only responds to\n * a press takes `onAction` on the option instead.\n *\n * Composed from parts, since an option's slots take arbitrary content:\n * `ListBox.Item`, `ListBox.Section` and `ListBox.LoadMore`. Name the list\n * with `aria-label` or `aria-labelledby` — nothing here labels it for you.\n *\n * The call site's `className` and `style` land on the container, which is\n * the element a layout positions.\n */\nfunction ListBox<T extends object>(props: ListBoxProps<T>) {\n  return <RACListBox {...props} {...mergeStatefulStyles(stylex.props(collectionStyles.container), props)} />;\n}\n\n/**\n * One option. Its slots are the row's: `leading`, the headline as children,\n * `supporting` under it, and `trailing`. Give every option an `id` — that is\n * the key selection is reported by.\n */\nfunction ListBoxItem<T extends object = object>({\n  children,\n  leading,\n  onContextMenu,\n  onPointerCancel,\n  onPointerDown,\n  onPointerLeave,\n  onPointerUp,\n  overline,\n  supporting,\n  textValue,\n  trailing,\n  ...props\n}: ListBoxItemProps<T>) {\n  // The press ripple List's rows draw — see ListItem there.\n  const ripple = useRipple<HTMLDivElement>(true, {\n    onContextMenu,\n    onPointerCancel,\n    onPointerDown,\n    onPointerLeave,\n    onPointerUp\n  }, true);\n  return <RACListBoxItem textValue={textValue ?? textOf(children)} {...ripple.handlers} {...props} {...mergeStatefulStyles(rowItemStyles(supporting, overline), props)}>\n      {itemContent(children, leading, overline, supporting, trailing, ripple.surface)}\n    </RACListBoxItem>;\n}\n\n/**\n * The row the list shows while it is fetching more. React Aria calls\n * `onLoadMore` when this comes into view, and draws it only while\n * `isLoading` — so a list that pages as it scrolls needs nothing else.\n */\nfunction ListBoxLoadMore({\n  label = 'Loading more',\n  ...props\n}: ListBoxLoadMoreProps) {\n  return <RACListBoxLoadMoreItem {...props} {...mergeStyles(stylex.props(collectionStyles.loading), props)}>\n      <CollectionLoadMore label={label} size=\"24px\" />\n    </RACListBoxLoadMoreItem>;\n}\n\n/**\n * A named group of options. `header` names it, and is what a screen reader\n * reads before the options inside.\n */\nfunction ListBoxSection<T extends object = object>({\n  children,\n  header,\n  ...props\n}: ListBoxSectionProps<T>) {\n  return <RACListBoxSection {...props} {...mergeStyles(stylex.props(collectionStyles.section), props)}>\n      {header === undefined ? null : <Header {...stylex.props(collectionStyles.header)}>{header}</Header>}\n      {children}\n    </RACListBoxSection>;\n}\nListBox.Item = ListBoxItem;\nListBox.LoadMore = ListBoxLoadMore;\nListBox.Section = ListBoxSection;\nexport type { ListBoxItemProps, ListBoxLoadMoreProps, ListBoxProps, ListBoxSectionProps };\nexport default ListBox;"],"mappings":"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"}

package/dist/components/menu/index.d.ts

@@ -87,9 +87,10 @@ type MenuSide = OverlaySide;
 type MenuSubmenuProps = {
   /**
    * The item that opens the submenu, then the `Menu.Content` it opens.
-   * Exactly those two, in that order.
+   * Exactly those two, in that order. The count is the type's to enforce;
+   * the order is not, since every JSX element has the same type.
    */
-  children: ReactElement[];
+  children: [trigger: ReactElement, content: ReactElement];
   /**
    * How long the pointer rests on the item before the submenu opens, in
    * milliseconds.
@@ -138,7 +139,7 @@ declare function MenuContent<T extends object = object>({ align, alignOffset, cl
  * as children, and `trailing` after it, with `shortcut` at the end. An item
  * that opens a submenu draws the chevron itself.
  */
-declare function MenuItem$1<T extends object = object>({ children, leading, shortcut, textValue, trailing, ...props }: MenuItemProps$1<T>): import("react").JSX.Element;
+declare function MenuItem$1<T extends object = object>({ children, leading, onContextMenu, onPointerCancel, onPointerDown, onPointerLeave, onPointerUp, shortcut, textValue, trailing, ...props }: MenuItemProps$1<T>): import("react").JSX.Element;
 /**
  * The row shown while more items are being fetched. React Aria calls
  * `onLoadMore` when it comes into view, and draws it only while `isLoading`.

package/dist/components/menu/index.js

@@ -1,6 +1,8 @@
 import { props } from "../../node_modules/@stylexjs/stylex/lib/es/stylex.js";
 import { mergeStatefulStyles, mergeStyles } from "../../styles/merge.js";
 import { ChevronEndGlyph } from "../../glyphs/index.js";
+import { useRipple } from "../../hooks/useRipple.js";
+import { textOf } from "../../collection/text.js";
 import { overlay, placementOf, popupOrigin } from "../../styles/overlay.js";
 import { CollectionLoadMore } from "../../collection/index.js";
 import { rowStyles } from "../../row/styles.js";
@@ -19,8 +21,8 @@ const styles = { content: {
 	k8WAf4: "x1cmllll",
 	$$css: true
 } };
-function itemContent(children, leading, shortcut, trailing) {
-	return (state) => /* @__PURE__ */ jsx(RowContent, {
+function itemContent(children, leading, shortcut, trailing, ripple) {
+	return (state) => /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(RowContent, {
 		isDisabled: state.isDisabled,
 		isSelected: state.isSelected,
 		leading,
@@ -30,7 +32,7 @@ function itemContent(children, leading, shortcut, trailing) {
 			slot: "label",
 			children
 		})
-	});
+	}), state.isDisabled ? null : ripple] });
 }
 function itemStyles(state) {
 	return props(rowStyles.base, rowStyles.menu, rowStyles.interactive, state.isSelected && rowStyles.selectedMenu, state.isDisabled && rowStyles.disabled);
@@ -185,74 +187,63 @@ function MenuContent(t0) {
 * that opens a submenu draws the chevron itself.
 */
 function MenuItem$1(t0) {
-	const $ = c(23);
-	let T0;
-	let children;
-	let leading;
-	let shortcut;
+	const $ = c(22);
+	const { children, leading, onContextMenu, onPointerCancel, onPointerDown, onPointerLeave, onPointerUp, shortcut, textValue, trailing, ...props } = t0;
 	let t1;
-	let t2;
-	let t3;
-	let trailing;
-	if ($[0] !== t0) {
-		const { children: t4, leading: t5, shortcut: t6, textValue, trailing: t7, ...props } = t0;
-		children = t4;
-		leading = t5;
-		shortcut = t6;
-		trailing = t7;
-		T0 = MenuItem;
-		if ($[9] !== children || $[10] !== textValue) {
-			t1 = textValue ?? textOf(children);
-			$[9] = children;
-			$[10] = textValue;
-			$[11] = t1;
-		} else t1 = $[11];
-		t2 = props;
-		t3 = mergeStatefulStyles(itemStyles, props);
-		$[0] = t0;
-		$[1] = T0;
-		$[2] = children;
-		$[3] = leading;
-		$[4] = shortcut;
+	if ($[0] !== onContextMenu || $[1] !== onPointerCancel || $[2] !== onPointerDown || $[3] !== onPointerLeave || $[4] !== onPointerUp) {
+		t1 = {
+			onContextMenu,
+			onPointerCancel,
+			onPointerDown,
+			onPointerLeave,
+			onPointerUp
+		};
+		$[0] = onContextMenu;
+		$[1] = onPointerCancel;
+		$[2] = onPointerDown;
+		$[3] = onPointerLeave;
+		$[4] = onPointerUp;
 		$[5] = t1;
-		$[6] = t2;
-		$[7] = t3;
-		$[8] = trailing;
-	} else {
-		T0 = $[1];
-		children = $[2];
-		leading = $[3];
-		shortcut = $[4];
-		t1 = $[5];
-		t2 = $[6];
-		t3 = $[7];
-		trailing = $[8];
-	}
-	let t4;
-	if ($[12] !== children || $[13] !== leading || $[14] !== shortcut || $[15] !== trailing) {
-		t4 = itemContent(children, leading, shortcut, trailing);
-		$[12] = children;
-		$[13] = leading;
-		$[14] = shortcut;
-		$[15] = trailing;
-		$[16] = t4;
-	} else t4 = $[16];
+	} else t1 = $[5];
+	const ripple = useRipple(true, t1, true);
+	const T0 = MenuItem;
+	let t2;
+	if ($[6] !== children || $[7] !== textValue) {
+		t2 = textValue ?? textOf(children);
+		$[6] = children;
+		$[7] = textValue;
+		$[8] = t2;
+	} else t2 = $[8];
+	const t3 = ripple.handlers;
+	const t4 = mergeStatefulStyles(itemStyles, props);
 	let t5;
-	if ($[17] !== T0 || $[18] !== t1 || $[19] !== t2 || $[20] !== t3 || $[21] !== t4) {
-		t5 = /* @__PURE__ */ jsx(T0, {
-			textValue: t1,
-			...t2,
+	if ($[9] !== children || $[10] !== leading || $[11] !== ripple.surface || $[12] !== shortcut || $[13] !== trailing) {
+		t5 = itemContent(children, leading, shortcut, trailing, ripple.surface);
+		$[9] = children;
+		$[10] = leading;
+		$[11] = ripple.surface;
+		$[12] = shortcut;
+		$[13] = trailing;
+		$[14] = t5;
+	} else t5 = $[14];
+	let t6;
+	if ($[15] !== T0 || $[16] !== props || $[17] !== ripple.handlers || $[18] !== t2 || $[19] !== t4 || $[20] !== t5) {
+		t6 = /* @__PURE__ */ jsx(T0, {
+			textValue: t2,
 			...t3,
-			children: t4
+			...props,
+			...t4,
+			children: t5
 		});
-		$[17] = T0;
-		$[18] = t1;
-		$[19] = t2;
-		$[20] = t3;
-		$[21] = t4;
-		$[22] = t5;
-	} else t5 = $[22];
-	return t5;
+		$[15] = T0;
+		$[16] = props;
+		$[17] = ripple.handlers;
+		$[18] = t2;
+		$[19] = t4;
+		$[20] = t5;
+		$[21] = t6;
+	} else t6 = $[21];
+	return t6;
 }
 /**
 * The row shown while more items are being fetched. React Aria calls
@@ -388,9 +379,6 @@ function MenuSubmenu(props) {
 function surfaceStyles(state) {
 	return props(overlay.popup, styles.content, popupOrigin(state.placement));
 }
-function textOf(children) {
-	return typeof children === "string" ? children : void 0;
-}
 /** What sits after the label: the call site's content, then the shortcut or
 * the submenu's chevron. */
 function trailingOf(state, shortcut, trailing) {

package/dist/components/menu/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["ComponentProps","ReactElement","ReactNode","ClassNameOrFunction","MenuItemRenderProps","PopoverRenderProps","MenuItemProps","RACMenuItemProps","MenuLoadMoreItemProps","RACMenuLoadMoreItemProps","MenuProps","RACMenuProps","MenuSectionProps","RACMenuSectionProps","MenuTriggerProps","RACMenuTriggerProps","StyleOrFunction","stylex","Header","Keyboard","Menu","RACMenu","MenuItem","RACMenuItem","MenuLoadMoreItem","RACMenuLoadMoreItem","MenuSection","RACMenuSection","MenuTrigger","RACMenuTrigger","Popover","RACPopover","SubmenuTrigger","RACSubmenuTrigger","Text","OverlayAlign","OverlaySide","CollectionLoadMore","ChevronEndGlyph","RowContent","rowStyles","mergeStatefulStyles","mergeStyles","overlay","placementOf","popupOrigin","colors","radii","sizing","spacing","typography","Separator","MENU_MIN","MENU_MAX","styles","content","kWkggS","kaIpWk","ks0D6T","k7Eaqz","k3XXqK","k8WAf4","$$css","MenuAlign","MenuContentProps","align","alignOffset","className","container","Element","search","side","MenuSide","sideOffset","style","Omit","T","children","leading","shortcut","trailing","MenuLoadMoreProps","label","header","MenuSeparatorProps","MenuSubmenuProps","delay","itemContent","state","isDisabled","isSelected","trailingOf","itemStyles","props","base","menu","interactive","selectedMenu","disabled","t0","$","_c","t1","MenuContent","t2","t3","undefined","t4","t5","surfaceStyles","t6","t7","t8","T0","textValue","textOf","MenuLoadMore","MenuSeparator","MenuSubmenu","popup","placement","hasSubmenu","Content","Item","LoadMore","Section","Submenu"],"sources":["../../../src/components/menu/index.tsx"],"sourcesContent":["import type { ComponentProps, ReactElement, ReactNode } from 'react';\nimport type { ClassNameOrFunction, MenuItemRenderProps, PopoverRenderProps, MenuItemProps as RACMenuItemProps, MenuLoadMoreItemProps as RACMenuLoadMoreItemProps, MenuProps as RACMenuProps, MenuSectionProps as RACMenuSectionProps, MenuTriggerProps as RACMenuTriggerProps, StyleOrFunction } from 'react-aria-components';\nimport * as stylex from '@stylexjs/stylex';\nimport { Header, Keyboard, Menu as RACMenu, MenuItem as RACMenuItem, MenuLoadMoreItem as RACMenuLoadMoreItem, MenuSection as RACMenuSection, MenuTrigger as RACMenuTrigger, Popover as RACPopover, SubmenuTrigger as RACSubmenuTrigger, Text } from 'react-aria-components';\nimport type { OverlayAlign, OverlaySide } from '../../styles/overlay';\nimport { CollectionLoadMore } from '../../collection';\nimport { ChevronEndGlyph } from '../../glyphs';\nimport { RowContent } from '../../row';\nimport { rowStyles } from '../../row/styles';\nimport { mergeStatefulStyles, mergeStyles } from '../../styles/merge';\nimport { overlay, placementOf, popupOrigin } from '../../styles/overlay';\nimport '../../tokens/design.tokens.stylex';\nimport { colors, radii, sizing, spacing, typography } from '../../tokens/design.tokens.stylex';\nimport Separator from '../separator';\n\n// The menus page's menu: a surface between 112 and 280 wide with a 4dp\n// corner and 8dp above and below its items, holding rows of the row module's\n// menu variant — 48dp tall, a label-large label, tertiary container when\n// selected. The surface itself is the overlay module's, shared with Popover\n// and Sheet, with the two things the menus page decides differently applied\n// over it: the corner, which is the extra-small step rather than the\n// medium one every other overlay takes, and the container colour, which is\n// the Expressive column's surface container low rather than the baseline's\n// surface container.\n//\n// Six parts, because everything a menu holds takes arbitrary content:\n// `Menu.Content`, `Menu.Item`, `Menu.Section`, `Menu.Separator`,\n// `Menu.Submenu` and `Menu.LoadMore`. A `Button` or `IconButton` placed\n// directly inside `Menu` is the trigger, wired through React Aria's context\n// rather than a part of ours — the same arrangement Sheet and Popover use.\n//\n// Four things are worth knowing about how this maps onto React Aria.\n//\n// **The item's styles are a function of its render state.** StyleX cannot\n// target `[data-selected]` on the element it is styling, so selection,\n// disabled and the rest are read from the state React Aria hands the\n// `className` function, wrapped in `mergeStatefulStyles` so a call site's own\n// `className` survives.\n//\n// **A shortcut goes through React Aria's `Keyboard` slot**, and the label\n// through its `Text` slot. The second is what makes the first work: React\n// Aria points the item's `aria-labelledby` at the labelled text, so a screen\n// reader reads the label alone and announces the keystroke separately. Left\n// as plain content, the item's name is its whole text and the shortcut is\n// read as part of what the item does. The keycap itself is the library's.\n//\n// **A submenu's arrow is drawn from render state, not from a prop.** React\n// Aria reports `hasSubmenu` on the item inside a `SubmenuTrigger`, so an item\n// that opens one gets the chevron without the call site saying so twice. The\n// glyph carries no direction of its own, so the style mirrors it under a\n// right-to-left writing mode.\n//\n// **A menu's children are a collection**, so anything that is not an item is\n// dropped: React Aria walks them looking for items and finds a search input\n// no place to be. `Menu.Content` therefore takes a `search` slot, drawn on\n// the surface above the items — which is also what puts the bar and the\n// items inside one `Autocomplete` when the menu is filtered.\n//\n// **A separator needs no slot from the call site.** React Aria's menu\n// provides the separator context, which is what `Menu.Separator` picks up —\n// that is why Separator moved onto React Aria in Phase 0. What is added here\n// is the menus page's 8dp either side of the rule.\n\nconst MENU_MIN = '112px';\nconst MENU_MAX = '280px';\nconst styles = {\n  content: {\n    kWkggS: \"x1vnz5z6\",\n    kaIpWk: \"x1tfhd1\",\n    ks0D6T: \"x1jkqq1h\",\n    k7Eaqz: \"x1c7vg25\",\n    k3XXqK: \"x1t137rt\",\n    k8WAf4: \"x1cmllll\",\n    $$css: true\n  }\n};\ntype MenuAlign = OverlayAlign;\ntype MenuContentProps<T extends object = object> = {\n  /** Where the menu lines up along that side. @default 'start' */\n  align?: MenuAlign;\n  /** Moves the menu along that side, in pixels. */\n  alignOffset?: number;\n  /**\n   * Lands on the surface, which is the element a layout positions. A\n   * function may compute the class from the surface's render state.\n   */\n  className?: ClassNameOrFunction<PopoverRenderProps>;\n  /**\n   * Where to portal the menu. Defaults to the end of `<body>`, which is right\n   * for an app that sets its StyleX theme on `:root`. An app that scopes the\n   * theme to a subtree has to point this at an element inside it, or the menu\n   * renders outside the theme and falls back to the tokens'\n   * `prefers-color-scheme` default.\n   */\n  container?: Element;\n  /**\n   * Content drawn on the surface above the items — a search bar that filters\n   * them, usually. It goes here rather than among the children because a\n   * menu's children are a collection: React Aria walks them for items and\n   * drops anything else, so an input written beside them disappears.\n   *\n   * To filter with it, wrap this whole part in `Autocomplete`, which puts\n   * the bar and the items inside one wrapper.\n   */\n  search?: ReactNode;\n  /** Which side of the trigger the menu opens on. @default 'bottom' */\n  side?: MenuSide;\n  /** How far the menu sits from the trigger, in pixels. @default 8 */\n  sideOffset?: number;\n  /** Lands on the surface, as `className` does. */\n  style?: StyleOrFunction<PopoverRenderProps>;\n} & Omit<RACMenuProps<T>, 'className' | 'style'>;\ntype MenuItemProps<T extends object = object> = {\n  /** The item's label — what it does. */\n  children?: ReactNode;\n  /** A function may compute the class from the item's render state. */\n  className?: RACMenuItemProps<T>['className'];\n  /** Content before the label, usually an icon. */\n  leading?: ReactNode;\n  /**\n   * The keystroke that runs the item, drawn as a keycap at the end. Goes\n   * through React Aria's keyboard slot, so a screen reader announces it\n   * apart from the label rather than reading the two as one name.\n   */\n  shortcut?: ReactNode;\n  /** A function may compute the style from the item's render state. */\n  style?: RACMenuItemProps<T>['style'];\n  /** Content after the label, before the shortcut. */\n  trailing?: ReactNode;\n} & Omit<RACMenuItemProps<T>, 'children' | 'className' | 'style'>;\ntype MenuLoadMoreProps = Omit<RACMenuLoadMoreItemProps, 'children'> & {\n  /**\n   * What the row says while it is loading. Read by a screen reader; the ring\n   * itself carries no text.\n   * @default 'Loading more'\n   */\n  label?: string;\n};\n\n// `children` is optional here where React Aria makes it required, so the\n// type reads the way Sheet's and Popover's do: a root that composes rather\n// than one that has to be handed something. Sheet does the same for the same\n// reason.\ntype MenuProps = Omit<RACMenuTriggerProps, 'children'> & {\n  /** The trigger, then the `Menu.Content` it opens. */\n  children?: ReactNode;\n};\ntype MenuSectionProps<T extends object = object> = Omit<RACMenuSectionProps<T>, 'children'> & {\n  /**\n   * The items in the section. A section built from data puts React Aria's\n   * `Collection` in here rather than a render function, since the header is\n   * an element beside them.\n   */\n  children?: ReactNode;\n  /**\n   * The section's heading, rendered through React Aria's header so the\n   * section is named by it. A section without one is a group with no name.\n   */\n  header?: ReactNode;\n};\ntype MenuSeparatorProps = Omit<ComponentProps<typeof Separator>, 'orientation'>;\ntype MenuSide = OverlaySide;\ntype MenuSubmenuProps = {\n  /**\n   * The item that opens the submenu, then the `Menu.Content` it opens.\n   * Exactly those two, in that order.\n   */\n  children: ReactElement[];\n  /**\n   * How long the pointer rests on the item before the submenu opens, in\n   * milliseconds.\n   * @default 200\n   */\n  delay?: number;\n};\n\n// What the item draws, from React Aria's render state. Built by a call\n// rather than written inline at the prop, which is what react-perf's\n// no-new-function-as-prop is after; the React Compiler memoises the result\n// on its inputs.\n//\n// The render state decides two things: the chevron, which an item inside a\n// SubmenuTrigger gets without the call site asking twice, and the supporting\n// line's colour, which the row module takes from whether the row is selected\n// or disabled.\nfunction itemContent(children: ReactNode, leading: ReactNode, shortcut: ReactNode, trailing: ReactNode) {\n  return (state: MenuItemRenderProps) => <RowContent isDisabled={state.isDisabled} isSelected={state.isSelected} leading={leading} trailing={trailingOf(state, shortcut, trailing)} variant=\"menu\">\n      <Text slot=\"label\">{children}</Text>\n    </RowContent>;\n}\n\n// StyleX cannot target `[data-selected]` on the element it is styling, so an\n// item's state comes from the render state React Aria hands its className.\n// The order matters: `disabled` is applied last so it wins over both the\n// interactive and the selected branches, and StyleX replaces a property\n// whole, so it takes their hover states with it.\n// No overline, and so no three-line row: the menus page gives one item\n// height and one line of text. `List.Item` and `ListBox.Item` take the prop\n// because the lists page is what they draw, and this row is 48dp rather than\n// that page's 56.\nfunction itemStyles(state: MenuItemRenderProps) {\n  return stylex.props(rowStyles.base, rowStyles.menu, rowStyles.interactive, state.isSelected && rowStyles.selectedMenu, state.isDisabled && rowStyles.disabled);\n}\n\n/**\n * A list of actions opened from a control. Open state is React Aria's: pass\n * `isOpen` with `onOpenChange` to control it, or `defaultOpen` to let it keep\n * its own.\n *\n * A `Button` or `IconButton` placed directly inside opens it; everything the\n * menu shows goes in `Menu.Content`, since the trigger lives in the page\n * while the menu is portalled out to the end of the body.\n *\n * ```tsx\n * <Menu>\n *   <Button>Open</Button>\n *   <Menu.Content aria-label=\"Label\">\n *     <Menu.Item id=\"first\">First item</Menu.Item>\n *   </Menu.Content>\n * </Menu>\n * ```\n */\nfunction Menu({\n  children,\n  ...props\n}: MenuProps) {\n  return <RACMenuTrigger {...props}>{children}</RACMenuTrigger>;\n}\n\n/**\n * The menu itself, and the surface it is drawn on. React Aria names it after\n * the control that opened it, so `aria-label` here is ignored — name the\n * trigger instead.\n *\n * The call site's `className` and `style` land on the surface, which is the\n * element a layout positions.\n */\nfunction MenuContent<T extends object = object>({\n  align = 'start',\n  alignOffset,\n  className,\n  container,\n  search,\n  side = 'bottom',\n  sideOffset = 8,\n  style,\n  ...props\n}: MenuContentProps<T>) {\n  return <RACPopover crossOffset={alignOffset} offset={sideOffset} placement={placementOf(side, align)}\n  // oxlint-disable-next-line typescript/no-deprecated -- its replacement, UNSAFE_PortalProvider, is not exported by react-aria-components\n  UNSTABLE_portalContainer={container} {...mergeStatefulStyles(surfaceStyles, {\n    className,\n    style\n  })}>\n      {search === undefined ? null : <div className=\"x9f619 xqf7pud xn60lsn\">{search}</div>}\n      <RACMenu<T> {...props} className=\"x9f619 x78zum5 xdt5ytf x1t137rt\" />\n    </RACPopover>;\n}\n\n/**\n * One action. Its slots are the row's: `leading` before the label, the label\n * as children, and `trailing` after it, with `shortcut` at the end. An item\n * that opens a submenu draws the chevron itself.\n */\nfunction MenuItem<T extends object = object>({\n  children,\n  leading,\n  shortcut,\n  textValue,\n  trailing,\n  ...props\n}: MenuItemProps<T>) {\n  return <RACMenuItem textValue={textValue ?? textOf(children)} {...props} {...mergeStatefulStyles(itemStyles, props)}>\n      {itemContent(children, leading, shortcut, trailing)}\n    </RACMenuItem>;\n}\n\n/**\n * The row shown while more items are being fetched. React Aria calls\n * `onLoadMore` when it comes into view, and draws it only while `isLoading`.\n */\nfunction MenuLoadMore({\n  label = 'Loading more',\n  ...props\n}: MenuLoadMoreProps) {\n  return <RACMenuLoadMoreItem {...props} {...mergeStyles({\n    className: \"x6s0dn4 x9f619 x78zum5 xl56j7k x1ddmzdj\"\n  }, props)}>\n      <CollectionLoadMore label={label} size=\"20px\" />\n    </RACMenuLoadMoreItem>;\n}\n\n/**\n * A named group of items. `header` names it, and is what a screen reader\n * reads before the items inside.\n */\nfunction MenuSection<T extends object = object>({\n  children,\n  header,\n  ...props\n}: MenuSectionProps<T>) {\n  return <RACMenuSection {...props}>\n      {header === undefined ? null : <Header className=\"x9f619 x1w5n3ug xrgwony x12s497w x1szcwkt xo803ec xyl1r0q xw3mh6e x6gmt8y x790zyz\">{header}</Header>}\n      {children}\n    </RACMenuSection>;\n}\n\n/**\n * A rule between groups of items. It takes its role from the menu around it,\n * so it needs no slot from the call site.\n */\nfunction MenuSeparator(props: MenuSeparatorProps) {\n  return <Separator {...props} {...mergeStyles({\n    className: \"xwpi13i\"\n  }, props)} />;\n}\n\n/**\n * An item that opens a menu of its own. Takes exactly two children: the\n * `Menu.Item` that opens it, then the `Menu.Content` it opens.\n */\nfunction MenuSubmenu(props: MenuSubmenuProps) {\n  return <RACSubmenuTrigger {...props} />;\n}\n\n// The surface grows from the edge it is anchored by, which is what makes it\n// read as coming out of the trigger. Built by a call rather than written\n// inline at the prop, which is what react-perf's no-new-function-as-prop is\n// after.\nfunction surfaceStyles(state: PopoverRenderProps) {\n  return stylex.props(overlay.popup, styles.content, popupOrigin(state.placement));\n}\n\n// What the item is worth as text, for the typeahead React Aria drives from\n// an item's words rather than its element. It reads it off the children when\n// they are a string and finds nothing when they are not — and an item here\n// is always an element, since the row wraps its label. So a plain-string\n// label becomes the text value, and anything else has to say what it is\n// worth through `textValue`.\nfunction textOf(children: ReactNode) {\n  return typeof children === 'string' ? children : undefined;\n}\n\n/** What sits after the label: the call site's content, then the shortcut or\n * the submenu's chevron. */\nfunction trailingOf(state: MenuItemRenderProps, shortcut: ReactNode, trailing: ReactNode) {\n  if (state.hasSubmenu) {\n    return <>\n        {trailing}\n        <ChevronEndGlyph className=\"x1qx5ct2 xw4jnvo x19axjrm x1c071of\" />\n      </>;\n  }\n  if (shortcut === undefined && trailing === undefined) {\n    return undefined;\n  }\n  return <>\n      {trailing}\n      {shortcut === undefined ? null : <Keyboard className=\"x1w5n3ug\">{shortcut}</Keyboard>}\n    </>;\n}\nMenu.Content = MenuContent;\nMenu.Item = MenuItem;\nMenu.LoadMore = MenuLoadMore;\nMenu.Section = MenuSection;\nMenu.Separator = MenuSeparator;\nMenu.Submenu = MenuSubmenu;\nexport type { MenuAlign, MenuContentProps, MenuItemProps, MenuLoadMoreProps, MenuProps, MenuSectionProps, MenuSeparatorProps, MenuSide, MenuSubmenuProps };\nexport default Menu;"],"mappings":"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"}
+{"version":3,"file":"index.js","names":["ComponentProps","ReactElement","ReactNode","ClassNameOrFunction","MenuItemRenderProps","PopoverRenderProps","MenuItemProps","RACMenuItemProps","MenuLoadMoreItemProps","RACMenuLoadMoreItemProps","MenuProps","RACMenuProps","MenuSectionProps","RACMenuSectionProps","MenuTriggerProps","RACMenuTriggerProps","StyleOrFunction","stylex","Header","Keyboard","Menu","RACMenu","MenuItem","RACMenuItem","MenuLoadMoreItem","RACMenuLoadMoreItem","MenuSection","RACMenuSection","MenuTrigger","RACMenuTrigger","Popover","RACPopover","SubmenuTrigger","RACSubmenuTrigger","Text","OverlayAlign","OverlaySide","CollectionLoadMore","textOf","ChevronEndGlyph","useRipple","RowContent","rowStyles","mergeStatefulStyles","mergeStyles","overlay","placementOf","popupOrigin","colors","radii","sizing","spacing","typography","Separator","MENU_MIN","MENU_MAX","styles","content","kWkggS","kaIpWk","ks0D6T","k7Eaqz","k3XXqK","k8WAf4","$$css","MenuAlign","MenuContentProps","align","alignOffset","className","container","Element","search","side","MenuSide","sideOffset","style","Omit","T","children","leading","shortcut","trailing","MenuLoadMoreProps","label","header","MenuSeparatorProps","MenuSubmenuProps","trigger","delay","itemContent","ripple","state","isDisabled","isSelected","trailingOf","itemStyles","props","base","menu","interactive","selectedMenu","disabled","t0","$","_c","t1","MenuContent","t2","t3","undefined","t4","t5","surfaceStyles","t6","t7","t8","onContextMenu","onPointerCancel","onPointerDown","onPointerLeave","onPointerUp","textValue","T0","handlers","surface","MenuLoadMore","MenuSeparator","MenuSubmenu","popup","placement","hasSubmenu","Content","Item","LoadMore","Section","Submenu"],"sources":["../../../src/components/menu/index.tsx"],"sourcesContent":["import type { ComponentProps, ReactElement, ReactNode } from 'react';\nimport type { ClassNameOrFunction, MenuItemRenderProps, PopoverRenderProps, MenuItemProps as RACMenuItemProps, MenuLoadMoreItemProps as RACMenuLoadMoreItemProps, MenuProps as RACMenuProps, MenuSectionProps as RACMenuSectionProps, MenuTriggerProps as RACMenuTriggerProps, StyleOrFunction } from 'react-aria-components';\nimport * as stylex from '@stylexjs/stylex';\nimport { Header, Keyboard, Menu as RACMenu, MenuItem as RACMenuItem, MenuLoadMoreItem as RACMenuLoadMoreItem, MenuSection as RACMenuSection, MenuTrigger as RACMenuTrigger, Popover as RACPopover, SubmenuTrigger as RACSubmenuTrigger, Text } from 'react-aria-components';\nimport type { OverlayAlign, OverlaySide } from '../../styles/overlay';\nimport { CollectionLoadMore } from '../../collection';\nimport { textOf } from '../../collection/text';\nimport { ChevronEndGlyph } from '../../glyphs';\nimport { useRipple } from '../../hooks/useRipple';\nimport { RowContent } from '../../row';\nimport { rowStyles } from '../../row/styles';\nimport { mergeStatefulStyles, mergeStyles } from '../../styles/merge';\nimport { overlay, placementOf, popupOrigin } from '../../styles/overlay';\nimport '../../tokens/design.tokens.stylex';\nimport { colors, radii, sizing, spacing, typography } from '../../tokens/design.tokens.stylex';\nimport Separator from '../separator';\n\n// The menus page's menu: a surface between 112 and 280 wide with a 4dp\n// corner and 8dp above and below its items, holding rows of the row module's\n// menu variant — 48dp tall, a label-large label, tertiary container when\n// selected. The surface itself is the overlay module's, shared with Popover\n// and Sheet, with the two things the menus page decides differently applied\n// over it: the corner, which is the extra-small step rather than the\n// medium one every other overlay takes, and the container colour, which is\n// the Expressive column's surface container low rather than the baseline's\n// surface container.\n//\n// Six parts, because everything a menu holds takes arbitrary content:\n// `Menu.Content`, `Menu.Item`, `Menu.Section`, `Menu.Separator`,\n// `Menu.Submenu` and `Menu.LoadMore`. A `Button` or `IconButton` placed\n// directly inside `Menu` is the trigger, wired through React Aria's context\n// rather than a part of ours — the same arrangement Sheet and Popover use.\n//\n// Four things are worth knowing about how this maps onto React Aria.\n//\n// **The item's styles are a function of its render state.** StyleX cannot\n// target `[data-selected]` on the element it is styling, so selection,\n// disabled and the rest are read from the state React Aria hands the\n// `className` function, wrapped in `mergeStatefulStyles` so a call site's own\n// `className` survives.\n//\n// **A shortcut goes through React Aria's `Keyboard` slot**, and the label\n// through its `Text` slot. The second is what makes the first work: React\n// Aria points the item's `aria-labelledby` at the labelled text, so a screen\n// reader reads the label alone and announces the keystroke separately. Left\n// as plain content, the item's name is its whole text and the shortcut is\n// read as part of what the item does. The keycap itself is the library's.\n//\n// **A submenu's arrow is drawn from render state, not from a prop.** React\n// Aria reports `hasSubmenu` on the item inside a `SubmenuTrigger`, so an item\n// that opens one gets the chevron without the call site saying so twice. The\n// glyph carries no direction of its own, so the style mirrors it under a\n// right-to-left writing mode.\n//\n// **A menu's children are a collection**, so anything that is not an item is\n// dropped: React Aria walks them looking for items and finds a search input\n// no place to be. `Menu.Content` therefore takes a `search` slot, drawn on\n// the surface above the items — which is also what puts the bar and the\n// items inside one `Autocomplete` when the menu is filtered.\n//\n// **A separator needs no slot from the call site.** React Aria's menu\n// provides the separator context, which is what `Menu.Separator` picks up —\n// that is why Separator moved onto React Aria in Phase 0. What is added here\n// is the menus page's 8dp either side of the rule.\n\nconst MENU_MIN = '112px';\nconst MENU_MAX = '280px';\nconst styles = {\n  content: {\n    kWkggS: \"x1vnz5z6\",\n    kaIpWk: \"x1tfhd1\",\n    ks0D6T: \"x1jkqq1h\",\n    k7Eaqz: \"x1c7vg25\",\n    k3XXqK: \"x1t137rt\",\n    k8WAf4: \"x1cmllll\",\n    $$css: true\n  }\n};\ntype MenuAlign = OverlayAlign;\ntype MenuContentProps<T extends object = object> = {\n  /** Where the menu lines up along that side. @default 'start' */\n  align?: MenuAlign;\n  /** Moves the menu along that side, in pixels. */\n  alignOffset?: number;\n  /**\n   * Lands on the surface, which is the element a layout positions. A\n   * function may compute the class from the surface's render state.\n   */\n  className?: ClassNameOrFunction<PopoverRenderProps>;\n  /**\n   * Where to portal the menu. Defaults to the end of `<body>`, which is right\n   * for an app that sets its StyleX theme on `:root`. An app that scopes the\n   * theme to a subtree has to point this at an element inside it, or the menu\n   * renders outside the theme and falls back to the tokens'\n   * `prefers-color-scheme` default.\n   */\n  container?: Element;\n  /**\n   * Content drawn on the surface above the items — a search bar that filters\n   * them, usually. It goes here rather than among the children because a\n   * menu's children are a collection: React Aria walks them for items and\n   * drops anything else, so an input written beside them disappears.\n   *\n   * To filter with it, wrap this whole part in `Autocomplete`, which puts\n   * the bar and the items inside one wrapper.\n   */\n  search?: ReactNode;\n  /** Which side of the trigger the menu opens on. @default 'bottom' */\n  side?: MenuSide;\n  /** How far the menu sits from the trigger, in pixels. @default 8 */\n  sideOffset?: number;\n  /** Lands on the surface, as `className` does. */\n  style?: StyleOrFunction<PopoverRenderProps>;\n} & Omit<RACMenuProps<T>, 'className' | 'style'>;\ntype MenuItemProps<T extends object = object> = {\n  /** The item's label — what it does. */\n  children?: ReactNode;\n  /** A function may compute the class from the item's render state. */\n  className?: RACMenuItemProps<T>['className'];\n  /** Content before the label, usually an icon. */\n  leading?: ReactNode;\n  /**\n   * The keystroke that runs the item, drawn as a keycap at the end. Goes\n   * through React Aria's keyboard slot, so a screen reader announces it\n   * apart from the label rather than reading the two as one name.\n   */\n  shortcut?: ReactNode;\n  /** A function may compute the style from the item's render state. */\n  style?: RACMenuItemProps<T>['style'];\n  /** Content after the label, before the shortcut. */\n  trailing?: ReactNode;\n} & Omit<RACMenuItemProps<T>, 'children' | 'className' | 'style'>;\ntype MenuLoadMoreProps = Omit<RACMenuLoadMoreItemProps, 'children'> & {\n  /**\n   * What the row says while it is loading. Read by a screen reader; the ring\n   * itself carries no text.\n   * @default 'Loading more'\n   */\n  label?: string;\n};\n\n// `children` is optional here where React Aria makes it required, so the\n// type reads the way Sheet's and Popover's do: a root that composes rather\n// than one that has to be handed something. Sheet does the same for the same\n// reason.\ntype MenuProps = Omit<RACMenuTriggerProps, 'children'> & {\n  /** The trigger, then the `Menu.Content` it opens. */\n  children?: ReactNode;\n};\ntype MenuSectionProps<T extends object = object> = Omit<RACMenuSectionProps<T>, 'children'> & {\n  /**\n   * The items in the section. A section built from data puts React Aria's\n   * `Collection` in here rather than a render function, since the header is\n   * an element beside them.\n   */\n  children?: ReactNode;\n  /**\n   * The section's heading, rendered through React Aria's header so the\n   * section is named by it. A section without one is a group with no name.\n   */\n  header?: ReactNode;\n};\ntype MenuSeparatorProps = Omit<ComponentProps<typeof Separator>, 'orientation'>;\ntype MenuSide = OverlaySide;\ntype MenuSubmenuProps = {\n  /**\n   * The item that opens the submenu, then the `Menu.Content` it opens.\n   * Exactly those two, in that order. The count is the type's to enforce;\n   * the order is not, since every JSX element has the same type.\n   */\n  children: [trigger: ReactElement, content: ReactElement];\n  /**\n   * How long the pointer rests on the item before the submenu opens, in\n   * milliseconds.\n   * @default 200\n   */\n  delay?: number;\n};\n\n// What the item draws, from React Aria's render state. Built by a call\n// rather than written inline at the prop, which is what react-perf's\n// no-new-function-as-prop is after; the React Compiler memoises the result\n// on its inputs.\n//\n// The render state decides two things: the chevron, which an item inside a\n// SubmenuTrigger gets without the call site asking twice, and the supporting\n// line's colour, which the row module takes from whether the row is selected\n// or disabled.\nfunction itemContent(children: ReactNode, leading: ReactNode, shortcut: ReactNode, trailing: ReactNode, ripple: ReactNode) {\n  return (state: MenuItemRenderProps) => <>\n      <RowContent isDisabled={state.isDisabled} isSelected={state.isSelected} leading={leading} trailing={trailingOf(state, shortcut, trailing)} variant=\"menu\">\n        <Text slot=\"label\">{children}</Text>\n      </RowContent>\n      {state.isDisabled ? null : ripple}\n    </>;\n}\n\n// StyleX cannot target `[data-selected]` on the element it is styling, so an\n// item's state comes from the render state React Aria hands its className.\n// The order matters: `disabled` is applied last so it wins over both the\n// interactive and the selected branches, and StyleX replaces a property\n// whole, so it takes their hover states with it.\n// No overline, and so no three-line row: the menus page gives one item\n// height and one line of text. `List.Item` and `ListBox.Item` take the prop\n// because the lists page is what they draw, and this row is 48dp rather than\n// that page's 56.\nfunction itemStyles(state: MenuItemRenderProps) {\n  return stylex.props(rowStyles.base, rowStyles.menu, rowStyles.interactive, state.isSelected && rowStyles.selectedMenu, state.isDisabled && rowStyles.disabled);\n}\n\n/**\n * A list of actions opened from a control. Open state is React Aria's: pass\n * `isOpen` with `onOpenChange` to control it, or `defaultOpen` to let it keep\n * its own.\n *\n * A `Button` or `IconButton` placed directly inside opens it; everything the\n * menu shows goes in `Menu.Content`, since the trigger lives in the page\n * while the menu is portalled out to the end of the body.\n *\n * ```tsx\n * <Menu>\n *   <Button>Open</Button>\n *   <Menu.Content aria-label=\"Label\">\n *     <Menu.Item id=\"first\">First item</Menu.Item>\n *   </Menu.Content>\n * </Menu>\n * ```\n */\nfunction Menu({\n  children,\n  ...props\n}: MenuProps) {\n  return <RACMenuTrigger {...props}>{children}</RACMenuTrigger>;\n}\n\n/**\n * The menu itself, and the surface it is drawn on. React Aria names it after\n * the control that opened it, so `aria-label` here is ignored — name the\n * trigger instead.\n *\n * The call site's `className` and `style` land on the surface, which is the\n * element a layout positions.\n */\nfunction MenuContent<T extends object = object>({\n  align = 'start',\n  alignOffset,\n  className,\n  container,\n  search,\n  side = 'bottom',\n  sideOffset = 8,\n  style,\n  ...props\n}: MenuContentProps<T>) {\n  return <RACPopover crossOffset={alignOffset} offset={sideOffset} placement={placementOf(side, align)}\n  // oxlint-disable-next-line typescript/no-deprecated -- its replacement, UNSAFE_PortalProvider, is not exported by react-aria-components\n  UNSTABLE_portalContainer={container} {...mergeStatefulStyles(surfaceStyles, {\n    className,\n    style\n  })}>\n      {search === undefined ? null : <div className=\"x9f619 xqf7pud xn60lsn\">{search}</div>}\n      <RACMenu<T> {...props} className=\"x9f619 x78zum5 xdt5ytf x1t137rt\" />\n    </RACPopover>;\n}\n\n/**\n * One action. Its slots are the row's: `leading` before the label, the label\n * as children, and `trailing` after it, with `shortcut` at the end. An item\n * that opens a submenu draws the chevron itself.\n */\nfunction MenuItem<T extends object = object>({\n  children,\n  leading,\n  onContextMenu,\n  onPointerCancel,\n  onPointerDown,\n  onPointerLeave,\n  onPointerUp,\n  shortcut,\n  textValue,\n  trailing,\n  ...props\n}: MenuItemProps<T>) {\n  // The press ripple List's rows draw — see ListItem there.\n  const ripple = useRipple<HTMLDivElement>(true, {\n    onContextMenu,\n    onPointerCancel,\n    onPointerDown,\n    onPointerLeave,\n    onPointerUp\n  }, true);\n  return <RACMenuItem textValue={textValue ?? textOf(children)} {...ripple.handlers} {...props} {...mergeStatefulStyles(itemStyles, props)}>\n      {itemContent(children, leading, shortcut, trailing, ripple.surface)}\n    </RACMenuItem>;\n}\n\n/**\n * The row shown while more items are being fetched. React Aria calls\n * `onLoadMore` when it comes into view, and draws it only while `isLoading`.\n */\nfunction MenuLoadMore({\n  label = 'Loading more',\n  ...props\n}: MenuLoadMoreProps) {\n  return <RACMenuLoadMoreItem {...props} {...mergeStyles({\n    className: \"x6s0dn4 x9f619 x78zum5 xl56j7k x1ddmzdj\"\n  }, props)}>\n      <CollectionLoadMore label={label} size=\"20px\" />\n    </RACMenuLoadMoreItem>;\n}\n\n/**\n * A named group of items. `header` names it, and is what a screen reader\n * reads before the items inside.\n */\nfunction MenuSection<T extends object = object>({\n  children,\n  header,\n  ...props\n}: MenuSectionProps<T>) {\n  return <RACMenuSection {...props}>\n      {header === undefined ? null : <Header className=\"x9f619 x1w5n3ug xrgwony x12s497w x1szcwkt xo803ec xyl1r0q xw3mh6e x6gmt8y x790zyz\">{header}</Header>}\n      {children}\n    </RACMenuSection>;\n}\n\n/**\n * A rule between groups of items. It takes its role from the menu around it,\n * so it needs no slot from the call site.\n */\nfunction MenuSeparator(props: MenuSeparatorProps) {\n  return <Separator {...props} {...mergeStyles({\n    className: \"xwpi13i\"\n  }, props)} />;\n}\n\n/**\n * An item that opens a menu of its own. Takes exactly two children: the\n * `Menu.Item` that opens it, then the `Menu.Content` it opens.\n */\nfunction MenuSubmenu(props: MenuSubmenuProps) {\n  return <RACSubmenuTrigger {...props} />;\n}\n\n// The surface grows from the edge it is anchored by, which is what makes it\n// read as coming out of the trigger. Built by a call rather than written\n// inline at the prop, which is what react-perf's no-new-function-as-prop is\n// after.\nfunction surfaceStyles(state: PopoverRenderProps) {\n  return stylex.props(overlay.popup, styles.content, popupOrigin(state.placement));\n}\n\n/** What sits after the label: the call site's content, then the shortcut or\n * the submenu's chevron. */\nfunction trailingOf(state: MenuItemRenderProps, shortcut: ReactNode, trailing: ReactNode) {\n  if (state.hasSubmenu) {\n    return <>\n        {trailing}\n        <ChevronEndGlyph className=\"x1qx5ct2 xw4jnvo x19axjrm x1c071of\" />\n      </>;\n  }\n  if (shortcut === undefined && trailing === undefined) {\n    return undefined;\n  }\n  return <>\n      {trailing}\n      {shortcut === undefined ? null : <Keyboard className=\"x1w5n3ug\">{shortcut}</Keyboard>}\n    </>;\n}\nMenu.Content = MenuContent;\nMenu.Item = MenuItem;\nMenu.LoadMore = MenuLoadMore;\nMenu.Section = MenuSection;\nMenu.Separator = MenuSeparator;\nMenu.Submenu = MenuSubmenu;\nexport type { MenuAlign, MenuContentProps, MenuItemProps, MenuLoadMoreProps, MenuProps, MenuSectionProps, MenuSeparatorProps, MenuSide, MenuSubmenuProps };\nexport default Menu;"],"mappings":"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"}