@react-aria/calendar
Advanced tools
@react-aria/calendar - npm Package Compare versions
Comparing version 3.0.0-nightly.3142 to 3.0.0-nightly.3148
@@ -314,3 +314,4 @@ var $jzHdg$reactarialiveannouncer = require("@react-aria/live-announcer"); | ||
| isDisabled: props.isDisabled || state.isPreviousVisibleRangeInvalid() | ||
| } | ||
| }, | ||
| title: visibleRangeDescription | ||
| }; | ||
@@ -378,4 +379,5 @@ } | ||
| function $a07388a797d86b95$export$cb95147730a423f5(props, state) { | ||
| let { isReadOnly: isReadOnly = false , isDisabled: isDisabled = false , startDate: startDate = state.visibleRange.start , endDate: endDate = state.visibleRange.end } = props; | ||
| let { startDate: startDate = state.visibleRange.start , endDate: endDate = state.visibleRange.end } = props; | ||
| let { direction: direction } = $jzHdg$reactariai18n.useLocale(); | ||
@@ -441,7 +443,29 @@ let onKeyDown = (e)=>{ | ||
| }); | ||
| let dayFormatter = $jzHdg$reactariai18n.useDateFormatter({ | ||
| weekday: 'narrow' | ||
| }); | ||
| let dayFormatterLong = $jzHdg$reactariai18n.useDateFormatter({ | ||
| weekday: 'long' | ||
| }); | ||
| let { locale: locale } = $jzHdg$reactariai18n.useLocale(); | ||
| let weekStart = $jzHdg$internationalizeddate.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: narrow, | ||
| long: long | ||
| }; | ||
| }); | ||
| return { | ||
| gridProps: $jzHdg$reactariautils.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, | ||
@@ -452,3 +476,4 @@ onKeyDown: onKeyDown, | ||
| onBlur: ()=>state.setFocused(false) | ||
| }) | ||
| }), | ||
| weekDays: weekDays | ||
| }; | ||
@@ -619,2 +644,12 @@ } | ||
| ]); | ||
| let cellDateFormatter = $jzHdg$reactariai18n.useDateFormatter({ | ||
| day: 'numeric', | ||
| timeZone: state.timeZone, | ||
| calendar: date.calendar.identifier | ||
| }); | ||
| let formattedDate = $jzHdg$react.useMemo(()=>cellDateFormatter.format(nativeDate) | ||
| , [ | ||
| cellDateFormatter, | ||
| nativeDate | ||
| ]); | ||
| return { | ||
@@ -649,3 +684,8 @@ cellProps: { | ||
| }), | ||
| isPressed: isPressed | ||
| isPressed: isPressed, | ||
| isFocused: isFocused, | ||
| isSelected: isSelected, | ||
| isDisabled: isDisabled, | ||
| isOutsideVisibleRange: date.compare(state.visibleRange.start) < 0 || date.compare(state.visibleRange.end) > 0, | ||
| formattedDate: formattedDate | ||
| }; | ||
@@ -655,14 +695,2 @@ } | ||
| var $70ffb7b28f543014$exports = {}; | ||
| $parcel$export($70ffb7b28f543014$exports, "useCalendarTableHeader", () => $70ffb7b28f543014$export$2d550ec8e081e40b); | ||
| function $70ffb7b28f543014$export$2d550ec8e081e40b() { | ||
| return { | ||
| columnHeaderProps: { | ||
| scope: 'col' | ||
| } | ||
| }; | ||
| } | ||
| var $c22e9cfd2d8c9e8e$exports = {}; | ||
@@ -675,3 +703,2 @@ | ||
| $parcel$exportWildcard(module.exports, $4d833327a32c9193$exports); | ||
| $parcel$exportWildcard(module.exports, $70ffb7b28f543014$exports); | ||
| $parcel$exportWildcard(module.exports, $c22e9cfd2d8c9e8e$exports); | ||
@@ -678,0 +705,0 @@ |
| import {announce as $amWdn$announce} from "@react-aria/live-announcer"; | ||
| import {useId as $amWdn$useId, useUpdateEffect as $amWdn$useUpdateEffect, useDescription as $amWdn$useDescription, mergeProps as $amWdn$mergeProps, useEvent as $amWdn$useEvent, useLabels as $amWdn$useLabels, focusWithoutScrolling as $amWdn$focusWithoutScrolling} from "@react-aria/utils"; | ||
| import {useMessageFormatter as $amWdn$useMessageFormatter, useDateFormatter as $amWdn$useDateFormatter, useLocale as $amWdn$useLocale} from "@react-aria/i18n"; | ||
| import {isSameDay as $amWdn$isSameDay, startOfMonth as $amWdn$startOfMonth, endOfMonth as $amWdn$endOfMonth, isEqualDay as $amWdn$isEqualDay, isToday as $amWdn$isToday, isSameMonth as $amWdn$isSameMonth} from "@internationalized/date"; | ||
| import {isSameDay as $amWdn$isSameDay, startOfMonth as $amWdn$startOfMonth, endOfMonth as $amWdn$endOfMonth, startOfWeek as $amWdn$startOfWeek, isEqualDay as $amWdn$isEqualDay, isToday as $amWdn$isToday, isSameMonth as $amWdn$isSameMonth} from "@internationalized/date"; | ||
| import {useMemo as $amWdn$useMemo, useRef as $amWdn$useRef, useEffect as $amWdn$useEffect} from "react"; | ||
@@ -298,3 +298,4 @@ import {usePress as $amWdn$usePress} from "@react-aria/interactions"; | ||
| isDisabled: props.isDisabled || state.isPreviousVisibleRangeInvalid() | ||
| } | ||
| }, | ||
| title: visibleRangeDescription | ||
| }; | ||
@@ -362,4 +363,5 @@ } | ||
| function $e3031d1f8c9d64eb$export$cb95147730a423f5(props, state) { | ||
| let { isReadOnly: isReadOnly = false , isDisabled: isDisabled = false , startDate: startDate = state.visibleRange.start , endDate: endDate = state.visibleRange.end } = props; | ||
| let { startDate: startDate = state.visibleRange.start , endDate: endDate = state.visibleRange.end } = props; | ||
| let { direction: direction } = $amWdn$useLocale(); | ||
@@ -425,7 +427,29 @@ let onKeyDown = (e)=>{ | ||
| }); | ||
| let dayFormatter = $amWdn$useDateFormatter({ | ||
| weekday: 'narrow' | ||
| }); | ||
| let dayFormatterLong = $amWdn$useDateFormatter({ | ||
| weekday: 'long' | ||
| }); | ||
| let { locale: locale } = $amWdn$useLocale(); | ||
| let weekStart = $amWdn$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: narrow, | ||
| long: long | ||
| }; | ||
| }); | ||
| return { | ||
| gridProps: $amWdn$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, | ||
@@ -436,3 +460,4 @@ onKeyDown: onKeyDown, | ||
| onBlur: ()=>state.setFocused(false) | ||
| }) | ||
| }), | ||
| weekDays: weekDays | ||
| }; | ||
@@ -603,2 +628,12 @@ } | ||
| ]); | ||
| let cellDateFormatter = $amWdn$useDateFormatter({ | ||
| day: 'numeric', | ||
| timeZone: state.timeZone, | ||
| calendar: date.calendar.identifier | ||
| }); | ||
| let formattedDate = $amWdn$useMemo(()=>cellDateFormatter.format(nativeDate) | ||
| , [ | ||
| cellDateFormatter, | ||
| nativeDate | ||
| ]); | ||
| return { | ||
@@ -633,3 +668,8 @@ cellProps: { | ||
| }), | ||
| isPressed: isPressed | ||
| isPressed: isPressed, | ||
| isFocused: isFocused, | ||
| isSelected: isSelected, | ||
| isDisabled: isDisabled, | ||
| isOutsideVisibleRange: date.compare(state.visibleRange.start) < 0 || date.compare(state.visibleRange.end) > 0, | ||
| formattedDate: formattedDate | ||
| }; | ||
@@ -639,14 +679,2 @@ } | ||
| var $a65ac6680a546fd2$exports = {}; | ||
| $parcel$export($a65ac6680a546fd2$exports, "useCalendarTableHeader", () => $a65ac6680a546fd2$export$2d550ec8e081e40b); | ||
| function $a65ac6680a546fd2$export$2d550ec8e081e40b() { | ||
| return { | ||
| columnHeaderProps: { | ||
| scope: 'col' | ||
| } | ||
| }; | ||
| } | ||
| var $34109fd41c960533$exports = {}; | ||
@@ -657,3 +685,3 @@ | ||
| export {$9942cad8a072a530$export$3ee915f8151bd4f1 as useCalendar, $46a4342aab3d8076$export$87e0539f600c24e5 as useRangeCalendar, $e3031d1f8c9d64eb$export$cb95147730a423f5 as useCalendarGrid, $36a0ac60f04457c5$export$136073280381448e as useCalendarCell, $a65ac6680a546fd2$export$2d550ec8e081e40b as useCalendarTableHeader}; | ||
| export {$9942cad8a072a530$export$3ee915f8151bd4f1 as useCalendar, $46a4342aab3d8076$export$87e0539f600c24e5 as useRangeCalendar, $e3031d1f8c9d64eb$export$cb95147730a423f5 as useCalendarGrid, $36a0ac60f04457c5$export$136073280381448e as useCalendarCell}; | ||
| //# sourceMappingURL=module.js.map |
| import { AriaButtonProps } from "@react-types/button"; | ||
| import { HTMLAttributes, RefObject } from "react"; | ||
| import { CalendarProps, DateValue, RangeCalendarProps, CalendarPropsBase } from "@react-types/calendar"; | ||
| import { CalendarProps, DateValue, RangeCalendarProps } from "@react-types/calendar"; | ||
| import { CalendarState, RangeCalendarState } from "@react-stately/calendar"; | ||
| import { CalendarDate } from "@internationalized/date"; | ||
| import { PressProps } from "@react-aria/interactions"; | ||
| export interface CalendarAria { | ||
| /** Props for the calendar grouping element. */ | ||
| calendarProps: HTMLAttributes<HTMLElement>; | ||
| /** Props for the next button. */ | ||
| nextButtonProps: 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 { | ||
| /** 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; | ||
| } | ||
| /** | ||
| * 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; | ||
| /** | ||
| * 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; | ||
| 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; | ||
| 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>; | ||
| /** 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; | ||
| interface CalendarTableHeaderAria { | ||
| columnHeaderProps: { | ||
| scope?: 'col'; | ||
| }; | ||
| } | ||
| export function useCalendarTableHeader(): CalendarTableHeaderAria; | ||
| //# sourceMappingURL=types.d.ts.map |
| { | ||
| "name": "@react-aria/calendar", | ||
| "version": "3.0.0-nightly.3142+51ff50c6f", | ||
| "version": "3.0.0-nightly.3148+320c69908", | ||
| "description": "Spectrum UI components in React", | ||
@@ -21,11 +21,11 @@ "license": "Apache-2.0", | ||
| "@babel/runtime": "^7.6.2", | ||
| "@internationalized/date": "3.0.0-nightly.3142+51ff50c6f", | ||
| "@react-aria/i18n": "3.0.0-nightly.1446+51ff50c6f", | ||
| "@react-aria/interactions": "3.0.0-nightly.1446+51ff50c6f", | ||
| "@react-aria/live-announcer": "3.0.0-nightly.1446+51ff50c6f", | ||
| "@react-aria/utils": "3.0.0-nightly.1446+51ff50c6f", | ||
| "@react-stately/calendar": "3.0.0-nightly.1446+51ff50c6f", | ||
| "@react-types/button": "3.4.4-nightly.3142+51ff50c6f", | ||
| "@react-types/calendar": "3.0.0-nightly.3142+51ff50c6f", | ||
| "@react-types/shared": "3.0.0-nightly.1446+51ff50c6f", | ||
| "@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" | ||
@@ -40,3 +40,3 @@ }, | ||
| }, | ||
| "gitHead": "51ff50c6fed6df76c22467622b17b2af2d9380e0" | ||
| "gitHead": "320c69908b41be47a3abb2878d04f90384e54321" | ||
| } |
@@ -17,3 +17,2 @@ /* | ||
| export * from './useCalendarCell'; | ||
| export * from './useCalendarTableHeader'; | ||
| export * from './types'; |
@@ -17,5 +17,10 @@ /* | ||
| 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 | ||
| } | ||
@@ -25,3 +30,13 @@ | ||
| 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 | ||
| } |
@@ -18,4 +18,8 @@ /* | ||
| /** | ||
| * 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); | ||
| } |
@@ -68,4 +68,5 @@ /* | ||
| isDisabled: props.isDisabled || state.isPreviousVisibleRangeInvalid() | ||
| } | ||
| }, | ||
| title: visibleRangeDescription | ||
| }; | ||
| } |
@@ -20,7 +20,12 @@ /* | ||
| 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 | ||
@@ -30,7 +35,27 @@ } | ||
| 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 { | ||
@@ -209,2 +234,10 @@ let {date, isDisabled} = props; | ||
| let cellDateFormatter = useDateFormatter({ | ||
| day: 'numeric', | ||
| timeZone: state.timeZone, | ||
| calendar: date.calendar.identifier | ||
| }); | ||
| let formattedDate = useMemo(() => cellDateFormatter.format(nativeDate), [cellDateFormatter, nativeDate]); | ||
| return { | ||
@@ -245,4 +278,9 @@ cellProps: { | ||
| }), | ||
| isPressed | ||
| isPressed, | ||
| isFocused, | ||
| isSelected, | ||
| isDisabled, | ||
| isOutsideVisibleRange: date.compare(state.visibleRange.start) < 0 || date.compare(state.visibleRange.end) > 0, | ||
| formattedDate | ||
| }; | ||
| } |
@@ -13,20 +13,32 @@ /* | ||
| 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, | ||
@@ -112,7 +124,22 @@ endDate = state.visibleRange.end | ||
| 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, | ||
@@ -122,4 +149,5 @@ onKeyDown, | ||
| onBlur: () => state.setFocused(false) | ||
| }) | ||
| }), | ||
| weekDays | ||
| }; | ||
| } |
@@ -20,2 +20,6 @@ /* | ||
| /** | ||
| * 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 { | ||
@@ -22,0 +26,0 @@ let res = useCalendarBase(props, state); |
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
New alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Manifest confusion
Supply chain riskThis package has inconsistent metadata. This could be malicious or caused by an error when publishing the package.
Found 1 instance in 1 package
Fixed alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Manifest confusion
Supply chain riskThis package has inconsistent metadata. This could be malicious or caused by an error when publishing the package.
Found 1 instance in 1 package
Improved metrics
- Total package byte prevSize
- increased by6.21%
281295
- Lines of code
- increased by10.12%
2046
Worsened metrics
- Number of package files
- decreased by-5.56%
17