UNPKG

5.21 kBTypeScriptView Raw
1import { AriaButtonProps } from "@react-types/button";
2import { DOMAttributes, FocusableElement } from "@react-types/shared";
3import { AriaCalendarProps, DateValue, AriaRangeCalendarProps } from "@react-types/calendar";
4import { CalendarState, RangeCalendarState } from "@react-stately/calendar";
5import { RefObject } from "react";
6import { CalendarDate } from "@internationalized/date";
7export interface CalendarAria {
8 /** Props for the calendar grouping element. */
9 calendarProps: DOMAttributes;
10 /** Props for the next button. */
11 nextButtonProps: AriaButtonProps;
12 /** Props for the previous button. */
13 prevButtonProps: AriaButtonProps;
14 /** Props for the error message element, if any. */
15 errorMessageProps: DOMAttributes;
16 /** A description of the visible date range, for use in the calendar title. */
17 title: string;
18}
19/**
20 * Provides the behavior and accessibility implementation for a calendar component.
21 * A calendar displays one or more date grids and allows users to select a single date.
22 */
23export function useCalendar<T extends DateValue>(props: AriaCalendarProps<T>, state: CalendarState): CalendarAria;
24/**
25 * Provides the behavior and accessibility implementation for a range calendar component.
26 * A range calendar displays one or more date grids and allows users to select a contiguous range of dates.
27 */
28export function useRangeCalendar<T extends DateValue>(props: AriaRangeCalendarProps<T>, state: RangeCalendarState, ref: RefObject<FocusableElement>): CalendarAria;
29export interface AriaCalendarGridProps {
30 /**
31 * The first date displayed in the calendar grid.
32 * Defaults to the first visible date in the calendar.
33 * Override this to display multiple date grids in a calendar.
34 */
35 startDate?: CalendarDate;
36 /**
37 * The last date displayed in the calendar grid.
38 * Defaults to the last visible date in the calendar.
39 * Override this to display multiple date grids in a calendar.
40 */
41 endDate?: CalendarDate;
42}
43export interface CalendarGridAria {
44 /** Props for the date grid element (e.g. `<table>`). */
45 gridProps: DOMAttributes;
46 /** Props for the grid header element (e.g. `<thead>`). */
47 headerProps: DOMAttributes;
48 /** A list of week day abbreviations formatted for the current locale, typically used in column headers. */
49 weekDays: string[];
50}
51/**
52 * Provides the behavior and accessibility implementation for a calendar grid component.
53 * A calendar grid displays a single grid of days within a calendar or range calendar which
54 * can be keyboard navigated and selected by the user.
55 */
56export function useCalendarGrid(props: AriaCalendarGridProps, state: CalendarState | RangeCalendarState): CalendarGridAria;
57export interface AriaCalendarCellProps {
58 /** The date that this cell represents. */
59 date: CalendarDate;
60 /**
61 * Whether the cell is disabled. By default, this is determined by the
62 * Calendar's `minValue`, `maxValue`, and `isDisabled` props.
63 */
64 isDisabled?: boolean;
65}
66export interface CalendarCellAria {
67 /** Props for the grid cell element (e.g. `<td>`). */
68 cellProps: DOMAttributes;
69 /** Props for the button element within the cell. */
70 buttonProps: DOMAttributes;
71 /** Whether the cell is currently being pressed. */
72 isPressed: boolean;
73 /** Whether the cell is selected. */
74 isSelected: boolean;
75 /** Whether the cell is focused. */
76 isFocused: boolean;
77 /**
78 * Whether the cell is disabled, according to the calendar's `minValue`, `maxValue`, and `isDisabled` props.
79 * Disabled dates are not focusable, and cannot be selected by the user. They are typically
80 * displayed with a dimmed appearance.
81 */
82 isDisabled: boolean;
83 /**
84 * Whether the cell is unavailable, according to the calendar's `isDateUnavailable` prop. Unavailable dates remain
85 * focusable, but cannot be selected by the user. They should be displayed with a visual affordance to indicate they
86 * are unavailable, such as a different color or a strikethrough.
87 *
88 * Note that because they are focusable, unavailable dates must meet a 4.5:1 color contrast ratio,
89 * [as defined by WCAG](https://www.w3.org/WAI/WCAG21/Understanding/contrast-minimum.html).
90 */
91 isUnavailable: boolean;
92 /**
93 * Whether the cell is outside the visible range of the calendar.
94 * For example, dates before the first day of a month in the same week.
95 */
96 isOutsideVisibleRange: boolean;
97 /** Whether the cell is part of an invalid selection. */
98 isInvalid: boolean;
99 /** The day number formatted according to the current locale. */
100 formattedDate: string;
101}
102/**
103 * Provides the behavior and accessibility implementation for a calendar cell component.
104 * A calendar cell displays a date cell within a calendar grid which can be selected by the user.
105 */
106export function useCalendarCell(props: AriaCalendarCellProps, state: CalendarState | RangeCalendarState, ref: RefObject<HTMLElement>): CalendarCellAria;
107export type { AriaCalendarProps, AriaRangeCalendarProps, CalendarProps, RangeCalendarProps } from '@react-types/calendar';
108
109//# sourceMappingURL=types.d.ts.map