[popups] Add data-closed style hook

docs/src/app/experiments/infotip.module.css

@@ -0,0 +1,10 @@
+.popup {
+  background: lightgray;
+  padding: 10px;
+  transition: opacity 0.5s;
+
+  &[data-entering],
+  &[data-exiting] {
+    opacity: 0;
+  }
+}

docs/src/app/experiments/infotips.tsx

@@ -0,0 +1,28 @@
+import * as React from 'react';
+import { Popover } from '@base-ui-components/react/popover';
+import classes from './infotip.module.css';
+
+function Infotip() {
+  return (
+    <Popover.Root openOnHover delay={0}>
+      <Popover.Trigger
+        style={{ width: 44, height: 44, background: 'lightgray', border: 'none' }}
+      >
+        ?
+      </Popover.Trigger>
+      <Popover.Positioner side="left" alignment="start" sideOffset={10}>
+        <Popover.Popup className={classes.popup}>Infotip</Popover.Popup>
+      </Popover.Positioner>
+    </Popover.Root>
+  );
+}
+
+export default function Page() {
+  return (
+    <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
+      {[...Array(20)].map((_, i) => (
+        <Infotip key={i} />
+      ))}
+    </div>
+  );
+}

packages/react/src/alert-dialog/popup/AlertDialogPopup.tsx

