UNPKG

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