@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.
Files changed (63) hide show
  1. package/README.md +15 -1
  2. package/dist/components/Breadcrumbs/Breadcrumbs.js +55 -206
  3. package/dist/components/buttons/InlineIconButton/InlineIconButton.js +9 -34
  4. package/dist/components/buttons/shared/ButtonContent.js +22 -80
  5. package/dist/components/inputs/Checkbox/CheckboxCheckmark.js +10 -24
  6. package/dist/components/inputs/DateTime/DatePicker/DatePicker.js +93 -227
  7. package/dist/components/inputs/DateTime/DateRangePicker/DateRangePicker.js +84 -202
  8. package/dist/components/inputs/DateTime/DateTimePicker/DateTimePicker.js +60 -132
  9. package/dist/components/inputs/DateTime/shared/Calendar.js +139 -339
  10. package/dist/components/inputs/DateTime/shared/CalendarCell.js +114 -308
  11. package/dist/components/inputs/DateTime/shared/CalendarGrid.js +35 -150
  12. package/dist/components/inputs/DateTime/shared/CalendarHeader.js +95 -229
  13. package/dist/components/inputs/DateTime/shared/CalendarSelectHeader.js +115 -296
  14. package/dist/components/inputs/DateTime/shared/DateField.js +135 -306
  15. package/dist/components/inputs/DateTime/shared/DatePickerInput.js +140 -338
  16. package/dist/components/inputs/DateTime/shared/DateTimeDialogFooter.js +10 -59
  17. package/dist/components/inputs/File/FileUpload.js +1 -1
  18. package/dist/components/inputs/File/InputUpload.js +65 -261
  19. package/dist/components/inputs/File/shared/FileUploadContentEmpty.js +48 -180
  20. package/dist/components/inputs/File/shared/FileUploadContentError.js +95 -265
  21. package/dist/components/inputs/File/shared/FileUploadContentFilled.js +99 -261
  22. package/dist/components/inputs/File/shared/FileUploadContentLoading.js +56 -234
  23. package/dist/components/inputs/File/shared/ProgressBar.js +15 -102
  24. package/dist/components/inputs/FormField/FormField.js +34 -47
  25. package/dist/components/inputs/Input/NumberRangeInput/NumberRangeInput.js +75 -313
  26. package/dist/components/inputs/Selection/Autocomplete/Autocomplete.js +23 -83
  27. package/dist/components/inputs/Selection/Select/QuerySelect.js +30 -96
  28. package/dist/components/inputs/Selection/Select/Select.js +3 -3
  29. package/dist/components/inputs/Selection/shared/SelectInput.js +1 -0
  30. package/dist/components/inputs/Selection/shared/SelectListBox.js +51 -163
  31. package/dist/components/inputs/Selection/shared/useSelectItems.js +48 -108
  32. package/dist/components/inputs/Skeleton/InputFrame.js +177 -552
  33. package/dist/components/inputs/TextEditor/TextEditor.js +87 -389
  34. package/dist/components/inputs/shared/InputClear.js +24 -40
  35. package/dist/components/navigation/Accordion/Accordion.js +22 -69
  36. package/dist/components/navigation/Accordion/AccordionItem.js +41 -86
  37. package/dist/components/navigation/Stepper/Stepper.js +22 -67
  38. package/dist/components/overlays/ActionModal/ActionModal.js +35 -169
  39. package/dist/components/overlays/ResponsivePopover/ResponsivePopover.js +29 -110
  40. package/dist/components/shared/pagination/Pagination.js +22 -108
  41. package/dist/components/status/Alert/Alert.js +30 -97
  42. package/dist/components/table/InfiniteTable.js +16 -67
  43. package/dist/components/table/Table.d.ts +2 -8
  44. package/dist/components/table/Table.js +33 -55
  45. package/dist/components/text/Typography/Typography.js +8 -23
  46. package/dist/config/confirmation.context.js +1 -1
  47. package/dist/config/theme.context.js +45 -98
  48. package/dist/config/uiConfig.context.js +8 -39
  49. package/dist/config/uiOverrides.context.d.ts +0 -1
  50. package/dist/hooks/useDebounceCallback.js +17 -51
  51. package/dist/hooks/useFormAutosave.js +33 -120
  52. package/dist/hooks/useLongPressRepeat.js +20 -55
  53. package/dist/index.d.ts +0 -1
  54. package/dist/index.js +1 -2
  55. package/package.json +2 -2
  56. package/dist/components/inputs/FormField/formField.cva.d.ts +0 -11
  57. package/dist/components/inputs/FormField/formField.cva.js +0 -16
  58. package/dist/components/table/TableColumnFilterInput.d.ts +0 -9
  59. package/dist/components/table/TableColumnFilterInput.js +0 -108
  60. package/dist/components/table/TableColumnFilterPlaceholder.d.ts +0 -5
  61. package/dist/components/table/TableColumnFilterPlaceholder.js +0 -41
  62. package/dist/components/table/TableColumnFilterRow.d.ts +0 -16
  63. 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 = (t0) => {
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
- let t3;
60
- if ($[12] !== buttonProps || $[13] !== isDisabled || $[14] !== isSelected || $[15] !== onApply || $[16] !== onDateSelection || $[17] !== props.date || $[18] !== shouldApplyOnDateSelection || $[19] !== shouldCloseOnSelect) {
61
- t3 = (event) => {
62
- buttonProps.onClick?.(event);
63
- if (onDateSelection) onDateSelection(props.date);
64
- if (shouldCloseOnSelect && !isDisabled && (shouldApplyOnDateSelection || isSelected)) onApply?.(props.date);
65
- };
66
- $[12] = buttonProps;
67
- $[13] = isDisabled;
68
- $[14] = isSelected;
69
- $[15] = onApply;
70
- $[16] = onDateSelection;
71
- $[17] = props.date;
72
- $[18] = shouldApplyOnDateSelection;
73
- $[19] = shouldCloseOnSelect;
74
- $[20] = t3;
75
- } else t3 = $[20];
76
- const onClick = t3;
77
- let t4;
78
- if ($[21] !== isDisabled || $[22] !== onDoubleClickApply || $[23] !== props.date) {
79
- t4 = (event_0) => {
80
- if (isDisabled) return;
81
- event_0.preventDefault();
82
- onDoubleClickApply?.(props.date);
83
- };
84
- $[21] = isDisabled;
85
- $[22] = onDoubleClickApply;
86
- $[23] = props.date;
87
- $[24] = t4;
88
- } else t4 = $[24];
89
- const onDoubleClick = t4;
90
- let isSelectionStart;
91
- let isSelectionEnd;
92
- let isSelectedCell;
93
- let isInRange = false;
94
- let isHoverRange = false;
95
- let isSelectingMode = false;
96
- if (rangeSelection?.start) {
97
- let t5;
98
- if ($[25] !== props.date || $[26] !== rangeSelection.start) {
99
- t5 = isSameDay(props.date, rangeSelection.start);
100
- $[25] = props.date;
101
- $[26] = rangeSelection.start;
102
- $[27] = t5;
103
- } else t5 = $[27];
104
- isSelectionStart = t5;
105
- let t6;
106
- if ($[28] !== props.date || $[29] !== rangeSelection.end) {
107
- t6 = rangeSelection.end ? isSameDay(props.date, rangeSelection.end) : false;
108
- $[28] = props.date;
109
- $[29] = rangeSelection.end;
110
- $[30] = t6;
111
- } else t6 = $[30];
112
- isSelectionEnd = t6;
113
- isSelectedCell = isSelectionStart || isSelectionEnd;
114
- isSelectingMode = rangeSelection.isSelecting && !rangeSelection.end;
115
- if (rangeSelection.start && rangeSelection.end) {
116
- const dateValue = props.date;
117
- const isAfterStart = dateValue.compare(rangeSelection.start) > 0;
118
- const isBeforeEnd = dateValue.compare(rangeSelection.end) < 0;
119
- isInRange = isAfterStart && isBeforeEnd;
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
- $[49] = isHoverRange;
188
- $[50] = isInRange;
189
- $[51] = isSelectedCell;
190
- $[52] = isSelectingMode;
191
- $[53] = isSelectionEnd;
192
- $[54] = isSelectionStart;
193
- $[55] = t5;
194
- } else t5 = $[55];
195
- const selectionState = t5;
196
- let t6;
197
- if ($[56] !== isOutsideVisibleRange || $[57] !== isSelected || $[58] !== onApply || $[59] !== props.date || $[60] !== shouldCloseOnSelect || $[61] !== state) {
198
- t6 = (event_1, eventHandler) => {
199
- if (isOutsideVisibleRange) {
200
- state.selectDate(props.date);
201
- state.setFocusedDate(props.date);
202
- }
203
- eventHandler?.(event_1);
204
- if (isSelected && shouldCloseOnSelect) onApply?.(props.date);
205
- };
206
- $[56] = isOutsideVisibleRange;
207
- $[57] = isSelected;
208
- $[58] = onApply;
209
- $[59] = props.date;
210
- $[60] = shouldCloseOnSelect;
211
- $[61] = state;
212
- $[62] = t6;
213
- } else t6 = $[62];
214
- const handleEvent = t6;
215
- let t7;
216
- if ($[63] !== onDateHover || $[64] !== props.date || $[65] !== selectionState.isSelectingMode) {
217
- t7 = () => {
218
- if (onDateHover && selectionState.isSelectingMode) onDateHover(props.date);
219
- };
220
- $[63] = onDateHover;
221
- $[64] = props.date;
222
- $[65] = selectionState.isSelectingMode;
223
- $[66] = t7;
224
- } else t7 = $[66];
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
- ...t23,
127
+ ...mergeProps(buttonProps, focusProps),
307
128
  "aria-disabled": void 0,
308
129
  onMouseEnter,
309
130
  onMouseLeave,
310
131
  className: cellClassName,
311
- onClick: t24,
132
+ onClick: (e) => handleEvent(e, onClick),
312
133
  onDoubleClick,
313
- onKeyDown: t25,
314
- children: t26
315
- });
316
- $[96] = cellClassName;
317
- $[97] = onDoubleClick;
318
- $[98] = onMouseEnter;
319
- $[99] = onMouseLeave;
320
- $[100] = t23;
321
- $[101] = t24;
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 = (t0) => {
17
- const $ = c(38);
18
- let calendarSide;
19
- let className;
20
- let hoverDate;
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
- let t3;
78
- if ($[17] !== calendarSide || $[18] !== onDateSelection) {
79
- t3 = (date) => {
80
- onDateSelection?.(date, calendarSide);
81
- };
82
- $[17] = calendarSide;
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: t5,
141
- className: t6,
142
- children: [t9, t11]
143
- });
144
- $[31] = gridProps;
145
- $[32] = t11;
146
- $[33] = t9;
147
- $[34] = t12;
148
- } else t12 = $[34];
149
- let t13;
150
- if ($[35] !== t12 || $[36] !== t4) {
151
- t13 = /* @__PURE__ */ jsx("div", {
152
- className: t4,
153
- children: t12
154
- });
155
- $[35] = t12;
156
- $[36] = t4;
157
- $[37] = t13;
158
- } else t13 = $[37];
159
- return t13;
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 };