@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.
@@ -1,15 +1,15 @@
1
1
  import "../assets/DateField.css";
2
- import { jsx as x } from "react/jsx-runtime";
3
- import h from "clsx";
4
- import { useRef as v, useCallback as M, useLayoutEffect as N } from "react";
5
- import { g as D } from "./classNames.ZWNk1hey.js";
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 k = "date-field", { baseClassNamePrefix: F, classModifierPrefix: G, subElementClassPrefix: s } = D(k), R = {
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
- }, y = {
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
- }, j = ({
36
- type: t,
31
+ }, G = ({
32
+ type: r,
37
33
  value: b,
38
- displayValue: a,
39
- isPlaceholder: c,
40
- isActive: n,
34
+ valueMax: c,
35
+ displayValue: t,
36
+ isPlaceholder: u,
37
+ isActive: a,
41
38
  disabled: o,
42
39
  readOnly: i,
43
- onFocus: u,
44
- onBlur: _,
45
- onInput: g,
46
- onKeyDown: p,
40
+ onFocus: p,
41
+ onBlur: g,
42
+ onInput: _,
43
+ onKeyDown: C,
47
44
  segmentRef: m
48
45
  }) => {
49
- const r = !o && !i, l = v(null), C = M(
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 (!r) return;
52
+ if (!n) return;
56
53
  const f = e.currentTarget, d = e.nativeEvent.data;
57
- d != null && d.length === 1 && g(t, d), f.textContent !== a && (f.textContent = a);
54
+ d != null && d.length === 1 && _(r, d), f.textContent !== t && (f.textContent = t);
58
55
  };
59
56
  return N(() => {
60
- if (!n || !r) return;
57
+ if (!a || !n) return;
61
58
  const e = l.current;
62
59
  e && I(e);
63
- }, [a, n, r]), /* @__PURE__ */ x(
60
+ }, [t, a, n]), /* @__PURE__ */ h(
64
61
  "span",
65
62
  {
66
- ref: C,
63
+ ref: x,
67
64
  role: "spinbutton",
68
- "aria-label": B[t],
65
+ "aria-label": P[r],
69
66
  "aria-valuenow": b ?? void 0,
70
67
  "aria-valuemin": 1,
71
- "aria-valuemax": y[t],
72
- "aria-valuetext": a,
68
+ "aria-valuemax": c,
69
+ "aria-valuetext": t,
73
70
  "aria-disabled": o || void 0,
74
71
  "aria-readonly": i || void 0,
75
- contentEditable: r && n,
72
+ contentEditable: n && a,
76
73
  suppressContentEditableWarning: !0,
77
- tabIndex: n ? 0 : -1,
78
- inputMode: r ? "numeric" : void 0,
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": t,
83
- "data-active": n,
84
- "data-placeholder": c,
85
- onFocus: u,
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) => p(t, e),
85
+ onKeyDown: (e) => C(r, e),
89
86
  onMouseUp: (e) => e.preventDefault(),
90
- className: h($[R.segment]),
91
- children: a
87
+ className: v(L[B.segment]),
88
+ children: t
92
89
  }
93
90
  );
94
91
  };
