react-f0rm 0.4.1 → 0.5.0

package/dist/index.d.ts

@@ -1,6 +1,6 @@
-import { a as FieldPath, N as Name, F as Form$1, P as PathValueOf, b as FieldError, c as Path, O as Options } from './form-DeRFdFKE.js';
-export { d as FieldErrorEntry, e as FieldState, H as HandleSubmitOptions, f as PathValue, R as ReValidateMode, g as ResetFieldOptions, h as ResetOptions, S as SetFieldOptions, i as SetFocusOptions, V as VALIDATION_OUTCOME, j as ValidateResult, k as ValidationMode, l as ValidationOutcome, m as clearErrors, n as createForm, o as ensureValidate, p as getDirtyFields, q as getError, r as getErrorByPath, s as getErrors, t as getFieldErrors, u as getFieldErrorsByPath, v as getFieldState, w as getFirstError, x as getTouchedFields, y as getValue, z as getValueByPath, A as getValues, B as handleSubmit, C as hasErrors, D as hasTouched, E as hasTouchedByPath, G as incrementSubmitCount, I as isDirty, J as isTouched, K as removeField, L as removeFieldByPath, M as reset, Q as resetField, T as setDisabled, U as setError, W as setErrorByPath, X as setFocus, Y as setInitialValues, Z as setIsSubmitting, _ as setSubmitSuccessful, $ as setTouched, a0 as setTouchedByPath, a1 as setValidatingByPath, a2 as setValue, a3 as setValueByPath, a4 as trigger, a5 as unsetValidatingByPath, a6 as validate } from './form-DeRFdFKE.js';
-import { V as Validator } from './validate-B7S9EiRT.js';
+import { a as FieldPath, N as Name, F as Form$1, P as PathValueOf, b as FieldError, c as Path, O as Options } from './form-rTlcIiWH.js';
+export { d as FieldErrorEntry, e as FieldState, H as HandleSubmitOptions, f as PathValue, R as ReValidateMode, g as ResetFieldOptions, h as ResetOptions, S as SetFieldOptions, i as SetFocusOptions, j as SetServerErrorsOptions, V as VALIDATION_OUTCOME, k as ValidateResult, l as ValidationMode, m as ValidationOutcome, n as clearErrors, o as createForm, p as ensureValidate, q as getDirtyFields, r as getError, s as getErrorByPath, t as getErrors, u as getFieldErrors, v as getFieldErrorsByPath, w as getFieldState, x as getFirstError, y as getTouchedFields, z as getValue, A as getValueByPath, B as getValues, C as handleSubmit, D as hasErrors, E as hasTouched, G as hasTouchedByPath, I as incrementSubmitCount, J as isDirty, K as isTouched, L as removeField, M as removeFieldByPath, Q as reset, T as resetField, U as setDisabled, W as setError, X as setErrorByPath, Y as setFocus, Z as setInitialValues, _ as setIsSubmitting, $ as setServerErrors, a0 as setSubmitSuccessful, a1 as setTouched, a2 as setTouchedByPath, a3 as setValidatingByPath, a4 as setValue, a5 as setValueByPath, a6 as trigger, a7 as unsetValidatingByPath, a8 as validate } from './form-rTlcIiWH.js';
+import { V as Validator } from './validate-CQX7BJOD.js';
 import * as React from 'react';
 import { ReactNode } from 'react';
 import { EventEmitter } from '@for-fun/event-emitter';
@@ -431,12 +431,25 @@ interface FieldProps<TValues extends Record<string, any> = any, TPath extends Fi
     /**
      * Optional error renderer. When provided and the field has an error,
      * Field renders `<span id={id} role="alert">{renderError(error, id)}</span>`
-     * next to the input and points the input's aria-describedby at that span.
-     * When omitted, no extra element is rendered (headless) and no
-     * aria-describedby is attached, avoiding dangling id references.
+     * next to the input. The input's aria-describedby points at that span's
+     * id (the same `fieldErrorId(name)` derivation) whenever the field has
+     * an error — with or without renderError — so custom error components
+     * that render the element themselves (using `fieldErrorId`) get the
+     * wiring for free.
      */
     renderError?: (error: string, id: string) => React.ReactNode;
 }
