@viasat/beam-react 2.48.2 → 2.49.1

package/lib/wip/DataTable/DataTable.Header.es.js

@@ -0,0 +1,14 @@
+import { jsx as o } from "react/jsx-runtime";
+import { forwardRef as m } from "react";
+import l from "clsx";
+import { s as c, a as i } from "../../../chunks/dataTable.Dkn26NSq.js";
+const p = m(
+  ({ className: a, children: s, ...e }, r) => {
+    const t = l(c[i.header], a);
+    return /* @__PURE__ */ o("caption", { ref: r, className: t, ...e, children: s });
+  }
+);
+p.displayName = "DataTable.Header";
+export {
+  p as DataTableHeader
+};

package/lib/wip/DataTable/DataTable.Row.cjs.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const c=require("react/jsx-runtime"),i=require("react"),n=require("clsx"),e=require("../../../chunks/dataTable.CrCD_4ro.js"),a=i.forwardRef(({className:t,children:s,...r},o)=>{const l=n(e.styles[e.staticDataTableClassNames.row],t);return c.jsx("tr",{ref:o,className:l,...r,children:s})});a.displayName="DataTable.Row";exports.DataTableRow=a;

package/lib/wip/DataTable/DataTable.Row.d.ts

@@ -0,0 +1,2 @@
+import { DataTableRowProps } from './DataTable.types';
+export declare const DataTableRow: import('react').ForwardRefExoticComponent<Omit<DataTableRowProps, "ref"> & import('react').RefAttributes<HTMLTableRowElement>>;

package/lib/wip/DataTable/DataTable.Row.es.js

@@ -0,0 +1,14 @@
+import { jsx as m } from "react/jsx-runtime";
+import { forwardRef as e } from "react";
+import l from "clsx";
+import { s as c, a as f } from "../../../chunks/dataTable.Dkn26NSq.js";
+const i = e(
+  ({ className: a, children: s, ...o }, r) => {
+    const t = l(c[f.row], a);
+    return /* @__PURE__ */ m("tr", { ref: r, className: t, ...o, children: s });
+  }
+);
+i.displayName = "DataTable.Row";
+export {
+  i as DataTableRow
+};

package/lib/wip/DataTable/DataTable.Toolbar.cjs.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const c=require("react/jsx-runtime"),b=require("react"),i=require("clsx"),a=require("../../../chunks/dataTable.CrCD_4ro.js"),e=b.forwardRef(({className:t,children:s,...r},o)=>{const l=i(a.styles[a.staticDataTableClassNames.toolbar],t);return c.jsx("div",{ref:o,className:l,...r,children:s})});e.displayName="DataTable.Toolbar";exports.DataTableToolbar=e;

package/lib/wip/DataTable/DataTable.Toolbar.d.ts

@@ -0,0 +1,2 @@
+import { DataTableToolbarProps } from './DataTable.types';
+export declare const DataTableToolbar: import('react').ForwardRefExoticComponent<Omit<DataTableToolbarProps, "ref"> & import('react').RefAttributes<HTMLDivElement>>;

package/lib/wip/DataTable/DataTable.Toolbar.es.js

@@ -0,0 +1,14 @@
+import { jsx as l } from "react/jsx-runtime";
+import { forwardRef as m } from "react";
+import e from "clsx";
+import { s as i, a as b } from "../../../chunks/dataTable.Dkn26NSq.js";
+const c = m(
+  ({ className: a, children: o, ...s }, r) => {
+    const t = e(i[b.toolbar], a);
+    return /* @__PURE__ */ l("div", { ref: r, className: t, ...s, children: o });
+  }
+);
+c.displayName = "DataTable.Toolbar";
+export {
+  c as DataTableToolbar
+};

package/lib/wip/DataTable/DataTable.cjs.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const i=require("react/jsx-runtime"),n=require("react"),b=require("clsx"),e=require("../../../chunks/dataTable.CrCD_4ro.js"),y=require("./DataTable.context.cjs.js"),c=require("./DataTable.Header.cjs.js"),d=require("./DataTable.Toolbar.cjs.js"),q=require("./DataTable.Head.cjs.js"),f=require("./DataTable.ColumnHeader.cjs.js"),C=require("./DataTable.Body.cjs.js"),H=require("./DataTable.Row.cjs.js"),x=require("./DataTable.Cell.cjs.js"),E=require("./DataTable.Footer.cjs.js");function a({density:o=e.DEFAULT_DATATABLE_DENSITY,data:h,columns:v,className:u,tableProps:t,children:m,...p}){let r=null,s=null;const T=[];n.Children.forEach(m,l=>{var _;const D=n.isValidElement(l)?(_=l.type)==null?void 0:_.displayName:void 0;D===d.DataTableToolbar.displayName?(process.env.NODE_ENV!=="production"&&r&&console.warn("DataTable: multiple `DataTable.Toolbar` children found — only the last one is rendered."),r=l):D===c.DataTableHeader.displayName?(process.env.NODE_ENV!=="production"&&s&&console.warn("DataTable: multiple `DataTable.Header` children found — only the last one is rendered."),s=l):T.push(l)});const N=b(e.styles[e.baseClassNamePrefix],e.styles[`${e.classModifierPrefix}${o}`]),w=n.useMemo(()=>({density:o}),[o]);return i.jsx(y.DataTableProvider,{value:w,children:i.jsxs("div",{className:b(e.styles[e.staticDataTableClassNames.container],u),...p,children:[r,i.jsxs("table",{...t,className:b(N,t==null?void 0:t.className),children:[s,T]})]})})}a.displayName="DataTable";a.Header=c.DataTableHeader;a.Toolbar=d.DataTableToolbar;a.Head=q.DataTableHead;a.ColumnHeader=f.DataTableColumnHeader;a.Body=C.DataTableBody;a.Row=H.DataTableRow;a.Cell=x.DataTableCell;a.Footer=E.DataTableFooter;exports.DataTable=a;

