@kanso-labs/react-native-kanso-ui 0.0.0-stage → 0.1.0

package/dist/components/search-field/index.d.ts

@@ -0,0 +1,98 @@
+import { ValidationResult } from "../../form/index.js";
+import { StyleProp, TextInput, TextInputProps, View, ViewStyle } from "react-native";
+import { Ref } from "react";
+//#region src/components/search-field/index.d.ts
+type SearchFieldProps = Omit<TextInputProps, 'accessibilityHint' | 'accessibilityLabel' | 'aria-disabled' | 'aria-label' | 'children' | 'cursorColor' | 'defaultValue' | 'editable' | 'multiline' | 'numberOfLines' | 'onChange' | 'onChangeText' | 'placeholderTextColor' | 'readOnly' | 'returnKeyType' | 'role' | 'selectionColor' | 'style' | 'underlineColorAndroid' | 'value'> & {
+  /**
+   * The name of the button that clears the field, for a screen reader.
+   * Left out, it is "Clear search", the English name web's takes from React
+   * Aria.
+   */
+  readonly clearLabel?: string;
+  /** The value the field opens with, when it keeps its own. */
+  readonly defaultValue?: string;
+  /**
+   * A hint shown under the bar. Replaced by `error` when there is one, so the
+   * two never stack.
+   */
+  readonly description?: string;
+  /**
+   * The problem with the current value, in words. Its presence is what puts
+   * the field in its error state: the message, the ring in the error role,
+   * and the invalid state a screen reader reads all follow from it. The line
+   * under the bar arrives with the message, so the field grows when this
+   * does, unless it is inside a `Form`, which keeps the line drawn. It wins
+   * over what `validate` and the form say, and holds a `native` form back.
+   */
+  readonly error?: string;
+  /**
+   * A ref to the field's own `TextInput`, which is what a call site moves
+   * focus to. `ref` is the field as a whole.
+   */
+  readonly inputRef?: Ref<TextInput>;
+  /**
+   * Draws the field disabled: it takes no focus and no input, and its clear
+   * button no press.
+   * @default false
+   */
+  readonly isDisabled?: boolean;
+  /**
+   * Whether the field has to be filled in, which a screen reader reads.
+   * Inside a `native` form, an empty one holds the submission back and shows
+   * its error once a submission is tried. The bar draws no label, so there
+   * is no asterisk to show it.
+   * @default false
+   */
+  readonly isRequired?: boolean;
+  /**
+   * What the field searches, for a screen reader. The bar draws no label, so
+   * this is read and never shown; `placeholder` is what is seen.
+   */
+  readonly label: string;
+  /**
+   * The name the value is submitted under by the `Form` around the field,
+   * and the key its `validationErrors` reach the field by.
+   */
+  readonly name?: string;
+  /** Called with the new value as it is edited, and with `''` once cleared. */
+  readonly onChange?: (value: string) => void;
+  /** Called once the field is emptied, from its clear button or Escape. */
+  readonly onClear?: () => void;
+  /** Called with the value when the keyboard's search key submits it. */
+  readonly onSubmit?: (value: string) => void;
+  /** The supporting text in the empty bar, which is what a person reads. */
+  readonly placeholder?: string;
+  readonly ref?: Ref<View>;
+  /** Positions and sizes the field as a whole. */
+  readonly style?: StyleProp<ViewStyle>;
+  /**
+   * Checks the value, and returns its problem in words, or several, where
+   * there is one, and `true`, `null` or `undefined` where there is none.
+   * Under the default `aria` validation the error shows as the value
+   * changes; inside a `native` form it shows once a submission is tried, or
+   * once the field loses focus after an edit, and holds the form back.
+   */
+  readonly validate?: (value: string) => ValidationResult;
+  /** The value, when the call site keeps it. */
+  readonly value?: string;
+};
+/**
+ * A search bar: a keyword typed into a pill, submitted with the keyboard's
+ * search key and cleared with its button. Pass `value` with `onChange` to
+ * control it, or `defaultValue` to let it keep its own; `onSubmit` is handed
+ * the value when the search key is pressed, and `onClear` is called when the
+ * field is emptied.
+ *
+ * The bar is the search page's rather than the box the other fields share;
+ * the control and the line under it are the field chrome in `src/field`.
+ * React Native's own `TextInput` props reach the control; `style` and `ref`
+ * are the field as a whole, and `inputRef` the control.
+ *
+ * ```tsx
+ * <SearchField label="Label" placeholder="Supporting text" />
+ * ```
+ */
+declare function SearchField({ clearLabel, defaultValue, description, error, inputRef, isDisabled, isRequired, label, name, onBlur, onChange, onClear, onFocus, onKeyPress, onSubmit, onSubmitEditing, ref, style, validate, value, ...props }: SearchFieldProps): import("react").JSX.Element;
+//#endregion
+export { SearchField, type SearchFieldProps };
+//# sourceMappingURL=index.d.ts.map

package/dist/components/search-field/index.js

