@react-aria/calendar 3.9.5 → 3.10.0

package/src/useCalendarCell.ts

@@ -1,375 +0,0 @@
-/*
- * Copyright 2020 Adobe. All rights reserved.
- * This file is licensed to you under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License. You may obtain a copy
- * of the License at http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software distributed under
- * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
- * OF ANY KIND, either express or implied. See the License for the specific language
- * governing permissions and limitations under the License.
- */
-
-import {CalendarDate, isEqualDay, isSameDay, isToday} from '@internationalized/date';
-import {CalendarState, RangeCalendarState} from '@react-stately/calendar';
-import {DOMAttributes, RefObject} from '@react-types/shared';
-import {focusWithoutScrolling, getActiveElement, getEventTarget, getScrollParent, mergeProps, scrollIntoViewport, useDeepMemo, useDescription} from '@react-aria/utils';
-import {getEraFormat, hookData} from './utils';
-import {getInteractionModality, usePress} from '@react-aria/interactions';
-// @ts-ignore
-import intlMessages from '../intl/*.json';
-import {useDateFormatter, useLocalizedStringFormatter} from '@react-aria/i18n';
-import {useEffect, useMemo, useRef} from 'react';
-
-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,
-
-  /**
-   * Whether the cell is outside of the current month.
-   */
-  isOutsideMonth?: boolean
-}
-
-export interface CalendarCellAria {
-  /** Props for the grid cell element (e.g. `<td>`). */
-  cellProps: DOMAttributes,
-  /** Props for the button element within the cell. */
-  buttonProps: DOMAttributes,
-  /** 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, according to the calendar's `minValue`, `maxValue`, and `isDisabled` props.
-   * Disabled dates are not focusable, and cannot be selected by the user. They are typically
-   * displayed with a dimmed appearance.
-   */
-  isDisabled: boolean,
-  /**
-   * Whether the cell is unavailable, according to the calendar's `isDateUnavailable` prop. Unavailable dates remain
-   * focusable, but cannot be selected by the user. They should be displayed with a visual affordance to indicate they
-   * are unavailable, such as a different color or a strikethrough.
-   *
-   * Note that because they are focusable, unavailable dates must meet a 4.5:1 color contrast ratio,
-   * [as defined by WCAG](https://www.w3.org/WAI/WCAG21/Understanding/contrast-minimum.html).
-   */
-  isUnavailable: 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,
-  /** Whether the cell is part of an invalid selection. */
-  isInvalid: 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 | null>): CalendarCellAria {
-  let {date, isDisabled} = props;
-  let {errorMessageId, selectedDateDescription} = hookData.get(state)!;
-  let stringFormatter = useLocalizedStringFormatter(intlMessages, '@react-aria/calendar');
-  let dateFormatter = useDateFormatter({
-    weekday: 'long',
-    day: 'numeric',
-    month: 'long',
-    year: 'numeric',
-    era: getEraFormat(date),
-    timeZone: state.timeZone
-  });
-  let isSelected = state.isSelected(date);
-  let isFocused = state.isCellFocused(date) && !props.isOutsideMonth;
-  isDisabled = isDisabled || state.isCellDisabled(date);
-  let isUnavailable = state.isCellUnavailable(date);
-  let isSelectable = !isDisabled && !isUnavailable;
-  let isInvalid = state.isValueInvalid && Boolean(
-    'highlightedRange' in state
-      ? !state.anchorDate && state.highlightedRange && date.compare(state.highlightedRange.start) >= 0 && date.compare(state.highlightedRange.end) <= 0
-      : state.value && isSameDay(state.value, date)
-  );
-
-  if (isInvalid) {
-    isSelected = true;
-  }
-
-  // For performance, reuse the same date object as before if the new date prop is the same.
-  // This allows subsequent useMemo results to be reused.
-  date = useDeepMemo<CalendarDate>(date, isEqualDay);
-  let nativeDate = useMemo(() => date.toDate(state.timeZone), [date, state.timeZone]);
-
-  // aria-label should be localize Day of week, Month, Day and Year without Time.
-  let isDateToday = isToday(date, state.timeZone);
-  let label = useMemo(() => {
-    let label = '';
-
-    // If this is a range calendar, add a description of the full selected range
-    // to the first and last selected date.
-    if (
-      'highlightedRange' in state &&
-      state.value &&
-      !state.anchorDate &&
-      (isSameDay(date, state.value.start) || isSameDay(date, state.value.end))
-    ) {
-      label = selectedDateDescription + ', ';
-    }
-
-    label += dateFormatter.format(nativeDate);
-    if (isDateToday) {
-      // If date is today, set appropriate string depending on selected state:
-      label = stringFormatter.format(isSelected ? 'todayDateSelected' : 'todayDate', {
-        date: label
-      });
-    } else if (isSelected) {
-      // If date is selected but not today:
-      label = stringFormatter.format('dateSelected', {
-        date: label
-      });
-    }
-
-    if (state.minValue && isSameDay(date, state.minValue)) {
-      label += ', ' + stringFormatter.format('minimumDate');
-    } else if (state.maxValue && isSameDay(date, state.maxValue)) {
-      label += ', ' + stringFormatter.format('maximumDate');
-    }
-
-    return label;
-  }, [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.
-  let rangeSelectionPrompt = '';
-  if ('anchorDate' in state && isFocused && !state.isReadOnly && isSelectable) {
-    // If selection has started add "click to finish selecting range"
-    if (state.anchorDate) {
-      rangeSelectionPrompt = stringFormatter.format('finishRangeSelectionPrompt');
-    // Otherwise, add "click to start selecting range" prompt
-    } else {
-      rangeSelectionPrompt = stringFormatter.format('startRangeSelectionPrompt');
-    }
-  }
-
-  let descriptionProps = useDescription(rangeSelectionPrompt);
-
-  let isAnchorPressed = useRef(false);
-  let isRangeBoundaryPressed = useRef(false);
-  let touchDragTimerRef = useRef<ReturnType<typeof setTimeout> | undefined>(undefined);
-  let {pressProps, isPressed} = usePress({
-    // When dragging to select a range, we don't want dragging over the original anchor
-    // again to trigger onPressStart. Cancel presses immediately when the pointer exits.
-    shouldCancelOnPointerExit: 'anchorDate' in state && !!state.anchorDate,
-    preventFocusOnPress: true,
-    isDisabled: !isSelectable || state.isReadOnly,
-    onPressStart(e) {
-      if (state.isReadOnly) {
-        state.setFocusedDate(date);
-        state.setFocused(true);
-        return;
-      }
-
-      if ('highlightedRange' in state && !state.anchorDate && (e.pointerType === 'mouse' || e.pointerType === 'touch')) {
-        // Allow dragging the start or end date of a range to modify it
-        // rather than starting a new selection.
-        // Don't allow dragging when invalid, or weird jumping behavior may occur as date ranges
-        // are constrained to available dates. The user will need to select a new range in this case.
-        if (state.highlightedRange && !isInvalid) {
-          if (isSameDay(date, state.highlightedRange.start)) {
-            state.setAnchorDate(state.highlightedRange.end);
-            state.setFocusedDate(date);
-            state.setFocused(true);
-            state.setDragging(true);
-            isRangeBoundaryPressed.current = true;
-            return;
-          } else if (isSameDay(date, state.highlightedRange.end)) {
-            state.setAnchorDate(state.highlightedRange.start);
-            state.setFocusedDate(date);
-            state.setFocused(true);
-            state.setDragging(true);
-            isRangeBoundaryPressed.current = true;
-            return;
-          }
-        }
-
-        let startDragging = () => {
-          state.setDragging(true);
-          touchDragTimerRef.current = undefined;
-
-          state.selectDate(date);
-          state.setFocusedDate(date);
-          state.setFocused(true);
-          isAnchorPressed.current = true;
-        };
-
-        // Start selection on mouse/touch down so users can drag to select a range.
-        // On touch, delay dragging to determine if the user really meant to scroll.
-        if (e.pointerType === 'touch') {
-          touchDragTimerRef.current = setTimeout(startDragging, 200);
-        } else {
-          startDragging();
-        }
-      }
-    },
-    onPressEnd() {
-      isRangeBoundaryPressed.current = false;
-      isAnchorPressed.current = false;
-      clearTimeout(touchDragTimerRef.current);
-      touchDragTimerRef.current = undefined;
-    },
-    onPress() {
-      // For non-range selection, always select on press up.
-      if (!('anchorDate' in state) && !state.isReadOnly) {
-        state.selectDate(date);
-        state.setFocusedDate(date);
-        state.setFocused(true);
-      }
-    },
-    onPressUp(e) {
-      if (state.isReadOnly) {
-        return;
-      }
-
-      // If the user tapped quickly, the date won't be selected yet and the
-      // timer will still be in progress. In this case, select the date on touch up.
-      // Timer is cleared in onPressEnd.
-      if ('anchorDate' in state && touchDragTimerRef.current) {
-        state.selectDate(date);
-        state.setFocusedDate(date);
-        state.setFocused(true);
-      }
-
-      if ('anchorDate' in state) {
-        if (isRangeBoundaryPressed.current) {
-          // When clicking on the start or end date of an already selected range,
-          // start a new selection on press up to also allow dragging the date to
-          // change the existing range.
-          state.setAnchorDate(date);
-        } else if (state.anchorDate && !isAnchorPressed.current) {
-          // When releasing a drag or pressing the end date of a range, select it.
-          state.selectDate(date);
-          state.setFocusedDate(date);
-          state.setFocused(true);
-        } else if (e.pointerType === 'keyboard' && !state.anchorDate) {
-          // For range selection, auto-advance the focused date by one if using keyboard.
-          // This gives an indication that you're selecting a range rather than a single date.
-          // For mouse, this is unnecessary because users will see the indication on hover. For screen readers,
-          // there will be an announcement to "click to finish selecting range" (above).
-          state.selectDate(date);
-          let nextDay = date.add({days: 1});
-          if (state.isInvalid(nextDay)) {
-            nextDay = date.subtract({days: 1});
-          }
-          if (!state.isInvalid(nextDay)) {
-            state.setFocusedDate(nextDay);
-            state.setFocused(true);
-          }
-        } else if (e.pointerType === 'virtual') {
-          // For screen readers, just select the date on click.
-          state.selectDate(date);
-          state.setFocusedDate(date);
-          state.setFocused(true);
-        }
-      }
-    }
-  });
-
-  let tabIndex: number | undefined = undefined;
-  if (!isDisabled) {
-    tabIndex = isSameDay(date, state.focusedDate) ? 0 : -1;
-  }
-
-  // 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 in a overlay, scrollIntoViewport will only cause scrolling
-      // up to the overlay scroll body to prevent overlay shifting.
-      // Also only scroll into view if the cell actually got focused.
-      // There are some cases where the cell might be disabled or inside,
-      // an inert container and we don't want to scroll then.
-      if (getInteractionModality() !== 'pointer' && getActiveElement() === ref.current) {
-        scrollIntoViewport(ref.current, {containingElement: getScrollParent(ref.current)});
-      }
-    }
-  }, [isFocused, ref]);
-
-  let cellDateFormatter = useDateFormatter({
-    day: 'numeric',
-    timeZone: state.timeZone,
-    calendar: date.calendar.identifier
-  });
-
-  let formattedDate = useMemo(() => cellDateFormatter.formatToParts(nativeDate).find(part => part.type === 'day')!.value, [cellDateFormatter, nativeDate]);
-
-  return {
-    cellProps: {
-      role: 'gridcell',
-      'aria-disabled': !isSelectable || undefined,
-      'aria-selected': isSelected || undefined,
-      'aria-invalid': isInvalid || undefined
-    },
-    buttonProps: mergeProps(pressProps, {
-      onFocus() {
-        if (!isDisabled) {
-          state.setFocusedDate(date);
-          state.setFocused(true);
-        }
-      },
-      tabIndex,
-      role: 'button',
-      'aria-disabled': !isSelectable || undefined,
-      'aria-label': label,
-      'aria-invalid': isInvalid || undefined,
-      'aria-describedby': [
-        isInvalid ? errorMessageId : undefined,
-        descriptionProps['aria-describedby']
-      ].filter(Boolean).join(' ') || undefined,
-      onPointerEnter(e) {
-        // Highlight the date on hover or drag over a date when selecting a range.
-        if ('highlightDate' in state && (e.pointerType !== 'touch' || state.isDragging) && isSelectable) {
-          state.highlightDate(date);
-        }
-      },
-      onPointerDown(e: PointerEvent) {
-        // This is necessary on touch devices to allow dragging
-        // outside the original pressed element.
-        // (JSDOM does not support this)
-        let target = getEventTarget(e);
-        if (target instanceof HTMLElement && 'releasePointerCapture' in target) {
-          if ('hasPointerCapture' in target) {
-            if (target.hasPointerCapture(e.pointerId)) {
-              target.releasePointerCapture(e.pointerId);
-            }
-          } else {
-            (target as HTMLElement).releasePointerCapture(e.pointerId);
-          }
-        }
-      },
-      onContextMenu(e) {
-        // Prevent context menu on long press.
-        e.preventDefault();
-      }
-    }),
-    isPressed,
-    isFocused,
-    isSelected,
-    isDisabled,
-    isUnavailable,
-    isOutsideVisibleRange: date.compare(state.visibleRange.start) < 0 || date.compare(state.visibleRange.end) > 0,
-    isInvalid,
-    formattedDate
-  };
-}

