@firecms/formex 3.0.0-canary.23 → 3.0.0-canary.231

package/README.md

@@ -14,11 +14,11 @@ Formex is a lightweight, flexible library designed to simplify form handling wit
 To install Formex, you can use either npm or yarn:
 
 ```sh
-npm install your-formex-package-name
+npm install @firecms/formex
 
 # or if you're using yarn
 
-yarn add your-formex-package-name
+yarn add @firecms/formex
 ```
 
 ## Quick Start

package/dist/Field.d.ts

@@ -18,7 +18,6 @@ export interface FormexFieldProps<Value = any, FormValues extends object = any>
     field: FieldInputProps<Value>;
     form: FormexController<FormValues>;
 }
-export type FieldValidator = (value: any) => string | void | Promise<string | void>;
 export interface FieldConfig<Value, C extends React.ElementType | undefined = undefined> {
     /**
      * Component to render. Can either be a string e.g. 'select', 'input', or 'textarea', or a component.

package/dist/index.es.js

@@ -1,172 +1,480 @@
-import * as x from "react";
-import b, { useContext as Q, useState as h, useEffect as U } from "react";
-import T from "react-fast-compare";
-const D = b.createContext({}), X = () => Q(D), nt = D.Provider, st = (t) => Array.isArray(t) && t.length === 0, M = (t) => typeof t == "function", y = (t) => t !== null && typeof t == "object", Y = (t) => String(Math.floor(Number(t))) === t, ot = (t) => Object.prototype.toString.call(t) === "[object String]", ct = (t) => t !== t, ut = (t) => x.Children.count(t) === 0, it = (t) => y(t) && M(t.then), at = (t) => t && y(t) && y(t.target);
-function lt(t) {
-  if (t = t || (typeof document < "u" ? document : void 0), typeof t > "u")
+import { c } from "react-compiler-runtime";
+import * as React from "react";
+import React__default, { useContext, useRef, useState, useEffect, useCallback, useMemo } from "react";
+import equal from "react-fast-compare";
+const FormexContext = React__default.createContext({});
+const useFormex = () => {
+  return useContext(FormexContext);
+};
+const Formex = FormexContext.Provider;
+const isEmptyArray = (value) => Array.isArray(value) && value.length === 0;
+const isFunction = (obj) => typeof obj === "function";
+const isObject = (obj) => obj !== null && typeof obj === "object";
+const isInteger = (obj) => String(Math.floor(Number(obj))) === obj;
+const isString = (obj) => Object.prototype.toString.call(obj) === "[object String]";
+const isNaN = (obj) => obj !== obj;
+const isEmptyChildren = (children) => React.Children.count(children) === 0;
+const isPromise = (value) => isObject(value) && isFunction(value.then);
+const isInputEvent = (value) => value && isObject(value) && isObject(value.target);
+function getActiveElement(doc) {
+  doc = doc || (typeof document !== "undefined" ? document : void 0);
+  if (typeof doc === "undefined") {
     return null;
+  }
   try {
-    return t.activeElement || t.body;
-  } catch {
-    return t.body;
+    return doc.activeElement || doc.body;
+  } catch (e) {
+    return doc.body;
   }
 }
-function F(t, a, n, u = 0) {
-  const r = O(a);
-  for (; t && u < r.length; )
-    t = t[r[u++]];
-  return u !== r.length && !t || t === void 0 ? n : t;
+function getIn(obj, key, def, p = 0) {
+  const path = toPath(key);
+  while (obj && p < path.length) {
+    obj = obj[path[p++]];
+  }
+  if (p !== path.length && !obj) {
+    return def;
+  }
+  return obj === void 0 ? def : obj;
 }
-function Z(t, a, n) {
-  const u = V(t);
-  let r = u, e = 0;
-  const i = O(a);
-  for (; e < i.length - 1; e++) {
-    const c = i[e], f = F(t, i.slice(0, e + 1));
-    if (f && (y(f) || Array.isArray(f)))
-      r = r[c] = V(f);
-    else {
-      const d = i[e + 1];
-      r = r[c] = Y(d) && Number(d) >= 0 ? [] : {};
+function setIn(obj, path, value) {
+  const res = clone(obj);
+  let resVal = res;
+  let i = 0;
+  const pathArray = toPath(path);
+  for (; i < pathArray.length - 1; i++) {
+    const currentPath = pathArray[i];
+    const currentObj = getIn(obj, pathArray.slice(0, i + 1));
+    if (currentObj && (isObject(currentObj) || Array.isArray(currentObj))) {
+      resVal = resVal[currentPath] = clone(currentObj);
+    } else {
+      const nextPath = pathArray[i + 1];
+      resVal = resVal[currentPath] = isInteger(nextPath) && Number(nextPath) >= 0 ? [] : {};
     }
   }
-  return (e === 0 ? t : r)[i[e]] === n ? t : (n === void 0 ? delete r[i[e]] : r[i[e]] = n, e === 0 && n === void 0 && delete u[i[e]], u);
+  if ((i === 0 ? obj : resVal)[pathArray[i]] === value) {
+    return obj;
+  }
+  if (value === void 0) {
+    delete resVal[pathArray[i]];
+  } else {
+    resVal[pathArray[i]] = value;
+  }
+  if (i === 0 && value === void 0) {
+    delete res[pathArray[i]];
+  }
+  return res;
 }
-function j(t, a, n = /* @__PURE__ */ new WeakMap(), u = {}) {
-  for (const r of Object.keys(t)) {
-    const e = t[r];
-    y(e) ? n.get(e) || (n.set(e, !0), u[r] = Array.isArray(e) ? [] : {}, j(e, a, n, u[r])) : u[r] = a;
+function setNestedObjectValues(object, value, visited = /* @__PURE__ */ new WeakMap(), response = {}) {
+  for (const k of Object.keys(object)) {
+    const val = object[k];
+    if (isObject(val)) {
+      if (!visited.get(val)) {
+        visited.set(val, true);
+        response[k] = Array.isArray(val) ? [] : {};
+        setNestedObjectValues(val, value, visited, response[k]);
+      }
+    } else {
+      response[k] = value;
+    }
   }
-  return u;
+  return response;
 }
-function V(t) {
-  return Array.isArray(t) ? [...t] : typeof t == "object" && t !== null ? { ...t } : t;
+function clone(value) {
+  if (Array.isArray(value)) {
+    return [...value];
+  } else if (typeof value === "object" && value !== null) {
+    return {
+      ...value
+    };
+  } else {
+    return value;
+  }
 }
-function O(t) {
-  return Array.isArray(t) ? t : t.replace(/\[(\d+)]/g, ".$1").replace(/^\./, "").replace(/\.$/, "").split(".");
+function toPath(value) {
+  if (Array.isArray(value)) return value;
+  return value.replace(/\[(\d+)]/g, ".$1").replace(/^\./, "").replace(/\.$/, "").split(".");
 }
-function ft({
-  validate: t,
-  name: a,
-  children: n,
-  as: u,
-  // `as` is reserved in typescript lol
-  // component,
-  className: r,
-  ...e
-}) {
-  const i = X(), c = tt({ name: a, ...e }, i);
-  if (M(n))
-    return n({ field: c, form: i });
-  const f = u || "input";
-  if (typeof f == "string") {
-    const { innerRef: d, ...p } = e;
-    return x.createElement(
-      f,
-      { ref: d, ...c, ...p, className: r },
-      n
-    );
-  }
-  return x.createElement(f, { ...c, ...e, className: r }, n);
+function Field(t0) {
+  const $ = c(37);
+  let children;
+  let className;
+  let is;
+  let name;
+  let props;
+  if ($[0] !== t0) {
+    const {
+      validate,
+      name: t12,
+      children: t22,
+      as: t3,
+      className: t4,
+      ...t5
+    } = t0;
+    name = t12;
+    children = t22;
+    is = t3;
+    className = t4;
+    props = t5;
+    $[0] = t0;
+    $[1] = children;
+    $[2] = className;
+    $[3] = is;
+    $[4] = name;
+    $[5] = props;
+  } else {
+    children = $[1];
+    className = $[2];
+    is = $[3];
+    name = $[4];
+    props = $[5];
+  }
+  const formex = useFormex();
+  let field;
+  let t1;
+  if ($[6] !== children || $[7] !== formex || $[8] !== name || $[9] !== props) {
+    t1 = Symbol.for("react.early_return_sentinel");
+    bb0: {
+      field = getFieldProps({
+        name,
+        ...props
+      }, formex);
+      if (isFunction(children)) {
+        t1 = children({
+          field,
+          form: formex
+        });
+        break bb0;
+      }
+    }
+    $[6] = children;
+    $[7] = formex;
+    $[8] = name;
+    $[9] = props;
+    $[10] = field;
+    $[11] = t1;
+  } else {
+    field = $[10];
+    t1 = $[11];
+  }
+  if (t1 !== Symbol.for("react.early_return_sentinel")) {
+    return t1;
+  }
+  const asElement = is || "input";
+  if (typeof asElement === "string") {
+    let innerRef;
+    let rest;
+    if ($[12] !== props) {
+      ({
+        innerRef,
+        ...rest
+      } = props);
+      $[12] = props;
+      $[13] = innerRef;
+      $[14] = rest;
+    } else {
+      innerRef = $[13];
+      rest = $[14];
+    }
+    let t22;
+    if ($[15] !== asElement || $[16] !== children || $[17] !== className || $[18] !== field || $[19] !== innerRef || $[20] !== rest) {
+      let t3;
+      if ($[22] !== className || $[23] !== field || $[24] !== innerRef || $[25] !== rest) {
+        t3 = {
+          ref: innerRef,
+          ...field,
+          ...rest,
+          className
+        };
+        $[22] = className;
+        $[23] = field;
+        $[24] = innerRef;
+        $[25] = rest;
+        $[26] = t3;
+      } else {
+        t3 = $[26];
+      }
+      t22 = React.createElement(asElement, t3, children);
+      $[15] = asElement;
+      $[16] = children;
+      $[17] = className;
+      $[18] = field;
+      $[19] = innerRef;
+      $[20] = rest;
+      $[21] = t22;
+    } else {
+      t22 = $[21];
+    }
+    return t22;
+  }
+  let t2;
+  if ($[27] !== asElement || $[28] !== children || $[29] !== className || $[30] !== field || $[31] !== props) {
+    let t3;
+    if ($[33] !== className || $[34] !== field || $[35] !== props) {
+      t3 = {
+        ...field,
+        ...props,
+        className
+      };
+      $[33] = className;
+      $[34] = field;
+      $[35] = props;
+      $[36] = t3;
+    } else {
+      t3 = $[36];
+    }
+    t2 = React.createElement(asElement, t3, children);
+    $[27] = asElement;
+    $[28] = children;
+    $[29] = className;
+    $[30] = field;
+    $[31] = props;
+    $[32] = t2;
+  } else {
+    t2 = $[32];
+  }
+  return t2;
 }
-const tt = (t, a) => {
-  const n = y(t), u = n ? t.name : t, r = F(a.values, u), e = {
-    name: u,
-    value: r,
-    onChange: a.handleChange,
-    onBlur: a.handleBlur
+const getFieldProps = (nameOrOptions, formex) => {
+  const isAnObject = isObject(nameOrOptions);
+  const name = isAnObject ? nameOrOptions.name : nameOrOptions;
+  const valueState = getIn(formex.values, name);
+  const field = {
+    name,
+    value: valueState,
+    onChange: formex.handleChange,
+    onBlur: formex.handleBlur
   };
-  if (n) {
+  if (isAnObject) {
     const {
-      type: i,
-      value: c,
+      type,
+      value: valueProp,
       // value is special for checkboxes
-      as: f,
-      multiple: d
-    } = t;
-    i === "checkbox" ? c === void 0 ? e.checked = !!r : (e.checked = !!(Array.isArray(r) && ~r.indexOf(c)), e.value = c) : i === "radio" ? (e.checked = r === c, e.value = c) : f === "select" && d && (e.value = e.value || [], e.multiple = !0);
+      as: is,
+      multiple
+    } = nameOrOptions;
+    if (type === "checkbox") {
+      if (valueProp === void 0) {
+        field.checked = !!valueState;
+      } else {
+        field.checked = !!(Array.isArray(valueState) && ~valueState.indexOf(valueProp));
+        field.value = valueProp;
+      }
+    } else if (type === "radio") {
+      field.checked = valueState === valueProp;
+      field.value = valueProp;
+    } else if (is === "select" && multiple) {
+      field.value = field.value || [];
+      field.multiple = true;
+    }
   }
-  return e;
+  return field;
 };
-function dt({ initialValues: t, initialErrors: a, validation: n, validateOnChange: u = !1, onSubmit: r, validateOnInitialRender: e = !1 }) {
-  const i = b.useRef(t), c = b.useRef(t), [f, d] = h(t), [p, R] = h({}), [k, g] = h(a ?? {}), [_, A] = h(!1), [I, C] = h(0), [$, S] = h(!1), [q, w] = h(!1);
-  U(() => {
-    e && E();
+function useCreateFormex({
+  initialValues,
+  initialErrors,
+  initialDirty,
+  validation,
+  validateOnChange = false,
+  validateOnInitialRender = false,
+  onSubmit,
+  onReset,
+  debugId
+}) {
+  const initialValuesRef = useRef(initialValues);
+  const valuesRef = useRef(initialValues);
+  const debugIdRef = useRef(debugId);
+  const [values, setValuesInner] = useState(initialValues);
+  const [touchedState, setTouchedState] = useState({});
+  const [errors, setErrors] = useState(initialErrors ?? {});
+  const [dirty, setDirty] = useState(initialDirty ?? false);
+  const [submitCount, setSubmitCount] = useState(0);
+  const [isSubmitting, setIsSubmitting] = useState(false);
+  const [isValidating, setIsValidating] = useState(false);
+  const [version, setVersion] = useState(0);
+  const historyRef = useRef([initialValues]);
+  const historyIndexRef = useRef(0);
+  useEffect(() => {
+    if (validateOnInitialRender) {
+      validate();
+    }
+  }, []);
+  const setValues = useCallback((newValues) => {
+    valuesRef.current = newValues;
+    setValuesInner(newValues);
+    setDirty(!equal(initialValuesRef.current, newValues));
+    const newHistory = historyRef.current.slice(0, historyIndexRef.current + 1);
+    newHistory.push(newValues);
+    historyRef.current = newHistory;
+    historyIndexRef.current = newHistory.length - 1;
   }, []);
-  const W = (s) => {
-    c.current = s, d(s), A(T(i.current, s));
-  }, E = async () => {
-    w(!0);
-    const s = c.current, o = await n?.(s);
-    return g(o ?? {}), w(!1), o;
-  }, N = (s, o, l) => {
-    const m = Z(c.current, s, o);
-    c.current = m, d(m), T(F(i.current, s), o) || A(!0), l && E();
-  }, z = (s, o) => {
-    const l = { ...k };
-    o ? l[s] = o : delete l[s], g(l);
-  }, v = (s, o, l) => {
-    const m = { ...p };
-    m[s] = o, R(m), l && E();
-  }, G = (s) => {
-    const o = s.target, l = o.type === "checkbox" ? o.checked : o.value, m = o.name;
-    N(m, l, u), v(m, !0);
-  }, H = (s) => {
-    const l = s.target.name;
-    v(l, !0);
-  }, J = async (s) => {
-    s?.preventDefault(), s?.stopPropagation(), S(!0), C(I + 1);
-    const o = await n?.(c.current);
-    o && Object.keys(o).length > 0 ? g(o) : (g({}), await r?.(c.current, B.current)), S(!1);
-  }, K = (s) => {
+  const validate = useCallback(async () => {
+    setIsValidating(true);
+    const validationErrors = await validation?.(valuesRef.current);
+    setErrors(validationErrors ?? {});
+    setIsValidating(false);
+    return validationErrors;
+  }, [validation]);
+  const setFieldValue = useCallback((key, value, shouldValidate) => {
+    const newValues_0 = setIn(valuesRef.current, key, value);
+    valuesRef.current = newValues_0;
+    setValuesInner(newValues_0);
+    if (!equal(getIn(initialValuesRef.current, key), value)) {
+      setDirty(true);
+    }
+    if (shouldValidate) {
+      validate();
+    }
+    const newHistory_0 = historyRef.current.slice(0, historyIndexRef.current + 1);
+    newHistory_0.push(newValues_0);
+    historyRef.current = newHistory_0;
+    historyIndexRef.current = newHistory_0.length - 1;
+  }, [validate]);
+  const setFieldError = useCallback((key_0, error) => {
+    setErrors((prevErrors) => {
+      const newErrors = {
+        ...prevErrors
+      };
+      if (error) {
+        newErrors[key_0] = error;
+      } else {
+        delete newErrors[key_0];
+      }
+      return newErrors;
+    });
+  }, []);
+  const setFieldTouched = useCallback((key_1, touched, shouldValidate_0) => {
+    setTouchedState((prev) => ({
+      ...prev,
+      [key_1]: touched
+    }));
+    if (shouldValidate_0) {
+      validate();
+    }
+  }, [validate]);
+  const handleChange = useCallback((event) => {
+    const target = event.target;
+    let value_0;
+    if (target.type === "checkbox") {
+      value_0 = target.checked;
+    } else if (target.type === "number") {
+      value_0 = target.valueAsNumber;
+    } else {
+      value_0 = target.value;
+    }
+    const name = target.name;
+    setFieldValue(name, value_0, validateOnChange);
+    setFieldTouched(name, true);
+  }, [setFieldValue, setFieldTouched, validateOnChange]);
+  const handleBlur = useCallback((event_0) => {
+    const target_0 = event_0.target;
+    const name_0 = target_0.name;
+    setFieldTouched(name_0, true);
+  }, [setFieldTouched]);
+  const submit = useCallback(async (e) => {
+    e?.preventDefault();
+    e?.stopPropagation();
+    setIsSubmitting(true);
+    setSubmitCount((prev_0) => prev_0 + 1);
+    const validationErrors_0 = await validation?.(valuesRef.current);
+    if (validationErrors_0 && Object.keys(validationErrors_0).length > 0) {
+      setErrors(validationErrors_0);
+    } else {
+      setErrors({});
+      await onSubmit?.(valuesRef.current, controllerRef.current);
+    }
+    setIsSubmitting(false);
+    setVersion((prev_1) => prev_1 + 1);
+  }, [onSubmit, validation]);
+  const resetForm = useCallback((props) => {
     const {
-      submitCount: o,
-      values: l,
-      errors: m,
-      touched: L
-    } = s ?? {};
-    i.current = l ?? t, c.current = l ?? t, d(l ?? t), g(m ?? {}), R(L ?? {}), A(!1), C(o ?? 0);
-  }, P = {
-    values: f,
-    initialValues: i.current,
-    handleChange: G,
-    isSubmitting: $,
-    setSubmitting: S,
-    setValues: W,
-    setFieldValue: N,
-    errors: k,
-    setFieldError: z,
-    touched: p,
-    setFieldTouched: v,
-    dirty: _,
-    setDirty: A,
-    handleSubmit: J,
-    submitCount: I,
-    setSubmitCount: C,
-    handleBlur: H,
-    validate: E,
-    isValidating: q,
-    resetForm: K
-  }, B = b.useRef(P);
-  return B.current = P, P;
+      submitCount: submitCountProp,
+      values: valuesProp,
+      errors: errorsProp,
+      touched: touchedProp
+    } = props ?? {};
+    valuesRef.current = valuesProp ?? initialValuesRef.current;
+    initialValuesRef.current = valuesProp ?? initialValuesRef.current;
+    setValuesInner(valuesProp ?? initialValuesRef.current);
+    setErrors(errorsProp ?? {});
+    setTouchedState(touchedProp ?? {});
+    setDirty(false);
+    setSubmitCount(submitCountProp ?? 0);
+    setVersion((prev_2) => prev_2 + 1);
+    onReset?.(controllerRef.current);
+    historyRef.current = [valuesProp ?? initialValuesRef.current];
+    historyIndexRef.current = 0;
+  }, [onReset]);
+  const undo = useCallback(() => {
+    if (historyIndexRef.current > 0) {
+      const newIndex = historyIndexRef.current - 1;
+      const newValues_1 = historyRef.current[newIndex];
+      setValuesInner(newValues_1);
+      valuesRef.current = newValues_1;
+      historyIndexRef.current = newIndex;
+    }
+  }, []);
+  const redo = useCallback(() => {
+    if (historyIndexRef.current < historyRef.current.length - 1) {
+      const newIndex_0 = historyIndexRef.current + 1;
+      const newValues_2 = historyRef.current[newIndex_0];
+      setValuesInner(newValues_2);
+      valuesRef.current = newValues_2;
+      historyIndexRef.current = newIndex_0;
+    }
+  }, []);
+  const controllerRef = useRef({});
+  const controller = useMemo(() => ({
+    values,
+    initialValues: initialValuesRef.current,
+    handleChange,
+    isSubmitting,
+    setSubmitting: setIsSubmitting,
+    setValues,
+    setFieldValue,
+    errors,
+    setFieldError,
+    touched: touchedState,
+    setFieldTouched,
+    dirty,
+    setDirty,
+    handleSubmit: submit,
+    submitCount,
+    setSubmitCount,
+    handleBlur,
+    validate,
+    isValidating,
+    resetForm,
+    version,
+    debugId: debugIdRef.current,
+    undo,
+    redo,
+    canUndo: historyIndexRef.current > 0,
+    canRedo: historyIndexRef.current < historyRef.current.length - 1
+  }), [values, errors, touchedState, dirty, isSubmitting, submitCount, isValidating, version, handleChange, handleBlur, setValues, setFieldValue, setFieldTouched, setFieldError, validate, submit, resetForm, undo, redo]);
+  useEffect(() => {
+    controllerRef.current = controller;
+  }, [controller]);
+  return controller;
 }
 export {
-  ft as Field,
-  nt as Formex,
-  lt as getActiveElement,
-  F as getIn,
-  st as isEmptyArray,
-  ut as isEmptyChildren,
-  M as isFunction,
-  at as isInputEvent,
-  Y as isInteger,
-  ct as isNaN,
-  y as isObject,
-  it as isPromise,
-  ot as isString,
-  Z as setIn,
-  j as setNestedObjectValues,
-  dt as useCreateFormex,
-  X as useFormex
+  Field,
+  Formex,
+  clone,
+  getActiveElement,
+  getIn,
+  isEmptyArray,
+  isEmptyChildren,
+  isFunction,
+  isInputEvent,
+  isInteger,
+  isNaN,
+  isObject,
+  isPromise,
+  isString,
+  setIn,
+  setNestedObjectValues,
+  useCreateFormex,
+  useFormex
 };
 //# sourceMappingURL=index.es.js.map