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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@react-aria/calendar",
-  "version": "3.0.0-rc.0",
+  "version": "3.0.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.1",
+    "@react-aria/i18n": "^3.5.0",
+    "@react-aria/interactions": "^3.10.0",
+    "@react-aria/live-announcer": "^3.1.1",
+    "@react-aria/utils": "^3.13.2",
+    "@react-stately/calendar": "^3.0.1",
+    "@react-types/button": "^3.6.0",
+    "@react-types/calendar": "^3.0.1",
+    "@react-types/shared": "^3.14.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": "cd7c0ec917122c7612f653c22f8ed558f8b66ecd"
 }

package/src/useCalendarBase.ts

@@ -14,29 +14,30 @@ import {announce} from '@react-aria/live-announcer';
 import {AriaButtonProps} from '@react-types/button';
 import {CalendarPropsBase} from '@react-types/calendar';
 import {CalendarState, RangeCalendarState} from '@react-stately/calendar';
+import {DOMAttributes} from '@react-types/shared';
 import {DOMProps} from '@react-types/shared';
 import {filterDOMProps, mergeProps, useLabels, useSlotId, useUpdateEffect} from '@react-aria/utils';
 import {hookData, useSelectedDateDescription, useVisibleRangeDescription} from './utils';
-import {HTMLAttributes, useRef} from 'react';
 // @ts-ignore
 import intlMessages from '../intl/*.json';
