@x-plat/design-system 0.14.6 → 0.14.7

package/dist/index.js

@@ -7304,6 +7304,23 @@ var useFocusTrap = (containerRef, enabled, options = {}) => {
     return () => document.removeEventListener("keydown", onKey);
   }, [enabled, trap, containerRef]);
 };
+var useCloseOnContainerScroll = (enabled, popRef, onClose) => {
+  const onCloseRef = React10.useRef(onClose);
+  onCloseRef.current = onClose;
+  React10.useEffect(() => {
+    if (!enabled) return;
+    const onScroll = (e) => {
+      const target = e.target;
+      if (target === document || target === document.documentElement || target === document.body) {
+        return;
+      }
+      if (target instanceof Node && popRef.current?.contains(target)) return;
+      onCloseRef.current();
+    };
+    window.addEventListener("scroll", onScroll, { passive: true, capture: true });
+    return () => window.removeEventListener("scroll", onScroll, true);
+  }, [enabled, popRef]);
+};
 
 // src/components/Modal/Modal.tsx
 import { jsx as jsx313 } from "react/jsx-runtime";
@@ -7979,15 +7996,21 @@ import React19 from "react";
 var useAutoPosition = (triggerRef, popRef, enabled = true) => {
   const [direction, setDirection] = React19.useState("bottom");
   const directionRef = React19.useRef("bottom");
-  const calculatePosition = React19.useCallback(() => {
+  const sizeRef = React19.useRef(null);
+  const calculatePosition = React19.useCallback((remeasure = false) => {
     const pop = popRef.current;
     if (!triggerRef.current || !pop) return;
+    if (remeasure || !sizeRef.current) {
+      sizeRef.current = { w: pop.offsetWidth, h: pop.offsetHeight };
+    }
+    const { w: popW, h: popH } = sizeRef.current;
     const triggerRect = triggerRef.current.getBoundingClientRect();
-    const popW = pop.offsetWidth;
-    const popH = pop.offsetHeight;
     const viewportHeight = window.innerHeight;
     const viewportWidth = window.innerWidth;
-    if (popH === 0 || popW === 0) return;
+    if (popH === 0 || popW === 0) {
+      sizeRef.current = null;
+      return;
+    }
     let next = "bottom";
     let top;
     let left;
@@ -8010,27 +8033,31 @@ var useAutoPosition = (triggerRef, popRef, enabled = true) => {
     }
   }, [triggerRef, popRef]);
   React19.useLayoutEffect(() => {
-    if (!enabled) return;
-    calculatePosition();
-    const raf = requestAnimationFrame(calculatePosition);
+    if (!enabled) {
+      sizeRef.current = null;
+      return;
+    }
+    calculatePosition(true);
+    const raf = requestAnimationFrame(() => calculatePosition(true));
     return () => cancelAnimationFrame(raf);
   }, [calculatePosition, enabled]);
   React19.useEffect(() => {
     if (!enabled || !popRef.current) return;
     const observer = new ResizeObserver(() => {
-      calculatePosition();
+      calculatePosition(true);
     });
     observer.observe(popRef.current);
     return () => observer.disconnect();
   }, [calculatePosition, enabled, popRef]);
   React19.useEffect(() => {
     if (!enabled) return;
-    const onScrollOrResize = () => calculatePosition();
-    window.addEventListener("resize", onScrollOrResize, { passive: true });
-    window.addEventListener("scroll", onScrollOrResize, { passive: true, capture: true });
+    const onScroll = () => calculatePosition();
+    const onResize = () => calculatePosition(true);
+    window.addEventListener("resize", onResize, { passive: true });
+    window.addEventListener("scroll", onScroll, { passive: true, capture: true });
     return () => {
-      window.removeEventListener("resize", onScrollOrResize);
-      window.removeEventListener("scroll", onScrollOrResize, true);
+      window.removeEventListener("resize", onResize);
+      window.removeEventListener("scroll", onScroll, true);
     };
   }, [calculatePosition, enabled]);
   return { direction };
@@ -8073,6 +8100,7 @@ var Dropdown = (props) => {
   const menuRef = React21.useRef(null);
   const { direction } = useAutoPosition_default(triggerRef, menuRef, mounted);
   useClickOutside_default([triggerRef, menuRef], () => setIsOpen(false), isOpen);
+  useCloseOnContainerScroll(isOpen, menuRef, () => setIsOpen(false));
   useEscapeKey(isOpen, () => {
     setIsOpen(false);
     triggerRef.current?.focus({ preventScroll: true });
@@ -10003,6 +10031,7 @@ var PopOver = (props) => {
   const [localOpen, setLocalOpen] = React27.useState(false);
   const [eventTrigger, setEventTrigger] = React27.useState(false);
   useClickOutside_default([popRef, triggerRef], onClose, isOpen);
+  useCloseOnContainerScroll(isOpen, popRef, onClose);
   useEscapeKey(isOpen, () => {
     onClose();
     triggerRef.current?.focus({ preventScroll: true });
@@ -10283,6 +10312,7 @@ var SelectRoot = (props) => {
   }, []);
   const toggle = React31.useCallback(() => setOpen((prev) => !prev), []);
   useClickOutside_default([contentRef, triggerRef], close, isOpen);
+  useCloseOnContainerScroll(isOpen, contentRef, close);
   useEscapeKey(isOpen, () => {
     close();
     triggerRef.current?.focus({ preventScroll: true });
@@ -11223,6 +11253,7 @@ var TimePicker = (props) => {
   }, [step, min, max]);
   const close = React40.useCallback(() => setOpen(false), []);
   useClickOutside_default([triggerRef, contentRef], close, isOpen);
+  useCloseOnContainerScroll(isOpen, contentRef, close);
   useEscapeKey(isOpen, () => {
     close();
     triggerRef.current?.focus({ preventScroll: true });

package/guidelines/MIGRATION.md

@@ -284,6 +284,43 @@ Dropdown · PopOver · TimePicker 가 전부 애니메이션 없이 툭 튀어
 **올리기만 하면 된다. 쓰는 쪽에서 고칠 것은 없다.** `.repositioning` 클래스를
 직접 잡는 CSS 를 쓰고 있었다면 그 규칙만 지우면 된다.
 
+## 0.14.6 → 0.14.7 — 안쪽 상자가 스크롤되면 오버레이가 닫힌다
+
+**동작 변경이다.** `Select` · `Dropdown` · `PopOver` · `TimePicker` 를 열어 둔
+채 **페이지가 아닌 안쪽 상자**(`overflow: auto`)를 스크롤하면 닫힌다.
+
+닫지 않는 경우:
+
+- **페이지(문서) 스크롤** — 팝업이 `absolute` + 문서 좌표라 브라우저가 함께
+  옮겨 준다. 지연도 겹침도 없으므로 닫을 이유가 없다.
+- **팝업 자기 목록 스크롤** — 셀렉트 목록은 `max-height` 안에서 스스로
+  스크롤한다. 그걸로 닫히면 고를 수가 없다.
+
+### 왜
+
+팝업은 `body` 밑 포털에 있고 트리거는 상자 안에 있다. 둘을 이어 주는 것이
+브라우저에 없으므로 JS 가 매번 다시 붙여야 하는데, **스크롤은 컴포지터가
+먼저 그리고 `scroll` 이벤트는 그 뒤에 메인 스레드로 온다.** 그래서 JS 로
+옮기는 한 항상 한 프레임 이상 늦는다. 0.12.0 부터 0.14.6 까지 네 번에 걸쳐
+줄여 봤지만(rAF 묶기 → DOM 직접 쓰기 → 문서 좌표 → rAF 제거) 원리가 그대로라
+남았다.
+
+두 번째 증상도 같은 뿌리다. 팝업이 상자 **바깥**에 있어 그 상자에 잘리지
+않으므로, 트리거가 헤더 밑으로 지나가도 팝업만 헤더 위에 남는다. **위치가
+틀린 것이지 순서가 틀린 게 아니라서 `z-index` 로는 못 고친다** — 헤더를
+올리면 이번엔 목록 윗부분이 잘린다.
+
+닫으면 둘 다 없어진다.
+
+> **DS `Layout` 을 쓰면 이 조건에 기본으로 들어간다.**
+> `.lib-xplat-layout` 이 `overflow: hidden` 이고 `.lib-xplat-layout-content`
+> 만 `overflow: auto` 라 페이지가 아예 스크롤되지 않는다.
+
+### 쓰는 쪽에서 할 일
+
+**없다.** 다만 「열어 둔 채 스크롤하며 고르는」 흐름이 있었다면 그것만 막힌다.
+목록이 길어 스크롤이 필요하다면 `Select` 의 `searchable` 로 걸러내는 쪽이 낫다.
+
 ---
 
 ## Next.js App Router 에서 반드시 걸리는 것

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@x-plat/design-system",
-  "version": "0.14.6",
+  "version": "0.14.7",
   "description": "XPLAT UI Design System",
   "author": "XPLAT WOONG",
   "main": "dist/index.cjs",