@povio/ui 3.2.4-rc.3 → 3.3.0-rc.1
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/components/buttons/Button/button.cva.d.ts +1 -1
- package/dist/components/inputs/DateTime/DateRangePicker/DateRangePicker.d.ts +0 -1
- package/dist/components/inputs/DateTime/DateRangePicker/DateRangePicker.js +127 -142
- package/dist/components/inputs/DateTime/DateTimePicker/DateTimePicker.js +17 -2
- package/dist/components/inputs/DateTime/shared/DateField.js +87 -92
- package/dist/components/inputs/DateTime/shared/DatePickerInput.js +0 -2
- package/dist/components/inputs/DateTime/shared/TimePickerInput.js +134 -144
- package/dist/components/inputs/FormField/FormField.js +47 -34
- package/dist/components/inputs/FormField/formField.cva.d.ts +11 -0
- package/dist/components/inputs/FormField/formField.cva.js +16 -0
- package/dist/components/inputs/Input/NumberInput/NumberInput.js +1 -2
- package/dist/components/inputs/Input/NumberRangeInput/NumberRangeInput.js +1 -2
- package/dist/components/inputs/Selection/Autocomplete/QueryAutocomplete.js +2 -54
- package/dist/components/inputs/Selection/Select/QuerySelect.js +46 -99
- package/dist/components/inputs/Selection/shared/querySelect.utils.d.ts +0 -1
- package/dist/components/inputs/Selection/shared/querySelect.utils.js +0 -1
- package/dist/components/inputs/shared/input.cva.js +1 -1
- package/dist/components/shared/pagination/minWidth.cva.d.ts +1 -1
- package/dist/components/table/Table.d.ts +8 -2
- package/dist/components/table/Table.js +55 -33
- package/dist/components/table/TableColumnFilterInput.d.ts +9 -0
- package/dist/components/table/TableColumnFilterInput.js +108 -0
- package/dist/components/table/TableColumnFilterPlaceholder.d.ts +5 -0
- package/dist/components/table/TableColumnFilterPlaceholder.js +41 -0
- package/dist/components/table/TableColumnFilterRow.d.ts +16 -0
- package/dist/components/table/TableColumnFilterRow.js +68 -0
- package/dist/config/uiConfig.context.d.ts +0 -1
- package/dist/config/uiConfig.context.js +1 -2
- package/dist/config/uiOverrides.context.d.ts +1 -0
- package/dist/helpers/dynamicColumns.js +1 -2
- package/dist/index.d.ts +1 -1
- package/dist/index.js +2 -2
- package/dist/utils/date-time.utils.d.ts +1 -0
- package/dist/utils/date-time.utils.js +45 -21
- package/package.json +1 -1
- package/dist/components/inputs/DateTime/shared/useFirefoxDateSegmentSelectionGuard.d.ts +0 -2
- package/dist/components/inputs/DateTime/shared/useFirefoxDateSegmentSelectionGuard.js +0 -33
- package/dist/utils/intl.utils.d.ts +0 -7
- package/dist/utils/intl.utils.js +0 -38
- package/dist/utils/intl.utils.spec.d.ts +0 -1
|
@@ -11,7 +11,7 @@ import { useDateFieldState } from "react-stately";
|
|
|
11
11
|
//#region src/components/inputs/DateTime/shared/DateField.tsx
|
|
12
12
|
var omitNullValue = ({ value: _value, ...props }) => props;
|
|
13
13
|
var DateField = (t0) => {
|
|
14
|
-
const $ = c(
|
|
14
|
+
const $ = c(63);
|
|
15
15
|
const { ref, onClearChange, hidePlaceholder, isDisabled, disableManualEntry, dateGranularity: t1, isTimeOptional: t2, format, timeZone, segmentGroup, shouldAutoFixYear: t3, ...props } = t0;
|
|
16
16
|
const dateGranularity = t1 === void 0 ? "day" : t1;
|
|
17
17
|
const isTimeOptional = t2 === void 0 ? false : t2;
|
|
@@ -84,7 +84,7 @@ var DateField = (t0) => {
|
|
|
84
84
|
const segmentsToRender = t8;
|
|
85
85
|
const getSegmentNumber = _temp;
|
|
86
86
|
let t9;
|
|
87
|
-
if ($[16] !== isTimeOptional || $[17] !== props || $[18] !==
|
|
87
|
+
if ($[16] !== isTimeOptional || $[17] !== props || $[18] !== state) {
|
|
88
88
|
t9 = () => {
|
|
89
89
|
const monthSegment = state.segments.find(_temp2);
|
|
90
90
|
const daySegment = state.segments.find(_temp3);
|
|
@@ -94,14 +94,10 @@ var DateField = (t0) => {
|
|
|
94
94
|
const isMonthFilled = monthSegment && !monthSegment.isPlaceholder;
|
|
95
95
|
const isDayFilled = daySegment && !daySegment.isPlaceholder;
|
|
96
96
|
const isYearFilled = yearSegment && !yearSegment.isPlaceholder && yearSegment.text?.length > 0;
|
|
97
|
-
const isYearComplete = isYearFilled && yearSegment.text?.length === 4;
|
|
98
97
|
const isYearEmpty = yearSegment && !(parseInt(yearSegment.text) && yearSegment.text?.length === 4);
|
|
99
98
|
const isDateFilled = isMonthFilled && isDayFilled && isYearFilled;
|
|
100
99
|
const isHourEmpty = hourSegment && (hourSegment.isPlaceholder || Number.isNaN(parseInt(hourSegment.text ?? "", 10)));
|
|
101
100
|
const isMinuteEmpty = minuteSegment && (minuteSegment.isPlaceholder || Number.isNaN(parseInt(minuteSegment.text ?? "", 10)));
|
|
102
|
-
const month = getSegmentNumber(monthSegment);
|
|
103
|
-
const day = getSegmentNumber(daySegment);
|
|
104
|
-
const segmentYear = getSegmentNumber(yearSegment);
|
|
105
101
|
let correctedValue = null;
|
|
106
102
|
if (!isTimeOptional && isDateFilled && minuteSegment && isMinuteEmpty) {
|
|
107
103
|
let minute = minuteSegment?.value || 0;
|
|
@@ -119,23 +115,24 @@ var DateField = (t0) => {
|
|
|
119
115
|
}
|
|
120
116
|
state.setSegment("hour", hour);
|
|
121
117
|
}
|
|
122
|
-
if (
|
|
123
|
-
let
|
|
124
|
-
if (yearSegment?.text?.length && yearSegment?.text?.length === 2)
|
|
125
|
-
state.setSegment("year",
|
|
118
|
+
if (isMonthFilled && isDayFilled && isYearEmpty) {
|
|
119
|
+
let year = (/* @__PURE__ */ new Date()).getFullYear();
|
|
120
|
+
if (yearSegment?.text?.length && yearSegment?.text?.length === 2) year = parseInt(`20${yearSegment?.text}`);
|
|
121
|
+
state.setSegment("year", year);
|
|
122
|
+
const month = getSegmentNumber(monthSegment);
|
|
123
|
+
const day = getSegmentNumber(daySegment);
|
|
126
124
|
const hasDateSegments = month !== null && day !== null;
|
|
127
125
|
const hasTimeSegment = !!(hourSegment || minuteSegment);
|
|
128
|
-
if (state.value) correctedValue = state.value.set({ year
|
|
129
|
-
else if (hasDateSegments && hasTimeSegment) correctedValue = new CalendarDateTime(
|
|
130
|
-
else if (hasDateSegments) correctedValue = new CalendarDate(
|
|
126
|
+
if (state.value) correctedValue = state.value.set({ year });
|
|
127
|
+
else if (hasDateSegments && hasTimeSegment) correctedValue = new CalendarDateTime(year, month, day, getSegmentNumber(hourSegment) ?? 0, getSegmentNumber(minuteSegment) ?? 0);
|
|
128
|
+
else if (hasDateSegments) correctedValue = new CalendarDate(year, month, day);
|
|
131
129
|
}
|
|
132
|
-
if (isTimeOptional && !state.value && isMonthFilled && isDayFilled && isYearComplete && hourSegment?.isPlaceholder && minuteSegment?.isPlaceholder && month !== null && day !== null && segmentYear !== null) correctedValue = new CalendarDateTime(segmentYear, month, day, 0, 0, 0, 0);
|
|
133
130
|
const valueToCorrect = correctedValue ?? state.value;
|
|
134
131
|
if (!valueToCorrect) return;
|
|
135
|
-
const { year } = valueToCorrect;
|
|
136
|
-
if (
|
|
137
|
-
const
|
|
138
|
-
correctedValue = valueToCorrect.set({ year:
|
|
132
|
+
const { year: year_0 } = valueToCorrect;
|
|
133
|
+
if (year_0 >= 0 && year_0 <= 99) {
|
|
134
|
+
const correctedYear = year_0 <= 50 ? 2e3 + year_0 : 1900 + year_0;
|
|
135
|
+
correctedValue = valueToCorrect.set({ year: correctedYear });
|
|
139
136
|
}
|
|
140
137
|
if (correctedValue) {
|
|
141
138
|
state.setValue(correctedValue);
|
|
@@ -144,74 +141,72 @@ var DateField = (t0) => {
|
|
|
144
141
|
};
|
|
145
142
|
$[16] = isTimeOptional;
|
|
146
143
|
$[17] = props;
|
|
147
|
-
$[18] =
|
|
148
|
-
$[19] =
|
|
149
|
-
|
|
150
|
-
} else t9 = $[20];
|
|
144
|
+
$[18] = state;
|
|
145
|
+
$[19] = t9;
|
|
146
|
+
} else t9 = $[19];
|
|
151
147
|
const autoFixYear = t9;
|
|
152
148
|
let t10;
|
|
153
|
-
if ($[
|
|
149
|
+
if ($[20] !== autoFixYear || $[21] !== fieldProps || $[22] !== shouldAutoFixYear) {
|
|
154
150
|
t10 = (e) => {
|
|
155
|
-
if (
|
|
151
|
+
if (shouldAutoFixYear && !e.currentTarget.contains(e.relatedTarget)) autoFixYear();
|
|
156
152
|
fieldProps.onBlur?.(e);
|
|
157
153
|
};
|
|
158
|
-
$[
|
|
159
|
-
$[
|
|
160
|
-
$[
|
|
161
|
-
$[
|
|
162
|
-
|
|
163
|
-
} else t10 = $[25];
|
|
154
|
+
$[20] = autoFixYear;
|
|
155
|
+
$[21] = fieldProps;
|
|
156
|
+
$[22] = shouldAutoFixYear;
|
|
157
|
+
$[23] = t10;
|
|
158
|
+
} else t10 = $[23];
|
|
164
159
|
const handleBlur = t10;
|
|
165
160
|
let t11;
|
|
166
|
-
if ($[
|
|
161
|
+
if ($[24] !== autoFixYear || $[25] !== state) {
|
|
167
162
|
t11 = () => ({
|
|
168
163
|
clearField: () => {
|
|
169
164
|
state.setValue(null);
|
|
170
165
|
},
|
|
171
166
|
autoFixYear
|
|
172
167
|
});
|
|
173
|
-
$[
|
|
174
|
-
$[
|
|
175
|
-
$[
|
|
176
|
-
} else t11 = $[
|
|
168
|
+
$[24] = autoFixYear;
|
|
169
|
+
$[25] = state;
|
|
170
|
+
$[26] = t11;
|
|
171
|
+
} else t11 = $[26];
|
|
177
172
|
useImperativeHandle(ref, t11);
|
|
178
173
|
let t12;
|
|
179
|
-
if ($[
|
|
174
|
+
if ($[27] !== previousValueRef || $[28] !== props.value || $[29] !== state) {
|
|
180
175
|
t12 = () => {
|
|
181
176
|
if (previousValueRef.current != null && props.value == null && state.value !== null) state.setValue(null);
|
|
182
177
|
previousValueRef.current = props.value;
|
|
183
178
|
};
|
|
184
|
-
$[
|
|
185
|
-
$[
|
|
186
|
-
$[
|
|
187
|
-
$[
|
|
188
|
-
} else t12 = $[
|
|
179
|
+
$[27] = previousValueRef;
|
|
180
|
+
$[28] = props.value;
|
|
181
|
+
$[29] = state;
|
|
182
|
+
$[30] = t12;
|
|
183
|
+
} else t12 = $[30];
|
|
189
184
|
let t13;
|
|
190
|
-
if ($[
|
|
185
|
+
if ($[31] !== props.value || $[32] !== state) {
|
|
191
186
|
t13 = [props.value, state];
|
|
192
|
-
$[
|
|
193
|
-
$[
|
|
194
|
-
$[
|
|
195
|
-
} else t13 = $[
|
|
187
|
+
$[31] = props.value;
|
|
188
|
+
$[32] = state;
|
|
189
|
+
$[33] = t13;
|
|
190
|
+
} else t13 = $[33];
|
|
196
191
|
useEffect(t12, t13);
|
|
197
192
|
let t14;
|
|
198
193
|
let t15;
|
|
199
|
-
if ($[
|
|
194
|
+
if ($[34] !== onClearChange || $[35] !== state.segments) {
|
|
200
195
|
t14 = () => {
|
|
201
196
|
onClearChange?.(state.segments.some(_temp7));
|
|
202
197
|
};
|
|
203
198
|
t15 = [state.segments, onClearChange];
|
|
204
|
-
$[
|
|
205
|
-
$[
|
|
206
|
-
$[
|
|
207
|
-
$[
|
|
199
|
+
$[34] = onClearChange;
|
|
200
|
+
$[35] = state.segments;
|
|
201
|
+
$[36] = t14;
|
|
202
|
+
$[37] = t15;
|
|
208
203
|
} else {
|
|
209
|
-
t14 = $[
|
|
210
|
-
t15 = $[
|
|
204
|
+
t14 = $[36];
|
|
205
|
+
t15 = $[37];
|
|
211
206
|
}
|
|
212
207
|
useEffect(t14, t15);
|
|
213
208
|
let t16;
|
|
214
|
-
if ($[
|
|
209
|
+
if ($[38] !== disableManualEntry || $[39] !== format || $[40] !== state.value || $[41] !== timeZone) {
|
|
215
210
|
const getFormattedDisplayValue = () => {
|
|
216
211
|
if (!disableManualEntry) return null;
|
|
217
212
|
if (!format) return null;
|
|
@@ -222,15 +217,15 @@ var DateField = (t0) => {
|
|
|
222
217
|
return formattedDate.toFormat(format);
|
|
223
218
|
};
|
|
224
219
|
t16 = getFormattedDisplayValue();
|
|
225
|
-
$[
|
|
226
|
-
$[
|
|
227
|
-
$[
|
|
228
|
-
$[
|
|
229
|
-
$[
|
|
230
|
-
} else t16 = $[
|
|
220
|
+
$[38] = disableManualEntry;
|
|
221
|
+
$[39] = format;
|
|
222
|
+
$[40] = state.value;
|
|
223
|
+
$[41] = timeZone;
|
|
224
|
+
$[42] = t16;
|
|
225
|
+
} else t16 = $[42];
|
|
231
226
|
const formattedDisplayValue = t16;
|
|
232
227
|
let t17;
|
|
233
|
-
if ($[
|
|
228
|
+
if ($[43] !== hidePlaceholder || $[44] !== isDisabled || $[45] !== segmentGroup || $[46] !== segmentsToRender || $[47] !== state) {
|
|
234
229
|
t17 = /* @__PURE__ */ jsx(Fragment, { children: segmentsToRender.map((segment_7, i) => /* @__PURE__ */ jsx(DateSegmentItem, {
|
|
235
230
|
segment: segment_7,
|
|
236
231
|
segmentGroup,
|
|
@@ -238,52 +233,52 @@ var DateField = (t0) => {
|
|
|
238
233
|
isDisabled,
|
|
239
234
|
hidePlaceholder
|
|
240
235
|
}, i)) });
|
|
241
|
-
$[
|
|
242
|
-
$[
|
|
243
|
-
$[
|
|
244
|
-
$[
|
|
245
|
-
$[
|
|
246
|
-
$[
|
|
247
|
-
} else t17 = $[
|
|
236
|
+
$[43] = hidePlaceholder;
|
|
237
|
+
$[44] = isDisabled;
|
|
238
|
+
$[45] = segmentGroup;
|
|
239
|
+
$[46] = segmentsToRender;
|
|
240
|
+
$[47] = state;
|
|
241
|
+
$[48] = t17;
|
|
242
|
+
} else t17 = $[48];
|
|
248
243
|
let fieldContent = t17;
|
|
249
244
|
if (formattedDisplayValue) {
|
|
250
245
|
const t18 = isDisabled && "text-interactive-text-secondary-disabled";
|
|
251
246
|
let t19;
|
|
252
|
-
if ($[
|
|
247
|
+
if ($[49] !== t18) {
|
|
253
248
|
t19 = clsx("select-none", t18);
|
|
254
|
-
$[
|
|
255
|
-
$[
|
|
256
|
-
} else t19 = $[
|
|
249
|
+
$[49] = t18;
|
|
250
|
+
$[50] = t19;
|
|
251
|
+
} else t19 = $[50];
|
|
257
252
|
let t20;
|
|
258
|
-
if ($[
|
|
253
|
+
if ($[51] !== formattedDisplayValue || $[52] !== t19) {
|
|
259
254
|
t20 = /* @__PURE__ */ jsx("span", {
|
|
260
255
|
className: t19,
|
|
261
256
|
children: formattedDisplayValue
|
|
262
257
|
});
|
|
263
|
-
$[
|
|
264
|
-
$[
|
|
265
|
-
$[
|
|
266
|
-
} else t20 = $[
|
|
258
|
+
$[51] = formattedDisplayValue;
|
|
259
|
+
$[52] = t19;
|
|
260
|
+
$[53] = t20;
|
|
261
|
+
} else t20 = $[53];
|
|
267
262
|
fieldContent = t20;
|
|
268
263
|
}
|
|
269
264
|
const t18 = disableManualEntry && "pointer-events-none";
|
|
270
265
|
let t19;
|
|
271
|
-
if ($[
|
|
266
|
+
if ($[54] !== t18) {
|
|
272
267
|
t19 = clsx("relative w-full", t18);
|
|
273
|
-
$[
|
|
274
|
-
$[
|
|
275
|
-
} else t19 = $[
|
|
268
|
+
$[54] = t18;
|
|
269
|
+
$[55] = t19;
|
|
270
|
+
} else t19 = $[55];
|
|
276
271
|
let t20;
|
|
277
|
-
if ($[
|
|
272
|
+
if ($[56] !== fieldContent) {
|
|
278
273
|
t20 = /* @__PURE__ */ jsx("div", {
|
|
279
274
|
className: "flex",
|
|
280
275
|
children: fieldContent
|
|
281
276
|
});
|
|
282
|
-
$[
|
|
283
|
-
$[
|
|
284
|
-
} else t20 = $[
|
|
277
|
+
$[56] = fieldContent;
|
|
278
|
+
$[57] = t20;
|
|
279
|
+
} else t20 = $[57];
|
|
285
280
|
let t21;
|
|
286
|
-
if ($[
|
|
281
|
+
if ($[58] !== fieldProps || $[59] !== handleBlur || $[60] !== t19 || $[61] !== t20) {
|
|
287
282
|
t21 = /* @__PURE__ */ jsx("div", {
|
|
288
283
|
...fieldProps,
|
|
289
284
|
ref: dataFieldRef,
|
|
@@ -291,12 +286,12 @@ var DateField = (t0) => {
|
|
|
291
286
|
className: t19,
|
|
292
287
|
children: t20
|
|
293
288
|
});
|
|
294
|
-
$[
|
|
295
|
-
$[
|
|
296
|
-
$[
|
|
297
|
-
$[
|
|
298
|
-
$[
|
|
299
|
-
} else t21 = $[
|
|
289
|
+
$[58] = fieldProps;
|
|
290
|
+
$[59] = handleBlur;
|
|
291
|
+
$[60] = t19;
|
|
292
|
+
$[61] = t20;
|
|
293
|
+
$[62] = t21;
|
|
294
|
+
} else t21 = $[62];
|
|
300
295
|
return t21;
|
|
301
296
|
};
|
|
302
297
|
function _temp(segment_0) {
|
|
@@ -8,7 +8,6 @@ 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";
|
|
12
11
|
import { InputClear } from "../../shared/InputClear.js";
|
|
13
12
|
import { c } from "react/compiler-runtime";
|
|
14
13
|
import { Fragment, jsx, jsxs } from "react/jsx-runtime";
|
|
@@ -59,7 +58,6 @@ var DatePickerInput = (t0) => {
|
|
|
59
58
|
const dateFieldRef = useRef(null);
|
|
60
59
|
const endDateFieldRef = useRef(null);
|
|
61
60
|
const containerRef = useRef(null);
|
|
62
|
-
useFirefoxDateSegmentSelectionGuard(containerRef);
|
|
63
61
|
const t8 = isValueControlled ? fieldValue ?? null : fieldProps.value ?? null;
|
|
64
62
|
let t9;
|
|
65
63
|
if ($[4] !== autoFixYear || $[5] !== fieldProps || $[6] !== t8) {
|