@x-plat/design-system 0.14.6 → 0.14.8

package/dist/components/TimePicker/index.cjs

@@ -51,15 +51,21 @@ var import_react = __toESM(require("react"), 1);
 var useAutoPosition = (triggerRef, popRef, enabled = true) => {
   const [direction, setDirection] = import_react.default.useState("bottom");
   const directionRef = import_react.default.useRef("bottom");
-  const calculatePosition = import_react.default.useCallback(() => {
+  const sizeRef = import_react.default.useRef(null);
+  const calculatePosition = import_react.default.useCallback((remeasure = false) => {
     const pop = popRef.current;
     if (!triggerRef.current || !pop) return;
+    if (remeasure || !sizeRef.current) {
+      sizeRef.current = { w: pop.offsetWidth, h: pop.offsetHeight };
+    }
+    const { w: popW, h: popH } = sizeRef.current;
     const triggerRect = triggerRef.current.getBoundingClientRect();
-    const popW = pop.offsetWidth;
-    const popH = pop.offsetHeight;
     const viewportHeight = window.innerHeight;
     const viewportWidth = window.innerWidth;
-    if (popH === 0 || popW === 0) return;
+    if (popH === 0 || popW === 0) {
+      sizeRef.current = null;
+      return;
+    }
     let next = "bottom";
     let top;
     let left;
@@ -82,27 +88,31 @@ var useAutoPosition = (triggerRef, popRef, enabled = true) => {
     }
   }, [triggerRef, popRef]);
   import_react.default.useLayoutEffect(() => {
-    if (!enabled) return;
-    calculatePosition();
-    const raf = requestAnimationFrame(calculatePosition);
+    if (!enabled) {
+      sizeRef.current = null;
+      return;
+    }
+    calculatePosition(true);
+    const raf = requestAnimationFrame(() => calculatePosition(true));
     return () => cancelAnimationFrame(raf);
   }, [calculatePosition, enabled]);
   import_react.default.useEffect(() => {
     if (!enabled || !popRef.current) return;
     const observer = new ResizeObserver(() => {
-      calculatePosition();
+      calculatePosition(true);
     });
     observer.observe(popRef.current);
     return () => observer.disconnect();
   }, [calculatePosition, enabled, popRef]);
   import_react.default.useEffect(() => {
     if (!enabled) return;
-    const onScrollOrResize = () => calculatePosition();
-    window.addEventListener("resize", onScrollOrResize, { passive: true });
-    window.addEventListener("scroll", onScrollOrResize, { passive: true, capture: true });
+    const onScroll = () => calculatePosition();
+    const onResize = () => calculatePosition(true);
+    window.addEventListener("resize", onResize, { passive: true });
+    window.addEventListener("scroll", onScroll, { passive: true, capture: true });
     return () => {
-      window.removeEventListener("resize", onScrollOrResize);
-      window.removeEventListener("scroll", onScrollOrResize, true);
+      window.removeEventListener("resize", onResize);
+      window.removeEventListener("scroll", onScroll, true);
     };
   }, [calculatePosition, enabled]);
   return { direction };
@@ -157,6 +167,23 @@ var useEscapeKey = (enabled, onEscape) => {
     return () => document.removeEventListener("keydown", onKey);
   }, [enabled, onEscape]);
 };
+var useCloseOnContainerScroll = (enabled, 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]);
+};
 
 // ../../node_modules/clsx/dist/clsx.mjs
 function r(e) {
@@ -366,6 +393,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);
   useEscapeKey(isOpen, () => {
     close();
     triggerRef.current?.focus({ preventScroll: true });

package/dist/components/TimePicker/index.css

@@ -137,6 +137,7 @@
 }
 .lib-xplat-time-picker-content .time-picker-item {
   padding: var(--spacing-space-2) var(--spacing-space-3);
+  overflow-wrap: anywhere;
   cursor: pointer;
   outline: none;
   color: var(--semantic-text-primary);

package/dist/components/TimePicker/index.js

@@ -15,15 +15,21 @@ import React from "react";
 var useAutoPosition = (triggerRef, popRef, enabled = true) => {
   const [direction, setDirection] = React.useState("bottom");
   const directionRef = React.useRef("bottom");
-  const calculatePosition = React.useCallback(() => {
+  const sizeRef = React.useRef(null);
+  const calculatePosition = React.useCallback((remeasure = false) => {
     const pop = popRef.current;
     if (!triggerRef.current || !pop) return;
+    if (remeasure || !sizeRef.current) {
+      sizeRef.current = { w: pop.offsetWidth, h: pop.offsetHeight };
+    }
+    const { w: popW, h: popH } = sizeRef.current;
     const triggerRect = triggerRef.current.getBoundingClientRect();
-    const popW = pop.offsetWidth;
-    const popH = pop.offsetHeight;
     const viewportHeight = window.innerHeight;
     const viewportWidth = window.innerWidth;
-    if (popH === 0 || popW === 0) return;
+    if (popH === 0 || popW === 0) {
+      sizeRef.current = null;
+      return;
+    }
     let next = "bottom";
     let top;
     let left;
@@ -46,27 +52,31 @@ var useAutoPosition = (triggerRef, popRef, enabled = true) => {
     }
   }, [triggerRef, popRef]);
   React.useLayoutEffect(() => {
-    if (!enabled) return;
-    calculatePosition();
-    const raf = requestAnimationFrame(calculatePosition);
+    if (!enabled) {
+      sizeRef.current = null;
+      return;
+    }
+    calculatePosition(true);
+    const raf = requestAnimationFrame(() => calculatePosition(true));
     return () => cancelAnimationFrame(raf);
   }, [calculatePosition, enabled]);
   React.useEffect(() => {
     if (!enabled || !popRef.current) return;
     const observer = new ResizeObserver(() => {
-      calculatePosition();
+      calculatePosition(true);
     });
     observer.observe(popRef.current);
     return () => observer.disconnect();
   }, [calculatePosition, enabled, popRef]);
   React.useEffect(() => {
     if (!enabled) return;
-    const onScrollOrResize = () => calculatePosition();
-    window.addEventListener("resize", onScrollOrResize, { passive: true });
-    window.addEventListener("scroll", onScrollOrResize, { passive: true, capture: true });
+    const onScroll = () => calculatePosition();
+    const onResize = () => calculatePosition(true);
+    window.addEventListener("resize", onResize, { passive: true });
+    window.addEventListener("scroll", onScroll, { passive: true, capture: true });
     return () => {
-      window.removeEventListener("resize", onScrollOrResize);
-      window.removeEventListener("scroll", onScrollOrResize, true);
+      window.removeEventListener("resize", onResize);
+      window.removeEventListener("scroll", onScroll, true);
     };
   }, [calculatePosition, enabled]);
   return { direction };
@@ -121,6 +131,23 @@ var useEscapeKey = (enabled, onEscape) => {
     return () => document.removeEventListener("keydown", onKey);
   }, [enabled, onEscape]);
 };
+var useCloseOnContainerScroll = (enabled, 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]);
+};
 
 // ../../node_modules/clsx/dist/clsx.mjs
 function r(e) {
@@ -330,6 +357,7 @@ var TimePicker = (props) => {
   }, [step, min, max]);
   const close = React4.useCallback(() => setOpen(false), []);
   useClickOutside_default([triggerRef, contentRef], close, isOpen);
+  useCloseOnContainerScroll(isOpen, contentRef, close);
   useEscapeKey(isOpen, () => {
     close();
     triggerRef.current?.focus({ preventScroll: true });

package/dist/components/index.cjs

@@ -3303,6 +3303,23 @@ 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);
+  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]);
+};
 
 // src/components/Modal/Modal.tsx
 var import_jsx_runtime313 = require("react/jsx-runtime");
