@salt-ds/lab 1.0.0-alpha.55 → 1.0.0-alpha.56
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/CHANGELOG.md +161 -0
- package/css/salt-lab.css +44 -7
- package/dist-cjs/calendar/Calendar.js +12 -12
- package/dist-cjs/calendar/Calendar.js.map +1 -1
- package/dist-cjs/calendar/CalendarGrid.css.js +6 -0
- package/dist-cjs/calendar/CalendarGrid.css.js.map +1 -0
- package/dist-cjs/calendar/CalendarGrid.js +107 -0
- package/dist-cjs/calendar/CalendarGrid.js.map +1 -0
- package/dist-cjs/calendar/CalendarNavigation.js +219 -201
- package/dist-cjs/calendar/CalendarNavigation.js.map +1 -1
- package/dist-cjs/calendar/CalendarWeekHeader.js +10 -4
- package/dist-cjs/calendar/CalendarWeekHeader.js.map +1 -1
- package/dist-cjs/calendar/internal/CalendarContext.js +6 -2
- package/dist-cjs/calendar/internal/CalendarContext.js.map +1 -1
- package/dist-cjs/calendar/internal/CalendarDay.js +6 -9
- package/dist-cjs/calendar/internal/CalendarDay.js.map +1 -1
- package/dist-cjs/calendar/internal/CalendarMonth.css.js +1 -1
- package/dist-cjs/calendar/internal/CalendarMonth.js +47 -54
- package/dist-cjs/calendar/internal/CalendarMonth.js.map +1 -1
- package/dist-cjs/calendar/internal/useFocusManagement.js +18 -18
- package/dist-cjs/calendar/internal/useFocusManagement.js.map +1 -1
- package/dist-cjs/calendar/internal/utils.js +33 -48
- package/dist-cjs/calendar/internal/utils.js.map +1 -1
- package/dist-cjs/calendar/useCalendar.js +46 -38
- package/dist-cjs/calendar/useCalendar.js.map +1 -1
- package/dist-cjs/calendar/useCalendarDay.js +15 -21
- package/dist-cjs/calendar/useCalendarDay.js.map +1 -1
- package/dist-cjs/calendar/useCalendarSelection.js +44 -35
- package/dist-cjs/calendar/useCalendarSelection.js.map +1 -1
- package/dist-cjs/date-input/DateInput.css.js +1 -1
- package/dist-cjs/date-input/DateInputRange.js +102 -107
- package/dist-cjs/date-input/DateInputRange.js.map +1 -1
- package/dist-cjs/date-input/DateInputSingle.js +39 -51
- package/dist-cjs/date-input/DateInputSingle.js.map +1 -1
- package/dist-cjs/date-picker/DatePicker.js +15 -13
- package/dist-cjs/date-picker/DatePicker.js.map +1 -1
- package/dist-cjs/date-picker/DatePickerActions.js +3 -8
- package/dist-cjs/date-picker/DatePickerActions.js.map +1 -1
- package/dist-cjs/date-picker/DatePickerContext.js +6 -2
- package/dist-cjs/date-picker/DatePickerContext.js.map +1 -1
- package/dist-cjs/date-picker/DatePickerOverlay.js +1 -0
- package/dist-cjs/date-picker/DatePickerOverlay.js.map +1 -1
- package/dist-cjs/date-picker/DatePickerOverlayProvider.js +21 -8
- package/dist-cjs/date-picker/DatePickerOverlayProvider.js.map +1 -1
- package/dist-cjs/date-picker/DatePickerRangeInput.js +76 -28
- package/dist-cjs/date-picker/DatePickerRangeInput.js.map +1 -1
- package/dist-cjs/date-picker/DatePickerRangePanel.js +45 -40
- package/dist-cjs/date-picker/DatePickerRangePanel.js.map +1 -1
- package/dist-cjs/date-picker/DatePickerSingleInput.js +123 -84
- package/dist-cjs/date-picker/DatePickerSingleInput.js.map +1 -1
- package/dist-cjs/date-picker/DatePickerSinglePanel.js +17 -20
- package/dist-cjs/date-picker/DatePickerSinglePanel.js.map +1 -1
- package/dist-cjs/date-picker/DatePickerTrigger.js +32 -0
- package/dist-cjs/date-picker/DatePickerTrigger.js.map +1 -0
- package/dist-cjs/date-picker/useDatePicker.js +60 -110
- package/dist-cjs/date-picker/useDatePicker.js.map +1 -1
- package/dist-cjs/dropdown/DropdownButton.js.map +1 -1
- package/dist-cjs/index.js +19 -20
- package/dist-cjs/index.js.map +1 -1
- package/dist-cjs/localization-provider/LocalizationProvider.js +48 -0
- package/dist-cjs/localization-provider/LocalizationProvider.js.map +1 -0
- package/dist-cjs/overlay/OverlayHeader.css.js +6 -0
- package/dist-cjs/overlay/OverlayHeader.css.js.map +1 -0
- package/dist-cjs/overlay/OverlayHeader.js +35 -0
- package/dist-cjs/overlay/OverlayHeader.js.map +1 -0
- package/dist-cjs/system-status/SystemStatus.css.js +1 -1
- package/dist-cjs/tabs-next/TabListNext.css.js +1 -1
- package/dist-cjs/tabs-next/TabListNext.js +4 -0
- package/dist-cjs/tabs-next/TabListNext.js.map +1 -1
- package/dist-es/calendar/Calendar.js +12 -12
- package/dist-es/calendar/Calendar.js.map +1 -1
- package/dist-es/calendar/CalendarGrid.css.js +4 -0
- package/dist-es/calendar/CalendarGrid.css.js.map +1 -0
- package/dist-es/calendar/CalendarGrid.js +105 -0
- package/dist-es/calendar/CalendarGrid.js.map +1 -0
- package/dist-es/calendar/CalendarNavigation.js +220 -202
- package/dist-es/calendar/CalendarNavigation.js.map +1 -1
- package/dist-es/calendar/CalendarWeekHeader.js +11 -5
- package/dist-es/calendar/CalendarWeekHeader.js.map +1 -1
- package/dist-es/calendar/internal/CalendarContext.js +6 -2
- package/dist-es/calendar/internal/CalendarContext.js.map +1 -1
- package/dist-es/calendar/internal/CalendarDay.js +6 -9
- package/dist-es/calendar/internal/CalendarDay.js.map +1 -1
- package/dist-es/calendar/internal/CalendarMonth.css.js +1 -1
- package/dist-es/calendar/internal/CalendarMonth.js +48 -55
- package/dist-es/calendar/internal/CalendarMonth.js.map +1 -1
- package/dist-es/calendar/internal/useFocusManagement.js +15 -15
- package/dist-es/calendar/internal/useFocusManagement.js.map +1 -1
- package/dist-es/calendar/internal/utils.js +32 -45
- package/dist-es/calendar/internal/utils.js.map +1 -1
- package/dist-es/calendar/useCalendar.js +40 -32
- package/dist-es/calendar/useCalendar.js.map +1 -1
- package/dist-es/calendar/useCalendarDay.js +11 -17
- package/dist-es/calendar/useCalendarDay.js.map +1 -1
- package/dist-es/calendar/useCalendarSelection.js +40 -29
- package/dist-es/calendar/useCalendarSelection.js.map +1 -1
- package/dist-es/date-input/DateInput.css.js +1 -1
- package/dist-es/date-input/DateInputRange.js +101 -107
- package/dist-es/date-input/DateInputRange.js.map +1 -1
- package/dist-es/date-input/DateInputSingle.js +39 -51
- package/dist-es/date-input/DateInputSingle.js.map +1 -1
- package/dist-es/date-picker/DatePicker.js +15 -13
- package/dist-es/date-picker/DatePicker.js.map +1 -1
- package/dist-es/date-picker/DatePickerActions.js +3 -8
- package/dist-es/date-picker/DatePickerActions.js.map +1 -1
- package/dist-es/date-picker/DatePickerContext.js +6 -2
- package/dist-es/date-picker/DatePickerContext.js.map +1 -1
- package/dist-es/date-picker/DatePickerOverlay.js +1 -0
- package/dist-es/date-picker/DatePickerOverlay.js.map +1 -1
- package/dist-es/date-picker/DatePickerOverlayProvider.js +21 -8
- package/dist-es/date-picker/DatePickerOverlayProvider.js.map +1 -1
- package/dist-es/date-picker/DatePickerRangeInput.js +77 -30
- package/dist-es/date-picker/DatePickerRangeInput.js.map +1 -1
- package/dist-es/date-picker/DatePickerRangePanel.js +44 -39
- package/dist-es/date-picker/DatePickerRangePanel.js.map +1 -1
- package/dist-es/date-picker/DatePickerSingleInput.js +124 -85
- package/dist-es/date-picker/DatePickerSingleInput.js.map +1 -1
- package/dist-es/date-picker/DatePickerSinglePanel.js +17 -20
- package/dist-es/date-picker/DatePickerSinglePanel.js.map +1 -1
- package/dist-es/date-picker/DatePickerTrigger.js +30 -0
- package/dist-es/date-picker/DatePickerTrigger.js.map +1 -0
- package/dist-es/date-picker/useDatePicker.js +61 -111
- package/dist-es/date-picker/useDatePicker.js.map +1 -1
- package/dist-es/dropdown/DropdownButton.js.map +1 -1
- package/dist-es/index.js +8 -7
- package/dist-es/index.js.map +1 -1
- package/dist-es/localization-provider/LocalizationProvider.js +44 -0
- package/dist-es/localization-provider/LocalizationProvider.js.map +1 -0
- package/dist-es/overlay/OverlayHeader.css.js +4 -0
- package/dist-es/overlay/OverlayHeader.css.js.map +1 -0
- package/dist-es/overlay/OverlayHeader.js +33 -0
- package/dist-es/overlay/OverlayHeader.js.map +1 -0
- package/dist-es/system-status/SystemStatus.css.js +1 -1
- package/dist-es/tabs-next/TabListNext.css.js +1 -1
- package/dist-es/tabs-next/TabListNext.js +5 -1
- package/dist-es/tabs-next/TabListNext.js.map +1 -1
- package/dist-types/calendar/Calendar.d.ts +11 -6
- package/dist-types/calendar/CalendarGrid.d.ts +13 -0
- package/dist-types/calendar/CalendarNavigation.d.ts +9 -11
- package/dist-types/calendar/CalendarWeekHeader.d.ts +4 -3
- package/dist-types/calendar/index.d.ts +1 -2
- package/dist-types/calendar/internal/CalendarContext.d.ts +5 -6
- package/dist-types/calendar/internal/CalendarDay.d.ts +6 -8
- package/dist-types/calendar/internal/CalendarMonth.d.ts +5 -6
- package/dist-types/calendar/internal/useFocusManagement.d.ts +3 -4
- package/dist-types/calendar/internal/utils.d.ts +7 -11
- package/dist-types/calendar/useCalendar.d.ts +207 -55
- package/dist-types/calendar/useCalendarDay.d.ts +5 -7
- package/dist-types/calendar/useCalendarSelection.d.ts +92 -58
- package/dist-types/date-input/DateInputRange.d.ts +38 -56
- package/dist-types/date-input/DateInputSingle.d.ts +32 -49
- package/dist-types/date-input/index.d.ts +0 -1
- package/dist-types/date-picker/DatePicker.d.ts +23 -5
- package/dist-types/date-picker/DatePickerActions.d.ts +13 -12
- package/dist-types/date-picker/DatePickerContext.d.ts +42 -59
- package/dist-types/date-picker/DatePickerOverlayProvider.d.ts +10 -0
- package/dist-types/date-picker/DatePickerRangeInput.d.ts +13 -3
- package/dist-types/date-picker/DatePickerRangePanel.d.ts +17 -17
- package/dist-types/date-picker/DatePickerSingleInput.d.ts +12 -3
- package/dist-types/date-picker/DatePickerSinglePanel.d.ts +11 -11
- package/dist-types/date-picker/DatePickerTrigger.d.ts +9 -0
- package/dist-types/date-picker/index.d.ts +3 -2
- package/dist-types/date-picker/useDatePicker.d.ts +52 -59
- package/dist-types/index.d.ts +2 -0
- package/dist-types/localization-provider/LocalizationProvider.d.ts +62 -0
- package/dist-types/localization-provider/index.d.ts +1 -0
- package/dist-types/overlay/OverlayHeader.d.ts +20 -0
- package/dist-types/overlay/index.d.ts +1 -0
- package/package.json +11 -3
- package/dist-cjs/calendar/CalendarDateGrid.css.js +0 -6
- package/dist-cjs/calendar/CalendarDateGrid.css.js.map +0 -1
- package/dist-cjs/calendar/CalendarDateGrid.js +0 -105
- package/dist-cjs/calendar/CalendarDateGrid.js.map +0 -1
- package/dist-cjs/calendar/formatDate.js +0 -51
- package/dist-cjs/calendar/formatDate.js.map +0 -1
- package/dist-cjs/date-input/utils.js +0 -63
- package/dist-cjs/date-input/utils.js.map +0 -1
- package/dist-es/calendar/CalendarDateGrid.css.js +0 -4
- package/dist-es/calendar/CalendarDateGrid.css.js.map +0 -1
- package/dist-es/calendar/CalendarDateGrid.js +0 -103
- package/dist-es/calendar/CalendarDateGrid.js.map +0 -1
- package/dist-es/calendar/formatDate.js +0 -48
- package/dist-es/calendar/formatDate.js.map +0 -1
- package/dist-es/date-input/utils.js +0 -57
- package/dist-es/date-input/utils.js.map +0 -1
- package/dist-types/calendar/CalendarDateGrid.d.ts +0 -10
- package/dist-types/calendar/formatDate.d.ts +0 -14
- package/dist-types/date-input/utils.d.ts +0 -43
|
@@ -1,9 +1,8 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
-
var date = require('@internationalized/date');
|
|
4
3
|
var core = require('@salt-ds/core');
|
|
5
4
|
var react = require('react');
|
|
6
|
-
var
|
|
5
|
+
var LocalizationProvider = require('../localization-provider/LocalizationProvider.js');
|
|
7
6
|
var utils = require('./internal/utils.js');
|
|
8
7
|
var useCalendarSelection = require('./useCalendarSelection.js');
|
|
9
8
|
|
|
@@ -11,21 +10,24 @@ const defaultIsDayUnselectable = () => false;
|
|
|
11
10
|
const defaultIsDayHighlighted = () => false;
|
|
12
11
|
const defaultIsDayDisabled = () => false;
|
|
13
12
|
function useCalendar(props) {
|
|
13
|
+
const {
|
|
14
|
+
dateAdapter,
|
|
15
|
+
defaultDates: { minDate: defaultMinDate, maxDate: defaultMaxDate }
|
|
16
|
+
} = LocalizationProvider.useLocalization();
|
|
14
17
|
const {
|
|
15
18
|
selectedDate,
|
|
16
19
|
defaultSelectedDate,
|
|
17
20
|
visibleMonth: visibleMonthProp,
|
|
18
21
|
hideOutOfRangeDates,
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
onSelectedDateChange,
|
|
22
|
+
locale,
|
|
23
|
+
defaultVisibleMonth = dateAdapter.today(locale),
|
|
24
|
+
onSelectionChange,
|
|
23
25
|
onVisibleMonthChange,
|
|
24
26
|
isDayUnselectable = defaultIsDayUnselectable,
|
|
25
27
|
isDayHighlighted = defaultIsDayHighlighted,
|
|
26
28
|
isDayDisabled = defaultIsDayDisabled,
|
|
27
|
-
minDate,
|
|
28
|
-
maxDate,
|
|
29
|
+
minDate = defaultMinDate,
|
|
30
|
+
maxDate = defaultMaxDate,
|
|
29
31
|
selectionVariant,
|
|
30
32
|
onHoveredDateChange,
|
|
31
33
|
hoveredDate
|
|
@@ -33,26 +35,30 @@ function useCalendar(props) {
|
|
|
33
35
|
// endDateOffset,
|
|
34
36
|
} = props;
|
|
35
37
|
const [visibleMonth, setVisibleMonthState] = core.useControlled({
|
|
36
|
-
controlled: visibleMonthProp ?
|
|
37
|
-
default:
|
|
38
|
+
controlled: visibleMonthProp ? dateAdapter.startOf(visibleMonthProp, "month", locale) : void 0,
|
|
39
|
+
default: dateAdapter.startOf(defaultVisibleMonth, "month", locale),
|
|
38
40
|
name: "Calendar",
|
|
39
41
|
state: "visibleMonth"
|
|
40
42
|
});
|
|
41
43
|
const isOutsideAllowedDates = react.useCallback(
|
|
42
44
|
(date) => {
|
|
43
|
-
return
|
|
45
|
+
return dateAdapter.compare(date, minDate) < 0 || dateAdapter.compare(date, maxDate) > 0;
|
|
44
46
|
},
|
|
45
47
|
[maxDate, minDate]
|
|
46
48
|
);
|
|
47
49
|
const isOutsideAllowedMonths = react.useCallback(
|
|
48
|
-
(date
|
|
49
|
-
|
|
50
|
+
(date) => {
|
|
51
|
+
const startOfMonth = dateAdapter.startOf(date, "month", locale);
|
|
52
|
+
const endOfMonth = dateAdapter.endOf(date, "month", locale);
|
|
53
|
+
return dateAdapter.compare(endOfMonth, minDate) < 0 || dateAdapter.compare(startOfMonth, maxDate) > 0;
|
|
50
54
|
},
|
|
51
55
|
[minDate, maxDate]
|
|
52
56
|
);
|
|
53
57
|
const isOutsideAllowedYears = react.useCallback(
|
|
54
|
-
(date
|
|
55
|
-
|
|
58
|
+
(date) => {
|
|
59
|
+
const startOfYear = dateAdapter.startOf(date, "year", locale);
|
|
60
|
+
const endOfYear = dateAdapter.endOf(date, "year", locale);
|
|
61
|
+
return dateAdapter.compare(endOfYear, minDate) < 0 || dateAdapter.compare(startOfYear, maxDate) > 0;
|
|
56
62
|
},
|
|
57
63
|
[minDate, maxDate]
|
|
58
64
|
);
|
|
@@ -63,7 +69,7 @@ function useCalendar(props) {
|
|
|
63
69
|
const selectionManager = useCalendarSelection.useCalendarSelection({
|
|
64
70
|
defaultSelectedDate,
|
|
65
71
|
selectedDate,
|
|
66
|
-
|
|
72
|
+
onSelectionChange,
|
|
67
73
|
startDateOffset: props.selectionVariant === "offset" ? props.startDateOffset : void 0,
|
|
68
74
|
endDateOffset: props.selectionVariant === "offset" ? props.endDateOffset : void 0,
|
|
69
75
|
isDaySelectable,
|
|
@@ -73,7 +79,7 @@ function useCalendar(props) {
|
|
|
73
79
|
});
|
|
74
80
|
const [calendarFocused, setCalendarFocused] = react.useState(false);
|
|
75
81
|
const isInVisibleMonth = react.useCallback(
|
|
76
|
-
(date
|
|
82
|
+
(date) => date != null && dateAdapter.isSame(date, visibleMonth, "month"),
|
|
77
83
|
[visibleMonth]
|
|
78
84
|
);
|
|
79
85
|
const getInitialFocusedDate = react.useCallback(() => {
|
|
@@ -86,19 +92,20 @@ function useCalendar(props) {
|
|
|
86
92
|
return selectedDate2.endDate;
|
|
87
93
|
}
|
|
88
94
|
} else if (selectionVariant === "multiselect" && Array.isArray(selectedDate2)) {
|
|
89
|
-
const selectionInMonth = selectedDate2.filter((day) => isInVisibleMonth(day)).sort((a, b) =>
|
|
95
|
+
const selectionInMonth = selectedDate2.filter((day) => isInVisibleMonth(day)).sort((a, b) => dateAdapter.compare(a, b));
|
|
90
96
|
if (selectionInMonth.length > 0) {
|
|
91
97
|
return selectionInMonth[0];
|
|
92
98
|
}
|
|
93
99
|
} else if (selectionVariant === "single" && !useCalendarSelection.isDateRangeSelection(selectedDate2) && !Array.isArray(selectedDate2) && isInVisibleMonth(selectedDate2)) {
|
|
94
100
|
return selectedDate2;
|
|
95
101
|
}
|
|
96
|
-
if (isDaySelectable(
|
|
97
|
-
return
|
|
102
|
+
if (isDaySelectable(dateAdapter.today(locale)) && isInVisibleMonth(dateAdapter.today(locale))) {
|
|
103
|
+
return dateAdapter.today(locale);
|
|
98
104
|
}
|
|
99
|
-
const firstSelectableDate = utils.generateDatesForMonth(
|
|
100
|
-
|
|
101
|
-
|
|
105
|
+
const firstSelectableDate = utils.generateDatesForMonth(
|
|
106
|
+
dateAdapter,
|
|
107
|
+
visibleMonth
|
|
108
|
+
).find((visibleDay) => isDaySelectable(visibleDay));
|
|
102
109
|
if (firstSelectableDate) {
|
|
103
110
|
return firstSelectableDate;
|
|
104
111
|
}
|
|
@@ -107,18 +114,21 @@ function useCalendar(props) {
|
|
|
107
114
|
isInVisibleMonth,
|
|
108
115
|
selectionVariant,
|
|
109
116
|
selectionManager.state.selectedDate,
|
|
110
|
-
timeZone,
|
|
111
117
|
visibleMonth
|
|
112
118
|
]);
|
|
113
119
|
const [focusedDate, setFocusedDateState] = react.useState(
|
|
114
120
|
getInitialFocusedDate
|
|
115
121
|
);
|
|
116
122
|
const isDayVisible = react.useCallback(
|
|
117
|
-
(date
|
|
118
|
-
const startInsideDays =
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
123
|
+
(date) => {
|
|
124
|
+
const startInsideDays = dateAdapter.startOf(
|
|
125
|
+
visibleMonth,
|
|
126
|
+
"month",
|
|
127
|
+
locale
|
|
128
|
+
);
|
|
129
|
+
if (dateAdapter.compare(date, startInsideDays) < 0) return false;
|
|
130
|
+
const endInsideDays = dateAdapter.endOf(visibleMonth, "month", locale);
|
|
131
|
+
return !(dateAdapter.compare(date, endInsideDays) > 0);
|
|
122
132
|
},
|
|
123
133
|
[visibleMonth]
|
|
124
134
|
);
|
|
@@ -130,13 +140,13 @@ function useCalendar(props) {
|
|
|
130
140
|
[onVisibleMonthChange]
|
|
131
141
|
);
|
|
132
142
|
const setFocusedDate = react.useCallback(
|
|
133
|
-
(event, date
|
|
134
|
-
if (!focusedDate ||
|
|
143
|
+
(event, date) => {
|
|
144
|
+
if (!focusedDate || dateAdapter.isSame(date, focusedDate, "day") || isOutsideAllowedDates(date))
|
|
135
145
|
return;
|
|
136
|
-
setFocusedDateState(date
|
|
137
|
-
const shouldTransition = !isDayVisible(date
|
|
146
|
+
setFocusedDateState(date);
|
|
147
|
+
const shouldTransition = !isDayVisible(date) && isDaySelectable(date) && !isOutsideAllowedDates(date);
|
|
138
148
|
if (shouldTransition) {
|
|
139
|
-
setVisibleMonth(event,
|
|
149
|
+
setVisibleMonth(event, dateAdapter.startOf(date, "month", locale));
|
|
140
150
|
}
|
|
141
151
|
},
|
|
142
152
|
[
|
|
@@ -160,13 +170,12 @@ function useCalendar(props) {
|
|
|
160
170
|
state: {
|
|
161
171
|
visibleMonth,
|
|
162
172
|
focusedDate,
|
|
173
|
+
locale,
|
|
163
174
|
minDate,
|
|
164
175
|
maxDate,
|
|
165
176
|
selectionVariant,
|
|
166
177
|
hideOutOfRangeDates,
|
|
167
178
|
calendarFocused,
|
|
168
|
-
timeZone,
|
|
169
|
-
locale,
|
|
170
179
|
...selectionManager.state
|
|
171
180
|
},
|
|
172
181
|
helpers: {
|
|
@@ -186,13 +195,12 @@ function useCalendar(props) {
|
|
|
186
195
|
[
|
|
187
196
|
visibleMonth,
|
|
188
197
|
focusedDate,
|
|
198
|
+
locale,
|
|
189
199
|
minDate,
|
|
190
200
|
maxDate,
|
|
191
201
|
selectionVariant,
|
|
192
202
|
hideOutOfRangeDates,
|
|
193
203
|
calendarFocused,
|
|
194
|
-
timeZone,
|
|
195
|
-
locale,
|
|
196
204
|
setVisibleMonth,
|
|
197
205
|
setFocusedDate,
|
|
198
206
|
isDayUnselectable,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useCalendar.js","sources":["../src/calendar/useCalendar.ts"],"sourcesContent":["import {\n type DateValue,\n endOfMonth,\n endOfYear,\n getLocalTimeZone,\n isSameDay,\n isSameMonth,\n startOfMonth,\n startOfYear,\n today,\n} from \"@internationalized/date\";\nimport { useControlled } from \"@salt-ds/core\";\nimport {\n type SyntheticEvent,\n useCallback,\n useEffect,\n useMemo,\n useState,\n} from \"react\";\nimport { getCurrentLocale } from \"./formatDate\";\nimport { generateDatesForMonth } from \"./internal/utils\";\nimport {\n type UseCalendarSelectionMultiSelectProps,\n type UseCalendarSelectionOffsetProps,\n type UseCalendarSelectionProps,\n type UseCalendarSelectionRangeProps,\n type UseCalendarSelectionSingleProps,\n isDateRangeSelection,\n useCalendarSelection,\n} from \"./useCalendarSelection\";\n\n/**\n * Interface representing the base properties UseCalendar hook.\n */\ninterface UseCalendarBaseProps {\n /**\n * The default visible month.\n */\n defaultVisibleMonth?: DateValue;\n /**\n * Callback fired when the visible month changes.\n * @param event - The synthetic event.\n * @param visibleMonth - The new visible month.\n */\n onVisibleMonthChange?: (\n event: SyntheticEvent,\n visibleMonth: DateValue,\n ) => void;\n /**\n * Function to determine if a day is unselectable.\n * @param date - The date to check.\n * @returns A string reason if the day is unselectable, otherwise `false` or `undefined`.\n */\n isDayUnselectable?: (date: DateValue) => string | false | undefined;\n /**\n * Function to determine if a day is highlighted.\n * @param date - The date to check.\n * @returns A string reason if the day is highlighted, otherwise `false` or `undefined`.\n */\n isDayHighlighted?: (date: DateValue) => string | false | undefined;\n /**\n * Function to determine if a day is disabled.\n * @param date - The date to check.\n * @returns A string reason if the day is disabled, otherwise `false` or `undefined`.\n */\n isDayDisabled?: (date: DateValue) => string | false | undefined;\n /**\n * The currently visible month.\n */\n visibleMonth?: DateValue;\n /**\n * If `true`, hides dates that are out of the selectable range.\n */\n hideOutOfRangeDates?: boolean;\n /**\n * The minimum selectable date.\n */\n minDate?: DateValue;\n /**\n * The maximum selectable date.\n */\n maxDate?: DateValue;\n /**\n * The time zone used for date calculations.\n */\n timeZone?: string;\n /**\n * The locale used for date formatting.\n */\n locale?: string;\n}\n\n/**\n * UseCalendar hook props for a single date selection Calendar.\n */\nexport interface UseCalendarSingleProps\n extends UseCalendarSelectionSingleProps,\n UseCalendarBaseProps {\n /**\n * The selection variant, set to \"single\".\n */\n selectionVariant: \"single\";\n}\n\n/**\n * UseCalendar hook props for a date range selection Calendar.\n */\nexport interface UseCalendarRangeProps\n extends UseCalendarSelectionRangeProps,\n UseCalendarBaseProps {\n /**\n * The selection variant, set to \"range\".\n */\n selectionVariant: \"range\";\n}\n\n/**\n * UseCalendar hook props for a multi-select Calendar.\n */\nexport interface UseCalendarMultiSelectProps\n extends UseCalendarSelectionMultiSelectProps,\n UseCalendarBaseProps {\n /**\n * The selection variant, set to \"multiselect\".\n */\n selectionVariant: \"multiselect\";\n}\n\n/**\n * UseCalendar hook props for an offset date selection Calendar.\n */\nexport interface UseCalendarOffsetProps\n extends UseCalendarSelectionOffsetProps,\n UseCalendarBaseProps {\n /**\n * The selection variant, set to \"offset\".\n */\n selectionVariant: \"offset\";\n}\n\n/**\n * UseCalendar hook props, wth the selection variant determining the return type of the date selection\n */\nexport type UseCalendarProps =\n | UseCalendarSingleProps\n | UseCalendarRangeProps\n | UseCalendarMultiSelectProps\n | UseCalendarOffsetProps;\n\n/**\n * Default function to determine if a day is unselectable.\n * @returns `false` indicating the day is selectable.\n */\nconst defaultIsDayUnselectable = (): string | false => false;\n\n/**\n * Default function to determine if a day is highlighted.\n * @returns `false` indicating the day is not highlighted.\n */\nconst defaultIsDayHighlighted = (): string | false => false;\n\n/**\n * Default function to determine if a day is disabled.\n * @returns `false` indicating the day is not disabled.\n */\nconst defaultIsDayDisabled = (): false => false;\n\nexport function useCalendar(props: UseCalendarProps) {\n const {\n selectedDate,\n defaultSelectedDate,\n visibleMonth: visibleMonthProp,\n hideOutOfRangeDates,\n timeZone = getLocalTimeZone(),\n locale = getCurrentLocale(),\n defaultVisibleMonth = today(timeZone),\n onSelectedDateChange,\n onVisibleMonthChange,\n isDayUnselectable = defaultIsDayUnselectable,\n isDayHighlighted = defaultIsDayHighlighted,\n isDayDisabled = defaultIsDayDisabled,\n minDate,\n maxDate,\n selectionVariant,\n onHoveredDateChange,\n hoveredDate,\n // startDateOffset,\n // endDateOffset,\n } = props;\n const [visibleMonth, setVisibleMonthState] = useControlled({\n controlled: visibleMonthProp ? startOfMonth(visibleMonthProp) : undefined,\n default: startOfMonth(defaultVisibleMonth),\n name: \"Calendar\",\n state: \"visibleMonth\",\n });\n\n const isOutsideAllowedDates = useCallback(\n (date: DateValue) => {\n return (\n (minDate && date.compare(minDate) < 0) ||\n (maxDate && date.compare(maxDate) > 0)\n );\n },\n [maxDate, minDate],\n );\n\n const isOutsideAllowedMonths = useCallback(\n (date: DateValue) => {\n return (\n (minDate && endOfMonth(date).compare(minDate) < 0) ||\n (maxDate && startOfMonth(date).compare(maxDate) > 0)\n );\n },\n [minDate, maxDate],\n );\n\n const isOutsideAllowedYears = useCallback(\n (date: DateValue) => {\n return (\n (minDate && endOfYear(date).compare(minDate) < 0) ||\n (maxDate && startOfYear(date).compare(maxDate) > 0)\n );\n },\n [minDate, maxDate],\n );\n\n const isDaySelectable = useCallback(\n (date?: DateValue) =>\n !(\n date &&\n (isDayUnselectable(date) ||\n isDayDisabled(date) ||\n isOutsideAllowedDates(date))\n ),\n [isDayUnselectable, isDayDisabled, isOutsideAllowedDates],\n );\n\n const selectionManager = useCalendarSelection({\n defaultSelectedDate: defaultSelectedDate,\n selectedDate,\n onSelectedDateChange,\n startDateOffset:\n props.selectionVariant === \"offset\" ? props.startDateOffset : undefined,\n endDateOffset:\n props.selectionVariant === \"offset\" ? props.endDateOffset : undefined,\n isDaySelectable,\n selectionVariant,\n onHoveredDateChange,\n hoveredDate,\n } as UseCalendarSelectionProps);\n\n const [calendarFocused, setCalendarFocused] = useState(false);\n\n const isInVisibleMonth = useCallback(\n (date: DateValue | undefined | null): date is DateValue =>\n date != null && isSameMonth(date, visibleMonth),\n [visibleMonth],\n );\n\n const getInitialFocusedDate = useCallback(() => {\n const selectedDate = selectionManager.state.selectedDate;\n if (\n (selectionVariant === \"range\" || selectionVariant === \"offset\") &&\n isDateRangeSelection(selectedDate)\n ) {\n if (isInVisibleMonth(selectedDate?.startDate)) {\n return selectedDate.startDate;\n }\n if (isInVisibleMonth(selectedDate?.endDate)) {\n return selectedDate.endDate;\n }\n } else if (\n selectionVariant === \"multiselect\" &&\n Array.isArray(selectedDate)\n ) {\n // return first selected day in visible month\n const selectionInMonth = selectedDate\n .filter((day) => isInVisibleMonth(day))\n .sort((a, b) => a.compare(b));\n if (selectionInMonth.length > 0) {\n return selectionInMonth[0];\n }\n } else if (\n selectionVariant === \"single\" &&\n !isDateRangeSelection(selectedDate) &&\n !Array.isArray(selectedDate) &&\n isInVisibleMonth(selectedDate)\n ) {\n return selectedDate;\n }\n // Defaults\n if (isDaySelectable(today(timeZone)) && isInVisibleMonth(today(timeZone))) {\n return today(timeZone);\n }\n const firstSelectableDate = generateDatesForMonth(visibleMonth).find(\n (visibleDay) => isDaySelectable(visibleDay),\n );\n if (firstSelectableDate) {\n return firstSelectableDate;\n }\n return null;\n }, [\n isInVisibleMonth,\n selectionVariant,\n selectionManager.state.selectedDate,\n timeZone,\n visibleMonth,\n ]);\n\n const [focusedDate, setFocusedDateState] = useState<DateValue | null>(\n getInitialFocusedDate,\n );\n\n const isDayVisible = useCallback(\n (date: DateValue) => {\n const startInsideDays = startOfMonth(visibleMonth);\n\n if (date.compare(startInsideDays) < 0) return false;\n\n const endInsideDays = endOfMonth(visibleMonth);\n\n return !(date.compare(endInsideDays) > 0);\n },\n [visibleMonth],\n );\n\n const setVisibleMonth = useCallback(\n (event: SyntheticEvent, newVisibleMonth: DateValue) => {\n setVisibleMonthState(newVisibleMonth);\n onVisibleMonthChange?.(event, newVisibleMonth);\n },\n [onVisibleMonthChange],\n );\n\n const setFocusedDate = useCallback(\n (event: SyntheticEvent, date: DateValue) => {\n if (\n !focusedDate ||\n isSameDay(date, focusedDate) ||\n isOutsideAllowedDates(date)\n )\n return;\n\n setFocusedDateState(date);\n\n const shouldTransition =\n !isDayVisible(date) &&\n isDaySelectable(date) &&\n !isOutsideAllowedDates(date);\n if (shouldTransition) {\n setVisibleMonth(event, startOfMonth(date));\n }\n },\n [\n focusedDate,\n isDaySelectable,\n isDayVisible,\n isOutsideAllowedDates,\n setVisibleMonth,\n ],\n );\n\n useEffect(() => {\n if (visibleMonth && focusedDate && !isDayVisible(focusedDate)) {\n const focusableDate = getInitialFocusedDate();\n if (focusableDate) {\n setFocusedDateState(focusableDate);\n }\n }\n }, [isDayVisible, focusedDate, getInitialFocusedDate, visibleMonth]);\n\n return useMemo(\n () => ({\n state: {\n visibleMonth,\n focusedDate,\n minDate,\n maxDate,\n selectionVariant,\n hideOutOfRangeDates,\n calendarFocused,\n timeZone,\n locale,\n ...selectionManager.state,\n },\n helpers: {\n setVisibleMonth,\n setFocusedDate,\n setCalendarFocused,\n isDayUnselectable,\n isDayHighlighted,\n isDayDisabled,\n isDayVisible,\n isOutsideAllowedDates,\n isOutsideAllowedMonths,\n isOutsideAllowedYears,\n ...selectionManager.helpers,\n },\n }),\n [\n visibleMonth,\n focusedDate,\n minDate,\n maxDate,\n selectionVariant,\n hideOutOfRangeDates,\n calendarFocused,\n timeZone,\n locale,\n setVisibleMonth,\n setFocusedDate,\n isDayUnselectable,\n isDayHighlighted,\n isDayDisabled,\n isDayVisible,\n isOutsideAllowedDates,\n isOutsideAllowedMonths,\n isOutsideAllowedYears,\n selectionManager,\n ],\n );\n}\n"],"names":["getLocalTimeZone","getCurrentLocale","today","useControlled","startOfMonth","useCallback","date","endOfMonth","endOfYear","startOfYear","useCalendarSelection","useState","isSameMonth","selectedDate","isDateRangeSelection","generateDatesForMonth","isSameDay","useEffect","useMemo"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"useCalendar.js","sources":["../src/calendar/useCalendar.ts"],"sourcesContent":["import { useControlled } from \"@salt-ds/core\";\nimport type { DateFrameworkType } from \"@salt-ds/date-adapters\";\nimport {\n type SyntheticEvent,\n useCallback,\n useEffect,\n useMemo,\n useState,\n} from \"react\";\nimport { useLocalization } from \"../localization-provider\";\nimport { generateDatesForMonth } from \"./internal/utils\";\nimport {\n type UseCalendarSelectionMultiSelectProps,\n type UseCalendarSelectionOffsetProps,\n type UseCalendarSelectionProps,\n type UseCalendarSelectionRangeProps,\n type UseCalendarSelectionSingleProps,\n isDateRangeSelection,\n useCalendarSelection,\n} from \"./useCalendarSelection\";\n\n/**\n * Interface representing the base properties UseCalendar hook.\n */\ninterface UseCalendarBaseProps<TDate> {\n /**\n * The default visible month.\n */\n defaultVisibleMonth?: TDate;\n /**\n * Callback fired when the visible month changes.\n * @param event - The synthetic event.\n * @param visibleMonth - The new visible month.\n */\n onVisibleMonthChange?: (event: SyntheticEvent, visibleMonth: TDate) => void;\n /**\n * Function to determine if a day is unselectable.\n * @param date - The date to check.\n * @returns A string reason if the day is unselectable, otherwise `false` or `undefined`.\n */\n isDayUnselectable?: (date: TDate) => string | false | undefined;\n /**\n * Function to determine if a day is highlighted.\n * @param date - The date to check.\n * @returns A string reason if the day is highlighted, otherwise `false` or `undefined`.\n */\n isDayHighlighted?: (date: TDate) => string | false | undefined;\n /**\n * Function to determine if a day is disabled.\n * @param date - The date to check.\n * @returns A string reason if the day is disabled, otherwise `false` or `undefined`.\n */\n isDayDisabled?: (date: TDate) => string | false | undefined;\n /**\n * The currently visible month.\n */\n visibleMonth?: TDate;\n /**\n * If `true`, hides dates that are out of the selectable range.\n */\n hideOutOfRangeDates?: boolean;\n /**\n * Locale for date formatting\n */\n locale?: any;\n /**\n * The minimum selectable date.\n */\n minDate?: TDate;\n /**\n * The maximum selectable date.\n */\n maxDate?: TDate;\n}\n\n/**\n * UseCalendar hook props for a single date selection Calendar.\n */\nexport interface UseCalendarSingleProps<TDate extends DateFrameworkType>\n extends UseCalendarSelectionSingleProps<TDate>,\n UseCalendarBaseProps<TDate> {\n /**\n * The selection variant, set to \"single\".\n */\n selectionVariant: \"single\";\n}\n\n/**\n * UseCalendar hook props for a date range selection Calendar.\n */\nexport interface UseCalendarRangeProps<TDate extends DateFrameworkType>\n extends UseCalendarSelectionRangeProps<TDate>,\n UseCalendarBaseProps<TDate> {\n /**\n * The selection variant, set to \"range\".\n */\n selectionVariant: \"range\";\n}\n\n/**\n * UseCalendar hook props for a multi-select Calendar.\n */\nexport interface UseCalendarMultiSelectProps<TDate extends DateFrameworkType>\n extends UseCalendarSelectionMultiSelectProps<TDate>,\n UseCalendarBaseProps<TDate> {\n /**\n * The selection variant, set to \"multiselect\".\n */\n selectionVariant: \"multiselect\";\n}\n\n/**\n * UseCalendar hook props for an offset date selection Calendar.\n */\nexport interface UseCalendarOffsetProps<TDate extends DateFrameworkType>\n extends UseCalendarSelectionOffsetProps<TDate>,\n UseCalendarBaseProps<TDate> {\n /**\n * The selection variant, set to \"offset\".\n */\n selectionVariant: \"offset\";\n}\n\n/**\n * UseCalendar hook props, wth the selection variant determining the return type of the date selection\n */\nexport type UseCalendarProps<TDate extends DateFrameworkType> =\n | UseCalendarSingleProps<TDate>\n | UseCalendarRangeProps<TDate>\n | UseCalendarMultiSelectProps<TDate>\n | UseCalendarOffsetProps<TDate>;\n\n/**\n * Default function to determine if a day is unselectable.\n * @returns `false` indicating the day is selectable.\n */\nconst defaultIsDayUnselectable = (): string | false => false;\n\n/**\n * Default function to determine if a day is highlighted.\n * @returns `false` indicating the day is not highlighted.\n */\nconst defaultIsDayHighlighted = (): string | false => false;\n\n/**\n * Default function to determine if a day is disabled.\n * @returns `false` indicating the day is not disabled.\n */\nconst defaultIsDayDisabled = (): false => false;\n\n/**\n * Represents the return type of the useCalendar hook.\n *\n * @template TDate - The type of the date object used in the calendar.\n */\nexport interface UseCalendarReturn<TDate extends DateFrameworkType> {\n /**\n * The state of the calendar.\n */\n state: {\n /**\n * The currently visible month in the calendar.\n */\n visibleMonth: TDate;\n\n /**\n * The currently focused date in the calendar, or null if no date is focused.\n */\n focusedDate: TDate | null;\n\n /**\n * The locale used for date formatting.\n */\n locale: any;\n\n /**\n * The minimum selectable date in the calendar.\n */\n minDate: TDate;\n\n /**\n * The maximum selectable date in the calendar.\n */\n maxDate: TDate;\n\n /**\n * The selection variant of the calendar, indicating the type of selection allowed.\n */\n selectionVariant: \"single\" | \"range\" | \"multiselect\" | \"offset\";\n\n /**\n * Whether to hide dates that are out of the selectable range.\n */\n hideOutOfRangeDates?: boolean;\n\n /**\n * Whether the calendar is currently focused.\n */\n calendarFocused: boolean;\n\n /**\n * Additional state properties from selectionManager.state.\n */\n [key: string]: any; // Use a more specific type if possible\n };\n\n /**\n * Helper functions for interacting with the calendar.\n */\n helpers: {\n /**\n * Sets the visible month in the calendar.\n *\n * @param event - The synthetic event triggering the change.\n * @param newVisibleMonth - The new visible month to set.\n */\n setVisibleMonth: (event: SyntheticEvent, newVisibleMonth: TDate) => void;\n\n /**\n * Sets the focused date in the calendar.\n *\n * @param event - The synthetic event triggering the change.\n * @param date - The new date to focus.\n */\n setFocusedDate: (event: SyntheticEvent, date: TDate) => void;\n\n /**\n * Sets whether the calendar is focused.\n *\n * @param focused - Whether the calendar should be focused.\n */\n setCalendarFocused: (focused: boolean) => void;\n\n /**\n * Determines if a day is unselectable.\n *\n * @param date - The date to check.\n * @returns A string reason if the day is unselectable, otherwise `false` or `undefined`.\n */\n isDayUnselectable: (date: TDate) => string | false | undefined;\n\n /**\n * Determines if a day is highlighted.\n *\n * @param date - The date to check.\n * @returns A string reason if the day is highlighted, otherwise `false` or `undefined`.\n */\n isDayHighlighted: (date: TDate) => string | false | undefined;\n\n /**\n * Determines if a day is disabled.\n *\n * @param date - The date to check.\n * @returns A string reason if the day is disabled, otherwise `false` or `undefined`.\n */\n isDayDisabled: (date: TDate) => string | false | undefined;\n\n /**\n * Determines if a day is visible in the calendar.\n *\n * @param date - The date to check.\n * @returns `true` if the day is visible, otherwise `false`.\n */\n isDayVisible: (date: TDate) => boolean;\n\n /**\n * Determines if a date is outside the allowed date range.\n *\n * @param date - The date to check.\n * @returns `true` if the date is outside the allowed range, otherwise `false`.\n */\n isOutsideAllowedDates: (date: TDate) => boolean;\n\n /**\n * Determines if a month is outside the allowed range.\n *\n * @param date - The date to check.\n * @returns `true` if the month is outside the allowed range, otherwise `false`.\n */\n isOutsideAllowedMonths: (date: TDate) => boolean;\n\n /**\n * Determines if a year is outside the allowed range.\n *\n * @param date - The date to check.\n * @returns `true` if the year is outside the allowed range, otherwise `false`.\n */\n isOutsideAllowedYears: (date: TDate) => boolean;\n\n /**\n * Sets the selected date in the calendar.\n *\n * @param event - The event triggering the change.\n * @param newSelectedDate - The new date to select.\n */\n setSelectedDate: (\n event:\n | React.KeyboardEvent<HTMLButtonElement>\n | React.MouseEvent<HTMLButtonElement, MouseEvent>,\n newSelectedDate: TDate,\n ) => void;\n\n /**\n * Determines if a date is selected.\n *\n * @param date - The date to check.\n * @returns `true` if the date is selected, otherwise `false`.\n */\n isSelected: (date: TDate) => boolean;\n\n /**\n * Sets the hovered date in the calendar.\n *\n * @param event - The event triggering the change.\n * @param newHoveredDate - The new date to hover.\n */\n setHoveredDate: (\n event: SyntheticEvent,\n newHoveredDate: TDate | null,\n ) => void;\n\n /**\n * Determines if a date is part of a selected span.\n *\n * @param date - The date to check.\n * @returns `true` if the date is part of a selected span, otherwise `false`.\n */\n isSelectedSpan: (date: TDate) => boolean;\n\n /**\n * Determines if a date is part of a hovered span.\n *\n * @param date - The date to check.\n * @returns `true` if the date is part of a hovered span, otherwise `false`.\n */\n isHoveredSpan: (date: TDate) => boolean;\n\n /**\n * Determines if a date is the start of a selected range.\n *\n * @param date - The date to check.\n * @returns `true` if the date is the start of a selected range, otherwise `false`.\n */\n isSelectedStart: (date: TDate) => boolean;\n\n /**\n * Determines if a date is the end of a selected range.\n *\n * @param date - The date to check.\n * @returns `true` if the date is the end of a selected range, otherwise `false`.\n */\n isSelectedEnd: (date: TDate) => boolean;\n\n /**\n * Determines if a date is hovered.\n *\n * @param date - The date to check.\n * @returns `true` if the date is hovered, otherwise `false`.\n */\n isHovered: (date: TDate) => boolean;\n\n /**\n * Determines if a date is part of a hovered offset.\n *\n * @param date - The date to check.\n * @returns `true` if the date is part of a hovered offset, otherwise `false`.\n */\n isHoveredOffset: (date: TDate) => boolean;\n\n /**\n * Determines if a day is selectable.\n *\n * @param date - The date to check.\n * @returns `true` if the day is selectable, otherwise `false`.\n */\n isDaySelectable: (date: TDate) => boolean;\n };\n}\n\nexport function useCalendar<TDate extends DateFrameworkType>(\n props: UseCalendarProps<TDate>,\n): UseCalendarReturn<TDate> {\n const {\n dateAdapter,\n defaultDates: { minDate: defaultMinDate, maxDate: defaultMaxDate },\n } = useLocalization<TDate>();\n const {\n selectedDate,\n defaultSelectedDate,\n visibleMonth: visibleMonthProp,\n hideOutOfRangeDates,\n locale,\n defaultVisibleMonth = dateAdapter.today(locale),\n onSelectionChange,\n onVisibleMonthChange,\n isDayUnselectable = defaultIsDayUnselectable,\n isDayHighlighted = defaultIsDayHighlighted,\n isDayDisabled = defaultIsDayDisabled,\n minDate = defaultMinDate,\n maxDate = defaultMaxDate,\n selectionVariant,\n onHoveredDateChange,\n hoveredDate,\n // startDateOffset,\n // endDateOffset,\n } = props;\n const [visibleMonth, setVisibleMonthState] = useControlled({\n controlled: visibleMonthProp\n ? dateAdapter.startOf(visibleMonthProp, \"month\", locale)\n : undefined,\n default: dateAdapter.startOf(defaultVisibleMonth, \"month\", locale),\n name: \"Calendar\",\n state: \"visibleMonth\",\n });\n\n const isOutsideAllowedDates = useCallback(\n (date: TDate) => {\n return (\n dateAdapter.compare(date, minDate) < 0 ||\n dateAdapter.compare(date, maxDate) > 0\n );\n },\n [maxDate, minDate],\n );\n\n const isOutsideAllowedMonths = useCallback(\n (date: TDate) => {\n const startOfMonth = dateAdapter.startOf(date, \"month\", locale);\n const endOfMonth = dateAdapter.endOf(date, \"month\", locale);\n return (\n dateAdapter.compare(endOfMonth, minDate) < 0 ||\n dateAdapter.compare(startOfMonth, maxDate) > 0\n );\n },\n [minDate, maxDate],\n );\n\n const isOutsideAllowedYears = useCallback(\n (date: TDate) => {\n const startOfYear = dateAdapter.startOf(date, \"year\", locale);\n const endOfYear = dateAdapter.endOf(date, \"year\", locale);\n return (\n dateAdapter.compare(endOfYear, minDate) < 0 ||\n dateAdapter.compare(startOfYear, maxDate) > 0\n );\n },\n [minDate, maxDate],\n );\n\n const isDaySelectable = useCallback(\n (date?: TDate) =>\n !(\n date &&\n (isDayUnselectable(date) ||\n isDayDisabled(date) ||\n isOutsideAllowedDates(date))\n ),\n [isDayUnselectable, isDayDisabled, isOutsideAllowedDates],\n );\n\n const selectionManager = useCalendarSelection<TDate>({\n defaultSelectedDate: defaultSelectedDate,\n selectedDate,\n onSelectionChange,\n startDateOffset:\n props.selectionVariant === \"offset\" ? props.startDateOffset : undefined,\n endDateOffset:\n props.selectionVariant === \"offset\" ? props.endDateOffset : undefined,\n isDaySelectable,\n selectionVariant,\n onHoveredDateChange,\n hoveredDate,\n } as UseCalendarSelectionProps<TDate>);\n\n const [calendarFocused, setCalendarFocused] = useState(false);\n\n const isInVisibleMonth = useCallback(\n (date: TDate | undefined | null): date is TDate =>\n date != null && dateAdapter.isSame(date, visibleMonth, \"month\"),\n [visibleMonth],\n );\n\n const getInitialFocusedDate = useCallback(() => {\n const selectedDate = selectionManager.state.selectedDate;\n if (\n (selectionVariant === \"range\" || selectionVariant === \"offset\") &&\n isDateRangeSelection<TDate>(selectedDate)\n ) {\n if (isInVisibleMonth(selectedDate?.startDate)) {\n return selectedDate.startDate;\n }\n if (isInVisibleMonth(selectedDate?.endDate)) {\n return selectedDate.endDate;\n }\n } else if (\n selectionVariant === \"multiselect\" &&\n Array.isArray(selectedDate)\n ) {\n // return first selected day in visible month\n const selectionInMonth = selectedDate\n .filter((day) => isInVisibleMonth(day))\n .sort((a, b) => dateAdapter.compare(a, b));\n if (selectionInMonth.length > 0) {\n return selectionInMonth[0];\n }\n } else if (\n selectionVariant === \"single\" &&\n !isDateRangeSelection(selectedDate) &&\n !Array.isArray(selectedDate) &&\n isInVisibleMonth(selectedDate)\n ) {\n return selectedDate;\n }\n // Defaults\n if (\n isDaySelectable(dateAdapter.today(locale)) &&\n isInVisibleMonth(dateAdapter.today(locale))\n ) {\n return dateAdapter.today(locale);\n }\n const firstSelectableDate = generateDatesForMonth(\n dateAdapter,\n visibleMonth,\n ).find((visibleDay) => isDaySelectable(visibleDay));\n if (firstSelectableDate) {\n return firstSelectableDate;\n }\n return null;\n }, [\n isInVisibleMonth,\n selectionVariant,\n selectionManager.state.selectedDate,\n visibleMonth,\n ]);\n\n const [focusedDate, setFocusedDateState] = useState<TDate | null>(\n getInitialFocusedDate,\n );\n\n const isDayVisible = useCallback(\n (date: TDate) => {\n const startInsideDays = dateAdapter.startOf(\n visibleMonth,\n \"month\",\n locale,\n );\n\n if (dateAdapter.compare(date, startInsideDays) < 0) return false;\n\n const endInsideDays = dateAdapter.endOf(visibleMonth, \"month\", locale);\n\n return !(dateAdapter.compare(date, endInsideDays) > 0);\n },\n [visibleMonth],\n );\n\n const setVisibleMonth = useCallback(\n (event: SyntheticEvent, newVisibleMonth: TDate) => {\n setVisibleMonthState(newVisibleMonth);\n onVisibleMonthChange?.(event, newVisibleMonth);\n },\n [onVisibleMonthChange],\n );\n\n const setFocusedDate = useCallback(\n (event: SyntheticEvent, date: TDate) => {\n if (\n !focusedDate ||\n dateAdapter.isSame(date, focusedDate, \"day\") ||\n isOutsideAllowedDates(date)\n )\n return;\n\n setFocusedDateState(date);\n\n const shouldTransition =\n !isDayVisible(date) &&\n isDaySelectable(date) &&\n !isOutsideAllowedDates(date);\n if (shouldTransition) {\n setVisibleMonth(event, dateAdapter.startOf(date, \"month\", locale));\n }\n },\n [\n focusedDate,\n isDaySelectable,\n isDayVisible,\n isOutsideAllowedDates,\n setVisibleMonth,\n ],\n );\n\n useEffect(() => {\n if (visibleMonth && focusedDate && !isDayVisible(focusedDate)) {\n const focusableDate = getInitialFocusedDate();\n if (focusableDate) {\n setFocusedDateState(focusableDate);\n }\n }\n }, [isDayVisible, focusedDate, getInitialFocusedDate, visibleMonth]);\n\n return useMemo(\n () =>\n ({\n state: {\n visibleMonth,\n focusedDate,\n locale,\n minDate,\n maxDate,\n selectionVariant,\n hideOutOfRangeDates,\n calendarFocused,\n ...selectionManager.state,\n },\n helpers: {\n setVisibleMonth,\n setFocusedDate,\n setCalendarFocused,\n isDayUnselectable,\n isDayHighlighted,\n isDayDisabled,\n isDayVisible,\n isOutsideAllowedDates,\n isOutsideAllowedMonths,\n isOutsideAllowedYears,\n ...selectionManager.helpers,\n },\n }) as UseCalendarReturn<TDate>,\n [\n visibleMonth,\n focusedDate,\n locale,\n minDate,\n maxDate,\n selectionVariant,\n hideOutOfRangeDates,\n calendarFocused,\n setVisibleMonth,\n setFocusedDate,\n isDayUnselectable,\n isDayHighlighted,\n isDayDisabled,\n isDayVisible,\n isOutsideAllowedDates,\n isOutsideAllowedMonths,\n isOutsideAllowedYears,\n selectionManager,\n ],\n );\n}\n"],"names":["useLocalization","useControlled","useCallback","useCalendarSelection","useState","selectedDate","isDateRangeSelection","generateDatesForMonth","useEffect","useMemo"],"mappings":"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"}
|
|
@@ -1,20 +1,16 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
-
var date = require('@internationalized/date');
|
|
4
3
|
var react = require('react');
|
|
4
|
+
var LocalizationProvider = require('../localization-provider/LocalizationProvider.js');
|
|
5
5
|
var CalendarContext = require('./internal/CalendarContext.js');
|
|
6
6
|
var useFocusManagement = require('./internal/useFocusManagement.js');
|
|
7
7
|
var useCalendarSelection = require('./useCalendarSelection.js');
|
|
8
8
|
|
|
9
|
-
function useCalendarDay(
|
|
9
|
+
function useCalendarDay(props, ref) {
|
|
10
|
+
const { date, month } = props;
|
|
11
|
+
const { dateAdapter } = LocalizationProvider.useLocalization();
|
|
10
12
|
const {
|
|
11
|
-
state: {
|
|
12
|
-
focusedDate,
|
|
13
|
-
hideOutOfRangeDates,
|
|
14
|
-
calendarFocused,
|
|
15
|
-
locale,
|
|
16
|
-
timeZone
|
|
17
|
-
},
|
|
13
|
+
state: { focusedDate, hideOutOfRangeDates, locale, calendarFocused },
|
|
18
14
|
helpers: {
|
|
19
15
|
isDayUnselectable,
|
|
20
16
|
isDaySelectable,
|
|
@@ -23,8 +19,8 @@ function useCalendarDay({ date: date$1, month }, ref) {
|
|
|
23
19
|
isOutsideAllowedMonths
|
|
24
20
|
}
|
|
25
21
|
} = CalendarContext.useCalendarContext();
|
|
26
|
-
const selectionManager = useCalendarSelection.useCalendarSelectionDay({ date
|
|
27
|
-
const focusManager = useFocusManagement.useFocusManagement({ date
|
|
22
|
+
const selectionManager = useCalendarSelection.useCalendarSelectionDay({ date });
|
|
23
|
+
const focusManager = useFocusManagement.useFocusManagement({ date });
|
|
28
24
|
const handleClick = (event) => {
|
|
29
25
|
selectionManager == null ? void 0 : selectionManager.handleClick(event);
|
|
30
26
|
focusManager.handleClick(event);
|
|
@@ -46,13 +42,13 @@ function useCalendarDay({ date: date$1, month }, ref) {
|
|
|
46
42
|
onFocus: handleFocus,
|
|
47
43
|
onMouseOver: handleMouseOver
|
|
48
44
|
};
|
|
49
|
-
const outOfRange = !
|
|
50
|
-
const focused = focusedDate &&
|
|
51
|
-
const tabIndex = focusedDate &&
|
|
52
|
-
const today =
|
|
53
|
-
const unselectableReason = isDayUnselectable(date
|
|
54
|
-
const highlightedReason = isDayHighlighted(date
|
|
55
|
-
const disabled = isDayDisabled(date
|
|
45
|
+
const outOfRange = !dateAdapter.isSame(date, month, "month");
|
|
46
|
+
const focused = focusedDate && dateAdapter.isSame(date, focusedDate, "day") && calendarFocused && !outOfRange;
|
|
47
|
+
const tabIndex = focusedDate && dateAdapter.isSame(date, focusedDate, "day") && !outOfRange ? 0 : -1;
|
|
48
|
+
const today = dateAdapter.isSame(dateAdapter.today(locale), date, "day");
|
|
49
|
+
const unselectableReason = isDayUnselectable(date) || isDayDisabled(date);
|
|
50
|
+
const highlightedReason = isDayHighlighted(date);
|
|
51
|
+
const disabled = isDayDisabled(date) || outOfRange && isOutsideAllowedMonths(date) || isDaySelectable && !isDaySelectable(date);
|
|
56
52
|
const unselectable = Boolean(unselectableReason);
|
|
57
53
|
const highlighted = Boolean(highlightedReason);
|
|
58
54
|
const hidden = hideOutOfRangeDates && outOfRange;
|
|
@@ -81,9 +77,7 @@ function useCalendarDay({ date: date$1, month }, ref) {
|
|
|
81
77
|
...selectionManager.dayProps
|
|
82
78
|
},
|
|
83
79
|
unselectableReason,
|
|
84
|
-
highlightedReason
|
|
85
|
-
locale,
|
|
86
|
-
timeZone
|
|
80
|
+
highlightedReason
|
|
87
81
|
};
|
|
88
82
|
}
|
|
89
83
|
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useCalendarDay.js","sources":["../src/calendar/useCalendarDay.ts"],"sourcesContent":["import
|
|
1
|
+
{"version":3,"file":"useCalendarDay.js","sources":["../src/calendar/useCalendarDay.ts"],"sourcesContent":["import type { DateFrameworkType } from \"@salt-ds/date-adapters\";\nimport {\n type ComponentPropsWithoutRef,\n type FocusEventHandler,\n type KeyboardEventHandler,\n type MouseEventHandler,\n type RefObject,\n useEffect,\n} from \"react\";\nimport { useLocalization } from \"../localization-provider\";\nimport { useCalendarContext } from \"./internal/CalendarContext\";\nimport { useFocusManagement } from \"./internal/useFocusManagement\";\nimport { useCalendarSelectionDay } from \"./useCalendarSelection\";\n\n/**\n * Interface representing the status of a day in the Calendar.\n */\nexport interface DayStatus {\n /**\n * If `true`, the day is out of the selectable range.\n */\n outOfRange?: boolean;\n /**\n * If `true`, the day is selected.\n */\n selected?: boolean;\n /**\n * If `true`, the day is today.\n */\n today?: boolean;\n /**\n * If set, the day is unselectable with a reason.\n */\n unselectable?: string | false;\n /**\n * If set, the day is highlighted with a reason.\n */\n highlighted?: string | false;\n /**\n * If `true`, the day is focused.\n */\n focused?: boolean;\n /**\n * If `true`, the day is disabled.\n */\n disabled?: boolean;\n /**\n * If `true`, the day is hidden.\n */\n hidden?: boolean;\n}\n\n/**\n * UseCalendar hook props to return a calendar day's status\n */\nexport interface useCalendarDayProps<TDate> {\n /**\n * The date of the calendar day.\n */\n date: TDate;\n /**\n * The month of the calendar day.\n */\n month: TDate;\n}\n\nexport function useCalendarDay<TDate extends DateFrameworkType>(\n props: useCalendarDayProps<TDate>,\n ref: RefObject<HTMLElement>,\n) {\n const { date, month } = props;\n const { dateAdapter } = useLocalization<TDate>();\n const {\n state: { focusedDate, hideOutOfRangeDates, locale, calendarFocused },\n helpers: {\n isDayUnselectable,\n isDaySelectable,\n isDayHighlighted,\n isDayDisabled,\n isOutsideAllowedMonths,\n },\n } = useCalendarContext<TDate>();\n const selectionManager = useCalendarSelectionDay<TDate>({ date });\n const focusManager = useFocusManagement<TDate>({ date });\n\n const handleClick: MouseEventHandler<HTMLButtonElement> = (event) => {\n selectionManager?.handleClick(event);\n focusManager.handleClick(event);\n };\n\n const handleKeyDown: KeyboardEventHandler<HTMLButtonElement> = (event) => {\n focusManager.handleKeyDown(event);\n selectionManager?.handleKeyDown(event);\n };\n\n const handleFocus: FocusEventHandler<HTMLButtonElement> = (event) => {\n focusManager.handleFocus(event);\n };\n\n const handleMouseOver: MouseEventHandler<HTMLButtonElement> = (event) => {\n selectionManager.handleMouseOver?.(event);\n };\n\n const eventHandlers = {\n onClick: handleClick,\n onKeyDown: handleKeyDown,\n onFocus: handleFocus,\n onMouseOver: handleMouseOver,\n };\n\n const outOfRange = !dateAdapter.isSame(date, month, \"month\");\n const focused =\n focusedDate &&\n dateAdapter.isSame(date, focusedDate, \"day\") &&\n calendarFocused &&\n !outOfRange;\n const tabIndex =\n focusedDate && dateAdapter.isSame(date, focusedDate, \"day\") && !outOfRange\n ? 0\n : -1;\n const today = dateAdapter.isSame(dateAdapter.today(locale), date, \"day\");\n\n const unselectableReason = isDayUnselectable(date) || isDayDisabled(date);\n const highlightedReason = isDayHighlighted(date);\n\n const disabled =\n isDayDisabled(date) ||\n (outOfRange && isOutsideAllowedMonths(date)) ||\n (isDaySelectable && !isDaySelectable(date));\n const unselectable = Boolean(unselectableReason);\n const highlighted = Boolean(highlightedReason);\n const hidden = hideOutOfRangeDates && outOfRange;\n\n useEffect(() => {\n if (focused) {\n ref.current?.focus({ preventScroll: true });\n }\n }, [ref, focused]);\n\n return {\n status: {\n outOfRange,\n today,\n unselectable,\n focused,\n hidden,\n disabled,\n highlighted,\n ...selectionManager.status,\n } as DayStatus,\n dayProps: {\n tabIndex,\n \"aria-current\": today ? \"date\" : undefined,\n \"aria-hidden\": hidden ? \"true\" : undefined,\n ...eventHandlers,\n ...selectionManager.dayProps,\n } as ComponentPropsWithoutRef<\"button\">,\n unselectableReason,\n highlightedReason,\n };\n}\n"],"names":["useLocalization","useCalendarContext","useCalendarSelectionDay","useFocusManagement","useEffect"],"mappings":"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"}
|
|
@@ -1,15 +1,13 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
-
var date = require('@internationalized/date');
|
|
4
3
|
var core = require('@salt-ds/core');
|
|
5
4
|
var clsx = require('clsx');
|
|
6
5
|
var react = require('react');
|
|
6
|
+
var LocalizationProvider = require('../localization-provider/LocalizationProvider.js');
|
|
7
7
|
var CalendarContext = require('./internal/CalendarContext.js');
|
|
8
8
|
|
|
9
|
-
const CALENDAR_MIN_YEAR = 1900;
|
|
10
|
-
const CALENDAR_MAX_YEAR = 2100;
|
|
11
9
|
function isSingleSelectionValueType(value) {
|
|
12
|
-
return value
|
|
10
|
+
return !isMultipleDateSelection(value) && !isDateRangeSelection(value);
|
|
13
11
|
}
|
|
14
12
|
function isDateRangeSelection(value) {
|
|
15
13
|
return value && typeof value === "object" && ("startDate" in value || "endDate" in value);
|
|
@@ -18,40 +16,44 @@ function isMultipleDateSelection(value) {
|
|
|
18
16
|
return Array.isArray(value) && value.every((item) => isSingleSelectionValueType(item));
|
|
19
17
|
}
|
|
20
18
|
const withBaseName = core.makePrefixer("saltCalendarDay");
|
|
21
|
-
function addOrRemoveFromArray(array, item) {
|
|
19
|
+
function addOrRemoveFromArray(dateAdapter, array, item) {
|
|
22
20
|
if (Array.isArray(array)) {
|
|
23
|
-
|
|
24
|
-
|
|
21
|
+
const filteredArray = array.filter(
|
|
22
|
+
(element) => !dateAdapter.isSame(element, item, "day")
|
|
23
|
+
);
|
|
24
|
+
if (filteredArray.length === array.length) {
|
|
25
|
+
return array.concat(item);
|
|
25
26
|
}
|
|
26
|
-
return
|
|
27
|
+
return filteredArray;
|
|
27
28
|
}
|
|
28
29
|
return [item];
|
|
29
30
|
}
|
|
30
|
-
|
|
31
|
+
function updateRangeSelection(datePicker, currentSelectedDate, newSelectedDate) {
|
|
31
32
|
let base = { ...currentSelectedDate };
|
|
32
33
|
if ((base == null ? void 0 : base.startDate) && (base == null ? void 0 : base.endDate)) {
|
|
33
34
|
base = { startDate: newSelectedDate };
|
|
34
|
-
} else if ((base == null ? void 0 : base.startDate) &&
|
|
35
|
+
} else if ((base == null ? void 0 : base.startDate) && datePicker.compare(newSelectedDate, base.startDate) < 0) {
|
|
35
36
|
base = { startDate: newSelectedDate };
|
|
36
|
-
} else if ((base == null ? void 0 : base.startDate) &&
|
|
37
|
+
} else if ((base == null ? void 0 : base.startDate) && datePicker.compare(newSelectedDate, base.startDate) >= 0) {
|
|
37
38
|
base = { ...base, endDate: newSelectedDate };
|
|
38
39
|
} else {
|
|
39
40
|
base = { startDate: newSelectedDate };
|
|
40
41
|
}
|
|
41
42
|
return base;
|
|
42
|
-
}
|
|
43
|
+
}
|
|
43
44
|
function useCalendarSelection(props) {
|
|
44
45
|
const {
|
|
45
46
|
hoveredDate: hoveredDateProp,
|
|
46
47
|
selectedDate: selectedDateProp,
|
|
47
48
|
defaultSelectedDate,
|
|
48
|
-
|
|
49
|
+
onSelectionChange,
|
|
49
50
|
onHoveredDateChange,
|
|
50
51
|
isDaySelectable,
|
|
51
52
|
selectionVariant
|
|
52
53
|
// startDateOffset,
|
|
53
54
|
// endDateOffset,
|
|
54
55
|
} = props;
|
|
56
|
+
const { dateAdapter } = LocalizationProvider.useLocalization();
|
|
55
57
|
const [selectedDate, setSelectedDateState] = core.useControlled({
|
|
56
58
|
controlled: selectedDateProp,
|
|
57
59
|
default: defaultSelectedDate,
|
|
@@ -85,25 +87,27 @@ function useCalendarSelection(props) {
|
|
|
85
87
|
switch (selectionVariant) {
|
|
86
88
|
case "single": {
|
|
87
89
|
setSelectedDateState(newSelectedDate);
|
|
88
|
-
|
|
90
|
+
onSelectionChange == null ? void 0 : onSelectionChange(event, newSelectedDate);
|
|
89
91
|
break;
|
|
90
92
|
}
|
|
91
93
|
case "multiselect": {
|
|
92
94
|
const newMultiSelectDate = addOrRemoveFromArray(
|
|
95
|
+
dateAdapter,
|
|
93
96
|
selectedDate,
|
|
94
97
|
newSelectedDate
|
|
95
98
|
);
|
|
96
99
|
setSelectedDateState(newMultiSelectDate);
|
|
97
|
-
|
|
100
|
+
onSelectionChange == null ? void 0 : onSelectionChange(event, newMultiSelectDate);
|
|
98
101
|
break;
|
|
99
102
|
}
|
|
100
103
|
case "range": {
|
|
101
104
|
const newRangeDate = updateRangeSelection(
|
|
105
|
+
dateAdapter,
|
|
102
106
|
selectedDate,
|
|
103
107
|
newSelectedDate
|
|
104
108
|
);
|
|
105
109
|
setSelectedDateState(newRangeDate);
|
|
106
|
-
|
|
110
|
+
onSelectionChange == null ? void 0 : onSelectionChange(event, newRangeDate);
|
|
107
111
|
break;
|
|
108
112
|
}
|
|
109
113
|
case "offset": {
|
|
@@ -112,26 +116,31 @@ function useCalendarSelection(props) {
|
|
|
112
116
|
endDate: getEndDateOffset(newSelectedDate)
|
|
113
117
|
};
|
|
114
118
|
setSelectedDateState(newOffsetDate);
|
|
115
|
-
(_a = props.
|
|
119
|
+
(_a = props.onSelectionChange) == null ? void 0 : _a.call(props, event, newOffsetDate);
|
|
116
120
|
break;
|
|
117
121
|
}
|
|
118
122
|
}
|
|
119
123
|
}
|
|
120
124
|
},
|
|
121
|
-
[isDaySelectable, selectedDate, selectionVariant,
|
|
125
|
+
[isDaySelectable, selectedDate, selectionVariant, onSelectionChange]
|
|
122
126
|
);
|
|
123
127
|
const isSelected = react.useCallback(
|
|
124
|
-
(date
|
|
128
|
+
(date) => {
|
|
129
|
+
if (!selectedDate) {
|
|
130
|
+
return false;
|
|
131
|
+
}
|
|
125
132
|
switch (selectionVariant) {
|
|
126
133
|
case "single":
|
|
127
|
-
return isSingleSelectionValueType(selectedDate) &&
|
|
134
|
+
return isSingleSelectionValueType(selectedDate) && dateAdapter.isSame(selectedDate, date, "day");
|
|
128
135
|
case "multiselect":
|
|
129
|
-
return Array.isArray(selectedDate) && !!selectedDate.find(
|
|
136
|
+
return Array.isArray(selectedDate) && !!selectedDate.find(
|
|
137
|
+
(element) => dateAdapter.isSame(element, date, "day")
|
|
138
|
+
);
|
|
130
139
|
default:
|
|
131
140
|
return false;
|
|
132
141
|
}
|
|
133
142
|
},
|
|
134
|
-
[selectionVariant, selectedDate]
|
|
143
|
+
[dateAdapter, selectionVariant, selectedDate]
|
|
135
144
|
);
|
|
136
145
|
const [hoveredDate, setHoveredDateState] = core.useControlled({
|
|
137
146
|
controlled: hoveredDateProp,
|
|
@@ -147,24 +156,24 @@ function useCalendarSelection(props) {
|
|
|
147
156
|
[onHoveredDateChange]
|
|
148
157
|
);
|
|
149
158
|
const isHovered = react.useCallback(
|
|
150
|
-
(date
|
|
151
|
-
return !!hoveredDate &&
|
|
159
|
+
(date) => {
|
|
160
|
+
return !!hoveredDate && dateAdapter.isSame(date, hoveredDate, "day");
|
|
152
161
|
},
|
|
153
162
|
[hoveredDate]
|
|
154
163
|
);
|
|
155
164
|
const isSelectedSpan = react.useCallback(
|
|
156
165
|
(date) => {
|
|
157
166
|
if ((selectionVariant === "range" || selectionVariant === "offset") && isDateRangeSelection(selectedDate) && (selectedDate == null ? void 0 : selectedDate.startDate) && (selectedDate == null ? void 0 : selectedDate.endDate)) {
|
|
158
|
-
return
|
|
167
|
+
return dateAdapter.compare(date, selectedDate.startDate) > 0 && dateAdapter.compare(date, selectedDate.endDate) < 0;
|
|
159
168
|
}
|
|
160
169
|
return false;
|
|
161
170
|
},
|
|
162
171
|
[selectionVariant, selectedDate]
|
|
163
172
|
);
|
|
164
173
|
const isHoveredSpan = react.useCallback(
|
|
165
|
-
(date
|
|
174
|
+
(date) => {
|
|
166
175
|
if ((selectionVariant === "range" || selectionVariant === "offset") && isDateRangeSelection(selectedDate) && selectedDate.startDate && !selectedDate.endDate && hoveredDate) {
|
|
167
|
-
const isForwardRange =
|
|
176
|
+
const isForwardRange = dateAdapter.compare(hoveredDate, selectedDate.startDate) > 0 && (dateAdapter.compare(date, selectedDate.startDate) > 0 && dateAdapter.compare(date, hoveredDate) < 0 || dateAdapter.isSame(date, hoveredDate, "day"));
|
|
168
177
|
const isValidDayHovered = !isDaySelectable || isDaySelectable(hoveredDate);
|
|
169
178
|
return isForwardRange && isValidDayHovered;
|
|
170
179
|
}
|
|
@@ -173,18 +182,18 @@ function useCalendarSelection(props) {
|
|
|
173
182
|
[selectionVariant, selectedDate, hoveredDate, isDaySelectable]
|
|
174
183
|
);
|
|
175
184
|
const isSelectedStart = react.useCallback(
|
|
176
|
-
(date
|
|
185
|
+
(date) => {
|
|
177
186
|
if ((selectionVariant === "range" || selectionVariant === "offset") && isDateRangeSelection(selectedDate) && selectedDate.startDate) {
|
|
178
|
-
return
|
|
187
|
+
return dateAdapter.isSame(selectedDate.startDate, date, "day");
|
|
179
188
|
}
|
|
180
189
|
return false;
|
|
181
190
|
},
|
|
182
191
|
[selectionVariant, selectedDate]
|
|
183
192
|
);
|
|
184
193
|
const isSelectedEnd = react.useCallback(
|
|
185
|
-
(date
|
|
194
|
+
(date) => {
|
|
186
195
|
if ((selectionVariant === "range" || selectionVariant === "offset") && isDateRangeSelection(selectedDate) && selectedDate.endDate) {
|
|
187
|
-
return
|
|
196
|
+
return dateAdapter.isSame(selectedDate.endDate, date, "day");
|
|
188
197
|
}
|
|
189
198
|
return false;
|
|
190
199
|
},
|
|
@@ -195,7 +204,7 @@ function useCalendarSelection(props) {
|
|
|
195
204
|
if (hoveredDate && selectionVariant === "offset") {
|
|
196
205
|
const startDate = getStartDateOffset(hoveredDate);
|
|
197
206
|
const endDate = getEndDateOffset(hoveredDate);
|
|
198
|
-
return
|
|
207
|
+
return dateAdapter.compare(date, startDate) >= 0 && dateAdapter.compare(date, endDate) <= 0 && (!isDaySelectable || isDaySelectable(date));
|
|
199
208
|
}
|
|
200
209
|
return false;
|
|
201
210
|
},
|
|
@@ -242,7 +251,9 @@ function useCalendarSelection(props) {
|
|
|
242
251
|
]
|
|
243
252
|
);
|
|
244
253
|
}
|
|
245
|
-
function useCalendarSelectionDay({
|
|
254
|
+
function useCalendarSelectionDay({
|
|
255
|
+
date
|
|
256
|
+
}) {
|
|
246
257
|
const {
|
|
247
258
|
helpers: {
|
|
248
259
|
setSelectedDate,
|
|
@@ -323,8 +334,6 @@ function useCalendarSelectionDay({ date }) {
|
|
|
323
334
|
};
|
|
324
335
|
}
|
|
325
336
|
|
|
326
|
-
exports.CALENDAR_MAX_YEAR = CALENDAR_MAX_YEAR;
|
|
327
|
-
exports.CALENDAR_MIN_YEAR = CALENDAR_MIN_YEAR;
|
|
328
337
|
exports.isDateRangeSelection = isDateRangeSelection;
|
|
329
338
|
exports.isMultipleDateSelection = isMultipleDateSelection;
|
|
330
339
|
exports.isSingleSelectionValueType = isSingleSelectionValueType;
|