fix: disallow focus of calendar cells outside the month (#8129)

* fix: disallow focus of outside month calendar cells

* add: calendar multi month styling - exclude outside selected

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 {
@@ -85,7 +90,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;

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 && !isOutsideMonth ? '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 && !isOutsideMonth ? 'blue' : ''})} />}
       </CalendarGrid>
     </div>
   </Calendar>