package/src/useCalendarGrid.ts

@@ -1,174 +0,0 @@
-/*
- * Copyright 2020 Adobe. All rights reserved.
- * This file is licensed to you under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License. You may obtain a copy
- * of the License at http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software distributed under
- * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
- * OF ANY KIND, either express or implied. See the License for the specific language
- * governing permissions and limitations under the License.
- */
-
-import {CalendarDate, getWeeksInMonth, startOfWeek, today} from '@internationalized/date';
-import {CalendarState, RangeCalendarState} from '@react-stately/calendar';
-import {DOMAttributes} from '@react-types/shared';
-import {hookData, useVisibleRangeDescription} from './utils';
-import {KeyboardEvent, useMemo} from 'react';
-import {mergeProps, useLabels} from '@react-aria/utils';
-import {useDateFormatter, useLocale} from '@react-aria/i18n';
-
-export interface AriaCalendarGridProps {
-  /**
-   * 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,
-  /**
-   * 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',
-  /**
-   * The day that starts the week.
-   */
-  firstDayOfWeek?: 'sun' | 'mon' | 'tue' | 'wed' | 'thu' | 'fri' | 'sat'
-}
-
-export interface CalendarGridAria {
-  /** Props for the date grid element (e.g. `<table>`). */
-  gridProps: DOMAttributes,
-  /** Props for the grid header element (e.g. `<thead>`). */
-  headerProps: DOMAttributes,
-  /** A list of week day abbreviations formatted for the current locale, typically used in column headers. */
-  weekDays: string[],
-  /** The number of weeks in the month. */
-  weeksInMonth: number
-}
-
-/**
- * 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: AriaCalendarGridProps, state: CalendarState | RangeCalendarState): CalendarGridAria {
-  let {
-    startDate = state.visibleRange.start,
-    endDate = state.visibleRange.end,
-    firstDayOfWeek
-  } = props;
-
-  let {direction} = useLocale();
-
-  let onKeyDown = (e: KeyboardEvent) => {
-    switch (e.key) {
-      case 'Enter':
-      case ' ':
-        e.preventDefault();
-        state.selectFocusedDate();
-        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 {
-          state.focusPreviousDay();
-        }
-        break;
-      case 'ArrowUp':
-        e.preventDefault();
-        e.stopPropagation();
-        state.focusPreviousRow();
-        break;
-      case 'ArrowRight':
-        e.preventDefault();
-        e.stopPropagation();
-        if (direction === 'rtl') {
-          state.focusPreviousDay();
-        } else {
-          state.focusNextDay();
-        }
-        break;
-      case 'ArrowDown':
-        e.preventDefault();
-        e.stopPropagation();
-        state.focusNextRow();
-        break;
-      case 'Escape':
-        // Cancel the selection.
-        if ('setAnchorDate' in state) {
-          e.preventDefault();
-          state.setAnchorDate(null);
-        }
-        break;
-    }
-  };
-
-  let visibleRangeDescription = useVisibleRangeDescription(startDate, endDate, state.timeZone, true);
-
-  let {ariaLabel, ariaLabelledBy} = hookData.get(state)!;
-  let labelProps = useLabels({
-    'aria-label': [ariaLabel, visibleRangeDescription].filter(Boolean).join(', '),
-    'aria-labelledby': ariaLabelledBy
-  });
-
-  let dayFormatter = useDateFormatter({weekday: props.weekdayStyle || 'narrow', timeZone: state.timeZone});
-  let {locale} = useLocale();
-  let weekDays = useMemo(() => {
-    let weekStart = startOfWeek(today(state.timeZone), locale, firstDayOfWeek);
-    return [...new Array(7).keys()].map((index) => {
-      let date = weekStart.add({days: index});
-      let dateDay = date.toDate(state.timeZone);
-      return dayFormatter.format(dateDay);
-    });
-  }, [locale, state.timeZone, dayFormatter, firstDayOfWeek]);
-  let weeksInMonth = getWeeksInMonth(startDate, locale, firstDayOfWeek);
-
-  return {
-    gridProps: mergeProps(labelProps, {
-      role: 'grid',
-      'aria-readonly': state.isReadOnly || undefined,
-      'aria-disabled': state.isDisabled || undefined,
-      'aria-multiselectable': ('highlightedRange' in state) || undefined,
-      onKeyDown,
-      onFocus: () => state.setFocused(true),
-      onBlur: () => state.setFocused(false)
-    }),
-    headerProps: {
-      // Column headers are hidden to screen readers to make navigating with a touch screen reader easier.
-      // The day names are already included in the label of each cell, so there's no need to announce them twice.
-      'aria-hidden': true
-    },
-    weekDays,
-    weeksInMonth
-  };
-}

package/src/useRangeCalendar.ts

@@ -1,82 +0,0 @@
-/*
- * Copyright 2020 Adobe. All rights reserved.
- * This file is licensed to you under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License. You may obtain a copy
- * of the License at http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software distributed under
- * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
- * OF ANY KIND, either express or implied. See the License for the specific language
- * governing permissions and limitations under the License.
- */
-
-import {AriaRangeCalendarProps, DateValue} from '@react-types/calendar';
-import {CalendarAria, useCalendarBase} from './useCalendarBase';
-import {FocusableElement, RefObject} from '@react-types/shared';
-import {isFocusWithin, nodeContains, useEvent} from '@react-aria/utils';
-import {RangeCalendarState} from '@react-stately/calendar';
-import {useRef} from 'react';
-
-/**
- * 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: AriaRangeCalendarProps<T>, state: RangeCalendarState, ref: RefObject<FocusableElement | null>): CalendarAria {
-  let res = useCalendarBase(props, state);
-
-  // We need to ignore virtual pointer events from VoiceOver due to these bugs.
-  // https://bugs.webkit.org/show_bug.cgi?id=222627
-  // https://bugs.webkit.org/show_bug.cgi?id=223202
-  // usePress also does this and waits for the following click event before firing.
-  // We need to match that here otherwise this will fire before the press event in
-  // useCalendarCell, causing range selection to not work properly.
-  let isVirtualClick = useRef(false);
-  let windowRef = useRef(typeof window !== 'undefined' ? window : null);
-  useEvent(windowRef, 'pointerdown', e => {
-    isVirtualClick.current = e.width === 0 && e.height === 0;
-  });
-
-  // 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: PointerEvent) => {
-    if (isVirtualClick.current) {
-      isVirtualClick.current = false;
-      return;
-    }
-
-    state.setDragging(false);
-    if (!state.anchorDate) {
-      return;
-    }
-
-    let target = e.target as Element;
-    if (
-      ref.current &&
-      isFocusWithin(ref.current) &&
-      (!nodeContains(ref.current, target) || !target.closest('button, [role="button"]'))
-    ) {
-      state.selectFocusedDate();
-    }
-  };
-
-  useEvent(windowRef, 'pointerup', endDragging);
-
-  // Also stop range selection on blur, e.g. tabbing away from the calendar.
-  res.calendarProps.onBlur = e => {
-    if (!ref.current) {
-      return;
-    }
-    if ((!e.relatedTarget || !nodeContains(ref.current, e.relatedTarget)) && state.anchorDate) {
-      state.selectFocusedDate();
-    }
-  };
-
-  // Prevent touch scrolling while dragging
-  useEvent(ref, 'touchmove', e => {
-    if (state.isDragging) {
-      e.preventDefault();
-    }
-  }, {passive: false, capture: true});
-
-  return res;
-}