+/**
+ * The error-message element id a field's `aria-describedby` points at —
+ * `fieldErrorId('a[0].b')` is `'a-0-b'`, the same id `Field`'s built-in
+ * `renderError` span carries. This is the library-level wiring convention:
+ * whenever a bound field (Field/Checkbox/Select) has an error it sets
+ * `aria-invalid` and describes the element with this id, so a custom error
+ * component only needs `<span id={fieldErrorId(name)} role="alert">` to
+ * complete the accessible-name chain for screen readers.
+ * @param name the same field name passed to the bound component
+ */
+declare function fieldErrorId(name: Name): string;
 /**
  * The callable shape of {@link Field}: `form` + `name` flow their generics
  * into `validate`'s value argument (`PathValueOf<TValues, TPath>`). A named
@@ -471,5 +484,5 @@ interface SelectComponent {
 }
 declare const Select: SelectComponent;
 
-export { Checkbox, CheckboxGroupContext, CheckboxGroupProvider, Field, FieldError, FieldPath, Form, FormContext, Form$1 as FormInstance, FormProvider, Name, Options, Path, PathValueOf, Select, Validator, createFormContext, subscribe, useCheckboxGroupContext, useDirtyFields, useError, useErrorByPath, useField, useFieldArray, useFieldErrors, useFieldErrorsByPath, useForm, useFormContext, useHasErrors, useIsDirty, useIsSubmitting, useSubmitCount, useTouched, useTouchedByPath, useTouchedFields, useValue, useValueByPath, useWatch };
+export { Checkbox, CheckboxGroupContext, CheckboxGroupProvider, Field, FieldError, FieldPath, Form, FormContext, Form$1 as FormInstance, FormProvider, Name, Options, Path, PathValueOf, Select, Validator, createFormContext, fieldErrorId, subscribe, useCheckboxGroupContext, useDirtyFields, useError, useErrorByPath, useField, useFieldArray, useFieldErrors, useFieldErrorsByPath, useForm, useFormContext, useHasErrors, useIsDirty, useIsSubmitting, useSubmitCount, useTouched, useTouchedByPath, useTouchedFields, useValue, useValueByPath, useWatch };
 export type { FieldRules, SubscribeEvent, SubscribeOptions, WatchScope };

package/dist/index.mjs

@@ -144,6 +144,31 @@ function setOwned(root, path, value, owned) {
 function isPromise(value) {
   return value && typeof value.then === "function";
 }
+function isEqual(a, b) {
+  if (Object.is(a, b)) return true;
+  if (a instanceof Date && b instanceof Date)
+    return a.getTime() === b.getTime();
+  if (!a || !b || typeof a !== "object" || typeof b !== "object") return false;
+  const isArray = Array.isArray(a);
+  if (isArray !== Array.isArray(b)) return false;
+  if (isArray) {
+    if (a.length !== b.length) return false;
+    for (let i = 0; i < a.length; i++) {
+      if (!isEqual(a[i], b[i])) return false;
+    }
+    return true;
+  }
+  const proto = Object.getPrototypeOf(a);
+  if (proto !== Object.prototype && proto !== null) return false;
+  if (Object.getPrototypeOf(b) !== proto) return false;
+  const keysA = Object.keys(a);
+  const keysB = Object.keys(b);
+  if (keysA.length !== keysB.length) return false;
+  for (const key of keysA) {
+    if (!isEqual(a[key], b[key])) return false;
+  }
+  return true;
+}
 function waitUntil(emitter, event, isResolve, isReject) {
   return new Promise((resolve, reject) => {
     if (isReject()) return void reject();
@@ -301,6 +326,19 @@ function clearErrors(form, name) {
   for (const { key } of paths) errors.delete(key);
   for (const path of paths) emit(emitter, "errors", path);
 }
+function setServerErrors(form, errors, options) {
+  if (!options?.keepExisting) clearErrors(form);
+  for (const [name, error] of Object.entries(errors)) {
+    setError(
+      form,
+      name,
+      (Array.isArray(error) ? error : [error]).map((message) => ({
+        type: "server",
+        message
+      }))
+    );
+  }
+}
 function setTouched(form, name) {
   setTouchedByPath(form, create$1(name));
 }
@@ -401,7 +439,9 @@ function reviveBranch(deleted, { key }) {
   }
 }
 function setInitialValues(form, initialValues) {
-  if (form.initialValues === initialValues) return;
+  if (form.initialValues === initialValues || isEqual(form.initialValues, initialValues)) {
+    return;
+  }
   form.initialValues = initialValues;
   form.parsedValues = void 0;
   form.values.clear();
@@ -1071,31 +1111,6 @@ function useIsSubmitting(form) {
 function useSubmitCount(form) {
   return useWatch(form.emitter, "submitCount", () => form.submitCount);
 }
-function isEqual(a, b) {
-  if (Object.is(a, b)) return true;
-  if (a instanceof Date && b instanceof Date)
-    return a.getTime() === b.getTime();
-  if (!a || !b || typeof a !== "object" || typeof b !== "object") return false;
-  const isArray = Array.isArray(a);
-  if (isArray !== Array.isArray(b)) return false;
-  if (isArray) {
-    if (a.length !== b.length) return false;
-    for (let i = 0; i < a.length; i++) {
-      if (!isEqual(a[i], b[i])) return false;
-    }
-    return true;
-  }
-  const proto = Object.getPrototypeOf(a);
-  if (proto !== Object.prototype && proto !== null) return false;
-  if (Object.getPrototypeOf(b) !== proto) return false;
-  const keysA = Object.keys(a);
-  const keysB = Object.keys(b);
-  if (keysA.length !== keysB.length) return false;
-  for (const key of keysA) {
-    if (!isEqual(a[key], b[key])) return false;
-  }
-  return true;
-}
 
 function usePath(name) {
   const path = useMemo(() => create$1(normalizePath(name)), [name]);
@@ -1478,6 +1493,9 @@ function errorIdFromKey(key) {
   const id = key.replace(/["'[\],\s]+/g, "-").replace(/^-+|-+$/g, "");
   return id || "field";
 }
+function fieldErrorId(name) {
+  return errorIdFromKey(create$1(name).key);
+}
 const Field = React.forwardRef(
   ({
     validate,
@@ -1566,16 +1584,17 @@ const Field = React.forwardRef(
     );
     const toValue = eventToValue ?? ((e) => e.target.value);
     const errorId = errorIdFromKey(fieldKey);
+    const describedBy = error ? [props["aria-describedby"], errorId].filter(Boolean).join(" ") : props["aria-describedby"];
     return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(
       Component,
       {
-        "aria-invalid": error ? true : void 0,
-        "aria-describedby": error && renderError ? errorId : void 0,
         ...props,
         name: fieldKey,
         onBlur,
         ...asProps,
         ...valueToProps ? valueToProps(value) : { value },
+        "aria-invalid": error ? true : props["aria-invalid"],
+        "aria-describedby": describedBy,
         disabled: isDisabled,
         onChange: (e) => onChange(toValue(e)),
         ref: mergedRef
@@ -1617,12 +1636,13 @@ const Checkbox = React.forwardRef(
     return /* @__PURE__ */ React.createElement(
       "input",
       {
-        "aria-invalid": error ? true : void 0,
         ...props,
         name: fieldKey,
         onBlur,
         type: "checkbox",
         checked: !!value,
+        "aria-invalid": error ? true : props["aria-invalid"],
+        "aria-describedby": error ? [props["aria-describedby"], errorIdFromKey(fieldKey)].filter(Boolean).join(" ") : props["aria-describedby"],
         disabled: isDisabled,
         onChange: (e) => onChange(e.target.checked),
         ref
@@ -1670,12 +1690,13 @@ const Select = React.forwardRef(
     return /* @__PURE__ */ React.createElement(
       "select",
       {
-        "aria-invalid": error ? true : void 0,
         ...props,
         name: fieldKey,
         onBlur,
         multiple,
         value: toSelectValue(multiple, value),
+        "aria-invalid": error ? true : props["aria-invalid"],
+        "aria-describedby": error ? [props["aria-describedby"], errorIdFromKey(fieldKey)].filter(Boolean).join(" ") : props["aria-describedby"],
         disabled: isDisabled,
         onChange: (e) => onChange(
           multiple ? Array.from(e.target.selectedOptions, (option) => option.value) : e.target.value
@@ -1687,5 +1708,5 @@ const Select = React.forwardRef(
   }
 );
 
-export { Checkbox, CheckboxGroupContext, CheckboxGroupProvider, Field, Form, FormContext, FormProvider, Select, VALIDATION_OUTCOME, clearErrors, create as createForm, createFormContext, ensureValidate, getDirtyFields, getError, getErrorByPath, getErrors, getFieldErrors, getFieldErrorsByPath, getFieldState, getFirstError, getTouchedFields, getValue, getValueByPath, getValues, handleSubmit, hasErrors, hasTouched, hasTouchedByPath, incrementSubmitCount, isDirty, isTouched, removeField, removeFieldByPath, reset, resetField, setDisabled, setError, setErrorByPath, setFocus, setInitialValues, setIsSubmitting, setSubmitSuccessful, setTouched, setTouchedByPath, setValidatingByPath, setValue, setValueByPath, subscribe, trigger, unsetValidatingByPath, useCheckboxGroupContext, useDirtyFields, useError, useErrorByPath, useField, useFieldArray, useFieldErrors, useFieldErrorsByPath, useForm, useFormContext, useHasErrors, useIsDirty, useIsSubmitting, useSubmitCount, useTouched, useTouchedByPath, useTouchedFields, useValue, useValueByPath, useWatch, validate };
+export { Checkbox, CheckboxGroupContext, CheckboxGroupProvider, Field, Form, FormContext, FormProvider, Select, VALIDATION_OUTCOME, clearErrors, create as createForm, createFormContext, ensureValidate, fieldErrorId, getDirtyFields, getError, getErrorByPath, getErrors, getFieldErrors, getFieldErrorsByPath, getFieldState, getFirstError, getTouchedFields, getValue, getValueByPath, getValues, handleSubmit, hasErrors, hasTouched, hasTouchedByPath, incrementSubmitCount, isDirty, isTouched, removeField, removeFieldByPath, reset, resetField, setDisabled, setError, setErrorByPath, setFocus, setInitialValues, setIsSubmitting, setServerErrors, setSubmitSuccessful, setTouched, setTouchedByPath, setValidatingByPath, setValue, setValueByPath, subscribe, trigger, unsetValidatingByPath, useCheckboxGroupContext, useDirtyFields, useError, useErrorByPath, useField, useFieldArray, useFieldErrors, useFieldErrorsByPath, useForm, useFormContext, useHasErrors, useIsDirty, useIsSubmitting, useSubmitCount, useTouched, useTouchedByPath, useTouchedFields, useValue, useValueByPath, useWatch, validate };
 //# sourceMappingURL=index.mjs.map