@seed-design/react-drawer 1.0.11 → 2.0.1

package/src/useDrawer.test.tsx

@@ -1,31 +1,16 @@
 import { act, fireEvent, render } from "@testing-library/react";
-import {
-  afterAll,
-  afterEach,
-  beforeAll,
-  describe,
-  expect,
-  it,
-  jest,
-  mock,
-  spyOn,
-} from "bun:test";
+import { afterAll, afterEach, beforeAll, describe, expect, it, jest, mock, spyOn } from "bun:test";
 import * as React from "react";
 import { DRAG_CLASS, TRANSITIONS } from "./constants";
+import { DrawerContent, DrawerRoot } from "./Drawer";
 import { useDrawer, type UseDrawerProps } from "./useDrawer";
 
 interface DrawerHarnessProps extends UseDrawerProps {
-  initialCloseButtonVisible?: boolean;
   onApi?: (api: ReturnType<typeof useDrawer>) => void;
 }
 
-function DrawerHarness({
-  initialCloseButtonVisible = false,
-  onApi,
-  ...props
-}: DrawerHarnessProps) {
+function DrawerHarness({ onApi, ...props }: DrawerHarnessProps) {
   const api = useDrawer(props);
-  const [showCloseButton, setShowCloseButton] = React.useState(initialCloseButtonVisible);
 
   React.useEffect(() => {
     onApi?.(api);
@@ -58,21 +43,12 @@ function DrawerHarness({
       >
         두 번째 스냅으로 이동
       </button>
-      <button
-        data-testid="toggle-close-button"
-        onClick={() => setShowCloseButton((visible) => !visible)}
-      >
-        닫기 버튼 토글
-      </button>
-
-      {showCloseButton ? <button data-testid="close-button" ref={api.closeButtonRef} /> : null}
 
       <div data-testid="is-open">{String(api.isOpen)}</div>
       <div data-testid="is-dragging">{String(api.isDragging)}</div>
       <div data-testid="active-snap-point">{String(api.activeSnapPoint)}</div>
       <div data-testid="has-animation-done">{String(api.hasAnimationDone)}</div>
       <div data-testid="should-overlay-animate">{String(api.shouldOverlayAnimate)}</div>
-      <div data-testid="is-close-button-rendered">{String(api.isCloseButtonRendered)}</div>
 
       <div
         data-testid="drawer"
@@ -114,19 +90,21 @@ describe("useDrawer", () => {
 
   afterEach(() => {
     jest.useRealTimers();
-    document.body.style.pointerEvents = "";
   });
 
-  it("closeButtonRef를 통해 닫기 버튼 마운트 상태를 추적한다", () => {
-    const { getByTestId } = render(<DrawerHarness />);
+  it("트리거를 클릭하면 reason: trigger와 함께 onOpenChange를 호출한다", () => {
+    const onOpenChange = mock(() => {});
+
+    function TriggerHarness() {
+      const api = useDrawer({ onOpenChange });
+      return <button data-testid="trigger" {...api.triggerProps} />;
+    }
 
-    expect(getByTestId("is-close-button-rendered")).toHaveTextContent("false");
+    const { getByTestId } = render(<TriggerHarness />);
 
-    fireEvent.click(getByTestId("toggle-close-button"));
-    expect(getByTestId("is-close-button-rendered")).toHaveTextContent("true");
+    fireEvent.click(getByTestId("trigger"));
 
-    fireEvent.click(getByTestId("toggle-close-button"));
-    expect(getByTestId("is-close-button-rendered")).toHaveTextContent("false");
+    expect(onOpenChange).toHaveBeenCalledWith(true, expect.objectContaining({ reason: "trigger" }));
   });
 
   it("closeDrawer 호출 시 상세 정보와 함께 닫힘 라이프사이클 콜백을 호출한다", () => {
@@ -152,7 +130,6 @@ describe("useDrawer", () => {
       false,
       expect.objectContaining({ reason: "escapeKeyDown" }),
     );
-    expect(document.body.style.pointerEvents).toBe("auto");
 
     act(() => {
       jest.advanceTimersByTime(TRANSITIONS.EXIT_DURATION * 1000);
@@ -161,7 +138,9 @@ describe("useDrawer", () => {
   });
 
   it("dismissible이 false이고 snapPoints가 없으면 드래그를 시작하지 않는다", () => {
-    const { getByTestId } = render(<DrawerHarness defaultOpen dismissible={false} direction="left" />);
+    const { getByTestId } = render(
+      <DrawerHarness defaultOpen dismissible={false} direction="left" />,
+    );
     const drawer = getByTestId("drawer");
 
     fireEvent.pointerDown(drawer, {
@@ -293,9 +272,7 @@ describe("useDrawer", () => {
   it("닫힘 애니메이션 후 active snap point를 첫 번째 스냅 포인트로 되돌린다", () => {
     jest.useFakeTimers();
 
-    const { getByTestId } = render(
-      <DrawerHarness defaultOpen snapPoints={["100px", "300px"]} />,
-    );
+    const { getByTestId } = render(<DrawerHarness defaultOpen snapPoints={["100px", "300px"]} />);
 
     fireEvent.click(getByTestId("set-second-snap"));
     expect(getByTestId("active-snap-point")).toHaveTextContent("300px");
@@ -339,3 +316,40 @@ describe("useDrawer", () => {
     expect(getByTestId("should-overlay-animate")).toHaveTextContent("false");
   });
 });
+
+describe("스크롤 락", () => {
+  // usePreventScroll locks the root element (`overflow: hidden`), not the body.
+  const isScrollLocked = () => document.documentElement.style.overflow === "hidden";
+
+  it("modal이고 열렸을 때 루트 스크롤을 잠그고, 닫히면 해제한다", () => {
+    const { rerender } = render(
+      <DrawerRoot open={false} modal>
+        <DrawerContent>내용</DrawerContent>
+      </DrawerRoot>,
+    );
+    expect(isScrollLocked()).toBe(false);
+
+    rerender(
+      <DrawerRoot open modal>
+        <DrawerContent>내용</DrawerContent>
+      </DrawerRoot>,
+    );
+    expect(isScrollLocked()).toBe(true);
+
+    rerender(
+      <DrawerRoot open={false} modal>
+        <DrawerContent>내용</DrawerContent>
+      </DrawerRoot>,
+    );
+    expect(isScrollLocked()).toBe(false);
+  });
+
+  it("modal=false면 열려 있어도 잠그지 않는다", () => {
+    render(
+      <DrawerRoot open modal={false}>
+        <DrawerContent>내용</DrawerContent>
+      </DrawerRoot>,
+    );
+    expect(isScrollLocked()).toBe(false);
+  });
+});

package/src/useDrawer.ts

@@ -1,6 +1,7 @@
 import { useControllableState } from "@seed-design/react-use-controllable-state";
+import { buttonProps, dataAttr, elementProps } from "@seed-design/dom-utils";
 import type React from "react";
-import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { useCallback, useEffect, useId, useMemo, useRef, useState } from "react";
 import { isAndroid, isIOS, isMobileFirefox } from "./browser";
 import {
   CLOSE_THRESHOLD,
@@ -11,16 +12,17 @@ import {
   WINDOW_TOP_OFFSET,
 } from "./constants";
 import { dampenValue, getTranslate, isInput, isVertical, reset, set } from "./helpers";
-import { usePositionFixed } from "./use-position-fixed";
 import { useSnapPoints } from "./use-snap-points";
 
 interface DrawerReasonToDetailMap {
-  // we might add synthetic events later if needed; currently we aim consistency; DismissableLayer gives us native events
+  // we might add synthetic events later if needed; currently we aim consistency; DismissibleLayer gives us native events
+  trigger: { event: MouseEvent };
   closeButton: { event: MouseEvent };
   escapeKeyDown: { event: KeyboardEvent };
-  interactOutside: { event: PointerEvent | FocusEvent };
+  interactOutside: { event: PointerEvent | TouchEvent | FocusEvent };
   drag: { event: PointerEvent };
   handleClickOnLastSnapPoint: { event: MouseEvent };
+  cascadeDismiss: { dismissedParent: HTMLElement };
 }
 
 type DrawerChangeDetails = {
@@ -40,12 +42,6 @@ export interface UseDrawerProps {
    * @default 0.25
    */
   closeThreshold?: number;
-  /**
-   * When `true` the `body` doesn't get any styles assigned from Drawer
-   * @default true
-   * @deprecated SEED React 2.0.0에서 제거됩니다. 2.0.0부터 항상 기본값 `true`처럼 동작합니다.
-   */
-  noBodyStyles?: boolean;
   onOpenChange?: (open: boolean, details?: DrawerChangeDetails) => void;
   /**
    * Duration for which the drawer is not draggable after scrolling content inside of the drawer.
@@ -105,10 +101,6 @@ export interface UseDrawerProps {
    * Useful to revert any state changes for example.
    */
   onAnimationEnd?: (open: boolean) => void;
-  /**
-   * @deprecated SEED React 2.0.0에서 제거됩니다. 2.0.0부터 항상 기본값 `false`처럼 동작합니다.
-   */
-  preventScrollRestoration?: boolean;
   autoFocus?: boolean;
 
   /**
@@ -136,6 +128,18 @@ export interface UseDrawerProps {
    * @default true
    */
   closeOnEscape?: boolean;
+
+  /**
+   * Whether to lazy mount the drawer content on first open.
+   * @default false
+   */
+  lazyMount?: boolean;
+
+  /**
+   * Whether to unmount the drawer content on exit.
+   * @default false
+   */
+  unmountOnExit?: boolean;
 }
 
 export function useDrawer(props: UseDrawerProps) {
@@ -155,45 +159,32 @@ export function useDrawer(props: UseDrawerProps) {
     fixed,
     modal = true,
     onClose,
-    nested,
-    noBodyStyles = true,
     direction = "bottom",
     defaultOpen = false,
     snapToSequentialPoint = false,
-    preventScrollRestoration = false,
     repositionInputs = true,
     onAnimationEnd,
     container,
-    autoFocus = false,
+    autoFocus = true,
     closeOnInteractOutside = true,
     closeOnEscape = true,
+    lazyMount: lazyMountProp = false,
+    unmountOnExit: unmountOnExitProp = false,
   } = props;
 
+  const drawerId = useId();
+  const titleId = `${drawerId}-title`;
+  const descriptionId = `${drawerId}-description`;
+
   const [isOpen = false, setIsOpen] = useControllableState<boolean, DrawerChangeDetails>({
     defaultProp: defaultOpen,
     prop: openProp,
     onChange: (o: boolean, details?: DrawerChangeDetails) => {
       onOpenChange?.(o, details);
 
-      if (!o && !nested) {
-        restorePositionSetting();
-      }
-
       setTimeout(() => {
         onAnimationEnd?.(o);
       }, TRANSITIONS.EXIT_DURATION * 1000);
-
-      if (o && !modal) {
-        if (typeof window !== "undefined") {
-          window.requestAnimationFrame(() => {
-            document.body.style.pointerEvents = "auto";
-          });
-        }
-      }
-
-      if (!o) {
-        document.body.style.pointerEvents = "auto";
-      }
     },
   });
 
@@ -202,11 +193,6 @@ export function useDrawer(props: UseDrawerProps) {
   const [isDragging, setIsDragging] = useState<boolean>(false);
   const [shouldOverlayAnimate, setShouldOverlayAnimate] = useState<boolean>(false);
 
-  const [isCloseButtonRendered, setIsCloseButtonRendered] = useState<boolean>(false);
-  const closeButtonRef = useCallback((node: HTMLButtonElement | null) => {
-    setIsCloseButtonRendered(!!node);
-  }, []);
-
   const overlayRef = useRef<HTMLDivElement>(null);
   const openTime = useRef<Date | null>(null);
   const dragStartTime = useRef<Date | null>(null);
@@ -251,15 +237,6 @@ export function useDrawer(props: UseDrawerProps) {
     snapToSequentialPoint,
   });
 
-  const { restorePositionSetting } = usePositionFixed({
-    isOpen,
-    modal,
-    nested: nested ?? false,
-    hasBeenOpened,
-    preventScrollRestoration,
-    noBodyStyles,
-  });
-
   function onPress(event: React.PointerEvent<HTMLDivElement>) {
     if (!dismissible && !snapPoints) return;
     if (drawerRef.current && !drawerRef.current.contains(event.target as Node)) return;
@@ -626,14 +603,6 @@ export function useDrawer(props: UseDrawerProps) {
     return () => window.visualViewport?.removeEventListener("resize", onVisualViewportChange);
   }, [activeSnapPointIndex, snapPoints, snapPointsOffset, repositionInputs, fixed]);
 
-  useEffect(() => {
-    if (!modal) {
-      window.requestAnimationFrame(() => {
-        document.body.style.pointerEvents = "auto";
-      });
-    }
-  }, [modal]);
-
   // Effect 1: Track drawer open state
   useEffect(() => {
     if (isOpen) {
@@ -674,6 +643,14 @@ export function useDrawer(props: UseDrawerProps) {
     setShouldOverlayAnimate(false);
   }, [isOpen, snapPoints, fadeFromIndex]);
 
+  const stateProps = useMemo(
+    () =>
+      elementProps({
+        "data-open": dataAttr(isOpen),
+      }),
+    [isOpen],
+  );
+
   return useMemo(
     () => ({
       activeSnapPoint,
@@ -697,16 +674,52 @@ export function useDrawer(props: UseDrawerProps) {
       snapPointsOffset,
       activeSnapPointIndex,
       direction,
-      noBodyStyles,
       container,
       autoFocus,
       setHasBeenOpened,
       setIsOpen,
       closeOnInteractOutside,
       closeOnEscape,
+      titleId,
+      descriptionId,
+      lazyMount: lazyMountProp,
+      unmountOnExit: unmountOnExitProp,
       hasAnimationDone,
-      closeButtonRef,
-      isCloseButtonRendered,
+
+      triggerProps: buttonProps({
+        ...stateProps,
+        onClick: (e) => {
+          if (e.defaultPrevented) return;
+          setIsOpen(true, { reason: "trigger", event: e.nativeEvent });
+        },
+      }),
+      positionerProps: elementProps({
+        ...stateProps,
+        style: {
+          pointerEvents: isOpen && modal ? undefined : "none",
+        },
+      }),
+      backdropProps: elementProps({
+        ...stateProps,
+      }),
+      titleProps: elementProps({
+        id: titleId,
+        ...stateProps,
+      }),
+      descriptionProps: elementProps({
+        id: descriptionId,
+        ...stateProps,
+      }),
+      headerProps: elementProps({
+        ...stateProps,
+      }),
+      closeButtonProps: buttonProps({
+        ...stateProps,
+        onClick: (e) => {
+          if (e.defaultPrevented) return;
+          setIsOpen(false, { reason: "closeButton", event: e.nativeEvent });
+        },
+      }),
     }),
     [
       activeSnapPoint,
@@ -724,7 +737,6 @@ export function useDrawer(props: UseDrawerProps) {
       snapPointsOffset,
       activeSnapPointIndex,
       direction,
-      noBodyStyles,
       container,
       autoFocus,
       setIsOpen,
@@ -733,9 +745,12 @@ export function useDrawer(props: UseDrawerProps) {
       onRelease,
       onDrag,
       onPress,
+      titleId,
+      descriptionId,
+      lazyMountProp,
+      unmountOnExitProp,
       hasAnimationDone,
-      closeButtonRef,
-      isCloseButtonRendered,
+      stateProps,
     ],
   );
 }

package/src/use-position-fixed.ts

@@ -1,149 +0,0 @@
-// This code comes from https://github.com/emilkowalski/vaul/blob/main/src/use-position-fixed.ts
-
-import React from "react";
-import { isSafari } from "./browser";
-
-let previousBodyPosition: Record<string, string> | null = null;
-
-/**
- * This hook is necessary to prevent buggy behavior on iOS devices (need to test on Android).
- * I won't get into too much detail about what bugs it solves, but so far I've found that setting the body to `position: fixed` is the most reliable way to prevent those bugs.
- * Issues that this hook solves:
- * https://github.com/emilkowalski/vaul/issues/435
- * https://github.com/emilkowalski/vaul/issues/433
- * And more that I discovered, but were just not reported.
- */
-
-export function usePositionFixed({
-  isOpen,
-  modal,
-  nested,
-  hasBeenOpened,
-  preventScrollRestoration,
-  noBodyStyles,
-}: {
-  isOpen: boolean;
-  modal: boolean;
-  nested: boolean;
-  hasBeenOpened: boolean;
-  preventScrollRestoration: boolean;
-  noBodyStyles: boolean;
-}) {
-  const [activeUrl, setActiveUrl] = React.useState(() =>
-    typeof window !== "undefined" ? window.location.href : "",
-  );
-  const scrollPos = React.useRef(0);
-
-  const setPositionFixed = React.useCallback(() => {
-    // All browsers on iOS will return true here.
-    if (!isSafari()) return;
-
-    // If previousBodyPosition is already set, don't set it again.
-    if (previousBodyPosition === null && isOpen && !noBodyStyles) {
-      previousBodyPosition = {
-        position: document.body.style.position,
-        top: document.body.style.top,
-        left: document.body.style.left,
-        height: document.body.style.height,
-        right: "unset",
-      };
-
-      // Update the dom inside an animation frame
-      const { scrollX, innerHeight } = window;
-
-      document.body.style.setProperty("position", "fixed", "important");
-      Object.assign(document.body.style, {
-        top: `${-scrollPos.current}px`,
-        left: `${-scrollX}px`,
-        right: "0px",
-        height: "auto",
-      });
-
-      window.setTimeout(
-        () =>
-          window.requestAnimationFrame(() => {
-            // Attempt to check if the bottom bar appeared due to the position change
-            const bottomBarHeight = innerHeight - window.innerHeight;
-            if (bottomBarHeight && scrollPos.current >= innerHeight) {
-              // Move the content further up so that the bottom bar doesn't hide it
-              document.body.style.top = `${-(scrollPos.current + bottomBarHeight)}px`;
-            }
-          }),
-        300,
-      );
-    }
-  }, [isOpen]);
-
-  const restorePositionSetting = React.useCallback(() => {
-    // All browsers on iOS will return true here.
-    if (!isSafari()) return;
-
-    if (previousBodyPosition !== null && !noBodyStyles) {
-      // Convert the position from "px" to Int
-      const y = -parseInt(document.body.style.top, 10);
-      const x = -parseInt(document.body.style.left, 10);
-
-      // Restore styles
-      Object.assign(document.body.style, previousBodyPosition);
-
-      window.requestAnimationFrame(() => {
-        if (preventScrollRestoration && activeUrl !== window.location.href) {
-          setActiveUrl(window.location.href);
-          return;
-        }
-
-        window.scrollTo(x, y);
-      });
-
-      previousBodyPosition = null;
-    }
-  }, [activeUrl]);
-
-  React.useEffect(() => {
-    function onScroll() {
-      scrollPos.current = window.scrollY;
-    }
-
-    onScroll();
-
-    window.addEventListener("scroll", onScroll);
-
-    return () => {
-      window.removeEventListener("scroll", onScroll);
-    };
-  }, []);
-
-  React.useEffect(() => {
-    if (!modal) return;
-
-    return () => {
-      if (typeof document === "undefined") return;
-
-      // Another drawer is opened, safe to ignore the execution
-      const hasDrawerOpened = !!document.querySelector("[data-drawer]");
-      if (hasDrawerOpened) return;
-
-      restorePositionSetting();
-    };
-  }, [modal, restorePositionSetting]);
-
-  React.useEffect(() => {
-    if (nested || !hasBeenOpened) return;
-    // This is needed to force Safari toolbar to show **before** the drawer starts animating to prevent a gnarly shift from happening
-    if (isOpen) {
-      // avoid for standalone mode (PWA)
-      const isStandalone = window.matchMedia("(display-mode: standalone)").matches;
-      !isStandalone && setPositionFixed();
-
-      if (!modal) {
-        window.setTimeout(() => {
-          restorePositionSetting();
-        }, 500);
-      }
-    } else {
-      restorePositionSetting();
-    }
-  }, [isOpen, hasBeenOpened, activeUrl, modal, nested, setPositionFixed, restorePositionSetting]);
-
-  return { restorePositionSetting };
-}