@viasat/beam-react 2.63.0 → 2.65.0

package/CHANGELOG.md

@@ -1,3 +1,23 @@
+## 2.65.0 (2026-09-03)
+
+### 🚀 Features
+
+- **DateField:** Imperative ref API ([#1422](https://git.viasat.com/vega/Beam/pull/1422))
+
+### ❤️ Thank You
+
+- Roman-Ionita, Alin
+
+## 2.64.0 (2026-09-01)
+
+### 🚀 Features
+
+- **web-components:** real-browser test lane (WTR) + FormField name reflection fix so beam's inputs work with none beam forms ([#1425](https://git.viasat.com/vega/Beam/pull/1425))
+
+### ❤️ Thank You
+
+- Evans, Joel
+
 ## 2.63.0 (2026-09-01)
 
 ### 🚀 Features

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

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const s=require("react/jsx-runtime"),Ie=require("clsx"),u=require("react"),e=require("../../../chunks/DateField.Segment.BqMaeKLk.js"),Me=require("../../../chunks/constants.CgMu0_1M.js"),Ee=require("../../../chunks/helpers.BIckGIbP.js"),Ne=require("../../../chunks/form.context.CkC0TwMb.js"),Re=require("../../Form/contexts/label.context.cjs.js"),Ce=require("../../Form/contexts/helperText.context.cjs.js"),je=require("../../Form/hooks/useUniversalRef.hook.cjs.js"),Le=require("../../../utils/hooks/useIsMounted.cjs.js"),Oe=require("../ErrorBoundary/ErrorBoundary.cjs.js"),Be=require("./DateField.Segments.cjs.js"),C=require("./DateField.devWarnings.cjs.js"),l=require("./DateField.utils.cjs.js"),Te=require("./useDateFieldFocus.cjs.js"),Ve=require("./useDateFieldForm.cjs.js"),Pe=require("./useDateFieldKeyboard.cjs.js"),Ae=require("./useDateFieldSegments.cjs.js"),ke=require("./useDateFieldValidity.cjs.js"),Ke=require("./useDateFieldValue.cjs.js"),He=require("./useInvalidState.cjs.js"),We="MM/DD/YYYY",Ue=()=>{process.env.NODE_ENV!=="production"&&console.warn("DateField: segments failed to render; showing a static fallback.")},Ye=u.forwardRef(function({value:c,defaultValue:_,onChange:j,minDate:F,maxDate:b,getClampAnnouncement:L,locale:O,label:D=null,helperText:m=null,error:f,hideRequiredMarker:B=!1,validationRules:T,width:V,theme:g,fluid:P=!1,disabled:A=!1,readOnly:k=!1,required:K=!1,name:p,id:H,className:W,style:U,"aria-label":Y,"aria-describedby":$,"aria-labelledby":z,...G},J){const{disabled:a,readOnly:r,required:x,invalid:Q,errorMessageProvided:v,defaultValue:X,errorId:y,helperTextId:Z,validationErrorsId:ee,labelId:h,ariaDescribedBy:se,ariaLabelledBy:ae,showErrors:ie}=Ve.useDateFieldForm({name:p,disabled:A,readOnly:k,required:K,defaultValue:_,error:f,hasHelperText:!!m,hasLabel:!!D,validationRules:T,ariaDescribedBy:$,ariaLabelledBy:z});C.useDevMinMaxWarning(F,b),C.useDevInvalidValueWarning(c,_);const{refFn:le,ref:S}=je.useUniversalRef(J),{segmentRefs:te,registerSegmentRef:re}=Ae.useDateFieldSegments(),ne=O??l.DEFAULT_LOCALE,q=Le.useIsMounted(),n=l.getDateParts(q?ne:l.DEFAULT_LOCALE),w=u.useMemo(()=>l.getSegmentOrder(n),[n]),{segmentText:de,segmentValues:I,currentValue:M,wasTouched:oe,appendDigit:E,adjustSegment:ue,clearSegment:ce,beginSegmentEdit:_e,commitOnBlur:Fe,clampAnnouncement:be}=Ke.useDateFieldValue({value:c,defaultValue:X,onChange:j,minDate:F,maxDate:b,getClampAnnouncement:L}),{focusedSegment:N,fieldTabIndex:De,handleSegmentFocus:R,handleFieldFocus:me,handleFieldBlur:fe,handleFieldMouseDown:ge,focusNext:d,focusPrevious:pe}=Te.useDateFieldFocus({disabled:a,fieldRef:S,segmentRefs:te,partsOrder:w,onSegmentFocusChange:_e,onFieldBlur:Fe}),xe=Pe.useDateFieldKeyboard({disabled:a,readOnly:r,fieldRef:S,focusNext:d,focusPrevious:pe,adjustSegment:ue,clearSegment:ce}),{isInvalid:ve}=ke.useDateFieldValidity({segments:I,currentValue:M,wasTouched:oe,isFocused:N!==null}),ye=u.useCallback((i,t)=>{const{advanced:we}=E(i,t);we&&d(i)},[E,d]),o=He.useInvalidState({formInvalid:Q,valueInvalid:ve}),he=q&&Ee.isIOS()?"textbox":"spinbutton",Se=i=>{if(a)return;const t=i.target.closest("label");!t||t.id!==h||(i.preventDefault(),R(w[0]))},qe=Ie(e.styles[e.baseClassNamePrefix],g&&Me.themeClassName(g),P&&e.styles[`${e.classModifierPrefix}fluid`],o&&e.styles[`${e.classModifierPrefix}error`],a&&e.styles[`${e.classModifierPrefix}disabled`],r&&e.styles[`${e.classModifierPrefix}read-only`],W);return s.jsxs("div",{className:qe,style:{...U,maxWidth:V},onMouseDownCapture:Se,children:[s.jsx(Re.LabelProvider,{ctxId:h,ctxDisabled:a,ctxRequired:x&&!B,children:D}),s.jsx("div",{...G,ref:le,id:H,role:"group","aria-label":Y,"aria-labelledby":ae,"aria-disabled":a||void 0,"aria-required":x||void 0,"aria-invalid":o||void 0,"aria-describedby":se,"aria-errormessage":v?y:void 0,tabIndex:De,className:e.styles[e.staticDateFieldClassNames.field],onMouseDown:ge,onFocus:me,children:s.jsx(Oe.ErrorBoundary,{fallback:s.jsx("span",{className:e.styles[e.staticDateFieldClassNames.segments],children:We}),onError:Ue,children:s.jsx(Be.DateFieldSegments,{parts:n,segmentText:de,segmentValues:I,focusedSegment:N,disabled:a,readOnly:r,invalid:o,role:he,onSegmentFocus:R,onSegmentBlur:fe,onSegmentInput:ye,onSegmentKeyDown:xe,registerSegmentRef:re})})}),s.jsx("span",{role:"status","aria-live":"polite","aria-atomic":"true",className:e.styles[e.staticDateFieldClassNames.srStatus],children:be}),s.jsx("input",{type:"hidden",name:p,value:l.toISODateString(M),disabled:a}),s.jsxs(Ce.HelperTextProvider,{ctxId:Z,ctxDisabled:a,children:[m,v&&s.jsx(Ne.HelperText,{id:y,appearance:"negative",children:f})]}),ie(ee)]})});exports.DateField=Ye;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const l=require("react/jsx-runtime"),Le=require("clsx"),a=require("react"),e=require("../../../chunks/DateField.Segment.BqMaeKLk.js"),Oe=require("../../../chunks/constants.CgMu0_1M.js"),Te=require("../../../chunks/helpers.BIckGIbP.js"),Be=require("../../../chunks/form.context.CkC0TwMb.js"),Ve=require("../../Form/contexts/label.context.cjs.js"),Pe=require("../../Form/contexts/helperText.context.cjs.js"),Ae=require("../../../utils/hooks/useIsMounted.cjs.js"),ke=require("../../../utils/functions.cjs.js"),He=require("../ErrorBoundary/ErrorBoundary.cjs.js"),Ke=require("./DateField.Segments.cjs.js"),k=require("./DateField.devWarnings.cjs.js"),o=require("./DateField.utils.cjs.js"),We=require("./useDateFieldFocus.cjs.js"),Ye=require("./useDateFieldForm.cjs.js"),$e=require("./useDateFieldKeyboard.cjs.js"),Ue=require("./useDateFieldSegments.cjs.js"),ze=require("./useDateFieldValidity.cjs.js"),Ge=require("./useDateFieldValue.cjs.js"),Je=require("./useInvalidState.cjs.js"),Qe="MM/DD/YYYY",Xe=()=>{process.env.NODE_ENV!=="production"&&console.warn("DateField: segments failed to render; showing a static fallback.")},Ze=a.forwardRef(function({value:F,defaultValue:D,onChange:H,minDate:m,maxDate:g,getClampAnnouncement:K,locale:W,label:p=null,helperText:x=null,error:v,hideRequiredMarker:Y=!1,validationRules:$,width:U,theme:y,fluid:z=!1,disabled:G=!1,readOnly:J=!1,required:Q=!1,name:S,id:X,className:Z,style:ee,"aria-label":se,"aria-describedby":te,"aria-labelledby":ae,...le},h){const{disabled:s,readOnly:i,required:q,invalid:re,errorMessageProvided:w,defaultValue:ie,errorId:I,helperTextId:ne,validationErrorsId:oe,labelId:M,ariaDescribedBy:de,ariaLabelledBy:ue,showErrors:ce}=Ye.useDateFieldForm({name:S,disabled:G,readOnly:J,required:Q,defaultValue:D,error:v,hasHelperText:!!x,hasLabel:!!p,validationRules:$,ariaDescribedBy:te,ariaLabelledBy:ae});k.useDevMinMaxWarning(m,g),k.useDevInvalidValueWarning(F,D);const n=a.useRef(null),{segmentRefs:be,registerSegmentRef:fe}=Ue.useDateFieldSegments(),_e=W??o.DEFAULT_LOCALE,R=Ae.useIsMounted(),c=o.getDateParts(R?_e:o.DEFAULT_LOCALE),d=a.useMemo(()=>o.getSegmentOrder(c),[c]),{segmentText:Fe,segmentValues:C,currentValue:E,wasTouched:De,appendDigit:N,adjustSegment:me,clearSegment:ge,clearAll:j,beginSegmentEdit:pe,commitOnBlur:xe,clampAnnouncement:ve}=Ge.useDateFieldValue({value:F,defaultValue:ie,onChange:H,minDate:m,maxDate:g,getClampAnnouncement:K}),{focusedSegment:L,fieldTabIndex:ye,handleSegmentFocus:u,handleFieldFocus:Se,handleFieldBlur:he,handleFieldMouseDown:qe,focusNext:b,focusPrevious:we}=We.useDateFieldFocus({disabled:s,fieldRef:n,segmentRefs:be,partsOrder:d,onSegmentFocusChange:pe,onFieldBlur:xe}),Ie=$e.useDateFieldKeyboard({disabled:s,readOnly:i,fieldRef:n,focusNext:b,focusPrevious:we,adjustSegment:me,clearSegment:ge}),{isInvalid:Me}=ze.useDateFieldValidity({segments:C,currentValue:E,wasTouched:De,isFocused:L!==null}),Re=a.useCallback((t,r)=>{const{advanced:_}=N(t,r);_&&b(t)},[N,b]),f=Je.useInvalidState({formInvalid:re,valueInvalid:Me}),Ce=R&&Te.isIOS()?"textbox":"spinbutton",O=a.useCallback(t=>{s||u(d[0],t)},[s,u,d]),T=a.useCallback(()=>{var r;if(s)return;const t=document.activeElement;t instanceof HTMLElement&&t!==n.current&&((r=n.current)!=null&&r.contains(t))&&t.blur()},[s]),B=a.useCallback(()=>{s||i||j()},[s,i,j]),V=a.useRef(O),P=a.useRef(T),A=a.useRef(B);V.current=O,P.current=T,A.current=B;const Ee=a.useCallback(t=>{const r=t?Object.assign(t,{focus:_=>V.current(_),blur:()=>P.current(),clear:()=>A.current()}):null;ke.mergeRefs(n,h)(r)},[h]),Ne=t=>{if(s)return;const r=t.target.closest("label");!r||r.id!==M||(t.preventDefault(),u(d[0]))},je=Le(e.styles[e.baseClassNamePrefix],y&&Oe.themeClassName(y),z&&e.styles[`${e.classModifierPrefix}fluid`],f&&e.styles[`${e.classModifierPrefix}error`],s&&e.styles[`${e.classModifierPrefix}disabled`],i&&e.styles[`${e.classModifierPrefix}read-only`],Z);return l.jsxs("div",{className:je,style:{...ee,maxWidth:U},onMouseDownCapture:Ne,children:[l.jsx(Ve.LabelProvider,{ctxId:M,ctxDisabled:s,ctxRequired:q&&!Y,children:p}),l.jsx("div",{...le,ref:Ee,id:X,role:"group","aria-label":se,"aria-labelledby":ue,"aria-disabled":s||void 0,"aria-required":q||void 0,"aria-invalid":f||void 0,"aria-describedby":de,"aria-errormessage":w?I:void 0,tabIndex:ye,className:e.styles[e.staticDateFieldClassNames.field],onMouseDown:qe,onFocus:Se,children:l.jsx(He.ErrorBoundary,{fallback:l.jsx("span",{className:e.styles[e.staticDateFieldClassNames.segments],children:Qe}),onError:Xe,children:l.jsx(Ke.DateFieldSegments,{parts:c,segmentText:Fe,segmentValues:C,focusedSegment:L,disabled:s,readOnly:i,invalid:f,role:Ce,onSegmentFocus:u,onSegmentBlur:he,onSegmentInput:Re,onSegmentKeyDown:Ie,registerSegmentRef:fe})})}),l.jsx("span",{role:"status","aria-live":"polite","aria-atomic":"true",className:e.styles[e.staticDateFieldClassNames.srStatus],children:ve}),l.jsx("input",{type:"hidden",name:S,value:o.toISODateString(E),disabled:s}),l.jsxs(Pe.HelperTextProvider,{ctxId:ne,ctxDisabled:s,children:[x,w&&l.jsx(Be.HelperText,{id:I,appearance:"negative",children:v})]}),ce(oe)]})});exports.DateField=Ze;

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

@@ -1,3 +1,3 @@
-import { DateFieldProps } from './DateField.types';
+import { DateFieldHandle, DateFieldProps } from './DateField.types';
 /** Segmented date input. */
-export declare const DateField: import('react').ForwardRefExoticComponent<DateFieldProps & import('react').RefAttributes<HTMLDivElement>>;
+export declare const DateField: import('react').ForwardRefExoticComponent<DateFieldProps & import('react').RefAttributes<DateFieldHandle>>;

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

@@ -1,245 +1,271 @@
-import { jsxs as B, jsx as a } from "react/jsx-runtime";
-import Re from "clsx";
-import { forwardRef as Ce, useMemo as Ee, useCallback as Oe } from "react";
-import { s as r, b as Be, c as i, a as m } from "../../../chunks/DateField.Segment.BMXzpxgl.js";
-import { t as Le } from "../../../chunks/constants.Cruz2A1w.js";
-import { i as Ve } from "../../../chunks/helpers.CiQfGwdc.js";
-import { H as Te } from "../../../chunks/form.context.BDYA2JQs.js";
-import { LabelProvider as Ae } from "../../Form/contexts/label.context.es.js";
-import { HelperTextProvider as Pe } from "../../Form/contexts/helperText.context.es.js";
-import { useUniversalRef as qe } from "../../Form/hooks/useUniversalRef.hook.es.js";
-import { useIsMounted as Ke } from "../../../utils/hooks/useIsMounted.es.js";
-import { ErrorBoundary as He } from "../ErrorBoundary/ErrorBoundary.es.js";
-import { DateFieldSegments as We } from "./DateField.Segments.es.js";
-import { useDevMinMaxWarning as Ye, useDevInvalidValueWarning as _e } from "./DateField.devWarnings.es.js";
-import { getDateParts as $e, getSegmentOrder as je, toISODateString as ke, DEFAULT_LOCALE as L } from "./DateField.utils.es.js";
-import { useDateFieldFocus as Ue } from "./useDateFieldFocus.es.js";
-import { useDateFieldForm as ze } from "./useDateFieldForm.es.js";
-import { useDateFieldKeyboard as Ge } from "./useDateFieldKeyboard.es.js";
-import { useDateFieldSegments as Je } from "./useDateFieldSegments.es.js";
-import { useDateFieldValidity as Qe } from "./useDateFieldValidity.es.js";
-import { useDateFieldValue as Xe } from "./useDateFieldValue.es.js";
-import { useInvalidState as Ze } from "./useInvalidState.es.js";
-const ea = "MM/DD/YYYY", aa = () => {
-  process.env.NODE_ENV !== "production" && console.warn(
-    "DateField: segments failed to render; showing a static fallback."
-  );
-}, Ma = Ce(
+import { jsxs as Y, jsx as t } from "react/jsx-runtime";
+import Pe from "clsx";
+import { forwardRef as qe, useRef as c, useMemo as He, useCallback as o } from "react";
+import { s, b as Ke, c as u, a as g } from "../../../chunks/DateField.Segment.BMXzpxgl.js";
+import { t as je } from "../../../chunks/constants.Cruz2A1w.js";
+import { i as We } from "../../../chunks/helpers.CiQfGwdc.js";
+import { H as Ye } from "../../../chunks/form.context.BDYA2JQs.js";
+import { LabelProvider as _e } from "../../Form/contexts/label.context.es.js";
+import { HelperTextProvider as $e } from "../../Form/contexts/helperText.context.es.js";
+import { useIsMounted as ke } from "../../../utils/hooks/useIsMounted.es.js";
+import { mergeRefs as Ue } from "../../../utils/functions.es.js";
+import { ErrorBoundary as ze } from "../ErrorBoundary/ErrorBoundary.es.js";
+import { DateFieldSegments as Ge } from "./DateField.Segments.es.js";
+import { useDevMinMaxWarning as Je, useDevInvalidValueWarning as Qe } from "./DateField.devWarnings.es.js";
+import { getDateParts as Xe, getSegmentOrder as Ze, toISODateString as er, DEFAULT_LOCALE as _ } from "./DateField.utils.es.js";
+import { useDateFieldFocus as rr } from "./useDateFieldFocus.es.js";
+import { useDateFieldForm as ar } from "./useDateFieldForm.es.js";
+import { useDateFieldKeyboard as tr } from "./useDateFieldKeyboard.es.js";
+import { useDateFieldSegments as sr } from "./useDateFieldSegments.es.js";
+import { useDateFieldValidity as nr } from "./useDateFieldValidity.es.js";
+import { useDateFieldValue as lr } from "./useDateFieldValue.es.js";
+import { useInvalidState as or } from "./useInvalidState.es.js";
+const ir = "MM/DD/YYYY", dr = () => {
+  process.env.NODE_ENV !== "production" && console.warn("DateField: segments failed to render; showing a static fallback.");
+}, Br = qe(
   function({
-    value: u,
-    defaultValue: c,
-    onChange: V,
-    minDate: f,
-    maxDate: p,
-    getClampAnnouncement: T,
-    locale: A,
-    label: g = null,
-    helperText: b = null,
-    error: v,
-    hideRequiredMarker: P = !1,
-    validationRules: q,
-    width: K,
-    theme: D,
-    fluid: H = !1,
-    disabled: W = !1,
-    readOnly: Y = !1,
-    required: _ = !1,
-    name: F,
-    id: $,
-    className: j,
-    style: k,
-    "aria-label": U,
-    "aria-describedby": z,
-    "aria-labelledby": G,
-    ...J
-  }, Q) {
+    value: v,
+    defaultValue: D,
+    onChange: $,
+    minDate: F,
+    maxDate: h,
+    getClampAnnouncement: k,
+    locale: U,
+    label: S = null,
+    helperText: x = null,
+    error: y,
+    hideRequiredMarker: z = !1,
+    validationRules: G,
+    width: J,
+    theme: I,
+    fluid: Q = !1,
+    disabled: X = !1,
+    readOnly: Z = !1,
+    required: ee = !1,
+    name: M,
+    id: re,
+    className: ae,
+    style: te,
+    "aria-label": se,
+    "aria-describedby": ne,
+    "aria-labelledby": le,
+    ...oe
+  }, R) {
     const {
       disabled: e,
-      readOnly: t,
-      required: h,
-      invalid: X,
-      errorMessageProvided: S,
-      defaultValue: Z,
-      errorId: x,
-      helperTextId: ee,
-      validationErrorsId: ae,
-      labelId: y,
-      ariaDescribedBy: re,
-      ariaLabelledBy: se,
-      showErrors: oe
-    } = ze({
-      name: F,
-      disabled: W,
-      readOnly: Y,
-      required: _,
-      defaultValue: c,
-      error: v,
-      hasHelperText: !!b,
-      hasLabel: !!g,
-      validationRules: q,
-      ariaDescribedBy: z,
-      ariaLabelledBy: G
+      readOnly: n,
+      required: E,
+      invalid: ie,
+      errorMessageProvided: N,
+      defaultValue: de,
+      errorId: O,
+      helperTextId: ce,
+      validationErrorsId: ue,
+      labelId: w,
+      ariaDescribedBy: me,
+      ariaLabelledBy: fe,
+      showErrors: pe
+    } = ar({
+      name: M,
+      disabled: X,
+      readOnly: Z,
+      required: ee,
+      defaultValue: D,
+      error: y,
+      hasHelperText: !!x,
+      hasLabel: !!S,
+      validationRules: G,
+      ariaDescribedBy: ne,
+      ariaLabelledBy: le
     });
-    Ye(f, p), _e(u, c);
-    const { refFn: ie, ref: I } = qe(Q), { segmentRefs: te, registerSegmentRef: le } = Je(), ne = A ?? L, M = Ke(), l = $e(M ? ne : L), N = Ee(() => je(l), [l]), {
-      segmentText: de,
-      segmentValues: w,
-      currentValue: R,
-      wasTouched: me,
-      appendDigit: C,
-      adjustSegment: ue,
-      clearSegment: ce,
-      beginSegmentEdit: fe,
-      commitOnBlur: pe,
-      clampAnnouncement: ge
-    } = Xe({
-      value: u,
-      defaultValue: Z,
-      onChange: V,
-      minDate: f,
-      maxDate: p,
-      getClampAnnouncement: T
+    Je(F, h), Qe(v, D);
+    const l = c(null), { segmentRefs: be, registerSegmentRef: ge } = sr(), ve = U ?? _, C = ke(), m = Xe(C ? ve : _), i = He(() => Ze(m), [m]), {
+      segmentText: De,
+      segmentValues: L,
+      currentValue: B,
+      wasTouched: Fe,
+      appendDigit: V,
+      adjustSegment: he,
+      clearSegment: Se,
+      clearAll: T,
+      beginSegmentEdit: xe,
+      commitOnBlur: ye,
+      clampAnnouncement: Ie
+    } = lr({
+      value: v,
+      defaultValue: de,
+      onChange: $,
+      minDate: F,
+      maxDate: h,
+      getClampAnnouncement: k
     }), {
-      focusedSegment: E,
-      fieldTabIndex: be,
-      handleSegmentFocus: O,
-      handleFieldFocus: ve,
-      handleFieldBlur: De,
-      handleFieldMouseDown: Fe,
-      focusNext: n,
-      focusPrevious: he
-    } = Ue({
+      focusedSegment: A,
+      fieldTabIndex: Me,
+      handleSegmentFocus: d,
+      handleFieldFocus: Re,
+      handleFieldBlur: Ee,
+      handleFieldMouseDown: Ne,
+      focusNext: f,
+      focusPrevious: Oe
+    } = rr({
       disabled: e,
-      fieldRef: I,
-      segmentRefs: te,
-      partsOrder: N,
-      onSegmentFocusChange: fe,
-      onFieldBlur: pe
-    }), Se = Ge({
+      fieldRef: l,
+      segmentRefs: be,
+      partsOrder: i,
+      onSegmentFocusChange: xe,
+      onFieldBlur: ye
+    }), we = tr({
       disabled: e,
-      readOnly: t,
-      fieldRef: I,
-      focusNext: n,
-      focusPrevious: he,
-      adjustSegment: ue,
-      clearSegment: ce
-    }), { isInvalid: xe } = Qe({
-      segments: w,
-      currentValue: R,
-      wasTouched: me,
-      isFocused: E !== null
-    }), ye = Oe(
-      (s, o) => {
-        const { advanced: we } = C(s, o);
-        we && n(s);
+      readOnly: n,
+      fieldRef: l,
+      focusNext: f,
+      focusPrevious: Oe,
+      adjustSegment: he,
+      clearSegment: Se
+    }), { isInvalid: Ce } = nr({
+      segments: L,
+      currentValue: B,
+      wasTouched: Fe,
+      isFocused: A !== null
+    }), Le = o(
+      (r, a) => {
+        const { advanced: b } = V(r, a);
+        b && f(r);
       },
-      [C, n]
-    ), d = Ze({
-      formInvalid: X,
-      valueInvalid: xe
-    }), Ie = M && Ve() ? "textbox" : "spinbutton", Me = (s) => {
+      [V, f]
+    ), p = or({
+      formInvalid: ie,
+      valueInvalid: Ce
+    }), Be = C && We() ? "textbox" : "spinbutton", P = o(
+      (r) => {
+        e || d(i[0], r);
+      },
+      [e, d, i]
+    ), q = o(() => {
+      var a;
+      if (e) return;
+      const r = document.activeElement;
+      r instanceof HTMLElement && r !== l.current && ((a = l.current) != null && a.contains(r)) && r.blur();
+    }, [e]), H = o(() => {
+      e || n || T();
+    }, [e, n, T]), K = c(P), j = c(q), W = c(H);
+    K.current = P, j.current = q, W.current = H;
+    const Ve = o(
+      (r) => {
+        const a = r ? Object.assign(r, {
+          focus: (b) => K.current(b),
+          blur: () => j.current(),
+          clear: () => W.current()
+        }) : null;
+        Ue(
+          l,
+          R
+        )(a);
+      },
+      [R]
+    ), Te = (r) => {
       if (e) return;
-      const o = s.target.closest("label");
-      !o || o.id !== y || (s.preventDefault(), O(N[0]));
-    }, Ne = Re(
-      r[Be],
-      D && Le(D),
-      H && r[`${i}fluid`],
-      d && r[`${i}error`],
-      e && r[`${i}disabled`],
-      t && r[`${i}read-only`],
-      j
+      const a = r.target.closest("label");
+      !a || a.id !== w || (r.preventDefault(), d(i[0]));
+    }, Ae = Pe(
+      s[Ke],
+      I && je(I),
+      Q && s[`${u}fluid`],
+      p && s[`${u}error`],
+      e && s[`${u}disabled`],
+      n && s[`${u}read-only`],
+      ae
     );
-    return /* @__PURE__ */ B(
+    return /* @__PURE__ */ Y(
       "div",
       {
-        className: Ne,
-        style: { ...k, maxWidth: K },
-        onMouseDownCapture: Me,
+        className: Ae,
+        style: { ...te, maxWidth: J },
+        onMouseDownCapture: Te,
         children: [
-          /* @__PURE__ */ a(
-            Ae,
+          /* @__PURE__ */ t(
+            _e,
             {
-              ctxId: y,
+              ctxId: w,
               ctxDisabled: e,
-              ctxRequired: h && !P,
-              children: g
+              ctxRequired: E && !z,
+              children: S
             }
           ),
-          /* @__PURE__ */ a(
+          /* @__PURE__ */ t(
             "div",
             {
-              ...J,
-              ref: ie,
-              id: $,
+              ...oe,
+              ref: Ve,
+              id: re,
               role: "group",
-              "aria-label": U,
-              "aria-labelledby": se,
+              "aria-label": se,
+              "aria-labelledby": fe,
               "aria-disabled": e || void 0,
-              "aria-required": h || void 0,
-              "aria-invalid": d || void 0,
-              "aria-describedby": re,
-              "aria-errormessage": S ? x : void 0,
-              tabIndex: be,
-              className: r[m.field],
-              onMouseDown: Fe,
-              onFocus: ve,
-              children: /* @__PURE__ */ a(
-                He,
+              "aria-required": E || void 0,
+              "aria-invalid": p || void 0,
+              "aria-describedby": me,
+              "aria-errormessage": N ? O : void 0,
+              tabIndex: Me,
+              className: s[g.field],
+              onMouseDown: Ne,
+              onFocus: Re,
+              children: /* @__PURE__ */ t(
+                ze,
                 {
-                  fallback: /* @__PURE__ */ a("span", { className: r[m.segments], children: ea }),
-                  onError: aa,
-                  children: /* @__PURE__ */ a(
-                    We,
+                  fallback: /* @__PURE__ */ t("span", { className: s[g.segments], children: ir }),
+                  onError: dr,
+                  children: /* @__PURE__ */ t(
+                    Ge,
                     {
-                      parts: l,
-                      segmentText: de,
-                      segmentValues: w,
-                      focusedSegment: E,
+                      parts: m,
+                      segmentText: De,
+                      segmentValues: L,
+                      focusedSegment: A,
                       disabled: e,
-                      readOnly: t,
-                      invalid: d,
-                      role: Ie,
-                      onSegmentFocus: O,
-                      onSegmentBlur: De,
-                      onSegmentInput: ye,
-                      onSegmentKeyDown: Se,
-                      registerSegmentRef: le
+                      readOnly: n,
+                      invalid: p,
+                      role: Be,
+                      onSegmentFocus: d,
+                      onSegmentBlur: Ee,
+                      onSegmentInput: Le,
+                      onSegmentKeyDown: we,
+                      registerSegmentRef: ge
                     }
                   )
                 }
               )
             }
           ),
-          /* @__PURE__ */ a(
+          /* @__PURE__ */ t(
             "span",
             {
               role: "status",
               "aria-live": "polite",
               "aria-atomic": "true",
-              className: r[m.srStatus],
-              children: ge
+              className: s[g.srStatus],
+              children: Ie
             }
           ),
-          /* @__PURE__ */ a(
+          /* @__PURE__ */ t(
             "input",
             {
               type: "hidden",
-              name: F,
-              value: ke(R),
+              name: M,
+              value: er(B),
               disabled: e
             }
           ),
-          /* @__PURE__ */ B(Pe, { ctxId: ee, ctxDisabled: e, children: [
-            b,
-            S && /* @__PURE__ */ a(Te, { id: x, appearance: "negative", children: v })
+          /* @__PURE__ */ Y($e, { ctxId: ce, ctxDisabled: e, children: [
+            x,
+            N && /* @__PURE__ */ t(Ye, { id: O, appearance: "negative", children: y })
           ] }),
-          oe(ae)
+          pe(ue)
         ]
       }
     );
   }
 );
 export {
-  Ma as DateField
+  Br as DateField
 };

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

@@ -31,6 +31,23 @@ export type DateFieldPart = {
     type: SegmentType | 'literal';
     value: string;
 };
+/**
+ * The DateField `ref` value (DF-16): the field's **root DOM element**
+ * (`role="group"`) augmented with a `clear()` method. Keeping the ref a real
+ * element (not a separate handle object) means it works anywhere a DOM node is
+ * expected — a `Popover` / `FloatingUI` trigger, measuring, `scrollIntoView` —
+ * while also carrying the field's imperative API.
+ *
+ * `focus()` and `blur()` are field-aware overrides of the native element methods:
+ * `focus()` moves to the first segment; `blur()` exits the field (running the
+ * same commit / normalize / clamp as a user blur). Both no-op when the field is
+ * disabled. `clear()` empties every segment and fires `onChange(null)` (only
+ * when a value was present), and no-ops when disabled or read-only.
+ * (`selectAll()` is reserved for DF-13.)
+ */
+export type DateFieldHandle = HTMLDivElement & {
+    clear(): void;
+};
 export interface DateFieldProps extends DateFieldInputAttributes {
     /**
      * Specify HelperText for DateField

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

@@ -1,2 +1,2 @@
 export { DateField } from './DateField';
-export type { DateFieldProps } from './DateField.types';
+export type { DateFieldHandle, DateFieldProps } from './DateField.types';

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

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

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

@@ -14,7 +14,7 @@ export interface UseDateFieldFocusArgs {
 export interface UseDateFieldFocusReturn {
     focusedSegment: FocusTarget;
     fieldTabIndex: number;
-    handleSegmentFocus: (segment: SegmentType) => void;
+    handleSegmentFocus: (segment: SegmentType, options?: FocusOptions) => void;
     handleFieldFocus: (event: FocusEvent<HTMLDivElement>) => void;
     handleFieldBlur: (event: FocusEvent<HTMLElement>) => void;
     handleFieldMouseDown: (event: MouseEvent<HTMLDivElement>) => void;

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

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

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

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

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

@@ -65,6 +65,13 @@ export interface UseDateFieldValueReturn {
     clearSegment: (type: SegmentType) => {
         wasEmpty: boolean;
     };
+    /**
+     * Clears all three segments at once and fires `onChange(null)` (via
+     * `emitIfChanged`, so only when a value was present). Backs the imperative
+     * `ref.current.clear()` (DF-16); unlike `clearSegment`, it isn't tied to a
+     * focused segment.
+     */
+    clearAll: () => void;
     beginSegmentEdit: (type: SegmentType) => void;
     commitOnBlur: () => void;
     /** Polite live-region message set when the blur clamp springs a value to a bound. */

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

@@ -1,103 +1,107 @@
-import { useRef as c, useState as w, useEffect as N, useCallback as a } from "react";
-import { segmentTextFromValue as b, segmentNumber as i, deriveValue as Q, isSameDateValue as v, deriveValueFromText as D, getDaysInMonth as U, adjustSegmentValue as Y, todayParts as Z, normalizeSegmentText as I, isDateInRange as $, clampDateToRange as C, dateKeyOrNull as k } from "./DateField.utils.es.js";
-import { tryAppendDigit as ee, SEGMENT_MAX_LENGTH as te } from "./DateField.validation.es.js";
-function ue({
-  value: s,
+import { useRef as u, useState as v, useEffect as D, useCallback as s } from "react";
+import { segmentTextFromValue as E, segmentNumber as m, deriveValue as U, isSameDateValue as I, deriveValueFromText as M, getDaysInMonth as Y, adjustSegmentValue as Z, todayParts as $, normalizeSegmentText as z, isDateInRange as C, clampDateToRange as ee, dateKeyOrNull as k } from "./DateField.utils.es.js";
+import { tryAppendDigit as te, SEGMENT_MAX_LENGTH as re } from "./DateField.validation.es.js";
+function se({
+  value: a,
   defaultValue: q,
-  onChange: T,
-  minDate: E,
-  maxDate: R,
-  getClampAnnouncement: V
+  onChange: R,
+  minDate: V,
+  maxDate: p,
+  getClampAnnouncement: A
 }) {
-  const M = c(s !== void 0), p = M.current, [m, A] = w(
-    () => b(p ? s ?? null : q ?? null)
-  ), [F, z] = w(!1), [H, K] = w(""), u = c(m), g = c(/* @__PURE__ */ new Set()), f = c(!1), o = c(null), B = {
-    day: i("day", m.day),
-    month: i("month", m.month),
-    year: i("year", m.year)
-  }, G = Q(B), j = c(G), O = c(p ? s ?? null : null), h = c(T), x = c(V);
-  N(() => {
-    h.current = T, x.current = V;
-  }, [T, V]), N(
+  const B = u(a !== void 0), F = B.current, [f, h] = v(
+    () => E(F ? a ?? null : q ?? null)
+  ), [j, w] = v(!1), [H, K] = v(""), c = u(f), g = u(/* @__PURE__ */ new Set()), x = u(!1), l = u(null), G = {
+    day: m("day", f.day),
+    month: m("month", f.month),
+    year: m("year", f.year)
+  }, O = U(G), N = u(O), b = u(F ? a ?? null : null), y = u(R), S = u(A);
+  D(() => {
+    y.current = R, S.current = A;
+  }, [R, A]), D(
     () => () => {
-      o.current != null && cancelAnimationFrame(o.current);
+      l.current != null && cancelAnimationFrame(l.current);
     },
     []
-  ), N(() => {
-    if (!M.current || f.current || v(s ?? null, O.current)) return;
-    O.current = s ?? null;
-    const e = b(s ?? null);
-    u.current = e, A(e), j.current = D(e);
-  }, [s]);
-  const y = a((e) => {
+  ), D(() => {
+    if (!B.current || x.current || I(a ?? null, b.current)) return;
+    b.current = a ?? null;
+    const e = E(a ?? null);
+    c.current = e, h(e), N.current = M(e);
+  }, [a]);
+  const o = s((e) => {
     var t;
-    const n = D(e);
-    v(n, j.current) || (j.current = n, (t = h.current) == null || t.call(h, n));
-  }, []), l = a(
+    const n = M(e);
+    I(n, N.current) || (N.current = n, (t = y.current) == null || t.call(y, n));
+  }, []), d = s(
     (e, n, { replace: t }) => {
-      const r = { ...u.current, [e]: n };
-      u.current = r, A(r), z(!0), y(r), t ? g.current.add(e) : g.current.delete(e);
+      const r = { ...c.current, [e]: n };
+      c.current = r, h(r), w(!0), o(r), t ? g.current.add(e) : g.current.delete(e);
     },
-    [y]
-  ), L = a(
+    [o]
+  ), L = s(
     (e, n) => {
-      const t = g.current.has(e) ? "" : u.current[e], r = ee(e, t, n);
-      return r.rejected ? { advanced: !1, rejected: !0 } : (l(e, r.newBuffer, { replace: r.shouldAdvance }), { advanced: r.shouldAdvance, rejected: !1 });
+      const t = g.current.has(e) ? "" : c.current[e], r = te(e, t, n);
+      return r.rejected ? { advanced: !1, rejected: !0 } : (d(e, r.newBuffer, { replace: r.shouldAdvance }), { advanced: r.shouldAdvance, rejected: !1 });
     },
-    [l]
-  ), P = a(
+    [d]
+  ), P = s(
     (e, n) => {
-      const t = u.current, r = i(e, t[e]), S = U(
-        i("year", t.year),
-        i("month", t.month)
-      ), d = Y(e, r, n, {
-        daysInMonth: S,
-        today: Z()
+      const t = c.current, r = m(e, t[e]), T = Y(
+        m("year", t.year),
+        m("month", t.month)
+      ), i = Z(e, r, n, {
+        daysInMonth: T,
+        today: $()
       });
-      return d == null ? !1 : (f.current = !0, l(e, String(d).padStart(te[e], "0"), {
+      return i == null ? !1 : (x.current = !0, d(e, String(i).padStart(re[e], "0"), {
         replace: !0
       }), !0);
     },
-    [l]
-  ), W = a(
-    (e) => u.current[e] === "" ? { wasEmpty: !0 } : (f.current = !0, l(e, "", { replace: !1 }), { wasEmpty: !1 }),
-    [l]
-  ), X = a((e) => {
-    f.current = !0, g.current.add(e);
-  }, []), J = a(() => {
-    var S;
-    f.current = !1;
-    const e = u.current, n = {
-      day: I("day", e.day),
-      month: I("month", e.month),
-      year: I("year", e.year)
-    }, t = D(n);
+    [d]
+  ), W = s(
+    (e) => c.current[e] === "" ? { wasEmpty: !0 } : (x.current = !0, d(e, "", { replace: !1 }), { wasEmpty: !1 }),
+    [d]
+  ), X = s(() => {
+    const e = E(null);
+    c.current = e, h(e), w(!0), g.current.clear(), b.current = null, o(e);
+  }, [o]), J = s((e) => {
+    x.current = !0, g.current.add(e);
+  }, []), Q = s(() => {
+    var T;
+    x.current = !1;
+    const e = c.current, n = {
+      day: z("day", e.day),
+      month: z("month", e.month),
+      year: z("year", e.year)
+    }, t = M(n);
     let r = n;
-    if (t != null && F && !$(t, E, R)) {
-      const d = C(t, E, R);
-      if (r = b(d), !v(d, t)) {
-        const _ = ((S = x.current) == null ? void 0 : S.call(x, d)) ?? "";
-        _ && (o.current != null && cancelAnimationFrame(o.current), o.current = requestAnimationFrame(() => {
-          o.current = null, K(_);
+    if (t != null && j && !C(t, V, p)) {
+      const i = ee(t, V, p);
+      if (r = E(i), !I(i, t)) {
+        const _ = ((T = S.current) == null ? void 0 : T.call(S, i)) ?? "";
+        _ && (l.current != null && cancelAnimationFrame(l.current), l.current = requestAnimationFrame(() => {
+          l.current = null, K(_);
         }));
       }
     }
-    u.current = r, A(r), z(!0), y(r);
-  }, [y, F, k(E), k(R)]);
+    c.current = r, h(r), w(!0), o(r);
+  }, [o, j, k(V), k(p)]);
   return {
-    segmentText: m,
-    segmentValues: B,
-    currentValue: G,
-    isControlled: p,
-    wasTouched: F,
+    segmentText: f,
+    segmentValues: G,
+    currentValue: O,
+    isControlled: F,
+    wasTouched: j,
     appendDigit: L,
     adjustSegment: P,
     clearSegment: W,
-    beginSegmentEdit: X,
-    commitOnBlur: J,
+    clearAll: X,
+    beginSegmentEdit: J,
+    commitOnBlur: Q,
     clampAnnouncement: H
   };
 }
 export {
-  ue as useDateFieldValue
+  se as useDateFieldValue
 };

package/package.json

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