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.
Files changed (90) hide show
  1. package/README.md +3 -3
  2. package/dist/index.d.ts +152 -71
  3. package/dist/index.esm.js +1481 -101
  4. package/dist/index.esm.js.map +1 -1
  5. package/dist/index.js +1505 -142
  6. package/dist/index.js.map +1 -1
  7. package/dist/index.min.js +10 -1
  8. package/dist/index.min.js.map +1 -1
  9. package/dist/style.css +8 -7
  10. package/dist/style.css.map +1 -1
  11. package/dist/style.module.css +8 -7
  12. package/package.json +27 -27
  13. package/src/DayPicker.tsx +0 -2
  14. package/src/components/Button/Button.test.tsx +0 -2
  15. package/src/components/Button/Button.tsx +1 -1
  16. package/src/components/Caption/Caption.test.tsx +0 -2
  17. package/src/components/Caption/Caption.tsx +0 -2
  18. package/src/components/CaptionDropdowns/CaptionDropdowns.test.tsx +0 -2
  19. package/src/components/CaptionDropdowns/CaptionDropdowns.tsx +0 -2
  20. package/src/components/CaptionLabel/CaptionLabel.test.tsx +0 -2
  21. package/src/components/CaptionLabel/CaptionLabel.tsx +0 -2
  22. package/src/components/CaptionNavigation/CaptionNavigation.test.tsx +0 -2
  23. package/src/components/CaptionNavigation/CaptionNavigation.tsx +3 -3
  24. package/src/components/Day/Day.test.tsx +0 -2
  25. package/src/components/Day/Day.tsx +1 -1
  26. package/src/components/DayContent/DayContent.test.tsx +0 -2
  27. package/src/components/DayContent/DayContent.tsx +0 -2
  28. package/src/components/Dropdown/Dropdown.test.tsx +0 -2
  29. package/src/components/Dropdown/Dropdown.tsx +10 -5
  30. package/src/components/Footer/Footer.test.tsx +0 -2
  31. package/src/components/Footer/Footer.tsx +0 -2
  32. package/src/components/Head/Head.test.tsx +0 -2
  33. package/src/components/Head/Head.tsx +0 -2
  34. package/src/components/HeadRow/HeadRow.test.tsx +0 -2
  35. package/src/components/HeadRow/HeadRow.tsx +0 -2
  36. package/src/components/IconDropdown/IconDropdown.test.tsx +0 -2
  37. package/src/components/IconDropdown/IconDropdown.tsx +0 -2
  38. package/src/components/IconLeft/IconLeft.test.tsx +0 -2
  39. package/src/components/IconLeft/IconLeft.tsx +0 -2
  40. package/src/components/IconRight/IconRight.test.tsx +0 -2
  41. package/src/components/IconRight/IconRight.tsx +0 -2
  42. package/src/components/Month/Month.test.tsx +0 -2
  43. package/src/components/Month/Month.tsx +0 -2
  44. package/src/components/Months/Months.test.tsx +27 -0
  45. package/src/components/Months/Months.tsx +19 -0
  46. package/src/components/Months/index.ts +1 -0
  47. package/src/components/MonthsDropdown/MonthsDropdown.test.tsx +0 -2
  48. package/src/components/MonthsDropdown/MonthsDropdown.tsx +2 -2
  49. package/src/components/Navigation/Navigation.test.tsx +0 -2
  50. package/src/components/Navigation/Navigation.tsx +3 -3
  51. package/src/components/Root/Root.test.tsx +58 -15
  52. package/src/components/Root/Root.tsx +9 -6
  53. package/src/components/Row/Row.test.tsx +0 -2
  54. package/src/components/Row/Row.tsx +0 -2
  55. package/src/components/Table/Table.test.tsx +0 -2
  56. package/src/components/Table/Table.tsx +0 -2
  57. package/src/components/WeekNumber/WeekNumber.test.tsx +1 -3
  58. package/src/components/WeekNumber/WeekNumber.tsx +2 -2
  59. package/src/components/YearsDropdown/YearsDropdown.test.tsx +0 -2
  60. package/src/components/YearsDropdown/YearsDropdown.tsx +2 -2
  61. package/src/contexts/DayPicker/DayPickerContext.tsx +2 -1
  62. package/src/contexts/DayPicker/formatters/formatDay.ts +1 -2
  63. package/src/contexts/DayPicker/formatters/formatMonthCaption.ts +1 -2
  64. package/src/contexts/DayPicker/formatters/formatWeekdayName.ts +1 -2
  65. package/src/contexts/DayPicker/formatters/formatYearCaption.ts +4 -2
  66. package/src/contexts/Focus/FocusContext.tsx +4 -2
  67. package/src/contexts/Modifiers/ModifiersContext.tsx +2 -4
  68. package/src/contexts/Navigation/NavigationContext.tsx +1 -1
  69. package/src/contexts/RootProvider.tsx +4 -5
  70. package/src/contexts/SelectMultiple/SelectMultipleContext.test.ts +6 -4
  71. package/src/contexts/SelectMultiple/SelectMultipleContext.tsx +6 -5
  72. package/src/contexts/SelectRange/SelectRangeContext.test.ts +3 -1
  73. package/src/contexts/SelectRange/SelectRangeContext.tsx +8 -7
  74. package/src/contexts/SelectSingle/SelectSingleContext.test.ts +3 -3
  75. package/src/contexts/SelectSingle/SelectSingleContext.tsx +8 -7
  76. package/src/hooks/useControlledValue/useControlledValue.ts +2 -2
  77. package/src/hooks/useDayRender/useDayRender.tsx +2 -2
  78. package/src/hooks/useDayRender/utils/getDayStyle.ts +4 -2
  79. package/src/hooks/useId/useId.ts +5 -7
  80. package/src/hooks/useId/useIsomorphicLayoutEffect.ts +31 -0
  81. package/src/hooks/useInput/useInput.ts +13 -8
  82. package/src/index.ts +1 -0
  83. package/src/style.css +8 -7
  84. package/src/types/DayPickerBase.ts +85 -11
  85. package/src/types/EventHandlers.ts +18 -10
  86. package/src/types/Formatters.ts +11 -5
  87. package/src/types/Labels.ts +16 -5
  88. package/src/types/Modifiers.ts +4 -2
  89. package/src/types/Styles.ts +5 -5
  90. 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 React from 'react';
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] = React.useState<Date>();
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 { Locale as Locale$1 } from 'date-fns';
2
- import React$1, { ReactNode, HTMLProps } from 'react';
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, React.CSSProperties> & Partial<Record<InternalModifier, React.CSSProperties>>;
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?: React$1.ReactNode;
203
- children?: React$1.SelectHTMLAttributes<HTMLSelectElement>['children'];
203
+ caption?: ReactNode;
204
+ children?: SelectHTMLAttributes<HTMLSelectElement>['children'];
204
205
  className?: string;
