@kanso-labs/react-native-kanso-ui 0.11.24 → 0.11.26

package/README.md

@@ -113,6 +113,33 @@ draw Gesture Handler's root view around their own track, so an app need not wrap
 itself in `GestureHandlerRootView` for them, and one that already does loses
 nothing.
 
+### The keyboard
+
+A `Sheet`, a `Dialog` and a `SearchView` keep what they hold above the software
+keyboard. React Native draws edge to edge on Android, so the keyboard covers the
+window rather than shrinking it, and each of them is a `Modal`, a window of its
+own, whose keyboard Android reports to nothing React Native listens to. Install
+[react-native-keyboard-controller](https://kirillzyusko.github.io/react-native-keyboard-controller/),
+an optional peer, and mount its provider at the root of the app, for those
+reports to reach the library:
+
+```bash
+npx expo install react-native-keyboard-controller
+```
+
+```tsx
+import { KeyboardProvider } from 'react-native-keyboard-controller'
+
+;<KeyboardProvider navigationBarTranslucent statusBarTranslucent>
+  <App />
+</KeyboardProvider>
+```
+
+Without it, iOS keeps the overlays above the keyboard all the same, and Android
+does so only for a field in the app's own window. A screen of the app's own is
+the app's to keep clear, with the controller's `KeyboardAwareScrollView` or
+`KeyboardAvoidingView`.
+
 ## Routing
 
 A component with an `href` presses through the app's router once the app is

package/dist/calendar/index.js

@@ -38,7 +38,7 @@ const ROWS_ABOVE_SHOWN = 3;
 * shown, both years where they are two, as web's does.
 */
 function CalendarFrame(t0) {
-	const $ = c(28);
+	const $ = c(30);
 	const { firstDayOfWeek, locale, months, showMonthYearMenus, state } = t0;
 	const t1 = useTheme();
 	let t2;
@@ -49,79 +49,87 @@ function CalendarFrame(t0) {
 	} else t2 = $[1];
 	const own = t2;
 	const sideBySide = useSideBySide(months);
+	const stacked = months > 1 && !sideBySide;
 	const t3 = sideBySide ? own.monthsSideBySide : own.months;
 	let t4;
-	if ($[2] !== firstDayOfWeek || $[3] !== locale || $[4] !== months || $[5] !== own.monthSideBySide || $[6] !== sideBySide || $[7] !== state) {
+	if ($[2] !== firstDayOfWeek || $[3] !== locale || $[4] !== months || $[5] !== own.monthSideBySide || $[6] !== sideBySide || $[7] !== stacked || $[8] !== state) {
 		let t5;
-		if ($[9] !== firstDayOfWeek || $[10] !== locale || $[11] !== own.monthSideBySide || $[12] !== sideBySide || $[13] !== state) {
-			t5 = (offset) => /* @__PURE__ */ jsx(View, {
+		if ($[10] !== firstDayOfWeek || $[11] !== locale || $[12] !== own.monthSideBySide || $[13] !== sideBySide || $[14] !== stacked || $[15] !== state) {
+			t5 = (offset) => /* @__PURE__ */ jsxs(View, {
 				style: sideBySide ? own.monthSideBySide : void 0,
-				children: /* @__PURE__ */ jsx(MonthGrid, {
+				children: [stacked ? /* @__PURE__ */ jsx(MonthCaption, {
+					locale,
+					offset,
+					state
+				}) : null, /* @__PURE__ */ jsx(MonthGrid, {
 					firstDayOfWeek,
 					locale,
 					offset,
+					stacked,
 					state
-				})
+				})]
 			}, offset.months);
-			$[9] = firstDayOfWeek;
-			$[10] = locale;
-			$[11] = own.monthSideBySide;
-			$[12] = sideBySide;
-			$[13] = state;
-			$[14] = t5;
-		} else t5 = $[14];
+			$[10] = firstDayOfWeek;
+			$[11] = locale;
+			$[12] = own.monthSideBySide;
+			$[13] = sideBySide;
+			$[14] = stacked;
+			$[15] = state;
+			$[16] = t5;
+		} else t5 = $[16];
 		t4 = offsetsOf(months).map(t5);
 		$[2] = firstDayOfWeek;
 		$[3] = locale;
 		$[4] = months;
 		$[5] = own.monthSideBySide;
 		$[6] = sideBySide;
-		$[7] = state;
-		$[8] = t4;
-	} else t4 = $[8];
+		$[7] = stacked;
+		$[8] = state;
+		$[9] = t4;
+	} else t4 = $[9];
 	let t5;
-	if ($[15] !== t3 || $[16] !== t4) {
+	if ($[17] !== t3 || $[18] !== t4) {
 		t5 = /* @__PURE__ */ jsx(View, {
 			style: t3,
 			children: t4
 		});
-		$[15] = t3;
-		$[16] = t4;
-		$[17] = t5;
-	} else t5 = $[17];
+		$[17] = t3;
+		$[18] = t4;
+		$[19] = t5;
+	} else t5 = $[19];
 	const grids = t5;
 	if (showMonthYearMenus && months <= 1) {
 		let t6;
-		if ($[18] !== grids || $[19] !== locale || $[20] !== state) {
+		if ($[20] !== grids || $[21] !== locale || $[22] !== state) {
 			t6 = /* @__PURE__ */ jsx(CalendarMenus, {
 				locale,
 				state,
 				children: grids
 			});
-			$[18] = grids;
-			$[19] = locale;
-			$[20] = state;
-			$[21] = t6;
-		} else t6 = $[21];
+			$[20] = grids;
+			$[21] = locale;
+			$[22] = state;
+			$[23] = t6;
+		} else t6 = $[23];
 		return t6;
 	}
 	let t6;
-	if ($[22] !== locale || $[23] !== state) {
+	if ($[24] !== locale || $[25] !== state) {
 		t6 = /* @__PURE__ */ jsx(CalendarHeader, {
 			locale,
 			state
 		});
-		$[22] = locale;
-		$[23] = state;
-		$[24] = t6;
-	} else t6 = $[24];
+		$[24] = locale;
+		$[25] = state;
+		$[26] = t6;
+	} else t6 = $[26];
 	let t7;
-	if ($[25] !== grids || $[26] !== t6) {
+	if ($[27] !== grids || $[28] !== t6) {
 		t7 = /* @__PURE__ */ jsxs(Fragment$1, { children: [t6, grids] });
-		$[25] = grids;
-		$[26] = t6;
-		$[27] = t7;
-	} else t7 = $[27];
+		$[27] = grids;
+		$[28] = t6;
+		$[29] = t7;
+	} else t7 = $[29];
 	return t7;
 }
 /** The two chevrons with the month and year between them. */
@@ -813,13 +821,69 @@ function MenuList(t0) {
 	return t5;
 }
 /**
+* The name of the month a grid shows, over the grid, while several stack. The
+* heading between the chevrons names them all at once, which reads across
+* months side by side in order; stacked, the second month sat under the
+* first's last week with nothing saying which month it was. Formatted as the
+* heading names a month: in full with its year, in the calendar's system and
+* time zone, with the era where a Gregorian date falls before the common one.
+*
+* Hidden from a screen reader, which hears the month already with each date.
+*/
+function MonthCaption(t0) {
+	const $ = c(8);
+	const { locale, offset, state } = t0;
+	const own = stylesOf(useTheme());
+	const role = useTypeRole("titleSmall");
+	const start = state.visibleRange.start.add(offset);
+	const month = start.calendar.getFormattableMonth?.(start) ?? start;
+	const T0 = View;
+	const t1 = true;
+	const t2 = own.monthCaption;
+	const T1 = Text;
+	const t3 = 1;
+	const t4 = composeStyles(role, own.monthCaptionText);
+	const t5 = new DateFormatter(locale, {
+		calendar: start.calendar.identifier,
+		era: eraOf(start),
+		month: "long",
+		timeZone: state.timeZone,
+		year: "numeric"
+	}).format(month.toDate(state.timeZone));
+	let t6;
+	if ($[0] !== T1 || $[1] !== t4 || $[2] !== t5) {
+		t6 = /* @__PURE__ */ jsx(T1, {
+			numberOfLines: t3,
+			style: t4,
+			children: t5
+		});
+		$[0] = T1;
+		$[1] = t4;
+		$[2] = t5;
+		$[3] = t6;
+	} else t6 = $[3];
+	let t7;
+	if ($[4] !== T0 || $[5] !== own || $[6] !== t6) {
+		t7 = /* @__PURE__ */ jsx(T0, {
+			"aria-hidden": t1,
+			style: t2,
+			children: t6
+		});
+		$[4] = T0;
+		$[5] = own;
+		$[6] = t6;
+		$[7] = t7;
+	} else t7 = $[7];
+	return t7;
+}
+/**
 * The weekday row and one month's weeks, held at six weeks of room so the
 * calendar keeps its height from month to month. The weeks slide in from the
 * side the new month comes from.
 */
 function MonthGrid(t0) {
 	const $ = c(20);
-	const { firstDayOfWeek, locale, offset, state } = t0;
+	const { firstDayOfWeek, locale, offset, stacked, state } = t0;
 	const theme = useTheme();
 	const own = stylesOf(theme);
 	const role = useTypeRole("bodyLarge");
@@ -834,7 +898,7 @@ function MonthGrid(t0) {
 	const slide = useMonthSlide(start, theme);
 	const rowStyle = composeStyles(styles.row, own.rowHeight);
 	const T0 = View;
-	const t2 = own.grid;
+	const t2 = stacked ? void 0 : own.grid;
 	const T1 = View;
 	const t3 = true;
 	const t4 = weekdaysOf(state, locale, firstDayOfWeek).map((weekday) => /* @__PURE__ */ jsx(View, {
@@ -887,13 +951,13 @@ function MonthGrid(t0) {
 		$[14] = t7;
 	} else t7 = $[14];
 	let t8;
-	if ($[15] !== T0 || $[16] !== own || $[17] !== t5 || $[18] !== t7) {
+	if ($[15] !== T0 || $[16] !== t2 || $[17] !== t5 || $[18] !== t7) {
 		t8 = /* @__PURE__ */ jsxs(T0, {
 			style: t2,
 			children: [t5, t7]
 		});
 		$[15] = T0;
-		$[16] = own;
+		$[16] = t2;
 		$[17] = t5;
 		$[18] = t7;
 		$[19] = t8;