fluid-primitives 0.19.1 → 1.0.0-beta.1

package/dist/form.fields-B58TZukv.js

@@ -0,0 +1,329 @@
+import { B as stringifyFieldPathAsBrackets, F as renameFieldMachineForForm, H as trimArraySuffix, L as appendFieldPathSegment, R as parseFieldPath, V as toRegisteredFieldName, _ as serializeFieldValue, h as getFieldElement, j as getFieldMachinesFor, k as isInsideField } from "./Client-HrMIqv7d.js";
+import { createAnatomy } from "@zag-js/anatomy";
+import { MachineStatus } from "@zag-js/core";
+
+//#region Resources/Private/Primitives/Form/src/form.anatomy.ts
+const anatomy = createAnatomy("form").parts("root", "content", "indicator", "errorText", "successText");
+const parts = anatomy.build();
+
+//#endregion
+//#region Resources/Private/Primitives/Form/src/form.dom.ts
+const getFormEl = (scope) => scope.query(scope.selector(parts.root));
+
+//#endregion
+//#region Resources/Private/Primitives/Form/src/form.types.ts
+/**
+* Error thrown by post() when server returns 422 validation errors.
+* The machine catches this and transitions to 'invalid' state.
+*/
+var ValidationError = class extends Error {
+	constructor(errors) {
+		super("Server validation failed");
+		this.errors = errors;
+		this.name = "ValidationError";
+	}
+};
+var FormError = class extends Error {
+	constructor(errors) {
+		super("Server form validation failed");
+		this.errors = errors;
+		this.name = "FormError";
+	}
+};
+
+//#endregion
+//#region Resources/Private/Primitives/Form/src/form.values.ts
+function createFormValues(formData) {
+	let cachedObject = null;
+	const getObject = () => {
+		if (cachedObject === null) cachedObject = formDataToObject(formData);
+		return cachedObject;
+	};
+	return {
+		get(path) {
+			return getFieldValues(formData, path)[0] ?? null;
+		},
+		getAll(path) {
+			return [...getFieldValues(formData, path)];
+		},
+		has(path) {
+			return getValueAtFieldPath(getObject(), path) !== null;
+		},
+		pick(path) {
+			return getValueAtFieldPath(getObject(), path);
+		},
+		toObject() {
+			return getObject();
+		}
+	};
+}
+function getFieldErrorValue(values, fieldName) {
+	return toFieldErrorValue(values.pick(fieldName));
+}
+function formDataToObject(formData) {
+	const fieldNames = new Set(Array.from(formData.keys(), trimArraySuffix));
+	const dataObject = {};
+	for (const fieldName of fieldNames) setValueAtFieldPath(dataObject, fieldName, getFieldFormDataValue(formData, fieldName) ?? "");
+	return dataObject;
+}
+function getFieldFormDataValue(formData, fieldName) {
+	const { entries, isArrayValue } = readFieldEntries(formData, fieldName);
+	return isArrayValue ? entries : entries[0] ?? null;
+}
+function getFieldValues(formData, fieldName) {
+	return readFieldEntries(formData, fieldName).entries;
+}
+/**
+* Reads the raw FormData entries for a field name, checking both the direct
+* and `[]`-suffixed key so callers don't each re-query FormData themselves.
+*/
+function readFieldEntries(formData, fieldName) {
+	const normalizedFieldName = trimArraySuffix(fieldName);
+	const directEntries = formData.getAll(normalizedFieldName);
+	const bracketEntries = formData.getAll(`${normalizedFieldName}[]`);
+	const entries = directEntries.length > 0 ? directEntries : bracketEntries;
+	return {
+		entries,
+		isArrayValue: fieldName.endsWith("[]") || bracketEntries.length > 0 || entries.length > 1
+	};
+}
+function createContainerForFieldPathSegment(segment) {
+	return typeof segment === "number" || segment === appendFieldPathSegment ? [] : {};
+}
+function setValueAtFieldPath(target, fieldName, value) {
+	const fieldPath = parseFieldPath(fieldName);
+	if (fieldPath.length === 0) return;
+	let current = target;
+	for (let index = 0; index < fieldPath.length; index++) {
+		const segment = fieldPath[index];
+		const nextSegment = fieldPath[index + 1];
+		const isLeaf = index === fieldPath.length - 1;
+		if (segment === appendFieldPathSegment) {
+			if (!Array.isArray(current)) return;
+			if (isLeaf) {
+				current.push(value);
+				return;
+			}
+			const nextContainer = createContainerForFieldPathSegment(nextSegment);
+			current.push(nextContainer);
+			current = nextContainer;
+			continue;
+		}
+		if (typeof segment === "number") {
+			if (!Array.isArray(current)) return;
+			if (isLeaf) {
+				current[segment] = value;
+				return;
+			}
+			const existingValue = current[segment];
+			if (existingValue && typeof existingValue === "object") {
+				current = existingValue;
+				continue;
+			}
+			const nextContainer = createContainerForFieldPathSegment(nextSegment);
+			current[segment] = nextContainer;
+			current = nextContainer;
+			continue;
+		}
+		if (Array.isArray(current)) return;
+		if (isLeaf) {
+			current[segment] = value;
+			return;
+		}
+		const existingValue = current[segment];
+		if (existingValue && typeof existingValue === "object") {
+			current = existingValue;
+			continue;
+		}
+		const nextContainer = createContainerForFieldPathSegment(nextSegment);
+		current[segment] = nextContainer;
+		current = nextContainer;
+	}
+}
+function getValueAtFieldPath(values, fieldName) {
+	const fieldPath = parseFieldPath(trimArraySuffix(fieldName));
+	if (fieldPath.length === 0) return null;
+	let current = values;
+	for (const segment of fieldPath) {
+		if (segment === appendFieldPathSegment) return Array.isArray(current) ? current : null;
+		if (typeof current !== "object" || current === null) return null;
+		current = current[segment];
+		if (current === void 0) return null;
+	}
+	return current;
+}
+function toFieldErrorValue(value) {
+	if (value === null || typeof value === "object" && !Array.isArray(value) && !(value instanceof File)) return null;
+	if (typeof value === "string" || value instanceof File) return value;
+	if (Array.isArray(value) && value.every(isFormValueLeaf)) return value;
+	return null;
+}
+function isFormValueLeaf(value) {
+	return typeof value === "string" || value instanceof File;
+}
+
+//#endregion
+//#region Resources/Private/Primitives/Form/src/form.validation.ts
+function validateWithValidation(validation, values, fieldName) {
+	if (!validation) return {};
+	if (typeof validation === "function") return attachErrorValues(validation({
+		values,
+		fieldName,
+		validateWithStandardSchema: (schema) => validateWithStandardSchema(schema, values)
+	}) ?? {}, values);
+	return attachErrorValues(validateWithStandardSchema(validation, values), values);
+}
+function validateWithStandardSchema(schema, values) {
+	const validationResult = schema["~standard"].validate(values.toObject());
+	if (isPromiseLike(validationResult)) throw new TypeError("Form validation must be synchronous. Use onSubmit for async validation.");
+	if (!validationResult.issues || validationResult.issues.length === 0) return {};
+	return errorsFromIssues(validationResult.issues);
+}
+function attachErrorValues(errors, values) {
+	return Object.fromEntries(Object.entries(errors).map(([fieldName, error]) => [toRegisteredFieldName(fieldName), {
+		...error,
+		value: error.value === void 0 ? getFieldErrorValue(values, fieldName) : error.value
+	}]));
+}
+function filterErrorsForCurrentValues(serverErrors, values) {
+	const errors = {};
+	for (const fieldName in serverErrors) {
+		const error = getCurrentErrorForField(serverErrors, fieldName, values);
+		if (error) errors[fieldName] = error;
+	}
+	return errors;
+}
+function getCurrentErrorForField(errors, fieldName, values) {
+	const error = errors[trimArraySuffix(fieldName)];
+	if (!error || error.value === void 0) return;
+	return serializeFieldValue(getFieldErrorValue(values, fieldName)) === serializeFieldValue(error.value) ? error : void 0;
+}
+function getFormErrorMessages(responseErrors, objectName) {
+	if (!objectName) return null;
+	return responseErrors[objectName] ?? null;
+}
+function mapServerErrors(responseErrors, objectName, values) {
+	const out = {};
+	for (const key in responseErrors) {
+		const canonicalFieldName = toRegisteredFieldName(key, objectName);
+		out[canonicalFieldName] = {
+			messages: responseErrors[key],
+			value: getFieldErrorValue(values, canonicalFieldName)
+		};
+	}
+	return out;
+}
+function errorsFromIssues(issues) {
+	const errors = {};
+	for (const issue of issues) {
+		const fieldName = getIssueFieldName(issue);
+		if (!fieldName) continue;
+		const existingError = errors[fieldName];
+		if (existingError) {
+			existingError.messages.push(issue.message);
+			continue;
+		}
+		errors[fieldName] = { messages: [issue.message] };
+	}
+	return errors;
+}
+function getIssueFieldName(issue) {
+	if (!issue.path || issue.path.length === 0) return;
+	const fieldPath = [];
+	for (const pathSegment of issue.path) {
+		const key = typeof pathSegment === "object" && pathSegment !== null && "key" in pathSegment ? pathSegment.key : pathSegment;
+		if (typeof key === "symbol") return;
+		if (typeof key === "number") {
+			fieldPath.push(key);
+			continue;
+		}
+		fieldPath.push(String(key));
+	}
+	if (fieldPath.length === 0) return;
+	return trimArraySuffix(stringifyFieldPathAsBrackets(fieldPath));
+}
+function isPromiseLike(result) {
+	return typeof result === "object" && result !== null && "then" in result;
+}
+
+//#endregion
+//#region Resources/Private/Primitives/Form/src/form.fields.ts
+function getFormData(scope) {
+	const form = getFormEl(scope);
+	return form ? new FormData(form) : new FormData();
+}
+/**
+* The messages the form has for one field right now: a server error whose captured value still
+* matches the field's current value, else what `validation` (schema or callback) reports for it.
+*/
+function getFieldMessages(form, fieldName) {
+	const normalizedFieldName = trimArraySuffix(fieldName);
+	const values = createFormValues(getFormData(form.scope));
+	const serverError = getCurrentErrorForField(form.refs.get("serverErrors"), normalizedFieldName, values);
+	if (serverError) return serverError.messages;
+	const validation = form.prop("validation");
+	if (!validation) return [];
+	return validateWithValidation(validation, values, normalizedFieldName)[normalizedFieldName]?.messages ?? [];
+}
+function getRegisteredFieldMachines(scope) {
+	return getFieldMachinesFor(getFormEl(scope));
+}
+/** A field counts while its own root is in the DOM; it may have no named control (an empty combobox). */
+function pruneStaleFieldMachines(scope) {
+	const machines = getRegisteredFieldMachines(scope);
+	for (const [name, fieldMachine] of machines) if (!fieldMachine.refs.get("rootEl")?.isConnected) machines.delete(name);
+}
+function sendToFieldMachines(scope, type) {
+	for (const fieldMachine of getRegisteredFieldMachines(scope).values()) fieldMachine.send({ type });
+}
+/**
+* Resolves once the events just sent to the fields were handled (a machine handles `send` in a
+* microtask) and no field is validating anymore, so an async validator can still block a submit.
+*/
+async function settleFieldMachines(scope) {
+	await Promise.resolve();
+	const validating = () => Array.from(getRegisteredFieldMachines(scope).values()).filter((fieldMachine) => fieldMachine.service.getStatus() === MachineStatus.Started && fieldMachine.context.get("validating"));
+	for (let pending = validating(); pending.length > 0; pending = validating()) await new Promise((resolve) => {
+		const unsubscribe = pending.map((fieldMachine) => fieldMachine.subscribe(() => {
+			if (fieldMachine.context.get("validating")) return;
+			unsubscribe.forEach((stop) => stop());
+			resolve();
+		}));
+	});
+}
+function hasInvalidFieldMachines(scope) {
+	return Array.from(getRegisteredFieldMachines(scope).values()).some((fieldMachine) => fieldMachine.computed("invalid"));
+}
+function getFirstInvalidField(scope) {
+	return Array.from(getRegisteredFieldMachines(scope)).find(([, fieldMachine]) => fieldMachine.computed("invalid"));
+}
+const FOCUSABLE = [
+	"button:not([disabled])",
+	"input:not([disabled]):not([type=\"hidden\"]):not([aria-hidden=\"true\"])",
+	"select:not([disabled]):not([aria-hidden=\"true\"])",
+	"textarea:not([disabled])",
+	"[tabindex]:not([tabindex=\"-1\"])"
+].join(", ");
+/**
+* Moves the focus into an invalid field: to the control carrying its name (the hidden select of a
+* Select and the hidden input of a Combobox hand it on to their visible control) and, when that
+* cannot take focus (a Slider's input is `display: none`), to the first thing inside the field that can.
+*/
+function focusField(form, name, fieldMachine) {
+	const rootEl = fieldMachine.refs.get("rootEl");
+	const target = getFieldElement(form, name);
+	target?.focus();
+	if (target instanceof HTMLInputElement || target instanceof HTMLTextAreaElement) target.select();
+	if (rootEl && !isInsideField(rootEl, rootEl.ownerDocument.activeElement)) rootEl.querySelector(FOCUSABLE)?.focus();
+}
+/** Errors for names no registered field owns (a hidden input, say) still make the form invalid. */
+function hasUnownedErrors(scope, errors) {
+	const fieldMachines = getRegisteredFieldMachines(scope);
+	return Object.keys(errors).some((name) => !fieldMachines.has(name));
+}
+function renameFieldMachine(scope, oldName, newName) {
+	renameFieldMachineForForm(getFormEl(scope), oldName, newName);
+}
+
+//#endregion
+export { createFormValues as _, getRegisteredFieldMachines as a, getFormEl as b, pruneStaleFieldMachines as c, settleFieldMachines as d, attachErrorValues as f, validateWithValidation as g, mapServerErrors as h, getFormData as i, renameFieldMachine as l, getFormErrorMessages as m, getFieldMessages as n, hasInvalidFieldMachines as o, filterErrorsForCurrentValues as p, getFirstInvalidField as r, hasUnownedErrors as s, focusField as t, sendToFieldMachines as u, FormError as v, parts as x, ValidationError as y };