[popups] Use data-anchor-hidden attribute (#934)

docs/data/api/menu-positioner.json

@@ -31,7 +31,6 @@
       "default": "5"
     },
     "container": { "type": { "name": "union", "description": "HTML element<br>&#124;&nbsp;func" } },
-    "hideWhenDetached": { "type": { "name": "bool" }, "default": "false" },
     "keepMounted": { "type": { "name": "bool" }, "default": "false" },
     "positionMethod": {
       "type": { "name": "enum", "description": "'absolute'<br>&#124;&nbsp;'fixed'" },

docs/data/api/popover-positioner.json

@@ -31,7 +31,6 @@
       "default": "5"
     },
     "container": { "type": { "name": "union", "description": "HTML element<br>&#124;&nbsp;func" } },
-    "hideWhenDetached": { "type": { "name": "bool" }, "default": "false" },
     "keepMounted": { "type": { "name": "bool" }, "default": "false" },
     "positionMethod": {
       "type": { "name": "enum", "description": "'absolute'<br>&#124;&nbsp;'fixed'" },

docs/data/api/preview-card-positioner.json

@@ -31,7 +31,6 @@
       "default": "5"
     },
     "container": { "type": { "name": "union", "description": "HTML element<br>&#124;&nbsp;func" } },
-    "hideWhenDetached": { "type": { "name": "bool" }, "default": "false" },
     "keepMounted": { "type": { "name": "bool" }, "default": "false" },
     "positionMethod": {
       "type": { "name": "enum", "description": "'absolute'<br>&#124;&nbsp;'fixed'" },

docs/data/api/select-positioner.json

@@ -36,7 +36,6 @@
         "description": "(props, propName) => {\n  if (props[propName] == null) {\n    return new Error(`Prop '${propName}' is required but wasn't specified`);\n  }\n  if (typeof props[propName] !== 'object' || props[propName].nodeType !== 1) {\n    return new Error(`Expected prop '${propName}' to be of type Element`);\n  }\n  return null;\n}<br>&#124;&nbsp;{ current?: (props, propName) => {\n  if (props[propName] == null) {\n    return null;\n  }\n  if (typeof props[propName] !== 'object' || props[propName].nodeType !== 1) {\n    return new Error(`Expected prop '${propName}' to be of type Element`);\n  }\n  return null;\n} }"
       }
     },
-    "hideWhenDetached": { "type": { "name": "bool" }, "default": "false" },
     "positionMethod": {
       "type": { "name": "enum", "description": "'absolute'<br>&#124;&nbsp;'fixed'" },
       "default": "'absolute'"

docs/data/api/tooltip-positioner.json

@@ -31,7 +31,6 @@
       "default": "5"
     },
     "container": { "type": { "name": "union", "description": "HTML element<br>&#124;&nbsp;func" } },
-    "hideWhenDetached": { "type": { "name": "bool" }, "default": "false" },
     "keepMounted": { "type": { "name": "bool" }, "default": "false" },
     "positionMethod": {
       "type": { "name": "enum", "description": "'absolute'<br>&#124;&nbsp;'fixed'" },

docs/data/translations/api-docs/menu-positioner/menu-positioner.json

@@ -19,9 +19,6 @@
     "container": {
       "description": "The container element to which the Menu popup will be appended to."
     },
-    "hideWhenDetached": {
-      "description": "If <code>true</code>, the Menu will be hidden if it is detached from its anchor element due to differing clipping contexts."
-    },
     "keepMounted": {
       "description": "Whether the menu popup remains mounted in the DOM while closed."
     },

docs/data/translations/api-docs/popover-positioner/popover-positioner.json

@@ -19,9 +19,6 @@
       "description": "The padding between the popover element and the edges of the collision boundary to add whitespace between them to prevent them from touching."
     },
     "container": { "description": "The element the popover positioner element is appended to." },
-    "hideWhenDetached": {
-      "description": "Whether the popover element is hidden if it appears detached from its anchor element due to the anchor element being clipped (or hidden) from view."
-    },
     "keepMounted": {
       "description": "Whether the popover remains mounted in the DOM while closed."
     },

docs/data/translations/api-docs/preview-card-positioner/preview-card-positioner.json

@@ -23,9 +23,6 @@
     "container": {
       "description": "The container element to which the preview card popup will be appended to."
     },
