@react-aria/datepicker 3.0.0-nightly.3113 → 3.0.0-nightly.3114

package/dist/zh-CN.module.js

@@ -0,0 +1,23 @@
+var $51078838e1b16cd7$exports = {};
+$51078838e1b16cd7$exports = {
+    "calendar": `\u{65E5}\u{5386}`,
+    "day": `\u{65E5}`,
+    "dayPeriod": `\u{4E0A}\u{5348}/\u{4E0B}\u{5348}`,
+    "endDate": `\u{7ED3}\u{675F}\u{65E5}\u{671F}`,
+    "era": `\u{7EAA}\u{5143}`,
+    "hour": `\u{5C0F}\u{65F6}`,
+    "minute": `\u{5206}\u{949F}`,
+    "month": `\u{6708}`,
+    "second": `\u{79D2}`,
+    "selectedDateDescription": (args)=>`\u{9009}\u{5B9A}\u{7684}\u{65E5}\u{671F}\u{FF1A}${args.date}`,
+    "selectedRangeDescription": (args)=>`\u{9009}\u{5B9A}\u{7684}\u{8303}\u{56F4}\u{FF1A}${args.startDate} \u{81F3} ${args.endDate}`,
+    "selectedTimeDescription": (args)=>`\u{9009}\u{5B9A}\u{7684}\u{65F6}\u{95F4}\u{FF1A}${args.time}`,
+    "startDate": `\u{5F00}\u{59CB}\u{65E5}\u{671F}`,
+    "timeZoneName": `\u{65F6}\u{533A}`,
+    "weekday": `\u{5DE5}\u{4F5C}\u{65E5}`,
+    "year": `\u{5E74}`
+};
+
+
+export {$51078838e1b16cd7$exports as default};
+//# sourceMappingURL=zh-CN.module.js.map

package/dist/zh-CN.module.js.map

@@ -0,0 +1 @@
+{"mappings":";AAAA,4BAAiB;IAAG,YAAY,CAAC,gBAAE,CAAC;IAClC,OAAO,CAAC,QAAC,CAAC;IACV,aAAa,CAAC,iCAAK,CAAC;IACpB,WAAW,CAAC,gCAAI,CAAC;IACjB,OAAO,CAAC,gBAAE,CAAC;IACX,QAAQ,CAAC,gBAAE,CAAC;IACZ,UAAU,CAAC,gBAAE,CAAC;IACd,SAAS,CAAC,QAAC,CAAC;IACZ,UAAU,CAAC,QAAC,CAAC;IACb,2BAA2B,CAAC,OAAS,CAAC,gDAAM,EAAE,KAAK,IAAI,CAAC,CAAC;IACzD,4BAA4B,CAAC,OAAS,CAAC,gDAAM,EAAE,KAAK,SAAS,CAAC,UAAG,EAAE,KAAK,OAAO,CAAC,CAAC;IACjF,2BAA2B,CAAC,OAAS,CAAC,gDAAM,EAAE,KAAK,IAAI,CAAC,CAAC;IACzD,aAAa,CAAC,gCAAI,CAAC;IACnB,gBAAgB,CAAC,gBAAE,CAAC;IACpB,WAAW,CAAC,wBAAG,CAAC;IAChB,QAAQ,CAAC,QAAC,CAAC;AACb","sources":["packages/@react-aria/datepicker/intl/zh-CN.json"],"sourcesContent":["{\n  \"calendar\": \"日历\",\n  \"day\": \"日\",\n  \"dayPeriod\": \"上午/下午\",\n  \"endDate\": \"结束日期\",\n  \"era\": \"纪元\",\n  \"hour\": \"小时\",\n  \"minute\": \"分钟\",\n  \"month\": \"月\",\n  \"second\": \"秒\",\n  \"selectedDateDescription\": \"选定的日期：{date}\",\n  \"selectedRangeDescription\": \"选定的范围：{startDate} 至 {endDate}\",\n  \"selectedTimeDescription\": \"选定的时间：{time}\",\n  \"startDate\": \"开始日期\",\n  \"timeZoneName\": \"时区\",\n  \"weekday\": \"工作日\",\n  \"year\": \"年\"\n}\n"],"names":[],"version":3,"file":"zh-CN.module.js.map"}

