@zeno-lib/forms 0.4.0 → 0.6.0

package/dist/create-zeno-form.d.mts

@@ -1,5 +1,6 @@
+import { FieldControlProps } from "./lib/use-field-control.mjs";
 import { ValidationMode } from "./lib/validation-modes.mjs";
-import { DeepKeys, FormAsyncValidateOrFn, FormOptions, FormValidateOrFn } from "@tanstack/react-form";
+import { DeepKeys, DeepValue, FormAsyncValidateOrFn, FormOptions, FormValidateOrFn } from "@tanstack/react-form";
 import { ComponentProps, ReactNode } from "react";
 //#region src/create-zeno-form.d.ts
 type StandardSchema<T> = {
@@ -84,7 +85,12 @@ type WithValidators = {
   listeners?: AnyFieldListeners;
 };
 type AnyComponent = React.ComponentType<any>;
-type FieldWrappers<FC extends Record<string, AnyComponent>, T> = { [K in keyof FC]: <N extends DeepKeys<T>>(props: ComponentProps<FC[K]> & {
+type WithControlValue<P, V> = P extends {
+  render: (control: infer C) => ReactNode;
+} ? [C] extends [FieldControlProps<any>] ? Omit<P, "render"> & {
+  render: (control: FieldControlProps<V>) => ReactNode;
+} : P : P;
+type FieldWrappers<FC extends Record<string, AnyComponent>, T> = { [K in keyof FC]: <N extends DeepKeys<T>>(props: WithControlValue<ComponentProps<FC[K]>, DeepValue<T, N>> & {
   name: N;
 } & WithValidators) => ReactNode; };
 type CreateZenoFormConfig<FC extends Record<string, AnyComponent>, FMC extends Record<string, AnyComponent>> = {

package/dist/create-zeno-form.mjs

@@ -5,6 +5,7 @@ import { deepMergeDefaults, extractZodDefaults } from "./lib/schema-defaults.mjs
 import { getRequiredPaths } from "./lib/schema-required.mjs";
 import { DEFAULT_VALIDATION_MODE, setFormZenoState } from "./lib/validation-modes.mjs";
 import { withEmptyStartValues } from "./lib/empty-value.mjs";
+import { setSubmitError } from "./lib/submit-error.mjs";
 import { useRebasedDefaultValues } from "./lib/use-rebased-default-values.mjs";
 import { useUnsavedChangesWarning } from "./lib/use-unsaved-changes-warning.mjs";
 import { ValidationError } from "./lib/validation-error.mjs";
@@ -77,6 +78,7 @@ function createZenoForm(config) {
 			resolvedValidationLogic = mode === "blur-then-change" ? blurThenChangeLogic : void 0;
 		}
 		const wrappedOnSubmit = userOnSubmit ? (async (props) => {
+			const { submissionAttempts } = props.formApi.state;
 			try {
 				await userOnSubmit(props);
 			} catch (error) {
@@ -84,6 +86,8 @@ function createZenoForm(config) {
 					applyValidationError(props.formApi, error);
 					return;
 				}
+				const { state } = props.formApi;
+				if (state.values === props.value && state.submissionAttempts === submissionAttempts) setSubmitError(props.formApi, error);
 				throw error;
 			}
 		}) : void 0;

package/dist/form-element.mjs

@@ -1,5 +1,7 @@
 "use client";
 import { FormProvider as FormProvider$1, useFormContext } from "./lib/contexts.mjs";
+import { reportSubmitError } from "./lib/submit-error.mjs";
+import { focusFirstInvalid, restoreFocus } from "./lib/focus-first-invalid.mjs";
 import { jsx } from "react/jsx-runtime";
 //#region src/form-element.tsx
 function FormProvider({ children, form }) {
@@ -17,11 +19,11 @@ function Form({ children, className, ...props }) {
 			event.preventDefault();
 			event.stopPropagation();
 			const node = event.currentTarget;
-			await Promise.resolve(form.handleSubmit()).catch(() => void 0);
-			if (!form.state.isValid) {
-				const invalid = node.querySelector("[aria-invalid=\"true\"]");
-				(invalid ? [invalid, ...invalid.querySelectorAll("*")] : []).find((el) => el.tabIndex >= 0)?.focus();
-			}
+			const focused = node.ownerDocument.activeElement;
+			await Promise.resolve(form.handleSubmit()).catch(reportSubmitError);
+			const { isSubmitSuccessful, isValid } = form.state;
+			if (!isValid && focusFirstInvalid(node)) return;
+			if (!(isValid && isSubmitSuccessful)) restoreFocus(focused);
 		},
 		...props,
 		children

package/dist/index.d.mts

@@ -1,3 +1,4 @@
+import { FieldControl, FieldControlProps, UseFieldControlOptions, useFieldControl } from "./lib/use-field-control.mjs";
 import { ValidationMode } from "./lib/validation-modes.mjs";
 import { createZenoForm } from "./create-zeno-form.mjs";
 import { Form, FormProvider } from "./form-element.mjs";
@@ -9,4 +10,4 @@ import { SubmitActionOptions, SubmitActionSchema, applyActionError, submitAction
 import { useHideFieldErrors, useIsFieldRequired, useIsFieldRequiredBySchema, useIsInvalid } from "./lib/use-is-invalid.mjs";
 import { blurThenChangeLogic } from "./lib/validation-logic.mjs";
 import { useSelector } from "@tanstack/react-form";
-export { type ActionError, type ActionIssue, type ActionResult, type FieldMessage, Form, FormProvider, type SubmitActionOptions, type SubmitActionSchema, ValidationError, type ValidationMode, applyActionError, applyValidationError, blurThenChangeLogic, createZenoForm, submitAction, toActionError, toFieldName, useFieldContext, useFormContext, useHideFieldErrors, useIsFieldRequired, useIsFieldRequiredBySchema, useIsInvalid, useSelector };
+export { type ActionError, type ActionIssue, type ActionResult, type FieldControl, type FieldControlProps, type FieldMessage, Form, FormProvider, type SubmitActionOptions, type SubmitActionSchema, type UseFieldControlOptions, ValidationError, type ValidationMode, applyActionError, applyValidationError, blurThenChangeLogic, createZenoForm, submitAction, toActionError, toFieldName, useFieldContext, useFieldControl, useFormContext, useHideFieldErrors, useIsFieldRequired, useIsFieldRequiredBySchema, useIsInvalid, useSelector };

package/dist/index.mjs

@@ -7,5 +7,6 @@ import { createZenoForm } from "./create-zeno-form.mjs";
 import { Form, FormProvider } from "./form-element.mjs";
 import { applyActionError, submitAction } from "./lib/submit-action.mjs";
 import { useHideFieldErrors, useIsFieldRequired, useIsFieldRequiredBySchema, useIsInvalid } from "./lib/use-is-invalid.mjs";
+import { useFieldControl } from "./lib/use-field-control.mjs";
 import { useSelector } from "@tanstack/react-form";
-export { Form, FormProvider, ValidationError, applyActionError, applyValidationError, blurThenChangeLogic, createZenoForm, submitAction, toActionError, toFieldName, useFieldContext, useFormContext, useHideFieldErrors, useIsFieldRequired, useIsFieldRequiredBySchema, useIsInvalid, useSelector };
+export { Form, FormProvider, ValidationError, applyActionError, applyValidationError, blurThenChangeLogic, createZenoForm, submitAction, toActionError, toFieldName, useFieldContext, useFieldControl, useFormContext, useHideFieldErrors, useIsFieldRequired, useIsFieldRequiredBySchema, useIsInvalid, useSelector };

package/dist/lib/focus-first-invalid.d.mts

@@ -0,0 +1,23 @@
+//#region src/lib/focus-first-invalid.d.ts
+/**
+ * Move focus to the first invalid control inside `root` (a `<form>`): the
+ * first element with `aria-invalid="true"`, or, for a group root that can't
+ * take focus itself (radio group, slider), its first tabbable descendant. An
+ * invalid control that won't take focus (disabled, hidden) is skipped for the
+ * next one. Call it after `await form.handleSubmit()` leaves the form invalid.
+ * Searching only `root` keeps focus inside the submitted form, so a dialog's
+ * form never sends it to the page behind. Returns the focused element, or
+ * `null`.
+ */
+declare function focusFirstInvalid(root: ParentNode | null | undefined): HTMLElement | null;
+/**
+ * Give focus back to `element`, what had it when the submit started, if the
+ * submit dropped it to the body. A submit button that disables itself while
+ * submitting does that in browsers, so a failed submit with no invalid field
+ * to focus would otherwise leave the user nowhere. It doesn't scroll, so a
+ * user who scrolled away during a slow submit stays put. Returns whether it
+ * moved focus.
+ */
+declare function restoreFocus(element: Element | null): boolean;
+//#endregion
+export { focusFirstInvalid, restoreFocus };

package/dist/lib/focus-first-invalid.mjs

@@ -0,0 +1,37 @@
+//#region src/lib/focus-first-invalid.ts
+/**
+* Move focus to the first invalid control inside `root` (a `<form>`): the
+* first element with `aria-invalid="true"`, or, for a group root that can't
+* take focus itself (radio group, slider), its first tabbable descendant. An
+* invalid control that won't take focus (disabled, hidden) is skipped for the
+* next one. Call it after `await form.handleSubmit()` leaves the form invalid.
+* Searching only `root` keeps focus inside the submitted form, so a dialog's
+* form never sends it to the page behind. Returns the focused element, or
+* `null`.
+*/
+function focusFirstInvalid(root) {
+	const invalid = root?.querySelectorAll("[aria-invalid=\"true\"]");
+	for (const element of invalid ?? []) for (const target of [element, ...element.querySelectorAll("*")]) {
+		if (target.tabIndex < 0) continue;
+		target.focus();
+		if (target.ownerDocument.activeElement === target) return target;
+	}
+	return null;
+}
+/**
+* Give focus back to `element`, what had it when the submit started, if the
+* submit dropped it to the body. A submit button that disables itself while
+* submitting does that in browsers, so a failed submit with no invalid field
+* to focus would otherwise leave the user nowhere. It doesn't scroll, so a
+* user who scrolled away during a slow submit stays put. Returns whether it
+* moved focus.
+*/
+function restoreFocus(element) {
+	if (!(element instanceof HTMLElement && element.isConnected)) return false;
+	const active = element.ownerDocument.activeElement;
+	if (active !== null && active !== element.ownerDocument.body) return false;
+	element.focus({ preventScroll: true });
+	return element.ownerDocument.activeElement === element;
+}
+//#endregion
+export { focusFirstInvalid, restoreFocus };

package/dist/lib/submit-action.d.mts

@@ -40,7 +40,9 @@ type SubmitActionSchemaOptions<TValues, TOutput, TData> = SubmitActionOptions<TV
   /**
    * Parsed on the client before the call: `onSubmit` receives the form's
    * input values, and the action gets the schema's output. A failure is
-   * applied to the form and the action is never called.
+   * applied to the form and the action is never called. Replaces the form's
+   * own `schema` for this call; pass one only when the action takes a
+   * different schema than the form.
    */
   schema: SubmitActionSchema<TOutput>;
 };
@@ -49,9 +51,13 @@ type SubmitActionSchemaOptions<TValues, TOutput, TData> = SubmitActionOptions<TV
  * form. Pass `onSubmit`'s own argument straight through:
  *
  * ```ts
- * onSubmit: (submit) => submitAction(submit, saveProfile, { reset: true, schema })
+ * onSubmit: (submit) => submitAction(submit, saveProfile, { reset: true })
  * ```
  *
+ * The values are parsed with `options.schema`, else with the form's own
+ * `useForm({ schema })`, and the action gets the schema's output. A form with
+ * no schema (`useForm` without one, `useAppForm`) sends its values as they are.
+ *
  * On `{ ok: false }` the field errors land on their fields (array paths like
  * `owners[0].percentage` included) and clear as each field is edited. On
  * `{ ok: true }` the form is optionally reset. Either way the result is

package/dist/lib/submit-action.mjs

@@ -1,5 +1,6 @@
 import { applyValidationError } from "./apply-validation-error.mjs";
 import { toActionError } from "./action-result.mjs";
+import { getFormSchema } from "./validation-modes.mjs";
 import { ValidationError } from "./validation-error.mjs";
 //#region src/lib/submit-action.ts
 function applyActionError(formApi, error) {
@@ -15,9 +16,10 @@ function applyActionError(formApi, error) {
 }
 async function submitAction(props, action, options = {}) {
 	const { formApi, value } = props;
+	const schema = options.schema ?? getFormSchema(formApi);
 	let input = value;
-	if (options.schema) {
-		const parsed = await options.schema["~standard"].validate(value);
+	if (schema) {
+		const parsed = await schema["~standard"].validate(value);
 		if (parsed.issues) {
 			const error = toActionError(parsed.issues);
 			applyActionError(formApi, error);

package/dist/lib/submit-error.d.mts

@@ -0,0 +1,36 @@
+//#region src/lib/submit-error.d.ts
+type SubmitErrorState = {
+  readonly submissionAttempts: number;
+  readonly values: unknown;
+};
+type SubmitErrorForm = {
+  readonly state: SubmitErrorState;
+  readonly store: {
+    subscribe: (listener: () => void) => {
+      unsubscribe: () => void;
+    };
+  };
+};
+type SubmitError = {
+  /** What the submit handler threw. */
+  readonly error: unknown;
+};
+/**
+ * Record that `form`'s submit threw `error`. `useForm` calls it for what
+ * `onSubmit` throws; call it for a failure your own submit code catches
+ * outside `onSubmit`. The error lasts until the values change or the next
+ * submit starts (`reset()` does both), so an edit or a retry clears it. A
+ * Next.js navigation (`redirect()`, `notFound()`) is ignored.
+ */
+declare function setSubmitError(form: SubmitErrorForm, error: unknown): void;
+/**
+ * Report a submit rejection that is caught so the user can retry, as
+ * `<Form>` and `FormDialog` do: `reportError` logs it and passes it to the
+ * page's `error` listeners (where error monitoring hooks in), as if it were
+ * uncaught. A Next.js navigation is skipped.
+ */
+declare function reportSubmitError(error: unknown): void;
+/** The error `form`'s last submit threw, until it went stale. */
+declare function useSubmitError(form: SubmitErrorForm): SubmitError | undefined;
+//#endregion
+export { type SubmitError, type SubmitErrorForm, reportSubmitError, setSubmitError, useSubmitError };

package/dist/lib/submit-error.mjs

@@ -0,0 +1,66 @@
+"use client";
+import { useCallback, useSyncExternalStore } from "react";
+//#region src/lib/submit-error.ts
+const entries = /* @__PURE__ */ new WeakMap();
+const listeners = /* @__PURE__ */ new WeakMap();
+function notify(key) {
+	for (const listener of listeners.get(key) ?? []) listener();
+}
+function clear(key) {
+	const entry = entries.get(key);
+	if (entry) {
+		entry.unsubscribe();
+		entries.delete(key);
+		notify(key);
+	}
+}
+function isNavigationError(error) {
+	if (typeof error !== "object" || error === null || !("digest" in error)) return false;
+	return typeof error.digest === "string" && error.digest.startsWith("NEXT_");
+}
+/**
+* Record that `form`'s submit threw `error`. `useForm` calls it for what
+* `onSubmit` throws; call it for a failure your own submit code catches
+* outside `onSubmit`. The error lasts until the values change or the next
+* submit starts (`reset()` does both), so an edit or a retry clears it. A
+* Next.js navigation (`redirect()`, `notFound()`) is ignored.
+*/
+function setSubmitError(form, error) {
+	if (isNavigationError(error)) return;
+	const key = form.store;
+	entries.get(key)?.unsubscribe();
+	const { submissionAttempts, values } = form.state;
+	const subscription = form.store.subscribe(() => {
+		const { state } = form;
+		if (state.values !== values || state.submissionAttempts !== submissionAttempts) clear(key);
+	});
+	entries.set(key, {
+		submitError: { error },
+		unsubscribe: subscription.unsubscribe
+	});
+	notify(key);
+}
+/**
+* Report a submit rejection that is caught so the user can retry, as
+* `<Form>` and `FormDialog` do: `reportError` logs it and passes it to the
+* page's `error` listeners (where error monitoring hooks in), as if it were
+* uncaught. A Next.js navigation is skipped.
+*/
+function reportSubmitError(error) {
+	if (!isNavigationError(error)) globalThis.reportError?.(error);
+}
+/** The error `form`'s last submit threw, until it went stale. */
+function useSubmitError(form) {
+	const key = form.store;
+	const subscribe = useCallback((listener) => {
+		const set = listeners.get(key) ?? /* @__PURE__ */ new Set();
+		listeners.set(key, set);
+		set.add(listener);
+		return () => {
+			set.delete(listener);
+		};
+	}, [key]);
+	return useSyncExternalStore(subscribe, () => entries.get(key)?.submitError, () => void 0);
+}
+//#endregion
+export { reportSubmitError, setSubmitError, useSubmitError };

package/dist/lib/use-field-control.d.mts

@@ -0,0 +1,76 @@
+import { AnyFieldMeta } from "@tanstack/react-form";
+import { ReactNode } from "react";
+//#region src/lib/use-field-control.d.ts
+type UseFieldControlOptions = {
+  /**
+   * The description the field renders, if any. The control is described by
+   * it, and by the error while one shows.
+   */
+  description?: ReactNode;
+  disabled?: boolean;
+  /**
+   * The label the field renders, if any. The control gets `aria-labelledby`,
+   * which names a control a `<label htmlFor>` can't, such as a
+   * `role="radiogroup"`.
+   */
+  label?: ReactNode;
+  /**
+   * Mark the field required, or not, over the schema. Drives the `*` and
+   * `aria-required`.
+   */
+  required?: boolean;
+};
+/** The props that bind a control to its field. Spread them on the control. */
+type FieldControlProps<TValue = unknown> = {
+  "aria-describedby": string | undefined;
+  "aria-invalid": true | undefined;
+  "aria-labelledby": string | undefined;
+  "aria-required": true | undefined;
+  disabled: boolean | undefined;
+  id: string;
+  name: string;
+  /** Marks the field touched. */
+  onBlur: () => void;
+  /**
+   * Stores `value`, not a change event: a control that reports one maps it
+   * (`onChange(event.target.value)`). An empty value (`null`, `undefined`,
+   * `""`, `NaN` or `[]`) stores the field's empty value instead, which its
+   * schema picks. Stable across renders.
+   */
+  onChange: (value: TValue) => void;
+  /**
+   * The value as stored, the field's empty value (`undefined` or `null`)
+   * included. A control that needs a defined value maps it
+   * (`value={value ?? ""}`), or it turns uncontrolled once the field empties.
+   */
+  value: TValue;
+};
+type FieldControl<TValue = unknown> = {
+  controlProps: FieldControlProps<TValue>;
+  descriptionId: string;
+  errorId: string;
+  /**
+   * The errors to render: none while the field's errors are hidden, by the
+   * form's validation mode or `hideFieldErrors`.
+   */
+  errors: AnyFieldMeta["errors"];
+  /** The control's id, for the label's `htmlFor`. */
+  id: string;
+  isInvalid: boolean;
+  /** The field requires a value, by the schema or `required`. */
+  isRequired: boolean;
+  /** The label's id, when `label` is passed. */
+  labelId: string | undefined;
+  name: string;
+  /** Show the `*`: as `isRequired`, but off under `requiredIndicator: false`. */
+  showRequiredIndicator: boolean;
+};
+/**
+ * Everything a control needs to act as a field of the form, inside a field
+ * component the form renders (`form.AppField`, or one registered with
+ * `createZenoForm`): the props to spread on the control, and the ids and
+ * state its label, description and error need.
+ */
+declare function useFieldControl<TValue = unknown>({ description, disabled, label, required }?: UseFieldControlOptions): FieldControl<TValue>;
+//#endregion
+export { type FieldControl, type FieldControlProps, type UseFieldControlOptions, useFieldControl };

package/dist/lib/use-field-control.mjs

@@ -0,0 +1,67 @@
+"use client";
+import { useFieldContext } from "./contexts.mjs";
+import { getFormSchema } from "./validation-modes.mjs";
+import { emptyValueFor } from "./empty-value.mjs";
+import { describedBy } from "./aria.mjs";
+import { useHideFieldErrors, useIsFieldRequired, useIsFieldRequiredBySchema, useIsInvalid } from "./use-is-invalid.mjs";
+import { useCallback, useId } from "react";
+//#region src/lib/use-field-control.ts
+function isEmpty(value) {
+	return value === null || value === void 0 || value === "" || Number.isNaN(value) || Array.isArray(value) && value.length === 0;
+}
+function isSyntheticEvent(value) {
+	return typeof value === "object" && value !== null && "nativeEvent" in value && "target" in value;
+}
+/**
+* Everything a control needs to act as a field of the form, inside a field
+* component the form renders (`form.AppField`, or one registered with
+* `createZenoForm`): the props to spread on the control, and the ids and
+* state its label, description and error need.
+*/
+function useFieldControl({ description, disabled, label, required } = {}) {
+	const field = useFieldContext();
+	const id = useId();
+	const labelId = label ? `${id}-label` : void 0;
+	const descriptionId = `${id}-description`;
+	const errorId = `${id}-error`;
+	const isInvalid = useIsInvalid(field);
+	const hideErrors = useHideFieldErrors(field);
+	const showError = isInvalid && !hideErrors;
+	const schemaRequired = useIsFieldRequired(field);
+	const schemaRequiresValue = useIsFieldRequiredBySchema(field);
+	const isRequired = required ?? schemaRequiresValue;
+	const { form, handleBlur, handleChange, name } = field;
+	const onChange = useCallback((value) => {
+		if (isSyntheticEvent(value)) throw new TypeError(`Field "${name}" got a change event, not a value. Map it in the control: onChange(event.target.value).`);
+		handleChange(isEmpty(value) ? emptyValueFor(getFormSchema(form), form.state.values, name, value) : value);
+	}, [
+		form,
+		handleChange,
+		name
+	]);
+	return {
+		controlProps: {
+			"aria-describedby": describedBy([description, descriptionId], [showError, errorId]),
+			"aria-invalid": isInvalid || void 0,
+			"aria-labelledby": labelId,
+			"aria-required": isRequired || void 0,
+			disabled,
+			id,
+			name,
+			onBlur: handleBlur,
+			onChange,
+			value: field.state.value
+		},
+		descriptionId,
+		errorId,
+		errors: showError ? field.state.meta.errors : [],
+		id,
+		isInvalid,
+		isRequired,
+		labelId,
+		name,
+		showRequiredIndicator: required ?? schemaRequired
+	};
+}
+//#endregion
+export { useFieldControl };

package/dist/lib/use-form-dialog.d.mts

@@ -47,6 +47,11 @@ declare function useFormDialog<TValues>(options?: UseFormDialogOptions<TValues>)
 type UseLeaveGuardOptions = {
   /** Whether leaving now would lose changes. */
   hasUnsavedChanges: boolean;
+  /**
+   * Save the changes and resolve whether that worked. Backs `saveAndLeave`,
+   * so the confirm UI can offer Save next to Discard.
+   */
+  onSave?: () => boolean | Promise<boolean>;
 };
 type LeaveGuard = {
   /**
@@ -60,9 +65,18 @@ type LeaveGuard = {
   confirmLeave: () => void;
   /** The user chose to stay: drop the held leave. */
   cancelLeave: () => void;
+  /**
+   * The user chose to save: run `onSave`, then the held leave if it saved.
+   * Either way the confirm UI closes; after a failed save the user stays.
+   * Resolves whether it saved. A rejection from `onSave` keeps the leave held
+   * and propagates.
+   */
+  saveAndLeave: () => Promise<boolean>;
+  /** Whether `saveAndLeave` is waiting on `onSave`. */
+  isSaving: boolean;
 };
 /** Ask before a leave (close, navigate, switch record) drops unsaved changes. */
-declare function useLeaveGuard({ hasUnsavedChanges }: UseLeaveGuardOptions): LeaveGuard;
+declare function useLeaveGuard({ hasUnsavedChanges, onSave }: UseLeaveGuardOptions): LeaveGuard;
 /**
  * Find the element to focus for field `name` inside `root`: the control with
  * `id={name}` (fields that use the name as their id), else, inside the field

package/dist/lib/use-form-dialog.mjs

@@ -44,9 +44,10 @@ function useFormDialog(options = {}) {
 	};
 }
 /** Ask before a leave (close, navigate, switch record) drops unsaved changes. */
-function useLeaveGuard({ hasUnsavedChanges }) {
+function useLeaveGuard({ hasUnsavedChanges, onSave }) {
 	const pending = useRef(null);
 	const [isConfirming, setIsConfirming] = useState(false);
+	const [isSaving, setIsSaving] = useState(false);
 	const requestLeave = useCallback((proceed) => {
 		if (!hasUnsavedChanges) {
 			proceed();
@@ -68,7 +69,24 @@ function useLeaveGuard({ hasUnsavedChanges }) {
 		}, []),
 		confirmLeave,
 		isConfirming,
-		requestLeave
+		isSaving,
+		requestLeave,
+		saveAndLeave: useCallback(async () => {
+			const proceed = pending.current;
+			if (!(proceed && onSave)) return false;
+			setIsSaving(true);
+			let saved = false;
+			try {
+				saved = await onSave();
+			} finally {
+				setIsSaving(false);
+			}
+			if (pending.current !== proceed) return saved;
+			pending.current = null;
+			setIsConfirming(false);
+			if (saved) proceed();
+			return saved;
+		}, [onSave])
 	};
 }
 const FOCUSABLE = "input:not([type=\"hidden\"]):not([disabled]), textarea:not([disabled]), select:not([disabled]), button:not([disabled]), [tabindex]:not([tabindex=\"-1\"])";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zeno-lib/forms",
-  "version": "0.4.0",
+  "version": "0.6.0",
   "repository": {
     "url": "https://github.com/zeno-lib/zeno.git",
     "directory": "packages/forms"