@rebasepro/formex 0.4.0 → 0.6.0

package/dist/index.es.js

@@ -1,490 +1,326 @@
-import { c } from "react-compiler-runtime";
-import * as React from "react";
-import React__default, { useContext, useRef, useState, useCallback, useEffect, useMemo } from "react";
+import * as React$1 from "react";
+import React, { useCallback, useContext, useEffect, useMemo, useRef, useState } from "react";
 import { jsx } from "react/jsx-runtime";
 import { deepEqual } from "fast-equals";
-const FormexContext = React__default.createContext(null);
-const useFormex = () => {
-  const ctx = useContext(FormexContext);
-  if (!ctx) {
-    throw new Error("useFormex must be used within a Formex provider");
-  }
-  return ctx;
+//#region src/Formex.tsx
+var FormexContext = React.createContext(null);
+var useFormex = () => {
+	const ctx = useContext(FormexContext);
+	if (!ctx) throw new Error("useFormex must be used within a Formex provider");
+	return ctx;
 };
-const Formex = (t0) => {
-  const $ = c(3);
-  const {
-    value,
-    children
-  } = t0;
-  let t1;
-  if ($[0] !== children || $[1] !== value) {
-    t1 = /* @__PURE__ */ jsx(FormexContext.Provider, { value, children });
-    $[0] = children;
-    $[1] = value;
-    $[2] = t1;
-  } else {
-    t1 = $[2];
-  }
-  return t1;
+var Formex = ({ value, children }) => {
+	return /* @__PURE__ */ jsx(FormexContext.Provider, {
+		value,
+		children
+	});
 };
-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 isNaN = (obj) => obj !== obj;
+//#endregion
+//#region src/utils.ts
+/** @private is the value an empty array? */
+var isEmptyArray = (value) => Array.isArray(value) && value.length === 0;
+/** @private is the given object a Function? */
+var isFunction = (obj) => typeof obj === "function";
+/** @private is the given object an Object? */
+var isObject = (obj) => obj !== null && typeof obj === "object";
+/** @private is the given object an integer? */
+var isInteger = (obj) => String(Math.floor(Number(obj))) === obj;
+/** @private is the given object a NaN? */
+var isNaN = (obj) => obj !== obj;
+/**
+* Deeply get a value from an object via its path.
+*/
 function getIn(obj, key, def, p = 0) {
-  const path = toPath(key);
-  let current = obj;
-  while (current && p < path.length) {
-    current = current[path[p++]];
-  }
-  if (p !== path.length && !current) {
-    return def;
-  }
-  return current === void 0 ? def : current;
+	const path = toPath(key);
+	let current = obj;
+	while (current && p < path.length) current = current[path[p++]];
+	if (p !== path.length && !current) return def;
+	return current === void 0 ? def : current;
 }
 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 ? [] : {};
-    }
-  }
-  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;
+	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 ? [] : {};
+		}
+	}
+	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 clone(value) {
-  if (Array.isArray(value)) {
-    return [...value];
-  } else if (typeof value === "object" && value !== null) {
-    if (Object.getPrototypeOf(value) !== Object.prototype) {
-      return value;
-    }
-    return {
-      ...value
-    };
-  } else {
-    return value;
-  }
+	if (Array.isArray(value)) return [...value];
+	else if (typeof value === "object" && value !== null) {
+		if (Object.getPrototypeOf(value) !== Object.prototype) return value;
+		return { ...value };
+	} else return value;
 }
 function toPath(value) {
-  if (Array.isArray(value)) return value;
-  return value.replace(/\[(\d+)]/g, ".$1").replace(/^\./, "").replace(/\.$/, "").split(".");
+	if (Array.isArray(value)) return value;
+	return value.replace(/\[(\d+)]/g, ".$1").replace(/^\./, "").replace(/\.$/, "").split(".");
 }
