@react-aria/datepicker 3.0.0-nightly.3180 → 3.0.0-rc.0

package/src/index.ts

@@ -14,4 +14,10 @@ export {useDatePicker} from './useDatePicker';
 export {useDateSegment} from './useDateSegment';
 export {useDateField, useTimeField} from './useDateField';
 export {useDateRangePicker} from './useDateRangePicker';
-export * from './useDisplayNames';
+export {useDisplayNames} from './useDisplayNames';
+
+export type {AriaDatePickerProps, AriaDateRangePickerProps} from '@react-types/datepicker';
+export type {AriaDateFieldProps, DateFieldAria} from './useDateField';
+export type {DatePickerAria} from './useDatePicker';
+export type {DateRangePickerAria} from './useDateRangePicker';
+export type {DateSegmentAria} from './useDateSegment';

package/src/useDateField.ts

@@ -13,16 +13,19 @@
 import {AriaDatePickerProps, AriaTimeFieldProps, DateValue, TimeValue} from '@react-types/datepicker';
 import {createFocusManager, FocusManager} from '@react-aria/focus';
 import {DateFieldState} from '@react-stately/datepicker';
+import {filterDOMProps, mergeProps, useDescription} from '@react-aria/utils';
 import {HTMLAttributes, RefObject, useEffect, useMemo, useRef} from 'react';
-import {mergeProps, useDescription} from '@react-aria/utils';
+// @ts-ignore
+import intlMessages from '../intl/*.json';
 import {useDatePickerGroup} from './useDatePickerGroup';
 import {useField} from '@react-aria/label';
 import {useFocusWithin} from '@react-aria/interactions';
+import {useMessageFormatter} from '@react-aria/i18n';
 
 // Allows this hook to also be used with TimeField
-interface DateFieldProps<T extends DateValue> extends Omit<AriaDatePickerProps<T>, 'value' | 'defaultValue' | 'onChange' | 'minValue' | 'maxValue' | 'placeholderValue'> {}
+export interface AriaDateFieldProps<T extends DateValue> extends Omit<AriaDatePickerProps<T>, 'value' | 'defaultValue' | 'onChange' | 'minValue' | 'maxValue' | 'placeholderValue'> {}
 
