@react-stately/datepicker 3.6.0 → 3.8.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@react-stately/datepicker",
-  "version": "3.6.0",
+  "version": "3.8.0",
   "description": "Spectrum UI components in React",
   "license": "Apache-2.0",
   "main": "dist/main.js",
@@ -22,12 +22,12 @@
     "url": "https://github.com/adobe/react-spectrum"
   },
   "dependencies": {
-    "@internationalized/date": "^3.4.0",
+    "@internationalized/date": "^3.5.0",
     "@internationalized/string": "^3.1.1",
-    "@react-stately/overlays": "^3.6.1",
-    "@react-stately/utils": "^3.7.0",
-    "@react-types/datepicker": "^3.5.0",
-    "@react-types/shared": "^3.19.0",
+    "@react-stately/overlays": "^3.6.3",
+    "@react-stately/utils": "^3.8.0",
+    "@react-types/datepicker": "^3.6.1",
+    "@react-types/shared": "^3.21.0",
     "@swc/helpers": "^0.5.0"
   },
   "peerDependencies": {
@@ -36,5 +36,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "d4dfe4bb842a914f10045ee63fc6b92f034c5b30"
+  "gitHead": "4122e44d1991c90507d630d35ed297f89db435d3"
 }

package/src/useDateFieldState.ts

@@ -51,8 +51,13 @@ export interface DateFieldState {
   segments: DateSegment[],
   /** A date formatter configured for the current locale and format. */
   dateFormatter: DateFormatter,
-  /** The current validation state of the date field, based on the `validationState`, `minValue`, and `maxValue` props. */
+  /**
+   * The current validation state of the date field, based on the `validationState`, `minValue`, and `maxValue` props.
+   * @deprecated Use `isInvalid` instead.
+   */
   validationState: ValidationState,
+  /** Whether the date field is invalid, based on the `isInvalid`, `minValue`, and `maxValue` props. */
+  isInvalid: boolean,
   /** The granularity for the field, based on the `granularity` prop and current value. */
   granularity: Granularity,
   /** The maximum date or time unit that is displayed in the field. */
@@ -309,8 +314,9 @@ export function useDateFieldState<T extends DateValue = DateValue>(props: DateFi
     }
   };
 
