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

package/dist/components/combo-box/index.js

@@ -0,0 +1,616 @@
+import { useTheme } from "../../theme/scope.js";
+import { composeStyles, themedStyles } from "../../theme/styles.js";
+import { hitSlop, usePressFeedback } from "../../press/index.js";
+import { containsIn } from "../../autocomplete/index.js";
+import { listFor } from "../../i18n/index.js";
+import { useLocaleOf, useMessages } from "../../i18n/provider.js";
+import { useFieldValidation } from "../../form/index.js";
+import { DismissLayer, PANEL_ORIGINS, useBackToClose, useFocusOnPlaced, usePanelMotion, useReturnFocus } from "../../overlay/panel.js";
+import { FieldChevron } from "../../field/chevron.js";
+import { FieldBox, FieldInput, FieldMessage, describedBy, useFieldFocus } from "../../field/index.js";
+import { Overlay } from "../../overlay/host.js";
+import { useAnchoredPlacement } from "../../overlay/anchored.js";
+import { CollectionView, ResultsStatus, focusKeyOf, rowCountOf } from "../../collection/index.js";
+import { c } from "react/compiler-runtime";
+import { Platform, Pressable, StyleSheet, View } from "react-native";
+import Animated from "react-native-reanimated";
+import { useId, useImperativeHandle, useRef, useState } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+import { useComboBoxState } from "react-stately/useComboBoxState";
+//#region src/components/combo-box/index.tsx
+const TOGGLE_SIZE = 24;
+const TOGGLE_SLOP = hitSlop(TOGGLE_SIZE, TOGGLE_SIZE);
+const SHRINKS = { flexGrow: 0 };
+const stylesOf = themedStyles(({ colors, radii, shadows }) => StyleSheet.create({
+	list: {
+		backgroundColor: colors.surfaceContainerLow,
+		borderRadius: radii.xs,
+		boxShadow: shadows.elevation2,
+		overflow: "hidden"
+	},
+	toggle: {
+		alignItems: "center",
+		borderRadius: radii.circle,
+		height: TOGGLE_SIZE,
+		justifyContent: "center",
+		width: TOGGLE_SIZE
+	}
+}));
+/**
+* A labelled text field that filters a list of options as it is typed. Its
+* value is React Stately's: pass `value` with `onChange` to hold which
+* option is chosen, `inputValue` with `onInputChange` to hold the text, or
+* the `default` forms of either to let it keep its own. The value is an
+* option's `id`, so give every option one; with `selectionMode="multiple"`
+* it is a list of them.
+*
+* ```tsx
+* <ComboBox
+*   label="Label"
+*   options={[
+*     <ListBox.Item id="first" key="first">First item</ListBox.Item>,
+*     <ListBox.Item id="second" key="second">Second item</ListBox.Item>,
+*   ]}
+* />
+* ```
+*
+* The box, the label, the input, the supporting line and the error are the
+* field chrome every field here draws; the list is a ListBox's, on the
+* surface every anchored panel here draws. `style` and `ref` are the field
+* as a whole, and `inputRef` and `testID` its `TextInput`.
+*/
+function ComboBox(t0) {
+	const $ = c(92);
+	const { allowsCustomValue: t1, allowsEmptyCollection, defaultFilter, defaultInputValue, defaultItems, defaultValue, description, disabledKeys, error, floatingLabel: t2, formValue: t3, inputRef, inputValue, isDisabled: t4, isReadOnly: t5, isRequired: t6, items, label, leadingIcon, menuTrigger, name, onChange, onInputChange, onOpenChange, options, ref, selectionMode, style, testID, validate, value, variant: t7 } = t0;
+	const allowsCustomValue = t1 === void 0 ? false : t1;
+	const floatingLabel = t2 === void 0 ? true : t2;
+	const formValue = t3 === void 0 ? "key" : t3;
+	const isDisabled = t4 === void 0 ? false : t4;
+	const isReadOnly = t5 === void 0 ? false : t5;
+	const isRequired = t6 === void 0 ? false : t6;
+	const variant = t7 === void 0 ? "filled" : t7;
+	const id = useId();
+	const box = useRef(null);
+	const control = useRef(null);
+	const [openedBy, setOpenedBy] = useState();
+	const messages = useMessages();
+	const locale = useLocaleOf(void 0);
+	const state = useComboBoxState({
+		allowsCustomValue,
+		allowsEmptyCollection,
+		children: options,
+		defaultFilter: defaultFilter ?? containsIn(locale),
+		defaultInputValue,
+		defaultItems,
+		defaultValue,
+		disabledKeys,
+		inputValue,
+		isDisabled,
+		isReadOnly,
+		items,
+		menuTrigger,
+		onChange: (changed) => {
+			validation.onEdit();
+			validation.onBlur();
+			onChange?.(changed);
+		},
+		onInputChange,
+		onOpenChange: (isOpen, trigger) => {
+			if (isOpen) setOpenedBy(trigger);
+			if (isOpen && trigger === "manual") control.current?.focus();
+			onOpenChange?.(isOpen, trigger);
+		},
+		selectionMode,
+		shouldCloseOnBlur: Platform.OS !== "web",
+		value
+	});
+	let chosen;
+	let several;
+	let t10;
+	let t11;
+	let t12;
+	let t13;
+	let t14;
+	let t15;
+	let t16;
+	let t8;
+	let t9;
+	if ($[0] !== allowsCustomValue || $[1] !== error || $[2] !== formValue || $[3] !== isDisabled || $[4] !== isReadOnly || $[5] !== isRequired || $[6] !== name || $[7] !== state.inputValue || $[8] !== state.selectionManager.selectionMode || $[9] !== state.value) {
+		chosen = keysOf(state.value);
+		several = state.selectionManager.selectionMode === "multiple";
+		const submitsText = !several && (allowsCustomValue || formValue === "text");
+		t16 = useFieldValidation;
+		t8 = control;
+		t9 = error;
+		t10 = isDisabled;
+		t11 = submitsText ? state.inputValue === "" : chosen.length === 0;
+		t12 = isReadOnly;
+		t13 = isRequired;
+		t14 = name;
+		t15 = several ? chosen.map(String) : submitsText ? state.inputValue : String(chosen[0] ?? "");
+		$[0] = allowsCustomValue;
+		$[1] = error;
+		$[2] = formValue;
+		$[3] = isDisabled;
+		$[4] = isReadOnly;
+		$[5] = isRequired;
+		$[6] = name;
+		$[7] = state.inputValue;
+		$[8] = state.selectionManager.selectionMode;
+		$[9] = state.value;
+		$[10] = chosen;
+		$[11] = several;
+		$[12] = t10;
+		$[13] = t11;
+		$[14] = t12;
+		$[15] = t13;
+		$[16] = t14;
+		$[17] = t15;
+		$[18] = t16;
+		$[19] = t8;
+		$[20] = t9;
+	} else {
+		chosen = $[10];
+		several = $[11];
+		t10 = $[12];
+		t11 = $[13];
+		t12 = $[14];
+		t13 = $[15];
+		t14 = $[16];
+		t15 = $[17];
+		t16 = $[18];
+		t8 = $[19];
+		t9 = $[20];
+	}
+	let t17;
+	if ($[21] !== state) {
+		t17 = validationValueOf(state);
+		$[21] = state;
+		$[22] = t17;
+	} else t17 = $[22];
+	let t18;
+	if ($[23] !== t10 || $[24] !== t11 || $[25] !== t12 || $[26] !== t13 || $[27] !== t14 || $[28] !== t15 || $[29] !== t17 || $[30] !== t8 || $[31] !== t9 || $[32] !== validate) {
+		t18 = {
+			control: t8,
+			error: t9,
+			isDisabled: t10,
+			isEmpty: t11,
+			isReadOnly: t12,
+			isRequired: t13,
+			name: t14,
+			submitted: t15,
+			validate,
+			value: t17
+		};
+		$[23] = t10;
+		$[24] = t11;
+		$[25] = t12;
+		$[26] = t13;
+		$[27] = t14;
+		$[28] = t15;
+		$[29] = t17;
+		$[30] = t8;
+		$[31] = t9;
+		$[32] = validate;
+		$[33] = t18;
+	} else t18 = $[33];
+	const validation = t16(t18);
+	let t19;
+	if ($[34] !== state) {
+		t19 = () => {
+			state.setFocused(true);
+		};
+		$[34] = state;
+		$[35] = t19;
+	} else t19 = $[35];
+	const focus = useFieldFocus({
+		onBlur: () => {
+			state.setFocused(false);
+			validation.onBlur();
+		},
+		onFocus: t19
+	});
+	const shownError = validation.error;
+	let t20;
+	let t21;
+	if ($[36] === Symbol.for("react.memo_cache_sentinel")) {
+		t20 = () => control.current;
+		t21 = [];
+		$[36] = t20;
+		$[37] = t21;
+	} else {
+		t20 = $[36];
+		t21 = $[37];
+	}
+	useImperativeHandle(inputRef, t20, t21);
+	const T0 = View;
+	const T1 = FieldBox;
+	const t22 = focus.focused || state.isOpen;
+	const t23 = shownError !== void 0;
+	const t24 = state.inputValue !== "" || several && chosen.length > 0;
+	const t25 = isDisabled || isReadOnly;
+	const t26 = `${messages.showSuggestions} ${label}`;
+	let t27;
+	if ($[38] !== state) {
+		t27 = () => {
+			state.toggle(null, "manual");
+		};
+		$[38] = state;
+		$[39] = t27;
+	} else t27 = $[39];
+	let t28;
+	if ($[40] !== state || $[41] !== t25 || $[42] !== t26 || $[43] !== t27) {
+		t28 = toggleFor(state, {
+			isDisabled: t25,
+			label: t26,
+			onPress: t27
+		});
+		$[40] = state;
+		$[41] = t25;
+		$[42] = t26;
+		$[43] = t27;
+		$[44] = t28;
+	} else t28 = $[44];
+	const T2 = FieldInput;
+	const t29 = focus.handlers;
+	let t30;
+	if ($[45] !== locale || $[46] !== several || $[47] !== state.selectedItems) {
+		t30 = several ? listFor(state.selectedItems.map(_temp), locale) : void 0;
+		$[45] = locale;
+		$[46] = several;
+		$[47] = state.selectedItems;
+		$[48] = t30;
+	} else t30 = $[48];
+	const t31 = describedBy(id, {
+		description,
+		error: shownError
+	});
+	const t32 = !isDisabled && !isReadOnly;
+	const t33 = editOf(state, validation.onEdit);
+	let t34;
+	if ($[49] !== T2 || $[50] !== focus.handlers || $[51] !== label || $[52] !== state.inputValue || $[53] !== t30 || $[54] !== t31 || $[55] !== t32 || $[56] !== t33 || $[57] !== testID) {
+		t34 = /* @__PURE__ */ jsx(T2, {
+			...t29,
+			"aria-label": label,
+			chosen: t30,
+			described: t31,
+			editable: t32,
+			onChangeText: t33,
+			ref: control,
+			testID,
+			value: state.inputValue
+		});
+		$[49] = T2;
+		$[50] = focus.handlers;
+		$[51] = label;
+		$[52] = state.inputValue;
+		$[53] = t30;
+		$[54] = t31;
+		$[55] = t32;
+		$[56] = t33;
+		$[57] = testID;
+		$[58] = t34;
+	} else t34 = $[58];
+	let t35;
+	if ($[59] !== T1 || $[60] !== floatingLabel || $[61] !== isDisabled || $[62] !== isRequired || $[63] !== label || $[64] !== leadingIcon || $[65] !== t22 || $[66] !== t23 || $[67] !== t24 || $[68] !== t28 || $[69] !== t34 || $[70] !== variant) {
+		t35 = /* @__PURE__ */ jsx(T1, {
+			control,
+			floatingLabel,
+			isDisabled,
+			isFocused: t22,
+			isInvalid: t23,
+			isPopulated: t24,
+			isRequired,
+			label,
+			leading: leadingIcon,
+			ref: box,
+			trailing: t28,
+			variant,
+			children: t34
+		});
+		$[59] = T1;
+		$[60] = floatingLabel;
+		$[61] = isDisabled;
+		$[62] = isRequired;
+		$[63] = label;
+		$[64] = leadingIcon;
+		$[65] = t22;
+		$[66] = t23;
+		$[67] = t24;
+		$[68] = t28;
+		$[69] = t34;
+		$[70] = variant;
+		$[71] = t35;
+	} else t35 = $[71];
+	let t36;
+	if ($[72] !== description || $[73] !== id || $[74] !== shownError) {
+		t36 = /* @__PURE__ */ jsx(FieldMessage, {
+			description,
+			error: shownError,
+			id
+		});
+		$[72] = description;
+		$[73] = id;
+		$[74] = shownError;
+		$[75] = t36;
+	} else t36 = $[75];
+	let t37;
+	if ($[76] !== state) {
+		t37 = state.isOpen ? rowCountOf(state) : null;
+		$[76] = state;
+		$[77] = t37;
+	} else t37 = $[77];
+	let t38;
+	if ($[78] !== t37) {
+		t38 = /* @__PURE__ */ jsx(ResultsStatus, { count: t37 });
+		$[78] = t37;
+		$[79] = t38;
+	} else t38 = $[79];
+	let t39;
+	if ($[80] !== label || $[81] !== openedBy || $[82] !== state) {
+		t39 = /* @__PURE__ */ jsx(ComboBoxPopup, {
+			anchor: box,
+			control,
+			label,
+			openedBy,
+			state
+		});
+		$[80] = label;
+		$[81] = openedBy;
+		$[82] = state;
+		$[83] = t39;
+	} else t39 = $[83];
+	let t40;
+	if ($[84] !== T0 || $[85] !== ref || $[86] !== style || $[87] !== t35 || $[88] !== t36 || $[89] !== t38 || $[90] !== t39) {
+		t40 = /* @__PURE__ */ jsxs(T0, {
+			ref,
+			style,
+			children: [
+				t35,
+				t36,
+				t38,
+				t39
+			]
+		});
+		$[84] = T0;
+		$[85] = ref;
+		$[86] = style;
+		$[87] = t35;
+		$[88] = t36;
+		$[89] = t38;
+		$[90] = t39;
+		$[91] = t40;
+	} else t40 = $[91];
+	return t40;
+}
+/**
+* The list, drawn in the overlay host above the screen and placed under the
+* box: as wide as the box, flipped above it at the edge of the window, over
+* a layer that closes it on a press anywhere but the list and the box.
+*/
+function _temp(item) {
+	return item.textValue;
+}
+function ComboBoxList(t0) {
+	const $ = c(26);
+	const { anchor, control, isOpen, label, openedBy, setPresent, state } = t0;
+	const styles = stylesOf(useTheme());
+	const messages = useMessages();
+	let t1;
+	if ($[0] !== anchor) {
+		t1 = {
+			align: "start",
+			anchor
+		};
+		$[0] = anchor;
+		$[1] = t1;
+	} else t1 = $[1];
+	const placement = useAnchoredPlacement(t1);
+	const motion = usePanelMotion(isOpen, placement.placed, setPresent);
+	const [panel, setPanel] = useState(null);
+	const [option, setOption] = useState(null);
+	const sendsReader = openedBy === "manual";
+	const close = state.close;
+	useBackToClose(close, isOpen);
+	useFocusOnPlaced(sendsReader && isOpen && placement.placed, option ?? panel);
+	let t2;
+	if ($[2] !== close || $[3] !== control || $[4] !== isOpen || $[5] !== placement.anchorFrame) {
+		t2 = isOpen ? /* @__PURE__ */ jsx(DismissLayer, {
+			hole: placement.anchorFrame,
+			onPress: dismissOf(control, close)
+		}) : null;
+		$[2] = close;
+		$[3] = control;
+		$[4] = isOpen;
+		$[5] = placement.anchorFrame;
+		$[6] = t2;
+	} else t2 = $[6];
+	const t3 = Animated;
+	const t4 = placement.onLayout;
+	const t5 = composeStyles(styles.list, { width: placement.anchorWidth }, placement.style, { transformOrigin: PANEL_ORIGINS[placement.side] }, motion);
+	const t6 = `${messages.suggestions} ${label}`;
+	let t7;
+	if ($[7] !== sendsReader || $[8] !== state) {
+		t7 = sendsReader ? focusKeyOf(state) : null;
+		$[7] = sendsReader;
+		$[8] = state;
+		$[9] = t7;
+	} else t7 = $[9];
+	let t8;
+	if ($[10] !== placement.placed || $[11] !== setOption || $[12] !== state || $[13] !== t6 || $[14] !== t7) {
+		t8 = /* @__PURE__ */ jsx(CollectionView, {
+			"aria-label": t6,
+			focusKey: t7,
+			keyboardShouldPersistTaps: "handled",
+			kind: "listbox",
+			onFocusTarget: setOption,
+			revealFocus: placement.placed,
+			state,
+			style: SHRINKS
+		});
+		$[10] = placement.placed;
+		$[11] = setOption;
+		$[12] = state;
+		$[13] = t6;
+		$[14] = t7;
+		$[15] = t8;
+	} else t8 = $[15];
+	let t9;
+	if ($[16] !== close || $[17] !== placement.onLayout || $[18] !== setPanel || $[19] !== t3.View || $[20] !== t5 || $[21] !== t8) {
+		t9 = /* @__PURE__ */ jsx(t3.View, {
+			onAccessibilityEscape: close,
+			onLayout: t4,
+			ref: setPanel,
+			style: t5,
+			children: t8
+		});
+		$[16] = close;
+		$[17] = placement.onLayout;
+		$[18] = setPanel;
+		$[19] = t3.View;
+		$[20] = t5;
+		$[21] = t8;
+		$[22] = t9;
+	} else t9 = $[22];
+	let t10;
+	if ($[23] !== t2 || $[24] !== t9) {
+		t10 = /* @__PURE__ */ jsxs(Fragment$1, { children: [t2, t9] });
+		$[23] = t2;
+		$[24] = t9;
+		$[25] = t10;
+	} else t10 = $[25];
+	return t10;
+}
+/**
+* The list while it is open and while its exit runs: mounted the moment the
+* field opens it, and kept until the list has faded out. A screen reader the
+* chevron sent into the list goes back to the input once it has gone.
+*/
+function ComboBoxPopup(t0) {
+	const $ = c(6);
+	const { anchor, control, label, openedBy, state } = t0;
+	const [present, setPresent] = useState(state.isOpen);
+	if (state.isOpen && !present) setPresent(true);
+	useReturnFocus(present, openedBy !== "manual", control);
+	if (!present) return null;
+	let t1;
+	if ($[0] !== anchor || $[1] !== control || $[2] !== label || $[3] !== openedBy || $[4] !== state) {
+		t1 = /* @__PURE__ */ jsx(Overlay, { children: /* @__PURE__ */ jsx(ComboBoxList, {
+			anchor,
+			control,
+			isOpen: state.isOpen,
+			label,
+			openedBy,
+			setPresent,
+			state
+		}) });
+		$[0] = anchor;
+		$[1] = control;
+		$[2] = label;
+		$[3] = openedBy;
+		$[4] = state;
+		$[5] = t1;
+	} else t1 = $[5];
+	return t1;
+}
+function copyOf(value) {
+	return typeof value === "object" && value !== null ? [...value] : value;
+}
+function dismissOf(control, close) {
+	return () => {
+		control.current?.blur();
+		close();
+	};
+}
+function editOf(state, onEdit) {
+	return (text) => {
+		state.setInputValue(text);
+		onEdit();
+	};
+}
+function keysOf(value) {
+	if (value === null) return [];
+	return typeof value === "object" ? value : [value];
+}
+/**
+* The chevron as the button opening the list, named in React Aria's words
+* before the field's label, saying whether the list is open, and drawing the
+* ring a keyboard's focus draws. It takes its colour from the box's trailing
+* slot, so it follows the field into its error and disabled states.
+*/
+function Toggle(t0) {
+	const $ = c(12);
+	const { isDisabled, isOpen, label, onPress } = t0;
+	const theme = useTheme();
+	const styles = stylesOf(theme);
+	const feedback = usePressFeedback({
+		color: theme.colors.onSurfaceVariant,
+		corners: styles.toggle,
+		disabled: isDisabled,
+		disableRipple: true
+	});
+	const T0 = Pressable;
+	const t1 = feedback.handlers;
+	const t2 = TOGGLE_SLOP;
+	const t3 = "button";
+	const t4 = composeStyles(styles.toggle, feedback.ring);
+	let t5;
+	if ($[0] !== isOpen) {
+		t5 = /* @__PURE__ */ jsx(FieldChevron, { isOpen });
+		$[0] = isOpen;
+		$[1] = t5;
+	} else t5 = $[1];
+	let t6;
+	if ($[2] !== T0 || $[3] !== feedback.handlers || $[4] !== isDisabled || $[5] !== isOpen || $[6] !== label || $[7] !== onPress || $[8] !== t2 || $[9] !== t4 || $[10] !== t5) {
+		t6 = /* @__PURE__ */ jsx(T0, {
+			...t1,
+			"aria-expanded": isOpen,
+			"aria-label": label,
+			disabled: isDisabled,
+			hitSlop: t2,
+			onPress,
+			role: t3,
+			style: t4,
+			children: t5
+		});
+		$[2] = T0;
+		$[3] = feedback.handlers;
+		$[4] = isDisabled;
+		$[5] = isOpen;
+		$[6] = label;
+		$[7] = onPress;
+		$[8] = t2;
+		$[9] = t4;
+		$[10] = t5;
+		$[11] = t6;
+	} else t6 = $[11];
+	return t6;
+}
+/**
+* The chevron button for the box's trailing slot, which opens the list with
+* every option in it, whatever has been typed, as web's does, and closes it
+* again. A call rather than JSX written at the prop, which is what
+* react-perf's jsx-no-jsx-as-prop is after.
+*/
+function toggleFor(state, props) {
+	return /* @__PURE__ */ jsx(Toggle, {
+		...props,
+		isOpen: state.isOpen
+	});
+}
+/**
+* What `validate` is handed, as React Aria's ComboBox hands it on web: the
+* text in the field and what is chosen, with the first chosen option's `id`
+* under the older name.
+*/
+function validationValueOf(state) {
+	return {
+		inputValue: state.inputValue,
+		selectedKey: state.selectedKey,
+		value: copyOf(state.value)
+	};
+}
+//#endregion
+export { ComboBox };
+
+//# sourceMappingURL=index.js.map