@base-ui/react 1.5.0 → 1.6.0

package/tooltip/store/TooltipStore.js

@@ -6,7 +6,6 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.TooltipStore = void 0;
 var React = _interopRequireWildcard(require("react"));
-var ReactDOM = _interopRequireWildcard(require("react-dom"));
 var _store = require("@base-ui/utils/store");
 var _createBaseUIEventDetails = require("../../internals/createBaseUIEventDetails");
 var _reasons = require("../../internals/reasons");
@@ -39,40 +38,11 @@ class TooltipStore extends _store.ReactStore {
     }, selectors);
   }
   setOpen = (nextOpen, eventDetails) => {
-    const reason = eventDetails.reason;
-    const isHover = reason === _reasons.REASONS.triggerHover;
-    const isFocusOpen = nextOpen && reason === _reasons.REASONS.triggerFocus;
-    const isDismissClose = !nextOpen && (reason === _reasons.REASONS.triggerPress || reason === _reasons.REASONS.escapeKey);
-    eventDetails.preventUnmountOnClose = () => {
-      this.set('preventUnmountingOnClose', true);
-    };
-    this.context.onOpenChange?.(nextOpen, eventDetails);
-    if (eventDetails.isCanceled) {
-      return;
-    }
-    this.state.floatingRootContext.dispatchOpenChange(nextOpen, eventDetails);
-    const changeState = () => {
-      const updatedState = {
-        open: nextOpen,
-        openChangeReason: reason
-      };
-      if (isFocusOpen) {
-        updatedState.instantType = 'focus';
-      } else if (isDismissClose) {
-        updatedState.instantType = 'dismiss';
-      } else if (reason === _reasons.REASONS.triggerHover) {
-        updatedState.instantType = undefined;
+    (0, _popups.applyPopupOpenChange)(this, nextOpen, eventDetails, {
+      extraState: {
+        openChangeReason: eventDetails.reason
       }
-      (0, _popups.setOpenTriggerState)(updatedState, nextOpen, eventDetails.trigger);
-      this.update(updatedState);
-    };
-    if (isHover) {
-      // If a hover reason is provided, we need to flush the state synchronously. This ensures
-      // `node.getAnimations()` knows about the new state.
-      ReactDOM.flushSync(changeState);
-    } else {
-      changeState();
-    }
+    });
   };
 
   // Used by trigger clicks to clear a delayed hover open without reporting a public open-state change.

package/tooltip/store/TooltipStore.mjs

@@ -0,0 +1,66 @@
+import * as React from 'react';
+import { createSelector, ReactStore } from '@base-ui/utils/store';
+import { createChangeEventDetails } from "../../internals/createBaseUIEventDetails.mjs";
+import { REASONS } from "../../internals/reasons.mjs";
+import { applyPopupOpenChange, createPopupFloatingRootContext, createInitialPopupStoreState, popupStoreSelectors, PopupTriggerMap, usePopupStore } from "../../utils/popups/index.mjs";
+const selectors = {
+  ...popupStoreSelectors,
+  disabled: createSelector(state => state.disabled),
+  instantType: createSelector(state => state.instantType),
+  isInstantPhase: createSelector(state => state.isInstantPhase),
+  trackCursorAxis: createSelector(state => state.trackCursorAxis),
+  disableHoverablePopup: createSelector(state => state.disableHoverablePopup),
+  lastOpenChangeReason: createSelector(state => state.openChangeReason),
+  closeOnClick: createSelector(state => state.closeOnClick),
+  closeDelay: createSelector(state => state.closeDelay),
+  hasViewport: createSelector(state => state.hasViewport)
+};
+export class TooltipStore extends ReactStore {
+  constructor(initialState, floatingId, nested = false) {
+    const triggerElements = new PopupTriggerMap();
+    const state = {
+      ...createInitialState(),
+      ...initialState
+    };
+    state.floatingRootContext = createPopupFloatingRootContext(triggerElements, floatingId, nested);
+    super(state, {
+      popupRef: /*#__PURE__*/React.createRef(),
+      onOpenChange: undefined,
+      onOpenChangeComplete: undefined,
+      triggerElements
+    }, selectors);
+  }
+  setOpen = (nextOpen, eventDetails) => {
+    applyPopupOpenChange(this, nextOpen, eventDetails, {
+      extraState: {
+        openChangeReason: eventDetails.reason
+      }
+    });
+  };
+
+  // Used by trigger clicks to clear a delayed hover open without reporting a public open-state change.
+  cancelPendingOpen(event) {
+    this.state.floatingRootContext.dispatchOpenChange(false, createChangeEventDetails(REASONS.triggerPress, event));
+  }
+  static useStore(externalStore, initialState) {
+    /* eslint-disable react-hooks/rules-of-hooks */
+    const store = usePopupStore(externalStore, (floatingId, nested) => new TooltipStore(initialState, floatingId, nested)).store;
+    /* eslint-enable react-hooks/rules-of-hooks */
+
+    return store;
+  }
+}
+function createInitialState() {
+  return {
+    ...createInitialPopupStoreState(),
+    disabled: false,
+    instantType: undefined,
+    isInstantPhase: false,
+    trackCursorAxis: 'none',
+    disableHoverablePopup: false,
+    openChangeReason: null,
+    closeOnClick: true,
+    closeDelay: 0,
+    hasViewport: false
+  };
+}

package/tooltip/trigger/TooltipTrigger.d.mts

@@ -0,0 +1,55 @@
+import * as React from 'react';
+import type { BaseUIComponentProps } from "../../internals/types.mjs";
+import { TooltipHandle } from "../store/TooltipHandle.mjs";
+/**
+ * An element to attach the tooltip to.
+ * Renders a `<button>` element.
+ *
+ * Documentation: [Base UI Tooltip](https://base-ui.com/react/components/tooltip)
+ */
+export declare const TooltipTrigger: TooltipTrigger;
+export interface TooltipTrigger {
+  <Payload>(componentProps: TooltipTrigger.Props<Payload> & React.RefAttributes<HTMLElement>): React.JSX.Element;
+}
+export interface TooltipTriggerState {
+  /**
+   * Whether the tooltip is currently open and was opened by this trigger.
+   */
+  open: boolean;
+}
+export interface TooltipTriggerProps<Payload = unknown> extends BaseUIComponentProps<'button', TooltipTriggerState> {
+  /**
+   * A handle to associate the trigger with a tooltip.
+   */
+  handle?: TooltipHandle<Payload> | undefined;
+  /**
+   * A payload to pass to the tooltip when it is opened.
+   */
+  payload?: Payload | undefined;
+  /**
+   * How long to wait before opening the tooltip. Specified in milliseconds.
+   * @default 600
+   */
+  delay?: number | undefined;
+  /**
+   * Whether the tooltip should close when this trigger is clicked.
+   * @default true
+   */
+  closeOnClick?: boolean | undefined;
+  /**
+   * How long to wait before closing the tooltip. Specified in milliseconds.
+   * @default 0
+   */
+  closeDelay?: number | undefined;
+  /**
+   * If `true`, the tooltip will not open when interacting with this trigger.
+   * Note that this doesn't apply the `disabled` attribute to the trigger element.
+   * If you want to disable the trigger element itself, you can pass the `disabled` prop to the trigger element via the `render` prop.
+   * @default false
+   */
+  disabled?: boolean | undefined;
+}
+export declare namespace TooltipTrigger {
+  type State = TooltipTriggerState;
+  type Props<Payload = unknown> = TooltipTriggerProps<Payload>;
+}

package/tooltip/trigger/TooltipTrigger.d.ts

@@ -13,7 +13,7 @@ export interface TooltipTrigger {
 }
 export interface TooltipTriggerState {
   /**
-   * Whether the tooltip is currently open.
+   * Whether the tooltip is currently open and was opened by this trigger.
    */
   open: boolean;
 }

package/tooltip/trigger/TooltipTrigger.mjs

@@ -0,0 +1,253 @@
+'use client';
+
+import _formatErrorMessage from "@base-ui/utils/formatErrorMessage";
+import * as React from 'react';
+import { isElement } from '@floating-ui/utils/dom';
+import { fastComponentRef } from '@base-ui/utils/fastHooks';
+import { useTimeout } from '@base-ui/utils/useTimeout';
+import { useValueAsRef } from '@base-ui/utils/useValueAsRef';
+import { useTooltipRootContext } from "../root/TooltipRootContext.mjs";
+import { triggerOpenStateMapping } from "../../utils/popupStateMapping.mjs";
+import { useRenderElement } from "../../internals/useRenderElement.mjs";
+import { useTriggerDataForwarding } from "../../utils/popups/index.mjs";
+import { useBaseUiId } from "../../internals/useBaseUiId.mjs";
+import { useTooltipProviderContext } from "../provider/TooltipProviderContext.mjs";
+import { safePolygon, useDelayGroup, useFocus, useHoverReferenceInteraction } from "../../floating-ui-react/index.mjs";
+import { contains } from "../../floating-ui-react/utils/element.mjs";
+import { isMouseLikePointerType } from "../../floating-ui-react/utils/event.mjs";
+import { createChangeEventDetails } from "../../internals/createBaseUIEventDetails.mjs";
+import { REASONS } from "../../internals/reasons.mjs";
+import { TooltipTriggerDataAttributes } from "./TooltipTriggerDataAttributes.mjs";
+import { useHoverInteractionSharedState } from "../../floating-ui-react/hooks/useHoverInteractionSharedState.mjs";
+import { OPEN_DELAY } from "../utils/constants.mjs";
+const TOOLTIP_TRIGGER_IDENTIFIER = 'data-base-ui-tooltip-trigger';
+function getTargetElement(event) {
+  if ('composedPath' in event) {
+    const path = event.composedPath();
+    for (let i = 0; i < path.length; i += 1) {
+      const element = path[i];
+      if (isElement(element)) {
+        return element;
+      }
+    }
+  }
+  const target = event.target;
+  if (isElement(target)) {
+    return target;
+  }
+  return null;
+}
+function closestEnabledTooltipTrigger(element) {
+  let current = element;
+  while (current) {
+    if (current.hasAttribute(TOOLTIP_TRIGGER_IDENTIFIER)) {
+      return current;
+    }
+    const parentElement = current.parentElement;
+    if (parentElement) {
+      current = parentElement;
+      continue;
+    }
+    const root = current.getRootNode();
+    current = 'host' in root && isElement(root.host) ? root.host : null;
+  }
+  return null;
+}
+
+/**
+ * An element to attach the tooltip to.
+ * Renders a `<button>` element.
+ *
+ * Documentation: [Base UI Tooltip](https://base-ui.com/react/components/tooltip)
+ */
+export const TooltipTrigger = fastComponentRef(function TooltipTrigger(componentProps, forwardedRef) {
+  const {
+    render,
+    className,
+    style,
+    handle,
+    payload,
+    disabled: disabledProp,
+    delay,
+    closeOnClick = true,
+    closeDelay,
+    id: idProp,
+    ...elementProps
+  } = componentProps;
+  const rootContext = useTooltipRootContext(true);
+  const store = handle?.store ?? rootContext;
+  if (!store) {
+    throw new Error(process.env.NODE_ENV !== "production" ? 'Base UI: <Tooltip.Trigger> must be either used within a <Tooltip.Root> component or provided with a handle.' : _formatErrorMessage(82));
+  }
+  const thisTriggerId = useBaseUiId(idProp);
+  const isTriggerActive = store.useState('isTriggerActive', thisTriggerId);
+  const isOpenedByThisTrigger = store.useState('isOpenedByTrigger', thisTriggerId);
+  const floatingRootContext = store.useState('floatingRootContext');
+  const triggerElementRef = React.useRef(null);
+  const delayWithDefault = delay ?? OPEN_DELAY;
+  const closeDelayWithDefault = closeDelay ?? 0;
+  const {
+    registerTrigger,
+    isMountedByThisTrigger
+  } = useTriggerDataForwarding(thisTriggerId, triggerElementRef, store, {
+    payload,
+    closeOnClick,
+    closeDelay: closeDelayWithDefault
+  });
+  const providerContext = useTooltipProviderContext();
+  const {
+    delayRef,
+    isInstantPhase,
+    hasProvider
+  } = useDelayGroup(floatingRootContext, {
+    open: isOpenedByThisTrigger
+  });
+  const hoverInteraction = useHoverInteractionSharedState(floatingRootContext);
+  store.useSyncedValue('isInstantPhase', isInstantPhase);
+  const rootDisabled = store.useState('disabled');
+  const disabled = disabledProp ?? rootDisabled;
+  const disabledRef = useValueAsRef(disabled);
+  const trackCursorAxis = store.useState('trackCursorAxis');
+  const disableHoverablePopup = store.useState('disableHoverablePopup');
+  const isNestedTriggerHoveredRef = React.useRef(false);
+  const nestedTriggerOpenTimeout = useTimeout();
+  // Local copy so it can be cleared on mouseLeave without resetting the hover hook's own pointerType.
+  const pointerTypeRef = React.useRef(undefined);
+  function getOpenDelay() {
+    const providerDelay = providerContext?.delay;
+    const groupOpenValue = typeof delayRef.current === 'object' ? delayRef.current.open : undefined;
+    let computedOpenDelay = delayWithDefault;
+    if (hasProvider) {
+      if (groupOpenValue !== 0) {
+        computedOpenDelay = delay ?? providerDelay ?? delayWithDefault;
+      } else {
+        computedOpenDelay = 0;
+      }
+    }
+    return computedOpenDelay;
+  }
+  function isEnabledNestedTriggerTarget(target) {
+    const triggerEl = triggerElementRef.current;
+    if (!triggerEl || !target) {
+      return false;
+    }
+    const nearestTrigger = closestEnabledTooltipTrigger(target);
+    return nearestTrigger !== null && nearestTrigger !== triggerEl && contains(triggerEl, nearestTrigger);
+  }
+  function detectNestedTriggerHover(target) {
+    const nestedTriggerHovered = isEnabledNestedTriggerTarget(target);
+    isNestedTriggerHoveredRef.current = nestedTriggerHovered;
+    if (nestedTriggerHovered) {
+      hoverInteraction.openChangeTimeout.clear();
+      hoverInteraction.restTimeout.clear();
+      hoverInteraction.restTimeoutPending = false;
+      nestedTriggerOpenTimeout.clear();
+    }
+    return nestedTriggerHovered;
+  }
+  const hoverProps = useHoverReferenceInteraction(floatingRootContext, {
+    enabled: !disabled,
+    mouseOnly: true,
+    move: false,
+    handleClose: !disableHoverablePopup && trackCursorAxis !== 'both' ? safePolygon() : null,
+    restMs: getOpenDelay,
+    delay() {
+      const closeValue = typeof delayRef.current === 'object' ? delayRef.current.close : undefined;
+      let computedCloseDelay = closeDelayWithDefault;
+      if (closeDelay == null && hasProvider) {
+        computedCloseDelay = closeValue;
+      }
+      return {
+        close: computedCloseDelay
+      };
+    },
+    triggerElementRef,
+    isActiveTrigger: isTriggerActive,
+    isClosing: () => store.select('transitionStatus') === 'ending',
+    shouldOpen() {
+      return !isNestedTriggerHoveredRef.current;
+    }
+  });
+  const focusProps = useFocus(floatingRootContext, {
+    enabled: !disabled
+  }).reference;
+  const handleNestedTriggerHover = event => {
+    const wasNestedTriggerHovered = isNestedTriggerHoveredRef.current;
+    const target = getTargetElement(event);
+    const nestedTriggerHovered = detectNestedTriggerHover(target);
+    const triggerEl = triggerElementRef.current;
+    const targetInsideTrigger = triggerEl && target && contains(triggerEl, target);
+
+    // Only close hover-opened parents. Focus/click-like opens remain owned by
+    // their original interaction and should not be clobbered by nested hover.
+    if (nestedTriggerHovered && store.select('open') && store.select('lastOpenChangeReason') === REASONS.triggerHover) {
+      store.setOpen(false, createChangeEventDetails(REASONS.triggerHover, event));
+      return;
+    }
+    if (wasNestedTriggerHovered && !nestedTriggerHovered && targetInsideTrigger && !disabledRef.current && !store.select('open') && triggerEl &&
+    // Match the hover hook's non-strict mouse fallback for mouse-only event sequences.
+    isMouseLikePointerType(pointerTypeRef.current)) {
+      const open = () => {
+        if (!isNestedTriggerHoveredRef.current && !disabledRef.current && !store.select('open')) {
+          store.setOpen(true, createChangeEventDetails(REASONS.triggerHover, event, triggerEl));
+        }
+      };
+      const openDelay = getOpenDelay();
+
+      // With `move: false`, the hover hook only listens to mouseenter/mouseleave
+      // on the parent trigger. Leaving a nested child for the parent area fires
+      // no event the hook can react to, so reopen locally.
+      if (openDelay === 0) {
+        nestedTriggerOpenTimeout.clear();
+        open();
+      } else {
+        nestedTriggerOpenTimeout.start(openDelay, open);
+      }
+    }
+  };
+  const rootTriggerProps = store.useState('triggerProps', isMountedByThisTrigger);
+  const shouldApplyRootTriggerProps = isMountedByThisTrigger || trackCursorAxis !== 'none';
+  const state = {
+    open: isOpenedByThisTrigger
+  };
+  const element = useRenderElement('button', componentProps, {
+    state,
+    ref: [forwardedRef, registerTrigger, triggerElementRef],
+    props: [hoverProps, focusProps, shouldApplyRootTriggerProps ? rootTriggerProps : undefined, {
+      onMouseOver(event) {
+        handleNestedTriggerHover(event.nativeEvent);
+      },
+      onFocus(event) {
+        if (isEnabledNestedTriggerTarget(getTargetElement(event.nativeEvent))) {
+          event.preventBaseUIHandler();
+        }
+      },
+      onMouseLeave() {
+        isNestedTriggerHoveredRef.current = false;
+        nestedTriggerOpenTimeout.clear();
+        pointerTypeRef.current = undefined;
+      },
+      onPointerEnter(event) {
+        pointerTypeRef.current = event.pointerType;
+      },
+      onPointerDown(event) {
+        pointerTypeRef.current = event.pointerType;
+        store.set('closeOnClick', closeOnClick);
+        if (closeOnClick && !store.select('open')) {
+          store.cancelPendingOpen(event.nativeEvent);
+        }
+      },
+      onClick(event) {
+        if (closeOnClick && !store.select('open')) {
+          store.cancelPendingOpen(event.nativeEvent);
+        }
+      },
+      id: thisTriggerId,
+      [TooltipTriggerDataAttributes.triggerDisabled]: disabled ? '' : undefined,
+      [TOOLTIP_TRIGGER_IDENTIFIER]: disabled ? undefined : ''
+    }, elementProps],
+    stateAttributesMapping: triggerOpenStateMapping
+  });
+  return element;
+});
+if (process.env.NODE_ENV !== "production") TooltipTrigger.displayName = "TooltipTrigger";

package/tooltip/trigger/TooltipTriggerDataAttributes.mjs

@@ -0,0 +1,12 @@
+import { CommonTriggerDataAttributes } from "../../utils/popupStateMapping.mjs";
+export let TooltipTriggerDataAttributes = function (TooltipTriggerDataAttributes) {
+  /**
+   * Present when the corresponding tooltip is open.
+   */
+  TooltipTriggerDataAttributes[TooltipTriggerDataAttributes["popupOpen"] = CommonTriggerDataAttributes.popupOpen] = "popupOpen";
+  /**
+   * Present when the trigger is disabled, either by the `disabled` prop or by a parent `<Tooltip.Root>` component.
+   */
+  TooltipTriggerDataAttributes["triggerDisabled"] = "data-trigger-disabled";
+  return TooltipTriggerDataAttributes;
+}({});

package/tooltip/viewport/TooltipViewport.d.mts

@@ -0,0 +1,35 @@
+import * as React from 'react';
+import { BaseUIComponentProps } from "../../internals/types.mjs";
+/**
+ * A viewport for displaying content transitions.
+ * This component is only required if one popup can be opened by multiple triggers, its content
+ * changes based on the trigger, and switching between them is animated.
+ * Renders a `<div>` element.
+ *
+ * Documentation: [Base UI Tooltip](https://base-ui.com/react/components/tooltip)
+ */
+export declare const TooltipViewport: React.ForwardRefExoticComponent<Omit<TooltipViewportProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export interface TooltipViewportState {
+  /**
+   * The activation direction of the transitioned content.
+   */
+  activationDirection: string | undefined;
+  /**
+   * Whether the viewport is currently transitioning between contents.
+   */
+  transitioning: boolean;
+  /**
+   * Present if animations should be instant.
+   */
+  instant: 'delay' | 'dismiss' | 'focus' | undefined;
+}
+export interface TooltipViewportProps extends BaseUIComponentProps<'div', TooltipViewportState> {
+  /**
+   * The content to render inside the transition container.
+   */
+  children?: React.ReactNode;
+}
+export declare namespace TooltipViewport {
+  type Props = TooltipViewportProps;
+  type State = TooltipViewportState;
+}

package/tooltip/viewport/TooltipViewport.d.ts

@@ -8,7 +8,7 @@ import { BaseUIComponentProps } from "../../internals/types.js";
  *
  * Documentation: [Base UI Tooltip](https://base-ui.com/react/components/tooltip)
  */
-export declare const TooltipViewport: React.ForwardRefExoticComponent<Omit<TooltipViewport.Props, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export declare const TooltipViewport: React.ForwardRefExoticComponent<Omit<TooltipViewportProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
 export interface TooltipViewportState {
   /**
    * The activation direction of the transitioned content.
@@ -23,12 +23,13 @@ export interface TooltipViewportState {
    */
   instant: 'delay' | 'dismiss' | 'focus' | undefined;
 }
+export interface TooltipViewportProps extends BaseUIComponentProps<'div', TooltipViewportState> {
+  /**
+   * The content to render inside the transition container.
+   */
+  children?: React.ReactNode;
+}
 export declare namespace TooltipViewport {
-  interface Props extends BaseUIComponentProps<'div', TooltipViewportState> {
-    /**
-     * The content to render inside the transition container.
-     */
-    children?: React.ReactNode;
-  }
+  type Props = TooltipViewportProps;
   type State = TooltipViewportState;
 }

package/tooltip/viewport/TooltipViewport.mjs

@@ -0,0 +1,57 @@
+'use client';
+
+import * as React from 'react';
+import { useTooltipRootContext } from "../root/TooltipRootContext.mjs";
+import { useTooltipPositionerContext } from "../positioner/TooltipPositionerContext.mjs";
+import { useRenderElement } from "../../internals/useRenderElement.mjs";
+import { TooltipViewportCssVars } from "./TooltipViewportCssVars.mjs";
+import { usePopupViewport } from "../../utils/usePopupViewport.mjs";
+const stateAttributesMapping = {
+  activationDirection: value => value ? {
+    'data-activation-direction': value
+  } : null
+};
+
+/**
+ * A viewport for displaying content transitions.
+ * This component is only required if one popup can be opened by multiple triggers, its content
+ * changes based on the trigger, and switching between them is animated.
+ * Renders a `<div>` element.
+ *
+ * Documentation: [Base UI Tooltip](https://base-ui.com/react/components/tooltip)
+ */
+export const TooltipViewport = /*#__PURE__*/React.forwardRef(function TooltipViewport(componentProps, forwardedRef) {
+  const {
+    render,
+    className,
+    style,
+    children,
+    ...elementProps
+  } = componentProps;
+  const store = useTooltipRootContext();
+  const positioner = useTooltipPositionerContext();
+  const instantType = store.useState('instantType');
+  const {
+    children: childrenToRender,
+    state: viewportState
+  } = usePopupViewport({
+    store,
+    side: positioner.side,
+    cssVars: TooltipViewportCssVars,
+    children
+  });
+  const state = {
+    activationDirection: viewportState.activationDirection,
+    transitioning: viewportState.transitioning,
+    instant: instantType
+  };
+  return useRenderElement('div', componentProps, {
+    state,
+    ref: forwardedRef,
+    props: [elementProps, {
+      children: childrenToRender
+    }],
+    stateAttributesMapping
+  });
+});
+if (process.env.NODE_ENV !== "production") TooltipViewport.displayName = "TooltipViewport";

package/tooltip/viewport/TooltipViewportDataAttributes.d.mts

@@ -0,0 +1,26 @@
+export declare enum TooltipViewportDataAttributes {
+  /**
+   * Applied to the direct child of the viewport when no transitions are present or the new content when it's entering.
+   */
+  current = "data-current",
+  /**
+   * Applied to the direct child of the viewport that contains the exiting content when transitions are present.
+   */
+  previous = "data-previous",
+  /**
+   * Indicates the direction from which the popup was activated.
+   * This can be used to create directional animations based on how the popup was triggered.
+   * Contains space-separated values for both horizontal and vertical axes.
+   * @type {`${'left' | 'right' | ''} ${'down' | 'up' | ''}`}
+   */
+  activationDirection = "data-activation-direction",
+  /**
+   * Indicates that the viewport is currently transitioning between old and new content.
+   */
+  transitioning = "data-transitioning",
+  /**
+   * Present if animations should be instant.
+   * @type {'delay' | 'dismiss' | 'focus'}
+   */
+  instant = "data-instant",
+}

package/tooltip/viewport/TooltipViewportDataAttributes.d.ts

@@ -11,7 +11,7 @@ export declare enum TooltipViewportDataAttributes {
    * Indicates the direction from which the popup was activated.
    * This can be used to create directional animations based on how the popup was triggered.
    * Contains space-separated values for both horizontal and vertical axes.
-   * @type {`${'left' | 'right'} ${'top' | 'bottom'}`}
+   * @type {`${'left' | 'right' | ''} ${'down' | 'up' | ''}`}
    */
   activationDirection = "data-activation-direction",
   /**

package/tooltip/viewport/TooltipViewportDataAttributes.js

@@ -17,7 +17,7 @@ let TooltipViewportDataAttributes = exports.TooltipViewportDataAttributes = /*#_
    * Indicates the direction from which the popup was activated.
    * This can be used to create directional animations based on how the popup was triggered.
    * Contains space-separated values for both horizontal and vertical axes.
-   * @type {`${'left' | 'right'} ${'top' | 'bottom'}`}
+   * @type {`${'left' | 'right' | ''} ${'down' | 'up' | ''}`}
    */
   TooltipViewportDataAttributes["activationDirection"] = "data-activation-direction";
   /**

package/tooltip/viewport/TooltipViewportDataAttributes.mjs

@@ -0,0 +1,27 @@
+export let TooltipViewportDataAttributes = /*#__PURE__*/function (TooltipViewportDataAttributes) {
+  /**
+   * Applied to the direct child of the viewport when no transitions are present or the new content when it's entering.
+   */
+  TooltipViewportDataAttributes["current"] = "data-current";
+  /**
+   * Applied to the direct child of the viewport that contains the exiting content when transitions are present.
+   */
+  TooltipViewportDataAttributes["previous"] = "data-previous";
+  /**
+   * Indicates the direction from which the popup was activated.
+   * This can be used to create directional animations based on how the popup was triggered.
+   * Contains space-separated values for both horizontal and vertical axes.
+   * @type {`${'left' | 'right' | ''} ${'down' | 'up' | ''}`}
+   */
+  TooltipViewportDataAttributes["activationDirection"] = "data-activation-direction";
+  /**
+   * Indicates that the viewport is currently transitioning between old and new content.
+   */
+  TooltipViewportDataAttributes["transitioning"] = "data-transitioning";
+  /**
+   * Present if animations should be instant.
+   * @type {'delay' | 'dismiss' | 'focus'}
+   */
+  TooltipViewportDataAttributes["instant"] = "data-instant";
+  return TooltipViewportDataAttributes;
+}({});

package/types/index.d.mts

@@ -0,0 +1,16 @@
+import type * as React from 'react';
+export type { BaseUIChangeEventDetails, BaseUIGenericEventDetails } from "../internals/createBaseUIEventDetails.mjs";
+export type HTMLProps<T = any> = React.HTMLAttributes<T> & {
+  ref?: React.Ref<T> | undefined;
+};
+/**
+ * Shape of the render prop: a function that takes props to be spread on the element and component's state and returns a React element.
+ *
+ * @template Props Props to be spread on the rendered element.
+ * @template State Component's internal state.
+ */
+export type ComponentRenderFn<Props, State> = (props: Props, state: State) => React.ReactElement<unknown>;
+export type BaseUIEvent<E extends React.SyntheticEvent<Element, Event>> = E & {
+  preventBaseUIHandler: () => void;
+  readonly baseUIHandlerPrevented?: boolean | undefined;
+};

package/use-render/index.d.mts

@@ -0,0 +1,2 @@
+export * from "./useRender.mjs";
+export type { HTMLProps, ComponentRenderFn } from "../internals/types.mjs";