package/dist/zh-TW.main.js

@@ -0,0 +1,21 @@
+module.exports = {
+    "calendar": `\u{65E5}\u{66C6}`,
+    "day": `\u{65E5}`,
+    "dayPeriod": `\u{4E0A}\u{5348}/\u{4E0B}\u{5348}`,
+    "endDate": `\u{7D50}\u{675F}\u{65E5}\u{671F}`,
+    "era": `\u{7EAA}\u{5143}`,
+    "hour": `\u{5C0F}\u{65F6}`,
+    "minute": `\u{5206}\u{949F}`,
+    "month": `\u{6708}`,
+    "second": `\u{79D2}`,
+    "selectedDateDescription": (args)=>`\u{9078}\u{5B9A}\u{7684}\u{65E5}\u{671F}\u{FF1A}${args.date}`,
+    "selectedRangeDescription": (args)=>`\u{9078}\u{5B9A}\u{7684}\u{7BC4}\u{570D}\u{FF1A}${args.startDate} \u{81F3} ${args.endDate}`,
+    "selectedTimeDescription": (args)=>`\u{9078}\u{5B9A}\u{7684}\u{6642}\u{9593}\u{FF1A}${args.time}`,
+    "startDate": `\u{958B}\u{59CB}\u{65E5}\u{671F}`,
+    "timeZoneName": `\u{65F6}\u{533A}`,
+    "weekday": `\u{5DE5}\u{4F5C}\u{65E5}`,
+    "year": `\u{5E74}`
+};
+
+
+//# sourceMappingURL=zh-TW.main.js.map

package/dist/zh-TW.main.js.map

@@ -0,0 +1 @@
+{"mappings":"AAAA,iBAAiB;IAAG,YAAY,CAAC,gBAAE,CAAC;IAClC,OAAO,CAAC,QAAC,CAAC;IACV,aAAa,CAAC,iCAAK,CAAC;IACpB,WAAW,CAAC,gCAAI,CAAC;IACjB,OAAO,CAAC,gBAAE,CAAC;IACX,QAAQ,CAAC,gBAAE,CAAC;IACZ,UAAU,CAAC,gBAAE,CAAC;IACd,SAAS,CAAC,QAAC,CAAC;IACZ,UAAU,CAAC,QAAC,CAAC;IACb,2BAA2B,CAAC,OAAS,CAAC,gDAAM,EAAE,KAAK,IAAI,CAAC,CAAC;IACzD,4BAA4B,CAAC,OAAS,CAAC,gDAAM,EAAE,KAAK,SAAS,CAAC,UAAG,EAAE,KAAK,OAAO,CAAC,CAAC;IACjF,2BAA2B,CAAC,OAAS,CAAC,gDAAM,EAAE,KAAK,IAAI,CAAC,CAAC;IACzD,aAAa,CAAC,gCAAI,CAAC;IACnB,gBAAgB,CAAC,gBAAE,CAAC;IACpB,WAAW,CAAC,wBAAG,CAAC;IAChB,QAAQ,CAAC,QAAC,CAAC;AACb","sources":["packages/@react-aria/datepicker/intl/zh-TW.json"],"sourcesContent":["{\n  \"calendar\": \"日曆\",\n  \"day\": \"日\",\n  \"dayPeriod\": \"上午/下午\",\n  \"endDate\": \"結束日期\",\n  \"era\": \"纪元\",\n  \"hour\": \"小时\",\n  \"minute\": \"分钟\",\n  \"month\": \"月\",\n  \"second\": \"秒\",\n  \"selectedDateDescription\": \"選定的日期：{date}\",\n  \"selectedRangeDescription\": \"選定的範圍：{startDate} 至 {endDate}\",\n  \"selectedTimeDescription\": \"選定的時間：{time}\",\n  \"startDate\": \"開始日期\",\n  \"timeZoneName\": \"时区\",\n  \"weekday\": \"工作日\",\n  \"year\": \"年\"\n}\n"],"names":[],"version":3,"file":"zh-TW.main.js.map"}

package/dist/zh-TW.mjs

