@povio/ui 3.3.0-rc.4 → 3.3.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +15 -1
- package/dist/components/Breadcrumbs/Breadcrumbs.js +55 -206
- package/dist/components/buttons/InlineIconButton/InlineIconButton.js +9 -34
- package/dist/components/buttons/shared/ButtonContent.js +22 -80
- package/dist/components/inputs/Checkbox/CheckboxCheckmark.js +10 -24
- package/dist/components/inputs/DateTime/DatePicker/DatePicker.js +93 -227
- package/dist/components/inputs/DateTime/DateRangePicker/DateRangePicker.js +84 -202
- package/dist/components/inputs/DateTime/DateTimePicker/DateTimePicker.js +60 -132
- package/dist/components/inputs/DateTime/shared/Calendar.js +139 -339
- package/dist/components/inputs/DateTime/shared/CalendarCell.js +114 -308
- package/dist/components/inputs/DateTime/shared/CalendarGrid.js +35 -150
- package/dist/components/inputs/DateTime/shared/CalendarHeader.js +95 -229
- package/dist/components/inputs/DateTime/shared/CalendarSelectHeader.js +115 -296
- package/dist/components/inputs/DateTime/shared/DateField.js +135 -306
- package/dist/components/inputs/DateTime/shared/DatePickerInput.js +140 -338
- package/dist/components/inputs/DateTime/shared/DateTimeDialogFooter.js +10 -59
- package/dist/components/inputs/File/FileUpload.js +1 -1
- package/dist/components/inputs/File/InputUpload.js +65 -261
- package/dist/components/inputs/File/shared/FileUploadContentEmpty.js +48 -180
- package/dist/components/inputs/File/shared/FileUploadContentError.js +95 -265
- package/dist/components/inputs/File/shared/FileUploadContentFilled.js +99 -261
- package/dist/components/inputs/File/shared/FileUploadContentLoading.js +56 -234
- package/dist/components/inputs/File/shared/ProgressBar.js +15 -102
- package/dist/components/inputs/FormField/FormField.js +34 -47
- package/dist/components/inputs/Input/NumberRangeInput/NumberRangeInput.js +75 -313
- package/dist/components/inputs/Selection/Autocomplete/Autocomplete.js +23 -83
- package/dist/components/inputs/Selection/Select/QuerySelect.js +30 -96
- package/dist/components/inputs/Selection/Select/Select.js +3 -3
- package/dist/components/inputs/Selection/shared/SelectInput.js +1 -0
- package/dist/components/inputs/Selection/shared/SelectListBox.js +51 -163
- package/dist/components/inputs/Selection/shared/useSelectItems.js +48 -108
- package/dist/components/inputs/Skeleton/InputFrame.js +177 -552
- package/dist/components/inputs/TextEditor/TextEditor.js +87 -389
- package/dist/components/inputs/shared/InputClear.js +24 -40
- package/dist/components/navigation/Accordion/Accordion.js +22 -69
- package/dist/components/navigation/Accordion/AccordionItem.js +41 -86
- package/dist/components/navigation/Stepper/Stepper.js +22 -67
- package/dist/components/overlays/ActionModal/ActionModal.js +35 -169
- package/dist/components/overlays/ResponsivePopover/ResponsivePopover.js +29 -110
- package/dist/components/shared/pagination/Pagination.js +22 -108
- package/dist/components/status/Alert/Alert.js +30 -97
- package/dist/components/table/InfiniteTable.js +16 -67
- package/dist/components/table/Table.d.ts +2 -8
- package/dist/components/table/Table.js +33 -55
- package/dist/components/text/Typography/Typography.js +8 -23
- package/dist/config/confirmation.context.js +1 -1
- package/dist/config/theme.context.js +45 -98
- package/dist/config/uiConfig.context.js +8 -39
- package/dist/config/uiOverrides.context.d.ts +0 -1
- package/dist/hooks/useDebounceCallback.js +17 -51
- package/dist/hooks/useFormAutosave.js +33 -120
- package/dist/hooks/useLongPressRepeat.js +20 -55
- package/dist/index.d.ts +0 -1
- package/dist/index.js +1 -2
- package/package.json +2 -2
- package/dist/components/inputs/FormField/formField.cva.d.ts +0 -11
- package/dist/components/inputs/FormField/formField.cva.js +0 -16
- package/dist/components/table/TableColumnFilterInput.d.ts +0 -9
- package/dist/components/table/TableColumnFilterInput.js +0 -108
- package/dist/components/table/TableColumnFilterPlaceholder.d.ts +0 -5
- package/dist/components/table/TableColumnFilterPlaceholder.js +0 -41
- package/dist/components/table/TableColumnFilterRow.d.ts +0 -16
- package/dist/components/table/TableColumnFilterRow.js +0 -68
|
@@ -1,8 +1,7 @@
|
|
|
1
1
|
import { Typography } from "../../../text/Typography/Typography.js";
|
|
2
|
-
import { c } from "react/compiler-runtime";
|
|
3
2
|
import { jsx } from "react/jsx-runtime";
|
|
4
3
|
import { clsx } from "clsx";
|
|
5
|
-
import { useRef } from "react";
|
|
4
|
+
import { useCallback, useMemo, useRef } from "react";
|
|
6
5
|
import { mergeProps } from "@react-aria/utils";
|
|
7
6
|
import { isSameDay } from "@internationalized/date";
|
|
8
7
|
import { useCalendarCell } from "@react-aria/calendar";
|
|
@@ -11,172 +10,74 @@ import { useFocusRing } from "@react-aria/focus";
|
|
|
11
10
|
var isRange = (state) => {
|
|
12
11
|
return "highlightedRange" in state;
|
|
13
12
|
};
|
|
14
|
-
var CalendarCell = (
|
|
15
|
-
const $ = c(108);
|
|
16
|
-
let hoverDate;
|
|
17
|
-
let onApply;
|
|
18
|
-
let onDateHover;
|
|
19
|
-
let onDateSelection;
|
|
20
|
-
let onDoubleClickApply;
|
|
21
|
-
let onKeyboardNavigation;
|
|
22
|
-
let props;
|
|
23
|
-
let rangeSelection;
|
|
24
|
-
let state;
|
|
25
|
-
let t1;
|
|
26
|
-
let t2;
|
|
27
|
-
if ($[0] !== t0) {
|
|
28
|
-
({state, onApply, onDoubleClickApply, shouldApplyOnDateSelection: t1, shouldCloseOnSelect: t2, onDateSelection, onDateHover, rangeSelection, hoverDate, onKeyboardNavigation, ...props} = t0);
|
|
29
|
-
$[0] = t0;
|
|
30
|
-
$[1] = hoverDate;
|
|
31
|
-
$[2] = onApply;
|
|
32
|
-
$[3] = onDateHover;
|
|
33
|
-
$[4] = onDateSelection;
|
|
34
|
-
$[5] = onDoubleClickApply;
|
|
35
|
-
$[6] = onKeyboardNavigation;
|
|
36
|
-
$[7] = props;
|
|
37
|
-
$[8] = rangeSelection;
|
|
38
|
-
$[9] = state;
|
|
39
|
-
$[10] = t1;
|
|
40
|
-
$[11] = t2;
|
|
41
|
-
} else {
|
|
42
|
-
hoverDate = $[1];
|
|
43
|
-
onApply = $[2];
|
|
44
|
-
onDateHover = $[3];
|
|
45
|
-
onDateSelection = $[4];
|
|
46
|
-
onDoubleClickApply = $[5];
|
|
47
|
-
onKeyboardNavigation = $[6];
|
|
48
|
-
props = $[7];
|
|
49
|
-
rangeSelection = $[8];
|
|
50
|
-
state = $[9];
|
|
51
|
-
t1 = $[10];
|
|
52
|
-
t2 = $[11];
|
|
53
|
-
}
|
|
54
|
-
const shouldApplyOnDateSelection = t1 === void 0 ? true : t1;
|
|
55
|
-
const shouldCloseOnSelect = t2 === void 0 ? true : t2;
|
|
13
|
+
var CalendarCell = ({ state, onApply, onDoubleClickApply, shouldApplyOnDateSelection = true, shouldCloseOnSelect = true, onDateSelection, onDateHover, rangeSelection, hoverDate, onKeyboardNavigation, ...props }) => {
|
|
56
14
|
const ref = useRef(null);
|
|
57
15
|
const { cellProps, buttonProps, formattedDate, isSelected, isDisabled, isOutsideVisibleRange, isFocused } = useCalendarCell(props, state, ref);
|
|
58
16
|
const { focusProps } = useFocusRing();
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
if (rangeSelection.isSelecting && rangeSelection.start && hoverDate && !rangeSelection.end) {
|
|
122
|
-
const dateValue_0 = props.date;
|
|
123
|
-
const { start } = rangeSelection;
|
|
124
|
-
const end = hoverDate;
|
|
125
|
-
const earlierDate = start.compare(end) <= 0 ? start : end;
|
|
126
|
-
const laterDate = start.compare(end) <= 0 ? end : start;
|
|
127
|
-
const isAfterStart_0 = dateValue_0.compare(earlierDate) > 0;
|
|
128
|
-
const isBeforeEnd_0 = dateValue_0.compare(laterDate) < 0;
|
|
129
|
-
isHoverRange = isAfterStart_0 && isBeforeEnd_0;
|
|
130
|
-
}
|
|
131
|
-
} else {
|
|
132
|
-
let t5;
|
|
133
|
-
if ($[31] !== isSelected || $[32] !== props.date || $[33] !== state) {
|
|
134
|
-
t5 = isRange(state) && state.highlightedRange ? isSameDay(props.date, state.highlightedRange.start) : isSelected;
|
|
135
|
-
$[31] = isSelected;
|
|
136
|
-
$[32] = props.date;
|
|
137
|
-
$[33] = state;
|
|
138
|
-
$[34] = t5;
|
|
139
|
-
} else t5 = $[34];
|
|
140
|
-
isSelectionStart = t5;
|
|
141
|
-
let t6;
|
|
142
|
-
if ($[35] !== isSelected || $[36] !== props.date || $[37] !== state) {
|
|
143
|
-
t6 = isRange(state) && state.highlightedRange ? isSameDay(props.date, state.highlightedRange.end) : isSelected;
|
|
144
|
-
$[35] = isSelected;
|
|
145
|
-
$[36] = props.date;
|
|
146
|
-
$[37] = state;
|
|
147
|
-
$[38] = t6;
|
|
148
|
-
} else t6 = $[38];
|
|
149
|
-
isSelectionEnd = t6;
|
|
150
|
-
let t7;
|
|
151
|
-
if ($[39] !== isSelected || $[40] !== isSelectionEnd || $[41] !== isSelectionStart || $[42] !== state) {
|
|
152
|
-
t7 = isSelectionStart || isSelectionEnd || !isRange(state) && isSelected;
|
|
153
|
-
$[39] = isSelected;
|
|
154
|
-
$[40] = isSelectionEnd;
|
|
155
|
-
$[41] = isSelectionStart;
|
|
156
|
-
$[42] = state;
|
|
157
|
-
$[43] = t7;
|
|
158
|
-
} else t7 = $[43];
|
|
159
|
-
isSelectedCell = t7;
|
|
160
|
-
let t8;
|
|
161
|
-
if ($[44] !== isSelected || $[45] !== isSelectionEnd || $[46] !== isSelectionStart || $[47] !== state) {
|
|
162
|
-
t8 = isRange(state) && isSelected && !isSelectionStart && !isSelectionEnd;
|
|
163
|
-
$[44] = isSelected;
|
|
164
|
-
$[45] = isSelectionEnd;
|
|
165
|
-
$[46] = isSelectionStart;
|
|
166
|
-
$[47] = state;
|
|
167
|
-
$[48] = t8;
|
|
168
|
-
} else t8 = $[48];
|
|
169
|
-
isInRange = t8;
|
|
170
|
-
if (isRange(state) && state.highlightedRange && !isSelected) {
|
|
171
|
-
const dateValue_1 = props.date;
|
|
172
|
-
const isAfterStart_1 = dateValue_1.compare(state.highlightedRange.start) > 0;
|
|
173
|
-
const isBeforeEnd_1 = dateValue_1.compare(state.highlightedRange.end) < 0;
|
|
174
|
-
isHoverRange = isAfterStart_1 && isBeforeEnd_1;
|
|
17
|
+
const onClick = useCallback((event) => {
|
|
18
|
+
buttonProps.onClick?.(event);
|
|
19
|
+
if (onDateSelection) onDateSelection(props.date);
|
|
20
|
+
if (shouldCloseOnSelect && !isDisabled && (shouldApplyOnDateSelection || isSelected)) onApply?.(props.date);
|
|
21
|
+
}, [
|
|
22
|
+
buttonProps,
|
|
23
|
+
onDateSelection,
|
|
24
|
+
props.date,
|
|
25
|
+
isDisabled,
|
|
26
|
+
shouldApplyOnDateSelection,
|
|
27
|
+
isSelected,
|
|
28
|
+
shouldCloseOnSelect,
|
|
29
|
+
onApply
|
|
30
|
+
]);
|
|
31
|
+
const onDoubleClick = useCallback((event_0) => {
|
|
32
|
+
if (isDisabled) return;
|
|
33
|
+
event_0.preventDefault();
|
|
34
|
+
onDoubleClickApply?.(props.date);
|
|
35
|
+
}, [
|
|
36
|
+
isDisabled,
|
|
37
|
+
onDoubleClickApply,
|
|
38
|
+
props.date
|
|
39
|
+
]);
|
|
40
|
+
const selectionState = useMemo(() => {
|
|
41
|
+
let isSelectionStart = false;
|
|
42
|
+
let isSelectionEnd = false;
|
|
43
|
+
let isSelectedCell = false;
|
|
44
|
+
let isInRange = false;
|
|
45
|
+
let isHoverRange = false;
|
|
46
|
+
let isSelectingMode = false;
|
|
47
|
+
if (rangeSelection?.start) {
|
|
48
|
+
isSelectionStart = isSameDay(props.date, rangeSelection.start);
|
|
49
|
+
isSelectionEnd = rangeSelection.end ? isSameDay(props.date, rangeSelection.end) : false;
|
|
50
|
+
isSelectedCell = isSelectionStart || isSelectionEnd;
|
|
51
|
+
isSelectingMode = rangeSelection.isSelecting && !rangeSelection.end;
|
|
52
|
+
if (rangeSelection.start && rangeSelection.end) {
|
|
53
|
+
const dateValue = props.date;
|
|
54
|
+
const isAfterStart = dateValue.compare(rangeSelection.start) > 0;
|
|
55
|
+
const isBeforeEnd = dateValue.compare(rangeSelection.end) < 0;
|
|
56
|
+
isInRange = isAfterStart && isBeforeEnd;
|
|
57
|
+
}
|
|
58
|
+
if (rangeSelection.isSelecting && rangeSelection.start && hoverDate && !rangeSelection.end) {
|
|
59
|
+
const dateValue_0 = props.date;
|
|
60
|
+
const { start } = rangeSelection;
|
|
61
|
+
const end = hoverDate;
|
|
62
|
+
const earlierDate = start.compare(end) <= 0 ? start : end;
|
|
63
|
+
const laterDate = start.compare(end) <= 0 ? end : start;
|
|
64
|
+
const isAfterStart_0 = dateValue_0.compare(earlierDate) > 0;
|
|
65
|
+
const isBeforeEnd_0 = dateValue_0.compare(laterDate) < 0;
|
|
66
|
+
isHoverRange = isAfterStart_0 && isBeforeEnd_0;
|
|
67
|
+
}
|
|
68
|
+
} else {
|
|
69
|
+
isSelectionStart = isRange(state) && state.highlightedRange ? isSameDay(props.date, state.highlightedRange.start) : isSelected;
|
|
70
|
+
isSelectionEnd = isRange(state) && state.highlightedRange ? isSameDay(props.date, state.highlightedRange.end) : isSelected;
|
|
71
|
+
isSelectedCell = isSelectionStart || isSelectionEnd || !isRange(state) && isSelected;
|
|
72
|
+
isInRange = isRange(state) && isSelected && !isSelectionStart && !isSelectionEnd;
|
|
73
|
+
if (isRange(state) && state.highlightedRange && !isSelected) {
|
|
74
|
+
const dateValue_1 = props.date;
|
|
75
|
+
const isAfterStart_1 = dateValue_1.compare(state.highlightedRange.start) > 0;
|
|
76
|
+
const isBeforeEnd_1 = dateValue_1.compare(state.highlightedRange.end) < 0;
|
|
77
|
+
isHoverRange = isAfterStart_1 && isBeforeEnd_1;
|
|
78
|
+
}
|
|
175
79
|
}
|
|
176
|
-
|
|
177
|
-
let t5;
|
|
178
|
-
if ($[49] !== isHoverRange || $[50] !== isInRange || $[51] !== isSelectedCell || $[52] !== isSelectingMode || $[53] !== isSelectionEnd || $[54] !== isSelectionStart) {
|
|
179
|
-
t5 = {
|
|
80
|
+
return {
|
|
180
81
|
isSelectionStart,
|
|
181
82
|
isSelectionEnd,
|
|
182
83
|
isSelectedCell,
|
|
@@ -184,156 +85,61 @@ var CalendarCell = (t0) => {
|
|
|
184
85
|
isHoverRange,
|
|
185
86
|
isSelectingMode
|
|
186
87
|
};
|
|
187
|
-
|
|
188
|
-
|
|
189
|
-
|
|
190
|
-
|
|
191
|
-
|
|
192
|
-
|
|
193
|
-
|
|
194
|
-
|
|
195
|
-
|
|
196
|
-
|
|
197
|
-
|
|
198
|
-
|
|
199
|
-
|
|
200
|
-
|
|
201
|
-
|
|
202
|
-
|
|
203
|
-
|
|
204
|
-
|
|
205
|
-
|
|
206
|
-
|
|
207
|
-
|
|
208
|
-
|
|
209
|
-
|
|
210
|
-
|
|
211
|
-
|
|
212
|
-
|
|
213
|
-
|
|
214
|
-
|
|
215
|
-
|
|
216
|
-
|
|
217
|
-
|
|
218
|
-
|
|
219
|
-
|
|
220
|
-
|
|
221
|
-
|
|
222
|
-
|
|
223
|
-
|
|
224
|
-
|
|
225
|
-
const onMouseEnter = t7;
|
|
226
|
-
let t8;
|
|
227
|
-
if ($[67] !== onDateHover || $[68] !== selectionState.isSelectingMode) {
|
|
228
|
-
t8 = () => {
|
|
229
|
-
if (onDateHover && selectionState.isSelectingMode) onDateHover(null);
|
|
230
|
-
};
|
|
231
|
-
$[67] = onDateHover;
|
|
232
|
-
$[68] = selectionState.isSelectingMode;
|
|
233
|
-
$[69] = t8;
|
|
234
|
-
} else t8 = $[69];
|
|
235
|
-
const onMouseLeave = t8;
|
|
236
|
-
const { isSelectedCell: isSelectedCell_0, isInRange: isInRange_0, isHoverRange: isHoverRange_0, isSelectingMode: isSelectingMode_0, isSelectionStart: isSelectionStart_0, isSelectionEnd: isSelectionEnd_0 } = selectionState;
|
|
237
|
-
const t9 = !isSelectedCell_0 && !isOutsideVisibleRange && "bg-elevation-fill-default-1 text-interactive-text-secondary-idle";
|
|
238
|
-
const t10 = !isSelectedCell_0 && isOutsideVisibleRange && "bg-elevation-fill-default-1 text-interactive-text-secondary-disabled";
|
|
239
|
-
const t11 = isSelectedCell_0 && !isOutsideVisibleRange && "bg-interactive-contained-primary-idle text-interactive-contained-primary-on-idle";
|
|
240
|
-
const t12 = isSelectedCell_0 && !isOutsideVisibleRange && rangeSelection && !rangeSelection.isSelecting && isSelectionStart_0 && !isSelectionEnd_0 && "rounded-r-none";
|
|
241
|
-
const t13 = isSelectedCell_0 && !isOutsideVisibleRange && rangeSelection && !rangeSelection.isSelecting && isSelectionEnd_0 && !isSelectionStart_0 && "rounded-l-none";
|
|
242
|
-
const t14 = isDisabled && !isOutsideVisibleRange && "cursor-default";
|
|
243
|
-
const t15 = isDisabled && "opacity-20";
|
|
244
|
-
const t16 = !isSelectedCell_0 && !isInRange_0 && !isHoverRange_0 && !isSelectingMode_0 && !isDisabled && !isOutsideVisibleRange && "[@media(pointer:fine)]:hover:border-elevation-outline-default-1 [@media(pointer:fine)]:hover:text-interactive-text-secondary-hover";
|
|
245
|
-
const t17 = isInRange_0 && !isOutsideVisibleRange && "!rounded-none !bg-elevation-fill-default-2 text-interactive-text-secondary-hover";
|
|
246
|
-
const t18 = isHoverRange_0 && !isOutsideVisibleRange && "!rounded-none !bg-elevation-fill-default-2 text-interactive-text-secondary-hover";
|
|
247
|
-
const t19 = !isInRange_0 && !isSelectedCell_0 && isSelectingMode_0 && "hover:bg-interactive-contained-primary-idle hover:text-interactive-text-primary-idle-inverted";
|
|
248
|
-
const t20 = isSelectingMode_0 && !isSelectedCell_0 && !isInRange_0 && !isHoverRange_0 && !isDisabled && !isOutsideVisibleRange && "transition-all duration-75 hover:border-elevation-outline-default-1";
|
|
249
|
-
const t21 = isFocused && !isSelectedCell_0 && !isDisabled && !isOutsideVisibleRange && "ring-2 ring-inset ring-interactive-contained-primary-focus";
|
|
250
|
-
let t22;
|
|
251
|
-
if ($[70] !== t10 || $[71] !== t11 || $[72] !== t12 || $[73] !== t13 || $[74] !== t14 || $[75] !== t15 || $[76] !== t16 || $[77] !== t17 || $[78] !== t18 || $[79] !== t19 || $[80] !== t20 || $[81] !== t21 || $[82] !== t9) {
|
|
252
|
-
t22 = clsx("mx-auto flex h-10 w-full max-w-10 items-center justify-center rounded-button-rounding-m p-2", "focus:outline-none focus-visible:outline-1 focus-visible:outline-interactive-contained-primary-focus focus-visible:outline-offset-1", "border border-transparent border-solid", t9, t10, t11, t12, t13, t14, t15, t16, t17, t18, t19, t20, t21);
|
|
253
|
-
$[70] = t10;
|
|
254
|
-
$[71] = t11;
|
|
255
|
-
$[72] = t12;
|
|
256
|
-
$[73] = t13;
|
|
257
|
-
$[74] = t14;
|
|
258
|
-
$[75] = t15;
|
|
259
|
-
$[76] = t16;
|
|
260
|
-
$[77] = t17;
|
|
261
|
-
$[78] = t18;
|
|
262
|
-
$[79] = t19;
|
|
263
|
-
$[80] = t20;
|
|
264
|
-
$[81] = t21;
|
|
265
|
-
$[82] = t9;
|
|
266
|
-
$[83] = t22;
|
|
267
|
-
} else t22 = $[83];
|
|
268
|
-
const cellClassName = t22;
|
|
269
|
-
let t23;
|
|
270
|
-
if ($[84] !== buttonProps || $[85] !== focusProps) {
|
|
271
|
-
t23 = mergeProps(buttonProps, focusProps);
|
|
272
|
-
$[84] = buttonProps;
|
|
273
|
-
$[85] = focusProps;
|
|
274
|
-
$[86] = t23;
|
|
275
|
-
} else t23 = $[86];
|
|
276
|
-
let t24;
|
|
277
|
-
if ($[87] !== handleEvent || $[88] !== onClick) {
|
|
278
|
-
t24 = (e) => handleEvent(e, onClick);
|
|
279
|
-
$[87] = handleEvent;
|
|
280
|
-
$[88] = onClick;
|
|
281
|
-
$[89] = t24;
|
|
282
|
-
} else t24 = $[89];
|
|
283
|
-
let t25;
|
|
284
|
-
if ($[90] !== handleEvent || $[91] !== onKeyboardNavigation || $[92] !== props.date) {
|
|
285
|
-
t25 = (e_0) => handleEvent(e_0, () => onKeyboardNavigation?.(e_0, props.date));
|
|
286
|
-
$[90] = handleEvent;
|
|
287
|
-
$[91] = onKeyboardNavigation;
|
|
288
|
-
$[92] = props.date;
|
|
289
|
-
$[93] = t25;
|
|
290
|
-
} else t25 = $[93];
|
|
291
|
-
let t26;
|
|
292
|
-
if ($[94] !== formattedDate) {
|
|
293
|
-
t26 = /* @__PURE__ */ jsx(Typography, {
|
|
294
|
-
as: "span",
|
|
295
|
-
size: "label-2",
|
|
296
|
-
className: "block w-6 overflow-hidden text-ellipsis text-center",
|
|
297
|
-
children: formattedDate
|
|
298
|
-
});
|
|
299
|
-
$[94] = formattedDate;
|
|
300
|
-
$[95] = t26;
|
|
301
|
-
} else t26 = $[95];
|
|
302
|
-
let t27;
|
|
303
|
-
if ($[96] !== cellClassName || $[97] !== onDoubleClick || $[98] !== onMouseEnter || $[99] !== onMouseLeave || $[100] !== t23 || $[101] !== t24 || $[102] !== t25 || $[103] !== t26) {
|
|
304
|
-
t27 = /* @__PURE__ */ jsx("div", {
|
|
88
|
+
}, [
|
|
89
|
+
props.date,
|
|
90
|
+
rangeSelection,
|
|
91
|
+
state,
|
|
92
|
+
isSelected,
|
|
93
|
+
hoverDate
|
|
94
|
+
]);
|
|
95
|
+
const handleEvent = (event_1, eventHandler) => {
|
|
96
|
+
if (isOutsideVisibleRange) {
|
|
97
|
+
state.selectDate(props.date);
|
|
98
|
+
state.setFocusedDate(props.date);
|
|
99
|
+
}
|
|
100
|
+
eventHandler?.(event_1);
|
|
101
|
+
if (isSelected && shouldCloseOnSelect) onApply?.(props.date);
|
|
102
|
+
};
|
|
103
|
+
const onMouseEnter = useCallback(() => {
|
|
104
|
+
if (onDateHover && selectionState.isSelectingMode) onDateHover(props.date);
|
|
105
|
+
}, [
|
|
106
|
+
onDateHover,
|
|
107
|
+
selectionState.isSelectingMode,
|
|
108
|
+
props.date
|
|
109
|
+
]);
|
|
110
|
+
const onMouseLeave = useCallback(() => {
|
|
111
|
+
if (onDateHover && selectionState.isSelectingMode) onDateHover(null);
|
|
112
|
+
}, [onDateHover, selectionState.isSelectingMode]);
|
|
113
|
+
const cellClassName = useMemo(() => {
|
|
114
|
+
const { isSelectedCell: isSelectedCell_0, isInRange: isInRange_0, isHoverRange: isHoverRange_0, isSelectingMode: isSelectingMode_0, isSelectionStart: isSelectionStart_0, isSelectionEnd: isSelectionEnd_0 } = selectionState;
|
|
115
|
+
return clsx("mx-auto flex h-10 w-full max-w-10 items-center justify-center rounded-button-rounding-m p-2", "focus:outline-none focus-visible:outline-1 focus-visible:outline-interactive-contained-primary-focus focus-visible:outline-offset-1", "border border-transparent border-solid", !isSelectedCell_0 && !isOutsideVisibleRange && "bg-elevation-fill-default-1 text-interactive-text-secondary-idle", !isSelectedCell_0 && isOutsideVisibleRange && "bg-elevation-fill-default-1 text-interactive-text-secondary-disabled", isSelectedCell_0 && !isOutsideVisibleRange && "bg-interactive-contained-primary-idle text-interactive-contained-primary-on-idle", isSelectedCell_0 && !isOutsideVisibleRange && rangeSelection && !rangeSelection.isSelecting && isSelectionStart_0 && !isSelectionEnd_0 && "rounded-r-none", isSelectedCell_0 && !isOutsideVisibleRange && rangeSelection && !rangeSelection.isSelecting && isSelectionEnd_0 && !isSelectionStart_0 && "rounded-l-none", isDisabled && !isOutsideVisibleRange && "cursor-default", isDisabled && "opacity-20", !isSelectedCell_0 && !isInRange_0 && !isHoverRange_0 && !isSelectingMode_0 && !isDisabled && !isOutsideVisibleRange && "[@media(pointer:fine)]:hover:border-elevation-outline-default-1 [@media(pointer:fine)]:hover:text-interactive-text-secondary-hover", isInRange_0 && !isOutsideVisibleRange && "!rounded-none !bg-elevation-fill-default-2 text-interactive-text-secondary-hover", isHoverRange_0 && !isOutsideVisibleRange && "!rounded-none !bg-elevation-fill-default-2 text-interactive-text-secondary-hover", !isInRange_0 && !isSelectedCell_0 && isSelectingMode_0 && "hover:bg-interactive-contained-primary-idle hover:text-interactive-text-primary-idle-inverted", isSelectingMode_0 && !isSelectedCell_0 && !isInRange_0 && !isHoverRange_0 && !isDisabled && !isOutsideVisibleRange && "transition-all duration-75 hover:border-elevation-outline-default-1", isFocused && !isSelectedCell_0 && !isDisabled && !isOutsideVisibleRange && "ring-2 ring-inset ring-interactive-contained-primary-focus");
|
|
116
|
+
}, [
|
|
117
|
+
selectionState,
|
|
118
|
+
isOutsideVisibleRange,
|
|
119
|
+
rangeSelection,
|
|
120
|
+
isDisabled,
|
|
121
|
+
isFocused
|
|
122
|
+
]);
|
|
123
|
+
return /* @__PURE__ */ jsx("td", {
|
|
124
|
+
...cellProps,
|
|
125
|
+
children: /* @__PURE__ */ jsx("div", {
|
|
305
126
|
ref,
|
|
306
|
-
...
|
|
127
|
+
...mergeProps(buttonProps, focusProps),
|
|
307
128
|
"aria-disabled": void 0,
|
|
308
129
|
onMouseEnter,
|
|
309
130
|
onMouseLeave,
|
|
310
131
|
className: cellClassName,
|
|
311
|
-
onClick:
|
|
132
|
+
onClick: (e) => handleEvent(e, onClick),
|
|
312
133
|
onDoubleClick,
|
|
313
|
-
onKeyDown:
|
|
314
|
-
children:
|
|
315
|
-
|
|
316
|
-
|
|
317
|
-
|
|
318
|
-
|
|
319
|
-
|
|
320
|
-
|
|
321
|
-
|
|
322
|
-
$[102] = t25;
|
|
323
|
-
$[103] = t26;
|
|
324
|
-
$[104] = t27;
|
|
325
|
-
} else t27 = $[104];
|
|
326
|
-
let t28;
|
|
327
|
-
if ($[105] !== cellProps || $[106] !== t27) {
|
|
328
|
-
t28 = /* @__PURE__ */ jsx("td", {
|
|
329
|
-
...cellProps,
|
|
330
|
-
children: t27
|
|
331
|
-
});
|
|
332
|
-
$[105] = cellProps;
|
|
333
|
-
$[106] = t27;
|
|
334
|
-
$[107] = t28;
|
|
335
|
-
} else t28 = $[107];
|
|
336
|
-
return t28;
|
|
134
|
+
onKeyDown: (e_0) => handleEvent(e_0, () => onKeyboardNavigation?.(e_0, props.date)),
|
|
135
|
+
children: /* @__PURE__ */ jsx(Typography, {
|
|
136
|
+
as: "span",
|
|
137
|
+
size: "label-2",
|
|
138
|
+
className: "block w-6 overflow-hidden text-ellipsis text-center",
|
|
139
|
+
children: formattedDate
|
|
140
|
+
})
|
|
141
|
+
})
|
|
142
|
+
});
|
|
337
143
|
};
|
|
338
144
|
//#endregion
|
|
339
145
|
export { CalendarCell };
|
|
@@ -1,6 +1,5 @@
|
|
|
1
1
|
import { Typography } from "../../../text/Typography/Typography.js";
|
|
2
2
|
import { CalendarCell } from "./CalendarCell.js";
|
|
3
|
-
import { c } from "react/compiler-runtime";
|
|
4
3
|
import { jsx, jsxs } from "react/jsx-runtime";
|
|
5
4
|
import { clsx } from "clsx";
|
|
6
5
|
import { useCalendarGrid } from "@react-aria/calendar";
|
|
@@ -13,157 +12,43 @@ var WEEK_INDICES = [
|
|
|
13
12
|
4,
|
|
14
13
|
5
|
|
15
14
|
];
|
|
16
|
-
var CalendarGrid = (
|
|
17
|
-
const
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
let onApply;
|
|
22
|
-
let onDateHover;
|
|
23
|
-
let onDateSelection;
|
|
24
|
-
let onDoubleClickApply;
|
|
25
|
-
let onKeyboardNavigation;
|
|
26
|
-
let props;
|
|
27
|
-
let rangeSelection;
|
|
28
|
-
let shouldApplyOnDateSelection;
|
|
29
|
-
let shouldCloseOnSelect;
|
|
30
|
-
let state;
|
|
31
|
-
let t1;
|
|
32
|
-
if ($[0] !== t0) {
|
|
33
|
-
({state, onApply, onDoubleClickApply, shouldApplyOnDateSelection, shouldCloseOnSelect, offset: t1, onDateSelection, onDateHover, rangeSelection, hoverDate, onKeyboardNavigation, className, calendarSide, ...props} = t0);
|
|
34
|
-
$[0] = t0;
|
|
35
|
-
$[1] = calendarSide;
|
|
36
|
-
$[2] = className;
|
|
37
|
-
$[3] = hoverDate;
|
|
38
|
-
$[4] = onApply;
|
|
39
|
-
$[5] = onDateHover;
|
|
40
|
-
$[6] = onDateSelection;
|
|
41
|
-
$[7] = onDoubleClickApply;
|
|
42
|
-
$[8] = onKeyboardNavigation;
|
|
43
|
-
$[9] = props;
|
|
44
|
-
$[10] = rangeSelection;
|
|
45
|
-
$[11] = shouldApplyOnDateSelection;
|
|
46
|
-
$[12] = shouldCloseOnSelect;
|
|
47
|
-
$[13] = state;
|
|
48
|
-
$[14] = t1;
|
|
49
|
-
} else {
|
|
50
|
-
calendarSide = $[1];
|
|
51
|
-
className = $[2];
|
|
52
|
-
hoverDate = $[3];
|
|
53
|
-
onApply = $[4];
|
|
54
|
-
onDateHover = $[5];
|
|
55
|
-
onDateSelection = $[6];
|
|
56
|
-
onDoubleClickApply = $[7];
|
|
57
|
-
onKeyboardNavigation = $[8];
|
|
58
|
-
props = $[9];
|
|
59
|
-
rangeSelection = $[10];
|
|
60
|
-
shouldApplyOnDateSelection = $[11];
|
|
61
|
-
shouldCloseOnSelect = $[12];
|
|
62
|
-
state = $[13];
|
|
63
|
-
t1 = $[14];
|
|
64
|
-
}
|
|
65
|
-
const offset = t1 === void 0 ? {} : t1;
|
|
66
|
-
let t2;
|
|
67
|
-
if ($[15] !== props) {
|
|
68
|
-
t2 = {
|
|
69
|
-
...props,
|
|
70
|
-
weekdayStyle: "short"
|
|
71
|
-
};
|
|
72
|
-
$[15] = props;
|
|
73
|
-
$[16] = t2;
|
|
74
|
-
} else t2 = $[16];
|
|
75
|
-
const { gridProps, headerProps, weekDays } = useCalendarGrid(t2, state);
|
|
15
|
+
var CalendarGrid = ({ state, onApply, onDoubleClickApply, shouldApplyOnDateSelection, shouldCloseOnSelect, offset = {}, onDateSelection, onDateHover, rangeSelection, hoverDate, onKeyboardNavigation, className, calendarSide, ...props }) => {
|
|
16
|
+
const { gridProps, headerProps, weekDays } = useCalendarGrid({
|
|
17
|
+
...props,
|
|
18
|
+
weekdayStyle: "short"
|
|
19
|
+
}, state);
|
|
76
20
|
const startDate = state.visibleRange.start.add(offset);
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
$[18] = onDateSelection;
|
|
84
|
-
$[19] = t3;
|
|
85
|
-
} else t3 = $[19];
|
|
86
|
-
const handleDateSelection = t3;
|
|
87
|
-
let t4;
|
|
88
|
-
if ($[20] !== className) {
|
|
89
|
-
t4 = clsx("h-72 w-full px-3 py-1 md:w-80", className);
|
|
90
|
-
$[20] = className;
|
|
91
|
-
$[21] = t4;
|
|
92
|
-
} else t4 = $[21];
|
|
93
|
-
const t5 = "0";
|
|
94
|
-
const t6 = "w-full";
|
|
95
|
-
let t7;
|
|
96
|
-
if ($[22] !== weekDays) {
|
|
97
|
-
t7 = weekDays.map(_temp);
|
|
98
|
-
$[22] = weekDays;
|
|
99
|
-
$[23] = t7;
|
|
100
|
-
} else t7 = $[23];
|
|
101
|
-
let t8;
|
|
102
|
-
if ($[24] !== t7) {
|
|
103
|
-
t8 = /* @__PURE__ */ jsx("tr", { children: t7 });
|
|
104
|
-
$[24] = t7;
|
|
105
|
-
$[25] = t8;
|
|
106
|
-
} else t8 = $[25];
|
|
107
|
-
let t9;
|
|
108
|
-
if ($[26] !== headerProps || $[27] !== t8) {
|
|
109
|
-
t9 = /* @__PURE__ */ jsx("thead", {
|
|
110
|
-
...headerProps,
|
|
111
|
-
children: t8
|
|
112
|
-
});
|
|
113
|
-
$[26] = headerProps;
|
|
114
|
-
$[27] = t8;
|
|
115
|
-
$[28] = t9;
|
|
116
|
-
} else t9 = $[28];
|
|
117
|
-
const t10 = WEEK_INDICES.map((weekIndex) => /* @__PURE__ */ jsx("tr", { children: state.getDatesInWeek(weekIndex, startDate).map((date_0, i) => date_0 ? /* @__PURE__ */ jsx(CalendarCell, {
|
|
118
|
-
state,
|
|
119
|
-
date: date_0,
|
|
120
|
-
onApply,
|
|
121
|
-
onDoubleClickApply,
|
|
122
|
-
shouldApplyOnDateSelection,
|
|
123
|
-
shouldCloseOnSelect,
|
|
124
|
-
onDateSelection: handleDateSelection,
|
|
125
|
-
onDateHover,
|
|
126
|
-
rangeSelection,
|
|
127
|
-
hoverDate,
|
|
128
|
-
onKeyboardNavigation
|
|
129
|
-
}, i) : /* @__PURE__ */ jsx("td", {}, i)) }, weekIndex));
|
|
130
|
-
let t11;
|
|
131
|
-
if ($[29] !== t10) {
|
|
132
|
-
t11 = /* @__PURE__ */ jsx("tbody", { children: t10 });
|
|
133
|
-
$[29] = t10;
|
|
134
|
-
$[30] = t11;
|
|
135
|
-
} else t11 = $[30];
|
|
136
|
-
let t12;
|
|
137
|
-
if ($[31] !== gridProps || $[32] !== t11 || $[33] !== t9) {
|
|
138
|
-
t12 = /* @__PURE__ */ jsxs("table", {
|
|
21
|
+
const handleDateSelection = (date) => {
|
|
22
|
+
onDateSelection?.(date, calendarSide);
|
|
23
|
+
};
|
|
24
|
+
return /* @__PURE__ */ jsx("div", {
|
|
25
|
+
className: clsx("h-72 w-full px-3 py-1 md:w-80", className),
|
|
26
|
+
children: /* @__PURE__ */ jsxs("table", {
|
|
139
27
|
...gridProps,
|
|
140
|
-
cellPadding:
|
|
141
|
-
className:
|
|
142
|
-
children: [
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
|
|
157
|
-
|
|
158
|
-
|
|
159
|
-
|
|
28
|
+
cellPadding: "0",
|
|
29
|
+
className: "w-full",
|
|
30
|
+
children: [/* @__PURE__ */ jsx("thead", {
|
|
31
|
+
...headerProps,
|
|
32
|
+
children: /* @__PURE__ */ jsx("tr", { children: weekDays.map((day) => /* @__PURE__ */ jsx("th", { children: /* @__PURE__ */ jsx(Typography, {
|
|
33
|
+
size: "label-2",
|
|
34
|
+
className: "bg-elevation-fill-default-1 py-2 text-interactive-text-secondary-idle",
|
|
35
|
+
children: day.substring(0, 2)
|
|
36
|
+
}) }, day)) })
|
|
37
|
+
}), /* @__PURE__ */ jsx("tbody", { children: WEEK_INDICES.map((weekIndex) => /* @__PURE__ */ jsx("tr", { children: state.getDatesInWeek(weekIndex, startDate).map((date_0, i) => date_0 ? /* @__PURE__ */ jsx(CalendarCell, {
|
|
38
|
+
state,
|
|
39
|
+
date: date_0,
|
|
40
|
+
onApply,
|
|
41
|
+
onDoubleClickApply,
|
|
42
|
+
shouldApplyOnDateSelection,
|
|
43
|
+
shouldCloseOnSelect,
|
|
44
|
+
onDateSelection: handleDateSelection,
|
|
45
|
+
onDateHover,
|
|
46
|
+
rangeSelection,
|
|
47
|
+
hoverDate,
|
|
48
|
+
onKeyboardNavigation
|
|
49
|
+
}, i) : /* @__PURE__ */ jsx("td", {}, i)) }, weekIndex)) })]
|
|
50
|
+
})
|
|
51
|
+
});
|
|
160
52
|
};
|
|
161
|
-
function _temp(day) {
|
|
162
|
-
return /* @__PURE__ */ jsx("th", { children: /* @__PURE__ */ jsx(Typography, {
|
|
163
|
-
size: "label-2",
|
|
164
|
-
className: "bg-elevation-fill-default-1 py-2 text-interactive-text-secondary-idle",
|
|
165
|
-
children: day.substring(0, 2)
|
|
166
|
-
}) }, day);
|
|
167
|
-
}
|
|
168
53
|
//#endregion
|
|
169
54
|
export { CalendarGrid };
|