@viasat/beam-react 2.40.0 → 2.42.0

package/chunks/{DateField.Segment.BaAwH6ov.js → DateField.Segment.C2qoaY0Z.js}

@@ -1,15 +1,15 @@
 import "../assets/DateField.css";
-import { jsx as x } from "react/jsx-runtime";
-import h from "clsx";
-import { useRef as v, useCallback as M, useLayoutEffect as N } from "react";
-import { g as D } from "./classNames.ZWNk1hey.js";
+import { jsx as h } from "react/jsx-runtime";
+import v from "clsx";
+import { useRef as D, useCallback as M, useLayoutEffect as N } from "react";
+import { g as k } from "./classNames.ZWNk1hey.js";
 import { selectElementContents as I } from "../lib/wip/DateField/DateField.utils.es.js";
-const k = "date-field", { baseClassNamePrefix: F, classModifierPrefix: G, subElementClassPrefix: s } = D(k), R = {
+const $ = "date-field", { baseClassNamePrefix: j, classModifierPrefix: z, subElementClassPrefix: s } = k($), B = {
   field: `${s}field`,
   segments: `${s}segments`,
   segment: `${s}segment`,
   separator: `${s}separator`
-}, $ = {
+}, L = {
   "bm-light": "bm-light",
   "bm-dark": "bm-dark",
   "bm-inverse": "bm-inverse",
@@ -24,78 +24,75 @@ const k = "date-field", { baseClassNamePrefix: F, classModifierPrefix: G, subEle
   "bm-date-field--fluid": "bm-date-field--fluid",
   "bm-date-field__segments": "bm-date-field__segments",
   "bm-date-field__separator": "bm-date-field__separator"
-}, y = {
-  day: 31,
-  month: 12,
-  year: 9999
-}, B = {
+}, P = {
   day: "day",
   month: "month",
   year: "year"
-}, j = ({
-  type: t,
+}, G = ({
+  type: r,
   value: b,
-  displayValue: a,
-  isPlaceholder: c,
-  isActive: n,
+  valueMax: c,
+  displayValue: t,
+  isPlaceholder: u,
+  isActive: a,
   disabled: o,
   readOnly: i,
-  onFocus: u,
-  onBlur: _,
-  onInput: g,
-  onKeyDown: p,
+  onFocus: p,
+  onBlur: g,
+  onInput: _,
+  onKeyDown: C,
   segmentRef: m
 }) => {
-  const r = !o && !i, l = v(null), C = M(
+  const n = !o && !i, l = D(null), x = M(
     (e) => {
       l.current = e, m(e);
     },
     [m]
   ), E = (e) => {
-    if (!r) return;
+    if (!n) return;
     const f = e.currentTarget, d = e.nativeEvent.data;
-    d != null && d.length === 1 && g(t, d), f.textContent !== a && (f.textContent = a);
+    d != null && d.length === 1 && _(r, d), f.textContent !== t && (f.textContent = t);
   };
   return N(() => {
-    if (!n || !r) return;
+    if (!a || !n) return;
     const e = l.current;
     e && I(e);
-  }, [a, n, r]), /* @__PURE__ */ x(
+  }, [t, a, n]), /* @__PURE__ */ h(
     "span",
     {
-      ref: C,
+      ref: x,
       role: "spinbutton",
-      "aria-label": B[t],
+      "aria-label": P[r],
       "aria-valuenow": b ?? void 0,
       "aria-valuemin": 1,
-      "aria-valuemax": y[t],
-      "aria-valuetext": a,
+      "aria-valuemax": c,
+      "aria-valuetext": t,
       "aria-disabled": o || void 0,
       "aria-readonly": i || void 0,
-      contentEditable: r && n,
+      contentEditable: n && a,
       suppressContentEditableWarning: !0,
-      tabIndex: n ? 0 : -1,
-      inputMode: r ? "numeric" : void 0,
+      tabIndex: a ? 0 : -1,
+      inputMode: n ? "numeric" : void 0,
       spellCheck: !1,
       autoCorrect: "off",
       autoCapitalize: "off",
-      "data-segment": t,
-      "data-active": n,
-      "data-placeholder": c,
-      onFocus: u,
-      onBlur: _,
+      "data-segment": r,
+      "data-active": a,
+      "data-placeholder": u,
+      onFocus: p,
+      onBlur: g,
       onInput: E,
-      onKeyDown: (e) => p(t, e),
+      onKeyDown: (e) => C(r, e),
       onMouseUp: (e) => e.preventDefault(),
-      className: h($[R.segment]),
-      children: a
+      className: v(L[B.segment]),
+      children: t
     }
   );
 };
 export {
-  j as D,
-  R as a,
-  F as b,
-  G as c,
-  $ as s
+  G as D,
+  B as a,
+  j as b,
+  z as c,
+  L as s
 };

package/chunks/DateField.Segment.CY0jg03_.js

@@ -0,0 +1 @@
+var w=require("../assets/DateField.css");const N=require("react/jsx-runtime"),F=require("clsx"),d=require("react"),M=require("./classNames.DC8Ra4sw.js"),q=require("../lib/wip/DateField/DateField.utils.cjs.js"),P="date-field",{baseClassNamePrefix:R,classModifierPrefix:k,subElementClassPrefix:r}=M.getBEMClassNames(P),c={field:`${r}field`,segments:`${r}segments`,segment:`${r}segment`,separator:`${r}separator`},u={"bm-light":"bm-light","bm-dark":"bm-dark","bm-inverse":"bm-inverse","bm-enterprise":"bm-enterprise","bm-consumer":"bm-consumer","bm-date-field":"bm-date-field","bm-date-field--disabled":"bm-date-field--disabled","bm-date-field--error":"bm-date-field--error","bm-date-field__field":"bm-date-field__field","bm-date-field__segment":"bm-date-field__segment","bm-date-field--read-only":"bm-date-field--read-only","bm-date-field--fluid":"bm-date-field--fluid","bm-date-field__segments":"bm-date-field__segments","bm-date-field__separator":"bm-date-field__separator"},I={day:"day",month:"month",year:"year"},$=({type:n,value:_,valueMax:g,displayValue:t,isPlaceholder:C,isActive:a,disabled:l,readOnly:o,onFocus:p,onBlur:x,onInput:E,onKeyDown:h,segmentRef:m})=>{const s=!l&&!o,f=d.useRef(null),v=d.useCallback(e=>{f.current=e,m(e)},[m]),D=e=>{if(!s)return;const b=e.currentTarget,i=e.nativeEvent.data;i!=null&&i.length===1&&E(n,i),b.textContent!==t&&(b.textContent=t)};return d.useLayoutEffect(()=>{if(!a||!s)return;const e=f.current;e&&q.selectElementContents(e)},[t,a,s]),N.jsx("span",{ref:v,role:"spinbutton","aria-label":I[n],"aria-valuenow":_??void 0,"aria-valuemin":1,"aria-valuemax":g,"aria-valuetext":t,"aria-disabled":l||void 0,"aria-readonly":o||void 0,contentEditable:s&&a,suppressContentEditableWarning:!0,tabIndex:a?0:-1,inputMode:s?"numeric":void 0,spellCheck:!1,autoCorrect:"off",autoCapitalize:"off","data-segment":n,"data-active":a,"data-placeholder":C,onFocus:p,onBlur:x,onInput:D,onKeyDown:e=>h(n,e),onMouseUp:e=>e.preventDefault(),className:F(u[c.segment]),children:t})};exports.DateFieldSegment=$;exports.baseClassNamePrefix=R;exports.classModifierPrefix=k;exports.staticDateFieldClassNames=c;exports.styles=u;

package/lib/wip/DateField/DateField.Segment.cjs.js

@@ -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;
+"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;

package/lib/wip/DateField/DateField.Segment.d.ts

@@ -1,2 +1,2 @@
 import { DateFieldSegmentProps } from './DateField.types';
-export declare const DateFieldSegment: ({ type, value, displayValue, isPlaceholder, isActive, disabled, readOnly, onFocus, onBlur, onInput, onKeyDown, segmentRef, }: DateFieldSegmentProps) => import("react/jsx-runtime").JSX.Element;
+export declare const DateFieldSegment: ({ type, value, valueMax, displayValue, isPlaceholder, isActive, disabled, readOnly, onFocus, onBlur, onInput, onKeyDown, segmentRef, }: DateFieldSegmentProps) => import("react/jsx-runtime").JSX.Element;

package/lib/wip/DateField/DateField.Segment.es.js

@@ -1,7 +1,7 @@
 import "react/jsx-runtime";
 import "clsx";
 import "react";
-import { D as p } from "../../../chunks/DateField.Segment.BaAwH6ov.js";
+import { D as p } from "../../../chunks/DateField.Segment.C2qoaY0Z.js";
 import "./DateField.utils.es.js";
 export {
   p as DateFieldSegment

package/lib/wip/DateField/DateField.Segments.cjs.js

@@ -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;
+"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;

package/lib/wip/DateField/DateField.Segments.es.js

@@ -1,63 +1,67 @@
-import { jsx as a } from "react/jsx-runtime";
-import { s, a as l, D as R } from "../../../chunks/DateField.Segment.BaAwH6ov.js";
-import { getSegmentOrder as f, getSegmentDisplay as A } from "./DateField.utils.es.js";
-const n = [
+import { jsx as s } from "react/jsx-runtime";
+import { s as n, a as l, D as R } from "../../../chunks/DateField.Segment.C2qoaY0Z.js";
+import { getSegmentOrder as E, getDaysInMonth as f, getSegmentDisplay as N, SEGMENT_ARIA_MAX as _ } from "./DateField.utils.es.js";
+const o = [
   { type: "month", value: "" },
   { type: "literal", value: "/" },
   { type: "day", value: "" },
   { type: "literal", value: "/" },
   { type: "year", value: "" }
-], E = {
+], x = {
   month: "MM",
   day: "DD",
   year: "YYYY"
-}, Y = f(n), O = ({
+}, Y = E(o), I = ({
   segmentText: r,
-  segmentValues: o,
+  segmentValues: t,
   focusedSegment: i,
-  disabled: m,
+  disabled: y,
   readOnly: p,
-  onSegmentFocus: y,
-  onSegmentBlur: c,
-  onSegmentInput: u,
-  onSegmentKeyDown: d,
+  onSegmentFocus: c,
+  onSegmentBlur: m,
+  onSegmentInput: d,
+  onSegmentKeyDown: u,
   registerSegmentRef: D
-}) => /* @__PURE__ */ a("span", { className: s[l.segments], children: n.map((t, g) => {
-  if (t.type === "literal")
-    return /* @__PURE__ */ a(
-      "span",
+}) => {
+  const h = f(t.year, t.month);
+  return /* @__PURE__ */ s("span", { className: n[l.segments], children: o.map((a, v) => {
+    if (a.type === "literal")
+      return /* @__PURE__ */ s(
+        "span",
+        {
+          "aria-hidden": "true",
+          className: n[l.separator],
+          children: a.value
+        },
+        `literal-${v}`
+      );
+    const e = a.type, S = x[e], { displayValue: g, isPlaceholder: A } = N(
+      e,
+      r[e],
+      S
+    ), M = e === "day" ? h : _[e];
+    return /* @__PURE__ */ s(
+      R,
       {
-        "aria-hidden": "true",
-        className: s[l.separator],
-        children: t.value
+        type: e,
+        value: t[e],
+        valueMax: M,
+        displayValue: g,
+        isPlaceholder: A,
+        isActive: i === e,
+        disabled: y,
+        readOnly: p,
+        onFocus: () => c(e),
+        onBlur: m,
+        onInput: d,
+        onKeyDown: u,
+        segmentRef: D(e)
       },
-      `literal-${g}`
+      e
     );
-  const e = t.type, v = E[e], { displayValue: S, isPlaceholder: h } = A(
-    e,
-    r[e],
-    v
-  );
-  return /* @__PURE__ */ a(
-    R,
-    {
-      type: e,
-      value: o[e],
-      displayValue: S,
-      isPlaceholder: h,
-      isActive: i === e,
-      disabled: m,
-      readOnly: p,
-      onFocus: () => y(e),
-      onBlur: c,
-      onInput: u,
-      onKeyDown: d,
-      segmentRef: D(e)
-    },
-    e
-  );
-}) });
+  }) });
+};
 export {
-  O as DateFieldSegments,
+  I as DateFieldSegments,
   Y as PARTS_ORDER
 };

package/lib/wip/DateField/DateField.cjs.js

@@ -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;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const a=require("react/jsx-runtime"),fe=require("clsx"),me=require("react"),e=require("../../../chunks/DateField.Segment.CY0jg03_.js"),ge=require("../../../chunks/constants.CgMu0_1M.js"),pe=require("../../../chunks/form.context.D5XrYvpI.js"),xe=require("../../Form/contexts/label.context.cjs.js"),ve=require("../../Form/contexts/helperText.context.cjs.js"),ye=require("../../Form/hooks/useUniversalRef.hook.cjs.js"),r=require("./DateField.Segments.cjs.js"),Se=require("./DateField.utils.cjs.js"),qe=require("./useDateFieldFocus.cjs.js"),he=require("./useDateFieldForm.cjs.js"),we=require("./useDateFieldKeyboard.cjs.js"),Ie=require("./useDateFieldSegments.cjs.js"),Re=require("./useDateFieldValidity.cjs.js"),Pe=require("./useDateFieldValue.cjs.js"),Te=require("./useInvalidState.cjs.js"),Ve=me.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},L){const{disabled:i,readOnly:t,required:F,invalid:K,errorMessageProvided:_,defaultValue:$,errorId:b,helperTextId:k,validationErrorsId:A,labelId:D,ariaDescribedBy:U,ariaLabelledBy:W,showErrors:z}=he.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}=ye.useUniversalRef(L),{segmentRefs:J,registerSegmentRef:Q}=Ie.useDateFieldSegments(),{segmentText:X,segmentValues:m,currentValue:g,wasTouched:Y,appendDigit:Z,adjustSegment:ee,deleteLastDigit:ie,clearSegment:ae,beginSegmentEdit:le,commitOnBlur:se}=Pe.useDateFieldValue({value:S,defaultValue:$,onChange:h}),{focusedSegment:p,fieldTabIndex:te,handleSegmentFocus:x,handleFieldFocus:re,handleFieldBlur:de,handleFieldMouseDown:ne,focusNext:v,focusPrevious:oe}=qe.useDateFieldFocus({disabled:i,fieldRef:f,segmentRefs:J,partsOrder:r.PARTS_ORDER,onSegmentFocusChange:le,onFieldBlur:se}),ue=we.useDateFieldKeyboard({disabled:i,readOnly:t,fieldRef:f,focusNext:v,focusPrevious:oe,adjustSegment:ee,deleteLastDigit:ie,clearSegment:ae}),{isInvalid:ce}=Re.useDateFieldValidity({segments:m,currentValue:g,wasTouched:Y,isFocused:p!==null}),Fe=(l,s)=>{const{advanced:De}=Z(l,s);De&&v(l)},y=Te.useInvalidState({formInvalid:K,valueInvalid:ce}),_e=l=>{if(i)return;const s=l.target.closest("label");!s||s.id!==D||(l.preventDefault(),x(r.PARTS_ORDER[0]))},be=fe(e.styles[e.baseClassNamePrefix],u&&ge.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:be,style:{...O,maxWidth:R},onMouseDownCapture:_e,children:[a.jsx(xe.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:te,className:e.styles[e.staticDateFieldClassNames.field],onMouseDown:ne,onFocus:re,children:a.jsx(r.DateFieldSegments,{segmentText:X,segmentValues:m,focusedSegment:p,disabled:i,readOnly:t,onSegmentFocus:x,onSegmentBlur:de,onSegmentInput:Fe,onSegmentKeyDown:ue,registerSegmentRef:Q})}),a.jsx("input",{type:"hidden",name:c,value:Se.toISODateString(g),disabled:i}),a.jsxs(ve.HelperTextProvider,{ctxId:k,ctxDisabled:i,children:[n,_&&a.jsx(pe.HelperText,{id:b,appearance:"negative",children:o})]}),z(A)]})});exports.DateField=Ve;

