TS Strict Calendar (#6076)

* TS Strict Calendar

Co-authored-by: Ishank Sharma <[email protected]>

Author: snowystinger

packages/@internationalized/date/src/queries.ts

@@ -238,7 +238,7 @@ export function getWeeksInMonth(date: DateValue, locale: string): number {
 }
 
 /** Returns the lesser of the two provider dates. */
-export function minDate<A extends DateValue, B extends DateValue>(a: A, b: B): A | B {
+export function minDate<A extends DateValue, B extends DateValue>(a?: A | null, b?: B | null): A | B | null | undefined {
   if (a && b) {
     return a.compare(b) <= 0 ? a : b;
   }
@@ -247,7 +247,7 @@ export function minDate<A extends DateValue, B extends DateValue>(a: A, b: B): A
 }
 
 /** Returns the greater of the two provider dates. */
-export function maxDate<A extends DateValue, B extends DateValue>(a: A, b: B): A | B {
+export function maxDate<A extends DateValue, B extends DateValue>(a?: A | null, b?: B | null): A | B | null | undefined {
   if (a && b) {
     return a.compare(b) >= 0 ? a : b;
   }

packages/@react-aria/textfield/src/useTextField.ts

@@ -81,7 +81,7 @@ export interface AriaTextFieldOptions<T extends TextFieldIntrinsicElements> exte
    */
   inputElementType?: T,
   /**
-   * Controls whether inputted text is automatically capitalized and, if so, in what manner. 
+   * Controls whether inputted text is automatically capitalized and, if so, in what manner.
    * See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/autocapitalize).
    */
   autoCapitalize?: 'off' | 'none' | 'on' | 'sentences' | 'words' | 'characters'
@@ -166,7 +166,7 @@ export function useTextField<T extends TextFieldIntrinsicElements = DefaultEleme
     labelProps,
     inputProps: mergeProps(
       domProps,
-      inputElementType === 'input' && inputOnlyProps,
+      inputElementType === 'input' ? inputOnlyProps : undefined,
       {
         disabled: isDisabled,
         readOnly: isReadOnly,

packages/@react-spectrum/calendar/src/Calendar.tsx

@@ -34,7 +34,7 @@ function Calendar<T extends DateValue>(props: SpectrumCalendarProps<T>, ref: Foc
     createCalendar
   });
 
-  let domRef = useRef();
+  let domRef = useRef(null);
   useImperativeHandle(ref, () => ({
     ...createDOMRef(domRef),
     focus() {

packages/@react-spectrum/calendar/src/CalendarBase.tsx

@@ -22,7 +22,7 @@ import {DOMProps, StyleProps} from '@react-types/shared';
 import {HelpText} from '@react-spectrum/label';
 // @ts-ignore
 import intlMessages from '../intl/*.json';
-import React, {HTMLAttributes, RefObject} from 'react';
+import React, {HTMLAttributes, JSX, RefObject} from 'react';
 import styles from '@adobe/spectrum-css-temp/components/calendar/vars.css';
 import {useDateFormatter, useLocale, useLocalizedStringFormatter} from '@react-aria/i18n';
 import {VisuallyHidden} from '@react-aria/visually-hidden';
@@ -59,8 +59,8 @@ export function CalendarBase<T extends CalendarState | RangeCalendarState>(props
     timeZone: state.timeZone
   });
 
-  let titles = [];
-  let calendars = [];
+  let titles: JSX.Element[] = [];
+  let calendars: JSX.Element[] = [];
   for (let i = 0; i < visibleMonths; i++) {
     let d = currentMonth.add({months: i});
     titles.push(

packages/@react-spectrum/calendar/src/CalendarCell.tsx

@@ -27,7 +27,7 @@ interface CalendarCellProps extends AriaCalendarCellProps {
 }
 
 export function CalendarCell({state, currentMonth, ...props}: CalendarCellProps) {
-  let ref = useRef<HTMLElement>();
+  let ref = useRef<HTMLElement>(null);
   let {
     cellProps,
     buttonProps,

packages/@react-spectrum/calendar/src/RangeCalendar.tsx

@@ -34,7 +34,7 @@ function RangeCalendar<T extends DateValue>(props: SpectrumRangeCalendarProps<T>
     createCalendar
   });
 
-  let domRef = useRef();
+  let domRef = useRef(null);
   useImperativeHandle(ref, () => ({
     ...createDOMRef(domRef),
     focus() {

packages/@react-spectrum/calendar/stories/Calendar.stories.tsx

@@ -202,14 +202,16 @@ function Example(props) {
   let [calendar, setCalendar] = React.useState<Key>(calendars[0].key);
   let {locale: defaultLocale} = useLocale();
 
-  let pref = preferences.find(p => p.locale === locale);
+  let pref = preferences.find(p => p.locale === locale)!;
   let preferredCalendars = React.useMemo(() => pref ? pref.ordering.split(' ').map(p => calendars.find(c => c.key === p)).filter(Boolean) : [calendars[0]], [pref]);
-  let otherCalendars = React.useMemo(() => calendars.filter(c => !preferredCalendars.some(p => p.key === c.key)), [preferredCalendars]);
+  let otherCalendars = React.useMemo(() => calendars.filter(c => !preferredCalendars.some(p => p!.key === c.key)), [preferredCalendars]);
 
   let updateLocale = locale => {
     setLocale(locale);
     let pref = preferences.find(p => p.locale === locale);
-    setCalendar(pref.ordering.split(' ')[0]);
+    if (pref) {
+      setCalendar(pref.ordering.split(' ')[0]);
+    }
   };
 
   return (
@@ -220,14 +222,14 @@ function Example(props) {
         </Picker>
         <Picker label="Calendar" selectedKey={calendar} onSelectionChange={setCalendar}>
           <Section title="Preferred" items={preferredCalendars}>
-            {item => <Item>{item.name}</Item>}
+            {item => <Item>{item!.name}</Item>}
           </Section>
           <Section title="Other" items={otherCalendars}>
             {item => <Item>{item.name}</Item>}
           </Section>
         </Picker>
       </Flex>
-      <Provider locale={(locale || defaultLocale) + (calendar && calendar !== preferredCalendars[0].key ? '-u-ca-' + calendar : '')}>
+      <Provider locale={(locale || defaultLocale) + (calendar && calendar !== preferredCalendars![0]!.key ? '-u-ca-' + calendar : '')}>
         <View maxWidth="100vw" padding="size-10" overflow="auto">
           <Calendar {...props} />
         </View>

packages/@react-stately/calendar/src/types.ts

@@ -22,16 +22,16 @@ interface CalendarStateBase {
   /** The date range that is currently visible in the calendar. */
   readonly visibleRange: RangeValue<CalendarDate>,
   /** The minimum allowed date that a user may select. */
-  readonly minValue?: DateValue,
+  readonly minValue?: DateValue | null,
   /** The maximum allowed date that a user may select. */
-  readonly maxValue?: DateValue,
+  readonly maxValue?: DateValue | null,
   /** The time zone of the dates currently being displayed. */
   readonly timeZone: string,
   /**
    * The current validation state of the selected value.
    * @deprecated Use `isValueInvalid` instead.
    */
-  readonly validationState: ValidationState,
+  readonly validationState: ValidationState | null,
   /** Whether the calendar is invalid. */
   readonly isValueInvalid: boolean,
   /** The currently focused date. */
@@ -108,17 +108,17 @@ export interface CalendarState extends CalendarStateBase {
 
 export interface RangeCalendarState extends CalendarStateBase {
   /** The currently selected date range. */
-  readonly value: RangeValue<DateValue>,
+  readonly value: RangeValue<DateValue> | null,
   /** Sets the currently selected date range. */
-  setValue(value: RangeValue<DateValue>): void,
+  setValue(value: RangeValue<DateValue> | null): void,
   /** Highlights the given date during selection, e.g. by hovering or dragging. */
   highlightDate(date: CalendarDate): void,
   /** The current anchor date that the user clicked on to begin range selection. */
   readonly anchorDate: CalendarDate | null,
   /** Sets the anchor date that the user clicked on to begin range selection. */
   setAnchorDate(date: CalendarDate | null): void,
   /** The currently highlighted date range. */
-  readonly highlightedRange: RangeValue<CalendarDate>,
+  readonly highlightedRange: RangeValue<CalendarDate> | null,
   /** Whether the user is currently dragging over the calendar. */
   readonly isDragging: boolean,
   /** Sets whether the user is dragging over the calendar. */

packages/@react-stately/calendar/src/useCalendarState.ts

@@ -27,7 +27,7 @@ import {
   toCalendarDate,
   today
 } from '@internationalized/date';
-import {CalendarProps, DateValue} from '@react-types/calendar';
+import {CalendarProps, DateValue, MappedDateValue} from '@react-types/calendar';
 import {CalendarState} from './types';
 import {useControlledState} from '@react-stately/utils';
 import {useMemo, useState} from 'react';
@@ -51,7 +51,6 @@ export interface CalendarStateOptions<T extends DateValue = DateValue> extends C
   /** Determines how to align the initial selection relative to the visible date range. */
   selectionAlignment?: 'start' | 'center' | 'end'
 }
-
 /**
  * Provides state management for a calendar component.
  * A calendar displays one or more date grids and allows users to select a single date.
@@ -71,7 +70,7 @@ export function useCalendarState<T extends DateValue = DateValue>(props: Calenda
   } = props;
   let calendar = useMemo(() => createCalendar(resolvedOptions.calendar), [createCalendar, resolvedOptions.calendar]);
 
-  let [value, setControlledValue] = useControlledState<DateValue>(props.value, props.defaultValue, props.onChange);
+  let [value, setControlledValue] = useControlledState<DateValue | null, MappedDateValue<T>>(props.value!, props.defaultValue ?? null!, props.onChange);
   let calendarDateValue = useMemo(() => value ? toCalendar(toCalendarDate(value), calendar) : null, [value, calendar]);
   let timeZone = useMemo(() => value && 'timeZone' in value ? value.timeZone : resolvedOptions.timeZone, [value, resolvedOptions.timeZone]);
   let focusedCalendarDate = useMemo(() => (
@@ -138,25 +137,26 @@ export function useCalendarState<T extends DateValue = DateValue>(props: Calenda
 
   function setValue(newValue: CalendarDate | null) {
     if (!props.isDisabled && !props.isReadOnly) {
-      if (newValue === null) {
+      let localValue = newValue;
+      if (localValue === null) {
         setControlledValue(null);
         return;
       }
-      newValue = constrainValue(newValue, minValue, maxValue);
-      newValue = previousAvailableDate(newValue, startDate, isDateUnavailable);
-      if (!newValue) {
+      localValue = constrainValue(localValue, minValue, maxValue);
+      localValue = previousAvailableDate(localValue, startDate, isDateUnavailable);
+      if (!localValue) {
         return;
       }
 
       // The display calendar should not have any effect on the emitted value.
       // Emit dates in the same calendar as the original value, if any, otherwise gregorian.
-      newValue = toCalendar(newValue, value?.calendar || new GregorianCalendar());
+      localValue = toCalendar(localValue, value?.calendar || new GregorianCalendar());
 
       // Preserve time if the input value had one.
       if (value && 'hour' in value) {
-        setControlledValue(value.set(newValue));
+        setControlledValue(value.set(localValue));
       } else {
-        setControlledValue(newValue);
+        setControlledValue(localValue);
       }
     }
   }
@@ -173,7 +173,7 @@ export function useCalendarState<T extends DateValue = DateValue>(props: Calenda
     return isInvalid(calendarDateValue, minValue, maxValue);
   }, [calendarDateValue, isDateUnavailable, minValue, maxValue]);
   let isValueInvalid = props.isInvalid || props.validationState === 'invalid' || isUnavailable;
-  let validationState: ValidationState = isValueInvalid ? 'invalid' : null;
+  let validationState: ValidationState | null = isValueInvalid ? 'invalid' : null;
 
   let pageDuration = useMemo(() => {
     if (pageBehavior === 'visible') {
@@ -184,8 +184,8 @@ export function useCalendarState<T extends DateValue = DateValue>(props: Calenda
   }, [pageBehavior, visibleDuration]);
 
   return {
-    isDisabled: props.isDisabled,
-    isReadOnly: props.isReadOnly,
+    isDisabled: props.isDisabled ?? false,
+    isReadOnly: props.isReadOnly ?? false,
     value: calendarDateValue,
     setValue,
     visibleRange: {
@@ -308,25 +308,25 @@ export function useCalendarState<T extends DateValue = DateValue>(props: Calenda
       return isFocused && focusedDate && isSameDay(date, focusedDate);
     },
     isCellDisabled(date) {
-      return props.isDisabled || date.compare(startDate) < 0 || date.compare(endDate) > 0 || this.isInvalid(date, minValue, maxValue);
+      return props.isDisabled || date.compare(startDate) < 0 || date.compare(endDate) > 0 || this.isInvalid(date);
     },
     isCellUnavailable(date) {
-      return props.isDateUnavailable && props.isDateUnavailable(date);
+      return props.isDateUnavailable ? props.isDateUnavailable(date) : false;
     },
     isPreviousVisibleRangeInvalid() {
       let prev = startDate.subtract({days: 1});
-      return isSameDay(prev, startDate) || this.isInvalid(prev, minValue, maxValue);
+      return isSameDay(prev, startDate) || this.isInvalid(prev);
     },
     isNextVisibleRangeInvalid() {
       // Adding may return the same date if we reached the end of time
       // according to the calendar system (e.g. 9999-12-31).
       let next = endDate.add({days: 1});
-      return isSameDay(next, endDate) || this.isInvalid(next, minValue, maxValue);
+      return isSameDay(next, endDate) || this.isInvalid(next);
     },
     getDatesInWeek(weekIndex, from = startDate) {
       // let date = startOfWeek(from, locale);
       let date = from.add({weeks: weekIndex});
-      let dates = [];
+      let dates: (CalendarDate | null)[] = [];
 
       date = startOfWeek(date, locale);