@react-aria/calendar 3.0.0-nightly.3132 → 3.0.0-nightly.3148

package/dist/types.d.ts.map

@@ -1 +1 @@
-{"mappings":";;;;;;AAeA;IACE,aAAa,EAAE,eAAe,WAAW,CAAC,CAAC;IAC3C,eAAe,EAAE,eAAe,CAAC;IACjC,eAAe,EAAE,eAAe,CAAA;CACjC;AAGD;IACE,SAAS,EAAE,eAAe,WAAW,CAAC,CAAA;CACvC;AGPD,4BAA4B,CAAC,SAAS,SAAS,EAAE,KAAK,EAAE,cAAc,CAAC,CAAC,EAAE,KAAK,EAAE,aAAa,GAAG,YAAY,CAE5G;ACAD,iCAAiC,CAAC,SAAS,SAAS,EAAE,KAAK,EAAE,mBAAmB,CAAC,CAAC,EAAE,KAAK,EAAE,kBAAkB,EAAE,GAAG,EAAE,UAAU,WAAW,CAAC,GAAG,YAAY,CAmDxJ;ACjDD,2BAA4B,SAAQ,iBAAiB;IACnD,SAAS,CAAC,EAAE,YAAY,CAAC;IACzB,OAAO,CAAC,EAAE,YAAY,CAAA;CACvB;AAED,gCAAgC,KAAK,EAAE,iBAAiB,EAAE,KAAK,EAAE,aAAa,GAAG,kBAAkB,GAAG,gBAAgB,CA+FrH;ACnGD;IACE,IAAI,EAAE,YAAY,CAAC;IACnB,UAAU,CAAC,EAAE,OAAO,CAAA;CACrB;AAED;IACE,SAAS,EAAE,UAAU,GAAG,eAAe,WAAW,CAAC,CAAC;IACpD,WAAW,EAAE,eAAe,WAAW,CAAC,CAAC;IACzC,SAAS,EAAE,OAAO,CAAA;CACnB;AAED,gCAAgC,KAAK,EAAE,qBAAqB,EAAE,KAAK,EAAE,aAAa,GAAG,kBAAkB,EAAE,GAAG,EAAE,UAAU,WAAW,CAAC,GAAG,gBAAgB,CAkNtJ;ACnPD;IACE,iBAAiB,EAAE;QAAC,KAAK,CAAC,EAAE,KAAK,CAAA;KAAC,CAAA;CACnC;AAED,0CAA0C,uBAAuB,CAMhE","sources":["packages/@react-aria/calendar/src/packages/@react-aria/calendar/src/types.ts","packages/@react-aria/calendar/src/packages/@react-aria/calendar/src/utils.ts","packages/@react-aria/calendar/src/packages/@react-aria/calendar/src/useCalendarBase.ts","packages/@react-aria/calendar/src/packages/@react-aria/calendar/src/useCalendar.ts","packages/@react-aria/calendar/src/packages/@react-aria/calendar/src/useRangeCalendar.ts","packages/@react-aria/calendar/src/packages/@react-aria/calendar/src/useCalendarGrid.ts","packages/@react-aria/calendar/src/packages/@react-aria/calendar/src/useCalendarCell.ts","packages/@react-aria/calendar/src/packages/@react-aria/calendar/src/useCalendarTableHeader.ts","packages/@react-aria/calendar/src/packages/@react-aria/calendar/src/index.ts","packages/@react-aria/calendar/src/index.ts"],"sourcesContent":[null,null,null,null,null,null,null,null,null,"/*\n * Copyright 2020 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nexport * from './useCalendar';\nexport * from './useRangeCalendar';\nexport * from './useCalendarGrid';\nexport * from './useCalendarCell';\nexport * from './useCalendarTableHeader';\nexport * from './types';\n"],"names":[],"version":3,"file":"types.d.ts.map"}
+{"mappings":";;;;;AAeA;IACE,+CAA+C;IAC/C,aAAa,EAAE,eAAe,WAAW,CAAC,CAAC;IAC3C,iCAAiC;IACjC,eAAe,EAAE,eAAe,CAAC;IACjC,qCAAqC;IACrC,eAAe,EAAE,eAAe,CAAC;IACjC,8EAA8E;IAC9E,KAAK,EAAE,MAAM,CAAA;CACd;AAGD;IACE,wDAAwD;IACxD,SAAS,EAAE,eAAe,WAAW,CAAC,CAAC;IACvC,8FAA8F;IAC9F,QAAQ,EAAE,OAAO,EAAE,CAAA;CACpB;AAED;IACE,qDAAqD;IACrD,MAAM,EAAE,MAAM,CAAC;IACf,gGAAgG;IAChG,IAAI,EAAE,MAAM,CAAA;CACb;AGtBD;;;GAGG;AACH,4BAA4B,CAAC,SAAS,SAAS,EAAE,KAAK,EAAE,cAAc,CAAC,CAAC,EAAE,KAAK,EAAE,aAAa,GAAG,YAAY,CAE5G;ACJD;;;GAGG;AACH,iCAAiC,CAAC,SAAS,SAAS,EAAE,KAAK,EAAE,mBAAmB,CAAC,CAAC,EAAE,KAAK,EAAE,kBAAkB,EAAE,GAAG,EAAE,UAAU,WAAW,CAAC,GAAG,YAAY,CAmDxJ;ACtDD;IACE;;;;OAIG;IACH,SAAS,CAAC,EAAE,YAAY,CAAC;IACzB;;;;OAIG;IACH,OAAO,CAAC,EAAE,YAAY,CAAA;CACvB;AAED;;;;GAIG;AACH,gCAAgC,KAAK,EAAE,iBAAiB,EAAE,KAAK,EAAE,aAAa,GAAG,kBAAkB,GAAG,gBAAgB,CA6GrH;AC/HD;IACE,0CAA0C;IAC1C,IAAI,EAAE,YAAY,CAAC;IACnB;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAA;CACrB;AAED;IACE,qDAAqD;IACrD,SAAS,EAAE,eAAe,WAAW,CAAC,CAAC;IACvC,oDAAoD;IACpD,WAAW,EAAE,eAAe,WAAW,CAAC,CAAC;IACzC,mDAAmD;IACnD,SAAS,EAAE,OAAO,CAAC;IACnB,oCAAoC;IACpC,UAAU,EAAE,OAAO,CAAC;IACpB,mCAAmC;IACnC,SAAS,EAAE,OAAO,CAAC;IACnB,oCAAoC;IACpC,UAAU,EAAE,OAAO,CAAC;IACpB;;;OAGG;IACH,qBAAqB,EAAE,OAAO,CAAC;IAC/B,gEAAgE;IAChE,aAAa,EAAE,MAAM,CAAA;CACtB;AAED;;;GAGG;AACH,gCAAgC,KAAK,EAAE,qBAAqB,EAAE,KAAK,EAAE,aAAa,GAAG,kBAAkB,EAAE,GAAG,EAAE,UAAU,WAAW,CAAC,GAAG,gBAAgB,CA+NtJ","sources":["packages/@react-aria/calendar/src/packages/@react-aria/calendar/src/types.ts","packages/@react-aria/calendar/src/packages/@react-aria/calendar/src/utils.ts","packages/@react-aria/calendar/src/packages/@react-aria/calendar/src/useCalendarBase.ts","packages/@react-aria/calendar/src/packages/@react-aria/calendar/src/useCalendar.ts","packages/@react-aria/calendar/src/packages/@react-aria/calendar/src/useRangeCalendar.ts","packages/@react-aria/calendar/src/packages/@react-aria/calendar/src/useCalendarGrid.ts","packages/@react-aria/calendar/src/packages/@react-aria/calendar/src/useCalendarCell.ts","packages/@react-aria/calendar/src/packages/@react-aria/calendar/src/index.ts","packages/@react-aria/calendar/src/index.ts"],"sourcesContent":[null,null,null,null,null,null,null,null,"/*\n * Copyright 2020 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nexport * from './useCalendar';\nexport * from './useRangeCalendar';\nexport * from './useCalendarGrid';\nexport * from './useCalendarCell';\nexport * from './types';\n"],"names":[],"version":3,"file":"types.d.ts.map"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@react-aria/calendar",
-  "version": "3.0.0-nightly.3132+7ce2c89e7",
+  "version": "3.0.0-nightly.3148+320c69908",
   "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-nightly.3132+7ce2c89e7",
-    "@react-aria/i18n": "3.0.0-nightly.1436+7ce2c89e7",
-    "@react-aria/interactions": "3.0.0-nightly.1436+7ce2c89e7",
-    "@react-aria/live-announcer": "3.0.0-nightly.1436+7ce2c89e7",
-    "@react-aria/utils": "3.0.0-nightly.1436+7ce2c89e7",
-    "@react-stately/calendar": "3.0.0-nightly.1436+7ce2c89e7",
-    "@react-types/button": "3.4.4-nightly.3132+7ce2c89e7",
-    "@react-types/calendar": "3.0.0-nightly.3132+7ce2c89e7",
-    "@react-types/shared": "3.0.0-nightly.1436+7ce2c89e7",
+    "@internationalized/date": "3.0.0-nightly.3148+320c69908",
+    "@react-aria/i18n": "3.0.0-nightly.1452+320c69908",
+    "@react-aria/interactions": "3.0.0-nightly.1452+320c69908",
+    "@react-aria/live-announcer": "3.0.0-nightly.1452+320c69908",
+    "@react-aria/utils": "3.0.0-nightly.1452+320c69908",
+    "@react-stately/calendar": "3.0.0-nightly.1452+320c69908",
+    "@react-types/button": "3.4.4-nightly.3148+320c69908",
+    "@react-types/calendar": "3.0.0-nightly.3148+320c69908",
+    "@react-types/shared": "3.0.0-nightly.1452+320c69908",
     "date-fns": "^1.30.1"
   },
   "peerDependencies": {
@@ -36,5 +36,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "7ce2c89e7ba11463b74bfc4d92a60e2e933ba9b6"
+  "gitHead": "320c69908b41be47a3abb2878d04f90384e54321"
 }

