@tamagui/field 0.0.0-bootstrap.0 → 3.0.0-beta.643.1

package/dist/esm/Field.native.js

@@ -0,0 +1,983 @@
+import { jsx } from "react/jsx-runtime";
+import { Text, View, createStyledHOC, isWeb, styled, useIsomorphicLayoutEffect, withStaticProperties } from "@tamagui/core";
+import { useFormRegistryContext } from "@tamagui/form";
+import { focusFocusable } from "@tamagui/focusable";
+import * as React from "react";
+import { FieldControlContext, FieldStateContext, FieldStyledContext, useFieldControl, useFieldState } from "./FieldContext.native.js";
+import { createDefaultValidityState, createValidationCommitter, getValidationResult, isFilled, normalizeNativeValidity, shouldValidateOnChange } from "./validation.native.js";
+
+function _instanceof(left, right) {
+	if (right != null && typeof Symbol !== "undefined" && right[Symbol.hasInstance]) {
+		return !!right[Symbol.hasInstance](left);
+	} else {
+		return left instanceof right;
+	}
+}
+var fieldStateVariants = {
+	valid: { true: {} },
+	invalid: { true: {} },
+	touched: { true: {} },
+	dirty: { true: {} },
+	filled: { true: {} },
+	focused: { true: {} },
+	disabled: { true: {} }
+};
+var FieldFrame = styled(View, {
+	displayName: "Field",
+	context: FieldStyledContext,
+	variants: fieldStateVariants
+});
+var FieldLabelFrame = styled(Text, {
+	displayName: "FieldLabel",
+	render: "label",
+	context: FieldStyledContext,
+	variants: fieldStateVariants
+});
+var FieldDescriptionFrame = styled(Text, {
+	displayName: "FieldDescription",
+	render: "p",
+	context: FieldStyledContext,
+	variants: fieldStateVariants
+});
+var FieldErrorFrame = styled(Text, {
+	displayName: "FieldError",
+	render: "span",
+	context: FieldStyledContext,
+	variants: fieldStateVariants
+});
+var FieldItemFrame = styled(View, {
+	displayName: "FieldItem",
+	context: FieldStyledContext,
+	variants: fieldStateVariants
+});
+var validityKeys = [
+	"badInput",
+	"customError",
+	"patternMismatch",
+	"rangeOverflow",
+	"rangeUnderflow",
+	"stepMismatch",
+	"tooLong",
+	"tooShort",
+	"typeMismatch",
+	"valueMissing"
+];
+var AssociationContext = /* @__PURE__ */ React.createContext(null);
+var FieldRootContext = /* @__PURE__ */ React.createContext(null);
+var FieldItemContext = /* @__PURE__ */ React.createContext(false);
+function getText(children) {
+	var text = [];
+	React.Children.forEach(children, function(child) {
+		if (typeof child === "string" || typeof child === "number") {
+			text.push(String(child));
+			return;
+		}
+		if (/* @__PURE__ */ React.isValidElement(child)) {
+			var nested = getText(child.props.children);
+			if (nested) {
+				text.push(nested);
+			}
+		}
+	});
+	return text.join(" ").trim() || void 0;
+}
+function useAssociation(prefix, parent) {
+	var defaultControlId = `${prefix}-control`;
+	var controlIdsRef = React.useRef(/* @__PURE__ */ new Map());
+	var labelsRef = React.useRef(/* @__PURE__ */ new Map());
+	var messagesRef = React.useRef(/* @__PURE__ */ new Map());
+	var [, update] = React.useReducer(function(value) {
+		return value + 1;
+	}, 0);
+	var registerControlId = React.useCallback(function(id) {
+		var source = /* @__PURE__ */ Symbol();
+		controlIdsRef.current.set(source, id);
+		update();
+		return function() {
+			controlIdsRef.current.delete(source);
+			update();
+		};
+	}, []);
+	var registerLabel = React.useCallback(function(id, text) {
+		var source = /* @__PURE__ */ Symbol();
+		labelsRef.current.set(source, {
+			id,
+			text
+		});
+		update();
+		return function() {
+			labelsRef.current.delete(source);
+			update();
+		};
+	}, []);
+	var registerMessage = React.useCallback(function(id, text) {
+		var source = /* @__PURE__ */ Symbol();
+		messagesRef.current.set(source, {
+			id,
+			text
+		});
+		update();
+		return function() {
+			messagesRef.current.delete(source);
+			update();
+		};
+	}, []);
+	var _Array_from_at;
+	var controlId = (_Array_from_at = Array.from(controlIdsRef.current.values()).at(-1)) !== null && _Array_from_at !== void 0 ? _Array_from_at : defaultControlId;
+	var label = Array.from(labelsRef.current.values()).at(-1);
+	var messages = Array.from(messagesRef.current.values());
+	return React.useMemo(function() {
+		var _parent_messageIds, _parent_messageTexts;
+		return {
+			controlId,
+			labelId: [parent === null || parent === void 0 ? void 0 : parent.labelId, label === null || label === void 0 ? void 0 : label.id].filter(Boolean).join(" ") || void 0,
+			labelText: [parent === null || parent === void 0 ? void 0 : parent.labelText, label === null || label === void 0 ? void 0 : label.text].filter(Boolean).join(" ") || void 0,
+			messageIds: Array.from(/* @__PURE__ */ new Set([...(_parent_messageIds = parent === null || parent === void 0 ? void 0 : parent.messageIds) !== null && _parent_messageIds !== void 0 ? _parent_messageIds : [], ...messages.map(function(message) {
+				return message.id;
+			})])),
+			messageTexts: [...(_parent_messageTexts = parent === null || parent === void 0 ? void 0 : parent.messageTexts) !== null && _parent_messageTexts !== void 0 ? _parent_messageTexts : [], ...messages.flatMap(function(message) {
+				return message.text ? [message.text] : [];
+			})],
+			registerControlId,
+			registerLabel,
+			registerMessage
+		};
+	}, [
+		controlId,
+		label === null || label === void 0 ? void 0 : label.id,
+		label === null || label === void 0 ? void 0 : label.text,
+		messages,
+		parent === null || parent === void 0 ? void 0 : parent.labelId,
+		parent === null || parent === void 0 ? void 0 : parent.labelText,
+		parent === null || parent === void 0 ? void 0 : parent.messageIds,
+		parent === null || parent === void 0 ? void 0 : parent.messageTexts,
+		registerControlId,
+		registerLabel,
+		registerMessage
+	]);
+}
+function getStyleState(state) {
+	var disabled = arguments.length > 1 && arguments[1] !== void 0 ? arguments[1] : state.disabled;
+	return {
+		valid: state.valid === true,
+		invalid: state.valid === false,
+		touched: state.touched,
+		dirty: state.dirty,
+		filled: state.filled,
+		focused: state.focused,
+		disabled
+	};
+}
+function getDataProps(state) {
+	var disabled = arguments.length > 1 && arguments[1] !== void 0 ? arguments[1] : state.disabled;
+	if (!isWeb) {
+		return {};
+	}
+	return {
+		"data-valid": state.valid === true ? "" : void 0,
+		"data-invalid": state.valid === false ? "" : void 0,
+		"data-touched": state.touched ? "" : void 0,
+		"data-dirty": state.dirty ? "" : void 0,
+		"data-filled": state.filled ? "" : void 0,
+		"data-focused": state.focused ? "" : void 0,
+		"data-disabled": disabled ? "" : void 0
+	};
+}
+function useControlContext(root, association) {
+	var itemDisabled = arguments.length > 2 && arguments[2] !== void 0 ? arguments[2] : false, isItem = arguments.length > 3 && arguments[3] !== void 0 ? arguments[3] : false;
+	var disabled = root.state.disabled || itemDisabled;
+	var controlIdRef = React.useRef(association.controlId);
+	var registrationDisabledRef = React.useRef(root.rootDisabled || itemDisabled);
+	controlIdRef.current = association.controlId;
+	registrationDisabledRef.current = root.rootDisabled || itemDisabled;
+	var registerControl = React.useCallback(function(registration) {
+		var _registration_id;
+		var id = (_registration_id = registration.id) !== null && _registration_id !== void 0 ? _registration_id : controlIdRef.current;
+		var unregisterId = association.registerControlId(id);
+		var nextRegistration = {
+			...registration,
+			id,
+			get disabled() {
+				return registrationDisabledRef.current || registration.disabled;
+			}
+		};
+		var unregisterControl = root.registerControl(nextRegistration, !isItem);
+		return function() {
+			unregisterControl();
+			unregisterId();
+		};
+	}, [
+		association.registerControlId,
+		isItem,
+		root.registerControl
+	]);
+	return React.useMemo(function() {
+		return {
+			name: root.name,
+			disabled,
+			ariaProps: {
+				id: association.controlId,
+				...isWeb ? {
+					"aria-labelledby": association.labelId,
+					"aria-describedby": association.messageIds.join(" ") || void 0,
+					"aria-invalid": root.state.valid === false ? true : void 0
+				} : {
+					accessibilityLabel: association.labelText,
+					accessibilityHint: association.messageTexts.join(" ") || void 0,
+					accessibilityState: disabled ? { disabled: true } : void 0
+				}
+			},
+			dataProps: getDataProps(root.state, disabled),
+			onFocus: root.onFocus,
+			onBlur: root.onBlur,
+			onChange: root.onChange,
+			onDisabledChange: isItem ? function() {} : root.onDisabledChange,
+			registerControl
+		};
+	}, [
+		association.controlId,
+		association.labelId,
+		association.labelText,
+		association.messageIds,
+		association.messageTexts,
+		disabled,
+		isItem,
+		registerControl,
+		root.name,
+		root.onBlur,
+		root.onChange,
+		root.onDisabledChange,
+		root.onFocus,
+		root.state
+	]);
+}
+function getRegistrationValue(registration) {
+	return (registration === null || registration === void 0 ? void 0 : registration.getValue) ? registration.getValue() : registration === null || registration === void 0 ? void 0 : registration.value;
+}
+function getInput(registration) {
+	var _registration_inputRef;
+	return (_registration_inputRef = registration.inputRef) === null || _registration_inputRef === void 0 ? void 0 : _registration_inputRef.current;
+}
+function canValidateInput(input) {
+	return Boolean(input && input.validity && typeof input.setCustomValidity === "function" && !input.disabled);
+}
+function isEligibleInput(input, formElement) {
+	var _input_matches, _input_hasAttribute;
+	if ((_input_matches = input.matches) === null || _input_matches === void 0 ? void 0 : _input_matches.call(input, ":disabled")) {
+		return false;
+	}
+	if (!formElement || input.form === formElement) {
+		return true;
+	}
+	return input.form === null && !((_input_hasAttribute = input.hasAttribute) === null || _input_hasAttribute === void 0 ? void 0 : _input_hasAttribute.call(input, "form"));
+}
+function isEligibleRegistration(registration, formElement) {
+	if (registration.disabled) {
+		return false;
+	}
+	var input = getInput(registration);
+	return !canValidateInput(input) || isEligibleInput(input, formElement);
+}
+function getNativeValidity(input, showValueMissing) {
+	var state = createDefaultValidityState(true);
+	var _iteratorNormalCompletion = true, _didIteratorError = false, _iteratorError = void 0;
+	try {
+		for (var _iterator = validityKeys[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = true) {
+			var key = _step.value;
+			state[key] = Boolean(input.validity[key]);
+		}
+	} catch (err) {
+		_didIteratorError = true;
+		_iteratorError = err;
+	} finally {
+		try {
+			if (!_iteratorNormalCompletion && _iterator.return != null) {
+				_iterator.return();
+			}
+		} finally {
+			if (_didIteratorError) {
+				throw _iteratorError;
+			}
+		}
+	}
+	state.valid = Boolean(input.validity.valid);
+	return normalizeNativeValidity(state, showValueMissing);
+}
+function hasValidityError(state) {
+	return state.valid === false;
+}
+function hasError(errors) {
+	return Array.isArray(errors) ? errors.length > 0 : Boolean(errors);
+}
+var FieldComponent = createStyledHOC(FieldFrame, function Field(param, forwardedRef) {
+	var { name: nameProp, disabled: disabledProp = false, invalid = false, validate, validationMode: validationModeProp, validationDebounceTime = 0, children, ...fieldProps } = param;
+	var form = useFormRegistryContext();
+	var { clearErrors: clearFormErrors, errors: formErrors, formElementRef, getValues: getFormValues, registerField: registerFormField, submitAttemptedRef, validationMode: formValidationMode } = form;
+	var reactId = React.useId().replace(/:/g, "");
+	var association = useAssociation(`field-${reactId}`);
+	var fieldId = `field-${reactId}`;
+	var controlsRef = React.useRef(/* @__PURE__ */ new Map());
+	var reportsDisabledRef = React.useRef(/* @__PURE__ */ new WeakMap());
+	var activeControlRef = React.useRef(void 0);
+	var activeValidationControlRef = React.useRef(void 0);
+	var formControlRef = React.useRef(null);
+	var formValidityDataRef = React.useRef({ state: { valid: null } });
+	var initialValueRef = React.useRef(void 0);
+	var hasInitialValueRef = React.useRef(false);
+	var valueRef = React.useRef(void 0);
+	var dirtyRef = React.useRef(false);
+	var debounceRef = React.useRef(void 0);
+	var [registeredName, setRegisteredName] = React.useState();
+	var [controlDisabled, setControlDisabled] = React.useState(false);
+	var [touched, setTouched] = React.useState(false);
+	var [dirty, setDirty] = React.useState(false);
+	var [filled, setFilled] = React.useState(false);
+	var [focused, setFocused] = React.useState(false);
+	var [currentValue, setCurrentValue] = React.useState(void 0);
+	var [validityData, setValidityData] = React.useState({
+		state: createDefaultValidityState(),
+		error: "",
+		errors: [],
+		value: void 0,
+		initialValue: void 0
+	});
+	var validityDataRef = React.useRef(validityData);
+	validityDataRef.current = validityData;
+	var effectiveName = nameProp !== null && nameProp !== void 0 ? nameProp : registeredName;
+	var effectiveNameRef = React.useRef(effectiveName);
+	effectiveNameRef.current = effectiveName;
+	var disabled = disabledProp || controlDisabled;
+	var disabledRef = React.useRef(disabled);
+	disabledRef.current = disabled;
+	var validationMode = validationModeProp !== null && validationModeProp !== void 0 ? validationModeProp : formValidationMode;
+	var externalError = effectiveName && Object.hasOwn(formErrors, effectiveName) ? formErrors[effectiveName] : void 0;
+	var externalErrors = Array.isArray(externalError) ? externalError : externalError ? [externalError] : [];
+	var externallyInvalid = invalid || hasError(externalError);
+	var externallyInvalidRef = React.useRef(externallyInvalid);
+	externallyInvalidRef.current = externallyInvalid;
+	var valid = externallyInvalid ? false : disabled ? null : validityData.state.valid;
+	formValidityDataRef.current.state.valid = disabled ? null : externallyInvalid ? false : validityData.state.valid;
+	var errors = externalErrors.length ? externalErrors : validityData.errors;
+	var _errors_;
+	var error = (_errors_ = errors[0]) !== null && _errors_ !== void 0 ? _errors_ : "";
+	var state = React.useMemo(function() {
+		return {
+			name: effectiveName,
+			value: currentValue,
+			error,
+			errors,
+			validity: validityData.state,
+			valid,
+			touched,
+			dirty,
+			filled,
+			focused,
+			disabled
+		};
+	}, [
+		dirty,
+		disabled,
+		currentValue,
+		effectiveName,
+		error,
+		errors,
+		filled,
+		focused,
+		touched,
+		valid,
+		validityData.state
+	]);
+	var stateRef = React.useRef(state);
+	stateRef.current = state;
+	var publishValidityRef = React.useRef(function() {});
+	var validationCommitterRef = React.useRef(void 0);
+	if (!validationCommitterRef.current) {
+		validationCommitterRef.current = createValidationCommitter(function(data) {
+			publishValidityRef.current(data);
+		});
+	}
+	var getActiveControl = React.useCallback(function() {
+		var active;
+		var _iteratorNormalCompletion = true, _didIteratorError = false, _iteratorError = void 0;
+		try {
+			for (var _iterator = controlsRef.current.values()[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = true) {
+				var registration = _step.value;
+				if (!isEligibleRegistration(registration, formElementRef.current)) {
+					continue;
+				}
+				active = registration;
+			}
+		} catch (err) {
+			_didIteratorError = true;
+			_iteratorError = err;
+		} finally {
+			try {
+				if (!_iteratorNormalCompletion && _iterator.return != null) {
+					_iterator.return();
+				}
+			} finally {
+				if (_didIteratorError) {
+					throw _iteratorError;
+				}
+			}
+		}
+		return active;
+	}, [formElementRef]);
+	var syncControlDisabled = React.useCallback(function() {
+		var nextDisabled = false;
+		var _iteratorNormalCompletion = true, _didIteratorError = false, _iteratorError = void 0;
+		try {
+			for (var _iterator = controlsRef.current.values()[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = true) {
+				var registration = _step.value;
+				if (reportsDisabledRef.current.get(registration)) {
+					nextDisabled = Boolean(registration.disabled);
+				}
+			}
+		} catch (err) {
+			_didIteratorError = true;
+			_iteratorError = err;
+		} finally {
+			try {
+				if (!_iteratorNormalCompletion && _iterator.return != null) {
+					_iterator.return();
+				}
+			} finally {
+				if (_didIteratorError) {
+					throw _iteratorError;
+				}
+			}
+		}
+		setControlDisabled(nextDisabled);
+	}, []);
+	var getRepresentativeControl = React.useCallback(function() {
+		var fallback;
+		var _iteratorNormalCompletion = true, _didIteratorError = false, _iteratorError = void 0;
+		try {
+			for (var _iterator = controlsRef.current.values()[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = true) {
+				var registration = _step.value;
+				var input = getInput(registration);
+				if (!isEligibleRegistration(registration, formElementRef.current)) {
+					continue;
+				}
+				fallback !== null && fallback !== void 0 ? fallback : fallback = registration;
+				if (canValidateInput(input) && !input.validity.valid) {
+					return registration;
+				}
+			}
+		} catch (err) {
+			_didIteratorError = true;
+			_iteratorError = err;
+		} finally {
+			try {
+				if (!_iteratorNormalCompletion && _iterator.return != null) {
+					_iterator.return();
+				}
+			} finally {
+				if (_didIteratorError) {
+					throw _iteratorError;
+				}
+			}
+		}
+		return fallback !== null && fallback !== void 0 ? fallback : getActiveControl();
+	}, [formElementRef, getActiveControl]);
+	var clearCustomValidity = React.useCallback(function() {
+		var _iteratorNormalCompletion = true, _didIteratorError = false, _iteratorError = void 0;
+		try {
+			for (var _iterator = controlsRef.current.values()[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = true) {
+				var registration = _step.value;
+				var input = getInput(registration);
+				if (canValidateInput(input)) {
+					input.setCustomValidity("");
+				}
+			}
+		} catch (err) {
+			_didIteratorError = true;
+			_iteratorError = err;
+		} finally {
+			try {
+				if (!_iteratorNormalCompletion && _iterator.return != null) {
+					_iterator.return();
+				}
+			} finally {
+				if (_didIteratorError) {
+					throw _iteratorError;
+				}
+			}
+		}
+	}, []);
+	var setCustomValidity = React.useCallback(function(message) {
+		var _iteratorNormalCompletion = true, _didIteratorError = false, _iteratorError = void 0;
+		try {
+			for (var _iterator = controlsRef.current.values()[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = true) {
+				var registration = _step.value;
+				if (!isEligibleRegistration(registration, formElementRef.current)) {
+					continue;
+				}
+				var input = getInput(registration);
+				if (canValidateInput(input)) {
+					input.setCustomValidity(message);
+				}
+			}
+		} catch (err) {
+			_didIteratorError = true;
+			_iteratorError = err;
+		} finally {
+			try {
+				if (!_iteratorNormalCompletion && _iterator.return != null) {
+					_iterator.return();
+				}
+			} finally {
+				if (_didIteratorError) {
+					throw _iteratorError;
+				}
+			}
+		}
+	}, [formElementRef]);
+	var publishValidity = React.useCallback(function(data) {
+		if (data.state.customError) {
+			setCustomValidity(data.errors.join("\n"));
+		} else {
+			clearCustomValidity();
+		}
+		formValidityDataRef.current.state.valid = disabledRef.current ? null : externallyInvalidRef.current ? false : data.state.valid;
+		validityDataRef.current = data;
+		setCurrentValue(data.value);
+		setValidityData(data);
+	}, [clearCustomValidity, setCustomValidity]);
+	publishValidityRef.current = publishValidity;
+	var validateValue = React.useCallback(function(value) {
+		var submit = arguments.length > 1 && arguments[1] !== void 0 ? arguments[1] : false, fromChange = arguments.length > 2 && arguments[2] !== void 0 ? arguments[2] : false;
+		if (debounceRef.current) {
+			clearTimeout(debounceRef.current);
+			debounceRef.current = void 0;
+		}
+		var showValueMissing = dirtyRef.current || submit || submitAttemptedRef.current;
+		if (fromChange) {
+			clearCustomValidity();
+		}
+		var representative = getRepresentativeControl();
+		activeValidationControlRef.current = representative;
+		var _representative_controlRef_current;
+		formControlRef.current = (_representative_controlRef_current = representative === null || representative === void 0 ? void 0 : representative.controlRef.current) !== null && _representative_controlRef_current !== void 0 ? _representative_controlRef_current : null;
+		var input = representative && getInput(representative);
+		var nativeState = createDefaultValidityState(true);
+		var nativeMessage = "";
+		if (canValidateInput(input)) {
+			nativeState = getNativeValidity(input, showValueMissing);
+			nativeMessage = nativeState.valid === false ? input.validationMessage : "";
+		} else {
+			var required = Array.from(controlsRef.current.values()).some(function(registration) {
+				return registration.required && isEligibleRegistration(registration, formElementRef.current);
+			});
+			if (required && !isFilled(value) && showValueMissing) {
+				nativeState = {
+					...createDefaultValidityState(false),
+					valueMissing: true
+				};
+				nativeMessage = "Please fill out this field.";
+			}
+		}
+		var initialValue = initialValueRef.current;
+		var makeValidityData = function(customErrors) {
+			if (customErrors.length) {
+				var _customErrors_;
+				return {
+					state: {
+						...nativeState,
+						valid: false,
+						customError: true
+					},
+					error: (_customErrors_ = customErrors[0]) !== null && _customErrors_ !== void 0 ? _customErrors_ : "",
+					errors: customErrors,
+					value,
+					initialValue
+				};
+			}
+			if (hasValidityError(nativeState)) {
+				return {
+					state: nativeState,
+					error: nativeMessage,
+					errors: nativeMessage ? [nativeMessage] : [],
+					value,
+					initialValue
+				};
+			}
+			return {
+				state: createDefaultValidityState(true),
+				error: "",
+				errors: [],
+				value,
+				initialValue
+			};
+		};
+		if (nativeMessage && !fromChange) {
+			validationCommitterRef.current.run(makeValidityData([]));
+			return;
+		}
+		var result = validate ? getValidationResult(validate, value, getFormValues()) : [];
+		if (_instanceof(result, Promise)) {
+			void validationCommitterRef.current.run(result.then(function(customErrors) {
+				return makeValidityData(customErrors);
+			}));
+		} else {
+			validationCommitterRef.current.run(makeValidityData(result));
+		}
+	}, [
+		clearCustomValidity,
+		formElementRef,
+		getFormValues,
+		getRepresentativeControl,
+		submitAttemptedRef,
+		validate
+	]);
+	var registerControl = React.useCallback(function(registration) {
+		var reportDisabled = arguments.length > 1 && arguments[1] !== void 0 ? arguments[1] : true;
+		var _activeControlRef_current;
+		var source = /* @__PURE__ */ Symbol();
+		controlsRef.current.set(source, registration);
+		reportsDisabledRef.current.set(registration, reportDisabled);
+		activeControlRef.current = getActiveControl();
+		var _activeControlRef_current_controlRef_current;
+		formControlRef.current = (_activeControlRef_current_controlRef_current = (_activeControlRef_current = activeControlRef.current) === null || _activeControlRef_current === void 0 ? void 0 : _activeControlRef_current.controlRef.current) !== null && _activeControlRef_current_controlRef_current !== void 0 ? _activeControlRef_current_controlRef_current : null;
+		var value = getRegistrationValue(registration);
+		valueRef.current = value;
+		setCurrentValue(value);
+		if (!hasInitialValueRef.current) {
+			hasInitialValueRef.current = true;
+			initialValueRef.current = value;
+			validityDataRef.current = {
+				...validityDataRef.current,
+				initialValue: value
+			};
+			setValidityData(validityDataRef.current);
+		}
+		if (!nameProp && registration.name) {
+			setRegisteredName(registration.name);
+		}
+		setFilled(isFilled(value));
+		syncControlDisabled();
+		return function() {
+			var _activeControlRef_current2;
+			controlsRef.current.delete(source);
+			activeControlRef.current = getActiveControl();
+			activeValidationControlRef.current = void 0;
+			var _activeControlRef_current_controlRef_current2;
+			formControlRef.current = (_activeControlRef_current_controlRef_current2 = (_activeControlRef_current2 = activeControlRef.current) === null || _activeControlRef_current2 === void 0 ? void 0 : _activeControlRef_current2.controlRef.current) !== null && _activeControlRef_current_controlRef_current2 !== void 0 ? _activeControlRef_current_controlRef_current2 : null;
+			var next = activeControlRef.current;
+			var nextValue = getRegistrationValue(next);
+			valueRef.current = nextValue;
+			setCurrentValue(nextValue);
+			setFilled(isFilled(nextValue));
+			if (!nameProp) {
+				setRegisteredName(next === null || next === void 0 ? void 0 : next.name);
+			}
+			syncControlDisabled();
+		};
+	}, [
+		getActiveControl,
+		nameProp,
+		syncControlDisabled
+	]);
+	var onFocus = React.useCallback(function() {
+		setFocused(true);
+	}, []);
+	var onBlur = React.useCallback(function() {
+		var value = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : valueRef.current;
+		valueRef.current = value;
+		setCurrentValue(value);
+		setTouched(true);
+		setFocused(false);
+		if (validationMode === "onBlur") {
+			validateValue(value);
+		}
+	}, [validateValue, validationMode]);
+	var onChange = React.useCallback(function(value) {
+		valueRef.current = value;
+		setCurrentValue(value);
+		validationCommitterRef.current.invalidate();
+		if (debounceRef.current) {
+			clearTimeout(debounceRef.current);
+			debounceRef.current = void 0;
+		}
+		var nextDirty = !Object.is(value, initialValueRef.current);
+		dirtyRef.current = nextDirty;
+		setDirty(nextDirty);
+		setFilled(isFilled(value));
+		clearFormErrors(effectiveNameRef.current);
+		var validateOnChange = shouldValidateOnChange(validationMode, submitAttemptedRef.current);
+		if (validateOnChange) {
+			if (validationMode === "onChange" && validationDebounceTime > 0 && value !== "") {
+				debounceRef.current = setTimeout(function() {
+					validateValue(value, false, true);
+				}, validationDebounceTime);
+			} else {
+				validateValue(value, false, true);
+			}
+			return;
+		}
+		if (stateRef.current.valid === false) {
+			var required = Array.from(controlsRef.current.values()).some(function(registration) {
+				return registration.required && isEligibleRegistration(registration, formElementRef.current);
+			});
+			if (required && !isFilled(value) && dirtyRef.current) {
+				validateValue(value);
+				return;
+			}
+			clearCustomValidity();
+			publishValidity({
+				state: createDefaultValidityState(true),
+				error: "",
+				errors: [],
+				value,
+				initialValue: initialValueRef.current
+			});
+		}
+	}, [
+		clearFormErrors,
+		clearCustomValidity,
+		formElementRef,
+		publishValidity,
+		submitAttemptedRef,
+		validateValue,
+		validationDebounceTime,
+		validationMode
+	]);
+	var onDisabledChange = React.useCallback(function(nextDisabled) {
+		setControlDisabled(nextDisabled);
+	}, []);
+	React.useEffect(function() {
+		return function() {
+			var _validationCommitterRef_current;
+			(_validationCommitterRef_current = validationCommitterRef.current) === null || _validationCommitterRef_current === void 0 ? void 0 : _validationCommitterRef_current.invalidate();
+			if (debounceRef.current) {
+				clearTimeout(debounceRef.current);
+			}
+		};
+	}, []);
+	var formRegistration = React.useMemo(function() {
+		return {
+			controlRef: formControlRef,
+			validityData: formValidityDataRef.current,
+			get name() {
+				return stateRef.current.disabled ? void 0 : effectiveNameRef.current;
+			},
+			get controlId() {
+				var _activeValidationControlRef_current, _getRepresentativeControl;
+				var _activeValidationControlRef_current_id, _ref;
+				return (_ref = (_activeValidationControlRef_current_id = (_activeValidationControlRef_current = activeValidationControlRef.current) === null || _activeValidationControlRef_current === void 0 ? void 0 : _activeValidationControlRef_current.id) !== null && _activeValidationControlRef_current_id !== void 0 ? _activeValidationControlRef_current_id : (_getRepresentativeControl = getRepresentativeControl()) === null || _getRepresentativeControl === void 0 ? void 0 : _getRepresentativeControl.id) !== null && _ref !== void 0 ? _ref : association.controlId;
+			},
+			getValue() {
+				var _getRegistrationValue;
+				return (_getRegistrationValue = getRegistrationValue(getActiveControl())) !== null && _getRegistrationValue !== void 0 ? _getRegistrationValue : valueRef.current;
+			},
+			validate() {
+				var _getRegistrationValue;
+				validateValue((_getRegistrationValue = getRegistrationValue(getActiveControl())) !== null && _getRegistrationValue !== void 0 ? _getRegistrationValue : valueRef.current, true);
+			}
+		};
+	}, [
+		association.controlId,
+		getActiveControl,
+		getRepresentativeControl,
+		validateValue
+	]);
+	React.useEffect(function() {
+		return registerFormField(fieldId, formRegistration);
+	}, [
+		fieldId,
+		formRegistration,
+		registerFormField
+	]);
+	var rootContext = React.useMemo(function() {
+		return {
+			state,
+			validityData,
+			name: effectiveName,
+			rootDisabled: disabledProp,
+			registerControl,
+			onFocus,
+			onBlur,
+			onChange,
+			onDisabledChange
+		};
+	}, [
+		disabledProp,
+		effectiveName,
+		onBlur,
+		onChange,
+		onDisabledChange,
+		onFocus,
+		registerControl,
+		state,
+		validityData
+	]);
+	var controlContext = useControlContext(rootContext, association);
+	var styleState = getStyleState(state);
+	return /* @__PURE__ */ jsx(FieldStateContext.Provider, {
+		value: state,
+		children: /* @__PURE__ */ jsx(FieldRootContext.Provider, {
+			value: rootContext,
+			children: /* @__PURE__ */ jsx(AssociationContext.Provider, {
+				value: association,
+				children: /* @__PURE__ */ jsx(FieldControlContext.Provider, {
+					value: controlContext,
+					children: /* @__PURE__ */ jsx(FieldStyledContext.Provider, {
+						...styleState,
+						children: /* @__PURE__ */ jsx(FieldFrame, {
+							...fieldProps,
+							...getDataProps(state),
+							disabled,
+							ref: forwardedRef,
+							children
+						})
+					})
+				})
+			})
+		})
+	});
+});
+function usePartContexts() {
+	var root = React.useContext(FieldRootContext);
+	var association = React.useContext(AssociationContext);
+	var itemDisabled = React.useContext(FieldItemContext);
+	if (!root || !association) {
+		throw new Error("Field parts must be rendered inside <Field>.");
+	}
+	return {
+		root,
+		association,
+		itemDisabled
+	};
+}
+var FieldLabel = createStyledHOC(FieldLabelFrame, function FieldLabel2(param, forwardedRef) {
+	var { id: idProp, children, onPress, onMouseDown, ...labelProps } = param;
+	var { root, association, itemDisabled } = usePartContexts();
+	var generatedId = React.useId().replace(/:/g, "");
+	var id = idProp !== null && idProp !== void 0 ? idProp : `field-label-${generatedId}`;
+	var text = getText(children);
+	var disabled = root.state.disabled || itemDisabled;
+	useIsomorphicLayoutEffect(function() {
+		return association.registerLabel(id, text);
+	}, [
+		association.registerLabel,
+		id,
+		text
+	]);
+	return /* @__PURE__ */ jsx(FieldLabelFrame, {
+		...labelProps,
+		...getDataProps(root.state, disabled),
+		id,
+		ref: forwardedRef,
+		...isWeb ? { htmlFor: association.controlId } : void 0,
+		...!isWeb && disabled ? { accessibilityState: { disabled: true } } : void 0,
+		onMouseDown: function(event) {
+			onMouseDown === null || onMouseDown === void 0 ? void 0 : onMouseDown(event);
+			if (!event.defaultPrevented && event.detail > 1) {
+				event.preventDefault();
+			}
+		},
+		onPress: function(event) {
+			onPress === null || onPress === void 0 ? void 0 : onPress(event);
+			if (!isWeb && !(event === null || event === void 0 ? void 0 : event.defaultPrevented)) {
+				focusFocusable(association.controlId);
+			}
+		},
+		children
+	});
+});
+var FieldDescription = createStyledHOC(FieldDescriptionFrame, function FieldDescription2(param, forwardedRef) {
+	var { id: idProp, children, ...descriptionProps } = param;
+	var { root, association, itemDisabled } = usePartContexts();
+	var generatedId = React.useId().replace(/:/g, "");
+	var id = idProp !== null && idProp !== void 0 ? idProp : `field-description-${generatedId}`;
+	var text = getText(children);
+	var disabled = root.state.disabled || itemDisabled;
+	useIsomorphicLayoutEffect(function() {
+		return association.registerMessage(id, text);
+	}, [
+		association.registerMessage,
+		id,
+		text
+	]);
+	return /* @__PURE__ */ jsx(FieldDescriptionFrame, {
+		...descriptionProps,
+		...getDataProps(root.state, disabled),
+		id,
+		ref: forwardedRef,
+		children
+	});
+});
+var FieldError = createStyledHOC(FieldErrorFrame, function FieldError2(param, forwardedRef) {
+	var { id: idProp, children, match, ...errorProps } = param;
+	var { root, association, itemDisabled } = usePartContexts();
+	var generatedId = React.useId().replace(/:/g, "");
+	var id = idProp !== null && idProp !== void 0 ? idProp : `field-error-${generatedId}`;
+	var disabled = root.state.disabled || itemDisabled;
+	var rendered = match === true || !disabled && (typeof match === "string" ? Boolean(root.validityData.state[match]) : root.state.valid === false);
+	var message = children !== null && children !== void 0 ? children : root.state.errors.join("\n");
+	var text = getText(message);
+	useIsomorphicLayoutEffect(function() {
+		if (!rendered) {
+			return;
+		}
+		return association.registerMessage(id, text);
+	}, [
+		association.registerMessage,
+		id,
+		rendered,
+		text
+	]);
+	if (!rendered) {
+		return null;
+	}
+	return /* @__PURE__ */ jsx(FieldErrorFrame, {
+		...errorProps,
+		...getDataProps(root.state, disabled),
+		id,
+		ref: forwardedRef,
+		children: message
+	});
+});
+var FieldItem = createStyledHOC(FieldItemFrame, function FieldItem2(param, forwardedRef) {
+	var { disabled: disabledProp = false, children, ...itemProps } = param;
+	var root = React.useContext(FieldRootContext);
+	var parentAssociation = React.useContext(AssociationContext);
+	var reactId = React.useId().replace(/:/g, "");
+	var association = useAssociation(`field-item-${reactId}`, parentAssociation);
+	if (!root || !parentAssociation) {
+		throw new Error("Field.Item must be rendered inside <Field>.");
+	}
+	var disabled = root.state.disabled || disabledProp;
+	var controlContext = useControlContext(root, association, disabledProp, true);
+	var styleState = getStyleState(root.state, disabled);
+	return /* @__PURE__ */ jsx(FieldItemContext.Provider, {
+		value: disabledProp,
+		children: /* @__PURE__ */ jsx(AssociationContext.Provider, {
+			value: association,
+			children: /* @__PURE__ */ jsx(FieldControlContext.Provider, {
+				value: controlContext,
+				children: /* @__PURE__ */ jsx(FieldStyledContext.Provider, {
+					...styleState,
+					children: /* @__PURE__ */ jsx(FieldItemFrame, {
+						...itemProps,
+						...getDataProps(root.state, disabled),
+						disabled,
+						ref: forwardedRef,
+						children
+					})
+				})
+			})
+		})
+	});
+});
+var Field2 = withStaticProperties(FieldComponent, {
+	Label: FieldLabel,
+	Description: FieldDescription,
+	Error: FieldError,
+	Item: FieldItem,
+	useFieldState,
+	useFieldControl
+});
+
+export { Field2 as Field, FieldDescriptionFrame, FieldErrorFrame, FieldFrame, FieldItemFrame, FieldLabelFrame };
+//# sourceMappingURL=Field.native.js.map