@povio/ui 2.3.0-rc.6 → 2.3.0-rc.7
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/dist/assets/icons/AlignCenter.js +26 -11
- package/dist/assets/icons/AlignLeft.js +26 -11
- package/dist/assets/icons/AlignLeftRight.js +26 -11
- package/dist/assets/icons/AlignRight.js +26 -11
- package/dist/assets/icons/ArrowDropDown.js +26 -11
- package/dist/assets/icons/ArrowDropUp.js +26 -11
- package/dist/assets/icons/ArrowLeft.js +26 -11
- package/dist/assets/icons/ArrowRight.js +26 -11
- package/dist/assets/icons/Bold.js +26 -11
- package/dist/assets/icons/BulletedList.js +26 -11
- package/dist/assets/icons/Calendar.js +28 -13
- package/dist/assets/icons/Check.js +28 -13
- package/dist/assets/icons/CheckCircle.js +26 -11
- package/dist/assets/icons/CheckboxCheckmark.js +29 -14
- package/dist/assets/icons/CheckboxIndeterminate.js +29 -14
- package/dist/assets/icons/ChevronDown.js +28 -13
- package/dist/assets/icons/ChevronLeft.js +28 -13
- package/dist/assets/icons/ChevronRight.js +28 -13
- package/dist/assets/icons/ChevronUp.js +28 -13
- package/dist/assets/icons/ChevronsLeft.js +28 -13
- package/dist/assets/icons/ChevronsRight.js +28 -13
- package/dist/assets/icons/Clock.js +26 -11
- package/dist/assets/icons/Close.js +26 -11
- package/dist/assets/icons/DateTime.js +35 -14
- package/dist/assets/icons/DragIndicator.js +26 -11
- package/dist/assets/icons/File.js +28 -13
- package/dist/assets/icons/Highlight.js +26 -11
- package/dist/assets/icons/HighlightOn.js +49 -15
- package/dist/assets/icons/Home.js +26 -11
- package/dist/assets/icons/Info.js +37 -16
- package/dist/assets/icons/Italic.js +26 -11
- package/dist/assets/icons/Link.js +26 -11
- package/dist/assets/icons/Menu.js +26 -11
- package/dist/assets/icons/NumberedList.js +26 -11
- package/dist/assets/icons/PointerHorizontal.js +26 -11
- package/dist/assets/icons/PointerVertical.js +26 -11
- package/dist/assets/icons/Search.js +26 -11
- package/dist/assets/icons/Send.js +28 -13
- package/dist/assets/icons/Strikethrough.js +26 -11
- package/dist/assets/icons/TextColor.js +48 -14
- package/dist/assets/icons/Today.js +26 -11
- package/dist/assets/icons/Underlined.js +28 -13
- package/dist/assets/icons/Upload.js +35 -14
- package/dist/assets/icons/Visibility.js +26 -11
- package/dist/assets/icons/VisibilityOff.js +26 -11
- package/dist/assets/icons/WarningFilled.js +28 -13
- package/dist/components/Breadcrumbs/Breadcrumbs.js +207 -56
- package/dist/components/Menu/Menu.js +18 -2
- package/dist/components/Menu/MenuDesktop.js +41 -7
- package/dist/components/Menu/MenuItem.js +32 -9
- package/dist/components/Menu/MenuMobile.js +97 -38
- package/dist/components/Menu/MenuPopover.js +105 -29
- package/dist/components/buttons/IconButton/IconButton.js +40 -8
- package/dist/components/buttons/InlineIconButton/InlineIconButton.js +34 -9
- package/dist/components/buttons/PillButton/PillButton.js +55 -17
- package/dist/components/buttons/SplitButton/SplitButton.js +103 -18
- package/dist/components/buttons/TextButton/TextButton.js +30 -8
- package/dist/components/buttons/ToggleButton/ToggleButton.js +28 -8
- package/dist/components/buttons/shared/ButtonContent.js +80 -22
- package/dist/components/inputs/Checkbox/Checkbox.js +164 -34
- package/dist/components/inputs/Checkbox/CheckboxCheckmark.js +24 -10
- package/dist/components/inputs/DateTime/DatePicker/DatePicker.js +8 -8
- package/dist/components/inputs/DateTime/DateRangePicker/DateRangePicker.js +103 -103
- package/dist/components/inputs/DateTime/DateTimePicker/DateTimePicker.js +9 -9
- package/dist/components/inputs/DateTime/TimePicker/TimePicker.js +384 -116
- package/dist/components/inputs/DateTime/shared/Calendar.js +331 -137
- package/dist/components/inputs/DateTime/shared/CalendarCell.js +283 -102
- package/dist/components/inputs/DateTime/shared/CalendarGrid.js +142 -33
- package/dist/components/inputs/DateTime/shared/CalendarHeader.js +245 -90
- package/dist/components/inputs/DateTime/shared/CalendarSelectHeader.js +318 -137
- package/dist/components/inputs/DateTime/shared/DateField.js +296 -112
- package/dist/components/inputs/DateTime/shared/DatePickerInput.js +345 -142
- package/dist/components/inputs/DateTime/shared/DateSegmentItem.js +94 -21
- package/dist/components/inputs/DateTime/shared/DateTimeDialog.js +81 -27
- package/dist/components/inputs/DateTime/shared/DateTimeDialogFooter.js +59 -10
- package/dist/components/inputs/DateTime/shared/MonthPicker.js +103 -58
- package/dist/components/inputs/DateTime/shared/RangeCalendar.js +193 -82
- package/dist/components/inputs/DateTime/shared/TimeField.js +27 -8
- package/dist/components/inputs/DateTime/shared/TimePickerForm.js +279 -110
- package/dist/components/inputs/DateTime/shared/TimePickerInput.js +205 -70
- package/dist/components/inputs/DateTime/shared/YearPicker.js +119 -68
- package/dist/components/inputs/File/FileUpload.js +86 -44
- package/dist/components/inputs/File/FileUploadContainer.js +15 -7
- package/dist/components/inputs/File/InputUpload.js +317 -79
- package/dist/components/inputs/File/shared/FileCard.js +104 -41
- package/dist/components/inputs/File/shared/FileCardList.js +47 -12
- package/dist/components/inputs/File/shared/FileUploadContent.js +175 -44
- package/dist/components/inputs/File/shared/FileUploadContentEmpty.js +149 -46
- package/dist/components/inputs/File/shared/FileUploadContentError.js +234 -93
- package/dist/components/inputs/File/shared/FileUploadContentFilled.js +230 -97
- package/dist/components/inputs/File/shared/FileUploadContentLoading.js +199 -55
- package/dist/components/inputs/File/shared/InputUploadContent.js +148 -35
- package/dist/components/inputs/File/shared/InputUploadFilled.js +49 -8
- package/dist/components/inputs/File/shared/ProgressBar.js +48 -9
- package/dist/components/inputs/FormField/FormField.js +119 -37
- package/dist/components/inputs/FormField/FormFieldError.js +25 -5
- package/dist/components/inputs/FormField/FormFieldHeader.js +79 -22
- package/dist/components/inputs/FormField/FormFieldHeaderClose.js +31 -7
- package/dist/components/inputs/FormField/FormFieldHelper.js +26 -6
- package/dist/components/inputs/FormField/FormFieldLabel.js +40 -9
- package/dist/components/inputs/Input/NumberInput/NumberInput.js +253 -82
- package/dist/components/inputs/Input/NumberRangeInput/NumberRangeField.js +541 -116
- package/dist/components/inputs/Input/NumberRangeInput/NumberRangeInput.js +314 -75
- package/dist/components/inputs/Input/PasswordInput/PasswordInput.js +48 -9
- package/dist/components/inputs/Input/TextArea/TextArea.js +298 -89
- package/dist/components/inputs/Input/TextInput/TextInput.js +241 -81
- package/dist/components/inputs/Input/shared/InputContent.js +190 -58
- package/dist/components/inputs/Inputs/Form.js +40 -11
- package/dist/components/inputs/Inputs/InputItem.js +65 -14
- package/dist/components/inputs/Inputs/Inputs.js +37 -11
- package/dist/components/inputs/RadioGroup/RadioGroup.js +317 -106
- package/dist/components/inputs/Selection/Autocomplete/QueryAutocomplete.js +2 -2
- package/dist/components/inputs/Selection/Select/QuerySelect.js +107 -27
- package/dist/components/inputs/Selection/shared/SelectBase.js +69 -20
- package/dist/components/inputs/Selection/shared/SelectDesktop.js +390 -143
- package/dist/components/inputs/Selection/shared/SelectInput.js +334 -136
- package/dist/components/inputs/Selection/shared/SelectInputTags.js +99 -25
- package/dist/components/inputs/Selection/shared/SelectListBox.js +163 -51
- package/dist/components/inputs/Selection/shared/SelectListBoxItem.js +85 -35
- package/dist/components/inputs/Selection/shared/SelectListBoxItemSelectAll.js +69 -16
- package/dist/components/inputs/Selection/shared/SelectListBoxLoadingItem.js +70 -21
- package/dist/components/inputs/Selection/shared/SelectListBoxSelectionBar.js +58 -9
- package/dist/components/inputs/Selection/shared/StaticSelectTrailingContent.js +36 -11
- package/dist/components/inputs/Selection/shared/select.context.js +34 -34
- package/dist/components/inputs/Selection/shared/useSelectItems.js +109 -49
- package/dist/components/inputs/Skeleton/InputFrame.js +472 -145
- package/dist/components/inputs/Slider/Slider.js +247 -74
- package/dist/components/inputs/TextEditor/TextEditor.js +447 -103
- package/dist/components/inputs/TextEditor/Toolbar/ColorPicker.js +37 -11
- package/dist/components/inputs/TextEditor/Toolbar/ColorPickerDropdown.js +102 -30
- package/dist/components/inputs/TextEditor/Toolbar/HyperlinkAction.js +194 -45
- package/dist/components/inputs/TextEditor/Toolbar/TextAlignSelect.js +88 -28
- package/dist/components/inputs/TextEditor/Toolbar/TextColorSelect.js +48 -14
- package/dist/components/inputs/TextEditor/Toolbar/TextEditorToolbar.js +66 -19
- package/dist/components/inputs/TextEditor/Toolbar/TextHighlightSelect.js +49 -15
- package/dist/components/inputs/TextEditor/Toolbar/TextListActions.js +92 -32
- package/dist/components/inputs/TextEditor/Toolbar/TextMarksActions.js +126 -54
- package/dist/components/inputs/TextEditor/Toolbar/TextStyleSelect.js +141 -38
- package/dist/components/inputs/Toggle/Toggle.js +187 -41
- package/dist/components/inputs/shared/CheckContent.js +21 -10
- package/dist/components/inputs/shared/InputClear.js +78 -21
- package/dist/components/inputs/shared/TooltipWrapper.js +47 -12
- package/dist/components/inputs/shared/input.cva.js +13 -3
- package/dist/components/inputs/shared/useStaticInputHandoff.js +93 -50
- package/dist/components/navigation/Accordion/Accordion.js +69 -22
- package/dist/components/navigation/Accordion/AccordionItem.js +86 -41
- package/dist/components/navigation/Stepper/Stepper.js +67 -22
- package/dist/components/navigation/Stepper/StepperItem.js +104 -31
- package/dist/components/navigation/Stepper/StepperSeparator.js +23 -5
- package/dist/components/overlays/ActionModal/ActionModal.js +169 -35
- package/dist/components/overlays/BottomSheet/BottomSheet.js +96 -23
- package/dist/components/overlays/BottomSheet/BottomSheetHeader.js +48 -8
- package/dist/components/overlays/Drawer/Drawer.js +62 -20
- package/dist/components/overlays/ResponsivePopover/ResponsivePopover.js +83 -27
- package/dist/components/overlays/Tooltip/Tooltip.js +137 -28
- package/dist/components/overlays/Tooltip/TooltipEllipsis.js +37 -12
- package/dist/components/segment/Segment.js +218 -57
- package/dist/components/segment/SegmentItem.js +67 -10
- package/dist/components/shared/pagination/Pagination.js +108 -22
- package/dist/components/shared/pagination/PaginationList.js +167 -64
- package/dist/components/status/Alert/Alert.js +97 -30
- package/dist/components/status/Loader/Loader.js +77 -22
- package/dist/components/status/Toast/Toast.js +21 -13
- package/dist/components/status/Toast/useToast.js +62 -57
- package/dist/components/table/ColumnConfig.js +158 -54
- package/dist/components/table/InfiniteTable.js +67 -16
- package/dist/components/table/PaginatedTable.js +84 -18
- package/dist/components/table/Table.js +23 -23
- package/dist/components/text/Link/Link.js +19 -7
- package/dist/components/text/Typography/Typography.js +23 -8
- package/dist/config/confirmation.context.js +1 -1
- package/dist/config/link.context.js +23 -9
- package/dist/config/router.context.js +42 -16
- package/dist/config/theme.context.js +98 -45
- package/dist/config/uiConfig.context.js +39 -8
- package/dist/config/uiStyle.context.js +15 -5
- package/dist/hooks/useBreakpoint.js +16 -3
- package/dist/hooks/useDebounceCallback.js +51 -17
- package/dist/hooks/useFilters.js +125 -64
- package/dist/hooks/useForm.js +42 -8
- package/dist/hooks/useFormAutosave.js +101 -30
- package/dist/hooks/useIntersectionObserver.js +86 -32
- package/dist/hooks/useLocalStorage.js +43 -10
- package/dist/hooks/useLongPressRepeat.js +55 -20
- package/dist/hooks/usePagination.js +49 -19
- package/dist/hooks/useScrollableListBox.js +37 -16
- package/dist/hooks/useSorting.js +69 -28
- package/dist/hooks/useStateAndRef.js +21 -7
- package/dist/hooks/useTableColumnConfig.js +124 -31
- package/dist/hooks/useTranslationMemo.js +25 -5
- package/package.json +1 -1
|
@@ -82,8 +82,8 @@ var DateRangePickerBase = (props) => {
|
|
|
82
82
|
},
|
|
83
83
|
getContainer: () => datePickerInputRef.current?.getContainer?.() ?? null
|
|
84
84
|
}));
|
|
85
|
-
const handleBlur = (
|
|
86
|
-
onBlur?.({ target: { value:
|
|
85
|
+
const handleBlur = (newValue_0) => {
|
|
86
|
+
onBlur?.({ target: { value: newValue_0 } });
|
|
87
87
|
};
|
|
88
88
|
const { callback: debouncedBlur } = useDebounceCallback(handleBlur, { delay: 500 });
|
|
89
89
|
const formFieldProps = {
|
|
@@ -136,10 +136,10 @@ var DateRangePickerBase = (props) => {
|
|
|
136
136
|
className: headerClassName,
|
|
137
137
|
labelProps
|
|
138
138
|
};
|
|
139
|
-
const isValidRange = useCallback((
|
|
140
|
-
if (
|
|
141
|
-
const startDate =
|
|
142
|
-
if (
|
|
139
|
+
const isValidRange = useCallback((newValue_1) => {
|
|
140
|
+
if (newValue_1?.start && newValue_1?.end) {
|
|
141
|
+
const startDate = newValue_1.start;
|
|
142
|
+
if (newValue_1.end.compare(startDate) < 0) {
|
|
143
143
|
setValidationRangeError(t(($) => $.ui.datePicker.errors.endDateBeforeStart, { ns: "ui" }));
|
|
144
144
|
return true;
|
|
145
145
|
}
|
|
@@ -147,20 +147,20 @@ var DateRangePickerBase = (props) => {
|
|
|
147
147
|
} else setValidationRangeError(void 0);
|
|
148
148
|
return false;
|
|
149
149
|
}, [t]);
|
|
150
|
-
const handleCalendarStatesChange = (
|
|
151
|
-
if (
|
|
152
|
-
if (isValidRange(
|
|
153
|
-
dialogState.setValue(
|
|
154
|
-
const
|
|
155
|
-
const
|
|
156
|
-
leftCalendarState.setFocusedDate(
|
|
157
|
-
if (
|
|
158
|
-
else rightCalendarState.setFocusedDate(
|
|
159
|
-
leftCalendarState.setValue(
|
|
160
|
-
rightCalendarState.setValue(
|
|
150
|
+
const handleCalendarStatesChange = (newValue_2) => {
|
|
151
|
+
if (newValue_2) {
|
|
152
|
+
if (isValidRange(newValue_2)) return;
|
|
153
|
+
dialogState.setValue(newValue_2);
|
|
154
|
+
const startDate_0 = newValue_2.start;
|
|
155
|
+
const endDate_0 = newValue_2.end;
|
|
156
|
+
leftCalendarState.setFocusedDate(startDate_0);
|
|
157
|
+
if (startDate_0.year === endDate_0.year && startDate_0.month === endDate_0.month) rightCalendarState.setFocusedDate(startDate_0.add({ months: 1 }));
|
|
158
|
+
else rightCalendarState.setFocusedDate(endDate_0);
|
|
159
|
+
leftCalendarState.setValue(newValue_2);
|
|
160
|
+
rightCalendarState.setValue(newValue_2);
|
|
161
161
|
setRangeSelection({
|
|
162
|
-
start:
|
|
163
|
-
end:
|
|
162
|
+
start: newValue_2.start,
|
|
163
|
+
end: newValue_2.end,
|
|
164
164
|
isSelecting: false
|
|
165
165
|
});
|
|
166
166
|
setHoverDate(null);
|
|
@@ -184,27 +184,27 @@ var DateRangePickerBase = (props) => {
|
|
|
184
184
|
setHoverDate(date);
|
|
185
185
|
});
|
|
186
186
|
}, []);
|
|
187
|
-
const handleDateHover = useCallback((
|
|
188
|
-
if (rangeSelection.isSelecting && rangeSelection.start) throttledSetHoverDate(
|
|
187
|
+
const handleDateHover = useCallback((date_0) => {
|
|
188
|
+
if (rangeSelection.isSelecting && rangeSelection.start) throttledSetHoverDate(date_0);
|
|
189
189
|
}, [
|
|
190
190
|
rangeSelection.isSelecting,
|
|
191
191
|
rangeSelection.start,
|
|
192
192
|
throttledSetHoverDate
|
|
193
193
|
]);
|
|
194
|
-
const handleDateSelection = useCallback((
|
|
194
|
+
const handleDateSelection = useCallback((date_1, calendarSide) => {
|
|
195
195
|
if (calendarSide) {
|
|
196
196
|
const currentVisibleMonth = (calendarSide === "left" ? leftCalendarState : rightCalendarState).visibleRange.start;
|
|
197
|
-
if (
|
|
198
|
-
leftCalendarState.setFocusedDate(
|
|
199
|
-
rightCalendarState.setFocusedDate(
|
|
197
|
+
if (date_1.month !== currentVisibleMonth.month || date_1.year !== currentVisibleMonth.year) if (calendarSide === "left") {
|
|
198
|
+
leftCalendarState.setFocusedDate(date_1);
|
|
199
|
+
rightCalendarState.setFocusedDate(date_1.add({ months: 1 }));
|
|
200
200
|
} else {
|
|
201
|
-
rightCalendarState.setFocusedDate(
|
|
202
|
-
leftCalendarState.setFocusedDate(
|
|
201
|
+
rightCalendarState.setFocusedDate(date_1);
|
|
202
|
+
leftCalendarState.setFocusedDate(date_1.subtract({ months: 1 }));
|
|
203
203
|
}
|
|
204
204
|
}
|
|
205
205
|
if (!rangeSelection.isSelecting || !rangeSelection.start) {
|
|
206
206
|
setRangeSelection({
|
|
207
|
-
start:
|
|
207
|
+
start: date_1,
|
|
208
208
|
end: null,
|
|
209
209
|
isSelecting: true
|
|
210
210
|
});
|
|
@@ -213,7 +213,7 @@ var DateRangePickerBase = (props) => {
|
|
|
213
213
|
rightCalendarState.setValue(null);
|
|
214
214
|
} else {
|
|
215
215
|
const { start } = rangeSelection;
|
|
216
|
-
const end =
|
|
216
|
+
const end = date_1;
|
|
217
217
|
const finalStart = start.compare(end) <= 0 ? start : end;
|
|
218
218
|
const finalEnd = start.compare(end) <= 0 ? end : start;
|
|
219
219
|
const newRange = {
|
|
@@ -237,16 +237,16 @@ var DateRangePickerBase = (props) => {
|
|
|
237
237
|
rightCalendarState,
|
|
238
238
|
dialogState
|
|
239
239
|
]);
|
|
240
|
-
const handleKeyboardNavigation = useCallback((event,
|
|
241
|
-
const
|
|
242
|
-
const otherState =
|
|
240
|
+
const handleKeyboardNavigation = useCallback((event, date_2, calendarSide_0) => {
|
|
241
|
+
const currentState_0 = calendarSide_0 === "left" ? leftCalendarState : rightCalendarState;
|
|
242
|
+
const otherState = calendarSide_0 === "left" ? rightCalendarState : leftCalendarState;
|
|
243
243
|
let shouldPreventDefault = false;
|
|
244
244
|
switch (event.key) {
|
|
245
245
|
case "ArrowRight": {
|
|
246
|
-
const nextDate =
|
|
247
|
-
const
|
|
248
|
-
const
|
|
249
|
-
if (
|
|
246
|
+
const nextDate = date_2.add({ days: 1 });
|
|
247
|
+
const currentMonth_2 = currentState_0.visibleRange.start;
|
|
248
|
+
const otherMonth_2 = otherState.visibleRange.start;
|
|
249
|
+
if (calendarSide_0 === "left" && nextDate.month !== currentMonth_2.month) if (nextDate.year === otherMonth_2.year && nextDate.month === otherMonth_2.month) {
|
|
250
250
|
otherState.setFocusedDate(nextDate);
|
|
251
251
|
shouldPreventDefault = true;
|
|
252
252
|
} else {
|
|
@@ -256,10 +256,10 @@ var DateRangePickerBase = (props) => {
|
|
|
256
256
|
break;
|
|
257
257
|
}
|
|
258
258
|
case "ArrowLeft": {
|
|
259
|
-
const prevDate =
|
|
260
|
-
const
|
|
261
|
-
const
|
|
262
|
-
if (
|
|
259
|
+
const prevDate = date_2.subtract({ days: 1 });
|
|
260
|
+
const currentMonth_1 = currentState_0.visibleRange.start;
|
|
261
|
+
const otherMonth_1 = otherState.visibleRange.start;
|
|
262
|
+
if (calendarSide_0 === "right" && prevDate.month !== currentMonth_1.month) if (prevDate.year === otherMonth_1.year && prevDate.month === otherMonth_1.month) {
|
|
263
263
|
otherState.setFocusedDate(prevDate);
|
|
264
264
|
shouldPreventDefault = true;
|
|
265
265
|
} else {
|
|
@@ -269,10 +269,10 @@ var DateRangePickerBase = (props) => {
|
|
|
269
269
|
break;
|
|
270
270
|
}
|
|
271
271
|
case "ArrowDown": {
|
|
272
|
-
const nextWeekDate =
|
|
273
|
-
const
|
|
274
|
-
const
|
|
275
|
-
if (
|
|
272
|
+
const nextWeekDate = date_2.add({ weeks: 1 });
|
|
273
|
+
const currentMonth_0 = currentState_0.visibleRange.start;
|
|
274
|
+
const otherMonth_0 = otherState.visibleRange.start;
|
|
275
|
+
if (calendarSide_0 === "left" && nextWeekDate.month !== currentMonth_0.month) if (nextWeekDate.year === otherMonth_0.year && nextWeekDate.month === otherMonth_0.month) {
|
|
276
276
|
otherState.setFocusedDate(nextWeekDate);
|
|
277
277
|
shouldPreventDefault = true;
|
|
278
278
|
} else {
|
|
@@ -282,10 +282,10 @@ var DateRangePickerBase = (props) => {
|
|
|
282
282
|
break;
|
|
283
283
|
}
|
|
284
284
|
case "ArrowUp": {
|
|
285
|
-
const prevWeekDate =
|
|
286
|
-
const currentMonth =
|
|
285
|
+
const prevWeekDate = date_2.subtract({ weeks: 1 });
|
|
286
|
+
const currentMonth = currentState_0.visibleRange.start;
|
|
287
287
|
const otherMonth = otherState.visibleRange.start;
|
|
288
|
-
if (
|
|
288
|
+
if (calendarSide_0 === "right" && prevWeekDate.month !== currentMonth.month) if (prevWeekDate.year === otherMonth.year && prevWeekDate.month === otherMonth.month) {
|
|
289
289
|
otherState.setFocusedDate(prevWeekDate);
|
|
290
290
|
shouldPreventDefault = true;
|
|
291
291
|
} else {
|
|
@@ -296,7 +296,7 @@ var DateRangePickerBase = (props) => {
|
|
|
296
296
|
}
|
|
297
297
|
case "Enter":
|
|
298
298
|
case " ":
|
|
299
|
-
handleDateSelection(
|
|
299
|
+
handleDateSelection(date_2);
|
|
300
300
|
shouldPreventDefault = true;
|
|
301
301
|
break;
|
|
302
302
|
case "Escape":
|
|
@@ -320,14 +320,14 @@ var DateRangePickerBase = (props) => {
|
|
|
320
320
|
rightCalendarState,
|
|
321
321
|
handleDateSelection
|
|
322
322
|
]);
|
|
323
|
-
const syncCalendarStates = useCallback((
|
|
324
|
-
if (isValidRange(
|
|
325
|
-
leftCalendarState.setValue(
|
|
326
|
-
rightCalendarState.setValue(
|
|
327
|
-
dialogState.setValue(
|
|
328
|
-
if (
|
|
329
|
-
start:
|
|
330
|
-
end:
|
|
323
|
+
const syncCalendarStates = useCallback((newValue_3) => {
|
|
324
|
+
if (isValidRange(newValue_3)) return;
|
|
325
|
+
leftCalendarState.setValue(newValue_3);
|
|
326
|
+
rightCalendarState.setValue(newValue_3);
|
|
327
|
+
dialogState.setValue(newValue_3);
|
|
328
|
+
if (newValue_3) setRangeSelection({
|
|
329
|
+
start: newValue_3.start,
|
|
330
|
+
end: newValue_3.end,
|
|
331
331
|
isSelecting: false
|
|
332
332
|
});
|
|
333
333
|
else setRangeSelection({
|
|
@@ -369,11 +369,11 @@ var DateRangePickerBase = (props) => {
|
|
|
369
369
|
dialogState.setValue(state.value);
|
|
370
370
|
leftCalendarState.setValue(state.value);
|
|
371
371
|
rightCalendarState.setValue(state.value);
|
|
372
|
-
const
|
|
373
|
-
const
|
|
374
|
-
leftCalendarState.setFocusedDate(
|
|
375
|
-
if (
|
|
376
|
-
else rightCalendarState.setFocusedDate(
|
|
372
|
+
const startDate_1 = state.value.start || today(getLocalTimeZone());
|
|
373
|
+
const endDate_1 = state.value.end || today(getLocalTimeZone()).add({ months: 1 });
|
|
374
|
+
leftCalendarState.setFocusedDate(startDate_1);
|
|
375
|
+
if (startDate_1.year === endDate_1.year && startDate_1.month === endDate_1.month) rightCalendarState.setFocusedDate(startDate_1.add({ months: 1 }));
|
|
376
|
+
else rightCalendarState.setFocusedDate(endDate_1);
|
|
377
377
|
setRangeSelection({
|
|
378
378
|
start: state.value.start,
|
|
379
379
|
end: state.value.end,
|
|
@@ -382,87 +382,87 @@ var DateRangePickerBase = (props) => {
|
|
|
382
382
|
}
|
|
383
383
|
}
|
|
384
384
|
};
|
|
385
|
-
const
|
|
385
|
+
const todayDate_0 = today(getLocalTimeZone());
|
|
386
386
|
const getThisWeekRange = () => {
|
|
387
387
|
return {
|
|
388
|
-
start: startOfWeek(
|
|
389
|
-
end: endOfWeek(
|
|
388
|
+
start: startOfWeek(todayDate_0, locale),
|
|
389
|
+
end: endOfWeek(todayDate_0, locale)
|
|
390
390
|
};
|
|
391
391
|
};
|
|
392
392
|
const getLastWeekRange = () => {
|
|
393
|
-
const thisWeekStart = startOfWeek(
|
|
393
|
+
const thisWeekStart = startOfWeek(todayDate_0, locale);
|
|
394
394
|
return {
|
|
395
395
|
start: thisWeekStart.subtract({ weeks: 1 }),
|
|
396
396
|
end: thisWeekStart.subtract({ days: 1 })
|
|
397
397
|
};
|
|
398
398
|
};
|
|
399
399
|
const getThisAndLastWeekRange = () => {
|
|
400
|
-
const thisWeekEnd = endOfWeek(
|
|
400
|
+
const thisWeekEnd = endOfWeek(todayDate_0, locale);
|
|
401
401
|
return {
|
|
402
|
-
start: startOfWeek(
|
|
402
|
+
start: startOfWeek(todayDate_0, locale).subtract({ weeks: 1 }),
|
|
403
403
|
end: thisWeekEnd
|
|
404
404
|
};
|
|
405
405
|
};
|
|
406
406
|
const getThisMonthRange = () => {
|
|
407
407
|
return {
|
|
408
|
-
start: startOfMonth(
|
|
409
|
-
end: endOfMonth(
|
|
408
|
+
start: startOfMonth(todayDate_0),
|
|
409
|
+
end: endOfMonth(todayDate_0)
|
|
410
410
|
};
|
|
411
411
|
};
|
|
412
412
|
const getThisAndLastMonthRange = () => {
|
|
413
|
-
const thisMonthEnd = endOfMonth(
|
|
413
|
+
const thisMonthEnd = endOfMonth(todayDate_0);
|
|
414
414
|
return {
|
|
415
|
-
start: startOfMonth(
|
|
415
|
+
start: startOfMonth(todayDate_0).subtract({ months: 1 }),
|
|
416
416
|
end: thisMonthEnd
|
|
417
417
|
};
|
|
418
418
|
};
|
|
419
419
|
const presets = [
|
|
420
420
|
{
|
|
421
|
-
label: t(($) =>
|
|
421
|
+
label: t(($_0) => $_0.ui.datePicker.presets.thisWeek, { ns: "ui" }),
|
|
422
422
|
getValue: getThisWeekRange
|
|
423
423
|
},
|
|
424
424
|
{
|
|
425
|
-
label: t(($) =>
|
|
425
|
+
label: t(($_1) => $_1.ui.datePicker.presets.lastWeek, { ns: "ui" }),
|
|
426
426
|
getValue: getLastWeekRange
|
|
427
427
|
},
|
|
428
428
|
{
|
|
429
|
-
label: t(($) =>
|
|
429
|
+
label: t(($_2) => $_2.ui.datePicker.presets.thisAndLastWeek, { ns: "ui" }),
|
|
430
430
|
getValue: getThisAndLastWeekRange
|
|
431
431
|
},
|
|
432
432
|
{
|
|
433
|
-
label: t(($) =>
|
|
433
|
+
label: t(($_3) => $_3.ui.datePicker.presets.thisMonth, { ns: "ui" }),
|
|
434
434
|
getValue: getThisMonthRange
|
|
435
435
|
},
|
|
436
436
|
{
|
|
437
|
-
label: t(($) =>
|
|
437
|
+
label: t(($_4) => $_4.ui.datePicker.presets.thisAndLastMonth, { ns: "ui" }),
|
|
438
438
|
getValue: getThisAndLastMonthRange
|
|
439
439
|
},
|
|
440
440
|
{
|
|
441
|
-
label: t(($) =>
|
|
441
|
+
label: t(($_5) => $_5.ui.datePicker.presets.thisYear, { ns: "ui" }),
|
|
442
442
|
getValue: () => ({
|
|
443
|
-
start: startOfYear(
|
|
444
|
-
end:
|
|
443
|
+
start: startOfYear(todayDate_0),
|
|
444
|
+
end: todayDate_0
|
|
445
445
|
})
|
|
446
446
|
},
|
|
447
447
|
{
|
|
448
|
-
label: t(($) =>
|
|
448
|
+
label: t(($_6) => $_6.ui.datePicker.presets.lastYear, { ns: "ui" }),
|
|
449
449
|
getValue: () => ({
|
|
450
|
-
start: startOfYear(
|
|
451
|
-
end: endOfYear(
|
|
450
|
+
start: startOfYear(todayDate_0.subtract({ years: 1 })),
|
|
451
|
+
end: endOfYear(todayDate_0.subtract({ years: 1 }))
|
|
452
452
|
})
|
|
453
453
|
},
|
|
454
454
|
{
|
|
455
|
-
label: t(($) =>
|
|
455
|
+
label: t(($_7) => $_7.ui.datePicker.presets.thisAndLastYear, { ns: "ui" }),
|
|
456
456
|
getValue: () => ({
|
|
457
|
-
start: startOfYear(
|
|
458
|
-
end:
|
|
457
|
+
start: startOfYear(todayDate_0.subtract({ years: 1 })),
|
|
458
|
+
end: todayDate_0
|
|
459
459
|
})
|
|
460
460
|
},
|
|
461
461
|
{
|
|
462
|
-
label: t(($) =>
|
|
462
|
+
label: t(($_8) => $_8.ui.datePicker.presets.soFar, { ns: "ui" }),
|
|
463
463
|
getValue: () => ({
|
|
464
|
-
start: startOfYear(
|
|
465
|
-
end:
|
|
464
|
+
start: startOfYear(todayDate_0),
|
|
465
|
+
end: todayDate_0
|
|
466
466
|
})
|
|
467
467
|
}
|
|
468
468
|
];
|
|
@@ -470,12 +470,12 @@ var DateRangePickerBase = (props) => {
|
|
|
470
470
|
setActivePreset(preset.label);
|
|
471
471
|
const presetValue = preset.getValue();
|
|
472
472
|
syncCalendarStates(presetValue);
|
|
473
|
-
const
|
|
474
|
-
leftCalendarState.setFocusedDate(
|
|
475
|
-
const
|
|
476
|
-
if ((
|
|
473
|
+
const startDate_2 = presetValue.start;
|
|
474
|
+
leftCalendarState.setFocusedDate(startDate_2);
|
|
475
|
+
const endDate_2 = presetValue.end;
|
|
476
|
+
if ((endDate_2.year - startDate_2.year) * 12 + (endDate_2.month - startDate_2.month) > 2) rightCalendarState.setFocusedDate(endDate_2);
|
|
477
477
|
else {
|
|
478
|
-
const rightCalendarMonth =
|
|
478
|
+
const rightCalendarMonth = startDate_2.add({ months: 1 });
|
|
479
479
|
rightCalendarState.setFocusedDate(rightCalendarMonth);
|
|
480
480
|
}
|
|
481
481
|
};
|
|
@@ -516,17 +516,17 @@ var DateRangePickerBase = (props) => {
|
|
|
516
516
|
hideSidebar,
|
|
517
517
|
sidebar: /* @__PURE__ */ jsx("div", {
|
|
518
518
|
className: "flex w-full flex-row overflow-auto border-elevation-outline-default-1 border-solid [-ms-overflow-style:none] [scrollbar-width:none] md:w-[156px] md:flex-col md:border-r [&::-webkit-scrollbar]:hidden",
|
|
519
|
-
children: presets.map((
|
|
520
|
-
onClick: () => selectPreset(
|
|
521
|
-
className: clsx("w-full px-2 py-1 text-left md:px-list-side-item-left md:py-list-height-item", activePreset !==
|
|
519
|
+
children: presets.map((preset_0) => /* @__PURE__ */ jsx(Button, {
|
|
520
|
+
onClick: () => selectPreset(preset_0),
|
|
521
|
+
className: clsx("w-full px-2 py-1 text-left md:px-list-side-item-left md:py-list-height-item", activePreset !== preset_0.label && "text-interactive-text-secondary-idle hover:text-interactive-text-secondary-hover", activePreset === preset_0.label && "bg-interactive-contained-primary-idle text-interactive-text-secondary-idle-inverted"),
|
|
522
522
|
children: /* @__PURE__ */ jsx(Typography, {
|
|
523
523
|
size: "label-2",
|
|
524
524
|
sizeMobile: "label-3",
|
|
525
525
|
as: "span",
|
|
526
526
|
className: "whitespace-nowrap",
|
|
527
|
-
children:
|
|
527
|
+
children: preset_0.label
|
|
528
528
|
})
|
|
529
|
-
},
|
|
529
|
+
}, preset_0.label))
|
|
530
530
|
}),
|
|
531
531
|
footer: /* @__PURE__ */ jsx(DateTimeDialogFooter, {
|
|
532
532
|
isDisabled,
|
|
@@ -603,10 +603,10 @@ var DateRangePicker = ({ fullIso = true, minValue, maxValue, renderStaticInput,
|
|
|
603
603
|
start: DateTimeUtils.fromUTCISOToCalendarDate(formattedRange.start),
|
|
604
604
|
end: DateTimeUtils.fromUTCISOToCalendarDate(formattedRange.end)
|
|
605
605
|
};
|
|
606
|
-
const
|
|
607
|
-
const
|
|
608
|
-
const startZonedDateTime = DateTimeUtils.fromLocalToZonedDateTime(
|
|
609
|
-
const endZonedDateTime = DateTimeUtils.fromLocalToZonedDateTime(
|
|
606
|
+
const startDate_0 = DateTime.fromISO(formattedRange.start).toJSDate();
|
|
607
|
+
const endDate_0 = DateTime.fromISO(formattedRange.end).toJSDate();
|
|
608
|
+
const startZonedDateTime = DateTimeUtils.fromLocalToZonedDateTime(startDate_0);
|
|
609
|
+
const endZonedDateTime = DateTimeUtils.fromLocalToZonedDateTime(endDate_0);
|
|
610
610
|
return {
|
|
611
611
|
start: toCalendarDate(startZonedDateTime),
|
|
612
612
|
end: toCalendarDate(endZonedDateTime)
|
|
@@ -695,7 +695,7 @@ var DateRangePicker = ({ fullIso = true, minValue, maxValue, renderStaticInput,
|
|
|
695
695
|
...dateLimits,
|
|
696
696
|
ref: mergeRefs(props.ref, inputRef),
|
|
697
697
|
value: parseDateRange(props.value),
|
|
698
|
-
onChange: (
|
|
698
|
+
onChange: (value_0) => props.onChange?.(formatDateRange(value_0))
|
|
699
699
|
});
|
|
700
700
|
};
|
|
701
701
|
//#endregion
|
|
@@ -82,11 +82,11 @@ var DateTimePickerBase = (props) => {
|
|
|
82
82
|
...rest,
|
|
83
83
|
shouldForceLeadingZeros,
|
|
84
84
|
value,
|
|
85
|
-
onChange: (
|
|
86
|
-
onChange?.(
|
|
87
|
-
dialogState.setValue(
|
|
88
|
-
calendarState.setFocusedDate(
|
|
89
|
-
debouncedBlur(
|
|
85
|
+
onChange: (val_0) => {
|
|
86
|
+
onChange?.(val_0);
|
|
87
|
+
dialogState.setValue(val_0);
|
|
88
|
+
calendarState.setFocusedDate(val_0 || today(getLocalTimeZone()));
|
|
89
|
+
debouncedBlur(val_0);
|
|
90
90
|
},
|
|
91
91
|
shouldCloseOnSelect: false,
|
|
92
92
|
granularity: "minute",
|
|
@@ -181,9 +181,9 @@ var DateTimePickerBase = (props) => {
|
|
|
181
181
|
groupProps,
|
|
182
182
|
fieldProps: {
|
|
183
183
|
...fieldProps,
|
|
184
|
-
onBlur: (
|
|
185
|
-
fieldProps.onBlur?.(
|
|
186
|
-
onInputBlur(
|
|
184
|
+
onBlur: (e_0) => {
|
|
185
|
+
fieldProps.onBlur?.(e_0);
|
|
186
|
+
onInputBlur(e_0);
|
|
187
187
|
}
|
|
188
188
|
},
|
|
189
189
|
buttonProps,
|
|
@@ -336,7 +336,7 @@ var DateTimePicker = ({ fullIso = true, renderStaticInput, ...props }) => {
|
|
|
336
336
|
...props,
|
|
337
337
|
ref: mergeRefs(props.ref, inputRef),
|
|
338
338
|
value: parseDateValue(props.value),
|
|
339
|
-
onChange: (
|
|
339
|
+
onChange: (value_0) => props.onChange?.(formatDateValue(value_0))
|
|
340
340
|
});
|
|
341
341
|
};
|
|
342
342
|
//#endregion
|