@react-aria/calendar 3.3.0 → 3.4.1

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)});
       }
     }