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

package/dist/components/table/index.js

@@ -0,0 +1,1708 @@
+import { IconStyleContext } from "../../glyphs/icon-style.js";
+import { useTheme } from "../../theme/scope.js";
+import { composeStyles, themedStyles } from "../../theme/styles.js";
+import { usePressFeedback } from "../../press/index.js";
+import { useTypeRole } from "../../typography/roles.js";
+import { rowContentColor, rowStyles } from "../../row/styles.js";
+import { columnSizeFor, sortedFor } from "../../i18n/index.js";
+import { useLocaleOf, useMessages } from "../../i18n/provider.js";
+import { ArrowDownwardGlyph, ArrowUpwardGlyph } from "../../glyphs/index.js";
+import { useOpenLink } from "../../router/index.js";
+import { toggleState } from "../../button/index.js";
+import { Checkbox } from "../checkbox/index.js";
+import { ADJUSTABLE, SLOP_RANGE } from "../../slider/index.js";
+import { LoadingRow, SelectBox, Status, accessibilityActionOf, childElementsOf, loadMoreOf, noop, pressThen } from "../../collection/index.js";
+import { c } from "react/compiler-runtime";
+import { FlatList, I18nManager, Pressable, ScrollView, StyleSheet, Text, View, useWindowDimensions } from "react-native";
+import { useSharedValue } from "react-native-reanimated";
+import { Children, createContext, isValidElement, use, useState } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+import { Gesture, GestureDetector, GestureHandlerRootView } from "react-native-gesture-handler";
+import { useTableColumnResizeState, useTableState } from "react-stately/useTableState";
+//#region src/components/table/index.tsx
+const ROW_HEIGHT = 52;
+const ARROW_SIZE = 18;
+const HANDLE = 24;
+const RESIZE_STEP = 10;
+const FLEXIBLE = "1fr";
+const MIN_WIDTH = 75;
+const styles = StyleSheet.create({
+	grid: { flexDirection: "column" },
+	handle: {
+		bottom: 0,
+		position: "absolute",
+		top: 0,
+		width: HANDLE
+	},
+	handleLast: { width: HANDLE / 2 },
+	handles: {
+		bottom: 0,
+		left: 0,
+		pointerEvents: "box-none",
+		position: "absolute",
+		right: 0,
+		top: 0
+	},
+	rule: {
+		bottom: 0,
+		end: HANDLE / 2,
+		position: "absolute",
+		top: 0,
+		width: 1
+	},
+	ruleLast: { end: 0 },
+	selection: { alignItems: "center" }
+});
+const stylesOf = themedStyles(({ colors, sizing, spacing }) => StyleSheet.create({
+	cell: {
+		justifyContent: "center",
+		paddingHorizontal: spacing.lg
+	},
+	empty: {
+		alignItems: "center",
+		paddingHorizontal: spacing.lg,
+		paddingVertical: spacing.xxl
+	},
+	emptyText: {
+		color: colors.onSurfaceVariant,
+		textAlign: "center"
+	},
+	footer: {
+		borderTopColor: colors.outlineVariant,
+		borderTopWidth: 1
+	},
+	footerText: { color: colors.onSurfaceVariant },
+	header: {
+		borderBottomColor: colors.outlineVariant,
+		borderBottomWidth: 1,
+		flexDirection: "row",
+		minHeight: sizing.rowSm
+	},
+	headerContent: {
+		alignItems: "center",
+		flexDirection: "row",
+		gap: spacing.sm
+	},
+	headerText: {
+		color: colors.onSurfaceVariant,
+		flexShrink: 1
+	},
+	loading: { minHeight: ROW_HEIGHT },
+	row: {
+		flexDirection: "row",
+		minHeight: ROW_HEIGHT
+	},
+	rowRule: {
+		borderTopColor: colors.outlineVariant,
+		borderTopWidth: 1
+	},
+	ruleLine: { backgroundColor: colors.outlineVariant },
+	ruleResizing: {
+		backgroundColor: colors.primary,
+		width: 2
+	},
+	selected: { backgroundColor: colors.primaryContainer }
+}));
+const TableContext = createContext(null);
+/**
+* A cell of a body row, its column's width or the columns' it spans: its
+* text in body medium and the row's content colour, or what it was given,
+* with an icon in it drawn in that colour, or the row's checkbox.
+*/
+function BodyCell(t0) {
+	const $ = c(18);
+	const { cell, color, isDisabled, isSelected, onSelect } = t0;
+	const own = stylesOf(useTheme());
+	const table = useTable();
+	const text = useTypeRole("bodyMedium");
+	let t1;
+	if ($[0] !== color) {
+		t1 = {
+			color,
+			size: 24
+		};
+		$[0] = color;
+		$[1] = t1;
+	} else t1 = $[1];
+	const icon = t1;
+	const { selection: t2, style, testID } = cell.props;
+	const selection = t2 === void 0 ? false : t2;
+	const width = spanWidthOf(table, cell);
+	if (selection) {
+		let t3;
+		if ($[2] !== isDisabled || $[3] !== isSelected || $[4] !== onSelect) {
+			t3 = /* @__PURE__ */ jsx(SelectBox, {
+				isDisabled,
+				isSelected,
+				onPress: onSelect
+			});
+			$[2] = isDisabled;
+			$[3] = isSelected;
+			$[4] = onSelect;
+			$[5] = t3;
+		} else t3 = $[5];
+		return /* @__PURE__ */ jsx(View, {
+			style: composeStyles(own.cell, styles.selection, { width }, style),
+			testID,
+			children: t3
+		});
+	}
+	const T0 = View;
+	const t3 = composeStyles(own.cell, { width }, style);
+	let t4;
+	if ($[6] !== cell.rendered || $[7] !== color || $[8] !== text) {
+		t4 = isTextual(cell.rendered) ? /* @__PURE__ */ jsx(Text, {
+			style: composeStyles(text, { color }),
+			children: cell.rendered
+		}) : cell.rendered;
+		$[6] = cell.rendered;
+		$[7] = color;
+		$[8] = text;
+		$[9] = t4;
+	} else t4 = $[9];
+	let t5;
+	if ($[10] !== icon || $[11] !== t4) {
+		t5 = /* @__PURE__ */ jsx(IconStyleContext, {
+			value: icon,
+			children: t4
+		});
+		$[10] = icon;
+		$[11] = t4;
+		$[12] = t5;
+	} else t5 = $[12];
+	let t6;
+	if ($[13] !== T0 || $[14] !== t3 || $[15] !== t5 || $[16] !== testID) {
+		t6 = /* @__PURE__ */ jsx(T0, {
+			style: t3,
+			testID,
+			children: t5
+		});
+		$[13] = T0;
+		$[14] = t3;
+		$[15] = t5;
+		$[16] = testID;
+		$[17] = t6;
+	} else t6 = $[17];
+	return t6;
+}
+function* bodyNode(props) {
+	const { children, items } = props;
+	yield {
+		*childNodes() {
+			if (typeof children === "function") {
+				for (const value of items ?? []) yield {
+					renderer: children,
+					type: "item",
+					value
+				};
+				return;
+			}
+			for (const element of childElementsOf(children)) if (!isLoadMore(element)) yield {
+				element,
+				type: "item"
+			};
+		},
+		hasChildNodes: true,
+		props,
+		type: "body"
+	};
+}
+/**
+* A row of the body: the state layer, the ripple and the focus ring over its
+* cells, on primary container while selected and faded while disabled. A row
+* with nothing to do on a press, in a table that neither selects nor acts, is
+* a `View` that only presents.
+*/
+function BodyRow(t0) {
+	const $ = c(52);
+	const { index, node } = t0;
+	const theme = useTheme();
+	const own = stylesOf(theme);
+	const table = useTable();
+	const openLink = useOpenLink();
+	let href;
+	let onAction;
+	let onBlur;
+	let onFocus;
+	let onHoverIn;
+	let onHoverOut;
+	let onLongPress;
+	let onPress;
+	let onPressIn;
+	let onPressOut;
+	let props;
+	let ref;
+	let style;
+	if ($[0] !== node.props) {
+		const { children: _children, href: t1, id: _id, isDisabled: _isDisabled, onAction: t2, onBlur: t3, onFocus: t4, onHoverIn: t5, onHoverOut: t6, onLongPress: t7, onPress: t8, onPressIn: t9, onPressOut: t10, ref: t11, style: t12, textValue: _textValue, value: _value, ...t13 } = node.props;
+		href = t1;
+		onAction = t2;
+		onBlur = t3;
+		onFocus = t4;
+		onHoverIn = t5;
+		onHoverOut = t6;
+		onLongPress = t7;
+		onPress = t8;
+		onPressIn = t9;
+		onPressOut = t10;
+		ref = t11;
+		style = t12;
+		props = t13;
+		$[0] = node.props;
+		$[1] = href;
+		$[2] = onAction;
+		$[3] = onBlur;
+		$[4] = onFocus;
+		$[5] = onHoverIn;
+		$[6] = onHoverOut;
+		$[7] = onLongPress;
+		$[8] = onPress;
+		$[9] = onPressIn;
+		$[10] = onPressOut;
+		$[11] = props;
+		$[12] = ref;
+		$[13] = style;
+	} else {
+		href = $[1];
+		onAction = $[2];
+		onBlur = $[3];
+		onFocus = $[4];
+		onHoverIn = $[5];
+		onHoverOut = $[6];
+		onLongPress = $[7];
+		onPress = $[8];
+		onPressIn = $[9];
+		onPressOut = $[10];
+		props = $[11];
+		ref = $[12];
+		style = $[13];
+	}
+	const { selectionManager } = table.state;
+	const { key } = node;
+	const disabled = selectionManager.isDisabled(key);
+	const checks = selectionManager.selectionMode !== "none";
+	let t1;
+	if ($[14] !== key || $[15] !== selectionManager) {
+		t1 = selectionManager.canSelectItem(key);
+		$[14] = key;
+		$[15] = selectionManager;
+		$[16] = t1;
+	} else t1 = $[16];
+	const selectable = t1;
+	const selected = checks && selectionManager.isSelected(key);
+	const marked = selected && !disabled;
+	const rowAction = table.onRowAction;
+	let t2;
+	if ($[17] !== href || $[18] !== key || $[19] !== onAction || $[20] !== openLink || $[21] !== rowAction) {
+		t2 = onAction ?? (href === void 0 ? rowAction === void 0 ? void 0 : () => {
+			rowAction(key);
+		} : () => {
+			openLink(href);
+		});
+		$[17] = href;
+		$[18] = key;
+		$[19] = onAction;
+		$[20] = openLink;
+		$[21] = rowAction;
+		$[22] = t2;
+	} else t2 = $[22];
+	const action = t2;
+	const acts = action !== void 0 && (!selectable || selectionManager.isEmpty);
+	let t3;
+	if ($[23] !== key || $[24] !== selectionManager) {
+		t3 = () => {
+			selectionManager.select(key);
+		};
+		$[23] = key;
+		$[24] = selectionManager;
+		$[25] = t3;
+	} else t3 = $[25];
+	const select = t3;
+	const content = rowContentColor(theme, {
+		isDisabled: disabled,
+		isSelected: marked
+	});
+	const feedback = usePressFeedback({
+		color: content,
+		disabled,
+		onBlur,
+		onFocus,
+		onHoverIn,
+		onHoverOut,
+		onPressIn,
+		onPressOut
+	});
+	const cells = [...table.state.collection.getChildren?.(key) ?? []].map((cell) => /* @__PURE__ */ jsx(BodyCell, {
+		cell,
+		color: content,
+		isDisabled: disabled,
+		isSelected: selected,
+		onSelect: acts && selectable ? select : void 0
+	}, cell.key));
+	const rowStyle = composeStyles(own.row, index > 0 ? own.rowRule : void 0, marked ? own.selected : void 0);
+	if (!checks && action === void 0 && onPress === void 0) return /* @__PURE__ */ jsx(View, {
+		"aria-disabled": disabled || void 0,
+		ref,
+		style: composeStyles(rowStyle, style),
+		testID: props.testID,
+		children: cells
+	});
+	const T0 = Pressable;
+	const t4 = href === void 0 ? "button" : "link";
+	const t5 = checks ? toggleState(selected) : void 0;
+	let t6;
+	if ($[26] !== select || $[27] !== selectable || $[28] !== table.selectLabel) {
+		t6 = selectable ? {
+			accessibilityActions: [{
+				label: table.selectLabel,
+				name: "select"
+			}],
+			onAccessibilityAction: accessibilityActionOf({
+				collapse: void 0,
+				expand: void 0,
+				select
+			})
+		} : void 0;
+		$[26] = select;
+		$[27] = selectable;
+		$[28] = table.selectLabel;
+		$[29] = t6;
+	} else t6 = $[29];
+	const t7 = feedback.handlers;
+	let t8;
+	if ($[30] !== action || $[31] !== onLongPress || $[32] !== select || $[33] !== selectable) {
+		t8 = action !== void 0 && selectable ? pressThen(onLongPress, select) : onLongPress;
+		$[30] = action;
+		$[31] = onLongPress;
+		$[32] = select;
+		$[33] = selectable;
+		$[34] = t8;
+	} else t8 = $[34];
+	const t9 = acts ? action : selectable ? select : noop;
+	let t10;
+	if ($[35] !== onPress || $[36] !== t9) {
+		t10 = pressThen(onPress, t9);
+		$[35] = onPress;
+		$[36] = t9;
+		$[37] = t10;
+	} else t10 = $[37];
+	const t11 = composeStyles(rowStyle, feedback.ring, feedback.ring === void 0 ? void 0 : rowStyles.ring, style);
+	let t12;
+	if ($[38] !== T0 || $[39] !== cells || $[40] !== disabled || $[41] !== feedback.handlers || $[42] !== feedback.layer || $[43] !== props || $[44] !== ref || $[45] !== t10 || $[46] !== t11 || $[47] !== t4 || $[48] !== t5 || $[49] !== t6 || $[50] !== t8) {
+		t12 = /* @__PURE__ */ jsxs(T0, {
+			role: t4,
+			...props,
+			...t5,
+			...t6,
+			...t7,
+			disabled,
+			onLongPress: t8,
+			onPress: t10,
+			ref,
+			style: t11,
+			children: [feedback.layer, cells]
+		});
+		$[38] = T0;
+		$[39] = cells;
+		$[40] = disabled;
+		$[41] = feedback.handlers;
+		$[42] = feedback.layer;
+		$[43] = props;
+		$[44] = ref;
+		$[45] = t10;
+		$[46] = t11;
+		$[47] = t4;
+		$[48] = t5;
+		$[49] = t6;
+		$[50] = t8;
+		$[51] = t12;
+	} else t12 = $[51];
+	return t12;
+}
+function* cellNode(props) {
+	yield {
+		hasChildNodes: false,
+		props,
+		rendered: props.children,
+		textValue: props.textValue ?? (typeof props.children === "string" ? props.children : ""),
+		type: "cell"
+	};
+}
+/**
+* A column's header: its name in label large and the muted role, with the
+* arrow after it while the rows are sorted by it, as a button that sorts
+* where the column allows it, or the select-all checkbox.
+*/
+function ColumnHeader(t0) {
+	const $ = c(23);
+	const { column } = t0;
+	const theme = useTheme();
+	const own = stylesOf(theme);
+	const table = useTable();
+	const messages = useMessages();
+	const label = useTypeRole("labelLarge");
+	const { selectionManager } = table.state;
+	const { allowsSorting: t1, selection: t2, style, testID } = column.props;
+	const allowsSorting = t1 === void 0 ? false : t1;
+	const selection = t2 === void 0 ? false : t2;
+	const { sortDescriptor } = table.state;
+	const direction = sortDescriptor?.column === column.key ? sortDescriptor.direction : void 0;
+	let t3;
+	if ($[0] !== theme.colors.onSurface) {
+		t3 = { color: theme.colors.onSurface };
+		$[0] = theme.colors.onSurface;
+		$[1] = t3;
+	} else t3 = $[1];
+	const feedback = usePressFeedback(t3);
+	const cellStyle = composeStyles(own.cell, { width: table.layout.getColumnWidth(column.key) });
+	if (selection) {
+		const mode = selectionManager.selectionMode;
+		const t4 = composeStyles(cellStyle, styles.selection, style);
+		const t5 = table.selectAllLabel ?? (mode === "single" ? messages.select : messages.table.selectAll);
+		const t6 = mode !== "multiple" || table.state.collection.size === 0;
+		const t7 = !selectionManager.isEmpty && !selectionManager.isSelectAll;
+		const t8 = selectionManager.isSelectAll;
+		let t9;
+		if ($[2] !== table.state) {
+			t9 = selectAllOf(table.state);
+			$[2] = table.state;
+			$[3] = t9;
+		} else t9 = $[3];
+		let t10;
+		if ($[4] !== selectionManager.isSelectAll || $[5] !== t5 || $[6] !== t6 || $[7] !== t7 || $[8] !== t9) {
+			t10 = /* @__PURE__ */ jsx(Checkbox, {
+				"aria-label": t5,
+				isDisabled: t6,
+				isIndeterminate: t7,
+				isSelected: t8,
+				onChange: t9
+			});
+			$[4] = selectionManager.isSelectAll;
+			$[5] = t5;
+			$[6] = t6;
+			$[7] = t7;
+			$[8] = t9;
+			$[9] = t10;
+		} else t10 = $[9];
+		return /* @__PURE__ */ jsx(View, {
+			style: t4,
+			testID,
+			children: t10
+		});
+	}
+	const arrowColor = theme.colors.onSurfaceVariant;
+	let t4;
+	if ($[10] !== arrowColor || $[11] !== direction) {
+		t4 = direction === void 0 ? null : direction === "ascending" ? /* @__PURE__ */ jsx(ArrowUpwardGlyph, {
+			color: arrowColor,
+			size: ARROW_SIZE
+		}) : /* @__PURE__ */ jsx(ArrowDownwardGlyph, {
+			color: arrowColor,
+			size: ARROW_SIZE
+		});
+		$[10] = arrowColor;
+		$[11] = direction;
+		$[12] = t4;
+	} else t4 = $[12];
+	const name = /* @__PURE__ */ jsxs(View, {
+		style: own.headerContent,
+		children: [isTextual(column.rendered) ? /* @__PURE__ */ jsx(Text, {
+			style: composeStyles(label, own.headerText),
+			children: column.rendered
+		}) : column.rendered, t4]
+	});
+	if (!allowsSorting) return /* @__PURE__ */ jsx(View, {
+		style: composeStyles(cellStyle, style),
+		testID,
+		children: name
+	});
+	let t5;
+	if ($[13] !== direction || $[14] !== messages.table) {
+		t5 = direction === void 0 ? [] : [messages.table[direction]];
+		$[13] = direction;
+		$[14] = messages.table;
+		$[15] = t5;
+	} else t5 = $[15];
+	let t6;
+	if ($[16] !== column.textValue || $[17] !== messages.table.sortable || $[18] !== t5) {
+		t6 = [
+			column.textValue,
+			messages.table.sortable,
+			...t5
+		];
+		$[16] = column.textValue;
+		$[17] = messages.table.sortable;
+		$[18] = t5;
+		$[19] = t6;
+	} else t6 = $[19];
+	const t7 = t6.join(", ");
+	const t8 = feedback.handlers;
+	let t9;
+	if ($[20] !== column.key || $[21] !== table.state) {
+		t9 = sortOf(table.state, column.key);
+		$[20] = column.key;
+		$[21] = table.state;
+		$[22] = t9;
+	} else t9 = $[22];
+	return /* @__PURE__ */ jsxs(Pressable, {
+		"aria-label": t7,
+		role: "button",
+		...t8,
+		onPress: t9,
+		style: composeStyles(cellStyle, feedback.ring, feedback.ring === void 0 ? void 0 : rowStyles.ring, style),
+		testID,
+		children: [feedback.layer, name]
+	});
+}
+function* columnNode(props, context) {
+	const nodes = yield {
+		hasChildNodes: false,
+		key: props.id,
+		props,
+		rendered: props.children,
+		shouldInvalidate(next) {
+			next.columns.push(...nodes);
+			return false;
+		},
+		textValue: props.textValue ?? (typeof props.children === "string" ? props.children : ""),
+		type: "column"
+	};
+	context.columns.push(...nodes);
+}
+/**
+* The widths a column takes before anything says otherwise: React Stately's
+* own, and a checkbox's column as wide as its box and its padding, which it
+* keeps, since it holds one control and should not take a column of data's
+* room.
+*/
+function defaultsOf(selectionWidth) {
+	return {
+		getDefaultMinWidth: (node) => isSelection(node) ? selectionWidth : MIN_WIDTH,
+		getDefaultWidth: (node) => isSelection(node) ? selectionWidth : FLEXIBLE
+	};
+}
+/**
+* What the body shows in place of rows, from its `renderEmptyState`, as the
+* component `ListEmptyComponent` takes.
+*/
+function EmptyBody() {
+	const $ = c(4);
+	const own = stylesOf(useTheme());
+	const text = useTypeRole("bodyMedium");
+	const shown = useTable().renderEmptyState?.();
+	const T0 = View;
+	const t0 = isTextual(shown) ? /* @__PURE__ */ jsx(Text, {
+		style: composeStyles(text, own.emptyText),
+		children: shown
+	}) : shown;
+	let t1;
+	if ($[0] !== T0 || $[1] !== own || $[2] !== t0) {
+		t1 = /* @__PURE__ */ jsx(T0, {
+			style: own.empty,
+			children: t0
+		});
+		$[0] = T0;
+		$[1] = own;
+		$[2] = t0;
+		$[3] = t1;
+	} else t1 = $[3];
+	return t1;
+}
+/**
+* Where each column ends, from the table's start, which is where its resize
+* handle is centred.
+*/
+function endsOf(table) {
+	const ends = [];
+	let end = 0;
+	for (const column of table.columns) {
+		end += table.layout.getColumnWidth(column.key);
+		ends.push(end);
+	}
+	return ends;
+}
+/**
+* The rows under the body, in label large and the muted role, under a rule
+* of their own, each cell its column's width or the columns' it spans. They
+* take no press and no selection, as React Aria keeps a footer out of both.
+*/
+function FooterRows() {
+	const $ = c(5);
+	const own = stylesOf(useTheme());
+	const table = useTable();
+	const label = useTypeRole("labelLarge");
+	const { footer } = table;
+	if (footer === void 0) return null;
+	const T0 = View;
+	const t0 = composeStyles(own.footer, footer.style);
+	const t1 = footer.testID;
+	const t2 = childElementsOf(footer.children).map((row, rowIndex) => {
+		if (!isValidElement(row)) return null;
+		let start = 0;
+		const cells = childElementsOf(typeof row.props.children === "function" ? null : row.props.children).map((cell, cellIndex) => {
+			if (!isValidElement(cell)) return null;
+			const span = cell.props.colSpan ?? 1;
+			const width = widthAcross(table, start, span);
+			start = start + span;
+			return /* @__PURE__ */ jsx(View, {
+				style: composeStyles(own.cell, { width }, cell.props.style),
+				testID: cell.props.testID,
+				children: isTextual(cell.props.children) ? /* @__PURE__ */ jsx(Text, {
+					style: composeStyles(label, own.footerText),
+					children: cell.props.children
+				}) : cell.props.children
+			}, cell.key ?? cellIndex);
+		});
+		return /* @__PURE__ */ jsx(View, {
+			style: composeStyles(own.row, rowIndex > 0 ? own.rowRule : void 0, row.props.style),
+			testID: row.props.testID,
+			children: cells
+		}, row.key ?? rowIndex);
+	});
+	let t3;
+	if ($[0] !== T0 || $[1] !== footer.testID || $[2] !== t0 || $[3] !== t2) {
+		t3 = /* @__PURE__ */ jsx(T0, {
+			style: t0,
+			testID: t1,
+			children: t2
+		});
+		$[0] = T0;
+		$[1] = footer.testID;
+		$[2] = t0;
+		$[3] = t2;
+		$[4] = t3;
+	} else t3 = $[4];
+	return t3;
+}
+function* headerNodes(props, context) {
+	const { children, columns } = props;
+	context.columns = [];
+	if (typeof children === "function") {
+		for (const value of columns ?? []) yield {
+			renderer: children,
+			type: "column",
+			value
+		};
+		return;
+	}
+	for (const element of childElementsOf(children)) yield {
+		element,
+		type: "column"
+	};
+}
+/**
+* The header row: each column's header, its column's width, and the resize
+* handles over them in a table that resizes.
+*/
+function HeaderRow() {
+	const $ = c(10);
+	const own = stylesOf(useTheme());
+	const table = useTable();
+	const { header } = table;
+	const T0 = View;
+	const t0 = composeStyles(own.header, header.style);
+	const t1 = header.testID;
+	let t2;
+	if ($[0] !== table.columns) {
+		t2 = table.columns.map(_temp);
+		$[0] = table.columns;
+		$[1] = t2;
+	} else t2 = $[1];
+	let t3;
+	if ($[2] !== table.resizable) {
+		t3 = table.resizable ? /* @__PURE__ */ jsx(ResizeHandles, {}) : null;
+		$[2] = table.resizable;
+		$[3] = t3;
+	} else t3 = $[3];
+	let t4;
+	if ($[4] !== T0 || $[5] !== header.testID || $[6] !== t0 || $[7] !== t2 || $[8] !== t3) {
+		t4 = /* @__PURE__ */ jsxs(T0, {
+			style: t0,
+			testID: t1,
+			children: [t2, t3]
+		});
+		$[4] = T0;
+		$[5] = header.testID;
+		$[6] = t0;
+		$[7] = t2;
+		$[8] = t3;
+		$[9] = t4;
+	} else t4 = $[9];
+	return t4;
+}
+function _temp(column) {
+	return /* @__PURE__ */ jsx(ColumnHeader, { column }, column.key);
+}
+function isLoadMore(element) {
+	return isValidElement(element) && element.type === TableLoadMore;
+}
+function isSelection(node) {
+	return node.props?.selection === true;
+}
+/**
+* Whether what a cell holds is text alone, which it sets in its own type
+* role, as React Native draws text only inside a Text.
+*/
+function isTextual(node) {
+	const parts = Children.toArray(node);
+	return parts.length > 0 && parts.every((part) => typeof part === "string" || typeof part === "number");
+}
+function keyOf(node) {
+	return String(node.key);
+}
+/**
+* The part `type` of the table's children, or what is left out: the header,
+* the body and the footer are each read off their own part.
+*/
+function partOf(children, type) {
+	return childElementsOf(children).find((child) => isValidElement(child) && child.type === type);
+}
+function renderRow({ index, item }) {
+	return /* @__PURE__ */ jsx(BodyRow, {
+		index,
+		node: item
+	});
+}
+/**
+* A column's resize handle: a target centred on its trailing edge holding
+* the divider's rule, which a drag along the header moves, and a slider to a
+* screen reader, stepped by `RESIZE_STEP`. A drag starting on it holds the
+* table's sideways scroll still.
+*/
+function ResizeHandle(t0) {
+	const $ = c(36);
+	const { column, end, isLast } = t0;
+	const own = stylesOf(useTheme());
+	const table = useTable();
+	const locale = useLocaleOf(void 0);
+	const { layout, native, onResize, onResizeEnd } = table;
+	const { key } = column;
+	const from = useSharedValue(-1);
+	const last = useSharedValue(0);
+	let t1;
+	if ($[0] !== key || $[1] !== layout) {
+		t1 = layout.getColumnWidth(key);
+		$[0] = key;
+		$[1] = layout;
+		$[2] = t1;
+	} else t1 = $[2];
+	const width = t1;
+	const resizing = layout.resizingColumn === key;
+	const begin = function begin() {
+		from.set(layout.getColumnWidth(key));
+		last.set(layout.getColumnWidth(key));
+		layout.startResize(key);
+	};
+	const move = function move(translation) {
+		const start = from.get();
+		if (start < 0) return;
+		const next = start + (I18nManager.isRTL ? -translation : translation);
+		last.set(next);
+		onResize?.(layout.updateResizedColumns(key, next));
+	};
+	const finish = function finish() {
+		if (from.get() < 0) return;
+		from.set(-1);
+		const sizes = layout.updateResizedColumns(key, last.get());
+		layout.endResize();
+		onResizeEnd?.(sizes);
+	};
+	const drag = Gesture.Pan().activeOffsetX(SLOP_RANGE).failOffsetY(SLOP_RANGE).runOnJS(true).onStart((t2) => {
+		const { translationX } = t2;
+		begin();
+		move(translationX);
+	}).onUpdate((t3) => {
+		const { translationX: translationX_0 } = t3;
+		move(translationX_0);
+	}).onFinalize(() => {
+		finish();
+	});
+	const held = native === void 0 ? drag : drag.blocksExternalGesture(native);
+	const pan = table.testID === void 0 ? held : held.withTestId(`${table.testID}-resize-${String(key)}`);
+	const T0 = GestureDetector;
+	const T1 = View;
+	const t4 = ADJUSTABLE;
+	const t5 = true;
+	const t6 = `${table.resizeLabel} ${column.textValue}`;
+	let t7;
+	if ($[3] !== key || $[4] !== layout) {
+		t7 = layout.getColumnMaxWidth(key);
+		$[3] = key;
+		$[4] = layout;
+		$[5] = t7;
+	} else t7 = $[5];
+	const t8 = Math.floor(t7);
+	let t9;
+	if ($[6] !== key || $[7] !== layout) {
+		t9 = layout.getColumnMinWidth(key);
+		$[6] = key;
+		$[7] = layout;
+		$[8] = t9;
+	} else t9 = $[8];
+	const t10 = Math.floor(t9);
+	const t11 = Math.floor(width);
+	const t12 = Math.floor(width);
+	let t13;
+	if ($[9] !== locale || $[10] !== t12) {
+		t13 = columnSizeFor(t12, locale);
+		$[9] = locale;
+		$[10] = t12;
+		$[11] = t13;
+	} else t13 = $[11];
+	let t14;
+	if ($[12] !== key || $[13] !== table) {
+		t14 = stepOf(table, key);
+		$[12] = key;
+		$[13] = table;
+		$[14] = t14;
+	} else t14 = $[14];
+	const t15 = "slider";
+	const t16 = isLast ? styles.handleLast : void 0;
+	const t17 = end - HANDLE / 2;
+	let t18;
+	if ($[15] !== t16 || $[16] !== t17) {
+		t18 = composeStyles(styles.handle, t16, { start: t17 });
+		$[15] = t16;
+		$[16] = t17;
+		$[17] = t18;
+	} else t18 = $[17];
+	const T2 = View;
+	const t19 = composeStyles(styles.rule, isLast ? styles.ruleLast : void 0, own.ruleLine, resizing ? own.ruleResizing : void 0);
+	let t20;
+	if ($[18] !== T2 || $[19] !== t19) {
+		t20 = /* @__PURE__ */ jsx(T2, { style: t19 });
+		$[18] = T2;
+		$[19] = t19;
+		$[20] = t20;
+	} else t20 = $[20];
+	let t21;
+	if ($[21] !== T1 || $[22] !== t10 || $[23] !== t11 || $[24] !== t13 || $[25] !== t14 || $[26] !== t18 || $[27] !== t20 || $[28] !== t4 || $[29] !== t6 || $[30] !== t8) {
+		t21 = /* @__PURE__ */ jsx(T1, {
+			accessibilityActions: t4,
+			accessible: t5,
+			"aria-label": t6,
+			"aria-valuemax": t8,
+			"aria-valuemin": t10,
+			"aria-valuenow": t11,
+			"aria-valuetext": t13,
+			onAccessibilityAction: t14,
+			role: t15,
+			style: t18,
+			children: t20
+		});
+		$[21] = T1;
+		$[22] = t10;
+		$[23] = t11;
+		$[24] = t13;
+		$[25] = t14;
+		$[26] = t18;
+		$[27] = t20;
+		$[28] = t4;
+		$[29] = t6;
+		$[30] = t8;
+		$[31] = t21;
+	} else t21 = $[31];
+	let t22;
+	if ($[32] !== T0 || $[33] !== pan || $[34] !== t21) {
+		t22 = /* @__PURE__ */ jsx(T0, {
+			gesture: pan,
+			children: t21
+		});
+		$[32] = T0;
+		$[33] = pan;
+		$[34] = t21;
+		$[35] = t22;
+	} else t22 = $[35];
+	return t22;
+}
+function ResizeHandles() {
+	const $ = c(11);
+	const table = useTable();
+	let t0;
+	if ($[0] !== table) {
+		t0 = endsOf(table);
+		$[0] = table;
+		$[1] = t0;
+	} else t0 = $[1];
+	const ends = t0;
+	const lastIndex = table.columns.length - 1;
+	let t1;
+	if ($[2] !== ends || $[3] !== lastIndex || $[4] !== table.columns) {
+		let t2;
+		if ($[6] !== ends || $[7] !== lastIndex) {
+			t2 = (column, index) => column.props?.resizable === true ? /* @__PURE__ */ jsx(ResizeHandle, {
+				column,
+				end: ends[index] ?? 0,
+				isLast: index === lastIndex
+			}, column.key) : null;
+			$[6] = ends;
+			$[7] = lastIndex;
+			$[8] = t2;
+		} else t2 = $[8];
+		t1 = table.columns.map(t2);
+		$[2] = ends;
+		$[3] = lastIndex;
+		$[4] = table.columns;
+		$[5] = t1;
+	} else t1 = $[5];
+	let t2;
+	if ($[9] !== t1) {
+		t2 = /* @__PURE__ */ jsx(View, {
+			style: styles.handles,
+			children: t1
+		});
+		$[9] = t1;
+		$[10] = t2;
+	} else t2 = $[10];
+	return t2;
+}
+function* rowNode(props, context) {
+	const { children } = props;
+	yield {
+		"aria-label": props["aria-label"],
+		*childNodes() {
+			if (typeof children === "function") {
+				for (const column of context.columns) yield {
+					element: children(column.key),
+					key: column.key,
+					type: "cell"
+				};
+				return;
+			}
+			const cells = childElementsOf(children);
+			const count = cells.reduce((sum, cell) => sum + spanOf(cell), 0);
+			if (count !== context.columns.length) throw new Error(`Cell count must match column count. Found ${count} cells and ${context.columns.length} columns.`);
+			for (const element of cells) yield {
+				element,
+				type: "cell"
+			};
+		},
+		hasChildNodes: true,
+		key: props.id,
+		props,
+		shouldInvalidate(next) {
+			return next.columns.length !== context.columns.length || next.columns.some((column, index) => column.key !== context.columns[index]?.key);
+		},
+		textValue: props.textValue,
+		type: "item"
+	};
+}
+function selectAllOf(state) {
+	return () => {
+		state.selectionManager.toggleSelectAll();
+	};
+}
+/**
+* What the table says once its rows are sorted, as React Aria says it, and
+* nothing for a table that sorts by nothing.
+*/
+function sortMessageOf(state, locale) {
+	const { sortDescriptor } = state;
+	if (sortDescriptor === null) return "";
+	const column = state.collection.columns.find((each) => each.key === sortDescriptor.column);
+	return sortedFor(sortDescriptor.direction, column?.textValue ?? String(sortDescriptor.column), locale);
+}
+function sortOf(state, key) {
+	return () => {
+		state.sort(key);
+	};
+}
+function spanOf(cell) {
+	return isValidElement(cell) ? cell.props.colSpan ?? 1 : 1;
+}
+function spanWidthOf(table, cell) {
+	return widthAcross(table, cell.colIndex ?? cell.index, cell.colSpan ?? 1);
+}
+/**
+* Runs the step a screen reader asks a handle for, as a drag that starts and
+* ends at once, so `onResizeEnd` comes once as it does for a key on web.
+*/
+function stepOf(table, key) {
+	return (event) => {
+		const { actionName } = event.nativeEvent;
+		if (actionName !== "increment" && actionName !== "decrement") return;
+		const { layout } = table;
+		const step = actionName === "increment" ? RESIZE_STEP : -10;
+		layout.startResize(key);
+		const sizes = layout.updateResizedColumns(key, layout.getColumnWidth(key) + step);
+		table.onResize?.(sizes);
+		layout.endResize();
+		table.onResizeEnd?.(sizes);
+	};
+}
+/**
+* A grid of rows and columns. Sorting and selection are React Stately's, as
+* web's are React Aria's: pass `sortDescriptor` with `onSortChange` and mark
+* the sortable columns `allowsSorting`, and set `selectionMode` to `single`
+* or `multiple` with `selectedKeys` and `onSelectionChange`, or
+* `defaultSelectedKeys`.
+*
+* ```tsx
+* <Table aria-label="Label" selectionMode="multiple">
+*   <Table.Header>
+*     <Table.Column id="colSelect" selection />
+*     <Table.Column id="colName" isRowHeader>Label</Table.Column>
+*   </Table.Header>
+*   <Table.Body>
+*     <Table.Row id="first">
+*       <Table.Cell selection />
+*       <Table.Cell>First item</Table.Cell>
+*     </Table.Row>
+*   </Table.Body>
+* </Table>
+* ```
+*
+* Composed from parts, since a cell takes any content: `Table.Header`,
+* `Table.Column`, `Table.Body`, `Table.Row`, `Table.Cell`, `Table.LoadMore`
+* and `Table.Footer`, which the table draws from their props, so none of them
+* renders anything on its own. A column's `id` and a row's share one
+* namespace, so keep the two sets apart, as `col`-prefixed column ids do.
+* Name the table with `aria-label`.
+*
+* The columns fill the table's width, `1fr` each unless `defaultWidth` or
+* `width` says otherwise, and the table scrolls sideways once they are wider
+* than it is. The rows scroll by themselves, so a table on a page that
+* scrolls takes `scrollEnabled={false}` and is laid out at its full length,
+* and one with `stickyHeader` wants a height to fill. `style` lands on the
+* box the table is drawn in, and `ref`, `aria-label`, `testID` and the
+* scroll props on the `FlatList` that holds the rows.
+*
+* The rows take focus while they run past the table's height, as web's grid
+* is a tab stop, so a keyboard can scroll them whatever they hold, and the
+* sideways scroll does while the columns are wider than the table; a call
+* site's own `focusable` still wins for the rows.
+*/
+function Table(t0) {
+	const $ = c(45);
+	let children;
+	let defaultSelectedKeys;
+	let disabledKeys;
+	let disallowEmptySelection;
+	let onSelectionChange;
+	let onSortChange;
+	let props;
+	let selectedKeys;
+	let sortDescriptor;
+	let t1;
+	let t2;
+	if ($[0] !== t0) {
+		({children, defaultSelectedKeys, disabledBehavior: t1, disabledKeys, disallowEmptySelection, onSelectionChange, onSortChange, selectedKeys, selectionMode: t2, sortDescriptor, ...props} = t0);
+		$[0] = t0;
+		$[1] = children;
+		$[2] = defaultSelectedKeys;
+		$[3] = disabledKeys;
+		$[4] = disallowEmptySelection;
+		$[5] = onSelectionChange;
+		$[6] = onSortChange;
+		$[7] = props;
+		$[8] = selectedKeys;
+		$[9] = sortDescriptor;
+		$[10] = t1;
+		$[11] = t2;
+	} else {
+		children = $[1];
+		defaultSelectedKeys = $[2];
+		disabledKeys = $[3];
+		disallowEmptySelection = $[4];
+		onSelectionChange = $[5];
+		onSortChange = $[6];
+		props = $[7];
+		selectedKeys = $[8];
+		sortDescriptor = $[9];
+		t1 = $[10];
+		t2 = $[11];
+	}
+	const disabledBehavior = t1 === void 0 ? "all" : t1;
+	const selectionMode = t2 === void 0 ? "none" : t2;
+	const theme = useTheme();
+	const window = useWindowDimensions();
+	const [measured, setMeasured] = useState(null);
+	let t3;
+	if ($[12] !== children) {
+		t3 = partOf(children, TableHeader);
+		$[12] = children;
+		$[13] = t3;
+	} else t3 = $[13];
+	const header = t3;
+	let t4;
+	if ($[14] !== children) {
+		t4 = partOf(children, TableBody);
+		$[14] = children;
+		$[15] = t4;
+	} else t4 = $[15];
+	const body = t4;
+	let t5;
+	if ($[16] !== children) {
+		t5 = partOf(children, TableFooter);
+		$[16] = children;
+		$[17] = t5;
+	} else t5 = $[17];
+	const footer = t5;
+	if (header === void 0 || body === void 0) throw new Error("A Table holds a Table.Header and a Table.Body.");
+	let t6;
+	if ($[18] !== body || $[19] !== header) {
+		t6 = [header, body];
+		$[18] = body;
+		$[19] = header;
+		$[20] = t6;
+	} else t6 = $[20];
+	const t7 = t6;
+	let t8;
+	if ($[21] !== defaultSelectedKeys || $[22] !== disabledBehavior || $[23] !== disabledKeys || $[24] !== disallowEmptySelection || $[25] !== onSelectionChange || $[26] !== onSortChange || $[27] !== selectedKeys || $[28] !== selectionMode || $[29] !== sortDescriptor || $[30] !== t7) {
+		t8 = {
+			children: t7,
+			defaultSelectedKeys,
+			disabledBehavior,
+			disabledKeys,
+			disallowEmptySelection,
+			onSelectionChange,
+			onSortChange,
+			selectedKeys,
+			selectionMode,
+			sortDescriptor
+		};
+		$[21] = defaultSelectedKeys;
+		$[22] = disabledBehavior;
+		$[23] = disabledKeys;
+		$[24] = disallowEmptySelection;
+		$[25] = onSelectionChange;
+		$[26] = onSortChange;
+		$[27] = selectedKeys;
+		$[28] = selectionMode;
+		$[29] = sortDescriptor;
+		$[30] = t7;
+		$[31] = t8;
+	} else t8 = $[31];
+	const state = useTableState(t8);
+	const selectionWidth = 2 * theme.spacing.lg + 40;
+	let t9;
+	if ($[32] !== selectionWidth) {
+		t9 = defaultsOf(selectionWidth);
+		$[32] = selectionWidth;
+		$[33] = t9;
+	} else t9 = $[33];
+	const defaults = t9;
+	const width = measured ?? window.width;
+	let t10;
+	if ($[34] !== defaults || $[35] !== width) {
+		t10 = {
+			...defaults,
+			tableWidth: width
+		};
+		$[34] = defaults;
+		$[35] = width;
+		$[36] = t10;
+	} else t10 = $[36];
+	const layout = useTableColumnResizeState(t10, state);
+	const t11 = footer?.props;
+	let t12;
+	if ($[37] !== body.props || $[38] !== header.props || $[39] !== layout || $[40] !== props || $[41] !== state || $[42] !== t11 || $[43] !== width) {
+		t12 = /* @__PURE__ */ jsx(TableView, {
+			...props,
+			body: body.props,
+			footer: t11,
+			header: header.props,
+			layout,
+			onWidth: setMeasured,
+			state,
+			width
+		});
+		$[37] = body.props;
+		$[38] = header.props;
+		$[39] = layout;
+		$[40] = props;
+		$[41] = state;
+		$[42] = t11;
+		$[43] = width;
+		$[44] = t12;
+	} else t12 = $[44];
+	return t12;
+}
+/**
+* The rows. `renderEmptyState` is what the table shows when there are none,
+* and a `Table.LoadMore` after them is the row it shows while fetching
+* more. The table draws it from its props, so it renders nothing on its
+* own.
+*/
+function TableBody(_props) {
+	return null;
+}
+TableBody.getCollectionNode = bodyNode;
+/**
+* One cell. `selection` draws this row's checkbox in place of whatever else
+* the cell would hold. `style` and `testID` land on the cell.
+*/
+function TableCell(_props) {
+	return null;
+}
+TableCell.getCollectionNode = cellNode;
+/**
+* One column. `allowsSorting` makes the header itself the control that
+* sorts; the arrow appears on the column the `sortDescriptor` names.
+* `selection` draws the select-all checkbox in place of a name. `style` and
+* `testID` land on the column's header.
+*
+* Its `id` shares a namespace with the rows', so give the two sets values
+* that cannot meet: a column and a row with one id between them leaves the
+* table with no columns at all.
+*/
+function TableColumn(_props) {
+	return null;
+}
+TableColumn.getCollectionNode = columnNode;
+function TableEnd() {
+	const $ = c(3);
+	const own = stylesOf(useTheme());
+	const { loadMore } = useTable();
+	const t0 = loadMore === void 0 ? null : /* @__PURE__ */ jsx(LoadingRow, {
+		...loadMore,
+		style: composeStyles(loadMore.isLoading === true ? own.loading : void 0, loadMore.style)
+	});
+	let t1;
+	if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+		t1 = /* @__PURE__ */ jsx(FooterRows, {});
+		$[0] = t1;
+	} else t1 = $[0];
+	let t2;
+	if ($[1] !== t0) {
+		t2 = /* @__PURE__ */ jsxs(Fragment$1, { children: [t0, t1] });
+		$[1] = t0;
+		$[2] = t2;
+	} else t2 = $[2];
+	return t2;
+}
+/**
+* Rows under the body, for totals and the like, ruled off from it. They are
+* not part of the selection and take no press, as React Aria keeps a footer
+* out of both. `style` and `testID` land on the footer.
+*/
+function TableFooter(_props) {
+	return null;
+}
+/**
+* The header row, holding the columns, and the rule drawn under it. `style`
+* and `testID` land on the row.
+*/
+function TableHeader(_props) {
+	return null;
+}
+TableHeader.getCollectionNode = headerNodes;
+/**
+* The row shown while more rows are being fetched. `onLoadMore` is called
+* as the reader nears the end of the table, and the ring is drawn only while
+* `isLoading`, in a live region, so a screen reader hears it arrive. It goes
+* inside `Table.Body`, after the rows.
+*/
+function TableLoadMore(_props) {
+	return null;
+}
+/**
+* One row. Give every row an `id`, which is the key selection is reported
+* by, and keep it apart from every column's. `onAction` runs when a press
+* runs the row's action, and `href` goes to that route. `style`, `ref` and
+* `testID` land on the row.
+*/
+function TableRow(_props) {
+	return null;
+}
+TableRow.getCollectionNode = rowNode;
+function contentTo(set, then) {
+	return (width, height) => {
+		set(height);
+		then?.(width, height);
+	};
+}
+function roomTo(set, then) {
+	return (event) => {
+		set(event.nativeEvent.layout.height);
+		then?.(event);
+	};
+}
+/**
+* What a `Table` draws once it has its state and its columns' widths: the
+* header, the rows and the footer, as wide as the columns together, in a
+* box that scrolls sideways once they are wider than it is.
+*/
+function TableView(t0) {
+	const $ = c(126);
+	let body;
+	let footer;
+	let header;
+	let layout;
+	let onContentSizeChange;
+	let onLayout;
+	let onResize;
+	let onResizeEnd;
+	let onRowAction;
+	let onWidth;
+	let props;
+	let ref;
+	let resizeLabel;
+	let selectAllLabel;
+	let selectLabel;
+	let state;
+	let style;
+	let t1;
+	let t2;
+	let width;
+	if ($[0] !== t0) {
+		({body, footer, header, layout, onContentSizeChange, onLayout, onResize, onResizeEnd, onRowAction, onWidth, ref, resizable: t1, resizeLabel, selectAllLabel, selectLabel, state, stickyHeader: t2, style, width, ...props} = t0);
+		$[0] = t0;
+		$[1] = body;
+		$[2] = footer;
+		$[3] = header;
+		$[4] = layout;
+		$[5] = onContentSizeChange;
+		$[6] = onLayout;
+		$[7] = onResize;
+		$[8] = onResizeEnd;
+		$[9] = onRowAction;
+		$[10] = onWidth;
+		$[11] = props;
+		$[12] = ref;
+		$[13] = resizeLabel;
+		$[14] = selectAllLabel;
+		$[15] = selectLabel;
+		$[16] = state;
+		$[17] = style;
+		$[18] = t1;
+		$[19] = t2;
+		$[20] = width;
+	} else {
+		body = $[1];
+		footer = $[2];
+		header = $[3];
+		layout = $[4];
+		onContentSizeChange = $[5];
+		onLayout = $[6];
+		onResize = $[7];
+		onResizeEnd = $[8];
+		onRowAction = $[9];
+		onWidth = $[10];
+		props = $[11];
+		ref = $[12];
+		resizeLabel = $[13];
+		selectAllLabel = $[14];
+		selectLabel = $[15];
+		state = $[16];
+		style = $[17];
+		t1 = $[18];
+		t2 = $[19];
+		width = $[20];
+	}
+	const resizable = t1 === void 0 ? false : t1;
+	const stickyHeader = t2 === void 0 ? false : t2;
+	const messages = useMessages();
+	const locale = useLocaleOf(void 0);
+	const [content, setContent] = useState(0);
+	const [room, setRoom] = useState(0);
+	const { columns } = state.collection;
+	let Root;
+	let T0;
+	let T1;
+	let isLoading;
+	let loadMore;
+	let native;
+	let renderEmptyState;
+	let rows;
+	let t3;
+	let t4;
+	let t5;
+	let t6;
+	let t7;
+	let value;
+	if ($[21] !== body || $[22] !== columns || $[23] !== footer || $[24] !== header || $[25] !== layout || $[26] !== messages || $[27] !== onResize || $[28] !== onResizeEnd || $[29] !== onRowAction || $[30] !== props || $[31] !== resizable || $[32] !== resizeLabel || $[33] !== selectAllLabel || $[34] !== selectLabel || $[35] !== state || $[36] !== width) {
+		let t8;
+		if ($[51] !== layout) {
+			t8 = (sum, column) => sum + layout.getColumnWidth(column.key);
+			$[51] = layout;
+			$[52] = t8;
+		} else t8 = $[52];
+		const total = columns.reduce(t8, 0);
+		let t9;
+		if ($[53] !== state.collection) {
+			t9 = [...state.collection];
+			$[53] = state.collection;
+			$[54] = t9;
+		} else t9 = $[54];
+		rows = t9;
+		({renderEmptyState} = body);
+		let t10;
+		if ($[55] !== body.children) {
+			t10 = childElementsOf(typeof body.children === "function" ? null : body.children).find(isLoadMore)?.props;
+			$[55] = body.children;
+			$[56] = t10;
+		} else t10 = $[56];
+		loadMore = t10;
+		isLoading = loadMore?.isLoading ?? false;
+		let t11;
+		if ($[57] !== resizable) {
+			t11 = resizable ? Gesture.Native() : void 0;
+			$[57] = resizable;
+			$[58] = t11;
+		} else t11 = $[58];
+		native = t11;
+		const { testID } = props;
+		const t12 = resizeLabel ?? messages.table.resizer;
+		const t13 = selectLabel ?? messages.select;
+		let t14;
+		if ($[59] !== columns || $[60] !== footer || $[61] !== header || $[62] !== layout || $[63] !== loadMore || $[64] !== native || $[65] !== onResize || $[66] !== onResizeEnd || $[67] !== onRowAction || $[68] !== renderEmptyState || $[69] !== resizable || $[70] !== selectAllLabel || $[71] !== state || $[72] !== t12 || $[73] !== t13 || $[74] !== testID) {
+			t14 = {
+				columns,
+				footer,
+				header,
+				layout,
+				loadMore,
+				native,
+				onResize,
+				onResizeEnd,
+				onRowAction,
+				renderEmptyState,
+				resizable,
+				resizeLabel: t12,
+				selectAllLabel,
+				selectLabel: t13,
+				state,
+				testID
+			};
+			$[59] = columns;
+			$[60] = footer;
+			$[61] = header;
+			$[62] = layout;
+			$[63] = loadMore;
+			$[64] = native;
+			$[65] = onResize;
+			$[66] = onResizeEnd;
+			$[67] = onRowAction;
+			$[68] = renderEmptyState;
+			$[69] = resizable;
+			$[70] = selectAllLabel;
+			$[71] = state;
+			$[72] = t12;
+			$[73] = t13;
+			$[74] = testID;
+			$[75] = t14;
+		} else t14 = $[75];
+		value = t14;
+		Root = resizable ? GestureHandlerRootView : View;
+		T1 = ScrollView;
+		t4 = total > width;
+		t5 = true;
+		t6 = total > width;
+		t7 = total > width;
+		T0 = View;
+		t3 = composeStyles(styles.grid, { width: total });
+		$[21] = body;
+		$[22] = columns;
+		$[23] = footer;
+		$[24] = header;
+		$[25] = layout;
+		$[26] = messages;
+		$[27] = onResize;
+		$[28] = onResizeEnd;
+		$[29] = onRowAction;
+		$[30] = props;
+		$[31] = resizable;
+		$[32] = resizeLabel;
+		$[33] = selectAllLabel;
+		$[34] = selectLabel;
+		$[35] = state;
+		$[36] = width;
+		$[37] = Root;
+		$[38] = T0;
+		$[39] = T1;
+		$[40] = isLoading;
+		$[41] = loadMore;
+		$[42] = native;
+		$[43] = renderEmptyState;
+		$[44] = rows;
+		$[45] = t3;
+		$[46] = t4;
+		$[47] = t5;
+		$[48] = t6;
+		$[49] = t7;
+		$[50] = value;
+	} else {
+		Root = $[37];
+		T0 = $[38];
+		T1 = $[39];
+		isLoading = $[40];
+		loadMore = $[41];
+		native = $[42];
+		renderEmptyState = $[43];
+		rows = $[44];
+		t3 = $[45];
+		t4 = $[46];
+		t5 = $[47];
+		t6 = $[48];
+		t7 = $[49];
+		value = $[50];
+	}
+	let t8;
+	if ($[76] !== stickyHeader) {
+		t8 = stickyHeader ? /* @__PURE__ */ jsx(HeaderRow, {}) : null;
+		$[76] = stickyHeader;
+		$[77] = t8;
+	} else t8 = $[77];
+	const t9 = content > room;
+	const t10 = isLoading || renderEmptyState === void 0 ? void 0 : EmptyBody;
+	const t11 = stickyHeader ? void 0 : HeaderRow;
+	let t12;
+	if ($[78] !== onContentSizeChange) {
+		t12 = contentTo(setContent, onContentSizeChange);
+		$[78] = onContentSizeChange;
+		$[79] = t12;
+	} else t12 = $[79];
+	let t13;
+	if ($[80] !== loadMore) {
+		t13 = loadMore === void 0 ? void 0 : loadMoreOf(loadMore);
+		$[80] = loadMore;
+		$[81] = t13;
+	} else t13 = $[81];
+	const t14 = loadMore?.scrollOffset ?? 1;
+	let t15;
+	if ($[82] !== onLayout) {
+		t15 = roomTo(setRoom, onLayout);
+		$[82] = onLayout;
+		$[83] = t15;
+	} else t15 = $[83];
+	let t16;
+	if ($[84] !== props || $[85] !== ref || $[86] !== rows || $[87] !== t10 || $[88] !== t11 || $[89] !== t12 || $[90] !== t13 || $[91] !== t14 || $[92] !== t15 || $[93] !== t9) {
+		t16 = /* @__PURE__ */ jsx(FlatList, {
+			focusable: t9,
+			...props,
+			data: rows,
+			keyExtractor: keyOf,
+			ListEmptyComponent: t10,
+			ListFooterComponent: TableEnd,
+			ListHeaderComponent: t11,
+			onContentSizeChange: t12,
+			onEndReached: t13,
+			onEndReachedThreshold: t14,
+			onLayout: t15,
+			ref,
+			renderItem: renderRow
+		});
+		$[84] = props;
+		$[85] = ref;
+		$[86] = rows;
+		$[87] = t10;
+		$[88] = t11;
+		$[89] = t12;
+		$[90] = t13;
+		$[91] = t14;
+		$[92] = t15;
+		$[93] = t9;
+		$[94] = t16;
+	} else t16 = $[94];
+	let t17;
+	if ($[95] !== T0 || $[96] !== t16 || $[97] !== t3 || $[98] !== t8) {
+		t17 = /* @__PURE__ */ jsxs(T0, {
+			style: t3,
+			children: [t8, t16]
+		});
+		$[95] = T0;
+		$[96] = t16;
+		$[97] = t3;
+		$[98] = t8;
+		$[99] = t17;
+	} else t17 = $[99];
+	let t18;
+	if ($[100] !== T1 || $[101] !== t17 || $[102] !== t4 || $[103] !== t5 || $[104] !== t6 || $[105] !== t7) {
+		t18 = /* @__PURE__ */ jsx(T1, {
+			focusable: t4,
+			horizontal: t5,
+			scrollEnabled: t6,
+			showsHorizontalScrollIndicator: t7,
+			children: t17
+		});
+		$[100] = T1;
+		$[101] = t17;
+		$[102] = t4;
+		$[103] = t5;
+		$[104] = t6;
+		$[105] = t7;
+		$[106] = t18;
+	} else t18 = $[106];
+	const scroller = t18;
+	let t19;
+	if ($[107] !== onWidth) {
+		t19 = widthTo(onWidth);
+		$[107] = onWidth;
+		$[108] = t19;
+	} else t19 = $[108];
+	let t20;
+	if ($[109] !== native || $[110] !== scroller) {
+		t20 = native === void 0 ? scroller : /* @__PURE__ */ jsx(GestureDetector, {
+			gesture: native,
+			children: scroller
+		});
+		$[109] = native;
+		$[110] = scroller;
+		$[111] = t20;
+	} else t20 = $[111];
+	let t21;
+	if ($[112] !== locale || $[113] !== state) {
+		t21 = sortMessageOf(state, locale);
+		$[112] = locale;
+		$[113] = state;
+		$[114] = t21;
+	} else t21 = $[114];
+	let t22;
+	if ($[115] !== t21) {
+		t22 = /* @__PURE__ */ jsx(Status, { message: t21 });
+		$[115] = t21;
+		$[116] = t22;
+	} else t22 = $[116];
+	let t23;
+	if ($[117] !== Root || $[118] !== style || $[119] !== t19 || $[120] !== t20 || $[121] !== t22) {
+		t23 = /* @__PURE__ */ jsxs(Root, {
+			onLayout: t19,
+			style,
+			children: [t20, t22]
+		});
+		$[117] = Root;
+		$[118] = style;
+		$[119] = t19;
+		$[120] = t20;
+		$[121] = t22;
+		$[122] = t23;
+	} else t23 = $[122];
+	let t24;
+	if ($[123] !== t23 || $[124] !== value) {
+		t24 = /* @__PURE__ */ jsx(TableContext, {
+			value,
+			children: t23
+		});
+		$[123] = t23;
+		$[124] = value;
+		$[125] = t24;
+	} else t24 = $[125];
+	return t24;
+}
+function useTable() {
+	const table = use(TableContext);
+	if (table === null) throw new Error("A Table part is drawn by the Table it is in.");
+	return table;
+}
+function widthAcross(table, start, span) {
+	let width = 0;
+	for (const column of table.columns.slice(start, start + span)) width += table.layout.getColumnWidth(column.key);
+	return width;
+}
+function widthTo(set) {
+	return ({ nativeEvent }) => {
+		set(nativeEvent.layout.width);
+	};
+}
+Table.Body = TableBody;
+Table.Cell = TableCell;
+Table.Column = TableColumn;
+Table.Footer = TableFooter;
+Table.Header = TableHeader;
+Table.LoadMore = TableLoadMore;
+Table.Row = TableRow;
+//#endregion
+export { Table, TableBody, TableCell, TableColumn, TableFooter, TableHeader, TableLoadMore, TableRow };
+
+//# sourceMappingURL=index.js.map