UNPKG

39.2 kBTypeScriptView Raw
1// Type definitions for react-dates 21.8
2// Project: https://github.com/airbnb/react-dates
3// Definitions by: Artur Ampilogov <https://github.com/ArturAmpilogov>
4// Nathan Holland <https://github.com/NathanNZ>
5// Chris Griebel <https://github.com/cgriebel>
6// Jason Unger <https://github.com/jsonunger>
7// Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped
8// TypeScript Version: 2.8
9// Required fields are made according to 'minimum REQUIRED setup' in https://github.com/airbnb/react-dates/blob/master/README.md
10
11import * as React from 'react';
12import * as moment from 'moment';
13import { Props as ReactOutsideClickHandlerProps } from 'react-outside-click-handler';
14
15// UTILITY TYPES
16export type RenderMonthProps =
17 | {
18 renderMonthText?: ((month: moment.Moment) => React.ReactNode) | null | undefined;
19 renderMonthElement?: never | undefined;
20 }
21 | {
22 renderMonthText?: never | undefined;
23 renderMonthElement?:
24 | ((props: {
25 month: moment.Moment;
26 onMonthSelect: (currentMonth: moment.Moment, newMonthVal: string) => void;
27 onYearSelect: (currentMonth: moment.Moment, newMonthVal: string) => void;
28 isVisible: boolean;
29 }) => React.ReactNode)
30 | null | undefined;
31 };
32
33// SHAPES
34//
35// shapes/AnchorDirectionShape.js
36export type AnchorDirectionShape = 'left' | 'right';
37
38// shapes/CalendarInfoPositionShape.js
39export type CalendarInfoPositionShape = 'top' | 'bottom' | 'before' | 'after';
40
41// shapes/NavPositionShape.js
42export type NavPositionShape = 'navPositionTop' | 'navPositionBottom';
43
44// shapes/DateRangePickerShape.js
45export type DateRangePickerShape = RenderMonthProps & {
46 // required props for a functional interactive DateRangePicker
47 startDate: moment.Moment | null;
48 startDateId: string;
49 endDate: moment.Moment | null;
50 endDateId: string;
51 focusedInput: FocusedInputShape | null;
52
53 onDatesChange: (arg: { startDate: moment.Moment | null; endDate: moment.Moment | null }) => void;
54 onFocusChange: (arg: FocusedInputShape | null) => void;
55
56 onClose?: ((final: { startDate: moment.Moment | null; endDate: moment.Moment | null }) => void) | undefined;
57
58 // input related props
59 startDatePlaceholderText?: string | undefined;
60 startDateOffset?: ((day: moment.Moment) => moment.Moment) | undefined;
61 endDateOffset?: ((day: moment.Moment) => moment.Moment) | undefined;
62
63 endDatePlaceholderText?: string | undefined;
64 startDateAriaLabel?: string | undefined;
65 endDateAriaLabel?: string | undefined;
66 disabled?: DisabledShape | undefined;
67 required?: boolean | undefined;
68 readOnly?: boolean | undefined;
69 screenReaderInputMessage?: string | undefined;
70 showClearDates?: boolean | undefined;
71 showDefaultInputIcon?: boolean | undefined;
72 inputIconPosition?: IconPositionShape | undefined;
73 customInputIcon?: React.ReactNode | undefined;
74 customArrowIcon?: React.ReactNode | undefined;
75 customCloseIcon?: React.ReactNode | undefined;
76 noBorder?: boolean | undefined;
77 block?: boolean | undefined;
78 small?: boolean | undefined;
79 regular?: boolean | undefined;
80 keepFocusOnInput?: boolean | undefined;
81 // calendar presentation and interaction related props
82 renderWeekHeaderElement?: ((day: string) => React.ReactNode) | null | undefined;
83 orientation?: OrientationShape | undefined;
84 anchorDirection?: AnchorDirectionShape | undefined;
85 openDirection?: OpenDirectionShape | undefined;
86 horizontalMargin?: number | undefined;
87 withPortal?: boolean | undefined;
88 withFullScreenPortal?: boolean | undefined;
89 appendToBody?: boolean | undefined;
90 disableScroll?: boolean | undefined;
91 daySize?: number | undefined;
92 isRTL?: boolean | undefined;
93 firstDayOfWeek?: DayOfWeekShape | null | undefined;
94 initialVisibleMonth?: (() => moment.Moment) | null | undefined;
95 numberOfMonths?: number | undefined;
96 keepOpenOnDateSelect?: boolean | undefined;
97 reopenPickerOnClearDates?: boolean | undefined;
98 renderCalendarInfo?: (() => React.ReactNode) | null | undefined;
99 calendarInfoPosition?: CalendarInfoPositionShape | undefined;
100 hideKeyboardShortcutsPanel?: boolean | undefined;
101 verticalHeight?: number | null | undefined;
102 transitionDuration?: number | undefined;
103 horizontalMonthPadding?: number | undefined;
104 verticalSpacing?: number | undefined;
105
106 // navigation related props
107 dayPickerNavigationInlineStyles?: Record<string, any> | null | undefined;
108 navPosition?: NavPositionShape | undefined;
109 navPrev?: React.ReactNode | undefined;
110 navNext?: React.ReactNode | undefined;
111 renderNavPrevButton?:
112 | ((props: {
113 ariaLabel: string;
114 disabled: boolean;
115 onClick?: React.MouseEventHandler | undefined;
116 onKeyUp?: React.KeyboardEventHandler | undefined;
117 onMouseUp?: React.MouseEventHandler | undefined;
118 }) => React.ReactNode)
119 | null | undefined;
120 renderNavNextButton?:
121 | ((props: {
122 ariaLabel: string;
123 disabled: boolean;
124 onClick?: React.MouseEventHandler | undefined;
125 onKeyUp?: React.KeyboardEventHandler | undefined;
126 onMouseUp?: React.MouseEventHandler | undefined;
127 }) => React.ReactNode)
128 | null | undefined;
129 onPrevMonthClick?: ((newCurrentMonth: moment.Moment) => void) | undefined;
130 onNextMonthClick?: ((newCurrentMonth: moment.Moment) => void) | undefined;
131
132 // day presentation and interaction related props
133 renderCalendarDay?: ((props: CalendarDayShape) => React.ReactNode) | undefined;
134 renderDayContents?: ((day: moment.Moment, modifiers: ModifiersShape) => React.ReactNode) | null | undefined;
135 minimumNights?: number | undefined;
136 minDate?: moment.Moment | undefined;
137 maxDate?: moment.Moment | undefined;
138 enableOutsideDays?: boolean | undefined;
139 isDayBlocked?: ((day: moment.Moment) => boolean) | undefined;
140 isOutsideRange?: ((day: moment.Moment) => boolean) | undefined;
141 isDayHighlighted?: ((day: moment.Moment) => boolean) | undefined;
142
143 // internationalization props
144 displayFormat?: string | (() => string) | undefined;
145 monthFormat?: string | undefined;
146 weekDayFormat?: string | undefined;
147 phrases?: DateRangePickerPhrases | undefined;
148 dayAriaLabelFormat?: string | undefined;
149};
150export const DateRangePickerShape: DateRangePickerShape;
151
152// shapes/DayOfWeekShape.js
153export type DayOfWeekShape = 0 | 1 | 2 | 3 | 4 | 5 | 6;
154
155// shapes/DisabledShape.js
156export type DisabledShape = boolean | 'startDate' | 'endDate';
157
158// shapes/FocusedInputShape.js
159export type FocusedInputShape = 'startDate' | 'endDate';
160
161// shapes/IconPositionShape.js
162export type IconPositionShape = 'before' | 'after';
163
164// shapes/ModifiersShape.js
165export type ModifiersShape = Set<string>;
166
167// shapes/OpenDirectionShape.js
168export type OpenDirectionShape = 'down' | 'up';
169
170// shapes/OrientationShape.js
171export type OrientationShape = 'horizontal' | 'vertical';
172
173// shapes/ScrollableOrientationShape.js
174export type ScrollableOrientationShape = 'horizontal' | 'vertical' | 'verticalScrollable';
175
176// shapes/SingleDatePickerShape.js
177export type SingleDatePickerShape = RenderMonthProps & {
178 id: string;
179
180 // required props for a functional interactive SingleDatePicker
181 date: moment.Moment | null;
182 focused: boolean;
183
184 onDateChange: (date: moment.Moment | null) => void;
185 onFocusChange: (arg: { focused: boolean }) => void;
186
187 // input related props
188 placeholder?: string | undefined;
189 ariaLabel?: string | undefined;
190 disabled?: boolean | undefined;
191 required?: boolean | undefined;
192 readOnly?: boolean | undefined;
193 screenReaderInputMessage?: string | undefined;
194 showClearDate?: boolean | undefined;
195 customCloseIcon?: React.ReactNode | undefined;
196 showDefaultInputIcon?: boolean | undefined;
197 inputIconPosition?: IconPositionShape | undefined;
198 customInputIcon?: React.ReactNode | undefined;
199 noBorder?: boolean | undefined;
200 block?: boolean | undefined;
201 small?: boolean | undefined;
202 regular?: boolean | undefined;
203 verticalSpacing?: number | undefined;
204 keepFocusOnInput?: boolean | undefined;
205
206 // calendar presentation and interaction related props
207 renderWeekHeaderElement?: ((day: string) => React.ReactNode) | null | undefined;
208 orientation?: OrientationShape | undefined;
209 anchorDirection?: AnchorDirectionShape | undefined;
210 openDirection?: OpenDirectionShape | undefined;
211 horizontalMargin?: number | undefined;
212 withPortal?: boolean | undefined;
213 withFullScreenPortal?: boolean | undefined;
214 appendToBody?: boolean | undefined;
215 disableScroll?: boolean | undefined;
216 initialVisibleMonth?: (() => moment.Moment) | null | undefined;
217 firstDayOfWeek?: DayOfWeekShape | null | undefined;
218 numberOfMonths?: number | undefined;
219 keepOpenOnDateSelect?: boolean | undefined;
220 reopenPickerOnClearDate?: boolean | undefined;
221 renderCalendarInfo?: (() => React.ReactNode) | null | undefined;
222 calendarInfoPosition?: CalendarInfoPositionShape | undefined;
223 hideKeyboardShortcutsPanel?: boolean | undefined;
224 daySize?: number | undefined;
225 isRTL?: boolean | undefined;
226 verticalHeight?: number | undefined;
227 transitionDuration?: number | undefined;
228 horizontalMonthPadding?: number | undefined;
229
230 // navigation related props
231 dayPickerNavigationInlineStyles?: Record<string, any> | null | undefined;
232 navPosition?: NavPositionShape | undefined;
233 navPrev?: React.ReactNode | undefined;
234 navNext?: React.ReactNode | undefined;
235 renderNavPrevButton?:
236 | ((props: {
237 ariaLabel: string;
238 disabled: boolean;
239 onClick?: React.MouseEventHandler | undefined;
240 onKeyUp?: React.KeyboardEventHandler | undefined;
241 onMouseUp?: React.MouseEventHandler | undefined;
242 }) => React.ReactNode)
243 | null | undefined;
244 renderNavNextButton?:
245 | ((props: {
246 ariaLabel: string;
247 disabled: boolean;
248 onClick?: React.MouseEventHandler | undefined;
249 onKeyUp?: React.KeyboardEventHandler | undefined;
250 onMouseUp?: React.MouseEventHandler | undefined;
251 }) => React.ReactNode)
252 | null | undefined;
253 onPrevMonthClick?: ((newCurrentMonth: moment.Moment) => void) | undefined;
254 onNextMonthClick?: ((newCurrentMonth: moment.Moment) => void) | undefined;
255 onClose?: ((arg: { date: moment.Moment | null }) => void) | undefined;
256
257 // day presentation and interaction related props
258 renderCalendarDay?: ((props: CalendarDayShape) => React.ReactNode) | undefined;
259 renderDayContents?: ((day: moment.Moment, modifiers: ModifiersShape) => React.ReactNode) | null | undefined;
260 enableOutsideDays?: boolean | undefined;
261 isDayBlocked?: ((day: moment.Moment) => boolean) | undefined;
262 isOutsideRange?: ((day: moment.Moment) => boolean) | undefined;
263 isDayHighlighted?: ((day: moment.Moment) => boolean) | undefined;
264
265 // internationalization props
266 displayFormat?: string | (() => string) | undefined;
267 monthFormat?: string | undefined;
268 weekDayFormat?: string | undefined;
269 phrases?: SingleDatePickerPhrases | undefined;
270 dayAriaLabelFormat?: string | undefined;
271};
272export const SingleDatePickerShape: SingleDatePickerShape;
273
274// PHRASES
275export interface PhraseArg {
276 date: string;
277}
278
279// defaultPhrases.js
280export interface DateRangePickerPhrases {
281 calendarLabel?: string | undefined;
282 roleDescription?: string | undefined;
283 closeDatePicker?: string | undefined;
284 clearDates?: string | undefined;
285 focusStartDate?: string | undefined;
286 jumpToPrevMonth?: string | undefined;
287 jumpToNextMonth?: string | undefined;
288 keyboardShortcuts?: string | undefined;
289 showKeyboardShortcutsPanel?: string | undefined;
290 hideKeyboardShortcutsPanel?: string | undefined;
291 openThisPanel?: string | undefined;
292 enterKey?: string | undefined;
293 leftArrowRightArrow?: string | undefined;
294 upArrowDownArrow?: string | undefined;
295 pageUpPageDown?: string | undefined;
296 homeEnd?: string | undefined;
297 escape?: string | undefined;
298 questionMark?: string | undefined;
299 selectFocusedDate?: string | undefined;
300 moveFocusByOneDay?: string | undefined;
301 moveFocusByOneWeek?: string | undefined;
302 moveFocusByOneMonth?: string | undefined;
303 moveFocustoStartAndEndOfWeek?: string | undefined;
304 returnFocusToInput?: string | undefined;
305 keyboardForwardNavigationInstructions?: string | undefined;
306 keyboardBackwardNavigationInstructions?: string | undefined;
307 chooseAvailableStartDate?: ((phraseArg: PhraseArg) => string) | undefined;
308 chooseAvailableEndDate?: ((phraseArg: PhraseArg) => string) | undefined;
309 dateIsUnavailable?: ((phraseArg: PhraseArg) => string) | undefined;
310 dateIsSelected?: ((phraseArg: PhraseArg) => string) | undefined;
311 dateIsSelectedAsStartDate?: ((phraseArg: PhraseArg) => string) | undefined;
312 dateIsSelectedAsEndDate?: ((phraseArg: PhraseArg) => string) | undefined;
313}
314
315// defaultPhrases.js
316export interface DateRangePickerInputPhrases {
317 focusStartDate?: string | undefined;
318 clearDates?: string | undefined;
319 keyboardForwardNavigationInstructions?: string | undefined;
320 keyboardBackwardNavigationInstructions?: string | undefined;
321}
322
323// defaultPhrases.js
324export interface SingleDatePickerPhrases {
325 calendarLabel?: string | undefined;
326 roleDescription?: string | undefined;
327 closeDatePicker?: string | undefined;
328 clearDate?: string | undefined;
329 jumpToPrevMonth?: string | undefined;
330 jumpToNextMonth?: string | undefined;
331 keyboardShortcuts?: string | undefined;
332 showKeyboardShortcutsPanel?: string | undefined;
333 hideKeyboardShortcutsPanel?: string | undefined;
334 openThisPanel?: string | undefined;
335 enterKey?: string | undefined;
336 leftArrowRightArrow?: string | undefined;
337 upArrowDownArrow?: string | undefined;
338 pageUpPageDown?: string | undefined;
339 homeEnd?: string | undefined;
340 escape?: string | undefined;
341 questionMark?: string | undefined;
342 selectFocusedDate?: string | undefined;
343 moveFocusByOneDay?: string | undefined;
344 moveFocusByOneWeek?: string | undefined;
345 moveFocusByOneMonth?: string | undefined;
346 moveFocustoStartAndEndOfWeek?: string | undefined;
347 returnFocusToInput?: string | undefined;
348 keyboardForwardNavigationInstructions?: string | undefined;
349 keyboardBackwardNavigationInstructions?: string | undefined;
350 chooseAvailableDate?: ((phraseArg: PhraseArg) => string) | undefined;
351 dateIsUnavailable?: ((phraseArg: PhraseArg) => string) | undefined;
352 dateIsSelected?: ((phraseArg: PhraseArg) => string) | undefined;
353}
354
355// defaultPhrases.js
356export interface SingleDatePickerInputPhrases {
357 clearDate?: string | undefined;
358 keyboardForwardNavigationInstructions?: string | undefined;
359 keyboardBackwardNavigationInstructions?: string | undefined;
360}
361
362// defaultPhrases.js
363export interface DayPickerPhrases {
364 calendarLabel?: string | undefined;
365 roleDescription?: string | undefined;
366 jumpToPrevMonth?: string | undefined;
367 jumpToNextMonth?: string | undefined;
368 keyboardShortcuts?: string | undefined;
369 showKeyboardShortcutsPanel?: string | undefined;
370 hideKeyboardShortcutsPanel?: string | undefined;
371 openThisPanel?: string | undefined;
372 enterKey?: string | undefined;
373 leftArrowRightArrow?: string | undefined;
374 upArrowDownArrow?: string | undefined;
375 pageUpPageDown?: string | undefined;
376 homeEnd?: string | undefined;
377 escape?: string | undefined;
378 questionMark?: string | undefined;
379 selectFocusedDate?: string | undefined;
380 moveFocusByOneDay?: string | undefined;
381 moveFocusByOneWeek?: string | undefined;
382 moveFocusByOneMonth?: string | undefined;
383 moveFocustoStartAndEndOfWeek?: string | undefined;
384 returnFocusToInput?: string | undefined;
385 chooseAvailableStartDate?: ((phraseArg: PhraseArg) => string) | undefined;
386 chooseAvailableEndDate?: ((phraseArg: PhraseArg) => string) | undefined;
387 chooseAvailableDate?: ((phraseArg: PhraseArg) => string) | undefined;
388 dateIsUnavailable?: ((phraseArg: PhraseArg) => string) | undefined;
389 dateIsSelected?: ((phraseArg: PhraseArg) => string) | undefined;
390 dateIsSelectedAsStartDate?: ((phraseArg: PhraseArg) => string) | undefined;
391 dateIsSelectedAsEndDate?: ((phraseArg: PhraseArg) => string) | undefined;
392}
393
394// defaultPhrases.js
395export interface DayPickerKeyboardShortcutsPhrases {
396 keyboardShortcuts?: string | undefined;
397 showKeyboardShortcutsPanel?: string | undefined;
398 hideKeyboardShortcutsPanel?: string | undefined;
399 openThisPanel?: string | undefined;
400 enterKey?: string | undefined;
401 leftArrowRightArrow?: string | undefined;
402 upArrowDownArrow?: string | undefined;
403 pageUpPageDown?: string | undefined;
404 homeEnd?: string | undefined;
405 escape?: string | undefined;
406 questionMark?: string | undefined;
407 selectFocusedDate?: string | undefined;
408 moveFocusByOneDay?: string | undefined;
409 moveFocusByOneWeek?: string | undefined;
410 moveFocusByOneMonth?: string | undefined;
411 moveFocustoStartAndEndOfWeek?: string | undefined;
412 returnFocusToInput?: string | undefined;
413}
414
415// defaultPhrases.js
416export interface DayPickerNavigationPhrases {
417 jumpToPrevMonth?: string | undefined;
418 jumpToNextMonth?: string | undefined;
419}
420
421// defaultPhrases.js
422export interface CalendarDayPhrases {
423 chooseAvailableDate?: ((phraseArg: PhraseArg) => string) | undefined;
424 dateIsUnavailable?: ((phraseArg: PhraseArg) => string) | undefined;
425 dateIsSelected?: ((phraseArg: PhraseArg) => string) | undefined;
426 dateIsSelectedAsStartDate?: ((phraseArg: PhraseArg) => string) | undefined;
427 dateIsSelectedAsEndDate?: ((phraseArg: PhraseArg) => string) | undefined;
428}
429
430// COMPONENTS
431//
432// components/CalendarDay.jsx
433export interface CalendarDayShape {
434 day?: moment.Moment | null | undefined;
435 daySize?: number | undefined;
436 isOutsideDay?: boolean | undefined;
437 modifiers?: ModifiersShape | undefined;
438 isFocused?: boolean | undefined;
439 tabIndex?: 0 | -1 | undefined;
440 onDayClick?: ((day: moment.Moment, event: React.MouseEvent<HTMLTableDataCellElement>) => void) | undefined;
441 onDayMouseEnter?: ((day: moment.Moment, event: React.MouseEvent<HTMLTableDataCellElement>) => void) | undefined;
442 onDayMouseLeave?: ((day: moment.Moment, event: React.MouseEvent<HTMLTableDataCellElement>) => void) | undefined;
443 renderDayContents?: ((day: moment.Moment, modifiers: ModifiersShape) => React.ReactNode) | null | undefined;
444 ariaLabelFormat?: string | undefined;
445
446 // internationalization
447 phrases?: CalendarDayPhrases | undefined;
448}
449
450export type CalendarDay = React.ComponentClass<CalendarDayShape>;
451export const CalendarDay: React.ComponentClass<CalendarDayShape>;
452
453// components/CalendarMonth.jsx
454export type CalendarMonthShape = RenderMonthProps &
455 Pick<
456 CalendarDayShape,
457 'daySize' | 'onDayClick' | 'onDayMouseEnter' | 'onDayMouseLeave' | 'renderDayContents' | 'isFocused' | 'phrases'
458 > & {
459 month?: moment.Moment | undefined;
460 horizontalMonthPadding?: number | undefined;
461 isVisible?: boolean | undefined;
462 enableOutsideDays?: boolean | undefined;
463 modifiers?: Record<string, ModifiersShape> | undefined;
464 orientation?: ScrollableOrientationShape | undefined;
465 onMonthSelect?: ((currentMonth: moment.Moment, newMonthVal: string) => void) | undefined;
466 onYearSelect?: ((currentMonth: moment.Moment, newMonthVal: string) => void) | undefined;
467 renderCalendarDay?: ((props: CalendarDayShape) => React.ReactNode) | undefined;
468 firstDayOfWeek?: DayOfWeekShape | null | undefined;
469 setMonthTitleHeight?: ((captionHeight: number) => void) | null | undefined;
470 verticalBorderSpacing?: number | undefined;
471
472 focusedDate?: moment.Moment | null | undefined; // indicates focusable day
473
474 // i18n
475 monthFormat?: string | undefined;
476 dayAriaLabelFormat?: string | undefined;
477 };
478
479export type CalendarMonth = React.ComponentClass<CalendarMonthShape>;
480export const CalendarMonth: React.ComponentClass<CalendarMonthShape>;
481
482// components/CalendarMonthGrid.jsx
483export type CalendarMonthGridShape = RenderMonthProps &
484 Pick<
485 CalendarMonthShape,
486 | 'enableOutsideDays'
487 | 'horizontalMonthPadding'
488 | 'onDayClick'
489 | 'onDayMouseEnter'
490 | 'onDayMouseLeave'
491 | 'renderCalendarDay'
492 | 'renderDayContents'
493 | 'daySize'
494 | 'focusedDate'
495 | 'isFocused'
496 | 'firstDayOfWeek'
497 | 'setMonthTitleHeight'
498 | 'verticalBorderSpacing'
499 | 'monthFormat'
500 | 'phrases'
501 | 'dayAriaLabelFormat'
502 > & {
503 firstVisibleMonthIndex?: number | undefined;
504 initialMonth?: moment.Moment | undefined;
505 isAnimating?: boolean | undefined;
506 numberOfMonths?: number | undefined;
507 modifiers?: Record<string, Record<string, ModifiersShape>> | undefined;
508 orientation?: ScrollableOrientationShape | undefined;
509 onMonthTransitionEnd?: ((event?: React.TransitionEvent<HTMLDivElement>) => void) | undefined;
510 onMonthChange?: ((newMonth: moment.Moment) => void) | undefined;
511 onYearChange?: ((newMonth: moment.Moment) => void) | undefined;
512 translationValue?: number | null | undefined;
513 isRTL?: boolean | undefined;
514 transitionDuration?: number | undefined;
515 };
516
517export type CalendarMonthGrid = React.ComponentClass<CalendarMonthGridShape>;
518export const CalendarMonthGrid: React.ComponentClass<CalendarMonthGridShape>;
519
520// components/DateRangePicker.jsx
521export type DateRangePicker = React.ComponentClass<DateRangePickerShape>;
522export const DateRangePicker: React.ComponentClass<DateRangePickerShape>;
523
524// components/DateRangePickerInput.jsx
525export interface DateRangePickerInputShape {
526 startDateId?: string | undefined;
527 startDatePlaceholderText?: string | undefined;
528 startDateAriaLabel?: string | undefined;
529 screenReaderMessage?: string | undefined;
530
531 endDateId?: string | undefined;
532 endDatePlaceholderText?: string | undefined;
533 endDateAriaLabel?: string | undefined;
534
535 onStartDateFocus?: React.FocusEventHandler<HTMLInputElement> | undefined;
536 onEndDateFocus?: React.FocusEventHandler<HTMLInputElement> | undefined;
537 onStartDateChange?: ((dateString: string) => void) | undefined;
538 onEndDateChange?: ((dateString: string) => void) | undefined;
539 onStartDateShiftTab?: React.KeyboardEventHandler<HTMLInputElement> | undefined;
540 onEndDateTab?: React.KeyboardEventHandler<HTMLInputElement> | undefined;
541 onClearDates?: React.MouseEventHandler<HTMLButtonElement> | undefined;
542 onKeyDownArrowDown?: React.KeyboardEventHandler<HTMLInputElement> | undefined;
543 onKeyDownQuestionMark?: React.KeyboardEventHandler<HTMLInputElement> | undefined;
544
545 startDate?: string | undefined;
546 endDate?: string | undefined;
547
548 isStartDateFocused?: boolean | undefined;
549 isEndDateFocused?: boolean | undefined;
550 showClearDates?: boolean | undefined;
551 disabled?: DisabledShape | undefined;
552 required?: boolean | undefined;
553 readOnly?: boolean | undefined;
554 openDirection?: OpenDirectionShape | undefined;
555 showCaret?: boolean | undefined;
556 showDefaultInputIcon?: boolean | undefined;
557 inputIconPosition?: IconPositionShape | undefined;
558 customInputIcon?: React.ReactNode | undefined;
559 customArrowIcon?: React.ReactNode | undefined;
560 customCloseIcon?: React.ReactNode | undefined;
561 noBorder?: boolean | undefined;
562 block?: boolean | undefined;
563 small?: boolean | undefined;
564 regular?: boolean | undefined;
565 verticalSpacing?: number | undefined;
566
567 // accessibility
568 isFocused?: boolean | undefined; // describes actual DOM focus
569
570 // i18n
571 phrases?: DateRangePickerInputPhrases | undefined;
572
573 isRTL?: boolean | undefined;
574}
575
576export type DateRangePickerInput = React.ComponentClass<DateRangePickerInputShape>;
577export const DateRangePickerInput: React.ComponentClass<DateRangePickerInputShape>;
578
579// components/DateRangePickerInputController.jsx
580export interface DateRangePickerInputControllerShape
581 extends Pick<
582 DateRangePickerInputShape,
583 | 'startDateId'
584 | 'startDatePlaceholderText'
585 | 'isStartDateFocused'
586 | 'startDateAriaLabel'
587 | 'endDateId'
588 | 'endDatePlaceholderText'
589 | 'isEndDateFocused'
590 | 'endDateAriaLabel'
591 | 'screenReaderMessage'
592 | 'showClearDates'
593 | 'showCaret'
594 | 'showDefaultInputIcon'
595 | 'inputIconPosition'
596 | 'disabled'
597 | 'required'
598 | 'readOnly'
599 | 'openDirection'
600 | 'noBorder'
601 | 'block'
602 | 'small'
603 | 'regular'
604 | 'verticalSpacing'
605 | 'onKeyDownArrowDown'
606 | 'onKeyDownQuestionMark'
607 | 'customInputIcon'
608 | 'customArrowIcon'
609 | 'customCloseIcon'
610 | 'isFocused'
611 | 'phrases'
612 | 'isRTL'
613 > {
614 startDate?: moment.Moment | null | undefined;
615
616 endDate?: moment.Moment | null | undefined;
617
618 keepOpenOnDateSelect?: boolean | undefined;
619 reopenPickerOnClearDates?: boolean | undefined;
620 withFullScreenPortal?: boolean | undefined;
621 minimumNights?: number | undefined;
622 isOutsideRange?: ((day: moment.Moment) => boolean) | undefined;
623 displayFormat?: string | (() => string) | undefined;
624
625 onFocusChange?: ((arg: FocusedInputShape | null) => void) | undefined;
626 onClose?: ((final: { startDate: moment.Moment | null; endDate: moment.Moment | null }) => void) | undefined;
627 onDatesChange?: ((arg: { startDate: moment.Moment | null; endDate: moment.Moment | null }) => void) | undefined;
628}
629
630export type DateRangePickerInputController = React.ComponentClass<DateRangePickerInputControllerShape>;
631export const DateRangePickerInputController: React.ComponentClass<DateRangePickerInputControllerShape>;
632
633// components/DayPicker.jsx
634export type DayPickerShape = RenderMonthProps &
635 Pick<
636 CalendarMonthGridShape,
637 | 'enableOutsideDays'
638 | 'firstDayOfWeek'
639 | 'daySize'
640 | 'isRTL'
641 | 'transitionDuration'
642 | 'verticalBorderSpacing'
643 | 'horizontalMonthPadding'
644 | 'modifiers'
645 | 'renderCalendarDay'
646 | 'renderDayContents'
647 | 'onDayClick'
648 | 'onDayMouseEnter'
649 | 'onDayMouseLeave'
650 | 'monthFormat'
651 | 'dayAriaLabelFormat'
652 > &
653 (
654 | { orientation?: OrientationShape | undefined; onGetNextScrollableMonths?: never | undefined; onGetPrevScrollableMonths?: never | undefined }
655 | {
656 orientation: 'verticalScrollable';
657 onGetNextScrollableMonths?: ((
658 event?: React.MouseEvent<HTMLElement> | React.KeyboardEvent<HTMLElement>,
659 ) => void) | undefined; // VERTICAL_SCROLLABLE daypickers only
660 onGetPrevScrollableMonths?: ((
661 event?: React.MouseEvent<HTMLElement> | React.KeyboardEvent<HTMLElement>,
662 ) => void) | undefined; // VERTICAL_SCROLLABLE daypickers only
663 }
664 ) & {
665 // calendar presentation props
666 numberOfMonths?: number | undefined;
667 withPortal?: boolean | undefined;
668 onOutsideClick?: ReactOutsideClickHandlerProps['onOutsideClick'] | undefined;
669 hidden?: boolean | undefined;
670 initialVisibleMonth?: (() => moment.Moment) | undefined;
671 renderCalendarInfo?: (() => React.ReactNode) | null | undefined;
672 calendarInfoPosition?: CalendarInfoPositionShape | undefined;
673 hideKeyboardShortcutsPanel?: boolean | undefined;
674 verticalHeight?: number | null | undefined;
675 noBorder?: boolean | undefined;
676 renderKeyboardShortcutsButton?: ((props: {
677 ref: React.Ref<HTMLElement>;
678 onClick: React.MouseEventHandler;
679 ariaLabel: string;
680 }) => React.ReactNode) | undefined;
681 renderKeyboardShortcutsPanel?: ((props: {
682 closeButtonAriaLabel: string;
683 keyboardShortcuts: Array<Record<'unicode' | 'label' | 'action', string>>;
684 onCloseButtonClick: React.MouseEventHandler;
685 onKeyDown: React.KeyboardEventHandler;
686 title: string;
687 }) => React.ReactNode) | undefined;
688
689 // navigation props
690 dayPickerNavigationInlineStyles?: Record<string, any> | null | undefined;
691 disablePrev?: boolean | undefined;
692 disableNext?: boolean | undefined;
693 navPosition?: NavPositionShape | undefined;
694 navPrev?: React.ReactNode | undefined;
695 navNext?: React.ReactNode | undefined;
696 renderNavPrevButton?:
697 | ((props: {
698 ariaLabel: string;
699 disabled: boolean;
700 onClick?: React.MouseEventHandler | undefined;
701 onKeyUp?: React.KeyboardEventHandler | undefined;
702 onMouseUp?: React.MouseEventHandler | undefined;
703 }) => React.ReactNode)
704 | null | undefined;
705 renderNavNextButton?:
706 | ((props: {
707 ariaLabel: string;
708 disabled: boolean;
709 onClick?: React.MouseEventHandler | undefined;
710 onKeyUp?: React.KeyboardEventHandler | undefined;
711 onMouseUp?: React.MouseEventHandler | undefined;
712 }) => React.ReactNode)
713 | null | undefined;
714 noNavButtons?: boolean | undefined;
715 noNavNextButton?: boolean | undefined;
716 noNavPrevButton?: boolean | undefined;
717 onPrevMonthClick?: ((newCurrentMonth: moment.Moment) => void) | undefined;
718 onNextMonthClick?: ((newCurrentMonth: moment.Moment) => void) | undefined;
719 onMonthChange?: ((newMonth: moment.Moment) => void) | undefined;
720 onYearChange?: ((newMonth: moment.Moment) => void) | undefined;
721
722 // month props
723 renderWeekHeaderElement?: ((day: string) => React.ReactNode) | null | undefined;
724
725 // accessibility props
726 isFocused?: boolean | undefined;
727 getFirstFocusableDay?: ((month: moment.Moment) => moment.Moment) | null | undefined;
728 onBlur?: React.KeyboardEventHandler<HTMLDivElement> | undefined;
729 showKeyboardShortcuts?: boolean | undefined;
730 onTab?: React.KeyboardEventHandler<HTMLDivElement> | undefined;
731 onShiftTab?: (() => void) | undefined;
732
733 // internationalization
734 weekDayFormat?: string | undefined;
735 phrases?: DayPickerPhrases | undefined;
736 };
737
738export type DayPicker = React.ComponentClass<DayPickerShape>;
739export const DayPicker: React.ComponentClass<DayPickerShape>;
740
741// components/DayPickerRangeController.jsx
742export type DayPickerRangeControllerShape = RenderMonthProps &
743 Pick<
744 DayPickerShape,
745 | 'renderWeekHeaderElement'
746 | 'enableOutsideDays'
747 | 'numberOfMonths'
748 | 'withPortal'
749 | 'hideKeyboardShortcutsPanel'
750 | 'daySize'
751 | 'noBorder'
752 | 'verticalBorderSpacing'
753 | 'horizontalMonthPadding'
754 | 'dayPickerNavigationInlineStyles'
755 | 'navPosition'
756 | 'navPrev'
757 | 'navNext'
758 | 'renderNavPrevButton'
759 | 'renderNavNextButton'
760 | 'noNavButtons'
761 | 'noNavNextButton'
762 | 'noNavPrevButton'
763 | 'onOutsideClick'
764 | 'renderCalendarDay'
765 | 'renderDayContents'
766 | 'renderCalendarInfo'
767 | 'renderKeyboardShortcutsButton'
768 | 'renderKeyboardShortcutsPanel'
769 | 'calendarInfoPosition'
770 | 'firstDayOfWeek'
771 | 'verticalHeight'
772 | 'transitionDuration'
773 | 'onBlur'
774 | 'isFocused'
775 | 'showKeyboardShortcuts'
776 | 'onTab'
777 | 'onShiftTab'
778 | 'monthFormat'
779 | 'weekDayFormat'
780 | 'phrases'
781 | 'dayAriaLabelFormat'
782 | 'isRTL'
783 > & {
784 startDate: moment.Moment | null;
785 endDate: moment.Moment | null;
786 onDatesChange: (arg: { startDate: moment.Moment | null; endDate: moment.Moment | null }) => void;
787 startDateOffset?: ((day: moment.Moment) => moment.Moment) | undefined;
788 endDateOffset?: ((day: moment.Moment) => moment.Moment) | undefined;
789 minDate?: moment.Moment | null | undefined;
790 maxDate?: moment.Moment | null | undefined;
791
792 focusedInput: FocusedInputShape | null;
793 onFocusChange: (arg: FocusedInputShape | null) => void;
794 onClose?: ((final: { startDate: moment.Moment | null; endDate: moment.Moment | null }) => void) | undefined;
795
796 keepOpenOnDateSelect?: boolean | undefined;
797 minimumNights?: number | undefined;
798 disabled?: DisabledShape | undefined;
799 isOutsideRange?: ((day: moment.Moment) => boolean) | undefined;
800 isDayBlocked?: ((day: moment.Moment) => boolean) | undefined;
801 isDayHighlighted?: ((day: moment.Moment) => boolean) | undefined;
802 getMinNightsForHoverDate?: ((day: moment.Moment) => number) | undefined;
803 daysViolatingMinNightsCanBeClicked?: boolean | undefined;
804
805 // DayPicker props
806 initialVisibleMonth: (() => moment.Moment) | null;
807 orientation?: ScrollableOrientationShape | undefined;
808
809 onPrevMonthClick?: ((newCurrentMonth: moment.Moment) => void) | undefined;
810 onNextMonthClick?: ((newCurrentMonth: moment.Moment) => void) | undefined;
811 };
812
813export type DayPickerRangeController = React.ComponentClass<DayPickerRangeControllerShape>;
814export const DayPickerRangeController: React.ComponentClass<DayPickerRangeControllerShape>;
815
816// components/DayPickerSingleDateController.jsx
817export type DayPickerSingleDateControllerShape = RenderMonthProps &
818 Pick<
819 DayPickerShape,
820 | 'renderWeekHeaderElement'
821 | 'enableOutsideDays'
822 | 'numberOfMonths'
823 | 'withPortal'
824 | 'hideKeyboardShortcutsPanel'
825 | 'daySize'
826 | 'noBorder'
827 | 'verticalBorderSpacing'
828 | 'horizontalMonthPadding'
829 | 'dayPickerNavigationInlineStyles'
830 | 'navPosition'
831 | 'navPrev'
832 | 'navNext'
833 | 'renderNavPrevButton'
834 | 'renderNavNextButton'
835 | 'noNavButtons'
836 | 'noNavNextButton'
837 | 'noNavPrevButton'
838 | 'onOutsideClick'
839 | 'renderCalendarDay'
840 | 'renderDayContents'
841 | 'renderCalendarInfo'
842 | 'calendarInfoPosition'
843 | 'firstDayOfWeek'
844 | 'verticalHeight'
845 | 'transitionDuration'
846 | 'onBlur'
847 | 'isFocused'
848 | 'showKeyboardShortcuts'
849 | 'onTab'
850 | 'onShiftTab'
851 | 'monthFormat'
852 | 'weekDayFormat'
853 | 'phrases'
854 | 'dayAriaLabelFormat'
855 | 'isRTL'
856 > & {
857 date: moment.Moment | null;
858 minDate?: moment.Moment | null | undefined;
859 maxDate?: moment.Moment | null | undefined;
860 onDateChange: (date: moment.Moment | null) => void;
861
862 focused: boolean;
863 onFocusChange: (arg: { focused: boolean }) => void;
864 onClose?: ((arg: { date: moment.Moment | null }) => void) | undefined;
865
866 keepOpenOnDateSelect?: boolean | undefined;
867 isOutsideRange?: ((day: moment.Moment) => boolean) | undefined;
868 isDayBlocked?: ((day: moment.Moment) => boolean) | undefined;
869 isDayHighlighted?: ((day: moment.Moment) => boolean) | undefined;
870
871 // DayPicker props
872 initialVisibleMonth: (() => moment.Moment) | null;
873 orientation?: ScrollableOrientationShape | undefined;
874
875 onPrevMonthClick?: ((newCurrentMonth: moment.Moment) => void) | undefined;
876 onNextMonthClick?: ((newCurrentMonth: moment.Moment) => void) | undefined;
877 };
878
879export type DayPickerSingleDateController = React.ComponentClass<DayPickerSingleDateControllerShape>;
880export const DayPickerSingleDateController: React.ComponentClass<DayPickerSingleDateControllerShape>;
881
882// components/SingleDatePicker.jsx
883export type SingleDatePicker = React.ComponentClass<SingleDatePickerShape>;
884export const SingleDatePicker: React.ComponentClass<SingleDatePickerShape>;
885
886// components/SingleDatePickerInput.jsx
887export interface SingleDatePickerInputShape {
888 id: string;
889 placeholder?: string | undefined;
890 ariaLabel?: string | undefined;
891 displayValue?: string | undefined;
892 screenReaderMessage?: string | undefined;
893 focused?: boolean | undefined;
894 isFocused?: boolean | undefined;
895 disabled?: boolean | undefined;
896 required?: boolean | undefined;
897 readOnly?: boolean | undefined;
898 openDirection?: OpenDirectionShape | undefined;
899 showCaret?: boolean | undefined;
900 showClearDate?: boolean | undefined;
901 customCloseIcon?: React.ReactNode | undefined;
902 showDefaultInputIcon?: boolean | undefined;
903 inputIconPosition?: IconPositionShape | undefined;
904 customInputIcon?: React.ReactNode | undefined;
905 isRTL?: boolean | undefined;
906 noBorder?: boolean | undefined;
907 block?: boolean | undefined;
908 small?: boolean | undefined;
909 regular?: boolean | undefined;
910 verticalSpacing?: number | undefined;
911
912 onChange?: ((dateString: string) => void) | undefined;
913 onClearDate?: React.MouseEventHandler<HTMLButtonElement> | undefined;
914 onFocus?: React.FocusEventHandler<HTMLInputElement> | undefined;
915 onKeyDownShiftTab?: React.KeyboardEventHandler<HTMLInputElement> | undefined;
916 onKeyDownTab?: React.KeyboardEventHandler<HTMLInputElement> | undefined;
917 onKeyDownArrowDown?: React.KeyboardEventHandler<HTMLInputElement> | undefined;
918 onKeyDownQuestionMark?: React.KeyboardEventHandler<HTMLInputElement> | undefined;
919
920 // i18n
921 phrases?: SingleDatePickerInputPhrases | undefined;
922}
923
924export type SingleDatePickerInput = React.FC<SingleDatePickerInputShape>;
925export const SingleDatePickerInput: React.FC<SingleDatePickerInputShape>;
926
927// UTILS
928//
929// utils/isInclusivelyAfterDay.js
930export function isInclusivelyAfterDay(a: moment.Moment, b: moment.Moment): boolean;
931// utils/isInclusivelyBeforeDay.js
932export function isInclusivelyBeforeDay(a: moment.Moment, b: moment.Moment): boolean;
933// utils/isNextDay.js
934export function isNextDay(a: moment.Moment, b: moment.Moment): boolean;
935// utils/isSameDay.js
936export function isSameDay(a: moment.Moment, b: moment.Moment): boolean;
937// utils/toISODateString.js
938export function toISODateString(
939 date: moment.MomentInput,
940 currentFormat?: moment.MomentFormatSpecification,
941): string | null;
942// utils/toLocalizedDateString.js
943export function toLocalizedDateString(
944 date: moment.MomentInput,
945 currentFormat?: moment.MomentFormatSpecification,
946): string | null;
947// utils/toMomentObject.js
948export function toMomentObject(
949 dateString: moment.MomentInput,
950 customFormat?: moment.MomentFormatSpecification,
951): moment.Moment | null;
952
\No newline at end of file