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

package/dist/collection/index.js

@@ -571,26 +571,38 @@ function* loaderNode(props) {
 		type: "loader"
 	};
 }
+function LoaderRow() {
+	const $ = c(2);
+	const t0 = useCollection().loadMore ?? IDLE;
+	let t1;
+	if ($[0] !== t0) {
+		t1 = /* @__PURE__ */ jsx(LoadingRow, { ...t0 });
+		$[0] = t0;
+		$[1] = t1;
+	} else t1 = $[1];
+	return t1;
+}
 /**
-* The row the `LoadMore` part draws: a live region, empty while idle and
+* The row a `LoadMore` part draws: a live region, empty while idle and
 * holding the ring while loading. Android and React Native Web say what
 * arrives in it; iOS has no live regions, so the ring's name is said there
-* as it appears.
+* as it appears. A List's and a ListBox's, and a Table's, which draws it
+* after its rows at a row's own height.
 */
-function LoaderRow() {
+function LoadingRow(t0) {
 	const $ = c(8);
+	const { isLoading: t1, label, style, testID } = t0;
+	const isLoading = t1 === void 0 ? false : t1;
 	const own = stylesOf(useTheme());
-	const { isLoading: t0, label, style, testID } = useCollection().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;
+	const t2 = "polite";
+	const t3 = composeStyles(isLoading ? own.loading : styles.idle, style);
+	let t4;
 	if ($[0] !== isLoading || $[1] !== name) {
-		t3 = isLoading ? /* @__PURE__ */ jsx(ProgressIndicator, {
+		t4 = isLoading ? /* @__PURE__ */ jsx(ProgressIndicator, {
 			"aria-label": name,
 			diameter: LOADING_DIAMETER,
 			isIndeterminate: true,
@@ -598,23 +610,23 @@ function LoaderRow() {
 		}) : 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,
+		$[2] = t4;
+	} else t4 = $[2];
+	let t5;
+	if ($[3] !== T0 || $[4] !== t3 || $[5] !== t4 || $[6] !== testID) {
+		t5 = /* @__PURE__ */ jsx(T0, {
+			"aria-live": t2,
+			style: t3,
 			testID,
-			children: t3
+			children: t4
 		});
 		$[3] = T0;
-		$[4] = t2;
-		$[5] = t3;
+		$[4] = t3;
+		$[5] = t4;
 		$[6] = testID;
-		$[7] = t4;
-	} else t4 = $[7];
-	return t4;
+		$[7] = t5;
+	} else t5 = $[7];
+	return t5;
 }
 function loadMoreOf({ isLoading = false, onLoadMore }) {
 	return () => {
@@ -653,48 +665,27 @@ function renderEntry({ item }) {
 }
 /**
 * 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. A `count` of `null` says nothing, for a
+* never drawn, through `Status`. A `count` of `null` says nothing, for a
 * list that is closed, so the count is said again as it opens.
 */
 function ResultsStatus(t0) {
-	const $ = c(8);
+	const $ = c(5);
 	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 = count === null ? "" : 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;
+	let t1;
+	if ($[0] !== count || $[1] !== locale) {
+		t1 = count === null ? "" : resultsFor(count, locale);
+		$[0] = count;
+		$[1] = locale;
+		$[2] = t1;
+	} else t1 = $[2];
+	let t2;
+	if ($[3] !== t1) {
+		t2 = /* @__PURE__ */ jsx(Status, { message: t1 });
+		$[3] = t1;
+		$[4] = t2;
+	} else t2 = $[4];
+	return t2;
 }
 /**
 * The list's layout handler: the call site's own, then a scroll that brings
@@ -1199,6 +1190,42 @@ function SelectBox(t0) {
 	return t3;
 }
 /**
+* A message said to a screen reader as it changes and never drawn: in a
+* polite live region on Android and under React Native Web, and through
+* `AccessibilityInfo` on iOS, which has no live regions, so nothing is drawn
+* there at all. The message a status mounts with is not said, and an empty
+* one says nothing. A search's count of rows, and a table's sort.
+*/
+function Status(t0) {
+	const $ = c(5);
+	const { message } = t0;
+	const t1 = useTheme();
+	let t2;
+	if ($[0] !== t1) {
+		t2 = stylesOf(t1);
+		$[0] = t1;
+		$[1] = t2;
+	} else t2 = $[1];
+	const own = t2;
+	useAnnouncement(message);
+	if (Platform.OS === "ios") return null;
+	let t3;
+	if ($[2] !== message || $[3] !== own.status) {
+		t3 = /* @__PURE__ */ jsx(View, {
+			"aria-live": "polite",
+			style: styles.status,
+			children: /* @__PURE__ */ jsx(Text, {
+				style: own.status,
+				children: message
+			})
+		});
+		$[2] = message;
+		$[3] = own.status;
+		$[4] = t3;
+	} else t3 = $[4];
+	return t3;
+}
+/**
 * Opens a tree's row, or closes it when it is open. Built by a call rather
 * than written inline, which is what react-perf's
 * no-new-function-as-prop is after.
@@ -1269,6 +1296,26 @@ function treeLead({ box, chevron, indent, leading, style }) {
 		]
 	});
 }
+function useAnnouncement(message) {
+	const $ = c(3);
+	const was = useRef(message);
+	let t0;
+	let t1;
+	if ($[0] !== message) {
+		t0 = () => {
+			if (message !== was.current && message !== "" && Platform.OS === "ios") AccessibilityInfo.announceForAccessibility(message);
+			was.current = message;
+		};
+		t1 = [message];
+		$[0] = message;
+		$[1] = t0;
+		$[2] = t1;
+	} else {
+		t0 = $[1];
+		t1 = $[2];
+	}
+	useEffect(t0, t1);
+}
 function useCollection() {
 	const collection = use(CollectionContext);
 	if (collection === null) throw new Error("A List or ListBox part is drawn by the one it is in.");
@@ -1295,26 +1342,6 @@ function useLoadingAnnouncement(isLoading, label) {
 	}
 	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 && message !== "" && Platform.OS === "ios") AccessibilityInfo.announceForAccessibility(message);
-			was.current = message;
-		};
-		t1 = [message];
-		$[0] = message;
-		$[1] = t0;
-		$[2] = t1;
-	} else {
-		t0 = $[1];
-		t1 = $[2];
-	}
-	useEffect(t0, t1);
-}
 /**
 * The leading slot of a List's row that selects: the checkbox, then whatever
 * the row was given, in a row of their own so the two sit side by side.
@@ -1326,6 +1353,6 @@ function withBox(box, leading, style) {
 	}) : box;
 }
 //#endregion
-export { Collection, CollectionView, ResultsStatus, focusKeyOf, loaderNode, nestedRowNode, rowCountOf, rowNode, sectionNode };
+export { Collection, CollectionView, LoadingRow, ResultsStatus, SelectBox, Status, accessibilityActionOf, childElementsOf, focusKeyOf, loadMoreOf, loaderNode, nestedRowNode, noop, pressThen, rowCountOf, rowNode, sectionNode };
 
 //# sourceMappingURL=index.js.map