@react-aria/datepicker 3.8.1 → 3.9.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@react-aria/datepicker",
-  "version": "3.8.1",
+  "version": "3.9.1",
   "description": "Spectrum UI components in React",
   "license": "Apache-2.0",
   "main": "dist/main.js",
@@ -22,21 +22,23 @@
     "url": "https://github.com/adobe/react-spectrum"
   },
   "dependencies": {
-    "@internationalized/date": "^3.5.0",
-    "@internationalized/number": "^3.3.0",
-    "@internationalized/string": "^3.1.1",
-    "@react-aria/focus": "^3.14.3",
-    "@react-aria/i18n": "^3.8.4",
-    "@react-aria/interactions": "^3.19.1",
-    "@react-aria/label": "^3.7.2",
-    "@react-aria/spinbutton": "^3.5.4",
-    "@react-aria/utils": "^3.21.1",
-    "@react-stately/datepicker": "^3.8.0",
-    "@react-types/button": "^3.9.0",
-    "@react-types/calendar": "^3.4.1",
-    "@react-types/datepicker": "^3.6.1",
-    "@react-types/dialog": "^3.5.6",
-    "@react-types/shared": "^3.21.0",
+    "@internationalized/date": "^3.5.1",
+    "@internationalized/number": "^3.5.0",
+    "@internationalized/string": "^3.2.0",
+    "@react-aria/focus": "^3.16.0",
+    "@react-aria/form": "^3.0.1",
+    "@react-aria/i18n": "^3.10.0",
+    "@react-aria/interactions": "^3.20.1",
+    "@react-aria/label": "^3.7.4",
+    "@react-aria/spinbutton": "^3.6.1",
+    "@react-aria/utils": "^3.23.0",
+    "@react-stately/datepicker": "^3.9.1",
+    "@react-stately/form": "^3.0.0",
+    "@react-types/button": "^3.9.1",
+    "@react-types/calendar": "^3.4.3",
+    "@react-types/datepicker": "^3.7.1",
+    "@react-types/dialog": "^3.5.7",
+    "@react-types/shared": "^3.22.0",
     "@swc/helpers": "^0.5.0"
   },
   "peerDependencies": {
@@ -46,5 +48,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "3ecf62dcceea437cb12df1851636dd491bb6591c"
+  "gitHead": "86b38c87868ce7f262e0df905e5ac4eb2653791d"
 }

package/src/useDateField.ts

@@ -13,23 +13,24 @@
 import {AriaDateFieldProps as AriaDateFieldPropsBase, AriaTimeFieldProps, DateValue, TimeValue} from '@react-types/datepicker';
 import {createFocusManager, FocusManager} from '@react-aria/focus';
 import {DateFieldState, TimeFieldState} from '@react-stately/datepicker';
-import {DOMAttributes, GroupDOMAttributes, KeyboardEvent} from '@react-types/shared';
+import {DOMAttributes, GroupDOMAttributes, KeyboardEvent, ValidationResult} from '@react-types/shared';
 import {filterDOMProps, mergeProps, useDescription, useFormReset} from '@react-aria/utils';
-import {FocusEvent, InputHTMLAttributes, RefObject, useEffect, useMemo, useRef} from 'react';
+import {InputHTMLAttributes, RefObject, useEffect, useMemo, useRef} from 'react';
 // @ts-ignore
 import intlMessages from '../intl/*.json';
 import {useDatePickerGroup} from './useDatePickerGroup';
 import {useField} from '@react-aria/label';
 import {useFocusWithin} from '@react-aria/interactions';
+import {useFormValidation} from '@react-aria/form';
 import {useLocalizedStringFormatter} from '@react-aria/i18n';
 
 // Allows this hook to also be used with TimeField
