import type { DateFrameworkType, Timezone } from "@salt-ds/date-adapters"; import type { KeyboardEventHandler, MouseEventHandler, SyntheticEvent } from "react"; /** * Type representing a single date selection. * @template TDate - The type of the date object. */ export type SingleDateSelection = TDate; /** * Type representing a date range selection. * @template TDate - The type of the date object. */ export type DateRangeSelection = { /** * The start date of the range, or null if empty */ startDate?: TDate | null; /** * The end date of the range, or null if empty */ endDate?: TDate | null; }; /** * Checks if a value is a date range selection. * @template TDate - The type of the date object. * @param value - The value to check. * @returns `true` if the value is a date range selection, otherwise `false`. */ export declare function isDateRangeSelection(value: any): value is DateRangeSelection; /** * Base properties for calendar UseCalendarSelection hook. * @template TDate - The type of the date object. */ export interface UseCalendarSelectionBaseProps { /** * The currently focused date in the calendar, or null if no date is focused. */ focusedDate?: TDate | null; /** * The currently hovered date. */ hoveredDate?: TDate | null; /** * 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; /** * Function to determine if a day is selectable. * @param date - The date to check. * @returns `true` if the day is selectable, otherwise `false`. */ isDaySelectable?: (date: TDate) => boolean; /** * Function to determine if a day is visible. * @param date - The date to check. * @returns `true` if the day is visible, otherwise `false`. */ isDayVisible?: (date: TDate) => boolean; /** * Ref to attach to the focused element, enabling focus to be controlled. */ focusedDateRef?: React.MutableRefObject; /** * Callback fired when the focused date changes. * @param event - The synthetic event, if user event triggered focus or null. * @param date - The new focused date. */ onFocusedDateChange?: (event: SyntheticEvent | null, date: TDate | null) => void; /** * Callback fired when the hovered date changes. * @param event - The synthetic event. * @param hoveredDate - The new hovered date. */ onHoveredDateChange?: (event: SyntheticEvent, hoveredDate: TDate | null) => void; /** * 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; /** * The currently visible month. */ visibleMonth?: TDate; /** * If `true`, the calendar will be multiselect. */ multiselect?: boolean; } /** * Properties for the single date selection hook. * @template TDate - The type of the date object. */ export interface UseCalendarSelectionSingleProps extends UseCalendarSelectionBaseProps { /** * The selection variant, set to "single". */ selectionVariant: "single"; /** * The currently selected date. */ selectedDate?: SingleDateSelection | null; /** * The default selected date. */ defaultSelectedDate?: SingleDateSelection | null; /** * Callback fired when the selected date changes. * @param event - The synthetic event. * @param selectedDate - The new selected date. */ onSelectionChange?: (event: SyntheticEvent, selectedDate: SingleDateSelection | null) => void; /** * A pure function to manage the selected date for uncontrolled use-cases. * Return the selection based on the previous selection and the new date. * @param previousSelectedDate * @param newDate */ select?: (previousSelectedDate: SingleDateSelection | null, newDate: SingleDateSelection | null) => SingleDateSelection | null; } /** * Properties for the single date selection hook. * @template TDate - The type of the date object. */ export interface UseCalendarSelectionMultiselectSingleProps extends UseCalendarSelectionBaseProps { /** * The selection variant, set to "single". */ selectionVariant: "single"; /** * Multiple selection */ multiselect: true; /** * The currently selected date. */ selectedDate?: Array>; /** * The default selected date. */ defaultSelectedDate?: Array>; /** * Callback fired when the selected date changes. * @param event - The synthetic event. * @param selectedDate - The new selected date. */ onSelectionChange?: (event: SyntheticEvent, selectedDate: Array>) => void; /** * A pure function to manage the selected date for uncontrolled use-cases. * Return the selection based on the previous selection and the new date. * @param previousSelectedDate @param newDate */ select?: (previousSelectedDate: Array>, newDate: TDate) => Array>; } /** * UseCalendar hook props to return a calendar day's status for single date range selection. * @template TDate - The type of the date object. */ export interface UseCalendarSelectionRangeProps extends UseCalendarSelectionBaseProps { /** * The selection variant, set to "range". */ selectionVariant: "range"; /** * The currently selected date. */ selectedDate?: DateRangeSelection; /** * The default selected date. */ defaultSelectedDate?: DateRangeSelection; /** * Callback fired when the selected date changes. * @param event - The synthetic event. * @param selectedDate - The new selected date. */ onSelectionChange?: (event: SyntheticEvent, selectedDate: DateRangeSelection) => void; /** * A pure function to manage the selected date for uncontrolled use-cases. * Return the selection based on the previous selection and the new date. * @param previousSelectedDate * @param newDate */ select?: (previousSelectedDate: DateRangeSelection, newDate: TDate) => DateRangeSelection; } /** * UseCalendar hook props to return a calendar day's status for multiselect date range selection. * @template TDate - The type of the date object. */ export interface UseCalendarSelectionMultiselectRangeProps extends UseCalendarSelectionBaseProps { /** * The selection variant, set to "range". */ selectionVariant: "range"; /** * Multiple selection */ multiselect: true; /** * The currently selected date. */ selectedDate?: Array>; /** * The default selected date. */ defaultSelectedDate?: Array>; /** * Callback fired when the selected date changes. * @param event - The synthetic event. * @param selectedDate - The new selected date. */ onSelectionChange?: (event: SyntheticEvent, selectedDate: Array>) => void; /** * A pure function to manage the selected date for uncontrolled use-cases. * Return the selection based on the previous selection and the new date. * @param previousSelectedDate * @param newDate */ select?: (previousSelectedDate: Array>, newDate: TDate) => Array>; } /** * UseCalendar hook props to return a calendar day's status for single offset selection. * @template TDate - The type of the date object. */ export interface UseCalendarSelectionOffsetProps extends UseCalendarSelectionBaseProps { /** * The selection variant, set to "offset". */ selectionVariant: "offset"; /** * The currently selected date. */ selectedDate?: DateRangeSelection; /** * The default selected date. */ defaultSelectedDate?: DateRangeSelection; /** * Callback fired when the selected date changes. * @param event - The synthetic event. * @param selectedDate - The new selected date. */ onSelectionChange?: (event: SyntheticEvent, selectedDate: DateRangeSelection) => void; /** * A pure function to manage the selected date for uncontrolled use-cases. * Return the selection based on the previous selection and the new date. * @param previousSelectedDate * @param newDate */ select?: (previousSelectedDate: DateRangeSelection, newDate: TDate) => DateRangeSelection; /** * Function to calculate the start date offset. * @param date - The date to offset. * @returns The offset start date. */ startDateOffset?: (date: TDate) => TDate; /** * Function to calculate the end date offset. * @param date - The date to offset. * @returns The offset end date. */ endDateOffset?: (date: TDate) => TDate; } /** * UseCalendar hook props to return a calendar day's status for multiselect offset selection. * @template TDate - The type of the date object. */ export interface UseCalendarSelectionMultiselectOffsetProps extends UseCalendarSelectionBaseProps { /** * The selection variant, set to "offset". */ selectionVariant: "offset"; /** * Multiple selection */ multiselect: true; /** * The currently selected date. */ selectedDate?: Array>; /** * The default selected date. */ defaultSelectedDate?: Array>; /** * Callback fired when the selected date changes. * @param event - The synthetic event. * @param selectedDate - The new selected date. */ onSelectionChange?: (event: SyntheticEvent, selectedDate: Array>) => void; /** * A pure function to manage the selected date for uncontrolled use-cases. * Return the selection based on the previous selection and the new date. * @param previousSelectedDat * @param newDate */ select?: (previousSelectedDate: Array>, newDate: TDate) => Array>; /** * Function to calculate the start date offset. * @param date - The date to offset. * @returns The offset start date. */ startDateOffset?: (date: TDate) => TDate; /** * Function to calculate the end date offset. * @param date - The date to offset. * @returns The offset end date. */ endDateOffset?: (date: TDate) => TDate; } /** * UseCalendarSelection hook props, wth the selection variant determining the return type of the date selection * @template TDate - The type of the date object. */ export type UseCalendarSelectionProps = UseCalendarSelectionSingleProps | UseCalendarSelectionMultiselectSingleProps | UseCalendarSelectionRangeProps | UseCalendarSelectionMultiselectRangeProps | UseCalendarSelectionOffsetProps | UseCalendarSelectionMultiselectOffsetProps; export declare function useCalendarSelection(props: UseCalendarSelectionProps): { state: { focusedDate: TDate | null; focusedDateRef: import("react").MutableRefObject | undefined; hoveredDate: TDate | null | undefined; selectedDate: TDate | TDate[] | DateRangeSelection | DateRangeSelection[] | null | undefined; focusableDates: TDate[]; }; helpers: { isHovered: (date: TDate) => boolean; isSelected: (date: TDate) => boolean; setHoveredDate: (event: SyntheticEvent, date: TDate | null) => void; isSameDay: (date: TDate) => boolean; setSelectedDate: (event: SyntheticEvent, newSelectedDate: TDate) => void; isSelectedStart: (date: TDate) => boolean; isSelectedSpan: (date: TDate) => boolean; isSelectedEnd: (date: TDate) => boolean; isHoveredStart: (date: TDate) => boolean | null | undefined; isHoveredSpan: (date: TDate) => boolean; isHoveredEnd: (date: TDate) => boolean; isDaySelectable: (date: TDate) => boolean; setFocusedDate: (event: SyntheticEvent | null, date: TDate | null) => void; }; }; export declare function useCalendarSelectionDay({ date, }: { date: TDate; }): { handleClick: MouseEventHandler; handleKeyDown: KeyboardEventHandler; status: { hovered: boolean; selected: boolean; selectedStart: boolean; selectedSpan: boolean; selectedEnd: boolean; hoveredStart: boolean; hoveredSpan: boolean; hoveredEnd: boolean; }; dayProps: { className: string; "aria-pressed": string | undefined; "aria-disabled": string | undefined; }; };