@viasat/beam-react 2.57.0 → 2.58.1

package/CHANGELOG.md

@@ -1,3 +1,23 @@
+## 2.58.1 (2026-08-20)
+
+### 🩹 Fixes
+
+- **SegmentedControl:** Fix initialSelection causing borderRadius to not render correctly ([#1411](https://git.viasat.com/vega/Beam/pull/1411))
+
+### ❤️ Thank You
+
+- Amaral, Thomas
+
+## 2.58.0 (2026-08-20)
+
+### 🚀 Features
+
+- **DataTable:** column definitions (ColumnMeta + createBeamColumn) ([#1408](https://git.viasat.com/vega/Beam/pull/1408))
+
+### ❤️ Thank You
+
+- Amarandei, Robert-Andrei
+
 ## 2.57.0 (2026-08-20)
 
 ### 🚀 Features

package/lib/SegmentedControl/SegmentedControl.List.cjs.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const p=require("react/jsx-runtime"),C=require("react"),g=require("clsx"),f=require("../../chunks/classNames.BFQUGnCN.js");require("../../chunks/constants.CgMu0_1M.js");const n=require("../../chunks/segmentedControl.module.Do2xEatq.js"),S=require("./SegmentedControlContext.cjs.js"),b=({children:e,className:a,...u})=>{const{selectedValue:i,setSelectedValue:t,setControlItems:o,fluid:c}=S.useSegmentedControl();C.useEffect(()=>{if(!i){if(!Array.isArray(e)){t(e.props.value),o([e.props.value]);return}const l=e.filter(s=>!s.props.disabled);l.length>0&&t(l[0].props.value),o(e.map(s=>s.props.value))}},[]);const{subElementClassPrefix:m}=f.getBEMClassNames("segmented-control"),r=`${m}list`,d=g(n.styles[r],c&&n.styles[`${r}--fluid`],a);return p.jsx("div",{className:d,...u,children:e})};exports.SegmentedControlList=b;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const g=require("react/jsx-runtime"),f=require("react"),p=require("clsx"),S=require("../../chunks/classNames.BFQUGnCN.js");require("../../chunks/constants.CgMu0_1M.js");const r=require("../../chunks/segmentedControl.module.Do2xEatq.js"),b=require("./SegmentedControlContext.cjs.js"),q=({children:e,className:l,...n})=>{const{selectedValue:a,setSelectedValue:c,setControlItems:i,fluid:u}=b.useSegmentedControl();f.useEffect(()=>{const o=Array.isArray(e)?e:[e];if(i(o.map(s=>s.props.value)),!a){const s=o.filter(C=>!C.props.disabled);s.length>0&&c(s[0].props.value)}},[]);const{subElementClassPrefix:d}=S.getBEMClassNames("segmented-control"),t=`${d}list`,m=p(r.styles[t],u&&r.styles[`${t}--fluid`],l);return g.jsx("div",{className:m,...n,children:e})};exports.SegmentedControlList=q;

package/lib/SegmentedControl/SegmentedControl.List.es.js

@@ -1,33 +1,30 @@
-import { jsx as c } from "react/jsx-runtime";
-import { useEffect as d } from "react";
-import C from "clsx";
-import { g } from "../../chunks/classNames.CA_0DokS.js";
+import { jsx as u } from "react/jsx-runtime";
+import { useEffect as C } from "react";
+import g from "clsx";
+import { g as b } from "../../chunks/classNames.CA_0DokS.js";
 import "../../chunks/constants.Cruz2A1w.js";
-import { s as a } from "../../chunks/segmentedControl.module.xmzdEbo3.js";
-import { useSegmentedControl as v } from "./SegmentedControlContext.es.js";
-const V = ({
+import { s as r } from "../../chunks/segmentedControl.module.xmzdEbo3.js";
+import { useSegmentedControl as x } from "./SegmentedControlContext.es.js";
+const $ = ({
   children: s,
-  className: m,
-  ...p
+  className: l,
+  ...m
 }) => {
-  const { selectedValue: f, setSelectedValue: t, setControlItems: o, fluid: i } = v();
-  d(() => {
-    if (!f) {
-      if (!Array.isArray(s)) {
-        t(s.props.value), o([s.props.value]);
-        return;
-      }
-      const l = s.filter((e) => !e.props.disabled);
-      l.length > 0 && t(l[0].props.value), o(s.map((e) => e.props.value));
+  const { selectedValue: a, setSelectedValue: i, setControlItems: n, fluid: p } = x();
+  C(() => {
+    const o = Array.isArray(s) ? s : [s];
+    if (n(o.map((e) => e.props.value)), !a) {
+      const e = o.filter((d) => !d.props.disabled);
+      e.length > 0 && i(e[0].props.value);
     }
   }, []);
-  const { subElementClassPrefix: n } = g("segmented-control"), r = `${n}list`, u = C(
-    a[r],
-    i && a[`${r}--fluid`],
-    m
+  const { subElementClassPrefix: f } = b("segmented-control"), t = `${f}list`, c = g(
+    r[t],
+    p && r[`${t}--fluid`],
+    l
   );
-  return /* @__PURE__ */ c("div", { className: u, ...p, children: s });
+  return /* @__PURE__ */ u("div", { className: c, ...m, children: s });
 };
 export {
-  V as SegmentedControlList
+  $ as SegmentedControlList
 };

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

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});function a(n){const{align:e,meta:t,...r}=n;return e===void 0?{...r,meta:t}:{...r,meta:{...t,align:e}}}exports.createBeamColumn=a;

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

@@ -0,0 +1,26 @@
+import { ColumnMeta, RowData } from '@tanstack/react-table';
+import { DataTableColumnDef } from './DataTable.types';
+declare module '@tanstack/react-table' {
+    interface ColumnMeta<TData extends RowData, TValue> {
+        /** Horizontal alignment for the column's header and cell content. */
+        align?: 'left' | 'right';
+    }
+}
+/**
+ * Arguments for {@link createBeamColumn}: a standard {@link DataTableColumnDef}
+ * plus a top-level `align` convenience field.
+ */
+export type CreateBeamColumnArgs<TData extends RowData, TValue = unknown> = DataTableColumnDef<TData, TValue> & {
+    /** Horizontal alignment; folded into `meta.align`. */
+    align?: ColumnMeta<TData, TValue>['align'];
+};
+/**
+ * Folds `align` into `meta.align` instead of introducing a new stored column
+ * type. Pure authoring convenience with no runtime meaning of its own — a
+ * hand-written `meta: { align: 'right' }` renders identically. Merges into an
+ * existing `meta` rather than clobbering it.
+ *
+ * @param column - {@link CreateBeamColumnArgs}.
+ * @returns A plain {@link DataTableColumnDef} with no top-level `align`.
+ */
+export declare function createBeamColumn<TData extends RowData, TValue = unknown>(column: CreateBeamColumnArgs<TData, TValue>): DataTableColumnDef<TData, TValue>;

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

@@ -0,0 +1,10 @@
+function a(r) {
+  const { align: e, meta: t, ...n } = r;
+  return e === void 0 ? { ...n, meta: t } : {
+    ...n,
+    meta: { ...t, align: e }
+  };
+}
+export {
+  a as createBeamColumn
+};

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

@@ -1 +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"),i=require("./useBeamTable.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;exports.useBeamTable=i.useBeamTable;
+"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"),r=require("./DataTable.Body.cjs.js"),_=require("./DataTable.Row.cjs.js"),D=require("./DataTable.Cell.cjs.js"),o=require("./DataTable.Footer.cjs.js"),a=require("./DataTable.context.cjs.js"),i=require("./useBeamTable.cjs.js"),u=require("./DataTable.columns.cjs.js");exports.DataTable=e.DataTable;exports.DataTableHeader=l.DataTableHeader;exports.DataTableToolbar=t.DataTableToolbar;exports.DataTableHead=b.DataTableHead;exports.DataTableColumnHeader=T.DataTableColumnHeader;exports.DataTableBody=r.DataTableBody;exports.DataTableRow=_.DataTableRow;exports.DataTableCell=D.DataTableCell;exports.DataTableFooter=o.DataTableFooter;exports.DataTableProvider=a.DataTableProvider;exports.useDataTable=a.useDataTable;exports.useBeamTable=i.useBeamTable;exports.createBeamColumn=u.createBeamColumn;

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

@@ -9,5 +9,7 @@ export { DataTableCell } from './DataTable.Cell';
 export { DataTableFooter } from './DataTable.Footer';
 export { DataTableProvider, useDataTable } from './DataTable.context';
 export { useBeamTable } from './useBeamTable';
+export { createBeamColumn } from './DataTable.columns';
 export type { DataTableProps, DataTableColumnDef, DataTableHeaderProps, DataTableToolbarProps, DataTableHeadProps, DataTableColumnHeaderProps, DataTableBodyProps, DataTableRowProps, DataTableCellProps, DataTableFooterProps, } from './DataTable.types';
 export type { UseBeamTableArgs } from './useBeamTable';
+export type { CreateBeamColumnArgs } from './DataTable.columns';

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

@@ -1,25 +1,27 @@
 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 { DataTableToolbar as m } from "./DataTable.Toolbar.es.js";
 import { DataTableHead as T } from "./DataTable.Head.es.js";
 import { DataTableColumnHeader as p } from "./DataTable.ColumnHeader.es.js";
 import { DataTableBody as D } from "./DataTable.Body.es.js";
 import { DataTableRow as u } from "./DataTable.Row.es.js";
-import { DataTableCell as s } from "./DataTable.Cell.es.js";
-import { DataTableFooter as C } from "./DataTable.Footer.es.js";
-import { DataTableProvider as n, useDataTable as v } from "./DataTable.context.es.js";
-import { useBeamTable as y } from "./useBeamTable.es.js";
+import { DataTableCell as C } from "./DataTable.Cell.es.js";
+import { DataTableFooter as n } from "./DataTable.Footer.es.js";
+import { DataTableProvider as c, useDataTable as i } from "./DataTable.context.es.js";
+import { useBeamTable as w } from "./useBeamTable.es.js";
+import { createBeamColumn as F } from "./DataTable.columns.es.js";
 export {
   o as DataTable,
   D as DataTableBody,
-  s as DataTableCell,
+  C as DataTableCell,
   p as DataTableColumnHeader,
-  C as DataTableFooter,
+  n as DataTableFooter,
   T as DataTableHead,
   t as DataTableHeader,
-  n as DataTableProvider,
+  c as DataTableProvider,
   u as DataTableRow,
-  b as DataTableToolbar,
-  y as useBeamTable,
-  v as useDataTable
+  m as DataTableToolbar,
+  F as createBeamColumn,
+  w as useBeamTable,
+  i as useDataTable
 };

package/lib/wip/index.cjs.js

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

package/lib/wip/index.es.js

@@ -1,29 +1,31 @@
 import { DataTable as o } from "./DataTable/DataTable.es.js";
 import { DataTableHeader as t } from "./DataTable/DataTable.Header.es.js";
 import { DataTableToolbar as m } from "./DataTable/DataTable.Toolbar.es.js";
-import { DataTableHead as f } from "./DataTable/DataTable.Head.es.js";
-import { DataTableColumnHeader as x } from "./DataTable/DataTable.ColumnHeader.es.js";
+import { DataTableHead as p } from "./DataTable/DataTable.Head.es.js";
+import { DataTableColumnHeader as b } from "./DataTable/DataTable.ColumnHeader.es.js";
 import { DataTableBody as D } from "./DataTable/DataTable.Body.es.js";
 import { DataTableRow as u } from "./DataTable/DataTable.Row.es.js";
-import { DataTableCell as H } from "./DataTable/DataTable.Cell.es.js";
-import { DataTableFooter as n } from "./DataTable/DataTable.Footer.es.js";
-import { DataTableProvider as y, useDataTable as C } from "./DataTable/DataTable.context.es.js";
-import { useBeamTable as v } from "./DataTable/useBeamTable.es.js";
-import { DateField as E } from "./DateField/DateField.es.js";
-import { ErrorBoundary as R } from "./ErrorBoundary/ErrorBoundary.es.js";
+import { DataTableCell as n } from "./DataTable/DataTable.Cell.es.js";
+import { DataTableFooter as H } from "./DataTable/DataTable.Footer.es.js";
+import { DataTableProvider as s, useDataTable as y } from "./DataTable/DataTable.context.es.js";
+import { useBeamTable as c } from "./DataTable/useBeamTable.es.js";
+import { createBeamColumn as w } from "./DataTable/DataTable.columns.es.js";
+import { DateField as P } from "./DateField/DateField.es.js";
+import { ErrorBoundary as g } from "./ErrorBoundary/ErrorBoundary.es.js";
 export {
   o as DataTable,
   D as DataTableBody,
-  H as DataTableCell,
-  x as DataTableColumnHeader,
-  n as DataTableFooter,
-  f as DataTableHead,
+  n as DataTableCell,
+  b as DataTableColumnHeader,
+  H as DataTableFooter,
+  p as DataTableHead,
   t as DataTableHeader,
-  y as DataTableProvider,
+  s as DataTableProvider,
   u as DataTableRow,
   m as DataTableToolbar,
-  E as DateField,
-  R as ErrorBoundary,
-  v as useBeamTable,
-  C as useDataTable
+  P as DateField,
+  g as ErrorBoundary,
+  w as createBeamColumn,
+  c as useBeamTable,
+  y as useDataTable
 };

package/package.json

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