@react-aria/calendar 3.5.12 → 3.6.0

package/src/useCalendarCell.ts

@@ -74,7 +74,7 @@ export interface CalendarCellAria {
  */
 export function useCalendarCell(props: AriaCalendarCellProps, state: CalendarState | RangeCalendarState, ref: RefObject<HTMLElement | null>): CalendarCellAria {
   let {date, isDisabled} = props;
-  let {errorMessageId, selectedDateDescription} = hookData.get(state);
+  let {errorMessageId, selectedDateDescription} = hookData.get(state)!;
   let stringFormatter = useLocalizedStringFormatter(intlMessages, '@react-aria/calendar');
   let dateFormatter = useDateFormatter({
     weekday: 'long',
@@ -89,7 +89,7 @@ export function useCalendarCell(props: AriaCalendarCellProps, state: CalendarSta
   isDisabled = isDisabled || state.isCellDisabled(date);
   let isUnavailable = state.isCellUnavailable(date);
   let isSelectable = !isDisabled && !isUnavailable;
-  let isInvalid = state.isValueInvalid && (
+  let isInvalid = state.isValueInvalid && Boolean(
     'highlightedRange' in state
       ? !state.anchorDate && state.highlightedRange && date.compare(state.highlightedRange.start) >= 0 && date.compare(state.highlightedRange.end) <= 0
       : state.value && isSameDay(state.value, date)
@@ -159,7 +159,7 @@ export function useCalendarCell(props: AriaCalendarCellProps, state: CalendarSta
 
   let isAnchorPressed = useRef(false);
   let isRangeBoundaryPressed = useRef(false);
-  let touchDragTimerRef = useRef(null);
+  let touchDragTimerRef = useRef<ReturnType<typeof setTimeout> | undefined>(undefined);
   let {pressProps, isPressed} = usePress({
     // When dragging to select a range, we don't want dragging over the original anchor
     // again to trigger onPressStart. Cancel presses immediately when the pointer exits.
@@ -195,7 +195,7 @@ export function useCalendarCell(props: AriaCalendarCellProps, state: CalendarSta
 
         let startDragging = () => {
           state.setDragging(true);
-          touchDragTimerRef.current = null;
+          touchDragTimerRef.current = undefined;
 
           state.selectDate(date);
           state.setFocusedDate(date);
@@ -215,7 +215,7 @@ export function useCalendarCell(props: AriaCalendarCellProps, state: CalendarSta
       isRangeBoundaryPressed.current = false;
       isAnchorPressed.current = false;
       clearTimeout(touchDragTimerRef.current);
-      touchDragTimerRef.current = null;
+      touchDragTimerRef.current = undefined;
     },
     onPress() {
       // For non-range selection, always select on press up.
@@ -269,7 +269,7 @@ export function useCalendarCell(props: AriaCalendarCellProps, state: CalendarSta
     }
   });
 
-  let tabIndex = null;
+  let tabIndex: number | undefined = undefined;
   if (!isDisabled) {
     tabIndex = isSameDay(date, state.focusedDate) ? 0 : -1;
   }
@@ -298,14 +298,14 @@ export function useCalendarCell(props: AriaCalendarCellProps, state: CalendarSta
     calendar: date.calendar.identifier
   });
 
-  let formattedDate = useMemo(() => cellDateFormatter.formatToParts(nativeDate).find(part => part.type === 'day').value, [cellDateFormatter, nativeDate]);
+  let formattedDate = useMemo(() => cellDateFormatter.formatToParts(nativeDate).find(part => part.type === 'day')!.value, [cellDateFormatter, nativeDate]);
 
   return {
     cellProps: {
       role: 'gridcell',
-      'aria-disabled': !isSelectable || null,
-      'aria-selected': isSelected || null,
-      'aria-invalid': isInvalid || null
+      'aria-disabled': !isSelectable || undefined,
+      'aria-selected': isSelected || undefined,
+      'aria-invalid': isInvalid || undefined
     },
     buttonProps: mergeProps(pressProps, {
       onFocus() {
@@ -315,11 +315,11 @@ export function useCalendarCell(props: AriaCalendarCellProps, state: CalendarSta
       },
       tabIndex,
       role: 'button',
-      'aria-disabled': !isSelectable || null,
+      'aria-disabled': !isSelectable || undefined,
       'aria-label': label,
-      'aria-invalid': isInvalid || null,
+      'aria-invalid': isInvalid || undefined,
       'aria-describedby': [
-        isInvalid ? errorMessageId : null,
+        isInvalid ? errorMessageId : undefined,
         descriptionProps['aria-describedby']
       ].filter(Boolean).join(' ') || undefined,
       onPointerEnter(e) {

package/src/useCalendarGrid.ts

@@ -128,7 +128,7 @@ export function useCalendarGrid(props: AriaCalendarGridProps, state: CalendarSta
 
   let visibleRangeDescription = useVisibleRangeDescription(startDate, endDate, state.timeZone, true);
 
-  let {ariaLabel, ariaLabelledBy} = hookData.get(state);
+  let {ariaLabel, ariaLabelledBy} = hookData.get(state)!;
   let labelProps = useLabels({
     'aria-label': [ariaLabel, visibleRangeDescription].filter(Boolean).join(', '),
     'aria-labelledby': ariaLabelledBy
@@ -148,8 +148,8 @@ export function useCalendarGrid(props: AriaCalendarGridProps, state: CalendarSta
   return {
     gridProps: mergeProps(labelProps, {
       role: 'grid',
-      'aria-readonly': state.isReadOnly || null,
-      'aria-disabled': state.isDisabled || null,
+      'aria-readonly': state.isReadOnly || undefined,
+      'aria-disabled': state.isDisabled || undefined,
       'aria-multiselectable': ('highlightedRange' in state) || undefined,
       onKeyDown,
       onFocus: () => state.setFocused(true),

package/src/utils.ts

@@ -19,26 +19,26 @@ import {useDateFormatter, useLocalizedStringFormatter} from '@react-aria/i18n';
 import {useMemo} from 'react';
 
 interface HookData {
-  ariaLabel: string,
-  ariaLabelledBy: string,
+  ariaLabel?: string,
+  ariaLabelledBy?: string,
   errorMessageId: string,
   selectedDateDescription: string
 }
 
 export const hookData = new WeakMap<CalendarState | RangeCalendarState, HookData>();
 
-export function getEraFormat(date: CalendarDate): 'short' | undefined {
+export function getEraFormat(date: CalendarDate | undefined): 'short' | undefined {
   return date?.calendar.identifier === 'gregory' && date.era === 'BC' ? 'short' : undefined;
 }
 
 export function useSelectedDateDescription(state: CalendarState | RangeCalendarState) {
   let stringFormatter = useLocalizedStringFormatter(intlMessages, '@react-aria/calendar');
 
-  let start: CalendarDate, end: CalendarDate;
+  let start: CalendarDate | undefined, end: CalendarDate | undefined;
   if ('highlightedRange' in state) {
     ({start, end} = state.highlightedRange || {});
   } else {
-    start = end = state.value;
+    start = end = state.value ?? undefined;
   }
 
   let dateFormatter = useDateFormatter({