@@ -0,0 +1,23 @@
+var $33fab8219207655a$exports = {};
+$33fab8219207655a$exports = {
+    "calendar": `\u{65E5}\u{66C6}`,
+    "day": `\u{65E5}`,
+    "dayPeriod": `\u{4E0A}\u{5348}/\u{4E0B}\u{5348}`,
+    "endDate": `\u{7D50}\u{675F}\u{65E5}\u{671F}`,
+    "era": `\u{7EAA}\u{5143}`,
+    "hour": `\u{5C0F}\u{65F6}`,
+    "minute": `\u{5206}\u{949F}`,
+    "month": `\u{6708}`,
+    "second": `\u{79D2}`,
+    "selectedDateDescription": (args)=>`\u{9078}\u{5B9A}\u{7684}\u{65E5}\u{671F}\u{FF1A}${args.date}`,
+    "selectedRangeDescription": (args)=>`\u{9078}\u{5B9A}\u{7684}\u{7BC4}\u{570D}\u{FF1A}${args.startDate} \u{81F3} ${args.endDate}`,
+    "selectedTimeDescription": (args)=>`\u{9078}\u{5B9A}\u{7684}\u{6642}\u{9593}\u{FF1A}${args.time}`,
+    "startDate": `\u{958B}\u{59CB}\u{65E5}\u{671F}`,
+    "timeZoneName": `\u{65F6}\u{533A}`,
+    "weekday": `\u{5DE5}\u{4F5C}\u{65E5}`,
+    "year": `\u{5E74}`
+};
+
+
+export {$33fab8219207655a$exports as default};
+//# sourceMappingURL=zh-TW.module.js.map

package/dist/zh-TW.module.js

@@ -0,0 +1,23 @@
+var $33fab8219207655a$exports = {};
+$33fab8219207655a$exports = {
+    "calendar": `\u{65E5}\u{66C6}`,
+    "day": `\u{65E5}`,
+    "dayPeriod": `\u{4E0A}\u{5348}/\u{4E0B}\u{5348}`,
+    "endDate": `\u{7D50}\u{675F}\u{65E5}\u{671F}`,
+    "era": `\u{7EAA}\u{5143}`,
+    "hour": `\u{5C0F}\u{65F6}`,
+    "minute": `\u{5206}\u{949F}`,
+    "month": `\u{6708}`,
+    "second": `\u{79D2}`,
+    "selectedDateDescription": (args)=>`\u{9078}\u{5B9A}\u{7684}\u{65E5}\u{671F}\u{FF1A}${args.date}`,
+    "selectedRangeDescription": (args)=>`\u{9078}\u{5B9A}\u{7684}\u{7BC4}\u{570D}\u{FF1A}${args.startDate} \u{81F3} ${args.endDate}`,
+    "selectedTimeDescription": (args)=>`\u{9078}\u{5B9A}\u{7684}\u{6642}\u{9593}\u{FF1A}${args.time}`,
+    "startDate": `\u{958B}\u{59CB}\u{65E5}\u{671F}`,
+    "timeZoneName": `\u{65F6}\u{533A}`,
+    "weekday": `\u{5DE5}\u{4F5C}\u{65E5}`,
+    "year": `\u{5E74}`
+};
+
+
+export {$33fab8219207655a$exports as default};
+//# sourceMappingURL=zh-TW.module.js.map

package/dist/zh-TW.module.js.map

