@react-aria/datepicker 3.0.0-nightly.3103 → 3.0.0-nightly.3104

package/src/useDatePickerGroup.ts

@@ -1,34 +1,92 @@
-import {DatePickerFieldState, DatePickerState, DateRangePickerState} from '@react-stately/datepicker';
-import {KeyboardEvent} from '@react-types/shared';
+import {createFocusManager, getFocusableTreeWalker} from '@react-aria/focus';
+import {DateFieldState, DatePickerState, DateRangePickerState} from '@react-stately/datepicker';
+import {FocusableElement, KeyboardEvent, RefObject} from '@react-types/shared';
 import {mergeProps} from '@react-aria/utils';
-import {RefObject} from 'react';
+import {useLocale} from '@react-aria/i18n';
+import {useMemo} from 'react';
 import {usePress} from '@react-aria/interactions';
 
-export function useDatePickerGroup(state: DatePickerState | DateRangePickerState | DatePickerFieldState, ref: RefObject<HTMLElement>) {
+export function useDatePickerGroup(state: DatePickerState | DateRangePickerState | DateFieldState, ref: RefObject<Element | null>, disableArrowNavigation?: boolean) {
+  let {direction} = useLocale();
+  let focusManager = useMemo(() => createFocusManager(ref), [ref]);
+
   // Open the popover on alt + arrow down
   let onKeyDown = (e: KeyboardEvent) => {
-    if (e.altKey && e.key === 'ArrowDown' && 'setOpen' in state) {
+    if (!e.currentTarget.contains(e.target)) {
+      return;
+    }
+
+    if (e.altKey && (e.key === 'ArrowDown' || e.key === 'ArrowUp') && 'setOpen' in state) {
       e.preventDefault();
       e.stopPropagation();
       state.setOpen(true);
     }
+
+    if (disableArrowNavigation) {
+      return;
+    }
+
+    switch (e.key) {
+      case 'ArrowLeft':
+        e.preventDefault();
+        e.stopPropagation();
+        if (direction === 'rtl') {
+          focusManager.focusNext();
+        } else {
+          focusManager.focusPrevious();
+        }
+        break;
+      case 'ArrowRight':
+        e.preventDefault();
+        e.stopPropagation();
+        if (direction === 'rtl') {
+          focusManager.focusPrevious();
+        } else {
+          focusManager.focusNext();
+        }
+        break;
+    }
   };
 
   // Focus the first placeholder segment from the end on mouse down/touch up in the field.
   let focusLast = () => {
-    let elements = ref.current.querySelectorAll('[tabindex="0"]');
-    let index = elements.length - 1;
-    while (index >= 0 && elements[index].getAttribute('aria-placeholder')) {
-      index--;
+    // Try to find the segment prior to the element that was clicked on.
+    let target = window.event?.target as FocusableElement;
+    let walker = getFocusableTreeWalker(ref.current, {tabbable: true});
+    if (target) {
+      walker.currentNode = target;
+      target = walker.previousNode() as FocusableElement;
     }
-    index = Math.min(index + 1, elements.length - 1);
-    let element = elements[index] as HTMLElement;
-    if (element) {
-      element.focus();
+
+    // If no target found, find the last element from the end.
+    if (!target) {
+      let last: FocusableElement;
+      do {
+        last = walker.lastChild() as FocusableElement;
+        if (last) {
+          target = last;
+        }
+      } while (last);
+    }
+
+    // Now go backwards until we find an element that is not a placeholder.
+    while (target?.hasAttribute('data-placeholder')) {
+      let prev = walker.previousNode() as FocusableElement;
+      if (prev && prev.hasAttribute('data-placeholder')) {
+        target = prev;
+      } else {
+        break;
+      }
+    }
+
+    if (target) {
+      target.focus();
     }
   };
 
   let {pressProps} = usePress({
+    preventFocusOnPress: true,
+    allowTextSelectionOnPress: true,
     onPressStart(e) {
       if (e.pointerType === 'mouse') {
         focusLast();

package/src/useDateRangePicker.ts

@@ -15,98 +15,209 @@ 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 {HTMLAttributes, LabelHTMLAttributes, RefObject} from 'react';
+import {DEFAULT_VALIDATION_RESULT, mergeValidation, privateValidationStateProp} from '@react-stately/form';
+import {DOMAttributes, GroupDOMAttributes, KeyboardEvent, RefObject, 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 {mergeProps, useDescription, useId, useLabels} 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';
+import {useLocale, useLocalizedStringFormatter} from '@react-aria/i18n';
+import {useMemo, useRef} from 'react';
 
-interface DateRangePickerAria<T extends DateValue> {
-  labelProps: LabelHTMLAttributes<HTMLLabelElement>,
-  groupProps: HTMLAttributes<HTMLElement>,
-  startFieldProps: AriaDatePickerProps<T>,
-  endFieldProps: AriaDatePickerProps<T>,
+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. */
+  groupProps: GroupDOMAttributes,
+  /** Props for the start date field. */
+  startFieldProps: AriaDatePickerProps<DateValue>,
+  /** Props for the end date field. */
+  endFieldProps: AriaDatePickerProps<DateValue>,
+  /** Props for the popover trigger button. */
+  buttonProps: AriaButtonProps,
   /** Props for the description element, if any. */
-  descriptionProps: HTMLAttributes<HTMLElement>,
+  descriptionProps: DOMAttributes,
   /** Props for the error message element, if any. */
-  errorMessageProps: HTMLAttributes<HTMLElement>,
-  buttonProps: AriaButtonProps,
-  dialogProps:  AriaDialogProps
+  errorMessageProps: DOMAttributes,
+  /** Props for the popover dialog. */
+  dialogProps: AriaDialogProps,
+  /** Props for the range calendar within the popover dialog. */
+  calendarProps: RangeCalendarProps<DateValue>
 }
 
-export function useDateRangePicker<T extends DateValue>(props: AriaDateRangePickerProps<T>, state: DateRangePickerState, ref: RefObject<HTMLElement>): DateRangePickerAria<T> {
-  let formatMessage = useMessageFormatter(intlMessages);
+/**
+ * Provides the behavior and accessibility implementation for a date picker component.
+ * 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 useDateRangePicker<T extends DateValue>(props: AriaDateRangePickerProps<T>, state: DateRangePickerState, ref: RefObject<Element | null>): DateRangePickerAria {
+  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;
 
   let {locale} = useLocale();
-  let description = state.formatValue(locale, {month: 'long'});
+  let range = state.formatValue(locale, {month: 'long'});
+  let description = range ? stringFormatter.format('selectedRangeDescription', {startDate: range.start, endDate: range.end}) : '';
   let descProps = useDescription(description);
 
-  let startFieldProps = useLabels({
-    'aria-label': formatMessage('startDate'),
+  let startFieldProps = {
+    'aria-label': stringFormatter.format('startDate'),
     'aria-labelledby': labelledBy
-  });
+  };
 
-  let endFieldProps = useLabels({
-    'aria-label': formatMessage('endDate'),
+  let endFieldProps = {
+    'aria-label': stringFormatter.format('endDate'),
     'aria-labelledby': labelledBy
-  });
+  };
 
   let buttonId = useId();
   let dialogId = useId();
 
   let groupProps = useDatePickerGroup(state, ref);
+
+  let ariaDescribedBy = [descProps['aria-describedby'], fieldProps['aria-describedby']].filter(Boolean).join(' ') || undefined;
+  let focusManager = useMemo(() => createFocusManager(ref, {
+    // Exclude the button from the focus manager.
+    accept: element => element.id !== buttonId
+  }), [ref, buttonId]);
+
+  let commonFieldProps = {
+    [focusManagerSymbol]: focusManager,
+    [roleSymbol]: 'presentation',
+    'aria-describedby': ariaDescribedBy,
+    placeholderValue: props.placeholderValue,
+    hideTimeZone: props.hideTimeZone,
+    hourCycle: props.hourCycle,
+    granularity: props.granularity,
+    shouldForceLeadingZeros: props.shouldForceLeadingZeros,
+    isDisabled: props.isDisabled,
+    isReadOnly: props.isReadOnly,
+    isRequired: props.isRequired,
+    validationBehavior: props.validationBehavior
+  };
+
+  let domProps = filterDOMProps(props);
+
   let {focusWithinProps} = useFocusWithin({
-    onBlurWithin() {
-      state.confirmPlaceholder();
-    }
+    ...props,
+    isDisabled: state.isOpen,
+    onBlurWithin: props.onBlur,
+    onFocusWithin: props.onFocus,
+    onFocusWithinChange: props.onFocusChange
   });
 
-  let ariaDescribedBy = [descProps['aria-describedby'], fieldProps['aria-describedby']].filter(Boolean).join(' ') || undefined;
+  let startFieldValidation = useRef(DEFAULT_VALIDATION_RESULT);
+  let endFieldValidation = useRef(DEFAULT_VALIDATION_RESULT);
 
   return {
-    groupProps: mergeProps(groupProps, fieldProps, descProps, focusWithinProps, {
-      role: 'group',
+    groupProps: mergeProps(domProps, groupProps, fieldProps, descProps, focusWithinProps, {
+      role: 'group' as const,
       'aria-disabled': props.isDisabled || null,
-      'aria-describedby': ariaDescribedBy
+      'aria-describedby': ariaDescribedBy,
+      onKeyDown(e: KeyboardEvent) {
+        if (state.isOpen) {
+          return;
+        }
+
+        if (props.onKeyDown) {
+          props.onKeyDown(e);
+        }
+      },
+      onKeyUp(e: KeyboardEvent) {
+        if (state.isOpen) {
+          return;
+        }
+
+        if (props.onKeyUp) {
+          props.onKeyUp(e);
+        }
+      }
     }),
     labelProps: {
       ...labelProps,
       onClick: () => {
-        let focusManager = createFocusManager(ref);
         focusManager.focusFirst();
       }
     },
     buttonProps: {
       ...descProps,
       id: buttonId,
-      excludeFromTabOrder: true,
       'aria-haspopup': 'dialog',
-      'aria-label': formatMessage('calendar'),
-      'aria-labelledby': `${labelledBy} ${buttonId}`,
-      'aria-describedby': ariaDescribedBy
+      'aria-label': stringFormatter.format('calendar'),
+      'aria-labelledby': `${buttonId} ${labelledBy}`,
+      'aria-describedby': ariaDescribedBy,
+      'aria-expanded': state.isOpen,
+      isDisabled: props.isDisabled || props.isReadOnly,
+      onPress: () => state.setOpen(true)
     },
     dialogProps: {
       id: dialogId,
-      'aria-labelledby': `${labelledBy} ${buttonId}`
+      'aria-labelledby': `${buttonId} ${labelledBy}`
     },
     startFieldProps: {
       ...startFieldProps,
-      'aria-describedby': fieldProps['aria-describedby']
+      ...commonFieldProps,
+      value: state.value?.start,
+      onChange: start => state.setDateTime('start', start),
+      autoFocus: props.autoFocus,
+      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,
-      'aria-describedby': fieldProps['aria-describedby']
+      ...commonFieldProps,
+      value: state.value?.end,
+      onChange: end => state.setDateTime('end', end),
+      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
+    errorMessageProps,
+    calendarProps: {
+      autoFocus: true,
+      value: state.dateRange,
+      onChange: state.setDateRange,
+      minValue: props.minValue,
+      maxValue: props.maxValue,
+      isDisabled: props.isDisabled,
+      isReadOnly: props.isReadOnly,
+      isDateUnavailable: props.isDateUnavailable,
+      allowsNonContiguousRanges: props.allowsNonContiguousRanges,
+      defaultFocusedValue: state.dateRange ? undefined : props.placeholderValue,
+      isInvalid: state.isInvalid,
+      errorMessage: typeof props.errorMessage === 'function' ? props.errorMessage(state.displayValidation) : (props.errorMessage || state.displayValidation.validationErrors.join(' '))
+    },
+    isInvalid,
+    validationErrors,
+    validationDetails
   };
 }