diff --git a/.changeset/modal-nested-third-party-overlays.md b/.changeset/modal-nested-third-party-overlays.md new file mode 100644 index 00000000..73294b3a --- /dev/null +++ b/.changeset/modal-nested-third-party-overlays.md @@ -0,0 +1,5 @@ +--- +"@easypost/easy-ui": patch +--- + +Fix third-party overlays (e.g. Stripe Link/autofill) locking up when their modal (`allowsThirdPartyOverlays`) is nested inside another modal. A surrounding focus-trapping modal kept hiding the page (`inert`) and containing focus, which re-broke the injected overlay. A modal now automatically relaxes its focus trap and background hiding while it has an open `allowsThirdPartyOverlays` descendant, then restores them when that descendant closes. Modals without such a descendant are unaffected. diff --git a/.changeset/modal-third-party-overlay-dismiss.md b/.changeset/modal-third-party-overlay-dismiss.md new file mode 100644 index 00000000..b98c7537 --- /dev/null +++ b/.changeset/modal-third-party-overlay-dismiss.md @@ -0,0 +1,5 @@ +--- +"@easypost/easy-ui": patch +--- + +Fix react-aria overlays (e.g. `Select`, `Menu`) not closing on outside click when rendered inside a `Modal` that uses `allowsThirdPartyOverlays`. The modal box was tagged `data-react-aria-top-layer`, which made react-aria treat every click inside the modal as "not outside" for all overlays. Modals now keep nested overlays dismissable while preserving the third-party overlay behavior: the modal stays visible under a surrounding modal, clicking a nested modal no longer dismisses the one beneath it, and genuine third-party overlays (e.g. Stripe) still don't dismiss the modal. diff --git a/.changeset/nested-modal-behavior.md b/.changeset/nested-modal-behavior.md new file mode 100644 index 00000000..8aa2e266 --- /dev/null +++ b/.changeset/nested-modal-behavior.md @@ -0,0 +1,7 @@ +--- +"@easypost/easy-ui": minor +--- + +Add `childNestingBehavior` and `selfNestingBehavior` props to `Modal.Trigger` and `ModalContainer` to control how modals stack when nested. The connection between a parent and a nested child can resolve to `stack` (both keep their backdrops — the default) or `replace` (the nested modal hides the modal beneath it). + +Configure it from either end: `childNestingBehavior` is set on the parent, applies to its children, and cascades down the tree; `selfNestingBehavior` is set on the child, applies only to its own connection to its parent, does not cascade, and overrides the parent's `childNestingBehavior` for that connection. `selfNestingBehavior` is useful for surgically changing one nested modal in a large tree without touching its parent. diff --git a/easy-ui-react/package.json b/easy-ui-react/package.json index 21d852fe..42352614 100644 --- a/easy-ui-react/package.json +++ b/easy-ui-react/package.json @@ -29,6 +29,7 @@ "test:watch": "vitest" }, "dependencies": { + "@react-aria/overlays": "^3.31.0", "@easypost/easy-ui-icons": "1.0.0-alpha.55", "@easypost/easy-ui-tokens": "1.0.0-alpha.17", "@react-aria/toast": "^3.0.9", diff --git a/easy-ui-react/src/Modal/Modal.mdx b/easy-ui-react/src/Modal/Modal.mdx index dc88af15..43319df4 100644 --- a/easy-ui-react/src/Modal/Modal.mdx +++ b/easy-ui-react/src/Modal/Modal.mdx @@ -133,6 +133,77 @@ Use this sparingly. It trades away the modal's focus containment and background ``` +### Nesting a third-party overlay under another modal + +A modal with `allowsThirdPartyOverlays` doesn't run focus trapping or background hiding itself, but a **surrounding** focus-trapping modal would — and react-aria keeps the surrounding modal's page-hiding active even while the nested one is open, which would re-`inert` the third-party overlay (e.g. Stripe Link) and steal focus back. + +This is handled automatically: a focus-trapping modal relaxes its focus trap and background hiding for as long as it has an open `allowsThirdPartyOverlays` descendant (at any depth), then restores them when that descendant closes. You only need to set `allowsThirdPartyOverlays` on the modal that hosts the overlay — no configuration is required on its ancestors. + +```tsx +{/* The outer modal relaxes automatically while the nested Stripe modal is open. */} + + + + Billing + + + + + New Credit Card + {/* Stripe CardElement, etc. */} + + + + + +``` + +## Nesting behavior + +When modals nest, the connection between a parent modal and its nested child can present in one of two ways: + +- `stack` (the default) — both modals keep their own backdrops; modals simply stack. +- `replace` — the nested modal hides the modal beneath it, so only the topmost modal is visible. + +You configure that connection from either end, on `` or ``: + +- **`childNestingBehavior`** is set on the parent. It applies to its nested children and **cascades** down the tree, so setting it once at the top governs the whole stack. A descendant that doesn't set its own inherits it. +- **`selfNestingBehavior`** is set on the child. It applies only to that modal's connection to its parent, is **local** (does not cascade), and **overrides** the parent's `childNestingBehavior` for that one connection. + +```tsx +{/* Set once at the top; every nested modal replaces the one beneath it. */} + + + + Title + {/* each nested modal takes over the one beneath it */} + + +``` + +### Configuring a single nested modal + +When you can't (or don't want to) change the parent — for example one nested modal deep in a larger tree of modals that should take over its parent — set `selfNestingBehavior` on the nested modal instead. It changes only that modal's connection to its parent, without touching the parent's configuration. + +```tsx + + + + Parent + + {/* This nested modal takes over the parent without touching the parent. */} + + + + Nested + {/* … */} + + + + + +``` + ## Properties ### Modal.Trigger diff --git a/easy-ui-react/src/Modal/Modal.nesting.test.tsx b/easy-ui-react/src/Modal/Modal.nesting.test.tsx new file mode 100644 index 00000000..43437c6a --- /dev/null +++ b/easy-ui-react/src/Modal/Modal.nesting.test.tsx @@ -0,0 +1,354 @@ +import { screen } from "@testing-library/react"; +import React from "react"; +import { vi } from "vitest"; +import { Button } from "../Button"; +import { + mockGetComputedStyle, + mockIntersectionObserver, + render, + userClick, +} from "../utilities/test"; +import { Modal, ModalContainer, ModalNestingBehavior } from "./Modal"; + +describe(" nesting behavior", () => { + let restoreGetComputedStyle: () => void; + let restoreIntersectionObserver: () => void; + + beforeEach(() => { + vi.useFakeTimers(); + restoreGetComputedStyle = mockGetComputedStyle(); + restoreIntersectionObserver = mockIntersectionObserver(); + }); + + afterEach(() => { + restoreIntersectionObserver(); + restoreGetComputedStyle(); + vi.useRealTimers(); + }); + + it("should stack modals with their own backdrops when childNestingBehavior is stack", async () => { + const { user } = render(); + + expect(getVisibleBackdrops()).toHaveLength(1); + + await userClick(user, screen.getByRole("button", { name: "Open inner" })); + + // `stack` stacks: nothing is hidden, so both modals render their own + // backdrops on top of each other. + expect(getBackdrops()).toHaveLength(2); + expect(isBackdropHidden("Outer")).toBe(false); + expect(getVisibleBackdrops()).toHaveLength(2); + }); + + it("should hide the modal beneath an open nested modal when childNestingBehavior is replace", async () => { + const { user } = render(); + + await userClick(user, screen.getByRole("button", { name: "Open inner" })); + + // `replace` hides the whole modal beneath, leaving only the topmost visible. + expect(isBackdropHidden("Outer")).toBe(true); + expect(getVisibleBackdrops()).toHaveLength(1); + }); + + it("should restore the hidden modal once the nested modal closes", async () => { + const { user } = render(); + + // Only the outer modal is open: it renders its (visible) backdrop. + expect(getBackdrops()).toHaveLength(1); + expect(getVisibleBackdrops()).toHaveLength(1); + + await userClick(user, screen.getByRole("button", { name: "Open inner A" })); + + // Both modals are mounted, but the outer is hidden so only the topmost + // (inner) backdrop is visible. + expect(getBackdrops()).toHaveLength(2); + expect(getVisibleBackdrops()).toHaveLength(1); + expect(isBackdropHidden("Outer")).toBe(true); + expect(isBackdropHidden("Inner A")).toBe(false); + + await userClick( + user, + screen.getByRole("button", { name: "Close inner A" }), + ); + + // Closing the nested modal restores the outer modal. + expect(getBackdrops()).toHaveLength(1); + expect(getVisibleBackdrops()).toHaveLength(1); + expect(isBackdropHidden("Outer")).toBe(false); + }); + + it("should keep the parent hidden until every sibling nested modal closes", async () => { + // A counter (not a boolean) tracks replacing children, so the parent stays + // hidden while any sibling nested modal is still open. This harness drives + // both nested modals from controls outside the parent. + const { user } = render(); + + await userClick(user, screen.getByRole("button", { name: "Open inner A" })); + await userClick(user, screen.getByRole("button", { name: "Open inner B" })); + + // Two sibling nested modals are open; the shared parent stays hidden. + expect(isBackdropHidden("Outer")).toBe(true); + + await userClick( + user, + screen.getByRole("button", { name: "Close inner A" }), + ); + + // One sibling remains open, so the parent must stay hidden. A boolean flag + // would have incorrectly un-hidden it here; the count must not. + expect(isBackdropHidden("Outer")).toBe(true); + + await userClick( + user, + screen.getByRole("button", { name: "Close inner B" }), + ); + + // With all nested modals closed, the parent returns. + expect(isBackdropHidden("Outer")).toBe(false); + }); + + it("should cascade childNestingBehavior to descendant modals that don't set their own", async () => { + const { user } = render(); + + await userClick(user, screen.getByRole("button", { name: "Open inner" })); + + // The nested modal inherits `replace` from its ancestor, hiding the parent + // beneath it. + expect(isBackdropHidden("Outer")).toBe(true); + }); + + it("should let a descendant override an inherited childNestingBehavior via selfNestingBehavior", async () => { + const { user } = render( + , + ); + + await userClick(user, screen.getByRole("button", { name: "Open inner" })); + + // The ancestor cascades `replace`, but the descendant's own `stack` wins for + // its connection, so the parent stays visible behind it. + expect(isBackdropHidden("Outer")).toBe(false); + }); + + it("should not hide the parent by default when a nested modal opens", async () => { + const { user } = render(); + + await userClick(user, screen.getByRole("button", { name: "Open inner" })); + + // The parent is a plain (stack) modal, so it stays visible behind the nested + // modal. + expect(isBackdropHidden("Outer")).toBe(false); + }); + + it("should hide the parent when a nested modal sets selfNestingBehavior replace, without configuring the parent", async () => { + const { user } = render( + , + ); + + // Before the nested modal opens, the parent renders normally. + expect(isBackdropHidden("Outer")).toBe(false); + + await userClick(user, screen.getByRole("button", { name: "Open inner" })); + + // The nested modal's own connection resolved to `replace`, so the parent + // hides even though it was never configured with `childNestingBehavior`. + expect(isBackdropHidden("Outer")).toBe(true); + expect(screen.getByTestId("inner-content")).toBeInTheDocument(); + + await userClick(user, screen.getByRole("button", { name: "Close inner" })); + + // Closing the nested modal restores the parent. + expect(isBackdropHidden("Outer")).toBe(false); + }); +}); + +// A parent modal whose children replace it (via cascading `childNestingBehavior`), +// opened from two triggers inside it. The inner triggers use +// `allowsThirdPartyOverlays` so their controls stay reachable while open. +function NestedReplaceModals() { + return ( + + + + Outer + + + + {(close) => ( + + Inner A + + + + + )} + + + + + ); +} + +// Drives two replacing nested modals that share a single parent from controls +// rendered *outside* the parent. Everything uses `allowsThirdPartyOverlays` so no +// modal `ariaHideOutside`s the controls, and everything is non-dismissable so +// clicking those outside controls doesn't dismiss an open modal via +// interact-outside. Nested modals are closed explicitly via their own buttons. +function ControlledReplaceModals() { + const [isAOpen, setIsAOpen] = React.useState(false); + const [isBOpen, setIsBOpen] = React.useState(false); + return ( + <> + + + + + + Outer + + setIsAOpen(false)} + > + {isAOpen && ( + + Inner A + + + + + )} + + setIsBOpen(false)} + > + {isBOpen && ( + + Inner B + + + + + )} + + + + + + ); +} + +// Outer modal opens by default; the inner trigger uses `allowsThirdPartyOverlays` +// so its controls stay reachable while both modals are open. The outer sets +// `childNestingBehavior` (which cascades) and the inner sets `selfNestingBehavior` +// (which overrides for its own connection), exercising the cascade/override paths. +function NestingBehaviorNested({ + outerBehavior, + innerBehavior, +}: { + outerBehavior?: ModalNestingBehavior; + innerBehavior?: ModalNestingBehavior; +}) { + return ( + + + + Outer + + + + {(close) => ( + + Inner + +
Inner content
+ + + + )} + + + + + ); +} + +// A plain (stack) parent modal with a single nested modal. The nested modal can +// configure its own connection to the parent via `selfNestingBehavior` — without +// the parent itself being configured — mirroring a one-off nesting deep in a +// larger modal tree. +function ReplaceParentNested({ + innerSelfBehavior, +}: { + innerSelfBehavior?: ModalNestingBehavior; +}) { + return ( + + + + Outer + + + + {(close) => ( + + Inner + +
Inner content
+ + + + )} + + + + + ); +} + +// CSS-module class names are scoped in tests (e.g. `_underlayBg_1a2b3`), so we +// match on the embedded local name rather than an exact class. +const UNDERLAY_CLASS = "underlayBg"; +const UNDERLAY_HIDDEN_CLASS = "underlayBgHidden"; + +function getBackdrops() { + // The modifier classes share the `underlayBg` prefix, so each backdrop element + // is matched exactly once. + return Array.from( + document.querySelectorAll(`[class*="${UNDERLAY_CLASS}"]`), + ) as HTMLElement[]; +} + +function getVisibleBackdrops() { + return getBackdrops().filter( + (el) => !el.className.includes(UNDERLAY_HIDDEN_CLASS), + ); +} + +function getBackdrop(headerText: string) { + return screen + .getByText(headerText) + .closest(`[class*="${UNDERLAY_CLASS}"]`) as HTMLElement; +} + +// `replace` hides the whole modal (box and backdrop) via `display: none`. +function isBackdropHidden(headerText: string) { + return getBackdrop(headerText).className.includes(UNDERLAY_HIDDEN_CLASS); +} diff --git a/easy-ui-react/src/Modal/Modal.stories.tsx b/easy-ui-react/src/Modal/Modal.stories.tsx index a58c08fc..b1325f50 100644 --- a/easy-ui-react/src/Modal/Modal.stories.tsx +++ b/easy-ui-react/src/Modal/Modal.stories.tsx @@ -1,7 +1,12 @@ -import { action } from "storybook/actions"; import { Meta, StoryObj } from "@storybook/react-vite"; -import React, { Key, useState } from "react"; +import React, { Key, useRef, useState } from "react"; +import { createPortal } from "react-dom"; +import { action } from "storybook/actions"; import { Button } from "../Button"; +import { DropdownButton } from "../DropdownButton"; +import { HorizontalStack } from "../HorizontalStack"; +import { Menu } from "../Menu"; +import { Select } from "../Select"; import { EasyPostLogo, PlaceholderBox, @@ -9,10 +14,6 @@ import { } from "../utilities/storybook"; import { Modal, ModalContainer, useModalTrigger } from "./Modal"; import { ModalTrigger } from "./ModalTrigger"; -import { Menu } from "../Menu"; -import { DropdownButton } from "../DropdownButton"; -import { Select } from "../Select"; -import { HorizontalStack } from "../HorizontalStack"; type ModalStory = StoryObj; type ModalTriggerStory = StoryObj; @@ -233,12 +234,24 @@ export const MenuTrigger: ModalTriggerStory = { }; export const Nested: ModalTriggerStory = { - render: () => { + render: (args) => { const [modal1, setModal1] = useState(true); const [modal2, setModal2] = useState(false); const [modal3, setModal3] = useState(false); + const [modalThirdParty, setModalThirdParty] = useState(false); + return ( + // `childNestingBehavior` is set only on the outermost modal; it cascades to + // the nested modals below. Modal 2 overrides its own connection to the + // outer modal with `selfNestingBehavior="replace"`. + // + // Modal 2 sets `allowsThirdPartyOverlays`; this focus-trapping outer modal + // automatically relaxes while it's open so the third-party overlay that + // Modal 2 injects into the body isn't inert'd or robbed of focus. Toggle + // the `allowsThirdPartyOverlays` control off to watch that overlay lock up. { setModal1(false); }} @@ -250,10 +263,17 @@ export const Nested: ModalTriggerStory = { Space for content + { setModal2(false); }} + allowsThirdPartyOverlays={args.allowsThirdPartyOverlays} > {modal2 && ( @@ -262,6 +282,23 @@ export const Nested: ModalTriggerStory = { Content 2 + + + {modalThirdParty && ( + { + setModalThirdParty(false); + }} + /> + )} {modal3 && ( { @@ -271,6 +308,17 @@ export const Nested: ModalTriggerStory = { Modal 3 + Content 3 @@ -324,8 +372,105 @@ export const Nested: ModalTriggerStory = { ); }, + args: { + childNestingBehavior: "stack", + allowsThirdPartyOverlays: true, + }, + argTypes: { + childNestingBehavior: { + control: "select", + options: ["stack", "replace"], + }, + allowsThirdPartyOverlays: { + control: "boolean", + description: + "Set on Modal 2. When on, the outer modal relaxes its focus trap and " + + "background hiding while Modal 2 is open, so the simulated third-party " + + "overlay stays usable. Turn it off to watch the overlay lock up (can't " + + "type or click).", + }, + }, + parameters: { + controls: { include: ["childNestingBehavior", "allowsThirdPartyOverlays"] }, + }, }; +/** + * Simulates a third-party widget (e.g. Stripe Link / autofill) that injects an + * interactive overlay into `document.body` — outside the modal's DOM — after the + * modal opens. A surrounding focus-trapping modal would `inert` it and steal its + * focus; Easy UI relaxes automatically while an `allowsThirdPartyOverlays` + * descendant is open, keeping it usable. Try typing in the field and clicking + * the button. + */ +function ThirdPartyOverlaySimulator({ onDismiss }: { onDismiss?: () => void }) { + // Mimics a third-party widget (e.g. Stripe Link / autofill) that injects an + // interactive overlay into `document.body` — outside the modal — after the + // modal opens. The modals in this story are non-dismissable so clicking here + // doesn't close them (real third-party overlays render in iframes, whose + // events don't reach the page; non-dismissable sidesteps that without the + // iframe's quirks). It is NOT `data-react-aria-top-layer`, so a non-relaxed + // modal still `inert`s it — that's the lock-up. + const ref = useRef(null); + + return createPortal( +
+
+
+ Simulated third-party overlay + +
+ Injected into document.body, like Stripe Link + +
+
, + document.body, + ); +} + export const WithSelect: ModalStory = { render: () => ( diff --git a/easy-ui-react/src/Modal/Modal.test.tsx b/easy-ui-react/src/Modal/Modal.test.tsx index e11a12ba..904fa314 100644 --- a/easy-ui-react/src/Modal/Modal.test.tsx +++ b/easy-ui-react/src/Modal/Modal.test.tsx @@ -1,5 +1,5 @@ -import { screen } from "@testing-library/react"; -import React from "react"; +import { act, screen } from "@testing-library/react"; +import React, { useState } from "react"; import { vi } from "vitest"; import { Button } from "../Button"; import { HorizontalStack } from "../HorizontalStack"; @@ -10,6 +10,7 @@ import { userClick, userKeyboard, } from "../utilities/test"; +import { Select } from "../Select"; import { Modal, ModalContainer, ModalProps, useModalTrigger } from "./Modal"; import { ModalHeaderProps } from "./ModalHeader"; import { ModalTriggerProps } from "./ModalTrigger"; @@ -212,8 +213,443 @@ describe("", () => { renderModalWithOutsideContent({ allowsThirdPartyOverlays: true }); expect(isElementHidden(screen.getByTestId("outside-content"))).toBe(false); }); + + it("should keep a nested allowsThirdPartyOverlays modal interactive when opened inside a standard modal", async () => { + const { user } = render(); + await userClick(user, screen.getByRole("button", { name: "Open inner" })); + + // The outer (standard) modal applies `ariaHideOutside`, which would + // otherwise `inert` the nested third-party modal — making it unclickable + // and causing pointer events to fall through and dismiss it. + expect(isElementHidden(screen.getByTestId("inner-content"))).toBe(false); + expect( + screen.getByRole("button", { name: "Inner action" }), + ).toBeInTheDocument(); + }); + + it("should dismiss a Select on outside click within an allowsThirdPartyOverlays modal", async () => { + const { user } = render(); + + await userClick(user, screen.getByRole("button", { name: /fruit/i })); + expect(screen.getByRole("listbox")).toBeInTheDocument(); + + // Click elsewhere inside the modal (not the listbox, not the backdrop). The + // modal box used to be tagged `data-react-aria-top-layer`, which made + // react-aria treat clicks inside the modal as "not outside" so the Select + // never closed. + await userClick(user, screen.getByTestId("modal-content")); + expect(screen.queryByRole("listbox")).not.toBeInTheDocument(); + }); + + it("should dismiss an allowsThirdPartyOverlays modal when interacting outside it", async () => { + const { user } = render( + <> + + + + + Header + Content + + + , + ); + + expect(screen.getByRole("dialog")).toBeInTheDocument(); + await userClick(user, screen.getByTestId("outside")); + expect(screen.queryByRole("dialog")).not.toBeInTheDocument(); + }); + + it("should not dismiss the outer modal when interacting with a nested modal", async () => { + const { user } = render(); + + expect(screen.getByTestId("outer-content")).toBeInTheDocument(); + await userClick(user, screen.getByTestId("inner-content")); + + // Clicking inside the nested modal must not dismiss the modal beneath it. + expect(screen.getByTestId("outer-content")).toBeInTheDocument(); + expect(screen.getByTestId("inner-content")).toBeInTheDocument(); + }); + + it("should not dismiss the modal when interacting with a third-party top-layer overlay", async () => { + const { user } = render( + <> +
+ +
+ + + + Header + Content + + + , + ); + + expect(screen.getByRole("dialog")).toBeInTheDocument(); + + // react-aria ignores interact-outside on `[data-react-aria-top-layer]`, so a + // genuine third-party overlay (e.g. Stripe) doesn't dismiss the modal. + await userClick(user, screen.getByTestId("third-party")); + expect(screen.getByRole("dialog")).toBeInTheDocument(); + }); + + it("does not inert a node injected after a nested third-party modal opens", async () => { + render( + + + + Outer + + + + + Inner + Inner content + + + + + , + ); + + // Simulate a third-party (e.g. Stripe Link) overlay injected into the body + // *after* the modals open. A standard outer modal automatically stops hiding + // the page while its `allowsThirdPartyOverlays` descendant is open, so the + // injected overlay isn't `inert`'d/`aria-hidden` (which would lock it up). + const injected = await injectBodyNode(); + expect(isElementHidden(injected)).toBe(false); + }); + + it("still hides outside content when no third-party descendant is open", async () => { + render( + <> +
Outside content
+ + + + Header + Content + + + , + ); + + // With no third-party descendant open, a modal behaves exactly like a + // standard focus-trapping modal: it hides the rest of the page. + expect(isElementHidden(screen.getByTestId("outside-content"))).toBe(true); + }); + + it("resumes hiding the page after the nested third-party modal closes", async () => { + const { user } = render(); + + await userClick(user, screen.getByRole("button", { name: "Open inner" })); + const whileOpen = await injectBodyNode(); + expect(isElementHidden(whileOpen)).toBe(false); + + await userClick(user, screen.getByRole("button", { name: "Close inner" })); + const afterClose = await injectBodyNode(); + // The outer modal traps again once the third-party descendant is gone. + expect(isElementHidden(afterClose)).toBe(true); + }); + + it("moves focus into the dialog when it opens", async () => { + const { user } = render(); + + await userClick(user, screen.getByRole("button", { name: "Open modal" })); + await flushFocus(); + + // The refactor moved focus management from `Overlay`'s built-in + // `FocusScope` to our own; autofocus must still land inside the dialog. + const dialog = screen.getByRole("dialog"); + expect(dialog.contains(document.activeElement)).toBe(true); + }); + + it("restores focus to the trigger when the dialog closes", async () => { + const { user } = render(); + const trigger = screen.getByRole("button", { name: "Open modal" }); + + await userClick(user, trigger); + await userKeyboard(user, "{Escape}"); + await flushFocus(); + + // Our `FocusScope` keeps `restoreFocus`, so focus returns to the trigger. + expect(trigger).toHaveFocus(); + }); + + it("contains focus within the dialog by default", async () => { + const { user } = render(); + + await userClick(user, screen.getByRole("button", { name: "Open modal" })); + await flushFocus(); + + // Focusing an element outside the modal is pulled back in: the standard + // modal traps focus (`contain`). + const dialog = screen.getByRole("dialog"); + focusOutside(screen.getByTestId("outside")); + expect(screen.getByTestId("outside")).not.toHaveFocus(); + expect(dialog.contains(document.activeElement)).toBe(true); + }); + + it("relaxes focus containment while a third-party-overlay descendant is open", async () => { + const { user } = render(); + + await userClick(user, screen.getByRole("button", { name: "Open inner" })); + await flushFocus(); + + // With an `allowsThirdPartyOverlays` descendant open, the outer modal stops + // containing focus, so focus can reach content outside the modal (e.g. a + // third-party overlay injected into the body) and isn't yanked back. + focusOutside(screen.getByTestId("outside")); + expect(screen.getByTestId("outside")).toHaveFocus(); + }); + + it("resumes focus containment after the third-party-overlay descendant closes", async () => { + const { user } = render(); + + await userClick(user, screen.getByRole("button", { name: "Open inner" })); + await userClick(user, screen.getByRole("button", { name: "Close inner" })); + await flushFocus(); + + // Once the third-party descendant is gone, the outer modal traps again. + const dialog = screen.getByRole("dialog"); + focusOutside(screen.getByTestId("outside")); + expect(screen.getByTestId("outside")).not.toHaveFocus(); + expect(dialog.contains(document.activeElement)).toBe(true); + }); + + it("restores focus to the trigger when a third-party-overlay modal closes", async () => { + const { user } = render( + + + {(close) => ( + + Header + + + + + )} + , + ); + const trigger = screen.getByRole("button", { name: "Open modal" }); + + await userClick(user, trigger); + await userClick(user, screen.getByRole("button", { name: "Dismiss" })); + await flushFocus(); + + // A third-party modal never contains focus, but its `FocusScope` still keeps + // `restoreFocus`, so focus returns to the trigger on close. + expect(trigger).toHaveFocus(); + }); + + it("keeps focus in the topmost modal when a replacing child is open", async () => { + const { user } = render( + + + + Outer + + + + + Inner + + + + + + + + , + ); + + await userClick(user, screen.getByRole("button", { name: "Open inner" })); + await flushFocus(); + + // The replacing child is the visible, topmost modal, so focus lives inside + // it rather than the hidden parent. + const inner = screen.getByTestId("inner-content").closest("[role=dialog]"); + expect(inner).not.toBeNull(); + expect(inner?.contains(document.activeElement)).toBe(true); + }); }); +// Appends a node to after the modals are open (mimicking a third-party +// script like Stripe) and lets react-aria's `ariaHideOutside` MutationObserver +// react before we assert. +async function injectBodyNode() { + const node = document.createElement("div"); + await act(async () => { + document.body.appendChild(node); + await Promise.resolve(); + }); + return node; +} + +function ToggleableNestedThirdPartyModal() { + const [isInnerOpen, setIsInnerOpen] = useState(false); + return ( + + + + Outer + + + setIsInnerOpen(false)} + > + {isInnerOpen && ( + + Inner + + + + + )} + + + + + ); +} + +function NestedThirdPartyModal() { + return ( + + + + Outer + + + + + Inner + +
Inner content
+ + + + + + + + ); +} + +function ModalWithSelect() { + return ( + + + + Header + +
Modal content
+ + + + + ); +} + +function NestedDismissModals() { + return ( + + + + Outer + +
Outer content
+ + + + Inner + +
Inner content
+ + + + + + + ); +} + +// Flushes any deferred focus movement (react-aria autofocus/restore can run in a +// microtask or animation frame) so focus assertions observe the settled state. +async function flushFocus() { + await act(async () => { + vi.runOnlyPendingTimers(); + await Promise.resolve(); + }); +} + +// Moves focus to an element outside the modal. `FocusScope`'s containment reacts +// to the resulting `focusin` synchronously, so wrapping in `act` is enough to +// observe whether focus was pulled back in. +function focusOutside(element: HTMLElement) { + act(() => { + element.focus(); + }); +} + +// A standard (focus-trapping) modal with a focusable sibling outside it, used to +// exercise autofocus, focus restoration, and focus containment. +function FocusModal({ isDismissable }: Partial = {}) { + return ( + <> + + + + + Header + + + + + + + + ); +} + +// A standard outer modal hosting a nested `allowsThirdPartyOverlays` modal, plus +// a focusable sibling outside both. Opening the inner modal makes the outer modal +// relax its focus trap; closing it makes the outer modal trap again. +function RelaxableFocusModal() { + return ( + <> + + + + + Outer + + + + {(close) => ( + + Inner + + + + + )} + + + + + + ); +} + const CustomSymbol = (props: object) => ; function renderModal({ diff --git a/easy-ui-react/src/Modal/Modal.tsx b/easy-ui-react/src/Modal/Modal.tsx index 643dfd44..36d7a38f 100644 --- a/easy-ui-react/src/Modal/Modal.tsx +++ b/easy-ui-react/src/Modal/Modal.tsx @@ -9,6 +9,7 @@ import { ModalContext } from "./context"; import { useIntersectionDetection } from "./useIntersectionDetection"; import { ModalContainer } from "./ModalContainer"; import { useModalTrigger } from "./context"; +import type { ModalNestingBehavior } from "./context"; import styles from "./Modal.module.scss"; @@ -122,3 +123,4 @@ Modal.Body = ModalBody; Modal.Footer = ModalFooter; export { ModalContainer, useModalTrigger }; +export type { ModalNestingBehavior }; diff --git a/easy-ui-react/src/Modal/ModalContainer.tsx b/easy-ui-react/src/Modal/ModalContainer.tsx index 502a417f..0e4fdc4b 100644 --- a/easy-ui-react/src/Modal/ModalContainer.tsx +++ b/easy-ui-react/src/Modal/ModalContainer.tsx @@ -2,7 +2,7 @@ import React, { ReactElement, ReactNode, cloneElement, useState } from "react"; import { useOverlayTrigger } from "react-aria"; import { useOverlayTriggerState } from "react-stately"; import { ModalUnderlay } from "./ModalUnderlay"; -import { ModalTriggerProvider } from "./context"; +import { ModalNestingBehavior, ModalTriggerProvider } from "./context"; type ModalContainerProps = { /** @@ -24,6 +24,23 @@ type ModalContainerProps = { */ allowsThirdPartyOverlays?: boolean; + /** + * Controls how this modal's nested children stack relative to it, and cascades + * to descendant modals. `stack` gives each child its own backdrop, and + * `replace` hides this modal while a child is open. When unset, it inherits the + * nearest ancestor modal's value (or `stack` at the root). + */ + childNestingBehavior?: ModalNestingBehavior; + + /** + * Controls how this modal stacks relative to its parent, overriding the + * parent's `childNestingBehavior` for just this modal. `stack` keeps both + * backdrops, and `replace` hides the parent while this modal is open. Local to + * this modal — it does not cascade. Useful for surgically changing one nested + * modal in a larger tree without touching its parent. + */ + selfNestingBehavior?: ModalNestingBehavior; + /** * Handler that is called when the overlay is closed. */ @@ -43,6 +60,8 @@ export function ModalContainer(props: ModalContainerProps) { children, isDismissable = true, allowsThirdPartyOverlays = false, + childNestingBehavior, + selfNestingBehavior, onDismiss = () => {}, } = props; @@ -77,7 +96,13 @@ export function ModalContainer(props: ModalContainerProps) { const { overlayProps } = useOverlayTrigger({ type: "dialog" }, state); return ( - + {state.isOpen && ( void) => ReactElement; @@ -33,6 +33,23 @@ export type ModalTriggerProps = { */ allowsThirdPartyOverlays?: boolean; + /** + * Controls how this modal's nested children stack relative to it, and cascades + * to descendant modals. `stack` gives each child its own backdrop, and + * `replace` hides this modal while a child is open. When unset, it inherits the + * nearest ancestor modal's value (or `stack` at the root). + */ + childNestingBehavior?: ModalNestingBehavior; + + /** + * Controls how this modal stacks relative to its parent, overriding the + * parent's `childNestingBehavior` for just this modal. `stack` keeps both + * backdrops, and `replace` hides the parent while this modal is open. Local to + * this modal — it does not cascade. Useful for surgically changing one nested + * modal in a larger tree without touching its parent. + */ + selfNestingBehavior?: ModalNestingBehavior; + /** * Whether the modal is open by default (controlled). */ @@ -45,7 +62,14 @@ export type ModalTriggerProps = { }; export function ModalTrigger(props: ModalTriggerProps) { - const { children, isDismissable = true, ...inTriggerProps } = props; + const { + children, + isDismissable = true, + allowsThirdPartyOverlays = false, + childNestingBehavior, + selfNestingBehavior, + ...inTriggerProps + } = props; const state = useOverlayTriggerState(inTriggerProps); const { triggerProps, overlayProps } = useOverlayTrigger( @@ -62,7 +86,13 @@ export function ModalTrigger(props: ModalTriggerProps) { const [trigger, modal] = children; return ( - + {cloneElement(trigger, triggerProps)} {state.isOpen && ( diff --git a/easy-ui-react/src/Modal/ModalUnderlay.tsx b/easy-ui-react/src/Modal/ModalUnderlay.tsx index 912b7dfe..1476b144 100644 --- a/easy-ui-react/src/Modal/ModalUnderlay.tsx +++ b/easy-ui-react/src/Modal/ModalUnderlay.tsx @@ -1,10 +1,8 @@ -import React, { ReactNode, RefObject, useRef } from "react"; -import { - Overlay, - useModalOverlay, - useOverlay, - usePreventScroll, -} from "react-aria"; +import React, { ReactNode, RefObject, useEffect, useRef } from "react"; +import { FocusScope, Overlay, useOverlay, usePreventScroll } from "react-aria"; +// `react-aria` doesn't re-export `ariaHideOutside`; the relaxable variant calls +// it directly so it can gate page-hiding on an open third-party descendant. +import { ariaHideOutside } from "@react-aria/overlays"; import { DOMAttributes } from "@react-types/shared"; import { OverlayTriggerState } from "react-stately"; import { classNames } from "../utilities/css"; @@ -12,6 +10,16 @@ import { useModalTriggerContext } from "./context"; import styles from "./Modal.module.scss"; +// Marks every Easy UI modal box. A modal ignores interact-outside events that +// land inside another (nested) Easy UI modal's box, so opening or clicking a +// nested modal never dismisses the one beneath it. Backdrop clicks land outside +// the box and still dismiss. +const MODAL_BOX_ATTRIBUTE = "data-easy-ui-modal-box"; + +function shouldCloseOnInteractOutside(target: Element) { + return !target.closest(`[${MODAL_BOX_ATTRIBUTE}]`); +} + type ModalUnderlayProps = { /** * Modal state. @@ -48,10 +56,27 @@ type ModalUnderlayContentProps = { underlayProps: DOMAttributes; modalRef: RefObject; children: ReactNode; + + /** + * Keeps this modal box visible when a surrounding Easy UI modal's + * `ariaHideOutside` would otherwise `inert` it. Needed by the third-party + * variant, which doesn't run `ariaHideOutside` itself. + */ + keepVisibleUnderModal?: boolean; + + /** + * Drives focus containment on the underlay's `Overlay`. The standard variant + * toggles this as a third-party descendant opens and closes; the third-party + * variant leaves it at its default (it never contains focus). + */ + shouldContainFocus?: boolean; }; export function ModalUnderlay(props: ModalUnderlayProps) { - // Branch into sibling components so each calls its hooks unconditionally. + // Branch into sibling components so each calls its hooks unconditionally. The + // branch keys off the stable `allowsThirdPartyOverlays` prop only, so a modal + // never swaps variants at runtime (which would remount its children — and any + // third-party overlay). return props.allowsThirdPartyOverlays ? ( ) : ( @@ -60,28 +85,52 @@ export function ModalUnderlay(props: ModalUnderlayProps) { } /** - * Standard modal behavior: traps focus and hides the rest of the page via - * react-aria's `useModalOverlay` (which applies `aria-hidden`/`inert` outside - * the modal). + * Standard modal behavior: traps focus and hides the rest of the page + * (`aria-hidden`/`inert`). It reproduces `useModalOverlay` from the lower-level + * hooks rather than calling it directly so both behaviors can be toggled off in + * place — no remount — while an `allowsThirdPartyOverlays` descendant is open. + * + * That relaxation is automatic and necessary: react-aria keeps only the + * *topmost* `ariaHideOutside` observer active, and a third-party descendant uses + * `useOverlay` (no `ariaHideOutside`), so it never takes that observer over. Left + * trapping, this modal's observer would `inert` the descendant's injected + * overlay (e.g. Stripe Link) and its focus trap would steal focus back. Skipping + * `ariaHideOutside` also tears down this modal's observer so an outer ancestor's + * observer (if any) takes back over — every focus-trapping ancestor relaxes in + * turn. With no third-party descendant open (`shouldTrap` true), this is + * behaviorally identical to `useModalOverlay`. */ function FocusTrappingUnderlay(props: ModalUnderlayProps) { const { state, children, isDismissable = true } = props; + const { hasOpenThirdPartyDescendant } = useModalTriggerContext(); + const shouldTrap = !hasOpenThirdPartyDescendant; const ref = useRef(null); - const { modalProps, underlayProps } = useModalOverlay( + const { overlayProps, underlayProps } = useOverlay( { + isOpen: state.isOpen, + onClose: state.close, isDismissable, isKeyboardDismissDisabled: !isDismissable, + shouldCloseOnInteractOutside, }, - state, ref, ); + usePreventScroll({ isDisabled: !state.isOpen }); + + // Mirror `useModalOverlay`'s page-hiding, but only while trapping. + useEffect(() => { + if (state.isOpen && shouldTrap && ref.current) { + return ariaHideOutside([ref.current], { shouldUseInert: true }); + } + }, [state.isOpen, shouldTrap]); return ( {children} @@ -89,16 +138,17 @@ function FocusTrappingUnderlay(props: ModalUnderlayProps) { } /** - * Like `FocusTrappingUnderlay`, but built from the lower-level overlay hooks so - * it can omit the two behaviors that fight third-party overlays: - * - no `ariaHideOutside`, so overlays injected outside the modal aren't - * `inert`'d (which would make them unclickable), and - * - no forced focus containment, so focus can't be stolen back from them. + * For modals that intentionally host third-party overlays (e.g. Stripe + * Link/autofill) injected *outside* the modal. It drops the two behaviors that + * fight those overlays: + * - no `ariaHideOutside`, so injected overlays aren't `inert`'d (unclickable), + * and + * - no focus containment — `ModalUnderlayContent` leaves `shouldContainFocus` + * at its default `false`, so the shared `FocusScope` doesn't trap, and focus + * can't be stolen back from the overlay. * - * `Overlay` still restores focus to the trigger when the modal closes. - * close-on-interact-outside is preserved; react-aria already ignores clicks on - * `[data-react-aria-top-layer]` elements, so a properly tagged third-party - * overlay won't dismiss the modal. + * Focus is still restored to the trigger on close (the `FocusScope` keeps + * `restoreFocus`). close-on-interact-outside is preserved. */ function ThirdPartyOverlayUnderlay(props: ModalUnderlayProps) { const { state, children, isDismissable = true } = props; @@ -110,6 +160,7 @@ function ThirdPartyOverlayUnderlay(props: ModalUnderlayProps) { onClose: state.close, isDismissable, isKeyboardDismissDisabled: !isDismissable, + shouldCloseOnInteractOutside, }, ref, ); @@ -120,6 +171,7 @@ function ThirdPartyOverlayUnderlay(props: ModalUnderlayProps) { modalProps={overlayProps} underlayProps={underlayProps} modalRef={ref} + keepVisibleUnderModal > {children} @@ -135,23 +187,55 @@ function ModalUnderlayContent({ underlayProps, modalRef, children, + keepVisibleUnderModal = false, + shouldContainFocus = false, }: ModalUnderlayContentProps) { - const { hasOpenNestedModal } = useModalTriggerContext(); + const { hasReplacingChild } = useModalTriggerContext(); + // A nested modal whose connection to this one resolved to `replace` hides this + // modal entirely (tracked as `hasReplacingChild`), so only the topmost modal + // is visible. `stack` does nothing here — both modals keep their backdrops. const className = classNames( styles.underlayBg, - hasOpenNestedModal && styles.underlayBgHidden, + hasReplacingChild && styles.underlayBgHidden, ); return ( - -
-
-
- {children} -
+ // We manage focus with our own `FocusScope` instead of `Overlay`'s, because + // every Easy UI `Modal` calls react-aria's `useDialog`, which force-enables + // `Overlay`'s focus containment (via `useOverlayFocusContain`) regardless of + // `shouldContainFocus`. With `disableFocusManagement`, `Overlay` still + // portals and restores nothing itself; our `FocusScope`'s `contain` prop is + // the single, reactive source of truth — and toggling a prop (unlike + // wrapping/unwrapping a `FocusScope`) doesn't remount children, so a modal + // can relax focus in place when a third-party descendant opens. + + +
+
+
+ {children} +
+
-
+ ); } diff --git a/easy-ui-react/src/Modal/context.tsx b/easy-ui-react/src/Modal/context.tsx index 9b97ab9b..4ade67b5 100644 --- a/easy-ui-react/src/Modal/context.tsx +++ b/easy-ui-react/src/Modal/context.tsx @@ -4,12 +4,29 @@ import { DOMAttributes, RefObject, createContext, + useCallback, useContext, useMemo, useState, } from "react"; +// SSR-safe `useLayoutEffect`: behaves as `useLayoutEffect` on the client and +// no-ops without warning on the server, where `ModalTriggerProvider` still +// renders. +import { useLayoutEffect } from "@react-aria/utils"; import { OverlayTriggerState } from "react-stately"; +/** + * Controls how one modal in a nested stack presents relative to the modal it + * connects to. The same value describes that connection from either end — + * `childNestingBehavior` (set on the parent, cascades down) and + * `selfNestingBehavior` (set on the child, local) — and resolves to: + * + * - `stack` — both modals keep their own backdrops; modals simply stack. + * - `replace` — the nested modal hides the modal beneath it, so only the topmost + * modal is visible. + */ +export type ModalNestingBehavior = "stack" | "replace"; + export type ModalContextType = { dialogProps: DOMAttributes; titleProps: DOMAttributes; @@ -23,8 +40,45 @@ export type ModalContextType = { type ModalTriggerContextType = { isDismissable: boolean; state: OverlayTriggerState; - hasOpenNestedModal: boolean; - setHasOpenNestedModal: (hasOpenNestedModal: boolean) => void; + /** + * Whether this modal currently has one or more open nested modals whose + * connection resolved to `replace`. When true, this modal hides itself so the + * nested modal takes its place. + */ + hasReplacingChild: boolean; + /** + * The resolved behavior this modal imposes on its children's connections. + * Cascades: a child that sets neither `childNestingBehavior` nor + * `selfNestingBehavior` inherits this value. + */ + childNestingBehavior: ModalNestingBehavior; + /** + * The resolved behavior of this modal's connection to its parent. Drives this + * modal's own rendering — suppressing its backdrop or hiding its parent. + */ + selfNestingBehavior: ModalNestingBehavior; + /** + * Registers an open nested modal with this modal. The `replaces` argument + * records whether that nested modal's connection resolved to `replace`. + * Returns a cleanup that unregisters it. Callers invoke this from an effect + * tied to the nested modal's open state so the count stays accurate across + * open/close/unmount. + */ + registerNested: (replaces: boolean) => () => void; + /** + * Whether an open descendant modal (at any depth) hosts third-party overlays + * (`allowsThirdPartyOverlays`). A focus-trapping modal reads this to stop + * hiding/trapping the page while such a descendant is open, so the descendant's + * injected overlay (e.g. Stripe Link) isn't `inert`'d or robbed of focus. + */ + hasOpenThirdPartyDescendant: boolean; + /** + * Registers that this modal's subtree contains an open third-party-overlay + * modal, propagating up to every ancestor. Returns a cleanup that unregisters + * it. Like {@link registerNested}, callers invoke this from an effect tied to + * open state so the count stays accurate across open/close/unmount. + */ + registerThirdPartyOverlay: () => () => void; }; export type ModalTriggerProviderProps = Pick< @@ -32,6 +86,25 @@ export type ModalTriggerProviderProps = Pick< "state" | "isDismissable" > & { children: ReactNode; + /** + * How this modal's nested children present relative to it. Cascades to + * descendants. Defaults to the nearest ancestor's value, or `stack` at the + * root. + */ + childNestingBehavior?: ModalNestingBehavior; + /** + * How this modal presents relative to its parent. Local to this modal (does + * not cascade) and overrides the parent's `childNestingBehavior` for this one + * connection. Defaults to the parent's `childNestingBehavior`. + */ + selfNestingBehavior?: ModalNestingBehavior; + /** + * Whether this modal hosts third-party overlays itself. Used to register this + * modal's subtree with focus-trapping ancestors so they can relax while it's + * open. This is the underlay's behavior; the provider only needs it to drive + * registration. + */ + allowsThirdPartyOverlays?: boolean; }; export const ModalContext = createContext(null); @@ -60,15 +133,153 @@ export const useModalTrigger = () => { return modalTriggerContext.state; }; +/** + * Resolves a modal's nesting connections and wires up parent/child registration, + * returning the nesting values for the trigger context. A connection can be + * configured from either end — the parent's `childNestingBehavior` (cascades) or + * the child's `selfNestingBehavior` (local, wins for its own connection) — and + * resolves to `stack` or `replace`. See {@link ModalNestingBehavior}. + */ +function useModalNesting({ + childNestingBehavior, + selfNestingBehavior, + allowsThirdPartyOverlays, + isOpen, +}: { + childNestingBehavior: ModalNestingBehavior | undefined; + selfNestingBehavior: ModalNestingBehavior | undefined; + allowsThirdPartyOverlays: boolean; + isOpen: boolean; +}) { + const parentContext = useContext(ModalTriggerContext); + const [replacingChildCount, setReplacingChildCount] = useState(0); + const [thirdPartyDescendantCount, setThirdPartyDescendantCount] = useState(0); + + // Both behaviors fall back to the parent's resolved `childNestingBehavior` + // (which cascades), then `stack`. The child's `selfNestingBehavior` wins for + // its own connection to the parent. + const childNesting = + childNestingBehavior ?? parentContext?.childNestingBehavior ?? "stack"; + const selfNesting = + selfNestingBehavior ?? parentContext?.childNestingBehavior ?? "stack"; + + // A counter (rather than a boolean) keeps sibling nested modals independent: + // closing one replacing modal must not un-hide this modal while another is + // still open. Functional updates avoid reading stale state across calls. + const registerNested = useCallback((replaces: boolean) => { + if (!replaces) { + return () => {}; + } + setReplacingChildCount((count) => count + 1); + let released = false; + return () => { + if (released) { + return; + } + released = true; + setReplacingChildCount((count) => Math.max(0, count - 1)); + }; + }, []); + + // If this modal's connection to its parent resolves to `replace`, register + // that with the parent so the parent hides while this modal is open. We depend + // on the parent's `registerNested` (stable for the parent's lifetime) rather + // than the whole parent context, whose identity changes as its state updates — + // depending on the full context would re-fire this effect and flicker the + // modal. + // + // This must be a layout effect, not a passive one. When this modal closes, the + // cleanup unhides the parent (the parent is kept mounted but `display: none` + // while replaced). A passive cleanup runs *after* the browser paints, so the + // frame between this modal unmounting and the parent unhiding shows neither — + // a visible flash. A layout cleanup runs synchronously during commit and the + // parent's unhide is flushed before paint, closing that gap. + const parentRegisterNested = parentContext?.registerNested; + const selfReplacesParent = selfNesting === "replace"; + useLayoutEffect(() => { + if (!parentRegisterNested || !isOpen) { + return; + } + return parentRegisterNested(selfReplacesParent); + }, [parentRegisterNested, isOpen, selfReplacesParent]); + + // Counts open third-party-overlay modals anywhere in this modal's subtree. A + // counter (not a boolean) keeps independent descendants from clobbering each + // other; functional updates avoid stale reads across calls. + const registerThirdPartyOverlay = useCallback(() => { + setThirdPartyDescendantCount((count) => count + 1); + let released = false; + return () => { + if (released) { + return; + } + released = true; + setThirdPartyDescendantCount((count) => Math.max(0, count - 1)); + }; + }, []); + + // Propagate third-party-overlay presence up the whole ancestor chain: this + // modal registers with its parent when it either hosts a third-party overlay + // itself or already has one open in its subtree. Bubbling means every + // focus-trapping ancestor — not just the nearest — sees it and can relax, + // which matters because react-aria keeps only the topmost `ariaHideOutside` + // observer active (see ModalUnderlay). Layout effect for the same + // flush-before-paint reasons as the `replace` registration above. + const parentRegisterThirdPartyOverlay = + parentContext?.registerThirdPartyOverlay; + const hasThirdPartyInSubtree = + allowsThirdPartyOverlays || thirdPartyDescendantCount > 0; + useLayoutEffect(() => { + if ( + !parentRegisterThirdPartyOverlay || + !isOpen || + !hasThirdPartyInSubtree + ) { + return; + } + return parentRegisterThirdPartyOverlay(); + }, [parentRegisterThirdPartyOverlay, isOpen, hasThirdPartyInSubtree]); + + return useMemo( + () => ({ + hasReplacingChild: replacingChildCount > 0, + childNestingBehavior: childNesting, + selfNestingBehavior: selfNesting, + registerNested, + hasOpenThirdPartyDescendant: thirdPartyDescendantCount > 0, + registerThirdPartyOverlay, + }), + [ + replacingChildCount, + childNesting, + selfNesting, + registerNested, + thirdPartyDescendantCount, + registerThirdPartyOverlay, + ], + ); +} + export function ModalTriggerProvider({ state, isDismissable, + childNestingBehavior, + selfNestingBehavior, + allowsThirdPartyOverlays = false, children, }: ModalTriggerProviderProps) { - const [hasOpenNestedModal, setHasOpenNestedModal] = useState(false); - const context = useMemo(() => { - return { hasOpenNestedModal, setHasOpenNestedModal, state, isDismissable }; - }, [hasOpenNestedModal, state, isDismissable]); + const nesting = useModalNesting({ + childNestingBehavior, + selfNestingBehavior, + allowsThirdPartyOverlays, + isOpen: state.isOpen, + }); + + const context = useMemo( + () => ({ ...nesting, state, isDismissable }), + [nesting, state, isDismissable], + ); + return ( {children} diff --git a/package-lock.json b/package-lock.json index 8f345e36..65f2051d 100644 --- a/package-lock.json +++ b/package-lock.json @@ -47,7 +47,7 @@ }, "easy-ui-icons": { "name": "@easypost/easy-ui-icons", - "version": "1.0.0-alpha.54", + "version": "1.0.0-alpha.55", "devDependencies": { "@material-symbols/svg-300": "^0.40.2", "@material-symbols/svg-400": "^0.40.2", @@ -127,10 +127,11 @@ }, "easy-ui-react": { "name": "@easypost/easy-ui", - "version": "1.0.0-alpha.117", + "version": "1.0.0-alpha.121", "dependencies": { - "@easypost/easy-ui-icons": "1.0.0-alpha.54", + "@easypost/easy-ui-icons": "1.0.0-alpha.55", "@easypost/easy-ui-tokens": "1.0.0-alpha.17", + "@react-aria/overlays": "^3.31.0", "@react-aria/toast": "^3.0.9", "@react-aria/utils": "^3.32.0", "@react-stately/toast": "^3.1.2", @@ -681,10 +682,11 @@ } }, "node_modules/@bundled-es-modules/deepmerge": { - "version": "4.3.1", - "resolved": "https://registry.npmjs.org/@bundled-es-modules/deepmerge/-/deepmerge-4.3.1.tgz", - "integrity": "sha512-Rk453EklPUPC3NRWc3VUNI/SSUjdBaFoaQvFRmNBNtMHVtOFD5AntiWg5kEE1hqcPqedYFDzxE3ZcMYPcA195w==", + "version": "4.3.2", + "resolved": "https://registry.npmjs.org/@bundled-es-modules/deepmerge/-/deepmerge-4.3.2.tgz", + "integrity": "sha512-q8doe7ndrY2IolUOFIn0A0++JBX38pMhN7kFhTF4cnjIcILf6X6H2yWczInyv8ZFdR0lrE8088X8XS5efxXz8A==", "dev": true, + "license": "MIT", "dependencies": { "deepmerge": "^4.3.1" } @@ -14662,9 +14664,9 @@ } }, "@bundled-es-modules/deepmerge": { - "version": "4.3.1", - "resolved": "https://registry.npmjs.org/@bundled-es-modules/deepmerge/-/deepmerge-4.3.1.tgz", - "integrity": "sha512-Rk453EklPUPC3NRWc3VUNI/SSUjdBaFoaQvFRmNBNtMHVtOFD5AntiWg5kEE1hqcPqedYFDzxE3ZcMYPcA195w==", + "version": "4.3.2", + "resolved": "https://registry.npmjs.org/@bundled-es-modules/deepmerge/-/deepmerge-4.3.2.tgz", + "integrity": "sha512-q8doe7ndrY2IolUOFIn0A0++JBX38pMhN7kFhTF4cnjIcILf6X6H2yWczInyv8ZFdR0lrE8088X8XS5efxXz8A==", "dev": true, "requires": { "deepmerge": "^4.3.1" @@ -15306,8 +15308,9 @@ "@easypost/easy-ui": { "version": "file:easy-ui-react", "requires": { - "@easypost/easy-ui-icons": "1.0.0-alpha.54", + "@easypost/easy-ui-icons": "1.0.0-alpha.55", "@easypost/easy-ui-tokens": "1.0.0-alpha.17", + "@react-aria/overlays": "^3.31.0", "@react-aria/toast": "^3.0.9", "@react-aria/utils": "^3.32.0", "@react-stately/toast": "^3.1.2",