fix(TimePicker-compat): use null instead of undefined when there's no selected time

packages/react-components/react-timepicker-compat-preview/etc/react-timepicker-compat-preview.api.md

@@ -24,7 +24,7 @@ export type TimePickerProps = Omit<ComboboxProps, 'children' | 'defaultSelectedO
     endHour?: Hour;
     increment?: number;
     dateAnchor?: Date;
-    selectedTime?: Date;
+    selectedTime?: Date | null;
     defaultSelectedTime?: Date;
     onTimeSelect?: (event: TimeSelectionEvents, data: TimeSelectionData) => void;
     formatDateToTimeString?: (date: Date) => string;
@@ -41,7 +41,7 @@ export type TimePickerState = ComboboxState & Required<Pick<TimePickerProps, 'fr
 
 // @public (undocumented)
 export type TimeSelectionData = {
-    selectedTime: Date | undefined;
+    selectedTime: Date | null;
     selectedTimeText: string | undefined;
     error: TimePickerErrorType | undefined;
 };

packages/react-components/react-timepicker-compat-preview/src/components/TimePicker/TimePicker.types.ts

@@ -54,7 +54,7 @@ export type TimePickerOption = {
 export type TimePickerErrorType = 'invalid-input' | 'out-of-bounds';
 
 export type TimeStringValidationResult = {
-  date?: Date;
+  date: Date | null;
   error?: TimePickerErrorType;
 };
 
@@ -65,7 +65,7 @@ export type TimeSelectionData = {
   /**
    * The Date object associated with the selected option. For freeform TimePicker it can also be the Date object parsed from the user input.
    */
-  selectedTime: Date | undefined;
+  selectedTime: Date | null;
   /**
    * The display text for the selected option. For freeform TimePicker it can also be the value in user input.
    */
@@ -125,7 +125,7 @@ export type TimePickerProps = Omit<
     /**
      * Currently selected time in the TimePicker.
      */
-    selectedTime?: Date;
+    selectedTime?: Date | null;
 
     /**
      * Default selected time in the TimePicker, for uncontrolled scenarios.

packages/react-components/react-timepicker-compat-preview/src/components/TimePicker/timeMath.test.ts

@@ -10,8 +10,8 @@ import {
 
 describe('Time Utilities', () => {
   describe('dateToKey', () => {
-    it('should return empty string for undefined date', () => {
-      expect(dateToKey()).toBe('');
+    it('should return empty string for null date', () => {
+      expect(dateToKey(null)).toBe('');
     });
 
     it('should return "invalid" for invalid dates', () => {
@@ -26,12 +26,12 @@ describe('Time Utilities', () => {
   });
 
   describe('keyToDate', () => {
-    it('should return undefined for empty string', () => {
-      expect(keyToDate('')).toBeUndefined();
+    it('should return null for empty string', () => {
+      expect(keyToDate('')).toBeNull();
     });
 
-    it('should return undefined for "invalid" string', () => {
-      expect(keyToDate('invalid')).toBeUndefined();
+    it('should return null for "invalid" string', () => {
+      expect(keyToDate('invalid')).toBeNull();
     });
 
     it('should return date for valid ISO string', () => {
@@ -49,8 +49,8 @@ describe('Time Utilities', () => {
       expect(revertedDate?.getTime()).toEqual(originalDate.getTime());
     });
 
-    it('should be inverses of each other for undefined date', () => {
-      const originalDate = undefined;
+    it('should be inverses of each other for null date', () => {
+      const originalDate = null;
       const key = dateToKey(originalDate);
       const revertedDate = keyToDate(key);
 
@@ -62,7 +62,7 @@ describe('Time Utilities', () => {
       const key = dateToKey(originalDate);
       const revertedDate = keyToDate(key);
 
-      expect(revertedDate).toBeUndefined();
+      expect(revertedDate).toBeNull();
     });
   });
 
@@ -165,13 +165,13 @@ describe('Time Utilities', () => {
 
     it('returns an error when no time string is provided', () => {
       const result = getDateFromTimeString(undefined, dateStartAnchor, dateEndAnchor, {});
-      expect(result.date).toBeUndefined();
+      expect(result.date).toBeNull();
       expect(result.error).toBe('invalid-input');
     });
 
     it('returns an error for an invalid time string', () => {
       const result = getDateFromTimeString('25:30', dateStartAnchor, dateEndAnchor, {});
-      expect(result.date).toBeUndefined();
+      expect(result.date).toBeNull();
       expect(result.error).toBe('invalid-input');
     });
 

packages/react-components/react-timepicker-compat-preview/src/components/TimePicker/timeMath.ts

@@ -7,7 +7,7 @@ function isValidDate(date: Date): boolean {
 /**
  * Converts a Date object to a string key.
  */
-export function dateToKey(date?: Date): string {
+export function dateToKey(date: Date | null): string {
   if (!date) {
     return '';
   }
@@ -21,12 +21,12 @@ export function dateToKey(date?: Date): string {
  * Converts a string key back to a Date object.
  * Returns undefined for keys that don't represent valid dates.
  */
-export function keyToDate(key: string): Date | undefined {
+export function keyToDate(key: string): Date | null {
   if (key === '' || key === 'invalid') {
-    return undefined;
+    return null;
   }
   const date = new Date(key);
-  return isValidDate(date) ? date : undefined;
+  return isValidDate(date) ? date : null;
 }
 
 /**
@@ -157,7 +157,7 @@ export function getDateFromTimeString(
   timeFormatOptions: TimeFormatOptions,
 ): TimeStringValidationResult {
   if (!time) {
-    return { error: 'invalid-input' };
+    return { date: null, error: 'invalid-input' };
   }
 
   const { hour12, showSeconds } = timeFormatOptions;
@@ -171,12 +171,12 @@ export function getDateFromTimeString(
     : REGEX_HIDE_SECONDS_HOUR_24;
 
   if (!regex.test(time)) {
-    return { error: 'invalid-input' };
+    return { date: null, error: 'invalid-input' };
   }
 
   const timeParts = /^(\d\d?):(\d\d):?(\d\d)? ?([ap]m)?/i.exec(time);
   if (!timeParts) {
-    return { error: 'invalid-input' };
+    return { date: null, error: 'invalid-input' };
   }
 
   const [, selectedHours, minutes, seconds, amPm] = timeParts;

packages/react-components/react-timepicker-compat-preview/src/components/TimePicker/useTimePicker.tsx

@@ -29,14 +29,14 @@ export const useTimePicker_unstable = (props: TimePickerProps, ref: React.Ref<HT
     dateAnchor: dateAnchorInProps,
     defaultSelectedTime: defaultSelectedTimeInProps,
     endHour = 24,
+    formatDateToTimeString,
     hour12 = false,
     increment = 30,
-    formatDateToTimeString,
     onTimeSelect,
-    validateFreeFormTime: validateFreeFormTimeInProps,
     selectedTime: selectedTimeInProps,
     showSeconds = false,
     startHour = 0,
+    validateFreeFormTime: validateFreeFormTimeInProps,
     ...rest
   } = props;
   const { freeform = false } = rest;
@@ -64,10 +64,10 @@ export const useTimePicker_unstable = (props: TimePickerProps, ref: React.Ref<HT
     [dateStartAnchor, dateEndAnchor, increment, dateToText],
   );
 
-  const [selectedTime, setSelectedTime] = useControllableState<Date | undefined>({
+  const [selectedTime, setSelectedTime] = useControllableState<Date | null>({
     state: selectedTimeInProps,
     defaultState: defaultSelectedTimeInProps,
-    initialState: undefined,
+    initialState: null,
   });
 
   const [submittedText, setSubmittedText] = React.useState<string | undefined>(undefined);
@@ -142,7 +142,7 @@ const useStableDateAnchor = (providedDate: Date | undefined, startHour: Hour, en
   const [fallbackDateAnchor] = React.useState(() => new Date());
 
   // Convert the Date object to a stable key representation. This ensures that the memoization remains stable when a new Date object representing the same date is passed in.
-  const dateAnchorKey = dateToKey(providedDate);
+  const dateAnchorKey = dateToKey(providedDate ?? null);
   const dateAnchor = React.useMemo(
     () => keyToDate(dateAnchorKey) ?? fallbackDateAnchor,
     [dateAnchorKey, fallbackDateAnchor],