Rename otherProps

Author: mj12albert

docs/reference/generated/toggle-group.json

@@ -12,7 +12,6 @@
     },
     "onValueChange": {
       "type": "function(groupValue: Array<any>, event: Event) => void",
-      "required": true,
       "description": "Callback fired when the pressed states of the ToggleGroup changes."
     },
     "toggleMultiple": {

packages/react/src/toggle-group/ToggleGroup.tsx

@@ -26,7 +26,7 @@ const customStyleHookMapping = {
  * Documentation: [Base UI Toggle Group](https://base-ui.com/react/components/toggle-group)
  */
 const ToggleGroup = React.forwardRef(function ToggleGroup(
-  props: ToggleGroup.Props,
+  componentProps: ToggleGroup.Props,
   forwardedRef: React.ForwardedRef<HTMLDivElement>,
 ) {
   const {
@@ -39,8 +39,8 @@ const ToggleGroup = React.forwardRef(function ToggleGroup(
     value: valueProp,
     className,
     render,
-    ...otherProps
-  } = props;
+    ...elementProps
+  } = componentProps;
 
   const direction = useDirection();
 
@@ -96,14 +96,14 @@ const ToggleGroup = React.forwardRef(function ToggleGroup(
     [disabled, orientation, setGroupValue, groupValue],
   );
 
-  const renderElement = useRenderElement('div', props, {
+  const renderElement = useRenderElement('div', componentProps, {
     state,
     ref: forwardedRef,
     props: [
       {
         role: 'group',
       },
-      otherProps,
+      elementProps,
     ],
     customStyleHookMapping,
   });
@@ -212,7 +212,7 @@ ToggleGroup.propTypes /* remove-proptypes */ = {
    * @param {any[]} groupValue An array of the `value`s of all the pressed items.
    * @param {Event} event The corresponding event that initiated the change.
    */
-  onValueChange: PropTypes.func.isRequired,
+  onValueChange: PropTypes.func,
   /**
    * @default 'horizontal'
    */

packages/react/src/toggle/Toggle.tsx

@@ -16,7 +16,7 @@ import { useButton } from '../use-button/useButton';
  * Documentation: [Base UI Toggle](https://base-ui.com/react/components/toggle)
  */
 const Toggle = React.forwardRef(function Toggle(
-  props: Toggle.Props,
+  componentProps: Toggle.Props,
   forwardedRef: React.ForwardedRef<HTMLButtonElement>,
 ) {
   const {
@@ -29,8 +29,8 @@ const Toggle = React.forwardRef(function Toggle(
     render,
     type, // cannot change button type
     value: valueProp,
-    ...otherProps
-  } = props;
+    ...elementProps
+  } = componentProps;
 
   const value = valueProp ?? '';
 
@@ -67,7 +67,7 @@ const Toggle = React.forwardRef(function Toggle(
     [disabled, pressed],
   );
 
-  const renderElement = useRenderElement('button', props, {
+  const renderElement = useRenderElement('button', componentProps, {
     state,
     ref: buttonRef,
     props: [
@@ -80,7 +80,7 @@ const Toggle = React.forwardRef(function Toggle(
         },
         ref: buttonRef,
       },
-      otherProps,
+      elementProps,
       getButtonProps,
     ],
   });