@octanejs/hook-form 0.1.0

package/src/logic/skipValidation.ts

@@ -0,0 +1,21 @@
+// Vendored from react-hook-form@7.81.0 src/logic/skipValidation.ts (octane port).
+import type { ValidationModeFlags } from '../types';
+
+export default (
+	isBlurEvent: boolean,
+	isTouched: boolean,
+	isSubmitted: boolean,
+	reValidateMode: Pick<ValidationModeFlags, 'isOnBlur' | 'isOnChange'>,
+	mode: Partial<ValidationModeFlags>,
+) => {
+	if (mode.isOnAll) {
+		return false;
+	} else if (!isSubmitted && mode.isOnTouch) {
+		return !(isTouched || isBlurEvent);
+	} else if (isSubmitted ? reValidateMode.isOnBlur : mode.isOnBlur) {
+		return !isBlurEvent;
+	} else if (isSubmitted ? reValidateMode.isOnChange : mode.isOnChange) {
+		return isBlurEvent;
+	}
+	return true;
+};

package/src/logic/unsetEmptyArray.ts

@@ -0,0 +1,6 @@
+// Vendored from react-hook-form@7.81.0 src/logic/unsetEmptyArray.ts (octane port).
+import compact from '../utils/compact';
+import get from '../utils/get';
+import unset from '../utils/unset';
+
+export default <T>(ref: T, name: string) => !compact(get(ref, name)).length && unset(ref, name);

package/src/logic/updateFieldArrayRootError.ts

@@ -0,0 +1,17 @@
+// Vendored from react-hook-form@7.81.0 src/logic/updateFieldArrayRootError.ts (octane port).
+import { ROOT_ERROR_TYPE } from '../constants';
+import type { FieldError, FieldErrors, FieldValues, InternalFieldName } from '../types';
+import get from '../utils/get';
+import set from '../utils/set';
+
+export default <T extends FieldValues = FieldValues>(
+	errors: FieldErrors<T>,
+	error: Partial<Record<string, FieldError>>,
+	name: InternalFieldName,
+): FieldErrors<T> => {
+	const existingErrors = get(errors, name);
+	const fieldArrayErrors = Array.isArray(existingErrors) ? existingErrors : [];
+	set(fieldArrayErrors, ROOT_ERROR_TYPE, error[name]);
+	set(errors, name, fieldArrayErrors);
+	return errors;
+};

package/src/logic/validateField.ts

