@x-plat/design-system 0.14.13 → 0.14.15

package/dist/index.cjs

@@ -7465,7 +7465,7 @@ Chip.displayName = "Chip";
 var Chip_default = Chip;
 
 // src/components/DatePicker/InputDatePicker/index.tsx
-var import_react13 = __toESM(require("react"), 1);
+var import_react14 = __toESM(require("react"), 1);
 
 // src/components/Input/Input.tsx
 var import_react8 = __toESM(require("react"), 1);
@@ -7638,11 +7638,149 @@ PasswordInput.displayName = "PasswordInput";
 var PasswordInput_default = PasswordInput;
 
 // src/components/Modal/Modal.tsx
-var import_react11 = __toESM(require("react"), 1);
+var import_react12 = __toESM(require("react"), 1);
 var import_react_dom = require("react-dom");
 
 // src/tokens/hooks/useOverlayKeyboard.ts
+var import_react11 = __toESM(require("react"), 1);
+
+// src/tokens/hooks/useAutoPosition.ts
 var import_react10 = __toESM(require("react"), 1);
+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 = import_react10.default.useRef("bottom");
+  const sizeRef = import_react10.default.useRef(null);
+  const scrollParentRef = import_react10.default.useRef(null);
+  const placedRef = import_react10.default.useRef(false);
+  const calculatePosition = import_react10.default.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]);
+  import_react10.default.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]);
+  import_react10.default.useEffect(() => {
+    if (!enabled || !popRef.current) return;
+    const observer = new ResizeObserver(() => {
+      calculatePosition(true);
+    });
+    observer.observe(popRef.current);
+    return () => observer.disconnect();
+  }, [calculatePosition, enabled, popRef]);
+  import_react10.default.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])",
@@ -7656,7 +7794,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_react10.default.useEffect(() => {
+  import_react11.default.useEffect(() => {
     if (!enabled) return;
     const onKey = (e) => {
       if (e.key !== "Escape") return;
@@ -7670,8 +7808,8 @@ var useEscapeKey = (enabled, onEscape) => {
 };
 var useFocusTrap = (containerRef, enabled, options = {}) => {
   const { trap = false, initialFocus } = options;
-  const restoreRef = import_react10.default.useRef(null);
-  import_react10.default.useEffect(() => {
+  const restoreRef = import_react11.default.useRef(null);
+  import_react11.default.useEffect(() => {
     if (!enabled) return;
     restoreRef.current = document.activeElement;
     const raf = requestAnimationFrame(() => {
@@ -7689,7 +7827,7 @@ var useFocusTrap = (containerRef, enabled, options = {}) => {
       if (prev && document.contains(prev)) prev.focus({ preventScroll: true });
     };
   }, [enabled, containerRef, initialFocus]);
-  import_react10.default.useEffect(() => {
+  import_react11.default.useEffect(() => {
     if (!enabled || !trap) return;
     const onKey = (e) => {
       if (e.key !== "Tab") return;
@@ -7715,22 +7853,22 @@ var useFocusTrap = (containerRef, enabled, options = {}) => {
     return () => document.removeEventListener("keydown", onKey);
   }, [enabled, trap, containerRef]);
 };
-var useCloseOnContainerScroll = (enabled, popRef, onClose) => {
-  const onCloseRef = import_react10.default.useRef(onClose);
+var useCloseWhenTriggerHidden = (enabled, triggerRef, onClose) => {
+  const onCloseRef = import_react11.default.useRef(onClose);
   onCloseRef.current = onClose;
-  import_react10.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]);
+  import_react11.default.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
@@ -7738,13 +7876,13 @@ var import_jsx_runtime313 = require("react/jsx-runtime");
 var ANIMATION_DURATION_MS = 200;
 var Modal = (props) => {
   const { isOpen, onClose, children } = props;
-  const [mounted, setMounted] = import_react11.default.useState(false);
-  const [visible, setVisible] = import_react11.default.useState(false);
-  const [settled, setSettled] = import_react11.default.useState(false);
-  const boxRef = import_react11.default.useRef(null);
+  const [mounted, setMounted] = import_react12.default.useState(false);
+  const [visible, setVisible] = import_react12.default.useState(false);
+  const [settled, setSettled] = import_react12.default.useState(false);
+  const boxRef = import_react12.default.useRef(null);
   useEscapeKey(isOpen, onClose);
   useFocusTrap(boxRef, isOpen && mounted, { trap: true });
-  import_react11.default.useEffect(() => {
+  import_react12.default.useEffect(() => {
     if (isOpen) {
       setMounted(true);
       const show = setTimeout(() => setVisible(true), 1);
@@ -7788,9 +7926,9 @@ Modal.displayName = "Modal";
 var Modal_default = Modal;
 
 // src/components/DatePicker/SingleDatePicker/index.tsx
-var import_react12 = __toESM(require("react"), 1);
+var import_react13 = __toESM(require("react"), 1);
 var import_jsx_runtime314 = require("react/jsx-runtime");
-var DayCell2 = import_react12.default.memo(
+var DayCell2 = import_react13.default.memo(
   ({
     day,
     disabled,
@@ -7839,33 +7977,33 @@ var SingleDatePicker = (props) => {
     required,
     validations
   } = props;
-  const labelId = import_react12.default.useId();
+  const labelId = import_react13.default.useId();
   const initialYear = value?.getFullYear();
   const initialMonth = value?.getMonth();
   const { year, month, days, goToPrevMonth, goToNextMonth, setYear, setMonth } = useCalendar(
     initialYear,
     initialMonth
   );
-  const [pickerMode, setPickerMode] = import_react12.default.useState("days");
-  const [yearRangeStart, setYearRangeStart] = import_react12.default.useState(
+  const [pickerMode, setPickerMode] = import_react13.default.useState("days");
+  const [yearRangeStart, setYearRangeStart] = import_react13.default.useState(
     Math.floor((initialYear ?? (/* @__PURE__ */ new Date()).getFullYear()) / 12) * 12
   );
-  const minTime = import_react12.default.useMemo(
+  const minTime = import_react13.default.useMemo(
     () => minDate ? new Date(minDate.getFullYear(), minDate.getMonth(), minDate.getDate()).getTime() : -Infinity,
     [minDate]
   );
-  const maxTime = import_react12.default.useMemo(
+  const maxTime = import_react13.default.useMemo(
     () => maxDate ? new Date(maxDate.getFullYear(), maxDate.getMonth(), maxDate.getDate()).getTime() : Infinity,
     [maxDate]
   );
-  const highlightSet = import_react12.default.useMemo(() => {
+  const highlightSet = import_react13.default.useMemo(() => {
     const set = /* @__PURE__ */ new Set();
     for (const h of highlightDates) {
       set.add(`${h.getFullYear()}-${h.getMonth()}-${h.getDate()}`);
     }
     return set;
   }, [highlightDates]);
-  const handleSelect = import_react12.default.useCallback(
+  const handleSelect = import_react13.default.useCallback(
     (date) => {
       onChange?.(date);
     },
@@ -8008,8 +8146,8 @@ var InputDatePicker = (props) => {
     required,
     validations
   } = props;
-  const [isOpen, setIsOpen] = import_react13.default.useState(false);
-  const [tempDate, setTempDate] = import_react13.default.useState(value ?? /* @__PURE__ */ new Date());
+  const [isOpen, setIsOpen] = import_react14.default.useState(false);
+  const [tempDate, setTempDate] = import_react14.default.useState(value ?? /* @__PURE__ */ new Date());
   const handleOpen = () => {
     if (disabled) return;
     setTempDate(value ?? /* @__PURE__ */ new Date());
@@ -8061,18 +8199,18 @@ InputDatePicker.displayName = "InputDatePicker";
 var InputDatePicker_default = InputDatePicker;
 
 // src/components/DatePicker/PopupPicker/index.tsx
-var import_react17 = __toESM(require("react"), 1);
+var import_react18 = __toESM(require("react"), 1);
 
 // src/components/DatePicker/RangePicker/index.tsx
-var import_react16 = __toESM(require("react"), 1);
+var import_react17 = __toESM(require("react"), 1);
 
 // src/components/Tab/Tab.tsx
-var import_react15 = __toESM(require("react"), 1);
+var import_react16 = __toESM(require("react"), 1);
 
 // src/components/Tab/TabItem.tsx
-var import_react14 = __toESM(require("react"), 1);
+var import_react15 = __toESM(require("react"), 1);
 var import_jsx_runtime316 = require("react/jsx-runtime");
-var TabItem = import_react14.default.forwardRef((props, ref) => {
+var TabItem = import_react15.default.forwardRef((props, ref) => {
   const { isActive: isActive2, title, onClick } = props;
   return /* @__PURE__ */ (0, import_jsx_runtime316.jsx)(
     "button",
@@ -8096,11 +8234,11 @@ var import_jsx_runtime317 = require("react/jsx-runtime");
 var Tab = (props) => {
   const { activeIndex, onChange, tabs, variant, type, size = "md" } = props;
   const shape = variant ?? type ?? "default";
-  const [underlineStyle, setUnderlineStyle] = import_react15.default.useState({
+  const [underlineStyle, setUnderlineStyle] = import_react16.default.useState({
     left: 0,
     width: 0
   });
-  const itemRefs = import_react15.default.useRef([]);
+  const itemRefs = import_react16.default.useRef([]);
   const handleKeyDown = (e) => {
     const last = tabs.length - 1;
     let next = null;
@@ -8116,7 +8254,7 @@ var Tab = (props) => {
   const handleChangeActiveTab = (tabItem, tabIdx) => {
     onChange(tabItem, tabIdx);
   };
-  import_react15.default.useEffect(() => {
+  import_react16.default.useEffect(() => {
     const el = itemRefs.current[activeIndex];
     if (el) {
       setUnderlineStyle({ left: el.offsetLeft, width: el.offsetWidth });
@@ -8172,8 +8310,8 @@ var RangePicker = (props) => {
     required,
     validations
   } = props;
-  const labelId = import_react16.default.useId();
-  const [activeTab, setActiveTab] = import_react16.default.useState("start");
+  const labelId = import_react17.default.useId();
+  const [activeTab, setActiveTab] = import_react17.default.useState("start");
   const handleStartChange = (date) => {
     if (!date) return;
     const newStart = date > endDate ? endDate : date;
@@ -8267,7 +8405,7 @@ var RangePicker_default = RangePicker;
 var import_jsx_runtime319 = require("react/jsx-runtime");
 var PopupPicker = (props) => {
   const { component, type, locale } = props;
-  const [isOpen, setIsOpen] = import_react17.default.useState(false);
+  const [isOpen, setIsOpen] = import_react18.default.useState(false);
   const handleClick = () => setIsOpen(true);
   const handleClose = () => setIsOpen(false);
   const handleSingleChange = (date) => {
@@ -8276,7 +8414,7 @@ var PopupPicker = (props) => {
     handleClose();
   };
   return /* @__PURE__ */ (0, import_jsx_runtime319.jsxs)("div", { className: "lib-xplat-popup-datepicker", children: [
-    import_react17.default.cloneElement(component, { onClick: handleClick }),
+    import_react18.default.cloneElement(component, { onClick: handleClick }),
     /* @__PURE__ */ (0, import_jsx_runtime319.jsx)(Modal_default, { isOpen, onClose: handleClose, children: /* @__PURE__ */ (0, import_jsx_runtime319.jsxs)("div", { className: clsx_default("lib-xplat-popup-datepicker-card", type === "range" && "range-mode"), children: [
       /* @__PURE__ */ (0, import_jsx_runtime319.jsxs)("div", { className: "popup-datepicker-content", children: [
         type === "single" && /* @__PURE__ */ (0, import_jsx_runtime319.jsx)(
@@ -8335,18 +8473,18 @@ Divider.displayName = "Divider";
 var Divider_default = Divider;
 
 // src/components/Drawer/Drawer.tsx
-var import_react18 = __toESM(require("react"), 1);
+var import_react19 = __toESM(require("react"), 1);
 var import_react_dom2 = require("react-dom");
 var import_jsx_runtime321 = require("react/jsx-runtime");
 var ANIMATION_DURATION_MS2 = 250;
 var Drawer = (props) => {
   const { isOpen, onClose, placement = "right", size = "md", title, children } = props;
-  const [mounted, setMounted] = import_react18.default.useState(false);
-  const [visible, setVisible] = import_react18.default.useState(false);
-  const panelRef = import_react18.default.useRef(null);
+  const [mounted, setMounted] = import_react19.default.useState(false);
+  const [visible, setVisible] = import_react19.default.useState(false);
+  const panelRef = import_react19.default.useRef(null);
   useEscapeKey(isOpen, onClose);
   useFocusTrap(panelRef, isOpen && mounted, { trap: true });
-  import_react18.default.useEffect(() => {
+  import_react19.default.useEffect(() => {
     if (isOpen) {
       setMounted(true);
       const t2 = setTimeout(() => setVisible(true), 1);
@@ -8402,141 +8540,6 @@ var Portal = ({ children }) => {
 Portal.displayName = "Portal";
 var Portal_default = Portal;
 
-// src/tokens/hooks/useAutoPosition.ts
-var import_react19 = __toESM(require("react"), 1);
-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 = import_react19.default.useRef("bottom");
-  const sizeRef = import_react19.default.useRef(null);
-  const scrollParentRef = import_react19.default.useRef(null);
-  const placedRef = import_react19.default.useRef(false);
-  const calculatePosition = import_react19.default.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]);
-  import_react19.default.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]);
-  import_react19.default.useEffect(() => {
-    if (!enabled || !popRef.current) return;
-    const observer = new ResizeObserver(() => {
-      calculatePosition(true);
-    });
-    observer.observe(popRef.current);
-    return () => observer.disconnect();
-  }, [calculatePosition, enabled, popRef]);
-  import_react19.default.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
 var import_react20 = __toESM(require("react"), 1);
 var useClickOutside = (refs, handler, enabled = true) => {
@@ -8573,7 +8576,7 @@ var Dropdown = (props) => {
   const menuRef = import_react21.default.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 });
@@ -10504,7 +10507,7 @@ var PopOver = (props) => {
   const [localOpen, setLocalOpen] = import_react27.default.useState(false);
   const [eventTrigger, setEventTrigger] = import_react27.default.useState(false);
   useClickOutside_default([popRef, triggerRef], onClose, isOpen);
-  useCloseOnContainerScroll(isOpen, popRef, onClose);
+  useCloseWhenTriggerHidden(isOpen, triggerRef, onClose);
   useEscapeKey(isOpen, () => {
     onClose();
     triggerRef.current?.focus({ preventScroll: true });
@@ -10784,7 +10787,7 @@ var SelectRoot = (props) => {
   }, []);
   const toggle = import_react31.default.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 });
@@ -11725,7 +11728,7 @@ var TimePicker = (props) => {
   }, [step, min, max]);
   const close = import_react40.default.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/dist/index.css

@@ -3282,11 +3282,11 @@
   box-shadow: var(--semantic-shadow-md);
   padding: var(--spacing-space-1) 0;
   opacity: 0;
-  transform: translateY(-4px);
+  transform: translateY(4px);
   transition: opacity 0.15s ease, transform 0.15s ease;
 }
 .lib-xplat-dropdown-menu.bottom {
-  transform: translateY(4px);
+  transform: translateY(-4px);
 }
 .lib-xplat-dropdown-menu.visible {
   opacity: 1;
@@ -4513,7 +4513,7 @@
   transition: transform 0.2s ease, opacity 0.2s ease;
 }
 .lib-xplat-select-content.bottom {
-  transform: translateY(8px);
+  transform: translateY(-4px);
 }
 .lib-xplat-select-content.bottom.visible {
   opacity: 1;
@@ -4521,12 +4521,12 @@
 }
 .lib-xplat-select-content.bottom.exit {
   opacity: 0;
-  transform: translateY(8px);
+  transform: translateY(-4px);
 }
 .lib-xplat-select-content {
 }
 .lib-xplat-select-content.top {
-  transform: translateY(-8px);
+  transform: translateY(4px);
 }
 .lib-xplat-select-content.top.visible {
   opacity: 1;
@@ -4534,7 +4534,7 @@
 }
 .lib-xplat-select-content.top.exit {
   opacity: 0;
-  transform: translateY(-8px);
+  transform: translateY(4px);
 }
 .lib-xplat-select-content.sm .select-item {
   padding: var(--spacing-space-2) var(--spacing-space-2);