fix: disallow focus of outside month calendar cells

Author: Persists

packages/@react-aria/calendar/src/useCalendarCell.ts

@@ -28,7 +28,12 @@ export interface AriaCalendarCellProps {
    * Whether the cell is disabled. By default, this is determined by the
    * Calendar's `minValue`, `maxValue`, and `isDisabled` props.
    */
-  isDisabled?: boolean
+  isDisabled?: boolean,
+
+  /**
+   * Whether the cell is outside of the current month.
+   */
+  isOutsideMonth?: boolean
 }
 
 export interface CalendarCellAria {
@@ -40,6 +45,8 @@ export interface CalendarCellAria {
   isPressed: boolean,
   /** Whether the cell is selected. */
   isSelected: boolean,
+  /** Whether the cell is read only. */
+  isReadOnly: boolean,
   /** Whether the cell is focused. */
   isFocused: boolean,
   /**
@@ -85,7 +92,7 @@ export function useCalendarCell(props: AriaCalendarCellProps, state: CalendarSta
     timeZone: state.timeZone
   });
   let isSelected = state.isSelected(date);
-  let isFocused = state.isCellFocused(date);
+  let isFocused = state.isCellFocused(date) && !props.isOutsideMonth;
   isDisabled = isDisabled || state.isCellDisabled(date);
   let isUnavailable = state.isCellUnavailable(date);
   let isSelectable = !isDisabled && !isUnavailable;
@@ -305,7 +312,8 @@ export function useCalendarCell(props: AriaCalendarCellProps, state: CalendarSta
       role: 'gridcell',
       'aria-disabled': !isSelectable || undefined,
       'aria-selected': isSelected || undefined,
-      'aria-invalid': isInvalid || undefined
+      'aria-invalid': isInvalid || undefined,
+      'aria-readonly': state.isReadOnly || undefined
     },
     buttonProps: mergeProps(pressProps, {
       onFocus() {
@@ -343,6 +351,7 @@ export function useCalendarCell(props: AriaCalendarCellProps, state: CalendarSta
     }),
     isPressed,
     isFocused,
+    isReadOnly: state.isReadOnly,
     isSelected,
     isDisabled,
     isUnavailable,

packages/react-aria-components/src/Calendar.tsx

@@ -496,17 +496,18 @@ export const CalendarCell = /*#__PURE__*/ (forwardRef as forwardRefType)(functio
   let rangeCalendarState = useContext(RangeCalendarStateContext);
   let state = calendarState ?? rangeCalendarState!;
   let {startDate: currentMonth} = useContext(InternalCalendarGridContext) ?? {startDate: state.visibleRange.start};
+  let isOutsideMonth = !isSameMonth(currentMonth, date);
+
   let buttonRef = useRef<HTMLDivElement>(null);
   let {cellProps, buttonProps, ...states} = useCalendarCell(
-    {date},
+    {date, isOutsideMonth},
     state,
     buttonRef
   );
 
   let {hoverProps, isHovered} = useHover({...otherProps, isDisabled: states.isDisabled});
   let {focusProps, isFocusVisible} = useFocusRing();
   isFocusVisible &&= states.isFocused;
-  let isOutsideMonth = !isSameMonth(currentMonth, date);
   let isSelectionStart = false;
   let isSelectionEnd = false;
   if ('highlightedRange' in state && state.highlightedRange) {

packages/react-aria-components/stories/Calendar.stories.tsx

@@ -72,10 +72,10 @@ export const CalendarMultiMonth = () => (
     </div>
     <div style={{display: 'flex', gap: 20}}>
       <CalendarGrid style={{flex: 1}}>
-        {date => <CalendarCell date={date} style={({isSelected, isOutsideMonth}) => ({display: isOutsideMonth ? 'none' : '', textAlign: 'center', cursor: 'default', background: isSelected ? 'blue' : ''})} />}
+        {date => <CalendarCell date={date} style={({isSelected, isOutsideMonth}) => ({opacity: isOutsideMonth ? '0.5' : '', textAlign: 'center', cursor: 'default', background: isSelected ? 'blue' : ''})} />}
       </CalendarGrid>
       <CalendarGrid style={{flex: 1}} offset={{months: 1}}>
-        {date => <CalendarCell date={date} style={({isSelected, isOutsideMonth}) => ({display: isOutsideMonth ? 'none' : '', textAlign: 'center', cursor: 'default', background: isSelected ? 'blue' : ''})} />}
+        {date => <CalendarCell date={date} style={({isSelected, isOutsideMonth}) => ({opacity: isOutsideMonth ? '0.5' : '', textAlign: 'center', cursor: 'default', background: isSelected ? 'blue' : ''})} />}
       </CalendarGrid>
     </div>
   </Calendar>