@base-ui/react 1.4.1 → 1.5.0

package/esm/toast/root/ToastRoot.js

@@ -3,7 +3,7 @@
 import * as React from 'react';
 import * as ReactDOM from 'react-dom';
 import { addEventListener } from '@base-ui/utils/addEventListener';
-import { ownerDocument, ownerWindow } from '@base-ui/utils/owner';
+import { ownerDocument } 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';
@@ -15,6 +15,7 @@ import { useRenderElement } from "../../internals/useRenderElement.js";
 import { useOpenChangeComplete } from "../../internals/useOpenChangeComplete.js";
 import { ToastRootCssVars } from "./ToastRootCssVars.js";
 import { BASE_UI_SWIPE_IGNORE_SELECTOR, LEGACY_SWIPE_IGNORE_SELECTOR } from "../../internals/constants.js";
+import { getDisplacement, getElementTransform } from "../../utils/useSwipeDismiss.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 const stateAttributesMapping = {
   ...transitionStatusMapping,
@@ -29,47 +30,6 @@ const REVERSE_CANCEL_THRESHOLD = 10;
 const OPPOSITE_DIRECTION_DAMPING_FACTOR = 0.5;
 const MIN_DRAG_THRESHOLD = 1;
 const TOAST_SWIPE_IGNORE_SELECTOR = `${BASE_UI_SWIPE_IGNORE_SELECTOR},${LEGACY_SWIPE_IGNORE_SELECTOR}`;
-function getDisplacement(direction, deltaX, deltaY) {
-  switch (direction) {
-    case 'up':
-      return -deltaY;
-    case 'down':
-      return deltaY;
-    case 'left':
-      return -deltaX;
-    case 'right':
-      return deltaX;
-    default:
-      return 0;
-  }
-}
-function getElementTransform(element) {
-  const computedStyle = ownerWindow(element).getComputedStyle(element);
-  const transform = computedStyle.transform;
-  let translateX = 0;
-  let translateY = 0;
-  let scale = 1;
-  if (transform && transform !== 'none') {
-    const matrix = transform.match(/matrix(?:3d)?\(([^)]+)\)/);
-    if (matrix) {
-      const values = matrix[1].split(', ').map(parseFloat);
-      if (values.length === 6) {
-        translateX = values[4];
-        translateY = values[5];
-        scale = Math.sqrt(values[0] * values[0] + values[1] * values[1]);
-      } else if (values.length === 16) {
-        translateX = values[12];
-        translateY = values[13];
-        scale = values[0];
-      }
-    }
-  }
-  return {
-    x: translateX,
-    y: translateY,
-    scale
-  };
-}
 
 /**
  * Groups all parts of an individual toast.
@@ -127,6 +87,12 @@ export const ToastRoot = /*#__PURE__*/React.forwardRef(function ToastRoot(compon
     y: 0
   });
   const isFirstPointerMoveRef = React.useRef(false);
+  const dragOffsetRef = React.useRef({
+    x: 0,
+    y: 0
+  });
+  const activePointerIdRef = React.useRef(null);
+  const dragAbortControllerRef = React.useRef(null);
   const domIndex = store.useState('toastIndex', toast.id);
   const visibleIndex = store.useState('toastVisibleIndex', toast.id);
   const offsetY = store.useState('toastOffsetY', toast.id);
@@ -142,11 +108,8 @@ export const ToastRoot = /*#__PURE__*/React.forwardRef(function ToastRoot(compon
     }
   });
 
