formstand 0.18.0 → 0.20.0

package/dist/index.js

@@ -1,9 +1,11 @@
-import { getAtPath, slotAtPath, setAtPath, isPlainObject, hasOwnSlot, valuesEqual, isFieldDirty, useFormSelector, useFormSelectorShallow, parsePath } from './chunk-N7WPXYCU.js';
+import { getAtPath, slotAtPath, setAtPath, isPlainObject, hasOwnSlot, valuesEqual, useFormSelectorShallow, isFieldDirty, useFormSelector, parsePath } from './chunk-N7WPXYCU.js';
 export { getAtPath, parsePath, setAtPath, useFormSelector, useFormSelectorShallow } from './chunk-N7WPXYCU.js';
+import { shouldValidateOn } from './chunk-MQ6262S3.js';
+export { shouldValidateOn } from './chunk-MQ6262S3.js';
 import { createStore } from 'zustand/vanilla';
 import { devtools } from 'zustand/middleware';
 import { z } from 'zod';
-import { useRef, useEffect, useMemo, createContext, useCallback, useState, useContext, useId } from 'react';
+import { useRef, useEffect, useMemo, useState, useCallback, useActionState, createContext, useContext, useId } from 'react';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { useStore } from 'zustand/react';
 import { useShallow } from 'zustand/react/shallow';
@@ -1008,23 +1010,6 @@ var createForm = (schema, options) => {
   });
 };
 
-// src/core/mode.ts
-var shouldValidateOn = (trigger, mode, reValidateMode, submitAttempted, touched = false) => {
-  const effective = submitAttempted ? reValidateMode : mode;
-  switch (effective) {
-    case "onChange":
-      return trigger === "change";
-    case "onBlur":
-      return trigger === "blur";
-    case "onSubmit":
-      return false;
-    case "onTouched":
-      return trigger === "blur" || touched;
-    case "all":
-      return true;
-  }
-};
-
 // src/core/persist.ts
 var kindOf = (value) => value === null ? "null" : Array.isArray(value) ? "array" : typeof value;
 var conflictsWith = (draft, reference) => {
@@ -1183,6 +1168,278 @@ var useForm = (schema, options) => {
   }, [form, schema, options.initialValues]);
   return form;
 };
