@react-aria/calendar 3.0.0-nightly.3168 → 3.0.0-nightly.3180

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@react-aria/calendar",
-  "version": "3.0.0-nightly.3168+2fabc1ac0",
+  "version": "3.0.0-nightly.3180+0bba35ae3",
   "description": "Spectrum UI components in React",
   "license": "Apache-2.0",
   "main": "dist/main.js",
@@ -18,15 +18,15 @@
   },
   "dependencies": {
     "@babel/runtime": "^7.6.2",
-    "@internationalized/date": "3.0.0-nightly.3168+2fabc1ac0",
-    "@react-aria/i18n": "3.0.0-nightly.1469+2fabc1ac0",
-    "@react-aria/interactions": "3.0.0-nightly.1469+2fabc1ac0",
-    "@react-aria/live-announcer": "3.0.0-nightly.1469+2fabc1ac0",
-    "@react-aria/utils": "3.0.0-nightly.1469+2fabc1ac0",
-    "@react-stately/calendar": "3.0.0-nightly.1469+2fabc1ac0",
-    "@react-types/button": "3.4.5-nightly.3168+2fabc1ac0",
-    "@react-types/calendar": "3.0.0-nightly.3168+2fabc1ac0",
-    "@react-types/shared": "3.0.0-nightly.1469+2fabc1ac0",
+    "@internationalized/date": "3.0.0-nightly.3180+0bba35ae3",
+    "@react-aria/i18n": "3.0.0-nightly.1481+0bba35ae3",
+    "@react-aria/interactions": "3.0.0-nightly.1481+0bba35ae3",
+    "@react-aria/live-announcer": "3.0.0-nightly.1481+0bba35ae3",
+    "@react-aria/utils": "3.0.0-nightly.1481+0bba35ae3",
+    "@react-stately/calendar": "3.0.0-nightly.1481+0bba35ae3",
+    "@react-types/button": "3.4.5-nightly.3180+0bba35ae3",
+    "@react-types/calendar": "3.0.0-nightly.3180+0bba35ae3",
+    "@react-types/shared": "3.0.0-nightly.1481+0bba35ae3",
     "date-fns": "^1.30.1"
   },
   "peerDependencies": {
@@ -36,5 +36,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "2fabc1ac07aa6fd75e7111e571e27787d8a44314"
+  "gitHead": "0bba35ae36b5d220570385215860d3ca3b549656"
 }

package/src/useCalendarBase.ts

@@ -20,6 +20,7 @@ import {DOMProps} from '@react-types/shared';
 import intlMessages from '../intl/*.json';
 import {mergeProps, useDescription, useId, useUpdateEffect} from '@react-aria/utils';
 import {useMessageFormatter} from '@react-aria/i18n';
