@aspprev/versi-ds 0.4.4 → 0.4.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/{chunk-CLXCB6LY.js → chunk-47GMEVB5.js} +84 -19
- package/dist/chunk-47GMEVB5.js.map +1 -0
- package/dist/{chunk-EA5F5GSP.js → chunk-DD54XX2X.js} +45 -37
- package/dist/chunk-DD54XX2X.js.map +1 -0
- package/dist/core.d.ts +1 -1
- package/dist/core.js +1 -1
- package/dist/forms.d.ts +0 -2
- package/dist/forms.js +1 -1
- package/dist/index.js +2 -2
- package/dist/manifest.json +3 -3
- package/dist/styles.css +1 -1
- package/package.json +1 -1
- package/dist/chunk-CLXCB6LY.js.map +0 -1
- package/dist/chunk-EA5F5GSP.js.map +0 -1
|
@@ -2297,16 +2297,23 @@ var MONTHS = [
|
|
|
2297
2297
|
];
|
|
2298
2298
|
var formatDateForInput = (date, selectionMode = "day") => {
|
|
2299
2299
|
if (!date || !isValid(date)) return "";
|
|
2300
|
-
return format(
|
|
2300
|
+
return format(
|
|
2301
|
+
date,
|
|
2302
|
+
selectionMode === "year" ? "yyyy" : selectionMode === "month" ? "MM/yyyy" : "dd/MM/yyyy"
|
|
2303
|
+
);
|
|
2301
2304
|
};
|
|
2302
2305
|
var formatInputValue = (value, selectionMode = "day") => {
|
|
2303
|
-
const digits = value.replace(/\D/g, "").slice(0, selectionMode === "year" ? 4 : 8);
|
|
2306
|
+
const digits = value.replace(/\D/g, "").slice(0, selectionMode === "year" ? 4 : selectionMode === "month" ? 6 : 8);
|
|
2304
2307
|
if (selectionMode === "year") return digits;
|
|
2308
|
+
if (selectionMode === "month") {
|
|
2309
|
+
if (digits.length <= 2) return digits;
|
|
2310
|
+
return `${digits.slice(0, 2)}/${digits.slice(2)}`;
|
|
2311
|
+
}
|
|
2305
2312
|
if (digits.length <= 2) return digits;
|
|
2306
2313
|
if (digits.length <= 4) return `${digits.slice(0, 2)}/${digits.slice(2)}`;
|
|
2307
2314
|
return `${digits.slice(0, 2)}/${digits.slice(2, 4)}/${digits.slice(4)}`;
|
|
2308
2315
|
};
|
|
2309
|
-
var parseDateValue = (value) => {
|
|
2316
|
+
var parseDateValue = (value, selectionMode = "day") => {
|
|
2310
2317
|
if (!value) return null;
|
|
2311
2318
|
if (value instanceof Date) {
|
|
2312
2319
|
return isValid(value) ? value : null;
|
|
@@ -2314,6 +2321,21 @@ var parseDateValue = (value) => {
|
|
|
2314
2321
|
if (typeof value === "string") {
|
|
2315
2322
|
const trimmedValue = value.trim();
|
|
2316
2323
|
if (!trimmedValue) return null;
|
|
2324
|
+
if (selectionMode === "year" && /^\d{4}$/.test(trimmedValue)) {
|
|
2325
|
+
const year = Number(trimmedValue);
|
|
2326
|
+
const parsedYear = new Date(year, 0, 1);
|
|
2327
|
+
return isValid(parsedYear) && parsedYear.getFullYear() === year ? parsedYear : null;
|
|
2328
|
+
}
|
|
2329
|
+
if (selectionMode === "month") {
|
|
2330
|
+
const monthMatch = /^(\d{2})\/(\d{4})$/.exec(trimmedValue);
|
|
2331
|
+
if (monthMatch) {
|
|
2332
|
+
const month = Number(monthMatch[1]);
|
|
2333
|
+
const year = Number(monthMatch[2]);
|
|
2334
|
+
if (month < 1 || month > 12) return null;
|
|
2335
|
+
const parsedMonth = new Date(year, month - 1, 1);
|
|
2336
|
+
return isValid(parsedMonth) && parsedMonth.getFullYear() === year ? parsedMonth : null;
|
|
2337
|
+
}
|
|
2338
|
+
}
|
|
2317
2339
|
const parsedPtBr = parse(trimmedValue, "dd/MM/yyyy", /* @__PURE__ */ new Date());
|
|
2318
2340
|
if (isValid(parsedPtBr) && format(parsedPtBr, "dd/MM/yyyy") === trimmedValue) {
|
|
2319
2341
|
return parsedPtBr;
|
|
@@ -2329,7 +2351,7 @@ var UnifiedDatePicker = ({
|
|
|
2329
2351
|
onChange,
|
|
2330
2352
|
onBlur,
|
|
2331
2353
|
label,
|
|
2332
|
-
placeholder
|
|
2354
|
+
placeholder,
|
|
2333
2355
|
minDate = addYears(/* @__PURE__ */ new Date(), -120),
|
|
2334
2356
|
maxDate = addYears(/* @__PURE__ */ new Date(), 120),
|
|
2335
2357
|
isDisabled = false,
|
|
@@ -2338,7 +2360,6 @@ var UnifiedDatePicker = ({
|
|
|
2338
2360
|
error,
|
|
2339
2361
|
errorText,
|
|
2340
2362
|
helperText,
|
|
2341
|
-
defaultView = "days",
|
|
2342
2363
|
navigationVariant = "drilldown",
|
|
2343
2364
|
selectionMode = "day",
|
|
2344
2365
|
showAdjacentDays = true,
|
|
@@ -2351,34 +2372,42 @@ var UnifiedDatePicker = ({
|
|
|
2351
2372
|
const hasFormikField = Boolean(formik && name);
|
|
2352
2373
|
const formikRawValue = hasFormikField && formik ? getIn(formik.values, name) : void 0;
|
|
2353
2374
|
const selectedDate = useMemo2(
|
|
2354
|
-
() => parseDateValue(
|
|
2355
|
-
|
|
2375
|
+
() => parseDateValue(
|
|
2376
|
+
hasFormikField ? formikRawValue : value,
|
|
2377
|
+
selectionMode
|
|
2378
|
+
),
|
|
2379
|
+
[formikRawValue, hasFormikField, selectionMode, value]
|
|
2356
2380
|
);
|
|
2357
2381
|
const formikTouched = hasFormikField && formik ? Boolean(getIn(formik.touched, name)) : false;
|
|
2358
2382
|
const formikError = hasFormikField && formik ? getIn(formik.errors, name) : void 0;
|
|
2359
2383
|
const isFieldDisabled = disabled || isDisabled;
|
|
2360
|
-
const resolvedPlaceholder = selectionMode === "year" ? "aaaa" :
|
|
2384
|
+
const resolvedPlaceholder = placeholder ?? (selectionMode === "year" ? "aaaa" : selectionMode === "month" ? "mm/aaaa" : "dd/mm/aaaa");
|
|
2361
2385
|
const [isOpen, setIsOpen] = useState5(false);
|
|
2362
2386
|
const [isEditing, setIsEditing] = useState5(false);
|
|
2363
2387
|
const [draftValue, setDraftValue] = useState5(
|
|
2364
2388
|
formatDateForInput(selectedDate, selectionMode)
|
|
2365
2389
|
);
|
|
2366
2390
|
const [viewDate, setViewDate] = useState5(getSafeViewDate(selectedDate));
|
|
2367
|
-
const [mode, setMode] = useState5(
|
|
2391
|
+
const [mode, setMode] = useState5(
|
|
2392
|
+
selectionMode === "year" ? "years" : selectionMode === "month" ? "months" : "days"
|
|
2393
|
+
);
|
|
2368
2394
|
const [inputError, setInputError] = useState5(null);
|
|
2369
2395
|
const containerRef = useRef5(null);
|
|
2370
2396
|
const inputRef = useRef5(null);
|
|
2371
2397
|
const dropdownRef = useRef5(null);
|
|
2372
2398
|
const calendarId = `date-picker-${useId3()}`;
|
|
2373
2399
|
const wasOpenRef = useRef5(false);
|
|
2400
|
+
const skipFocusRestoreRef = useRef5(false);
|
|
2401
|
+
const suppressOpenOnFocusRef = useRef5(false);
|
|
2374
2402
|
const rafRef = useRef5(null);
|
|
2375
2403
|
const [isMounted, setIsMounted] = useState5(false);
|
|
2376
2404
|
const [panelNeedsScroll, setPanelNeedsScroll] = useState5(false);
|
|
2377
2405
|
const [dropdownStyle, setDropdownStyle] = useState5({});
|
|
2378
2406
|
useEffect4(() => {
|
|
2379
|
-
if (wasOpenRef.current && !isOpen && dropdownRef.current?.contains(document.activeElement)) {
|
|
2407
|
+
if (wasOpenRef.current && !isOpen && !skipFocusRestoreRef.current && dropdownRef.current?.contains(document.activeElement)) {
|
|
2380
2408
|
inputRef.current?.focus();
|
|
2381
2409
|
}
|
|
2410
|
+
skipFocusRestoreRef.current = false;
|
|
2382
2411
|
wasOpenRef.current = isOpen;
|
|
2383
2412
|
}, [isOpen]);
|
|
2384
2413
|
useEffect4(() => {
|
|
@@ -2393,10 +2422,11 @@ var UnifiedDatePicker = ({
|
|
|
2393
2422
|
useEffect4(() => {
|
|
2394
2423
|
if (!isOpen) return;
|
|
2395
2424
|
setMode(
|
|
2396
|
-
selectionMode === "year" ? "years" : selectionMode === "month" ? "months" :
|
|
2425
|
+
selectionMode === "year" ? "years" : selectionMode === "month" ? "months" : "days"
|
|
2397
2426
|
);
|
|
2398
2427
|
const onMouseDown = (event) => {
|
|
2399
2428
|
if (!containerRef.current?.contains(event.target) && !dropdownRef.current?.contains(event.target)) {
|
|
2429
|
+
skipFocusRestoreRef.current = true;
|
|
2400
2430
|
setIsOpen(false);
|
|
2401
2431
|
}
|
|
2402
2432
|
};
|
|
@@ -2409,7 +2439,7 @@ var UnifiedDatePicker = ({
|
|
|
2409
2439
|
document.removeEventListener("mousedown", onMouseDown);
|
|
2410
2440
|
document.removeEventListener("keydown", onKeyDown);
|
|
2411
2441
|
};
|
|
2412
|
-
}, [
|
|
2442
|
+
}, [isOpen, navigationVariant, selectionMode]);
|
|
2413
2443
|
useEffect4(() => {
|
|
2414
2444
|
if (!isOpen) return;
|
|
2415
2445
|
const updateDropdownPosition = () => {
|
|
@@ -2463,7 +2493,7 @@ var UnifiedDatePicker = ({
|
|
|
2463
2493
|
window.removeEventListener("resize", scheduleDropdownPosition);
|
|
2464
2494
|
window.removeEventListener("scroll", scheduleDropdownPosition, true);
|
|
2465
2495
|
};
|
|
2466
|
-
}, [isOpen,
|
|
2496
|
+
}, [isOpen, navigationVariant, viewDate, draftValue]);
|
|
2467
2497
|
const syncValue = (nextDate) => {
|
|
2468
2498
|
if (hasFormikField && formik) {
|
|
2469
2499
|
formik.setFieldValue(name, nextDate);
|
|
@@ -2482,6 +2512,8 @@ var UnifiedDatePicker = ({
|
|
|
2482
2512
|
};
|
|
2483
2513
|
const closeCalendar = () => {
|
|
2484
2514
|
setIsOpen(false);
|
|
2515
|
+
if (document.activeElement === inputRef.current) return;
|
|
2516
|
+
suppressOpenOnFocusRef.current = true;
|
|
2485
2517
|
inputRef.current?.focus();
|
|
2486
2518
|
};
|
|
2487
2519
|
const getDaysInView = () => {
|
|
@@ -2599,6 +2631,30 @@ var UnifiedDatePicker = ({
|
|
|
2599
2631
|
setInputError(null);
|
|
2600
2632
|
return;
|
|
2601
2633
|
}
|
|
2634
|
+
if (selectionMode === "month") {
|
|
2635
|
+
if (normalizedValue.length < 7) {
|
|
2636
|
+
syncValue(null);
|
|
2637
|
+
setInputError("M\xEAs incompleto");
|
|
2638
|
+
return;
|
|
2639
|
+
}
|
|
2640
|
+
const parsedMonth = parseDateValue(normalizedValue, selectionMode);
|
|
2641
|
+
if (!parsedMonth) {
|
|
2642
|
+
syncValue(null);
|
|
2643
|
+
setInputError("M\xEAs inv\xE1lido");
|
|
2644
|
+
return;
|
|
2645
|
+
}
|
|
2646
|
+
const monthDisabled = isBefore(endOfMonth(parsedMonth), startOfDay(minDate)) || isAfter(startOfMonth(parsedMonth), startOfDay(maxDate));
|
|
2647
|
+
if (monthDisabled) {
|
|
2648
|
+
syncValue(null);
|
|
2649
|
+
setInputError("M\xEAs fora do intervalo permitido");
|
|
2650
|
+
return;
|
|
2651
|
+
}
|
|
2652
|
+
const nextDate = isBefore(parsedMonth, minDate) ? minDate : isAfter(parsedMonth, maxDate) ? maxDate : parsedMonth;
|
|
2653
|
+
syncValue(nextDate);
|
|
2654
|
+
setViewDate(nextDate);
|
|
2655
|
+
setInputError(null);
|
|
2656
|
+
return;
|
|
2657
|
+
}
|
|
2602
2658
|
if (selectionMode === "year") {
|
|
2603
2659
|
if (normalizedValue.length < 4) {
|
|
2604
2660
|
syncValue(null);
|
|
@@ -2620,7 +2676,7 @@ var UnifiedDatePicker = ({
|
|
|
2620
2676
|
setInputError("Data incompleta");
|
|
2621
2677
|
return;
|
|
2622
2678
|
}
|
|
2623
|
-
const parsedDate = parseDateValue(normalizedValue);
|
|
2679
|
+
const parsedDate = parseDateValue(normalizedValue, selectionMode);
|
|
2624
2680
|
if (!parsedDate) {
|
|
2625
2681
|
syncValue(null);
|
|
2626
2682
|
setInputError("Data invalida");
|
|
@@ -2707,27 +2763,34 @@ var UnifiedDatePicker = ({
|
|
|
2707
2763
|
type: "text",
|
|
2708
2764
|
inputMode: "numeric",
|
|
2709
2765
|
autoComplete: "off",
|
|
2710
|
-
maxLength: selectionMode === "year" ? 4 : 10,
|
|
2766
|
+
maxLength: selectionMode === "year" ? 4 : selectionMode === "month" ? 7 : 10,
|
|
2711
2767
|
disabled: isFieldDisabled,
|
|
2712
2768
|
placeholder: resolvedPlaceholder,
|
|
2713
2769
|
value: draftValue,
|
|
2714
2770
|
onClick: openCalendar,
|
|
2715
2771
|
onFocus: () => {
|
|
2716
2772
|
setIsEditing(true);
|
|
2717
|
-
|
|
2773
|
+
const suppressOpen = suppressOpenOnFocusRef.current;
|
|
2774
|
+
suppressOpenOnFocusRef.current = false;
|
|
2775
|
+
if (!suppressOpen) openCalendar();
|
|
2718
2776
|
},
|
|
2719
2777
|
onChange: (event) => {
|
|
2720
2778
|
const nextValue = formatInputValue(event.target.value, selectionMode);
|
|
2721
2779
|
setDraftValue(nextValue);
|
|
2722
2780
|
setInputError(null);
|
|
2723
|
-
|
|
2724
|
-
|
|
2781
|
+
const expectedLength = selectionMode === "year" ? 4 : selectionMode === "month" ? 7 : 10;
|
|
2782
|
+
if (nextValue.length === expectedLength) {
|
|
2783
|
+
const parsedDate = parseDateValue(nextValue, selectionMode);
|
|
2725
2784
|
if (parsedDate) {
|
|
2726
2785
|
setViewDate(parsedDate);
|
|
2727
2786
|
}
|
|
2728
2787
|
}
|
|
2729
2788
|
},
|
|
2730
2789
|
onBlur: (event) => {
|
|
2790
|
+
const nextFocusedElement = event.relatedTarget;
|
|
2791
|
+
if (nextFocusedElement && dropdownRef.current?.contains(nextFocusedElement)) {
|
|
2792
|
+
return;
|
|
2793
|
+
}
|
|
2731
2794
|
setIsEditing(false);
|
|
2732
2795
|
commitDraftValue(event.target.value);
|
|
2733
2796
|
onBlur?.(event);
|
|
@@ -2951,6 +3014,7 @@ var UnifiedDatePicker = ({
|
|
|
2951
3014
|
className: classNames6(
|
|
2952
3015
|
"rounded-sm py-1 text-xs capitalize transition-colors",
|
|
2953
3016
|
{
|
|
3017
|
+
"cursor-not-allowed opacity-30": monthDisabled,
|
|
2954
3018
|
"border border-selection-border bg-selection-background font-semibold text-selection-content": selected,
|
|
2955
3019
|
"text-content-primary hover:bg-primary-1/10": !selected
|
|
2956
3020
|
}
|
|
@@ -2983,6 +3047,7 @@ var UnifiedDatePicker = ({
|
|
|
2983
3047
|
className: classNames6(
|
|
2984
3048
|
"rounded-sm py-1 text-xs transition-colors",
|
|
2985
3049
|
{
|
|
3050
|
+
"cursor-not-allowed opacity-30": yearDisabled,
|
|
2986
3051
|
"border border-selection-border bg-selection-background font-semibold text-selection-content": selected,
|
|
2987
3052
|
"text-content-primary hover:bg-primary-1/10": !selected
|
|
2988
3053
|
}
|
|
@@ -3745,4 +3810,4 @@ export {
|
|
|
3745
3810
|
RadioCardGroup,
|
|
3746
3811
|
OtpCodeInput_default
|
|
3747
3812
|
};
|
|
3748
|
-
//# sourceMappingURL=chunk-
|
|
3813
|
+
//# sourceMappingURL=chunk-47GMEVB5.js.map
|