-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 = /* @__PURE__ */ 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 !== /* @__PURE__ */ 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;
+//#endregion
+//#region src/Field.tsx
+function Field({ validate, name, children, as: is, className, ...props }) {
+	const formex = useFormex();
+	const field = getFieldProps({
+		name,
+		...props
+	}, formex);
+	if (isFunction(children)) return children({
+		field,
+		form: formex
+	});
+	const asElement = is || "input";
+	if (typeof asElement === "string") {
+		const { innerRef, ...rest } = props;
+		return React$1.createElement(asElement, {
+			ref: innerRef,
+			...field,
+			...rest,
+			className
+		}, children);
+	}
+	return React$1.createElement(asElement, {
+		...field,
+		...props,
+		className
+	}, children);
 }
-const getFieldProps = (nameOrOptions, formex) => {
-  const name = typeof nameOrOptions === "string" ? nameOrOptions : nameOrOptions.name;
-  const valueState = getIn(formex.values, name);
-  const field = {
-    name,
-    value: valueState,
-    onChange: formex.handleChange,
-    onBlur: formex.handleBlur
-  };
-  if (typeof nameOrOptions !== "string") {
-    const {
-      type,
-      value: valueProp,
-      // value is special for checkboxes
-      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 field;
+var getFieldProps = (nameOrOptions, formex) => {
+	const name = typeof nameOrOptions === "string" ? nameOrOptions : nameOrOptions.name;
+	const valueState = getIn(formex.values, name);
+	const field = {
+		name,
+		value: valueState,
+		onChange: formex.handleChange,
+		onBlur: formex.handleBlur
+	};
+	if (typeof nameOrOptions !== "string") {
+		const { type, value: valueProp, 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 field;
 };
-function useCreateFormex({
-  initialValues,
-  initialErrors,
-  initialDirty,
-  initialTouched,
-  validation,
-  validateOnChange = false,
-  validateOnInitialRender = false,
-  onSubmit,
-  onReset,
-  onValuesChangeDeferred,
-  debugId
-}) {
-  const initialValuesRef = useRef(initialValues);
-  const valuesRef = useRef(initialValues);
-  const debugIdRef = useRef(debugId);
-  const [values, setValuesInner] = useState(initialValues);
-  const [touchedState, setTouchedState] = useState(initialTouched ?? {});
-  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 onValuesChangeRef = useRef(onValuesChangeDeferred);
-  onValuesChangeRef.current = onValuesChangeDeferred;
-  const debounceTimeoutRef = useRef(void 0);
-  const callDebouncedOnValuesChange = useCallback((values_0) => {
-    if (onValuesChangeRef.current) {
-      if (debounceTimeoutRef.current) {
-        clearTimeout(debounceTimeoutRef.current);
-      }
-      debounceTimeoutRef.current = setTimeout(() => {
-        onValuesChangeRef.current?.(values_0, controllerRef.current);
-      }, 300);
-    }
-  }, []);
-  const historyRef = useRef([initialValues]);
-  const historyIndexRef = useRef(0);
-  useEffect(() => {
-    if (validateOnInitialRender) {
-      validate();
-    }
-  }, []);
-  const setValues = useCallback((newValues) => {
-    valuesRef.current = newValues;
-    setValuesInner(newValues);
-    setDirty(!deepEqual(initialValuesRef.current, newValues));
-    const newHistory = historyRef.current.slice(0, historyIndexRef.current + 1);
-    newHistory.push(newValues);
-    historyRef.current = newHistory;
-    historyIndexRef.current = newHistory.length - 1;
-    callDebouncedOnValuesChange(newValues);
-  }, [callDebouncedOnValuesChange]);
-  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 (!deepEqual(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;
-    callDebouncedOnValuesChange(newValues_0);
-  }, [validate, callDebouncedOnValuesChange]);
-  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: 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 ?? initialTouched ?? {});
-    setDirty(false);
-    setSubmitCount(submitCountProp ?? 0);
-    setVersion((prev_2) => prev_2 + 1);
-    onReset?.(controllerRef.current);
-    historyRef.current = [valuesProp ?? initialValuesRef.current];
-    historyIndexRef.current = 0;
-  }, [onReset, initialTouched]);
-  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;
-      setDirty(!deepEqual(initialValuesRef.current, newValues_1));
-      callDebouncedOnValuesChange(newValues_1);
-    }
-  }, [callDebouncedOnValuesChange]);
-  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;
-      setDirty(!deepEqual(initialValuesRef.current, newValues_2));
-      callDebouncedOnValuesChange(newValues_2);
-    }
-  }, [callDebouncedOnValuesChange]);
-  const controllerRef = useRef({});
-  const controller = useMemo(() => ({
-    values,
-    initialValues: initialValuesRef.current,
-    handleChange,
-    isSubmitting,
-    setSubmitting: setIsSubmitting,
-    setValues,
-    setFieldValue,
-    errors,
-    setFieldError,
-    touched: touchedState,
-    setFieldTouched,
-    setTouched: setTouchedState,
-    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, setTouchedState, setFieldError, validate, submit, resetForm, undo, redo]);
-  useEffect(() => {
-    controllerRef.current = controller;
-  }, [controller]);
-  return controller;
+//#endregion
+//#region src/useCreateFormex.tsx
+function useCreateFormex({ initialValues, initialErrors, initialDirty, initialTouched, validation, validateOnChange = false, validateOnInitialRender = false, onSubmit, onReset, onValuesChangeDeferred, debugId }) {
+	const initialValuesRef = useRef(initialValues);
+	const valuesRef = useRef(initialValues);
+	const debugIdRef = useRef(debugId);
+	const [values, setValuesInner] = useState(initialValues);
+	const [touchedState, setTouchedState] = useState(initialTouched ?? {});
+	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 onValuesChangeRef = useRef(onValuesChangeDeferred);
+	onValuesChangeRef.current = onValuesChangeDeferred;
+	const debounceTimeoutRef = useRef(void 0);
+	const callDebouncedOnValuesChange = useCallback((values) => {
+		if (onValuesChangeRef.current) {
+			if (debounceTimeoutRef.current) clearTimeout(debounceTimeoutRef.current);
+			debounceTimeoutRef.current = setTimeout(() => {
+				onValuesChangeRef.current?.(values, controllerRef.current);
+			}, 300);
+		}
+	}, []);
+	const historyRef = useRef([initialValues]);
+	const historyIndexRef = useRef(0);
+	useEffect(() => {
+		if (validateOnInitialRender) validate();
+	}, []);
+	const setValues = useCallback((newValues) => {
+		valuesRef.current = newValues;
+		setValuesInner(newValues);
+		setDirty(!deepEqual(initialValuesRef.current, newValues));
+		const newHistory = historyRef.current.slice(0, historyIndexRef.current + 1);
+		newHistory.push(newValues);
+		historyRef.current = newHistory;
+		historyIndexRef.current = newHistory.length - 1;
+		callDebouncedOnValuesChange(newValues);
+	}, [callDebouncedOnValuesChange]);
+	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 = setIn(valuesRef.current, key, value);
+		valuesRef.current = newValues;
+		setValuesInner(newValues);
+		if (!deepEqual(getIn(initialValuesRef.current, key), value)) setDirty(true);
+		if (shouldValidate) validate();
+		const newHistory = historyRef.current.slice(0, historyIndexRef.current + 1);
+		newHistory.push(newValues);
+		historyRef.current = newHistory;
+		historyIndexRef.current = newHistory.length - 1;
+		callDebouncedOnValuesChange(newValues);
+	}, [validate, callDebouncedOnValuesChange]);
+	const setFieldError = useCallback((key, error) => {
+		setErrors((prevErrors) => {
+			const newErrors = { ...prevErrors };
+			if (error) newErrors[key] = error;
+			else delete newErrors[key];
+			return newErrors;
+		});
+	}, []);
+	const setFieldTouched = useCallback((key, touched, shouldValidate) => {
+		setTouchedState((prev) => ({
+			...prev,
+			[key]: touched
+		}));
+		if (shouldValidate) validate();
+	}, [validate]);
+	const handleChange = useCallback((event) => {
+		const target = event.target;
+		let value;
+		if (target.type === "checkbox") value = target.checked;
+		else if (target.type === "number") value = target.valueAsNumber;
+		else value = target.value;
+		const name = target.name;
+		setFieldValue(name, value, validateOnChange);
+		setFieldTouched(name, true);
+	}, [
+		setFieldValue,
+		setFieldTouched,
+		validateOnChange
+	]);
+	const handleBlur = useCallback((event) => {
+		const name = event.target.name;
+		setFieldTouched(name, true);
+	}, [setFieldTouched]);
+	const submit = useCallback(async (e) => {
+		e?.preventDefault();
+		e?.stopPropagation();
+		setIsSubmitting(true);
+		setSubmitCount((prev) => prev + 1);
+		const validationErrors = await validation?.(valuesRef.current);
+		if (validationErrors && Object.keys(validationErrors).length > 0) setErrors(validationErrors);
+		else {
+			setErrors({});
+			await onSubmit?.(valuesRef.current, controllerRef.current);
+		}
+		setIsSubmitting(false);
+		setVersion((prev) => prev + 1);
+	}, [onSubmit, validation]);
+	const resetForm = useCallback((props) => {
+		const { 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 ?? initialTouched ?? {});
+		setDirty(false);
+		setSubmitCount(submitCountProp ?? 0);
+		setVersion((prev) => prev + 1);
+		onReset?.(controllerRef.current);
+		historyRef.current = [valuesProp ?? initialValuesRef.current];
+		historyIndexRef.current = 0;
+	}, [onReset, initialTouched]);
+	const undo = useCallback(() => {
+		if (historyIndexRef.current > 0) {
+			const newIndex = historyIndexRef.current - 1;
+			const newValues = historyRef.current[newIndex];
+			setValuesInner(newValues);
+			valuesRef.current = newValues;
+			historyIndexRef.current = newIndex;
+			setDirty(!deepEqual(initialValuesRef.current, newValues));
+			callDebouncedOnValuesChange(newValues);
+		}
+	}, [callDebouncedOnValuesChange]);
+	const redo = useCallback(() => {
+		if (historyIndexRef.current < historyRef.current.length - 1) {
+			const newIndex = historyIndexRef.current + 1;
+			const newValues = historyRef.current[newIndex];
+			setValuesInner(newValues);
+			valuesRef.current = newValues;
+			historyIndexRef.current = newIndex;
+			setDirty(!deepEqual(initialValuesRef.current, newValues));
+			callDebouncedOnValuesChange(newValues);
+		}
+	}, [callDebouncedOnValuesChange]);
+	const controllerRef = useRef({});
+	const controller = useMemo(() => ({
+		values,
+		initialValues: initialValuesRef.current,
+		handleChange,
+		isSubmitting,
+		setSubmitting: setIsSubmitting,
+		setValues,
+		setFieldValue,
+		errors,
+		setFieldError,
+		touched: touchedState,
+		setFieldTouched,
+		setTouched: setTouchedState,
+		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,
+		setTouchedState,
+		setFieldError,
+		validate,
+		submit,
+		resetForm,
+		undo,
+		redo
+	]);
+	useEffect(() => {
+		controllerRef.current = controller;
+	}, [controller]);
+	return controller;
 }
-export {
-  Field,
-  Formex,
-  clone,
-  getIn,
-  isEmptyArray,
-  isFunction,
-  isInteger,
-  isNaN,
-  isObject,
-  setIn,
-  useCreateFormex,
-  useFormex
-};
-//# sourceMappingURL=index.es.js.map
+//#endregion
+export { Field, Formex, clone, getIn, isEmptyArray, isFunction, isInteger, isNaN, isObject, setIn, useCreateFormex, useFormex };
+
+//# sourceMappingURL=index.es.js.map