@react-aria/datepicker 3.16.0 → 3.17.0

package/dist/zh-CN.module.js

@@ -1,23 +0,0 @@
-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

@@ -1 +0,0 @@
-{"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,EAAE;IACzD,4BAA4B,CAAC,OAAS,CAAC,gDAAM,EAAE,KAAK,SAAS,CAAC,UAAG,EAAE,KAAK,OAAO,EAAE;IACjF,2BAA2B,CAAC,OAAS,CAAC,gDAAM,EAAE,KAAK,IAAI,EAAE;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

@@ -1,21 +0,0 @@
-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

@@ -1 +0,0 @@
-{"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,EAAE;IACzD,4BAA4B,CAAC,OAAS,CAAC,gDAAM,EAAE,KAAK,SAAS,CAAC,UAAG,EAAE,KAAK,OAAO,EAAE;IACjF,2BAA2B,CAAC,OAAS,CAAC,gDAAM,EAAE,KAAK,IAAI,EAAE;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

@@ -1,23 +0,0 @@
-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

@@ -1,23 +0,0 @@
-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

@@ -1 +0,0 @@
-{"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,EAAE;IACzD,4BAA4B,CAAC,OAAS,CAAC,gDAAM,EAAE,KAAK,SAAS,CAAC,UAAG,EAAE,KAAK,OAAO,EAAE;IACjF,2BAA2B,CAAC,OAAS,CAAC,gDAAM,EAAE,KAAK,IAAI,EAAE;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/src/useDateField.ts

@@ -1,213 +0,0 @@
-/*
- * Copyright 2020 Adobe. All rights reserved.
- * This file is licensed to you under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License. You may obtain a copy
- * of the License at http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software distributed under
- * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
- * OF ANY KIND, either express or implied. See the License for the specific language
- * governing permissions and limitations under the License.
- */
-
-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
-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>
-}
-
-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: DOMAttributes,
-  /** Props for the error message element, if any. */
-  errorMessageProps: DOMAttributes
-}
-
-// Data that is passed between useDateField and useDateSegment.
-interface HookData {
-  ariaLabel?: string,
-  ariaLabelledBy?: string,
-  ariaDescribedBy?: string,
-  focusManager: FocusManager
-}
-
-export const hookData: WeakMap<DateFieldState, 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: string = '__role_' + Date.now();
-export const focusManagerSymbol: string = '__focusManager_' + Date.now();
-
-/**
- * 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',
-    isInvalid,
-    errorMessage: props.errorMessage || validationErrors
-  });
-
-  let valueOnFocus = useRef<DateValue | null>(null);
-  let {focusWithinProps} = useFocusWithin({
-    ...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 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);
-
-  // 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');
-
-  // 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.defaultValue, state.setValue);
-  useFormValidation({
-    ...props,
-    focus() {
-      focusManager.focusFirst();
-    }
-  }, state, props.inputRef);
-
-  let inputProps: InputHTMLAttributes<HTMLInputElement> = {
-    type: 'hidden',
-    name: props.name,
-    form: props.form,
-    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: () => {
-        focusManager.focusFirst();
-      }
-    },
-    fieldProps: mergeProps(domProps, fieldDOMProps, groupProps, focusWithinProps, {
-      onKeyDown(e: KeyboardEvent) {
-        if (props.onKeyDown) {
-          props.onKeyDown(e);
-        }
-      },
-      onKeyUp(e: KeyboardEvent) {
-        if (props.onKeyUp) {
-          props.onKeyUp(e);
-        }
-      },
-      style: {
-        unicodeBidi: 'isolate'
-      }
-    }),
-    inputProps,
-    descriptionProps,
-    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

@@ -1,192 +0,0 @@
-/*
- * Copyright 2020 Adobe. All rights reserved.
- * This file is licensed to you under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License. You may obtain a copy
- * of the License at http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software distributed under
- * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
- * OF ANY KIND, either express or implied. See the License for the specific language
- * governing permissions and limitations under the License.
- */
-
-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 {DOMAttributes, GroupDOMAttributes, KeyboardEvent, RefObject, ValidationResult} from '@react-types/shared';
-import {filterDOMProps, mergeProps, nodeContains, useDescription, useId} from '@react-aria/utils';
-// @ts-ignore
-import intlMessages from '../intl/*.json';
-import {privateValidationStateProp} from '@react-stately/form';
-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';
-import {useMemo, useRef} from 'react';
-
-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: DOMAttributes,
-  /** Props for the error message element, if any. */
-  errorMessageProps: DOMAttributes,
-  /** Props for the popover dialog. */
-  dialogProps: AriaDialogProps,
-  /** Props for the calendar within the popover dialog. */
-  calendarProps: CalendarProps<DateValue>
-}
-
-/**
- * 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 fieldId = useId();
-  let stringFormatter = useLocalizedStringFormatter(intlMessages, '@react-aria/datepicker');
-
-  let {isInvalid, validationErrors, validationDetails} = state.displayValidation;
-  let {labelProps, fieldProps, descriptionProps, errorMessageProps} = useField({
-    ...props,
-    labelElementType: 'span',
-    isInvalid,
-    errorMessage: props.errorMessage || validationErrors
-  });
-
-  let groupProps = useDatePickerGroup(state, ref);
-
-  let labelledBy = fieldProps['aria-labelledby'] || fieldProps.id;
-
-  let {locale} = useLocale();
-  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 isFocused = useRef(false);
-  let {focusWithinProps} = useFocusWithin({
-    ...props,
-    isDisabled: state.isOpen,
-    onBlurWithin: e => {
-      // Ignore when focus moves into the popover.
-      let dialog = document.getElementById(dialogId);
-      if (!nodeContains(dialog, e.relatedTarget)) {
-        isFocused.current = false;
-        props.onBlur?.(e);
-        props.onFocusChange?.(false);
-      }
-    },
-    onFocusWithin: e => {
-      if (!isFocused.current) {
-        isFocused.current = true;
-        props.onFocus?.(e);
-        props.onFocusChange?.(true);
-      }
-    }
-  });
-
-  return {
-    groupProps: mergeProps(domProps, groupProps, fieldProps, descProps, focusWithinProps, {
-      role: 'group' as const,
-      'aria-disabled': props.isDisabled || null,
-      'aria-labelledby': labelledBy,
-      '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: () => {
-        focusManager.focusFirst();
-      }
-    },
-    fieldProps: {
-      ...fieldProps,
-      id: fieldId,
-      [roleSymbol]: 'presentation',
-      'aria-describedby': ariaDescribedBy,
-      value: state.value,
-      defaultValue: state.defaultValue,
-      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,
-      form: props.form
-    },
-    descriptionProps,
-    errorMessageProps,
-    buttonProps: {
-      ...descProps,
-      id: buttonId,
-      'aria-haspopup': 'dialog',
-      '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': `${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(' ')),
-      firstDayOfWeek: props.firstDayOfWeek,
-      pageBehavior: props.pageBehavior
-    },
-    isInvalid,
-    validationErrors,
-    validationDetails
-  };
-}

package/src/useDatePickerGroup.ts

@@ -1,138 +0,0 @@
-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, nodeContains} from '@react-aria/utils';
-import {useLocale} from '@react-aria/i18n';
-import {useMemo} from 'react';
-import {usePress} from '@react-aria/interactions';
-
-export function useDatePickerGroup(state: DatePickerState | DateRangePickerState | DateFieldState, ref: RefObject<Element | null>, disableArrowNavigation?: boolean): DOMAttributes<FocusableElement> {
-  let {direction} = useLocale();
-  let focusManager = useMemo(() => createFocusManager(ref), [ref]);
-
-  // Open the popover on alt + arrow down
-  let onKeyDown = (e: KeyboardEvent) => {
-    if (!nodeContains(e.currentTarget, e.target as Element)) {
-      return;
-    }
-
-    if (e.altKey && (e.key === 'ArrowDown' || e.key === 'ArrowUp') && 'setOpen' in state) {
-      e.preventDefault();
-      e.stopPropagation();
-      state.setOpen(true);
-    }
-
-    if (disableArrowNavigation) {
-      return;
-    }
-
-    switch (e.key) {
-      case 'ArrowLeft':
-        e.preventDefault();
-        e.stopPropagation();
-        if (direction === 'rtl') {
-          if (ref.current) {
-            let target = e.target as FocusableElement;
-            let prev = findNextSegment(ref.current, target.getBoundingClientRect().left, -1);
-
-            if (prev) {
-              prev.focus();
-            }
-          }
-        } else {
-          focusManager.focusPrevious();
-        }
-        break;
-      case 'ArrowRight':
-        e.preventDefault();
-        e.stopPropagation();
-        if (direction === 'rtl') {
-          if (ref.current) {
-            let target = e.target as FocusableElement;
-            let next = findNextSegment(ref.current, target.getBoundingClientRect().left, 1);
-
-            if (next) {
-              next.focus();
-            }
-          }
-        } else {
-          focusManager.focusNext();
-        }
-        break;
-    }
-  };
-
-  // Focus the first placeholder segment from the end on mouse down/touch up in the field.
-  let focusLast = () => {
-    if (!ref.current) {
-      return;
-    }
-    // Try to find the segment prior to the element that was clicked on.
-    let target = window.event?.target as FocusableElement;
-    let walker = getFocusableTreeWalker(ref.current, {tabbable: true});
-    if (target) {
-      walker.currentNode = target;
-      target = walker.previousNode() as FocusableElement;
-    }
-
-    // If no target found, find the last element from the end.
-    if (!target) {
-      let last: FocusableElement;
-      do {
-        last = walker.lastChild() as FocusableElement;
-        if (last) {
-          target = last;
-        }
-      } while (last);
-    }
-
-    // Now go backwards until we find an element that is not a placeholder.
-    while (target?.hasAttribute('data-placeholder')) {
-      let prev = walker.previousNode() as FocusableElement;
-      if (prev && prev.hasAttribute('data-placeholder')) {
-        target = prev;
-      } else {
-        break;
-      }
-    }
-
-    if (target) {
-      target.focus();
-    }
-  };
-
-  let {pressProps} = usePress({
-    preventFocusOnPress: true,
-    allowTextSelectionOnPress: true,
-    onPressStart(e) {
-      if (e.pointerType === 'mouse') {
-        focusLast();
-      }
-    },
-    onPress(e) {
-      if (e.pointerType === 'touch' || e.pointerType === 'pen') {
-        focusLast();
-      }
-    }
-  });
-
-  return mergeProps(pressProps, {onKeyDown});
-}
-
-function findNextSegment(group: Element, fromX: number, direction: number) {
-  let walker = getFocusableTreeWalker(group, {tabbable: true});
-  let node = walker.nextNode();
-  let closest: FocusableElement | null = null;
-  let closestDistance = Infinity;
-  while (node) {
-    let x = (node as Element).getBoundingClientRect().left;
-    let distance = x - fromX;
-    let absoluteDistance = Math.abs(distance);
-    if (Math.sign(distance) === direction && absoluteDistance < closestDistance) {
-      closest = node as FocusableElement;
-      closestDistance = absoluteDistance;
-    }
-    node = walker.nextNode();
-  }
-  return closest;
-}