@x-plat/design-system 0.14.14 → 0.14.16

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,25 @@ var useFocusTrap = (containerRef, enabled, options = {}) => {
     return () => document.removeEventListener("keydown", onKey);
   }, [enabled, trap, containerRef]);
 };
-var useCloseOnContainerScroll = (enabled, popRef, onClose) => {
-  const onCloseRef = React10.useRef(onClose);
+var useCloseWhenFocusHidden = (enabled, triggerRef, popRef, 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) 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/components/Modal/Modal.tsx
@@ -7327,13 +7468,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 +7518,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 +7569,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 +7738,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 +7791,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 +7826,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 +7846,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 +7902,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 +7997,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 +8006,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 +8065,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,142 +8132,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 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 = 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) => {
@@ -8163,7 +8168,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));
+  useCloseWhenFocusHidden(isOpen, triggerRef, menuRef, () => setIsOpen(false));
   useEscapeKey(isOpen, () => {
     setIsOpen(false);
     triggerRef.current?.focus({ preventScroll: true });
@@ -10094,7 +10099,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);
+  useCloseWhenFocusHidden(isOpen, triggerRef, popRef, onClose);
   useEscapeKey(isOpen, () => {
     onClose();
     triggerRef.current?.focus({ preventScroll: true });
@@ -10374,7 +10379,7 @@ var SelectRoot = (props) => {
   }, []);
   const toggle = React31.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 });
@@ -11315,7 +11320,7 @@ var TimePicker = (props) => {
   }, [step, min, max]);
   const close = React40.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 });