@kanso-labs/react-native-kanso-ui 0.3.1 → 0.5.0

package/dist/components/list/index.js

@@ -0,0 +1,1118 @@
+import { AutocompleteContext } from "../../autocomplete/index.js";
+import { useTheme } from "../../theme/scope.js";
+import { composeStyles, themedStyles } from "../../theme/styles.js";
+import { useTypeRole } from "../../typography/roles.js";
+import { toggleState } from "../../button/index.js";
+import { ProgressIndicator } from "../progress-indicator/index.js";
+import { messagesFor, resultsFor } from "../../i18n/index.js";
+import { hitSlop, usePressFeedback } from "../../press/index.js";
+import { CheckboxBox } from "../../control/checkbox-box.js";
+import { rowContentColor, rowStyles } from "../../row/styles.js";
+import { RowContent, hasContent, rowStyleOf } from "../../row/index.js";
+import { c } from "react/compiler-runtime";
+import { Children, createContext, use, useEffect, useRef } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+import { AccessibilityInfo, FlatList, Platform, Pressable, StyleSheet, Text, View } from "react-native";
+import { useListState } from "react-stately/useListState";
+//#region src/components/list/index.tsx
+const BOX_SLOT = 24;
+const LOADING_DIAMETER = "24px";
+const LOAD_OFFSET = 1;
+const IDLE = {};
+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, sizing, spacing }) => StyleSheet.create({
+	content: { paddingVertical: spacing.sm },
+	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
+	},
+	status: { color: colors.onSurface }
+}));
+const ListContext = createContext(null);
+/**
+* A list of rows, one or more of which can be selected. Selection is React
+* Stately's, as web's is React Aria's: set `selectionMode` to `single` or
+* `multiple`, and pass `selectedKeys` with `onSelectionChange` to control
+* it or `defaultSelectedKeys` to let it keep its own. A list whose rows do
+* something takes `onAction`, or an `onAction` on each row.
+*
+* ```tsx
+* <List aria-label="Label" selectionMode="multiple">
+*   <List.Item id="first" supporting="Supporting line">First item</List.Item>
+* </List>
+* ```
+*
+* ListItem is the row on its own; this is the collection that draws the
+* same row and adds selection, sections and a row that loads more. Composed
+* from parts, `List.Item`, `List.Section` and `List.LoadMore`, which the
+* list draws from their props, so none of them renders anything on its
+* own. Name the list with `aria-label`. It scrolls by itself, so it wants a
+* height to fill: a short list on a page that scrolls takes
+* `scrollEnabled={false}` and is laid out at its full length. `style` and
+* `ref` land on the `FlatList`.
+*
+* Inside an `Autocomplete`, the list 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 List(t0) {
+	const $ = c(66);
+	let children;
+	let contentContainerStyle;
+	let defaultSelectedKeys;
+	let disabledKeys;
+	let disallowEmptySelection;
+	let items;
+	let keyboardShouldPersistTaps;
+	let onAction;
+	let onSelectionChange;
+	let props;
+	let ref;
+	let selectLabel;
+	let selectedKeys;
+	let style;
+	let t1;
+	let t2;
+	if ($[0] !== t0) {
+		({children, contentContainerStyle, defaultSelectedKeys, disabledKeys, disallowEmptySelection, items, keyboardShouldPersistTaps, onAction, onSelectionChange, ref, renderEmptyState: t1, selectedKeys, selectionMode: t2, selectLabel, style, ...props} = t0);
+		$[0] = t0;
+		$[1] = children;
+		$[2] = contentContainerStyle;
+		$[3] = defaultSelectedKeys;
+		$[4] = disabledKeys;
+		$[5] = disallowEmptySelection;
+		$[6] = items;
+		$[7] = keyboardShouldPersistTaps;
+		$[8] = onAction;
+		$[9] = onSelectionChange;
+		$[10] = props;
+		$[11] = ref;
+		$[12] = selectLabel;
+		$[13] = selectedKeys;
+		$[14] = style;
+		$[15] = t1;
+		$[16] = t2;
+	} else {
+		children = $[1];
+		contentContainerStyle = $[2];
+		defaultSelectedKeys = $[3];
+		disabledKeys = $[4];
+		disallowEmptySelection = $[5];
+		items = $[6];
+		keyboardShouldPersistTaps = $[7];
+		onAction = $[8];
+		onSelectionChange = $[9];
+		props = $[10];
+		ref = $[11];
+		selectLabel = $[12];
+		selectedKeys = $[13];
+		style = $[14];
+		t1 = $[15];
+		t2 = $[16];
+	}
+	const renderEmptyState = t1 === void 0 ? emptyState : t1;
+	const selectionMode = t2 === void 0 ? "none" : t2;
+	const theme = useTheme();
+	const own = stylesOf(theme);
+	const autocomplete = use(AutocompleteContext);
+	const matches = autocomplete?.matches;
+	let t3;
+	if ($[17] !== matches) {
+		t3 = matches === void 0 ? void 0 : filterOf(matches);
+		$[17] = matches;
+		$[18] = t3;
+	} else t3 = $[18];
+	const filter = t3;
+	const t4 = children;
+	let t5;
+	if ($[19] !== defaultSelectedKeys || $[20] !== disabledKeys || $[21] !== disallowEmptySelection || $[22] !== filter || $[23] !== items || $[24] !== onSelectionChange || $[25] !== selectedKeys || $[26] !== selectionMode || $[27] !== t4) {
+		t5 = {
+			children: t4,
+			defaultSelectedKeys,
+			disabledKeys,
+			disallowEmptySelection,
+			filter,
+			items,
+			onSelectionChange,
+			selectedKeys,
+			selectionMode
+		};
+		$[19] = defaultSelectedKeys;
+		$[20] = disabledKeys;
+		$[21] = disallowEmptySelection;
+		$[22] = filter;
+		$[23] = items;
+		$[24] = onSelectionChange;
+		$[25] = selectedKeys;
+		$[26] = selectionMode;
+		$[27] = t4;
+		$[28] = t5;
+	} else t5 = $[28];
+	const state = useListState(t5);
+	let t6;
+	if ($[29] !== state) {
+		t6 = entriesOf(state);
+		$[29] = state;
+		$[30] = t6;
+	} else t6 = $[30];
+	const { entries, loader, rows, sticky } = t6;
+	const listStyle = composeStyles(own.list, style);
+	const loadMore = loader?.props;
+	const isLoading = loadMore?.isLoading ?? false;
+	let t7;
+	if ($[31] !== style || $[32] !== theme) {
+		t7 = StyleSheet.flatten(style)?.backgroundColor ?? theme.colors.surface;
+		$[31] = style;
+		$[32] = theme;
+		$[33] = t7;
+	} else t7 = $[33];
+	const ground = t7;
+	let t8;
+	if ($[34] !== selectLabel) {
+		t8 = selectLabel ?? messagesFor().select;
+		$[34] = selectLabel;
+		$[35] = t8;
+	} else t8 = $[35];
+	let t9;
+	if ($[36] !== ground || $[37] !== loadMore || $[38] !== onAction || $[39] !== renderEmptyState || $[40] !== state || $[41] !== t8) {
+		t9 = {
+			ground,
+			loadMore,
+			onAction,
+			renderEmptyState,
+			selectLabel: t8,
+			state
+		};
+		$[36] = ground;
+		$[37] = loadMore;
+		$[38] = onAction;
+		$[39] = renderEmptyState;
+		$[40] = state;
+		$[41] = t8;
+		$[42] = t9;
+	} else t9 = $[42];
+	const value = t9;
+	const T0 = ListContext;
+	const T1 = FlatList;
+	const t10 = composeStyles(own.content, contentContainerStyle);
+	const t11 = keyboardShouldPersistTaps ?? (autocomplete === null ? void 0 : "handled");
+	const t12 = isLoading ? void 0 : EmptyState;
+	const t13 = loadMore === void 0 ? void 0 : LoaderRow;
+	let t14;
+	if ($[43] !== loadMore) {
+		t14 = loadMore === void 0 ? void 0 : loadMoreOf(loadMore);
+		$[43] = loadMore;
+		$[44] = t14;
+	} else t14 = $[44];
+	const t15 = loadMore?.scrollOffset ?? LOAD_OFFSET;
+	let t16;
+	if ($[45] !== T1 || $[46] !== entries || $[47] !== listStyle || $[48] !== props || $[49] !== ref || $[50] !== sticky || $[51] !== t10 || $[52] !== t11 || $[53] !== t12 || $[54] !== t13 || $[55] !== t14 || $[56] !== t15) {
+		t16 = /* @__PURE__ */ jsx(T1, {
+			...props,
+			contentContainerStyle: t10,
+			data: entries,
+			keyboardShouldPersistTaps: t11,
+			keyExtractor: keyOf,
+			ListEmptyComponent: t12,
+			ListFooterComponent: t13,
+			onEndReached: t14,
+			onEndReachedThreshold: t15,
+			ref,
+			renderItem: renderEntry,
+			stickyHeaderIndices: sticky,
+			style: listStyle
+		});
+		$[45] = T1;
+		$[46] = entries;
+		$[47] = listStyle;
+		$[48] = props;
+		$[49] = ref;
+		$[50] = sticky;
+		$[51] = t10;
+		$[52] = t11;
+		$[53] = t12;
+		$[54] = t13;
+		$[55] = t14;
+		$[56] = t15;
+		$[57] = t16;
+	} else t16 = $[57];
+	let t17;
+	if ($[58] !== autocomplete || $[59] !== rows) {
+		t17 = autocomplete === null ? null : /* @__PURE__ */ jsx(ResultsStatus, { count: rows });
+		$[58] = autocomplete;
+		$[59] = rows;
+		$[60] = t17;
+	} else t17 = $[60];
+	let t18;
+	if ($[61] !== T0 || $[62] !== t16 || $[63] !== t17 || $[64] !== value) {
+		t18 = /* @__PURE__ */ jsxs(T0, {
+			value,
+			children: [t16, t17]
+		});
+		$[61] = T0;
+		$[62] = t16;
+		$[63] = t17;
+		$[64] = value;
+		$[65] = t18;
+	} else t18 = $[65];
+	return t18;
+}
+/**
+* The row shown while more items are being fetched. `onLoadMore` is called
+* as the reader nears the end of the list, and the ring is drawn only while
+* `isLoading`, in a live region, so a screen reader hears it arrive. It
+* goes last, after the rows it loads more of.
+*/
+function ListLoadMore(_props) {
+	return null;
+}
+ListLoadMore.getCollectionNode = function* getCollectionNode(props) {
+	yield {
+		hasChildNodes: false,
+		props,
+		rendered: null,
+		type: "loader"
+	};
+};
+/**
+* One row. Its slots are ListItem's: `leading`, the headline as children,
+* `overline` above it, `supporting` under it, and `trailing`. Give every
+* row an `id`, which is the key selection is reported by. A list that
+* selects draws a checkbox before whatever `leading` holds.
+*
+* The list draws it from its entry in the collection, so it renders nothing
+* on its own. `style`, `ref` and `testID` land on the row.
+*/
+function ListRow(_props) {
+	return null;
+}
+ListRow.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"
+	};
+};
+/**
+* A group of rows under a heading, which stays at the top of the list while
+* the group's rows scroll under it.
+*/
+function ListSection(_props) {
+	return null;
+}
+ListSection.getCollectionNode = function* getCollectionNode(props) {
+	const children = [];
+	Children.forEach(props.children, (child) => {
+		if (child !== null && child !== void 0 && child !== false) children.push(child);
+	});
+	yield {
+		*childNodes() {
+			for (const element of children) yield { element };
+		},
+		hasChildNodes: true,
+		key: props.id,
+		props,
+		rendered: props.header,
+		type: "section"
+	};
+};
+/**
+* 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 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] === 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, {});
+}
+function EmptyState() {
+	const $ = c(4);
+	const t0 = useList();
+	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. The row that loads more is drawn
+* after them all.
+*/
+function entriesOf(state) {
+	const entries = [];
+	const sticky = [];
+	let loader;
+	let rows = 0;
+	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) {
+			entries.push({
+				kind: "item",
+				node: row
+			});
+			rows++;
+		}
+	} else {
+		entries.push({
+			kind: "item",
+			node
+		});
+		rows++;
+	}
+	return {
+		entries,
+		loader,
+		rows,
+		sticky
+	};
+}
+/**
+* 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);
+}
+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)}`;
+}
+/**
+* A row: the state layer, the ripple and the focus ring over the checkbox,
+* the leading slot, the lines and the trailing slot, on primary container
+* while selected. A row with nothing to do on a press, in a list that
+* neither selects nor acts, is a `View` that only presents.
+*/
+function ListRowNode(t0) {
+	const $ = c(117);
+	const { node } = t0;
+	const theme = useTheme();
+	const own = stylesOf(theme);
+	const list = useList();
+	let children;
+	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: t1, id: _id, isDisabled: _isDisabled, 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;
+		children = 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] = children;
+		$[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 {
+		children = $[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 { selectionManager } = list.state;
+	const { key } = node;
+	let action;
+	let acts;
+	let checks;
+	let disabled;
+	let select;
+	let selectable;
+	let selected;
+	let t1;
+	if ($[18] !== key || $[19] !== list.onAction || $[20] !== onAction || $[21] !== selectionManager || $[22] !== theme) {
+		disabled = selectionManager.isDisabled(key);
+		checks = selectionManager.selectionMode !== "none";
+		let t2;
+		if ($[31] !== key || $[32] !== selectionManager) {
+			t2 = selectionManager.canSelectItem(key);
+			$[31] = key;
+			$[32] = selectionManager;
+			$[33] = t2;
+		} else t2 = $[33];
+		selectable = t2;
+		selected = checks && selectionManager.isSelected(key);
+		const listAction = list.onAction;
+		let t3;
+		if ($[34] !== key || $[35] !== listAction || $[36] !== onAction) {
+			t3 = onAction ?? (listAction === void 0 ? void 0 : () => {
+				listAction(key);
+			});
+			$[34] = key;
+			$[35] = listAction;
+			$[36] = onAction;
+			$[37] = t3;
+		} else t3 = $[37];
+		action = t3;
+		acts = action !== void 0 && (!selectable || selectionManager.isEmpty);
+		let t4;
+		if ($[38] !== key || $[39] !== selectionManager) {
+			t4 = () => {
+				selectionManager.select(key);
+			};
+			$[38] = key;
+			$[39] = selectionManager;
+			$[40] = t4;
+		} else t4 = $[40];
+		select = t4;
+		t1 = rowContentColor(theme, {
+			isDisabled: disabled,
+			isSelected: selected
+		});
+		$[18] = key;
+		$[19] = list.onAction;
+		$[20] = onAction;
+		$[21] = selectionManager;
+		$[22] = theme;
+		$[23] = action;
+		$[24] = acts;
+		$[25] = checks;
+		$[26] = disabled;
+		$[27] = select;
+		$[28] = selectable;
+		$[29] = selected;
+		$[30] = t1;
+	} else {
+		action = $[23];
+		acts = $[24];
+		checks = $[25];
+		disabled = $[26];
+		select = $[27];
+		selectable = $[28];
+		selected = $[29];
+		t1 = $[30];
+	}
+	const content = t1;
+	let t2;
+	if ($[41] !== content || $[42] !== disabled || $[43] !== onBlur || $[44] !== onFocus || $[45] !== onHoverIn || $[46] !== onHoverOut || $[47] !== onPressIn || $[48] !== onPressOut) {
+		t2 = {
+			color: content,
+			disabled,
+			onBlur,
+			onFocus,
+			onHoverIn,
+			onHoverOut,
+			onPressIn,
+			onPressOut
+		};
+		$[41] = content;
+		$[42] = disabled;
+		$[43] = onBlur;
+		$[44] = onFocus;
+		$[45] = onHoverIn;
+		$[46] = onHoverOut;
+		$[47] = onPressIn;
+		$[48] = onPressOut;
+		$[49] = t2;
+	} else t2 = $[49];
+	const feedback = usePressFeedback(t2);
+	const lead = checks ? withBox(/* @__PURE__ */ jsx(SelectBox, {
+		isDisabled: disabled,
+		isSelected: selected,
+		onPress: acts && selectable ? select : void 0
+	}), leading, own.lead) : leading;
+	let t3;
+	if ($[50] !== children || $[51] !== disabled || $[52] !== lead || $[53] !== overline || $[54] !== selected || $[55] !== supporting || $[56] !== trailing) {
+		t3 = /* @__PURE__ */ jsx(RowContent, {
+			isDisabled: disabled,
+			isSelected: selected,
+			leading: lead,
+			overline,
+			supporting,
+			trailing,
+			children
+		});
+		$[50] = children;
+		$[51] = disabled;
+		$[52] = lead;
+		$[53] = overline;
+		$[54] = selected;
+		$[55] = supporting;
+		$[56] = trailing;
+		$[57] = t3;
+	} else t3 = $[57];
+	const lines = t3;
+	let T0;
+	let t10;
+	let t11;
+	let t12;
+	let t13;
+	let t14;
+	let t4;
+	let t5;
+	let t6;
+	let t7;
+	let t8;
+	let t9;
+	if ($[58] !== action || $[59] !== acts || $[60] !== checks || $[61] !== disabled || $[62] !== feedback || $[63] !== lines || $[64] !== list.selectLabel || $[65] !== onLongPress || $[66] !== onPress || $[67] !== overline || $[68] !== props || $[69] !== ref || $[70] !== select || $[71] !== selectable || $[72] !== selected || $[73] !== style || $[74] !== supporting || $[75] !== theme) {
+		t14 = Symbol.for("react.early_return_sentinel");
+		bb0: {
+			const rowStyle = rowStyleOf(theme, {
+				isSelected: selected,
+				overline,
+				supporting
+			});
+			if (!checks && action === void 0 && onPress === void 0) {
+				t14 = /* @__PURE__ */ jsx(View, {
+					"aria-disabled": disabled || void 0,
+					ref,
+					style: composeStyles(rowStyle, style),
+					testID: props.testID,
+					children: lines
+				});
+				break bb0;
+			}
+			T0 = Pressable;
+			t4 = "button";
+			t5 = props;
+			if ($[88] !== checks || $[89] !== selected) {
+				t6 = checks ? toggleState(selected) : void 0;
+				$[88] = checks;
+				$[89] = selected;
+				$[90] = t6;
+			} else t6 = $[90];
+			if ($[91] !== list.selectLabel || $[92] !== select || $[93] !== selectable) {
+				t7 = selectable ? {
+					accessibilityActions: [{
+						label: list.selectLabel,
+						name: "select"
+					}],
+					onAccessibilityAction: selectionActionOf(select)
+				} : void 0;
+				$[91] = list.selectLabel;
+				$[92] = select;
+				$[93] = selectable;
+				$[94] = t7;
+			} else t7 = $[94];
+			t8 = feedback.handlers;
+			t9 = disabled;
+			if ($[95] !== action || $[96] !== onLongPress || $[97] !== select || $[98] !== selectable) {
+				t10 = action !== void 0 && selectable ? pressThen(onLongPress, select) : onLongPress;
+				$[95] = action;
+				$[96] = onLongPress;
+				$[97] = select;
+				$[98] = selectable;
+				$[99] = t10;
+			} else t10 = $[99];
+			const t15 = acts ? action : selectable ? select : noop;
+			if ($[100] !== onPress || $[101] !== t15) {
+				t11 = pressThen(onPress, t15);
+				$[100] = onPress;
+				$[101] = t15;
+				$[102] = t11;
+			} else t11 = $[102];
+			t12 = ref;
+			t13 = composeStyles(rowStyle, feedback.ring, feedback.ring === void 0 ? void 0 : rowStyles.ring, style);
+		}
+		$[58] = action;
+		$[59] = acts;
+		$[60] = checks;
+		$[61] = disabled;
+		$[62] = feedback;
+		$[63] = lines;
+		$[64] = list.selectLabel;
+		$[65] = onLongPress;
+		$[66] = onPress;
+		$[67] = overline;
+		$[68] = props;
+		$[69] = ref;
+		$[70] = select;
+		$[71] = selectable;
+		$[72] = selected;
+		$[73] = style;
+		$[74] = supporting;
+		$[75] = theme;
+		$[76] = T0;
+		$[77] = t10;
+		$[78] = t11;
+		$[79] = t12;
+		$[80] = t13;
+		$[81] = t14;
+		$[82] = t4;
+		$[83] = t5;
+		$[84] = t6;
+		$[85] = t7;
+		$[86] = t8;
+		$[87] = t9;
+	} else {
+		T0 = $[76];
+		t10 = $[77];
+		t11 = $[78];
+		t12 = $[79];
+		t13 = $[80];
+		t14 = $[81];
+		t4 = $[82];
+		t5 = $[83];
+		t6 = $[84];
+		t7 = $[85];
+		t8 = $[86];
+		t9 = $[87];
+	}
+	if (t14 !== Symbol.for("react.early_return_sentinel")) return t14;
+	let t15;
+	if ($[103] !== T0 || $[104] !== feedback.layer || $[105] !== lines || $[106] !== t10 || $[107] !== t11 || $[108] !== t12 || $[109] !== t13 || $[110] !== t4 || $[111] !== t5 || $[112] !== t6 || $[113] !== t7 || $[114] !== t8 || $[115] !== t9) {
+		t15 = /* @__PURE__ */ jsxs(T0, {
+			role: t4,
+			...t5,
+			...t6,
+			...t7,
+			...t8,
+			disabled: t9,
+			onLongPress: t10,
+			onPress: t11,
+			ref: t12,
+			style: t13,
+			children: [feedback.layer, lines]
+		});
+		$[103] = T0;
+		$[104] = feedback.layer;
+		$[105] = lines;
+		$[106] = t10;
+		$[107] = t11;
+		$[108] = t12;
+		$[109] = t13;
+		$[110] = t4;
+		$[111] = t5;
+		$[112] = t6;
+		$[113] = t7;
+		$[114] = t8;
+		$[115] = t9;
+		$[116] = t15;
+	} else t15 = $[116];
+	return t15;
+}
+/**
+* The row `List.LoadMore` 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.
+*/
+function LoaderRow() {
+	const $ = c(10);
+	const own = stylesOf(useTheme());
+	const { isLoading: t0, label, style, testID } = useList().loadMore ?? IDLE;
+	const isLoading = t0 === void 0 ? false : t0;
+	let t1;
+	if ($[0] !== label) {
+		t1 = label ?? messagesFor().loadingMore;
+		$[0] = label;
+		$[1] = t1;
+	} else t1 = $[1];
+	const name = t1;
+	useLoadingAnnouncement(isLoading, name);
+	const T0 = View;
+	const t2 = "polite";
+	const t3 = composeStyles(isLoading ? own.loading : styles.idle, style);
+	let t4;
+	if ($[2] !== isLoading || $[3] !== name) {
+		t4 = isLoading ? /* @__PURE__ */ jsx(ProgressIndicator, {
+			"aria-label": name,
+			diameter: LOADING_DIAMETER,
+			isIndeterminate: true,
+			variant: "circular"
+		}) : null;
+		$[2] = isLoading;
+		$[3] = name;
+		$[4] = t4;
+	} else t4 = $[4];
+	let t5;
+	if ($[5] !== T0 || $[6] !== t3 || $[7] !== t4 || $[8] !== testID) {
+		t5 = /* @__PURE__ */ jsx(T0, {
+			"aria-live": t2,
+			style: t3,
+			testID,
+			children: t4
+		});
+		$[5] = T0;
+		$[6] = t3;
+		$[7] = t4;
+		$[8] = testID;
+		$[9] = t5;
+	} else t5 = $[9];
+	return t5;
+}
+function loadMoreOf({ isLoading = false, onLoadMore }) {
+	return () => {
+		if (!isLoading) onLoadMore?.();
+	};
+}
+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(ListRowNode, { node: item.node });
+}
+/**
+* How many rows a search leaves, 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.
+*/
+function ResultsStatus(t0) {
+	const $ = c(7);
+	const { count } = t0;
+	const t1 = useTheme();
+	let t2;
+	if ($[0] !== t1) {
+		t2 = stylesOf(t1);
+		$[0] = t1;
+		$[1] = t2;
+	} else t2 = $[1];
+	const own = t2;
+	let t3;
+	if ($[2] !== count) {
+		t3 = resultsFor(count);
+		$[2] = count;
+		$[3] = t3;
+	} else t3 = $[3];
+	const message = t3;
+	useResultsAnnouncement(message);
+	if (Platform.OS === "ios") return null;
+	let t4;
+	if ($[4] !== message || $[5] !== own.status) {
+		t4 = /* @__PURE__ */ jsx(View, {
+			"aria-live": "polite",
+			style: styles.status,
+			children: /* @__PURE__ */ jsx(Text, {
+				style: own.status,
+				children: message
+			})
+		});
+		$[4] = message;
+		$[5] = own.status;
+		$[6] = t4;
+	} else t4 = $[6];
+	return t4;
+}
+/** A section's heading, on the list's ground so the rows pass under it. */
+function SectionHeader(t0) {
+	const $ = c(10);
+	const { node } = t0;
+	const own = stylesOf(useTheme());
+	const title = useTypeRole("titleSmall");
+	const { ground } = useList();
+	const T0 = View;
+	let t1;
+	if ($[0] !== ground) {
+		t1 = composeStyles({ backgroundColor: ground });
+		$[0] = ground;
+		$[1] = t1;
+	} else t1 = $[1];
+	const T1 = Text;
+	const t2 = "heading";
+	const t3 = composeStyles(title, 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;
+}
+/**
+* The checkbox a 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;
+}
+function selectionActionOf(select) {
+	return (event) => {
+		if (event.nativeEvent.actionName === "select") select();
+	};
+}
+function useList() {
+	const list = use(ListContext);
+	if (list === null) throw new Error("A List part is drawn by the List it is in.");
+	return list;
+}
+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);
+}
+function useResultsAnnouncement(message) {
+	const $ = c(3);
+	const was = useRef(message);
+	let t0;
+	let t1;
+	if ($[0] !== message) {
+		t0 = () => {
+			if (message !== was.current && 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);
+}
+/**
+* The leading slot of a 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;
+}
+List.Item = ListRow;
+List.LoadMore = ListLoadMore;
+List.Section = ListSection;
+//#endregion
+export { List, ListLoadMore, ListRow, ListSection };
+
+//# sourceMappingURL=index.js.map