@@ -3978,15 +3995,21 @@ var import_react19 = __toESM(require("react"), 1);
 var useAutoPosition = (triggerRef, popRef, enabled = true) => {
   const [direction, setDirection] = import_react19.default.useState("bottom");
   const directionRef = import_react19.default.useRef("bottom");
-  const calculatePosition = import_react19.default.useCallback(() => {
+  const sizeRef = import_react19.default.useRef(null);
+  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: pop.offsetHeight };
+    }
+    const { w: popW, h: popH } = sizeRef.current;
     const triggerRect = triggerRef.current.getBoundingClientRect();
-    const popW = pop.offsetWidth;
-    const popH = pop.offsetHeight;
     const viewportHeight = window.innerHeight;
     const viewportWidth = window.innerWidth;
-    if (popH === 0 || popW === 0) return;
+    if (popH === 0 || popW === 0) {
+      sizeRef.current = null;
+      return;
+    }
     let next = "bottom";
     let top;
     let left;
@@ -4009,27 +4032,31 @@ var useAutoPosition = (triggerRef, popRef, enabled = true) => {
     }
   }, [triggerRef, popRef]);
   import_react19.default.useLayoutEffect(() => {
-    if (!enabled) return;
-    calculatePosition();
-    const raf = requestAnimationFrame(calculatePosition);
+    if (!enabled) {
+      sizeRef.current = null;
+      return;
+    }
+    calculatePosition(true);
+    const raf = requestAnimationFrame(() => calculatePosition(true));
     return () => cancelAnimationFrame(raf);
   }, [calculatePosition, enabled]);
   import_react19.default.useEffect(() => {
     if (!enabled || !popRef.current) return;
     const observer = new ResizeObserver(() => {
-      calculatePosition();
+      calculatePosition(true);
     });
     observer.observe(popRef.current);
     return () => observer.disconnect();
   }, [calculatePosition, enabled, popRef]);
   import_react19.default.useEffect(() => {
     if (!enabled) return;
-    const onScrollOrResize = () => calculatePosition();
-    window.addEventListener("resize", onScrollOrResize, { passive: true });
-    window.addEventListener("scroll", onScrollOrResize, { passive: true, capture: true });
+    const onScroll = () => calculatePosition();
+    const onResize = () => calculatePosition(true);
+    window.addEventListener("resize", onResize, { passive: true });
+    window.addEventListener("scroll", onScroll, { passive: true, capture: true });
     return () => {
-      window.removeEventListener("resize", onScrollOrResize);
-      window.removeEventListener("scroll", onScrollOrResize, true);
+      window.removeEventListener("resize", onResize);
+      window.removeEventListener("scroll", onScroll, true);
     };
   }, [calculatePosition, enabled]);
   return { direction };
