[Tooltip] Modernize implementation

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

@@ -20,9 +20,7 @@
     "collisionPadding": {
       "description": "The padding between the tooltip popup element and the edges of the collision boundary to add whitespace between them to prevent them from touching."
     },
-    "container": {
-      "description": "The container element to which the tooltip positioner is appended to."
-    },
+    "container": { "description": "The container element the tooltip positioner is appended to." },
     "hideWhenDetached": {
       "description": "Whether the tooltip popup element is hidden if it appears detached from its anchor element due to the anchor element being clipped (or hidden) from view."
     },

packages/mui-base/src/Tooltip/Arrow/TooltipArrow.tsx

@@ -1,11 +1,21 @@
 'use client';
 import * as React from 'react';
 import PropTypes from 'prop-types';
-import type { TooltipArrowOwnerState, TooltipArrowProps } from './TooltipArrow.types';
 import { useComponentRenderer } from '../../utils/useComponentRenderer';
 import { useForkRef } from '../../utils/useForkRef';
 import { useTooltipPositionerContext } from '../Positioner/TooltipPositionerContext';
 import { useTooltipArrow } from './useTooltipArrow';
+import type { CustomStyleHookMapping } from '../../utils/getStyleHookProps';
+import type { BaseUIComponentProps } from '../../utils/types';
+import type { Side, Alignment } from '../../utils/useAnchorPositioning';
+
+const customStyleHookMapping: CustomStyleHookMapping<TooltipArrow.OwnerState> = {
+  open(value) {
+    return {
+      'data-state': value ? 'open' : 'closed',
+    };
+  },
+};
 
 /**
  * Renders an arrow that points to the center of the anchor element.
@@ -19,7 +29,7 @@ import { useTooltipArrow } from './useTooltipArrow';
  * - [TooltipArrow API](https://base-ui.netlify.app/components/react-tooltip/#api-reference-TooltipArrow)
  */
 const TooltipArrow = React.forwardRef(function TooltipArrow(
-  props: TooltipArrowProps,
+  props: TooltipArrow.Props,
   forwardedRef: React.ForwardedRef<HTMLDivElement>,
 ) {
   const { className, render, hideWhenUncentered = false, ...otherProps } = props;
@@ -32,7 +42,7 @@ const TooltipArrow = React.forwardRef(function TooltipArrow(
     hidden: hideWhenUncentered && arrowUncentered,
   });
 
-  const ownerState: TooltipArrowOwnerState = React.useMemo(
+  const ownerState: TooltipArrow.OwnerState = React.useMemo(
     () => ({
       open,
       side,
@@ -50,18 +60,27 @@ const TooltipArrow = React.forwardRef(function TooltipArrow(
     className,
     ref: mergedRef,
     extraProps: otherProps,
-    customStyleHookMapping: {
-      open(value) {
-        return {
-          'data-state': value ? 'open' : 'closed',
-        };
-      },
-    },
+    customStyleHookMapping,
   });
 
   return renderElement();
 });
 
+namespace TooltipArrow {
+  export interface OwnerState {
+    open: boolean;
+    side: Side;
+    alignment: Alignment;
+  }
+  export interface Props extends BaseUIComponentProps<'div', OwnerState> {
+    /**
+     * If `true`, the arrow will be hidden when it can't point to the center of the anchor element.
+     * @default false
+     */
+    hideWhenUncentered?: boolean;
+  }
+}
+
 TooltipArrow.propTypes /* remove-proptypes */ = {
   // ┌────────────────────────────── Warning ──────────────────────────────┐
   // │ These PropTypes are generated from the TypeScript type definitions. │

packages/mui-base/src/Tooltip/Arrow/useTooltipArrow.ts

@@ -1,21 +1,18 @@
-'use client';
 import * as React from 'react';
 import { mergeReactProps } from '../../utils/mergeReactProps';
-import type {
-  UseTooltipArrowParameters,
-  UseTooltipArrowReturnValue,
-} from './useTooltipArrow.types';
+import type { GenericHTMLProps } from '../../utils/types';
 
-export function useTooltipArrow(params: UseTooltipArrowParameters): UseTooltipArrowReturnValue {
-  const { arrowStyles } = params;
+export function useTooltipArrow(params: useTooltipArrow.Parameters): useTooltipArrow.ReturnValue {
+  const { arrowStyles, hidden } = params;
 
   const getArrowProps = React.useCallback(
     (externalProps = {}) => {
       return mergeReactProps<'div'>(externalProps, {
         style: arrowStyles,
+        ...(hidden && { visibility: 'hidden' }),
       });
     },
-    [arrowStyles],
+    [arrowStyles, hidden],
   );
 
   return React.useMemo(
@@ -25,3 +22,13 @@ export function useTooltipArrow(params: UseTooltipArrowParameters): UseTooltipAr
     [getArrowProps],
   );
 }
+
+namespace useTooltipArrow {
+  export interface Parameters {
+    arrowStyles: React.CSSProperties;
+    hidden?: boolean;
+  }
+  export interface ReturnValue {
+    getArrowProps: (props?: GenericHTMLProps) => GenericHTMLProps;
+  }
+}

packages/mui-base/src/Tooltip/Popup/TooltipPopup.tsx

@@ -1,12 +1,12 @@
 'use client';
 import * as React from 'react';
 import PropTypes from 'prop-types';
-import type { TooltipPopupOwnerState, TooltipPopupProps } from './TooltipPopup.types';
 import { useComponentRenderer } from '../../utils/useComponentRenderer';
 import { useTooltipRootContext } from '../Root/TooltipRootContext';
 import { useTooltipPositionerContext } from '../Positioner/TooltipPositionerContext';
-import { useTooltipPopup } from './useTooltipPopup';
 import { useForkRef } from '../../utils/useForkRef';
+import type { BaseUIComponentProps } from '../../utils/types';
+import type { Alignment, Side } from '../../utils/useAnchorPositioning';
 
 /**
  * The tooltip popup element.
@@ -20,7 +20,7 @@ import { useForkRef } from '../../utils/useForkRef';
  * - [TooltipPopup API](https://base-ui.netlify.app/components/react-tooltip/#api-reference-TooltipPopup)
  */
 const TooltipPopup = React.forwardRef(function TooltipPopup(
-  props: TooltipPopupProps,
+  props: TooltipPopup.Props,
   forwardedRef: React.ForwardedRef<HTMLDivElement>,
 ) {
   const { className, render, ...otherProps } = props;
@@ -29,11 +29,7 @@ const TooltipPopup = React.forwardRef(function TooltipPopup(
     useTooltipRootContext();
   const { side, alignment } = useTooltipPositionerContext();
 
-  const { getPopupProps } = useTooltipPopup({
-    getProps: getRootPopupProps,
-  });
-
-  const ownerState: TooltipPopupOwnerState = React.useMemo(
+  const ownerState: TooltipPopup.OwnerState = React.useMemo(
     () => ({
       open,
       side,
@@ -50,7 +46,7 @@ const TooltipPopup = React.forwardRef(function TooltipPopup(
   // The content element needs to be a child of a wrapper floating element in order to avoid
   // conflicts with CSS transitions and the positioning transform.
   const { renderElement } = useComponentRenderer({
-    propGetter: getPopupProps,
+    propGetter: getRootPopupProps,
     render: render ?? 'div',
     className,
     ownerState,
@@ -74,6 +70,18 @@ const TooltipPopup = React.forwardRef(function TooltipPopup(
   return renderElement();
 });
 
+namespace TooltipPopup {
+  export interface OwnerState {
+    open: boolean;
+    side: Side;
+    alignment: Alignment;
+    instant: 'delay' | 'focus' | 'dismiss' | undefined;
+    entering: boolean;
+    exiting: boolean;
+  }
+  export interface Props extends BaseUIComponentProps<'div', OwnerState> {}
+}
+
 TooltipPopup.propTypes /* remove-proptypes */ = {
   // ┌────────────────────────────── Warning ──────────────────────────────┐
   // │ These PropTypes are generated from the TypeScript type definitions. │

packages/mui-base/src/Tooltip/Positioner/TooltipPositioner.tsx

@@ -5,14 +5,11 @@ import { FloatingPortal } from '@floating-ui/react';
 import { useComponentRenderer } from '../../utils/useComponentRenderer';
 import { HTMLElementType } from '../../utils/proptypes';
 import { useForkRef } from '../../utils/useForkRef';
-import type {
-  TooltipPositionerContextValue,
-  TooltipPositionerOwnerState,
-  TooltipPositionerProps,
-} from './TooltipPositioner.types';
 import { useTooltipRootContext } from '../Root/TooltipRootContext';
-import { useTooltipPositioner } from './useTooltipPositioner';
 import { TooltipPositionerContext } from './TooltipPositionerContext';
+import { useTooltipPositioner } from './useTooltipPositioner';
+import type { BaseUIComponentProps } from '../../utils/types';
+import type { Side, Alignment } from '../../utils/useAnchorPositioning';
 
 /**
  * The tooltip positioner element.
@@ -26,7 +23,7 @@ import { TooltipPositionerContext } from './TooltipPositionerContext';
  * - [TooltipPositioner API](https://base-ui.netlify.app/components/react-tooltip/#api-reference-TooltipPositioner)
  */
 const TooltipPositioner = React.forwardRef(function TooltipPositioner(
-  props: TooltipPositionerProps,
+  props: TooltipPositioner.Props,
   forwardedRef: React.ForwardedRef<HTMLDivElement>,
 ) {
   const {
@@ -77,7 +74,7 @@ const TooltipPositioner = React.forwardRef(function TooltipPositioner(
 
   const mergedRef = useForkRef(forwardedRef, setPositionerElement);
 
-  const ownerState: TooltipPositionerOwnerState = React.useMemo(
+  const ownerState: TooltipPositioner.OwnerState = React.useMemo(
     () => ({
       open,
       side: positioner.side,
@@ -86,7 +83,7 @@ const TooltipPositioner = React.forwardRef(function TooltipPositioner(
     [open, positioner.side, positioner.alignment],
   );
 
-  const contextValue: TooltipPositionerContextValue = React.useMemo(
+  const contextValue: TooltipPositionerContext = React.useMemo(
     () => ({
       ...ownerState,
       arrowRef: positioner.arrowRef,
@@ -117,6 +114,22 @@ const TooltipPositioner = React.forwardRef(function TooltipPositioner(
   );
 });
 
+namespace TooltipPositioner {
+  export interface OwnerState {
+    open: boolean;
+    side: Side;
+    alignment: Alignment;
+  }
+  export interface Props
+    extends BaseUIComponentProps<'div', OwnerState>,
+      Omit<useTooltipPositioner.Parameters, 'floatingRootContext'> {
+    /**
+     * The container element the tooltip positioner is appended to.
+     */
+    container?: HTMLElement | null | React.MutableRefObject<HTMLElement | null>;
+  }
+}
+
 TooltipPositioner.propTypes /* remove-proptypes */ = {
   // ┌────────────────────────────── Warning ──────────────────────────────┐
   // │ These PropTypes are generated from the TypeScript type definitions. │
@@ -184,7 +197,7 @@ TooltipPositioner.propTypes /* remove-proptypes */ = {
     }),
   ]),
   /**
-   * The container element to which the tooltip positioner is appended to.
+   * The container element the tooltip positioner is appended to.
    */
   container: PropTypes /* @typescript-to-proptypes-ignore */.oneOfType([
     HTMLElementType,

packages/mui-base/src/Tooltip/Positioner/TooltipPositionerContext.ts

@@ -1,9 +1,16 @@
 import * as React from 'react';
-import type { TooltipPositionerContextValue } from './TooltipPositioner.types';
+import type { Side, Alignment } from '../../utils/useAnchorPositioning';
 
-export const TooltipPositionerContext = React.createContext<TooltipPositionerContextValue | null>(
-  null,
-);
+export interface TooltipPositionerContext {
+  open: boolean;
+  side: Side;
+  alignment: Alignment;
+  arrowRef: React.MutableRefObject<Element | null>;
+  arrowUncentered: boolean;
+  arrowStyles: React.CSSProperties;
+}
+
+export const TooltipPositionerContext = React.createContext<TooltipPositionerContext | null>(null);
 
 export function useTooltipPositionerContext() {
   const context = React.useContext(TooltipPositionerContext);