@base-ui/react 1.0.0 → 1.2.0

package/esm/toggle-group/ToggleGroupContext.d.ts

@@ -2,11 +2,16 @@ import * as React from 'react';
 import type { Orientation } from "../utils/types.js";
 import type { BaseUIChangeEventDetails } from "../utils/createBaseUIEventDetails.js";
 import type { BaseUIEventReasons } from "../utils/reasons.js";
-export interface ToggleGroupContext {
-  value: readonly any[];
-  setGroupValue: (newValue: string, nextPressed: boolean, eventDetails: BaseUIChangeEventDetails<BaseUIEventReasons['none']>) => void;
+export interface ToggleGroupContext<Value> {
+  value: readonly Value[];
+  setGroupValue: (newValue: Value, nextPressed: boolean, eventDetails: BaseUIChangeEventDetails<BaseUIEventReasons['none']>) => void;
   disabled: boolean;
   orientation: Orientation;
+  /**
+   * Indicates whether the value has been initialized via `value` or `defaultValue` props.
+   * Used to determine if Toggle should warn users about data inconsistency problems.
+   */
+  isValueInitialized: boolean;
 }
-export declare const ToggleGroupContext: React.Context<ToggleGroupContext | undefined>;
-export declare function useToggleGroupContext(optional?: boolean): ToggleGroupContext | undefined;
+export declare const ToggleGroupContext: React.Context<ToggleGroupContext<any> | undefined>;
+export declare function useToggleGroupContext<Value>(optional?: boolean): ToggleGroupContext<Value> | undefined;

package/esm/toolbar/button/ToolbarButton.d.ts

@@ -7,7 +7,7 @@ import type { ToolbarRoot } from "../root/ToolbarRoot.js";
  *
  * Documentation: [Base UI Toolbar](https://base-ui.com/react/components/toolbar)
  */
-export declare const ToolbarButton: React.ForwardRefExoticComponent<ToolbarButtonProps & React.RefAttributes<HTMLButtonElement>>;
+export declare const ToolbarButton: React.ForwardRefExoticComponent<Omit<ToolbarButtonProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;
 export interface ToolbarButtonState extends ToolbarRoot.State {
   disabled: boolean;
   focusable: boolean;
@@ -17,12 +17,12 @@ export interface ToolbarButtonProps extends NativeButtonProps, BaseUIComponentPr
    * When `true` the item is disabled.
    * @default false
    */
-  disabled?: boolean;
+  disabled?: boolean | undefined;
   /**
    * When `true` the item remains focuseable when disabled.
    * @default true
    */
-  focusableWhenDisabled?: boolean;
+  focusableWhenDisabled?: boolean | undefined;
 }
 export declare namespace ToolbarButton {
   type State = ToolbarButtonState;

package/esm/toolbar/button/ToolbarButton.js

@@ -39,11 +39,11 @@ export const ToolbarButton = /*#__PURE__*/React.forwardRef(function ToolbarButto
     focusableWhenDisabled,
     native: nativeButton
   });
-  const state = React.useMemo(() => ({
+  const state = {
     disabled,
     orientation,
     focusable: focusableWhenDisabled
-  }), [disabled, focusableWhenDisabled, orientation]);
+  };
   return /*#__PURE__*/_jsx(CompositeItem, {
     tag: "button",
     render: render,

package/esm/toolbar/group/ToolbarGroup.d.ts

@@ -7,13 +7,13 @@ import type { ToolbarRoot } from "../root/ToolbarRoot.js";
  *
  * Documentation: [Base UI Toolbar](https://base-ui.com/react/components/toolbar)
  */
-export declare const ToolbarGroup: React.ForwardRefExoticComponent<ToolbarGroupProps & React.RefAttributes<HTMLElement>>;
+export declare const ToolbarGroup: React.ForwardRefExoticComponent<Omit<ToolbarGroupProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
 export interface ToolbarGroupProps extends BaseUIComponentProps<'div', ToolbarRoot.State> {
   /**
    * When `true` all toolbar items in the group are disabled.
    * @default false
    */
-  disabled?: boolean;
+  disabled?: boolean | undefined;
 }
 export declare namespace ToolbarGroup {
   type Props = ToolbarGroupProps;

package/esm/toolbar/group/ToolbarGroup.js

@@ -27,10 +27,10 @@ export const ToolbarGroup = /*#__PURE__*/React.forwardRef(function ToolbarGroup(
   const contextValue = React.useMemo(() => ({
     disabled
   }), [disabled]);
-  const state = React.useMemo(() => ({
+  const state = {
     disabled,
     orientation
-  }), [disabled, orientation]);
+  };
   const element = useRenderElement('div', componentProps, {
     state,
     ref: forwardedRef,

package/esm/toolbar/group/ToolbarGroupContext.js

@@ -1,3 +1,5 @@
+'use client';
+
 import _formatErrorMessage from "@base-ui/utils/formatErrorMessage";
 import * as React from 'react';
 export const ToolbarGroupContext = /*#__PURE__*/React.createContext(undefined);

package/esm/toolbar/input/ToolbarInput.d.ts

@@ -7,7 +7,7 @@ import type { ToolbarRoot } from "../root/ToolbarRoot.js";
  *
  * Documentation: [Base UI Toolbar](https://base-ui.com/react/components/toolbar)
  */
-export declare const ToolbarInput: React.ForwardRefExoticComponent<ToolbarInputProps & React.RefAttributes<HTMLInputElement>>;
+export declare const ToolbarInput: React.ForwardRefExoticComponent<Omit<ToolbarInputProps, "ref"> & React.RefAttributes<HTMLInputElement>>;
 export interface ToolbarInputState extends ToolbarRoot.State {
   disabled: boolean;
   focusable: boolean;
@@ -17,13 +17,13 @@ export interface ToolbarInputProps extends BaseUIComponentProps<'input', Toolbar
    * When `true` the item is disabled.
    * @default false
    */
-  disabled?: boolean;
+  disabled?: boolean | undefined;
   /**
    * When `true` the item remains focuseable when disabled.
    * @default true
    */
-  focusableWhenDisabled?: boolean;
-  defaultValue?: React.ComponentProps<'input'>['defaultValue'];
+  focusableWhenDisabled?: boolean | undefined;
+  defaultValue?: React.ComponentProps<'input'>['defaultValue'] | undefined;
 }
 export declare namespace ToolbarInput {
   type State = ToolbarInputState;

package/esm/toolbar/input/ToolbarInput.js

@@ -39,11 +39,11 @@ export const ToolbarInput = /*#__PURE__*/React.forwardRef(function ToolbarInput(
     focusableWhenDisabled,
     isNativeButton: false
   });
-  const state = React.useMemo(() => ({
+  const state = {
     disabled,
     orientation,
     focusable: focusableWhenDisabled
-  }), [disabled, focusableWhenDisabled, orientation]);
+  };
   const defaultProps = {
     onClick(event) {
       if (disabled) {

package/esm/toolbar/link/ToolbarLink.d.ts

@@ -7,7 +7,7 @@ import type { ToolbarRoot } from "../root/ToolbarRoot.js";
  *
  * Documentation: [Base UI Toolbar](https://base-ui.com/react/components/toolbar)
  */
-export declare const ToolbarLink: React.ForwardRefExoticComponent<ToolbarLinkProps & React.RefAttributes<HTMLAnchorElement>>;
+export declare const ToolbarLink: React.ForwardRefExoticComponent<Omit<ToolbarLinkProps, "ref"> & React.RefAttributes<HTMLAnchorElement>>;
 export interface ToolbarLinkState {
   orientation: ToolbarRoot.Orientation;
 }

package/esm/toolbar/link/ToolbarLink.js

@@ -25,9 +25,9 @@ export const ToolbarLink = /*#__PURE__*/React.forwardRef(function ToolbarLink(co
   const {
     orientation
   } = useToolbarRootContext();
-  const state = React.useMemo(() => ({
+  const state = {
     orientation
-  }), [orientation]);
+  };
   return /*#__PURE__*/_jsx(CompositeItem, {
     tag: "a",
     render: render,

package/esm/toolbar/root/ToolbarRoot.d.ts

@@ -6,7 +6,7 @@ import { BaseUIComponentProps, Orientation as BaseOrientation } from "../../util
  *
  * Documentation: [Base UI Toolbar](https://base-ui.com/react/components/toolbar)
  */
-export declare const ToolbarRoot: React.ForwardRefExoticComponent<ToolbarRootProps & React.RefAttributes<HTMLDivElement>>;
+export declare const ToolbarRoot: React.ForwardRefExoticComponent<Omit<ToolbarRootProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
 export interface ToolbarRootItemMetadata {
   focusableWhenDisabled: boolean;
 }
@@ -16,18 +16,18 @@ export interface ToolbarRootState {
   orientation: ToolbarRoot.Orientation;
 }
 export interface ToolbarRootProps extends BaseUIComponentProps<'div', ToolbarRoot.State> {
-  disabled?: boolean;
+  disabled?: boolean | undefined;
   /**
    * The orientation of the toolbar.
    * @default 'horizontal'
    */
-  orientation?: ToolbarRoot.Orientation;
+  orientation?: ToolbarRoot.Orientation | undefined;
   /**
    * If `true`, using keyboard navigation will wrap focus to the other end of the toolbar once the end is reached.
    *
    * @default true
    */
-  loopFocus?: boolean;
+  loopFocus?: boolean | undefined;
 }
 export declare namespace ToolbarRoot {
   type ItemMetadata = ToolbarRootItemMetadata;

package/esm/toolbar/root/ToolbarRoot.js

@@ -35,10 +35,10 @@ export const ToolbarRoot = /*#__PURE__*/React.forwardRef(function ToolbarRoot(co
     orientation,
     setItemMap
   }), [disabled, orientation, setItemMap]);
-  const state = React.useMemo(() => ({
+  const state = {
     disabled,
     orientation
-  }), [disabled, orientation]);
+  };
   const defaultProps = {
     'aria-orientation': orientation,
     role: 'toolbar'

package/esm/toolbar/separator/ToolbarSeparator.d.ts

@@ -7,7 +7,7 @@ import { Separator } from "../../separator/index.js";
  *
  * Documentation: [Base UI Toolbar](https://base-ui.com/react/components/toolbar)
  */
-export declare const ToolbarSeparator: React.ForwardRefExoticComponent<ToolbarSeparatorProps & React.RefAttributes<HTMLDivElement>>;
+export declare const ToolbarSeparator: React.ForwardRefExoticComponent<Omit<ToolbarSeparatorProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
 export interface ToolbarSeparatorProps extends BaseUIComponentProps<'div', Separator.State>, Separator.Props {}
 export declare namespace ToolbarSeparator {
   type Props = ToolbarSeparatorProps;

package/esm/tooltip/arrow/TooltipArrow.d.ts

@@ -7,7 +7,7 @@ import type { Side, Align } from "../../utils/useAnchorPositioning.js";
  *
  * Documentation: [Base UI Tooltip](https://base-ui.com/react/components/tooltip)
  */
-export declare const TooltipArrow: React.ForwardRefExoticComponent<TooltipArrowProps & React.RefAttributes<HTMLDivElement>>;
+export declare const TooltipArrow: React.ForwardRefExoticComponent<Omit<TooltipArrowProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
 export interface TooltipArrowState {
   /**
    * Whether the tooltip is currently open.
@@ -16,6 +16,7 @@ export interface TooltipArrowState {
   side: Side;
   align: Align;
   uncentered: boolean;
+  instant: 'delay' | 'dismiss' | 'focus' | undefined;
 }
 export interface TooltipArrowProps extends BaseUIComponentProps<'div', TooltipArrow.State> {}
 export declare namespace TooltipArrow {

package/esm/tooltip/arrow/TooltipArrow.js

@@ -28,13 +28,13 @@ export const TooltipArrow = /*#__PURE__*/React.forwardRef(function TooltipArrow(
     arrowUncentered,
     arrowStyles
   } = useTooltipPositionerContext();
-  const state = React.useMemo(() => ({
+  const state = {
     open,
     side,
     align,
     uncentered: arrowUncentered,
     instant: instantType
-  }), [open, side, align, arrowUncentered, instantType]);
+  };
   const element = useRenderElement('div', componentProps, {
     state,
     ref: [forwardedRef, arrowRef],

package/esm/tooltip/arrow/TooltipArrowDataAttributes.js

@@ -12,12 +12,12 @@ export let TooltipArrowDataAttributes = function (TooltipArrowDataAttributes) {
    * Indicates which side the popup is positioned relative to the trigger.
    * @type {'top' | 'bottom' | 'left' | 'right' | 'inline-end' | 'inline-start'}
    */
-  TooltipArrowDataAttributes["side"] = "data-side";
+  TooltipArrowDataAttributes[TooltipArrowDataAttributes["side"] = CommonPopupDataAttributes.side] = "side";
   /**
    * Indicates how the popup is aligned relative to specified side.
    * @type {'start' | 'center' | 'end'}
    */
-  TooltipArrowDataAttributes["align"] = "data-align";
+  TooltipArrowDataAttributes[TooltipArrowDataAttributes["align"] = CommonPopupDataAttributes.align] = "align";
   /**
    * Present when the tooltip arrow is uncentered.
    */

package/esm/tooltip/popup/TooltipPopup.d.ts

@@ -8,7 +8,7 @@ import type { TransitionStatus } from "../../utils/useTransitionStatus.js";
  *
  * Documentation: [Base UI Tooltip](https://base-ui.com/react/components/tooltip)
  */
-export declare const TooltipPopup: React.ForwardRefExoticComponent<TooltipPopupProps & React.RefAttributes<HTMLDivElement>>;
+export declare const TooltipPopup: React.ForwardRefExoticComponent<Omit<TooltipPopupProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
 export interface TooltipPopupState {
   /**
    * Whether the tooltip is currently open.

package/esm/tooltip/popup/TooltipPopup.js

@@ -7,10 +7,8 @@ import { popupStateMapping as baseMapping } from "../../utils/popupStateMapping.
 import { transitionStatusMapping } from "../../utils/stateAttributesMapping.js";
 import { useOpenChangeComplete } from "../../utils/useOpenChangeComplete.js";
 import { useRenderElement } from "../../utils/useRenderElement.js";
-import { usePopupAutoResize } from "../../utils/usePopupAutoResize.js";
 import { getDisabledMountTransitionStyles } from "../../utils/getDisabledMountTransitionStyles.js";
 import { useHoverFloatingInteraction } from "../../floating-ui-react/index.js";
-import { useDirection } from "../../direction-provider/index.js";
 const stateAttributesMapping = {
   ...baseMapping,
   ...transitionStatusMapping
@@ -34,15 +32,10 @@ export const TooltipPopup = /*#__PURE__*/React.forwardRef(function TooltipPopup(
     align
   } = useTooltipPositionerContext();
   const open = store.useState('open');
-  const mounted = store.useState('mounted');
   const instantType = store.useState('instantType');
   const transitionStatus = store.useState('transitionStatus');
   const popupProps = store.useState('popupProps');
-  const payload = store.useState('payload');
-  const popupElement = store.useState('popupElement');
-  const positionerElement = store.useState('positionerElement');
   const floatingContext = store.useState('floatingRootContext');
-  const direction = useDirection();
   useOpenChangeComplete({
     open,
     ref: store.context.popupRef,
@@ -52,43 +45,19 @@ export const TooltipPopup = /*#__PURE__*/React.forwardRef(function TooltipPopup(
       }
     }
   });
-  function handleMeasureLayout() {
-    floatingContext.context.events.emit('measure-layout');
-  }
-  function handleMeasureLayoutComplete(previousDimensions, nextDimensions) {
-    floatingContext.context.events.emit('measure-layout-complete', {
-      previousDimensions,
-      nextDimensions
-    });
-  }
-
-  // If there's just one trigger, we can skip the auto-resize logic as
-  // the tooltip will always be anchored to the same position.
-  const autoresizeEnabled = React.useCallback(() => store.context.triggerElements.size > 1, [store]);
-  usePopupAutoResize({
-    popupElement,
-    positionerElement,
-    mounted,
-    content: payload,
-    enabled: autoresizeEnabled,
-    onMeasureLayout: handleMeasureLayout,
-    onMeasureLayoutComplete: handleMeasureLayoutComplete,
-    side,
-    direction
-  });
   const disabled = store.useState('disabled');
   const closeDelay = store.useState('closeDelay');
   useHoverFloatingInteraction(floatingContext, {
     enabled: !disabled,
     closeDelay
   });
-  const state = React.useMemo(() => ({
+  const state = {
     open,
     side,
     align,
     instant: instantType,
     transitionStatus
-  }), [open, side, align, instantType, transitionStatus]);
+  };
   const element = useRenderElement('div', componentProps, {
     state,
     ref: [forwardedRef, store.context.popupRef, store.useStateSetter('popupElement')],

package/esm/tooltip/popup/TooltipPopupDataAttributes.js

@@ -20,12 +20,12 @@ export let TooltipPopupDataAttributes = function (TooltipPopupDataAttributes) {
    * Indicates which side the popup is positioned relative to the trigger.
    * @type {'top' | 'bottom' | 'left' | 'right' | 'inline-end' | 'inline-start'}
    */
-  TooltipPopupDataAttributes["side"] = "data-side";
+  TooltipPopupDataAttributes[TooltipPopupDataAttributes["side"] = CommonPopupDataAttributes.side] = "side";
   /**
    * Indicates how the popup is aligned relative to specified side.
    * @type {'start' | 'center' | 'end'}
    */
-  TooltipPopupDataAttributes["align"] = "data-align";
+  TooltipPopupDataAttributes[TooltipPopupDataAttributes["align"] = CommonPopupDataAttributes.align] = "align";
   /**
    * Present if animations should be instant.
    * @type {'delay' | 'dismiss' | 'focus'}

package/esm/tooltip/portal/TooltipPortal.d.ts

@@ -7,7 +7,7 @@ import { FloatingPortalLite } from "../../utils/FloatingPortalLite.js";
  *
  * Documentation: [Base UI Tooltip](https://base-ui.com/react/components/tooltip)
  */
-export declare const TooltipPortal: React.ForwardRefExoticComponent<TooltipPortalProps & React.RefAttributes<HTMLDivElement>>;
+export declare const TooltipPortal: React.ForwardRefExoticComponent<Omit<TooltipPortalProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
 export declare namespace TooltipPortal {
   interface State {}
 }
@@ -16,7 +16,7 @@ export interface TooltipPortalProps extends FloatingPortalLite.Props<TooltipPort
    * Whether to keep the portal mounted in the DOM while the popup is hidden.
    * @default false
    */
-  keepMounted?: boolean;
+  keepMounted?: boolean | undefined;
 }
 export declare namespace TooltipPortal {
   type Props = TooltipPortalProps;

package/esm/tooltip/portal/TooltipPortalContext.js

@@ -1,3 +1,5 @@
+'use client';
+
 import _formatErrorMessage from "@base-ui/utils/formatErrorMessage";
 import * as React from 'react';
 export const TooltipPortalContext = /*#__PURE__*/React.createContext(undefined);

package/esm/tooltip/positioner/TooltipPositioner.d.ts

@@ -7,7 +7,7 @@ import type { BaseUIComponentProps } from "../../utils/types.js";
  *
  * Documentation: [Base UI Tooltip](https://base-ui.com/react/components/tooltip)
  */
-export declare const TooltipPositioner: React.ForwardRefExoticComponent<TooltipPositionerProps & React.RefAttributes<HTMLDivElement>>;
+export declare const TooltipPositioner: React.ForwardRefExoticComponent<Omit<TooltipPositionerProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
 export interface TooltipPositionerState {
   /**
    * Whether the tooltip is currently open.
@@ -27,7 +27,7 @@ export interface TooltipPositionerProps extends BaseUIComponentProps<'div', Tool
    * May automatically change to avoid collisions.
    * @default 'top'
    */
-  side?: Side;
+  side?: Side | undefined;
 }
 export declare namespace TooltipPositioner {
   type State = TooltipPositionerState;

package/esm/tooltip/positioner/TooltipPositioner.js

@@ -45,6 +45,7 @@ export const TooltipPositioner = /*#__PURE__*/React.forwardRef(function TooltipP
   const floatingRootContext = store.useState('floatingRootContext');
   const instantType = store.useState('instantType');
   const transitionStatus = store.useState('transitionStatus');
+  const hasViewport = store.useState('hasViewport');
   const positioning = useAnchorPositioning({
     anchor,
     positionMethod,
@@ -61,7 +62,7 @@ export const TooltipPositioner = /*#__PURE__*/React.forwardRef(function TooltipP
     disableAnchorTracking,
     keepMounted,
     collisionAvoidance,
-    adaptiveOrigin
+    adaptiveOrigin: hasViewport ? adaptiveOrigin : undefined
   });
   const defaultProps = React.useMemo(() => {
     const hiddenStyles = {};

package/esm/tooltip/positioner/TooltipPositionerContext.d.ts

@@ -4,7 +4,7 @@ export interface TooltipPositionerContext {
   open: boolean;
   side: Side;
   align: Align;
-  arrowRef: React.MutableRefObject<Element | null>;
+  arrowRef: React.RefObject<Element | null>;
   arrowUncentered: boolean;
   arrowStyles: React.CSSProperties;
 }

package/esm/tooltip/positioner/TooltipPositionerDataAttributes.js

@@ -16,11 +16,11 @@ export let TooltipPositionerDataAttributes = function (TooltipPositionerDataAttr
    * Indicates which side the popup is positioned relative to the trigger.
    * @type {'top' | 'bottom' | 'left' | 'right' | 'inline-end' | 'inline-start'}
    */
-  TooltipPositionerDataAttributes["side"] = "data-side";
+  TooltipPositionerDataAttributes[TooltipPositionerDataAttributes["side"] = CommonPopupDataAttributes.side] = "side";
   /**
    * Indicates how the popup is aligned relative to specified side.
    * @type {'start' | 'center' | 'end'}
    */
-  TooltipPositionerDataAttributes["align"] = "data-align";
+  TooltipPositionerDataAttributes[TooltipPositionerDataAttributes["align"] = CommonPopupDataAttributes.align] = "align";
   return TooltipPositionerDataAttributes;
 }({});

package/esm/tooltip/provider/TooltipProvider.d.ts

@@ -11,17 +11,17 @@ export interface TooltipProviderProps {
   /**
    * How long to wait before opening a tooltip. Specified in milliseconds.
    */
-  delay?: number;
+  delay?: number | undefined;
   /**
    * How long to wait before closing a tooltip. Specified in milliseconds.
    */
-  closeDelay?: number;
+  closeDelay?: number | undefined;
   /**
    * Another tooltip will open instantly if the previous tooltip
    * is closed within this timeout. Specified in milliseconds.
    * @default 400
    */
-  timeout?: number;
+  timeout?: number | undefined;
 }
 export declare namespace TooltipProvider {
   type Props = TooltipProviderProps;

package/esm/tooltip/provider/TooltipProviderContext.js

@@ -1,3 +1,5 @@
+'use client';
+
 import * as React from 'react';
 export const TooltipProviderContext = /*#__PURE__*/React.createContext(undefined);
 if (process.env.NODE_ENV !== "production") TooltipProviderContext.displayName = "TooltipProviderContext";

package/esm/tooltip/root/TooltipRoot.d.ts

@@ -9,7 +9,7 @@ import { REASONS } from "../../utils/reasons.js";
  *
  * Documentation: [Base UI Tooltip](https://base-ui.com/react/components/tooltip)
  */
-export declare function TooltipRoot<Payload>(props: TooltipRoot.Props<Payload>): import("react/jsx-runtime").JSX.Element;
+export declare const TooltipRoot: <Payload>(props: TooltipRoot.Props<Payload>) => import("react/jsx-runtime").JSX.Element;
 export interface TooltipRootState {}
 export interface TooltipRootProps<Payload = unknown> {
   /**
@@ -18,48 +18,46 @@ export interface TooltipRootProps<Payload = unknown> {
    * To render a controlled tooltip, use the `open` prop instead.
    * @default false
    */
-  defaultOpen?: boolean;
+  defaultOpen?: boolean | undefined;
   /**
    * Whether the tooltip is currently open.
    */
-  open?: boolean;
+  open?: boolean | undefined;
   /**
    * Event handler called when the tooltip is opened or closed.
    */
-  onOpenChange?: (open: boolean, eventDetails: TooltipRoot.ChangeEventDetails) => void;
+  onOpenChange?: ((open: boolean, eventDetails: TooltipRoot.ChangeEventDetails) => void) | undefined;
   /**
    * Event handler called after any animations complete when the tooltip is opened or closed.
    */
-  onOpenChangeComplete?: (open: boolean) => void;
+  onOpenChangeComplete?: ((open: boolean) => void) | undefined;
   /**
    * Whether the tooltip contents can be hovered without closing the tooltip.
    * @default false
    */
-  disableHoverablePopup?: boolean;
+  disableHoverablePopup?: boolean | undefined;
   /**
    * Determines which axis the tooltip should track the cursor on.
    * @default 'none'
    */
-  trackCursorAxis?: 'none' | 'x' | 'y' | 'both';
+  trackCursorAxis?: ('none' | 'x' | 'y' | 'both') | undefined;
   /**
    * A ref to imperative actions.
-   * - `unmount`: When specified, the tooltip will not be unmounted when closed.
-   * Instead, the `unmount` function must be called to unmount the tooltip manually.
-   * Useful when the tooltip's animation is controlled by an external library.
-   * - `close`: Closes the dialog imperatively when called.
+   * - `unmount`: Unmounts the tooltip popup.
+   * - `close`: Closes the tooltip imperatively when called.
    */
-  actionsRef?: React.RefObject<TooltipRoot.Actions>;
+  actionsRef?: React.RefObject<TooltipRoot.Actions | null> | undefined;
   /**
    * Whether the tooltip is disabled.
    * @default false
    */
-  disabled?: boolean;
+  disabled?: boolean | undefined;
   /**
    * A handle to associate the tooltip with a trigger.
    * If specified, allows external triggers to control the tooltip's open state.
    * Can be created with the Tooltip.createHandle() method.
    */
-  handle?: TooltipHandle<Payload>;
+  handle?: TooltipHandle<Payload> | undefined;
   /**
    * The content of the tooltip.
    * This can be a regular React node or a render function that receives the `payload` of the active trigger.
@@ -67,15 +65,15 @@ export interface TooltipRootProps<Payload = unknown> {
   children?: React.ReactNode | PayloadChildRenderFunction<Payload>;
   /**
    * ID of the trigger that the tooltip is associated with.
-   * This is useful in conjuntion with the `open` prop to create a controlled tooltip.
+   * This is useful in conjunction with the `open` prop to create a controlled tooltip.
    * There's no need to specify this prop when the tooltip is uncontrolled (i.e. when the `open` prop is not set).
    */
-  triggerId?: string | null;
+  triggerId?: (string | null) | undefined;
   /**
    * ID of the trigger that the tooltip is associated with.
    * This is useful in conjunction with the `defaultOpen` prop to create an initially open tooltip.
    */
-  defaultTriggerId?: string | null;
+  defaultTriggerId?: (string | null) | undefined;
 }
 export interface TooltipRootActions {
   unmount: () => void;