@@ -0,0 +1,521 @@
+import { IconStyleContext } from "../../glyphs/icon-style.js";
+import { CloseGlyph, SearchGlyph } from "../../glyphs/index.js";
+import { useTheme } from "../../theme/scope.js";
+import { composeStyles, themedStyles } from "../../theme/styles.js";
+import { useFieldValidation } from "../../form/index.js";
+import { withOpacity } from "../../theme/color.js";
+import { usePressFeedback } from "../../press/index.js";
+import { IconButton } from "../icon-button/index.js";
+import { FieldInput, FieldMessage, FieldStates, FieldStroke, describedBy, useFieldFocus, useStrokeMotion } from "../../field/index.js";
+import { c } from "react/compiler-runtime";
+import { Pressable, StyleSheet, View, useWindowDimensions } from "react-native";
+import { useId, useImperativeHandle, useRef, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/search-field/index.tsx
+const ICON_SIZE = 24;
+const MAX_WIDTH = 720;
+const CLEAR_LABEL = "Clear search";
+const stylesOf = themedStyles(({ colors, radii, spacing, stateLayerOpacity }) => StyleSheet.create({
+	bar: {
+		alignItems: "center",
+		backgroundColor: colors.surfaceContainerHigh,
+		borderRadius: radii.pill,
+		flexDirection: "row",
+		gap: spacing.lg,
+		maxWidth: MAX_WIDTH,
+		paddingEnd: spacing.lg,
+		paddingStart: spacing.lg + spacing.md
+	},
+	barDisabled: { backgroundColor: withOpacity(colors.onSurface, stateLayerOpacity.disabledContainer) },
+	clear: { marginEnd: spacing.xs },
+	ring: {
+		borderRadius: radii.pill,
+		bottom: 0,
+		left: 0,
+		pointerEvents: "none",
+		position: "absolute",
+		right: 0,
+		top: 0
+	}
+}));
+function blurThen(onBlur, then) {
+	return (event) => {
+		onBlur();
+		then?.(event);
+	};
+}
+function clearFrom(onClear, control) {
+	return () => {
+		onClear();
+		control.current?.focus();
+	};
+}
+function clearInto(setOwn, onChange, onClear, onEdit) {
+	return () => {
+		setOwn("");
+		onEdit();
+		onChange?.("");
+		onClear?.();
+	};
+}
+function editInto(setOwn, onChange, onEdit) {
+	return (text) => {
+		setOwn(text);
+		onEdit();
+		onChange?.(text);
+	};
+}
+function focusOf(control) {
+	return () => {
+		control.current?.focus();
+	};
+}
+function iconStyleOf(color) {
+	return {
+		color,
+		size: ICON_SIZE
+	};
+}
+function keyInto(clear, onKeyPress) {
+	return (event) => {
+		if (clear !== void 0 && event.nativeEvent.key === "Escape") clear();
+		onKeyPress?.(event);
+	};
+}
+function minHeightOf(minHeight) {
+	return { minHeight };
+}
+/**
+* The bar around the control: the pill with its state layer and ring, the
+* magnifier at the start and the clear button at the end. A press anywhere on
+* it focuses the control.
+*/
+function SearchBar(t0) {
+	const $ = c(48);
+	const { children, clearLabel, control, isDisabled, isFocused, isInvalid, isRequired, onClear, showsClear } = t0;
+	const theme = useTheme();
+	const styles = stylesOf(theme);
+	const { fontScale } = useWindowDimensions();
+	const { colors, radii, sizing, stateLayerOpacity, typography } = theme;
+	let t1;
+	if ($[0] !== radii.pill) {
+		t1 = { borderRadius: radii.pill };
+		$[0] = radii.pill;
+		$[1] = t1;
+	} else t1 = $[1];
+	let t2;
+	if ($[2] !== colors.onSurface || $[3] !== isDisabled || $[4] !== t1) {
+		t2 = {
+			color: colors.onSurface,
+			corners: t1,
+			disabled: isDisabled,
+			disableRipple: true
+		};
+		$[2] = colors.onSurface;
+		$[3] = isDisabled;
+		$[4] = t1;
+		$[5] = t2;
+	} else t2 = $[5];
+	const feedback = usePressFeedback(t2);
+	const ring = useStrokeMotion(isInvalid ? colors.error : colors.primary, isDisabled ? 0 : isFocused ? 2 : isInvalid ? 1 : 0);
+	const T0 = Pressable;
+	const t3 = false;
+	const t4 = false;
+	const t5 = feedback.handlers.onHoverIn;
+	const t6 = feedback.handlers.onHoverOut;
+	let t7;
+	if ($[6] !== control) {
+		t7 = focusOf(control);
+		$[6] = control;
+		$[7] = t7;
+	} else t7 = $[7];
+	const t8 = feedback.handlers.onPressIn;
+	const t9 = feedback.handlers.onPressOut;
+	const t10 = composeStyles(styles.bar, isDisabled ? styles.barDisabled : void 0, minHeightOf(sizing.controlLg + typography.bodyLargeLineHeight * (fontScale - 1)));
+	const t11 = feedback.layer;
+	let t12;
+	if ($[8] !== ring.color || $[9] !== ring.width || $[10] !== styles.ring) {
+		t12 = /* @__PURE__ */ jsx(FieldStroke, {
+			color: ring.color,
+			sides: "all",
+			style: styles.ring,
+			width: ring.width
+		});
+		$[8] = ring.color;
+		$[9] = ring.width;
+		$[10] = styles.ring;
+		$[11] = t12;
+	} else t12 = $[11];
+	let t13;
+	if ($[12] !== colors.onSurface || $[13] !== colors.onSurfaceVariant || $[14] !== isDisabled || $[15] !== stateLayerOpacity) {
+		t13 = isDisabled ? withOpacity(colors.onSurface, stateLayerOpacity.disabledContent) : colors.onSurfaceVariant;
+		$[12] = colors.onSurface;
+		$[13] = colors.onSurfaceVariant;
+		$[14] = isDisabled;
+		$[15] = stateLayerOpacity;
+		$[16] = t13;
+	} else t13 = $[16];
+	let t14;
+	if ($[17] !== t13) {
+		t14 = iconStyleOf(t13);
+		$[17] = t13;
+		$[18] = t14;
+	} else t14 = $[18];
+	let t15;
+	if ($[19] === Symbol.for("react.memo_cache_sentinel")) {
+		t15 = /* @__PURE__ */ jsx(SearchGlyph, {});
+		$[19] = t15;
+	} else t15 = $[19];
+	let t16;
+	if ($[20] !== t14) {
+		t16 = /* @__PURE__ */ jsx(IconStyleContext, {
+			value: t14,
+			children: t15
+		});
+		$[20] = t14;
+		$[21] = t16;
+	} else t16 = $[21];
+	let t17;
+	if ($[22] !== children || $[23] !== isDisabled || $[24] !== isInvalid || $[25] !== isRequired) {
+		t17 = /* @__PURE__ */ jsx(FieldStates, {
+			isDisabled,
+			isInvalid,
+			isRequired,
+			children
+		});
+		$[22] = children;
+		$[23] = isDisabled;
+		$[24] = isInvalid;
+		$[25] = isRequired;
+		$[26] = t17;
+	} else t17 = $[26];
+	let t18;
+	if ($[27] !== clearLabel || $[28] !== control || $[29] !== isDisabled || $[30] !== onClear || $[31] !== showsClear || $[32] !== styles.clear) {
+		t18 = showsClear ? /* @__PURE__ */ jsx(IconButton, {
+			"aria-label": clearLabel,
+			isDisabled,
+			onPress: clearFrom(onClear, control),
+			style: styles.clear,
+			children: /* @__PURE__ */ jsx(CloseGlyph, {})
+		}) : null;
+		$[27] = clearLabel;
+		$[28] = control;
+		$[29] = isDisabled;
+		$[30] = onClear;
+		$[31] = showsClear;
+		$[32] = styles.clear;
+		$[33] = t18;
+	} else t18 = $[33];
+	let t19;
+	if ($[34] !== T0 || $[35] !== feedback.handlers.onHoverIn || $[36] !== feedback.handlers.onHoverOut || $[37] !== feedback.handlers.onPressIn || $[38] !== feedback.handlers.onPressOut || $[39] !== feedback.layer || $[40] !== isDisabled || $[41] !== t10 || $[42] !== t12 || $[43] !== t16 || $[44] !== t17 || $[45] !== t18 || $[46] !== t7) {
+		t19 = /* @__PURE__ */ jsxs(T0, {
+			accessible: t3,
+			disabled: isDisabled,
+			focusable: t4,
+			onHoverIn: t5,
+			onHoverOut: t6,
+			onPress: t7,
+			onPressIn: t8,
+			onPressOut: t9,
+			style: t10,
+			children: [
+				t11,
+				t12,
+				t16,
+				t17,
+				t18
+			]
+		});
+		$[34] = T0;
+		$[35] = feedback.handlers.onHoverIn;
+		$[36] = feedback.handlers.onHoverOut;
+		$[37] = feedback.handlers.onPressIn;
+		$[38] = feedback.handlers.onPressOut;
+		$[39] = feedback.layer;
+		$[40] = isDisabled;
+		$[41] = t10;
+		$[42] = t12;
+		$[43] = t16;
+		$[44] = t17;
+		$[45] = t18;
+		$[46] = t7;
+		$[47] = t19;
+	} else t19 = $[47];
+	return t19;
+}
+/**
+* A search bar: a keyword typed into a pill, submitted with the keyboard's
+* search key and cleared with its button. Pass `value` with `onChange` to
+* control it, or `defaultValue` to let it keep its own; `onSubmit` is handed
+* the value when the search key is pressed, and `onClear` is called when the
+* field is emptied.
+*
+* The bar is the search page's rather than the box the other fields share;
+* the control and the line under it are the field chrome in `src/field`.
+* React Native's own `TextInput` props reach the control; `style` and `ref`
+* are the field as a whole, and `inputRef` the control.
+*
+* ```tsx
+* <SearchField label="Label" placeholder="Supporting text" />
+* ```
+*/
+function SearchField(t0) {
+	const $ = c(80);
+	let description;
+	let error;
+	let inputRef;
+	let label;
+	let name;
+	let onBlur;
+	let onChange;
+	let onClear;
+	let onFocus;
+	let onKeyPress;
+	let onSubmit;
+	let onSubmitEditing;
+	let props;
+	let ref;
+	let style;
+	let t1;
+	let t2;
+	let t3;
+	let t4;
+	let validate;
+	let value;
+	if ($[0] !== t0) {
+		({clearLabel: t1, defaultValue: t2, description, error, inputRef, isDisabled: t3, isRequired: t4, label, name, onBlur, onChange, onClear, onFocus, onKeyPress, onSubmit, onSubmitEditing, ref, style, validate, value, ...props} = t0);
+		$[0] = t0;
+		$[1] = description;
+		$[2] = error;
+		$[3] = inputRef;
+		$[4] = label;
+		$[5] = name;
+		$[6] = onBlur;
+		$[7] = onChange;
+		$[8] = onClear;
+		$[9] = onFocus;
+		$[10] = onKeyPress;
+		$[11] = onSubmit;
+		$[12] = onSubmitEditing;
+		$[13] = props;
+		$[14] = ref;
+		$[15] = style;
+		$[16] = t1;
+		$[17] = t2;
+		$[18] = t3;
+		$[19] = t4;
+		$[20] = validate;
+		$[21] = value;
+	} else {
+		description = $[1];
+		error = $[2];
+		inputRef = $[3];
+		label = $[4];
+		name = $[5];
+		onBlur = $[6];
+		onChange = $[7];
+		onClear = $[8];
+		onFocus = $[9];
+		onKeyPress = $[10];
+		onSubmit = $[11];
+		onSubmitEditing = $[12];
+		props = $[13];
+		ref = $[14];
+		style = $[15];
+		t1 = $[16];
+		t2 = $[17];
+		t3 = $[18];
+		t4 = $[19];
+		validate = $[20];
+		value = $[21];
+	}
+	const clearLabel = t1 === void 0 ? CLEAR_LABEL : t1;
+	const defaultValue = t2 === void 0 ? "" : t2;
+	const isDisabled = t3 === void 0 ? false : t3;
+	const isRequired = t4 === void 0 ? false : t4;
+	const id = useId();
+	const control = useRef(null);
+	const [own, setOwn] = useState(defaultValue);
+	const current = value ?? own;
+	const t5 = current === "";
+	let t6;
+	if ($[22] !== current || $[23] !== error || $[24] !== isDisabled || $[25] !== isRequired || $[26] !== name || $[27] !== t5 || $[28] !== validate) {
+		t6 = {
+			control,
+			error,
+			isDisabled,
+			isEmpty: t5,
+			isReadOnly: false,
+			isRequired,
+			name,
+			submitted: current,
+			validate,
+			value: current
+		};
+		$[22] = current;
+		$[23] = error;
+		$[24] = isDisabled;
+		$[25] = isRequired;
+		$[26] = name;
+		$[27] = t5;
+		$[28] = validate;
+		$[29] = t6;
+	} else t6 = $[29];
+	const validation = useFieldValidation(t6);
+	let t7;
+	if ($[30] !== onBlur || $[31] !== validation.onBlur) {
+		t7 = blurThen(validation.onBlur, onBlur);
+		$[30] = onBlur;
+		$[31] = validation.onBlur;
+		$[32] = t7;
+	} else t7 = $[32];
+	let t8;
+	if ($[33] !== onFocus || $[34] !== t7) {
+		t8 = {
+			onBlur: t7,
+			onFocus
+		};
+		$[33] = onFocus;
+		$[34] = t7;
+		$[35] = t8;
+	} else t8 = $[35];
+	const focus = useFieldFocus(t8);
+	const clear = clearInto(setOwn, onChange, onClear, validation.onEdit);
+	const shownError = validation.error;
+	let t10;
+	let t9;
+	if ($[36] === Symbol.for("react.memo_cache_sentinel")) {
+		t9 = () => control.current;
+		t10 = [];
+		$[36] = t10;
+		$[37] = t9;
+	} else {
+		t10 = $[36];
+		t9 = $[37];
+	}
+	useImperativeHandle(inputRef, t9, t10);
+	const T0 = View;
+	const T1 = SearchBar;
+	const t11 = focus.focused;
+	const t12 = shownError !== void 0;
+	const t13 = current !== "";
+	const T2 = FieldInput;
+	const t14 = focus.handlers;
+	let t15;
+	if ($[38] !== description || $[39] !== id || $[40] !== shownError) {
+		t15 = describedBy(id, {
+			description,
+			error: shownError
+		});
+		$[38] = description;
+		$[39] = id;
+		$[40] = shownError;
+		$[41] = t15;
+	} else t15 = $[41];
+	const t16 = !isDisabled;
+	let t17;
+	if ($[42] !== onChange || $[43] !== validation.onEdit) {
+		t17 = editInto(setOwn, onChange, validation.onEdit);
+		$[42] = onChange;
+		$[43] = validation.onEdit;
+		$[44] = t17;
+	} else t17 = $[44];
+	const t18 = keyInto(current === "" || isDisabled ? void 0 : clear, onKeyPress);
+	let t19;
+	if ($[45] !== current || $[46] !== onSubmit || $[47] !== onSubmitEditing) {
+		t19 = submitInto(current, onSubmit, onSubmitEditing);
+		$[45] = current;
+		$[46] = onSubmit;
+		$[47] = onSubmitEditing;
+		$[48] = t19;
+	} else t19 = $[48];
+	let t20;
+	if ($[49] !== T2 || $[50] !== current || $[51] !== focus.handlers || $[52] !== label || $[53] !== props || $[54] !== t15 || $[55] !== t16 || $[56] !== t17 || $[57] !== t18 || $[58] !== t19) {
+		t20 = /* @__PURE__ */ jsx(T2, {
+			...props,
+			...t14,
+			"aria-label": label,
+			described: t15,
+			editable: t16,
+			onChangeText: t17,
+			onKeyPress: t18,
+			onSubmitEditing: t19,
+			ref: control,
+			returnKeyType: "search",
+			role: "searchbox",
+			value: current
+		});
+		$[49] = T2;
+		$[50] = current;
+		$[51] = focus.handlers;
+		$[52] = label;
+		$[53] = props;
+		$[54] = t15;
+		$[55] = t16;
+		$[56] = t17;
+		$[57] = t18;
+		$[58] = t19;
+		$[59] = t20;
+	} else t20 = $[59];
+	let t21;
+	if ($[60] !== T1 || $[61] !== clear || $[62] !== clearLabel || $[63] !== focus.focused || $[64] !== isDisabled || $[65] !== isRequired || $[66] !== t12 || $[67] !== t13 || $[68] !== t20) {
+		t21 = /* @__PURE__ */ jsx(T1, {
+			clearLabel,
+			control,
+			isDisabled,
+			isFocused: t11,
+			isInvalid: t12,
+			isRequired,
+			onClear: clear,
+			showsClear: t13,
+			children: t20
+		});
+		$[60] = T1;
+		$[61] = clear;
+		$[62] = clearLabel;
+		$[63] = focus.focused;
+		$[64] = isDisabled;
+		$[65] = isRequired;
+		$[66] = t12;
+		$[67] = t13;
+		$[68] = t20;
+		$[69] = t21;
+	} else t21 = $[69];
+	let t22;
+	if ($[70] !== description || $[71] !== id || $[72] !== shownError) {
+		t22 = /* @__PURE__ */ jsx(FieldMessage, {
+			description,
+			error: shownError,
+			id
+		});
+		$[70] = description;
+		$[71] = id;
+		$[72] = shownError;
+		$[73] = t22;
+	} else t22 = $[73];
+	let t23;
+	if ($[74] !== T0 || $[75] !== ref || $[76] !== style || $[77] !== t21 || $[78] !== t22) {
+		t23 = /* @__PURE__ */ jsxs(T0, {
+			ref,
+			style,
+			children: [t21, t22]
+		});
+		$[74] = T0;
+		$[75] = ref;
+		$[76] = style;
+		$[77] = t21;
+		$[78] = t22;
+		$[79] = t23;
+	} else t23 = $[79];
+	return t23;
+}
+function submitInto(value, onSubmit, onSubmitEditing) {
+	return (event) => {
+		onSubmit?.(value);
+		onSubmitEditing?.(event);
+	};
+}
+//#endregion
+export { SearchField };
+
+//# sourceMappingURL=index.js.map

package/dist/components/search-field/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["ReactNode","Ref","RefObject","StyleProp","TextInput","TextInputKeyPressEvent","TextInputProps","TextInputSubmitEditingEvent","ViewStyle","useId","useImperativeHandle","useRef","useState","Pressable","StyleSheet","useWindowDimensions","View","ValidationResult","IconStyle","describedBy","FieldInput","FieldMessage","FieldStates","FieldStroke","useFieldFocus","useStrokeMotion","useFieldValidation","CloseGlyph","SearchGlyph","IconStyleContext","usePressFeedback","withOpacity","useTheme","composeStyles","themedStyles","IconButton","SearchBarProps","children","clearLabel","control","isDisabled","isFocused","isInvalid","isRequired","onClear","showsClear","SearchFieldProps","Omit","defaultValue","description","error","inputRef","label","name","onChange","value","onSubmit","placeholder","ref","style","validate","ICON_SIZE","MAX_WIDTH","CLEAR_LABEL","stylesOf","colors","radii","spacing","stateLayerOpacity","create","bar","alignItems","backgroundColor","surfaceContainerHigh","borderRadius","pill","flexDirection","gap","lg","maxWidth","paddingEnd","paddingStart","md","barDisabled","onSurface","disabledContainer","clear","marginEnd","xs","ring","bottom","left","pointerEvents","position","right","top","blurThen","onBlur","then","event","clearFrom","current","focus","clearInto","setOwn","onEdit","editInto","text","focusOf","iconStyleOf","color","size","keyInto","onKeyPress","undefined","nativeEvent","key","minHeightOf","minHeight","SearchBar","t0","$","_c","theme","styles","fontScale","sizing","typography","t1","t2","corners","disabled","disableRipple","feedback","primary","T0","t3","t4","t5","handlers","onHoverIn","t6","onHoverOut","t7","t8","onPressIn","t9","onPressOut","t10","controlLg","bodyLargeLineHeight","t11","layer","t12","width","t13","onSurfaceVariant","disabledContent","t14","t15","Symbol","for","t16","t17","t18","t19","SearchField","onFocus","onSubmitEditing","props","id","own","isEmpty","isReadOnly","submitted","validation","shownError","T1","focused","T2","submitInto","t20","t21","t22","t23","_c"],"sources":["../../../src/components/search-field/index.tsx"],"sourcesContent":["import type { ReactNode, Ref, RefObject } from 'react'\nimport type {\n  StyleProp,\n  TextInput,\n  TextInputKeyPressEvent,\n  TextInputProps,\n  TextInputSubmitEditingEvent,\n  ViewStyle,\n} from 'react-native'\n\nimport { useId, useImperativeHandle, useRef, useState } from 'react'\nimport { Pressable, StyleSheet, useWindowDimensions, View } from 'react-native'\n\nimport type { ValidationResult } from '../../form'\nimport type { IconStyle } from '../../glyphs/icon-style'\n\nimport {\n  describedBy,\n  FieldInput,\n  FieldMessage,\n  FieldStates,\n  FieldStroke,\n  useFieldFocus,\n  useStrokeMotion,\n} from '../../field'\nimport { useFieldValidation } from '../../form'\nimport { CloseGlyph, SearchGlyph } from '../../glyphs'\nimport { IconStyleContext } from '../../glyphs/icon-style'\nimport { usePressFeedback } from '../../press'\nimport { withOpacity } from '../../theme/color'\nimport { useTheme } from '../../theme/scope'\nimport { composeStyles, themedStyles } from '../../theme/styles'\nimport { IconButton } from '../icon-button'\n\n// kanso-ui's SearchField: the search page's search bar on its own, rather\n// than the box the other fields share. A pill on surface container high, the\n// page's 24dp magnifier in on surface variant at the start, the value in body\n// large on surface, and a clear button at the end while the field holds\n// anything. The page's 16dp of padding is to a 48dp tap target and the icon\n// sits 12dp inside that, so the magnifier starts 28dp in and the value 4dp\n// past the target, at 68dp. The clear button is the medium icon button, 40dp\n// around a 24dp icon, 4dp in from the padding, so its icon ends 28dp from the\n// end. The bar follows its own width up to the page's 720dp; the page's 360dp\n// floor is left to the call site, since a phone's width less its margins is\n// under it.\n//\n// The bar is the large control height, 56dp, as web's is, and grows by as\n// much as the value's line does at the device's text size.\n//\n// Under a pointer and while pressed, the bar draws the state layer every\n// control draws through `usePressFeedback`, on surface at the hover and\n// pressed opacities, and a press anywhere on it focuses the control, as a\n// press anywhere on the other fields' boxes does. The page names a focused\n// state and draws nothing for it, so the bar takes the 2dp primary ring the\n// text fields page gives a focused field, inside the pill, as web's does. An\n// error is the text fields page's too, which the search page does not name:\n// the ring in the error role, 1dp at rest and 2dp once focused. The ring is a\n// border on a view of its own over the bar rather than a shadow, so the\n// colour and the width ease together and showing it moves nothing.\n//\n// **Disabled is the chrome's, translucent**, on surface at the disabled\n// opacities over whatever the bar sits on, as the text field's box is, rather\n// than mixed over the surface role as web's is.\n//\n// The label is the control's name and is never drawn, since the bar has no\n// place for one: the placeholder is what a person reads.\n\ntype SearchBarProps = {\n  /** The field's input, between the magnifier and the clear button. */\n  readonly children: ReactNode\n  readonly clearLabel: string\n  /** The control a press on the bar, or on the clear button, focuses. */\n  readonly control: RefObject<null | TextInput>\n  readonly isDisabled: boolean\n  readonly isFocused: boolean\n  readonly isInvalid: boolean\n  readonly isRequired: boolean\n  /** Empties the field, from the clear button. */\n  readonly onClear: () => void\n  /** Whether the field holds anything, which shows the clear button. */\n  readonly showsClear: boolean\n}\n\ntype SearchFieldProps = Omit<\n  TextInputProps,\n  | 'accessibilityHint'\n  | 'accessibilityLabel'\n  | 'aria-disabled'\n  | 'aria-label'\n  | 'children'\n  | 'cursorColor'\n  | 'defaultValue'\n  | 'editable'\n  | 'multiline'\n  | 'numberOfLines'\n  | 'onChange'\n  | 'onChangeText'\n  | 'placeholderTextColor'\n  | 'readOnly'\n  | 'returnKeyType'\n  | 'role'\n  | 'selectionColor'\n  | 'style'\n  | 'underlineColorAndroid'\n  | 'value'\n> & {\n  /**\n   * The name of the button that clears the field, for a screen reader.\n   * Left out, it is \"Clear search\", the English name web's takes from React\n   * Aria.\n   */\n  readonly clearLabel?: string\n  /** The value the field opens with, when it keeps its own. */\n  readonly defaultValue?: string\n  /**\n   * A hint shown under the bar. Replaced by `error` when there is one, so the\n   * two never stack.\n   */\n  readonly description?: string\n  /**\n   * The problem with the current value, in words. Its presence is what puts\n   * the field in its error state: the message, the ring in the error role,\n   * and the invalid state a screen reader reads all follow from it. The line\n   * under the bar arrives with the message, so the field grows when this\n   * does, unless it is inside a `Form`, which keeps the line drawn. It wins\n   * over what `validate` and the form say, and holds a `native` form back.\n   */\n  readonly error?: string\n  /**\n   * A ref to the field's own `TextInput`, which is what a call site moves\n   * focus to. `ref` is the field as a whole.\n   */\n  readonly inputRef?: Ref<TextInput>\n  /**\n   * Draws the field disabled: it takes no focus and no input, and its clear\n   * button no press.\n   * @default false\n   */\n  readonly isDisabled?: boolean\n  /**\n   * Whether the field has to be filled in, which a screen reader reads.\n   * Inside a `native` form, an empty one holds the submission back and shows\n   * its error once a submission is tried. The bar draws no label, so there\n   * is no asterisk to show it.\n   * @default false\n   */\n  readonly isRequired?: boolean\n  /**\n   * What the field searches, for a screen reader. The bar draws no label, so\n   * this is read and never shown; `placeholder` is what is seen.\n   */\n  readonly label: string\n  /**\n   * The name the value is submitted under by the `Form` around the field,\n   * and the key its `validationErrors` reach the field by.\n   */\n  readonly name?: string\n  /** Called with the new value as it is edited, and with `''` once cleared. */\n  readonly onChange?: (value: string) => void\n  /** Called once the field is emptied, from its clear button or Escape. */\n  readonly onClear?: () => void\n  /** Called with the value when the keyboard's search key submits it. */\n  readonly onSubmit?: (value: string) => void\n  /** The supporting text in the empty bar, which is what a person reads. */\n  readonly placeholder?: string\n  readonly ref?: Ref<View>\n  /** Positions and sizes the field as a whole. */\n  readonly style?: StyleProp<ViewStyle>\n  /**\n   * Checks the value, and returns its problem in words, or several, where\n   * there is one, and `true`, `null` or `undefined` where there is none.\n   * Under the default `aria` validation the error shows as the value\n   * changes; inside a `native` form it shows once a submission is tried, or\n   * once the field loses focus after an edit, and holds the form back.\n   */\n  readonly validate?: (value: string) => ValidationResult\n  /** The value, when the call site keeps it. */\n  readonly value?: string\n}\n\n// The page's icon, which the magnifier is drawn at.\nconst ICON_SIZE = 24\n\n// The widest the page draws a search bar.\nconst MAX_WIDTH = 720\n\n// The clear button's name when the call site gives none, as React Aria names\n// web's in English.\nconst CLEAR_LABEL = 'Clear search'\n\nconst stylesOf = themedStyles(({ colors, radii, spacing, stateLayerOpacity }) =>\n  StyleSheet.create({\n    bar: {\n      alignItems: 'center',\n      backgroundColor: colors.surfaceContainerHigh,\n      borderRadius: radii.pill,\n      flexDirection: 'row',\n      gap: spacing.lg,\n      maxWidth: MAX_WIDTH,\n      paddingEnd: spacing.lg,\n      paddingStart: spacing.lg + spacing.md,\n    },\n    barDisabled: {\n      backgroundColor: withOpacity(\n        colors.onSurface,\n        stateLayerOpacity.disabledContainer,\n      ),\n    },\n    // 4dp in from the padding, so the icon inside the 40dp button ends\n    // 28dp from the end, where the page's 48dp target puts it.\n    clear: {\n      marginEnd: spacing.xs,\n    },\n    // The ring, over the whole bar and its corners. It takes no touches,\n    // so a press lands on the bar under it.\n    ring: {\n      borderRadius: radii.pill,\n      bottom: 0,\n      left: 0,\n      pointerEvents: 'none',\n      position: 'absolute',\n      right: 0,\n      top: 0,\n    },\n  }),\n)\n\n// Empties the field: the value goes, and the call site is told twice over.\n// The field's own blur handling, then the call site's.\nfunction blurThen(\n  onBlur: () => void,\n  then: TextInputProps['onBlur'],\n): TextInputProps['onBlur'] {\n  return (event) => {\n    onBlur()\n    then?.(event)\n  }\n}\n\n// Empties the field from its button, and hands focus back to the control, so\n// the next keyword is typed straight in.\nfunction clearFrom(onClear: () => void, control: RefObject<null | TextInput>) {\n  return () => {\n    onClear()\n    control.current?.focus()\n  }\n}\n\nfunction clearInto(\n  setOwn: (value: string) => void,\n  onChange: ((value: string) => void) | undefined,\n  onClear: (() => void) | undefined,\n  onEdit: () => void,\n) {\n  return () => {\n    setOwn('')\n    onEdit()\n    onChange?.('')\n    onClear?.()\n  }\n}\n\n// Keeps an edit as the field's own value and reports it, so a field the call\n// site controls is told and one it does not still shows what was typed, and\n// tells the field's validation it was edited.\nfunction editInto(\n  setOwn: (value: string) => void,\n  onChange: ((value: string) => void) | undefined,\n  onEdit: () => void,\n) {\n  return (text: string) => {\n    setOwn(text)\n    onEdit()\n    onChange?.(text)\n  }\n}\n\nfunction focusOf(control: RefObject<null | TextInput>) {\n  return () => {\n    control.current?.focus()\n  }\n}\n\nfunction iconStyleOf(color: string): IconStyle {\n  return { color, size: ICON_SIZE }\n}\n\n// Escape empties a field that holds anything, from a hardware keyboard or\n// under React Native Web, as it does web's. The call site's own handler is\n// called after.\nfunction keyInto(\n  clear: (() => void) | undefined,\n  onKeyPress: TextInputProps['onKeyPress'],\n) {\n  return (event: TextInputKeyPressEvent) => {\n    if (clear !== undefined && event.nativeEvent.key === 'Escape') {\n      clear()\n    }\n    onKeyPress?.(event)\n  }\n}\n\nfunction minHeightOf(minHeight: number): ViewStyle {\n  return { minHeight }\n}\n\n/**\n * The bar around the control: the pill with its state layer and ring, the\n * magnifier at the start and the clear button at the end. A press anywhere on\n * it focuses the control.\n */\nfunction SearchBar({\n  children,\n  clearLabel,\n  control,\n  isDisabled,\n  isFocused,\n  isInvalid,\n  isRequired,\n  onClear,\n  showsClear,\n}: SearchBarProps) {\n  const theme = useTheme()\n  const styles = stylesOf(theme)\n  const { fontScale } = useWindowDimensions()\n  const { colors, radii, sizing, stateLayerOpacity, typography } = theme\n  const feedback = usePressFeedback({\n    color: colors.onSurface,\n    corners: { borderRadius: radii.pill },\n    disabled: isDisabled,\n    disableRipple: true,\n  })\n  const ring = useStrokeMotion(\n    isInvalid ? colors.error : colors.primary,\n    isDisabled ? 0 : isFocused ? 2 : isInvalid ? 1 : 0,\n  )\n\n  return (\n    <Pressable\n      accessible={false}\n      disabled={isDisabled}\n      focusable={false}\n      onHoverIn={feedback.handlers.onHoverIn}\n      onHoverOut={feedback.handlers.onHoverOut}\n      onPress={focusOf(control)}\n      onPressIn={feedback.handlers.onPressIn}\n      onPressOut={feedback.handlers.onPressOut}\n      style={composeStyles<ViewStyle>(\n        styles.bar,\n        isDisabled ? styles.barDisabled : undefined,\n        minHeightOf(\n          sizing.controlLg + typography.bodyLargeLineHeight * (fontScale - 1),\n        ),\n      )}\n    >\n      {feedback.layer}\n      <FieldStroke\n        color={ring.color}\n        sides=\"all\"\n        style={styles.ring}\n        width={ring.width}\n      />\n      <IconStyleContext\n        value={iconStyleOf(\n          isDisabled\n            ? withOpacity(colors.onSurface, stateLayerOpacity.disabledContent)\n            : colors.onSurfaceVariant,\n        )}\n      >\n        <SearchGlyph />\n      </IconStyleContext>\n      <FieldStates\n        isDisabled={isDisabled}\n        isInvalid={isInvalid}\n        isRequired={isRequired}\n      >\n        {children}\n      </FieldStates>\n      {showsClear ? (\n        <IconButton\n          aria-label={clearLabel}\n          isDisabled={isDisabled}\n          onPress={clearFrom(onClear, control)}\n          style={styles.clear}\n        >\n          <CloseGlyph />\n        </IconButton>\n      ) : null}\n    </Pressable>\n  )\n}\n\n/**\n * A search bar: a keyword typed into a pill, submitted with the keyboard's\n * search key and cleared with its button. Pass `value` with `onChange` to\n * control it, or `defaultValue` to let it keep its own; `onSubmit` is handed\n * the value when the search key is pressed, and `onClear` is called when the\n * field is emptied.\n *\n * The bar is the search page's rather than the box the other fields share;\n * the control and the line under it are the field chrome in `src/field`.\n * React Native's own `TextInput` props reach the control; `style` and `ref`\n * are the field as a whole, and `inputRef` the control.\n *\n * ```tsx\n * <SearchField label=\"Label\" placeholder=\"Supporting text\" />\n * ```\n */\nfunction SearchField({\n  clearLabel = CLEAR_LABEL,\n  defaultValue = '',\n  description,\n  error,\n  inputRef,\n  isDisabled = false,\n  isRequired = false,\n  label,\n  name,\n  onBlur,\n  onChange,\n  onClear,\n  onFocus,\n  onKeyPress,\n  onSubmit,\n  onSubmitEditing,\n  ref,\n  style,\n  validate,\n  value,\n  ...props\n}: SearchFieldProps) {\n  const id = useId()\n  const control = useRef<TextInput>(null)\n  const [own, setOwn] = useState(defaultValue)\n  const current = value ?? own\n  const validation = useFieldValidation({\n    control,\n    error,\n    isDisabled,\n    isEmpty: current === '',\n    isReadOnly: false,\n    isRequired,\n    name,\n    submitted: current,\n    validate,\n    value: current,\n  })\n  const focus = useFieldFocus({\n    onBlur: blurThen(validation.onBlur, onBlur),\n    onFocus,\n  })\n  const clear = clearInto(setOwn, onChange, onClear, validation.onEdit)\n  const shownError = validation.error\n\n  useImperativeHandle<null | TextInput, null | TextInput>(\n    inputRef,\n    () => control.current,\n    [],\n  )\n\n  return (\n    <View ref={ref} style={style}>\n      <SearchBar\n        clearLabel={clearLabel}\n        control={control}\n        isDisabled={isDisabled}\n        isFocused={focus.focused}\n        isInvalid={shownError !== undefined}\n        isRequired={isRequired}\n        onClear={clear}\n        showsClear={current !== ''}\n      >\n        <FieldInput\n          {...props}\n          {...focus.handlers}\n          aria-label={label}\n          described={describedBy(id, { description, error: shownError })}\n          editable={!isDisabled}\n          onChangeText={editInto(setOwn, onChange, validation.onEdit)}\n          onKeyPress={keyInto(\n            current === '' || isDisabled ? undefined : clear,\n            onKeyPress,\n          )}\n          onSubmitEditing={submitInto(current, onSubmit, onSubmitEditing)}\n          ref={control}\n          returnKeyType=\"search\"\n          role=\"searchbox\"\n          value={current}\n        />\n      </SearchBar>\n      <FieldMessage description={description} error={shownError} id={id} />\n    </View>\n  )\n}\n\n// Hands the value to `onSubmit` when the keyboard's search key is pressed,\n// and the event to the call site's own handler after.\nfunction submitInto(\n  value: string,\n  onSubmit: ((value: string) => void) | undefined,\n  onSubmitEditing: TextInputProps['onSubmitEditing'],\n) {\n  return (event: TextInputSubmitEditingEvent) => {\n    onSubmit?.(value)\n    onSubmitEditing?.(event)\n  }\n}\n\nexport { SearchField }\nexport type { SearchFieldProps }\n"],"mappings":"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"}