formstand 0.10.0 → 0.12.0

package/dist/index.d.cts

@@ -282,6 +282,7 @@ type FieldArrayFormApi = Readonly<{
     arrayInsert(path: string, index: number, item: unknown): void;
     arrayMove(path: string, from: number, to: number): void;
     arraySwap(path: string, a: number, b: number): void;
+    validateField?(path: string): FieldValidationResult;
 }>;
 type FieldArrayEntry<TItem> = Readonly<{
     id: string;
@@ -398,6 +399,15 @@ type NumberFieldProps<F extends FieldFormApi = FieldFormApi> = Readonly<{
     placeholder?: string;
     ref?: FieldRef<HTMLInputElement>;
 }>;
+type NumberInputBinding = Readonly<{
+    name: string;
+    value: string;
+    inputMode: "decimal";
+    "aria-invalid": true | undefined;
+    onChange: (e: ChangeEvent<HTMLInputElement>) => void;
+    onBlur: () => void;
+}>;
+declare const useNumberInput: (field: UseFieldReturn<number | null | undefined>) => NumberInputBinding;
 declare const NumberField: <F extends FieldFormApi>({ form, path, label, placeholder, ref, }: NumberFieldProps<F>) => react.JSX.Element;
 type CheckboxFieldProps<F extends FieldFormApi = FieldFormApi> = Readonly<{
     form: F;
@@ -488,4 +498,4 @@ declare const dateInputProps: <T extends Date | null | undefined>(field: UseFiel
 declare const checkboxProps: <T extends boolean | null | undefined>(field: UseFieldReturn<T>) => CheckboxProps;
 declare const selectProps: <T extends string | null | undefined>(field: UseFieldReturn<T>) => SelectProps;
 
-export { type BoolMap, type BoundUseField, type BoundUseFieldArray, type BoundUseFlag, type BoundUseSelector, CheckboxField, type CheckboxFieldProps, type CheckboxProps, type CreateFormOptions, DateField, type DateFieldProps, type DateInputProps, type DefaultPathDepth, type ErrorMap, type FieldArrayEntry, type FieldArrayFormApi, type FieldFormApi, type FieldPath, type FieldPathArg, type FieldRef, type FieldSnapshot, type FieldValidationResult, type FieldValue, type FieldsValidationResult, type Form, type FormContextApi, type FormHooks, type FormProviderProps, type FormState, type FormStateApi, type InvalidSubmitHandler, NumberField, type NumberFieldProps, type NumberInputProps, type ParsedDateText, type ParsedNumberText, type PathDepth, type PathSegment, type PathsOf, type PersistHandle, type PersistOptions, type PersistStorage, type ReadonlyStoreApi, type ResetOptions, SelectField, type SelectFieldOption, type SelectFieldProps, type SelectProps, type SettledFieldValidationResult, type SettledFieldsValidationResult, type SettledValidationResult, type SubmitHandler, type SubmitOptions, type SubmitResult, TextField, type TextFieldProps, type TextInputProps, type UseFieldArrayReturn, type UseFieldOptions, type UseFieldReturn, type ValidationMode, type ValidationResult, type ValidationTrigger, checkboxProps, createForm, createFormContext, createFormHooks, dateInputProps, dateToInputText, emptyValueForSchema, flattenIssues, focusField, focusFirstError, getAtPath, hasFieldError, isAsyncRequiredError, numberInputProps, numberToInputText, parseDateText, parseNumberText, parsePath, persistForm, selectProps, setAtPath, shouldValidateOn, textInputProps, useField, useFieldArray, useForm, useFormError, useFormSelector, useFormSelectorShallow, useIsDirty, useIsSubmitting, useIsValid, useSubmitCount, useVariantField, validateAsync, validateSync };
+export { type BoolMap, type BoundUseField, type BoundUseFieldArray, type BoundUseFlag, type BoundUseSelector, CheckboxField, type CheckboxFieldProps, type CheckboxProps, type CreateFormOptions, DateField, type DateFieldProps, type DateInputProps, type DefaultPathDepth, type ErrorMap, type FieldArrayEntry, type FieldArrayFormApi, type FieldFormApi, type FieldPath, type FieldPathArg, type FieldRef, type FieldSnapshot, type FieldValidationResult, type FieldValue, type FieldsValidationResult, type Form, type FormContextApi, type FormHooks, type FormProviderProps, type FormState, type FormStateApi, type InvalidSubmitHandler, NumberField, type NumberFieldProps, type NumberInputBinding, type NumberInputProps, type ParsedDateText, type ParsedNumberText, type PathDepth, type PathSegment, type PathsOf, type PersistHandle, type PersistOptions, type PersistStorage, type ReadonlyStoreApi, type ResetOptions, SelectField, type SelectFieldOption, type SelectFieldProps, type SelectProps, type SettledFieldValidationResult, type SettledFieldsValidationResult, type SettledValidationResult, type SubmitHandler, type SubmitOptions, type SubmitResult, TextField, type TextFieldProps, type TextInputProps, type UseFieldArrayReturn, type UseFieldOptions, type UseFieldReturn, type ValidationMode, type ValidationResult, type ValidationTrigger, checkboxProps, createForm, createFormContext, createFormHooks, dateInputProps, dateToInputText, emptyValueForSchema, flattenIssues, focusField, focusFirstError, getAtPath, hasFieldError, isAsyncRequiredError, numberInputProps, numberToInputText, parseDateText, parseNumberText, parsePath, persistForm, selectProps, setAtPath, shouldValidateOn, textInputProps, useField, useFieldArray, useForm, useFormError, useFormSelector, useFormSelectorShallow, useIsDirty, useIsSubmitting, useIsValid, useNumberInput, useSubmitCount, useVariantField, validateAsync, validateSync };

package/dist/index.d.ts

@@ -282,6 +282,7 @@ type FieldArrayFormApi = Readonly<{
     arrayInsert(path: string, index: number, item: unknown): void;
     arrayMove(path: string, from: number, to: number): void;
     arraySwap(path: string, a: number, b: number): void;
+    validateField?(path: string): FieldValidationResult;
 }>;
 type FieldArrayEntry<TItem> = Readonly<{
     id: string;
@@ -398,6 +399,15 @@ type NumberFieldProps<F extends FieldFormApi = FieldFormApi> = Readonly<{
     placeholder?: string;
     ref?: FieldRef<HTMLInputElement>;
 }>;
+type NumberInputBinding = Readonly<{
+    name: string;
+    value: string;
+    inputMode: "decimal";
+    "aria-invalid": true | undefined;
+    onChange: (e: ChangeEvent<HTMLInputElement>) => void;
+    onBlur: () => void;
+}>;
+declare const useNumberInput: (field: UseFieldReturn<number | null | undefined>) => NumberInputBinding;
 declare const NumberField: <F extends FieldFormApi>({ form, path, label, placeholder, ref, }: NumberFieldProps<F>) => react.JSX.Element;
 type CheckboxFieldProps<F extends FieldFormApi = FieldFormApi> = Readonly<{
     form: F;
@@ -488,4 +498,4 @@ declare const dateInputProps: <T extends Date | null | undefined>(field: UseFiel
 declare const checkboxProps: <T extends boolean | null | undefined>(field: UseFieldReturn<T>) => CheckboxProps;
 declare const selectProps: <T extends string | null | undefined>(field: UseFieldReturn<T>) => SelectProps;
 
-export { type BoolMap, type BoundUseField, type BoundUseFieldArray, type BoundUseFlag, type BoundUseSelector, CheckboxField, type CheckboxFieldProps, type CheckboxProps, type CreateFormOptions, DateField, type DateFieldProps, type DateInputProps, type DefaultPathDepth, type ErrorMap, type FieldArrayEntry, type FieldArrayFormApi, type FieldFormApi, type FieldPath, type FieldPathArg, type FieldRef, type FieldSnapshot, type FieldValidationResult, type FieldValue, type FieldsValidationResult, type Form, type FormContextApi, type FormHooks, type FormProviderProps, type FormState, type FormStateApi, type InvalidSubmitHandler, NumberField, type NumberFieldProps, type NumberInputProps, type ParsedDateText, type ParsedNumberText, type PathDepth, type PathSegment, type PathsOf, type PersistHandle, type PersistOptions, type PersistStorage, type ReadonlyStoreApi, type ResetOptions, SelectField, type SelectFieldOption, type SelectFieldProps, type SelectProps, type SettledFieldValidationResult, type SettledFieldsValidationResult, type SettledValidationResult, type SubmitHandler, type SubmitOptions, type SubmitResult, TextField, type TextFieldProps, type TextInputProps, type UseFieldArrayReturn, type UseFieldOptions, type UseFieldReturn, type ValidationMode, type ValidationResult, type ValidationTrigger, checkboxProps, createForm, createFormContext, createFormHooks, dateInputProps, dateToInputText, emptyValueForSchema, flattenIssues, focusField, focusFirstError, getAtPath, hasFieldError, isAsyncRequiredError, numberInputProps, numberToInputText, parseDateText, parseNumberText, parsePath, persistForm, selectProps, setAtPath, shouldValidateOn, textInputProps, useField, useFieldArray, useForm, useFormError, useFormSelector, useFormSelectorShallow, useIsDirty, useIsSubmitting, useIsValid, useSubmitCount, useVariantField, validateAsync, validateSync };
+export { type BoolMap, type BoundUseField, type BoundUseFieldArray, type BoundUseFlag, type BoundUseSelector, CheckboxField, type CheckboxFieldProps, type CheckboxProps, type CreateFormOptions, DateField, type DateFieldProps, type DateInputProps, type DefaultPathDepth, type ErrorMap, type FieldArrayEntry, type FieldArrayFormApi, type FieldFormApi, type FieldPath, type FieldPathArg, type FieldRef, type FieldSnapshot, type FieldValidationResult, type FieldValue, type FieldsValidationResult, type Form, type FormContextApi, type FormHooks, type FormProviderProps, type FormState, type FormStateApi, type InvalidSubmitHandler, NumberField, type NumberFieldProps, type NumberInputBinding, type NumberInputProps, type ParsedDateText, type ParsedNumberText, type PathDepth, type PathSegment, type PathsOf, type PersistHandle, type PersistOptions, type PersistStorage, type ReadonlyStoreApi, type ResetOptions, SelectField, type SelectFieldOption, type SelectFieldProps, type SelectProps, type SettledFieldValidationResult, type SettledFieldsValidationResult, type SettledValidationResult, type SubmitHandler, type SubmitOptions, type SubmitResult, TextField, type TextFieldProps, type TextInputProps, type UseFieldArrayReturn, type UseFieldOptions, type UseFieldReturn, type ValidationMode, type ValidationResult, type ValidationTrigger, checkboxProps, createForm, createFormContext, createFormHooks, dateInputProps, dateToInputText, emptyValueForSchema, flattenIssues, focusField, focusFirstError, getAtPath, hasFieldError, isAsyncRequiredError, numberInputProps, numberToInputText, parseDateText, parseNumberText, parsePath, persistForm, selectProps, setAtPath, shouldValidateOn, textInputProps, useField, useFieldArray, useForm, useFormError, useFormSelector, useFormSelectorShallow, useIsDirty, useIsSubmitting, useIsValid, useNumberInput, useSubmitCount, useVariantField, validateAsync, validateSync };

package/dist/index.js

@@ -1,7 +1,7 @@
 import { createStore } from 'zustand/vanilla';
 import { devtools } from 'zustand/middleware';
 import { z } from 'zod';
-import { useRef, useEffect, createContext, useMemo, useCallback, useContext, useId, useState } from 'react';
+import { useRef, useEffect, createContext, useMemo, useCallback, useState, useContext, useId } from 'react';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { useStore } from 'zustand/react';
 import { useShallow } from 'zustand/react/shallow';
@@ -1473,25 +1473,52 @@ function useFieldArray(form, pathArg) {
   const items = slice.items;
   const error = slice.error;
   const ids = deriveIds(form.store, path, items).ids;
+  const revalidate = useCallback(() => {
+    const state = form.store.getState();
+    if (shouldValidateOn(
+      "change",
+      state.mode,
+      state.reValidateMode,
+      state.submitCount > 0,
+      state.touched[path] ?? false
+    )) {
+      form.validateField?.(path);
+    }
+  }, [form, path]);
   const push = useCallback(
-    (item) => form.arrayPush(path, item),
-    [form, path]
+    (item) => {
+      form.arrayPush(path, item);
+      revalidate();
+    },
+    [form, path, revalidate]
   );
   const remove = useCallback(
-    (index) => form.arrayRemove(path, index),
-    [form, path]
+    (index) => {
+      form.arrayRemove(path, index);
+      revalidate();
+    },
+    [form, path, revalidate]
   );
   const insert = useCallback(
-    (index, item) => form.arrayInsert(path, index, item),
-    [form, path]
+    (index, item) => {
+      form.arrayInsert(path, index, item);
+      revalidate();
+    },
+    [form, path, revalidate]
   );
   const move = useCallback(
-    (from, to) => form.arrayMove(path, from, to),
-    [form, path]
+    (from, to) => {
+      form.arrayMove(path, from, to);
+      revalidate();
+    },
+    [form, path, revalidate]
   );
   const swap = useCallback(
-    (a, b) => form.arraySwap(path, a, b),
-    [form, path]
+    (a, b) => {
+      form.arraySwap(path, a, b);
+      revalidate();
+    },
+    [form, path, revalidate]
   );
   const fields = useMemo(
     () => items.map((value, index) => ({
@@ -1932,6 +1959,24 @@ var nameMatchesAny = (el, paths) => {
   const name = el.getAttribute("name");
   return name !== null && paths.some((p) => isPathOrChild(name, p));
 };
+var cssQuoted = (value) => `"${value.replace(/[\\"]/g, (ch) => `\\${ch}`).replace(
+  /[\x00-\x1f\x7f]/g,
+  (ch) => `\\${ch.codePointAt(0).toString(16)} `
+)}"`;
+var idMatches = (scope, path) => path === "" ? [] : [...scope.querySelectorAll(`[id=${cssQuoted(path)}]`)];
+var inDomOrder = (els) => [...els].sort(
+  (a, b) => a === b ? 0 : (a.compareDocumentPosition(b) & Node.DOCUMENT_POSITION_FOLLOWING) !== 0 ? -1 : 1
+);
+var pathCandidates = (scope, paths) => {
+  const controls = namedControls(scope);
+  const named = controls.filter((el) => nameMatchesAny(el, paths));
+  const focusableControls = controls.filter(isFocusCandidate);
+  const unnamedPaths = paths.filter(
+    (p) => !focusableControls.some((el) => nameMatchesAny(el, [p]))
+  );
+  const byId = unnamedPaths.flatMap((p) => idMatches(scope, p));
+  return inDomOrder([.../* @__PURE__ */ new Set([...named, ...byId])]);
+};
 var focusFirstError = (errors, root) => {
   const scope = root ?? document;
   const erroredPaths = Object.keys(errors).filter(
@@ -1939,18 +1984,18 @@ var focusFirstError = (errors, root) => {
   );
   const hasRootError = (errors[""]?.length ?? 0) > 0;
   const controls = namedControls(scope);
-  const fieldMatches = controls.filter((el) => nameMatchesAny(el, erroredPaths)).filter(isFocusCandidate);
+  const fieldMatches = pathCandidates(scope, erroredPaths).filter(
+    isFocusCandidate
+  );
   const rootFallbackApplies = hasRootError && (root !== void 0 || document.querySelectorAll("form").length <= 1);
   const candidates = fieldMatches.length > 0 ? fieldMatches : rootFallbackApplies ? controls.filter(isFocusCandidate) : [];
   return focusFirstOf(candidates);
 };
 var focusField = (path, root) => {
-  const controls = namedControls(root ?? document);
-  return path === "" ? (root !== void 0 || document.querySelectorAll("form").length <= 1) && focusFirstOf(controls.filter(isFocusCandidate)) : focusFirstOf(
-    controls.filter((el) => nameMatchesAny(el, [path])).filter(isFocusCandidate)
-  );
+  const scope = root ?? document;
+  return path === "" ? (root !== void 0 || document.querySelectorAll("form").length <= 1) && focusFirstOf(namedControls(scope).filter(isFocusCandidate)) : focusFirstOf(pathCandidates(scope, [path]).filter(isFocusCandidate));
 };
 
-export { CheckboxField, DateField, NumberField, SelectField, TextField, checkboxProps, createForm, createFormContext, createFormHooks, dateInputProps, dateToInputText, emptyValueForSchema, flattenIssues, focusField, focusFirstError, getAtPath, hasFieldError, isAsyncRequiredError, numberInputProps, numberToInputText, parseDateText, parseNumberText, parsePath, persistForm, selectProps, setAtPath, shouldValidateOn, textInputProps, useField, useFieldArray, useForm, useFormError, useFormSelector, useFormSelectorShallow, useIsDirty, useIsSubmitting, useIsValid, useSubmitCount, useVariantField, validateAsync, validateSync };
+export { CheckboxField, DateField, NumberField, SelectField, TextField, checkboxProps, createForm, createFormContext, createFormHooks, dateInputProps, dateToInputText, emptyValueForSchema, flattenIssues, focusField, focusFirstError, getAtPath, hasFieldError, isAsyncRequiredError, numberInputProps, numberToInputText, parseDateText, parseNumberText, parsePath, persistForm, selectProps, setAtPath, shouldValidateOn, textInputProps, useField, useFieldArray, useForm, useFormError, useFormSelector, useFormSelectorShallow, useIsDirty, useIsSubmitting, useIsValid, useNumberInput, useSubmitCount, useVariantField, validateAsync, validateSync };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map