@sproutsocial/seeds-react-modal 2.4.8 → 2.5.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sproutsocial/seeds-react-modal",
-  "version": "2.4.8",
+  "version": "2.5.0",
   "description": "Seeds React Modal",
   "author": "Sprout Social, Inc.",
   "license": "MIT",
@@ -36,13 +36,13 @@
   },
   "dependencies": {
     "@radix-ui/react-dialog": "^1.1.14",
-    "@sproutsocial/seeds-react-box": "^1.1.13",
-    "@sproutsocial/seeds-react-button": "^1.3.18",
-    "@sproutsocial/seeds-react-icon": "^2.2.4",
+    "@sproutsocial/seeds-react-box": "^1.1.14",
+    "@sproutsocial/seeds-react-button": "^1.4.0",
+    "@sproutsocial/seeds-react-icon": "^2.2.5",
     "@sproutsocial/seeds-react-portal": "^1.2.0",
     "@sproutsocial/seeds-react-system-props": "^3.0.1",
     "@sproutsocial/seeds-react-text": "^1.4.0",
-    "@sproutsocial/seeds-react-theme": "^3.5.1",
+    "@sproutsocial/seeds-react-theme": "^3.6.0",
     "motion": "^12.6.3",
     "react-dnd": "^16.0.1",
     "react-dnd-html5-backend": "^16.0.1",
@@ -51,8 +51,8 @@
   },
   "devDependencies": {
     "@sproutsocial/eslint-config-seeds": "*",
-    "@sproutsocial/seeds-react-form-field": "^1.1.6",
-    "@sproutsocial/seeds-react-input": "^1.5.4",
+    "@sproutsocial/seeds-react-form-field": "^1.1.8",
+    "@sproutsocial/seeds-react-input": "^1.5.7",
     "@sproutsocial/seeds-react-testing-library": "*",
     "@sproutsocial/seeds-testing": "*",
     "@sproutsocial/seeds-tsconfig": "*",

package/src/Modal.stories.tsx

@@ -6,6 +6,7 @@ import { FormField } from "@sproutsocial/seeds-react-form-field";
 import { Input } from "@sproutsocial/seeds-react-input";
 import { Text } from "@sproutsocial/seeds-react-text";
 import Modal from "./v1/Modal";
+import { useModalTriggerProps } from "./v2";
 
 interface StatefulStoryProps<T> {
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
@@ -415,3 +416,66 @@ export const CustomBackgroundColor: Story = {
     </StatefulStory>
   ),
 };
+
+/**
+ * Demonstrates adding accessible ARIA attributes to a V1 modal trigger
+ * using `useModalTriggerProps`. This adds `aria-haspopup="dialog"` and
+ * `aria-expanded` to the trigger button so screen readers can identify
+ * it as a dialog trigger.
+ *
+ * Focus restoration is already handled automatically by Modal V1 via
+ * react-modal — no ref or callback needed.
+ */
+export const AccessibleTrigger: Story = {
+  render: () => {
+    const [isOpen, setIsOpen] = useState(false);
+    const triggerProps = useModalTriggerProps(isOpen);
+
+    return (
+      <div>
+        <Text as="p" mb={400} color="text.body">
+          Inspect the trigger button below — it has aria-haspopup="dialog" and
+          aria-expanded attributes applied via useModalTriggerProps.
+        </Text>
+
+        <Button
+          {...triggerProps}
+          appearance="primary"
+          onClick={() => setIsOpen(true)}
+        >
+          Open Modal
+        </Button>
+
+        <Modal
+          appElementSelector="#root"
+          isOpen={isOpen}
+          onClose={() => setIsOpen(false)}
+          closeButtonLabel="Close this dialog"
+          label="Accessible Trigger Example"
+        >
+          <Modal.Header
+            title="Accessible Trigger"
+            subtitle="The button that opened this modal has proper ARIA attributes"
+          />
+          <Modal.Content>
+            <Text as="p">
+              The trigger button uses useModalTriggerProps to apply
+              aria-haspopup and aria-expanded. Focus will return to the trigger
+              automatically when this modal closes.
+            </Text>
+          </Modal.Content>
+          <Modal.Footer>
+            <Box display="flex" justifyContent="flex-end">
+              <Button onClick={() => setIsOpen(false)} mr={300}>
+                Cancel
+              </Button>
+              <Button appearance="primary" onClick={() => setIsOpen(false)}>
+                Confirm
+              </Button>
+            </Box>
+          </Modal.Footer>
+        </Modal>
+      </div>
+    );
+  },
+};

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

@@ -9,7 +9,10 @@ import {
 } from "@sproutsocial/seeds-react-testing-library";
 import Modal from "../../v1/Modal";
 
-afterEach(() => cleanup());
+afterEach(() => {
+  cleanup();
+  document.body.style.pointerEvents = "";
+});
 
 describe("Modal", () => {
   it("renders a custom background color", () => {
@@ -90,6 +93,148 @@ describe("Modal", () => {
     expect(onClose).not.toHaveBeenCalled();
   });
 
+  describe("pointer-events when Modal V2 is open", () => {
+    it("should set pointer-events: auto on the react-modal portal", () => {
+      render(
+        <Modal
+          isOpen={true}
+          label="Label"
+          onClose={() => {}}
+          closeButtonLabel="Close"
+        >
+          Content
+        </Modal>
+      );
+
+      const dialog = screen.getByRole("dialog");
+      // DOM: body > portal > overlay > content
+      const portal = dialog.parentElement?.parentElement;
+      expect(portal).toBeTruthy();
+      expect(portal!.style.pointerEvents).toBe("auto");
+    });
+
+    it("should stop pointerdown propagation when body has pointer-events: none", () => {
+      const documentPointerDown = jest.fn();
+
+      render(
+        <Modal
+          isOpen={true}
+          label="Label"
+          onClose={() => {}}
+          closeButtonLabel="Close"
+        >
+          Content
+        </Modal>
+      );
+
+      // Simulate Radix Dialog setting pointer-events: none on body
+      document.body.style.pointerEvents = "none";
+
+      document.addEventListener("pointerdown", documentPointerDown);
+
+      const dialog = screen.getByRole("dialog");
+      const portal = dialog.parentElement?.parentElement;
+      fireEvent.pointerDown(portal!);
+
+      expect(documentPointerDown).not.toHaveBeenCalled();
+
+      document.removeEventListener("pointerdown", documentPointerDown);
+    });
+
+    it("should NOT stop pointerdown propagation when no Modal V2 is open", () => {
+      const documentPointerDown = jest.fn();
+
+      render(
+        <Modal
+          isOpen={true}
+          label="Label"
+          onClose={() => {}}
+          closeButtonLabel="Close"
+        >
+          Content
+        </Modal>
+      );
+
+      // body has default pointer-events — no Radix Dialog active
+      document.addEventListener("pointerdown", documentPointerDown);
+
+      const dialog = screen.getByRole("dialog");
+      const portal = dialog.parentElement?.parentElement;
+      fireEvent.pointerDown(portal!);
+
+      expect(documentPointerDown).toHaveBeenCalled();
+
+      document.removeEventListener("pointerdown", documentPointerDown);
+    });
+
+    it("should remain dismissable via overlay click when body has pointer-events: none", () => {
+      const onClose = jest.fn();
+
+      render(
+        <Modal
+          isOpen={true}
+          label="Label"
+          onClose={onClose}
+          closeButtonLabel="Close"
+        >
+          Content
+        </Modal>
+      );
+
+      document.body.style.pointerEvents = "none";
+
+      // Click the overlay (parent of the dialog content)
+      fireEvent.click(screen.getByRole("dialog").parentElement as HTMLElement);
+      expect(onClose).toHaveBeenCalled();
+    });
+
+    it("should remain dismissable via close button when body has pointer-events: none", () => {
+      const onClose = jest.fn();
+
+      render(
+        <Modal
+          isOpen={true}
+          label="Label"
+          onClose={onClose}
+          closeButtonLabel="Close this dialog"
+        >
+          <Modal.Header>
+            <Modal.CloseButton />
+          </Modal.Header>
+          Content
+        </Modal>
+      );
+
+      document.body.style.pointerEvents = "none";
+
+      fireEvent.click(screen.getByLabelText("Close this dialog"));
+      expect(onClose).toHaveBeenCalled();
+    });
+
+    it("should remain dismissable via Escape when body has pointer-events: none", () => {
+      const onClose = jest.fn();
+
+      render(
+        <Modal
+          isOpen={true}
+          label="Label"
+          onClose={onClose}
+          closeButtonLabel="Close"
+        >
+          Content
+        </Modal>
+      );
+
+      document.body.style.pointerEvents = "none";
+
+      fireEvent.keyDown(screen.getByText("Content"), {
+        key: "Escape",
+        keyCode: 27,
+      });
+      expect(onClose).toHaveBeenCalled();
+    });
+  });
+
   describe("Modal.Header", () => {
     it("should have an aria-label on the close button", () => {
       render(

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

@@ -13,6 +13,7 @@ import userEvent from "@testing-library/user-event";
 import {
   Modal,
   ModalBody,
+  ModalFooter,
   useModalExternalTrigger,
   ModalExternalTrigger,
 } from "../../v2";
@@ -763,6 +764,111 @@ describe("Modal V2 - Dialog.Content Event Handlers and Convenience Props", () =>
   });
 });
 
+describe("Escape key with open V1 Popout", () => {
+  afterEach(() => {
+    // Clean up any popout elements added to the DOM
+    document.querySelectorAll("[data-qa-popout]").forEach((el) => el.remove());
+  });
+
+  it("should not close modal when a V1 Popout is open", () => {
+    const handleOpenChange = jest.fn();
+
+    // Simulate an open V1 Popout in the DOM
+    const popout = document.createElement("div");
+    popout.setAttribute("data-qa-popout", "");
+    document.body.appendChild(popout);
+
+    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).not.toHaveBeenCalled();
+  });
+
+  it("should close modal when no V1 Popout is open", () => {
+    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 still call onEscapeKeyDown callback when popout blocks dismissal", () => {
+    const handleEscapeKeyDown = jest.fn();
+    const handleOpenChange = jest.fn();
+
+    const popout = document.createElement("div");
+    popout.setAttribute("data-qa-popout", "");
+    document.body.appendChild(popout);
+
+    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 work alongside disableEscapeKeyClose", () => {
+    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" });
+
+    // Should still be blocked by disableEscapeKeyClose even without a popout
+    expect(handleOpenChange).not.toHaveBeenCalled();
+  });
+});
+
 describe("useModalExternalTrigger hook", () => {
   it("should return triggerRef, triggerProps function, and onCloseAutoFocus callback", () => {
     const { result } = renderHook(() => useModalExternalTrigger());
@@ -1017,3 +1123,79 @@ describe("Portaled components in modal", () => {
     expect(contextValue).toHaveTextContent("false");
   });
 });
+
+describe("ModalFooter - closeOnPrimaryAction", () => {
+  it("should close the modal when primary button is clicked by default", async () => {
+    const onOpenChange = jest.fn();
+
+    render(
+      <Modal
+        open
+        onOpenChange={onOpenChange}
+        aria-label="Test Modal"
+        closeButtonAriaLabel="Close"
+      >
+        <ModalBody>Content</ModalBody>
+        <ModalFooter
+          primaryButton={<Button appearance="primary">Save</Button>}
+          cancelButton={<Button>Cancel</Button>}
+        />
+      </Modal>
+    );
+
+    const saveButton = screen.getByRole("button", { name: "Save" });
+    await userEvent.click(saveButton);
+
+    expect(onOpenChange).toHaveBeenCalledWith(false);
+  });
+
+  it("should NOT close the modal when primary button is clicked and closeOnPrimaryAction is false", async () => {
+    const onOpenChange = jest.fn();
+
+    render(
+      <Modal
+        open
+        onOpenChange={onOpenChange}
+        aria-label="Test Modal"
+        closeButtonAriaLabel="Close"
+      >
+        <ModalBody>Content</ModalBody>
+        <ModalFooter
+          closeOnPrimaryAction={false}
+          primaryButton={<Button appearance="primary">Save</Button>}
+          cancelButton={<Button>Cancel</Button>}
+        />
+      </Modal>
+    );
+
+    const saveButton = screen.getByRole("button", { name: "Save" });
+    await userEvent.click(saveButton);
+
+    expect(onOpenChange).not.toHaveBeenCalled();
+  });
+
+  it("should still close the modal when cancel button is clicked even if closeOnPrimaryAction is false", async () => {
+    const onOpenChange = jest.fn();
+
+    render(
+      <Modal
+        open
+        onOpenChange={onOpenChange}
+        aria-label="Test Modal"
+        closeButtonAriaLabel="Close"
+      >
+        <ModalBody>Content</ModalBody>
+        <ModalFooter
+          closeOnPrimaryAction={false}
+          primaryButton={<Button appearance="primary">Save</Button>}
+          cancelButton={<Button>Cancel</Button>}
+        />
+      </Modal>
+    );
+
+    const cancelButton = screen.getByRole("button", { name: "Cancel" });
+    await userEvent.click(cancelButton);
+
+    expect(onOpenChange).toHaveBeenCalledWith(false);
+  });
+});

package/src/index.ts

@@ -24,6 +24,9 @@ export {
   ModalAction,
   ModalCustomHeader,
   ModalCustomFooter,
+  ModalExternalTrigger,
+  useModalExternalTrigger,
+  useModalTriggerProps,
 } from "./v2";
 export type {
   TypeModalProps as TypeModalV2Props,
@@ -34,4 +37,5 @@ export type {
   TypeModalRailProps,
   TypeModalActionProps,
   ModalCloseWrapperProps,
+  ModalExternalTriggerProps,
 } from "./v2";

package/src/v1/Modal.tsx

@@ -106,10 +106,40 @@ const Modal = (props: TypeModalProps) => {
       ? (document.querySelector(appElementSelector) as HTMLElement)
       : undefined;
 
+  /**
+   * When a Radix Dialog (Modal V2) is open it sets `pointer-events: none` on
+   * `document.body` and listens for `pointerdown` on the document to detect
+   * "outside" clicks. react-modal portals its overlay to body, so:
+   *   1. The overlay inherits `pointer-events: none` → unclickable
+   *   2. Clicks on the overlay bubble to document → Radix dismisses Modal V2
+   *
+   * We use `contentRef` to reach the portal DOM and fix both issues.
+   */
+  const handleContentRef = React.useCallback(
+    (contentEl: HTMLElement | null) => {
+      if (!contentEl) return;
+      // DOM structure: body > portal > overlay > content
+      const portal = contentEl.parentElement?.parentElement;
+      if (portal) {
+        portal.style.pointerEvents = "auto";
+        portal.addEventListener("pointerdown", (e) => {
+          // Only stop propagation when Radix Dialog has disabled body pointer events.
+          // This avoids interfering with document-level listeners (analytics, other
+          // click-outside patterns) when no Modal V2 is open.
+          if (document.body.style.pointerEvents === "none") {
+            e.stopPropagation();
+          }
+        });
+      }
+    },
+    []
+  );
+
   return (
     <Container
       appElement={appElement}
       ariaHideApp={!!appElement}
+      contentRef={handleContentRef}
       isOpen={isOpen}
       contentLabel={label}
       // eslint-disable-next-line @typescript-eslint/no-empty-function

package/src/v2/Modal.tsx

@@ -135,6 +135,14 @@ const Modal = (props: TypeModalProps) => {
 
   const wrappedOnEscapeKeyDown = React.useCallback<EscapeKeyDownHandler>(
     (e) => {
+      // If a V1 Popout is open, prevent the modal from closing.
+      // The Popout's own escape handler (on document.body capture phase)
+      // will fire next and close just the popout.
+      const hasOpenPopout = document.querySelector("[data-qa-popout]") !== null;
+      if (hasOpenPopout) {
+        e.preventDefault();
+      }
+
       if (disableEscapeKeyClose) {
         e.preventDefault();
       }

package/src/v2/ModalTypes.ts

@@ -77,8 +77,15 @@ export interface TypeModalDescriptionProps extends TypeBoxProps {
  * Note: This component only supports slots (button props).
  * For custom footers, use ModalCustomFooter instead.
  */
-export type TypeModalFooterProps = TypeBoxProps &
-  (
+export type TypeModalFooterProps = TypeBoxProps & {
+  /**
+   * Whether clicking the primary button automatically closes the modal.
+   * Set to `false` when the primary action is async (e.g., saving data)
+   * and the modal should stay open until the operation completes.
+   * @default true
+   */
+  closeOnPrimaryAction?: boolean;
+} & (
     | {
         /** Primary action button - automatically wrapped in ModalCloseWrapper */
         primaryButton: React.ReactNode;