import { DateTime } from 'luxon'; import { MaskedDateRangeInputChange } from './MaskedDateRangeInput'; export type DateFieldRangeStateChange = { startDate: DateTime | null; endDate: DateTime | null; isInputValid: boolean; isInputEmpty: boolean; }; export type DateFieldRangeStateChangeHandler = (change: DateFieldRangeStateChange) => void; export type DateFieldRangeStateParam = { /** * The controlled value of the start date. */ valueProp?: { startDate: DateTime | null; endDate: DateTime | null; } | null; /** * The default value of the start date. */ defaultValueProp?: { startDate: DateTime | null; endDate: DateTime | null; } | null; /** * The function to call when the state changes. */ onChange: DateFieldRangeStateChangeHandler; }; /** * This hook is used to keep the state of a DateFieldRange component in sync with the input and calendar. */ export type DateFieldRangeState = { /** * The start date. */ startDate: DateTime | null; /** * The end date. */ endDate: DateTime | null; /** * The function to set the start date. */ setStartDate: (date: DateTime | null) => void; /** * The function to set the end date. */ setEndDate: (date: DateTime | null) => void; /** * The function to handle the input change. */ handleInputChange: (change: MaskedDateRangeInputChange) => void; /** * The function to handle the calendar selection. */ handleCalendarSelection: ({ startDate, endDate, }: { startDate: DateTime | null; endDate: DateTime | null; }) => void; }; /** * This is a hook for keeping state in sync between a date input and calendar. */ export declare function useDateFieldRangeState({ valueProp, defaultValueProp, onChange, }: DateFieldRangeStateParam): DateFieldRangeState;