-    "hideWhenDetached": {
-      "description": "If <code>true</code>, the preview card will be hidden if it is detached from its anchor element due to differing clipping contexts."
-    },
     "keepMounted": {
       "description": "If <code>true</code>, preview card stays mounted in the DOM when closed."
     },

docs/data/translations/api-docs/select-positioner/select-positioner.json

@@ -19,9 +19,6 @@
     "container": {
       "description": "The container element to which the Select popup will be appended to."
     },
-    "hideWhenDetached": {
-      "description": "If <code>true</code>, the Select will be hidden if it is detached from its anchor element due to differing clipping contexts."
-    },
     "positionMethod": {
       "description": "The CSS position method for positioning the Select popup element."
     },

docs/data/translations/api-docs/tooltip-positioner/tooltip-positioner.json

@@ -19,9 +19,6 @@
       "description": "The padding between the tooltip element and the edges of the collision boundary to add whitespace between them to prevent them from touching."
     },
     "container": { "description": "The container element the tooltip positioner is appended to." },
-    "hideWhenDetached": {
-      "description": "Whether the tooltip element is hidden if it appears detached from its anchor element due to the anchor element being clipped (or hidden) from view."
-    },
     "keepMounted": {
       "description": "Whether the tooltip remains mounted in the DOM while closed."
     },

docs/reference/generated/menu-positioner.json

@@ -39,11 +39,6 @@
       "type": "React.Ref | HTMLElement | null",
       "description": "The container element to which the Menu popup will be appended to."
     },
-    "hideWhenDetached": {
-      "type": "boolean",
-      "default": "false",
-      "description": "If `true`, the Menu will be hidden if it is detached from its anchor element due to\ndiffering clipping contexts."
-    },
     "keepMounted": {
       "type": "boolean",
       "default": "false",

docs/reference/generated/popover-positioner.json

@@ -39,11 +39,6 @@
       "type": "React.Ref | HTMLElement | null",
       "description": "The element the popover positioner element is appended to."
     },
-    "hideWhenDetached": {
-      "type": "boolean",
-      "default": "false",
-      "description": "Whether the popover element is hidden if it appears detached from its anchor element due\nto the anchor element being clipped (or hidden) from view."
-    },
     "keepMounted": {
       "type": "boolean",
       "default": "false",

docs/reference/generated/preview-card-positioner.json

@@ -39,11 +39,6 @@
       "type": "React.Ref | HTMLElement | null",
       "description": "The container element to which the preview card popup will be appended to."
     },
-    "hideWhenDetached": {
-      "type": "boolean",
-      "default": "false",
-      "description": "If `true`, the preview card will be hidden if it is detached from its anchor element due to\ndiffering clipping contexts."
-    },
     "keepMounted": {
       "type": "boolean",
       "default": "false",

docs/reference/generated/select-positioner.json

@@ -39,11 +39,6 @@
       "type": "React.Ref | HTMLElement | null",
       "description": "The container element to which the Select popup will be appended to."
     },
-    "hideWhenDetached": {
-      "type": "boolean",
-      "default": "false",
-      "description": "If `true`, the Select will be hidden if it is detached from its anchor element due to\ndiffering clipping contexts."
-    },
     "positionMethod": {
       "type": "'absolute' | 'fixed'",
       "default": "'absolute'",

docs/reference/generated/tooltip-positioner.json

@@ -39,11 +39,6 @@
       "type": "React.Ref | HTMLElement | null",
       "description": "The container element the tooltip positioner is appended to."
     },
