react-day-picker 8.2.1 → 8.3.0

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 (199) hide show
  1. package/dist/index.d.ts +1176 -40
  2. package/dist/index.esm.d.ts +1176 -0
  3. package/dist/index.esm.js +1473 -1496
  4. package/dist/index.esm.js.map +1 -1
  5. package/dist/index.js +1195 -1214
  6. package/dist/index.js.map +1 -1
  7. package/dist/react-day-picker.min.js +1 -1
  8. package/dist/style.css +9 -11
  9. package/dist/style.module.css +9 -11
  10. package/package.json +2 -2
  11. package/src/components/Caption/Caption.tsx +8 -8
  12. package/src/components/CaptionDropdowns/CaptionDropdowns.tsx +6 -4
  13. package/src/components/CaptionNavigation/CaptionNavigation.tsx +6 -8
  14. package/src/components/Dropdown/Dropdown.tsx +5 -5
  15. package/src/components/Head/Head.tsx +6 -4
  16. package/src/components/HeadRow/HeadRow.tsx +2 -1
  17. package/src/components/HeadRow/utils/getWeekdays.test.ts +10 -0
  18. package/src/components/HeadRow/utils/getWeekdays.ts +9 -3
  19. package/src/components/Month/Month.test.tsx +11 -0
  20. package/src/components/Month/Month.tsx +12 -6
  21. package/src/components/MonthsDropdown/MonthsDropdown.tsx +3 -6
  22. package/src/components/Navigation/Navigation.tsx +5 -15
  23. package/src/components/Row/Row.tsx +8 -8
  24. package/src/components/Table/Table.tsx +10 -12
  25. package/src/components/Table/utils/daysToMonthWeeks.ts +15 -3
  26. package/src/components/Table/utils/getMonthWeeks.test.ts +33 -1
  27. package/src/components/Table/utils/getMonthWeeks.ts +2 -3
  28. package/src/components/YearsDropdown/YearsDropdown.tsx +3 -6
  29. package/src/contexts/DayPicker/{useDayPicker.test.ts → DayPickerContext.test.ts} +13 -29
  30. package/src/contexts/DayPicker/DayPickerContext.tsx +41 -53
  31. package/src/contexts/DayPicker/defaultContextValues.ts +85 -0
  32. package/src/contexts/DayPicker/index.ts +0 -1
  33. package/src/contexts/Focus/{useFocusContext.test.ts → FocusContext.test.ts} +0 -0
  34. package/src/contexts/Focus/FocusContext.tsx +19 -6
  35. package/src/contexts/Focus/index.ts +0 -1
  36. package/src/contexts/Focus/utils/getInitialFocusTarget.test.tsx +37 -8
  37. package/src/contexts/Focus/utils/getInitialFocusTarget.tsx +0 -1
  38. package/src/contexts/Focus/utils/getNextFocus.test.tsx +75 -50
  39. package/src/contexts/Focus/utils/getNextFocus.tsx +54 -19
  40. package/src/contexts/Modifiers/{useModifiers.test.ts → ModifiersContext.test.ts} +0 -0
  41. package/src/contexts/Modifiers/ModifiersContext.tsx +16 -1
  42. package/src/contexts/Modifiers/index.ts +1 -1
  43. package/src/contexts/Modifiers/utils/getInternalModifiers.test.ts +3 -2
  44. package/src/contexts/Navigation/{useNavigation.test.ts → NavigationContext.test.ts} +1 -2
  45. package/src/contexts/Navigation/NavigationContext.tsx +15 -1
  46. package/src/contexts/Navigation/index.ts +0 -1
  47. package/src/contexts/SelectMultiple/{useSelectMultiple.test.ts → SelectMultipleContext.test.ts} +4 -2
  48. package/src/contexts/SelectMultiple/SelectMultipleContext.tsx +16 -1
  49. package/src/contexts/SelectMultiple/index.ts +0 -1
  50. package/src/contexts/SelectRange/{useSelectRange.test.ts → SelectRangeContext.test.ts} +4 -21
  51. package/src/contexts/SelectRange/SelectRangeContext.tsx +51 -36
  52. package/src/contexts/SelectRange/index.ts +0 -1
  53. package/src/contexts/SelectSingle/{useSelectSingle.test.ts → SelectSingleContext.test.ts} +1 -1
  54. package/src/contexts/SelectSingle/SelectSingleContext.tsx +16 -1
  55. package/src/contexts/SelectSingle/index.ts +0 -1
  56. package/src/hooks/useDayRender/useDayRender.tsx +5 -4
  57. package/src/style.css +9 -11
  58. package/src/types/DayPickerBase.ts +33 -6
  59. package/src/types/EventHandlers.ts +9 -11
  60. package/dist/DayPicker.d.ts +0 -93
  61. package/dist/components/Button/Button.d.ts +0 -7
  62. package/dist/components/Button/index.d.ts +0 -1
  63. package/dist/components/Caption/Caption.d.ts +0 -19
  64. package/dist/components/Caption/index.d.ts +0 -1
  65. package/dist/components/CaptionDropdowns/CaptionDropdowns.d.ts +0 -5
  66. package/dist/components/CaptionDropdowns/index.d.ts +0 -1
  67. package/dist/components/CaptionLabel/CaptionLabel.d.ts +0 -9
  68. package/dist/components/CaptionLabel/index.d.ts +0 -1
  69. package/dist/components/CaptionNavigation/CaptionNavigation.d.ts +0 -5
  70. package/dist/components/CaptionNavigation/index.d.ts +0 -1
  71. package/dist/components/Day/Day.d.ts +0 -12
  72. package/dist/components/Day/index.d.ts +0 -1
  73. package/dist/components/DayContent/DayContent.d.ts +0 -12
  74. package/dist/components/DayContent/index.d.ts +0 -1
  75. package/dist/components/Dropdown/Dropdown.d.ts +0 -20
  76. package/dist/components/Dropdown/index.d.ts +0 -1
  77. package/dist/components/Footer/Footer.d.ts +0 -2
  78. package/dist/components/Footer/index.d.ts +0 -1
  79. package/dist/components/Head/Head.d.ts +0 -2
  80. package/dist/components/Head/index.d.ts +0 -1
  81. package/dist/components/HeadRow/HeadRow.d.ts +0 -4
  82. package/dist/components/HeadRow/index.d.ts +0 -1
  83. package/dist/components/HeadRow/utils/getWeekdays.d.ts +0 -8
  84. package/dist/components/HeadRow/utils/index.d.ts +0 -1
  85. package/dist/components/IconDropdown/IconDropdown.d.ts +0 -5
  86. package/dist/components/IconDropdown/index.d.ts +0 -1
  87. package/dist/components/IconLeft/IconLeft.d.ts +0 -5
  88. package/dist/components/IconLeft/index.d.ts +0 -1
  89. package/dist/components/IconRight/IconRight.d.ts +0 -5
  90. package/dist/components/IconRight/index.d.ts +0 -1
  91. package/dist/components/Month/Month.d.ts +0 -7
  92. package/dist/components/Month/index.d.ts +0 -1
  93. package/dist/components/MonthsDropdown/MonthsDropdown.d.ts +0 -9
  94. package/dist/components/MonthsDropdown/index.d.ts +0 -1
  95. package/dist/components/Navigation/Navigation.d.ts +0 -20
  96. package/dist/components/Navigation/index.d.ts +0 -1
  97. package/dist/components/Root/Root.d.ts +0 -2
  98. package/dist/components/Root/index.d.ts +0 -1
  99. package/dist/components/Row/Row.d.ts +0 -13
  100. package/dist/components/Row/index.d.ts +0 -1
  101. package/dist/components/Table/Table.d.ts +0 -9
  102. package/dist/components/Table/index.d.ts +0 -1
  103. package/dist/components/Table/utils/daysToMonthWeeks.d.ts +0 -8
  104. package/dist/components/Table/utils/getMonthWeeks.d.ts +0 -21
  105. package/dist/components/WeekNumber/WeekNumber.d.ts +0 -14
  106. package/dist/components/WeekNumber/index.d.ts +0 -1
  107. package/dist/components/YearsDropdown/YearsDropdown.d.ts +0 -15
  108. package/dist/components/YearsDropdown/index.d.ts +0 -1
  109. package/dist/contexts/DayPicker/DayPickerContext.d.ts +0 -50
  110. package/dist/contexts/DayPicker/defaultClassNames.d.ts +0 -5
  111. package/dist/contexts/DayPicker/defaultContextValue.d.ts +0 -6
  112. package/dist/contexts/DayPicker/formatters/formatCaption.d.ts +0 -7
  113. package/dist/contexts/DayPicker/formatters/formatDay.d.ts +0 -7
  114. package/dist/contexts/DayPicker/formatters/formatMonthCaption.d.ts +0 -7
  115. package/dist/contexts/DayPicker/formatters/formatWeekNumber.d.ts +0 -4
  116. package/dist/contexts/DayPicker/formatters/formatWeekdayName.d.ts +0 -7
  117. package/dist/contexts/DayPicker/formatters/formatYearCaption.d.ts +0 -6
  118. package/dist/contexts/DayPicker/formatters/index.d.ts +0 -6
  119. package/dist/contexts/DayPicker/index.d.ts +0 -2
  120. package/dist/contexts/DayPicker/labels/index.d.ts +0 -7
  121. package/dist/contexts/DayPicker/labels/labelDay.d.ts +0 -5
  122. package/dist/contexts/DayPicker/labels/labelMonthDropdown.d.ts +0 -4
  123. package/dist/contexts/DayPicker/labels/labelNext.d.ts +0 -5
  124. package/dist/contexts/DayPicker/labels/labelPrevious.d.ts +0 -5
  125. package/dist/contexts/DayPicker/labels/labelWeekNumber.d.ts +0 -5
  126. package/dist/contexts/DayPicker/labels/labelWeekday.d.ts +0 -5
  127. package/dist/contexts/DayPicker/labels/labelYearDropdown.d.ts +0 -4
  128. package/dist/contexts/DayPicker/useDayPicker.d.ts +0 -8
  129. package/dist/contexts/DayPicker/utils/index.d.ts +0 -1
  130. package/dist/contexts/DayPicker/utils/parseFromToProps.d.ts +0 -6
  131. package/dist/contexts/Focus/FocusContext.d.ts +0 -36
  132. package/dist/contexts/Focus/index.d.ts +0 -2
  133. package/dist/contexts/Focus/useFocusContext.d.ts +0 -8
  134. package/dist/contexts/Focus/utils/getInitialFocusTarget.d.ts +0 -3
  135. package/dist/contexts/Focus/utils/getNextFocus.d.ts +0 -9
  136. package/dist/contexts/Modifiers/ModifiersContext.d.ts +0 -9
  137. package/dist/contexts/Modifiers/index.d.ts +0 -2
  138. package/dist/contexts/Modifiers/useModifiers.d.ts +0 -9
  139. package/dist/contexts/Modifiers/utils/getActiveModifiers.d.ts +0 -7
  140. package/dist/contexts/Modifiers/utils/getCustomModifiers.d.ts +0 -3
  141. package/dist/contexts/Modifiers/utils/getInternalModifiers.d.ts +0 -6
  142. package/dist/contexts/Modifiers/utils/isDateInRange.d.ts +0 -3
  143. package/dist/contexts/Modifiers/utils/isMatch.d.ts +0 -19
  144. package/dist/contexts/Modifiers/utils/matcherToArray.d.ts +0 -3
  145. package/dist/contexts/Navigation/NavigationContext.d.ts +0 -27
  146. package/dist/contexts/Navigation/index.d.ts +0 -2
  147. package/dist/contexts/Navigation/useNavigation.d.ts +0 -8
  148. package/dist/contexts/Navigation/useNavigationState.d.ts +0 -7
  149. package/dist/contexts/Navigation/utils/getDisplayMonths.d.ts +0 -8
  150. package/dist/contexts/Navigation/utils/getInitialMonth.d.ts +0 -3
  151. package/dist/contexts/Navigation/utils/getNextMonth.d.ts +0 -18
  152. package/dist/contexts/Navigation/utils/getPreviousMonth.d.ts +0 -19
  153. package/dist/contexts/RootProvider.d.ts +0 -8
  154. package/dist/contexts/SelectMultiple/SelectMultipleContext.d.ts +0 -35
  155. package/dist/contexts/SelectMultiple/index.d.ts +0 -2
  156. package/dist/contexts/SelectMultiple/useSelectMultiple.d.ts +0 -7
  157. package/dist/contexts/SelectRange/SelectRangeContext.d.ts +0 -36
  158. package/dist/contexts/SelectRange/index.d.ts +0 -2
  159. package/dist/contexts/SelectRange/useSelectRange.d.ts +0 -7
  160. package/dist/contexts/SelectRange/utils/addToRange.d.ts +0 -8
  161. package/dist/contexts/SelectSingle/SelectSingleContext.d.ts +0 -30
  162. package/dist/contexts/SelectSingle/index.d.ts +0 -2
  163. package/dist/contexts/SelectSingle/useSelectSingle.d.ts +0 -7
  164. package/dist/hooks/useActiveModifiers/index.d.ts +0 -1
  165. package/dist/hooks/useActiveModifiers/useActiveModifiers.d.ts +0 -15
  166. package/dist/hooks/useControlledValue/index.d.ts +0 -1
  167. package/dist/hooks/useControlledValue/useControlledValue.d.ts +0 -12
  168. package/dist/hooks/useDayEventHandlers/index.d.ts +0 -1
  169. package/dist/hooks/useDayEventHandlers/useDayEventHandlers.d.ts +0 -26
  170. package/dist/hooks/useDayRender/index.d.ts +0 -1
  171. package/dist/hooks/useDayRender/useDayRender.d.ts +0 -32
  172. package/dist/hooks/useDayRender/utils/getDayClassNames.d.ts +0 -10
  173. package/dist/hooks/useDayRender/utils/getDayStyle.d.ts +0 -5
  174. package/dist/hooks/useId/index.d.ts +0 -1
  175. package/dist/hooks/useId/useId.d.ts +0 -19
  176. package/dist/hooks/useInput/index.d.ts +0 -1
  177. package/dist/hooks/useInput/useInput.d.ts +0 -28
  178. package/dist/hooks/useInput/utils/isValidDate.d.ts +0 -2
  179. package/dist/hooks/useSelectedDays/index.d.ts +0 -1
  180. package/dist/hooks/useSelectedDays/useSelectedDays.d.ts +0 -10
  181. package/dist/types/DayPickerBase.d.ts +0 -255
  182. package/dist/types/DayPickerDefault.d.ts +0 -8
  183. package/dist/types/DayPickerMultiple.d.ts +0 -18
  184. package/dist/types/DayPickerRange.d.ts +0 -19
  185. package/dist/types/DayPickerSingle.d.ts +0 -16
  186. package/dist/types/EventHandlers.d.ts +0 -51
  187. package/dist/types/Formatters.d.ts +0 -24
  188. package/dist/types/Labels.d.ts +0 -28
  189. package/dist/types/Matchers.d.ts +0 -84
  190. package/dist/types/Modifiers.d.ts +0 -49
  191. package/dist/types/Styles.d.ts +0 -102
  192. package/src/contexts/DayPicker/defaultContextValue.ts +0 -37
  193. package/src/contexts/DayPicker/useDayPicker.ts +0 -17
  194. package/src/contexts/Focus/useFocusContext.ts +0 -17
  195. package/src/contexts/Modifiers/useModifiers.ts +0 -20
  196. package/src/contexts/Navigation/useNavigation.ts +0 -17
  197. package/src/contexts/SelectMultiple/useSelectMultiple.ts +0 -21
  198. package/src/contexts/SelectRange/useSelectRange.ts +0 -19
  199. package/src/contexts/SelectSingle/useSelectSingle.ts +0 -21