package/lib/wip/DateField/DateField.es.js

@@ -1,49 +1,49 @@
-import { jsxs as I, jsx as l } from "react/jsx-runtime";
-import be from "clsx";
-import { forwardRef as ge } from "react";
-import { s as a, b as ve, c as s, a as De } from "../../../chunks/DateField.Segment.BaAwH6ov.js";
-import { t as Fe } from "../../../chunks/constants.Cruz2A1w.js";
-import { H as he } from "../../../chunks/form.context.cEuTL68U.js";
-import { LabelProvider as xe } from "../../Form/contexts/label.context.es.js";
-import { HelperTextProvider as ye } from "../../Form/contexts/helperText.context.es.js";
-import { useUniversalRef as Ie } from "../../Form/hooks/useUniversalRef.hook.es.js";
-import { DateFieldSegments as Se, PARTS_ORDER as S } from "./DateField.Segments.es.js";
-import { toISODateString as we } from "./DateField.utils.es.js";
-import { useDateFieldFocus as Re } from "./useDateFieldFocus.es.js";
-import { useDateFieldForm as Ne } from "./useDateFieldForm.es.js";
-import { useDateFieldKeyboard as Ve } from "./useDateFieldKeyboard.es.js";
-import { useDateFieldSegments as Be } from "./useDateFieldSegments.es.js";
-import { useDateFieldValidity as Ce } from "./useDateFieldValidity.es.js";
-import { useDateFieldValue as Oe } from "./useDateFieldValue.es.js";
-import { useInvalidState as Pe } from "./useInvalidState.es.js";
-const Ye = ge(
+import { jsxs as S, jsx as l } from "react/jsx-runtime";
+import De from "clsx";
+import { forwardRef as Fe } from "react";
+import { s as a, b as he, c as s, a as xe } from "../../../chunks/DateField.Segment.C2qoaY0Z.js";
+import { t as ye } from "../../../chunks/constants.Cruz2A1w.js";
+import { H as Se } from "../../../chunks/form.context.cEuTL68U.js";
+import { LabelProvider as Ie } from "../../Form/contexts/label.context.es.js";
+import { HelperTextProvider as we } from "../../Form/contexts/helperText.context.es.js";
+import { useUniversalRef as Re } from "../../Form/hooks/useUniversalRef.hook.es.js";
+import { DateFieldSegments as Ne, PARTS_ORDER as I } from "./DateField.Segments.es.js";
+import { toISODateString as Ve } from "./DateField.utils.es.js";
+import { useDateFieldFocus as Be } from "./useDateFieldFocus.es.js";
+import { useDateFieldForm as Ce } from "./useDateFieldForm.es.js";
+import { useDateFieldKeyboard as Oe } from "./useDateFieldKeyboard.es.js";
+import { useDateFieldSegments as Pe } from "./useDateFieldSegments.es.js";
+import { useDateFieldValidity as Te } from "./useDateFieldValidity.es.js";
+import { useDateFieldValue as Me } from "./useDateFieldValue.es.js";
+import { useInvalidState as qe } from "./useInvalidState.es.js";
+const aa = Fe(
   function({
     value: w,
     defaultValue: R,
     onChange: N,
-    label: d = null,
+    label: t = null,
     helperText: o = null,
-    error: t,
+    error: n,
     hideRequiredMarker: V = !1,
     validationRules: B,
     width: C,
-    theme: n,
+    theme: m,
     fluid: O = !1,
     disabled: P = !1,
     readOnly: T = !1,
     required: M = !1,
-    name: m,
+    name: u,
     id: q,
-    className: E,
-    style: H,
-    "aria-label": L,
+    className: L,
+    style: E,
+    "aria-label": H,
     "aria-describedby": $,
-    "aria-labelledby": K,
-    ...j
+    "aria-labelledby": j,
+    ...K
   }, W) {
     const {
       disabled: e,
-      readOnly: u,
+      readOnly: d,
       required: f,
       invalid: A,
       errorMessageProvided: c,
@@ -55,121 +55,128 @@ const Ye = ge(
       ariaDescribedBy: z,
       ariaLabelledBy: G,
       showErrors: J
-    } = Ne({
-      name: m,
+    } = Ce({
+      name: u,
       disabled: P,
       readOnly: T,
       required: M,
       defaultValue: R,
-      error: t,
+      error: n,
       hasHelperText: !!o,
-      hasLabel: !!d,
+      hasLabel: !!t,
       validationRules: B,
       ariaDescribedBy: $,
-      ariaLabelledBy: K
-    }), { refFn: Q, ref: g } = Ie(W), { segmentRefs: X, registerSegmentRef: Y } = Be(), {
+      ariaLabelledBy: j
+    }), { refFn: Q, ref: g } = Re(W), { segmentRefs: X, registerSegmentRef: Y } = Pe(), {
       segmentText: Z,
       segmentValues: v,
       currentValue: D,
       wasTouched: ee,
       appendDigit: ae,
-      beginSegmentEdit: re,
-      commitOnBlur: le
-    } = Oe({
+      adjustSegment: re,
+      deleteLastDigit: le,
+      clearSegment: ie,
+      beginSegmentEdit: se,
+      commitOnBlur: de
+    } = Me({
       value: w,
       defaultValue: U,
       onChange: N
     }), {
       focusedSegment: F,
-      fieldTabIndex: ie,
+      fieldTabIndex: te,
       handleSegmentFocus: h,
-      handleFieldFocus: se,
-      handleFieldBlur: de,
-      handleFieldMouseDown: oe,
+      handleFieldFocus: oe,
+      handleFieldBlur: ne,
+      handleFieldMouseDown: me,
       focusNext: x,
-      focusPrevious: te
-    } = Re({
+      focusPrevious: ue
+    } = Be({
       disabled: e,
       fieldRef: g,
       segmentRefs: X,
-      partsOrder: S,
-      onSegmentFocusChange: re,
-      onFieldBlur: le
-    }), ne = Ve({
+      partsOrder: I,
+      onSegmentFocusChange: se,
+      onFieldBlur: de
+    }), fe = Oe({
       disabled: e,
+      readOnly: d,
       fieldRef: g,
       focusNext: x,
-      focusPrevious: te
-    }), { isInvalid: me } = Ce({
+      focusPrevious: ue,
+      adjustSegment: re,
+      deleteLastDigit: le,
+      clearSegment: ie
+    }), { isInvalid: ce } = Te({
       segments: v,
       currentValue: D,
       wasTouched: ee,
       isFocused: F !== null
-    }), ue = (r, i) => {
-      const { advanced: pe } = ae(r, i);
-      pe && x(r);
-    }, y = Pe({
+    }), pe = (r, i) => {
+      const { advanced: ve } = ae(r, i);
+      ve && x(r);
+    }, y = qe({
       formInvalid: A,
-      valueInvalid: me
-    }), fe = (r) => {
+      valueInvalid: ce
+    }), be = (r) => {
       if (e) return;
       const i = r.target.closest("label");
-      !i || i.id !== b || (r.preventDefault(), h(S[0]));
-    }, ce = be(
-      a[ve],
-      n && Fe(n),
+      !i || i.id !== b || (r.preventDefault(), h(I[0]));
+    }, ge = De(
+      a[he],
+      m && ye(m),
       O && a[`${s}fluid`],
       y && a[`${s}error`],
       e && a[`${s}disabled`],
-      u && a[`${s}read-only`],
-      E
+      d && a[`${s}read-only`],
+      L
     );
-    return /* @__PURE__ */ I(
+    return /* @__PURE__ */ S(
       "div",
       {
-        className: ce,
-        style: { ...H, maxWidth: C },
-        onMouseDownCapture: fe,
+        className: ge,
+        style: { ...E, maxWidth: C },
+        onMouseDownCapture: be,
         children: [
           /* @__PURE__ */ l(
-            xe,
+            Ie,
             {
               ctxId: b,
               ctxDisabled: e,
               ctxRequired: f && !V,
-              children: d
+              children: t
             }
           ),
           /* @__PURE__ */ l(
             "div",
             {
-              ...j,
+              ...K,
               ref: Q,
               id: q,
               role: "group",
-              "aria-label": L,
+              "aria-label": H,
               "aria-labelledby": G,
               "aria-disabled": e || void 0,
               "aria-required": f || void 0,
               "aria-invalid": y || void 0,
               "aria-describedby": z,
               "aria-errormessage": c ? p : void 0,
-              tabIndex: ie,
-              className: a[De.field],
-              onMouseDown: oe,
-              onFocus: se,
+              tabIndex: te,
+              className: a[xe.field],
+              onMouseDown: me,
+              onFocus: oe,
               children: /* @__PURE__ */ l(
-                Se,
+                Ne,
                 {
                   segmentText: Z,
                   segmentValues: v,
                   focusedSegment: F,
                   disabled: e,
-                  readOnly: u,
+                  readOnly: d,
                   onSegmentFocus: h,
-                  onSegmentBlur: de,
-                  onSegmentInput: ue,
-                  onSegmentKeyDown: ne,
+                  onSegmentBlur: ne,
+                  onSegmentInput: pe,
+                  onSegmentKeyDown: fe,
                   registerSegmentRef: Y
                 }
               )
@@ -179,14 +186,14 @@ const Ye = ge(
             "input",
             {
               type: "hidden",
-              name: m,
-              value: we(D),
+              name: u,
+              value: Ve(D),
               disabled: e
             }
           ),
-          /* @__PURE__ */ I(ye, { ctxId: _, ctxDisabled: e, children: [
+          /* @__PURE__ */ S(we, { ctxId: _, ctxDisabled: e, children: [
             o,
-            c && /* @__PURE__ */ l(he, { id: p, appearance: "negative", children: t })
+            c && /* @__PURE__ */ l(Se, { id: p, appearance: "negative", children: n })
           ] }),
           J(k)
         ]
@@ -195,5 +202,5 @@ const Ye = ge(
   }
 );
 export {
-  Ye as DateField
+  aa as DateField
 };

package/lib/wip/DateField/DateField.types.d.ts

@@ -4,6 +4,11 @@ import { ThemeTypes } from '@viasat/beam-shared/utils/constants';
 import { FormValidator } from '@viasat/beam-shared/components/form';
 type DateFieldInputAttributes = Omit<ComponentPropsWithRef<'input'>, 'value' | 'defaultValue' | 'onChange' | 'min' | 'max' | 'type' | 'size' | 'ref' | 'form' | 'autoComplete' | 'inputMode'>;
 export type SegmentType = 'day' | 'month' | 'year';
+/**
+ * Argument to `adjustSegment` / `adjustSegmentValue`.
+ * A numeric delta (e.g. ±1, ±5) or a boundary keyword for Home/End.
+ */
+export type SegmentAdjustment = number | 'min' | 'max';
 export type FocusTarget = SegmentType | 'all' | null;
 /** Per-segment values. Month is 1-12 (NOT 0-11). */
 export interface SegmentValues {
@@ -97,6 +102,12 @@ export interface DateFieldSegmentProps {
     type: SegmentType;
     /** Numeric segment value — used for `aria-valuenow`. `null` when the segment has no committed value. */
     value: Nullable<number>;
+    /**
+     * The upper bound announced as `aria-valuemax`.
+     * For day: month-aware (e.g. 28 for Feb non-leap); for month: 12; for year: 9999.
+     * Computed by `DateField.Segments` so the segment itself stays a pure renderer.
+     */
+    valueMax: number;
     /** Pre-computed text to render inside the segment (buffer, formatted value, or placeholder). */
     displayValue: string;
     /** True when `displayValue` IS the placeholder (drives `data-placeholder` CSS hook). */

package/lib/wip/DateField/DateField.utils.cjs.js

@@ -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;
+"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;

package/lib/wip/DateField/DateField.utils.d.ts

@@ -1,5 +1,88 @@
 import { Nullable } from '@viasat/beam-shared/utils/types';
-import { DateFieldPart, SegmentText, SegmentType, SegmentValues } from './DateField.types';
+import { DateFieldPart, SegmentAdjustment, SegmentText, SegmentType, SegmentValues } from './DateField.types';
+/**
+ * Absolute spin ceiling for day — independent of the current month.
+ *
+ * Intentional divergence (MUI-X model, not React Aria clamp): the day segment
+ * spins to this absolute max (31) even though `aria-valuemax` is month-aware
+ * (28–30, computed in `DateField.Segments`). So a user can spin ONE step past the
+ * announced ceiling into an out-of-range day (e.g. April 30 → 31); the validity
+ * layer surfaces that via `aria-invalid` rather than clamping to `daysInMonth`.
+ * The announced-vs-reachable gap is deliberate — see docs/adr/calendar.md (spin
+ * model). Out-of-range days (e.g. Feb 31) are caught by the validity layer, not here.
+ */
+export declare const DAY_SPIN_MAX = 31;
+/** Absolute maximum for month (1-based). */
+export declare const MONTH_MAX = 12;
+/**
+ * Announced aria-valuemax per segment type.
+ * Day uses the absolute calendar max (31); month-aware override for day is
+ * computed in `DateField.Segments` and passed as `valueMax` to `DateFieldSegment`.
+ */
+export declare const SEGMENT_ARIA_MAX: Record<SegmentType, number>;
+/** Clamps `n` to `[lo, hi]` (inclusive). */
+export declare const clamp: (n: number, lo: number, hi: number) => number;
+/**
+ * Modular wrap within a 1-based inclusive range `[1, max]`.
+ * Handles negative deltas correctly (e.g. 1 − 1 in a max-12 range → 12).
+ */
+export declare const wrapInRange: (n: number, max: number) => number;
+/**
+ * Returns the number of days in the given month/year combination.
+ *
+ * - `month` is 1-based (1 = January, 12 = December).
+ * - When `month` is null (unknown), returns 31 (conservative maximum).
+ * - When `month` is provided but `year` is null, uses {@link LEAP_YEAR_FALLBACK}
+ *   so February correctly reports 29 days (leap-safe fallback).
+ */
+export declare const getDaysInMonth: (year: Nullable<number>, month: Nullable<number>) => number;
+/**
+ * Returns today's date parts as a plain object.
+ * Extracted so callers in the value hook and DF-8 can share the same helper.
+ */
+export declare const todayParts: () => {
+    day: number;
+    month: number;
+    year: number;
+};
+/** Context passed into {@link adjustSegmentValue} — kept pure by the caller. */
+export interface AdjustSegmentContext {
+    /** Days in the current month (use {@link getDaysInMonth} to compute). */
+    daysInMonth: number;
+    /** Today's local-date values used to seed an empty segment on the first press. */
+    today: {
+        day: number;
+        month: number;
+        year: number;
+    };
+}
+/**
+ * Computes the next numeric value for a date segment after an increment,
+ * decrement, or boundary jump.
+ *
+ * Returns `null` to signal "no change" (Home/End on the year segment, which
+ * has no meaningful bound until DF-10 adds minDate/maxDate).
+ *
+ * Rules:
+ * - **day spin (numeric delta)**: modular wrap within `[1, DAY_SPIN_MAX]` — the
+ *   absolute calendar maximum. Out-of-range dates (e.g. Feb 31) are flagged
+ *   invalid by the existing validity layer (`useDateFieldValidity`), not clamped here.
+ * - **day End (`'max'`)**: uses `ctx.daysInMonth` — the last valid day of the
+ *   currently selected month (month-aware).
+ * - **month**: modular wrap within `[1, MONTH_MAX]`.
+ * - **year**: clamp to `[1, 9999]`; no wrap.
+ * - **Empty segment + numeric delta**: seeds to `ctx.today[type]` (first press
+ *   sets today's value; subsequent presses step from there).
+ * - **`'min'`**: returns 1 for day/month, null for year.
+ * - **`'max'`**: returns `ctx.daysInMonth` for day (End → month-aware last
+ *   valid day), MONTH_MAX for month, null for year.
+ *
+ * @param type - Segment kind (`'day'`, `'month'`, or `'year'`).
+ * @param current - Current numeric value of the segment, or `null` when empty.
+ * @param amount - Numeric delta (e.g. ±1, ±5) or `'min'`/`'max'` for Home/End.
+ * @param ctx - Pure context: days-in-month and today's date parts.
+ */
+export declare const adjustSegmentValue: (type: SegmentType, current: Nullable<number>, amount: SegmentAdjustment, ctx: AdjustSegmentContext) => Nullable<number>;
 export declare const deriveValue: (segments: SegmentValues) => Nullable<Date>;
 export declare const isSameDateValue: (a: Nullable<Date>, b: Nullable<Date>) => boolean;
 export declare const toISODateString: (value: Nullable<Date>) => string;

package/lib/wip/DateField/DateField.utils.es.js

@@ -1,51 +1,74 @@
-import { SEGMENT_MAX_LENGTH as o } from "./DateField.validation.es.js";
-const s = { day: "", month: "", year: "" }, i = (e) => e instanceof Date && !Number.isNaN(e.getTime()), u = (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(), d = (e) => {
-  if (!i(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), S = (e) => i(e) ? {
-  day: String(e.getDate()).padStart(2, "0"),
-  month: String(e.getMonth() + 1).padStart(2, "0"),
-  year: String(e.getFullYear()).padStart(4, "0")
-} : s, l = (e, t) => {
-  if (t === "" || e === "year" && t.length < o.year) return null;
-  const n = parseInt(t, 10);
+import { SEGMENT_MAX_LENGTH as s } from "./DateField.validation.es.js";
+const i = 31, o = 12, f = {
+  day: i,
+  month: o,
+  year: 9999
+}, 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 = () => {
+  const t = /* @__PURE__ */ new Date();
+  return { day: t.getDate(), month: t.getMonth() + 1, year: t.getFullYear() };
+}, M = (t, e, n, r) => {
+  if (n === "min") return t === "year" ? null : 1;
+  if (n === "max")
+    return t === "year" ? null : t === "day" ? r.daysInMonth : o;
+  if (e == null) return r.today[t];
+  if (t === "year") return c(e + n, 1, 9999);
+  const a = t === "day" ? i : o;
+  return g(e + n, a);
+}, m = { day: "", month: "", year: "" }, u = (t) => t instanceof Date && !Number.isNaN(t.getTime()), y = (t) => {
+  const { day: e, month: n, year: r } = t;
+  if (e == null || n == null || r == null) return null;
+  const a = new Date(r, n - 1, e);
+  return a.setFullYear(r), Number.isNaN(a.getTime()) || a.getFullYear() !== r || a.getMonth() !== n - 1 || a.getDate() !== e ? null : a;
+}, D = (t, e) => t == null && e == null ? !0 : t == null || e == null ? !1 : t.getTime() === e.getTime(), p = (t) => {
+  if (!u(t)) return "";
+  const e = String(t.getFullYear()).padStart(4, "0"), n = String(t.getMonth() + 1).padStart(2, "0"), r = String(t.getDate()).padStart(2, "0");
+  return `${e}-${n}-${r}`;
+}, T = (t) => t.filter(
+  (e) => e.type !== "literal"
+).map((e) => e.type), A = (t) => u(t) ? {
+  day: String(t.getDate()).padStart(2, "0"),
+  month: String(t.getMonth() + 1).padStart(2, "0"),
+  year: String(t.getFullYear()).padStart(4, "0")
+} : m, l = (t, e) => {
+  if (e === "" || t === "year" && e.length < s.year) return null;
+  const n = parseInt(e, 10);
   return Number.isNaN(n) || n === 0 ? null : n;
-}, y = (e) => u({
-  day: l("day", e.day),
-  month: l("month", e.month),
-  year: l("year", e.year)
-}), f = (e, t) => t === "" ? "" : t.padStart(o[e], "0"), p = (e, t, n) => t === "" ? { displayValue: n, isPlaceholder: !0 } : {
-  displayValue: t.padStart(o[e], "0"),
+}, E = (t) => y({
+  day: l("day", t.day),
+  month: l("month", t.month),
+  year: l("year", t.year)
+}), _ = (t, e) => e === "" ? "" : e.padStart(s[t], "0"), w = (t, e, n) => e === "" ? { displayValue: n, isPlaceholder: !0 } : {
+  displayValue: e.padStart(s[t], "0"),
   isPlaceholder: !1
-}, h = (e) => {
-  const t = window.getSelection();
-  if (!t) return;
+}, F = (t) => {
+  const e = window.getSelection();
+  if (!e) return;
   const n = document.createRange();
-  n.selectNodeContents(e), t.removeAllRanges(), t.addRange(n);
-}, N = (e) => {
+  n.selectNodeContents(t), e.removeAllRanges(), e.addRange(n);
+}, V = (t) => {
   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();
+  if (!t) return;
+  const e = (n = window.getSelection) == null ? void 0 : n.call(window);
+  e && e.rangeCount > 0 && t.contains(e.anchorNode) && e.removeAllRanges();
 };
 export {
-  N as clearSelectionWithin,
-  u as deriveValue,
-  y as deriveValueFromText,
-  p as getSegmentDisplay,
-  m as getSegmentOrder,
-  g as isSameDateValue,
-  f as normalizeSegmentText,
+  i as DAY_SPIN_MAX,
+  o as MONTH_MAX,
+  f as SEGMENT_ARIA_MAX,
+  M as adjustSegmentValue,
+  c as clamp,
+  V as clearSelectionWithin,
+  y as deriveValue,
+  E as deriveValueFromText,
+  h as getDaysInMonth,
+  w as getSegmentDisplay,
+  T as getSegmentOrder,
+  D as isSameDateValue,
+  _ as normalizeSegmentText,
   l as segmentNumber,
-  S as segmentTextFromValue,
-  h as selectElementContents,
-  d as toISODateString
+  A as segmentTextFromValue,
+  F as selectElementContents,
+  p as toISODateString,
+  N as todayParts,
+  g as wrapInRange
 };

package/lib/wip/DateField/useDateFieldKeyboard.cjs.js

@@ -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;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const b=require("react");function d({disabled:c,readOnly:u,fieldRef:a,focusNext:o,focusPrevious:n,adjustSegment:t,deleteLastDigit:y,clearSegment:p}){const w=b.useMemo(()=>{const i={ArrowRight:({segment:r,isRTL:e})=>((e?n:o)(r),!0),ArrowLeft:({segment:r,isRTL:e})=>((e?o:n)(r),!0)};return u?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"),Backspace:({segment:r})=>(y(r).wasEmpty&&n(r),!0),Delete:({segment:r})=>(p(r),!0)}},[t,p,y,o,n,u]);return b.useCallback((i,r)=>{if(c||r.altKey||r.ctrlKey||r.metaKey||r.shiftKey)return;const e=w[r.key];if(!e)return;const l=a.current,K=!!l&&(getComputedStyle(l).direction==="rtl"||!!l.closest('[dir="rtl"]'));e({segment:i,event:r,isRTL:K})&&r.preventDefault()},[c,w,a])}exports.useDateFieldKeyboard=d;

package/lib/wip/DateField/useDateFieldKeyboard.d.ts

@@ -1,5 +1,5 @@
 import { KeyboardEvent, RefObject } from 'react';
-import { SegmentType } from './DateField.types';
+import { SegmentAdjustment, SegmentType } from './DateField.types';
 /** Per-call context passed to each key binding. */
 export interface SegmentKeyContext {
     /** Segment the key event fired on. */
@@ -9,16 +9,50 @@ export interface SegmentKeyContext {
     /** Whether the field is rendered right-to-left. */
     isRTL: boolean;
 }
-/** A key binding: runs the action for one key, given the call context. */
-export type SegmentKeyBinding = (ctx: SegmentKeyContext) => void;
+/**
+ * A key binding: runs the action for one key, given the call context, and
+ * returns whether it handled the key. The dispatcher `preventDefault`s only when
+ * a binding returns `true`, so a binding can decline (return `false`) to leave
+ * the key to the browser's native default (e.g. page scroll).
+ */
+export type SegmentKeyBinding = (ctx: SegmentKeyContext) => boolean;
 export interface UseDateFieldKeyboardArgs {
     /** When true, the dispatcher ignores all keys. */
     disabled: boolean;
+    /**
+     * When true, value-mutation keys (ArrowUp/Down, PageUp/Down, Home, End) are
+     * left unbound so they fall through to the browser (native page scroll);
+     * only the navigation keys (ArrowLeft/Right) are bound. Blocks value mutation
+     * without suppressing scroll.
+     */
+    readOnly: boolean;
     /** Field root ref, used to detect RTL direction. */
     fieldRef: RefObject<HTMLDivElement>;
     /** Move focus to the next segment in `PARTS_ORDER`. */
     focusNext: (segment: SegmentType) => void;
     /** Move focus to the previous segment in `PARTS_ORDER`. */
     focusPrevious: (segment: SegmentType) => void;
+    /**
+     * Increment, decrement, or jump a segment to its min/max boundary.
+     * Provided by `useDateFieldValue`. Numeric `amount` wraps day/month and
+     * clamps year; `'min'`/`'max'` map to Home/End respectively. Returns `false`
+     * on a no-op (year `'min'`/`'max'` until DF-10 adds year bounds) so the
+     * dispatcher leaves the key to native page scroll.
+     */
+    adjustSegment: (type: SegmentType, amount: SegmentAdjustment) => boolean;
+    /**
+     * Removes the last raw digit from the segment buffer (Backspace).
+     * Returns `{ wasEmpty: true }` when the buffer was already empty, signalling
+     * the keyboard handler to move focus to the previous segment.
+     * Provided by `useDateFieldValue`.
+     */
+    deleteLastDigit: (type: SegmentType) => {
+        wasEmpty: boolean;
+    };
+    /**
+     * Clears the entire segment buffer to `''` (Delete). Focus stays on the
+     * current segment. Provided by `useDateFieldValue`.
+     */
+    clearSegment: (type: SegmentType) => void;
 }
-export declare function useDateFieldKeyboard({ disabled, fieldRef, focusNext, focusPrevious, }: UseDateFieldKeyboardArgs): (segment: SegmentType, event: KeyboardEvent<HTMLSpanElement>) => void;
+export declare function useDateFieldKeyboard({ disabled, readOnly, fieldRef, focusNext, focusPrevious, adjustSegment, deleteLastDigit, clearSegment, }: UseDateFieldKeyboardArgs): (segment: SegmentType, event: KeyboardEvent<HTMLSpanElement>) => void;

package/lib/wip/DateField/useDateFieldKeyboard.es.js

@@ -1,33 +1,49 @@
-import { useMemo as m, useCallback as s } from "react";
-function K({
-  disabled: l,
-  fieldRef: o,
-  focusNext: i,
-  focusPrevious: n
+import { useMemo as f, useCallback as h } from "react";
+function b({
+  disabled: p,
+  readOnly: e,
+  fieldRef: u,
+  focusNext: l,
+  focusPrevious: i,
+  adjustSegment: n,
+  deleteLastDigit: w,
+  clearSegment: y
 }) {
-  const y = m(
-    () => ({
-      ArrowRight: ({ segment: t, isRTL: r }) => (r ? n : i)(t),
-      ArrowLeft: ({ segment: t, isRTL: r }) => (r ? i : n)(t)
-      // ── Extension points ─────────────────────────────────────────────
-      // DF-4: ArrowUp / ArrowDown (increment/decrement), PageUp / PageDown,
-      //       Home / End (min/max of current segment) → value actions
-      // DF-5: Backspace / Delete (clear segment) → value action
-    }),
-    [i, n]
+  const a = f(
+    () => {
+      const o = {
+        // Nav keys always own the event (arrows are contentEditable caret keys we
+        // suppress even at the first/last segment), so they always report handled.
+        ArrowRight: ({ segment: r, isRTL: t }) => ((t ? i : l)(r), !0),
+        ArrowLeft: ({ segment: r, isRTL: t }) => ((t ? l : i)(r), !0)
+      };
+      return e ? o : {
+        ...o,
+        ArrowUp: ({ segment: r }) => n(r, 1),
+        ArrowDown: ({ segment: r }) => n(r, -1),
+        PageUp: ({ segment: r }) => n(r, 5),
+        PageDown: ({ segment: r }) => n(r, -5),
+        Home: ({ segment: r }) => n(r, "min"),
+        End: ({ segment: r }) => n(r, "max"),
+        // DF-5: Backspace removes the last digit (empty → focus previous); Delete clears the segment.
+        // Both always own the key (delete or focus-hop), so they report handled.
+        Backspace: ({ segment: r }) => (w(r).wasEmpty && i(r), !0),
+        Delete: ({ segment: r }) => (y(r), !0)
+      };
+    },
+    [n, y, w, l, i, e]
   );
-  return s(
-    (t, r) => {
-      if (l || r.altKey || r.ctrlKey || r.metaKey || r.shiftKey) return;
-      const a = y[r.key];
-      if (!a) return;
-      r.preventDefault();
-      const e = o.current, c = !!e && (getComputedStyle(e).direction === "rtl" || !!e.closest('[dir="rtl"]'));
-      a({ segment: t, event: r, isRTL: c });
+  return h(
+    (o, r) => {
+      if (p || r.altKey || r.ctrlKey || r.metaKey || r.shiftKey) return;
+      const t = a[r.key];
+      if (!t) return;
+      const c = u.current, K = !!c && (getComputedStyle(c).direction === "rtl" || !!c.closest('[dir="rtl"]'));
+      t({ segment: o, event: r, isRTL: K }) && r.preventDefault();
     },
-    [l, y, o]
+    [p, a, u]
   );
 }
 export {
-  K as useDateFieldKeyboard
+  b as useDateFieldKeyboard
 };

package/lib/wip/DateField/useDateFieldValue.cjs.js

@@ -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;
+"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 M({value:l,defaultValue:F,onChange:g}){const T=t.useRef(l!==void 0),b=T.current,[i,S]=t.useState(()=>r.segmentTextFromValue(b?l??null:F??null)),[_,h]=t.useState(!1),c=t.useRef(i),d=t.useRef(new Set),o=t.useRef(!1),y={day:r.segmentNumber("day",i.day),month:r.segmentNumber("month",i.month),year:r.segmentNumber("year",i.year)},D=r.deriveValue(y),x=t.useRef(D),R=t.useRef(b?l??null:null),m=t.useRef(g);t.useEffect(()=>{m.current=g},[g]),t.useEffect(()=>{if(!T.current||o.current||r.isSameDateValue(l??null,R.current))return;R.current=l??null;const e=r.segmentTextFromValue(l??null);c.current=e,S(e),x.current=r.deriveValueFromText(e)},[l]);const f=t.useCallback(e=>{var u;const n=r.deriveValueFromText(e);r.isSameDateValue(n,x.current)||(x.current=n,(u=m.current)==null||u.call(m,n))},[]),a=t.useCallback((e,n,{replace:u})=>{const s={...c.current,[e]:n};c.current=s,S(s),h(!0),f(s),u?d.current.add(e):d.current.delete(e)},[f]),N=t.useCallback((e,n)=>{const u=d.current.has(e)?"":c.current[e],s=E.tryAppendDigit(e,u,n);return s.rejected?{advanced:!1,rejected:!0}:(a(e,s.newBuffer,{replace:s.shouldAdvance}),{advanced:s.shouldAdvance,rejected:!1})},[a]),k=t.useCallback((e,n)=>{const u=c.current,s=r.segmentNumber(e,u[e]),p=r.getDaysInMonth(r.segmentNumber("year",u.year),r.segmentNumber("month",u.month)),V=r.adjustSegmentValue(e,s,n,{daysInMonth:p,today:r.todayParts()});return V==null?!1:(o.current=!0,a(e,String(V).padStart(E.SEGMENT_MAX_LENGTH[e],"0"),{replace:!0}),!0)},[a]),C=t.useCallback(e=>{const n=c.current[e];return n===""?{wasEmpty:!0}:(o.current=!0,a(e,n.slice(0,-1),{replace:!1}),{wasEmpty:!1})},[a]),v=t.useCallback(e=>{c.current[e]!==""&&(o.current=!0,a(e,"",{replace:!1}))},[a]),w=t.useCallback(e=>{o.current=!0,d.current.add(e)},[]),j=t.useCallback(()=>{o.current=!1;const e=c.current,n={day:r.normalizeSegmentText("day",e.day),month:r.normalizeSegmentText("month",e.month),year:r.normalizeSegmentText("year",e.year)};c.current=n,S(n),h(!0),f(n)},[f]);return{segmentText:i,segmentValues:y,currentValue:D,isControlled:b,wasTouched:_,appendDigit:N,adjustSegment:k,deleteLastDigit:C,clearSegment:v,beginSegmentEdit:w,commitOnBlur:j}}exports.useDateFieldValue=M;

package/lib/wip/DateField/useDateFieldValue.d.ts

@@ -1,5 +1,5 @@
 import { Nullable } from '@viasat/beam-shared/utils/types';
-import { AppendDigitResult, SegmentText, SegmentType, SegmentValues } from './DateField.types';
+import { AppendDigitResult, SegmentAdjustment, SegmentText, SegmentType, SegmentValues } from './DateField.types';
 export interface UseDateFieldValueArgs {
     value?: Nullable<Date>;
     defaultValue?: Nullable<Date>;
@@ -13,6 +13,44 @@ export interface UseDateFieldValueReturn {
     isControlled: boolean;
     wasTouched: boolean;
     appendDigit: (type: SegmentType, digit: string) => AppendDigitResult;
+    /**
+     * Increments, decrements, or jumps a segment to its min/max boundary.
+     *
+     * - Numeric `amount` (e.g. ±1, ±5): day/month wrap modularly; year clamps
+     *   to [1, 9999]. An empty segment seeds to today's value on the first press.
+     * - `'min'` / `'max'`: jump to the lower/upper bound. No-op on year (no
+     *   meaningful bound until DF-10 adds minDate/maxDate).
+     *
+     * Follows the `appendDigit` mutation pattern: writes zero-padded `segmentText`,
+     * sets `wasTouched`, calls `emitIfChanged`, and marks the segment in
+     * `replaceNextRef` so a digit typed immediately after replaces rather than
+     * appends.
+     *
+     * @returns `true` if the segment was adjusted, `false` on a no-op (currently
+     * only year `'min'`/`'max'`, until DF-10 adds year bounds). The keyboard
+     * dispatcher uses this to decide whether to `preventDefault` — a no-op leaves
+     * the key to native (e.g. page scroll).
+     */
+    adjustSegment: (type: SegmentType, amount: SegmentAdjustment) => boolean;
+    /**
+     * Removes the last raw digit from the segment buffer (Backspace behaviour).
+     *
+     * Returns `{ wasEmpty: true }` when the buffer was already empty so the
+     * caller (keyboard handler) knows to move focus to the previous segment.
+     * Clears `replaceNextRef` for the segment so a digit typed immediately after
+     * appends rather than replaces.
+     */
+    deleteLastDigit: (type: SegmentType) => {
+        wasEmpty: boolean;
+    };
+    /**
+     * Clears the entire segment buffer to `''` (Delete behaviour).
+     *
+     * Focus stays on the current segment. Fires `onChange(null)` via
+     * `emitIfChanged` when the cleared segment was part of a complete date.
+     * Clears `replaceNextRef` for the segment so the next digit appends.
+     */
+    clearSegment: (type: SegmentType) => void;
     beginSegmentEdit: (type: SegmentType) => void;
     commitOnBlur: () => void;
 }

package/lib/wip/DateField/useDateFieldValue.es.js

@@ -1,62 +1,96 @@
-import { useRef as n, useState as E, useEffect as j, useCallback as i } from "react";
-import { segmentTextFromValue as v, segmentNumber as T, deriveValue as C, isSameDateValue as w, deriveValueFromText as A, normalizeSegmentText as V } from "./DateField.utils.es.js";
-import { tryAppendDigit as I } from "./DateField.validation.es.js";
-function G({
-  value: r,
-  defaultValue: F,
-  onChange: m
+import { useRef as o, useState as w, useEffect as b, useCallback as s } from "react";
+import { segmentTextFromValue as v, segmentNumber as d, deriveValue as C, isSameDateValue as A, deriveValueFromText as M, getDaysInMonth as H, adjustSegmentValue as O, todayParts as P, normalizeSegmentText as T } from "./DateField.utils.es.js";
+import { tryAppendDigit as W, SEGMENT_MAX_LENGTH as X } from "./DateField.validation.es.js";
+function Q({
+  value: a,
+  defaultValue: N,
+  onChange: x
 }) {
-  const R = n(r !== void 0), f = R.current, [u, x] = E(
-    () => v(f ? r ?? null : F ?? null)
-  ), [B, S] = E(!1), c = n(u), s = n(/* @__PURE__ */ new Set()), g = n(!1), p = {
-    day: T("day", u.day),
-    month: T("month", u.month),
-    year: T("year", u.year)
-  }, D = C(p), h = n(D), b = n(
-    f ? r ?? null : null
-  ), o = n(m);
-  j(() => {
-    o.current = m;
-  }, [m]), j(() => {
-    if (!R.current || g.current || w(r ?? null, b.current)) return;
-    b.current = r ?? null;
-    const e = v(r ?? null);
-    c.current = e, x(e), h.current = A(e);
-  }, [r]);
-  const a = i((e) => {
-    var d;
-    const t = A(e);
-    w(t, h.current) || (h.current = t, (d = o.current) == null || d.call(o, t));
-  }, []), N = i(
+  const E = o(a !== void 0), h = E.current, [i, S] = w(
+    () => v(h ? a ?? null : N ?? null)
+  ), [F, V] = w(!1), c = o(i), m = o(/* @__PURE__ */ new Set()), l = o(!1), p = {
+    day: d("day", i.day),
+    month: d("month", i.month),
+    year: d("year", i.year)
+  }, D = C(p), y = o(D), R = o(
+    h ? a ?? null : null
+  ), f = o(x);
+  b(() => {
+    f.current = x;
+  }, [x]), b(() => {
+    if (!E.current || l.current || A(a ?? null, R.current)) return;
+    R.current = a ?? null;
+    const e = v(a ?? null);
+    c.current = e, S(e), y.current = M(e);
+  }, [a]);
+  const g = s((e) => {
+    var r;
+    const t = M(e);
+    A(t, y.current) || (y.current = t, (r = f.current) == null || r.call(f, t));
+  }, []), u = s(
+    (e, t, { replace: r }) => {
+      const n = { ...c.current, [e]: t };
+      c.current = n, S(n), V(!0), g(n), r ? m.current.add(e) : m.current.delete(e);
+    },
+    [g]
+  ), I = s(
+    (e, t) => {
+      const r = m.current.has(e) ? "" : c.current[e], n = W(e, r, t);
+      return n.rejected ? { advanced: !1, rejected: !0 } : (u(e, n.newBuffer, { replace: n.shouldAdvance }), { advanced: n.shouldAdvance, rejected: !1 });
+    },
+    [u]
+  ), B = s(
     (e, t) => {
-      const d = s.current.has(e) ? "" : c.current[e], l = I(e, d, t);
-      if (l.rejected) return { advanced: !1, rejected: !0 };
-      const y = { ...c.current, [e]: l.newBuffer };
-      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 };
+      const r = c.current, n = d(e, r[e]), z = H(
+        d("year", r.year),
+        d("month", r.month)
+      ), j = O(e, n, t, {
+        daysInMonth: z,
+        today: P()
+      });
+      return j == null ? !1 : (l.current = !0, u(
+        e,
+        String(j).padStart(X[e], "0"),
+        { replace: !0 }
+      ), !0);
     },
-    [a]
-  ), k = i((e) => {
-    g.current = !0, s.current.add(e);
-  }, []), z = i(() => {
-    g.current = !1;
+    [u]
+  ), G = s(
+    (e) => {
+      const t = c.current[e];
+      return t === "" ? { wasEmpty: !0 } : (l.current = !0, u(e, t.slice(0, -1), { replace: !1 }), { wasEmpty: !1 });
+    },
+    [u]
+  ), L = s(
+    (e) => {
+      c.current[e] !== "" && (l.current = !0, u(e, "", { replace: !1 }));
+    },
+    [u]
+  ), _ = s((e) => {
+    l.current = !0, m.current.add(e);
+  }, []), k = s(() => {
+    l.current = !1;
     const e = c.current, t = {
-      day: V("day", e.day),
-      month: V("month", e.month),
-      year: V("year", e.year)
+      day: T("day", e.day),
+      month: T("month", e.month),
+      year: T("year", e.year)
     };
-    c.current = t, x(t), S(!0), a(t);
-  }, [a]);
+    c.current = t, S(t), V(!0), g(t);
+  }, [g]);
   return {
-    segmentText: u,
+    segmentText: i,
     segmentValues: p,
     currentValue: D,
-    isControlled: f,
-    wasTouched: B,
-    appendDigit: N,
-    beginSegmentEdit: k,
-    commitOnBlur: z
+    isControlled: h,
+    wasTouched: F,
+    appendDigit: I,
+    adjustSegment: B,
+    deleteLastDigit: G,
+    clearSegment: L,
+    beginSegmentEdit: _,
+    commitOnBlur: k
   };
 }
 export {
-  G as useDateFieldValue
+  Q as useDateFieldValue
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@viasat/beam-react",
-  "version": "2.40.0",
+  "version": "2.42.0",
   "description": "React component library for the Beam design system",
   "license": "MIT",
   "author": "Viasat",
@@ -59,11 +59,11 @@
     "access": "public"
   },
   "dependencies": {
-    "@viasat/beam-fonts": "2.40.0",
-    "@viasat/beam-shared": "2.40.0",
-    "@viasat/beam-styles": "2.40.0",
-    "@viasat/beam-tokens": "2.40.0",
-    "@viasat/beam-icons": "2.40.0",
+    "@viasat/beam-fonts": "2.42.0",
+    "@viasat/beam-shared": "2.42.0",
+    "@viasat/beam-styles": "2.42.0",
+    "@viasat/beam-tokens": "2.42.0",
+    "@viasat/beam-icons": "2.42.0",
     "clsx": "^1.2.1",
     "@floating-ui/react": "^0.26.18",
     "@stepperize/react": "^5.1.5",

package/chunks/DateField.Segment.Df8aTzNW.js

@@ -1 +0,0 @@
-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;