@kanso-labs/react-native-kanso-ui 0.4.0 → 0.6.0

package/dist/components/menu/index.js

@@ -0,0 +1,1283 @@
+import { useTheme } from "../../theme/scope.js";
+import { composeStyles, themedStyles } from "../../theme/styles.js";
+import { usePressFeedback } from "../../press/index.js";
+import { useTypeRole } from "../../typography/roles.js";
+import { rowContentColor, rowStyles } from "../../row/styles.js";
+import { RowContent, rowStyleOf } from "../../row/index.js";
+import { CheckGlyph, ChevronEndGlyph } from "../../glyphs/index.js";
+import { refsOf } from "../../ref/index.js";
+import { useOpenLink } from "../../router/index.js";
+import { ButtonSlotContext } from "../../button/slots.js";
+import { ProgressIndicator } from "../progress-indicator/index.js";
+import { messagesFor } from "../../i18n/index.js";
+import { Overlay } from "../../overlay/host.js";
+import { useAnchoredPlacement } from "../../overlay/anchored.js";
+import { DismissLayer, PANEL_ORIGINS, useBackToClose, useFocusOnPlaced, usePanelMotion, useReturnFocus } from "../../overlay/panel.js";
+import { Separator } from "../separator/index.js";
+import { c } from "react/compiler-runtime";
+import { I18nManager, Platform, Pressable, ScrollView, StyleSheet, Text, View } from "react-native";
+import Animated from "react-native-reanimated";
+import { Children, createContext, use, useEffect, useId, useRef, useState } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+import { useMenuTriggerState, useSubmenuTriggerState } from "react-stately/useMenuTriggerState";
+import { useTreeState } from "react-stately/useTreeState";
+//#region src/components/menu/index.tsx
+const MENU_MIN = 112;
+const MENU_MAX = 280;
+const CHECK_SIZE = 24;
+const CHEVRON_SIZE = 20;
+const LOADING_DIAMETER = "20px";
+const HAS_SUBMENU = { "aria-haspopup": "menu" };
+const styles = StyleSheet.create({
+	scroll: { flexGrow: 0 },
+	sentinel: { height: 0 }
+});
+const stylesOf = themedStyles(({ colors, radii, shadows, sizing, spacing }) => StyleSheet.create({
+	content: { paddingVertical: spacing.sm },
+	empty: { color: colors.onSurfaceVariant },
+	header: {
+		color: colors.onSurfaceVariant,
+		paddingBottom: spacing.xxs,
+		paddingHorizontal: spacing.lg,
+		paddingTop: spacing.md
+	},
+	loading: {
+		alignItems: "center",
+		justifyContent: "center",
+		minHeight: sizing.rowXs
+	},
+	separator: { marginVertical: spacing.sm },
+	surface: {
+		backgroundColor: colors.surfaceContainerLow,
+		borderRadius: radii.xs,
+		boxShadow: shadows.elevation2,
+		maxWidth: MENU_MAX,
+		minWidth: MENU_MIN,
+		overflow: "hidden"
+	}
+}));
+const LevelContext = createContext(null);
+/**
+* A list of actions or choices opened from a control. Pass `isOpen` with
+* `onOpenChange` to hold the open state, or `defaultOpen` to let it keep its
+* own.
+*
+* ```tsx
+* <Menu>
+*   <Button variant="outlined">Open</Button>
+*   <Menu.Content>
+*     <Menu.Item id="first">First item</Menu.Item>
+*   </Menu.Content>
+* </Menu>
+* ```
+*
+* A `Button` or `IconButton` placed directly inside `Menu` is its trigger,
+* and a press on it toggles the menu. Everything the menu shows goes in
+* `Menu.Content`, since the trigger lives in the screen while the menu is
+* drawn above it.
+*/
+function Menu(t0) {
+	const $ = c(20);
+	const { children, defaultOpen, isOpen, onOpenChange, trigger: t1 } = t0;
+	const trigger = t1 === void 0 ? "press" : t1;
+	let t2;
+	if ($[0] !== defaultOpen || $[1] !== isOpen || $[2] !== onOpenChange || $[3] !== trigger) {
+		t2 = {
+			defaultOpen,
+			isOpen,
+			onOpenChange,
+			trigger
+		};
+		$[0] = defaultOpen;
+		$[1] = isOpen;
+		$[2] = onOpenChange;
+		$[3] = trigger;
+		$[4] = t2;
+	} else t2 = $[4];
+	const state = useMenuTriggerState(t2);
+	const anchor = useRef(null);
+	const openLink = useOpenLink();
+	let t3;
+	if ($[5] !== state) {
+		t3 = () => {
+			state.close();
+		};
+		$[5] = state;
+		$[6] = t3;
+	} else t3 = $[6];
+	const close = useLatest(t3);
+	let t4;
+	if ($[7] !== state || $[8] !== trigger) {
+		t4 = trigger === "longPress" ? { trigger: {
+			expanded: state.isOpen,
+			onLongPress: () => {
+				state.open();
+			},
+			ref: anchor
+		} } : {
+			default: () => {
+				state.toggle();
+			},
+			trigger: {
+				expanded: state.isOpen,
+				ref: anchor
+			}
+		};
+		$[7] = state;
+		$[8] = trigger;
+		$[9] = t4;
+	} else t4 = $[9];
+	const slots = t4;
+	let t5;
+	if ($[10] !== close || $[11] !== openLink || $[12] !== state) {
+		t5 = {
+			anchor,
+			close,
+			isOpen: state.isOpen,
+			openLink,
+			root: state,
+			submenu: false
+		};
+		$[10] = close;
+		$[11] = openLink;
+		$[12] = state;
+		$[13] = t5;
+	} else t5 = $[13];
+	const level = t5;
+	let t6;
+	if ($[14] !== children || $[15] !== slots) {
+		t6 = /* @__PURE__ */ jsx(ButtonSlotContext, {
+			value: slots,
+			children
+		});
+		$[14] = children;
+		$[15] = slots;
+		$[16] = t6;
+	} else t6 = $[16];
+	let t7;
+	if ($[17] !== level || $[18] !== t6) {
+		t7 = /* @__PURE__ */ jsx(LevelContext, {
+			value: level,
+			children: t6
+		});
+		$[17] = level;
+		$[18] = t6;
+		$[19] = t7;
+	} else t7 = $[19];
+	return t7;
+}
+/**
+* The menu itself, and the surface it is drawn on. Its items scroll when they
+* run past the room the window leaves on the side it opened on.
+*
+* A menu with nothing in it shows a muted "No results" row in place of its
+* items; pass `renderEmptyState` to draw something else.
+*
+* `style`, `ref` and `testID` land on the surface.
+*/
+function MenuContent(props) {
+	const $ = c(3);
+	const level = use(LevelContext);
+	if (level === null) throw new Error("Menu.Content is drawn inside Menu or Menu.Submenu.");
+	const { anchor, isOpen } = level;
+	const [present, setPresent] = useState(isOpen);
+	if (isOpen && !present) setPresent(true);
+	useReturnFocus(present, false, anchor);
+	if (!present) return null;
+	let t0;
+	if ($[0] !== level || $[1] !== props) {
+		t0 = /* @__PURE__ */ jsx(Overlay, { children: /* @__PURE__ */ jsx(MenuPanel, {
+			...props,
+			level,
+			setPresent
+		}) });
+		$[0] = level;
+		$[1] = props;
+		$[2] = t0;
+	} else t0 = $[2];
+	return t0;
+}
+/**
+* One action or choice. Its slots are the row's: `leading` before the label,
+* the label as children, and `trailing` after it. A selected item draws the
+* check, in place of `leading` where it has one and at the end of the row
+* where it has none, so choosing an item moves nothing in the menu. An item
+* that opens a submenu draws the chevron itself.
+*
+* The menu draws it from its entry in the collection, so it renders nothing
+* on its own. `style`, `ref` and `testID` land on the row.
+*/
+function MenuItem(_props) {
+	return null;
+}
+MenuItem.getCollectionNode = function* getCollectionNode(props) {
+	yield {
+		"aria-label": props["aria-label"],
+		hasChildNodes: false,
+		key: props.id,
+		props,
+		rendered: props.children,
+		textValue: props.textValue ?? (typeof props.children === "string" ? props.children : ""),
+		type: "item"
+	};
+};
+/**
+* The row shown while more items are being fetched. `onLoadMore` is called
+* when it comes near the visible end of the menu, and the ring is drawn only
+* while `isLoading`. It goes last, after the items it loads more of.
+*/
+function MenuLoadMore(_props) {
+	return null;
+}
+MenuLoadMore.getCollectionNode = function* getCollectionNode(props) {
+	yield {
+		hasChildNodes: false,
+		props,
+		rendered: null,
+		type: "loader"
+	};
+};
+/**
+* A named group of items. `header` names it, and is what a screen reader
+* reads before the items inside.
+*/
+function MenuSection(_props) {
+	return null;
+}
+MenuSection.getCollectionNode = function* getCollectionNode(props) {
+	const children = [];
+	Children.forEach(props.children, (child) => {
+		if (child !== null && child !== void 0 && child !== false) children.push(child);
+	});
+	yield {
+		"aria-label": props["aria-label"],
+		*childNodes() {
+			for (const element of children) yield { element };
+		},
+		hasChildNodes: true,
+		key: props.id,
+		props,
+		rendered: props.header,
+		type: "section"
+	};
+};
+/** A rule between groups of items, with the menus page's 8dp either side. */
+function MenuSeparator(_props) {
+	return null;
+}
+MenuSeparator.getCollectionNode = function* getCollectionNode(props) {
+	yield {
+		hasChildNodes: false,
+		props,
+		rendered: null,
+		type: "separator"
+	};
+};
+/**
+* An item that opens a menu of its own. Takes exactly two children: the
+* `Menu.Item` that opens it, then the `Menu.Content` it opens. A press on
+* the item opens it, and a second press closes it.
+*/
+function MenuSubmenu(_props) {
+	return null;
+}
+MenuSubmenu.getCollectionNode = function* getCollectionNode(props) {
+	const [trigger, content] = props.children;
+	yield* MenuItem.getCollectionNode({
+		...trigger.props,
+		submenu: content
+	});
+};
+/** Runs a press on an item, from its entry. Built by a call, as below. */
+function activationOf(panel, node) {
+	return () => {
+		panel.activate(node);
+	};
+}
+/**
+* The muted row a menu shows when nothing is in it: an item's box and label
+* in on surface variant, with no press of its own.
+*/
+function EmptyRow() {
+	const $ = c(10);
+	const theme = useTheme();
+	const own = stylesOf(theme);
+	const label = useTypeRole("labelLarge");
+	const T0 = View;
+	let t0;
+	if ($[0] !== theme) {
+		t0 = rowStyleOf(theme, { variant: "menu" });
+		$[0] = theme;
+		$[1] = t0;
+	} else t0 = $[1];
+	const T1 = Text;
+	const t1 = composeStyles(label, own.empty);
+	let t2;
+	if ($[2] === Symbol.for("react.memo_cache_sentinel")) {
+		t2 = messagesFor();
+		$[2] = t2;
+	} else t2 = $[2];
+	let t3;
+	if ($[3] !== T1 || $[4] !== t1) {
+		t3 = /* @__PURE__ */ jsx(T1, {
+			style: t1,
+			children: t2.noResults
+		});
+		$[3] = T1;
+		$[4] = t1;
+		$[5] = t3;
+	} else t3 = $[5];
+	let t4;
+	if ($[6] !== T0 || $[7] !== t0 || $[8] !== t3) {
+		t4 = /* @__PURE__ */ jsx(T0, {
+			style: t0,
+			children: t3
+		});
+		$[6] = T0;
+		$[7] = t0;
+		$[8] = t3;
+		$[9] = t4;
+	} else t4 = $[9];
+	return t4;
+}
+function emptyState() {
+	return /* @__PURE__ */ jsx(EmptyRow, {});
+}
+/** The first item a press reaches, which a screen reader is sent to. */
+function firstItemKey(state) {
+	for (const key of state.collection.getKeys()) if (state.collection.getItem(key)?.type === "item" && !state.selectionManager.isDisabled(key)) return key;
+	return null;
+}
+/**
+* The role a row reports. React Native's roles stop at `menuitem`, which iOS
+* and Android read with the checked state beside it. Web's checkable items
+* are roles of their own, which React Native Web writes from
+* `accessibilityRole`, typed as any string.
+*/
+function itemRoleOf(mode) {
+	if (Platform.OS !== "web" || mode === "none") return { role: "menuitem" };
+	return { accessibilityRole: mode === "single" ? "menuitemradio" : "menuitemcheckbox" };
+}
+/**
+* The row `Menu.LoadMore` draws: nothing while idle, and the ring while
+* loading. Each time it is laid out, and each time the menu scrolls, it asks
+* whether it has come within `scrollOffset` of the visible end, and calls
+* `onLoadMore` once for each place it is found there, so a load that adds
+* nothing does not start another.
+*/
+function LoaderRow(t0) {
+	const $ = c(32);
+	const { props, viewport } = t0;
+	const own = stylesOf(useTheme());
+	const { isLoading: t1, label, onLoadMore, scrollOffset: t2, style, testID } = props;
+	const isLoading = t1 === void 0 ? false : t1;
+	const scrollOffset = t2 === void 0 ? 1 : t2;
+	const top = useRef(null);
+	const loadedAt = useRef(null);
+	let t3;
+	if ($[0] !== isLoading || $[1] !== onLoadMore || $[2] !== scrollOffset) {
+		t3 = {
+			isLoading,
+			onLoadMore,
+			scrollOffset
+		};
+		$[0] = isLoading;
+		$[1] = onLoadMore;
+		$[2] = scrollOffset;
+		$[3] = t3;
+	} else t3 = $[3];
+	const latest = useRef(t3);
+	let t4;
+	if ($[4] !== isLoading || $[5] !== onLoadMore || $[6] !== scrollOffset) {
+		t4 = () => {
+			latest.current = {
+				isLoading,
+				onLoadMore,
+				scrollOffset
+			};
+		};
+		$[4] = isLoading;
+		$[5] = onLoadMore;
+		$[6] = scrollOffset;
+		$[7] = t4;
+	} else t4 = $[7];
+	useEffect(t4);
+	let t5;
+	if ($[8] !== viewport) {
+		t5 = () => {
+			const y = top.current;
+			const { height, offset } = viewport.read();
+			const now = latest.current;
+			if (y === null || height === 0 || now.isLoading || now.onLoadMore === void 0 || loadedAt.current === y || y > offset + height * (1 + now.scrollOffset)) return;
+			loadedAt.current = y;
+			now.onLoadMore();
+		};
+		$[8] = viewport;
+		$[9] = t5;
+	} else t5 = $[9];
+	const check = t5;
+	let t6;
+	let t7;
+	if ($[10] !== check || $[11] !== viewport) {
+		t6 = () => viewport.subscribe(check);
+		t7 = [check, viewport];
+		$[10] = check;
+		$[11] = viewport;
+		$[12] = t6;
+		$[13] = t7;
+	} else {
+		t6 = $[12];
+		t7 = $[13];
+	}
+	useEffect(t6, t7);
+	let t8;
+	if ($[14] !== check) {
+		t8 = (event) => {
+			top.current = event.nativeEvent.layout.y;
+			check();
+		};
+		$[14] = check;
+		$[15] = t8;
+	} else t8 = $[15];
+	const onLayout = t8;
+	if (!isLoading) {
+		let t9;
+		if ($[16] !== style) {
+			t9 = composeStyles(styles.sentinel, style);
+			$[16] = style;
+			$[17] = t9;
+		} else t9 = $[17];
+		let t10;
+		if ($[18] !== onLayout || $[19] !== t9 || $[20] !== testID) {
+			t10 = /* @__PURE__ */ jsx(View, {
+				onLayout,
+				style: t9,
+				testID
+			});
+			$[18] = onLayout;
+			$[19] = t9;
+			$[20] = testID;
+			$[21] = t10;
+		} else t10 = $[21];
+		return t10;
+	}
+	const T0 = View;
+	const t9 = "menuitem";
+	const t10 = composeStyles(own.loading, style);
+	let t11;
+	if ($[22] !== label) {
+		t11 = label ?? messagesFor().loadingMore;
+		$[22] = label;
+		$[23] = t11;
+	} else t11 = $[23];
+	let t12;
+	if ($[24] !== t11) {
+		t12 = /* @__PURE__ */ jsx(ProgressIndicator, {
+			"aria-label": t11,
+			diameter: LOADING_DIAMETER,
+			isIndeterminate: true,
+			variant: "circular"
+		});
+		$[24] = t11;
+		$[25] = t12;
+	} else t12 = $[25];
+	let t13;
+	if ($[26] !== T0 || $[27] !== onLayout || $[28] !== t10 || $[29] !== t12 || $[30] !== testID) {
+		t13 = /* @__PURE__ */ jsx(T0, {
+			onLayout,
+			role: t9,
+			style: t10,
+			testID,
+			children: t12
+		});
+		$[26] = T0;
+		$[27] = onLayout;
+		$[28] = t10;
+		$[29] = t12;
+		$[30] = testID;
+		$[31] = t13;
+	} else t13 = $[31];
+	return t13;
+}
+function MenuNode(t0) {
+	const $ = c(10);
+	const { node, panel } = t0;
+	const own = stylesOf(useTheme());
+	switch (node.type) {
+		case "loader": {
+			const props_0 = node.props;
+			let t1;
+			if ($[0] !== panel.viewport || $[1] !== props_0) {
+				t1 = /* @__PURE__ */ jsx(LoaderRow, {
+					props: props_0,
+					viewport: panel.viewport
+				});
+				$[0] = panel.viewport;
+				$[1] = props_0;
+				$[2] = t1;
+			} else t1 = $[2];
+			return t1;
+		}
+		case "section": {
+			let t1;
+			if ($[3] !== node || $[4] !== panel) {
+				t1 = /* @__PURE__ */ jsx(SectionNode, {
+					node,
+					panel
+				});
+				$[3] = node;
+				$[4] = panel;
+				$[5] = t1;
+			} else t1 = $[5];
+			return t1;
+		}
+		case "separator": {
+			const { style, testID } = node.props;
+			return /* @__PURE__ */ jsx(Separator, {
+				style: composeStyles(own.separator, style),
+				testID
+			});
+		}
+		default: {
+			const props = node.props;
+			let t1;
+			if ($[6] !== node || $[7] !== panel || $[8] !== props.submenu) {
+				t1 = props.submenu === void 0 ? /* @__PURE__ */ jsx(MenuRow, {
+					node,
+					onActivate: activationOf(panel, node),
+					panel
+				}) : /* @__PURE__ */ jsx(SubmenuRow, {
+					content: props.submenu,
+					node,
+					panel
+				});
+				$[6] = node;
+				$[7] = panel;
+				$[8] = props.submenu;
+				$[9] = t1;
+			} else t1 = $[9];
+			return t1;
+		}
+	}
+}
+function MenuPanel(t0) {
+	const $ = c(79);
+	let alignOffset;
+	let children;
+	let defaultSelectedKeys;
+	let disabledKeys;
+	let disallowEmptySelection;
+	let items;
+	let level;
+	let onAction;
+	let onClose;
+	let onSelectionChange;
+	let props;
+	let ref;
+	let selectedKeys;
+	let setPresent;
+	let shouldCloseOnSelect;
+	let side;
+	let sideOffset;
+	let style;
+	let t1;
+	let t2;
+	let t3;
+	if ($[0] !== t0) {
+		({align: t1, alignOffset, children, defaultSelectedKeys, disabledKeys, disallowEmptySelection, items, level, onAction, onClose, onSelectionChange, ref, renderEmptyState: t2, selectedKeys, selectionMode: t3, setPresent, shouldCloseOnSelect, side, sideOffset, style, ...props} = t0);
+		$[0] = t0;
+		$[1] = alignOffset;
+		$[2] = children;
+		$[3] = defaultSelectedKeys;
+		$[4] = disabledKeys;
+		$[5] = disallowEmptySelection;
+		$[6] = items;
+		$[7] = level;
+		$[8] = onAction;
+		$[9] = onClose;
+		$[10] = onSelectionChange;
+		$[11] = props;
+		$[12] = ref;
+		$[13] = selectedKeys;
+		$[14] = setPresent;
+		$[15] = shouldCloseOnSelect;
+		$[16] = side;
+		$[17] = sideOffset;
+		$[18] = style;
+		$[19] = t1;
+		$[20] = t2;
+		$[21] = t3;
+	} else {
+		alignOffset = $[1];
+		children = $[2];
+		defaultSelectedKeys = $[3];
+		disabledKeys = $[4];
+		disallowEmptySelection = $[5];
+		items = $[6];
+		level = $[7];
+		onAction = $[8];
+		onClose = $[9];
+		onSelectionChange = $[10];
+		props = $[11];
+		ref = $[12];
+		selectedKeys = $[13];
+		setPresent = $[14];
+		shouldCloseOnSelect = $[15];
+		side = $[16];
+		sideOffset = $[17];
+		style = $[18];
+		t1 = $[19];
+		t2 = $[20];
+		t3 = $[21];
+	}
+	const align = t1 === void 0 ? "start" : t1;
+	const renderEmptyState = t2 === void 0 ? emptyState : t2;
+	const selectionMode = t3 === void 0 ? "none" : t3;
+	const theme = useTheme();
+	const own = stylesOf(theme);
+	const { anchor, close, isOpen, openLink, root, submenu } = level;
+	const t4 = children;
+	let t5;
+	if ($[22] !== defaultSelectedKeys || $[23] !== disabledKeys || $[24] !== disallowEmptySelection || $[25] !== items || $[26] !== onSelectionChange || $[27] !== selectedKeys || $[28] !== selectionMode || $[29] !== t4) {
+		t5 = {
+			children: t4,
+			defaultSelectedKeys,
+			disabledKeys,
+			disallowEmptySelection,
+			items,
+			onSelectionChange,
+			selectedKeys,
+			selectionMode
+		};
+		$[22] = defaultSelectedKeys;
+		$[23] = disabledKeys;
+		$[24] = disallowEmptySelection;
+		$[25] = items;
+		$[26] = onSelectionChange;
+		$[27] = selectedKeys;
+		$[28] = selectionMode;
+		$[29] = t4;
+		$[30] = t5;
+	} else t5 = $[30];
+	const state = useTreeState(t5);
+	const t6 = alignOffset ?? (submenu ? -theme.spacing.sm : void 0);
+	const t7 = side ?? (submenu ? I18nManager.isRTL ? "left" : "right" : "bottom");
+	const t8 = sideOffset ?? (submenu ? 0 : void 0);
+	let t9;
+	if ($[31] !== align || $[32] !== anchor || $[33] !== t6 || $[34] !== t7 || $[35] !== t8) {
+		t9 = {
+			align,
+			alignOffset: t6,
+			anchor,
+			side: t7,
+			sideOffset: t8
+		};
+		$[31] = align;
+		$[32] = anchor;
+		$[33] = t6;
+		$[34] = t7;
+		$[35] = t8;
+		$[36] = t9;
+	} else t9 = $[36];
+	const placement = useAnchoredPlacement(t9);
+	const motion = usePanelMotion(isOpen, placement.placed, setPresent);
+	const [focusTarget, setFocusTarget] = useState(null);
+	const scroll = useViewport();
+	let t10;
+	if ($[37] !== state) {
+		t10 = firstItemKey(state);
+		$[37] = state;
+		$[38] = t10;
+	} else t10 = $[38];
+	const focusKey = t10;
+	useBackToClose(close, isOpen);
+	useFocusOnPlaced(placement.placed, focusTarget);
+	let t11;
+	if ($[39] !== onAction || $[40] !== onClose || $[41] !== openLink || $[42] !== root || $[43] !== selectionMode || $[44] !== shouldCloseOnSelect || $[45] !== state.selectionManager) {
+		t11 = (node) => {
+			const item = node.props;
+			const closes = shouldCloseOnSelect ?? (selectionMode !== "multiple" || item.href !== void 0);
+			if (selectionMode !== "none") state.selectionManager.select(node.key);
+			if (item.onAction === void 0) onAction?.(node.key);
+			else item.onAction();
+			if (item.href !== void 0) openLink(item.href);
+			if (closes) {
+				onClose?.();
+				root.close();
+			}
+		};
+		$[39] = onAction;
+		$[40] = onClose;
+		$[41] = openLink;
+		$[42] = root;
+		$[43] = selectionMode;
+		$[44] = shouldCloseOnSelect;
+		$[45] = state.selectionManager;
+		$[46] = t11;
+	} else t11 = $[46];
+	const activate = t11;
+	let t12;
+	if ($[47] !== activate || $[48] !== focusKey || $[49] !== level || $[50] !== scroll.viewport || $[51] !== state) {
+		t12 = {
+			activate,
+			focusKey,
+			level,
+			setFocusTarget,
+			state,
+			viewport: scroll.viewport
+		};
+		$[47] = activate;
+		$[48] = focusKey;
+		$[49] = level;
+		$[50] = scroll.viewport;
+		$[51] = state;
+		$[52] = t12;
+	} else t12 = $[52];
+	const panel = t12;
+	let t13;
+	if ($[53] !== state.collection) {
+		t13 = [...state.collection];
+		$[53] = state.collection;
+		$[54] = t13;
+	} else t13 = $[54];
+	const nodes = t13;
+	let t14;
+	if ($[55] !== close || $[56] !== isOpen || $[57] !== submenu) {
+		t14 = submenu || !isOpen ? null : /* @__PURE__ */ jsx(DismissLayer, { onPress: close });
+		$[55] = close;
+		$[56] = isOpen;
+		$[57] = submenu;
+		$[58] = t14;
+	} else t14 = $[58];
+	const t15 = Animated;
+	const t16 = "menu";
+	const t17 = placement.onLayout;
+	const t18 = composeStyles(own.surface, placement.style, { transformOrigin: PANEL_ORIGINS[placement.side] }, motion, style);
+	let t19;
+	if ($[59] !== nodes || $[60] !== panel || $[61] !== renderEmptyState) {
+		t19 = nodes.length === 0 ? /* @__PURE__ */ jsx(View, {
+			role: "menuitem",
+			children: renderEmptyState()
+		}) : nodes.map((node_0) => /* @__PURE__ */ jsx(MenuNode, {
+			node: node_0,
+			panel
+		}, node_0.key));
+		$[59] = nodes;
+		$[60] = panel;
+		$[61] = renderEmptyState;
+		$[62] = t19;
+	} else t19 = $[62];
+	let t20;
+	if ($[63] !== own.content || $[64] !== scroll.onLayout || $[65] !== scroll.onScroll || $[66] !== t19) {
+		t20 = /* @__PURE__ */ jsx(ScrollView, {
+			contentContainerStyle: own.content,
+			onLayout: scroll.onLayout,
+			onScroll: scroll.onScroll,
+			scrollEventThrottle: 16,
+			style: styles.scroll,
+			children: t19
+		});
+		$[63] = own.content;
+		$[64] = scroll.onLayout;
+		$[65] = scroll.onScroll;
+		$[66] = t19;
+		$[67] = t20;
+	} else t20 = $[67];
+	let t21;
+	if ($[68] !== close || $[69] !== placement.onLayout || $[70] !== props || $[71] !== ref || $[72] !== t15.View || $[73] !== t18 || $[74] !== t20) {
+		t21 = /* @__PURE__ */ jsx(t15.View, {
+			onAccessibilityEscape: close,
+			role: t16,
+			...props,
+			onLayout: t17,
+			ref,
+			style: t18,
+			children: t20
+		});
+		$[68] = close;
+		$[69] = placement.onLayout;
+		$[70] = props;
+		$[71] = ref;
+		$[72] = t15.View;
+		$[73] = t18;
+		$[74] = t20;
+		$[75] = t21;
+	} else t21 = $[75];
+	let t22;
+	if ($[76] !== t14 || $[77] !== t21) {
+		t22 = /* @__PURE__ */ jsxs(Fragment$1, { children: [t14, t21] });
+		$[76] = t14;
+		$[77] = t21;
+		$[78] = t22;
+	} else t22 = $[78];
+	return t22;
+}
+/**
+* An item's row: the state layer, the ripple and the focus ring over the
+* leading slot, the label and the trailing slot, on tertiary container while
+* selected.
+*/
+function MenuRow(t0) {
+	const $ = c(46);
+	const { anchor, expanded, node, onActivate, panel } = t0;
+	const theme = useTheme();
+	let children;
+	let leading;
+	let onBlur;
+	let onFocus;
+	let onHoverIn;
+	let onHoverOut;
+	let onPress;
+	let onPressIn;
+	let onPressOut;
+	let props;
+	let ref;
+	let style;
+	let submenu;
+	let trailing;
+	if ($[0] !== node.props) {
+		const { children: t1, href: _href, id: _id, isDisabled: _isDisabled, leading: t2, onAction: _onAction, onBlur: t3, onFocus: t4, onHoverIn: t5, onHoverOut: t6, onPress: t7, onPressIn: t8, onPressOut: t9, ref: t10, style: t11, submenu: t12, textValue: _textValue, trailing: t13, ...t14 } = node.props;
+		children = t1;
+		leading = t2;
+		onBlur = t3;
+		onFocus = t4;
+		onHoverIn = t5;
+		onHoverOut = t6;
+		onPress = t7;
+		onPressIn = t8;
+		onPressOut = t9;
+		ref = t10;
+		style = t11;
+		submenu = t12;
+		trailing = t13;
+		props = t14;
+		$[0] = node.props;
+		$[1] = children;
+		$[2] = leading;
+		$[3] = onBlur;
+		$[4] = onFocus;
+		$[5] = onHoverIn;
+		$[6] = onHoverOut;
+		$[7] = onPress;
+		$[8] = onPressIn;
+		$[9] = onPressOut;
+		$[10] = props;
+		$[11] = ref;
+		$[12] = style;
+		$[13] = submenu;
+		$[14] = trailing;
+	} else {
+		children = $[1];
+		leading = $[2];
+		onBlur = $[3];
+		onFocus = $[4];
+		onHoverIn = $[5];
+		onHoverOut = $[6];
+		onPress = $[7];
+		onPressIn = $[8];
+		onPressOut = $[9];
+		props = $[10];
+		ref = $[11];
+		style = $[12];
+		submenu = $[13];
+		trailing = $[14];
+	}
+	const { selectionManager } = panel.state;
+	const disabled = selectionManager.isDisabled(node.key);
+	const selectable = selectionManager.selectionMode !== "none";
+	const selected = selectable && selectionManager.isSelected(node.key);
+	const content = rowContentColor(theme, {
+		isDisabled: disabled,
+		isSelected: selected,
+		variant: "menu"
+	});
+	const feedback = usePressFeedback({
+		color: content,
+		disabled,
+		onBlur,
+		onFocus,
+		onHoverIn,
+		onHoverOut,
+		onPressIn,
+		onPressOut
+	});
+	const hasLeading = leading !== void 0 && leading !== null;
+	const check = selected ? /* @__PURE__ */ jsx(CheckGlyph, {
+		color: content,
+		size: CHECK_SIZE
+	}) : null;
+	const lead = hasLeading ? check ?? leading : null;
+	const end = submenu === void 0 ? /* @__PURE__ */ jsxs(Fragment$1, { children: [trailing, hasLeading ? null : check] }) : /* @__PURE__ */ jsxs(Fragment$1, { children: [trailing, /* @__PURE__ */ jsx(ChevronEndGlyph, {
+		color: content,
+		size: CHEVRON_SIZE
+	})] });
+	const hasEnd = submenu !== void 0 || trailing !== void 0 && trailing !== null || !hasLeading && check !== null;
+	const T0 = Pressable;
+	let t1;
+	if ($[15] !== selectionManager.selectionMode) {
+		t1 = itemRoleOf(selectionManager.selectionMode);
+		$[15] = selectionManager.selectionMode;
+		$[16] = t1;
+	} else t1 = $[16];
+	const t2 = selectable ? { "aria-checked": selected } : void 0;
+	let t3;
+	if ($[17] !== expanded || $[18] !== submenu) {
+		t3 = submenu === void 0 ? void 0 : {
+			...HAS_SUBMENU,
+			"aria-expanded": expanded
+		};
+		$[17] = expanded;
+		$[18] = submenu;
+		$[19] = t3;
+	} else t3 = $[19];
+	const t4 = feedback.handlers;
+	let t5;
+	if ($[20] !== onActivate || $[21] !== onPress) {
+		t5 = pressThen(onPress, onActivate);
+		$[20] = onActivate;
+		$[21] = onPress;
+		$[22] = t5;
+	} else t5 = $[22];
+	const t6 = node.key === panel.focusKey ? panel.setFocusTarget : void 0;
+	let t7;
+	if ($[23] !== anchor || $[24] !== ref || $[25] !== t6) {
+		t7 = refsOf(anchor, t6, ref);
+		$[23] = anchor;
+		$[24] = ref;
+		$[25] = t6;
+		$[26] = t7;
+	} else t7 = $[26];
+	const t8 = composeStyles(rowStyleOf(theme, {
+		isSelected: selected,
+		variant: "menu"
+	}), feedback.ring, feedback.ring === void 0 ? void 0 : rowStyles.ring, style);
+	const t9 = hasEnd ? end : void 0;
+	let t10;
+	if ($[27] !== children || $[28] !== disabled || $[29] !== lead || $[30] !== selected || $[31] !== t9) {
+		t10 = /* @__PURE__ */ jsx(RowContent, {
+			isDisabled: disabled,
+			isSelected: selected,
+			leading: lead,
+			trailing: t9,
+			variant: "menu",
+			children
+		});
+		$[27] = children;
+		$[28] = disabled;
+		$[29] = lead;
+		$[30] = selected;
+		$[31] = t9;
+		$[32] = t10;
+	} else t10 = $[32];
+	let t11;
+	if ($[33] !== T0 || $[34] !== disabled || $[35] !== feedback.handlers || $[36] !== feedback.layer || $[37] !== props || $[38] !== t1 || $[39] !== t10 || $[40] !== t2 || $[41] !== t3 || $[42] !== t5 || $[43] !== t7 || $[44] !== t8) {
+		t11 = /* @__PURE__ */ jsxs(T0, {
+			...t1,
+			...t2,
+			...t3,
+			...props,
+			...t4,
+			disabled,
+			onPress: t5,
+			ref: t7,
+			style: t8,
+			children: [feedback.layer, t10]
+		});
+		$[33] = T0;
+		$[34] = disabled;
+		$[35] = feedback.handlers;
+		$[36] = feedback.layer;
+		$[37] = props;
+		$[38] = t1;
+		$[39] = t10;
+		$[40] = t2;
+		$[41] = t3;
+		$[42] = t5;
+		$[43] = t7;
+		$[44] = t8;
+		$[45] = t11;
+	} else t11 = $[45];
+	return t11;
+}
+/**
+* The press handler of a row: the call site's own `onPress`, then the row's
+* activation. Built by a call rather than written inline at the prop, which
+* is what react-perf's no-new-function-as-prop is after.
+*/
+function pressThen(onPress, onActivate) {
+	return (event) => {
+		onPress?.(event);
+		onActivate();
+	};
+}
+/** A section: its heading, then its items, as a group named by the heading. */
+function SectionNode(t0) {
+	const $ = c(15);
+	const { node, panel } = t0;
+	const own = stylesOf(useTheme());
+	const titleRole = useTypeRole("titleSmall");
+	const id = useId();
+	const header = node.rendered;
+	const named = header !== void 0 && header !== null;
+	let t1;
+	if ($[0] !== node.childNodes || $[1] !== node.key || $[2] !== panel.state.collection) {
+		t1 = panel.state.collection.getChildren?.(node.key) ?? node.childNodes;
+		$[0] = node.childNodes;
+		$[1] = node.key;
+		$[2] = panel.state.collection;
+		$[3] = t1;
+	} else t1 = $[3];
+	const children = t1;
+	const T0 = View;
+	const t2 = named ? void 0 : node["aria-label"];
+	const t3 = named ? id : void 0;
+	const t4 = "group";
+	const t5 = named ? /* @__PURE__ */ jsx(Text, {
+		nativeID: id,
+		style: composeStyles(titleRole, own.header),
+		children: header
+	}) : null;
+	let t6;
+	if ($[4] !== children) {
+		t6 = [...children];
+		$[4] = children;
+		$[5] = t6;
+	} else t6 = $[5];
+	let t7;
+	if ($[6] !== panel || $[7] !== t6) {
+		t7 = t6.map((child) => /* @__PURE__ */ jsx(MenuNode, {
+			node: child,
+			panel
+		}, child.key));
+		$[6] = panel;
+		$[7] = t6;
+		$[8] = t7;
+	} else t7 = $[8];
+	let t8;
+	if ($[9] !== T0 || $[10] !== t2 || $[11] !== t3 || $[12] !== t5 || $[13] !== t7) {
+		t8 = /* @__PURE__ */ jsxs(T0, {
+			"aria-label": t2,
+			"aria-labelledby": t3,
+			role: t4,
+			children: [t5, t7]
+		});
+		$[9] = T0;
+		$[10] = t2;
+		$[11] = t3;
+		$[12] = t5;
+		$[13] = t7;
+		$[14] = t8;
+	} else t8 = $[14];
+	return t8;
+}
+/**
+* An item that opens a submenu: its row, and the submenu's content, drawn
+* under the submenu's own level so it opens beside the row and closes on its
+* own. A press on the row toggles it.
+*/
+function SubmenuRow(t0) {
+	const $ = c(22);
+	const { content, node, panel } = t0;
+	const { openLink, root } = panel.level;
+	const anchor = useRef(null);
+	let t1;
+	if ($[0] !== node.key) {
+		t1 = { triggerKey: node.key };
+		$[0] = node.key;
+		$[1] = t1;
+	} else t1 = $[1];
+	const submenuState = useSubmenuTriggerState(t1, root);
+	let t2;
+	if ($[2] !== submenuState) {
+		t2 = () => {
+			submenuState.close();
+		};
+		$[2] = submenuState;
+		$[3] = t2;
+	} else t2 = $[3];
+	const close = useLatest(t2);
+	let t3;
+	if ($[4] !== submenuState) {
+		t3 = () => {
+			submenuState.toggle();
+		};
+		$[4] = submenuState;
+		$[5] = t3;
+	} else t3 = $[5];
+	const toggle = t3;
+	let t4;
+	if ($[6] !== close || $[7] !== openLink || $[8] !== root || $[9] !== submenuState.isOpen) {
+		t4 = {
+			anchor,
+			close,
+			isOpen: submenuState.isOpen,
+			openLink,
+			root,
+			submenu: true
+		};
+		$[6] = close;
+		$[7] = openLink;
+		$[8] = root;
+		$[9] = submenuState.isOpen;
+		$[10] = t4;
+	} else t4 = $[10];
+	const level = t4;
+	let t5;
+	if ($[11] !== node || $[12] !== panel || $[13] !== submenuState.isOpen || $[14] !== toggle) {
+		t5 = /* @__PURE__ */ jsx(MenuRow, {
+			anchor,
+			expanded: submenuState.isOpen,
+			node,
+			onActivate: toggle,
+			panel
+		});
+		$[11] = node;
+		$[12] = panel;
+		$[13] = submenuState.isOpen;
+		$[14] = toggle;
+		$[15] = t5;
+	} else t5 = $[15];
+	let t6;
+	if ($[16] !== content || $[17] !== level) {
+		t6 = /* @__PURE__ */ jsx(LevelContext, {
+			value: level,
+			children: content
+		});
+		$[16] = content;
+		$[17] = level;
+		$[18] = t6;
+	} else t6 = $[18];
+	let t7;
+	if ($[19] !== t5 || $[20] !== t6) {
+		t7 = /* @__PURE__ */ jsxs(Fragment$1, { children: [t5, t6] });
+		$[19] = t5;
+		$[20] = t6;
+		$[21] = t7;
+	} else t7 = $[21];
+	return t7;
+}
+/**
+* A callback of one identity for the life of the component, which calls the
+* latest `callback` it was rendered with. A menu's state is a new object on
+* every render, and the back gesture's listener is added again whenever the
+* callback it closes through changes: added again after a submenu's, the
+* menu's own would be the one Android calls first, and the gesture would
+* close the whole menu rather than the submenu.
+*/
+function useLatest(callback) {
+	const $ = c(3);
+	const latest = useRef(callback);
+	let t0;
+	if ($[0] !== callback) {
+		t0 = () => {
+			latest.current = callback;
+		};
+		$[0] = callback;
+		$[1] = t0;
+	} else t0 = $[1];
+	useEffect(t0);
+	let t1;
+	if ($[2] === Symbol.for("react.memo_cache_sentinel")) {
+		t1 = () => {
+			latest.current();
+		};
+		$[2] = t1;
+	} else t1 = $[2];
+	return t1;
+}
+/**
+* Keeps track of the part of the menu's scroll view in view, for
+* `Menu.LoadMore`, and tells it whenever that changes.
+*/
+function useViewport() {
+	const $ = c(13);
+	let t0;
+	if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+		t0 = {
+			height: 0,
+			offset: 0
+		};
+		$[0] = t0;
+	} else t0 = $[0];
+	const seen = useRef(t0);
+	const [listeners] = useState(_temp);
+	let t1;
+	if ($[1] === Symbol.for("react.memo_cache_sentinel")) {
+		t1 = () => seen.current;
+		$[1] = t1;
+	} else t1 = $[1];
+	let t2;
+	if ($[2] !== listeners) {
+		t2 = {
+			read: t1,
+			subscribe: (listener) => {
+				listeners.add(listener);
+				return () => {
+					listeners.delete(listener);
+				};
+			}
+		};
+		$[2] = listeners;
+		$[3] = t2;
+	} else t2 = $[3];
+	const viewport = t2;
+	let t3;
+	if ($[4] !== listeners) {
+		t3 = function notify() {
+			for (const listener_0 of listeners) listener_0();
+		};
+		$[4] = listeners;
+		$[5] = t3;
+	} else t3 = $[5];
+	const notify = t3;
+	let t4;
+	let t5;
+	if ($[6] !== notify) {
+		t4 = (event) => {
+			seen.current = {
+				...seen.current,
+				height: event.nativeEvent.layout.height
+			};
+			notify();
+		};
+		t5 = (event_0) => {
+			seen.current = {
+				...seen.current,
+				offset: event_0.nativeEvent.contentOffset.y
+			};
+			notify();
+		};
+		$[6] = notify;
+		$[7] = t4;
+		$[8] = t5;
+	} else {
+		t4 = $[7];
+		t5 = $[8];
+	}
+	let t6;
+	if ($[9] !== t4 || $[10] !== t5 || $[11] !== viewport) {
+		t6 = {
+			onLayout: t4,
+			onScroll: t5,
+			viewport
+		};
+		$[9] = t4;
+		$[10] = t5;
+		$[11] = viewport;
+		$[12] = t6;
+	} else t6 = $[12];
+	return t6;
+}
+function _temp() {
+	return /* @__PURE__ */ new Set();
+}
+Menu.Content = MenuContent;
+Menu.Item = MenuItem;
+Menu.LoadMore = MenuLoadMore;
+Menu.Section = MenuSection;
+Menu.Separator = MenuSeparator;
+Menu.Submenu = MenuSubmenu;
+//#endregion
+export { Menu, MenuContent, MenuItem, MenuLoadMore, MenuSection, MenuSeparator, MenuSubmenu };
+
+//# sourceMappingURL=index.js.map