Address review feedback: Replace @ts-ignore with proper onChange callbacks

chihsuan · chihsuan · commit 8db0b825e4bc · 2025-07-16T13:26:06.000+08:00
diff --git a/packages/components/src/calendar/date-calendar/index.tsx b/packages/components/src/calendar/date-calendar/index.tsx
@@ -3,14 +3,18 @@
  */
 import { DayPicker } from 'react-day-picker';
 import { enUS } from 'react-day-picker/locale';
+/**
+ * WordPress dependencies
+ */
+import { useCallback } from '@wordpress/element';
 /**
  * Internal dependencies
  */
 import { COMMON_PROPS } from '../utils/constants';
 import { clampNumberOfMonths } from '../utils/misc';
 import { useControlledValue } from '../../utils/hooks';
 import { useLocalizationProps } from '../utils/use-localization-props';
-import type { DateCalendarProps } from '../types';
+import type { DateCalendarProps, OnSelectHandler } from '../types';
 
 /**
  * `DateCalendar` is a React component that provides a customizable calendar
@@ -35,14 +39,21 @@ export const DateCalendar = ( {
 		mode: 'single',
 	} );
 
-	const [ selected, setSelected ] = useControlledValue<
-		Date | undefined | null
-	>( {
-		defaultValue: defaultSelected,
-		value: selectedProp,
-		// @ts-ignore: The useControlledValue expects onChange value parameter type is the same as the value parameter, but in our case, onSelect always receives DateRange | undefined.
-		onChange: onSelect,
-	} );
+	const onChange: OnSelectHandler< typeof selectedProp > = useCallback(
+		( selected, triggerDate, modifiers, e ) => {
+			// Convert internal `null` to `undefined` for the public event handler.
+			onSelect?.( selected ?? undefined, triggerDate, modifiers, e );
+		},
+		[ onSelect ]
+	);
+
+	const [ selected, setSelected ] = useControlledValue< typeof selectedProp >(
+		{
+			defaultValue: defaultSelected,
+			value: selectedProp,
+			onChange,
+		}
+	);
 
 	return (
 		<DayPicker
diff --git a/packages/components/src/calendar/date-range-calendar/index.tsx b/packages/components/src/calendar/date-range-calendar/index.tsx
@@ -7,15 +7,19 @@ import { enUS } from 'react-day-picker/locale';
 /**
  * WordPress dependencies
  */
-import { useMemo, useState } from '@wordpress/element';
+import { useMemo, useState, useCallback } from '@wordpress/element';
 /**
  * Internal dependencies
  */
 import { COMMON_PROPS, MODIFIER_CLASSNAMES } from '../utils/constants';
 import { clampNumberOfMonths } from '../utils/misc';
 import { useControlledValue } from '../../utils/hooks';
 import { useLocalizationProps } from '../utils/use-localization-props';
-import type { DateRangeCalendarProps, DateRange } from '../types';
+import type {
+	DateRangeCalendarProps,
+	DateRange,
+	OnSelectHandler,
+} from '../types';
 
 export function usePreviewRange( {
 	selected,
@@ -151,13 +155,20 @@ export const DateRangeCalendar = ( {
 		mode: 'range',
 	} );
 
+	const onChange: OnSelectHandler< typeof selectedProp > = useCallback(
+		( selected, triggerDate, modifiers, e ) => {
+			// Convert internal `null` to `undefined` for the public event handler.
+			onSelect?.( selected ?? undefined, triggerDate, modifiers, e );
+		},
+		[ onSelect ]
+	);
+
 	const [ selected, setSelected ] = useControlledValue<
 		DateRange | undefined | null
 	>( {
 		defaultValue: defaultSelected,
 		value: selectedProp,
-		// @ts-ignore: The useControlledValue expects onChange value parameter type is the same as the value parameter, but in our case, onSelect always receives DateRange | undefined.
-		onChange: onSelect,
+		onChange,
 	} );
 
 	const [ hoveredDate, setHoveredDate ] = useState< Date | undefined >(
diff --git a/packages/components/src/calendar/types.ts b/packages/components/src/calendar/types.ts
@@ -153,7 +153,7 @@ type DayOfWeek = {
  * @param {Modifiers}                              modifiers   - The modifiers associated with the event.
  * @param {React.MouseEvent | React.KeyboardEvent} e           - The event object.
  */
-type OnSelectHandler< T > = (
+export type OnSelectHandler< T > = (
 	selected: T,
 	triggerDate: Date,
 	modifiers: Modifiers,
diff --git a/packages/components/src/toggle-group-control/toggle-group-control/as-button-group.tsx b/packages/components/src/toggle-group-control/toggle-group-control/as-button-group.tsx
@@ -48,7 +48,9 @@ function UnforwardedToggleGroupControlAsButtonGroup(
 	const { value, defaultValue } =
 		useComputeControlledOrUncontrolledValue( valueProp );
 
-	const [ selectedValue, setSelectedValue ] = useControlledValue( {
+	const [ selectedValue, setSelectedValue ] = useControlledValue<
+		typeof value
+	>( {
 		defaultValue,
 		value,
 		onChange,
diff --git a/packages/components/src/utils/hooks/use-controlled-value.ts b/packages/components/src/utils/hooks/use-controlled-value.ts
@@ -48,5 +48,5 @@ export function useControlledValue< T >( {
 		setValue = setState;
 	}
 
-	return [ value, setValue as typeof setState ] as const;
+	return [ value, setValue ] as const;
 }

Original file line number	Diff line number	Diff line change
`@@ -48,5 +48,5 @@ export function useControlledValue< T >( {`
`48`	`48`	`setValue = setState;`
`49`	`49`	`}`
`50`	`50`
`51`		`- return [ value, setValue as typeof setState ] as const;`
	`51`	`+ return [ value, setValue ] as const;`
`52`	`52`	`}`