package/src/index.ts

@@ -14,5 +14,4 @@ export * from './useCalendar';
 export * from './useRangeCalendar';
 export * from './useCalendarGrid';
 export * from './useCalendarCell';
-export * from './useCalendarTableHeader';
 export * from './types';

package/src/types.ts

@@ -14,12 +14,27 @@ import {AriaButtonProps} from '@react-types/button';
 import {HTMLAttributes} from 'react';
 
 export interface CalendarAria {
+  /** Props for the calendar grouping element. */
   calendarProps: HTMLAttributes<HTMLElement>,
+  /** Props for the next button. */
   nextButtonProps: AriaButtonProps,
-  prevButtonProps: AriaButtonProps
+  /** Props for the previous button. */
+  prevButtonProps: AriaButtonProps,
+  /** A description of the visible date range, for use in the calendar title. */
+  title: string
 }
 
 
 export interface CalendarGridAria {
-  gridProps: HTMLAttributes<HTMLElement>
+  /** Props for the date grid element (e.g. `<table>`). */
+  gridProps: HTMLAttributes<HTMLElement>,
+  /** A list of week days formatted for the current locale, typically used in column headers. */
+  weekDays: WeekDay[]
+}
+
+interface WeekDay {
+  /** A short name (e.g. single letter) for the day. */
+  narrow: string,
+  /** The full day name. If not displayed visually, it should be used as the accessiblity name. */
+  long: string
 }

