@react-aria/calendar 3.1.0 → 3.3.0

package/src/index.ts

@@ -15,7 +15,7 @@ export {useRangeCalendar} from './useRangeCalendar';
 export {useCalendarGrid} from './useCalendarGrid';
 export {useCalendarCell} from './useCalendarCell';
 
-export type {AriaCalendarProps, AriaRangeCalendarProps, CalendarProps, RangeCalendarProps} from '@react-types/calendar';
+export type {AriaCalendarProps, AriaRangeCalendarProps, CalendarProps, DateValue, RangeCalendarProps} from '@react-types/calendar';
 export type {CalendarAria} from './useCalendarBase';
 export type {AriaCalendarGridProps, CalendarGridAria} from './useCalendarGrid';
 export type {AriaCalendarCellProps, CalendarCellAria} from './useCalendarCell';

package/src/useCalendarCell.ts

@@ -172,7 +172,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: !isSelectable,
+    isDisabled: !isSelectable || state.isReadOnly,
     onPressStart(e) {
       if (state.isReadOnly) {
         state.setFocusedDate(date);
@@ -302,7 +302,7 @@ export function useCalendarCell(props: AriaCalendarCellProps, state: CalendarSta
     calendar: date.calendar.identifier
   });
 
-  let formattedDate = useMemo(() => cellDateFormatter.format(nativeDate), [cellDateFormatter, nativeDate]);
+  let formattedDate = useMemo(() => cellDateFormatter.formatToParts(nativeDate).find(part => part.type === 'day').value, [cellDateFormatter, nativeDate]);
 
   return {
     cellProps: {

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