@x-plat/design-system 0.5.10 → 0.5.12

package/dist/components/PopOver/index.css

@@ -1,31 +1,28 @@
 /* src/components/PopOver/popOver.scss */
 .lib-xplat-pop-over {
   position: relative;
-  z-index: 10;
   width: fit-content;
   cursor: pointer;
   user-select: none;
 }
-.lib-xplat-pop-over > .content-wrap {
-  position: absolute;
+.lib-xplat-pop-over-content {
+  position: fixed;
+  z-index: 1000;
   cursor: default;
   transition: transform 0.2s ease, opacity 0.2s ease;
-  background: white;
+  background: var(--semantic-surface-neutral-default);
   border-radius: var(--spacing-radius-md);
   box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
-  z-index: 10;
   opacity: 0;
   transform: scale(0.8);
 }
-.lib-xplat-pop-over > .content-wrap.top {
+.lib-xplat-pop-over-content.top {
   transform-origin: bottom;
-  margin-bottom: var(--spacing-space-2);
 }
-.lib-xplat-pop-over > .content-wrap.bottom {
+.lib-xplat-pop-over-content.bottom {
   transform-origin: top;
-  margin-top: var(--spacing-space-2);
 }
-.lib-xplat-pop-over > .content-wrap.visible {
+.lib-xplat-pop-over-content.visible {
   opacity: 1;
   transform: scale(1);
 }

package/dist/components/PopOver/index.js

@@ -1,5 +1,5 @@
 // src/components/PopOver/PopOver.tsx
-import React3 from "react";
+import React4 from "react";
 
 // src/tokens/hooks/useAutoPosition.ts
 import React from "react";
@@ -12,28 +12,38 @@ var useAutoPosition = (triggerRef, popRef, enabled = true) => {
     if (!triggerRef.current || !popRef.current) return;
     const triggerRect = triggerRef.current.getBoundingClientRect();
     const popRect = popRef.current.getBoundingClientRect();
-    const viewportWidth = window.innerWidth;
     const viewportHeight = window.innerHeight;
-    const position2 = {};
+    const viewportWidth = window.innerWidth;
     let direction = "bottom";
-    if (triggerRect.bottom + popRect.height > viewportHeight) {
+    let top;
+    let left = triggerRect.left;
+    if (triggerRect.bottom + popRect.height > viewportHeight && triggerRect.top - popRect.height > 0) {
       direction = "top";
+      top = triggerRect.top - popRect.height;
+    } else {
+      top = triggerRect.bottom;
     }
-    if (triggerRect.left + popRect.width > viewportWidth) {
-      position2["right"] = 10;
-    }
-    if (triggerRect.left < 0) {
-      position2["left"] = 10;
+    if (left + popRect.width > viewportWidth) {
+      left = viewportWidth - popRect.width - 8;
     }
+    if (left < 8) left = 8;
     setPosition({
-      position: position2,
+      position: { top, left, width: triggerRect.width },
       direction
     });
   }, [triggerRef, popRef]);
   React.useEffect(() => {
-    calculatePosition();
+    if (!enabled) return;
+    const raf = requestAnimationFrame(() => {
+      calculatePosition();
+    });
     window.addEventListener("resize", calculatePosition);
-    return () => window.removeEventListener("resize", calculatePosition);
+    window.addEventListener("scroll", calculatePosition, true);
+    return () => {
+      cancelAnimationFrame(raf);
+      window.removeEventListener("resize", calculatePosition);
+      window.removeEventListener("scroll", calculatePosition, true);
+    };
   }, [calculatePosition, enabled]);
   return position;
 };
@@ -64,6 +74,24 @@ var useClickOutside = (refs, handler, enabled = true) => {
 };
 var useClickOutside_default = useClickOutside;
 
+// src/tokens/hooks/Portal.tsx
+import React3 from "react";
+import ReactDOM from "react-dom";
+import { jsx } from "react/jsx-runtime";
+var PortalContainerContext = React3.createContext(null);
+var Portal = ({ children }) => {
+  const contextContainer = React3.useContext(PortalContainerContext);
+  const [fallback, setFallback] = React3.useState(null);
+  React3.useEffect(() => {
+    if (!contextContainer) setFallback(document.body);
+  }, [contextContainer]);
+  const container = contextContainer ?? fallback;
+  if (!container) return null;
+  return ReactDOM.createPortal(children, container);
+};
+Portal.displayName = "Portal";
+var Portal_default = Portal;
+
 // ../../node_modules/clsx/dist/clsx.mjs
 function r(e) {
   var t, f, n = "";
@@ -81,16 +109,16 @@ function clsx() {
 var clsx_default = clsx;
 
 // src/components/PopOver/PopOver.tsx
-import { jsx, jsxs } from "react/jsx-runtime";
+import { jsx as jsx2, jsxs } from "react/jsx-runtime";
 var PopOver = (props) => {
   const { children, isOpen, onClose, PopOverEl } = props;
-  const popRef = React3.useRef(null);
-  const triggerRef = React3.useRef(null);
-  const [localOpen, setLocalOpen] = React3.useState(false);
-  const [eventTrigger, setEventTrigger] = React3.useState(false);
+  const popRef = React4.useRef(null);
+  const triggerRef = React4.useRef(null);
+  const [localOpen, setLocalOpen] = React4.useState(false);
+  const [eventTrigger, setEventTrigger] = React4.useState(false);
   useClickOutside_default([popRef, triggerRef], onClose, isOpen);
   const position = useAutoPosition_default(triggerRef, popRef, localOpen);
-  React3.useEffect(() => {
+  React4.useEffect(() => {
     if (isOpen) {
       setLocalOpen(isOpen);
       setTimeout(() => {
@@ -113,11 +141,11 @@ var PopOver = (props) => {
       },
       children: [
         children,
-        localOpen && /* @__PURE__ */ jsx(
+        localOpen && /* @__PURE__ */ jsx2(Portal_default, { children: /* @__PURE__ */ jsx2(
           "div",
           {
             className: clsx_default(
-              "content-wrap",
+              "lib-xplat-pop-over-content",
               position.direction,
               eventTrigger && "visible"
             ),
@@ -127,7 +155,7 @@ var PopOver = (props) => {
             },
             children: PopOverEl
           }
-        )
+        ) })
       ]
     }
   );