@@ -4072,6 +4099,7 @@ var Dropdown = (props) => {
   const menuRef = import_react21.default.useRef(null);
   const { direction } = useAutoPosition_default(triggerRef, menuRef, mounted);
   useClickOutside_default([triggerRef, menuRef], () => setIsOpen(false), isOpen);
+  useCloseOnContainerScroll(isOpen, menuRef, () => setIsOpen(false));
   useEscapeKey(isOpen, () => {
     setIsOpen(false);
     triggerRef.current?.focus({ preventScroll: true });
@@ -6002,6 +6030,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);
   useEscapeKey(isOpen, () => {
     onClose();
     triggerRef.current?.focus({ preventScroll: true });
@@ -6282,6 +6311,7 @@ var SelectRoot = (props) => {
   }, []);
   const toggle = import_react31.default.useCallback(() => setOpen((prev) => !prev), []);
   useClickOutside_default([contentRef, triggerRef], close, isOpen);
+  useCloseOnContainerScroll(isOpen, contentRef, close);
   useEscapeKey(isOpen, () => {
     close();
     triggerRef.current?.focus({ preventScroll: true });
@@ -7222,6 +7252,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);
   useEscapeKey(isOpen, () => {
     close();
     triggerRef.current?.focus({ preventScroll: true });

package/dist/components/index.css

@@ -4552,6 +4552,7 @@
 }
 .lib-xplat-select-content .select-item {
   padding: var(--spacing-space-2) var(--spacing-space-3);
+  overflow-wrap: anywhere;
   font-family: var(--semantic-typo-label-2-m-font);
   font-size: var(--semantic-typo-label-2-m-size);
   line-height: var(--semantic-typo-label-2-m-lh);
@@ -5639,6 +5640,7 @@
 }
 .lib-xplat-time-picker-content .time-picker-item {
   padding: var(--spacing-space-2) var(--spacing-space-3);
+  overflow-wrap: anywhere;
   cursor: pointer;
   outline: none;
   color: var(--semantic-text-primary);

package/dist/components/index.js

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

package/dist/index.cjs

@@ -7715,6 +7715,23 @@ 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);
+  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]);
+};
 
 // src/components/Modal/Modal.tsx
 var import_jsx_runtime313 = require("react/jsx-runtime");
@@ -8390,15 +8407,21 @@ var import_react19 = __toESM(require("react"), 1);
 var useAutoPosition = (triggerRef, popRef, enabled = true) => {
   const [direction, setDirection] = import_react19.default.useState("bottom");
   const directionRef = import_react19.default.useRef("bottom");
-  const calculatePosition = import_react19.default.useCallback(() => {
+  const sizeRef = import_react19.default.useRef(null);
+  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: pop.offsetHeight };
+    }
+    const { w: popW, h: popH } = sizeRef.current;
     const triggerRect = triggerRef.current.getBoundingClientRect();
-    const popW = pop.offsetWidth;
-    const popH = pop.offsetHeight;
     const viewportHeight = window.innerHeight;
     const viewportWidth = window.innerWidth;
-    if (popH === 0 || popW === 0) return;
+    if (popH === 0 || popW === 0) {
+      sizeRef.current = null;
+      return;
+    }
     let next = "bottom";
     let top;
     let left;
@@ -8421,27 +8444,31 @@ var useAutoPosition = (triggerRef, popRef, enabled = true) => {
     }
   }, [triggerRef, popRef]);
   import_react19.default.useLayoutEffect(() => {
-    if (!enabled) return;
-    calculatePosition();
-    const raf = requestAnimationFrame(calculatePosition);
+    if (!enabled) {
+      sizeRef.current = null;
+      return;
+    }
+    calculatePosition(true);
+    const raf = requestAnimationFrame(() => calculatePosition(true));
     return () => cancelAnimationFrame(raf);
   }, [calculatePosition, enabled]);
   import_react19.default.useEffect(() => {
     if (!enabled || !popRef.current) return;
     const observer = new ResizeObserver(() => {
-      calculatePosition();
+      calculatePosition(true);
     });
     observer.observe(popRef.current);
     return () => observer.disconnect();
   }, [calculatePosition, enabled, popRef]);
   import_react19.default.useEffect(() => {
     if (!enabled) return;
-    const onScrollOrResize = () => calculatePosition();
-    window.addEventListener("resize", onScrollOrResize, { passive: true });
-    window.addEventListener("scroll", onScrollOrResize, { passive: true, capture: true });
+    const onScroll = () => calculatePosition();
+    const onResize = () => calculatePosition(true);
+    window.addEventListener("resize", onResize, { passive: true });
+    window.addEventListener("scroll", onScroll, { passive: true, capture: true });
     return () => {
-      window.removeEventListener("resize", onScrollOrResize);
-      window.removeEventListener("scroll", onScrollOrResize, true);
+      window.removeEventListener("resize", onResize);
+      window.removeEventListener("scroll", onScroll, true);
     };
   }, [calculatePosition, enabled]);
   return { direction };
@@ -8484,6 +8511,7 @@ var Dropdown = (props) => {
   const menuRef = import_react21.default.useRef(null);
   const { direction } = useAutoPosition_default(triggerRef, menuRef, mounted);
   useClickOutside_default([triggerRef, menuRef], () => setIsOpen(false), isOpen);
+  useCloseOnContainerScroll(isOpen, menuRef, () => setIsOpen(false));
   useEscapeKey(isOpen, () => {
     setIsOpen(false);
     triggerRef.current?.focus({ preventScroll: true });
@@ -10414,6 +10442,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);
   useEscapeKey(isOpen, () => {
     onClose();
     triggerRef.current?.focus({ preventScroll: true });
@@ -10694,6 +10723,7 @@ var SelectRoot = (props) => {
   }, []);
   const toggle = import_react31.default.useCallback(() => setOpen((prev) => !prev), []);
   useClickOutside_default([contentRef, triggerRef], close, isOpen);
+  useCloseOnContainerScroll(isOpen, contentRef, close);
   useEscapeKey(isOpen, () => {
     close();
     triggerRef.current?.focus({ preventScroll: true });
@@ -11634,6 +11664,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);
   useEscapeKey(isOpen, () => {
     close();
     triggerRef.current?.focus({ preventScroll: true });

package/dist/index.css

@@ -4552,6 +4552,7 @@
 }
 .lib-xplat-select-content .select-item {
   padding: var(--spacing-space-2) var(--spacing-space-3);
+  overflow-wrap: anywhere;
   font-family: var(--semantic-typo-label-2-m-font);
   font-size: var(--semantic-typo-label-2-m-size);
   line-height: var(--semantic-typo-label-2-m-lh);
@@ -5639,6 +5640,7 @@
 }
 .lib-xplat-time-picker-content .time-picker-item {
   padding: var(--spacing-space-2) var(--spacing-space-3);
+  overflow-wrap: anywhere;
   cursor: pointer;
   outline: none;
   color: var(--semantic-text-primary);