@react-aria/datepicker 3.1.2 → 3.2.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@react-aria/datepicker",
-  "version": "3.1.2",
+  "version": "3.2.1",
   "description": "Spectrum UI components in React",
   "license": "Apache-2.0",
   "main": "dist/main.js",
@@ -17,22 +17,22 @@
     "url": "https://github.com/adobe/react-spectrum"
   },
   "dependencies": {
-    "@babel/runtime": "^7.6.2",
-    "@internationalized/date": "^3.0.1",
-    "@internationalized/number": "^3.1.1",
-    "@internationalized/string": "^3.0.0",
-    "@react-aria/focus": "^3.9.0",
-    "@react-aria/i18n": "^3.6.1",
-    "@react-aria/interactions": "^3.12.0",
-    "@react-aria/label": "^3.4.2",
-    "@react-aria/spinbutton": "^3.1.4",
-    "@react-aria/utils": "^3.14.0",
-    "@react-stately/datepicker": "^3.1.0",
-    "@react-types/button": "^3.6.2",
-    "@react-types/calendar": "^3.0.3",
-    "@react-types/datepicker": "^3.1.2",
-    "@react-types/dialog": "^3.4.4",
-    "@react-types/shared": "^3.15.0"
+    "@internationalized/date": "^3.0.2",
+    "@internationalized/number": "^3.1.2",
+    "@internationalized/string": "^3.0.1",
+    "@react-aria/focus": "^3.10.1",
+    "@react-aria/i18n": "^3.6.3",
+    "@react-aria/interactions": "^3.13.1",
+    "@react-aria/label": "^3.4.4",
+    "@react-aria/spinbutton": "^3.2.1",
+    "@react-aria/utils": "^3.14.2",
+    "@react-stately/datepicker": "^3.2.1",
+    "@react-types/button": "^3.7.0",
+    "@react-types/calendar": "^3.0.5",
+    "@react-types/datepicker": "^3.1.4",
+    "@react-types/dialog": "^3.4.5",
+    "@react-types/shared": "^3.16.0",
+    "@swc/helpers": "^0.4.14"
   },
   "peerDependencies": {
     "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0",
@@ -41,5 +41,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "9202ef59e8c104dd06ffe33148445ef7932a5d1b"
+  "gitHead": "5480d76bd815e239366f92852c76b6831ad2a4fd"
 }

package/src/useDateField.ts

@@ -13,11 +13,11 @@
 import {AriaDatePickerProps, AriaTimeFieldProps, DateValue, TimeValue} from '@react-types/datepicker';
 import {createFocusManager, FocusManager} from '@react-aria/focus';
 import {DateFieldState} from '@react-stately/datepicker';
-import {DOMAttributes} from '@react-types/shared';
+import {DOMAttributes, KeyboardEvent} from '@react-types/shared';
 import {filterDOMProps, mergeProps, useDescription} from '@react-aria/utils';
+import {FocusEvent, RefObject, useEffect, useMemo, useRef} from 'react';
 // @ts-ignore
 import intlMessages from '../intl/*.json';
-import {RefObject, useEffect, useMemo, useRef} from 'react';
 import {useDatePickerGroup} from './useDatePickerGroup';
 import {useField} from '@react-aria/label';
 import {useFocusWithin} from '@react-aria/interactions';
@@ -64,9 +64,16 @@ export function useDateField<T extends DateValue>(props: AriaDateFieldProps<T>,
   });
 
   let {focusWithinProps} = useFocusWithin({
-    onBlurWithin() {
+    ...props,
+    onBlurWithin: (e: FocusEvent) => {
       state.confirmPlaceholder();
-    }
+
+      if (props.onBlur) {
+        props.onBlur(e);
+      }
+    },
+    onFocusWithin: props.onFocus,
+    onFocusWithinChange: props.onFocusChange
   });
 
   let stringFormatter = useLocalizedStringFormatter(intlMessages);