@@ -0,0 +1,273 @@
+// Vendored from react-hook-form@7.81.0 src/logic/validateField.ts (octane port).
+import { INPUT_VALIDATION_RULES } from '../constants';
+import type {
+	Field,
+	FieldError,
+	FieldValues,
+	InternalFieldErrors,
+	InternalNameSet,
+	MaxType,
+	Message,
+	MinType,
+	NativeFieldValue,
+} from '../types';
+import get from '../utils/get';
+import isBoolean from '../utils/isBoolean';
+import isCheckBoxInput from '../utils/isCheckBoxInput';
+import isEmptyObject from '../utils/isEmptyObject';
+import isFileInput from '../utils/isFileInput';
+import isFunction from '../utils/isFunction';
+import isHTMLElement from '../utils/isHTMLElement';
+import isNullOrUndefined from '../utils/isNullOrUndefined';
+import isObject from '../utils/isObject';
+import isRadioInput from '../utils/isRadioInput';
+import isRegex from '../utils/isRegex';
+import isString from '../utils/isString';
+import isUndefined from '../utils/isUndefined';
+
+import appendErrors from './appendErrors';
+import getCheckboxValue from './getCheckboxValue';
+import getRadioValue from './getRadioValue';
+import getValidateError from './getValidateError';
+import getValueAndMessage from './getValueAndMessage';
+
+export default async <T extends FieldValues>(
+	field: Field,
+	disabledFieldNames: InternalNameSet,
+	formValues: T,
+	validateAllFieldCriteria: boolean,
+	shouldUseNativeValidation?: boolean,
+	isFieldArray?: boolean,
+): Promise<InternalFieldErrors> => {
+	const {
+		ref,
+		refs,
+		required,
+		maxLength,
+		minLength,
+		min,
+		max,
+		pattern,
+		validate,
+		name,
+		valueAsNumber,
+		mount,
+	} = field._f;
+	const inputValue: NativeFieldValue = get(formValues, name);
+	if (!mount || disabledFieldNames.has(name)) {
+		return {};
+	}
+	const inputRef: HTMLInputElement = refs ? refs[0] : (ref as HTMLInputElement);
+	const setCustomValidity = (message?: string | boolean) => {
+		if (shouldUseNativeValidation && inputRef.reportValidity) {
+			const validityMessage = isBoolean(message) ? '' : message || '';
+			if (refs) {
+				refs.forEach((ref) => ref.setCustomValidity(validityMessage));
+			} else {
+				inputRef.setCustomValidity(validityMessage);
+			}
+			inputRef.reportValidity();
+		}
+	};
+	const error: InternalFieldErrors = {};
+	const isRadio = isRadioInput(ref);
+	const isCheckBox = isCheckBoxInput(ref);
+	const isRadioOrCheckbox = isRadio || isCheckBox;
+	const isEmpty =
+		((valueAsNumber || isFileInput(ref)) && isUndefined(ref.value) && isUndefined(inputValue)) ||
+		(isHTMLElement(ref) && ref.value === '') ||
+		inputValue === '' ||
+		(Array.isArray(inputValue) && !inputValue.length);
+	const appendErrorsCurry = appendErrors.bind(null, name, validateAllFieldCriteria, error);
+	const getMinMaxMessage = (
+		exceedMax: boolean,
+		maxLengthMessage: Message,
+		minLengthMessage: Message,
+		maxType: MaxType = INPUT_VALIDATION_RULES.maxLength,
+		minType: MinType = INPUT_VALIDATION_RULES.minLength,
+	) => {
+		const message = exceedMax ? maxLengthMessage : minLengthMessage;
+		error[name] = {
+			type: exceedMax ? maxType : minType,
+			message,
+			ref,
+			...appendErrorsCurry(exceedMax ? maxType : minType, message),
+		};
+	};
+
+	if (
+		isFieldArray
+			? !Array.isArray(inputValue) || !inputValue.length
+			: required &&
+				((!isRadioOrCheckbox && (isEmpty || isNullOrUndefined(inputValue))) ||
+					(isBoolean(inputValue) && !inputValue) ||
+					(isCheckBox && !getCheckboxValue(refs).isValid) ||
+					(isRadio && !getRadioValue(refs).isValid))
+	) {
+		const { value, message } = isString(required)
+			? { value: !!required, message: required }
+			: getValueAndMessage(required);
+
+		if (value) {
+			error[name] = {
+				type: INPUT_VALIDATION_RULES.required,
+				message,
+				ref: inputRef,
+				...appendErrorsCurry(INPUT_VALIDATION_RULES.required, message),
+			};
+			if (!validateAllFieldCriteria) {
+				setCustomValidity(message);
+				return error;
+			}
+		}
+	}
+
+	if (!isEmpty && (!isNullOrUndefined(min) || !isNullOrUndefined(max))) {
+		let exceedMax;
+		let exceedMin;
+		const maxOutput = getValueAndMessage(max);
+		const minOutput = getValueAndMessage(min);
+
+		if (!isNullOrUndefined(inputValue) && !isNaN(inputValue as number)) {
+			const valueNumber =
+				(ref as HTMLInputElement).valueAsNumber || (inputValue ? +inputValue : inputValue);
+			if (!isNullOrUndefined(maxOutput.value)) {
+				exceedMax = valueNumber > maxOutput.value;
+			}
+			if (!isNullOrUndefined(minOutput.value)) {
+				exceedMin = valueNumber < minOutput.value;
+			}
+		} else {
+			const valueDate = (ref as HTMLInputElement).valueAsDate || new Date(inputValue as string);
+			const convertTimeToDate = (time: unknown) => new Date(new Date().toDateString() + ' ' + time);
+			const isTime = ref.type == 'time';
+			const isWeek = ref.type == 'week';
+
+			if (isString(maxOutput.value) && inputValue) {
+				exceedMax = isTime
+					? convertTimeToDate(inputValue) > convertTimeToDate(maxOutput.value)
+					: isWeek
+						? inputValue > maxOutput.value
+						: valueDate > new Date(maxOutput.value);
+			}
+
+			if (isString(minOutput.value) && inputValue) {
+				exceedMin = isTime
+					? convertTimeToDate(inputValue) < convertTimeToDate(minOutput.value)
+					: isWeek
+						? inputValue < minOutput.value
+						: valueDate < new Date(minOutput.value);
+			}
+		}
+
+		if (exceedMax || exceedMin) {
+			getMinMaxMessage(
+				!!exceedMax,
+				maxOutput.message,
+				minOutput.message,
+				INPUT_VALIDATION_RULES.max,
+				INPUT_VALIDATION_RULES.min,
+			);
+			if (!validateAllFieldCriteria) {
+				setCustomValidity(error[name]!.message);
+				return error;
+			}
+		}
+	}
+
+	if (
+		(maxLength || minLength) &&
+		!isEmpty &&
+		(isString(inputValue) || (isFieldArray && Array.isArray(inputValue)))
+	) {
+		const maxLengthOutput = getValueAndMessage(maxLength);
+		const minLengthOutput = getValueAndMessage(minLength);
+		const exceedMax =
+			!isNullOrUndefined(maxLengthOutput.value) && inputValue.length > +maxLengthOutput.value;
+		const exceedMin =
+			!isNullOrUndefined(minLengthOutput.value) && inputValue.length < +minLengthOutput.value;
+
+		if (exceedMax || exceedMin) {
+			getMinMaxMessage(exceedMax, maxLengthOutput.message, minLengthOutput.message);
+			if (!validateAllFieldCriteria) {
+				setCustomValidity(error[name]!.message);
+				return error;
+			}
+		}
+	}
+
+	if (pattern && !isEmpty && isString(inputValue)) {
+		const { value: patternValue, message } = getValueAndMessage(pattern);
+
+		if (isRegex(patternValue) && !inputValue.match(patternValue)) {
+			error[name] = {
+				type: INPUT_VALIDATION_RULES.pattern,
+				message,
+				ref,
+				...appendErrorsCurry(INPUT_VALIDATION_RULES.pattern, message),
+			};
+			if (!validateAllFieldCriteria) {
+				setCustomValidity(message);
+				return error;
+			}
+		}
+	}
+
+	if (validate) {
+		if (isFunction(validate)) {
+			const result = await validate(inputValue, formValues);
+			const validateError = getValidateError(result, inputRef);
+
+			if (validateError) {
+				error[name] = {
+					...validateError,
+					...appendErrorsCurry(INPUT_VALIDATION_RULES.validate, validateError.message),
+				};
+				if (!validateAllFieldCriteria) {
+					setCustomValidity(validateError.message);
+					return error;
+				}
+			}
+		} else if (isObject(validate)) {
+			let validationResult = {} as FieldError;
+
+			for (const key in validate) {
+				if (!isEmptyObject(validationResult) && !validateAllFieldCriteria) {
+					break;
+				}
+
+				const validateError = getValidateError(
+					await validate[key](inputValue, formValues),
+					inputRef,
+					key,
+				);
+
+				if (validateError) {
+					validationResult = {
+						...validateError,
+						...appendErrorsCurry(key, validateError.message),
+					};
+
+					setCustomValidity(validateError.message);
+
+					if (validateAllFieldCriteria) {
+						error[name] = validationResult;
+					}
+				}
+			}
+
+			if (!isEmptyObject(validationResult)) {
+				error[name] = {
+					ref: inputRef,
+					...validationResult,
+				};
+				if (!validateAllFieldCriteria) {
+					return error;
+				}
+			}
+		}
+	}
+
+	setCustomValidity(true);
+	return error;
+};