@@ -0,0 +1 @@
+{"mappings":";AAAA,4BAAiB;IAAG,YAAY,CAAC,gBAAE,CAAC;IAClC,OAAO,CAAC,QAAC,CAAC;IACV,aAAa,CAAC,iCAAK,CAAC;IACpB,WAAW,CAAC,gCAAI,CAAC;IACjB,OAAO,CAAC,gBAAE,CAAC;IACX,QAAQ,CAAC,gBAAE,CAAC;IACZ,UAAU,CAAC,gBAAE,CAAC;IACd,SAAS,CAAC,QAAC,CAAC;IACZ,UAAU,CAAC,QAAC,CAAC;IACb,2BAA2B,CAAC,OAAS,CAAC,gDAAM,EAAE,KAAK,IAAI,CAAC,CAAC;IACzD,4BAA4B,CAAC,OAAS,CAAC,gDAAM,EAAE,KAAK,SAAS,CAAC,UAAG,EAAE,KAAK,OAAO,CAAC,CAAC;IACjF,2BAA2B,CAAC,OAAS,CAAC,gDAAM,EAAE,KAAK,IAAI,CAAC,CAAC;IACzD,aAAa,CAAC,gCAAI,CAAC;IACnB,gBAAgB,CAAC,gBAAE,CAAC;IACpB,WAAW,CAAC,wBAAG,CAAC;IAChB,QAAQ,CAAC,QAAC,CAAC;AACb","sources":["packages/@react-aria/datepicker/intl/zh-TW.json"],"sourcesContent":["{\n  \"calendar\": \"日曆\",\n  \"day\": \"日\",\n  \"dayPeriod\": \"上午/下午\",\n  \"endDate\": \"結束日期\",\n  \"era\": \"纪元\",\n  \"hour\": \"小时\",\n  \"minute\": \"分钟\",\n  \"month\": \"月\",\n  \"second\": \"秒\",\n  \"selectedDateDescription\": \"選定的日期：{date}\",\n  \"selectedRangeDescription\": \"選定的範圍：{startDate} 至 {endDate}\",\n  \"selectedTimeDescription\": \"選定的時間：{time}\",\n  \"startDate\": \"開始日期\",\n  \"timeZoneName\": \"时区\",\n  \"weekday\": \"工作日\",\n  \"year\": \"年\"\n}\n"],"names":[],"version":3,"file":"zh-TW.module.js.map"}

package/package.json

@@ -1,10 +1,15 @@
 {
   "name": "@react-aria/datepicker",
-  "version": "3.0.0-nightly.3113+404d41859",
+  "version": "3.0.0-nightly.3114+68403fe55",
   "description": "Spectrum UI components in React",
   "license": "Apache-2.0",
   "main": "dist/main.js",
   "module": "dist/module.js",
+  "exports": {
+    "types": "./dist/types.d.ts",
+    "import": "./dist/import.mjs",
+    "require": "./dist/main.js"
+  },
   "types": "dist/types.d.ts",
   "source": "src/index.ts",
   "files": [
@@ -17,27 +22,31 @@
     "url": "https://github.com/adobe/react-spectrum"
   },
   "dependencies": {
-    "@babel/runtime": "^7.6.2",
-    "@internationalized/message": "3.0.6-nightly.3113+404d41859",
-    "@internationalized/number": "3.0.6-nightly.3113+404d41859",
-    "@react-aria/focus": "3.0.0-nightly.1417+404d41859",
-    "@react-aria/i18n": "3.0.0-nightly.1417+404d41859",
-    "@react-aria/interactions": "3.0.0-nightly.1417+404d41859",
-    "@react-aria/label": "3.0.0-nightly.1417+404d41859",
-    "@react-aria/spinbutton": "3.0.0-nightly.1417+404d41859",
-    "@react-aria/utils": "3.0.0-nightly.1417+404d41859",
-    "@react-stately/datepicker": "3.0.0-nightly.3113+404d41859",
-    "@react-types/button": "3.4.4-nightly.3113+404d41859",
-    "@react-types/datepicker": "3.0.0-nightly.3113+404d41859",
-    "@react-types/dialog": "3.3.4-nightly.3113+404d41859",
-    "@react-types/shared": "3.0.0-nightly.1417+404d41859"
+    "@internationalized/date": "3.5.6-nightly.5042+68403fe55",
+    "@internationalized/number": "3.5.4-nightly.5042+68403fe55",
+    "@internationalized/string": "3.2.4-nightly.5042+68403fe55",
+    "@react-aria/focus": "3.0.0-nightly.3114+68403fe55",
+    "@react-aria/form": "3.0.9-nightly.5042+68403fe55",
+    "@react-aria/i18n": "3.0.0-nightly.3114+68403fe55",
+    "@react-aria/interactions": "3.0.0-nightly.3114+68403fe55",
+    "@react-aria/label": "3.0.0-nightly.3114+68403fe55",
+    "@react-aria/spinbutton": "3.0.0-nightly.3114+68403fe55",
+    "@react-aria/utils": "3.0.0-nightly.3114+68403fe55",
+    "@react-stately/datepicker": "3.0.0-nightly.3114+68403fe55",
+    "@react-stately/form": "3.0.6-nightly.5042+68403fe55",
+    "@react-types/button": "3.9.7-nightly.5042+68403fe55",
+    "@react-types/calendar": "3.0.0-nightly.3114+68403fe55",
+    "@react-types/datepicker": "3.0.0-nightly.3114+68403fe55",
+    "@react-types/dialog": "3.5.13-nightly.5042+68403fe55",
+    "@react-types/shared": "3.0.0-nightly.3114+68403fe55",
+    "@swc/helpers": "^0.5.0"
   },
   "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 || ^19.0.0",
+    "react-dom": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0"
   },
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "404d41859b7d6f56201d7fc01bd9f22ae3512937"
+  "gitHead": "68403fe55489dce3de1b3094c957d598ad719861"
 }