@@ -126,7 +133,18 @@ export function useDateField<T extends DateValue>(props: AriaDateFieldProps<T>,
         focusManager.focusFirst();
       }
     },
-    fieldProps: mergeProps(domProps, fieldDOMProps, groupProps, focusWithinProps),
+    fieldProps: mergeProps(domProps, fieldDOMProps, groupProps, focusWithinProps, {
+      onKeyDown(e: KeyboardEvent) {
+        if (props.onKeyDown) {
+          props.onKeyDown(e);
+        }
+      },
+      onKeyUp(e: KeyboardEvent) {
+        if (props.onKeyUp) {
+          props.onKeyUp(e);
+        }
+      }
+    }),
     descriptionProps,
     errorMessageProps
   };

package/src/useDatePicker.ts

@@ -16,7 +16,7 @@ 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 {DOMAttributes} from '@react-types/shared';
+import {DOMAttributes, KeyboardEvent} from '@react-types/shared';
 import {filterDOMProps, mergeProps, useDescription, useId} from '@react-aria/utils';
 // @ts-ignore
 import intlMessages from '../intl/*.json';
@@ -24,6 +24,7 @@ import {RefObject, useMemo} from 'react';
 import {roleSymbol} from './useDateField';
 import {useDatePickerGroup} from './useDatePickerGroup';
 import {useField} from '@react-aria/label';
+import {useFocusWithin} from '@react-aria/interactions';
 import {useLocale, useLocalizedStringFormatter} from '@react-aria/i18n';
 
 export interface DatePickerAria {
@@ -71,12 +72,38 @@ export function useDatePicker<T extends DateValue>(props: AriaDatePickerProps<T>
   let domProps = filterDOMProps(props);
   let focusManager = useMemo(() => createFocusManager(ref), [ref]);
 
+  let {focusWithinProps} = useFocusWithin({
+    ...props,
+    isDisabled: state.isOpen,
+    onBlurWithin: props.onBlur,
+    onFocusWithin: props.onFocus,
+    onFocusWithinChange: props.onFocusChange
+  });
+
   return {
-    groupProps: mergeProps(domProps, groupProps, fieldProps, descProps, {
+    groupProps: mergeProps(domProps, groupProps, fieldProps, descProps, focusWithinProps, {
       role: 'group',
       'aria-disabled': props.isDisabled || null,
       'aria-labelledby': labelledBy,
-      '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,

package/src/useDateRangePicker.ts

@@ -15,7 +15,7 @@ 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 {DOMAttributes} from '@react-types/shared';
+import {DOMAttributes, KeyboardEvent} from '@react-types/shared';
 import {filterDOMProps, mergeProps, useDescription, useId} from '@react-aria/utils';
 import {focusManagerSymbol, roleSymbol} from './useDateField';
 // @ts-ignore
@@ -24,6 +24,7 @@ import {RangeCalendarProps} from '@react-types/calendar';
 import {RefObject, useMemo} from 'react';
 import {useDatePickerGroup} from './useDatePickerGroup';
 import {useField} from '@react-aria/label';
+import {useFocusWithin} from '@react-aria/interactions';
 import {useLocale, useLocalizedStringFormatter} from '@react-aria/i18n';
 
 export interface DateRangePickerAria {
@@ -105,11 +106,37 @@ export function useDateRangePicker<T extends DateValue>(props: AriaDateRangePick
 
   let domProps = filterDOMProps(props);
 
+  let {focusWithinProps} = useFocusWithin({
+    ...props,
+    isDisabled: state.isOpen,
+    onBlurWithin: props.onBlur,
+    onFocusWithin: props.onFocus,
+    onFocusWithinChange: props.onFocusChange
+  });
+
   return {
-    groupProps: mergeProps(domProps, groupProps, fieldProps, descProps, {
+    groupProps: mergeProps(domProps, groupProps, fieldProps, descProps, focusWithinProps, {
       role: 'group',
       '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,