+import {useRef} from 'react';
 
 export function useCalendarBase(props: CalendarPropsBase & DOMProps, state: CalendarState | RangeCalendarState): CalendarAria {
   let formatMessage = useMessageFormatter(intlMessages);
@@ -49,6 +50,21 @@ export function useCalendarBase(props: CalendarPropsBase & DOMProps, state: Cale
   // Label the child grid elements by the group element if it is labelled.
   calendarIds.set(state, props['aria-label'] || props['aria-labelledby'] ? calendarId : null);
 
+  // If the next or previous buttons become disabled while they are focused, move focus to the calendar body.
+  let nextFocused = useRef(false);
+  let nextDisabled = props.isDisabled || state.isNextVisibleRangeInvalid();
+  if (nextDisabled && nextFocused.current) {
+    nextFocused.current = false;
+    state.setFocused(true);
+  }
+
+  let previousFocused = useRef(false);
+  let previousDisabled = props.isDisabled || state.isPreviousVisibleRangeInvalid();
+  if (previousDisabled && previousFocused.current) {
+    previousFocused.current = false;
+    state.setFocused(true);
+  }
+
   return {
     calendarProps: mergeProps(descriptionProps, {
       role: 'group',
@@ -59,12 +75,16 @@ export function useCalendarBase(props: CalendarPropsBase & DOMProps, state: Cale
     nextButtonProps: {
       onPress: () => state.focusNextPage(),
       'aria-label': formatMessage('next'),
-      isDisabled: props.isDisabled || state.isNextVisibleRangeInvalid()
+      isDisabled: nextDisabled,
+      onFocus: () => nextFocused.current = true,
+      onBlur: () => nextFocused.current = false
     },
     prevButtonProps: {
       onPress: () => state.focusPreviousPage(),
       'aria-label': formatMessage('previous'),
-      isDisabled: props.isDisabled || state.isPreviousVisibleRangeInvalid()
+      isDisabled: previousDisabled,
+      onFocus: () => previousFocused.current = true,
+      onBlur: () => previousFocused.current = false
     },
     title: visibleRangeDescription
   };

package/src/useCalendarCell.ts

@@ -10,7 +10,7 @@
  * governing permissions and limitations under the License.
  */
 
-import {CalendarDate, isEqualDay, isSameDay, isSameMonth, isToday} from '@internationalized/date';
+import {CalendarDate, isEqualDay, isSameDay, isToday} from '@internationalized/date';
 import {CalendarState, RangeCalendarState} from '@react-stately/calendar';
 import {focusWithoutScrolling} from '@react-aria/utils';
 import {HTMLAttributes, RefObject, useEffect, useMemo, useRef} from 'react';
@@ -41,8 +41,21 @@ interface CalendarCellAria {
   isSelected: boolean,
   /** Whether the cell is focused. */
   isFocused: boolean,
-  /** Whether the cell is disabled. */
+  /**
+   * Whether the cell is disabled, according to the calendar's `minValue`, `maxValue`, and `isDisabled` props.
+   * Disabled dates are not focusable, and cannot be selected by the user. They are typically
+   * displayed with a dimmed appearance.
+   */
   isDisabled: boolean,
+  /**
+   * Whether the cell is unavailable, according to the calendar's `isDateUnavailable` prop. Unavailable dates remain
+   * focusable, but cannot be selected by the user. They should be displayed with a visual affordance to indicate they
+   * are unavailable, such as a different color or a strikethrough.
+   *
+   * Note that because they are focusable, unavailable dates must meet a 4.5:1 color contrast ratio,
+   * [as defined by WCAG](https://www.w3.org/WAI/WCAG21/Understanding/contrast-minimum.html).
+   */
+  isUnavailable: boolean,
   /**
    * Whether the cell is outside the visible range of the calendar.
    * For example, dates before the first day of a month in the same week.
@@ -70,6 +83,8 @@ export function useCalendarCell(props: AriaCalendarCellProps, state: CalendarSta
   let isSelected = state.isSelected(date);
   let isFocused = state.isCellFocused(date);
   isDisabled = isDisabled || state.isCellDisabled(date);
+  let isUnavailable = state.isCellUnavailable(date);
+  let isSelectable = !isDisabled && !isUnavailable;
 
   // For performance, reuse the same date object as before if the new date prop is the same.
   // This allows subsequent useMemo results to be reused.
@@ -102,7 +117,7 @@ export function useCalendarCell(props: AriaCalendarCellProps, state: CalendarSta
 
   // When a cell is focused and this is a range calendar, add a prompt to help
   // screenreader users know that they are in a range selection mode.
-  if ('anchorDate' in state && isFocused && !state.isReadOnly) {
+  if ('anchorDate' in state && isFocused && !state.isReadOnly && isSelectable) {
     let rangeSelectionPrompt = '';
 
     // If selection has started add "click to finish selecting range"
@@ -127,7 +142,7 @@ export function useCalendarCell(props: AriaCalendarCellProps, state: CalendarSta
     // again to trigger onPressStart. Cancel presses immediately when the pointer exits.
     shouldCancelOnPointerExit: 'anchorDate' in state && !!state.anchorDate,
     preventFocusOnPress: true,
-    isDisabled,
+    isDisabled: !isSelectable,
     onPressStart(e) {
       if (state.isReadOnly) {
         state.setFocusedDate(date);
@@ -214,7 +229,10 @@ export function useCalendarCell(props: AriaCalendarCellProps, state: CalendarSta
           // there will be an announcement to "click to finish selecting range" (above).
           state.selectDate(date);
           let nextDay = date.add({days: 1});
-          if (isSameMonth(date, nextDay)) {
+          if (state.isInvalid(nextDay)) {
+            nextDay = date.subtract({days: 1});
+          }
+          if (!state.isInvalid(nextDay)) {
             state.setFocusedDate(nextDay);
           }
         } else if (e.pointerType === 'virtual') {
@@ -249,8 +267,8 @@ export function useCalendarCell(props: AriaCalendarCellProps, state: CalendarSta
   return {
     cellProps: {
       role: 'gridcell',
-      'aria-disabled': isDisabled || null,
-      'aria-selected': isSelected
+      'aria-disabled': !isSelectable || null,
+      'aria-selected': isSelectable ? isSelected : null
     },
     buttonProps: mergeProps(pressProps, {
       onFocus() {
@@ -260,11 +278,11 @@ export function useCalendarCell(props: AriaCalendarCellProps, state: CalendarSta
       },
       tabIndex,
       role: 'button',
-      'aria-disabled': isDisabled || null,
+      'aria-disabled': !isSelectable || null,
       'aria-label': label,
       onPointerEnter(e) {
         // Highlight the date on hover or drag over a date when selecting a range.
-        if ('highlightDate' in state && (e.pointerType !== 'touch' || state.isDragging)) {
+        if ('highlightDate' in state && (e.pointerType !== 'touch' || state.isDragging) && isSelectable) {
           state.highlightDate(date);
         }
       },
@@ -285,6 +303,7 @@ export function useCalendarCell(props: AriaCalendarCellProps, state: CalendarSta
     isFocused,
     isSelected,
     isDisabled,
+    isUnavailable,
     isOutsideVisibleRange: date.compare(state.visibleRange.start) < 0 || date.compare(state.visibleRange.end) > 0,
     formattedDate
   };

package/src/useCalendarGrid.ts

@@ -120,8 +120,8 @@ export function useCalendarGrid(props: CalendarGridProps, state: CalendarState |
     'aria-labelledby': calendarIds.get(state)
   });
 
-  let dayFormatter = useDateFormatter({weekday: 'narrow'});
-  let dayFormatterLong = useDateFormatter({weekday: 'long'});
+  let dayFormatter = useDateFormatter({weekday: 'narrow', timeZone: state.timeZone});
+  let dayFormatterLong = useDateFormatter({weekday: 'long', timeZone: state.timeZone});
   let {locale} = useLocale();
   let weekStart = startOfWeek(state.visibleRange.start, locale);
   let weekDays = [...new Array(7).keys()].map((index) => {

package/src/useRangeCalendar.ts

@@ -53,7 +53,7 @@ export function useRangeCalendar<T extends DateValue>(props: RangeCalendarProps<
     let target = e.target as HTMLElement;
     let body = document.getElementById(res.calendarProps.id);
     if (
-      (!body.contains(target) || target.getAttribute('role') !== 'button') &&
+      (!body.contains(target) || !target.closest('[role="button"]')) &&
       !document.getElementById(res.nextButtonProps.id)?.contains(target) &&
       !document.getElementById(res.prevButtonProps.id)?.contains(target)
     ) {

package/src/utils.ts

@@ -50,12 +50,14 @@ export function useVisibleRangeDescription(startDate: CalendarDate, endDate: Cal
     month: 'long',
     year: 'numeric',
     era: startDate.calendar.identifier !== 'gregory' ? 'long' : undefined,
-    calendar: startDate.calendar.identifier
+    calendar: startDate.calendar.identifier,
+    timeZone
   });
 
   let dateFormatter = useDateFormatter({
     dateStyle: 'long',
-    calendar: startDate.calendar.identifier
+    calendar: startDate.calendar.identifier,
+    timeZone
   });
 
   return useMemo(() => {