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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@react-aria/datepicker",
-  "version": "3.0.0-nightly.3180+0bba35ae3",
+  "version": "3.0.0",
   "description": "Spectrum UI components in React",
   "license": "Apache-2.0",
   "main": "dist/main.js",
@@ -18,27 +18,28 @@
   },
   "dependencies": {
     "@babel/runtime": "^7.6.2",
-    "@internationalized/message": "3.0.6-nightly.3180+0bba35ae3",
-    "@internationalized/number": "3.0.6-nightly.3180+0bba35ae3",
-    "@react-aria/focus": "3.0.0-nightly.1481+0bba35ae3",
-    "@react-aria/i18n": "3.0.0-nightly.1481+0bba35ae3",
-    "@react-aria/interactions": "3.0.0-nightly.1481+0bba35ae3",
-    "@react-aria/label": "3.0.0-nightly.1481+0bba35ae3",
-    "@react-aria/spinbutton": "3.0.0-nightly.1481+0bba35ae3",
-    "@react-aria/utils": "3.0.0-nightly.1481+0bba35ae3",
-    "@react-stately/datepicker": "3.0.0-nightly.3180+0bba35ae3",
-    "@react-types/button": "3.4.5-nightly.3180+0bba35ae3",
-    "@react-types/calendar": "3.0.0-nightly.3180+0bba35ae3",
-    "@react-types/datepicker": "3.0.0-nightly.3180+0bba35ae3",
-    "@react-types/dialog": "3.3.5-nightly.3180+0bba35ae3",
-    "@react-types/shared": "3.0.0-nightly.1481+0bba35ae3"
+    "@internationalized/date": "^3.0.0",
+    "@internationalized/message": "^3.0.8",
+    "@internationalized/number": "^3.1.1",
+    "@react-aria/focus": "^3.6.1",
+    "@react-aria/i18n": "^3.4.1",
+    "@react-aria/interactions": "^3.9.1",
+    "@react-aria/label": "^3.3.1",
+    "@react-aria/spinbutton": "^3.1.1",
+    "@react-aria/utils": "^3.13.1",
+    "@react-stately/datepicker": "^3.0.0",
+    "@react-types/button": "^3.5.1",
+    "@react-types/calendar": "^3.0.0",
+    "@react-types/datepicker": "^3.0.0",
+    "@react-types/dialog": "^3.4.1",
+    "@react-types/shared": "^3.13.1"
   },
   "peerDependencies": {
-    "react": "^16.8.0 || ^17.0.0-rc.1",
-    "react-dom": "^16.8.0 || ^17.0.0-rc.1"
+    "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0",
+    "react-dom": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0"
   },
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "0bba35ae36b5d220570385215860d3ca3b549656"
+  "gitHead": "715c3f563ccf8c2e0102d3e18403d9db21a05a71"
 }

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,21 +56,23 @@ 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'
   });
 
-  let groupProps = useDatePickerGroup(state, ref);
-
   let {focusWithinProps} = useFocusWithin({
     onBlurWithin() {
       state.confirmPlaceholder();
     }
   });
 
