import { CalendarDate, CalendarDateTime, ZonedDateTime } from '@internationalized/date'; import { RangeValue, ValidationState } from '@react-types/shared'; import { ReactNode } from 'react'; export type DateValue = CalendarDate | CalendarDateTime | ZonedDateTime; export type MappedDateValue = T extends ZonedDateTime ? ZonedDateTime : T extends CalendarDateTime ? CalendarDateTime : T extends CalendarDate ? CalendarDate : never; export type PageBehavior = 'single' | 'visible'; export interface CalendarPropsBase { /** The minimum allowed date that a user may select. */ minValue?: DateValue | null; /** The maximum allowed date that a user may select. */ maxValue?: DateValue | null; /** Callback that is called for each date of the calendar. If it returns true, then the date is unavailable. */ isDateUnavailable?: (date: DateValue) => boolean; /** * Whether the calendar is disabled. * @default false */ isDisabled?: boolean; /** * Whether the calendar value is immutable. * @default false */ isReadOnly?: boolean; /** * Whether to automatically focus the calendar when it mounts. * @default false */ autoFocus?: boolean; /** Controls the currently focused date within the calendar. */ focusedValue?: DateValue | null; /** The date that is focused when the calendar first mounts (uncontrolled). */ defaultFocusedValue?: DateValue | null; /** Handler that is called when the focused date changes. */ onFocusChange?: (date: CalendarDate) => void; /** * Whether the current selection is valid or invalid according to application logic. * @deprecated Use `isInvalid` instead. */ validationState?: ValidationState; /** Whether the current selection is invalid according to application logic. */ isInvalid?: boolean; /** An error message to display when the selected value is invalid. */ errorMessage?: ReactNode; /** * Controls the behavior of paging. Pagination either works by advancing the visible page by visibleDuration (default) or one unit of visibleDuration. * @default visible */ pageBehavior?: PageBehavior; /** * The day that starts the week. */ firstDayOfWeek?: 'sun' | 'mon' | 'tue' | 'wed' | 'thu' | 'fri' | 'sat'; /** * Determines the alignment of the visible months on initial render based on the current selection or current date if there is no selection. * @default 'center' */ selectionAlignment?: 'start' | 'center' | 'end'; } interface CalendarStateBase { /** Whether the calendar is disabled. */ readonly isDisabled: boolean; /** Whether the calendar is in a read only state. */ readonly isReadOnly: boolean; /** The date range that is currently visible in the calendar. */ readonly visibleRange: RangeValue; /** The minimum allowed date that a user may select. */ readonly minValue?: DateValue | null; /** The maximum allowed date that a user may select. */ readonly maxValue?: DateValue | null; /** The time zone of the dates currently being displayed. */ readonly timeZone: string; /** * The current validation state of the selected value. * @deprecated Use `isValueInvalid` instead. */ readonly validationState: ValidationState | null; /** Whether the calendar is invalid. */ readonly isValueInvalid: boolean; /** The currently focused date. */ readonly focusedDate: CalendarDate; /** Sets the focused date. */ setFocusedDate(value: CalendarDate): void; /** Moves focus to the next calendar date. */ focusNextDay(): void; /** Moves focus to the previous calendar date. */ focusPreviousDay(): void; /** Moves focus to the next row of dates, e.g. the next week. */ focusNextRow(): void; /** Moves focus to the previous row of dates, e.g. the previous work. */ focusPreviousRow(): void; /** Moves focus to the next page of dates, e.g. the next month if one month is visible. */ focusNextPage(): void; /** Moves focus to the previous page of dates, e.g. the previous month if one month is visible. */ focusPreviousPage(): void; /** Moves focus to the start of the current section of dates, e.g. the start of the current month. */ focusSectionStart(): void; /** Moves focus to the end of the current section of dates, e.g. the end of the current month month. */ focusSectionEnd(): void; /** * Moves focus to the next section of dates based on what is currently displayed. * By default, focus is moved by one of the currently displayed unit. For example, if * one or more months are displayed, then focus is moved forward by one month. * If the `larger` option is `true`, the focus is moved by the next larger unit than * the one displayed. For example, if months are displayed, then focus moves to the next year. */ focusNextSection(larger?: boolean): void; /** * Moves focus to the previous section of dates based on what is currently displayed. * By default, focus is moved by one of the currently displayed unit. For example, if * one or more months are displayed, then focus is moved backward by one month. * If the `larger` option is `true`, the focus is moved by the next larger unit than * the one displayed. For example, if months are displayed, then focus moves to the previous year. */ focusPreviousSection(larger?: boolean): void; /** Selects the currently focused date. */ selectFocusedDate(): void; /** Selects the given date. */ selectDate(date: CalendarDate): void; /** Whether focus is currently within the calendar. */ readonly isFocused: boolean; /** Sets whether focus is currently within the calendar. */ setFocused(value: boolean): void; /** Returns whether the given date is invalid according to the `minValue` and `maxValue` props. */ isInvalid(date: CalendarDate): boolean; /** Returns whether the given date is currently selected. */ isSelected(date: CalendarDate): boolean; /** Returns whether the given date is currently focused. */ isCellFocused(date: CalendarDate): boolean; /** Returns whether the given date is disabled according to the `minValue, `maxValue`, and `isDisabled` props. */ isCellDisabled(date: CalendarDate): boolean; /** Returns whether the given date is unavailable according to the `isDateUnavailable` prop. */ isCellUnavailable(date: CalendarDate): boolean; /** Returns whether the previous visible date range is allowed to be selected according to the `minValue` prop. */ isPreviousVisibleRangeInvalid(): boolean; /** Returns whether the next visible date range is allowed to be selected according to the `maxValue` prop. */ isNextVisibleRangeInvalid(): boolean; /** * Returns an array of dates in the week index counted from the provided start date, or the first visible date if not given. * The returned array always has 7 elements, but may include null if the date does not exist according to the calendar system. */ getDatesInWeek(weekIndex: number, startDate?: CalendarDate): Array; } export interface CalendarState extends CalendarStateBase { /** The currently selected date. */ readonly value: CalendarDate | null; /** Sets the currently selected date. */ setValue(value: CalendarDate | null): void; } export interface RangeCalendarState extends CalendarStateBase { /** The currently selected date range. */ readonly value: RangeValue | null; /** Sets the currently selected date range. */ setValue(value: RangeValue | null): void; /** Highlights the given date during selection, e.g. by hovering or dragging. */ highlightDate(date: CalendarDate): void; /** The current anchor date that the user clicked on to begin range selection. */ readonly anchorDate: CalendarDate | null; /** Sets the anchor date that the user clicked on to begin range selection. */ setAnchorDate(date: CalendarDate | null): void; /** The currently highlighted date range. */ readonly highlightedRange: RangeValue | null; /** Whether the user is currently dragging over the calendar. */ readonly isDragging: boolean; /** Sets whether the user is dragging over the calendar. */ setDragging(isDragging: boolean): void; /** Clears the current selection. */ clearSelection(): void; } export {};