@react-spectrum/datepicker 3.10.2 → 3.11.0

package/dist/utils.module.js

@@ -65,7 +65,7 @@ function $04e96200274b03de$var$getVisibleMonths(scale) {
     return Math.floor((window.innerWidth - popoverPadding * 2) / (monthWidth + gap));
 }
 function $04e96200274b03de$export$71a23a36270e4bf0(ref) {
-    let domRef = (0, $d7JPl$useRef)(undefined);
+    let domRef = (0, $d7JPl$useRef)(null);
     (0, $d7JPl$useImperativeHandle)(ref, ()=>({
             ...(0, $d7JPl$createDOMRef)(domRef),
             focus () {

package/dist/utils.module.js.map

@@ -1 +1 @@
-{"mappings":";;;;;;;;AAAA;;;;;;;;;;CAUC;;;;;;;AAWM,SAAS,0CAAkB,KAA8E;IAC9G,IAAI,YAAY,CAAA,GAAA,uBAAe,EAAE;QAAC,WAAW;IAAO;IACpD,IAAI,eAAe,CAAA,GAAA,sBAAc;IACjC,OAAO,CAAA,GAAA,cAAM,EAAE;QACb,IAAI,MAAM,WAAW,EACnB,OAAO,MAAM,WAAW;QAG1B,IAAI,MAAM,kBAAkB,EAC1B,OAAO,UAAU,aAAa,CAAC,IAAI,QAAQ,GAAG,CAAC,CAAA;YAC7C,IAAI,EAAE,IAAI,KAAK,WACb,OAAO,EAAE,KAAK;YAGhB,OAAO,aAAa,EAAE,CAAC,EAAE,IAAI;QAC/B,GAAG,IAAI,CAAC;QAGV,OAAO;IACT,GAAG;QAAC,MAAM,WAAW;QAAE,MAAM,kBAAkB;QAAE;QAAW;KAAa;AAC3E;AAEO,SAAS,0CAAiB,gBAAwB;IACvD,IAAI,SAAC,KAAK,EAAC,GAAG,CAAA,GAAA,kBAAU;IACxB,IAAI,CAAC,eAAe,iBAAiB,GAAG,CAAA,GAAA,eAAO,EAAE,uCAAiB;IAClE,CAAA,GAAA,sBAAc,EAAE;QACd,IAAI,WAAW,IAAM,iBAAiB,uCAAiB;QACvD;QAEA,OAAO,gBAAgB,CAAC,UAAU;QAClC,OAAO;YACL,OAAO,mBAAmB,CAAC,UAAU;QACvC;IACF,GAAG;QAAC;KAAM;IAEV,OAAO,KAAK,GAAG,CAAC,GAAG,KAAK,GAAG,CAAC,eAAe,kBAAkB;AAC/D;AAEA,SAAS,uCAAiB,KAAK;IAC7B,IAAI,OAAO,WAAW,aACpB,OAAO;IAET,IAAI,aAAa,UAAU,UAAU,MAAM;IAC3C,IAAI,MAAM,UAAU,UAAU,KAAK;IACnC,IAAI,iBAAiB,UAAU,UAAU,KAAK;IAC9C,OAAO,KAAK,KAAK,CAAC,AAAC,CAAA,OAAO,UAAU,GAAG,iBAAiB,CAAA,IAAM,CAAA,aAAa,GAAE;AAC/E;AAEO,SAAS,0CAAmB,GAA8B;IAC/D,IAAI,SAAS,CAAA,GAAA,aAAK,EAAE;IACpB,CAAA,GAAA,0BAAkB,EAAE,KAAK,IAAO,CAAA;YAC9B,GAAG,CAAA,GAAA,mBAAW,EAAE,OAAO;YACvB;gBACE,CAAA,GAAA,yBAAiB,EAAE,QAAQ,UAAU,CAAC;oBAAC,UAAU;gBAAI;YACvD;QACF,CAAA;IACA,OAAO;AACT;AAEO,SAAS,0CAAsB,KAAK;QAC5B;IAAb,IAAI,UAAS,aAAA,CAAA,GAAA,gBAAQ,iBAAR,iCAAA,WAAa,MAAM;IAChC,IAAI,cAAc,IAAI;IACtB,IAAI,eAAe,MAAM,gBAAgB,CAAC,QAAQ;QAAC,yBAAyB;IAAI,GAAG,MAAM,CAAC,aAAa;IACvG,IAAI,kBAAmB,aAAa,MAAM;IAE1C,+CAA+C;IAC/C,8EAA8E;IAC9E,mFAAmF;IACnF,iEAAiE;IACjE,OAAQ,kBAAkB,KAAK,GAAG,CAAC,KAAK,KAAK,CAAC,kBAAkB,IAAI;AACtE","sources":["packages/@react-spectrum/datepicker/src/utils.ts"],"sourcesContent":["/*\n * Copyright 2020 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\nimport {createDOMRef} from '@react-spectrum/utils';\nimport {createFocusManager} from '@react-aria/focus';\nimport {FocusableRef} from '@react-types/shared';\nimport {SpectrumDatePickerBase} from '@react-types/datepicker';\nimport {useDateFormatter, useLocale} from '@react-aria/i18n';\nimport {useDisplayNames} from '@react-aria/datepicker';\nimport {useImperativeHandle, useMemo, useRef, useState} from 'react';\nimport {useLayoutEffect} from '@react-aria/utils';\nimport {useProvider} from '@react-spectrum/provider';\n\nexport function useFormatHelpText(props: Pick<SpectrumDatePickerBase<any>, 'description' | 'showFormatHelpText'>) {\n  let formatter = useDateFormatter({dateStyle: 'short'});\n  let displayNames = useDisplayNames();\n  return useMemo(() => {\n    if (props.description) {\n      return props.description;\n    }\n\n    if (props.showFormatHelpText) {\n      return formatter.formatToParts(new Date()).map(s => {\n        if (s.type === 'literal') {\n          return s.value;\n        }\n\n        return displayNames.of(s.type);\n      }).join(' ');\n    }\n\n    return '';\n  }, [props.description, props.showFormatHelpText, formatter, displayNames]);\n}\n\nexport function useVisibleMonths(maxVisibleMonths: number) {\n  let {scale} = useProvider();\n  let [visibleMonths, setVisibleMonths] = useState(getVisibleMonths(scale));\n  useLayoutEffect(() => {\n    let onResize = () => setVisibleMonths(getVisibleMonths(scale));\n    onResize();\n\n    window.addEventListener('resize', onResize);\n    return () => {\n      window.removeEventListener('resize', onResize);\n    };\n  }, [scale]);\n\n  return Math.max(1, Math.min(visibleMonths, maxVisibleMonths, 3));\n}\n\nfunction getVisibleMonths(scale) {\n  if (typeof window === 'undefined') {\n    return 1;\n  }\n  let monthWidth = scale === 'large' ? 336 : 280;\n  let gap = scale === 'large' ? 30 : 24;\n  let popoverPadding = scale === 'large' ? 32 : 48;\n  return Math.floor((window.innerWidth - popoverPadding * 2) / (monthWidth + gap));\n}\n\nexport function useFocusManagerRef(ref: FocusableRef<HTMLElement>) {\n  let domRef = useRef(undefined);\n  useImperativeHandle(ref, () => ({\n    ...createDOMRef(domRef),\n    focus() {\n      createFocusManager(domRef).focusFirst({tabbable: true});\n    }\n  }));\n  return domRef;\n}\n\nexport function useFormattedDateWidth(state) {\n  let locale = useLocale()?.locale;\n  let currentDate = new Date();\n  let formatedDate = state.getDateFormatter(locale, {shouldForceLeadingZeros: true}).format(currentDate, locale);\n  let totalCharacters =  formatedDate.length;\n\n  // The max of two is for times with only hours.\n  // As the length of a date grows we need to proportionally increase the width.\n  // We use the character count with 'ch' units and add extra padding to accomate for\n  // dates with months and time dashes, which are wider characters.\n  return (totalCharacters + Math.max(Math.floor(totalCharacters / 5), 2));\n}\n"],"names":[],"version":3,"file":"utils.module.js.map"}
+{"mappings":";;;;;;;;AAAA;;;;;;;;;;CAUC;;;;;;;AAWM,SAAS,0CAAkB,KAA8E;IAC9G,IAAI,YAAY,CAAA,GAAA,uBAAe,EAAE;QAAC,WAAW;IAAO;IACpD,IAAI,eAAe,CAAA,GAAA,sBAAc;IACjC,OAAO,CAAA,GAAA,cAAM,EAAE;QACb,IAAI,MAAM,WAAW,EACnB,OAAO,MAAM,WAAW;QAG1B,IAAI,MAAM,kBAAkB,EAC1B,OAAO,UAAU,aAAa,CAAC,IAAI,QAAQ,GAAG,CAAC,CAAA;YAC7C,IAAI,EAAE,IAAI,KAAK,WACb,OAAO,EAAE,KAAK;YAGhB,OAAO,aAAa,EAAE,CAAC,EAAE,IAAI;QAC/B,GAAG,IAAI,CAAC;QAGV,OAAO;IACT,GAAG;QAAC,MAAM,WAAW;QAAE,MAAM,kBAAkB;QAAE;QAAW;KAAa;AAC3E;AAEO,SAAS,0CAAiB,gBAAwB;IACvD,IAAI,SAAC,KAAK,EAAC,GAAG,CAAA,GAAA,kBAAU;IACxB,IAAI,CAAC,eAAe,iBAAiB,GAAG,CAAA,GAAA,eAAO,EAAE,uCAAiB;IAClE,CAAA,GAAA,sBAAc,EAAE;QACd,IAAI,WAAW,IAAM,iBAAiB,uCAAiB;QACvD;QAEA,OAAO,gBAAgB,CAAC,UAAU;QAClC,OAAO;YACL,OAAO,mBAAmB,CAAC,UAAU;QACvC;IACF,GAAG;QAAC;KAAM;IAEV,OAAO,KAAK,GAAG,CAAC,GAAG,KAAK,GAAG,CAAC,eAAe,kBAAkB;AAC/D;AAEA,SAAS,uCAAiB,KAAK;IAC7B,IAAI,OAAO,WAAW,aACpB,OAAO;IAET,IAAI,aAAa,UAAU,UAAU,MAAM;IAC3C,IAAI,MAAM,UAAU,UAAU,KAAK;IACnC,IAAI,iBAAiB,UAAU,UAAU,KAAK;IAC9C,OAAO,KAAK,KAAK,CAAC,AAAC,CAAA,OAAO,UAAU,GAAG,iBAAiB,CAAA,IAAM,CAAA,aAAa,GAAE;AAC/E;AAEO,SAAS,0CAAmB,GAA8B;IAC/D,IAAI,SAAS,CAAA,GAAA,aAAK,EAAsB;IACxC,CAAA,GAAA,0BAAkB,EAAE,KAAK,IAAO,CAAA;YAC9B,GAAG,CAAA,GAAA,mBAAW,EAAE,OAAO;YACvB;gBACE,CAAA,GAAA,yBAAiB,EAAE,QAAQ,UAAU,CAAC;oBAAC,UAAU;gBAAI;YACvD;QACF,CAAA;IACA,OAAO;AACT;AAEO,SAAS,0CAAsB,KAAK;QAC5B;IAAb,IAAI,UAAS,aAAA,CAAA,GAAA,gBAAQ,iBAAR,iCAAA,WAAa,MAAM;IAChC,IAAI,cAAc,IAAI;IACtB,IAAI,eAAe,MAAM,gBAAgB,CAAC,QAAQ;QAAC,yBAAyB;IAAI,GAAG,MAAM,CAAC,aAAa;IACvG,IAAI,kBAAmB,aAAa,MAAM;IAE1C,+CAA+C;IAC/C,8EAA8E;IAC9E,mFAAmF;IACnF,iEAAiE;IACjE,OAAQ,kBAAkB,KAAK,GAAG,CAAC,KAAK,KAAK,CAAC,kBAAkB,IAAI;AACtE","sources":["packages/@react-spectrum/datepicker/src/utils.ts"],"sourcesContent":["/*\n * Copyright 2020 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\nimport {createDOMRef} from '@react-spectrum/utils';\nimport {createFocusManager} from '@react-aria/focus';\nimport {FocusableRef} from '@react-types/shared';\nimport {SpectrumDatePickerBase} from '@react-types/datepicker';\nimport {useDateFormatter, useLocale} from '@react-aria/i18n';\nimport {useDisplayNames} from '@react-aria/datepicker';\nimport {useImperativeHandle, useMemo, useRef, useState} from 'react';\nimport {useLayoutEffect} from '@react-aria/utils';\nimport {useProvider} from '@react-spectrum/provider';\n\nexport function useFormatHelpText(props: Pick<SpectrumDatePickerBase<any>, 'description' | 'showFormatHelpText'>) {\n  let formatter = useDateFormatter({dateStyle: 'short'});\n  let displayNames = useDisplayNames();\n  return useMemo(() => {\n    if (props.description) {\n      return props.description;\n    }\n\n    if (props.showFormatHelpText) {\n      return formatter.formatToParts(new Date()).map(s => {\n        if (s.type === 'literal') {\n          return s.value;\n        }\n\n        return displayNames.of(s.type);\n      }).join(' ');\n    }\n\n    return '';\n  }, [props.description, props.showFormatHelpText, formatter, displayNames]);\n}\n\nexport function useVisibleMonths(maxVisibleMonths: number) {\n  let {scale} = useProvider()!;\n  let [visibleMonths, setVisibleMonths] = useState(getVisibleMonths(scale));\n  useLayoutEffect(() => {\n    let onResize = () => setVisibleMonths(getVisibleMonths(scale));\n    onResize();\n\n    window.addEventListener('resize', onResize);\n    return () => {\n      window.removeEventListener('resize', onResize);\n    };\n  }, [scale]);\n\n  return Math.max(1, Math.min(visibleMonths, maxVisibleMonths, 3));\n}\n\nfunction getVisibleMonths(scale) {\n  if (typeof window === 'undefined') {\n    return 1;\n  }\n  let monthWidth = scale === 'large' ? 336 : 280;\n  let gap = scale === 'large' ? 30 : 24;\n  let popoverPadding = scale === 'large' ? 32 : 48;\n  return Math.floor((window.innerWidth - popoverPadding * 2) / (monthWidth + gap));\n}\n\nexport function useFocusManagerRef(ref: FocusableRef<HTMLElement>) {\n  let domRef = useRef<HTMLElement | null>(null);\n  useImperativeHandle(ref, () => ({\n    ...createDOMRef(domRef),\n    focus() {\n      createFocusManager(domRef).focusFirst({tabbable: true});\n    }\n  }));\n  return domRef;\n}\n\nexport function useFormattedDateWidth(state) {\n  let locale = useLocale()?.locale;\n  let currentDate = new Date();\n  let formatedDate = state.getDateFormatter(locale, {shouldForceLeadingZeros: true}).format(currentDate, locale);\n  let totalCharacters =  formatedDate.length;\n\n  // The max of two is for times with only hours.\n  // As the length of a date grows we need to proportionally increase the width.\n  // We use the character count with 'ch' units and add extra padding to accomate for\n  // dates with months and time dashes, which are wider characters.\n  return (totalCharacters + Math.max(Math.floor(totalCharacters / 5), 2));\n}\n"],"names":[],"version":3,"file":"utils.module.js.map"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@react-spectrum/datepicker",
-  "version": "3.10.2",
+  "version": "3.11.0",
   "description": "Spectrum UI components in React",
   "license": "Apache-2.0",
   "main": "dist/main.js",
@@ -36,25 +36,25 @@
     "url": "https://github.com/adobe/react-spectrum"
   },
   "dependencies": {
-    "@internationalized/date": "^3.5.6",
-    "@react-aria/datepicker": "^3.11.3",
-    "@react-aria/focus": "^3.18.3",
-    "@react-aria/i18n": "^3.12.3",
-    "@react-aria/interactions": "^3.22.3",
-    "@react-aria/utils": "^3.25.3",
-    "@react-spectrum/button": "^3.16.7",
-    "@react-spectrum/calendar": "^3.4.12",
-    "@react-spectrum/dialog": "^3.8.14",
-    "@react-spectrum/form": "^3.7.9",
-    "@react-spectrum/label": "^3.16.9",
-    "@react-spectrum/layout": "^3.6.9",
-    "@react-spectrum/utils": "^3.11.11",
-    "@react-spectrum/view": "^3.6.13",
-    "@react-stately/datepicker": "^3.10.3",
-    "@react-types/datepicker": "^3.8.3",
-    "@react-types/shared": "^3.25.0",
-    "@spectrum-icons/ui": "^3.6.10",
-    "@spectrum-icons/workflow": "^4.2.15",
+    "@internationalized/date": "^3.6.0",
+    "@react-aria/datepicker": "^3.12.0",
+    "@react-aria/focus": "^3.19.0",
+    "@react-aria/i18n": "^3.12.4",
+    "@react-aria/interactions": "^3.22.5",
+    "@react-aria/utils": "^3.26.0",
+    "@react-spectrum/button": "^3.16.9",
+    "@react-spectrum/calendar": "^3.5.0",
+    "@react-spectrum/dialog": "^3.8.16",
+    "@react-spectrum/form": "^3.7.10",
+    "@react-spectrum/label": "^3.16.10",
+    "@react-spectrum/layout": "^3.6.10",
+    "@react-spectrum/utils": "^3.12.0",
+    "@react-spectrum/view": "^3.6.14",
+    "@react-stately/datepicker": "^3.11.0",
+    "@react-types/datepicker": "^3.9.0",
+    "@react-types/shared": "^3.26.0",
+    "@spectrum-icons/ui": "^3.6.11",
+    "@spectrum-icons/workflow": "^4.2.16",
     "@swc/helpers": "^0.5.0"
   },
   "devDependencies": {
@@ -63,10 +63,11 @@
   },
   "peerDependencies": {
     "@react-spectrum/provider": "^3.0.0",
-    "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0",
-    "react-dom": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0"
+    "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1",
+    "react-dom": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1"
   },
   "publishConfig": {
     "access": "public"
-  }
-}
+  },
+  "gitHead": "71f0ef23053f9e03ee7e97df736e8b083e006849"
+}

package/src/DateField.tsx

@@ -45,8 +45,8 @@ function DateField<T extends DateValue>(props: SpectrumDateFieldProps<T>, ref: F
     createCalendar
   });
 
-  let fieldRef = useRef(null);
-  let inputRef = useRef(null);
+  let fieldRef = useRef<HTMLElement | null>(null);
+  let inputRef = useRef<HTMLInputElement | null>(null);
   let {labelProps, fieldProps, inputProps, descriptionProps, errorMessageProps, isInvalid, validationErrors, validationDetails} = useDateField({
     ...props,
     inputRef
@@ -56,7 +56,7 @@ function DateField<T extends DateValue>(props: SpectrumDateFieldProps<T>, ref: F
   // 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 validationState = state.validationState || (isInvalid ? 'invalid' : null);
@@ -72,7 +72,7 @@ function DateField<T extends DateValue>(props: SpectrumDateFieldProps<T>, ref: F
       labelProps={labelProps}
       descriptionProps={descriptionProps}
       errorMessageProps={errorMessageProps}
-      validationState={validationState}
+      validationState={validationState ?? undefined}
       isInvalid={isInvalid}
       validationErrors={validationErrors}
       validationDetails={validationDetails}

package/src/DatePicker.tsx

@@ -50,7 +50,7 @@ function DatePicker<T extends DateValue>(props: SpectrumDatePickerProps<T>, ref:
     pageBehavior
   } = props;
   let {hoverProps, isHovered} = useHover({isDisabled});
-  let targetRef = useRef<HTMLDivElement>(undefined);
+  let targetRef = useRef<HTMLDivElement | null>(null);
   let state = useDatePickerState({
     ...props,
     shouldCloseOnSelect: () => !state.hasTime
@@ -99,10 +99,10 @@ function DatePicker<T extends DateValue>(props: SpectrumDatePickerProps<T>, ref:
   // 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/DatePickerField.tsx

@@ -33,7 +33,7 @@ export function DatePickerField<T extends DateValue>(props: DatePickerFieldProps
     isRequired,
     inputClassName
   } = props;
-  let ref = useRef(undefined);
+  let ref = useRef<HTMLDivElement | null>(null);
   let {locale} = useLocale();
   let state = useDateFieldState({
     ...props,
@@ -41,7 +41,7 @@ export function DatePickerField<T extends DateValue>(props: DatePickerFieldProps
     createCalendar
   });
 
-  let inputRef = useRef(undefined);
+  let inputRef = useRef<HTMLInputElement | null>(null);
   let {fieldProps, inputProps} = useDateField({...props, inputRef}, state, ref);
 
   return (

package/src/DatePickerSegment.tsx

@@ -50,7 +50,7 @@ function LiteralSegment({segment}: LiteralSegmentProps) {
 }
 
 function EditableSegment({segment, state}: DatePickerSegmentProps) {
-  let ref = useRef(undefined);
+  let ref = useRef<HTMLDivElement | null>(null);
   let {segmentProps} = useDateSegment(segment, state, ref);
 
   return (

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() {