package/src/useCalendar.ts

@@ -15,6 +15,10 @@ import {CalendarProps, DateValue} from '@react-types/calendar';
 import {CalendarState} from '@react-stately/calendar';
 import {useCalendarBase} from './useCalendarBase';
 
+/**
+ * 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 {
   return useCalendarBase(props, state);
 }

package/src/useCalendarBase.ts

@@ -65,6 +65,7 @@ export function useCalendarBase(props: CalendarPropsBase & DOMProps, state: Cale
       onPress: () => state.focusPreviousPage(),
       'aria-label': formatMessage('previous'),
       isDisabled: props.isDisabled || state.isPreviousVisibleRangeInvalid()
-    }
+    },
+    title: visibleRangeDescription
   };
 }

package/src/useCalendarCell.ts

@@ -17,20 +17,45 @@ import {HTMLAttributes, RefObject, useEffect, useMemo, useRef} from 'react';
 // @ts-ignore
 import intlMessages from '../intl/*.json';
 import {mergeProps} from '@react-aria/utils';
-import {PressProps, usePress} from '@react-aria/interactions';
 import {useDateFormatter, useMessageFormatter} from '@react-aria/i18n';
+import {usePress} from '@react-aria/interactions';
 
 export interface AriaCalendarCellProps {
+  /** The date that this cell represents. */
   date: CalendarDate,
