@canvas-components/react-components 0.3.9 → 0.3.11

package/dist/index.cjs

@@ -495,9 +495,13 @@ function ReactPopup(props) {
         )
       }
     ),
-    document.body
+    resolvePopupContainer(anchorRef?.current)
   );
 }
+function resolvePopupContainer(anchor) {
+  const fullscreenElement = document.fullscreenElement;
+  return fullscreenElement instanceof HTMLElement && (!anchor || fullscreenElement.contains(anchor)) ? fullscreenElement : document.body;
+}
 function resolvePopupPosition(params) {
   const {
     anchor,
@@ -5430,6 +5434,7 @@ function ReactModal(props) {
   const [innerFullscreen, setInnerFullscreen] = React.useState(defaultFullscreen);
   const [innerConfirmLoading, setInnerConfirmLoading] = React.useState(false);
   const [dragOffset, setDragOffset] = React.useState({ x: 0, y: 0 });
+  const [, setFullscreenRevision] = React.useState(0);
   const panelRef = React.useRef(null);
   const dragRef = React.useRef(null);
   const restoreFocusRef = React.useRef(null);
@@ -5442,6 +5447,16 @@ function ReactModal(props) {
   const mergedFullscreen = controlledFullscreen ? Boolean(fullscreen) : innerFullscreen;
   const mergedConfirmLoading = confirmLoading ?? innerConfirmLoading;
   const hasTitle = title !== null && title !== void 0 && title !== false;
+  React.useEffect(() => {
+    if (!transition.rendered || typeof document === "undefined") return;
+    const handleFullscreenChange = () => {
+      setFullscreenRevision((revision) => revision + 1);
+    };
+    document.addEventListener("fullscreenchange", handleFullscreenChange);
+    return () => {
+      document.removeEventListener("fullscreenchange", handleFullscreenChange);
+    };
+  }, [transition.rendered]);
   React.useEffect(() => {
     if (previousOpenRef.current === open) {
       return;
@@ -5752,7 +5767,9 @@ function resolveContainer(getContainer) {
   if (typeof document === "undefined") {
     return null;
   }
-  return typeof getContainer === "function" ? getContainer() : getContainer ?? document.body;
+  if (typeof getContainer === "function") return getContainer();
+  if (getContainer) return getContainer;
+  return document.fullscreenElement instanceof HTMLElement ? document.fullscreenElement : document.body;
 }
 function trapFocus(event, panel) {
   if (!panel) {