package/lib/wip/DataTable/DataTable.context.cjs.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const o=require("react/jsx-runtime"),t=require("react"),a=t.createContext(void 0),n=({children:e,value:r})=>o.jsx(a.Provider,{value:r,children:e}),s=()=>{const e=t.useContext(a);if(!e)throw new Error("useDataTable must be used within a DataTableProvider");return e};exports.DataTableProvider=n;exports.useDataTable=s;

package/lib/wip/DataTable/DataTable.context.d.ts

@@ -0,0 +1,10 @@
+import { ReactNode } from 'react';
+import { DataTableDensity } from '@viasat/beam-shared/components/dataTable';
+export interface DataTableContextProps {
+    density: DataTableDensity;
+}
+export declare const DataTableProvider: ({ children, value, }: {
+    children: ReactNode;
+    value: DataTableContextProps;
+}) => import("react/jsx-runtime").JSX.Element;
+export declare const useDataTable: () => DataTableContextProps;

package/lib/wip/DataTable/DataTable.context.es.js

@@ -0,0 +1,17 @@
+import { jsx as o } from "react/jsx-runtime";
+import { createContext as a, useContext as n } from "react";
+const e = a(
+  void 0
+), u = ({
+  children: t,
+  value: r
+}) => /* @__PURE__ */ o(e.Provider, { value: r, children: t }), b = () => {
+  const t = n(e);
+  if (!t)
+    throw new Error("useDataTable must be used within a DataTableProvider");
+  return t;
+};
+export {
+  u as DataTableProvider,
+  b as useDataTable
+};

package/lib/wip/DataTable/DataTable.d.ts

@@ -0,0 +1,13 @@
+import { DataTableProps } from './DataTable.types';
+export declare function DataTable<TData = unknown>({ density, 'data': _data, 'columns': _columns, 'className': _className, tableProps, children, ...props }: DataTableProps<TData>): import("react/jsx-runtime").JSX.Element;
+export declare namespace DataTable {
+    var displayName: string;
+    var Header: import("react").ForwardRefExoticComponent<Omit<import("./DataTable.types").DataTableHeaderProps, "ref"> & import("react").RefAttributes<HTMLTableCaptionElement>>;
+    var Toolbar: import("react").ForwardRefExoticComponent<Omit<import("./DataTable.types").DataTableToolbarProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+    var Head: import("react").ForwardRefExoticComponent<Omit<import("./DataTable.types").DataTableHeadProps, "ref"> & import("react").RefAttributes<HTMLTableSectionElement>>;
+    var ColumnHeader: import("react").ForwardRefExoticComponent<Omit<import("./DataTable.types").DataTableColumnHeaderProps, "ref"> & import("react").RefAttributes<HTMLTableCellElement>>;
+    var Body: import("react").ForwardRefExoticComponent<Omit<import("./DataTable.types").DataTableBodyProps, "ref"> & import("react").RefAttributes<HTMLTableSectionElement>>;
+    var Row: import("react").ForwardRefExoticComponent<Omit<import("./DataTable.types").DataTableRowProps, "ref"> & import("react").RefAttributes<HTMLTableRowElement>>;
+    var Cell: import("react").ForwardRefExoticComponent<Omit<import("./DataTable.types").DataTableCellProps, "ref"> & import("react").RefAttributes<HTMLTableCellElement>>;
+    var Footer: import("react").ForwardRefExoticComponent<Omit<import("./DataTable.types").DataTableFooterProps, "ref"> & import("react").RefAttributes<HTMLTableSectionElement>>;
+}

package/lib/wip/DataTable/DataTable.es.js

