diff --git a/docs/data/api/menu-positioner.json b/docs/data/api/menu-positioner.json
index a28c0e0dce..36bfc78afe 100644
--- a/docs/data/api/menu-positioner.json
+++ b/docs/data/api/menu-positioner.json
@@ -31,7 +31,6 @@
"default": "5"
},
"container": { "type": { "name": "union", "description": "HTML elementtrue, 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."
},
diff --git a/docs/data/translations/api-docs/popover-positioner/popover-positioner.json b/docs/data/translations/api-docs/popover-positioner/popover-positioner.json
index 66b20de227..0c71aca8b9 100644
--- a/docs/data/translations/api-docs/popover-positioner/popover-positioner.json
+++ b/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."
},
diff --git a/docs/data/translations/api-docs/preview-card-positioner/preview-card-positioner.json b/docs/data/translations/api-docs/preview-card-positioner/preview-card-positioner.json
index a681d78488..32380499ca 100644
--- a/docs/data/translations/api-docs/preview-card-positioner/preview-card-positioner.json
+++ b/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 true, the preview card will be hidden if it is detached from its anchor element due to differing clipping contexts."
- },
"keepMounted": {
"description": "If true, preview card stays mounted in the DOM when closed."
},
diff --git a/docs/data/translations/api-docs/select-positioner/select-positioner.json b/docs/data/translations/api-docs/select-positioner/select-positioner.json
index e6c801d704..a2773be66f 100644
--- a/docs/data/translations/api-docs/select-positioner/select-positioner.json
+++ b/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 true, 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."
},
diff --git a/docs/data/translations/api-docs/tooltip-positioner/tooltip-positioner.json b/docs/data/translations/api-docs/tooltip-positioner/tooltip-positioner.json
index 09f76feeb0..8384ce0c64 100644
--- a/docs/data/translations/api-docs/tooltip-positioner/tooltip-positioner.json
+++ b/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."
},
diff --git a/docs/reference/generated/menu-positioner.json b/docs/reference/generated/menu-positioner.json
index 72012d7cc4..39bca1fff8 100644
--- a/docs/reference/generated/menu-positioner.json
+++ b/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",
diff --git a/docs/reference/generated/popover-positioner.json b/docs/reference/generated/popover-positioner.json
index d7e50ed5d3..c72502ebbd 100644
--- a/docs/reference/generated/popover-positioner.json
+++ b/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",
diff --git a/docs/reference/generated/preview-card-positioner.json b/docs/reference/generated/preview-card-positioner.json
index da3076d253..0f086297d4 100644
--- a/docs/reference/generated/preview-card-positioner.json
+++ b/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",
diff --git a/docs/reference/generated/select-positioner.json b/docs/reference/generated/select-positioner.json
index 54eebac524..ebd95d034d 100644
--- a/docs/reference/generated/select-positioner.json
+++ b/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'",
diff --git a/docs/reference/generated/tooltip-positioner.json b/docs/reference/generated/tooltip-positioner.json
index de72697fdd..e171ee24b0 100644
--- a/docs/reference/generated/tooltip-positioner.json
+++ b/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",
diff --git a/docs/src/app/experiments/anchor-positioning.tsx b/docs/src/app/experiments/anchor-positioning.tsx
index c4dc6675cc..f2ca268dd5 100644
--- a/docs/src/app/experiments/anchor-positioning.tsx
+++ b/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
-
-
-
= {
...baseMapping,
diff --git a/packages/react/src/dialog/popup/DialogPopup.tsx b/packages/react/src/dialog/popup/DialogPopup.tsx
index b75bf0d9f3..75d116264b 100644
--- a/packages/react/src/dialog/popup/DialogPopup.tsx
+++ b/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';
diff --git a/packages/react/src/dialog/trigger/DialogTrigger.tsx b/packages/react/src/dialog/trigger/DialogTrigger.tsx
index bb231e187e..aa250163de 100644
--- a/packages/react/src/dialog/trigger/DialogTrigger.tsx
+++ b/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 `` element.
diff --git a/packages/react/src/menu/arrow/MenuArrow.tsx b/packages/react/src/menu/arrow/MenuArrow.tsx
index b9aa981639..c32ab40c66 100644
--- a/packages/react/src/menu/arrow/MenuArrow.tsx
+++ b/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();
diff --git a/packages/react/src/menu/popup/MenuPopup.tsx b/packages/react/src/menu/popup/MenuPopup.tsx
index f11e6a9ae0..0c8875a36e 100644
--- a/packages/react/src/menu/popup/MenuPopup.tsx
+++ b/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 = {
...baseMapping,
diff --git a/packages/react/src/menu/positioner/MenuPositioner.tsx b/packages/react/src/menu/positioner/MenuPositioner.tsx
index ebdc9da04c..40129d65c3 100644
--- a/packages/react/src/menu/positioner/MenuPositioner.tsx
+++ b/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 };
diff --git a/packages/react/src/menu/positioner/useMenuPositioner.ts b/packages/react/src/menu/positioner/useMenuPositioner.ts
index 21634f21a8..0b23384730 100644
--- a/packages/react/src/menu/positioner/useMenuPositioner.ts
+++ b/packages/react/src/menu/positioner/useMenuPositioner.ts
@@ -22,7 +22,7 @@ export function useMenuPositioner(
const {
positionerStyles,
arrowStyles,
- hidden,
+ anchorHidden,
arrowRef,
arrowUncentered,
renderedSide,
@@ -34,7 +34,7 @@ export function useMenuPositioner(
(externalProps = {}) => {
const hiddenStyles: React.CSSProperties = {};
- if ((keepMounted && !open) || hidden) {
+ if (keepMounted && !open) {
hiddenStyles.pointerEvents = 'none';
}
@@ -47,7 +47,7 @@ export function useMenuPositioner(
},
});
},
- [keepMounted, open, hidden, positionerStyles, mounted],
+ [keepMounted, open, positionerStyles, mounted],
);
return React.useMemo(
@@ -59,6 +59,7 @@ export function useMenuPositioner(
side: renderedSide,
align: renderedAlign,
floatingContext,
+ anchorHidden,
}),
[
getPositionerProps,
@@ -68,6 +69,7 @@ export function useMenuPositioner(
renderedSide,
renderedAlign,
floatingContext,
+ anchorHidden,
],
);
}
@@ -126,12 +128,6 @@ export namespace useMenuPositioner {
* @default 5
*/
collisionPadding?: Padding;
- /**
- * If `true`, the Menu will be hidden if it is detached from its anchor element due to
- * differing clipping contexts.
- * @default false
- */
- hideWhenDetached?: boolean;
/**
* Whether the menu popup remains mounted in the DOM while closed.
* @default false
@@ -195,5 +191,9 @@ export namespace useMenuPositioner {
* The floating context.
*/
floatingContext: FloatingContext;
+ /**
+ * Determines if the anchor element is hidden.
+ */
+ anchorHidden: boolean;
}
}
diff --git a/packages/react/src/menu/submenu-trigger/SubmenuTrigger.tsx b/packages/react/src/menu/submenu-trigger/SubmenuTrigger.tsx
index 1c82f45995..af23db2224 100644
--- a/packages/react/src/menu/submenu-trigger/SubmenuTrigger.tsx
+++ b/packages/react/src/menu/submenu-trigger/SubmenuTrigger.tsx
@@ -8,7 +8,7 @@ import { useBaseUiId } from '../../utils/useBaseUiId';
import { useComponentRenderer } from '../../utils/useComponentRenderer';
import { useSubmenuTrigger } from './useSubmenuTrigger';
import { useForkRef } from '../../utils/useForkRef';
-import { triggerOpenStateMapping } from '../../utils/popupOpenStateMapping';
+import { triggerOpenStateMapping } from '../../utils/popupStateMapping';
/**
*
diff --git a/packages/react/src/menu/trigger/MenuTrigger.tsx b/packages/react/src/menu/trigger/MenuTrigger.tsx
index c5bbfd7f69..97a838c5d0 100644
--- a/packages/react/src/menu/trigger/MenuTrigger.tsx
+++ b/packages/react/src/menu/trigger/MenuTrigger.tsx
@@ -4,7 +4,7 @@ import PropTypes from 'prop-types';
import { useFloatingTree } from '@floating-ui/react';
import { useMenuTrigger } from './useMenuTrigger';
import { useMenuRootContext } from '../root/MenuRootContext';
-import { pressableTriggerOpenStateMapping } from '../../utils/popupOpenStateMapping';
+import { pressableTriggerOpenStateMapping } from '../../utils/popupStateMapping';
import { useComponentRenderer } from '../../utils/useComponentRenderer';
import { BaseUIComponentProps } from '../../utils/types';
diff --git a/packages/react/src/popover/arrow/PopoverArrow.tsx b/packages/react/src/popover/arrow/PopoverArrow.tsx
index 41aad1c813..9e99e3125c 100644
--- a/packages/react/src/popover/arrow/PopoverArrow.tsx
+++ b/packages/react/src/popover/arrow/PopoverArrow.tsx
@@ -8,7 +8,7 @@ import { useForkRef } from '../../utils/useForkRef';
import { usePopoverArrow } from './usePopoverArrow';
import type { Align, Side } 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 PopoverArrow = React.forwardRef(function PopoverArrow(
state,
ref: mergedRef,
extraProps: otherProps,
- customStyleHookMapping: popupOpenStateMapping,
+ customStyleHookMapping: popupStateMapping,
});
return renderElement();
diff --git a/packages/react/src/popover/backdrop/PopoverBackdrop.tsx b/packages/react/src/popover/backdrop/PopoverBackdrop.tsx
index 47814a6c6f..7f24d99e90 100644
--- a/packages/react/src/popover/backdrop/PopoverBackdrop.tsx
+++ b/packages/react/src/popover/backdrop/PopoverBackdrop.tsx
@@ -8,7 +8,7 @@ import { HTMLElementType } from '../../utils/proptypes';
import { usePopoverBackdrop } from './usePopoverBackdrop';
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';
import type { TransitionStatus } from '../../utils/useTransitionStatus';
const customStyleHookMapping: CustomStyleHookMapping = {
diff --git a/packages/react/src/popover/popup/PopoverPopup.tsx b/packages/react/src/popover/popup/PopoverPopup.tsx
index 6a5cde8287..5799e2b382 100644
--- a/packages/react/src/popover/popup/PopoverPopup.tsx
+++ b/packages/react/src/popover/popup/PopoverPopup.tsx
@@ -11,7 +11,7 @@ import type { Side, Align } from '../../utils/useAnchorPositioning';
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';
import { InteractionType } from '../../utils/useEnhancedClickHandler';
import { refType } from '../../utils/proptypes';
diff --git a/packages/react/src/popover/positioner/PopoverPositioner.tsx b/packages/react/src/popover/positioner/PopoverPositioner.tsx
index caeee096e1..63f1c9121a 100644
--- a/packages/react/src/popover/positioner/PopoverPositioner.tsx
+++ b/packages/react/src/popover/positioner/PopoverPositioner.tsx
@@ -10,7 +10,7 @@ import { PopoverPositionerContext } from './PopoverPositionerContext';
import { HTMLElementType } from '../../utils/proptypes';
import type { BaseUIComponentProps } from '../../utils/types';
import type { Side, Align } from '../../utils/useAnchorPositioning';
-import { popupOpenStateMapping } from '../../utils/popupOpenStateMapping';
+import { popupStateMapping } from '../../utils/popupStateMapping';
/**
* The popover positioner element.
@@ -41,7 +41,6 @@ const PopoverPositioner = React.forwardRef(function PopoverPositioner(
collisionBoundary = 'clipping-ancestors',
collisionPadding = 5,
arrowPadding = 5,
- hideWhenDetached = false,
sticky = false,
...otherProps
} = props;
@@ -63,7 +62,6 @@ const PopoverPositioner = React.forwardRef(function PopoverPositioner(
arrowPadding,
collisionBoundary,
collisionPadding,
- hideWhenDetached,
sticky,
popupRef,
openMethod,
@@ -74,8 +72,9 @@ const PopoverPositioner = React.forwardRef(function PopoverPositioner(
open,
side: positioner.side,
align: positioner.align,
+ anchorHidden: positioner.anchorHidden,
}),
- [open, positioner.side, positioner.align],
+ [open, positioner.side, positioner.align, positioner.anchorHidden],
);
const mergedRef = useForkRef(forwardedRef, setPositionerElement);
@@ -87,7 +86,7 @@ const PopoverPositioner = React.forwardRef(function PopoverPositioner(
state,
ref: mergedRef,
extraProps: otherProps,
- customStyleHookMapping: popupOpenStateMapping,
+ customStyleHookMapping: popupStateMapping,
});
const shouldRender = keepMounted || mounted;
@@ -107,6 +106,7 @@ namespace PopoverPositioner {
open: boolean;
side: Side;
align: Align;
+ anchorHidden: boolean;
}
export interface Props
@@ -192,12 +192,6 @@ PopoverPositioner.propTypes /* remove-proptypes */ = {
HTMLElementType,
PropTypes.func,
]),
- /**
- * 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.
- * @default false
- */
- hideWhenDetached: PropTypes.bool,
/**
* Whether the popover remains mounted in the DOM while closed.
* @default false
diff --git a/packages/react/src/popover/positioner/usePopoverPositioner.tsx b/packages/react/src/popover/positioner/usePopoverPositioner.tsx
index a71e4ae269..aec47bdc3a 100644
--- a/packages/react/src/popover/positioner/usePopoverPositioner.tsx
+++ b/packages/react/src/popover/positioner/usePopoverPositioner.tsx
@@ -18,7 +18,7 @@ export function usePopoverPositioner(
const {
positionerStyles,
arrowStyles,
- hidden,
+ anchorHidden,
arrowRef,
arrowUncentered,
renderedSide,
@@ -31,7 +31,7 @@ export function usePopoverPositioner(
(externalProps = {}) => {
const hiddenStyles: React.CSSProperties = {};
- if ((keepMounted && !open) || hidden) {
+ if (keepMounted && !open) {
hiddenStyles.pointerEvents = 'none';
}
@@ -44,7 +44,7 @@ export function usePopoverPositioner(
},
});
},
- [keepMounted, open, hidden, mounted, positionerStyles],
+ [keepMounted, open, mounted, positionerStyles],
);
return React.useMemo(
@@ -56,6 +56,7 @@ export function usePopoverPositioner(
side: renderedSide,
align: renderedAlign,
positionerContext,
+ anchorHidden,
}),
[
getPositionerProps,
@@ -65,6 +66,7 @@ export function usePopoverPositioner(
renderedSide,
renderedAlign,
positionerContext,
+ anchorHidden,
],
);
}
@@ -116,12 +118,6 @@ export namespace usePopoverPositioner {
* @default 5
*/
collisionPadding?: Padding;
- /**
- * 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.
- * @default false
- */
- hideWhenDetached?: boolean;
/**
* Whether to allow the popover to remain stuck in view while the anchor element is scrolled out
* of view.
@@ -199,5 +195,9 @@ export namespace usePopoverPositioner {
* The floating context.
*/
positionerContext: FloatingContext;
+ /**
+ * Determines if the anchor element is hidden.
+ */
+ anchorHidden: boolean;
}
}
diff --git a/packages/react/src/popover/trigger/PopoverTrigger.tsx b/packages/react/src/popover/trigger/PopoverTrigger.tsx
index 85ae6c6d38..aa55bc93c1 100644
--- a/packages/react/src/popover/trigger/PopoverTrigger.tsx
+++ b/packages/react/src/popover/trigger/PopoverTrigger.tsx
@@ -8,7 +8,7 @@ import type { BaseUIComponentProps } from '../../utils/types';
import {
triggerOpenStateMapping,
pressableTriggerOpenStateMapping,
-} from '../../utils/popupOpenStateMapping';
+} from '../../utils/popupStateMapping';
import { CustomStyleHookMapping } from '../../utils/getStyleHookProps';
/**
diff --git a/packages/react/src/preview-card/arrow/PreviewCardArrow.tsx b/packages/react/src/preview-card/arrow/PreviewCardArrow.tsx
index d380157d6b..b03539af44 100644
--- a/packages/react/src/preview-card/arrow/PreviewCardArrow.tsx
+++ b/packages/react/src/preview-card/arrow/PreviewCardArrow.tsx
@@ -8,7 +8,7 @@ import { useForkRef } from '../../utils/useForkRef';
import { usePreviewCardRootContext } from '../root/PreviewCardContext';
import type { BaseUIComponentProps } from '../../utils/types';
import type { Align, Side } from '../../utils/useAnchorPositioning';
-import { popupOpenStateMapping } from '../../utils/popupOpenStateMapping';
+import { popupStateMapping } from '../../utils/popupStateMapping';
/**
*
@@ -52,7 +52,7 @@ const PreviewCardArrow = React.forwardRef(function PreviewCardArrow(
state,
ref: mergedRef,
extraProps: otherProps,
- customStyleHookMapping: popupOpenStateMapping,
+ customStyleHookMapping: popupStateMapping,
});
return renderElement();
diff --git a/packages/react/src/preview-card/backdrop/PreviewCardBackdrop.tsx b/packages/react/src/preview-card/backdrop/PreviewCardBackdrop.tsx
index a00c6303a3..c8c8cd4037 100644
--- a/packages/react/src/preview-card/backdrop/PreviewCardBackdrop.tsx
+++ b/packages/react/src/preview-card/backdrop/PreviewCardBackdrop.tsx
@@ -8,7 +8,7 @@ import { usePreviewCardBackdrop } from './usePreviewCardBackdrop';
import { HTMLElementType } from '../../utils/proptypes';
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';
import type { TransitionStatus } from '../../utils/useTransitionStatus';
const customStyleHookMapping: CustomStyleHookMapping = {
diff --git a/packages/react/src/preview-card/popup/PreviewCardPopup.tsx b/packages/react/src/preview-card/popup/PreviewCardPopup.tsx
index d1eaac1b23..1c0c82a127 100644
--- a/packages/react/src/preview-card/popup/PreviewCardPopup.tsx
+++ b/packages/react/src/preview-card/popup/PreviewCardPopup.tsx
@@ -9,7 +9,7 @@ import { useForkRef } from '../../utils/useForkRef';
import type { CustomStyleHookMapping } from '../../utils/getStyleHookProps';
import type { Align, Side } from '../../utils/useAnchorPositioning';
import type { BaseUIComponentProps } from '../../utils/types';
-import { popupOpenStateMapping as baseMapping } from '../../utils/popupOpenStateMapping';
+import { popupStateMapping as baseMapping } from '../../utils/popupStateMapping';
import type { TransitionStatus } from '../../utils/useTransitionStatus';
const customStyleHookMapping: CustomStyleHookMapping = {
diff --git a/packages/react/src/preview-card/positioner/PreviewCardPositioner.tsx b/packages/react/src/preview-card/positioner/PreviewCardPositioner.tsx
index 134e0ef5c4..6d5ee9cec1 100644
--- a/packages/react/src/preview-card/positioner/PreviewCardPositioner.tsx
+++ b/packages/react/src/preview-card/positioner/PreviewCardPositioner.tsx
@@ -10,7 +10,7 @@ import { useForkRef } from '../../utils/useForkRef';
import { HTMLElementType } from '../../utils/proptypes';
import type { Side, Align } from '../../utils/useAnchorPositioning';
import type { BaseUIComponentProps } from '../../utils/types';
-import { popupOpenStateMapping } from '../../utils/popupOpenStateMapping';
+import { popupStateMapping } from '../../utils/popupStateMapping';
/**
*
@@ -38,7 +38,6 @@ const PreviewCardPositioner = React.forwardRef(function PreviewCardPositioner(
collisionBoundary = 'clipping-ancestors',
collisionPadding = 5,
arrowPadding = 5,
- hideWhenDetached = false,
sticky = false,
keepMounted = false,
container,
@@ -62,7 +61,6 @@ const PreviewCardPositioner = React.forwardRef(function PreviewCardPositioner(
arrowPadding,
collisionBoundary,
collisionPadding,
- hideWhenDetached,
sticky,
});
@@ -71,8 +69,9 @@ const PreviewCardPositioner = React.forwardRef(function PreviewCardPositioner(
open,
side: positioner.side,
align: positioner.align,
+ anchorHidden: positioner.anchorHidden,
}),
- [open, positioner.side, positioner.align],
+ [open, positioner.side, positioner.align, positioner.anchorHidden],
);
const contextValue: PreviewCardPositionerContext = React.useMemo(
@@ -101,7 +100,7 @@ const PreviewCardPositioner = React.forwardRef(function PreviewCardPositioner(
state,
ref: mergedRef,
extraProps: otherProps,
- customStyleHookMapping: popupOpenStateMapping,
+ customStyleHookMapping: popupStateMapping,
});
const shouldRender = keepMounted || mounted;
@@ -121,6 +120,7 @@ namespace PreviewCardPositioner {
open: boolean;
side: Side;
align: Align;
+ anchorHidden: boolean;
}
export interface Props
@@ -200,12 +200,6 @@ PreviewCardPositioner.propTypes /* remove-proptypes */ = {
HTMLElementType,
PropTypes.func,
]),
- /**
- * If `true`, the preview card will be hidden if it is detached from its anchor element due to
- * differing clipping contexts.
- * @default false
- */
- hideWhenDetached: PropTypes.bool,
/**
* If `true`, preview card stays mounted in the DOM when closed.
* @default false
diff --git a/packages/react/src/preview-card/positioner/usePreviewCardPositioner.ts b/packages/react/src/preview-card/positioner/usePreviewCardPositioner.ts
index c3337c3ab7..d4626135ea 100644
--- a/packages/react/src/preview-card/positioner/usePreviewCardPositioner.ts
+++ b/packages/react/src/preview-card/positioner/usePreviewCardPositioner.ts
@@ -20,7 +20,7 @@ export function usePreviewCardPositioner(
const {
positionerStyles,
arrowStyles,
- hidden,
+ anchorHidden,
arrowRef,
arrowUncentered,
renderedSide,
@@ -33,7 +33,7 @@ export function usePreviewCardPositioner(
(externalProps = {}) => {
const hiddenStyles: React.CSSProperties = {};
- if ((keepMounted && !open) || hidden) {
+ if (keepMounted && !open) {
hiddenStyles.pointerEvents = 'none';
}
@@ -46,7 +46,7 @@ export function usePreviewCardPositioner(
},
});
},
- [positionerStyles, open, keepMounted, hidden, mounted],
+ [positionerStyles, open, keepMounted, mounted],
);
return React.useMemo(
@@ -58,6 +58,7 @@ export function usePreviewCardPositioner(
side: renderedSide,
align: renderedAlign,
positionerContext,
+ anchorHidden,
}),
[
getPositionerProps,
@@ -67,6 +68,7 @@ export function usePreviewCardPositioner(
renderedSide,
renderedAlign,
positionerContext,
+ anchorHidden,
],
);
}
@@ -121,12 +123,6 @@ export namespace usePreviewCardPositioner {
* @default 5
*/
collisionPadding?: Padding;
- /**
- * If `true`, the preview card will be hidden if it is detached from its anchor element due to
- * differing clipping contexts.
- * @default false
- */
- hideWhenDetached?: boolean;
/**
* If `true`, allow the preview card to remain in stuck view while the anchor element is scrolled
* out of view.
@@ -196,5 +192,9 @@ export namespace usePreviewCardPositioner {
* The floating context.
*/
positionerContext: FloatingContext;
+ /**
+ * Determines if the anchor element is hidden.
+ */
+ anchorHidden: boolean;
}
}
diff --git a/packages/react/src/preview-card/trigger/PreviewCardTrigger.tsx b/packages/react/src/preview-card/trigger/PreviewCardTrigger.tsx
index aac0344dcf..3943489b22 100644
--- a/packages/react/src/preview-card/trigger/PreviewCardTrigger.tsx
+++ b/packages/react/src/preview-card/trigger/PreviewCardTrigger.tsx
@@ -5,7 +5,7 @@ import { useComponentRenderer } from '../../utils/useComponentRenderer';
import { usePreviewCardRootContext } from '../root/PreviewCardContext';
import { useForkRef } from '../../utils/useForkRef';
import type { BaseUIComponentProps } from '../../utils/types';
-import { triggerOpenStateMapping } from '../../utils/popupOpenStateMapping';
+import { triggerOpenStateMapping } from '../../utils/popupStateMapping';
/**
*
diff --git a/packages/react/src/select/arrow/SelectArrow.tsx b/packages/react/src/select/arrow/SelectArrow.tsx
index 96a081ad2b..ebf0e2c523 100644
--- a/packages/react/src/select/arrow/SelectArrow.tsx
+++ b/packages/react/src/select/arrow/SelectArrow.tsx
@@ -7,7 +7,7 @@ import { useComponentRenderer } from '../../utils/useComponentRenderer';
import { useForkRef } from '../../utils/useForkRef';
import { mergeReactProps } from '../../utils/mergeReactProps';
import type { BaseUIComponentProps } from '../../utils/types';
-import { popupOpenStateMapping } from '../../utils/popupOpenStateMapping';
+import { popupStateMapping } from '../../utils/popupStateMapping';
import type { Align, Side } from '../../utils/useAnchorPositioning';
/**
@@ -59,7 +59,7 @@ const SelectArrow = React.forwardRef(function SelectArrow(
state,
ref: mergedRef,
extraProps: otherProps,
- customStyleHookMapping: popupOpenStateMapping,
+ customStyleHookMapping: popupStateMapping,
});
if (alignOptionToTrigger) {
diff --git a/packages/react/src/select/backdrop/SelectBackdrop.tsx b/packages/react/src/select/backdrop/SelectBackdrop.tsx
index b534053500..84161087c7 100644
--- a/packages/react/src/select/backdrop/SelectBackdrop.tsx
+++ b/packages/react/src/select/backdrop/SelectBackdrop.tsx
@@ -7,12 +7,12 @@ import { useComponentRenderer } from '../../utils/useComponentRenderer';
import { HTMLElementType } from '../../utils/proptypes';
import { useSelectRootContext } from '../root/SelectRootContext';
import { useSelectBackdrop } from './useSelectBackdrop';
-import { popupOpenStateMapping } from '../../utils/popupOpenStateMapping';
+import { popupStateMapping } from '../../utils/popupStateMapping';
import type { CustomStyleHookMapping } from '../../utils/getStyleHookProps';
import type { TransitionStatus } from '../../utils/useTransitionStatus';
const customStyleHookMapping: CustomStyleHookMapping = {
- ...popupOpenStateMapping,
+ ...popupStateMapping,
transitionStatus(value): Record | null {
if (value === 'entering') {
return { 'data-starting-style': '' };
diff --git a/packages/react/src/select/popup/SelectPopup.tsx b/packages/react/src/select/popup/SelectPopup.tsx
index 36726998dc..5389eb64ef 100644
--- a/packages/react/src/select/popup/SelectPopup.tsx
+++ b/packages/react/src/select/popup/SelectPopup.tsx
@@ -4,7 +4,7 @@ import PropTypes from 'prop-types';
import { FloatingFocusManager, type Side } from '@floating-ui/react';
import type { BaseUIComponentProps } from '../../utils/types';
import { useSelectRootContext } from '../root/SelectRootContext';
-import { popupOpenStateMapping } from '../../utils/popupOpenStateMapping';
+import { popupStateMapping } from '../../utils/popupStateMapping';
import { useComponentRenderer } from '../../utils/useComponentRenderer';
import { useForkRef } from '../../utils/useForkRef';
import type { CustomStyleHookMapping } from '../../utils/getStyleHookProps';
@@ -13,7 +13,7 @@ import type { TransitionStatus } from '../../utils/useTransitionStatus';
import { useSelectPositionerContext } from '../positioner/SelectPositionerContext';
const customStyleHookMapping: CustomStyleHookMapping = {
- ...popupOpenStateMapping,
+ ...popupStateMapping,
transitionStatus(value): Record | null {
if (value === 'entering') {
return { 'data-starting-style': '' };
diff --git a/packages/react/src/select/positioner/SelectPositioner.tsx b/packages/react/src/select/positioner/SelectPositioner.tsx
index 4e51922d2e..f0ed58a1c1 100644
--- a/packages/react/src/select/positioner/SelectPositioner.tsx
+++ b/packages/react/src/select/positioner/SelectPositioner.tsx
@@ -7,7 +7,7 @@ import { useSelectRootContext } from '../root/SelectRootContext';
import { CompositeList } from '../../composite/list/CompositeList';
import type { BaseUIComponentProps } from '../../utils/types';
import { useComponentRenderer } from '../../utils/useComponentRenderer';
-import { popupOpenStateMapping } from '../../utils/popupOpenStateMapping';
+import { popupStateMapping } from '../../utils/popupStateMapping';
import { useSelectPositioner } from './useSelectPositioner';
import type { Align, Side } from '../../utils/useAnchorPositioning';
import { SelectPositionerContext } from './SelectPositionerContext';
@@ -38,7 +38,6 @@ const SelectPositioner = React.forwardRef(function SelectPositioner(
collisionBoundary = 'clipping-ancestors',
collisionPadding,
arrowPadding = 5,
- hideWhenDetached = false,
sticky = false,
trackAnchor = true,
container,
@@ -61,7 +60,6 @@ const SelectPositioner = React.forwardRef(function SelectPositioner(
arrowPadding,
collisionBoundary,
collisionPadding,
- hideWhenDetached,
sticky,
trackAnchor,
allowAxisFlip: false,
@@ -74,8 +72,9 @@ const SelectPositioner = React.forwardRef(function SelectPositioner(
open,
side: positioner.side,
align: positioner.align,
+ anchorHidden: positioner.anchorHidden,
}),
- [open, positioner.side, positioner.align],
+ [open, positioner.side, positioner.align, positioner.anchorHidden],
);
const { renderElement } = useComponentRenderer({
@@ -84,7 +83,7 @@ const SelectPositioner = React.forwardRef(function SelectPositioner(
ref: mergedRef,
className,
state,
- customStyleHookMapping: popupOpenStateMapping,
+ customStyleHookMapping: popupStateMapping,
extraProps: otherProps,
});
@@ -104,6 +103,7 @@ namespace SelectPositioner {
open: boolean;
side: Side | 'none';
align: Align;
+ anchorHidden: boolean;
}
export interface Props
@@ -248,12 +248,6 @@ SelectPositioner.propTypes /* remove-proptypes */ = {
},
}),
]),
- /**
- * If `true`, the Select will be hidden if it is detached from its anchor element due to
- * differing clipping contexts.
- * @default false
- */
- hideWhenDetached: PropTypes.bool,
/**
* The CSS position method for positioning the Select popup element.
* @default 'absolute'
diff --git a/packages/react/src/select/positioner/useSelectPositioner.ts b/packages/react/src/select/positioner/useSelectPositioner.ts
index 30527c677d..2d6a78e706 100644
--- a/packages/react/src/select/positioner/useSelectPositioner.ts
+++ b/packages/react/src/select/positioner/useSelectPositioner.ts
@@ -29,7 +29,7 @@ export function useSelectPositioner(
const {
positionerStyles: enabledPositionerStyles,
arrowStyles,
- hidden,
+ anchorHidden,
arrowRef,
arrowUncentered,
renderedSide,
@@ -53,7 +53,7 @@ export function useSelectPositioner(
(externalProps = {}) => {
const hiddenStyles: React.CSSProperties = {};
- if (!open || hidden) {
+ if (!open) {
hiddenStyles.pointerEvents = 'none';
}
@@ -66,7 +66,7 @@ export function useSelectPositioner(
},
});
},
- [open, hidden, mounted, positionerStyles],
+ [open, mounted, positionerStyles],
);
const positioner = React.useMemo(
@@ -79,6 +79,7 @@ export function useSelectPositioner(
align: renderedAlign,
positionerContext,
isPositioned,
+ anchorHidden,
}) as const,
[
alignOptionToTrigger,
@@ -89,6 +90,7 @@ export function useSelectPositioner(
positionerContext,
renderedAlign,
renderedSide,
+ anchorHidden,
],
);
@@ -151,12 +153,6 @@ export namespace useSelectPositioner {
* @default 5
*/
collisionPadding?: Padding;
- /**
- * If `true`, the Select will be hidden if it is detached from its anchor element due to
- * differing clipping contexts.
- * @default false
- */
- hideWhenDetached?: boolean;
/**
* Whether the select popup remains mounted in the DOM while closed.
* @default true
@@ -258,6 +254,10 @@ export namespace useSelectPositioner {
* Whether the Select popup has been positioned.
*/
isPositioned: boolean;
+ /**
+ * Determines if the anchor element is hidden.
+ */
+ anchorHidden: boolean;
};
}
}
diff --git a/packages/react/src/select/trigger/SelectTrigger.tsx b/packages/react/src/select/trigger/SelectTrigger.tsx
index a139f68f4a..81de2be8af 100644
--- a/packages/react/src/select/trigger/SelectTrigger.tsx
+++ b/packages/react/src/select/trigger/SelectTrigger.tsx
@@ -6,7 +6,7 @@ import { useSelectRootContext } from '../root/SelectRootContext';
import { useComponentRenderer } from '../../utils/useComponentRenderer';
import { BaseUIComponentProps } from '../../utils/types';
import { useFieldRootContext } from '../../field/root/FieldRootContext';
-import { pressableTriggerOpenStateMapping } from '../../utils/popupOpenStateMapping';
+import { pressableTriggerOpenStateMapping } from '../../utils/popupStateMapping';
/**
*
diff --git a/packages/react/src/tooltip/arrow/TooltipArrow.tsx b/packages/react/src/tooltip/arrow/TooltipArrow.tsx
index 9c3753976f..c2db87d13f 100644
--- a/packages/react/src/tooltip/arrow/TooltipArrow.tsx
+++ b/packages/react/src/tooltip/arrow/TooltipArrow.tsx
@@ -7,7 +7,7 @@ import { useTooltipPositionerContext } from '../positioner/TooltipPositionerCont
import { useTooltipArrow } from './useTooltipArrow';
import type { BaseUIComponentProps } from '../../utils/types';
import type { Side, Align } from '../../utils/useAnchorPositioning';
-import { popupOpenStateMapping } from '../../utils/popupOpenStateMapping';
+import { popupStateMapping } from '../../utils/popupStateMapping';
/**
* Renders an arrow that points to the center of the anchor element.
@@ -52,7 +52,7 @@ const TooltipArrow = React.forwardRef(function TooltipArrow(
className,
ref: mergedRef,
extraProps: otherProps,
- customStyleHookMapping: popupOpenStateMapping,
+ customStyleHookMapping: popupStateMapping,
});
return renderElement();
diff --git a/packages/react/src/tooltip/popup/TooltipPopup.tsx b/packages/react/src/tooltip/popup/TooltipPopup.tsx
index f6a53c8bfe..10802771d4 100644
--- a/packages/react/src/tooltip/popup/TooltipPopup.tsx
+++ b/packages/react/src/tooltip/popup/TooltipPopup.tsx
@@ -8,7 +8,7 @@ import { useForkRef } from '../../utils/useForkRef';
import type { BaseUIComponentProps } from '../../utils/types';
import type { Align, Side } from '../../utils/useAnchorPositioning';
import type { CustomStyleHookMapping } from '../../utils/getStyleHookProps';
-import { popupOpenStateMapping as baseMapping } from '../../utils/popupOpenStateMapping';
+import { popupStateMapping as baseMapping } from '../../utils/popupStateMapping';
import type { TransitionStatus } from '../../utils/useTransitionStatus';
const customStyleHookMapping: CustomStyleHookMapping = {
diff --git a/packages/react/src/tooltip/positioner/TooltipPositioner.tsx b/packages/react/src/tooltip/positioner/TooltipPositioner.tsx
index 32c207b475..5954e581e0 100644
--- a/packages/react/src/tooltip/positioner/TooltipPositioner.tsx
+++ b/packages/react/src/tooltip/positioner/TooltipPositioner.tsx
@@ -10,7 +10,7 @@ import { TooltipPositionerContext } from './TooltipPositionerContext';
import { useTooltipPositioner } from './useTooltipPositioner';
import type { BaseUIComponentProps } from '../../utils/types';
import type { Side, Align } from '../../utils/useAnchorPositioning';
-import { popupOpenStateMapping } from '../../utils/popupOpenStateMapping';
+import { popupStateMapping } from '../../utils/popupStateMapping';
/**
* The tooltip positioner element.
@@ -41,7 +41,6 @@ const TooltipPositioner = React.forwardRef(function TooltipPositioner(
collisionBoundary = 'clipping-ancestors',
collisionPadding = 5,
arrowPadding = 5,
- hideWhenDetached = false,
sticky = false,
...otherProps
} = props;
@@ -62,7 +61,6 @@ const TooltipPositioner = React.forwardRef(function TooltipPositioner(
alignOffset,
collisionBoundary,
collisionPadding,
- hideWhenDetached,
sticky,
trackCursorAxis,
arrowPadding,
@@ -75,8 +73,9 @@ const TooltipPositioner = React.forwardRef(function TooltipPositioner(
open,
side: positioner.side,
align: positioner.align,
+ anchorHidden: positioner.anchorHidden,
}),
- [open, positioner.side, positioner.align],
+ [open, positioner.side, positioner.align, positioner.anchorHidden],
);
const contextValue: TooltipPositionerContext = React.useMemo(
@@ -96,7 +95,7 @@ const TooltipPositioner = React.forwardRef(function TooltipPositioner(
state,
ref: mergedRef,
extraProps: otherProps,
- customStyleHookMapping: popupOpenStateMapping,
+ customStyleHookMapping: popupStateMapping,
});
const shouldRender = keepMounted || mounted;
@@ -116,6 +115,7 @@ namespace TooltipPositioner {
open: boolean;
side: Side;
align: Align;
+ anchorHidden: boolean;
}
export interface Props
@@ -201,12 +201,6 @@ TooltipPositioner.propTypes /* remove-proptypes */ = {
HTMLElementType,
PropTypes.func,
]),
- /**
- * 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.
- * @default false
- */
- hideWhenDetached: PropTypes.bool,
/**
* Whether the tooltip remains mounted in the DOM while closed.
* @default false
diff --git a/packages/react/src/tooltip/positioner/useTooltipPositioner.ts b/packages/react/src/tooltip/positioner/useTooltipPositioner.ts
index 950827d8b7..205655a862 100644
--- a/packages/react/src/tooltip/positioner/useTooltipPositioner.ts
+++ b/packages/react/src/tooltip/positioner/useTooltipPositioner.ts
@@ -15,7 +15,7 @@ export function useTooltipPositioner(
const {
positionerStyles,
arrowStyles,
- hidden,
+ anchorHidden,
arrowRef,
arrowUncentered,
renderedSide,
@@ -27,7 +27,7 @@ export function useTooltipPositioner(
(externalProps = {}) => {
const hiddenStyles: React.CSSProperties = {};
- if ((keepMounted && !open) || hidden) {
+ if (keepMounted && !open) {
hiddenStyles.pointerEvents = 'none';
}
@@ -44,7 +44,7 @@ export function useTooltipPositioner(
},
});
},
- [keepMounted, open, hidden, trackCursorAxis, mounted, positionerStyles],
+ [keepMounted, open, trackCursorAxis, mounted, positionerStyles],
);
return React.useMemo(
@@ -55,8 +55,17 @@ export function useTooltipPositioner(
arrowUncentered,
side: renderedSide,
align: renderedAlign,
+ anchorHidden,
}),
- [getPositionerProps, arrowRef, arrowUncentered, renderedSide, renderedAlign, arrowStyles],
+ [
+ getPositionerProps,
+ arrowStyles,
+ arrowRef,
+ arrowUncentered,
+ renderedSide,
+ renderedAlign,
+ anchorHidden,
+ ],
);
}
@@ -112,12 +121,6 @@ export namespace useTooltipPositioner {
* @default 5
*/
collisionPadding?: Padding;
- /**
- * 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.
- * @default false
- */
- hideWhenDetached?: boolean;
/**
* Whether to allow the tooltip to remain stuck in view while the anchor element is scrolled out
* of view.
@@ -193,5 +196,9 @@ export namespace useTooltipPositioner {
* The rendered align of the tooltip element.
*/
align: 'start' | 'end' | 'center';
+ /**
+ * Determines if the anchor element is hidden.
+ */
+ anchorHidden: boolean;
}
}
diff --git a/packages/react/src/tooltip/trigger/TooltipTrigger.tsx b/packages/react/src/tooltip/trigger/TooltipTrigger.tsx
index 73b0c933d8..349a1126d7 100644
--- a/packages/react/src/tooltip/trigger/TooltipTrigger.tsx
+++ b/packages/react/src/tooltip/trigger/TooltipTrigger.tsx
@@ -5,7 +5,7 @@ import { useTooltipRootContext } from '../root/TooltipRootContext';
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';
/**
* Renders a trigger element that opens the tooltip.
diff --git a/packages/react/src/utils/popupOpenStateMapping.ts b/packages/react/src/utils/popupStateMapping.ts
similarity index 72%
rename from packages/react/src/utils/popupOpenStateMapping.ts
rename to packages/react/src/utils/popupStateMapping.ts
index 07e4ef00fe..62b8f673d1 100644
--- a/packages/react/src/utils/popupOpenStateMapping.ts
+++ b/packages/react/src/utils/popupStateMapping.ts
@@ -13,6 +13,10 @@ const POPUP_HOOK = {
'data-open': '',
};
+const ANCHOR_HIDDEN_HOOK = {
+ 'data-anchor-hidden': '',
+};
+
export const triggerOpenStateMapping = {
open(value) {
if (value) {
@@ -31,11 +35,17 @@ export const pressableTriggerOpenStateMapping = {
},
} satisfies CustomStyleHookMapping<{ open: boolean }>;
-export const popupOpenStateMapping = {
+export const popupStateMapping = {
open(value) {
if (value) {
return POPUP_HOOK;
}
return null;
},
-} satisfies CustomStyleHookMapping<{ open: boolean }>;
+ anchorHidden(value) {
+ if (value) {
+ return ANCHOR_HIDDEN_HOOK;
+ }
+ return null;
+ },
+} satisfies CustomStyleHookMapping<{ open: boolean; anchorHidden: boolean }>;
diff --git a/packages/react/src/utils/useAnchorPositioning.ts b/packages/react/src/utils/useAnchorPositioning.ts
index 587d2e47da..f453aab6ff 100644
--- a/packages/react/src/utils/useAnchorPositioning.ts
+++ b/packages/react/src/utils/useAnchorPositioning.ts
@@ -39,7 +39,6 @@ interface UseAnchorPositioningParameters {
fallbackAxisSideDirection?: 'start' | 'end' | 'none';
collisionBoundary?: Boundary;
collisionPadding?: Padding;
- hideWhenDetached?: boolean;
sticky?: boolean;
keepMounted?: boolean;
arrowPadding?: number;
@@ -57,7 +56,7 @@ interface UseAnchorPositioningReturnValue {
arrowUncentered: boolean;
renderedSide: Side;
renderedAlign: Align;
- hidden: boolean;
+ anchorHidden: boolean;
refs: ReturnType['refs'];
positionerContext: FloatingContext;
isPositioned: boolean;
@@ -81,7 +80,6 @@ export function useAnchorPositioning(
alignOffset = 0,
collisionBoundary,
collisionPadding = 5,
- hideWhenDetached = false,
fallbackAxisSideDirection = 'none',
sticky = false,
keepMounted = false,
@@ -162,7 +160,7 @@ export function useAnchorPositioning(
}),
[arrowPadding],
),
- hideWhenDetached && hide(),
+ hide(),
{
name: 'transformOrigin',
fn({ elements, middlewareData, placement: renderedPlacement }) {
@@ -272,15 +270,7 @@ export function useAnchorPositioning(
const renderedSide = getSide(renderedPlacement);
const renderedAlign = getAlignment(renderedPlacement) || 'center';
- const hidden = Boolean(hideWhenDetached && middlewareData.hide?.referenceHidden);
-
- const positionerStyles = React.useMemo(
- () => ({
- ...floatingStyles,
- ...(hidden && { visibility: 'hidden' as const }),
- }),
- [floatingStyles, hidden],
- );
+ const anchorHidden = Boolean(middlewareData.hide?.referenceHidden);
const arrowStyles = React.useMemo(
() => ({
@@ -295,25 +285,25 @@ export function useAnchorPositioning(
return React.useMemo(
() => ({
- positionerStyles,
+ positionerStyles: floatingStyles,
arrowStyles,
arrowRef,
arrowUncentered,
renderedSide,
renderedAlign,
- hidden,
+ anchorHidden,
refs,
positionerContext,
isPositioned,
}),
[
- positionerStyles,
+ floatingStyles,
arrowStyles,
arrowRef,
arrowUncentered,
renderedSide,
renderedAlign,
- hidden,
+ anchorHidden,
refs,
positionerContext,
isPositioned,