-    "hideWhenDetached": {
-      "type": "boolean",
-      "default": "false",
-      "description": "Whether the tooltip element is hidden if it appears detached from its anchor element due\nto the anchor element being clipped (or hidden) from view."
-    },
     "keepMounted": {
       "type": "boolean",
       "default": "false",

docs/src/app/experiments/anchor-positioning.tsx

@@ -22,7 +22,6 @@ export default function AnchorPositioning() {
   const [alignOffset, setAlignOffset] = React.useState(0);
   const [collisionPadding, setCollisionPadding] = React.useState(5);
   const [arrowPadding, setArrowPadding] = React.useState(5);
-  const [hideWhenDetached, setHideWhenDetached] = React.useState(false);
   const [arrow, setArrow] = React.useState(true);
   const [hideArrowWhenUncentered, setHideArrowWhenUncentered] =
     React.useState(false);
@@ -44,7 +43,6 @@ export default function AnchorPositioning() {
     sideOffset,
     alignOffset,
     collisionPadding,
-    hideWhenDetached,
     sticky,
     arrowPadding,
     trackAnchor,
@@ -272,15 +270,6 @@ export default function AnchorPositioning() {
             Constrain size
           </label>
 
-          <label>
-            <input
-              type="checkbox"
-              checked={hideWhenDetached}
-              onChange={() => setHideWhenDetached((prev) => !prev)}
-            />
-            Hide when detached
-          </label>
-
           <label>
             <input
               type="checkbox"

packages/react/src/alert-dialog/backdrop/AlertDialogBackdrop.tsx

@@ -8,7 +8,7 @@ import { useComponentRenderer } from '../../utils/useComponentRenderer';
 import type { TransitionStatus } from '../../utils/useTransitionStatus';
 import type { BaseUIComponentProps } from '../../utils/types';
 import type { CustomStyleHookMapping } from '../../utils/getStyleHookProps';
-import { popupOpenStateMapping as baseMapping } from '../../utils/popupOpenStateMapping';
+import { popupStateMapping as baseMapping } from '../../utils/popupStateMapping';
 
 const customStyleHookMapping: CustomStyleHookMapping<AlertDialogBackdrop.State> = {
   ...baseMapping,

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

@@ -9,7 +9,7 @@ import { refType, HTMLElementType } from '../../utils/proptypes';
 import type { BaseUIComponentProps } from '../../utils/types';
 import type { TransitionStatus } from '../../utils/useTransitionStatus';
 import type { CustomStyleHookMapping } from '../../utils/getStyleHookProps';
-import { popupOpenStateMapping as baseMapping } from '../../utils/popupOpenStateMapping';
+import { popupStateMapping as baseMapping } from '../../utils/popupStateMapping';
 import { useForkRef } from '../../utils/useForkRef';
 import { InteractionType } from '../../utils/useEnhancedClickHandler';
 

packages/react/src/alert-dialog/trigger/AlertDialogTrigger.tsx

@@ -5,7 +5,7 @@ import { useAlertDialogRootContext } from '../root/AlertDialogRootContext';
 import { useComponentRenderer } from '../../utils/useComponentRenderer';
 import { useForkRef } from '../../utils/useForkRef';
 import type { BaseUIComponentProps } from '../../utils/types';
-import { triggerOpenStateMapping } from '../../utils/popupOpenStateMapping';
+import { triggerOpenStateMapping } from '../../utils/popupStateMapping';
 
 /**
  *

packages/react/src/dialog/backdrop/DialogBackdrop.tsx

@@ -8,7 +8,7 @@ import { useComponentRenderer } from '../../utils/useComponentRenderer';
 import { type TransitionStatus } from '../../utils/useTransitionStatus';
 import { type BaseUIComponentProps } from '../../utils/types';
 import { type CustomStyleHookMapping } from '../../utils/getStyleHookProps';
-import { popupOpenStateMapping as baseMapping } from '../../utils/popupOpenStateMapping';
+import { popupStateMapping as baseMapping } from '../../utils/popupStateMapping';
 
 const customStyleHookMapping: CustomStyleHookMapping<DialogBackdrop.State> = {
   ...baseMapping,

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

@@ -9,7 +9,7 @@ import { refType, HTMLElementType } from '../../utils/proptypes';
 import { type BaseUIComponentProps } from '../../utils/types';
 import { type TransitionStatus } from '../../utils/useTransitionStatus';
 import { type CustomStyleHookMapping } from '../../utils/getStyleHookProps';
-import { popupOpenStateMapping as baseMapping } from '../../utils/popupOpenStateMapping';
+import { popupStateMapping as baseMapping } from '../../utils/popupStateMapping';
 import { useForkRef } from '../../utils/useForkRef';
 import { InteractionType } from '../../utils/useEnhancedClickHandler';
 import { DialogPopupCssVars } from './DialogPopupCssVars';

packages/react/src/dialog/trigger/DialogTrigger.tsx

@@ -5,7 +5,7 @@ import { useDialogRootContext } from '../root/DialogRootContext';
 import { useComponentRenderer } from '../../utils/useComponentRenderer';
 import { useForkRef } from '../../utils/useForkRef';
 import type { BaseUIComponentProps } from '../../utils/types';
-import { triggerOpenStateMapping } from '../../utils/popupOpenStateMapping';
+import { triggerOpenStateMapping } from '../../utils/popupStateMapping';
 
 /**
  * A button that opens the dialog. Renders a `<button>` element.

packages/react/src/menu/arrow/MenuArrow.tsx

@@ -8,7 +8,7 @@ import { useComponentRenderer } from '../../utils/useComponentRenderer';
 import { useForkRef } from '../../utils/useForkRef';
 import type { Side, Align } from '../../utils/useAnchorPositioning';
 import type { BaseUIComponentProps } from '../../utils/types';
-import { popupOpenStateMapping } from '../../utils/popupOpenStateMapping';
+import { popupStateMapping } from '../../utils/popupStateMapping';
 
 /**
  * Renders an arrow that points to the center of the anchor element.
@@ -54,7 +54,7 @@ const MenuArrow = React.forwardRef(function MenuArrow(
     state,
     ref: mergedRef,
     extraProps: otherProps,
-    customStyleHookMapping: popupOpenStateMapping,
+    customStyleHookMapping: popupStateMapping,
   });
 
   return renderElement();

packages/react/src/menu/popup/MenuPopup.tsx

@@ -10,7 +10,7 @@ import { useForkRef } from '../../utils/useForkRef';
 import type { BaseUIComponentProps } from '../../utils/types';
 import type { CustomStyleHookMapping } from '../../utils/getStyleHookProps';
 import type { TransitionStatus } from '../../utils/useTransitionStatus';
-import { popupOpenStateMapping as baseMapping } from '../../utils/popupOpenStateMapping';
+import { popupStateMapping as baseMapping } from '../../utils/popupStateMapping';
 
 const customStyleHookMapping: CustomStyleHookMapping<MenuPopup.State> = {
   ...baseMapping,

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

@@ -16,7 +16,7 @@ import { useForkRef } from '../../utils/useForkRef';
 import { useMenuPositioner } from './useMenuPositioner';
 import { HTMLElementType } from '../../utils/proptypes';
 import { BaseUIComponentProps, GenericHTMLProps } from '../../utils/types';
-import { popupOpenStateMapping } from '../../utils/popupOpenStateMapping';
+import { popupStateMapping } from '../../utils/popupStateMapping';
 
 /**
  * Renders the element that positions the Menu popup.
@@ -46,7 +46,6 @@ const MenuPositioner = React.forwardRef(function MenuPositioner(
     collisionBoundary = 'clipping-ancestors',
     collisionPadding = 5,
     arrowPadding = 5,
-    hideWhenDetached = false,
     sticky = false,
     container,
     ...otherProps
@@ -79,7 +78,6 @@ const MenuPositioner = React.forwardRef(function MenuPositioner(
     arrowPadding,
     collisionBoundary,
     collisionPadding,
-    hideWhenDetached,
     sticky,
     nodeId,
   });
@@ -89,8 +87,9 @@ const MenuPositioner = React.forwardRef(function MenuPositioner(
       open,
       side: positioner.side,
       align: positioner.align,
+      anchorHidden: positioner.anchorHidden,
     }),
-    [open, positioner.side, positioner.align],
+    [open, positioner.side, positioner.align, positioner.anchorHidden],
   );
 
   const contextValue: MenuPositionerContext = React.useMemo(
@@ -120,7 +119,7 @@ const MenuPositioner = React.forwardRef(function MenuPositioner(
     render: render ?? 'div',
     className,
     state,
-    customStyleHookMapping: popupOpenStateMapping,
+    customStyleHookMapping: popupStateMapping,
     ref: mergedRef,
     extraProps: otherProps,
   });
@@ -151,14 +150,13 @@ const MenuPositioner = React.forwardRef(function MenuPositioner(
   );
 });
 
-export { MenuPositioner };
-
 export namespace MenuPositioner {
-  export type State = {
+  export interface State {
     open: boolean;
     side: Side;
     align: 'start' | 'end' | 'center';
-  };
+    anchorHidden: boolean;
+  }
 
   export interface Props
     extends useMenuPositioner.SharedParameters,
@@ -237,12 +235,6 @@ MenuPositioner.propTypes /* remove-proptypes */ = {
     HTMLElementType,
     PropTypes.func,
   ]),
-  /**
-   * If `true`, the Menu will be hidden if it is detached from its anchor element due to
-   * differing clipping contexts.
-   * @default false
-   */
-  hideWhenDetached: PropTypes.bool,
   /**
    * Whether the menu popup remains mounted in the DOM while closed.
    * @default false
@@ -274,3 +266,5 @@ MenuPositioner.propTypes /* remove-proptypes */ = {
    */
   sticky: PropTypes.bool,
 } as any;
+
+export { MenuPositioner };