@povio/ui 3.3.0-rc.3 → 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/Button/button.cva.d.ts +1 -1
- 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/Checkbox/CheckboxGroup.d.ts +5 -1
- package/dist/components/inputs/Checkbox/CheckboxGroup.js +234 -201
- package/dist/components/inputs/DateTime/DatePicker/DatePicker.js +93 -227
- package/dist/components/inputs/DateTime/DateRangePicker/DateRangePicker.d.ts +1 -0
- package/dist/components/inputs/DateTime/DateRangePicker/DateRangePicker.js +170 -273
- package/dist/components/inputs/DateTime/DateTimePicker/DateTimePicker.js +60 -147
- 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 -301
- package/dist/components/inputs/DateTime/shared/DatePickerInput.js +142 -338
- package/dist/components/inputs/DateTime/shared/DateTimeDialogFooter.js +10 -59
- package/dist/components/inputs/DateTime/shared/TimePickerInput.js +144 -134
- package/dist/components/inputs/DateTime/shared/useFirefoxDateSegmentSelectionGuard.d.ts +2 -0
- package/dist/components/inputs/DateTime/shared/useFirefoxDateSegmentSelectionGuard.js +33 -0
- 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/NumberInput/NumberInput.js +2 -1
- package/dist/components/inputs/Input/NumberRangeInput/NumberRangeInput.js +77 -314
- package/dist/components/inputs/Selection/Autocomplete/Autocomplete.js +23 -83
- package/dist/components/inputs/Selection/Autocomplete/QueryAutocomplete.js +56 -2
- package/dist/components/inputs/Selection/Select/QuerySelect.js +82 -94
- 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/querySelect.utils.d.ts +1 -0
- package/dist/components/inputs/Selection/shared/querySelect.utils.js +1 -0
- package/dist/components/inputs/Selection/shared/select.context.js +19 -9
- 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/inputs/shared/input.cva.js +1 -1
- 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/shared/pagination/minWidth.cva.d.ts +1 -1
- 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.d.ts +1 -0
- package/dist/config/uiConfig.context.js +10 -40
- package/dist/config/uiOverrides.context.d.ts +0 -1
- package/dist/helpers/dynamicColumns.js +2 -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 +1 -1
- package/dist/index.js +2 -2
- package/dist/utils/date-time.utils.d.ts +0 -1
- package/dist/utils/date-time.utils.js +21 -45
- package/dist/utils/intl.utils.d.ts +7 -0
- package/dist/utils/intl.utils.js +38 -0
- package/dist/utils/intl.utils.spec.d.ts +1 -0
- 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
|
@@ -8,23 +8,16 @@ import { DateTimeUtils } from "../../../../utils/date-time.utils.js";
|
|
|
8
8
|
import { DateField } from "./DateField.js";
|
|
9
9
|
import { datePickerInputContentRowDefinition } from "./datePickerInput.cva.js";
|
|
10
10
|
import { renderDatePickerTodayIcon } from "./datePickerTodayIcon.js";
|
|
11
|
+
import { useFirefoxDateSegmentSelectionGuard } from "./useFirefoxDateSegmentSelectionGuard.js";
|
|
11
12
|
import { InputClear } from "../../shared/InputClear.js";
|
|
12
|
-
import { c } from "react/compiler-runtime";
|
|
13
13
|
import { Fragment, jsx, jsxs } from "react/jsx-runtime";
|
|
14
14
|
import { clsx } from "clsx";
|
|
15
|
-
import { useImperativeHandle, useRef, useState } from "react";
|
|
15
|
+
import { useCallback, useImperativeHandle, useRef, useState } from "react";
|
|
16
16
|
import { Button } from "react-aria-components";
|
|
17
17
|
import { useFocusVisible, useFocusWithin, useHover } from "react-aria";
|
|
18
18
|
import { getLocalTimeZone, today } from "@internationalized/date";
|
|
19
19
|
//#region src/components/inputs/DateTime/shared/DatePickerInput.tsx
|
|
20
|
-
var DatePickerInput = (
|
|
21
|
-
const $ = c(98);
|
|
22
|
-
const { ref, as, groupProps, fieldProps, endFieldProps, fieldValue, endFieldValue, isValueControlled, hasValue, buttonProps, isDisabled, isInvalid, disableDropdown, variant, size, isDateTime, shouldShrinkInput, isClearable, headerProps, todayIcon, todayIconButtonSize: t1, todayIconButtonComponent, todayIconPlacement: t2, isDirty, isRequired, disableManualEntry, autoFixYear: t3, placeholder, className, onOpenDropdown, dateGranularity: t4, timeZone: timeZoneProp, isTimeOptional: t5, format, fireBlurOnChange, onClear: onClearProp, ...props } = t0;
|
|
23
|
-
const todayIconButtonSize = t1 === void 0 ? "none" : t1;
|
|
24
|
-
const todayIconPlacement = t2 === void 0 ? "content" : t2;
|
|
25
|
-
const autoFixYear = t3 === void 0 ? false : t3;
|
|
26
|
-
const dateGranularity = t4 === void 0 ? "day" : t4;
|
|
27
|
-
const isTimeOptional = t5 === void 0 ? false : t5;
|
|
20
|
+
var DatePickerInput = ({ ref, as, groupProps, fieldProps, endFieldProps, fieldValue, endFieldValue, isValueControlled, hasValue, buttonProps, isDisabled, isInvalid, disableDropdown, variant, size, isDateTime, shouldShrinkInput, isClearable, headerProps, todayIcon, todayIconButtonSize = "none", todayIconButtonComponent, todayIconPlacement = "content", isDirty, isRequired, disableManualEntry, autoFixYear = false, placeholder, className, onOpenDropdown, dateGranularity = "day", timeZone: timeZoneProp, isTimeOptional = false, format, fireBlurOnChange, onClear: onClearProp, ...props }) => {
|
|
28
21
|
const uiConfig = UIConfig.useConfig();
|
|
29
22
|
const timeZone = timeZoneProp ?? uiConfig.dateInput.timeZone;
|
|
30
23
|
let effectiveTimeZone = getLocalTimeZone();
|
|
@@ -33,106 +26,56 @@ var DatePickerInput = (t0) => {
|
|
|
33
26
|
const inputSizeCva = UIOverrides.useCva("input.sizeCva", inputSizeDefinition);
|
|
34
27
|
const datePickerInputContentRowCva = UIOverrides.useCva("datePickerInput.contentRowCva", datePickerInputContentRowDefinition);
|
|
35
28
|
const [canClear, setCanClear] = useState(false);
|
|
36
|
-
|
|
37
|
-
if ($[0] !== isDisabled) {
|
|
38
|
-
t6 = { isDisabled };
|
|
39
|
-
$[0] = isDisabled;
|
|
40
|
-
$[1] = t6;
|
|
41
|
-
} else t6 = $[1];
|
|
42
|
-
const { hoverProps, isHovered } = useHover(t6);
|
|
29
|
+
const { hoverProps, isHovered } = useHover({ isDisabled });
|
|
43
30
|
const [isFocused, setIsFocused] = useState(false);
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
}
|
|
52
|
-
} };
|
|
53
|
-
$[2] = autoFixYear;
|
|
54
|
-
$[3] = t7;
|
|
55
|
-
} else t7 = $[3];
|
|
56
|
-
const { focusWithinProps } = useFocusWithin(t7);
|
|
31
|
+
const { focusWithinProps } = useFocusWithin({ onFocusWithinChange: (isFocusWithin) => {
|
|
32
|
+
setIsFocused(isFocusWithin);
|
|
33
|
+
if (!isFocusWithin && autoFixYear) {
|
|
34
|
+
dateFieldRef.current?.autoFixYear();
|
|
35
|
+
endDateFieldRef.current?.autoFixYear();
|
|
36
|
+
}
|
|
37
|
+
} });
|
|
57
38
|
const { isFocusVisible } = useFocusVisible();
|
|
58
39
|
const dateFieldRef = useRef(null);
|
|
59
40
|
const endDateFieldRef = useRef(null);
|
|
60
41
|
const containerRef = useRef(null);
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
$[8] = autoFixYear;
|
|
83
|
-
$[9] = endFieldProps;
|
|
84
|
-
$[10] = endFieldValue;
|
|
85
|
-
$[11] = isValueControlled;
|
|
86
|
-
$[12] = t10;
|
|
87
|
-
} else t10 = $[12];
|
|
88
|
-
const normalizedEndFieldProps = t10;
|
|
89
|
-
let t11;
|
|
90
|
-
if ($[13] !== endFieldProps || $[14] !== fieldProps || $[15] !== fireBlurOnChange || $[16] !== onClearProp) {
|
|
91
|
-
t11 = () => {
|
|
92
|
-
dateFieldRef.current?.clearField();
|
|
93
|
-
endDateFieldRef.current?.clearField();
|
|
94
|
-
if (onClearProp) onClearProp();
|
|
95
|
-
else {
|
|
96
|
-
fieldProps.onChange?.(null);
|
|
97
|
-
endFieldProps?.onChange?.(null);
|
|
98
|
-
if (fireBlurOnChange) {
|
|
99
|
-
fieldProps.onBlur?.(null);
|
|
100
|
-
endFieldProps?.onBlur?.(null);
|
|
101
|
-
}
|
|
42
|
+
useFirefoxDateSegmentSelectionGuard(containerRef);
|
|
43
|
+
const normalizedFieldProps = {
|
|
44
|
+
...fieldProps,
|
|
45
|
+
value: isValueControlled ? fieldValue ?? null : fieldProps.value ?? null,
|
|
46
|
+
shouldAutoFixYear: autoFixYear
|
|
47
|
+
};
|
|
48
|
+
const normalizedEndFieldProps = endFieldProps ? {
|
|
49
|
+
...endFieldProps,
|
|
50
|
+
value: isValueControlled ? endFieldValue ?? null : endFieldProps.value ?? null,
|
|
51
|
+
shouldAutoFixYear: autoFixYear
|
|
52
|
+
} : void 0;
|
|
53
|
+
const clearInput = useCallback(() => {
|
|
54
|
+
dateFieldRef.current?.clearField();
|
|
55
|
+
endDateFieldRef.current?.clearField();
|
|
56
|
+
if (onClearProp) onClearProp();
|
|
57
|
+
else {
|
|
58
|
+
fieldProps.onChange?.(null);
|
|
59
|
+
endFieldProps?.onChange?.(null);
|
|
60
|
+
if (fireBlurOnChange) {
|
|
61
|
+
fieldProps.onBlur?.(null);
|
|
62
|
+
endFieldProps?.onBlur?.(null);
|
|
102
63
|
}
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
});
|
|
119
|
-
t13 = [clearInput];
|
|
120
|
-
$[18] = clearInput;
|
|
121
|
-
$[19] = t12;
|
|
122
|
-
$[20] = t13;
|
|
123
|
-
} else {
|
|
124
|
-
t12 = $[19];
|
|
125
|
-
t13 = $[20];
|
|
126
|
-
}
|
|
127
|
-
useImperativeHandle(ref, t12, t13);
|
|
128
|
-
let t14;
|
|
129
|
-
if ($[21] === Symbol.for("react.memo_cache_sentinel")) {
|
|
130
|
-
t14 = (canClearInput) => {
|
|
131
|
-
setCanClear(canClearInput);
|
|
132
|
-
};
|
|
133
|
-
$[21] = t14;
|
|
134
|
-
} else t14 = $[21];
|
|
135
|
-
const onClearChange = t14;
|
|
64
|
+
}
|
|
65
|
+
setCanClear(false);
|
|
66
|
+
}, [
|
|
67
|
+
endFieldProps,
|
|
68
|
+
fieldProps,
|
|
69
|
+
fireBlurOnChange,
|
|
70
|
+
onClearProp
|
|
71
|
+
]);
|
|
72
|
+
useImperativeHandle(ref, () => ({
|
|
73
|
+
clear: clearInput,
|
|
74
|
+
getContainer: () => containerRef.current
|
|
75
|
+
}), [clearInput]);
|
|
76
|
+
const onClearChange = useCallback((canClearInput) => {
|
|
77
|
+
setCanClear(canClearInput);
|
|
78
|
+
}, []);
|
|
136
79
|
const showClear = canClear || hasValue || normalizedFieldProps.value != null || normalizedEndFieldProps?.value != null;
|
|
137
80
|
const isTodayIconDisabled = isDisabled || buttonProps.isDisabled;
|
|
138
81
|
const onToday = () => {
|
|
@@ -159,243 +102,104 @@ var DatePickerInput = (t0) => {
|
|
|
159
102
|
});
|
|
160
103
|
const shouldRenderTodayIconWithFieldLabel = todayIconPlacement === "fieldLabel";
|
|
161
104
|
const pickerIcon = isDateTime ? uiConfig.dateInput.dateTimeIcon : uiConfig.dateInput.calendarIcon;
|
|
162
|
-
|
|
163
|
-
|
|
164
|
-
|
|
165
|
-
...
|
|
166
|
-
|
|
167
|
-
|
|
168
|
-
|
|
169
|
-
const t18 = isDisabled || void 0;
|
|
170
|
-
const t19 = isInvalid || void 0;
|
|
171
|
-
const t20 = normalizedFieldProps.value == null || void 0;
|
|
172
|
-
const t21 = isFocused || void 0;
|
|
173
|
-
const t22 = isFocused && isFocusVisible || void 0;
|
|
174
|
-
const t23 = normalizedFieldProps.value != null || void 0;
|
|
175
|
-
const t24 = isDirty || void 0;
|
|
176
|
-
const t25 = isRequired || void 0;
|
|
177
|
-
const t26 = normalizedFieldProps.value != null || void 0;
|
|
178
|
-
const t27 = shouldShrinkInput ? "min-w-0 flex-1 w-full" : "w-full";
|
|
179
|
-
let t28;
|
|
180
|
-
if ($[22] !== as || $[23] !== inputSizeCva || $[24] !== size || $[25] !== t27) {
|
|
181
|
-
t28 = clsx("flex items-center gap-input-gap-input-text-to-elements pr-0!", t27, inputSizeCva({
|
|
182
|
-
size,
|
|
183
|
-
as
|
|
184
|
-
}));
|
|
185
|
-
$[22] = as;
|
|
186
|
-
$[23] = inputSizeCva;
|
|
187
|
-
$[24] = size;
|
|
188
|
-
$[25] = t27;
|
|
189
|
-
$[26] = t28;
|
|
190
|
-
} else t28 = $[26];
|
|
191
|
-
let t29;
|
|
192
|
-
if ($[27] !== as || $[28] !== headerProps) {
|
|
193
|
-
t29 = as && ["filter", "floating"].includes(as) && headerProps && /* @__PURE__ */ jsx(FormFieldLabel, {
|
|
105
|
+
return /* @__PURE__ */ jsxs("div", {
|
|
106
|
+
ref: containerRef,
|
|
107
|
+
...groupProps,
|
|
108
|
+
...focusWithinProps,
|
|
109
|
+
...hoverProps,
|
|
110
|
+
className: clsx("group group/date-picker-content relative flex items-center justify-between gap-2", shouldShrinkInput ? "min-w-0" : "min-w-input-width-min-width", groupProps.className, inputBaseCva({
|
|
111
|
+
variant,
|
|
194
112
|
as,
|
|
195
|
-
...
|
|
196
|
-
})
|
|
197
|
-
|
|
198
|
-
|
|
199
|
-
|
|
200
|
-
|
|
201
|
-
|
|
202
|
-
|
|
203
|
-
|
|
204
|
-
|
|
205
|
-
|
|
206
|
-
|
|
207
|
-
|
|
208
|
-
|
|
209
|
-
|
|
210
|
-
|
|
211
|
-
|
|
212
|
-
|
|
213
|
-
|
|
214
|
-
|
|
215
|
-
});
|
|
216
|
-
$[33] = disableManualEntry;
|
|
217
|
-
$[34] = isDisabled;
|
|
218
|
-
$[35] = onOpenDropdown;
|
|
219
|
-
$[36] = t32;
|
|
220
|
-
} else t32 = $[36];
|
|
221
|
-
const t33 = !shouldRenderTodayIconWithFieldLabel && todayIconButton;
|
|
222
|
-
let t34;
|
|
223
|
-
if ($[37] !== as || $[38] !== dateGranularity || $[39] !== disableManualEntry || $[40] !== effectiveTimeZone || $[41] !== fieldProps || $[42] !== format || $[43] !== hidePlaceholder || $[44] !== isDisabled || $[45] !== isInvalid || $[46] !== isTimeOptional || $[47] !== normalizedEndFieldProps || $[48] !== normalizedFieldProps || $[49] !== onClearChange || $[50] !== placeholder) {
|
|
224
|
-
t34 = disableManualEntry && placeholder && !fieldProps.value ? /* @__PURE__ */ jsx(Typography, {
|
|
225
|
-
size: "label-1",
|
|
226
|
-
className: "text-text-default-3",
|
|
227
|
-
children: placeholder
|
|
228
|
-
}) : /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(DateField, {
|
|
229
|
-
ref: dateFieldRef,
|
|
230
|
-
...normalizedFieldProps,
|
|
231
|
-
isDisabled,
|
|
232
|
-
isInvalid,
|
|
233
|
-
onClearChange,
|
|
234
|
-
hidePlaceholder,
|
|
235
|
-
disableManualEntry,
|
|
236
|
-
dateGranularity,
|
|
237
|
-
isTimeOptional,
|
|
238
|
-
format,
|
|
239
|
-
timeZone: effectiveTimeZone,
|
|
240
|
-
segmentGroup: normalizedEndFieldProps ? "start" : void 0
|
|
241
|
-
}), normalizedEndFieldProps && /* @__PURE__ */ jsxs(Fragment, { children: [!((as === "floating" || as === "filter") && hidePlaceholder) && /* @__PURE__ */ jsx("span", {
|
|
242
|
-
className: clsx("pointer-events-none select-none", isDisabled && "text-interactive-text-secondary-disabled"),
|
|
243
|
-
children: "–"
|
|
244
|
-
}), /* @__PURE__ */ jsx(DateField, {
|
|
245
|
-
ref: endDateFieldRef,
|
|
246
|
-
...normalizedEndFieldProps,
|
|
247
|
-
isDisabled,
|
|
248
|
-
isInvalid,
|
|
249
|
-
onClearChange,
|
|
250
|
-
hidePlaceholder,
|
|
251
|
-
disableManualEntry,
|
|
252
|
-
isTimeOptional,
|
|
253
|
-
format,
|
|
254
|
-
timeZone: effectiveTimeZone,
|
|
255
|
-
segmentGroup: "end"
|
|
256
|
-
})] })] });
|
|
257
|
-
$[37] = as;
|
|
258
|
-
$[38] = dateGranularity;
|
|
259
|
-
$[39] = disableManualEntry;
|
|
260
|
-
$[40] = effectiveTimeZone;
|
|
261
|
-
$[41] = fieldProps;
|
|
262
|
-
$[42] = format;
|
|
263
|
-
$[43] = hidePlaceholder;
|
|
264
|
-
$[44] = isDisabled;
|
|
265
|
-
$[45] = isInvalid;
|
|
266
|
-
$[46] = isTimeOptional;
|
|
267
|
-
$[47] = normalizedEndFieldProps;
|
|
268
|
-
$[48] = normalizedFieldProps;
|
|
269
|
-
$[49] = onClearChange;
|
|
270
|
-
$[50] = placeholder;
|
|
271
|
-
$[51] = t34;
|
|
272
|
-
} else t34 = $[51];
|
|
273
|
-
let t35;
|
|
274
|
-
if ($[52] !== t31 || $[53] !== t32 || $[54] !== t33 || $[55] !== t34) {
|
|
275
|
-
t35 = /* @__PURE__ */ jsxs("div", {
|
|
276
|
-
className: t31,
|
|
113
|
+
...props
|
|
114
|
+
}), className),
|
|
115
|
+
"data-rac": "",
|
|
116
|
+
"data-datetime-input": "",
|
|
117
|
+
"data-hovered": isHovered || void 0,
|
|
118
|
+
"data-disabled": isDisabled || void 0,
|
|
119
|
+
"data-is-disabled": isDisabled || void 0,
|
|
120
|
+
"data-invalid": isInvalid || void 0,
|
|
121
|
+
"data-is-empty": normalizedFieldProps.value == null || void 0,
|
|
122
|
+
"data-focus-within": isFocused || void 0,
|
|
123
|
+
"data-focus-visible": isFocused && isFocusVisible || void 0,
|
|
124
|
+
"data-has-selection": normalizedFieldProps.value != null || void 0,
|
|
125
|
+
"data-is-dirty": isDirty || void 0,
|
|
126
|
+
"data-is-required": isRequired || void 0,
|
|
127
|
+
"data-is-filled": normalizedFieldProps.value != null || void 0,
|
|
128
|
+
children: [/* @__PURE__ */ jsxs("div", {
|
|
129
|
+
className: clsx("flex items-center gap-input-gap-input-text-to-elements pr-0!", shouldShrinkInput ? "min-w-0 flex-1 w-full" : "w-full", inputSizeCva({
|
|
130
|
+
size,
|
|
131
|
+
as
|
|
132
|
+
})),
|
|
277
133
|
children: [
|
|
278
|
-
|
|
279
|
-
|
|
280
|
-
|
|
134
|
+
as && ["filter", "floating"].includes(as) && headerProps && /* @__PURE__ */ jsx(FormFieldLabel, {
|
|
135
|
+
as,
|
|
136
|
+
...headerProps
|
|
137
|
+
}),
|
|
138
|
+
shouldRenderTodayIconWithFieldLabel && todayIconButton,
|
|
139
|
+
/* @__PURE__ */ jsxs("div", {
|
|
140
|
+
className: datePickerInputContentRowCva({ size }),
|
|
141
|
+
children: [
|
|
142
|
+
disableManualEntry && /* @__PURE__ */ jsx(Button, {
|
|
143
|
+
onPress: onOpenDropdown,
|
|
144
|
+
className: "absolute inset-0 z-base",
|
|
145
|
+
isDisabled
|
|
146
|
+
}),
|
|
147
|
+
!shouldRenderTodayIconWithFieldLabel && todayIconButton,
|
|
148
|
+
disableManualEntry && placeholder && !fieldProps.value ? /* @__PURE__ */ jsx(Typography, {
|
|
149
|
+
size: "label-1",
|
|
150
|
+
className: "text-text-default-3",
|
|
151
|
+
children: placeholder
|
|
152
|
+
}) : /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(DateField, {
|
|
153
|
+
ref: dateFieldRef,
|
|
154
|
+
...normalizedFieldProps,
|
|
155
|
+
isDisabled,
|
|
156
|
+
isInvalid,
|
|
157
|
+
onClearChange,
|
|
158
|
+
hidePlaceholder,
|
|
159
|
+
disableManualEntry,
|
|
160
|
+
dateGranularity,
|
|
161
|
+
isTimeOptional,
|
|
162
|
+
format,
|
|
163
|
+
timeZone: effectiveTimeZone,
|
|
164
|
+
segmentGroup: normalizedEndFieldProps ? "start" : void 0
|
|
165
|
+
}), normalizedEndFieldProps && /* @__PURE__ */ jsxs(Fragment, { children: [!((as === "floating" || as === "filter") && hidePlaceholder) && /* @__PURE__ */ jsx("span", {
|
|
166
|
+
className: clsx("pointer-events-none select-none", isDisabled && "text-interactive-text-secondary-disabled"),
|
|
167
|
+
children: "–"
|
|
168
|
+
}), /* @__PURE__ */ jsx(DateField, {
|
|
169
|
+
ref: endDateFieldRef,
|
|
170
|
+
...normalizedEndFieldProps,
|
|
171
|
+
isDisabled,
|
|
172
|
+
isInvalid,
|
|
173
|
+
onClearChange,
|
|
174
|
+
hidePlaceholder,
|
|
175
|
+
disableManualEntry,
|
|
176
|
+
isTimeOptional,
|
|
177
|
+
format,
|
|
178
|
+
timeZone: effectiveTimeZone,
|
|
179
|
+
segmentGroup: "end"
|
|
180
|
+
})] })] })
|
|
181
|
+
]
|
|
182
|
+
})
|
|
281
183
|
]
|
|
282
|
-
})
|
|
283
|
-
|
|
284
|
-
|
|
285
|
-
|
|
286
|
-
|
|
287
|
-
|
|
288
|
-
|
|
289
|
-
|
|
290
|
-
|
|
291
|
-
|
|
292
|
-
|
|
293
|
-
|
|
294
|
-
|
|
295
|
-
|
|
296
|
-
|
|
297
|
-
|
|
298
|
-
|
|
299
|
-
|
|
300
|
-
|
|
301
|
-
$[59] = t30;
|
|
302
|
-
$[60] = t35;
|
|
303
|
-
$[61] = t36;
|
|
304
|
-
} else t36 = $[61];
|
|
305
|
-
let t37;
|
|
306
|
-
if ($[62] !== as || $[63] !== inputSizeCva || $[64] !== size) {
|
|
307
|
-
t37 = clsx(inputSizeCva({
|
|
308
|
-
size,
|
|
309
|
-
as
|
|
310
|
-
}), "flex items-center gap-input-gap-trailing-elements py-0! pl-0!");
|
|
311
|
-
$[62] = as;
|
|
312
|
-
$[63] = inputSizeCva;
|
|
313
|
-
$[64] = size;
|
|
314
|
-
$[65] = t37;
|
|
315
|
-
} else t37 = $[65];
|
|
316
|
-
let t38;
|
|
317
|
-
if ($[66] !== clearInput || $[67] !== isClearable || $[68] !== showClear) {
|
|
318
|
-
t38 = isClearable && /* @__PURE__ */ jsx(InputClear, {
|
|
319
|
-
onClear: clearInput,
|
|
320
|
-
show: showClear
|
|
321
|
-
});
|
|
322
|
-
$[66] = clearInput;
|
|
323
|
-
$[67] = isClearable;
|
|
324
|
-
$[68] = showClear;
|
|
325
|
-
$[69] = t38;
|
|
326
|
-
} else t38 = $[69];
|
|
327
|
-
let t39;
|
|
328
|
-
if ($[70] !== buttonProps || $[71] !== disableDropdown || $[72] !== disableManualEntry || $[73] !== isDisabled || $[74] !== pickerIcon) {
|
|
329
|
-
t39 = (!disableDropdown || disableManualEntry) && /* @__PURE__ */ jsx(InlineIconButton, {
|
|
330
|
-
label: "",
|
|
331
|
-
color: "secondary",
|
|
332
|
-
...buttonProps,
|
|
333
|
-
icon: pickerIcon,
|
|
334
|
-
isDisabled,
|
|
335
|
-
className: "border-0!",
|
|
336
|
-
"data-static-press-action": ""
|
|
337
|
-
});
|
|
338
|
-
$[70] = buttonProps;
|
|
339
|
-
$[71] = disableDropdown;
|
|
340
|
-
$[72] = disableManualEntry;
|
|
341
|
-
$[73] = isDisabled;
|
|
342
|
-
$[74] = pickerIcon;
|
|
343
|
-
$[75] = t39;
|
|
344
|
-
} else t39 = $[75];
|
|
345
|
-
let t40;
|
|
346
|
-
if ($[76] !== t37 || $[77] !== t38 || $[78] !== t39) {
|
|
347
|
-
t40 = /* @__PURE__ */ jsxs("div", {
|
|
348
|
-
className: t37,
|
|
349
|
-
children: [t38, t39]
|
|
350
|
-
});
|
|
351
|
-
$[76] = t37;
|
|
352
|
-
$[77] = t38;
|
|
353
|
-
$[78] = t39;
|
|
354
|
-
$[79] = t40;
|
|
355
|
-
} else t40 = $[79];
|
|
356
|
-
let t41;
|
|
357
|
-
if ($[80] !== focusWithinProps || $[81] !== groupProps || $[82] !== hoverProps || $[83] !== t15 || $[84] !== t16 || $[85] !== t17 || $[86] !== t18 || $[87] !== t19 || $[88] !== t20 || $[89] !== t21 || $[90] !== t22 || $[91] !== t23 || $[92] !== t24 || $[93] !== t25 || $[94] !== t26 || $[95] !== t36 || $[96] !== t40) {
|
|
358
|
-
t41 = /* @__PURE__ */ jsxs("div", {
|
|
359
|
-
ref: containerRef,
|
|
360
|
-
...groupProps,
|
|
361
|
-
...focusWithinProps,
|
|
362
|
-
...hoverProps,
|
|
363
|
-
className: t15,
|
|
364
|
-
"data-rac": "",
|
|
365
|
-
"data-datetime-input": "",
|
|
366
|
-
"data-hovered": t16,
|
|
367
|
-
"data-disabled": t17,
|
|
368
|
-
"data-is-disabled": t18,
|
|
369
|
-
"data-invalid": t19,
|
|
370
|
-
"data-is-empty": t20,
|
|
371
|
-
"data-focus-within": t21,
|
|
372
|
-
"data-focus-visible": t22,
|
|
373
|
-
"data-has-selection": t23,
|
|
374
|
-
"data-is-dirty": t24,
|
|
375
|
-
"data-is-required": t25,
|
|
376
|
-
"data-is-filled": t26,
|
|
377
|
-
children: [t36, t40]
|
|
378
|
-
});
|
|
379
|
-
$[80] = focusWithinProps;
|
|
380
|
-
$[81] = groupProps;
|
|
381
|
-
$[82] = hoverProps;
|
|
382
|
-
$[83] = t15;
|
|
383
|
-
$[84] = t16;
|
|
384
|
-
$[85] = t17;
|
|
385
|
-
$[86] = t18;
|
|
386
|
-
$[87] = t19;
|
|
387
|
-
$[88] = t20;
|
|
388
|
-
$[89] = t21;
|
|
389
|
-
$[90] = t22;
|
|
390
|
-
$[91] = t23;
|
|
391
|
-
$[92] = t24;
|
|
392
|
-
$[93] = t25;
|
|
393
|
-
$[94] = t26;
|
|
394
|
-
$[95] = t36;
|
|
395
|
-
$[96] = t40;
|
|
396
|
-
$[97] = t41;
|
|
397
|
-
} else t41 = $[97];
|
|
398
|
-
return t41;
|
|
184
|
+
}), /* @__PURE__ */ jsxs("div", {
|
|
185
|
+
className: clsx(inputSizeCva({
|
|
186
|
+
size,
|
|
187
|
+
as
|
|
188
|
+
}), "flex items-center gap-input-gap-trailing-elements py-0! pl-0!"),
|
|
189
|
+
children: [isClearable && /* @__PURE__ */ jsx(InputClear, {
|
|
190
|
+
onClear: clearInput,
|
|
191
|
+
show: showClear
|
|
192
|
+
}), (!disableDropdown || disableManualEntry) && /* @__PURE__ */ jsx(InlineIconButton, {
|
|
193
|
+
label: "",
|
|
194
|
+
color: "secondary",
|
|
195
|
+
...buttonProps,
|
|
196
|
+
icon: pickerIcon,
|
|
197
|
+
isDisabled,
|
|
198
|
+
className: "border-0!",
|
|
199
|
+
"data-static-press-action": ""
|
|
200
|
+
})]
|
|
201
|
+
})]
|
|
202
|
+
});
|
|
399
203
|
};
|
|
400
204
|
//#endregion
|
|
401
205
|
export { DatePickerInput };
|
|
@@ -1,76 +1,27 @@
|
|
|
1
1
|
import "../../../../config/i18n.js";
|
|
2
2
|
import { TextButton } from "../../../buttons/TextButton/TextButton.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 { useTranslation } from "react-i18next";
|
|
7
6
|
//#region src/components/inputs/DateTime/shared/DateTimeDialogFooter.tsx
|
|
8
|
-
var DateTimeDialogFooter = (
|
|
9
|
-
const $ = c(16);
|
|
10
|
-
const { isValid: t1, isDisabled: t2, onTodayPress, onApply } = t0;
|
|
11
|
-
const isValid = t1 === void 0 ? true : t1;
|
|
12
|
-
const isDisabled = t2 === void 0 ? false : t2;
|
|
7
|
+
var DateTimeDialogFooter = ({ isValid = true, isDisabled = false, onTodayPress, onApply }) => {
|
|
13
8
|
const { t } = useTranslation("ui");
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
t4 = clsx("flex shrink-0 items-center gap-2 bg-elevation-fill-default-2 px-4 py-3 md:border-elevation-outline-default-1 md:border-t md:bg-elevation-fill-default-1 md:py-1-5", t3);
|
|
18
|
-
$[0] = t3;
|
|
19
|
-
$[1] = t4;
|
|
20
|
-
} else t4 = $[1];
|
|
21
|
-
let t5;
|
|
22
|
-
if ($[2] !== isDisabled || $[3] !== onTodayPress || $[4] !== t) {
|
|
23
|
-
t5 = onTodayPress && /* @__PURE__ */ jsx(TextButton, {
|
|
9
|
+
return /* @__PURE__ */ jsxs("footer", {
|
|
10
|
+
className: clsx("flex shrink-0 items-center gap-2 bg-elevation-fill-default-2 px-4 py-3 md:border-elevation-outline-default-1 md:border-t md:bg-elevation-fill-default-1 md:py-1-5", onTodayPress ? "justify-between" : "justify-end"),
|
|
11
|
+
children: [onTodayPress && /* @__PURE__ */ jsx(TextButton, {
|
|
24
12
|
type: "button",
|
|
25
13
|
color: "primary",
|
|
26
14
|
isDisabled,
|
|
27
15
|
onPress: onTodayPress,
|
|
28
|
-
children: t(
|
|
29
|
-
})
|
|
30
|
-
$[2] = isDisabled;
|
|
31
|
-
$[3] = onTodayPress;
|
|
32
|
-
$[4] = t;
|
|
33
|
-
$[5] = t5;
|
|
34
|
-
} else t5 = $[5];
|
|
35
|
-
const t6 = !isValid;
|
|
36
|
-
let t7;
|
|
37
|
-
if ($[6] !== t) {
|
|
38
|
-
t7 = t(_temp2);
|
|
39
|
-
$[6] = t;
|
|
40
|
-
$[7] = t7;
|
|
41
|
-
} else t7 = $[7];
|
|
42
|
-
let t8;
|
|
43
|
-
if ($[8] !== onApply || $[9] !== t6 || $[10] !== t7) {
|
|
44
|
-
t8 = /* @__PURE__ */ jsx(TextButton, {
|
|
16
|
+
children: t(($) => $.ui.datePicker.today)
|
|
17
|
+
}), /* @__PURE__ */ jsx(TextButton, {
|
|
45
18
|
type: "button",
|
|
46
19
|
color: "secondary",
|
|
47
20
|
onPress: onApply,
|
|
48
|
-
isDisabled:
|
|
49
|
-
children:
|
|
50
|
-
})
|
|
51
|
-
|
|
52
|
-
$[9] = t6;
|
|
53
|
-
$[10] = t7;
|
|
54
|
-
$[11] = t8;
|
|
55
|
-
} else t8 = $[11];
|
|
56
|
-
let t9;
|
|
57
|
-
if ($[12] !== t4 || $[13] !== t5 || $[14] !== t8) {
|
|
58
|
-
t9 = /* @__PURE__ */ jsxs("footer", {
|
|
59
|
-
className: t4,
|
|
60
|
-
children: [t5, t8]
|
|
61
|
-
});
|
|
62
|
-
$[12] = t4;
|
|
63
|
-
$[13] = t5;
|
|
64
|
-
$[14] = t8;
|
|
65
|
-
$[15] = t9;
|
|
66
|
-
} else t9 = $[15];
|
|
67
|
-
return t9;
|
|
21
|
+
isDisabled: !isValid,
|
|
22
|
+
children: t(($_0) => $_0.ui.datePicker.save)
|
|
23
|
+
})]
|
|
24
|
+
});
|
|
68
25
|
};
|
|
69
|
-
function _temp($) {
|
|
70
|
-
return $.ui.datePicker.today;
|
|
71
|
-
}
|
|
72
|
-
function _temp2($_0) {
|
|
73
|
-
return $_0.ui.datePicker.save;
|
|
74
|
-
}
|
|
75
26
|
//#endregion
|
|
76
27
|
export { DateTimeDialogFooter };
|