205
206
  ['aria-label']?: string;
206
- style?: React$1.CSSProperties;
207
+ style?: CSSProperties;
207
208
  /** The selected value. */
208
209
  value?: string | number;
209
- onChange?: React$1.ChangeEventHandler<HTMLSelectElement>;
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: React.MouseEvent) => void;
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: React.FocusEvent | React.KeyboardEvent) => void;
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: React.KeyboardEvent) => void;
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: React.MouseEvent) => void;
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: React.PointerEvent) => void;
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: React.MouseEvent) => void;
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: React.MouseEvent) => void;
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: React.MouseEvent) => void;
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: React.MouseEvent) => void;
308
+ e: MouseEvent) => void;
299
309
  /** The event handler when a day gets a touch event. */
300
- type DayTouchEventHandler = (day: Date, activeModifiers: ActiveModifiers, e: React.TouchEvent) => void;
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
- }) => React$1.ReactNode;
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
- }) => React$1.ReactNode;
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$1;
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$1;
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$1;
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$1;
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 | React$1.CSSProperties> = {
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<React$1.CSSProperties>, InternalModifiersElement>>;
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?: React$1.CSSProperties;
453
- children?: React$1.ReactNode;
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?: React.CSSProperties;
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?: React.ReactNode;
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$1;
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?: string;
707
+ dir?: HTMLDivElement['dir'];
693
708
  /**
694
- * A map of formatters. Use the formatters to override the default formatting
695
- * functions.
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 `React.Fragment`, to render if `isHidden` is true
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: React$1.Context<DayPickerContextValue | undefined>;
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: React$1.ForwardRefExoticComponent<Omit<React$1.DetailedHTMLProps<React$1.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & React$1.RefAttributes<HTMLButtonElement>>;
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 InputHTMLAttributes = Pick<React$1.InputHTMLAttributes<HTMLInputElement>, 'onBlur' | 'onChange' | 'onFocus' | 'value' | 'placeholder'>;
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: InputHTMLAttributes;
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: React$1.RefObject<HTMLButtonElement>): DayRender;
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: React$1.Context<FocusContextValue | undefined>;
1098
- /** The provider for the {@link FocusContext}. */
1099
- declare function FocusProvider(props: {
1174
+ declare const FocusContext: react.Context<FocusContextValue | undefined>;
1175
+ type FocusProviderProps = {
1100
1176
  children: ReactNode;
1101
- }): JSX.Element;
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: React$1.Context<NavigationContextValue | undefined>;
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
- type RootContext = DayPickerBase & {
1146
- children: React$1.ReactNode;
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: React$1.Context<SelectMultipleContextValue | undefined>;
1246
+ declare const SelectMultipleContext: react.Context<SelectMultipleContextValue | undefined>;
1169
1247
  type SelectMultipleProviderProps = {
1170
1248
  initialProps: DayPickerBase;
1171
- children: ReactNode;
1249
+ children?: ReactNode;
1172
1250
  };
1173
1251
  /** Provides the values for the {@link SelectMultipleContext}. */
1174
1252
  declare function SelectMultipleProvider(props: SelectMultipleProviderProps): JSX.Element;
1175
- type SelectMultipleProviderInternalProps = {
1253
+ /** @private */
1254
+ interface SelectMultipleProviderInternalProps {
1176
1255
  initialProps: DayPickerMultipleProps;
1177
- children: ReactNode;
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: React$1.Context<SelectRangeContextValue | undefined>;
1205
- type SelectRangeProviderProps = {
1283
+ declare const SelectRangeContext: react.Context<SelectRangeContextValue | undefined>;
1284
+ interface SelectRangeProviderProps {
1206
1285
  initialProps: DayPickerBase;
1207
- children: ReactNode;
1208
- };
1286
+ children?: ReactNode;
1287
+ }
1209
1288
  /** Provides the values for the {@link SelectRangeProvider}. */
1210
1289
  declare function SelectRangeProvider(props: SelectRangeProviderProps): JSX.Element;
1211
- type SelectRangeProviderInternalProps = {
1290
+ /** @private */
1291
+ interface SelectRangeProviderInternalProps {
1212
1292
  initialProps: DayPickerRangeProps;
1213
- children: ReactNode;
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: React$1.Context<SelectSingleContextValue | undefined>;
1237
- type SelectSingleProviderProps = {
1316
+ declare const SelectSingleContext: react.Context<SelectSingleContextValue | undefined>;
1317
+ interface SelectSingleProviderProps {
1238
1318
  initialProps: DayPickerBase;
1239
- children: React$1.ReactNode;
1240
- };
1319
+ children?: ReactNode;
1320
+ }
1241
1321
  /** Provides the values for the {@link SelectSingleProvider}. */
1242
1322
  declare function SelectSingleProvider(props: SelectSingleProviderProps): JSX.Element;
1243
- type SelectSingleProviderInternal = {
1323
+ /** @private */
1324
+ interface SelectSingleProviderInternal {
1244
1325
  initialProps: DayPickerSingleProps;
1245
- children: React$1.ReactNode;
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, InputHTMLAttributes, InternalModifier, InternalModifiers, InternalModifiersElement, Labels, Matcher, Modifier, Modifiers, ModifiersClassNames, ModifiersStyles, MonthChangeEventHandler, NavButtonLabel, NavigationContext, NavigationContextValue, NavigationProvider, RootContext, RootProvider, Row, RowProps, SelectMultipleContext, SelectMultipleContextValue, SelectMultipleEventHandler, SelectMultipleModifiers, SelectMultipleProvider, SelectMultipleProviderInternal, SelectMultipleProviderProps, SelectRangeContext, SelectRangeContextValue, SelectRangeEventHandler, SelectRangeModifiers, SelectRangeProvider, SelectRangeProviderInternal, SelectSingleContext, SelectSingleContextValue, SelectSingleEventHandler, SelectSingleProvider, SelectSingleProviderInternal, 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 };
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 };