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

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

@@ -0,0 +1,574 @@
+import { useTheme } from "../../theme/scope.js";
+import { composeStyles } from "../../theme/styles.js";
+import { usePressFeedback } from "../../press/index.js";
+import { useTypeRole } from "../../typography/roles.js";
+import { withOpacity } from "../../theme/color.js";
+import { useLocaleOf, useMessages } from "../../i18n/provider.js";
+import { AnimatedPressable, toggleState } from "../../button/index.js";
+import { FieldBox, FieldInput, FieldMessage, FieldWrap, describedBy, useFieldFocus } from "../../field/index.js";
+import { stylesOf } from "../../chip/styles.js";
+import { ChipLabel, measureThen, paintOf, targetOf, useEasedColors } from "../../chip/index.js";
+import { c } from "react/compiler-runtime";
+import { StyleSheet, Text, View, useWindowDimensions } from "react-native";
+import { useId, useImperativeHandle, useRef, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useTokenFieldState } from "react-stately";
+//#region src/components/token-field/index.tsx
+const CONTROL_ROOM = 3;
+const styles = StyleSheet.create({
+	control: {
+		flexBasis: 0,
+		flexGrow: 1
+	},
+	text: { flexShrink: 1 }
+});
+/**
+* Backspace in an empty control: removes the selected pill where there is
+* one, and selects the last otherwise. With no pill, `last` is -1, which no
+* token holds, so it selects nothing. The call site's own handler runs after.
+*/
+function backspaceThen(editor, { editable, last, selected, trailing }, then) {
+	return (event) => {
+		if (editable && event.nativeEvent.key === "Backspace" && trailing === "") {
+			if (selected !== null) editor.remove(selected);
+			else editor.select(last);
+		}
+		then?.(event);
+	};
+}
+function blurThen(editor, then) {
+	return (event) => {
+		editor.select(null);
+		then?.(event);
+	};
+}
+function colorOf(color) {
+	return { color };
+}
+function editorOf(state, setSelected) {
+	return {
+		edit: (text) => {
+			setSelected(null);
+			state.setValue(withTrailing(state.value, text));
+		},
+		remove: (index) => {
+			setSelected(null);
+			state.setValue(withoutToken(state.value, index));
+		},
+		select: setSelected
+	};
+}
+function isPopulated(segments) {
+	return segments.some((segment) => segment.text.length > 0);
+}
+function lastTokenOf(segments) {
+	return segments.findLastIndex((segment) => segment.type === "token");
+}
+function minWidthOf(minWidth) {
+	return { minWidth };
+}
+function removeActionsOf(label, onRemove) {
+	return {
+		accessibilityActions: [{
+			label,
+			name: "remove"
+		}],
+		onAccessibilityAction: (event) => {
+			if (event.nativeEvent.actionName === "remove") onRemove();
+		}
+	};
+}
+function removeOf(editor, index) {
+	return () => {
+		editor.remove(index);
+	};
+}
+function toggleOf(editor, index, selected, control) {
+	return () => {
+		editor.select(selected ? null : index);
+		control.current?.focus();
+	};
+}
+/**
+* A labelled field whose value is text with tokens in it, drawn as pills: a
+* tag input, a mention field, a structured search box. Its value is React
+* Stately's `TokenFieldValue`, which the package re-exports: pass `value` with
+* `onChange` to control it, or `defaultValue` to let it keep its own.
+*
+* ```tsx
+* const [value, setValue] = useState(new TokenFieldValue([]))
+*
+* <TokenField label="Label" onChange={setValue} value={value} />
+* ```
+*
+* What counts as a token is the call site's: subclass `TokenFieldValue` and
+* override `tokenize`, which is handed what is typed after the last pill.
+* `renderToken` decides what each pill holds; without it, the segment's own
+* text.
+*
+* React Native's own `TextInput` props reach the control; `style` and `ref`
+* are the field as a whole, and `inputRef` the control.
+*/
+function TokenField(t0) {
+	const $ = c(77);
+	let defaultValue;
+	let description;
+	let error;
+	let inputRef;
+	let label;
+	let leadingIcon;
+	let onBlur;
+	let onChange;
+	let onFocus;
+	let onKeyPress;
+	let props;
+	let ref;
+	let renderToken;
+	let style;
+	let t1;
+	let t2;
+	let t3;
+	let t4;
+	let trailingIcon;
+	let value;
+	if ($[0] !== t0) {
+		({defaultValue, description, error, floatingLabel: t1, inputRef, isDisabled: t2, isReadOnly: t3, label, leadingIcon, onBlur, onChange, onFocus, onKeyPress, ref, renderToken, style, trailingIcon, value, variant: t4, ...props} = t0);
+		$[0] = t0;
+		$[1] = defaultValue;
+		$[2] = description;
+		$[3] = error;
+		$[4] = inputRef;
+		$[5] = label;
+		$[6] = leadingIcon;
+		$[7] = onBlur;
+		$[8] = onChange;
+		$[9] = onFocus;
+		$[10] = onKeyPress;
+		$[11] = props;
+		$[12] = ref;
+		$[13] = renderToken;
+		$[14] = style;
+		$[15] = t1;
+		$[16] = t2;
+		$[17] = t3;
+		$[18] = t4;
+		$[19] = trailingIcon;
+		$[20] = value;
+	} else {
+		defaultValue = $[1];
+		description = $[2];
+		error = $[3];
+		inputRef = $[4];
+		label = $[5];
+		leadingIcon = $[6];
+		onBlur = $[7];
+		onChange = $[8];
+		onFocus = $[9];
+		onKeyPress = $[10];
+		props = $[11];
+		ref = $[12];
+		renderToken = $[13];
+		style = $[14];
+		t1 = $[15];
+		t2 = $[16];
+		t3 = $[17];
+		t4 = $[18];
+		trailingIcon = $[19];
+		value = $[20];
+	}
+	const floatingLabel = t1 === void 0 ? true : t1;
+	const isDisabled = t2 === void 0 ? false : t2;
+	const isReadOnly = t3 === void 0 ? false : t3;
+	const variant = t4 === void 0 ? "filled" : t4;
+	const id = useId();
+	const theme = useTheme();
+	const { fontScale } = useWindowDimensions();
+	const control = useRef(null);
+	let t5;
+	if ($[21] !== defaultValue || $[22] !== onChange || $[23] !== value) {
+		t5 = {
+			defaultValue,
+			onChange,
+			value
+		};
+		$[21] = defaultValue;
+		$[22] = onChange;
+		$[23] = value;
+		$[24] = t5;
+	} else t5 = $[24];
+	const state = useTokenFieldState(t5);
+	const [selected, setSelected] = useState(null);
+	const editor = editorOf(state, setSelected);
+	const focus = useFieldFocus({
+		onBlur: blurThen(editor, onBlur),
+		onFocus
+	});
+	const locale = useLocaleOf(void 0);
+	const messages = useMessages();
+	const editable = !isDisabled && !isReadOnly;
+	const { segments } = state.value;
+	const last = lastTokenOf(segments);
+	const trailing = segments.slice(last + 1).map(_temp).join("");
+	const chosen = selected !== null && segments[selected]?.type === "token" ? selected : null;
+	let t6;
+	let t7;
+	if ($[25] === Symbol.for("react.memo_cache_sentinel")) {
+		t6 = () => control.current;
+		t7 = [];
+		$[25] = t6;
+		$[26] = t7;
+	} else {
+		t6 = $[25];
+		t7 = $[26];
+	}
+	useImperativeHandle(inputRef, t6, t7);
+	const T0 = View;
+	const T1 = FieldBox;
+	const t8 = focus.focused;
+	const t9 = error !== void 0;
+	let t10;
+	if ($[27] !== segments) {
+		t10 = isPopulated(segments);
+		$[27] = segments;
+		$[28] = t10;
+	} else t10 = $[28];
+	const T2 = FieldWrap;
+	const t11 = segments.slice(0, last + 1).map((segment_0, index) => {
+		const key = `${String(index)}:${segment_0.text}`;
+		if (segment_0.type === "token") return /* @__PURE__ */ jsx(TokenPill, {
+			control,
+			editor,
+			index,
+			isDisabled,
+			isReadOnly,
+			isSelected: chosen === index,
+			removeLabel: messages.remove,
+			text: segment_0.text,
+			children: renderToken === void 0 ? segment_0.text : renderToken(segment_0)
+		}, key);
+		const words = segment_0.text.trim();
+		return words === "" ? null : /* @__PURE__ */ jsx(TokenText, {
+			isDisabled,
+			children: words
+		}, key);
+	});
+	const T3 = View;
+	let t12;
+	if ($[29] !== fontScale || $[30] !== theme.typography.bodyLargeSize) {
+		t12 = composeStyles(styles.control, minWidthOf(CONTROL_ROOM * theme.typography.bodyLargeSize * fontScale));
+		$[29] = fontScale;
+		$[30] = theme.typography.bodyLargeSize;
+		$[31] = t12;
+	} else t12 = $[31];
+	const T4 = FieldInput;
+	const t13 = focus.handlers;
+	let t14;
+	if ($[32] !== description || $[33] !== error || $[34] !== id || $[35] !== locale) {
+		t14 = describedBy(id, {
+			description,
+			error,
+			locale
+		});
+		$[32] = description;
+		$[33] = error;
+		$[34] = id;
+		$[35] = locale;
+		$[36] = t14;
+	} else t14 = $[36];
+	const t15 = editor.edit;
+	const t16 = backspaceThen(editor, {
+		editable,
+		last,
+		selected: chosen,
+		trailing
+	}, onKeyPress);
+	let t17;
+	if ($[37] !== T4 || $[38] !== editable || $[39] !== editor || $[40] !== focus.handlers || $[41] !== label || $[42] !== props || $[43] !== t14 || $[44] !== t16 || $[45] !== trailing) {
+		t17 = /* @__PURE__ */ jsx(T4, {
+			...props,
+			...t13,
+			"aria-label": label,
+			described: t14,
+			editable,
+			onChangeText: t15,
+			onKeyPress: t16,
+			ref: control,
+			value: trailing
+		});
+		$[37] = T4;
+		$[38] = editable;
+		$[39] = editor;
+		$[40] = focus.handlers;
+		$[41] = label;
+		$[42] = props;
+		$[43] = t14;
+		$[44] = t16;
+		$[45] = trailing;
+		$[46] = t17;
+	} else t17 = $[46];
+	let t18;
+	if ($[47] !== T3 || $[48] !== t12 || $[49] !== t17) {
+		t18 = /* @__PURE__ */ jsx(T3, {
+			style: t12,
+			children: t17
+		});
+		$[47] = T3;
+		$[48] = t12;
+		$[49] = t17;
+		$[50] = t18;
+	} else t18 = $[50];
+	let t19;
+	if ($[51] !== T2 || $[52] !== t11 || $[53] !== t18) {
+		t19 = /* @__PURE__ */ jsxs(T2, { children: [t11, t18] });
+		$[51] = T2;
+		$[52] = t11;
+		$[53] = t18;
+		$[54] = t19;
+	} else t19 = $[54];
+	let t20;
+	if ($[55] !== T1 || $[56] !== floatingLabel || $[57] !== focus.focused || $[58] !== isDisabled || $[59] !== label || $[60] !== leadingIcon || $[61] !== t10 || $[62] !== t19 || $[63] !== t9 || $[64] !== trailingIcon || $[65] !== variant) {
+		t20 = /* @__PURE__ */ jsx(T1, {
+			control,
+			floatingLabel,
+			isDisabled,
+			isFocused: t8,
+			isInvalid: t9,
+			isPopulated: t10,
+			label,
+			leading: leadingIcon,
+			trailing: trailingIcon,
+			variant,
+			children: t19
+		});
+		$[55] = T1;
+		$[56] = floatingLabel;
+		$[57] = focus.focused;
+		$[58] = isDisabled;
+		$[59] = label;
+		$[60] = leadingIcon;
+		$[61] = t10;
+		$[62] = t19;
+		$[63] = t9;
+		$[64] = trailingIcon;
+		$[65] = variant;
+		$[66] = t20;
+	} else t20 = $[66];
+	let t21;
+	if ($[67] !== description || $[68] !== error || $[69] !== id) {
+		t21 = /* @__PURE__ */ jsx(FieldMessage, {
+			description,
+			error,
+			id
+		});
+		$[67] = description;
+		$[68] = error;
+		$[69] = id;
+		$[70] = t21;
+	} else t21 = $[70];
+	let t22;
+	if ($[71] !== T0 || $[72] !== ref || $[73] !== style || $[74] !== t20 || $[75] !== t21) {
+		t22 = /* @__PURE__ */ jsxs(T0, {
+			ref,
+			style,
+			children: [t20, t21]
+		});
+		$[71] = T0;
+		$[72] = ref;
+		$[73] = style;
+		$[74] = t20;
+		$[75] = t21;
+		$[76] = t22;
+	} else t22 = $[76];
+	return t22;
+}
+/**
+* One token's pill: the chips page's input chip, unselected at rest and the
+* selected chip while it is selected, holding what `renderToken` draws, or
+* its text.
+*/
+function _temp(segment) {
+	return segment.text;
+}
+function TokenPill(t0) {
+	const $ = c(46);
+	const { children, control, editor, index, isDisabled, isReadOnly, isSelected, removeLabel, text } = t0;
+	const theme = useTheme();
+	const [width, setWidth] = useState(48);
+	const editable = !isDisabled && !isReadOnly;
+	let t1;
+	if ($[0] !== isDisabled || $[1] !== isSelected || $[2] !== theme) {
+		t1 = paintOf(theme, {
+			assist: false,
+			disabled: isDisabled,
+			elevated: false,
+			selected: isSelected
+		});
+		$[0] = isDisabled;
+		$[1] = isSelected;
+		$[2] = theme;
+		$[3] = t1;
+	} else t1 = $[3];
+	const paint = t1;
+	const eased = useEasedColors(paint);
+	let t2;
+	if ($[4] !== theme.radii.sm) {
+		t2 = { borderRadius: theme.radii.sm };
+		$[4] = theme.radii.sm;
+		$[5] = t2;
+	} else t2 = $[5];
+	const t3 = !editable;
+	let t4;
+	if ($[6] !== paint.layer || $[7] !== t2 || $[8] !== t3) {
+		t4 = {
+			color: paint.layer,
+			corners: t2,
+			disabled: t3
+		};
+		$[6] = paint.layer;
+		$[7] = t2;
+		$[8] = t3;
+		$[9] = t4;
+	} else t4 = $[9];
+	const feedback = usePressFeedback(t4);
+	let t5;
+	if ($[10] !== isReadOnly || $[11] !== isSelected) {
+		t5 = isReadOnly ? void 0 : {
+			role: "button",
+			...toggleState(isSelected)
+		};
+		$[10] = isReadOnly;
+		$[11] = isSelected;
+		$[12] = t5;
+	} else t5 = $[12];
+	let t6;
+	if ($[13] !== editable || $[14] !== editor || $[15] !== index || $[16] !== removeLabel) {
+		t6 = editable ? removeActionsOf(removeLabel, removeOf(editor, index)) : void 0;
+		$[13] = editable;
+		$[14] = editor;
+		$[15] = index;
+		$[16] = removeLabel;
+		$[17] = t6;
+	} else t6 = $[17];
+	const t7 = feedback.handlers;
+	let t8;
+	if ($[18] !== theme || $[19] !== width) {
+		t8 = targetOf(width, theme);
+		$[18] = theme;
+		$[19] = width;
+		$[20] = t8;
+	} else t8 = $[20];
+	let t9;
+	if ($[21] === Symbol.for("react.memo_cache_sentinel")) {
+		t9 = measureThen(setWidth, void 0);
+		$[21] = t9;
+	} else t9 = $[21];
+	let t10;
+	if ($[22] !== control || $[23] !== editable || $[24] !== editor || $[25] !== index || $[26] !== isSelected) {
+		t10 = editable ? toggleOf(editor, index, isSelected, control) : void 0;
+		$[22] = control;
+		$[23] = editable;
+		$[24] = editor;
+		$[25] = index;
+		$[26] = isSelected;
+		$[27] = t10;
+	} else t10 = $[27];
+	let t11;
+	if ($[28] !== eased.container || $[29] !== feedback.ring || $[30] !== theme) {
+		t11 = composeStyles(stylesOf(theme).pill, eased.container, feedback.ring);
+		$[28] = eased.container;
+		$[29] = feedback.ring;
+		$[30] = theme;
+		$[31] = t11;
+	} else t11 = $[31];
+	let t12;
+	if ($[32] !== children || $[33] !== eased.label) {
+		t12 = /* @__PURE__ */ jsx(ChipLabel, {
+			color: eased.label,
+			children
+		});
+		$[32] = children;
+		$[33] = eased.label;
+		$[34] = t12;
+	} else t12 = $[34];
+	let t13;
+	if ($[35] !== feedback.handlers || $[36] !== feedback.layer || $[37] !== isDisabled || $[38] !== t10 || $[39] !== t11 || $[40] !== t12 || $[41] !== t5 || $[42] !== t6 || $[43] !== t8 || $[44] !== text) {
+		t13 = /* @__PURE__ */ jsxs(AnimatedPressable, {
+			...t5,
+			...t6,
+			...t7,
+			"aria-label": text,
+			disabled: isDisabled,
+			hitSlop: t8,
+			onLayout: t9,
+			onPress: t10,
+			style: t11,
+			children: [feedback.layer, t12]
+		});
+		$[35] = feedback.handlers;
+		$[36] = feedback.layer;
+		$[37] = isDisabled;
+		$[38] = t10;
+		$[39] = t11;
+		$[40] = t12;
+		$[41] = t5;
+		$[42] = t6;
+		$[43] = t8;
+		$[44] = text;
+		$[45] = t13;
+	} else t13 = $[45];
+	return t13;
+}
+/**
+* Text before the last pill, in the value's type and colour, with the spaces
+* at its ends left to the row's gaps.
+*/
+function TokenText(t0) {
+	const $ = c(8);
+	const { children, isDisabled } = t0;
+	const { colors, stateLayerOpacity } = useTheme();
+	const role = useTypeRole("bodyLarge");
+	let t1;
+	if ($[0] !== colors.onSurface || $[1] !== isDisabled || $[2] !== role || $[3] !== stateLayerOpacity) {
+		t1 = composeStyles(role, colorOf(isDisabled ? withOpacity(colors.onSurface, stateLayerOpacity.disabledContent) : colors.onSurface), styles.text);
+		$[0] = colors.onSurface;
+		$[1] = isDisabled;
+		$[2] = role;
+		$[3] = stateLayerOpacity;
+		$[4] = t1;
+	} else t1 = $[4];
+	let t2;
+	if ($[5] !== children || $[6] !== t1) {
+		t2 = /* @__PURE__ */ jsx(Text, {
+			style: t1,
+			children
+		});
+		$[5] = children;
+		$[6] = t1;
+		$[7] = t2;
+	} else t2 = $[7];
+	return t2;
+}
+function withoutToken(value, index) {
+	return value.replaceRange({
+		index,
+		offset: 0
+	}, {
+		index,
+		offset: value.segments[index]?.text.length ?? 0
+	}, "");
+}
+function withTrailing(value, text) {
+	const { segments } = value;
+	const end = segments.length - 1;
+	return value.replaceRange({
+		index: lastTokenOf(segments) + 1,
+		offset: 0
+	}, {
+		index: end,
+		offset: segments[end]?.text.length ?? 0
+	}, text);
+}
+//#endregion
+export { TokenField };
+
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["ComponentRef","ReactNode","Ref","RefObject","AccessibilityActionEvent","StyleProp","TextInput","TextInputProps","TextStyle","ViewStyle","AnimatedStyle","TokenFieldSegment","TokenFieldState","TokenFieldValue","TokenSegment","useId","useImperativeHandle","useRef","useState","Text","NativeText","StyleSheet","useWindowDimensions","View","useTokenFieldState","FieldVariant","AnimatedPressable","toggleState","ChipLabel","measureThen","paintOf","targetOf","useEasedColors","stylesOf","describedBy","FieldBox","FieldInput","FieldMessage","FieldWrap","useFieldFocus","useLocaleOf","useMessages","TARGET_SIZE","usePressFeedback","withOpacity","useTheme","composeStyles","useTypeRole","Editor","edit","text","remove","index","select","TokenFieldProps","Omit","defaultValue","T","description","error","floatingLabel","inputRef","isDisabled","isReadOnly","label","leadingIcon","onChange","value","ref","renderToken","segment","style","trailingIcon","variant","CONTROL_ROOM","styles","create","control","flexBasis","flexGrow","flexShrink","backspaceThen","editor","editable","last","selected","trailing","then","event","nativeEvent","key","blurThen","colorOf","color","editorOf","state","setSelected","setValue","withTrailing","withoutToken","isPopulated","segments","some","length","lastTokenOf","findLastIndex","type","minWidthOf","minWidth","removeActionsOf","onRemove","accessibilityActions","name","onAccessibilityAction","actionName","removeOf","toggleOf","current","focus","TokenField","t0","$","_c","onBlur","onFocus","onKeyPress","props","t1","t2","t3","t4","undefined","id","theme","fontScale","t5","locale","messages","slice","map","_temp","join","chosen","t6","t7","Symbol","for","T0","T1","t8","focused","t9","t10","T2","t11","segment_0","String","words","trim","T3","t12","typography","bodyLargeSize","T4","t13","handlers","t14","t15","t16","t17","t18","t19","t20","t21","t22","TokenPill","children","isSelected","removeLabel","width","setWidth","assist","disabled","elevated","paint","eased","radii","sm","borderRadius","layer","corners","feedback","role","const","container","ring","pill","TokenText","colors","stateLayerOpacity","onSurface","disabledContent","replaceRange","offset","end","_c","NativeText"],"sources":["../../../src/components/token-field/index.tsx"],"sourcesContent":["import type { ComponentRef, ReactNode, Ref, RefObject } from 'react'\nimport type {\n  AccessibilityActionEvent,\n  StyleProp,\n  TextInput,\n  TextInputProps,\n  TextStyle,\n  ViewStyle,\n} from 'react-native'\nimport type { AnimatedStyle } from 'react-native-reanimated'\nimport type {\n  TokenFieldSegment,\n  TokenFieldState,\n  TokenFieldValue,\n  TokenSegment,\n} from 'react-stately'\n\nimport { useId, useImperativeHandle, useRef, useState } from 'react'\nimport {\n  Text as NativeText,\n  StyleSheet,\n  useWindowDimensions,\n  View,\n} from 'react-native'\nimport { useTokenFieldState } from 'react-stately'\n\nimport type { FieldVariant } from '../../field'\n\nimport { AnimatedPressable, toggleState } from '../../button'\nimport {\n  ChipLabel,\n  measureThen,\n  paintOf,\n  targetOf,\n  useEasedColors,\n} from '../../chip'\nimport { stylesOf } from '../../chip/styles'\nimport {\n  describedBy,\n  FieldBox,\n  FieldInput,\n  FieldMessage,\n  FieldWrap,\n  useFieldFocus,\n} from '../../field'\nimport { useLocaleOf, useMessages } from '../../i18n/provider'\nimport { TARGET_SIZE, usePressFeedback } from '../../press'\nimport { withOpacity } from '../../theme/color'\nimport { useTheme } from '../../theme/scope'\nimport { composeStyles } from '../../theme/styles'\nimport { useTypeRole } from '../../typography/roles'\n\n// kanso-ui's TokenField: the chips page's input chips inside a text field, a\n// field whose value is text with pills in it, such as a tag input, a mention\n// field or a structured search box. The box, label, supporting line and error\n// are the field chrome in src/field, shared with every other field, and the\n// pill is src/chip's, shared with Chip and ChipGroup's chip, as on web.\n//\n// The value is React Stately's `TokenFieldValue`, a list of text and token\n// segments rather than a string, and the field does not wrap it. What counts\n// as a token is the call site's to decide, by subclassing it and overriding\n// `tokenize`, which the package re-exports for that, as web's does.\n//\n// **What is typed goes into a text input after the last pill**, since a\n// TextInput holds no views, where web's editable area is a contenteditable\n// element holding both. The pills and any text before the last of them are\n// drawn in a row that wraps, the text with the spaces at its ends given to the\n// row's gaps, and the control holds what follows the last pill, which each\n// edit hands to `tokenize` together. So a token is made where it is typed, at\n// the end, and text before the last pill is shown and kept rather than edited\n// in place: it comes back into the control once the pills after it are\n// removed.\n//\n// **Backspace takes a pill out in two presses.** In an empty control the\n// first selects the pill before it, and the second removes it. A press on a\n// pill selects it, or lets it go if it was selected, and moves focus to the\n// control, so Backspace there takes it out next. Typing, or leaving the\n// field, lets the selection go. A selected pill is the selected input chip,\n// on the secondary container pair, with no check, as web draws it.\n//\n// **Each pill is one element to a screen reader**, named by its text whatever\n// `renderToken` draws in it, and a toggle reporting whether it is selected, as\n// a filter chip reports its state. VoiceOver and TalkBack offer it a remove\n// action named in the provider's locale, which takes a pill out without a\n// keyboard. Read-only, a pill is its text and nothing to press.\n//\n// The control keeps three characters' width at the least after the last pill,\n// starting a line of its own when the line has less left, and scrolls what is\n// typed past its width, as any one-line field does.\n\n/** What the field's parts do to its value and its selected pill. */\ntype Editor = {\n  /** Takes what the control holds, after the last pill, as typed. */\n  readonly edit: (text: string) => void\n  /** Takes the token at a segment's index out of the value. */\n  readonly remove: (index: number) => void\n  /** Selects the pill at a segment's index, or none. */\n  readonly select: (index: null | number) => void\n}\n\ntype TokenFieldProps<T extends TokenFieldValue = TokenFieldValue> = Omit<\n  TextInputProps,\n  | 'accessibilityHint'\n  | 'accessibilityLabel'\n  | 'aria-disabled'\n  | 'aria-label'\n  | 'children'\n  | 'cursorColor'\n  | 'defaultValue'\n  | 'editable'\n  | 'maxLength'\n  | 'multiline'\n  | 'numberOfLines'\n  | 'onChange'\n  | 'onChangeText'\n  | 'placeholder'\n  | 'placeholderTextColor'\n  | 'readOnly'\n  | 'rows'\n  | 'selectionColor'\n  | 'style'\n  | 'underlineColorAndroid'\n  | 'value'\n> & {\n  /** The value the field opens with, when it keeps its own. */\n  readonly defaultValue?: T\n  /**\n   * A hint shown under the field. Replaced by `error` when there is one, so\n   * the 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 error colours, and the\n   * invalid state a screen reader reads all follow from it. The line under\n   * the field arrives with the message, so the field grows when this does,\n   * unless it is inside a `Form`, which keeps the line drawn.\n   */\n  readonly error?: string\n  /**\n   * Whether the label sits in the empty box and floats to the top once the\n   * field is focused or holds something. `false` keeps it small at the top in\n   * every state.\n   * @default true\n   */\n  readonly floatingLabel?: boolean\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<ComponentRef<typeof TextInput>>\n  /**\n   * Draws the field disabled: it takes no focus and no input, and its pills\n   * take no presses.\n   * @default false\n   */\n  readonly isDisabled?: boolean\n  /**\n   * Shows the value and takes focus, but takes no input, and its pills are\n   * neither selected nor removed.\n   * @default false\n   */\n  readonly isReadOnly?: boolean\n  /**\n   * What the field is for, and the name a screen reader reads for it.\n   * Required, since a field with no label is a box nobody can name.\n   */\n  readonly label: string\n  /**\n   * An icon at the start of the box, before the label and the value: the\n   * page's 24dp leading icon, in the muted role. The slot hands it that\n   * colour and size through `useIconStyle()`.\n   */\n  readonly leadingIcon?: ReactNode\n  /** Called with the new value as it is edited. */\n  readonly onChange?: (value: T) => void\n  readonly ref?: Ref<ComponentRef<typeof View>>\n  /**\n   * What each token holds. Given a segment, return what to draw inside its\n   * pill; without it the pill holds the segment's own text, which is what a\n   * screen reader reads either way.\n   */\n  readonly renderToken?: (segment: TokenSegment) => ReactNode\n  /** Positions and sizes the field as a whole. */\n  readonly style?: StyleProp<ViewStyle>\n  /**\n   * An icon at the end of the box, after the value: the page's 24dp trailing\n   * icon, in the muted role and the error role while the field has an\n   * error. The slot hands it that colour and size through `useIconStyle()`.\n   */\n  readonly trailingIcon?: ReactNode\n  /** The value, when the call site keeps it. Pass it with `onChange`. */\n  readonly value?: T\n  /**\n   * The filled box, or the outlined one, as the text fields page draws them.\n   * @default 'filled'\n   */\n  readonly variant?: FieldVariant\n}\n\n// How many characters' width the control keeps after the last pill, in its\n// own type's size.\nconst CONTROL_ROOM = 3\n\nconst styles = StyleSheet.create({\n  // Takes what the line has left after the pills, from nothing: a basis of\n  // its own would start a new line while the line still had room to type in.\n  control: {\n    flexBasis: 0,\n    flexGrow: 1,\n  },\n  // Text before the last pill gives way to the line it is on, and wraps\n  // within it, rather than running out of the box.\n  text: {\n    flexShrink: 1,\n  },\n})\n\n/**\n * Backspace in an empty control: removes the selected pill where there is\n * one, and selects the last otherwise. With no pill, `last` is -1, which no\n * token holds, so it selects nothing. The call site's own handler runs after.\n */\nfunction backspaceThen(\n  editor: Editor,\n  {\n    editable,\n    last,\n    selected,\n    trailing,\n  }: {\n    readonly editable: boolean\n    readonly last: number\n    readonly selected: null | number\n    readonly trailing: string\n  },\n  then: TextInputProps['onKeyPress'],\n): TextInputProps['onKeyPress'] {\n  return (event) => {\n    if (editable && event.nativeEvent.key === 'Backspace' && trailing === '') {\n      if (selected !== null) {\n        editor.remove(selected)\n      } else {\n        editor.select(last)\n      }\n    }\n    then?.(event)\n  }\n}\n\n// The field's own blur handling, then the call site's.\nfunction blurThen(\n  editor: Editor,\n  then: TextInputProps['onBlur'],\n): TextInputProps['onBlur'] {\n  return (event) => {\n    editor.select(null)\n    then?.(event)\n  }\n}\n\nfunction colorOf(color: string): TextStyle {\n  return { color }\n}\n\nfunction editorOf<T extends TokenFieldValue>(\n  state: TokenFieldState<T>,\n  setSelected: (index: null | number) => void,\n): Editor {\n  return {\n    edit: (text) => {\n      setSelected(null)\n      state.setValue(withTrailing(state.value, text))\n    },\n    remove: (index) => {\n      setSelected(null)\n      state.setValue(withoutToken(state.value, index))\n    },\n    select: setSelected,\n  }\n}\n\n// Whether the field holds anything, for the floating label: a token, or text\n// of any length.\nfunction isPopulated(segments: readonly TokenFieldSegment[]) {\n  return segments.some((segment) => segment.text.length > 0)\n}\n\n// The index of the last token among the segments, or -1 where there is none.\nfunction lastTokenOf(segments: readonly TokenFieldSegment[]) {\n  return segments.findLastIndex((segment) => segment.type === 'token')\n}\n\nfunction minWidthOf(minWidth: number): ViewStyle {\n  return { minWidth }\n}\n\n// What a screen reader is offered on a pill: an action that removes it.\nfunction removeActionsOf(label: string, onRemove: () => void) {\n  return {\n    accessibilityActions: [{ label, name: 'remove' }],\n    onAccessibilityAction: (event: AccessibilityActionEvent) => {\n      if (event.nativeEvent.actionName === 'remove') {\n        onRemove()\n      }\n    },\n  }\n}\n\nfunction removeOf(editor: Editor, index: number) {\n  return () => {\n    editor.remove(index)\n  }\n}\n\n// A press on a pill: selects it, or lets it go if it was selected, and moves\n// focus to the control, where Backspace removes a selected pill.\nfunction toggleOf(\n  editor: Editor,\n  index: number,\n  selected: boolean,\n  control: RefObject<ComponentRef<typeof TextInput> | null>,\n) {\n  return () => {\n    editor.select(selected ? null : index)\n    control.current?.focus()\n  }\n}\n\n/**\n * A labelled field whose value is text with tokens in it, drawn as pills: a\n * tag input, a mention field, a structured search box. Its value is React\n * Stately's `TokenFieldValue`, which the package re-exports: pass `value` with\n * `onChange` to control it, or `defaultValue` to let it keep its own.\n *\n * ```tsx\n * const [value, setValue] = useState(new TokenFieldValue([]))\n *\n * <TokenField label=\"Label\" onChange={setValue} value={value} />\n * ```\n *\n * What counts as a token is the call site's: subclass `TokenFieldValue` and\n * override `tokenize`, which is handed what is typed after the last pill.\n * `renderToken` decides what each pill holds; without it, the segment's own\n * text.\n *\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 */\nfunction TokenField<T extends TokenFieldValue = TokenFieldValue>({\n  defaultValue,\n  description,\n  error,\n  floatingLabel = true,\n  inputRef,\n  isDisabled = false,\n  isReadOnly = false,\n  label,\n  leadingIcon,\n  onBlur,\n  onChange,\n  onFocus,\n  onKeyPress,\n  ref,\n  renderToken,\n  style,\n  trailingIcon,\n  value,\n  variant = 'filled',\n  ...props\n}: TokenFieldProps<T>) {\n  const id = useId()\n  const theme = useTheme()\n  const { fontScale } = useWindowDimensions()\n  const control = useRef<ComponentRef<typeof TextInput>>(null)\n  const state = useTokenFieldState<T>({ defaultValue, onChange, value })\n  const [selected, setSelected] = useState<null | number>(null)\n  const editor = editorOf(state, setSelected)\n  const focus = useFieldFocus({ onBlur: blurThen(editor, onBlur), onFocus })\n  const locale = useLocaleOf(undefined)\n  const messages = useMessages()\n  const editable = !isDisabled && !isReadOnly\n  const { segments } = state.value\n  const last = lastTokenOf(segments)\n  const trailing = segments\n    .slice(last + 1)\n    .map((segment) => segment.text)\n    .join('')\n  // A selection the value has moved out from under, by an edit the call site\n  // made, selects nothing.\n  const chosen =\n    selected !== null && segments[selected]?.type === 'token' ? selected : null\n\n  useImperativeHandle<\n    ComponentRef<typeof TextInput> | null,\n    ComponentRef<typeof TextInput> | null\n  >(inputRef, () => control.current, [])\n\n  return (\n    <View ref={ref} style={style}>\n      <FieldBox\n        control={control}\n        floatingLabel={floatingLabel}\n        isDisabled={isDisabled}\n        isFocused={focus.focused}\n        isInvalid={error !== undefined}\n        isPopulated={isPopulated(segments)}\n        label={label}\n        leading={leadingIcon}\n        trailing={trailingIcon}\n        variant={variant}\n      >\n        <FieldWrap>\n          {segments.slice(0, last + 1).map((segment, index) => {\n            const key = `${String(index)}:${segment.text}`\n\n            if (segment.type === 'token') {\n              return (\n                <TokenPill\n                  control={control}\n                  editor={editor}\n                  index={index}\n                  isDisabled={isDisabled}\n                  isReadOnly={isReadOnly}\n                  isSelected={chosen === index}\n                  key={key}\n                  removeLabel={messages.remove}\n                  text={segment.text}\n                >\n                  {renderToken === undefined\n                    ? segment.text\n                    : renderToken(segment)}\n                </TokenPill>\n              )\n            }\n\n            const words = segment.text.trim()\n\n            return words === '' ? null : (\n              <TokenText isDisabled={isDisabled} key={key}>\n                {words}\n              </TokenText>\n            )\n          })}\n          <View\n            style={composeStyles<ViewStyle>(\n              styles.control,\n              minWidthOf(\n                CONTROL_ROOM * theme.typography.bodyLargeSize * fontScale,\n              ),\n            )}\n          >\n            <FieldInput\n              {...props}\n              {...focus.handlers}\n              aria-label={label}\n              described={describedBy(id, { description, error, locale })}\n              editable={editable}\n              onChangeText={editor.edit}\n              onKeyPress={backspaceThen(\n                editor,\n                { editable, last, selected: chosen, trailing },\n                onKeyPress,\n              )}\n              ref={control}\n              value={trailing}\n            />\n          </View>\n        </FieldWrap>\n      </FieldBox>\n      <FieldMessage description={description} error={error} id={id} />\n    </View>\n  )\n}\n\n/**\n * One token's pill: the chips page's input chip, unselected at rest and the\n * selected chip while it is selected, holding what `renderToken` draws, or\n * its text.\n */\nfunction TokenPill({\n  children,\n  control,\n  editor,\n  index,\n  isDisabled,\n  isReadOnly,\n  isSelected,\n  removeLabel,\n  text,\n}: {\n  readonly children: ReactNode\n  /** The field's control, which a press on the pill moves focus to. */\n  readonly control: RefObject<ComponentRef<typeof TextInput> | null>\n  readonly editor: Editor\n  /** The token's index among the value's segments. */\n  readonly index: number\n  readonly isDisabled: boolean\n  readonly isReadOnly: boolean\n  readonly isSelected: boolean\n  readonly removeLabel: string\n  readonly text: string\n}) {\n  const theme = useTheme()\n  // Until the pill is measured it takes no reach across, rather than one\n  // sized for a pill of no width.\n  const [width, setWidth] = useState(TARGET_SIZE)\n  const editable = !isDisabled && !isReadOnly\n  const paint = paintOf(theme, {\n    assist: false,\n    disabled: isDisabled,\n    elevated: false,\n    selected: isSelected,\n  })\n  const eased = useEasedColors(paint)\n  const feedback = usePressFeedback({\n    color: paint.layer,\n    corners: { borderRadius: theme.radii.sm },\n    disabled: !editable,\n  })\n\n  return (\n    <AnimatedPressable\n      {...(isReadOnly\n        ? undefined\n        : { role: 'button' as const, ...toggleState(isSelected) })}\n      {...(editable\n        ? removeActionsOf(removeLabel, removeOf(editor, index))\n        : undefined)}\n      {...feedback.handlers}\n      aria-label={text}\n      disabled={isDisabled}\n      hitSlop={targetOf(width, theme)}\n      onLayout={measureThen(setWidth, undefined)}\n      onPress={\n        editable ? toggleOf(editor, index, isSelected, control) : undefined\n      }\n      style={composeStyles<AnimatedStyle<ViewStyle>>(\n        stylesOf(theme).pill,\n        eased.container,\n        feedback.ring,\n      )}\n    >\n      {feedback.layer}\n      <ChipLabel color={eased.label}>{children}</ChipLabel>\n    </AnimatedPressable>\n  )\n}\n\n/**\n * Text before the last pill, in the value's type and colour, with the spaces\n * at its ends left to the row's gaps.\n */\nfunction TokenText({\n  children,\n  isDisabled,\n}: {\n  readonly children: string\n  readonly isDisabled: boolean\n}) {\n  const { colors, stateLayerOpacity } = useTheme()\n  const role = useTypeRole('bodyLarge')\n\n  return (\n    <NativeText\n      style={composeStyles<TextStyle>(\n        role,\n        colorOf(\n          isDisabled\n            ? withOpacity(colors.onSurface, stateLayerOpacity.disabledContent)\n            : colors.onSurface,\n        ),\n        styles.text,\n      )}\n    >\n      {children}\n    </NativeText>\n  )\n}\n\n// Takes the token at `index` out, joining the text either side of it.\nfunction withoutToken<T extends TokenFieldValue>(value: T, index: number): T {\n  return value.replaceRange(\n    { index, offset: 0 },\n    { index, offset: value.segments[index]?.text.length ?? 0 },\n    '',\n  )\n}\n\n// Puts `text` in place of everything after the last token, which hands it to\n// `tokenize`: with no token, the whole value, and with nothing after the last\n// token, the end of it.\nfunction withTrailing<T extends TokenFieldValue>(value: T, text: string): T {\n  const { segments } = value\n  const end = segments.length - 1\n\n  return value.replaceRange(\n    { index: lastTokenOf(segments) + 1, offset: 0 },\n    { index: end, offset: segments[end]?.text.length ?? 0 },\n    text,\n  )\n}\n\nexport { TokenField }\nexport type { TokenFieldProps, TokenSegment }\n"],"mappings":"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"}

package/dist/components/tooltip/index.d.ts

@@ -16,7 +16,8 @@ type TooltipProps = {
   readonly alignOffset?: number;
   /**
    * The button the tooltip describes, and nothing else: a `Button`,
-   * `IconButton` or `Fab`, or a `Popover` or `Menu` whose trigger is one.
+   * `IconButton`, `Fab` or `Chip`, or a `Popover` or `Menu` whose trigger is
+   * one.
    */
   readonly children?: ReactNode;
   /**