@viasat/beam-react 2.41.0 → 2.42.0

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

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

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

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

@@ -40,5 +40,19 @@ export interface UseDateFieldKeyboardArgs {
      * 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, readOnly, fieldRef, focusNext, focusPrevious, adjustSegment, }: 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,45 +1,49 @@
-import { useMemo as u, useCallback as K } from "react";
-function A({
-  disabled: e,
-  readOnly: p,
-  fieldRef: w,
-  focusNext: t,
-  focusPrevious: l,
-  adjustSegment: i
+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 = u(
+  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: n }) => ((n ? l : t)(r), !0),
-        ArrowLeft: ({ segment: r, isRTL: n }) => ((n ? t : l)(r), !0)
+        ArrowRight: ({ segment: r, isRTL: t }) => ((t ? i : l)(r), !0),
+        ArrowLeft: ({ segment: r, isRTL: t }) => ((t ? l : i)(r), !0)
       };
-      return p ? o : {
+      return e ? o : {
         ...o,
-        ArrowUp: ({ segment: r }) => i(r, 1),
-        ArrowDown: ({ segment: r }) => i(r, -1),
-        PageUp: ({ segment: r }) => i(r, 5),
-        PageDown: ({ segment: r }) => i(r, -5),
-        Home: ({ segment: r }) => i(r, "min"),
-        End: ({ segment: r }) => i(r, "max")
-        // ── Extension points ─────────────────────────────────────────────
-        // DF-5: Backspace / Delete (clear segment) → value action
+        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)
       };
     },
-    [i, t, l, p]
+    [n, y, w, l, i, e]
   );
-  return K(
+  return h(
     (o, r) => {
-      if (e || r.altKey || r.ctrlKey || r.metaKey || r.shiftKey) return;
-      const n = y[r.key];
-      if (!n) return;
-      const c = w.current, a = !!c && (getComputedStyle(c).direction === "rtl" || !!c.closest('[dir="rtl"]'));
-      n({ segment: o, event: r, isRTL: a }) && r.preventDefault();
+      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();
     },
-    [e, y, w]
+    [p, a, u]
   );
 }
 export {
-  A as useDateFieldKeyboard
+  b as useDateFieldKeyboard
 };

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

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

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@viasat/beam-react",
-  "version": "2.41.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.41.0",
-    "@viasat/beam-shared": "2.41.0",
-    "@viasat/beam-styles": "2.41.0",
-    "@viasat/beam-tokens": "2.41.0",
-    "@viasat/beam-icons": "2.41.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",