@base-ui/react 1.1.0 → 1.2.0

package/esm/toast/viewport/ToastViewport.js

@@ -3,10 +3,10 @@
 import * as React from 'react';
 import { ownerDocument, ownerWindow } from '@base-ui/utils/owner';
 import { visuallyHidden } from '@base-ui/utils/visuallyHidden';
+import { useTimeout } from '@base-ui/utils/useTimeout';
 import { activeElement, contains, getTarget } from "../../floating-ui-react/utils.js";
 import { FocusGuard } from "../../utils/FocusGuard.js";
-import { ToastViewportContext } from "./ToastViewportContext.js";
-import { useToastContext } from "../provider/ToastProviderContext.js";
+import { useToastProviderContext } from "../provider/ToastProviderContext.js";
 import { useRenderElement } from "../../utils/useRenderElement.js";
 import { isFocusVisible } from "../utils/focusVisible.js";
 import { ToastViewportCssVars } from "./ToastViewportCssVars.js";
@@ -25,76 +25,69 @@ export const ToastViewport = /*#__PURE__*/React.forwardRef(function ToastViewpor
     children,
     ...elementProps
   } = componentProps;
-  const {
-    toasts,
-    pauseTimers,
-    resumeTimers,
-    setHovering,
-    setFocused,
-    viewportRef,
-    windowFocusedRef,
-    prevFocusElement,
-    setPrevFocusElement,
-    expanded,
-    focused
-  } = useToastContext();
+  const store = useToastProviderContext();
+  const windowFocusTimeout = useTimeout();
   const handlingFocusGuardRef = React.useRef(false);
   const markedReadyForMouseLeaveRef = React.useRef(false);
