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

package/dist/field/index.js

@@ -5,6 +5,9 @@ import { usePressFeedback } from "../press/index.js";
 import { useFontFamily } from "../typography/fonts.js";
 import { useTypeRole } from "../typography/roles.js";
 import { withOpacity } from "../theme/color.js";
+import { formatCount } from "../number/count.js";
+import { limitFor } from "../i18n/index.js";
+import { useLocaleOf } from "../i18n/provider.js";
 import { useInsideForm } from "../form/index.js";
 import { fieldStylesOf } from "./styles.js";
 import { c } from "react/compiler-runtime";
@@ -24,14 +27,13 @@ const OUTSIDE_BOX = {
 };
 const BoxContext = createContext(OUTSIDE_BOX);
 const NO_PARTS = [];
-let counterFormat;
 /**
 * How a field's control is described by the line under it: the error while
 * there is one, otherwise the description, then the limit where there is a
 * `maxLength`. Hand the result to {@link FieldInput} as `described`, and the
 * same `id` to {@link FieldMessage}.
 */
-function describedBy(id, { characterLimitLabel, description, error, maxLength }) {
+function describedBy(id, { characterLimitLabel, description, error, locale, maxLength }) {
 	const ids = idsOf(id);
 	const message = error === void 0 ? {
 		id: ids.description,
@@ -40,7 +42,7 @@ function describedBy(id, { characterLimitLabel, description, error, maxLength })
 		id: ids.error,
 		text: error
 	};
-	const limit = limitOf(maxLength, characterLimitLabel);
+	const limit = limitOf(maxLength, characterLimitLabel, locale);
 	return [...message.text === "" ? [] : [message], ...limit === void 0 ? [] : [{
 		id: ids.limit,
 		text: limit
@@ -319,31 +321,52 @@ function FieldBox(t0) {
 * in `described`, so a reader hears the unit the value is read against as a
 * sighted one sees it beside the value: on iOS and Android as its hint, and
 * under React Native Web through `aria-describedby`, which drops the hint.
+*
+* `multiline` makes it a text area, `rows` lines of body large tall at the
+* least, its text from the top. iOS and Android grow a multi-line input with
+* what it holds by themselves, so a height floor is all `autosize` asks of
+* them, and `autosize={false}` sets the height instead, which they scroll
+* inside. React Native Web's textarea keeps the height it is given, so there
+* the control lies over a hidden copy of `value` that takes the height the
+* text would, as web's text area lies over its replica. A control that grows
+* is therefore handed its `value`.
 */
 function FieldInput(t0) {
-	const $ = c(23);
+	const $ = c(26);
 	let prefix;
 	let props;
 	let suffix;
 	let t1;
 	let t2;
+	let t3;
+	let t4;
+	let t5;
 	if ($[0] !== t0) {
-		({described: t1, numeric: t2, prefix, suffix, ...props} = t0);
+		({autosize: t1, described: t2, multiline: t3, numeric: t4, prefix, rows: t5, suffix, ...props} = t0);
 		$[0] = t0;
 		$[1] = prefix;
 		$[2] = props;
 		$[3] = suffix;
 		$[4] = t1;
 		$[5] = t2;
+		$[6] = t3;
+		$[7] = t4;
+		$[8] = t5;
 	} else {
 		prefix = $[1];
 		props = $[2];
 		suffix = $[3];
 		t1 = $[4];
 		t2 = $[5];
+		t3 = $[6];
+		t4 = $[7];
+		t5 = $[8];
 	}
-	const described = t1 === void 0 ? NO_PARTS : t1;
-	const numeric = t2 === void 0 ? false : t2;
+	const autosize = t1 === void 0 ? true : t1;
+	const described = t2 === void 0 ? NO_PARTS : t2;
+	const multiline = t3 === void 0 ? false : t3;
+	const numeric = t4 === void 0 ? false : t4;
+	const rows = t5 === void 0 ? 1 : t5;
 	const box = use(BoxContext);
 	const theme = useTheme();
 	const styles = fieldStylesOf(theme);
@@ -358,72 +381,84 @@ function FieldInput(t0) {
 	const affixed = prefix !== void 0 || suffix !== void 0;
 	const clearance = box.underLabel ? marginTopOf(typography.bodySmallLineHeight * fontScale) : void 0;
 	const affixStyle = composeStyles(role, colorOf(muted));
-	let t3;
-	if ($[6] !== described || $[7] !== id || $[8] !== prefix || $[9] !== suffix) {
-		t3 = descriptionOf([
+	const lines = typography.bodyLargeLineHeight * fontScale * (multiline ? rows : 1);
+	const copied = multiline && autosize && Platform.OS === "web";
+	const extent = multiline && !autosize ? heightOf(lines) : minHeightOf(lines);
+	let t6;
+	if ($[9] !== described || $[10] !== id || $[11] !== prefix || $[12] !== suffix) {
+		t6 = descriptionOf([
 			...affixPart(`${id}-prefix`, prefix),
 			...affixPart(`${id}-suffix`, suffix),
 			...described
 		]);
-		$[6] = described;
-		$[7] = id;
-		$[8] = prefix;
-		$[9] = suffix;
-		$[10] = t3;
-	} else t3 = $[10];
-	let t4;
-	if ($[11] !== box) {
-		t4 = webStateOf(box);
-		$[11] = box;
-		$[12] = t4;
-	} else t4 = $[12];
+		$[9] = described;
+		$[10] = id;
+		$[11] = prefix;
+		$[12] = suffix;
+		$[13] = t6;
+	} else t6 = $[13];
+	let t7;
+	if ($[14] !== box) {
+		t7 = webStateOf(box);
+		$[14] = box;
+		$[15] = t7;
+	} else t7 = $[15];
 	const control = /* @__PURE__ */ jsx(TextInput, {
 		...Platform.OS === "web" ? INHERITS_DIRECTION : void 0,
 		...props,
-		...t3,
-		...t4,
+		...t6,
+		...t7,
 		"aria-disabled": box.disabled,
 		cursorColor: caret,
+		multiline,
 		placeholderTextColor: muted,
 		selectionColor: caret,
-		style: composeStyles(role, styles.input, colorOf(content), numeric ? numericOf(mono) : void 0, minHeightOf(typography.bodyLargeLineHeight * fontScale), affixed ? void 0 : clearance),
+		style: composeStyles(role, styles.input, colorOf(content), numeric ? numericOf(mono) : void 0, multiline ? styles.inputMultiline : void 0, copied ? styles.inputOverCopy : extent, affixed || copied ? void 0 : clearance),
 		underlineColorAndroid: "transparent"
 	});
+	if (copied) return /* @__PURE__ */ jsxs(View, {
+		style: composeStyles(styles.copied, clearance),
+		children: [/* @__PURE__ */ jsx(Text, {
+			"aria-hidden": true,
+			style: composeStyles(role, styles.copy, extent),
+			children: `${props.value ?? ""} `
+		}), control]
+	});
 	if (!affixed) return control;
-	let t5;
-	if ($[13] !== affixStyle || $[14] !== box.floated || $[15] !== id || $[16] !== prefix) {
-		t5 = prefix === void 0 ? null : /* @__PURE__ */ jsx(Affix, {
+	let t8;
+	if ($[16] !== affixStyle || $[17] !== box.floated || $[18] !== id || $[19] !== prefix) {
+		t8 = prefix === void 0 ? null : /* @__PURE__ */ jsx(Affix, {
 			floated: box.floated,
 			id: `${id}-prefix`,
 			style: affixStyle,
 			children: prefix
 		});
-		$[13] = affixStyle;
-		$[14] = box.floated;
-		$[15] = id;
-		$[16] = prefix;
-		$[17] = t5;
-	} else t5 = $[17];
-	let t6;
-	if ($[18] !== affixStyle || $[19] !== box.floated || $[20] !== id || $[21] !== suffix) {
-		t6 = suffix === void 0 ? null : /* @__PURE__ */ jsx(Affix, {
+		$[16] = affixStyle;
+		$[17] = box.floated;
+		$[18] = id;
+		$[19] = prefix;
+		$[20] = t8;
+	} else t8 = $[20];
+	let t9;
+	if ($[21] !== affixStyle || $[22] !== box.floated || $[23] !== id || $[24] !== suffix) {
+		t9 = suffix === void 0 ? null : /* @__PURE__ */ jsx(Affix, {
 			floated: box.floated,
 			id: `${id}-suffix`,
 			style: affixStyle,
 			children: suffix
 		});
-		$[18] = affixStyle;
-		$[19] = box.floated;
-		$[20] = id;
-		$[21] = suffix;
-		$[22] = t6;
-	} else t6 = $[22];
+		$[21] = affixStyle;
+		$[22] = box.floated;
+		$[23] = id;
+		$[24] = suffix;
+		$[25] = t9;
+	} else t9 = $[25];
 	return /* @__PURE__ */ jsxs(View, {
 		style: composeStyles(styles.affixLine, clearance),
 		children: [
-			t5,
+			t8,
 			control,
-			t6
+			t9
 		]
 	});
 }
@@ -449,7 +484,7 @@ function FieldInput(t0) {
 * once in the control's description instead.
 */
 function FieldMessage(t0) {
-	const $ = c(18);
+	const $ = c(19);
 	const { characterCount: t1, characterLimitLabel, description, error, id, length: t2, maxLength } = t0;
 	const characterCount = t1 === void 0 ? false : t1;
 	const length = t2 === void 0 ? 0 : t2;
@@ -465,13 +500,15 @@ function FieldMessage(t0) {
 	} else t3 = $[1];
 	const ids = t3;
 	const invalid = error !== void 0;
+	const locale = useLocaleOf(void 0);
 	let t4;
-	if ($[2] !== characterLimitLabel || $[3] !== maxLength) {
-		t4 = limitOf(maxLength, characterLimitLabel);
+	if ($[2] !== characterLimitLabel || $[3] !== locale || $[4] !== maxLength) {
+		t4 = limitOf(maxLength, characterLimitLabel, locale);
 		$[2] = characterLimitLabel;
-		$[3] = maxLength;
-		$[4] = t4;
-	} else t4 = $[4];
+		$[3] = locale;
+		$[4] = maxLength;
+		$[5] = t4;
+	} else t4 = $[5];
 	const limit = t4;
 	const insideForm = useInsideForm();
 	const collapsed = !invalid && description === void 0 && !characterCount && !insideForm;
@@ -487,7 +524,7 @@ function FieldMessage(t0) {
 		children: error
 	}) : null;
 	let t8;
-	if ($[5] !== t6 || $[6] !== t7) {
+	if ($[6] !== t6 || $[7] !== t7) {
 		t8 = /* @__PURE__ */ jsx(View, {
 			"aria-live": "polite",
 			...Platform.OS === "web" ? ATOMIC : void 0,
@@ -495,10 +532,10 @@ function FieldMessage(t0) {
 			style: t6,
 			children: t7
 		});
-		$[5] = t6;
-		$[6] = t7;
-		$[7] = t8;
-	} else t8 = $[7];
+		$[6] = t6;
+		$[7] = t7;
+		$[8] = t8;
+	} else t8 = $[8];
 	const t9 = invalid || description === void 0 ? null : /* @__PURE__ */ jsx(Text, {
 		...Platform.OS === "web" ? void 0 : HIDDEN,
 		id: ids.description,
@@ -506,23 +543,23 @@ function FieldMessage(t0) {
 		children: description
 	});
 	let t10;
-	if ($[8] !== ids || $[9] !== limit) {
+	if ($[9] !== ids || $[10] !== limit) {
 		t10 = limit === void 0 || Platform.OS !== "web" ? null : /* @__PURE__ */ jsx(Text, {
 			id: ids.limit,
 			style: NOT_DRAWN,
 			children: limit
 		});
-		$[8] = ids;
-		$[9] = limit;
-		$[10] = t10;
-	} else t10 = $[10];
+		$[9] = ids;
+		$[10] = limit;
+		$[11] = t10;
+	} else t10 = $[11];
 	const t11 = characterCount ? /* @__PURE__ */ jsx(Text, {
 		"aria-hidden": true,
 		style: composeStyles(messageStyle, styles.counter),
-		children: countOf(length, maxLength)
+		children: countOf(length, maxLength, locale)
 	}) : null;
 	let t12;
-	if ($[11] !== T0 || $[12] !== t10 || $[13] !== t11 || $[14] !== t5 || $[15] !== t8 || $[16] !== t9) {
+	if ($[12] !== T0 || $[13] !== t10 || $[14] !== t11 || $[15] !== t5 || $[16] !== t8 || $[17] !== t9) {
 		t12 = /* @__PURE__ */ jsxs(T0, {
 			style: t5,
 			children: [
@@ -532,14 +569,14 @@ function FieldMessage(t0) {
 				t11
 			]
 		});
-		$[11] = T0;
-		$[12] = t10;
-		$[13] = t11;
-		$[14] = t5;
-		$[15] = t8;
-		$[16] = t9;
-		$[17] = t12;
-	} else t12 = $[17];
+		$[12] = T0;
+		$[13] = t10;
+		$[14] = t11;
+		$[15] = t5;
+		$[16] = t8;
+		$[17] = t9;
+		$[18] = t12;
+	} else t12 = $[18];
 	return t12;
 }
 /**
@@ -772,9 +809,8 @@ function BoxLabel(t0) {
 function colorOf(color) {
 	return { color };
 }
-function countOf(length, maxLength) {
-	counterFormat ??= new Intl.NumberFormat();
-	return maxLength === void 0 ? counterFormat.format(length) : `${counterFormat.format(length)}/${counterFormat.format(maxLength)}`;
+function countOf(length, maxLength, locale) {
+	return maxLength === void 0 ? formatCount(length, locale) : `${formatCount(length, locale)}/${formatCount(maxLength, locale)}`;
 }
 function descriptionOf(parts) {
 	if (Platform.OS === "web") return parts.length === 0 ? void 0 : { "aria-describedby": parts.map((part) => part.id).join(" ") };
@@ -786,6 +822,9 @@ function focusOf(control) {
 		control.current?.focus();
 	};
 }
+function heightOf(height) {
+	return { height };
+}
 function iconStyleOf(color) {
 	return {
 		color,
@@ -800,12 +839,12 @@ function idsOf(id) {
 	};
 }
 /**
-* The limit in words where there is one: the field's own, or English, which
-* an app in another language replaces through `characterLimitLabel`.
+* The limit in words where there is one: the field's own, or the library's
+* in `locale`.
 */
-function limitOf(maxLength, label) {
+function limitOf(maxLength, label, locale) {
 	if (maxLength === void 0) return;
-	return label ?? (maxLength === 1 ? "Up to 1 character" : `Up to ${String(maxLength)} characters`);
+	return label ?? limitFor(maxLength, locale);
 }
 function marginTopOf(marginTop) {
 	return { marginTop };
@@ -914,6 +953,11 @@ function FieldStroke(t0) {
 	} else t2 = $[4];
 	return t2;
 }
+/**
+* Says an error on iOS as it arrives, where a live region says nothing. An
+* error the field opened with is not said, and neither is one that has not
+* changed.
+*/
 function useErrorAnnouncement(error) {
 	const $ = c(3);
 	const said = useRef(error);
@@ -1002,6 +1046,6 @@ function widthTo(onMeasure) {
 	};
 }
 //#endregion
-export { FieldBox, FieldInput, FieldMessage, FieldStates, FieldStroke, describedBy, useFieldFocus, useStrokeMotion };
+export { FieldBox, FieldInput, FieldMessage, FieldStates, FieldStroke, describedBy, useErrorAnnouncement, useFieldFocus, useStrokeMotion };
 
 //# sourceMappingURL=index.js.map