@seed-design/react-drawer 1.0.10 → 1.0.11

package/lib/{Drawer-12s-B35ZJcKm.cjs → Drawer-12s-Bkn6enz-.cjs}

@@ -1029,6 +1029,10 @@ const DrawerContent = /*#__PURE__*/ React.forwardRef((props, ref)=>{
     const pointerStartRef = React.useRef(null);
     const lastKnownPointerEventRef = React.useRef(null);
     const wasBeyondThePointRef = React.useRef(false);
+    // Whether the current gesture moved past the swipe-start threshold. Used to
+    // suppress the trailing click so dragging the sheet doesn't also activate the
+    // element the gesture started on (iOS still synthesizes a click on release).
+    const draggedRef = React.useRef(false);
     const hasSnapPoints = snapPoints && snapPoints.length > 0;
     const isDeltaInDirection = (delta, direction, threshold = 0)=>{
         if (wasBeyondThePointRef.current) return true;
@@ -1086,6 +1090,7 @@ const DrawerContent = /*#__PURE__*/ React.forwardRef((props, ref)=>{
                 x: event.pageX,
                 y: event.pageY
             };
+            draggedRef.current = false;
             onPress(event);
         },
         onOpenAutoFocus: (e)=>{
@@ -1122,9 +1127,14 @@ const DrawerContent = /*#__PURE__*/ React.forwardRef((props, ref)=>{
                 x: xPosition,
                 y: yPosition
             };
+            // Once the pointer travels past the swipe-start threshold the gesture
+            // is a drag, not a tap — remember it so the trailing click can be
+            // suppressed on release (iOS still synthesizes one on the origin).
+            const isBeyondThreshold = Math.abs(xPosition) > swipeStartThreshold || Math.abs(yPosition) > swipeStartThreshold;
+            if (isBeyondThreshold) draggedRef.current = true;
             const isAllowedToSwipe = isDeltaInDirection(delta, direction, swipeStartThreshold);
             if (isAllowedToSwipe) onDrag(event);
-            else if (Math.abs(xPosition) > swipeStartThreshold || Math.abs(yPosition) > swipeStartThreshold) {
+            else if (isBeyondThreshold) {
                 pointerStartRef.current = null;
             }
         },
@@ -1144,6 +1154,17 @@ const DrawerContent = /*#__PURE__*/ React.forwardRef((props, ref)=>{
                 handleOnPointerUp(lastKnownPointerEventRef.current);
             }
         },
+        onClickCapture: (event)=>{
+            restProps.onClickCapture?.(event);
+            // Swallow the click that follows a drag so dragging the sheet (e.g. a
+            // swipe-to-dismiss started on an item) doesn't also activate that item.
+            // A plain tap leaves draggedRef false and clicks normally.
+            if (draggedRef.current) {
+                event.preventDefault();
+                event.stopPropagation();
+                draggedRef.current = false;
+            }
+        },
         onInteractOutside: (e)=>{
             // Only close if event is not prevented (e.g., by onFocusOutside or onPointerDownOutside)
             if (dismissible && closeOnInteractOutside && !e.defaultPrevented) {

package/lib/{Drawer-12s-B-JAOvwq.js → Drawer-12s-DxbsRb10.js}

@@ -1006,6 +1006,10 @@ const DrawerContent = /*#__PURE__*/ forwardRef((props, ref)=>{
     const pointerStartRef = useRef(null);
     const lastKnownPointerEventRef = useRef(null);
     const wasBeyondThePointRef = useRef(false);
+    // Whether the current gesture moved past the swipe-start threshold. Used to
+    // suppress the trailing click so dragging the sheet doesn't also activate the
+    // element the gesture started on (iOS still synthesizes a click on release).
+    const draggedRef = useRef(false);
     const hasSnapPoints = snapPoints && snapPoints.length > 0;
     const isDeltaInDirection = (delta, direction, threshold = 0)=>{
         if (wasBeyondThePointRef.current) return true;
@@ -1063,6 +1067,7 @@ const DrawerContent = /*#__PURE__*/ forwardRef((props, ref)=>{
                 x: event.pageX,
                 y: event.pageY
             };
+            draggedRef.current = false;
             onPress(event);
         },
         onOpenAutoFocus: (e)=>{
@@ -1099,9 +1104,14 @@ const DrawerContent = /*#__PURE__*/ forwardRef((props, ref)=>{
                 x: xPosition,
                 y: yPosition
             };
+            // Once the pointer travels past the swipe-start threshold the gesture
+            // is a drag, not a tap — remember it so the trailing click can be
+            // suppressed on release (iOS still synthesizes one on the origin).
+            const isBeyondThreshold = Math.abs(xPosition) > swipeStartThreshold || Math.abs(yPosition) > swipeStartThreshold;
+            if (isBeyondThreshold) draggedRef.current = true;
             const isAllowedToSwipe = isDeltaInDirection(delta, direction, swipeStartThreshold);
             if (isAllowedToSwipe) onDrag(event);
-            else if (Math.abs(xPosition) > swipeStartThreshold || Math.abs(yPosition) > swipeStartThreshold) {
+            else if (isBeyondThreshold) {
                 pointerStartRef.current = null;
             }
         },
@@ -1121,6 +1131,17 @@ const DrawerContent = /*#__PURE__*/ forwardRef((props, ref)=>{
                 handleOnPointerUp(lastKnownPointerEventRef.current);
             }
         },
+        onClickCapture: (event)=>{
+            restProps.onClickCapture?.(event);
+            // Swallow the click that follows a drag so dragging the sheet (e.g. a
+            // swipe-to-dismiss started on an item) doesn't also activate that item.
+            // A plain tap leaves draggedRef false and clicks normally.
+            if (draggedRef.current) {
+                event.preventDefault();
+                event.stopPropagation();
+                draggedRef.current = false;
+            }
+        },
         onInteractOutside: (e)=>{
             // Only close if event is not prevented (e.g., by onFocusOutside or onPointerDownOutside)
             if (dismissible && closeOnInteractOutside && !e.defaultPrevented) {

package/lib/index.cjs

@@ -1,4 +1,4 @@
-var Drawer12s = require('./Drawer-12s-B35ZJcKm.cjs');
+var Drawer12s = require('./Drawer-12s-Bkn6enz-.cjs');
 
 var Drawer_namespace = {
   __proto__: null,

package/lib/index.js

@@ -1,5 +1,5 @@
-import { D as DrawerBackdrop, a as DrawerCloseButton, b as DrawerContent, c as DrawerDescription, d as DrawerHandle, e as DrawerHeader, f as DrawerPositioner, g as DrawerRoot, h as DrawerTitle, i as DrawerTrigger } from './Drawer-12s-B-JAOvwq.js';
-export { u as useDrawer, j as useDrawerContext } from './Drawer-12s-B-JAOvwq.js';
+import { D as DrawerBackdrop, a as DrawerCloseButton, b as DrawerContent, c as DrawerDescription, d as DrawerHandle, e as DrawerHeader, f as DrawerPositioner, g as DrawerRoot, h as DrawerTitle, i as DrawerTrigger } from './Drawer-12s-DxbsRb10.js';
+export { u as useDrawer, j as useDrawerContext } from './Drawer-12s-DxbsRb10.js';
 
 var Drawer_namespace = {
   __proto__: null,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@seed-design/react-drawer",
-  "version": "1.0.10",
+  "version": "1.0.11",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/daangn/seed-design.git",

package/src/Drawer.test.tsx

@@ -0,0 +1,111 @@
+import { fireEvent, render } from "@testing-library/react";
+import { afterAll, beforeAll, describe, expect, it, mock, spyOn } from "bun:test";
+import { DrawerContent, DrawerDescription, DrawerRoot, DrawerTitle } from "./Drawer";
+
+function mockRect(element: HTMLElement, size = 100) {
+  return spyOn(element, "getBoundingClientRect").mockReturnValue({
+    x: 0,
+    y: 0,
+    width: size,
+    height: size,
+    top: 0,
+    left: 0,
+    right: size,
+    bottom: size,
+    toJSON: () => {},
+  });
+}
+
+// happy-dom's fireEvent does not carry page coordinates onto the synthetic
+// event, so build the native PointerEvent and pin pageX/pageY explicitly —
+// the same data a real touch gesture delivers and what the swipe-threshold
+// check reads.
+function firePointer(type: string, element: HTMLElement, x: number, y: number) {
+  const event = new PointerEvent(type, {
+    bubbles: true,
+    cancelable: true,
+    pointerId: 1,
+    pointerType: "touch",
+    clientX: x,
+    clientY: y,
+  });
+  Object.defineProperty(event, "pageX", { value: x });
+  Object.defineProperty(event, "pageY", { value: y });
+  fireEvent(element, event);
+}
+
+function setup(onItemClick: () => void) {
+  const utils = render(
+    <DrawerRoot defaultOpen dismissible direction="bottom" modal={false}>
+      <DrawerContent>
+        <DrawerTitle>Sheet</DrawerTitle>
+        <DrawerDescription>Sheet body</DrawerDescription>
+        <button type="button" data-testid="item" onClick={onItemClick}>
+          item
+        </button>
+      </DrawerContent>
+    </DrawerRoot>,
+  );
+  const content = utils.container.ownerDocument.querySelector("[data-drawer]") as HTMLElement;
+
+  // getTranslate() reads getComputedStyle().transform, which happy-dom leaves
+  // empty; seed an identity matrix and a measurable rect so onDrag doesn't throw.
+  content.style.transform = "matrix(1, 0, 0, 1, 0, 0)";
+  mockRect(content);
+
+  return { ...utils, content, item: utils.getByTestId("item") };
+}
+
+describe("DrawerContent trailing-click suppression", () => {
+  const originalSetPointerCapture = window.HTMLElement.prototype.setPointerCapture;
+
+  beforeAll(() => {
+    window.HTMLElement.prototype.setPointerCapture = mock(() => {});
+  });
+
+  afterAll(() => {
+    window.HTMLElement.prototype.setPointerCapture = originalSetPointerCapture;
+  });
+
+  it("드래그가 swipe 임계값을 넘으면 뒤따르는 click을 억제한다", () => {
+    const onItemClick = mock(() => {});
+    const { content, item } = setup(onItemClick);
+
+    firePointer("pointerdown", content, 50, 50);
+    firePointer("pointermove", content, 50, 85); // +35px > touch 임계값 10px
+    firePointer("pointerup", content, 50, 85);
+    fireEvent.click(item, { clientX: 50, clientY: 85 });
+
+    expect(onItemClick).not.toHaveBeenCalled();
+  });
+
+  it("임계값을 넘지 않은 순수 tap은 click을 통과시킨다", () => {
+    const onItemClick = mock(() => {});
+    const { content, item } = setup(onItemClick);
+
+    firePointer("pointerdown", content, 50, 50);
+    firePointer("pointermove", content, 52, 53); // 임계값 이내
+    firePointer("pointerup", content, 52, 53);
+    fireEvent.click(item, { clientX: 52, clientY: 53 });
+
+    expect(onItemClick).toHaveBeenCalledTimes(1);
+  });
+
+  it("click 없이 끝난 드래그 뒤의 깨끗한 tap은 다음 pointerdown에서 리셋되어 통과한다", () => {
+    const onItemClick = mock(() => {});
+    const { content, item } = setup(onItemClick);
+
+    // 큰 드래그는 iOS가 click을 합성하지 않아 click 없이 끝난다.
+    firePointer("pointerdown", content, 50, 50);
+    firePointer("pointermove", content, 50, 85);
+    firePointer("pointerup", content, 50, 85);
+
+    // 다음 제스처의 pointerdown이 드래그 상태를 리셋하므로 tap은 정상 동작해야 한다.
+    firePointer("pointerdown", content, 50, 50);
+    firePointer("pointermove", content, 51, 51);
+    firePointer("pointerup", content, 51, 51);
+    fireEvent.click(item, { clientX: 51, clientY: 51 });
+
+    expect(onItemClick).toHaveBeenCalledTimes(1);
+  });
+});

package/src/Drawer.tsx

@@ -130,6 +130,10 @@ export const DrawerContent = forwardRef<HTMLDivElement, DrawerContentProps>((pro
   const pointerStartRef = useRef<{ x: number; y: number } | null>(null);
   const lastKnownPointerEventRef = useRef<React.PointerEvent<HTMLDivElement> | null>(null);
   const wasBeyondThePointRef = useRef(false);
+  // Whether the current gesture moved past the swipe-start threshold. Used to
+  // suppress the trailing click so dragging the sheet doesn't also activate the
+  // element the gesture started on (iOS still synthesizes a click on release).
+  const draggedRef = useRef(false);
   const hasSnapPoints = snapPoints && snapPoints.length > 0;
 
   const isDeltaInDirection = (
@@ -197,6 +201,7 @@ export const DrawerContent = forwardRef<HTMLDivElement, DrawerContentProps>((pro
         if (handleOnly) return;
         restProps.onPointerDown?.(event);
         pointerStartRef.current = { x: event.pageX, y: event.pageY };
+        draggedRef.current = false;
         onPress(event);
       }}
       onOpenAutoFocus={(e) => {
@@ -235,12 +240,16 @@ export const DrawerContent = forwardRef<HTMLDivElement, DrawerContentProps>((pro
         const swipeStartThreshold = event.pointerType === "touch" ? 10 : 2;
         const delta = { x: xPosition, y: yPosition };
 
+        // Once the pointer travels past the swipe-start threshold the gesture
+        // is a drag, not a tap — remember it so the trailing click can be
+        // suppressed on release (iOS still synthesizes one on the origin).
+        const isBeyondThreshold =
+          Math.abs(xPosition) > swipeStartThreshold || Math.abs(yPosition) > swipeStartThreshold;
+        if (isBeyondThreshold) draggedRef.current = true;
+
         const isAllowedToSwipe = isDeltaInDirection(delta, direction, swipeStartThreshold);
         if (isAllowedToSwipe) onDrag(event);
-        else if (
-          Math.abs(xPosition) > swipeStartThreshold ||
-          Math.abs(yPosition) > swipeStartThreshold
-        ) {
+        else if (isBeyondThreshold) {
           pointerStartRef.current = null;
         }
       }}
@@ -260,6 +269,17 @@ export const DrawerContent = forwardRef<HTMLDivElement, DrawerContentProps>((pro
           handleOnPointerUp(lastKnownPointerEventRef.current);
         }
       }}
+      onClickCapture={(event) => {
+        restProps.onClickCapture?.(event);
+        // Swallow the click that follows a drag so dragging the sheet (e.g. a
+        // swipe-to-dismiss started on an item) doesn't also activate that item.
+        // A plain tap leaves draggedRef false and clicks normally.
+        if (draggedRef.current) {
+          event.preventDefault();
+          event.stopPropagation();
+          draggedRef.current = false;
+        }
+      }}
       onInteractOutside={(e) => {
         // Only close if event is not prevented (e.g., by onFocusOutside or onPointerDownOutside)
         if (dismissible && closeOnInteractOutside && !e.defaultPrevented) {