-  /**
-   * Recalculates the natural height of the toast and updates it in the toast manager.
-   * @param flushSync Whether to flush the update synchronously. Use in observer
-   * callbacks to avoid visual flickers.
-   */
+  // Recalculates the natural height of the toast and updates it in the toast manager.
+  // `flushSync` avoids visual flickers when called from observer callbacks.
   const recalculateHeight = useStableCallback((flushSync = false) => {
     const element = rootRef.current;
     if (!element) {
@@ -172,6 +135,15 @@ export const ToastRoot = /*#__PURE__*/React.forwardRef(function ToastRoot(compon
     }
   });
   useIsoLayoutEffect(recalculateHeight, [recalculateHeight]);
+  function setResolvedDragOffset(nextDragOffset) {
+    dragOffsetRef.current = nextDragOffset;
+    setDragOffset(nextDragOffset);
+  }
+  useIsoLayoutEffect(() => {
+    return () => {
+      dragAbortControllerRef.current?.abort();
+    };
+  }, []);
   function applyDirectionalDamping(deltaX, deltaY) {
     let newDeltaX = deltaX;
     let newDeltaY = deltaY;
@@ -200,6 +172,75 @@ export const ToastRoot = /*#__PURE__*/React.forwardRef(function ToastRoot(compon
       y: newDeltaY
     };
   }
+  const handleSwipeEnd = useStableCallback(event => {
+    if (event.pointerId !== activePointerIdRef.current) {
+      return;
+    }
+    activePointerIdRef.current = null;
+    dragAbortControllerRef.current?.abort();
+    dragAbortControllerRef.current = null;
+    setIsSwiping(false);
+    setIsRealSwipe(false);
+    setLockedDirection(null);
+    const resolvedInitialTransform = initialTransformRef.current;
+    if (event.type === 'pointercancel' || cancelledSwipeRef.current) {
+      setResolvedDragOffset({
+        x: resolvedInitialTransform.x,
+        y: resolvedInitialTransform.y
+      });
+      setCurrentSwipeDirection(undefined);
+      return;
+    }
+    let shouldClose = false;
+    const resolvedDragOffset = dragOffsetRef.current;
+    const deltaX = resolvedDragOffset.x - resolvedInitialTransform.x;
+    const deltaY = resolvedDragOffset.y - resolvedInitialTransform.y;
+    let dismissDirection;
+    for (const direction of swipeDirections) {
+      switch (direction) {
+        case 'right':
+          if (deltaX > SWIPE_THRESHOLD) {
+            shouldClose = true;
+            dismissDirection = 'right';
+          }
+          break;
+        case 'left':
+          if (deltaX < -SWIPE_THRESHOLD) {
+            shouldClose = true;
+            dismissDirection = 'left';
+          }
+          break;
+        case 'down':
+          if (deltaY > SWIPE_THRESHOLD) {
+            shouldClose = true;
+            dismissDirection = 'down';
+          }
+          break;
+        case 'up':
+          if (deltaY < -SWIPE_THRESHOLD) {
+            shouldClose = true;
+            dismissDirection = 'up';
+          }
+          break;
+        default:
+          break;
+      }
+      if (shouldClose) {
+        break;
+      }
+    }
+    if (shouldClose) {
+      setCurrentSwipeDirection(dismissDirection);
+      setDragDismissed(true);
+      store.closeToast(toast.id);
+    } else {
+      setResolvedDragOffset({
+        x: resolvedInitialTransform.x,
+        y: resolvedInitialTransform.y
+      });
+      setCurrentSwipeDirection(undefined);
+    }
+  });
   function handlePointerDown(event) {
     if (event.button !== 0) {
       return;
@@ -215,6 +256,7 @@ export const ToastRoot = /*#__PURE__*/React.forwardRef(function ToastRoot(compon
     cancelledSwipeRef.current = false;
     intendedSwipeDirectionRef.current = undefined;
     maxSwipeDisplacementRef.current = 0;
+    activePointerIdRef.current = event.pointerId;
     dragStartPosRef.current = {
       x: event.clientX,
       y: event.clientY
@@ -224,7 +266,7 @@ export const ToastRoot = /*#__PURE__*/React.forwardRef(function ToastRoot(compon
       const transform = getElementTransform(rootRef.current);
       initialTransformRef.current = transform;
       setInitialTransform(transform);
-      setDragOffset({
+      setResolvedDragOffset({
         x: transform.x,
         y: transform.y
       });
@@ -234,10 +276,23 @@ export const ToastRoot = /*#__PURE__*/React.forwardRef(function ToastRoot(compon
     setIsRealSwipe(false);
     setLockedDirection(null);
     isFirstPointerMoveRef.current = true;
-    rootRef.current?.setPointerCapture(event.pointerId);
+    const element = rootRef.current;
+    if (element) {
+      dragAbortControllerRef.current?.abort();
+      const dragAbortController = new AbortController();
+      dragAbortControllerRef.current = dragAbortController;
+      const doc = ownerDocument(element);
+      doc.addEventListener('pointerup', handleSwipeEnd, {
+        signal: dragAbortController.signal
+      });
+      doc.addEventListener('pointercancel', handleSwipeEnd, {
+        signal: dragAbortController.signal
+      });
+      element.setPointerCapture?.(event.pointerId);
+    }
   }
   function handlePointerMove(event) {
-    if (!isSwiping) {
+    if (event.pointerId !== activePointerIdRef.current) {
       return;
     }
 
@@ -343,89 +398,11 @@ export const ToastRoot = /*#__PURE__*/React.forwardRef(function ToastRoot(compon
         newOffsetY += dampedDelta.y;
       }
     }
-    setDragOffset({
+    setResolvedDragOffset({
       x: newOffsetX,
       y: newOffsetY
     });
   }
-  function handlePointerUp(event) {
-    if (!isSwiping) {
-      return;
-    }
-    setIsSwiping(false);
-    setIsRealSwipe(false);
-    setLockedDirection(null);
-    rootRef.current?.releasePointerCapture(event.pointerId);
-    if (cancelledSwipeRef.current) {
-      setDragOffset({
-        x: initialTransform.x,
-        y: initialTransform.y
-      });
-      setCurrentSwipeDirection(undefined);
-      return;
-    }
-    let shouldClose = false;
-    const deltaX = dragOffset.x - initialTransform.x;
-    const deltaY = dragOffset.y - initialTransform.y;
-    let dismissDirection;
-    for (const direction of swipeDirections) {
-      switch (direction) {
-        case 'right':
-          if (deltaX > SWIPE_THRESHOLD) {
-            shouldClose = true;
-            dismissDirection = 'right';
-          }
-          break;
-        case 'left':
-          if (deltaX < -SWIPE_THRESHOLD) {
-            shouldClose = true;
-            dismissDirection = 'left';
-          }
-          break;
-        case 'down':
-          if (deltaY > SWIPE_THRESHOLD) {
-            shouldClose = true;
-            dismissDirection = 'down';
-          }
-          break;
-        case 'up':
-          if (deltaY < -SWIPE_THRESHOLD) {
-            shouldClose = true;
-            dismissDirection = 'up';
-          }
-          break;
-        default:
-          break;
-      }
-      if (shouldClose) {
-        break;
-      }
-    }
-    if (shouldClose) {
-      setCurrentSwipeDirection(dismissDirection);
-      setDragDismissed(true);
-      store.closeToast(toast.id);
-    } else {
-      setDragOffset({
-        x: initialTransform.x,
-        y: initialTransform.y
-      });
-      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)))) {
@@ -479,8 +456,8 @@ export const ToastRoot = /*#__PURE__*/React.forwardRef(function ToastRoot(compon
     'aria-hidden': isHighPriority && !focused ? true : undefined,
     onPointerDown: swipeEnabled ? handlePointerDown : undefined,
     onPointerMove: swipeEnabled ? handlePointerMove : undefined,
-    onPointerUp: swipeEnabled ? handlePointerUp : undefined,
-    onPointerCancel: swipeEnabled ? handlePointerCancel : undefined,
+    onPointerUp: swipeEnabled ? handleSwipeEnd : undefined,
+    onPointerCancel: swipeEnabled ? handleSwipeEnd : undefined,
     onKeyDown: handleKeyDown,
     inert: inertValue(toast.limited),
     style: {

package/esm/toast/root/ToastRootDataAttributes.d.ts

@@ -5,7 +5,7 @@ export declare enum ToastRootDataAttributes {
    */
   expanded = "data-expanded",
   /**
-   * Present when the toast was removed due to exceeding the limit.
+   * Present when the toast was limited because the toast limit was exceeded.
    * @type {boolean}
    */
   limited = "data-limited",

package/esm/toast/root/ToastRootDataAttributes.js

@@ -6,7 +6,7 @@ export let ToastRootDataAttributes = function (ToastRootDataAttributes) {
    */
   ToastRootDataAttributes["expanded"] = "data-expanded";
   /**
-   * Present when the toast was removed due to exceeding the limit.
+   * Present when the toast was limited because the toast limit was exceeded.
    * @type {boolean}
    */
   ToastRootDataAttributes["limited"] = "data-limited";

package/esm/toast/store.d.ts

@@ -10,6 +10,7 @@ type RemoveToastBehavior = {
 };
 export type State = {
   toasts: ToastObject<any>[];
+  toastMetadata: Map<string, ToastMetadata>;
   hovering: boolean;
   focused: boolean;
   timeout: number;
@@ -18,6 +19,13 @@ export type State = {
   viewport: HTMLElement | null;
   prevFocusElement: HTMLElement | null;
 };
+type ToastMetadata = {
+  value: ToastObject<any>;
+  domIndex: number;
+  visibleIndex: number;
+  offsetY: number;
+};
+type InitialState = Omit<State, 'toastMetadata'>;
 export declare const selectors: {
   toasts: (state: State) => ToastObject<any>[];
   isEmpty: (state: State) => boolean;
@@ -34,7 +42,7 @@ export declare const selectors: {
 export declare class ToastStore extends ReactStore<State, {}, typeof selectors> {
   private timers;
   private areTimersPaused;
-  constructor(initialState: State);
+  constructor(initialState: InitialState);
   setFocused(focused: boolean): void;
   setHovering(hovering: boolean): void;
   setIsWindowFocused(isWindowFocused: boolean): void;

package/esm/toast/store.js

@@ -1,17 +1,17 @@
-import { ReactStore, createSelector, createSelectorMemoized } from '@base-ui/utils/store';
+import { ReactStore, createSelector } from '@base-ui/utils/store';
 import { generateId } from '@base-ui/utils/generateId';
 import { ownerDocument } from '@base-ui/utils/owner';
 import { Timeout } from '@base-ui/utils/useTimeout';
 import { resolvePromiseOptions } from "./utils/resolvePromiseOptions.js";
 import { activeElement, contains, getTarget } from "../floating-ui-react/utils.js";
 import { isFocusVisible } from "./utils/focusVisible.js";
-const toastMapSelector = createSelectorMemoized(state => state.toasts, toasts => {
-  const map = new Map();
+function createToastMetadata(toasts) {
+  const metadata = new Map();
   let visibleIndex = 0;
   let offsetY = 0;
   toasts.forEach((toast, toastIndex) => {
     const isEnding = toast.transitionStatus === 'ending';
-    map.set(toast.id, {
+    metadata.set(toast.id, {
       value: toast,
       domIndex: toastIndex,
       visibleIndex: isEnding ? -1 : visibleIndex,
@@ -22,15 +22,16 @@ const toastMapSelector = createSelectorMemoized(state => state.toasts, toasts =>
       visibleIndex += 1;
     }
   });
-  return map;
-});
+  return metadata;
+}
+const toastMetadataSelector = state => state.toastMetadata;
 export const selectors = {
   toasts: createSelector(state => state.toasts),
   isEmpty: createSelector(state => state.toasts.length === 0),
-  toast: createSelector(toastMapSelector, (toastMap, id) => toastMap.get(id)?.value),
-  toastIndex: createSelector(toastMapSelector, (toastMap, id) => toastMap.get(id)?.domIndex ?? -1),
-  toastOffsetY: createSelector(toastMapSelector, (toastMap, id) => toastMap.get(id)?.offsetY ?? 0),
-  toastVisibleIndex: createSelector(toastMapSelector, (toastMap, id) => toastMap.get(id)?.visibleIndex ?? -1),
+  toast: createSelector(toastMetadataSelector, (toastMetadata, id) => toastMetadata.get(id)?.value),
+  toastIndex: createSelector(toastMetadataSelector, (toastMetadata, id) => toastMetadata.get(id)?.domIndex ?? -1),
+  toastOffsetY: createSelector(toastMetadataSelector, (toastMetadata, id) => toastMetadata.get(id)?.offsetY ?? 0),
+  toastVisibleIndex: createSelector(toastMetadataSelector, (toastMetadata, id) => toastMetadata.get(id)?.visibleIndex ?? -1),
   hovering: createSelector(state => state.hovering),
   focused: createSelector(state => state.focused),
   expanded: createSelector(state => state.hovering || state.focused),
@@ -41,7 +42,10 @@ export class ToastStore extends ReactStore {
   timers = new Map();
   areTimersPaused = false;
   constructor(initialState) {
-    super(initialState, {}, selectors);
+    super({
+      ...initialState,
+      toastMetadata: createToastMetadata(initialState.toasts)
+    }, {}, selectors);
   }
   setFocused(focused) {
     this.set('focused', focused);
@@ -246,7 +250,8 @@ export class ToastStore extends ReactStore {
       } : item;
     });
     const updates = {
-      toasts: newToasts
+      toasts: newToasts,
+      toastMetadata: createToastMetadata(newToasts)
     };
     if (closeAll || toasts.length === 1) {
       updates.hovering = false;
@@ -358,7 +363,8 @@ export class ToastStore extends ReactStore {
   }
   setToasts(newToasts) {
     const updates = {
-      toasts: newToasts
+      toasts: newToasts,
+      toastMetadata: createToastMetadata(newToasts)
     };
     if (newToasts.length === 0) {
       updates.hovering = false;

package/esm/toast/useToastManager.d.ts

@@ -48,7 +48,7 @@ export interface ToastObject<Data extends object> {
    */
   updateKey?: number | undefined;
   /**
-   * Determines if the toast was closed due to the limit being reached.
+   * Determines if the toast was limited because the toast limit was exceeded.
    */
   limited?: boolean | undefined;
   /**

package/esm/toast/viewport/ToastViewport.js

@@ -40,6 +40,7 @@ export const ToastViewport = /*#__PURE__*/React.forwardRef(function ToastViewpor
   const prevFocusElement = store.useState('prevFocusElement');
   const frontmostHeight = toasts[0]?.height ?? 0;
   const hasTransitioningToasts = React.useMemo(() => toasts.some(toast => toast.transitionStatus === 'ending'), [toasts]);
+  const highPriorityToasts = React.useMemo(() => toasts.filter(toast => toast.priority === 'high'), [toasts]);
 
   // Listen globally for F6 so we can force-focus the viewport.
   React.useEffect(() => {
@@ -229,7 +230,6 @@ export const ToastViewport = /*#__PURE__*/React.forwardRef(function ToastViewpor
       })
     }]
   });
-  const highPriorityToasts = React.useMemo(() => toasts.filter(toast => toast.priority === 'high'), [toasts]);
   return /*#__PURE__*/_jsxs(React.Fragment, {
     children: [!isEmpty && prevFocusElement && /*#__PURE__*/_jsx(FocusGuard, {
       onFocus: handleFocusGuard

package/esm/toggle/Toggle.js

@@ -1,7 +1,6 @@
 'use client';
 
 import * as React from 'react';
-import { useStableCallback } from '@base-ui/utils/useStableCallback';
 import { useControlled } from '@base-ui/utils/useControlled';
 import { useIsoLayoutEffect } from '@base-ui/utils/useIsoLayoutEffect';
 import { error } from '@base-ui/utils/error';
@@ -27,7 +26,7 @@ export const Toggle = /*#__PURE__*/React.forwardRef(function Toggle(componentPro
     disabled: disabledProp = false,
     form,
     // never participates in form validation
-    onPressedChange: onPressedChangeProp,
+    onPressedChange,
     pressed: pressedProp,
     render,
     type,
@@ -58,12 +57,6 @@ export const Toggle = /*#__PURE__*/React.forwardRef(function Toggle(componentPro
     name: 'Toggle',
     state: 'pressed'
   });
-  const onPressedChange = useStableCallback((nextPressed, eventDetails) => {
-    if (value) {
-      groupContext?.setGroupValue?.(value, nextPressed, eventDetails);
-    }
-    onPressedChangeProp?.(nextPressed, eventDetails);
-  });
   const {
     getButtonProps,
     buttonRef
@@ -81,7 +74,10 @@ export const Toggle = /*#__PURE__*/React.forwardRef(function Toggle(componentPro
     onClick(event) {
       const nextPressed = !pressed;
       const details = createChangeEventDetails(REASONS.none, event.nativeEvent);
-      onPressedChange(nextPressed, details);
+      if (value) {
+        groupContext?.setGroupValue?.(value, nextPressed, details);
+      }
+      onPressedChange?.(nextPressed, details);
       if (details.isCanceled) {
         return;
       }

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

@@ -29,13 +29,13 @@ export interface ToggleGroupState {
 }
 export interface ToggleGroupProps<Value extends string> extends BaseUIComponentProps<'div', ToggleGroupState> {
   /**
-   * The open state of the toggle group represented by an array of
+   * The pressed state of the toggle group represented by an array of
    * the values of all pressed toggle buttons.
    * This is the controlled counterpart of `defaultValue`.
    */
   value?: readonly Value[] | undefined;
   /**
-   * The open state of the toggle group represented by an array of
+   * The pressed state of the toggle group represented by an array of
    * the values of all pressed toggle buttons.
    * This is the uncontrolled counterpart of `value`.
    */

package/esm/toggle-group/ToggleGroup.js

@@ -3,6 +3,7 @@
 import * as React from 'react';
 import { useStableCallback } from '@base-ui/utils/useStableCallback';
 import { useControlled } from '@base-ui/utils/useControlled';
+import { EMPTY_ARRAY } from '@base-ui/utils/empty';
 import { useRenderElement } from "../internals/useRenderElement.js";
 import { CompositeRoot } from "../internals/composite/root/CompositeRoot.js";
 import { useToolbarRootContext } from "../toolbar/root/ToolbarRootContext.js";
@@ -40,17 +41,11 @@ export const ToggleGroup = /*#__PURE__*/React.forwardRef(function ToggleGroup(co
     ...elementProps
   } = componentProps;
   const toolbarContext = useToolbarRootContext(true);
-  const defaultValue = React.useMemo(() => {
-    if (valueProp === undefined) {
-      return defaultValueProp ?? [];
-    }
-    return undefined;
-  }, [valueProp, defaultValueProp]);
   const isValueInitialized = React.useMemo(() => valueProp !== undefined || defaultValueProp !== undefined, [valueProp, defaultValueProp]);
   const disabled = (toolbarContext?.disabled ?? false) || disabledProp;
   const [groupValue, setValueState] = useControlled({
     controlled: valueProp,
-    default: defaultValue,
+    default: valueProp === undefined ? defaultValueProp ?? EMPTY_ARRAY : undefined,
     name: 'ToggleGroup',
     state: 'value'
   });
@@ -66,13 +61,11 @@ export const ToggleGroup = /*#__PURE__*/React.forwardRef(function ToggleGroup(co
     } else {
       newGroupValue = nextPressed ? [newValue] : [];
     }
-    if (Array.isArray(newGroupValue)) {
-      onValueChange?.(newGroupValue, eventDetails);
-      if (eventDetails.isCanceled) {
-        return;
-      }
-      setValueState(newGroupValue);
+    onValueChange?.(newGroupValue, eventDetails);
+    if (eventDetails.isCanceled) {
+      return;
     }
+    setValueState(newGroupValue);
   });
   const state = {
     disabled,

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

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { BaseUIComponentProps } from "../../internals/types.js";
+import type { BaseUIComponentProps } from "../../internals/types.js";
 import type { ToolbarRoot } from "../root/ToolbarRoot.js";
 /**
  * A link component.

package/esm/toolbar/link/ToolbarLink.js

@@ -5,8 +5,7 @@ import { useToolbarRootContext } from "../root/ToolbarRootContext.js";
 import { CompositeItem } from "../../internals/composite/item/CompositeItem.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 const TOOLBAR_LINK_METADATA = {
-  // links cannot be disabled, this metadata is only used for deriving `disabledIndices``
-  // TODO: better name
+  // Links cannot be disabled, but they still occupy a focusable composite item slot.
   focusableWhenDisabled: true
 };
 

package/esm/tooltip/arrow/TooltipArrow.js

@@ -14,14 +14,12 @@ import { useTooltipRootContext } from "../root/TooltipRootContext.js";
  */
 export const TooltipArrow = /*#__PURE__*/React.forwardRef(function TooltipArrow(componentProps, forwardedRef) {
   const {
-    className,
     render,
+    className,
     style,
     ...elementProps
   } = componentProps;
   const store = useTooltipRootContext();
-  const open = store.useState('open');
-  const instantType = store.useState('instantType');
   const {
     arrowRef,
     side,
@@ -29,6 +27,8 @@ export const TooltipArrow = /*#__PURE__*/React.forwardRef(function TooltipArrow(
     arrowUncentered,
     arrowStyles
   } = useTooltipPositionerContext();
+  const open = store.useState('open');
+  const instantType = store.useState('instantType');
   const state = {
     open,
     side,

package/esm/tooltip/popup/TooltipPopup.js

@@ -22,8 +22,8 @@ const stateAttributesMapping = {
  */
 export const TooltipPopup = /*#__PURE__*/React.forwardRef(function TooltipPopup(componentProps, forwardedRef) {
   const {
-    className,
     render,
+    className,
     style,
     ...elementProps
   } = componentProps;
@@ -37,6 +37,8 @@ export const TooltipPopup = /*#__PURE__*/React.forwardRef(function TooltipPopup(
   const transitionStatus = store.useState('transitionStatus');
   const popupProps = store.useState('popupProps');
   const floatingContext = store.useState('floatingRootContext');
+  const disabled = store.useState('disabled');
+  const closeDelay = store.useState('closeDelay');
   useOpenChangeComplete({
     open,
     ref: store.context.popupRef,
@@ -46,12 +48,11 @@ export const TooltipPopup = /*#__PURE__*/React.forwardRef(function TooltipPopup(
       }
     }
   });
-  const disabled = store.useState('disabled');
-  const closeDelay = store.useState('closeDelay');
   useHoverFloatingInteraction(floatingContext, {
     enabled: !disabled,
     closeDelay
   });
+  const setPopupElement = store.useStateSetter('popupElement');
   const state = {
     open,
     side,
@@ -61,7 +62,7 @@ export const TooltipPopup = /*#__PURE__*/React.forwardRef(function TooltipPopup(
   };
   const element = useRenderElement('div', componentProps, {
     state,
-    ref: [forwardedRef, store.context.popupRef, store.useStateSetter('popupElement')],
+    ref: [forwardedRef, store.context.popupRef, setPopupElement],
     props: [popupProps, getDisabledMountTransitionStyles(transitionStatus), elementProps],
     stateAttributesMapping
   });