-  const numToasts = toasts.length;
+  const isEmpty = store.useState('isEmpty');
+  const toasts = store.useState('toasts');
+  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]);
 
   // Listen globally for F6 so we can force-focus the viewport.
   React.useEffect(() => {
-    if (!viewportRef.current) {
+    const viewport = store.state.viewport;
+    if (!viewport) {
       return undefined;
     }
     function handleGlobalKeyDown(event) {
-      if (numToasts === 0) {
+      if (isEmpty) {
         return;
       }
-      if (event.key === 'F6' && event.target !== viewportRef.current) {
+      if (event.key === 'F6' && event.target !== viewport) {
         event.preventDefault();
-        setPrevFocusElement(activeElement(ownerDocument(viewportRef.current)));
-        viewportRef.current?.focus({
+        store.setPrevFocusElement(activeElement(ownerDocument(viewport)));
+        viewport?.focus({
           preventScroll: true
         });
-        pauseTimers();
-        setFocused(true);
+        store.pauseTimers();
+        store.setFocused(true);
       }
     }
-    const win = ownerWindow(viewportRef.current);
+    const win = ownerWindow(viewport);
     win.addEventListener('keydown', handleGlobalKeyDown);
     return () => {
       win.removeEventListener('keydown', handleGlobalKeyDown);
     };
-  }, [pauseTimers, setFocused, setPrevFocusElement, numToasts, viewportRef]);
+  }, [store, isEmpty]);
   React.useEffect(() => {
-    if (!viewportRef.current || !numToasts) {
+    const viewport = store.state.viewport;
+    if (!viewport || isEmpty) {
       return undefined;
     }
-    const win = ownerWindow(viewportRef.current);
+    const win = ownerWindow(viewport);
     function handleWindowBlur(event) {
       if (event.target !== win) {
         return;
       }
-      windowFocusedRef.current = false;
-      pauseTimers();
+      store.setIsWindowFocused(false);
+      store.pauseTimers();
     }
     function handleWindowFocus(event) {
       if (event.relatedTarget || event.target === win) {
         return;
       }
       const target = getTarget(event);
-      const activeEl = activeElement(ownerDocument(viewportRef.current));
-      if (!contains(viewportRef.current, target) || !isFocusVisible(activeEl)) {
-        resumeTimers();
+      const activeEl = activeElement(ownerDocument(viewport));
+      if (!contains(viewport, target) || !isFocusVisible(activeEl)) {
+        store.resumeTimers();
       }
 
       // Wait for the `handleFocus` event to fire.
-      setTimeout(() => {
-        windowFocusedRef.current = true;
-      });
+      windowFocusTimeout.start(0, () => store.setIsWindowFocused(true));
     }
     win.addEventListener('blur', handleWindowBlur, true);
     win.addEventListener('focus', handleWindowFocus, true);
@@ -102,84 +95,69 @@ export const ToastViewport = /*#__PURE__*/React.forwardRef(function ToastViewpor
       win.removeEventListener('blur', handleWindowBlur, true);
       win.removeEventListener('focus', handleWindowFocus, true);
     };
-  }, [pauseTimers, resumeTimers, viewportRef, windowFocusedRef, setFocused,
-  // `viewportRef.current` isn't available on the first render,
+  }, [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.
-  numToasts]);
+  isEmpty]);
   React.useEffect(() => {
-    const viewportNode = viewportRef.current;
-    if (!viewportNode || numToasts === 0) {
+    const viewport = store.state.viewport;
+    if (!viewport || isEmpty) {
       return undefined;
     }
-    const doc = ownerDocument(viewportNode);
-    function handlePointerDown(event) {
-      if (event.pointerType !== 'touch') {
-        return;
-      }
-      const target = getTarget(event);
-      if (contains(viewportNode, target)) {
-        return;
-      }
-      resumeTimers();
-      setHovering(false);
-      setFocused(false);
-    }
-    doc.addEventListener('pointerdown', handlePointerDown, true);
+    const doc = ownerDocument(viewport);
+    doc.addEventListener('pointerdown', store.handleDocumentPointerDown, true);
     return () => {
-      doc.removeEventListener('pointerdown', handlePointerDown, true);
+      doc.removeEventListener('pointerdown', store.handleDocumentPointerDown, true);
     };
-  }, [numToasts, resumeTimers, setFocused, setHovering, viewportRef]);
+  }, [isEmpty, store]);
   function handleFocusGuard(event) {
-    if (!viewportRef.current) {
+    const viewport = store.state.viewport;
+    if (!viewport) {
       return;
     }
     handlingFocusGuardRef.current = true;
 
     // If we're coming off the container, move to the first toast
-    if (event.relatedTarget === viewportRef.current) {
+    if (event.relatedTarget === viewport) {
       toasts[0]?.ref?.current?.focus();
     } else {
-      prevFocusElement?.focus({
-        preventScroll: true
-      });
+      store.restoreFocusToPrevElement();
     }
   }
   function handleKeyDown(event) {
-    if (event.key === 'Tab' && event.shiftKey && event.target === viewportRef.current) {
+    if (event.key === 'Tab' && event.shiftKey && event.target === store.state.viewport) {
       event.preventDefault();
-      prevFocusElement?.focus({
-        preventScroll: true
-      });
-      resumeTimers();
+      store.restoreFocusToPrevElement();
+      store.resumeTimers();
     }
   }
   React.useEffect(() => {
-    if (!windowFocusedRef.current || hasTransitioningToasts || !markedReadyForMouseLeaveRef.current) {
+    if (!store.state.isWindowFocused || hasTransitioningToasts || !markedReadyForMouseLeaveRef.current) {
       return;
     }
 
     // Once transitions have finished, see if a mouseleave was already triggered
     // but blocked from taking effect. If so, we can now safely resume timers and
     // collapse the viewport.
-    resumeTimers();
-    setHovering(false);
+    store.resumeTimers();
+    store.setHovering(false);
     markedReadyForMouseLeaveRef.current = false;
-  }, [hasTransitioningToasts, resumeTimers, setHovering, windowFocusedRef]);
+  }, [hasTransitioningToasts, store]);
   function handleMouseEnter() {
-    pauseTimers();
-    setHovering(true);
+    store.pauseTimers();
+    store.setHovering(true);
     markedReadyForMouseLeaveRef.current = false;
   }
   function handleMouseLeave() {
-    if (toasts.some(toast => toast.transitionStatus === 'ending')) {
+    if (hasTransitioningToasts) {
       // When swiping to dismiss, wait until the transitions have settled
       // to avoid the viewport collapsing while the user is interacting.
       markedReadyForMouseLeaveRef.current = true;
     } else {
-      resumeTimers();
-      setHovering(false);
+      store.resumeTimers();
+      store.setHovering(false);
     }
   }
   function handleFocus() {
@@ -194,17 +172,17 @@ 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(viewportRef.current).activeElement)) {
-      setFocused(true);
-      pauseTimers();
+    if (isFocusVisible(ownerDocument(store.state.viewport).activeElement)) {
+      store.setFocused(true);
+      store.pauseTimers();
     }
   }
   function handleBlur(event) {
-    if (!focused || contains(viewportRef.current, event.relatedTarget)) {
+    if (!focused || contains(store.state.viewport, event.relatedTarget)) {
       return;
     }
-    setFocused(false);
-    resumeTimers();
+    store.setFocused(false);
+    store.resumeTimers();
   }
   const defaultProps = {
     tabIndex: -1,
@@ -221,11 +199,11 @@ export const ToastViewport = /*#__PURE__*/React.forwardRef(function ToastViewpor
     onKeyDown: handleKeyDown,
     onClick: handleFocus
   };
-  const state = React.useMemo(() => ({
+  const state = {
     expanded
-  }), [expanded]);
+  };
   const element = useRenderElement('div', componentProps, {
-    ref: [forwardedRef, viewportRef],
+    ref: [forwardedRef, store.setViewport],
     state,
     props: [defaultProps, {
       style: {
@@ -233,21 +211,17 @@ export const ToastViewport = /*#__PURE__*/React.forwardRef(function ToastViewpor
       }
     }, elementProps, {
       children: /*#__PURE__*/_jsxs(React.Fragment, {
-        children: [numToasts > 0 && prevFocusElement && /*#__PURE__*/_jsx(FocusGuard, {
+        children: [!isEmpty && prevFocusElement && /*#__PURE__*/_jsx(FocusGuard, {
           onFocus: handleFocusGuard
-        }), children, numToasts > 0 && prevFocusElement && /*#__PURE__*/_jsx(FocusGuard, {
+        }), children, !isEmpty && prevFocusElement && /*#__PURE__*/_jsx(FocusGuard, {
           onFocus: handleFocusGuard
         })]
       })
     }]
   });
-  const contextValue = React.useMemo(() => ({
-    viewportRef
-  }), [viewportRef]);
   const highPriorityToasts = React.useMemo(() => toasts.filter(toast => toast.priority === 'high'), [toasts]);
-  return /*#__PURE__*/_jsxs(ToastViewportContext.Provider, {
-    value: contextValue,
-    children: [numToasts > 0 && prevFocusElement && /*#__PURE__*/_jsx(FocusGuard, {
+  return /*#__PURE__*/_jsxs(React.Fragment, {
+    children: [!isEmpty && prevFocusElement && /*#__PURE__*/_jsx(FocusGuard, {
       onFocus: handleFocusGuard
     }), element, !focused && highPriorityToasts.length > 0 && /*#__PURE__*/_jsx("div", {
       style: visuallyHidden,

package/esm/toggle/Toggle.d.ts

@@ -8,7 +8,9 @@ import { REASONS } from "../utils/reasons.js";
  *
  * Documentation: [Base UI Toggle](https://base-ui.com/react/components/toggle)
  */
-export declare const Toggle: React.ForwardRefExoticComponent<Omit<ToggleProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+export declare const Toggle: {
+  <Value extends string>(props: Toggle.Props<Value> & React.RefAttributes<HTMLButtonElement>): React.JSX.Element;
+};
 export interface ToggleState {
   /**
    * Whether the toggle is currently pressed.
@@ -19,38 +21,38 @@ export interface ToggleState {
    */
   disabled: boolean;
 }
-export interface ToggleProps extends NativeButtonProps, BaseUIComponentProps<'button', Toggle.State> {
+export interface ToggleProps<Value extends string> extends NativeButtonProps, BaseUIComponentProps<'button', Toggle.State> {
   /**
    * Whether the toggle button is currently pressed.
    * This is the controlled counterpart of `defaultPressed`.
    */
-  pressed?: boolean;
+  pressed?: boolean | undefined;
   /**
    * Whether the toggle button is currently pressed.
    * This is the uncontrolled counterpart of `pressed`.
    * @default false
    */
-  defaultPressed?: boolean;
+  defaultPressed?: boolean | undefined;
   /**
    * Whether the component should ignore user interaction.
    * @default false
    */
-  disabled?: boolean;
+  disabled?: boolean | undefined;
   /**
    * Callback fired when the pressed state is changed.
    */
-  onPressedChange?: (pressed: boolean, eventDetails: Toggle.ChangeEventDetails) => void;
+  onPressedChange?: ((pressed: boolean, eventDetails: Toggle.ChangeEventDetails) => void) | undefined;
   /**
    * A unique string that identifies the toggle when used
    * inside a toggle group.
    */
-  value?: string;
+  value?: Value | undefined;
 }
 export type ToggleChangeEventReason = typeof REASONS.none;
 export type ToggleChangeEventDetails = BaseUIChangeEventDetails<Toggle.ChangeEventReason>;
 export declare namespace Toggle {
   type State = ToggleState;
-  type Props = ToggleProps;
+  type Props<TValue extends string = string> = ToggleProps<TValue>;
   type ChangeEventReason = ToggleChangeEventReason;
   type ChangeEventDetails = ToggleChangeEventDetails;
 }

package/esm/toggle/Toggle.js

@@ -3,6 +3,8 @@
 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';
 import { useBaseUiId } from "../utils/useBaseUiId.js";
 import { useRenderElement } from "../utils/useRenderElement.js";
 import { useToggleGroupContext } from "../toggle-group/ToggleGroupContext.js";
@@ -41,8 +43,16 @@ export const Toggle = /*#__PURE__*/React.forwardRef(function Toggle(componentPro
   const groupValue = groupContext?.value ?? [];
   const defaultPressed = groupContext ? undefined : defaultPressedProp;
   const disabled = (disabledProp || groupContext?.disabled) ?? false;
+  if (process.env.NODE_ENV !== 'production') {
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    useIsoLayoutEffect(() => {
+      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.');
+      }
+    }, [groupContext, valueProp, groupContext?.isValueInitialized]);
+  }
   const [pressed, setPressedState] = useControlled({
-    controlled: groupContext ? groupValue?.indexOf(value) > -1 : pressedProp,
+    controlled: groupContext ? value !== undefined && groupValue.indexOf(value) > -1 : pressedProp,
     default: defaultPressed,
     name: 'Toggle',
     state: 'pressed'
@@ -60,10 +70,10 @@ export const Toggle = /*#__PURE__*/React.forwardRef(function Toggle(componentPro
     disabled,
     native: nativeButton
   });
-  const state = React.useMemo(() => ({
+  const state = {
     disabled,
     pressed
-  }), [disabled, pressed]);
+  };
   const refs = [buttonRef, forwardedRef];
   const props = [{
     'aria-pressed': pressed,

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

@@ -7,59 +7,71 @@ import { REASONS } from "../utils/reasons.js";
  *
  * Documentation: [Base UI Toggle Group](https://base-ui.com/react/components/toggle-group)
  */
-export declare const ToggleGroup: React.ForwardRefExoticComponent<Omit<ToggleGroupProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export declare const ToggleGroup: {
+  <Value extends string>(props: ToggleGroup.Props<Value> & React.RefAttributes<HTMLDivElement>): React.JSX.Element;
+};
 export interface ToggleGroupState {
   /**
    * Whether the component should ignore user interaction.
    */
   disabled: boolean;
+  /**
+   * When `false` only one item in the group can be pressed. If any item in
+   * the group becomes pressed, the others will become unpressed.
+   * When `true` multiple items can be pressed.
+   * @default false
+   */
   multiple: boolean;
+  /**
+   * The orientation of the toggle group.
+   */
+  orientation: Orientation;
 }
-export interface ToggleGroupProps extends BaseUIComponentProps<'div', ToggleGroup.State> {
+export interface ToggleGroupProps<Value extends string> extends BaseUIComponentProps<'div', ToggleGroup.State> {
   /**
    * The open 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 any[];
+  value?: readonly Value[] | undefined;
   /**
    * The open state of the toggle group represented by an array of
    * the values of all pressed toggle buttons.
    * This is the uncontrolled counterpart of `value`.
    */
-  defaultValue?: readonly any[];
+  defaultValue?: readonly Value[] | undefined;
   /**
    * Callback fired when the pressed states of the toggle group changes.
    */
-  onValueChange?: (groupValue: any[], eventDetails: ToggleGroup.ChangeEventDetails) => void;
+  onValueChange?: ((groupValue: Value[], eventDetails: ToggleGroup.ChangeEventDetails) => void) | undefined;
   /**
    * Whether the toggle group should ignore user interaction.
    * @default false
    */
-  disabled?: boolean;
+  disabled?: boolean | undefined;
   /**
    * @default 'horizontal'
    */
-  orientation?: Orientation;
+  orientation?: Orientation | undefined;
   /**
    * Whether to loop keyboard focus back to the first item
    * when the end of the list is reached while using the arrow keys.
    * @default true
    */
-  loopFocus?: boolean;
+  loopFocus?: boolean | undefined;
   /**
    * When `false` only one item in the group can be pressed. If any item in
    * the group becomes pressed, the others will become unpressed.
    * When `true` multiple items can be pressed.
    * @default false
    */
-  multiple?: boolean;
+  multiple?: boolean | undefined;
 }
 export type ToggleGroupChangeEventReason = typeof REASONS.none;
 export type ToggleGroupChangeEventDetails = BaseUIChangeEventDetails<ToggleGroup.ChangeEventReason>;
 export declare namespace ToggleGroup {
   type State = ToggleGroupState;
-  type Props = ToggleGroupProps;
+  type Props<Value extends string = string> = ToggleGroupProps<Value>;
   type ChangeEventReason = ToggleGroupChangeEventReason;
   type ChangeEventDetails = ToggleGroupChangeEventDetails;
 }

package/esm/toggle-group/ToggleGroup.js

@@ -45,6 +45,7 @@ export const ToggleGroup = /*#__PURE__*/React.forwardRef(function ToggleGroup(co
     }
     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,
@@ -72,17 +73,18 @@ export const ToggleGroup = /*#__PURE__*/React.forwardRef(function ToggleGroup(co
       setValueState(newGroupValue);
     }
   });
-  const state = React.useMemo(() => ({
+  const state = {
     disabled,
     multiple,
     orientation
-  }), [disabled, orientation, multiple]);
+  };
   const contextValue = React.useMemo(() => ({
     disabled,
     orientation,
     setGroupValue,
-    value: groupValue
-  }), [disabled, orientation, setGroupValue, groupValue]);
+    value: groupValue,
+    isValueInitialized
+  }), [disabled, orientation, setGroupValue, groupValue, isValueInitialized]);
   const defaultProps = {
     role: 'group'
   };
@@ -102,7 +104,8 @@ export const ToggleGroup = /*#__PURE__*/React.forwardRef(function ToggleGroup(co
       refs: [forwardedRef],
       props: [defaultProps, elementProps],
       stateAttributesMapping: stateAttributesMapping,
-      loopFocus: loopFocus
+      loopFocus: loopFocus,
+      enableHomeAndEndKeys: true
     })
   });
 });

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

@@ -2,11 +2,16 @@ import * as React from 'react';
 import type { Orientation } from "../utils/types.js";
 import type { BaseUIChangeEventDetails } from "../utils/createBaseUIEventDetails.js";
 import type { BaseUIEventReasons } from "../utils/reasons.js";
-export interface ToggleGroupContext {
-  value: readonly any[];
-  setGroupValue: (newValue: string, nextPressed: boolean, eventDetails: BaseUIChangeEventDetails<BaseUIEventReasons['none']>) => void;
+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.
+   */
+  isValueInitialized: boolean;
 }
-export declare const ToggleGroupContext: React.Context<ToggleGroupContext | undefined>;
-export declare function useToggleGroupContext(optional?: boolean): ToggleGroupContext | undefined;
+export declare const ToggleGroupContext: React.Context<ToggleGroupContext<any> | undefined>;
+export declare function useToggleGroupContext<Value>(optional?: boolean): ToggleGroupContext<Value> | undefined;

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

@@ -17,12 +17,12 @@ export interface ToolbarButtonProps extends NativeButtonProps, BaseUIComponentPr
    * When `true` the item is disabled.
    * @default false
    */
-  disabled?: boolean;
+  disabled?: boolean | undefined;
   /**
    * When `true` the item remains focuseable when disabled.
    * @default true
    */
-  focusableWhenDisabled?: boolean;
+  focusableWhenDisabled?: boolean | undefined;
 }
 export declare namespace ToolbarButton {
   type State = ToolbarButtonState;

package/esm/toolbar/button/ToolbarButton.js

@@ -39,11 +39,11 @@ export const ToolbarButton = /*#__PURE__*/React.forwardRef(function ToolbarButto
     focusableWhenDisabled,
     native: nativeButton
   });
-  const state = React.useMemo(() => ({
+  const state = {
     disabled,
     orientation,
     focusable: focusableWhenDisabled
-  }), [disabled, focusableWhenDisabled, orientation]);
+  };
   return /*#__PURE__*/_jsx(CompositeItem, {
     tag: "button",
     render: render,

package/esm/toolbar/group/ToolbarGroup.d.ts

@@ -13,7 +13,7 @@ export interface ToolbarGroupProps extends BaseUIComponentProps<'div', ToolbarRo
    * When `true` all toolbar items in the group are disabled.
    * @default false
    */
-  disabled?: boolean;
+  disabled?: boolean | undefined;
 }
 export declare namespace ToolbarGroup {
   type Props = ToolbarGroupProps;

package/esm/toolbar/group/ToolbarGroup.js

@@ -27,10 +27,10 @@ export const ToolbarGroup = /*#__PURE__*/React.forwardRef(function ToolbarGroup(
   const contextValue = React.useMemo(() => ({
     disabled
   }), [disabled]);
-  const state = React.useMemo(() => ({
+  const state = {
     disabled,
     orientation
-  }), [disabled, orientation]);
+  };
   const element = useRenderElement('div', componentProps, {
     state,
     ref: forwardedRef,

package/esm/toolbar/group/ToolbarGroupContext.js

@@ -1,3 +1,5 @@
+'use client';
+
 import _formatErrorMessage from "@base-ui/utils/formatErrorMessage";
 import * as React from 'react';
 export const ToolbarGroupContext = /*#__PURE__*/React.createContext(undefined);

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

@@ -17,13 +17,13 @@ export interface ToolbarInputProps extends BaseUIComponentProps<'input', Toolbar
    * When `true` the item is disabled.
    * @default false
    */
-  disabled?: boolean;
+  disabled?: boolean | undefined;
   /**
    * When `true` the item remains focuseable when disabled.
    * @default true
    */
-  focusableWhenDisabled?: boolean;
-  defaultValue?: React.ComponentProps<'input'>['defaultValue'];
+  focusableWhenDisabled?: boolean | undefined;
+  defaultValue?: React.ComponentProps<'input'>['defaultValue'] | undefined;
 }
 export declare namespace ToolbarInput {
   type State = ToolbarInputState;

package/esm/toolbar/input/ToolbarInput.js

@@ -39,11 +39,11 @@ export const ToolbarInput = /*#__PURE__*/React.forwardRef(function ToolbarInput(
     focusableWhenDisabled,
     isNativeButton: false
   });
-  const state = React.useMemo(() => ({
+  const state = {
     disabled,
     orientation,
     focusable: focusableWhenDisabled
-  }), [disabled, focusableWhenDisabled, orientation]);
+  };
   const defaultProps = {
     onClick(event) {
       if (disabled) {

package/esm/toolbar/link/ToolbarLink.js

@@ -25,9 +25,9 @@ export const ToolbarLink = /*#__PURE__*/React.forwardRef(function ToolbarLink(co
   const {
     orientation
   } = useToolbarRootContext();
-  const state = React.useMemo(() => ({
+  const state = {
     orientation
-  }), [orientation]);
+  };
   return /*#__PURE__*/_jsx(CompositeItem, {
     tag: "a",
     render: render,

package/esm/toolbar/root/ToolbarRoot.d.ts

@@ -16,18 +16,18 @@ export interface ToolbarRootState {
   orientation: ToolbarRoot.Orientation;
 }
 export interface ToolbarRootProps extends BaseUIComponentProps<'div', ToolbarRoot.State> {
-  disabled?: boolean;
+  disabled?: boolean | undefined;
   /**
    * The orientation of the toolbar.
    * @default 'horizontal'
    */
-  orientation?: ToolbarRoot.Orientation;
+  orientation?: ToolbarRoot.Orientation | undefined;
   /**
    * If `true`, using keyboard navigation will wrap focus to the other end of the toolbar once the end is reached.
    *
    * @default true
    */
-  loopFocus?: boolean;
+  loopFocus?: boolean | undefined;
 }
 export declare namespace ToolbarRoot {
   type ItemMetadata = ToolbarRootItemMetadata;