formstand 0.6.0 → 0.7.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';
@@ -983,38 +983,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 +1112,169 @@ 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 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]
+  );
+}
+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;
@@ -1398,111 +1529,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