@base-ui/react 1.3.0 → 1.4.0

package/toast/root/ToastRoot.js

@@ -8,6 +8,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.ToastRoot = void 0;
 var React = _interopRequireWildcard(require("react"));
 var ReactDOM = _interopRequireWildcard(require("react-dom"));
+var _addEventListener = require("@base-ui/utils/addEventListener");
 var _owner = require("@base-ui/utils/owner");
 var _inertValue = require("@base-ui/utils/inertValue");
 var _useIsoLayoutEffect = require("@base-ui/utils/useIsoLayoutEffect");
@@ -49,7 +50,7 @@ function getDisplacement(direction, deltaX, deltaY) {
   }
 }
 function getElementTransform(element) {
-  const computedStyle = window.getComputedStyle(element);
+  const computedStyle = (0, _owner.ownerWindow)(element).getComputedStyle(element);
   const transform = computedStyle.transform;
   let translateX = 0;
   let translateY = 0;
@@ -88,6 +89,7 @@ const ToastRoot = exports.ToastRoot = /*#__PURE__*/React.forwardRef(function Toa
     render,
     className,
     swipeDirection = ['down', 'right'],
+    style,
     ...elementProps
   } = componentProps;
   const isAnchored = toast.positionerProps?.anchor !== undefined;
@@ -417,6 +419,19 @@ const ToastRoot = exports.ToastRoot = /*#__PURE__*/React.forwardRef(function Toa
       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 || !(0, _utils.contains)(rootRef.current, (0, _utils.activeElement)((0, _owner.ownerDocument)(rootRef.current)))) {
@@ -434,16 +449,13 @@ const ToastRoot = exports.ToastRoot = /*#__PURE__*/React.forwardRef(function Toa
       return undefined;
     }
     function preventDefaultTouchStart(event) {
-      if ((0, _utils.contains)(element, event.target)) {
+      if ((0, _utils.contains)(element, (0, _utils.getTarget)(event))) {
         event.preventDefault();
       }
     }
-    element.addEventListener('touchmove', preventDefaultTouchStart, {
+    return (0, _addEventListener.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) {
@@ -474,6 +486,7 @@ const ToastRoot = exports.ToastRoot = /*#__PURE__*/React.forwardRef(function Toa
     onPointerDown: swipeEnabled ? handlePointerDown : undefined,
     onPointerMove: swipeEnabled ? handlePointerMove : undefined,
     onPointerUp: swipeEnabled ? handlePointerUp : undefined,
+    onPointerCancel: swipeEnabled ? handlePointerCancel : undefined,
     onKeyDown: handleKeyDown,
     inert: (0, _inertValue.inertValue)(toast.limited),
     style: {

package/toast/root/ToastRootDataAttributes.js

@@ -4,7 +4,8 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.ToastRootDataAttributes = void 0;
-let ToastRootDataAttributes = exports.ToastRootDataAttributes = /*#__PURE__*/function (ToastRootDataAttributes) {
+var _stateAttributesMapping = require("../../utils/stateAttributesMapping");
+let ToastRootDataAttributes = exports.ToastRootDataAttributes = function (ToastRootDataAttributes) {
   /**
    * Present when the toast is expanded in the viewport.
    * @type {boolean}
@@ -33,10 +34,10 @@ let ToastRootDataAttributes = exports.ToastRootDataAttributes = /*#__PURE__*/fun
   /**
    * Present when the toast is animating in.
    */
-  ToastRootDataAttributes["startingStyle"] = "data-starting-style";
+  ToastRootDataAttributes[ToastRootDataAttributes["startingStyle"] = _stateAttributesMapping.TransitionStatusDataAttributes.startingStyle] = "startingStyle";
   /**
    * Present when the toast is animating out.
    */
-  ToastRootDataAttributes["endingStyle"] = "data-ending-style";
+  ToastRootDataAttributes[ToastRootDataAttributes["endingStyle"] = _stateAttributesMapping.TransitionStatusDataAttributes.endingStyle] = "endingStyle";
   return ToastRootDataAttributes;
 }({});

package/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/toast/store.js

@@ -72,30 +72,53 @@ class ToastStore extends _store.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 || (0, _generateId.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
@@ -129,9 +152,11 @@ class ToastStore extends _store.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
@@ -149,12 +174,12 @@ class ToastStore extends _store.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');
@@ -170,7 +195,7 @@ class ToastStore extends _store.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/toast/title/ToastTitle.js

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

package/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/toast/viewport/ToastViewport.js

@@ -7,6 +7,8 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.ToastViewport = void 0;
 var React = _interopRequireWildcard(require("react"));
+var _addEventListener = require("@base-ui/utils/addEventListener");
+var _mergeCleanups = require("@base-ui/utils/mergeCleanups");
 var _owner = require("@base-ui/utils/owner");
 var _visuallyHidden = require("@base-ui/utils/visuallyHidden");
 var _useTimeout = require("@base-ui/utils/useTimeout");
@@ -27,6 +29,7 @@ const ToastViewport = exports.ToastViewport = /*#__PURE__*/React.forwardRef(func
   const {
     render,
     className,
+    style,
     children,
     ...elementProps
   } = componentProps;
@@ -34,6 +37,7 @@ const ToastViewport = exports.ToastViewport = /*#__PURE__*/React.forwardRef(func
   const windowFocusTimeout = (0, _useTimeout.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');
@@ -52,7 +56,7 @@ const ToastViewport = exports.ToastViewport = /*#__PURE__*/React.forwardRef(func
       if (isEmpty) {
         return;
       }
-      if (event.key === 'F6' && event.target !== viewport) {
+      if (event.key === 'F6' && (0, _utils.getTarget)(event) !== viewport) {
         event.preventDefault();
         store.setPrevFocusElement((0, _utils.activeElement)((0, _owner.ownerDocument)(viewport)));
         viewport?.focus({
@@ -63,10 +67,7 @@ const ToastViewport = exports.ToastViewport = /*#__PURE__*/React.forwardRef(func
       }
     }
     const win = (0, _owner.ownerWindow)(viewport);
-    win.addEventListener('keydown', handleGlobalKeyDown);
-    return () => {
-      win.removeEventListener('keydown', handleGlobalKeyDown);
-    };
+    return (0, _addEventListener.addEventListener)(win, 'keydown', handleGlobalKeyDown);
   }, [store, isEmpty]);
   React.useEffect(() => {
     const viewport = store.state.viewport;
@@ -75,31 +76,26 @@ const ToastViewport = exports.ToastViewport = /*#__PURE__*/React.forwardRef(func
     }
     const win = (0, _owner.ownerWindow)(viewport);
     function handleWindowBlur(event) {
-      if (event.target !== win) {
+      if ((0, _utils.getTarget)(event) !== win) {
         return;
       }
       store.setIsWindowFocused(false);
       store.pauseTimers();
     }
     function handleWindowFocus(event) {
-      if (event.relatedTarget || event.target === win) {
+      if (event.relatedTarget) {
         return;
       }
       const target = (0, _utils.getTarget)(event);
       const activeEl = (0, _utils.activeElement)((0, _owner.ownerDocument)(viewport));
-      if (!(0, _utils.contains)(viewport, target) || !(0, _focusVisible.isFocusVisible)(activeEl)) {
+      if (target === win || !(0, _utils.contains)(viewport, target) || !(0, _focusVisible.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 (0, _mergeCleanups.mergeCleanups)((0, _addEventListener.addEventListener)(win, 'blur', handleWindowBlur, true), (0, _addEventListener.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.
@@ -112,10 +108,7 @@ const ToastViewport = exports.ToastViewport = /*#__PURE__*/React.forwardRef(func
       return undefined;
     }
     const doc = (0, _owner.ownerDocument)(viewport);
-    doc.addEventListener('pointerdown', store.handleDocumentPointerDown, true);
-    return () => {
-      doc.removeEventListener('pointerdown', store.handleDocumentPointerDown, true);
-    };
+    return (0, _addEventListener.addEventListener)(doc, 'pointerdown', store.handleDocumentPointerDown, true);
   }, [isEmpty, store]);
   function handleFocusGuard(event) {
     const viewport = store.state.viewport;
@@ -132,14 +125,15 @@ const ToastViewport = exports.ToastViewport = /*#__PURE__*/React.forwardRef(func
     }
   }
   function handleKeyDown(event) {
-    if (event.key === 'Tab' && event.shiftKey && event.target === store.state.viewport) {
+    if (event.key === 'Tab' && event.shiftKey && (0, _utils.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;
     }
 
@@ -149,22 +143,35 @@ const ToastViewport = exports.ToastViewport = /*#__PURE__*/React.forwardRef(func
     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;
@@ -177,7 +184,7 @@ const ToastViewport = exports.ToastViewport = /*#__PURE__*/React.forwardRef(func
     // Only set focused when the active element is focus-visible.
     // This prevents the viewport from staying expanded when clicking inside without
     // keyboard navigation.
-    if ((0, _focusVisible.isFocusVisible)((0, _owner.ownerDocument)(store.state.viewport).activeElement)) {
+    if ((0, _focusVisible.isFocusVisible)((0, _utils.activeElement)((0, _owner.ownerDocument)(store.state.viewport)))) {
       store.setFocused(true);
       store.pauseTimers();
     }
@@ -202,7 +209,10 @@ const ToastViewport = exports.ToastViewport = /*#__PURE__*/React.forwardRef(func
     onFocus: handleFocus,
     onBlur: handleBlur,
     onKeyDown: handleKeyDown,
-    onClick: handleFocus
+    onClick: handleFocus,
+    onPointerDown: handlePointerDown,
+    onPointerUp: handlePointerEnd,
+    onPointerCancel: handlePointerEnd
   };
   const state = {
     expanded

package/toggle/Toggle.js

@@ -39,6 +39,7 @@ const Toggle = exports.Toggle = /*#__PURE__*/React.forwardRef(function Toggle(co
     // cannot change button type
     value: valueProp,
     nativeButton = true,
+    style,
     ...elementProps
   } = componentProps;
 
@@ -103,6 +104,7 @@ const Toggle = exports.Toggle = /*#__PURE__*/React.forwardRef(function Toggle(co
       tag: "button",
       render: render,
       className: className,
+      style: style,
       state: state,
       refs: refs,
       props: props

package/toggle-group/ToggleGroup.js

@@ -42,6 +42,7 @@ const ToggleGroup = exports.ToggleGroup = /*#__PURE__*/React.forwardRef(function
     value: valueProp,
     className,
     render,
+    style,
     ...elementProps
   } = componentProps;
   const toolbarContext = (0, _ToolbarRootContext.useToolbarRootContext)(true);
@@ -106,12 +107,14 @@ const ToggleGroup = exports.ToggleGroup = /*#__PURE__*/React.forwardRef(function
     children: toolbarContext ? element : /*#__PURE__*/(0, _jsxRuntime.jsx)(_CompositeRoot.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/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/toolbar/button/ToolbarButton.js

@@ -25,6 +25,7 @@ const ToolbarButton = exports.ToolbarButton = /*#__PURE__*/React.forwardRef(func
     focusableWhenDisabled = true,
     render,
     nativeButton = true,
+    style,
     ...elementProps
   } = componentProps;
   const itemMetadata = React.useMemo(() => ({
@@ -53,6 +54,7 @@ const ToolbarButton = exports.ToolbarButton = /*#__PURE__*/React.forwardRef(func
     tag: "button",
     render: render,
     className: className,
+    style: style,
     metadata: itemMetadata,
     state: state,
     refs: [forwardedRef, buttonRef],

package/toolbar/group/ToolbarGroup.js

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

package/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/toolbar/input/ToolbarInput.js

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

package/toolbar/link/ToolbarLink.js

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

package/toolbar/root/ToolbarRoot.js

@@ -23,6 +23,7 @@ const ToolbarRoot = exports.ToolbarRoot = /*#__PURE__*/React.forwardRef(function
     orientation = 'horizontal',
     className,
     render,
+    style,
     ...elementProps
   } = componentProps;
   const [itemMap, setItemMap] = React.useState(() => new Map());
@@ -53,6 +54,7 @@ const ToolbarRoot = exports.ToolbarRoot = /*#__PURE__*/React.forwardRef(function
     children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_CompositeRoot.CompositeRoot, {
       render: render,
       className: className,
+      style: style,
       state: state,
       refs: [forwardedRef],
       props: [defaultProps, elementProps],

package/tooltip/arrow/TooltipArrow.js

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

package/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/tooltip/popup/TooltipPopup.js

@@ -30,6 +30,7 @@ const TooltipPopup = exports.TooltipPopup = /*#__PURE__*/React.forwardRef(functi
   const {
     className,
     render,
+    style,
     ...elementProps
   } = componentProps;
   const store = (0, _TooltipRootContext.useTooltipRootContext)();