@navikt/ds-react 1.3.19 → 1.3.21
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/cjs/date/datepicker/DatePicker.js +3 -3
- package/cjs/date/datepicker/DatePickerStandalone.js +3 -3
- package/cjs/date/datepicker/DayButton.js +5 -2
- package/cjs/date/datepicker/caption/DropdownCaption.js +5 -3
- package/cjs/date/hooks/useDatepicker.js +8 -4
- package/cjs/date/hooks/useRangeDatepicker.js +12 -8
- package/cjs/date/hooks/useSharedMonthContext.js +6 -2
- package/cjs/date/monthpicker/MonthButton.js +14 -10
- package/cjs/date/monthpicker/MonthCaption.js +9 -6
- package/cjs/date/monthpicker/MonthSelector.js +11 -8
- package/cjs/date/utils/check-dates.js +6 -2
- package/cjs/date/utils/dates-disabled.js +6 -3
- package/cjs/date/utils/format-date.js +5 -2
- package/cjs/date/utils/get-dates.js +20 -13
- package/cjs/date/utils/get-initial-year.js +5 -2
- package/cjs/date/utils/is-match.js +20 -14
- package/cjs/date/utils/navigation.js +24 -21
- package/cjs/date/utils/parse-date.js +5 -2
- package/cjs/tooltip/Tooltip.js +1 -1
- package/esm/date/datepicker/DatePicker.js +1 -1
- package/esm/date/datepicker/DatePicker.js.map +1 -1
- package/esm/date/datepicker/DatePickerStandalone.js +1 -1
- package/esm/date/datepicker/DatePickerStandalone.js.map +1 -1
- package/esm/date/datepicker/DayButton.js +1 -1
- package/esm/date/datepicker/DayButton.js.map +1 -1
- package/esm/date/datepicker/caption/DropdownCaption.js +3 -1
- package/esm/date/datepicker/caption/DropdownCaption.js.map +1 -1
- package/esm/date/hooks/useDatepicker.js +2 -1
- package/esm/date/hooks/useDatepicker.js.map +1 -1
- package/esm/date/hooks/useRangeDatepicker.js +2 -1
- package/esm/date/hooks/useRangeDatepicker.js.map +1 -1
- package/esm/date/hooks/useSharedMonthContext.js +2 -1
- package/esm/date/hooks/useSharedMonthContext.js.map +1 -1
- package/esm/date/monthpicker/MonthButton.js +5 -1
- package/esm/date/monthpicker/MonthButton.js.map +1 -1
- package/esm/date/monthpicker/MonthCaption.js +4 -1
- package/esm/date/monthpicker/MonthCaption.js.map +1 -1
- package/esm/date/monthpicker/MonthSelector.js +4 -1
- package/esm/date/monthpicker/MonthSelector.js.map +1 -1
- package/esm/date/utils/check-dates.js +2 -1
- package/esm/date/utils/check-dates.js.map +1 -1
- package/esm/date/utils/dates-disabled.js +1 -1
- package/esm/date/utils/dates-disabled.js.map +1 -1
- package/esm/date/utils/format-date.js +1 -1
- package/esm/date/utils/format-date.js.map +1 -1
- package/esm/date/utils/get-dates.js +5 -1
- package/esm/date/utils/get-dates.js.map +1 -1
- package/esm/date/utils/get-initial-year.js +1 -1
- package/esm/date/utils/get-initial-year.js.map +1 -1
- package/esm/date/utils/is-match.js +4 -1
- package/esm/date/utils/is-match.js.map +1 -1
- package/esm/date/utils/navigation.js +1 -1
- package/esm/date/utils/navigation.js.map +1 -1
- package/esm/date/utils/parse-date.js +1 -1
- package/esm/date/utils/parse-date.js.map +1 -1
- package/esm/tooltip/Tooltip.js +1 -1
- package/esm/tooltip/Tooltip.js.map +1 -1
- package/package.json +3 -4
- package/src/date/datepicker/DatePicker.tsx +1 -1
- package/src/date/datepicker/DatePickerStandalone.tsx +1 -1
- package/src/date/datepicker/DayButton.tsx +1 -1
- package/src/date/datepicker/caption/DropdownCaption.tsx +3 -1
- package/src/date/datepicker/datepicker.stories.tsx +1 -1
- package/src/date/hooks/useDatepicker.tsx +2 -1
- package/src/date/hooks/useRangeDatepicker.tsx +2 -1
- package/src/date/hooks/useSharedMonthContext.tsx +2 -1
- package/src/date/monthpicker/MonthButton.tsx +5 -7
- package/src/date/monthpicker/MonthCaption.tsx +4 -1
- package/src/date/monthpicker/MonthSelector.tsx +4 -1
- package/src/date/utils/__tests__/get-initial-year.test.ts +1 -1
- package/src/date/utils/__tests__/parse-dates.test.ts +2 -1
- package/src/date/utils/check-dates.ts +2 -1
- package/src/date/utils/dates-disabled.ts +1 -1
- package/src/date/utils/format-date.ts +1 -1
- package/src/date/utils/get-dates.ts +5 -7
- package/src/date/utils/get-initial-year.ts +1 -1
- package/src/date/utils/is-match.ts +5 -6
- package/src/date/utils/navigation.ts +1 -1
- package/src/date/utils/parse-date.ts +1 -1
- package/src/tooltip/Tooltip.tsx +1 -1
- package/src/tooltip/tooltip.stories.tsx +5 -1
|
@@ -39,7 +39,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
|
39
39
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
40
40
|
exports.DatePicker = void 0;
|
|
41
41
|
const clsx_1 = __importDefault(require("clsx"));
|
|
42
|
-
const
|
|
42
|
+
const isWeekend_1 = __importDefault(require("date-fns/isWeekend"));
|
|
43
43
|
const react_1 = __importStar(require("react"));
|
|
44
44
|
const react_day_picker_1 = require("react-day-picker");
|
|
45
45
|
const __1 = require("../..");
|
|
@@ -102,10 +102,10 @@ exports.DatePicker = (0, react_1.forwardRef)((_a, ref) => {
|
|
|
102
102
|
}, className: (0, clsx_1.default)("navds-date", className), classNames: {
|
|
103
103
|
vhidden: "navds-sr-only",
|
|
104
104
|
}, disabled: (day) => {
|
|
105
|
-
return ((disableWeekends && (0,
|
|
105
|
+
return ((disableWeekends && (0, isWeekend_1.default)(day)) ||
|
|
106
106
|
(0, react_day_picker_1.isMatch)(day, disabled));
|
|
107
107
|
}, weekStartsOn: 1, initialFocus: false, labels: utils_1.labels, modifiers: {
|
|
108
|
-
weekend: (day) => disableWeekends && (0,
|
|
108
|
+
weekend: (day) => disableWeekends && (0, isWeekend_1.default)(day),
|
|
109
109
|
}, modifiersClassNames: {
|
|
110
110
|
weekend: "rdp-day__weekend",
|
|
111
111
|
}, showWeekNumber: showWeekNumber }, (0, __1.omit)(rest, ["onSelect"]))))))));
|
|
@@ -39,7 +39,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
|
39
39
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
40
40
|
exports.DatePickerStandalone = void 0;
|
|
41
41
|
const clsx_1 = __importDefault(require("clsx"));
|
|
42
|
-
const
|
|
42
|
+
const isWeekend_1 = __importDefault(require("date-fns/isWeekend"));
|
|
43
43
|
const react_1 = __importStar(require("react"));
|
|
44
44
|
const react_day_picker_1 = require("react-day-picker");
|
|
45
45
|
const __1 = require("../..");
|
|
@@ -73,9 +73,9 @@ exports.DatePickerStandalone = (0, react_1.forwardRef)((_a, ref) => {
|
|
|
73
73
|
react_1.default.createElement(react_day_picker_1.DayPicker, Object.assign({ locale: (0, utils_1.getLocaleFromString)(locale) }, overrideProps, { selected: selected !== null && selected !== void 0 ? selected : selectedDates, components: {
|
|
74
74
|
Caption: dropdownCaption ? caption_1.DropdownCaption : caption_1.Caption,
|
|
75
75
|
}, className: "navds-date", classNames: { vhidden: "navds-sr-only" }, disabled: (day) => {
|
|
76
|
-
return ((disableWeekends && (0,
|
|
76
|
+
return ((disableWeekends && (0, isWeekend_1.default)(day)) || (0, react_day_picker_1.isMatch)(day, disabled));
|
|
77
77
|
}, weekStartsOn: 1, initialFocus: false, labels: utils_1.labels, modifiers: {
|
|
78
|
-
weekend: (day) => disableWeekends && (0,
|
|
78
|
+
weekend: (day) => disableWeekends && (0, isWeekend_1.default)(day),
|
|
79
79
|
}, modifiersClassNames: {
|
|
80
80
|
weekend: "rdp-day__weekend",
|
|
81
81
|
}, showWeekNumber: showWeekNumber }, (0, __1.omit)(rest, ["onSelect"])))));
|
|
@@ -22,16 +22,19 @@ var __importStar = (this && this.__importStar) || function (mod) {
|
|
|
22
22
|
__setModuleDefault(result, mod);
|
|
23
23
|
return result;
|
|
24
24
|
};
|
|
25
|
+
var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
26
|
+
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
27
|
+
};
|
|
25
28
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
26
29
|
exports.DayButton = void 0;
|
|
27
|
-
const
|
|
30
|
+
const format_1 = __importDefault(require("date-fns/format"));
|
|
28
31
|
const react_1 = __importStar(require("react"));
|
|
29
32
|
const react_day_picker_1 = require("react-day-picker");
|
|
30
33
|
const DayButton = (props) => {
|
|
31
34
|
const buttonRef = (0, react_1.useRef)(null);
|
|
32
35
|
const dayRender = (0, react_day_picker_1.useDayRender)(props.date, props.displayMonth, buttonRef);
|
|
33
36
|
const { locale } = (0, react_day_picker_1.useDayPicker)();
|
|
34
|
-
const dateTime = (0,
|
|
37
|
+
const dateTime = (0, format_1.default)(props.date, "cccc d", { locale });
|
|
35
38
|
if (dayRender.isHidden) {
|
|
36
39
|
return react_1.default.createElement(react_1.default.Fragment, null);
|
|
37
40
|
}
|
|
@@ -5,7 +5,9 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
|
5
5
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
6
6
|
exports.DropdownCaption = void 0;
|
|
7
7
|
const ds_icons_1 = require("@navikt/ds-icons");
|
|
8
|
-
const
|
|
8
|
+
const setMonth_1 = __importDefault(require("date-fns/setMonth"));
|
|
9
|
+
const setYear_1 = __importDefault(require("date-fns/setYear"));
|
|
10
|
+
const startOfMonth_1 = __importDefault(require("date-fns/startOfMonth"));
|
|
9
11
|
const react_1 = __importDefault(require("react"));
|
|
10
12
|
const react_day_picker_1 = require("react-day-picker");
|
|
11
13
|
const __1 = require("../../..");
|
|
@@ -18,8 +20,8 @@ const DropdownCaption = ({ displayMonth, id }) => {
|
|
|
18
20
|
console.warn("Using dropdownCaption required fromDate and toDate");
|
|
19
21
|
return null;
|
|
20
22
|
}
|
|
21
|
-
const handleYearChange = (e) => goToMonth((0,
|
|
22
|
-
const handleMonthChange = (e) => goToMonth((0,
|
|
23
|
+
const handleYearChange = (e) => goToMonth((0, setYear_1.default)((0, startOfMonth_1.default)(displayMonth), Number(e.target.value)));
|
|
24
|
+
const handleMonthChange = (e) => goToMonth((0, setMonth_1.default)((0, startOfMonth_1.default)(displayMonth), Number(e.target.value)));
|
|
23
25
|
const years = (0, get_dates_1.getYears)(fromDate, toDate);
|
|
24
26
|
const months = (0, get_dates_1.getMonths)(fromDate, toDate, displayMonth);
|
|
25
27
|
const previousLabel = labelPrevious(previousMonth, { locale });
|
|
@@ -1,7 +1,11 @@
|
|
|
1
1
|
"use strict";
|
|
2
|
+
var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
3
|
+
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
4
|
+
};
|
|
2
5
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
6
|
exports.useDatepicker = void 0;
|
|
4
|
-
const
|
|
7
|
+
const differenceInCalendarDays_1 = __importDefault(require("date-fns/differenceInCalendarDays"));
|
|
8
|
+
const isWeekend_1 = __importDefault(require("date-fns/isWeekend"));
|
|
5
9
|
const react_1 = require("react");
|
|
6
10
|
const react_day_picker_1 = require("react-day-picker");
|
|
7
11
|
const utils_1 = require("../utils");
|
|
@@ -86,12 +90,12 @@ const useDatepicker = (opt = {}) => {
|
|
|
86
90
|
const day = (0, utils_1.parseDate)(e.target.value, today, locale, "date");
|
|
87
91
|
if (!(0, utils_1.isValidDate)(day) ||
|
|
88
92
|
(disabled &&
|
|
89
|
-
((disableWeekends && (0,
|
|
93
|
+
((disableWeekends && (0, isWeekend_1.default)(day)) || (0, react_day_picker_1.isMatch)(day, disabled)))) {
|
|
90
94
|
setSelectedDay(undefined);
|
|
91
95
|
return;
|
|
92
96
|
}
|
|
93
|
-
const isBefore = fromDate && (0,
|
|
94
|
-
const isAfter = toDate && (0,
|
|
97
|
+
const isBefore = fromDate && (0, differenceInCalendarDays_1.default)(fromDate, day) > 0;
|
|
98
|
+
const isAfter = toDate && (0, differenceInCalendarDays_1.default)(day, toDate) > 0;
|
|
95
99
|
if (isBefore || isAfter) {
|
|
96
100
|
setSelectedDay(undefined);
|
|
97
101
|
return;
|
|
@@ -1,7 +1,11 @@
|
|
|
1
1
|
"use strict";
|
|
2
|
+
var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
3
|
+
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
4
|
+
};
|
|
2
5
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
6
|
exports.useRangeDatepicker = void 0;
|
|
4
|
-
const
|
|
7
|
+
const differenceInCalendarDays_1 = __importDefault(require("date-fns/differenceInCalendarDays"));
|
|
8
|
+
const isWeekend_1 = __importDefault(require("date-fns/isWeekend"));
|
|
5
9
|
const react_1 = require("react");
|
|
6
10
|
const react_day_picker_1 = require("react-day-picker");
|
|
7
11
|
const utils_1 = require("../utils");
|
|
@@ -74,7 +78,7 @@ const useRangeDatepicker = (opt = {}) => {
|
|
|
74
78
|
const handleInputs = (day, src) => {
|
|
75
79
|
if (src === RANGE.FROM) {
|
|
76
80
|
const isAfter = toInputValue &&
|
|
77
|
-
(0,
|
|
81
|
+
(0, differenceInCalendarDays_1.default)(day, (0, utils_1.parseDate)(toInputValue, today, locale, "date")) > 0;
|
|
78
82
|
if (isAfter) {
|
|
79
83
|
setFromInputValue((0, utils_1.formatDateForInput)((0, utils_1.parseDate)(toInputValue, today, locale, "date"), locale, "date"));
|
|
80
84
|
setToInputValue((0, utils_1.formatDateForInput)(day, locale, "date"));
|
|
@@ -85,7 +89,7 @@ const useRangeDatepicker = (opt = {}) => {
|
|
|
85
89
|
}
|
|
86
90
|
else if (src === RANGE.TO) {
|
|
87
91
|
const isBefore = fromInputValue &&
|
|
88
|
-
(0,
|
|
92
|
+
(0, differenceInCalendarDays_1.default)((0, utils_1.parseDate)(fromInputValue, today, locale, "date"), day) > 0;
|
|
89
93
|
if (isBefore) {
|
|
90
94
|
setToInputValue((0, utils_1.formatDateForInput)((0, utils_1.parseDate)(fromInputValue, today, locale, "date"), locale, "date"));
|
|
91
95
|
setFromInputValue((0, utils_1.formatDateForInput)(day, locale, "date"));
|
|
@@ -123,13 +127,13 @@ const useRangeDatepicker = (opt = {}) => {
|
|
|
123
127
|
const day = (0, utils_1.parseDate)(e.target.value, today, locale, "date");
|
|
124
128
|
if (!(0, utils_1.isValidDate)(day) ||
|
|
125
129
|
(disabled &&
|
|
126
|
-
((disableWeekends && (0,
|
|
130
|
+
((disableWeekends && (0, isWeekend_1.default)(day)) || (0, react_day_picker_1.isMatch)(day, disabled)))) {
|
|
127
131
|
setSelectedRange((x) => src === RANGE.FROM
|
|
128
132
|
? Object.assign(Object.assign({}, x), { from: undefined }) : { from: x === null || x === void 0 ? void 0 : x.from, to: undefined });
|
|
129
133
|
return;
|
|
130
134
|
}
|
|
131
|
-
const isBefore = fromDate && (0,
|
|
132
|
-
const isAfter = toDate && (0,
|
|
135
|
+
const isBefore = fromDate && (0, differenceInCalendarDays_1.default)(fromDate, day) > 0;
|
|
136
|
+
const isAfter = toDate && (0, differenceInCalendarDays_1.default)(day, toDate) > 0;
|
|
133
137
|
if (isBefore || isAfter) {
|
|
134
138
|
src === RANGE.FROM
|
|
135
139
|
? setSelectedRange((x) => (Object.assign(Object.assign({}, x), { from: undefined })))
|
|
@@ -139,7 +143,7 @@ const useRangeDatepicker = (opt = {}) => {
|
|
|
139
143
|
/* If to-value < from-value, switch places in state */
|
|
140
144
|
if (src === RANGE.TO &&
|
|
141
145
|
(selectedRange === null || selectedRange === void 0 ? void 0 : selectedRange.from) &&
|
|
142
|
-
(0,
|
|
146
|
+
(0, differenceInCalendarDays_1.default)(selectedRange === null || selectedRange === void 0 ? void 0 : selectedRange.from, day) >= 0) {
|
|
143
147
|
setSelectedRange({ from: day, to: selectedRange === null || selectedRange === void 0 ? void 0 : selectedRange.from });
|
|
144
148
|
setMonth(day);
|
|
145
149
|
return;
|
|
@@ -147,7 +151,7 @@ const useRangeDatepicker = (opt = {}) => {
|
|
|
147
151
|
/* If from-value > to-value , switch places in state */
|
|
148
152
|
if (src === RANGE.FROM &&
|
|
149
153
|
(selectedRange === null || selectedRange === void 0 ? void 0 : selectedRange.to) &&
|
|
150
|
-
(0,
|
|
154
|
+
(0, differenceInCalendarDays_1.default)(day, selectedRange === null || selectedRange === void 0 ? void 0 : selectedRange.to) >= 0) {
|
|
151
155
|
setSelectedRange({ to: day, from: selectedRange === null || selectedRange === void 0 ? void 0 : selectedRange.to });
|
|
152
156
|
setMonth(day);
|
|
153
157
|
return;
|
|
@@ -22,9 +22,13 @@ var __importStar = (this && this.__importStar) || function (mod) {
|
|
|
22
22
|
__setModuleDefault(result, mod);
|
|
23
23
|
return result;
|
|
24
24
|
};
|
|
25
|
+
var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
26
|
+
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
27
|
+
};
|
|
25
28
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
26
29
|
exports.SharedMonthProvider = exports.useSharedMonthContext = exports.SharedMonthContext = void 0;
|
|
27
|
-
const
|
|
30
|
+
const setYear_1 = __importDefault(require("date-fns/setYear"));
|
|
31
|
+
const startOfMonth_1 = __importDefault(require("date-fns/startOfMonth"));
|
|
28
32
|
const react_1 = __importStar(require("react"));
|
|
29
33
|
const react_day_picker_1 = require("react-day-picker");
|
|
30
34
|
const utils_1 = require("../utils");
|
|
@@ -56,7 +60,7 @@ const SharedMonthProvider = ({ children, dropdownCaption, disabled, selected, on
|
|
|
56
60
|
disabled,
|
|
57
61
|
selected,
|
|
58
62
|
onSelect: (v) => v
|
|
59
|
-
? onSelect((0,
|
|
63
|
+
? onSelect((0, setYear_1.default)((0, startOfMonth_1.default)(v), (_year !== null && _year !== void 0 ? _year : year).getFullYear()))
|
|
60
64
|
: onSelect(undefined),
|
|
61
65
|
} }, children));
|
|
62
66
|
};
|
|
@@ -28,20 +28,24 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
|
28
28
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
29
29
|
exports.MonthButton = void 0;
|
|
30
30
|
const clsx_1 = __importDefault(require("clsx"));
|
|
31
|
-
const
|
|
31
|
+
const compareAsc_1 = __importDefault(require("date-fns/compareAsc"));
|
|
32
|
+
const compareDesc_1 = __importDefault(require("date-fns/compareDesc"));
|
|
33
|
+
const format_1 = __importDefault(require("date-fns/format"));
|
|
34
|
+
const isSameMonth_1 = __importDefault(require("date-fns/isSameMonth"));
|
|
35
|
+
const setYear_1 = __importDefault(require("date-fns/setYear"));
|
|
32
36
|
const react_1 = __importStar(require("react"));
|
|
33
37
|
const react_day_picker_1 = require("react-day-picker");
|
|
34
38
|
const hooks_1 = require("../hooks");
|
|
35
39
|
const utils_1 = require("../utils");
|
|
36
40
|
const disableMonth = (month, fromDate, toDate) => {
|
|
37
41
|
if (fromDate && toDate) {
|
|
38
|
-
return ((0,
|
|
42
|
+
return ((0, compareAsc_1.default)(month, fromDate) === -1 || (0, compareDesc_1.default)(month, toDate) === -1);
|
|
39
43
|
}
|
|
40
44
|
else if (fromDate) {
|
|
41
|
-
return (0,
|
|
45
|
+
return (0, compareAsc_1.default)(month, fromDate) === -1;
|
|
42
46
|
}
|
|
43
47
|
else if (toDate) {
|
|
44
|
-
return (0,
|
|
48
|
+
return (0, compareDesc_1.default)(month, toDate) === -1;
|
|
45
49
|
}
|
|
46
50
|
return false;
|
|
47
51
|
};
|
|
@@ -49,20 +53,20 @@ const MonthButton = ({ month, months, focus, setFocus, tabRoot, setTabRoot, }) =
|
|
|
49
53
|
const ref = (0, react_1.useRef)(null);
|
|
50
54
|
const { hasDropdown, selected, onSelect, year, toYear, disabled } = (0, hooks_1.useSharedMonthContext)();
|
|
51
55
|
const { fromDate, toDate, locale } = (0, react_day_picker_1.useDayPicker)();
|
|
52
|
-
const isSelected = selected && (0,
|
|
56
|
+
const isSelected = selected && (0, isSameMonth_1.default)(month, selected);
|
|
53
57
|
(0, react_1.useEffect)(() => {
|
|
54
58
|
if (focus) {
|
|
55
|
-
(0,
|
|
59
|
+
(0, isSameMonth_1.default)(month, focus) && ref.current && ref.current.focus();
|
|
56
60
|
setFocus();
|
|
57
61
|
}
|
|
58
62
|
}, [focus, month, setFocus]);
|
|
59
|
-
const isDisabled = (0, utils_1.isMatch)((0,
|
|
63
|
+
const isDisabled = (0, utils_1.isMatch)((0, setYear_1.default)(month, year.getFullYear()), disabled) ||
|
|
60
64
|
disableMonth(month, fromDate, toDate);
|
|
61
65
|
return (react_1.default.createElement("button", { ref: ref, type: "button", onClick: () => onSelect(isSelected ? undefined : month), disabled: isDisabled, className: (0, clsx_1.default)("navds-date__month-button", {
|
|
62
66
|
"rdp-day_today": (0, utils_1.dateIsInCurrentMonth)(month, year),
|
|
63
67
|
"rdp-day_selected": isSelected,
|
|
64
68
|
"rdp-day_disabled": isDisabled,
|
|
65
|
-
}), tabIndex: tabRoot && (0,
|
|
69
|
+
}), tabIndex: tabRoot && (0, isSameMonth_1.default)(month, (0, setYear_1.default)(tabRoot, year.getFullYear()))
|
|
66
70
|
? 0
|
|
67
71
|
: -1, onKeyDown: (e) => {
|
|
68
72
|
const next = (0, utils_1.nextEnabled)(months, e.key, disabled, month, toYear, year, hasDropdown, fromDate, toDate);
|
|
@@ -71,10 +75,10 @@ const MonthButton = ({ month, months, focus, setFocus, tabRoot, setTabRoot, }) =
|
|
|
71
75
|
}, onFocus: () => {
|
|
72
76
|
setTabRoot(focus);
|
|
73
77
|
} },
|
|
74
|
-
react_1.default.createElement("span", { "aria-hidden": "true" }, (0,
|
|
78
|
+
react_1.default.createElement("span", { "aria-hidden": "true" }, (0, format_1.default)(new Date(month), "LLL", { locale })
|
|
75
79
|
.replace(".", "")
|
|
76
80
|
.substring(0, 3)),
|
|
77
|
-
react_1.default.createElement("span", { className: "navds-sr-only" }, (0,
|
|
81
|
+
react_1.default.createElement("span", { className: "navds-sr-only" }, (0, format_1.default)(new Date(month), "LLLL", { locale }))));
|
|
78
82
|
};
|
|
79
83
|
exports.MonthButton = MonthButton;
|
|
80
84
|
exports.default = exports.MonthButton;
|
|
@@ -5,7 +5,10 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
|
5
5
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
6
6
|
exports.MonthCaption = void 0;
|
|
7
7
|
const ds_icons_1 = require("@navikt/ds-icons");
|
|
8
|
-
const
|
|
8
|
+
const isSameYear_1 = __importDefault(require("date-fns/isSameYear"));
|
|
9
|
+
const setYear_1 = __importDefault(require("date-fns/setYear"));
|
|
10
|
+
const startOfMonth_1 = __importDefault(require("date-fns/startOfMonth"));
|
|
11
|
+
const startOfYear_1 = __importDefault(require("date-fns/startOfYear"));
|
|
9
12
|
const react_1 = __importDefault(require("react"));
|
|
10
13
|
const react_day_picker_1 = require("react-day-picker");
|
|
11
14
|
const __1 = require("../..");
|
|
@@ -19,24 +22,24 @@ const MonthCaption = () => {
|
|
|
19
22
|
const fromYear = fromDate.getFullYear();
|
|
20
23
|
const toYear = toDate.getFullYear();
|
|
21
24
|
for (let year = fromYear; year <= toYear; year++) {
|
|
22
|
-
years.push((0,
|
|
25
|
+
years.push((0, setYear_1.default)((0, startOfYear_1.default)(new Date()), year));
|
|
23
26
|
}
|
|
24
27
|
}
|
|
25
|
-
const handleYearChange = (e) => toYear((0,
|
|
28
|
+
const handleYearChange = (e) => toYear((0, setYear_1.default)((0, startOfMonth_1.default)(new Date()), Number(e.target.value)));
|
|
26
29
|
const handleButtonClick = (val) => {
|
|
27
30
|
let newMonth;
|
|
28
31
|
if (hasDropdown && (0, utils_1.hasNextYear)(year, years, val)) {
|
|
29
|
-
newMonth = (0,
|
|
32
|
+
newMonth = (0, setYear_1.default)(new Date(), year.getFullYear() + val);
|
|
30
33
|
toYear(newMonth);
|
|
31
34
|
}
|
|
32
35
|
else if (!hasDropdown) {
|
|
33
36
|
const newYear = Number(year.getFullYear() + val);
|
|
34
|
-
newMonth = (0,
|
|
37
|
+
newMonth = (0, setYear_1.default)(year, newYear);
|
|
35
38
|
toYear(newMonth);
|
|
36
39
|
}
|
|
37
40
|
};
|
|
38
41
|
const hasFollowingYear = (value) => {
|
|
39
|
-
return years.some((y) => (0,
|
|
42
|
+
return years.some((y) => (0, isSameYear_1.default)(y, (0, setYear_1.default)(year, Number(year.getFullYear() + value))));
|
|
40
43
|
};
|
|
41
44
|
return (react_1.default.createElement("div", { className: "navds-date__caption" },
|
|
42
45
|
react_1.default.createElement(__1.Button, { className: "navds-date__caption-button", disabled: !hasDropdown ? false : !hasFollowingYear(-1), onClick: () => handleButtonClick(-1), "aria-label": (0, utils_1.labelPrevYear)(locale === null || locale === void 0 ? void 0 : locale.code), icon: react_1.default.createElement(ds_icons_1.Left, { "aria-hidden": true }), variant: "tertiary", type: "button" }),
|
|
@@ -27,7 +27,10 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
|
27
27
|
};
|
|
28
28
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
29
29
|
exports.MonthSelector = void 0;
|
|
30
|
-
const
|
|
30
|
+
const isSameMonth_1 = __importDefault(require("date-fns/isSameMonth"));
|
|
31
|
+
const setMonth_1 = __importDefault(require("date-fns/setMonth"));
|
|
32
|
+
const setYear_1 = __importDefault(require("date-fns/setYear"));
|
|
33
|
+
const startOfMonth_1 = __importDefault(require("date-fns/startOfMonth"));
|
|
31
34
|
const react_1 = __importStar(require("react"));
|
|
32
35
|
const __1 = require("../..");
|
|
33
36
|
const hooks_1 = require("../hooks");
|
|
@@ -35,9 +38,9 @@ const utils_1 = require("../utils");
|
|
|
35
38
|
const MonthButton_1 = __importDefault(require("./MonthButton"));
|
|
36
39
|
const getAllMonths = () => {
|
|
37
40
|
const months = [];
|
|
38
|
-
const date = (0,
|
|
41
|
+
const date = (0, startOfMonth_1.default)(new Date());
|
|
39
42
|
for (let month = 0; month <= 11; month++) {
|
|
40
|
-
months.push((0,
|
|
43
|
+
months.push((0, setMonth_1.default)(date, month));
|
|
41
44
|
}
|
|
42
45
|
return months;
|
|
43
46
|
};
|
|
@@ -46,17 +49,17 @@ const MonthSelector = () => {
|
|
|
46
49
|
const { selected, year, disabled } = (0, hooks_1.useSharedMonthContext)();
|
|
47
50
|
const months = getAllMonths();
|
|
48
51
|
const hasSelected = selected &&
|
|
49
|
-
months.some((m) => (0,
|
|
52
|
+
months.some((m) => (0, isSameMonth_1.default)((0, setYear_1.default)(m, year.getFullYear()), selected));
|
|
50
53
|
const getRootFallback = () => {
|
|
51
|
-
const today = (0,
|
|
54
|
+
const today = (0, startOfMonth_1.default)(new Date());
|
|
52
55
|
if ((year === null || year === void 0 ? void 0 : year.getFullYear()) === today.getFullYear() &&
|
|
53
56
|
!(0, utils_1.isMatch)(today, disabled)) {
|
|
54
57
|
return today;
|
|
55
58
|
}
|
|
56
59
|
for (let i = 0; i < months.length; i++) {
|
|
57
60
|
const m = months[i];
|
|
58
|
-
if (!(0, utils_1.isMatch)((0,
|
|
59
|
-
return (0,
|
|
61
|
+
if (!(0, utils_1.isMatch)((0, setYear_1.default)(m, year.getFullYear()), disabled)) {
|
|
62
|
+
return (0, setYear_1.default)(m, year.getFullYear());
|
|
60
63
|
}
|
|
61
64
|
}
|
|
62
65
|
};
|
|
@@ -72,7 +75,7 @@ const MonthSelector = () => {
|
|
|
72
75
|
return (react_1.default.createElement(__1.BodyShort, { as: "table", className: "rdp-table" },
|
|
73
76
|
react_1.default.createElement("tbody", { className: "rdp-tbody" }, tableMonths.map((x, y) => (react_1.default.createElement("tr", { className: "rdp-row", key: y }, x.map((month, y) => {
|
|
74
77
|
return (react_1.default.createElement("td", { key: month.toDateString(), className: "rdp-cell" },
|
|
75
|
-
react_1.default.createElement(MonthButton_1.default, { month: (0,
|
|
78
|
+
react_1.default.createElement(MonthButton_1.default, { month: (0, setYear_1.default)(month, year.getFullYear()), months: months, focus: focus, setFocus: setFocus, tabRoot: tabRoot, setTabRoot: setTabRoot })));
|
|
76
79
|
})))))));
|
|
77
80
|
};
|
|
78
81
|
exports.MonthSelector = MonthSelector;
|
|
@@ -1,9 +1,13 @@
|
|
|
1
1
|
"use strict";
|
|
2
|
+
var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
3
|
+
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
4
|
+
};
|
|
2
5
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
6
|
exports.hasNextYear = exports.isValidDate = exports.dateIsInCurrentMonth = void 0;
|
|
4
|
-
const
|
|
7
|
+
const setYear_1 = __importDefault(require("date-fns/setYear"));
|
|
8
|
+
const isThisMonth_1 = __importDefault(require("date-fns/isThisMonth"));
|
|
5
9
|
const dateIsInCurrentMonth = (date, dateToCompare) => {
|
|
6
|
-
return (0,
|
|
10
|
+
return (0, isThisMonth_1.default)((0, setYear_1.default)(date, Number(dateToCompare.getFullYear())));
|
|
7
11
|
};
|
|
8
12
|
exports.dateIsInCurrentMonth = dateIsInCurrentMonth;
|
|
9
13
|
/** @private */
|
|
@@ -1,13 +1,16 @@
|
|
|
1
1
|
"use strict";
|
|
2
|
+
var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
3
|
+
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
4
|
+
};
|
|
2
5
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
6
|
exports.disableDate = void 0;
|
|
4
|
-
const
|
|
7
|
+
const isSameDay_1 = __importDefault(require("date-fns/isSameDay"));
|
|
5
8
|
const react_day_picker_1 = require("react-day-picker");
|
|
6
9
|
// TODO: ((date: Date) => boolean)
|
|
7
10
|
const disableDate = (disabledSelection, date) => {
|
|
8
11
|
let result = false;
|
|
9
12
|
if (disabledSelection instanceof Date) {
|
|
10
|
-
return (0,
|
|
13
|
+
return (0, isSameDay_1.default)(disabledSelection, date);
|
|
11
14
|
}
|
|
12
15
|
else if (disabledSelection instanceof Array) {
|
|
13
16
|
for (let i = 0; i < disabledSelection.length; i++) {
|
|
@@ -18,7 +21,7 @@ const disableDate = (disabledSelection, date) => {
|
|
|
18
21
|
}
|
|
19
22
|
}
|
|
20
23
|
else if (selection instanceof Date) {
|
|
21
|
-
result = (0,
|
|
24
|
+
result = (0, isSameDay_1.default)(selection, date);
|
|
22
25
|
}
|
|
23
26
|
if (result)
|
|
24
27
|
break;
|
|
@@ -1,12 +1,15 @@
|
|
|
1
1
|
"use strict";
|
|
2
|
+
var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
3
|
+
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
4
|
+
};
|
|
2
5
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
6
|
exports.formatDateForInput = void 0;
|
|
4
|
-
const
|
|
7
|
+
const format_1 = __importDefault(require("date-fns/format"));
|
|
5
8
|
const parse_date_1 = require("./parse-date");
|
|
6
9
|
const formatDateForInput = (date, locale, type) => {
|
|
7
10
|
const INPUT_DATE_STRING_FORMAT = type === "date"
|
|
8
11
|
? parse_date_1.INPUT_DATE_STRING_FORMAT_DATE
|
|
9
12
|
: parse_date_1.INPUT_DATE_STRING_FORMAT_MONTH;
|
|
10
|
-
return (0,
|
|
13
|
+
return (0, format_1.default)(date, INPUT_DATE_STRING_FORMAT, { locale });
|
|
11
14
|
};
|
|
12
15
|
exports.formatDateForInput = formatDateForInput;
|
|
@@ -1,31 +1,38 @@
|
|
|
1
1
|
"use strict";
|
|
2
|
+
var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
3
|
+
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
4
|
+
};
|
|
2
5
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
6
|
exports.getYears = exports.getMonths = void 0;
|
|
4
|
-
const
|
|
7
|
+
const isSameYear_1 = __importDefault(require("date-fns/isSameYear"));
|
|
8
|
+
const setMonth_1 = __importDefault(require("date-fns/setMonth"));
|
|
9
|
+
const setYear_1 = __importDefault(require("date-fns/setYear"));
|
|
10
|
+
const startOfMonth_1 = __importDefault(require("date-fns/startOfMonth"));
|
|
11
|
+
const startOfYear_1 = __importDefault(require("date-fns/startOfYear"));
|
|
5
12
|
const getMonths = (start, end, current) => {
|
|
6
13
|
const dropdownMonths = [];
|
|
7
|
-
if ((0,
|
|
8
|
-
const date = (0,
|
|
14
|
+
if ((0, isSameYear_1.default)(start, end)) {
|
|
15
|
+
const date = (0, startOfMonth_1.default)(start);
|
|
9
16
|
for (let month = start.getMonth(); month <= end.getMonth(); month++) {
|
|
10
|
-
dropdownMonths.push((0,
|
|
17
|
+
dropdownMonths.push((0, setMonth_1.default)(date, month));
|
|
11
18
|
}
|
|
12
19
|
}
|
|
13
|
-
else if ((0,
|
|
14
|
-
const date = (0,
|
|
20
|
+
else if ((0, isSameYear_1.default)(current, end)) {
|
|
21
|
+
const date = (0, startOfMonth_1.default)(new Date());
|
|
15
22
|
for (let month = 0; month <= end.getMonth(); month++) {
|
|
16
|
-
dropdownMonths.push((0,
|
|
23
|
+
dropdownMonths.push((0, setMonth_1.default)(date, month));
|
|
17
24
|
}
|
|
18
25
|
}
|
|
19
|
-
else if ((0,
|
|
20
|
-
const date = (0,
|
|
26
|
+
else if ((0, isSameYear_1.default)(current, start)) {
|
|
27
|
+
const date = (0, startOfMonth_1.default)(start);
|
|
21
28
|
for (let month = date.getMonth(); month <= 11; month++) {
|
|
22
|
-
dropdownMonths.push((0,
|
|
29
|
+
dropdownMonths.push((0, setMonth_1.default)(date, month));
|
|
23
30
|
}
|
|
24
31
|
}
|
|
25
32
|
else {
|
|
26
|
-
const date = (0,
|
|
33
|
+
const date = (0, startOfMonth_1.default)(new Date());
|
|
27
34
|
for (let month = 0; month <= 11; month++) {
|
|
28
|
-
dropdownMonths.push((0,
|
|
35
|
+
dropdownMonths.push((0, setMonth_1.default)(date, month));
|
|
29
36
|
}
|
|
30
37
|
}
|
|
31
38
|
return dropdownMonths;
|
|
@@ -36,7 +43,7 @@ const getYears = (start, end) => {
|
|
|
36
43
|
const fromYear = start.getFullYear();
|
|
37
44
|
const toYear = end.getFullYear();
|
|
38
45
|
for (let year = fromYear; year <= toYear; year++) {
|
|
39
|
-
years.push((0,
|
|
46
|
+
years.push((0, setYear_1.default)((0, startOfYear_1.default)(new Date()), year));
|
|
40
47
|
}
|
|
41
48
|
return years;
|
|
42
49
|
};
|
|
@@ -1,7 +1,10 @@
|
|
|
1
1
|
"use strict";
|
|
2
|
+
var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
3
|
+
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
4
|
+
};
|
|
2
5
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
6
|
exports.getInitialYear = void 0;
|
|
4
|
-
const
|
|
7
|
+
const startOfYear_1 = __importDefault(require("date-fns/startOfYear"));
|
|
5
8
|
/**
|
|
6
9
|
*
|
|
7
10
|
*/
|
|
@@ -16,6 +19,6 @@ function getInitialYear(context) {
|
|
|
16
19
|
if (isBefore) {
|
|
17
20
|
initialMonth = fromDate;
|
|
18
21
|
}
|
|
19
|
-
return (0,
|
|
22
|
+
return (0, startOfYear_1.default)(initialMonth);
|
|
20
23
|
}
|
|
21
24
|
exports.getInitialYear = getInitialYear;
|
|
@@ -1,34 +1,40 @@
|
|
|
1
1
|
"use strict";
|
|
2
|
+
var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
3
|
+
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
4
|
+
};
|
|
2
5
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
6
|
exports.isDateInRange = exports.isMatch = void 0;
|
|
4
|
-
const
|
|
7
|
+
const isSameDay_1 = __importDefault(require("date-fns/isSameDay"));
|
|
8
|
+
const isDate_1 = __importDefault(require("date-fns/isDate"));
|
|
9
|
+
const differenceInCalendarDays_1 = __importDefault(require("date-fns/differenceInCalendarDays"));
|
|
10
|
+
const isSameMonth_1 = __importDefault(require("date-fns/isSameMonth"));
|
|
5
11
|
const react_day_picker_1 = require("react-day-picker");
|
|
6
12
|
function isDateType(value) {
|
|
7
|
-
return (0,
|
|
13
|
+
return (0, isDate_1.default)(value);
|
|
8
14
|
}
|
|
9
15
|
function isArrayOfDates(value) {
|
|
10
|
-
return Array.isArray(value) && value.every(
|
|
16
|
+
return Array.isArray(value) && value.every(isDate_1.default);
|
|
11
17
|
}
|
|
12
18
|
function isMatch(day, matchers) {
|
|
13
19
|
return matchers.some((matcher) => {
|
|
14
20
|
if (isDateType(matcher)) {
|
|
15
|
-
return (0,
|
|
21
|
+
return (0, isSameMonth_1.default)(day, matcher);
|
|
16
22
|
}
|
|
17
23
|
if (isArrayOfDates(matcher)) {
|
|
18
24
|
return matcher.some((matcherDay) => {
|
|
19
|
-
return (0,
|
|
25
|
+
return (0, isSameMonth_1.default)(matcherDay, day);
|
|
20
26
|
});
|
|
21
27
|
}
|
|
22
28
|
if ((0, react_day_picker_1.isDateRange)(matcher)) {
|
|
23
29
|
return isDateInRange(day, matcher);
|
|
24
30
|
}
|
|
25
31
|
if ((0, react_day_picker_1.isDateAfterType)(matcher)) {
|
|
26
|
-
return ((0,
|
|
27
|
-
(0,
|
|
32
|
+
return ((0, isSameMonth_1.default)(day, matcher.after) ||
|
|
33
|
+
(0, differenceInCalendarDays_1.default)(day, matcher.after) > 0);
|
|
28
34
|
}
|
|
29
35
|
if ((0, react_day_picker_1.isDateBeforeType)(matcher)) {
|
|
30
|
-
return ((0,
|
|
31
|
-
(0,
|
|
36
|
+
return ((0, isSameMonth_1.default)(day, matcher.before) ||
|
|
37
|
+
(0, differenceInCalendarDays_1.default)(matcher.before, day) > 0);
|
|
32
38
|
}
|
|
33
39
|
if (typeof matcher === "function") {
|
|
34
40
|
return matcher(day);
|
|
@@ -42,20 +48,20 @@ function isDateInRange(date, range) {
|
|
|
42
48
|
if (!from) {
|
|
43
49
|
return false;
|
|
44
50
|
}
|
|
45
|
-
if (!to && (0,
|
|
51
|
+
if (!to && (0, isSameDay_1.default)(from, date)) {
|
|
46
52
|
return true;
|
|
47
53
|
}
|
|
48
54
|
if (!to) {
|
|
49
55
|
return false;
|
|
50
56
|
}
|
|
51
|
-
const isToBeforeFrom = (0,
|
|
57
|
+
const isToBeforeFrom = (0, differenceInCalendarDays_1.default)(to, from) < 0;
|
|
52
58
|
if (to && isToBeforeFrom) {
|
|
53
59
|
[from, to] = [to, from];
|
|
54
60
|
}
|
|
55
|
-
if ((0,
|
|
61
|
+
if ((0, isSameMonth_1.default)(from, date) || (0, isSameMonth_1.default)(to, date)) {
|
|
56
62
|
return true;
|
|
57
63
|
}
|
|
58
|
-
return ((0,
|
|
59
|
-
(0,
|
|
64
|
+
return ((0, differenceInCalendarDays_1.default)(date, from) >= 0 &&
|
|
65
|
+
(0, differenceInCalendarDays_1.default)(to, date) >= 0);
|
|
60
66
|
}
|
|
61
67
|
exports.isDateInRange = isDateInRange;
|