@react-aria/datepicker 3.10.0 → 3.11.0

package/dist/useDateField.mjs

@@ -32,14 +32,14 @@ function $parcel$interopDefault(a) {
 
 
 const $16f0b7bb276bc17e$export$653eddfc964b0f8a = new WeakMap();
-const $16f0b7bb276bc17e$export$300019f83c56d282 = "__role_" + Date.now();
-const $16f0b7bb276bc17e$export$7b3062cd49e80452 = "__focusManager_" + Date.now();
+const $16f0b7bb276bc17e$export$300019f83c56d282 = '__role_' + Date.now();
+const $16f0b7bb276bc17e$export$7b3062cd49e80452 = '__focusManager_' + Date.now();
 function $16f0b7bb276bc17e$export$5591b0b878c1a989(props, state, ref) {
     var _state_value;
     let { isInvalid: isInvalid, validationErrors: validationErrors, validationDetails: validationDetails } = state.displayValidation;
     let { labelProps: labelProps, fieldProps: fieldProps, descriptionProps: descriptionProps, errorMessageProps: errorMessageProps } = (0, $7Gzdi$useField)({
         ...props,
-        labelElementType: "span",
+        labelElementType: 'span',
         isInvalid: isInvalid,
         errorMessage: props.errorMessage || validationErrors
     });
@@ -59,34 +59,34 @@ function $16f0b7bb276bc17e$export$5591b0b878c1a989(props, state, ref) {
         },
         onFocusWithinChange: props.onFocusChange
     });
-    let stringFormatter = (0, $7Gzdi$useLocalizedStringFormatter)((0, ($parcel$interopDefault($7Gzdi$intlStringsmodulejs))), "@react-aria/datepicker");
-    let message = state.maxGranularity === "hour" ? "selectedTimeDescription" : "selectedDateDescription";
-    let field = state.maxGranularity === "hour" ? "time" : "date";
+    let stringFormatter = (0, $7Gzdi$useLocalizedStringFormatter)((0, ($parcel$interopDefault($7Gzdi$intlStringsmodulejs))), '@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"
+            month: 'long'
         })
-    }) : "";
+    }) : '';
     let descProps = (0, $7Gzdi$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[$16f0b7bb276bc17e$export$300019f83c56d282] === "presentation" ? fieldProps["aria-describedby"] : [
-        descProps["aria-describedby"],
-        fieldProps["aria-describedby"]
-    ].filter(Boolean).join(" ") || undefined;
+    let describedBy = props[$16f0b7bb276bc17e$export$300019f83c56d282] === 'presentation' ? fieldProps['aria-describedby'] : [
+        descProps['aria-describedby'],
+        fieldProps['aria-describedby']
+    ].filter(Boolean).join(' ') || undefined;
     let propsFocusManager = props[$16f0b7bb276bc17e$export$7b3062cd49e80452];
     let focusManager = (0, $7Gzdi$useMemo)(()=>propsFocusManager || (0, $7Gzdi$createFocusManager)(ref), [
         propsFocusManager,
         ref
     ]);
-    let groupProps = (0, $3dfb0f96be0d6a08$export$4a931266a3838b86)(state, ref, props[$16f0b7bb276bc17e$export$300019f83c56d282] === "presentation");
+    let groupProps = (0, $3dfb0f96be0d6a08$export$4a931266a3838b86)(state, ref, props[$16f0b7bb276bc17e$export$300019f83c56d282] === 'presentation');
     // Pass labels and other information to segments.
     $16f0b7bb276bc17e$export$653eddfc964b0f8a.set(state, {
-        ariaLabel: props["aria-label"],
+        ariaLabel: props['aria-label'],
         ariaLabelledBy: [
             labelProps.id,
-            props["aria-labelledby"]
-        ].filter(Boolean).join(" ") || undefined,
+            props['aria-labelledby']
+        ].filter(Boolean).join(' ') || undefined,
         ariaDescribedBy: describedBy,
         focusManager: focusManager
     });