95
92
  export {
96
- j as D,
97
- R as a,
98
- F as b,
99
- G as c,
100
- $ as s
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.Df8aTzNW.js");require("./DateField.utils.cjs.js");exports.DateFieldSegment=e.DateFieldSegment;
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.BaAwH6ov.js";
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 a=require("react/jsx-runtime"),t=require("../../../chunks/DateField.Segment.Df8aTzNW.js"),l=require("./DateField.utils.cjs.js"),n=[{type:"month",value:""},{type:"literal",value:"/"},{type:"day",value:""},{type:"literal",value:"/"},{type:"year",value:""}],R={month:"MM",day:"DD",year:"YYYY"},v=l.getSegmentOrder(n),h=({segmentText:i,segmentValues:r,focusedSegment:o,disabled:u,readOnly:c,onSegmentFocus:d,onSegmentBlur:y,onSegmentInput:m,onSegmentKeyDown:p,registerSegmentRef:D})=>a.jsx("span",{className:t.styles[t.staticDateFieldClassNames.segments],children:n.map((s,g)=>{if(s.type==="literal")return a.jsx("span",{"aria-hidden":"true",className:t.styles[t.staticDateFieldClassNames.separator],children:s.value},`literal-${g}`);const e=s.type,S=R[e],{displayValue:_,isPlaceholder:F}=l.getSegmentDisplay(e,i[e],S);return a.jsx(t.DateFieldSegment,{type:e,value:r[e],displayValue:_,isPlaceholder:F,isActive:o===e,disabled:u,readOnly:c,onFocus:()=>d(e),onBlur:y,onInput:m,onKeyDown:p,segmentRef:D(e)},e)})});exports.DateFieldSegments=h;exports.PARTS_ORDER=v;
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 a } from "react/jsx-runtime";
2
- import { s, a as l, D as R } from "../../../chunks/DateField.Segment.BaAwH6ov.js";
3
- import { getSegmentOrder as f, getSegmentDisplay as A } from "./DateField.utils.es.js";
4
- const n = [
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
- ], E = {
10
+ ], x = {
11
11
  month: "MM",
12
12
  day: "DD",
13
13
  year: "YYYY"
14
- }, Y = f(n), O = ({
14
+ }, Y = E(o), I = ({
15
15
  segmentText: r,
16
- segmentValues: o,
16
+ segmentValues: t,
17
17
  focusedSegment: i,
18
- disabled: m,
18
+ disabled: y,
19
19
  readOnly: p,
20
- onSegmentFocus: y,
21
- onSegmentBlur: c,
22
- onSegmentInput: u,
23
- onSegmentKeyDown: d,
20
+ onSegmentFocus: c,
21
+ onSegmentBlur: m,
22
+ onSegmentInput: d,
23
+ onSegmentKeyDown: u,
24
24
  registerSegmentRef: D
25
- }) => /* @__PURE__ */ a("span", { className: s[l.segments], children: n.map((t, g) => {
26
- if (t.type === "literal")
27
- return /* @__PURE__ */ a(
28
- "span",
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
- "aria-hidden": "true",
31
- className: s[l.separator],
32
- children: t.value
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
- `literal-${g}`
60
+ e
35
61
  );
36
- const e = t.type, v = E[e], { displayValue: S, isPlaceholder: h } = A(
37
- e,
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
- O as DateFieldSegments,
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 l=require("react/jsx-runtime"),_e=require("clsx"),be=require("react"),e=require("../../../chunks/DateField.Segment.Df8aTzNW.js"),De=require("../../../chunks/constants.CgMu0_1M.js"),fe=require("../../../chunks/form.context.D5XrYvpI.js"),me=require("../../Form/contexts/label.context.cjs.js"),pe=require("../../Form/contexts/helperText.context.cjs.js"),xe=require("../../Form/hooks/useUniversalRef.hook.cjs.js"),t=require("./DateField.Segments.cjs.js"),ge=require("./DateField.utils.cjs.js"),ve=require("./useDateFieldFocus.cjs.js"),ye=require("./useDateFieldForm.cjs.js"),Se=require("./useDateFieldKeyboard.cjs.js"),qe=require("./useDateFieldSegments.cjs.js"),he=require("./useDateFieldValidity.cjs.js"),we=require("./useDateFieldValue.cjs.js"),Ie=require("./useInvalidState.cjs.js"),Re=be.forwardRef(function({value:S,defaultValue:q,onChange:h,label:r=null,helperText:d=null,error:n,hideRequiredMarker:w=!1,validationRules:I,width:R,theme:o,fluid:P=!1,disabled:T=!1,readOnly:V=!1,required:M=!1,name:u,id:j,className:N,style:O,"aria-label":B,"aria-describedby":C,"aria-labelledby":E,...H},K){const{disabled:i,readOnly:c,required:F,invalid:L,errorMessageProvided:_,defaultValue:$,errorId:b,helperTextId:k,validationErrorsId:A,labelId:D,ariaDescribedBy:U,ariaLabelledBy:W,showErrors:z}=ye.useDateFieldForm({name:u,disabled:T,readOnly:V,required:M,defaultValue:q,error:n,hasHelperText:!!d,hasLabel:!!r,validationRules:I,ariaDescribedBy:C,ariaLabelledBy:E}),{refFn:G,ref:f}=xe.useUniversalRef(K),{segmentRefs:J,registerSegmentRef:Q}=qe.useDateFieldSegments(),{segmentText:X,segmentValues:m,currentValue:p,wasTouched:Y,appendDigit:Z,beginSegmentEdit:ee,commitOnBlur:ie}=we.useDateFieldValue({value:S,defaultValue:$,onChange:h}),{focusedSegment:x,fieldTabIndex:le,handleSegmentFocus:g,handleFieldFocus:ae,handleFieldBlur:se,handleFieldMouseDown:te,focusNext:v,focusPrevious:re}=ve.useDateFieldFocus({disabled:i,fieldRef:f,segmentRefs:J,partsOrder:t.PARTS_ORDER,onSegmentFocusChange:ee,onFieldBlur:ie}),de=Se.useDateFieldKeyboard({disabled:i,fieldRef:f,focusNext:v,focusPrevious:re}),{isInvalid:ne}=he.useDateFieldValidity({segments:m,currentValue:p,wasTouched:Y,isFocused:x!==null}),oe=(a,s)=>{const{advanced:Fe}=Z(a,s);Fe&&v(a)},y=Ie.useInvalidState({formInvalid:L,valueInvalid:ne}),ue=a=>{if(i)return;const s=a.target.closest("label");!s||s.id!==D||(a.preventDefault(),g(t.PARTS_ORDER[0]))},ce=_e(e.styles[e.baseClassNamePrefix],o&&De.themeClassName(o),P&&e.styles[`${e.classModifierPrefix}fluid`],y&&e.styles[`${e.classModifierPrefix}error`],i&&e.styles[`${e.classModifierPrefix}disabled`],c&&e.styles[`${e.classModifierPrefix}read-only`],N);return l.jsxs("div",{className:ce,style:{...O,maxWidth:R},onMouseDownCapture:ue,children:[l.jsx(me.LabelProvider,{ctxId:D,ctxDisabled:i,ctxRequired:F&&!w,children:r}),l.jsx("div",{...H,ref:G,id:j,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:te,onFocus:ae,children:l.jsx(t.DateFieldSegments,{segmentText:X,segmentValues:m,focusedSegment:x,disabled:i,readOnly:c,onSegmentFocus:g,onSegmentBlur:se,onSegmentInput:oe,onSegmentKeyDown:de,registerSegmentRef:Q})}),l.jsx("input",{type:"hidden",name:u,value:ge.toISODateString(p),disabled:i}),l.jsxs(pe.HelperTextProvider,{ctxId:k,ctxDisabled:i,children:[d,_&&l.jsx(fe.HelperText,{id:b,appearance:"negative",children:n})]}),z(A)]})});exports.DateField=Re;
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 I, jsx as l } from "react/jsx-runtime";
2
- import be from "clsx";
3
- import { forwardRef as ge } from "react";
4
- import { s as a, b as ve, c as s, a as De } from "../../../chunks/DateField.Segment.BaAwH6ov.js";
5
- import { t as Fe } from "../../../chunks/constants.Cruz2A1w.js";
6
- import { H as he } from "../../../chunks/form.context.cEuTL68U.js";
7
- import { LabelProvider as xe } from "../../Form/contexts/label.context.es.js";
8
- import { HelperTextProvider as ye } from "../../Form/contexts/helperText.context.es.js";
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 Se, PARTS_ORDER as S } from "./DateField.Segments.es.js";
11
- import { toISODateString as we } from "./DateField.utils.es.js";
12
- import { useDateFieldFocus as Re } from "./useDateFieldFocus.es.js";
13
- import { useDateFieldForm as Ne } from "./useDateFieldForm.es.js";
14
- import { useDateFieldKeyboard as Ve } from "./useDateFieldKeyboard.es.js";
15
- import { useDateFieldSegments as Be } from "./useDateFieldSegments.es.js";
16
- import { useDateFieldValidity as Ce } from "./useDateFieldValidity.es.js";
17
- import { useDateFieldValue as Oe } from "./useDateFieldValue.es.js";
18
- import { useInvalidState as Pe } from "./useInvalidState.es.js";
19
- const Ye = ge(
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: d = null,
25
- helperText: o = null,
26
- error: t,
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: n,
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: m,
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": K,
42
- ...j
41
+ "aria-labelledby": j,
42
+ ...K
43
43
  }, W) {
44
44
  const {
45
45
  disabled: e,
46
- readOnly: u,
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
- } = Ne({
59
- name: m,
58
+ } = Ve({
59
+ name: u,
60
60
  disabled: P,
61
61
  readOnly: T,
62
62
  required: M,
63
63
  defaultValue: R,
64
- error: t,
65
- hasHelperText: !!o,
66
- hasLabel: !!d,
64
+ error: n,
65
+ hasHelperText: !!t,
66
+ hasLabel: !!o,
67
67
  validationRules: B,
68
68
  ariaDescribedBy: $,
69
- ariaLabelledBy: K
70
- }), { refFn: Q, ref: g } = Ie(W), { segmentRefs: X, registerSegmentRef: Y } = Be(), {
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
- beginSegmentEdit: re,
77
- commitOnBlur: le
78
- } = Oe({
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: ie,
85
+ fieldTabIndex: se,
85
86
  handleSegmentFocus: h,
86
- handleFieldFocus: se,
87
- handleFieldBlur: de,
88
- handleFieldMouseDown: oe,
87
+ handleFieldFocus: de,
88
+ handleFieldBlur: oe,
89
+ handleFieldMouseDown: te,
89
90
  focusNext: x,
90
- focusPrevious: te
91
- } = Re({
91
+ focusPrevious: ne
92
+ } = Ne({
92
93
  disabled: e,
93
94
  fieldRef: g,
94
95
  segmentRefs: X,
95
- partsOrder: S,
96
- onSegmentFocusChange: re,
97
- onFieldBlur: le
98
- }), ne = Ve({
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: te
103
- }), { isInvalid: me } = Ce({
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
- }), ue = (r, i) => {
109
- const { advanced: pe } = ae(r, i);
110
- pe && x(r);
111
- }, y = Pe({
111
+ }), fe = (r, i) => {
112
+ const { advanced: be } = ae(r, i);
113
+ be && x(r);
114
+ }, y = Te({
112
115
  formInvalid: A,
113
- valueInvalid: me
114
- }), fe = (r) => {
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(S[0]));
118
- }, ce = be(
119
- a[ve],
120
- n && Fe(n),
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
- u && a[`${s}read-only`],
127
+ d && a[`${s}read-only`],
125
128
  E
126
129
  );
127
- return /* @__PURE__ */ I(
130
+ return /* @__PURE__ */ S(
128
131
  "div",
129
132
  {
130
- className: ce,
133
+ className: pe,
131
134
  style: { ...H, maxWidth: C },
132
- onMouseDownCapture: fe,
135
+ onMouseDownCapture: ce,
133
136
  children: [
134
137
  /* @__PURE__ */ l(
135
- xe,
138
+ ye,
136
139
  {
137
140
  ctxId: b,
138
141
  ctxDisabled: e,
139
142
  ctxRequired: f && !V,
140
- children: d
143
+ children: o
141
144
  }
142
145
  ),
143
146
  /* @__PURE__ */ l(
144
147
  "div",
145
148
  {
146
- ...j,
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: ie,
158
- className: a[De.field],
159
- onMouseDown: oe,
160
- onFocus: se,
160
+ tabIndex: se,
161
+ className: a[Fe.field],
162
+ onMouseDown: te,
163
+ onFocus: de,
161
164
  children: /* @__PURE__ */ l(
162
- Se,
165
+ we,
163
166
  {
164
167
  segmentText: Z,
165
168
  segmentValues: v,
166
169
  focusedSegment: F,
167
170
  disabled: e,
168
- readOnly: u,
171
+ readOnly: d,
169
172
  onSegmentFocus: h,
170
- onSegmentBlur: de,
171
- onSegmentInput: ue,
172
- onSegmentKeyDown: ne,
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: m,
183
- value: we(D),
185
+ name: u,
186
+ value: Re(D),
184
187
  disabled: e
185
188
  }
186
189
  ),
187
- /* @__PURE__ */ I(ye, { ctxId: _, ctxDisabled: e, children: [
188
- o,
189
- c && /* @__PURE__ */ l(he, { id: p, appearance: "negative", children: t })
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
- Ye as DateField
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:""},o=e=>e instanceof Date&&!Number.isNaN(e.getTime()),s=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},g=(e,t)=>e==null&&t==null?!0:e==null||t==null?!1:e.getTime()===t.getTime(),c=e=>{if(!o(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}`},m=e=>e.filter(t=>t.type!=="literal").map(t=>t.type),d=e=>o(e)?{day:String(e.getDate()).padStart(2,"0"),month:String(e.getMonth()+1).padStart(2,"0"),year:String(e.getFullYear()).padStart(4,"0")}:u,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},S=e=>s({day:l("day",e.day),month:l("month",e.month),year:l("year",e.year)}),y=(e,t)=>t===""?"":t.padStart(i.SEGMENT_MAX_LENGTH[e],"0"),T=(e,t,n)=>t===""?{displayValue:n,isPlaceholder:!0}:{displayValue:t.padStart(i.SEGMENT_MAX_LENGTH[e],"0"),isPlaceholder:!1},N=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.clearSelectionWithin=f;exports.deriveValue=s;exports.deriveValueFromText=S;exports.getSegmentDisplay=T;exports.getSegmentOrder=m;exports.isSameDateValue=g;exports.normalizeSegmentText=y;exports.segmentNumber=l;exports.segmentTextFromValue=d;exports.selectElementContents=N;exports.toISODateString=c;
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 o } from "./DateField.validation.es.js";
2
- const s = { day: "", month: "", year: "" }, i = (e) => e instanceof Date && !Number.isNaN(e.getTime()), u = (e) => {
3
- const { day: t, month: n, year: r } = e;
4
- if (t == null || n == null || r == null) return null;
5
- const a = new Date(r, n - 1, t);
6
- return a.setFullYear(r), Number.isNaN(a.getTime()) || a.getFullYear() !== r || a.getMonth() !== n - 1 || a.getDate() !== t ? null : a;
7
- }, g = (e, t) => e == null && t == null ? !0 : e == null || t == null ? !1 : e.getTime() === t.getTime(), d = (e) => {
8
- if (!i(e)) return "";
9
- const t = String(e.getFullYear()).padStart(4, "0"), n = String(e.getMonth() + 1).padStart(2, "0"), r = String(e.getDate()).padStart(2, "0");
10
- return `${t}-${n}-${r}`;
11
- }, m = (e) => e.filter(
12
- (t) => t.type !== "literal"
13
- ).map((t) => t.type), S = (e) => i(e) ? {
14
- day: String(e.getDate()).padStart(2, "0"),
15
- month: String(e.getMonth() + 1).padStart(2, "0"),
16
- year: String(e.getFullYear()).padStart(4, "0")
17
- } : s, l = (e, t) => {
18
- if (t === "" || e === "year" && t.length < o.year) return null;
19
- const n = parseInt(t, 10);
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
- }, y = (e) => u({
22
- day: l("day", e.day),
23
- month: l("month", e.month),
24
- year: l("year", e.year)
25
- }), f = (e, t) => t === "" ? "" : t.padStart(o[e], "0"), p = (e, t, n) => t === "" ? { displayValue: n, isPlaceholder: !0 } : {
26
- displayValue: t.padStart(o[e], "0"),
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
- }, h = (e) => {
29
- const t = window.getSelection();
30
- if (!t) return;
43
+ }, F = (t) => {
44
+ const e = window.getSelection();
45
+ if (!e) return;
31
46
  const n = document.createRange();
32
- n.selectNodeContents(e), t.removeAllRanges(), t.addRange(n);
33
- }, N = (e) => {
47
+ n.selectNodeContents(t), e.removeAllRanges(), e.addRange(n);
48
+ }, V = (t) => {
34
49
  var n;
35
- if (!e) return;
36
- const t = (n = window.getSelection) == null ? void 0 : n.call(window);
37
- t && t.rangeCount > 0 && e.contains(t.anchorNode) && t.removeAllRanges();
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
- N as clearSelectionWithin,
41
- u as deriveValue,
42
- y as deriveValueFromText,
43
- p as getSegmentDisplay,
44
- m as getSegmentOrder,
45
- g as isSameDateValue,
46
- f as normalizeSegmentText,
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
- S as segmentTextFromValue,
49
- h as selectElementContents,
50
- d as toISODateString
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 u=require("react");function s({disabled:l,fieldRef:o,focusNext:e,focusPrevious:i}){const a=u.useMemo(()=>({ArrowRight:({segment:r,isRTL:t})=>(t?i:e)(r),ArrowLeft:({segment:r,isRTL:t})=>(t?e:i)(r)}),[e,i]);return u.useCallback((r,t)=>{if(l||t.altKey||t.ctrlKey||t.metaKey||t.shiftKey)return;const c=a[t.key];if(!c)return;t.preventDefault();const n=o.current,y=!!n&&(getComputedStyle(n).direction==="rtl"||!!n.closest('[dir="rtl"]'));c({segment:r,event:t,isRTL:y})},[l,a,o])}exports.useDateFieldKeyboard=s;
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
- /** A key binding: runs the action for one key, given the call context. */
13
- export type SegmentKeyBinding = (ctx: SegmentKeyContext) => void;
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 m, useCallback as s } from "react";
2
- function K({
3
- disabled: l,
4
- fieldRef: o,
5
- focusNext: i,
6
- focusPrevious: n
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 = m(
9
- () => ({
10
- ArrowRight: ({ segment: t, isRTL: r }) => (r ? n : i)(t),
11
- ArrowLeft: ({ segment: t, isRTL: r }) => (r ? i : n)(t)
12
- // ── Extension points ─────────────────────────────────────────────
13
- // DF-4: ArrowUp / ArrowDown (increment/decrement), PageUp / PageDown,
14
- // Home / End (min/max of current segment) → value actions
15
- // DF-5: Backspace / Delete (clear segment) → value action
16
- }),
17
- [i, n]
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 s(
20
- (t, r) => {
21
- if (l || r.altKey || r.ctrlKey || r.metaKey || r.shiftKey) return;
22
- const a = y[r.key];
23
- if (!a) return;
24
- r.preventDefault();
25
- const e = o.current, c = !!e && (getComputedStyle(e).direction === "rtl" || !!e.closest('[dir="rtl"]'));
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
- [l, y, o]
40
+ [e, y, w]
29
41
  );
30
42
  }
31
43
  export {
32
- K as useDateFieldKeyboard
44
+ A as useDateFieldKeyboard
33
45
  };
@@ -1 +1 @@
1
- "use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("react"),r=require("./DateField.utils.cjs.js"),E=require("./DateField.validation.cjs.js");function j({value:u,defaultValue:F,onChange:m}){const T=t.useRef(u!==void 0),f=T.current,[c,g]=t.useState(()=>r.segmentTextFromValue(f?u??null:F??null)),[h,S]=t.useState(!1),s=t.useRef(c),a=t.useRef(new Set),x=t.useRef(!1),V={day:r.segmentNumber("day",c.day),month:r.segmentNumber("month",c.month),year:r.segmentNumber("year",c.year)},y=r.deriveValue(V),b=t.useRef(y),D=t.useRef(f?u??null:null),l=t.useRef(m);t.useEffect(()=>{l.current=m},[m]),t.useEffect(()=>{if(!T.current||x.current||r.isSameDateValue(u??null,D.current))return;D.current=u??null;const e=r.segmentTextFromValue(u??null);s.current=e,g(e),b.current=r.deriveValueFromText(e)},[u]);const o=t.useCallback(e=>{var i;const n=r.deriveValueFromText(e);r.isSameDateValue(n,b.current)||(b.current=n,(i=l.current)==null||i.call(l,n))},[]),_=t.useCallback((e,n)=>{const i=a.current.has(e)?"":s.current[e],d=E.tryAppendDigit(e,i,n);if(d.rejected)return{advanced:!1,rejected:!0};const R={...s.current,[e]:d.newBuffer};return s.current=R,g(R),S(!0),o(R),d.shouldAdvance?a.current.add(e):a.current.delete(e),{advanced:d.shouldAdvance,rejected:!1}},[o]),v=t.useCallback(e=>{x.current=!0,a.current.add(e)},[]),w=t.useCallback(()=>{x.current=!1;const e=s.current,n={day:r.normalizeSegmentText("day",e.day),month:r.normalizeSegmentText("month",e.month),year:r.normalizeSegmentText("year",e.year)};s.current=n,g(n),S(!0),o(n)},[o]);return{segmentText:c,segmentValues:V,currentValue:y,isControlled:f,wasTouched:h,appendDigit:_,beginSegmentEdit:v,commitOnBlur:w}}exports.useDateFieldValue=j;
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 n, useState as E, useEffect as j, useCallback as i } from "react";
2
- import { segmentTextFromValue as v, segmentNumber as T, deriveValue as C, isSameDateValue as w, deriveValueFromText as A, normalizeSegmentText as V } from "./DateField.utils.es.js";
3
- import { tryAppendDigit as I } from "./DateField.validation.es.js";
4
- function G({
5
- value: r,
6
- defaultValue: F,
7
- onChange: m
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 R = n(r !== void 0), f = R.current, [u, x] = E(
10
- () => v(f ? r ?? null : F ?? null)
11
- ), [B, S] = E(!1), c = n(u), s = n(/* @__PURE__ */ new Set()), g = n(!1), p = {
12
- day: T("day", u.day),
13
- month: T("month", u.month),
14
- year: T("year", u.year)
15
- }, D = C(p), h = n(D), b = n(
16
- f ? r ?? null : null
17
- ), o = n(m);
18
- j(() => {
19
- o.current = m;
20
- }, [m]), j(() => {
21
- if (!R.current || g.current || w(r ?? null, b.current)) return;
22
- b.current = r ?? null;
23
- const e = v(r ?? null);
24
- c.current = e, x(e), h.current = A(e);
25
- }, [r]);
26
- const a = i((e) => {
27
- var d;
28
- const t = A(e);
29
- w(t, h.current) || (h.current = t, (d = o.current) == null || d.call(o, t));
30
- }, []), N = i(
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 d = s.current.has(e) ? "" : c.current[e], l = I(e, d, t);
33
- if (l.rejected) return { advanced: !1, rejected: !0 };
34
- const y = { ...c.current, [e]: l.newBuffer };
35
- return c.current = y, x(y), S(!0), a(y), l.shouldAdvance ? s.current.add(e) : s.current.delete(e), { advanced: l.shouldAdvance, rejected: !1 };
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
- [a]
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
- g.current = !0, s.current.add(e);
40
- }, []), z = i(() => {
41
- g.current = !1;
42
- const e = c.current, t = {
43
- day: V("day", e.day),
44
- month: V("month", e.month),
45
- year: V("year", e.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
- c.current = t, x(t), S(!0), a(t);
48
- }, [a]);
62
+ r.current = t, f(t), T(!0), s(t);
63
+ }, [s]);
49
64
  return {
50
- segmentText: u,
51
- segmentValues: p,
52
- currentValue: D,
53
- isControlled: f,
65
+ segmentText: d,
66
+ segmentValues: R,
67
+ currentValue: j,
68
+ isControlled: S,
54
69
  wasTouched: B,
55
- appendDigit: N,
70
+ appendDigit: G,
71
+ adjustSegment: _,
56
72
  beginSegmentEdit: k,
57
- commitOnBlur: z
73
+ commitOnBlur: p
58
74
  };
59
75
  }
60
76
  export {
61
- G as useDateFieldValue
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.40.0",
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.40.0",
63
- "@viasat/beam-shared": "2.40.0",
64
- "@viasat/beam-styles": "2.40.0",
65
- "@viasat/beam-tokens": "2.40.0",
66
- "@viasat/beam-icons": "2.40.0",
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;