@sproutsocial/seeds-react-modal 2.2.5 → 2.4.0

package/src/__tests__/v2/Modal.test.tsx

@@ -0,0 +1,972 @@
+/* eslint-disable */
+import React from "react";
+import {
+  render,
+  fireEvent,
+  cleanup,
+  screen,
+  waitFor,
+  renderHook,
+  act,
+} from "@sproutsocial/seeds-react-testing-library";
+import userEvent from "@testing-library/user-event";
+import {
+  Modal,
+  ModalBody,
+  useModalExternalTrigger,
+  ModalExternalTrigger,
+} from "../../v2";
+import { Button } from "@sproutsocial/seeds-react-button";
+
+// Mock matchMedia for mobile detection
+beforeAll(() => {
+  Object.defineProperty(window, "matchMedia", {
+    writable: true,
+    value: jest.fn().mockImplementation((query) => {
+      const listeners = new Map();
+      return {
+        matches: false,
+        media: query,
+        onchange: null,
+        addListener: jest.fn(),
+        removeListener: jest.fn(),
+        addEventListener: jest.fn((_event, listener) => {
+          listeners.set(listener, listener);
+        }),
+        removeEventListener: jest.fn((_event, listener) => {
+          listeners.delete(listener);
+        }),
+        dispatchEvent: jest.fn(),
+      };
+    }),
+  });
+});
+
+afterEach(() => cleanup());
+
+describe("Modal V2 - Dialog.Content Event Handlers and Convenience Props", () => {
+  describe("onInteractOutside", () => {
+    it("should prevent modal from closing when clicking outside if onInteractOutside calls preventDefault", async () => {
+      const handleInteractOutside = jest.fn((e) => e.preventDefault());
+      const handleOpenChange = jest.fn();
+
+      render(
+        <Modal
+          open={true}
+          onOpenChange={handleOpenChange}
+          onInteractOutside={handleInteractOutside}
+          title="Test Modal"
+          description="Test description"
+          closeButtonAriaLabel="Close"
+        >
+          <ModalBody>Content</ModalBody>
+        </Modal>
+      );
+
+      const overlay = screen.getByTestId("modal-overlay");
+      await userEvent.click(overlay);
+
+      expect(handleInteractOutside).toHaveBeenCalled();
+      expect(handleOpenChange).not.toHaveBeenCalled();
+    });
+
+    it("should allow modal to close when clicking outside if onInteractOutside does not prevent default", async () => {
+      const handleInteractOutside = jest.fn();
+      const handleOpenChange = jest.fn();
+
+      render(
+        <Modal
+          open={true}
+          onOpenChange={handleOpenChange}
+          onInteractOutside={handleInteractOutside}
+          title="Test Modal"
+          description="Test description"
+          closeButtonAriaLabel="Close"
+        >
+          <ModalBody>Content</ModalBody>
+        </Modal>
+      );
+
+      const overlay = screen.getByTestId("modal-overlay");
+      await userEvent.click(overlay);
+
+      expect(handleInteractOutside).toHaveBeenCalled();
+      expect(handleOpenChange).toHaveBeenCalledWith(false);
+    });
+
+    it("should close modal by default when clicking outside if no onInteractOutside handler provided", async () => {
+      const handleOpenChange = jest.fn();
+
+      render(
+        <Modal
+          open={true}
+          onOpenChange={handleOpenChange}
+          title="Test Modal"
+          description="Test description"
+          closeButtonAriaLabel="Close"
+        >
+          <ModalBody>Content</ModalBody>
+        </Modal>
+      );
+
+      const overlay = screen.getByTestId("modal-overlay");
+      await userEvent.click(overlay);
+
+      expect(handleOpenChange).toHaveBeenCalledWith(false);
+    });
+
+    it("should not call onInteractOutside when modal is closed", async () => {
+      const handleInteractOutside = jest.fn();
+
+      render(
+        <Modal
+          open={false}
+          onInteractOutside={handleInteractOutside}
+          title="Test Modal"
+          description="Test description"
+          closeButtonAriaLabel="Close"
+        >
+          <ModalBody>Content</ModalBody>
+        </Modal>
+      );
+
+      // Click on document body since modal isn't rendered when closed
+      await userEvent.click(document.body);
+
+      expect(handleInteractOutside).not.toHaveBeenCalled();
+    });
+  });
+
+  describe("onEscapeKeyDown", () => {
+    it("should prevent modal from closing when pressing Escape if onEscapeKeyDown calls preventDefault", async () => {
+      const handleEscapeKeyDown = jest.fn((e) => e.preventDefault());
+      const handleOpenChange = jest.fn();
+
+      render(
+        <Modal
+          open={true}
+          onOpenChange={handleOpenChange}
+          onEscapeKeyDown={handleEscapeKeyDown}
+          title="Test Modal"
+          description="Test description"
+          closeButtonAriaLabel="Close"
+        >
+          <ModalBody>Content</ModalBody>
+        </Modal>
+      );
+
+      const dialog = screen.getByRole("dialog");
+      fireEvent.keyDown(dialog, { key: "Escape", code: "Escape" });
+
+      expect(handleEscapeKeyDown).toHaveBeenCalled();
+      expect(handleOpenChange).not.toHaveBeenCalled();
+    });
+
+    it("should allow modal to close when pressing Escape if onEscapeKeyDown does not prevent default", async () => {
+      const handleEscapeKeyDown = jest.fn();
+      const handleOpenChange = jest.fn();
+
+      render(
+        <Modal
+          open={true}
+          onOpenChange={handleOpenChange}
+          onEscapeKeyDown={handleEscapeKeyDown}
+          title="Test Modal"
+          description="Test description"
+          closeButtonAriaLabel="Close"
+        >
+          <ModalBody>Content</ModalBody>
+        </Modal>
+      );
+
+      const dialog = screen.getByRole("dialog");
+      fireEvent.keyDown(dialog, { key: "Escape", code: "Escape" });
+
+      expect(handleEscapeKeyDown).toHaveBeenCalled();
+      expect(handleOpenChange).toHaveBeenCalledWith(false);
+    });
+
+    it("should close modal by default when pressing Escape if no onEscapeKeyDown handler provided", async () => {
+      const handleOpenChange = jest.fn();
+
+      render(
+        <Modal
+          open={true}
+          onOpenChange={handleOpenChange}
+          title="Test Modal"
+          description="Test description"
+          closeButtonAriaLabel="Close"
+        >
+          <ModalBody>Content</ModalBody>
+        </Modal>
+      );
+
+      const dialog = screen.getByRole("dialog");
+      fireEvent.keyDown(dialog, { key: "Escape", code: "Escape" });
+
+      expect(handleOpenChange).toHaveBeenCalledWith(false);
+    });
+
+    it("should not call onEscapeKeyDown when modal is closed", async () => {
+      const handleEscapeKeyDown = jest.fn();
+
+      render(
+        <Modal
+          open={false}
+          onEscapeKeyDown={handleEscapeKeyDown}
+          title="Test Modal"
+          description="Test description"
+          closeButtonAriaLabel="Close"
+        >
+          <ModalBody>Content</ModalBody>
+        </Modal>
+      );
+
+      // Press Escape on document body since modal isn't rendered when closed
+      fireEvent.keyDown(document.body, { key: "Escape", code: "Escape" });
+
+      expect(handleEscapeKeyDown).not.toHaveBeenCalled();
+    });
+  });
+
+  describe("onPointerDownOutside", () => {
+    it("should call onPointerDownOutside when clicking outside modal", async () => {
+      const handlePointerDownOutside = jest.fn();
+
+      render(
+        <Modal
+          open={true}
+          onPointerDownOutside={handlePointerDownOutside}
+          title="Test Modal"
+          description="Test description"
+          closeButtonAriaLabel="Close"
+        >
+          <ModalBody>Content</ModalBody>
+        </Modal>
+      );
+
+      const overlay = screen.getByTestId("modal-overlay");
+      await userEvent.click(overlay);
+
+      expect(handlePointerDownOutside).toHaveBeenCalled();
+    });
+
+    it("should prevent modal from closing if onPointerDownOutside calls preventDefault", async () => {
+      const handlePointerDownOutside = jest.fn((e) => e.preventDefault());
+      const handleOpenChange = jest.fn();
+
+      render(
+        <Modal
+          open={true}
+          onOpenChange={handleOpenChange}
+          onPointerDownOutside={handlePointerDownOutside}
+          title="Test Modal"
+          description="Test description"
+          closeButtonAriaLabel="Close"
+        >
+          <ModalBody>Content</ModalBody>
+        </Modal>
+      );
+
+      const overlay = screen.getByTestId("modal-overlay");
+      await userEvent.click(overlay);
+
+      expect(handlePointerDownOutside).toHaveBeenCalled();
+      expect(handleOpenChange).not.toHaveBeenCalled();
+    });
+  });
+
+  describe("onOpenAutoFocus", () => {
+    it("should call onOpenAutoFocus when modal opens", async () => {
+      const handleOpenAutoFocus = jest.fn((e) => e.preventDefault());
+
+      const { rerender } = render(
+        <Modal
+          open={false}
+          onOpenAutoFocus={handleOpenAutoFocus}
+          title="Test Modal"
+          description="Test description"
+          closeButtonAriaLabel="Close"
+        >
+          <ModalBody>Content</ModalBody>
+        </Modal>
+      );
+
+      act(() => {
+        rerender(
+          <Modal
+            open={true}
+            onOpenAutoFocus={handleOpenAutoFocus}
+            title="Test Modal"
+            description="Test description"
+            closeButtonAriaLabel="Close"
+          >
+            <ModalBody>Content</ModalBody>
+          </Modal>
+        );
+      });
+
+      await waitFor(() => {
+        expect(handleOpenAutoFocus).toHaveBeenCalled();
+      });
+    });
+  });
+
+  describe("onCloseAutoFocus", () => {
+    it("should call onCloseAutoFocus when modal closes", async () => {
+      const handleCloseAutoFocus = jest.fn((e) => e.preventDefault());
+
+      const { rerender } = render(
+        <Modal
+          open={true}
+          onCloseAutoFocus={handleCloseAutoFocus}
+          title="Test Modal"
+          description="Test description"
+          closeButtonAriaLabel="Close"
+        >
+          <ModalBody>Content</ModalBody>
+        </Modal>
+      );
+
+      act(() => {
+        rerender(
+          <Modal
+            open={false}
+            onCloseAutoFocus={handleCloseAutoFocus}
+            title="Test Modal"
+            description="Test description"
+            closeButtonAriaLabel="Close"
+          >
+            <ModalBody>Content</ModalBody>
+          </Modal>
+        );
+      });
+
+      await waitFor(() => {
+        expect(handleCloseAutoFocus).toHaveBeenCalled();
+      });
+    });
+  });
+
+  describe("Combined event handlers", () => {
+    it("should support multiple event handlers at once", async () => {
+      const handleInteractOutside = jest.fn((e) => e.preventDefault());
+      const handleEscapeKeyDown = jest.fn((e) => e.preventDefault());
+      const handlePointerDownOutside = jest.fn();
+      const handleOpenChange = jest.fn();
+
+      render(
+        <Modal
+          open={true}
+          onOpenChange={handleOpenChange}
+          onInteractOutside={handleInteractOutside}
+          onEscapeKeyDown={handleEscapeKeyDown}
+          onPointerDownOutside={handlePointerDownOutside}
+          title="Test Modal"
+          description="Test description"
+          closeButtonAriaLabel="Close"
+        >
+          <ModalBody>Content</ModalBody>
+        </Modal>
+      );
+
+      // Test Escape key
+      const dialog = screen.getByRole("dialog");
+      fireEvent.keyDown(dialog, { key: "Escape", code: "Escape" });
+
+      expect(handleEscapeKeyDown).toHaveBeenCalled();
+      expect(handleOpenChange).not.toHaveBeenCalled();
+
+      // Test outside click
+      const overlay = screen.getByTestId("modal-overlay");
+      await userEvent.click(overlay);
+
+      expect(handlePointerDownOutside).toHaveBeenCalled();
+      expect(handleInteractOutside).toHaveBeenCalled();
+      expect(handleOpenChange).not.toHaveBeenCalled();
+    });
+  });
+
+  describe("Draggable modal", () => {
+    it("should not support onInteractOutside for draggable modals (TypeScript)", () => {
+      expect(true).toBe(true);
+    });
+
+    it("should prevent closing on outside click for draggable modals by default", async () => {
+      const handleOpenChange = jest.fn();
+
+      render(
+        <Modal
+          open={true}
+          draggable={true}
+          onOpenChange={handleOpenChange}
+          title="Test Modal"
+          description="Test description"
+          closeButtonAriaLabel="Close"
+        >
+          <ModalBody>Content</ModalBody>
+        </Modal>
+      );
+
+      // For draggable modals, showOverlay is false by default
+      // so we need to click outside the modal content itself
+      // Click on body outside the dialog
+      fireEvent.pointerDown(document.body);
+
+      // Modal should not close for draggable modals
+      expect(handleOpenChange).not.toHaveBeenCalled();
+    });
+
+    it("should support other event handlers for draggable modals", async () => {
+      const handleEscapeKeyDown = jest.fn();
+      const handleOpenAutoFocus = jest.fn();
+
+      render(
+        <Modal
+          open={true}
+          draggable={true}
+          onEscapeKeyDown={handleEscapeKeyDown}
+          onOpenAutoFocus={handleOpenAutoFocus}
+          title="Test Modal"
+          description="Test description"
+          closeButtonAriaLabel="Close"
+        >
+          <ModalBody>Content</ModalBody>
+        </Modal>
+      );
+
+      await waitFor(() => {
+        expect(handleOpenAutoFocus).toHaveBeenCalled();
+      });
+
+      const dialog = screen.getByRole("dialog");
+      fireEvent.keyDown(dialog, { key: "Escape", code: "Escape" });
+
+      expect(handleEscapeKeyDown).toHaveBeenCalled();
+    });
+  });
+
+  describe("Integration with close button", () => {
+    it("should still allow closing via close button even when onInteractOutside prevents outside clicks", async () => {
+      const handleInteractOutside = jest.fn((e) => e.preventDefault());
+      const handleOpenChange = jest.fn();
+
+      render(
+        <Modal
+          open={true}
+          onOpenChange={handleOpenChange}
+          onInteractOutside={handleInteractOutside}
+          title="Test Modal"
+          description="Test description"
+          closeButtonAriaLabel="Close modal"
+        >
+          <ModalBody>Content</ModalBody>
+        </Modal>
+      );
+
+      const closeButton = screen.getByRole("button", { name: "Close modal" });
+      await userEvent.click(closeButton);
+
+      expect(handleOpenChange).toHaveBeenCalledWith(false);
+    });
+
+    it("should still allow closing via close button even when onEscapeKeyDown prevents Escape key", async () => {
+      const handleEscapeKeyDown = jest.fn((e) => e.preventDefault());
+      const handleOpenChange = jest.fn();
+
+      render(
+        <Modal
+          open={true}
+          onOpenChange={handleOpenChange}
+          onEscapeKeyDown={handleEscapeKeyDown}
+          title="Test Modal"
+          description="Test description"
+          closeButtonAriaLabel="Close modal"
+        >
+          <ModalBody>Content</ModalBody>
+        </Modal>
+      );
+
+      const closeButton = screen.getByRole("button", { name: "Close modal" });
+      await userEvent.click(closeButton);
+
+      expect(handleOpenChange).toHaveBeenCalledWith(false);
+    });
+  });
+
+  describe("Uncontrolled modal", () => {
+    it("should work with uncontrolled modal using defaultOpen and event handlers", async () => {
+      const handleInteractOutside = jest.fn((e) => e.preventDefault());
+
+      function UncontrolledModalTest() {
+        return (
+          <Modal
+            defaultOpen={true}
+            onInteractOutside={handleInteractOutside}
+            modalTrigger={<Button>Open</Button>}
+            title="Test Modal"
+            description="Test description"
+            closeButtonAriaLabel="Close"
+          >
+            <ModalBody>Content</ModalBody>
+          </Modal>
+        );
+      }
+
+      render(<UncontrolledModalTest />);
+
+      const overlay = screen.getByTestId("modal-overlay");
+      await userEvent.click(overlay);
+
+      expect(handleInteractOutside).toHaveBeenCalled();
+
+      // Modal should still be open since we prevented default
+      expect(screen.getByRole("dialog")).toBeInTheDocument();
+    });
+  });
+
+  describe("Convenience boolean props", () => {
+    describe("disableOutsideClickClose", () => {
+      it("should prevent modal from closing when clicking outside", async () => {
+        const handleOpenChange = jest.fn();
+
+        render(
+          <Modal
+            open={true}
+            onOpenChange={handleOpenChange}
+            disableOutsideClickClose
+            title="Test Modal"
+            description="Test description"
+            closeButtonAriaLabel="Close"
+          >
+            <ModalBody>Content</ModalBody>
+          </Modal>
+        );
+
+        const overlay = screen.getByTestId("modal-overlay");
+        await userEvent.click(overlay);
+
+        expect(handleOpenChange).not.toHaveBeenCalled();
+      });
+
+      it("should still call custom onInteractOutside handler when disableOutsideClickClose is true", async () => {
+        const handleInteractOutside = jest.fn();
+        const handleOpenChange = jest.fn();
+
+        render(
+          <Modal
+            open={true}
+            onOpenChange={handleOpenChange}
+            disableOutsideClickClose
+            onInteractOutside={handleInteractOutside}
+            title="Test Modal"
+            description="Test description"
+            closeButtonAriaLabel="Close"
+          >
+            <ModalBody>Content</ModalBody>
+          </Modal>
+        );
+
+        const overlay = screen.getByTestId("modal-overlay");
+        await userEvent.click(overlay);
+
+        expect(handleInteractOutside).toHaveBeenCalled();
+        expect(handleOpenChange).not.toHaveBeenCalled();
+      });
+
+      it("should allow closing via close button even when disableOutsideClickClose is true", async () => {
+        const handleOpenChange = jest.fn();
+
+        render(
+          <Modal
+            open={true}
+            onOpenChange={handleOpenChange}
+            disableOutsideClickClose
+            title="Test Modal"
+            description="Test description"
+            closeButtonAriaLabel="Close modal"
+          >
+            <ModalBody>Content</ModalBody>
+          </Modal>
+        );
+
+        const closeButton = screen.getByRole("button", { name: "Close modal" });
+        await userEvent.click(closeButton);
+
+        expect(handleOpenChange).toHaveBeenCalledWith(false);
+      });
+    });
+
+    describe("disableEscapeKeyClose", () => {
+      it("should prevent modal from closing when pressing Escape", async () => {
+        const handleOpenChange = jest.fn();
+
+        render(
+          <Modal
+            open={true}
+            onOpenChange={handleOpenChange}
+            disableEscapeKeyClose
+            title="Test Modal"
+            description="Test description"
+            closeButtonAriaLabel="Close"
+          >
+            <ModalBody>Content</ModalBody>
+          </Modal>
+        );
+
+        const dialog = screen.getByRole("dialog");
+        fireEvent.keyDown(dialog, { key: "Escape", code: "Escape" });
+
+        expect(handleOpenChange).not.toHaveBeenCalled();
+      });
+
+      it("should still call custom onEscapeKeyDown handler when disableEscapeKeyClose is true", async () => {
+        const handleEscapeKeyDown = jest.fn();
+        const handleOpenChange = jest.fn();
+
+        render(
+          <Modal
+            open={true}
+            onOpenChange={handleOpenChange}
+            disableEscapeKeyClose
+            onEscapeKeyDown={handleEscapeKeyDown}
+            title="Test Modal"
+            description="Test description"
+            closeButtonAriaLabel="Close"
+          >
+            <ModalBody>Content</ModalBody>
+          </Modal>
+        );
+
+        const dialog = screen.getByRole("dialog");
+        fireEvent.keyDown(dialog, { key: "Escape", code: "Escape" });
+
+        expect(handleEscapeKeyDown).toHaveBeenCalled();
+        expect(handleOpenChange).not.toHaveBeenCalled();
+      });
+
+      it("should allow closing via close button even when disableEscapeKeyClose is true", async () => {
+        const handleOpenChange = jest.fn();
+
+        render(
+          <Modal
+            open={true}
+            onOpenChange={handleOpenChange}
+            disableEscapeKeyClose
+            title="Test Modal"
+            closeButtonAriaLabel="Close modal"
+          >
+            <ModalBody>Content</ModalBody>
+          </Modal>
+        );
+
+        const closeButton = screen.getByRole("button", { name: "Close modal" });
+        await userEvent.click(closeButton);
+
+        expect(handleOpenChange).toHaveBeenCalledWith(false);
+      });
+    });
+
+    describe("Combined convenience props", () => {
+      it("should prevent closing via both outside click and Escape when both props are true", async () => {
+        const handleOpenChange = jest.fn();
+
+        render(
+          <Modal
+            open={true}
+            onOpenChange={handleOpenChange}
+            disableOutsideClickClose
+            disableEscapeKeyClose
+            title="Test Modal"
+            description="Test description"
+            closeButtonAriaLabel="Close"
+          >
+            <ModalBody>Content</ModalBody>
+          </Modal>
+        );
+
+        // Try to close via outside click
+        const overlay = screen.getByTestId("modal-overlay");
+        await userEvent.click(overlay);
+        expect(handleOpenChange).not.toHaveBeenCalled();
+
+        // Try to close via Escape key
+        const dialog = screen.getByRole("dialog");
+        fireEvent.keyDown(dialog, { key: "Escape", code: "Escape" });
+        expect(handleOpenChange).not.toHaveBeenCalled();
+      });
+
+      it("should call both custom handlers when both convenience props and handlers are provided", async () => {
+        const handleInteractOutside = jest.fn();
+        const handleEscapeKeyDown = jest.fn();
+        const handleOpenChange = jest.fn();
+
+        render(
+          <Modal
+            open={true}
+            onOpenChange={handleOpenChange}
+            disableOutsideClickClose
+            disableEscapeKeyClose
+            onInteractOutside={handleInteractOutside}
+            onEscapeKeyDown={handleEscapeKeyDown}
+            title="Test Modal"
+            description="Test description"
+            closeButtonAriaLabel="Close"
+          >
+            <ModalBody>Content</ModalBody>
+          </Modal>
+        );
+
+        // Click outside
+        const overlay = screen.getByTestId("modal-overlay");
+        await userEvent.click(overlay);
+        expect(handleInteractOutside).toHaveBeenCalled();
+        expect(handleOpenChange).not.toHaveBeenCalled();
+
+        // Press Escape
+        const dialog = screen.getByRole("dialog");
+        fireEvent.keyDown(dialog, { key: "Escape", code: "Escape" });
+        expect(handleEscapeKeyDown).toHaveBeenCalled();
+        expect(handleOpenChange).not.toHaveBeenCalled();
+      });
+    });
+
+    describe("Convenience props with draggable modals", () => {
+      it("should not support disableOutsideClickClose for draggable modals (TypeScript)", () => {
+        expect(true).toBe(true);
+      });
+
+      it("should support disableEscapeKeyClose for draggable modals", async () => {
+        const handleOpenChange = jest.fn();
+
+        render(
+          <Modal
+            open={true}
+            draggable={true}
+            onOpenChange={handleOpenChange}
+            disableEscapeKeyClose
+            title="Test Modal"
+            description="Test description"
+            closeButtonAriaLabel="Close"
+          >
+            <ModalBody>Content</ModalBody>
+          </Modal>
+        );
+
+        const dialog = screen.getByRole("dialog");
+        fireEvent.keyDown(dialog, { key: "Escape", code: "Escape" });
+
+        expect(handleOpenChange).not.toHaveBeenCalled();
+      });
+    });
+  });
+});
+
+describe("useModalExternalTrigger hook", () => {
+  it("should return triggerRef, triggerProps function, and onCloseAutoFocus callback", () => {
+    const { result } = renderHook(() => useModalExternalTrigger());
+
+    expect(result.current.triggerRef).toBeDefined();
+    expect(result.current.triggerRef.current).toBeNull();
+    expect(typeof result.current.triggerProps).toBe("function");
+    expect(typeof result.current.onCloseAutoFocus).toBe("function");
+  });
+
+  it("should return correct ARIA props based on isOpen state", () => {
+    const { result } = renderHook(() => useModalExternalTrigger());
+
+    const propsWhenClosed = result.current.triggerProps(false);
+    expect(propsWhenClosed).toEqual({
+      "aria-haspopup": "dialog",
+      "aria-expanded": false,
+    });
+
+    const propsWhenOpen = result.current.triggerProps(true);
+    expect(propsWhenOpen).toEqual({
+      "aria-haspopup": "dialog",
+      "aria-expanded": true,
+    });
+  });
+
+  it("should include aria-controls when modalId is provided", () => {
+    const { result } = renderHook(() => useModalExternalTrigger("test-modal"));
+
+    const props = result.current.triggerProps(false);
+    expect(props).toEqual({
+      "aria-haspopup": "dialog",
+      "aria-expanded": false,
+      "aria-controls": "test-modal",
+    });
+  });
+
+  it("should prevent default and focus trigger on onCloseAutoFocus", () => {
+    const { result } = renderHook(() => useModalExternalTrigger());
+
+    const mockElement = { focus: jest.fn() };
+    // @ts-ignore - setting current for test
+    result.current.triggerRef.current = mockElement as any;
+
+    const mockEvent = { preventDefault: jest.fn() } as any;
+    result.current.onCloseAutoFocus(mockEvent);
+
+    expect(mockEvent.preventDefault).toHaveBeenCalled();
+    expect(mockElement.focus).toHaveBeenCalled();
+  });
+
+  it("should not throw if triggerRef.current is null", () => {
+    const { result } = renderHook(() => useModalExternalTrigger());
+
+    const mockEvent = { preventDefault: jest.fn() } as any;
+
+    expect(() => {
+      result.current.onCloseAutoFocus(mockEvent);
+    }).not.toThrow();
+
+    expect(mockEvent.preventDefault).toHaveBeenCalled();
+  });
+});
+
+describe("ModalExternalTrigger component", () => {
+  it("should render with Button and display children", () => {
+    render(
+      <ModalExternalTrigger isOpen={false} onTrigger={jest.fn()}>
+        Open Modal
+      </ModalExternalTrigger>
+    );
+
+    const button = screen.getByRole("button");
+    expect(button).toBeInTheDocument();
+    expect(button).toHaveTextContent("Open Modal");
+  });
+
+  it("should have correct ARIA attributes when closed", () => {
+    render(
+      <ModalExternalTrigger isOpen={false} onTrigger={jest.fn()}>
+        Open Modal
+      </ModalExternalTrigger>
+    );
+
+    const button = screen.getByRole("button");
+    expect(button).toHaveAttribute("aria-haspopup", "dialog");
+    expect(button).toHaveAttribute("aria-expanded", "false");
+  });
+
+  it("should have correct ARIA attributes when open", () => {
+    render(
+      <ModalExternalTrigger isOpen={true} onTrigger={jest.fn()}>
+        Open Modal
+      </ModalExternalTrigger>
+    );
+
+    const button = screen.getByRole("button");
+    expect(button).toHaveAttribute("aria-haspopup", "dialog");
+    expect(button).toHaveAttribute("aria-expanded", "true");
+  });
+
+  it("should include aria-controls when modalId is provided", () => {
+    render(
+      <ModalExternalTrigger
+        isOpen={false}
+        onTrigger={jest.fn()}
+        modalId="test-modal"
+      >
+        Open Modal
+      </ModalExternalTrigger>
+    );
+
+    const button = screen.getByRole("button");
+    expect(button).toHaveAttribute("aria-controls", "test-modal");
+  });
+
+  it("should call onTrigger when clicked", async () => {
+    const onTrigger = jest.fn();
+
+    render(
+      <ModalExternalTrigger isOpen={false} onTrigger={onTrigger}>
+        Open Modal
+      </ModalExternalTrigger>
+    );
+
+    const button = screen.getByRole("button");
+    await userEvent.click(button);
+
+    expect(onTrigger).toHaveBeenCalledTimes(1);
+  });
+
+  it("should call custom onClick before onTrigger", async () => {
+    const onClick = jest.fn();
+    const onTrigger = jest.fn();
+
+    render(
+      <ModalExternalTrigger
+        isOpen={false}
+        onTrigger={onTrigger}
+        onClick={onClick}
+      >
+        Open Modal
+      </ModalExternalTrigger>
+    );
+
+    const button = screen.getByRole("button");
+    await userEvent.click(button);
+
+    expect(onClick).toHaveBeenCalled();
+    expect(onTrigger).toHaveBeenCalled();
+    // onClick should be called before onTrigger
+    expect(onClick.mock.invocationCallOrder[0]!).toBeLessThan(
+      onTrigger.mock.invocationCallOrder[0]!
+    );
+  });
+
+  it("should not call onTrigger if onClick prevents default", async () => {
+    const onClick = jest.fn((e) => e.preventDefault());
+    const onTrigger = jest.fn();
+
+    render(
+      <ModalExternalTrigger
+        isOpen={false}
+        onTrigger={onTrigger}
+        onClick={onClick}
+      >
+        Open Modal
+      </ModalExternalTrigger>
+    );
+
+    const button = screen.getByRole("button");
+    await userEvent.click(button);
+
+    expect(onClick).toHaveBeenCalled();
+    expect(onTrigger).not.toHaveBeenCalled();
+  });
+
+  it("should forward ref correctly", () => {
+    const ref = React.createRef<HTMLButtonElement>();
+
+    render(
+      <ModalExternalTrigger ref={ref} isOpen={false} onTrigger={jest.fn()}>
+        Open Modal
+      </ModalExternalTrigger>
+    );
+
+    expect(ref.current).toBeInstanceOf(HTMLButtonElement);
+  });
+
+  it("should support all Button props", () => {
+    render(
+      <ModalExternalTrigger
+        isOpen={false}
+        onTrigger={jest.fn()}
+        appearance="primary"
+        size="large"
+        disabled={true}
+        data-testid="test-button"
+      >
+        Open Modal
+      </ModalExternalTrigger>
+    );
+
+    const button = screen.getByTestId("test-button");
+    expect(button).toBeInTheDocument();
+    expect(button).toHaveAttribute("disabled");
+  });
+});