@react-stately/datepicker 3.0.0-alpha.4 → 3.0.0-nightly-641446f65-240905

package/src/useDateRangePickerState.ts

@@ -10,14 +10,17 @@
  * governing permissions and limitations under the License.
  */
 
-import {createPlaceholderDate, FieldOptions, getFormatOptions, getPlaceholderTime, isInvalid, useDefaultProps} from './utils';
+
 import {DateFormatter, toCalendarDate, toCalendarDateTime} from '@internationalized/date';
 import {DateRange, DateRangePickerProps, DateValue, Granularity, TimeValue} from '@react-types/datepicker';
+import {FieldOptions, FormatterOptions, 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 {useRef, useState} from 'react';
+import {useMemo, useState} from 'react';
 
-export interface DateRangePickerOptions extends DateRangePickerProps<DateValue> {
+export interface DateRangePickerStateOptions<T extends DateValue = DateValue> extends DateRangePickerProps<T> {
   /**
    * Determines whether the date picker popover should close automatically when a date is selected.
    * @default true
@@ -26,23 +29,23 @@ export interface DateRangePickerOptions extends DateRangePickerProps<DateValue>
 }
 
 type TimeRange = RangeValue<TimeValue>;
-export interface DateRangePickerState {
+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. */
@@ -59,12 +62,17 @@ export interface DateRangePickerState {
   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): string,
-  /** Replaces the start and/or end value of the selected range with the placeholder value if unentered. */
-  confirmPlaceholder(): void
+  formatValue(locale: string, fieldOptions: FieldOptions): {start: string, end: string},
+  /** Gets a formatter based on state's props. */
+  getDateFormatter(locale: string, formatOptions: FormatterOptions): DateFormatter
 }
 
 /**
@@ -72,8 +80,8 @@ export interface DateRangePickerState {
  * A date range picker combines two DateFields and a RangeCalendar popover to allow
  * users to enter or select a date and time range.
  */
-export function useDateRangePickerState(props: DateRangePickerOptions): DateRangePickerState {
-  let [isOpen, setOpen] = useState(false);
+export function useDateRangePickerState<T extends DateValue = DateValue>(props: DateRangePickerStateOptions<T>): DateRangePickerState {
+  let overlayState = useOverlayTriggerState(props);
   let [controlledValue, setControlledValue] = useControlledState<DateRange>(props.value, props.defaultValue || null, props.onChange);
   let [placeholderValue, setPlaceholderValue] = useState(() => controlledValue || {start: null, end: null});
 
@@ -84,12 +92,9 @@ export function useDateRangePickerState(props: DateRangePickerOptions): DateRang
   }
 
   let value = controlledValue || placeholderValue;
-  let valueRef = useRef(value);
-  valueRef.current = value;
 
   let setValue = (value: DateRange) => {
-    valueRef.current = value;
-    setPlaceholderValue(value);
+    setPlaceholderValue(value || {start: null, end: null});
     if (value?.start && value.end) {
       setControlledValue(value);
     } else {
@@ -99,7 +104,7 @@ export function useDateRangePickerState(props: DateRangePickerOptions): DateRang
 
   let v = (value?.start || value?.end || props.placeholderValue);
   let [granularity, defaultTimeZone] = useDefaultProps(v, props.granularity);
-  let hasTime = granularity === 'hour' || granularity === 'minute' || granularity === 'second' || granularity === 'millisecond';
+  let hasTime = granularity === 'hour' || granularity === 'minute' || granularity === 'second';
   let shouldCloseOnSelect = props.shouldCloseOnSelect ?? true;
 
   let [dateRange, setSelectedDateRange] = useState<DateRange>(null);
@@ -117,6 +122,9 @@ export function useDateRangePickerState(props: DateRangePickerOptions): DateRang
       start: 'timeZone' in timeRange.start ? timeRange.start.set(toCalendarDate(dateRange.start)) : toCalendarDateTime(dateRange.start, timeRange.start),
       end: 'timeZone' in timeRange.end ? timeRange.end.set(toCalendarDate(dateRange.end)) : toCalendarDateTime(dateRange.end, timeRange.end)
     });
+    setSelectedDateRange(null);
+    setSelectedTimeRange(null);
+    validation.commitValidation();
   };
 
   // Intercept setValue to make sure the Time section is not changed by date selection in Calendar
@@ -133,12 +141,13 @@ export function useDateRangePickerState(props: DateRangePickerOptions): DateRang
       }
     } else if (range.start && range.end) {
       setValue(range);
+      validation.commitValidation();
     } else {
       setSelectedDateRange(range);
     }
 
     if (shouldClose) {
-      setOpen(false);
+      overlayState.setOpen(false);
     }
   };
 
