( props: CalendarPropsBase & DOMProps & AriaLabelingProps, state: CalendarState<CalendarSelectionMode> | RangeCalendarState )
| 43 | } |
| 44 | |
| 45 | export function useCalendarBase( |
| 46 | props: CalendarPropsBase & DOMProps & AriaLabelingProps, |
| 47 | state: CalendarState<CalendarSelectionMode> | RangeCalendarState |
| 48 | ): CalendarAria { |
| 49 | let stringFormatter = useLocalizedStringFormatter(intlMessages, '@react-aria/calendar'); |
| 50 | let domProps = filterDOMProps(props); |
| 51 | |
| 52 | let title = useVisibleRangeDescription( |
| 53 | state.visibleRange.start, |
| 54 | state.visibleRange.end, |
| 55 | state.timeZone, |
| 56 | false |
| 57 | ); |
| 58 | let visibleRangeDescription = useVisibleRangeDescription( |
| 59 | state.visibleRange.start, |
| 60 | state.visibleRange.end, |
| 61 | state.timeZone, |
| 62 | true |
| 63 | ); |
| 64 | |
| 65 | // Announce when the visible date range changes |
| 66 | useUpdateEffect(() => { |
| 67 | // only when pressing the Previous or Next button |
| 68 | if (!state.isFocused) { |
| 69 | announce(visibleRangeDescription); |
| 70 | } |
| 71 | }, [visibleRangeDescription]); |
| 72 | |
| 73 | // Announce when the selected value changes |
| 74 | let selectedDateDescription = useSelectedDateDescription(state); |
| 75 | useUpdateEffect(() => { |
| 76 | if (selectedDateDescription) { |
| 77 | announce(selectedDateDescription, 'polite', 4000); |
| 78 | } |
| 79 | // handle an update to the caption that describes the currently selected range, to announce the new value |
| 80 | }, [selectedDateDescription]); |
| 81 | |
| 82 | let errorMessageId = useSlotId([ |
| 83 | Boolean(props.errorMessage), |
| 84 | props.isInvalid, |
| 85 | props.validationState |
| 86 | ]); |
| 87 | |
| 88 | // Pass the label to the child grid elements. |
| 89 | hookData.set(state, { |
| 90 | ariaLabel: props['aria-label'], |
| 91 | ariaLabelledBy: props['aria-labelledby'], |
| 92 | errorMessageId, |
| 93 | selectedDateDescription |
| 94 | }); |
| 95 | |
| 96 | // If the next or previous buttons become disabled while they are focused, move focus to the calendar body. |
| 97 | let [nextFocused, setNextFocused] = useState(false); |
| 98 | let nextDisabled = props.isDisabled || state.isNextVisibleRangeInvalid(); |
| 99 | if (nextDisabled && nextFocused) { |
| 100 | setNextFocused(false); |
| 101 | state.setFocused(true); |
| 102 | } |
no test coverage detected