@react-spectrum/datepicker 3.10.3 → 3.11.0

package/src/DateRangePicker.tsx

@@ -50,7 +50,7 @@ function DateRangePicker<T extends DateValue>(props: SpectrumDateRangePickerProp
     pageBehavior
   } = props;
   let {hoverProps, isHovered} = useHover({isDisabled});
-  let targetRef = useRef<HTMLDivElement>(undefined);
+  let targetRef = useRef<HTMLDivElement | null>(null);
   let state = useDateRangePickerState({
     ...props,
     shouldCloseOnSelect: () => !state.hasTime
@@ -99,10 +99,10 @@ function DateRangePicker<T extends DateValue>(props: SpectrumDateRangePickerProp
   // The format help text is unnecessary for screen reader users because each segment already has a label.
   let description = useFormatHelpText(props);
   if (description && !props.description) {
-    descriptionProps.id = null;
+    descriptionProps.id = undefined;
   }
 
-  let placeholder: DateValue = placeholderValue;
+  let placeholder: DateValue | null | undefined = placeholderValue;
   let timePlaceholder = placeholder && 'hour' in placeholder ? placeholder : null;
   let timeMinValue = props.minValue && 'hour' in props.minValue ? props.minValue : null;
   let timeMaxValue = props.maxValue && 'hour' in props.maxValue ? props.maxValue : null;

package/src/Input.tsx

@@ -15,12 +15,12 @@ import Checkmark from '@spectrum-icons/ui/CheckmarkMedium';
 import {classNames, useValueEffect} from '@react-spectrum/utils';
 import datepickerStyles from './styles.css';
 import {mergeProps, mergeRefs, useEvent, useLayoutEffect, useResizeObserver} from '@react-aria/utils';
-import React, {useCallback, useRef} from 'react';
+import React, {ReactElement, useCallback, useRef} from 'react';
 import textfieldStyles from '@adobe/spectrum-css-temp/components/textfield/vars.css';
 import {useFocusRing} from '@react-aria/focus';
 
 function Input(props, ref) {
-  let inputRef = useRef(null);
+  let inputRef = useRef<HTMLInputElement | null>(null);
   let {
     isDisabled,
     isQuiet,
@@ -38,7 +38,7 @@ function Input(props, ref) {
   // not cause a layout shift.
   let [reservePadding, setReservePadding] = useValueEffect(false);
   let onResize = useCallback(() => setReservePadding(function *(reservePadding) {
-    if (inputRef.current) {
+    if (inputRef.current && inputRef.current.parentElement) {
       if (reservePadding) {
         // Try to collapse padding if the content is clipped.
         if (inputRef.current.scrollWidth > inputRef.current.offsetWidth) {
@@ -114,7 +114,7 @@ function Input(props, ref) {
     'spectrum-Textfield-validationIcon'
   );
 
-  let validationIcon = null;
+  let validationIcon: ReactElement | null = null;
   if (validationState === 'invalid' && !isDisabled) {
     validationIcon = <Alert data-testid="invalid-icon" UNSAFE_className={iconClass} />;
   } else if (validationState === 'valid' && !isDisabled) {

package/src/TimeField.tsx

@@ -43,8 +43,8 @@ function TimeField<T extends TimeValue>(props: SpectrumTimeFieldProps<T>, ref: F
     locale
   });
 
-  let fieldRef = useRef(null);
-  let inputRef = useRef(null);
+  let fieldRef = useRef<HTMLDivElement | null>(null);
+  let inputRef = useRef<HTMLInputElement | null>(null);
   let {labelProps, fieldProps, inputProps, descriptionProps, errorMessageProps, isInvalid, validationErrors, validationDetails} = useTimeField({
     ...props,
     inputRef
@@ -62,7 +62,7 @@ function TimeField<T extends TimeValue>(props: SpectrumTimeFieldProps<T>, ref: F
       labelProps={labelProps}
       descriptionProps={descriptionProps}
       errorMessageProps={errorMessageProps}
-      validationState={validationState}
+      validationState={validationState ?? undefined}
       isInvalid={isInvalid}
       validationErrors={validationErrors}
       validationDetails={validationDetails}

package/src/utils.ts

@@ -42,7 +42,7 @@ export function useFormatHelpText(props: Pick<SpectrumDatePickerBase<any>, 'desc
 }
 
 export function useVisibleMonths(maxVisibleMonths: number) {
-  let {scale} = useProvider();
+  let {scale} = useProvider()!;
   let [visibleMonths, setVisibleMonths] = useState(getVisibleMonths(scale));
   useLayoutEffect(() => {
     let onResize = () => setVisibleMonths(getVisibleMonths(scale));
@@ -68,7 +68,7 @@ function getVisibleMonths(scale) {
 }
 
 export function useFocusManagerRef(ref: FocusableRef<HTMLElement>) {
-  let domRef = useRef(undefined);
+  let domRef = useRef<HTMLElement | null>(null);
   useImperativeHandle(ref, () => ({
     ...createDOMRef(domRef),
     focus() {