@x-plat/design-system 0.14.14 → 0.14.16

package/dist/components/Dropdown/index.cjs

@@ -230,22 +230,25 @@ var useEscapeKey = (enabled, onEscape) => {
     return () => document.removeEventListener("keydown", onKey);
   }, [enabled, onEscape]);
 };
-var useCloseOnContainerScroll = (enabled, popRef, onClose) => {
+var useCloseWhenFocusHidden = (enabled, triggerRef, popRef, onClose) => {
   const onCloseRef = import_react3.default.useRef(onClose);
   onCloseRef.current = onClose;
   import_react3.default.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]);
+    const trigger = triggerRef.current;
+    if (!enabled || !trigger) return;
+    const observer = new IntersectionObserver(
+      ([entry]) => {
+        if (entry.isIntersecting) return;
+        if (!popRef.current?.contains(document.activeElement)) return;
+        onCloseRef.current();
+        trigger.focus({ preventScroll: true });
+      },
+      // 그릇이 없으면 root: null → 뷰포트 기준
+      { root: findScrollParent(trigger), threshold: 0 }
+    );
+    observer.observe(trigger);
+    return () => observer.disconnect();
+  }, [enabled, triggerRef, popRef]);
 };
 
 // ../../node_modules/clsx/dist/clsx.mjs
@@ -275,7 +278,7 @@ var Dropdown = (props) => {
   const menuRef = import_react4.default.useRef(null);
   useAutoPosition_default(triggerRef, menuRef, mounted);
   useClickOutside_default([triggerRef, menuRef], () => setIsOpen(false), isOpen);
-  useCloseOnContainerScroll(isOpen, menuRef, () => setIsOpen(false));
+  useCloseWhenFocusHidden(isOpen, triggerRef, menuRef, () => setIsOpen(false));
   useEscapeKey(isOpen, () => {
     setIsOpen(false);
     triggerRef.current?.focus({ preventScroll: true });

package/dist/components/Dropdown/index.js

@@ -194,22 +194,25 @@ var useEscapeKey = (enabled, onEscape) => {
     return () => document.removeEventListener("keydown", onKey);
   }, [enabled, onEscape]);
 };
-var useCloseOnContainerScroll = (enabled, popRef, onClose) => {
+var useCloseWhenFocusHidden = (enabled, triggerRef, popRef, onClose) => {
   const onCloseRef = React3.useRef(onClose);
   onCloseRef.current = onClose;
   React3.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]);
+    const trigger = triggerRef.current;
+    if (!enabled || !trigger) return;
+    const observer = new IntersectionObserver(
+      ([entry]) => {
+        if (entry.isIntersecting) return;
+        if (!popRef.current?.contains(document.activeElement)) return;
+        onCloseRef.current();
+        trigger.focus({ preventScroll: true });
+      },
+      // 그릇이 없으면 root: null → 뷰포트 기준
+      { root: findScrollParent(trigger), threshold: 0 }
+    );
+    observer.observe(trigger);
+    return () => observer.disconnect();
+  }, [enabled, triggerRef, popRef]);
 };
 
 // ../../node_modules/clsx/dist/clsx.mjs