package/src/types/controller.ts

@@ -0,0 +1,98 @@
+// Vendored from react-hook-form@7.81.0 src/types/controller.ts.
+// octane: upstream's React.ReactElement return becomes `unknown` (any octane
+// renderable), and `onChange` becomes `onInput` — octane events are native, so
+// the per-keystroke handler is the platform `input` event.
+import type {
+	Control,
+	FieldError,
+	FieldPath,
+	FieldPathValue,
+	FieldValues,
+	Noop,
+	RefCallBack,
+	UseFormStateReturn,
+} from './';
+import type { RegisterOptions } from './validator';
+
+export type ControllerFieldState = {
+	invalid: boolean;
+	isTouched: boolean;
+	isDirty: boolean;
+	isValidating: boolean;
+	error?: FieldError;
+};
+
+export type ControllerRenderProps<
+	TFieldValues extends FieldValues = FieldValues,
+	TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,
+> = {
+	onInput: (...event: any[]) => void;
+	onBlur: Noop;
+	value: FieldPathValue<TFieldValues, TName>;
+	disabled?: boolean;
+	name: TName;
+	ref: RefCallBack;
+};
+
+export type UseControllerProps<
+	TFieldValues extends FieldValues = FieldValues,
+	TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,
+	TTransformedValues = TFieldValues,
+> = {
+	name: TName;
+	rules?: Omit<
+		RegisterOptions<TFieldValues, TName>,
+		'valueAsNumber' | 'valueAsDate' | 'setValueAs' | 'disabled'
+	>;
+	shouldUnregister?: boolean;
+	defaultValue?: FieldPathValue<TFieldValues, TName>;
+	control?: Control<TFieldValues, any, TTransformedValues>;
+	disabled?: boolean;
+	exact?: boolean;
+};
+
+export type UseControllerReturn<
+	TFieldValues extends FieldValues = FieldValues,
+	TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,
+> = {
+	field: ControllerRenderProps<TFieldValues, TName>;
+	formState: UseFormStateReturn<TFieldValues>;
+	fieldState: ControllerFieldState;
+};
+
+/**
+ * Render function to provide the control for the field.
+ *
+ * @returns all the event handlers, and relevant field and form state.
+ *
+ * @example
+ * ```tsx
+ * const { field, fieldState, formState } = useController();
+ *
+ * <Controller
+ *   render={({ field, formState, fieldState }) => ({
+ *     <input
+ *       onInput={field.onInput}
+ *       onBlur={field.onBlur}
+ *       name={field.name}
+ *       ref={field.ref} // optional for focus management
+ *     />
+ *   })}
+ * />
+ * ```
+ */
+export type ControllerProps<
+	TFieldValues extends FieldValues = FieldValues,
+	TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,
+	TTransformedValues = TFieldValues,
+> = {
+	render: ({
+		field,
+		fieldState,
+		formState,
+	}: {
+		field: ControllerRenderProps<TFieldValues, TName>;
+		fieldState: ControllerFieldState;
+		formState: UseFormStateReturn<TFieldValues>;
+	}) => unknown;
+} & UseControllerProps<TFieldValues, TName, TTransformedValues>;

