[pull] main from adobe:main

packages/@react-spectrum/overlays/src/Underlay.tsx

@@ -11,6 +11,7 @@
  */
 
 import {classNames} from '@react-spectrum/utils';
+import {isScrollable} from '@react-aria/utils';
 import React, {JSX} from 'react';
 import underlayStyles from '@adobe/spectrum-css-temp/components/underlay/vars.css';
 
@@ -20,12 +21,20 @@ interface UnderlayProps {
 }
 
 export function Underlay({isOpen, isTransparent, ...otherProps}: UnderlayProps): JSX.Element {
+  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.
+    let fractionalHeightDifference = scrollingElement.getBoundingClientRect().height % 1;
+    pageHeight = scrollingElement.scrollHeight - fractionalHeightDifference;
+  }
+
   return (
     <div
       data-testid="underlay"
       {...otherProps}
       // Cover the entire document so iOS 26 Safari doesn't clip the underlay to the inner viewport.
-      style={{height: typeof document !== 'undefined' ? document.body.getBoundingClientRect().height : undefined}}
+      style={{height: pageHeight}}
       className={classNames(underlayStyles, 'spectrum-Underlay', {
         'is-open': isOpen,
         'spectrum-Underlay--transparent': isTransparent

packages/@react-spectrum/s2/src/Picker.tsx

@@ -532,7 +532,7 @@ const PickerButton = createHideableComponent(function PickerButton<T extends obj
         })}>
         {(renderProps) => (
           <>
-            <SelectValue className={valueStyles({isQuiet}) + ' ' + raw('&> :not([slot=icon], [slot=avatar], [slot=label]) {display: none;}')}>
+            <SelectValue className={valueStyles({isQuiet}) + ' ' + raw('&> :not([slot=icon], [slot=avatar], [slot=label], [data-slot=label]) {display: none;}')}>
               {({selectedItems, defaultChildren}) => {
                 return (
                   <Provider
@@ -556,16 +556,24 @@ const PickerButton = createHideableComponent(function PickerButton<T extends obj
                       [TextContext, {
                         slots: {
                           description: {},
-                          [DEFAULT_SLOT]: {styles: style({
-                            display: 'block',
-                            flexGrow: 1,
-                            truncate: true
-                          })},
-                          label: {styles: style({
-                            display: 'block',
-                            flexGrow: 1,
-                            truncate: true
-                          })}
+                          [DEFAULT_SLOT]: {
+                            styles: style({
+                              display: 'block',
+                              flexGrow: 1,
+                              truncate: true
+                            }),
+                            // @ts-ignore
+                            'data-slot': 'label'
+                          },
+                          label: {
+                            styles: style({
+                              display: 'block',
+                              flexGrow: 1,
+                              truncate: true
+                            }),
+                            // @ts-ignore not technically necessary, but good for consistency
+                            'data-slot': 'label'
+                          }
                         }
                       }],
                       [InsideSelectValueContext, true]

packages/@react-spectrum/s2/src/TableView.tsx

@@ -458,12 +458,11 @@ const cellFocus = {
   outlineOffset: -2,
   outlineWidth: 2,
   outlineColor: 'focus-ring',
-  borderRadius: '[6px]',
-  pointerEvents: 'none'
+  borderRadius: '[6px]'
 } as const;
 
 function CellFocusRing() {
-  return <div role="presentation" className={style({...cellFocus, position: 'absolute', inset: 0})({isFocusVisible: true})} />;
+  return <div role="presentation" className={style({...cellFocus, position: 'absolute', inset: 0, pointerEvents: 'none'})({isFocusVisible: true})} />;
 }
 
 const columnStyles = style({

packages/@react-spectrum/s2/stories/Picker.stories.tsx

@@ -153,17 +153,17 @@ export const WithAvatars: Story = {
     <Picker {...args}>
       <PickerItem textValue="User One">
         <Avatar slot="avatar" src={SRC_URL_1} />
-        <Text slot="label">User One</Text>
+        <Text>User One</Text>
         <Text slot="description">user.one@example.com</Text>
       </PickerItem>
       <PickerItem textValue="User Two">
         <Avatar slot="avatar" src={SRC_URL_2} />
-        <Text slot="label">User Two</Text>
+        <Text>User Two</Text>
         <Text slot="description">user.two@example.com<br />123-456-7890</Text>
       </PickerItem>
       <PickerItem textValue="User Three">
         <Avatar slot="avatar" src={SRC_URL_2} />
-        <Text slot="label">User Three</Text>
+        <Text>User Three</Text>
       </PickerItem>
     </Picker>
   ),

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

@@ -13,7 +13,7 @@
 import {AriaModalOverlayProps, DismissButton, Overlay, useIsSSR, useModalOverlay} from 'react-aria';
 import {ContextValue, Provider, RenderProps, SlotProps, useContextProps, useRenderProps} from './utils';
 import {DOMAttributes, forwardRefType, GlobalDOMAttributes, RefObject} from '@react-types/shared';
-import {filterDOMProps, mergeProps, mergeRefs, useEnterAnimation, useExitAnimation, useObjectRef, useViewportSize} from '@react-aria/utils';
+import {filterDOMProps, isScrollable, mergeProps, mergeRefs, useEnterAnimation, useExitAnimation, useObjectRef, useViewportSize} from '@react-aria/utils';
 import {OverlayTriggerProps, OverlayTriggerState, useOverlayTriggerState} from 'react-stately';
 import {OverlayTriggerStateContext} from './Dialog';
 import React, {createContext, ForwardedRef, forwardRef, useContext, useMemo, useRef} from 'react';
@@ -171,10 +171,18 @@ function ModalOverlayInner({UNSTABLE_portalContainer, ...props}: ModalOverlayInn
   });
 
   let viewport = useViewportSize();
+  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.
+    let fractionalHeightDifference = scrollingElement.getBoundingClientRect().height % 1;
+    pageHeight = scrollingElement.scrollHeight - fractionalHeightDifference;
+  }
+
   let style = {
     ...renderProps.style,
     '--visual-viewport-height': viewport.height + 'px',
-    '--page-height': typeof document !== 'undefined' ? document.body.getBoundingClientRect().height + 'px' : undefined
+    '--page-height': pageHeight !== undefined ? pageHeight + 'px' : undefined
   };
 
   return (