@react-aria/datepicker 3.11.3 → 3.12.0

package/src/useDateRangePicker.ts

@@ -14,6 +14,7 @@ import {AriaButtonProps} from '@react-types/button';
 import {AriaDatePickerProps, AriaDateRangePickerProps, DateValue} from '@react-types/datepicker';
 import {AriaDialogProps} from '@react-types/dialog';
 import {createFocusManager} from '@react-aria/focus';
+import {DateRange, RangeCalendarProps} from '@react-types/calendar';
 import {DateRangePickerState} from '@react-stately/datepicker';
 import {DEFAULT_VALIDATION_RESULT, mergeValidation, privateValidationStateProp} from '@react-stately/form';
 import {DOMAttributes, GroupDOMAttributes, KeyboardEvent, RefObject, ValidationResult} from '@react-types/shared';
@@ -21,7 +22,6 @@ import {filterDOMProps, mergeProps, useDescription, useId} from '@react-aria/uti
 import {focusManagerSymbol, roleSymbol} from './useDateField';
 // @ts-ignore
 import intlMessages from '../intl/*.json';
-import {RangeCalendarProps} from '@react-types/calendar';
 import {useDatePickerGroup} from './useDatePickerGroup';
 import {useField} from '@react-aria/label';
 import {useFocusWithin} from '@react-aria/interactions';
