Allow null values in most places where undefined values are allowed

Author: armedx86

src/Calendar.tsx

@@ -8,7 +8,7 @@ import { CalendarGrid } from './CalendarGrid'
 import { CommonProps, DateChangeCallBack } from './types'
 
 export interface CalendarProps extends CommonProps {
-  month?: Date
+  month?: Date | null
   onMonthChange?: DateChangeCallBack<Date>
   onDayHover?: DateChangeCallBack
   onDayClick?: DateChangeCallBack<Date>
@@ -17,11 +17,11 @@ export interface CalendarProps extends CommonProps {
 
 export function Calendar({
   locale,
-  month: receivedMonth,
+  month: receivedMonth = null,
   modifiers: receivedModifiers,
   modifiersClassNames,
-  minimumDate,
-  maximumDate,
+  minimumDate = null,
+  maximumDate = null,
   onMonthChange,
   onDayHover,
   onDayClick,
@@ -30,7 +30,7 @@ export function Calendar({
 }: CalendarProps): React.JSX.Element {
   const [month, setMonth] = useControllableState(
     receivedMonth,
-    onMonthChange as (month: Date) => void,
+    onMonthChange,
     startOfMonth(new Date())
   )
 

src/CalendarNavigation.tsx

@@ -5,16 +5,16 @@ import { addMonths, getYear, startOfMonth, subMonths, format, isSameMonth, Local
 export interface CalendarNavigationProps {
   locale: Locale
   month: Date
-  minimumDate?: Date
-  maximumDate?: Date
+  minimumDate?: Date | null
+  maximumDate?: Date | null
   onMonthChange: (month: Date) => void
 }
 
 export function CalendarNavigation({
   locale,
   month,
-  minimumDate,
-  maximumDate,
+  minimumDate = null,
+  maximumDate = null,
   onMonthChange
 }: CalendarNavigationProps): React.JSX.Element {
   const handlePrevious = (event: MouseEvent<HTMLAnchorElement> | TouchEvent<HTMLAnchorElement>) => {

src/DatePicker.tsx

@@ -13,7 +13,7 @@ export interface DatePickerChildrenProps {
 
 export interface DatePickerProps extends CommonProps {
   children: (props: DatePickerChildrenProps) => React.ReactNode
-  date?: Date
+  date?: Date | null
   onDateChange?: DateChangeCallBack
   format?: string
   touchDragEnabled?: boolean
@@ -24,7 +24,7 @@ const defaultOnDateChange = () => {}
 export function DatePicker({
   children,
   locale,
-  date,
+  date = null,
   onDateChange = defaultOnDateChange,
   format,
   minimumDate,

src/DatePickerCalendar.tsx

@@ -6,17 +6,17 @@ import { Calendar } from './Calendar'
 import { CommonProps, DateChangeCallBack } from './types'
 
 export interface DatePickerCalendarProps extends CommonProps {
-  date?: Date
-  month?: Date
+  date?: Date | null
+  month?: Date | null
   onDateChange?: DateChangeCallBack<Date>
   onMonthChange?: DateChangeCallBack<Date>
   touchDragEnabled?: boolean
 }
 
 export function DatePickerCalendar({
   locale,
-  date: selectedDate,
-  month: receivedMonth,
+  date: selectedDate = null,
+  month: receivedMonth = null,
   onDateChange,
   onMonthChange,
   minimumDate,

src/DateRangePicker.tsx

@@ -11,13 +11,13 @@ import { CommonProps, DateChangeCallBack, DateRangeFocus, InputProps } from './t
 export interface DateRangePickerChildrenProps {
   startDateInputProps: InputProps
   endDateInputProps: InputProps
-  focus?: DateRangeFocus
+  focus?: DateRangeFocus | null
 }
 
 export interface DateRangePickerProps extends CommonProps {
   children: (props: DateRangePickerChildrenProps) => React.ReactNode
-  startDate?: Date
-  endDate?: Date
+  startDate?: Date | null
+  endDate?: Date | null
   minimumLength?: number
   maximumLength?: number
   onStartDateChange?: DateChangeCallBack
@@ -31,8 +31,8 @@ const defaultListener = () => {}
 export function DateRangePicker({
   children,
   locale,
-  startDate,
-  endDate,
+  startDate = null,
+  endDate = null,
   onStartDateChange = defaultListener,
   onEndDateChange = defaultListener,
   format,
@@ -45,15 +45,15 @@ export function DateRangePicker({
   weekdayFormat,
   touchDragEnabled
 }: DateRangePickerProps): React.JSX.Element {
-  const [focus, setFocus] = useState<DateRangeFocus | undefined>()
-  const [month, setMonth] = useState<Date | undefined>(() => startDate || endDate || new Date())
+  const [focus, setFocus] = useState<DateRangeFocus | null>(null)
+  const [month, setMonth] = useState<Date | null>(() => startDate || endDate || new Date())
   const isTouch = useDetectTouch()
 
   const [startDateInputRef, endDateInputRef, popoverRef] = useOutsideClickHandler<
     HTMLInputElement,
     HTMLInputElement,
     HTMLDivElement
-  >(() => setFocus(undefined))
+  >(() => setFocus(null))
 
   const startDateInputProps = useDateInput({
     date: startDate,
@@ -130,7 +130,7 @@ export function DateRangePicker({
           onStartDateChange={onStartDateChange}
           onEndDateChange={onEndDateChange}
           onFocusChange={setFocus}
-          onMonthChange={setMonth as (date: Date | null) => void}
+          onMonthChange={setMonth}
           minimumDate={minimumDate}
           maximumDate={maximumDate}
           minimumLength={minimumLength}

src/DateRangePickerCalendar.tsx

@@ -7,13 +7,13 @@ import { Calendar } from './Calendar'
 import { CommonProps, DateChangeCallBack, DateRangeFocus } from './types'
 
 export interface DateRangePickerCalendarProps extends CommonProps {
-  startDate?: Date
-  endDate?: Date
-  focus?: DateRangeFocus
-  month?: Date
+  startDate?: Date | null
+  endDate?: Date | null
+  focus?: DateRangeFocus | null
+  month?: Date | null
   minimumLength?: number
   maximumLength?: number
-  onFocusChange?: (focus: DateRangeFocus | undefined) => void
+  onFocusChange?: (focus: DateRangeFocus | null) => void
   onStartDateChange?: DateChangeCallBack
   onEndDateChange?: DateChangeCallBack
   onMonthChange?: DateChangeCallBack
@@ -24,10 +24,10 @@ const defaultListener = () => {}
 
 export function DateRangePickerCalendar({
   locale,
-  startDate,
-  endDate,
-  focus,
-  month: receivedMonth,
+  startDate = null,
+  endDate = null,
+  focus = null,
+  month: receivedMonth = null,
   onStartDateChange = defaultListener,
   onEndDateChange = defaultListener,
   onFocusChange = defaultListener,
@@ -141,7 +141,7 @@ export function DateRangePickerCalendar({
       }
 
       onEndDateChange(endDate ? setTime(date, endDate) : date)
-      onFocusChange(invalidStartDate || !startDate ? START_DATE : undefined)
+      onFocusChange(invalidStartDate || !startDate ? START_DATE : null)
     }
   }
 

src/types.ts

@@ -22,8 +22,8 @@ export type ModifiersClassNames = { [key in DefaultModifiers | string]: string }
 
 export interface CommonProps {
   locale: Locale
-  minimumDate?: Date
-  maximumDate?: Date
+  minimumDate?: Date | null
+  maximumDate?: Date | null
   modifiers?: Modifiers
   modifiersClassNames?: ModifiersClassNames
   weekdayFormat?: string

src/useControllableState.ts

@@ -5,7 +5,7 @@ export function useControllableState<T>(
   onChange: ((value: T) => void) | null | undefined
 ): [T, (value: T) => void]
 export function useControllableState<T>(
-  value: T | undefined,
+  value: T | null,
   onChange: ((value: T) => void) | null | undefined,
   initialValue: T
 ): [T, (value: T) => void]

src/useDateInput.ts

@@ -6,8 +6,8 @@ export interface UseDateInputProps {
   date?: Date | null
   format?: string
   locale: Locale
-  minimumDate?: Date
-  maximumDate?: Date
+  minimumDate?: Date | null
+  maximumDate?: Date | null
   onDateChange: (date: Date | null) => void
   validate?: (date: Date) => boolean
 }
@@ -22,11 +22,11 @@ export interface UseDateInputReturn {
 }
 
 export function useDateInput({
-  date: selectedDate,
+  date: selectedDate = null,
   format: receivedFormatString,
   locale,
-  minimumDate,
-  maximumDate,
+  minimumDate = null,
+  maximumDate = null,
   onDateChange,
   validate
 }: UseDateInputProps): UseDateInputReturn {
@@ -36,7 +36,7 @@ export function useDateInput({
   const formatDate = (date: Date) => format(date, formatString, { locale })
   const parseDate = (dateString: string) =>
     parse(dateString, formatString, selectedDate || new Date())
-  const isValidAndSelectable = (date: Date | null | undefined): date is Date =>
+  const isValidAndSelectable = (date: Date | null): date is Date =>
     (isValid as (date: unknown) => date is Date)(date) &&
     isSelectable(date, { minimumDate, maximumDate }) &&
     (!validate || validate(date))

src/useGrid.ts

@@ -52,7 +52,7 @@ const createInitialState = (currentMonth: Date, locale: Locale): GridState => {
   }
 }
 
-export type GridAction =
+type GridAction =
   | { type: 'setStartDate'; value: Date }
   | { type: 'setEndDate'; value: Date }
   | { type: 'setRange'; startDate: Date; endDate: Date }