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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@react-aria/calendar",
-  "version": "3.0.0-rc.1",
+  "version": "3.0.2",
   "description": "Spectrum UI components in React",
   "license": "Apache-2.0",
   "main": "dist/main.js",
@@ -18,15 +18,15 @@
   },
   "dependencies": {
     "@babel/runtime": "^7.6.2",
-    "@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"
+    "@internationalized/date": "^3.0.1",
+    "@react-aria/i18n": "^3.6.0",
+    "@react-aria/interactions": "^3.11.0",
+    "@react-aria/live-announcer": "^3.1.1",
+    "@react-aria/utils": "^3.13.3",
+    "@react-stately/calendar": "^3.0.2",
+    "@react-types/button": "^3.6.1",
+    "@react-types/calendar": "^3.0.2",
+    "@react-types/shared": "^3.14.1"
   },
   "peerDependencies": {
     "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0",
@@ -35,5 +35,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "8f921ec5094e7c2b3c301bcb6133372e35a2052b"
+  "gitHead": "b03ef51e6317547dd0a840f151e59d039b1e1fd3"
 }

package/src/index.ts

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

package/src/useCalendar.ts

@@ -10,14 +10,14 @@
  * governing permissions and limitations under the License.
  */
 
+import {AriaCalendarProps, DateValue} from '@react-types/calendar';
 import {CalendarAria, useCalendarBase} from './useCalendarBase';
-import {CalendarProps, DateValue} from '@react-types/calendar';
 import {CalendarState} from '@react-stately/calendar';
 
 /**
  * Provides the behavior and accessibility implementation for a calendar component.
  * A calendar displays one or more date grids and allows users to select a single date.
  */
-export function useCalendar<T extends DateValue>(props: CalendarProps<T>, state: CalendarState): CalendarAria {
+export function useCalendar<T extends DateValue>(props: AriaCalendarProps<T>, state: CalendarState): CalendarAria {
   return useCalendarBase(props, state);
 }

package/src/useCalendarBase.ts

@@ -12,31 +12,32 @@
 
 import {announce} from '@react-aria/live-announcer';
 import {AriaButtonProps} from '@react-types/button';
+import {AriaLabelingProps, DOMAttributes} from '@react-types/shared';
 import {CalendarPropsBase} from '@react-types/calendar';
 import {CalendarState, RangeCalendarState} from '@react-stately/calendar';
 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);
+export function useCalendarBase(props: CalendarPropsBase & DOMProps & AriaLabelingProps, state: CalendarState | RangeCalendarState): CalendarAria {
+  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 {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,7 +76,7 @@ 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',
@@ -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

@@ -12,8 +12,9 @@
 
 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[]
 }

package/src/useRangeCalendar.ts

@@ -10,8 +10,9 @@
  * governing permissions and limitations under the License.
  */
 
+import {AriaRangeCalendarProps, DateValue} from '@react-types/calendar';
 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: AriaRangeCalendarProps<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,16 +27,12 @@ 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 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) {
@@ -61,19 +58,19 @@ 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',
@@ -100,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
@@ -137,5 +134,5 @@ function formatRange(dateFormatter: DateFormatter, formatMessage: FormatMessage,
     }
   }
 
-  return formatMessage('dateRange', {startDate: startValue, endDate: endValue});
+  return stringFormatter.format('dateRange', {startDate: startValue, endDate: endValue});
 }