-  let validationState: ValidationState = props.validationState ||
-    (isInvalid(calendarValue, props.minValue, props.maxValue) ? 'invalid' : null);
+  let isValueInvalid = props.isInvalid || props.validationState === 'invalid' ||
+    isInvalid(calendarValue, props.minValue, props.maxValue);
+  let validationState: ValidationState = props.validationState || (isValueInvalid ? 'invalid' : null);
 
   return {
     value: calendarValue,
@@ -320,6 +326,7 @@ export function useDateFieldState<T extends DateValue = DateValue>(props: DateFi
     segments,
     dateFormatter,
     validationState,
+    isInvalid: isValueInvalid,
     granularity,
     maxGranularity: props.maxGranularity ?? 'year',
     isDisabled,

package/src/useDatePickerState.ts

@@ -28,9 +28,9 @@ export interface DatePickerStateOptions<T extends DateValue> extends DatePickerP
 
 export interface DatePickerState extends OverlayTriggerState {
   /** The currently selected date. */
-  value: DateValue,
+  value: DateValue | null,
   /** Sets the selected date. */
-  setValue(value: DateValue): void,
+  setValue(value: DateValue | null): void,
   /**
    * The date portion of the value. This may be set prior to `value` if the user has
    * selected a date but has not yet selected a time.
@@ -53,8 +53,13 @@ export interface DatePickerState extends OverlayTriggerState {
   isOpen: boolean,
   /** Sets whether the calendar popover is open. */
   setOpen(isOpen: boolean): void,
-  /** The current validation state of the date picker, based on the `validationState`, `minValue`, and `maxValue` props. */
+  /**
+   * The current validation state of the date picker, based on the `validationState`, `minValue`, and `maxValue` props.
+   * @deprecated Use `isInvalid` instead.
+   */
   validationState: ValidationState,
+  /** Whether the date picker is invalid, based on the `isInvalid`, `minValue`, and `maxValue` props. */
+  isInvalid: boolean,
   /** Formats the selected value using the given options. */
   formatValue(locale: string, fieldOptions: FieldOptions): string
 }
@@ -120,9 +125,10 @@ export function useDatePickerState<T extends DateValue = DateValue>(props: DateP
     }
   };
 
-  let validationState: ValidationState = props.validationState ||
-    (isInvalid(value, props.minValue, props.maxValue) ? 'invalid' : null) ||
-    (value && props.isDateUnavailable?.(value) ? 'invalid' : null);
+  let isValueInvalid = props.isInvalid || props.validationState === 'invalid' ||
+    isInvalid(value, props.minValue, props.maxValue) ||
+    value && props.isDateUnavailable?.(value);
+  let validationState: ValidationState = props.validationState || (isValueInvalid ? 'invalid' : null);
 
   return {
     value,
@@ -145,6 +151,7 @@ export function useDatePickerState<T extends DateValue = DateValue>(props: DateP
       overlayState.setOpen(isOpen);
     },
     validationState,
+    isInvalid: isValueInvalid,
     formatValue(locale, fieldOptions) {
       if (!dateValue) {
         return '';

package/src/useDateRangePickerState.ts

@@ -29,21 +29,21 @@ export interface DateRangePickerStateOptions<T extends DateValue = DateValue> ex
 type TimeRange = RangeValue<TimeValue>;
 export interface DateRangePickerState extends OverlayTriggerState {
   /** The currently selected date range. */
-  value: DateRange,
+  value: DateRange | null,
   /** Sets the selected date range. */
-  setValue(value: DateRange): void,
+  setValue(value: DateRange | null): void,
   /**
    * The date portion of the selected range. This may be set prior to `value` if the user has
    * selected a date range but has not yet selected a time range.
    */
-  dateRange: DateRange,
+  dateRange: DateRange | null,
   /** Sets the date portion of the selected range. */
   setDateRange(value: DateRange): void,
   /**
    * The time portion of the selected range. This may be set prior to `value` if the user has
    * selected a time range but has not yet selected a date range.
    */
-  timeRange: TimeRange,
+  timeRange: TimeRange | null,
   /** Sets the time portion of the selected range. */
   setTimeRange(value: TimeRange): void,
   /** Sets the date portion of either the start or end of the selected range. */
@@ -60,8 +60,13 @@ export interface DateRangePickerState extends OverlayTriggerState {
   isOpen: boolean,
   /** Sets whether the calendar popover is open. */
   setOpen(isOpen: boolean): void,
-  /** The current validation state of the date picker, based on the `validationState`, `minValue`, and `maxValue` props. */
+  /**
+   * The current validation state of the date range picker, based on the `validationState`, `minValue`, and `maxValue` props.
+   * @deprecated Use `isInvalid` instead.
+   */
   validationState: ValidationState,
+  /** Whether the date range picker is invalid, based on the `isInvalid`, `minValue`, and `maxValue` props. */
+  isInvalid: boolean,
   /** Formats the selected range using the given options. */
   formatValue(locale: string, fieldOptions: FieldOptions): {start: string, end: string}
 }
@@ -85,7 +90,7 @@ export function useDateRangePickerState<T extends DateValue = DateValue>(props:
   let value = controlledValue || placeholderValue;
 
   let setValue = (value: DateRange) => {
-    setPlaceholderValue(value);
+    setPlaceholderValue(value || {start: null, end: null});
     if (value?.start && value.end) {
       setControlledValue(value);
     } else {
@@ -148,14 +153,15 @@ export function useDateRangePickerState<T extends DateValue = DateValue>(props:
     }
   };
 
-  let validationState: ValidationState = props.validationState
+  let isValueInvalid = props.isInvalid || props.validationState === 'invalid'
     || (value != null && (
       isInvalid(value.start, props.minValue, props.maxValue) ||
       isInvalid(value.end, props.minValue, props.maxValue) ||
       (value.end != null && value.start != null && value.end.compare(value.start) < 0) ||
       (value?.start && props.isDateUnavailable?.(value.start)) ||
       (value?.end && props.isDateUnavailable?.(value.end))
-    ) ? 'invalid' : null);
+    ));
+  let validationState: ValidationState = props.validationState || (isValueInvalid ? 'invalid' : null);
 
   return {
     value,
@@ -190,6 +196,7 @@ export function useDateRangePickerState<T extends DateValue = DateValue>(props:
       overlayState.setOpen(isOpen);
     },
     validationState,
+    isInvalid: isValueInvalid,
     formatValue(locale, fieldOptions) {
       if (!value || !value.start || !value.end) {
         return null;