@react-aria/datepicker 3.15.3 → 3.16.1

package/src/useDatePicker.ts

@@ -17,7 +17,7 @@ import {CalendarProps} from '@react-types/calendar';
 import {createFocusManager} from '@react-aria/focus';
 import {DatePickerState} from '@react-stately/datepicker';
 import {DOMAttributes, GroupDOMAttributes, KeyboardEvent, RefObject, ValidationResult} from '@react-types/shared';
-import {filterDOMProps, mergeProps, useDescription, useId} from '@react-aria/utils';
+import {filterDOMProps, mergeProps, nodeContains, useDescription, useId} from '@react-aria/utils';
 // @ts-ignore
 import intlMessages from '../intl/*.json';
 import {privateValidationStateProp} from '@react-stately/form';
@@ -84,7 +84,7 @@ export function useDatePicker<T extends DateValue>(props: AriaDatePickerProps<T>
     onBlurWithin: e => {
       // Ignore when focus moves into the popover.
       let dialog = document.getElementById(dialogId);
-      if (!dialog?.contains(e.relatedTarget)) {
+      if (!nodeContains(dialog, e.relatedTarget)) {
         isFocused.current = false;
         props.onBlur?.(e);
         props.onFocusChange?.(false);

package/src/useDatePickerGroup.ts

@@ -1,7 +1,7 @@
 import {createFocusManager, getFocusableTreeWalker} from '@react-aria/focus';
 import {DateFieldState, DatePickerState, DateRangePickerState} from '@react-stately/datepicker';
 import {DOMAttributes, FocusableElement, KeyboardEvent, RefObject} from '@react-types/shared';
-import {mergeProps} from '@react-aria/utils';
+import {getEventTarget, mergeProps, nodeContains} from '@react-aria/utils';
 import {useLocale} from '@react-aria/i18n';
 import {useMemo} from 'react';
 import {usePress} from '@react-aria/interactions';
@@ -12,7 +12,7 @@ export function useDatePickerGroup(state: DatePickerState | DateRangePickerState
 
   // Open the popover on alt + arrow down
   let onKeyDown = (e: KeyboardEvent) => {
-    if (!e.currentTarget.contains(e.target)) {
+    if (!nodeContains(e.currentTarget, getEventTarget(e) as Element)) {
       return;
     }
 
@@ -32,7 +32,7 @@ export function useDatePickerGroup(state: DatePickerState | DateRangePickerState
         e.stopPropagation();
         if (direction === 'rtl') {
           if (ref.current) {
-            let target = e.target as FocusableElement;
+            let target = getEventTarget(e) as FocusableElement;
             let prev = findNextSegment(ref.current, target.getBoundingClientRect().left, -1);
 
             if (prev) {
@@ -48,7 +48,7 @@ export function useDatePickerGroup(state: DatePickerState | DateRangePickerState
         e.stopPropagation();
         if (direction === 'rtl') {
           if (ref.current) {
-            let target = e.target as FocusableElement;
+            let target = getEventTarget(e) as FocusableElement;
             let next = findNextSegment(ref.current, target.getBoundingClientRect().left, 1);
 
             if (next) {
@@ -68,7 +68,7 @@ export function useDatePickerGroup(state: DatePickerState | DateRangePickerState
       return;
     }
     // Try to find the segment prior to the element that was clicked on.
-    let target = window.event?.target as FocusableElement;
+    let target = window.event ? getEventTarget(window.event) as FocusableElement : null;
     let walker = getFocusableTreeWalker(ref.current, {tabbable: true});
     if (target) {
       walker.currentNode = target;

package/src/useDateRangePicker.ts

@@ -18,7 +18,7 @@ import {DateRange, RangeCalendarProps} from '@react-types/calendar';
 import {DateRangePickerState} from '@react-stately/datepicker';
 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 {filterDOMProps, mergeProps, nodeContains, useDescription, useId} from '@react-aria/utils';
 import {focusManagerSymbol, roleSymbol} from './useDateField';
 // @ts-ignore
 import intlMessages from '../intl/*.json';
@@ -116,7 +116,7 @@ export function useDateRangePicker<T extends DateValue>(props: AriaDateRangePick
     onBlurWithin: e => {
       // Ignore when focus moves into the popover.
       let dialog = document.getElementById(dialogId);
-      if (!dialog?.contains(e.relatedTarget)) {
+      if (!nodeContains(dialog, e.relatedTarget)) {
         isFocused.current = false;
         props.onBlur?.(e);
         props.onFocusChange?.(false);

package/src/useDateSegment.ts

@@ -12,7 +12,7 @@
 
 import {CalendarDate, toCalendar} from '@internationalized/date';
 import {DateFieldState, DateSegment} from '@react-stately/datepicker';
-import {getScrollParent, isIOS, isMac, mergeProps, scrollIntoViewport, useEvent, useId, useLabels, useLayoutEffect} from '@react-aria/utils';
+import {getActiveElement, getScrollParent, isIOS, isMac, mergeProps, nodeContains, scrollIntoViewport, useEvent, useId, useLabels, useLayoutEffect} from '@react-aria/utils';
 import {hookData} from './useDateField';
 import {NumberParser} from '@internationalized/number';
 import React, {CSSProperties, useMemo, useRef} from 'react';
@@ -57,7 +57,7 @@ export function useDateSegment(segment: DateSegment, state: DateFieldState, ref:
     // 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,
+    value: segment.value ?? undefined,
     textValue,
     minValue: segment.minValue,
     maxValue: segment.maxValue,
@@ -82,15 +82,11 @@ export function useDateSegment(segment: DateSegment, state: DateFieldState, ref:
     },
     onIncrementToMax: () => {
       enteredKeys.current = '';
-      if (segment.maxValue !== undefined) {
-        state.setSegment(segment.type, segment.maxValue);
-      }
+      state.incrementToMax(segment.type);
     },
     onDecrementToMin: () => {
       enteredKeys.current = '';
-      if (segment.minValue !== undefined) {
-        state.setSegment(segment.type, segment.minValue);
-      }
+      state.decrementToMin(segment.type);
     }
   });
 
@@ -110,7 +106,7 @@ export function useDateSegment(segment: DateSegment, state: DateFieldState, ref:
         state.setSegment(segment.type, parsed);
       }
       enteredKeys.current = newValue;
-    } else if (segment.type === 'dayPeriod') {
+    } else if (segment.type === 'dayPeriod' || segment.type === 'era') {
       state.clearSegment(segment.type);
     }
   };
@@ -193,7 +189,7 @@ export function useDateSegment(segment: DateSegment, state: DateFieldState, ref:
         if (startsWith(am, key)) {
           state.setSegment('dayPeriod', 0);
         } else if (startsWith(pm, key)) {
-          state.setSegment('dayPeriod', 12);
+          state.setSegment('dayPeriod', 1);
         } else {
           break;
         }
@@ -219,26 +215,7 @@ export function useDateSegment(segment: DateSegment, state: DateFieldState, ref:
 
         let numberValue = parser.parse(newValue);
         let segmentValue = numberValue;
-        let allowsZero = segment.minValue === 0;
-        if (segment.type === 'hour' && state.dateFormatter.resolvedOptions().hour12) {
-          switch (state.dateFormatter.resolvedOptions().hourCycle) {
-            case 'h11':
-              if (numberValue > 11) {
-                segmentValue = parser.parse(key);
-              }
-              break;
-            case 'h12':
-              allowsZero = false;
-              if (numberValue > 12) {
-                segmentValue = parser.parse(key);
-              }
-              break;
-          }
-
-          if (segment.value !== undefined && segment.value >= 12 && numberValue > 1) {
-            numberValue += 12;
-          }
-        } else if (segment.maxValue !== undefined && numberValue > segment.maxValue) {
+        if (segment.maxValue !== undefined && numberValue > segment.maxValue) {
           segmentValue = parser.parse(key);
         }
 
@@ -246,16 +223,11 @@ export function useDateSegment(segment: DateSegment, state: DateFieldState, ref:
           return;
         }
 
-        let shouldSetValue = segmentValue !== 0 || allowsZero;
-        if (shouldSetValue) {
-          state.setSegment(segment.type, segmentValue);
-        }
+        state.setSegment(segment.type, segmentValue);
 
         if (segment.maxValue !== undefined && (Number(numberValue + '0') > segment.maxValue || newValue.length >= String(segment.maxValue).length)) {
           enteredKeys.current = '';
-          if (shouldSetValue) {
-            focusManager.focusNext();
-          }
+          focusManager.focusNext();
         } else {
           enteredKeys.current = newValue;
         }
@@ -281,7 +253,7 @@ export function useDateSegment(segment: DateSegment, state: DateFieldState, ref:
     // Otherwise, when tapping on a segment in Android Chrome and then entering text,
     // composition events will be fired that break the DOM structure and crash the page.
     let selection = window.getSelection();
-    if (selection?.anchorNode && ref.current?.contains(selection?.anchorNode)) {
+    if (selection?.anchorNode && nodeContains(ref.current, selection?.anchorNode)) {
       selection.collapse(ref.current);
     }
   });
@@ -339,7 +311,7 @@ export function useDateSegment(segment: DateSegment, state: DateFieldState, ref:
     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) {
+      if (getActiveElement() === element) {
         let prev = focusManager.focusPrevious();
         if (!prev) {
           focusManager.focusNext();