@@ -150,16 +159,37 @@ export function useDateRangePickerState(props: DateRangePickerOptions): DateRang
     }
   };
 
-  let validationState: ValidationState = props.validationState
-    || (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 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,
@@ -177,7 +207,7 @@ export function useDateRangePickerState(props: DateRangePickerOptions): DateRang
     },
     setDateRange,
     setTimeRange,
-    isOpen,
+    ...overlayState,
     setOpen(isOpen) {
       // Commit the selected date range when the calendar is closed. Use a placeholder time if one wasn't set.
       // If only the time range was set and not the date range, don't commit. The state will be preserved until
@@ -189,12 +219,13 @@ export function useDateRangePickerState(props: DateRangePickerOptions): DateRang
         });
       }
 
-      setOpen(isOpen);
+      overlayState.setOpen(isOpen);
     },
     validationState,
+    isInvalid: isValueInvalid,
     formatValue(locale, fieldOptions) {
       if (!value || !value.start || !value.end) {
-        return '';
+        return null;
       }
 
       let startTimeZone = 'timeZone' in value.start ? value.start.timeZone : undefined;
@@ -206,17 +237,47 @@ export function useDateRangePickerState(props: DateRangePickerOptions): DateRang
         granularity: startGranularity,
         timeZone: startTimeZone,
         hideTimeZone: props.hideTimeZone,
-        hourCycle: props.hourCycle
+        hourCycle: props.hourCycle,
+        showEra: (value.start.calendar.identifier === 'gregory' && value.start.era === 'BC') ||
+          (value.end.calendar.identifier === 'gregory' && value.end.era === 'BC')
       });
 
+      let startDate = value.start.toDate(startTimeZone || 'UTC');
+      let endDate = value.end.toDate(endTimeZone || 'UTC');
+
       let startFormatter = new DateFormatter(locale, startOptions);
       let endFormatter: Intl.DateTimeFormat;
-      if (startTimeZone === endTimeZone && startGranularity === endGranularity) {
+      if (startTimeZone === endTimeZone && startGranularity === endGranularity && value.start.compare(value.end) !== 0) {
         // Use formatRange, as it results in shorter output when some of the fields
         // are shared between the start and end dates (e.g. the same month).
         // Formatting will fail if the end date is before the start date. Fall back below when that happens.
         try {
-          return startFormatter.formatRange(value.start.toDate(startTimeZone), value.end.toDate(endTimeZone));
+          let parts = startFormatter.formatRangeToParts(startDate, endDate);
+
+          // Find the separator between the start and end date. This is determined
+          // by finding the last shared literal before the end range.
+          let separatorIndex = -1;
+          for (let i = 0; i < parts.length; i++) {
+            let part = parts[i];
+            if (part.source === 'shared' && part.type === 'literal') {
+              separatorIndex = i;
+            } else if (part.source === 'endRange') {
+              break;
+            }
+          }
+
+          // Now we can combine the parts into start and end strings.
+          let start = '';
+          let end = '';
+          for (let i = 0; i < parts.length; i++) {
+            if (i < separatorIndex) {
+              start += parts[i].value;
+            } else if (i > separatorIndex) {
+              end += parts[i].value;
+            }
+          }
+
+          return {start, end};
         } catch (e) {
           // ignore
         }
@@ -233,20 +294,15 @@ export function useDateRangePickerState(props: DateRangePickerOptions): DateRang
         endFormatter = new DateFormatter(locale, endOptions);
       }
 
-      return `${startFormatter.format(value.start.toDate(startTimeZone))} – ${endFormatter.format(value.end.toDate(endTimeZone))}`;
+      return {
+        start: startFormatter.format(startDate),
+        end: endFormatter.format(endDate)
+      };
     },