-export interface AriaDateFieldOptions<T extends DateValue> extends Omit<AriaDateFieldPropsBase<T>, 'value' | 'defaultValue' | 'onChange' | 'minValue' | 'maxValue' | 'placeholderValue'> {
+export interface AriaDateFieldOptions<T extends DateValue> extends Omit<AriaDateFieldPropsBase<T>, 'value' | 'defaultValue' | 'onChange' | 'minValue' | 'maxValue' | 'placeholderValue' | 'validate'> {
   /** A ref for the hidden input element for HTML form submission. */
   inputRef?: RefObject<HTMLInputElement>
 }
 
-export interface DateFieldAria {
+export interface DateFieldAria extends ValidationResult {
    /** Props for the field's visible label element, if any. */
   labelProps: DOMAttributes,
    /** Props for the field grouping element. */
@@ -63,25 +64,32 @@ export const focusManagerSymbol = '__focusManager_' + Date.now();
  * Each part of a date value is displayed in an individually editable segment.
  */
 export function useDateField<T extends DateValue>(props: AriaDateFieldOptions<T>, state: DateFieldState, ref: RefObject<Element>): DateFieldAria {
+  let {isInvalid, validationErrors, validationDetails} = state.displayValidation;
   let {labelProps, fieldProps, descriptionProps, errorMessageProps} = useField({
     ...props,
-    labelElementType: 'span'
+    labelElementType: 'span',
+    isInvalid,
+    errorMessage: props.errorMessage || validationErrors
   });
 
+  let valueOnFocus = useRef<DateValue | null>(null);
   let {focusWithinProps} = useFocusWithin({
     ...props,
-    onBlurWithin: (e: FocusEvent) => {
+    onFocusWithin(e) {
+      valueOnFocus.current = state.value;
+      props.onFocus?.(e);
+    },
+    onBlurWithin: (e) => {
       state.confirmPlaceholder();
-
-      if (props.onBlur) {
-        props.onBlur(e);
+      if (state.value !== valueOnFocus.current) {
+        state.commitValidation();
       }
+      props.onBlur?.(e);
     },
-    onFocusWithin: props.onFocus,
     onFocusWithinChange: props.onFocusChange
   });
 
-  let stringFormatter = useLocalizedStringFormatter(intlMessages);
+  let stringFormatter = useLocalizedStringFormatter(intlMessages, '@react-aria/datepicker');
   let message = state.maxGranularity === 'hour' ? 'selectedTimeDescription' : 'selectedDateDescription';
   let field = state.maxGranularity === 'hour' ? 'time' : 'date';
   let description = state.value ? stringFormatter.format(message, {[field]: state.formatValue({month: 'long'})}) : '';
@@ -131,6 +139,28 @@ export function useDateField<T extends DateValue>(props: AriaDateFieldOptions<T>
   }, [focusManager]);
 
   useFormReset(props.inputRef, state.value, state.setValue);
+  useFormValidation({
+    ...props,
+    focus() {
+      focusManager.focusFirst();
+    }
+  }, state, props.inputRef);
+
+  let inputProps: InputHTMLAttributes<HTMLInputElement> = {
+    type: 'hidden',
+    name: props.name,
+    value: state.value?.toString() || ''
+  };
+
+  if (props.validationBehavior === 'native') {
+    // Use a hidden <input type="text"> rather than <input type="hidden">
+    // so that an empty value blocks HTML form submission when the field is required.
+    inputProps.type = 'text';
+    inputProps.hidden = true;
+    inputProps.required = props.isRequired;
+    // Ignore react warning.
+    inputProps.onChange = () => {};
+  }
 
   let domProps = filterDOMProps(props);
   return {
@@ -152,13 +182,12 @@ export function useDateField<T extends DateValue>(props: AriaDateFieldOptions<T>
         }
       }
     }),
-    inputProps: {
-      type: 'hidden',
-      name: props.name,
-      value: state.value?.toString() || ''
-    },
+    inputProps,
     descriptionProps,
-    errorMessageProps
+    errorMessageProps,
+    isInvalid,
+    validationErrors,
+    validationDetails
   };
 }
 

package/src/useDatePicker.ts

@@ -16,10 +16,11 @@ import {AriaDialogProps} from '@react-types/dialog';
 import {CalendarProps} from '@react-types/calendar';
 import {createFocusManager} from '@react-aria/focus';
 import {DatePickerState} from '@react-stately/datepicker';
-import {DOMAttributes, GroupDOMAttributes, KeyboardEvent} from '@react-types/shared';
+import {DOMAttributes, GroupDOMAttributes, KeyboardEvent, ValidationResult} from '@react-types/shared';
 import {filterDOMProps, mergeProps, useDescription, useId} from '@react-aria/utils';
 // @ts-ignore
 import intlMessages from '../intl/*.json';
+import {privateValidationStateProp} from '@react-stately/form';
 import {RefObject, useMemo} from 'react';
 import {roleSymbol} from './useDateField';
 import {useDatePickerGroup} from './useDatePickerGroup';
@@ -27,7 +28,7 @@ import {useField} from '@react-aria/label';
 import {useFocusWithin} from '@react-aria/interactions';
 import {useLocale, useLocalizedStringFormatter} from '@react-aria/i18n';
 
-export interface DatePickerAria {
+export interface DatePickerAria extends ValidationResult {
   /** Props for the date picker's visible label element, if any. */
   labelProps: DOMAttributes,
   /** Props for the grouping element containing the date field and button. */
@@ -54,11 +55,14 @@ export function useDatePicker<T extends DateValue>(props: AriaDatePickerProps<T>
   let buttonId = useId();
   let dialogId = useId();
   let fieldId = useId();
-  let stringFormatter = useLocalizedStringFormatter(intlMessages);
+  let stringFormatter = useLocalizedStringFormatter(intlMessages, '@react-aria/datepicker');
 
+  let {isInvalid, validationErrors, validationDetails} = state.displayValidation;
   let {labelProps, fieldProps, descriptionProps, errorMessageProps} = useField({
     ...props,
-    labelElementType: 'span'
+    labelElementType: 'span',
+    isInvalid,
+    errorMessage: props.errorMessage || validationErrors
   });
 
   let groupProps = useDatePickerGroup(state, ref);
@@ -119,8 +123,6 @@ export function useDatePicker<T extends DateValue>(props: AriaDatePickerProps<T>
       'aria-describedby': ariaDescribedBy,
       value: state.value,
       onChange: state.setValue,
-      minValue: props.minValue,
-      maxValue: props.maxValue,
       placeholderValue: props.placeholderValue,
       hideTimeZone: props.hideTimeZone,
       hourCycle: props.hourCycle,
@@ -129,7 +131,9 @@ export function useDatePicker<T extends DateValue>(props: AriaDatePickerProps<T>
       isDisabled: props.isDisabled,
       isReadOnly: props.isReadOnly,
       isRequired: props.isRequired,
-      isInvalid: state.isInvalid,
+      validationBehavior: props.validationBehavior,
+      // DatePicker owns the validation state for the date field.
+      [privateValidationStateProp]: state,
       autoFocus: props.autoFocus,
       name: props.name
     },
@@ -143,6 +147,7 @@ export function useDatePicker<T extends DateValue>(props: AriaDatePickerProps<T>
       'aria-labelledby': `${buttonId} ${labelledBy}`,
       'aria-describedby': ariaDescribedBy,
       'aria-expanded': state.isOpen,
+      isDisabled: props.isDisabled || props.isReadOnly,
       onPress: () => state.setOpen(true)
     },
     dialogProps: {
@@ -160,7 +165,10 @@ export function useDatePicker<T extends DateValue>(props: AriaDatePickerProps<T>
       isDateUnavailable: props.isDateUnavailable,
       defaultFocusedValue: state.dateValue ? undefined : props.placeholderValue,
       isInvalid: state.isInvalid,
-      errorMessage: props.errorMessage
-    }
+      errorMessage: typeof props.errorMessage === 'function' ? props.errorMessage(state.displayValidation) : (props.errorMessage || state.displayValidation.validationErrors.join(' '))
+    },
+    isInvalid,
+    validationErrors,
+    validationDetails
   };
 }

package/src/useDateRangePicker.ts

@@ -15,19 +15,20 @@ import {AriaDatePickerProps, AriaDateRangePickerProps, DateValue} from '@react-t
 import {AriaDialogProps} from '@react-types/dialog';
 import {createFocusManager} from '@react-aria/focus';
 import {DateRangePickerState} from '@react-stately/datepicker';
-import {DOMAttributes, GroupDOMAttributes, KeyboardEvent} from '@react-types/shared';
+import {DEFAULT_VALIDATION_RESULT, mergeValidation, privateValidationStateProp} from '@react-stately/form';
+import {DOMAttributes, GroupDOMAttributes, KeyboardEvent, ValidationResult} from '@react-types/shared';
 import {filterDOMProps, mergeProps, useDescription, useId} from '@react-aria/utils';
 import {focusManagerSymbol, roleSymbol} from './useDateField';
 // @ts-ignore
 import intlMessages from '../intl/*.json';
 import {RangeCalendarProps} from '@react-types/calendar';
-import {RefObject, useMemo} from 'react';
+import {RefObject, useMemo, useRef} from 'react';
 import {useDatePickerGroup} from './useDatePickerGroup';
 import {useField} from '@react-aria/label';
 import {useFocusWithin} from '@react-aria/interactions';
 import {useLocale, useLocalizedStringFormatter} from '@react-aria/i18n';
 
-export interface DateRangePickerAria {
+export interface DateRangePickerAria extends ValidationResult {
   /** Props for the date range picker's visible label element, if any. */
   labelProps: DOMAttributes,
   /** Props for the grouping element containing the date fields and button. */
@@ -54,10 +55,13 @@ export interface DateRangePickerAria {
  * users to enter or select a date and time range.
  */
 export function useDateRangePicker<T extends DateValue>(props: AriaDateRangePickerProps<T>, state: DateRangePickerState, ref: RefObject<Element>): DateRangePickerAria {
-  let stringFormatter = useLocalizedStringFormatter(intlMessages);
+  let stringFormatter = useLocalizedStringFormatter(intlMessages, '@react-aria/datepicker');
+  let {isInvalid, validationErrors, validationDetails} = state.displayValidation;
   let {labelProps, fieldProps, descriptionProps, errorMessageProps} = useField({
     ...props,
-    labelElementType: 'span'
+    labelElementType: 'span',
+    isInvalid,
+    errorMessage: props.errorMessage || validationErrors
   });
 
   let labelledBy = fieldProps['aria-labelledby'] || fieldProps.id;
@@ -92,8 +96,6 @@ export function useDateRangePicker<T extends DateValue>(props: AriaDateRangePick
     [focusManagerSymbol]: focusManager,
     [roleSymbol]: 'presentation',
     'aria-describedby': ariaDescribedBy,
-    minValue: props.minValue,
-    maxValue: props.maxValue,
     placeholderValue: props.placeholderValue,
     hideTimeZone: props.hideTimeZone,
     hourCycle: props.hourCycle,
@@ -102,7 +104,7 @@ export function useDateRangePicker<T extends DateValue>(props: AriaDateRangePick
     isDisabled: props.isDisabled,
     isReadOnly: props.isReadOnly,
     isRequired: props.isRequired,
-    isInvalid: state.isInvalid
+    validationBehavior: props.validationBehavior
   };
 
   let domProps = filterDOMProps(props);
@@ -115,6 +117,9 @@ export function useDateRangePicker<T extends DateValue>(props: AriaDateRangePick
     onFocusWithinChange: props.onFocusChange
   });
 
+  let startFieldValidation = useRef(DEFAULT_VALIDATION_RESULT);
+  let endFieldValidation = useRef(DEFAULT_VALIDATION_RESULT);
+
   return {
     groupProps: mergeProps(domProps, groupProps, fieldProps, descProps, focusWithinProps, {
       role: 'group' as const,
@@ -153,6 +158,7 @@ export function useDateRangePicker<T extends DateValue>(props: AriaDateRangePick
       'aria-labelledby': `${buttonId} ${labelledBy}`,
       'aria-describedby': ariaDescribedBy,
       'aria-expanded': state.isOpen,
+      isDisabled: props.isDisabled || props.isReadOnly,
       onPress: () => state.setOpen(true)
     },
     dialogProps: {
@@ -165,14 +171,34 @@ export function useDateRangePicker<T extends DateValue>(props: AriaDateRangePick
       value: state.value?.start,
       onChange: start => state.setDateTime('start', start),
       autoFocus: props.autoFocus,
-      name: props.startName
+      name: props.startName,
+      [privateValidationStateProp]: {
+        realtimeValidation: state.realtimeValidation,
+        displayValidation: state.displayValidation,
+        updateValidation(e) {
+          startFieldValidation.current = e;
+          state.updateValidation(mergeValidation(e, endFieldValidation.current));
+        },
+        resetValidation: state.resetValidation,
+        commitValidation: state.commitValidation
+      }
     },
     endFieldProps: {
       ...endFieldProps,
       ...commonFieldProps,
       value: state.value?.end,
       onChange: end => state.setDateTime('end', end),
-      name: props.endName
+      name: props.endName,
+      [privateValidationStateProp]: {
+        realtimeValidation: state.realtimeValidation,
+        displayValidation: state.displayValidation,
+        updateValidation(e) {
+          endFieldValidation.current = e;
+          state.updateValidation(mergeValidation(startFieldValidation.current, e));
+        },
+        resetValidation: state.resetValidation,
+        commitValidation: state.commitValidation
+      }
     },
     descriptionProps,
     errorMessageProps,
@@ -188,7 +214,10 @@ export function useDateRangePicker<T extends DateValue>(props: AriaDateRangePick
       allowsNonContiguousRanges: props.allowsNonContiguousRanges,
       defaultFocusedValue: state.dateRange ? undefined : props.placeholderValue,
       isInvalid: state.isInvalid,
-      errorMessage: props.errorMessage
-    }
+      errorMessage: typeof props.errorMessage === 'function' ? props.errorMessage(state.displayValidation) : (props.errorMessage || state.displayValidation.validationErrors.join(' '))
+    },
+    isInvalid,
+    validationErrors,
+    validationDetails
   };
 }

package/src/useDisplayNames.ts

@@ -13,7 +13,7 @@
 // @ts-ignore
 import intlMessages from '../intl/*.json';
 import {LocalizedStringDictionary} from '@internationalized/string';
-import {useLocale} from '@react-aria/i18n';
+import {useLocale, useLocalizedStringDictionary} from '@react-aria/i18n';
 import {useMemo} from 'react';
 
 type Field = Intl.DateTimeFormatPartTypes;
@@ -24,6 +24,7 @@ interface DisplayNames {
 /** @private */
 export function useDisplayNames(): DisplayNames {
   let {locale} = useLocale();
+  let dictionary = useLocalizedStringDictionary(intlMessages, '@react-aria/datepicker');
   return useMemo(() => {
     // Try to use Intl.DisplayNames if possible. It may be supported in browsers, but not support the dateTimeField
     // type as that was only added in v2. https://github.com/tc39/intl-displaynames-v2
@@ -31,18 +32,18 @@ export function useDisplayNames(): DisplayNames {
       // @ts-ignore
       return new Intl.DisplayNames(locale, {type: 'dateTimeField'});
     } catch (err) {
-      return new DisplayNamesPolyfill(locale);
+      return new DisplayNamesPolyfill(locale, dictionary);
     }
-  }, [locale]);
+  }, [locale, dictionary]);
 }
 
 class DisplayNamesPolyfill implements DisplayNames {
   private locale: string;
   private dictionary: LocalizedStringDictionary<Field, string>;
 
-  constructor(locale: string) {
+  constructor(locale: string, dictionary: LocalizedStringDictionary<Field, string>) {
     this.locale = locale;
-    this.dictionary = new LocalizedStringDictionary<Field, string>(intlMessages);
+    this.dictionary = dictionary;
   }
 
   of(field: Field): string {