@@ -90,7 +90,7 @@ const AlertDialogPopup = React.forwardRef(function AlertDialogPopup(
   const state: AlertDialogPopup.State = React.useMemo(
     () => ({
       open,
-      mounted,
+      hidden: !mounted,
       nestedOpenDialogCount,
       transitionStatus,
     }),
@@ -158,7 +158,7 @@ namespace AlertDialogPopup {
 
   export interface State {
     open: boolean;
-    mounted: boolean;
+    hidden: boolean;
     nestedOpenDialogCount: number;
     transitionStatus: TransitionStatus;
   }

packages/react/src/dialog/popup/DialogPopup.tsx

@@ -93,7 +93,7 @@ const DialogPopup = React.forwardRef(function DialogPopup(
   const state: DialogPopup.State = React.useMemo(
     () => ({
       open,
-      mounted,
+      hidden: !mounted,
       nestedOpenDialogCount,
       transitionStatus,
     }),
@@ -161,7 +161,7 @@ namespace DialogPopup {
 
   export interface State {
     open: boolean;
-    mounted: boolean;
+    hidden: boolean;
     nestedOpenDialogCount: number;
     transitionStatus: TransitionStatus;
   }

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

@@ -87,7 +87,7 @@ const MenuPositioner = React.forwardRef(function MenuPositioner(
   const state: MenuPositioner.State = React.useMemo(
     () => ({
       open,
-      mounted,
+      hidden: !mounted,
       side: positioner.side,
       alignment: positioner.alignment,
     }),
@@ -155,7 +155,7 @@ const MenuPositioner = React.forwardRef(function MenuPositioner(
 export namespace MenuPositioner {
   export interface State {
     open: boolean;
-    mounted: boolean;
+    hidden: boolean;
     side: Side;
     alignment: 'start' | 'end' | 'center';
   }

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

@@ -48,7 +48,7 @@ const PopoverBackdrop = React.forwardRef(function PopoverBackdrop(
   const state: PopoverBackdrop.State = React.useMemo(
     () => ({
       open,
-      mounted,
+      hidden: !mounted,
       transitionStatus,
     }),
     [open, mounted, transitionStatus],
@@ -75,7 +75,7 @@ const PopoverBackdrop = React.forwardRef(function PopoverBackdrop(
 namespace PopoverBackdrop {
   export interface State {
     open: boolean;
-    mounted: boolean;
+    hidden: boolean;
     transitionStatus: TransitionStatus;
   }
 

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

@@ -72,7 +72,7 @@ const PopoverPositioner = React.forwardRef(function PopoverPositioner(
   const state: PopoverPositioner.State = React.useMemo(
     () => ({
       open,
-      mounted,
+      hidden: !mounted,
       side: positioner.side,
       alignment: positioner.alignment,
     }),
@@ -106,7 +106,7 @@ const PopoverPositioner = React.forwardRef(function PopoverPositioner(
 namespace PopoverPositioner {
   export interface State {
     open: boolean;
-    mounted: boolean;
+    hidden: boolean;
     side: Side;
     alignment: Alignment;
   }

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

@@ -46,7 +46,7 @@ const PreviewCardBackdrop = React.forwardRef(function PreviewCardBackdrop(
   const state: PreviewCardBackdrop.State = React.useMemo(
     () => ({
       open,
-      mounted,
+      hidden: !mounted,
       transitionStatus,
     }),
     [open, mounted, transitionStatus],
@@ -73,7 +73,7 @@ const PreviewCardBackdrop = React.forwardRef(function PreviewCardBackdrop(
 namespace PreviewCardBackdrop {
   export interface State {
     open: boolean;
-    mounted: boolean;
+    hidden: boolean;
     transitionStatus: TransitionStatus;
   }
 

packages/react/src/preview-card/positioner/PreviewCardPositioner.tsx

@@ -69,7 +69,7 @@ const PreviewCardPositioner = React.forwardRef(function PreviewCardPositioner(
   const state: PreviewCardPositioner.State = React.useMemo(
     () => ({
       open,
-      mounted,
+      hidden: !mounted,
       side: positioner.side,
       alignment: positioner.alignment,
     }),
@@ -120,7 +120,7 @@ const PreviewCardPositioner = React.forwardRef(function PreviewCardPositioner(
 namespace PreviewCardPositioner {
   export interface State {
     open: boolean;
-    mounted: boolean;
+    hidden: boolean;
     side: Side;
     alignment: Alignment;
   }

packages/react/src/select/backdrop/SelectBackdrop.tsx

@@ -49,7 +49,7 @@ const SelectBackdrop = React.forwardRef(function SelectBackdrop(
   const state: SelectBackdrop.State = React.useMemo(
     () => ({
       open,
-      mounted,
+      hidden: !mounted,
       transitionStatus,
     }),
     [open, mounted, transitionStatus],
@@ -89,7 +89,7 @@ namespace SelectBackdrop {
 
   export interface State {
     open: boolean;
-    mounted: boolean;
+    hidden: boolean;
     transitionStatus: TransitionStatus;
   }
 }

packages/react/src/select/positioner/SelectPositioner.tsx

@@ -72,7 +72,7 @@ const SelectPositioner = React.forwardRef(function SelectPositioner(
   const state: SelectPositioner.State = React.useMemo(
     () => ({
       open,
-      mounted,
+      hidden: !mounted,
       side: positioner.side,
       alignment: positioner.alignment,
     }),
@@ -103,7 +103,7 @@ const SelectPositioner = React.forwardRef(function SelectPositioner(
 namespace SelectPositioner {
   export interface State {
     open: boolean;
-    mounted: boolean;
+    hidden: boolean;
     side: Side | 'none';
     alignment: Alignment;
   }

packages/react/src/tooltip/positioner/TooltipPositioner.tsx

@@ -73,7 +73,7 @@ const TooltipPositioner = React.forwardRef(function TooltipPositioner(
   const state: TooltipPositioner.State = React.useMemo(
     () => ({
       open,
-      mounted,
+      hidden: !mounted,
       side: positioner.side,
       alignment: positioner.alignment,
     }),
@@ -115,7 +115,7 @@ const TooltipPositioner = React.forwardRef(function TooltipPositioner(
 namespace TooltipPositioner {
   export interface State {
     open: boolean;
-    mounted: boolean;
+    hidden: boolean;
     side: Side;
     alignment: Alignment;
   }

packages/react/src/utils/popupOpenStateMapping.ts

@@ -42,13 +42,13 @@ export const popupOpenStateMapping = {
     }
     return null;
   },
-  mounted(value) {
-    if (!value) {
+  hidden(value) {
+    if (value) {
       return POPUP_CLOSED_HOOK;
     }
     return null;
   },
 } satisfies CustomStyleHookMapping<{
   open: boolean;
-  mounted: boolean;
+  hidden: boolean;
 }>;