Improve type accuracy for value prop and all callbacks

src/DateTimeRangePicker.spec.tsx

@@ -1116,7 +1116,7 @@ describe('DateTimeRangePicker', () => {
       const onChange = vi.fn();
       const valueFrom = new Date(2018, 0, 1);
       const valueTo = new Date(2018, 6, 1);
-      const value = [valueFrom, valueTo];
+      const value = [valueFrom, valueTo] as [Date, Date];
 
       const { container } = render(
         <DateTimeRangePicker
@@ -1266,7 +1266,7 @@ describe('DateTimeRangePicker', () => {
       const onChange = vi.fn();
       const valueFrom = new Date(2018, 0, 1);
       const valueTo = new Date(2018, 6, 1);
-      const value = [valueFrom, valueTo];
+      const value = [valueFrom, valueTo] as [Date, Date];
 
       const { container } = render(
         <DateTimeRangePicker

src/DateTimeRangePicker.tsx

@@ -11,7 +11,7 @@ import DateTimeInput from 'react-datetime-picker/dist/cjs/DateTimeInput';
 
 import { isMaxDate, isMinDate } from './shared/propTypes';
 
-import type { ClassName, Detail, LooseValue } from './shared/types';
+import type { ClassName, Detail, LooseValue, Value } from './shared/types';
 
 const baseClassName = 'react-datetimerange-picker';
 const outsideActionEvents = ['mousedown', 'focusin', 'touchstart'];
@@ -86,7 +86,7 @@ type DateTimeRangePickerProps = {
   nativeInputAriaLabel?: string;
   onCalendarClose?: () => void;
   onCalendarOpen?: () => void;
-  onChange?: (value: Date | null | (Date | null)[]) => void;
+  onChange?: (value: Value) => void;
   onClockClose?: () => void;
   onClockOpen?: () => void;
   onFocus?: (event: React.FocusEvent<HTMLDivElement>) => void;
@@ -213,10 +213,7 @@ export default function DateTimeRangePicker(props: DateTimeRangePickerProps) {
     closeClock();
   }, [closeCalendar, closeClock]);
 
-  function onChange(
-    value: Date | null | (Date | null)[],
-    shouldCloseWidgets = shouldCloseWidgetsProps,
-  ) {
+  function onChange(value: Value, shouldCloseWidgets = shouldCloseWidgetsProps) {
     if (shouldCloseWidgets) {
       closeWidgets();
     }
@@ -242,7 +239,13 @@ export default function DateTimeRangePicker(props: DateTimeRangePickerProps) {
     onChange([valueFromDate, valueTo], closeCalendar);
   }
 
-  function onDateChange(nextValue: Date | null | (Date | null)[], shouldCloseWidgets?: boolean) {
+  type DatePiece = Date | null;
+
+  function onDateChange(
+    nextValue: DatePiece | [DatePiece, DatePiece],
+    shouldCloseWidgets?: boolean,
+  ) {
+    // React-Calendar passes an array of values when selectRange is enabled
     const [rawNextValueFrom, rawNextValueTo] = Array.isArray(nextValue) ? nextValue : [nextValue];
     const [valueFrom, valueTo] = Array.isArray(value) ? value : [value];
 

src/shared/types.ts

@@ -4,4 +4,10 @@ export type ClassName = string | null | undefined | (string | null | undefined)[
 
 export type Detail = 'hour' | 'minute' | 'second';
 
-export type LooseValue = string | Date | null | (string | Date | null)[];
+type LooseValuePiece = string | Date | null;
+
+export type LooseValue = LooseValuePiece | [LooseValuePiece, LooseValuePiece];
+
+type ValuePiece = Date | null;
+
+export type Value = ValuePiece | [ValuePiece, ValuePiece];