@react-aria/datepicker 3.0.0-nightly.3175 → 3.0.0-nightly.3180

package/dist/module.js

@@ -2,9 +2,9 @@ import {createFocusManager as $cIPI0$createFocusManager, getFocusableTreeWalker
 import {useId as $cIPI0$useId, useDescription as $cIPI0$useDescription, mergeProps as $cIPI0$mergeProps, isMac as $cIPI0$isMac, scrollIntoView as $cIPI0$scrollIntoView, getScrollParent as $cIPI0$getScrollParent, useEvent as $cIPI0$useEvent, isIOS as $cIPI0$isIOS, useLabels as $cIPI0$useLabels} from "@react-aria/utils";
 import {useField as $cIPI0$useField} from "@react-aria/label";
 import {useMessageFormatter as $cIPI0$useMessageFormatter, useLocale as $cIPI0$useLocale, useDateFormatter as $cIPI0$useDateFormatter, useFilter as $cIPI0$useFilter} from "@react-aria/i18n";
-import {usePress as $cIPI0$usePress, useFocusWithin as $cIPI0$useFocusWithin} from "@react-aria/interactions";
+import $cIPI0$react, {useMemo as $cIPI0$useMemo, useRef as $cIPI0$useRef, useEffect as $cIPI0$useEffect} from "react";
+import {useFocusWithin as $cIPI0$useFocusWithin, usePress as $cIPI0$usePress} from "@react-aria/interactions";
 import {NumberParser as $cIPI0$NumberParser} from "@internationalized/number";
-import $cIPI0$react, {useRef as $cIPI0$useRef, useMemo as $cIPI0$useMemo, useEffect as $cIPI0$useEffect} from "react";
 import {useSpinButton as $cIPI0$useSpinButton} from "@react-aria/spinbutton";
 import {MessageDictionary as $cIPI0$MessageDictionary} from "@internationalized/message";
 
@@ -194,10 +194,13 @@ $204383cf4f6b0d06$exports = {
 
 
 
+
+
+
 function $3dfb0f96be0d6a08$export$4a931266a3838b86(state, ref1) {
     // Open the popover on alt + arrow down
     let onKeyDown = (e)=>{
-        if (e.altKey && e.key === 'ArrowDown' && 'setOpen' in state) {
+        if (e.altKey && (e.key === 'ArrowDown' || e.key === 'ArrowUp') && 'setOpen' in state) {
             e.preventDefault();
             e.stopPropagation();
             state.setOpen(true);
@@ -247,6 +250,85 @@ function $3dfb0f96be0d6a08$export$4a931266a3838b86(state, ref1) {
 
 
 
+const $16f0b7bb276bc17e$export$653eddfc964b0f8a = new WeakMap();
+const $16f0b7bb276bc17e$export$300019f83c56d282 = '__role_' + Date.now();
+const $16f0b7bb276bc17e$export$7b3062cd49e80452 = '__focusManager_' + Date.now();
+function $16f0b7bb276bc17e$export$5591b0b878c1a989(props, state, ref) {
+    let { labelProps: labelProps , fieldProps: fieldProps , descriptionProps: descriptionProps , errorMessageProps: errorMessageProps  } = $cIPI0$useField({
+        ...props,
+        labelElementType: 'span'
+    });
+    let groupProps = $3dfb0f96be0d6a08$export$4a931266a3838b86(state, ref);
+    let { focusWithinProps: focusWithinProps  } = $cIPI0$useFocusWithin({
+        onBlurWithin () {
+            state.confirmPlaceholder();
+        }
+    });
+    let descProps = $cIPI0$useDescription(state.formatValue({
+        month: 'long'
+    }));
+    // 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 propsFocusManager = props[$16f0b7bb276bc17e$export$7b3062cd49e80452];
+    let focusManager = $cIPI0$useMemo(()=>propsFocusManager || $cIPI0$createFocusManager(ref)
+    , [
+        propsFocusManager,
+        ref
+    ]);
+    // Pass labels and other information to segments.
+    $16f0b7bb276bc17e$export$653eddfc964b0f8a.set(state, {
+        ariaLabel: props['aria-label'],
+        ariaLabelledBy: [
+            props['aria-labelledby'],
+            labelProps.id
+        ].filter(Boolean).join(' ') || undefined,
+        ariaDescribedBy: describedBy,
+        focusManager: focusManager
+    });
+    let autoFocusRef = $cIPI0$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;
+    if (props[$16f0b7bb276bc17e$export$300019f83c56d282] === 'presentation') fieldDOMProps = {
+        role: 'presentation'
+    };
+    else fieldDOMProps = $cIPI0$mergeProps(fieldProps, {
+        role: 'group',
+        'aria-disabled': props.isDisabled || undefined,
+        'aria-describedby': describedBy
+    });
+    $cIPI0$useEffect(()=>{
+        if (autoFocusRef.current) focusManager.focusFirst();
+        autoFocusRef.current = false;
+    }, [
+        focusManager
+    ]);
+    return {
+        labelProps: {
+            ...labelProps,
+            onClick: ()=>{
+                focusManager.focusFirst();
+            }
+        },
+        fieldProps: $cIPI0$mergeProps(fieldDOMProps, groupProps, focusWithinProps),
+        descriptionProps: descriptionProps,
+        errorMessageProps: errorMessageProps
+    };
+}
+function $16f0b7bb276bc17e$export$4c842f6a241dc825(props, state, ref) {
+    return $16f0b7bb276bc17e$export$5591b0b878c1a989(props, state, ref);
+}
+
+
+
+
+
 function $6057a3d2a53a12fd$export$42df105a73306d51(props, state, ref) {
     let buttonId = $cIPI0$useId();
     let dialogId = $cIPI0$useId();
@@ -266,7 +348,7 @@ function $6057a3d2a53a12fd$export$42df105a73306d51(props, state, ref) {
         fieldProps['aria-describedby']
     ].filter(Boolean).join(' ') || undefined;
     return {
-        groupProps: $cIPI0$mergeProps(groupProps, descProps, {
+        groupProps: $cIPI0$mergeProps(groupProps, fieldProps, descProps, {
             role: 'group',
             'aria-disabled': props.isDisabled || null,
             'aria-labelledby': labelledBy,
@@ -281,6 +363,8 @@ function $6057a3d2a53a12fd$export$42df105a73306d51(props, state, ref) {
         },
         fieldProps: {
             ...fieldProps,
+            [$16f0b7bb276bc17e$export$300019f83c56d282]: 'presentation',
+            'aria-describedby': ariaDescribedBy,
             value: state.value,
             onChange: state.setValue,
             minValue: props.minValue,
@@ -331,191 +415,6 @@ function $6057a3d2a53a12fd$export$42df105a73306d51(props, state, ref) {
 
 
 
-
-
-
-
-
-const $887cac91b7cc8801$export$7b3062cd49e80452 = '__focusManager_' + Date.now();
-function $887cac91b7cc8801$export$12fd5f0e9f4bb192(props, state, ref) {
-    var ref1, ref2;
-    let formatMessage = $cIPI0$useMessageFormatter((/*@__PURE__*/$parcel$interopDefault($204383cf4f6b0d06$exports)));
-    let { labelProps: labelProps , fieldProps: fieldProps , descriptionProps: descriptionProps , errorMessageProps: errorMessageProps  } = $cIPI0$useField({
-        ...props,
-        labelElementType: 'span'
-    });
-    let labelledBy = fieldProps['aria-labelledby'] || fieldProps.id;
-    let { locale: locale  } = $cIPI0$useLocale();
-    let description = state.formatValue(locale, {
-        month: 'long'
-    });
-    let descProps = $cIPI0$useDescription(description);
-    let startFieldProps = $cIPI0$useLabels({
-        'aria-label': formatMessage('startDate'),
-        'aria-labelledby': labelledBy
-    });
-    let endFieldProps = $cIPI0$useLabels({
-        'aria-label': formatMessage('endDate'),
-        'aria-labelledby': labelledBy
-    });
-    let buttonId = $cIPI0$useId();
-    let dialogId = $cIPI0$useId();
-    let groupProps = $3dfb0f96be0d6a08$export$4a931266a3838b86(state, ref);
-    let { focusWithinProps: focusWithinProps  } = $cIPI0$useFocusWithin({
-        onBlurWithin () {
-            state.confirmPlaceholder();
-        }
-    });
-    let ariaDescribedBy = [
-        descProps['aria-describedby'],
-        fieldProps['aria-describedby']
-    ].filter(Boolean).join(' ') || undefined;
-    let focusManager = $cIPI0$useMemo(()=>$cIPI0$createFocusManager(ref)
-    , [
-        ref
-    ]);
-    let commonFieldProps = {
-        [$887cac91b7cc8801$export$7b3062cd49e80452]: focusManager,
-        minValue: props.minValue,
-        maxValue: props.maxValue,
-        placeholderValue: props.placeholderValue,
-        hideTimeZone: props.hideTimeZone,
-        hourCycle: props.hourCycle,
-        granularity: props.granularity,
-        isDisabled: props.isDisabled,
-        isReadOnly: props.isReadOnly,
-        isRequired: props.isRequired,
-        validationState: state.validationState
-    };
-    return {
-        groupProps: $cIPI0$mergeProps(groupProps, fieldProps, descProps, focusWithinProps, {
-            role: 'group',
-            'aria-disabled': props.isDisabled || null,
-            'aria-describedby': ariaDescribedBy
-        }),
-        labelProps: {
-            ...labelProps,
-            onClick: ()=>{
-                focusManager.focusFirst();
-            }
-        },
-        buttonProps: {
-            ...descProps,
-            id: buttonId,
-            excludeFromTabOrder: true,
-            'aria-haspopup': 'dialog',
-            'aria-label': formatMessage('calendar'),
-            'aria-labelledby': `${labelledBy} ${buttonId}`,
-            'aria-describedby': ariaDescribedBy,
-            onPress: ()=>state.setOpen(true)
-        },
-        dialogProps: {
-            id: dialogId,
-            'aria-labelledby': `${labelledBy} ${buttonId}`
-        },
-        startFieldProps: {
-            ...startFieldProps,
-            ...commonFieldProps,
-            'aria-describedby': fieldProps['aria-describedby'],
-            value: (ref1 = state.value) === null || ref1 === void 0 ? void 0 : ref1.start,
-            onChange: (start)=>state.setDateTime('start', start)
-            ,
-            autoFocus: props.autoFocus
-        },
-        endFieldProps: {
-            ...endFieldProps,
-            ...commonFieldProps,
-            'aria-describedby': fieldProps['aria-describedby'],
-            value: (ref2 = state.value) === null || ref2 === void 0 ? void 0 : ref2.end,
-            onChange: (end)=>state.setDateTime('end', end)
-        },
-        descriptionProps: descriptionProps,
-        errorMessageProps: errorMessageProps,
-        calendarProps: {
-            autoFocus: true,
-            value: state.dateRange,
-            onChange: state.setDateRange,
-            minValue: props.minValue,
-            maxValue: props.maxValue,
-            isDisabled: props.isDisabled,
-            isReadOnly: props.isReadOnly,
-            isDateUnavailable: props.isDateUnavailable,
-            allowsNonContiguousRanges: props.allowsNonContiguousRanges,
-            defaultFocusedValue: state.dateRange ? undefined : props.placeholderValue
-        }
-    };
-}
-
-
-
-
-
-
-
-
-const $16f0b7bb276bc17e$export$653eddfc964b0f8a = new WeakMap();
-function $16f0b7bb276bc17e$export$5591b0b878c1a989(props, state, ref) {
-    let { labelProps: labelProps , fieldProps: fieldProps , descriptionProps: descriptionProps , errorMessageProps: errorMessageProps  } = $cIPI0$useField({
-        ...props,
-        labelElementType: 'span'
-    });
-    let groupProps = $3dfb0f96be0d6a08$export$4a931266a3838b86(state, ref);
-    let { focusWithinProps: focusWithinProps  } = $cIPI0$useFocusWithin({
-        onBlurWithin () {
-            state.confirmPlaceholder();
-        }
-    });
-    let formatter = $cIPI0$useDateFormatter(state.getFormatOptions({
-        month: 'long'
-    }));
-    let descProps = $cIPI0$useDescription(state.value ? formatter.format(state.dateValue) : null);
-    let segmentLabelledBy = fieldProps['aria-labelledby'] || fieldProps.id;
-    let describedBy = [
-        descProps['aria-describedby'],
-        fieldProps['aria-describedby']
-    ].filter(Boolean).join(' ') || undefined;
-    let propsFocusManager = props[$887cac91b7cc8801$export$7b3062cd49e80452];
-    let focusManager = $cIPI0$useMemo(()=>propsFocusManager || $cIPI0$createFocusManager(ref)
-    , [
-        propsFocusManager,
-        ref
-    ]);
-    $16f0b7bb276bc17e$export$653eddfc964b0f8a.set(state, {
-        ariaLabelledBy: segmentLabelledBy,
-        ariaDescribedBy: describedBy,
-        focusManager: focusManager
-    });
-    let autoFocusRef = $cIPI0$useRef(props.autoFocus);
-    $cIPI0$useEffect(()=>{
-        if (autoFocusRef.current) focusManager.focusFirst();
-        autoFocusRef.current = false;
-    }, [
-        focusManager
-    ]);
-    return {
-        labelProps: {
-            ...labelProps,
-            onClick: ()=>{
-                focusManager.focusFirst();
-            }
-        },
-        fieldProps: $cIPI0$mergeProps(fieldProps, descProps, groupProps, focusWithinProps, {
-            role: 'group',
-            'aria-disabled': props.isDisabled || undefined,
-            'aria-describedby': describedBy
-        }),
-        descriptionProps: descriptionProps,
-        errorMessageProps: errorMessageProps
-    };
-}
-function $16f0b7bb276bc17e$export$4c842f6a241dc825(props, state, ref) {
-    return $16f0b7bb276bc17e$export$5591b0b878c1a989(props, state, ref);
-}
-
-
-
-
-
 var $3aeceb3a64eb8358$exports = {};
 
 $parcel$export($3aeceb3a64eb8358$exports, "useDisplayNames", () => $3aeceb3a64eb8358$export$d42c60378c8168f8);
@@ -557,7 +456,7 @@ function $32489daedd52963e$export$1315d136e6f7581(segment, state, ref) {
     let enteredKeys = $cIPI0$useRef('');
     let { locale: locale , direction: direction  } = $cIPI0$useLocale();
     let displayNames = $3aeceb3a64eb8358$export$d42c60378c8168f8();
-    let { ariaLabelledBy: ariaLabelledBy , ariaDescribedBy: ariaDescribedBy , focusManager: focusManager  } = $16f0b7bb276bc17e$export$653eddfc964b0f8a.get(state);
+    let { ariaLabel: ariaLabel , ariaLabelledBy: ariaLabelledBy , ariaDescribedBy: ariaDescribedBy , focusManager: focusManager  } = $16f0b7bb276bc17e$export$653eddfc964b0f8a.get(state);
     let textValue = segment.text;
     let options = $cIPI0$useMemo(()=>state.dateFormatter.resolvedOptions()
     , [
@@ -575,7 +474,7 @@ function $32489daedd52963e$export$1315d136e6f7581(segment, state, ref) {
     if (segment.type === 'month') {
         let monthTextValue = monthDateFormatter.format(state.dateValue);
         textValue = monthTextValue !== textValue ? `${textValue} – ${monthTextValue}` : monthTextValue;
-    } else if (segment.type === 'hour' || segment.type === 'dayPeriod') textValue = hourDateFormatter.format(state.dateValue);
+    } else if (segment.type === 'hour') textValue = hourDateFormatter.format(state.dateValue);
     let { spinButtonProps: spinButtonProps  } = $cIPI0$useSpinButton({
         value: segment.value,
         textValue: textValue,
@@ -819,6 +718,13 @@ function $32489daedd52963e$export$1315d136e6f7581(segment, state, ref) {
     if (segment !== firstSegment && state.validationState !== 'invalid') ariaDescribedBy = undefined;
     let id = $cIPI0$useId();
     let isEditable = !state.isDisabled && !state.isReadOnly && segment.isEditable;
+    // Prepend the label passed from the field to each segment name.
+    // This is needed because VoiceOver on iOS does not announce groups.
+    let name = segment.type === 'literal' ? '' : displayNames.of(segment.type);
+    let labelProps = $cIPI0$useLabels({
+        'aria-label': (ariaLabel ? ariaLabel + ' ' : '') + name,
+        'aria-labelledby': ariaLabelledBy
+    });
     // Literal segments should not be visible to screen readers. We don't really need any of the above,
     // but the rules of hooks mean hooks cannot be conditional so we have to put this condition here.
     if (segment.type === 'literal') return {
@@ -827,12 +733,10 @@ function $32489daedd52963e$export$1315d136e6f7581(segment, state, ref) {
         }
     };
     return {
-        segmentProps: $cIPI0$mergeProps(spinButtonProps, pressProps, {
+        segmentProps: $cIPI0$mergeProps(spinButtonProps, pressProps, labelProps, {
             id: id,
             ...touchPropOverrides,
             'aria-invalid': state.validationState === 'invalid' ? 'true' : undefined,
-            'aria-label': displayNames.of(segment.type),
-            'aria-labelledby': `${ariaLabelledBy} ${id}`,
             'aria-describedby': ariaDescribedBy,
             'aria-placeholder': segment.isPlaceholder ? segment.text : undefined,
             'aria-readonly': state.isReadOnly || !segment.isEditable ? 'true' : undefined,
@@ -860,5 +764,123 @@ function $32489daedd52963e$export$1315d136e6f7581(segment, state, ref) {
 
 
 
+
+
+
+
+
+function $887cac91b7cc8801$export$12fd5f0e9f4bb192(props, state, ref) {
+    var ref1, ref2;
+    let formatMessage = $cIPI0$useMessageFormatter((/*@__PURE__*/$parcel$interopDefault($204383cf4f6b0d06$exports)));
+    let { labelProps: labelProps , fieldProps: fieldProps , descriptionProps: descriptionProps , errorMessageProps: errorMessageProps  } = $cIPI0$useField({
+        ...props,
+        labelElementType: 'span'
+    });
+    let labelledBy = fieldProps['aria-labelledby'] || fieldProps.id;
+    let { locale: locale  } = $cIPI0$useLocale();
+    let description = state.formatValue(locale, {
+        month: 'long'
+    });
+    let descProps = $cIPI0$useDescription(description);
+    let startFieldProps = {
+        'aria-label': formatMessage('startDate'),
+        'aria-labelledby': labelledBy
+    };
+    let endFieldProps = {
+        'aria-label': formatMessage('endDate'),
+        'aria-labelledby': labelledBy
+    };
+    let buttonId = $cIPI0$useId();
+    let dialogId = $cIPI0$useId();
+    let groupProps = $3dfb0f96be0d6a08$export$4a931266a3838b86(state, ref);
+    let { focusWithinProps: focusWithinProps  } = $cIPI0$useFocusWithin({
+        onBlurWithin () {
+            state.confirmPlaceholder();
+        }
+    });
+    let ariaDescribedBy = [
+        descProps['aria-describedby'],
+        fieldProps['aria-describedby']
+    ].filter(Boolean).join(' ') || undefined;
+    let focusManager = $cIPI0$useMemo(()=>$cIPI0$createFocusManager(ref)
+    , [
+        ref
+    ]);
+    let commonFieldProps = {
+        [$16f0b7bb276bc17e$export$7b3062cd49e80452]: focusManager,
+        [$16f0b7bb276bc17e$export$300019f83c56d282]: 'presentation',
+        'aria-describedby': ariaDescribedBy,
+        minValue: props.minValue,
+        maxValue: props.maxValue,
+        placeholderValue: props.placeholderValue,
+        hideTimeZone: props.hideTimeZone,
+        hourCycle: props.hourCycle,
+        granularity: props.granularity,
+        isDisabled: props.isDisabled,
+        isReadOnly: props.isReadOnly,
+        isRequired: props.isRequired,
+        validationState: state.validationState
+    };
+    return {
+        groupProps: $cIPI0$mergeProps(groupProps, fieldProps, descProps, focusWithinProps, {
+            role: 'group',
+            'aria-disabled': props.isDisabled || null,
+            'aria-describedby': ariaDescribedBy
+        }),
+        labelProps: {
+            ...labelProps,
+            onClick: ()=>{
+                focusManager.focusFirst();
+            }
+        },
+        buttonProps: {
+            ...descProps,
+            id: buttonId,
+            excludeFromTabOrder: true,
+            'aria-haspopup': 'dialog',
+            'aria-label': formatMessage('calendar'),
+            'aria-labelledby': `${labelledBy} ${buttonId}`,
+            'aria-describedby': ariaDescribedBy,
+            onPress: ()=>state.setOpen(true)
+        },
+        dialogProps: {
+            id: dialogId,
+            'aria-labelledby': `${labelledBy} ${buttonId}`
+        },
+        startFieldProps: {
+            ...startFieldProps,
+            ...commonFieldProps,
+            value: (ref1 = state.value) === null || ref1 === void 0 ? void 0 : ref1.start,
+            onChange: (start)=>state.setDateTime('start', start)
+            ,
+            autoFocus: props.autoFocus
+        },
+        endFieldProps: {
+            ...endFieldProps,
+            ...commonFieldProps,
+            value: (ref2 = state.value) === null || ref2 === void 0 ? void 0 : ref2.end,
+            onChange: (end)=>state.setDateTime('end', end)
+        },
+        descriptionProps: descriptionProps,
+        errorMessageProps: errorMessageProps,
+        calendarProps: {
+            autoFocus: true,
+            value: state.dateRange,
+            onChange: state.setDateRange,
+            minValue: props.minValue,
+            maxValue: props.maxValue,
+            isDisabled: props.isDisabled,
+            isReadOnly: props.isReadOnly,
+            isDateUnavailable: props.isDateUnavailable,
+            allowsNonContiguousRanges: props.allowsNonContiguousRanges,
+            defaultFocusedValue: state.dateRange ? undefined : props.placeholderValue
+        }
+    };
+}
+
+
+
+
+
 export {$6057a3d2a53a12fd$export$42df105a73306d51 as useDatePicker, $32489daedd52963e$export$1315d136e6f7581 as useDateSegment, $16f0b7bb276bc17e$export$5591b0b878c1a989 as useDateField, $16f0b7bb276bc17e$export$4c842f6a241dc825 as useTimeField, $887cac91b7cc8801$export$12fd5f0e9f4bb192 as useDateRangePicker, $3aeceb3a64eb8358$export$d42c60378c8168f8 as useDisplayNames};
 //# sourceMappingURL=module.js.map