package/src/index.ts

@@ -10,8 +10,15 @@
  * governing permissions and limitations under the License.
  */
 
-export * from './useDatePicker';
-export * from './useDateSegment';
-export * from './useDateField';
-export * from './useDateRangePicker';
-export * from './useDisplayNames';
+export {useDatePicker} from './useDatePicker';
+export {useDateSegment} from './useDateSegment';
+export {useDateField, useTimeField} from './useDateField';
+export {useDateRangePicker} from './useDateRangePicker';
+export {useDisplayNames} from './useDisplayNames';
+
+export type {AriaDateFieldProps, AriaDatePickerProps, AriaDateRangePickerProps, DateRange, DateValue, TimeValue} from '@react-types/datepicker';
+export type {AriaDateFieldOptions, DateFieldAria} from './useDateField';
+export type {DatePickerAria} from './useDatePicker';
+export type {DateRangePickerAria} from './useDateRangePicker';
+export type {DateSegmentAria} from './useDateSegment';
+export type {AriaTimeFieldProps} from '@react-types/datepicker';

package/src/useDateField.ts

@@ -10,69 +10,200 @@
  * governing permissions and limitations under the License.
  */
 
-import {AriaDatePickerProps, DateValue} from '@react-types/datepicker';
-import {createFocusManager} from '@react-aria/focus';
-import {DatePickerFieldState} from '@react-stately/datepicker';
-import {HTMLAttributes, LabelHTMLAttributes, RefObject} from 'react';
-import {mergeProps, useDescription} from '@react-aria/utils';
-import {useDateFormatter} from '@react-aria/i18n';
+import {AriaDateFieldProps as AriaDateFieldPropsBase, AriaTimeFieldProps, DateValue, TimeValue} from '@react-types/datepicker';
+import {createFocusManager, FocusManager} from '@react-aria/focus';
+import {DateFieldState, TimeFieldState} from '@react-stately/datepicker';
+import {DOMAttributes, GroupDOMAttributes, KeyboardEvent, RefObject, ValidationResult} from '@react-types/shared';
+import {filterDOMProps, mergeProps, useDescription, useFormReset} from '@react-aria/utils';
+import {InputHTMLAttributes, useEffect, useMemo, useRef} from 'react';
+// @ts-ignore
+import intlMessages from '../intl/*.json';
 import {useDatePickerGroup} from './useDatePickerGroup';
 import {useField} from '@react-aria/label';
 import {useFocusWithin} from '@react-aria/interactions';
+import {useFormValidation} from '@react-aria/form';
+import {useLocalizedStringFormatter} 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 AriaDateFieldOptions<T extends DateValue> extends Omit<AriaDateFieldPropsBase<T>, 'value' | 'defaultValue' | 'onChange' | 'minValue' | 'maxValue' | 'placeholderValue' | 'validate'> {
+  /** A ref for the hidden input element for HTML form submission. */
+  inputRef?: RefObject<HTMLInputElement | null>
+}
 
