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

package/dist/main.js

@@ -2,9 +2,9 @@ var $IwcIq$reactariafocus = require("@react-aria/focus");
 var $IwcIq$reactariautils = require("@react-aria/utils");
 var $IwcIq$reactarialabel = require("@react-aria/label");
 var $IwcIq$reactariai18n = require("@react-aria/i18n");
+var $IwcIq$react = require("react");
 var $IwcIq$reactariainteractions = require("@react-aria/interactions");
 var $IwcIq$internationalizednumber = require("@internationalized/number");
-var $IwcIq$react = require("react");
 var $IwcIq$reactariaspinbutton = require("@react-aria/spinbutton");
 var $IwcIq$internationalizedmessage = require("@internationalized/message");
 
@@ -216,10 +216,13 @@ $c7d0e80b992ca68a$exports = {
 
 
 
+
+
+
 function $715562ad3b4cced4$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);
@@ -269,6 +272,85 @@ function $715562ad3b4cced4$export$4a931266a3838b86(state, ref1) {
 
 
 
+const $4acc2f407c169e55$export$653eddfc964b0f8a = new WeakMap();
+const $4acc2f407c169e55$export$300019f83c56d282 = '__role_' + Date.now();
+const $4acc2f407c169e55$export$7b3062cd49e80452 = '__focusManager_' + Date.now();
+function $4acc2f407c169e55$export$5591b0b878c1a989(props, state, ref) {
+    let { labelProps: labelProps , fieldProps: fieldProps , descriptionProps: descriptionProps , errorMessageProps: errorMessageProps  } = $IwcIq$reactarialabel.useField({
+        ...props,
+        labelElementType: 'span'
+    });
+    let groupProps = $715562ad3b4cced4$export$4a931266a3838b86(state, ref);
+    let { focusWithinProps: focusWithinProps  } = $IwcIq$reactariainteractions.useFocusWithin({
+        onBlurWithin () {
+            state.confirmPlaceholder();
+        }
+    });
+    let descProps = $IwcIq$reactariautils.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[$4acc2f407c169e55$export$300019f83c56d282] === 'presentation' ? fieldProps['aria-describedby'] : [
+        descProps['aria-describedby'],
+        fieldProps['aria-describedby']
+    ].filter(Boolean).join(' ') || undefined;
+    let propsFocusManager = props[$4acc2f407c169e55$export$7b3062cd49e80452];
+    let focusManager = $IwcIq$react.useMemo(()=>propsFocusManager || $IwcIq$reactariafocus.createFocusManager(ref)
+    , [
+        propsFocusManager,
+        ref
+    ]);
+    // Pass labels and other information to segments.
+    $4acc2f407c169e55$export$653eddfc964b0f8a.set(state, {
+        ariaLabel: props['aria-label'],
+        ariaLabelledBy: [
+            props['aria-labelledby'],
+            labelProps.id
+        ].filter(Boolean).join(' ') || undefined,
+        ariaDescribedBy: describedBy,
+        focusManager: focusManager
+    });
+    let autoFocusRef = $IwcIq$react.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[$4acc2f407c169e55$export$300019f83c56d282] === 'presentation') fieldDOMProps = {
+        role: 'presentation'
+    };
+    else fieldDOMProps = $IwcIq$reactariautils.mergeProps(fieldProps, {
+        role: 'group',
+        'aria-disabled': props.isDisabled || undefined,
+        'aria-describedby': describedBy
+    });
+    $IwcIq$react.useEffect(()=>{
+        if (autoFocusRef.current) focusManager.focusFirst();
+        autoFocusRef.current = false;
+    }, [
+        focusManager
+    ]);
+    return {
+        labelProps: {
+            ...labelProps,
+            onClick: ()=>{
+                focusManager.focusFirst();
+            }
+        },
+        fieldProps: $IwcIq$reactariautils.mergeProps(fieldDOMProps, groupProps, focusWithinProps),
+        descriptionProps: descriptionProps,
+        errorMessageProps: errorMessageProps
+    };
+}
+function $4acc2f407c169e55$export$4c842f6a241dc825(props, state, ref) {
+    return $4acc2f407c169e55$export$5591b0b878c1a989(props, state, ref);
+}
+
+
+
+
+
 function $e90ae7c26a69c6b1$export$42df105a73306d51(props, state, ref) {
     let buttonId = $IwcIq$reactariautils.useId();
     let dialogId = $IwcIq$reactariautils.useId();
@@ -288,7 +370,7 @@ function $e90ae7c26a69c6b1$export$42df105a73306d51(props, state, ref) {
         fieldProps['aria-describedby']
     ].filter(Boolean).join(' ') || undefined;
     return {
-        groupProps: $IwcIq$reactariautils.mergeProps(groupProps, descProps, {
+        groupProps: $IwcIq$reactariautils.mergeProps(groupProps, fieldProps, descProps, {
             role: 'group',
             'aria-disabled': props.isDisabled || null,
             'aria-labelledby': labelledBy,
@@ -303,6 +385,8 @@ function $e90ae7c26a69c6b1$export$42df105a73306d51(props, state, ref) {
         },
         fieldProps: {
             ...fieldProps,
+            [$4acc2f407c169e55$export$300019f83c56d282]: 'presentation',
+            'aria-describedby': ariaDescribedBy,
             value: state.value,
             onChange: state.setValue,
             minValue: props.minValue,
@@ -353,191 +437,6 @@ function $e90ae7c26a69c6b1$export$42df105a73306d51(props, state, ref) {
 
 
 
-
-
-
-
-
-const $20f695b1b69e6b9e$export$7b3062cd49e80452 = '__focusManager_' + Date.now();
-function $20f695b1b69e6b9e$export$12fd5f0e9f4bb192(props, state, ref) {
-    var ref1, ref2;
-    let formatMessage = $IwcIq$reactariai18n.useMessageFormatter((/*@__PURE__*/$parcel$interopDefault($c7d0e80b992ca68a$exports)));
-    let { labelProps: labelProps , fieldProps: fieldProps , descriptionProps: descriptionProps , errorMessageProps: errorMessageProps  } = $IwcIq$reactarialabel.useField({
-        ...props,
-        labelElementType: 'span'
-    });
-    let labelledBy = fieldProps['aria-labelledby'] || fieldProps.id;
-    let { locale: locale  } = $IwcIq$reactariai18n.useLocale();
-    let description = state.formatValue(locale, {
-        month: 'long'
-    });
-    let descProps = $IwcIq$reactariautils.useDescription(description);
-    let startFieldProps = $IwcIq$reactariautils.useLabels({
-        'aria-label': formatMessage('startDate'),
-        'aria-labelledby': labelledBy
-    });
-    let endFieldProps = $IwcIq$reactariautils.useLabels({
-        'aria-label': formatMessage('endDate'),
-        'aria-labelledby': labelledBy
-    });
-    let buttonId = $IwcIq$reactariautils.useId();
-    let dialogId = $IwcIq$reactariautils.useId();
-    let groupProps = $715562ad3b4cced4$export$4a931266a3838b86(state, ref);
-    let { focusWithinProps: focusWithinProps  } = $IwcIq$reactariainteractions.useFocusWithin({
-        onBlurWithin () {
-            state.confirmPlaceholder();
-        }
-    });
-    let ariaDescribedBy = [
-        descProps['aria-describedby'],
-        fieldProps['aria-describedby']
-    ].filter(Boolean).join(' ') || undefined;
-    let focusManager = $IwcIq$react.useMemo(()=>$IwcIq$reactariafocus.createFocusManager(ref)
-    , [
-        ref
-    ]);
-    let commonFieldProps = {
-        [$20f695b1b69e6b9e$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: $IwcIq$reactariautils.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 $4acc2f407c169e55$export$653eddfc964b0f8a = new WeakMap();
-function $4acc2f407c169e55$export$5591b0b878c1a989(props, state, ref) {
-    let { labelProps: labelProps , fieldProps: fieldProps , descriptionProps: descriptionProps , errorMessageProps: errorMessageProps  } = $IwcIq$reactarialabel.useField({
-        ...props,
-        labelElementType: 'span'
-    });
-    let groupProps = $715562ad3b4cced4$export$4a931266a3838b86(state, ref);
-    let { focusWithinProps: focusWithinProps  } = $IwcIq$reactariainteractions.useFocusWithin({
-        onBlurWithin () {
-            state.confirmPlaceholder();
-        }
-    });
-    let formatter = $IwcIq$reactariai18n.useDateFormatter(state.getFormatOptions({
-        month: 'long'
-    }));
-    let descProps = $IwcIq$reactariautils.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[$20f695b1b69e6b9e$export$7b3062cd49e80452];
-    let focusManager = $IwcIq$react.useMemo(()=>propsFocusManager || $IwcIq$reactariafocus.createFocusManager(ref)
-    , [
-        propsFocusManager,
-        ref
-    ]);
-    $4acc2f407c169e55$export$653eddfc964b0f8a.set(state, {
-        ariaLabelledBy: segmentLabelledBy,
-        ariaDescribedBy: describedBy,
-        focusManager: focusManager
-    });
-    let autoFocusRef = $IwcIq$react.useRef(props.autoFocus);
-    $IwcIq$react.useEffect(()=>{
-        if (autoFocusRef.current) focusManager.focusFirst();
-        autoFocusRef.current = false;
-    }, [
-        focusManager
-    ]);
-    return {
-        labelProps: {
-            ...labelProps,
-            onClick: ()=>{
-                focusManager.focusFirst();
-            }
-        },
-        fieldProps: $IwcIq$reactariautils.mergeProps(fieldProps, descProps, groupProps, focusWithinProps, {
-            role: 'group',
-            'aria-disabled': props.isDisabled || undefined,
-            'aria-describedby': describedBy
-        }),
-        descriptionProps: descriptionProps,
-        errorMessageProps: errorMessageProps
-    };
-}
-function $4acc2f407c169e55$export$4c842f6a241dc825(props, state, ref) {
-    return $4acc2f407c169e55$export$5591b0b878c1a989(props, state, ref);
-}
-
-
-
-
-
 var $934ac650a0aceb4b$exports = {};
 
 $parcel$export($934ac650a0aceb4b$exports, "useDisplayNames", () => $934ac650a0aceb4b$export$d42c60378c8168f8);
@@ -579,7 +478,7 @@ function $5c015c6316d1904d$export$1315d136e6f7581(segment, state, ref) {
     let enteredKeys = $IwcIq$react.useRef('');
     let { locale: locale , direction: direction  } = $IwcIq$reactariai18n.useLocale();
     let displayNames = $934ac650a0aceb4b$export$d42c60378c8168f8();
-    let { ariaLabelledBy: ariaLabelledBy , ariaDescribedBy: ariaDescribedBy , focusManager: focusManager  } = $4acc2f407c169e55$export$653eddfc964b0f8a.get(state);
+    let { ariaLabel: ariaLabel , ariaLabelledBy: ariaLabelledBy , ariaDescribedBy: ariaDescribedBy , focusManager: focusManager  } = $4acc2f407c169e55$export$653eddfc964b0f8a.get(state);
     let textValue = segment.text;
     let options = $IwcIq$react.useMemo(()=>state.dateFormatter.resolvedOptions()
     , [
@@ -597,7 +496,7 @@ function $5c015c6316d1904d$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  } = $IwcIq$reactariaspinbutton.useSpinButton({
         value: segment.value,
         textValue: textValue,
@@ -841,6 +740,13 @@ function $5c015c6316d1904d$export$1315d136e6f7581(segment, state, ref) {
     if (segment !== firstSegment && state.validationState !== 'invalid') ariaDescribedBy = undefined;
     let id = $IwcIq$reactariautils.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 = $IwcIq$reactariautils.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 {
@@ -849,12 +755,10 @@ function $5c015c6316d1904d$export$1315d136e6f7581(segment, state, ref) {
         }
     };
     return {
-        segmentProps: $IwcIq$reactariautils.mergeProps(spinButtonProps, pressProps, {
+        segmentProps: $IwcIq$reactariautils.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,
@@ -880,6 +784,124 @@ function $5c015c6316d1904d$export$1315d136e6f7581(segment, state, ref) {
 
 
 
+
+
+
+
+
+
+
+function $20f695b1b69e6b9e$export$12fd5f0e9f4bb192(props, state, ref) {
+    var ref1, ref2;
+    let formatMessage = $IwcIq$reactariai18n.useMessageFormatter((/*@__PURE__*/$parcel$interopDefault($c7d0e80b992ca68a$exports)));
+    let { labelProps: labelProps , fieldProps: fieldProps , descriptionProps: descriptionProps , errorMessageProps: errorMessageProps  } = $IwcIq$reactarialabel.useField({
+        ...props,
+        labelElementType: 'span'
+    });
+    let labelledBy = fieldProps['aria-labelledby'] || fieldProps.id;
+    let { locale: locale  } = $IwcIq$reactariai18n.useLocale();
+    let description = state.formatValue(locale, {
+        month: 'long'
+    });
+    let descProps = $IwcIq$reactariautils.useDescription(description);
+    let startFieldProps = {
+        'aria-label': formatMessage('startDate'),
+        'aria-labelledby': labelledBy
+    };
+    let endFieldProps = {
+        'aria-label': formatMessage('endDate'),
+        'aria-labelledby': labelledBy
+    };
+    let buttonId = $IwcIq$reactariautils.useId();
+    let dialogId = $IwcIq$reactariautils.useId();
+    let groupProps = $715562ad3b4cced4$export$4a931266a3838b86(state, ref);
+    let { focusWithinProps: focusWithinProps  } = $IwcIq$reactariainteractions.useFocusWithin({
+        onBlurWithin () {
+            state.confirmPlaceholder();
+        }
+    });
+    let ariaDescribedBy = [
+        descProps['aria-describedby'],
+        fieldProps['aria-describedby']
+    ].filter(Boolean).join(' ') || undefined;
+    let focusManager = $IwcIq$react.useMemo(()=>$IwcIq$reactariafocus.createFocusManager(ref)
+    , [
+        ref
+    ]);
+    let commonFieldProps = {
+        [$4acc2f407c169e55$export$7b3062cd49e80452]: focusManager,
+        [$4acc2f407c169e55$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: $IwcIq$reactariautils.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
+        }
+    };
+}
+
+
+
 $parcel$exportWildcard(module.exports, $934ac650a0aceb4b$exports);