formstand 0.6.0 → 0.8.0

package/dist/index.js

@@ -1,6 +1,6 @@
 import { createStore } from 'zustand/vanilla';
 import { z } from 'zod';
-import { useRef, useEffect, createContext, useMemo, useCallback, useId, useState, useContext } from 'react';
+import { useRef, useEffect, createContext, useMemo, useCallback, useState, useId, useContext } from 'react';
 import { jsxs, jsx } from 'react/jsx-runtime';
 import { useStore } from 'zustand/react';
 import { useShallow } from 'zustand/react/shallow';
@@ -57,7 +57,7 @@ var valuesEqual = (a, b) => {
   if (isPlainObject(a) && isPlainObject(b)) {
     const aKeys = Object.keys(a);
     const bKeys = Object.keys(b);
-    return aKeys.length === bKeys.length && aKeys.every((k) => valuesEqual(a[k], b[k]));
+    return aKeys.length === bKeys.length && aKeys.every((k) => Object.hasOwn(b, k) && valuesEqual(a[k], b[k]));
   }
   return false;
 };
@@ -92,7 +92,7 @@ var readSegment = (obj, segment) => {
   if (Array.isArray(obj)) {
     return typeof segment === "number" ? obj[segment] : void 0;
   }
-  return isPlainRecord(obj) ? obj[String(segment)] : void 0;
+  return isPlainRecord(obj) && Object.hasOwn(obj, String(segment)) ? obj[String(segment)] : void 0;
 };
 var getAtPath = (obj, path) => parsePath(path).reduce(readSegment, obj);
 var slotAtPath = (obj, path) => {
@@ -135,6 +135,12 @@ var writeSegments = (obj, segments, value) => {
     return writeIntoArray(obj, head, rest, value);
   }
   if (isPlainRecord(obj)) {
+    if (!isPlainObject(obj)) {
+      console.warn(
+        `[formstand] cannot write key "${String(head)}" through a non-plain object (Date/Map/Set/class instance); value left unchanged.`
+      );
+      return obj;
+    }
     const key = String(head);
     return { ...obj, [key]: writeSegments(obj[key], rest, value) };
   }
@@ -668,7 +674,11 @@ var createForm = (schema, options) => {
           });
         }
         const merged = stale ? result.errors : store.getState().errors;
-        onInvalid?.(merged);
+        try {
+          onInvalid?.(merged);
+        } catch (error) {
+          return { kind: "error", error };
+        }
         return { kind: "invalid", errors: merged };
       }
       if (!stale) {
@@ -928,9 +938,13 @@ var createForm = (schema, options) => {
         // In-flight state is owned by live passes, never by snapshots: a
         // snapshotted flag has no pass left to clear it (the pass that set
         // it cleared its ORIGINAL entry when it settled), so restoring one
-        // would stick it forever.
+        // would stick it forever. isSubmitting follows the same rule — a
+        // mid-submit snapshot restored later must not disable submit
+        // buttons forever, so it reflects the LIVE submit count instead of
+        // the snapshotted flag (a live pass's finally still resets it).
         isValidating: emptyBools,
-        isValidatingForm: false
+        isValidatingForm: false,
+        isSubmitting: inFlight.count > 0
       };
     })
   });
@@ -958,15 +972,17 @@ var useForm = (schema, options) => {
     formRef.current = createForm(schema, options);
   }
   const form = formRef.current;
+  const mountInitialsRef = useRef(options.initialValues);
   const warnedRef = useRef(false);
   useEffect(() => {
-    if (!warnedRef.current && form.schema !== schema) {
+    const changedInitials = !Object.is(options.initialValues, mountInitialsRef.current) && !valuesEqual(options.initialValues, mountInitialsRef.current);
+    if (!warnedRef.current && (form.schema !== schema || changedInitials)) {
       warnedRef.current = true;
       console.warn(
-        "[formstand] useForm received a different schema reference after the first render; schema and options changes are ignored for the life of the component. If the schema is defined inline this is harmless (but consider hoisting it to module scope). For initial values that arrive later (e.g. from a fetch), call form.adoptValues(values) or form.reset(values) instead."
+        "[formstand] useForm received a different schema or initial values after the first render; schema and options changes are ignored for the life of the component. If the schema is defined inline this is harmless (but consider hoisting it to module scope). For initial values that arrive later (e.g. from a fetch), call form.adoptValues(values) or form.reset(values) instead."
       );
     }
-  }, [form, schema]);
+  }, [form, schema, options.initialValues]);
   return form;
 };
 var createFormContext = () => {
@@ -983,38 +999,6 @@ var createFormContext = () => {
   };
   return { Provider, useFormContext };
 };
