[Menu, Popover, PreviewCard] Set pointer-events: none style on backdrops when hoverable

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

@@ -1,6 +1,7 @@
 import * as React from 'react';
 import { Menu } from '@base-ui-components/react/menu';
 import { createRenderer, describeConformance } from '#test-utils';
+import { screen } from '@mui/internal-test-utils';
 
 describe('<Menu.Backdrop />', () => {
   const { render } = createRenderer();
@@ -11,4 +12,40 @@ describe('<Menu.Backdrop />', () => {
       return render(<Menu.Root open>{node}</Menu.Root>);
     },
   }));
+
+  it('sets `pointer-events: none` style on backdrop if opened by hover', async () => {
+    const { user } = await render(
+      <Menu.Root delay={0} openOnHover>
+        <Menu.Trigger>Open</Menu.Trigger>
+        <Menu.Portal>
+          <Menu.Backdrop data-testid="backdrop" />
+          <Menu.Positioner>
+            <Menu.Popup />
+          </Menu.Positioner>
+        </Menu.Portal>
+      </Menu.Root>,
+    );
+
+    await user.hover(screen.getByText('Open'));
+
+    expect(screen.getByTestId('backdrop').style.pointerEvents).to.equal('none');
+  });
+
+  it('does not set `pointer-events: none` style on backdrop if opened by click', async () => {
+    const { user } = await render(
+      <Menu.Root delay={0} openOnHover>
+        <Menu.Trigger>Open</Menu.Trigger>
+        <Menu.Portal>
+          <Menu.Backdrop data-testid="backdrop" />
+          <Menu.Positioner>
+            <Menu.Popup />
+          </Menu.Positioner>
+        </Menu.Portal>
+      </Menu.Root>,
+    );
+
+    await user.click(screen.getByText('Open'));
+
+    expect(screen.getByTestId('backdrop').style.pointerEvents).not.to.equal('none');
+  });
 });

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 { mergeReactProps } from '../../utils/mergeReactProps';
 
 const customStyleHookMapping: CustomStyleHookMapping<MenuBackdrop.State> = {
   ...baseMapping,
@@ -25,7 +26,7 @@ const MenuBackdrop = React.forwardRef(function MenuBackdrop(
   forwardedRef: React.ForwardedRef<HTMLDivElement>,
 ) {
   const { className, render, ...other } = props;
-  const { open, mounted, transitionStatus } = useMenuRootContext();
+  const { open, mounted, transitionStatus, openReason } = useMenuRootContext();
 
   const state: MenuBackdrop.State = React.useMemo(
     () => ({
@@ -40,7 +41,11 @@ const MenuBackdrop = React.forwardRef(function MenuBackdrop(
     className,
     state,
     ref: forwardedRef,
-    extraProps: { role: 'presentation', hidden: !mounted, ...other },
+    extraProps: mergeReactProps<'div'>(other, {
+      role: 'presentation',
+      hidden: !mounted,
+      style: openReason === 'hover' ? { pointerEvents: 'none' } : {},
+    }),
     customStyleHookMapping,
   });
 

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

@@ -1,6 +1,7 @@
 import * as React from 'react';
 import { Popover } from '@base-ui-components/react/popover';
 import { createRenderer, describeConformance } from '#test-utils';
+import { fireEvent, screen } from '@mui/internal-test-utils';
 
 describe('<Popover.Backdrop />', () => {
   const { render } = createRenderer();
@@ -11,4 +12,27 @@ describe('<Popover.Backdrop />', () => {
       return render(<Popover.Root open>{node}</Popover.Root>);
     },
   }));
+
+  it('sets `pointer-events: none` style on backdrop if opened by hover', async () => {
+    const { user } = await render(
+      <Popover.Root delay={0} closeDelay={0} openOnHover>
+        <Popover.Trigger>Open</Popover.Trigger>
+        <Popover.Portal>
+          <Popover.Backdrop data-testid="backdrop" />
+          <Popover.Positioner>
+            <Popover.Popup />
+          </Popover.Positioner>
+        </Popover.Portal>
+      </Popover.Root>,
+    );
+
+    fireEvent.click(screen.getByText('Open'));
+
+    expect(screen.getByTestId('backdrop').style.pointerEvents).not.to.equal('none');
+
+    fireEvent.click(screen.getByText('Open'));
+    await user.hover(screen.getByText('Open'));
+
+    expect(screen.getByTestId('backdrop').style.pointerEvents).to.equal('none');
+  });
 });

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 { mergeReactProps } from '../../utils/mergeReactProps';
 
 const customStyleHookMapping: CustomStyleHookMapping<PopoverBackdrop.State> = {
   ...baseMapping,
@@ -26,7 +27,7 @@ const PopoverBackdrop = React.forwardRef(function PopoverBackdrop(
 ) {
   const { className, render, ...other } = props;
 
-  const { open, mounted, transitionStatus } = usePopoverRootContext();
+  const { open, mounted, transitionStatus, openReason } = usePopoverRootContext();
 
   const state: PopoverBackdrop.State = React.useMemo(
     () => ({
@@ -41,7 +42,11 @@ const PopoverBackdrop = React.forwardRef(function PopoverBackdrop(
     className,
     state,
     ref: forwardedRef,
-    extraProps: { role: 'presentation', hidden: !mounted, ...other },
+    extraProps: mergeReactProps<'div'>(other, {
+      role: 'presentation',
+      hidden: !mounted,
+      style: openReason === 'hover' ? { pointerEvents: 'none' } : {},
+    }),
     customStyleHookMapping,
   });
 

packages/react/src/preview-card/backdrop/PreviewCardBackdrop.test.tsx

@@ -1,5 +1,6 @@
 import * as React from 'react';
 import { PreviewCard } from '@base-ui-components/react/preview-card';
+import { screen } from '@mui/internal-test-utils';
 import { createRenderer, describeConformance } from '#test-utils';
 
 describe('<PreviewCard.Backdrop />', () => {
@@ -11,4 +12,22 @@ describe('<PreviewCard.Backdrop />', () => {
       return render(<PreviewCard.Root open>{node}</PreviewCard.Root>);
     },
   }));
+
+  it('sets `pointer-events: none` style', async () => {
+    const { user } = await render(
+      <PreviewCard.Root delay={0} closeDelay={0}>
+        <PreviewCard.Trigger>Open</PreviewCard.Trigger>
+        <PreviewCard.Portal>
+          <PreviewCard.Backdrop data-testid="backdrop" />
+          <PreviewCard.Positioner>
+            <PreviewCard.Popup />
+          </PreviewCard.Positioner>
+        </PreviewCard.Portal>
+      </PreviewCard.Root>,
+    );
+
+    await user.hover(screen.getByText('Open'));
+
+    expect(screen.getByTestId('backdrop').style.pointerEvents).to.equal('none');
+  });
 });

packages/react/src/preview-card/backdrop/PreviewCardBackdrop.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 { mergeReactProps } from '../../utils/mergeReactProps';
 
 const customStyleHookMapping: CustomStyleHookMapping<PreviewCardBackdrop.State> = {
   ...baseMapping,
@@ -41,7 +42,13 @@ const PreviewCardBackdrop = React.forwardRef(function PreviewCardBackdrop(
     className,
     state,
     ref: forwardedRef,
-    extraProps: { role: 'presentation', hidden: !mounted, ...other },
+    extraProps: mergeReactProps<'div'>(other, {
+      role: 'presentation',
+      hidden: !mounted,
+      style: {
+        pointerEvents: 'none',
+      },
+    }),
     customStyleHookMapping,
   });