feat(RAC): expose --page-width and --visual-viewport-width from Modal

Author: lixiaoyan

packages/@react-aria/utils/src/useViewportSize.ts

@@ -88,10 +88,20 @@ export function useViewportSize(): ViewportSize {
   return size;
 }
 
+/**
+ * Get the viewport size without the scrollbar.
+ */
 function getViewportSize(): ViewportSize {
   return {
     // Multiply by the visualViewport scale to get the "natural" size, unaffected by pinch zooming.
-    width: visualViewport ? visualViewport.width * visualViewport.scale : window.innerWidth,
-    height: visualViewport ? visualViewport.height * visualViewport.scale : window.innerHeight
+    width: visualViewport
+      // The visual viewport width may include the scrollbar gutter. We should use the minimum width between
+      // the visual viewport and the document element to ensure that the scrollbar width is always excluded.
+      // See: https://github.com/w3c/csswg-drafts/issues/8099
+      ? Math.min(visualViewport.width * visualViewport.scale, document.documentElement.clientWidth)
+      : document.documentElement.clientWidth,
+    height: visualViewport
+      ? visualViewport.height * visualViewport.scale
+      : document.documentElement.clientHeight
   };
 }

packages/react-aria-components/src/Modal.tsx

@@ -184,17 +184,22 @@ function ModalOverlayInner({UNSTABLE_portalContainer, ...props}: ModalOverlayInn
   });
 
   let viewport = useViewportSize();
+  let pageWidth: number | undefined = undefined;
   let pageHeight: number | undefined = undefined;
   if (typeof document !== 'undefined') {
     let scrollingElement = isScrollable(document.body) ? document.body : document.scrollingElement || document.documentElement;
-    // Prevent Firefox from adding scrollbars when the page has a fractional height.
+    // Prevent Firefox from adding scrollbars when the page has a fractional width/height.
+    let fractionalWidthDifference = scrollingElement.getBoundingClientRect().width % 1;
     let fractionalHeightDifference = scrollingElement.getBoundingClientRect().height % 1;
+    pageWidth = scrollingElement.scrollWidth - fractionalWidthDifference;
     pageHeight = scrollingElement.scrollHeight - fractionalHeightDifference;
   }
 
   let style = {
     ...renderProps.style,
+    '--visual-viewport-width': viewport.width + 'px',
     '--visual-viewport-height': viewport.height + 'px',
+    '--page-width': pageWidth !== undefined ? pageWidth + 'px' : undefined,
     '--page-height': pageHeight !== undefined ? pageHeight + 'px' : undefined
   };