@viasat/beam-react 2.47.1 → 2.48.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/CHANGELOG.md +20 -0
- package/assets/DateField.css +1 -1
- package/assets/card.css +1 -1
- package/chunks/{DateField.Segment.C2qoaY0Z.js → DateField.Segment.BVe6TzWY.js} +48 -45
- package/chunks/DateField.Segment.CnDrSK1L.js +1 -0
- package/lib/wip/DateField/DateField.Segment.cjs.js +1 -1
- package/lib/wip/DateField/DateField.Segment.d.ts +1 -1
- package/lib/wip/DateField/DateField.Segment.es.js +1 -1
- package/lib/wip/DateField/DateField.Segments.cjs.js +1 -1
- package/lib/wip/DateField/DateField.Segments.es.js +36 -31
- package/lib/wip/DateField/DateField.cjs.js +1 -1
- package/lib/wip/DateField/DateField.es.js +185 -162
- package/lib/wip/DateField/DateField.types.d.ts +22 -3
- package/lib/wip/DateField/DateField.utils.cjs.js +1 -1
- package/lib/wip/DateField/DateField.utils.d.ts +44 -22
- package/lib/wip/DateField/DateField.utils.es.js +57 -49
- package/lib/wip/DateField/useDateFieldFocus.cjs.js +1 -1
- package/lib/wip/DateField/useDateFieldFocus.es.js +56 -49
- package/lib/wip/DateField/useDateFieldValidity.d.ts +5 -3
- package/lib/wip/DateField/useDateFieldValue.cjs.js +1 -1
- package/lib/wip/DateField/useDateFieldValue.d.ts +29 -10
- package/lib/wip/DateField/useDateFieldValue.es.js +90 -70
- package/package.json +7 -7
- package/chunks/DateField.Segment.CY0jg03_.js +0 -1
|
@@ -1,78 +1,86 @@
|
|
|
1
|
-
import { SEGMENT_MAX_LENGTH as
|
|
2
|
-
const
|
|
3
|
-
day: s,
|
|
4
|
-
month: l,
|
|
5
|
-
year: 9999
|
|
6
|
-
}, g = (e, t, n) => Math.min(n, Math.max(t, e)), d = (e, t) => ((e - 1) % t + t) % t + 1, m = 2024, N = (e, t) => t == null ? 31 : new Date(e ?? m, t, 0).getDate(), M = () => {
|
|
1
|
+
import { SEGMENT_MAX_LENGTH as u } from "./DateField.validation.es.js";
|
|
2
|
+
const c = 31, s = 12, d = 1, y = 9999, f = (e, t, n) => Math.min(n, Math.max(t, e)), S = (e, t) => ((e - 1) % t + t) % t + 1, h = 2024, T = (e, t) => t == null ? 31 : new Date(e ?? h, t, 0).getDate(), A = () => {
|
|
7
3
|
const e = /* @__PURE__ */ new Date();
|
|
8
4
|
return { day: e.getDate(), month: e.getMonth() + 1, year: e.getFullYear() };
|
|
9
|
-
},
|
|
5
|
+
}, o = (e) => e instanceof Date && !Number.isNaN(e.getTime()), Y = (e, t, n, r) => {
|
|
10
6
|
if (n === "min") return e === "year" ? null : 1;
|
|
11
7
|
if (n === "max")
|
|
12
|
-
return e === "year" ? null : e === "day" ? r.daysInMonth :
|
|
8
|
+
return e === "year" ? null : e === "day" ? r.daysInMonth : s;
|
|
13
9
|
if (t == null) {
|
|
14
10
|
if (e === "year") return r.today.year;
|
|
15
|
-
const
|
|
16
|
-
return n > 0 ? 1 :
|
|
11
|
+
const g = e === "day" ? c : s;
|
|
12
|
+
return n > 0 ? 1 : g;
|
|
17
13
|
}
|
|
18
|
-
if (e === "year") return
|
|
19
|
-
const
|
|
20
|
-
return
|
|
21
|
-
},
|
|
14
|
+
if (e === "year") return f(t + n, d, y);
|
|
15
|
+
const l = e === "day" ? c : s;
|
|
16
|
+
return S(t + n, l);
|
|
17
|
+
}, M = { day: "", month: "", year: "" }, m = (e) => {
|
|
22
18
|
const { day: t, month: n, year: r } = e;
|
|
23
19
|
if (t == null || n == null || r == null) return null;
|
|
24
|
-
const
|
|
25
|
-
return
|
|
26
|
-
},
|
|
27
|
-
|
|
20
|
+
const l = new Date(r, n - 1, t);
|
|
21
|
+
return l.setFullYear(r), Number.isNaN(l.getTime()) || l.getFullYear() !== r || l.getMonth() !== n - 1 || l.getDate() !== t ? null : l;
|
|
22
|
+
}, F = (e, t) => e == null && t == null ? !0 : e == null || t == null ? !1 : e.getTime() === t.getTime(), a = (e) => e.getFullYear() * 1e4 + (e.getMonth() + 1) * 100 + e.getDate(), w = (e) => o(e) ? a(e) : null, E = (e, t, n) => {
|
|
23
|
+
const r = a(e);
|
|
24
|
+
return !(o(t) && r < a(t) || o(n) && r > a(n));
|
|
25
|
+
}, N = (e, t) => o(e) && o(t) && a(e) > a(t), R = (e, t, n) => {
|
|
26
|
+
if (N(t, n)) return e;
|
|
27
|
+
const r = a(e);
|
|
28
|
+
return o(t) && r < a(t) ? new Date(t.getFullYear(), t.getMonth(), t.getDate()) : o(n) && r > a(n) ? new Date(n.getFullYear(), n.getMonth(), n.getDate()) : e;
|
|
29
|
+
}, _ = (e) => {
|
|
30
|
+
if (!o(e)) return "";
|
|
28
31
|
const t = String(e.getFullYear()).padStart(4, "0"), n = String(e.getMonth() + 1).padStart(2, "0"), r = String(e.getDate()).padStart(2, "0");
|
|
29
32
|
return `${t}-${n}-${r}`;
|
|
30
|
-
},
|
|
33
|
+
}, D = (e) => e.filter(
|
|
31
34
|
(t) => t.type !== "literal"
|
|
32
|
-
).map((t) => t.type),
|
|
35
|
+
).map((t) => t.type), I = (e) => o(e) ? {
|
|
33
36
|
day: String(e.getDate()).padStart(2, "0"),
|
|
34
37
|
month: String(e.getMonth() + 1).padStart(2, "0"),
|
|
35
38
|
year: String(e.getFullYear()).padStart(4, "0")
|
|
36
|
-
} :
|
|
37
|
-
if (t === "" || e === "year" && t.length <
|
|
39
|
+
} : M, i = (e, t) => {
|
|
40
|
+
if (t === "" || e === "year" && t.length < u.year) return null;
|
|
38
41
|
const n = parseInt(t, 10);
|
|
39
42
|
return Number.isNaN(n) || n === 0 ? null : n;
|
|
40
|
-
},
|
|
41
|
-
day:
|
|
42
|
-
month:
|
|
43
|
-
year:
|
|
44
|
-
}),
|
|
45
|
-
displayValue: t.padStart(
|
|
43
|
+
}, V = (e) => m({
|
|
44
|
+
day: i("day", e.day),
|
|
45
|
+
month: i("month", e.month),
|
|
46
|
+
year: i("year", e.year)
|
|
47
|
+
}), P = (e, t) => t === "" ? "" : t.padStart(u[e], "0"), X = (e, t, n) => t === "" ? { displayValue: n, isPlaceholder: !0 } : {
|
|
48
|
+
displayValue: t.padStart(u[e], "0"),
|
|
46
49
|
isPlaceholder: !1
|
|
47
|
-
},
|
|
50
|
+
}, C = (e) => {
|
|
48
51
|
const t = window.getSelection();
|
|
49
52
|
if (!t) return;
|
|
50
53
|
const n = document.createRange();
|
|
51
54
|
n.selectNodeContents(e), t.removeAllRanges(), t.addRange(n);
|
|
52
|
-
},
|
|
55
|
+
}, L = (e) => {
|
|
53
56
|
var n;
|
|
54
57
|
if (!e) return;
|
|
55
58
|
const t = (n = window.getSelection) == null ? void 0 : n.call(window);
|
|
56
59
|
t && t.rangeCount > 0 && e.contains(t.anchorNode) && t.removeAllRanges();
|
|
57
60
|
};
|
|
58
61
|
export {
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
T as
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
E as
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
62
|
+
c as DAY_SPIN_MAX,
|
|
63
|
+
s as MONTH_MAX,
|
|
64
|
+
y as YEAR_MAX,
|
|
65
|
+
d as YEAR_MIN,
|
|
66
|
+
Y as adjustSegmentValue,
|
|
67
|
+
f as clamp,
|
|
68
|
+
R as clampDateToRange,
|
|
69
|
+
L as clearSelectionWithin,
|
|
70
|
+
w as dateKeyOrNull,
|
|
71
|
+
m as deriveValue,
|
|
72
|
+
V as deriveValueFromText,
|
|
73
|
+
T as getDaysInMonth,
|
|
74
|
+
X as getSegmentDisplay,
|
|
75
|
+
D as getSegmentOrder,
|
|
76
|
+
E as isDateInRange,
|
|
77
|
+
N as isMinMaxMisconfigured,
|
|
78
|
+
F as isSameDateValue,
|
|
79
|
+
P as normalizeSegmentText,
|
|
80
|
+
i as segmentNumber,
|
|
81
|
+
I as segmentTextFromValue,
|
|
82
|
+
C as selectElementContents,
|
|
83
|
+
_ as toISODateString,
|
|
84
|
+
A as todayParts,
|
|
85
|
+
S as wrapInRange
|
|
78
86
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("react"),P=require("./DateField.utils.cjs.js");function j({disabled:l,fieldRef:i,segmentRefs:T,partsOrder:b,onSegmentFocusChange:d,onFieldBlur:x}){const[c,o]=r.useState(null),a=b[0],y=r.useRef(c);y.current=c;const e=r.useRef(d),k=r.useRef(x);r.useEffect(()=>{e.current=d,k.current=x},[d,x]),r.useEffect(()=>{if(c===null||c==="all")return;const t=T.current.get(c);t&&document.activeElement!==t&&t.focus()},[c,T]);const E=r.useCallback(t=>{var u;l||(o(t),(u=e.current)==null||u.call(e,t))},[l]),q=r.useCallback(t=>{var u;l||t.target===i.current&&(o(a),(u=e.current)==null||u.call(e,a))},[l,i,a]),v=r.useCallback(t=>{var n,s,f,_;if((n=i.current)!=null&&n.contains(t.relatedTarget))return;const u=(f=(s=t.target)==null?void 0:s.getAttribute)==null?void 0:f.call(s,"data-segment");u&&u!==y.current||(o(null),(_=k.current)==null||_.call(k),P.clearSelectionWithin(i.current))},[i]),w=r.useCallback(t=>{var n;if(l)return;t.target.closest("[data-segment]")||(t.preventDefault(),o(a),(n=e.current)==null||n.call(e,a))},[l,a]),D=r.useCallback((t,u)=>{var f;const n=b.indexOf(t);if(n===-1)return;const s=b[n+u];s!=null&&(o(s),(f=e.current)==null||f.call(e,s))},[b]),I=r.useCallback(t=>{D(t,1)},[D]),M=r.useCallback(t=>{D(t,-1)},[D]);return{focusedSegment:c,fieldTabIndex:l?-1:c===null?0:-1,handleSegmentFocus:E,handleFieldFocus:q,handleFieldBlur:v,handleFieldMouseDown:w,focusNext:I,focusPrevious:M}}exports.useDateFieldFocus=j;
|
|
@@ -1,71 +1,78 @@
|
|
|
1
|
-
import { useState as
|
|
2
|
-
import { clearSelectionWithin as
|
|
3
|
-
function
|
|
4
|
-
disabled:
|
|
5
|
-
fieldRef:
|
|
6
|
-
segmentRefs:
|
|
7
|
-
partsOrder:
|
|
8
|
-
onSegmentFocusChange:
|
|
9
|
-
onFieldBlur:
|
|
1
|
+
import { useState as d, useRef as y, useEffect as v, useCallback as o } from "react";
|
|
2
|
+
import { clearSelectionWithin as j } from "./DateField.utils.es.js";
|
|
3
|
+
function H({
|
|
4
|
+
disabled: s,
|
|
5
|
+
fieldRef: l,
|
|
6
|
+
segmentRefs: E,
|
|
7
|
+
partsOrder: x,
|
|
8
|
+
onSegmentFocusChange: m,
|
|
9
|
+
onFieldBlur: p
|
|
10
10
|
}) {
|
|
11
|
-
const [
|
|
12
|
-
I
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
11
|
+
const [u, f] = d(null), i = x[0], I = y(u);
|
|
12
|
+
I.current = u;
|
|
13
|
+
const r = y(m), T = y(p);
|
|
14
|
+
v(() => {
|
|
15
|
+
r.current = m, T.current = p;
|
|
16
|
+
}, [m, p]), v(() => {
|
|
17
|
+
if (u === null || u === "all") return;
|
|
18
|
+
const t = E.current.get(u);
|
|
17
19
|
t && document.activeElement !== t && t.focus();
|
|
18
|
-
}, [
|
|
19
|
-
const
|
|
20
|
+
}, [u, E]);
|
|
21
|
+
const w = o(
|
|
20
22
|
(t) => {
|
|
21
23
|
var c;
|
|
22
|
-
|
|
24
|
+
s || (f(t), (c = r.current) == null || c.call(r, t));
|
|
23
25
|
},
|
|
24
|
-
[
|
|
25
|
-
),
|
|
26
|
+
[s]
|
|
27
|
+
), A = o(
|
|
26
28
|
(t) => {
|
|
27
29
|
var c;
|
|
28
|
-
|
|
30
|
+
s || t.target === l.current && (f(i), (c = r.current) == null || c.call(r, i));
|
|
29
31
|
},
|
|
30
|
-
[
|
|
31
|
-
), M =
|
|
32
|
+
[s, l, i]
|
|
33
|
+
), M = o(
|
|
32
34
|
(t) => {
|
|
33
|
-
var
|
|
34
|
-
(
|
|
35
|
+
var n, e, a, k;
|
|
36
|
+
if ((n = l.current) != null && n.contains(t.relatedTarget)) return;
|
|
37
|
+
const c = (a = (e = t.target) == null ? void 0 : e.getAttribute) == null ? void 0 : a.call(
|
|
38
|
+
e,
|
|
39
|
+
"data-segment"
|
|
40
|
+
);
|
|
41
|
+
c && c !== I.current || (f(null), (k = T.current) == null || k.call(T), j(l.current));
|
|
35
42
|
},
|
|
36
|
-
[
|
|
37
|
-
), N =
|
|
43
|
+
[l]
|
|
44
|
+
), N = o(
|
|
38
45
|
(t) => {
|
|
39
|
-
var
|
|
40
|
-
if (
|
|
41
|
-
t.target.closest("[data-segment]") || (t.preventDefault(),
|
|
46
|
+
var n;
|
|
47
|
+
if (s) return;
|
|
48
|
+
t.target.closest("[data-segment]") || (t.preventDefault(), f(i), (n = r.current) == null || n.call(r, i));
|
|
42
49
|
},
|
|
43
|
-
[
|
|
44
|
-
),
|
|
50
|
+
[s, i]
|
|
51
|
+
), D = o(
|
|
45
52
|
(t, c) => {
|
|
46
|
-
var
|
|
47
|
-
const
|
|
48
|
-
if (
|
|
49
|
-
const
|
|
50
|
-
|
|
53
|
+
var a;
|
|
54
|
+
const n = x.indexOf(t);
|
|
55
|
+
if (n === -1) return;
|
|
56
|
+
const e = x[n + c];
|
|
57
|
+
e != null && (f(e), (a = r.current) == null || a.call(r, e));
|
|
51
58
|
},
|
|
52
|
-
[
|
|
53
|
-
), P =
|
|
59
|
+
[x]
|
|
60
|
+
), P = o(
|
|
54
61
|
(t) => {
|
|
55
|
-
|
|
62
|
+
D(t, 1);
|
|
56
63
|
},
|
|
57
|
-
[
|
|
58
|
-
), W =
|
|
64
|
+
[D]
|
|
65
|
+
), W = o(
|
|
59
66
|
(t) => {
|
|
60
|
-
|
|
67
|
+
D(t, -1);
|
|
61
68
|
},
|
|
62
|
-
[
|
|
69
|
+
[D]
|
|
63
70
|
);
|
|
64
71
|
return {
|
|
65
|
-
focusedSegment:
|
|
66
|
-
fieldTabIndex:
|
|
67
|
-
handleSegmentFocus:
|
|
68
|
-
handleFieldFocus:
|
|
72
|
+
focusedSegment: u,
|
|
73
|
+
fieldTabIndex: s ? -1 : u === null ? 0 : -1,
|
|
74
|
+
handleSegmentFocus: w,
|
|
75
|
+
handleFieldFocus: A,
|
|
69
76
|
handleFieldBlur: M,
|
|
70
77
|
handleFieldMouseDown: N,
|
|
71
78
|
focusNext: P,
|
|
@@ -73,5 +80,5 @@ function G({
|
|
|
73
80
|
};
|
|
74
81
|
}
|
|
75
82
|
export {
|
|
76
|
-
|
|
83
|
+
H as useDateFieldFocus
|
|
77
84
|
};
|
|
@@ -15,9 +15,11 @@ export interface UseDateFieldValidityReturn {
|
|
|
15
15
|
allFilled: boolean;
|
|
16
16
|
hasPartialValue: boolean;
|
|
17
17
|
/** "Show error?" for value-driven invalidity. True when the user has
|
|
18
|
-
* touched the field AND
|
|
19
|
-
*
|
|
20
|
-
*
|
|
18
|
+
* touched the field AND (all segments filled but combine to an invalid
|
|
19
|
+
* date (Feb 30), OR some filled/some empty and focus has left).
|
|
20
|
+
* `minDate`/`maxDate` out-of-range values aren't flagged here — the
|
|
21
|
+
* built-in bound is a blur clamp (see `commitOnBlur`), not a validity
|
|
22
|
+
* constraint; use a `validationRule` for range errors/submit-blocking. */
|
|
21
23
|
isInvalid: boolean;
|
|
22
24
|
}
|
|
23
25
|
export declare function useDateFieldValidity({ segments, currentValue, wasTouched, isFocused, }: UseDateFieldValidityArgs): UseDateFieldValidityReturn;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("react"),t=require("./DateField.utils.cjs.js"),
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("react"),t=require("./DateField.utils.cjs.js"),j=require("./DateField.validation.cjs.js");function G({value:a,defaultValue:A,onChange:x,minDate:R,maxDate:y,getClampAnnouncement:V}){const N=r.useRef(a!==void 0),F=N.current,[m,h]=r.useState(()=>t.segmentTextFromValue(F?a??null:A??null)),[D,_]=r.useState(!1),[C,M]=r.useState(""),c=r.useRef(m),f=r.useRef(new Set),d=r.useRef(!1),l=r.useRef(null),v={day:t.segmentNumber("day",m.day),month:t.segmentNumber("month",m.month),year:t.segmentNumber("year",m.year)},k=t.deriveValue(v),E=r.useRef(k),p=r.useRef(F?a??null:null),g=r.useRef(x),S=r.useRef(V);r.useEffect(()=>{g.current=x,S.current=V},[x,V]),r.useEffect(()=>()=>{l.current!=null&&cancelAnimationFrame(l.current)},[]),r.useEffect(()=>{if(!N.current||d.current||t.isSameDateValue(a??null,p.current))return;p.current=a??null;const e=t.segmentTextFromValue(a??null);c.current=e,h(e),E.current=t.deriveValueFromText(e)},[a]);const b=r.useCallback(e=>{var n;const s=t.deriveValueFromText(e);t.isSameDateValue(s,E.current)||(E.current=s,(n=g.current)==null||n.call(g,s))},[]),o=r.useCallback((e,s,{replace:n})=>{const u={...c.current,[e]:s};c.current=u,h(u),_(!0),b(u),n?f.current.add(e):f.current.delete(e)},[b]),q=r.useCallback((e,s)=>{const n=f.current.has(e)?"":c.current[e],u=j.tryAppendDigit(e,n,s);return u.rejected?{advanced:!1,rejected:!0}:(o(e,u.newBuffer,{replace:u.shouldAdvance}),{advanced:u.shouldAdvance,rejected:!1})},[o]),z=r.useCallback((e,s)=>{const n=c.current,u=t.segmentNumber(e,n[e]),T=t.getDaysInMonth(t.segmentNumber("year",n.year),t.segmentNumber("month",n.month)),i=t.adjustSegmentValue(e,u,s,{daysInMonth:T,today:t.todayParts()});return i==null?!1:(d.current=!0,o(e,String(i).padStart(j.SEGMENT_MAX_LENGTH[e],"0"),{replace:!0}),!0)},[o]),I=r.useCallback(e=>c.current[e]===""?{wasEmpty:!0}:(d.current=!0,o(e,"",{replace:!1}),{wasEmpty:!1}),[o]),O=r.useCallback(e=>{d.current=!0,f.current.add(e)},[]),B=r.useCallback(()=>{var T;d.current=!1;const e=c.current,s={day:t.normalizeSegmentText("day",e.day),month:t.normalizeSegmentText("month",e.month),year:t.normalizeSegmentText("year",e.year)},n=t.deriveValueFromText(s);let u=s;if(n!=null&&D&&!t.isDateInRange(n,R,y)){const i=t.clampDateToRange(n,R,y);if(u=t.segmentTextFromValue(i),!t.isSameDateValue(i,n)){const w=((T=S.current)==null?void 0:T.call(S,i))??"";w&&(l.current!=null&&cancelAnimationFrame(l.current),l.current=requestAnimationFrame(()=>{l.current=null,M(w)}))}}c.current=u,h(u),_(!0),b(u)},[b,D,t.dateKeyOrNull(R),t.dateKeyOrNull(y)]);return{segmentText:m,segmentValues:v,currentValue:k,isControlled:F,wasTouched:D,appendDigit:q,adjustSegment:z,clearSegment:I,beginSegmentEdit:O,commitOnBlur:B,clampAnnouncement:C}}exports.useDateFieldValue=G;
|
|
@@ -5,6 +5,23 @@ export interface UseDateFieldValueArgs {
|
|
|
5
5
|
defaultValue?: Nullable<Date>;
|
|
6
6
|
/** Fires on user-driven value transitions only, never on controlled `value` changes. */
|
|
7
7
|
onChange?: (value: Nullable<Date>) => void;
|
|
8
|
+
/**
|
|
9
|
+
* Earliest allowed date (inclusive, compared by calendar day). Springs a
|
|
10
|
+
* touched value to this bound on blur (see `commitOnBlur`) — does not bound
|
|
11
|
+
* the year segment's spin/Home/End, which is free (see `adjustSegment`).
|
|
12
|
+
*/
|
|
13
|
+
minDate?: Nullable<Date>;
|
|
14
|
+
/**
|
|
15
|
+
* Latest allowed date (inclusive, compared by calendar day). Springs a
|
|
16
|
+
* touched value to this bound on blur (see `commitOnBlur`) — does not bound
|
|
17
|
+
* the year segment's spin/Home/End, which is free (see `adjustSegment`).
|
|
18
|
+
*/
|
|
19
|
+
maxDate?: Nullable<Date>;
|
|
20
|
+
/**
|
|
21
|
+
* Called when a touched value springs to a bound on blur; returns a localized
|
|
22
|
+
* message set on the polite live region. Omit → no announcement.
|
|
23
|
+
*/
|
|
24
|
+
getClampAnnouncement?: (clampedDate: Date) => string;
|
|
8
25
|
}
|
|
9
26
|
export interface UseDateFieldValueReturn {
|
|
10
27
|
segmentText: SegmentText;
|
|
@@ -17,21 +34,21 @@ export interface UseDateFieldValueReturn {
|
|
|
17
34
|
* Increments, decrements, or jumps a segment to its min/max boundary.
|
|
18
35
|
*
|
|
19
36
|
* - Numeric `amount` (e.g. ±1, ±5): day/month wrap modularly; year clamps
|
|
20
|
-
* to [
|
|
21
|
-
*
|
|
22
|
-
* year
|
|
23
|
-
*
|
|
24
|
-
*
|
|
37
|
+
* to `[YEAR_MIN, YEAR_MAX]` (free-spinning, independent of `minDate`/
|
|
38
|
+
* `maxDate` — see `DateField.utils.adjustSegmentValue`). An empty day/month
|
|
39
|
+
* segment seeds to a direction-based first/last valid value; an empty year
|
|
40
|
+
* seeds to the current year.
|
|
41
|
+
* - `'min'` / `'max'`: jump to the lower/upper bound. No-op on year (Home/End
|
|
42
|
+
* don't bound the year to `minDate`/`maxDate`).
|
|
25
43
|
*
|
|
26
44
|
* Follows the `appendDigit` mutation pattern: writes zero-padded `segmentText`,
|
|
27
45
|
* sets `wasTouched`, calls `emitIfChanged`, and marks the segment in
|
|
28
46
|
* `replaceNextRef` so a digit typed immediately after replaces rather than
|
|
29
47
|
* appends.
|
|
30
48
|
*
|
|
31
|
-
* @returns `true` if the segment was adjusted, `false` on a no-op (
|
|
32
|
-
*
|
|
33
|
-
*
|
|
34
|
-
* the key to native (e.g. page scroll).
|
|
49
|
+
* @returns `true` if the segment was adjusted, `false` on a no-op (year
|
|
50
|
+
* `'min'`/`'max'`). The keyboard dispatcher uses this to decide whether to
|
|
51
|
+
* `preventDefault` — a no-op leaves the key to native (e.g. page scroll).
|
|
35
52
|
*/
|
|
36
53
|
adjustSegment: (type: SegmentType, amount: SegmentAdjustment) => boolean;
|
|
37
54
|
/**
|
|
@@ -50,5 +67,7 @@ export interface UseDateFieldValueReturn {
|
|
|
50
67
|
};
|
|
51
68
|
beginSegmentEdit: (type: SegmentType) => void;
|
|
52
69
|
commitOnBlur: () => void;
|
|
70
|
+
/** Polite live-region message set when the blur clamp springs a value to a bound. */
|
|
71
|
+
clampAnnouncement: string;
|
|
53
72
|
}
|
|
54
|
-
export declare function useDateFieldValue({ value, defaultValue, onChange, }: UseDateFieldValueArgs): UseDateFieldValueReturn;
|
|
73
|
+
export declare function useDateFieldValue({ value, defaultValue, onChange, minDate, maxDate, getClampAnnouncement, }: UseDateFieldValueArgs): UseDateFieldValueReturn;
|
|
@@ -1,83 +1,103 @@
|
|
|
1
|
-
import { useRef as
|
|
2
|
-
import { segmentTextFromValue as
|
|
3
|
-
import { tryAppendDigit as
|
|
4
|
-
function
|
|
5
|
-
value:
|
|
6
|
-
defaultValue:
|
|
7
|
-
onChange:
|
|
1
|
+
import { useRef as c, useState as w, useEffect as N, useCallback as a } from "react";
|
|
2
|
+
import { segmentTextFromValue as b, segmentNumber as i, deriveValue as Q, isSameDateValue as v, deriveValueFromText as D, getDaysInMonth as U, adjustSegmentValue as Y, todayParts as Z, normalizeSegmentText as I, isDateInRange as $, clampDateToRange as C, dateKeyOrNull as k } from "./DateField.utils.es.js";
|
|
3
|
+
import { tryAppendDigit as ee, SEGMENT_MAX_LENGTH as te } from "./DateField.validation.es.js";
|
|
4
|
+
function ue({
|
|
5
|
+
value: s,
|
|
6
|
+
defaultValue: q,
|
|
7
|
+
onChange: T,
|
|
8
|
+
minDate: E,
|
|
9
|
+
maxDate: R,
|
|
10
|
+
getClampAnnouncement: V
|
|
8
11
|
}) {
|
|
9
|
-
const
|
|
10
|
-
() =>
|
|
11
|
-
), [F,
|
|
12
|
-
day:
|
|
13
|
-
month:
|
|
14
|
-
year:
|
|
15
|
-
},
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
}, [
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
const e = A(u ?? null);
|
|
22
|
-
c.current = e, S(e), y.current = N(e);
|
|
23
|
-
}, [u]);
|
|
24
|
-
const g = o((e) => {
|
|
25
|
-
var r;
|
|
26
|
-
const t = N(e);
|
|
27
|
-
M(t, y.current) || (y.current = t, (r = f.current) == null || r.call(f, t));
|
|
28
|
-
}, []), a = o(
|
|
29
|
-
(e, t, { replace: r }) => {
|
|
30
|
-
const n = { ...c.current, [e]: t };
|
|
31
|
-
c.current = n, S(n), V(!0), g(n), r ? i.current.add(e) : i.current.delete(e);
|
|
12
|
+
const M = c(s !== void 0), p = M.current, [m, A] = w(
|
|
13
|
+
() => b(p ? s ?? null : q ?? null)
|
|
14
|
+
), [F, z] = w(!1), [H, K] = w(""), u = c(m), g = c(/* @__PURE__ */ new Set()), f = c(!1), o = c(null), B = {
|
|
15
|
+
day: i("day", m.day),
|
|
16
|
+
month: i("month", m.month),
|
|
17
|
+
year: i("year", m.year)
|
|
18
|
+
}, G = Q(B), j = c(G), O = c(p ? s ?? null : null), h = c(T), x = c(V);
|
|
19
|
+
N(() => {
|
|
20
|
+
h.current = T, x.current = V;
|
|
21
|
+
}, [T, V]), N(
|
|
22
|
+
() => () => {
|
|
23
|
+
o.current != null && cancelAnimationFrame(o.current);
|
|
32
24
|
},
|
|
33
|
-
[
|
|
34
|
-
),
|
|
35
|
-
(
|
|
36
|
-
|
|
37
|
-
|
|
25
|
+
[]
|
|
26
|
+
), N(() => {
|
|
27
|
+
if (!M.current || f.current || v(s ?? null, O.current)) return;
|
|
28
|
+
O.current = s ?? null;
|
|
29
|
+
const e = b(s ?? null);
|
|
30
|
+
u.current = e, A(e), j.current = D(e);
|
|
31
|
+
}, [s]);
|
|
32
|
+
const y = a((e) => {
|
|
33
|
+
var t;
|
|
34
|
+
const n = D(e);
|
|
35
|
+
v(n, j.current) || (j.current = n, (t = h.current) == null || t.call(h, n));
|
|
36
|
+
}, []), l = a(
|
|
37
|
+
(e, n, { replace: t }) => {
|
|
38
|
+
const r = { ...u.current, [e]: n };
|
|
39
|
+
u.current = r, A(r), z(!0), y(r), t ? g.current.add(e) : g.current.delete(e);
|
|
38
40
|
},
|
|
39
|
-
[
|
|
40
|
-
),
|
|
41
|
-
(e,
|
|
42
|
-
const
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
41
|
+
[y]
|
|
42
|
+
), L = a(
|
|
43
|
+
(e, n) => {
|
|
44
|
+
const t = g.current.has(e) ? "" : u.current[e], r = ee(e, t, n);
|
|
45
|
+
return r.rejected ? { advanced: !1, rejected: !0 } : (l(e, r.newBuffer, { replace: r.shouldAdvance }), { advanced: r.shouldAdvance, rejected: !1 });
|
|
46
|
+
},
|
|
47
|
+
[l]
|
|
48
|
+
), P = a(
|
|
49
|
+
(e, n) => {
|
|
50
|
+
const t = u.current, r = i(e, t[e]), S = U(
|
|
51
|
+
i("year", t.year),
|
|
52
|
+
i("month", t.month)
|
|
53
|
+
), d = Y(e, r, n, {
|
|
54
|
+
daysInMonth: S,
|
|
55
|
+
today: Z()
|
|
48
56
|
});
|
|
49
|
-
return
|
|
57
|
+
return d == null ? !1 : (f.current = !0, l(e, String(d).padStart(te[e], "0"), {
|
|
50
58
|
replace: !0
|
|
51
59
|
}), !0);
|
|
52
60
|
},
|
|
53
|
-
[
|
|
54
|
-
),
|
|
55
|
-
(e) =>
|
|
56
|
-
[
|
|
57
|
-
),
|
|
58
|
-
|
|
59
|
-
}, []),
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
61
|
+
[l]
|
|
62
|
+
), W = a(
|
|
63
|
+
(e) => u.current[e] === "" ? { wasEmpty: !0 } : (f.current = !0, l(e, "", { replace: !1 }), { wasEmpty: !1 }),
|
|
64
|
+
[l]
|
|
65
|
+
), X = a((e) => {
|
|
66
|
+
f.current = !0, g.current.add(e);
|
|
67
|
+
}, []), J = a(() => {
|
|
68
|
+
var S;
|
|
69
|
+
f.current = !1;
|
|
70
|
+
const e = u.current, n = {
|
|
71
|
+
day: I("day", e.day),
|
|
72
|
+
month: I("month", e.month),
|
|
73
|
+
year: I("year", e.year)
|
|
74
|
+
}, t = D(n);
|
|
75
|
+
let r = n;
|
|
76
|
+
if (t != null && F && !$(t, E, R)) {
|
|
77
|
+
const d = C(t, E, R);
|
|
78
|
+
if (r = b(d), !v(d, t)) {
|
|
79
|
+
const _ = ((S = x.current) == null ? void 0 : S.call(x, d)) ?? "";
|
|
80
|
+
_ && (o.current != null && cancelAnimationFrame(o.current), o.current = requestAnimationFrame(() => {
|
|
81
|
+
o.current = null, K(_);
|
|
82
|
+
}));
|
|
83
|
+
}
|
|
84
|
+
}
|
|
85
|
+
u.current = r, A(r), z(!0), y(r);
|
|
86
|
+
}, [y, F, k(E), k(R)]);
|
|
68
87
|
return {
|
|
69
|
-
segmentText:
|
|
70
|
-
segmentValues:
|
|
71
|
-
currentValue:
|
|
72
|
-
isControlled:
|
|
88
|
+
segmentText: m,
|
|
89
|
+
segmentValues: B,
|
|
90
|
+
currentValue: G,
|
|
91
|
+
isControlled: p,
|
|
73
92
|
wasTouched: F,
|
|
74
|
-
appendDigit:
|
|
75
|
-
adjustSegment:
|
|
76
|
-
clearSegment:
|
|
77
|
-
beginSegmentEdit:
|
|
78
|
-
commitOnBlur:
|
|
93
|
+
appendDigit: L,
|
|
94
|
+
adjustSegment: P,
|
|
95
|
+
clearSegment: W,
|
|
96
|
+
beginSegmentEdit: X,
|
|
97
|
+
commitOnBlur: J,
|
|
98
|
+
clampAnnouncement: H
|
|
79
99
|
};
|
|
80
100
|
}
|
|
81
101
|
export {
|
|
82
|
-
|
|
102
|
+
ue as useDateFieldValue
|
|
83
103
|
};
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@viasat/beam-react",
|
|
3
|
-
"version": "2.
|
|
3
|
+
"version": "2.48.1",
|
|
4
4
|
"description": "React component library for the Beam design system",
|
|
5
5
|
"license": "MIT",
|
|
6
6
|
"author": "Viasat",
|
|
@@ -60,12 +60,12 @@
|
|
|
60
60
|
"access": "public"
|
|
61
61
|
},
|
|
62
62
|
"dependencies": {
|
|
63
|
-
"@viasat/beam-fonts": "2.
|
|
64
|
-
"@viasat/beam-shared": "2.
|
|
65
|
-
"@viasat/beam-styles": "2.
|
|
66
|
-
"@viasat/beam-tokens": "2.
|
|
67
|
-
"@viasat/beam-icons": "2.
|
|
68
|
-
"@viasat/beam-react-claude-plugin": "2.
|
|
63
|
+
"@viasat/beam-fonts": "2.48.1",
|
|
64
|
+
"@viasat/beam-shared": "2.48.1",
|
|
65
|
+
"@viasat/beam-styles": "2.48.1",
|
|
66
|
+
"@viasat/beam-tokens": "2.48.1",
|
|
67
|
+
"@viasat/beam-icons": "2.48.1",
|
|
68
|
+
"@viasat/beam-react-claude-plugin": "2.48.1",
|
|
69
69
|
"clsx": "^1.2.1",
|
|
70
70
|
"@floating-ui/react": "^0.26.18",
|
|
71
71
|
"@stepperize/react": "^5.1.5",
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
var w=require("../assets/DateField.css");const N=require("react/jsx-runtime"),F=require("clsx"),d=require("react"),M=require("./classNames.DC8Ra4sw.js"),q=require("../lib/wip/DateField/DateField.utils.cjs.js"),P="date-field",{baseClassNamePrefix:R,classModifierPrefix:k,subElementClassPrefix:r}=M.getBEMClassNames(P),c={field:`${r}field`,segments:`${r}segments`,segment:`${r}segment`,separator:`${r}separator`},u={"bm-light":"bm-light","bm-dark":"bm-dark","bm-inverse":"bm-inverse","bm-enterprise":"bm-enterprise","bm-consumer":"bm-consumer","bm-date-field":"bm-date-field","bm-date-field--disabled":"bm-date-field--disabled","bm-date-field--error":"bm-date-field--error","bm-date-field__field":"bm-date-field__field","bm-date-field__segment":"bm-date-field__segment","bm-date-field--read-only":"bm-date-field--read-only","bm-date-field--fluid":"bm-date-field--fluid","bm-date-field__segments":"bm-date-field__segments","bm-date-field__separator":"bm-date-field__separator"},I={day:"day",month:"month",year:"year"},$=({type:n,value:_,valueMax:g,displayValue:t,isPlaceholder:C,isActive:a,disabled:l,readOnly:o,onFocus:p,onBlur:x,onInput:E,onKeyDown:h,segmentRef:m})=>{const s=!l&&!o,f=d.useRef(null),v=d.useCallback(e=>{f.current=e,m(e)},[m]),D=e=>{if(!s)return;const b=e.currentTarget,i=e.nativeEvent.data;i!=null&&i.length===1&&E(n,i),b.textContent!==t&&(b.textContent=t)};return d.useLayoutEffect(()=>{if(!a||!s)return;const e=f.current;e&&q.selectElementContents(e)},[t,a,s]),N.jsx("span",{ref:v,role:"spinbutton","aria-label":I[n],"aria-valuenow":_??void 0,"aria-valuemin":1,"aria-valuemax":g,"aria-valuetext":t,"aria-disabled":l||void 0,"aria-readonly":o||void 0,contentEditable:s&&a,suppressContentEditableWarning:!0,tabIndex:a?0:-1,inputMode:s?"numeric":void 0,spellCheck:!1,autoCorrect:"off",autoCapitalize:"off","data-segment":n,"data-active":a,"data-placeholder":C,onFocus:p,onBlur:x,onInput:D,onKeyDown:e=>h(n,e),onMouseUp:e=>e.preventDefault(),className:F(u[c.segment]),children:t})};exports.DateFieldSegment=$;exports.baseClassNamePrefix=R;exports.classModifierPrefix=k;exports.staticDateFieldClassNames=c;exports.styles=u;
|