-    confirmPlaceholder() {
-      // Need to use ref value here because the value can be set in the same tick as
-      // a blur, which means the component won't have re-rendered yet.
-      let value = valueRef.current;
-      if (value && Boolean(value.start) !== Boolean(value.end)) {
-        let calendar = (value.start || value.end).calendar;
-        let placeholder = createPlaceholderDate(props.placeholderValue, granularity, calendar, defaultTimeZone);
-        setValue({
-          start: value.start || placeholder,
-          end: value.end || placeholder
-        });
-      }
+    getDateFormatter(locale, formatOptions: FormatterOptions) {
+      let newOptions = {...formatOpts, ...formatOptions};
+      let newFormatOptions = getFormatOptions({}, newOptions);
+      return new DateFormatter(locale, newFormatOptions);
     }
   };
 }

package/src/useTimeFieldState.ts

@@ -12,26 +12,32 @@
 
 import {DateFieldState, useDateFieldState} from '.';
 import {DateValue, TimePickerProps, TimeValue} from '@react-types/datepicker';
-import {getLocalTimeZone, GregorianCalendar, Time, toCalendarDateTime, today, toTime} from '@internationalized/date';
+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';
 
-interface TimeFieldProps extends TimePickerProps<TimeValue> {
+export interface TimeFieldStateOptions<T extends TimeValue = TimeValue> extends TimePickerProps<T> {
   /** The locale to display and edit the value according to. */
   locale: string
 }
 
+export interface TimeFieldState extends DateFieldState {
+  /** The current time value. */
+  timeValue: Time
+}
+
 /**
  * Provides state management for a time field component.
  * A time field allows users to enter and edit time values using a keyboard.
  * Each part of a time value is displayed in an individually editable segment.
  */
-export function useTimeFieldState(props: TimeFieldProps): DateFieldState {
+export function useTimeFieldState<T extends TimeValue = TimeValue>(props: TimeFieldStateOptions<T>): TimeFieldState {
   let {
     placeholderValue = new Time(),
     minValue,
     maxValue,
-    granularity
+    granularity,
+    validate
   } = props;
 
   let [value, setValue] = useControlledState<TimeValue>(
@@ -42,16 +48,22 @@ export function useTimeFieldState(props: TimeFieldProps): DateFieldState {
 
   let v = value || placeholderValue;
   let day = v && 'day' in v ? v : undefined;
-  let placeholderDate = useMemo(() => convertValue(placeholderValue), [placeholderValue]);
+  let defaultValueTimeZone = props.defaultValue && 'timeZone' in props.defaultValue ? props.defaultValue.timeZone : undefined;
+  let placeholderDate = useMemo(() => {
+    let valueTimeZone = v && 'timeZone' in v ? v.timeZone : undefined;
+
+    return (valueTimeZone || defaultValueTimeZone) && placeholderValue ? toZoned(convertValue(placeholderValue), valueTimeZone || defaultValueTimeZone) : convertValue(placeholderValue);
+  }, [placeholderValue, v, defaultValueTimeZone]);
   let minDate = useMemo(() => convertValue(minValue, day), [minValue, day]);
   let maxDate = useMemo(() => convertValue(maxValue, day), [maxValue, day]);
 
+  let timeValue = useMemo(() => value && 'day' in value ? toTime(value) : value as Time, [value]);
   let dateTime = useMemo(() => value == null ? null : convertValue(value), [value]);
   let onChange = newValue => {
-    setValue(v && 'day' in v ? newValue : newValue && toTime(newValue));
+    setValue(day || defaultValueTimeZone ? newValue : newValue && toTime(newValue));
   };
 
-  return useDateFieldState({
+  let state = useDateFieldState({
     ...props,
     value: dateTime,
     defaultValue: undefined,
@@ -62,8 +74,14 @@ export function useTimeFieldState(props: TimeFieldProps): DateFieldState {
     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 {
+    ...state,
+    timeValue
+  };
 }
 
 function convertValue(value: TimeValue, date: DateValue = today(getLocalTimeZone())) {

package/src/utils.ts

@@ -10,24 +10,126 @@
  * 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';
-import {useRef} from 'react';
+// @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 strings = LocalizedStringDictionary.getGlobalDictionaryForPackage('@react-stately/datepicker') || dictionary;
+    let formatter = new LocalizedStringFormatter(locale, strings);
+    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) {
+    let strings = LocalizedStringDictionary.getGlobalDictionaryForPackage('@react-stately/datepicker') || dictionary;
+    result = mergeValidation(result, {
+      isInvalid: true,
+      validationErrors: [strings.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'>;
-interface FormatterOptions {
+export interface FormatterOptions {
   timeZone?: string,
   hideTimeZone?: boolean,
   granularity?: DatePickerProps<any>['granularity'],
   maxGranularity?: 'year' | 'month' | DatePickerProps<any>['granularity'],
-  hourCycle?: 12 | 24
+  hourCycle?: 12 | 24,
+  showEra?: boolean,
+  shouldForceLeadingZeros?: boolean
 }
 
 const DEFAULT_FIELD_OPTIONS: FieldOptions = {
@@ -39,11 +141,21 @@ const DEFAULT_FIELD_OPTIONS: FieldOptions = {
   second: '2-digit'
 };
 
+const TWO_DIGIT_FIELD_OPTIONS: FieldOptions = {
+  year: 'numeric',
+  month: '2-digit',
+  day: '2-digit',
+  hour: '2-digit',
+  minute: '2-digit',
+  second: '2-digit'
+};
+
 export function getFormatOptions(
   fieldOptions: FieldOptions,
   options: FormatterOptions
 ): Intl.DateTimeFormatOptions {
-  fieldOptions = {...DEFAULT_FIELD_OPTIONS, ...fieldOptions};
+  let defaultFieldOptions = options.shouldForceLeadingZeros ? TWO_DIGIT_FIELD_OPTIONS : DEFAULT_FIELD_OPTIONS;
+  fieldOptions = {...defaultFieldOptions, ...fieldOptions};
   let granularity = options.granularity || 'minute';
   let keys = Object.keys(fieldOptions);
   let startIdx = keys.indexOf(options.maxGranularity ?? 'year');
@@ -76,6 +188,10 @@ export function getFormatOptions(
     opts.timeZoneName = 'short';
   }
 
+  if (options.showEra && startIdx === 0) {
+    opts.era = 'short';
+  }
+
   return opts;
 }
 
@@ -125,19 +241,25 @@ export function createPlaceholderDate(placeholderValue: DateValue, granularity:
 
 export function useDefaultProps(v: DateValue, granularity: Granularity): [Granularity, string] {
   // Compute default granularity and time zone from the value. If the value becomes null, keep the last values.
-  let lastValue = useRef(v);
-  if (v) {
-    lastValue.current = v;
-  }
-
-  v = lastValue.current;
   let defaultTimeZone = (v && 'timeZone' in v ? v.timeZone : undefined);
-  granularity = granularity || (v && 'minute' in v ? 'minute' : 'day');
+  let defaultGranularity: Granularity = (v && 'minute' in v ? 'minute' : 'day');
 
   // props.granularity must actually exist in the value if one is provided.
-  if (v && !(granularity in v)) {
+  if (v && granularity && !(granularity in v)) {
     throw new Error('Invalid granularity ' + granularity + ' for value ' + v.toString());
   }
 
-  return [granularity, defaultTimeZone];
+  let [lastValue, setLastValue] = useState<[Granularity, string]>([defaultGranularity, defaultTimeZone]);
+
+  // If the granularity or time zone changed, update the last value.
+  if (v && (lastValue[0] !== defaultGranularity || lastValue[1] !== defaultTimeZone)) {
+    setLastValue([defaultGranularity, defaultTimeZone]);
+  }
+
+  if (!granularity) {
+    granularity = v ? defaultGranularity : lastValue[0];
+  }
+
+  let timeZone = v ? defaultTimeZone : lastValue[1];
+  return [granularity, timeZone];
 }