@viasat/beam-react 2.39.2 → 2.40.0

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

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

package/chunks/DateField.Segment.Df8aTzNW.js

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

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.BBcn6sug.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.Df8aTzNW.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, segmentRef, }: DateFieldSegmentProps) => import("react/jsx-runtime").JSX.Element;
+export declare const DateFieldSegment: ({ type, value, 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.BVKky9IE.js";
+import { D as p } from "../../../chunks/DateField.Segment.BaAwH6ov.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.BBcn6sug.js"),l=require("./DateField.utils.cjs.js"),i=[{type:"month",value:""},{type:"literal",value:"/"},{type:"day",value:""},{type:"literal",value:"/"},{type:"year",value:""}],F={month:"MM",day:"DD",year:"YYYY"},R=l.getSegmentOrder(i),v=({segmentText:n,segmentValues:r,focusedSegment:o,disabled:u,readOnly:c,onSegmentFocus:d,onSegmentBlur:y,onSegmentInput:m,registerSegmentRef:p})=>a.jsx("span",{className:t.styles[t.staticDateFieldClassNames.segments],children:i.map((s,D)=>{if(s.type==="literal")return a.jsx("span",{"aria-hidden":"true",className:t.styles[t.staticDateFieldClassNames.separator],children:s.value},`literal-${D}`);const e=s.type,g=F[e],{displayValue:S,isPlaceholder:_}=l.getSegmentDisplay(e,n[e],g);return a.jsx(t.DateFieldSegment,{type:e,value:r[e],displayValue:S,isPlaceholder:_,isActive:o===e,disabled:u,readOnly:c,onFocus:()=>d(e),onBlur:y,onInput:m,segmentRef:p(e)},e)})});exports.DateFieldSegments=v;exports.PARTS_ORDER=R;
+"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;

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

@@ -1,4 +1,4 @@
-import { FocusEvent } from 'react';
+import { FocusEvent, KeyboardEvent } from 'react';
 import { FocusTarget, SegmentText, SegmentType, SegmentValues } from './DateField.types';
 export declare const PARTS_ORDER: ReadonlyArray<SegmentType>;
 export interface DateFieldSegmentsProps {
@@ -9,9 +9,14 @@ export interface DateFieldSegmentsProps {
     focusedSegment: FocusTarget;
     disabled: boolean;
     readOnly: boolean;
+    /** Forwarded to each segment's focus handler. */
     onSegmentFocus: (segment: SegmentType) => void;
+    /** Forwarded to each segment's blur handler. */
     onSegmentBlur: (event: FocusEvent<HTMLSpanElement>) => void;
+    /** Forwarded to each segment's single-digit input handler. */
     onSegmentInput: (segment: SegmentType, char: string) => void;
+    /** Keyboard handler from `useDateFieldKeyboard`, forwarded to each segment. */
+    onSegmentKeyDown: (segment: SegmentType, event: KeyboardEvent<HTMLSpanElement>) => void;
     registerSegmentRef: (segment: SegmentType) => (element: HTMLSpanElement | null) => void;
 }
-export declare const DateFieldSegments: ({ segmentText, segmentValues, focusedSegment, disabled, readOnly, onSegmentFocus, onSegmentBlur, onSegmentInput, registerSegmentRef, }: DateFieldSegmentsProps) => import("react/jsx-runtime").JSX.Element;
+export declare const DateFieldSegments: ({ segmentText, segmentValues, focusedSegment, disabled, readOnly, onSegmentFocus, onSegmentBlur, onSegmentInput, onSegmentKeyDown, registerSegmentRef, }: DateFieldSegmentsProps) => import("react/jsx-runtime").JSX.Element;

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

@@ -1,26 +1,27 @@
 import { jsx as a } from "react/jsx-runtime";
-import { s, a as l, D as h } from "../../../chunks/DateField.Segment.BVKky9IE.js";
-import { getSegmentOrder as R, getSegmentDisplay as f } from "./DateField.utils.es.js";
+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 = [
   { type: "month", value: "" },
   { type: "literal", value: "/" },
   { type: "day", value: "" },
   { type: "literal", value: "/" },
   { type: "year", value: "" }
-], A = {
+], E = {
   month: "MM",
   day: "DD",
   year: "YYYY"
-}, P = R(n), Y = ({
+}, Y = f(n), O = ({
   segmentText: r,
   segmentValues: o,
   focusedSegment: i,
   disabled: m,
   readOnly: p,
-  onSegmentFocus: c,
-  onSegmentBlur: y,
+  onSegmentFocus: y,
+  onSegmentBlur: c,
   onSegmentInput: u,
-  registerSegmentRef: d
+  onSegmentKeyDown: d,
+  registerSegmentRef: D
 }) => /* @__PURE__ */ a("span", { className: s[l.segments], children: n.map((t, g) => {
   if (t.type === "literal")
     return /* @__PURE__ */ a(
@@ -32,30 +33,31 @@ const n = [
       },
       `literal-${g}`
     );
-  const e = t.type, D = A[e], { displayValue: v, isPlaceholder: S } = f(
+  const e = t.type, v = E[e], { displayValue: S, isPlaceholder: h } = A(
     e,
     r[e],
-    D
+    v
   );
   return /* @__PURE__ */ a(
-    h,
+    R,
     {
       type: e,
       value: o[e],
-      displayValue: v,
-      isPlaceholder: S,
+      displayValue: S,
+      isPlaceholder: h,
       isActive: i === e,
       disabled: m,
       readOnly: p,
-      onFocus: () => c(e),
-      onBlur: y,
+      onFocus: () => y(e),
+      onBlur: c,
       onInput: u,
-      segmentRef: d(e)
+      onKeyDown: d,
+      segmentRef: D(e)
     },
     e
   );
 }) });
 export {
-  Y as DateFieldSegments,
-  P as PARTS_ORDER
+  O 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"),ce=require("clsx"),Fe=require("react"),e=require("../../../chunks/DateField.Segment.BBcn6sug.js"),_e=require("../../../chunks/constants.CgMu0_1M.js"),be=require("../../../chunks/form.context.D5XrYvpI.js"),fe=require("../../Form/contexts/label.context.cjs.js"),De=require("../../Form/contexts/helperText.context.cjs.js"),me=require("../../Form/hooks/useUniversalRef.hook.cjs.js"),r=require("./DateField.Segments.cjs.js"),xe=require("./DateField.utils.cjs.js"),pe=require("./useDateFieldFocus.cjs.js"),ge=require("./useDateFieldForm.cjs.js"),ve=require("./useDateFieldSegments.cjs.js"),ye=require("./useDateFieldValidity.cjs.js"),qe=require("./useDateFieldValue.cjs.js"),Se=require("./useInvalidState.cjs.js"),he=Fe.forwardRef(function({value:v,defaultValue:y,onChange:q,label:t=null,helperText:d=null,error:n,hideRequiredMarker:S=!1,validationRules:h,width:I,theme:o,fluid:w=!1,disabled:R=!1,readOnly:T=!1,required:P=!1,name:u,id:V,className:M,style:j,"aria-label":N,"aria-describedby":O,"aria-labelledby":B,...C},E){const{disabled:i,readOnly:c,required:F,invalid:H,errorMessageProvided:_,defaultValue:L,errorId:b,helperTextId:$,validationErrorsId:k,labelId:f,ariaDescribedBy:A,ariaLabelledBy:U,showErrors:W}=ge.useDateFieldForm({name:u,disabled:R,readOnly:T,required:P,defaultValue:y,error:n,hasHelperText:!!d,hasLabel:!!t,validationRules:h,ariaDescribedBy:O,ariaLabelledBy:B}),{refFn:z,ref:G}=me.useUniversalRef(E),{segmentRefs:J,registerSegmentRef:K}=ve.useDateFieldSegments(),{segmentText:Q,segmentValues:D,currentValue:m,wasTouched:X,appendDigit:Y,beginSegmentEdit:Z,commitOnBlur:ee}=qe.useDateFieldValue({value:v,defaultValue:L,onChange:q}),{focusedSegment:x,fieldTabIndex:ie,handleSegmentFocus:p,handleFieldFocus:le,handleFieldBlur:ae,handleFieldMouseDown:se,focusNext:re}=pe.useDateFieldFocus({disabled:i,fieldRef:G,segmentRefs:J,partsOrder:r.PARTS_ORDER,onSegmentFocusChange:Z,onFieldBlur:ee}),{isInvalid:te}=ye.useDateFieldValidity({segments:D,currentValue:m,wasTouched:X,isFocused:x!==null}),de=(a,s)=>{const{advanced:ue}=Y(a,s);ue&&re(a)},g=Se.useInvalidState({formInvalid:H,valueInvalid:te}),ne=a=>{if(i)return;const s=a.target.closest("label");!s||s.id!==f||(a.preventDefault(),p(r.PARTS_ORDER[0]))},oe=ce(e.styles[e.baseClassNamePrefix],o&&_e.themeClassName(o),w&&e.styles[`${e.classModifierPrefix}fluid`],g&&e.styles[`${e.classModifierPrefix}error`],i&&e.styles[`${e.classModifierPrefix}disabled`],c&&e.styles[`${e.classModifierPrefix}read-only`],M);return l.jsxs("div",{className:oe,style:{...j,maxWidth:I},onMouseDownCapture:ne,children:[l.jsx(fe.LabelProvider,{ctxId:f,ctxDisabled:i,ctxRequired:F&&!S,children:t}),l.jsx("div",{...C,ref:z,id:V,role:"group","aria-label":N,"aria-labelledby":U,"aria-disabled":i||void 0,"aria-required":F||void 0,"aria-invalid":g||void 0,"aria-describedby":A,"aria-errormessage":_?b:void 0,tabIndex:ie,className:e.styles[e.staticDateFieldClassNames.field],onMouseDown:se,onFocus:le,children:l.jsx(r.DateFieldSegments,{segmentText:Q,segmentValues:D,focusedSegment:x,disabled:i,readOnly:c,onSegmentFocus:p,onSegmentBlur:ae,onSegmentInput:de,registerSegmentRef:K})}),l.jsx("input",{type:"hidden",name:u,value:xe.toISODateString(m),disabled:i}),l.jsxs(De.HelperTextProvider,{ctxId:$,ctxDisabled:i,children:[d,_&&l.jsx(be.HelperText,{id:b,appearance:"negative",children:n})]}),W(k)]})});exports.DateField=he;
+"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;

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

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

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

@@ -1,4 +1,4 @@
-import { ComponentPropsWithRef, ReactElement, FocusEvent } from 'react';
+import { ComponentPropsWithRef, ReactElement, FocusEvent, KeyboardEvent } from 'react';
 import { Nullable } from '@viasat/beam-shared/utils/types';
 import { ThemeTypes } from '@viasat/beam-shared/utils/constants';
 import { FormValidator } from '@viasat/beam-shared/components/form';
@@ -104,7 +104,9 @@ export interface DateFieldSegmentProps {
     isActive: boolean;
     disabled: boolean;
     readOnly: boolean;
+    /** Fires when the segment gains focus (Tab, click, or programmatic). */
     onFocus: () => void;
+    /** Fires when focus leaves the segment; `relatedTarget` drives field-exit detection. */
     onBlur: (event: FocusEvent<HTMLSpanElement>) => void;
     /**
      * Single-character input callback. DF-2 single-digit typing path. The
@@ -113,6 +115,12 @@ export interface DateFieldSegmentProps {
      * DF-13 will add a paste-aware branch for whole-value parsing.
      */
     onInput: (type: SegmentType, char: string) => void;
+    /**
+     * Fires on segment keydown. The orchestrator routes it into
+     * `useDateFieldKeyboard` (DF-3: ArrowLeft/Right segment nav, RTL-aware;
+     * DF-4/DF-5 extend with increment/clear).
+     */
+    onKeyDown: (type: SegmentType, event: KeyboardEvent<HTMLSpanElement>) => void;
     segmentRef: (element: HTMLSpanElement | null) => void;
 }
 export {};

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(),m=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}`},d=e=>e.filter(t=>t.type!=="literal").map(t=>t.type),c=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},p=e=>{const t=window.getSelection();if(!t)return;const n=document.createRange();n.selectNodeContents(e),t.removeAllRanges(),t.addRange(n)};exports.deriveValue=s;exports.deriveValueFromText=S;exports.getSegmentDisplay=T;exports.getSegmentOrder=d;exports.isSameDateValue=g;exports.normalizeSegmentText=y;exports.segmentNumber=l;exports.segmentTextFromValue=c;exports.selectElementContents=p;exports.toISODateString=m;
+"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;

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

@@ -24,3 +24,8 @@ export interface SegmentDisplay {
 export declare const getSegmentDisplay: (type: SegmentType, text: string, placeholder: string) => SegmentDisplay;
 /** Selects an element's entire textContent (whole-segment highlight). */
 export declare const selectElementContents: (element: HTMLElement) => void;
+/** Clears the DOM selection when it currently lives inside `container`. Chrome
+ *  leaves the whole-segment Range highlighted after the field blurs; Safari
+ *  clears it automatically. Scoped to `container` so a selection elsewhere on
+ *  the page is untouched. */
+export declare const clearSelectionWithin: (container: HTMLElement | null) => void;

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

@@ -4,13 +4,13 @@ const s = { day: "", month: "", year: "" }, i = (e) => e instanceof Date && !Num
   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;
-}, m = (e, t) => e == null && t == null ? !0 : e == null || t == null ? !1 : e.getTime() === t.getTime(), d = (e) => {
+}, 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}`;
-}, c = (e) => e.filter(
+}, m = (e) => e.filter(
   (t) => t.type !== "literal"
-).map((t) => t.type), y = (e) => i(e) ? {
+).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")
@@ -18,28 +18,34 @@ const s = { day: "", month: "", year: "" }, i = (e) => e instanceof Date && !Num
   if (t === "" || e === "year" && t.length < o.year) return null;
   const n = parseInt(t, 10);
   return Number.isNaN(n) || n === 0 ? null : n;
-}, S = (e) => u({
+}, y = (e) => u({
   day: l("day", e.day),
   month: l("month", e.month),
   year: l("year", e.year)
-}), p = (e, t) => t === "" ? "" : t.padStart(o[e], "0"), f = (e, t, n) => t === "" ? { displayValue: n, isPlaceholder: !0 } : {
+}), f = (e, t) => t === "" ? "" : t.padStart(o[e], "0"), p = (e, t, n) => t === "" ? { displayValue: n, isPlaceholder: !0 } : {
   displayValue: t.padStart(o[e], "0"),
   isPlaceholder: !1
-}, N = (e) => {
+}, h = (e) => {
   const t = window.getSelection();
   if (!t) return;
   const n = document.createRange();
   n.selectNodeContents(e), t.removeAllRanges(), t.addRange(n);
+}, N = (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();
 };
 export {
+  N as clearSelectionWithin,
   u as deriveValue,
-  S as deriveValueFromText,
-  f as getSegmentDisplay,
-  c as getSegmentOrder,
-  m as isSameDateValue,
-  p as normalizeSegmentText,
+  y as deriveValueFromText,
+  p as getSegmentDisplay,
+  m as getSegmentOrder,
+  g as isSameDateValue,
+  f as normalizeSegmentText,
   l as segmentNumber,
-  y as segmentTextFromValue,
-  N as selectElementContents,
+  S as segmentTextFromValue,
+  h as selectElementContents,
   d as toISODateString
 };

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

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const c=require("react");function M({disabled:n,fieldRef:i,segmentRefs:T,partsOrder:f,onSegmentFocusChange:x,onFieldBlur:k}){const[l,a]=c.useState(null),s=f[0],r=c.useRef(x),o=c.useRef(k);c.useEffect(()=>{r.current=x,o.current=k},[x,k]),c.useEffect(()=>{if(l===null||l==="all")return;const t=T.current.get(l);t&&document.activeElement!==t&&t.focus()},[l,T]);const b=c.useCallback(t=>{var u;n||(a(t),(u=r.current)==null||u.call(r,t))},[n]),y=c.useCallback(t=>{var u;n||t.target===i.current&&(a(s),(u=r.current)==null||u.call(r,s))},[n,i,s]),E=c.useCallback(t=>{var u,e;(u=i.current)!=null&&u.contains(t.relatedTarget)||(a(null),(e=o.current)==null||e.call(o))},[i]),v=c.useCallback(t=>{var e;if(n)return;t.target.closest("[data-segment]")||(t.preventDefault(),a(s),(e=r.current)==null||e.call(r,s))},[n,s]),I=c.useCallback(t=>{var D;const u=f.indexOf(t);if(u===-1)return;const e=f[u+1];e!=null&&(a(e),(D=r.current)==null||D.call(r,e))},[f]);return{focusedSegment:l,fieldTabIndex:n?-1:l===null?0:-1,handleSegmentFocus:b,handleFieldFocus:y,handleFieldBlur:E,handleFieldMouseDown:v,focusNext:I}}exports.useDateFieldFocus=M;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react"),I=require("./DateField.utils.cjs.js");function M({disabled:n,fieldRef:a,segmentRefs:T,partsOrder:o,onSegmentFocusChange:b,onFieldBlur:D}){const[l,i]=e.useState(null),s=o[0],r=e.useRef(b),f=e.useRef(D);e.useEffect(()=>{r.current=b,f.current=D},[b,D]),e.useEffect(()=>{if(l===null||l==="all")return;const t=T.current.get(l);t&&document.activeElement!==t&&t.focus()},[l,T]);const _=e.useCallback(t=>{var u;n||(i(t),(u=r.current)==null||u.call(r,t))},[n]),v=e.useCallback(t=>{var u;n||t.target===a.current&&(i(s),(u=r.current)==null||u.call(r,s))},[n,a,s]),E=e.useCallback(t=>{var u,c;(u=a.current)!=null&&u.contains(t.relatedTarget)||(i(null),(c=f.current)==null||c.call(f),I.clearSelectionWithin(a.current))},[a]),d=e.useCallback(t=>{var c;if(n)return;t.target.closest("[data-segment]")||(t.preventDefault(),i(s),(c=r.current)==null||c.call(r,s))},[n,s]),k=e.useCallback((t,u)=>{var y;const c=o.indexOf(t);if(c===-1)return;const x=o[c+u];x!=null&&(i(x),(y=r.current)==null||y.call(r,x))},[o]),q=e.useCallback(t=>{k(t,1)},[k]),w=e.useCallback(t=>{k(t,-1)},[k]);return{focusedSegment:l,fieldTabIndex:n?-1:l===null?0:-1,handleSegmentFocus:_,handleFieldFocus:v,handleFieldBlur:E,handleFieldMouseDown:d,focusNext:q,focusPrevious:w}}exports.useDateFieldFocus=M;

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

@@ -1,8 +1,8 @@
-import { FocusEvent, MouseEvent, MutableRefObject } from 'react';
+import { FocusEvent, MouseEvent, MutableRefObject, RefObject } from 'react';
 import { FocusTarget, SegmentType } from './DateField.types';
 export interface UseDateFieldFocusArgs {
     disabled: boolean;
-    fieldRef: MutableRefObject<HTMLDivElement | null>;
+    fieldRef: RefObject<HTMLDivElement>;
     segmentRefs: MutableRefObject<Map<SegmentType, HTMLSpanElement>>;
     /** Ordered segment types (literals stripped). En-US hardcoded; DF-8 derives from locale. */
     partsOrder: ReadonlyArray<SegmentType>;
@@ -19,5 +19,6 @@ export interface UseDateFieldFocusReturn {
     handleFieldBlur: (event: FocusEvent<HTMLElement>) => void;
     handleFieldMouseDown: (event: MouseEvent<HTMLDivElement>) => void;
     focusNext: (currentType: SegmentType) => void;
+    focusPrevious: (currentType: SegmentType) => void;
 }
 export declare function useDateFieldFocus({ disabled, fieldRef, segmentRefs, partsOrder, onSegmentFocusChange, onFieldBlur, }: UseDateFieldFocusArgs): UseDateFieldFocusReturn;

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

@@ -1,65 +1,77 @@
-import { useState as N, useRef as I, useEffect as k, useCallback as s } from "react";
-function z({
+import { useState as j, useRef as E, useEffect as I, useCallback as e } from "react";
+import { clearSelectionWithin as m } from "./DateField.utils.es.js";
+function G({
   disabled: n,
-  fieldRef: f,
-  segmentRefs: D,
-  partsOrder: o,
-  onSegmentFocusChange: a,
-  onFieldBlur: T
+  fieldRef: i,
+  segmentRefs: v,
+  partsOrder: f,
+  onSegmentFocusChange: T,
+  onFieldBlur: D
 }) {
-  const [e, i] = N(null), l = o[0], r = I(a), x = I(T);
-  k(() => {
-    r.current = a, x.current = T;
-  }, [a, T]), k(() => {
-    if (e === null || e === "all") return;
-    const t = D.current.get(e);
+  const [s, l] = j(null), o = f[0], r = E(T), a = E(D);
+  I(() => {
+    r.current = T, a.current = D;
+  }, [T, D]), I(() => {
+    if (s === null || s === "all") return;
+    const t = v.current.get(s);
     t && document.activeElement !== t && t.focus();
-  }, [e, D]);
-  const p = s(
+  }, [s, v]);
+  const k = e(
     (t) => {
-      var u;
-      n || (i(t), (u = r.current) == null || u.call(r, t));
+      var c;
+      n || (l(t), (c = r.current) == null || c.call(r, t));
     },
     [n]
-  ), v = s(
+  ), w = e(
     (t) => {
-      var u;
-      n || t.target === f.current && (i(l), (u = r.current) == null || u.call(r, l));
+      var c;
+      n || t.target === i.current && (l(o), (c = r.current) == null || c.call(r, o));
     },
-    [n, f, l]
-  ), w = s(
+    [n, i, o]
+  ), M = e(
     (t) => {
-      var u, c;
-      (u = f.current) != null && u.contains(t.relatedTarget) || (i(null), (c = x.current) == null || c.call(x));
+      var c, u;
+      (c = i.current) != null && c.contains(t.relatedTarget) || (l(null), (u = a.current) == null || u.call(a), m(i.current));
     },
-    [f]
-  ), y = s(
+    [i]
+  ), N = e(
     (t) => {
-      var c;
+      var u;
       if (n) return;
-      t.target.closest("[data-segment]") || (t.preventDefault(), i(l), (c = r.current) == null || c.call(r, l));
+      t.target.closest("[data-segment]") || (t.preventDefault(), l(o), (u = r.current) == null || u.call(r, o));
     },
-    [n, l]
-  ), M = s(
-    (t) => {
-      var E;
-      const u = o.indexOf(t);
+    [n, o]
+  ), x = e(
+    (t, c) => {
+      var y;
+      const u = f.indexOf(t);
       if (u === -1) return;
-      const c = o[u + 1];
-      c != null && (i(c), (E = r.current) == null || E.call(r, c));
+      const p = f[u + c];
+      p != null && (l(p), (y = r.current) == null || y.call(r, p));
+    },
+    [f]
+  ), P = e(
+    (t) => {
+      x(t, 1);
+    },
+    [x]
+  ), W = e(
+    (t) => {
+      x(t, -1);
     },
-    [o]
+    [x]
   );
   return {
-    focusedSegment: e,
-    fieldTabIndex: n ? -1 : e === null ? 0 : -1,
-    handleSegmentFocus: p,
-    handleFieldFocus: v,
-    handleFieldBlur: w,
-    handleFieldMouseDown: y,
-    focusNext: M
+    focusedSegment: s,
+    fieldTabIndex: n ? -1 : s === null ? 0 : -1,
+    handleSegmentFocus: k,
+    handleFieldFocus: w,
+    handleFieldBlur: M,
+    handleFieldMouseDown: N,
+    focusNext: P,
+    focusPrevious: W
   };
 }
 export {
-  z as useDateFieldFocus
+  G as useDateFieldFocus
 };

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

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

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

@@ -0,0 +1,24 @@
+import { KeyboardEvent, RefObject } from 'react';
+import { SegmentType } from './DateField.types';
+/** Per-call context passed to each key binding. */
+export interface SegmentKeyContext {
+    /** Segment the key event fired on. */
+    segment: SegmentType;
+    /** The originating keydown event. */
+    event: KeyboardEvent<HTMLSpanElement>;
+    /** 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;
+export interface UseDateFieldKeyboardArgs {
+    /** When true, the dispatcher ignores all keys. */
+    disabled: 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;
+}
+export declare function useDateFieldKeyboard({ disabled, fieldRef, focusNext, focusPrevious, }: UseDateFieldKeyboardArgs): (segment: SegmentType, event: KeyboardEvent<HTMLSpanElement>) => void;

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

@@ -0,0 +1,33 @@
+import { useMemo as m, useCallback as s } from "react";
+function K({
+  disabled: l,
+  fieldRef: o,
+  focusNext: i,
+  focusPrevious: n
+}) {
+  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]
+  );
+  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 });
+    },
+    [l, y, o]
+  );
+}
+export {
+  K as useDateFieldKeyboard
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@viasat/beam-react",
-  "version": "2.39.2",
+  "version": "2.40.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.39.2",
-    "@viasat/beam-shared": "2.39.2",
-    "@viasat/beam-styles": "2.39.2",
-    "@viasat/beam-tokens": "2.39.2",
-    "@viasat/beam-icons": "2.39.2",
+    "@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",
     "clsx": "^1.2.1",
     "@floating-ui/react": "^0.26.18",
     "@stepperize/react": "^5.1.5",

package/chunks/DateField.Segment.BBcn6sug.js

@@ -1 +0,0 @@
-var y=require("../assets/DateField.css");const v=require("react/jsx-runtime"),N=require("clsx"),d=require("react"),M=require("./classNames.DC8Ra4sw.js"),D=require("../lib/wip/DateField/DateField.utils.cjs.js"),F="date-field",{baseClassNamePrefix:R,classModifierPrefix:q,subElementClassPrefix:r}=M.getBEMClassNames(F),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:31,month:12,year:9999},P={day:"day",month:"month",year:"year"},k=({type:n,value:_,displayValue:t,isPlaceholder:g,isActive:a,disabled:l,readOnly:o,onFocus:C,onBlur:p,onInput:x,segmentRef:m})=>{const s=!l&&!o,f=d.useRef(null),E=d.useCallback(e=>{f.current=e,m(e)},[m]),h=e=>{if(!s)return;const b=e.currentTarget,i=e.nativeEvent.data;i!=null&&i.length===1&&x(n,i),b.textContent!==t&&(b.textContent=t)};return d.useLayoutEffect(()=>{if(!a||!s)return;const e=f.current;e&&D.selectElementContents(e)},[t,a,s]),v.jsx("span",{ref:E,role:"spinbutton","aria-label":P[n],"aria-valuenow":_??void 0,"aria-valuemin":1,"aria-valuemax":I[n],"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":g,onFocus:C,onBlur:p,onInput:h,onMouseUp:e=>e.preventDefault(),className:N(u[c.segment]),children:t})};exports.DateFieldSegment=k;exports.baseClassNamePrefix=R;exports.classModifierPrefix=q;exports.staticDateFieldClassNames=c;exports.styles=u;