+  /**
+   * Whether the cell is disabled. By default, this is determined by the
+   * Calendar's `minValue`, `maxValue`, and `isDisabled` props.
+   */
   isDisabled?: boolean
 }
 
 interface CalendarCellAria {
-  cellProps: PressProps & HTMLAttributes<HTMLElement>,
+  /** Props for the grid cell element (e.g. `<td>`). */
+  cellProps: HTMLAttributes<HTMLElement>,
+  /** Props for the button element within the cell. */
   buttonProps: HTMLAttributes<HTMLElement>,
-  isPressed: boolean
+  /** Whether the cell is currently being pressed. */
+  isPressed: boolean,
+  /** Whether the cell is selected. */
+  isSelected: boolean,
+  /** Whether the cell is focused. */
+  isFocused: boolean,
+  /** Whether the cell is disabled. */
+  isDisabled: boolean,
+  /**
+   * Whether the cell is outside the visible range of the calendar.
+   * For example, dates before the first day of a month in the same week.
+   */
+  isOutsideVisibleRange: boolean,
+  /** The day number formatted according to the current locale. */
+  formattedDate: string
 }
 
+/**
+ * Provides the behavior and accessibility implementation for a calendar cell component.
+ * A calendar cell displays a date cell within a calendar grid which can be selected by the user.
+ */
 export function useCalendarCell(props: AriaCalendarCellProps, state: CalendarState | RangeCalendarState, ref: RefObject<HTMLElement>): CalendarCellAria {
   let {date, isDisabled} = props;
   let formatMessage = useMessageFormatter(intlMessages);
@@ -204,6 +229,14 @@ export function useCalendarCell(props: AriaCalendarCellProps, state: CalendarSta
     }
   }, [isFocused, ref]);
 
+  let cellDateFormatter = useDateFormatter({
+    day: 'numeric',
+    timeZone: state.timeZone,
+    calendar: date.calendar.identifier
+  });
+
+  let formattedDate = useMemo(() => cellDateFormatter.format(nativeDate), [cellDateFormatter, nativeDate]);
+
   return {
     cellProps: {
       role: 'gridcell',
@@ -239,6 +272,11 @@ export function useCalendarCell(props: AriaCalendarCellProps, state: CalendarSta
         e.preventDefault();
       }
     }),
-    isPressed
+    isPressed,
+    isFocused,
+    isSelected,
+    isDisabled,
+    isOutsideVisibleRange: date.compare(state.visibleRange.start) < 0 || date.compare(state.visibleRange.end) > 0,
+    formattedDate
   };
 }

package/src/useCalendarGrid.ts

@@ -10,24 +10,36 @@
  * governing permissions and limitations under the License.
  */
 
-import {CalendarDate} from '@internationalized/date';
+import {CalendarDate, startOfWeek} from '@internationalized/date';
 import {CalendarGridAria} from './types';
 import {calendarIds, useSelectedDateDescription, useVisibleRangeDescription} from './utils';
-import {CalendarPropsBase} from '@react-types/calendar';
 import {CalendarState, RangeCalendarState} from '@react-stately/calendar';
 import {KeyboardEvent} from 'react';
 import {mergeProps, useDescription, useLabels} from '@react-aria/utils';
-import {useLocale} from '@react-aria/i18n';
+import {useDateFormatter, useLocale} from '@react-aria/i18n';
 
