@canvas-components/react-components 0.3.9 → 0.3.11

package/dist/index.d.cts

@@ -430,7 +430,7 @@ interface ReactModalProps {
     bodyStyle?: CSSProperties;
     /** 遮罩样式。 */
     maskStyle?: CSSProperties;
-    /** 指定 Modal 挂载容器。 */
+    /** 指定 Modal 挂载容器；默认使用当前浏览器全屏节点，否则使用 document.body。 */
     getContainer?: HTMLElement | (() => HTMLElement);
 }
 /**

package/dist/index.d.ts

@@ -430,7 +430,7 @@ interface ReactModalProps {
     bodyStyle?: CSSProperties;
     /** 遮罩样式。 */
     maskStyle?: CSSProperties;
-    /** 指定 Modal 挂载容器。 */
+    /** 指定 Modal 挂载容器；默认使用当前浏览器全屏节点，否则使用 document.body。 */
     getContainer?: HTMLElement | (() => HTMLElement);
 }
 /**

package/dist/index.js

@@ -474,9 +474,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,
@@ -5409,6 +5413,7 @@ function ReactModal(props) {
   const [innerFullscreen, setInnerFullscreen] = useState(defaultFullscreen);
   const [innerConfirmLoading, setInnerConfirmLoading] = useState(false);
   const [dragOffset, setDragOffset] = useState({ x: 0, y: 0 });
+  const [, setFullscreenRevision] = useState(0);
   const panelRef = useRef(null);
   const dragRef = useRef(null);
   const restoreFocusRef = useRef(null);
@@ -5421,6 +5426,16 @@ function ReactModal(props) {
   const mergedFullscreen = controlledFullscreen ? Boolean(fullscreen) : innerFullscreen;
   const mergedConfirmLoading = confirmLoading ?? innerConfirmLoading;
   const hasTitle = title !== null && title !== void 0 && title !== false;
+  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]);
   useEffect(() => {
     if (previousOpenRef.current === open) {
       return;
@@ -5731,7 +5746,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) {