@react-aria/calendar 3.2.0 → 3.4.0

package/src/useCalendarBase.ts

@@ -12,16 +12,15 @@
 
 import {announce} from '@react-aria/live-announcer';
 import {AriaButtonProps} from '@react-types/button';
-import {AriaLabelingProps, DOMAttributes} from '@react-types/shared';
+import {AriaLabelingProps, DOMAttributes, DOMProps} from '@react-types/shared';
 import {CalendarPropsBase} from '@react-types/calendar';
 import {CalendarState, RangeCalendarState} from '@react-stately/calendar';
-import {DOMProps} from '@react-types/shared';
 import {filterDOMProps, mergeProps, useLabels, useSlotId, useUpdateEffect} from '@react-aria/utils';
 import {hookData, useSelectedDateDescription, useVisibleRangeDescription} from './utils';
 // @ts-ignore
 import intlMessages from '../intl/*.json';
 import {useLocalizedStringFormatter} from '@react-aria/i18n';
-import {useRef} from 'react';
+import {useState} from 'react';
 
 export interface CalendarAria {
   /** Props for the calendar grouping element. */
@@ -71,17 +70,17 @@ export function useCalendarBase(props: CalendarPropsBase & DOMProps & AriaLabeli
   });
 
   // If the next or previous buttons become disabled while they are focused, move focus to the calendar body.
-  let nextFocused = useRef(false);
+  let [nextFocused, setNextFocused] = useState(false);
   let nextDisabled = props.isDisabled || state.isNextVisibleRangeInvalid();
-  if (nextDisabled && nextFocused.current) {
-    nextFocused.current = false;
+  if (nextDisabled && nextFocused) {
+    setNextFocused(false);
     state.setFocused(true);
   }
 
-  let previousFocused = useRef(false);
+  let [previousFocused, setPreviousFocused] = useState(false);
   let previousDisabled = props.isDisabled || state.isPreviousVisibleRangeInvalid();
-  if (previousDisabled && previousFocused.current) {
-    previousFocused.current = false;
+  if (previousDisabled && previousFocused) {
+    setPreviousFocused(false);
     state.setFocused(true);
   }
 
@@ -93,22 +92,20 @@ export function useCalendarBase(props: CalendarPropsBase & DOMProps & AriaLabeli
 
   return {
     calendarProps: mergeProps(domProps, labelProps, {
-      role: 'group',
+      role: 'application',
       'aria-describedby': props['aria-describedby'] || undefined
     }),
     nextButtonProps: {
       onPress: () => state.focusNextPage(),
       'aria-label': stringFormatter.format('next'),
       isDisabled: nextDisabled,
-      onFocus: () => nextFocused.current = true,
-      onBlur: () => nextFocused.current = false
+      onFocusChange: setNextFocused
     },
     prevButtonProps: {
       onPress: () => state.focusPreviousPage(),
       'aria-label': stringFormatter.format('previous'),
       isDisabled: previousDisabled,
-      onFocus: () => previousFocused.current = true,
-      onBlur: () => previousFocused.current = false
+      onFocusChange: setPreviousFocused
     },
     errorMessageProps: {
       id: errorMessageId

package/src/useCalendarCell.ts

@@ -13,12 +13,11 @@
 import {CalendarDate, isEqualDay, isSameDay, isToday} from '@internationalized/date';
 import {CalendarState, RangeCalendarState} from '@react-stately/calendar';
 import {DOMAttributes} from '@react-types/shared';
-import {focusWithoutScrolling, getScrollParent, scrollIntoViewport, useDescription} from '@react-aria/utils';
+import {focusWithoutScrolling, getScrollParent, mergeProps, scrollIntoViewport, useDeepMemo, useDescription} from '@react-aria/utils';
 import {getEraFormat, hookData} from './utils';
 import {getInteractionModality, usePress} from '@react-aria/interactions';
 // @ts-ignore
 import intlMessages from '../intl/*.json';
-import {mergeProps} from '@react-aria/utils';
 import {RefObject, useEffect, useMemo, useRef} from 'react';
 import {useDateFormatter, useLocalizedStringFormatter} from '@react-aria/i18n';
 
@@ -102,13 +101,7 @@ export function useCalendarCell(props: AriaCalendarCellProps, state: CalendarSta
 
   // 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.
-  let lastDate = useRef(null);
-  if (lastDate.current && isEqualDay(date, lastDate.current)) {
-    date = lastDate.current;
-  }
-
-  lastDate.current = date;
-
+  date = useDeepMemo<CalendarDate>(date, isEqualDay);
   let nativeDate = useMemo(() => date.toDate(state.timeZone), [date, state.timeZone]);
 
   // aria-label should be localize Day of week, Month, Day and Year without Time.
@@ -289,8 +282,11 @@ export function useCalendarCell(props: AriaCalendarCellProps, state: CalendarSta
       // Scroll into view if navigating with a keyboard, otherwise
       // try not to shift the view under the user's mouse/finger.
       // If in a overlay, scrollIntoViewport will only cause scrolling
-      // up to the overlay scroll body to prevent overlay shifting
-      if (getInteractionModality() !== 'pointer') {
+      // up to the overlay scroll body to prevent overlay shifting.
+      // Also only scroll into view if the cell actually got focused.
+      // There are some cases where the cell might be disabled or inside,
+      // an inert container and we don't want to scroll then.
+      if (getInteractionModality() !== 'pointer' && document.activeElement === ref.current) {
         scrollIntoViewport(ref.current, {containingElement: getScrollParent(ref.current)});
       }
     }

package/src/useCalendarGrid.ts

@@ -30,7 +30,13 @@ export interface AriaCalendarGridProps {
    * Defaults to the last visible date in the calendar.
    * Override this to display multiple date grids in a calendar.
    */
-  endDate?: CalendarDate
+  endDate?: CalendarDate,
+  /**
+   * The style of weekday names to display in the calendar grid header,
+   * e.g. single letter, abbreviation, or full day name.
+   * @default "narrow"
+   */
+  weekdayStyle?: 'narrow' | 'short' | 'long'
 }
 
 export interface CalendarGridAria {
@@ -128,7 +134,7 @@ export function useCalendarGrid(props: AriaCalendarGridProps, state: CalendarSta
     'aria-labelledby': ariaLabelledBy
   });
 
-  let dayFormatter = useDateFormatter({weekday: 'narrow', timeZone: state.timeZone});
+  let dayFormatter = useDateFormatter({weekday: props.weekdayStyle || 'narrow', timeZone: state.timeZone});
   let {locale} = useLocale();
   let weekDays = useMemo(() => {
     let weekStart = startOfWeek(today(state.timeZone), locale);