@@ -239,7 +242,7 @@ var Dropdown = (props) => {
   const menuRef = React4.useRef(null);
   useAutoPosition_default(triggerRef, menuRef, mounted);
   useClickOutside_default([triggerRef, menuRef], () => setIsOpen(false), isOpen);
-  useCloseOnContainerScroll(isOpen, menuRef, () => setIsOpen(false));
+  useCloseWhenFocusHidden(isOpen, triggerRef, menuRef, () => setIsOpen(false));
   useEscapeKey(isOpen, () => {
     setIsOpen(false);
     triggerRef.current?.focus({ preventScroll: true });

package/dist/components/Modal/index.cjs

@@ -35,11 +35,16 @@ __export(Modal_exports, {
 module.exports = __toCommonJS(Modal_exports);
 
 // src/components/Modal/Modal.tsx
-var import_react2 = __toESM(require("react"), 1);
+var import_react3 = __toESM(require("react"), 1);
 var import_react_dom = require("react-dom");
 
 // src/tokens/hooks/useOverlayKeyboard.ts
+var import_react2 = __toESM(require("react"), 1);
+
+// src/tokens/hooks/useAutoPosition.ts
 var import_react = __toESM(require("react"), 1);
+
+// src/tokens/hooks/useOverlayKeyboard.ts
 var FOCUSABLE = [
   "a[href]",
   "button:not([disabled])",
@@ -53,7 +58,7 @@ var focusableIn = (el) => Array.from(el.querySelectorAll(FOCUSABLE)).filter(
   (n) => n.offsetWidth > 0 || n.offsetHeight > 0 || n === document.activeElement
 );
 var useEscapeKey = (enabled, onEscape) => {
-  import_react.default.useEffect(() => {
+  import_react2.default.useEffect(() => {
     if (!enabled) return;
     const onKey = (e) => {
       if (e.key !== "Escape") return;
@@ -67,8 +72,8 @@ var useEscapeKey = (enabled, onEscape) => {
 };
 var useFocusTrap = (containerRef, enabled, options = {}) => {
   const { trap = false, initialFocus } = options;
-  const restoreRef = import_react.default.useRef(null);
-  import_react.default.useEffect(() => {
+  const restoreRef = import_react2.default.useRef(null);
+  import_react2.default.useEffect(() => {
     if (!enabled) return;
     restoreRef.current = document.activeElement;
     const raf = requestAnimationFrame(() => {
@@ -86,7 +91,7 @@ var useFocusTrap = (containerRef, enabled, options = {}) => {
       if (prev && document.contains(prev)) prev.focus({ preventScroll: true });
     };
   }, [enabled, containerRef, initialFocus]);
-  import_react.default.useEffect(() => {
+  import_react2.default.useEffect(() => {
     if (!enabled || !trap) return;
     const onKey = (e) => {
       if (e.key !== "Tab") return;
@@ -134,13 +139,13 @@ var import_jsx_runtime = require("react/jsx-runtime");
 var ANIMATION_DURATION_MS = 200;
 var Modal = (props) => {
   const { isOpen, onClose, children } = props;
-  const [mounted, setMounted] = import_react2.default.useState(false);
-  const [visible, setVisible] = import_react2.default.useState(false);
-  const [settled, setSettled] = import_react2.default.useState(false);
-  const boxRef = import_react2.default.useRef(null);
+  const [mounted, setMounted] = import_react3.default.useState(false);
+  const [visible, setVisible] = import_react3.default.useState(false);
+  const [settled, setSettled] = import_react3.default.useState(false);
+  const boxRef = import_react3.default.useRef(null);
   useEscapeKey(isOpen, onClose);
   useFocusTrap(boxRef, isOpen && mounted, { trap: true });
-  import_react2.default.useEffect(() => {
+  import_react3.default.useEffect(() => {
     if (isOpen) {
       setMounted(true);
       const show = setTimeout(() => setVisible(true), 1);

package/dist/components/Modal/index.js

@@ -1,9 +1,14 @@
 // src/components/Modal/Modal.tsx
-import React2 from "react";
+import React3 from "react";
 import { createPortal } from "react-dom";
 
 // src/tokens/hooks/useOverlayKeyboard.ts
+import React2 from "react";
+
+// src/tokens/hooks/useAutoPosition.ts
 import React from "react";
+
+// src/tokens/hooks/useOverlayKeyboard.ts
 var FOCUSABLE = [
   "a[href]",
   "button:not([disabled])",
@@ -17,7 +22,7 @@ var focusableIn = (el) => Array.from(el.querySelectorAll(FOCUSABLE)).filter(
   (n) => n.offsetWidth > 0 || n.offsetHeight > 0 || n === document.activeElement
 );
 var useEscapeKey = (enabled, onEscape) => {
-  React.useEffect(() => {
+  React2.useEffect(() => {
     if (!enabled) return;
     const onKey = (e) => {
       if (e.key !== "Escape") return;
@@ -31,8 +36,8 @@ var useEscapeKey = (enabled, onEscape) => {
 };
 var useFocusTrap = (containerRef, enabled, options = {}) => {
   const { trap = false, initialFocus } = options;
-  const restoreRef = React.useRef(null);
-  React.useEffect(() => {
+  const restoreRef = React2.useRef(null);
+  React2.useEffect(() => {
     if (!enabled) return;
     restoreRef.current = document.activeElement;
     const raf = requestAnimationFrame(() => {
@@ -50,7 +55,7 @@ var useFocusTrap = (containerRef, enabled, options = {}) => {
       if (prev && document.contains(prev)) prev.focus({ preventScroll: true });
     };
   }, [enabled, containerRef, initialFocus]);
-  React.useEffect(() => {
+  React2.useEffect(() => {
     if (!enabled || !trap) return;
     const onKey = (e) => {
       if (e.key !== "Tab") return;
@@ -98,13 +103,13 @@ import { jsx } from "react/jsx-runtime";
 var ANIMATION_DURATION_MS = 200;
 var Modal = (props) => {
   const { isOpen, onClose, children } = props;
-  const [mounted, setMounted] = React2.useState(false);
-  const [visible, setVisible] = React2.useState(false);
-  const [settled, setSettled] = React2.useState(false);
-  const boxRef = React2.useRef(null);
+  const [mounted, setMounted] = React3.useState(false);
+  const [visible, setVisible] = React3.useState(false);
+  const [settled, setSettled] = React3.useState(false);
+  const boxRef = React3.useRef(null);
   useEscapeKey(isOpen, onClose);
   useFocusTrap(boxRef, isOpen && mounted, { trap: true });
-  React2.useEffect(() => {
+  React3.useEffect(() => {
     if (isOpen) {
       setMounted(true);
       const show = setTimeout(() => setVisible(true), 1);

package/dist/components/PopOver/index.cjs

@@ -230,22 +230,25 @@ var useEscapeKey = (enabled, onEscape) => {
     return () => document.removeEventListener("keydown", onKey);
   }, [enabled, onEscape]);
 };
-var useCloseOnContainerScroll = (enabled, popRef, onClose) => {
+var useCloseWhenFocusHidden = (enabled, triggerRef, popRef, onClose) => {
   const onCloseRef = import_react3.default.useRef(onClose);
   onCloseRef.current = onClose;
   import_react3.default.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]);
+    const trigger = triggerRef.current;
+    if (!enabled || !trigger) return;
+    const observer = new IntersectionObserver(
+      ([entry]) => {
+        if (entry.isIntersecting) return;
+        if (!popRef.current?.contains(document.activeElement)) return;
+        onCloseRef.current();
+        trigger.focus({ preventScroll: true });
+      },
+      // 그릇이 없으면 root: null → 뷰포트 기준
+      { root: findScrollParent(trigger), threshold: 0 }
+    );
+    observer.observe(trigger);
+    return () => observer.disconnect();
+  }, [enabled, triggerRef, popRef]);
 };
 
 // ../../node_modules/clsx/dist/clsx.mjs
@@ -273,7 +276,7 @@ var PopOver = (props) => {
   const [localOpen, setLocalOpen] = import_react4.default.useState(false);
   const [eventTrigger, setEventTrigger] = import_react4.default.useState(false);
   useClickOutside_default([popRef, triggerRef], onClose, isOpen);
-  useCloseOnContainerScroll(isOpen, popRef, onClose);
+  useCloseWhenFocusHidden(isOpen, triggerRef, popRef, onClose);
   useEscapeKey(isOpen, () => {
     onClose();
     triggerRef.current?.focus({ preventScroll: true });

package/dist/components/PopOver/index.js

@@ -194,22 +194,25 @@ var useEscapeKey = (enabled, onEscape) => {
     return () => document.removeEventListener("keydown", onKey);
   }, [enabled, onEscape]);
 };
-var useCloseOnContainerScroll = (enabled, popRef, onClose) => {
+var useCloseWhenFocusHidden = (enabled, triggerRef, popRef, onClose) => {
   const onCloseRef = React3.useRef(onClose);
   onCloseRef.current = onClose;
   React3.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]);
+    const trigger = triggerRef.current;
+    if (!enabled || !trigger) return;
+    const observer = new IntersectionObserver(
+      ([entry]) => {
+        if (entry.isIntersecting) return;
+        if (!popRef.current?.contains(document.activeElement)) return;
+        onCloseRef.current();
+        trigger.focus({ preventScroll: true });
+      },
+      // 그릇이 없으면 root: null → 뷰포트 기준
+      { root: findScrollParent(trigger), threshold: 0 }
+    );
+    observer.observe(trigger);
+    return () => observer.disconnect();
+  }, [enabled, triggerRef, popRef]);
 };
 
 // ../../node_modules/clsx/dist/clsx.mjs
@@ -237,7 +240,7 @@ var PopOver = (props) => {
   const [localOpen, setLocalOpen] = React4.useState(false);
   const [eventTrigger, setEventTrigger] = React4.useState(false);
   useClickOutside_default([popRef, triggerRef], onClose, isOpen);
-  useCloseOnContainerScroll(isOpen, popRef, onClose);
+  useCloseWhenFocusHidden(isOpen, triggerRef, popRef, onClose);
   useEscapeKey(isOpen, () => {
     onClose();
     triggerRef.current?.focus({ preventScroll: true });

package/dist/components/Select/index.cjs

@@ -231,22 +231,25 @@ var useEscapeKey = (enabled, onEscape) => {
     return () => document.removeEventListener("keydown", onKey);
   }, [enabled, onEscape]);
 };
-var useCloseOnContainerScroll = (enabled, popRef, onClose) => {
+var useCloseWhenFocusHidden = (enabled, triggerRef, popRef, onClose) => {
   const onCloseRef = import_react3.default.useRef(onClose);
   onCloseRef.current = onClose;
   import_react3.default.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]);
+    const trigger = triggerRef.current;
+    if (!enabled || !trigger) return;
+    const observer = new IntersectionObserver(
+      ([entry]) => {
+        if (entry.isIntersecting) return;
+        if (!popRef.current?.contains(document.activeElement)) return;
+        onCloseRef.current();
+        trigger.focus({ preventScroll: true });
+      },
+      // 그릇이 없으면 root: null → 뷰포트 기준
+      { root: findScrollParent(trigger), threshold: 0 }
+    );
+    observer.observe(trigger);
+    return () => observer.disconnect();
+  }, [enabled, triggerRef, popRef]);
 };
 
 // src/tokens/svg/action/CopyIcon.tsx
@@ -1404,7 +1407,7 @@ var SelectRoot = (props) => {
   }, []);
   const toggle = import_react6.default.useCallback(() => setOpen((prev) => !prev), []);
   useClickOutside_default([contentRef, triggerRef], close, isOpen);
-  useCloseOnContainerScroll(isOpen, contentRef, close);
+  useCloseWhenFocusHidden(isOpen, triggerRef, contentRef, close);
   useEscapeKey(isOpen, () => {
     close();
     triggerRef.current?.focus({ preventScroll: true });

package/dist/components/Select/index.js

@@ -194,22 +194,25 @@ var useEscapeKey = (enabled, onEscape) => {
     return () => document.removeEventListener("keydown", onKey);
   }, [enabled, onEscape]);
 };
-var useCloseOnContainerScroll = (enabled, popRef, onClose) => {
+var useCloseWhenFocusHidden = (enabled, triggerRef, popRef, onClose) => {
   const onCloseRef = React3.useRef(onClose);
   onCloseRef.current = onClose;
   React3.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]);
+    const trigger = triggerRef.current;
+    if (!enabled || !trigger) return;
+    const observer = new IntersectionObserver(
+      ([entry]) => {
+        if (entry.isIntersecting) return;
+        if (!popRef.current?.contains(document.activeElement)) return;
+        onCloseRef.current();
+        trigger.focus({ preventScroll: true });
+      },
+      // 그릇이 없으면 root: null → 뷰포트 기준
+      { root: findScrollParent(trigger), threshold: 0 }
+    );
+    observer.observe(trigger);
+    return () => observer.disconnect();
+  }, [enabled, triggerRef, popRef]);
 };
 
 // src/tokens/svg/action/CopyIcon.tsx
@@ -1367,7 +1370,7 @@ var SelectRoot = (props) => {
   }, []);
   const toggle = React6.useCallback(() => setOpen((prev) => !prev), []);
   useClickOutside_default([contentRef, triggerRef], close, isOpen);
-  useCloseOnContainerScroll(isOpen, contentRef, close);
+  useCloseWhenFocusHidden(isOpen, triggerRef, contentRef, close);
   useEscapeKey(isOpen, () => {
     close();
     triggerRef.current?.focus({ preventScroll: true });

package/dist/components/TimePicker/index.cjs

@@ -230,22 +230,25 @@ var useEscapeKey = (enabled, onEscape) => {
     return () => document.removeEventListener("keydown", onKey);
   }, [enabled, onEscape]);
 };
-var useCloseOnContainerScroll = (enabled, popRef, onClose) => {
+var useCloseWhenFocusHidden = (enabled, triggerRef, popRef, onClose) => {
   const onCloseRef = import_react3.default.useRef(onClose);
   onCloseRef.current = onClose;
   import_react3.default.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]);
+    const trigger = triggerRef.current;
+    if (!enabled || !trigger) return;
+    const observer = new IntersectionObserver(
+      ([entry]) => {
+        if (entry.isIntersecting) return;
+        if (!popRef.current?.contains(document.activeElement)) return;
+        onCloseRef.current();
+        trigger.focus({ preventScroll: true });
+      },
+      // 그릇이 없으면 root: null → 뷰포트 기준
+      { root: findScrollParent(trigger), threshold: 0 }
+    );
+    observer.observe(trigger);
+    return () => observer.disconnect();
+  }, [enabled, triggerRef, popRef]);
 };
 
 // ../../node_modules/clsx/dist/clsx.mjs
@@ -456,7 +459,7 @@ var TimePicker = (props) => {
   }, [step, min, max]);
   const close = import_react4.default.useCallback(() => setOpen(false), []);
   useClickOutside_default([triggerRef, contentRef], close, isOpen);
-  useCloseOnContainerScroll(isOpen, contentRef, close);
+  useCloseWhenFocusHidden(isOpen, triggerRef, contentRef, close);
   useEscapeKey(isOpen, () => {
     close();
     triggerRef.current?.focus({ preventScroll: true });

package/dist/components/TimePicker/index.js

@@ -194,22 +194,25 @@ var useEscapeKey = (enabled, onEscape) => {
     return () => document.removeEventListener("keydown", onKey);
   }, [enabled, onEscape]);
 };
-var useCloseOnContainerScroll = (enabled, popRef, onClose) => {
+var useCloseWhenFocusHidden = (enabled, triggerRef, popRef, onClose) => {
   const onCloseRef = React3.useRef(onClose);
   onCloseRef.current = onClose;
   React3.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]);
+    const trigger = triggerRef.current;
+    if (!enabled || !trigger) return;
+    const observer = new IntersectionObserver(
+      ([entry]) => {
+        if (entry.isIntersecting) return;
+        if (!popRef.current?.contains(document.activeElement)) return;
+        onCloseRef.current();
+        trigger.focus({ preventScroll: true });
+      },
+      // 그릇이 없으면 root: null → 뷰포트 기준
+      { root: findScrollParent(trigger), threshold: 0 }
+    );
+    observer.observe(trigger);
+    return () => observer.disconnect();
+  }, [enabled, triggerRef, popRef]);
 };
 
 // ../../node_modules/clsx/dist/clsx.mjs
@@ -420,7 +423,7 @@ var TimePicker = (props) => {
   }, [step, min, max]);
   const close = React4.useCallback(() => setOpen(false), []);
   useClickOutside_default([triggerRef, contentRef], close, isOpen);
-  useCloseOnContainerScroll(isOpen, contentRef, close);
+  useCloseWhenFocusHidden(isOpen, triggerRef, contentRef, close);
   useEscapeKey(isOpen, () => {
     close();
     triggerRef.current?.focus({ preventScroll: true });