react-day-picker 8.8.2 → 8.9.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +3 -3
- package/dist/index.d.ts +152 -71
- package/dist/index.esm.js +1481 -101
- package/dist/index.esm.js.map +1 -1
- package/dist/index.js +1505 -142
- package/dist/index.js.map +1 -1
- package/dist/index.min.js +10 -1
- package/dist/index.min.js.map +1 -1
- package/dist/style.css +8 -7
- package/dist/style.css.map +1 -1
- package/dist/style.module.css +8 -7
- package/package.json +27 -27
- package/src/DayPicker.tsx +0 -2
- package/src/components/Button/Button.test.tsx +0 -2
- package/src/components/Button/Button.tsx +1 -1
- package/src/components/Caption/Caption.test.tsx +0 -2
- package/src/components/Caption/Caption.tsx +0 -2
- package/src/components/CaptionDropdowns/CaptionDropdowns.test.tsx +0 -2
- package/src/components/CaptionDropdowns/CaptionDropdowns.tsx +0 -2
- package/src/components/CaptionLabel/CaptionLabel.test.tsx +0 -2
- package/src/components/CaptionLabel/CaptionLabel.tsx +0 -2
- package/src/components/CaptionNavigation/CaptionNavigation.test.tsx +0 -2
- package/src/components/CaptionNavigation/CaptionNavigation.tsx +3 -3
- package/src/components/Day/Day.test.tsx +0 -2
- package/src/components/Day/Day.tsx +1 -1
- package/src/components/DayContent/DayContent.test.tsx +0 -2
- package/src/components/DayContent/DayContent.tsx +0 -2
- package/src/components/Dropdown/Dropdown.test.tsx +0 -2
- package/src/components/Dropdown/Dropdown.tsx +10 -5
- package/src/components/Footer/Footer.test.tsx +0 -2
- package/src/components/Footer/Footer.tsx +0 -2
- package/src/components/Head/Head.test.tsx +0 -2
- package/src/components/Head/Head.tsx +0 -2
- package/src/components/HeadRow/HeadRow.test.tsx +0 -2
- package/src/components/HeadRow/HeadRow.tsx +0 -2
- package/src/components/IconDropdown/IconDropdown.test.tsx +0 -2
- package/src/components/IconDropdown/IconDropdown.tsx +0 -2
- package/src/components/IconLeft/IconLeft.test.tsx +0 -2
- package/src/components/IconLeft/IconLeft.tsx +0 -2
- package/src/components/IconRight/IconRight.test.tsx +0 -2
- package/src/components/IconRight/IconRight.tsx +0 -2
- package/src/components/Month/Month.test.tsx +0 -2
- package/src/components/Month/Month.tsx +0 -2
- package/src/components/Months/Months.test.tsx +27 -0
- package/src/components/Months/Months.tsx +19 -0
- package/src/components/Months/index.ts +1 -0
- package/src/components/MonthsDropdown/MonthsDropdown.test.tsx +0 -2
- package/src/components/MonthsDropdown/MonthsDropdown.tsx +2 -2
- package/src/components/Navigation/Navigation.test.tsx +0 -2
- package/src/components/Navigation/Navigation.tsx +3 -3
- package/src/components/Root/Root.test.tsx +58 -15
- package/src/components/Root/Root.tsx +9 -6
- package/src/components/Row/Row.test.tsx +0 -2
- package/src/components/Row/Row.tsx +0 -2
- package/src/components/Table/Table.test.tsx +0 -2
- package/src/components/Table/Table.tsx +0 -2
- package/src/components/WeekNumber/WeekNumber.test.tsx +1 -3
- package/src/components/WeekNumber/WeekNumber.tsx +2 -2
- package/src/components/YearsDropdown/YearsDropdown.test.tsx +0 -2
- package/src/components/YearsDropdown/YearsDropdown.tsx +2 -2
- package/src/contexts/DayPicker/DayPickerContext.tsx +2 -1
- package/src/contexts/DayPicker/formatters/formatDay.ts +1 -2
- package/src/contexts/DayPicker/formatters/formatMonthCaption.ts +1 -2
- package/src/contexts/DayPicker/formatters/formatWeekdayName.ts +1 -2
- package/src/contexts/DayPicker/formatters/formatYearCaption.ts +4 -2
- package/src/contexts/Focus/FocusContext.tsx +4 -2
- package/src/contexts/Modifiers/ModifiersContext.tsx +2 -4
- package/src/contexts/Navigation/NavigationContext.tsx +1 -1
- package/src/contexts/RootProvider.tsx +4 -5
- package/src/contexts/SelectMultiple/SelectMultipleContext.test.ts +6 -4
- package/src/contexts/SelectMultiple/SelectMultipleContext.tsx +6 -5
- package/src/contexts/SelectRange/SelectRangeContext.test.ts +3 -1
- package/src/contexts/SelectRange/SelectRangeContext.tsx +8 -7
- package/src/contexts/SelectSingle/SelectSingleContext.test.ts +3 -3
- package/src/contexts/SelectSingle/SelectSingleContext.tsx +8 -7
- package/src/hooks/useControlledValue/useControlledValue.ts +2 -2
- package/src/hooks/useDayRender/useDayRender.tsx +2 -2
- package/src/hooks/useDayRender/utils/getDayStyle.ts +4 -2
- package/src/hooks/useId/useId.ts +5 -7
- package/src/hooks/useId/useIsomorphicLayoutEffect.ts +31 -0
- package/src/hooks/useInput/useInput.ts +13 -8
- package/src/index.ts +1 -0
- package/src/style.css +8 -7
- package/src/types/DayPickerBase.ts +85 -11
- package/src/types/EventHandlers.ts +18 -10
- package/src/types/Formatters.ts +11 -5
- package/src/types/Labels.ts +16 -5
- package/src/types/Modifiers.ts +4 -2
- package/src/types/Styles.ts +5 -5
- package/tsconfig.json +5 -3
package/README.md
CHANGED
|
@@ -45,14 +45,14 @@ yarn add react-day-picker date-fns # using yarn
|
|
|
45
45
|
## Example
|
|
46
46
|
|
|
47
47
|
```tsx
|
|
48
|
-
import
|
|
49
|
-
|
|
48
|
+
import { useState } from 'react';
|
|
50
49
|
import { format } from 'date-fns';
|
|
50
|
+
|
|
51
51
|
import { DayPicker } from 'react-day-picker';
|
|
52
52
|
import 'react-day-picker/dist/style.css';
|
|
53
53
|
|
|
54
54
|
export default function Example() {
|
|
55
|
-
const [selected, setSelected] =
|
|
55
|
+
const [selected, setSelected] = useState<Date>();
|
|
56
56
|
|
|
57
57
|
let footer = <p>Please pick a day.</p>;
|
|
58
58
|
if (selected) {
|
package/dist/index.d.ts
CHANGED
|
@@ -1,5 +1,6 @@
|
|
|
1
|
-
import
|
|
2
|
-
import
|
|
1
|
+
import * as react from 'react';
|
|
2
|
+
import { CSSProperties, ReactNode, SelectHTMLAttributes, ChangeEventHandler, MouseEvent, FocusEvent, KeyboardEvent, PointerEvent, TouchEvent, InputHTMLAttributes, HTMLProps, RefObject } from 'react';
|
|
3
|
+
import { Locale } from 'date-fns';
|
|
3
4
|
|
|
4
5
|
/** Represent the props of the {@link Caption} component. */
|
|
5
6
|
interface CaptionProps {
|
|
@@ -171,7 +172,7 @@ type InternalModifiers = Record<InternalModifier, Matcher[]>;
|
|
|
171
172
|
* */
|
|
172
173
|
type ActiveModifiers = Record<Modifier, true> & Partial<Record<InternalModifier, true>>;
|
|
173
174
|
/** The style to apply to each day element matching a modifier. */
|
|
174
|
-
type ModifiersStyles = Record<Modifier,
|
|
175
|
+
type ModifiersStyles = Record<Modifier, CSSProperties> & Partial<Record<InternalModifier, CSSProperties>>;
|
|
175
176
|
/** The classnames to assign to each day element matching a modifier. */
|
|
176
177
|
type ModifiersClassNames = Record<Modifier, string> & Partial<Record<InternalModifier, string>>;
|
|
177
178
|
/** The custom modifiers passed to the {@link DayPickerBase.modifiers}. */
|
|
@@ -199,14 +200,14 @@ interface DropdownProps {
|
|
|
199
200
|
/** The name attribute of the element. */
|
|
200
201
|
name?: string;
|
|
201
202
|
/** The caption displayed to replace the hidden select. */
|
|
202
|
-
caption?:
|
|
203
|
-
children?:
|
|
203
|
+
caption?: ReactNode;
|
|
204
|
+
children?: SelectHTMLAttributes<HTMLSelectElement>['children'];
|
|
204
205
|
className?: string;
|
|
205
206
|
['aria-label']?: string;
|
|
206
|
-
style?:
|
|
207
|
+
style?: CSSProperties;
|
|
207
208
|
/** The selected value. */
|
|
208
209
|
value?: string | number;
|
|
209
|
-
onChange?:
|
|
210
|
+
onChange?: ChangeEventHandler<HTMLSelectElement>;
|
|
210
211
|
}
|
|
211
212
|
/**
|
|
212
213
|
* Render a styled select component – displaying a caption and a custom
|
|
@@ -221,6 +222,15 @@ interface FooterProps {
|
|
|
221
222
|
/** Render the Footer component (empty as default).*/
|
|
222
223
|
declare function Footer(props: FooterProps): JSX.Element;
|
|
223
224
|
|
|
225
|
+
/** The props for the {@link Months} component. */
|
|
226
|
+
type MonthsProps = {
|
|
227
|
+
children: ReactNode;
|
|
228
|
+
};
|
|
229
|
+
/**
|
|
230
|
+
* Render the wrapper for the month grids.
|
|
231
|
+
*/
|
|
232
|
+
declare function Months(props: MonthsProps): JSX.Element;
|
|
233
|
+
|
|
224
234
|
/**
|
|
225
235
|
* The props for the {@link Row} component.
|
|
226
236
|
*/
|
|
@@ -251,15 +261,15 @@ interface WeekNumberProps {
|
|
|
251
261
|
declare function WeekNumber(props: WeekNumberProps): JSX.Element;
|
|
252
262
|
|
|
253
263
|
/** The event handler when a day is clicked. */
|
|
254
|
-
type DayClickEventHandler = (day: Date, activeModifiers: ActiveModifiers, e:
|
|
264
|
+
type DayClickEventHandler = (day: Date, activeModifiers: ActiveModifiers, e: MouseEvent) => void;
|
|
255
265
|
/** The event handler when a day is focused. */
|
|
256
|
-
type DayFocusEventHandler = (day: Date, activeModifiers: ActiveModifiers, e:
|
|
266
|
+
type DayFocusEventHandler = (day: Date, activeModifiers: ActiveModifiers, e: FocusEvent | KeyboardEvent) => void;
|
|
257
267
|
/** The event handler when a day gets a keyboard event. */
|
|
258
|
-
type DayKeyboardEventHandler = (day: Date, activeModifiers: ActiveModifiers, e:
|
|
268
|
+
type DayKeyboardEventHandler = (day: Date, activeModifiers: ActiveModifiers, e: KeyboardEvent) => void;
|
|
259
269
|
/** The event handler when a day gets a mouse event. */
|
|
260
|
-
type DayMouseEventHandler = (day: Date, activeModifiers: ActiveModifiers, e:
|
|
270
|
+
type DayMouseEventHandler = (day: Date, activeModifiers: ActiveModifiers, e: MouseEvent) => void;
|
|
261
271
|
/** The event handler when a day gets a pointer event. */
|
|
262
|
-
type DayPointerEventHandler = (day: Date, activeModifiers: ActiveModifiers, e:
|
|
272
|
+
type DayPointerEventHandler = (day: Date, activeModifiers: ActiveModifiers, e: PointerEvent) => void;
|
|
263
273
|
/** The event handler when a month is changed in the calendar. */
|
|
264
274
|
type MonthChangeEventHandler = (month: Date) => void;
|
|
265
275
|
/** The event handler when selecting multiple days. */
|
|
@@ -271,7 +281,7 @@ selectedDay: Date,
|
|
|
271
281
|
/** The day that was clicked */
|
|
272
282
|
activeModifiers: ActiveModifiers,
|
|
273
283
|
/** The mouse event that triggered this event. */
|
|
274
|
-
e:
|
|
284
|
+
e: MouseEvent) => void;
|
|
275
285
|
/** The event handler when selecting a range of days. */
|
|
276
286
|
type SelectRangeEventHandler = (
|
|
277
287
|
/** The current range of the selected days. */
|
|
@@ -279,7 +289,7 @@ range: DateRange | undefined,
|
|
|
279
289
|
/** The day that was selected (or clicked) triggering the event. */
|
|
280
290
|
selectedDay: Date,
|
|
281
291
|
/** The modifiers of the selected day. */
|
|
282
|
-
activeModifiers: ActiveModifiers, e:
|
|
292
|
+
activeModifiers: ActiveModifiers, e: MouseEvent) => void;
|
|
283
293
|
/** The event handler when selecting a single day. */
|
|
284
294
|
type SelectSingleEventHandler = (
|
|
285
295
|
/** The selected day, `undefined` when `required={false}` (default) and the day is clicked again. */
|
|
@@ -287,7 +297,7 @@ day: Date | undefined,
|
|
|
287
297
|
/** The day that was selected (or clicked) triggering the event. */
|
|
288
298
|
selectedDay: Date,
|
|
289
299
|
/** The modifiers of the selected day. */
|
|
290
|
-
activeModifiers: ActiveModifiers, e:
|
|
300
|
+
activeModifiers: ActiveModifiers, e: MouseEvent) => void;
|
|
291
301
|
/**The event handler when the week number is clicked. */
|
|
292
302
|
type WeekNumberClickEventHandler = (
|
|
293
303
|
/** The week number that has been clicked. */
|
|
@@ -295,14 +305,14 @@ weekNumber: number,
|
|
|
295
305
|
/** The dates in the clicked week. */
|
|
296
306
|
dates: Date[],
|
|
297
307
|
/** The mouse event that triggered this event. */
|
|
298
|
-
e:
|
|
308
|
+
e: MouseEvent) => void;
|
|
299
309
|
/** The event handler when a day gets a touch event. */
|
|
300
|
-
type DayTouchEventHandler = (day: Date, activeModifiers: ActiveModifiers, e:
|
|
310
|
+
type DayTouchEventHandler = (day: Date, activeModifiers: ActiveModifiers, e: TouchEvent) => void;
|
|
301
311
|
|
|
302
312
|
/** Represents a function to format a date. */
|
|
303
313
|
type DateFormatter = (date: Date, options?: {
|
|
304
314
|
locale?: Locale;
|
|
305
|
-
}) =>
|
|
315
|
+
}) => ReactNode;
|
|
306
316
|
/** Represent a map of formatters used to render localized content. */
|
|
307
317
|
type Formatters = {
|
|
308
318
|
/** Format the month in the caption when `captionLayout` is `buttons`. */
|
|
@@ -321,7 +331,7 @@ type Formatters = {
|
|
|
321
331
|
/** Represent a function to format the week number. */
|
|
322
332
|
type WeekNumberFormatter = (weekNumber: number, options?: {
|
|
323
333
|
locale?: Locale;
|
|
324
|
-
}) =>
|
|
334
|
+
}) => ReactNode;
|
|
325
335
|
|
|
326
336
|
/** Map of functions to translate ARIA labels for the relative elements. */
|
|
327
337
|
type Labels = {
|
|
@@ -336,23 +346,23 @@ type Labels = {
|
|
|
336
346
|
};
|
|
337
347
|
/** Return the ARIA label for the {@link Day} component. */
|
|
338
348
|
type DayLabel = (day: Date, activeModifiers: ActiveModifiers, options?: {
|
|
339
|
-
locale?: Locale
|
|
349
|
+
locale?: Locale;
|
|
340
350
|
}) => string;
|
|
341
351
|
/** Return the ARIA label for the "next month" / "prev month" buttons in the navigation.*/
|
|
342
352
|
type NavButtonLabel = (month?: Date, options?: {
|
|
343
|
-
locale?: Locale
|
|
353
|
+
locale?: Locale;
|
|
344
354
|
}) => string;
|
|
345
355
|
/** Return the ARIA label for the Head component.*/
|
|
346
356
|
type WeekdayLabel = (day: Date, options?: {
|
|
347
|
-
locale?: Locale
|
|
357
|
+
locale?: Locale;
|
|
348
358
|
}) => string;
|
|
349
359
|
/** Return the ARIA label of the week number.*/
|
|
350
360
|
type WeekNumberLabel = (n: number, options?: {
|
|
351
|
-
locale?: Locale
|
|
361
|
+
locale?: Locale;
|
|
352
362
|
}) => string;
|
|
353
363
|
|
|
354
364
|
/** The style (either via class names or via in-line styles) of an element. */
|
|
355
|
-
type StyledElement<T = string |
|
|
365
|
+
type StyledElement<T = string | CSSProperties> = {
|
|
356
366
|
/** The root element. */
|
|
357
367
|
readonly root: T;
|
|
358
368
|
/** The root element when `numberOfMonths > 1`. */
|
|
@@ -445,12 +455,12 @@ type ClassNames = Partial<StyledElement<string>>;
|
|
|
445
455
|
* modifiers, such as `today` or `hidden`, should be styled using the
|
|
446
456
|
* `modifiersStyles` prop.
|
|
447
457
|
*/
|
|
448
|
-
type Styles = Partial<Omit<StyledElement<
|
|
458
|
+
type Styles = Partial<Omit<StyledElement<CSSProperties>, InternalModifiersElement>>;
|
|
449
459
|
/** Props of a component that can be styled via classNames or inline-styles. */
|
|
450
460
|
type StyledComponent = {
|
|
451
461
|
className?: string;
|
|
452
|
-
style?:
|
|
453
|
-
children?:
|
|
462
|
+
style?: CSSProperties;
|
|
463
|
+
children?: ReactNode;
|
|
454
464
|
};
|
|
455
465
|
|
|
456
466
|
/**
|
|
@@ -486,7 +496,7 @@ interface DayPickerBase {
|
|
|
486
496
|
/**
|
|
487
497
|
* Style to apply to the container element.
|
|
488
498
|
*/
|
|
489
|
-
style?:
|
|
499
|
+
style?: CSSProperties;
|
|
490
500
|
/**
|
|
491
501
|
* Change the inline styles of the HTML elements.
|
|
492
502
|
*/
|
|
@@ -643,7 +653,7 @@ interface DayPickerBase {
|
|
|
643
653
|
/**
|
|
644
654
|
* Content to add to the table footer element.
|
|
645
655
|
*/
|
|
646
|
-
footer?:
|
|
656
|
+
footer?: ReactNode;
|
|
647
657
|
/**
|
|
648
658
|
* When a selection mode is set, DayPicker will focus the first selected day
|
|
649
659
|
* (if set) or the today's date (if not disabled).
|
|
@@ -679,39 +689,104 @@ interface DayPickerBase {
|
|
|
679
689
|
*
|
|
680
690
|
* @defaultValue en-US
|
|
681
691
|
*/
|
|
682
|
-
locale?: Locale
|
|
692
|
+
locale?: Locale;
|
|
683
693
|
/**
|
|
684
694
|
* Labels creators to override the defaults. Use this prop to customize the
|
|
685
695
|
* ARIA labels attributes.
|
|
686
696
|
*/
|
|
687
697
|
labels?: Partial<Labels>;
|
|
698
|
+
/**
|
|
699
|
+
* A map of formatters. Use the formatters to override the default formatting
|
|
700
|
+
* functions.
|
|
701
|
+
*/
|
|
702
|
+
formatters?: Partial<Formatters>;
|
|
688
703
|
/**
|
|
689
704
|
* The text direction of the calendar. Use `ltr` for left-to-right (default)
|
|
690
705
|
* or `rtl` for right-to-left.
|
|
691
706
|
*/
|
|
692
|
-
dir?:
|
|
707
|
+
dir?: HTMLDivElement['dir'];
|
|
693
708
|
/**
|
|
694
|
-
* A
|
|
695
|
-
*
|
|
709
|
+
* A cryptographic nonce ("number used once") which can be used by Content
|
|
710
|
+
* Security Policy for the inline `style` attributes.
|
|
711
|
+
**/
|
|
712
|
+
nonce?: HTMLDivElement['nonce'];
|
|
713
|
+
/**
|
|
714
|
+
* Add a `title` attribute to the container element.
|
|
715
|
+
**/
|
|
716
|
+
title?: HTMLDivElement['title'];
|
|
717
|
+
/**
|
|
718
|
+
* Add the language tag to the container element.
|
|
719
|
+
**/
|
|
720
|
+
lang?: HTMLDivElement['lang'];
|
|
721
|
+
/**
|
|
722
|
+
* Event callback fired when the next month button is clicked.
|
|
723
|
+
*/
|
|
724
|
+
onNextClick?: MonthChangeEventHandler;
|
|
725
|
+
/**
|
|
726
|
+
* Event callback fired when the previous month button is clicked.
|
|
727
|
+
*/
|
|
728
|
+
onPrevClick?: MonthChangeEventHandler;
|
|
729
|
+
/**
|
|
730
|
+
* Event callback fired when the week number is clicked. Requires
|
|
731
|
+
* `showWeekNumbers` set.
|
|
732
|
+
*/
|
|
733
|
+
onWeekNumberClick?: WeekNumberClickEventHandler;
|
|
734
|
+
/**
|
|
735
|
+
* Event callback fired when the user clicks on a day.
|
|
696
736
|
*/
|
|
697
|
-
formatters?: Partial<Formatters>;
|
|
698
737
|
onDayClick?: DayClickEventHandler;
|
|
738
|
+
/**
|
|
739
|
+
* Event callback fired when the user focuses on a day.
|
|
740
|
+
*/
|
|
699
741
|
onDayFocus?: DayFocusEventHandler;
|
|
742
|
+
/**
|
|
743
|
+
* Event callback fired when the user blurs from a day.
|
|
744
|
+
*/
|
|
700
745
|
onDayBlur?: DayFocusEventHandler;
|
|
746
|
+
/**
|
|
747
|
+
* Event callback fired when the user hovers on a day.
|
|
748
|
+
*/
|
|
701
749
|
onDayMouseEnter?: DayMouseEventHandler;
|
|
750
|
+
/**
|
|
751
|
+
* Event callback fired when the user hovers away from a day.
|
|
752
|
+
*/
|
|
702
753
|
onDayMouseLeave?: DayMouseEventHandler;
|
|
754
|
+
/**
|
|
755
|
+
* Event callback fired when the user presses a key on a day.
|
|
756
|
+
*/
|
|
703
757
|
onDayKeyDown?: DayKeyboardEventHandler;
|
|
758
|
+
/**
|
|
759
|
+
* Event callback fired when the user presses a key on a day.
|
|
760
|
+
*/
|
|
704
761
|
onDayKeyUp?: DayKeyboardEventHandler;
|
|
762
|
+
/**
|
|
763
|
+
* Event callback fired when the user presses a key on a day.
|
|
764
|
+
*/
|
|
705
765
|
onDayKeyPress?: DayKeyboardEventHandler;
|
|
766
|
+
/**
|
|
767
|
+
* Event callback fired when the pointer enters a day.
|
|
768
|
+
*/
|
|
706
769
|
onDayPointerEnter?: DayPointerEventHandler;
|
|
770
|
+
/**
|
|
771
|
+
* Event callback fired when the pointer leaves a day.
|
|
772
|
+
*/
|
|
707
773
|
onDayPointerLeave?: DayPointerEventHandler;
|
|
774
|
+
/**
|
|
775
|
+
* Event callback when a day touch event is canceled.
|
|
776
|
+
*/
|
|
708
777
|
onDayTouchCancel?: DayTouchEventHandler;
|
|
778
|
+
/**
|
|
779
|
+
* Event callback when a day touch event ends.
|
|
780
|
+
*/
|
|
709
781
|
onDayTouchEnd?: DayTouchEventHandler;
|
|
782
|
+
/**
|
|
783
|
+
* Event callback when a day touch event moves.
|
|
784
|
+
*/
|
|
710
785
|
onDayTouchMove?: DayTouchEventHandler;
|
|
786
|
+
/**
|
|
787
|
+
* Event callback when a day touch event starts.
|
|
788
|
+
*/
|
|
711
789
|
onDayTouchStart?: DayTouchEventHandler;
|
|
712
|
-
onNextClick?: MonthChangeEventHandler;
|
|
713
|
-
onPrevClick?: MonthChangeEventHandler;
|
|
714
|
-
onWeekNumberClick?: WeekNumberClickEventHandler;
|
|
715
790
|
}
|
|
716
791
|
/**
|
|
717
792
|
* Map of the components that can be changed using the `components` prop.
|
|
@@ -731,7 +806,7 @@ interface CustomComponents {
|
|
|
731
806
|
* Each `Day` in DayPicker should render one of the following, according to
|
|
732
807
|
* the return value of {@link useDayRender}.
|
|
733
808
|
*
|
|
734
|
-
* - an empty `
|
|
809
|
+
* - an empty `Fragment`, to render if `isHidden` is true
|
|
735
810
|
* - a `button` element, when the day is interactive, e.g. is selectable
|
|
736
811
|
* - a `div` or a `span` element, when the day is not interactive
|
|
737
812
|
*
|
|
@@ -753,6 +828,8 @@ interface CustomComponents {
|
|
|
753
828
|
IconRight?: (props: StyledComponent) => JSX.Element | null;
|
|
754
829
|
/** The arrow left icon (used for the Navigation buttons). */
|
|
755
830
|
IconLeft?: (props: StyledComponent) => JSX.Element | null;
|
|
831
|
+
/** The component wrapping the month grids. */
|
|
832
|
+
Months?: (props: MonthsProps) => JSX.Element | null;
|
|
756
833
|
/** The component for the table rows. */
|
|
757
834
|
Row?: (props: RowProps) => JSX.Element | null;
|
|
758
835
|
/** The component for the week number in the table rows. */
|
|
@@ -823,7 +900,7 @@ interface DayPickerContextValue extends DayPickerBase {
|
|
|
823
900
|
*
|
|
824
901
|
* Access to this context from the {@link useDayPicker} hook.
|
|
825
902
|
*/
|
|
826
|
-
declare const DayPickerContext:
|
|
903
|
+
declare const DayPickerContext: react.Context<DayPickerContextValue | undefined>;
|
|
827
904
|
/** The props for the {@link DayPickerProvider}. */
|
|
828
905
|
interface DayPickerProviderProps {
|
|
829
906
|
/** The initial props from the DayPicker component. */
|
|
@@ -951,7 +1028,7 @@ declare function DayPicker(props: DayPickerDefaultProps | DayPickerSingleProps |
|
|
|
951
1028
|
/** The props for the {@link Button} component. */
|
|
952
1029
|
type ButtonProps = JSX.IntrinsicElements['button'];
|
|
953
1030
|
/** Render a button HTML element applying the reset class name. */
|
|
954
|
-
declare const Button:
|
|
1031
|
+
declare const Button: react.ForwardRefExoticComponent<Omit<react.DetailedHTMLProps<react.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & react.RefAttributes<HTMLButtonElement>>;
|
|
955
1032
|
|
|
956
1033
|
/**
|
|
957
1034
|
* Render a caption with the dropdowns to navigate between months and years.
|
|
@@ -987,7 +1064,7 @@ declare function IconRight(props: StyledComponent): JSX.Element;
|
|
|
987
1064
|
declare function IconLeft(props: StyledComponent): JSX.Element;
|
|
988
1065
|
|
|
989
1066
|
/** The props to attach to the input field when using {@link useInput}. */
|
|
990
|
-
type
|
|
1067
|
+
type InputProps = Pick<InputHTMLAttributes<HTMLInputElement>, 'onBlur' | 'onChange' | 'onFocus' | 'value' | 'placeholder'>;
|
|
991
1068
|
/** The props to attach to the DayPicker component when using {@link useInput}. */
|
|
992
1069
|
type InputDayPickerProps = Pick<DayPickerSingleProps, 'fromDate' | 'toDate' | 'locale' | 'month' | 'onDayClick' | 'onMonthChange' | 'selected' | 'today'>;
|
|
993
1070
|
interface UseInputOptions extends Pick<DayPickerBase, 'locale' | 'fromDate' | 'toDate' | 'fromMonth' | 'toMonth' | 'fromYear' | 'toYear' | 'today'> {
|
|
@@ -1008,7 +1085,7 @@ interface UseInputValue {
|
|
|
1008
1085
|
/** The props to pass to a DayPicker component. */
|
|
1009
1086
|
dayPickerProps: InputDayPickerProps;
|
|
1010
1087
|
/** The props to pass to an input field. */
|
|
1011
|
-
inputProps:
|
|
1088
|
+
inputProps: InputProps;
|
|
1012
1089
|
/** A function to reset to the initial state. */
|
|
1013
1090
|
reset: () => void;
|
|
1014
1091
|
/** A function to set the selected day. */
|
|
@@ -1047,7 +1124,7 @@ day: Date,
|
|
|
1047
1124
|
/** The month where the date is displayed (if not the same as `date`, it means it is an "outside" day). */
|
|
1048
1125
|
displayMonth: Date,
|
|
1049
1126
|
/** A ref to the button element that will be target of focus when rendered (if required). */
|
|
1050
|
-
buttonRef:
|
|
1127
|
+
buttonRef: RefObject<HTMLButtonElement>): DayRender;
|
|
1051
1128
|
|
|
1052
1129
|
/**
|
|
1053
1130
|
* Return the active modifiers for the specified day.
|
|
@@ -1094,11 +1171,12 @@ type FocusContextValue = {
|
|
|
1094
1171
|
*
|
|
1095
1172
|
* Access this context from the {@link useFocusContext} hook.
|
|
1096
1173
|
*/
|
|
1097
|
-
declare const FocusContext:
|
|
1098
|
-
|
|
1099
|
-
declare function FocusProvider(props: {
|
|
1174
|
+
declare const FocusContext: react.Context<FocusContextValue | undefined>;
|
|
1175
|
+
type FocusProviderProps = {
|
|
1100
1176
|
children: ReactNode;
|
|
1101
|
-
}
|
|
1177
|
+
};
|
|
1178
|
+
/** The provider for the {@link FocusContext}. */
|
|
1179
|
+
declare function FocusProvider(props: FocusProviderProps): JSX.Element;
|
|
1102
1180
|
/**
|
|
1103
1181
|
* Hook to access the {@link FocusContextValue}. Use this hook to handle the
|
|
1104
1182
|
* focus state of the elements.
|
|
@@ -1128,7 +1206,7 @@ interface NavigationContextValue {
|
|
|
1128
1206
|
* The Navigation context shares details and methods to navigate the months in DayPicker.
|
|
1129
1207
|
* Access this context from the {@link useNavigation} hook.
|
|
1130
1208
|
*/
|
|
1131
|
-
declare const NavigationContext:
|
|
1209
|
+
declare const NavigationContext: react.Context<NavigationContextValue | undefined>;
|
|
1132
1210
|
/** Provides the values for the {@link NavigationContext}. */
|
|
1133
1211
|
declare function NavigationProvider(props: {
|
|
1134
1212
|
children?: ReactNode;
|
|
@@ -1142,9 +1220,9 @@ declare function NavigationProvider(props: {
|
|
|
1142
1220
|
declare function useNavigation(): NavigationContextValue;
|
|
1143
1221
|
|
|
1144
1222
|
/** The props of {@link RootProvider}. */
|
|
1145
|
-
|
|
1146
|
-
children
|
|
1147
|
-
}
|
|
1223
|
+
interface RootContext {
|
|
1224
|
+
children?: ReactNode;
|
|
1225
|
+
}
|
|
1148
1226
|
/** Provide the value for all the context providers. */
|
|
1149
1227
|
declare function RootProvider(props: RootContext): JSX.Element;
|
|
1150
1228
|
|
|
@@ -1165,17 +1243,18 @@ interface SelectMultipleContextValue {
|
|
|
1165
1243
|
*
|
|
1166
1244
|
* Access this context from the {@link useSelectMultiple} hook.
|
|
1167
1245
|
*/
|
|
1168
|
-
declare const SelectMultipleContext:
|
|
1246
|
+
declare const SelectMultipleContext: react.Context<SelectMultipleContextValue | undefined>;
|
|
1169
1247
|
type SelectMultipleProviderProps = {
|
|
1170
1248
|
initialProps: DayPickerBase;
|
|
1171
|
-
children
|
|
1249
|
+
children?: ReactNode;
|
|
1172
1250
|
};
|
|
1173
1251
|
/** Provides the values for the {@link SelectMultipleContext}. */
|
|
1174
1252
|
declare function SelectMultipleProvider(props: SelectMultipleProviderProps): JSX.Element;
|
|
1175
|
-
|
|
1253
|
+
/** @private */
|
|
1254
|
+
interface SelectMultipleProviderInternalProps {
|
|
1176
1255
|
initialProps: DayPickerMultipleProps;
|
|
1177
|
-
children
|
|
1178
|
-
}
|
|
1256
|
+
children?: ReactNode;
|
|
1257
|
+
}
|
|
1179
1258
|
declare function SelectMultipleProviderInternal({ initialProps, children }: SelectMultipleProviderInternalProps): JSX.Element;
|
|
1180
1259
|
/**
|
|
1181
1260
|
* Hook to access the {@link SelectMultipleContextValue}.
|
|
@@ -1201,17 +1280,18 @@ interface SelectRangeContextValue {
|
|
|
1201
1280
|
*
|
|
1202
1281
|
* Access this context from the {@link useSelectRange} hook.
|
|
1203
1282
|
*/
|
|
1204
|
-
declare const SelectRangeContext:
|
|
1205
|
-
|
|
1283
|
+
declare const SelectRangeContext: react.Context<SelectRangeContextValue | undefined>;
|
|
1284
|
+
interface SelectRangeProviderProps {
|
|
1206
1285
|
initialProps: DayPickerBase;
|
|
1207
|
-
children
|
|
1208
|
-
}
|
|
1286
|
+
children?: ReactNode;
|
|
1287
|
+
}
|
|
1209
1288
|
/** Provides the values for the {@link SelectRangeProvider}. */
|
|
1210
1289
|
declare function SelectRangeProvider(props: SelectRangeProviderProps): JSX.Element;
|
|
1211
|
-
|
|
1290
|
+
/** @private */
|
|
1291
|
+
interface SelectRangeProviderInternalProps {
|
|
1212
1292
|
initialProps: DayPickerRangeProps;
|
|
1213
|
-
children
|
|
1214
|
-
}
|
|
1293
|
+
children?: ReactNode;
|
|
1294
|
+
}
|
|
1215
1295
|
declare function SelectRangeProviderInternal({ initialProps, children }: SelectRangeProviderInternalProps): JSX.Element;
|
|
1216
1296
|
/**
|
|
1217
1297
|
* Hook to access the {@link SelectRangeContextValue}.
|
|
@@ -1233,17 +1313,18 @@ interface SelectSingleContextValue {
|
|
|
1233
1313
|
*
|
|
1234
1314
|
* Access this context from the {@link useSelectSingle} hook.
|
|
1235
1315
|
*/
|
|
1236
|
-
declare const SelectSingleContext:
|
|
1237
|
-
|
|
1316
|
+
declare const SelectSingleContext: react.Context<SelectSingleContextValue | undefined>;
|
|
1317
|
+
interface SelectSingleProviderProps {
|
|
1238
1318
|
initialProps: DayPickerBase;
|
|
1239
|
-
children
|
|
1240
|
-
}
|
|
1319
|
+
children?: ReactNode;
|
|
1320
|
+
}
|
|
1241
1321
|
/** Provides the values for the {@link SelectSingleProvider}. */
|
|
1242
1322
|
declare function SelectSingleProvider(props: SelectSingleProviderProps): JSX.Element;
|
|
1243
|
-
|
|
1323
|
+
/** @private */
|
|
1324
|
+
interface SelectSingleProviderInternal {
|
|
1244
1325
|
initialProps: DayPickerSingleProps;
|
|
1245
|
-
children
|
|
1246
|
-
}
|
|
1326
|
+
children?: ReactNode;
|
|
1327
|
+
}
|
|
1247
1328
|
declare function SelectSingleProviderInternal({ initialProps, children }: SelectSingleProviderInternal): JSX.Element;
|
|
1248
1329
|
/**
|
|
1249
1330
|
* Hook to access the {@link SelectSingleContextValue}.
|
|
@@ -1279,4 +1360,4 @@ declare function isMatch(day: Date, matchers: Matcher[]): boolean;
|
|
|
1279
1360
|
*/
|
|
1280
1361
|
declare function addToRange(day: Date, range?: DateRange): DateRange | undefined;
|
|
1281
1362
|
|
|
1282
|
-
export { ActiveModifiers, Button, ButtonProps, Caption, CaptionDropdowns, CaptionLabel, CaptionLabelProps, CaptionLayout, CaptionNavigation, CaptionProps, ClassNames, CustomComponents, CustomModifiers, DateAfter, DateBefore, DateFormatter, DateInterval, DateRange, Day, DayClickEventHandler, DayContent, DayContentProps, DayFocusEventHandler, DayKeyboardEventHandler, DayLabel, DayModifiers, DayMouseEventHandler, DayOfWeek, DayPicker, DayPickerBase, DayPickerContext, DayPickerContextValue, DayPickerDefaultProps, DayPickerMultipleProps, DayPickerProps, DayPickerProvider, DayPickerProviderProps, DayPickerRangeProps, DayPickerSingleProps, DayPointerEventHandler, DayProps, DayRender, DaySelectionMode, DayTouchEventHandler, Dropdown, DropdownProps, FocusContext, FocusContextValue, FocusProvider, Footer, FooterProps, Formatters, Head, HeadRow, IconDropdown, IconLeft, IconRight, InputDayPickerProps,
|
|
1363
|
+
export { ActiveModifiers, Button, ButtonProps, Caption, CaptionDropdowns, CaptionLabel, CaptionLabelProps, CaptionLayout, CaptionNavigation, CaptionProps, ClassNames, CustomComponents, CustomModifiers, DateAfter, DateBefore, DateFormatter, DateInterval, DateRange, Day, DayClickEventHandler, DayContent, DayContentProps, DayFocusEventHandler, DayKeyboardEventHandler, DayLabel, DayModifiers, DayMouseEventHandler, DayOfWeek, DayPicker, DayPickerBase, DayPickerContext, DayPickerContextValue, DayPickerDefaultProps, DayPickerMultipleProps, DayPickerProps, DayPickerProvider, DayPickerProviderProps, DayPickerRangeProps, DayPickerSingleProps, DayPointerEventHandler, DayProps, DayRender, DaySelectionMode, DayTouchEventHandler, Dropdown, DropdownProps, FocusContext, FocusContextValue, FocusProvider, FocusProviderProps, Footer, FooterProps, Formatters, Head, HeadRow, IconDropdown, IconLeft, IconRight, InputDayPickerProps, InputProps, InternalModifier, InternalModifiers, InternalModifiersElement, Labels, Matcher, Modifier, Modifiers, ModifiersClassNames, ModifiersStyles, MonthChangeEventHandler, Months, MonthsProps, NavButtonLabel, NavigationContext, NavigationContextValue, NavigationProvider, RootContext, RootProvider, Row, RowProps, SelectMultipleContext, SelectMultipleContextValue, SelectMultipleEventHandler, SelectMultipleModifiers, SelectMultipleProvider, SelectMultipleProviderInternal, SelectMultipleProviderInternalProps, SelectMultipleProviderProps, SelectRangeContext, SelectRangeContextValue, SelectRangeEventHandler, SelectRangeModifiers, SelectRangeProvider, SelectRangeProviderInternal, SelectRangeProviderInternalProps, SelectRangeProviderProps, SelectSingleContext, SelectSingleContextValue, SelectSingleEventHandler, SelectSingleProvider, SelectSingleProviderInternal, SelectSingleProviderProps, StyledComponent, StyledElement, Styles, UseInputOptions, UseInputValue, WeekNumber, WeekNumberClickEventHandler, WeekNumberFormatter, WeekNumberLabel, WeekNumberProps, WeekdayLabel, addToRange, isDateAfterType, isDateBeforeType, isDateInterval, isDateRange, isDayOfWeekType, isDayPickerDefault, isDayPickerMultiple, isDayPickerRange, isDayPickerSingle, isMatch, useActiveModifiers, useDayPicker, useDayRender, useFocusContext, useInput, useNavigation, useSelectMultiple, useSelectRange, useSelectSingle };
|