@navikt/ds-react 7.14.0-alpha.1 → 7.14.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 (226) hide show
  1. package/cjs/date/date-utils/check-dates.js +2 -2
  2. package/cjs/date/date-utils/check-dates.js.map +1 -1
  3. package/cjs/form/combobox/Combobox.d.ts +1 -1
  4. package/cjs/form/combobox/Input/InputController.d.ts +1 -1
  5. package/esm/date/date-utils/check-dates.js +3 -3
  6. package/esm/date/date-utils/check-dates.js.map +1 -1
  7. package/esm/form/combobox/Combobox.d.ts +1 -1
  8. package/esm/form/combobox/Input/InputController.d.ts +1 -1
  9. package/package.json +5 -4
  10. package/src/date/date-utils/check-dates.ts +10 -3
  11. package/cjs/date/context/index.d.ts +0 -3
  12. package/cjs/date/context/index.js +0 -13
  13. package/cjs/date/context/index.js.map +0 -1
  14. package/cjs/date/context/useDateInputContext.d.ts +0 -21
  15. package/cjs/date/context/useDateInputContext.js +0 -14
  16. package/cjs/date/context/useDateInputContext.js.map +0 -1
  17. package/cjs/date/context/useDateTranslationContext.d.ts +0 -8
  18. package/cjs/date/context/useDateTranslationContext.js +0 -7
  19. package/cjs/date/context/useDateTranslationContext.js.map +0 -1
  20. package/cjs/date/context/useSharedMonthContext.d.ts +0 -21
  21. package/cjs/date/context/useSharedMonthContext.js +0 -64
  22. package/cjs/date/context/useSharedMonthContext.js.map +0 -1
  23. package/cjs/date/datepicker/DatePickerStandalone.d.ts +0 -18
  24. package/cjs/date/datepicker/DatePickerStandalone.js +0 -86
  25. package/cjs/date/datepicker/DatePickerStandalone.js.map +0 -1
  26. package/cjs/date/datepicker/parts/Caption.d.ts +0 -7
  27. package/cjs/date/datepicker/parts/Caption.js +0 -30
  28. package/cjs/date/datepicker/parts/Caption.js.map +0 -1
  29. package/cjs/date/datepicker/parts/DayButton.d.ts +0 -4
  30. package/cjs/date/datepicker/parts/DayButton.js +0 -43
  31. package/cjs/date/datepicker/parts/DayButton.js.map +0 -1
  32. package/cjs/date/datepicker/parts/DropdownCaption.d.ts +0 -7
  33. package/cjs/date/datepicker/parts/DropdownCaption.js +0 -46
  34. package/cjs/date/datepicker/parts/DropdownCaption.js.map +0 -1
  35. package/cjs/date/datepicker/parts/HeadRow.d.ts +0 -10
  36. package/cjs/date/datepicker/parts/HeadRow.js +0 -36
  37. package/cjs/date/datepicker/parts/HeadRow.js.map +0 -1
  38. package/cjs/date/datepicker/parts/Row.d.ts +0 -16
  39. package/cjs/date/datepicker/parts/Row.js +0 -25
  40. package/cjs/date/datepicker/parts/Row.js.map +0 -1
  41. package/cjs/date/datepicker/parts/TableHead.d.ts +0 -5
  42. package/cjs/date/datepicker/parts/TableHead.js +0 -19
  43. package/cjs/date/datepicker/parts/TableHead.js.map +0 -1
  44. package/cjs/date/datepicker/parts/WeekNumber.d.ts +0 -11
  45. package/cjs/date/datepicker/parts/WeekNumber.js +0 -33
  46. package/cjs/date/datepicker/parts/WeekNumber.js.map +0 -1
  47. package/cjs/date/datepicker/parts/WeekRow.d.ts +0 -5
  48. package/cjs/date/datepicker/parts/WeekRow.js +0 -36
  49. package/cjs/date/datepicker/parts/WeekRow.js.map +0 -1
  50. package/cjs/date/datepicker/types.d.ts +0 -105
  51. package/cjs/date/datepicker/types.js +0 -3
  52. package/cjs/date/datepicker/types.js.map +0 -1
  53. package/cjs/date/hooks/index.d.ts +0 -6
  54. package/cjs/date/hooks/index.js +0 -10
  55. package/cjs/date/hooks/index.js.map +0 -1
  56. package/cjs/date/hooks/useDatepicker.d.ts +0 -90
  57. package/cjs/date/hooks/useDatepicker.js +0 -163
  58. package/cjs/date/hooks/useDatepicker.js.map +0 -1
  59. package/cjs/date/hooks/useMonthPicker.d.ts +0 -85
  60. package/cjs/date/hooks/useMonthPicker.js +0 -174
  61. package/cjs/date/hooks/useMonthPicker.js.map +0 -1
  62. package/cjs/date/hooks/useRangeDatepicker.d.ts +0 -76
  63. package/cjs/date/hooks/useRangeDatepicker.js +0 -319
  64. package/cjs/date/hooks/useRangeDatepicker.js.map +0 -1
  65. package/cjs/date/monthpicker/MonthButton.d.ts +0 -11
  66. package/cjs/date/monthpicker/MonthButton.js +0 -82
  67. package/cjs/date/monthpicker/MonthButton.js.map +0 -1
  68. package/cjs/date/monthpicker/MonthCaption.d.ts +0 -3
  69. package/cjs/date/monthpicker/MonthCaption.js +0 -52
  70. package/cjs/date/monthpicker/MonthCaption.js.map +0 -1
  71. package/cjs/date/monthpicker/MonthPickerStandalone.d.ts +0 -11
  72. package/cjs/date/monthpicker/MonthPickerStandalone.js +0 -65
  73. package/cjs/date/monthpicker/MonthPickerStandalone.js.map +0 -1
  74. package/cjs/date/monthpicker/MonthSelector.d.ts +0 -3
  75. package/cjs/date/monthpicker/MonthSelector.js +0 -80
  76. package/cjs/date/monthpicker/MonthSelector.js.map +0 -1
  77. package/cjs/date/monthpicker/types.d.ts +0 -86
  78. package/cjs/date/monthpicker/types.js +0 -3
  79. package/cjs/date/monthpicker/types.js.map +0 -1
  80. package/cjs/date/parts/DateInput.d.ts +0 -28
  81. package/cjs/date/parts/DateInput.js +0 -91
  82. package/cjs/date/parts/DateInput.js.map +0 -1
  83. package/cjs/date/parts/DateWrapper.d.ts +0 -18
  84. package/cjs/date/parts/DateWrapper.js +0 -67
  85. package/cjs/date/parts/DateWrapper.js.map +0 -1
  86. package/cjs/date/utils/check-dates.d.ts +0 -3
  87. package/cjs/date/utils/check-dates.js +0 -14
  88. package/cjs/date/utils/check-dates.js.map +0 -1
  89. package/cjs/date/utils/dates-disabled.d.ts +0 -1
  90. package/cjs/date/utils/dates-disabled.js +0 -30
  91. package/cjs/date/utils/dates-disabled.js.map +0 -1
  92. package/cjs/date/utils/format-date.d.ts +0 -2
  93. package/cjs/date/utils/format-date.js +0 -13
  94. package/cjs/date/utils/format-date.js.map +0 -1
  95. package/cjs/date/utils/get-dates.d.ts +0 -2
  96. package/cjs/date/utils/get-dates.js +0 -52
  97. package/cjs/date/utils/get-dates.js.map +0 -1
  98. package/cjs/date/utils/get-initial-year.d.ts +0 -5
  99. package/cjs/date/utils/get-initial-year.js +0 -21
  100. package/cjs/date/utils/get-initial-year.js.map +0 -1
  101. package/cjs/date/utils/get-month-weeks.d.ts +0 -16
  102. package/cjs/date/utils/get-month-weeks.js +0 -46
  103. package/cjs/date/utils/get-month-weeks.js.map +0 -1
  104. package/cjs/date/utils/index.d.ts +0 -9
  105. package/cjs/date/utils/index.js +0 -29
  106. package/cjs/date/utils/index.js.map +0 -1
  107. package/cjs/date/utils/is-match.d.ts +0 -4
  108. package/cjs/date/utils/is-match.js +0 -61
  109. package/cjs/date/utils/is-match.js.map +0 -1
  110. package/cjs/date/utils/locale.d.ts +0 -36
  111. package/cjs/date/utils/locale.js +0 -54
  112. package/cjs/date/utils/locale.js.map +0 -1
  113. package/cjs/date/utils/navigation.d.ts +0 -2
  114. package/cjs/date/utils/navigation.js +0 -156
  115. package/cjs/date/utils/navigation.js.map +0 -1
  116. package/cjs/date/utils/parse-date.d.ts +0 -4
  117. package/cjs/date/utils/parse-date.js +0 -87
  118. package/cjs/date/utils/parse-date.js.map +0 -1
  119. package/esm/date/context/index.d.ts +0 -3
  120. package/esm/date/context/index.js +0 -4
  121. package/esm/date/context/index.js.map +0 -1
  122. package/esm/date/context/useDateInputContext.d.ts +0 -21
  123. package/esm/date/context/useDateInputContext.js +0 -10
  124. package/esm/date/context/useDateInputContext.js.map +0 -1
  125. package/esm/date/context/useDateTranslationContext.d.ts +0 -8
  126. package/esm/date/context/useDateTranslationContext.js +0 -3
  127. package/esm/date/context/useDateTranslationContext.js.map +0 -1
  128. package/esm/date/context/useSharedMonthContext.d.ts +0 -21
  129. package/esm/date/context/useSharedMonthContext.js +0 -36
  130. package/esm/date/context/useSharedMonthContext.js.map +0 -1
  131. package/esm/date/datepicker/DatePickerStandalone.d.ts +0 -18
  132. package/esm/date/datepicker/DatePickerStandalone.js +0 -57
  133. package/esm/date/datepicker/DatePickerStandalone.js.map +0 -1
  134. package/esm/date/datepicker/parts/Caption.d.ts +0 -7
  135. package/esm/date/datepicker/parts/Caption.js +0 -23
  136. package/esm/date/datepicker/parts/Caption.js.map +0 -1
  137. package/esm/date/datepicker/parts/DayButton.d.ts +0 -4
  138. package/esm/date/datepicker/parts/DayButton.js +0 -18
  139. package/esm/date/datepicker/parts/DayButton.js.map +0 -1
  140. package/esm/date/datepicker/parts/DropdownCaption.d.ts +0 -7
  141. package/esm/date/datepicker/parts/DropdownCaption.js +0 -39
  142. package/esm/date/datepicker/parts/DropdownCaption.js.map +0 -1
  143. package/esm/date/datepicker/parts/HeadRow.d.ts +0 -10
  144. package/esm/date/datepicker/parts/HeadRow.js +0 -29
  145. package/esm/date/datepicker/parts/HeadRow.js.map +0 -1
  146. package/esm/date/datepicker/parts/Row.d.ts +0 -16
  147. package/esm/date/datepicker/parts/Row.js +0 -20
  148. package/esm/date/datepicker/parts/Row.js.map +0 -1
  149. package/esm/date/datepicker/parts/TableHead.d.ts +0 -5
  150. package/esm/date/datepicker/parts/TableHead.js +0 -14
  151. package/esm/date/datepicker/parts/TableHead.js.map +0 -1
  152. package/esm/date/datepicker/parts/WeekNumber.d.ts +0 -11
  153. package/esm/date/datepicker/parts/WeekNumber.js +0 -28
  154. package/esm/date/datepicker/parts/WeekNumber.js.map +0 -1
  155. package/esm/date/datepicker/parts/WeekRow.d.ts +0 -5
  156. package/esm/date/datepicker/parts/WeekRow.js +0 -31
  157. package/esm/date/datepicker/parts/WeekRow.js.map +0 -1
  158. package/esm/date/datepicker/types.d.ts +0 -105
  159. package/esm/date/datepicker/types.js +0 -2
  160. package/esm/date/datepicker/types.js.map +0 -1
  161. package/esm/date/hooks/index.d.ts +0 -6
  162. package/esm/date/hooks/index.js +0 -4
  163. package/esm/date/hooks/index.js.map +0 -1
  164. package/esm/date/hooks/useDatepicker.d.ts +0 -90
  165. package/esm/date/hooks/useDatepicker.js +0 -159
  166. package/esm/date/hooks/useDatepicker.js.map +0 -1
  167. package/esm/date/hooks/useMonthPicker.d.ts +0 -85
  168. package/esm/date/hooks/useMonthPicker.js +0 -170
  169. package/esm/date/hooks/useMonthPicker.js.map +0 -1
  170. package/esm/date/hooks/useRangeDatepicker.d.ts +0 -76
  171. package/esm/date/hooks/useRangeDatepicker.js +0 -315
  172. package/esm/date/hooks/useRangeDatepicker.js.map +0 -1
  173. package/esm/date/monthpicker/MonthButton.d.ts +0 -11
  174. package/esm/date/monthpicker/MonthButton.js +0 -52
  175. package/esm/date/monthpicker/MonthButton.js.map +0 -1
  176. package/esm/date/monthpicker/MonthCaption.d.ts +0 -3
  177. package/esm/date/monthpicker/MonthCaption.js +0 -45
  178. package/esm/date/monthpicker/MonthCaption.js.map +0 -1
  179. package/esm/date/monthpicker/MonthPickerStandalone.d.ts +0 -11
  180. package/esm/date/monthpicker/MonthPickerStandalone.js +0 -36
  181. package/esm/date/monthpicker/MonthPickerStandalone.js.map +0 -1
  182. package/esm/date/monthpicker/MonthSelector.d.ts +0 -3
  183. package/esm/date/monthpicker/MonthSelector.js +0 -50
  184. package/esm/date/monthpicker/MonthSelector.js.map +0 -1
  185. package/esm/date/monthpicker/types.d.ts +0 -86
  186. package/esm/date/monthpicker/types.js +0 -2
  187. package/esm/date/monthpicker/types.js.map +0 -1
  188. package/esm/date/parts/DateInput.d.ts +0 -28
  189. package/esm/date/parts/DateInput.js +0 -62
  190. package/esm/date/parts/DateInput.js.map +0 -1
  191. package/esm/date/parts/DateWrapper.d.ts +0 -18
  192. package/esm/date/parts/DateWrapper.js +0 -37
  193. package/esm/date/parts/DateWrapper.js.map +0 -1
  194. package/esm/date/utils/check-dates.d.ts +0 -3
  195. package/esm/date/utils/check-dates.js +0 -9
  196. package/esm/date/utils/check-dates.js.map +0 -1
  197. package/esm/date/utils/dates-disabled.d.ts +0 -1
  198. package/esm/date/utils/dates-disabled.js +0 -26
  199. package/esm/date/utils/dates-disabled.js.map +0 -1
  200. package/esm/date/utils/format-date.d.ts +0 -2
  201. package/esm/date/utils/format-date.js +0 -9
  202. package/esm/date/utils/format-date.js.map +0 -1
  203. package/esm/date/utils/get-dates.d.ts +0 -2
  204. package/esm/date/utils/get-dates.js +0 -47
  205. package/esm/date/utils/get-dates.js.map +0 -1
  206. package/esm/date/utils/get-initial-year.d.ts +0 -5
  207. package/esm/date/utils/get-initial-year.js +0 -18
  208. package/esm/date/utils/get-initial-year.js.map +0 -1
  209. package/esm/date/utils/get-month-weeks.d.ts +0 -16
  210. package/esm/date/utils/get-month-weeks.js +0 -42
  211. package/esm/date/utils/get-month-weeks.js.map +0 -1
  212. package/esm/date/utils/index.d.ts +0 -9
  213. package/esm/date/utils/index.js +0 -10
  214. package/esm/date/utils/index.js.map +0 -1
  215. package/esm/date/utils/is-match.d.ts +0 -4
  216. package/esm/date/utils/is-match.js +0 -57
  217. package/esm/date/utils/is-match.js.map +0 -1
  218. package/esm/date/utils/locale.d.ts +0 -36
  219. package/esm/date/utils/locale.js +0 -45
  220. package/esm/date/utils/locale.js.map +0 -1
  221. package/esm/date/utils/navigation.d.ts +0 -2
  222. package/esm/date/utils/navigation.js +0 -152
  223. package/esm/date/utils/navigation.js.map +0 -1
  224. package/esm/date/utils/parse-date.d.ts +0 -4
  225. package/esm/date/utils/parse-date.js +0 -83
  226. package/esm/date/utils/parse-date.js.map +0 -1
