@x-plat/design-system 0.14.13 → 0.14.15

package/dist/index.js

@@ -7054,7 +7054,7 @@ Chip.displayName = "Chip";
 var Chip_default = Chip;
 
 // src/components/DatePicker/InputDatePicker/index.tsx
-import React13 from "react";
+import React14 from "react";
 
 // src/components/Input/Input.tsx
 import React8 from "react";
@@ -7227,11 +7227,149 @@ PasswordInput.displayName = "PasswordInput";
 var PasswordInput_default = PasswordInput;
 
 // src/components/Modal/Modal.tsx
-import React11 from "react";
+import React12 from "react";
 import { createPortal } from "react-dom";
 
 // src/tokens/hooks/useOverlayKeyboard.ts
+import React11 from "react";
+
+// src/tokens/hooks/useAutoPosition.ts
 import React10 from "react";
+var findScrollParent = (el) => {
+  for (let p = el.parentElement; p; p = p.parentElement) {
+    const { overflowY, overflowX } = getComputedStyle(p);
+    if (/(auto|scroll)/.test(overflowY) || /(auto|scroll)/.test(overflowX)) return p;
+  }
+  return null;
+};
+var TRIGGER_GAP = 8;
+var computePlacement = (triggerRect, popW, popH, clip) => {
+  const roomBelow = clip.bottom - triggerRect.bottom - TRIGGER_GAP;
+  const roomAbove = triggerRect.top - clip.top - TRIGGER_GAP;
+  let direction;
+  let top;
+  let maxHeight = null;
+  if (popH <= roomBelow) {
+    direction = "bottom";
+    top = triggerRect.bottom + TRIGGER_GAP;
+  } else if (popH <= roomAbove) {
+    direction = "top";
+    top = triggerRect.top - TRIGGER_GAP - popH;
+  } else {
+    const room = Math.max(roomBelow, roomAbove, 0);
+    if (roomBelow >= roomAbove) {
+      direction = "bottom";
+      top = triggerRect.bottom + TRIGGER_GAP;
+    } else {
+      direction = "top";
+      top = triggerRect.top - TRIGGER_GAP - room;
+    }
+    maxHeight = room;
+  }
+  let left = triggerRect.left;
+  if (left + popW > clip.right - 8) {
+    left = triggerRect.right - popW;
+  }
+  if (left < clip.left + 8) left = clip.left + 8;
+  const drawnH = maxHeight === null ? popH : Math.min(popH, maxHeight);
+  return {
+    direction,
+    top,
+    left,
+    maxHeight,
+    over: {
+      top: Math.max(0, clip.top - top),
+      right: Math.max(0, left + popW - clip.right),
+      bottom: Math.max(0, top + drawnH - clip.bottom),
+      left: Math.max(0, clip.left - left)
+    }
+  };
+};
+var useAutoPosition = (triggerRef, popRef, enabled = true) => {
+  const directionRef = React10.useRef("bottom");
+  const sizeRef = React10.useRef(null);
+  const scrollParentRef = React10.useRef(null);
+  const placedRef = React10.useRef(false);
+  const calculatePosition = React10.useCallback((remeasure = false) => {
+    const pop = popRef.current;
+    if (!triggerRef.current || !pop) return;
+    if (remeasure || !sizeRef.current) {
+      sizeRef.current = {
+        w: pop.offsetWidth,
+        h: Math.max(pop.offsetHeight, pop.scrollHeight)
+      };
+    }
+    const { w: popW, h: popH } = sizeRef.current;
+    const triggerRect = triggerRef.current.getBoundingClientRect();
+    if (popH === 0 || popW === 0) {
+      sizeRef.current = null;
+      return;
+    }
+    const parentRect = scrollParentRef.current?.getBoundingClientRect();
+    const clip = {
+      top: Math.max(parentRect?.top ?? 0, 0),
+      bottom: Math.min(parentRect?.bottom ?? window.innerHeight, window.innerHeight),
+      left: Math.max(parentRect?.left ?? 0, 0),
+      right: Math.min(parentRect?.right ?? window.innerWidth, window.innerWidth)
+    };
+    const first = !placedRef.current;
+    if (first) pop.style.transition = "none";
+    const { direction: next, top, left, over, maxHeight } = computePlacement(
+      triggerRect,
+      popW,
+      popH,
+      clip
+    );
+    pop.style.top = `${top + window.scrollY}px`;
+    pop.style.left = `${left + window.scrollX}px`;
+    pop.style.maxHeight = maxHeight === null ? "" : `${maxHeight}px`;
+    pop.style.clipPath = over.top || over.right || over.bottom || over.left ? `inset(${over.top}px ${over.right}px ${over.bottom}px ${over.left}px)` : "none";
+    directionRef.current = next;
+    pop.classList.toggle("top", next === "top");
+    pop.classList.toggle("bottom", next === "bottom");
+    if (first) {
+      void pop.offsetHeight;
+      pop.style.transition = "";
+      placedRef.current = true;
+    }
+  }, [triggerRef, popRef]);
+  React10.useLayoutEffect(() => {
+    if (!enabled) {
+      sizeRef.current = null;
+      scrollParentRef.current = null;
+      placedRef.current = false;
+      return;
+    }
+    if (triggerRef.current) {
+      scrollParentRef.current = findScrollParent(triggerRef.current);
+    }
+    calculatePosition(true);
+    const raf = requestAnimationFrame(() => calculatePosition(true));
+    return () => cancelAnimationFrame(raf);
+  }, [calculatePosition, enabled, triggerRef]);
+  React10.useEffect(() => {
+    if (!enabled || !popRef.current) return;
+    const observer = new ResizeObserver(() => {
+      calculatePosition(true);
+    });
+    observer.observe(popRef.current);
+    return () => observer.disconnect();
+  }, [calculatePosition, enabled, popRef]);
+  React10.useEffect(() => {
+    if (!enabled) return;
+    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", onResize);
+      window.removeEventListener("scroll", onScroll, true);
+    };
+  }, [calculatePosition, enabled]);
+};
+var useAutoPosition_default = useAutoPosition;
+
+// src/tokens/hooks/useOverlayKeyboard.ts
 var FOCUSABLE = [
   "a[href]",
   "button:not([disabled])",
@@ -7245,7 +7383,7 @@ var focusableIn = (el) => Array.from(el.querySelectorAll(FOCUSABLE)).filter(
   (n) => n.offsetWidth > 0 || n.offsetHeight > 0 || n === document.activeElement
 );
 var useEscapeKey = (enabled, onEscape) => {
-  React10.useEffect(() => {
+  React11.useEffect(() => {
     if (!enabled) return;
     const onKey = (e) => {
       if (e.key !== "Escape") return;
@@ -7259,8 +7397,8 @@ var useEscapeKey = (enabled, onEscape) => {
 };
 var useFocusTrap = (containerRef, enabled, options = {}) => {
   const { trap = false, initialFocus } = options;
-  const restoreRef = React10.useRef(null);
-  React10.useEffect(() => {
+  const restoreRef = React11.useRef(null);
+  React11.useEffect(() => {
     if (!enabled) return;
     restoreRef.current = document.activeElement;
     const raf = requestAnimationFrame(() => {
@@ -7278,7 +7416,7 @@ var useFocusTrap = (containerRef, enabled, options = {}) => {
       if (prev && document.contains(prev)) prev.focus({ preventScroll: true });
     };
   }, [enabled, containerRef, initialFocus]);
-  React10.useEffect(() => {
+  React11.useEffect(() => {
     if (!enabled || !trap) return;
     const onKey = (e) => {
       if (e.key !== "Tab") return;
@@ -7304,22 +7442,22 @@ var useFocusTrap = (containerRef, enabled, options = {}) => {
     return () => document.removeEventListener("keydown", onKey);
   }, [enabled, trap, containerRef]);
 };
-var useCloseOnContainerScroll = (enabled, popRef, onClose) => {
-  const onCloseRef = React10.useRef(onClose);
+var useCloseWhenTriggerHidden = (enabled, triggerRef, onClose) => {
+  const onCloseRef = React11.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]);
+  React11.useEffect(() => {
+    const trigger = triggerRef.current;
+    if (!enabled || !trigger) return;
+    const observer = new IntersectionObserver(
+      ([entry]) => {
+        if (!entry.isIntersecting) onCloseRef.current();
+      },
+      // 그릇이 없으면 root: null → 뷰포트 기준
+      { root: findScrollParent(trigger), threshold: 0 }
+    );
+    observer.observe(trigger);
+    return () => observer.disconnect();
+  }, [enabled, triggerRef]);
 };
 
 // src/components/Modal/Modal.tsx
@@ -7327,13 +7465,13 @@ import { jsx as jsx313 } from "react/jsx-runtime";
 var ANIMATION_DURATION_MS = 200;
 var Modal = (props) => {
   const { isOpen, onClose, children } = props;
-  const [mounted, setMounted] = React11.useState(false);
-  const [visible, setVisible] = React11.useState(false);
-  const [settled, setSettled] = React11.useState(false);
-  const boxRef = React11.useRef(null);
+  const [mounted, setMounted] = React12.useState(false);
+  const [visible, setVisible] = React12.useState(false);
+  const [settled, setSettled] = React12.useState(false);
+  const boxRef = React12.useRef(null);
   useEscapeKey(isOpen, onClose);
   useFocusTrap(boxRef, isOpen && mounted, { trap: true });
-  React11.useEffect(() => {
+  React12.useEffect(() => {
     if (isOpen) {
       setMounted(true);
       const show = setTimeout(() => setVisible(true), 1);
@@ -7377,9 +7515,9 @@ Modal.displayName = "Modal";
 var Modal_default = Modal;
 
 // src/components/DatePicker/SingleDatePicker/index.tsx
-import React12 from "react";
+import React13 from "react";
 import { Fragment as Fragment4, jsx as jsx314, jsxs as jsxs200 } from "react/jsx-runtime";
-var DayCell2 = React12.memo(
+var DayCell2 = React13.memo(
   ({
     day,
     disabled,
@@ -7428,33 +7566,33 @@ var SingleDatePicker = (props) => {
     required,
     validations
   } = props;
-  const labelId = React12.useId();
+  const labelId = React13.useId();
   const initialYear = value?.getFullYear();
   const initialMonth = value?.getMonth();
   const { year, month, days, goToPrevMonth, goToNextMonth, setYear, setMonth } = useCalendar(
     initialYear,
     initialMonth
   );
-  const [pickerMode, setPickerMode] = React12.useState("days");
-  const [yearRangeStart, setYearRangeStart] = React12.useState(
+  const [pickerMode, setPickerMode] = React13.useState("days");
+  const [yearRangeStart, setYearRangeStart] = React13.useState(
     Math.floor((initialYear ?? (/* @__PURE__ */ new Date()).getFullYear()) / 12) * 12
   );
-  const minTime = React12.useMemo(
+  const minTime = React13.useMemo(
     () => minDate ? new Date(minDate.getFullYear(), minDate.getMonth(), minDate.getDate()).getTime() : -Infinity,
     [minDate]
   );
-  const maxTime = React12.useMemo(
+  const maxTime = React13.useMemo(
     () => maxDate ? new Date(maxDate.getFullYear(), maxDate.getMonth(), maxDate.getDate()).getTime() : Infinity,
     [maxDate]
   );
-  const highlightSet = React12.useMemo(() => {
+  const highlightSet = React13.useMemo(() => {
     const set = /* @__PURE__ */ new Set();
     for (const h of highlightDates) {
       set.add(`${h.getFullYear()}-${h.getMonth()}-${h.getDate()}`);
     }
     return set;
   }, [highlightDates]);
-  const handleSelect = React12.useCallback(
+  const handleSelect = React13.useCallback(
     (date) => {
       onChange?.(date);
     },
@@ -7597,8 +7735,8 @@ var InputDatePicker = (props) => {
     required,
     validations
   } = props;
-  const [isOpen, setIsOpen] = React13.useState(false);
-  const [tempDate, setTempDate] = React13.useState(value ?? /* @__PURE__ */ new Date());
+  const [isOpen, setIsOpen] = React14.useState(false);
+  const [tempDate, setTempDate] = React14.useState(value ?? /* @__PURE__ */ new Date());
   const handleOpen = () => {
     if (disabled) return;
     setTempDate(value ?? /* @__PURE__ */ new Date());
@@ -7650,18 +7788,18 @@ InputDatePicker.displayName = "InputDatePicker";
 var InputDatePicker_default = InputDatePicker;
 
 // src/components/DatePicker/PopupPicker/index.tsx
-import React17 from "react";
+import React18 from "react";
 
 // src/components/DatePicker/RangePicker/index.tsx
-import React16 from "react";
+import React17 from "react";
 
 // src/components/Tab/Tab.tsx
-import React15 from "react";
+import React16 from "react";
 
 // src/components/Tab/TabItem.tsx
-import React14 from "react";
+import React15 from "react";
 import { jsx as jsx316 } from "react/jsx-runtime";
-var TabItem = React14.forwardRef((props, ref) => {
+var TabItem = React15.forwardRef((props, ref) => {
   const { isActive: isActive2, title, onClick } = props;
   return /* @__PURE__ */ jsx316(
     "button",
@@ -7685,11 +7823,11 @@ import { jsx as jsx317, jsxs as jsxs202 } from "react/jsx-runtime";
 var Tab = (props) => {
   const { activeIndex, onChange, tabs, variant, type, size = "md" } = props;
   const shape = variant ?? type ?? "default";
-  const [underlineStyle, setUnderlineStyle] = React15.useState({
+  const [underlineStyle, setUnderlineStyle] = React16.useState({
     left: 0,
     width: 0
   });
-  const itemRefs = React15.useRef([]);
+  const itemRefs = React16.useRef([]);
   const handleKeyDown = (e) => {
     const last = tabs.length - 1;
     let next = null;
@@ -7705,7 +7843,7 @@ var Tab = (props) => {
   const handleChangeActiveTab = (tabItem, tabIdx) => {
     onChange(tabItem, tabIdx);
   };
-  React15.useEffect(() => {
+  React16.useEffect(() => {
     const el = itemRefs.current[activeIndex];
     if (el) {
       setUnderlineStyle({ left: el.offsetLeft, width: el.offsetWidth });
@@ -7761,8 +7899,8 @@ var RangePicker = (props) => {
     required,
     validations
   } = props;
-  const labelId = React16.useId();
-  const [activeTab, setActiveTab] = React16.useState("start");
+  const labelId = React17.useId();
+  const [activeTab, setActiveTab] = React17.useState("start");
   const handleStartChange = (date) => {
     if (!date) return;
     const newStart = date > endDate ? endDate : date;
@@ -7856,7 +7994,7 @@ var RangePicker_default = RangePicker;
 import { jsx as jsx319, jsxs as jsxs204 } from "react/jsx-runtime";
 var PopupPicker = (props) => {
   const { component, type, locale } = props;
-  const [isOpen, setIsOpen] = React17.useState(false);
+  const [isOpen, setIsOpen] = React18.useState(false);
   const handleClick = () => setIsOpen(true);
   const handleClose = () => setIsOpen(false);
   const handleSingleChange = (date) => {
@@ -7865,7 +8003,7 @@ var PopupPicker = (props) => {
     handleClose();
   };
   return /* @__PURE__ */ jsxs204("div", { className: "lib-xplat-popup-datepicker", children: [
-    React17.cloneElement(component, { onClick: handleClick }),
+    React18.cloneElement(component, { onClick: handleClick }),
     /* @__PURE__ */ jsx319(Modal_default, { isOpen, onClose: handleClose, children: /* @__PURE__ */ jsxs204("div", { className: clsx_default("lib-xplat-popup-datepicker-card", type === "range" && "range-mode"), children: [
       /* @__PURE__ */ jsxs204("div", { className: "popup-datepicker-content", children: [
         type === "single" && /* @__PURE__ */ jsx319(
@@ -7924,18 +8062,18 @@ Divider.displayName = "Divider";
 var Divider_default = Divider;
 
 // src/components/Drawer/Drawer.tsx
-import React18 from "react";
+import React19 from "react";
 import { createPortal as createPortal2 } from "react-dom";
 import { jsx as jsx321, jsxs as jsxs205 } from "react/jsx-runtime";
 var ANIMATION_DURATION_MS2 = 250;
 var Drawer = (props) => {
   const { isOpen, onClose, placement = "right", size = "md", title, children } = props;
-  const [mounted, setMounted] = React18.useState(false);
-  const [visible, setVisible] = React18.useState(false);
-  const panelRef = React18.useRef(null);
+  const [mounted, setMounted] = React19.useState(false);
+  const [visible, setVisible] = React19.useState(false);
+  const panelRef = React19.useRef(null);
   useEscapeKey(isOpen, onClose);
   useFocusTrap(panelRef, isOpen && mounted, { trap: true });
-  React18.useEffect(() => {
+  React19.useEffect(() => {
     if (isOpen) {
       setMounted(true);
       const t2 = setTimeout(() => setVisible(true), 1);
@@ -7991,141 +8129,6 @@ var Portal = ({ children }) => {
 Portal.displayName = "Portal";
 var Portal_default = Portal;
 
-// src/tokens/hooks/useAutoPosition.ts
-import React19 from "react";
-var findScrollParent = (el) => {
-  for (let p = el.parentElement; p; p = p.parentElement) {
-    const { overflowY, overflowX } = getComputedStyle(p);
-    if (/(auto|scroll)/.test(overflowY) || /(auto|scroll)/.test(overflowX)) return p;
-  }
-  return null;
-};
-var computePlacement = (triggerRect, popW, popH, clip) => {
-  const roomBelow = clip.bottom - triggerRect.bottom;
-  const roomAbove = triggerRect.top - clip.top;
-  let direction;
-  let top;
-  let maxHeight = null;
-  if (popH <= roomBelow) {
-    direction = "bottom";
-    top = triggerRect.bottom;
-  } else if (popH <= roomAbove) {
-    direction = "top";
-    top = triggerRect.top - popH;
-  } else {
-    const room = Math.max(roomBelow, roomAbove, 0);
-    if (roomBelow >= roomAbove) {
-      direction = "bottom";
-      top = triggerRect.bottom;
-    } else {
-      direction = "top";
-      top = triggerRect.top - room;
-    }
-    maxHeight = room;
-  }
-  let left = triggerRect.left;
-  if (left + popW > clip.right - 8) {
-    left = triggerRect.right - popW;
-  }
-  if (left < clip.left + 8) left = clip.left + 8;
-  const drawnH = maxHeight === null ? popH : Math.min(popH, maxHeight);
-  return {
-    direction,
-    top,
-    left,
-    maxHeight,
-    over: {
-      top: Math.max(0, clip.top - top),
-      right: Math.max(0, left + popW - clip.right),
-      bottom: Math.max(0, top + drawnH - clip.bottom),
-      left: Math.max(0, clip.left - left)
-    }
-  };
-};
-var useAutoPosition = (triggerRef, popRef, enabled = true) => {
-  const directionRef = React19.useRef("bottom");
-  const sizeRef = React19.useRef(null);
-  const scrollParentRef = React19.useRef(null);
-  const placedRef = React19.useRef(false);
-  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: Math.max(pop.offsetHeight, pop.scrollHeight)
-      };
-    }
-    const { w: popW, h: popH } = sizeRef.current;
-    const triggerRect = triggerRef.current.getBoundingClientRect();
-    if (popH === 0 || popW === 0) {
-      sizeRef.current = null;
-      return;
-    }
-    const parentRect = scrollParentRef.current?.getBoundingClientRect();
-    const clip = {
-      top: Math.max(parentRect?.top ?? 0, 0),
-      bottom: Math.min(parentRect?.bottom ?? window.innerHeight, window.innerHeight),
-      left: Math.max(parentRect?.left ?? 0, 0),
-      right: Math.min(parentRect?.right ?? window.innerWidth, window.innerWidth)
-    };
-    const first = !placedRef.current;
-    if (first) pop.style.transition = "none";
-    const { direction: next, top, left, over, maxHeight } = computePlacement(
-      triggerRect,
-      popW,
-      popH,
-      clip
-    );
-    pop.style.top = `${top + window.scrollY}px`;
-    pop.style.left = `${left + window.scrollX}px`;
-    pop.style.maxHeight = maxHeight === null ? "" : `${maxHeight}px`;
-    pop.style.clipPath = over.top || over.right || over.bottom || over.left ? `inset(${over.top}px ${over.right}px ${over.bottom}px ${over.left}px)` : "none";
-    directionRef.current = next;
-    pop.classList.toggle("top", next === "top");
-    pop.classList.toggle("bottom", next === "bottom");
-    if (first) {
-      void pop.offsetHeight;
-      pop.style.transition = "";
-      placedRef.current = true;
-    }
-  }, [triggerRef, popRef]);
-  React19.useLayoutEffect(() => {
-    if (!enabled) {
-      sizeRef.current = null;
-      scrollParentRef.current = null;
-      placedRef.current = false;
-      return;
-    }
-    if (triggerRef.current) {
-      scrollParentRef.current = findScrollParent(triggerRef.current);
-    }
-    calculatePosition(true);
-    const raf = requestAnimationFrame(() => calculatePosition(true));
-    return () => cancelAnimationFrame(raf);
-  }, [calculatePosition, enabled, triggerRef]);
-  React19.useEffect(() => {
-    if (!enabled || !popRef.current) return;
-    const observer = new ResizeObserver(() => {
-      calculatePosition(true);
-    });
-    observer.observe(popRef.current);
-    return () => observer.disconnect();
-  }, [calculatePosition, enabled, popRef]);
-  React19.useEffect(() => {
-    if (!enabled) return;
-    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", onResize);
-      window.removeEventListener("scroll", onScroll, true);
-    };
-  }, [calculatePosition, enabled]);
-};
-var useAutoPosition_default = useAutoPosition;
-
 // src/tokens/hooks/useClickOutside.ts
 import React20 from "react";
 var useClickOutside = (refs, handler, enabled = true) => {
@@ -8162,7 +8165,7 @@ var Dropdown = (props) => {
   const menuRef = React21.useRef(null);
   useAutoPosition_default(triggerRef, menuRef, mounted);
   useClickOutside_default([triggerRef, menuRef], () => setIsOpen(false), isOpen);
-  useCloseOnContainerScroll(isOpen, menuRef, () => setIsOpen(false));
+  useCloseWhenTriggerHidden(isOpen, triggerRef, () => setIsOpen(false));
   useEscapeKey(isOpen, () => {
     setIsOpen(false);
     triggerRef.current?.focus({ preventScroll: true });
@@ -10093,7 +10096,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);
+  useCloseWhenTriggerHidden(isOpen, triggerRef, onClose);
   useEscapeKey(isOpen, () => {
     onClose();
     triggerRef.current?.focus({ preventScroll: true });
@@ -10373,7 +10376,7 @@ var SelectRoot = (props) => {
   }, []);
   const toggle = React31.useCallback(() => setOpen((prev) => !prev), []);
   useClickOutside_default([contentRef, triggerRef], close, isOpen);
-  useCloseOnContainerScroll(isOpen, contentRef, close);
+  useCloseWhenTriggerHidden(isOpen, triggerRef, close);
   useEscapeKey(isOpen, () => {
     close();
     triggerRef.current?.focus({ preventScroll: true });
@@ -11314,7 +11317,7 @@ var TimePicker = (props) => {
   }, [step, min, max]);
   const close = React40.useCallback(() => setOpen(false), []);
   useClickOutside_default([triggerRef, contentRef], close, isOpen);
-  useCloseOnContainerScroll(isOpen, contentRef, close);
+  useCloseWhenTriggerHidden(isOpen, triggerRef, close);
   useEscapeKey(isOpen, () => {
     close();
     triggerRef.current?.focus({ preventScroll: true });

package/guidelines/MIGRATION.md

@@ -284,44 +284,32 @@ Dropdown · PopOver · TimePicker 가 전부 애니메이션 없이 툭 튀어
 **올리기만 하면 된다. 쓰는 쪽에서 고칠 것은 없다.** `.repositioning` 클래스를
 직접 잡는 CSS 를 쓰고 있었다면 그 규칙만 지우면 된다.
 
-## 0.14.6 → 0.14.7 — 안쪽 상자가 스크롤되면 오버레이가 닫힌다
+## 0.14.7 ~ 0.14.14 — 안쪽 상자가 스크롤되면 닫혔다 (0.14.15 에서 되돌림)
 
-**동작 변경이다.** `Select` · `Dropdown` · `PopOver` · `TimePicker` 를 열어 둔
-채 **페이지가 아닌 안쪽 상자**(`overflow: auto`)를 스크롤하면 닫힌다.
+**이 구간을 쓰고 있었다면** `Select` · `Dropdown` · `PopOver` · `TimePicker`
+를 열어 둔 채 페이지가 아닌 안쪽 상자를 스크롤하면 닫혔다. **0.14.15 부터는
+닫지 않는다** — 따라간다.
 
-닫지 않는 경우:
+0.14.7 에 그 땜질을 넣은 것은 팝업이 스크롤을 **제때 못 따라가고**(JS 로
+옮기느라 한 프레임 늦었다) 그릇 밖으로 나가도 안 잘려 헤더를 덮었기
+때문이다. 어차피 어긋나 보이니 닫는 쪽이 나았다.
 
-- **페이지(문서) 스크롤** — 팝업이 `absolute` + 문서 좌표라 브라우저가 함께
-  옮겨 준다. 지연도 겹침도 없으므로 닫을 이유가 없다.
-- **팝업 자기 목록 스크롤** — 셀렉트 목록은 `max-height` 안에서 스스로
-  스크롤한다. 그걸로 닫히면 고를 수가 없다.
+그 전제가 둘 다 무너졌다:
 
-### 왜
+    0.14.3 ~ 0.14.6   자리를 DOM 에 직접 쓰고 문서 좌표로 바꿔 지연이 사라졌다
+    0.14.9 ~ 0.14.14  그릇 기준으로 자리를 잡고 그릇 밖은 clip-path 로 잘라낸다
 
-팝업은 `body` 밑 포털에 있고 트리거는 상자 안에 있다. 둘을 이어 주는 것이
-브라우저에 없으므로 JS 가 매번 다시 붙여야 하는데, **스크롤은 컴포지터가
-먼저 그리고 `scroll` 이벤트는 그 뒤에 메인 스레드로 온다.** 그래서 JS 로
-옮기는 한 항상 한 프레임 이상 늦는다. 0.12.0 부터 0.14.6 까지 네 번에 걸쳐
-줄여 봤지만(rAF 묶기 → DOM 직접 쓰기 → 문서 좌표 → rAF 제거) 원리가 그대로라
-남았다.
+이제 따라가도 어긋나 보이지 않는다. 그리고 닫는 쪽이 손해다 — 긴 목록에서
+아래를 보려고 바퀴를 조금 굴렸을 뿐인데 고르던 것이 사라진다.
 
-두 번째 증상도 같은 뿌리다. 팝업이 상자 **바깥**에 있어 그 상자에 잘리지
-않으므로, 트리거가 헤더 밑으로 지나가도 팝업만 헤더 위에 남는다. **위치가
-틀린 것이지 순서가 틀린 게 아니라서 `z-index` 로는 못 고친다** — 헤더를
-올리면 이번엔 목록 윗부분이 잘린다.
+### 다만 트리거가 그릇 밖으로 완전히 나가면 닫는다
 
-닫으면 둘 다 없어진다.
+안 닫으면 **패널이 통째로 잘려 안 보이는데 열린 상태**가 된다. 눈에는 닫힌
+것 같은데 키보드 포커스와 `Escape` 는 거기 살아 있다. 판정은
+`IntersectionObserver` 에 맡긴다 — 스크롤마다 재는 것보다 싸고, 그릇이
+스크롤하든 페이지가 스크롤하든 같은 방식으로 걸린다.
 
-> **DS `Layout` 을 쓰면 이 조건에 기본으로 들어간다.**
-> `.lib-xplat-layout` 이 `overflow: hidden` 이고 `.lib-xplat-layout-content`
-> 만 `overflow: auto` 라 페이지가 아예 스크롤되지 않는다.
-
-### 쓰는 쪽에서 할 일
-
-**없다.** 다만 「열어 둔 채 스크롤하며 고르는」 흐름이 있었다면 그것만 막힌다.
-목록이 길어 스크롤이 필요하다면 `Select` 의 `searchable` 로 걸러내는 쪽이 낫다.
-
----
+**쓰는 쪽에서 할 일은 없다.**
 
 ## Next.js App Router 에서 반드시 걸리는 것
 
@@ -395,11 +383,21 @@ export { Button, Input, Select, SideBar /* 쓰는 것만 */ } from "@x-plat/desi
 | 안쪽 상자 스크롤 시 닫힘 (0.14.7) | **사람이 화면에서 확인함** |
 | 팝업 목록 안에서 휠 → 안 닫힘 (0.14.7) | **사람이 화면에서 확인함** |
 | 긴 항목 줄바꿈 (0.14.8) | **사람이 화면에서 확인함** — 두세 줄로 떨어진다 |
+| 자리·간격·여는 동안 (0.14.14) | **프레임 단위로 측정함** — 멈춘 상태 간격 8px, 여는 동안 4→8 로 벌어짐, 포커스 링 여유가 한 프레임도 음수가 아님 |
 | 페이지(문서) 스크롤 시 안 닫힘 (0.14.7) | **확인 안 됨.** 규칙상 맞지만 그 조건의 화면에 고르개가 없어 볼 자리가 없었다 |
 | `Layout` 타입 (0.14.2) | 소비자 흉내 프로젝트로 타입 검사 통과 |
 | `ToggleChip` 커서·초점 테두리 | 마크업·CSS 만 확인. 눌러 본 사람 없음 |
 | Editor | 아래 |
 
+> **재는 범위가 화면과 같은지 먼저 볼 것.** `getBoundingClientRect` 는
+> `outline` 도 `box-shadow` 도 안 친다. 상자만 재면 "겹침 0" 이 나오는데
+> 눈에는 포커스 링이 덮여 보인다 — 0.14.14 가 그 건이다. 상자·링·그림자를
+> 같이 재야 한다.
+>
+> 그리고 포커스 링을 볼 때는 **키보드로 열 것**(`Tab` → `Enter`). 트리거가
+> `div[tabindex]` 라 마우스 클릭에는 `:focus-visible` 이 안 걸린다. 마우스로만
+> 열면 링이 아예 안 떠서 그 항목이 **늘 통과한다.**
+>
 > 확인할 때는 **배포가 앉은 뒤에** 볼 것. 한 번은 "안 닫힌다" 로 나왔다가
 > 다시 보니 닫혔다 — 반쯤 배포된 화면이었다. 그리고 버전 번호가 아니라
 > 받은 파일 안을 열어 확인하는 편이 낫다(0.14.1 은 번호만 올라가고 내용이

package/package.json

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