-function useFormSelector(form, selector) {
-  return useStore(form.store, selector);
-}
-function useFormSelectorShallow(form, selector) {
-  return useStore(form.store, useShallow(selector));
-}
-var useFormError = (form) => useStore(
-  form.store,
-  useShallow((state) => state.errors[""])
-);
-function useIsDirty(form, path) {
-  return useStore(
-    form.store,
-    (state) => path === void 0 || path === "" ? isFieldDirty(state.values, state.initialValues) : isFieldDirty(
-      getAtPath(state.values, path),
-      getAtPath(state.initialValues, path)
-    )
-  );
-}
-function useIsValid(form, path) {
-  return useStore(form.store, (state) => {
-    for (const k in state.errors) {
-      const errs = state.errors[k];
-      if (errs !== void 0 && errs.length > 0 && (path === void 0 || path === "" || isPathOrChild(k, path))) {
-        return false;
-      }
-    }
-    return true;
-  });
-}
-var useIsSubmitting = (form) => useStore(form.store, (state) => state.isSubmitting);
-var useSubmitCount = (form) => useStore(form.store, (state) => state.submitCount);
 function useField(form, pathArg, options) {
   const slice = useStore(
     form.store,
@@ -1144,6 +1128,168 @@ function useField(form, pathArg, options) {
     [slice, emptyValue, setValue, setTouched, setError, clearError, validate, validateAsync2, onBlur]
   );
 }
+var EMPTY_ID_STATE = { items: [], ids: [], counter: 0 };
+var EMPTY_ITEMS = [];
+var reconcileIds = (prev, nextItems) => {
+  if (prev.items === nextItems) return prev;
+  if (prev.items.length === nextItems.length && prev.items.every((item, i) => Object.is(item, nextItems[i]))) {
+    return prev;
+  }
+  const buckets = prev.items.reduce((acc, item, i) => {
+    const bucket = acc.get(item);
+    if (bucket === void 0) {
+      acc.set(item, [i]);
+    } else {
+      bucket.push(i);
+    }
+    return acc;
+  }, /* @__PURE__ */ new Map());
+  const matchedIds = nextItems.map((item) => {
+    const prevIndex = buckets.get(item)?.shift();
+    return prevIndex === void 0 ? null : prev.ids[prevIndex] ?? null;
+  });
+  const leftoverAt = new Map(
+    [...buckets.values()].flat().flatMap((i) => {
+      const id = prev.ids[i];
+      return id === void 0 ? [] : [[i, id]];
+    })
+  );
+  const reused = matchedIds.map((id, i) => id ?? leftoverAt.get(i) ?? null);
+  const mintCounts = reused.reduce((acc, id) => {
+    const count = acc[acc.length - 1] ?? 0;
+    return [...acc, id === null ? count + 1 : count];
+  }, []);
+  const minted = mintCounts[mintCounts.length - 1] ?? 0;
+  const ids = reused.map(
+    (id, i) => id ?? `__zfa_${prev.counter + (mintCounts[i] ?? 0)}`
+  );
+  return { items: nextItems, ids, counter: prev.counter + minted };
+};
+function useFieldArray(form, pathArg) {
+  const path = useStore(
+    form.store,
+    (state) => typeof pathArg === "function" ? pathArg(state) : pathArg
+  );
+  const slice = useStore(
+    form.store,
+    useShallow((state) => {
+      const value = getAtPath(state.values, path);
+      return {
+        items: Array.isArray(value) ? value : EMPTY_ITEMS,
+        error: state.errors[path]
+      };
+    })
+  );
+  const items = slice.items;
+  const error = slice.error;
+  const [idEntry, setIdEntry] = useState({ form, path, state: EMPTY_ID_STATE });
+  const base = idEntry.form === form && idEntry.path === path ? idEntry.state : { ...EMPTY_ID_STATE, counter: idEntry.state.counter };
+  const nextIdState = reconcileIds(base, items);
+  if (idEntry.form !== form || idEntry.path !== path || idEntry.state !== nextIdState) {
+    setIdEntry({ form, path, state: nextIdState });
+  }
+  const ids = nextIdState.ids;
+  const push = useCallback(
+    (item) => form.arrayPush(path, item),
+    [form, path]
+  );
+  const remove = useCallback(
+    (index) => form.arrayRemove(path, index),
+    [form, path]
+  );
+  const insert = useCallback(
+    (index, item) => form.arrayInsert(path, index, item),
+    [form, path]
+  );
+  const move = useCallback(
+    (from, to) => form.arrayMove(path, from, to),
+    [form, path]
+  );
+  const swap = useCallback(
+    (a, b) => form.arraySwap(path, a, b),
+    [form, path]
+  );
+  const fields = useMemo(
+    () => items.map((value, index) => ({
+      id: ids[index] ?? `__zfa_fallback_${index}`,
+      value
+    })),
+    [items, ids]
+  );
+  return useMemo(
+    () => ({
+      fields,
+      items,
+      length: items.length,
+      error,
+      push,
+      remove,
+      insert,
+      move,
+      swap
+    }),
+    [fields, items, error, push, remove, insert, move, swap]
+  );
+}
+var useFormError = (form) => useStore(
+  form.store,
+  useShallow((state) => state.errors[""])
+);
+function useIsDirty(form, path) {
+  return useStore(
+    form.store,
+    (state) => path === void 0 || path === "" ? isFieldDirty(state.values, state.initialValues) : isFieldDirty(
+      getAtPath(state.values, path),
+      getAtPath(state.initialValues, path)
+    )
+  );
+}
+function useIsValid(form, path) {
+  return useStore(form.store, (state) => {
+    for (const k in state.errors) {
+      const errs = state.errors[k];
+      if (errs !== void 0 && errs.length > 0 && (path === void 0 || path === "" || isPathOrChild(k, path))) {
+        return false;
+      }
+    }
+    return true;
+  });
+}
+var useIsSubmitting = (form) => useStore(form.store, (state) => state.isSubmitting);
+var useSubmitCount = (form) => useStore(form.store, (state) => state.submitCount);
+function useFormSelector(form, selector) {
+  return useStore(form.store, selector);
+}
+function useFormSelectorShallow(form, selector) {
+  return useStore(form.store, useShallow(selector));
+}
+
+// src/react/createFormHooks.ts
+var capitalize = (name) => name.length === 0 ? name : name.charAt(0).toUpperCase() + name.slice(1);
+var createFormHooks = (form, name) => {
+  const structural = form;
+  const useBoundField = (path, options) => useField(structural, path, options);
+  const useBoundFieldArray = (path) => useFieldArray(structural, path);
+  const useBoundSelector = (selector) => useFormSelector(structural, selector);
+  const useBoundSelectorShallow = (selector) => useFormSelectorShallow(structural, selector);
+  const useBoundError = () => useFormError(structural);
+  const useBoundIsDirty = (path) => useIsDirty(structural, path);
+  const useBoundIsValid = (path) => useIsValid(structural, path);
+  const useBoundIsSubmitting = () => useIsSubmitting(structural);
+  const useBoundSubmitCount = () => useSubmitCount(structural);
+  const prefix = capitalize(name ?? "");
+  return {
+    [`use${prefix}Field`]: useBoundField,
+    [`use${prefix}FieldArray`]: useBoundFieldArray,
+    [`use${prefix}Selector`]: useBoundSelector,
+    [`use${prefix}SelectorShallow`]: useBoundSelectorShallow,
+    [`use${prefix}Error`]: useBoundError,
+    [`use${prefix}IsDirty`]: useBoundIsDirty,
+    [`use${prefix}IsValid`]: useBoundIsValid,
+    [`use${prefix}IsSubmitting`]: useBoundIsSubmitting,
+    [`use${prefix}SubmitCount`]: useBoundSubmitCount
+  };
+};
 
 // src/react/inputProps.ts
 var ariaInvalid = (field) => field.error !== void 0 && field.error.length > 0 ? true : void 0;
@@ -1334,7 +1480,8 @@ var SelectField = ({
   const id = useId();
   const errorId = `${id}-error`;
   const field = useField(form, path);
-  const showEmptyOption = field.value === void 0 || field.value === null || placeholder !== void 0;
+  const clearable = field.emptyValue === null;
+  const showEmptyOption = clearable || field.value === void 0 || field.value === null || placeholder !== void 0;
   return /* @__PURE__ */ jsxs("div", { className: "zf-field", children: [
     label !== void 0 ? /* @__PURE__ */ jsx("label", { htmlFor: id, className: "zf-label", children: label }) : null,
     /* @__PURE__ */ jsxs(
@@ -1345,7 +1492,7 @@ var SelectField = ({
         ...selectProps(field),
         "aria-describedby": hasError(field.error) ? errorId : void 0,
         children: [
-          showEmptyOption ? /* @__PURE__ */ jsx("option", { value: "", disabled: true, children: placeholder ?? "" }) : null,
+          showEmptyOption ? /* @__PURE__ */ jsx("option", { value: "", disabled: !clearable, children: placeholder ?? "" }) : null,
           options.map((opt, index) => (
             // Index-qualified: option lists may legitimately repeat a value
             // (e.g. differently-labelled aliases), and bare value keys would
@@ -1398,111 +1545,7 @@ var focusField = (path, root) => {
   const controls = focusableControls(root ?? document);
   return path === "" ? (root !== void 0 || document.querySelectorAll("form").length <= 1) && focusFirstOf(controls) : focusFirstOf(controls.filter((el) => nameMatchesAny(el, [path])));
 };
-var EMPTY_ID_STATE = { items: [], ids: [], counter: 0 };
-var EMPTY_ITEMS = [];
-var reconcileIds = (prev, nextItems) => {
-  if (prev.items === nextItems) return prev;
-  if (prev.items.length === nextItems.length && prev.items.every((item, i) => Object.is(item, nextItems[i]))) {
-    return prev;
-  }
-  const buckets = prev.items.reduce((acc, item, i) => {
-    const bucket = acc.get(item);
-    if (bucket === void 0) {
-      acc.set(item, [i]);
-    } else {
-      bucket.push(i);
-    }
-    return acc;
-  }, /* @__PURE__ */ new Map());
-  const matchedIds = nextItems.map((item) => {
-    const prevIndex = buckets.get(item)?.shift();
-    return prevIndex === void 0 ? null : prev.ids[prevIndex] ?? null;
-  });
-  const leftover = [...buckets.values()].flat().sort((a, b) => a - b).map((i) => prev.ids[i]).filter((id) => id !== void 0);
-  const ordinals = matchedIds.reduce((acc, id) => {
-    const count = acc.length === 0 ? 0 : acc[acc.length - 1] ?? 0;
-    acc.push(id === null ? count + 1 : count);
-    return acc;
-  }, []);
-  const unmatched = ordinals.length === 0 ? 0 : ordinals[ordinals.length - 1] ?? 0;
-  const ids = matchedIds.map((id, i) => {
-    if (id !== null) return id;
-    const ordinal = ordinals[i] ?? 0;
-    return leftover[ordinal - 1] ?? `__zfa_${prev.counter + (ordinal - leftover.length)}`;
-  });
-  return {
-    items: nextItems,
-    ids,
-    counter: prev.counter + Math.max(0, unmatched - leftover.length)
-  };
-};
-function useFieldArray(form, pathArg) {
-  const path = useStore(
-    form.store,
-    (state) => typeof pathArg === "function" ? pathArg(state) : pathArg
-  );
-  const slice = useStore(
-    form.store,
-    useShallow((state) => {
-      const value = getAtPath(state.values, path);
-      return {
-        items: Array.isArray(value) ? value : EMPTY_ITEMS,
-        error: state.errors[path]
-      };
-    })
-  );
-  const items = slice.items;
-  const error = slice.error;
-  const [idEntry, setIdEntry] = useState({ form, path, state: EMPTY_ID_STATE });
-  const base = idEntry.form === form && idEntry.path === path ? idEntry.state : { ...EMPTY_ID_STATE, counter: idEntry.state.counter };
-  const nextIdState = reconcileIds(base, items);
-  if (idEntry.form !== form || idEntry.path !== path || idEntry.state !== nextIdState) {
-    setIdEntry({ form, path, state: nextIdState });
-  }
-  const ids = nextIdState.ids;
-  const push = useCallback(
-    (item) => form.arrayPush(path, item),
-    [form, path]
-  );
-  const remove = useCallback(
-    (index) => form.arrayRemove(path, index),
-    [form, path]
-  );
-  const insert = useCallback(
-    (index, item) => form.arrayInsert(path, index, item),
-    [form, path]
-  );
-  const move = useCallback(
-    (from, to) => form.arrayMove(path, from, to),
-    [form, path]
-  );
-  const swap = useCallback(
-    (a, b) => form.arraySwap(path, a, b),
-    [form, path]
-  );
-  const fields = useMemo(
-    () => items.map((value, index) => ({
-      id: ids[index] ?? `__zfa_fallback_${index}`,
-      value
-    })),
-    [items, ids]
-  );
-  return useMemo(
-    () => ({
-      fields,
-      items,
-      length: items.length,
-      error,
-      push,
-      remove,
-      insert,
-      move,
-      swap
-    }),
-    [fields, items, error, push, remove, insert, move, swap]
-  );
-}
 
-export { CheckboxField, NumberField, SelectField, TextField, checkboxProps, createForm, createFormContext, emptyValueForSchema, flattenIssues, focusField, focusFirstError, getAtPath, isAsyncRequiredError, numberInputProps, numberToInputText, parseNumberText, parsePath, selectProps, setAtPath, shouldValidateOn, textInputProps, useField, useFieldArray, useForm, useFormError, useFormSelector, useFormSelectorShallow, useIsDirty, useIsSubmitting, useIsValid, useSubmitCount, validateAsync, validateSync };
+export { CheckboxField, NumberField, SelectField, TextField, checkboxProps, createForm, createFormContext, createFormHooks, emptyValueForSchema, flattenIssues, focusField, focusFirstError, getAtPath, isAsyncRequiredError, numberInputProps, numberToInputText, parseNumberText, parsePath, selectProps, setAtPath, shouldValidateOn, textInputProps, useField, useFieldArray, useForm, useFormError, useFormSelector, useFormSelectorShallow, useIsDirty, useIsSubmitting, useIsValid, useSubmitCount, validateAsync, validateSync };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map