@x-plat/design-system 0.14.19 → 0.15.0

package/dist/components/Select/index.cjs

@@ -36,13 +36,13 @@ __export(Select_exports, {
 module.exports = __toCommonJS(Select_exports);
 
 // src/components/Select/Select.tsx
-var import_react6 = __toESM(require("react"), 1);
+var import_react7 = __toESM(require("react"), 1);
 
 // src/tokens/hooks/Portal.tsx
 var import_react_dom = __toESM(require("react-dom"), 1);
-var Portal = ({ children }) => {
+var Portal = ({ children, container }) => {
   if (typeof document === "undefined") return null;
-  return import_react_dom.default.createPortal(children, document.body);
+  return import_react_dom.default.createPortal(children, container ?? document.body);
 };
 Portal.displayName = "Portal";
 var Portal_default = Portal;
@@ -148,8 +148,9 @@ var useAutoPosition = (triggerRef, popRef, enabled = true) => {
     );
     if (frozenMaxRef.current === void 0) frozenMaxRef.current = suggested;
     const maxHeight = frozenMaxRef.current;
-    pop.style.top = `${top + window.scrollY}px`;
-    pop.style.left = `${left + window.scrollX}px`;
+    const hostRect = (pop.offsetParent ?? pop.parentElement)?.getBoundingClientRect();
+    pop.style.top = `${top - (hostRect?.top ?? 0)}px`;
+    pop.style.left = `${left - (hostRect?.left ?? 0)}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;
@@ -224,8 +225,34 @@ var useClickOutside = (refs, handler, enabled = true) => {
 };
 var useClickOutside_default = useClickOutside;
 
-// src/tokens/hooks/useOverlayKeyboard.ts
+// src/tokens/hooks/useOverlayHost.ts
 var import_react3 = __toESM(require("react"), 1);
+var useOverlayHost = (triggerRef, enabled) => {
+  const [host, setHost] = import_react3.default.useState(null);
+  import_react3.default.useLayoutEffect(() => {
+    if (!enabled || !triggerRef.current) {
+      setHost(null);
+      return;
+    }
+    const el = document.createElement("div");
+    el.dataset.xplatOverlayHost = "";
+    el.style.position = "relative";
+    el.style.width = "0";
+    el.style.height = "0";
+    const parent = findScrollParent(triggerRef.current) ?? document.body;
+    parent.appendChild(el);
+    setHost(el);
+    return () => {
+      el.remove();
+      setHost(null);
+    };
+  }, [enabled, triggerRef]);
+  return host;
+};
+var useOverlayHost_default = useOverlayHost;
+
+// src/tokens/hooks/useOverlayKeyboard.ts
+var import_react4 = __toESM(require("react"), 1);
 var FOCUSABLE = [
   "a[href]",
   "button:not([disabled])",
@@ -235,7 +262,7 @@ var FOCUSABLE = [
   "[tabindex]:not([tabindex='-1'])"
 ].join(",");
 var useEscapeKey = (enabled, onEscape) => {
-  import_react3.default.useEffect(() => {
+  import_react4.default.useEffect(() => {
     if (!enabled) return;
     const onKey = (e) => {
       if (e.key !== "Escape") return;
@@ -248,9 +275,9 @@ var useEscapeKey = (enabled, onEscape) => {
   }, [enabled, onEscape]);
 };
 var useCloseWhenFocusHidden = (enabled, triggerRef, popRef, onClose) => {
-  const onCloseRef = import_react3.default.useRef(onClose);
+  const onCloseRef = import_react4.default.useRef(onClose);
   onCloseRef.current = onClose;
-  import_react3.default.useEffect(() => {
+  import_react4.default.useEffect(() => {
     const trigger = triggerRef.current;
     if (!enabled || !trigger) return;
     const observer = new IntersectionObserver(
@@ -1314,16 +1341,16 @@ Field.displayName = "Field";
 var hasError = (validations) => !!validations?.some((v) => v.status === "error");
 
 // src/components/Select/context.ts
-var import_react4 = __toESM(require("react"), 1);
-var SelectContext = import_react4.default.createContext(null);
+var import_react5 = __toESM(require("react"), 1);
+var SelectContext = import_react5.default.createContext(null);
 var context_default = SelectContext;
 
 // src/components/Select/SelectItem.tsx
-var import_react5 = __toESM(require("react"), 1);
+var import_react6 = __toESM(require("react"), 1);
 var import_jsx_runtime296 = require("react/jsx-runtime");
 var SelectItem = (props) => {
   const { children, value, onClick, disabled = false } = props;
-  const ctx = import_react5.default.useContext(context_default);
+  const ctx = import_react6.default.useContext(context_default);
   const handleClick = (e) => {
     e.preventDefault();
     e.stopPropagation();
@@ -1373,29 +1400,29 @@ var SelectRoot = (props) => {
     required,
     size = "md"
   } = props;
-  const fieldId = import_react6.default.useId();
-  const itemChildren = import_react6.default.Children.toArray(children).filter(
-    (child) => import_react6.default.isValidElement(child) && child.type === SelectItem_default
+  const fieldId = import_react7.default.useId();
+  const itemChildren = import_react7.default.Children.toArray(children).filter(
+    (child) => import_react7.default.isValidElement(child) && child.type === SelectItem_default
   );
   const isControlled = valueProp !== void 0;
-  const [isOpen, setOpen] = import_react6.default.useState(false);
-  const [uncontrolledLabel, setUncontrolledLabel] = import_react6.default.useState(null);
-  const [uncontrolledValue, setUncontrolledValue] = import_react6.default.useState(void 0);
-  const controlledLabel = import_react6.default.useMemo(() => {
+  const [isOpen, setOpen] = import_react7.default.useState(false);
+  const [uncontrolledLabel, setUncontrolledLabel] = import_react7.default.useState(null);
+  const [uncontrolledValue, setUncontrolledValue] = import_react7.default.useState(void 0);
+  const controlledLabel = import_react7.default.useMemo(() => {
     if (!isControlled) return null;
     const match = itemChildren.find((child) => child.props.value === valueProp);
     return match ? match.props.children : null;
   }, [isControlled, valueProp, itemChildren]);
   const selectedLabel = isControlled ? controlledLabel : uncontrolledLabel;
   const selectedValue = isControlled ? valueProp : uncontrolledValue;
-  const triggerRef = import_react6.default.useRef(null);
-  const contentRef = import_react6.default.useRef(null);
-  const [mounted, setMounted] = import_react6.default.useState(false);
-  const [visible, setVisible] = import_react6.default.useState(false);
-  import_react6.default.useEffect(() => {
+  const triggerRef = import_react7.default.useRef(null);
+  const contentRef = import_react7.default.useRef(null);
+  const [mounted, setMounted] = import_react7.default.useState(false);
+  const [visible, setVisible] = import_react7.default.useState(false);
+  import_react7.default.useEffect(() => {
     if (disabled && isOpen) setOpen(false);
   }, [disabled, isOpen]);
-  import_react6.default.useEffect(() => {
+  import_react7.default.useEffect(() => {
     if (isOpen) {
       setMounted(true);
       const t2 = setTimeout(() => setVisible(true), 1);
@@ -1405,33 +1432,34 @@ var SelectRoot = (props) => {
     const t = setTimeout(() => setMounted(false), ANIMATION_DURATION_MS);
     return () => clearTimeout(t);
   }, [isOpen]);
-  const [query, setQuery] = import_react6.default.useState("");
+  const [query, setQuery] = import_react7.default.useState("");
   const textOf = (node) => {
     if (node === null || node === void 0 || typeof node === "boolean") return "";
     if (typeof node === "string" || typeof node === "number") return String(node);
     if (Array.isArray(node)) return node.map(textOf).join("");
-    if (import_react6.default.isValidElement(node)) return textOf(node.props.children);
+    if (import_react7.default.isValidElement(node)) return textOf(node.props.children);
     return "";
   };
-  const visibleItems = import_react6.default.useMemo(() => {
+  const visibleItems = import_react7.default.useMemo(() => {
     if (!searchable || !query.trim()) return itemChildren;
     const q = query.trim().toLowerCase();
     return itemChildren.filter((c) => textOf(c.props.children).toLowerCase().includes(q));
   }, [searchable, query, itemChildren]);
-  const open = import_react6.default.useCallback(() => setOpen(true), []);
-  const close = import_react6.default.useCallback(() => {
+  const open = import_react7.default.useCallback(() => setOpen(true), []);
+  const close = import_react7.default.useCallback(() => {
     setOpen(false);
     setQuery("");
   }, []);
-  const toggle = import_react6.default.useCallback(() => setOpen((prev) => !prev), []);
+  const toggle = import_react7.default.useCallback(() => setOpen((prev) => !prev), []);
   useClickOutside_default([contentRef, triggerRef], close, isOpen);
   useCloseWhenFocusHidden(isOpen, triggerRef, contentRef, close);
   useEscapeKey(isOpen, () => {
     close();
     triggerRef.current?.focus({ preventScroll: true });
   });
+  const host = useOverlayHost_default(triggerRef, mounted);
   useAutoPosition_default(triggerRef, contentRef, mounted);
-  const setSelected = import_react6.default.useCallback(
+  const setSelected = import_react7.default.useCallback(
     (label2, itemValue) => {
       if (!isControlled) {
         setUncontrolledLabel(label2);
@@ -1441,7 +1469,7 @@ var SelectRoot = (props) => {
     },
     [isControlled, onChange]
   );
-  const ctxValue = import_react6.default.useMemo(
+  const ctxValue = import_react7.default.useMemo(
     () => ({
       isOpen,
       mounted,
@@ -1520,7 +1548,7 @@ var SelectRoot = (props) => {
             ]
           }
         ),
-        mounted && /* @__PURE__ */ (0, import_jsx_runtime297.jsx)(Portal_default, { children: /* @__PURE__ */ (0, import_jsx_runtime297.jsxs)(
+        mounted && /* @__PURE__ */ (0, import_jsx_runtime297.jsx)(Portal_default, { container: host, children: /* @__PURE__ */ (0, import_jsx_runtime297.jsxs)(
           "div",
           {
             className: clsx_default("lib-xplat-select-content", size, stateClass),

package/dist/components/Select/index.js

@@ -1,11 +1,11 @@
 // src/components/Select/Select.tsx
-import React6 from "react";
+import React7 from "react";
 
 // src/tokens/hooks/Portal.tsx
 import ReactDOM from "react-dom";
-var Portal = ({ children }) => {
+var Portal = ({ children, container }) => {
   if (typeof document === "undefined") return null;
-  return ReactDOM.createPortal(children, document.body);
+  return ReactDOM.createPortal(children, container ?? document.body);
 };
 Portal.displayName = "Portal";
 var Portal_default = Portal;
@@ -111,8 +111,9 @@ var useAutoPosition = (triggerRef, popRef, enabled = true) => {
     );
     if (frozenMaxRef.current === void 0) frozenMaxRef.current = suggested;
     const maxHeight = frozenMaxRef.current;
-    pop.style.top = `${top + window.scrollY}px`;
-    pop.style.left = `${left + window.scrollX}px`;
+    const hostRect = (pop.offsetParent ?? pop.parentElement)?.getBoundingClientRect();
+    pop.style.top = `${top - (hostRect?.top ?? 0)}px`;
+    pop.style.left = `${left - (hostRect?.left ?? 0)}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;
@@ -187,8 +188,34 @@ var useClickOutside = (refs, handler, enabled = true) => {
 };
 var useClickOutside_default = useClickOutside;
 
-// src/tokens/hooks/useOverlayKeyboard.ts
+// src/tokens/hooks/useOverlayHost.ts
 import React3 from "react";
+var useOverlayHost = (triggerRef, enabled) => {
+  const [host, setHost] = React3.useState(null);
+  React3.useLayoutEffect(() => {
+    if (!enabled || !triggerRef.current) {
+      setHost(null);
+      return;
+    }
+    const el = document.createElement("div");
+    el.dataset.xplatOverlayHost = "";
+    el.style.position = "relative";
+    el.style.width = "0";
+    el.style.height = "0";
+    const parent = findScrollParent(triggerRef.current) ?? document.body;
+    parent.appendChild(el);
+    setHost(el);
+    return () => {
+      el.remove();
+      setHost(null);
+    };
+  }, [enabled, triggerRef]);
+  return host;
+};
+var useOverlayHost_default = useOverlayHost;
+
+// src/tokens/hooks/useOverlayKeyboard.ts
+import React4 from "react";
 var FOCUSABLE = [
   "a[href]",
   "button:not([disabled])",
@@ -198,7 +225,7 @@ var FOCUSABLE = [
   "[tabindex]:not([tabindex='-1'])"
 ].join(",");
 var useEscapeKey = (enabled, onEscape) => {
-  React3.useEffect(() => {
+  React4.useEffect(() => {
     if (!enabled) return;
     const onKey = (e) => {
       if (e.key !== "Escape") return;
@@ -211,9 +238,9 @@ var useEscapeKey = (enabled, onEscape) => {
   }, [enabled, onEscape]);
 };
 var useCloseWhenFocusHidden = (enabled, triggerRef, popRef, onClose) => {
-  const onCloseRef = React3.useRef(onClose);
+  const onCloseRef = React4.useRef(onClose);
   onCloseRef.current = onClose;
-  React3.useEffect(() => {
+  React4.useEffect(() => {
     const trigger = triggerRef.current;
     if (!enabled || !trigger) return;
     const observer = new IntersectionObserver(
@@ -1277,16 +1304,16 @@ Field.displayName = "Field";
 var hasError = (validations) => !!validations?.some((v) => v.status === "error");
 
 // src/components/Select/context.ts
-import React4 from "react";
-var SelectContext = React4.createContext(null);
+import React5 from "react";
+var SelectContext = React5.createContext(null);
 var context_default = SelectContext;
 
 // src/components/Select/SelectItem.tsx
-import React5 from "react";
+import React6 from "react";
 import { jsx as jsx296 } from "react/jsx-runtime";
 var SelectItem = (props) => {
   const { children, value, onClick, disabled = false } = props;
-  const ctx = React5.useContext(context_default);
+  const ctx = React6.useContext(context_default);
   const handleClick = (e) => {
     e.preventDefault();
     e.stopPropagation();
@@ -1336,29 +1363,29 @@ var SelectRoot = (props) => {
     required,
     size = "md"
   } = props;
-  const fieldId = React6.useId();
-  const itemChildren = React6.Children.toArray(children).filter(
-    (child) => React6.isValidElement(child) && child.type === SelectItem_default
+  const fieldId = React7.useId();
+  const itemChildren = React7.Children.toArray(children).filter(
+    (child) => React7.isValidElement(child) && child.type === SelectItem_default
   );
   const isControlled = valueProp !== void 0;
-  const [isOpen, setOpen] = React6.useState(false);
-  const [uncontrolledLabel, setUncontrolledLabel] = React6.useState(null);
-  const [uncontrolledValue, setUncontrolledValue] = React6.useState(void 0);
-  const controlledLabel = React6.useMemo(() => {
+  const [isOpen, setOpen] = React7.useState(false);
+  const [uncontrolledLabel, setUncontrolledLabel] = React7.useState(null);
+  const [uncontrolledValue, setUncontrolledValue] = React7.useState(void 0);
+  const controlledLabel = React7.useMemo(() => {
     if (!isControlled) return null;
     const match = itemChildren.find((child) => child.props.value === valueProp);
     return match ? match.props.children : null;
   }, [isControlled, valueProp, itemChildren]);
   const selectedLabel = isControlled ? controlledLabel : uncontrolledLabel;
   const selectedValue = isControlled ? valueProp : uncontrolledValue;
-  const triggerRef = React6.useRef(null);
-  const contentRef = React6.useRef(null);
-  const [mounted, setMounted] = React6.useState(false);
-  const [visible, setVisible] = React6.useState(false);
-  React6.useEffect(() => {
+  const triggerRef = React7.useRef(null);
+  const contentRef = React7.useRef(null);
+  const [mounted, setMounted] = React7.useState(false);
+  const [visible, setVisible] = React7.useState(false);
+  React7.useEffect(() => {
     if (disabled && isOpen) setOpen(false);
   }, [disabled, isOpen]);
-  React6.useEffect(() => {
+  React7.useEffect(() => {
     if (isOpen) {
       setMounted(true);
       const t2 = setTimeout(() => setVisible(true), 1);
@@ -1368,33 +1395,34 @@ var SelectRoot = (props) => {
     const t = setTimeout(() => setMounted(false), ANIMATION_DURATION_MS);
     return () => clearTimeout(t);
   }, [isOpen]);
-  const [query, setQuery] = React6.useState("");
+  const [query, setQuery] = React7.useState("");
   const textOf = (node) => {
     if (node === null || node === void 0 || typeof node === "boolean") return "";
     if (typeof node === "string" || typeof node === "number") return String(node);
     if (Array.isArray(node)) return node.map(textOf).join("");
-    if (React6.isValidElement(node)) return textOf(node.props.children);
+    if (React7.isValidElement(node)) return textOf(node.props.children);
     return "";
   };
-  const visibleItems = React6.useMemo(() => {
+  const visibleItems = React7.useMemo(() => {
     if (!searchable || !query.trim()) return itemChildren;
     const q = query.trim().toLowerCase();
     return itemChildren.filter((c) => textOf(c.props.children).toLowerCase().includes(q));
   }, [searchable, query, itemChildren]);
-  const open = React6.useCallback(() => setOpen(true), []);
-  const close = React6.useCallback(() => {
+  const open = React7.useCallback(() => setOpen(true), []);
+  const close = React7.useCallback(() => {
     setOpen(false);
     setQuery("");
   }, []);
-  const toggle = React6.useCallback(() => setOpen((prev) => !prev), []);
+  const toggle = React7.useCallback(() => setOpen((prev) => !prev), []);
   useClickOutside_default([contentRef, triggerRef], close, isOpen);
   useCloseWhenFocusHidden(isOpen, triggerRef, contentRef, close);
   useEscapeKey(isOpen, () => {
     close();
     triggerRef.current?.focus({ preventScroll: true });
   });
+  const host = useOverlayHost_default(triggerRef, mounted);
   useAutoPosition_default(triggerRef, contentRef, mounted);
-  const setSelected = React6.useCallback(
+  const setSelected = React7.useCallback(
     (label2, itemValue) => {
       if (!isControlled) {
         setUncontrolledLabel(label2);
@@ -1404,7 +1432,7 @@ var SelectRoot = (props) => {
     },
     [isControlled, onChange]
   );
-  const ctxValue = React6.useMemo(
+  const ctxValue = React7.useMemo(
     () => ({
       isOpen,
       mounted,
@@ -1483,7 +1511,7 @@ var SelectRoot = (props) => {
             ]
           }
         ),
-        mounted && /* @__PURE__ */ jsx297(Portal_default, { children: /* @__PURE__ */ jsxs190(
+        mounted && /* @__PURE__ */ jsx297(Portal_default, { container: host, children: /* @__PURE__ */ jsxs190(
           "div",
           {
             className: clsx_default("lib-xplat-select-content", size, stateClass),

package/dist/components/TimePicker/index.cjs

@@ -35,13 +35,13 @@ __export(TimePicker_exports, {
 module.exports = __toCommonJS(TimePicker_exports);
 
 // src/components/TimePicker/TimePicker.tsx
-var import_react4 = __toESM(require("react"), 1);
+var import_react5 = __toESM(require("react"), 1);
 
 // src/tokens/hooks/Portal.tsx
 var import_react_dom = __toESM(require("react-dom"), 1);
-var Portal = ({ children }) => {
+var Portal = ({ children, container }) => {
   if (typeof document === "undefined") return null;
-  return import_react_dom.default.createPortal(children, document.body);
+  return import_react_dom.default.createPortal(children, container ?? document.body);
 };
 Portal.displayName = "Portal";
 var Portal_default = Portal;
@@ -147,8 +147,9 @@ var useAutoPosition = (triggerRef, popRef, enabled = true) => {
     );
     if (frozenMaxRef.current === void 0) frozenMaxRef.current = suggested;
     const maxHeight = frozenMaxRef.current;
-    pop.style.top = `${top + window.scrollY}px`;
-    pop.style.left = `${left + window.scrollX}px`;
+    const hostRect = (pop.offsetParent ?? pop.parentElement)?.getBoundingClientRect();
+    pop.style.top = `${top - (hostRect?.top ?? 0)}px`;
+    pop.style.left = `${left - (hostRect?.left ?? 0)}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;
@@ -223,8 +224,34 @@ var useClickOutside = (refs, handler, enabled = true) => {
 };
 var useClickOutside_default = useClickOutside;
 
-// src/tokens/hooks/useOverlayKeyboard.ts
+// src/tokens/hooks/useOverlayHost.ts
 var import_react3 = __toESM(require("react"), 1);
+var useOverlayHost = (triggerRef, enabled) => {
+  const [host, setHost] = import_react3.default.useState(null);
+  import_react3.default.useLayoutEffect(() => {
+    if (!enabled || !triggerRef.current) {
+      setHost(null);
+      return;
+    }
+    const el = document.createElement("div");
+    el.dataset.xplatOverlayHost = "";
+    el.style.position = "relative";
+    el.style.width = "0";
+    el.style.height = "0";
+    const parent = findScrollParent(triggerRef.current) ?? document.body;
+    parent.appendChild(el);
+    setHost(el);
+    return () => {
+      el.remove();
+      setHost(null);
+    };
+  }, [enabled, triggerRef]);
+  return host;
+};
+var useOverlayHost_default = useOverlayHost;
+
+// src/tokens/hooks/useOverlayKeyboard.ts
+var import_react4 = __toESM(require("react"), 1);
 var FOCUSABLE = [
   "a[href]",
   "button:not([disabled])",
@@ -234,7 +261,7 @@ var FOCUSABLE = [
   "[tabindex]:not([tabindex='-1'])"
 ].join(",");
 var useEscapeKey = (enabled, onEscape) => {
-  import_react3.default.useEffect(() => {
+  import_react4.default.useEffect(() => {
     if (!enabled) return;
     const onKey = (e) => {
       if (e.key !== "Escape") return;
@@ -247,9 +274,9 @@ var useEscapeKey = (enabled, onEscape) => {
   }, [enabled, onEscape]);
 };
 var useCloseWhenFocusHidden = (enabled, triggerRef, popRef, onClose) => {
-  const onCloseRef = import_react3.default.useRef(onClose);
+  const onCloseRef = import_react4.default.useRef(onClose);
   onCloseRef.current = onClose;
-  import_react3.default.useEffect(() => {
+  import_react4.default.useEffect(() => {
     const trigger = triggerRef.current;
     if (!enabled || !trigger) return;
     const observer = new IntersectionObserver(
@@ -459,13 +486,13 @@ var TimePicker = (props) => {
     required,
     validations
   } = props;
-  const fieldId = import_react4.default.useId();
-  const triggerRef = import_react4.default.useRef(null);
-  const contentRef = import_react4.default.useRef(null);
-  const [isOpen, setOpen] = import_react4.default.useState(false);
-  const [mounted, setMounted] = import_react4.default.useState(false);
-  const [visible, setVisible] = import_react4.default.useState(false);
-  const options = import_react4.default.useMemo(() => {
+  const fieldId = import_react5.default.useId();
+  const triggerRef = import_react5.default.useRef(null);
+  const contentRef = import_react5.default.useRef(null);
+  const [isOpen, setOpen] = import_react5.default.useState(false);
+  const [mounted, setMounted] = import_react5.default.useState(false);
+  const [visible, setVisible] = import_react5.default.useState(false);
+  const options = import_react5.default.useMemo(() => {
     const safeStep = step > 0 && step <= 720 ? step : 30;
     const lo = toMinutes(min) ?? 0;
     const hi = toMinutes(max) ?? 24 * 60 - 1;
@@ -473,18 +500,19 @@ var TimePicker = (props) => {
     for (let t = lo; t <= hi; t += safeStep) out.push(toHHmm(t));
     return out;
   }, [step, min, max]);
-  const close = import_react4.default.useCallback(() => setOpen(false), []);
+  const close = import_react5.default.useCallback(() => setOpen(false), []);
   useClickOutside_default([triggerRef, contentRef], close, isOpen);
   useCloseWhenFocusHidden(isOpen, triggerRef, contentRef, close);
   useEscapeKey(isOpen, () => {
     close();
     triggerRef.current?.focus({ preventScroll: true });
   });
+  const host = useOverlayHost_default(triggerRef, mounted);
   useAutoPosition_default(triggerRef, contentRef, mounted);
-  import_react4.default.useEffect(() => {
+  import_react5.default.useEffect(() => {
     if (disabled && isOpen) setOpen(false);
   }, [disabled, isOpen]);
-  import_react4.default.useEffect(() => {
+  import_react5.default.useEffect(() => {
     if (isOpen) {
       setMounted(true);
       const t2 = setTimeout(() => setVisible(true), 1);
@@ -522,7 +550,7 @@ var TimePicker = (props) => {
         children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: clsx_default("time-picker-value", !value && "placeholder"), children: value ? display(value, use12Hours) : placeholder })
       }
     ),
-    mounted && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Portal_default, { children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+    mounted && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Portal_default, { container: host, children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
       "div",
       {
         ref: contentRef,