@react-stately/datepicker 3.7.0 → 3.9.0

package/src/useDateFieldState.ts

@@ -11,8 +11,9 @@
  */
 
 import {Calendar, DateFormatter, getMinimumDayInMonth, getMinimumMonthInYear, GregorianCalendar, toCalendar} from '@internationalized/date';
-import {convertValue, createPlaceholderDate, FieldOptions, getFormatOptions, isInvalid, useDefaultProps} from './utils';
+import {convertValue, createPlaceholderDate, FieldOptions, getFormatOptions, getValidationResult, useDefaultProps} from './utils';
 import {DatePickerProps, DateValue, Granularity} from '@react-types/datepicker';
+import {FormValidationState, useFormValidationState} from '@react-stately/form';
 import {getPlaceholder} from './placeholders';
 import {useControlledState} from '@react-stately/utils';
 import {useEffect, useMemo, useRef, useState} from 'react';
@@ -38,7 +39,7 @@ export interface DateSegment {
   isEditable: boolean
 }
 
-export interface DateFieldState {
+export interface DateFieldState extends FormValidationState {
   /** The current field value. */
   value: DateValue,
   /** The current value, converted to a native JavaScript `Date` object.  */
@@ -149,7 +150,10 @@ export function useDateFieldState<T extends DateValue = DateValue>(props: DateFi
     hideTimeZone,
     isDisabled,
     isReadOnly,
-    isRequired
+    isRequired,
+    minValue,
+    maxValue,
+    isDateUnavailable
   } = props;
 
   let v: DateValue = (props.value || props.defaultValue || props.placeholderValue);
@@ -314,11 +318,25 @@ export function useDateFieldState<T extends DateValue = DateValue>(props: DateFi
     }
   };
 
-  let isValueInvalid = props.isInvalid || props.validationState === 'invalid' ||
-    isInvalid(calendarValue, props.minValue, props.maxValue);
+  let builtinValidation = useMemo(() => getValidationResult(
+    value,
+    minValue,
+    maxValue,
+    isDateUnavailable,
+    formatOpts
+  ), [value, minValue, maxValue, isDateUnavailable, formatOpts]);
+
+  let validation = useFormValidationState({
+    ...props,
+    value,
+    builtinValidation
+  });
+
+  let isValueInvalid = validation.displayValidation.isInvalid;
   let validationState: ValidationState = props.validationState || (isValueInvalid ? 'invalid' : null);
 
   return {
+    ...validation,
     value: calendarValue,
     dateValue,
     calendar,

package/src/useDatePickerState.ts

@@ -12,10 +12,11 @@
 
 import {CalendarDate, DateFormatter, toCalendarDate, toCalendarDateTime} from '@internationalized/date';
 import {DatePickerProps, DateValue, Granularity, TimeValue} from '@react-types/datepicker';
-import {FieldOptions, getFormatOptions, getPlaceholderTime, isInvalid, useDefaultProps} from './utils';
+import {FieldOptions, getFormatOptions, getPlaceholderTime, getValidationResult, useDefaultProps} from './utils';
+import {FormValidationState, useFormValidationState} from '@react-stately/form';
 import {OverlayTriggerState, useOverlayTriggerState} from '@react-stately/overlays';
 import {useControlledState} from '@react-stately/utils';
-import {useState} from 'react';
+import {useMemo, useState} from 'react';
 import {ValidationState} from '@react-types/shared';
 
 export interface DatePickerStateOptions<T extends DateValue> extends DatePickerProps<T> {
@@ -26,11 +27,11 @@ export interface DatePickerStateOptions<T extends DateValue> extends DatePickerP
   shouldCloseOnSelect?: boolean | (() => boolean)
 }
 
-export interface DatePickerState extends OverlayTriggerState {
+export interface DatePickerState extends OverlayTriggerState, FormValidationState {
   /** 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.
@@ -93,10 +94,39 @@ export function useDatePickerState<T extends DateValue = DateValue>(props: DateP
     throw new Error('Invalid granularity ' + granularity + ' for value ' + v.toString());
   }
 
+  let showEra = value?.calendar.identifier === 'gregory' && value.era === 'BC';
+  let formatOpts = useMemo(() => ({
+    granularity,
+    timeZone: defaultTimeZone,
+    hideTimeZone: props.hideTimeZone,
+    hourCycle: props.hourCycle,
+    shouldForceLeadingZeros: props.shouldForceLeadingZeros,
+    showEra
+  }), [granularity, props.hourCycle, props.shouldForceLeadingZeros, defaultTimeZone, props.hideTimeZone, showEra]);
+
+  let {minValue, maxValue, isDateUnavailable} = props;
+  let builtinValidation = useMemo(() => getValidationResult(
+    value,
+    minValue,
+    maxValue,
+    isDateUnavailable,
+    formatOpts
+  ), [value, minValue, maxValue, isDateUnavailable, formatOpts]);
+
+  let validation = useFormValidationState({
+    ...props,
+    value,
+    builtinValidation
+  });
+
+  let isValueInvalid = validation.displayValidation.isInvalid;
+  let validationState: ValidationState = props.validationState || (isValueInvalid ? 'invalid' : null);
+
   let commitValue = (date: DateValue, time: TimeValue) => {
     setValue('timeZone' in time ? time.set(toCalendarDate(date)) : toCalendarDateTime(date, time));
     setSelectedDate(null);
     setSelectedTime(null);
+    validation.commitValidation();
   };
 
   // Intercept setValue to make sure the Time section is not changed by date selection in Calendar
@@ -110,6 +140,7 @@ export function useDatePickerState<T extends DateValue = DateValue>(props: DateP
       }
     } else {
       setValue(newValue);
+      validation.commitValidation();
     }
 
     if (shouldClose) {
@@ -125,12 +156,8 @@ export function useDatePickerState<T extends DateValue = DateValue>(props: DateP
     }
   };
 
-  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 {
+    ...validation,
     value,
     setValue,
     dateValue: selectedDate,
@@ -157,14 +184,7 @@ export function useDatePickerState<T extends DateValue = DateValue>(props: DateP
         return '';
       }
 
-      let formatOptions = getFormatOptions(fieldOptions, {
-        granularity,
-        timeZone: defaultTimeZone,
-        hideTimeZone: props.hideTimeZone,
-        hourCycle: props.hourCycle,
-        showEra: value.calendar.identifier === 'gregory' && value.era === 'BC'
-      });
-
+      let formatOptions = getFormatOptions(fieldOptions, formatOpts);
       let formatter = new DateFormatter(locale, formatOptions);
       return formatter.format(dateValue);
     }

package/src/useDateRangePickerState.ts

@@ -12,11 +12,12 @@
 
 import {DateFormatter, toCalendarDate, toCalendarDateTime} from '@internationalized/date';
 import {DateRange, DateRangePickerProps, DateValue, Granularity, TimeValue} from '@react-types/datepicker';
-import {FieldOptions, getFormatOptions, getPlaceholderTime, isInvalid, useDefaultProps} from './utils';
+import {FieldOptions, getFormatOptions, getPlaceholderTime, getRangeValidationResult, useDefaultProps} from './utils';
+import {FormValidationState, useFormValidationState} from '@react-stately/form';
 import {OverlayTriggerState, useOverlayTriggerState} from '@react-stately/overlays';
 import {RangeValue, ValidationState} from '@react-types/shared';
 import {useControlledState} from '@react-stately/utils';
-import {useState} from 'react';
+import {useMemo, useState} from 'react';
 
 export interface DateRangePickerStateOptions<T extends DateValue = DateValue> extends DateRangePickerProps<T> {
   /**
@@ -27,23 +28,23 @@ export interface DateRangePickerStateOptions<T extends DateValue = DateValue> ex
 }
 
 type TimeRange = RangeValue<TimeValue>;
-export interface DateRangePickerState extends OverlayTriggerState {
+export interface DateRangePickerState extends OverlayTriggerState, FormValidationState {
   /** 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. */
@@ -90,7 +91,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 {
@@ -99,7 +100,7 @@ export function useDateRangePickerState<T extends DateValue = DateValue>(props:
   };
 
   let v = (value?.start || value?.end || props.placeholderValue);
-  let [granularity] = useDefaultProps(v, props.granularity);
+  let [granularity, defaultTimeZone] = useDefaultProps(v, props.granularity);
   let hasTime = granularity === 'hour' || granularity === 'minute' || granularity === 'second';
   let shouldCloseOnSelect = props.shouldCloseOnSelect ?? true;
 
@@ -120,6 +121,7 @@ export function useDateRangePickerState<T extends DateValue = DateValue>(props:
     });
     setSelectedDateRange(null);
     setSelectedTimeRange(null);
+    validation.commitValidation();
   };
 
   // Intercept setValue to make sure the Time section is not changed by date selection in Calendar
@@ -136,6 +138,7 @@ export function useDateRangePickerState<T extends DateValue = DateValue>(props:
       }
     } else if (range.start && range.end) {
       setValue(range);
+      validation.commitValidation();
     } else {
       setSelectedDateRange(range);
     }
@@ -153,17 +156,37 @@ export function useDateRangePickerState<T extends DateValue = DateValue>(props:
     }
   };
 
-  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))
-    ));
+  let showEra = (value?.start?.calendar.identifier === 'gregory' && value.start.era === 'BC') || (value?.end?.calendar.identifier === 'gregory' && value.end.era === 'BC');
+  let formatOpts = useMemo(() => ({
+    granularity,
+    timeZone: defaultTimeZone,
+    hideTimeZone: props.hideTimeZone,
+    hourCycle: props.hourCycle,
+    shouldForceLeadingZeros: props.shouldForceLeadingZeros,
+    showEra
+  }), [granularity, props.hourCycle, props.shouldForceLeadingZeros, defaultTimeZone, props.hideTimeZone, showEra]);
+
+  let {minValue, maxValue, isDateUnavailable} = props;
+  let builtinValidation = useMemo(() => getRangeValidationResult(
+    value,
+    minValue,
+    maxValue,
+    isDateUnavailable,
+    formatOpts
+  ), [value, minValue, maxValue, isDateUnavailable, formatOpts]);
+
+  let validation = useFormValidationState({
+    ...props,
+    value: controlledValue,
+    name: useMemo(() => [props.startName, props.endName], [props.startName, props.endName]),
+    builtinValidation
+  });
+
+  let isValueInvalid = validation.displayValidation.isInvalid;
   let validationState: ValidationState = props.validationState || (isValueInvalid ? 'invalid' : null);
 
   return {
+    ...validation,
     value,
     setValue,
     dateRange,

package/src/useTimeFieldState.ts

@@ -13,8 +13,8 @@
 import {DateFieldState, useDateFieldState} from '.';
 import {DateValue, TimePickerProps, TimeValue} from '@react-types/datepicker';
 import {getLocalTimeZone, GregorianCalendar, Time, toCalendarDateTime, today, toTime, toZoned} from '@internationalized/date';
+import {useCallback, useMemo} from 'react';
 import {useControlledState} from '@react-stately/utils';
-import {useMemo} from 'react';
 
 export interface TimeFieldStateOptions<T extends TimeValue = TimeValue> extends TimePickerProps<T> {
   /** The locale to display and edit the value according to. */
@@ -36,7 +36,8 @@ export function useTimeFieldState<T extends TimeValue = TimeValue>(props: TimeFi
     placeholderValue = new Time(),
     minValue,
     maxValue,
-    granularity
+    granularity,
+    validate
   } = props;
 
   let [value, setValue] = useControlledState<TimeValue>(
@@ -73,7 +74,8 @@ export function useTimeFieldState<T extends TimeValue = TimeValue>(props: TimeFi
     maxGranularity: 'hour',
     placeholderValue: placeholderDate,
     // Calendar should not matter for time fields.
-    createCalendar: () => new GregorianCalendar()
+    createCalendar: () => new GregorianCalendar(),
+    validate: useCallback(() => validate?.(value as any), [validate, value])
   });
 
   return {

package/src/utils.ts

@@ -10,15 +10,113 @@
  * governing permissions and limitations under the License.
  */
 
-import {Calendar, now, Time, toCalendar, toCalendarDate, toCalendarDateTime} from '@internationalized/date';
+import {Calendar, DateFormatter, now, Time, toCalendar, toCalendarDate, toCalendarDateTime} from '@internationalized/date';
 import {DatePickerProps, DateValue, Granularity, TimeValue} from '@react-types/datepicker';
+// @ts-ignore
+import i18nMessages from '../intl/*.json';
+import {LocalizedStringDictionary, LocalizedStringFormatter} from '@internationalized/string';
+import {mergeValidation, VALID_VALIDITY_STATE} from '@react-stately/form';
+import {RangeValue, ValidationResult} from '@react-types/shared';
 import {useState} from 'react';
 
-export function isInvalid(value: DateValue, minValue: DateValue, maxValue: DateValue) {
-  return value != null && (
-    (minValue != null && value.compare(minValue) < 0) ||
-    (maxValue != null && value.compare(maxValue) > 0)
+const dictionary = new LocalizedStringDictionary(i18nMessages);
+
+function getLocale() {
+  // Match browser language setting here, NOT react-aria's I18nProvider, so that we match other browser-provided
+  // validation messages, which to not respect our provider's language.
+  // @ts-ignore
+  return (typeof navigator !== 'undefined' && (navigator.language || navigator.userLanguage)) || 'en-US';
+}
+
+export function getValidationResult(
+  value: DateValue,
+  minValue: DateValue,
+  maxValue: DateValue,
+  isDateUnavailable: (v: DateValue) => boolean,
+  options: FormatterOptions
+): ValidationResult {
+  let rangeOverflow = value != null && maxValue != null && value.compare(maxValue) > 0;
+  let rangeUnderflow = value != null && minValue != null && value.compare(minValue) < 0;
+  let isUnavailable = (value != null && isDateUnavailable?.(value)) || false;
+  let isInvalid = rangeOverflow || rangeUnderflow || isUnavailable;
+  let errors = [];
+
+  if (isInvalid) {
+    let locale = getLocale();
+    let formatter = new LocalizedStringFormatter(locale, dictionary);
+    let dateFormatter = new DateFormatter(locale, getFormatOptions({}, options));
+    let timeZone = dateFormatter.resolvedOptions().timeZone;
+
+    if (rangeUnderflow) {
+      errors.push(formatter.format('rangeUnderflow', {minValue: dateFormatter.format(minValue.toDate(timeZone))}));
+    }
+
+    if (rangeOverflow) {
+      errors.push(formatter.format('rangeOverflow', {maxValue: dateFormatter.format(maxValue.toDate(timeZone))}));
+    }
+
+    if (isUnavailable) {
+      errors.push(formatter.format('unavailableDate'));
+    }
+  }
+
+  return {
+    isInvalid,
+    validationErrors: errors,
+    validationDetails: {
+      badInput: isUnavailable,
+      customError: false,
+      patternMismatch: false,
+      rangeOverflow,
+      rangeUnderflow,
+      stepMismatch: false,
+      tooLong: false,
+      tooShort: false,
+      typeMismatch: false,
+      valueMissing: false,
+      valid: !isInvalid
+    }
+  };
+}
+
+export function getRangeValidationResult(
+  value: RangeValue<DateValue>,
+  minValue: DateValue,
+  maxValue: DateValue,
+  isDateUnavailable: (v: DateValue) => boolean,
+  options: FormatterOptions
+) {
+  let startValidation = getValidationResult(
+    value?.start,
+    minValue,
+    maxValue,
+    isDateUnavailable,
+    options
   );
+
+  let endValidation = getValidationResult(
+    value?.end,
+    minValue,
+    maxValue,
+    isDateUnavailable,
+    options
+  );
+
+  let result = mergeValidation(startValidation, endValidation);
+  if (value.end != null && value.start != null && value.end.compare(value.start) < 0) {
+    result = mergeValidation(result, {
+      isInvalid: true,
+      validationErrors: [dictionary.getStringForLocale('rangeReversed', getLocale())],
+      validationDetails: {
+        ...VALID_VALIDITY_STATE,
+        rangeUnderflow: true,
+        rangeOverflow: true,
+        valid: false
+      }
+    });
+  }
+
+  return result;
 }
 
 export type FieldOptions = Pick<Intl.DateTimeFormatOptions, 'year' | 'month' | 'day' | 'hour' | 'minute' | 'second'>;