@kanso-labs/kanso-ui 0.40.2 → 0.40.4

package/dist/field/index.js

@@ -1,8 +1,8 @@
 import { props } from "../node_modules/@stylexjs/stylex/lib/es/stylex.js";
 import { mergeStatefulStyles, mergeStyles } from "../styles/merge.js";
 import { useMessages } from "../i18n/index.js";
-import { useInsideForm } from "./root.js";
 import { fieldChromeStyles, groupStyles } from "./styles.js";
+import { useInsideForm } from "./root.js";
 import { c } from "react/compiler-runtime";
 import { createContext, useContext } from "react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
@@ -35,9 +35,10 @@ const BOX_CONTROLS = {
 	}
 };
 const BoxContext = createContext(OUTSIDE_BOX);
-function boxContent(label, children, floatingLabel, isPopulated, isRequired, leading, multiline, trailing, trigger, variant) {
+function boxContent(label, children, floatingLabel, isFocused, isPopulated, isRequired, leading, multiline, trailing, trigger, variant) {
 	return (state) => /* @__PURE__ */ jsx(BoxContent, {
 		floatingLabel,
+		isFocused,
 		isPopulated,
 		isRequired,
 		label,
@@ -58,29 +59,30 @@ function boxContent(label, children, floatingLabel, isPopulated, isRequired, lea
 * for them. See the outlined variant's note above.
 */
 function BoxContent(t0) {
-	const $ = c(42);
-	const { children, floatingLabel, isPopulated, isRequired, label, leading, multiline, state, trailing, trigger, variant } = t0;
+	const $ = c(45);
+	const { children, floatingLabel, isFocused, isPopulated, isRequired, label, leading, multiline, state, trailing, trigger, variant } = t0;
 	const read = useFieldPopulated();
 	const populated = isPopulated ?? read;
 	const outlined = variant === "outlined";
-	const floated = !floatingLabel || state.isFocusWithin || populated;
+	const focused = state.isFocusWithin || isFocused;
+	const floated = !floatingLabel || focused || populated;
 	const t1 = BOX_CONTROLS[variant][floatingLabel ? "floating" : "fixed"];
 	let t2;
-	if ($[0] !== floated || $[1] !== isRequired || $[2] !== label || $[3] !== leading || $[4] !== outlined || $[5] !== state.isFocusWithin || $[6] !== trailing) {
+	if ($[0] !== floated || $[1] !== focused || $[2] !== isRequired || $[3] !== label || $[4] !== leading || $[5] !== outlined || $[6] !== trailing) {
 		t2 = outlined ? /* @__PURE__ */ jsx("fieldset", {
 			"aria-hidden": "true",
-			...props(fieldChromeStyles.outline, leading !== void 0 && fieldChromeStyles.outlineLeading, trailing !== void 0 && fieldChromeStyles.outlineTrailing, state.isFocusWithin && fieldChromeStyles.outlineFocused),
+			...props(fieldChromeStyles.outline, leading !== void 0 && fieldChromeStyles.outlineLeading, trailing !== void 0 && fieldChromeStyles.outlineTrailing, focused && fieldChromeStyles.outlineFocused),
 			children: /* @__PURE__ */ jsx("legend", {
 				...props(fieldChromeStyles.outlineNotch, floated && fieldChromeStyles.outlineNotchOpen),
 				children: floated ? /* @__PURE__ */ jsxs(Fragment$1, { children: [label, isRequired ? REQUIRED_MARK : null] }) : null
 			})
 		}) : null;
 		$[0] = floated;
-		$[1] = isRequired;
-		$[2] = label;
-		$[3] = leading;
-		$[4] = outlined;
-		$[5] = state.isFocusWithin;
+		$[1] = focused;
+		$[2] = isRequired;
+		$[3] = label;
+		$[4] = leading;
+		$[5] = outlined;
 		$[6] = trailing;
 		$[7] = t2;
 	} else t2 = $[7];
@@ -104,76 +106,83 @@ function BoxContent(t0) {
 		$[15] = t4;
 	} else t4 = $[15];
 	let t5;
-	if ($[16] !== floated || $[17] !== floatingLabel || $[18] !== outlined) {
-		t5 = props(fieldChromeStyles.boxLabel, floatingLabel && floated && fieldChromeStyles.boxLabelFloated, outlined && fieldChromeStyles.boxLabelOutlined, outlined && floated && fieldChromeStyles.boxLabelOutlinedFloated);
-		$[16] = floated;
-		$[17] = floatingLabel;
-		$[18] = outlined;
-		$[19] = t5;
-	} else t5 = $[19];
+	if ($[16] !== focused || $[17] !== state) {
+		t5 = withFocus(state, focused);
+		$[16] = focused;
+		$[17] = state;
+		$[18] = t5;
+	} else t5 = $[18];
 	let t6;
-	if ($[20] !== isRequired || $[21] !== label || $[22] !== state || $[23] !== t5) {
-		t6 = /* @__PURE__ */ jsx(FieldLabel, {
+	if ($[19] !== floated || $[20] !== floatingLabel || $[21] !== outlined) {
+		t6 = props(fieldChromeStyles.boxLabel, floatingLabel && floated && fieldChromeStyles.boxLabelFloated, outlined && fieldChromeStyles.boxLabelOutlined, outlined && floated && fieldChromeStyles.boxLabelOutlinedFloated);
+		$[19] = floated;
+		$[20] = floatingLabel;
+		$[21] = outlined;
+		$[22] = t6;
+	} else t6 = $[22];
+	let t7;
+	if ($[23] !== isRequired || $[24] !== label || $[25] !== t5 || $[26] !== t6) {
+		t7 = /* @__PURE__ */ jsx(FieldLabel, {
 			isRequired,
-			state,
-			...t5,
+			state: t5,
+			...t6,
 			children: label
 		});
-		$[20] = isRequired;
-		$[21] = label;
-		$[22] = state;
-		$[23] = t5;
-		$[24] = t6;
-	} else t6 = $[24];
-	let t7;
-	if ($[25] !== children || $[26] !== t4 || $[27] !== t6) {
-		t7 = /* @__PURE__ */ jsxs("div", {
+		$[23] = isRequired;
+		$[24] = label;
+		$[25] = t5;
+		$[26] = t6;
+		$[27] = t7;
+	} else t7 = $[27];
+	let t8;
+	if ($[28] !== children || $[29] !== t4 || $[30] !== t7) {
+		t8 = /* @__PURE__ */ jsxs("div", {
 			...t4,
-			children: [t6, children]
+			children: [t7, children]
 		});
-		$[25] = children;
-		$[26] = t4;
-		$[27] = t6;
-		$[28] = t7;
-	} else t7 = $[28];
-	let t8;
-	if ($[29] !== multiline || $[30] !== outlined || $[31] !== state.isDisabled || $[32] !== state.isInvalid || $[33] !== trailing) {
-		t8 = trailing === void 0 ? null : /* @__PURE__ */ jsx("span", {
+		$[28] = children;
+		$[29] = t4;
+		$[30] = t7;
+		$[31] = t8;
+	} else t8 = $[31];
+	let t9;
+	if ($[32] !== multiline || $[33] !== outlined || $[34] !== state.isDisabled || $[35] !== state.isInvalid || $[36] !== trailing) {
+		t9 = trailing === void 0 ? null : /* @__PURE__ */ jsx("span", {
 			...props(fieldChromeStyles.icon, multiline && fieldChromeStyles.iconMultiline, outlined && fieldChromeStyles.iconOutlined, state.isInvalid && fieldChromeStyles.iconError, state.isDisabled && fieldChromeStyles.iconDisabled),
 			children: trailing
 		});
-		$[29] = multiline;
-		$[30] = outlined;
-		$[31] = state.isDisabled;
-		$[32] = state.isInvalid;
-		$[33] = trailing;
-		$[34] = t8;
-	} else t8 = $[34];
-	let t9;
-	if ($[35] !== t1 || $[36] !== t2 || $[37] !== t3 || $[38] !== t7 || $[39] !== t8 || $[40] !== trigger) {
-		t9 = /* @__PURE__ */ jsxs(BoxContext, {
+		$[32] = multiline;
+		$[33] = outlined;
+		$[34] = state.isDisabled;
+		$[35] = state.isInvalid;
+		$[36] = trailing;
+		$[37] = t9;
+	} else t9 = $[37];
+	let t10;
+	if ($[38] !== t1 || $[39] !== t2 || $[40] !== t3 || $[41] !== t8 || $[42] !== t9 || $[43] !== trigger) {
+		t10 = /* @__PURE__ */ jsxs(BoxContext, {
 			value: t1,
 			children: [
 				t2,
 				trigger,
 				t3,
-				t7,
-				t8
+				t8,
+				t9
 			]
 		});
-		$[35] = t1;
-		$[36] = t2;
-		$[37] = t3;
-		$[38] = t7;
-		$[39] = t8;
-		$[40] = trigger;
-		$[41] = t9;
-	} else t9 = $[41];
-	return t9;
+		$[38] = t1;
+		$[39] = t2;
+		$[40] = t3;
+		$[41] = t8;
+		$[42] = t9;
+		$[43] = trigger;
+		$[44] = t10;
+	} else t10 = $[44];
+	return t10;
 }
-function boxStyles(floatingLabel, multiline, leading, trailing, variant) {
+function boxStyles(floatingLabel, isFocused, multiline, leading, trailing, variant) {
 	const outlined = variant === "outlined";
-	return (state) => props(fieldChromeStyles.box, floatingLabel ? fieldChromeStyles.boxFloating : fieldChromeStyles.boxFixed, multiline && fieldChromeStyles.boxMultiline, leading && fieldChromeStyles.boxLeading, trailing && fieldChromeStyles.boxTrailing, outlined && fieldChromeStyles.boxOutlined, outlined && floatingLabel && fieldChromeStyles.boxOutlinedFloating, outlined && multiline && fieldChromeStyles.boxOutlinedMultiline, state.isInvalid && (outlined ? fieldChromeStyles.boxOutlinedError : fieldChromeStyles.boxError), outlined && state.isHovered && (state.isInvalid ? fieldChromeStyles.boxOutlinedErrorHovered : fieldChromeStyles.boxOutlinedHovered), state.isDisabled && (outlined ? fieldChromeStyles.boxOutlinedDisabled : fieldChromeStyles.boxDisabled));
+	return (state) => props(fieldChromeStyles.box, floatingLabel ? fieldChromeStyles.boxFloating : fieldChromeStyles.boxFixed, multiline && fieldChromeStyles.boxMultiline, leading && fieldChromeStyles.boxLeading, trailing && fieldChromeStyles.boxTrailing, outlined && fieldChromeStyles.boxOutlined, outlined && floatingLabel && fieldChromeStyles.boxOutlinedFloating, outlined && multiline && fieldChromeStyles.boxOutlinedMultiline, state.isInvalid && (outlined ? fieldChromeStyles.boxOutlinedError : fieldChromeStyles.boxError), outlined && state.isHovered && (state.isInvalid ? fieldChromeStyles.boxOutlinedErrorHovered : fieldChromeStyles.boxOutlinedHovered), isFocused && focusedStyle(outlined, state.isInvalid), state.isDisabled && (outlined ? fieldChromeStyles.boxOutlinedDisabled : fieldChromeStyles.boxDisabled));
 }
 /**
 * The box a control sits in, filled or outlined, with its label. React
@@ -184,10 +193,11 @@ function boxStyles(floatingLabel, multiline, leading, trailing, variant) {
 * on a button rather than an input — passes the two states itself.
 */
 function FieldBox(t0) {
-	const $ = c(30);
+	const $ = c(34);
 	let T0;
 	let children;
 	let floatingLabel;
+	let isFocused;
 	let isPopulated;
 	let isRequired;
 	let label;
@@ -195,83 +205,94 @@ function FieldBox(t0) {
 	let multiline;
 	let t1;
 	let t2;
+	let t3;
 	let trailing;
 	let trigger;
 	let variant;
 	if ($[0] !== t0) {
-		const { children: t3, floatingLabel: t4, isPopulated: t5, isRequired: t6, label: t7, leading: t8, multiline: t9, trailing: t10, trigger: t11, variant: t12, ...props } = t0;
-		children = t3;
-		isPopulated = t5;
-		label = t7;
-		leading = t8;
-		trailing = t10;
-		trigger = t11;
-		floatingLabel = t4 === void 0 ? true : t4;
-		isRequired = t6 === void 0 ? false : t6;
-		multiline = t9 === void 0 ? false : t9;
-		variant = t12 === void 0 ? "filled" : t12;
+		const { children: t4, floatingLabel: t5, isFocused: t6, isPopulated: t7, isRequired: t8, label: t9, leading: t10, multiline: t11, trailing: t12, trigger: t13, variant: t14, ...props } = t0;
+		children = t4;
+		isPopulated = t7;
+		label = t9;
+		leading = t10;
+		trailing = t12;
+		trigger = t13;
+		floatingLabel = t5 === void 0 ? true : t5;
+		isFocused = t6 === void 0 ? false : t6;
+		isRequired = t8 === void 0 ? false : t8;
+		multiline = t11 === void 0 ? false : t11;
+		variant = t14 === void 0 ? "filled" : t14;
 		T0 = Group;
 		t1 = props;
-		t2 = mergeStatefulStyles(boxStyles(floatingLabel, multiline, leading !== void 0, trailing !== void 0, variant), props);
+		t2 = trigger === void 0 ? focusesControl(props.onPointerDown) : props.onPointerDown;
+		t3 = mergeStatefulStyles(boxStyles(floatingLabel, isFocused, multiline, leading !== void 0, trailing !== void 0, variant), props);
 		$[0] = t0;
 		$[1] = T0;
 		$[2] = children;
 		$[3] = floatingLabel;
-		$[4] = isPopulated;
-		$[5] = isRequired;
-		$[6] = label;
-		$[7] = leading;
-		$[8] = multiline;
-		$[9] = t1;
-		$[10] = t2;
-		$[11] = trailing;
-		$[12] = trigger;
-		$[13] = variant;
+		$[4] = isFocused;
+		$[5] = isPopulated;
+		$[6] = isRequired;
+		$[7] = label;
+		$[8] = leading;
+		$[9] = multiline;
+		$[10] = t1;
+		$[11] = t2;
+		$[12] = t3;
+		$[13] = trailing;
+		$[14] = trigger;
+		$[15] = variant;
 	} else {
 		T0 = $[1];
 		children = $[2];
 		floatingLabel = $[3];
-		isPopulated = $[4];
-		isRequired = $[5];
-		label = $[6];
-		leading = $[7];
-		multiline = $[8];
-		t1 = $[9];
-		t2 = $[10];
-		trailing = $[11];
-		trigger = $[12];
-		variant = $[13];
+		isFocused = $[4];
+		isPopulated = $[5];
+		isRequired = $[6];
+		label = $[7];
+		leading = $[8];
+		multiline = $[9];
+		t1 = $[10];
+		t2 = $[11];
+		t3 = $[12];
+		trailing = $[13];
+		trigger = $[14];
+		variant = $[15];
 	}
-	let t3;
-	if ($[14] !== children || $[15] !== floatingLabel || $[16] !== isPopulated || $[17] !== isRequired || $[18] !== label || $[19] !== leading || $[20] !== multiline || $[21] !== trailing || $[22] !== trigger || $[23] !== variant) {
-		t3 = boxContent(label, children, floatingLabel, isPopulated, isRequired, leading, multiline, trailing, trigger, variant);
-		$[14] = children;
-		$[15] = floatingLabel;
-		$[16] = isPopulated;
-		$[17] = isRequired;
-		$[18] = label;
-		$[19] = leading;
-		$[20] = multiline;
-		$[21] = trailing;
-		$[22] = trigger;
-		$[23] = variant;
-		$[24] = t3;
-	} else t3 = $[24];
 	let t4;
-	if ($[25] !== T0 || $[26] !== t1 || $[27] !== t2 || $[28] !== t3) {
-		t4 = /* @__PURE__ */ jsx(T0, {
+	if ($[16] !== children || $[17] !== floatingLabel || $[18] !== isFocused || $[19] !== isPopulated || $[20] !== isRequired || $[21] !== label || $[22] !== leading || $[23] !== multiline || $[24] !== trailing || $[25] !== trigger || $[26] !== variant) {
+		t4 = boxContent(label, children, floatingLabel, isFocused, isPopulated, isRequired, leading, multiline, trailing, trigger, variant);
+		$[16] = children;
+		$[17] = floatingLabel;
+		$[18] = isFocused;
+		$[19] = isPopulated;
+		$[20] = isRequired;
+		$[21] = label;
+		$[22] = leading;
+		$[23] = multiline;
+		$[24] = trailing;
+		$[25] = trigger;
+		$[26] = variant;
+		$[27] = t4;
+	} else t4 = $[27];
+	let t5;
+	if ($[28] !== T0 || $[29] !== t1 || $[30] !== t2 || $[31] !== t3 || $[32] !== t4) {
+		t5 = /* @__PURE__ */ jsx(T0, {
 			...t1,
-			...t2,
-			children: t3
+			onPointerDown: t2,
+			...t3,
+			children: t4
 		});
-		$[25] = T0;
-		$[26] = t1;
-		$[27] = t2;
-		$[28] = t3;
-		$[29] = t4;
-	} else t4 = $[29];
-	return t4;
+		$[28] = T0;
+		$[29] = t1;
+		$[30] = t2;
+		$[31] = t3;
+		$[32] = t4;
+		$[33] = t5;
+	} else t5 = $[33];
+	return t5;
 }
+const PRESSABLE = "a, button, input, textarea, select, [role=\"button\"], [contenteditable=\"true\"]";
 /**
 * A field's text control, in a {@link FieldBox} or on its own. React Aria's
 * `Input`, which takes its label association, value and validation from the
@@ -405,7 +426,7 @@ function FieldSegments(t0) {
 */
 function FieldTextArea(t0) {
 	const $ = c(17);
-	const { autosize: t1, placeholder, ...props$2 } = t0;
+	const { autosize: t1, placeholder, ...props$4 } = t0;
 	const autosize = t1 === void 0 ? false : t1;
 	const box = useContext(BoxContext);
 	const context = useSlottedContext(TextAreaContext);
@@ -419,16 +440,16 @@ function FieldTextArea(t0) {
 		$[1] = box;
 		$[2] = t3;
 	} else t3 = $[2];
-	const t4 = mergeStatefulStyles(t3, props$2);
+	const t4 = mergeStatefulStyles(t3, props$4);
 	let t5;
-	if ($[3] !== T0 || $[4] !== props$2 || $[5] !== t2 || $[6] !== t4) {
+	if ($[3] !== T0 || $[4] !== props$4 || $[5] !== t2 || $[6] !== t4) {
 		t5 = /* @__PURE__ */ jsx(T0, {
 			placeholder: t2,
-			...props$2,
+			...props$4,
 			...t4
 		});
 		$[3] = T0;
-		$[4] = props$2;
+		$[4] = props$4;
 		$[5] = t2;
 		$[6] = t4;
 		$[7] = t5;
@@ -535,6 +556,31 @@ function FieldValue(t0) {
 	} else t4 = $[2];
 	return t4;
 }
+function focusedStyle(outlined, invalid) {
+	if (outlined) return invalid ? fieldChromeStyles.boxOutlinedErrorFocused : fieldChromeStyles.boxOutlinedFocused;
+	return invalid ? fieldChromeStyles.boxErrorFocused : fieldChromeStyles.boxFocused;
+}
+const CONTROL = "input:not([type=\"hidden\"]), textarea, [contenteditable=\"true\"]";
+/**
+* The box's press handler: a press anywhere on the box focuses the control
+* in it, as the whole of a native text field's box does. The box is 56dp
+* and the control's line 24dp of it, so the padding above and below the
+* line, the padding at either end and the icons were dead to a press —
+* nothing took focus, and nothing said why. Built by a call rather than
+* written at the prop, which is what react-perf's no-new-function-as-prop is
+* after; the React Compiler memoises it on the call site's own handler,
+* which runs first.
+*/
+function focusesControl(onPointerDown) {
+	return (event) => {
+		onPointerDown?.(event);
+		if (event.defaultPrevented || event.button !== 0 || !(event.target instanceof Element) || event.target.closest(PRESSABLE) !== null) return;
+		const control = event.currentTarget.querySelector(CONTROL);
+		if (control === null || control.matches(":disabled")) return;
+		event.preventDefault();
+		control.focus();
+	};
+}
 function returnToStart(event) {
 	if (!event.currentTarget.contains(event.relatedTarget)) event.currentTarget.scrollLeft = 0;
 }
@@ -546,6 +592,12 @@ function useFieldPopulated() {
 	const value = input?.value ?? textArea?.value ?? "";
 	return String(value).length > 0;
 }
+function withFocus(state, focused) {
+	return focused === state.isFocusWithin ? state : {
+		...state,
+		isFocusWithin: focused
+	};
+}
 /**
 * Whether the control in this box is holding anything, read off React
 * Aria's context for whichever control the field renders. The filled box
@@ -570,7 +622,7 @@ function FieldLabel(t0) {
 	let t1;
 	let t2;
 	if ($[0] !== t0) {
-		const { children: t3, isRequired: t4, state: t5, variant: t6, ...props$4 } = t0;
+		const { children: t3, isRequired: t4, state: t5, variant: t6, ...props$2 } = t0;
 		children = t3;
 		isRequired = t4 === void 0 ? false : t4;
 		const state = t5 === void 0 ? NO_STATE : t5;
@@ -580,8 +632,8 @@ function FieldLabel(t0) {
 		const isFocusWithin = t8 === void 0 ? false : t8;
 		const isInvalid = t9 === void 0 ? false : t9;
 		T0 = Label;
-		t1 = props$4;
-		t2 = mergeStyles(props(fieldChromeStyles.label, variant === "group" && groupStyles.label, isDisabled && fieldChromeStyles.labelDisabled, isInvalid && fieldChromeStyles.labelError, !isDisabled && !isInvalid && isFocusWithin && fieldChromeStyles.labelFocused), props$4);
+		t1 = props$2;
+		t2 = mergeStyles(props(fieldChromeStyles.label, variant === "group" && groupStyles.label, isDisabled && fieldChromeStyles.labelDisabled, isInvalid && fieldChromeStyles.labelError, !isDisabled && !isInvalid && isFocusWithin && fieldChromeStyles.labelFocused), props$2);
 		$[0] = t0;
 		$[1] = T0;
 		$[2] = children;