@x-plat/design-system 0.14.19 → 0.15.0

package/dist/components/Dropdown/index.cjs

@@ -35,13 +35,13 @@ __export(Dropdown_exports, {
 module.exports = __toCommonJS(Dropdown_exports);
 
 // src/components/Dropdown/Dropdown.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(
@@ -287,11 +314,12 @@ var clsx_default = clsx;
 var import_jsx_runtime = require("react/jsx-runtime");
 var Dropdown = (props) => {
   const { items, children } = props;
-  const [isOpen, setIsOpen] = import_react4.default.useState(false);
-  const [mounted, setMounted] = import_react4.default.useState(false);
-  const [visible, setVisible] = import_react4.default.useState(false);
-  const triggerRef = import_react4.default.useRef(null);
-  const menuRef = import_react4.default.useRef(null);
+  const [isOpen, setIsOpen] = import_react5.default.useState(false);
+  const [mounted, setMounted] = import_react5.default.useState(false);
+  const [visible, setVisible] = import_react5.default.useState(false);
+  const triggerRef = import_react5.default.useRef(null);
+  const menuRef = import_react5.default.useRef(null);
+  const host = useOverlayHost_default(triggerRef, mounted);
   useAutoPosition_default(triggerRef, menuRef, mounted);
   useClickOutside_default([triggerRef, menuRef], () => setIsOpen(false), isOpen);
   useCloseWhenFocusHidden(isOpen, triggerRef, menuRef, () => setIsOpen(false));
@@ -299,7 +327,7 @@ var Dropdown = (props) => {
     setIsOpen(false);
     triggerRef.current?.focus({ preventScroll: true });
   });
-  import_react4.default.useEffect(() => {
+  import_react5.default.useEffect(() => {
     if (isOpen) {
       setMounted(true);
       const t2 = setTimeout(() => setVisible(true), 1);
@@ -324,7 +352,7 @@ var Dropdown = (props) => {
         children
       }
     ),
-    mounted && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Portal_default, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    mounted && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Portal_default, { container: host, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
       "div",
       {
         ref: menuRef,

package/dist/components/Dropdown/index.js

@@ -1,11 +1,11 @@
 // src/components/Dropdown/Dropdown.tsx
-import React4 from "react";
+import React5 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(
@@ -251,11 +278,12 @@ var clsx_default = clsx;
 import { jsx, jsxs } from "react/jsx-runtime";
 var Dropdown = (props) => {
   const { items, children } = props;
-  const [isOpen, setIsOpen] = React4.useState(false);
-  const [mounted, setMounted] = React4.useState(false);
-  const [visible, setVisible] = React4.useState(false);
-  const triggerRef = React4.useRef(null);
-  const menuRef = React4.useRef(null);
+  const [isOpen, setIsOpen] = React5.useState(false);
+  const [mounted, setMounted] = React5.useState(false);
+  const [visible, setVisible] = React5.useState(false);
+  const triggerRef = React5.useRef(null);
+  const menuRef = React5.useRef(null);
+  const host = useOverlayHost_default(triggerRef, mounted);
   useAutoPosition_default(triggerRef, menuRef, mounted);
   useClickOutside_default([triggerRef, menuRef], () => setIsOpen(false), isOpen);
   useCloseWhenFocusHidden(isOpen, triggerRef, menuRef, () => setIsOpen(false));
@@ -263,7 +291,7 @@ var Dropdown = (props) => {
     setIsOpen(false);
     triggerRef.current?.focus({ preventScroll: true });
   });
-  React4.useEffect(() => {
+  React5.useEffect(() => {
     if (isOpen) {
       setMounted(true);
       const t2 = setTimeout(() => setVisible(true), 1);
@@ -288,7 +316,7 @@ var Dropdown = (props) => {
         children
       }
     ),
-    mounted && /* @__PURE__ */ jsx(Portal_default, { children: /* @__PURE__ */ jsx(
+    mounted && /* @__PURE__ */ jsx(Portal_default, { container: host, children: /* @__PURE__ */ jsx(
       "div",
       {
         ref: menuRef,

package/dist/components/PopOver/index.cjs

@@ -35,13 +35,13 @@ __export(PopOver_exports, {
 module.exports = __toCommonJS(PopOver_exports);
 
 // src/components/PopOver/PopOver.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(
@@ -287,18 +314,19 @@ var clsx_default = clsx;
 var import_jsx_runtime = require("react/jsx-runtime");
 var PopOver = (props) => {
   const { children, isOpen, onClose, PopOverEl } = props;
-  const popRef = import_react4.default.useRef(null);
-  const triggerRef = import_react4.default.useRef(null);
-  const [localOpen, setLocalOpen] = import_react4.default.useState(false);
-  const [eventTrigger, setEventTrigger] = import_react4.default.useState(false);
+  const popRef = import_react5.default.useRef(null);
+  const triggerRef = import_react5.default.useRef(null);
+  const [localOpen, setLocalOpen] = import_react5.default.useState(false);
+  const [eventTrigger, setEventTrigger] = import_react5.default.useState(false);
   useClickOutside_default([popRef, triggerRef], onClose, isOpen);
   useCloseWhenFocusHidden(isOpen, triggerRef, popRef, onClose);
   useEscapeKey(isOpen, () => {
     onClose();
     triggerRef.current?.focus({ preventScroll: true });
   });
+  const host = useOverlayHost_default(triggerRef, localOpen);
   useAutoPosition_default(triggerRef, popRef, localOpen);
-  import_react4.default.useEffect(() => {
+  import_react5.default.useEffect(() => {
     if (isOpen) {
       setLocalOpen(isOpen);
       setTimeout(() => {
@@ -321,7 +349,7 @@ var PopOver = (props) => {
       },
       children: [
         children,
-        localOpen && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Portal_default, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        localOpen && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Portal_default, { container: host, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
           "div",
           {
             className: clsx_default(

package/dist/components/PopOver/index.js

@@ -1,11 +1,11 @@
 // src/components/PopOver/PopOver.tsx
-import React4 from "react";
+import React5 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(
@@ -251,18 +278,19 @@ var clsx_default = clsx;
 import { jsx, jsxs } from "react/jsx-runtime";
 var PopOver = (props) => {
   const { children, isOpen, onClose, PopOverEl } = props;
-  const popRef = React4.useRef(null);
-  const triggerRef = React4.useRef(null);
-  const [localOpen, setLocalOpen] = React4.useState(false);
-  const [eventTrigger, setEventTrigger] = React4.useState(false);
+  const popRef = React5.useRef(null);
+  const triggerRef = React5.useRef(null);
+  const [localOpen, setLocalOpen] = React5.useState(false);
+  const [eventTrigger, setEventTrigger] = React5.useState(false);
   useClickOutside_default([popRef, triggerRef], onClose, isOpen);
   useCloseWhenFocusHidden(isOpen, triggerRef, popRef, onClose);
   useEscapeKey(isOpen, () => {
     onClose();
     triggerRef.current?.focus({ preventScroll: true });
   });
+  const host = useOverlayHost_default(triggerRef, localOpen);
   useAutoPosition_default(triggerRef, popRef, localOpen);
-  React4.useEffect(() => {
+  React5.useEffect(() => {
     if (isOpen) {
       setLocalOpen(isOpen);
       setTimeout(() => {
@@ -285,7 +313,7 @@ var PopOver = (props) => {
       },
       children: [
         children,
-        localOpen && /* @__PURE__ */ jsx(Portal_default, { children: /* @__PURE__ */ jsx(
+        localOpen && /* @__PURE__ */ jsx(Portal_default, { container: host, children: /* @__PURE__ */ jsx(
           "div",
           {
             className: clsx_default(