@@ -0,0 +1,59 @@
+import { jsx as y, jsxs as c } from "react/jsx-runtime";
+import { Children as C, isValidElement as E, useMemo as h } from "react";
+import s from "clsx";
+import { s as m, b as x, c as H, D as v, a as _ } from "../../../chunks/dataTable.Dkn26NSq.js";
+import { DataTableProvider as w } from "./DataTable.context.es.js";
+import { DataTableHeader as f } from "./DataTable.Header.es.js";
+import { DataTableToolbar as T } from "./DataTable.Toolbar.es.js";
+import { DataTableHead as A } from "./DataTable.Head.es.js";
+import { DataTableColumnHeader as V } from "./DataTable.ColumnHeader.es.js";
+import { DataTableBody as B } from "./DataTable.Body.es.js";
+import { DataTableRow as F } from "./DataTable.Row.es.js";
+import { DataTableCell as j } from "./DataTable.Cell.es.js";
+import { DataTableFooter as L } from "./DataTable.Footer.es.js";
+function a({
+  density: l = v,
+  // `data` / `columns` are reserved for the Phase 1 TanStack wiring; destructured
+  // here so they are not spread onto the DOM <table> as invalid attributes.
+  data: M,
+  columns: O,
+  className: p,
+  tableProps: o,
+  children: D,
+  ...b
+}) {
+  let r = null, t = null;
+  const i = [];
+  C.forEach(D, (e) => {
+    var d;
+    const n = E(e) ? (d = e.type) == null ? void 0 : d.displayName : void 0;
+    n === T.displayName ? (process.env.NODE_ENV !== "production" && r && console.warn(
+      "DataTable: multiple `DataTable.Toolbar` children found — only the last one is rendered."
+    ), r = e) : n === f.displayName ? (process.env.NODE_ENV !== "production" && t && console.warn(
+      "DataTable: multiple `DataTable.Header` children found — only the last one is rendered."
+    ), t = e) : i.push(e);
+  });
+  const u = s(
+    m[x],
+    m[`${H}${l}`]
+  ), N = h(() => ({ density: l }), [l]);
+  return /* @__PURE__ */ y(w, { value: N, children: /* @__PURE__ */ c("div", { className: s(m[_.container], p), ...b, children: [
+    r,
+    /* @__PURE__ */ c("table", { ...o, className: s(u, o == null ? void 0 : o.className), children: [
+      t,
+      i
+    ] })
+  ] }) });
+}
+a.displayName = "DataTable";
+a.Header = f;
+a.Toolbar = T;
+a.Head = A;
+a.ColumnHeader = V;
+a.Body = B;
+a.Row = F;
+a.Cell = j;
+a.Footer = L;
+export {
+  a as DataTable
+};

package/lib/wip/DataTable/DataTable.types.cjs.js

@@ -0,0 +1 @@
+"use strict";

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

@@ -0,0 +1,61 @@
+import { ComponentPropsWithoutRef, ComponentPropsWithRef, ReactNode } from 'react';
+import { ColumnDef } from '@tanstack/react-table';
+import { DataTableDensity } from '@viasat/beam-shared/components/dataTable';
+/**
+ * Column definition for a DataTable, aliased from TanStack Table's `ColumnDef`.
+ * @typeParam TData - Shape of a single row's data.
+ * @typeParam TValue - Type of the value held in the column's cell.
+ */
+export type DataTableColumnDef<TData, TValue = unknown> = ColumnDef<TData, TValue>;
+export interface DataTableProps<TData = unknown> extends ComponentPropsWithoutRef<'div'> {
+    /**
+     * Row data rendered by the table.
+     */
+    data?: TData[];
+    /**
+     * Column definitions describing how to render each column.
+     */
+    columns?: DataTableColumnDef<TData>[];
+    /**
+     * Density of the table's rows.
+     * @default 'md'
+     */
+    density?: DataTableDensity;
+    /**
+     * Props forwarded to the inner `<table>` element. The root props on `DataTable`
+     * target the wrapper `<div>`, which contains both the toolbar and the table.
+     */
+    tableProps?: ComponentPropsWithoutRef<'table'>;
+    /**
+     * DataTable sub-components (Header, Toolbar, Head, ColumnHeader, Body, Row, Cell, Footer).
+     */
+    children?: ReactNode;
+}
+export interface DataTableHeaderProps extends ComponentPropsWithRef<'caption'> {
+    children?: ReactNode;
+}
+export interface DataTableToolbarProps extends ComponentPropsWithRef<'div'> {
+    children?: ReactNode;
+}
+export interface DataTableHeadProps extends ComponentPropsWithRef<'thead'> {
+    children?: ReactNode;
+}
+export interface DataTableColumnHeaderProps extends ComponentPropsWithRef<'th'> {
+    /**
+     * Renders a `<th scope="col">`. Nest inside a `DataTable.Head` (`<thead>`) row so
+     * the column headers form a valid table header row group.
+     */
+    children?: ReactNode;
+}
+export interface DataTableBodyProps extends ComponentPropsWithRef<'tbody'> {
+    children?: ReactNode;
+}
+export interface DataTableRowProps extends ComponentPropsWithRef<'tr'> {
+    children?: ReactNode;
+}
+export interface DataTableCellProps extends ComponentPropsWithRef<'td'> {
+    children?: ReactNode;
+}
+export interface DataTableFooterProps extends ComponentPropsWithRef<'tfoot'> {
+    children?: ReactNode;
+}

