import { type ResponsiveProp } from "@salt-ds/core"; import type { DateFrameworkType, Timezone } from "@salt-ds/date-adapters"; import { type SyntheticEvent } from "react"; import { type UseCalendarSelectionBaseProps, type UseCalendarSelectionMultiselectOffsetProps, type UseCalendarSelectionMultiselectRangeProps, type UseCalendarSelectionMultiselectSingleProps, type UseCalendarSelectionOffsetProps, type UseCalendarSelectionRangeProps, type UseCalendarSelectionSingleProps } from "./useCalendarSelection"; /** * Base properties for the UseCalendar hook. * @template TDate - The type of the date object. */ interface UseCalendarBaseProps extends UseCalendarSelectionBaseProps { /** * The default visible month. */ defaultVisibleMonth?: TDate; /** * Callback fired when the visible month changes. * @param event - The synthetic event or null if triggered by code. * @param visibleMonth - The new visible month. */ onVisibleMonthChange?: (event: SyntheticEvent | null, visibleMonth: TDate) => void; /** * Function to determine if a day is unselectable. * @param date - The date to check. * @returns A string reason if the day is unselectable, otherwise `false` or `undefined`. */ isDayUnselectable?: (date: TDate) => string | false | undefined; /** * Function to determine if a day is highlighted. * @param date - The date to check. * @returns A string reason if the day is highlighted, otherwise `false` or `undefined`. */ isDayHighlighted?: (date: TDate) => string | false | undefined; /** * If `true`, hides dates that are out of the selectable range. */ hideOutOfRangeDates?: boolean; /** * The minimum selectable date. */ minDate?: TDate; /** * The maximum selectable date. */ maxDate?: TDate; /** * Number of visible months, maximum 12, defaults to 1. */ numberOfVisibleMonths?: ResponsiveProp<1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12>; /** * If `true`, the calendar will be multiselect. */ multiselect?: boolean; } /** * UseCalendar hook props for a single date selection. */ export interface UseCalendarSingleProps extends UseCalendarSelectionSingleProps, UseCalendarBaseProps { } /** * UseCalendar hook props for a multi-select, single date selection. */ export interface UseCalendarMultiselectSingleProps extends UseCalendarSelectionMultiselectSingleProps, Omit, "multiselect"> { } /** * UseCalendar hook props for a date range selection. * @template TDate - The type of the date object. */ export interface UseCalendarRangeProps extends UseCalendarSelectionRangeProps, UseCalendarBaseProps { } /** * UseCalendar hook props for a multi-select, date range selection. * @template TDate - The type of the date object. */ export interface UseCalendarMultiselectRangeProps extends UseCalendarSelectionMultiselectRangeProps, Omit, "multiselect"> { } /** * UseCalendar hook props for an offset date selection. * @template TDate - The type of the date object. */ export interface UseCalendarOffsetProps extends UseCalendarSelectionOffsetProps, UseCalendarBaseProps { } /** * UseCalendar hook props for a multi-select, offset selection. * @template TDate - The type of the date object. */ export interface UseCalendarMultiselectOffsetProps extends UseCalendarSelectionMultiselectOffsetProps, Omit, "multiselect"> { } /** * UseCalendar hook props, wth the selection variant determining the return type of the date selection * @template TDate - The type of the date object. */ export type UseCalendarProps = UseCalendarSingleProps | UseCalendarMultiselectSingleProps | UseCalendarRangeProps | UseCalendarMultiselectRangeProps | UseCalendarOffsetProps | UseCalendarMultiselectOffsetProps; /** * Represents the return type of the useCalendar hook. * @template TDate - The type of the date object. */ export interface UseCalendarReturn { /** * The state of the calendar. */ state: { /** * The currently visible month in the calendar. */ visibleMonth: TDate; /** * The currently focused date in the calendar, or null if no date is focused. */ focusedDate: TDate | null; /** * Focusable dates based on current state */ focusableDates: TDate[]; /** * The minimum selectable date in the calendar. */ minDate: TDate; /** * The maximum selectable date in the calendar. */ maxDate: TDate; /** * The selection variant of the calendar, indicating the type of selection allowed. */ selectionVariant: "single" | "range" | "offset"; /** * Whether to hide dates that are out of the selectable range. */ hideOutOfRangeDates?: boolean; /** * Number of visible months */ numberOfVisibleMonths: number; /** * Specifies the timezone behavior: * - If undefined, the timezone will be derived from the passed date, or from `defaultSelectedDate`/`selectedDate`. * - If set to "default", the default timezone of the date library will be used. * - If set to "system", the local system's timezone will be applied. * - If set to "UTC", the time will be returned in UTC. * - If set to a valid IANA timezone identifier, the time will be returned for that specific timezone. */ timezone?: Timezone; /** * Additional state properties from selectionManager.state. */ [key: string]: any; }; /** * Helper functions for interacting with the calendar. */ helpers: { /** * Sets the visible month in the calendar. * * @param event - The synthetic event or null if triggered by code. * @param newVisibleMonth - The new visible month to set. */ setVisibleMonth: (event: SyntheticEvent | null, newVisibleMonth: TDate) => void; /** * Sets the focused date in the calendar. * * @param event - The synthetic event or null if triggered by code. * @param date - The new date to focus. */ setFocusedDate: (event: SyntheticEvent | null, date: TDate | null) => void; /** * Determines if a day is unselectable. * * @param date - The date to check. * @returns A string reason if the day is unselectable, otherwise `false` or `undefined`. */ isDayUnselectable: (date: TDate) => string | false | undefined; /** * Determines if a day is highlighted. * * @param date - The date to check. * @returns A string reason if the day is highlighted, otherwise `false` or `undefined`. */ isDayHighlighted: (date: TDate) => string | false | undefined; /** * Determines if a day is visible in the calendar. * * @param date - The date to check. * @returns `true` if the day is visible, otherwise `false`. */ isDayVisible: (date: TDate) => boolean; /** * Determines if a date is outside the allowed date range. * * @param date - The date to check. * @returns `true` if the date is outside the allowed range, otherwise `false`. */ isOutsideAllowedDates: (date: TDate) => boolean; /** * Determines if a month is outside the allowed range. * * @param date - The date to check. * @returns `true` if the month is outside the allowed range, otherwise `false`. */ isOutsideAllowedMonths: (date: TDate) => boolean; /** * Determines if a year is outside the allowed range. * * @param date - The date to check. * @returns `true` if the year is outside the allowed range, otherwise `false`. */ isOutsideAllowedYears: (date: TDate) => boolean; /** * Determines if the date range is on the same day * * @param date - The range to check. * @returns `true` if the range start and end date are the same */ isSameDay: (date: TDate) => boolean; /** * Sets the selected date in the calendar. * * @param event - The event triggering the change. * @param newSelectedDate - The new date to select. */ setSelectedDate: (event: React.KeyboardEvent | React.MouseEvent, newSelectedDate: TDate) => void; /** * Determines if a date is selected. * * @param date - The date to check. * @returns `true` if the date is selected, otherwise `false`. */ isSelected: (date: TDate) => boolean; /** * Determines if a date is hovered. * * @param date - The date to check. * @returns `true` if the date is hovered, otherwise `false`. */ isHovered: (date: TDate) => boolean; /** * Sets the hovered date in the calendar. * * @param event - The event triggering the change. * @param newHoveredDate - The new date to hover. */ setHoveredDate: (event: SyntheticEvent, newHoveredDate: TDate | null) => void; /** * Determines if a date is part of a selected span. * * @param date - The date to check. * @returns `true` if the date is part of a selected span, otherwise `false`. */ isSelectedSpan: (date: TDate) => boolean; /** * Determines if a date is the start of a selected range. * * @param date - The date to check. * @returns `true` if the date is the start of a selected range, otherwise `false`. */ isSelectedStart: (date: TDate) => boolean; /** * Determines if a date is the end of a selected range. * * @param date - The date to check. * @returns `true` if the date is the end of a selected range, otherwise `false`. */ isSelectedEnd: (date: TDate) => boolean; /** * Determines if the hovered and a new date range would be created, if selected. * * @param date - The date to check. * @returns `true` if the date is the start of a hovered offset, otherwise `false`. */ isHoveredStart: (date: TDate) => boolean; /** * Determines if a date is part of a hovered range. * * @param date - The date to check. * @returns `true` if the date is part of a hovered offset, otherwise `false`. */ isHoveredSpan: (date: TDate) => boolean; /** * Determines if the hovered and a date range would be completed, if selected. * * @param date - The date to check. * @returns `true` if the date is the end of a hovered offset, otherwise `false`. */ isHoveredEnd: (date: TDate) => boolean; /** * Determines if a day is selectable. * * @param date - The date to check. * @returns `true` if the day is selectable, otherwise `false`. */ isDaySelectable: (date: TDate) => boolean; }; } export declare function useCalendar(props: UseCalendarProps): UseCalendarReturn; export {};