Improve type accuracy for value prop and all callbacks

Author: wojtekmaj

src/TimeRangePicker.spec.tsx

@@ -602,7 +602,7 @@ describe('TimeRangePicker', () => {
       const onChange = vi.fn();
       const valueFrom = '10:00:00';
       const valueTo = '16:00:00';
-      const value = [valueFrom, valueTo];
+      const value = [valueFrom, valueTo] as [string, string];
 
       const { container } = render(
         <TimeRangePicker format="H:m:s" maxDetail="second" onChange={onChange} value={value} />,
@@ -698,7 +698,7 @@ describe('TimeRangePicker', () => {
       const onChange = vi.fn();
       const valueFrom = '10:00:00';
       const valueTo = '16:00:00';
-      const value = [valueFrom, valueTo];
+      const value = [valueFrom, valueTo] as [string, string];
 
       const { container } = render(
         <TimeRangePicker format="H:m:s" maxDetail="second" onChange={onChange} value={value} />,

src/TimeRangePicker.tsx

@@ -10,7 +10,7 @@ import TimeInput from 'react-time-picker/dist/cjs/TimeInput';
 
 import { isTime } from './shared/propTypes';
 
-import type { ClassName, Detail, LooseValue } from './shared/types';
+import type { ClassName, Detail, LooseValue, Value } from './shared/types';
 
 const baseClassName = 'react-timerange-picker';
 const outsideActionEvents = ['mousedown', 'focusin', 'touchstart'];
@@ -76,7 +76,7 @@ type TimeRangePickerProps = {
   minutePlaceholder?: string;
   name?: string;
   nativeInputAriaLabel?: string;
-  onChange?: (value: null | (string | Date | null)[]) => void;
+  onChange?: (value: Value) => void;
   onClockClose?: () => void;
   onClockOpen?: () => void;
   onFocus?: (event: React.FocusEvent<HTMLDivElement>) => void;
@@ -162,10 +162,7 @@ export default function TimeRangePicker(props: TimeRangePickerProps) {
     }
   }
 
-  function onChange(
-    value: null | (string | Date | null)[],
-    shouldCloseClock = shouldCloseClockProps,
-  ) {
+  function onChange(value: Value, shouldCloseClock = shouldCloseClockProps) {
     if (shouldCloseClock) {
       closeClock();
     }

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 = string | Date | null;
+
+export type Value = ValuePiece | [ValuePiece, ValuePiece];