package/lib/wip/DataTable/DataTable.types.es.js

@@ -0,0 +1 @@
+

package/lib/wip/DataTable/index.cjs.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./DataTable.cjs.js"),l=require("./DataTable.Header.cjs.js"),t=require("./DataTable.Toolbar.cjs.js"),b=require("./DataTable.Head.cjs.js"),T=require("./DataTable.ColumnHeader.cjs.js"),D=require("./DataTable.Body.cjs.js"),r=require("./DataTable.Row.cjs.js"),_=require("./DataTable.Cell.cjs.js"),o=require("./DataTable.Footer.cjs.js"),a=require("./DataTable.context.cjs.js");exports.DataTable=e.DataTable;exports.DataTableHeader=l.DataTableHeader;exports.DataTableToolbar=t.DataTableToolbar;exports.DataTableHead=b.DataTableHead;exports.DataTableColumnHeader=T.DataTableColumnHeader;exports.DataTableBody=D.DataTableBody;exports.DataTableRow=r.DataTableRow;exports.DataTableCell=_.DataTableCell;exports.DataTableFooter=o.DataTableFooter;exports.DataTableProvider=a.DataTableProvider;exports.useDataTable=a.useDataTable;

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

@@ -0,0 +1,11 @@
+export { DataTable } from './DataTable';
+export { DataTableHeader } from './DataTable.Header';
+export { DataTableToolbar } from './DataTable.Toolbar';
+export { DataTableHead } from './DataTable.Head';
+export { DataTableColumnHeader } from './DataTable.ColumnHeader';
+export { DataTableBody } from './DataTable.Body';
+export { DataTableRow } from './DataTable.Row';
+export { DataTableCell } from './DataTable.Cell';
+export { DataTableFooter } from './DataTable.Footer';
+export { DataTableProvider, useDataTable } from './DataTable.context';
+export type { DataTableProps, DataTableColumnDef, DataTableHeaderProps, DataTableToolbarProps, DataTableHeadProps, DataTableColumnHeaderProps, DataTableBodyProps, DataTableRowProps, DataTableCellProps, DataTableFooterProps, } from './DataTable.types';

package/lib/wip/DataTable/index.es.js

