diff --git a/docs/data/api/slider-root.json b/docs/data/api/slider-root.json index 077f5d8052..f9a02ac8ea 100644 --- a/docs/data/api/slider-root.json +++ b/docs/data/api/slider-root.json @@ -15,8 +15,8 @@ "onValueChange": { "type": { "name": "func" }, "signature": { - "type": "function(value: number | Array, activeThumb: number, event: Event) => void", - "describedArgs": ["value", "activeThumb", "event"] + "type": "function(value: number | Array, event: Event, activeThumbIndex: number) => void", + "describedArgs": ["value", "event", "activeThumbIndex"] } }, "onValueCommitted": { diff --git a/docs/data/translations/api-docs/slider-root/slider-root.json b/docs/data/translations/api-docs/slider-root/slider-root.json index 0d195e281c..db96dd5cf0 100644 --- a/docs/data/translations/api-docs/slider-root/slider-root.json +++ b/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 event.target.value (any). Warning: 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 event.target.value (any).", + "activeThumbIndex": "Index of the currently moved thumb." } }, "onValueCommitted": { diff --git a/docs/reference/generated/slider-root.json b/docs/reference/generated/slider-root.json index 2eff7c49be..a1cc52b9cc 100644 --- a/docs/reference/generated/slider-root.json +++ b/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": { diff --git a/docs/reference/overrides/slider-root.json b/docs/reference/overrides/slider-root.json index 0b21a0289b..673bdceab5 100644 --- a/docs/reference/overrides/slider-root.json +++ b/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" diff --git a/packages/mui-base/src/Menu/RadioGroup/MenuRadioGroup.tsx b/packages/mui-base/src/Menu/RadioGroup/MenuRadioGroup.tsx index 53d8dedd0b..59296d84bf 100644 --- a/packages/mui-base/src/Menu/RadioGroup/MenuRadioGroup.tsx +++ b/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 = {}; diff --git a/packages/mui-base/src/Menu/Root/MenuRoot.tsx b/packages/mui-base/src/Menu/Root/MenuRoot.tsx index 68802b020a..d0ea5dc328 100644 --- a/packages/mui-base/src/Menu/Root/MenuRoot.tsx +++ b/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`. diff --git a/packages/mui-base/src/Menu/Root/useMenuRoot.ts b/packages/mui-base/src/Menu/Root/useMenuRoot.ts index 9ccdcb6df9..e09805b073 100644 --- a/packages/mui-base/src/Menu/Root/useMenuRoot.ts +++ b/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. */ diff --git a/packages/mui-base/src/Popover/Root/usePopoverRoot.ts b/packages/mui-base/src/Popover/Root/usePopoverRoot.ts index 4368f9173d..793ad1a997 100644 --- a/packages/mui-base/src/Popover/Root/usePopoverRoot.ts +++ b/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 diff --git a/packages/mui-base/src/PreviewCard/Root/usePreviewCardRoot.ts b/packages/mui-base/src/PreviewCard/Root/usePreviewCardRoot.ts index 7b9e9dfe62..4a1acb594b 100644 --- a/packages/mui-base/src/PreviewCard/Root/usePreviewCardRoot.ts +++ b/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 diff --git a/packages/mui-base/src/Radio/Root/useRadioRoot.tsx b/packages/mui-base/src/Radio/Root/useRadioRoot.tsx index 87dda643b5..a2dc129ae1 100644 --- a/packages/mui-base/src/Radio/Root/useRadioRoot.tsx +++ b/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); }, }), [ diff --git a/packages/mui-base/src/RadioGroup/Root/RadioGroupRoot.tsx b/packages/mui-base/src/RadioGroup/Root/RadioGroupRoot.tsx index 4fb91a3990..13410e31f0 100644 --- a/packages/mui-base/src/RadioGroup/Root/RadioGroupRoot.tsx +++ b/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) => void; + onValueChange?: (value: unknown, event: Event) => void; } } diff --git a/packages/mui-base/src/RadioGroup/Root/RadioGroupRootContext.ts b/packages/mui-base/src/RadioGroup/Root/RadioGroupRootContext.ts index 73fe309707..12bfdade11 100644 --- a/packages/mui-base/src/RadioGroup/Root/RadioGroupRootContext.ts +++ b/packages/mui-base/src/RadioGroup/Root/RadioGroupRootContext.ts @@ -8,7 +8,7 @@ export interface RadioGroupRootContext { required: boolean | undefined; checkedValue: unknown; setCheckedValue: React.Dispatch>; - onValueChange: (value: unknown, event: React.ChangeEvent) => void; + onValueChange: (value: unknown, event: Event) => void; touched: boolean; setTouched: React.Dispatch>; } diff --git a/packages/mui-base/src/Slider/Root/SliderRoot.test.tsx b/packages/mui-base/src/Slider/Root/SliderRoot.test.tsx index d3d27ff948..7aee6437ca 100644 --- a/packages/mui-base/src/Slider/Root/SliderRoot.test.tsx +++ b/packages/mui-base/src/Slider/Root/SliderRoot.test.tsx @@ -1255,7 +1255,7 @@ describeSkipIf(typeof Touch === 'undefined')('', () => { }); 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( , diff --git a/packages/mui-base/src/Slider/Root/SliderRoot.tsx b/packages/mui-base/src/Slider/Root/SliderRoot.tsx index 0346f83f65..fe0aef8c69 100644 --- a/packages/mui-base/src/Slider/Root/SliderRoot.tsx +++ b/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, /** diff --git a/packages/mui-base/src/Slider/Root/useSliderRoot.ts b/packages/mui-base/src/Slider/Root/useSliderRoot.ts index 1984aa5ac4..5db2afb84c 100644 --- a/packages/mui-base/src/Slider/Root/useSliderRoot.ts +++ b/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. * diff --git a/packages/mui-base/src/Switch/Root/useSwitchRoot.ts b/packages/mui-base/src/Switch/Root/useSwitchRoot.ts index 8fbdf94fd4..78abbd1476 100644 --- a/packages/mui-base/src/Switch/Root/useSwitchRoot.ts +++ b/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} event The event source of the callback. */ - onCheckedChange?: (checked: boolean, event: React.ChangeEvent) => 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. diff --git a/packages/mui-base/src/Tabs/Root/TabsRoot.tsx b/packages/mui-base/src/Tabs/Root/TabsRoot.tsx index 7660a562d1..70942a0e3a 100644 --- a/packages/mui-base/src/Tabs/Root/TabsRoot.tsx +++ b/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; } } diff --git a/packages/mui-base/src/Tabs/Root/TabsRootContext.ts b/packages/mui-base/src/Tabs/Root/TabsRootContext.ts index ac011c009d..5e1e5e30da 100644 --- a/packages/mui-base/src/Tabs/Root/TabsRootContext.ts +++ b/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; diff --git a/packages/mui-base/src/Tabs/Root/useTabsRoot.ts b/packages/mui-base/src/Tabs/Root/useTabsRoot.ts index 8c9e49354d..1a38f6e8f9 100644 --- a/packages/mui-base/src/Tabs/Root/useTabsRoot.ts +++ b/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 { diff --git a/packages/mui-base/src/Tabs/TabsList/useTabsList.ts b/packages/mui-base/src/Tabs/TabsList/useTabsList.ts index 5ecbbbb81f..846b111d5a 100644 --- a/packages/mui-base/src/Tabs/TabsList/useTabsList.ts +++ b/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], ); diff --git a/packages/mui-base/src/Tooltip/Root/useTooltipRoot.ts b/packages/mui-base/src/Tooltip/Root/useTooltipRoot.ts index bda68dfbef..604f626cd0 100644 --- a/packages/mui-base/src/Tooltip/Root/useTooltipRoot.ts +++ b/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.