-interface DateFieldAria {
+export interface DateFieldAria {
    /** Props for the field's visible label element, if any. */
   labelProps: HTMLAttributes<HTMLElement>,
    /** Props for the field grouping element. */
@@ -53,7 +56,7 @@ export const focusManagerSymbol = '__focusManager_' + Date.now();
  * A date field allows users to enter and edit date and time values using a keyboard.
  * Each part of a date value is displayed in an individually editable segment.
  */
-export function useDateField<T extends DateValue>(props: DateFieldProps<T>, state: DateFieldState, ref: RefObject<HTMLElement>): DateFieldAria {
+export function useDateField<T extends DateValue>(props: AriaDateFieldProps<T>, state: DateFieldState, ref: RefObject<HTMLElement>): DateFieldAria {
   let {labelProps, fieldProps, descriptionProps, errorMessageProps} = useField({
     ...props,
     labelElementType: 'span'
@@ -67,7 +70,11 @@ export function useDateField<T extends DateValue>(props: DateFieldProps<T>, stat
     }
   });
 
-  let descProps = useDescription(state.formatValue({month: 'long'}));
+  let formatMessage = useMessageFormatter(intlMessages);
+  let message = state.maxGranularity === 'hour' ? 'selectedTimeDescription' : 'selectedDateDescription';
+  let field = state.maxGranularity === 'hour' ? 'time' : 'date';
+  let description = state.value ? formatMessage(message, {[field]: state.formatValue({month: 'long'})}) : '';
+  let descProps = useDescription(description);
 
   // If within a date picker or date range picker, the date field will have role="presentation" and an aria-describedby
   // will be passed in that references the value (e.g. entire range). Otherwise, add the field's value description.
@@ -111,6 +118,7 @@ export function useDateField<T extends DateValue>(props: DateFieldProps<T>, stat
     autoFocusRef.current = false;
   }, [focusManager]);
 
+  let domProps = filterDOMProps(props);
   return {
     labelProps: {
       ...labelProps,
@@ -118,7 +126,7 @@ export function useDateField<T extends DateValue>(props: DateFieldProps<T>, stat
         focusManager.focusFirst();
       }
     },
-    fieldProps: mergeProps(fieldDOMProps, groupProps, focusWithinProps),
+    fieldProps: mergeProps(domProps, fieldDOMProps, groupProps, focusWithinProps),
     descriptionProps,
     errorMessageProps
   };

package/src/useDatePicker.ts

@@ -16,16 +16,16 @@ 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 {filterDOMProps, mergeProps, useDescription, useId} from '@react-aria/utils';
 import {HTMLAttributes, RefObject} from 'react';
 // @ts-ignore
 import intlMessages from '../intl/*.json';
-import {mergeProps, useDescription, useId} from '@react-aria/utils';
 import {roleSymbol} from './useDateField';
 import {useDatePickerGroup} from './useDatePickerGroup';
 import {useField} from '@react-aria/label';
 import {useLocale, useMessageFormatter} from '@react-aria/i18n';
 
-interface DatePickerAria {
+export interface DatePickerAria {
   /** Props for the date picker's visible label element, if any. */
   labelProps: HTMLAttributes<HTMLElement>,
   /** Props for the grouping element containing the date field and button. */
@@ -63,11 +63,14 @@ export function useDatePicker<T extends DateValue>(props: AriaDatePickerProps<T>
   let labelledBy = fieldProps['aria-labelledby'] || fieldProps.id;
 
   let {locale} = useLocale();
-  let descProps = useDescription(state.formatValue(locale, {month: 'long'}));
+  let date = state.formatValue(locale, {month: 'long'});
+  let description = date ? formatMessage('selectedDateDescription', {date}) : '';
+  let descProps = useDescription(description);
   let ariaDescribedBy = [descProps['aria-describedby'], fieldProps['aria-describedby']].filter(Boolean).join(' ') || undefined;
+  let domProps = filterDOMProps(props);
 
   return {
-    groupProps: mergeProps(groupProps, fieldProps, descProps, {
+    groupProps: mergeProps(domProps, groupProps, fieldProps, descProps, {
       role: 'group',
       'aria-disabled': props.isDisabled || null,
       'aria-labelledby': labelledBy,
@@ -123,7 +126,9 @@ export function useDatePicker<T extends DateValue>(props: AriaDatePickerProps<T>
       isDisabled: props.isDisabled,
       isReadOnly: props.isReadOnly,
       isDateUnavailable: props.isDateUnavailable,
-      defaultFocusedValue: state.dateValue ? undefined : props.placeholderValue
+      defaultFocusedValue: state.dateValue ? undefined : props.placeholderValue,
+      validationState: state.validationState,
+      errorMessage: props.errorMessage
     }
   };
 }

package/src/useDateRangePicker.ts

@@ -15,18 +15,18 @@ 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 {filterDOMProps, mergeProps, useDescription, useId} from '@react-aria/utils';
 import {focusManagerSymbol, roleSymbol} from './useDateField';
 import {HTMLAttributes, RefObject, useMemo} from 'react';
 // @ts-ignore
 import intlMessages from '../intl/*.json';
-import {mergeProps, useDescription, useId} from '@react-aria/utils';
 import {RangeCalendarProps} from '@react-types/calendar';
 import {useDatePickerGroup} from './useDatePickerGroup';
 import {useField} from '@react-aria/label';
 import {useFocusWithin} from '@react-aria/interactions';
 import {useLocale, useMessageFormatter} from '@react-aria/i18n';
 
-interface DateRangePickerAria {
+export interface DateRangePickerAria {
   /** Props for the date range picker's visible label element, if any. */
   labelProps: HTMLAttributes<HTMLElement>,
   /** Props for the grouping element containing the date fields and button. */
@@ -62,7 +62,8 @@ export function useDateRangePicker<T extends DateValue>(props: AriaDateRangePick
   let labelledBy = fieldProps['aria-labelledby'] || fieldProps.id;
 
   let {locale} = useLocale();
-  let description = state.formatValue(locale, {month: 'long'});
+  let range = state.formatValue(locale, {month: 'long'});
+  let description = range ? formatMessage('selectedRangeDescription', {startDate: range.start, endDate: range.end}) : '';
   let descProps = useDescription(description);
 
   let startFieldProps = {
@@ -103,8 +104,10 @@ export function useDateRangePicker<T extends DateValue>(props: AriaDateRangePick
     validationState: state.validationState
   };
 
+  let domProps = filterDOMProps(props);
+
   return {
-    groupProps: mergeProps(groupProps, fieldProps, descProps, focusWithinProps, {
+    groupProps: mergeProps(domProps, groupProps, fieldProps, descProps, focusWithinProps, {
       role: 'group',
       'aria-disabled': props.isDisabled || null,
       'aria-describedby': ariaDescribedBy
@@ -154,7 +157,9 @@ export function useDateRangePicker<T extends DateValue>(props: AriaDateRangePick
       isReadOnly: props.isReadOnly,
       isDateUnavailable: props.isDateUnavailable,
       allowsNonContiguousRanges: props.allowsNonContiguousRanges,
-      defaultFocusedValue: state.dateRange ? undefined : props.placeholderValue
+      defaultFocusedValue: state.dateRange ? undefined : props.placeholderValue,
+      validationState: state.validationState,
+      errorMessage: props.errorMessage
     }
   };
 }

package/src/useDateSegment.ts

@@ -17,10 +17,9 @@ import {NumberParser} from '@internationalized/number';
 import React, {HTMLAttributes, RefObject, useMemo, useRef} from 'react';
 import {useDateFormatter, useFilter, useLocale} from '@react-aria/i18n';
 import {useDisplayNames} from './useDisplayNames';
-import {usePress} from '@react-aria/interactions';
 import {useSpinButton} from '@react-aria/spinbutton';
 
-interface DateSegmentAria {
+export interface DateSegmentAria {
   /** Props for the segment element. */
   segmentProps: HTMLAttributes<HTMLDivElement>
 }
@@ -301,22 +300,6 @@ export function useDateSegment(segment: DateSegment, state: DateFieldState, ref:
     }
   });
 
-  // Focus on mouse down/touch up to match native textfield behavior.
-  // usePress handles canceling text selection.
-  let {pressProps} = usePress({
-    preventFocusOnPress: true,
-    onPressStart: (e) => {
-      if (e.pointerType === 'mouse') {
-        e.target.focus();
-      }
-    },
-    onPress(e) {
-      if (e.pointerType !== 'mouse') {
-        e.target.focus();
-      }
-    }
-  });
-
   // For Android: prevent selection on long press.
   useEvent(ref, 'selectstart', e => {
     e.preventDefault();
@@ -360,7 +343,7 @@ export function useDateSegment(segment: DateSegment, state: DateFieldState, ref:
   }
 
   return {
-    segmentProps: mergeProps(spinButtonProps, pressProps, labelProps, {
+    segmentProps: mergeProps(spinButtonProps, labelProps, {
       id,
       ...touchPropOverrides,
       'aria-invalid': state.validationState === 'invalid' ? 'true' : undefined,
@@ -379,7 +362,16 @@ export function useDateSegment(segment: DateSegment, state: DateFieldState, ref:
       onKeyDown,
       onFocus,
       style: {
-        caretColor: 'transparent'
+        caretColor: 'transparent',
+        userSelect: 'none',
+        WebkitUserSelect: 'none'
+      },
+      // Prevent pointer events from reaching useDatePickerGroup, and allow native browser behavior to focus the segment.
+      onPointerDown(e) {
+        e.stopPropagation();
+      },
+      onMouseDown(e) {
+        e.stopPropagation();
       }
     })
   };

package/src/useDisplayNames.ts

@@ -21,6 +21,7 @@ interface DisplayNames {
   of(field: Field): string
 }
 
+/** @private */
 export function useDisplayNames(): DisplayNames {
   let {locale} = useLocale();
   return useMemo(() => {