-import {useMessageFormatter} from '@react-aria/i18n';
+import {useLocalizedStringFormatter} from '@react-aria/i18n';
+import {useRef} from 'react';
 
 export interface CalendarAria {
   /** Props for the calendar grouping element. */
-  calendarProps: HTMLAttributes<HTMLElement>,
+  calendarProps: DOMAttributes,
   /** Props for the next button. */
   nextButtonProps: AriaButtonProps,
   /** Props for the previous button. */
   prevButtonProps: AriaButtonProps,
   /** Props for the error message element, if any. */
-  errorMessageProps: HTMLAttributes<HTMLElement>,
+  errorMessageProps: DOMAttributes,
   /** A description of the visible date range, for use in the calendar title. */
   title: string
 }
 
 export function useCalendarBase(props: CalendarPropsBase & DOMProps, state: CalendarState | RangeCalendarState): CalendarAria {
-  let formatMessage = useMessageFormatter(intlMessages);
+  let stringFormatter = useLocalizedStringFormatter(intlMessages);
   let domProps = filterDOMProps(props);
 
   let title = useVisibleRangeDescription(state.visibleRange.start, state.visibleRange.end, state.timeZone, false);
@@ -97,14 +98,14 @@ export function useCalendarBase(props: CalendarPropsBase & DOMProps, state: Cale
     }),
     nextButtonProps: {
       onPress: () => state.focusNextPage(),
-      'aria-label': formatMessage('next'),
+      'aria-label': stringFormatter.format('next'),
       isDisabled: nextDisabled,
       onFocus: () => nextFocused.current = true,
       onBlur: () => nextFocused.current = false
     },
     prevButtonProps: {
       onPress: () => state.focusPreviousPage(),
-      'aria-label': formatMessage('previous'),
+      'aria-label': stringFormatter.format('previous'),
       isDisabled: previousDisabled,
       onFocus: () => previousFocused.current = true,
       onBlur: () => previousFocused.current = false

package/src/useCalendarCell.ts

@@ -12,14 +12,15 @@
 
 import {CalendarDate, isEqualDay, isSameDay, isToday} from '@internationalized/date';
 import {CalendarState, RangeCalendarState} from '@react-stately/calendar';
-import {focusWithoutScrolling, useDescription} from '@react-aria/utils';
+import {DOMAttributes} from '@react-types/shared';
+import {focusWithoutScrolling, getScrollParent, scrollIntoView, 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';
 import {mergeProps} from '@react-aria/utils';
-import {useDateFormatter, useMessageFormatter} from '@react-aria/i18n';
+import {RefObject, useEffect, useMemo, useRef} from 'react';
+import {useDateFormatter, useLocalizedStringFormatter} from '@react-aria/i18n';
 
 export interface AriaCalendarCellProps {
   /** The date that this cell represents. */
@@ -33,9 +34,9 @@ export interface AriaCalendarCellProps {
 
 export interface CalendarCellAria {
   /** Props for the grid cell element (e.g. `<td>`). */
-  cellProps: HTMLAttributes<HTMLElement>,
+  cellProps: DOMAttributes,
   /** Props for the button element within the cell. */
-  buttonProps: HTMLAttributes<HTMLElement>,
+  buttonProps: DOMAttributes,
   /** Whether the cell is currently being pressed. */
   isPressed: boolean,
   /** Whether the cell is selected. */
@@ -75,13 +76,13 @@ export interface CalendarCellAria {
 export function useCalendarCell(props: AriaCalendarCellProps, state: CalendarState | RangeCalendarState, ref: RefObject<HTMLElement>): CalendarCellAria {
   let {date, isDisabled} = props;
   let {errorMessageId, selectedDateDescription} = hookData.get(state);
-  let formatMessage = useMessageFormatter(intlMessages);
+  let stringFormatter = useLocalizedStringFormatter(intlMessages);
   let dateFormatter = useDateFormatter({
     weekday: 'long',
     day: 'numeric',
     month: 'long',
     year: 'numeric',
-    era: date.calendar.identifier !== 'gregory' ? 'long' : undefined,
+    era: getEraFormat(date),
     timeZone: state.timeZone
   });
   let isSelected = state.isSelected(date);
@@ -129,24 +130,24 @@ export function useCalendarCell(props: AriaCalendarCellProps, state: CalendarSta
     label += dateFormatter.format(nativeDate);
     if (isDateToday) {
       // If date is today, set appropriate string depending on selected state:
-      label = formatMessage(isSelected ? 'todayDateSelected' : 'todayDate', {
+      label = stringFormatter.format(isSelected ? 'todayDateSelected' : 'todayDate', {
         date: label
       });
     } else if (isSelected) {
       // If date is selected but not today:
-      label = formatMessage('dateSelected', {
+      label = stringFormatter.format('dateSelected', {
         date: label
       });
     }
 
     if (state.minValue && isSameDay(date, state.minValue)) {
-      label += ', ' + formatMessage('minimumDate');
+      label += ', ' + stringFormatter.format('minimumDate');
     } else if (state.maxValue && isSameDay(date, state.maxValue)) {
-      label += ', ' + formatMessage('maximumDate');
+      label += ', ' + stringFormatter.format('maximumDate');
     }
 
     return label;
-  }, [dateFormatter, nativeDate, formatMessage, isSelected, isDateToday, date, state, selectedDateDescription]);
+  }, [dateFormatter, nativeDate, stringFormatter, isSelected, isDateToday, date, state, selectedDateDescription]);
 
   // When a cell is focused and this is a range calendar, add a prompt to help
   // screenreader users know that they are in a range selection mode.
@@ -154,10 +155,10 @@ export function useCalendarCell(props: AriaCalendarCellProps, state: CalendarSta
   if ('anchorDate' in state && isFocused && !state.isReadOnly && isSelectable) {
     // If selection has started add "click to finish selecting range"
     if (state.anchorDate) {
-      rangeSelectionPrompt = formatMessage('finishRangeSelectionPrompt');
+      rangeSelectionPrompt = stringFormatter.format('finishRangeSelectionPrompt');
     // Otherwise, add "click to start selecting range" prompt
     } else {
-      rangeSelectionPrompt = formatMessage('startRangeSelectionPrompt');
+      rangeSelectionPrompt = stringFormatter.format('startRangeSelectionPrompt');
     }
   }
 
@@ -283,12 +284,14 @@ export function useCalendarCell(props: AriaCalendarCellProps, state: CalendarSta
   // Focus the button in the DOM when the state updates.
   useEffect(() => {
     if (isFocused && ref.current) {
+      focusWithoutScrolling(ref.current);
+
       // Scroll into view if navigating with a keyboard, otherwise
       // try not to shift the view under the user's mouse/finger.
-      if (getInteractionModality() === 'pointer') {
-        focusWithoutScrolling(ref.current);
-      } else {
-        ref.current.focus();
+      // Only scroll the direct scroll parent, not the whole page, so
+      // we don't scroll to the bottom when opening date picker popover.
+      if (getInteractionModality() !== 'pointer') {
+        scrollIntoView(getScrollParent(ref.current) as HTMLElement, ref.current);
       }
     }
   }, [isFocused, ref]);

package/src/useCalendarGrid.ts

@@ -10,10 +10,11 @@
  * 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 {DOMAttributes} from '@react-types/shared';
 import {hookData, useVisibleRangeDescription} from './utils';
-import {HTMLAttributes, KeyboardEvent, useMemo} from 'react';
+import {KeyboardEvent, useMemo} from 'react';
 import {mergeProps, useLabels} from '@react-aria/utils';
 import {useDateFormatter, useLocale} from '@react-aria/i18n';
 
@@ -34,9 +35,9 @@ export interface AriaCalendarGridProps {
 
 export interface CalendarGridAria {
   /** Props for the date grid element (e.g. `<table>`). */
-  gridProps: HTMLAttributes<HTMLElement>,
+  gridProps: DOMAttributes,
   /** Props for the grid header element (e.g. `<thead>`). */
-  headerProps: HTMLAttributes<HTMLElement>,
+  headerProps: DOMAttributes,
   /** A list of week day abbreviations formatted for the current locale, typically used in column headers. */
   weekDays: string[]
 }
@@ -63,22 +64,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 +93,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 +107,7 @@ export function useCalendarGrid(props: AriaCalendarGridProps, state: CalendarSta
         break;
       case 'ArrowDown':
         e.preventDefault();
+        e.stopPropagation();
         state.focusNextRow();
         break;
       case 'Escape':
@@ -122,13 +131,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/useRangeCalendar.ts

@@ -12,6 +12,7 @@
 
 import {CalendarAria, useCalendarBase} from './useCalendarBase';
 import {DateValue, RangeCalendarProps} from '@react-types/calendar';
+import {FocusableElement} from '@react-types/shared';
 import {RangeCalendarState} from '@react-stately/calendar';
 import {RefObject, useRef} from 'react';
 import {useEvent} from '@react-aria/utils';
@@ -20,7 +21,7 @@ import {useEvent} from '@react-aria/utils';
  * Provides the behavior and accessibility implementation for a range calendar component.
  * A range calendar displays one or more date grids and allows users to select a contiguous range of dates.
  */
-export function useRangeCalendar<T extends DateValue>(props: RangeCalendarProps<T>, state: RangeCalendarState, ref: RefObject<HTMLElement>): CalendarAria {
+export function useRangeCalendar<T extends DateValue>(props: RangeCalendarProps<T>, state: RangeCalendarState, ref: RefObject<FocusableElement>): CalendarAria {
   let res = useCalendarBase(props, state);
 
   // We need to ignore virtual pointer events from VoiceOver due to these bugs.
@@ -37,7 +38,7 @@ export function useRangeCalendar<T extends DateValue>(props: RangeCalendarProps<
 
   // Stop range selection when pressing or releasing a pointer outside the calendar body,
   // except when pressing the next or previous buttons to switch months.
-  let endDragging = e => {
+  let endDragging = (e: PointerEvent) => {
     if (isVirtualClick.current) {
       isVirtualClick.current = false;
       return;
@@ -48,7 +49,7 @@ export function useRangeCalendar<T extends DateValue>(props: RangeCalendarProps<
       return;
     }
 
-    let target = e.target as HTMLElement;
+    let target = e.target as Element;
     let body = document.getElementById(res.calendarProps.id);
     if (
       body &&

package/src/utils.ts

@@ -12,9 +12,10 @@
 
 import {CalendarDate, DateFormatter, endOfMonth, isSameDay, startOfMonth} from '@internationalized/date';
 import {CalendarState, RangeCalendarState} from '@react-stately/calendar';
-import {FormatMessage, useDateFormatter, useMessageFormatter} from '@react-aria/i18n';
 // @ts-ignore
 import intlMessages from '../intl/*.json';
+import type {LocalizedStringFormatter} from '@internationalized/string';
+import {useDateFormatter, useLocalizedStringFormatter} from '@react-aria/i18n';
 import {useMemo} from 'react';
 
 interface HookData {
@@ -26,8 +27,12 @@ interface HookData {
 
 export const hookData = new WeakMap<CalendarState | RangeCalendarState, HookData>();
 
+export function getEraFormat(date: CalendarDate): 'short' | undefined {
+  return date?.calendar.identifier === 'gregory' && date.era === 'BC' ? 'short' : undefined;
+}
+
 export function useSelectedDateDescription(state: CalendarState | RangeCalendarState) {
-  let formatMessage = useMessageFormatter(intlMessages);
+  let stringFormatter = useLocalizedStringFormatter(intlMessages);
 
   let start: CalendarDate, end: CalendarDate;
   if ('highlightedRange' in state) {
@@ -37,7 +42,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
   });
 
@@ -49,29 +58,33 @@ export function useSelectedDateDescription(state: CalendarState | RangeCalendarS
       // otherwise include both dates.
       if (isSameDay(start, end)) {
         let date = dateFormatter.format(start.toDate(state.timeZone));
-        return formatMessage('selectedDateDescription', {date});
+        return stringFormatter.format('selectedDateDescription', {date});
       } else {
-        let dateRange = formatRange(dateFormatter, formatMessage, start, end, state.timeZone);
+        let dateRange = formatRange(dateFormatter, stringFormatter, start, end, state.timeZone);
 
-        return formatMessage('selectedRangeDescription', {dateRange});
+        return stringFormatter.format('selectedRangeDescription', {dateRange});
       }
     }
     return '';
-  }, [start, end, anchorDate, state.timeZone, formatMessage, dateFormatter]);
+  }, [start, end, anchorDate, state.timeZone, stringFormatter, dateFormatter]);
 }
 
 export function useVisibleRangeDescription(startDate: CalendarDate, endDate: CalendarDate, timeZone: string, isAria: boolean) {
-  let formatMessage = useMessageFormatter(intlMessages);
+  let stringFormatter = useLocalizedStringFormatter(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
   });
@@ -84,18 +97,18 @@ export function useVisibleRangeDescription(startDate: CalendarDate, endDate: Cal
         return monthFormatter.format(startDate.toDate(timeZone));
       } else if (isSameDay(endDate, endOfMonth(endDate))) {
         return isAria
-          ? formatRange(monthFormatter, formatMessage, startDate, endDate, timeZone)
+          ? formatRange(monthFormatter, stringFormatter, startDate, endDate, timeZone)
           : monthFormatter.formatRange(startDate.toDate(timeZone), endDate.toDate(timeZone));
       }
     }
 
     return isAria
-      ? formatRange(dateFormatter, formatMessage, startDate, endDate, timeZone)
+      ? formatRange(dateFormatter, stringFormatter, startDate, endDate, timeZone)
       : dateFormatter.formatRange(startDate.toDate(timeZone), endDate.toDate(timeZone));
-  }, [startDate, endDate, monthFormatter, dateFormatter, formatMessage, timeZone, isAria]);
+  }, [startDate, endDate, monthFormatter, dateFormatter, stringFormatter, timeZone, isAria]);
 }
 
-function formatRange(dateFormatter: DateFormatter, formatMessage: FormatMessage, start: CalendarDate, end: CalendarDate, timeZone: string) {
+function formatRange(dateFormatter: DateFormatter, stringFormatter: LocalizedStringFormatter, start: CalendarDate, end: CalendarDate, timeZone: string) {
   let parts = dateFormatter.formatRangeToParts(start.toDate(timeZone), end.toDate(timeZone));
 
   // Find the separator between the start and end date. This is determined
@@ -121,5 +134,5 @@ function formatRange(dateFormatter: DateFormatter, formatMessage: FormatMessage,
     }
   }
 
-  return formatMessage('dateRange', {startDate: startValue, endDate: endValue});
+  return stringFormatter.format('dateRange', {startDate: startValue, endDate: endValue});
 }