@kanso-labs/react-native-kanso-ui 0.9.0 → 0.11.0

package/dist/collection/index.js

@@ -0,0 +1,1358 @@
+import { useTheme } from "../theme/scope.js";
+import { composeStyles, themedStyles } from "../theme/styles.js";
+import { hitSlop, usePressFeedback } from "../press/index.js";
+import { useTypeRole } from "../typography/roles.js";
+import { rowContentColor, rowStyles } from "../row/styles.js";
+import { RowContent, hasContent, rowStyleOf } from "../row/index.js";
+import { AutocompleteContext } from "../autocomplete/index.js";
+import { resultsFor } from "../i18n/index.js";
+import { useLocaleOf, useMessages } from "../i18n/provider.js";
+import { useOpenLink } from "../router/index.js";
+import { refsOf } from "../ref/index.js";
+import { toggleState } from "../button/index.js";
+import { ProgressIndicator } from "../components/progress-indicator/index.js";
+import { CheckboxBox } from "../control/checkbox-box.js";
+import { ExpandChevron } from "../disclosure/chevron.js";
+import { c } from "react/compiler-runtime";
+import { AccessibilityInfo, FlatList, Platform, Pressable, StyleSheet, Text, View } from "react-native";
+import { Children, createContext, use, useEffect, useRef, useState } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+import { useListState } from "react-stately/useListState";
+//#region src/collection/index.tsx
+const BOX_SLOT = 24;
+const LOADING_DIAMETER = "24px";
+const LOAD_OFFSET = 1;
+const INITIAL_ROWS = 10;
+const IDLE = {};
+const CURRENT_PAGE = { "aria-current": "page" };
+const styles = StyleSheet.create({
+	box: {
+		alignItems: "center",
+		height: BOX_SLOT,
+		justifyContent: "center",
+		width: BOX_SLOT
+	},
+	idle: { height: 0 },
+	status: {
+		height: 1,
+		overflow: "hidden",
+		pointerEvents: "none",
+		position: "absolute",
+		width: 1
+	}
+});
+const stylesOf = themedStyles(({ colors, radii, sizing, spacing }) => StyleSheet.create({
+	content: { paddingVertical: spacing.sm },
+	drawerHeader: {
+		color: colors.onSurfaceVariant,
+		paddingBottom: spacing.xxs,
+		paddingHorizontal: spacing.lg + spacing.md,
+		paddingTop: spacing.lg
+	},
+	empty: { color: colors.onSurfaceVariant },
+	header: {
+		color: colors.onSurfaceVariant,
+		paddingBottom: spacing.xxs,
+		paddingHorizontal: spacing.lg,
+		paddingTop: spacing.lg
+	},
+	lead: {
+		alignItems: "center",
+		flexDirection: "row",
+		gap: spacing.lg
+	},
+	list: { backgroundColor: colors.surface },
+	loading: {
+		alignItems: "center",
+		justifyContent: "center",
+		minHeight: sizing.rowSm
+	},
+	pill: { borderRadius: radii.pill },
+	status: { color: colors.onSurface }
+}));
+const CollectionContext = createContext(null);
+function accessibilityActionOf(actions) {
+	return (event) => {
+		switch (event.nativeEvent.actionName) {
+			case "collapse":
+				actions.collapse?.();
+				break;
+			case "expand":
+				actions.expand?.();
+				break;
+			case "select": actions.select?.();
+		}
+	};
+}
+/**
+* The parts nested in a part, a Section's rows or a Tree row's, walked as
+* React Stately's own Section walks them, which leaves each child its own
+* key rather than the one `Children.toArray` gives it. A condition left
+* false is no part: React hands a boolean or an undefined child over as
+* null.
+*/
+function childElementsOf(children) {
+	const elements = [];
+	Children.forEach(children, (child) => {
+		if (child !== null) elements.push(child);
+	});
+	return elements;
+}
+/**
+* The `FlatList` List and ListBox draw, from parts read off its children by
+* React Stately's list state. Inside an `Autocomplete`, it shows the rows the
+* search keeps and says how many there are to a screen reader, and a tap on
+* a row reaches it while the keyboard is up.
+*/
+function Collection(t0) {
+	const $ = c(25);
+	let children;
+	let defaultSelectedKeys;
+	let disabledKeys;
+	let disallowEmptySelection;
+	let items;
+	let onSelectionChange;
+	let props;
+	let selectedKeys;
+	let t1;
+	if ($[0] !== t0) {
+		({children, defaultSelectedKeys, disabledKeys, disallowEmptySelection, items, onSelectionChange, selectedKeys, selectionMode: t1, ...props} = t0);
+		$[0] = t0;
+		$[1] = children;
+		$[2] = defaultSelectedKeys;
+		$[3] = disabledKeys;
+		$[4] = disallowEmptySelection;
+		$[5] = items;
+		$[6] = onSelectionChange;
+		$[7] = props;
+		$[8] = selectedKeys;
+		$[9] = t1;
+	} else {
+		children = $[1];
+		defaultSelectedKeys = $[2];
+		disabledKeys = $[3];
+		disallowEmptySelection = $[4];
+		items = $[5];
+		onSelectionChange = $[6];
+		props = $[7];
+		selectedKeys = $[8];
+		t1 = $[9];
+	}
+	const selectionMode = t1 === void 0 ? "none" : t1;
+	const matches = use(AutocompleteContext)?.matches;
+	let t2;
+	if ($[10] !== matches) {
+		t2 = matches === void 0 ? void 0 : filterOf(matches);
+		$[10] = matches;
+		$[11] = t2;
+	} else t2 = $[11];
+	const filter = t2;
+	const t3 = children;
+	let t4;
+	if ($[12] !== defaultSelectedKeys || $[13] !== disabledKeys || $[14] !== disallowEmptySelection || $[15] !== filter || $[16] !== items || $[17] !== onSelectionChange || $[18] !== selectedKeys || $[19] !== selectionMode || $[20] !== t3) {
+		t4 = {
+			children: t3,
+			defaultSelectedKeys,
+			disabledKeys,
+			disallowEmptySelection,
+			filter,
+			items,
+			onSelectionChange,
+			selectedKeys,
+			selectionMode
+		};
+		$[12] = defaultSelectedKeys;
+		$[13] = disabledKeys;
+		$[14] = disallowEmptySelection;
+		$[15] = filter;
+		$[16] = items;
+		$[17] = onSelectionChange;
+		$[18] = selectedKeys;
+		$[19] = selectionMode;
+		$[20] = t3;
+		$[21] = t4;
+	} else t4 = $[21];
+	const state = useListState(t4);
+	let t5;
+	if ($[22] !== props || $[23] !== state) {
+		t5 = /* @__PURE__ */ jsx(CollectionView, {
+			...props,
+			state
+		});
+		$[22] = props;
+		$[23] = state;
+		$[24] = t5;
+	} else t5 = $[24];
+	return t5;
+}
+/**
+* The `FlatList` itself, drawn from a list state built elsewhere: by
+* `Collection` from its own props, or by a component whose state holds more
+* than a list's, as a Select's holds whether it is open and a Tree's which
+* rows are. `focusKey` names the
+* row whose node is handed to `onFocusTarget`, for a panel that sends a
+* screen reader to it as it opens.
+*/
+function CollectionView(t0) {
+	const $ = c(69);
+	let contentContainerStyle;
+	let keyboardShouldPersistTaps;
+	let kind;
+	let onAction;
+	let onFocusTarget;
+	let onLayout;
+	let props;
+	let ref;
+	let selectLabel;
+	let selectedRoute;
+	let state;
+	let style;
+	let t1;
+	let t2;
+	let t3;
+	if ($[0] !== t0) {
+		({contentContainerStyle, focusKey: t1, keyboardShouldPersistTaps, kind, onAction, onFocusTarget, onLayout, ref, renderEmptyState: t2, revealFocus: t3, selectedRoute, selectLabel, state, style, ...props} = t0);
+		$[0] = t0;
+		$[1] = contentContainerStyle;
+		$[2] = keyboardShouldPersistTaps;
+		$[3] = kind;
+		$[4] = onAction;
+		$[5] = onFocusTarget;
+		$[6] = onLayout;
+		$[7] = props;
+		$[8] = ref;
+		$[9] = selectLabel;
+		$[10] = selectedRoute;
+		$[11] = state;
+		$[12] = style;
+		$[13] = t1;
+		$[14] = t2;
+		$[15] = t3;
+	} else {
+		contentContainerStyle = $[1];
+		keyboardShouldPersistTaps = $[2];
+		kind = $[3];
+		onAction = $[4];
+		onFocusTarget = $[5];
+		onLayout = $[6];
+		props = $[7];
+		ref = $[8];
+		selectLabel = $[9];
+		selectedRoute = $[10];
+		state = $[11];
+		style = $[12];
+		t1 = $[13];
+		t2 = $[14];
+		t3 = $[15];
+	}
+	const focusKey = t1 === void 0 ? null : t1;
+	const renderEmptyState = t2 === void 0 ? emptyState : t2;
+	const revealFocus = t3 === void 0 ? false : t3;
+	const theme = useTheme();
+	const own = stylesOf(theme);
+	const autocomplete = use(AutocompleteContext);
+	let t4;
+	if ($[16] !== state) {
+		t4 = entriesOf(state);
+		$[16] = state;
+		$[17] = t4;
+	} else t4 = $[17];
+	const { entries, loader, rows, sticky } = t4;
+	let t5;
+	if ($[18] !== kind || $[19] !== selectedRoute || $[20] !== state.collection) {
+		t5 = kind === "drawer" ? routeMarkOf(state.collection, selectedRoute) : void 0;
+		$[18] = kind;
+		$[19] = selectedRoute;
+		$[20] = state.collection;
+		$[21] = t5;
+	} else t5 = $[21];
+	const route = t5;
+	const [list, setList] = useState(null);
+	const [revealed, setRevealed] = useState(false);
+	const focusIndex = focusKey === null ? -1 : entries.findIndex((entry) => entry.kind === "item" && entry.node.key === focusKey);
+	const isList = kind === "list";
+	const listStyle = composeStyles(isList ? own.list : void 0, style);
+	const loadMore = loader?.props;
+	const isLoading = loadMore?.isLoading ?? false;
+	const messages = useMessages();
+	let t6;
+	if ($[22] !== isList || $[23] !== style || $[24] !== theme) {
+		t6 = isList ? StyleSheet.flatten(style)?.backgroundColor ?? theme.colors.surface : void 0;
+		$[22] = isList;
+		$[23] = style;
+		$[24] = theme;
+		$[25] = t6;
+	} else t6 = $[25];
+	const ground = t6;
+	const t7 = selectLabel ?? messages.select;
+	let t8;
+	if ($[26] !== focusKey || $[27] !== ground || $[28] !== kind || $[29] !== loadMore || $[30] !== onAction || $[31] !== onFocusTarget || $[32] !== renderEmptyState || $[33] !== route || $[34] !== state || $[35] !== t7) {
+		t8 = {
+			focusKey,
+			ground,
+			kind,
+			loadMore,
+			onAction,
+			onFocusTarget,
+			renderEmptyState,
+			route,
+			selectLabel: t7,
+			state
+		};
+		$[26] = focusKey;
+		$[27] = ground;
+		$[28] = kind;
+		$[29] = loadMore;
+		$[30] = onAction;
+		$[31] = onFocusTarget;
+		$[32] = renderEmptyState;
+		$[33] = route;
+		$[34] = state;
+		$[35] = t7;
+		$[36] = t8;
+	} else t8 = $[36];
+	const value = t8;
+	const T0 = CollectionContext;
+	const T1 = FlatList;
+	const t9 = composeStyles(own.content, contentContainerStyle);
+	const t10 = Math.max(INITIAL_ROWS, focusIndex + 1);
+	const t11 = keyboardShouldPersistTaps ?? (autocomplete === null ? void 0 : "handled");
+	const t12 = keyOf;
+	const t13 = isLoading ? void 0 : EmptyState;
+	const t14 = loadMore === void 0 ? void 0 : LoaderRow;
+	let t15;
+	if ($[37] !== loadMore) {
+		t15 = loadMore === void 0 ? void 0 : loadMoreOf(loadMore);
+		$[37] = loadMore;
+		$[38] = t15;
+	} else t15 = $[38];
+	const t16 = loadMore?.scrollOffset ?? LOAD_OFFSET;
+	const t17 = revealOnLayout(onLayout, {
+		index: revealFocus && !revealed ? focusIndex : -1,
+		list,
+		setRevealed
+	});
+	let t18;
+	if ($[39] !== list) {
+		t18 = scrollNear(list);
+		$[39] = list;
+		$[40] = t18;
+	} else t18 = $[40];
+	let t19;
+	if ($[41] !== ref || $[42] !== setList) {
+		t19 = refsOf(setList, ref);
+		$[41] = ref;
+		$[42] = setList;
+		$[43] = t19;
+	} else t19 = $[43];
+	const t20 = isList ? sticky : void 0;
+	let t21;
+	if ($[44] !== T1 || $[45] !== entries || $[46] !== listStyle || $[47] !== props || $[48] !== t10 || $[49] !== t11 || $[50] !== t12 || $[51] !== t13 || $[52] !== t14 || $[53] !== t15 || $[54] !== t16 || $[55] !== t17 || $[56] !== t18 || $[57] !== t19 || $[58] !== t20 || $[59] !== t9) {
+		t21 = /* @__PURE__ */ jsx(T1, {
+			...props,
+			contentContainerStyle: t9,
+			data: entries,
+			initialNumToRender: t10,
+			keyboardShouldPersistTaps: t11,
+			keyExtractor: t12,
+			ListEmptyComponent: t13,
+			ListFooterComponent: t14,
+			onEndReached: t15,
+			onEndReachedThreshold: t16,
+			onLayout: t17,
+			onScrollToIndexFailed: t18,
+			ref: t19,
+			renderItem: renderEntry,
+			stickyHeaderIndices: t20,
+			style: listStyle
+		});
+		$[44] = T1;
+		$[45] = entries;
+		$[46] = listStyle;
+		$[47] = props;
+		$[48] = t10;
+		$[49] = t11;
+		$[50] = t12;
+		$[51] = t13;
+		$[52] = t14;
+		$[53] = t15;
+		$[54] = t16;
+		$[55] = t17;
+		$[56] = t18;
+		$[57] = t19;
+		$[58] = t20;
+		$[59] = t9;
+		$[60] = t21;
+	} else t21 = $[60];
+	let t22;
+	if ($[61] !== autocomplete || $[62] !== rows) {
+		t22 = autocomplete === null ? null : /* @__PURE__ */ jsx(ResultsStatus, { count: rows });
+		$[61] = autocomplete;
+		$[62] = rows;
+		$[63] = t22;
+	} else t22 = $[63];
+	let t23;
+	if ($[64] !== T0 || $[65] !== t21 || $[66] !== t22 || $[67] !== value) {
+		t23 = /* @__PURE__ */ jsxs(T0, {
+			value,
+			children: [t21, t22]
+		});
+		$[64] = T0;
+		$[65] = t21;
+		$[66] = t22;
+		$[67] = value;
+		$[68] = t23;
+	} else t23 = $[68];
+	return t23;
+}
+function currentState(current) {
+	if (Platform.OS !== "web") return { "aria-selected": current };
+	return current ? CURRENT_PAGE : void 0;
+}
+/**
+* The muted row a list shows when nothing is in it: a row's box and
+* headline in on surface variant, with no press of its own.
+*/
+function EmptyRow() {
+	const $ = c(10);
+	const theme = useTheme();
+	const own = stylesOf(theme);
+	const headline = useTypeRole("bodyLarge");
+	const messages = useMessages();
+	const T0 = View;
+	let t0;
+	if ($[0] !== theme) {
+		t0 = rowStyleOf(theme, {});
+		$[0] = theme;
+		$[1] = t0;
+	} else t0 = $[1];
+	const T1 = Text;
+	const t1 = composeStyles(headline, own.empty);
+	let t2;
+	if ($[2] !== T1 || $[3] !== messages.noResults || $[4] !== t1) {
+		t2 = /* @__PURE__ */ jsx(T1, {
+			style: t1,
+			children: messages.noResults
+		});
+		$[2] = T1;
+		$[3] = messages.noResults;
+		$[4] = t1;
+		$[5] = t2;
+	} else t2 = $[5];
+	let t3;
+	if ($[6] !== T0 || $[7] !== t0 || $[8] !== t2) {
+		t3 = /* @__PURE__ */ jsx(T0, {
+			style: t0,
+			children: t2
+		});
+		$[6] = T0;
+		$[7] = t0;
+		$[8] = t2;
+		$[9] = t3;
+	} else t3 = $[9];
+	return t3;
+}
+function emptyState() {
+	return /* @__PURE__ */ jsx(EmptyRow, {});
+}
+function EmptyState() {
+	const $ = c(4);
+	const t0 = useCollection();
+	let t1;
+	if ($[0] !== t0) {
+		t1 = t0.renderEmptyState();
+		$[0] = t0;
+		$[1] = t1;
+	} else t1 = $[1];
+	let t2;
+	if ($[2] !== t1) {
+		t2 = /* @__PURE__ */ jsx(Fragment$1, { children: t1 });
+		$[2] = t1;
+		$[3] = t2;
+	} else t2 = $[3];
+	return t2;
+}
+/**
+* The cells the `FlatList` draws, in order, where the headers among them
+* are, and how many rows there are: the rows outside any section, and each
+* section's header followed by its rows, with the rows under each open row
+* of a tree after it. The row that loads more is drawn after them all.
+*/
+function entriesOf(state) {
+	const entries = [];
+	const sticky = [];
+	const open = expansionOf(state)?.expandedKeys;
+	let loader;
+	let rows = 0;
+	const addRow = (row) => {
+		entries.push({
+			kind: "item",
+			node: row
+		});
+		rows++;
+		if (open?.has(row.key) === true) {
+			for (const child of row.childNodes) if (child.type === "item") addRow(child);
+		}
+	};
+	for (const node of state.collection) if (node.type === "loader") loader = node;
+	else if (node.type === "section") {
+		if (hasContent(node.rendered)) {
+			sticky.push(entries.length);
+			entries.push({
+				kind: "header",
+				node
+			});
+		}
+		const children = state.collection.getChildren?.(node.key) ?? node.childNodes;
+		for (const row of children) addRow(row);
+	} else addRow(node);
+	return {
+		entries,
+		loader,
+		rows,
+		sticky
+	};
+}
+/**
+* The tree state a collection is drawn from, which says which rows are open
+* and opens and closes them, or null for a list's, as React Aria tells the
+* two apart.
+*/
+function expansionOf(state) {
+	return "expandedKeys" in state ? state : null;
+}
+/**
+* What a list inside an Autocomplete builds its collection from: the rows
+* the search keeps, each section with a row left in it, and the row that
+* loads more. Each node is copied rather than handed on, as React Stately's
+* ComboBox copies its own, since a collection numbers the nodes it holds.
+*/
+function filterOf(matches) {
+	return (nodes) => keptOf(nodes, matches);
+}
+/**
+* The row a screen reader is sent to as a panel holding the list opens: the
+* first one chosen, or the first that takes a press where none is.
+*/
+function focusKeyOf(state) {
+	const chosen = state.selectionManager.firstSelectedKey;
+	if (chosen !== null) return chosen;
+	for (const node of state.collection) {
+		if (node.type === "item" && !state.disabledKeys.has(node.key)) return node.key;
+		if (node.type === "section") {
+			for (const row of state.collection.getChildren?.(node.key) ?? []) if (!state.disabledKeys.has(row.key)) return row.key;
+		}
+	}
+	return null;
+}
+function hrefOf(node) {
+	const { href } = node.props;
+	return href;
+}
+function keptOf(nodes, matches) {
+	const kept = [];
+	for (const node of nodes) if (node.type === "section") {
+		const rows = keptOf(node.childNodes, matches);
+		if (rows.some((row) => row.type === "item")) kept.push({
+			...node,
+			childNodes: rows
+		});
+	} else if (node.type !== "item" || matches(node.textValue, node)) kept.push({ ...node });
+	return kept;
+}
+function keyOf({ kind, node }) {
+	return `${kind}:${String(node.key)}`;
+}
+function* loaderNode(props) {
+	yield {
+		hasChildNodes: false,
+		props,
+		rendered: null,
+		type: "loader"
+	};
+}
+function LoaderRow() {
+	const $ = c(2);
+	const t0 = useCollection().loadMore ?? IDLE;
+	let t1;
+	if ($[0] !== t0) {
+		t1 = /* @__PURE__ */ jsx(LoadingRow, { ...t0 });
+		$[0] = t0;
+		$[1] = t1;
+	} else t1 = $[1];
+	return t1;
+}
+/**
+* The row a `LoadMore` part draws: a live region, empty while idle and
+* holding the ring while loading. Android and React Native Web say what
+* arrives in it; iOS has no live regions, so the ring's name is said there
+* as it appears. A List's and a ListBox's, and a Table's, which draws it
+* after its rows at a row's own height.
+*/
+function LoadingRow(t0) {
+	const $ = c(8);
+	const { isLoading: t1, label, style, testID } = t0;
+	const isLoading = t1 === void 0 ? false : t1;
+	const own = stylesOf(useTheme());
+	const messages = useMessages();
+	const name = label ?? messages.loadingMore;
+	useLoadingAnnouncement(isLoading, name);
+	const T0 = View;
+	const t2 = "polite";
+	const t3 = composeStyles(isLoading ? own.loading : styles.idle, style);
+	let t4;
+	if ($[0] !== isLoading || $[1] !== name) {
+		t4 = isLoading ? /* @__PURE__ */ jsx(ProgressIndicator, {
+			"aria-label": name,
+			diameter: LOADING_DIAMETER,
+			isIndeterminate: true,
+			variant: "circular"
+		}) : null;
+		$[0] = isLoading;
+		$[1] = name;
+		$[2] = t4;
+	} else t4 = $[2];
+	let t5;
+	if ($[3] !== T0 || $[4] !== t3 || $[5] !== t4 || $[6] !== testID) {
+		t5 = /* @__PURE__ */ jsx(T0, {
+			"aria-live": t2,
+			style: t3,
+			testID,
+			children: t4
+		});
+		$[3] = T0;
+		$[4] = t3;
+		$[5] = t4;
+		$[6] = testID;
+		$[7] = t5;
+	} else t5 = $[7];
+	return t5;
+}
+function loadMoreOf({ isLoading = false, onLoadMore }) {
+	return () => {
+		if (!isLoading) onLoadMore?.();
+	};
+}
+function* nestedRowNode(props, rendered, textValue) {
+	const children = childElementsOf(props.children);
+	yield {
+		"aria-label": props["aria-label"],
+		*childNodes() {
+			for (const element of children) yield { element };
+		},
+		hasChildNodes: children.length > 0,
+		key: props.id,
+		props,
+		rendered,
+		textValue,
+		type: "item"
+	};
+}
+function noop() {}
+/**
+* The press handler of a row: the call site's own handler, then the row's.
+* 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, then) {
+	return (event) => {
+		onPress?.(event);
+		then?.();
+	};
+}
+function renderEntry({ item }) {
+	return item.kind === "header" ? /* @__PURE__ */ jsx(SectionHeader, { node: item.node }) : /* @__PURE__ */ jsx(RowNode, { node: item.node });
+}
+/**
+* How many rows a search leaves, said to a screen reader as it changes and
+* never drawn, through `Status`. A `count` of `null` says nothing, for a
+* list that is closed, so the count is said again as it opens.
+*/
+function ResultsStatus(t0) {
+	const $ = c(5);
+	const { count } = t0;
+	const locale = useLocaleOf(void 0);
+	let t1;
+	if ($[0] !== count || $[1] !== locale) {
+		t1 = count === null ? "" : resultsFor(count, locale);
+		$[0] = count;
+		$[1] = locale;
+		$[2] = t1;
+	} else t1 = $[2];
+	let t2;
+	if ($[3] !== t1) {
+		t2 = /* @__PURE__ */ jsx(Status, { message: t1 });
+		$[3] = t1;
+		$[4] = t2;
+	} else t2 = $[4];
+	return t2;
+}
+/**
+* The list's layout handler: the call site's own, then a scroll that brings
+* the row at `index` into view, once, where there is one to reveal. The row
+* goes to the bottom of the list where it was below the fold, and a row
+* already in view stays where it is: scrolled to put a row at the bottom, a
+* list never scrolls past its end, and one that would have to scroll back
+* above its start stays at the top.
+*/
+function revealOnLayout(onLayout, { index, list, setRevealed }) {
+	return (event) => {
+		onLayout?.(event);
+		if (index > 0 && list !== null) {
+			setRevealed(true);
+			list.scrollToIndex({
+				animated: false,
+				index,
+				viewPosition: 1
+			});
+		}
+	};
+}
+function routeMarkOf(nodes, selectedRoute) {
+	const trail = [];
+	const find = (level) => {
+		for (const node of level) {
+			if (node.type === "item" && hrefOf(node) === selectedRoute) return node.key;
+			if (node.type === "item") trail.push(node.key);
+			const found = find(node.childNodes);
+			if (found !== null) return found;
+			if (node.type === "item") trail.pop();
+		}
+		return null;
+	};
+	const current = selectedRoute === void 0 ? null : find(nodes);
+	return {
+		current,
+		trail: new Set(current === null ? [] : trail)
+	};
+}
+function rowCountOf(state) {
+	return entriesOf(state).rows;
+}
+function* rowNode(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"
+	};
+}
+/**
+* A row: the state layer, the ripple and the focus ring over the leading
+* slot, the lines and the trailing slot, on primary container while
+* selected, with a List's checkbox before them on a row that selects. A
+* Tree's row is indented by its depth and starts with its chevron, or a
+* chevron's space on a row with nothing under it. A row with nothing to do
+* on a press, in a collection that neither selects nor acts, is a `View`
+* that only presents.
+*/
+function RowNode(t0) {
+	const $ = c(75);
+	const { node } = t0;
+	const theme = useTheme();
+	const own = stylesOf(theme);
+	const collection = useCollection();
+	const messages = useMessages();
+	let href;
+	let leading;
+	let onAction;
+	let onBlur;
+	let onFocus;
+	let onHoverIn;
+	let onHoverOut;
+	let onLongPress;
+	let onPress;
+	let onPressIn;
+	let onPressOut;
+	let overline;
+	let props;
+	let ref;
+	let style;
+	let supporting;
+	let trailing;
+	if ($[0] !== node.props) {
+		const { children: _children, headline: _headline, href: t1, id: _id, isDisabled: _isDisabled, label: _label, leading: t2, onAction: t3, onBlur: t4, onFocus: t5, onHoverIn: t6, onHoverOut: t7, onLongPress: t8, onPress: t9, onPressIn: t10, onPressOut: t11, overline: t12, ref: t13, style: t14, supporting: t15, textValue: _textValue, trailing: t16, ...t17 } = node.props;
+		href = t1;
+		leading = t2;
+		onAction = t3;
+		onBlur = t4;
+		onFocus = t5;
+		onHoverIn = t6;
+		onHoverOut = t7;
+		onLongPress = t8;
+		onPress = t9;
+		onPressIn = t10;
+		onPressOut = t11;
+		overline = t12;
+		ref = t13;
+		style = t14;
+		supporting = t15;
+		trailing = t16;
+		props = t17;
+		$[0] = node.props;
+		$[1] = href;
+		$[2] = leading;
+		$[3] = onAction;
+		$[4] = onBlur;
+		$[5] = onFocus;
+		$[6] = onHoverIn;
+		$[7] = onHoverOut;
+		$[8] = onLongPress;
+		$[9] = onPress;
+		$[10] = onPressIn;
+		$[11] = onPressOut;
+		$[12] = overline;
+		$[13] = props;
+		$[14] = ref;
+		$[15] = style;
+		$[16] = supporting;
+		$[17] = trailing;
+	} else {
+		href = $[1];
+		leading = $[2];
+		onAction = $[3];
+		onBlur = $[4];
+		onFocus = $[5];
+		onHoverIn = $[6];
+		onHoverOut = $[7];
+		onLongPress = $[8];
+		onPress = $[9];
+		onPressIn = $[10];
+		onPressOut = $[11];
+		overline = $[12];
+		props = $[13];
+		ref = $[14];
+		style = $[15];
+		supporting = $[16];
+		trailing = $[17];
+	}
+	const isList = collection.kind === "list";
+	const { route } = collection;
+	const openLink = useOpenLink();
+	const { selectionManager } = collection.state;
+	const tree = expansionOf(collection.state);
+	const { key } = node;
+	let t1;
+	if ($[18] !== collection.focusKey || $[19] !== collection.onFocusTarget || $[20] !== key || $[21] !== ref) {
+		t1 = key === collection.focusKey ? refsOf(collection.onFocusTarget, ref) : ref;
+		$[18] = collection.focusKey;
+		$[19] = collection.onFocusTarget;
+		$[20] = key;
+		$[21] = ref;
+		$[22] = t1;
+	} else t1 = $[22];
+	const rowRef = t1;
+	const disabled = selectionManager.isDisabled(key);
+	const checks = selectionManager.selectionMode !== "none";
+	let t2;
+	if ($[23] !== key || $[24] !== selectionManager) {
+		t2 = selectionManager.canSelectItem(key);
+		$[23] = key;
+		$[24] = selectionManager;
+		$[25] = t2;
+	} else t2 = $[25];
+	const selectable = t2;
+	const selected = checks && selectionManager.isSelected(key);
+	const current = route?.current === key;
+	let t3;
+	if ($[26] !== key || $[27] !== route?.trail) {
+		t3 = route?.trail.has(key);
+		$[26] = key;
+		$[27] = route?.trail;
+		$[28] = t3;
+	} else t3 = $[28];
+	const onTrail = t3 === true;
+	const marked = selected || current;
+	const variant = route === void 0 ? void 0 : "drawer";
+	const branch = tree !== null && node.hasChildNodes;
+	const expanded = branch && tree.expandedKeys.has(key);
+	const toggle = toggleOf(tree, key);
+	const listAction = collection.onAction;
+	const action = onAction ?? (href === void 0 ? listAction === void 0 ? branch && !checks ? toggle : void 0 : () => {
+		listAction(key);
+	} : () => {
+		openLink(href);
+	});
+	const acts = action !== void 0 && (!selectable || selectionManager.isEmpty);
+	const offersSelect = selectable && (isList || action !== void 0);
+	const opens = branch && !disabled;
+	let t4;
+	if ($[29] !== key || $[30] !== selectionManager) {
+		t4 = () => {
+			selectionManager.select(key);
+		};
+		$[29] = key;
+		$[30] = selectionManager;
+		$[31] = t4;
+	} else t4 = $[31];
+	const select = t4;
+	const content = rowContentColor(theme, {
+		isDisabled: disabled,
+		isSelected: marked,
+		variant
+	});
+	const feedback = usePressFeedback({
+		color: content,
+		corners: route === void 0 ? void 0 : own.pill,
+		disabled,
+		onBlur,
+		onFocus,
+		onHoverIn,
+		onHoverOut,
+		onPressIn,
+		onPressOut
+	});
+	const box = isList && checks ? /* @__PURE__ */ jsx(SelectBox, {
+		isDisabled: disabled,
+		isSelected: selected,
+		onPress: acts && selectable ? select : void 0
+	}) : null;
+	const lead = tree === null ? box === null ? leading : withBox(box, leading, own.lead) : treeLead({
+		box,
+		chevron: branch ? /* @__PURE__ */ jsx(TreeChevron, {
+			color: disabled || marked ? content : theme.colors.onSurfaceVariant,
+			isDisabled: disabled,
+			isExpanded: expanded,
+			onPress: toggle
+		}) : null,
+		indent: node.level * theme.spacing.xl,
+		leading,
+		style: own.lead
+	});
+	let t5;
+	if ($[32] !== disabled || $[33] !== lead || $[34] !== marked || $[35] !== node.rendered || $[36] !== onTrail || $[37] !== overline || $[38] !== supporting || $[39] !== trailing || $[40] !== variant) {
+		t5 = /* @__PURE__ */ jsx(RowContent, {
+			isDisabled: disabled,
+			isEmphasized: onTrail,
+			isSelected: marked,
+			leading: lead,
+			overline,
+			supporting,
+			trailing,
+			variant,
+			children: node.rendered
+		});
+		$[32] = disabled;
+		$[33] = lead;
+		$[34] = marked;
+		$[35] = node.rendered;
+		$[36] = onTrail;
+		$[37] = overline;
+		$[38] = supporting;
+		$[39] = trailing;
+		$[40] = variant;
+		$[41] = t5;
+	} else t5 = $[41];
+	const lines = t5;
+	const rowStyle = rowStyleOf(theme, {
+		isSelected: marked,
+		overline,
+		supporting,
+		variant
+	});
+	let t6;
+	if ($[42] !== collection.selectLabel || $[43] !== offersSelect) {
+		t6 = offersSelect ? [{
+			label: collection.selectLabel,
+			name: "select"
+		}] : [];
+		$[42] = collection.selectLabel;
+		$[43] = offersSelect;
+		$[44] = t6;
+	} else t6 = $[44];
+	const t7 = opens ? [expanded ? {
+		label: messages.collapse,
+		name: "collapse"
+	} : {
+		label: messages.expand,
+		name: "expand"
+	}] : [];
+	let t8;
+	if ($[45] !== t6 || $[46] !== t7) {
+		t8 = [...t6, ...t7];
+		$[45] = t6;
+		$[46] = t7;
+		$[47] = t8;
+	} else t8 = $[47];
+	const accessibilityActions = t8;
+	if (!checks && action === void 0 && onPress === void 0) return /* @__PURE__ */ jsx(View, {
+		"aria-disabled": disabled || void 0,
+		ref: rowRef,
+		style: composeStyles(rowStyle, style),
+		testID: props.testID,
+		children: lines
+	});
+	const T0 = Pressable;
+	const t9 = href === void 0 ? "button" : "link";
+	const t10 = checks ? toggleState(selected) : void 0;
+	let t11;
+	if ($[48] !== current || $[49] !== route) {
+		t11 = route === void 0 ? void 0 : currentState(current);
+		$[48] = current;
+		$[49] = route;
+		$[50] = t11;
+	} else t11 = $[50];
+	const t12 = branch ? { "aria-expanded": expanded } : void 0;
+	const t13 = accessibilityActions.length > 0 ? {
+		accessibilityActions,
+		onAccessibilityAction: accessibilityActionOf({
+			collapse: opens && expanded ? toggle : void 0,
+			expand: opens && !expanded ? toggle : void 0,
+			select: offersSelect ? select : void 0
+		})
+	} : void 0;
+	const t14 = feedback.handlers;
+	let t15;
+	if ($[51] !== action || $[52] !== onLongPress || $[53] !== select || $[54] !== selectable) {
+		t15 = action !== void 0 && selectable ? pressThen(onLongPress, select) : onLongPress;
+		$[51] = action;
+		$[52] = onLongPress;
+		$[53] = select;
+		$[54] = selectable;
+		$[55] = t15;
+	} else t15 = $[55];
+	const t16 = acts ? action : selectable ? select : noop;
+	let t17;
+	if ($[56] !== onPress || $[57] !== t16) {
+		t17 = pressThen(onPress, t16);
+		$[56] = onPress;
+		$[57] = t16;
+		$[58] = t17;
+	} else t17 = $[58];
+	const t18 = composeStyles(rowStyle, feedback.ring, feedback.ring === void 0 ? void 0 : rowStyles.ring, style);
+	let t19;
+	if ($[59] !== T0 || $[60] !== disabled || $[61] !== feedback.handlers || $[62] !== feedback.layer || $[63] !== lines || $[64] !== props || $[65] !== rowRef || $[66] !== t10 || $[67] !== t11 || $[68] !== t12 || $[69] !== t13 || $[70] !== t15 || $[71] !== t17 || $[72] !== t18 || $[73] !== t9) {
+		t19 = /* @__PURE__ */ jsxs(T0, {
+			role: t9,
+			...props,
+			...t10,
+			...t11,
+			...t12,
+			...t13,
+			...t14,
+			disabled,
+			onLongPress: t15,
+			onPress: t17,
+			ref: rowRef,
+			style: t18,
+			children: [feedback.layer, lines]
+		});
+		$[59] = T0;
+		$[60] = disabled;
+		$[61] = feedback.handlers;
+		$[62] = feedback.layer;
+		$[63] = lines;
+		$[64] = props;
+		$[65] = rowRef;
+		$[66] = t10;
+		$[67] = t11;
+		$[68] = t12;
+		$[69] = t13;
+		$[70] = t15;
+		$[71] = t17;
+		$[72] = t18;
+		$[73] = t9;
+		$[74] = t19;
+	} else t19 = $[74];
+	return t19;
+}
+/**
+* Where a row the list has not measured yet is reached: as far down as rows
+* of the average height would put it, which a `FlatList` asks for in place
+* of scrolling to a row it cannot place.
+*/
+function scrollNear(list) {
+	return ({ averageItemLength, index }) => {
+		list?.scrollToOffset({
+			animated: false,
+			offset: averageItemLength * index
+		});
+	};
+}
+/**
+* A section's heading: on a List's ground, so the rows pass under it as it
+* sticks, and on none in a ListBox, where it scrolls with them.
+*/
+function SectionHeader(t0) {
+	const $ = c(10);
+	const { node } = t0;
+	const own = stylesOf(useTheme());
+	const { ground, kind } = useCollection();
+	const drawer = kind === "drawer";
+	const title = useTypeRole(drawer ? "labelLarge" : "titleSmall");
+	const T0 = View;
+	let t1;
+	if ($[0] !== ground) {
+		t1 = ground === void 0 ? void 0 : composeStyles({ backgroundColor: ground });
+		$[0] = ground;
+		$[1] = t1;
+	} else t1 = $[1];
+	const T1 = Text;
+	const t2 = "heading";
+	const t3 = composeStyles(title, drawer ? own.drawerHeader : own.header);
+	let t4;
+	if ($[2] !== T1 || $[3] !== node.rendered || $[4] !== t3) {
+		t4 = /* @__PURE__ */ jsx(T1, {
+			role: t2,
+			style: t3,
+			children: node.rendered
+		});
+		$[2] = T1;
+		$[3] = node.rendered;
+		$[4] = t3;
+		$[5] = t4;
+	} else t4 = $[5];
+	let t5;
+	if ($[6] !== T0 || $[7] !== t1 || $[8] !== t4) {
+		t5 = /* @__PURE__ */ jsx(T0, {
+			style: t1,
+			children: t4
+		});
+		$[6] = T0;
+		$[7] = t1;
+		$[8] = t4;
+		$[9] = t5;
+	} else t5 = $[9];
+	return t5;
+}
+function* sectionNode(props) {
+	const children = childElementsOf(props.children);
+	yield {
+		*childNodes() {
+			for (const element of children) yield { element };
+		},
+		hasChildNodes: true,
+		key: props.id,
+		props,
+		rendered: props.header,
+		type: "section"
+	};
+}
+/**
+* The checkbox a List's selecting row draws, for the eye alone: the row is
+* what a screen reader hears and presses. On a row whose press runs an
+* action, a touch on the box selects instead, through a press of its own the
+* size of a 48dp target, hidden from the reader as the box is.
+*/
+function SelectBox(t0) {
+	const $ = c(10);
+	const { isDisabled, isSelected, onPress } = t0;
+	let t1;
+	if ($[0] !== isDisabled || $[1] !== isSelected) {
+		t1 = /* @__PURE__ */ jsx(CheckboxBox, {
+			isDisabled,
+			isSelected,
+			within: BOX_SLOT
+		});
+		$[0] = isDisabled;
+		$[1] = isSelected;
+		$[2] = t1;
+	} else t1 = $[2];
+	const drawn = t1;
+	if (onPress === void 0) {
+		let t2;
+		if ($[3] !== drawn) {
+			t2 = /* @__PURE__ */ jsx(View, {
+				style: styles.box,
+				children: drawn
+			});
+			$[3] = drawn;
+			$[4] = t2;
+		} else t2 = $[4];
+		return t2;
+	}
+	let t2;
+	if ($[5] === Symbol.for("react.memo_cache_sentinel")) {
+		t2 = hitSlop(BOX_SLOT, BOX_SLOT);
+		$[5] = t2;
+	} else t2 = $[5];
+	let t3;
+	if ($[6] !== drawn || $[7] !== isDisabled || $[8] !== onPress) {
+		t3 = /* @__PURE__ */ jsx(Pressable, {
+			accessible: false,
+			"aria-hidden": true,
+			disabled: isDisabled,
+			focusable: false,
+			hitSlop: t2,
+			onPress,
+			style: styles.box,
+			tabIndex: -1,
+			children: drawn
+		});
+		$[6] = drawn;
+		$[7] = isDisabled;
+		$[8] = onPress;
+		$[9] = t3;
+	} else t3 = $[9];
+	return t3;
+}
+/**
+* A message said to a screen reader as it changes and never drawn: in a
+* polite live region on Android and under React Native Web, and through
+* `AccessibilityInfo` on iOS, which has no live regions, so nothing is drawn
+* there at all. The message a status mounts with is not said, and an empty
+* one says nothing. A search's count of rows, and a table's sort.
+*/
+function Status(t0) {
+	const $ = c(5);
+	const { message } = t0;
+	const t1 = useTheme();
+	let t2;
+	if ($[0] !== t1) {
+		t2 = stylesOf(t1);
+		$[0] = t1;
+		$[1] = t2;
+	} else t2 = $[1];
+	const own = t2;
+	useAnnouncement(message);
+	if (Platform.OS === "ios") return null;
+	let t3;
+	if ($[2] !== message || $[3] !== own.status) {
+		t3 = /* @__PURE__ */ jsx(View, {
+			"aria-live": "polite",
+			style: styles.status,
+			children: /* @__PURE__ */ jsx(Text, {
+				style: own.status,
+				children: message
+			})
+		});
+		$[2] = message;
+		$[3] = own.status;
+		$[4] = t3;
+	} else t3 = $[4];
+	return t3;
+}
+/**
+* Opens a tree's row, or closes it when it is open. Built by a call rather
+* than written inline, which is what react-perf's
+* no-new-function-as-prop is after.
+*/
+function toggleOf(tree, key) {
+	return () => {
+		tree?.toggleKey(key);
+	};
+}
+/**
+* The chevron a Tree's row with rows under it draws, which opens and closes
+* it, for the eye and the finger alone: the row is what a screen reader
+* hears, and opens or closes through its actions. It takes a press of its
+* own the size of a 48dp target, and draws no state layer, since the row
+* around it already carries one.
+*/
+function TreeChevron(t0) {
+	const $ = c(8);
+	const { color, isDisabled, isExpanded, onPress } = t0;
+	let t1;
+	if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+		t1 = hitSlop(BOX_SLOT, BOX_SLOT);
+		$[0] = t1;
+	} else t1 = $[0];
+	let t2;
+	if ($[1] !== color || $[2] !== isExpanded) {
+		t2 = /* @__PURE__ */ jsx(ExpandChevron, {
+			color,
+			isExpanded
+		});
+		$[1] = color;
+		$[2] = isExpanded;
+		$[3] = t2;
+	} else t2 = $[3];
+	let t3;
+	if ($[4] !== isDisabled || $[5] !== onPress || $[6] !== t2) {
+		t3 = /* @__PURE__ */ jsx(Pressable, {
+			accessible: false,
+			"aria-hidden": true,
+			disabled: isDisabled,
+			focusable: false,
+			hitSlop: t1,
+			onPress,
+			style: styles.box,
+			tabIndex: -1,
+			children: t2
+		});
+		$[4] = isDisabled;
+		$[5] = onPress;
+		$[6] = t2;
+		$[7] = t3;
+	} else t3 = $[7];
+	return t3;
+}
+/**
+* The leading slot of a Tree's row: its chevron, or the chevron's space on a
+* row with nothing under it so its headline lines up with one that opens,
+* then the checkbox of a tree that selects, then whatever the row was given,
+* all set in by the row's depth, a chevron's width a level.
+*/
+function treeLead({ box, chevron, indent, leading, style }) {
+	return /* @__PURE__ */ jsxs(View, {
+		style: composeStyles(style, { marginStart: indent }),
+		children: [
+			chevron ?? /* @__PURE__ */ jsx(View, { style: styles.box }),
+			box,
+			leading
+		]
+	});
+}
+function useAnnouncement(message) {
+	const $ = c(3);
+	const was = useRef(message);
+	let t0;
+	let t1;
+	if ($[0] !== message) {
+		t0 = () => {
+			if (message !== was.current && message !== "" && Platform.OS === "ios") AccessibilityInfo.announceForAccessibility(message);
+			was.current = message;
+		};
+		t1 = [message];
+		$[0] = message;
+		$[1] = t0;
+		$[2] = t1;
+	} else {
+		t0 = $[1];
+		t1 = $[2];
+	}
+	useEffect(t0, t1);
+}
+function useCollection() {
+	const collection = use(CollectionContext);
+	if (collection === null) throw new Error("A List or ListBox part is drawn by the one it is in.");
+	return collection;
+}
+function useLoadingAnnouncement(isLoading, label) {
+	const $ = c(4);
+	const was = useRef(isLoading);
+	let t0;
+	let t1;
+	if ($[0] !== isLoading || $[1] !== label) {
+		t0 = () => {
+			if (isLoading && !was.current && Platform.OS === "ios") AccessibilityInfo.announceForAccessibility(label);
+			was.current = isLoading;
+		};
+		t1 = [isLoading, label];
+		$[0] = isLoading;
+		$[1] = label;
+		$[2] = t0;
+		$[3] = t1;
+	} else {
+		t0 = $[2];
+		t1 = $[3];
+	}
+	useEffect(t0, t1);
+}
+/**
+* The leading slot of a List's row that selects: the checkbox, then whatever
+* the row was given, in a row of their own so the two sit side by side.
+*/
+function withBox(box, leading, style) {
+	return hasContent(leading) ? /* @__PURE__ */ jsxs(View, {
+		style,
+		children: [box, leading]
+	}) : box;
+}
+//#endregion
+export { Collection, CollectionView, LoadingRow, ResultsStatus, SelectBox, Status, accessibilityActionOf, childElementsOf, focusKeyOf, loadMoreOf, loaderNode, nestedRowNode, noop, pressThen, rowCountOf, rowNode, sectionNode };
+
+//# sourceMappingURL=index.js.map