@povio/ui 3.4.0-rc.1 → 3.4.0-rc.11

package/dist/components/inputs/Toggle/Toggle.js

@@ -1,6 +1,5 @@
 import { UIOverrides } from "../../../config/uiOverrides.context.js";
 import { UIConfig } from "../../../config/uiConfig.context.js";
-import { FieldController } from "../shared/form.binding.js";
 import { FormFieldError } from "../FormField/FormFieldError.js";
 import { CheckContent } from "../shared/CheckContent.js";
 import { toggleContentClassName, toggleDefinition, toggleTypography } from "./toggle.cva.js";
@@ -9,9 +8,10 @@ import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { clsx } from "clsx";
 import { Switch } from "react-aria-components";
 import { mergeRefs } from "@react-aria/utils";
+import { Controller } from "react-hook-form";
 //#region src/components/inputs/Toggle/Toggle.tsx
 var ToggleBase = (props) => {
-	const $ = c(48);
+	const $ = c(50);
 	const ui = UIConfig.useConfig();
 	const toggleCva = UIOverrides.useCva("toggle.cva", toggleDefinition);
 	const toggleTypographyMap = UIOverrides.useMapper("toggle.typography", toggleTypography);
@@ -31,9 +31,10 @@ var ToggleBase = (props) => {
 	let t8;
 	let t9;
 	if ($[0] !== props || $[1] !== toggleContentClassNameMap || $[2] !== toggleCva || $[3] !== toggleTypographyMap || $[4] !== ui) {
-		const { className, children: t10, isDisabled, error, variant: variantProp, onChange, onBlur, ...rest } = props;
+		const { className, children: t10, isDisabled, error, variant: variantProp, fireBlurOnChange: fireBlurOnChangeProp, onChange, onBlur, ...rest } = props;
 		children = t10;
 		const variant = variantProp ?? ui.toggle.variant;
+		const fireBlurOnChange = fireBlurOnChangeProp ?? ui.toggle.fireBlurOnChange;
 		let t11;
 		if ($[19] !== error || $[20] !== isDisabled) {
 			t11 = {
@@ -46,13 +47,16 @@ var ToggleBase = (props) => {
 		} else t11 = $[21];
 		formFieldErrorProps = t11;
 		let t12;
-		if ($[22] !== onChange) {
+		if ($[22] !== fireBlurOnChange || $[23] !== onBlur || $[24] !== onChange) {
 			t12 = (isSelected) => {
 				onChange?.(isSelected);
+				if (fireBlurOnChange) onBlur?.({});
 			};
-			$[22] = onChange;
-			$[23] = t12;
-		} else t12 = $[23];
+			$[22] = fireBlurOnChange;
+			$[23] = onBlur;
+			$[24] = onChange;
+			$[25] = t12;
+		} else t12 = $[25];
 		const handleChange = t12;
 		T1 = Switch;
 		t2 = rest;
@@ -62,12 +66,12 @@ var ToggleBase = (props) => {
 		t6 = handleChange;
 		t7 = onBlur;
 		const t13 = !isDisabled && "cursor-pointer";
-		if ($[24] !== className || $[25] !== t13) {
+		if ($[26] !== className || $[27] !== t13) {
 			t8 = clsx("group flex items-center gap-2", t13, className);
-			$[24] = className;
-			$[25] = t13;
-			$[26] = t8;
-		} else t8 = $[26];
+			$[26] = className;
+			$[27] = t13;
+			$[28] = t8;
+		} else t8 = $[28];
 		t9 = /* @__PURE__ */ jsx("div", { className: toggleCva({
 			variant,
 			...rest
@@ -117,20 +121,20 @@ var ToggleBase = (props) => {
 		t9 = $[18];
 	}
 	let t10;
-	if ($[27] !== T0 || $[28] !== children || $[29] !== t0 || $[30] !== t1) {
+	if ($[29] !== T0 || $[30] !== children || $[31] !== t0 || $[32] !== t1) {
 		t10 = /* @__PURE__ */ jsx(T0, {
 			typography: t0,
 			contentClassName: t1,
 			children
 		});
-		$[27] = T0;
-		$[28] = children;
-		$[29] = t0;
-		$[30] = t1;
-		$[31] = t10;
-	} else t10 = $[31];
+		$[29] = T0;
+		$[30] = children;
+		$[31] = t0;
+		$[32] = t1;
+		$[33] = t10;
+	} else t10 = $[33];
 	let t11;
-	if ($[32] !== T1 || $[33] !== t10 || $[34] !== t2 || $[35] !== t3 || $[36] !== t4 || $[37] !== t5 || $[38] !== t6 || $[39] !== t7 || $[40] !== t8 || $[41] !== t9) {
+	if ($[34] !== T1 || $[35] !== t10 || $[36] !== t2 || $[37] !== t3 || $[38] !== t4 || $[39] !== t5 || $[40] !== t6 || $[41] !== t7 || $[42] !== t8 || $[43] !== t9) {
 		t11 = /* @__PURE__ */ jsxs(T1, {
 			...t2,
 			"data-is-dirty": t3,
@@ -141,64 +145,64 @@ var ToggleBase = (props) => {
 			className: t8,
 			children: [t9, t10]
 		});
-		$[32] = T1;
-		$[33] = t10;
-		$[34] = t2;
-		$[35] = t3;
-		$[36] = t4;
-		$[37] = t5;
-		$[38] = t6;
-		$[39] = t7;
-		$[40] = t8;
-		$[41] = t9;
-		$[42] = t11;
-	} else t11 = $[42];
+		$[34] = T1;
+		$[35] = t10;
+		$[36] = t2;
+		$[37] = t3;
+		$[38] = t4;
+		$[39] = t5;
+		$[40] = t6;
+		$[41] = t7;
+		$[42] = t8;
+		$[43] = t9;
+		$[44] = t11;
+	} else t11 = $[44];
 	let t12;
-	if ($[43] !== formFieldErrorProps) {
+	if ($[45] !== formFieldErrorProps) {
 		t12 = /* @__PURE__ */ jsx(FormFieldError, { ...formFieldErrorProps });
-		$[43] = formFieldErrorProps;
-		$[44] = t12;
-	} else t12 = $[44];
+		$[45] = formFieldErrorProps;
+		$[46] = t12;
+	} else t12 = $[46];
 	let t13;
-	if ($[45] !== t11 || $[46] !== t12) {
+	if ($[47] !== t11 || $[48] !== t12) {
 		t13 = /* @__PURE__ */ jsxs(Fragment, { children: [t11, t12] });
-		$[45] = t11;
-		$[46] = t12;
-		$[47] = t13;
-	} else t13 = $[47];
+		$[47] = t11;
+		$[48] = t12;
+		$[49] = t13;
+	} else t13 = $[49];
 	return t13;
 };
 var Toggle = (props) => {
 	const $ = c(15);
-	if ("field" in props && props.field) {
-		let field;
+	if ("formControl" in props && props.formControl) {
+		let formControl;
 		let innerProps;
 		let ref;
 		if ($[0] !== props) {
-			({field, ref, ...innerProps} = props);
+			({formControl, ref, ...innerProps} = props);
 			$[0] = props;
-			$[1] = field;
+			$[1] = formControl;
 			$[2] = innerProps;
 			$[3] = ref;
 		} else {
-			field = $[1];
+			formControl = $[1];
 			innerProps = $[2];
 			ref = $[3];
 		}
 		let t0;
 		if ($[4] !== innerProps || $[5] !== props.error || $[6] !== props.isDisabled || $[7] !== ref) {
 			t0 = (t1) => {
-				const { field: field_0, fieldState: t2 } = t1;
+				const { field, fieldState: t2 } = t1;
 				const { error, isDirty } = t2;
 				return /* @__PURE__ */ jsx(ToggleBase, {
 					...innerProps,
-					ref: mergeRefs(ref, field_0.ref),
-					isSelected: field_0.value,
-					onChange: field_0.onChange,
-					onBlur: field_0.onBlur,
-					name: field_0.name,
+					ref: mergeRefs(ref, field.ref),
+					isSelected: field.value,
+					onChange: field.onChange,
+					onBlur: field.onBlur,
+					name: field.name,
 					isDirty,
-					isDisabled: field_0.disabled || props.isDisabled,
+					isDisabled: field.disabled || props.isDisabled,
 					error: props.error ?? error?.message
 				});
 			};
@@ -209,14 +213,14 @@ var Toggle = (props) => {
 			$[8] = t0;
 		} else t0 = $[8];
 		let t1;
-		if ($[9] !== field.form || $[10] !== field.name || $[11] !== t0) {
-			t1 = /* @__PURE__ */ jsx(FieldController, {
-				control: field.form,
-				name: field.name,
+		if ($[9] !== formControl.control || $[10] !== formControl.name || $[11] !== t0) {
+			t1 = /* @__PURE__ */ jsx(Controller, {
+				control: formControl.control,
+				name: formControl.name,
 				render: t0
 			});
-			$[9] = field.form;
-			$[10] = field.name;
+			$[9] = formControl.control;
+			$[10] = formControl.name;
 			$[11] = t0;
 			$[12] = t1;
 		} else t1 = $[12];

package/dist/components/inputs/shared/form.types.d.ts

@@ -1,13 +1,12 @@
-import { DeepKeys, DeepValue, UIForm } from '../../../hooks/useForm';
+import { Control, FieldPath, FieldPathValue, FieldValues } from 'react-hook-form';
 export type ControlKeys<TProps, TValueProp extends keyof TProps = "value" extends keyof TProps ? "value" : never> = TValueProp | "onChange" | "onBlur";
-export interface FormControl<TFieldValues extends Record<string, unknown>, TType> {
-    form: UIForm<TFieldValues>;
+export interface FormControl<TFieldValues extends FieldValues, TType> {
+    control: Control<TFieldValues>;
     name: {
-        [K in DeepKeys<TFieldValues>]: DeepValue<TFieldValues, K> extends TType ? K : never;
-    }[DeepKeys<TFieldValues>];
+        [K in FieldPath<TFieldValues>]: FieldPathValue<TFieldValues, K> extends TType ? K : never;
+    }[FieldPath<TFieldValues>];
 }
-export type FormControlProps<TProps, TFieldValues extends Record<string, unknown>, TValueProp extends keyof TProps = "value" extends keyof TProps ? "value" : never> = {
-    field: FormControl<TFieldValues, TProps[TValueProp] | null>;
+export type FormControlProps<TProps, TFieldValues extends FieldValues, TValueProp extends keyof TProps = "value" extends keyof TProps ? "value" : never> = {
+    formControl: FormControl<TFieldValues, TProps[TValueProp] | null>;
 } & Omit<TProps, ControlKeys<TProps, TValueProp>> & Partial<Record<ControlKeys<TProps, TValueProp>, never>>;
-export type ControlProps<TProps, TFieldValues extends Record<string, unknown>, TValueProp extends keyof TProps = "value" extends keyof TProps ? "value" : never> = FormControlProps<TProps, TFieldValues, TValueProp> | TProps;
-export declare const getFieldError: (errors: unknown[]) => string | undefined;
+export type ControlProps<TProps, TFieldValues extends FieldValues, TValueProp extends keyof TProps = "value" extends keyof TProps ? "value" : never> = FormControlProps<TProps, TFieldValues, TValueProp> | TProps;

package/dist/components/segment/Segment.d.ts

@@ -1,4 +1,4 @@
 import { Key } from 'react-aria-components';
-import { FieldValues } from '../inputs/shared/form.binding';
+import { FieldValues } from 'react-hook-form';
 import { ControlledSegmentProps } from './segment.types';
 export declare const Segment: <TFieldValues extends FieldValues, TKey extends Key = Key>(props: ControlledSegmentProps<TFieldValues, TKey>) => import("react/jsx-runtime").JSX.Element;

package/dist/components/segment/Segment.js

@@ -1,5 +1,4 @@
 import { UIOverrides } from "../../config/uiOverrides.context.js";
-import { FieldController } from "../inputs/shared/form.binding.js";
 import { FormField } from "../inputs/FormField/FormField.js";
 import { segmentDefinition } from "./segment.cva.js";
 import { SegmentItem } from "./SegmentItem.js";
@@ -10,6 +9,7 @@ import { Fragment as Fragment$1, useRef } from "react";
 import { ToggleButtonGroup } from "react-aria-components";
 import { useToggleButtonGroup } from "react-aria";
 import { mergeRefs } from "@react-aria/utils";
+import { Controller } from "react-hook-form";
 import { useToggleGroupState } from "react-stately";
 //#region src/components/segment/Segment.tsx
 var SegmentBase = (t0) => {
@@ -181,32 +181,32 @@ var SegmentBase = (t0) => {
 };
 var Segment = (props) => {
 	const $ = c(15);
-	if ("field" in props && props.field) {
-		let field;
+	if ("formControl" in props && props.formControl) {
+		let formControl;
 		let innerProps;
 		let ref;
 		if ($[0] !== props) {
-			({field, ref, ...innerProps} = props);
+			({formControl, ref, ...innerProps} = props);
 			$[0] = props;
-			$[1] = field;
+			$[1] = formControl;
 			$[2] = innerProps;
 			$[3] = ref;
 		} else {
-			field = $[1];
+			formControl = $[1];
 			innerProps = $[2];
 			ref = $[3];
 		}
 		let t0;
 		if ($[4] !== innerProps || $[5] !== props.error || $[6] !== props.isDisabled || $[7] !== ref) {
 			t0 = (t1) => {
-				const { field: field_0, fieldState: t2 } = t1;
+				const { field, fieldState: t2 } = t1;
 				const { error } = t2;
 				return /* @__PURE__ */ jsx(SegmentBase, {
 					...innerProps,
-					ref: mergeRefs(ref, field_0.ref),
-					value: field_0.value,
-					onChange: field_0.onChange,
-					isDisabled: field_0.disabled || props.isDisabled,
+					ref: mergeRefs(ref, field.ref),
+					value: field.value,
+					onChange: field.onChange,
+					isDisabled: field.disabled || props.isDisabled,
 					error: props.error ?? error?.message
 				});
 			};
@@ -217,14 +217,14 @@ var Segment = (props) => {
 			$[8] = t0;
 		} else t0 = $[8];
 		let t1;
-		if ($[9] !== field.form || $[10] !== field.name || $[11] !== t0) {
-			t1 = /* @__PURE__ */ jsx(FieldController, {
-				control: field.form,
-				name: field.name,
+		if ($[9] !== formControl.control || $[10] !== formControl.name || $[11] !== t0) {
+			t1 = /* @__PURE__ */ jsx(Controller, {
+				control: formControl.control,
+				name: formControl.name,
 				render: t0
 			});
-			$[9] = field.form;
-			$[10] = field.name;
+			$[9] = formControl.control;
+			$[10] = formControl.name;
 			$[11] = t0;
 			$[12] = t1;
 		} else t1 = $[12];

package/dist/components/segment/segment.types.d.ts

@@ -1,6 +1,6 @@
 import { FC, ReactElement, Ref, SVGProps } from 'react';
 import { Key, ToggleButtonGroupProps, ToggleButtonProps } from 'react-aria-components';
-import { FieldValues } from '../inputs/shared/form.binding';
+import { FieldValues } from 'react-hook-form';
 import { ControlProps } from '../inputs/shared/form.types';
 import { SegmentItemVariantProps, SegmentVariantProps } from './segment.cva';
 export interface SegmentItem<TKey extends Key = Key> extends ToggleButtonProps, SegmentItemVariantProps {

package/dist/config/uiConfig.context.d.ts

@@ -26,9 +26,9 @@ export declare namespace UIConfig {
         };
         button: Pick<ButtonProps, "variant" | "size">;
         numberInput: Pick<NumberInputProps, "formatOptions">;
-        radioGroup: Pick<RadioGroupProps, "variant" | "hideLabel">;
-        checkbox: Pick<CheckboxProps, "variant">;
-        select: Pick<SelectBaseProps, "selectionMode" | "isSearchable" | "collapseAfter" | "selectedTagsType" | "hideSearchIcon" | "multiSelectAutoConfirm">;
+        radioGroup: Pick<RadioGroupProps, "variant" | "hideLabel" | "fireBlurOnChange">;
+        checkbox: Pick<CheckboxProps, "variant" | "fireBlurOnChange">;
+        select: Pick<SelectBaseProps, "selectionMode" | "isSearchable" | "collapseAfter" | "selectedTagsType" | "hideSearchIcon" | "fireBlurOnChange" | "multiSelectAutoConfirm">;
         queryAutocomplete: {
             isInitialQueryDisabled?: boolean;
             resolveSelectedItemsWithIds?: boolean;
@@ -39,9 +39,9 @@ export declare namespace UIConfig {
             resolveSelectedItemsWithIds?: boolean;
             searchDebounceDelay?: number;
         };
-        toggle: Pick<ToggleProps, "variant">;
+        toggle: Pick<ToggleProps, "variant" | "fireBlurOnChange">;
         slider: Pick<SliderProps, "minValue" | "maxValue">;
-        dateInput: Pick<DatePickerProps, "todayIcon" | "todayIconButtonSize" | "todayIconPlacement" | "shouldForceLeadingZeros" | "disableManualEntry" | "shouldUpdateDateOnMonthYearChange" | "granularity" | "autoFixYear"> & {
+        dateInput: Pick<DatePickerProps, "todayIcon" | "todayIconButtonSize" | "todayIconPlacement" | "shouldForceLeadingZeros" | "disableManualEntry" | "shouldUpdateDateOnMonthYearChange" | "granularity" | "autoFixYear" | "fireBlurOnChange"> & {
             calendarIcon?: ReactElement;
             dateTimeIcon?: ReactElement;
             timeIcon?: ReactElement;

package/dist/config/uiConfig.context.js

@@ -28,15 +28,20 @@ var UIConfig;
 		} },
 		radioGroup: {
 			variant: "default",
-			hideLabel: false
+			hideLabel: false,
+			fireBlurOnChange: false
+		},
+		checkbox: {
+			variant: "default",
+			fireBlurOnChange: false
 		},
-		checkbox: { variant: "default" },
 		select: {
 			selectionMode: "single",
 			isSearchable: false,
 			selectedTagsType: "list",
 			collapseAfter: 3,
 			hideSearchIcon: false,
+			fireBlurOnChange: false,
 			multiSelectAutoConfirm: false
 		},
 		queryAutocomplete: {
@@ -49,7 +54,10 @@ var UIConfig;
 			resolveSelectedItemsWithIds: false,
 			searchDebounceDelay: 500
 		},
-		toggle: { variant: "default" },
+		toggle: {
+			variant: "default",
+			fireBlurOnChange: false
+		},
 		slider: {
 			minValue: 0,
 			maxValue: 100
@@ -62,6 +70,7 @@ var UIConfig;
 			shouldForceLeadingZeros: false,
 			disableManualEntry: false,
 			autoFixYear: false,
+			fireBlurOnChange: false,
 			calendarIcon: /* @__PURE__ */ jsx(CalendarIcon, { className: "size-5" }),
 			dateTimeIcon: /* @__PURE__ */ jsx(DateTimeIcon, { className: "size-5" }),
 			timeIcon: /* @__PURE__ */ jsx(ClockIcon, { className: "size-6 text-interactive-text-secondary-idle" }),

package/dist/helpers/dynamicColumns.d.ts

@@ -1,6 +1,6 @@
 import { CellContext, ColumnDef, ColumnMeta } from '@tanstack/react-table';
 import { ReactNode } from 'react';
-import { FieldPath } from '../components/inputs/shared/form.binding';
+import { FieldPath } from 'react-hook-form';
 import { z } from 'zod';
 type NestedTypeFromKey<T, K extends string> = K extends keyof T ? T[K] : K extends `${infer First}.${infer Rest}` ? First extends keyof T ? NestedTypeFromKey<T[First], Rest> : never : never;
 type SchemaType<TSchema extends z.ZodObject<any>> = z.infer<TSchema>;

package/dist/helpers/dynamicInputs.d.ts

@@ -1,5 +1,5 @@
 import { ReactElement } from 'react';
-import { FormInstance } from '../components/inputs/shared/form.binding';
+import { Control, UseFormReturn } from 'react-hook-form';
 import { z } from 'zod';
 import { InputComponentProps, InputComponentType, InputDef, InputDefBaseProps, InputWrapperType } from '../components/inputs/Inputs/InputItem';
 import { ZodUtils } from '../utils/zod.utils';
@@ -47,17 +47,17 @@ type UnknownInputDef<TSchema extends z.ZodObject<any>, K extends keyof z.infer<T
     } & DynamicInputDefBase<InputDefBaseProps<InputComponentProps<T>>>;
 }[DefaultComponentType<TSchema["shape"][K]>];
 type RenderInputDef<TSchema extends z.ZodObject<any>, K extends keyof z.infer<TSchema>> = {
-    render: (field: {
-        form: FormInstance<z.infer<TSchema>>;
+    render: (formControl: {
+        control: Control<z.infer<TSchema>>;
         name: K;
-    }, form: FormInstance<z.infer<TSchema>>) => ReactElement;
+    }, form: UseFormReturn<z.infer<TSchema>>) => ReactElement;
 } & DynamicInputDefBase<Record<string, never>>;
 type DynamicInputDef<TSchema extends z.ZodObject<any>, K extends keyof z.infer<TSchema>> = ConfigInputDef<TSchema, K> | UnknownInputDef<TSchema, K> | RenderInputDef<TSchema, K>;
 type InputsConfig<TSchema extends z.ZodObject<any>> = {
-    [K in keyof z.infer<TSchema>]?: DynamicInputDef<TSchema, K> | ((field: {
-        form: FormInstance<z.infer<TSchema>>;
+    [K in keyof z.infer<TSchema>]?: DynamicInputDef<TSchema, K> | ((formControl: {
+        control: Control<z.infer<TSchema>>;
         name: K;
-    }, form: FormInstance<z.infer<TSchema>>) => ReactElement) | boolean;
+    }, form: UseFormReturn<z.infer<TSchema>>) => ReactElement) | boolean;
 };
 type GlobalProps = {
     [T in Exclude<InputComponentType, "unknown">]: InputDefBaseProps<InputComponentProps<T>>;

package/dist/hooks/useAutosave.d.ts

@@ -1,10 +1,10 @@
-import { UIForm } from './useForm';
-export interface UseAutosaveProps<TFieldValues extends Record<string, unknown>, TTransformedValues = TFieldValues, TResponse = unknown> {
-    form: UIForm<TFieldValues>;
+import { FieldValues, UseFormReturn } from 'react-hook-form';
+export interface UseAutosaveProps<TFieldValues extends FieldValues = FieldValues, TContext = any, TTransformedValues = TFieldValues, TResponse = unknown> {
+    form: UseFormReturn<TFieldValues, TContext, TTransformedValues>;
     delay?: number;
     enabled?: boolean;
     trigger?: "change" | "blur";
     onSave: (data: Partial<TTransformedValues>) => Promise<TResponse>;
     onSaveSuccess?: () => void;
 }
-export declare function useAutosave<TFieldValues extends Record<string, unknown>, TTransformedValues = TFieldValues, TResponse = unknown>({ form, delay, enabled, trigger, onSave, onSaveSuccess, }: UseAutosaveProps<TFieldValues, TTransformedValues, TResponse>): void;
+export declare function useAutosave<TFieldValues extends FieldValues = FieldValues, TContext = any, TTransformedValues = TFieldValues, TResponse = unknown>({ form, delay, enabled, trigger, onSave, onSaveSuccess, }: UseAutosaveProps<TFieldValues, TContext, TTransformedValues, TResponse>): void;

package/dist/hooks/useAutosave.js

@@ -1,85 +1,70 @@
 import { ObjectUtils } from "../utils/object.utils.js";
 import { isEqual } from "../utils/isEqual.js";
 import { useEffect, useRef } from "react";
+import { useFormState, useWatch } from "react-hook-form";
 //#region src/hooks/useAutosave.ts
-function diffLeftOnly(left, right) {
-	if (!ObjectUtils.isObject(left) || ObjectUtils.isDate(left) || ObjectUtils.isRegExp(left)) return isEqual(left, right) ? void 0 : left;
-	if (Array.isArray(left)) return isEqual(left, right) ? void 0 : left;
+function isNilOrEqual(left, right) {
+	if (ObjectUtils.isNil(left) && ObjectUtils.isNil(right)) return true;
+	return isEqual(left, right);
+}
+function diffLeftOnly(left, right, shallowKeys) {
+	if (!ObjectUtils.isObject(left) || ObjectUtils.isDate(left) || ObjectUtils.isRegExp(left)) return !isNilOrEqual(left, right) ? left : void 0;
+	if (Array.isArray(left)) return !isNilOrEqual(left, right) ? left : void 0;
 	const result = Object.entries(left).reduce((acc, [key, value]) => {
-		const diff = diffLeftOnly(value, right?.[key]);
+		const shallowSubtree = shallowKeys?.[key];
+		if (shallowSubtree === true) {
+			if (!isNilOrEqual(value, right?.[key])) acc[key] = value;
+			return acc;
+		}
+		const diff = diffLeftOnly(value, right?.[key], shallowSubtree);
 		if (diff !== void 0 && (!ObjectUtils.isObject(diff) || !ObjectUtils.isEmpty(diff))) acc[key] = diff;
 		return acc;
 	}, {});
 	return ObjectUtils.isEmpty(result) ? void 0 : result;
 }
-var snapshot = (value) => structuredClone(value);
-function pickChangedValues(source, changes) {
-	if (!ObjectUtils.isObject(changes) || Array.isArray(changes)) return source;
-	return Object.entries(changes).reduce((result, [key, value]) => {
-		result[key] = pickChangedValues(source?.[key], value);
-		return result;
-	}, {});
-}
 function useAutosave({ form, delay = 500, enabled = true, trigger = "change", onSave, onSaveSuccess }) {
 	const timeoutRef = useRef(void 0);
-	const savedSnapshotRef = useRef(snapshot(form.state.values));
-	const saveQueueRef = useRef(Promise.resolve());
-	const latestSaveRef = useRef({
-		onSave,
-		onSaveSuccess
-	});
-	latestSaveRef.current = {
-		onSave,
-		onSaveSuccess
-	};
+	const previousBlurTriggerFieldsRef = useRef(void 0);
+	const { control, reset, handleSubmit } = form;
+	const { dirtyFields, touchedFields, defaultValues } = useFormState({ control });
+	const formData = useWatch({ control });
 	useEffect(() => {
-		const clearPending = () => {
-			if (timeoutRef.current) {
-				clearTimeout(timeoutRef.current);
-				timeoutRef.current = void 0;
-			}
-		};
-		const queueSave = () => {
-			if (!enabled) return;
-			clearPending();
-			timeoutRef.current = setTimeout(() => {
-				saveQueueRef.current = saveQueueRef.current.then(async () => {
-					const valuesAtSaveTime = snapshot(form.state.values);
-					const changedValues = diffLeftOnly(valuesAtSaveTime, savedSnapshotRef.current);
-					if (!changedValues) return;
-					let transformedValues;
-					try {
-						transformedValues = form.parseValues(valuesAtSaveTime);
-					} catch {
-						return;
-					}
-					const payload = pickChangedValues(transformedValues, changedValues);
-					if (ObjectUtils.isEmpty(payload)) return;
-					try {
-						await latestSaveRef.current.onSave(payload);
-						savedSnapshotRef.current = valuesAtSaveTime;
-						for (const name of Object.keys(payload)) form.setFieldMeta(name, (meta) => ({
-							...meta,
-							isDirty: false
-						}));
-						latestSaveRef.current.onSaveSuccess?.();
-					} catch {}
-				});
-			}, delay);
-		};
-		const unsubscribeStore = trigger === "change" ? form.store.subscribe(() => {
-			if (!isEqual(form.state.values, savedSnapshotRef.current)) queueSave();
-		}) : void 0;
-		const unsubscribeBlur = trigger === "blur" ? form.subscribeBlur(queueSave) : void 0;
+		if (!enabled || Object.keys(dirtyFields).length === 0) return;
+		if (trigger === "blur") {
+			const blurTriggerFields = JSON.stringify(touchedFields);
+			if (Object.keys(touchedFields).length === 0 || previousBlurTriggerFieldsRef.current === blurTriggerFields) return;
+			previousBlurTriggerFieldsRef.current = blurTriggerFields;
+		}
+		if (timeoutRef.current) clearTimeout(timeoutRef.current);
+		timeoutRef.current = setTimeout(() => {
+			handleSubmit(async (data) => {
+				const changedData = diffLeftOnly(Object.entries(dirtyFields).filter(([, value]) => value).reduce((acc, [key]) => {
+					acc[key] = data[key];
+					return acc;
+				}, {}), defaultValues, dirtyFields) ?? {};
+				if (Object.keys(changedData).length === 0) return;
+				try {
+					reset(void 0, { keepValues: true });
+					await onSave(changedData);
+					onSaveSuccess?.();
+				} catch {
+					reset(defaultValues);
+					return;
+				}
+			})();
+		}, delay);
 		return () => {
-			clearPending();
-			unsubscribeStore?.unsubscribe();
-			unsubscribeBlur?.();
+			if (timeoutRef.current) clearTimeout(timeoutRef.current);
 		};
 	}, [
+		defaultValues,
+		dirtyFields,
+		trigger === "change" ? formData : touchedFields,
 		delay,
+		onSave,
+		handleSubmit,
 		enabled,
-		form,
+		reset,
 		trigger
 	]);
 }

package/dist/hooks/useAutosave.spec.d.ts

@@ -0,0 +1 @@
+export {};