@@ -168,7 +168,7 @@ export function useDateRangePicker<T extends DateValue>(props: AriaDateRangePick
     startFieldProps: {
       ...startFieldProps,
       ...commonFieldProps,
-      value: state.value?.start,
+      value: state.value?.start ?? null,
       onChange: start => state.setDateTime('start', start),
       autoFocus: props.autoFocus,
       name: props.startName,
@@ -186,7 +186,7 @@ export function useDateRangePicker<T extends DateValue>(props: AriaDateRangePick
     endFieldProps: {
       ...endFieldProps,
       ...commonFieldProps,
-      value: state.value?.end,
+      value: state.value?.end ?? null,
       onChange: end => state.setDateTime('end', end),
       name: props.endName,
       [privateValidationStateProp]: {
@@ -204,7 +204,7 @@ export function useDateRangePicker<T extends DateValue>(props: AriaDateRangePick
     errorMessageProps,
     calendarProps: {
       autoFocus: true,
-      value: state.dateRange,
+      value: state.dateRange?.start && state.dateRange.end ? state.dateRange as DateRange : null,
       onChange: state.setDateRange,
       minValue: props.minValue,
       maxValue: props.maxValue,

package/src/useDateSegment.ts

@@ -35,7 +35,7 @@ export function useDateSegment(segment: DateSegment, state: DateFieldState, ref:
   let enteredKeys = useRef('');
   let {locale} = useLocale();
   let displayNames = useDisplayNames();
-  let {ariaLabel, ariaLabelledBy, ariaDescribedBy, focusManager} = hookData.get(state);
+  let {ariaLabel, ariaLabelledBy, ariaDescribedBy, focusManager} = hookData.get(state)!;
 
   let textValue = segment.isPlaceholder ? '' : segment.text;
   let options = useMemo(() => state.dateFormatter.resolvedOptions(), [state.dateFormatter]);
@@ -82,11 +82,15 @@ export function useDateSegment(segment: DateSegment, state: DateFieldState, ref:
     },
     onIncrementToMax: () => {
       enteredKeys.current = '';
-      state.setSegment(segment.type, segment.maxValue);
+      if (segment.maxValue !== undefined) {
+        state.setSegment(segment.type, segment.maxValue);
+      }
     },
     onDecrementToMin: () => {
       enteredKeys.current = '';
-      state.setSegment(segment.type, segment.minValue);
+      if (segment.minValue !== undefined) {
+        state.setSegment(segment.type, segment.minValue);
+      }
     }
   });
 
@@ -140,13 +144,13 @@ export function useDateSegment(segment: DateSegment, state: DateFieldState, ref:
   let am = useMemo(() => {
     let date = new Date();
     date.setHours(0);
-    return amPmFormatter.formatToParts(date).find(part => part.type === 'dayPeriod').value;
+    return amPmFormatter.formatToParts(date).find(part => part.type === 'dayPeriod')!.value;
   }, [amPmFormatter]);
 
   let pm = useMemo(() => {
     let date = new Date();
     date.setHours(12);
-    return amPmFormatter.formatToParts(date).find(part => part.type === 'dayPeriod').value;
+    return amPmFormatter.formatToParts(date).find(part => part.type === 'dayPeriod')!.value;
   }, [amPmFormatter]);
 
   // Get a list of formatted era names so users can type the first character to choose one.
@@ -160,7 +164,7 @@ export function useDateSegment(segment: DateSegment, state: DateFieldState, ref:
     let eras = state.calendar.getEras().map(era => {
       let eraDate = date.set({year: 1, month: 1, day: 1, era}).toDate('UTC');
       let parts = eraFormatter.formatToParts(eraDate);
-      let formatted = parts.find(p => p.type === 'era').value;
+      let formatted = parts.find(p => p.type === 'era')!.value;
       return {era, formatted};
     });
 
@@ -231,10 +235,10 @@ export function useDateSegment(segment: DateSegment, state: DateFieldState, ref:
               break;
           }
 
-          if (segment.value >= 12 && numberValue > 1) {
+          if (segment.value !== undefined && segment.value >= 12 && numberValue > 1) {
             numberValue += 12;
           }
-        } else if (numberValue > segment.maxValue) {
+        } else if (segment.maxValue !== undefined && numberValue > segment.maxValue) {
           segmentValue = parser.parse(key);
         }
 
@@ -247,7 +251,7 @@ export function useDateSegment(segment: DateSegment, state: DateFieldState, ref:
           state.setSegment(segment.type, segmentValue);
         }
 
-        if (Number(numberValue + '0') > segment.maxValue || newValue.length >= String(segment.maxValue).length) {
+        if (segment.maxValue !== undefined && (Number(numberValue + '0') > segment.maxValue || newValue.length >= String(segment.maxValue).length)) {
           enteredKeys.current = '';
           if (shouldSetValue) {
             focusManager.focusNext();
@@ -262,11 +266,13 @@ export function useDateSegment(segment: DateSegment, state: DateFieldState, ref:
 
   let onFocus = () => {
     enteredKeys.current = '';
-    scrollIntoViewport(ref.current, {containingElement: getScrollParent(ref.current)});
+    if (ref.current) {
+      scrollIntoViewport(ref.current, {containingElement: getScrollParent(ref.current)});
+    }
 
     // Collapse selection to start or Chrome won't fire input events.
     let selection = window.getSelection();
-    selection.collapse(ref.current);
+    selection?.collapse(ref.current);
   };
 
   let documentRef = useRef(typeof document !== 'undefined' ? document : null);
@@ -275,14 +281,16 @@ export function useDateSegment(segment: DateSegment, state: DateFieldState, ref:
     // Otherwise, when tapping on a segment in Android Chrome and then entering text,
     // composition events will be fired that break the DOM structure and crash the page.
     let selection = window.getSelection();
-    if (ref.current && ref.current.contains(selection.anchorNode)) {
+    if (selection?.anchorNode && ref.current?.contains(selection?.anchorNode)) {
       selection.collapse(ref.current);
     }
   });
 
-  let compositionRef = useRef('');
-  // @ts-ignore - TODO: possibly old TS version? doesn't fail in my editor...
+  let compositionRef = useRef<string | null>('');
   useEvent(ref, 'beforeinput', e => {
+    if (!ref.current) {
+      return;
+    }
     e.preventDefault();
 
     switch (e.inputType) {
@@ -309,16 +317,18 @@ export function useDateSegment(segment: DateSegment, state: DateFieldState, ref:
     }
   });
 
-  useEvent(ref, 'input', (e: InputEvent) => {
-    let {inputType, data} = e;
+  useEvent(ref, 'input', e => {
+    let {inputType, data} = e as InputEvent;
     switch (inputType) {
       case 'insertCompositionText':
         // Reset the DOM to how it was in the beforeinput event.
-        ref.current.textContent = compositionRef.current;
+        if (ref.current) {
+          ref.current.textContent = compositionRef.current;
+        }
 
         // Android sometimes fires key presses of letters as composition events. Need to handle am/pm keys here too.
         // Can also happen e.g. with Pinyin keyboard on iOS.
-        if (startsWith(am, data) || startsWith(pm, data)) {
+        if (data != null && (startsWith(am, data) || startsWith(pm, data))) {
           onInput(data);
         }
         break;

package/src/useDisplayNames.ts

@@ -18,7 +18,7 @@ import {useMemo} from 'react';
 
 type Field = Intl.DateTimeFormatPartTypes;
 interface DisplayNames {
-  of(field: Field): string
+  of(field: Field): string | undefined
 }
 
 /** @private */
@@ -29,9 +29,8 @@ export function useDisplayNames(): DisplayNames {
     // Try to use Intl.DisplayNames if possible. It may be supported in browsers, but not support the dateTimeField
     // type as that was only added in v2. https://github.com/tc39/intl-displaynames-v2
     try {
-      // @ts-ignore
       return new Intl.DisplayNames(locale, {type: 'dateTimeField'});
-    } catch (err) {
+    } catch {
       return new DisplayNamesPolyfill(locale, dictionary);
     }
   }, [locale, dictionary]);