[core] Make callback parameters consistent (#832)

docs/data/api/slider-root.json

@@ -15,8 +15,8 @@
     "onValueChange": {
       "type": { "name": "func" },
       "signature": {
-        "type": "function(value: number | Array<number>, activeThumb: number, event: Event) => void",
-        "describedArgs": ["value", "activeThumb", "event"]
+        "type": "function(value: number | Array<number>, event: Event, activeThumbIndex: number) => void",
+        "describedArgs": ["value", "event", "activeThumbIndex"]
       }
     },
     "onValueCommitted": {

docs/data/translations/api-docs/slider-root/slider-root.json

@@ -24,8 +24,8 @@
       "description": "Callback function that is fired when the slider's value changed.",
       "typeDescriptions": {
         "value": "The new value.",
-        "activeThumb": "Index of the currently moved thumb.",
-        "event": "The event source of the callback. You can pull out the new value by accessing <code>event.target.value</code> (any). <strong>Warning</strong>: This is a generic event not a change event."
+        "event": "The event source of the callback. You can pull out the new value by accessing <code>event.target.value</code> (any).",
+        "activeThumbIndex": "Index of the currently moved thumb."
       }
     },
     "onValueCommitted": {

docs/reference/generated/slider-root.json

@@ -35,7 +35,7 @@
       "description": "The minimum steps between values in a range slider."
     },
     "onValueChange": {
-      "type": "(value, activeThumb, event) => void",
+      "type": "(value, event, activeThumbIndex) => void",
       "description": "Callback function that is fired when the slider's value changed."
     },
     "onValueCommitted": {

docs/reference/overrides/slider-root.json

@@ -2,7 +2,7 @@
   "name": "SliderRoot",
   "props": {
     "onValueChange": {
-      "type": "(value, activeThumb, event) => void"
+      "type": "(value, event, activeThumbIndex) => void"
     },
     "onValueCommitted": {
       "type": "(value, event) => void"

packages/mui-base/src/Menu/RadioGroup/MenuRadioGroup.tsx

@@ -84,7 +84,7 @@ namespace MenuRadioGroup {
      *
      * @default () => {}
      */
-    onValueChange?: (newValue: any, event: Event) => void;
+    onValueChange?: (value: any, event: Event) => void;
   }
 
   export type OwnerState = {};

packages/mui-base/src/Menu/Root/MenuRoot.tsx

@@ -115,7 +115,7 @@ namespace MenuRoot {
     /**
      * Callback fired when the component requests to be opened or closed.
      */
-    onOpenChange?: (open: boolean, event: Event | undefined) => void;
+    onOpenChange?: (open: boolean, event?: Event) => void;
     /**
      * Allows to control whether the dropdown is open.
      * This is a controlled counterpart of `defaultOpen`.

packages/mui-base/src/Menu/Root/useMenuRoot.ts

@@ -210,7 +210,7 @@ export namespace useMenuRoot {
     /**
      * Callback fired when the component requests to be opened or closed.
      */
-    onOpenChange: ((open: boolean, event: Event | undefined) => void) | undefined;
+    onOpenChange: ((open: boolean, event?: Event) => void) | undefined;
     /**
      * If `true`, the Menu is initially open.
      */

packages/mui-base/src/Popover/Root/usePopoverRoot.ts

@@ -183,7 +183,7 @@ export namespace usePopoverRoot {
      * Callback fired when the popover popup is requested to be opened or closed. Use when
      * controlled.
      */
-    onOpenChange?: (isOpen: boolean, event?: Event, reason?: OpenChangeReason) => void;
+    onOpenChange?: (open: boolean, event?: Event, reason?: OpenChangeReason) => void;
     /**
      * Whether the popover popup opens when the trigger is hovered after the provided `delay`.
      * @default false

packages/mui-base/src/PreviewCard/Root/usePreviewCardRoot.ts

@@ -161,7 +161,7 @@ export namespace usePreviewCardRoot {
      * Callback fired when the preview card popup is requested to be opened or closed. Use when
      * controlled.
      */
-    onOpenChange?: (isOpen: boolean, event?: Event, reason?: OpenChangeReason) => void;
+    onOpenChange?: (open: boolean, event?: Event, reason?: OpenChangeReason) => void;
     /**
      * Whether the preview card popup opens when the trigger is hovered after the provided `delay`.
      * @default false

packages/mui-base/src/Radio/Root/useRadioRoot.tsx

@@ -84,7 +84,7 @@ export function useRadioRoot(params: useRadioRoot.Parameters) {
           setFieldTouched(true);
           setDirty(value !== validityData.initialValue);
           setCheckedValue(value);
-          onValueChange?.(value, event);
+          onValueChange?.(value, event.nativeEvent);
         },
       }),
     [

packages/mui-base/src/RadioGroup/Root/RadioGroupRoot.tsx

@@ -130,7 +130,7 @@ namespace RadioGroupRoot {
     /**
      * Callback fired when the value changes.
      */
-    onValueChange?: (value: unknown, event: React.ChangeEvent<HTMLInputElement>) => void;
+    onValueChange?: (value: unknown, event: Event) => void;
   }
 }
 

packages/mui-base/src/RadioGroup/Root/RadioGroupRootContext.ts

@@ -8,7 +8,7 @@ export interface RadioGroupRootContext {
   required: boolean | undefined;
   checkedValue: unknown;
   setCheckedValue: React.Dispatch<React.SetStateAction<unknown>>;
-  onValueChange: (value: unknown, event: React.ChangeEvent<HTMLInputElement>) => void;
+  onValueChange: (value: unknown, event: Event) => void;
   touched: boolean;
   setTouched: React.Dispatch<React.SetStateAction<boolean>>;
 }

packages/mui-base/src/Slider/Root/SliderRoot.test.tsx

@@ -1255,7 +1255,7 @@ describeSkipIf(typeof Touch === 'undefined')('<Slider.Root />', () => {
     });
 
     it('should pass "name" and "value" as part of the event.target for onValueChange', async () => {
-      const handleValueChange = stub().callsFake((newValue, thumbIndex, event) => event.target);
+      const handleValueChange = stub().callsFake((newValue, event) => event.target);
 
       const { getByRole } = await render(
         <TestSlider onValueChange={handleValueChange} name="change-testing" value={3} />,

packages/mui-base/src/Slider/Root/SliderRoot.tsx

@@ -216,10 +216,9 @@ SliderRoot.propTypes /* remove-proptypes */ = {
    * Callback function that is fired when the slider's value changed.
    *
    * @param {number | number[]} value The new value.
-   * @param {number} activeThumb Index of the currently moved thumb.
    * @param {Event} event The event source of the callback.
    * You can pull out the new value by accessing `event.target.value` (any).
-   * **Warning**: This is a generic event not a change event.
+   * @param {number} activeThumbIndex Index of the currently moved thumb.
    */
   onValueChange: PropTypes.func,
   /**

packages/mui-base/src/Slider/Root/useSliderRoot.ts

@@ -233,7 +233,7 @@ export function useSliderRoot(parameters: useSliderRoot.Parameters): useSliderRo
         value: { value, name },
       });
 
-      onValueChange(value, thumbIndex, clonedEvent);
+      onValueChange(value, clonedEvent, thumbIndex);
     },
     [name, onValueChange],
   );
@@ -541,12 +541,11 @@ export namespace useSliderRoot {
      * Callback function that is fired when the slider's value changed.
      *
      * @param {number | number[]} value The new value.
-     * @param {number} activeThumb Index of the currently moved thumb.
      * @param {Event} event The event source of the callback.
      * You can pull out the new value by accessing `event.target.value` (any).
-     * **Warning**: This is a generic event not a change event.
+     * @param {number} activeThumbIndex Index of the currently moved thumb.
      */
-    onValueChange?: (value: number | number[], activeThumb: number, event: Event) => void;
+    onValueChange?: (value: number | number[], event: Event, activeThumbIndex: number) => void;
     /**
      * Callback function that is fired when the `pointerup` is triggered.
      *

packages/mui-base/src/Switch/Root/useSwitchRoot.ts

@@ -115,7 +115,7 @@ export function useSwitchRoot(params: useSwitchRoot.Parameters): useSwitchRoot.R
 
           setDirty(nextChecked !== validityData.initialValue);
           setCheckedState(nextChecked);
-          onCheckedChange?.(nextChecked, event);
+          onCheckedChange?.(nextChecked, event.nativeEvent);
         },
       }),
     [
@@ -179,7 +179,7 @@ export namespace useSwitchRoot {
      * @param {boolean} checked The new checked state.
      * @param {React.ChangeEvent<HTMLInputElement>} event The event source of the callback.
      */
-    onCheckedChange?: (checked: boolean, event: React.ChangeEvent<HTMLInputElement>) => void;
+    onCheckedChange?: (checked: boolean, event: Event) => void;
     /**
      * If `true`, the component is read-only.
      * Functionally, this is equivalent to being disabled, but the assistive technologies will announce this differently.

packages/mui-base/src/Tabs/Root/TabsRoot.tsx

@@ -93,7 +93,7 @@ namespace TabsRoot {
     /**
      * Callback invoked when new value is being set.
      */
-    onValueChange?: (value: any | null, event: React.SyntheticEvent | null) => void;
+    onValueChange?: (value: any | null, event?: Event) => void;
   }
 }
 

packages/mui-base/src/Tabs/Root/TabsRootContext.ts

@@ -11,7 +11,7 @@ export interface TabsRootContext {
    * Callback for setting new value.
    */
   onSelected: (
-    event: React.SyntheticEvent | null,
+    event: Event | undefined,
     value: any | null,
     activationDirection: TabActivationDirection,
   ) => void;

packages/mui-base/src/Tabs/Root/useTabsRoot.ts

@@ -35,13 +35,13 @@ function useTabsRoot(parameters: useTabsRoot.Parameters): useTabsRoot.ReturnValu
 
   const onSelected = React.useCallback(
     (
-      event: React.SyntheticEvent | null,
+      event: Event | undefined,
       newValue: any | null,
       activationDirection: TabActivationDirection,
     ) => {
       setValue(newValue);
       setTabActivationDirection(activationDirection);
-      onValueChange?.(newValue, event);
+      onValueChange?.(newValue, event ?? undefined);
     },
     [onValueChange, setValue],
   );
@@ -117,7 +117,7 @@ namespace useTabsRoot {
     /**
      * Callback invoked when new value is being set.
      */
-    onValueChange?: (value: any | null, event: React.SyntheticEvent | null) => void;
+    onValueChange?: (value: any | null, event?: Event) => void;
   }
 
   export interface ReturnValue {

packages/mui-base/src/Tabs/TabsList/useTabsList.ts

@@ -77,7 +77,7 @@ function useTabsList(parameters: useTabsList.Parameters): useTabsList.ReturnValu
     ) => {
       const newSelectedValue = newValue[0] ?? null;
       const activationDirection = detectActivationDirection(newSelectedValue);
-      onSelected(event, newValue[0] ?? null, activationDirection);
+      onSelected(event?.nativeEvent, newValue[0] ?? null, activationDirection);
     },
     [onSelected, detectActivationDirection],
   );

packages/mui-base/src/Tooltip/Root/useTooltipRoot.ts

@@ -182,7 +182,7 @@ export namespace useTooltipRoot {
     /**
      * Callback fired when the tooltip popup is requested to be opened or closed. Use when controlled.
      */
-    onOpenChange?: (isOpen: boolean, event?: Event, reason?: OpenChangeReason) => void;
+    onOpenChange?: (open: boolean, event?: Event, reason?: OpenChangeReason) => void;
     /**
      * Whether the user can move their cursor from the trigger element toward the tooltip popup element
      * without it closing using a "safe polygon" technique.