@flytedan/flytebot-design-system 0.53.0 → 0.55.0

package/dist/index.d.cts

@@ -1185,7 +1185,10 @@ interface DataTableProps {
     columns: DataTableColumn[];
     rows: any[];
     compact?: boolean;
-    selectedId?: string | number;
+    /** Keys (row[rowKey]) of every selected row; each gets aria-selected and the selected styling. */
+    selectedIds?: ReadonlyArray<string | number>;
+    /** Per-row title (native tooltip), e.g. "Click to add to / remove from filter". */
+    rowTitle?: (row: any) => string;
     onRowClick?: (row: any) => void;
     rowKey?: string;
     /** First load: nothing on screen yet, so skeleton rows are drawn. */
@@ -1201,7 +1204,7 @@ interface DataTableProps {
     onSort?: (key: string) => void;
     className?: string;
 }
-declare function DataTable({ columns, rows, compact, selectedId, onRowClick, rowKey, loading, refreshing, skeletonRows, sort, onSort, className, ...rest }: DataTableProps): React.JSX.Element;
+declare function DataTable({ columns, rows, compact, selectedIds, rowTitle, onRowClick, rowKey, loading, refreshing, skeletonRows, sort, onSort, className, ...rest }: DataTableProps): React.JSX.Element;
 
 interface FilterFieldOption {
     value: string;

package/dist/index.d.ts

@@ -1185,7 +1185,10 @@ interface DataTableProps {
     columns: DataTableColumn[];
     rows: any[];
     compact?: boolean;
-    selectedId?: string | number;
+    /** Keys (row[rowKey]) of every selected row; each gets aria-selected and the selected styling. */
+    selectedIds?: ReadonlyArray<string | number>;
+    /** Per-row title (native tooltip), e.g. "Click to add to / remove from filter". */
+    rowTitle?: (row: any) => string;
     onRowClick?: (row: any) => void;
     rowKey?: string;
     /** First load: nothing on screen yet, so skeleton rows are drawn. */
@@ -1201,7 +1204,7 @@ interface DataTableProps {
     onSort?: (key: string) => void;
     className?: string;
 }
-declare function DataTable({ columns, rows, compact, selectedId, onRowClick, rowKey, loading, refreshing, skeletonRows, sort, onSort, className, ...rest }: DataTableProps): React.JSX.Element;
+declare function DataTable({ columns, rows, compact, selectedIds, rowTitle, onRowClick, rowKey, loading, refreshing, skeletonRows, sort, onSort, className, ...rest }: DataTableProps): React.JSX.Element;
 
 interface FilterFieldOption {
     value: string;

package/dist/index.js

@@ -2393,11 +2393,11 @@ function formatPercent(n, digits = 0) {
   return n.toFixed(digits) + "%";
 }
 function ChartDataTable({ caption, columns, rows }) {
-  return /* @__PURE__ */ jsxs28("table", { className: "fd-sr", children: [
+  return /* @__PURE__ */ jsx36("div", { className: "fd-sr", children: /* @__PURE__ */ jsxs28("table", { children: [
     /* @__PURE__ */ jsx36("caption", { children: caption }),
     /* @__PURE__ */ jsx36("thead", { children: /* @__PURE__ */ jsx36("tr", { children: columns.map((c, i) => /* @__PURE__ */ jsx36("th", { scope: "col", children: c }, i)) }) }),
     /* @__PURE__ */ jsx36("tbody", { children: rows.map((r, i) => /* @__PURE__ */ jsx36("tr", { children: r.map((cell, j) => j === 0 ? /* @__PURE__ */ jsx36("th", { scope: "row", children: cell }, j) : /* @__PURE__ */ jsx36("td", { children: cell }, j)) }, i)) })
-  ] });
+  ] }) });
 }
 function ChartLegend({ items, activeKey, onActivate, className = "" }) {
   if (!items.length) return null;
@@ -2937,7 +2937,8 @@ function DataTable({
   columns = [],
   rows = [],
   compact: compact3 = false,
-  selectedId,
+  selectedIds,
+  rowTitle,
   onRowClick,
   rowKey = "id",
   loading = false,
@@ -2974,7 +2975,8 @@ function DataTable({
           /* @__PURE__ */ jsx43("tbody", { className: stale ? "fd-stale" : void 0, children: loading ? Array.from({ length: skeletonRows }).map((_, i) => /* @__PURE__ */ jsx43("tr", { children: columns.map((c) => /* @__PURE__ */ jsx43("td", { className: c.numeric ? "is-num" : "", children: /* @__PURE__ */ jsx43("span", { className: "fd-skel fd-skel-text", style: { display: "inline-block", height: 13, width: c.numeric ? 52 : i % 3 === 0 ? "72%" : "88%" } }) }, c.key)) }, i)) : rows.map((r) => /* @__PURE__ */ jsx43(
             "tr",
             {
-              "aria-selected": selectedId === r[rowKey] ? "true" : void 0,
+              "aria-selected": selectedIds?.includes(r[rowKey]) ? "true" : void 0,
+              title: rowTitle ? rowTitle(r) : void 0,
               onClick: onRowClick ? () => onRowClick(r) : void 0,
               style: onRowClick ? { cursor: "pointer" } : void 0,
               children: columns.map((c) => /* @__PURE__ */ jsx43("td", { className: c.numeric ? "is-num" : "", children: c.render ? c.render(r) : r[c.key] }, c.key))