@base-ui/react 1.0.0 → 1.2.0

package/toast/useToastManager.d.ts

@@ -1,10 +1,9 @@
 import * as React from 'react';
-import { ToastContext } from "./provider/ToastProviderContext.js";
 import type { ToastPositionerProps } from "./positioner/ToastPositioner.js";
 /**
  * Returns the array of toasts and methods to manage them.
  */
-export declare function useToastManager(): UseToastManagerReturnValue;
+export declare function useToastManager<Data extends object = any>(): UseToastManagerReturnValue<Data>;
 export interface ToastObject<Data extends object> {
   /**
    * The unique identifier for the toast.
@@ -13,7 +12,7 @@ export interface ToastObject<Data extends object> {
   /**
    * The ref for the toast.
    */
-  ref?: React.RefObject<HTMLElement | null>;
+  ref?: React.RefObject<HTMLElement | null> | undefined;
   /**
    * The title of the toast.
    */
@@ -22,7 +21,7 @@ export interface ToastObject<Data extends object> {
    * The type of the toast. Used to conditionally style the toast,
    * including conditionally rendering elements based on the type.
    */
-  type?: string;
+  type?: string | undefined;
   /**
    * The description of the toast.
    */
@@ -32,14 +31,14 @@ export interface ToastObject<Data extends object> {
    * A value of `0` will prevent the toast from being dismissed automatically.
    * @default 5000
    */
-  timeout?: number;
+  timeout?: number | undefined;
   /**
    * The priority of the toast.
    * - `low` - The toast will be announced politely.
    * - `high` - The toast will be announced urgently.
    * @default 'low'
    */
-  priority?: 'low' | 'high';
+  priority?: ('low' | 'high') | undefined;
   /**
    * The transition status of the toast.
    */
@@ -47,49 +46,49 @@ export interface ToastObject<Data extends object> {
   /**
    * Determines if the toast was closed due to the limit being reached.
    */
-  limited?: boolean;
+  limited?: boolean | undefined;
   /**
    * The height of the toast.
    */
-  height?: number;
+  height?: number | undefined;
   /**
    * Callback function to be called when the toast is closed.
    */
-  onClose?: () => void;
+  onClose?: (() => void) | undefined;
   /**
    * Callback function to be called when the toast is removed from the list after any animations are complete when closed.
    */
-  onRemove?: () => void;
+  onRemove?: (() => void) | undefined;
   /**
    * The props for the action button.
    */
-  actionProps?: React.ComponentPropsWithoutRef<'button'>;
+  actionProps?: React.ComponentPropsWithoutRef<'button'> | undefined;
   /**
    * The props forwarded to the toast positioner element when rendering anchored toasts.
    */
-  positionerProps?: ToastManagerPositionerProps;
+  positionerProps?: ToastManagerPositionerProps | undefined;
   /**
    * Custom data for the toast.
    */
-  data?: Data;
+  data?: Data | undefined;
 }
 export interface ToastManagerPositionerProps extends Omit<ToastPositionerProps, 'anchor' | 'toast'> {
   /**
    * An element to position the toast against.
    */
-  anchor?: Element | null;
+  anchor?: (Element | null) | undefined;
 }
-export interface UseToastManagerReturnValue {
-  toasts: ToastContext<any>['toasts'];
-  add: <Data extends object>(options: ToastManagerAddOptions<Data>) => string;
+export interface UseToastManagerReturnValue<Data extends object = any> {
+  toasts: ToastObject<Data>[];
+  add: <T extends Data = Data>(options: ToastManagerAddOptions<T>) => string;
   close: (toastId: string) => void;
-  update: <Data extends object>(toastId: string, options: ToastManagerUpdateOptions<Data>) => void;
-  promise: <Value, Data extends object>(promise: Promise<Value>, options: ToastManagerPromiseOptions<Value, Data>) => Promise<Value>;
+  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'> {
-  id?: string;
+  id?: string | undefined;
 }
-export interface ToastManagerUpdateOptions<Data extends object> extends Partial<ToastManagerAddOptions<Data>> {}
+export interface ToastManagerUpdateOptions<Data extends object> extends Partial<Omit<ToastObject<Data>, 'id' | 'ref' | 'height' | 'transitionStatus' | 'limited'>> {}
 export interface ToastManagerPromiseOptions<Value, Data extends object> {
   loading: string | ToastManagerUpdateOptions<Data>;
   success: string | ToastManagerUpdateOptions<Data> | ((result: Value) => string | ToastManagerUpdateOptions<Data>);

package/toast/useToastManager.js

@@ -14,22 +14,16 @@ var _ToastProviderContext = require("./provider/ToastProviderContext");
  * Returns the array of toasts and methods to manage them.
  */
 function useToastManager() {
-  const context = React.useContext(_ToastProviderContext.ToastContext);
-  if (!context) {
+  const store = React.useContext(_ToastProviderContext.ToastContext);
+  if (!store) {
     throw new Error(process.env.NODE_ENV !== "production" ? 'Base UI: useToastManager must be used within <Toast.Provider>.' : (0, _formatErrorMessage2.default)(73));
   }
-  const {
-    toasts,
-    add,
-    close,
-    update,
-    promise
-  } = context;
+  const toasts = store.useState('toasts');
   return React.useMemo(() => ({
     toasts,
-    add,
-    close,
-    update,
-    promise
-  }), [toasts, add, close, update, promise]);
+    add: store.addToast,
+    close: store.closeToast,
+    update: store.updateToast,
+    promise: store.promiseToast
+  }), [toasts, store]);
 }

package/toast/viewport/ToastViewport.d.ts

@@ -6,7 +6,7 @@ import type { BaseUIComponentProps } from "../../utils/types.js";
  *
  * Documentation: [Base UI Toast](https://base-ui.com/react/components/toast)
  */
-export declare const ToastViewport: React.ForwardRefExoticComponent<ToastViewportProps & React.RefAttributes<HTMLDivElement>>;
+export declare const ToastViewport: React.ForwardRefExoticComponent<Omit<ToastViewportProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
 export interface ToastViewportState {
   /**
    * Whether toasts are expanded in the viewport.

package/toast/viewport/ToastViewport.js

@@ -9,9 +9,9 @@ exports.ToastViewport = void 0;
 var React = _interopRequireWildcard(require("react"));
 var _owner = require("@base-ui/utils/owner");
 var _visuallyHidden = require("@base-ui/utils/visuallyHidden");
+var _useTimeout = require("@base-ui/utils/useTimeout");
 var _utils = require("../../floating-ui-react/utils");
 var _FocusGuard = require("../../utils/FocusGuard");
-var _ToastViewportContext = require("./ToastViewportContext");
 var _ToastProviderContext = require("../provider/ToastProviderContext");
 var _useRenderElement = require("../../utils/useRenderElement");
 var _focusVisible = require("../utils/focusVisible");
@@ -30,76 +30,69 @@ const ToastViewport = exports.ToastViewport = /*#__PURE__*/React.forwardRef(func
     children,
     ...elementProps
   } = componentProps;
-  const {
-    toasts,
-    pauseTimers,
-    resumeTimers,
-    setHovering,
-    setFocused,
-    viewportRef,
-    windowFocusedRef,
-    prevFocusElement,
-    setPrevFocusElement,
-    expanded,
-    focused
-  } = (0, _ToastProviderContext.useToastContext)();
+  const store = (0, _ToastProviderContext.useToastProviderContext)();
+  const windowFocusTimeout = (0, _useTimeout.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((0, _utils.activeElement)((0, _owner.ownerDocument)(viewportRef.current)));
-        viewportRef.current?.focus({
+        store.setPrevFocusElement((0, _utils.activeElement)((0, _owner.ownerDocument)(viewport)));
+        viewport?.focus({
           preventScroll: true
         });
-        pauseTimers();
-        setFocused(true);
+        store.pauseTimers();
+        store.setFocused(true);
       }
     }
-    const win = (0, _owner.ownerWindow)(viewportRef.current);
+    const win = (0, _owner.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 = (0, _owner.ownerWindow)(viewportRef.current);
+    const win = (0, _owner.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 = (0, _utils.getTarget)(event);
-      const activeEl = (0, _utils.activeElement)((0, _owner.ownerDocument)(viewportRef.current));
-      if (!(0, _utils.contains)(viewportRef.current, target) || !(0, _focusVisible.isFocusVisible)(activeEl)) {
-        resumeTimers();
+      const activeEl = (0, _utils.activeElement)((0, _owner.ownerDocument)(viewport));
+      if (!(0, _utils.contains)(viewport, target) || !(0, _focusVisible.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);
@@ -107,84 +100,69 @@ const ToastViewport = exports.ToastViewport = /*#__PURE__*/React.forwardRef(func
       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 = (0, _owner.ownerDocument)(viewportNode);
-    function handlePointerDown(event) {
-      if (event.pointerType !== 'touch') {
-        return;
-      }
-      const target = (0, _utils.getTarget)(event);
-      if ((0, _utils.contains)(viewportNode, target)) {
-        return;
-      }
-      resumeTimers();
-      setHovering(false);
-      setFocused(false);
-    }
-    doc.addEventListener('pointerdown', handlePointerDown, true);
+    const doc = (0, _owner.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() {
@@ -199,17 +177,17 @@ 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)(viewportRef.current).activeElement)) {
-      setFocused(true);
-      pauseTimers();
+    if ((0, _focusVisible.isFocusVisible)((0, _owner.ownerDocument)(store.state.viewport).activeElement)) {
+      store.setFocused(true);
+      store.pauseTimers();
     }
   }
   function handleBlur(event) {
-    if (!focused || (0, _utils.contains)(viewportRef.current, event.relatedTarget)) {
+    if (!focused || (0, _utils.contains)(store.state.viewport, event.relatedTarget)) {
       return;
     }
-    setFocused(false);
-    resumeTimers();
+    store.setFocused(false);
+    store.resumeTimers();
   }
   const defaultProps = {
     tabIndex: -1,
@@ -226,11 +204,11 @@ const ToastViewport = exports.ToastViewport = /*#__PURE__*/React.forwardRef(func
     onKeyDown: handleKeyDown,
     onClick: handleFocus
   };
-  const state = React.useMemo(() => ({
+  const state = {
     expanded
-  }), [expanded]);
+  };
   const element = (0, _useRenderElement.useRenderElement)('div', componentProps, {
-    ref: [forwardedRef, viewportRef],
+    ref: [forwardedRef, store.setViewport],
     state,
     props: [defaultProps, {
       style: {
@@ -238,21 +216,17 @@ const ToastViewport = exports.ToastViewport = /*#__PURE__*/React.forwardRef(func
       }
     }, elementProps, {
       children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(React.Fragment, {
-        children: [numToasts > 0 && prevFocusElement && /*#__PURE__*/(0, _jsxRuntime.jsx)(_FocusGuard.FocusGuard, {
+        children: [!isEmpty && prevFocusElement && /*#__PURE__*/(0, _jsxRuntime.jsx)(_FocusGuard.FocusGuard, {
           onFocus: handleFocusGuard
-        }), children, numToasts > 0 && prevFocusElement && /*#__PURE__*/(0, _jsxRuntime.jsx)(_FocusGuard.FocusGuard, {
+        }), children, !isEmpty && prevFocusElement && /*#__PURE__*/(0, _jsxRuntime.jsx)(_FocusGuard.FocusGuard, {
           onFocus: handleFocusGuard
         })]
       })
     }]
   });
-  const contextValue = React.useMemo(() => ({
-    viewportRef
-  }), [viewportRef]);
   const highPriorityToasts = React.useMemo(() => toasts.filter(toast => toast.priority === 'high'), [toasts]);
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_ToastViewportContext.ToastViewportContext.Provider, {
-    value: contextValue,
-    children: [numToasts > 0 && prevFocusElement && /*#__PURE__*/(0, _jsxRuntime.jsx)(_FocusGuard.FocusGuard, {
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(React.Fragment, {
+    children: [!isEmpty && prevFocusElement && /*#__PURE__*/(0, _jsxRuntime.jsx)(_FocusGuard.FocusGuard, {
       onFocus: handleFocusGuard
     }), element, !focused && highPriorityToasts.length > 0 && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
       style: _visuallyHidden.visuallyHidden,

package/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<ToggleProps & 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/toggle/Toggle.js

@@ -9,6 +9,8 @@ exports.Toggle = void 0;
 var React = _interopRequireWildcard(require("react"));
 var _useStableCallback = require("@base-ui/utils/useStableCallback");
 var _useControlled = require("@base-ui/utils/useControlled");
+var _useIsoLayoutEffect = require("@base-ui/utils/useIsoLayoutEffect");
+var _error = require("@base-ui/utils/error");
 var _useBaseUiId = require("../utils/useBaseUiId");
 var _useRenderElement = require("../utils/useRenderElement");
 var _ToggleGroupContext = require("../toggle-group/ToggleGroupContext");
@@ -46,8 +48,16 @@ const Toggle = exports.Toggle = /*#__PURE__*/React.forwardRef(function Toggle(co
   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
+    (0, _useIsoLayoutEffect.useIsoLayoutEffect)(() => {
+      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.');
+      }
+    }, [groupContext, valueProp, groupContext?.isValueInitialized]);
+  }
   const [pressed, setPressedState] = (0, _useControlled.useControlled)({
-    controlled: groupContext ? groupValue?.indexOf(value) > -1 : pressedProp,
+    controlled: groupContext ? value !== undefined && groupValue.indexOf(value) > -1 : pressedProp,
     default: defaultPressed,
     name: 'Toggle',
     state: 'pressed'
@@ -65,10 +75,10 @@ const Toggle = exports.Toggle = /*#__PURE__*/React.forwardRef(function Toggle(co
     disabled,
     native: nativeButton
   });
-  const state = React.useMemo(() => ({
+  const state = {
     disabled,
     pressed
-  }), [disabled, pressed]);
+  };
   const refs = [buttonRef, forwardedRef];
   const props = [{
     'aria-pressed': pressed,

package/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<ToggleGroupProps & 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/toggle-group/ToggleGroup.js

@@ -51,6 +51,7 @@ const ToggleGroup = exports.ToggleGroup = /*#__PURE__*/React.forwardRef(function
     }
     return undefined;
   }, [valueProp, defaultValueProp]);
+  const isValueInitialized = React.useMemo(() => valueProp !== undefined || defaultValueProp !== undefined, [valueProp, defaultValueProp]);
   const disabled = (toolbarContext?.disabled ?? false) || disabledProp;
   const [groupValue, setValueState] = (0, _useControlled.useControlled)({
     controlled: valueProp,
@@ -78,17 +79,18 @@ const ToggleGroup = exports.ToggleGroup = /*#__PURE__*/React.forwardRef(function
       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'
   };
@@ -108,7 +110,8 @@ const ToggleGroup = exports.ToggleGroup = /*#__PURE__*/React.forwardRef(function
       refs: [forwardedRef],
       props: [defaultProps, elementProps],
       stateAttributesMapping: stateAttributesMapping,
-      loopFocus: loopFocus
+      loopFocus: loopFocus,
+      enableHomeAndEndKeys: true
     })
   });
 });