@carlonicora/nextjs-jsonapi 6.17.0 → 6.18.0

package/src/components/forms/EditorSheet.tsx

@@ -88,6 +88,11 @@ const sizeClasses: Record<EditorSheetSize, string> = {
 export type EditorSheetProps<T extends FieldValues> = {
   form: UseFormReturn<T>;
   onSubmit: (values: T) => Promise<{ id: string } | void>;
+  /** Runs after validation and before `onSubmit`. Return `false` (or a promise
+   *  resolving to `false`) to abort the submit: `onSubmit` is not called and the
+   *  sheet stays open with the form unchanged. Use it for a last confirmation
+   *  (e.g. "this information will be deleted") that must not close the sheet. */
+  onBeforeSubmit?: (values: T) => Promise<boolean> | boolean;
   onReset: () => T;
   isFormDirty?: () => boolean;
 
@@ -144,6 +149,7 @@ export type EditorSheetProps<T extends FieldValues> = {
 export function EditorSheet<T extends FieldValues>({
   form,
   onSubmit,
+  onBeforeSubmit,
   onReset,
   isFormDirty: isFormDirtyProp,
   entityType,
@@ -222,6 +228,7 @@ export function EditorSheet<T extends FieldValues>({
   const wrappedOnSubmit = useCallback(
     async (values: T) => {
       try {
+        if (onBeforeSubmit && !(await onBeforeSubmit(values))) return;
         const result = await onSubmit(values);
         setOpen(false);
         if (result && onSaved) {
@@ -249,7 +256,20 @@ export function EditorSheet<T extends FieldValues>({
         });
       }
     },
-    [onSubmit, setOpen, onSuccess, onSaved, onRevalidate, onNavigate, generateUrl, module, isEdit, propagateChanges, t],
+    [
+      onSubmit,
+      onBeforeSubmit,
+      setOpen,
+      onSuccess,
+      onSaved,
+      onRevalidate,
+      onNavigate,
+      generateUrl,
+      module,
+      isEdit,
+      propagateChanges,
+      t,
+    ],
   );
 
   const headerTitle =

package/src/components/forms/__tests__/EditorSheet.spec.tsx

@@ -1,5 +1,5 @@
 import { describe, it, expect, vi, beforeEach } from "vitest";
-import { act, render, screen } from "@testing-library/react";
+import { act, render, screen, waitFor } from "@testing-library/react";
 import { Activity } from "react";
 import userEvent from "@testing-library/user-event";
 import { useForm } from "react-hook-form";
@@ -234,6 +234,45 @@ describe("EditorSheet", () => {
     });
   });
 
+  describe("onBeforeSubmit", () => {
+    it("does not call onSubmit and keeps the sheet open when it returns false", async () => {
+      const onSubmit = vi.fn().mockResolvedValue({ id: "abc" });
+      const onBeforeSubmit = vi.fn().mockResolvedValue(false);
+      render(<TestEditor onSubmit={onSubmit} onBeforeSubmit={onBeforeSubmit} />);
+
+      await userEvent.click(screen.getByText("ui.buttons.create"));
+      await userEvent.type(screen.getByTestId("name-input"), "Test Name");
+      await userEvent.click(screen.getByTestId("modal-button-create"));
+
+      expect(onBeforeSubmit).toHaveBeenCalledWith(expect.objectContaining({ name: "Test Name" }));
+      expect(onSubmit).not.toHaveBeenCalled();
+      expect(screen.getByTestId("name-input")).toHaveValue("Test Name");
+    });
+
+    it("calls onSubmit and closes the sheet when it returns true", async () => {
+      const onSubmit = vi.fn().mockResolvedValue({ id: "abc" });
+      const onBeforeSubmit = vi.fn().mockReturnValue(true);
+      render(<TestEditor onSubmit={onSubmit} onBeforeSubmit={onBeforeSubmit} />);
+
+      await userEvent.click(screen.getByText("ui.buttons.create"));
+      await userEvent.type(screen.getByTestId("name-input"), "Test Name");
+      await userEvent.click(screen.getByTestId("modal-button-create"));
+
+      expect(onBeforeSubmit).toHaveBeenCalledTimes(1);
+      expect(onSubmit).toHaveBeenCalledWith(expect.objectContaining({ name: "Test Name" }));
+      await waitFor(() => expect(screen.queryByTestId("name-input")).toBeNull());
+    });
+
+    it("is not called when validation fails", async () => {
+      const onBeforeSubmit = vi.fn().mockReturnValue(true);
+      render(<TestEditor dialogOpen={true} onBeforeSubmit={onBeforeSubmit} />);
+
+      await userEvent.click(screen.getByTestId("modal-button-create"));
+
+      expect(onBeforeSubmit).not.toHaveBeenCalled();
+    });
+  });
+
   describe("onSaved callback", () => {
     it("calls onSaved on create (no isEdit gate)", async () => {
       const onSaved = vi.fn();