import type * as React from 'react'; import type { Override } from '../helpers/overrides'; import type { Size } from '../input'; import type { INPUT_ROLE, ORIENTATION, RANGED_CALENDAR_BEHAVIOR, STATE_CHANGE_TYPE, DENSITY } from './constants'; import type { DateIOAdapter } from './utils/types'; declare type Locale = any; export declare type Density = keyof typeof DENSITY; export declare type DatepickerOverrides = { Root?: Override; /** Override for reused Select component. QuickSelect is **not a styled element** but a react component that can be replaced */ QuickSelect?: Override; QuickSelectContainer?: Override; /** Override for reused Select component. QuickSelectFormControl is **not a styled element** but a react component that can be replaced */ QuickSelectFormControl?: Override; /** Override for reused TimePicker component. TimeSelect is **not a styled element** but a react component that can be replaced */ TimeSelect?: Override; TimeSelectContainer?: Override; /** Override for reused Select component. TimeSelectFormControl is **not a styled element** but a react component that can be replaced */ TimeSelectFormControl?: Override; CalendarContainer?: Override; CalendarHeader?: Override; PrevButton?: Override; PrevButtonIcon?: Override; NextButton?: Override; NextButtonIcon?: Override; MonthContainer?: Override; MonthHeader?: Override; MonthYearSelectButton?: Override; MonthYearSelectIconContainer?: Override; MonthYearSelectPopover?: Override; MonthYearSelectStatefulMenu?: Override; WeekdayHeader?: Override; Month?: Override; Week?: Override; Day?: Override; DayLabel?: Override; /** Override for reused Input component. Input is **not a styled element** but a react component that can be replaced */ Input?: Override; InputWrapper?: Override; /** Override for reused Popover component. Popover is **not a styled element** but a react component that can be replaced */ Popover?: Override; StartDate?: Override; EndDate?: Override; InputLabel?: Override; ButtonDock?: Override; PrimaryButton?: Override; SecondaryButton?: Override; }; export declare type DayProps = { disabled: boolean; date: T; dateLabel: ((day: T) => React.ReactNode) | undefined | null; density: Density; filterDate: ((day: T) => boolean) | undefined | null; highlightedDate: T | undefined | null; includeDates: Array | undefined | null; highlighted: boolean; range: boolean; hasLockedBehavior: boolean; selectedInput: InputRole; focusedCalendar: boolean; locale: Locale | undefined | null; maxDate: T | undefined | null; adapter: DateIOAdapter; minDate: T | undefined | null; month: number | undefined | null; onBlur: (a: { event: Event; date: T; }) => unknown; onFocus: (a: { event: Event; date: T; }) => unknown; onSelect: (a: { date: T | Array; }) => unknown; onClick: (a: { event: Event; date: T; }) => unknown; onMouseOver: (a: { event: Event; date: T; }) => unknown; onMouseLeave: (a: { event: Event; date: T; }) => unknown; overrides?: DatepickerOverrides; peekNextMonth: boolean; value: T | undefined | null | Array; }; export declare type DayState = { isHovered: boolean; isFocusVisible: boolean; }; export declare type WeekProps = { date: T; dateLabel: ((date: T) => React.ReactNode) | undefined | null; density: Density; excludeDates: Array | undefined | null; filterDate: ((day: T) => boolean) | undefined | null; highlightedDate: T | undefined | null; includeDates: Array | undefined | null; focusedCalendar: boolean; range?: boolean; locale: Locale | undefined | null; maxDate: T | undefined | null; minDate: T | undefined | null; adapter: DateIOAdapter; month: number | undefined | null; onDayBlur: (a: { date: T; event: Event; }) => unknown; onDayClick: (a: { date: T; event: Event; }) => unknown; onDayFocus: (a: { date: T; event: Event; }) => unknown; onDayMouseOver: (a: { date: T; event: Event; }) => unknown; onDayMouseLeave: (a: { date: T; event: Event; }) => unknown; onChange?: (a: { readonly date: T | undefined | null | Array; }) => unknown; overrides?: DatepickerOverrides; peekNextMonth: boolean; value: T | undefined | null | Array; hasLockedBehavior: boolean; selectedInput?: InputRole; }; export declare type MonthProps = { fixedHeight?: boolean; } & WeekProps; export declare type CalendarInternalState = { highlightedDate: T; focused: boolean; date: T; quickSelectId: string | undefined | null; rootElement: HTMLElement | undefined | null; time: Array; }; export declare type CalendarProps = { /** Defines if the calendar is set to be focused on an initial render. */ autoFocusCalendar?: boolean; /** Determines the density of the calendar */ density?: Density; /** A list of dates to disable. */ excludeDates?: Array | null; /** Display select for quickly choosing date ranges. `range` must be true as well. */ quickSelect?: boolean; /** Array of custom options displayed in the quick select. Overrides default options if provided. */ quickSelectOptions?: Array>; /** A filter function that is called to check the disabled state of a day. If `false` is returned the day is considered to be disabled. */ filterDate?: ((day: T) => boolean) | null; /** A function that is called with the current date to render the label text under that day on the calendar. */ dateLabel?: ((day: T) => React.ReactNode) | null; /** Indicates a highlighted date on hover and keyboard navigation */ highlightedDate?: T | null; /** A list of selectable dates. */ includeDates?: Array | null; /** Defines if a range of dates can be selected. */ range?: boolean; /** Determines whether startDate and endDate should be updated independently of eachother */ hasLockedBehavior?: boolean; /** A locale object. See `date-fns` for more details https://github.com/date-fns/date-fns/tree/master/src/locale. */ locale?: Locale | null; /** A max date that is selectable. */ maxDate?: T | null; /** A min date that is selectable. */ minDate?: T | null; adapter?: DateIOAdapter; /** A number of months rendered in the calendar. */ monthsShown?: number; /** Day's `click` event handler. */ onDayClick?: (a: { date: T; event: Event; }) => unknown; /** Day's `focus` event handler. */ onDayFocus?: (a: { date: T; event: Event; }) => unknown; /** Day's `mouseover` event handler. */ onDayMouseOver?: (a: { date: T; event: Event; }) => unknown; /** Day's `mouseleave` event handler. */ onDayMouseLeave?: (a: { date: T; event: Event; }) => unknown; /** Event handler that is called when the current rendered month is changed. */ onMonthChange?: (a: { date: T; }) => unknown; /** Event handler that is called when the current rendered month's year is changed. */ onYearChange?: (a: { date: T; }) => unknown; /** Event handler that is called when a new date is selected. */ onChange?: (a: { readonly date: T | undefined | null | Array; }) => unknown; /** Event handler that is called when a selection is made using the quick select menu. */ onQuickSelectChange?: (option?: QuickSelectOption) => unknown; /** Sets the orientation of the calendar when multiple months are displayed */ orientation?: (typeof ORIENTATION)[keyof typeof ORIENTATION]; overrides?: DatepickerOverrides; /** Defines if dates outside of the range of the current month are displayed. */ peekNextMonth?: boolean; /** Determines if `TimePicker` component will be enabled for start time */ timeSelectStart?: boolean; /** Determines if `TimePicker` component will be enabled for end time */ timeSelectEnd?: boolean; /** Defines if tabbing inside the calendar is circled within it. */ trapTabbing?: boolean; /** Currently selected date. */ value?: T | undefined | null | Array; fixedHeight?: boolean; /** Determines whether user clicked startDate or endDate input to trigger calendar open */ selectedInput?: InputRole; /** Primary button on the action dock */ primaryButton?: { label: React.ReactNode; onClick: () => unknown; }; /** Secondary button on the action dock */ secondaryButton?: { label: React.ReactNode; onClick: () => unknown; }; }; export declare type HeaderProps = CalendarProps & { date: T; order: number; }; export declare type QuickSelectOption = { id: string; beginDate: T; endDate?: T; }; export declare type DatepickerProps = { 'aria-label'?: string; 'aria-labelledby'?: string; 'aria-describedby'?: string | null; disabled?: boolean; size?: Size; /** Renders UI in 'error' state. */ error?: boolean; positive?: boolean; placeholder?: string; required?: boolean; clearable?: boolean; displayValueAtRangeIndex?: number; formatDisplayValue?: (date: T | undefined | null | Array, formatString: string) => string; formatString?: string; /** Where to mount the popover */ mountNode?: HTMLElement; /** When single picker, fn is always called. When range picker, fn is called when start and end date are selected. */ onChange?: (a: { date: T | undefined | null | Array; }) => unknown; /** Called when calendar is closed */ onClose?: () => unknown; /** Called when calendar is opened */ onOpen?: () => unknown; /** When single picker, fn is always called. When range picker, fn is called when either start or end date changes. */ onRangeChange?: (a: { readonly date: T | undefined | null | Array; }) => unknown; mask?: string | null; /** Determines whether startDate and endDate should be updated independently of eachother */ rangedCalendarBehavior?: RangedCalendarBehavior; /** Determines if startDate and endDate should be separated into two input fields. Ignored if `range` is not true. */ separateRangeInputs?: boolean; startDateLabel?: string; endDateLabel?: string; value?: T | undefined | null | Array; } & CalendarProps; export declare type SharedStyleProps = { $date: any; $disabled: boolean | undefined | null; $density: Density; $endDate: boolean | undefined | null; $endOfMonth: boolean | undefined | null; $isHighlighted: boolean | undefined | null; $isHovered: boolean | undefined | null; $isFocusVisible: boolean | undefined | null; $month: number | undefined | null; $outsideMonth: boolean | undefined | null; $outsideMonthWithinRange: boolean | undefined | null; $peekNextMonth: boolean | undefined | null; $pseudoHighlighted: boolean | undefined | null; $pseudoSelected: boolean | undefined | null; $selected: boolean | undefined | null; $startDate: boolean | undefined | null; $startOfMonth: boolean | undefined | null; $range: boolean | undefined | null; $hasRangeHighlighted: boolean | undefined | null; $hasRangeOnRight: boolean | undefined | null; $hasRangeSelected: boolean | undefined | null; $hasLockedBehavior: boolean; $selectedInput: InputRole; $value: Date | Array; $order: number | undefined | null; $hasDateLabel: boolean | undefined | null; }; export declare type StateChangeType = (typeof STATE_CHANGE_TYPE)[keyof typeof STATE_CHANGE_TYPE] | undefined | null; export declare type ContainerState = { /** Selected `Date`. If `range` is set, `value` is an array of 2 values. */ value?: T | undefined | null | Array; highlightedDate?: T | null; }; export declare type NavigationContainerState = { highlightedDate?: T | null; isActive?: boolean; lastHighlightedDate?: T; }; export declare type StateReducer = (stateType: StateChangeType, nextState: ContainerState, currentState: ContainerState) => ContainerState; export declare type StatefulContainerProps = { children: (a: Props) => React.ReactNode; /** Initial state of an uncontrolled datepicker component. */ initialState?: ContainerState; /** A state change handler. */ stateReducer?: StateReducer; /** When single picker, fn is called when date/time is selected. When range picker, fn is called when both start and end are selected. */ onChange?: (a: { date: T | undefined | null | Array; }) => unknown; /** When single picker, fn is called when date/time is selected. When range picker, fn is called when either start or end date changes. */ onRangeChange?: (a: { readonly date: T | undefined | null | Array; }) => unknown; adapter?: DateIOAdapter; /** Should the date value be stored as an array or single value. */ range?: boolean; }; export declare type StatefulDatepickerProps = Omit, 'children'>; export declare type InputRole = (typeof INPUT_ROLE)[keyof typeof INPUT_ROLE] | undefined | null; export declare type RangedCalendarBehavior = (typeof RANGED_CALENDAR_BEHAVIOR)[keyof typeof RANGED_CALENDAR_BEHAVIOR] | undefined | null; export {};