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

package/dist/components/list/index.js

@@ -1,70 +1,14 @@
-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 { toggleState } from "../../button/index.js";
-import { ProgressIndicator } from "../progress-indicator/index.js";
-import { CheckboxBox } from "../../control/checkbox-box.js";
+import { Collection, loaderNode, rowNode, sectionNode } from "../../collection/index.js";
 import { c } from "react/compiler-runtime";
-import { AccessibilityInfo, FlatList, Platform, Pressable, StyleSheet, Text, View } from "react-native";
-import { Children, createContext, use, useEffect, useRef } from "react";
-import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
-import { useListState } from "react-stately/useListState";
+import { jsx } from "react/jsx-runtime";
 //#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.
+* it or `defaultSelectedKeys` to let it keep its own. A list that selects
+* draws a checkbox on every row. A list whose rows do something takes
+* `onAction`, or an `onAction` on each row.
 *
 * ```tsx
 * <List aria-label="Label" selectionMode="multiple">
@@ -78,210 +22,26 @@ const ListContext = createContext(null);
 * 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`.
+* `scrollEnabled={false}` and is laid out at its full length. It is drawn
+* on surface, and a section's header stays at the top while its rows scroll
+* under it. `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(64);
-	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;
-	const messages = useMessages();
-	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;
-	const t8 = selectLabel ?? messages.select;
-	let t9;
-	if ($[34] !== ground || $[35] !== loadMore || $[36] !== onAction || $[37] !== renderEmptyState || $[38] !== state || $[39] !== t8) {
-		t9 = {
-			ground,
-			loadMore,
-			onAction,
-			renderEmptyState,
-			selectLabel: t8,
-			state
-		};
-		$[34] = ground;
-		$[35] = loadMore;
-		$[36] = onAction;
-		$[37] = renderEmptyState;
-		$[38] = state;
-		$[39] = t8;
-		$[40] = t9;
-	} else t9 = $[40];
-	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 ($[41] !== loadMore) {
-		t14 = loadMore === void 0 ? void 0 : loadMoreOf(loadMore);
-		$[41] = loadMore;
-		$[42] = t14;
-	} else t14 = $[42];
-	const t15 = loadMore?.scrollOffset ?? LOAD_OFFSET;
-	let t16;
-	if ($[43] !== T1 || $[44] !== entries || $[45] !== listStyle || $[46] !== props || $[47] !== ref || $[48] !== sticky || $[49] !== t10 || $[50] !== t11 || $[51] !== t12 || $[52] !== t13 || $[53] !== t14 || $[54] !== t15) {
-		t16 = /* @__PURE__ */ jsx(T1, {
+function List(props) {
+	const $ = c(2);
+	let t0;
+	if ($[0] !== props) {
+		t0 = /* @__PURE__ */ jsx(Collection, {
 			...props,
-			contentContainerStyle: t10,
-			data: entries,
-			keyboardShouldPersistTaps: t11,
-			keyExtractor: keyOf,
-			ListEmptyComponent: t12,
-			ListFooterComponent: t13,
-			onEndReached: t14,
-			onEndReachedThreshold: t15,
-			ref,
-			renderItem: renderEntry,
-			stickyHeaderIndices: sticky,
-			style: listStyle
-		});
-		$[43] = T1;
-		$[44] = entries;
-		$[45] = listStyle;
-		$[46] = props;
-		$[47] = ref;
-		$[48] = sticky;
-		$[49] = t10;
-		$[50] = t11;
-		$[51] = t12;
-		$[52] = t13;
-		$[53] = t14;
-		$[54] = t15;
-		$[55] = t16;
-	} else t16 = $[55];
-	let t17;
-	if ($[56] !== autocomplete || $[57] !== rows) {
-		t17 = autocomplete === null ? null : /* @__PURE__ */ jsx(ResultsStatus, { count: rows });
-		$[56] = autocomplete;
-		$[57] = rows;
-		$[58] = t17;
-	} else t17 = $[58];
-	let t18;
-	if ($[59] !== T0 || $[60] !== t16 || $[61] !== t17 || $[62] !== value) {
-		t18 = /* @__PURE__ */ jsxs(T0, {
-			value,
-			children: [t16, t17]
+			kind: "list"
 		});
-		$[59] = T0;
-		$[60] = t16;
-		$[61] = t17;
-		$[62] = value;
-		$[63] = t18;
-	} else t18 = $[63];
-	return t18;
+		$[0] = props;
+		$[1] = t0;
+	} else t0 = $[1];
+	return t0;
 }
 /**
 * The row shown while more items are being fetched. `onLoadMore` is called
@@ -292,14 +52,7 @@ function List(t0) {
 function ListLoadMore(_props) {
 	return null;
 }
-ListLoadMore.getCollectionNode = function* getCollectionNode(props) {
-	yield {
-		hasChildNodes: false,
-		props,
-		rendered: null,
-		type: "loader"
-	};
-};
+ListLoadMore.getCollectionNode = loaderNode;
 /**
 * One row. Its slots are ListItem's: `leading`, the headline as children,
 * `overline` above it, `supporting` under it, and `trailing`. Give every
@@ -312,17 +65,7 @@ ListLoadMore.getCollectionNode = function* getCollectionNode(props) {
 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"
-	};
-};
+ListRow.getCollectionNode = rowNode;
 /**
 * A group of rows under a heading, which stays at the top of the list while
 * the group's rows scroll under it.
@@ -330,776 +73,7 @@ ListRow.getCollectionNode = function* getCollectionNode(props) {
 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 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 = 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(8);
-	const own = stylesOf(useTheme());
-	const { isLoading: t0, label, style, testID } = useList().loadMore ?? IDLE;
-	const isLoading = t0 === void 0 ? false : t0;
-	const messages = useMessages();
-	const name = label ?? messages.loadingMore;
-	useLoadingAnnouncement(isLoading, name);
-	const T0 = View;
-	const t1 = "polite";
-	const t2 = composeStyles(isLoading ? own.loading : styles.idle, style);
-	let t3;
-	if ($[0] !== isLoading || $[1] !== name) {
-		t3 = isLoading ? /* @__PURE__ */ jsx(ProgressIndicator, {
-			"aria-label": name,
-			diameter: LOADING_DIAMETER,
-			isIndeterminate: true,
-			variant: "circular"
-		}) : null;
-		$[0] = isLoading;
-		$[1] = name;
-		$[2] = t3;
-	} else t3 = $[2];
-	let t4;
-	if ($[3] !== T0 || $[4] !== t2 || $[5] !== t3 || $[6] !== testID) {
-		t4 = /* @__PURE__ */ jsx(T0, {
-			"aria-live": t1,
-			style: t2,
-			testID,
-			children: t3
-		});
-		$[3] = T0;
-		$[4] = t2;
-		$[5] = t3;
-		$[6] = testID;
-		$[7] = t4;
-	} else t4 = $[7];
-	return t4;
-}
-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(8);
-	const { count } = t0;
-	const t1 = useTheme();
-	let t2;
-	if ($[0] !== t1) {
-		t2 = stylesOf(t1);
-		$[0] = t1;
-		$[1] = t2;
-	} else t2 = $[1];
-	const own = t2;
-	const locale = useLocaleOf(void 0);
-	let t3;
-	if ($[2] !== count || $[3] !== locale) {
-		t3 = resultsFor(count, locale);
-		$[2] = count;
-		$[3] = locale;
-		$[4] = t3;
-	} else t3 = $[4];
-	const message = t3;
-	useResultsAnnouncement(message);
-	if (Platform.OS === "ios") return null;
-	let t4;
-	if ($[5] !== message || $[6] !== own.status) {
-		t4 = /* @__PURE__ */ jsx(View, {
-			"aria-live": "polite",
-			style: styles.status,
-			children: /* @__PURE__ */ jsx(Text, {
-				style: own.status,
-				children: message
-			})
-		});
-		$[5] = message;
-		$[6] = own.status;
-		$[7] = t4;
-	} else t4 = $[7];
-	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;
-}
+ListSection.getCollectionNode = sectionNode;
 List.Item = ListRow;
 List.LoadMore = ListLoadMore;
 List.Section = ListSection;