@@ -0,0 +1,23 @@
+import { DataTable as o } from "./DataTable.es.js";
+import { DataTableHeader as t } from "./DataTable.Header.es.js";
+import { DataTableToolbar as b } from "./DataTable.Toolbar.es.js";
+import { DataTableHead as m } from "./DataTable.Head.es.js";
+import { DataTableColumnHeader as f } from "./DataTable.ColumnHeader.es.js";
+import { DataTableBody as x } from "./DataTable.Body.es.js";
+import { DataTableRow as H } from "./DataTable.Row.es.js";
+import { DataTableCell as C } from "./DataTable.Cell.es.js";
+import { DataTableFooter as n } from "./DataTable.Footer.es.js";
+import { DataTableProvider as v, useDataTable as w } from "./DataTable.context.es.js";
+export {
+  o as DataTable,
+  x as DataTableBody,
+  C as DataTableCell,
+  f as DataTableColumnHeader,
+  n as DataTableFooter,
+  m as DataTableHead,
+  t as DataTableHeader,
+  v as DataTableProvider,
+  H as DataTableRow,
+  b as DataTableToolbar,
+  w as useDataTable
+};

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.CnDrSK1L.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.ZcYoijpc.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, valueMin, valueMax, displayValue, isPlaceholder, isActive, disabled, readOnly, onFocus, onBlur, onInput, onKeyDown, segmentRef, }: DateFieldSegmentProps) => import("react/jsx-runtime").JSX.Element;
+export declare const DateFieldSegment: ({ type, value, valueMin, valueMax, displayValue, isPlaceholder, valueText, invalid, role, 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.BVe6TzWY.js";
+import { D as p } from "../../../chunks/DateField.Segment.CtHATxv0.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 l=require("react/jsx-runtime"),a=require("../../../chunks/DateField.Segment.CnDrSK1L.js"),t=require("./DateField.utils.cjs.js"),i=[{type:"month",value:""},{type:"literal",value:"/"},{type:"day",value:""},{type:"literal",value:"/"},{type:"year",value:""}],h={month:"MM",day:"DD",year:"YYYY"},F=t.getSegmentOrder(i),A=({segmentText:r,segmentValues:n,focusedSegment:o,disabled:m,readOnly:y,onSegmentFocus:c,onSegmentBlur:d,onSegmentInput:u,onSegmentKeyDown:p,registerSegmentRef:D})=>{const _={day:{min:1,max:t.getDaysInMonth(n.year,n.month)},month:{min:1,max:t.MONTH_MAX},year:{min:t.YEAR_MIN,max:t.YEAR_MAX}};return l.jsx("span",{className:a.styles[a.staticDateFieldClassNames.segments],children:i.map((s,g)=>{if(s.type==="literal")return l.jsx("span",{"aria-hidden":"true",className:a.styles[a.staticDateFieldClassNames.separator],children:s.value},`literal-${g}`);const e=s.type,S=h[e],{displayValue:M,isPlaceholder:R}=t.getSegmentDisplay(e,r[e],S),{min:v,max:x}=_[e];return l.jsx(a.DateFieldSegment,{type:e,value:n[e],valueMin:v,valueMax:x,displayValue:M,isPlaceholder:R,isActive:o===e,disabled:m,readOnly:y,onFocus:()=>c(e),onBlur:d,onInput:u,onKeyDown:p,segmentRef:D(e)},e)})})};exports.DateFieldSegments=A;exports.PARTS_ORDER=F;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const s=require("react/jsx-runtime"),n=require("../../../chunks/DateField.Segment.ZcYoijpc.js"),t=require("./DateField.utils.cjs.js"),o=[{type:"month",value:""},{type:"literal",value:"/"},{type:"day",value:""},{type:"literal",value:"/"},{type:"year",value:""}],N={month:"MM",day:"DD",year:"YYYY"},E=t.getSegmentOrder(o),T=({segmentText:r,segmentValues:a,focusedSegment:m,disabled:c,readOnly:y,invalid:d,role:u,onSegmentFocus:p,onSegmentBlur:D,onSegmentInput:_,onSegmentKeyDown:h,registerSegmentRef:M})=>{const S={day:{min:1,max:t.getDaysInMonth(a.year,a.month)},month:{min:1,max:t.MONTH_MAX},year:{min:t.YEAR_MIN,max:t.YEAR_MAX}};return s.jsx("span",{className:n.styles[n.staticDateFieldClassNames.segments],children:o.map((l,g)=>{if(l.type==="literal")return s.jsx("span",{"aria-hidden":"true",className:n.styles[n.staticDateFieldClassNames.separator],children:l.value},`literal-${g}`);const e=l.type,v=N[e],{displayValue:i,isPlaceholder:x}=t.getSegmentDisplay(e,r[e],v),{min:R,max:F}=S[e],A=e==="month"&&a.month!=null?t.getMonthName(a.month):i;return s.jsx(n.DateFieldSegment,{type:e,value:a[e],valueMin:R,valueMax:F,displayValue:i,isPlaceholder:x,valueText:A,invalid:d,role:u,isActive:m===e,disabled:c,readOnly:y,onFocus:()=>p(e),onBlur:D,onInput:_,onKeyDown:h,segmentRef:M(e)},e)})})};exports.DateFieldSegments=T;exports.PARTS_ORDER=E;

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

@@ -1,5 +1,5 @@
 import { FocusEvent, KeyboardEvent } from 'react';
-import { FocusTarget, SegmentText, SegmentType, SegmentValues } from './DateField.types';
+import { FocusTarget, SegmentRole, SegmentText, SegmentType, SegmentValues } from './DateField.types';
 export declare const PARTS_ORDER: ReadonlyArray<SegmentType>;
 export interface DateFieldSegmentsProps {
     /** Per-segment raw strings — the single source of truth for display. */
@@ -9,6 +9,10 @@ export interface DateFieldSegmentsProps {
     focusedSegment: FocusTarget;
     disabled: boolean;
     readOnly: boolean;
+    /** Drives `aria-invalid` on each segment when the field is in an error/invalid state. */
+    invalid: boolean;
+    /** Role for the segments: 'spinbutton' (default) or 'textbox' (iOS VoiceOver fallback post-mount). */
+    role: SegmentRole;
     /** Forwarded to each segment's focus handler. */
     onSegmentFocus: (segment: SegmentType) => void;
     /** Forwarded to each segment's blur handler. */
@@ -19,4 +23,4 @@ export interface DateFieldSegmentsProps {
     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, onSegmentKeyDown, registerSegmentRef, }: DateFieldSegmentsProps) => import("react/jsx-runtime").JSX.Element;
+export declare const DateFieldSegments: ({ segmentText, segmentValues, focusedSegment, disabled, readOnly, invalid, role, onSegmentFocus, onSegmentBlur, onSegmentInput, onSegmentKeyDown, registerSegmentRef, }: DateFieldSegmentsProps) => import("react/jsx-runtime").JSX.Element;

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

@@ -1,65 +1,70 @@
 import { jsx as n } from "react/jsx-runtime";
-import { s, a as l, D as S } from "../../../chunks/DateField.Segment.BVe6TzWY.js";
-import { getSegmentOrder as E, getDaysInMonth as N, getSegmentDisplay as Y, YEAR_MAX as _, YEAR_MIN as f, MONTH_MAX as F } from "./DateField.utils.es.js";
-const o = [
+import { s, a as l, D as Y } from "../../../chunks/DateField.Segment.CtHATxv0.js";
+import { getSegmentOrder as _, getDaysInMonth as f, getSegmentDisplay as T, YEAR_MAX as F, YEAR_MIN as O, MONTH_MAX as P, getMonthName as I } from "./DateField.utils.es.js";
+const m = [
   { type: "month", value: "" },
   { type: "literal", value: "/" },
   { type: "day", value: "" },
   { type: "literal", value: "/" },
   { type: "year", value: "" }
-], O = {
+], B = {
   month: "MM",
   day: "DD",
   year: "YYYY"
-}, C = E(o), H = ({
+}, j = _(m), w = ({
   segmentText: r,
-  segmentValues: a,
-  focusedSegment: m,
-  disabled: i,
-  readOnly: y,
-  onSegmentFocus: c,
-  onSegmentBlur: p,
-  onSegmentInput: d,
-  onSegmentKeyDown: u,
+  segmentValues: t,
+  focusedSegment: i,
+  disabled: y,
+  readOnly: c,
+  invalid: p,
+  role: d,
+  onSegmentFocus: u,
+  onSegmentBlur: h,
+  onSegmentInput: M,
+  onSegmentKeyDown: v,
   registerSegmentRef: D
 }) => {
-  const M = {
-    day: { min: 1, max: N(a.year, a.month) },
-    month: { min: 1, max: F },
-    year: { min: f, max: _ }
+  const x = {
+    day: { min: 1, max: f(t.year, t.month) },
+    month: { min: 1, max: P },
+    year: { min: O, max: F }
   };
-  return /* @__PURE__ */ n("span", { className: s[l.segments], children: o.map((t, h) => {
-    if (t.type === "literal")
+  return /* @__PURE__ */ n("span", { className: s[l.segments], children: m.map((a, g) => {
+    if (a.type === "literal")
       return /* @__PURE__ */ n(
         "span",
         {
           "aria-hidden": "true",
           className: s[l.separator],
-          children: t.value
+          children: a.value
         },
-        `literal-${h}`
+        `literal-${g}`
       );
-    const e = t.type, v = O[e], { displayValue: g, isPlaceholder: x } = Y(
+    const e = a.type, A = B[e], { displayValue: o, isPlaceholder: R } = T(
       e,
       r[e],
-      v
-    ), { min: A, max: R } = M[e];
+      A
+    ), { min: S, max: N } = x[e], E = e === "month" && t.month != null ? I(t.month) : o;
     return /* @__PURE__ */ n(
-      S,
+      Y,
       {
         type: e,
-        value: a[e],
-        valueMin: A,
-        valueMax: R,
-        displayValue: g,
-        isPlaceholder: x,
-        isActive: m === e,
-        disabled: i,
-        readOnly: y,
-        onFocus: () => c(e),
-        onBlur: p,
-        onInput: d,
-        onKeyDown: u,
+        value: t[e],
+        valueMin: S,
+        valueMax: N,
+        displayValue: o,
+        isPlaceholder: R,
+        valueText: E,
+        invalid: p,
+        role: d,
+        isActive: i === e,
+        disabled: y,
+        readOnly: c,
+        onFocus: () => u(e),
+        onBlur: h,
+        onInput: M,
+        onKeyDown: v,
         segmentRef: D(e)
       },
       e
@@ -67,6 +72,6 @@ const o = [
   }) });
 };
 export {
-  H as DateFieldSegments,
-  C as PARTS_ORDER
+  w as DateFieldSegments,
+  j as PARTS_ORDER
 };

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

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const i=require("react/jsx-runtime"),ve=require("clsx"),w=require("react"),e=require("../../../chunks/DateField.Segment.CnDrSK1L.js"),ye=require("../../../chunks/constants.CgMu0_1M.js"),Se=require("../../../chunks/form.context.D5XrYvpI.js"),he=require("../../Form/contexts/label.context.cjs.js"),qe=require("../../Form/contexts/helperText.context.cjs.js"),we=require("../../Form/hooks/useUniversalRef.hook.cjs.js"),o=require("./DateField.Segments.cjs.js"),t=require("./DateField.utils.cjs.js"),Ie=require("./useDateFieldFocus.cjs.js"),Re=require("./useDateFieldForm.cjs.js"),Ne=require("./useDateFieldKeyboard.cjs.js"),Me=require("./useDateFieldSegments.cjs.js"),Oe=require("./useDateFieldValidity.cjs.js"),Pe=require("./useDateFieldValue.cjs.js"),Te=require("./useInvalidState.cjs.js"),Ve=w.forwardRef(function({value:I,defaultValue:R,onChange:N,minDate:r,maxDate:d,getClampAnnouncement:M,label:u=null,helperText:c=null,error:F,hideRequiredMarker:O=!1,validationRules:P,width:T,theme:b,fluid:V=!1,disabled:j=!1,readOnly:C=!1,required:B=!1,name:f,id:E,className:K,style:H,"aria-label":L,"aria-describedby":$,"aria-labelledby":A,...k},U){const{disabled:a,readOnly:n,required:_,invalid:W,errorMessageProvided:D,defaultValue:z,errorId:m,helperTextId:G,validationErrorsId:J,labelId:p,ariaDescribedBy:Q,ariaLabelledBy:X,showErrors:Y}=Re.useDateFieldForm({name:f,disabled:j,readOnly:C,required:B,defaultValue:R,error:F,hasHelperText:!!c,hasLabel:!!u,validationRules:P,ariaDescribedBy:$,ariaLabelledBy:A});w.useEffect(()=>{process.env.NODE_ENV!=="production"&&t.isMinMaxMisconfigured(r,d)&&console.warn("DateField: `minDate` is after `maxDate` — no date satisfies both, so the blur clamp is disabled and values are left as typed.")},[t.dateKeyOrNull(r),t.dateKeyOrNull(d)]);const{refFn:Z,ref:g}=we.useUniversalRef(U),{segmentRefs:ee,registerSegmentRef:ae}=Me.useDateFieldSegments(),{segmentText:ie,segmentValues:x,currentValue:v,wasTouched:le,appendDigit:se,adjustSegment:te,clearSegment:re,beginSegmentEdit:de,commitOnBlur:ne,clampAnnouncement:oe}=Pe.useDateFieldValue({value:I,defaultValue:z,onChange:N,minDate:r,maxDate:d,getClampAnnouncement:M}),{focusedSegment:y,fieldTabIndex:ue,handleSegmentFocus:S,handleFieldFocus:ce,handleFieldBlur:Fe,handleFieldMouseDown:be,focusNext:h,focusPrevious:fe}=Ie.useDateFieldFocus({disabled:a,fieldRef:g,segmentRefs:ee,partsOrder:o.PARTS_ORDER,onSegmentFocusChange:de,onFieldBlur:ne}),_e=Ne.useDateFieldKeyboard({disabled:a,readOnly:n,fieldRef:g,focusNext:h,focusPrevious:fe,adjustSegment:te,clearSegment:re}),{isInvalid:De}=Oe.useDateFieldValidity({segments:x,currentValue:v,wasTouched:le,isFocused:y!==null}),me=(l,s)=>{const{advanced:xe}=se(l,s);xe&&h(l)},q=Te.useInvalidState({formInvalid:W,valueInvalid:De}),pe=l=>{if(a)return;const s=l.target.closest("label");!s||s.id!==p||(l.preventDefault(),S(o.PARTS_ORDER[0]))},ge=ve(e.styles[e.baseClassNamePrefix],b&&ye.themeClassName(b),V&&e.styles[`${e.classModifierPrefix}fluid`],q&&e.styles[`${e.classModifierPrefix}error`],a&&e.styles[`${e.classModifierPrefix}disabled`],n&&e.styles[`${e.classModifierPrefix}read-only`],K);return i.jsxs("div",{className:ge,style:{...H,maxWidth:T},onMouseDownCapture:pe,children:[i.jsx(he.LabelProvider,{ctxId:p,ctxDisabled:a,ctxRequired:_&&!O,children:u}),i.jsx("div",{...k,ref:Z,id:E,role:"group","aria-label":L,"aria-labelledby":X,"aria-disabled":a||void 0,"aria-required":_||void 0,"aria-invalid":q||void 0,"aria-describedby":Q,"aria-errormessage":D?m:void 0,tabIndex:ue,className:e.styles[e.staticDateFieldClassNames.field],onMouseDown:be,onFocus:ce,children:i.jsx(o.DateFieldSegments,{segmentText:ie,segmentValues:x,focusedSegment:y,disabled:a,readOnly:n,onSegmentFocus:S,onSegmentBlur:Fe,onSegmentInput:me,onSegmentKeyDown:_e,registerSegmentRef:ae})}),i.jsx("span",{role:"status","aria-live":"polite","aria-atomic":"true",className:e.styles[e.staticDateFieldClassNames.srStatus],children:oe}),i.jsx("input",{type:"hidden",name:f,value:t.toISODateString(v),disabled:a}),i.jsxs(qe.HelperTextProvider,{ctxId:G,ctxDisabled:a,children:[c,D&&i.jsx(Se.HelperText,{id:m,appearance:"negative",children:F})]}),Y(J)]})});exports.DateField=Ve;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const i=require("react/jsx-runtime"),ye=require("clsx"),w=require("react"),e=require("../../../chunks/DateField.Segment.ZcYoijpc.js"),Se=require("../../../chunks/constants.CgMu0_1M.js"),he=require("../../../chunks/helpers.B4xpu88P.js"),qe=require("../../../chunks/form.context.BfZzYt36.js"),we=require("../../Form/contexts/label.context.cjs.js"),Ie=require("../../Form/contexts/helperText.context.cjs.js"),Me=require("../../Form/hooks/useUniversalRef.hook.cjs.js"),Re=require("../../../utils/hooks/useIsMounted.cjs.js"),u=require("./DateField.Segments.cjs.js"),t=require("./DateField.utils.cjs.js"),Ne=require("./useDateFieldFocus.cjs.js"),Oe=require("./useDateFieldForm.cjs.js"),Pe=require("./useDateFieldKeyboard.cjs.js"),Te=require("./useDateFieldSegments.cjs.js"),Ve=require("./useDateFieldValidity.cjs.js"),je=require("./useDateFieldValue.cjs.js"),Ce=require("./useInvalidState.cjs.js"),Be=w.forwardRef(function({value:I,defaultValue:M,onChange:R,minDate:r,maxDate:d,getClampAnnouncement:N,label:c=null,helperText:b=null,error:F,hideRequiredMarker:O=!1,validationRules:P,width:T,theme:_,fluid:V=!1,disabled:j=!1,readOnly:C=!1,required:B=!1,name:f,id:E,className:K,style:H,"aria-label":L,"aria-describedby":$,"aria-labelledby":k,...A},U){const{disabled:s,readOnly:n,required:D,invalid:W,errorMessageProvided:m,defaultValue:z,errorId:p,helperTextId:G,validationErrorsId:J,labelId:x,ariaDescribedBy:Q,ariaLabelledBy:X,showErrors:Y}=Oe.useDateFieldForm({name:f,disabled:j,readOnly:C,required:B,defaultValue:M,error:F,hasHelperText:!!b,hasLabel:!!c,validationRules:P,ariaDescribedBy:$,ariaLabelledBy:k});w.useEffect(()=>{process.env.NODE_ENV!=="production"&&t.isMinMaxMisconfigured(r,d)&&console.warn("DateField: `minDate` is after `maxDate` — no date satisfies both, so the blur clamp is disabled and values are left as typed.")},[t.dateKeyOrNull(r),t.dateKeyOrNull(d)]);const{refFn:Z,ref:g}=Me.useUniversalRef(U),{segmentRefs:ee,registerSegmentRef:se}=Te.useDateFieldSegments(),{segmentText:ie,segmentValues:v,currentValue:y,wasTouched:ae,appendDigit:le,adjustSegment:te,clearSegment:re,beginSegmentEdit:de,commitOnBlur:ne,clampAnnouncement:oe}=je.useDateFieldValue({value:I,defaultValue:z,onChange:R,minDate:r,maxDate:d,getClampAnnouncement:N}),{focusedSegment:S,fieldTabIndex:ue,handleSegmentFocus:h,handleFieldFocus:ce,handleFieldBlur:be,handleFieldMouseDown:Fe,focusNext:q,focusPrevious:_e}=Ne.useDateFieldFocus({disabled:s,fieldRef:g,segmentRefs:ee,partsOrder:u.PARTS_ORDER,onSegmentFocusChange:de,onFieldBlur:ne}),fe=Pe.useDateFieldKeyboard({disabled:s,readOnly:n,fieldRef:g,focusNext:q,focusPrevious:_e,adjustSegment:te,clearSegment:re}),{isInvalid:De}=Ve.useDateFieldValidity({segments:v,currentValue:y,wasTouched:ae,isFocused:S!==null}),me=(a,l)=>{const{advanced:ve}=le(a,l);ve&&q(a)},o=Ce.useInvalidState({formInvalid:W,valueInvalid:De}),pe=Re.useIsMounted()&&he.isIOS()?"textbox":"spinbutton",xe=a=>{if(s)return;const l=a.target.closest("label");!l||l.id!==x||(a.preventDefault(),h(u.PARTS_ORDER[0]))},ge=ye(e.styles[e.baseClassNamePrefix],_&&Se.themeClassName(_),V&&e.styles[`${e.classModifierPrefix}fluid`],o&&e.styles[`${e.classModifierPrefix}error`],s&&e.styles[`${e.classModifierPrefix}disabled`],n&&e.styles[`${e.classModifierPrefix}read-only`],K);return i.jsxs("div",{className:ge,style:{...H,maxWidth:T},onMouseDownCapture:xe,children:[i.jsx(we.LabelProvider,{ctxId:x,ctxDisabled:s,ctxRequired:D&&!O,children:c}),i.jsx("div",{...A,ref:Z,id:E,role:"group","aria-label":L,"aria-labelledby":X,"aria-disabled":s||void 0,"aria-required":D||void 0,"aria-invalid":o||void 0,"aria-describedby":Q,"aria-errormessage":m?p:void 0,tabIndex:ue,className:e.styles[e.staticDateFieldClassNames.field],onMouseDown:Fe,onFocus:ce,children:i.jsx(u.DateFieldSegments,{segmentText:ie,segmentValues:v,focusedSegment:S,disabled:s,readOnly:n,invalid:o,role:pe,onSegmentFocus:h,onSegmentBlur:be,onSegmentInput:me,onSegmentKeyDown:fe,registerSegmentRef:se})}),i.jsx("span",{role:"status","aria-live":"polite","aria-atomic":"true",className:e.styles[e.staticDateFieldClassNames.srStatus],children:oe}),i.jsx("input",{type:"hidden",name:f,value:t.toISODateString(y),disabled:s}),i.jsxs(Ie.HelperTextProvider,{ctxId:G,ctxDisabled:s,children:[b,m&&i.jsx(qe.HelperText,{id:p,appearance:"negative",children:F})]}),Y(J)]})});exports.DateField=Be;