@@ -1,8 +0,0 @@
1
- import React from 'react';
2
- import { DayPickerBase } from '../types/DayPickerBase';
3
- /** The props of {@link RootProvider}. */
4
- export declare type RootContext = DayPickerBase & {
5
- children: React.ReactNode;
6
- };
7
- /** Provide the value for all the context providers. */
8
- export declare function RootProvider(props: RootContext): JSX.Element;
@@ -1,35 +0,0 @@
1
- import React, { ReactNode } from 'react';
2
- import { DayPickerBase } from '../../types/DayPickerBase';
3
- import { DayPickerMultipleProps } from '../../types/DayPickerMultiple';
4
- import { DayClickEventHandler } from '../../types/EventHandlers';
5
- import { InternalModifier, Modifiers } from '../../types/Modifiers';
6
- /** Represent the modifiers that are changed by the multiple selection. */
7
- export declare type SelectMultipleModifiers = Pick<Modifiers, InternalModifier.Disabled>;
8
- /** Represents the value of a {@link SelectMultipleContext}. */
9
- export interface SelectMultipleContextValue {
10
- /** The days that have been selected. */
11
- selected: Date[] | undefined;
12
- /** The modifiers for the corresponding selection. */
13
- modifiers: SelectMultipleModifiers;
14
- /** Event handler to attach to the day button to enable the multiple select. */
15
- onDayClick?: DayClickEventHandler;
16
- }
17
- /**
18
- * The SelectMultiple context shares details about the selected days when in
19
- * multiple selection mode.
20
- *
21
- * Access this context from the {@link useSelectMultiple} hook.
22
- */
23
- export declare const SelectMultipleContext: React.Context<SelectMultipleContextValue | undefined>;
24
- export declare type SelectMultipleProviderProps = {
25
- initialProps: DayPickerBase;
26
- children: ReactNode;
27
- };
28
- /** Provides the values for the {@link SelectMultipleContext}. */
29
- export declare function SelectMultipleProvider(props: SelectMultipleProviderProps): JSX.Element;
30
- declare type SelectMultipleProviderInternalProps = {
31
- initialProps: DayPickerMultipleProps;
32
- children: ReactNode;
33
- };
34
- export declare function SelectMultipleProviderInternal({ initialProps, children }: SelectMultipleProviderInternalProps): JSX.Element;
35
- export {};
@@ -1,2 +0,0 @@
1
- export * from './SelectMultipleContext';
2
- export * from './useSelectMultiple';
@@ -1,7 +0,0 @@
1
- import { SelectMultipleContextValue } from './SelectMultipleContext';
2
- /**
3
- * Hook to access the {@link SelectMultipleContextValue}.
4
- *
5
- * This hook is meant to be used inside internal or custom components.
6
- */
7
- export declare function useSelectMultiple(): SelectMultipleContextValue;
@@ -1,36 +0,0 @@
1
- import React, { ReactNode } from 'react';
2
- import { DayPickerBase } from '../../types/DayPickerBase';
3
- import { DayPickerRangeProps } from '../../types/DayPickerRange';
4
- import { DayClickEventHandler } from '../../types/EventHandlers';
5
- import { DateRange } from '../../types/Matchers';
6
- import { InternalModifier, Modifiers } from '../../types/Modifiers';
7
- /** Represent the modifiers that are changed by the range selection. */
8
- export declare type SelectRangeModifiers = Pick<Modifiers, InternalModifier.Disabled | InternalModifier.RangeEnd | InternalModifier.RangeMiddle | InternalModifier.RangeStart>;
9
- /** Represents the value of a {@link SelectRangeContext}. */
10
- export interface SelectRangeContextValue {
11
- /** The range of days that has been selected. */
12
- selected: DateRange | undefined;
13
- /** The modifiers for the corresponding selection. */
14
- modifiers: SelectRangeModifiers;
15
- /** Event handler to attach to the day button to enable the range select. */
16
- onDayClick?: DayClickEventHandler;
17
- }
18
- /**
19
- * The SelectRange context shares details about the selected days when in
20
- * range selection mode.
21
- *
22
- * Access this context from the {@link useSelectRange} hook.
23
- */
24
- export declare const SelectRangeContext: React.Context<SelectRangeContextValue | undefined>;
25
- declare type SelectRangeProviderProps = {
26
- initialProps: DayPickerBase;
27
- children: ReactNode;
28
- };
29
- /** Provides the values for the {@link SelectRangeProvider}. */
30
- export declare function SelectRangeProvider(props: SelectRangeProviderProps): JSX.Element;
31
- declare type SelectRangeProviderInternalProps = {
32
- initialProps: DayPickerRangeProps;
33
- children: ReactNode;
34
- };
35
- export declare function SelectRangeProviderInternal({ initialProps, children }: SelectRangeProviderInternalProps): JSX.Element;
36
- export {};
@@ -1,2 +0,0 @@
1
- export * from './SelectRangeContext';
2
- export * from './useSelectRange';
@@ -1,7 +0,0 @@
1
- import { SelectRangeContextValue } from './SelectRangeContext';
2
- /**
3
- * Hook to access the {@link SelectRangeContextValue}.
4
- *
5
- * This hook is meant to be used inside internal or custom components.
6
- */
7
- export declare function useSelectRange(): SelectRangeContextValue;
@@ -1,8 +0,0 @@
1
- import { DateRange } from '../../../types/Matchers';
2
- /**
3
- * Add a day to an existing range.
4
- *
5
- * The returned range takes in account the `undefined` values and if the added
6
- * day is already present in the range.
7
- */
8
- export declare function addToRange(day: Date, range?: DateRange): DateRange | undefined;
@@ -1,30 +0,0 @@
1
- import React from 'react';
2
- import { DayPickerBase } from '../../types/DayPickerBase';
3
- import { DayPickerSingleProps } from '../../types/DayPickerSingle';
4
- import { DayClickEventHandler } from '../../types/EventHandlers';
5
- /** Represents the value of a {@link SelectSingleContext}. */
6
- export interface SelectSingleContextValue {
7
- /** The day that has been selected. */
8
- selected: Date | undefined;
9
- /** Event handler to attach to the day button to enable the single select. */
10
- onDayClick?: DayClickEventHandler;
11
- }
12
- /**
13
- * The SelectSingle context shares details about the selected days when in
14
- * single selection mode.
15
- *
16
- * Access this context from the {@link useSelectSingle} hook.
17
- */
18
- export declare const SelectSingleContext: React.Context<SelectSingleContextValue | undefined>;
19
- declare type SelectSingleProviderProps = {
20
- initialProps: DayPickerBase;
21
- children: React.ReactNode;
22
- };
23
- /** Provides the values for the {@link SelectSingleProvider}. */
24
- export declare function SelectSingleProvider(props: SelectSingleProviderProps): JSX.Element;
25
- declare type SelectSingleProviderInternal = {
26
- initialProps: DayPickerSingleProps;
27
- children: React.ReactNode;
28
- };
29
- export declare function SelectSingleProviderInternal({ initialProps, children }: SelectSingleProviderInternal): JSX.Element;
30
- export {};
@@ -1,2 +0,0 @@
1
- export * from './SelectSingleContext';
2
- export * from './useSelectSingle';
@@ -1,7 +0,0 @@
1
- import { SelectSingleContextValue } from './SelectSingleContext';
2
- /**
3
- * Hook to access the {@link SelectSingleContextValue}.
4
- *
5
- * This hook is meant to be used inside internal or custom components.
6
- */
7
- export declare function useSelectSingle(): SelectSingleContextValue;
@@ -1 +0,0 @@
1
- export * from './useActiveModifiers';
@@ -1,15 +0,0 @@
1
- import { ActiveModifiers } from '../../types/Modifiers';
2
- /**
3
- * Return the active modifiers for the specified day.
4
- *
5
- * This hook is meant to be used inside internal or custom components.
6
- *
7
- * @param day
8
- * @param displayMonth
9
- */
10
- export declare function useActiveModifiers(day: Date,
11
- /**
12
- * The month where the date is displayed. If not the same as `date`, the day
13
- * is an "outside day".
14
- */
15
- displayMonth?: Date): ActiveModifiers;
@@ -1 +0,0 @@
1
- export * from './useControlledValue';
@@ -1,12 +0,0 @@
1
- import React from 'react';
2
- export declare type DispatchStateAction<T> = React.Dispatch<React.SetStateAction<T>>;
3
- /**
4
- * Helper hook for using controlled/uncontrolled values from a component props.
5
- *
6
- * When the value is not controlled, pass `undefined` as `controlledValue` and
7
- * use the returned setter to update it.
8
- *
9
- * When the value is controlled, pass the controlled value as second
10
- * argument, which will be always returned as `value`.
11
- */
12
- export declare function useControlledValue<T>(defaultValue: T, controlledValue: T | undefined): [T, DispatchStateAction<T>];
@@ -1 +0,0 @@
1
- export * from './useDayEventHandlers';
@@ -1,26 +0,0 @@
1
- import { HTMLProps } from 'react';
2
- import { ActiveModifiers } from '../../types/Modifiers';
3
- export declare type EventName = 'onClick' | 'onFocus' | 'onBlur' | 'onKeyDown' | 'onKeyUp' | 'onMouseEnter' | 'onMouseLeave' | 'onTouchCancel' | 'onTouchEnd' | 'onTouchMove' | 'onTouchStart';
4
- export declare type DayEventName = 'onDayClick' | 'onDayFocus' | 'onDayBlur' | 'onDayKeyDown' | 'onDayKeyUp' | 'onDayMouseEnter' | 'onDayMouseLeave' | 'onDayTouchCancel' | 'onDayTouchEnd' | 'onDayTouchMove' | 'onDayTouchStart';
5
- export declare type DayEventHandlers = Pick<HTMLProps<HTMLButtonElement>, EventName>;
6
- /**
7
- * This hook returns details about the content to render in the day cell.
8
- *
9
- *
10
- * When a day cell is rendered in the table, DayPicker can either:
11
- *
12
- * - render nothing: when the day is outside the month or has matched the
13
- * "hidden" modifier.
14
- * - render a button when `onDayClick` or a selection mode is set.
15
- * - render a non-interactive element: when no selection mode is set, the day
16
- * cell shouldn’t respond to any interaction. DayPicker should render a `div`
17
- * or a `span`.
18
- *
19
- * ### Usage
20
- *
21
- * Use this hook to customize the behavior of the {@link Day} component. Create a
22
- * new `Day` component using this hook and pass it to the `components` prop.
23
- * The source of {@link Day} can be a good starting point.
24
- *
25
- */
26
- export declare function useDayEventHandlers(date: Date, activeModifiers: ActiveModifiers): DayEventHandlers;
@@ -1 +0,0 @@
1
- export * from './useDayRender';
@@ -1,32 +0,0 @@
1
- import React from 'react';
2
- import { ButtonProps } from '../../components/Button';
3
- import { DayEventHandlers } from '../../hooks/useDayEventHandlers';
4
- import { SelectedDays } from '../../hooks/useSelectedDays';
5
- import { ActiveModifiers } from '../../types/Modifiers';
6
- import { StyledComponent } from '../../types/Styles';
7
- export declare type DayRender = {
8
- /** Whether the day should be rendered a `button` instead of a `div` */
9
- isButton: boolean;
10
- /** Whether the day should be hidden. */
11
- isHidden: boolean;
12
- /** The modifiers active for the given day. */
13
- activeModifiers: ActiveModifiers;
14
- /** The props to apply to the button element (when `isButton` is true). */
15
- buttonProps: StyledComponent & Pick<ButtonProps, 'disabled' | 'aria-pressed' | 'tabIndex'> & DayEventHandlers;
16
- /** The props to apply to the div element (when `isButton` is false). */
17
- divProps: StyledComponent;
18
- selectedDays: SelectedDays;
19
- };
20
- /**
21
- * Return props and data used to render the {@link Day} component.
22
- *
23
- * Use this hook when creating a component to replace the built-in `Day`
24
- * component.
25
- */
26
- export declare function useDayRender(
27
- /** The date to render. */
28
- day: Date,
29
- /** The month where the date is displayed (if not the same as `date`, it means it is an "outside" day). */
30
- displayMonth: Date,
31
- /** A ref to the button element that will be target of focus when rendered (if required). */
32
- buttonRef: React.RefObject<HTMLButtonElement>): DayRender;
@@ -1,10 +0,0 @@
1
- import { DayPickerContextValue } from '../../../contexts/DayPicker';
2
- import { ActiveModifiers } from '../../../types/Modifiers';
3
- /**
4
- * Return the class names for the Day element, according to the given active
5
- * modifiers.
6
- *
7
- * Custom class names are set via `modifiersClassNames` or `classNames`,
8
- * where the first have the precedence.
9
- */
10
- export declare function getDayClassNames(dayPicker: Pick<DayPickerContextValue, 'modifiersClassNames' | 'classNames'>, activeModifiers: ActiveModifiers): string[];
@@ -1,5 +0,0 @@
1
- /// <reference types="react" />
2
- import { DayPickerContextValue } from '../../../contexts/DayPicker';
3
- import { ActiveModifiers } from '../../../types/Modifiers';
4
- /** Return the style for the Day element, according to the given active modifiers. */
5
- export declare function getDayStyle(dayPicker: Pick<DayPickerContextValue, 'modifiersStyles' | 'styles'>, activeModifiers: ActiveModifiers): React.CSSProperties;
@@ -1 +0,0 @@
1
- export * from './useId';
@@ -1,19 +0,0 @@
1
- /**
2
- * useId
3
- *
4
- * Autogenerate IDs to facilitate WAI-ARIA and server rendering.
5
- *
6
- * Note: The returned ID will initially be `null` and will update after a
7
- * component mounts. Users may need to supply their own ID if they need
8
- * consistent values for SSR.
9
- *
10
- * @see Docs https://reach.tech/auto-id
11
- */
12
- declare function useId(idFromProps: string): string;
13
- declare function useId(idFromProps: number): number;
14
- declare function useId(idFromProps: string | number): string | number;
15
- declare function useId(idFromProps: string | undefined | null): string | undefined;
16
- declare function useId(idFromProps: number | undefined | null): number | undefined;
17
- declare function useId(idFromProps: string | number | undefined | null): string | number | undefined;
18
- declare function useId(): string | undefined;
19
- export { useId };
@@ -1 +0,0 @@
1
- export * from './useInput';
@@ -1,28 +0,0 @@
1
- import React from 'react';
2
- import { DayPickerBase } from '../../types/DayPickerBase';
3
- import { DayPickerSingleProps } from '../../types/DayPickerSingle';
4
- /** The props to attach to the input field when using {@link useInput}. */
5
- export declare type InputHTMLAttributes = Pick<React.InputHTMLAttributes<HTMLInputElement>, 'onBlur' | 'onChange' | 'onFocus' | 'value' | 'placeholder'>;
6
- /** The props to attach to the DayPicker component when using {@link useInput}. */
7
- export declare type InputDayPickerProps = Pick<DayPickerSingleProps, 'fromDate' | 'toDate' | 'locale' | 'month' | 'onDayClick' | 'onMonthChange' | 'selected' | 'today'>;
8
- export interface UseInputOptions extends Pick<DayPickerBase, 'locale' | 'fromDate' | 'toDate' | 'fromMonth' | 'toMonth' | 'fromYear' | 'toYear' | 'today'> {
9
- /** The initially selected date */
10
- defaultSelected?: Date;
11
- /** The format string for formatting the input field. See https://date-fns.org/docs/format for a list of format strings. Default to `PP`. */
12
- format?: string;
13
- /** Make the selection required. */
14
- required?: boolean;
15
- }
16
- /** Represent the value returned by {@link useInput}. */
17
- export interface UseInputValue {
18
- /** The props to pass to a DayPicker component. */
19
- dayPickerProps: InputDayPickerProps;
20
- /** The props to pass to an input field. */
21
- inputProps: InputHTMLAttributes;
22
- /** A function to reset to the initial state. */
23
- reset: () => void;
24
- /** A function to set the selected day. */
25
- setSelected: (day: Date | undefined) => void;
26
- }
27
- /** Return props and setters for binding an input field to DayPicker. */
28
- export declare function useInput(options?: UseInputOptions): UseInputValue;
@@ -1,2 +0,0 @@
1
- /** @private */
2
- export declare function isValidDate(day: Date): boolean;
@@ -1 +0,0 @@
1
- export * from './useSelectedDays';
@@ -1,10 +0,0 @@
1
- import { DateRange } from '../../types/Matchers';
2
- export declare type SelectedDays = Date | Date[] | DateRange | undefined;
3
- /**
4
- * Return the current selected days when DayPicker is in selection mode. Days
5
- * selected by the custom selection mode are not returned.
6
- *
7
- * This hook is meant to be used inside internal or custom components.
8
- *
9
- */
10
- export declare function useSelectedDays(): SelectedDays;
@@ -1,255 +0,0 @@
1
- /// <reference types="react" />
2
- import type { Locale } from 'date-fns';
3
- import { CaptionLayout, CaptionProps } from '../components/Caption';
4
- import { CaptionLabelProps } from '../components/CaptionLabel';
5
- import { DayProps } from '../components/Day';
6
- import { DayContentProps } from '../components/DayContent';
7
- import { DropdownProps } from '../components/Dropdown';
8
- import { RowProps } from '../components/Row';
9
- import { WeekNumberProps } from '../components/WeekNumber';
10
- import { DayClickEventHandler, DayFocusEventHandler, DayKeyboardEventHandler, DayMouseEventHandler, DayTouchEventHandler, MonthChangeEventHandler, WeekNumberClickEventHandler } from './EventHandlers';
11
- import { Formatters } from './Formatters';
12
- import { Labels } from './Labels';
13
- import { Matcher } from './Matchers';
14
- import { DayModifiers, ModifiersClassNames, ModifiersStyles } from './Modifiers';
15
- import { ClassNames, StyledComponent, Styles } from './Styles';
16
- /**
17
- * Selection modes supported by DayPicker.
18
- *
19
- * - `single`: use DayPicker to select single days.
20
- * - `multiple`: allow selecting multiple days.
21
- * - `range`: use DayPicker to select a range of days
22
- * - `default`: disable the built-in selection behavior. Customize what is selected by using {@link DayPickerBase.onDayClick}.
23
- */
24
- export declare type DaySelectionMode = 'single' | 'multiple' | 'range' | 'default';
25
- /**
26
- * The base props for the {@link DayPicker} component and the {@link DayPickerContext}.
27
- */
28
- export interface DayPickerBase {
29
- /** The CSS class to add to the container element. To change the name of the class instead, use `classNames.root`. */
30
- className?: string;
31
- /**
32
- * Change the class names of the HTML elements.
33
- *
34
- * Use this prop when you need to change the default class names — for example
35
- * when using CSS modules.
36
- */
37
- classNames?: ClassNames;
38
- /**
39
- * Change the class name for the day matching the {@link modifiers}.
40
- */
41
- modifiersClassNames?: ModifiersClassNames;
42
- /**
43
- * Style to apply to the container element.
44
- */
45
- style?: React.CSSProperties;
46
- /**
47
- * Change the inline styles for each UIElement.
48
- */
49
- styles?: Styles;
50
- /**
51
- * Change the inline style for the day matching the {@link modifiers}.
52
- */
53
- modifiersStyles?: ModifiersStyles;
54
- /**
55
- * The initial month to show in the calendar. Default is the current month.
56
- *
57
- * Use this prop to let DayPicker control the current month. If you need to set the month programmatically, use {@link month]] and [[onMonthChange}.
58
- */
59
- defaultMonth?: Date;
60
- /**
61
- * The month displayed in the calendar.
62
- *
63
- * As opposed to {@link DayPickerBase.defaultMonth}, use this prop with {@link DayPickerBase.onMonthChange} to
64
- * change the month programmatically.
65
- */
66
- month?: Date;
67
- /**
68
- * Event fired when the user navigates between months.
69
- */
70
- onMonthChange?: MonthChangeEventHandler;
71
- /**
72
- * The number of displayed months. Defaults to `1`.
73
- */
74
- numberOfMonths?: number;
75
- /**
76
- * The earliest day to start the month navigation.
77
- */
78
- fromDate?: Date;
79
- /**
80
- * The latest day to end the month navigation.
81
- */
82
- toDate?: Date;
83
- /**
84
- * The earliest month to start the month navigation.
85
- */
86
- fromMonth?: Date;
87
- /**
88
- * The latest month to end the month navigation.
89
- */
90
- toMonth?: Date;
91
- /**
92
- * The earliest year to start the month navigation.
93
- */
94
- fromYear?: number;
95
- /**
96
- * The latest year to end the month navigation.
97
- */
98
- toYear?: number;
99
- /**
100
- * Disable the navigation between months.
101
- */
102
- disableNavigation?: boolean;
103
- /**
104
- * Paginate the month navigation displaying the {@link numberOfMonths} at time.
105
- */
106
- pagedNavigation?: boolean;
107
- /**
108
- * Render the months in reversed order (when {@link numberOfMonths} is greater
109
- * than `1`) to display the most recent month first.
110
- */
111
- reverseMonths?: boolean;
112
- /**
113
- * Change the layout of the caption:
114
- *
115
- * - `buttons` (default): display prev/right buttons
116
- * - `dropdown`: display drop-downs to change the month and the year
117
- *
118
- * **Note:** the `dropdown` layout is available only when `fromDate`,
119
- * `fromMonth` or`fromYear` and `toDate`, `toMonth` or `toYear` are set.
120
- */
121
- captionLayout?: CaptionLayout;
122
- /**
123
- * Display six weeks per months, regardless the month’s number of weeks.
124
- * To use this prop, {@link showOutsideDays} must be set. Default to `false`.
125
- */
126
- fixedWeeks?: boolean;
127
- /**
128
- * Hide the month’s head displaying the weekday names.
129
- */
130
- hideHead?: boolean;
131
- /**
132
- * Show the outside days. An outside day is a day falling in the next or the
133
- * previous month. Default is `false`.
134
- */
135
- showOutsideDays?: boolean;
136
- /**
137
- * Show the week numbers column. Default to `false`.
138
- */
139
- showWeekNumber?: boolean;
140
- /**
141
- * Map of components used to create the layout. Look at the [components source](https://github.com/gpbl/react-day-picker/tree/master/packages/react-day-picker/src/components) to understand how internal components are built.
142
- */
143
- components?: CustomComponents;
144
- /** Content to add to the `tfoot` element. */
145
- footer?: React.ReactNode;
146
- /**
147
- * When a selection mode is set, DayPicker will focus the first selected day
148
- * (if set) or the today's date (if not disabled).
149
- *
150
- * Use this prop when you need to focus DayPicker after a user actions, for
151
- * improved accessibility.
152
- */
153
- initialFocus?: boolean;
154
- /**
155
- * Apply the `disabled` modifier to the matching days.
156
- */
157
- disabled?: Matcher | Matcher[] | undefined;
158
- /**
159
- * Apply the `hidden` modifier to the matching days. Will hide them from the
160
- * calendar.
161
- */
162
- hidden?: Matcher | Matcher[] | undefined;
163
- /** Apply the `selected` modifier to the matching days. */
164
- selected?: Matcher | Matcher[] | undefined;
165
- /**
166
- * The today’s date. Default is the current date. This Date will get the
167
- * `today` modifier to style the day.
168
- */
169
- today?: Date;
170
- /**
171
- * Add modifiers to the matching days.
172
- */
173
- modifiers?: DayModifiers;
174
- /** The date-fns locale object used to localize dates. Defaults to* `en-US`. */
175
- locale?: Locale;
176
- /**
177
- * Labels creators to override the defaults. Use this prop to customize the
178
- * ARIA labels attributes.
179
- */
180
- labels?: Partial<Labels>;
181
- /**
182
- * The text direction of the calendar. Use `ltr` for left-to-right (default)
183
- * or `rtl` for right-to-left.
184
- */
185
- dir?: string;
186
- /**
187
- * A map of formatters. Use the formatters to override the default formatting
188
- * functions.
189
- */
190
- formatters?: Partial<Formatters>;
191
- /**
192
- * The index of the first day of the week (0 - Sunday). Overrides the locale's one.
193
- */
194
- weekStartsOn?: 0 | 1 | 2 | 3 | 4 | 5 | 6;
195
- onDayClick?: DayClickEventHandler;
196
- onDayFocus?: DayFocusEventHandler;
197
- onDayBlur?: DayFocusEventHandler;
198
- onDayMouseEnter?: DayMouseEventHandler;
199
- onDayMouseLeave?: DayMouseEventHandler;
200
- onDayKeyDown?: DayKeyboardEventHandler;
201
- onDayKeyUp?: DayKeyboardEventHandler;
202
- onDayKeyPress?: DayKeyboardEventHandler;
203
- onDayTouchCancel?: DayTouchEventHandler;
204
- onDayTouchEnd?: DayTouchEventHandler;
205
- onDayTouchMove?: DayTouchEventHandler;
206
- onDayTouchStart?: DayTouchEventHandler;
207
- onNextClick?: MonthChangeEventHandler;
208
- onPrevClick?: MonthChangeEventHandler;
209
- onWeekNumberClick?: WeekNumberClickEventHandler;
210
- }
211
- /**
212
- * Map of the components that can be changed using the `components` prop.
213
- *
214
- * Look at the [components
215
- * source](https://github.com/gpbl/react-day-picker/tree/master/packages/react-day-picker/src/components)
216
- * to understand how internal components are built.
217
- */
218
- export interface CustomComponents {
219
- /** The component for the caption element. */
220
- Caption?: (props: CaptionProps) => JSX.Element | null;
221
- /** The component for the caption element. */
222
- CaptionLabel?: (props: CaptionLabelProps) => JSX.Element | null;
223
- /**
224
- * The component for the day element.
225
- *
226
- * Each `Day` in DayPicker should render one of the following, according to
227
- * the return value of {@link useDayRender}.
228
- *
229
- * - an empty `React.Fragment`, to render if `isHidden` is true
230
- * - a `button` element, when the day is interactive, e.g. is selectable
231
- * - a `div` or a `span` element, when the day is not interactive
232
- *
233
- */
234
- Day?: (props: DayProps) => JSX.Element | null;
235
- /** The component for the content of the day element. */
236
- DayContent?: (props: DayContentProps) => JSX.Element | null;
237
- /** The component for the drop-down elements. */
238
- Dropdown?: (props: DropdownProps) => JSX.Element | null;
239
- /** The component for the table footer. */
240
- Footer?: () => JSX.Element | null;
241
- /** The component for the table’s head. */
242
- Head?: () => JSX.Element | null;
243
- /** The component for the table’s head row. */
244
- HeadRow?: () => JSX.Element | null;
245
- /** The component for the small icon in the drop-downs. */
246
- IconDropdown?: (props: StyledComponent) => JSX.Element | null;
247
- /** The arrow right icon (used for the Navigation buttons). */
248
- IconRight?: (props: StyledComponent) => JSX.Element | null;
249
- /** The arrow left icon (used for the Navigation buttons). */
250
- IconLeft?: (props: StyledComponent) => JSX.Element | null;
251
- /** The component for the table rows. */
252
- Row?: (props: RowProps) => JSX.Element | null;
253
- /** The component for the week number in the table rows. */
254
- WeekNumber?: (props: WeekNumberProps) => JSX.Element | null;
255
- }
@@ -1,8 +0,0 @@
1
- import { DayPickerProps } from '../DayPicker';
2
- import { DayPickerBase, DaySelectionMode } from './DayPickerBase';
3
- /** The props for the {@link DayPicker} component when using `mode="default"` or `undefined`. */
4
- export interface DayPickerDefaultProps extends DayPickerBase {
5
- mode?: DaySelectionMode;
6
- }
7
- /** Returns true when the props are of type {@link DayPickerDefaultProps}. */
8
- export declare function isDayPickerDefault(props: DayPickerProps): props is DayPickerDefaultProps;
@@ -1,18 +0,0 @@
1
- import { DayPickerProps } from '../DayPicker';
2
- import { DayPickerContextValue } from '../contexts/DayPicker';
3
- import { DayPickerBase } from './DayPickerBase';
4
- import { SelectMultipleEventHandler } from './EventHandlers';
5
- /** The props for the {@link DayPicker} component when using `mode="multiple"`. */
6
- export interface DayPickerMultipleProps extends DayPickerBase {
7
- mode: 'multiple';
8
- /** The selected days. */
9
- selected?: Date[] | undefined;
10
- /** Event fired when a days added or removed to the selection. */
11
- onSelect?: SelectMultipleEventHandler;
12
- /** The minimum amount of days that can be selected. */
13
- min?: number;
14
- /** The maximum amount of days that can be selected. */
15
- max?: number;
16
- }
17
- /** Returns true when the props are of type {@link DayPickerMultipleProps}. */
18
- export declare function isDayPickerMultiple(props: DayPickerProps | DayPickerContextValue): props is DayPickerMultipleProps;