-  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.
@@ -76,6 +81,7 @@ export function useDateField<T extends DateValue>(props: DateFieldProps<T>, stat
     : [descProps['aria-describedby'], fieldProps['aria-describedby']].filter(Boolean).join(' ') || undefined;
   let propsFocusManager = props[focusManagerSymbol];
   let focusManager = useMemo(() => propsFocusManager || createFocusManager(ref), [propsFocusManager, ref]);
+  let groupProps = useDatePickerGroup(state, ref, props[roleSymbol] === 'presentation');
 
   // Pass labels and other information to segments.
   hookData.set(state, {
@@ -111,6 +117,7 @@ export function useDateField<T extends DateValue>(props: DateFieldProps<T>, stat
     autoFocusRef.current = false;
   }, [focusManager]);
 
+  let domProps = filterDOMProps(props);
   return {
     labelProps: {
       ...labelProps,
@@ -118,7 +125,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 {HTMLAttributes, RefObject} from 'react';
+import {filterDOMProps, mergeProps, useDescription, useId} from '@react-aria/utils';
+import {HTMLAttributes, RefObject, useMemo} 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,15 @@ 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);
+  let focusManager = useMemo(() => createFocusManager(ref), [ref]);
 
   return {
-    groupProps: mergeProps(groupProps, fieldProps, descProps, {
+    groupProps: mergeProps(domProps, groupProps, fieldProps, descProps, {
       role: 'group',
       'aria-disabled': props.isDisabled || null,
       'aria-labelledby': labelledBy,
@@ -76,7 +80,6 @@ export function useDatePicker<T extends DateValue>(props: AriaDatePickerProps<T>
     labelProps: {
       ...labelProps,
       onClick: () => {
-        let focusManager = createFocusManager(ref);
         focusManager.focusFirst();
       }
     },
@@ -103,7 +106,6 @@ export function useDatePicker<T extends DateValue>(props: AriaDatePickerProps<T>
     buttonProps: {
       ...descProps,
       id: buttonId,
-      excludeFromTabOrder: true,
       'aria-haspopup': 'dialog',
       'aria-label': formatMessage('calendar'),
       'aria-labelledby': `${labelledBy} ${buttonId}`,
@@ -123,7 +125,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/useDatePickerGroup.ts

@@ -1,11 +1,15 @@
+import {createFocusManager, getFocusableTreeWalker} from '@react-aria/focus';
 import {DateFieldState, DatePickerState, DateRangePickerState} from '@react-stately/datepicker';
-import {getFocusableTreeWalker} from '@react-aria/focus';
 import {KeyboardEvent} from '@react-types/shared';
 import {mergeProps} from '@react-aria/utils';
-import {RefObject} from 'react';
+import {RefObject, useMemo} from 'react';
+import {useLocale} from '@react-aria/i18n';
 import {usePress} from '@react-aria/interactions';
 
-export function useDatePickerGroup(state: DatePickerState | DateRangePickerState | DateFieldState, ref: RefObject<HTMLElement>) {
+export function useDatePickerGroup(state: DatePickerState | DateRangePickerState | DateFieldState, ref: RefObject<HTMLElement>, 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' || e.key === 'ArrowUp') && 'setOpen' in state) {
@@ -13,6 +17,31 @@ export function useDatePickerGroup(state: DatePickerState | DateRangePickerState
       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.
@@ -37,9 +66,9 @@ export function useDatePickerGroup(state: DatePickerState | DateRangePickerState
     }
 
     // Now go backwards until we find an element that is not a placeholder.
-    while (target?.getAttribute('aria-placeholder')) {
+    while (target?.hasAttribute('data-placeholder')) {
       let prev = walker.previousNode() as HTMLElement;
-      if (prev && prev.getAttribute('aria-placeholder')) {
+      if (prev && prev.hasAttribute('data-placeholder')) {
         target = prev;
       } else {
         break;

package/src/useDateRangePicker.ts

@@ -15,18 +15,17 @@ 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 +61,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 = {
@@ -79,14 +79,13 @@ export function useDateRangePicker<T extends DateValue>(props: AriaDateRangePick
   let dialogId = useId();
 
   let groupProps = useDatePickerGroup(state, ref);
-  let {focusWithinProps} = useFocusWithin({
-    onBlurWithin() {
-      state.confirmPlaceholder();
-    }
-  });
 
   let ariaDescribedBy = [descProps['aria-describedby'], fieldProps['aria-describedby']].filter(Boolean).join(' ') || undefined;
-  let focusManager = useMemo(() => createFocusManager(ref), [ref]);
+  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',
@@ -103,8 +102,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, {
       role: 'group',
       'aria-disabled': props.isDisabled || null,
       'aria-describedby': ariaDescribedBy
@@ -118,7 +119,6 @@ export function useDateRangePicker<T extends DateValue>(props: AriaDateRangePick
     buttonProps: {
       ...descProps,
       id: buttonId,
-      excludeFromTabOrder: true,
       'aria-haspopup': 'dialog',
       'aria-label': formatMessage('calendar'),
       'aria-labelledby': `${labelledBy} ${buttonId}`,
@@ -154,7 +154,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

@@ -10,17 +10,17 @@
  * governing permissions and limitations under the License.
  */
 
+import {CalendarDate, toCalendar} from '@internationalized/date';
 import {DateFieldState, DateSegment} from '@react-stately/datepicker';
-import {getScrollParent, isIOS, isMac, mergeProps, scrollIntoView, useEvent, useId, useLabels} from '@react-aria/utils';
+import {getScrollParent, isIOS, isMac, mergeProps, scrollIntoView, useEvent, useId, useLabels, useLayoutEffect} 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>
 }
@@ -32,11 +32,11 @@ interface 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 {ariaLabel, ariaLabelledBy, ariaDescribedBy, focusManager} = hookData.get(state);
 
-  let textValue = segment.text;
+  let textValue = segment.isPlaceholder ? '' : segment.text;
   let options = useMemo(() => state.dateFormatter.resolvedOptions(), [state.dateFormatter]);
   let monthDateFormatter = useDateFormatter({month: 'long', timeZone: options.timeZone});
   let hourDateFormatter = useDateFormatter({
@@ -45,14 +45,17 @@ export function useDateSegment(segment: DateSegment, state: DateFieldState, ref:
     timeZone: options.timeZone
   });
 
-  if (segment.type === 'month') {
+  if (segment.type === 'month' && !segment.isPlaceholder) {
     let monthTextValue = monthDateFormatter.format(state.dateValue);
     textValue = monthTextValue !== textValue ? `${textValue} – ${monthTextValue}` : monthTextValue;
-  } else if (segment.type === 'hour') {
+  } else if (segment.type === 'hour' && !segment.isPlaceholder) {
     textValue = hourDateFormatter.format(state.dateValue);
   }
 
   let {spinButtonProps} = useSpinButton({
+    // The ARIA spec says aria-valuenow is optional if there's no value, but aXe seems to require it.
+    // This doesn't seem to have any negative effects with real AT since we also use aria-valuetext.
+    // https://github.com/dequelabs/axe-core/issues/3505
     value: segment.value,
     textValue,
     minValue: segment.minValue,
@@ -115,34 +118,6 @@ export function useDateSegment(segment: DateSegment, state: DateFieldState, ref:
     }
 
     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});
-        break;
-      case 'Tab':
-        break;
       case 'Backspace':
       case 'Delete': {
         // Safari on iOS does not fire beforeinput for the backspace key because the cursor is at the start.
@@ -169,6 +144,34 @@ export function useDateSegment(segment: DateSegment, state: DateFieldState, ref:
     return amPmFormatter.formatToParts(date).find(part => part.type === 'dayPeriod').value;
   }, [amPmFormatter]);
 
+  // Get a list of formatted era names so users can type the first character to choose one.
+  let eraFormatter = useDateFormatter({year: 'numeric', era: 'narrow', timeZone: 'UTC'});
+  let eras = useMemo(() => {
+    if (segment.type !== 'era') {
+      return [];
+    }
+
+    let date = toCalendar(new CalendarDate(1, 1, 1), state.calendar);
+    let eras = state.calendar.getEras().map(era => {
+      let eraDate = date.set({year: 1, month: 1, day: 1, era}).toDate('UTC');
+      let parts = eraFormatter.formatToParts(eraDate);
+      let formatted = parts.find(p => p.type === 'era').value;
+      return {era, formatted};
+    });
+
+    // Remove the common prefix from formatted values. This is so that in calendars with eras like
+    // ERA0 and ERA1 (e.g. Ethiopic), users can press "0" and "1" to select an era. In other cases,
+    // the first letter is used.
+    let prefixLength = commonPrefixLength(eras.map(era => era.formatted));
+    if (prefixLength) {
+      for (let era of eras) {
+        era.formatted = era.formatted.slice(prefixLength);
+      }
+    }
+
+    return eras;
+  }, [eraFormatter, state.calendar, segment.type]);
+
   let onInput = (key: string) => {
     if (state.isDisabled || state.isReadOnly) {
       return;
@@ -185,8 +188,16 @@ export function useDateSegment(segment: DateSegment, state: DateFieldState, ref:
         } else {
           break;
         }
-        focusManager.focusNext({tabbable: true});
+        focusManager.focusNext();
+        break;
+      case 'era': {
+        let matched = eras.find(e => startsWith(e.formatted, key));
+        if (matched) {
+          state.setSegment('era', matched.era);
+          focusManager.focusNext();
+        }
         break;
+      }
       case 'day':
       case 'hour':
       case 'minute':
@@ -234,7 +245,7 @@ export function useDateSegment(segment: DateSegment, state: DateFieldState, ref:
         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;
@@ -248,12 +259,9 @@ export function useDateSegment(segment: DateSegment, state: DateFieldState, ref:
     enteredKeys.current = '';
     scrollIntoView(getScrollParent(ref.current) as HTMLElement, ref.current);
 
-    // 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';
+    // Collapse selection to start or Chrome won't fire input events.
     let selection = window.getSelection();
     selection.collapse(ref.current);
-    ref.current.style.webkitUserSelect = '';
   };
 
   let compositionRef = useRef('');
@@ -301,26 +309,18 @@ 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();
+  useLayoutEffect(() => {
+    let element = ref.current;
+    return () => {
+      // If the focused segment is removed, focus the previous one, or the next one if there was no previous one.
+      if (document.activeElement === element) {
+        let prev = focusManager.focusPrevious();
+        if (!prev) {
+          focusManager.focusNext();
+        }
       }
-    }
-  });
-
-  // For Android: prevent selection on long press.
-  useEvent(ref, 'selectstart', e => {
-    e.preventDefault();
-  });
+    };
+  }, [ref, focusManager]);
 
   // spinbuttons cannot be focused with VoiceOver on iOS.
   let touchPropOverrides = isIOS() || segment.type === 'timeZoneName' ? {
@@ -360,13 +360,13 @@ 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,
       'aria-describedby': ariaDescribedBy,
-      'aria-placeholder': segment.isPlaceholder ? segment.text : undefined,
       'aria-readonly': state.isReadOnly || !segment.isEditable ? 'true' : undefined,
+      'data-placeholder': segment.isPlaceholder || undefined,
       contentEditable: isEditable,
       suppressContentEditableWarning: isEditable,
       spellCheck: isEditable ? 'false' : undefined,
@@ -374,13 +374,33 @@ export function useDateSegment(segment: DateSegment, state: DateFieldState, ref:
       autoCorrect: isEditable ? 'off' : undefined,
       // Capitalization was changed in React 17...
       [parseInt(React.version, 10) >= 17 ? 'enterKeyHint' : 'enterkeyhint']: isEditable ? 'next' : undefined,
-      inputMode: state.isDisabled || segment.type === 'dayPeriod' || !isEditable ? undefined : 'numeric',
+      inputMode: state.isDisabled || segment.type === 'dayPeriod' || segment.type === 'era' || !isEditable ? undefined : 'numeric',
       tabIndex: state.isDisabled ? undefined : 0,
       onKeyDown,
       onFocus,
       style: {
         caretColor: 'transparent'
+      },
+      // Prevent pointer events from reaching useDatePickerGroup, and allow native browser behavior to focus the segment.
+      onPointerDown(e) {
+        e.stopPropagation();
+      },
+      onMouseDown(e) {
+        e.stopPropagation();
       }
     })
   };
 }
+
+function commonPrefixLength(strings: string[]): number {
+  // Sort the strings, and compare the characters in the first and last to find the common prefix.
+  strings.sort();
+  let first = strings[0];
+  let last = strings[strings.length - 1];
+  for (let i = 0; i < first.length; i++) {
+    if (first[i] !== last[i]) {
+      return i;
+    }
+  }
+  return 0;
+}

package/src/useDisplayNames.ts

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