+
+// src/react/inputProps.ts
+var hasFieldError = (error) => error !== void 0 && error.length > 0;
+var ariaInvalid = (field) => hasFieldError(field.error) ? true : void 0;
+var numberToInputText = (value) => value === void 0 || value === null || Number.isNaN(value) ? "" : String(value);
+var parseNumberText = (text) => {
+  if (text.trim() === "") return { kind: "empty" };
+  const parsed = Number(text);
+  return Number.isFinite(parsed) ? { kind: "number", value: parsed } : { kind: "invalid" };
+};
+var textInputProps = (field) => ({
+  name: field.path,
+  value: field.value ?? "",
+  "aria-invalid": ariaInvalid(field),
+  onChange: (e) => {
+    const text = e.target.value;
+    field.setValue(text === "" && field.clearable ? field.emptyValue : text);
+  },
+  onBlur: field.onBlur
+});
+var numberInputProps = (field) => ({
+  type: "number",
+  name: field.path,
+  value: numberToInputText(field.value),
+  "aria-invalid": ariaInvalid(field),
+  onChange: (e) => {
+    const parsed = parseNumberText(e.target.value);
+    if (parsed.kind === "invalid") return;
+    field.setValue(
+      parsed.kind === "number" ? parsed.value : field.emptyValue
+    );
+  },
+  onBlur: field.onBlur
+});
+var dateToInputText = (value) => {
+  if (value === void 0 || value === null || Number.isNaN(value.getTime())) {
+    return "";
+  }
+  const pad = (part) => String(part).padStart(2, "0");
+  return `${String(value.getFullYear()).padStart(4, "0")}-${pad(value.getMonth() + 1)}-${pad(value.getDate())}`;
+};
+var parseDateText = (text) => {
+  if (text.trim() === "") return { kind: "empty" };
+  const match = /^(\d{4})-(\d{2})-(\d{2})$/.exec(text);
+  if (match === null) return { kind: "invalid" };
+  const [, year, month, day] = match;
+  const y = Number(year);
+  const date = new Date(y, Number(month) - 1, Number(day));
+  if (y < 100) date.setFullYear(y);
+  return date.getFullYear() === y && date.getMonth() === Number(month) - 1 && date.getDate() === Number(day) ? { kind: "date", value: date } : { kind: "invalid" };
+};
+var dateInputProps = (field) => ({
+  type: "date",
+  name: field.path,
+  value: dateToInputText(field.value),
+  "aria-invalid": ariaInvalid(field),
+  onChange: (e) => {
+    const parsed = parseDateText(e.target.value);
+    if (parsed.kind !== "date") {
+      field.setValue(field.emptyValue);
+      return;
+    }
+    const current = field.value;
+    const next = current instanceof Date && !Number.isNaN(current.getTime()) ? new Date(
+      parsed.value.getFullYear(),
+      parsed.value.getMonth(),
+      parsed.value.getDate(),
+      current.getHours(),
+      current.getMinutes(),
+      current.getSeconds(),
+      current.getMilliseconds()
+    ) : parsed.value;
+    field.setValue(next);
+  },
+  onBlur: field.onBlur
+});
+var checkboxProps = (field) => ({
+  type: "checkbox",
+  name: field.path,
+  checked: field.value ?? false,
+  "aria-invalid": ariaInvalid(field),
+  onChange: (e) => field.setValue(e.target.checked),
+  onBlur: field.onBlur
+});
+var selectProps = (field) => ({
+  name: field.path,
+  value: field.value ?? "",
+  "aria-invalid": ariaInvalid(field),
+  onChange: (e) => {
+    const v = e.target.value;
+    field.setValue(v === "" && field.clearable ? field.emptyValue : v);
+  },
+  onBlur: field.onBlur
+});
+
+// src/react/useMaskedInput.ts
+var useMaskedInput = (field, options) => {
+  const [edit, setEdit] = useState({
+    raw: null,
+    pushed: void 0
+  });
+  const externallyChanged = edit.raw !== null && !Object.is(field.value, edit.pushed);
+  if (externallyChanged) {
+    setEdit({ raw: null, pushed: void 0 });
+  }
+  const raw = externallyChanged ? null : edit.raw;
+  return {
+    name: field.path,
+    value: raw ?? (field.value === void 0 || field.value === null ? "" : options.format(field.value)),
+    "aria-invalid": hasFieldError(field.error) ? true : void 0,
+    onChange: (e) => {
+      const text = e.target.value;
+      const parsed = options.parse(text);
+      switch (parsed.kind) {
+        case "value":
+          setEdit({ raw: text, pushed: parsed.value });
+          field.setValue(parsed.value);
+          return;
+        case "empty": {
+          const empty = field.emptyValue;
+          setEdit({ raw: text, pushed: empty });
+          field.setValue(empty);
+          return;
+        }
+        case "invalid":
+          setEdit({ raw: text, pushed: field.value });
+          return;
+      }
+    },
+    onBlur: () => {
+      setEdit({ raw: null, pushed: void 0 });
+      field.onBlur();
+    }
+  };
+};
+var useFormSteps = (form, steps) => {
+  const [step, setStep] = useState(0);
+  const [visited, setVisited] = useState(
+    () => /* @__PURE__ */ new Set([0])
+  );
+  const latest = useRef(steps);
+  useEffect(() => {
+    latest.current = steps;
+  });
+  const validateStep = useCallback(
+    async (index) => {
+      const definition = latest.current[index];
+      if (definition === void 0) return true;
+      const result = await form.validateFieldsAsync(definition.fields);
+      if (result.kind === "invalid") {
+        Object.keys(result.errors).forEach((key) => {
+          form.setTouched(key, true);
+        });
+        return false;
+      }
+      return true;
+    },
+    [form]
+  );
+  const next = useCallback(async () => {
+    const ok = await validateStep(step);
+    if (!ok) return false;
+    const target = Math.min(step + 1, latest.current.length - 1);
+    setStep(target);
+    setVisited((prev) => /* @__PURE__ */ new Set([...prev, target]));
+    return true;
+  }, [validateStep, step]);
+  const back = useCallback(() => {
+    setStep((prev) => Math.max(prev - 1, 0));
+  }, []);
+  const goTo = useCallback(
+    async (target) => {
+      const count = latest.current.length;
+      const clamped = Math.max(0, Math.min(target, count - 1));
+      if (clamped <= step) {
+        setStep(clamped);
+        return clamped;
+      }
+      const walk = async (from) => {
+        if (from >= clamped) return clamped;
+        return await validateStep(from) ? walk(from + 1) : from;
+      };
+      const landed = await walk(step);
+      setStep(landed);
+      setVisited(
+        (prev) => /* @__PURE__ */ new Set([
+          ...prev,
+          ...Array.from({ length: landed - step + 1 }, (_, i) => step + i)
+        ])
+      );
+      return landed;
+    },
+    [validateStep, step]
+  );
+  const errorFlags = useFormSelectorShallow(
+    form,
+    (state) => steps.map(
+      (definition) => definition.fields.some(
+        (path) => Object.keys(state.errors).some((key) => isPathOrChild(key, path))
+      )
+    )
+  );
+  const statuses = useMemo(
+    () => steps.map(
+      (definition, index) => ({
+        name: definition.name,
+        visited: visited.has(index),
+        hasErrors: errorFlags[index] ?? false
+      })
+    ),
+    [steps, visited, errorFlags]
+  );
+  return useMemo(
+    () => ({
+      step,
+      name: steps[step]?.name,
+      count: steps.length,
+      isFirst: step === 0,
+      isLast: step === steps.length - 1,
+      next,
+      back,
+      goTo,
+      steps: statuses
+    }),
+    [step, steps, next, back, goTo, statuses]
+  );
+};
+var warnUnobserved = (result, options, site) => {
+  if (result.kind === "error" && options?.onError === void 0 && process.env.NODE_ENV !== "production") {
+    console.warn(
+      `[formstand] action handler threw and nothing observed it \u2014 the form shows no feedback. Pass { onError } to ${site} (or setError inside your handler):`,
+      result.error
+    );
+  }
+};
+var useFormAction = (form, onValid, options) => {
+  const latest = useRef({ onValid, options });
+  useEffect(() => {
+    latest.current = { onValid, options };
+  });
+  return useCallback(
+    async (formData) => {
+      const { onValid: handler, options: opts } = latest.current;
+      const result = await form.submit(
+        (data) => handler(data, formData),
+        opts?.onInvalid,
+        opts?.onError === void 0 ? void 0 : { onError: opts.onError }
+      );
+      warnUnobserved(result, opts, "useFormAction");
+    },
+    [form]
+  );
+};
+var useFormActionState = (form, action, initialState, options) => {
+  const [state, formAction, isPending] = useActionState(
+    async (prevState, formData) => {
+      const prev = prevState;
+      const nextRef = { current: prev };
+      const result = await form.submit(
+        async (data) => {
+          nextRef.current = await action(prev, data, formData);
+        },
+        options?.onInvalid,
+        options?.onError === void 0 ? void 0 : { onError: options.onError }
+      );
+      warnUnobserved(result, options, "useFormActionState");
+      return nextRef.current;
+    },
+    initialState
+  );
+  return [state, formAction, isPending];
+};
 var createFormContext = () => {
   const Context = createContext(null);
   const Provider = ({ form, children }) => /* @__PURE__ */ jsx(Context.Provider, { value: form, children });
@@ -1631,6 +1888,7 @@ var createFormHooks = (form, name) => {
     paths
   );
   const useBoundSubmitCount = () => useSubmitCount(structural);
+  const useBoundSteps = (steps) => useFormSteps(form, steps);
   const prefix = capitalize(name ?? "");
   return {
     [`use${prefix}Field`]: useBoundField,
@@ -1645,103 +1903,10 @@ var createFormHooks = (form, name) => {
     [`use${prefix}IsSubmitting`]: useBoundIsSubmitting,
     [`use${prefix}SubmitCount`]: useBoundSubmitCount,
     [`use${prefix}Values`]: useBoundValues,
-    [`use${prefix}Fields`]: useBoundFields
+    [`use${prefix}Fields`]: useBoundFields,
+    [`use${prefix}Steps`]: useBoundSteps
   };
 };
-
-// src/react/inputProps.ts
-var hasFieldError = (error) => error !== void 0 && error.length > 0;
-var ariaInvalid = (field) => hasFieldError(field.error) ? true : void 0;
-var numberToInputText = (value) => value === void 0 || value === null || Number.isNaN(value) ? "" : String(value);
-var parseNumberText = (text) => {
-  if (text.trim() === "") return { kind: "empty" };
-  const parsed = Number(text);
-  return Number.isFinite(parsed) ? { kind: "number", value: parsed } : { kind: "invalid" };
-};
-var textInputProps = (field) => ({
-  name: field.path,
-  value: field.value ?? "",
-  "aria-invalid": ariaInvalid(field),
-  onChange: (e) => {
-    const text = e.target.value;
-    field.setValue(text === "" && field.clearable ? field.emptyValue : text);
-  },
-  onBlur: field.onBlur
-});
-var numberInputProps = (field) => ({
-  type: "number",
-  name: field.path,
-  value: numberToInputText(field.value),
-  "aria-invalid": ariaInvalid(field),
-  onChange: (e) => {
-    const parsed = parseNumberText(e.target.value);
-    if (parsed.kind === "invalid") return;
-    field.setValue(
-      parsed.kind === "number" ? parsed.value : field.emptyValue
-    );
-  },
-  onBlur: field.onBlur
-});
-var dateToInputText = (value) => {
-  if (value === void 0 || value === null || Number.isNaN(value.getTime())) {
-    return "";
-  }
-  const pad = (part) => String(part).padStart(2, "0");
-  return `${String(value.getFullYear()).padStart(4, "0")}-${pad(value.getMonth() + 1)}-${pad(value.getDate())}`;
-};
-var parseDateText = (text) => {
-  if (text.trim() === "") return { kind: "empty" };
-  const match = /^(\d{4})-(\d{2})-(\d{2})$/.exec(text);
-  if (match === null) return { kind: "invalid" };
-  const [, year, month, day] = match;
-  const y = Number(year);
-  const date = new Date(y, Number(month) - 1, Number(day));
-  if (y < 100) date.setFullYear(y);
-  return date.getFullYear() === y && date.getMonth() === Number(month) - 1 && date.getDate() === Number(day) ? { kind: "date", value: date } : { kind: "invalid" };
-};
-var dateInputProps = (field) => ({
-  type: "date",
-  name: field.path,
-  value: dateToInputText(field.value),
-  "aria-invalid": ariaInvalid(field),
-  onChange: (e) => {
-    const parsed = parseDateText(e.target.value);
-    if (parsed.kind !== "date") {
-      field.setValue(field.emptyValue);
-      return;
-    }
-    const current = field.value;
-    const next = current instanceof Date && !Number.isNaN(current.getTime()) ? new Date(
-      parsed.value.getFullYear(),
-      parsed.value.getMonth(),
-      parsed.value.getDate(),
-      current.getHours(),
-      current.getMinutes(),
-      current.getSeconds(),
-      current.getMilliseconds()
-    ) : parsed.value;
-    field.setValue(next);
-  },
-  onBlur: field.onBlur
-});
-var checkboxProps = (field) => ({
-  type: "checkbox",
-  name: field.path,
-  checked: field.value ?? false,
-  "aria-invalid": ariaInvalid(field),
-  onChange: (e) => field.setValue(e.target.checked),
-  onBlur: field.onBlur
-});
-var selectProps = (field) => ({
-  name: field.path,
-  value: field.value ?? "",
-  "aria-invalid": ariaInvalid(field),
-  onChange: (e) => {
-    const v = e.target.value;
-    field.setValue(v === "" && field.clearable ? field.emptyValue : v);
-  },
-  onBlur: field.onBlur
-});
 var useFieldA11y = (error) => {
   const id = useId();
   const errorId = `${id}-error`;
@@ -2034,6 +2199,6 @@ var focusField = (path, root) => {
   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, hasFieldError, isAsyncRequiredError, isClearableSchema, numberInputProps, numberToInputText, parseDateText, parseNumberText, persistForm, selectProps, shouldValidateOn, textInputProps, useField, useFieldArray, useFields, useForm, useFormError, useFormValues, useIsDirty, useIsSubmitting, useIsValid, useIsValidating, useNumberInput, usePersistForm, useSubmitCount, useVariantField, validateAsync, validateSync };
+export { CheckboxField, DateField, NumberField, SelectField, TextField, checkboxProps, createForm, createFormContext, createFormHooks, dateInputProps, dateToInputText, emptyValueForSchema, flattenIssues, focusField, focusFirstError, hasFieldError, isAsyncRequiredError, isClearableSchema, numberInputProps, numberToInputText, parseDateText, parseNumberText, persistForm, selectProps, textInputProps, useField, useFieldArray, useFields, useForm, useFormAction, useFormActionState, useFormError, useFormSteps, useFormValues, useIsDirty, useIsSubmitting, useIsValid, useIsValidating, useMaskedInput, useNumberInput, usePersistForm, useSubmitCount, useVariantField, validateAsync, validateSync };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map