@@ -1,85 +0,0 @@
1
- import React from "react";
2
- import { MonthPickerProps } from "../monthpicker/types.js";
3
- import { DateInputProps } from "../parts/DateInput.js";
4
- export interface UseMonthPickerOptions extends Pick<MonthPickerProps, "locale" | "fromDate" | "toDate" | "disabled" | "defaultSelected"> {
5
- /**
6
- * Make Date-selection required
7
- */
8
- required?: boolean;
9
- /**
10
- * Callback for month-change
11
- */
12
- onMonthChange?: (date?: Date) => void;
13
- /**
14
- * Input-format
15
- * @default "MMMM yyyy"
16
- */
17
- inputFormat?: string;
18
- /**
19
- * validation-callback
20
- */
21
- onValidate?: (val: MonthValidationT) => void;
22
- /**
23
- * Default shown year
24
- */
25
- defaultYear?: Date;
26
- /**
27
- * Allows input of with `yy` year format.
28
- *
29
- * Decision between 20th and 21st century is based on before(todays year - 80) ? 21st : 20th.
30
- * In 2024 this equals to 1944 - 2043
31
- * @default true
32
- */
33
- allowTwoDigitYear?: boolean;
34
- }
35
- interface UseMonthPickerValue {
36
- /**
37
- * Use: <MonthPicker {...monthpickerProps} />
38
- */
39
- monthpickerProps: MonthPickerProps;
40
- /**
41
- * Use: <MonthPicker.Input {...inputProps} />
42
- */
43
- inputProps: Pick<DateInputProps, "onChange" | "onFocus" | "value"> & {
44
- /**
45
- * @private
46
- */
47
- setAnchorRef: React.Dispatch<React.SetStateAction<HTMLButtonElement | null>>;
48
- };
49
- /**
50
- * Currently selected Date
51
- * Up to user to validate value and extract month
52
- */
53
- selectedMonth?: Date;
54
- /**
55
- * Manually set selected month if needed
56
- */
57
- setSelected: (date?: Date) => void;
58
- /**
59
- * Resets all states
60
- */
61
- reset: () => void;
62
- }
63
- export type MonthValidationT = {
64
- isDisabled: boolean;
65
- isEmpty: boolean;
66
- isInvalid: boolean;
67
- isValidMonth: boolean;
68
- isBefore: boolean;
69
- isAfter: boolean;
70
- };
71
- /**
72
- *
73
- * @see 🏷️ {@link UseMonthPickerOptions}
74
- * @see 🏷️ {@link UseMonthPickerValue}
75
- * @see 🏷️ {@link MonthValidationT}
76
- * @example
77
- * const { monthpickerProps, inputProps } = useMonthpicker({
78
- * fromDate: new Date("Aug 23 2019"),
79
- * toDate: new Date("Feb 23 2024"),
80
- * onMonthChange: console.log,
81
- * onValidate: console.log,
82
- * });
83
- */
84
- export declare const useMonthpicker: (opt?: UseMonthPickerOptions) => UseMonthPickerValue;
85
- export {};
@@ -1,170 +0,0 @@
1
- import { useCallback, useMemo, useState } from "react";
2
- import { useDateLocale } from "../../util/i18n/i18n.hooks.js";
3
- import { formatDateForInput, getLocaleFromString, isMatch, isValidDate, parseDate, } from "../utils/index.js";
4
- const getValidationMessage = (val = {}) => (Object.assign({ isDisabled: false, isEmpty: false, isInvalid: false, isBefore: false, isAfter: false, isValidMonth: true }, val));
5
- const getIsBefore = (opt) => opt.fromDate &&
6
- opt.date &&
7
- (opt.fromDate.getFullYear() > opt.date.getFullYear() ||
8
- (opt.fromDate.getFullYear() === opt.date.getFullYear() &&
9
- opt.fromDate.getMonth() > opt.date.getMonth()));
10
- const getIsAfter = (opt) => opt.toDate &&
11
- opt.date &&
12
- (opt.toDate.getFullYear() < opt.date.getFullYear() ||
13
- (opt.toDate.getFullYear() === opt.date.getFullYear() &&
14
- opt.toDate.getMonth() < opt.date.getMonth()));
15
- /**
16
- *
17
- * @see 🏷️ {@link UseMonthPickerOptions}
18
- * @see 🏷️ {@link UseMonthPickerValue}
19
- * @see 🏷️ {@link MonthValidationT}
20
- * @example
21
- * const { monthpickerProps, inputProps } = useMonthpicker({
22
- * fromDate: new Date("Aug 23 2019"),
23
- * toDate: new Date("Feb 23 2024"),
24
- * onMonthChange: console.log,
25
- * onValidate: console.log,
26
- * });
27
- */
28
- export const useMonthpicker = (opt = {}) => {
29
- var _a;
30
- const { locale: _locale, defaultSelected: _defaultSelected, fromDate, toDate, disabled, required, onMonthChange, inputFormat, onValidate, defaultYear, allowTwoDigitYear = true, } = opt;
31
- const [anchorRef, setAnchorRef] = useState(null);
32
- const [defaultSelected, setDefaultSelected] = useState(_defaultSelected);
33
- const today = useMemo(() => new Date(), []);
34
- const localeFromProvider = useDateLocale();
35
- const locale = _locale ? getLocaleFromString(_locale) : localeFromProvider;
36
- // Initialize states
37
- const [year, setYear] = useState((_a = defaultSelected !== null && defaultSelected !== void 0 ? defaultSelected : defaultYear) !== null && _a !== void 0 ? _a : today);
38
- const [selectedMonth, setSelectedMonth] = useState(defaultSelected);
39
- const [open, setOpen] = useState(false);
40
- const defaultInputValue = defaultSelected
41
- ? formatDateForInput(defaultSelected, locale, "month", inputFormat)
42
- : "";
43
- const [inputValue, setInputValue] = useState(defaultInputValue);
44
- const handleOpen = useCallback((newOpen) => {
45
- var _a, _b;
46
- setOpen(newOpen);
47
- newOpen &&
48
- setYear((_b = (_a = selectedMonth !== null && selectedMonth !== void 0 ? selectedMonth : defaultSelected) !== null && _a !== void 0 ? _a : defaultYear) !== null && _b !== void 0 ? _b : today);
49
- }, [defaultSelected, defaultYear, selectedMonth, today]);
50
- const updateMonth = (date) => {
51
- onMonthChange === null || onMonthChange === void 0 ? void 0 : onMonthChange(date);
52
- setSelectedMonth(date);
53
- };
54
- const updateValidation = (val = {}) => onValidate === null || onValidate === void 0 ? void 0 : onValidate(getValidationMessage(val));
55
- const reset = () => {
56
- var _a;
57
- updateMonth(defaultSelected);
58
- setYear((_a = defaultSelected !== null && defaultSelected !== void 0 ? defaultSelected : defaultYear) !== null && _a !== void 0 ? _a : today);
59
- setInputValue(defaultInputValue !== null && defaultInputValue !== void 0 ? defaultInputValue : "");
60
- setDefaultSelected(_defaultSelected);
61
- };
62
- const setSelected = (date) => {
63
- var _a;
64
- updateMonth(date);
65
- setYear((_a = date !== null && date !== void 0 ? date : defaultYear) !== null && _a !== void 0 ? _a : today);
66
- setInputValue(date ? formatDateForInput(date, locale, "month", inputFormat) : "");
67
- };
68
- const handleFocus = (e) => {
69
- var _a;
70
- if (e.target.readOnly) {
71
- return;
72
- }
73
- const day = parseDate(e.target.value, today, locale, "month", allowTwoDigitYear);
74
- const isBefore = getIsBefore({ fromDate, date: day });
75
- const isAfter = getIsAfter({ toDate, date: day });
76
- if (isValidDate(day)) {
77
- !isBefore && !isAfter && setYear(day);
78
- setInputValue(formatDateForInput(day, locale, "month", inputFormat));
79
- }
80
- else {
81
- setYear((_a = defaultSelected !== null && defaultSelected !== void 0 ? defaultSelected : defaultYear) !== null && _a !== void 0 ? _a : today);
82
- }
83
- };
84
- const handleBlur = (e) => {
85
- const day = parseDate(e.target.value, today, locale, "month", allowTwoDigitYear);
86
- isValidDate(day) &&
87
- setInputValue(formatDateForInput(day, locale, "month", inputFormat));
88
- };
89
- /* Only allow de-selecting if not required */
90
- const handleMonthClick = (month) => {
91
- if (!month && required) {
92
- return;
93
- }
94
- if (month) {
95
- handleOpen(false);
96
- setYear(month);
97
- anchorRef === null || anchorRef === void 0 ? void 0 : anchorRef.focus();
98
- }
99
- if (!month) {
100
- updateMonth(undefined);
101
- updateValidation({ isValidMonth: false, isEmpty: true });
102
- setInputValue("");
103
- setYear(defaultYear !== null && defaultYear !== void 0 ? defaultYear : today);
104
- return;
105
- }
106
- updateMonth(month);
107
- updateValidation();
108
- setInputValue(month ? formatDateForInput(month, locale, "month", inputFormat) : "");
109
- };
110
- // When changing the input field, save its value in state and check if the
111
- // string is a valid date. If it is a valid day, set it as selected and update
112
- // the calendar’s month.
113
- const handleChange = (e) => {
114
- setInputValue(e.target.value);
115
- const month = parseDate(e.target.value, today, locale, "month", allowTwoDigitYear);
116
- const isBefore = getIsBefore({ fromDate, date: month });
117
- const isAfter = getIsAfter({ toDate, date: month });
118
- if (!isValidDate(month) || (disabled && isMatch(month, disabled))) {
119
- updateMonth(undefined);
120
- updateValidation({
121
- isInvalid: isValidDate(month),
122
- isDisabled: disabled && isMatch(month, disabled),
123
- isValidMonth: false,
124
- isEmpty: !e.target.value,
125
- isBefore: isBefore !== null && isBefore !== void 0 ? isBefore : false,
126
- isAfter: isAfter !== null && isAfter !== void 0 ? isAfter : false,
127
- });
128
- return;
129
- }
130
- if (isAfter ||
131
- isBefore ||
132
- (fromDate && toDate && !isMatch(month, [{ from: fromDate, to: toDate }]))) {
133
- updateMonth(undefined);
134
- updateValidation({
135
- isValidMonth: false,
136
- isBefore: isBefore !== null && isBefore !== void 0 ? isBefore : false,
137
- isAfter: isAfter !== null && isAfter !== void 0 ? isAfter : false,
138
- });
139
- return;
140
- }
141
- updateMonth(month);
142
- updateValidation();
143
- setYear(month);
144
- };
145
- const monthpickerProps = {
146
- year,
147
- onYearChange: (y) => setYear(y !== null && y !== void 0 ? y : today),
148
- onMonthSelect: handleMonthClick,
149
- selected: selectedMonth,
150
- locale: _locale,
151
- fromDate,
152
- toDate,
153
- open,
154
- onOpenToggle: () => handleOpen(!open),
155
- onClose: () => {
156
- handleOpen(false);
157
- anchorRef === null || anchorRef === void 0 ? void 0 : anchorRef.focus();
158
- },
159
- disabled,
160
- };
161
- const inputProps = {
162
- onChange: handleChange,
163
- onFocus: handleFocus,
164
- onBlur: handleBlur,
165
- value: inputValue,
166
- setAnchorRef,
167
- };
168
- return { monthpickerProps, inputProps, reset, selectedMonth, setSelected };
169
- };
170
- //# sourceMappingURL=useMonthPicker.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"useMonthPicker.js","sourceRoot":"","sources":["../../../src/date/hooks/useMonthPicker.tsx"],"names":[],"mappings":"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"}
@@ -1,76 +0,0 @@
1
- import React from "react";
2
- import { DateRange } from "react-day-picker";
3
- import { DatePickerProps } from "../datepicker/DatePicker.js";
4
- import { DateInputProps } from "../parts/DateInput.js";
5
- import { DateValidationT, UseDatepickerOptions } from "./useDatepicker.js";
6
- export type RangeValidationT = {
7
- from: DateValidationT;
8
- to: DateValidationT & {
9
- isBeforeFrom?: boolean;
10
- };
11
- };
12
- interface UseRangeDatepickerOptions extends Omit<UseDatepickerOptions, "defaultSelected" | "onDateChange" | "onValidate"> {
13
- /**
14
- * The initially selected DateRange
15
- */
16
- defaultSelected?: DateRange;
17
- /**
18
- * Callback for changed state
19
- */
20
- onRangeChange?: (val?: DateRange) => void;
21
- /**
22
- * validation-callback
23
- */
24
- onValidate?: (val: RangeValidationT) => void;
25
- }
26
- interface UseRangeDatepickerValue {
27
- /**
28
- * Use: <DatePicker {...datepickerProps}/>
29
- */
30
- datepickerProps: DatePickerProps;
31
- /**
32
- * Use: <DatePicker.Input label="from" {...fromInputProps}/>
33
- */
34
- fromInputProps: Pick<DateInputProps, "onChange" | "onFocus" | "onBlur" | "value"> & {
35
- /**
36
- * @private
37
- */
38
- setAnchorRef: React.Dispatch<React.SetStateAction<HTMLButtonElement | null>>;
39
- };
40
- /**
41
- * Use: <DatePicker.Input label="to" {...toInputProps}/>
42
- */
43
- toInputProps: Pick<DateInputProps, "onChange" | "onFocus" | "onBlur" | "value"> & {
44
- /**
45
- * @private
46
- */
47
- setAnchorRef?: React.Dispatch<React.SetStateAction<HTMLButtonElement | null>>;
48
- };
49
- /**
50
- * Resets all states (callback)
51
- */
52
- reset: () => void;
53
- /**
54
- * Currently selected DateRange
55
- * Up to user to validate values
56
- */
57
- selectedRange?: DateRange;
58
- /**
59
- * Manually override currently selected day
60
- */
61
- setSelected: (date?: DateRange) => void;
62
- }
63
- /**
64
- *
65
- * @see 🏷️ {@link UseRangeDatepickerOptions}
66
- * @see 🏷️ {@link UseRangeDatepickerValue}
67
- * @see 🏷️ {@link RangeValidationT}
68
- * @example
69
- * const { datepickerProps, fromInputProps, toInputProps } = useRangeDatepicker({
70
- * fromDate: new Date("Aug 23 2019"),
71
- * onRangeChange: console.log,
72
- * onValidate: console.log,
73
- * });
74
- */
75
- export declare const useRangeDatepicker: (opt?: UseRangeDatepickerOptions) => UseRangeDatepickerValue;
76
- export {};
@@ -1,315 +0,0 @@
1
- import { isBefore as checkIsBefore, differenceInCalendarDays, isWeekend, } from "date-fns";
2
- import { useState } from "react";
3
- import { isMatch } from "react-day-picker";
4
- import { useDateLocale } from "../../util/i18n/i18n.hooks.js";
5
- import { formatDateForInput, getLocaleFromString, isValidDate, parseDate, } from "../utils/index.js";
6
- const getValidationMessage = (from = {}, to = {}) => ({
7
- from: Object.assign({ isDisabled: false, isWeekend: false, isEmpty: false, isInvalid: false, isBefore: false, isAfter: false, isValidDate: true }, from),
8
- to: Object.assign({ isDisabled: false, isWeekend: false, isEmpty: false, isInvalid: false, isBefore: false, isAfter: false, isBeforeFrom: false, isValidDate: true }, to),
9
- });
10
- const RANGE = {
11
- FROM: "FROM",
12
- TO: "TO",
13
- };
14
- const fromValidation = (day, opt) => {
15
- const isBefore = (opt === null || opt === void 0 ? void 0 : opt.fromDate) && day && differenceInCalendarDays(opt === null || opt === void 0 ? void 0 : opt.fromDate, day) > 0;
16
- const isAfter = (opt === null || opt === void 0 ? void 0 : opt.toDate) && day && differenceInCalendarDays(day, opt === null || opt === void 0 ? void 0 : opt.toDate) > 0;
17
- if (isValidDate(day) &&
18
- !((opt === null || opt === void 0 ? void 0 : opt.disableWeekends) && isWeekend(day)) &&
19
- !((opt === null || opt === void 0 ? void 0 : opt.disabled) && isMatch(day, opt.disabled))) {
20
- return {
21
- isValidDate: false,
22
- isInvalid: !isValidDate(day),
23
- isWeekend: (opt === null || opt === void 0 ? void 0 : opt.disableWeekends) && isWeekend(day),
24
- isDisabled: (opt === null || opt === void 0 ? void 0 : opt.disabled) && isMatch(day, opt.disabled),
25
- isBefore,
26
- isAfter,
27
- };
28
- }
29
- if (isBefore || isAfter) {
30
- return {
31
- isValidDate: false,
32
- isBefore,
33
- isAfter,
34
- };
35
- }
36
- };
37
- const toValidation = (day, from, opt) => {
38
- var _a;
39
- const isBefore = (opt === null || opt === void 0 ? void 0 : opt.fromDate) && day && differenceInCalendarDays(opt === null || opt === void 0 ? void 0 : opt.fromDate, day) > 0;
40
- const isAfter = (opt === null || opt === void 0 ? void 0 : opt.toDate) && day && differenceInCalendarDays(day, opt === null || opt === void 0 ? void 0 : opt.toDate) > 0;
41
- const isBeforeFrom = (_a = (from && differenceInCalendarDays(from, day) > 0)) !== null && _a !== void 0 ? _a : false;
42
- if (isValidDate(day) &&
43
- !((opt === null || opt === void 0 ? void 0 : opt.disableWeekends) && isWeekend(day)) &&
44
- !((opt === null || opt === void 0 ? void 0 : opt.disabled) && isMatch(day, opt.disabled))) {
45
- return {
46
- isValidDate: false,
47
- isInvalid: !isValidDate(day),
48
- isWeekend: (opt === null || opt === void 0 ? void 0 : opt.disableWeekends) && isWeekend(day),
49
- isDisabled: (opt === null || opt === void 0 ? void 0 : opt.disabled) && isMatch(day, opt.disabled),
50
- isBefore,
51
- isAfter,
52
- isBeforeFrom,
53
- };
54
- }
55
- if (isBefore || isAfter || isBeforeFrom) {
56
- return {
57
- isValidDate: false,
58
- isBefore,
59
- isAfter,
60
- isBeforeFrom,
61
- };
62
- }
63
- };
64
- const initialValidation = (range, opt) => {
65
- if (!range || !(range === null || range === void 0 ? void 0 : range.from)) {
66
- return getValidationMessage({ isEmpty: true, isValidDate: false }, { isEmpty: true, isValidDate: false });
67
- }
68
- const fromVal = fromValidation(range.from, opt);
69
- const toVal = range.to
70
- ? toValidation(range.to, range.from, opt)
71
- : { isEmpty: true, isValidDate: false };
72
- return getValidationMessage(Object.assign({}, fromVal), Object.assign({}, toVal));
73
- };
74
- /**
75
- *
76
- * @see 🏷️ {@link UseRangeDatepickerOptions}
77
- * @see 🏷️ {@link UseRangeDatepickerValue}
78
- * @see 🏷️ {@link RangeValidationT}
79
- * @example
80
- * const { datepickerProps, fromInputProps, toInputProps } = useRangeDatepicker({
81
- * fromDate: new Date("Aug 23 2019"),
82
- * onRangeChange: console.log,
83
- * onValidate: console.log,
84
- * });
85
- */
86
- export const useRangeDatepicker = (opt = {}) => {
87
- const { locale: _locale, defaultSelected: _defaultSelected, today = new Date(), fromDate, toDate, disabled, disableWeekends, onRangeChange, inputFormat, onValidate, defaultMonth, allowTwoDigitYear = true, } = opt;
88
- const [anchorRef, setAnchorRef] = useState(null);
89
- const localeFromProvider = useDateLocale();
90
- const locale = _locale ? getLocaleFromString(_locale) : localeFromProvider;
91
- const [defaultSelected, setDefaultSelected] = useState(_defaultSelected);
92
- // Initialize states
93
- const [month, setMonth] = useState(defaultSelected ? defaultSelected === null || defaultSelected === void 0 ? void 0 : defaultSelected.from : defaultMonth !== null && defaultMonth !== void 0 ? defaultMonth : today);
94
- const [selectedRange, setSelectedRange] = useState(defaultSelected !== null && defaultSelected !== void 0 ? defaultSelected : { from: undefined, to: undefined });
95
- const [fromInputValue, setFromInputValue] = useState((defaultSelected === null || defaultSelected === void 0 ? void 0 : defaultSelected.from)
96
- ? formatDateForInput(defaultSelected.from, locale, "date", inputFormat)
97
- : "");
98
- const [toInputValue, setToInputValue] = useState((defaultSelected === null || defaultSelected === void 0 ? void 0 : defaultSelected.to)
99
- ? formatDateForInput(defaultSelected.to, locale, "date", inputFormat)
100
- : "");
101
- const [validation, setValidation] = useState(initialValidation(selectedRange, opt));
102
- const [open, setOpen] = useState(false);
103
- const updateRange = (range) => {
104
- onRangeChange === null || onRangeChange === void 0 ? void 0 : onRangeChange(range);
105
- setSelectedRange(range);
106
- };
107
- const updateValidation = (from = {}, to = {}) => {
108
- const msg = getValidationMessage(from, to);
109
- setValidation(msg);
110
- onValidate === null || onValidate === void 0 ? void 0 : onValidate(msg);
111
- };
112
- const reset = () => {
113
- updateRange(defaultSelected !== null && defaultSelected !== void 0 ? defaultSelected : { from: undefined, to: undefined });
114
- setMonth(defaultSelected ? defaultSelected === null || defaultSelected === void 0 ? void 0 : defaultSelected.from : defaultMonth !== null && defaultMonth !== void 0 ? defaultMonth : today);
115
- setValidation(initialValidation(defaultSelected !== null && defaultSelected !== void 0 ? defaultSelected : { from: undefined, to: undefined }, opt));
116
- setFromInputValue((defaultSelected === null || defaultSelected === void 0 ? void 0 : defaultSelected.from)
117
- ? formatDateForInput(defaultSelected.from, locale, "date", inputFormat)
118
- : "");
119
- setToInputValue((defaultSelected === null || defaultSelected === void 0 ? void 0 : defaultSelected.to)
120
- ? formatDateForInput(defaultSelected.to, locale, "date", inputFormat)
121
- : "");
122
- setDefaultSelected(_defaultSelected);
123
- };
124
- const setSelected = (range) => {
125
- updateRange(range);
126
- setFromInputValue((range === null || range === void 0 ? void 0 : range.from)
127
- ? formatDateForInput(range.from, locale, "date", inputFormat)
128
- : "");
129
- setToInputValue((range === null || range === void 0 ? void 0 : range.to)
130
- ? formatDateForInput(range === null || range === void 0 ? void 0 : range.to, locale, "date", inputFormat)
131
- : "");
132
- setValidation(initialValidation(range, opt));
133
- };
134
- const handleFocus = (e, src) => {
135
- if (e.target.readOnly) {
136
- return;
137
- }
138
- const day = parseDate(e.target.value, today, locale, "date", allowTwoDigitYear);
139
- if (isValidDate(day)) {
140
- src === RANGE.FROM
141
- ? setFromInputValue(formatDateForInput(day, locale, "date", inputFormat))
142
- : setToInputValue(formatDateForInput(day, locale, "date", inputFormat));
143
- const isBefore = fromDate && day && differenceInCalendarDays(fromDate, day) > 0;
144
- const isAfter = toDate && day && differenceInCalendarDays(day, toDate) > 0;
145
- !isBefore && !isAfter && setMonth(day);
146
- }
147
- };
148
- const handleBlur = (e, src) => {
149
- const day = parseDate(e.target.value, today, locale, "date", allowTwoDigitYear);
150
- if (!isValidDate(day)) {
151
- return;
152
- }
153
- if (src === RANGE.FROM) {
154
- setFromInputValue(formatDateForInput(day, locale, "date", inputFormat));
155
- }
156
- else if (src === RANGE.TO) {
157
- setToInputValue(formatDateForInput(day, locale, "date", inputFormat));
158
- }
159
- };
160
- const validateDay = (day) => {
161
- return (isValidDate(day) &&
162
- !(disableWeekends && isWeekend(day)) &&
163
- !(disabled && isMatch(day, disabled)));
164
- };
165
- const handleSelect = (range) => {
166
- if ((range === null || range === void 0 ? void 0 : range.from) && (range === null || range === void 0 ? void 0 : range.to)) {
167
- setOpen(false);
168
- anchorRef === null || anchorRef === void 0 ? void 0 : anchorRef.focus();
169
- }
170
- const prevToRange = !(selectedRange === null || selectedRange === void 0 ? void 0 : selectedRange.from) && (selectedRange === null || selectedRange === void 0 ? void 0 : selectedRange.to) ? selectedRange === null || selectedRange === void 0 ? void 0 : selectedRange.to : range === null || range === void 0 ? void 0 : range.to;
171
- const resetTo = checkIsBefore(prevToRange, range === null || range === void 0 ? void 0 : range.from);
172
- (range === null || range === void 0 ? void 0 : range.from)
173
- ? setFromInputValue(formatDateForInput(range === null || range === void 0 ? void 0 : range.from, locale, "date", inputFormat))
174
- : setFromInputValue("");
175
- prevToRange && !resetTo
176
- ? setToInputValue(formatDateForInput(prevToRange, locale, "date", inputFormat))
177
- : setToInputValue("");
178
- updateRange({ from: range === null || range === void 0 ? void 0 : range.from, to: resetTo ? undefined : prevToRange });
179
- updateValidation({ isValidDate: !!(range === null || range === void 0 ? void 0 : range.from), isEmpty: !(range === null || range === void 0 ? void 0 : range.from) }, { isValidDate: !!(range === null || range === void 0 ? void 0 : range.to), isEmpty: !prevToRange || resetTo });
180
- };
181
- const fromChange = (val = "", day, isBefore = false, isAfter = false) => {
182
- setFromInputValue(val);
183
- if (!validateDay(day)) {
184
- updateRange(Object.assign(Object.assign({}, selectedRange), { from: undefined }));
185
- updateValidation({
186
- isEmpty: !val,
187
- isValidDate: false,
188
- isInvalid: !isValidDate(day),
189
- isWeekend: disableWeekends && isWeekend(day),
190
- isDisabled: disabled && isMatch(day, disabled),
191
- isBefore,
192
- isAfter,
193
- }, validation.to);
194
- return;
195
- }
196
- if (isBefore || isAfter) {
197
- updateRange(Object.assign(Object.assign({}, selectedRange), { from: undefined }));
198
- updateValidation({
199
- isValidDate: false,
200
- isBefore,
201
- isAfter,
202
- }, validation.to);
203
- return;
204
- }
205
- if ((selectedRange === null || selectedRange === void 0 ? void 0 : selectedRange.to) &&
206
- differenceInCalendarDays(day, selectedRange === null || selectedRange === void 0 ? void 0 : selectedRange.to) > 0) {
207
- updateRange({ to: day, from: day });
208
- setToInputValue(formatDateForInput(day, locale, "date", inputFormat));
209
- setMonth(day);
210
- updateValidation();
211
- return;
212
- }
213
- if (toInputValue && !(selectedRange === null || selectedRange === void 0 ? void 0 : selectedRange.to)) {
214
- const toDay = parseDate(toInputValue, today, locale, "date", allowTwoDigitYear);
215
- if (validateDay(toDay)) {
216
- updateRange({ from: day, to: toDay });
217
- setMonth(day);
218
- updateValidation();
219
- return;
220
- }
221
- }
222
- updateRange(Object.assign(Object.assign({}, selectedRange), { from: day }));
223
- updateValidation({}, validation.to);
224
- setMonth(day);
225
- };
226
- const toChange = (val = "", day, isBefore = false, isAfter = false) => {
227
- setToInputValue(val);
228
- if (!validateDay(day)) {
229
- updateRange({ from: selectedRange === null || selectedRange === void 0 ? void 0 : selectedRange.from, to: undefined });
230
- updateValidation(validation.from, {
231
- isEmpty: !val,
232
- isValidDate: false,
233
- isInvalid: !isValidDate(day),
234
- isWeekend: disableWeekends && isWeekend(day),
235
- isDisabled: disabled && isMatch(day, disabled),
236
- isBefore,
237
- isAfter,
238
- });
239
- return;
240
- }
241
- if (isBefore || isAfter) {
242
- updateRange({ from: selectedRange === null || selectedRange === void 0 ? void 0 : selectedRange.from, to: undefined });
243
- updateValidation(validation.from, {
244
- isValidDate: false,
245
- isBefore,
246
- isAfter,
247
- });
248
- return;
249
- }
250
- /* If to-value < from-value */
251
- if ((selectedRange === null || selectedRange === void 0 ? void 0 : selectedRange.from) &&
252
- differenceInCalendarDays(selectedRange === null || selectedRange === void 0 ? void 0 : selectedRange.from, day) > 0) {
253
- updateRange({ from: selectedRange === null || selectedRange === void 0 ? void 0 : selectedRange.from, to: undefined });
254
- updateValidation(validation.from, {
255
- isValidDate: false,
256
- isBeforeFrom: true,
257
- });
258
- return;
259
- }
260
- updateRange({ from: selectedRange === null || selectedRange === void 0 ? void 0 : selectedRange.from, to: day });
261
- updateValidation(validation.from, {});
262
- setMonth(day);
263
- };
264
- /* live-update datepicker based on changes in inputfields */
265
- const handleChange = (e, src) => {
266
- const day = parseDate(e.target.value, today, locale, "date", allowTwoDigitYear);
267
- const isBefore = fromDate && differenceInCalendarDays(fromDate, day) > 0;
268
- const isAfter = toDate && differenceInCalendarDays(day, toDate) > 0;
269
- return src === RANGE.FROM
270
- ? fromChange(e.target.value, day, isBefore, isAfter)
271
- : toChange(e.target.value, day, isBefore, isAfter);
272
- };
273
- const datepickerProps = {
274
- month,
275
- onMonthChange: setMonth,
276
- onSelect: handleSelect,
277
- selected: selectedRange,
278
- locale: _locale,
279
- fromDate,
280
- toDate,
281
- today,
282
- mode: "range",
283
- open,
284
- onOpenToggle: () => setOpen((x) => !x),
285
- onClose: () => {
286
- setOpen(false);
287
- anchorRef === null || anchorRef === void 0 ? void 0 : anchorRef.focus();
288
- },
289
- disabled,
290
- disableWeekends,
291
- };
292
- const fromInputProps = {
293
- onChange: (e) => handleChange(e, RANGE.FROM),
294
- onFocus: (e) => handleFocus(e, RANGE.FROM),
295
- onBlur: (e) => handleBlur(e, RANGE.FROM),
296
- value: fromInputValue,
297
- setAnchorRef,
298
- };
299
- const toInputProps = {
300
- onChange: (e) => handleChange(e, RANGE.TO),
301
- onFocus: (e) => handleFocus(e, RANGE.TO),
302
- onBlur: (e) => handleBlur(e, RANGE.TO),
303
- value: toInputValue,
304
- setAnchorRef,
305
- };
306
- return {
307
- datepickerProps,
308
- fromInputProps,
309
- toInputProps,
310
- reset,
311
- selectedRange,
312
- setSelected,
313
- };
314
- };
315
- //# sourceMappingURL=useRangeDatepicker.js.map