@nation-a/ui 0.10.0 → 0.10.2

package/dist/index.cjs

@@ -5889,6 +5889,7 @@ const dialogRecipe = sva({
       left: "0",
       width: "100vw",
       zIndex: "overlay",
+      pointerEvents: "auto",
       _open: {
         animation: "backdrop-in"
       },
@@ -9558,7 +9559,8 @@ const useBottomSheet = (props) => {
     initTransformValue: 0,
     canDragRef: true,
     maxTransformValue: 0,
-    initialOpenHeightPx: 0
+    initialOpenHeightPx: 0,
+    isBottomSheetOpen: false
   });
   const [springs, api] = useSpring(() => ({
     transform: "translateY(0px)",
@@ -9570,18 +9572,20 @@ const useBottomSheet = (props) => {
       transform: `translateY(${maxTransformValue}px)`,
       config: SPRING_CONFIG.up
     });
-    if (onOpen) onOpen();
+    if (onOpen && !metrics.current.isBottomSheetOpen) onOpen();
+    metrics.current.isBottomSheetOpen = true;
   };
   const snapToMin = () => {
     api.start({
       transform: "translateY(0px)",
       config: SPRING_CONFIG.down
     });
-    if (onClose) onClose();
+    if (onClose && metrics.current.isBottomSheetOpen) onClose();
+    metrics.current.isBottomSheetOpen = false;
   };
   const handleContentTouch = (e) => {
     const target = e.target;
-    if (!target.matches(INTERACTIVE_ELEMENTS) && expendOnContentDrag) {
+    if (!target.matches(INTERACTIVE_ELEMENTS) && expendOnContentDrag || !metrics.current.isBottomSheetOpen) {
       metrics.current.canDragRef = true;
     } else {
       metrics.current.canDragRef = false;
@@ -9597,9 +9601,7 @@ const useBottomSheet = (props) => {
       return;
     }
     const currentTransform = springs.transform.get();
-    const initTransformValue = Number(
-      currentTransform.replace("translateY(", "").replace("px)", "") || 0
-    );
+    const initTransformValue = Number(currentTransform.replace("translateY(", "").replace("px)", "") || 0);
     metrics.current.initTransformValue = initTransformValue;
     metrics.current.initTouchPosition = clientY;
   };
@@ -9625,9 +9627,7 @@ const useBottomSheet = (props) => {
       return;
     }
     const currentTransform = springs.transform.get();
-    const finalTransformValue = Number(
-      currentTransform.replace("translateY(", "").replace("px)", "") || 0
-    );
+    const finalTransformValue = Number(currentTransform.replace("translateY(", "").replace("px)", "") || 0);
     const transformedDistance = initTransformValue - finalTransformValue;
     if (transformedDistance < 0 && SNAP_TO_MIN_THRESHOLD < Math.abs(transformedDistance)) {
       snapToMin();
@@ -9654,21 +9654,55 @@ const useBottomSheet = (props) => {
     up: handleEnd,
     leave: handleEnd
   };
+  const preventScrollOnBackdrop = (e) => {
+    if (bottomSheetRef.current && (bottomSheetRef.current.contains(e.target) || // 최소 높이로 떠 있는 바텀시트의 핸들 영역을 클릭하는 경우 특별 처리
+    e instanceof TouchEvent && isBottomSheetHandleArea(e.touches[0].clientY))) {
+      return;
+    }
+    e.preventDefault();
+    e.stopPropagation();
+  };
+  const isBottomSheetHandleArea = (clientY) => {
+    if (!bottomSheetRef.current) return false;
+    const { initialOpenHeightPx } = metrics.current;
+    const bottomSheetTop = window.innerHeight - initialOpenHeightPx;
+    const handleAreaTop = bottomSheetTop;
+    const handleAreaBottom = bottomSheetTop + BOTTOM_SHEET_HANDLE_HEIGHT;
+    return clientY >= handleAreaTop && clientY <= handleAreaBottom;
+  };
+  const handleTouchStart = (e) => {
+    const clientY = e.touches[0].clientY;
+    if (isBottomSheetHandleArea(clientY)) {
+      e.preventDefault();
+      e.stopPropagation();
+      handleTouch.start(e);
+    }
+  };
   React.useEffect(() => {
     if (isOpen) snapToMax();
     else snapToMin();
-    const handleTouchMove = (e) => {
-      if (bottomSheetRef.current && !bottomSheetRef.current.contains(e.target)) {
-        e.preventDefault();
-      }
-    };
     if (isOpen) {
-      document.addEventListener("touchmove", handleTouchMove, { passive: false });
+      document.addEventListener("touchmove", preventScrollOnBackdrop, { passive: false });
+      document.addEventListener("wheel", preventScrollOnBackdrop, { passive: false });
+      document.addEventListener("mousewheel", preventScrollOnBackdrop, { passive: false });
+      document.addEventListener("touchstart", handleTouchStart, { passive: false });
+      document.body.style.overflow = "hidden";
+      document.body.style.touchAction = "none";
     } else {
-      document.removeEventListener("touchmove", handleTouchMove);
+      document.removeEventListener("touchmove", preventScrollOnBackdrop);
+      document.removeEventListener("wheel", preventScrollOnBackdrop);
+      document.removeEventListener("mousewheel", preventScrollOnBackdrop);
+      document.removeEventListener("touchstart", handleTouchStart);
+      document.body.style.overflow = "";
+      document.body.style.touchAction = "";
     }
     return () => {
-      document.removeEventListener("touchmove", handleTouchMove);
+      document.removeEventListener("touchmove", preventScrollOnBackdrop);
+      document.removeEventListener("wheel", preventScrollOnBackdrop);
+      document.removeEventListener("mousewheel", preventScrollOnBackdrop);
+      document.removeEventListener("touchstart", handleTouchStart);
+      document.body.style.overflow = "";
+      document.body.style.touchAction = "";
     };
   }, [isOpen]);
   React.useEffect(() => {
@@ -9676,7 +9710,7 @@ const useBottomSheet = (props) => {
     const contentElement = contentRef.current;
     metrics.current.initialOpenHeightPx = window.innerHeight * (snapPercent.min > 1 ? 1 : snapPercent.min);
     if (snapPercent.max === "INNER_HEIGHT" && contentElement) {
-      metrics.current.maxTransformValue = (contentElement.clientHeight - BOTTOM_SHEET_HANDLE_HEIGHT) * -1;
+      metrics.current.maxTransformValue = (contentElement.clientHeight + BOTTOM_SHEET_HANDLE_HEIGHT) * -1;
     } else if (typeof snapPercent.max === "number") {
       metrics.current.maxTransformValue = (window.innerHeight - metrics.current.initialOpenHeightPx) * (snapPercent.max > 1 ? 1 : snapPercent.max) * -1;
     }