package/src/types/errors.ts

@@ -0,0 +1,56 @@
+// Vendored from react-hook-form@7.81.0 src/types/errors.ts (octane port).
+import type { FieldValues, InternalFieldName, Ref } from './fields';
+import type { BrowserNativeObject, IsAny, LiteralUnion, Merge } from './utils';
+import type { RegisterOptions, ValidateResult } from './validator';
+
+export type Message = string;
+
+export type MultipleFieldErrors = {
+	[K in keyof RegisterOptions]?: ValidateResult;
+} & {
+	[key: string]: ValidateResult;
+};
+
+export type FieldError = {
+	type: LiteralUnion<keyof RegisterOptions, string>;
+	root?: FieldError;
+	ref?: Ref;
+	types?: MultipleFieldErrors;
+	message?: Message;
+};
+
+export type ErrorOption = {
+	message?: Message;
+	type?: LiteralUnion<keyof RegisterOptions, string>;
+	types?: MultipleFieldErrors;
+};
+
+export type DeepRequired<T> = T extends BrowserNativeObject | Blob
+	? T
+	: {
+			[K in keyof T]-?: NonNullable<DeepRequired<T[K]>>;
+		};
+
+export type FieldErrorsImpl<T extends FieldValues = FieldValues> = {
+	[K in keyof T]?: T[K] extends BrowserNativeObject | Blob
+		? FieldError
+		: K extends 'root' | `root.${string}`
+			? GlobalError
+			: T[K] extends object
+				? Merge<FieldError, FieldErrorsImpl<T[K]>>
+				: FieldError;
+};
+
+export type GlobalError = Partial<{
+	type: string | number;
+	message: Message;
+}>;
+
+export type FieldErrors<T extends FieldValues = FieldValues> = Partial<
+	FieldValues extends IsAny<FieldValues> ? any : FieldErrorsImpl<DeepRequired<T>>
+> & {
+	root?: Record<string, GlobalError> & GlobalError;
+	form?: GlobalError;
+};
+
+export type InternalFieldErrors = Partial<Record<InternalFieldName, FieldError>>;

package/src/types/events.ts

@@ -0,0 +1,26 @@
+// Vendored from react-hook-form@7.81.0 src/types/events.ts (octane port).
+export type EventType =
+	| 'focus'
+	| 'blur'
+	| 'change'
+	| 'changeText'
+	| 'valueChange'
+	| 'contentSizeChange'
+	| 'endEditing'
+	| 'keyPress'
+	| 'submitEditing'
+	| 'layout'
+	| 'selectionChange'
+	| 'longPress'
+	| 'press'
+	| 'pressIn'
+	| 'pressOut'
+	| 'momentumScrollBegin'
+	| 'momentumScrollEnd'
+	| 'scroll'
+	| 'scrollBeginDrag'
+	| 'scrollEndDrag'
+	| 'load'
+	| 'error'
+	| 'progress'
+	| 'custom';