-interface DateFieldAria {
-  labelProps: LabelHTMLAttributes<HTMLLabelElement>,
-  fieldProps: HTMLAttributes<HTMLElement>,
+export interface DateFieldAria extends ValidationResult {
+   /** Props for the field's visible label element, if any. */
+  labelProps: DOMAttributes,
+   /** Props for the field grouping element. */
+  fieldProps: GroupDOMAttributes,
+  /** Props for the hidden input element for HTML form submission. */
+  inputProps: InputHTMLAttributes<HTMLInputElement>,
   /** Props for the description element, if any. */
-  descriptionProps: HTMLAttributes<HTMLElement>,
+  descriptionProps: DOMAttributes,
   /** Props for the error message element, if any. */
-  errorMessageProps: HTMLAttributes<HTMLElement>
+  errorMessageProps: DOMAttributes
+}
+
+// Data that is passed between useDateField and useDateSegment.
+interface HookData {
+  ariaLabel: string,
+  ariaLabelledBy: string,
+  ariaDescribedBy: string,
+  focusManager: FocusManager
 }
 
-export const labelIds = new WeakMap<DatePickerFieldState, {ariaLabelledBy: string, ariaDescribedBy: string}>();
+export const hookData = new WeakMap<DateFieldState, HookData>();
+
+// Private props that we pass from useDatePicker/useDateRangePicker.
+// Ideally we'd use a Symbol for this, but React doesn't support them: https://github.com/facebook/react/issues/7552
+export const roleSymbol = '__role_' + Date.now();
+export const focusManagerSymbol = '__focusManager_' + Date.now();
 
-export function useDateField<T extends DateValue>(props: DateFieldProps<T>, state: DatePickerFieldState, ref: RefObject<HTMLElement>): DateFieldAria {
+/**
+ * Provides the behavior and accessibility implementation for a date field component.
+ * 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: AriaDateFieldOptions<T>, state: DateFieldState, ref: RefObject<Element | null>): DateFieldAria {
+  let {isInvalid, validationErrors, validationDetails} = state.displayValidation;
   let {labelProps, fieldProps, descriptionProps, errorMessageProps} = useField({
     ...props,
-    labelElementType: 'span'
+    labelElementType: 'span',
+    isInvalid,
+    errorMessage: props.errorMessage || validationErrors
   });
 
-  let groupProps = useDatePickerGroup(state, ref);
-
+  let valueOnFocus = useRef<DateValue | null>(null);
   let {focusWithinProps} = useFocusWithin({
-    onBlurWithin() {
+    ...props,
+    onFocusWithin(e) {
+      valueOnFocus.current = state.value;
+      props.onFocus?.(e);
+    },
+    onBlurWithin: (e) => {
       state.confirmPlaceholder();
-    }
+      if (state.value !== valueOnFocus.current) {
+        state.commitValidation();
+      }
+      props.onBlur?.(e);
+    },
+    onFocusWithinChange: props.onFocusChange
   });
 
-  let formatter = useDateFormatter(state.getFormatOptions({month: 'long'}));
-  let descProps = useDescription(state.value ? formatter.format(state.dateValue) : null);
+  let stringFormatter = useLocalizedStringFormatter(intlMessages, '@react-aria/datepicker');
+  let message = state.maxGranularity === 'hour' ? 'selectedTimeDescription' : 'selectedDateDescription';
+  let field = state.maxGranularity === 'hour' ? 'time' : 'date';
+  let description = state.value ? stringFormatter.format(message, {[field]: state.formatValue({month: 'long'})}) : '';
+  let descProps = useDescription(description);
 
-  let segmentLabelledBy = fieldProps['aria-labelledby'] || fieldProps.id;
-  let describedBy = [descProps['aria-describedby'], fieldProps['aria-describedby']].filter(Boolean).join(' ') || undefined;
+  // 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.
+  let describedBy = props[roleSymbol] === 'presentation'
+    ? fieldProps['aria-describedby']
+    : [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');
 
-  labelIds.set(state, {
-    ariaLabelledBy: segmentLabelledBy,
-    ariaDescribedBy: describedBy
+  // Pass labels and other information to segments.
+  hookData.set(state, {
+    ariaLabel: props['aria-label'],
+    ariaLabelledBy: [labelProps.id, props['aria-labelledby']].filter(Boolean).join(' ') || undefined,
+    ariaDescribedBy: describedBy,
+    focusManager
   });
 
+  let autoFocusRef = useRef(props.autoFocus);
+
+  // When used within a date picker or date range picker, the field gets role="presentation"
+  // rather than role="group". Since the date picker/date range picker already has a role="group"
+  // with a label and description, and the segments are already labeled by this as well, this
+  // avoids very verbose duplicate announcements.
+  let fieldDOMProps: GroupDOMAttributes;
+  if (props[roleSymbol] === 'presentation') {
+    fieldDOMProps = {
+      role: 'presentation'
+    };
+  } else {
+    fieldDOMProps = mergeProps(fieldProps, {
+      role: 'group' as const,
+      'aria-disabled': props.isDisabled || undefined,
+      'aria-describedby': describedBy
+    });
+  }
+
+  useEffect(() => {
+    if (autoFocusRef.current) {
+      focusManager.focusFirst();
+    }
+    autoFocusRef.current = false;
+  }, [focusManager]);
+
+  useFormReset(props.inputRef, state.value, state.setValue);
+  useFormValidation({
+    ...props,
+    focus() {
+      focusManager.focusFirst();
+    }
+  }, state, props.inputRef);
+
+  let inputProps: InputHTMLAttributes<HTMLInputElement> = {
+    type: 'hidden',
+    name: props.name,
+    value: state.value?.toString() || '',
+    disabled: props.isDisabled
+  };
+
+  if (props.validationBehavior === 'native') {
+    // Use a hidden <input type="text"> rather than <input type="hidden">
+    // so that an empty value blocks HTML form submission when the field is required.
+    inputProps.type = 'text';
+    inputProps.hidden = true;
+    inputProps.required = props.isRequired;
+    // Ignore react warning.
+    inputProps.onChange = () => {};
+  }
+
+  let domProps = filterDOMProps(props);
   return {
     labelProps: {
       ...labelProps,
       onClick: () => {
-        let focusManager = createFocusManager(ref);
         focusManager.focusFirst();
       }
     },
-    fieldProps: mergeProps(fieldProps, descProps, groupProps, focusWithinProps, {
-      role: 'group',
-      'aria-disabled': props.isDisabled || undefined,
-      'aria-describedby': describedBy
+    fieldProps: mergeProps(domProps, fieldDOMProps, groupProps, focusWithinProps, {
+      onKeyDown(e: KeyboardEvent) {
+        if (props.onKeyDown) {
+          props.onKeyDown(e);
+        }
+      },
+      onKeyUp(e: KeyboardEvent) {
+        if (props.onKeyUp) {
+          props.onKeyUp(e);
+        }
+      }
     }),
+    inputProps,
     descriptionProps,
-    errorMessageProps
+    errorMessageProps,
+    isInvalid,
+    validationErrors,
+    validationDetails
   };
 }
+
+export interface AriaTimeFieldOptions<T extends TimeValue> extends AriaTimeFieldProps<T> {
+  /** A ref for the hidden input element for HTML form submission. */
+  inputRef?: RefObject<HTMLInputElement | null>
+}
+
+/**
+ * Provides the behavior and accessibility implementation for a time field component.
+ * A time field allows users to enter and edit time values using a keyboard.
+ * Each part of a time value is displayed in an individually editable segment.
+ */
+export function useTimeField<T extends TimeValue>(props: AriaTimeFieldOptions<T>, state: TimeFieldState, ref: RefObject<Element | null>): DateFieldAria {
+  let res = useDateField(props, state, ref);
+  res.inputProps.value = state.timeValue?.toString() || '';
+  return res;
+}

package/src/useDatePicker.ts

@@ -13,36 +13,56 @@
 import {AriaButtonProps} from '@react-types/button';
 import {AriaDatePickerProps, DateValue} from '@react-types/datepicker';
 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, LabelHTMLAttributes, RefObject} from 'react';
