@react-aria/calendar 3.0.0-rc.0 → 3.0.0-rc.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@react-aria/calendar",
-  "version": "3.0.0-rc.0",
+  "version": "3.0.0-rc.1",
   "description": "Spectrum UI components in React",
   "license": "Apache-2.0",
   "main": "dist/main.js",
@@ -18,22 +18,22 @@
   },
   "dependencies": {
     "@babel/runtime": "^7.6.2",
-    "@internationalized/date": "3.0.0-rc.0",
-    "@react-aria/i18n": "^3.3.9",
-    "@react-aria/interactions": "^3.8.4",
-    "@react-aria/live-announcer": "^3.0.6",
-    "@react-aria/utils": "^3.12.0",
-    "@react-stately/calendar": "3.0.0-rc.0",
-    "@react-types/button": "^3.4.5",
-    "@react-types/calendar": "3.0.0-rc.0",
-    "@react-types/shared": "^3.12.0"
+    "@internationalized/date": "3.0.0-rc.1",
+    "@react-aria/i18n": "^3.4.0",
+    "@react-aria/interactions": "^3.9.0",
+    "@react-aria/live-announcer": "^3.1.0",
+    "@react-aria/utils": "^3.13.0",
+    "@react-stately/calendar": "3.0.0-rc.1",
+    "@react-types/button": "^3.5.0",
+    "@react-types/calendar": "3.0.0-rc.1",
+    "@react-types/shared": "^3.13.0"
   },
   "peerDependencies": {
-    "react": "^16.8.0 || ^17.0.0-rc.1",
-    "react-dom": "^16.8.0 || ^17.0.0-rc.1"
+    "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0",
+    "react-dom": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0"
   },
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "6a503b715e0dbbf92038cd7f08b1bcdde4c78e82"
+  "gitHead": "8f921ec5094e7c2b3c301bcb6133372e35a2052b"
 }

package/src/useCalendarCell.ts

@@ -13,8 +13,8 @@
 import {CalendarDate, isEqualDay, isSameDay, isToday} from '@internationalized/date';
 import {CalendarState, RangeCalendarState} from '@react-stately/calendar';
 import {focusWithoutScrolling, useDescription} from '@react-aria/utils';
+import {getEraFormat, hookData} from './utils';
 import {getInteractionModality, usePress} from '@react-aria/interactions';
-import {hookData} from './utils';
 import {HTMLAttributes, RefObject, useEffect, useMemo, useRef} from 'react';
 // @ts-ignore
 import intlMessages from '../intl/*.json';
@@ -81,7 +81,7 @@ export function useCalendarCell(props: AriaCalendarCellProps, state: CalendarSta
     day: 'numeric',
     month: 'long',
     year: 'numeric',
-    era: date.calendar.identifier !== 'gregory' ? 'long' : undefined,
+    era: getEraFormat(date),
     timeZone: state.timeZone
   });
   let isSelected = state.isSelected(date);

package/src/useCalendarGrid.ts

@@ -10,7 +10,7 @@
  * governing permissions and limitations under the License.
  */
 
-import {CalendarDate, startOfWeek} from '@internationalized/date';
+import {CalendarDate, startOfWeek, today} from '@internationalized/date';
 import {CalendarState, RangeCalendarState} from '@react-stately/calendar';
 import {hookData, useVisibleRangeDescription} from './utils';
 import {HTMLAttributes, KeyboardEvent, useMemo} from 'react';
@@ -63,22 +63,27 @@ export function useCalendarGrid(props: AriaCalendarGridProps, state: CalendarSta
         break;
       case 'PageUp':
         e.preventDefault();
+        e.stopPropagation();
         state.focusPreviousSection(e.shiftKey);
         break;
       case 'PageDown':
         e.preventDefault();
+        e.stopPropagation();
         state.focusNextSection(e.shiftKey);
         break;
       case 'End':
         e.preventDefault();
+        e.stopPropagation();
         state.focusSectionEnd();
         break;
       case 'Home':
         e.preventDefault();
+        e.stopPropagation();
         state.focusSectionStart();
         break;
       case 'ArrowLeft':
         e.preventDefault();
+        e.stopPropagation();
         if (direction === 'rtl') {
           state.focusNextDay();
         } else {
@@ -87,10 +92,12 @@ export function useCalendarGrid(props: AriaCalendarGridProps, state: CalendarSta
         break;
       case 'ArrowUp':
         e.preventDefault();
+        e.stopPropagation();
         state.focusPreviousRow();
         break;
       case 'ArrowRight':
         e.preventDefault();
+        e.stopPropagation();
         if (direction === 'rtl') {
           state.focusPreviousDay();
         } else {
@@ -99,6 +106,7 @@ export function useCalendarGrid(props: AriaCalendarGridProps, state: CalendarSta
         break;
       case 'ArrowDown':
         e.preventDefault();
+        e.stopPropagation();
         state.focusNextRow();
         break;
       case 'Escape':
@@ -122,13 +130,13 @@ export function useCalendarGrid(props: AriaCalendarGridProps, state: CalendarSta
   let dayFormatter = useDateFormatter({weekday: 'narrow', timeZone: state.timeZone});
   let {locale} = useLocale();
   let weekDays = useMemo(() => {
-    let weekStart = startOfWeek(state.visibleRange.start, locale);
+    let weekStart = startOfWeek(today(state.timeZone), locale);
     return [...new Array(7).keys()].map((index) => {
       let date = weekStart.add({days: index});
       let dateDay = date.toDate(state.timeZone);
       return dayFormatter.format(dateDay);
     });
-  }, [state.visibleRange.start, locale, state.timeZone, dayFormatter]);
+  }, [locale, state.timeZone, dayFormatter]);
 
   return {
     gridProps: mergeProps(labelProps, {

package/src/utils.ts

@@ -26,6 +26,14 @@ interface HookData {
 
 export const hookData = new WeakMap<CalendarState | RangeCalendarState, HookData>();
 
+export function getEraFormat(date: CalendarDate) {
+  if (date?.calendar.identifier !== 'gregory') {
+    return 'long';
+  } else if (date?.era === 'BC') {
+    return 'short';
+  }
+}
+
 export function useSelectedDateDescription(state: CalendarState | RangeCalendarState) {
   let formatMessage = useMessageFormatter(intlMessages);
 
@@ -37,7 +45,11 @@ export function useSelectedDateDescription(state: CalendarState | RangeCalendarS
   }
 
   let dateFormatter = useDateFormatter({
-    dateStyle: 'full',
+    weekday: 'long',
+    month: 'long',
+    year: 'numeric',
+    day: 'numeric',
+    era: getEraFormat(start) || getEraFormat(end),
     timeZone: state.timeZone
   });
 
@@ -62,16 +74,20 @@ export function useSelectedDateDescription(state: CalendarState | RangeCalendarS
 
 export function useVisibleRangeDescription(startDate: CalendarDate, endDate: CalendarDate, timeZone: string, isAria: boolean) {
   let formatMessage = useMessageFormatter(intlMessages);
+  let era: any = getEraFormat(startDate) || getEraFormat(endDate);
   let monthFormatter = useDateFormatter({
     month: 'long',
     year: 'numeric',
-    era: startDate.calendar.identifier !== 'gregory' ? 'long' : undefined,
+    era,
     calendar: startDate.calendar.identifier,
     timeZone
   });
 
   let dateFormatter = useDateFormatter({
-    dateStyle: 'long',
+    month: 'long',
+    year: 'numeric',
+    day: 'numeric',
+    era,
     calendar: startDate.calendar.identifier,
     timeZone
   });