react-panel-layout 0.6.0 → 0.6.1

package/src/hooks/useSwipeContentTransform.ts

@@ -23,7 +23,7 @@ export type UseSwipeContentTransformOptions = {
   /** Current swipe displacement in pixels */
   displacement: number;
   /** Whether swipe gesture is active */
-  isSwiping: boolean;
+  isOperating: boolean;
   /** Axis of transformation */
   axis?: GestureAxis;
   /** Duration of snap animation in ms */
@@ -42,6 +42,13 @@ export type UseSwipeContentTransformOptions = {
    * Use this for push animations where new panel comes from off-screen.
    */
   initialPx?: number;
+  /**
+   * Skip animation when targetPx changes.
+   * Use this when the target changed during an operation (from useOperationContinuity).
+   * When true, target changes will snap instead of animate.
+   * @default false
+   */
+  skipTargetChangeAnimation?: boolean;
 };
 
 /**
@@ -73,6 +80,119 @@ const getTransformFn = (axis: GestureAxis): "translateX" | "translateY" => {
   return axis === "horizontal" ? "translateX" : "translateY";
 };
 
+/**
+ * Check if initial mount animation should be scheduled.
+ * Returns animation info if conditions are met, null otherwise.
+ *
+ * Conditions for scheduling:
+ * 1. Animation not already consumed
+ * 2. containerSize is valid (> 0) - handles React effect execution order
+ * 3. initialPx is provided
+ * 4. initialPx differs from targetPx
+ */
+const computeInitialMountAnimation = (
+  hasConsumed: boolean,
+  containerSize: number | undefined,
+  initialPx: number | undefined,
+  targetPx: number,
+): { from: number; to: number } | null => {
+  if (hasConsumed) {
+    return null;
+  }
+  if (containerSize === undefined) {
+    return null;
+  }
+  if (containerSize <= 0) {
+    return null;
+  }
+  if (initialPx === undefined) {
+    return null;
+  }
+  if (initialPx === targetPx) {
+    return null;
+  }
+  return { from: initialPx, to: targetPx };
+};
+
+/**
+ * Result type for target change handling.
+ */
+type TargetChangeResult =
+  | { type: "animate"; animation: { from: number; to: number } }
+  | { type: "snap"; position: number }
+  | { type: "none" };
+
+/**
+ * Compute action for target position change when not swiping.
+ * Returns the appropriate action: animate, snap, or none.
+ *
+ * @param skipAnimation - If true, skip animation and snap directly.
+ *   Use this when the target changed during an operation (from useOperationContinuity).
+ */
+const computeTargetChangeAction = (
+  targetPx: number,
+  prevTargetPx: number,
+  currentPx: number,
+  isOperating: boolean,
+  isAnimating: boolean,
+  animateOnTargetChange: boolean,
+  skipAnimation: boolean,
+): TargetChangeResult => {
+  if (targetPx === prevTargetPx) {
+    return { type: "none" };
+  }
+  if (isOperating) {
+    return { type: "none" };
+  }
+  if (isAnimating) {
+    return { type: "none" };
+  }
+  if (!animateOnTargetChange) {
+    return { type: "snap", position: targetPx };
+  }
+
+  const distance = Math.abs(currentPx - targetPx);
+  if (distance <= 1) {
+    return { type: "snap", position: targetPx };
+  }
+
+  // Skip animation if requested (e.g., role changed during operation)
+  // This prevents unwanted animations after an operation ends.
+  // However, allow forward animations (currentPx < targetPx) for normal swipe-to-complete.
+  // Only skip backward animations (currentPx > targetPx) which occur during over-swipe.
+  if (skipAnimation) {
+    // Backward direction (over-swipe): snap, don't animate backward
+    if (currentPx > targetPx) {
+      return { type: "snap", position: targetPx };
+    }
+    // Forward direction (normal swipe-to-complete): animate from current position
+    return { type: "animate", animation: { from: currentPx, to: targetPx } };
+  }
+
+  return { type: "animate", animation: { from: currentPx, to: targetPx } };
+};
+
+/**
+ * Check if container size change requires position snap.
+ * Returns the new position to snap to, or null if no snap needed.
+ */
+const computeContainerResizeSnap = (
+  containerSize: number | undefined,
+  prevContainerSize: number | undefined,
+  targetPx: number,
+): number | null => {
+  if (containerSize === undefined) {
+    return null;
+  }
+  if (containerSize === prevContainerSize) {
+    return null;
+  }
+  if (containerSize <= 0) {
+    return null;
+  }
+  return targetPx;
+};
+
 /**
  * Hook for DOM-based swipe content transform.
  *
@@ -86,7 +206,7 @@ const getTransformFn = (axis: GestureAxis): "translateX" | "translateY" => {
  *   elementRef: containerRef,
  *   targetPx: 0,
  *   displacement: inputState.displacement.x,
- *   isSwiping: inputState.phase === "swiping",
+ *   isOperating: inputState.phase === "swiping",
  * });
  * ```
  */
@@ -97,12 +217,13 @@ export function useSwipeContentTransform(
     elementRef,
     targetPx,
     displacement,
-    isSwiping,
+    isOperating,
     axis = "horizontal",
     animationDuration = DEFAULT_ANIMATION_DURATION,
     containerSize,
     animateOnTargetChange = false,
     initialPx,
+    skipTargetChangeAnimation = false,
   } = options;
 
   // Use initialPx if provided, otherwise use targetPx
@@ -112,36 +233,47 @@ export function useSwipeContentTransform(
   const prevTargetPxRef = React.useRef<number>(targetPx);
   const prevContainerSizeRef = React.useRef<number | undefined>(containerSize);
   const pendingAnimationRef = React.useRef<{ from: number; to: number } | null>(null);
-  const isFirstMountRef = React.useRef<boolean>(true);
+  // Track if initial mount animation has been consumed
+  const hasConsumedInitialMountRef = React.useRef<boolean>(false);
 
-  // Schedule animation on first mount if initialPx differs from targetPx
-  if (isFirstMountRef.current && initialPx !== undefined && initialPx !== targetPx) {
-    pendingAnimationRef.current = { from: initialPx, to: targetPx };
-    isFirstMountRef.current = false;
-  } else if (isFirstMountRef.current) {
-    isFirstMountRef.current = false;
+  // Schedule animation on first mount if initialPx differs from targetPx.
+  const initialMountAnimation = computeInitialMountAnimation(
+    hasConsumedInitialMountRef.current,
+    containerSize,
+    initialPx,
+    targetPx,
+  );
+  if (initialMountAnimation !== null) {
+    pendingAnimationRef.current = initialMountAnimation;
+    hasConsumedInitialMountRef.current = true;
   }
 
   // Handle target changes when not swiping
-  if (targetPx !== prevTargetPxRef.current && !isSwiping && animRef.current === null) {
-    if (animateOnTargetChange) {
-      // Schedule animation from current position to new target
-      const distance = Math.abs(currentPxRef.current - targetPx);
-      if (distance > 1) {
-        pendingAnimationRef.current = { from: currentPxRef.current, to: targetPx };
-      } else {
-        currentPxRef.current = targetPx;
-      }
-    } else {
-      // Snap immediately (default behavior for resize, etc.)
-      currentPxRef.current = targetPx;
-    }
+  const targetChangeAction = computeTargetChangeAction(
+    targetPx,
+    prevTargetPxRef.current,
+    currentPxRef.current,
+    isOperating,
+    animRef.current !== null,
+    animateOnTargetChange,
+    skipTargetChangeAnimation,
+  );
+  if (targetChangeAction.type === "animate") {
+    pendingAnimationRef.current = targetChangeAction.animation;
+    prevTargetPxRef.current = targetPx;
+  } else if (targetChangeAction.type === "snap") {
+    currentPxRef.current = targetChangeAction.position;
     prevTargetPxRef.current = targetPx;
   }
 
   // Snap when container size changes (resize)
-  if (containerSize !== undefined && containerSize !== prevContainerSizeRef.current && containerSize > 0) {
-    currentPxRef.current = targetPx;
+  const resizeSnapPosition = computeContainerResizeSnap(
+    containerSize,
+    prevContainerSizeRef.current,
+    targetPx,
+  );
+  if (resizeSnapPosition !== null) {
+    currentPxRef.current = resizeSnapPosition;
     prevContainerSizeRef.current = containerSize;
   }
 
@@ -175,7 +307,7 @@ export function useSwipeContentTransform(
 
   // When swipe ends or target changes with animateOnTargetChange, animate to target
   React.useLayoutEffect(() => {
-    if (isSwiping) {
+    if (isOperating) {
       cancel();
       animRef.current = null;
       pendingAnimationRef.current = null;
@@ -208,7 +340,7 @@ export function useSwipeContentTransform(
       currentPxRef.current = targetPx;
       prevTargetPxRef.current = targetPx;
     }
-  }, [isSwiping, targetPx, start, cancel]);
+  }, [isOperating, targetPx, start, cancel]);
 
   // Direct DOM update during swipe
   React.useLayoutEffect(() => {
@@ -218,7 +350,13 @@ export function useSwipeContentTransform(
     }
 
     // Skip if animation is running, about to start, or pending
-    if (isAnimating || animRef.current !== null || pendingAnimationRef.current !== null) {
+    if (isAnimating) {
+      return;
+    }
+    if (animRef.current !== null) {
+      return;
+    }
+    if (pendingAnimationRef.current !== null) {
       return;
     }
 

package/src/modules/dialog/AlertDialog.spec.tsx

@@ -0,0 +1,387 @@
+/**
+ * @file Tests for AlertDialog component
+ */
+import { render, screen, fireEvent, waitFor } from "@testing-library/react";
+import { AlertDialog } from "./AlertDialog";
+
+type CallTracker = {
+  calls: ReadonlyArray<ReadonlyArray<unknown>>;
+  fn: (...args: ReadonlyArray<unknown>) => void;
+};
+
+const createCallTracker = (): CallTracker => {
+  const calls: Array<ReadonlyArray<unknown>> = [];
+  const fn = (...args: ReadonlyArray<unknown>): void => {
+    calls.push(args);
+  };
+  return { calls, fn };
+};
+
+describe("AlertDialog", () => {
+  const originalShowModal = HTMLDialogElement.prototype.showModal;
+  const originalClose = HTMLDialogElement.prototype.close;
+
+  beforeEach(() => {
+    HTMLDialogElement.prototype.showModal = function (this: HTMLDialogElement) {
+      this.setAttribute("open", "");
+    };
+    HTMLDialogElement.prototype.close = function (this: HTMLDialogElement) {
+      this.removeAttribute("open");
+    };
+  });
+
+  afterEach(() => {
+    HTMLDialogElement.prototype.showModal = originalShowModal;
+    HTMLDialogElement.prototype.close = originalClose;
+    document.body.style.overflow = "";
+    document.body.style.paddingRight = "";
+  });
+
+  describe("alert type", () => {
+    it("should render message", () => {
+      render(
+        <AlertDialog
+          type="alert"
+          visible={true}
+          message="This is an alert message"
+          onConfirm={() => {}}
+          onCancel={() => {}}
+        />,
+      );
+
+      expect(screen.getByText("This is an alert message")).toBeInTheDocument();
+    });
+
+    it("should render title when provided", () => {
+      render(
+        <AlertDialog
+          type="alert"
+          visible={true}
+          title="Alert Title"
+          message="Message"
+          onConfirm={() => {}}
+          onCancel={() => {}}
+        />,
+      );
+
+      expect(screen.getByText("Alert Title")).toBeInTheDocument();
+    });
+
+    it("should only show OK button", () => {
+      render(
+        <AlertDialog type="alert" visible={true} message="Message" onConfirm={() => {}} onCancel={() => {}} />,
+      );
+
+      expect(screen.getByRole("button", { name: "OK" })).toBeInTheDocument();
+      expect(screen.queryByRole("button", { name: "Cancel" })).not.toBeInTheDocument();
+    });
+
+    it("should call onConfirm when OK is clicked", () => {
+      const onConfirm = createCallTracker();
+      render(
+        <AlertDialog type="alert" visible={true} message="Message" onConfirm={onConfirm.fn} onCancel={() => {}} />,
+      );
+
+      fireEvent.click(screen.getByRole("button", { name: "OK" }));
+
+      expect(onConfirm.calls).toHaveLength(1);
+    });
+
+    it("should use custom confirmLabel", () => {
+      render(
+        <AlertDialog
+          type="alert"
+          visible={true}
+          message="Message"
+          confirmLabel="Got it"
+          onConfirm={() => {}}
+          onCancel={() => {}}
+        />,
+      );
+
+      expect(screen.getByRole("button", { name: "Got it" })).toBeInTheDocument();
+    });
+  });
+
+  describe("confirm type", () => {
+    it("should show OK and Cancel buttons", () => {
+      render(
+        <AlertDialog type="confirm" visible={true} message="Are you sure?" onConfirm={() => {}} onCancel={() => {}} />,
+      );
+
+      expect(screen.getByRole("button", { name: "OK" })).toBeInTheDocument();
+      expect(screen.getByRole("button", { name: "Cancel" })).toBeInTheDocument();
+    });
+
+    it("should call onConfirm when OK is clicked", () => {
+      const onConfirm = createCallTracker();
+      render(
+        <AlertDialog type="confirm" visible={true} message="Are you sure?" onConfirm={onConfirm.fn} onCancel={() => {}} />,
+      );
+
+      fireEvent.click(screen.getByRole("button", { name: "OK" }));
+
+      expect(onConfirm.calls).toHaveLength(1);
+    });
+
+    it("should call onCancel when Cancel is clicked", () => {
+      const onCancel = createCallTracker();
+      render(
+        <AlertDialog type="confirm" visible={true} message="Are you sure?" onConfirm={() => {}} onCancel={onCancel.fn} />,
+      );
+
+      fireEvent.click(screen.getByRole("button", { name: "Cancel" }));
+
+      expect(onCancel.calls).toHaveLength(1);
+    });
+
+    it("should call onCancel when backdrop is clicked", () => {
+      const onCancel = createCallTracker();
+      render(
+        <AlertDialog
+          type="confirm"
+          visible={true}
+          message="Are you sure?"
+          onConfirm={() => {}}
+          onCancel={onCancel.fn}
+        />,
+      );
+
+      const dialog = document.querySelector("dialog");
+      fireEvent.click(dialog!);
+
+      expect(onCancel.calls).toHaveLength(1);
+    });
+
+    it("should use custom button labels", () => {
+      render(
+        <AlertDialog
+          type="confirm"
+          visible={true}
+          message="Delete?"
+          confirmLabel="Delete"
+          cancelLabel="Keep"
+          onConfirm={() => {}}
+          onCancel={() => {}}
+        />,
+      );
+
+      expect(screen.getByRole("button", { name: "Delete" })).toBeInTheDocument();
+      expect(screen.getByRole("button", { name: "Keep" })).toBeInTheDocument();
+    });
+  });
+
+  describe("prompt type", () => {
+    it("should show input field", () => {
+      render(
+        <AlertDialog
+          type="prompt"
+          visible={true}
+          message="Enter your name:"
+          onConfirm={() => {}}
+          onCancel={() => {}}
+        />,
+      );
+
+      expect(screen.getByRole("textbox")).toBeInTheDocument();
+    });
+
+    it("should show placeholder", () => {
+      render(
+        <AlertDialog
+          type="prompt"
+          visible={true}
+          message="Enter your name:"
+          placeholder="John Doe"
+          onConfirm={() => {}}
+          onCancel={() => {}}
+        />,
+      );
+
+      expect(screen.getByRole("textbox")).toHaveAttribute("placeholder", "John Doe");
+    });
+
+    it("should show default value", () => {
+      render(
+        <AlertDialog
+          type="prompt"
+          visible={true}
+          message="Enter your name:"
+          defaultValue="Initial Value"
+          onConfirm={() => {}}
+          onCancel={() => {}}
+        />,
+      );
+
+      expect(screen.getByRole("textbox")).toHaveValue("Initial Value");
+    });
+
+    it("should update input value on change", () => {
+      render(
+        <AlertDialog
+          type="prompt"
+          visible={true}
+          message="Enter your name:"
+          onConfirm={() => {}}
+          onCancel={() => {}}
+        />,
+      );
+
+      const input = screen.getByRole("textbox") as HTMLInputElement;
+      fireEvent.change(input, { target: { value: "Test Value" } });
+
+      expect(input.value).toBe("Test Value");
+    });
+
+    it("should call onConfirm with input value when OK is clicked", () => {
+      const onConfirm = createCallTracker();
+      render(
+        <AlertDialog
+          type="prompt"
+          visible={true}
+          message="Enter your name:"
+          defaultValue="Hello"
+          onConfirm={onConfirm.fn}
+          onCancel={() => {}}
+        />,
+      );
+
+      fireEvent.click(screen.getByRole("button", { name: "OK" }));
+
+      expect(onConfirm.calls).toHaveLength(1);
+      expect(onConfirm.calls[0]?.[0]).toBe("Hello");
+    });
+
+    it("should call onConfirm with changed input value", () => {
+      const onConfirm = createCallTracker();
+      render(
+        <AlertDialog
+          type="prompt"
+          visible={true}
+          message="Enter your name:"
+          onConfirm={onConfirm.fn}
+          onCancel={() => {}}
+        />,
+      );
+
+      const input = screen.getByRole("textbox");
+      fireEvent.change(input, { target: { value: "Changed Value" } });
+      fireEvent.click(screen.getByRole("button", { name: "OK" }));
+
+      expect(onConfirm.calls).toHaveLength(1);
+      expect(onConfirm.calls[0]?.[0]).toBe("Changed Value");
+    });
+
+    it("should call onConfirm when Enter is pressed in input", () => {
+      const onConfirm = createCallTracker();
+      render(
+        <AlertDialog
+          type="prompt"
+          visible={true}
+          message="Enter your name:"
+          defaultValue="Test"
+          onConfirm={onConfirm.fn}
+          onCancel={() => {}}
+        />,
+      );
+
+      const input = screen.getByRole("textbox");
+      fireEvent.keyDown(input, { key: "Enter" });
+
+      expect(onConfirm.calls).toHaveLength(1);
+      expect(onConfirm.calls[0]?.[0]).toBe("Test");
+    });
+
+    it("should call onCancel when Cancel is clicked", () => {
+      const onCancel = createCallTracker();
+      render(
+        <AlertDialog
+          type="prompt"
+          visible={true}
+          message="Enter your name:"
+          onConfirm={() => {}}
+          onCancel={onCancel.fn}
+        />,
+      );
+
+      fireEvent.click(screen.getByRole("button", { name: "Cancel" }));
+
+      expect(onCancel.calls).toHaveLength(1);
+    });
+
+    it("should support password input type", () => {
+      render(
+        <AlertDialog
+          type="prompt"
+          visible={true}
+          message="Enter password:"
+          inputType="password"
+          onConfirm={() => {}}
+          onCancel={() => {}}
+        />,
+      );
+
+      const input = screen.getByLabelText("Input");
+      expect(input).toHaveAttribute("type", "password");
+    });
+
+    it("should focus input when dialog opens", async () => {
+      render(
+        <AlertDialog
+          type="prompt"
+          visible={true}
+          message="Enter your name:"
+          onConfirm={() => {}}
+          onCancel={() => {}}
+        />,
+      );
+
+      const input = screen.getByRole("textbox");
+      await waitFor(() => {
+        expect(document.activeElement).toBe(input);
+      });
+    });
+
+    it("should reset input value when dialog reopens", () => {
+      const { rerender } = render(
+        <AlertDialog
+          type="prompt"
+          visible={true}
+          message="Enter your name:"
+          defaultValue="Initial"
+          onConfirm={() => {}}
+          onCancel={() => {}}
+        />,
+      );
+
+      const input = screen.getByRole("textbox") as HTMLInputElement;
+      fireEvent.change(input, { target: { value: "Changed" } });
+      expect(input.value).toBe("Changed");
+
+      // Close and reopen
+      rerender(
+        <AlertDialog
+          type="prompt"
+          visible={false}
+          message="Enter your name:"
+          defaultValue="Initial"
+          onConfirm={() => {}}
+          onCancel={() => {}}
+        />,
+      );
+
+      rerender(
+        <AlertDialog
+          type="prompt"
+          visible={true}
+          message="Enter your name:"
+          defaultValue="Initial"
+          onConfirm={() => {}}
+          onCancel={() => {}}
+        />,
+      );
+
+      expect(input.value).toBe("Initial");
+    });
+  });
+});