react-aria/dist/private/calendar/useCalendarGrid.mjs.map

Spectrum UI components in React

{"mappings":"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","sources":["packages/react-aria/src/calendar/useCalendarGrid.ts"],"sourcesContent":["/*\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\nimport {CalendarDate, startOfWeek, today} from '@internationalized/date';\nimport {CalendarSelectionMode, CalendarState} from 'react-stately/useCalendarState';\nimport {DOMAttributes} from '@react-types/shared';\nimport {hookData, useVisibleRangeDescription} from './utils';\nimport {KeyboardEvent, useMemo} from 'react';\nimport {mergeProps} from '../utils/mergeProps';\nimport {RangeCalendarState} from 'react-stately/useRangeCalendarState';\nimport {useDateFormatter} from '../i18n/useDateFormatter';\nimport {useLabels} from '../utils/useLabels';\nimport {useLocale} from '../i18n/I18nProvider';\n\nexport interface AriaCalendarGridProps {\n  /**\n   * The first date displayed in the calendar grid.\n   * Defaults to the first visible date in the calendar.\n   * Override this to display multiple date grids in a calendar.\n   */\n  startDate?: CalendarDate;\n  /**\n   * The last date displayed in the calendar grid.\n   * Defaults to the last visible date in the calendar.\n   * Override this to display multiple date grids in a calendar.\n   */\n  endDate?: CalendarDate;\n  /**\n   * The style of weekday names to display in the calendar grid header,\n   * e.g. single letter, abbreviation, or full day name.\n   *\n   * @default 'narrow'\n   */\n  weekdayStyle?: 'narrow' | 'short' | 'long';\n  /**\n   * The day that starts the week.\n   */\n  firstDayOfWeek?: 'sun' | 'mon' | 'tue' | 'wed' | 'thu' | 'fri' | 'sat';\n}\n\nexport interface CalendarGridAria {\n  /** Props for the date grid element (e.g. `<table>`). */\n  gridProps: DOMAttributes;\n  /** Props for the grid header element (e.g. `<thead>`). */\n  headerProps: DOMAttributes;\n  /**\n   * A list of week day abbreviations formatted for the current locale, typically used in column\n   * headers.\n   */\n  weekDays: string[];\n  /** The number of weeks in the month. */\n  weeksInMonth: number;\n}\n\n/**\n * Provides the behavior and accessibility implementation for a calendar grid component.\n * A calendar grid displays a single grid of days within a calendar or range calendar which\n * can be keyboard navigated and selected by the user.\n */\nexport function useCalendarGrid(\n  props: AriaCalendarGridProps,\n  state: CalendarState<CalendarSelectionMode> | RangeCalendarState\n): CalendarGridAria {\n  let {\n    startDate = state.visibleRange.start,\n    endDate = state.visibleRange.end,\n    firstDayOfWeek\n  } = props;\n\n  let {direction} = useLocale();\n\n  let onKeyDown = (e: KeyboardEvent) => {\n    switch (e.key) {\n      case 'Enter':\n      case ' ':\n        e.preventDefault();\n        state.selectFocusedDate();\n        break;\n      case 'PageUp':\n        e.preventDefault();\n        e.stopPropagation();\n        state.focusPreviousSection(e.shiftKey);\n        break;\n      case 'PageDown':\n        e.preventDefault();\n        e.stopPropagation();\n        state.focusNextSection(e.shiftKey);\n        break;\n      case 'End':\n        e.preventDefault();\n        e.stopPropagation();\n        state.focusSectionEnd();\n        break;\n      case 'Home':\n        e.preventDefault();\n        e.stopPropagation();\n        state.focusSectionStart();\n        break;\n      case 'ArrowLeft':\n        e.preventDefault();\n        e.stopPropagation();\n        if (direction === 'rtl') {\n          state.focusNextDay();\n        } else {\n          state.focusPreviousDay();\n        }\n        break;\n      case 'ArrowUp':\n        e.preventDefault();\n        e.stopPropagation();\n        state.focusPreviousRow();\n        break;\n      case 'ArrowRight':\n        e.preventDefault();\n        e.stopPropagation();\n        if (direction === 'rtl') {\n          state.focusPreviousDay();\n        } else {\n          state.focusNextDay();\n        }\n        break;\n      case 'ArrowDown':\n        e.preventDefault();\n        e.stopPropagation();\n        state.focusNextRow();\n        break;\n      case 'Escape':\n        // Cancel the selection.\n        if ('setAnchorDate' in state) {\n          e.preventDefault();\n          state.setAnchorDate(null);\n        }\n        break;\n    }\n  };\n\n  let visibleRangeDescription = useVisibleRangeDescription(\n    startDate,\n    endDate,\n    state.timeZone,\n    true\n  );\n\n  let {ariaLabel, ariaLabelledBy} = hookData.get(state)!;\n  let labelProps = useLabels({\n    'aria-label': [ariaLabel, visibleRangeDescription].filter(Boolean).join(', '),\n    'aria-labelledby': ariaLabelledBy\n  });\n\n  let dayFormatter = useDateFormatter({\n    weekday: props.weekdayStyle || 'narrow',\n    timeZone: state.timeZone\n  });\n  let {locale} = useLocale();\n  let weekDays = useMemo(() => {\n    let isDayView = state.visibleDuration.days && state.visibleDuration.days < 7;\n    let weekStart = isDayView\n      ? startDate\n      : startOfWeek(today(state.timeZone), locale, firstDayOfWeek);\n    let days = isDayView ? state.visibleDuration.days! : 7;\n    return [...new Array(days).keys()].map(index => {\n      let date = weekStart.add({days: index});\n      let dateDay = date.toDate(state.timeZone);\n      return dayFormatter.format(dateDay);\n    });\n  }, [locale, state.timeZone, dayFormatter, firstDayOfWeek, startDate, state.visibleDuration.days]);\n  let weeksInMonth = state.getWeeksInMonth(startDate);\n\n  return {\n    gridProps: mergeProps(labelProps, {\n      role: 'grid',\n      'aria-readonly': state.isReadOnly || undefined,\n      'aria-disabled': state.isDisabled || undefined,\n      'aria-multiselectable':\n        'highlightedRange' in state || state.selectionMode === 'multiple' || undefined,\n      onKeyDown,\n      onFocus: () => state.setFocused(true),\n      onBlur: () => state.setFocused(false)\n    }),\n    headerProps: {\n      // Column headers are hidden to screen readers to make navigating with a touch screen reader easier.\n      // The day names are already included in the label of each cell, so there's no need to announce them twice.\n      'aria-hidden': true\n    },\n    weekDays,\n    weeksInMonth\n  };\n}\n"],"names":[],"version":3,"file":"useCalendarGrid.mjs.map"}