@x-plat/design-system 0.5.10 → 0.5.12

package/dist/components/Dropdown/index.cjs

@@ -35,7 +35,7 @@ __export(Dropdown_exports, {
 module.exports = __toCommonJS(Dropdown_exports);
 
 // src/components/Dropdown/Dropdown.tsx
-var import_react3 = __toESM(require("react"), 1);
+var import_react4 = __toESM(require("react"), 1);
 
 // src/tokens/hooks/useAutoPosition.ts
 var import_react = __toESM(require("react"), 1);
@@ -48,28 +48,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]);
   import_react.default.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;
 };
@@ -100,6 +110,24 @@ var useClickOutside = (refs, handler, enabled = true) => {
 };
 var useClickOutside_default = useClickOutside;
 
+// src/tokens/hooks/Portal.tsx
+var import_react3 = __toESM(require("react"), 1);
+var import_react_dom = __toESM(require("react-dom"), 1);
+var import_jsx_runtime = require("react/jsx-runtime");
+var PortalContainerContext = import_react3.default.createContext(null);
+var Portal = ({ children }) => {
+  const contextContainer = import_react3.default.useContext(PortalContainerContext);
+  const [fallback, setFallback] = import_react3.default.useState(null);
+  import_react3.default.useEffect(() => {
+    if (!contextContainer) setFallback(document.body);
+  }, [contextContainer]);
+  const container = contextContainer ?? fallback;
+  if (!container) return null;
+  return import_react_dom.default.createPortal(children, container);
+};
+Portal.displayName = "Portal";
+var Portal_default = Portal;
+
 // ../../node_modules/clsx/dist/clsx.mjs
 function r(e) {
   var t, f, n = "";
@@ -117,17 +145,17 @@ function clsx() {
 var clsx_default = clsx;
 
 // src/components/Dropdown/Dropdown.tsx
-var import_jsx_runtime = require("react/jsx-runtime");
+var import_jsx_runtime2 = require("react/jsx-runtime");
 var Dropdown = (props) => {
   const { items, children } = props;
-  const [isOpen, setIsOpen] = import_react3.default.useState(false);
-  const [mounted, setMounted] = import_react3.default.useState(false);
-  const [visible, setVisible] = import_react3.default.useState(false);
-  const triggerRef = import_react3.default.useRef(null);
-  const menuRef = import_react3.default.useRef(null);
-  const { position, direction } = useAutoPosition_default(triggerRef, menuRef, isOpen);
-  useClickOutside_default([triggerRef, menuRef], () => setIsOpen(false));
-  import_react3.default.useEffect(() => {
+  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 { position, direction } = useAutoPosition_default(triggerRef, menuRef, mounted);
+  useClickOutside_default([triggerRef, menuRef], () => setIsOpen(false), isOpen);
+  import_react4.default.useEffect(() => {
     if (isOpen) {
       setMounted(true);
       const t2 = setTimeout(() => setVisible(true), 1);
@@ -142,8 +170,8 @@ var Dropdown = (props) => {
     item.onClick?.();
     setIsOpen(false);
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "lib-xplat-dropdown", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "lib-xplat-dropdown", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
       "div",
       {
         ref: triggerRef,
@@ -152,14 +180,14 @@ var Dropdown = (props) => {
         children
       }
     ),
-    mounted && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    mounted && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Portal_default, { children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
       "div",
       {
         ref: menuRef,
-        className: clsx_default("dropdown-menu", direction, { visible }),
+        className: clsx_default("lib-xplat-dropdown-menu", direction, { visible }),
         style: { top: position.top, left: position.left },
         role: "menu",
-        children: items.map((item) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        children: items.map((item) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
           "button",
           {
             className: clsx_default("dropdown-item", {
@@ -174,7 +202,7 @@ var Dropdown = (props) => {
           item.key
         ))
       }
-    )
+    ) })
   ] });
 };
 Dropdown.displayName = "Dropdown";

package/dist/components/Dropdown/index.css

@@ -7,9 +7,9 @@
 .lib-xplat-dropdown .dropdown-trigger {
   cursor: pointer;
 }
-.lib-xplat-dropdown .dropdown-menu {
-  position: absolute;
-  z-index: 100;
+.lib-xplat-dropdown-menu {
+  position: fixed;
+  z-index: 1000;
   min-width: 160px;
   background: var(--semantic-surface-neutral-default);
   border: 1px solid var(--semantic-border-default);
@@ -20,14 +20,14 @@
   transform: translateY(-4px);
   transition: opacity 0.15s ease, transform 0.15s ease;
 }
-.lib-xplat-dropdown .dropdown-menu.bottom {
+.lib-xplat-dropdown-menu.bottom {
   transform: translateY(4px);
 }
-.lib-xplat-dropdown .dropdown-menu.visible {
+.lib-xplat-dropdown-menu.visible {
   opacity: 1;
   transform: translateY(0);
 }
-.lib-xplat-dropdown .dropdown-item {
+.lib-xplat-dropdown-menu .dropdown-item {
   display: flex;
   align-items: center;
   width: 100%;
@@ -40,16 +40,16 @@
   text-align: left;
   transition: background-color 0.15s;
 }
-.lib-xplat-dropdown .dropdown-item:hover:not(:disabled) {
+.lib-xplat-dropdown-menu .dropdown-item:hover:not(:disabled) {
   background-color: var(--semantic-surface-neutral-subtle);
 }
-.lib-xplat-dropdown .dropdown-item.danger {
+.lib-xplat-dropdown-menu .dropdown-item.danger {
   color: var(--semantic-text-error);
 }
-.lib-xplat-dropdown .dropdown-item.danger:hover:not(:disabled) {
+.lib-xplat-dropdown-menu .dropdown-item.danger:hover:not(:disabled) {
   background-color: var(--semantic-surface-error-subtle);
 }
-.lib-xplat-dropdown .dropdown-item:disabled {
+.lib-xplat-dropdown-menu .dropdown-item:disabled {
   color: var(--semantic-text-disabled);
   cursor: not-allowed;
 }

package/dist/components/Dropdown/index.js

@@ -1,5 +1,5 @@
 // src/components/Dropdown/Dropdown.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,17 +109,17 @@ function clsx() {
 var clsx_default = clsx;
 
 // src/components/Dropdown/Dropdown.tsx
-import { jsx, jsxs } from "react/jsx-runtime";
+import { jsx as jsx2, jsxs } from "react/jsx-runtime";
 var Dropdown = (props) => {
   const { items, children } = props;
-  const [isOpen, setIsOpen] = React3.useState(false);
-  const [mounted, setMounted] = React3.useState(false);
-  const [visible, setVisible] = React3.useState(false);
-  const triggerRef = React3.useRef(null);
-  const menuRef = React3.useRef(null);
-  const { position, direction } = useAutoPosition_default(triggerRef, menuRef, isOpen);
-  useClickOutside_default([triggerRef, menuRef], () => setIsOpen(false));
-  React3.useEffect(() => {
+  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 { position, direction } = useAutoPosition_default(triggerRef, menuRef, mounted);
+  useClickOutside_default([triggerRef, menuRef], () => setIsOpen(false), isOpen);
+  React4.useEffect(() => {
     if (isOpen) {
       setMounted(true);
       const t2 = setTimeout(() => setVisible(true), 1);
@@ -107,7 +135,7 @@ var Dropdown = (props) => {
     setIsOpen(false);
   };
   return /* @__PURE__ */ jsxs("div", { className: "lib-xplat-dropdown", children: [
-    /* @__PURE__ */ jsx(
+    /* @__PURE__ */ jsx2(
       "div",
       {
         ref: triggerRef,
@@ -116,14 +144,14 @@ var Dropdown = (props) => {
         children
       }
     ),
-    mounted && /* @__PURE__ */ jsx(
+    mounted && /* @__PURE__ */ jsx2(Portal_default, { children: /* @__PURE__ */ jsx2(
       "div",
       {
         ref: menuRef,
-        className: clsx_default("dropdown-menu", direction, { visible }),
+        className: clsx_default("lib-xplat-dropdown-menu", direction, { visible }),
         style: { top: position.top, left: position.left },
         role: "menu",
-        children: items.map((item) => /* @__PURE__ */ jsx(
+        children: items.map((item) => /* @__PURE__ */ jsx2(
           "button",
           {
             className: clsx_default("dropdown-item", {
@@ -138,7 +166,7 @@ var Dropdown = (props) => {
           item.key
         ))
       }
-    )
+    ) })
   ] });
 };
 Dropdown.displayName = "Dropdown";

package/dist/components/Modal/index.cjs

@@ -35,8 +35,26 @@ __export(Modal_exports, {
 module.exports = __toCommonJS(Modal_exports);
 
 // src/components/Modal/Modal.tsx
+var import_react2 = __toESM(require("react"), 1);
+var import_react_dom2 = require("react-dom");
+
+// src/tokens/hooks/Portal.tsx
 var import_react = __toESM(require("react"), 1);
-var import_react_dom = require("react-dom");
+var import_react_dom = __toESM(require("react-dom"), 1);
+var import_jsx_runtime = require("react/jsx-runtime");
+var PortalContainerContext = import_react.default.createContext(null);
+var PortalProvider = ({ container, children }) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(PortalContainerContext.Provider, { value: container, children });
+var Portal = ({ children }) => {
+  const contextContainer = import_react.default.useContext(PortalContainerContext);
+  const [fallback, setFallback] = import_react.default.useState(null);
+  import_react.default.useEffect(() => {
+    if (!contextContainer) setFallback(document.body);
+  }, [contextContainer]);
+  const container = contextContainer ?? fallback;
+  if (!container) return null;
+  return import_react_dom.default.createPortal(children, container);
+};
+Portal.displayName = "Portal";
 
 // ../../node_modules/clsx/dist/clsx.mjs
 function r(e) {
@@ -55,13 +73,14 @@ function clsx() {
 var clsx_default = clsx;
 
 // src/components/Modal/Modal.tsx
-var import_jsx_runtime = require("react/jsx-runtime");
+var import_jsx_runtime2 = require("react/jsx-runtime");
 var ANIMATION_DURATION_MS = 200;
 var Modal = (props) => {
   const { isOpen, onClose, children } = props;
-  const [mounted, setMounted] = import_react.default.useState(false);
-  const [visible, setVisible] = import_react.default.useState(false);
-  import_react.default.useEffect(() => {
+  const [mounted, setMounted] = import_react2.default.useState(false);
+  const [visible, setVisible] = import_react2.default.useState(false);
+  const boxRef = import_react2.default.useRef(null);
+  import_react2.default.useEffect(() => {
     if (isOpen) {
       setMounted(true);
       const t2 = setTimeout(() => setVisible(true), 1);
@@ -74,20 +93,21 @@ var Modal = (props) => {
   if (typeof document === "undefined") return null;
   if (!mounted) return null;
   const stateClass = visible ? "enter" : "exit";
-  return (0, import_react_dom.createPortal)(
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+  return (0, import_react_dom2.createPortal)(
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
       "div",
       {
         className: clsx_default("lib-xplat-modal", "dim", stateClass),
         onClick: onClose,
-        children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
           "div",
           {
+            ref: boxRef,
             className: clsx_default("lib-xplat-modal", "modal-box", stateClass),
             role: "dialog",
             "aria-modal": "true",
             onClick: (e) => e.stopPropagation(),
-            children
+            children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(PortalProvider, { container: boxRef.current, children })
           }
         )
       }

package/dist/components/Modal/index.d.cts

@@ -2,9 +2,6 @@ import React from 'react';
 
 interface ModalProps {
     isOpen: boolean;
-    /**
-     * open 값 false 로 변경 필수
-     */
     onClose: () => void;
     children?: React.ReactNode;
 }

package/dist/components/Modal/index.d.ts

@@ -2,9 +2,6 @@ import React from 'react';
 
 interface ModalProps {
     isOpen: boolean;
-    /**
-     * open 값 false 로 변경 필수
-     */
     onClose: () => void;
     children?: React.ReactNode;
 }

package/dist/components/Modal/index.js

@@ -1,7 +1,25 @@
 // src/components/Modal/Modal.tsx
-import React from "react";
+import React2 from "react";
 import { createPortal } from "react-dom";
 
+// src/tokens/hooks/Portal.tsx
+import React from "react";
+import ReactDOM from "react-dom";
+import { jsx } from "react/jsx-runtime";
+var PortalContainerContext = React.createContext(null);
+var PortalProvider = ({ container, children }) => /* @__PURE__ */ jsx(PortalContainerContext.Provider, { value: container, children });
+var Portal = ({ children }) => {
+  const contextContainer = React.useContext(PortalContainerContext);
+  const [fallback, setFallback] = React.useState(null);
+  React.useEffect(() => {
+    if (!contextContainer) setFallback(document.body);
+  }, [contextContainer]);
+  const container = contextContainer ?? fallback;
+  if (!container) return null;
+  return ReactDOM.createPortal(children, container);
+};
+Portal.displayName = "Portal";
+
 // ../../node_modules/clsx/dist/clsx.mjs
 function r(e) {
   var t, f, n = "";
@@ -19,13 +37,14 @@ function clsx() {
 var clsx_default = clsx;
 
 // src/components/Modal/Modal.tsx
-import { jsx } from "react/jsx-runtime";
+import { jsx as jsx2 } from "react/jsx-runtime";
 var ANIMATION_DURATION_MS = 200;
 var Modal = (props) => {
   const { isOpen, onClose, children } = props;
-  const [mounted, setMounted] = React.useState(false);
-  const [visible, setVisible] = React.useState(false);
-  React.useEffect(() => {
+  const [mounted, setMounted] = React2.useState(false);
+  const [visible, setVisible] = React2.useState(false);
+  const boxRef = React2.useRef(null);
+  React2.useEffect(() => {
     if (isOpen) {
       setMounted(true);
       const t2 = setTimeout(() => setVisible(true), 1);
@@ -39,19 +58,20 @@ var Modal = (props) => {
   if (!mounted) return null;
   const stateClass = visible ? "enter" : "exit";
   return createPortal(
-    /* @__PURE__ */ jsx(
+    /* @__PURE__ */ jsx2(
       "div",
       {
         className: clsx_default("lib-xplat-modal", "dim", stateClass),
         onClick: onClose,
-        children: /* @__PURE__ */ jsx(
+        children: /* @__PURE__ */ jsx2(
           "div",
           {
+            ref: boxRef,
             className: clsx_default("lib-xplat-modal", "modal-box", stateClass),
             role: "dialog",
             "aria-modal": "true",
             onClick: (e) => e.stopPropagation(),
-            children
+            children: /* @__PURE__ */ jsx2(PortalProvider, { container: boxRef.current, children })
           }
         )
       }

package/dist/components/PopOver/index.cjs

@@ -35,7 +35,7 @@ __export(PopOver_exports, {
 module.exports = __toCommonJS(PopOver_exports);
 
 // src/components/PopOver/PopOver.tsx
-var import_react3 = __toESM(require("react"), 1);
+var import_react4 = __toESM(require("react"), 1);
 
 // src/tokens/hooks/useAutoPosition.ts
 var import_react = __toESM(require("react"), 1);
@@ -48,28 +48,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]);
   import_react.default.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;
 };
@@ -100,6 +110,24 @@ var useClickOutside = (refs, handler, enabled = true) => {
 };
 var useClickOutside_default = useClickOutside;
 
+// src/tokens/hooks/Portal.tsx
+var import_react3 = __toESM(require("react"), 1);
+var import_react_dom = __toESM(require("react-dom"), 1);
+var import_jsx_runtime = require("react/jsx-runtime");
+var PortalContainerContext = import_react3.default.createContext(null);
+var Portal = ({ children }) => {
+  const contextContainer = import_react3.default.useContext(PortalContainerContext);
+  const [fallback, setFallback] = import_react3.default.useState(null);
+  import_react3.default.useEffect(() => {
+    if (!contextContainer) setFallback(document.body);
+  }, [contextContainer]);
+  const container = contextContainer ?? fallback;
+  if (!container) return null;
+  return import_react_dom.default.createPortal(children, container);
+};
+Portal.displayName = "Portal";
+var Portal_default = Portal;
+
 // ../../node_modules/clsx/dist/clsx.mjs
 function r(e) {
   var t, f, n = "";
@@ -117,16 +145,16 @@ function clsx() {
 var clsx_default = clsx;
 
 // src/components/PopOver/PopOver.tsx
-var import_jsx_runtime = require("react/jsx-runtime");
+var import_jsx_runtime2 = require("react/jsx-runtime");
 var PopOver = (props) => {
   const { children, isOpen, onClose, PopOverEl } = props;
-  const popRef = import_react3.default.useRef(null);
-  const triggerRef = import_react3.default.useRef(null);
-  const [localOpen, setLocalOpen] = import_react3.default.useState(false);
-  const [eventTrigger, setEventTrigger] = import_react3.default.useState(false);
+  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);
   useClickOutside_default([popRef, triggerRef], onClose, isOpen);
   const position = useAutoPosition_default(triggerRef, popRef, localOpen);
-  import_react3.default.useEffect(() => {
+  import_react4.default.useEffect(() => {
     if (isOpen) {
       setLocalOpen(isOpen);
       setTimeout(() => {
@@ -139,7 +167,7 @@ var PopOver = (props) => {
       }, 200);
     }
   }, [isOpen]);
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
     "div",
     {
       className: "lib-xplat-pop-over",
@@ -149,11 +177,11 @@ var PopOver = (props) => {
       },
       children: [
         children,
-        localOpen && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        localOpen && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Portal_default, { children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
           "div",
           {
             className: clsx_default(
-              "content-wrap",
+              "lib-xplat-pop-over-content",
               position.direction,
               eventTrigger && "visible"
             ),
@@ -163,7 +191,7 @@ var PopOver = (props) => {
             },
             children: PopOverEl
           }
-        )
+        ) })
       ]
     }
   );