diff --git a/src/components/Drawer/Drawer.stories.tsx b/src/components/Drawer/Drawer.stories.tsx index e0d0c09f..24cbdccb 100644 --- a/src/components/Drawer/Drawer.stories.tsx +++ b/src/components/Drawer/Drawer.stories.tsx @@ -32,11 +32,11 @@ export default { ], }; -type DrawerArgs = Pick & { +type DrawerArgs = Pick & { headerCloseBtn: boolean; }; -export const Default: StoryFn = (args) => { +export const Default: StoryFn = (args: DrawerArgs) => { const { headerCloseBtn, ...rest } = args; const [isOpen, setIsOpen] = useState(false); @@ -67,10 +67,9 @@ export const Default: StoryFn = (args) => { Default.args = { placement: "left", - showMask: true, }; -export const MultipleDrawers: StoryFn = (args) => { +export const MultipleDrawers: StoryFn = (args: DrawerArgs) => { const { headerCloseBtn, ...rest } = args; const [isFirstOpen, setIsFirstOpen] = useState(false); const [isSecondOpen, setIsSecondOpen] = useState(false); @@ -128,5 +127,4 @@ export const MultipleDrawers: StoryFn = (args) => { MultipleDrawers.args = { placement: "left", - showMask: true, }; diff --git a/src/components/Drawer/Drawer.test.tsx b/src/components/Drawer/Drawer.test.tsx index a79e9f06..47eddcdb 100644 --- a/src/components/Drawer/Drawer.test.tsx +++ b/src/components/Drawer/Drawer.test.tsx @@ -42,6 +42,86 @@ describe("", () => { expect(mockFn).toHaveBeenCalledTimes(1); }); + it("renders the visible mask when closeOnOutsideClick is false", () => { + render( + + Drawer content + , + ); + + expect(screen.getByTestId("mask")).toHaveAttribute("data-overlay", "true"); + }); + + it("does not close on outside click when closeOnOutsideClick is false", async () => { + const mockFn = jest.fn(); + + render( + + Drawer content + , + ); + + await userEvent.click(screen.getByTestId("mask")); + + expect(mockFn).not.toHaveBeenCalled(); + }); + + it("renders only one visible mask when multiple drawers are open", () => { + render( + <> + + First drawer + + + Second drawer + + , + ); + + const masks = screen.getAllByTestId("mask"); + + expect(masks).toHaveLength(2); + expect(masks.filter((mask) => mask.getAttribute("data-overlay") === "true")).toHaveLength(1); + }); + + it("promotes the visible mask when the top drawer closes", async () => { + const onCloseTop = jest.fn(); + + const { rerender } = render( + <> + + First drawer + + + Second drawer + + , + ); + + expect( + screen.getAllByTestId("mask").filter((mask) => mask.getAttribute("data-overlay") === "true"), + ).toHaveLength(1); + + rerender( + <> + + First drawer + + + Second drawer + + , + ); + + await waitFor(() => { + expect( + screen + .getAllByTestId("mask") + .filter((mask) => mask.getAttribute("data-overlay") === "true"), + ).toHaveLength(1); + }); + }); + it("renders correctly without Header and Footer", () => { const bodyTxt = faker.lorem.word(); const mockFn = jest.fn(); diff --git a/src/components/Drawer/Drawer.tsx b/src/components/Drawer/Drawer.tsx index b6ec0b36..53c604d7 100644 --- a/src/components/Drawer/Drawer.tsx +++ b/src/components/Drawer/Drawer.tsx @@ -16,6 +16,8 @@ import Header, { HeaderProps } from "./components/Header"; import Body from "./components/Body"; import Mask from "./components/Mask"; import Footer from "./components/Footer"; +import { useDrawerStackPosition } from "./hooks/useDrawerStackPosition"; +import { DRAWER_ROOT_ID } from "./constants"; import { FCWithChildren } from "types/common"; type DialogVariants = { @@ -40,14 +42,11 @@ const dialogVariants: Variants = { }), }; -const DRAWER_ROOT = "drawerRoot"; - -const DrawerRoot: FCWithChildren = () =>
; +const DrawerRoot: FCWithChildren = () =>
; export type DrawerProps = React.HTMLAttributes & { isOpen: boolean; closeOnOutsideClick?: boolean; - showMask?: boolean; placement?: "left" | "right"; width?: string; dialogStyles?: MotionStyle; @@ -68,7 +67,6 @@ const Drawer: FCWithChildren & DrawerCompoundProps = (props) => { isOpen, placement = "left", closeOnOutsideClick = true, - showMask = true, width = "31.5rem", dialogStyles, dialogClassName, @@ -88,7 +86,7 @@ const Drawer: FCWithChildren & DrawerCompoundProps = (props) => { }) ); }); - const drawerEl = document.getElementById(DRAWER_ROOT); + const drawerEl = document.getElementById(DRAWER_ROOT_ID); const dialogClassNames = classNames({ dialog: true, "placement-left": placement === "left", @@ -96,12 +94,15 @@ const Drawer: FCWithChildren & DrawerCompoundProps = (props) => { [dialogClassName ?? ""]: dialogClassName, }); const drawerRef = useRef(null); + const { isBottomMostOpenDrawer } = useDrawerStackPosition(isOpen); - const handleClose = () => { - if (!isOpen || !closeOnOutsideClick) return; + const handleOutsideClick = () => { + if (!isOpen) return; onClose(); }; + const shouldRenderMask = closeOnOutsideClick || isBottomMostOpenDrawer; + const shouldShowVisibleMask = isBottomMostOpenDrawer; useEffect(() => { if (!isOpen) return; @@ -155,7 +156,12 @@ const Drawer: FCWithChildren & DrawerCompoundProps = (props) => { ref={drawerRef} {...rest} > - {showMask && } + {shouldRenderMask && ( + + )} matches snapshot with close button 1`] = ` data-testid="drawer" >
@@ -28,7 +29,7 @@ exports[` matches snapshot with close button 1`] = ` style="opacity: 0; transform: none;" >
@@ -68,7 +69,8 @@ exports[` matches snapshot with header, body and footer 1`] = ` id="main-drawer" >
@@ -90,7 +92,7 @@ exports[` matches snapshot with header, body and footer 1`] = ` style="opacity: 0; transform: none;" >
@@ -119,7 +121,7 @@ exports[` matches snapshot with header, body and footer 1`] = ` Test body
Test footer @@ -140,7 +142,8 @@ exports[` matches snapshot with noGutters Header 1`] = ` data-testid="drawer" >
@@ -162,7 +165,7 @@ exports[` matches snapshot with noGutters Header 1`] = ` style="opacity: 0; transform: none;" >
@@ -201,7 +204,8 @@ exports[` matches snapshot with right placement 1`] = ` data-testid="drawer" >
@@ -223,7 +227,7 @@ exports[` matches snapshot with right placement 1`] = ` style="opacity: 0; transform: translateX(100%) translateZ(0);" >
@@ -262,7 +266,8 @@ exports[` matches snapshot without header and footer 1`] = ` data-testid="drawer" >
diff --git a/src/components/Drawer/components/Mask.tsx b/src/components/Drawer/components/Mask.tsx index 2830a55e..5c2494c4 100644 --- a/src/components/Drawer/components/Mask.tsx +++ b/src/components/Drawer/components/Mask.tsx @@ -12,18 +12,20 @@ const maskVariants: Variants = { }; export type MaskProps = { - onClose: (e: MouseEvent) => void; + visible?: boolean; + onClick?: (e: MouseEvent) => void; }; -const Mask: FC = ({ onClose }) => ( +const Mask: FC = ({ visible = true, onClick }) => ( ); diff --git a/src/components/Drawer/components/styles.ts b/src/components/Drawer/components/styles.ts index e3eef56d..a3b2d40a 100644 --- a/src/components/Drawer/components/styles.ts +++ b/src/components/Drawer/components/styles.ts @@ -26,14 +26,15 @@ export const drawerBody = css` overflow-y: auto; `; -export const maskContainer = css` - position: absolute; - top: 0; - left: 0; - height: 100%; - width: 100%; - background-color: rgba(0, 0, 0, 0.45); -`; +export const maskContainer = (visible: boolean): SerializedStyles => + css` + position: absolute; + top: 0; + left: 0; + height: 100%; + width: 100%; + background-color: ${visible ? "rgba(0, 0, 0, 0.45)" : "transparent"}; + `; export const footerContainer = css` padding: 1rem; diff --git a/src/components/Drawer/constants.ts b/src/components/Drawer/constants.ts new file mode 100644 index 00000000..7a596fd3 --- /dev/null +++ b/src/components/Drawer/constants.ts @@ -0,0 +1 @@ +export const DRAWER_ROOT_ID = "drawerRoot"; diff --git a/src/components/Drawer/hooks/useDrawerStackPosition.test.ts b/src/components/Drawer/hooks/useDrawerStackPosition.test.ts new file mode 100644 index 00000000..64122d3b --- /dev/null +++ b/src/components/Drawer/hooks/useDrawerStackPosition.test.ts @@ -0,0 +1,102 @@ +import { useDrawerStackPosition } from "./useDrawerStackPosition"; +import { act, renderHook } from "@test-utils/render"; + +const mountDrawerStack = (initialProps: { isOpen: boolean }) => { + return renderHook(({ isOpen }) => useDrawerStackPosition(isOpen), { initialProps }); +}; + +describe("useDrawerStackPosition", () => { + const mountedHooks: ReturnType[] = []; + + const resetMountedDrawers = (): void => { + mountedHooks.forEach(({ unmount }) => unmount()); + mountedHooks.length = 0; + }; + + beforeEach(() => { + resetMountedDrawers(); + }); + + afterEach(() => { + resetMountedDrawers(); + }); + + const trackHook = (hook: ReturnType) => { + mountedHooks.push(hook); + + return hook; + }; + + it("returns false when the drawer is closed", () => { + const { result } = trackHook(mountDrawerStack({ isOpen: false })); + + expect(result.current.isBottomMostOpenDrawer).toBe(false); + }); + + it("does not register a closed drawer in the stack", () => { + trackHook(mountDrawerStack({ isOpen: false })); + const { result } = trackHook(mountDrawerStack({ isOpen: true })); + + expect(result.current.isBottomMostOpenDrawer).toBe(true); + }); + + it("returns true when a single drawer is open", () => { + const { result } = trackHook(mountDrawerStack({ isOpen: true })); + + expect(result.current.isBottomMostOpenDrawer).toBe(true); + }); + + it("shows the visible mask only on the bottom-most drawer when nested", () => { + const parent = trackHook(mountDrawerStack({ isOpen: true })); + const child = trackHook(mountDrawerStack({ isOpen: true })); + + expect(parent.result.current.isBottomMostOpenDrawer).toBe(true); + expect(child.result.current.isBottomMostOpenDrawer).toBe(false); + }); + + it("registers nested drawers in open order", () => { + const first = trackHook(mountDrawerStack({ isOpen: true })); + const second = trackHook(mountDrawerStack({ isOpen: true })); + const third = trackHook(mountDrawerStack({ isOpen: true })); + + expect(first.result.current.isBottomMostOpenDrawer).toBe(true); + expect(second.result.current.isBottomMostOpenDrawer).toBe(false); + expect(third.result.current.isBottomMostOpenDrawer).toBe(false); + }); + + it("promotes the parent when the top nested drawer closes", () => { + const parent = trackHook(mountDrawerStack({ isOpen: true })); + const child = trackHook(mountDrawerStack({ isOpen: true })); + + act(() => { + child.rerender({ isOpen: false }); + }); + + expect(parent.result.current.isBottomMostOpenDrawer).toBe(true); + expect(child.result.current.isBottomMostOpenDrawer).toBe(false); + }); + + it("promotes the remaining drawer when the bottom drawer closes", () => { + const parent = trackHook(mountDrawerStack({ isOpen: true })); + const child = trackHook(mountDrawerStack({ isOpen: true })); + + act(() => { + parent.rerender({ isOpen: false }); + }); + + expect(parent.result.current.isBottomMostOpenDrawer).toBe(false); + expect(child.result.current.isBottomMostOpenDrawer).toBe(true); + }); + + it("removes the drawer from the stack on unmount while open", () => { + const parent = trackHook(mountDrawerStack({ isOpen: true })); + const child = trackHook(mountDrawerStack({ isOpen: true })); + + act(() => { + child.unmount(); + mountedHooks.pop(); + }); + + expect(parent.result.current.isBottomMostOpenDrawer).toBe(true); + }); +}); diff --git a/src/components/Drawer/hooks/useDrawerStackPosition.ts b/src/components/Drawer/hooks/useDrawerStackPosition.ts new file mode 100644 index 00000000..34d5d7d5 --- /dev/null +++ b/src/components/Drawer/hooks/useDrawerStackPosition.ts @@ -0,0 +1,48 @@ +import { useId, useLayoutEffect, useSyncExternalStore } from "react"; + +let openDrawerStack: string[] = []; +const listeners = new Set<() => void>(); + +const subscribe = (listener: () => void): (() => void) => { + listeners.add(listener); + + return (): void => { + listeners.delete(listener); + }; +}; + +const notifyDrawerStackListeners = (): void => { + listeners.forEach((listener) => listener()); +}; + +const getIsBottomMostOpenDrawer = (key: string, isOpen: boolean): boolean => { + return isOpen && openDrawerStack[0] === key; +}; + +/** + * Tracks open drawers globally so only the bottom-most drawer renders the visible backdrop. + * Uses open order and `useSyncExternalStore` for tear-free reads. + */ +export const useDrawerStackPosition = (isOpen: boolean): { isBottomMostOpenDrawer: boolean } => { + const key = useId(); + + useLayoutEffect(() => { + if (!isOpen) return; + + openDrawerStack.push(key); + notifyDrawerStackListeners(); + + return (): void => { + openDrawerStack = openDrawerStack.filter((stackKey) => stackKey !== key); + notifyDrawerStackListeners(); + }; + }, [isOpen, key]); + + const isBottomMostOpenDrawer = useSyncExternalStore( + subscribe, + () => getIsBottomMostOpenDrawer(key, isOpen), + () => false, + ); + + return { isBottomMostOpenDrawer }; +};