@@ -96,13 +96,13 @@ function $16f0b7bb276bc17e$export$5591b0b878c1a989(props, state, ref) {
     // with a label and description, and the segments are already labeled by this as well, this
     // avoids very verbose duplicate announcements.
     let fieldDOMProps;
-    if (props[$16f0b7bb276bc17e$export$300019f83c56d282] === "presentation") fieldDOMProps = {
-        role: "presentation"
+    if (props[$16f0b7bb276bc17e$export$300019f83c56d282] === 'presentation') fieldDOMProps = {
+        role: 'presentation'
     };
     else fieldDOMProps = (0, $7Gzdi$mergeProps)(fieldProps, {
-        role: "group",
-        "aria-disabled": props.isDisabled || undefined,
-        "aria-describedby": describedBy
+        role: 'group',
+        'aria-disabled': props.isDisabled || undefined,
+        'aria-describedby': describedBy
     });
     (0, $7Gzdi$useEffect)(()=>{
         if (autoFocusRef.current) focusManager.focusFirst();
@@ -118,14 +118,15 @@ function $16f0b7bb276bc17e$export$5591b0b878c1a989(props, state, ref) {
         }
     }, state, props.inputRef);
     let inputProps = {
-        type: "hidden",
+        type: 'hidden',
         name: props.name,
-        value: ((_state_value = state.value) === null || _state_value === void 0 ? void 0 : _state_value.toString()) || ""
+        value: ((_state_value = state.value) === null || _state_value === void 0 ? void 0 : _state_value.toString()) || '',
+        disabled: props.isDisabled
     };
-    if (props.validationBehavior === "native") {
+    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.type = 'text';
         inputProps.hidden = true;
         inputProps.required = props.isRequired;
         // Ignore react warning.
@@ -158,10 +159,10 @@ function $16f0b7bb276bc17e$export$5591b0b878c1a989(props, state, ref) {
 function $16f0b7bb276bc17e$export$4c842f6a241dc825(props, state, ref) {
     var _state_timeValue;
     let res = $16f0b7bb276bc17e$export$5591b0b878c1a989(props, state, ref);
-    res.inputProps.value = ((_state_timeValue = state.timeValue) === null || _state_timeValue === void 0 ? void 0 : _state_timeValue.toString()) || "";
+    res.inputProps.value = ((_state_timeValue = state.timeValue) === null || _state_timeValue === void 0 ? void 0 : _state_timeValue.toString()) || '';
     return res;
 }
 
 
 export {$16f0b7bb276bc17e$export$653eddfc964b0f8a as hookData, $16f0b7bb276bc17e$export$300019f83c56d282 as roleSymbol, $16f0b7bb276bc17e$export$7b3062cd49e80452 as focusManagerSymbol, $16f0b7bb276bc17e$export$5591b0b878c1a989 as useDateField, $16f0b7bb276bc17e$export$4c842f6a241dc825 as useTimeField};
-//# sourceMappingURL=useDateField.mjs.map
+//# sourceMappingURL=useDateField.module.js.map

package/dist/useDateField.module.js

@@ -32,14 +32,14 @@ function $parcel$interopDefault(a) {
 
 
 const $16f0b7bb276bc17e$export$653eddfc964b0f8a = new WeakMap();
-const $16f0b7bb276bc17e$export$300019f83c56d282 = "__role_" + Date.now();
-const $16f0b7bb276bc17e$export$7b3062cd49e80452 = "__focusManager_" + Date.now();
+const $16f0b7bb276bc17e$export$300019f83c56d282 = '__role_' + Date.now();
+const $16f0b7bb276bc17e$export$7b3062cd49e80452 = '__focusManager_' + Date.now();
 function $16f0b7bb276bc17e$export$5591b0b878c1a989(props, state, ref) {
     var _state_value;
     let { isInvalid: isInvalid, validationErrors: validationErrors, validationDetails: validationDetails } = state.displayValidation;
     let { labelProps: labelProps, fieldProps: fieldProps, descriptionProps: descriptionProps, errorMessageProps: errorMessageProps } = (0, $7Gzdi$useField)({
         ...props,
-        labelElementType: "span",
+        labelElementType: 'span',
         isInvalid: isInvalid,
         errorMessage: props.errorMessage || validationErrors
     });
@@ -59,34 +59,34 @@ function $16f0b7bb276bc17e$export$5591b0b878c1a989(props, state, ref) {
         },
         onFocusWithinChange: props.onFocusChange
     });
-    let stringFormatter = (0, $7Gzdi$useLocalizedStringFormatter)((0, ($parcel$interopDefault($7Gzdi$intlStringsmodulejs))), "@react-aria/datepicker");
-    let message = state.maxGranularity === "hour" ? "selectedTimeDescription" : "selectedDateDescription";
-    let field = state.maxGranularity === "hour" ? "time" : "date";
+    let stringFormatter = (0, $7Gzdi$useLocalizedStringFormatter)((0, ($parcel$interopDefault($7Gzdi$intlStringsmodulejs))), '@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"
+            month: 'long'
         })
-    }) : "";
+    }) : '';
     let descProps = (0, $7Gzdi$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[$16f0b7bb276bc17e$export$300019f83c56d282] === "presentation" ? fieldProps["aria-describedby"] : [
-        descProps["aria-describedby"],
-        fieldProps["aria-describedby"]
-    ].filter(Boolean).join(" ") || undefined;
+    let describedBy = props[$16f0b7bb276bc17e$export$300019f83c56d282] === 'presentation' ? fieldProps['aria-describedby'] : [
+        descProps['aria-describedby'],
+        fieldProps['aria-describedby']
+    ].filter(Boolean).join(' ') || undefined;
     let propsFocusManager = props[$16f0b7bb276bc17e$export$7b3062cd49e80452];
     let focusManager = (0, $7Gzdi$useMemo)(()=>propsFocusManager || (0, $7Gzdi$createFocusManager)(ref), [
         propsFocusManager,
         ref
     ]);
-    let groupProps = (0, $3dfb0f96be0d6a08$export$4a931266a3838b86)(state, ref, props[$16f0b7bb276bc17e$export$300019f83c56d282] === "presentation");
+    let groupProps = (0, $3dfb0f96be0d6a08$export$4a931266a3838b86)(state, ref, props[$16f0b7bb276bc17e$export$300019f83c56d282] === 'presentation');
     // Pass labels and other information to segments.
     $16f0b7bb276bc17e$export$653eddfc964b0f8a.set(state, {
-        ariaLabel: props["aria-label"],
+        ariaLabel: props['aria-label'],
         ariaLabelledBy: [
             labelProps.id,
-            props["aria-labelledby"]
-        ].filter(Boolean).join(" ") || undefined,
+            props['aria-labelledby']
+        ].filter(Boolean).join(' ') || undefined,
         ariaDescribedBy: describedBy,
         focusManager: focusManager
     });
