@base-ui/react 1.3.0 → 1.4.0

package/esm/toast/root/ToastRoot.js

@@ -2,7 +2,8 @@
 
 import * as React from 'react';
 import * as ReactDOM from 'react-dom';
-import { ownerDocument } from '@base-ui/utils/owner';
+import { addEventListener } from '@base-ui/utils/addEventListener';
+import { ownerDocument, ownerWindow } from '@base-ui/utils/owner';
 import { inertValue } from '@base-ui/utils/inertValue';
 import { useIsoLayoutEffect } from '@base-ui/utils/useIsoLayoutEffect';
 import { useStableCallback } from '@base-ui/utils/useStableCallback';
@@ -43,7 +44,7 @@ function getDisplacement(direction, deltaX, deltaY) {
   }
 }
 function getElementTransform(element) {
-  const computedStyle = window.getComputedStyle(element);
+  const computedStyle = ownerWindow(element).getComputedStyle(element);
   const transform = computedStyle.transform;
   let translateX = 0;
   let translateY = 0;
@@ -82,6 +83,7 @@ export const ToastRoot = /*#__PURE__*/React.forwardRef(function ToastRoot(compon
     render,
     className,
     swipeDirection = ['down', 'right'],
+    style,
     ...elementProps
   } = componentProps;
   const isAnchored = toast.positionerProps?.anchor !== undefined;
@@ -411,6 +413,19 @@ export const ToastRoot = /*#__PURE__*/React.forwardRef(function ToastRoot(compon
       setCurrentSwipeDirection(undefined);
     }
   }
+  function handlePointerCancel() {
+    if (!isSwiping) {
+      return;
+    }
+    setIsSwiping(false);
+    setIsRealSwipe(false);
+    setLockedDirection(null);
+    setDragOffset({
+      x: initialTransform.x,
+      y: initialTransform.y
+    });
+    setCurrentSwipeDirection(undefined);
+  }
   function handleKeyDown(event) {
     if (event.key === 'Escape') {
       if (!rootRef.current || !contains(rootRef.current, activeElement(ownerDocument(rootRef.current)))) {
@@ -428,16 +443,13 @@ export const ToastRoot = /*#__PURE__*/React.forwardRef(function ToastRoot(compon
       return undefined;
     }
     function preventDefaultTouchStart(event) {
-      if (contains(element, event.target)) {
+      if (contains(element, getTarget(event))) {
         event.preventDefault();
       }
     }
-    element.addEventListener('touchmove', preventDefaultTouchStart, {
+    return addEventListener(element, 'touchmove', preventDefaultTouchStart, {
       passive: false
     });
-    return () => {
-      element.removeEventListener('touchmove', preventDefaultTouchStart);
-    };
   }, [swipeEnabled]);
   function getDragStyles() {
     if (!isSwiping && dragOffset.x === initialTransform.x && dragOffset.y === initialTransform.y && !dragDismissed) {
@@ -468,6 +480,7 @@ export const ToastRoot = /*#__PURE__*/React.forwardRef(function ToastRoot(compon
     onPointerDown: swipeEnabled ? handlePointerDown : undefined,
     onPointerMove: swipeEnabled ? handlePointerMove : undefined,
     onPointerUp: swipeEnabled ? handlePointerUp : undefined,
+    onPointerCancel: swipeEnabled ? handlePointerCancel : undefined,
     onKeyDown: handleKeyDown,
     inert: inertValue(toast.limited),
     style: {

package/esm/toast/root/ToastRootDataAttributes.js

@@ -1,4 +1,5 @@
-export let ToastRootDataAttributes = /*#__PURE__*/function (ToastRootDataAttributes) {
+import { TransitionStatusDataAttributes } from "../../utils/stateAttributesMapping.js";
+export let ToastRootDataAttributes = function (ToastRootDataAttributes) {
   /**
    * Present when the toast is expanded in the viewport.
    * @type {boolean}
@@ -27,10 +28,10 @@ export let ToastRootDataAttributes = /*#__PURE__*/function (ToastRootDataAttribu
   /**
    * Present when the toast is animating in.
    */
-  ToastRootDataAttributes["startingStyle"] = "data-starting-style";
+  ToastRootDataAttributes[ToastRootDataAttributes["startingStyle"] = TransitionStatusDataAttributes.startingStyle] = "startingStyle";
   /**
    * Present when the toast is animating out.
    */
-  ToastRootDataAttributes["endingStyle"] = "data-ending-style";
+  ToastRootDataAttributes[ToastRootDataAttributes["endingStyle"] = TransitionStatusDataAttributes.endingStyle] = "endingStyle";
   return ToastRootDataAttributes;
 }({});

package/esm/toast/store.d.ts

@@ -1,6 +1,13 @@
 import { ReactStore } from '@base-ui/utils/store';
 import { ToastManagerAddOptions, ToastManagerPromiseOptions, ToastManagerUpdateOptions, ToastObject } from "./useToastManager.js";
 type ToastInternalUpdateOptions<Data extends object> = Partial<Omit<ToastObject<Data>, 'id'>>;
+type UpdateToastBehavior = {
+  resetTimer?: boolean | undefined;
+  markUpdated?: boolean | undefined;
+};
+type RemoveToastBehavior = {
+  skipOnRemove?: boolean | undefined;
+};
 export type State = {
   toasts: ToastObject<any>[];
   hovering: boolean;
@@ -34,10 +41,10 @@ export declare class ToastStore extends ReactStore<State, {}, typeof selectors>
   setPrevFocusElement(prevFocusElement: HTMLElement | null): void;
   setViewport: (viewport: HTMLElement | null) => void;
   disposeEffect: () => () => void;
-  removeToast(toastId: string): void;
+  removeToast(toastId: string, behavior?: RemoveToastBehavior): void;
   addToast: <Data extends object>(toast: ToastManagerAddOptions<Data>) => string;
   updateToast: <Data extends object>(id: string, updates: ToastManagerUpdateOptions<Data>) => void;
-  updateToastInternal: <Data extends object>(id: string, updates: ToastInternalUpdateOptions<Data>) => void;
+  updateToastInternal: <Data extends object>(id: string, updates: ToastInternalUpdateOptions<Data>, behavior?: UpdateToastBehavior) => void;
   closeToast: (toastId?: string) => void;
   promiseToast: <Value, Data extends object>(promiseValue: Promise<Value>, options: ToastManagerPromiseOptions<Value, Data>) => Promise<Value>;
   pauseTimers(): void;

package/esm/toast/store.js

@@ -66,30 +66,53 @@ export class ToastStore extends ReactStore {
       this.timers.clear();
     };
   };
-  removeToast(toastId) {
+  removeToast(toastId, behavior = {}) {
     const index = selectors.toastIndex(this.state, toastId);
     if (index === -1) {
       return;
     }
     const toast = this.state.toasts[index];
-    toast?.onRemove?.();
+    if (!behavior.skipOnRemove) {
+      toast?.onRemove?.();
+    }
     const newToasts = [...this.state.toasts];
     newToasts.splice(index, 1);
     this.setToasts(newToasts);
   }
   addToast = toast => {
     const {
-      toasts,
       timeout,
       limit
     } = this.state;
     const id = toast.id || generateId('toast');
+    if (toast.id) {
+      const existingToast = selectors.toast(this.state, toast.id);
+      if (existingToast) {
+        if (existingToast.transitionStatus === 'ending') {
+          this.removeToast(toast.id, {
+            skipOnRemove: true
+          });
+        } else {
+          const {
+            id: ignoredId,
+            transitionStatus: ignoredTransitionStatus,
+            ...updates
+          } = toast;
+          this.updateToastInternal(toast.id, updates, {
+            resetTimer: true,
+            markUpdated: true
+          });
+          return toast.id;
+        }
+      }
+    }
     const toastToAdd = {
       ...toast,
       id,
+      updateKey: 0,
       transitionStatus: 'starting'
     };
-    const updatedToasts = [toastToAdd, ...toasts];
+    const updatedToasts = [toastToAdd, ...this.state.toasts];
     const activeToasts = updatedToasts.filter(t => t.transitionStatus !== 'ending');
 
     // Mark oldest toasts for removal when over limit
@@ -123,9 +146,11 @@ export class ToastStore extends ReactStore {
     return id;
   };
   updateToast = (id, updates) => {
-    this.updateToastInternal(id, updates);
+    this.updateToastInternal(id, updates, {
+      markUpdated: true
+    });
   };
-  updateToastInternal = (id, updates) => {
+  updateToastInternal = (id, updates, behavior = {}) => {
     const {
       timeout,
       toasts
@@ -143,12 +168,12 @@ export class ToastStore extends ReactStore {
     }
     const nextToast = {
       ...prevToast,
-      ...updates
+      ...updates,
+      ...(behavior.markUpdated && {
+        updateKey: (prevToast.updateKey ?? 0) + 1
+      })
     };
-    this.setToasts(toasts.map(toast => toast.id === id ? {
-      ...toast,
-      ...updates
-    } : toast));
+    this.setToasts(toasts.map(toast => toast.id === id ? nextToast : toast));
     const nextTimeout = nextToast.timeout ?? timeout;
     const prevTimeout = prevToast?.timeout ?? timeout;
     const timeoutUpdated = Object.hasOwn(updates, 'timeout');
@@ -164,7 +189,7 @@ export class ToastStore extends ReactStore {
     }
 
     // Schedule or reschedule timer if needed
-    if (shouldHaveTimer && (!hasTimer || timeoutChanged || timeoutUpdated || wasLoading)) {
+    if (shouldHaveTimer && (!hasTimer || timeoutChanged || timeoutUpdated || wasLoading || behavior.resetTimer)) {
       const timer = this.timers.get(id);
       if (timer) {
         timer.timeout?.clear();

package/esm/toast/title/ToastTitle.js

@@ -16,6 +16,7 @@ export const ToastTitle = /*#__PURE__*/React.forwardRef(function ToastTitle(comp
   const {
     render,
     className,
+    style,
     id: idProp,
     children: childrenProp,
     ...elementProps

package/esm/toast/useToastManager.d.ts

@@ -43,6 +43,10 @@ export interface ToastObject<Data extends object> {
    * The transition status of the toast.
    */
   transitionStatus?: 'starting' | 'ending' | undefined;
+  /**
+   * A counter that increments whenever the toast is updated or upserted.
+   */
+  updateKey?: number | undefined;
   /**
    * Determines if the toast was closed due to the limit being reached.
    */
@@ -85,10 +89,14 @@ export interface UseToastManagerReturnValue<Data extends object = any> {
   update: <T extends Data = Data>(toastId: string, options: ToastManagerUpdateOptions<T>) => void;
   promise: <Value, T extends Data = Data>(promise: Promise<Value>, options: ToastManagerPromiseOptions<Value, T>) => Promise<Value>;
 }
-export interface ToastManagerAddOptions<Data extends object> extends Omit<ToastObject<Data>, 'id' | 'animation' | 'height' | 'ref' | 'limited'> {
+export interface ToastManagerAddOptions<Data extends object> extends Omit<ToastObject<Data>, 'id' | 'animation' | 'height' | 'ref' | 'limited' | 'updateKey'> {
+  /**
+   * The unique identifier for the toast. Adding a toast with an existing ID
+   * updates it in place and refreshes its auto-dismiss timer.
+   */
   id?: string | undefined;
 }
-export interface ToastManagerUpdateOptions<Data extends object> extends Partial<Omit<ToastObject<Data>, 'id' | 'ref' | 'height' | 'transitionStatus' | 'limited'>> {}
+export interface ToastManagerUpdateOptions<Data extends object> extends Partial<Omit<ToastObject<Data>, 'id' | 'ref' | 'height' | 'transitionStatus' | 'limited' | 'updateKey'>> {}
 export interface ToastManagerPromiseOptions<Value, Data extends object> {
   loading: string | ToastManagerUpdateOptions<Data>;
   success: string | ToastManagerUpdateOptions<Data> | ((result: Value) => string | ToastManagerUpdateOptions<Data>);

package/esm/toast/viewport/ToastViewport.js

@@ -1,6 +1,8 @@
 'use client';
 
 import * as React from 'react';
+import { addEventListener } from '@base-ui/utils/addEventListener';
+import { mergeCleanups } from '@base-ui/utils/mergeCleanups';
 import { ownerDocument, ownerWindow } from '@base-ui/utils/owner';
 import { visuallyHidden } from '@base-ui/utils/visuallyHidden';
 import { useTimeout } from '@base-ui/utils/useTimeout';
@@ -22,6 +24,7 @@ export const ToastViewport = /*#__PURE__*/React.forwardRef(function ToastViewpor
   const {
     render,
     className,
+    style,
     children,
     ...elementProps
   } = componentProps;
@@ -29,6 +32,7 @@ export const ToastViewport = /*#__PURE__*/React.forwardRef(function ToastViewpor
   const windowFocusTimeout = useTimeout();
   const handlingFocusGuardRef = React.useRef(false);
   const markedReadyForMouseLeaveRef = React.useRef(false);
+  const touchActiveRef = React.useRef(false);
   const isEmpty = store.useState('isEmpty');
   const toasts = store.useState('toasts');
   const focused = store.useState('focused');
@@ -47,7 +51,7 @@ export const ToastViewport = /*#__PURE__*/React.forwardRef(function ToastViewpor
       if (isEmpty) {
         return;
       }
-      if (event.key === 'F6' && event.target !== viewport) {
+      if (event.key === 'F6' && getTarget(event) !== viewport) {
         event.preventDefault();
         store.setPrevFocusElement(activeElement(ownerDocument(viewport)));
         viewport?.focus({
@@ -58,10 +62,7 @@ export const ToastViewport = /*#__PURE__*/React.forwardRef(function ToastViewpor
       }
     }
     const win = ownerWindow(viewport);
-    win.addEventListener('keydown', handleGlobalKeyDown);
-    return () => {
-      win.removeEventListener('keydown', handleGlobalKeyDown);
-    };
+    return addEventListener(win, 'keydown', handleGlobalKeyDown);
   }, [store, isEmpty]);
   React.useEffect(() => {
     const viewport = store.state.viewport;
@@ -70,31 +71,26 @@ export const ToastViewport = /*#__PURE__*/React.forwardRef(function ToastViewpor
     }
     const win = ownerWindow(viewport);
     function handleWindowBlur(event) {
-      if (event.target !== win) {
+      if (getTarget(event) !== win) {
         return;
       }
       store.setIsWindowFocused(false);
       store.pauseTimers();
     }
     function handleWindowFocus(event) {
-      if (event.relatedTarget || event.target === win) {
+      if (event.relatedTarget) {
         return;
       }
       const target = getTarget(event);
       const activeEl = activeElement(ownerDocument(viewport));
-      if (!contains(viewport, target) || !isFocusVisible(activeEl)) {
+      if (target === win || !contains(viewport, target) || !isFocusVisible(activeEl)) {
         store.resumeTimers();
       }
 
       // Wait for the `handleFocus` event to fire.
       windowFocusTimeout.start(0, () => store.setIsWindowFocused(true));
     }
-    win.addEventListener('blur', handleWindowBlur, true);
-    win.addEventListener('focus', handleWindowFocus, true);
-    return () => {
-      win.removeEventListener('blur', handleWindowBlur, true);
-      win.removeEventListener('focus', handleWindowFocus, true);
-    };
+    return mergeCleanups(addEventListener(win, 'blur', handleWindowBlur, true), addEventListener(win, 'focus', handleWindowFocus, true));
   }, [store, windowFocusTimeout,
   // `store.state.viewport` isn't available on the first render,
   // since the portal node hasn't yet been created.
@@ -107,10 +103,7 @@ export const ToastViewport = /*#__PURE__*/React.forwardRef(function ToastViewpor
       return undefined;
     }
     const doc = ownerDocument(viewport);
-    doc.addEventListener('pointerdown', store.handleDocumentPointerDown, true);
-    return () => {
-      doc.removeEventListener('pointerdown', store.handleDocumentPointerDown, true);
-    };
+    return addEventListener(doc, 'pointerdown', store.handleDocumentPointerDown, true);
   }, [isEmpty, store]);
   function handleFocusGuard(event) {
     const viewport = store.state.viewport;
@@ -127,14 +120,15 @@ export const ToastViewport = /*#__PURE__*/React.forwardRef(function ToastViewpor
     }
   }
   function handleKeyDown(event) {
-    if (event.key === 'Tab' && event.shiftKey && event.target === store.state.viewport) {
+    if (event.key === 'Tab' && event.shiftKey && getTarget(event.nativeEvent) === store.state.viewport) {
       event.preventDefault();
       store.restoreFocusToPrevElement();
       store.resumeTimers();
     }
   }
-  React.useEffect(() => {
-    if (!store.state.isWindowFocused || hasTransitioningToasts || !markedReadyForMouseLeaveRef.current) {
+  function flushMouseLeave() {
+    const hasEndingToasts = store.state.toasts.some(toast => toast.transitionStatus === 'ending');
+    if (!store.state.isWindowFocused || hasEndingToasts || touchActiveRef.current || !markedReadyForMouseLeaveRef.current) {
       return;
     }
 
@@ -144,22 +138,35 @@ export const ToastViewport = /*#__PURE__*/React.forwardRef(function ToastViewpor
     store.resumeTimers();
     store.setHovering(false);
     markedReadyForMouseLeaveRef.current = false;
-  }, [hasTransitioningToasts, store]);
+  }
+  React.useEffect(flushMouseLeave, [hasTransitioningToasts, store]);
   function handleMouseEnter() {
     store.pauseTimers();
     store.setHovering(true);
     markedReadyForMouseLeaveRef.current = false;
   }
   function handleMouseLeave() {
-    if (hasTransitioningToasts) {
+    if (hasTransitioningToasts || touchActiveRef.current) {
       // When swiping to dismiss, wait until the transitions have settled
-      // to avoid the viewport collapsing while the user is interacting.
+      // or the touch interaction ends to avoid collapsing mid-gesture.
       markedReadyForMouseLeaveRef.current = true;
     } else {
       store.resumeTimers();
       store.setHovering(false);
     }
   }
+  function handlePointerDown(event) {
+    if (event.pointerType === 'touch') {
+      touchActiveRef.current = true;
+    }
+  }
+  function handlePointerEnd(event) {
+    if (event.pointerType !== 'touch') {
+      return;
+    }
+    touchActiveRef.current = false;
+    flushMouseLeave();
+  }
   function handleFocus() {
     if (handlingFocusGuardRef.current) {
       handlingFocusGuardRef.current = false;
@@ -172,7 +179,7 @@ export const ToastViewport = /*#__PURE__*/React.forwardRef(function ToastViewpor
     // Only set focused when the active element is focus-visible.
     // This prevents the viewport from staying expanded when clicking inside without
     // keyboard navigation.
-    if (isFocusVisible(ownerDocument(store.state.viewport).activeElement)) {
+    if (isFocusVisible(activeElement(ownerDocument(store.state.viewport)))) {
       store.setFocused(true);
       store.pauseTimers();
     }
@@ -197,7 +204,10 @@ export const ToastViewport = /*#__PURE__*/React.forwardRef(function ToastViewpor
     onFocus: handleFocus,
     onBlur: handleBlur,
     onKeyDown: handleKeyDown,
-    onClick: handleFocus
+    onClick: handleFocus,
+    onPointerDown: handlePointerDown,
+    onPointerUp: handlePointerEnd,
+    onPointerCancel: handlePointerEnd
   };
   const state = {
     expanded

package/esm/toggle/Toggle.js

@@ -34,6 +34,7 @@ export const Toggle = /*#__PURE__*/React.forwardRef(function Toggle(componentPro
     // cannot change button type
     value: valueProp,
     nativeButton = true,
+    style,
     ...elementProps
   } = componentProps;
 
@@ -98,6 +99,7 @@ export const Toggle = /*#__PURE__*/React.forwardRef(function Toggle(componentPro
       tag: "button",
       render: render,
       className: className,
+      style: style,
       state: state,
       refs: refs,
       props: props

package/esm/toggle-group/ToggleGroup.js

@@ -36,6 +36,7 @@ export const ToggleGroup = /*#__PURE__*/React.forwardRef(function ToggleGroup(co
     value: valueProp,
     className,
     render,
+    style,
     ...elementProps
   } = componentProps;
   const toolbarContext = useToolbarRootContext(true);
@@ -100,12 +101,14 @@ export const ToggleGroup = /*#__PURE__*/React.forwardRef(function ToggleGroup(co
     children: toolbarContext ? element : /*#__PURE__*/_jsx(CompositeRoot, {
       render: render,
       className: className,
+      style: style,
       state: state,
       refs: [forwardedRef],
       props: [defaultProps, elementProps],
       stateAttributesMapping: stateAttributesMapping,
       loopFocus: loopFocus,
-      enableHomeAndEndKeys: true
+      enableHomeAndEndKeys: true,
+      orientation: orientation
     })
   });
 });

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

@@ -25,7 +25,7 @@ export interface ToolbarButtonProps extends NativeButtonProps, BaseUIComponentPr
    */
   disabled?: boolean | undefined;
   /**
-   * When `true` the item remains focuseable when disabled.
+   * When `true` the item remains focusable when disabled.
    * @default true
    */
   focusableWhenDisabled?: boolean | undefined;

package/esm/toolbar/button/ToolbarButton.js

@@ -20,6 +20,7 @@ export const ToolbarButton = /*#__PURE__*/React.forwardRef(function ToolbarButto
     focusableWhenDisabled = true,
     render,
     nativeButton = true,
+    style,
     ...elementProps
   } = componentProps;
   const itemMetadata = React.useMemo(() => ({
@@ -48,6 +49,7 @@ export const ToolbarButton = /*#__PURE__*/React.forwardRef(function ToolbarButto
     tag: "button",
     render: render,
     className: className,
+    style: style,
     metadata: itemMetadata,
     state: state,
     refs: [forwardedRef, buttonRef],

package/esm/toolbar/group/ToolbarGroup.js

@@ -17,6 +17,7 @@ export const ToolbarGroup = /*#__PURE__*/React.forwardRef(function ToolbarGroup(
     className,
     disabled: disabledProp = false,
     render,
+    style,
     ...elementProps
   } = componentProps;
   const {

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

@@ -25,7 +25,7 @@ export interface ToolbarInputProps extends BaseUIComponentProps<'input', Toolbar
    */
   disabled?: boolean | undefined;
   /**
-   * When `true` the item remains focuseable when disabled.
+   * When `true` the item remains focusable when disabled.
    * @default true
    */
   focusableWhenDisabled?: boolean | undefined;

package/esm/toolbar/input/ToolbarInput.js

@@ -20,6 +20,7 @@ export const ToolbarInput = /*#__PURE__*/React.forwardRef(function ToolbarInput(
     focusableWhenDisabled = true,
     render,
     disabled: disabledProp = false,
+    style,
     ...elementProps
   } = componentProps;
   const itemMetadata = React.useMemo(() => ({
@@ -65,6 +66,7 @@ export const ToolbarInput = /*#__PURE__*/React.forwardRef(function ToolbarInput(
     tag: "input",
     render: render,
     className: className,
+    style: style,
     metadata: itemMetadata,
     state: state,
     refs: [forwardedRef],

package/esm/toolbar/link/ToolbarLink.js

@@ -20,6 +20,7 @@ export const ToolbarLink = /*#__PURE__*/React.forwardRef(function ToolbarLink(co
   const {
     className,
     render,
+    style,
     ...elementProps
   } = componentProps;
   const {
@@ -32,6 +33,7 @@ export const ToolbarLink = /*#__PURE__*/React.forwardRef(function ToolbarLink(co
     tag: "a",
     render: render,
     className: className,
+    style: style,
     metadata: TOOLBAR_LINK_METADATA,
     state: state,
     refs: [forwardedRef],

package/esm/toolbar/root/ToolbarRoot.js

@@ -18,6 +18,7 @@ export const ToolbarRoot = /*#__PURE__*/React.forwardRef(function ToolbarRoot(co
     orientation = 'horizontal',
     className,
     render,
+    style,
     ...elementProps
   } = componentProps;
   const [itemMap, setItemMap] = React.useState(() => new Map());
@@ -48,6 +49,7 @@ export const ToolbarRoot = /*#__PURE__*/React.forwardRef(function ToolbarRoot(co
     children: /*#__PURE__*/_jsx(CompositeRoot, {
       render: render,
       className: className,
+      style: style,
       state: state,
       refs: [forwardedRef],
       props: [defaultProps, elementProps],

package/esm/tooltip/arrow/TooltipArrow.js

@@ -16,12 +16,13 @@ export const TooltipArrow = /*#__PURE__*/React.forwardRef(function TooltipArrow(
   const {
     className,
     render,
+    style,
     ...elementProps
   } = componentProps;
   const store = useTooltipRootContext();
+  const open = store.useState('open');
   const instantType = store.useState('instantType');
   const {
-    open,
     arrowRef,
     side,
     align,

package/esm/tooltip/index.d.ts

@@ -5,4 +5,5 @@ export type * from "./trigger/TooltipTrigger.js";
 export type * from "./portal/TooltipPortal.js";
 export type * from "./positioner/TooltipPositioner.js";
 export type * from "./popup/TooltipPopup.js";
+export type * from "./viewport/TooltipViewport.js";
 export type * from "./arrow/TooltipArrow.js";

package/esm/tooltip/popup/TooltipPopup.js

@@ -24,6 +24,7 @@ export const TooltipPopup = /*#__PURE__*/React.forwardRef(function TooltipPopup(
   const {
     className,
     render,
+    style,
     ...elementProps
   } = componentProps;
   const store = useTooltipRootContext();

package/esm/tooltip/positioner/TooltipPositioner.js

@@ -4,12 +4,10 @@ import * as React from 'react';
 import { useTooltipRootContext } from "../root/TooltipRootContext.js";
 import { TooltipPositionerContext } from "./TooltipPositionerContext.js";
 import { useAnchorPositioning } from "../../utils/useAnchorPositioning.js";
-import { popupStateMapping } from "../../utils/popupStateMapping.js";
 import { useTooltipPortalContext } from "../portal/TooltipPortalContext.js";
-import { useRenderElement } from "../../utils/useRenderElement.js";
 import { POPUP_COLLISION_AVOIDANCE } from "../../utils/constants.js";
 import { adaptiveOrigin } from "../../utils/adaptiveOriginMiddleware.js";
-import { getDisabledMountTransitionStyles } from "../../utils/getDisabledMountTransitionStyles.js";
+import { usePositioner } from "../../utils/usePositioner.js";
 
 /**
  * Positions the tooltip against the trigger.
@@ -34,6 +32,7 @@ export const TooltipPositioner = /*#__PURE__*/React.forwardRef(function TooltipP
     sticky = false,
     disableAnchorTracking = false,
     collisionAvoidance = POPUP_COLLISION_AVOIDANCE,
+    style,
     ...elementProps
   } = componentProps;
   const store = useTooltipRootContext();
@@ -64,20 +63,6 @@ export const TooltipPositioner = /*#__PURE__*/React.forwardRef(function TooltipP
     collisionAvoidance,
     adaptiveOrigin: hasViewport ? adaptiveOrigin : undefined
   });
-  const defaultProps = React.useMemo(() => {
-    const hiddenStyles = {};
-    if (!open || trackCursorAxis === 'both' || disableHoverablePopup) {
-      hiddenStyles.pointerEvents = 'none';
-    }
-    return {
-      role: 'presentation',
-      hidden: !mounted,
-      style: {
-        ...positioning.positionerStyles,
-        ...hiddenStyles
-      }
-    };
-  }, [open, trackCursorAxis, disableHoverablePopup, mounted, positioning.positionerStyles]);
   const state = React.useMemo(() => ({
     open,
     side: positioning.side,
@@ -85,20 +70,16 @@ export const TooltipPositioner = /*#__PURE__*/React.forwardRef(function TooltipP
     anchorHidden: positioning.anchorHidden,
     instant: trackCursorAxis !== 'none' ? 'tracking-cursor' : instantType
   }), [open, positioning.side, positioning.align, positioning.anchorHidden, trackCursorAxis, instantType]);
-  const contextValue = React.useMemo(() => ({
-    ...state,
-    arrowRef: positioning.arrowRef,
-    arrowStyles: positioning.arrowStyles,
-    arrowUncentered: positioning.arrowUncentered
-  }), [state, positioning.arrowRef, positioning.arrowStyles, positioning.arrowUncentered]);
-  const element = useRenderElement('div', componentProps, {
-    state,
-    props: [defaultProps, getDisabledMountTransitionStyles(transitionStatus), elementProps],
-    ref: [forwardedRef, store.useStateSetter('positionerElement')],
-    stateAttributesMapping: popupStateMapping
+  const element = usePositioner(componentProps, state, {
+    styles: positioning.positionerStyles,
+    transitionStatus,
+    props: elementProps,
+    refs: [forwardedRef, store.useStateSetter('positionerElement')],
+    hidden: !mounted,
+    inert: !open || trackCursorAxis === 'both' || disableHoverablePopup
   });
   return /*#__PURE__*/_jsx(TooltipPositionerContext.Provider, {
-    value: contextValue,
+    value: positioning,
     children: element
   });
 });