[POC] Anchored modality changes

docs/reference/generated/menu-root.json

@@ -23,7 +23,7 @@
     "modal": {
       "type": "boolean",
       "default": "true",
-      "description": "Whether the menu should prevent outside clicks and lock page scroll when open."
+      "description": "Whether the menu should prevent interactivity of other elements\non the page when open and its positioning anchor is visible."
     },
     "disabled": {
       "type": "boolean",

docs/reference/generated/popover-root.json

@@ -15,6 +15,11 @@
       "type": "(open, event, reason) => void",
       "description": "Event handler called when the popover is opened or closed."
     },
+    "modal": {
+      "type": "boolean",
+      "default": "true",
+      "description": "Whether the popover should prevent interactivity of other elements\non the page when open and its positioning anchor is visible."
+    },
     "openOnHover": {
       "type": "boolean",
       "default": "false",

docs/reference/generated/select-root.json

@@ -40,7 +40,7 @@
     "modal": {
       "type": "boolean",
       "default": "true",
-      "description": "Whether the select should prevent outside clicks and lock page scroll when open."
+      "description": "Whether the select should prevent interactivity of other elements\non the page when open and its positioning anchor is visible."
     },
     "disabled": {
       "type": "boolean",

packages/react/src/menu/backdrop/MenuBackdrop.tsx

@@ -8,6 +8,7 @@ import { type CustomStyleHookMapping } from '../../utils/getStyleHookProps';
 import { popupStateMapping as baseMapping } from '../../utils/popupStateMapping';
 import type { TransitionStatus } from '../../utils/useTransitionStatus';
 import { transitionStatusMapping } from '../../utils/styleHookMapping';
+import { useEnhancedEffect } from '../../utils/useEnhancedEffect';
 
 const customStyleHookMapping: CustomStyleHookMapping<MenuBackdrop.State> = {
   ...baseMapping,
@@ -25,7 +26,15 @@ const MenuBackdrop = React.forwardRef(function MenuBackdrop(
   forwardedRef: React.ForwardedRef<HTMLDivElement>,
 ) {
   const { className, render, keepMounted = false, ...other } = props;
-  const { open, mounted, transitionStatus } = useMenuRootContext();
+
+  const { open, mounted, transitionStatus, setBackdropRendered } = useMenuRootContext();
+
+  useEnhancedEffect(() => {
+    setBackdropRendered(true);
+    return () => {
+      setBackdropRendered(false);
+    };
+  }, [setBackdropRendered]);
 
   const state: MenuBackdrop.State = React.useMemo(
     () => ({

packages/react/src/menu/checkbox-item/MenuCheckboxItem.test.tsx

@@ -29,6 +29,8 @@ const testRootContext: MenuRootContext = {
   modal: false,
   positionerRef: { current: null },
   allowMouseUpTriggerRef: { current: false },
+  backdropRendered: false,
+  setBackdropRendered: () => {},
 };
 
 describe('<Menu.CheckboxItem />', () => {

packages/react/src/menu/item/MenuItem.test.tsx

@@ -29,6 +29,8 @@ const testRootContext: MenuRootContext = {
   modal: false,
   positionerRef: { current: null },
   allowMouseUpTriggerRef: { current: false },
+  backdropRendered: false,
+  setBackdropRendered: () => {},
 };
 
 describe('<Menu.Item />', () => {

packages/react/src/menu/positioner/MenuPositioner.test.tsx

@@ -29,6 +29,8 @@ const testRootContext: MenuRootContext = {
   modal: false,
   positionerRef: { current: null },
   allowMouseUpTriggerRef: { current: false },
+  backdropRendered: false,
+  setBackdropRendered: () => {},
 };
 
 describe('<Menu.Positioner />', () => {

packages/react/src/menu/positioner/MenuPositioner.tsx

@@ -141,7 +141,9 @@ const MenuPositioner = React.forwardRef(function MenuPositioner(
 
   return (
     <MenuPositionerContext.Provider value={contextValue}>
-      {mounted && modal && parentNodeId === null && <InternalBackdrop inert={!open} />}
+      {mounted && modal && parentNodeId === null && (
+        <InternalBackdrop inert={!open || positioner.anchorHidden} />
+      )}
       <FloatingNode id={nodeId}>
         <CompositeList elementsRef={itemDomElements} labelsRef={itemLabels}>
           {renderElement()}

packages/react/src/menu/radio-item/MenuRadioItem.test.tsx

@@ -30,6 +30,8 @@ const testRootContext: MenuRootContext = {
   modal: false,
   positionerRef: { current: null },
   allowMouseUpTriggerRef: { current: false },
+  backdropRendered: false,
+  setBackdropRendered: () => {},
 };
 
 const testRadioGroupContext = {

packages/react/src/menu/root/MenuRoot.tsx

@@ -105,7 +105,8 @@ namespace MenuRoot {
      */
     loop?: boolean;
     /**
-     * Whether the menu should prevent outside clicks and lock page scroll when open.
+     * Whether the menu should prevent interactivity of other elements
+     * on the page when open and its positioning anchor is visible.
      * @default true
      */
     modal?: boolean;
@@ -191,7 +192,8 @@ MenuRoot.propTypes /* remove-proptypes */ = {
    */
   loop: PropTypes.bool,
   /**
-   * Whether the menu should prevent outside clicks and lock page scroll when open.
+   * Whether the menu should prevent interactivity of other elements
+   * on the page when open and its positioning anchor is visible.
    * @default true
    */
   modal: PropTypes.bool,

packages/react/src/menu/root/useMenuRoot.ts

@@ -49,6 +49,7 @@ export function useMenuRoot(parameters: useMenuRoot.Parameters): useMenuRoot.Ret
   const positionerRef = React.useRef<HTMLElement | null>(null);
   const [hoverEnabled, setHoverEnabled] = React.useState(true);
   const [activeIndex, setActiveIndex] = React.useState<number | null>(null);
+  const [backdropRendered, setBackdropRendered] = React.useState(false);
 
   const [open, setOpenUnwrapped] = useControlled({
     controlled: openParam,
@@ -66,7 +67,7 @@ export function useMenuRoot(parameters: useMenuRoot.Parameters): useMenuRoot.Ret
 
   const { mounted, setMounted, transitionStatus } = useTransitionStatus(open);
 
-  useScrollLock(open && modal, triggerElement);
+  useScrollLock(open && modal && backdropRendered, triggerElement);
 
   const setOpen = useEventCallback((nextOpen: boolean, event?: Event) => {
     onOpenChange?.(nextOpen, event);
@@ -106,7 +107,7 @@ export function useMenuRoot(parameters: useMenuRoot.Parameters): useMenuRoot.Ret
 
   const dismiss = useDismiss(floatingRootContext, {
     bubbles: closeParentOnEsc && nested,
-    outsidePressEvent: 'mousedown',
+    outsidePressEvent: modal || backdropRendered ? 'mousedown' : undefined,
   });
 
   const role = useRole(floatingRootContext, {
@@ -191,21 +192,21 @@ export function useMenuRoot(parameters: useMenuRoot.Parameters): useMenuRoot.Ret
       setPositionerElement,
       setTriggerElement,
       transitionStatus,
+      backdropRendered,
+      setBackdropRendered,
     }),
     [
       activeIndex,
       floatingRootContext,
       getItemProps,
       getPopupProps,
       getTriggerProps,
-      itemDomElements,
-      itemLabels,
       mounted,
       open,
-      positionerRef,
       setOpen,
-      transitionStatus,
       setPositionerElement,
+      transitionStatus,
+      backdropRendered,
     ],
   );
 }
@@ -289,5 +290,7 @@ export namespace useMenuRoot {
     setTriggerElement: (element: HTMLElement | null) => void;
     transitionStatus: TransitionStatus;
     allowMouseUpTriggerRef: React.RefObject<boolean>;
+    backdropRendered: boolean;
+    setBackdropRendered: (value: boolean) => void;
   }
 }

packages/react/src/menu/trigger/MenuTrigger.test.tsx

@@ -29,6 +29,8 @@ const testRootContext: MenuRootContext = {
   modal: false,
   positionerRef: { current: null },
   allowMouseUpTriggerRef: { current: false },
+  backdropRendered: false,
+  setBackdropRendered: () => {},
 };
 
 describe('<Menu.Trigger />', () => {

packages/react/src/popover/backdrop/PopoverBackdrop.tsx

@@ -8,6 +8,7 @@ import { type CustomStyleHookMapping } from '../../utils/getStyleHookProps';
 import { popupStateMapping as baseMapping } from '../../utils/popupStateMapping';
 import type { TransitionStatus } from '../../utils/useTransitionStatus';
 import { transitionStatusMapping } from '../../utils/styleHookMapping';
+import { useEnhancedEffect } from '../../utils/useEnhancedEffect';
 
 const customStyleHookMapping: CustomStyleHookMapping<PopoverBackdrop.State> = {
   ...baseMapping,
@@ -26,7 +27,14 @@ const PopoverBackdrop = React.forwardRef(function PopoverBackdrop(
 ) {
   const { className, render, keepMounted = false, ...other } = props;
 
-  const { open, mounted, transitionStatus } = usePopoverRootContext();
+  const { open, mounted, transitionStatus, setBackdropRendered } = usePopoverRootContext();
+
+  useEnhancedEffect(() => {
+    setBackdropRendered(true);
+    return () => {
+      setBackdropRendered(false);
+    };
+  }, [setBackdropRendered]);
 
   const state: PopoverBackdrop.State = React.useMemo(
     () => ({

packages/react/src/popover/positioner/PopoverPositioner.tsx

@@ -10,6 +10,7 @@ import { HTMLElementType } from '../../utils/proptypes';
 import type { BaseUIComponentProps } from '../../utils/types';
 import type { Side, Align } from '../../utils/useAnchorPositioning';
 import { popupStateMapping } from '../../utils/popupStateMapping';
+import { InternalBackdrop } from '../../utils/InternalBackdrop';
 
 /**
  * Positions the popover against the trigger.
@@ -38,15 +39,14 @@ const PopoverPositioner = React.forwardRef(function PopoverPositioner(
     ...otherProps
   } = props;
 
-  const { floatingRootContext, open, mounted, setPositionerElement, popupRef, openMethod } =
+  const { floatingRootContext, open, mounted, setPositionerElement, popupRef, openMethod, modal } =
     usePopoverRootContext();
 
   const positioner = usePopoverPositioner({
     anchor,
     floatingRootContext,
     positionMethod,
     mounted,
-    open,
     keepMounted,
     side,
     sideOffset,
@@ -89,6 +89,7 @@ const PopoverPositioner = React.forwardRef(function PopoverPositioner(
 
   return (
     <PopoverPositionerContext.Provider value={positioner}>
+      {mounted && modal && <InternalBackdrop inert={!open || positioner.anchorHidden} />}
       {renderElement()}
     </PopoverPositionerContext.Provider>
   );

packages/react/src/popover/positioner/usePopoverPositioner.tsx

@@ -9,11 +9,14 @@ import { mergeReactProps } from '../../utils/mergeReactProps';
 import { type Boundary, type Side, useAnchorPositioning } from '../../utils/useAnchorPositioning';
 import type { GenericHTMLProps } from '../../utils/types';
 import { InteractionType } from '../../utils/useEnhancedClickHandler';
+import { usePopoverRootContext } from '../root/PopoverRootContext';
 
 export function usePopoverPositioner(
   params: usePopoverPositioner.Parameters,
 ): usePopoverPositioner.ReturnValue {
-  const { open = false, keepMounted = false, mounted } = params;
+  const { keepMounted = false, mounted } = params;
+
+  const { open } = usePopoverRootContext();
 
   const {
     positionerStyles,
@@ -149,10 +152,6 @@ export namespace usePopoverPositioner {
      * Whether the popover is mounted.
      */
     mounted: boolean;
-    /**
-     * Whether the popover is currently open.
-     */
-    open?: boolean;
     /**
      * The floating root context.
      */

packages/react/src/popover/root/PopoverRoot.tsx

@@ -13,32 +13,13 @@ import { PortalContext } from '../../portal/PortalContext';
  * Documentation: [Base UI Popover](https://base-ui.com/react/components/popover)
  */
 const PopoverRoot: React.FC<PopoverRoot.Props> = function PopoverRoot(props) {
-  const { openOnHover = false, delay, closeDelay = 0 } = props;
+  const { openOnHover = false, modal = true, delay, closeDelay = 0 } = props;
 
   const delayWithDefault = delay ?? OPEN_DELAY;
 
-  const {
-    open,
-    setOpen,
-    mounted,
-    setMounted,
-    setTriggerElement,
-    positionerElement,
-    setPositionerElement,
-    popupRef,
-    instantType,
-    transitionStatus,
-    floatingRootContext,
-    getRootTriggerProps,
-    getRootPopupProps,
-    titleId,
-    setTitleId,
-    descriptionId,
-    setDescriptionId,
-    openMethod,
-    openReason,
-  } = usePopoverRoot({
+  const popoverRoot = usePopoverRoot({
     openOnHover,
+    modal,
     delay: delayWithDefault,
     closeDelay,
     open: props.open,
@@ -48,58 +29,18 @@ const PopoverRoot: React.FC<PopoverRoot.Props> = function PopoverRoot(props) {
 
   const contextValue: PopoverRootContext = React.useMemo(
     () => ({
+      ...popoverRoot,
       openOnHover,
       delay: delayWithDefault,
       closeDelay,
-      open,
-      setOpen,
-      setTriggerElement,
-      positionerElement,
-      setPositionerElement,
-      popupRef,
-      mounted,
-      setMounted,
-      instantType,
-      transitionStatus,
-      titleId,
-      setTitleId,
-      descriptionId,
-      setDescriptionId,
-      floatingRootContext,
-      getRootPopupProps,
-      getRootTriggerProps,
-      openMethod,
-      openReason,
+      modal,
     }),
-    [
-      openOnHover,
-      delayWithDefault,
-      closeDelay,
-      open,
-      setOpen,
-      setTriggerElement,
-      positionerElement,
-      setPositionerElement,
-      popupRef,
-      mounted,
-      setMounted,
-      instantType,
-      transitionStatus,
-      titleId,
-      setTitleId,
-      descriptionId,
-      setDescriptionId,
-      floatingRootContext,
-      getRootPopupProps,
-      getRootTriggerProps,
-      openMethod,
-      openReason,
-    ],
+    [popoverRoot, openOnHover, delayWithDefault, closeDelay, modal],
   );
 
   return (
     <PopoverRootContext.Provider value={contextValue}>
-      <PortalContext.Provider value={mounted}>{props.children}</PortalContext.Provider>
+      <PortalContext.Provider value={popoverRoot.mounted}>{props.children}</PortalContext.Provider>
     </PopoverRootContext.Provider>
   );
 };
@@ -143,6 +84,12 @@ PopoverRoot.propTypes /* remove-proptypes */ = {
    * @default 300
    */
   delay: PropTypes.number,
+  /**
+   * Whether the popover should prevent interactivity of other elements
+   * on the page when open and its positioning anchor is visible.
+   * @default true
+   */
+  modal: PropTypes.bool,
   /**
    * Event handler called when the popover is opened or closed.
    */

packages/react/src/popover/root/PopoverRootContext.ts

@@ -29,6 +29,9 @@ export interface PopoverRootContext {
   getRootPopupProps: (externalProps?: GenericHTMLProps) => GenericHTMLProps;
   openMethod: InteractionType | null;
   openReason: OpenChangeReason | null;
+  modal: boolean;
+  backdropRendered: boolean;
+  setBackdropRendered: React.Dispatch<React.SetStateAction<boolean>>;
 }
 
 export const PopoverRootContext = React.createContext<PopoverRootContext | undefined>(undefined);