@@ -96,13 +96,13 @@ function $16f0b7bb276bc17e$export$5591b0b878c1a989(props, state, ref) {
     // with a label and description, and the segments are already labeled by this as well, this
     // avoids very verbose duplicate announcements.
     let fieldDOMProps;
-    if (props[$16f0b7bb276bc17e$export$300019f83c56d282] === "presentation") fieldDOMProps = {
-        role: "presentation"
+    if (props[$16f0b7bb276bc17e$export$300019f83c56d282] === 'presentation') fieldDOMProps = {
+        role: 'presentation'
     };
     else fieldDOMProps = (0, $7Gzdi$mergeProps)(fieldProps, {
-        role: "group",
-        "aria-disabled": props.isDisabled || undefined,
-        "aria-describedby": describedBy
+        role: 'group',
+        'aria-disabled': props.isDisabled || undefined,
+        'aria-describedby': describedBy
     });
     (0, $7Gzdi$useEffect)(()=>{
         if (autoFocusRef.current) focusManager.focusFirst();
@@ -118,14 +118,15 @@ function $16f0b7bb276bc17e$export$5591b0b878c1a989(props, state, ref) {
         }
     }, state, props.inputRef);
     let inputProps = {
-        type: "hidden",
+        type: 'hidden',
         name: props.name,
-        value: ((_state_value = state.value) === null || _state_value === void 0 ? void 0 : _state_value.toString()) || ""
+        value: ((_state_value = state.value) === null || _state_value === void 0 ? void 0 : _state_value.toString()) || '',
+        disabled: props.isDisabled
     };
-    if (props.validationBehavior === "native") {
+    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.type = 'text';
         inputProps.hidden = true;
         inputProps.required = props.isRequired;
         // Ignore react warning.
@@ -158,7 +159,7 @@ function $16f0b7bb276bc17e$export$5591b0b878c1a989(props, state, ref) {
 function $16f0b7bb276bc17e$export$4c842f6a241dc825(props, state, ref) {
     var _state_timeValue;
     let res = $16f0b7bb276bc17e$export$5591b0b878c1a989(props, state, ref);
-    res.inputProps.value = ((_state_timeValue = state.timeValue) === null || _state_timeValue === void 0 ? void 0 : _state_timeValue.toString()) || "";
+    res.inputProps.value = ((_state_timeValue = state.timeValue) === null || _state_timeValue === void 0 ? void 0 : _state_timeValue.toString()) || '';
     return res;
 }
 

package/dist/useDateField.module.js.map

@@ -1 +1 @@
-{"mappings":"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","sources":["packages/@react-aria/datepicker/src/useDateField.ts"],"sourcesContent":["/*\n * Copyright 2020 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport {AriaDateFieldProps as AriaDateFieldPropsBase, AriaTimeFieldProps, DateValue, TimeValue} from '@react-types/datepicker';\nimport {createFocusManager, FocusManager} from '@react-aria/focus';\nimport {DateFieldState, TimeFieldState} from '@react-stately/datepicker';\nimport {DOMAttributes, GroupDOMAttributes, KeyboardEvent, ValidationResult} from '@react-types/shared';\nimport {filterDOMProps, mergeProps, useDescription, useFormReset} from '@react-aria/utils';\nimport {InputHTMLAttributes, RefObject, useEffect, useMemo, useRef} from 'react';\n// @ts-ignore\nimport intlMessages from '../intl/*.json';\nimport {useDatePickerGroup} from './useDatePickerGroup';\nimport {useField} from '@react-aria/label';\nimport {useFocusWithin} from '@react-aria/interactions';\nimport {useFormValidation} from '@react-aria/form';\nimport {useLocalizedStringFormatter} from '@react-aria/i18n';\n\n// Allows this hook to also be used with TimeField\nexport interface AriaDateFieldOptions<T extends DateValue> extends Omit<AriaDateFieldPropsBase<T>, 'value' | 'defaultValue' | 'onChange' | 'minValue' | 'maxValue' | 'placeholderValue' | 'validate'> {\n  /** A ref for the hidden input element for HTML form submission. */\n  inputRef?: RefObject<HTMLInputElement>\n}\n\nexport interface DateFieldAria extends ValidationResult {\n   /** Props for the field's visible label element, if any. */\n  labelProps: DOMAttributes,\n   /** Props for the field grouping element. */\n  fieldProps: GroupDOMAttributes,\n  /** Props for the hidden input element for HTML form submission. */\n  inputProps: InputHTMLAttributes<HTMLInputElement>,\n  /** Props for the description element, if any. */\n  descriptionProps: DOMAttributes,\n  /** Props for the error message element, if any. */\n  errorMessageProps: DOMAttributes\n}\n\n// Data that is passed between useDateField and useDateSegment.\ninterface HookData {\n  ariaLabel: string,\n  ariaLabelledBy: string,\n  ariaDescribedBy: string,\n  focusManager: FocusManager\n}\n\nexport const hookData = new WeakMap<DateFieldState, HookData>();\n\n// Private props that we pass from useDatePicker/useDateRangePicker.\n// Ideally we'd use a Symbol for this, but React doesn't support them: https://github.com/facebook/react/issues/7552\nexport const roleSymbol = '__role_' + Date.now();\nexport const focusManagerSymbol = '__focusManager_' + Date.now();\n\n/**\n * Provides the behavior and accessibility implementation for a date field component.\n * A date field allows users to enter and edit date and time values using a keyboard.\n * Each part of a date value is displayed in an individually editable segment.\n */\nexport function useDateField<T extends DateValue>(props: AriaDateFieldOptions<T>, state: DateFieldState, ref: RefObject<Element>): DateFieldAria {\n  let {isInvalid, validationErrors, validationDetails} = state.displayValidation;\n  let {labelProps, fieldProps, descriptionProps, errorMessageProps} = useField({\n    ...props,\n    labelElementType: 'span',\n    isInvalid,\n    errorMessage: props.errorMessage || validationErrors\n  });\n\n  let valueOnFocus = useRef<DateValue | null>(null);\n  let {focusWithinProps} = useFocusWithin({\n    ...props,\n    onFocusWithin(e) {\n      valueOnFocus.current = state.value;\n      props.onFocus?.(e);\n    },\n    onBlurWithin: (e) => {\n      state.confirmPlaceholder();\n      if (state.value !== valueOnFocus.current) {\n        state.commitValidation();\n      }\n      props.onBlur?.(e);\n    },\n    onFocusWithinChange: props.onFocusChange\n  });\n\n  let stringFormatter = useLocalizedStringFormatter(intlMessages, '@react-aria/datepicker');\n  let message = state.maxGranularity === 'hour' ? 'selectedTimeDescription' : 'selectedDateDescription';\n  let field = state.maxGranularity === 'hour' ? 'time' : 'date';\n  let description = state.value ? stringFormatter.format(message, {[field]: state.formatValue({month: 'long'})}) : '';\n  let descProps = useDescription(description);\n\n  // If within a date picker or date range picker, the date field will have role=\"presentation\" and an aria-describedby\n  // will be passed in that references the value (e.g. entire range). Otherwise, add the field's value description.\n  let describedBy = props[roleSymbol] === 'presentation'\n    ? fieldProps['aria-describedby']\n    : [descProps['aria-describedby'], fieldProps['aria-describedby']].filter(Boolean).join(' ') || undefined;\n  let propsFocusManager = props[focusManagerSymbol];\n  let focusManager = useMemo(() => propsFocusManager || createFocusManager(ref), [propsFocusManager, ref]);\n  let groupProps = useDatePickerGroup(state, ref, props[roleSymbol] === 'presentation');\n\n  // Pass labels and other information to segments.\n  hookData.set(state, {\n    ariaLabel: props['aria-label'],\n    ariaLabelledBy: [labelProps.id, props['aria-labelledby']].filter(Boolean).join(' ') || undefined,\n    ariaDescribedBy: describedBy,\n    focusManager\n  });\n\n  let autoFocusRef = useRef(props.autoFocus);\n\n  // When used within a date picker or date range picker, the field gets role=\"presentation\"\n  // rather than role=\"group\". Since the date picker/date range picker already has a role=\"group\"\n  // with a label and description, and the segments are already labeled by this as well, this\n  // avoids very verbose duplicate announcements.\n  let fieldDOMProps: GroupDOMAttributes;\n  if (props[roleSymbol] === 'presentation') {\n    fieldDOMProps = {\n      role: 'presentation'\n    };\n  } else {\n    fieldDOMProps = mergeProps(fieldProps, {\n      role: 'group' as const,\n      'aria-disabled': props.isDisabled || undefined,\n      'aria-describedby': describedBy\n    });\n  }\n\n  useEffect(() => {\n    if (autoFocusRef.current) {\n      focusManager.focusFirst();\n    }\n    autoFocusRef.current = false;\n  }, [focusManager]);\n\n  useFormReset(props.inputRef, state.value, state.setValue);\n  useFormValidation({\n    ...props,\n    focus() {\n      focusManager.focusFirst();\n    }\n  }, state, props.inputRef);\n\n  let inputProps: InputHTMLAttributes<HTMLInputElement> = {\n    type: 'hidden',\n    name: props.name,\n    value: state.value?.toString() || ''\n  };\n\n  if (props.validationBehavior === 'native') {\n    // Use a hidden <input type=\"text\"> rather than <input type=\"hidden\">\n    // so that an empty value blocks HTML form submission when the field is required.\n    inputProps.type = 'text';\n    inputProps.hidden = true;\n    inputProps.required = props.isRequired;\n    // Ignore react warning.\n    inputProps.onChange = () => {};\n  }\n\n  let domProps = filterDOMProps(props);\n  return {\n    labelProps: {\n      ...labelProps,\n      onClick: () => {\n        focusManager.focusFirst();\n      }\n    },\n    fieldProps: mergeProps(domProps, fieldDOMProps, groupProps, focusWithinProps, {\n      onKeyDown(e: KeyboardEvent) {\n        if (props.onKeyDown) {\n          props.onKeyDown(e);\n        }\n      },\n      onKeyUp(e: KeyboardEvent) {\n        if (props.onKeyUp) {\n          props.onKeyUp(e);\n        }\n      }\n    }),\n    inputProps,\n    descriptionProps,\n    errorMessageProps,\n    isInvalid,\n    validationErrors,\n    validationDetails\n  };\n}\n\nexport interface AriaTimeFieldOptions<T extends TimeValue> extends AriaTimeFieldProps<T> {\n  /** A ref for the hidden input element for HTML form submission. */\n  inputRef?: RefObject<HTMLInputElement>\n}\n\n/**\n * Provides the behavior and accessibility implementation for a time field component.\n * A time field allows users to enter and edit time values using a keyboard.\n * Each part of a time value is displayed in an individually editable segment.\n */\nexport function useTimeField<T extends TimeValue>(props: AriaTimeFieldOptions<T>, state: TimeFieldState, ref: RefObject<Element>): DateFieldAria {\n  let res = useDateField(props, state, ref);\n  res.inputProps.value = state.timeValue?.toString() || '';\n  return res;\n}\n"],"names":[],"version":3,"file":"useDateField.module.js.map"}
+{"mappings":"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","sources":["packages/@react-aria/datepicker/src/useDateField.ts"],"sourcesContent":["/*\n * Copyright 2020 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport {AriaDateFieldProps as AriaDateFieldPropsBase, AriaTimeFieldProps, DateValue, TimeValue} from '@react-types/datepicker';\nimport {createFocusManager, FocusManager} from '@react-aria/focus';\nimport {DateFieldState, TimeFieldState} from '@react-stately/datepicker';\nimport {DOMAttributes, GroupDOMAttributes, KeyboardEvent, RefObject, ValidationResult} from '@react-types/shared';\nimport {filterDOMProps, mergeProps, useDescription, useFormReset} from '@react-aria/utils';\nimport {InputHTMLAttributes, useEffect, useMemo, useRef} from 'react';\n// @ts-ignore\nimport intlMessages from '../intl/*.json';\nimport {useDatePickerGroup} from './useDatePickerGroup';\nimport {useField} from '@react-aria/label';\nimport {useFocusWithin} from '@react-aria/interactions';\nimport {useFormValidation} from '@react-aria/form';\nimport {useLocalizedStringFormatter} from '@react-aria/i18n';\n\n// Allows this hook to also be used with TimeField\nexport interface AriaDateFieldOptions<T extends DateValue> extends Omit<AriaDateFieldPropsBase<T>, 'value' | 'defaultValue' | 'onChange' | 'minValue' | 'maxValue' | 'placeholderValue' | 'validate'> {\n  /** A ref for the hidden input element for HTML form submission. */\n  inputRef?: RefObject<HTMLInputElement | null>\n}\n\nexport interface DateFieldAria extends ValidationResult {\n   /** Props for the field's visible label element, if any. */\n  labelProps: DOMAttributes,\n   /** Props for the field grouping element. */\n  fieldProps: GroupDOMAttributes,\n  /** Props for the hidden input element for HTML form submission. */\n  inputProps: InputHTMLAttributes<HTMLInputElement>,\n  /** Props for the description element, if any. */\n  descriptionProps: DOMAttributes,\n  /** Props for the error message element, if any. */\n  errorMessageProps: DOMAttributes\n}\n\n// Data that is passed between useDateField and useDateSegment.\ninterface HookData {\n  ariaLabel: string,\n  ariaLabelledBy: string,\n  ariaDescribedBy: string,\n  focusManager: FocusManager\n}\n\nexport const hookData = new WeakMap<DateFieldState, HookData>();\n\n// Private props that we pass from useDatePicker/useDateRangePicker.\n// Ideally we'd use a Symbol for this, but React doesn't support them: https://github.com/facebook/react/issues/7552\nexport const roleSymbol = '__role_' + Date.now();\nexport const focusManagerSymbol = '__focusManager_' + Date.now();\n\n/**\n * Provides the behavior and accessibility implementation for a date field component.\n * A date field allows users to enter and edit date and time values using a keyboard.\n * Each part of a date value is displayed in an individually editable segment.\n */\nexport function useDateField<T extends DateValue>(props: AriaDateFieldOptions<T>, state: DateFieldState, ref: RefObject<Element | null>): DateFieldAria {\n  let {isInvalid, validationErrors, validationDetails} = state.displayValidation;\n  let {labelProps, fieldProps, descriptionProps, errorMessageProps} = useField({\n    ...props,\n    labelElementType: 'span',\n    isInvalid,\n    errorMessage: props.errorMessage || validationErrors\n  });\n\n  let valueOnFocus = useRef<DateValue | null>(null);\n  let {focusWithinProps} = useFocusWithin({\n    ...props,\n    onFocusWithin(e) {\n      valueOnFocus.current = state.value;\n      props.onFocus?.(e);\n    },\n    onBlurWithin: (e) => {\n      state.confirmPlaceholder();\n      if (state.value !== valueOnFocus.current) {\n        state.commitValidation();\n      }\n      props.onBlur?.(e);\n    },\n    onFocusWithinChange: props.onFocusChange\n  });\n\n  let stringFormatter = useLocalizedStringFormatter(intlMessages, '@react-aria/datepicker');\n  let message = state.maxGranularity === 'hour' ? 'selectedTimeDescription' : 'selectedDateDescription';\n  let field = state.maxGranularity === 'hour' ? 'time' : 'date';\n  let description = state.value ? stringFormatter.format(message, {[field]: state.formatValue({month: 'long'})}) : '';\n  let descProps = useDescription(description);\n\n  // If within a date picker or date range picker, the date field will have role=\"presentation\" and an aria-describedby\n  // will be passed in that references the value (e.g. entire range). Otherwise, add the field's value description.\n  let describedBy = props[roleSymbol] === 'presentation'\n    ? fieldProps['aria-describedby']\n    : [descProps['aria-describedby'], fieldProps['aria-describedby']].filter(Boolean).join(' ') || undefined;\n  let propsFocusManager = props[focusManagerSymbol];\n  let focusManager = useMemo(() => propsFocusManager || createFocusManager(ref), [propsFocusManager, ref]);\n  let groupProps = useDatePickerGroup(state, ref, props[roleSymbol] === 'presentation');\n\n  // Pass labels and other information to segments.\n  hookData.set(state, {\n    ariaLabel: props['aria-label'],\n    ariaLabelledBy: [labelProps.id, props['aria-labelledby']].filter(Boolean).join(' ') || undefined,\n    ariaDescribedBy: describedBy,\n    focusManager\n  });\n\n  let autoFocusRef = useRef(props.autoFocus);\n\n  // When used within a date picker or date range picker, the field gets role=\"presentation\"\n  // rather than role=\"group\". Since the date picker/date range picker already has a role=\"group\"\n  // with a label and description, and the segments are already labeled by this as well, this\n  // avoids very verbose duplicate announcements.\n  let fieldDOMProps: GroupDOMAttributes;\n  if (props[roleSymbol] === 'presentation') {\n    fieldDOMProps = {\n      role: 'presentation'\n    };\n  } else {\n    fieldDOMProps = mergeProps(fieldProps, {\n      role: 'group' as const,\n      'aria-disabled': props.isDisabled || undefined,\n      'aria-describedby': describedBy\n    });\n  }\n\n  useEffect(() => {\n    if (autoFocusRef.current) {\n      focusManager.focusFirst();\n    }\n    autoFocusRef.current = false;\n  }, [focusManager]);\n\n  useFormReset(props.inputRef, state.value, state.setValue);\n  useFormValidation({\n    ...props,\n    focus() {\n      focusManager.focusFirst();\n    }\n  }, state, props.inputRef);\n\n  let inputProps: InputHTMLAttributes<HTMLInputElement> = {\n    type: 'hidden',\n    name: props.name,\n    value: state.value?.toString() || '',\n    disabled: props.isDisabled\n  };\n\n  if (props.validationBehavior === 'native') {\n    // Use a hidden <input type=\"text\"> rather than <input type=\"hidden\">\n    // so that an empty value blocks HTML form submission when the field is required.\n    inputProps.type = 'text';\n    inputProps.hidden = true;\n    inputProps.required = props.isRequired;\n    // Ignore react warning.\n    inputProps.onChange = () => {};\n  }\n\n  let domProps = filterDOMProps(props);\n  return {\n    labelProps: {\n      ...labelProps,\n      onClick: () => {\n        focusManager.focusFirst();\n      }\n    },\n    fieldProps: mergeProps(domProps, fieldDOMProps, groupProps, focusWithinProps, {\n      onKeyDown(e: KeyboardEvent) {\n        if (props.onKeyDown) {\n          props.onKeyDown(e);\n        }\n      },\n      onKeyUp(e: KeyboardEvent) {\n        if (props.onKeyUp) {\n          props.onKeyUp(e);\n        }\n      }\n    }),\n    inputProps,\n    descriptionProps,\n    errorMessageProps,\n    isInvalid,\n    validationErrors,\n    validationDetails\n  };\n}\n\nexport interface AriaTimeFieldOptions<T extends TimeValue> extends AriaTimeFieldProps<T> {\n  /** A ref for the hidden input element for HTML form submission. */\n  inputRef?: RefObject<HTMLInputElement | null>\n}\n\n/**\n * Provides the behavior and accessibility implementation for a time field component.\n * A time field allows users to enter and edit time values using a keyboard.\n * Each part of a time value is displayed in an individually editable segment.\n */\nexport function useTimeField<T extends TimeValue>(props: AriaTimeFieldOptions<T>, state: TimeFieldState, ref: RefObject<Element | null>): DateFieldAria {\n  let res = useDateField(props, state, ref);\n  res.inputProps.value = state.timeValue?.toString() || '';\n  return res;\n}\n"],"names":[],"version":3,"file":"useDateField.module.js.map"}

package/dist/useDatePicker.main.js

@@ -4,10 +4,10 @@ var $715562ad3b4cced4$exports = require("./useDatePickerGroup.main.js");
 var $bxHoL$reactariafocus = require("@react-aria/focus");
 var $bxHoL$reactariautils = require("@react-aria/utils");
 var $bxHoL$reactstatelyform = require("@react-stately/form");
-var $bxHoL$react = require("react");
 var $bxHoL$reactarialabel = require("@react-aria/label");
 var $bxHoL$reactariainteractions = require("@react-aria/interactions");
 var $bxHoL$reactariai18n = require("@react-aria/i18n");
+var $bxHoL$react = require("react");
 
 
 function $parcel$interopDefault(a) {
@@ -43,28 +43,28 @@ function $e90ae7c26a69c6b1$export$42df105a73306d51(props, state, ref) {
     let buttonId = (0, $bxHoL$reactariautils.useId)();
     let dialogId = (0, $bxHoL$reactariautils.useId)();
     let fieldId = (0, $bxHoL$reactariautils.useId)();
-    let stringFormatter = (0, $bxHoL$reactariai18n.useLocalizedStringFormatter)((0, ($parcel$interopDefault($c1905b78f6d2f5bf$exports))), "@react-aria/datepicker");
+    let stringFormatter = (0, $bxHoL$reactariai18n.useLocalizedStringFormatter)((0, ($parcel$interopDefault($c1905b78f6d2f5bf$exports))), '@react-aria/datepicker');
     let { isInvalid: isInvalid, validationErrors: validationErrors, validationDetails: validationDetails } = state.displayValidation;
     let { labelProps: labelProps, fieldProps: fieldProps, descriptionProps: descriptionProps, errorMessageProps: errorMessageProps } = (0, $bxHoL$reactarialabel.useField)({
         ...props,
-        labelElementType: "span",
+        labelElementType: 'span',
         isInvalid: isInvalid,
         errorMessage: props.errorMessage || validationErrors
     });
     let groupProps = (0, $715562ad3b4cced4$exports.useDatePickerGroup)(state, ref);
-    let labelledBy = fieldProps["aria-labelledby"] || fieldProps.id;
+    let labelledBy = fieldProps['aria-labelledby'] || fieldProps.id;
     let { locale: locale } = (0, $bxHoL$reactariai18n.useLocale)();
     let date = state.formatValue(locale, {
-        month: "long"
+        month: 'long'
     });
-    let description = date ? stringFormatter.format("selectedDateDescription", {
+    let description = date ? stringFormatter.format('selectedDateDescription', {
         date: date
-    }) : "";
+    }) : '';
     let descProps = (0, $bxHoL$reactariautils.useDescription)(description);
     let ariaDescribedBy = [
-        descProps["aria-describedby"],
-        fieldProps["aria-describedby"]
-    ].filter(Boolean).join(" ") || undefined;
+        descProps['aria-describedby'],
+        fieldProps['aria-describedby']
+    ].filter(Boolean).join(' ') || undefined;
     let domProps = (0, $bxHoL$reactariautils.filterDOMProps)(props);
     let focusManager = (0, $bxHoL$react.useMemo)(()=>(0, $bxHoL$reactariafocus.createFocusManager)(ref), [
         ref
@@ -78,10 +78,10 @@ function $e90ae7c26a69c6b1$export$42df105a73306d51(props, state, ref) {
     });
     return {
         groupProps: (0, $bxHoL$reactariautils.mergeProps)(domProps, groupProps, fieldProps, descProps, focusWithinProps, {
-            role: "group",
-            "aria-disabled": props.isDisabled || null,
-            "aria-labelledby": labelledBy,
-            "aria-describedby": ariaDescribedBy,
+            role: 'group',
+            'aria-disabled': props.isDisabled || null,
+            'aria-labelledby': labelledBy,
+            'aria-describedby': ariaDescribedBy,
             onKeyDown (e) {
                 if (state.isOpen) return;
                 if (props.onKeyDown) props.onKeyDown(e);
@@ -100,8 +100,8 @@ function $e90ae7c26a69c6b1$export$42df105a73306d51(props, state, ref) {
         fieldProps: {
             ...fieldProps,
             id: fieldId,
-            [(0, $4acc2f407c169e55$exports.roleSymbol)]: "presentation",
-            "aria-describedby": ariaDescribedBy,
+            [(0, $4acc2f407c169e55$exports.roleSymbol)]: 'presentation',
+            'aria-describedby': ariaDescribedBy,
             value: state.value,
             onChange: state.setValue,
             placeholderValue: props.placeholderValue,
@@ -123,17 +123,17 @@ function $e90ae7c26a69c6b1$export$42df105a73306d51(props, state, ref) {
         buttonProps: {
             ...descProps,
             id: buttonId,
-            "aria-haspopup": "dialog",
-            "aria-label": stringFormatter.format("calendar"),
-            "aria-labelledby": `${buttonId} ${labelledBy}`,
-            "aria-describedby": ariaDescribedBy,
-            "aria-expanded": state.isOpen,
+            '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}`
+            'aria-labelledby': `${buttonId} ${labelledBy}`
         },
         calendarProps: {
             autoFocus: true,
@@ -146,7 +146,7 @@ function $e90ae7c26a69c6b1$export$42df105a73306d51(props, state, ref) {
             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(" ")
+            errorMessage: typeof props.errorMessage === 'function' ? props.errorMessage(state.displayValidation) : props.errorMessage || state.displayValidation.validationErrors.join(' ')
         },
         isInvalid: isInvalid,
         validationErrors: validationErrors,

package/dist/useDatePicker.main.js.map

@@ -1 +1 @@
-{"mappings":"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","sources":["packages/@react-aria/datepicker/src/useDatePicker.ts"],"sourcesContent":["/*\n * Copyright 2020 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport {AriaButtonProps} from '@react-types/button';\nimport {AriaDatePickerProps, DateValue} from '@react-types/datepicker';\nimport {AriaDialogProps} from '@react-types/dialog';\nimport {CalendarProps} from '@react-types/calendar';\nimport {createFocusManager} from '@react-aria/focus';\nimport {DatePickerState} from '@react-stately/datepicker';\nimport {DOMAttributes, GroupDOMAttributes, KeyboardEvent, ValidationResult} from '@react-types/shared';\nimport {filterDOMProps, mergeProps, useDescription, useId} from '@react-aria/utils';\n// @ts-ignore\nimport intlMessages from '../intl/*.json';\nimport {privateValidationStateProp} from '@react-stately/form';\nimport {RefObject, useMemo} from 'react';\nimport {roleSymbol} from './useDateField';\nimport {useDatePickerGroup} from './useDatePickerGroup';\nimport {useField} from '@react-aria/label';\nimport {useFocusWithin} from '@react-aria/interactions';\nimport {useLocale, useLocalizedStringFormatter} from '@react-aria/i18n';\n\nexport interface DatePickerAria extends ValidationResult {\n  /** Props for the date picker's visible label element, if any. */\n  labelProps: DOMAttributes,\n  /** Props for the grouping element containing the date field and button. */\n  groupProps: GroupDOMAttributes,\n  /** Props for the date field. */\n  fieldProps: AriaDatePickerProps<DateValue>,\n  /** Props for the popover trigger button. */\n  buttonProps: AriaButtonProps,\n  /** Props for the description element, if any. */\n  descriptionProps: DOMAttributes,\n  /** Props for the error message element, if any. */\n  errorMessageProps: DOMAttributes,\n  /** Props for the popover dialog. */\n  dialogProps: AriaDialogProps,\n  /** Props for the calendar within the popover dialog. */\n  calendarProps: CalendarProps<DateValue>\n}\n\n/**\n * Provides the behavior and accessibility implementation for a date picker component.\n * A date picker combines a DateField and a Calendar popover to allow users to enter or select a date and time value.\n */\nexport function useDatePicker<T extends DateValue>(props: AriaDatePickerProps<T>, state: DatePickerState, ref: RefObject<Element>): DatePickerAria {\n  let buttonId = useId();\n  let dialogId = useId();\n  let fieldId = useId();\n  let stringFormatter = useLocalizedStringFormatter(intlMessages, '@react-aria/datepicker');\n\n  let {isInvalid, validationErrors, validationDetails} = state.displayValidation;\n  let {labelProps, fieldProps, descriptionProps, errorMessageProps} = useField({\n    ...props,\n    labelElementType: 'span',\n    isInvalid,\n    errorMessage: props.errorMessage || validationErrors\n  });\n\n  let groupProps = useDatePickerGroup(state, ref);\n\n  let labelledBy = fieldProps['aria-labelledby'] || fieldProps.id;\n\n  let {locale} = useLocale();\n  let date = state.formatValue(locale, {month: 'long'});\n  let description = date ? stringFormatter.format('selectedDateDescription', {date}) : '';\n  let descProps = useDescription(description);\n  let ariaDescribedBy = [descProps['aria-describedby'], fieldProps['aria-describedby']].filter(Boolean).join(' ') || undefined;\n  let domProps = filterDOMProps(props);\n  let focusManager = useMemo(() => createFocusManager(ref), [ref]);\n\n  let {focusWithinProps} = useFocusWithin({\n    ...props,\n    isDisabled: state.isOpen,\n    onBlurWithin: props.onBlur,\n    onFocusWithin: props.onFocus,\n    onFocusWithinChange: props.onFocusChange\n  });\n\n  return {\n    groupProps: mergeProps(domProps, groupProps, fieldProps, descProps, focusWithinProps, {\n      role: 'group' as const,\n      'aria-disabled': props.isDisabled || null,\n      'aria-labelledby': labelledBy,\n      'aria-describedby': ariaDescribedBy,\n      onKeyDown(e: KeyboardEvent) {\n        if (state.isOpen) {\n          return;\n        }\n\n        if (props.onKeyDown) {\n          props.onKeyDown(e);\n        }\n      },\n      onKeyUp(e: KeyboardEvent) {\n        if (state.isOpen) {\n          return;\n        }\n\n        if (props.onKeyUp) {\n          props.onKeyUp(e);\n        }\n      }\n    }),\n    labelProps: {\n      ...labelProps,\n      onClick: () => {\n        focusManager.focusFirst();\n      }\n    },\n    fieldProps: {\n      ...fieldProps,\n      id: fieldId,\n      [roleSymbol]: 'presentation',\n      'aria-describedby': ariaDescribedBy,\n      value: state.value,\n      onChange: state.setValue,\n      placeholderValue: props.placeholderValue,\n      hideTimeZone: props.hideTimeZone,\n      hourCycle: props.hourCycle,\n      shouldForceLeadingZeros: props.shouldForceLeadingZeros,\n      granularity: props.granularity,\n      isDisabled: props.isDisabled,\n      isReadOnly: props.isReadOnly,\n      isRequired: props.isRequired,\n      validationBehavior: props.validationBehavior,\n      // DatePicker owns the validation state for the date field.\n      [privateValidationStateProp]: state,\n      autoFocus: props.autoFocus,\n      name: props.name\n    },\n    descriptionProps,\n    errorMessageProps,\n    buttonProps: {\n      ...descProps,\n      id: buttonId,\n      'aria-haspopup': 'dialog',\n      'aria-label': stringFormatter.format('calendar'),\n      'aria-labelledby': `${buttonId} ${labelledBy}`,\n      'aria-describedby': ariaDescribedBy,\n      'aria-expanded': state.isOpen,\n      isDisabled: props.isDisabled || props.isReadOnly,\n      onPress: () => state.setOpen(true)\n    },\n    dialogProps: {\n      id: dialogId,\n      'aria-labelledby': `${buttonId} ${labelledBy}`\n    },\n    calendarProps: {\n      autoFocus: true,\n      value: state.dateValue,\n      onChange: state.setDateValue,\n      minValue: props.minValue,\n      maxValue: props.maxValue,\n      isDisabled: props.isDisabled,\n      isReadOnly: props.isReadOnly,\n      isDateUnavailable: props.isDateUnavailable,\n      defaultFocusedValue: state.dateValue ? undefined : props.placeholderValue,\n      isInvalid: state.isInvalid,\n      errorMessage: typeof props.errorMessage === 'function' ? props.errorMessage(state.displayValidation) : (props.errorMessage || state.displayValidation.validationErrors.join(' '))\n    },\n    isInvalid,\n    validationErrors,\n    validationDetails\n  };\n}\n"],"names":[],"version":3,"file":"useDatePicker.main.js.map"}
+{"mappings":"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","sources":["packages/@react-aria/datepicker/src/useDatePicker.ts"],"sourcesContent":["/*\n * Copyright 2020 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport {AriaButtonProps} from '@react-types/button';\nimport {AriaDatePickerProps, DateValue} from '@react-types/datepicker';\nimport {AriaDialogProps} from '@react-types/dialog';\nimport {CalendarProps} from '@react-types/calendar';\nimport {createFocusManager} from '@react-aria/focus';\nimport {DatePickerState} from '@react-stately/datepicker';\nimport {DOMAttributes, GroupDOMAttributes, KeyboardEvent, RefObject, ValidationResult} from '@react-types/shared';\nimport {filterDOMProps, mergeProps, useDescription, useId} from '@react-aria/utils';\n// @ts-ignore\nimport intlMessages from '../intl/*.json';\nimport {privateValidationStateProp} from '@react-stately/form';\nimport {roleSymbol} from './useDateField';\nimport {useDatePickerGroup} from './useDatePickerGroup';\nimport {useField} from '@react-aria/label';\nimport {useFocusWithin} from '@react-aria/interactions';\nimport {useLocale, useLocalizedStringFormatter} from '@react-aria/i18n';\nimport {useMemo} from 'react';\n\nexport interface DatePickerAria extends ValidationResult {\n  /** Props for the date picker's visible label element, if any. */\n  labelProps: DOMAttributes,\n  /** Props for the grouping element containing the date field and button. */\n  groupProps: GroupDOMAttributes,\n  /** Props for the date field. */\n  fieldProps: AriaDatePickerProps<DateValue>,\n  /** Props for the popover trigger button. */\n  buttonProps: AriaButtonProps,\n  /** Props for the description element, if any. */\n  descriptionProps: DOMAttributes,\n  /** Props for the error message element, if any. */\n  errorMessageProps: DOMAttributes,\n  /** Props for the popover dialog. */\n  dialogProps: AriaDialogProps,\n  /** Props for the calendar within the popover dialog. */\n  calendarProps: CalendarProps<DateValue>\n}\n\n/**\n * Provides the behavior and accessibility implementation for a date picker component.\n * A date picker combines a DateField and a Calendar popover to allow users to enter or select a date and time value.\n */\nexport function useDatePicker<T extends DateValue>(props: AriaDatePickerProps<T>, state: DatePickerState, ref: RefObject<Element | null>): DatePickerAria {\n  let buttonId = useId();\n  let dialogId = useId();\n  let fieldId = useId();\n  let stringFormatter = useLocalizedStringFormatter(intlMessages, '@react-aria/datepicker');\n\n  let {isInvalid, validationErrors, validationDetails} = state.displayValidation;\n  let {labelProps, fieldProps, descriptionProps, errorMessageProps} = useField({\n    ...props,\n    labelElementType: 'span',\n    isInvalid,\n    errorMessage: props.errorMessage || validationErrors\n  });\n\n  let groupProps = useDatePickerGroup(state, ref);\n\n  let labelledBy = fieldProps['aria-labelledby'] || fieldProps.id;\n\n  let {locale} = useLocale();\n  let date = state.formatValue(locale, {month: 'long'});\n  let description = date ? stringFormatter.format('selectedDateDescription', {date}) : '';\n  let descProps = useDescription(description);\n  let ariaDescribedBy = [descProps['aria-describedby'], fieldProps['aria-describedby']].filter(Boolean).join(' ') || undefined;\n  let domProps = filterDOMProps(props);\n  let focusManager = useMemo(() => createFocusManager(ref), [ref]);\n\n  let {focusWithinProps} = useFocusWithin({\n    ...props,\n    isDisabled: state.isOpen,\n    onBlurWithin: props.onBlur,\n    onFocusWithin: props.onFocus,\n    onFocusWithinChange: props.onFocusChange\n  });\n\n  return {\n    groupProps: mergeProps(domProps, groupProps, fieldProps, descProps, focusWithinProps, {\n      role: 'group' as const,\n      'aria-disabled': props.isDisabled || null,\n      'aria-labelledby': labelledBy,\n      'aria-describedby': ariaDescribedBy,\n      onKeyDown(e: KeyboardEvent) {\n        if (state.isOpen) {\n          return;\n        }\n\n        if (props.onKeyDown) {\n          props.onKeyDown(e);\n        }\n      },\n      onKeyUp(e: KeyboardEvent) {\n        if (state.isOpen) {\n          return;\n        }\n\n        if (props.onKeyUp) {\n          props.onKeyUp(e);\n        }\n      }\n    }),\n    labelProps: {\n      ...labelProps,\n      onClick: () => {\n        focusManager.focusFirst();\n      }\n    },\n    fieldProps: {\n      ...fieldProps,\n      id: fieldId,\n      [roleSymbol]: 'presentation',\n      'aria-describedby': ariaDescribedBy,\n      value: state.value,\n      onChange: state.setValue,\n      placeholderValue: props.placeholderValue,\n      hideTimeZone: props.hideTimeZone,\n      hourCycle: props.hourCycle,\n      shouldForceLeadingZeros: props.shouldForceLeadingZeros,\n      granularity: props.granularity,\n      isDisabled: props.isDisabled,\n      isReadOnly: props.isReadOnly,\n      isRequired: props.isRequired,\n      validationBehavior: props.validationBehavior,\n      // DatePicker owns the validation state for the date field.\n      [privateValidationStateProp]: state,\n      autoFocus: props.autoFocus,\n      name: props.name\n    },\n    descriptionProps,\n    errorMessageProps,\n    buttonProps: {\n      ...descProps,\n      id: buttonId,\n      'aria-haspopup': 'dialog',\n      'aria-label': stringFormatter.format('calendar'),\n      'aria-labelledby': `${buttonId} ${labelledBy}`,\n      'aria-describedby': ariaDescribedBy,\n      'aria-expanded': state.isOpen,\n      isDisabled: props.isDisabled || props.isReadOnly,\n      onPress: () => state.setOpen(true)\n    },\n    dialogProps: {\n      id: dialogId,\n      'aria-labelledby': `${buttonId} ${labelledBy}`\n    },\n    calendarProps: {\n      autoFocus: true,\n      value: state.dateValue,\n      onChange: state.setDateValue,\n      minValue: props.minValue,\n      maxValue: props.maxValue,\n      isDisabled: props.isDisabled,\n      isReadOnly: props.isReadOnly,\n      isDateUnavailable: props.isDateUnavailable,\n      defaultFocusedValue: state.dateValue ? undefined : props.placeholderValue,\n      isInvalid: state.isInvalid,\n      errorMessage: typeof props.errorMessage === 'function' ? props.errorMessage(state.displayValidation) : (props.errorMessage || state.displayValidation.validationErrors.join(' '))\n    },\n    isInvalid,\n    validationErrors,\n    validationDetails\n  };\n}\n"],"names":[],"version":3,"file":"useDatePicker.main.js.map"}

package/dist/useDatePicker.mjs

@@ -4,10 +4,10 @@ import {useDatePickerGroup as $3dfb0f96be0d6a08$export$4a931266a3838b86} from ".
 import {createFocusManager as $4lVjK$createFocusManager} from "@react-aria/focus";
 import {useId as $4lVjK$useId, useDescription as $4lVjK$useDescription, filterDOMProps as $4lVjK$filterDOMProps, mergeProps as $4lVjK$mergeProps} from "@react-aria/utils";
 import {privateValidationStateProp as $4lVjK$privateValidationStateProp} from "@react-stately/form";
-import {useMemo as $4lVjK$useMemo} from "react";
 import {useField as $4lVjK$useField} from "@react-aria/label";
 import {useFocusWithin as $4lVjK$useFocusWithin} from "@react-aria/interactions";
 import {useLocalizedStringFormatter as $4lVjK$useLocalizedStringFormatter, useLocale as $4lVjK$useLocale} from "@react-aria/i18n";
+import {useMemo as $4lVjK$useMemo} from "react";
 
 
 function $parcel$interopDefault(a) {
@@ -37,28 +37,28 @@ function $6057a3d2a53a12fd$export$42df105a73306d51(props, state, ref) {
     let buttonId = (0, $4lVjK$useId)();
     let dialogId = (0, $4lVjK$useId)();
     let fieldId = (0, $4lVjK$useId)();
-    let stringFormatter = (0, $4lVjK$useLocalizedStringFormatter)((0, ($parcel$interopDefault($4lVjK$intlStringsmodulejs))), "@react-aria/datepicker");
+    let stringFormatter = (0, $4lVjK$useLocalizedStringFormatter)((0, ($parcel$interopDefault($4lVjK$intlStringsmodulejs))), '@react-aria/datepicker');
     let { isInvalid: isInvalid, validationErrors: validationErrors, validationDetails: validationDetails } = state.displayValidation;
     let { labelProps: labelProps, fieldProps: fieldProps, descriptionProps: descriptionProps, errorMessageProps: errorMessageProps } = (0, $4lVjK$useField)({
         ...props,
-        labelElementType: "span",
+        labelElementType: 'span',
         isInvalid: isInvalid,
         errorMessage: props.errorMessage || validationErrors
     });
     let groupProps = (0, $3dfb0f96be0d6a08$export$4a931266a3838b86)(state, ref);
-    let labelledBy = fieldProps["aria-labelledby"] || fieldProps.id;
+    let labelledBy = fieldProps['aria-labelledby'] || fieldProps.id;
     let { locale: locale } = (0, $4lVjK$useLocale)();
     let date = state.formatValue(locale, {
-        month: "long"
+        month: 'long'
     });
-    let description = date ? stringFormatter.format("selectedDateDescription", {
+    let description = date ? stringFormatter.format('selectedDateDescription', {
         date: date
-    }) : "";
+    }) : '';
     let descProps = (0, $4lVjK$useDescription)(description);
     let ariaDescribedBy = [
-        descProps["aria-describedby"],
-        fieldProps["aria-describedby"]
-    ].filter(Boolean).join(" ") || undefined;
+        descProps['aria-describedby'],
+        fieldProps['aria-describedby']
+    ].filter(Boolean).join(' ') || undefined;
     let domProps = (0, $4lVjK$filterDOMProps)(props);
     let focusManager = (0, $4lVjK$useMemo)(()=>(0, $4lVjK$createFocusManager)(ref), [
         ref
@@ -72,10 +72,10 @@ function $6057a3d2a53a12fd$export$42df105a73306d51(props, state, ref) {
     });
     return {
         groupProps: (0, $4lVjK$mergeProps)(domProps, groupProps, fieldProps, descProps, focusWithinProps, {
-            role: "group",
-            "aria-disabled": props.isDisabled || null,
-            "aria-labelledby": labelledBy,
-            "aria-describedby": ariaDescribedBy,
+            role: 'group',
+            'aria-disabled': props.isDisabled || null,
+            'aria-labelledby': labelledBy,
+            'aria-describedby': ariaDescribedBy,
             onKeyDown (e) {
                 if (state.isOpen) return;
                 if (props.onKeyDown) props.onKeyDown(e);
@@ -94,8 +94,8 @@ function $6057a3d2a53a12fd$export$42df105a73306d51(props, state, ref) {
         fieldProps: {
             ...fieldProps,
             id: fieldId,
-            [(0, $16f0b7bb276bc17e$export$300019f83c56d282)]: "presentation",
-            "aria-describedby": ariaDescribedBy,
+            [(0, $16f0b7bb276bc17e$export$300019f83c56d282)]: 'presentation',
+            'aria-describedby': ariaDescribedBy,
             value: state.value,
             onChange: state.setValue,
             placeholderValue: props.placeholderValue,
@@ -117,17 +117,17 @@ function $6057a3d2a53a12fd$export$42df105a73306d51(props, state, ref) {
         buttonProps: {
             ...descProps,
             id: buttonId,
-            "aria-haspopup": "dialog",
-            "aria-label": stringFormatter.format("calendar"),
-            "aria-labelledby": `${buttonId} ${labelledBy}`,
-            "aria-describedby": ariaDescribedBy,
-            "aria-expanded": state.isOpen,
+            '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}`
+            'aria-labelledby': `${buttonId} ${labelledBy}`
         },
         calendarProps: {
             autoFocus: true,
@@ -140,7 +140,7 @@ function $6057a3d2a53a12fd$export$42df105a73306d51(props, state, ref) {
             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(" ")
+            errorMessage: typeof props.errorMessage === 'function' ? props.errorMessage(state.displayValidation) : props.errorMessage || state.displayValidation.validationErrors.join(' ')
         },
         isInvalid: isInvalid,
         validationErrors: validationErrors,
@@ -150,4 +150,4 @@ function $6057a3d2a53a12fd$export$42df105a73306d51(props, state, ref) {
 
 
 export {$6057a3d2a53a12fd$export$42df105a73306d51 as useDatePicker};
-//# sourceMappingURL=useDatePicker.mjs.map
+//# sourceMappingURL=useDatePicker.module.js.map