@viasat/beam-react 2.40.0 → 2.41.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/chunks/{DateField.Segment.BaAwH6ov.js → DateField.Segment.C2qoaY0Z.js} +42 -45
- package/chunks/DateField.Segment.CY0jg03_.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 +49 -45
- package/lib/wip/DateField/DateField.cjs.js +1 -1
- package/lib/wip/DateField/DateField.es.js +83 -80
- package/lib/wip/DateField/DateField.types.d.ts +11 -0
- package/lib/wip/DateField/DateField.utils.cjs.js +1 -1
- package/lib/wip/DateField/DateField.utils.d.ts +84 -1
- package/lib/wip/DateField/DateField.utils.es.js +66 -43
- package/lib/wip/DateField/useDateFieldKeyboard.cjs.js +1 -1
- package/lib/wip/DateField/useDateFieldKeyboard.d.ts +24 -4
- package/lib/wip/DateField/useDateFieldKeyboard.es.js +38 -26
- package/lib/wip/DateField/useDateFieldValue.cjs.js +1 -1
- package/lib/wip/DateField/useDateFieldValue.d.ts +20 -1
- package/lib/wip/DateField/useDateFieldValue.es.js +66 -50
- package/package.json +6 -6
- package/chunks/DateField.Segment.Df8aTzNW.js +0 -1
|
@@ -1,15 +1,15 @@
|
|
|
1
1
|
import "../assets/DateField.css";
|
|
2
|
-
import { jsx as
|
|
3
|
-
import
|
|
4
|
-
import { useRef as
|
|
5
|
-
import { g as
|
|
2
|
+
import { jsx as h } from "react/jsx-runtime";
|
|
3
|
+
import v from "clsx";
|
|
4
|
+
import { useRef as D, useCallback as M, useLayoutEffect as N } from "react";
|
|
5
|
+
import { g as k } from "./classNames.ZWNk1hey.js";
|
|
6
6
|
import { selectElementContents as I } from "../lib/wip/DateField/DateField.utils.es.js";
|
|
7
|
-
const
|
|
7
|
+
const $ = "date-field", { baseClassNamePrefix: j, classModifierPrefix: z, subElementClassPrefix: s } = k($), B = {
|
|
8
8
|
field: `${s}field`,
|
|
9
9
|
segments: `${s}segments`,
|
|
10
10
|
segment: `${s}segment`,
|
|
11
11
|
separator: `${s}separator`
|
|
12
|
-
},
|
|
12
|
+
}, L = {
|
|
13
13
|
"bm-light": "bm-light",
|
|
14
14
|
"bm-dark": "bm-dark",
|
|
15
15
|
"bm-inverse": "bm-inverse",
|
|
@@ -24,78 +24,75 @@ const k = "date-field", { baseClassNamePrefix: F, classModifierPrefix: G, subEle
|
|
|
24
24
|
"bm-date-field--fluid": "bm-date-field--fluid",
|
|
25
25
|
"bm-date-field__segments": "bm-date-field__segments",
|
|
26
26
|
"bm-date-field__separator": "bm-date-field__separator"
|
|
27
|
-
},
|
|
28
|
-
day: 31,
|
|
29
|
-
month: 12,
|
|
30
|
-
year: 9999
|
|
31
|
-
}, B = {
|
|
27
|
+
}, P = {
|
|
32
28
|
day: "day",
|
|
33
29
|
month: "month",
|
|
34
30
|
year: "year"
|
|
35
|
-
},
|
|
36
|
-
type:
|
|
31
|
+
}, G = ({
|
|
32
|
+
type: r,
|
|
37
33
|
value: b,
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
34
|
+
valueMax: c,
|
|
35
|
+
displayValue: t,
|
|
36
|
+
isPlaceholder: u,
|
|
37
|
+
isActive: a,
|
|
41
38
|
disabled: o,
|
|
42
39
|
readOnly: i,
|
|
43
|
-
onFocus:
|
|
44
|
-
onBlur:
|
|
45
|
-
onInput:
|
|
46
|
-
onKeyDown:
|
|
40
|
+
onFocus: p,
|
|
41
|
+
onBlur: g,
|
|
42
|
+
onInput: _,
|
|
43
|
+
onKeyDown: C,
|
|
47
44
|
segmentRef: m
|
|
48
45
|
}) => {
|
|
49
|
-
const
|
|
46
|
+
const n = !o && !i, l = D(null), x = M(
|
|
50
47
|
(e) => {
|
|
51
48
|
l.current = e, m(e);
|
|
52
49
|
},
|
|
53
50
|
[m]
|
|
54
51
|
), E = (e) => {
|
|
55
|
-
if (!
|
|
52
|
+
if (!n) return;
|
|
56
53
|
const f = e.currentTarget, d = e.nativeEvent.data;
|
|
57
|
-
d != null && d.length === 1 &&
|
|
54
|
+
d != null && d.length === 1 && _(r, d), f.textContent !== t && (f.textContent = t);
|
|
58
55
|
};
|
|
59
56
|
return N(() => {
|
|
60
|
-
if (!
|
|
57
|
+
if (!a || !n) return;
|
|
61
58
|
const e = l.current;
|
|
62
59
|
e && I(e);
|
|
63
|
-
}, [a, n
|
|
60
|
+
}, [t, a, n]), /* @__PURE__ */ h(
|
|
64
61
|
"span",
|
|
65
62
|
{
|
|
66
|
-
ref:
|
|
63
|
+
ref: x,
|
|
67
64
|
role: "spinbutton",
|
|
68
|
-
"aria-label":
|
|
65
|
+
"aria-label": P[r],
|
|
69
66
|
"aria-valuenow": b ?? void 0,
|
|
70
67
|
"aria-valuemin": 1,
|
|
71
|
-
"aria-valuemax":
|
|
72
|
-
"aria-valuetext":
|
|
68
|
+
"aria-valuemax": c,
|
|
69
|
+
"aria-valuetext": t,
|
|
73
70
|
"aria-disabled": o || void 0,
|
|
74
71
|
"aria-readonly": i || void 0,
|
|
75
|
-
contentEditable:
|
|
72
|
+
contentEditable: n && a,
|
|
76
73
|
suppressContentEditableWarning: !0,
|
|
77
|
-
tabIndex:
|
|
78
|
-
inputMode:
|
|
74
|
+
tabIndex: a ? 0 : -1,
|
|
75
|
+
inputMode: n ? "numeric" : void 0,
|
|
79
76
|
spellCheck: !1,
|
|
80
77
|
autoCorrect: "off",
|
|
81
78
|
autoCapitalize: "off",
|
|
82
|
-
"data-segment":
|
|
83
|
-
"data-active":
|
|
84
|
-
"data-placeholder":
|
|
85
|
-
onFocus:
|
|
86
|
-
onBlur:
|
|
79
|
+
"data-segment": r,
|
|
80
|
+
"data-active": a,
|
|
81
|
+
"data-placeholder": u,
|
|
82
|
+
onFocus: p,
|
|
83
|
+
onBlur: g,
|
|
87
84
|
onInput: E,
|
|
88
|
-
onKeyDown: (e) =>
|
|
85
|
+
onKeyDown: (e) => C(r, e),
|
|
89
86
|
onMouseUp: (e) => e.preventDefault(),
|
|
90
|
-
className:
|
|
91
|
-
children:
|
|
87
|
+
className: v(L[B.segment]),
|
|
88
|
+
children: t
|
|
92
89
|
}
|
|
93
90
|
);
|
|
94
91
|
};
|
|
95
92
|
export {
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
93
|
+
G as D,
|
|
94
|
+
B as a,
|
|
95
|
+
j as b,
|
|
96
|
+
z as c,
|
|
97
|
+
L as s
|
|
101
98
|
};
|
|
@@ -0,0 +1 @@
|
|
|
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;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});require("react/jsx-runtime");require("clsx");require("react");const e=require("../../../chunks/DateField.Segment.
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});require("react/jsx-runtime");require("clsx");require("react");const e=require("../../../chunks/DateField.Segment.CY0jg03_.js");require("./DateField.utils.cjs.js");exports.DateFieldSegment=e.DateFieldSegment;
|
|
@@ -1,2 +1,2 @@
|
|
|
1
1
|
import { DateFieldSegmentProps } from './DateField.types';
|
|
2
|
-
export declare const DateFieldSegment: ({ type, value, displayValue, isPlaceholder, isActive, disabled, readOnly, onFocus, onBlur, onInput, onKeyDown, segmentRef, }: DateFieldSegmentProps) => import("react/jsx-runtime").JSX.Element;
|
|
2
|
+
export declare const DateFieldSegment: ({ type, value, valueMax, displayValue, isPlaceholder, isActive, disabled, readOnly, onFocus, onBlur, onInput, onKeyDown, segmentRef, }: DateFieldSegmentProps) => import("react/jsx-runtime").JSX.Element;
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import "react/jsx-runtime";
|
|
2
2
|
import "clsx";
|
|
3
3
|
import "react";
|
|
4
|
-
import { D as p } from "../../../chunks/DateField.Segment.
|
|
4
|
+
import { D as p } from "../../../chunks/DateField.Segment.C2qoaY0Z.js";
|
|
5
5
|
import "./DateField.utils.es.js";
|
|
6
6
|
export {
|
|
7
7
|
p as DateFieldSegment
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const n=require("react/jsx-runtime"),t=require("../../../chunks/DateField.Segment.CY0jg03_.js"),a=require("./DateField.utils.cjs.js"),i=[{type:"month",value:""},{type:"literal",value:"/"},{type:"day",value:""},{type:"literal",value:"/"},{type:"year",value:""}],h={month:"MM",day:"DD",year:"YYYY"},A=a.getSegmentOrder(i),M=({segmentText:r,segmentValues:s,focusedSegment:o,disabled:c,readOnly:y,onSegmentFocus:d,onSegmentBlur:u,onSegmentInput:p,onSegmentKeyDown:m,registerSegmentRef:D})=>{const S=a.getDaysInMonth(s.year,s.month);return n.jsx("span",{className:t.styles[t.staticDateFieldClassNames.segments],children:i.map((l,_)=>{if(l.type==="literal")return n.jsx("span",{"aria-hidden":"true",className:t.styles[t.staticDateFieldClassNames.separator],children:l.value},`literal-${_}`);const e=l.type,g=h[e],{displayValue:R,isPlaceholder:v}=a.getSegmentDisplay(e,r[e],g),F=e==="day"?S:a.SEGMENT_ARIA_MAX[e];return n.jsx(t.DateFieldSegment,{type:e,value:s[e],valueMax:F,displayValue:R,isPlaceholder:v,isActive:o===e,disabled:c,readOnly:y,onFocus:()=>d(e),onBlur:u,onInput:p,onKeyDown:m,segmentRef:D(e)},e)})})};exports.DateFieldSegments=M;exports.PARTS_ORDER=A;
|
|
@@ -1,63 +1,67 @@
|
|
|
1
|
-
import { jsx as
|
|
2
|
-
import { s, a as l, D as R } from "../../../chunks/DateField.Segment.
|
|
3
|
-
import { getSegmentOrder as f, getSegmentDisplay as
|
|
4
|
-
const
|
|
1
|
+
import { jsx as s } from "react/jsx-runtime";
|
|
2
|
+
import { s as n, a as l, D as R } from "../../../chunks/DateField.Segment.C2qoaY0Z.js";
|
|
3
|
+
import { getSegmentOrder as E, getDaysInMonth as f, getSegmentDisplay as N, SEGMENT_ARIA_MAX as _ } from "./DateField.utils.es.js";
|
|
4
|
+
const o = [
|
|
5
5
|
{ type: "month", value: "" },
|
|
6
6
|
{ type: "literal", value: "/" },
|
|
7
7
|
{ type: "day", value: "" },
|
|
8
8
|
{ type: "literal", value: "/" },
|
|
9
9
|
{ type: "year", value: "" }
|
|
10
|
-
],
|
|
10
|
+
], x = {
|
|
11
11
|
month: "MM",
|
|
12
12
|
day: "DD",
|
|
13
13
|
year: "YYYY"
|
|
14
|
-
}, Y =
|
|
14
|
+
}, Y = E(o), I = ({
|
|
15
15
|
segmentText: r,
|
|
16
|
-
segmentValues:
|
|
16
|
+
segmentValues: t,
|
|
17
17
|
focusedSegment: i,
|
|
18
|
-
disabled:
|
|
18
|
+
disabled: y,
|
|
19
19
|
readOnly: p,
|
|
20
|
-
onSegmentFocus:
|
|
21
|
-
onSegmentBlur:
|
|
22
|
-
onSegmentInput:
|
|
23
|
-
onSegmentKeyDown:
|
|
20
|
+
onSegmentFocus: c,
|
|
21
|
+
onSegmentBlur: m,
|
|
22
|
+
onSegmentInput: d,
|
|
23
|
+
onSegmentKeyDown: u,
|
|
24
24
|
registerSegmentRef: D
|
|
25
|
-
}) =>
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
25
|
+
}) => {
|
|
26
|
+
const h = f(t.year, t.month);
|
|
27
|
+
return /* @__PURE__ */ s("span", { className: n[l.segments], children: o.map((a, v) => {
|
|
28
|
+
if (a.type === "literal")
|
|
29
|
+
return /* @__PURE__ */ s(
|
|
30
|
+
"span",
|
|
31
|
+
{
|
|
32
|
+
"aria-hidden": "true",
|
|
33
|
+
className: n[l.separator],
|
|
34
|
+
children: a.value
|
|
35
|
+
},
|
|
36
|
+
`literal-${v}`
|
|
37
|
+
);
|
|
38
|
+
const e = a.type, S = x[e], { displayValue: g, isPlaceholder: A } = N(
|
|
39
|
+
e,
|
|
40
|
+
r[e],
|
|
41
|
+
S
|
|
42
|
+
), M = e === "day" ? h : _[e];
|
|
43
|
+
return /* @__PURE__ */ s(
|
|
44
|
+
R,
|
|
29
45
|
{
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
46
|
+
type: e,
|
|
47
|
+
value: t[e],
|
|
48
|
+
valueMax: M,
|
|
49
|
+
displayValue: g,
|
|
50
|
+
isPlaceholder: A,
|
|
51
|
+
isActive: i === e,
|
|
52
|
+
disabled: y,
|
|
53
|
+
readOnly: p,
|
|
54
|
+
onFocus: () => c(e),
|
|
55
|
+
onBlur: m,
|
|
56
|
+
onInput: d,
|
|
57
|
+
onKeyDown: u,
|
|
58
|
+
segmentRef: D(e)
|
|
33
59
|
},
|
|
34
|
-
|
|
60
|
+
e
|
|
35
61
|
);
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
r[e],
|
|
39
|
-
v
|
|
40
|
-
);
|
|
41
|
-
return /* @__PURE__ */ a(
|
|
42
|
-
R,
|
|
43
|
-
{
|
|
44
|
-
type: e,
|
|
45
|
-
value: o[e],
|
|
46
|
-
displayValue: S,
|
|
47
|
-
isPlaceholder: h,
|
|
48
|
-
isActive: i === e,
|
|
49
|
-
disabled: m,
|
|
50
|
-
readOnly: p,
|
|
51
|
-
onFocus: () => y(e),
|
|
52
|
-
onBlur: c,
|
|
53
|
-
onInput: u,
|
|
54
|
-
onKeyDown: d,
|
|
55
|
-
segmentRef: D(e)
|
|
56
|
-
},
|
|
57
|
-
e
|
|
58
|
-
);
|
|
59
|
-
}) });
|
|
62
|
+
}) });
|
|
63
|
+
};
|
|
60
64
|
export {
|
|
61
|
-
|
|
65
|
+
I as DateFieldSegments,
|
|
62
66
|
Y as PARTS_ORDER
|
|
63
67
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const a=require("react/jsx-runtime"),be=require("clsx"),De=require("react"),e=require("../../../chunks/DateField.Segment.CY0jg03_.js"),fe=require("../../../chunks/constants.CgMu0_1M.js"),me=require("../../../chunks/form.context.D5XrYvpI.js"),pe=require("../../Form/contexts/label.context.cjs.js"),xe=require("../../Form/contexts/helperText.context.cjs.js"),ge=require("../../Form/hooks/useUniversalRef.hook.cjs.js"),r=require("./DateField.Segments.cjs.js"),ve=require("./DateField.utils.cjs.js"),ye=require("./useDateFieldFocus.cjs.js"),Se=require("./useDateFieldForm.cjs.js"),qe=require("./useDateFieldKeyboard.cjs.js"),he=require("./useDateFieldSegments.cjs.js"),we=require("./useDateFieldValidity.cjs.js"),Ie=require("./useDateFieldValue.cjs.js"),Re=require("./useInvalidState.cjs.js"),Pe=De.forwardRef(function({value:S,defaultValue:q,onChange:h,label:d=null,helperText:n=null,error:o,hideRequiredMarker:w=!1,validationRules:I,width:R,theme:u,fluid:P=!1,disabled:T=!1,readOnly:V=!1,required:j=!1,name:c,id:M,className:N,style:O,"aria-label":B,"aria-describedby":C,"aria-labelledby":E,...H},K){const{disabled:i,readOnly:t,required:F,invalid:L,errorMessageProvided:_,defaultValue:$,errorId:b,helperTextId:k,validationErrorsId:A,labelId:D,ariaDescribedBy:U,ariaLabelledBy:W,showErrors:z}=Se.useDateFieldForm({name:c,disabled:T,readOnly:V,required:j,defaultValue:q,error:o,hasHelperText:!!n,hasLabel:!!d,validationRules:I,ariaDescribedBy:C,ariaLabelledBy:E}),{refFn:G,ref:f}=ge.useUniversalRef(K),{segmentRefs:J,registerSegmentRef:Q}=he.useDateFieldSegments(),{segmentText:X,segmentValues:m,currentValue:p,wasTouched:Y,appendDigit:Z,adjustSegment:ee,beginSegmentEdit:ie,commitOnBlur:ae}=Ie.useDateFieldValue({value:S,defaultValue:$,onChange:h}),{focusedSegment:x,fieldTabIndex:le,handleSegmentFocus:g,handleFieldFocus:se,handleFieldBlur:te,handleFieldMouseDown:re,focusNext:v,focusPrevious:de}=ye.useDateFieldFocus({disabled:i,fieldRef:f,segmentRefs:J,partsOrder:r.PARTS_ORDER,onSegmentFocusChange:ie,onFieldBlur:ae}),ne=qe.useDateFieldKeyboard({disabled:i,readOnly:t,fieldRef:f,focusNext:v,focusPrevious:de,adjustSegment:ee}),{isInvalid:oe}=we.useDateFieldValidity({segments:m,currentValue:p,wasTouched:Y,isFocused:x!==null}),ue=(l,s)=>{const{advanced:_e}=Z(l,s);_e&&v(l)},y=Re.useInvalidState({formInvalid:L,valueInvalid:oe}),ce=l=>{if(i)return;const s=l.target.closest("label");!s||s.id!==D||(l.preventDefault(),g(r.PARTS_ORDER[0]))},Fe=be(e.styles[e.baseClassNamePrefix],u&&fe.themeClassName(u),P&&e.styles[`${e.classModifierPrefix}fluid`],y&&e.styles[`${e.classModifierPrefix}error`],i&&e.styles[`${e.classModifierPrefix}disabled`],t&&e.styles[`${e.classModifierPrefix}read-only`],N);return a.jsxs("div",{className:Fe,style:{...O,maxWidth:R},onMouseDownCapture:ce,children:[a.jsx(pe.LabelProvider,{ctxId:D,ctxDisabled:i,ctxRequired:F&&!w,children:d}),a.jsx("div",{...H,ref:G,id:M,role:"group","aria-label":B,"aria-labelledby":W,"aria-disabled":i||void 0,"aria-required":F||void 0,"aria-invalid":y||void 0,"aria-describedby":U,"aria-errormessage":_?b:void 0,tabIndex:le,className:e.styles[e.staticDateFieldClassNames.field],onMouseDown:re,onFocus:se,children:a.jsx(r.DateFieldSegments,{segmentText:X,segmentValues:m,focusedSegment:x,disabled:i,readOnly:t,onSegmentFocus:g,onSegmentBlur:te,onSegmentInput:ue,onSegmentKeyDown:ne,registerSegmentRef:Q})}),a.jsx("input",{type:"hidden",name:c,value:ve.toISODateString(p),disabled:i}),a.jsxs(xe.HelperTextProvider,{ctxId:k,ctxDisabled:i,children:[n,_&&a.jsx(me.HelperText,{id:b,appearance:"negative",children:o})]}),z(A)]})});exports.DateField=Pe;
|
|
@@ -1,49 +1,49 @@
|
|
|
1
|
-
import { jsxs as
|
|
2
|
-
import
|
|
3
|
-
import { forwardRef as
|
|
4
|
-
import { s as a, b as
|
|
5
|
-
import { t as
|
|
6
|
-
import { H as
|
|
7
|
-
import { LabelProvider as
|
|
8
|
-
import { HelperTextProvider as
|
|
1
|
+
import { jsxs as S, jsx as l } from "react/jsx-runtime";
|
|
2
|
+
import ge from "clsx";
|
|
3
|
+
import { forwardRef as ve } from "react";
|
|
4
|
+
import { s as a, b as De, c as s, a as Fe } from "../../../chunks/DateField.Segment.C2qoaY0Z.js";
|
|
5
|
+
import { t as he } from "../../../chunks/constants.Cruz2A1w.js";
|
|
6
|
+
import { H as xe } from "../../../chunks/form.context.cEuTL68U.js";
|
|
7
|
+
import { LabelProvider as ye } from "../../Form/contexts/label.context.es.js";
|
|
8
|
+
import { HelperTextProvider as Se } from "../../Form/contexts/helperText.context.es.js";
|
|
9
9
|
import { useUniversalRef as Ie } from "../../Form/hooks/useUniversalRef.hook.es.js";
|
|
10
|
-
import { DateFieldSegments as
|
|
11
|
-
import { toISODateString as
|
|
12
|
-
import { useDateFieldFocus as
|
|
13
|
-
import { useDateFieldForm as
|
|
14
|
-
import { useDateFieldKeyboard as
|
|
15
|
-
import { useDateFieldSegments as
|
|
16
|
-
import { useDateFieldValidity as
|
|
17
|
-
import { useDateFieldValue as
|
|
18
|
-
import { useInvalidState as
|
|
19
|
-
const
|
|
10
|
+
import { DateFieldSegments as we, PARTS_ORDER as I } from "./DateField.Segments.es.js";
|
|
11
|
+
import { toISODateString as Re } from "./DateField.utils.es.js";
|
|
12
|
+
import { useDateFieldFocus as Ne } from "./useDateFieldFocus.es.js";
|
|
13
|
+
import { useDateFieldForm as Ve } from "./useDateFieldForm.es.js";
|
|
14
|
+
import { useDateFieldKeyboard as Be } from "./useDateFieldKeyboard.es.js";
|
|
15
|
+
import { useDateFieldSegments as Ce } from "./useDateFieldSegments.es.js";
|
|
16
|
+
import { useDateFieldValidity as Oe } from "./useDateFieldValidity.es.js";
|
|
17
|
+
import { useDateFieldValue as Pe } from "./useDateFieldValue.es.js";
|
|
18
|
+
import { useInvalidState as Te } from "./useInvalidState.es.js";
|
|
19
|
+
const Ze = ve(
|
|
20
20
|
function({
|
|
21
21
|
value: w,
|
|
22
22
|
defaultValue: R,
|
|
23
23
|
onChange: N,
|
|
24
|
-
label:
|
|
25
|
-
helperText:
|
|
26
|
-
error:
|
|
24
|
+
label: o = null,
|
|
25
|
+
helperText: t = null,
|
|
26
|
+
error: n,
|
|
27
27
|
hideRequiredMarker: V = !1,
|
|
28
28
|
validationRules: B,
|
|
29
29
|
width: C,
|
|
30
|
-
theme:
|
|
30
|
+
theme: m,
|
|
31
31
|
fluid: O = !1,
|
|
32
32
|
disabled: P = !1,
|
|
33
33
|
readOnly: T = !1,
|
|
34
34
|
required: M = !1,
|
|
35
|
-
name:
|
|
35
|
+
name: u,
|
|
36
36
|
id: q,
|
|
37
37
|
className: E,
|
|
38
38
|
style: H,
|
|
39
39
|
"aria-label": L,
|
|
40
40
|
"aria-describedby": $,
|
|
41
|
-
"aria-labelledby":
|
|
42
|
-
...
|
|
41
|
+
"aria-labelledby": j,
|
|
42
|
+
...K
|
|
43
43
|
}, W) {
|
|
44
44
|
const {
|
|
45
45
|
disabled: e,
|
|
46
|
-
readOnly:
|
|
46
|
+
readOnly: d,
|
|
47
47
|
required: f,
|
|
48
48
|
invalid: A,
|
|
49
49
|
errorMessageProvided: c,
|
|
@@ -55,95 +55,98 @@ const Ye = ge(
|
|
|
55
55
|
ariaDescribedBy: z,
|
|
56
56
|
ariaLabelledBy: G,
|
|
57
57
|
showErrors: J
|
|
58
|
-
} =
|
|
59
|
-
name:
|
|
58
|
+
} = Ve({
|
|
59
|
+
name: u,
|
|
60
60
|
disabled: P,
|
|
61
61
|
readOnly: T,
|
|
62
62
|
required: M,
|
|
63
63
|
defaultValue: R,
|
|
64
|
-
error:
|
|
65
|
-
hasHelperText: !!
|
|
66
|
-
hasLabel: !!
|
|
64
|
+
error: n,
|
|
65
|
+
hasHelperText: !!t,
|
|
66
|
+
hasLabel: !!o,
|
|
67
67
|
validationRules: B,
|
|
68
68
|
ariaDescribedBy: $,
|
|
69
|
-
ariaLabelledBy:
|
|
70
|
-
}), { refFn: Q, ref: g } = Ie(W), { segmentRefs: X, registerSegmentRef: Y } =
|
|
69
|
+
ariaLabelledBy: j
|
|
70
|
+
}), { refFn: Q, ref: g } = Ie(W), { segmentRefs: X, registerSegmentRef: Y } = Ce(), {
|
|
71
71
|
segmentText: Z,
|
|
72
72
|
segmentValues: v,
|
|
73
73
|
currentValue: D,
|
|
74
74
|
wasTouched: ee,
|
|
75
75
|
appendDigit: ae,
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
76
|
+
adjustSegment: re,
|
|
77
|
+
beginSegmentEdit: le,
|
|
78
|
+
commitOnBlur: ie
|
|
79
|
+
} = Pe({
|
|
79
80
|
value: w,
|
|
80
81
|
defaultValue: U,
|
|
81
82
|
onChange: N
|
|
82
83
|
}), {
|
|
83
84
|
focusedSegment: F,
|
|
84
|
-
fieldTabIndex:
|
|
85
|
+
fieldTabIndex: se,
|
|
85
86
|
handleSegmentFocus: h,
|
|
86
|
-
handleFieldFocus:
|
|
87
|
-
handleFieldBlur:
|
|
88
|
-
handleFieldMouseDown:
|
|
87
|
+
handleFieldFocus: de,
|
|
88
|
+
handleFieldBlur: oe,
|
|
89
|
+
handleFieldMouseDown: te,
|
|
89
90
|
focusNext: x,
|
|
90
|
-
focusPrevious:
|
|
91
|
-
} =
|
|
91
|
+
focusPrevious: ne
|
|
92
|
+
} = Ne({
|
|
92
93
|
disabled: e,
|
|
93
94
|
fieldRef: g,
|
|
94
95
|
segmentRefs: X,
|
|
95
|
-
partsOrder:
|
|
96
|
-
onSegmentFocusChange:
|
|
97
|
-
onFieldBlur:
|
|
98
|
-
}),
|
|
96
|
+
partsOrder: I,
|
|
97
|
+
onSegmentFocusChange: le,
|
|
98
|
+
onFieldBlur: ie
|
|
99
|
+
}), me = Be({
|
|
99
100
|
disabled: e,
|
|
101
|
+
readOnly: d,
|
|
100
102
|
fieldRef: g,
|
|
101
103
|
focusNext: x,
|
|
102
|
-
focusPrevious:
|
|
103
|
-
|
|
104
|
+
focusPrevious: ne,
|
|
105
|
+
adjustSegment: re
|
|
106
|
+
}), { isInvalid: ue } = Oe({
|
|
104
107
|
segments: v,
|
|
105
108
|
currentValue: D,
|
|
106
109
|
wasTouched: ee,
|
|
107
110
|
isFocused: F !== null
|
|
108
|
-
}),
|
|
109
|
-
const { advanced:
|
|
110
|
-
|
|
111
|
-
}, y =
|
|
111
|
+
}), fe = (r, i) => {
|
|
112
|
+
const { advanced: be } = ae(r, i);
|
|
113
|
+
be && x(r);
|
|
114
|
+
}, y = Te({
|
|
112
115
|
formInvalid: A,
|
|
113
|
-
valueInvalid:
|
|
114
|
-
}),
|
|
116
|
+
valueInvalid: ue
|
|
117
|
+
}), ce = (r) => {
|
|
115
118
|
if (e) return;
|
|
116
119
|
const i = r.target.closest("label");
|
|
117
|
-
!i || i.id !== b || (r.preventDefault(), h(
|
|
118
|
-
},
|
|
119
|
-
a[
|
|
120
|
-
|
|
120
|
+
!i || i.id !== b || (r.preventDefault(), h(I[0]));
|
|
121
|
+
}, pe = ge(
|
|
122
|
+
a[De],
|
|
123
|
+
m && he(m),
|
|
121
124
|
O && a[`${s}fluid`],
|
|
122
125
|
y && a[`${s}error`],
|
|
123
126
|
e && a[`${s}disabled`],
|
|
124
|
-
|
|
127
|
+
d && a[`${s}read-only`],
|
|
125
128
|
E
|
|
126
129
|
);
|
|
127
|
-
return /* @__PURE__ */
|
|
130
|
+
return /* @__PURE__ */ S(
|
|
128
131
|
"div",
|
|
129
132
|
{
|
|
130
|
-
className:
|
|
133
|
+
className: pe,
|
|
131
134
|
style: { ...H, maxWidth: C },
|
|
132
|
-
onMouseDownCapture:
|
|
135
|
+
onMouseDownCapture: ce,
|
|
133
136
|
children: [
|
|
134
137
|
/* @__PURE__ */ l(
|
|
135
|
-
|
|
138
|
+
ye,
|
|
136
139
|
{
|
|
137
140
|
ctxId: b,
|
|
138
141
|
ctxDisabled: e,
|
|
139
142
|
ctxRequired: f && !V,
|
|
140
|
-
children:
|
|
143
|
+
children: o
|
|
141
144
|
}
|
|
142
145
|
),
|
|
143
146
|
/* @__PURE__ */ l(
|
|
144
147
|
"div",
|
|
145
148
|
{
|
|
146
|
-
...
|
|
149
|
+
...K,
|
|
147
150
|
ref: Q,
|
|
148
151
|
id: q,
|
|
149
152
|
role: "group",
|
|
@@ -154,22 +157,22 @@ const Ye = ge(
|
|
|
154
157
|
"aria-invalid": y || void 0,
|
|
155
158
|
"aria-describedby": z,
|
|
156
159
|
"aria-errormessage": c ? p : void 0,
|
|
157
|
-
tabIndex:
|
|
158
|
-
className: a[
|
|
159
|
-
onMouseDown:
|
|
160
|
-
onFocus:
|
|
160
|
+
tabIndex: se,
|
|
161
|
+
className: a[Fe.field],
|
|
162
|
+
onMouseDown: te,
|
|
163
|
+
onFocus: de,
|
|
161
164
|
children: /* @__PURE__ */ l(
|
|
162
|
-
|
|
165
|
+
we,
|
|
163
166
|
{
|
|
164
167
|
segmentText: Z,
|
|
165
168
|
segmentValues: v,
|
|
166
169
|
focusedSegment: F,
|
|
167
170
|
disabled: e,
|
|
168
|
-
readOnly:
|
|
171
|
+
readOnly: d,
|
|
169
172
|
onSegmentFocus: h,
|
|
170
|
-
onSegmentBlur:
|
|
171
|
-
onSegmentInput:
|
|
172
|
-
onSegmentKeyDown:
|
|
173
|
+
onSegmentBlur: oe,
|
|
174
|
+
onSegmentInput: fe,
|
|
175
|
+
onSegmentKeyDown: me,
|
|
173
176
|
registerSegmentRef: Y
|
|
174
177
|
}
|
|
175
178
|
)
|
|
@@ -179,14 +182,14 @@ const Ye = ge(
|
|
|
179
182
|
"input",
|
|
180
183
|
{
|
|
181
184
|
type: "hidden",
|
|
182
|
-
name:
|
|
183
|
-
value:
|
|
185
|
+
name: u,
|
|
186
|
+
value: Re(D),
|
|
184
187
|
disabled: e
|
|
185
188
|
}
|
|
186
189
|
),
|
|
187
|
-
/* @__PURE__ */
|
|
188
|
-
|
|
189
|
-
c && /* @__PURE__ */ l(
|
|
190
|
+
/* @__PURE__ */ S(Se, { ctxId: _, ctxDisabled: e, children: [
|
|
191
|
+
t,
|
|
192
|
+
c && /* @__PURE__ */ l(xe, { id: p, appearance: "negative", children: n })
|
|
190
193
|
] }),
|
|
191
194
|
J(k)
|
|
192
195
|
]
|
|
@@ -195,5 +198,5 @@ const Ye = ge(
|
|
|
195
198
|
}
|
|
196
199
|
);
|
|
197
200
|
export {
|
|
198
|
-
|
|
201
|
+
Ze as DateField
|
|
199
202
|
};
|
|
@@ -4,6 +4,11 @@ import { ThemeTypes } from '@viasat/beam-shared/utils/constants';
|
|
|
4
4
|
import { FormValidator } from '@viasat/beam-shared/components/form';
|
|
5
5
|
type DateFieldInputAttributes = Omit<ComponentPropsWithRef<'input'>, 'value' | 'defaultValue' | 'onChange' | 'min' | 'max' | 'type' | 'size' | 'ref' | 'form' | 'autoComplete' | 'inputMode'>;
|
|
6
6
|
export type SegmentType = 'day' | 'month' | 'year';
|
|
7
|
+
/**
|
|
8
|
+
* Argument to `adjustSegment` / `adjustSegmentValue`.
|
|
9
|
+
* A numeric delta (e.g. ±1, ±5) or a boundary keyword for Home/End.
|
|
10
|
+
*/
|
|
11
|
+
export type SegmentAdjustment = number | 'min' | 'max';
|
|
7
12
|
export type FocusTarget = SegmentType | 'all' | null;
|
|
8
13
|
/** Per-segment values. Month is 1-12 (NOT 0-11). */
|
|
9
14
|
export interface SegmentValues {
|
|
@@ -97,6 +102,12 @@ export interface DateFieldSegmentProps {
|
|
|
97
102
|
type: SegmentType;
|
|
98
103
|
/** Numeric segment value — used for `aria-valuenow`. `null` when the segment has no committed value. */
|
|
99
104
|
value: Nullable<number>;
|
|
105
|
+
/**
|
|
106
|
+
* The upper bound announced as `aria-valuemax`.
|
|
107
|
+
* For day: month-aware (e.g. 28 for Feb non-leap); for month: 12; for year: 9999.
|
|
108
|
+
* Computed by `DateField.Segments` so the segment itself stays a pure renderer.
|
|
109
|
+
*/
|
|
110
|
+
valueMax: number;
|
|
100
111
|
/** Pre-computed text to render inside the segment (buffer, formatted value, or placeholder). */
|
|
101
112
|
displayValue: string;
|
|
102
113
|
/** True when `displayValue` IS the placeholder (drives `data-placeholder` CSS hook). */
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const i=require("./DateField.validation.cjs.js"),u={day:"",month:"",year:""},
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const i=require("./DateField.validation.cjs.js"),s=31,o=12,m={day:s,month:o,year:9999},u=(e,t,n)=>Math.min(n,Math.max(t,e)),g=(e,t)=>((e-1)%t+t)%t+1,S=2024,y=(e,t)=>t==null?31:new Date(e??S,t,0).getDate(),M=()=>{const e=new Date;return{day:e.getDate(),month:e.getMonth()+1,year:e.getFullYear()}},N=(e,t,n,r)=>{if(n==="min")return e==="year"?null:1;if(n==="max")return e==="year"?null:e==="day"?r.daysInMonth:o;if(t==null)return r.today[e];if(e==="year")return u(t+n,1,9999);const a=e==="day"?s:o;return g(t+n,a)},T={day:"",month:"",year:""},c=e=>e instanceof Date&&!Number.isNaN(e.getTime()),d=e=>{const{day:t,month:n,year:r}=e;if(t==null||n==null||r==null)return null;const a=new Date(r,n-1,t);return a.setFullYear(r),Number.isNaN(a.getTime())||a.getFullYear()!==r||a.getMonth()!==n-1||a.getDate()!==t?null:a},f=(e,t)=>e==null&&t==null?!0:e==null||t==null?!1:e.getTime()===t.getTime(),_=e=>{if(!c(e))return"";const t=String(e.getFullYear()).padStart(4,"0"),n=String(e.getMonth()+1).padStart(2,"0"),r=String(e.getDate()).padStart(2,"0");return`${t}-${n}-${r}`},h=e=>e.filter(t=>t.type!=="literal").map(t=>t.type),D=e=>c(e)?{day:String(e.getDate()).padStart(2,"0"),month:String(e.getMonth()+1).padStart(2,"0"),year:String(e.getFullYear()).padStart(4,"0")}:T,l=(e,t)=>{if(t===""||e==="year"&&t.length<i.SEGMENT_MAX_LENGTH.year)return null;const n=parseInt(t,10);return Number.isNaN(n)||n===0?null:n},A=e=>d({day:l("day",e.day),month:l("month",e.month),year:l("year",e.year)}),E=(e,t)=>t===""?"":t.padStart(i.SEGMENT_MAX_LENGTH[e],"0"),p=(e,t,n)=>t===""?{displayValue:n,isPlaceholder:!0}:{displayValue:t.padStart(i.SEGMENT_MAX_LENGTH[e],"0"),isPlaceholder:!1},V=e=>{const t=window.getSelection();if(!t)return;const n=document.createRange();n.selectNodeContents(e),t.removeAllRanges(),t.addRange(n)},F=e=>{var n;if(!e)return;const t=(n=window.getSelection)==null?void 0:n.call(window);t&&t.rangeCount>0&&e.contains(t.anchorNode)&&t.removeAllRanges()};exports.DAY_SPIN_MAX=s;exports.MONTH_MAX=o;exports.SEGMENT_ARIA_MAX=m;exports.adjustSegmentValue=N;exports.clamp=u;exports.clearSelectionWithin=F;exports.deriveValue=d;exports.deriveValueFromText=A;exports.getDaysInMonth=y;exports.getSegmentDisplay=p;exports.getSegmentOrder=h;exports.isSameDateValue=f;exports.normalizeSegmentText=E;exports.segmentNumber=l;exports.segmentTextFromValue=D;exports.selectElementContents=V;exports.toISODateString=_;exports.todayParts=M;exports.wrapInRange=g;
|
|
@@ -1,5 +1,88 @@
|
|
|
1
1
|
import { Nullable } from '@viasat/beam-shared/utils/types';
|
|
2
|
-
import { DateFieldPart, SegmentText, SegmentType, SegmentValues } from './DateField.types';
|
|
2
|
+
import { DateFieldPart, SegmentAdjustment, SegmentText, SegmentType, SegmentValues } from './DateField.types';
|
|
3
|
+
/**
|
|
4
|
+
* Absolute spin ceiling for day — independent of the current month.
|
|
5
|
+
*
|
|
6
|
+
* Intentional divergence (MUI-X model, not React Aria clamp): the day segment
|
|
7
|
+
* spins to this absolute max (31) even though `aria-valuemax` is month-aware
|
|
8
|
+
* (28–30, computed in `DateField.Segments`). So a user can spin ONE step past the
|
|
9
|
+
* announced ceiling into an out-of-range day (e.g. April 30 → 31); the validity
|
|
10
|
+
* layer surfaces that via `aria-invalid` rather than clamping to `daysInMonth`.
|
|
11
|
+
* The announced-vs-reachable gap is deliberate — see docs/adr/calendar.md (spin
|
|
12
|
+
* model). Out-of-range days (e.g. Feb 31) are caught by the validity layer, not here.
|
|
13
|
+
*/
|
|
14
|
+
export declare const DAY_SPIN_MAX = 31;
|
|
15
|
+
/** Absolute maximum for month (1-based). */
|
|
16
|
+
export declare const MONTH_MAX = 12;
|
|
17
|
+
/**
|
|
18
|
+
* Announced aria-valuemax per segment type.
|
|
19
|
+
* Day uses the absolute calendar max (31); month-aware override for day is
|
|
20
|
+
* computed in `DateField.Segments` and passed as `valueMax` to `DateFieldSegment`.
|
|
21
|
+
*/
|
|
22
|
+
export declare const SEGMENT_ARIA_MAX: Record<SegmentType, number>;
|
|
23
|
+
/** Clamps `n` to `[lo, hi]` (inclusive). */
|
|
24
|
+
export declare const clamp: (n: number, lo: number, hi: number) => number;
|
|
25
|
+
/**
|
|
26
|
+
* Modular wrap within a 1-based inclusive range `[1, max]`.
|
|
27
|
+
* Handles negative deltas correctly (e.g. 1 − 1 in a max-12 range → 12).
|
|
28
|
+
*/
|
|
29
|
+
export declare const wrapInRange: (n: number, max: number) => number;
|
|
30
|
+
/**
|
|
31
|
+
* Returns the number of days in the given month/year combination.
|
|
32
|
+
*
|
|
33
|
+
* - `month` is 1-based (1 = January, 12 = December).
|
|
34
|
+
* - When `month` is null (unknown), returns 31 (conservative maximum).
|
|
35
|
+
* - When `month` is provided but `year` is null, uses {@link LEAP_YEAR_FALLBACK}
|
|
36
|
+
* so February correctly reports 29 days (leap-safe fallback).
|
|
37
|
+
*/
|
|
38
|
+
export declare const getDaysInMonth: (year: Nullable<number>, month: Nullable<number>) => number;
|
|
39
|
+
/**
|
|
40
|
+
* Returns today's date parts as a plain object.
|
|
41
|
+
* Extracted so callers in the value hook and DF-8 can share the same helper.
|
|
42
|
+
*/
|
|
43
|
+
export declare const todayParts: () => {
|
|
44
|
+
day: number;
|
|
45
|
+
month: number;
|
|
46
|
+
year: number;
|
|
47
|
+
};
|
|
48
|
+
/** Context passed into {@link adjustSegmentValue} — kept pure by the caller. */
|
|
49
|
+
export interface AdjustSegmentContext {
|
|
50
|
+
/** Days in the current month (use {@link getDaysInMonth} to compute). */
|
|
51
|
+
daysInMonth: number;
|
|
52
|
+
/** Today's local-date values used to seed an empty segment on the first press. */
|
|
53
|
+
today: {
|
|
54
|
+
day: number;
|
|
55
|
+
month: number;
|
|
56
|
+
year: number;
|
|
57
|
+
};
|
|
58
|
+
}
|
|
59
|
+
/**
|
|
60
|
+
* Computes the next numeric value for a date segment after an increment,
|
|
61
|
+
* decrement, or boundary jump.
|
|
62
|
+
*
|
|
63
|
+
* Returns `null` to signal "no change" (Home/End on the year segment, which
|
|
64
|
+
* has no meaningful bound until DF-10 adds minDate/maxDate).
|
|
65
|
+
*
|
|
66
|
+
* Rules:
|
|
67
|
+
* - **day spin (numeric delta)**: modular wrap within `[1, DAY_SPIN_MAX]` — the
|
|
68
|
+
* absolute calendar maximum. Out-of-range dates (e.g. Feb 31) are flagged
|
|
69
|
+
* invalid by the existing validity layer (`useDateFieldValidity`), not clamped here.
|
|
70
|
+
* - **day End (`'max'`)**: uses `ctx.daysInMonth` — the last valid day of the
|
|
71
|
+
* currently selected month (month-aware).
|
|
72
|
+
* - **month**: modular wrap within `[1, MONTH_MAX]`.
|
|
73
|
+
* - **year**: clamp to `[1, 9999]`; no wrap.
|
|
74
|
+
* - **Empty segment + numeric delta**: seeds to `ctx.today[type]` (first press
|
|
75
|
+
* sets today's value; subsequent presses step from there).
|
|
76
|
+
* - **`'min'`**: returns 1 for day/month, null for year.
|
|
77
|
+
* - **`'max'`**: returns `ctx.daysInMonth` for day (End → month-aware last
|
|
78
|
+
* valid day), MONTH_MAX for month, null for year.
|
|
79
|
+
*
|
|
80
|
+
* @param type - Segment kind (`'day'`, `'month'`, or `'year'`).
|
|
81
|
+
* @param current - Current numeric value of the segment, or `null` when empty.
|
|
82
|
+
* @param amount - Numeric delta (e.g. ±1, ±5) or `'min'`/`'max'` for Home/End.
|
|
83
|
+
* @param ctx - Pure context: days-in-month and today's date parts.
|
|
84
|
+
*/
|
|
85
|
+
export declare const adjustSegmentValue: (type: SegmentType, current: Nullable<number>, amount: SegmentAdjustment, ctx: AdjustSegmentContext) => Nullable<number>;
|
|
3
86
|
export declare const deriveValue: (segments: SegmentValues) => Nullable<Date>;
|
|
4
87
|
export declare const isSameDateValue: (a: Nullable<Date>, b: Nullable<Date>) => boolean;
|
|
5
88
|
export declare const toISODateString: (value: Nullable<Date>) => string;
|
|
@@ -1,51 +1,74 @@
|
|
|
1
|
-
import { SEGMENT_MAX_LENGTH as
|
|
2
|
-
const
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
return
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
} :
|
|
18
|
-
|
|
19
|
-
|
|
1
|
+
import { SEGMENT_MAX_LENGTH as s } from "./DateField.validation.es.js";
|
|
2
|
+
const i = 31, o = 12, f = {
|
|
3
|
+
day: i,
|
|
4
|
+
month: o,
|
|
5
|
+
year: 9999
|
|
6
|
+
}, c = (t, e, n) => Math.min(n, Math.max(e, t)), g = (t, e) => ((t - 1) % e + e) % e + 1, d = 2024, h = (t, e) => e == null ? 31 : new Date(t ?? d, e, 0).getDate(), N = () => {
|
|
7
|
+
const t = /* @__PURE__ */ new Date();
|
|
8
|
+
return { day: t.getDate(), month: t.getMonth() + 1, year: t.getFullYear() };
|
|
9
|
+
}, M = (t, e, n, r) => {
|
|
10
|
+
if (n === "min") return t === "year" ? null : 1;
|
|
11
|
+
if (n === "max")
|
|
12
|
+
return t === "year" ? null : t === "day" ? r.daysInMonth : o;
|
|
13
|
+
if (e == null) return r.today[t];
|
|
14
|
+
if (t === "year") return c(e + n, 1, 9999);
|
|
15
|
+
const a = t === "day" ? i : o;
|
|
16
|
+
return g(e + n, a);
|
|
17
|
+
}, m = { day: "", month: "", year: "" }, u = (t) => t instanceof Date && !Number.isNaN(t.getTime()), y = (t) => {
|
|
18
|
+
const { day: e, month: n, year: r } = t;
|
|
19
|
+
if (e == null || n == null || r == null) return null;
|
|
20
|
+
const a = new Date(r, n - 1, e);
|
|
21
|
+
return a.setFullYear(r), Number.isNaN(a.getTime()) || a.getFullYear() !== r || a.getMonth() !== n - 1 || a.getDate() !== e ? null : a;
|
|
22
|
+
}, D = (t, e) => t == null && e == null ? !0 : t == null || e == null ? !1 : t.getTime() === e.getTime(), p = (t) => {
|
|
23
|
+
if (!u(t)) return "";
|
|
24
|
+
const e = String(t.getFullYear()).padStart(4, "0"), n = String(t.getMonth() + 1).padStart(2, "0"), r = String(t.getDate()).padStart(2, "0");
|
|
25
|
+
return `${e}-${n}-${r}`;
|
|
26
|
+
}, T = (t) => t.filter(
|
|
27
|
+
(e) => e.type !== "literal"
|
|
28
|
+
).map((e) => e.type), A = (t) => u(t) ? {
|
|
29
|
+
day: String(t.getDate()).padStart(2, "0"),
|
|
30
|
+
month: String(t.getMonth() + 1).padStart(2, "0"),
|
|
31
|
+
year: String(t.getFullYear()).padStart(4, "0")
|
|
32
|
+
} : m, l = (t, e) => {
|
|
33
|
+
if (e === "" || t === "year" && e.length < s.year) return null;
|
|
34
|
+
const n = parseInt(e, 10);
|
|
20
35
|
return Number.isNaN(n) || n === 0 ? null : n;
|
|
21
|
-
},
|
|
22
|
-
day: l("day",
|
|
23
|
-
month: l("month",
|
|
24
|
-
year: l("year",
|
|
25
|
-
}),
|
|
26
|
-
displayValue:
|
|
36
|
+
}, E = (t) => y({
|
|
37
|
+
day: l("day", t.day),
|
|
38
|
+
month: l("month", t.month),
|
|
39
|
+
year: l("year", t.year)
|
|
40
|
+
}), _ = (t, e) => e === "" ? "" : e.padStart(s[t], "0"), w = (t, e, n) => e === "" ? { displayValue: n, isPlaceholder: !0 } : {
|
|
41
|
+
displayValue: e.padStart(s[t], "0"),
|
|
27
42
|
isPlaceholder: !1
|
|
28
|
-
},
|
|
29
|
-
const
|
|
30
|
-
if (!
|
|
43
|
+
}, F = (t) => {
|
|
44
|
+
const e = window.getSelection();
|
|
45
|
+
if (!e) return;
|
|
31
46
|
const n = document.createRange();
|
|
32
|
-
n.selectNodeContents(
|
|
33
|
-
},
|
|
47
|
+
n.selectNodeContents(t), e.removeAllRanges(), e.addRange(n);
|
|
48
|
+
}, V = (t) => {
|
|
34
49
|
var n;
|
|
35
|
-
if (!
|
|
36
|
-
const
|
|
37
|
-
|
|
50
|
+
if (!t) return;
|
|
51
|
+
const e = (n = window.getSelection) == null ? void 0 : n.call(window);
|
|
52
|
+
e && e.rangeCount > 0 && t.contains(e.anchorNode) && e.removeAllRanges();
|
|
38
53
|
};
|
|
39
54
|
export {
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
55
|
+
i as DAY_SPIN_MAX,
|
|
56
|
+
o as MONTH_MAX,
|
|
57
|
+
f as SEGMENT_ARIA_MAX,
|
|
58
|
+
M as adjustSegmentValue,
|
|
59
|
+
c as clamp,
|
|
60
|
+
V as clearSelectionWithin,
|
|
61
|
+
y as deriveValue,
|
|
62
|
+
E as deriveValueFromText,
|
|
63
|
+
h as getDaysInMonth,
|
|
64
|
+
w as getSegmentDisplay,
|
|
65
|
+
T as getSegmentOrder,
|
|
66
|
+
D as isSameDateValue,
|
|
67
|
+
_ as normalizeSegmentText,
|
|
47
68
|
l as segmentNumber,
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
69
|
+
A as segmentTextFromValue,
|
|
70
|
+
F as selectElementContents,
|
|
71
|
+
p as toISODateString,
|
|
72
|
+
N as todayParts,
|
|
73
|
+
g as wrapInRange
|
|
51
74
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const s=require("react");function d({disabled:c,readOnly:a,fieldRef:u,focusNext:n,focusPrevious:o,adjustSegment:t}){const y=s.useMemo(()=>{const i={ArrowRight:({segment:r,isRTL:e})=>((e?o:n)(r),!0),ArrowLeft:({segment:r,isRTL:e})=>((e?n:o)(r),!0)};return a?i:{...i,ArrowUp:({segment:r})=>t(r,1),ArrowDown:({segment:r})=>t(r,-1),PageUp:({segment:r})=>t(r,5),PageDown:({segment:r})=>t(r,-5),Home:({segment:r})=>t(r,"min"),End:({segment:r})=>t(r,"max")}},[t,n,o,a]);return s.useCallback((i,r)=>{if(c||r.altKey||r.ctrlKey||r.metaKey||r.shiftKey)return;const e=y[r.key];if(!e)return;const l=u.current,b=!!l&&(getComputedStyle(l).direction==="rtl"||!!l.closest('[dir="rtl"]'));e({segment:i,event:r,isRTL:b})&&r.preventDefault()},[c,y,u])}exports.useDateFieldKeyboard=d;
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { KeyboardEvent, RefObject } from 'react';
|
|
2
|
-
import { SegmentType } from './DateField.types';
|
|
2
|
+
import { SegmentAdjustment, SegmentType } from './DateField.types';
|
|
3
3
|
/** Per-call context passed to each key binding. */
|
|
4
4
|
export interface SegmentKeyContext {
|
|
5
5
|
/** Segment the key event fired on. */
|
|
@@ -9,16 +9,36 @@ export interface SegmentKeyContext {
|
|
|
9
9
|
/** Whether the field is rendered right-to-left. */
|
|
10
10
|
isRTL: boolean;
|
|
11
11
|
}
|
|
12
|
-
/**
|
|
13
|
-
|
|
12
|
+
/**
|
|
13
|
+
* A key binding: runs the action for one key, given the call context, and
|
|
14
|
+
* returns whether it handled the key. The dispatcher `preventDefault`s only when
|
|
15
|
+
* a binding returns `true`, so a binding can decline (return `false`) to leave
|
|
16
|
+
* the key to the browser's native default (e.g. page scroll).
|
|
17
|
+
*/
|
|
18
|
+
export type SegmentKeyBinding = (ctx: SegmentKeyContext) => boolean;
|
|
14
19
|
export interface UseDateFieldKeyboardArgs {
|
|
15
20
|
/** When true, the dispatcher ignores all keys. */
|
|
16
21
|
disabled: boolean;
|
|
22
|
+
/**
|
|
23
|
+
* When true, value-mutation keys (ArrowUp/Down, PageUp/Down, Home, End) are
|
|
24
|
+
* left unbound so they fall through to the browser (native page scroll);
|
|
25
|
+
* only the navigation keys (ArrowLeft/Right) are bound. Blocks value mutation
|
|
26
|
+
* without suppressing scroll.
|
|
27
|
+
*/
|
|
28
|
+
readOnly: boolean;
|
|
17
29
|
/** Field root ref, used to detect RTL direction. */
|
|
18
30
|
fieldRef: RefObject<HTMLDivElement>;
|
|
19
31
|
/** Move focus to the next segment in `PARTS_ORDER`. */
|
|
20
32
|
focusNext: (segment: SegmentType) => void;
|
|
21
33
|
/** Move focus to the previous segment in `PARTS_ORDER`. */
|
|
22
34
|
focusPrevious: (segment: SegmentType) => void;
|
|
35
|
+
/**
|
|
36
|
+
* Increment, decrement, or jump a segment to its min/max boundary.
|
|
37
|
+
* Provided by `useDateFieldValue`. Numeric `amount` wraps day/month and
|
|
38
|
+
* clamps year; `'min'`/`'max'` map to Home/End respectively. Returns `false`
|
|
39
|
+
* on a no-op (year `'min'`/`'max'` until DF-10 adds year bounds) so the
|
|
40
|
+
* dispatcher leaves the key to native page scroll.
|
|
41
|
+
*/
|
|
42
|
+
adjustSegment: (type: SegmentType, amount: SegmentAdjustment) => boolean;
|
|
23
43
|
}
|
|
24
|
-
export declare function useDateFieldKeyboard({ disabled, fieldRef, focusNext, focusPrevious, }: UseDateFieldKeyboardArgs): (segment: SegmentType, event: KeyboardEvent<HTMLSpanElement>) => void;
|
|
44
|
+
export declare function useDateFieldKeyboard({ disabled, readOnly, fieldRef, focusNext, focusPrevious, adjustSegment, }: UseDateFieldKeyboardArgs): (segment: SegmentType, event: KeyboardEvent<HTMLSpanElement>) => void;
|
|
@@ -1,33 +1,45 @@
|
|
|
1
|
-
import { useMemo as
|
|
2
|
-
function
|
|
3
|
-
disabled:
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
1
|
+
import { useMemo as u, useCallback as K } from "react";
|
|
2
|
+
function A({
|
|
3
|
+
disabled: e,
|
|
4
|
+
readOnly: p,
|
|
5
|
+
fieldRef: w,
|
|
6
|
+
focusNext: t,
|
|
7
|
+
focusPrevious: l,
|
|
8
|
+
adjustSegment: i
|
|
7
9
|
}) {
|
|
8
|
-
const y =
|
|
9
|
-
() =>
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
10
|
+
const y = u(
|
|
11
|
+
() => {
|
|
12
|
+
const o = {
|
|
13
|
+
// Nav keys always own the event (arrows are contentEditable caret keys we
|
|
14
|
+
// suppress even at the first/last segment), so they always report handled.
|
|
15
|
+
ArrowRight: ({ segment: r, isRTL: n }) => ((n ? l : t)(r), !0),
|
|
16
|
+
ArrowLeft: ({ segment: r, isRTL: n }) => ((n ? t : l)(r), !0)
|
|
17
|
+
};
|
|
18
|
+
return p ? o : {
|
|
19
|
+
...o,
|
|
20
|
+
ArrowUp: ({ segment: r }) => i(r, 1),
|
|
21
|
+
ArrowDown: ({ segment: r }) => i(r, -1),
|
|
22
|
+
PageUp: ({ segment: r }) => i(r, 5),
|
|
23
|
+
PageDown: ({ segment: r }) => i(r, -5),
|
|
24
|
+
Home: ({ segment: r }) => i(r, "min"),
|
|
25
|
+
End: ({ segment: r }) => i(r, "max")
|
|
26
|
+
// ── Extension points ─────────────────────────────────────────────
|
|
27
|
+
// DF-5: Backspace / Delete (clear segment) → value action
|
|
28
|
+
};
|
|
29
|
+
},
|
|
30
|
+
[i, t, l, p]
|
|
18
31
|
);
|
|
19
|
-
return
|
|
20
|
-
(
|
|
21
|
-
if (
|
|
22
|
-
const
|
|
23
|
-
if (!
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
a({ segment: t, event: r, isRTL: c });
|
|
32
|
+
return K(
|
|
33
|
+
(o, r) => {
|
|
34
|
+
if (e || r.altKey || r.ctrlKey || r.metaKey || r.shiftKey) return;
|
|
35
|
+
const n = y[r.key];
|
|
36
|
+
if (!n) return;
|
|
37
|
+
const c = w.current, a = !!c && (getComputedStyle(c).direction === "rtl" || !!c.closest('[dir="rtl"]'));
|
|
38
|
+
n({ segment: o, event: r, isRTL: a }) && r.preventDefault();
|
|
27
39
|
},
|
|
28
|
-
[
|
|
40
|
+
[e, y, w]
|
|
29
41
|
);
|
|
30
42
|
}
|
|
31
43
|
export {
|
|
32
|
-
|
|
44
|
+
A as useDateFieldKeyboard
|
|
33
45
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const n=require("react"),t=require("./DateField.utils.cjs.js"),_=require("./DateField.validation.cjs.js");function M({value:c,defaultValue:N,onChange:x}){const R=n.useRef(c!==void 0),S=R.current,[o,m]=n.useState(()=>t.segmentTextFromValue(S?c??null:N??null)),[E,b]=n.useState(!1),s=n.useRef(o),d=n.useRef(new Set),f=n.useRef(!1),V={day:t.segmentNumber("day",o.day),month:t.segmentNumber("month",o.month),year:t.segmentNumber("year",o.year)},y=t.deriveValue(V),T=n.useRef(y),D=n.useRef(S?c??null:null),g=n.useRef(x);n.useEffect(()=>{g.current=x},[x]),n.useEffect(()=>{if(!R.current||f.current||t.isSameDateValue(c??null,D.current))return;D.current=c??null;const e=t.segmentTextFromValue(c??null);s.current=e,m(e),T.current=t.deriveValueFromText(e)},[c]);const a=n.useCallback(e=>{var u;const r=t.deriveValueFromText(e);t.isSameDateValue(r,T.current)||(T.current=r,(u=g.current)==null||u.call(g,r))},[]),j=n.useCallback((e,r)=>{const u=d.current.has(e)?"":s.current[e],l=_.tryAppendDigit(e,u,r);if(l.rejected)return{advanced:!1,rejected:!0};const i={...s.current,[e]:l.newBuffer};return s.current=i,m(i),b(!0),a(i),l.shouldAdvance?d.current.add(e):d.current.delete(e),{advanced:l.shouldAdvance,rejected:!1}},[a]),v=n.useCallback((e,r)=>{const u=s.current,l=t.segmentNumber(e,u[e]),i=t.getDaysInMonth(t.segmentNumber("year",u.year),t.segmentNumber("month",u.month)),F=t.adjustSegmentValue(e,l,r,{daysInMonth:i,today:t.todayParts()});if(F==null)return!1;f.current=!0;const C=String(F).padStart(_.SEGMENT_MAX_LENGTH[e],"0"),h={...u,[e]:C};return s.current=h,m(h),b(!0),a(h),d.current.add(e),!0},[a]),k=n.useCallback(e=>{f.current=!0,d.current.add(e)},[]),w=n.useCallback(()=>{f.current=!1;const e=s.current,r={day:t.normalizeSegmentText("day",e.day),month:t.normalizeSegmentText("month",e.month),year:t.normalizeSegmentText("year",e.year)};s.current=r,m(r),b(!0),a(r)},[a]);return{segmentText:o,segmentValues:V,currentValue:y,isControlled:S,wasTouched:E,appendDigit:j,adjustSegment:v,beginSegmentEdit:k,commitOnBlur:w}}exports.useDateFieldValue=M;
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { Nullable } from '@viasat/beam-shared/utils/types';
|
|
2
|
-
import { AppendDigitResult, SegmentText, SegmentType, SegmentValues } from './DateField.types';
|
|
2
|
+
import { AppendDigitResult, SegmentAdjustment, SegmentText, SegmentType, SegmentValues } from './DateField.types';
|
|
3
3
|
export interface UseDateFieldValueArgs {
|
|
4
4
|
value?: Nullable<Date>;
|
|
5
5
|
defaultValue?: Nullable<Date>;
|
|
@@ -13,6 +13,25 @@ export interface UseDateFieldValueReturn {
|
|
|
13
13
|
isControlled: boolean;
|
|
14
14
|
wasTouched: boolean;
|
|
15
15
|
appendDigit: (type: SegmentType, digit: string) => AppendDigitResult;
|
|
16
|
+
/**
|
|
17
|
+
* Increments, decrements, or jumps a segment to its min/max boundary.
|
|
18
|
+
*
|
|
19
|
+
* - Numeric `amount` (e.g. ±1, ±5): day/month wrap modularly; year clamps
|
|
20
|
+
* to [1, 9999]. An empty segment seeds to today's value on the first press.
|
|
21
|
+
* - `'min'` / `'max'`: jump to the lower/upper bound. No-op on year (no
|
|
22
|
+
* meaningful bound until DF-10 adds minDate/maxDate).
|
|
23
|
+
*
|
|
24
|
+
* Follows the `appendDigit` mutation pattern: writes zero-padded `segmentText`,
|
|
25
|
+
* sets `wasTouched`, calls `emitIfChanged`, and marks the segment in
|
|
26
|
+
* `replaceNextRef` so a digit typed immediately after replaces rather than
|
|
27
|
+
* appends.
|
|
28
|
+
*
|
|
29
|
+
* @returns `true` if the segment was adjusted, `false` on a no-op (currently
|
|
30
|
+
* only year `'min'`/`'max'`, until DF-10 adds year bounds). The keyboard
|
|
31
|
+
* dispatcher uses this to decide whether to `preventDefault` — a no-op leaves
|
|
32
|
+
* the key to native (e.g. page scroll).
|
|
33
|
+
*/
|
|
34
|
+
adjustSegment: (type: SegmentType, amount: SegmentAdjustment) => boolean;
|
|
16
35
|
beginSegmentEdit: (type: SegmentType) => void;
|
|
17
36
|
commitOnBlur: () => void;
|
|
18
37
|
}
|
|
@@ -1,62 +1,78 @@
|
|
|
1
|
-
import { useRef as
|
|
2
|
-
import { segmentTextFromValue as v, segmentNumber as
|
|
3
|
-
import { tryAppendDigit as
|
|
4
|
-
function
|
|
5
|
-
value:
|
|
6
|
-
defaultValue:
|
|
7
|
-
onChange:
|
|
1
|
+
import { useRef as u, useState as M, useEffect as N, useCallback as i } from "react";
|
|
2
|
+
import { segmentTextFromValue as v, segmentNumber as a, deriveValue as C, isSameDateValue as w, deriveValueFromText as F, getDaysInMonth as H, adjustSegmentValue as L, todayParts as O, normalizeSegmentText as E } from "./DateField.utils.es.js";
|
|
3
|
+
import { tryAppendDigit as P, SEGMENT_MAX_LENGTH as W } from "./DateField.validation.es.js";
|
|
4
|
+
function K({
|
|
5
|
+
value: c,
|
|
6
|
+
defaultValue: I,
|
|
7
|
+
onChange: h
|
|
8
8
|
}) {
|
|
9
|
-
const
|
|
10
|
-
() => v(
|
|
11
|
-
), [B,
|
|
12
|
-
day:
|
|
13
|
-
month:
|
|
14
|
-
year:
|
|
15
|
-
},
|
|
16
|
-
|
|
17
|
-
),
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
}, [
|
|
21
|
-
if (!
|
|
22
|
-
b.current =
|
|
23
|
-
const e = v(
|
|
24
|
-
|
|
25
|
-
}, [
|
|
26
|
-
const
|
|
27
|
-
var
|
|
28
|
-
const t =
|
|
29
|
-
w(t,
|
|
30
|
-
}, []),
|
|
9
|
+
const D = u(c !== void 0), S = D.current, [d, f] = M(
|
|
10
|
+
() => v(S ? c ?? null : I ?? null)
|
|
11
|
+
), [B, T] = M(!1), r = u(d), l = u(/* @__PURE__ */ new Set()), x = u(!1), R = {
|
|
12
|
+
day: a("day", d.day),
|
|
13
|
+
month: a("month", d.month),
|
|
14
|
+
year: a("year", d.year)
|
|
15
|
+
}, j = C(R), y = u(j), b = u(
|
|
16
|
+
S ? c ?? null : null
|
|
17
|
+
), g = u(h);
|
|
18
|
+
N(() => {
|
|
19
|
+
g.current = h;
|
|
20
|
+
}, [h]), N(() => {
|
|
21
|
+
if (!D.current || x.current || w(c ?? null, b.current)) return;
|
|
22
|
+
b.current = c ?? null;
|
|
23
|
+
const e = v(c ?? null);
|
|
24
|
+
r.current = e, f(e), y.current = F(e);
|
|
25
|
+
}, [c]);
|
|
26
|
+
const s = i((e) => {
|
|
27
|
+
var n;
|
|
28
|
+
const t = F(e);
|
|
29
|
+
w(t, y.current) || (y.current = t, (n = g.current) == null || n.call(g, t));
|
|
30
|
+
}, []), G = i(
|
|
31
31
|
(e, t) => {
|
|
32
|
-
const
|
|
33
|
-
if (
|
|
34
|
-
const
|
|
35
|
-
return
|
|
32
|
+
const n = l.current.has(e) ? "" : r.current[e], o = P(e, n, t);
|
|
33
|
+
if (o.rejected) return { advanced: !1, rejected: !0 };
|
|
34
|
+
const m = { ...r.current, [e]: o.newBuffer };
|
|
35
|
+
return r.current = m, f(m), T(!0), s(m), o.shouldAdvance ? l.current.add(e) : l.current.delete(e), { advanced: o.shouldAdvance, rejected: !1 };
|
|
36
36
|
},
|
|
37
|
-
[
|
|
37
|
+
[s]
|
|
38
|
+
), _ = i(
|
|
39
|
+
(e, t) => {
|
|
40
|
+
const n = r.current, o = a(e, n[e]), m = H(
|
|
41
|
+
a("year", n.year),
|
|
42
|
+
a("month", n.month)
|
|
43
|
+
), A = L(e, o, t, {
|
|
44
|
+
daysInMonth: m,
|
|
45
|
+
today: O()
|
|
46
|
+
});
|
|
47
|
+
if (A == null) return !1;
|
|
48
|
+
x.current = !0;
|
|
49
|
+
const z = String(A).padStart(W[e], "0"), V = { ...n, [e]: z };
|
|
50
|
+
return r.current = V, f(V), T(!0), s(V), l.current.add(e), !0;
|
|
51
|
+
},
|
|
52
|
+
[s]
|
|
38
53
|
), k = i((e) => {
|
|
39
|
-
|
|
40
|
-
}, []),
|
|
41
|
-
|
|
42
|
-
const e =
|
|
43
|
-
day:
|
|
44
|
-
month:
|
|
45
|
-
year:
|
|
54
|
+
x.current = !0, l.current.add(e);
|
|
55
|
+
}, []), p = i(() => {
|
|
56
|
+
x.current = !1;
|
|
57
|
+
const e = r.current, t = {
|
|
58
|
+
day: E("day", e.day),
|
|
59
|
+
month: E("month", e.month),
|
|
60
|
+
year: E("year", e.year)
|
|
46
61
|
};
|
|
47
|
-
|
|
48
|
-
}, [
|
|
62
|
+
r.current = t, f(t), T(!0), s(t);
|
|
63
|
+
}, [s]);
|
|
49
64
|
return {
|
|
50
|
-
segmentText:
|
|
51
|
-
segmentValues:
|
|
52
|
-
currentValue:
|
|
53
|
-
isControlled:
|
|
65
|
+
segmentText: d,
|
|
66
|
+
segmentValues: R,
|
|
67
|
+
currentValue: j,
|
|
68
|
+
isControlled: S,
|
|
54
69
|
wasTouched: B,
|
|
55
|
-
appendDigit:
|
|
70
|
+
appendDigit: G,
|
|
71
|
+
adjustSegment: _,
|
|
56
72
|
beginSegmentEdit: k,
|
|
57
|
-
commitOnBlur:
|
|
73
|
+
commitOnBlur: p
|
|
58
74
|
};
|
|
59
75
|
}
|
|
60
76
|
export {
|
|
61
|
-
|
|
77
|
+
K as useDateFieldValue
|
|
62
78
|
};
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@viasat/beam-react",
|
|
3
|
-
"version": "2.
|
|
3
|
+
"version": "2.41.0",
|
|
4
4
|
"description": "React component library for the Beam design system",
|
|
5
5
|
"license": "MIT",
|
|
6
6
|
"author": "Viasat",
|
|
@@ -59,11 +59,11 @@
|
|
|
59
59
|
"access": "public"
|
|
60
60
|
},
|
|
61
61
|
"dependencies": {
|
|
62
|
-
"@viasat/beam-fonts": "2.
|
|
63
|
-
"@viasat/beam-shared": "2.
|
|
64
|
-
"@viasat/beam-styles": "2.
|
|
65
|
-
"@viasat/beam-tokens": "2.
|
|
66
|
-
"@viasat/beam-icons": "2.
|
|
62
|
+
"@viasat/beam-fonts": "2.41.0",
|
|
63
|
+
"@viasat/beam-shared": "2.41.0",
|
|
64
|
+
"@viasat/beam-styles": "2.41.0",
|
|
65
|
+
"@viasat/beam-tokens": "2.41.0",
|
|
66
|
+
"@viasat/beam-icons": "2.41.0",
|
|
67
67
|
"clsx": "^1.2.1",
|
|
68
68
|
"@floating-ui/react": "^0.26.18",
|
|
69
69
|
"@stepperize/react": "^5.1.5",
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
var S=require("../assets/DateField.css");const N=require("react/jsx-runtime"),D=require("clsx"),d=require("react"),M=require("./classNames.DC8Ra4sw.js"),F=require("../lib/wip/DateField/DateField.utils.cjs.js"),R="date-field",{baseClassNamePrefix:q,classModifierPrefix:I,subElementClassPrefix:r}=M.getBEMClassNames(R),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"},P={day:31,month:12,year:9999},k={day:"day",month:"month",year:"year"},y=({type:t,value:_,displayValue:a,isPlaceholder:g,isActive:s,disabled:l,readOnly:o,onFocus:C,onBlur:p,onInput:x,onKeyDown:E,segmentRef:m})=>{const n=!l&&!o,f=d.useRef(null),h=d.useCallback(e=>{f.current=e,m(e)},[m]),v=e=>{if(!n)return;const b=e.currentTarget,i=e.nativeEvent.data;i!=null&&i.length===1&&x(t,i),b.textContent!==a&&(b.textContent=a)};return d.useLayoutEffect(()=>{if(!s||!n)return;const e=f.current;e&&F.selectElementContents(e)},[a,s,n]),N.jsx("span",{ref:h,role:"spinbutton","aria-label":k[t],"aria-valuenow":_??void 0,"aria-valuemin":1,"aria-valuemax":P[t],"aria-valuetext":a,"aria-disabled":l||void 0,"aria-readonly":o||void 0,contentEditable:n&&s,suppressContentEditableWarning:!0,tabIndex:s?0:-1,inputMode:n?"numeric":void 0,spellCheck:!1,autoCorrect:"off",autoCapitalize:"off","data-segment":t,"data-active":s,"data-placeholder":g,onFocus:C,onBlur:p,onInput:v,onKeyDown:e=>E(t,e),onMouseUp:e=>e.preventDefault(),className:D(u[c.segment]),children:a})};exports.DateFieldSegment=y;exports.baseClassNamePrefix=q;exports.classModifierPrefix=I;exports.staticDateFieldClassNames=c;exports.styles=u;
|