+import {DOMAttributes, GroupDOMAttributes, KeyboardEvent, RefObject, ValidationResult} from '@react-types/shared';
+import {filterDOMProps, mergeProps, useDescription, useId} from '@react-aria/utils';
 // @ts-ignore
 import intlMessages from '../intl/*.json';
-import {mergeProps, useDescription, useId} from '@react-aria/utils';
+import {privateValidationStateProp} from '@react-stately/form';
+import {roleSymbol} from './useDateField';
 import {useDatePickerGroup} from './useDatePickerGroup';
 import {useField} from '@react-aria/label';
-import {useLocale, useMessageFormatter} from '@react-aria/i18n';
+import {useFocusWithin} from '@react-aria/interactions';
+import {useLocale, useLocalizedStringFormatter} from '@react-aria/i18n';
+import {useMemo} from 'react';
 
-interface DatePickerAria<T extends DateValue> {
-  groupProps: HTMLAttributes<HTMLElement>,
-  labelProps: LabelHTMLAttributes<HTMLLabelElement>,
-  fieldProps: AriaDatePickerProps<T>,
+export interface DatePickerAria extends ValidationResult {
+  /** Props for the date picker's visible label element, if any. */
+  labelProps: DOMAttributes,
+  /** Props for the grouping element containing the date field and button. */
+  groupProps: GroupDOMAttributes,
+  /** Props for the date field. */
+  fieldProps: 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 calendar within the popover dialog. */
+  calendarProps: CalendarProps<DateValue>
 }
 
-export function useDatePicker<T extends DateValue>(props: AriaDatePickerProps<T>, state: DatePickerState, ref: RefObject<HTMLElement>): DatePickerAria<T> {
+/**
+ * Provides the behavior and accessibility implementation for a date picker component.
+ * A date picker combines a DateField and a Calendar popover to allow users to enter or select a date and time value.
+ */
+export function useDatePicker<T extends DateValue>(props: AriaDatePickerProps<T>, state: DatePickerState, ref: RefObject<Element | null>): DatePickerAria {
   let buttonId = useId();
   let dialogId = useId();
-  let formatMessage = useMessageFormatter(intlMessages);
+  let fieldId = useId();
+  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 groupProps = useDatePickerGroup(state, ref);
@@ -50,38 +70,105 @@ 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 ? stringFormatter.format('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]);
+
+  let {focusWithinProps} = useFocusWithin({
+    ...props,
+    isDisabled: state.isOpen,
+    onBlurWithin: props.onBlur,
+    onFocusWithin: props.onFocus,
+    onFocusWithinChange: props.onFocusChange
+  });
 
   return {
-    groupProps: mergeProps(groupProps, descProps, {
-      role: 'group',
+    groupProps: mergeProps(domProps, groupProps, fieldProps, descProps, focusWithinProps, {
+      role: 'group' as const,
       '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,
       onClick: () => {
-        let focusManager = createFocusManager(ref);
         focusManager.focusFirst();
       }
     },
-    fieldProps,
+    fieldProps: {
+      ...fieldProps,
+      id: fieldId,
+      [roleSymbol]: 'presentation',
+      'aria-describedby': ariaDescribedBy,
+      value: state.value,
+      onChange: state.setValue,
+      placeholderValue: props.placeholderValue,
+      hideTimeZone: props.hideTimeZone,
+      hourCycle: props.hourCycle,
+      shouldForceLeadingZeros: props.shouldForceLeadingZeros,
+      granularity: props.granularity,
+      isDisabled: props.isDisabled,
+      isReadOnly: props.isReadOnly,
+      isRequired: props.isRequired,
+      validationBehavior: props.validationBehavior,
+      // DatePicker owns the validation state for the date field.
+      [privateValidationStateProp]: state,
+      autoFocus: props.autoFocus,
+      name: props.name
+    },
     descriptionProps,
     errorMessageProps,
     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}`
+    },
+    calendarProps: {
+      autoFocus: true,
+      value: state.dateValue,
+      onChange: state.setDateValue,
+      minValue: props.minValue,
+      maxValue: props.maxValue,
+      isDisabled: props.isDisabled,
+      isReadOnly: props.isReadOnly,
+      isDateUnavailable: props.isDateUnavailable,
+      defaultFocusedValue: state.dateValue ? undefined : props.placeholderValue,
+      isInvalid: state.isInvalid,
+      errorMessage: typeof props.errorMessage === 'function' ? props.errorMessage(state.displayValidation) : (props.errorMessage || state.displayValidation.validationErrors.join(' '))
+    },
+    isInvalid,
+    validationErrors,
+    validationDetails
   };
 }