@react-spectrum/datepicker 3.0.0 → 3.1.2

package/src/Input.tsx

@@ -37,29 +37,32 @@ function Input(props, ref) {
   // not cause a layout shift.
   let [reservePadding, setReservePadding] = useValueEffect(false);
   let onResize = useCallback(() => setReservePadding(function *(reservePadding) {
-    if (reservePadding) {
-      // Try to collapse padding if the content is clipped.
-      if (inputRef.current.scrollWidth > inputRef.current.offsetWidth) {
-        let width = inputRef.current.parentElement.offsetWidth;
-        yield false;
+    if (inputRef.current) {
+      if (reservePadding) {
+        // Try to collapse padding if the content is clipped.
+        if (inputRef.current.scrollWidth > inputRef.current.offsetWidth) {
+          let width = inputRef.current.parentElement.offsetWidth;
+          yield false;
 
-        // If removing padding causes a layout shift, add it back.
-        if (inputRef.current.parentElement.offsetWidth !== width) {
-          yield true;
+          // If removing padding causes a layout shift, add it back.
+          if (inputRef.current.parentElement.offsetWidth !== width) {
+            yield true;
+          }
         }
-      }
-    } else {
-      // Try to add padding if the content is not clipped.
-      if (inputRef.current.offsetWidth >= inputRef.current.scrollWidth) {
-        let width = inputRef.current.parentElement.offsetWidth;
-        yield true;
+      } else {
+        // Try to add padding if the content is not clipped.
+        if (inputRef.current.offsetWidth >= inputRef.current.scrollWidth) {
+          let width = inputRef.current.parentElement.offsetWidth;
+          yield true;
 
-        // If adding padding does not change the width (i.e. width is constrained), remove it again.
-        if (inputRef.current.parentElement.offsetWidth === width) {
-          yield false;
+          // If adding padding does not change the width (i.e. width is constrained), remove it again.
+          if (inputRef.current.parentElement.offsetWidth === width) {
+            yield false;
+          }
         }
       }
     }
+
   }), [inputRef, setReservePadding]);
 
   useLayoutEffect(onResize, [onResize]);

package/src/TimeField.tsx

@@ -17,14 +17,14 @@ import {Field} from '@react-spectrum/label';
 import {FocusableRef} from '@react-types/shared';
 import {Input} from './Input';
 import React, {ReactElement} from 'react';
-import {SpectrumTimePickerProps, TimeValue} from '@react-types/datepicker';
+import {SpectrumTimeFieldProps, TimeValue} from '@react-types/datepicker';
 import {useFocusManagerRef} from './utils';
 import {useLocale} from '@react-aria/i18n';
 import {useProviderProps} from '@react-spectrum/provider';
 import {useTimeField} from '@react-aria/datepicker';
 import {useTimeFieldState} from '@react-stately/datepicker';
 
-function TimeField<T extends TimeValue>(props: SpectrumTimePickerProps<T>, ref: FocusableRef<HTMLElement>) {
+function TimeField<T extends TimeValue>(props: SpectrumTimeFieldProps<T>, ref: FocusableRef<HTMLElement>) {
   props = useProviderProps(props);
   let {
     autoFocus,
@@ -78,5 +78,5 @@ function TimeField<T extends TimeValue>(props: SpectrumTimePickerProps<T>, ref:
  * TimeFields allow users to enter and edit time values using a keyboard.
  * Each part of the time is displayed in an individually editable segment.
  */
-const _TimeField = React.forwardRef(TimeField) as <T extends TimeValue>(props: SpectrumTimePickerProps<T> & {ref?: FocusableRef<HTMLElement>}) => ReactElement;
+const _TimeField = React.forwardRef(TimeField) as <T extends TimeValue>(props: SpectrumTimeFieldProps<T> & {ref?: FocusableRef<HTMLElement>}) => ReactElement;
 export {_TimeField as TimeField};

package/src/index.ts

@@ -16,3 +16,4 @@ export {DatePicker} from './DatePicker';
 export {DateRangePicker} from './DateRangePicker';
 export {TimeField} from './TimeField';
 export {DateField} from './DateField';
+export type {SpectrumDateFieldProps, SpectrumDatePickerProps, SpectrumDateRangePickerProps, SpectrumTimeFieldProps} from '@react-types/datepicker';

package/src/styles.css

@@ -182,3 +182,23 @@
   padding: 0 var(--spectrum-calendar-day-padding);
   box-sizing: border-box;
 }
+
+@media (forced-colors:active) {
+  .react-spectrum-DatePicker-cell:focus {
+    forced-color-adjust: none;
+    background-color: Highlight;
+    color: HighlightText;
+  }
+  .react-spectrum-DatePicker-cell.is-read-only {
+    color: ButtonText;
+    &:focus {
+      color: HighlightText;
+    }
+  }
+  .react-spectrum-DatePicker-cell.is-placeholder {
+    color: ButtonText;
+    &:focus {
+      color: HighlightText;
+    }
+  }
+}