@react-aria/datepicker 3.0.0-nightly.3175 → 3.0.0-rc.1

package/src/useDateSegment.ts

@@ -10,17 +10,16 @@
  * governing permissions and limitations under the License.
  */
 
-import {DatePickerFieldState, DateSegment} from '@react-stately/datepicker';
-import {getScrollParent, isIOS, isMac, mergeProps, scrollIntoView, useEvent, useId} from '@react-aria/utils';
+import {DateFieldState, DateSegment} from '@react-stately/datepicker';
+import {getScrollParent, isIOS, isMac, mergeProps, scrollIntoView, useEvent, useId, useLabels} from '@react-aria/utils';
 import {hookData} from './useDateField';
 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>
 }
@@ -30,11 +29,11 @@ interface DateSegmentAria {
  * A date segment displays an individual unit of a date and time, and allows users to edit
  * the value by typing or using the arrow keys to increment and decrement.
  */
-export function useDateSegment(segment: DateSegment, state: DatePickerFieldState, ref: RefObject<HTMLElement>): DateSegmentAria {
+export function useDateSegment(segment: DateSegment, state: DateFieldState, ref: RefObject<HTMLElement>): DateSegmentAria {
   let enteredKeys = useRef('');
-  let {locale, direction} = useLocale();
+  let {locale} = useLocale();
   let displayNames = useDisplayNames();
-  let {ariaLabelledBy, ariaDescribedBy, focusManager} = hookData.get(state);
+  let {ariaLabel, ariaLabelledBy, ariaDescribedBy, focusManager} = hookData.get(state);
 
   let textValue = segment.text;
   let options = useMemo(() => state.dateFormatter.resolvedOptions(), [state.dateFormatter]);
@@ -48,7 +47,7 @@ export function useDateSegment(segment: DateSegment, state: DatePickerFieldState
   if (segment.type === 'month') {
     let monthTextValue = monthDateFormatter.format(state.dateValue);
     textValue = monthTextValue !== textValue ? `${textValue} – ${monthTextValue}` : monthTextValue;
-  } else if (segment.type === 'hour' || segment.type === 'dayPeriod') {
+  } else if (segment.type === 'hour') {
     textValue = hourDateFormatter.format(state.dateValue);
   }
 
@@ -115,31 +114,13 @@ export function useDateSegment(segment: DateSegment, state: DatePickerFieldState
     }
 
     switch (e.key) {
-      case 'ArrowLeft':
-        e.preventDefault();
-        e.stopPropagation();
-        if (direction === 'rtl') {
-          focusManager.focusNext({tabbable: true});
-        } else {
-          focusManager.focusPrevious({tabbable: true});
-        }
-        break;
-      case 'ArrowRight':
-        e.preventDefault();
-        e.stopPropagation();
-        if (direction === 'rtl') {
-          focusManager.focusPrevious({tabbable: true});
-        } else {
-          focusManager.focusNext({tabbable: true});
-        }
-        break;
       case 'Enter':
         e.preventDefault();
         e.stopPropagation();
         if (segment.isPlaceholder && !state.isReadOnly) {
           state.confirmPlaceholder(segment.type);
         }
-        focusManager.focusNext({tabbable: true});
+        focusManager.focusNext();
         break;
       case 'Tab':
         break;
@@ -185,7 +166,7 @@ export function useDateSegment(segment: DateSegment, state: DatePickerFieldState
         } else {
           break;
         }
-        focusManager.focusNext({tabbable: true});
+        focusManager.focusNext();
         break;
       case 'day':
       case 'hour':
@@ -234,7 +215,7 @@ export function useDateSegment(segment: DateSegment, state: DatePickerFieldState
         if (Number(numberValue + '0') > segment.maxValue || newValue.length >= String(segment.maxValue).length) {
           enteredKeys.current = '';
           if (shouldSetValue) {
-            focusManager.focusNext({tabbable: true});
+            focusManager.focusNext();
           }
         } else {
           enteredKeys.current = newValue;
@@ -251,9 +232,11 @@ export function useDateSegment(segment: DateSegment, state: DatePickerFieldState
     // Safari requires that a selection is set or it won't fire input events.
     // Since usePress disables text selection, this won't happen by default.
     ref.current.style.webkitUserSelect = 'text';
+    ref.current.style.userSelect = 'text';
     let selection = window.getSelection();
     selection.collapse(ref.current);
-    ref.current.style.webkitUserSelect = '';
+    ref.current.style.webkitUserSelect = 'none';
+    ref.current.style.userSelect = 'none';
   };
 
   let compositionRef = useRef('');
@@ -301,22 +284,6 @@ export function useDateSegment(segment: DateSegment, state: DatePickerFieldState
     }
   });
 
-  // 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();
@@ -341,6 +308,14 @@ export function useDateSegment(segment: DateSegment, state: DatePickerFieldState
   let id = useId();
   let isEditable = !state.isDisabled && !state.isReadOnly && segment.isEditable;
 
+  // Prepend the label passed from the field to each segment name.
+  // This is needed because VoiceOver on iOS does not announce groups.
+  let name = segment.type === 'literal' ? '' : displayNames.of(segment.type);
+  let labelProps = useLabels({
+    'aria-label': (ariaLabel ? ariaLabel + ' ' : '') + name,
+    'aria-labelledby': ariaLabelledBy
+  });
+
   // Literal segments should not be visible to screen readers. We don't really need any of the above,
   // but the rules of hooks mean hooks cannot be conditional so we have to put this condition here.
   if (segment.type === 'literal') {
@@ -352,12 +327,10 @@ export function useDateSegment(segment: DateSegment, state: DatePickerFieldState
   }
 
   return {
-    segmentProps: mergeProps(spinButtonProps, pressProps, {
+    segmentProps: mergeProps(spinButtonProps, labelProps, {
       id,
       ...touchPropOverrides,
       'aria-invalid': state.validationState === 'invalid' ? 'true' : undefined,
-      'aria-label': displayNames.of(segment.type),
-      'aria-labelledby': `${ariaLabelledBy} ${id}`,
       'aria-describedby': ariaDescribedBy,
       'aria-placeholder': segment.isPlaceholder ? segment.text : undefined,
       'aria-readonly': state.isReadOnly || !segment.isEditable ? 'true' : undefined,
@@ -373,7 +346,16 @@ export function useDateSegment(segment: DateSegment, state: DatePickerFieldState
       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(() => {