@base-ui/react 1.6.0 → 1.7.0

package/toast/viewport/ToastViewport.mjs

@@ -11,7 +11,6 @@ import { FocusGuard } from "../../utils/FocusGuard.mjs";
 import { useToastProviderContext } from "../provider/ToastProviderContext.mjs";
 import { useRenderElement } from "../../internals/useRenderElement.mjs";
 import { isFocusVisible } from "../utils/focusVisible.mjs";
-import { ToastViewportCssVars } from "./ToastViewportCssVars.mjs";
 
 /**
  * A container viewport for toasts.
@@ -38,44 +37,37 @@ export const ToastViewport = /*#__PURE__*/React.forwardRef(function ToastViewpor
   const focused = store.useState('focused');
   const expanded = store.useState('expanded');
   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.
+  const frontmostHeight = toasts[0]?.height;
+  const hasTransitioningToasts = toasts.some(toast => toast.transitionStatus === 'ending');
+  const highPriorityToasts = toasts.filter(toast => toast.priority === 'high');
   React.useEffect(() => {
+    // `store.state.viewport` isn't available on the first render, since the portal node hasn't yet
+    // been created. Depending on `isEmpty` ensures the listeners are attached once toasts exist and
+    // the viewport ref is available.
     const viewport = store.state.viewport;
-    if (!viewport) {
+    if (!viewport || isEmpty) {
       return undefined;
     }
+    const win = ownerWindow(viewport);
+    const doc = ownerDocument(viewport);
+
+    // Listen globally for F6 so we can force-focus the viewport.
     function handleGlobalKeyDown(event) {
-      if (isEmpty) {
-        return;
-      }
       if (event.key === 'F6' && getTarget(event) !== viewport) {
         event.preventDefault();
-        store.setPrevFocusElement(activeElement(ownerDocument(viewport)));
+        store.set('prevFocusElement', activeElement(doc));
         viewport?.focus({
           preventScroll: true
         });
         store.pauseTimers();
-        store.setFocused(true);
+        store.set('focused', true);
       }
     }
-    const win = ownerWindow(viewport);
-    return addEventListener(win, 'keydown', handleGlobalKeyDown);
-  }, [store, isEmpty]);
-  React.useEffect(() => {
-    const viewport = store.state.viewport;
-    if (!viewport || isEmpty) {
-      return undefined;
-    }
-    const win = ownerWindow(viewport);
     function handleWindowBlur(event) {
       if (getTarget(event) !== win) {
         return;
       }
-      store.setIsWindowFocused(false);
+      store.set('isWindowFocused', false);
       store.pauseTimers();
     }
     function handleWindowFocus(event) {
@@ -89,39 +81,18 @@ export const ToastViewport = /*#__PURE__*/React.forwardRef(function ToastViewpor
       }
 
       // Wait for the `handleFocus` event to fire.
-      windowFocusTimeout.start(0, () => store.setIsWindowFocused(true));
+      windowFocusTimeout.start(0, () => store.set('isWindowFocused', 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.
-  // By adding this dependency, we ensure the window listeners
-  // are added when toasts have been created, once the ref is available.
-  isEmpty]);
-  React.useEffect(() => {
-    const viewport = store.state.viewport;
-    if (!viewport || isEmpty) {
-      return undefined;
-    }
-    const doc = ownerDocument(viewport);
-    return addEventListener(doc, 'pointerdown', store.handleDocumentPointerDown, true);
-  }, [isEmpty, store]);
+    return mergeCleanups(addEventListener(win, 'keydown', handleGlobalKeyDown), addEventListener(win, 'blur', handleWindowBlur, true), addEventListener(win, 'focus', handleWindowFocus, true), addEventListener(doc, 'pointerdown', store.handleDocumentPointerDown, true));
+  }, [store, windowFocusTimeout, isEmpty]);
   function handleFocusGuard(event) {
-    const viewport = store.state.viewport;
-    if (!viewport) {
-      return;
-    }
     handlingFocusGuardRef.current = true;
 
     // If we're coming off the container, move to the first toast that can hold
     // focus, skipping toasts that are animating out or inert because they're limited.
-    if (event.relatedTarget === viewport) {
-      const firstFocusableToast = toasts.find(toast => toast.transitionStatus !== 'ending' && !toast.limited);
-      if (firstFocusableToast) {
-        firstFocusableToast.ref?.current?.focus();
-      } else {
-        store.restoreFocusToPrevElement();
-      }
+    const firstFocusableToast = event.relatedTarget === store.state.viewport ? toasts.find(toast => toast.transitionStatus !== 'ending' && !toast.limited) : undefined;
+    if (firstFocusableToast) {
+      firstFocusableToast.ref?.current?.focus();
     } else {
       store.restoreFocusToPrevElement();
     }
@@ -129,9 +100,11 @@ export const ToastViewport = /*#__PURE__*/React.forwardRef(function ToastViewpor
   function handleKeyDown(event) {
     if (event.key === 'Tab' && event.shiftKey && getTarget(event.nativeEvent) === store.state.viewport) {
       event.preventDefault();
+      // Restoring focus blurs the viewport, and `handleBlur` resumes the timers
+      // from there. Resuming here as well would also fire when the previously
+      // focused element lives inside the viewport, letting toasts dismiss out
+      // from under the keyboard.
       store.restoreFocusToPrevElement();
-      // Shift+Tab is explicit keyboard navigation out of the viewport.
-      store.resumeTimers();
     }
   }
   function flushMouseLeave() {
@@ -146,13 +119,13 @@ export const ToastViewport = /*#__PURE__*/React.forwardRef(function ToastViewpor
     if (store.state.isWindowFocused) {
       store.resumeTimers();
     }
-    store.setHovering(false);
+    store.set('hovering', false);
     markedReadyForMouseLeaveRef.current = false;
   }
   React.useEffect(flushMouseLeave, [hasTransitioningToasts, store]);
   function handleMouseEnter() {
     store.pauseTimers();
-    store.setHovering(true);
+    store.set('hovering', true);
     markedReadyForMouseLeaveRef.current = false;
   }
   function resumeTimersIfWindowFocused() {
@@ -161,15 +134,10 @@ export const ToastViewport = /*#__PURE__*/React.forwardRef(function ToastViewpor
     }
   }
   function handleMouseLeave() {
-    const hasEndingToasts = store.state.toasts.some(toast => toast.transitionStatus === 'ending');
-    if (hasEndingToasts || touchActiveRef.current) {
-      // When swiping to dismiss, wait until the transitions have settled
-      // or the touch interaction ends to avoid collapsing mid-gesture.
-      markedReadyForMouseLeaveRef.current = true;
-    } else {
-      resumeTimersIfWindowFocused();
-      store.setHovering(false);
-    }
+    // Defer to `flushMouseLeave`: while toasts are transitioning out or a touch gesture is active it
+    // records the intent and collapses later; otherwise it collapses immediately.
+    markedReadyForMouseLeaveRef.current = true;
+    flushMouseLeave();
   }
   function handlePointerDown(event) {
     if (event.pointerType === 'touch') {
@@ -196,7 +164,7 @@ export const ToastViewport = /*#__PURE__*/React.forwardRef(function ToastViewpor
     // This prevents the viewport from staying expanded when clicking inside without
     // keyboard navigation.
     if (isFocusVisible(activeElement(ownerDocument(store.state.viewport)))) {
-      store.setFocused(true);
+      store.set('focused', true);
       store.pauseTimers();
     }
   }
@@ -204,7 +172,7 @@ export const ToastViewport = /*#__PURE__*/React.forwardRef(function ToastViewpor
     if (!focused || contains(store.state.viewport, event.relatedTarget)) {
       return;
     }
-    store.setFocused(false);
+    store.set('focused', false);
     resumeTimersIfWindowFocused();
   }
   const defaultProps = {
@@ -223,32 +191,28 @@ export const ToastViewport = /*#__PURE__*/React.forwardRef(function ToastViewpor
     onClick: handleFocus,
     onPointerDown: handlePointerDown,
     onPointerUp: handlePointerEnd,
-    onPointerCancel: handlePointerEnd
+    onPointerCancel: handlePointerEnd,
+    style: {
+      ['--toast-frontmost-height']: frontmostHeight ? `${frontmostHeight}px` : undefined
+    }
   };
   const state = {
     expanded
   };
+  const focusGuard = !isEmpty && prevFocusElement && /*#__PURE__*/_jsx(FocusGuard, {
+    onFocus: handleFocusGuard
+  });
   const element = useRenderElement('div', componentProps, {
     ref: [forwardedRef, store.setViewport],
     state,
-    props: [defaultProps, {
-      style: {
-        [ToastViewportCssVars.frontmostHeight]: frontmostHeight ? `${frontmostHeight}px` : undefined
-      }
-    }, elementProps, {
+    props: [defaultProps, elementProps, {
       children: /*#__PURE__*/_jsxs(React.Fragment, {
-        children: [!isEmpty && prevFocusElement && /*#__PURE__*/_jsx(FocusGuard, {
-          onFocus: handleFocusGuard
-        }), children, !isEmpty && prevFocusElement && /*#__PURE__*/_jsx(FocusGuard, {
-          onFocus: handleFocusGuard
-        })]
+        children: [focusGuard, children, focusGuard]
       })
     }]
   });
   return /*#__PURE__*/_jsxs(React.Fragment, {
-    children: [!isEmpty && prevFocusElement && /*#__PURE__*/_jsx(FocusGuard, {
-      onFocus: handleFocusGuard
-    }), element, !focused && highPriorityToasts.length > 0 && /*#__PURE__*/_jsx("div", {
+    children: [focusGuard, element, !focused && highPriorityToasts.length > 0 && /*#__PURE__*/_jsx("div", {
       style: visuallyHidden,
       children: highPriorityToasts.map(toast => /*#__PURE__*/_jsxs("div", {
         role: "alert",

package/toggle/Toggle.js

@@ -8,7 +8,6 @@ Object.defineProperty(exports, "__esModule", {
 exports.Toggle = void 0;
 var React = _interopRequireWildcard(require("react"));
 var _useControlled = require("@base-ui/utils/useControlled");
-var _useIsoLayoutEffect = require("@base-ui/utils/useIsoLayoutEffect");
 var _error = require("@base-ui/utils/error");
 var _useBaseUiId = require("../internals/useBaseUiId");
 var _useRenderElement = require("../internals/useRenderElement");
@@ -50,7 +49,7 @@ const Toggle = exports.Toggle = /*#__PURE__*/React.forwardRef(function Toggle(co
   const disabled = (disabledProp || groupContext?.disabled) ?? false;
   if (process.env.NODE_ENV !== 'production') {
     // eslint-disable-next-line react-hooks/rules-of-hooks
-    (0, _useIsoLayoutEffect.useIsoLayoutEffect)(() => {
+    React.useEffect(() => {
       if (groupContext && valueProp === undefined && groupContext.isValueInitialized) {
         (0, _error.error)('A `<Toggle>` component rendered in a `<ToggleGroup>` has no explicit `value` prop.', 'This will cause issues between the Toggle Group and Toggle values.', 'Provide the `<Toggle>` with a `value` prop matching the `<ToggleGroup>` values prop type.');
       }

package/toggle/Toggle.mjs

@@ -2,7 +2,6 @@
 
 import * as React from 'react';
 import { useControlled } from '@base-ui/utils/useControlled';
-import { useIsoLayoutEffect } from '@base-ui/utils/useIsoLayoutEffect';
 import { error } from '@base-ui/utils/error';
 import { useBaseUiId } from "../internals/useBaseUiId.mjs";
 import { useRenderElement } from "../internals/useRenderElement.mjs";
@@ -45,7 +44,7 @@ export const Toggle = /*#__PURE__*/React.forwardRef(function Toggle(componentPro
   const disabled = (disabledProp || groupContext?.disabled) ?? false;
   if (process.env.NODE_ENV !== 'production') {
     // eslint-disable-next-line react-hooks/rules-of-hooks
-    useIsoLayoutEffect(() => {
+    React.useEffect(() => {
       if (groupContext && valueProp === undefined && groupContext.isValueInitialized) {
         error('A `<Toggle>` component rendered in a `<ToggleGroup>` has no explicit `value` prop.', 'This will cause issues between the Toggle Group and Toggle values.', 'Provide the `<Toggle>` with a `value` prop matching the `<ToggleGroup>` values prop type.');
       }

package/toggle-group/ToggleGroup.js

@@ -15,19 +15,7 @@ var _CompositeRoot = require("../internals/composite/root/CompositeRoot");
 var _ToolbarRootContext = require("../toolbar/root/ToolbarRootContext");
 var _ToolbarGroupContext = require("../toolbar/group/ToolbarGroupContext");
 var _ToggleGroupContext = require("./ToggleGroupContext");
-var _ToggleGroupDataAttributes = require("./ToggleGroupDataAttributes");
 var _jsxRuntime = require("react/jsx-runtime");
-const stateAttributesMapping = {
-  multiple(value) {
-    if (value) {
-      return {
-        [_ToggleGroupDataAttributes.ToggleGroupDataAttributes.multiple]: ''
-      };
-    }
-    return null;
-  }
-};
-
 /**
  * Provides a shared state to a series of toggle buttons.
  *
@@ -48,8 +36,8 @@ const ToggleGroup = exports.ToggleGroup = /*#__PURE__*/React.forwardRef(function
     ...elementProps
   } = componentProps;
   const toolbarContext = (0, _ToolbarRootContext.useToolbarRootContext)(true);
-  const toolbarGroupContext = (0, _ToolbarGroupContext.useToolbarGroupContext)(true);
-  const isValueInitialized = React.useMemo(() => valueProp !== undefined || defaultValueProp !== undefined, [valueProp, defaultValueProp]);
+  const toolbarGroupContext = (0, _ToolbarGroupContext.useToolbarGroupContext)();
+  const isValueInitialized = valueProp !== undefined || defaultValueProp !== undefined;
   const disabled = (toolbarContext?.disabled ?? false) || (toolbarGroupContext?.disabled ?? false) || disabledProp;
   const [groupValue, setValueState] = (0, _useControlled.useControlled)({
     controlled: valueProp,
@@ -82,11 +70,10 @@ const ToggleGroup = exports.ToggleGroup = /*#__PURE__*/React.forwardRef(function
   };
   const contextValue = React.useMemo(() => ({
     disabled,
-    orientation,
     setGroupValue,
     value: groupValue,
     isValueInitialized
-  }), [disabled, orientation, setGroupValue, groupValue, isValueInitialized]);
+  }), [disabled, setGroupValue, groupValue, isValueInitialized]);
   const defaultProps = {
     role: 'group'
   };
@@ -94,8 +81,7 @@ const ToggleGroup = exports.ToggleGroup = /*#__PURE__*/React.forwardRef(function
     enabled: Boolean(toolbarContext),
     state,
     ref: forwardedRef,
-    props: [defaultProps, elementProps],
-    stateAttributesMapping
+    props: [defaultProps, elementProps]
   });
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_ToggleGroupContext.ToggleGroupContext.Provider, {
     value: contextValue,
@@ -106,7 +92,6 @@ const ToggleGroup = exports.ToggleGroup = /*#__PURE__*/React.forwardRef(function
       state: state,
       refs: [forwardedRef],
       props: [defaultProps, elementProps],
-      stateAttributesMapping: stateAttributesMapping,
       loopFocus: loopFocus,
       enableHomeAndEndKeys: true,
       orientation: orientation

package/toggle-group/ToggleGroup.mjs

@@ -9,19 +9,7 @@ import { CompositeRoot } from "../internals/composite/root/CompositeRoot.mjs";
 import { useToolbarRootContext } from "../toolbar/root/ToolbarRootContext.mjs";
 import { useToolbarGroupContext } from "../toolbar/group/ToolbarGroupContext.mjs";
 import { ToggleGroupContext } from "./ToggleGroupContext.mjs";
-import { ToggleGroupDataAttributes } from "./ToggleGroupDataAttributes.mjs";
 import { jsx as _jsx } from "react/jsx-runtime";
-const stateAttributesMapping = {
-  multiple(value) {
-    if (value) {
-      return {
-        [ToggleGroupDataAttributes.multiple]: ''
-      };
-    }
-    return null;
-  }
-};
-
 /**
  * Provides a shared state to a series of toggle buttons.
  *
@@ -42,8 +30,8 @@ export const ToggleGroup = /*#__PURE__*/React.forwardRef(function ToggleGroup(co
     ...elementProps
   } = componentProps;
   const toolbarContext = useToolbarRootContext(true);
-  const toolbarGroupContext = useToolbarGroupContext(true);
-  const isValueInitialized = React.useMemo(() => valueProp !== undefined || defaultValueProp !== undefined, [valueProp, defaultValueProp]);
+  const toolbarGroupContext = useToolbarGroupContext();
+  const isValueInitialized = valueProp !== undefined || defaultValueProp !== undefined;
   const disabled = (toolbarContext?.disabled ?? false) || (toolbarGroupContext?.disabled ?? false) || disabledProp;
   const [groupValue, setValueState] = useControlled({
     controlled: valueProp,
@@ -76,11 +64,10 @@ export const ToggleGroup = /*#__PURE__*/React.forwardRef(function ToggleGroup(co
   };
   const contextValue = React.useMemo(() => ({
     disabled,
-    orientation,
     setGroupValue,
     value: groupValue,
     isValueInitialized
-  }), [disabled, orientation, setGroupValue, groupValue, isValueInitialized]);
+  }), [disabled, setGroupValue, groupValue, isValueInitialized]);
   const defaultProps = {
     role: 'group'
   };
@@ -88,8 +75,7 @@ export const ToggleGroup = /*#__PURE__*/React.forwardRef(function ToggleGroup(co
     enabled: Boolean(toolbarContext),
     state,
     ref: forwardedRef,
-    props: [defaultProps, elementProps],
-    stateAttributesMapping
+    props: [defaultProps, elementProps]
   });
   return /*#__PURE__*/_jsx(ToggleGroupContext.Provider, {
     value: contextValue,
@@ -100,7 +86,6 @@ export const ToggleGroup = /*#__PURE__*/React.forwardRef(function ToggleGroup(co
       state: state,
       refs: [forwardedRef],
       props: [defaultProps, elementProps],
-      stateAttributesMapping: stateAttributesMapping,
       loopFocus: loopFocus,
       enableHomeAndEndKeys: true,
       orientation: orientation

package/toggle-group/ToggleGroupContext.d.mts

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

package/toggle-group/ToggleGroupContext.d.ts

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

package/toggle-group/ToggleGroupContext.js

@@ -2,20 +2,14 @@
 'use client';
 
 var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.ToggleGroupContext = void 0;
 exports.useToggleGroupContext = useToggleGroupContext;
-var _formatErrorMessage2 = _interopRequireDefault(require("@base-ui/utils/formatErrorMessage"));
 var React = _interopRequireWildcard(require("react"));
 const ToggleGroupContext = exports.ToggleGroupContext = /*#__PURE__*/React.createContext(undefined);
 if (process.env.NODE_ENV !== "production") ToggleGroupContext.displayName = "ToggleGroupContext";
-function useToggleGroupContext(optional = true) {
-  const context = React.useContext(ToggleGroupContext);
-  if (context === undefined && !optional) {
-    throw new Error(process.env.NODE_ENV !== "production" ? 'Base UI: ToggleGroupContext is missing. ToggleGroup parts must be placed within <ToggleGroup>.' : (0, _formatErrorMessage2.default)(7));
-  }
-  return context;
+function useToggleGroupContext() {
+  return React.useContext(ToggleGroupContext);
 }

package/toggle-group/ToggleGroupContext.mjs

@@ -1,13 +1,8 @@
 'use client';
 
-import _formatErrorMessage from "@base-ui/utils/formatErrorMessage";
 import * as React from 'react';
 export const ToggleGroupContext = /*#__PURE__*/React.createContext(undefined);
 if (process.env.NODE_ENV !== "production") ToggleGroupContext.displayName = "ToggleGroupContext";
-export function useToggleGroupContext(optional = true) {
-  const context = React.useContext(ToggleGroupContext);
-  if (context === undefined && !optional) {
-    throw new Error(process.env.NODE_ENV !== "production" ? 'Base UI: ToggleGroupContext is missing. ToggleGroup parts must be placed within <ToggleGroup>.' : _formatErrorMessage(7));
-  }
-  return context;
+export function useToggleGroupContext() {
+  return React.useContext(ToggleGroupContext);
 }

package/toolbar/button/ToolbarButton.js

@@ -25,7 +25,7 @@ const ToolbarButton = exports.ToolbarButton = /*#__PURE__*/React.forwardRef(func
     disabled: disabledProp = false,
     focusableWhenDisabled = true,
     render,
-    nativeButton = true,
+    nativeButton,
     style,
     ...elementProps
   } = componentProps;
@@ -33,7 +33,7 @@ const ToolbarButton = exports.ToolbarButton = /*#__PURE__*/React.forwardRef(func
     disabled: toolbarDisabled,
     orientation
   } = (0, _ToolbarRootContext.useToolbarRootContext)();
-  const groupContext = (0, _ToolbarGroupContext.useToolbarGroupContext)(true);
+  const groupContext = (0, _ToolbarGroupContext.useToolbarGroupContext)();
   const disabled = toolbarDisabled || (groupContext?.disabled ?? false) || disabledProp;
   const itemMetadata = React.useMemo(() => ({
     disabled,

package/toolbar/button/ToolbarButton.mjs

@@ -20,7 +20,7 @@ export const ToolbarButton = /*#__PURE__*/React.forwardRef(function ToolbarButto
     disabled: disabledProp = false,
     focusableWhenDisabled = true,
     render,
-    nativeButton = true,
+    nativeButton,
     style,
     ...elementProps
   } = componentProps;
@@ -28,7 +28,7 @@ export const ToolbarButton = /*#__PURE__*/React.forwardRef(function ToolbarButto
     disabled: toolbarDisabled,
     orientation
   } = useToolbarRootContext();
-  const groupContext = useToolbarGroupContext(true);
+  const groupContext = useToolbarGroupContext();
   const disabled = toolbarDisabled || (groupContext?.disabled ?? false) || disabledProp;
   const itemMetadata = React.useMemo(() => ({
     disabled,

package/toolbar/group/ToolbarGroupContext.d.mts

@@ -3,5 +3,4 @@ export interface ToolbarGroupContext {
   disabled: boolean;
 }
 export declare const ToolbarGroupContext: React.Context<ToolbarGroupContext | undefined>;
-export declare function useToolbarGroupContext(optional?: false): ToolbarGroupContext;
-export declare function useToolbarGroupContext(optional: true): ToolbarGroupContext | undefined;
+export declare function useToolbarGroupContext(): ToolbarGroupContext | undefined;

package/toolbar/group/ToolbarGroupContext.d.ts

@@ -3,5 +3,4 @@ export interface ToolbarGroupContext {
   disabled: boolean;
 }
 export declare const ToolbarGroupContext: React.Context<ToolbarGroupContext | undefined>;
-export declare function useToolbarGroupContext(optional?: false): ToolbarGroupContext;
-export declare function useToolbarGroupContext(optional: true): ToolbarGroupContext | undefined;
+export declare function useToolbarGroupContext(): ToolbarGroupContext | undefined;

package/toolbar/group/ToolbarGroupContext.js

@@ -2,20 +2,14 @@
 'use client';
 
 var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.ToolbarGroupContext = void 0;
 exports.useToolbarGroupContext = useToolbarGroupContext;
-var _formatErrorMessage2 = _interopRequireDefault(require("@base-ui/utils/formatErrorMessage"));
 var React = _interopRequireWildcard(require("react"));
 const ToolbarGroupContext = exports.ToolbarGroupContext = /*#__PURE__*/React.createContext(undefined);
 if (process.env.NODE_ENV !== "production") ToolbarGroupContext.displayName = "ToolbarGroupContext";
-function useToolbarGroupContext(optional) {
-  const context = React.useContext(ToolbarGroupContext);
-  if (context === undefined && !optional) {
-    throw new Error(process.env.NODE_ENV !== "production" ? 'Base UI: ToolbarGroupContext is missing. ToolbarGroup parts must be placed within <Toolbar.Group>.' : (0, _formatErrorMessage2.default)(68));
-  }
-  return context;
+function useToolbarGroupContext() {
+  return React.useContext(ToolbarGroupContext);
 }

package/toolbar/group/ToolbarGroupContext.mjs

@@ -1,13 +1,8 @@
 'use client';
 
-import _formatErrorMessage from "@base-ui/utils/formatErrorMessage";
 import * as React from 'react';
 export const ToolbarGroupContext = /*#__PURE__*/React.createContext(undefined);
 if (process.env.NODE_ENV !== "production") ToolbarGroupContext.displayName = "ToolbarGroupContext";
-export function useToolbarGroupContext(optional) {
-  const context = React.useContext(ToolbarGroupContext);
-  if (context === undefined && !optional) {
-    throw new Error(process.env.NODE_ENV !== "production" ? 'Base UI: ToolbarGroupContext is missing. ToolbarGroup parts must be placed within <Toolbar.Group>.' : _formatErrorMessage(68));
-  }
-  return context;
+export function useToolbarGroupContext() {
+  return React.useContext(ToolbarGroupContext);
 }

package/toolbar/input/ToolbarInput.js

@@ -31,7 +31,7 @@ const ToolbarInput = exports.ToolbarInput = /*#__PURE__*/React.forwardRef(functi
     disabled: toolbarDisabled,
     orientation
   } = (0, _ToolbarRootContext.useToolbarRootContext)();
-  const groupContext = (0, _ToolbarGroupContext.useToolbarGroupContext)(true);
+  const groupContext = (0, _ToolbarGroupContext.useToolbarGroupContext)();
   const disabled = toolbarDisabled || (groupContext?.disabled ?? false) || disabledProp;
   const itemMetadata = React.useMemo(() => ({
     disabled,
@@ -50,18 +50,15 @@ const ToolbarInput = exports.ToolbarInput = /*#__PURE__*/React.forwardRef(functi
     orientation,
     focusable: focusableWhenDisabled
   };
-  const defaultProps = {
-    onClick(event) {
-      if (disabled) {
-        event.preventDefault();
-      }
-    },
-    onPointerDown(event) {
-      if (disabled) {
-        event.preventDefault();
-      }
+  const preventWhenDisabled = event => {
+    if (disabled) {
+      event.preventDefault();
     }
   };
+  const defaultProps = {
+    onClick: preventWhenDisabled,
+    onPointerDown: preventWhenDisabled
+  };
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_CompositeItem.CompositeItem, {
     tag: "input",
     render: render,

package/toolbar/input/ToolbarInput.mjs

@@ -26,7 +26,7 @@ export const ToolbarInput = /*#__PURE__*/React.forwardRef(function ToolbarInput(
     disabled: toolbarDisabled,
     orientation
   } = useToolbarRootContext();
-  const groupContext = useToolbarGroupContext(true);
+  const groupContext = useToolbarGroupContext();
   const disabled = toolbarDisabled || (groupContext?.disabled ?? false) || disabledProp;
   const itemMetadata = React.useMemo(() => ({
     disabled,
@@ -45,18 +45,15 @@ export const ToolbarInput = /*#__PURE__*/React.forwardRef(function ToolbarInput(
     orientation,
     focusable: focusableWhenDisabled
   };
-  const defaultProps = {
-    onClick(event) {
-      if (disabled) {
-        event.preventDefault();
-      }
-    },
-    onPointerDown(event) {
-      if (disabled) {
-        event.preventDefault();
-      }
+  const preventWhenDisabled = event => {
+    if (disabled) {
+      event.preventDefault();
     }
   };
+  const defaultProps = {
+    onClick: preventWhenDisabled,
+    onPointerDown: preventWhenDisabled
+  };
   return /*#__PURE__*/_jsx(CompositeItem, {
     tag: "input",
     render: render,

package/toolbar/link/ToolbarLink.d.mts

@@ -14,7 +14,7 @@ export interface ToolbarLinkState {
    */
   orientation: ToolbarRoot.Orientation;
 }
-export interface ToolbarLinkProps extends BaseUIComponentProps<'a', ToolbarLinkState> {}
+export interface ToolbarLinkProps extends BaseUIComponentProps<'a', ToolbarLinkState, React.ComponentPropsWithRef<'a'>> {}
 export declare namespace ToolbarLink {
   type State = ToolbarLinkState;
   type Props = ToolbarLinkProps;

package/toolbar/link/ToolbarLink.d.ts

@@ -14,7 +14,7 @@ export interface ToolbarLinkState {
    */
   orientation: ToolbarRoot.Orientation;
 }
-export interface ToolbarLinkProps extends BaseUIComponentProps<'a', ToolbarLinkState> {}
+export interface ToolbarLinkProps extends BaseUIComponentProps<'a', ToolbarLinkState, React.ComponentPropsWithRef<'a'>> {}
 export declare namespace ToolbarLink {
   type State = ToolbarLinkState;
   type Props = ToolbarLinkProps;