1 | import { AriaButtonProps } from "@react-types/button";
|
2 | import { DOMAttributes, FocusableElement } from "@react-types/shared";
|
3 | import { AriaCalendarProps, DateValue, AriaRangeCalendarProps } from "@react-types/calendar";
|
4 | import { CalendarState, RangeCalendarState } from "@react-stately/calendar";
|
5 | import { RefObject } from "react";
|
6 | import { CalendarDate } from "@internationalized/date";
|
7 | export 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 | */
|
23 | export 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 | */
|
28 | export function useRangeCalendar<T extends DateValue>(props: AriaRangeCalendarProps<T>, state: RangeCalendarState, ref: RefObject<FocusableElement>): CalendarAria;
|
29 | export 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 | }
|
43 | export 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 | */
|
56 | export function useCalendarGrid(props: AriaCalendarGridProps, state: CalendarState | RangeCalendarState): CalendarGridAria;
|
57 | export 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 | }
|
66 | export 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 | */
|
106 | export function useCalendarCell(props: AriaCalendarCellProps, state: CalendarState | RangeCalendarState, ref: RefObject<HTMLElement>): CalendarCellAria;
|
107 | export type { AriaCalendarProps, AriaRangeCalendarProps, CalendarProps, RangeCalendarProps } from '@react-types/calendar';
|
108 |
|
109 | //# sourceMappingURL=types.d.ts.map
|