-interface CalendarGridProps extends CalendarPropsBase {
+interface CalendarGridProps {
+  /**
+   * The first date displayed in the calendar grid.
+   * Defaults to the first visible date in the calendar.
+   * Override this to display multiple date grids in a calendar.
+   */
   startDate?: CalendarDate,
+  /**
+   * The last date displayed in the calendar grid.
+   * Defaults to the last visible date in the calendar.
+   * Override this to display multiple date grids in a calendar.
+   */
   endDate?: CalendarDate
 }
 
+/**
+ * Provides the behavior and accessibility implementation for a calendar grid component.
+ * A calendar grid displays a single grid of days within a calendar or range calendar which
+ * can be keyboard navigated and selected by the user.
+ */
 export function useCalendarGrid(props: CalendarGridProps, state: CalendarState | RangeCalendarState): CalendarGridAria {
   let {
-    isReadOnly = false,
-    isDisabled = false,
     startDate = state.visibleRange.start,
     endDate = state.visibleRange.end
   } = props;
@@ -108,15 +120,31 @@ export function useCalendarGrid(props: CalendarGridProps, state: CalendarState |
     'aria-labelledby': calendarIds.get(state)
   });
 
+  let dayFormatter = useDateFormatter({weekday: 'narrow'});
+  let dayFormatterLong = useDateFormatter({weekday: 'long'});
+  let {locale} = useLocale();
+  let weekStart = startOfWeek(state.visibleRange.start, locale);
+  let weekDays = [...new Array(7).keys()].map((index) => {
+    let date = weekStart.add({days: index});
+    let dateDay = date.toDate(state.timeZone);
+    let narrow = dayFormatter.format(dateDay);
+    let long = dayFormatterLong.format(dateDay);
+    return {
+      narrow,
+      long
+    };
+  });
+
   return {
     gridProps: mergeProps(descriptionProps, labelProps, {
       role: 'grid',
-      'aria-readonly': isReadOnly || null,
-      'aria-disabled': isDisabled || null,
+      'aria-readonly': state.isReadOnly || null,
+      'aria-disabled': state.isDisabled || null,
       'aria-multiselectable': ('highlightedRange' in state) || undefined,
       onKeyDown,
       onFocus: () => state.setFocused(true),
       onBlur: () => state.setFocused(false)
-    })
+    }),
+    weekDays
   };
 }

package/src/useRangeCalendar.ts

@@ -17,6 +17,10 @@ import {RefObject, useRef} from 'react';
 import {useCalendarBase} from './useCalendarBase';
 import {useEvent, useId} 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 {
   let res = useCalendarBase(props, state);
   res.nextButtonProps.id = useId();

package/src/utils.ts

@@ -10,7 +10,7 @@
  * governing permissions and limitations under the License.
  */
 
-import {CalendarDate, endOfMonth, isSameDay, startOfMonth, toDate} from '@internationalized/date';
+import {CalendarDate, endOfMonth, isSameDay, startOfMonth} from '@internationalized/date';
 import {CalendarState, RangeCalendarState} from '@react-stately/calendar';
 // @ts-ignore
 import intlMessages from '../intl/*.json';
@@ -36,9 +36,9 @@ export function useSelectedDateDescription(state: CalendarState | RangeCalendarS
       // Use a single date message if the start and end dates are the same day,
       // otherwise include both dates.
       if (isSameDay(start, end)) {
-        return formatMessage('selectedDateDescription', {date: toDate(start, state.timeZone)});
+        return formatMessage('selectedDateDescription', {date: start.toDate(state.timeZone)});
       } else {
-        return formatMessage('selectedRangeDescription', {start: toDate(start, state.timeZone), end: toDate(end, state.timeZone)});
+        return formatMessage('selectedRangeDescription', {start: start.toDate(state.timeZone), end: end.toDate(state.timeZone)});
       }
     }
     return '';

package/src/useCalendarTableHeader.ts

@@ -1,11 +0,0 @@
-interface CalendarTableHeaderAria {
-  columnHeaderProps: {scope?: 'col'}
-}
-
-export function useCalendarTableHeader(): CalendarTableHeaderAria {
-  return {
-    columnHeaderProps: {
-      scope: 'col'
-    }
-  };
-}